open-index/open-npm huggingface dataset:
npm package: @quiui/x-json
Description: easy to use JSON parse/stringify with circular reference auto solving
Author: Eng. Daniel Prado
Latest version: 1.0.0

XJSON
=====

Add circual reference auto solving capabilities to `JSON.parse()` and `JSON.stringify()` functions, licensed under MIT license.

# Install
```bash
npm i @quiui/x-json
```

# Usage
You can use this lib by calling it directly or by "installing" it over the global JSON.

## Directly calling
```javascript
const XJSON = require('@quiui/x-json');

const person = {name: 'foo', lastName: 'bar'};

console.log(XJSON.stringify(person));
// OUTPUT: {"name":"foo","lastName":"bar"}

const person2 = XJSON.parse('{"name":"Bar","lastName":"Foo"}');
// person2: {name: "Bar", lastName: "Foo"}
```

## Installing it over the global JSON
```javascript
const XJSON = require('@quiui/x-json');

// Installs XJSON over JSON
XJSON.replaceJSON();

const person = {name: 'foo', lastName: 'bar'};

// Note that now you can call XJSON by using global JSON
console.log(JSON.stringify(person));
// OUTPUT: {"name":"foo","lastName":"bar"}

const person2 = JSON.parse('{"name":"Bar","lastName":"Foo"}');
// person2: {name: "Bar", lastName: "Foo"}

// You can reverte XJSON installation anytime
XJSON.restoreJSON();
```

# Limitations
`XJSON.parse()` and `XJSON.stringify()` functions only accept one argument: "value". There's no way to pass a reviver function to it, or any other options. We thank you if you can help improve our library ;)
npm package: @quiver-js/core
Description: Micro framework for arrow-js reactive JavaScript library.
Author: Jonathan Zumbrun
Latest version: 1.0.3

# Quiver JS

Compile-less native component SPA framework.

## Made with

### arrow js. Provides data reactivity and html templating.

[arrow-js](https://www.arrow-js.com/)

### page. Provides url page routing.

[page](https://visionmedia.github.io/page.js/)

### css template. Provides css templating within reactive states.

./lib/css.js

## Features

Page routing, functional components, native htm using native html templates,
css management per component, easy data reactivity, esm, no compilation or bundling.

## Install

VS Code:

1. Install Live Server extension
2. Install es6-string-html extension for html syntax highlighting

## Run

1. Right click on /docs/index.html and open with Live Server
npm package: @quiver/firebase-authentication
Description: * Implement all available Firebase Authentication login methods. * Be easily customizable * Provide an introduction to the Firebase Authentication SDK for JavaScript
Latest version: 0.1.3

# Firebase Authentication (Web)

### Goals

* Implement all available Firebase Authentication login methods.
* Be easily customizable
* Provide an introduction to the Firebase Authentication SDK for JavaScript

### Tests and Demo

* Clone the repo: `git clone https://github.com/deltaepsilon/quiver.git`
* Navigate to this directory and install dependencies: `cd packages/firebase-authentication && yarn`
* Tests `yarn test`
* Serve demo `yarn start`
* Build `yarn build`

### Framework

Firebase Authentication is built on [Preact](https://preactjs.com/); however, I did my best to
separate the Preact from the vanilla ES2015 JavaScript.

Preact is mostly a JSX templating engine. There's not much to understand beyond the JSX. But if
you're not a fan of JSX, just pay attention to `services/auth.service.js`... it's vanilla ES2015
JavaScript and it encapsulates all of the Firebase-specific functionality.
npm package: @quiver/storage-uploader
Description: * Implement all available Firebase Authentication login methods. * Be easily customizable * Provide an introduction to the Firebase Authentication SDK for JavaScript
Latest version: 0.0.4

# Firebase Authentication (Web)

### Goals

* Implement all available Firebase Authentication login methods.
* Be easily customizable
* Provide an introduction to the Firebase Authentication SDK for JavaScript

### Tests and Demo

* Clone the repo: `git clone https://github.com/deltaepsilon/quiver.git`
* Navigate to this directory and install dependencies: `cd packages/firebase-authentication && yarn`
* Tests `yarn test`
* Serve demo `yarn start`
* Build `yarn build`

### Framework

Firebase Authentication is built on [Preact](https://preactjs.com/); however, I did my best to
separate the Preact from the vanilla ES2015 JavaScript.

Preact is mostly a JSX templating engine. There's not much to understand beyond the JSX. But if
you're not a fan of JSX, just pay attention to `services/auth.service.js`... it's vanilla ES2015
JavaScript and it encapsulates all of the Firebase-specific functionality.
npm package: @quixomatic/pdfmake-with-gradients
Description: PDFMake fork with gradient backgrounds and container backgrounds support
Author: Bartek Pampuch
Latest version: 0.2.20

# pdfmake [![Node.js CI][githubactions_img]][githubactions_url] [![GitHub][github_img]][github_url] [![npm][npm_img]][npm_url] [![Bower][bower_img]][bower_url] [![Packagist][packagist_img]][packagist_url] [![CDNJS][cdnjs_img]][cndjs_url]

[githubactions_img]: https://github.com/bpampuch/pdfmake/actions/workflows/node.js.yml/badge.svg?branch=0.2
[githubactions_url]: https://github.com/bpampuch/pdfmake/actions

[github_img]: https://img.shields.io/github/release/bpampuch/pdfmake.svg?colorB=0E7FBF
[github_url]: https://github.com/bpampuch/pdfmake/releases/latest

[npm_img]: https://img.shields.io/npm/v/pdfmake.svg?colorB=0E7FBF
[npm_url]: https://www.npmjs.com/package/pdfmake

[bower_img]: https://img.shields.io/bower/v/pdfmake.svg?colorB=0E7FBF
[bower_url]: https://github.com/bpampuch/pdfmake

[packagist_img]: https://img.shields.io/packagist/v/bpampuch/pdfmake.svg?colorB=0E7FBF
[packagist_url]: https://packagist.org/packages/bpampuch/pdfmake

[cdnjs_img]: https://img.shields.io/cdnjs/v/pdfmake.svg?colorB=0E7FBF
[cndjs_url]: https://cdnjs.com/libraries/pdfmake


PDF document generation library for server-side and client-side usage in pure JavaScript.

Check out [the playground](http://bpampuch.github.io/pdfmake/playground.html) and [examples](https://github.com/bpampuch/pdfmake/tree/0.1/examples).

### Features

* line-wrapping,
* text-alignments (left, right, centered, justified),
* numbered and bulleted lists,
* tables and columns
  * auto/fixed/star-sized widths,
  * col-spans and row-spans,
  * headers automatically repeated in case of a page-break,
* images and vector graphics,
* convenient styling and style inheritance,
* page headers and footers:
  * static or dynamic content,
  * access to current page number and page count,
* background-layer,
* page dimensions and orientations,
* margins,
* custom page breaks,
* font embedding,
* support for complex, multi-level (nested) structures,
* table of contents,
* helper methods for opening/printing/downloading the generated PDF,
* setting of PDF metadata (e.g. author, subject).

## Documentation

Documentation URL: https://pdfmake.github.io/docs/

## Building from sources version 0.2.x

using npm:
```
git clone --branch 0.2 https://github.com/bpampuch/pdfmake.git
cd pdfmake
npm install
npm run build
```

using yarn:
```
git clone --branch 0.2 https://github.com/bpampuch/pdfmake.git
cd pdfmake
yarn
yarn run build
```

## License
MIT

## Authors
* [@bpampuch](https://github.com/bpampuch) (founder)
* [@liborm85](https://github.com/liborm85)

pdfmake is based on a truly amazing library [pdfkit](https://github.com/devongovett/pdfkit) (credits to [@devongovett](https://github.com/devongovett)).

Thanks to all contributors.
npm package: @quixoter/count-down
Description: [![Build Status](https://travis-ci.com/quixoter/count-down.svg?branch=master)](https://travis-ci.com/quixoter/count-down) [![NPM Download](https://img.shields.io/npm/dm/@quixoter/count-down.svg)](https://www.npmjs.com/package/@quixoter/count-down) [![NPM 
Author: https://github.com/quixoter
Latest version: 1.0.8

# count-down

[![Build Status](https://travis-ci.com/quixoter/count-down.svg?branch=master)](https://travis-ci.com/quixoter/count-down)
[![NPM Download](https://img.shields.io/npm/dm/@quixoter/count-down.svg)](https://www.npmjs.com/package/@quixoter/count-down)
[![NPM Version](https://img.shields.io/npm/v/@quixoter/count-down.svg)](https://www.npmjs.com/package/@quixoter/count-down)
[![NPM License](https://img.shields.io/npm/l/@quixoter/count-down.svg)](https://github.com/quixoter/count-down/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/quixoter/count-down/pulls)
[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)

vue 倒计时组件

## Table of Contents

* [Introduction](#introduction)
* [Feature](#feature)
* [Demo](#demo)
* [Install](#install)
* [Example](#example)
* [Reference](#reference)
* [Contributors](#contributors)
* [License](#license)

## Introduction

[⬆ Back to Top](#table-of-contents)

## Feature

[⬆ Back to Top](#table-of-contents)

## Demo

* [doc and online demo](https://quixoter.github.io/count-down/)

[⬆ Back to Top](#table-of-contents)

## Install

```
yarn add @quixoter/count-down
or
npm i @quixoter/count-down
```

[⬆ Back to Top](#table-of-contents)

## Example

[⬆ Back to Top](#table-of-contents)

## Reference

[⬆ Back to Top](#table-of-contents)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

<!-- prettier-ignore -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[⬆ Back to Top](#table-of-contents)

## License

[MIT](./LICENSE)

[⬆ Back to Top](#table-of-contents)
npm package: @quixoter/dialog-table-select
Description: [![Build Status](https://travis-ci.com/quixoter/dialog-table-select.svg?branch=master)](https://travis-ci.com/quixoter/dialog-table-select) [![NPM Download](https://img.shields.io/npm/dm/@quixoter/dialog-table-select.svg)](https://www.npmjs.com/package/@q
Author: https://github.com/quixoter
Latest version: 1.2.6

# dialog-table-select

[![Build Status](https://travis-ci.com/quixoter/dialog-table-select.svg?branch=master)](https://travis-ci.com/quixoter/dialog-table-select)
[![NPM Download](https://img.shields.io/npm/dm/@quixoter/dialog-table-select.svg)](https://www.npmjs.com/package/@quixoter/dialog-table-select)
[![NPM Version](https://img.shields.io/npm/v/@quixoter/dialog-table-select.svg)](https://www.npmjs.com/package/@quixoter/dialog-table-select)
[![NPM License](https://img.shields.io/npm/l/@quixoter/dialog-table-select.svg)](https://github.com/quixoter/dialog-table-select/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/quixoter/dialog-table-select/pulls)
[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)

项目简要说明 + 示例图

## Table of Contents

* [Introduction](#introduction)
* [Feature](#feature)
* [Demo](#demo)
* [Install](#install)
* [Example](#example)
* [Reference](#reference)
* [Contributors](#contributors)
* [License](#license)

## Introduction

[⬆ Back to Top](#table-of-contents)

## Feature

[⬆ Back to Top](#table-of-contents)

## Demo

* [doc and online demo](https://quixoter.github.io/dialog-table-select/)

[⬆ Back to Top](#table-of-contents)

## Install

[⬆ Back to Top](#table-of-contents)

## Example

[⬆ Back to Top](#table-of-contents)

## Reference

[⬆ Back to Top](#table-of-contents)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

<!-- prettier-ignore -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[⬆ Back to Top](#table-of-contents)

## License

[MIT](./LICENSE)

[⬆ Back to Top](#table-of-contents)
npm package: @quixoter/dialog-tree-checkbox
Description: [![Build Status](https://travis-ci.com/quixoter/dialog-tree-checkbox.svg?branch=master)](https://travis-ci.com/quixoter/dialog-tree-checkbox) [![NPM Download](https://img.shields.io/npm/dm/@quixoter/dialog-tree-checkbox.svg)](https://www.npmjs.com/package
Author: https://github.com/quixoter
Latest version: 1.0.6

# dialog-tree-checkbox

[![Build Status](https://travis-ci.com/quixoter/dialog-tree-checkbox.svg?branch=master)](https://travis-ci.com/quixoter/dialog-tree-checkbox)
[![NPM Download](https://img.shields.io/npm/dm/@quixoter/dialog-tree-checkbox.svg)](https://www.npmjs.com/package/@quixoter/dialog-tree-checkbox)
[![NPM Version](https://img.shields.io/npm/v/@quixoter/dialog-tree-checkbox.svg)](https://www.npmjs.com/package/@quixoter/dialog-tree-checkbox)
[![NPM License](https://img.shields.io/npm/l/@quixoter/dialog-tree-checkbox.svg)](https://github.com/quixoter/dialog-tree-checkbox/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/quixoter/dialog-tree-checkbox/pulls)
[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)

项目简要说明 + 示例图

## Table of Contents

* [Introduction](#introduction)
* [Feature](#feature)
* [Demo](#demo)
* [Install](#install)
* [Example](#example)
* [Reference](#reference)
* [Contributors](#contributors)
* [License](#license)

## Introduction

[⬆ Back to Top](#table-of-contents)

## Feature

[⬆ Back to Top](#table-of-contents)

## Demo

* [doc and online demo](https://quixoter.github.io/dialog-tree-checkbox/)

[⬆ Back to Top](#table-of-contents)

## Install

[⬆ Back to Top](#table-of-contents)

## Example

[⬆ Back to Top](#table-of-contents)

## Reference

[⬆ Back to Top](#table-of-contents)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

<!-- prettier-ignore -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[⬆ Back to Top](#table-of-contents)

## License

[MIT](./LICENSE)

[⬆ Back to Top](#table-of-contents)
npm package: @quixoter/v-scroll
Description: [![Build Status](https://travis-ci.com/quixoter/v-scroll.svg?branch=master)](https://travis-ci.com/quixoter/v-scroll) [![NPM Download](https://img.shields.io/npm/dm/@quixoter/v-scroll.svg)](https://www.npmjs.com/package/@quixoter/v-scroll) [![NPM Versio
Author: https://github.com/quixoter
Latest version: 1.0.5

# v-scroll

[![Build Status](https://travis-ci.com/quixoter/v-scroll.svg?branch=master)](https://travis-ci.com/quixoter/v-scroll)
[![NPM Download](https://img.shields.io/npm/dm/@quixoter/v-scroll.svg)](https://www.npmjs.com/package/@quixoter/v-scroll)
[![NPM Version](https://img.shields.io/npm/v/@quixoter/v-scroll.svg)](https://www.npmjs.com/package/@quixoter/v-scroll)
[![NPM License](https://img.shields.io/npm/l/@quixoter/v-scroll.svg)](https://github.com/quixoter/v-scroll/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/quixoter/v-scroll/pulls)
[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)

项目简要说明 + 示例图

## Table of Contents

* [Introduction](#introduction)
* [Feature](#feature)
* [Demo](#demo)
* [Install](#install)
* [Example](#example)
* [Reference](#reference)
* [Contributors](#contributors)
* [License](#license)

## Introduction

[⬆ Back to Top](#table-of-contents)

`v-scroll`组件 是基于 [vue-scroller](https://github.com/wangdahoo/vue-scroller) 封装的列表渲染组件

[文档->](https://quixoter.github.io/v-scroll)

## Feature

[⬆ Back to Top](#table-of-contents)

## Demo

* [doc and online demo](https://quixoter.github.io/v-scroll/)

[⬆ Back to Top](#table-of-contents)

## Install

[⬆ Back to Top](#table-of-contents)

```
yarn add @quixoter/v-scroll
```

## Example

[⬆ Back to Top](#table-of-contents)

## Reference

[⬆ Back to Top](#table-of-contents)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

<!-- prettier-ignore -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

[⬆ Back to Top](#table-of-contents)

## License

[MIT](./LICENSE)

[⬆ Back to Top](#table-of-contents)

[⬆ Back to Top](#table-of-contents)
npm package: @quizerjs/dsl
Description: quizerjs Quiz DSL 定义和验证库
Latest version: 0.0.10

# Quiz DSL 架构指南 (Architecture Guide)

欢迎来到 `@quizerjs/dsl` 核心规范库。作为 Quiz Architect，我将引导你理解本项目的灵魂——**结构化评估语言 (Quiz DSL)**。

## 0. 设计哲学

在 Quizer 体系中，数据高于一切。我们将评估逻辑抽象为平台无关的 JSON 模型，确保同一份测验可以在 Web、移动端、甚至命令行中以一致的逻辑运行。

- **模型驱动**：UI 只是状态的投影，DSL 才是状态的源头。
- **类型安全**：借助 TypeScript，我们在编译期捕获 90% 的模型错误。
- **严谨验证**：运行时 Schema 验证确保数据的完整性。

## 1. 核心模型 (Core Models)

### Quiz DSL (测验定义)

定义了一个测验的静态结构，包括标题、描述、设置、章节和题目。

```typescript
import { QuizDSL } from '@quizerjs/dsl';

const myQuiz: QuizDSL = {
  version: '1.0.0',
  quiz: {
    id: 'quiz-001',
    title: '基础地理测试',
    questions: [
      {
        id: 'q-1',
        type: 'single_choice',
        text: '珠穆朗玛峰在哪个洲？',
        options: [
          { id: 'o1', text: '亚洲', isCorrect: true },
          { id: 'o2', text: '欧洲', isCorrect: false },
        ],
      },
    ],
  },
};
```

### Result DSL (结果模型)

捕获一次测验旅程的完整数据，包括原始测验定义、用户答案、得分情况以及元数据。

- **Scoring**: 包含总分、百分比、通过状态。
- **QuestionResults**: 每道题的详细表现（耗时、正误、答案映射）。

## 2. API 使用手册

### 验证 (Validation)

在将 DSL 传递给支付或存储模块前，务必验证其合法性。

```typescript
import { validateQuizDSL } from '@quizerjs/dsl';

const { valid, errors } = validateQuizDSL(myQuiz);
if (!valid) {
  console.error('DSL 格式错误:', errors);
}
```

### 解析与序列化 (Parsing & Serialization)

提供容错性解析和标准化序列化。

```typescript
import { parseQuizDSL, serializeQuizDSL } from '@quizerjs/dsl';

// 从字符串解析
const parseResult = parseQuizDSL(jsonString);

// 序列化为标准化 JSON 字符串
const { data, success } = serializeQuizDSL(myQuiz, { indent: 2 });
```

## 3. 扩展 DSL

如果你需要添加新的题目类型或元数据字段：

1.  **修改 `types.ts`**: 添加新的 `Question` 子类型。
2.  **更新 `QuestionTypes`**: 在常量中注册新类型。
3.  **更新 `validator.ts`**: 为新类型编写验证逻辑。
4.  **更新 `schema.json`**: 确保 JSON Schema 同步更新，以支持非 TS 端的验证。

---

> "一个定义良好的元模型是所有交互的灵魂。" —— Quentin "Quiz" Masterson
npm package: @quizerjs/react
Description: quizerjs React 集成包
Latest version: 0.0.10

# @quizerjs/react

quizerjs 的 React 集成包，提供 React 组件和 Hooks，用于在 React 应用中集成 quizerjs。

## 安装

```bash
npm install @quizerjs/react @quizerjs/dsl
# 或
pnpm add @quizerjs/react @quizerjs/dsl
# 或
yarn add @quizerjs/react @quizerjs/dsl
```

## 使用

### 基础用法

```tsx
import { QuizComponent } from '@quizerjs/react';
import type { QuizDSL } from '@quizerjs/dsl';

const dsl: QuizDSL = {
  quiz: {
    title: '示例测验',
    questions: [
      {
        id: 'q1',
        type: 'single_choice',
        text: '这是单选题？',
        options: [
          { id: 'opt1', text: '选项 A', isCorrect: true },
          { id: 'opt2', text: '选项 B', isCorrect: false },
        ],
      },
    ],
  },
};

function App() {
  return <QuizComponent dsl={dsl} />;
}
```

### 使用 Hook

```tsx
import { useQuiz } from '@quizerjs/react';
import type { QuizDSL } from '@quizerjs/dsl';

function CustomQuiz({ dsl }: { dsl: QuizDSL }) {
  const { answers, submitted, score, setAnswer, submit, reset } = useQuiz({
    dsl,
    onSubmit: (answers, score) => {
      console.log('提交答案:', answers);
      console.log('得分:', score);
    },
  });

  return (
    <div>
      {/* 自定义 UI */}
      <button onClick={submit}>提交</button>
      <button onClick={reset}>重置</button>
    </div>
  );
}
```

## API

### QuizComponent

React 组件，用于渲染完整的测验界面。

#### Props

- `dsl: QuizDSL` - 测验 DSL 数据（必需）
- `disabled?: boolean` - 是否禁用交互（默认：`false`）
- `showResults?: boolean` - 是否显示结果（默认：`true`）
- `onSubmit?: (answers: Record<string, any>) => void` - 提交回调
- `onAnswerChange?: (questionId: string, answer: any) => void` - 答案变化回调

### useQuiz

React Hook，提供测验的状态管理和逻辑。

#### 参数

```typescript
interface UseQuizOptions {
  dsl?: QuizDSL;
  autoValidate?: boolean;
  onSubmit?: (answers: Record<string, any>, score: number) => void;
}
```

#### 返回值

```typescript
interface UseQuizReturn {
  dsl: QuizDSL | null;
  answers: Record<string, any>;
  submitted: boolean;
  score: number | null;
  loadDSL: (dsl: QuizDSL) => void;
  setAnswer: (questionId: string, answer: any) => void;
  submit: () => void;
  reset: () => void;
  isAnswerCorrect: (question: Question, answer: any) => boolean;
}
```

## 支持的题型

- 单选题 (`single_choice`)
- 多选题 (`multiple_choice`)
- 文本输入题 (`text_input`)
- 判断题 (`true_false`)

## 样式

组件包含默认样式，可以直接使用。如果需要自定义样式，可以通过 CSS 覆盖类名。

## License

MIT
npm package: @quizerjs/svelte
Description: quizerjs Svelte 集成包
Latest version: 0.0.10

# @quizerjs/svelte

quizerjs 的 Svelte 集成包，提供 Svelte 组件和 Stores，用于在 Svelte 应用中集成 quizerjs。

## 安装

```bash
npm install @quizerjs/svelte @quizerjs/dsl
# 或
pnpm add @quizerjs/svelte @quizerjs/dsl
# 或
yarn add @quizerjs/svelte @quizerjs/dsl
```

## 使用

### 基础用法

```svelte
<script>
  import { QuizComponent } from '@quizerjs/svelte';
  import type { QuizDSL } from '@quizerjs/dsl';

  const dsl: QuizDSL = {
    quiz: {
      title: '示例测验',
      questions: [
        {
          id: 'q1',
          type: 'single_choice',
          text: '这是单选题？',
          options: [
            { id: 'opt1', text: '选项 A', isCorrect: true },
            { id: 'opt2', text: '选项 B', isCorrect: false },
          ],
        },
      ],
    },
  };
</script>

<QuizComponent {dsl} />
```

### 使用 Store

```svelte
<script>
  import { useQuiz } from '@quizerjs/svelte';
  import type { QuizDSL } from '@quizerjs/dsl';

  const dsl: QuizDSL = { /* ... */ };

  const {
    answers,
    submitted,
    score,
    setAnswer,
    submit,
    reset,
  } = useQuiz({
    dsl,
    onSubmit: (answers, score) => {
      console.log('提交答案:', answers);
      console.log('得分:', score);
    },
  });
</script>

<div>
  <!-- 自定义 UI -->
  <button on:click={submit}>提交</button>
  <button on:click={reset}>重置</button>
</div>
```

## API

### QuizComponent

Svelte 组件，用于渲染完整的测验界面。

#### Props

- `dsl: QuizDSL` - 测验 DSL 数据（必需）
- `disabled?: boolean` - 是否禁用交互（默认：`false`）
- `showResults?: boolean` - 是否显示结果（默认：`true`）
- `onSubmit?: (answers: Record<string, any>) => void` - 提交回调
- `onAnswerChange?: (questionId: string, answer: any) => void` - 答案变化回调

### useQuiz

Svelte Store，提供测验的状态管理和逻辑。

#### 参数

```typescript
interface UseQuizOptions {
  dsl?: QuizDSL;
  autoValidate?: boolean;
  onSubmit?: (answers: Record<string, any>, score: number) => void;
}
```

#### 返回值

```typescript
interface UseQuizReturn {
  dsl: Writable<QuizDSL | null>;
  answers: Writable<Record<string, any>>;
  submitted: Writable<boolean>;
  score: Writable<number | null>;
  loadDSL: (dsl: QuizDSL) => void;
  setAnswer: (questionId: string, answer: any) => void;
  submit: () => void;
  reset: () => void;
  isAnswerCorrect: (question: Question, answer: any) => boolean;
}
```

## 支持的题型

- 单选题 (`single_choice`)
- 多选题 (`multiple_choice`)
- 文本输入题 (`text_input`)
- 判断题 (`true_false`)

## 样式

组件包含默认样式，可以直接使用。如果需要自定义样式，可以通过 CSS 覆盖类名。

## License

MIT
npm package: @quiztrack/zenui
Description: The solution components for React App.
Author: https://github.com/quiztrack
Latest version: 0.0.1-alpha.2

<div align="center">
  <h1>
    <br/>
    <br/>
    <br/>
    🧘‍♀️
    <br />
    zenui
    <br />
    <br />
    <br />
    <br />
  </h1>
  <sup>
    <br />
    Collection of essential <a href="https://headlessui.com/">Headless UI ✨</a>.
    <br />
    <em>"make something out of nothing."</em>
    <br />
  </sup>
  <br />
  <br />
  <pre>npm i <a href="https://www.npmjs.com/package/@quiztrack/zenui">@quiztrack/zenui</a></pre>
  <br />
  <br />
  <br />
  <br />
  <br />
</div>