auricui-skill 0.0.0-stage → 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 OpenFilm contributors
+
+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

@@ -1,3 +1,30 @@
-# Temporary Holding Version
+# AuricUI Skill
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+为编码 Agent 安装 AuricUI 组件库指南，包括 API 查询、基础组件、Agent / Personal Agent、AI 聊天、Studio、主题动画、依赖检查和可编译示例。需要 Node.js >=20.19；附带的依赖/API 检查工具使用 Python 3 标准库。
+
+此 npm 包是 Skill 安装器，React 组件库本身为 `auricui`。安装器只复制技能文件；在应用中安装 UI 库由 Agent 按 Skill 指南完成。
+
+发布本包之后，可执行：
+
+```bash
+# 当前项目：.agents/skills/auricui
+npx auricui-skill@latest
+
+# Codex 全局：CODEX_HOME/skills，未设置时为 ~/.codex/skills
+npx auricui-skill@latest --global
+
+# 其他支持 SKILL.md 的 Agent：传入其实际技能目录
+npx auricui-skill@latest --dir ./my-agent-skills
+
+# 更新现有安装，自动备份旧版本
+npx auricui-skill@latest --global --update
+
+# 仅查看路径
+npx auricui-skill@latest --dry-run
+```
+
+自定义目录参数表示技能的父目录，安装器会追加 `auricui`。已有目录默认不覆盖；`--update` 的备份位于 skills 父目录下的 `.auricui-skill-backups/`，终端会输出确切位置。符号链接目标不会被覆盖。
+
+安装后刷新 Agent 技能列表或新开会话，使用 `$auricui`；不支持自动扫描技能的 Agent 可显式读取安装目录中的 SKILL.md。组件基线为 `0.1.0-preview.3`，实际安装版本不同则按其声明核对 API。
+
+包含的源参考快照和本地组件包保留 MIT 与第三方许可；详见 Skill 内来源资料和组件包的 LICENSE / THIRD-PARTY-NOTICES.md。

package/bin/install.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import { fileURLToPath } from 'node:url';
+import { randomUUID } from 'node:crypto';
+
+const help = `AuricUI Skill installer
+
+Usage: npx auricui-skill [--global | --dir <skills-directory>] [--update] [--dry-run]
+
+Default: .agents/skills/auricui in the current project
+--global   Install into CODEX_HOME/skills, or ~/.codex/skills
+--dir      Choose another agent's skills directory; appends /auricui
+--update   Back up and replace an existing auricui skill
+--dry-run  Show the destination without writing files
+--help     Show this help
+
+The installer copies the Skill only. Your agent follows it to install/use the auricui React library.
+`;
+
+function main() {
+  let global = false, directory, update = false, dry = false;
+  const args = process.argv.slice(2);
+  if (args.includes('--help') || args.includes('-h')) { console.log(help); return; }
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === '--global') global = true;
+    else if (arg === '--update') update = true;
+    else if (arg === '--dry-run') dry = true;
+    else if (arg === '--dir') {
+      directory = args[++i];
+      if (!directory || directory.startsWith('--')) throw new Error('--dir requires a skills directory');
+    } else throw new Error(`Unknown argument: ${arg}`);
+  }
+  if (global && directory) throw new Error('Choose either --global or --dir');
+  const base = path.resolve(directory ?? (global
+    ? path.join(process.env.CODEX_HOME || path.join(os.homedir(), '.codex'), 'skills')
+    : path.join(process.cwd(), '.agents', 'skills')));
+  const target = path.join(base, 'auricui');
+  const source = fileURLToPath(new URL('../skill/', import.meta.url));
+  if (!fs.existsSync(path.join(source, 'SKILL.md'))) throw new Error('Skill payload missing. Build the distribution package before running it.');
+  const present = fs.existsSync(target) || (() => { try { return fs.lstatSync(target).isSymbolicLink(); } catch { return false; } })();
+  console.log(`Destination: ${target}`);
+  if (dry) { console.log('Dry run: no files written.' + (present ? ' Destination already exists; an actual update requires --update.' : '')); return; }
+  if (present && fs.lstatSync(target).isSymbolicLink()) throw new Error(`Refusing to replace a symlink: ${target}`);
+  if (present && !update) throw new Error(`Skill already exists: ${target}\nUse --update to back it up and replace it.`);
+  if (present && !fs.statSync(target).isDirectory()) throw new Error(`Destination is not a directory: ${target}`);
+  fs.mkdirSync(base, {recursive: true});
+  const staging = fs.mkdtempSync(path.join(base, '.auricui-stage-'));
+  let backup;
+  try {
+    fs.cpSync(source, staging, {recursive: true, dereference: false});
+    if (present) {
+      backup = path.join(path.dirname(base), '.auricui-skill-backups', `${Date.now()}-${randomUUID()}`);
+      fs.mkdirSync(path.dirname(backup), {recursive: true});
+      fs.renameSync(target, backup);
+    }
+    try { fs.renameSync(staging, target); }
+    catch (error) { if (backup) fs.renameSync(backup, target); throw error; }
+  } finally { fs.rmSync(staging, {recursive: true, force: true}); }
+  if (backup) console.log(`Previous skill backed up: ${backup}`);
+  console.log('Installed AuricUI Skill. Refresh your agent skill list or open a new session, then invoke $auricui.');
+}
+
+try { main(); } catch (error) { console.error(error.message); process.exitCode = 1; }

package/package.json

@@ -1,6 +1,31 @@
 {
   "name": "auricui-skill",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.2",
+  "description": "Install the AuricUI component-library skill for coding agents",
+  "type": "module",
+  "license": "MIT",
+  "bin": {
+    "auricui-skill": "bin/install.mjs"
+  },
+  "files": [
+    "bin",
+    "skill",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=20.19"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "keywords": [
+    "auricui",
+    "agent",
+    "skill",
+    "react",
+    "ui"
+  ],
+  "author": "hehuan"
+}

package/skill/SKILL.md

@@ -0,0 +1,64 @@
+---
+name: auricui
+description: 使用 auricui React 组件库开发深色应用、设置面板和 AI 聊天界面；提供组件选择、准确的 props、主题与动画、服务适配和安装排错。用户提到 AuricUI、auricui/agent、auricui/chat、auricui/studio，或要求沿用这套视觉系统时使用。
+---
+
+# AuricUI
+
+以已安装的 `auricui` 成品包开发应用。文档和可编译示例基于 `0.1.0-preview.3`；版本不同时，以安装包的 `package.json`、`exports` 和 `.d.ts` 为准。所有附带路径相对于本 Skill，跨项目使用不需要原开发仓库。
+
+## 工作流程
+
+1. 确认目标前端包目录、包管理器、框架与 AuricUI 版本。运行 `python3 <Skill目录>/scripts/check_dependencies.py --project <前端目录>`，默认检查成品包；新项目先建立 package.json。
+2. 读取 [安装与接入](references/esm-package.md)。当前包要求 React 19 + React DOM 19 与 ESM；TypeScript、Tailwind 是消费方选项。保持用户指定的技术栈，不为通过检查擅自升级框架。
+3. 按下表阅读相关资料，确认真实导出和 props 再写 JSX。优先组合已有组件，库未提供的功能在应用侧实现。
+4. 接入 CSS、主题与 Portal，编写需要的状态和业务回调。
+5. 完成目标项目类型检查、构建和所用组件的交互验证。静态检查不代替浏览器验收；没有运行环境时说明未验证项。
+
+## 按任务阅读
+
+| 任务 | 资料 |
+| --- | --- |
+| 安装、入口、React/SSR、全局样式 | [esm-package.md](references/esm-package.md) |
+| 按钮、表单、设置、弹窗、颜色和数字字段 | [core-components.md](references/core-components.md) |
+| Agent 消息、工具执行、记忆、简报与个人助手 | [agent-components.md](references/agent-components.md) |
+| AI 聊天、富文本、模型菜单、附件、工具和问答 | [chat-components.md](references/chat-components.md) |
+| 项目、时间轴、媒体、专业编辑器 | [studio-components.md](references/studio-components.md) |
+| 配色、字体、层级、Portal、动画 | [theme-motion.md](references/theme-motion.md) |
+| 依赖分类、检查结果 | [dependencies.md](references/dependencies.md) |
+| 安装失败、缺失导出、样式和接口问题 | [troubleshooting.md](references/troubleshooting.md) |
+| 视觉和交互验收 | [verification.md](references/verification.md) |
+
+## 查 API，而不是猜 API
+
+只读工具优先读取目标项目声明，未安装时从附带 tgz 读取：
+
+```bash
+python3 <Skill目录>/scripts/inspect_api.py --entry core --symbol CardButton --project <前端目录>
+python3 <Skill目录>/scripts/inspect_api.py --entry chat --symbol PromptEditor --project <前端目录>
+python3 <Skill目录>/scripts/inspect_api.py --entry agent --symbol MemoryCard --project <前端目录>
+python3 <Skill目录>/scripts/inspect_api.py --entry studio
+```
+
+无 `--symbol` 时列出入口导出。工具基于 [API 索引](references/api-index.json)，区分运行时和 type-only 导出；版本不同则沿安装包入口的 `export *` 检查当前声明，不把基线索引当成新版契约。
+
+附带可复制并经过编译检查的示例：
+- 主题和新增组件：`assets/examples/Theme.tsx`、`Drawer.tsx`、`Tree.tsx`、`MessageList.tsx`、`ToolCall.tsx`、`MemoryCard.tsx` 等，均使用公开导出。
+- [BasicApp.tsx](assets/examples/BasicApp.tsx)：应用根、表单、设置、确认弹窗和 Toast。
+- [ChatPanel.tsx](assets/examples/ChatPanel.tsx)：消息、输入、发送/取消与流式响应，通过 `reply` 注入业务请求。
+- [ChatControls.tsx](assets/examples/ChatControls.tsx)：模型选择、单步/多步问答、工具活动和文件差异。
+- [examples.css](assets/examples/examples.css)：示例布局，不依赖 Tailwind 编译。
+
+## 保持组件契约
+
+- 全局导入一次 `auricui/styles.css`；首屏 HTML 设置 `data-theme="dark"`；应用根只挂载一个 `AuricUIProvider`；Chat 内容放在 `.auricui-chat` 内。
+- `CardButton` 用 `weight="primary"`，`SettingsButton` 用 `variant="primary"`。`Button`、`Input`、`Modal`、`AttachmentCard` 不是该版本对应的公开组件名。
+- `PromptEditor.defaultValue` 只在挂载时读取。程序修改用 ref 的 `setText` / `clear`，不要每次 render 回写内容。
+- `ModelPopover` 必须在 `ModelOptionsProvider` 内；宿主负责模型目录、选择和持久化。
+- CSS 包含字体、关键帧和组件样式。应用自己新增的任意 Tailwind 类不由预编译包保证，需要自己的 CSS 或 Tailwind 构建。
+- 组件不会自动调用模型。完整 Chat/Studio 页面的服务接口按任务接入，不把演示数据当生产后端。
+- 保留目标业务和信息架构，复用尺寸、色彩、焦点、禁用状态和动效；不宣称未验证的 100% 像素匹配。
+
+## 源码适配
+
+需要修改库实现时才读取 [集成规范](references/integration.md) 和 [来源索引](references/components.md)。`assets/library/` 是独立可安装包；`assets/upstream/` 是保留来源名称的原始参考快照，包含业务耦合，并非当前成品包的等价源码。以成品包声明和行为为基准，保留 MIT 与第三方署名。源码依赖检查显式使用 `--mode source`。

package/skill/agents/openai.yaml

@@ -0,0 +1,4 @@
+interface:
+  display_name: "AuricUI 组件库开发"
+  short_description: "熟练使用 AuricUI 的组件 API、深色主题、动画与 AI 聊天服务接入"
+  default_prompt: "使用 $auricui 为当前项目开发界面，先检查依赖和组件 API，再接入主题、交互与业务服务。"

package/skill/assets/examples/ApprovalCard.tsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import { ApprovalCard } from 'auricui/agent';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [status,setStatus]=useState<'pending'|'approved'|'rejected'>('pending');
+  return <div style={{display:'grid',gap:16,width:'100%'}}><ApprovalCard title="发送这封邮件？" description="收件人：design@example.com" status={status} onApprove={()=>setStatus('approved')} onReject={()=>setStatus('rejected')}><p>主题：本周设计评审</p></ApprovalCard>{status!=='pending'&&<button type="button" onClick={()=>setStatus('pending')}>重新演示</button>}</div>;
+}

package/skill/assets/examples/BasicApp.tsx

@@ -0,0 +1,38 @@
+'use client';
+import { useState } from 'react';
+import { AuricUIProvider, Card, CardActions, CardButton, ConfirmDialog,
+  SettingsDialog, SettingsPage, SettingsGroup, SettingsItem, SettingsField,
+  SettingsSwitch, SettingsSelect, Toast, useToast } from 'auricui';
+import 'auricui/styles.css';
+import './examples.css';
+
+export function BasicApp() {
+  const [name, setName] = useState('我的应用');
+  const [enabled, setEnabled] = useState(true);
+  const [language, setLanguage] = useState('zh');
+  const [settings, setSettings] = useState(false);
+  const [confirm, setConfirm] = useState(false);
+  const toast = useToast();
+  return <AuricUIProvider theme="dark">
+    <main className="auricui-example-page">
+      <Card title={name} body="应用设置示例">
+        <CardActions>
+          <CardButton onClick={() => setSettings(true)}>设置</CardButton>
+          <CardButton weight="primary" onClick={() => setConfirm(true)}>重置设置</CardButton>
+        </CardActions>
+      </Card>
+      <SettingsDialog open={settings} onClose={() => setSettings(false)} pages={[{
+        id: 'general', title: '通用', group: '应用', icon: null,
+        content: <SettingsPage><SettingsGroup title="偏好设置">
+          <SettingsItem title="名称" control={<SettingsField aria-label="应用名称" value={name} onChange={e => setName(e.target.value)} />} />
+          <SettingsItem title="通知" control={<SettingsSwitch label="启用通知" checked={enabled} onChange={setEnabled} />} />
+          <SettingsItem title="语言" control={<SettingsSelect label="语言" value={language} onChange={setLanguage} options={[{value:'zh',label:'中文'},{value:'en',label:'English'}]} />} />
+        </SettingsGroup></SettingsPage>,
+      }]} />
+      <ConfirmDialog open={confirm} title="重置设置？" description="恢复此示例的默认设置。"
+        confirmLabel="重置" cancelLabel="取消" danger onCancel={() => setConfirm(false)}
+        onConfirm={() => { setName('我的应用'); setEnabled(true); setLanguage('zh'); setConfirm(false); toast.show('已恢复默认设置'); }} />
+      <Toast toast={toast.current} />
+    </main>
+  </AuricUIProvider>;
+}

package/skill/assets/examples/BriefingCard.tsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import { BriefingCard } from 'auricui/agent';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [selected,setSelected]=useState('');
+  return <div style={{width:'100%'}}><BriefingCard title="早上好，hehuan" subtitle="今天有一些值得关注的小事。" items={[{id:'1',title:'产品设计评审',detail:'准备好你的三个关键问题',meta:'10:30',onSelect:()=>setSelected('产品设计评审')},{id:'2',title:'阅读计划',detail:'本周已经完成 2 天',meta:'20 分钟'}]} footer="根据你提供的日程与目标整理"/>{selected&&<p role="status" style={{fontSize:12,marginTop:12}}>已选择：{selected}</p>}</div>;
+}

package/skill/assets/examples/ChatControls.tsx

@@ -0,0 +1,49 @@
+'use client';
+import { useEffect, useState, type ComponentProps } from 'react';
+import { ModelOptionsProvider, ModelPopover, TurnQuestionCard, LocalAgentQuestionCard,
+  AgentActivityList, FileChangesList, DeveloperContext, type ModelSelection } from 'auricui/chat';
+import './examples.css';
+
+// Replace these example model IDs with the catalogue returned by your own backend.
+const options: ComponentProps<typeof ModelOptionsProvider>['options'] = {
+  byok: [{id:'model', name:'模型', category:'model', options:[
+    {value:'model-a',name:'示例模型 A'}, {value:'model-b',name:'示例模型 B'},
+  ]}],
+};
+const questions: ComponentProps<typeof LocalAgentQuestionCard>['questions'] = [{
+  id:'layout', header:'布局', question:'选择页面布局', multi:false, customId:'custom-layout',
+  options:[{label:'双栏',description:'导航与内容分栏'},{label:'单栏',description:'聚焦主要内容'}],
+}];
+const changes: ComponentProps<typeof FileChangesList>['changes'] = [{
+  path:'src/App.tsx', change:'changed', added:1, removed:1,
+  hunks:[{oldStart:1,oldLines:1,newStart:1,newLines:1,lines:['-const title = "旧标题";','+const title = "新标题";']}],
+}];
+
+/** UI-only examples; connect answers and model selection to your application. */
+export function ChatControls() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  // ModelPopover reads window during render in this baseline. A client directive alone does not disable SSR.
+  return mounted ? <ChatControlsClient /> : <section aria-busy="true">正在加载交互控件…</section>;
+}
+
+function ChatControlsClient() {
+  const [selection, setSelection] = useState<ModelSelection>({agent:'byok',prefs:{byok:{model:'model-a'}}});
+  const [answer, setAnswer] = useState('');
+  const [questionOpen, setQuestionOpen] = useState(true);
+  const [multiOpen, setMultiOpen] = useState(false);
+  return <section className="auricui-chat auricui-example-controls">
+    <ModelOptionsProvider agents={[{id:'byok',name:'自定义服务',status:'ready'}]}
+      options={options} value={selection} onChange={setSelection}>
+      <ModelPopover />
+    </ModelOptionsProvider>
+    {questionOpen && <TurnQuestionCard ask={{question:'是否继续？',options:[{label:'继续'},{label:'稍后'}]}}
+      onAnswer={text => {setAnswer(text);setQuestionOpen(false);setMultiOpen(true);}} onSkip={() => {setQuestionOpen(false);setMultiOpen(true);}} />}
+    {multiOpen && <LocalAgentQuestionCard questions={questions} onDone={answers => {
+      setAnswer(answers ? JSON.stringify(answers) : '已跳过'); setMultiOpen(false);
+    }} />}
+    <p role="status">{answer}</p>
+    <AgentActivityList items={[{id:'step-1',kind:'act',label:'act.read',detail:'src/App.tsx',pending:false}]} />
+    <DeveloperContext.Provider value={{logs:false,changes:true}}><FileChangesList changes={changes} /></DeveloperContext.Provider>
+  </section>;
+}

package/skill/assets/examples/ChatPanel.tsx

@@ -0,0 +1,73 @@
+'use client';
+import { useEffect, useRef, useState } from 'react';
+import { CardButton, Markdown, PromptEditor, type PromptEditorHandle,
+  type PromptEditorState } from 'auricui/chat';
+import './examples.css';
+
+export type Reply = (draft: PromptEditorState, signal: AbortSignal) => AsyncIterable<string>;
+type Message = { id: string; role: 'user' | 'assistant'; text: string };
+const emptyDraft: PromptEditorState = { text: '', references: [] };
+
+/** Mount under one AuricUIProvider with auricui/styles.css imported at the app root.
+ * reply is supplied by your backend adapter; it yields text deltas, not cumulative text.
+ * This simple example displays user text as plain text. Add PromptWithPills when enabling references.
+ */
+export function ChatPanel({ reply }: { reply: Reply }) {
+  const editor = useRef<PromptEditorHandle>(null);
+  const latest = useRef<PromptEditorState>(emptyDraft);
+  const request = useRef<AbortController | null>(null);
+  const [draft, setDraft] = useState(emptyDraft);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+  useEffect(() => () => { request.current?.abort(); request.current = null; }, []);
+
+  const send = async () => {
+    const input = latest.current;
+    if (request.current || !input.text.trim()) return;
+    const controller = new AbortController();
+    request.current = controller;
+    const answerId = crypto.randomUUID();
+    setError(''); setBusy(true);
+    setMessages(items => [...items,
+      { id: crypto.randomUUID(), role: 'user', text: input.text },
+      { id: answerId, role: 'assistant', text: '' },
+    ]);
+    editor.current?.clear(); latest.current = emptyDraft; setDraft(emptyDraft);
+    try {
+      for await (const delta of reply(input, controller.signal)) {
+        if (controller.signal.aborted || request.current !== controller) break;
+        setMessages(items => items.map(item => item.id === answerId ? {...item, text:item.text + delta} : item));
+      }
+    } catch (cause) {
+      if (!controller.signal.aborted && request.current === controller) {
+        setError(cause instanceof Error ? cause.message : '回复失败，请重试');
+      }
+    } finally {
+      if (request.current === controller) { request.current = null; setBusy(false); }
+    }
+  };
+  const stop = () => {
+    request.current?.abort(); request.current = null; setBusy(false);
+  };
+  return <section className="auricui-chat auricui-example-chat" aria-label="AI 对话">
+    <div className="auricui-example-messages" aria-busy={busy}>
+      {messages.length === 0 && <p>输入内容开始对话。</p>}
+      {messages.map(item => <article key={item.id} className="auricui-example-message">
+        <small>{item.role === 'user' ? '你' : '助手'}</small>
+        {item.role === 'assistant' ? <Markdown text={item.text || (busy ? '正在回复…' : '回复已停止')} /> : <p>{item.text}</p>}
+      </article>)}
+    </div>
+    {error && <p className="auricui-example-error" role="alert">{error}</p>}
+    <div className="auricui-example-composer">
+      <PromptEditor ref={editor} defaultValue="" references={emptyDraft.references}
+        onChange={value => { latest.current = value; setDraft(value); }} onSubmit={() => { void send(); }}
+        placeholder="发送消息…" removeLabel="删除引用" ariaLabel="消息输入"
+        minHeight={72} maxHeight={240} contentClassName="auricui-example-editor" disabled={busy} />
+      <div className="auricui-example-actions">
+        <CardButton weight="primary" disabled={!busy && !draft.text.trim()}
+          onClick={busy ? stop : () => { void send(); }}>{busy ? '停止' : '发送'}</CardButton>
+      </div>
+    </div>
+  </section>;
+}

package/skill/assets/examples/Checkbox.tsx

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import { Checkbox } from 'auricui';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [selected, setSelected] = useState(['notes']);
+  const items = [{ id: 'notes', label: '笔记' }, { id: 'files', label: '文件' }, { id: 'tasks', label: '任务' }];
+  return <div style={{ display: 'grid', gap: 14 }}>
+    <Checkbox label="选择全部资料" checked={selected.length === items.length} indeterminate={selected.length > 0 && selected.length < items.length} onCheckedChange={checked => setSelected(checked ? items.map(item => item.id) : [])} />
+    {items.map(item => <Checkbox key={item.id} label={item.label} checked={selected.includes(item.id)} onCheckedChange={checked => setSelected(checked ? [...selected, item.id] : selected.filter(id => id !== item.id))} />)}
+    <Checkbox label="受保护的内容" description="禁用的选项不能被修改。" disabled />
+  </div>;
+}

package/skill/assets/examples/Combobox.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import { Combobox } from 'auricui';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [value, setValue] = useState('shanghai');
+  return <div style={{ display: 'grid', gap: 14 }}><Combobox label="简报使用的时区" value={value} onValueChange={setValue} placeholder="搜索城市或时区…" options={[
+    { value: 'shanghai', label: '上海 · Asia/Shanghai' },
+    { value: 'tokyo', label: '东京 · Asia/Tokyo' },
+    { value: 'london', label: '伦敦 · Europe/London' },
+    { value: 'new-york', label: '纽约 · America/New_York' },
+    { value: 'custom', label: '自定义时区（未开通）', disabled: true },
+  ]} /><p role="status">已选择：{value}</p></div>;
+}

package/skill/assets/examples/Drawer.tsx

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+import { Checkbox, RadioGroup, Textarea, Drawer, CardButton } from 'auricui';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [open, setOpen] = useState(false);
+  const [side, setSide] = useState<'left' | 'right' | 'top' | 'bottom'>('right');
+  const [enabled, setEnabled] = useState(true);
+  return <div style={{ display: 'grid', gap: 18 }}><RadioGroup label="打开方向" value={side} onValueChange={value => setSide(value as typeof side)} orientation="horizontal" options={[{ value: 'left', label: '左侧' }, { value: 'right', label: '右侧' }, { value: 'top', label: '顶部' }, { value: 'bottom', label: '底部' }]} /><CardButton onClick={() => setOpen(true)}>打开抽屉</CardButton><Drawer open={open} onOpenChange={setOpen} title="助手偏好" description="设置这个工作空间中的个人偏好。" side={side} footer={<CardButton weight="primary" onClick={() => setOpen(false)}>完成</CardButton>}><div style={{ display: 'grid', gap: 24 }}><Checkbox label="接收每日简报" checked={enabled} onCheckedChange={setEnabled} /><Textarea label="补充说明" placeholder="例如：早上 9 点前保持安静" /></div></Drawer></div>;
+}

package/skill/assets/examples/MemoryCard.tsx

@@ -0,0 +1,9 @@
+import { useState } from 'react';
+import { MemoryCard } from 'auricui/agent';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [content,setContent]=useState('我偏好简洁的回答，重要事项使用列表。');
+  const [forgotten,setForgotten]=useState(false);
+  return forgotten?<button type="button" onClick={()=>setForgotten(false)}>重新演示记忆</button>:<MemoryCard content={content} source="你的明确偏好" updatedAt="今天 09:00" onEdit={()=>setContent('我喜欢先看到结论，再阅读详细说明。')} onForget={()=>setForgotten(true)}/>;
+}

package/skill/assets/examples/MessageList.tsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import { MessageBubble, MessageList } from 'auricui/agent';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [count,setCount]=useState(8);
+  return <div style={{width:'100%'}}><MessageList>{Array.from({length:count},(_,i)=><MessageBubble key={i} role={i%2?'assistant':'user'}>第 {i+1} 条消息。向上滚动查看历史时，新增消息会保留你的阅读位置。</MessageBubble>)}</MessageList><button type="button" onClick={()=>setCount(count+1)}>追加消息</button></div>;
+}

package/skill/assets/examples/Theme.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+import { AuricUIProvider, CardButton } from 'auricui';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
+  return <AuricUIProvider theme={theme}>
+    <main style={{ background: 'var(--bg)', color: 'var(--text)', minHeight: '100vh', padding: 24 }}>
+      <CardButton onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+        切换到{theme === 'dark' ? '浅色' : '深色'}
+      </CardButton>
+    </main>
+  </AuricUIProvider>;
+}

package/skill/assets/examples/ToolCall.tsx

@@ -0,0 +1,8 @@
+import { useState } from 'react';
+import { ToolCall } from 'auricui/agent';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [done,setDone]=useState(false);
+  return <div style={{display:'grid',gap:16,width:'100%'}}><ToolCall name="search_documents" status={done?'success':'running'} defaultOpen input={'{"query": "设计规范"}'} output={done?'找到 3 份相关文档。':'正在检索…'}/><button type="button" onClick={()=>setDone(!done)}>{done?'重新演示':'模拟完成'}</button></div>;
+}

package/skill/assets/examples/Tree.tsx

@@ -0,0 +1,15 @@
+import { useState } from 'react';
+import { Tree } from 'auricui';
+import 'auricui/styles.css';
+
+export default function Example() {
+  const [selected, setSelected] = useState('guide');
+  return <div style={{ display: 'grid', gap: 16 }}><Tree label="知识库目录" value={selected} onValueChange={setSelected} defaultExpanded={['workspace']} nodes={[
+    { id: 'workspace', label: '工作空间', children: [
+      { id: 'guide', label: '使用指南.md' },
+      { id: 'projects', label: '项目', children: [{ id: 'auric', label: 'AuricUI.md' }, { id: 'ideas', label: 'Ideas.md' }] },
+      { id: 'locked', label: '已锁定资料', disabled: true },
+    ] },
+    { id: 'personal', label: '个人笔记', children: [{ id: 'reading', label: '阅读清单.md' }] },
+  ]} /><p role="status">已选择：{selected}</p></div>;
+}

package/skill/assets/examples/examples.css

@@ -0,0 +1,11 @@
+.auricui-example-page { max-width: 760px; margin: 40px auto; padding: 24px; color: var(--text); }
+.auricui-example-chat { display: flex; flex-direction: column; width: min(100%, 760px); height: 600px; max-height: 90dvh; margin: auto; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
+.auricui-example-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
+.auricui-example-message { margin-bottom: 20px; }
+.auricui-example-message > small { display: block; color: var(--text-muted); margin-bottom: 6px; }
+.auricui-example-message > p { white-space: pre-wrap; overflow-wrap: anywhere; }
+.auricui-example-composer { margin: 12px; border: 1px solid var(--border); border-radius: 12px; }
+.auricui-example-editor { padding: 12px; font-size: 14px; line-height: 1.6; outline: none; }
+.auricui-example-actions { display: flex; justify-content: flex-end; padding: 8px; }
+.auricui-example-error { color: var(--err); padding: 0 12px; }
+.auricui-example-controls { display: grid; gap: 16px; padding: 24px; max-width: 760px; }

package/skill/assets/upstream/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 OpenFilm contributors
+
+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.