@cyberskill/design 1.1.1 → 1.3.8

package/fonts/OFL.txt

@@ -0,0 +1,98 @@
+Copyright notices for Font Software redistributed in fonts/:
+
+Copyright 2021 The Be Vietnam Pro Project Authors (https://github.com/bettergui/BeVietnamPro),
+
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/guidelines/atomic-view.html

@@ -77,9 +77,9 @@
   @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/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="../_vendor/react/react.production.min.js"></script>
+<script src="../_vendor/react/react-dom.production.min.js"></script>
+<script src="../_vendor/babel/babel.min.js"></script>
 <script src="../_ds_bundle.js"></script>
 </head>
 <body>
@@ -92,7 +92,7 @@ const {
   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, ScrollArea, AspectRatio, Item,
-  List, ListItem, DescriptionList, Timeline, Accordion, Collapsible, Kbd, CodeBlock, Dialog, Drawer, Popover, AlertDialog,
+  List, ListItem, DescriptionList, Timeline, Accordion, Collapsible, Kbd, CodeBlock, Dialog, Drawer, Popover, AlertDialog, OverlayProvider,
   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,
@@ -133,8 +133,10 @@ function CalD({L}){ const [d,setD]=useState(()=>new Date(2026,6,18)); return has
 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 DialogDemo({title,startOpen=false}){ const [on,setOn]=useState(!!startOpen); return <div><Button size="sm" onClick={()=>setOn(true)}>Open dialog</Button><Dialog open={on} title={title} onClose={()=>setOn(false)} actions={<><Button variant="secondary" onClick={()=>setOn(false)}>Not now</Button><Button onClick={()=>setOn(false)}>Send wish</Button></>}>A real person on the team replies within one business day.</Dialog></div>; }
+function DrawerDemo({title,L,startOpen=false}){ const [on,setOn]=useState(!!startOpen); const V=L==="vi"; return <div><Button size="sm" variant="secondary" onClick={()=>setOn(true)}>{V?"Mở ngăn kéo":"Open drawer"}</Button><Drawer open={on} onClose={()=>setOn(false)} title={title} actions={has(Button)?<Button size="sm">{V?"Mở dự án":"Open project"}</Button>:null}>{has(Badge)&&<Badge variant="ochre">{V?"Đang làm":"In progress"}</Badge>}<p style={{color:"var(--cs-color-text-muted)",fontSize:13}}>{V?"Liên kết component Liquid Glass + 15 gói Ngũ Hành.":"Liquid Glass component bindings + 15 element packs."}</p></Drawer></div>; }
 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 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 lang={L} 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"/>; }
 function CascD({L}){ const [p,setP]=useState(["hcm","d1"]); return has(Cascader)?<Cascader value={p} onChange={setP} nodes={[{key:"hcm",label:"TP.HCM",children:[{key:"d1",label:L==="vi"?"Quận 1":"District 1"},{key:"d3",label:L==="vi"?"Quận 3":"District 3"}]},{key:"hn",label:L==="vi"?"Hà Nội":"Hanoi",children:[{key:"hk",label:L==="vi"?"Hoàn Kiếm":"Hoan Kiem"}]}]}/>:<Miss n="Cascader"/>; }
 function TransD({L}){ const [v,setV]=useState(["web"]); return has(Transfer)?<Transfer value={v} onChange={setV} items={L==="vi"?[{key:"web",label:"Ứng dụng web"},{key:"mob",label:"Ứng dụng di động"},{key:"auto",label:"Tự động hóa"},{key:"ds",label:"Design system"}]:[{key:"web",label:"Web apps"},{key:"mob",label:"Mobile apps"},{key:"auto",label:"Automation"},{key:"ds",label:"Design systems"}]}/>:<Miss n="Transfer"/>; }
@@ -268,7 +270,7 @@ const STORIES = [
   { tier:"Organism", name:"TreeSelect", grp:"Forms", render:(L)=> <div style={{minHeight:260}}><TreeSelD L={L}/></div> },
   { tier:"Organism", name:"Cascader", grp:"Forms", render:(L)=> <div style={{minHeight:240}}><CascD L={L}/></div> },
   { tier:"Organism", name:"Transfer", grp:"Forms", render:(L)=> <TransD L={L}/> },
-  { tier:"Molecule", name:"Mentions", grp:"Forms", render:(L)=> has(Mentions)?<Mentions users={["anle","baovu","lumi"]} defaultValue={L==="vi"?"Cảm ơn @":"Thanks @"} rows={2}/>:<Miss n="Mentions"/> },
+  { tier:"Molecule", name:"Mentions", grp:"Forms", render:(L)=> has(Mentions)?<Mentions lang={L} users={["anle","baovu","lumi"]} defaultValue={L==="vi"?"Cảm ơn @":"Thanks @"} rows={2}/>:<Miss n="Mentions"/> },
   { tier:"Organism", name:"Form + FormField", grp:"Forms", render:(L)=> has(Form,FormField,Button)?<div style={{maxWidth:420}}><Form onSubmit={()=>{}} errors={{email:L==="vi"?"Nhập email hợp lệ.":"Enter a valid email."}}><FormField label={L==="vi"?"Email công việc":"Work email"} required error={L==="vi"?"Nhập email hợp lệ.":"Enter a valid email."}><input name="email" className="cs-field__control" defaultValue="not-an-email"/></FormField><FormField label={L==="vi"?"Công ty":"Company"} hint={L==="vi"?"Không bắt buộc":"Optional"}><input name="company" className="cs-field__control"/></FormField><Button type="submit" size="sm">{L==="vi"?"Gửi":"Send"}</Button></Form></div>:<Miss n="Form"/> },
   { 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"/> },
@@ -283,9 +285,11 @@ 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, 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:"Dialog", grp:"Overlays", framed:true, controls:[{k:"title",type:"text",def:"Send your wish?"},{k:"open",type:"toggle",def:false}], renderC:(v)=> has(Dialog,Button)?<div><Dialog open={!!v.open} 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></div>:<Miss n="Dialog"/>, render:()=> has(Dialog,Button)?<DialogDemo title="Send your wish?" startOpen={false}/>:<Miss n="Dialog"/> },
+  { tier:"Organism", name:"AlertDialog", grp:"Overlays", framed:true, controls:[{k:"tone",type:"select",options:["default","destructive"],def:"destructive"},{k:"open",type:"toggle",def:false}], renderC:(v)=> has(AlertDialog)?<div style={{minHeight:200}}><AlertDialog open={!!v.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"},{k:"open",type:"toggle",def:false}], renderC:(v)=> has(Drawer,Button)?<div><Drawer open={!!v.open} onClose={()=>{}} title={v.title} actions={has(Button)?<Button size="sm">Open project</Button>:null}><p style={{color:"var(--cs-color-text-muted)",fontSize:13}}>Liquid Glass component bindings + 15 element packs.</p></Drawer></div>:<Miss n="Drawer"/>, render:(L)=> has(Drawer,Button)?<DrawerDemo title="Design System v1.6" L={L} startOpen={false}/>:<Miss n="Drawer"/> },
+  { tier:"Organism", name:"OverlayProvider", grp:"Overlays", framed:true, render:(L)=> has(OverlayProvider,Dialog,Button)?<OverlayProvider><p style={{fontSize:13,color:"var(--cs-color-text-muted)",maxInlineSize:"var(--cs-prose-measure,45rem)"}}>{L==="vi"?"Provider gắn #cs-overlay-root và xếp chồng Escape/scroll-lock cho modal lồng nhau.":"Provider mounts #cs-overlay-root and stacks Escape/scroll-lock for nested modals."}</p><DialogDemo title="Nested-safe dialog" startOpen={false}/></OverlayProvider>:<Miss n="OverlayProvider"/> },
+
   { 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"/> },

package/guidelines/brand-imagery.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="../styles.css" />
 <style>
   body { margin: 0; font-family: var(--cs-font-family-ui); }
-  .stage { position: relative; min-height: 260px; background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; overflow: hidden; }
+  .stage { position: relative; min-height: 260px; background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; overflow: hidden; }
   .lumi { position: absolute; right: 34px; bottom: -6px; height: 250px; filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }
   .copy { position: absolute; left: 26px; top: 24px; max-width: 340px; color: #fff; }
   .k { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-brand-ochre); }

package/guidelines/elements-variants.html

@@ -39,11 +39,11 @@ a{color:var(--cs-color-link)}a:hover{color:var(--cs-color-link-hover)}
     <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>
-  <div class="wash"><img src="../assets/aurora-hoa.png" alt="Hỏa aurora wash"><span class="wl">Hỏa</span></div>
-  <div class="wash"><img src="../assets/aurora-gold.jpg" alt="Thổ aurora wash (official gold)"><span class="wl">Thổ · official</span></div>
-  <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 class="wash"><img src="../assets/aurora-moc.webp" alt="Mộc aurora wash"><span class="wl">Mộc</span></div>
+  <div class="wash"><img src="../assets/aurora-hoa.webp" alt="Hỏa aurora wash"><span class="wl">Hỏa</span></div>
+  <div class="wash"><img src="../assets/aurora-tho.webp" alt="Thổ aurora wash (official gold)"><span class="wl">Thổ · official</span></div>
+  <div class="wash"><img src="../assets/aurora-kim.webp" alt="Kim aurora wash"><span class="wl">Kim</span></div>
+  <div class="wash"><img src="../assets/aurora-thuy.webp" 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>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/spacing-breakpoints.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Spacing" viewport="700x150" name="Breakpoints" subtitle="Mobile-first · sm → 2xl" -->
+<!-- @dsCard group="Spacing" viewport="700x150" name="Breakpoints" subtitle="Mobile-first · phone → 2xl" -->
 <!DOCTYPE html>
 <html lang="en"><head><meta charset="utf-8" />
 <link rel="stylesheet" href="../styles.css" />
@@ -11,6 +11,7 @@
 </style></head>
 <body>
 <div class="row">
+  <div class="bp"><div class="n">phone</div><div class="v">360</div></div>
   <div class="bp"><div class="n">sm</div><div class="v">640</div></div>
   <div class="bp"><div class="n">md</div><div class="v">768</div></div>
   <div class="bp"><div class="n">lg</div><div class="v">1024</div></div>

package/guidelines/surfaces-glass.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" href="../styles.css" />
 <style>
   body { margin: 0; padding: 0; font-family: var(--cs-font-family-ui); }
-  .stage { position: relative; min-height: 230px; background-image: url("../assets/aurora-gold.jpg"); background-size: cover; background-position: center; padding: 22px 24px; display: flex; gap: 14px; align-items: center; }
+  .stage { position: relative; min-height: 230px; background-image: url("../assets/aurora-tho.webp"); background-size: cover; background-position: center; padding: 22px 24px; display: flex; gap: 14px; align-items: center; }
   .m { flex: 1; border-radius: var(--cs-radius-lg); padding: 16px 14px; min-height: 128px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--cs-color-text-primary); }
   .nm { font-weight: 700; font-size: 14px; }
   .d { font-size: 12px; color: var(--cs-color-text-muted); margin-top: 3px; }

package/llms.txt

@@ -1,6 +1,6 @@
 # CyberSkill Design System
 
-> HTML-first, Vietnamese-first design system, LAUNCHED **v1.1.0**; current **v1.1.1**. Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 105 components / 121 exports, 84 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each audience to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.1.1**, no CHANGELOG.
+> HTML-first, Vietnamese-first design system, LAUNCHED **v1.1.0**; current **v1.3.8**. Immutable anchors: Umber #45210E · Ochre #F4BA17. Four independent axes — Theme (light · dark · system) × Element (Ngũ Hành, 15 variants) × Language (EN · VI) × Style (`data-cs-style` — sole pack **liquid-glass**; absent ≡ default). It ships 106 components / 122 exports, 84 copyable templates (EN·VN for emails + team/legal/finance; client/media collateral EN-first), and tokens in CSS + JSON + ESM + W3C DTCG + native mirrors. This file is the agent/tool front door: it maps each audience to the format it should consume. npm package name is **`@cyberskill/design`** (not `@cyberskill/react`). Release signal: tip SHA + [docs/release-notes.md](docs/release-notes.md) — VERSION **1.3.8**, no CHANGELOG.
 
 The portable contract covers browser and bundler entry points: `styles.css` · `_esm/cs.mjs` legacy · `_ds_bundle.js` · tokens work without a build step; `_esm/react.mjs` is bundler-native JSX (Next/Vite must transpile — not a bare-browser import). The DC layer (`templates/**/*.dc.html`) is **Claude Design / authoring-environment-only**. **Google Stitch must not treat `*.dc.html` as source of truth** — use `DESIGN.md`, DTCG, `styles.css`, kitchen-sink, and `.cs-*` static HTML instead. Dual path: [docs/consuming.md](docs/consuming.md). The full non-negotiables list lives in `CONTRIBUTING.md` and `docs/conventions.md`.
 
@@ -24,11 +24,11 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [_esm/cs.mjs](_esm/cs.mjs): browser / no-build legacy ESM entry (`@cyberskill/design/legacy`)
 - [tokens/](tokens/): design tokens as CSS custom properties + `tokens.json` / `tokens.js` / `tokens.dtcg.json` (W3C DTCG) + `viewer.html` (table + raw modes) + `native/` (SwiftUI/Compose/Flutter)
 - [base/](base/): reset, component classes (`.cs-*`), a11y, responsive, glass
-- [components/](components/): 105 components / 121 exports — every primary ships `.jsx` + `.d.ts` + `.prompt.md` + a `@dsCard` card; co-exports are documented in their parent's files
+- [components/](components/): 106 components / 122 exports — every primary ships `.jsx` + `.d.ts` + `.prompt.md` + a `@dsCard` card; co-exports are documented in their parent's files
 - [templates/](templates/): 84 copyable starting points (`.dc.html`); `email-safe/` send-ready emails; `kitchen-sink.html`; `playground.html`
 - [guidelines/](guidelines/): specimen cards + `atomic-view.html` (portable component grid) — host product surface is Storybook at `/`
 - [examples/static-hello/](examples/static-hello/): zero-install static consumer (Stitch / plain HTML)
-- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.1.1` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
+- [examples/npm-hello/](examples/npm-hello/): first registry **browser** consumer — `@cyberskill/design@1.3.8` legacy entry (Lumi · Hỏa · plasma); Status Hub teams swap to `thuy`; Next/SSR apps use default `@cyberskill/design` React entry instead
 - [examples/native/](examples/native/): SwiftUI / Compose / Flutter sample apps + store scaffolds — Compose is **Android Studio**-first (no committed `gradlew`; see `examples/native/README.md`)
 - [ui_kits/](ui_kits/): product recreations — status-hub · website · deck
 - [fonts/](fonts/): self-hosted Be Vietnam Pro (UI) + Space Grotesk (opt-in display, `--cs-font-family-display`) + JetBrains Mono woff2
@@ -37,12 +37,12 @@ The portable contract covers browser and bundler entry points: `styles.css` · `
 - [DESIGN.md](DESIGN.md): generated open-spec surface (doctrine + tokens + inventory) for Stitch-style consumers — pinned to DTCG by the design-md-parity gate
 - [SKILL.md](SKILL.md): agent entry — hard rules + fast orientation
 - [CONTRIBUTING.md](CONTRIBUTING.md): one-page onboarding for extending the system
-- [VERSION](VERSION): pinned 1.1.1 (matches [package.json](package.json))
+- [VERSION](VERSION): pinned 1.3.8 (matches [package.json](package.json))
 
 ## Docs — consumers
 
 - [docs/consuming.md](docs/consuming.md): adopting & upgrading, Claude Code vs Stitch dual path, package name `@cyberskill/design`; first registry install at [examples/npm-hello/](examples/npm-hello/) (Lumi · Hỏa · plasma); native mirrors at [examples/native/](examples/native/) (SwiftUI / Compose / Flutter samples)
-- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.1.1` Trusted Publishing / grant pointer
+- [docs/release-notes.md](docs/release-notes.md): curated product highlights (not a changelog) — includes `@cyberskill/design@1.3.8` Trusted Publishing / grant pointer
 - [docs/consumer-grant.md](docs/consumer-grant.md): written npm grant (CyberSkill portfolio; UNLICENSED)
 - [docs/conventions.md](docs/conventions.md): authoring rules (naming grammar, the four axes)
 - [docs/design-styles.md](docs/design-styles.md): the live styling axes and the fixed liquid-glass treatment

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@cyberskill/design",
-  "version": "1.1.1",
+  "version": "1.3.8",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/cyberskill-official/design-system.git"
+    "url": "git+https://github.com/cyberskill-official/design.git"
   },
   "module": "_esm/react.mjs",
   "types": "_esm/react.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "./_ds_bundle.js",
+    "./_esm/cs.mjs",
+    "./image-slot.js",
+    "./ui_kits/**/*.js",
+    "./ui_kits/**/*.jsx"
+  ],
   "exports": {
     ".": {
       "types": "./_esm/react.d.ts",
@@ -23,10 +31,12 @@
     "./legacy": {
       "import": "./_esm/cs.mjs"
     },
+    "./components/*": "./components/*",
     "./styles.css": "./styles.css",
     "./tokens/*": "./tokens/*",
     "./_ds_bundle.js": "./_ds_bundle.js",
-    "./_ds_manifest.json": "./_ds_manifest.json"
+    "./_ds_manifest.json": "./_ds_manifest.json",
+    "./styles.min.css": "./dist/styles.min.css"
   },
   "description": "CyberSkill Design System — HTML-first, Vietnamese-first (EN·VI). Anchors: Umber #45210E · Ochre #F4BA17. Axes: Theme × Element × Language × Style. Bundler React entry (`_esm/react.mjs`) + browser legacy (`_esm/cs.mjs`) + styles.css / _ds_bundle.js. Storybook is host-only playground.",
   "style": "styles.css",
@@ -45,13 +55,18 @@
     "_ds_manifest.json",
     "llms.txt",
     "SKILL.md",
-    "docs/",
+    "docs/*.md",
+    "docs/vi/",
+    "docs/viewer.html",
     "components/",
     "templates/",
     "guidelines/",
     "ui_kits/",
+    "_vendor/",
     "DESIGN.md",
-    "VERSION"
+    "VERSION",
+    "dist/styles.min.css",
+    "THIRD-PARTY-NOTICES.md"
   ],
   "keywords": [
     "design-system",
@@ -66,13 +81,13 @@
     "build:bundle": "node scripts/build-bundle.mjs",
     "build:react-entry": "node scripts/generate-react-entry.mjs",
     "build:design-md": "node scripts/generate-design-md.mjs",
-    "prepublishOnly": "npm run build:bundle && npm run build:react-entry && node scripts/generate-design-md.mjs --check",
+    "prepublishOnly": "npm run build:bundle && npm run build:react-entry && npm run build:styles && node scripts/generate-design-md.mjs --check && node scripts/flatten-styles.mjs --check && node scripts/generate-contrast-report.mjs --check && npm run version:stamp:check",
     "code-connect:generate": "node _audit/ci/generate-code-connect.mjs",
     "code-connect:dry-run": "node _audit/ci/code-connect-publish.mjs --dry-run",
     "npm:pack-dry-run": "node _audit/ci/npm-publish.mjs --dry-run",
     "native:store-dry-run": "node _audit/ci/native-store-dry-run.mjs --dry-run",
-    "storybook": "storybook dev -p 6006",
-    "build:storybook": "storybook build -o storybook-static",
+    "storybook": "storybook dev -p 6006 --host 127.0.0.1",
+    "build:storybook": "storybook build -o storybook-static && node scripts/stamp-storybook-freshness.mjs",
     "build:site": "npm run build:storybook && node scripts/vercel-static-output.mjs",
     "verify:serve": "python3 -m http.server 8765 --bind 127.0.0.1",
     "verify:hint": "echo Open http://127.0.0.1:8765/_audit/run.html and wait for ALL hard gates PASS",
@@ -80,7 +95,8 @@
     "test:nav-model": "node _audit/ci/test-nav-model.mjs",
     "test:ui-contracts": "node _audit/ci/test-health-tokens-contract.mjs",
     "test:form-paths": "node _audit/ci/test-form-paths.mjs",
-    "test:unit": "node _audit/ci/test-nav-model.mjs && node _audit/ci/test-health-tokens-contract.mjs && node _audit/ci/test-form-paths.mjs && node _audit/ci/test-storybook-contract.mjs && node _audit/ci/test-axe-coverage.mjs && node _audit/ci/test-figma-push-helpers.mjs && node _audit/ci/test-native-samples.mjs && node _audit/ci/test-code-connect.mjs && node _audit/ci/test-subtree-consume.mjs && node _audit/ci/test-react-entry.mjs && node _audit/ci/test-element-packs.mjs",
+    "test:unit": "node _audit/ci/test-nav-model.mjs && node _audit/ci/test-health-tokens-contract.mjs && node _audit/ci/test-docs-consistency.mjs && node _audit/ci/test-base-hex-allowlist.mjs && node _audit/ci/test-form-paths.mjs && node _audit/ci/test-storybook-contract.mjs && node _audit/ci/test-axe-coverage.mjs && node _audit/ci/test-figma-push-helpers.mjs && node _audit/ci/test-native-samples.mjs && node _audit/ci/test-code-connect.mjs && node _audit/ci/test-npm-publish.mjs && node _audit/ci/test-subtree-consume.mjs && node _audit/ci/test-react-entry.mjs && node _audit/ci/test-element-packs.mjs && node _audit/ci/test-i18n-builtins.mjs && node _audit/ci/test-format-currency.mjs && node _audit/ci/check-manifest-coverage.mjs && node _audit/ci/ci-verdict.mjs --selftest && node _audit/ci/test-pack-hygiene.mjs && npm run version:stamp:check && node _audit/ci/test-docs-lang-parity.mjs && node _audit/ci/test-email-safe.mjs && node _audit/ci/test-prop-parity.mjs",
+    "test:audit-probe": "node _audit/ci/audit-probe-suite.mjs",
     "test:element-packs": "node _audit/ci/test-element-packs.mjs",
     "test:react-entry": "node _audit/ci/test-react-entry.mjs",
     "test:subtree-consume": "node _audit/ci/test-subtree-consume.mjs",
@@ -90,8 +106,20 @@
     "test:figma-helpers": "node _audit/ci/test-figma-push-helpers.mjs",
     "test:code-connect": "node _audit/ci/test-code-connect.mjs",
     "test:native-samples": "node _audit/ci/test-native-samples.mjs",
+    "test:storybook-freshness": "node _audit/ci/test-storybook-freshness.mjs",
+    "test:manifest-coverage": "node _audit/ci/check-manifest-coverage.mjs",
+    "test:pack-hygiene": "node _audit/ci/test-pack-hygiene.mjs",
     "tokens:elements": "node scripts/generate-element-packs.mjs",
-    "tokens:contrast": "node scripts/generate-contrast-report.mjs"
+    "tokens:contrast": "node scripts/generate-contrast-report.mjs",
+    "build:styles": "node scripts/flatten-styles.mjs",
+    "version:check": "node scripts/ds-version.mjs --check",
+    "version:selftest": "node scripts/ds-version.mjs --selftest",
+    "version:stamp": "node scripts/stamp-release-version.mjs",
+    "version:stamp:apply": "node scripts/stamp-release-version.mjs --apply",
+    "version:stamp:check": "node scripts/stamp-release-version.mjs --check",
+    "sbom": "npx --yes @cyclonedx/cyclonedx-npm@3.1.0 --output-file bom.cdx.json --output-reproducible --spec-version 1.5",
+    "test:docs-lang-parity": "node _audit/ci/test-docs-lang-parity.mjs",
+    "test:email-safe": "node _audit/ci/test-email-safe.mjs"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.4.9",

package/templates/_ds-base.canonical.js

@@ -0,0 +1,55 @@
+// Loads this design system into the template. In a consuming project, point
+// base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
+// the project root, '../_ds/<folder>' one level down) — one line to edit.
+// Artifact head standard (UX-002 / B1): ensure <html lang> + <title> from @template.
+(() => {
+  const base = '../..';
+  for (const p of ['dist/styles.min.css']) {
+    const l = document.createElement('link');
+    l.rel = 'stylesheet'; l.href = base + '/' + p;
+    document.head.appendChild(l);
+  }
+  const s = document.createElement('script');
+  s.src = base + '/_ds_bundle.js';
+  s.onload = () => {
+    // Expose a STABLE, project-id-independent alias. The compiler names the bundle
+    // global CyberSkillDesignSystem_<6-hex-project-id>, which changes whenever this
+    // system is re-imported into another project. Templates/cards read window.CyberSkillDS
+    // so no file ever has to be rewritten on re-import.
+    const k = Object.keys(window).find((k) => /^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k));
+    if (k) window.CyberSkillDS = window[k];
+  };
+  s.onerror = () => console.error('ds-base.js: failed to load ' + s.src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet');
+  document.head.appendChild(s);
+
+  const syncLang = () => {
+    try {
+      const a = document.querySelector('[lang]');
+      const v = a && a.getAttribute('lang');
+      // Ignore unresolved DC holes like {{ langAttr }}
+      if (v && v.indexOf('{{') === -1) document.documentElement.setAttribute('lang', v);
+      else if (!document.documentElement.getAttribute('lang')) document.documentElement.setAttribute('lang', 'en');
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  const ensureHead = () => {
+    try {
+      if (!document.title || !document.title.trim()) {
+        const src = document.documentElement.innerHTML;
+        const m = src.match(/@template\s+name="([^"]+)"/);
+        if (m) document.title = m[1] + ' · CyberSkill';
+      }
+      syncLang();
+      const obs = new MutationObserver(syncLang);
+      obs.observe(document.body || document.documentElement, {
+        attributes: true,
+        attributeFilter: ['lang'],
+        subtree: true,
+      });
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureHead);
+  } else {
+    ensureHead();
+  }
+})();

package/templates/ai-cluster-demo.html

@@ -8,8 +8,8 @@
   h1{font-size:18px;margin:0 0 8px} .sub{color:var(--cs-color-text-muted);font-size:13px;line-height:1.5;margin:0 0 18px}
   #root{display:grid;gap:14px}
 </style>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" crossorigin="anonymous"></script>
+<script src="../_vendor/react/react.production.min.js"></script>
+<script src="../_vendor/react/react-dom.production.min.js"></script>
 <script src="../_ds_bundle.js"></script>
 </head><body data-cs-element="tho" data-cs-style="liquid-glass">
 <h1>AI cluster demo</h1>

package/templates/app-shell/AppShell.dc.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
+<title>App shell · CyberSkill</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script src="./support.js"></script>
@@ -12,7 +13,8 @@
 <script src="./ds-base.js"></script>
 </helmet>
 <div data-theme="{{ rootTheme }}" lang="{{ langAttr }}" data-cs-element="{{ elAttr }}" data-cs-variant="{{ vaAttr }}" style="display:grid;grid-template-columns:248px 1fr;min-height:100vh;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-page)">
-  <nav class="cs-sidebar">
+  <a class="cs-skip" href="#main" style="position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden">{{ skipLabel }}</a>
+  <nav class="cs-sidebar" aria-label="{{ navLabel }}">
     <div style="display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--cs-color-text-primary);padding:6px 12px 14px">
       <x-import component-from-global-scope="CyberSkillDS.Logo" size="28" hint-size="28px,28px"></x-import>CyberSkill
     </div>
@@ -34,7 +36,7 @@
       <x-import component-from-global-scope="CyberSkillDS.Avatar" name="An Le" hint-size="40px,40px"></x-import>
     </header>
 
-    <main style="padding:28px;display:grid;gap:24px">
+    <main id="main" style="padding:28px;display:grid;gap:24px">
       <div>
         <h1 style="font-size:26px;font-weight:800;letter-spacing:-0.02em;margin:0 0 4px">{{ h1 }}</h1>
         <p style="color:var(--cs-color-text-muted);margin:0">{{ sub }}</p>
@@ -62,8 +64,8 @@ class Component extends DCLogic {
     const EL = {"Thổ · studio":["tho",""],"Thổ · clay":["tho","clay"],"Thổ · sand":["tho","sand"],"Hỏa · ember":["hoa",""],"Hỏa · lava":["hoa","lava"],"Hỏa · plasma":["hoa","plasma"],"Thủy · river":["thuy",""],"Thủy · ocean":["thuy","ocean"],"Thủy · mist":["thuy","mist"],"Mộc · leaf":["moc",""],"Mộc · bamboo":["moc","bamboo"],"Mộc · forest":["moc","forest"],"Kim · champagne":["kim",""],"Kim · steel":["kim","steel"],"Kim · titanium":["kim","titanium"]};
     const [elAttr, vaAttr] = EL[this.props.element] || EL["Thổ · studio"];
 const vn = this.props.language === "Tiếng Việt";
-    const en = { navLabel:"Workspace", nav1:"Overview", nav2:"Projects", nav3:"Releases", nav4:"Team", nav5:"Settings", searchPh:"Search projects…", newBtn:"New project", h1:"Overview", sub:"Every wish in flight, at a glance.", s1:"Projects", s2:"In progress", s3:"Shipped", s4:"Avg progress", s4d:"+6 this week", tblCap:"Projects", cKey:"Key", cName:"Project", cSquad:"Squad", cProg:"Progress", cStatus:"Status", stInprog:"In progress", stBlocked:"Blocked" };
-    const vi = { navLabel:"Không gian", nav1:"Tổng quan", nav2:"Dự án", nav3:"Phát hành", nav4:"Đội ngũ", nav5:"Cài đặt", searchPh:"Tìm dự án…", newBtn:"Dự án mới", h1:"Tổng quan", sub:"Mọi điều ước đang chạy, trong một cái nhìn.", s1:"Dự án", s2:"Đang làm", s3:"Đã ra mắt", s4:"Tiến độ TB", s4d:"+6 tuần này", tblCap:"Dự án", cKey:"Mã", cName:"Dự án", cSquad:"Nhóm", cProg:"Tiến độ", cStatus:"Trạng thái", stInprog:"Đang làm", stBlocked:"Bị chặn" };
+    const en = { skipLabel:"Skip to content", navLabel:"Workspace", nav1:"Overview", nav2:"Projects", nav3:"Releases", nav4:"Team", nav5:"Settings", searchPh:"Search projects…", newBtn:"New project", h1:"Overview", sub:"Every wish in flight, at a glance.", s1:"Projects", s2:"In progress", s3:"Shipped", s4:"Avg progress", s4d:"+6 this week", tblCap:"Projects", cKey:"Key", cName:"Project", cSquad:"Squad", cProg:"Progress", cStatus:"Status", stInprog:"In progress", stBlocked:"Blocked" };
+    const vi = { skipLabel:"Bỏ qua nội dung", navLabel:"Không gian", nav1:"Tổng quan", nav2:"Dự án", nav3:"Phát hành", nav4:"Đội ngũ", nav5:"Cài đặt", searchPh:"Tìm dự án…", newBtn:"Dự án mới", h1:"Tổng quan", sub:"Mọi điều ước đang chạy, trong một cái nhìn.", s1:"Dự án", s2:"Đang làm", s3:"Đã ra mắt", s4:"Tiến độ TB", s4d:"+6 tuần này", tblCap:"Dự án", cKey:"Mã", cName:"Dự án", cSquad:"Nhóm", cProg:"Tiến độ", cStatus:"Trạng thái", stInprog:"Đang làm", stBlocked:"Bị chặn" };
     const t = vn ? vi : en;
     return Object.assign({ langAttr: (this.props.language ?? "English") === "Tiếng Việt" ? "vi" : "en", elAttr, vaAttr, rootTheme: this.props.theme === "dark" ? "dark" : "",
       cols: [ { key: "key", header: t.cKey }, { key: "name", header: t.cName }, { key: "squad", header: t.cSquad }, { key: "pct", header: t.cProg, render: (r) => r.pct + "%" }, { key: "status", header: t.cStatus } ],

package/templates/app-shell/content-schema.json

@@ -2,6 +2,13 @@
   "$schemaVersion": "2.0",
   "template": "app-shell",
   "slots": [
+    {
+      "id": "skipLabel",
+      "type": "text",
+      "label": "Skip-to-content link label",
+      "maxLength": 40,
+      "required": true
+    },
     {
       "id": "navLabel",
       "type": "text",

package/templates/app-shell/ds-base.js

@@ -1,9 +1,10 @@
 // Loads this design system into the template. In a consuming project, point
 // base at the bound DS folder relative to this file (e.g. '_ds/<folder>' at
 // the project root, '../_ds/<folder>' one level down) — one line to edit.
+// Artifact head standard (UX-002 / B1): ensure <html lang> + <title> from @template.
 (() => {
   const base = '../..';
-  for (const p of ['styles.css']) {
+  for (const p of ['dist/styles.min.css']) {
     const l = document.createElement('link');
     l.rel = 'stylesheet'; l.href = base + '/' + p;
     document.head.appendChild(l);
@@ -20,4 +21,35 @@
   };
   s.onerror = () => console.error('ds-base.js: failed to load ' + s.src + ' — if this is a consuming project, point the base line in ds-base.js at the bound _ds/<folder> tree relative to this page (e.g. _ds/<folder> at the project root, ../_ds/<folder> one level down); in a fresh design system this can just mean the bundle is not compiled yet');
   document.head.appendChild(s);
+
+  const syncLang = () => {
+    try {
+      const a = document.querySelector('[lang]');
+      const v = a && a.getAttribute('lang');
+      // Ignore unresolved DC holes like {{ langAttr }}
+      if (v && v.indexOf('{{') === -1) document.documentElement.setAttribute('lang', v);
+      else if (!document.documentElement.getAttribute('lang')) document.documentElement.setAttribute('lang', 'en');
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  const ensureHead = () => {
+    try {
+      if (!document.title || !document.title.trim()) {
+        const src = document.documentElement.innerHTML;
+        const m = src.match(/@template\s+name="([^"]+)"/);
+        if (m) document.title = m[1] + ' · CyberSkill';
+      }
+      syncLang();
+      const obs = new MutationObserver(syncLang);
+      obs.observe(document.body || document.documentElement, {
+        attributes: true,
+        attributeFilter: ['lang'],
+        subtree: true,
+      });
+    } catch (e) { /* authoring host may sandbox */ }
+  };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureHead);
+  } else {
+    ensureHead();
+  }
 })();