@jboltai/tokui-svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 jboltai.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @jboltai/tokui-svelte
+
+> TokUI 的 Svelte 适配器：`use:tokui` action + `<TokUI>` 组件。
+
+## 安装
+
+```bash
+npm install @jboltai/tokui-svelte svelte
+```
+
+## Action（无需编译，最简）
+
+```svelte
+<script>
+  import { tokui } from '@jboltai/tokui-svelte';
+  const dsl = '[card tt:你好 TokUI][p 流式 UI，零依赖][/card]';
+</script>
+
+<div use:tokui={{ dsl, theme: 'default' }}></div>
+```
+
+`dsl` 变化时 action 的 `update` 自动重新渲染。
+
+## 组件（需 svelte 编译器）
+
+```svelte
+<script>
+  import TokUI from '@jboltai/tokui-svelte/src/TokUI.svelte';
+  const dsl = '[card tt:你好][p 内容][/card]';
+</script>
+
+<TokUI {dsl} theme="default" />
+```
+
+## CSS
+
+样式随 `@jboltai/tokui` 自动注入，无需手动引 CSS。
+
+License: MIT

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@jboltai/tokui-svelte",
+  "version": "0.1.0",
+  "description": "TokUI Svelte adapter — use:tokui action and TokUI component for streaming DSL UI.",
+  "license": "MIT",
+  "author": "sdxiaomu (https://jboltai.com)",
+  "homepage": "https://github.com/jboltai/tokui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jboltai/tokui.git",
+    "directory": "packages/svelte"
+  },
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "types": "src/index.d.ts",
+  "type": "module",
+  "svelte": "src/TokUI.svelte",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "svelte": "./src/TokUI.svelte",
+      "import": "./src/index.js",
+      "require": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./action": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@jboltai/tokui": "^0.1.0"
+  },
+  "peerDependencies": {
+    "svelte": ">=3.46.0"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": false
+    }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "tokui",
+    "svelte",
+    "streaming-ui",
+    "dsl",
+    "action"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/TokUI.svelte

@@ -0,0 +1,29 @@
+<script>
+  // TokUI Svelte 组件（需 svelte 编译器）。无需编译的 action 版见 ./index.js。
+  import { onMount, onDestroy } from 'svelte';
+  import { TokUI, setTheme } from '@jboltai/tokui';
+
+  /** @type {string} DSL 文本 */
+  export let dsl = '';
+  /** @type {string} 主题名 */
+  export let theme = '';
+
+  let container;
+  /** @type {any} */
+  let ui;
+
+  onMount(() => {
+    ui = new TokUI({ container });
+    if (theme) setTheme(theme);
+    if (dsl) ui.render(dsl);
+  });
+
+  // dsl 响应式变化 → 重新渲染
+  $: if (ui && dsl) ui.render(dsl);
+  // theme 响应式变化 → 切换主题
+  $: if (theme) { try { setTheme(theme); } catch (e) { /* ignore */ } }
+
+  onDestroy(() => { if (ui && ui.disconnect) ui.disconnect(); });
+</script>
+
+<div bind:this={container} class="tokui-svelte-view"></div>

package/src/index.d.ts

@@ -0,0 +1,18 @@
+import type { TokUIEventCallback } from '@jboltai/tokui';
+
+export interface TokuiActionOptions {
+  dsl?: string;
+  theme?: string;
+  onEvent?: TokUIEventCallback;
+}
+
+/** Svelte action：<div use:tokui={{ dsl, theme }} /> */
+export declare function tokui(
+  node: HTMLElement,
+  options?: TokuiActionOptions
+): {
+  update: (options: TokuiActionOptions) => void;
+  destroy: () => void;
+};
+
+export default tokui;

package/src/index.js

@@ -0,0 +1,41 @@
+'use strict';
+
+// TokUI Svelte 适配器：use:tokui action（纯 JS，无需 svelte 预处理即可用）。
+// 组件版见 ./TokUI.svelte（需 svelte 编译器）。
+import { TokUI, setTheme } from '@jboltai/tokui';
+
+/**
+ * Svelte action：<div use:tokui={{ dsl, theme }}></div>
+ * @param {HTMLElement} node 挂载节点
+ * @param {{dsl?:string, theme?:string, onEvent?:function}} [options]
+ */
+export function tokui(node, options) {
+  let ui = null;
+
+  const ensure = (opts) => {
+    if (ui) return ui;
+    ui = new TokUI({ container: node });
+    return ui;
+  };
+
+  // 初始渲染
+  if (options) {
+    const ui0 = ensure(options);
+    if (options.theme) { try { setTheme(options.theme); } catch (e) { /* ignore */ } }
+    if (options.dsl) ui0.render(options.dsl);
+  }
+
+  return {
+    update(opts) {
+      const u = ensure(opts);
+      if (opts && opts.theme) { try { setTheme(opts.theme); } catch (e) { /* ignore */ } }
+      if (opts && opts.dsl != null) u.render(opts.dsl);
+    },
+    destroy() {
+      if (ui && ui.disconnect) ui.disconnect();
+      ui = null;
+    }
+  };
+}
+
+export default tokui;