@mulmochat-plugin/quiz 0.2.0 → 0.2.1

package/README.ja.md

@@ -11,9 +11,18 @@ MulmoChat用のクイズプラグイン。複数選択式のクイズをユー
 
 このプラグインは、MulmoChatのプラグインシステムのリファレンス実装です。サーバー通信不要なシンプルな構造のため、新しいプラグインを作成する際のテンプレートとして使用できます。
 
+**フレームワーク非依存のcoreアーキテクチャ**と**VueおよびReact実装**を実現しています:
+- **Core**: フレームワーク非依存のプラグインロジック（任意のUIフレームワークで使用可能）
+- **Vue**: Vue専用のUIコンポーネント
+- **React**: React専用のUIコンポーネント
+
+### 特徴
+
 - **Tailwind CSS 4** を使用したスタイリング
 - **TypeScript** による型安全な実装
 - **ESLint** による静的解析
+- **フレームワーク非依存のcore** による移植性
+- **マルチフレームワーク対応**（VueとReact）
 
 ## インストール
 
@@ -27,8 +36,7 @@ yarn add @mulmochat-plugin/quiz
 
 2. MulmoChatの`src/tools/index.ts`でインポート:
 ```typescript
-import QuizPlugin from "@mulmochat-plugin/quiz";
-import "@mulmochat-plugin/quiz/style.css";
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
 
 // pluginListに追加
 const pluginList = [
@@ -37,6 +45,32 @@ const pluginList = [
 ];
 ```
 
+3. `src/main.ts`でスタイルをインポート:
+```typescript
+import "@mulmochat-plugin/quiz/style.css";
+```
+
+## パッケージエクスポート
+
+```typescript
+// デフォルト: Core（フレームワーク非依存）
+import { pluginCore, TOOL_NAME, QuizData } from "@mulmochat-plugin/quiz";
+
+// Vue実装
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
+import "@mulmochat-plugin/quiz/style.css";
+
+// Vue名前付きエクスポート
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/vue";
+
+// React実装
+import QuizPlugin from "@mulmochat-plugin/quiz/react";
+import "@mulmochat-plugin/quiz/style.css";
+
+// React名前付きエクスポート
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/react";
+```
+
 ## 開発
 
 ### セットアップ
@@ -48,7 +82,11 @@ yarn install
 ### 開発サーバー
 
 ```bash
+# Vueデモ
 yarn dev
+
+# Reactデモ
+yarn dev:react
 ```
 
 http://localhost:5173/ でデモページが表示されます。
@@ -76,31 +114,45 @@ yarn lint
 ```
 MulmoChatPluginQuiz/
 ├── src/
-│   ├── index.ts          # エクスポート定義
+│   ├── index.ts          # デフォルトエクスポート（core）
 │   ├── style.css         # Tailwind CSSエントリー
-│   ├── common/           # プラグイン非依存の共通コード
-│   │   ├── index.ts      # 共通エクスポート
-│   │   └── types.ts      # ToolPlugin, ToolResult など
-│   └── plugin/           # クイズ固有の実装
-│       ├── index.ts      # プラグインインスタンスと実行ロジック
-│       ├── types.ts      # クイズの型とTOOL_DEFINITION
-│       ├── samples.ts    # テスト用サンプルデータ
-│       ├── View.vue      # メインビューコンポーネント
-│       └── Preview.vue   # サイドバープレビューコンポーネント
-├── demo/                 # 汎用プラグインデモ（どのプラグインでも動作）
-│   ├── App.vue           # 動的コンポーネント描画
+│   ├── core/             # フレームワーク非依存（Vue/React依存なし）
+│   │   ├── index.ts      # Coreエクスポート
+│   │   ├── types.ts      # ToolPluginCore, ToolResult, QuizData等
+│   │   └── plugin.ts     # Execute関数、ツール定義、サンプル
+│   ├── vue/              # Vue固有の実装
+│   │   ├── index.ts      # Vueプラグイン（core + コンポーネント）
+│   │   ├── types.ts      # ToolPlugin（ToolPluginCoreを拡張）
+│   │   ├── View.vue      # メインビューコンポーネント
+│   │   └── Preview.vue   # サイドバープレビュー
+│   └── react/            # React固有の実装
+│       ├── index.ts      # Reactプラグイン（core + コンポーネント）
+│       ├── types.ts      # ToolPlugin（ToolPluginCoreを拡張）
+│       ├── View.tsx      # メインビューコンポーネント
+│       └── Preview.tsx   # サイドバープレビュー
+├── demo/                 # Vueデモ
+│   ├── App.vue
 │   └── main.ts
+├── demo-react/           # Reactデモ
+│   ├── App.tsx
+│   ├── main.tsx
+│   ├── style.css
+│   ├── index.html
+│   └── vite.config.ts
 ├── package.json
 ├── vite.config.ts
 ├── tsconfig.json
+├── tsconfig.react.json   # React用TypeScript設定
 └── eslint.config.js
 ```
 
 ### ディレクトリの役割
 
-- **src/common/**: プラグイン非依存の型とユーティリティ。新しいプラグインにコピーするか、このパッケージからインポート。
-- **src/plugin/**: クイズ固有の実装。独自のプラグインロジックに置き換える。
-- **demo/**: 任意のToolPluginで動作する汎用デモ。インポートを変更するだけで使用可能。
+- **src/core/**: フレームワーク非依存の型とプラグインロジック。Vue/React依存なし。
+- **src/vue/**: Vue専用UIコンポーネントとVueプラグインエクスポート。
+- **src/react/**: React専用UIコンポーネントとReactプラグインエクスポート。
+- **demo/**: Vueデモ。
+- **demo-react/**: Reactデモ。
 
 ## 新しいプラグインの作成
 
@@ -121,35 +173,46 @@ yarn dev
 ### 手動セットアップ
 
 詳細な手順は [TEMPLATE.md](./TEMPLATE.md) を参照:
+- Core/Vue/Reactアーキテクチャ
 - そのままコピーできるファイル
-- 変更が必要なファイル（`package.json` のみ）
 - プラグイン固有の実装要件
-- 重要なパターン（View.vue のリアクティビティ）
+- 重要なパターン（View.vueのリアクティビティ）
+
+## Core型定義
 
-## ToolPlugin インターフェース
+### ToolPluginCore（フレームワーク非依存）
 
 ```typescript
-interface ToolPlugin<T, J, A> {
-  toolDefinition: {
-    type: "function";
-    name: string;
-    description: string;
-    parameters?: {
-      type: "object";
-      properties: Record<string, JsonSchemaProperty>;
-      required: string[];
-    };
-  };
+interface ToolPluginCore<T, J, A> {
+  toolDefinition: ToolDefinition;
   execute: (context: ToolContext, args: A) => Promise<ToolResult<T, J>>;
   generatingMessage: string;
   isEnabled: (startResponse?: StartApiResponse | null) => boolean;
-  viewComponent?: Component;
-  previewComponent?: Component;
   // Optional
   systemPrompt?: string;
-  fileUpload?: FileUploadConfig;
-  config?: ToolPluginConfig;
-  samples?: ToolSample[];  // テスト用サンプルデータ
+  inputHandlers?: InputHandler[];
+  configSchema?: PluginConfigSchema;
+  samples?: ToolSample[];
+  backends?: BackendType[];
+}
+```
+
+### ToolPlugin（Vue固有、ToolPluginCoreを拡張）
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: Component;      // Vue Component
+  previewComponent?: Component;   // Vue Component
+  config?: ToolPluginConfig;      // レガシーVueコンポーネントベースの設定
+}
+```
+
+### ToolPlugin（React固有、ToolPluginCoreを拡張）
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: ComponentType;    // React ComponentType
+  previewComponent?: ComponentType; // React ComponentType
 }
 ```
 

package/README.md

@@ -9,11 +9,20 @@ A quiz plugin for MulmoChat. Presents multiple choice quizzes to users.
 
 ## Overview
 
-This plugin is a reference implementation of the MulmoChat plugin system. Its simple structure with no server communication makes it an ideal template for creating new plugins.
+This plugin is the reference implementation of the MulmoChat plugin system. With its simple structure requiring no server communication, it can be used as a template for creating new plugins.
+
+It demonstrates the **framework-agnostic core architecture** with **Vue and React implementations**:
+- **Core**: Framework-agnostic plugin logic (can be used with any UI framework)
+- **Vue**: Vue-specific UI components
+- **React**: React-specific UI components
+
+### Features
 
 - **Tailwind CSS 4** for styling
 - **TypeScript** for type-safe implementation
 - **ESLint** for static analysis
+- **Framework-agnostic core** for portability
+- **Multi-framework support** (Vue and React)
 
 ## Installation
 
@@ -27,8 +36,7 @@ yarn add @mulmochat-plugin/quiz
 
 2. Import in MulmoChat's `src/tools/index.ts`:
 ```typescript
-import QuizPlugin from "@mulmochat-plugin/quiz";
-import "@mulmochat-plugin/quiz/style.css";
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
 
 // Add to pluginList
 const pluginList = [
@@ -37,6 +45,32 @@ const pluginList = [
 ];
 ```
 
+3. Import styles in `src/main.ts`:
+```typescript
+import "@mulmochat-plugin/quiz/style.css";
+```
+
+## Package Exports
+
+```typescript
+// Default: Core (framework-agnostic)
+import { pluginCore, TOOL_NAME, QuizData } from "@mulmochat-plugin/quiz";
+
+// Vue implementation
+import QuizPlugin from "@mulmochat-plugin/quiz/vue";
+import "@mulmochat-plugin/quiz/style.css";
+
+// Named Vue exports
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/vue";
+
+// React implementation
+import QuizPlugin from "@mulmochat-plugin/quiz/react";
+import "@mulmochat-plugin/quiz/style.css";
+
+// Named React exports
+import { plugin, View, Preview } from "@mulmochat-plugin/quiz/react";
+```
+
 ## Development
 
 ### Setup
@@ -48,7 +82,11 @@ yarn install
 ### Development Server
 
 ```bash
+# Vue demo
 yarn dev
+
+# React demo
+yarn dev:react
 ```
 
 Demo page will be available at http://localhost:5173/
@@ -76,31 +114,45 @@ yarn lint
 ```
 MulmoChatPluginQuiz/
 ├── src/
-│   ├── index.ts          # Export definitions
+│   ├── index.ts          # Default export (core)
 │   ├── style.css         # Tailwind CSS entry
-│   ├── common/           # Plugin-agnostic shared code
-│   │   ├── index.ts      # Common exports
-│   │   └── types.ts      # ToolPlugin, ToolResult, etc.
-│   └── plugin/           # Quiz-specific implementation
-│       ├── index.ts      # Plugin instance and execute logic
-│       ├── types.ts      # Quiz types and TOOL_DEFINITION
-│       ├── samples.ts    # Sample data for testing
-│       ├── View.vue      # Main view component
-│       └── Preview.vue   # Sidebar preview component
-├── demo/                 # Generic plugin demo (works with any plugin)
-│   ├── App.vue           # Dynamic component rendering
+│   ├── core/             # Framework-agnostic (no Vue/React dependencies)
+│   │   ├── index.ts      # Core exports
+│   │   ├── types.ts      # ToolPluginCore, ToolResult, QuizData, etc.
+│   │   └── plugin.ts     # Execute function, tool definition, samples
+│   ├── vue/              # Vue-specific implementation
+│   │   ├── index.ts      # Vue plugin (combines core + components)
+│   │   ├── types.ts      # ToolPlugin (extends ToolPluginCore)
+│   │   ├── View.vue      # Main view component
+│   │   └── Preview.vue   # Sidebar preview component
+│   └── react/            # React-specific implementation
+│       ├── index.ts      # React plugin (combines core + components)
+│       ├── types.ts      # ToolPlugin (extends ToolPluginCore)
+│       ├── View.tsx      # Main view component
+│       └── Preview.tsx   # Sidebar preview component
+├── demo/                 # Vue demo
+│   ├── App.vue
 │   └── main.ts
+├── demo-react/           # React demo
+│   ├── App.tsx
+│   ├── main.tsx
+│   ├── style.css
+│   ├── index.html
+│   └── vite.config.ts
 ├── package.json
 ├── vite.config.ts
 ├── tsconfig.json
+├── tsconfig.react.json   # React-specific TypeScript config
 └── eslint.config.js
 ```
 
 ### Directory Purpose
 
-- **src/common/**: Plugin-agnostic types and utilities. Copy this to your new plugin or import from this package.
-- **src/plugin/**: Quiz-specific implementation. Replace with your plugin logic.
-- **demo/**: Generic demo that works with any ToolPlugin. Just change the import.
+- **src/core/**: Framework-agnostic types and plugin logic. No Vue/React dependencies.
+- **src/vue/**: Vue-specific UI components and the full Vue plugin export.
+- **src/react/**: React-specific UI components and the full React plugin export.
+- **demo/**: Vue demo.
+- **demo-react/**: React demo.
 
 ## Creating a New Plugin
 
@@ -121,35 +173,46 @@ yarn dev
 ### Manual Setup
 
 See [TEMPLATE.md](./TEMPLATE.md) for detailed instructions on:
+- Core/Vue architecture
 - Files that can be copied as-is
-- Files requiring modification (only `package.json`)
 - Plugin-specific implementation requirements
 - Important patterns (View.vue reactivity)
 
-## ToolPlugin Interface
+## Core Types
+
+### ToolPluginCore (Framework-agnostic)
 
 ```typescript
-interface ToolPlugin<T, J, A> {
-  toolDefinition: {
-    type: "function";
-    name: string;
-    description: string;
-    parameters?: {
-      type: "object";
-      properties: Record<string, JsonSchemaProperty>;
-      required: string[];
-    };
-  };
+interface ToolPluginCore<T, J, A> {
+  toolDefinition: ToolDefinition;
   execute: (context: ToolContext, args: A) => Promise<ToolResult<T, J>>;
   generatingMessage: string;
   isEnabled: (startResponse?: StartApiResponse | null) => boolean;
-  viewComponent?: Component;
-  previewComponent?: Component;
   // Optional
   systemPrompt?: string;
-  fileUpload?: FileUploadConfig;
-  config?: ToolPluginConfig;
-  samples?: ToolSample[];  // Sample data for testing
+  inputHandlers?: InputHandler[];
+  configSchema?: PluginConfigSchema;
+  samples?: ToolSample[];
+  backends?: BackendType[];
+}
+```
+
+### ToolPlugin (Vue-specific, extends ToolPluginCore)
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: Component;      // Vue Component
+  previewComponent?: Component;   // Vue Component
+  config?: ToolPluginConfig;      // Legacy Vue component-based config
+}
+```
+
+### ToolPlugin (React-specific, extends ToolPluginCore)
+
+```typescript
+interface ToolPlugin<T, J, A> extends ToolPluginCore<T, J, A> {
+  viewComponent?: ComponentType;    // React ComponentType
+  previewComponent?: ComponentType; // React ComponentType
 }
 ```
 

package/README.npm.md

@@ -1,4 +1,4 @@
-# MulmoChat Plugin
+# @mulmochat-plugin/{plugin-name}
 
 A plugin for [MulmoChat](https://github.com/receptron/MulmoChat) - a multi-modal voice chat application with OpenAI's GPT-4 Realtime API.
 
@@ -14,26 +14,60 @@ yarn add @mulmochat-plugin/{plugin-name}
 
 ## Usage
 
+### Vue Implementation (for MulmoChat)
+
 ```typescript
-import Plugin from "@mulmochat-plugin/{plugin-name}";
-import "@mulmochat-plugin/{plugin-name}/style.css";
+// In src/tools/index.ts
+import Plugin from "@mulmochat-plugin/{plugin-name}/vue";
 
-// Add to pluginList
 const pluginList = [
   // ... other plugins
   Plugin,
 ];
+
+// In src/main.ts
+import "@mulmochat-plugin/{plugin-name}/style.css";
 ```
 
+### React Implementation
+
+```typescript
+import Plugin from "@mulmochat-plugin/{plugin-name}/react";
+import "@mulmochat-plugin/{plugin-name}/style.css";
+
+// Named exports
+import { plugin, View, Preview } from "@mulmochat-plugin/{plugin-name}/react";
+```
+
+### Core Only (Framework-agnostic)
+
+```typescript
+import { pluginCore, TOOL_NAME } from "@mulmochat-plugin/{plugin-name}";
+// or
+import pluginCore from "@mulmochat-plugin/{plugin-name}";
+```
+
+## Package Exports
+
+| Export | Description |
+|--------|-------------|
+| `@mulmochat-plugin/{plugin-name}` | Core (framework-agnostic) |
+| `@mulmochat-plugin/{plugin-name}/vue` | Vue implementation with UI components |
+| `@mulmochat-plugin/{plugin-name}/react` | React implementation with UI components |
+| `@mulmochat-plugin/{plugin-name}/style.css` | Tailwind CSS styles |
+
 ## Development
 
 ```bash
 # Install dependencies
 yarn install
 
-# Start dev server (http://localhost:5173/)
+# Start dev server - Vue (http://localhost:5173/)
 yarn dev
 
+# Start dev server - React (http://localhost:5173/)
+yarn dev:react
+
 # Build
 yarn build
 

package/dist/react/Preview.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Quiz Preview Component (React)
+ */
+import type { ToolResult } from "../core/types";
+interface PreviewProps {
+    result: ToolResult;
+}
+export declare function Preview({ result }: PreviewProps): import("react/jsx-runtime").JSX.Element | null;
+export default Preview;

package/dist/react/View.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Quiz View Component (React)
+ */
+import type { ToolResult } from "../core/types";
+interface ViewProps {
+    selectedResult: ToolResult;
+    sendTextMessage: (text?: string) => void;
+    onUpdateResult?: (result: ToolResult) => void;
+}
+export declare function View({ selectedResult, sendTextMessage, onUpdateResult }: ViewProps): import("react/jsx-runtime").JSX.Element | null;
+export default View;

package/dist/react/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * MulmoChat Quiz Plugin - React Implementation
+ *
+ * Full React plugin with UI components.
+ * Import from "@mulmochat-plugin/quiz/react"
+ */
+import "../style.css";
+import type { ToolPlugin, QuizData, QuizArgs } from "./types";
+import { View } from "./View";
+import { Preview } from "./Preview";
+/**
+ * Quiz plugin instance with React components
+ */
+export declare const plugin: ToolPlugin<never, QuizData, QuizArgs>;
+export type { ToolPlugin } from "./types";
+export type { BackendType, ToolContextApp, ToolContext, ToolResult, ToolResultComplete, JsonSchemaProperty, ToolDefinition, StartApiResponse, ToolSample, InputHandler, FileUploadConfig, ConfigValue, ConfigFieldSchema, PluginConfigSchema, ViewComponentProps, PreviewComponentProps, ToolPluginCore, QuizQuestion, QuizData, QuizArgs, } from "./types";
+export { TOOL_NAME, TOOL_DEFINITION, SAMPLES, executeQuiz, pluginCore } from "../core/plugin";
+export { View, Preview };
+declare const _default: {
+    plugin: ToolPlugin<never, QuizData, QuizArgs>;
+};
+export default _default;

package/dist/react/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * MulmoChat Plugin React Types
+ *
+ * React-specific types that extend the core plugin interface.
+ */
+import type { ComponentType } from "react";
+import type { ToolPluginCore } from "../core/types";
+type ReactComponent = ComponentType<any>;
+/**
+ * React plugin interface - extends core with React components
+ */
+export interface ToolPlugin<T = unknown, J = unknown, A extends object = object> extends ToolPluginCore<T, J, A> {
+    /** React component for full view */
+    viewComponent?: ReactComponent;
+    /** React component for preview/thumbnail */
+    previewComponent?: ReactComponent;
+}
+export type { BackendType, ToolContextApp, ToolContext, ToolResult, ToolResultComplete, JsonSchemaProperty, ToolDefinition, StartApiResponse, ToolSample, InputHandler, FileInputHandler, ClipboardImageInputHandler, UrlInputHandler, TextInputHandler, FileUploadConfig, ConfigValue, ConfigFieldSchema, PluginConfigSchema, ViewComponentProps, PreviewComponentProps, ToolPluginCore, QuizQuestion, QuizData, QuizArgs, } from "../core/types";

package/dist/react.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});;/* empty css                 */const h=require("./core.cjs"),w=require("react");var S={exports:{}},g={};var V;function ae(){if(V)return g;V=1;var a=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function x(i,d,u){var p=null;if(u!==void 0&&(p=""+u),d.key!==void 0&&(p=""+d.key),"key"in d){u={};for(var v in d)v!=="key"&&(u[v]=d[v])}else u=d;return d=u.ref,{$$typeof:a,type:i,key:p,ref:d!==void 0?d:null,props:u}}return g.Fragment=c,g.jsx=x,g.jsxs=x,g}var T={};var Q;function oe(){return Q||(Q=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===te?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case b:return"Fragment";case k:return"Profiler";case y:return"StrictMode";case Z:return"Suspense";case K:return"SuspenseList";case re:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case m:return"Portal";case H:return e.displayName||"Context";case P:return(e._context.displayName||"Context")+".Consumer";case B:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ee:return r=e.displayName||null,r!==null?r:a(e.type)||"Memo";case C:r=e._payload,e=e._init;try{return a(e(r))}catch{}}return null}function c(e){return""+e}function x(e){try{c(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),c(e)}}function i(e){if(e===b)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var r=a(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function d(){var e=$.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function p(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function v(e,r){function n(){M||(M=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function O(){var e=a(this.type);return F[e]||(F[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function j(e,r,n,o,A,D){var l=n.ref;return e={$$typeof:f,type:e,key:r,props:n,_owner:o},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:D}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function _(e,r,n,o,A,D){var l=r.children;if(l!==void 0)if(o)if(ne(l)){for(o=0;o<l.length;o++)N(l[o]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(l);if(L.call(r,"key")){l=a(e);var E=Object.keys(r).filter(function(se){return se!=="key"});o=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",W[l+o]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,l,E,l),W[l+o]=!0)}if(l=null,n!==void 0&&(x(n),l=""+n),p(r)&&(x(r.key),l=""+r.key),"key"in r){n={};for(var Y in r)Y!=="key"&&(n[Y]=r[Y])}else n=r;return l&&v(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),j(e,l,n,d(),A,D)}function N(e){R(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?R(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function R(e){return typeof e=="object"&&e!==null&&e.$$typeof===f}var s=w,f=Symbol.for("react.transitional.element"),m=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),y=Symbol.for("react.strict_mode"),k=Symbol.for("react.profiler"),P=Symbol.for("react.consumer"),H=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),K=Symbol.for("react.suspense_list"),ee=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),re=Symbol.for("react.activity"),te=Symbol.for("react.client.reference"),$=s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,ne=Array.isArray,q=console.createTask?console.createTask:function(){return null};s={react_stack_bottom_frame:function(e){return e()}};var M,F={},z=s.react_stack_bottom_frame.bind(s,u)(),I=q(i(u)),W={};T.Fragment=b,T.jsx=function(e,r,n){var o=1e4>$.recentlyCreatedOwnerStacks++;return _(e,r,n,!1,o?Error("react-stack-top-frame"):z,o?q(i(e)):I)},T.jsxs=function(e,r,n){var o=1e4>$.recentlyCreatedOwnerStacks++;return _(e,r,n,!0,o?Error("react-stack-top-frame"):z,o?q(i(e)):I)}})()),T}var U;function le(){return U||(U=1,process.env.NODE_ENV==="production"?S.exports=ae():S.exports=oe()),S.exports}var t=le();function J({selectedResult:a,sendTextMessage:c,onUpdateResult:x}){const[i,d]=w.useState(null),[u,p]=w.useState([]);w.useEffect(()=>{if(a?.toolName===h.TOOL_NAME&&a.jsonData){const s=a.jsonData;d(s),a.viewState?.userAnswers?p(a.viewState.userAnswers):p(new Array(s.questions.length).fill(null))}},[a]);const v=w.useCallback(s=>{p(s),x&&a&&x({...a,viewState:{userAnswers:s}})},[x,a]),O=(s,f)=>{const m=[...u];m[s]=f,v(m)},j=u.filter(s=>s!==null).length,_=i&&j===i.questions.length,N=(s,f)=>u[s]===f?"border-blue-500 bg-blue-500/20":"border-[#4b4b6b] hover:border-[#6b6b8b] hover:bg-[#6b6b8b]/20",R=()=>{if(!i||!_)return;const f=`Here are my answers:
+${u.map((m,b)=>{if(m===null)return null;const y=b+1,k=String.fromCharCode(65+m),P=i.questions[b].choices[m];return`Q${y}: ${k} - ${P}`}).filter(m=>m!==null).join(`
+`)}`;c(f)};return i?t.jsx("div",{className:"w-full min-h-[400px] overflow-y-auto p-8 bg-[#1a1a2e] rounded-lg",children:t.jsxs("div",{className:"max-w-3xl mx-auto",children:[i.title&&t.jsx("h2",{className:"text-[#f0f0f0] text-3xl font-bold mb-8 text-center",children:i.title}),t.jsx("div",{className:"flex flex-col gap-6",children:i.questions.map((s,f)=>t.jsxs("div",{className:"bg-[#2d2d44] rounded-lg p-6 border-2 border-[#3d3d5c]",children:[t.jsxs("div",{className:"text-white text-lg font-semibold mb-4",children:[t.jsxs("span",{className:"text-blue-400 mr-2",children:[f+1,"."]}),s.question]}),t.jsx("div",{className:"flex flex-col gap-3",children:s.choices.map((m,b)=>t.jsxs("label",{className:`flex items-start p-4 rounded-lg cursor-pointer transition-all duration-200 border-2 ${N(f,b)}`,children:[t.jsx("input",{type:"radio",name:`question-${f}`,value:b,checked:u[f]===b,onChange:()=>O(f,b),className:"mt-1 mr-3 size-4 shrink-0"}),t.jsxs("span",{className:"text-white flex-1",children:[t.jsxs("span",{className:"font-semibold mr-2",children:[String.fromCharCode(65+b),"."]}),m]})]},b))})]},f))}),t.jsx("div",{className:"mt-8 flex justify-center",children:t.jsx("button",{onClick:R,disabled:!_,className:`py-3 px-8 rounded-lg text-white font-semibold text-lg transition-colors border-none cursor-pointer ${_?"bg-blue-600 hover:bg-blue-700":"bg-gray-600 cursor-not-allowed opacity-50"}`,children:"Submit Answers"})}),t.jsxs("div",{className:"mt-4 text-center text-gray-400 text-sm",children:[j," / ",i.questions.length," questions answered"]})]})}):null}function G({result:a}){const c=a.jsonData;return c?t.jsx("div",{className:"p-3 bg-blue-50 rounded-md",children:t.jsxs("div",{className:"flex flex-col gap-2",children:[t.jsx("div",{className:"text-sm font-semibold text-gray-800 text-center",children:c.title||"Quiz"}),t.jsx("div",{className:"text-center",children:t.jsxs("span",{className:"inline-block bg-blue-600 text-white text-xs font-bold py-1 px-3 rounded-full",children:[c.questions.length," ",c.questions.length===1?"Question":"Questions"]})}),t.jsx("div",{className:"text-xs text-gray-600 overflow-hidden line-clamp-2",children:c.questions[0]?.question}),t.jsxs("div",{className:"flex justify-center gap-1",children:[Array.from({length:Math.min(c.questions[0]?.choices.length||0,4)}).map((x,i)=>t.jsx("div",{className:"size-2 bg-gray-400 rounded-full"},i)),(c.questions[0]?.choices.length||0)>4&&t.jsxs("span",{className:"text-xs text-gray-500",children:["+",c.questions[0].choices.length-4]})]})]})}):null}const X={...h.pluginCore,viewComponent:J,previewComponent:G},ie={plugin:X};exports.SAMPLES=h.SAMPLES;exports.TOOL_DEFINITION=h.TOOL_DEFINITION;exports.TOOL_NAME=h.TOOL_NAME;exports.executeQuiz=h.executeQuiz;exports.pluginCore=h.pluginCore;exports.Preview=G;exports.View=J;exports.default=ie;exports.plugin=X;

package/dist/react.js

@@ -0,0 +1,399 @@
+/* empty css               */
+import { TOOL_NAME as re, pluginCore as te } from "./core.js";
+import { SAMPLES as ve, TOOL_DEFINITION as Ee, executeQuiz as _e } from "./core.js";
+import ne, { useState as W, useEffect as se, useCallback as ae } from "react";
+var R = { exports: {} }, _ = {};
+var U;
+function oe() {
+  if (U) return _;
+  U = 1;
+  var a = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
+  function x(i, d, c) {
+    var p = null;
+    if (c !== void 0 && (p = "" + c), d.key !== void 0 && (p = "" + d.key), "key" in d) {
+      c = {};
+      for (var h in d)
+        h !== "key" && (c[h] = d[h]);
+    } else c = d;
+    return d = c.ref, {
+      $$typeof: a,
+      type: i,
+      key: p,
+      ref: d !== void 0 ? d : null,
+      props: c
+    };
+  }
+  return _.Fragment = u, _.jsx = x, _.jsxs = x, _;
+}
+var g = {};
+var V;
+function le() {
+  return V || (V = 1, process.env.NODE_ENV !== "production" && (function() {
+    function a(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case b:
+          return "Fragment";
+        case k:
+          return "Profiler";
+        case y:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case X:
+          return "SuspenseList";
+        case B:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case m:
+            return "Portal";
+          case J:
+            return e.displayName || "Context";
+          case S:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case Q:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case H:
+            return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
+          case O:
+            r = e._payload, e = e._init;
+            try {
+              return a(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function u(e) {
+      return "" + e;
+    }
+    function x(e) {
+      try {
+        u(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return n.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), u(e);
+      }
+    }
+    function i(e) {
+      if (e === b) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === O)
+        return "<...>";
+      try {
+        var r = a(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function d() {
+      var e = P.A;
+      return e === null ? null : e.getOwner();
+    }
+    function c() {
+      return Error("react-stack-top-frame");
+    }
+    function p(e) {
+      if (D.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function h(e, r) {
+      function n() {
+        Y || (Y = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      n.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: n,
+        configurable: !0
+      });
+    }
+    function A() {
+      var e = a(this.type);
+      return F[e] || (F[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function w(e, r, n, o, N, $) {
+      var l = n.ref;
+      return e = {
+        $$typeof: f,
+        type: e,
+        key: r,
+        props: n,
+        _owner: o
+      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: A
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: $
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function v(e, r, n, o, N, $) {
+      var l = r.children;
+      if (l !== void 0)
+        if (o)
+          if (K(l)) {
+            for (o = 0; o < l.length; o++)
+              j(l[o]);
+            Object.freeze && Object.freeze(l);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else j(l);
+      if (D.call(r, "key")) {
+        l = a(e);
+        var E = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        o = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", M[l + o] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          l,
+          E,
+          l
+        ), M[l + o] = !0);
+      }
+      if (l = null, n !== void 0 && (x(n), l = "" + n), p(r) && (x(r.key), l = "" + r.key), "key" in r) {
+        n = {};
+        for (var q in r)
+          q !== "key" && (n[q] = r[q]);
+      } else n = r;
+      return l && h(
+        n,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), w(
+        e,
+        l,
+        n,
+        d(),
+        N,
+        $
+      );
+    }
+    function j(e) {
+      T(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? T(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function T(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === f;
+    }
+    var s = ne, f = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.portal"), b = /* @__PURE__ */ Symbol.for("react.fragment"), y = /* @__PURE__ */ Symbol.for("react.strict_mode"), k = /* @__PURE__ */ Symbol.for("react.profiler"), S = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), Q = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), X = /* @__PURE__ */ Symbol.for("react.suspense_list"), H = /* @__PURE__ */ Symbol.for("react.memo"), O = /* @__PURE__ */ Symbol.for("react.lazy"), B = /* @__PURE__ */ Symbol.for("react.activity"), Z = /* @__PURE__ */ Symbol.for("react.client.reference"), P = s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, K = Array.isArray, C = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    s = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var Y, F = {}, L = s.react_stack_bottom_frame.bind(
+      s,
+      c
+    )(), z = C(i(c)), M = {};
+    g.Fragment = b, g.jsx = function(e, r, n) {
+      var o = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return v(
+        e,
+        r,
+        n,
+        !1,
+        o ? Error("react-stack-top-frame") : L,
+        o ? C(i(e)) : z
+      );
+    }, g.jsxs = function(e, r, n) {
+      var o = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return v(
+        e,
+        r,
+        n,
+        !0,
+        o ? Error("react-stack-top-frame") : L,
+        o ? C(i(e)) : z
+      );
+    };
+  })()), g;
+}
+var I;
+function ie() {
+  return I || (I = 1, process.env.NODE_ENV === "production" ? R.exports = oe() : R.exports = le()), R.exports;
+}
+var t = ie();
+function ce({ selectedResult: a, sendTextMessage: u, onUpdateResult: x }) {
+  const [i, d] = W(null), [c, p] = W([]);
+  se(() => {
+    if (a?.toolName === re && a.jsonData) {
+      const s = a.jsonData;
+      d(s), a.viewState?.userAnswers ? p(a.viewState.userAnswers) : p(new Array(s.questions.length).fill(null));
+    }
+  }, [a]);
+  const h = ae(
+    (s) => {
+      p(s), x && a && x({
+        ...a,
+        viewState: { userAnswers: s }
+      });
+    },
+    [x, a]
+  ), A = (s, f) => {
+    const m = [...c];
+    m[s] = f, h(m);
+  }, w = c.filter((s) => s !== null).length, v = i && w === i.questions.length, j = (s, f) => c[s] === f ? "border-blue-500 bg-blue-500/20" : "border-[#4b4b6b] hover:border-[#6b6b8b] hover:bg-[#6b6b8b]/20", T = () => {
+    if (!i || !v) return;
+    const f = `Here are my answers:
+${c.map((m, b) => {
+      if (m === null) return null;
+      const y = b + 1, k = String.fromCharCode(65 + m), S = i.questions[b].choices[m];
+      return `Q${y}: ${k} - ${S}`;
+    }).filter((m) => m !== null).join(`
+`)}`;
+    u(f);
+  };
+  return i ? /* @__PURE__ */ t.jsx("div", { className: "w-full min-h-[400px] overflow-y-auto p-8 bg-[#1a1a2e] rounded-lg", children: /* @__PURE__ */ t.jsxs("div", { className: "max-w-3xl mx-auto", children: [
+    i.title && /* @__PURE__ */ t.jsx("h2", { className: "text-[#f0f0f0] text-3xl font-bold mb-8 text-center", children: i.title }),
+    /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-6", children: i.questions.map((s, f) => /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: "bg-[#2d2d44] rounded-lg p-6 border-2 border-[#3d3d5c]",
+        children: [
+          /* @__PURE__ */ t.jsxs("div", { className: "text-white text-lg font-semibold mb-4", children: [
+            /* @__PURE__ */ t.jsxs("span", { className: "text-blue-400 mr-2", children: [
+              f + 1,
+              "."
+            ] }),
+            s.question
+          ] }),
+          /* @__PURE__ */ t.jsx("div", { className: "flex flex-col gap-3", children: s.choices.map((m, b) => /* @__PURE__ */ t.jsxs(
+            "label",
+            {
+              className: `flex items-start p-4 rounded-lg cursor-pointer transition-all duration-200 border-2 ${j(f, b)}`,
+              children: [
+                /* @__PURE__ */ t.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: `question-${f}`,
+                    value: b,
+                    checked: c[f] === b,
+                    onChange: () => A(f, b),
+                    className: "mt-1 mr-3 size-4 shrink-0"
+                  }
+                ),
+                /* @__PURE__ */ t.jsxs("span", { className: "text-white flex-1", children: [
+                  /* @__PURE__ */ t.jsxs("span", { className: "font-semibold mr-2", children: [
+                    String.fromCharCode(65 + b),
+                    "."
+                  ] }),
+                  m
+                ] })
+              ]
+            },
+            b
+          )) })
+        ]
+      },
+      f
+    )) }),
+    /* @__PURE__ */ t.jsx("div", { className: "mt-8 flex justify-center", children: /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        onClick: T,
+        disabled: !v,
+        className: `py-3 px-8 rounded-lg text-white font-semibold text-lg transition-colors border-none cursor-pointer ${v ? "bg-blue-600 hover:bg-blue-700" : "bg-gray-600 cursor-not-allowed opacity-50"}`,
+        children: "Submit Answers"
+      }
+    ) }),
+    /* @__PURE__ */ t.jsxs("div", { className: "mt-4 text-center text-gray-400 text-sm", children: [
+      w,
+      " / ",
+      i.questions.length,
+      " questions answered"
+    ] })
+  ] }) }) : null;
+}
+function ue({ result: a }) {
+  const u = a.jsonData;
+  return u ? /* @__PURE__ */ t.jsx("div", { className: "p-3 bg-blue-50 rounded-md", children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "text-sm font-semibold text-gray-800 text-center", children: u.title || "Quiz" }),
+    /* @__PURE__ */ t.jsx("div", { className: "text-center", children: /* @__PURE__ */ t.jsxs("span", { className: "inline-block bg-blue-600 text-white text-xs font-bold py-1 px-3 rounded-full", children: [
+      u.questions.length,
+      " ",
+      u.questions.length === 1 ? "Question" : "Questions"
+    ] }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "text-xs text-gray-600 overflow-hidden line-clamp-2", children: u.questions[0]?.question }),
+    /* @__PURE__ */ t.jsxs("div", { className: "flex justify-center gap-1", children: [
+      Array.from({
+        length: Math.min(u.questions[0]?.choices.length || 0, 4)
+      }).map((x, i) => /* @__PURE__ */ t.jsx(
+        "div",
+        {
+          className: "size-2 bg-gray-400 rounded-full"
+        },
+        i
+      )),
+      (u.questions[0]?.choices.length || 0) > 4 && /* @__PURE__ */ t.jsxs("span", { className: "text-xs text-gray-500", children: [
+        "+",
+        u.questions[0].choices.length - 4
+      ] })
+    ] })
+  ] }) }) : null;
+}
+const fe = {
+  ...te,
+  viewComponent: ce,
+  previewComponent: ue
+}, xe = { plugin: fe };
+export {
+  ue as Preview,
+  ve as SAMPLES,
+  Ee as TOOL_DEFINITION,
+  re as TOOL_NAME,
+  ce as View,
+  xe as default,
+  _e as executeQuiz,
+  fe as plugin,
+  te as pluginCore
+};

package/dist/style.css

@@ -1 +1 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-800:oklch(43.2% .095 166.913);--color-blue-50:oklch(97% .014 254.604);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.inline-block{display:inline-block}.size-2{width:calc(var(--spacing)*2);height:calc(var(--spacing)*2)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-full{width:100%;height:100%}.h-32{height:calc(var(--spacing)*32)}.h-full{height:100%}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-\[200px\]{max-width:200px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-6{gap:calc(var(--spacing)*6)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-none{--tw-border-style:none;border-style:none}.border-\[\#3d3d5c\]{border-color:#3d3d5c}.border-\[\#4b4b6b\]{border-color:#4b4b6b}.border-blue-500{border-color:var(--color-blue-500)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-indigo-200{border-color:var(--color-indigo-200)}.bg-\[\#1a1a2e\]{background-color:#1a1a2e}.bg-\[\#2d2d44\]{background-color:#2d2d44}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500\/20{background-color:#3080ff33}@supports (color:color-mix(in lab,red,red)){.bg-blue-500\/20{background-color:color-mix(in oklab,var(--color-blue-500)20%,transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-white{background-color:var(--color-white)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#f0f0f0\]{color:#f0f0f0}.text-blue-400{color:var(--color-blue-400)}.text-emerald-800{color:var(--color-emerald-800)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-indigo-700{color:var(--color-indigo-700)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.opacity-50{opacity:.5}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media(hover:hover){.hover\:border-\[\#6b6b8b\]:hover{border-color:#6b6b8b}.hover\:border-indigo-300:hover{border-color:var(--color-indigo-300)}.hover\:bg-\[\#6b6b8b\]\/20:hover{background-color:#6b6b8b33}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-indigo-200:hover{background-color:var(--color-indigo-200)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:ring-\[3px\]:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-indigo-500\/10:focus{--tw-ring-color:#625fff1a}@supports (color:color-mix(in lab,red,red)){.focus\:ring-indigo-500\/10:focus{--tw-ring-color:color-mix(in oklab,var(--color-indigo-500)10%,transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}body{margin:calc(var(--spacing)*0);background-color:var(--color-gray-100);padding:calc(var(--spacing)*5);font-family:var(--font-sans)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-600:oklch(57.7% .245 27.325);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-800:oklch(43.2% .095 166.913);--color-blue-50:oklch(97% .014 254.604);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-800:oklch(27.8% .033 256.848);--color-white:#fff;--spacing:.25rem;--container-3xl:48rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.m-0{margin:calc(var(--spacing)*0)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-8{margin-top:calc(var(--spacing)*8)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.inline-block{display:inline-block}.size-2{width:calc(var(--spacing)*2);height:calc(var(--spacing)*2)}.size-4{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}.size-full{width:100%;height:100%}.h-32{height:calc(var(--spacing)*32)}.h-full{height:100%}.min-h-\[400px\]{min-height:400px}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-\[200px\]{max-width:200px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize-y{resize:vertical}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-6{gap:calc(var(--spacing)*6)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-none{--tw-border-style:none;border-style:none}.border-\[\#3d3d5c\]{border-color:#3d3d5c}.border-\[\#4b4b6b\]{border-color:#4b4b6b}.border-blue-500{border-color:var(--color-blue-500)}.border-emerald-200{border-color:var(--color-emerald-200)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-indigo-200{border-color:var(--color-indigo-200)}.bg-\[\#1a1a2e\]{background-color:#1a1a2e}.bg-\[\#2d2d44\]{background-color:#2d2d44}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-500\/20{background-color:#3080ff33}@supports (color:color-mix(in lab,red,red)){.bg-blue-500\/20{background-color:color-mix(in oklab,var(--color-blue-500)20%,transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-white{background-color:var(--color-white)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#f0f0f0\]{color:#f0f0f0}.text-blue-400{color:var(--color-blue-400)}.text-emerald-800{color:var(--color-emerald-800)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-indigo-700{color:var(--color-indigo-700)}.text-red-600{color:var(--color-red-600)}.text-white{color:var(--color-white)}.opacity-50{opacity:.5}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media(hover:hover){.hover\:border-\[\#6b6b8b\]:hover{border-color:#6b6b8b}.hover\:border-indigo-300:hover{border-color:var(--color-indigo-300)}.hover\:bg-\[\#6b6b8b\]\/20:hover{background-color:#6b6b8b33}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-indigo-200:hover{background-color:var(--color-indigo-200)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:ring-\[3px\]:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-indigo-500\/10:focus{--tw-ring-color:#625fff1a}@supports (color:color-mix(in lab,red,red)){.focus\:ring-indigo-500\/10:focus{--tw-ring-color:color-mix(in oklab,var(--color-indigo-500)10%,transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}}body{margin:calc(var(--spacing)*0);background-color:var(--color-gray-100);padding:calc(var(--spacing)*5);font-family:var(--font-sans)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}

package/dist/vue.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./core.cjs"),e=require("vue"),k={class:"size-full overflow-y-auto p-8 bg-[#1a1a2e]"},E={key:0,class:"max-w-3xl w-full mx-auto"},N={key:0,class:"text-[#f0f0f0] text-3xl font-bold mb-8 text-center"},S={class:"flex flex-col gap-6"},w={class:"text-white text-lg font-semibold mb-4"},V={class:"text-blue-400 mr-2"},B={class:"flex flex-col gap-3"},C=["name","value","onUpdate:modelValue"],D={class:"text-white flex-1"},T={class:"font-semibold mr-2"},q={class:"mt-8 flex justify-center"},$=["disabled"],O={class:"mt-4 text-center text-gray-400 text-sm"},h=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(d,{emit:m}){const o=d,_=m,s=e.ref(null),l=e.ref([]);e.watch(()=>o.selectedResult,t=>{t?.toolName===a.TOOL_NAME&&t.jsonData&&(s.value=t.jsonData,t.viewState?.userAnswers?l.value=t.viewState.userAnswers:l.value=new Array(s.value.questions.length).fill(null))},{immediate:!0}),e.watch(l,t=>{if(o.selectedResult&&t){const i={...o.selectedResult,viewState:{userAnswers:t}};_("updateResult",i)}},{deep:!0});const u=e.computed(()=>l.value.filter(t=>t!==null).length),p=e.computed(()=>s.value&&u.value===s.value.questions.length);function x(t,i){return l.value[t]===i?"border-blue-500 bg-blue-500/20":"border-[#4b4b6b] hover:border-[#6b6b8b] hover:bg-[#6b6b8b]/20"}function y(){if(!s.value||!p.value)return;const i=`Here are my answers:
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});;/* empty css                 */const a=require("./core.cjs"),e=require("vue"),k={class:"size-full overflow-y-auto p-8 bg-[#1a1a2e]"},E={key:0,class:"max-w-3xl w-full mx-auto"},N={key:0,class:"text-[#f0f0f0] text-3xl font-bold mb-8 text-center"},S={class:"flex flex-col gap-6"},w={class:"text-white text-lg font-semibold mb-4"},V={class:"text-blue-400 mr-2"},B={class:"flex flex-col gap-3"},C=["name","value","onUpdate:modelValue"],D={class:"text-white flex-1"},q={class:"font-semibold mr-2"},T={class:"mt-8 flex justify-center"},$=["disabled"],O={class:"mt-4 text-center text-gray-400 text-sm"},h=e.defineComponent({__name:"View",props:{selectedResult:{},sendTextMessage:{type:Function}},emits:["updateResult"],setup(d,{emit:m}){const o=d,_=m,s=e.ref(null),l=e.ref([]);e.watch(()=>o.selectedResult,t=>{t?.toolName===a.TOOL_NAME&&t.jsonData&&(s.value=t.jsonData,t.viewState?.userAnswers?l.value=t.viewState.userAnswers:l.value=new Array(s.value.questions.length).fill(null))},{immediate:!0}),e.watch(l,t=>{if(o.selectedResult&&t){const i={...o.selectedResult,viewState:{userAnswers:t}};_("updateResult",i)}},{deep:!0});const u=e.computed(()=>l.value.filter(t=>t!==null).length),p=e.computed(()=>s.value&&u.value===s.value.questions.length);function x(t,i){return l.value[t]===i?"border-blue-500 bg-blue-500/20":"border-[#4b4b6b] hover:border-[#6b6b8b] hover:bg-[#6b6b8b]/20"}function y(){if(!s.value||!p.value)return;const i=`Here are my answers:
 ${l.value.map((n,r)=>{if(n===null)return null;const v=r+1,c=String.fromCharCode(65+n),g=s.value.questions[r].choices[n];return`Q${v}: ${c} - ${g}`}).filter(n=>n!==null).join(`
-`)}`;o.sendTextMessage(i)}return(t,i)=>(e.openBlock(),e.createElementBlock("div",k,[s.value?(e.openBlock(),e.createElementBlock("div",E,[s.value.title?(e.openBlock(),e.createElementBlock("h2",N,e.toDisplayString(s.value.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value.questions,(n,r)=>(e.openBlock(),e.createElementBlock("div",{key:r,class:"bg-[#2d2d44] rounded-lg p-6 border-2 border-[#3d3d5c]"},[e.createElementVNode("div",w,[e.createElementVNode("span",V,e.toDisplayString(r+1)+".",1),e.createTextVNode(" "+e.toDisplayString(n.question),1)]),e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.choices,(v,c)=>(e.openBlock(),e.createElementBlock("label",{key:c,class:e.normalizeClass([x(r,c),"flex items-start p-4 rounded-lg cursor-pointer transition-all duration-200 border-2"])},[e.withDirectives(e.createElementVNode("input",{type:"radio",name:`question-${r}`,value:c,"onUpdate:modelValue":g=>l.value[r]=g,class:"mt-1 mr-3 size-4 shrink-0"},null,8,C),[[e.vModelRadio,l.value[r]]]),e.createElementVNode("span",D,[e.createElementVNode("span",T,e.toDisplayString(String.fromCharCode(65+c))+".",1),e.createTextVNode(" "+e.toDisplayString(v),1)])],2))),128))])]))),128))]),e.createElementVNode("div",q,[e.createElementVNode("button",{onClick:y,disabled:!p.value,class:e.normalizeClass([p.value?"bg-blue-600 hover:bg-blue-700":"bg-gray-600 cursor-not-allowed opacity-50","py-3 px-8 rounded-lg text-white font-semibold text-lg transition-colors border-none cursor-pointer"])}," Submit Answers ",10,$)]),e.createElementVNode("div",O,e.toDisplayString(u.value)+" / "+e.toDisplayString(s.value.questions.length)+" questions answered ",1)])):e.createCommentVNode("",!0)]))}}),A={class:"p-3 bg-blue-50 rounded-md"},L={key:0,class:"flex flex-col gap-2"},M={class:"text-sm font-semibold text-gray-800 text-center"},z={class:"text-center"},j={class:"inline-block bg-blue-600 text-white text-xs font-bold py-1 px-3 rounded-full"},Q={class:"text-xs text-gray-600 overflow-hidden line-clamp-2"},F={class:"flex justify-center gap-1"},P={key:0,class:"text-xs text-gray-500"},b=e.defineComponent({__name:"Preview",props:{result:{}},setup(d){const m=d,o=e.computed(()=>m.result.jsonData);return(_,s)=>(e.openBlock(),e.createElementBlock("div",A,[o.value?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("div",M,e.toDisplayString(o.value.title||"Quiz"),1),e.createElementVNode("div",z,[e.createElementVNode("span",j,e.toDisplayString(o.value.questions.length)+" "+e.toDisplayString(o.value.questions.length===1?"Question":"Questions"),1)]),e.createElementVNode("div",Q,e.toDisplayString(o.value.questions[0]?.question),1),e.createElementVNode("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Math.min(o.value.questions[0]?.choices.length||0,4),(l,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:"size-2 bg-gray-400 rounded-full"}))),128)),(o.value.questions[0]?.choices.length||0)>4?(e.openBlock(),e.createElementBlock("div",P," +"+e.toDisplayString(o.value.questions[0].choices.length-4),1)):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]))}}),f={...a.pluginCore,viewComponent:h,previewComponent:b},R={plugin:f};exports.SAMPLES=a.SAMPLES;exports.TOOL_DEFINITION=a.TOOL_DEFINITION;exports.TOOL_NAME=a.TOOL_NAME;exports.executeQuiz=a.executeQuiz;exports.pluginCore=a.pluginCore;exports.Preview=b;exports.View=h;exports.default=R;exports.plugin=f;
+`)}`;o.sendTextMessage(i)}return(t,i)=>(e.openBlock(),e.createElementBlock("div",k,[s.value?(e.openBlock(),e.createElementBlock("div",E,[s.value.title?(e.openBlock(),e.createElementBlock("h2",N,e.toDisplayString(s.value.title),1)):e.createCommentVNode("",!0),e.createElementVNode("div",S,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value.questions,(n,r)=>(e.openBlock(),e.createElementBlock("div",{key:r,class:"bg-[#2d2d44] rounded-lg p-6 border-2 border-[#3d3d5c]"},[e.createElementVNode("div",w,[e.createElementVNode("span",V,e.toDisplayString(r+1)+".",1),e.createTextVNode(" "+e.toDisplayString(n.question),1)]),e.createElementVNode("div",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.choices,(v,c)=>(e.openBlock(),e.createElementBlock("label",{key:c,class:e.normalizeClass([x(r,c),"flex items-start p-4 rounded-lg cursor-pointer transition-all duration-200 border-2"])},[e.withDirectives(e.createElementVNode("input",{type:"radio",name:`question-${r}`,value:c,"onUpdate:modelValue":g=>l.value[r]=g,class:"mt-1 mr-3 size-4 shrink-0"},null,8,C),[[e.vModelRadio,l.value[r]]]),e.createElementVNode("span",D,[e.createElementVNode("span",q,e.toDisplayString(String.fromCharCode(65+c))+".",1),e.createTextVNode(" "+e.toDisplayString(v),1)])],2))),128))])]))),128))]),e.createElementVNode("div",T,[e.createElementVNode("button",{onClick:y,disabled:!p.value,class:e.normalizeClass([p.value?"bg-blue-600 hover:bg-blue-700":"bg-gray-600 cursor-not-allowed opacity-50","py-3 px-8 rounded-lg text-white font-semibold text-lg transition-colors border-none cursor-pointer"])}," Submit Answers ",10,$)]),e.createElementVNode("div",O,e.toDisplayString(u.value)+" / "+e.toDisplayString(s.value.questions.length)+" questions answered ",1)])):e.createCommentVNode("",!0)]))}}),A={class:"p-3 bg-blue-50 rounded-md"},L={key:0,class:"flex flex-col gap-2"},M={class:"text-sm font-semibold text-gray-800 text-center"},z={class:"text-center"},j={class:"inline-block bg-blue-600 text-white text-xs font-bold py-1 px-3 rounded-full"},Q={class:"text-xs text-gray-600 overflow-hidden line-clamp-2"},F={class:"flex justify-center gap-1"},P={key:0,class:"text-xs text-gray-500"},b=e.defineComponent({__name:"Preview",props:{result:{}},setup(d){const m=d,o=e.computed(()=>m.result.jsonData);return(_,s)=>(e.openBlock(),e.createElementBlock("div",A,[o.value?(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("div",M,e.toDisplayString(o.value.title||"Quiz"),1),e.createElementVNode("div",z,[e.createElementVNode("span",j,e.toDisplayString(o.value.questions.length)+" "+e.toDisplayString(o.value.questions.length===1?"Question":"Questions"),1)]),e.createElementVNode("div",Q,e.toDisplayString(o.value.questions[0]?.question),1),e.createElementVNode("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Math.min(o.value.questions[0]?.choices.length||0,4),(l,u)=>(e.openBlock(),e.createElementBlock("div",{key:u,class:"size-2 bg-gray-400 rounded-full"}))),128)),(o.value.questions[0]?.choices.length||0)>4?(e.openBlock(),e.createElementBlock("div",P," +"+e.toDisplayString(o.value.questions[0].choices.length-4),1)):e.createCommentVNode("",!0)])])):e.createCommentVNode("",!0)]))}}),f={...a.pluginCore,viewComponent:h,previewComponent:b},R={plugin:f};exports.SAMPLES=a.SAMPLES;exports.TOOL_DEFINITION=a.TOOL_DEFINITION;exports.TOOL_NAME=a.TOOL_NAME;exports.executeQuiz=a.executeQuiz;exports.pluginCore=a.pluginCore;exports.Preview=b;exports.View=h;exports.default=R;exports.plugin=f;

package/dist/vue.js

@@ -1,5 +1,6 @@
+/* empty css               */
 import { TOOL_NAME as A, pluginCore as D } from "./core.js";
-import { SAMPLES as ue, TOOL_DEFINITION as ce, executeQuiz as de } from "./core.js";
+import { SAMPLES as ce, TOOL_DEFINITION as de, executeQuiz as ve } from "./core.js";
 import { defineComponent as S, ref as C, watch as $, computed as g, createElementBlock as l, openBlock as n, createCommentVNode as m, createElementVNode as e, toDisplayString as i, Fragment as x, renderList as w, createTextVNode as k, normalizeClass as q, withDirectives as N, vModelRadio as V } from "vue";
 const j = { class: "size-full overflow-y-auto p-8 bg-[#1a1a2e]" }, M = {
   key: 0,
@@ -131,15 +132,15 @@ ${a.value.map((r, u) => {
   ...D,
   viewComponent: J,
   previewComponent: se
-}, ie = { plugin: oe };
+}, ae = { plugin: oe };
 export {
   se as Preview,
-  ue as SAMPLES,
-  ce as TOOL_DEFINITION,
+  ce as SAMPLES,
+  de as TOOL_DEFINITION,
   A as TOOL_NAME,
   J as View,
-  ie as default,
-  de as executeQuiz,
+  ae as default,
+  ve as executeQuiz,
   oe as plugin,
   D as pluginCore
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mulmochat-plugin/quiz",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Quiz plugin for MulmoChat",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -22,6 +22,11 @@
       "import": "./dist/vue.js",
       "require": "./dist/vue.cjs"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
     "./style.css": "./dist/style.css"
   },
   "files": [
@@ -29,21 +34,40 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
-    "typecheck": "vue-tsc --noEmit",
-    "lint": "eslint src demo"
+    "dev:react": "vite --config demo-react/vite.config.ts",
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly && tsc -p tsconfig.react.json --emitDeclarationOnly",
+    "typecheck": "vue-tsc --noEmit && tsc -p tsconfig.react.json --noEmit",
+    "lint": "eslint src demo demo-react"
   },
   "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "vue": "^3.5.0"
   },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.53.0",
     "@typescript-eslint/parser": "^8.53.0",
+    "@vitejs/plugin-react": "^4.5.0",
     "@vitejs/plugin-vue": "^6.0.3",
     "eslint": "^9.39.2",
     "eslint-plugin-vue": "^10.6.2",
     "globals": "^17.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
@@ -54,7 +78,9 @@
   "keywords": [
     "mulmochat",
     "plugin",
-    "quiz"
+    "quiz",
+    "react",
+    "vue"
   ],
   "license": "MIT"
 }