dsh-motion-ui 0.6.0 → 0.7.1

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/third-party/taste-skill-NOTICE.md

@@ -0,0 +1,10 @@
+# Taste Skill design guidance reference
+
+Motion UI's compact guidance is an original adaptation of general ideas from
+https://github.com/Leonxlnx/taste-skill: content-driven composition, hierarchy,
+substantive simplicity, useful interactions and honest visual review.
+
+Reviewed 2026-10-14: skills/taste-skill/SKILL.md and gpt/soft/minimalist variants.
+No upstream scripts or skill text, randomized website workflow, mandatory imagery,
+marketing structure or fixed aesthetic bans are bundled or executed. Motion UI
+retains its own style selection, sandbox contracts and conversation delivery.

package/lib/tool-schema.js

@@ -4,14 +4,14 @@ 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:'Complete v1 {version:1,title,fallback,nodes,state?,derived?} OR extended {title,items:[components]}. No mixed roots, partial patches or serialized JSON. State alone creates no controls.',
   type:'object',additionalProperties:false,
     properties:{
       version:{type:'number',const:1},
       title:{type:'string',required:true},
       fallback:{type:'string',description:'Required for v1 nodes: useful plain-text explanation if UI is unavailable.'},
-      items:{type:'array',description:'Extended visual components: use their compact type-specific fields. See injected guide or ui_catalog topic=visual.',items:{type:'json'}},
-      nodes:{type:'array',items:{type:'object',additionalProperties:true,properties:{
+      items:{type:'array',description:'Extended fields: ui_catalog topic=visual.',items:{type:'json'}},
+      nodes:{type:'array',description:'REQUIRED for version:1: all visible nodes and control nodes, in this same call. Never submit only state/derived.',items:{type:'object',additionalProperties:true,properties:{
         id:{type:'string',required:true,description:'Unique letter/underscore identifier; Chinese supported, max64.'},
         type:{type:'string',required:true,enum:Object.keys(COMPONENTS)},
         spec:{type:'json',description:'visual only: extended {title?,items:[components]} composition.'},stateKey:{type:'string',description:'visual only: optional dedicated json state key, auto-created when omitted.'},warnings:{type:'json'},
@@ -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 object rows, including {ref}/{expr} cells, or data/derived rows binding. No map needed for a short breakdown.'},
         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.'),
+      state:dictionary('Typed states, e.g. {people:{type:"number",default:2,min:1,max:12,step:1}}. Use numeric bounds/defaults, direct options arrays; json stores bounded canvas arrays/objects.'),
       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"}}. round/ceil/floor/abs take one argument. Other expression forms/maps: ui_catalog topic=native. Omit unused derived.'),
       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.')
     }
@@ -47,4 +47,4 @@ export const DOCUMENT_PARAMETER={
 // Keep the native transport schema shallow. A recursively expanded union of
 // every component makes the lightweight tool harder to call; the shared
 // runtime validator still enforces exact component fields and limits.
-export const TEXT_BLOCKS_PARAMETER={type:'array',required:true,items:{type:'json'},description:'Direct array of text strings or native v1 nodes with optional IDs. Examples: [{type:"text",text:"Answer"}], or [{type:"steps",items:[{title:"First",description:"One sentence"}]}]. Reusable text: {type:"text",copyable:true,title:"Draft",text:"..."}; code: {type:"code",lang:"bash",code:"..."}, always copyable. Layout nodes use children:[nodes]; text may use spans:[{text,weight?,color?}] instead of text. Keep all content/styling inside blocks. Do not serialize the array or wrap it in {item:[...]}. ui_catalog topic=quick supplies exact fields and examples.'};
+export const TEXT_BLOCKS_PARAMETER={type:'array',required:true,items:{type:'json'},description:'Direct array of strings/native nodes with optional IDs, e.g. [{type:"text",text:"Answer"}]. steps uses items:[{title,description?}], layouts use children:[nodes]. Copyable text: copyable:true; code:{type:"code",lang,code}. Keep styling/content inside blocks. No JSON string or {item:[...]} wrapper.'};

package/lib/ui-intent.js

@@ -1,15 +1,4 @@
-// Shared behavior, not a visual template: free mode keeps the same intent policy.
-export const UI_INTENT_POLICY = `## 表达选择与首次交付
-简单公式可用 {expr:"state.V * state.V / state.R"}，无需堆叠 op/args。支持显式 state/data/derived/item 引用、四则运算、比较、三元条件及 min/max/round/abs；编译后仍按原协议校验。函数、语句和其他 JavaScript 不受支持，复杂动画使用画布。
-无需等待用户说“UI”“可视化”或指定工具。先用一个简短判断选择表达方式，然后直接回答或提交界面，不向用户复述设计推理：
-- 用户明确要求交互界面、图解或动画：交付对应 UI；已要求纯文字、不要界面、只给代码时遵从用户。
-- 用户没提 UI，但问题的关键是参数变化如何影响结果、多个方案的权衡、时间趋势、空间结构或流程关系：当图形或操作比文字明显更易懂时主动使用 UI。不能只因出现数字、多个条目或技术名词就触发。
-- 简单事实、单次数值换算、短定义、普通代码排错：直接文字。一个静态小表格足够时不必创建交互应用；静态图解、方案对比、流程和看板也都是 UI 的正常用途。不确定有无收益时选更简单的表达，不询问“要不要我做个 UI”。
-对照：问“复利是什么，简短解释”→文字；问“5万元按3%、5%、7%存10年，为什么后期差距更大”→可主动给增长曲线与年数调整，配准确数值和简短解释；问“解释七速自行车各档如何影响踏频和行进”→可主动给传动示意与档位选择；问“1 GiB是多少字节”→文字。例子只指导时机，不规定构图或配色。
-每块界面只解决一个核心关系；一轮回复可按讲解顺序生成多块独立界面。立即选择最小完整方案并调用工具，不穷举设计选项，不先写长篇视觉规划，不等待“完美”再提交。每块默认用一幅静态主图、一个短流程、一个对齐对比或一个简洁看板即可；没有明确交互收益时不建 state、不写 script、不加控件和动画。静态可视化本身就是完整交付；只有用户需要操作时才保证对应交互。用户的必要要求不能省略。
-仅数值试算优先原生组件；计算超出 derived 白名单（例如幂、三角函数）时不要臆造算子或堆复杂表达式，改用小画布中的单一计算函数同步图与数值。结构或运动讲解选择一块自由画布，直接使用 render_canvas 的独立源码字段。避免首次创建多页应用、自制组件库或庞大绘图引擎。除非用户或宿主另有要求，对话内的简短交互讲解无需建立项目、编辑文件或制定任务清单。工具提交前检查绑定、初始图可见、改变参数有反馈、标签/单位和 fallback；不为简单任务反复读全部目录。
-必要的布局与排版从首次提交就做好：DSH 以 PC 横屏为主要使用场景，优先保证 1365px/1920px 桌面视口中实际聊天区域的构图与可读性，不假设画布等于整个浏览器宽度。主体突出、文字可读、控件有标签，装饰不挤占内容；手机适配是补充，不为窄屏牺牲桌面主体。Canvas 2D 按实际 CSS 像素布局，不整体缩放到文字难辨；动态数值和关键标签可放 HTML，绘图高度匹配内容，避免大块空白。
-首屏应能看见主要关系、关键操作及当前结果。用户问“为什么变化不同”，优先用能对照变化的图形；发光、粒子或装饰不能代替趋势或关系证据。主图紧邻控件，推导、完整表格和次要说明随后呈现；同一数值不在指标、图注、卡片和正文反复展示。不要把所有可用组件都用一遍，也不为减少滚动而缩小字。比较不同单位的量，分别标轴或明确使用相对同一基准的无量纲倍数，不能把原始数值放在同一未说明尺度上暗示快慢。这些是信息优先级要求，具体图形、构图与风格仍按问题自行设计。
-不把“最小”理解成粗糙或缺功能。交付所有必要内容后简短说明如何操作和假设；针对实际问题再局部修改。主动增强最多一次且确有价值，这是完成用户要求后的额外润色，不限制同一回复的 UI 数量或必要工具次数；用户要求几块不同内容就分别完成，不能第一块成功后提前结束。自动纠错仍最多两轮。无法交付时提供有效解释并如实说明，不声称已展示。
-交付检查：如果决定生成 UI，先实际调用渲染工具并检查成功结果，或写出完整的 UI 源码围栏，然后再结束回复。“现在补上组件”“我会画图”只是承诺，不是交付。工具报错后修正实际参数并重新提交；若无法完成，给出有用的文字答案和真实失败原因，不用另一句承诺收尾。
-这是一项行为要求，不能保证模型推理时长；宿主没有提供真实计时信息时不要虚报交付秒数。`;
+// Shared behavior, without aesthetic rules or provider inference caps.
+export const UI_INTENT_POLICY=`## 表达选择与实际交付
+用户明确要求UI、图解、动画或交互时，实际交付；要求纯文字或只给代码时遵从。无需用户点名UI：参数与结果、方案权衡、趋势、流程或空间关系用图形明显更易懂时主动使用。简单事实、短定义、一次换算、普通代码排错直接 plain text。例：1 GiB的字节数→文字；比较不同利率的长期增长→可视化；外啮合齿轮的方向和速比→机制图解。静态排版和图解也是完整UI，不强行加交互。用户强调“一眼看懂先后顺序”“并排比较”“参数变化看结果”时，这是明确的表达目标：即使没提UI，也优先用轻量界面承载；短流程可直接render_scene，不额外添加交互。普通简短列表不强制UI。
+每块围绕一个核心关系，按要求完成全部内容；一轮可有多块独立UI。先交付最小完整作品，不把“最小”理解成缺功能或粗糙，也不展开冗长设计复盘、穷举方案或为对话界面创建工程。首次工具成功不等于整个任务完成，不能用“准备调用”代替实际交付。外部数据正常用任务工具获取，真实数据与示例/假设分清。`;

package/lib/ui-skill.js

@@ -1,21 +1,17 @@
-import { readFileSync } from 'node:fs';
-import { PROTOCOL_GUIDE } from './catalog.js';
-import { CANVAS_DESIGN_GUIDE } from './canvas-design.js';
-import { FREE_UI_CONTRACT } from './freeform.js';
-import { UI_INTENT_POLICY } from './ui-intent.js';
-import { CANVAS_SYSTEM_GUIDE } from './canvas-system.js';
-import {QUICK_EXAMPLES,QUICK_GUIDE} from './quick-examples.js';
-import {TEXT_GUIDE,TEXT_INTERFACE} from './text-guide.js';
-import {DEFAULT_VISUAL_STYLE,stylePrompt,styleExamples,visualStyle} from './visual-styles.js';
-import {VISUAL_GUIDE,VISUAL_INTERFACE} from './visual.js';
-
+import {MOTION_GUIDE} from './motion-library.js';
+import {readFileSync} from 'node:fs';
+import {MODEL_CONTRACT} from './prompt-contract.js';
+import {FREE_UI_CONTRACT} from './freeform.js';
+import {UI_INTENT_POLICY} from './ui-intent.js';
+import {DEFAULT_VISUAL_STYLE,stylePrompt,visualStyle} from './visual-styles.js';
+
 // Authored examples are deliberately small enough to be present in every model's context.
 export const SKILL_EXAMPLES = [
   {
     version: 1, title: '示例 · 数量与费用', fallback: '演示：单价 12 元，数量默认 2，总额 24 元。不是报价。',
     presentation: { layout: 'workbench', accent: 'teal', density: 'comfortable' },
     state: { quantity: { type: 'number', default: 2, min: 1, max: 10, step: 1 } },
-    derived: { total: { op: 'mul', args: [{ ref: 'state.quantity' }, { const: 12 }] } },
+    derived: { total: { expr: 'state.quantity * 12' } },
     nodes: [
       { id: 'quantity', type: 'slider', label: '数量（件）', bind: 'state.quantity' },
       { id: 'total', type: 'metric', label: '演示总额', value: { ref: 'derived.total' }, unit: '元', decimals: 0 },
@@ -38,16 +34,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: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:''}));
-}
-
-
+const workedExamples=style=>'Selected visual-style examples (adapt the composition to the task; no obligation to reproduce every module):\n'+JSON.stringify(visualStyle(style).examples[0])+'\n'+JSON.stringify({tool:'render_ui',args:{document:SKILL_EXAMPLES[0]}});
+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:UI_INTENT_POLICY+'\n\n'+skill+'\n\n'+MOTION_GUIDE},
+ {name:'generative-ui:protocol',order:851,interpolate:false,text:MODEL_CONTRACT},
+ {name:'generative-ui:worked-examples',order:852,interpolate:false,text:workedExamples(DEFAULT_VISUAL_STYLE)}
+]);
+export function promptSections(mode='guided',style=DEFAULT_VISUAL_STYLE){
+ if(!['guided','free'].includes(mode))throw Error('DSH UI: designMode must be guided or free');visualStyle(style);
+ return UI_SKILL_SECTIONS.map((section,i)=>({...section,text:mode==='free'?(i===0?UI_INTENT_POLICY+'\n\n'+FREE_UI_CONTRACT:''):i===0?section.text+'\n\n'+stylePrompt(style):i===2?workedExamples(style):section.text}));
+}

package/lib/visual-audit.js

@@ -1,18 +1,29 @@
 // Serialized into the opaque frame; it never reads host content.
 export function measureVisual(root, nodeId='') {
   const issues=[],seen=new Set(),coverage={nodeId,elements:0,truncated:false,contrastChecked:0,contrastUncovered:0};
-  const add=(code,value,el)=>{const id=el?.closest('[data-ui-node]')?.getAttribute('data-ui-node')??nodeId;const k=id+':'+code+':'+Math.round(value??0);if(!seen.has(k)&&issues.length<40){seen.add(k);issues.push({code,nodeId:id,...(value===undefined?{}:{value:Number(value.toFixed(2))})});}};
+  const styleCache=new WeakMap(),styleOf=el=>{let css=styleCache.get(el);if(!css){css=getComputedStyle(el);styleCache.set(el,css)}return css};
+  const target=el=>{if(!el)return undefined;const tag=el.tagName.toLowerCase(),id=el.id;return{selector:id&&id.length<=64?'#'+CSS.escape(id):tag,text:(el.textContent??'').trim().replace(/\s+/g,' ').slice(0,120),tag}};
+  const add=(code,value,el)=>{if(issues.length>=40)return;const id=el?.closest('[data-ui-node]')?.getAttribute('data-ui-node')??nodeId;const location=target(el);const k=id+':'+code+':'+(location?.selector??'')+':'+(location?.text??'')+':'+Math.round(value??0);if(!seen.has(k)&&issues.length<40){seen.add(k);issues.push({code,nodeId:id,...(location?{target:location}:{}),...(value===undefined?{}:{value:Number(value.toFixed(2))})});}};
   const color=s=>{let m=s.match(/^rgba?\(([^)]+)\)/);if(m){const a=m[1].split(/[\s,\/]+/).map(Number);return[a[0]/255,a[1]/255,a[2]/255,a[3]??1]}m=s.match(/^color\(srgb ([^)]+)\)/);if(m){const a=m[1].split(/[\s\/]+/).map(Number);return[a[0],a[1],a[2],a[3]??1]}return null;};
   const luminance=c=>c.slice(0,3).map(v=>v<=.04045?v/12.92:((v+.055)/1.055)**2.4).reduce((s,v,i)=>s+v*[.2126,.7152,.0722][i],0);
+  const blend=(front,back)=>front.slice(0,3).map((v,i)=>v*front[3]+back[i]*(1-front[3])).concat(1);
+  const background=el=>{const layers=[];let n=el;for(let i=0;n&&i<64;i++,n=n.parentElement){const c=styleOf(n);if(c.backgroundImage!=='none')return null;const colorValue=color(c.backgroundColor);if(!colorValue)return null;if(colorValue[3]>0)layers.push(colorValue);if(colorValue[3]===1){let out=layers.pop();while(layers.length)out=blend(layers.pop(),out);return out;}}return null;};
+  let contentBottom=root.getBoundingClientRect().top;
   const widthRoot=root.id==='canvas'?document.documentElement:root;if(widthRoot.scrollWidth>widthRoot.clientWidth+2)add('overflow',widthRoot.scrollWidth-widthRoot.clientWidth);
   const walker=document.createTreeWalker(root,NodeFilter.SHOW_ELEMENT);let el;while((el=walker.nextNode())){if(coverage.elements>=2000){coverage.truncated=true;break}coverage.elements++;if(el.matches('[data-canvas-phase=error]'))add('runtimeError',undefined,el);
-    const css=getComputedStyle(el),box=el.getBoundingClientRect();if(!box.width||!box.height||css.visibility==='hidden'||css.display==='none')continue;
+    const css=styleOf(el),box=el.getBoundingClientRect();if(!box.width||!box.height||css.visibility==='hidden'||css.display==='none')continue;
     const text=[...el.childNodes].some(n=>n.nodeType===3&&n.textContent.trim());
     if(text){let size=parseFloat(css.fontSize);if(el instanceof SVGElement&&el.getScreenCTM){const m=el.getScreenCTM();if(m)size*=Math.hypot(m.c,m.d)}if(size<11.9)add('smallText',size,el);
-      const fg=color(css.color);let ancestor=el,bg=null,depth=0;while(ancestor&&depth++<64){const style=getComputedStyle(ancestor);if(style.backgroundImage!=='none')break;const c=color(style.backgroundColor);if(c?.[3]===1){bg=c;break}if(c?.[3]>0)break;ancestor=ancestor.parentElement;}
-      if(!(el instanceof SVGElement)&&fg?.[3]===1&&bg){coverage.contrastChecked++;const a=luminance(fg),b=luminance(bg),ratio=(Math.max(a,b)+.05)/(Math.min(a,b)+.05);if(ratio<(size>=24||(size>=18.66&&parseFloat(css.fontWeight)>=700)?3:4.5))add('contrast',ratio,el);}else coverage.contrastUncovered++;
+      if(!(el instanceof SVGElement)){
+        const fg=color(css.color),bg=background(el);let opacitySafe=true,opacityDepth=0;for(let a=el;a;a=a.parentElement){if(++opacityDepth>64||parseFloat(styleOf(a).opacity)<1){opacitySafe=false;break}}
+        if(fg&&bg&&opacitySafe){coverage.contrastChecked++;const a=luminance(blend(fg,bg)),b=luminance(bg),ratio=(Math.max(a,b)+.05)/(Math.min(a,b)+.05);if(ratio<(size>=24||(size>=18.66&&parseFloat(css.fontWeight)>=700)?3:4.5))add('contrast',ratio,el);}else coverage.contrastUncovered++;
+        const range=document.createRange();range.selectNodeContents(el);const bounds=range.getBoundingClientRect();let a=el,depth=0;while(a&&a!==root.parentElement&&depth++<24){const c=styleOf(a),clip=a.getBoundingClientRect();if((['hidden','clip'].includes(c.overflowX)&&(bounds.left<clip.left-2||bounds.right>clip.right+2))||(['hidden','clip'].includes(c.overflowY)&&(bounds.top<clip.top-2||bounds.bottom>clip.bottom+2))){add('clippedText',undefined,el);break}a=a.parentElement}
+      }else coverage.contrastUncovered++;
+
     }
+    if(text||el.matches('svg,canvas,img,video,input,select,textarea,button'))contentBottom=Math.max(contentBottom,box.bottom);
     if(el.matches('input:not([type=hidden]),select,textarea,button,[role=button]')&&!el.getAttribute('aria-label')&&!el.getAttribute('aria-labelledby')&&!el.labels?.length&&!el.textContent.trim()&&!el.getAttribute('title'))add('missingLabel',undefined,el);
   }
+  const rect=root.getBoundingClientRect(),gap=rect.bottom-contentBottom;if(!coverage.truncated&&root.id==='canvas'&&rect.height>320&&gap>Math.max(96,rect.height*.25))add('bottomWhitespace',gap,root);
   Object.defineProperty(issues,'coverage',{value:coverage});return issues;
 }

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原生组件自动遵循此风格，通常省略size/weight/color和presentation.accent；明确要求或语义强调才覆盖。HTML/SVG与原生内容保持一致层级。通用指导不覆盖这里的配色、材质、圆角或阴影；按任务组织内容，不为展示风格增加画布或工具调用。'}
 export function styleExamples(id){return visualStyle(id).examples.map(example=>JSON.stringify(example)).join('\n')}