open-index/open-npm huggingface dataset:
npm package: @swdg/spotlight
Description: A reusable Spotlight command palette plugin for Vue 3.
Author: inupedia
Latest version: 0.1.1

# @swdg/spotlight

Vue 3 Spotlight 指令面板插件，支持：

- `Ctrl/Cmd + K` 呼出面板
- 历史问题记录与上下键选择
- 长按 `Tab` 进入语音录入（可选）
- 可注入业务 `submit` 逻辑与步骤状态（thinking bar）

## 安装

```bash
pnpm add @swdg/spotlight
```

## 最小使用示例

```ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createSpotlightPlugin } from "@swdg/spotlight";

const spotlight = createSpotlightPlugin({
  async submit(prompt, api) {
    api.setSteps([
      { id: "1", label: "解析问题", status: "active" },
      { id: "2", label: "执行动作", status: "pending" },
    ]);
    api.setStep("1", "done", `问题：${prompt}`);
    api.setStep("2", "active");
    await new Promise((resolve) => setTimeout(resolve, 600));
    api.setStep("2", "done", "执行完成");
  },
});

createApp(App).use(spotlight).mount("#app");
```

```vue
<!-- App.vue -->
<template>
  <router-view />
  <SpotlightPanel />
</template>
```

## 可选语音能力

给 `createSpotlightPlugin` 传入 `startVoice`：

```ts
startVoice: async (handlers) => {
  handlers.onState(true);
  handlers.onInterim("正在听你说...");

  return {
    stop: async () => {
      handlers.onFinal("这是语音识别结果");
      handlers.onState(false);
    },
  };
};
```

## 发布到 npm

在 `packages/spotlight` 目录执行：

```bash
pnpm install
pnpm build
npm login
npm publish --access public
```

首次发布 scoped 包必须带 `--access public`。

## 本地测试

在仓库根目录执行：

```bash
pnpm dev:spotlight
```

打开 `http://localhost:5176/`，按 `Ctrl/Cmd + K` 验证面板行为。
npm package: @swear-js/logger
Description: Logger for swear-js
Author: soundsnick
Latest version: 2.1.2

# 🍭 Swear JS
## @swear-js/logger
___
[![npm](https://img.shields.io/npm/v/@swear-js/logger?style=flat-square)](https://www.npmjs.com/package/@swear-js/logger)
![npm type definitions](https://img.shields.io/npm/types/@swear-js/logger?style=flat-square)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@swear-js/logger?style=flat-square)](https://bundlephobia.com/result?p=@swear-js/logger)
![GitHub](https://img.shields.io/github/license/soundsnick/swear-js?style=flat-square)

Logger package for [SwearJS](https://github.com/soundsnick/swear-js) state manager

## Installation
```
$ npm install @swear-js/logger
```

or in case you are using Yarn:
```
$ yarn add @swear-js/logger
```

## Usage
___
You can pass your custom logger to the store, or use @swear-js/logger.
Swear-js logger usage:

```typescript
import { createStore } from "@swear-js/core";
import { swearLogger } from "@swear-js/logger";

const store = createStore({ onPatch: swearLogger });
```

## Tagging
Architecture of SwearJs is built that way, patches know anything about action from where mutation was triggered. Didn't expect that, soon will be trying to fix it.
Instead you can use tagging while mutating.
Mutate function gets string tag as a second argument.
```javascript
export const countSwear = createSwear('counter', defaultState, (mutate) => ({
    decrease: () => {
        // You can also access previous value like this
        mutate((prev) => prev - 1, 'SOME TAG THAT WILL BE SHOWN IN LOGS');
    }
}));
```
npm package: @swear-js/react
Description: React support for swear-js
Author: soundsnick
Latest version: 3.1.0

# 🍭 Swear JS
## @swear-js/react
___
React package of [SwearJS](https://github.com/soundsnick/swear-js) state manager

[![npm](https://img.shields.io/npm/v/@swear-js/react?style=flat-square)](https://www.npmjs.com/package/@swear-js/react)
![npm type definitions](https://img.shields.io/npm/types/@swear-js/react?style=flat-square)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@swear-js/react?style=flat-square)](https://bundlephobia.com/result?p=@swear-js/react)
![GitHub](https://img.shields.io/github/license/soundsnick/swear-js?style=flat-square)

### Demo
Demo application is runnable via npx:
- [React] `$ npx swear-demo-react`
> Don't forget to remove created project directory after


## Installation
```
$ npm install @swear-js/core @swear-js/react
```

or in case you are using Yarn:
```
$ yarn add @swear-js/core @swear-js/react
```

## Usage
___
Initialize your store and a provider.

```javascript
// App.jsx
import { createStore } from "@swear-js/core";
import { swearContext } from "@swear-js/react";

function App() {
  const store = createStore({ onPatch: swearLogger });
  return (
    <swearContext.Provider value={store}>
      // ...
    </swearContext.Provider>
  );
}

export default App;
```

Then you have to create a swear
```typescript
// countSwear.ts
import { createSwear } from '@swear-js/react';

const defaultState = 0;

// mutate is a function that changes your state in store
export const countSwear = createSwear('counter', defaultState, (mutate) => ({
  decrease: () => {
      // You can also access previous value like this
      mutate((prev) => prev - 1);
  }
}));
```

Use your swear via hook
```javascript
// YourComponent.jsx
import React from 'react';
import { countSwear } from './countSwear';

export const YourComponent = () => {
  // set and reset actions are here by default
  const [count, { set, decrease, reset }] = useSwear(countSwear);

  return (
      <>
        <span>{count}</span>
        // Prev is a special action which can get callback with previous value
        <Button onClick={() => set((prev) => prev + 1)}>Increase</Button>
        <Button onClick={decrease}>Increase</Button>
        <Button onClick={reset}>Reset</Button>
      </>
  );
}
```

Primitive mode
```javascript
export const YourComponent = () => {
    import React from 'react';
    import { useSwearState } from '@swear-js/react';

    // You can use a primitive swear without creation, with only default `set` and `reset` actions
    const [count, { set, reset }] = useSwearState('counter', 0);

    return (
        <>
          <span>{count}</span>
          // Prev is a special action which can get callback with previous value
          <Button onClick={() => set((prev) => prev + 1)}>Increase</Button>
          <Button onClick={() => set((prev) => prev - 1)}>Decrease</Button>
          <Button onClick={reset}>Reset</Button>
        </>
    );
}
```