open-index/open-npm huggingface dataset:
npm package: @mdudek/pixi-apng
Description: Let pixi.js support apng images
Author: michael.dudek@centrum.cz
Latest version: 1.0.0

# @mdudek/pixi-apng

Let Pixi.js support apng images. And allow control of its operation.

### Important changes:   
 - Depends on pixi.js v8
 - The source code was converted to typescript 
 - Bundled by webpack 

## DEMO

- [**Use the demo**](http://jsbin.com/nodeto/edit?html,js,output)

# USE

### ES6

```bash

# Support pixi8.0+
npm install @mdudek/pixi-apng
```

```javascript
import '@mdudek/pixi-apng'
import { Application, TickerPlugin, Renderer, BatchRenderer, Loader, LoaderResource } from 'pixi.js';

Application.registerPlugin(TickerPlugin);
Renderer.registerPlugin('batch', BatchRenderer);
const app = new Application({
    width: 800,
    height: 600,
    backgroundAlpha: 0,
    backgroundColor: 0x000000,
    preserveDrawingBuffer: false,
    antialias: false,
});

const loader = Loader.shared,
    title = document.title,
    loadOption = {
        loadType: LoaderResource.LOAD_TYPE.XHR,
        xhrType: LoaderResource.XHR_RESPONSE_TYPE.BUFFER,
        crossOrigin: ''
    },
    imgs = {
        apng: 'http://isparta.github.io/compare/image/dongtai/apng/1.png'
        // apng:'./1.png'
    };


loader.add(imgs.apng, loadOption);

loader.load((progress, resources) => {
    document.title = title;

    window['apng'] = new Image(imgs.apng, resources);

    let apngSprite = window['apng'].sprite;

    apngSprite.x = 450;
    apngSprite.y = 160;
~~~~
    app.stage.addChild(apngSprite);

});

loader.onProgress.add(() => {
    document.title = Math.round(loader.progress).toString();
});

document.body.appendChild(app.view);
```

## API

### `.play(bout,callback)`

Play animation
`bout`Used to specify the number of plays
`callback`Callback executed after the specified number of plays has been completed

### `.pause()`

Pause animation

### `.stop()`

Stop animation

### `.jumpToFrame(frame)`

Jump to the specified frame

### `.getDuration()`

Get the total duration of an animation single play

### `.getFramesLength()`

Get the number of animation frames

### `.on(status,callback)`

Used to invoke the specified method in the specified phase of the animation
`status`Four states(`playing`、`played`、`pause`、`stop`)
`callback`Callback, there is a parameter. The status of the current animation is recorded.
npm package: @mdudek/pixi-apngandgif
Description: Let pixi.js support apng, gif images
Author: michael.dudek@centrum.cz
Latest version: 1.0.1

# @mdudek/pixi-apngandgif

Let Pixi.js support apng, gif images. And allow control of its operation.

### This repository is a fork of https://github.com/sbfkcel/pixi-apngAndGif

### Important changes:   
 - Depends on @pixi/* packages
 - The source code was converted to typescript 
 - Bundled by webpack 

## DEMO

- [**Use the demo**](http://jsbin.com/nodeto/edit?html,js,output)

# USE

### ES6

```bash

# Support pixi6.0+
npm install @mdudek/pixi-apngandgif
```

```javascript
import { Image } from '@mdudek/pixi-apngandgif'
import { Application } from '@pixi/app';
import { Loader, LoaderResource } from '@pixi/loaders';
import { Renderer, BatchRenderer } from '@pixi/core';
import { TickerPlugin } from '@pixi/ticker';

Application.registerPlugin(TickerPlugin);
Renderer.registerPlugin('batch', BatchRenderer);
const app = new Application({
    width: 800,
    height: 600,
    backgroundAlpha: 0,
    backgroundColor: 0x000000,
    preserveDrawingBuffer: false,
    antialias: false,
});

const loader = Loader.shared,
    title = document.title,
    loadOption = {
        loadType: LoaderResource.LOAD_TYPE.XHR,
        xhrType: LoaderResource.XHR_RESPONSE_TYPE.BUFFER,
        crossOrigin: ''
    },
    imgs = {
        gif: 'http://isparta.github.io/compare/image/dongtai/gif/1.gif',
        apng: 'http://isparta.github.io/compare/image/dongtai/apng/1.png'
        // gif:'./1.gif',
        // apng:'./1.png'
    };


loader.add(imgs.gif, loadOption);
loader.add(imgs.apng, loadOption);

loader.load((progress, resources) => {
    document.title = title;

    window['gif'] = new Image(imgs.gif, resources);
    window['apng'] = new Image(imgs.apng, resources);

    let gifSprite = window['gif'].sprite,
        apngSprite = window['apng'].sprite;

    gifSprite.x = 100;
    apngSprite.x = 450;

    gifSprite.y = 160;
    apngSprite.y = 160;

    app.stage.addChild(gifSprite);
    app.stage.addChild(apngSprite);

});

loader.onProgress.add(() => {
    document.title = Math.round(loader.progress).toString();
});

document.body.appendChild(app.view);
```

## API

### `.play(bout,callback)`

Play animation
`bout`Used to specify the number of plays
`callback`Callback executed after the specified number of plays has been completed

### `.pause()`

Pause animation

### `.stop()`

Stop animation

### `.jumpToFrame(frame)`

Jump to the specified frame

### `.getDuration()`

Get the total duration of an animation single play

### `.getFramesLength()`

Get the number of animation frames

### `.on(status,callback)`

Used to invoke the specified method in the specified phase of the animation
`status`Four states(`playing`、`played`、`pause`、`stop`)
`callback`Callback, there is a parameter. The status of the current animation is recorded.
npm package: @mdui/icons
Description: Material Icons 的 Web Components 图标组件库
Author: zdhxiong
Latest version: 1.0.3

# @mdui/icons

`@mdui/icons` 是一个独立的包，包含了 Material Icons 的所有图标，其中每一个图标组件都是一个独立的文件，你可以按需导入需要的图标组件，而无需导入整个图标库。

文档：https://www.mdui.org/docs/2/libraries/icons

## 安装

```
npm install @mdui/icons --save
```

导入需要使用的图标：

```js
import '@mdui/icons/search.js';
```

使用对应的图标组件：

```html
<mdui-icon-search></mdui-icon-search>
```
npm package: @mdui/mcp
Description: mdui MCP Server
Author: zdhxiong
Latest version: 2.1.0

# @mdui/mcp

An MCP server tailored for mdui. It provides read-only, offline, deterministic tools to discover components, icons, CSS tokens, and documentation. Designed for AI agents and IDEs to query structured data reliably.

## Available tools

- `list_components` — Lists all mdui Web Components (excluding standalone icon elements).
- `get_component_metadata` — Retrieves detailed API metadata for a component by tag name.
- `list_css_classes` — Lists all global CSS utility classes with brief descriptions.
- `list_css_variables` — Lists all global CSS custom properties (design tokens).
- `list_documents` — Lists all documentation pages.
- `get_document` — Fetches a documentation page by key or component tag name.
- `list_icon_codes` — Lists icon codes for a Material Icons variant.
- `list_icon_components` — Lists standalone icon custom elements and their import statements for a variant.

## Setup

### Claude Desktop / Cursor

```json
{
  "mcpServers": {
    "mdui": {
      "command": "npx",
      "args": ["-y", "@mdui/mcp"]
    }
  }
}
```
npm package: @mdvorak340/dots
Description: Simple HTML Tag assembler.
Author: Mozzie Dvorak
Latest version: 1.3.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<!-- OK i lied it's actually HTML -->
<h1><code class="fancy">dots</code>: an HTML Assembler</h1>
<p><code class="fancy">dots</code> is a simple, dependency-free JavaScript library that can be used to create HTML
  content quickly.</p>
<figure>
  <pre><code class="language-javascript">const myButton = button(
  "Click me!",
  id("my-button"),
  onclick(() =&gt; alert("Hello, World!")),
)</code></pre>
</figure>
<hr>
<p>The library consists of 3 primary functions:</p>
<dl>
  <dt><code class="language-javascript">tag(name, ...children)</code></dt>
  <dd>The main function; used to create tags of the given name. The children can be either <code
      class="language-javascript">HTMLElement</code>s, attributes, event handlers, or plain strings.<figure>
      <pre><code class="language-javascript">tag("h1", "A Header")</code></pre>
      <pre><code class="language-javascript">tag("ul",
  tag("li", "A List Item"),
)</code></pre>
    </figure>
  </dd>
  <dt><code class="language-javascript">attr(key, ...values)</code></dt>
  <dd>Used to create HTML attributes (<code class="language-javascript">Attr</code>s). Takes a simple key/value pair of
    strings.<figure>
      <pre><code class="language-javascript">attr("href", "https://www.spidersge.org")</code></pre>
      <pre><code class="language-javascript">attr("class", "centered", "container")</code></pre>
    </figure>
  </dd>
  <dt><code class="language-javascript">on(event, function)</code></dt>
  <dd>Used to create event handlers (of a custom class, <code class="language-javascript">EventContainer</code>). Takes
    the event name as a string (e.g. "click") and a callback function.<figure>
      <pre><code class="language-javascript">on("click", () =&gt; alert("Clicked!"))</code></pre>
    </figure>
  </dd>
</dl>
<p>There are also a large number of pre-defined helper functions for common tags, attributes, and events, such as:</p>
<table>
  <caption>A simple example using shortcut functions.</caption>
  <tr>
    <td>
      <pre><code class="language-javascript">const link = a(
  "Explanation of Cats",
  href("https://en.wikipedia.org/wiki/Cat"),
)
const app = main(
  h1("Example", style("color:#44c")),
  p("Here is a link: ", link),
  button("Click me!", onclick(() =&gt; alert("mrow"))),
)</code></pre>
    </td>
    <td>
      <pre><code class="language-html">&lt;main&gt;
  &lt;h1 style="color:#44c"&gt;Example&lt;/h1&gt;
  &lt;p&gt;
    Here is a link:
    &lt;a href="https://en.wikipedia.org/wiki/Cat"
       &gt;Explanation of Cats&lt;/a&gt;
  &lt;/p&gt;
  &lt;button&gt;Click me!&lt;/button&gt;
&lt;/main&gt;</code></pre>
    </td>
  </tr>
</table>
<hr>
<h2>Extended Example</h2>
<p><a target="_blank" href="https://mdvorak340.github.io/dots">This</a> entire page is actually an example! But yea, <em>normally</em> I would not recommend writing your page like this
  — <code class="fancy">dots</code> is intended to be used to write HTML procedurally, not declaratively.</p>
npm package: @mdwelsh/fixie
Description: This package contains an SDK and command-line interface to the [Fixie.ai](https://fixie.ai) platform.
Latest version: 4.1.1-alpha.1

# Fixie Platform SDK

This package contains an SDK and command-line interface to the [Fixie.ai](https://fixie.ai) platform.

## Web APIs

This package contains a number of ways for you to integrate a Fixie agent into your web app, depending on what level of opinionation / flexibility you prefer:

- Embed an iframe to the generic hosted Fixie UI:
  - [`<FloatingFixieEmbed />`](#floatingfixieembed)
  - [`<ControlledFloatingFixieEmbed />`](#controlledfloatingfixieembed)
  - [`<InlineFixieEmbed />`](#inlinefixieembed)
- Bring Your Own Frontend:
  - [`useFixie`](#usefixie)
  - [`FixieClient`](#fixieclient)

### Embed

Fixie provides a generic hosted UI. You can embed it in your UI, similar to how you might embed an [Intercom](https://www.intercom.com/) widget.

#### `<FloatingFixieEmbed />`

```ts
import { FloatingFixieEmbed } from 'fixie';
```

This React component will place a Fixie chat window floating above your content. It will also create a launcher button. The user can click the button to open and close the Fixie chat window.

#### `<ControlledFloatingFixieEmbed />`

```ts
import { ControlledFloatingFixieEmbed } from 'fixie';
```

This React component will place a Fixie chat window floating above your content. Unlike `FloatingFixieEmbed`, it does not additionally create a launcher button. Instead, you manage the visibility yourself, via the `visible` prop.

#### `<InlineFixieEmbed />`

```ts
import { InlineFixieEmbed } from 'fixie';
```

This React component will embed a Fixie chat window inline with your content.

### Bring Your Own Frontend

If you want to directly integrate Fixie into your webapp, use these APIs.

#### `useFixie`

```ts
import { useFixie } from 'fixie';
```

This hook provides a fully managed API for a conversation. It returns a number of fields you can use to drive a rich UI, including loading states and debug diagnostics.

#### `FixieClient`

```ts
import { FixieClient } from 'fixie';
```

This low-level API provides direct access to the Fixie Conversation and Corpus APIs. You need to manage things like loading state and response parsing on your own, but it's the most flexible.

## Dev Notes

To publish this package:

1. Update the version number in `package.json`.
1. Run `yarn install` in the root to get the changes to `yarn.lock`.
1. Finally, run `yarn npm publish` in this directory to get the updated package published to npm.
npm package: @mdworld/bhg
Description: A simple toolkit for Azure
Author: M.D. van Es @mdworldNL
Latest version: 1.0.2

# bhg

> A simple toolkit for Azure

[Azure](https://azure.microsoft.com/en-us/) (a kind of [blue](https://en.wikipedia.org/wiki/Azure_(color))) + [Code**star**](https://code-star.github.io) = [Blue Hypergiant](https://en.wikipedia.org/wiki/Hypergiant#Blue_hypergiants) = `bhg`


[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/bhg.svg)](https://npmjs.org/package/bhg)
[![Downloads/week](https://img.shields.io/npm/dw/bhg.svg)](https://npmjs.org/package/bhg)
[![License](https://img.shields.io/npm/l/bhg.svg)](https://github.com/mdvanes/bhg/blob/master/package.json)

<!-- toc -->
* [bhg](#bhg)
* [Usage](#usage)
* [Commands](#commands)
* [Publishing](#publishing)
<!-- tocstop -->
* [bhg](#bhg)
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
* [Purpose](#purpose)
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->

## Purpose

1. Try out [oclif](https://oclif.io/)
2. Make it easier to remember specific Azure commands (yes, that could be a bash script)

# Usage
<!-- usage -->
```sh-session
$ npm install -g @mdworld/bhg
$ bhg COMMAND
running command...
$ bhg (-v|--version|version)
@mdworld/bhg/1.0.2 linux-x64 node-v15.0.1
$ bhg --help [COMMAND]
USAGE
  $ bhg COMMAND
...
```
<!-- usagestop -->
```sh-session
$ npm install -g @mdworld/bhg
$ bhg COMMAND
running command...
$ bhg (-v|--version|version)
@mdworld/bhg/1.0.0 linux-x64 node-v15.0.1
$ bhg --help [COMMAND]
USAGE
  $ bhg COMMAND
...
```
<!-- usagestop -->
```sh-session
$ npm install -g bhg
$ bhg COMMAND
running command...
$ bhg (-v|--version|version)
bhg/0.0.0 linux-x64 node-v15.0.1
$ bhg --help [COMMAND]
USAGE
  $ bhg COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->

<!-- commandsstop -->

<!-- commandsstop -->

<!-- commandsstop -->
# Publishing

```bash
$ npm version patch
$ npm publish
$ npm -g @mdworld/bhg
```