open-index/open-npm huggingface dataset:
npm package: @litt1e-p/breadcrumb
Description: breadcrumb directive for vue
Author: litt1e-p4ul@gmail.com
Latest version: 0.1.2

# Breadcrumb

> breadcrumb directive component for vue 2.x

# Installation

```shell
npm i @litt1e-p/breadcrumb --save
```

# Usage

### just add a directive `v-breadcrumb` in the html element after adding router meta with `title` value or router's name by default

Example:


- use with only one vue directive

```js
<div v-breadcrumb></div>
```

- use with html element attributes

```js
<div v-breadcrumb="{separator: '>', paths: [{name: 'App', to: '/'}, {name: 'Module'}, {name: 'Index'},]}"></div>
```

# Screenshot

<img src="https://github.com/litt1e-p/breadcrumb/raw/master/screenshot.png" width=500>

<img src="https://github.com/litt1e-p/breadcrumb/raw/master/screenshot2.png" width=500>

# License

MIT
npm package: @litt1e-p/graphi
Description: a high performance d3.js graph tree data visualization
Author: litt1e-p
Latest version: 0.1.0

# Graphi

a high performance [d3.js](https://d3js.org/) graph tree data visualization component for vue

#### Installation

```js
npm i @litt1e-p/graphi
```

#### Usage

1. global registration

```js
// in main.js
import Graphi from '@litt1e-p/graphi'
import '@litt1e-p/graphi/dist/graphi.css'

Vue.use(Graphi)
```

2. use as vue component

```js
// in your vue file
import { Graphi } from '@litt1e-p/graphi'

export default {
  components: {
    Graphi
  }
  ...
}
```

### Configuration

sample data for v-model:

```js
{
  "name": "d3js.org",
  "childs": [
    {
      "name": "child name 1"
    }
    ...
  ],
  "members": [
    {
      "name": "member name 1"
    }
    ...
  ],
  "outsides": [
    {
      "name": "other name 1"
    }
    ...
  ]
}
```

```js
<graphi v-model="your data to visualize"/>
```
for more detail

```js
<graphi v-model="your data to visualize" :conf="{ width: 1000, height: 500, zoomToFit: true, bubbleRadius: 60, arrowOffset: 2, fitScale: 0.6, relations: {'childs': 'sons', ...}}"/>
```


#### Screenshots

![](./screenshots/screenshot.gif)
npm package: @litt1e-p/notification-center
Description: NotificationCenter for vue which is base on publish-subcribe pattern
Author: litt1e-p
Latest version: 0.0.5

# NotificationCenter

NotificationCenter for vue which is base on publish-subcribe pattern and Vue emitter

# Installation

```js
npm i @litt1e-p/notification-center --save
```

# Usage

```js
import { NotificationCenter } from '@litt1e-p/notification-center'

// 1. add observer
NotificationCenter.$addObserver('noticeName', cb)

// 2. post a message
NotificationCenter.$post('noticeName', someMessage)

// 3. remove an observer when destroy
NotificationCenter.$removeObserver('noticeName', cb)


function cb (msg) {
  console.info(msg)
}
/////
```
[for more usage](https://vuejs.org/)
npm package: @litt1e-p/percentage-stack-bar
Description: a stack bar with percentage view for vue
Author: litt1e-p
Latest version: 0.0.9

# PercentageStackBar

stack bar with percentage view for vue

#### Installation

```js
npm i @litt1e-p/percentage-stack-bar
```

#### Usage

1. global registration
```js
// in main.js
import PercentageStackBar from '@litt1e-p/percentage-stack-bar'
import '@litt1e-p/percentage-stack-bar/dist/percentageStackBar.css'

Vue.use(PercentageStackBar)
```

2. use as vue component

```js
// in your vue file
import PercentageStackBar from '@litt1e-p/percentage-stack-bar'
import '@litt1e-p/percentage-stack-bar/dist/percentageStackBar.css'

export default {
  components: {
    PercentageStackBar
  }
  ...
}
```

#### Screenshots

![](./screenshots/img@2x.png)
npm package: @litt1e-p/treant
Description: visualization of tree diagrams inspired by treant-js
Author: litt1e-p
Latest version: 0.0.5

<pre>
  _______                   _             
 |__   __|                 | |         
    | |_ __ ___  __ _ _ __ | |_ 
    | | '__/ _ \/ _` | '_ \| __|
    | | | |  __/ (_| | | | | |_       
    |_|_|  \___|\__,_|_| |_|\__| 
                                       
                                  
</pre>

# Introduce

Visualization of tree diagrams inspired by [treant-js](https://github.com/fperucic/treant-js)

# Installation

```js
npm i @litt1e-p/treant --save
```

# Usage

```js
import Treant from '@litt1e-p/treant'
import '@litt1e-p/treant/dist/treant.css'
// or 
@import '@litt1e-p/treant/dist/treant.css'
```
[for more usage](https://github.com/fperucic/treant-js/tree/master/examples) 

# Screenshots

![](https://github.com/litt1e-p/treant/raw/master/screenshots/1.png)
npm package: @litte/react
Description: UI components that you can use everywhere, designed for flexibility.
Author: Aris Ripandi
Latest version: 0.0.0

# Litte React

<!-- [![jsr score](https://jsr.io/badges/@litte/react/score)](https://jsr.io/@litte/react) -->
<!-- [![jsr version](https://jsr.io/badges/@litte/react)](https://jsr.io/@litte/react) -->
[![npm version](https://img.shields.io/npm/v/@litte/react)](https://www.npmjs.com/package/@litte/react)
[![npm downloads](https://img.shields.io/npm/dm/@litte/react)](https://www.npmjs.com/package/@litte/react)
[![license-mit](https://img.shields.io/badge/License-MIT-greens.svg)][license-mit]

Litte React is a customizable UI component for React based on [Lit][lit] and [TypeScript][typescript].
Part of the [Litte][litte-homepage] component library, it provides a modern web component solution with
excellent performance and accessibility features.

Perfect for developers seeking a customizable UI component that prioritizes accessibility and performance,
Litte React streamlines implementation with a simple API and deep customization options.

Visit the [homepage][litte-homepage] for more detailed information.

**Compatibility**: ESM-only.

## Installation

```sh
# Install with npm
npm install @litte/react

# Install with pnpm
pnpm add @litte/react

# Install with yarn
yarn add @litte/react
```

## Usage

Import the component in your JSX or TSX file:

```ts
import { Button } from '@litte/react/button'
```

For detailed usage examples, see the [Litte Documentation](https://litte.dev/docs).

## Thanks

<p align="left" style="margin-top: 20px;">
  <a href="https://www.netlify.com/?utm_source=litte&utm_medium=npmjs&utm_campaign=README" style="margin-right: 12px;">
    <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Netlify" height="36px" />
  </a>
</p>

Thanks to [Netlify](https://www.netlify.com/) for providing hosting for the website and Storybook of this project.

## License

Licensed under the [MIT license][license-mit].

Copyrights in this project are retained by their contributors.

See the [LICENSE][license-mit] file for more information.

[litte-homepage]: https://litte.dev
[license-mit]: https://github.com/riipandi/litte/blob/main/LICENSE
[typescript]: https://www.typescriptlang.org
[lit]: https://lit.dev
npm package: @litte/themes
Description: UI components that you can use everywhere, designed for flexibility.
Author: Aris Ripandi
Latest version: 0.0.0

# Litte Themes

<!-- [![jsr score](https://jsr.io/badges/@litte/themes/score)](https://jsr.io/@litte/themes) -->
<!-- [![jsr version](https://jsr.io/badges/@litte/themes)](https://jsr.io/@litte/themes) -->
[![npm version](https://img.shields.io/npm/v/@litte/themes)](https://www.npmjs.com/package/@litte/themes)
[![npm downloads](https://img.shields.io/npm/dm/@litte/themes)](https://www.npmjs.com/package/@litte/themes)
[![license-mit](https://img.shields.io/badge/License-MIT-greens.svg)][license-mit]

Litte Themes is a package containing a collection of CSS themes designed specifically for the
[Litte][litte-homepage] component library. It provides ready-to-use styles that help you customize
the look and feel of your Litte components to match your application's branding or design requirements.

Visit the [homepage][litte-homepage] for more detailed information.

**Compatibility**: ESM-only.

## Installation

```sh
# Install with npm
npm install @litte/themes

# Install with pnpm
pnpm add @litte/themes

# Install with yarn
yarn add @litte/themes
```

## Usage

Import the theme CSS file into your project:

```ts
import "@litte/themes/default/theme.css";
```

For more details and a list of available themes, visit the [Litte Documentation](https://litte.dev/docs).

## Thanks

<p align="left" style="margin-top: 20px;">
  <a href="https://www.netlify.com/?utm_source=litte&utm_medium=npmjs&utm_campaign=README" style="margin-right: 12px;">
    <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Netlify" height="36px" />
  </a>
</p>

Thanks to [Netlify](https://www.netlify.com/) for providing hosting for the website and Storybook of this project.

## License

Licensed under the [MIT license][license-mit].

Copyrights in this project are retained by their contributors.

See the [LICENSE][license-mit] file for more information.

[litte-homepage]: https://litte.dev
[license-mit]: https://github.com/riipandi/litte/blob/main/LICENSE
[typescript]: https://www.typescriptlang.org
[lit]: https://lit.dev
npm package: @little-bonsai/ballpoint
Description: cli for formatting ink files
Author: Freddie Gilbraith
Latest version: 0.13.2

# Ballpoint

> A CLI for formatting [ink] files

Also available in [web app] form

## Get Started

### Step 1 Install node.js

use [nvm] to install node

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
nvm install 18
nvm use 18
```

### Step 2 Ballpoint

```bash
npm install -g @little-bonsai/ballpoint
```

### Step 3 Run

```bash
ballpoint **/*.ink
```

## Acknowledgements

This would not have been possible without the great work of

-  [ink]
-  [inkjs]

## Contributing

Bug Reports and PRs are very welcome.

If filing a bug report, please include:

-  your original ink code
-  how it was formatted
-  how it should be formatted
-  any additional information

If opening a MR, please include:

-  a description of the change
-  at least 1 test showing the input and output

## TODO

-  [x] npm publish
-  [x] repeated application test
-  [x] tags
-  [x] multiple tags
-  [x] ref arguments
-  [x] INCLUDE handling
-  [x] web hosted
   -  [x] basic hosting
   -  [x] error reporting
-  [x] comments
-  [x] directives based approach
-  [x] api?
-  [x] multi-lined multi-conditioned choices
-  [x] dynamic tags
-  [ ] PR GetType overrides into inkjs
-  [ ] PR Parser export into inkj
-  [ ] sort INCLUDEs option
-  [ ] make package available as importable lib
-  [ ] look at integrating into inky

[prettier]: https://prettier.io/
[ink]: https://github.com/inkle/ink/
[nvm]: https://github.com/nvm-sh/nvm
[inkjs]: https://github.com/y-lohse/inkjs
[web app]: https://bonsai.li/ballpoint
npm package: @little-bonsai/ingrates
Description: An isomorphic actor system
Author: Freddie Gilbraith
Latest version: 0.10.2

# Ingrates

> An isomorphic actor system

![minzipped size](https://badgen.net/bundlephobia/minzip/@little-bonsai/ingrates)
![version](https://badgen.net/npm/v/@little-bonsai/ingrates)
![license](https://badgen.net/npm/license/@little-bonsai/ingrates)

---

`ingrates` is an actor system based on [async][async] [generators][generators]. I provides a very small API surface area and tries to remain relatively out of your way.

You can find docs at [ingrates.littlebonsai.co.uk](https://ingrates.littlebonsai.co.uk)

## Example

```javascript
import createActorSystem from "@little-bonsai/ingrates";

async function* ChildActor({ parent, dispatch }, firstname, lastname) {
  const msg = yield;

  if (msg.type === "HELLO") {
    dispatch(msg.src, {
      type: "GOODBYE",
      msg: \`say goodbye to \${firstname} \${lastname}\`,
    });
  }
}

async function* RootActor({ spawn, self, dispatch }) {
  const myChild = spawn(ChildActor, "Bert", "Jurnegen");

  dispatch(myChild, { type: "HELLO" });

  while (true) {
    const msg = yield;
    if (msg.type === "GOODBYE") {
      console.log("Please... my son. He's very sick");
    }
  }
}


createActorSystem()(RootActor);
```

[async]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[generators]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/GeneratorA
npm package: @little-core-labs/eslint-config-12core
Description: 12Core Shareable eslint config
Author: Bret Comnes
Latest version: 1.0.0

# eslint-config-12core
![Node.js CI](https://github.com/little-core-labs/eslint-config-12core/workflows/Node.js%20CI/badge.svg)

A shareable [eslint](ghub.io/eslint) config for 12core projects.

## Usage

```console
npm i @little-core-labs/eslint-config-12core eslint --save-dev
```

Then create an `.eslintrc.json` file in the root of your directory:

```json
{
  "extends": "@little-core-labs/eslint-config-12core"
}
```

Then run eslint on whatever code you want to lint:

```console
eslint --ext .js esm/
```

Make the linting step part of your testing script.

## What

`@little-core-labs/eslint-config-12core` bundles standard + standard-jsx with additional consutomizations that work for all of us at little-core-labs.

Because we control the shareable config, the normally peer-dependent eslint plugins are actually included as transient dependencies, so that usage of this config is a lot more convenient (only 2 deps, instead if 5+).

## Contributing

If you would like to make rule changes, please submit a PR with some discussion with rational.

## Editor plugins

You should use an editor plugin so that you can see the warnings while working, and take advantage of auto formatting:

### VSCode

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### Sublime

- [SublimeLinter](https://github.com/SublimeLinter/SublimeLinter)
- [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)
- [StandardFormat](https://github.com/bcomnes/sublime-standard-format) (can be customized to run eslint --fix)

### Your favorite editor

... please PR notes you have!

## React

If you want to use the standard react plugin, follow these steps:

### Install deps

```console
npm i @little-core-labs/eslint-config-12core eslint babel-eslint eslint-config-standard-react --save-dev
```

### Create eslint config

Create a `.eslintrc.json` with the following.

```json
{
  "parser": "babel-eslint",
  "extends": ["@little-core-labs/eslint-config-12core", "standard-react"]
}
```

### Run eslint

```console
eslint --ext .js esm/
```
npm package: @little-core-labs/hyperid-wasm
Description: hyperid implementation written in ZZ compiled to WASM format
Author: Joseph Werle
Latest version: 0.1.2

hyperid-wasm
============

> A HyperID implementation written in [ZZ][zz] compiled to WebAssembly (WASM) format

## Installation

### Node

```sh
$ npm install @little-core-labs/hyperid-wasm
```

### WAPM

```sh
$ wapm install jwerle/hyperid-wasm
```

## Usage

```js
const hyperid = require('hyperid-wasm')

hyperid.ready(() => {
  const hid = hyperid({ fixedLength: true, startFrom: 1024 })
  console.log(hid()) // atd1gpRDT1SJZnaOhdLR5Q/0000001024
  console.log(hid()) // atd1gpRDT1SJZnaOhdLR5Q/0000001025
})
```

## API

### `generator = hyperid([opts])`

Create a new `hyperid` generator where `opts` is the same arguments
given to the original [hyperid][hyperid].

```js
const generator = hyperid({
  fixedLength: false, // use a fixed length counter
  startFrom: 0, // initial counter value
  urlSafe: false, // use URL safe characters
})
```

### `id = generator()`

Generate a hyperid from `hyperid` context. (See above)

```js
const id = generator()
```

## Benchmark

This [original module is][hyperid] **~4x faster** than _this one_.

```
hyperid generate - variable length (original) x 11,806,789 ops/sec ±1.59% (83 runs sampled)
hyperid generate - variable length (wasm) x 4,179,909 ops/sec ±0.95% (88 runs sampled)
hyperid generate - fixed length (original) x 9,347,663 ops/sec ±3.26% (88 runs sampled)
hyperid generate - fixed length (wasm) x 3,772,629 ops/sec ±2.14% (92 runs sampled)
```

## Limits

### Initial Memory

By default, this module allocates 2 pages of memory for the WebAssembly module.
That is `2 * 64 * 1024` bytes.

### Maximum Memory

This module allows at most 256 pages of memory. That is `256 * 64 *
1024` bytes.

## See Also

* https://github.com/mcollina/hyperid

## License

MIT

[zz]: https://github.com/zetzit/zz
[hyperid]: https://github.com/mcollina/hyperid
npm package: @little-core-labs/varint-wasm
Description: A varint implementation compiled to WASM format
Author: Joseph Werle
Latest version: 0.0.4

varint-wasm
===========

> A [varint][varint] implementation for WebAssembly (WASM) written in [ZZ][zz] that
> implements an [_Abstract Encoding_][abstract-encoding] interface.

## Installation

### Node

```sh
$ npm install @little-core-labs/varint-wasm
```

### WAPM

```sh
$ wapm install jwerle/varint-wasm
```

## Usage

```js
const varint = require('varint-wasm')

// wait for module to be ready if loading in a browser environment
varint.ready(() => {
  const encoded = varint.encode(64 * 1024)
  console.log(encoded) // <Buffer 80 80 04>

  const decoded = varint.decode(encoded)
  console.log(decoded) // 65536
})
```

## API

### `buffer = encode(number[, buffer[, offset]])`

Encode a `number` optionally into `buffer` at an optionally
specified `offset`.

### `number = decode(buffer[, offset])`

Decode an input buffer into an integer optionally an optionally
specified `offset`.

### `promise = ready(callback)`

Returns a promise that resolves or rejects when the WebAssembly exports
are loading. In some cases, this may happen synchronously when this
module is loaded.

```js
await b64.ready()
```

## Limits

### Max Integer

Because 32-bit integers are only supported in WASM at the time of
writing, you can only encode numbers up `2**31 -1`.

### Initial Memory

By default, this module allocates 2 pages of memory for the WebAssembly module.
That is `2 * 64 * 1024` bytes.

### Maximum Memory

This module allows at most 256 pages of memory. That is `256 * 64 *
1024` bytes.

## See Also

* https://github.com/chrisdickinson/varint

## License

MIT

[zz]: https://github.com/zetzit/zz
[varint]: https://github.com/chrisdickinson/varint
[abstract-encoding]: https://github.com/mafintosh/abstract-encoding
npm package: @little-dash/utils
Description: Shared utilities for littledash applications
Latest version: 0.1.2

# @littledash/utils

Shared utilities for building littledash applications.

## Installation

```bash
yarn add @littledash/utils
# or
npm install @littledash/utils
```

## Features

### Image Utilities

Convert PNG images to RGB565 format for display on littledash devices:

```typescript
import { loadPngAsRgb565, loadPngAsElement } from "@littledash/utils/image";

// Load and convert image
const imageData = await loadPngAsRgb565("./logo.png", 100, 50);

// Or get a ready-to-use display element
const element = await loadPngAsElement("./logo.png", 10, 10, 100, 50);
```

### Device Configuration

Configure littledash devices with WiFi credentials and server URL:

```typescript
import { configureDevice } from "@littledash/utils/configure-device";

await configureDevice({
  serverUrl: "http://192.168.1.100:3000",
  envPath: "./.env", // optional
});
```

Or use the CLI:

```bash
# Auto-detect server URL
yarn littledash-configure

# Specify server URL
yarn littledash-configure 192.168.1.100:3000
```

## Usage in Your Project

### 1. Update package.json

```json
{
  "dependencies": {
    "@littledash/utils": "file:../../packages/littledash-utils"
  },
  "scripts": {
    "configure-device": "littledash-configure"
  }
}
```

### 2. Update your imports

Replace local imports with the package:

```typescript
// Before
import { loadPngAsRgb565 } from "./utils/image.js";

// After
import { loadPngAsRgb565 } from "@littledash/utils/image";
```

### 3. Use the configure-device script

```bash
yarn configure-device
```

## API

### Image Functions

#### `loadPngAsRgb565(filePath, targetWidth?, targetHeight?)`

Loads a PNG file and converts it to RGB565 format.

**Parameters:**

- `filePath` (string): Path to PNG file
- `targetWidth` (number, optional): Target width for resizing
- `targetHeight` (number, optional): Target height for resizing

**Returns:** `Promise<{ data: string; width: number; height: number }>`

#### `loadPngAsElement(filePath, x, y, targetWidth?, targetHeight?)`

Loads a PNG and returns a display element configuration.

**Parameters:**

- `filePath` (string): Path to PNG file
- `x` (number): X position on display
- `y` (number): Y position on display
- `targetWidth` (number, optional): Target width for resizing
- `targetHeight` (number, optional): Target height for resizing

**Returns:** Display element object

### Configuration Functions

#### `configureDevice(options?)`

Configures a littledash device via serial connection.

**Parameters:**

- `options.serverUrl` (string, optional): Server URL to configure
- `options.envPath` (string, optional): Path to .env file

**Returns:** `Promise<void>`

#### `runConfigureDeviceCLI()`

CLI entry point for device configuration. Reads from .env and command line arguments.

## Environment Variables

Create a `.env` file in your project root:

```env
WIFI_SSID=your_wifi_ssid
WIFI_PASSWORD=your_wifi_password
PORT=3000
```

## License

MIT
npm package: @little-org/little-utils
Description: Little lib with utils functions for Javascript
Author: little-org
Latest version: 0.0.2

## Little Utils

An opinionated easy to use javascript utils lib

### Motivation
Much of what we're developing here is easy to develope in your current project. Our goal is to create an easy-to-use lib to avoid code duplication and rewrite of utils across your different projects

A project must have some interesting parts to works properly:
- clean code
- unit tests
- light and fast build
- continuous integration

All of those parts requires time and persistence from developers to learn how to search/validates/tests/implement. This is the type of learning that motivates us to create this library.

### Usage
With npm: npm install @little-org/little-utils

### Credits
- To [redux](https://github.com/reduxjs/redux) repository: this project architecture is based on Redux's. This decision was made based on redux architecture maturity
npm package: @little-org/penknife
Description: Little lib with utils functions for Javascript
Author: little-org
Latest version: 0.0.2

## Little Utils

An opinionated easy to use javascript utils lib

### Motivation
Much of what we're developing here is easy to develope in your current project. Our goal is to create an easy-to-use lib to avoid code duplication and rewrite of utils across your different projects

A project must have some interesting parts to works properly:
- clean code
- unit tests
- light and fast build
- continuous integration

All of those parts requires time and persistence from developers to learn how to search/validates/tests/implement. This is the type of learning that motivates us to create this library.

### Usage
With npm: npm install @little-org/little-utils

### Credits
- To [redux](https://github.com/reduxjs/redux) repository: this project architecture is based on Redux's. This decision was made based on redux architecture maturity
npm package: @little-saga/use-saga
Description: Run little-saga inside a React component using React hooks.
Author: shinima
Latest version: 0.8.0

[![NPM Package](https://img.shields.io/npm/v/@little-saga/use-saga.svg?style=flat-square)](https://www.npmjs.org/package/@little-saga/use-saga)

## @little-saga/use-saga

使用 [React hooks 特性](https://reactjs.org/docs/hooks-intro.html) 在一个组件的生命周期内运行 little-saga。

该类库提供了一个函数 `useSaga`，用于在一个 React 函数组件的生命周期内运行 saga。`useSaga` 像是 [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer) 的增强版，`useSaga` 在创建 redux-like 状态容器的同时会启动我们所提供的 saga；当组件卸载时，saga 会自动结束运行。

**注意事项：**

- useSaga 是一个 React hook，使用 useSaga 需要符合 hook 的书写规则。
- 该类库只能与 little-saga 一起使用，且要求 React 为支持 hooks 的版本（>= 16.7）.

## 使用方式

```jsx
import useSaga from '@little-saga/use-saga'

function OurReactComponent() {
  const [state, dispatch] = useSaga(options)

  // ... 其他代码 ...
}
```

**参数 `options`** 是一个对象，具体字段如下：

| 字段            | 类型              | 默认值      | 含义                                                                                                                                    |
| --------------- | ----------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `saga`          | 生成器函数        | 必须字段    | 所要执行的 saga 函数                                                                                                                    |
| `args`          | 数组              | `[]`        | 启动 saga 函数时所使用的参数                                                                                                            |
| `reducer`       | 函数              | `x => x`    | 指定 state 如何响应 actions                                                                                                             |
| `initialState`  | 任意值            | `undefined` | 初始状态                                                                                                                                |
| `initialAction` | 任意合法的 action | `undefined` | 创建状态容器时用于初始化状态的 action<br/>[详见 `useReducer` 文档](https://reactjs.org/docs/hooks-reference.html#lazy-initialization-1) |
| `customEnv`     | 任意值            | `undefined` | 指定 运行运行环境对象中的额外字段 <br/>[详见 runSaga#options.customEnv](https://github.com/little-saga/little-saga#runsaga)             |
| `taskContext`   | 普通对象          | `undefined` | root task 的初始 context <br/>[详见 runSaga#options.taskContext](https://github.com/little-saga/little-saga#runsaga)                    |

**`useSaga` 的返回值**与 `useReducer` 的返回值相同，一般我们可以用数组解构的方式将其赋值给变量 `state` 与 `dispatch`。`state` 表示当前状态容器的最新状态，`dispatch` 用于向状态容器 / saga 运行时派发 action。

## 使用举例

* [简单的 counter 应用](https://stackblitz.com/edit/simple-use-saga-example?embed=1&file=index.js)
* [扫雷游戏](https://github.com/shinima/minesweeper)
* [temme 网站前端](https://github.com/shinima/temme/tree/master/packages/website-frontend)
npm package: @little-samo/samo-ai-sdk
Description: SamoAI SDK
Latest version: 0.8.0

<div align="center">
  <img src="https://media.githubusercontent.com/media/little-samo/CI/master/assets/characters/samo/profile.png" alt="Little Samo Mascot" width="250" />
  <h1>SamoAI SDK</h1>
  <p><em>TypeScript SDK for <a href="https://github.com/little-samo/SamoAI">@little-samo/samo-ai</a> with comprehensive DTOs and configuration models</em></p>
</div>

<p align="center">
  <a href="#features">Features</a> •
  <a href="#installation">Installation</a> •
  <a href="#learn-more">Learn More</a> •
  <a href="#license">License</a>
</p>

## Features

- **Type-safe DTOs** for all SamoAI entities (Agents, Users, Locations, Items)
- **Zod validation schemas** for runtime type checking
- **Configuration models** with comprehensive validation
- **Event system** for real-time updates
- **Request/Response types** for API interactions
- **Full TypeScript support** with strict type checking

## Installation

Install the package using npm:

```bash
npm install @little-samo/samo-ai-sdk
```

Or using yarn:

```bash
yarn add @little-samo/samo-ai-sdk
```

## Learn More

- [SamoAI Core Library](https://github.com/little-samo/SamoAI) - The main SamoAI framework
- [SamoAI Example CLI](https://github.com/little-samo/SamoAI-Example-CLI) - Example implementation

## License

[MIT License](LICENSE)

---

<div align="center">
  <p>Made with ❤️ by the SamoAI Team</p>
</div>