@cyberskill/design 1.0.0 → 1.1.1

package/docs/vi/template-schema-v2.md

@@ -29,8 +29,20 @@ Metadata thuần additive, opt-in: sidecar `templates/<slug>/content-schema.json
 | `slots[].required` | không | mặc định `false` |
 | `slots[].i18n` | không | `{"en": "...", "vi": "..."}` — cho template ship biến thể EN·VI |
 
-Hình dạng máy kiểm được chính thức nằm ở `templates/schema/content-schema.schema.json` (JSON Schema draft-07). `_audit/template-schema-test.html` validate mọi sidecar tồn tại — hai chiều: mọi slot id khai báo phải resolve tới hole thật trong template, và (informational) báo coverage trên toàn `templates/`.
+Hình dạng máy kiểm được chính thức nằm ở `templates/schema/content-schema.schema.json` (JSON Schema draft-07). `_audit/template-schema-test.html` validate mọi sidecar tồn tại — hai chiều với content hole đủ điều kiện: mọi slot id khai báo phải là content hole trong `.dc.html`, và mọi content hole phải xuất hiện thành slot — **và ép độ phủ**.
 
-## Rollout
+## Hole nào đủ điều kiện có schema
 
-Giống visual-diff baselines, ban đầu ship **cố ý chưa đầy đủ** — ba exemplar (một mỗi archetype lớn) chứng minh pattern end-to-end: `marketing-page` (product), `bod-report` (document), `slide-deck` (deck). Sau đó đã **quét tới mọi template hole-driven** và tiếp tục lớn dần; độ phủ sidecar hiện tại do `_audit/template-schema-test.html` báo cáo (bề mặt product traffic cao như `marketing-page`, `dashboard`, `settings`, cộng `tech-incident-report` được phủ slot nội dung đầy hơn). Hole trục / control-flow (`rootTheme`, `langAttr`, `elAttr`, `vaAttr`, `isEN`, `true`, …) nằm ngoài schema — chúng là trục runtime, không phải content author được. Phần còn lại hardcode copy bilingual trực tiếp theo nhánh `sc-if` ngôn ngữ (chưa có slot content `{{ hole }}`). Thêm sidecar cho mọi template nhận content hole-driven khi chạm tới; ưu tiên tăng measurable trên template traffic cao trước.
+Một `{{ hole }}` là **content hole** (đủ điều kiện schema) trừ khi nó là:
+
+- hole **trục / control-flow** — `rootTheme`, `langAttr`, `elAttr`, `vaAttr`, `dirAttr`, `true`, `false`, bất kỳ tên nào khớp `is<ChữHoa>` (`isEN`, `isVN`, `isBoth`, `isTable`, …), hoặc một số nguyên trần;
+- hole **tweak boolean** — bất kỳ tên nào khớp `show|hide|has|enable|with` + `<ChữHoa>` (`showLogo`, `showSignatures`, `showQuote`, …);
+- hole **runtime-control** — wiring chọn UI / handler: tên đúng `tabs`, `tab`, `lens`, `chatOpen`, `closeChat`, `dangerOpen`, `closeDanger`, hoặc bất kỳ tên nào khớp `set|open` + `<ChữHoa>` (`setTab`, `setLens`, `openChat`, …).
+
+Chúng là trục runtime, không phải content slot có kiểu, nên nằm ngoài schema.
+
+## Rollout — đã đủ cho template đủ điều kiện, và đã có gate
+
+Ban đầu ship **cố ý chưa đầy đủ**: ba exemplar (một mỗi archetype lớn) chứng minh pattern end-to-end — `marketing-page` (product), `bod-report` (document), `slide-deck` (deck) — rồi quét qua các template hole-driven.
+
+Đợt quét đó nay **đã xong và được khoá**. Tính tới Jul 2026: **39 template content-hole-driven, cả 39 đều có sidecar**, và **45 template chỉ lộ hole trục/boolean** (copy song ngữ hardcode theo nhánh `sc-if`) đúng là không có sidecar. `_audit/template-schema-test.html` không còn chỉ báo cáo con số này — nó **fail** nếu có template lộ content hole mà thiếu sidecar. Nên luật cho author là cơ học: template nhận thêm một `{{ hole }}` author được thì nhận luôn sidecar trong cùng change, không thì board đỏ.

package/docs/viewer.html

@@ -58,12 +58,12 @@
 <script>
 const DOCS_EN=[
  ['Start',[['README.md','README'],['SKILL.md','SKILL (agent rules)'],['llms.txt','llms.txt'],['CONTRIBUTING.md','Contributing']]],
- ['Guides',[['docs/consuming.md','Consuming & upgrading (incl. AI-agent quick path)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template content-schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Release Notes'],['docs/storybook.md','Storybook (product at /)'],['docs/live-hub.md','Live hub (Storybook at /)'],['docs/design-styles.md','Design styles'],['docs/products.md','Products'],['docs/contrast-report.md','Contrast report'],['docs/figma.md','Figma']]],
+ ['Guides',[['docs/consuming.md','Consuming & upgrading (incl. AI-agent quick path)'],['docs/consumer-grant.md','Consumer grant (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template content-schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Release Notes'],['docs/storybook.md','Storybook (product at /)'],['docs/live-hub.md','Live hub (Storybook at /)'],['docs/design-styles.md','Design styles'],['docs/benchmark-rubric.md','Benchmark rubric'],['docs/products.md','Products'],['docs/contrast-report.md','Contrast report'],['docs/figma.md','Figma']]],
  ['Maintainers',[['docs/decisions.md','Decisions'],['docs/ci-cd.md','CI/CD automation'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Git sync & hygiene']]]
 ];
 const DOCS_VI=[
  ['Bắt đầu',[['README.md','README (EN)'],['SKILL.md','SKILL (EN)'],['llms.txt','llms.txt (EN)'],['CONTRIBUTING.md','Contributing (EN)']]],
- ['Hướng dẫn',[['docs/consuming.md','Tiêu thụ & nâng cấp'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Ghi chú phát hành'],['docs/storybook.md','Storybook (sản phẩm tại /)'],['docs/live-hub.md','Live hub (Storybook tại /)'],['docs/design-styles.md','Phong cách'],['docs/products.md','Sản phẩm'],['docs/contrast-report.md','Báo cáo contrast'],['docs/figma.md','Figma']]],
+ ['Hướng dẫn',[['docs/consuming.md','Tiêu thụ & nâng cấp'],['docs/consumer-grant.md','Grant consumer (npm · UNLICENSED)'],['docs/deploy.md','Deploy (Vercel/VPS)'],['docs/template-schema-v2.md','Template schema v2'],['docs/conventions.md','Conventions'],['docs/release-notes.md','Ghi chú phát hành'],['docs/storybook.md','Storybook (sản phẩm tại /)'],['docs/live-hub.md','Live hub (Storybook tại /)'],['docs/design-styles.md','Phong cách'],['docs/benchmark-rubric.md','Rubric benchmark'],['docs/products.md','Sản phẩm'],['docs/contrast-report.md','Báo cáo contrast'],['docs/figma.md','Figma']]],
  ['Maintainer',[['docs/decisions.md','Quyết định'],['docs/ci-cd.md','CI/CD'],['docs/quality-gates.md','Quality gates'],['docs/sync.md','Đồng bộ Git']]]
 ];
 let lang=(localStorage.getItem('cs-docs-lang')==='vi')?'vi':'en';

package/guidelines/atomic-view.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Atomic View" viewport="1280x820" name="Atomic View" subtitle="Storybook-style browser — every component + variants, live across Theme × Element × Language" -->
+<!-- @dsCard group="Atomic View" viewport="1280x820" name="Atomic View" subtitle="Storybook-style browser — every component + variants, live across Theme × Element × Language × Style" -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -77,8 +77,8 @@
   @media (max-width:820px){.app{grid-template-columns:1fr}.nav{display:none}.grid2{grid-template-columns:1fr}}
 </style>
 <script src="nav-model.cjs"></script>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../_ds_bundle.js"></script>
 </head>
@@ -89,10 +89,10 @@ const { useState, useEffect, useRef } = React;
 const NS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};
 const {
   Button, Icon, Badge, Tag, Alert, Toast, ToastStack, Spinner, ProgressBar, Skeleton, StatusIndicator, EmptyState,
-  TextField, Select, Checkbox, RadioGroup, Switch, Textarea, SearchField, NumberField, Slider, FileUpload, SegmentedControl,
+  TextField, Select, NativeSelect, Checkbox, RadioGroup, Switch, Textarea, SearchField, NumberField, Slider, FileUpload, SegmentedControl,
   Tabs, Breadcrumb, Pagination, Menu, MenuItem, Sidebar, NavItem, Steps, CommandPalette,
-  DataTable, Card, CardHeader, CardBody, CardFooter, Stat, Avatar, AvatarGroup, Tooltip, Divider,
-  List, ListItem, DescriptionList, Timeline, Accordion, Kbd, CodeBlock, Dialog, Drawer, Popover,
+  DataTable, Card, CardHeader, CardBody, CardFooter, Stat, Avatar, AvatarGroup, Tooltip, Divider, ScrollArea, AspectRatio, Item,
+  List, ListItem, DescriptionList, Timeline, Accordion, Collapsible, Kbd, CodeBlock, Dialog, Drawer, Popover, AlertDialog,
   PromptInput, ChatMessage, ConfidenceMeter, AIDisclosureBadge, HumanReviewGate, PromptSuggestions, TypingIndicator, CitationList,
   LumiAvatar, Logo, Toggle, Rating, InputOTP, ButtonGroup, Combobox, InputGroup, TagInput, Calendar, DatePicker, TimePicker,
   HoverCard, Popconfirm, ContextMenu, FloatingActionButton, Result, InlineEdit, Link, Anchor, Image, Toolbar,
@@ -125,13 +125,14 @@ function Controlled({spec}){
 function TabsD({L}){ const [v,setV]=useState("board"); const V=L==="vi"; return has(Tabs)?<Tabs value={v} onChange={setV} tabs={[{value:"board",label:V?"Bảng công việc":"Board"},{value:"table",label:V?"Bảng dữ liệu":"Table",count:6},{value:"rel",label:V?"Phát hành":"Releases"}]}/>:<Miss n="Tabs"/>; }
 function PaginationD(){ const [p,setP]=useState(3); return has(Pagination)?<Pagination page={p} pageCount={12} onChange={setP}/>:<Miss n="Pagination"/>; }
 function SegmentedD({L}){ const [v,setV]=useState("board"); const V=L==="vi"; return has(SegmentedControl)?<SegmentedControl value={v} onChange={setV} options={[{value:"board",label:V?"Bảng công việc":"Board"},{value:"table",label:V?"Bảng dữ liệu":"Table"},{value:"rel",label:V?"Phát hành":"Releases"}]}/>:<Miss n="SegmentedControl"/>; }
-function SliderD(){ const [v,setV]=useState(60); return has(Slider)?<div style={{flex:1,minWidth:200}}><Slider min={0} max={100} value={v} onChange={(e)=>setV(+e.target.value)}/></div>:<Miss n="Slider"/>; }
+function SliderD({L}){ const [v,setV]=useState(60); return has(Slider)?<div style={{flex:1,minWidth:200}}><Slider min={0} max={100} value={v} onChange={(e)=>setV(+e.target.value)} aria-label={L==="vi"?"Tiến độ":"Progress"}/></div>:<Miss n="Slider"/>; }
 function SearchD({L}){ const [q,setQ]=useState("Design System"); return has(SearchField)?<div style={{flex:1,minWidth:240}}><SearchField value={q} onChange={setQ} placeholder={L==="vi"?"Tìm dự án…":"Search projects…"}/></div>:<Miss n="SearchField"/>; }
-function NumberD(){ const [n,setN]=useState(3); return has(NumberField)?<NumberField value={n} onChange={setN} min={1} max={20}/>:<Miss n="NumberField"/>; }
+function NumberD({L}){ const [n,setN]=useState(3); return has(NumberField)?<NumberField label={L==="vi"?"Số lượng":"Quantity"} value={n} onChange={setN} min={1} max={20}/>:<Miss n="NumberField"/>; }
 function DateD({L}){ const [d,setD]=useState(()=>new Date(2026,6,18)); const [tm,setTm]=useState("09:30"); return <div className="srow" style={{alignItems:"flex-start",minHeight:400}}>{has(DatePicker)?<DatePicker value={d} onChange={setD}/>:<Miss n="DatePicker"/>}{has(TimePicker)?<TimePicker value={tm} onChange={setTm} step={15}/>:<Miss n="TimePicker"/>}</div>; }
 function CalD({L}){ const [d,setD]=useState(()=>new Date(2026,6,18)); return has(Calendar)?<Calendar value={d} onChange={setD}/>:<Miss n="Calendar"/>; }
 function ColorD({L}){ const [c,setC]=useState("#F4BA17"); return has(ColorPicker)?<div style={{minHeight:210}}><ColorPicker value={c} onChange={setC}/></div>:<Miss n="ColorPicker"/>; }
 function TourD({L}){ const [on,setOn]=useState(false); return has(Tour,Button)?<div><Button size="sm" variant="secondary" onClick={()=>setOn(true)}>{L==="vi"?"Bắt đầu hướng dẫn":"Start tour"}</Button><Tour open={on} onClose={()=>setOn(false)} steps={L==="vi"?[{target:"#toggle",title:"Toggle",body:"Nút bật/tắt đứng độc lập."},{target:"#rating",title:"Rating",body:"Đánh giá sao màu Ochre."}]:[{target:"#toggle",title:"Toggle",body:"A standalone pressable button."},{target:"#rating",title:"Rating",body:"Ochre star rating."}]}/></div>:<Miss n="Tour"/>; }
+function AlertDialogD({L}){ const [on,setOn]=useState(false); const V=L==="vi"; return has(AlertDialog,Button)?<div><Button variant="danger-ghost" size="sm" onClick={()=>setOn(true)}>{V?"Xoá không gian":"Delete workspace"}</Button><AlertDialog open={on} onOpenChange={setOn} title={V?"Xoá không gian làm việc?":"Delete workspace?"} description={V?"Xoá mọi dự án. Không thể hoàn tác.":"Removes every project. This cannot be undone."} tone="destructive" onConfirm={()=>{}}/></div>:<Miss n="AlertDialog"/>; }
 function GridD({L}){ const [sel,setSel]=useState(["CDS"]); const V=L==="vi"; return has(DataGrid)?<DataGrid selectable selected={sel} onSelect={setSel} rowKey="key" height={220} columns={[{key:"key",header:V?"Mã":"Key",sortable:true},{key:"name",header:V?"Dự án":"Project",sortable:true},{key:"pct",header:V?"Tiến độ":"Progress",sortable:true,render:(r)=>r.pct+"%"}]} rows={[{key:"CDS",name:"Design System",pct:72},{key:"GENIE",name:"Lumi Genie",pct:58},{key:"SITE",name:"cyberskill.world",pct:84}]}/>:<Miss n="DataGrid"/>; }
 function SortD({L}){ const [it,setIt]=useState(L==="vi"?[{key:"a",label:"Ước một điều"},{key:"b",label:"Định hình"},{key:"c",label:"Xây để ra mắt"}]:[{key:"a",label:"Make a wish"},{key:"b",label:"Shape it"},{key:"c",label:"Build to ship"}]); return has(Sortable)?<Sortable items={it} onChange={setIt}/>:<Miss n="Sortable"/>; }
 function TreeSelD({L}){ const [k,setK]=useState("ds"); return has(TreeSelect)?<TreeSelect value={k} onChange={setK} nodes={L==="vi"?[{key:"p",label:"Nền tảng",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]:[{key:"p",label:"Platform",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]}/>:<Miss n="TreeSelect"/>; }
@@ -167,21 +168,24 @@ const STORIES = [
   { tier:"Atom", name:"Spinner · ProgressBar · Skeleton", grp:"Feedback", controls:[{k:"value",type:"range",min:0,max:100,step:1,def:72},{k:"label",type:"text",def:"v1.6 progress"}], renderC:(v)=> has(ProgressBar)?<div style={{maxWidth:320}}><ProgressBar value={v.value} label={v.label}/></div>:<Miss n="ProgressBar"/>, render:()=> has(Spinner,ProgressBar,Skeleton)?<div className="srow"><Spinner size={24}/><div style={{flex:"1 1 200px"}}><ProgressBar value={72} label="v1.6 progress"/></div><div style={{flex:"1 1 160px"}}><Skeleton lines={2}/></div></div>:<Miss n="Spinner/ProgressBar/Skeleton"/> },
   { tier:"Atom", name:"Avatar", grp:"Data", controls:[{k:"name",type:"text",def:"Nguyễn Vũ"},{k:"size",type:"select",options:["sm","md","lg"],def:"lg"}], renderC:(v)=> has(Avatar)?<Avatar name={v.name} size={v.size}/>:<Miss n="Avatar"/>, render:()=> has(Avatar,AvatarGroup)?<div className="srow"><Avatar name="Nguyễn Vũ" size="lg"/><Avatar name="An Le" size="md"/><Avatar name="Bao Vu" size="sm"/><AvatarGroup><Avatar name="An Le" size="sm"/><Avatar name="Bao Vu" size="sm"/><Avatar name="Chi Tran" size="sm"/></AvatarGroup></div>:<Miss n="Avatar"/> },
   { tier:"Atom", name:"Divider", grp:"Data", render:()=> has(Divider)?<div style={{maxWidth:360}}><Divider/><Divider label="team"/></div>:<Miss n="Divider"/> },
+  { tier:"Atom", name:"AspectRatio", grp:"Data", controls:[{k:"ratio",type:"select",options:["16 / 9","1","4 / 3","9 / 16"],def:"16 / 9"}], renderC:(v)=> has(AspectRatio)?<div style={{maxWidth:280}}><AspectRatio ratio={v.ratio}><img src="../assets/aurora-gold.jpg" alt="Aurora"/></AspectRatio></div>:<Miss n="AspectRatio"/>, render:(L)=> has(AspectRatio)?<div style={{maxWidth:280}}><AspectRatio ratio="16 / 9"><img src="../assets/aurora-gold.jpg" alt={L==="vi"?"Aurora vàng":"Aurora gold"}/></AspectRatio></div>:<Miss n="AspectRatio"/> },
+  { tier:"Atom", name:"Item", grp:"Data", controls:[{k:"selected",type:"toggle",def:false},{k:"disabled",type:"toggle",def:false}], renderC:(v)=> has(Item)?<div style={{maxWidth:420}}><Item title="Release notes" description="Bilingual digest" selected={v.selected} disabled={v.disabled} trailing={has(Switch)?<Switch defaultChecked aria-label="Release notes"/>:null}/></div>:<Miss n="Item"/>, render:(L)=> has(Item)?<div style={{maxWidth:420,display:"grid",gap:8}}><Item title={L==="vi"?"Ghi chú phát hành":"Release notes"} description={L==="vi"?"Tóm tắt song ngữ":"Bilingual digest"} trailing={has(Switch)?<Switch defaultChecked aria-label={L==="vi"?"Ghi chú phát hành":"Release notes"}/>:null}/><Item title={L==="vi"?"Hồ sơ":"Profile"} href="#profile" selected/></div>:<Miss n="Item"/> },
   { tier:"Atom", name:"Kbd", grp:"Data", render:()=> has(Kbd)?<span>Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search</span>:<Miss n="Kbd"/> },
   { tier:"Atom", name:"Logo", grp:"Brand", render:()=> has(Logo)?<div className="srow" style={{gap:24}}><Logo size={56}/><Logo size={40}/><Logo size={28}/><span style={{display:"flex",alignItems:"center",gap:10}}><Logo size={40}/><b style={{fontSize:22,letterSpacing:"-.01em",color:"var(--cs-color-text-primary)"}}>CyberSkill</b></span></div>:<Miss n="Logo"/> },
   { tier:"Atom", name:"LumiAvatar", grp:"Brand", controls:[{k:"size",type:"select",options:["sm","md","lg"],def:"lg"},{k:"ring",type:"toggle",def:true}], renderC:(v)=> has(LumiAvatar)?<LumiAvatar src="../assets/lumi-poster.webp" size={v.size} ring={v.ring}/>:<Miss n="LumiAvatar"/>, render:()=> has(LumiAvatar)?<div className="srow" style={{gap:22}}><LumiAvatar src="../assets/lumi-poster.webp" size="lg" ring/><LumiAvatar src="../assets/lumi-poster.webp" size="md"/><LumiAvatar size="md"/><LumiAvatar size="sm"/></div>:<Miss n="LumiAvatar"/> },
 
   // ============ MOLECULES ============
   { tier:"Molecule", name:"TextField", grp:"Forms", controls:[{k:"label",type:"text",def:"Work email"},{k:"error",type:"text",def:""},{k:"disabled",type:"toggle",def:false}], renderC:(v)=> has(TextField)?<div style={{maxWidth:360}}><TextField label={v.label} error={v.error||undefined} disabled={v.disabled} placeholder="you@company.com"/></div>:<Miss n="TextField"/>, render:()=> has(TextField)?<div className="grid2"><TextField label="Work email" type="email" placeholder="you@company.com"/><TextField label="Tên của bạn" description="Diacritics preserved" defaultValue="Nguyễn Hoàng Vũ"/><TextField label="Company" placeholder="Optional"/><TextField label="Email" error="Enter a valid email address." defaultValue="not-an-email"/></div>:<Miss n="TextField"/> },
-  { tier:"Molecule", name:"Select · Radio · Checkbox · Switch · Textarea", grp:"Forms", controls:[{k:"label",type:"text",def:"Dark theme"},{k:"disabled",type:"toggle",def:false}], renderC:(v)=> has(Switch)?<Switch label={v.label} disabled={v.disabled} defaultChecked/>:<Miss n="Switch"/>, render:()=> has(Select,RadioGroup,Checkbox,Switch,Textarea)?<div className="grid2">
+  { tier:"Molecule", name:"Select · NativeSelect · Radio · Checkbox · Switch · Textarea", grp:"Forms", controls:[{k:"label",type:"text",def:"Squad"},{k:"disabled",type:"toggle",def:false}], renderC:(v)=> has(Select,Checkbox,RadioGroup,Switch)?<div className="scol" style={{maxWidth:360,gap:12}}><Select label={v.label} disabled={v.disabled} options={[{value:"plat",label:"Platform"},{value:"ai",label:"AI"}]} defaultValue="ai"/><Checkbox label="Email me release notes" disabled={v.disabled} defaultChecked/><RadioGroup legend="Billing" options={[{value:"mo",label:"Monthly"},{value:"yr",label:"Annual"}]} defaultValue="yr"/><Switch label="Dark theme" disabled={v.disabled} defaultChecked/></div>:<Miss n="Select"/>, render:()=> has(Select,NativeSelect,RadioGroup,Checkbox,Switch,Textarea)?<div className="grid2">
       <Select label="Squad" options={[{value:"plat",label:"Platform"},{value:"ai",label:"AI"},{value:"growth",label:"Growth"}]} defaultValue="ai"/>
+      <NativeSelect label="Interface" size="sm" options={[{value:"en",label:"English"},{value:"vi",label:"Tiếng Việt"}]} defaultValue="en"/>
       <RadioGroup legend="Billing" defaultValue="yr" options={[{value:"mo",label:"Monthly"},{value:"yr",label:"Annual",description:"Two months free"}]}/>
       <div className="scol"><Checkbox label="Email me release notes" defaultChecked/><Checkbox label="Bilingual export" description="Ship EN + VN together"/><Switch label="Dark theme" defaultChecked/></div>
       <Textarea label="Tell us your wish" description="A sentence or two is plenty." rows={3} defaultValue="A faster checkout for our shop."/>
     </div>:<Miss n="Form controls"/> },
-  { tier:"Molecule", name:"Search · Number · Slider · Segmented · FileUpload", grp:"Forms", render:(L)=> <div className="scol">
+  { tier:"Molecule", name:"Search · Number · Slider · Segmented · FileUpload", grp:"Forms", controls:[{k:"query",type:"text",def:"design system"},{k:"qty",type:"range",min:0,max:20,step:1,def:3},{k:"level",type:"range",min:0,max:100,step:1,def:60}], renderC:(v)=> has(SearchField,NumberField,Slider,SegmentedControl,FileUpload)?<div className="scol" style={{maxWidth:420}}><SearchField value={v.query} onChange={()=>{}}/><NumberField label="Qty" value={+v.qty} onChange={()=>{}} lang="en"/><Slider aria-label="Level" value={+v.level} onChange={()=>{}}/><SegmentedControl value="board" onChange={()=>{}} options={[{value:"board",label:"Board"},{value:"list",label:"List"}]}/><FileUpload title="Drop files"/></div>:<Miss n="SearchField"/>, render:(L)=> <div className="scol">
       <div className="srow"><SearchD L={L}/></div>
-      <div className="srow"><NumberD/><SliderD/></div>
+      <div className="srow"><NumberD L={L}/><SliderD L={L}/></div>
       <div className="srow"><SegmentedD L={L}/></div>
       {has(FileUpload)?<FileUpload/>:<Miss n="FileUpload"/>}
     </div> },
@@ -189,19 +193,21 @@ const STORIES = [
   { tier:"Molecule", name:"InputOTP", grp:"Forms", render:()=> has(InputOTP)?<InputOTP length={6} onComplete={()=>{}}/>:<Miss n="InputOTP"/> },
   { tier:"Molecule", name:"ButtonGroup", grp:"Core", render:(L)=> has(ButtonGroup,Button)?<ButtonGroup label="View"><Button variant="secondary" size="sm">{L==="vi"?"Bảng công việc":"Board"}</Button><Button variant="secondary" size="sm">{L==="vi"?"Danh sách":"List"}</Button><Button variant="secondary" size="sm">{L==="vi"?"Dòng thời gian":"Timeline"}</Button></ButtonGroup>:<Miss n="ButtonGroup"/> },
   { tier:"Molecule", name:"Combobox", grp:"Forms", render:(L)=> <div style={{minHeight:230}}><ComboD L={L}/></div> },
-  { tier:"Molecule", name:"InputGroup", grp:"Forms", render:(L)=> has(InputGroup)?<div className="scol" style={{maxWidth:360}}><InputGroup prefix="https://" suffix=".world" defaultValue="cyberskill" clearable/><InputGroup password defaultValue="hunter2" placeholder={L==="vi"?"Mật khẩu":"Password"}/></div>:<Miss n="InputGroup"/> },
-  { tier:"Molecule", name:"TagInput", grp:"Forms", render:(L)=> has(TagInput)?<div style={{maxWidth:420}}><TagInput defaultValue={L==="vi"?["Ứng dụng web","Song ngữ"]:["Web apps","Bilingual"]}/></div>:<Miss n="TagInput"/> },
-  { tier:"Molecule", name:"HoverCard", grp:"Overlays", render:(L)=> has(HoverCard)?<div style={{minHeight:150}}><HoverCard trigger={<a href="#" onClick={(e)=>e.preventDefault()}>@anle</a>}><b>An Lê</b><br/>{L==="vi"?"Trưởng nhóm Nền tảng · Sài Gòn":"Platform lead · Saigon"}</HoverCard></div>:<Miss n="HoverCard"/> },
+  { tier:"Molecule", name:"InputGroup", grp:"Forms", render:(L)=> has(InputGroup)?<div className="scol" style={{maxWidth:360}}><InputGroup label={L==="vi"?"Máy chủ":"Host"} prefix="https://" suffix=".world" defaultValue="cyberskill" clearable/><InputGroup label={L==="vi"?"Mật khẩu":"Password"} password defaultValue="hunter2" placeholder={L==="vi"?"Mật khẩu":"Password"}/></div>:<Miss n="InputGroup"/> },
+  { tier:"Molecule", name:"TagInput", grp:"Forms", render:(L)=> has(TagInput)?<div style={{maxWidth:420}}><TagInput label={L==="vi"?"Thẻ":"Tags"} defaultValue={L==="vi"?["Ứng dụng web","Song ngữ"]:["Web apps","Bilingual"]}/></div>:<Miss n="TagInput"/> },
+  { tier:"Molecule", name:"HoverCard", grp:"Overlays", controls:[{k:"openDelay",type:"range",min:0,max:400,step:50,def:0}], renderC:(v)=> has(HoverCard)?<div style={{minHeight:150}}><HoverCard openDelay={+v.openDelay} closeDelay={99999} trigger={<button type="button" className="cs-button cs-button--ghost">@anle</button>}><b>An Lê</b><br/>Platform lead · Saigon</HoverCard></div>:<Miss n="HoverCard"/>, render:(L)=> has(HoverCard)?<div style={{minHeight:150}}><HoverCard trigger={<a href="#" onClick={(e)=>e.preventDefault()}>@anle</a>}><b>An Lê</b><br/>{L==="vi"?"Trưởng nhóm Nền tảng · Sài Gòn":"Platform lead · Saigon"}</HoverCard></div>:<Miss n="HoverCard"/> },
   { tier:"Molecule", name:"Popconfirm", grp:"Overlays", render:(L)=> has(Popconfirm,Button)?<div style={{minHeight:170}}><Popconfirm title={L==="vi"?"Xóa bản nháp này?":"Delete this draft?"} onConfirm={()=>{}} trigger={<Button variant="danger-ghost" size="sm">{L==="vi"?"Xóa":"Delete"}</Button>}/></div>:<Miss n="Popconfirm"/> },
   { tier:"Molecule", name:"ContextMenu", grp:"Overlays", render:(L)=> has(ContextMenu)?<ContextMenu items={L==="vi"?[{label:"Nhân bản"},{label:"Đổi tên"},"-",{label:"Xóa",danger:true}]:[{label:"Duplicate"},{label:"Rename"},"-",{label:"Delete",danger:true}]}><div style={{border:"1px dashed var(--cs-color-border-default)",borderRadius:"var(--cs-radius-md)",padding:"26px 18px",color:"var(--cs-color-text-muted)",fontSize:14,minHeight:120}}>{L==="vi"?"Nhấp chuột phải vào vùng này":"Right-click this zone"}</div></ContextMenu>:<Miss n="ContextMenu"/> },
   { tier:"Molecule", name:"FloatingActionButton", grp:"Core", render:(L)=> has(FloatingActionButton,Icon)?<FloatingActionButton position="static" icon={<Icon name="sparkle"/>} label={L==="vi"?"Ước một điều":"Make a wish"} actions={[{icon:<Icon name="chat" size="sm"/>,label:L==="vi"?"Trò chuyện với Lumi":"Talk to Lumi"},{icon:<Icon name="plus" size="sm"/>,label:L==="vi"?"Dự án mới":"New project"}]}/>:<Miss n="FloatingActionButton"/> },
   { tier:"Molecule", name:"InlineEdit", grp:"Forms", render:(L)=> has(InlineEdit)?<InlineEdit defaultValue="Design System v1.6" label={L==="vi"?"Tên dự án":"Project name"}/>:<Miss n="InlineEdit"/> },
   { tier:"Molecule", name:"Toolbar", grp:"Navigation", render:(L)=> has(Toolbar,Icon)?<Toolbar label="Editor" overflowAfter={3} items={L==="vi"?[{icon:<Icon name="edit" size="sm"/>,label:"Sửa"},{icon:<Icon name="copy" size="sm"/>,label:"Nhân bản"},"-",{icon:<Icon name="download" size="sm"/>,label:"Xuất"},{label:"Lưu trữ"},{label:"Xóa"}]:[{icon:<Icon name="edit" size="sm"/>,label:"Edit"},{icon:<Icon name="copy" size="sm"/>,label:"Duplicate"},"-",{icon:<Icon name="download" size="sm"/>,label:"Export"},{label:"Archive"},{label:"Delete"}]}/>:<Miss n="Toolbar"/> },
   { tier:"Molecule", name:"Image", grp:"Data", render:(L)=> has(Image)?<div className="srow"><Image src="../assets/aurora-gold.jpg" alt="Aurora" ratio="16/9" preview style={{width:260}}/><Image src="/broken.png" alt="" ratio="16/9" style={{width:180}}/></div>:<Miss n="Image"/> },
+  { tier:"Molecule", name:"ScrollArea", grp:"Data", controls:[{k:"maxHeight",type:"range",min:80,max:280,step:20,def:140}], renderC:(v)=> has(ScrollArea)?<ScrollArea maxHeight={v.maxHeight} aria-label="Notes" style={{border:"1px solid var(--cs-color-border-default)",maxWidth:360,padding:"8px 12px",fontSize:13,color:"var(--cs-color-text-muted)"}}><p>Release notes arrive bilingual.</p><p>Blocked alerts only when asked.</p><p>Weekly velocity every Monday.</p><p>Quiet by default.</p></ScrollArea>:<Miss n="ScrollArea"/>, render:(L)=> has(ScrollArea)?<ScrollArea maxHeight={140} aria-label={L==="vi"?"Ghi chú":"Notes"} style={{border:"1px solid var(--cs-color-border-default)",maxWidth:360,padding:"8px 12px",fontSize:13,color:"var(--cs-color-text-muted)"}}><p>{L==="vi"?"Ghi chú phát hành song ngữ.":"Release notes arrive bilingual."}</p><p>{L==="vi"?"Cảnh báo chỉ khi bạn yêu cầu.":"Blocked alerts only when asked."}</p><p>{L==="vi"?"Tóm tắt tốc độ mỗi thứ Hai.":"Weekly velocity every Monday."}</p><p>{L==="vi"?"Yên tĩnh theo mặc định.":"Quiet by default."}</p></ScrollArea>:<Miss n="ScrollArea"/> },
+  { tier:"Molecule", name:"Collapsible", grp:"Data", controls:[{k:"defaultOpen",type:"toggle",def:false}], renderC:(v)=> has(Collapsible)?<div style={{maxWidth:420}}><Collapsible title="Advanced preferences" defaultOpen={v.defaultOpen}><p style={{margin:0}}>Quiet by default — only what you opt into.</p></Collapsible></div>:<Miss n="Collapsible"/>, render:(L)=> has(Collapsible)?<div style={{maxWidth:420}}><Collapsible title={L==="vi"?"Tuỳ chọn nâng cao":"Advanced preferences"} defaultOpen={false}><p style={{margin:0}}>{L==="vi"?"Yên tĩnh theo mặc định — chỉ những gì bạn chọn.":"Quiet by default — only what you opt into."}</p></Collapsible></div>:<Miss n="Collapsible"/> },
   { tier:"Molecule", name:"Anchor", grp:"Navigation", render:(L)=> has(Anchor)?<Anchor title={L==="vi"?"Trên trang này":"On this page"} items={L==="vi"?[{id:"atoms",label:"Nguyên tử"},{id:"molecules",label:"Phân tử"},{id:"organisms",label:"Cơ quan"}]:[{id:"atoms",label:"Atoms"},{id:"molecules",label:"Molecules"},{id:"organisms",label:"Organisms"}]}/>:<Miss n="Anchor"/> },
-  { tier:"Molecule", name:"Tabs", grp:"Navigation", render:(L)=> <TabsD L={L}/> },
+  { tier:"Molecule", name:"Tabs", grp:"Navigation", controls:[{k:"value",type:"select",options:["a","b","c"],def:"a"}], renderC:(v)=> has(Tabs)?<Tabs value={v.value} onChange={()=>{}} tabs={[{label:"Overview",value:"a"},{label:"Releases",value:"b"},{label:"Settings",value:"c"}]}/>:<Miss n="Tabs"/>, render:(L)=> <TabsD L={L}/> },
   { tier:"Molecule", name:"Breadcrumb", grp:"Navigation", render:(L)=> has(Breadcrumb)?<Breadcrumb items={L==="vi"?[{label:"Trung tâm",href:"#"},{label:"Nền tảng",href:"#"},{label:"Design System v1.6"}]:[{label:"Status Hub",href:"#"},{label:"Platform",href:"#"},{label:"Design System v1.6"}]}/>:<Miss n="Breadcrumb"/> },
-  { tier:"Molecule", name:"Pagination", grp:"Navigation", render:()=> <PaginationD/> },
+  { tier:"Molecule", name:"Pagination", grp:"Navigation", controls:[{k:"page",type:"range",min:1,max:8,step:1,def:3}], renderC:(v)=> has(Pagination)?<Pagination page={+v.page} pageCount={8} onChange={()=>{}}/>:<Miss n="Pagination"/>, render:()=> <PaginationD/> },
   { tier:"Molecule", name:"Menu", grp:"Navigation", render:(L)=> has(Menu,MenuItem)?<Menu trigger={<button className="cs-button cs-button--secondary cs-button--sm">{L==="vi"?"Hành động ▾":"Actions ▾"}</button>}><MenuItem>{L==="vi"?"Nhân bản":"Duplicate"}</MenuItem><MenuItem>{L==="vi"?"Xuất EN + VN":"Export EN + VN"}</MenuItem><div className="cs-menu__sep"/><MenuItem danger>{L==="vi"?"Xóa":"Delete"}</MenuItem></Menu>:<Miss n="Menu"/> },
   { tier:"Molecule", name:"Stat", grp:"Data", controls:[{k:"label",type:"text",def:"Avg progress"},{k:"value",type:"text",def:"70%"},{k:"delta",type:"text",def:"+6"},{k:"trend",type:"select",options:["up","down","flat"],def:"up"}], renderC:(v)=> has(Stat)?<Stat label={v.label} value={v.value} delta={v.delta||undefined} trend={v.trend}/>:<Miss n="Stat"/>, render:(L)=> has(Stat)?<div className="srow" style={{gap:32}}><Stat label={L==="vi"?"Dự án":"Projects"} value="6"/><Stat label={L==="vi"?"Tiến độ TB":"Avg progress"} value="70%" delta="+6" trend="up"/><Stat label={L==="vi"?"Bị chặn":"Blocked"} value="1" delta="-1" trend="down"/></div>:<Miss n="Stat"/> },
   { tier:"Molecule", name:"Card", grp:"Data", controls:[{k:"title",type:"text",def:"Design System v1.6"},{k:"subtitle",type:"text",def:"Platform squad"},{k:"body",type:"text",def:"Liquid Glass bindings + 15 element packs."}], renderC:(v)=> has(Card,CardHeader,CardBody)?<div style={{maxWidth:360}}><Card><CardHeader title={v.title} subtitle={v.subtitle}/><CardBody>{v.body}</CardBody></Card></div>:<Miss n="Card"/>, render:(L)=> has(Card,CardHeader,CardBody,CardFooter)?<div style={{maxWidth:360}}><Card><CardHeader title="Design System v1.6" subtitle={L==="vi"?"Nhóm Nền tảng":"Platform squad"}/><CardBody>{L==="vi"?"Liên kết Liquid Glass + 15 gói Ngũ Hành, đã kiểm chứng.":"Liquid Glass bindings + 15 element packs, verified."}</CardBody><CardFooter>{has(Badge)&&<Badge variant="ochre">{L==="vi"?"Đang làm":"Now"}</Badge>}{has(AvatarGroup,Avatar)&&<AvatarGroup><Avatar name="An Le" size="sm"/><Avatar name="Bao Vu" size="sm"/></AvatarGroup>}</CardFooter></Card></div>:<Miss n="Card"/> },
@@ -267,7 +273,7 @@ const STORIES = [
   { tier:"Organism", name:"Tree", grp:"Data", render:(L)=> has(Tree)?<div style={{maxWidth:340}}><Tree defaultOpen nodes={L==="vi"?[{key:"p",label:"Nền tảng",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]:[{key:"p",label:"Platform",children:[{key:"ds",label:"Design System"},{key:"tok",label:"Token Pipeline"}]},{key:"ai",label:"AI",children:[{key:"lumi",label:"Lumi Genie"}]}]}/></div>:<Miss n="Tree"/> },
   { tier:"Molecule", name:"Watermark", grp:"Data", render:(L)=> has(Watermark)?<Watermark text={L==="vi"?"BẢN NHÁP":"DRAFT"}><div style={{border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-md)",padding:"30px 22px",maxWidth:420}}>{L==="vi"?"Nội dung tài liệu được đánh dấu bản nháp.":"Document content marked as a draft."}</div></Watermark>:<Miss n="Watermark"/> },
   { tier:"Molecule", name:"BackTop", grp:"Navigation", render:(L)=> has(BackTop)?<div style={{fontSize:13,color:"var(--cs-color-text-muted)"}}>{L==="vi"?"Cuộn trang để thấy nút ở góc phải dưới.":"Scroll the page — the button appears bottom-right."}<BackTop threshold={300}/></div>:<Miss n="BackTop"/> },
-  { tier:"Organism", name:"Menubar", grp:"Navigation", render:(L)=> has(Menubar)?<div style={{minHeight:180}}><Menubar menus={L==="vi"?[{label:"Tệp",items:[{label:"Mới"},{label:"Mở…"},"-",{label:"Xuất EN + VN"}]},{label:"Sửa",items:[{label:"Hoàn tác"},{label:"Làm lại"}]}]:[{label:"File",items:[{label:"New"},{label:"Open…"},"-",{label:"Export EN + VN"}]},{label:"Edit",items:[{label:"Undo"},{label:"Redo"}]}]}/></div>:<Miss n="Menubar"/> },
+  { tier:"Organism", name:"Menubar", grp:"Navigation", controls:[{k:"fileLabel",type:"text",def:"File"}], renderC:(v)=> has(Menubar)?<div style={{minHeight:180}}><Menubar menus={[{label:v.fileLabel,items:[{label:"New"},{label:"Open…"},"-",{label:"Export"}]},{label:"Edit",items:[{label:"Undo"},{label:"Redo"}]}]}/></div>:<Miss n="Menubar"/>, render:(L)=> has(Menubar)?<div style={{minHeight:180}}><Menubar menus={L==="vi"?[{label:"Tệp",items:[{label:"Mới"},{label:"Mở…"},"-",{label:"Xuất EN + VN"}]},{label:"Sửa",items:[{label:"Hoàn tác"},{label:"Làm lại"}]}]:[{label:"File",items:[{label:"New"},{label:"Open…"},"-",{label:"Export EN + VN"}]},{label:"Edit",items:[{label:"Undo"},{label:"Redo"}]}]}/></div>:<Miss n="Menubar"/> },
   { tier:"Organism", name:"NavigationMenu", grp:"Navigation", render:(L)=> has(NavigationMenu)?<div style={{minHeight:220}}><NavigationMenu items={L==="vi"?[{label:"Dịch vụ",panel:[{label:"Ứng dụng web & di động",desc:"Sản phẩm khách hàng dùng hằng ngày",href:"#"},{label:"Hệ thống nội bộ",desc:"Công cụ đội ngũ vận hành",href:"#"}]},{label:"Dự án",href:"#"},{label:"Tuyển dụng",href:"#"}]:[{label:"Services",panel:[{label:"Web & mobile apps",desc:"Products your customers reach for",href:"#"},{label:"Internal systems",desc:"The tools your team runs on",href:"#"}]},{label:"Work",href:"#"},{label:"Careers",href:"#"}]}/></div>:<Miss n="NavigationMenu"/> },
   { tier:"Organism", name:"Carousel", grp:"Data", render:(L)=> has(Carousel)?<div style={{maxWidth:460}}><Carousel label={L==="vi"?"Dự án":"Cases"}>{[1,2,3].map(n=><div key={n} style={{padding:"44px 24px",textAlign:"center",fontWeight:700}}>{(L==="vi"?"Trang ":"Slide ")+n}</div>)}</Carousel></div>:<Miss n="Carousel"/> },
   { tier:"Organism", name:"Comment", grp:"Data", render:(L)=> has(Comment,Avatar)?<div style={{maxWidth:460}}><Comment avatar={<Avatar name="An Le" size="sm"/>} author="An Lê" meta={L==="vi"?"2 giờ trước":"2h ago"} replies={<Comment avatar={<Avatar name="Bao Vu" size="sm"/>} author="Bảo Vũ" meta={L==="vi"?"1 giờ trước":"1h ago"}>{L==="vi"?"Đồng ý, giao tuần này.":"Agreed — shipping this week."}</Comment>}>{L==="vi"?"Trông ổn rồi — giao thôi.":"Looks good — ship it."}</Comment></div>:<Miss n="Comment"/> },
@@ -277,9 +283,10 @@ const STORIES = [
   { tier:"Organism", name:"Accordion", grp:"Data", controls:[{k:"allowMultiple",type:"toggle",def:false}], renderC:(v)=> has(Accordion)?<div style={{maxWidth:460}}><Accordion allowMultiple={v.allowMultiple} items={[{title:"What is a wish?",content:"A clear outcome stated in a sentence or two."},{title:"How fast do you reply?",content:"Within one business day."},{title:"Do you ship bilingual?",content:"Every deliverable ships EN + VN."}]}/></div>:<Miss n="Accordion"/>, render:(L)=> has(Accordion)?<div style={{maxWidth:460}}><Accordion items={L==="vi"?[{title:"Điều ước là gì?",content:"Một kết quả rõ ràng, nói trong một hai câu."},{title:"Bao lâu thì trả lời?",content:"Trong một ngày làm việc."},{title:"Có giao song ngữ không?",content:"Mọi sản phẩm đều giao EN + VN."}]:[{title:"What is a wish?",content:"A clear outcome stated in a sentence or two."},{title:"How fast do you reply?",content:"Within one business day."},{title:"Do you ship bilingual?",content:"Every deliverable ships EN + VN."}]}/></div>:<Miss n="Accordion"/> },
   { tier:"Organism", name:"Timeline", grp:"Data", render:(L)=> has(Timeline)?<div style={{maxWidth:420}}><Timeline items={L==="vi"?[{title:"v1.6.0",meta:"Tuần này",state:"now",body:"Liên kết Glass"},{title:"v1.5.1",meta:"04/07/2026",body:"15 gói Ngũ Hành"},{title:"v1.4.0",meta:"13/06/2026",body:"Liquid Glass trong mã"}]:[{title:"v1.6.0",meta:"This week",state:"now",body:"Glass bindings"},{title:"v1.5.1",meta:"04 Jul 2026",body:"15 element packs"},{title:"v1.4.0",meta:"13 Jun 2026",body:"Liquid Glass in code"}]}/></div>:<Miss n="Timeline"/> },
   { tier:"Organism", name:"EmptyState", grp:"Feedback", controls:[{k:"title",type:"text",def:"No projects yet"},{k:"body",type:"text",def:"Start by telling Lumi what you'd like to build."}], renderC:(v)=> has(EmptyState)?<div style={{border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-lg)"}}><EmptyState title={v.title}>{v.body}</EmptyState></div>:<Miss n="EmptyState"/>, render:(L)=> has(EmptyState)?<div style={{border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-lg)"}}><EmptyState title={L==="vi"?"Chưa có dự án nào":"No projects yet"} actions={has(Button)?<Button size="sm">{L==="vi"?"✦ Ước một điều":"✦ Make a wish"}</Button>:null}>{L==="vi"?"Hãy bắt đầu bằng cách nói với Lumi bạn muốn xây gì.":"Start by telling Lumi what you'd like to build."}</EmptyState></div>:<Miss n="EmptyState"/> },
-  { tier:"Organism", name:"Dialog", grp:"Overlays", framed:true, render:()=> has(Dialog,Button)?<Dialog open={true} title="Send your wish?" onClose={()=>{}} actions={<><Button variant="secondary">Not now</Button><Button>Send wish</Button></>}>A real person on the team replies within one business day.</Dialog>:<Miss n="Dialog"/> },
-  { tier:"Organism", name:"Drawer", grp:"Overlays", framed:true, render:(L)=> has(Drawer)?<Drawer open={true} onClose={()=>{}} title="Design System v1.6" actions={has(Button)?<Button size="sm">{L==="vi"?"Mở dự án":"Open project"}</Button>:null}>{has(Badge)&&<Badge variant="ochre">{L==="vi"?"Đang làm":"In progress"}</Badge>}<p style={{color:"var(--cs-color-text-muted)",fontSize:13}}>{L==="vi"?"Liên kết component Liquid Glass + 15 gói Ngũ Hành.":"Liquid Glass component bindings + 15 element packs."}</p>{has(DescriptionList)&&<DescriptionList items={L==="vi"?[{term:"Phụ trách",value:"An Lê"},{term:"Nhóm",value:"Nền tảng"}]:[{term:"Owner",value:"An Le"},{term:"Squad",value:"Platform"}]}/>}</Drawer>:<Miss n="Drawer"/> },
-  { tier:"Organism", name:"Popover", grp:"Overlays", framed:true, render:(L)=> has(Popover,Button,RadioGroup)?<div style={{padding:16}}><Popover open={true} onOpenChange={()=>{}} trigger={<Button variant="secondary" size="sm">{L==="vi"?"Lọc ▾":"Filter ▾"}</Button>}><RadioGroup legend={L==="vi"?"Trạng thái":"Status"} defaultValue="active" options={L==="vi"?[{value:"active",label:"Đang làm"},{value:"done",label:"Đã ra mắt"},{value:"hold",label:"Bị chặn"}]:[{value:"active",label:"In progress"},{value:"done",label:"Shipped"},{value:"hold",label:"Blocked"}]}/></Popover></div>:<Miss n="Popover"/> },
+  { tier:"Organism", name:"Dialog", grp:"Overlays", framed:true, controls:[{k:"title",type:"text",def:"Send your wish?"}], renderC:(v)=> has(Dialog,Button)?<Dialog open={true} title={v.title} onClose={()=>{}} actions={<><Button variant="secondary">Not now</Button><Button>Send wish</Button></>}>A real person on the team replies within one business day.</Dialog>:<Miss n="Dialog"/>, render:()=> has(Dialog,Button)?<Dialog open={true} title="Send your wish?" onClose={()=>{}} actions={<><Button variant="secondary">Not now</Button><Button>Send wish</Button></>}>A real person on the team replies within one business day.</Dialog>:<Miss n="Dialog"/> },
+  { tier:"Organism", name:"AlertDialog", grp:"Overlays", controls:[{k:"tone",type:"select",options:["default","destructive"],def:"destructive"}], renderC:(v)=> has(AlertDialog)?<div style={{minHeight:200}}><AlertDialog open title="Delete workspace?" description="Removes every project. This cannot be undone." tone={v.tone} onOpenChange={()=>{}}/></div>:<Miss n="AlertDialog"/>, render:(L)=> <div style={{minHeight:120}}><AlertDialogD L={L}/></div> },
+  { tier:"Organism", name:"Drawer", grp:"Overlays", framed:true, controls:[{k:"title",type:"text",def:"Design System v1.6"}], renderC:(v)=> has(Drawer,Button)?<Drawer open={true} onClose={()=>{}} title={v.title} actions={<Button size="sm">Open project</Button>}><p style={{color:"var(--cs-color-text-muted)",fontSize:13}}>Liquid Glass component bindings + 15 element packs.</p></Drawer>:<Miss n="Drawer"/>, render:(L)=> has(Drawer)?<Drawer open={true} onClose={()=>{}} title="Design System v1.6" actions={has(Button)?<Button size="sm">{L==="vi"?"Mở dự án":"Open project"}</Button>:null}>{has(Badge)&&<Badge variant="ochre">{L==="vi"?"Đang làm":"In progress"}</Badge>}<p style={{color:"var(--cs-color-text-muted)",fontSize:13}}>{L==="vi"?"Liên kết component Liquid Glass + 15 gói Ngũ Hành.":"Liquid Glass component bindings + 15 element packs."}</p>{has(DescriptionList)&&<DescriptionList items={L==="vi"?[{term:"Phụ trách",value:"An Lê"},{term:"Nhóm",value:"Nền tảng"}]:[{term:"Owner",value:"An Le"},{term:"Squad",value:"Platform"}]}/>}</Drawer>:<Miss n="Drawer"/> },
+  { tier:"Organism", name:"Popover", grp:"Overlays", framed:true, controls:[{k:"trigger",type:"text",def:"Filter ▾"}], renderC:(v)=> has(Popover,Button,RadioGroup)?<div style={{padding:16}}><Popover open={true} onOpenChange={()=>{}} trigger={<Button variant="secondary" size="sm">{v.trigger}</Button>}><RadioGroup legend="Status" defaultValue="active" options={[{value:"active",label:"In progress"},{value:"done",label:"Shipped"}]}/></Popover></div>:<Miss n="Popover"/>, render:(L)=> has(Popover,Button,RadioGroup)?<div style={{padding:16}}><Popover open={true} onOpenChange={()=>{}} trigger={<Button variant="secondary" size="sm">{L==="vi"?"Lọc ▾":"Filter ▾"}</Button>}><RadioGroup legend={L==="vi"?"Trạng thái":"Status"} defaultValue="active" options={L==="vi"?[{value:"active",label:"Đang làm"},{value:"done",label:"Đã ra mắt"},{value:"hold",label:"Bị chặn"}]:[{value:"active",label:"In progress"},{value:"done",label:"Shipped"},{value:"hold",label:"Blocked"}]}/></Popover></div>:<Miss n="Popover"/> },
   { tier:"Organism", name:"Conversation (PromptInput + ChatMessage)", grp:"AI-native", render:(L)=> has(ChatMessage)?<div style={{maxWidth:520}}><div className="cs-chat" style={{marginBottom:12}}><ChatMessage role="lumi">{L==="vi"?"Xin chào, mình là Lumi. Hãy nói điều ước của bạn — mình sẽ tư vấn thẳng thắn trước khi hỏi bất kỳ điều gì.":"Hello, I'm Lumi. Tell me a wish, and I'll share plain advice before asking for anything."}</ChatMessage><ChatMessage role="user">{L==="vi"?"Một trang thanh toán nhanh hơn.":"A faster checkout."}</ChatMessage><ChatMessage role="lumi">{L==="vi"?"Một điều ước đáng thực hiện — mình nên gọi bạn là gì?":"A wish worth granting — what should I call you?"}</ChatMessage></div><PromptD L={L}/></div>:<Miss n="ChatMessage"/> },
   { tier:"Organism", name:"HumanReviewGate", grp:"AI-native", controls:[{k:"risk",type:"text",def:"High-stakes · billing change"},{k:"summary",type:"text",def:"Move client to annual + prorated credit."},{k:"reviewer",type:"text",def:"Ops on call"}], renderC:(v)=> has(HumanReviewGate)?<div style={{maxWidth:520}}><HumanReviewGate risk={v.risk} summary={v.summary} reviewer={v.reviewer}/></div>:<Miss n="HumanReviewGate"/>, render:()=> has(HumanReviewGate)?<div style={{maxWidth:520}}><HumanReviewGate risk="High-stakes · billing change" summary="Lumi proposes moving this client to the annual plan and issuing a prorated credit." reviewer="Ops on call"/></div>:<Miss n="HumanReviewGate"/> },
 ];
@@ -290,11 +297,11 @@ const TIERS = [
   { id:"Organism", label:"Organisms", sub:"Composite, self-contained sections." },
 ];
 const ELEMENTS = [
-  ["tho|","Thổ · studio"],["tho|clay","Thổ · clay"],["tho|sand","Thổ · sand"],
-  ["hoa|","Hỏa · ember"],["hoa|lava","Hỏa · lava"],["hoa|plasma","Hỏa · plasma"],
-  ["thuy|","Thủy · river"],["thuy|ocean","Thủy · ocean"],["thuy|mist","Thủy · mist"],
-  ["moc|","Mộc · leaf"],["moc|bamboo","Mộc · bamboo"],["moc|forest","Mộc · forest"],
-  ["kim|","Kim · champagne"],["kim|steel","Kim · steel"],["kim|titanium","Kim · titanium"],
+  ["tho|","Thổ · studio (middle)"],["tho|sand","Thổ · sand (soft)"],["tho|clay","Thổ · clay (deep)"],
+  ["hoa|","Hỏa · ember (middle)"],["hoa|plasma","Hỏa · plasma (soft)"],["hoa|lava","Hỏa · lava (deep)"],
+  ["thuy|","Thủy · river (middle)"],["thuy|mist","Thủy · mist (soft)"],["thuy|ocean","Thủy · ocean (deep)"],
+  ["moc|","Mộc · leaf (middle)"],["moc|bamboo","Mộc · bamboo (soft)"],["moc|forest","Mộc · forest (deep)"],
+  ["kim|","Kim · champagne (middle)"],["kim|titanium","Kim · titanium (soft)"],["kim|steel","Kim · steel (deep)"],
 ];
 const LANGS = [["","Default"],["en","English"],["vi","Tiếng Việt"]];
 const PAGES = [
@@ -308,6 +315,7 @@ function applyAxis(ifr, ax){
   try{
     const d=ifr.contentDocument, h=d&&d.documentElement; if(!h) return;
     (ax.theme&&ax.theme!=="light")?h.setAttribute("data-theme",ax.theme):h.removeAttribute("data-theme");
+    if(ax.style) h.setAttribute("data-cs-style",ax.style); else h.setAttribute("data-cs-style","liquid-glass");
     ax.elm?h.setAttribute("data-cs-element",ax.elm):h.removeAttribute("data-cs-element");
     ax.elv?h.setAttribute("data-cs-variant",ax.elv):h.removeAttribute("data-cs-variant");
     if(ax.lang) h.setAttribute("lang", ax.lang);
@@ -350,6 +358,7 @@ const NM = window.__csNavModel || {};
 
 function App(){
   const [theme,setTheme]=useState("light");
+  const [style,setStyle]=useState("liquid-glass");
   const [el,setEl]=useState("tho|");
   const [lang,setLang]=useState("");
   const [collapsed,setCollapsed]=useState({Atom:false,Molecule:false,Organism:false,found:false,tpl:true,pages:true});
@@ -365,10 +374,11 @@ function App(){
   const [elm,elv]=el.split("|");
   const axis={};
   if(theme!=="light") axis["data-theme"]=theme;
+  if(style) axis["data-cs-style"]=style;
   if(elm) axis["data-cs-element"]=elm;
   if(elv) axis["data-cs-variant"]=elv;
   if(lang) axis.lang=lang;
-  const artifactAx={theme,elm,elv,lang};
+  const artifactAx={theme,style,elm,elv,lang};
   const shownTpls=tpls.filter(t=>!nq||t.name.toLowerCase().includes(nq)||(NM.classifyTemplate&&NM.classifyTemplate(t.name).toLowerCase().includes(nq)));
   const tplGroups=(NM.groupTemplates||((xs)=>[{category:"All",items:xs}]))(shownTpls);
   const shownPages=PAGES.filter(t=>!nq||t.name.toLowerCase().includes(nq));
@@ -440,11 +450,14 @@ function App(){
         <div className="toolbar" data-chrome="atomic-toolbar">
           <h1>CyberSkill · Components</h1>
           <label className="ctl">Theme
-            <select value={theme} onChange={(e)=>setTheme(e.target.value)}><option value="light">Light</option><option value="dark">Dark</option></select>
+            <select value={theme} onChange={(e)=>setTheme(e.target.value)}><option value="light">Light</option><option value="dark">Dark</option><option value="system">System</option></select>
           </label>
           <label className="ctl">Element
             <select value={el} onChange={(e)=>setEl(e.target.value)}>{ELEMENTS.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>
           </label>
+          <label className="ctl">Style
+            <select value={style} onChange={(e)=>setStyle(e.target.value)}><option value="liquid-glass">Liquid glass</option></select>
+          </label>
           <label className="ctl">Language
             <select value={lang} onChange={(e)=>setLang(e.target.value)}>{LANGS.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>
           </label>

package/guidelines/elements-geometry.html

@@ -0,0 +1,69 @@
+<!-- @dsCard group="Elements" viewport="1280x720" name="Geometry · 30 sets" subtitle="Soft / middle / deep × light/dark — shared intensity · hue-locked themes" -->
+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8">
+<link rel="stylesheet" href="../styles.css">
+<style>
+body{margin:0;background:var(--cs-color-surface-page);width:1280px;height:720px;overflow:hidden;box-sizing:border-box;padding:22px 28px;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary)}
+h1{font-size:18px;margin:0 0 4px;font-weight:800;letter-spacing:-0.01em}
+.sub{font-size:12px;color:var(--cs-color-text-muted);margin:0 0 14px}
+.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
+.el{font-weight:800;font-size:12px;margin-bottom:6px}
+.card{border:1px solid var(--cs-color-border-default);border-radius:10px;overflow:hidden;background:var(--cs-color-surface-panel)}
+.row{display:grid;grid-template-columns:1fr 1fr;min-height:88px}
+.cell{padding:8px 10px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}
+.cell.dark{background:#221710;color:#f5ead9}
+.slot{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;opacity:0.75}
+.sw{height:18px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08)}
+.meta{font-size:10px;font-family:var(--cs-font-family-mono);opacity:0.85}
+.cta{display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 10px;border-radius:6px;font-size:11px;font-weight:700}
+footer{margin-top:12px;font-size:11px;color:var(--cs-color-text-muted)}
+</style></head>
+<body>
+<h1>Element geometry — 30 colour sets</h1>
+<p class="sub">Thirty default colour sets (5 × soft/middle/deep × light/dark) — whole-set specimen, not a spot check. Soft is a washed pastel, middle the synced default, deep a clearly darker sibling in the same hue family; role ramps stay harmonious; theme flip keeps hue identity. Seeds: <code>tokens/element-seeds.json</code> · gate: <code>_audit/element-geometry.html</code>.</p>
+<div class="grid" id="grid"></div>
+<footer>Gate: <code>_audit/element-geometry.html</code> · Generate: <code>npm run tokens:elements</code> · Text never on mid-tone <code>-accent</code></footer>
+<script type="module">
+const ORDER = [
+  ['tho','Thổ',[['sand','soft'],[null,'middle'],['clay','deep']]],
+  ['hoa','Hỏa',[['plasma','soft'],[null,'middle'],['lava','deep']]],
+  ['thuy','Thủy',[['mist','soft'],[null,'middle'],['ocean','deep']]],
+  ['moc','Mộc',[['bamboo','soft'],[null,'middle'],['forest','deep']]],
+  ['kim','Kim',[['titanium','soft'],[null,'middle'],['steel','deep']]],
+];
+const grid = document.getElementById('grid');
+for (const [el, label, slots] of ORDER) {
+  const col = document.createElement('div');
+  col.innerHTML = `<div class="el">${label}</div>`;
+  for (const [va, slot] of slots) {
+    const card = document.createElement('div');
+    card.className = 'card';
+    card.style.marginBottom = '8px';
+    const mk = (dark) => {
+      const wrap = document.createElement('div');
+      wrap.className = 'cell' + (dark ? ' dark' : '');
+      if (el) wrap.setAttribute('data-cs-element', el);
+      if (va) wrap.setAttribute('data-cs-variant', va);
+      if (dark) wrap.setAttribute('data-theme', 'dark');
+      wrap.innerHTML = `
+        <div>
+          <div class="slot">${slot} · ${dark ? 'dark' : 'light'}${va ? ' · ' + va : ' · default'}</div>
+          <div class="sw" style="background:var(--cs-accent);margin-top:6px"></div>
+        </div>
+        <div style="display:flex;gap:6px;align-items:center;justify-content:space-between">
+          <span class="cta" style="background:var(--cs-accent-strong);color:var(--cs-accent-on)">CTA</span>
+          <span class="meta" style="color:var(--cs-color-text-accent)">Aa</span>
+        </div>`;
+      return wrap;
+    };
+    const row = document.createElement('div');
+    row.className = 'row';
+    row.appendChild(mk(false));
+    row.appendChild(mk(true));
+    card.appendChild(row);
+    col.appendChild(card);
+  }
+  grid.appendChild(col);
+}
+</script>
+</body></html>

package/guidelines/elements-variants.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Elements" viewport="1280x560" name="Variants & washes" subtitle="12 variants inside 5 oklch envelopes · each element's aurora wash · Lumi stays golden in every element" -->
+<!-- @dsCard group="Elements" viewport="1280x560" name="Variants & washes" subtitle="Soft / middle / deep names · aurora washes · live packs from element-seeds (see Geometry · 30 sets)" -->
 <!DOCTYPE html>
 <html lang="en"><head><meta charset="utf-8">
 <link rel="stylesheet" href="../styles.css">
@@ -18,25 +18,25 @@ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
 <body>
 <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px">
   <div class="col"><div class="el">Mộc · Wood</div>
-    <div class="v"><span class="sw" style="background:#7A9B57"></span><div><div class="vn">leaf ·default</div><div class="vx">#7A9B57</div></div></div>
-    <div class="v"><span class="sw" style="background:#A9C177"></span><div><div class="vn">bamboo</div><div class="vx">#A9C177</div></div></div>
-    <div class="v"><span class="sw" style="background:#3E5A2E"></span><div><div class="vn">forest</div><div class="vx">#3E5A2E</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#ADD386"></span><div><div class="vn">leaf ·middle</div><div class="vx">#ADD386</div></div></div>
+    <div class="v"><span class="sw" style="background:#C7E2AC"></span><div><div class="vn">bamboo</div><div class="vx">#C7E2AC</div></div></div>
+    <div class="v"><span class="sw" style="background:#668643"></span><div><div class="vn">forest</div><div class="vx">#668643</div></div></div></div>
   <div class="col"><div class="el">Hỏa · Fire</div>
-    <div class="v"><span class="sw" style="background:#E0632B"></span><div><div class="vn">ember ·default</div><div class="vx">#E0632B</div></div></div>
-    <div class="v"><span class="sw" style="background:#C43D1F"></span><div><div class="vn">lava</div><div class="vx">#C43D1F</div></div></div>
-    <div class="v"><span class="sw" style="background:#E8506E"></span><div><div class="vn">plasma</div><div class="vx">#E8506E</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#FFAD8E"></span><div><div class="vn">ember ·middle</div><div class="vx">#FFAD8E</div></div></div>
+    <div class="v"><span class="sw" style="background:#BB5A32"></span><div><div class="vn">lava</div><div class="vx">#BB5A32</div></div></div>
+    <div class="v"><span class="sw" style="background:#FFC7CC"></span><div><div class="vn">plasma</div><div class="vx">#FFC7CC</div></div></div></div>
   <div class="col" style="outline:2px solid var(--cs-color-brand-ochre);outline-offset:2px"><div class="el">Thổ · Earth</div>
-    <div class="v"><span class="sw" style="background:#F4BA17"></span><div><div class="vn">ochre ·studio</div><div class="vx">#F4BA17</div></div></div>
-    <div class="v"><span class="sw" style="background:#C77B4A"></span><div><div class="vn">clay</div><div class="vx">#C77B4A</div></div></div>
-    <div class="v"><span class="sw" style="background:#E4C98F"></span><div><div class="vn">sand</div><div class="vx">#E4C98F</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#F4BA17"></span><div><div class="vn">ochre ·middle</div><div class="vx">#F4BA17</div></div></div>
+    <div class="v"><span class="sw" style="background:#98741A"></span><div><div class="vn">clay</div><div class="vx">#98741A</div></div></div>
+    <div class="v"><span class="sw" style="background:#F6D389"></span><div><div class="vn">sand</div><div class="vx">#F6D389</div></div></div></div>
   <div class="col"><div class="el">Kim · Metal</div>
-    <div class="v"><span class="sw" style="background:#BFB29B"></span><div><div class="vn">champagne ·default</div><div class="vx">#BFB29B</div></div></div>
-    <div class="v"><span class="sw" style="background:#9FA3A3"></span><div><div class="vn">steel</div><div class="vx">#9FA3A3</div></div></div>
-    <div class="v"><span class="sw" style="background:#8A7F72"></span><div><div class="vn">titanium</div><div class="vx">#8A7F72</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#D1C2A8"></span><div><div class="vn">champagne ·middle</div><div class="vx">#D1C2A8</div></div></div>
+    <div class="v"><span class="sw" style="background:#707D7E"></span><div><div class="vn">steel</div><div class="vx">#707D7E</div></div></div>
+    <div class="v"><span class="sw" style="background:#E1D6C3"></span><div><div class="vn">titanium</div><div class="vx">#E1D6C3</div></div></div></div>
   <div class="col"><div class="el">Thủy · Water</div>
-    <div class="v"><span class="sw" style="background:#4E8E9B"></span><div><div class="vn">river ·default</div><div class="vx">#4E8E9B</div></div></div>
-    <div class="v"><span class="sw" style="background:#2E5E7E"></span><div><div class="vn">ocean</div><div class="vx">#2E5E7E</div></div></div>
-    <div class="v"><span class="sw" style="background:#A7C4C9"></span><div><div class="vn">mist</div><div class="vx">#A7C4C9</div></div></div></div>
+    <div class="v"><span class="sw" style="background:#87D2E1"></span><div><div class="vn">river ·middle</div><div class="vx">#87D2E1</div></div></div>
+    <div class="v"><span class="sw" style="background:#428693"></span><div><div class="vn">ocean</div><div class="vx">#428693</div></div></div>
+    <div class="v"><span class="sw" style="background:#AEE2ED"></span><div><div class="vn">mist</div><div class="vx">#AEE2ED</div></div></div></div>
 </div>
 <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px">
   <div class="wash"><img src="../assets/aurora-moc.png" alt="Mộc aurora wash"><span class="wl">Mộc</span></div>
@@ -45,5 +45,5 @@ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
   <div class="wash"><img src="../assets/aurora-kim.png" alt="Kim aurora wash"><span class="wl">Kim</span></div>
   <div class="wash"><img src="../assets/aurora-thuy.png" alt="Thủy aurora wash"><span class="wl">Thủy</span></div>
 </div>
-<footer style="display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--cs-color-text-muted);align-items:center"><b style="color:var(--cs-color-text-primary)">Rules</b><span>A variant is a point inside its element's oklch envelope — same 9-token contract</span><span>·</span><span>Washes apply via .cs-aurora-wash</span><span>·</span><span><b style="color:var(--cs-color-text-primary)">Lumi stays golden</b> — only the environment re-tints</span></footer>
+<footer style="display:flex;gap:16px;margin-top:14px;font-size:12px;color:var(--cs-color-text-muted);align-items:center"><b style="color:var(--cs-color-text-primary)">Rules</b><span>Slots soft · middle · deep share intensity across elements — same 9-token contract (generated)</span><span>·</span><span>Washes apply via .cs-aurora-wash</span><span>·</span><span><b style="color:var(--cs-color-text-primary)">Lumi stays golden</b> — only the environment re-tints</span></footer>
 </body></html>

package/guidelines/type-families.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Type" viewport="700x230" name="Typefaces" subtitle="Be Vietnam Pro (UI) · JetBrains Mono (code)" -->
+<!-- @dsCard group="Type" viewport="700x330" name="Typefaces" subtitle="Be Vietnam Pro (UI) · Space Grotesk (display) · JetBrains Mono (code)" -->
 <!DOCTYPE html>
 <html lang="en"><head><meta charset="utf-8" />
 <link rel="stylesheet" href="../styles.css" />
@@ -7,19 +7,25 @@
   .fam { margin-bottom: 18px; }
   .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 6px; }
   .ui { font-family: var(--cs-font-family-ui); }
-  .mono { font-family: var(--cs-font-family-mono); }
-  .big { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
-  .set { font-size: 15px; color: var(--cs-color-text-muted); margin-top: 2px; }
+  .cs-type-display { font-family: var(--cs-font-family-display); }
+  .cs-type-mono { font-family: var(--cs-font-family-mono); }
+  .cs-type-big { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
+  .cs-type-set { font-size: 15px; color: var(--cs-color-text-muted); margin-top: 2px; }
 </style></head>
 <body>
 <div class="fam">
-  <div class="k">Be Vietnam Pro — UI / display</div>
-  <div class="ui big">Turn Your Will Into Real</div>
-  <div class="ui set">Hiện Thực Hoá Ý Chí · 300 400 500 600 700 800 · full Vietnamese diacritics</div>
+  <div class="k">Be Vietnam Pro — UI (--cs-font-family-ui)</div>
+  <div class="ui cs-type-big">Turn Your Will Into Real</div>
+  <div class="ui cs-type-set">Hiện Thực Hoá Ý Chí · 300 400 500 600 700 800 · full Vietnamese diacritics</div>
+</div>
+<div class="fam">
+  <div class="k">Space Grotesk — display / headline (--cs-font-family-display)</div>
+  <div class="cs-type-display cs-type-big">Turn Your Will Into Real</div>
+  <div class="cs-type-display cs-type-set">Hiện Thực Hoá Ý Chí · variable 300–700 · Vietnamese subset · opt-in via <span class="cs-type-mono">.cs-display-face</span></div>
 </div>
 <div class="fam" style="margin-bottom:0">
-  <div class="k">JetBrains Mono — code / data</div>
-  <div class="mono big" style="font-size:24px">--cs-color-brand-ochre</div>
-  <div class="mono set">0123456789 · v1.5.1 · {} =&gt; () · 400 500 700</div>
+  <div class="k">JetBrains Mono — code / data (--cs-font-family-mono)</div>
+  <div class="cs-type-mono cs-type-big" style="font-size:24px">--cs-color-brand-ochre</div>
+  <div class="cs-type-mono cs-type-set">0123456789 · v1.5.1 · {} =&gt; () · 400 500 700</div>
 </div>
 </body></html>