dsh-motion-ui 0.6.0 → 0.7.0

package/lib/third-party/lucian-uxui-LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Seokwoooo
+
+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/lib/third-party/lucian-uxui-NOTICE.md

@@ -0,0 +1 @@
+Motion UI expressive controls adapt visual interaction patterns and selected CSS from Lucian UX/UI Prompt #002, #013, #018, by Seokwoooo, MIT License. Reference: https://github.com/Seokwoooo/lucian-uxui-prompt . Local user-provided copies were reviewed. Host actions, persistence, React controls and truthful result feedback are implemented by Motion UI. No simulated download, clipboard success or glass materials are included.

package/lib/tool-schema.js

@@ -4,7 +4,7 @@ import {COMPONENTS} from './components.js';
 const dictionary=description=>({type:'object',additionalProperties:true,description});
 export const DOCUMENT_PARAMETER={
   required:true,
-  description:'Pass an OBJECT, never manually serialize. Choose v1 {version:1,title,fallback,nodes} for shared state/formulas/canvas, OR extended {title,items:[components]} for charts/plots/quiz/forms/mermaid/3D. Do not mix the two root languages.',
+  description:'Pass one COMPLETE object, never manually serialize or send a partial patch. v1 always needs nodes:[...] beside state/derived; state alone creates no controls. Choose v1 {version:1,title,fallback,nodes} for shared state/formulas/canvas, OR extended {title,items:[components]} for charts/plots/quiz/forms/mermaid/3D. Do not mix the two root languages.',
   type:'object',additionalProperties:false,
     properties:{
       version:{type:'number',const:1},
@@ -26,19 +26,19 @@ export const DOCUMENT_PARAMETER={
         spans:{type:'json',description:'text/heading: array of {text,size?,weight?,color?}; use instead of text for inline emphasis.'},gap:{type:'number'},
         max:{type:'json',description:'progress only: positive numeric value or binding.'},unit:{type:'string'},decimals:{type:'number'},
         action:{type:'string',description:'button only: a key declared in document.actions.'},
-        href:{type:'string',description:'link/button: absolute http/https URL. Choose exactly one href/path/action.'},path:{type:'string',description:'link/button: local file path opened through DSH on user click; never a shell command.'},variant:{type:'string',enum:['primary','secondary','text']},
+        href:{type:'string',description:'link/button: absolute http/https URL. Choose exactly one href/path/action.'},path:{type:'string',description:'link/button: local file path opened through DSH on user click; never a shell command.'},variant:{type:'string',enum:['primary','secondary','text','dropdown','segmented']},
         kind:{type:'string',enum:['bar','line']},labelKey:{type:'string'},valueKey:{type:'string'},xScale:{type:'string'},
         html:{type:'string'},css:{type:'string'},script:{type:'string'},fallback:{type:'string'},height:{type:'number'},
-        stateKeys:{type:'array',items:{type:'string'}},dataKeys:{type:'array',items:{type:'string'}},derivedKeys:{type:'array',items:{type:'string'}},
+        libraries:{type:'array',items:{type:'string',enum:['mechanism']},description:'Optional local mechanism drawing helper; ui_catalog topic=mechanism.'},stateKeys:{type:'array',items:{type:'string'}},dataKeys:{type:'array',items:{type:'string'}},derivedKeys:{type:'array',items:{type:'string'}},
         text:{type:'json',description:'Literal scalar or {ref}/{expr}.'},
         value:{type:'json',description:'metric: number or display string/boolean, or {ref}/{expr}. progress: numeric.'},
-        rows:{type:'json',description:'table/chart: inline array of objects, {ref:"data.rows"}/{ref:"derived.rows"}, or scoped reference string.'},
+        rows:{type:'json',description:'table/chart: inline rows with literal or formula cells, e.g. [{label:"餐饮",value:{ref:"derived.food"}}] or [{label:"住宿",value:{expr:"ceil(state.people / 2) * state.room"}}]. This is the simplest live breakdown; no map required. Also accepts {ref:"data.rows"}/{ref:"derived.rows"}, or scoped reference string.'},
         columns:{type:'json',description:'table: column object array; row: optional integer 1..4 for equal grid columns.'},
         bind:{type:'string',description:'Controls bind state.key.'},children:{type:'array',description:'row/column/card/details: array of registered nodes using the same fields and type-specific rules. steps uses items instead of children.',items:{type:'json'}}
       }}},
       state:dictionary('key -> state specification object, e.g. {people:{type:"number",default:2,min:1,max:12,step:1}}. Numeric defaults/min/max/step are JSON numbers, no units. String/boolean/json state keeps its declared type; options is a direct scalar array. Do not omit numeric limits. json is bounded array/object state for canvas controls.'),
       data:dictionary('Static data; Chinese identifier keys supported. Omit if rows are inline.'),
-      derived:dictionary('Local formulas, e.g. {food:{expr:"state.people * state.days * 100"}}. Prefer expr shorthand to deeply nested op/args. round(x) has one argument and uses Math.round (ties toward positive infinity); ceil/floor are not native formula functions. op/args uses direct arrays and numeric constants, not item wrappers. Use ui_catalog for protocol questions, not installation source searches. Omit when unused.'),
+      derived:dictionary('Local formulas, e.g. {food:{expr:"state.people * state.days * 100"}}. Prefer expr shorthand to deeply nested op/args. round(x), ceil(x), floor(x) and abs(x) each take one argument. ceil(state.people / 2) is supported directly; do not search source or switch to a canvas for rounding. op/args uses direct arrays and numeric constants, not item wrappers. Use ui_catalog for protocol questions, not installation source searches. Omit when unused.'),
       actions:dictionary('Declared agent.followup actions. Omit when unused.'),
       presentation:dictionary('Optional layout/accent/density and preset: reading/brief/comparison/list/callout/scorecard/flow/minimal. Every document owns its own styles.')
     }

package/lib/ui-intent.js

@@ -7,7 +7,7 @@ export const UI_INTENT_POLICY = `## 表达选择与首次交付
 - 简单事实、单次数值换算、短定义、普通代码排错：直接文字。一个静态小表格足够时不必创建交互应用；静态图解、方案对比、流程和看板也都是 UI 的正常用途。不确定有无收益时选更简单的表达，不询问“要不要我做个 UI”。
 对照：问“复利是什么，简短解释”→文字；问“5万元按3%、5%、7%存10年，为什么后期差距更大”→可主动给增长曲线与年数调整，配准确数值和简短解释；问“解释七速自行车各档如何影响踏频和行进”→可主动给传动示意与档位选择；问“1 GiB是多少字节”→文字。例子只指导时机，不规定构图或配色。
 每块界面只解决一个核心关系；一轮回复可按讲解顺序生成多块独立界面。立即选择最小完整方案并调用工具，不穷举设计选项，不先写长篇视觉规划，不等待“完美”再提交。每块默认用一幅静态主图、一个短流程、一个对齐对比或一个简洁看板即可；没有明确交互收益时不建 state、不写 script、不加控件和动画。静态可视化本身就是完整交付；只有用户需要操作时才保证对应交互。用户的必要要求不能省略。
-仅数值试算优先原生组件；计算超出 derived 白名单（例如幂、三角函数）时不要臆造算子或堆复杂表达式，改用小画布中的单一计算函数同步图与数值。结构或运动讲解选择一块自由画布，直接使用 render_canvas 的独立源码字段。避免首次创建多页应用、自制组件库或庞大绘图引擎。除非用户或宿主另有要求，对话内的简短交互讲解无需建立项目、编辑文件或制定任务清单。工具提交前检查绑定、初始图可见、改变参数有反馈、标签/单位和 fallback；不为简单任务反复读全部目录。
+仅数值试算优先原生组件；计算超出 derived 白名单（例如幂、三角函数）时不要臆造算子或堆复杂表达式，改用小画布中的单一计算函数同步图与数值。常见装配/齿轮/曲柄连杆讲解优先用 render_mechanism 的少量参数直接交付；其他结构或运动讲解选择自由画布，使用 render_canvas 的独立源码字段，按需读取 mechanism 辅助库接口。避免首次创建多页应用、自制组件库或庞大绘图引擎。除非用户或宿主另有要求，对话内的简短交互讲解无需建立项目、编辑文件或制定任务清单。工具提交前检查绑定、初始图可见、改变参数有反馈、标签/单位和 fallback；不为简单任务反复读全部目录。
 必要的布局与排版从首次提交就做好：DSH 以 PC 横屏为主要使用场景，优先保证 1365px/1920px 桌面视口中实际聊天区域的构图与可读性，不假设画布等于整个浏览器宽度。主体突出、文字可读、控件有标签，装饰不挤占内容；手机适配是补充，不为窄屏牺牲桌面主体。Canvas 2D 按实际 CSS 像素布局，不整体缩放到文字难辨；动态数值和关键标签可放 HTML，绘图高度匹配内容，避免大块空白。
 首屏应能看见主要关系、关键操作及当前结果。用户问“为什么变化不同”，优先用能对照变化的图形；发光、粒子或装饰不能代替趋势或关系证据。主图紧邻控件，推导、完整表格和次要说明随后呈现；同一数值不在指标、图注、卡片和正文反复展示。不要把所有可用组件都用一遍，也不为减少滚动而缩小字。比较不同单位的量，分别标轴或明确使用相对同一基准的无量纲倍数，不能把原始数值放在同一未说明尺度上暗示快慢。这些是信息优先级要求，具体图形、构图与风格仍按问题自行设计。
 不把“最小”理解成粗糙或缺功能。交付所有必要内容后简短说明如何操作和假设；针对实际问题再局部修改。主动增强最多一次且确有价值，这是完成用户要求后的额外润色，不限制同一回复的 UI 数量或必要工具次数；用户要求几块不同内容就分别完成，不能第一块成功后提前结束。自动纠错仍最多两轮。无法交付时提供有效解释并如实说明，不声称已展示。

package/lib/ui-skill.js

@@ -1,3 +1,4 @@
+import {MOTION_GUIDE,MOTION_INTERFACE} from './motion-library.js';
 import { readFileSync } from 'node:fs';
 import { PROTOCOL_GUIDE } from './catalog.js';
 import { CANVAS_DESIGN_GUIDE } from './canvas-design.js';
@@ -40,14 +41,14 @@ export const SKILL_EXAMPLES = [
 
 const skill = readFileSync(new URL('../skills/intelligent-ui/SKILL.md', import.meta.url), 'utf8');
 export const UI_SKILL_SECTIONS = Object.freeze([
-  { name: 'generative-ui:design-skill', order: 850, interpolate: false, text: TEXT_GUIDE+'\n\n'+UI_INTENT_POLICY + '\n\n' + skill + '\n\nCanvas composition details:\n' + CANVAS_DESIGN_GUIDE + '\n\nConstruction handbook:\n' + CANVAS_SYSTEM_GUIDE },
+  { name: 'generative-ui:design-skill', order: 850, interpolate: false, text: TEXT_GUIDE+'\n\n'+MOTION_GUIDE+'\n\n'+UI_INTENT_POLICY + '\n\n' + skill + '\n\nCanvas composition details:\n' + CANVAS_DESIGN_GUIDE + '\n\nConstruction handbook:\n' + CANVAS_SYSTEM_GUIDE },
   { name: 'generative-ui:protocol', order: 851, interpolate: false, text: PROTOCOL_GUIDE },
   { name: 'generative-ui:worked-examples', order: 852, interpolate: false, text: QUICK_GUIDE+'\nThese valid render_ui examples start with static flow and comparison; the last adds a control only for a calculation. Adapt to the user, not their demo claims. Submit as render_ui({document: ...}). Animation examples remain available via ui_catalog({topic:"canvas"}).\n' + [QUICK_EXAMPLES[0],QUICK_EXAMPLES[1],SKILL_EXAMPLES[0]].map(doc => JSON.stringify(doc)).join('\n') }
 ]);
 export function promptSections(mode='guided',style=DEFAULT_VISUAL_STYLE){
   if(!['guided','free'].includes(mode))throw new Error('DSH UI: designMode must be guided or free');
   visualStyle(style);
-  return mode==='guided'?UI_SKILL_SECTIONS.map((s,i)=>({...s,text:i===0?VISUAL_GUIDE+'\n\n'+s.text+'\n\n'+stylePrompt(style):i===2?QUICK_GUIDE+'\nSelected visual-style examples follow. Each entry names the tool and its args; call that tool with args only. The shared calculation example preserves the same protocol and interaction.\n'+styleExamples(style)+'\n'+JSON.stringify({tool:'render_ui',args:{document:SKILL_EXAMPLES[0]}}):s.text})):UI_SKILL_SECTIONS.map((s,i)=>({...s,text:i===0?VISUAL_INTERFACE+'\n\n'+TEXT_INTERFACE+'\n\n'+UI_INTENT_POLICY+'\n\n'+FREE_UI_CONTRACT:''}));
+  return mode==='guided'?UI_SKILL_SECTIONS.map((s,i)=>({...s,text:i===0?VISUAL_GUIDE+'\n\n'+s.text+'\n\n'+stylePrompt(style):i===2?QUICK_GUIDE+'\nSelected visual-style examples follow. Each entry names the tool and its args; call that tool with args only. The shared calculation example preserves the same protocol and interaction.\n'+styleExamples(style)+'\n'+JSON.stringify({tool:'render_ui',args:{document:SKILL_EXAMPLES[0]}}):s.text})):UI_SKILL_SECTIONS.map((s,i)=>({...s,text:i===0?VISUAL_INTERFACE+'\n\n'+TEXT_INTERFACE+'\n\n'+MOTION_INTERFACE+'\n\n'+UI_INTENT_POLICY+'\n\n'+FREE_UI_CONTRACT:''}));
 }
 
 

package/lib/visual-styles.js

@@ -1,30 +1,142 @@
-// Add a style here to expose its settings card, prompt and worked examples.
-// This registry contains design preferences only; it never changes tool permissions.
-const native=(preset,title,blocks)=>({tool:'render_text',args:{preset,title,blocks}});
-const canvas=(title,html,css)=>({tool:'render_canvas',args:{title,fallback:title+'，静态排版示例。',html,css}});
+import {STYLE_SYSTEM,grammarPrompt,grammarExample} from './style-system.js';
+// Stable user-facing IDs and palettes. Grammar and component tokens live together
+// in style-system.js; the second example remains a small authored HTML/SVG surface.
 export const DEFAULT_VISUAL_STYLE='prismframe';
-export const VISUAL_STYLES=Object.freeze([
- {id:'editorial',name:'清爽阅读',description:'轻边框 · 清晰层级 · 少量强调色',preview:{bg:'#fff',ink:'#182537',accent:'#3e60d3',soft:'#f4f6fa',line:'#dfe5ed'},
-  prompt:'采用编辑式阅读排版：中性底色、轻边框、清晰字号层级和充足但不浪费的留白。以正文、对齐比较、分隔列表和细线流程为主；强调色只标出关键结论，不给每段都套卡片，不加装饰性阴影和渐变。优先使用 render_text 的 reading/comparison/list/flow；图形确有价值时再用小画布。',
-  examples:[native('comparison','发布渠道怎么选',[{type:'row',columns:2,children:[{type:'column',children:[{type:'heading',text:'主发布平台'},{type:'text',text:'放完整资料与版本历史。'}]},{type:'column',children:[{type:'heading',text:'展示渠道'},{type:'text',text:'展示重点，并链接到完整资料。'}]}]},{type:'text',text:'各自承担一个清晰职责。',color:'muted'}]),canvas('三步发布','<section><h2>把一件事讲清楚</h2><div class="steps"><p><b>01 整理</b><span>补齐说明与许可</span></p><p><b>02 验证</b><span>检查安装与运行</span></p><p><b>03 发布</b><span>记录本次变化</span></p></div></section>','section{padding:20px;border:1px solid var(--canvas-line);border-radius:16px}h2{font-size:24px;margin:0 0 20px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}p{margin:0}b,span{display:block}span{color:var(--canvas-muted);margin-top:8px}@media(max-width:520px){.steps{grid-template-columns:1fr}}')]},
- {id:'soft',name:'柔和彩色',description:'柔和渐变 · 圆润分组 · 友好舒适',preview:{bg:'#fbf8ff',ink:'#32294c',accent:'#7954bb',soft:'#eee5fa',line:'#e6dcf2'},
-  prompt:'采用柔和彩色风格：低饱和紫色、蓝色或薄荷色，18..24px 圆角，轻柔渐变填充，柔和而清晰的分组。文字仍保持足够对比度；渐变放在小面积重点区，不铺满整篇，不用玻璃模糊、发光或多重阴影。日常文字用原生预设与语义色；确实需要渐变材质时使用短小静态画布，不为配色创建交互或动画。',
-  examples:[native('callout','本周只抓一个重点',[{type:'heading',text:'每天留出 20 分钟'},{type:'text',text:'先读一小节，再写下一个收获。',color:'muted'}]),canvas('本周阅读计划','<section><span class="tag">轻松开始</span><h2>每天一点，稳稳前进</h2><div class="plan"><p><b>20 分钟</b><span>专注阅读</span></p><p><b>1 个收获</b><span>写下自己的理解</span></p></div></section>','section{padding:24px;border-radius:24px;border:1px solid var(--canvas-line);background:linear-gradient(130deg,color-mix(in srgb,#9567d4 12%,var(--canvas-bg)),color-mix(in srgb,#58b7ae 9%,var(--canvas-bg)));color:var(--canvas-ink)}.tag{display:inline-block;border-radius:999px;padding:5px 12px;background:var(--canvas-bg);color:var(--canvas-accent)}h2{font-size:26px;margin:14px 0 20px}.plan{display:flex;flex-wrap:wrap;gap:24px}.plan p{margin:0;flex:1 1 180px;padding:18px;border-radius:18px;background:color-mix(in srgb,var(--canvas-bg) 80%,transparent)}b,span{display:block}b{font-size:22px}.plan span{margin-top:8px;color:var(--canvas-muted)}')]},
- {id:'technical',name:'技术图解',description:'细线结构 · 对齐网格 · 数据优先',preview:{bg:'#f8fafb',ink:'#1b3440',accent:'#087e8b',soft:'#e7f1f3',line:'#cedde2'},
-  prompt:'采用技术图解风格：中性底色、精确对齐、细线连接、明确标签和单位、少量青色强调。数据使用等宽数字；代码或序号可用等宽字体，中文正文保持易读。优先简单流程、对比表、结构图与紧凑数据块；用有意义的箭头表达方向，不用装饰性仪表盘。圆角约 8..14px，禁止把字号缩小来塞内容。',
-  examples:[native('flow','一次请求经过什么',[{type:'steps',items:[{title:'输入',description:'接收用户需求。'},{title:'处理',description:'校验并计算结果。'},{title:'输出',description:'返回可理解的反馈。'}]}]),canvas('请求处理流程','<section><header><small>REQUEST FLOW</small><h2>输入 → 处理 → 输出</h2></header><div class="flow"><div><i>01</i><b>输入</b><p>接收需求</p></div><span>→</span><div><i>02</i><b>处理</b><p>校验与计算</p></div><span>→</span><div><i>03</i><b>输出</b><p>返回反馈</p></div></div></section>','section{padding:20px;border:1px solid var(--canvas-line);border-radius:10px}small,i{font:14px ui-monospace,monospace;color:var(--canvas-accent)}h2{font-size:24px;margin:8px 0 20px}.flow{display:flex;gap:12px;align-items:center}.flow div{flex:1;padding:16px;border:1px solid var(--canvas-line);border-radius:10px}.flow b,.flow i{display:block}.flow b{margin-top:10px;font-size:19px}p{margin:6px 0 0;color:var(--canvas-muted)}@media(max-width:520px){.flow{flex-direction:column}.flow div{width:100%}.flow>span{transform:rotate(90deg)}}')]},
- {id:'expressive',name:'活力展示',description:'醒目标题 · 明快色块 · 简洁有力',preview:{bg:'#fff9f2',ink:'#362820',accent:'#bd4b26',soft:'#ffead8',line:'#edd7c5'},
-  prompt:'采用活力展示风格：醒目但不过大的标题、明快色块、清晰的大数字、圆润胶囊按钮与简洁的非对称重点。用橙色、珊瑚色或暖黄色做局部强调，并适应深浅主题。保持信息量小、重点明确；每块只有一个视觉中心，不用满屏彩色、夸张动画或海报式超大留白。原生文本可用 size/weight/语义色；特殊色块构图才使用紧凑画布。',
-  examples:[native('minimal','先完成第一步',[{type:'text',text:'先完成一个能演示的版本',size:28,weight:800},{type:'text',text:'选一条主线，今天就做出可见结果。',color:'muted'}]),canvas('从第一步开始','<section><div class="number">01</div><div class="copy"><span>今天的重点</span><h2>先做出一个<br>能演示的版本</h2><p>只保留一条主线，尽早获得反馈。</p></div></section>','section{display:flex;align-items:center;gap:24px;padding:24px;border:1px solid var(--canvas-line);border-radius:22px;background:color-mix(in srgb,#f0984a 8%,var(--canvas-bg));color:var(--canvas-ink)}.number{font:800 54px/1 system-ui;padding:22px;border-radius:20px;color:var(--canvas-ink);background:color-mix(in srgb,#f0984a 28%,var(--canvas-bg))}.copy>span{font-size:14px;color:var(--canvas-muted)}h2{font-size:28px;line-height:1.3;margin:10px 0}p{margin:0;color:var(--canvas-muted)}@media(max-width:520px){section{align-items:flex-start;flex-direction:column}.number{font-size:36px;padding:16px}}')]}
- ,{id:'prismframe',name:'明亮扁平',description:'浅彩背景 · 白色圆角卡片 · 彩色偏移阴影',preview:{bg:'#ecf6ff',ink:'#193858',accent:'#3182d9',soft:'#d3e8fc',line:'#9ec9ef'},
-  prompt:'采用明亮扁平风格：浅彩背景、白色大圆角卡片、细彩色边线、柔软投影与浅色偏移底面。技术介绍用浅蓝 #ECF6FF / #3182D9，机制测量用米白 #FBFAF5 / #1F9486，比较选择用暖白 #FFF8ED / #E77946，流程用浅绿 #EAF6EF / #29947A，提醒用浅珊瑚 #FFF3EF / #D8694A；每块选一套，保持文字对比度并适配深色主题。卡片圆角约 20..28px，边线约 1..2px，标题使用宿主可用的圆润字体回退，不下载字体。先排内容再排装饰：一块只解释一个主要问题，数字绑定名称、指标与单位；用比例条、格子和连接线解释关系，图形完整放在框内。简单文字仍优先 render_text；需要偏移阴影、图解构图时使用短小画布。可交替分栏、纵排、三卡布局，不能每块套同一模板。静态排版默认即可；确需入场只做一次短促渐显上移，并尊重 reduced motion。文字落稳后不持续缩放或漂移。禁止玻璃、模糊背景、出框透视、循环装饰动画；不复制视频字幕、页码、全屏画布或多余底部留白，不沿用 Occamy 的模型数据。',
-  examples:[native('list','把复杂问题拆成三层',[{type:'heading',text:'先讲清楚，再逐步展开',size:24,color:'accent'},{type:'text',text:'目标：先明确需要解决的问题。'},{type:'text',text:'机制：用一个图形解释关键关系。'},{type:'text',text:'行动：给出下一步可执行的建议。'}]),canvas('三步让解释更清楚','<section><h2>把复杂问题讲清楚</h2><div class="cards"><article><span>01</span><h3>明确目标</h3><p>先回答要解决什么。</p></article><article><span>02</span><h3>解释关系</h3><p>让图形承担说明。</p></article><article><span>03</span><h3>给出行动</h3><p>收成一个可执行步骤。</p></article></div></section>','section{padding:24px 24px 30px;border-radius:26px;background:color-mix(in srgb,#3182d9 9%,var(--canvas-bg));color:var(--canvas-ink);font-family:ui-rounded,system-ui,sans-serif}h2{font-size:26px;line-height:1.35;margin:0 0 20px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}article{padding:20px;border:1.5px solid color-mix(in srgb,#3182d9 45%,var(--canvas-line));border-radius:22px;background:var(--canvas-bg);box-shadow:4px 6px 0 color-mix(in srgb,#3182d9 18%,var(--canvas-bg)),0 8px 16px #1637590b}article>span{color:var(--canvas-accent);font-size:14px;font-weight:700}h3{font-size:20px;margin:12px 0 8px}p{margin:0;line-height:1.6;color:var(--canvas-muted)}@media(max-width:580px){.cards{grid-template-columns:1fr}}')]}
-]);
+const PALETTES=[
+  {
+    "id": "editorial",
+    "name": "清爽阅读",
+    "preview": {
+      "bg": "#fff",
+      "ink": "#182537",
+      "accent": "#3e60d3",
+      "soft": "#f4f6fa",
+      "line": "#dfe5ed"
+    },
+    "canvasExample": {
+      "tool": "render_canvas",
+      "args": {
+        "title": "三步发布",
+        "fallback": "三步发布，静态排版示例。",
+        "html": "<section><h2>把一件事讲清楚</h2><div class=\"steps\"><p><b>01 整理</b><span>补齐说明与许可</span></p><p><b>02 验证</b><span>检查安装与运行</span></p><p><b>03 发布</b><span>记录本次变化</span></p></div></section>",
+        "css": "section{padding:20px;border:1px solid var(--canvas-line);border-radius:16px}h2{font-size:24px;margin:0 0 20px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}p{margin:0}b,span{display:block}span{color:var(--canvas-muted);margin-top:8px}@media(max-width:520px){.steps{grid-template-columns:1fr}}"
+      }
+    }
+  },
+  {
+    "id": "soft",
+    "name": "柔和彩色",
+    "preview": {
+      "bg": "#fbf8ff",
+      "ink": "#32294c",
+      "accent": "#7954bb",
+      "soft": "#eee5fa",
+      "line": "#e6dcf2"
+    },
+    "canvasExample": {
+      "tool": "render_canvas",
+      "args": {
+        "title": "本周阅读计划",
+        "fallback": "本周阅读计划，静态排版示例。",
+        "html": "<section><span class=\"tag\">轻松开始</span><h2>每天一点，稳稳前进</h2><div class=\"plan\"><p><b>20 分钟</b><span>专注阅读</span></p><p><b>1 个收获</b><span>写下自己的理解</span></p></div></section>",
+        "css": "section{padding:24px;border-radius:24px;border:1px solid var(--canvas-line);background:linear-gradient(130deg,color-mix(in srgb,#9567d4 12%,var(--canvas-bg)),color-mix(in srgb,#58b7ae 9%,var(--canvas-bg)));color:var(--canvas-ink)}.tag{display:inline-block;border-radius:999px;padding:5px 12px;background:var(--canvas-bg);color:var(--canvas-accent)}h2{font-size:26px;margin:14px 0 20px}.plan{display:flex;flex-wrap:wrap;gap:24px}.plan p{margin:0;flex:1 1 180px;padding:18px;border-radius:18px;background:color-mix(in srgb,var(--canvas-bg) 80%,transparent)}b,span{display:block}b{font-size:22px}.plan span{margin-top:8px;color:var(--canvas-muted)}"
+      }
+    }
+  },
+  {
+    "id": "technical",
+    "name": "技术图解",
+    "preview": {
+      "bg": "#f8fafb",
+      "ink": "#1b3440",
+      "accent": "#087e8b",
+      "soft": "#e7f1f3",
+      "line": "#cedde2"
+    },
+    "canvasExample": {
+      "tool": "render_canvas",
+      "args": {
+        "title": "请求处理流程",
+        "fallback": "请求处理流程，静态排版示例。",
+        "html": "<section><header><small>REQUEST FLOW</small><h2>输入 → 处理 → 输出</h2></header><div class=\"flow\"><div><i>01</i><b>输入</b><p>接收需求</p></div><span>→</span><div><i>02</i><b>处理</b><p>校验与计算</p></div><span>→</span><div><i>03</i><b>输出</b><p>返回反馈</p></div></div></section>",
+        "css": "section{padding:20px;border:1px solid var(--canvas-line);border-radius:10px}small,i{font:14px ui-monospace,monospace;color:var(--canvas-accent)}h2{font-size:24px;margin:8px 0 20px}.flow{display:flex;gap:12px;align-items:center}.flow div{flex:1;padding:16px;border:1px solid var(--canvas-line);border-radius:10px}.flow b,.flow i{display:block}.flow b{margin-top:10px;font-size:19px}p{margin:6px 0 0;color:var(--canvas-muted)}@media(max-width:520px){.flow{flex-direction:column}.flow div{width:100%}.flow>span{transform:rotate(90deg)}}"
+      }
+    }
+  },
+  {
+    "id": "expressive",
+    "name": "活力展示",
+    "preview": {
+      "bg": "#fff9f2",
+      "ink": "#362820",
+      "accent": "#bd4b26",
+      "soft": "#ffead8",
+      "line": "#edd7c5"
+    },
+    "canvasExample": {
+      "tool": "render_canvas",
+      "args": {
+        "title": "从第一步开始",
+        "fallback": "从第一步开始，静态排版示例。",
+        "html": "<section><div class=\"number\">01</div><div class=\"copy\"><span>今天的重点</span><h2>先做出一个<br>能演示的版本</h2><p>只保留一条主线，尽早获得反馈。</p></div></section>",
+        "css": "section{display:flex;align-items:center;gap:24px;padding:24px;border:1px solid var(--canvas-line);border-radius:22px;background:color-mix(in srgb,#f0984a 8%,var(--canvas-bg));color:var(--canvas-ink)}.number{font:800 54px/1 system-ui;padding:22px;border-radius:20px;color:var(--canvas-ink);background:color-mix(in srgb,#f0984a 28%,var(--canvas-bg))}.copy>span{font-size:14px;color:var(--canvas-muted)}h2{font-size:28px;line-height:1.3;margin:10px 0}p{margin:0;color:var(--canvas-muted)}@media(max-width:520px){section{align-items:flex-start;flex-direction:column}.number{font-size:36px;padding:16px}}"
+      }
+    }
+  },
+  {
+    "id": "prismframe",
+    "name": "明亮扁平",
+    "preview": {
+      "bg": "#ecf6ff",
+      "ink": "#193858",
+      "accent": "#3182d9",
+      "soft": "#d3e8fc",
+      "line": "#9ec9ef"
+    },
+    "canvasExample": {
+      "tool": "render_canvas",
+      "args": {
+        "title": "三步让解释更清楚",
+        "fallback": "三步让解释更清楚，静态排版示例。",
+        "html": "<section><h2>把复杂问题讲清楚</h2><div class=\"cards\"><article><span>01</span><h3>明确目标</h3><p>先回答要解决什么。</p></article><article><span>02</span><h3>解释关系</h3><p>让图形承担说明。</p></article><article><span>03</span><h3>给出行动</h3><p>收成一个可执行步骤。</p></article></div></section>",
+        "css": "section{padding:24px 24px 30px;border-radius:26px;background:color-mix(in srgb,#3182d9 9%,var(--canvas-bg));color:var(--canvas-ink);font-family:ui-rounded,system-ui,sans-serif}h2{font-size:26px;line-height:1.35;margin:0 0 20px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}article{padding:20px;border:1.5px solid color-mix(in srgb,#3182d9 45%,var(--canvas-line));border-radius:22px;background:var(--canvas-bg);box-shadow:4px 6px 0 color-mix(in srgb,#3182d9 18%,var(--canvas-bg)),0 8px 16px #1637590b}article>span{color:var(--canvas-accent);font-size:14px;font-weight:700}h3{font-size:20px;margin:12px 0 8px}p{margin:0;line-height:1.6;color:var(--canvas-muted)}@media(max-width:580px){.cards{grid-template-columns:1fr}}"
+      }
+    }
+  },
+  {
+    "id": "aurora",
+    "name": "柔光渐彩",
+    "preview": {
+      "bg": "#f4f2ee",
+      "ink": "#16151b",
+      "accent": "#6a57f2",
+      "soft": "#f5f3ef",
+      "line": "#e2dfda"
+    },
+    "canvasExample": {
+      "tool": "render_canvas",
+      "args": {
+        "title": "选择一个方案",
+        "fallback": "点击选择此方案，本地记录选择状态。",
+        "state": {
+          "selected": {
+            "type": "boolean",
+            "default": false
+          }
+        },
+        "html": "<section class=\"choice\"><h2>先选择，再继续</h2><p>渐变扩散和文字换位由实际操作触发。</p><button class=\"action\" type=\"button\" aria-pressed=\"false\"><i aria-hidden=\"true\"></i><span class=\"label\"><b>选择此方案</b><b aria-hidden=\"true\">选择此方案</b></span><span class=\"orb\" aria-hidden=\"true\">→</span></button><p class=\"status\" role=\"status\">尚未选择</p></section>",
+        "css": ".choice{padding:24px;border:1px solid var(--canvas-line);border-radius:26px;background:var(--canvas-bg);color:var(--canvas-ink)}h2{font-size:24px;margin:0 0 10px}p{color:var(--canvas-muted);line-height:1.7}.action{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:18px;min-height:54px;padding:8px 8px 8px 24px;border:0;border-radius:999px;background:var(--canvas-ink);color:var(--canvas-bg);translate:var(--x,0px) var(--y,0px);box-shadow:0 16px 28px -22px #54457988;transition:translate .7s cubic-bezier(.34,1.45,.64,1)}.action>i{position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,#7051ed,#326fce 55%,#188e97);clip-path:circle(21px at calc(100% - 29px) 50%);transition:clip-path .7s cubic-bezier(.2,.8,.2,1)}.action:is(:hover,:focus-visible){color:white}.action:is(:hover,:focus-visible)>i{clip-path:circle(160% at calc(100% - 29px) 50%)}.label{position:relative;overflow:hidden;line-height:1.5}.label b{display:block;transition:transform .55s cubic-bezier(.34,1.45,.64,1),opacity .3s}.label b+b{position:absolute;left:0;top:0;transform:translateY(130%);opacity:0}.action:is(:hover,:focus-visible) b:first-child{transform:translateY(-130%);opacity:0}.action:is(:hover,:focus-visible) b+b{transform:none;opacity:1}.orb{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#438eff,#27b6ba);color:white;font-size:22px}.status{margin-bottom:0}@media(prefers-reduced-motion:reduce){.action,.action *{transition:none!important;translate:none!important}}",
+        "script": "const root=document.querySelector(\".choice\"),button=root.querySelector(\"button\");button.addEventListener(\"click\",()=>DSHUI.setState({selected:!DSHUI.snapshot.state.selected}));DSHUI.subscribe(({state})=>{button.setAttribute(\"aria-pressed\",String(state.selected));root.querySelectorAll(\"b\").forEach(b=>b.textContent=state.selected?\"取消选择\":\"选择此方案\");root.querySelector(\".status\").textContent=state.selected?\"已选择此方案\":\"尚未选择\"});button.addEventListener(\"pointermove\",e=>{if(matchMedia(\"(prefers-reduced-motion: reduce)\").matches)return;const r=button.getBoundingClientRect();button.style.setProperty(\"--x\",((e.clientX-r.left-r.width/2)*.035)+\"px\");button.style.setProperty(\"--y\",((e.clientY-r.top-r.height/2)*.07)+\"px\")});button.addEventListener(\"pointerleave\",()=>{button.style.setProperty(\"--x\",\"0px\");button.style.setProperty(\"--y\",\"0px\")});"
+      }
+    }
+  }
+];
+export const VISUAL_STYLES=Object.freeze(PALETTES.map(({canvasExample,...s})=>Object.freeze({...s,description:STYLE_SYSTEM[s.id].description,prompt:grammarPrompt(s.id),examples:[grammarExample(s.id),canvasExample]})));
 export const VISUAL_STYLE_IDS=Object.freeze(VISUAL_STYLES.map(s=>s.id));
 export function visualStyle(id=DEFAULT_VISUAL_STYLE){
  const style=VISUAL_STYLES.find(s=>s.id===id);
  if(!style)throw Error('DSH UI: unknown visualStyle; use '+VISUAL_STYLE_IDS.join('/'));
  return style;
 }
-export function stylePrompt(id){const s=visualStyle(id);return `## 用户选择的视觉风格：${s.name} (${s.id})\n${s.prompt}\n这套风格替代通用指导和旧案例中的默认配色、材质与圆角建议。只影响新生成内容的视觉方向；协议、工具入口、状态、权限、准确性、可读性与必要功能要求保持不变。引导模式下原生文本、卡片、指标、控件和代码块会自动跟随当前所选视觉风格；整份 UI 的原生内容和 HTML/SVG 应使用一致的色彩与层级。用原生 row/card/metric/control 等组织清晰结构，少量语义色强调重点。不要为了给原生内容上色而额外生成 HTML。确实需要特殊图解时再使用小画布。用户在当前请求中明确指定的风格优先。不要为展示风格增加不必要的画布、代码、动画或工具调用。`}
+export function stylePrompt(id){const s=visualStyle(id);return `## 用户选择的视觉风格：${s.name} (${s.id})\n采用${s.name}风格。\n${s.prompt}\n这套风格替代通用指导和旧案例中的默认配色、材质与圆角建议。只影响新生成内容的视觉方向；协议、工具入口、状态、权限、准确性、可读性与必要功能要求保持不变。引导模式下原生文本、卡片、指标、控件和代码块会自动跟随当前所选视觉风格；整份 UI 的原生内容和 HTML/SVG 应使用一致的色彩与层级。原生组件会改变表面、层级、控件与流程形态。通常省略 size/weight/color 和 presentation.accent，让所选风格管理默认层级；只有用户明确指定或确有语义强调才覆盖。不要每种风格都手写同一套字号。title 已显示文档标题，正文不再重复相同标题；模型负责根据上述构图原则组织内容，不要所有风格都生成等大卡片网格。少量语义色强调真实重点。不要为了给原生内容上色而额外生成 HTML。确实需要特殊图解时再使用小画布。用户在当前请求中明确指定的风格优先。不要为展示风格增加不必要的画布、代码、动画或工具调用。`}
 export function styleExamples(id){return visualStyle(id).examples.map(example=>JSON.stringify(example)).join('\n')}

package/package.json

@@ -1,92 +1,92 @@
-{
-  "name": "dsh-motion-ui",
-  "version": "0.6.0",
-  "description": "Interactive UI, HTML/SVG animation and local calculations for DeepSeek Harness Web, with injected design guidance.",
-  "type": "module",
-  "main": "index.js",
-  "exports": {
-    ".": "./index.js",
-    "./client": "./client.js",
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "index.js",
-    "client.js",
-    "lib",
-    "skills",
-    "examples",
-    "cordis.patch.yml",
-    "README.md",
-    "CHANGELOG.md",
-    "LICENSE",
-    "DESIGN.zh-CN.md",
-    "RELEASE-PLAN.zh-CN.md",
-    "VERIFICATION.md"
-  ],
-  "scripts": {
-    "build": "node scripts/build.mjs",
-    "test": "node --test tests/*.test.mjs",
-    "verify:release": "node scripts/verify-release.mjs",
-    "check": "node --check index.js && node --check client.js"
-  },
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    },
-    "client": {
-      "platform": "web"
-    },
-    "compatibility": {
-      "dsh": "0.2.0-rc.2",
-      "node": ">=22.19",
-      "profiles": [
-        "web"
-      ]
-    }
-  },
-  "peerDependencies": {
-    "@deepseek-ai/dsh-home-paths": "0.2.0-rc.2",
-    "@deepseek-ai/dsh-tools": "0.2.0-rc.2",
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "echarts": "^6.1.0",
-    "echarts-wordcloud": "^2.1.0",
-    "esbuild": "^0.25.0",
-    "katex": "^0.19.0",
-    "mdast-util-from-markdown": "^2.0.3",
-    "mermaid": "^11.16.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "three": "^0.180.0"
-  },
-  "dependencies": {
-    "@deepseek-ai/schemastery": "^3.18.4"
-  },
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Scorp1o117/dsh-motion-ui.git"
-  },
-  "homepage": "https://github.com/Scorp1o117/dsh-motion-ui#readme",
-  "bugs": {
-    "url": "https://github.com/Scorp1o117/dsh-motion-ui/issues"
-  },
-  "author": "Scorp1o117",
-  "keywords": [
-    "dsh",
-    "deepseek-harness",
-    "generative-ui",
-    "interactive-ui",
-    "svg"
-  ],
-  "overrides": {
-    "mermaid": {
-      "katex": "$katex"
-    },
-    "echarts-wordcloud": {
-      "echarts": "$echarts"
-    }
-  }
-}
+{
+  "name": "dsh-motion-ui",
+  "version": "0.7.0",
+  "description": "Interactive UI, HTML/SVG animation and local calculations for DeepSeek Harness Web, with injected design guidance.",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./client": "./client.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "client.js",
+    "lib",
+    "skills",
+    "examples",
+    "cordis.patch.yml",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE",
+    "DESIGN.zh-CN.md",
+    "RELEASE-PLAN.zh-CN.md",
+    "VERIFICATION.md"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "test": "node --test tests/*.test.mjs",
+    "verify:release": "node scripts/verify-release.mjs",
+    "check": "node --check index.js && node --check client.js"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web"
+    },
+    "compatibility": {
+      "dsh": "0.2.0-rc.2",
+      "node": ">=22.19",
+      "profiles": [
+        "web"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-home-paths": "0.2.0-rc.2",
+    "@deepseek-ai/dsh-tools": "0.2.0-rc.2",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "echarts": "^6.1.0",
+    "echarts-wordcloud": "^2.1.0",
+    "esbuild": "^0.25.0",
+    "katex": "^0.19.0",
+    "mdast-util-from-markdown": "^2.0.3",
+    "mermaid": "^11.16.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "three": "^0.180.0"
+  },
+  "dependencies": {
+    "@deepseek-ai/schemastery": "^3.18.4"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Scorp1o117/dsh-motion-ui.git"
+  },
+  "homepage": "https://github.com/Scorp1o117/dsh-motion-ui#readme",
+  "bugs": {
+    "url": "https://github.com/Scorp1o117/dsh-motion-ui/issues"
+  },
+  "author": "Scorp1o117",
+  "keywords": [
+    "dsh",
+    "deepseek-harness",
+    "generative-ui",
+    "interactive-ui",
+    "svg"
+  ],
+  "overrides": {
+    "mermaid": {
+      "katex": "$katex"
+    },
+    "echarts-wordcloud": {
+      "echarts": "$echarts"
+    }
+  }
+}