@cyberskill/design 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (970) hide show
  1. package/DESIGN.md +267 -0
  2. package/README.md +316 -0
  3. package/SKILL.md +64 -0
  4. package/VERSION +1 -0
  5. package/_ds_bundle.js +5377 -0
  6. package/_ds_manifest.json +1 -0
  7. package/_esm/cs.mjs +137 -0
  8. package/assets/aurora-gold.jpg +0 -0
  9. package/assets/aurora-hoa.png +0 -0
  10. package/assets/aurora-kim.png +0 -0
  11. package/assets/aurora-moc.png +0 -0
  12. package/assets/aurora-thuy.png +0 -0
  13. package/assets/favicon.svg +1 -0
  14. package/assets/logo-mark.png +0 -0
  15. package/assets/logo-mark.svg +10 -0
  16. package/assets/lumi-poster.webp +0 -0
  17. package/assets/og-dashboard.png +0 -0
  18. package/base/a11y.css +57 -0
  19. package/base/ai.css +67 -0
  20. package/base/collections.css +53 -0
  21. package/base/components.css +212 -0
  22. package/base/controls.css +329 -0
  23. package/base/data.css +48 -0
  24. package/base/feedback.css +60 -0
  25. package/base/forms.css +32 -0
  26. package/base/glass.css +119 -0
  27. package/base/interaction.css +50 -0
  28. package/base/navigation.css +39 -0
  29. package/base/reset.css +17 -0
  30. package/base/responsive.css +128 -0
  31. package/base/shell.css +55 -0
  32. package/base/typography.css +14 -0
  33. package/components/_i18n/i18n.js +56 -0
  34. package/components/_i18n/strings.js +187 -0
  35. package/components/_utils/cx.js +4 -0
  36. package/components/ai/AIDisclosureBadge.d.ts +16 -0
  37. package/components/ai/AIDisclosureBadge.figma.tsx +12 -0
  38. package/components/ai/AIDisclosureBadge.jsx +39 -0
  39. package/components/ai/AIDisclosureBadge.prompt.md +9 -0
  40. package/components/ai/ChatMessage.d.ts +17 -0
  41. package/components/ai/ChatMessage.figma.tsx +12 -0
  42. package/components/ai/ChatMessage.jsx +22 -0
  43. package/components/ai/ChatMessage.prompt.md +8 -0
  44. package/components/ai/CitationList.d.ts +13 -0
  45. package/components/ai/CitationList.figma.tsx +12 -0
  46. package/components/ai/CitationList.jsx +22 -0
  47. package/components/ai/CitationList.prompt.md +5 -0
  48. package/components/ai/ConfidenceMeter.d.ts +17 -0
  49. package/components/ai/ConfidenceMeter.figma.tsx +12 -0
  50. package/components/ai/ConfidenceMeter.jsx +43 -0
  51. package/components/ai/ConfidenceMeter.prompt.md +6 -0
  52. package/components/ai/HumanReviewGate.d.ts +20 -0
  53. package/components/ai/HumanReviewGate.figma.tsx +12 -0
  54. package/components/ai/HumanReviewGate.jsx +37 -0
  55. package/components/ai/HumanReviewGate.prompt.md +13 -0
  56. package/components/ai/PromptInput.d.ts +21 -0
  57. package/components/ai/PromptInput.figma.tsx +12 -0
  58. package/components/ai/PromptInput.jsx +48 -0
  59. package/components/ai/PromptInput.prompt.md +5 -0
  60. package/components/ai/PromptSuggestions.d.ts +12 -0
  61. package/components/ai/PromptSuggestions.figma.tsx +12 -0
  62. package/components/ai/PromptSuggestions.jsx +20 -0
  63. package/components/ai/PromptSuggestions.prompt.md +5 -0
  64. package/components/ai/TypingIndicator.d.ts +9 -0
  65. package/components/ai/TypingIndicator.figma.tsx +12 -0
  66. package/components/ai/TypingIndicator.jsx +14 -0
  67. package/components/ai/TypingIndicator.prompt.md +5 -0
  68. package/components/ai/ai-conversation.card.html +49 -0
  69. package/components/ai/ai-lumi.card.html +39 -0
  70. package/components/ai/ai.card.html +43 -0
  71. package/components/brand/LumiAvatar.d.ts +14 -0
  72. package/components/brand/LumiAvatar.figma.tsx +12 -0
  73. package/components/brand/LumiAvatar.jsx +11 -0
  74. package/components/brand/LumiAvatar.prompt.md +5 -0
  75. package/components/brand/brand.card.html +37 -0
  76. package/components/button/Button.d.ts +24 -0
  77. package/components/button/Button.figma.tsx +31 -0
  78. package/components/button/Button.jsx +42 -0
  79. package/components/button/Button.prompt.md +12 -0
  80. package/components/button/ButtonGroup.d.ts +11 -0
  81. package/components/button/ButtonGroup.figma.tsx +12 -0
  82. package/components/button/ButtonGroup.jsx +7 -0
  83. package/components/button/ButtonGroup.prompt.md +8 -0
  84. package/components/button/FloatingActionButton.d.ts +15 -0
  85. package/components/button/FloatingActionButton.figma.tsx +12 -0
  86. package/components/button/FloatingActionButton.jsx +20 -0
  87. package/components/button/FloatingActionButton.prompt.md +6 -0
  88. package/components/button/buttons.card.html +52 -0
  89. package/components/data/Accordion.d.ts +14 -0
  90. package/components/data/Accordion.figma.tsx +12 -0
  91. package/components/data/Accordion.jsx +25 -0
  92. package/components/data/Accordion.prompt.md +5 -0
  93. package/components/data/Avatar.d.ts +18 -0
  94. package/components/data/Avatar.figma.tsx +12 -0
  95. package/components/data/Avatar.jsx +17 -0
  96. package/components/data/Avatar.prompt.md +6 -0
  97. package/components/data/Card.d.ts +23 -0
  98. package/components/data/Card.figma.tsx +12 -0
  99. package/components/data/Card.jsx +27 -0
  100. package/components/data/Card.prompt.md +9 -0
  101. package/components/data/Carousel.d.ts +13 -0
  102. package/components/data/Carousel.figma.tsx +12 -0
  103. package/components/data/Carousel.jsx +26 -0
  104. package/components/data/Carousel.prompt.md +5 -0
  105. package/components/data/Chart.d.ts +17 -0
  106. package/components/data/Chart.figma.tsx +12 -0
  107. package/components/data/Chart.jsx +52 -0
  108. package/components/data/Chart.prompt.md +5 -0
  109. package/components/data/CodeBlock.d.ts +12 -0
  110. package/components/data/CodeBlock.figma.tsx +12 -0
  111. package/components/data/CodeBlock.jsx +21 -0
  112. package/components/data/CodeBlock.prompt.md +5 -0
  113. package/components/data/Comment.d.ts +18 -0
  114. package/components/data/Comment.figma.tsx +12 -0
  115. package/components/data/Comment.jsx +24 -0
  116. package/components/data/Comment.prompt.md +7 -0
  117. package/components/data/DescriptionList.d.ts +10 -0
  118. package/components/data/DescriptionList.figma.tsx +12 -0
  119. package/components/data/DescriptionList.jsx +16 -0
  120. package/components/data/DescriptionList.prompt.md +5 -0
  121. package/components/data/Divider.d.ts +13 -0
  122. package/components/data/Divider.figma.tsx +12 -0
  123. package/components/data/Divider.jsx +11 -0
  124. package/components/data/Divider.prompt.md +6 -0
  125. package/components/data/Image.d.ts +18 -0
  126. package/components/data/Image.figma.tsx +12 -0
  127. package/components/data/Image.jsx +37 -0
  128. package/components/data/Image.prompt.md +5 -0
  129. package/components/data/Kbd.d.ts +8 -0
  130. package/components/data/Kbd.figma.tsx +12 -0
  131. package/components/data/Kbd.jsx +7 -0
  132. package/components/data/Kbd.prompt.md +5 -0
  133. package/components/data/List.d.ts +16 -0
  134. package/components/data/List.figma.tsx +12 -0
  135. package/components/data/List.jsx +24 -0
  136. package/components/data/List.prompt.md +7 -0
  137. package/components/data/Masonry.d.ts +13 -0
  138. package/components/data/Masonry.figma.tsx +12 -0
  139. package/components/data/Masonry.jsx +11 -0
  140. package/components/data/Masonry.prompt.md +5 -0
  141. package/components/data/QRCode.d.ts +12 -0
  142. package/components/data/QRCode.figma.tsx +12 -0
  143. package/components/data/QRCode.jsx +17 -0
  144. package/components/data/QRCode.prompt.md +5 -0
  145. package/components/data/Sortable.d.ts +10 -0
  146. package/components/data/Sortable.figma.tsx +12 -0
  147. package/components/data/Sortable.jsx +30 -0
  148. package/components/data/Sortable.prompt.md +5 -0
  149. package/components/data/Splitter.d.ts +16 -0
  150. package/components/data/Splitter.figma.tsx +12 -0
  151. package/components/data/Splitter.jsx +31 -0
  152. package/components/data/Splitter.prompt.md +5 -0
  153. package/components/data/Stat.d.ts +15 -0
  154. package/components/data/Stat.figma.tsx +12 -0
  155. package/components/data/Stat.jsx +19 -0
  156. package/components/data/Stat.prompt.md +5 -0
  157. package/components/data/Terminal.d.ts +13 -0
  158. package/components/data/Terminal.figma.tsx +12 -0
  159. package/components/data/Terminal.jsx +32 -0
  160. package/components/data/Terminal.prompt.md +5 -0
  161. package/components/data/Timeline.d.ts +17 -0
  162. package/components/data/Timeline.figma.tsx +12 -0
  163. package/components/data/Timeline.jsx +20 -0
  164. package/components/data/Timeline.prompt.md +8 -0
  165. package/components/data/Tooltip.d.ts +14 -0
  166. package/components/data/Tooltip.figma.tsx +12 -0
  167. package/components/data/Tooltip.jsx +12 -0
  168. package/components/data/Tooltip.prompt.md +5 -0
  169. package/components/data/Tree.d.ts +13 -0
  170. package/components/data/Tree.figma.tsx +12 -0
  171. package/components/data/Tree.jsx +23 -0
  172. package/components/data/Tree.prompt.md +5 -0
  173. package/components/data/Watermark.d.ts +15 -0
  174. package/components/data/Watermark.figma.tsx +12 -0
  175. package/components/data/Watermark.jsx +15 -0
  176. package/components/data/Watermark.prompt.md +5 -0
  177. package/components/data/collections.card.html +52 -0
  178. package/components/data/data.card.html +50 -0
  179. package/components/data/qr-encode.js +80 -0
  180. package/components/datatable/DataGrid.d.ts +42 -0
  181. package/components/datatable/DataGrid.figma.tsx +12 -0
  182. package/components/datatable/DataGrid.jsx +149 -0
  183. package/components/datatable/DataGrid.prompt.md +12 -0
  184. package/components/datatable/DataTable.d.ts +25 -0
  185. package/components/datatable/DataTable.figma.tsx +12 -0
  186. package/components/datatable/DataTable.jsx +42 -0
  187. package/components/datatable/DataTable.prompt.md +15 -0
  188. package/components/datatable/TreeTable.d.ts +14 -0
  189. package/components/datatable/TreeTable.figma.tsx +12 -0
  190. package/components/datatable/TreeTable.jsx +47 -0
  191. package/components/datatable/TreeTable.prompt.md +6 -0
  192. package/components/datatable/datatable.card.html +51 -0
  193. package/components/dialog/Dialog.d.ts +22 -0
  194. package/components/dialog/Dialog.figma.tsx +12 -0
  195. package/components/dialog/Dialog.jsx +99 -0
  196. package/components/dialog/Dialog.prompt.md +17 -0
  197. package/components/dialog/dialog.card.html +46 -0
  198. package/components/feedback/Alert.d.ts +16 -0
  199. package/components/feedback/Alert.figma.tsx +17 -0
  200. package/components/feedback/Alert.jsx +29 -0
  201. package/components/feedback/Alert.prompt.md +6 -0
  202. package/components/feedback/Badge.d.ts +15 -0
  203. package/components/feedback/Badge.figma.tsx +12 -0
  204. package/components/feedback/Badge.jsx +12 -0
  205. package/components/feedback/Badge.prompt.md +6 -0
  206. package/components/feedback/EmptyState.d.ts +13 -0
  207. package/components/feedback/EmptyState.figma.tsx +12 -0
  208. package/components/feedback/EmptyState.jsx +16 -0
  209. package/components/feedback/EmptyState.prompt.md +7 -0
  210. package/components/feedback/ProgressBar.d.ts +15 -0
  211. package/components/feedback/ProgressBar.figma.tsx +12 -0
  212. package/components/feedback/ProgressBar.jsx +13 -0
  213. package/components/feedback/ProgressBar.prompt.md +5 -0
  214. package/components/feedback/Result.d.ts +15 -0
  215. package/components/feedback/Result.figma.tsx +12 -0
  216. package/components/feedback/Result.jsx +24 -0
  217. package/components/feedback/Result.prompt.md +7 -0
  218. package/components/feedback/Skeleton.d.ts +18 -0
  219. package/components/feedback/Skeleton.figma.tsx +12 -0
  220. package/components/feedback/Skeleton.jsx +22 -0
  221. package/components/feedback/Skeleton.prompt.md +6 -0
  222. package/components/feedback/Spinner.d.ts +11 -0
  223. package/components/feedback/Spinner.figma.tsx +12 -0
  224. package/components/feedback/Spinner.jsx +10 -0
  225. package/components/feedback/Spinner.prompt.md +5 -0
  226. package/components/feedback/StatusIndicator.d.ts +11 -0
  227. package/components/feedback/StatusIndicator.figma.tsx +12 -0
  228. package/components/feedback/StatusIndicator.jsx +12 -0
  229. package/components/feedback/StatusIndicator.prompt.md +5 -0
  230. package/components/feedback/Tag.d.ts +14 -0
  231. package/components/feedback/Tag.figma.tsx +12 -0
  232. package/components/feedback/Tag.jsx +19 -0
  233. package/components/feedback/Tag.prompt.md +6 -0
  234. package/components/feedback/Toast.d.ts +19 -0
  235. package/components/feedback/Toast.figma.tsx +12 -0
  236. package/components/feedback/Toast.jsx +30 -0
  237. package/components/feedback/Toast.prompt.md +7 -0
  238. package/components/feedback/feedback-2.card.html +43 -0
  239. package/components/feedback/feedback.card.html +50 -0
  240. package/components/forms/Calendar.d.ts +10 -0
  241. package/components/forms/Calendar.figma.tsx +12 -0
  242. package/components/forms/Calendar.jsx +43 -0
  243. package/components/forms/Calendar.prompt.md +5 -0
  244. package/components/forms/Cascader.d.ts +17 -0
  245. package/components/forms/Cascader.figma.tsx +12 -0
  246. package/components/forms/Cascader.jsx +58 -0
  247. package/components/forms/Cascader.prompt.md +5 -0
  248. package/components/forms/Checkbox.d.ts +13 -0
  249. package/components/forms/Checkbox.figma.tsx +12 -0
  250. package/components/forms/Checkbox.jsx +16 -0
  251. package/components/forms/Checkbox.prompt.md +6 -0
  252. package/components/forms/ColorPicker.d.ts +12 -0
  253. package/components/forms/ColorPicker.figma.tsx +12 -0
  254. package/components/forms/ColorPicker.jsx +44 -0
  255. package/components/forms/ColorPicker.prompt.md +5 -0
  256. package/components/forms/Combobox.d.ts +17 -0
  257. package/components/forms/Combobox.figma.tsx +12 -0
  258. package/components/forms/Combobox.jsx +49 -0
  259. package/components/forms/Combobox.prompt.md +6 -0
  260. package/components/forms/DatePicker.d.ts +15 -0
  261. package/components/forms/DatePicker.figma.tsx +12 -0
  262. package/components/forms/DatePicker.jsx +35 -0
  263. package/components/forms/DatePicker.prompt.md +5 -0
  264. package/components/forms/Editor.d.ts +12 -0
  265. package/components/forms/Editor.figma.tsx +12 -0
  266. package/components/forms/Editor.jsx +26 -0
  267. package/components/forms/Editor.prompt.md +5 -0
  268. package/components/forms/FileUpload.d.ts +14 -0
  269. package/components/forms/FileUpload.figma.tsx +12 -0
  270. package/components/forms/FileUpload.jsx +29 -0
  271. package/components/forms/FileUpload.prompt.md +5 -0
  272. package/components/forms/Form.d.ts +87 -0
  273. package/components/forms/Form.figma.tsx +12 -0
  274. package/components/forms/Form.jsx +316 -0
  275. package/components/forms/Form.prompt.md +46 -0
  276. package/components/forms/InlineEdit.d.ts +13 -0
  277. package/components/forms/InlineEdit.figma.tsx +12 -0
  278. package/components/forms/InlineEdit.jsx +27 -0
  279. package/components/forms/InlineEdit.prompt.md +5 -0
  280. package/components/forms/InputGroup.d.ts +20 -0
  281. package/components/forms/InputGroup.figma.tsx +12 -0
  282. package/components/forms/InputGroup.jsx +25 -0
  283. package/components/forms/InputGroup.prompt.md +6 -0
  284. package/components/forms/InputOTP.d.ts +16 -0
  285. package/components/forms/InputOTP.figma.tsx +12 -0
  286. package/components/forms/InputOTP.jsx +47 -0
  287. package/components/forms/InputOTP.prompt.md +5 -0
  288. package/components/forms/Mentions.d.ts +13 -0
  289. package/components/forms/Mentions.figma.tsx +12 -0
  290. package/components/forms/Mentions.jsx +31 -0
  291. package/components/forms/Mentions.prompt.md +5 -0
  292. package/components/forms/NumberField.d.ts +14 -0
  293. package/components/forms/NumberField.figma.tsx +12 -0
  294. package/components/forms/NumberField.jsx +21 -0
  295. package/components/forms/NumberField.prompt.md +5 -0
  296. package/components/forms/RadioGroup.d.ts +24 -0
  297. package/components/forms/RadioGroup.figma.tsx +12 -0
  298. package/components/forms/RadioGroup.jsx +32 -0
  299. package/components/forms/RadioGroup.prompt.md +6 -0
  300. package/components/forms/Rating.d.ts +16 -0
  301. package/components/forms/Rating.figma.tsx +12 -0
  302. package/components/forms/Rating.jsx +22 -0
  303. package/components/forms/Rating.prompt.md +6 -0
  304. package/components/forms/SearchField.d.ts +11 -0
  305. package/components/forms/SearchField.figma.tsx +12 -0
  306. package/components/forms/SearchField.jsx +25 -0
  307. package/components/forms/SearchField.prompt.md +5 -0
  308. package/components/forms/SegmentedControl.d.ts +13 -0
  309. package/components/forms/SegmentedControl.figma.tsx +12 -0
  310. package/components/forms/SegmentedControl.jsx +31 -0
  311. package/components/forms/SegmentedControl.prompt.md +6 -0
  312. package/components/forms/Select.d.ts +19 -0
  313. package/components/forms/Select.figma.tsx +12 -0
  314. package/components/forms/Select.jsx +27 -0
  315. package/components/forms/Select.prompt.md +6 -0
  316. package/components/forms/Slider.d.ts +6 -0
  317. package/components/forms/Slider.figma.tsx +12 -0
  318. package/components/forms/Slider.jsx +8 -0
  319. package/components/forms/Slider.prompt.md +5 -0
  320. package/components/forms/Switch.d.ts +12 -0
  321. package/components/forms/Switch.figma.tsx +12 -0
  322. package/components/forms/Switch.jsx +14 -0
  323. package/components/forms/Switch.prompt.md +5 -0
  324. package/components/forms/TagInput.d.ts +16 -0
  325. package/components/forms/TagInput.figma.tsx +12 -0
  326. package/components/forms/TagInput.jsx +39 -0
  327. package/components/forms/TagInput.prompt.md +5 -0
  328. package/components/forms/Textarea.d.ts +14 -0
  329. package/components/forms/Textarea.figma.tsx +12 -0
  330. package/components/forms/Textarea.jsx +19 -0
  331. package/components/forms/Textarea.prompt.md +5 -0
  332. package/components/forms/TimePicker.d.ts +16 -0
  333. package/components/forms/TimePicker.figma.tsx +12 -0
  334. package/components/forms/TimePicker.jsx +22 -0
  335. package/components/forms/TimePicker.prompt.md +5 -0
  336. package/components/forms/Toggle.d.ts +16 -0
  337. package/components/forms/Toggle.figma.tsx +12 -0
  338. package/components/forms/Toggle.jsx +15 -0
  339. package/components/forms/Toggle.prompt.md +6 -0
  340. package/components/forms/Transfer.d.ts +14 -0
  341. package/components/forms/Transfer.figma.tsx +12 -0
  342. package/components/forms/Transfer.jsx +41 -0
  343. package/components/forms/Transfer.prompt.md +5 -0
  344. package/components/forms/TreeSelect.d.ts +15 -0
  345. package/components/forms/TreeSelect.figma.tsx +12 -0
  346. package/components/forms/TreeSelect.jsx +35 -0
  347. package/components/forms/TreeSelect.prompt.md +5 -0
  348. package/components/forms/forms-2.card.html +40 -0
  349. package/components/forms/forms.card.html +40 -0
  350. package/components/icon/Icon.d.ts +26 -0
  351. package/components/icon/Icon.figma.tsx +12 -0
  352. package/components/icon/Icon.jsx +74 -0
  353. package/components/icon/Icon.prompt.md +8 -0
  354. package/components/icon/icon.card.html +38 -0
  355. package/components/logo/Logo.d.ts +18 -0
  356. package/components/logo/Logo.figma.tsx +12 -0
  357. package/components/logo/Logo.jsx +25 -0
  358. package/components/logo/Logo.prompt.md +10 -0
  359. package/components/logo/logo-data.js +214 -0
  360. package/components/logo/logo.card.html +44 -0
  361. package/components/navigation/Anchor.d.ts +11 -0
  362. package/components/navigation/Anchor.figma.tsx +12 -0
  363. package/components/navigation/Anchor.jsx +25 -0
  364. package/components/navigation/Anchor.prompt.md +5 -0
  365. package/components/navigation/BackTop.d.ts +9 -0
  366. package/components/navigation/BackTop.figma.tsx +12 -0
  367. package/components/navigation/BackTop.jsx +23 -0
  368. package/components/navigation/BackTop.prompt.md +5 -0
  369. package/components/navigation/Breadcrumb.d.ts +14 -0
  370. package/components/navigation/Breadcrumb.figma.tsx +12 -0
  371. package/components/navigation/Breadcrumb.jsx +24 -0
  372. package/components/navigation/Breadcrumb.prompt.md +5 -0
  373. package/components/navigation/CommandPalette.d.ts +19 -0
  374. package/components/navigation/CommandPalette.figma.tsx +12 -0
  375. package/components/navigation/CommandPalette.jsx +48 -0
  376. package/components/navigation/CommandPalette.prompt.md +7 -0
  377. package/components/navigation/Dock.d.ts +6 -0
  378. package/components/navigation/Dock.figma.tsx +12 -0
  379. package/components/navigation/Dock.jsx +22 -0
  380. package/components/navigation/Dock.prompt.md +5 -0
  381. package/components/navigation/HotKeys.d.ts +13 -0
  382. package/components/navigation/HotKeys.figma.tsx +12 -0
  383. package/components/navigation/HotKeys.jsx +44 -0
  384. package/components/navigation/HotKeys.prompt.md +5 -0
  385. package/components/navigation/Link.d.ts +12 -0
  386. package/components/navigation/Link.figma.tsx +12 -0
  387. package/components/navigation/Link.jsx +13 -0
  388. package/components/navigation/Link.prompt.md +5 -0
  389. package/components/navigation/Menu.d.ts +23 -0
  390. package/components/navigation/Menu.figma.tsx +12 -0
  391. package/components/navigation/Menu.jsx +36 -0
  392. package/components/navigation/Menu.prompt.md +9 -0
  393. package/components/navigation/Menubar.d.ts +7 -0
  394. package/components/navigation/Menubar.figma.tsx +12 -0
  395. package/components/navigation/Menubar.jsx +48 -0
  396. package/components/navigation/Menubar.prompt.md +5 -0
  397. package/components/navigation/NavigationMenu.d.ts +7 -0
  398. package/components/navigation/NavigationMenu.figma.tsx +12 -0
  399. package/components/navigation/NavigationMenu.jsx +38 -0
  400. package/components/navigation/NavigationMenu.prompt.md +5 -0
  401. package/components/navigation/Pagination.d.ts +13 -0
  402. package/components/navigation/Pagination.figma.tsx +12 -0
  403. package/components/navigation/Pagination.jsx +32 -0
  404. package/components/navigation/Pagination.prompt.md +5 -0
  405. package/components/navigation/Sidebar.d.ts +20 -0
  406. package/components/navigation/Sidebar.figma.tsx +12 -0
  407. package/components/navigation/Sidebar.jsx +24 -0
  408. package/components/navigation/Sidebar.prompt.md +8 -0
  409. package/components/navigation/Steps.d.ts +13 -0
  410. package/components/navigation/Steps.figma.tsx +12 -0
  411. package/components/navigation/Steps.jsx +20 -0
  412. package/components/navigation/Steps.prompt.md +5 -0
  413. package/components/navigation/Tabs.d.ts +21 -0
  414. package/components/navigation/Tabs.figma.tsx +12 -0
  415. package/components/navigation/Tabs.jsx +41 -0
  416. package/components/navigation/Tabs.prompt.md +6 -0
  417. package/components/navigation/Toolbar.d.ts +16 -0
  418. package/components/navigation/Toolbar.figma.tsx +12 -0
  419. package/components/navigation/Toolbar.jsx +32 -0
  420. package/components/navigation/Toolbar.prompt.md +5 -0
  421. package/components/navigation/navigation.card.html +51 -0
  422. package/components/navigation/shell.card.html +52 -0
  423. package/components/overlays/ContextMenu.d.ts +10 -0
  424. package/components/overlays/ContextMenu.figma.tsx +12 -0
  425. package/components/overlays/ContextMenu.jsx +28 -0
  426. package/components/overlays/ContextMenu.prompt.md +7 -0
  427. package/components/overlays/Drawer.d.ts +18 -0
  428. package/components/overlays/Drawer.figma.tsx +12 -0
  429. package/components/overlays/Drawer.jsx +44 -0
  430. package/components/overlays/Drawer.prompt.md +8 -0
  431. package/components/overlays/HoverCard.d.ts +13 -0
  432. package/components/overlays/HoverCard.figma.tsx +12 -0
  433. package/components/overlays/HoverCard.jsx +17 -0
  434. package/components/overlays/HoverCard.prompt.md +5 -0
  435. package/components/overlays/Popconfirm.d.ts +18 -0
  436. package/components/overlays/Popconfirm.figma.tsx +12 -0
  437. package/components/overlays/Popconfirm.jsx +33 -0
  438. package/components/overlays/Popconfirm.prompt.md +6 -0
  439. package/components/overlays/Popover.d.ts +17 -0
  440. package/components/overlays/Popover.figma.tsx +12 -0
  441. package/components/overlays/Popover.jsx +24 -0
  442. package/components/overlays/Popover.prompt.md +7 -0
  443. package/components/overlays/Tour.d.ts +13 -0
  444. package/components/overlays/Tour.figma.tsx +12 -0
  445. package/components/overlays/Tour.jsx +46 -0
  446. package/components/overlays/Tour.prompt.md +5 -0
  447. package/components/overlays/overlays.card.html +50 -0
  448. package/components/textfield/TextField.d.ts +18 -0
  449. package/components/textfield/TextField.figma.tsx +14 -0
  450. package/components/textfield/TextField.jsx +44 -0
  451. package/components/textfield/TextField.prompt.md +11 -0
  452. package/components/textfield/textfield.card.html +34 -0
  453. package/docs/ci-cd.md +84 -0
  454. package/docs/consuming.md +109 -0
  455. package/docs/contrast-report.md +125 -0
  456. package/docs/conventions.md +114 -0
  457. package/docs/decisions.md +94 -0
  458. package/docs/deploy.md +110 -0
  459. package/docs/design-styles.md +25 -0
  460. package/docs/figma.md +119 -0
  461. package/docs/live-hub.md +58 -0
  462. package/docs/products.md +26 -0
  463. package/docs/quality-gates.md +94 -0
  464. package/docs/release-notes.md +31 -0
  465. package/docs/storybook.md +56 -0
  466. package/docs/sync.md +48 -0
  467. package/docs/template-schema-v2.md +36 -0
  468. package/docs/vi/ci-cd.md +84 -0
  469. package/docs/vi/consuming.md +109 -0
  470. package/docs/vi/contrast-report.md +125 -0
  471. package/docs/vi/conventions.md +114 -0
  472. package/docs/vi/decisions.md +94 -0
  473. package/docs/vi/deploy.md +110 -0
  474. package/docs/vi/design-styles.md +25 -0
  475. package/docs/vi/figma.md +119 -0
  476. package/docs/vi/live-hub.md +58 -0
  477. package/docs/vi/products.md +26 -0
  478. package/docs/vi/quality-gates.md +94 -0
  479. package/docs/vi/release-notes.md +31 -0
  480. package/docs/vi/storybook.md +56 -0
  481. package/docs/vi/sync.md +48 -0
  482. package/docs/vi/template-schema-v2.md +36 -0
  483. package/docs/viewer.html +230 -0
  484. package/fonts/bevietnampro-300-latin-ext.woff2 +0 -0
  485. package/fonts/bevietnampro-300-latin.woff2 +0 -0
  486. package/fonts/bevietnampro-300-vietnamese.woff2 +0 -0
  487. package/fonts/bevietnampro-400-latin-ext.woff2 +0 -0
  488. package/fonts/bevietnampro-400-latin.woff2 +0 -0
  489. package/fonts/bevietnampro-400-vietnamese.woff2 +0 -0
  490. package/fonts/bevietnampro-400i-latin-ext.woff2 +0 -0
  491. package/fonts/bevietnampro-400i-latin.woff2 +0 -0
  492. package/fonts/bevietnampro-400i-vietnamese.woff2 +0 -0
  493. package/fonts/bevietnampro-500-latin-ext.woff2 +0 -0
  494. package/fonts/bevietnampro-500-latin.woff2 +0 -0
  495. package/fonts/bevietnampro-500-vietnamese.woff2 +0 -0
  496. package/fonts/bevietnampro-600-latin-ext.woff2 +0 -0
  497. package/fonts/bevietnampro-600-latin.woff2 +0 -0
  498. package/fonts/bevietnampro-600-vietnamese.woff2 +0 -0
  499. package/fonts/bevietnampro-600i-latin-ext.woff2 +0 -0
  500. package/fonts/bevietnampro-600i-latin.woff2 +0 -0
  501. package/fonts/bevietnampro-600i-vietnamese.woff2 +0 -0
  502. package/fonts/bevietnampro-700-latin-ext.woff2 +0 -0
  503. package/fonts/bevietnampro-700-latin.woff2 +0 -0
  504. package/fonts/bevietnampro-700-vietnamese.woff2 +0 -0
  505. package/fonts/bevietnampro-800-latin-ext.woff2 +0 -0
  506. package/fonts/bevietnampro-800-latin.woff2 +0 -0
  507. package/fonts/bevietnampro-800-vietnamese.woff2 +0 -0
  508. package/fonts/jetbrainsmono-400-cyrillic-ext.woff2 +0 -0
  509. package/fonts/jetbrainsmono-400-cyrillic.woff2 +0 -0
  510. package/fonts/jetbrainsmono-400-greek.woff2 +0 -0
  511. package/fonts/jetbrainsmono-400-latin-ext.woff2 +0 -0
  512. package/fonts/jetbrainsmono-400-latin.woff2 +0 -0
  513. package/fonts/jetbrainsmono-400-vietnamese.woff2 +0 -0
  514. package/fonts/jetbrainsmono-500-cyrillic-ext.woff2 +0 -0
  515. package/fonts/jetbrainsmono-500-cyrillic.woff2 +0 -0
  516. package/fonts/jetbrainsmono-500-greek.woff2 +0 -0
  517. package/fonts/jetbrainsmono-500-latin-ext.woff2 +0 -0
  518. package/fonts/jetbrainsmono-500-latin.woff2 +0 -0
  519. package/fonts/jetbrainsmono-500-vietnamese.woff2 +0 -0
  520. package/fonts/jetbrainsmono-700-cyrillic-ext.woff2 +0 -0
  521. package/fonts/jetbrainsmono-700-cyrillic.woff2 +0 -0
  522. package/fonts/jetbrainsmono-700-greek.woff2 +0 -0
  523. package/fonts/jetbrainsmono-700-latin-ext.woff2 +0 -0
  524. package/fonts/jetbrainsmono-700-latin.woff2 +0 -0
  525. package/fonts/jetbrainsmono-700-vietnamese.woff2 +0 -0
  526. package/guidelines/atomic-view.html +497 -0
  527. package/guidelines/brand-iconography.html +51 -0
  528. package/guidelines/brand-imagery.html +23 -0
  529. package/guidelines/brand-interaction.html +24 -0
  530. package/guidelines/brand-voice.html +24 -0
  531. package/guidelines/colors-anchors.html +20 -0
  532. package/guidelines/colors-semantic.html +19 -0
  533. package/guidelines/colors-surfaces.html +19 -0
  534. package/guidelines/colors-text.html +20 -0
  535. package/guidelines/documents.html +43 -0
  536. package/guidelines/elements-components.html +27 -0
  537. package/guidelines/elements-concept.html +48 -0
  538. package/guidelines/elements-variants.html +49 -0
  539. package/guidelines/motion-interaction.html +29 -0
  540. package/guidelines/motion.html +53 -0
  541. package/guidelines/nav-model.cjs +113 -0
  542. package/guidelines/responsive-bilingual.html +75 -0
  543. package/guidelines/rtl-preview.html +115 -0
  544. package/guidelines/spacing-breakpoints.html +20 -0
  545. package/guidelines/spacing-radius.html +19 -0
  546. package/guidelines/spacing-scale.html +21 -0
  547. package/guidelines/surfaces-aurora.html +20 -0
  548. package/guidelines/surfaces-depth.html +27 -0
  549. package/guidelines/surfaces-glass.html +21 -0
  550. package/guidelines/surfaces-shadow.html +20 -0
  551. package/guidelines/type-families.html +25 -0
  552. package/guidelines/type-lineheight.html +16 -0
  553. package/guidelines/type-scale.html +21 -0
  554. package/guidelines/type-weights.html +20 -0
  555. package/llms.txt +70 -0
  556. package/package.json +88 -0
  557. package/styles.css +39 -0
  558. package/templates/_vendor/deck-stage.js +2584 -0
  559. package/templates/ai-cluster-demo.html +46 -0
  560. package/templates/app-shell/.thumbnail +0 -0
  561. package/templates/app-shell/AppShell.dc.html +80 -0
  562. package/templates/app-shell/content-schema.json +114 -0
  563. package/templates/app-shell/ds-base.js +23 -0
  564. package/templates/app-shell/support.js +1841 -0
  565. package/templates/article/.thumbnail +0 -0
  566. package/templates/article/Article.dc.html +67 -0
  567. package/templates/article/content-schema.json +80 -0
  568. package/templates/article/ds-base.js +23 -0
  569. package/templates/article/support.js +1841 -0
  570. package/templates/auth/.thumbnail +0 -0
  571. package/templates/auth/Auth.dc.html +72 -0
  572. package/templates/auth/content-schema.json +74 -0
  573. package/templates/auth/ds-base.js +23 -0
  574. package/templates/auth/support.js +1841 -0
  575. package/templates/bod-deck/.thumbnail +0 -0
  576. package/templates/bod-deck/BodDeck.dc.html +106 -0
  577. package/templates/bod-deck/content-schema.json +171 -0
  578. package/templates/bod-deck/ds-base.js +23 -0
  579. package/templates/bod-deck/support.js +1841 -0
  580. package/templates/bod-investor-update/.thumbnail +0 -0
  581. package/templates/bod-investor-update/BodInvestorUpdate.dc.html +81 -0
  582. package/templates/bod-investor-update/content-schema.json +105 -0
  583. package/templates/bod-investor-update/ds-base.js +23 -0
  584. package/templates/bod-investor-update/support.js +1841 -0
  585. package/templates/bod-memo/.thumbnail +0 -0
  586. package/templates/bod-memo/BodMemo.dc.html +87 -0
  587. package/templates/bod-memo/ds-base.js +23 -0
  588. package/templates/bod-memo/support.js +1841 -0
  589. package/templates/bod-minutes/.thumbnail +0 -0
  590. package/templates/bod-minutes/BodMinutes.dc.html +84 -0
  591. package/templates/bod-minutes/ds-base.js +23 -0
  592. package/templates/bod-minutes/support.js +1841 -0
  593. package/templates/bod-report/.thumbnail +0 -0
  594. package/templates/bod-report/BodReport.dc.html +106 -0
  595. package/templates/bod-report/content-schema.json +29 -0
  596. package/templates/bod-report/ds-base.js +23 -0
  597. package/templates/bod-report/support.js +1841 -0
  598. package/templates/bod-resolution/.thumbnail +0 -0
  599. package/templates/bod-resolution/BodResolution.dc.html +87 -0
  600. package/templates/bod-resolution/content-schema.json +123 -0
  601. package/templates/bod-resolution/ds-base.js +23 -0
  602. package/templates/bod-resolution/support.js +1841 -0
  603. package/templates/culture-event-invite/.thumbnail +0 -0
  604. package/templates/culture-event-invite/CultureEventInvite.dc.html +73 -0
  605. package/templates/culture-event-invite/ds-base.js +23 -0
  606. package/templates/culture-event-invite/support.js +1841 -0
  607. package/templates/dashboard/.thumbnail +0 -0
  608. package/templates/dashboard/Dashboard.dc.html +120 -0
  609. package/templates/dashboard/content-schema.json +97 -0
  610. package/templates/dashboard/ds-base.js +23 -0
  611. package/templates/dashboard/support.js +1841 -0
  612. package/templates/delivery-change-note/.thumbnail +0 -0
  613. package/templates/delivery-change-note/DeliveryChangeNote.dc.html +85 -0
  614. package/templates/delivery-change-note/content-schema.json +158 -0
  615. package/templates/delivery-change-note/ds-base.js +23 -0
  616. package/templates/delivery-change-note/support.js +1841 -0
  617. package/templates/delivery-kickoff/.thumbnail +0 -0
  618. package/templates/delivery-kickoff/DeliveryKickoff.dc.html +112 -0
  619. package/templates/delivery-kickoff/content-schema.json +223 -0
  620. package/templates/delivery-kickoff/ds-base.js +23 -0
  621. package/templates/delivery-kickoff/support.js +1841 -0
  622. package/templates/delivery-qbr-deck/.thumbnail +0 -0
  623. package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +118 -0
  624. package/templates/delivery-qbr-deck/content-schema.json +177 -0
  625. package/templates/delivery-qbr-deck/ds-base.js +23 -0
  626. package/templates/delivery-qbr-deck/support.js +1841 -0
  627. package/templates/delivery-runbook/.thumbnail +0 -0
  628. package/templates/delivery-runbook/DeliveryRunbook.dc.html +91 -0
  629. package/templates/delivery-runbook/content-schema.json +211 -0
  630. package/templates/delivery-runbook/ds-base.js +23 -0
  631. package/templates/delivery-runbook/support.js +1841 -0
  632. package/templates/delivery-status-email/.thumbnail +0 -0
  633. package/templates/delivery-status-email/DeliveryStatusEmail.dc.html +78 -0
  634. package/templates/delivery-status-email/ds-base.js +23 -0
  635. package/templates/delivery-status-email/support.js +1841 -0
  636. package/templates/doc-style-guide/.thumbnail +0 -0
  637. package/templates/doc-style-guide/DocStyleGuide.dc.html +148 -0
  638. package/templates/doc-style-guide/ds-base.js +23 -0
  639. package/templates/doc-style-guide/support.js +1841 -0
  640. package/templates/doc-suite-index/.thumbnail +0 -0
  641. package/templates/doc-suite-index/DocSuiteIndex.dc.html +201 -0
  642. package/templates/doc-suite-index/content-schema.json +12 -0
  643. package/templates/doc-suite-index/ds-base.js +23 -0
  644. package/templates/doc-suite-index/support.js +1841 -0
  645. package/templates/doc-templates/.thumbnail +0 -0
  646. package/templates/doc-templates/DocTemplates.dc.html +118 -0
  647. package/templates/doc-templates/ds-base.js +23 -0
  648. package/templates/doc-templates/support.js +1841 -0
  649. package/templates/email/.thumbnail +0 -0
  650. package/templates/email/Email-VN-standalone.html +59 -0
  651. package/templates/email/Email.dc.html +67 -0
  652. package/templates/email/ds-base.js +23 -0
  653. package/templates/email/support.js +1841 -0
  654. package/templates/email-safe/README.md +28 -0
  655. package/templates/email-safe/email-announcement.html +88 -0
  656. package/templates/email-safe/email-dunning.html +59 -0
  657. package/templates/email-safe/email-investor.html +88 -0
  658. package/templates/email-safe/email-launch.html +88 -0
  659. package/templates/email-safe/email-newsletter.html +62 -0
  660. package/templates/email-safe/email-status.html +88 -0
  661. package/templates/email-safe/email-transactional.html +88 -0
  662. package/templates/finance-dunning-email/.thumbnail +0 -0
  663. package/templates/finance-dunning-email/FinanceDunningEmail.dc.html +58 -0
  664. package/templates/finance-dunning-email/ds-base.js +23 -0
  665. package/templates/finance-dunning-email/support.js +1841 -0
  666. package/templates/finance-expense-report/.thumbnail +0 -0
  667. package/templates/finance-expense-report/FinanceExpenseReport.dc.html +82 -0
  668. package/templates/finance-expense-report/ds-base.js +23 -0
  669. package/templates/finance-expense-report/support.js +1841 -0
  670. package/templates/finance-invoice/.thumbnail +0 -0
  671. package/templates/finance-invoice/FinanceInvoice.dc.html +92 -0
  672. package/templates/finance-invoice/ds-base.js +23 -0
  673. package/templates/finance-invoice/support.js +1841 -0
  674. package/templates/finance-quote/.thumbnail +0 -0
  675. package/templates/finance-quote/FinanceQuote.dc.html +86 -0
  676. package/templates/finance-quote/ds-base.js +23 -0
  677. package/templates/finance-quote/support.js +1841 -0
  678. package/templates/hr-announcement/.thumbnail +0 -0
  679. package/templates/hr-announcement/HrAnnouncement.dc.html +64 -0
  680. package/templates/hr-announcement/ds-base.js +23 -0
  681. package/templates/hr-announcement/support.js +1841 -0
  682. package/templates/hr-interview-kit/.thumbnail +0 -0
  683. package/templates/hr-interview-kit/HrInterviewKit.dc.html +102 -0
  684. package/templates/hr-interview-kit/ds-base.js +23 -0
  685. package/templates/hr-interview-kit/support.js +1841 -0
  686. package/templates/hr-offboarding/.thumbnail +0 -0
  687. package/templates/hr-offboarding/HrOffboarding.dc.html +86 -0
  688. package/templates/hr-offboarding/ds-base.js +23 -0
  689. package/templates/hr-offboarding/support.js +1841 -0
  690. package/templates/hr-performance-review/.thumbnail +0 -0
  691. package/templates/hr-performance-review/HrPerformanceReview.dc.html +95 -0
  692. package/templates/hr-performance-review/ds-base.js +23 -0
  693. package/templates/hr-performance-review/support.js +1841 -0
  694. package/templates/hr-pip/.thumbnail +0 -0
  695. package/templates/hr-pip/HrPip.dc.html +73 -0
  696. package/templates/hr-pip/ds-base.js +23 -0
  697. package/templates/hr-pip/support.js +1841 -0
  698. package/templates/image-slots-demo.html +57 -0
  699. package/templates/kitchen-sink.html +127 -0
  700. package/templates/legal-msa/.thumbnail +0 -0
  701. package/templates/legal-msa/LegalMsa.dc.html +85 -0
  702. package/templates/legal-msa/ds-base.js +23 -0
  703. package/templates/legal-msa/support.js +1841 -0
  704. package/templates/legal-sow/.thumbnail +0 -0
  705. package/templates/legal-sow/LegalSow.dc.html +125 -0
  706. package/templates/legal-sow/ds-base.js +23 -0
  707. package/templates/legal-sow/support.js +1841 -0
  708. package/templates/marketing-campaign-brief/.thumbnail +0 -0
  709. package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +86 -0
  710. package/templates/marketing-campaign-brief/content-schema.json +139 -0
  711. package/templates/marketing-campaign-brief/ds-base.js +23 -0
  712. package/templates/marketing-campaign-brief/support.js +1841 -0
  713. package/templates/marketing-case-study/.thumbnail +0 -0
  714. package/templates/marketing-case-study/MarketingCaseStudy.dc.html +82 -0
  715. package/templates/marketing-case-study/content-schema.json +103 -0
  716. package/templates/marketing-case-study/ds-base.js +23 -0
  717. package/templates/marketing-case-study/support.js +1841 -0
  718. package/templates/marketing-launch/.thumbnail +0 -0
  719. package/templates/marketing-launch/MarketingLaunch.dc.html +84 -0
  720. package/templates/marketing-launch/ds-base.js +23 -0
  721. package/templates/marketing-launch/support.js +1841 -0
  722. package/templates/marketing-newsletter/.thumbnail +0 -0
  723. package/templates/marketing-newsletter/MarketingNewsletter.dc.html +109 -0
  724. package/templates/marketing-newsletter/ds-base.js +23 -0
  725. package/templates/marketing-newsletter/support.js +1841 -0
  726. package/templates/marketing-page/.thumbnail +0 -0
  727. package/templates/marketing-page/MarketingPage.dc.html +132 -0
  728. package/templates/marketing-page/content-schema.json +33 -0
  729. package/templates/marketing-page/ds-base.js +23 -0
  730. package/templates/marketing-page/support.js +1841 -0
  731. package/templates/marketing-press-release/.thumbnail +0 -0
  732. package/templates/marketing-press-release/MarketingPressRelease.dc.html +84 -0
  733. package/templates/marketing-press-release/content-schema.json +116 -0
  734. package/templates/marketing-press-release/ds-base.js +23 -0
  735. package/templates/marketing-press-release/support.js +1841 -0
  736. package/templates/marketing-social-kit/.thumbnail +0 -0
  737. package/templates/marketing-social-kit/MarketingSocialKit.dc.html +77 -0
  738. package/templates/marketing-social-kit/content-schema.json +54 -0
  739. package/templates/marketing-social-kit/ds-base.js +23 -0
  740. package/templates/marketing-social-kit/support.js +1841 -0
  741. package/templates/playground.html +79 -0
  742. package/templates/sales-one-pager/.thumbnail +0 -0
  743. package/templates/sales-one-pager/SalesOnePager.dc.html +103 -0
  744. package/templates/sales-one-pager/content-schema.json +73 -0
  745. package/templates/sales-one-pager/ds-base.js +23 -0
  746. package/templates/sales-one-pager/support.js +1841 -0
  747. package/templates/sales-proposal-deck/.thumbnail +0 -0
  748. package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +159 -0
  749. package/templates/sales-proposal-deck/content-schema.json +273 -0
  750. package/templates/sales-proposal-deck/ds-base.js +23 -0
  751. package/templates/sales-proposal-deck/support.js +1841 -0
  752. package/templates/schema/content-schema.schema.json +31 -0
  753. package/templates/settings/.thumbnail +0 -0
  754. package/templates/settings/Settings.dc.html +86 -0
  755. package/templates/settings/content-schema.json +131 -0
  756. package/templates/settings/ds-base.js +23 -0
  757. package/templates/settings/support.js +1841 -0
  758. package/templates/slide-deck/.thumbnail +0 -0
  759. package/templates/slide-deck/SlideDeck.dc.html +86 -0
  760. package/templates/slide-deck/content-schema.json +23 -0
  761. package/templates/slide-deck/ds-base.js +23 -0
  762. package/templates/slide-deck/support.js +1841 -0
  763. package/templates/team-meeting-agenda/.thumbnail +0 -0
  764. package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +93 -0
  765. package/templates/team-meeting-agenda/ds-base.js +23 -0
  766. package/templates/team-meeting-agenda/support.js +1841 -0
  767. package/templates/tech-incident-report/.thumbnail +0 -0
  768. package/templates/tech-incident-report/TechIncidentReport.dc.html +111 -0
  769. package/templates/tech-incident-report/content-schema.json +25 -0
  770. package/templates/tech-incident-report/ds-base.js +23 -0
  771. package/templates/tech-incident-report/support.js +1841 -0
  772. package/templates/tech-release-notes/.thumbnail +0 -0
  773. package/templates/tech-release-notes/TechReleaseNotes.dc.html +79 -0
  774. package/templates/tech-release-notes/ds-base.js +23 -0
  775. package/templates/tech-release-notes/support.js +1841 -0
  776. package/templates/tech-retro/.thumbnail +0 -0
  777. package/templates/tech-retro/TechRetro.dc.html +84 -0
  778. package/templates/tech-retro/ds-base.js +23 -0
  779. package/templates/tech-retro/support.js +1841 -0
  780. package/templates/tech-rfc/.thumbnail +0 -0
  781. package/templates/tech-rfc/TechRfc.dc.html +87 -0
  782. package/templates/tech-rfc/content-schema.json +115 -0
  783. package/templates/tech-rfc/ds-base.js +23 -0
  784. package/templates/tech-rfc/support.js +1841 -0
  785. package/templates/vn-appointment-transfer/.thumbnail +0 -0
  786. package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +101 -0
  787. package/templates/vn-appointment-transfer/ds-base.js +23 -0
  788. package/templates/vn-appointment-transfer/support.js +1841 -0
  789. package/templates/vn-certificate-of-employment/.thumbnail +0 -0
  790. package/templates/vn-certificate-of-employment/VnCertificateOfEmployment.dc.html +84 -0
  791. package/templates/vn-certificate-of-employment/ds-base.js +23 -0
  792. package/templates/vn-certificate-of-employment/support.js +1841 -0
  793. package/templates/vn-code-of-conduct/.thumbnail +0 -0
  794. package/templates/vn-code-of-conduct/VnCodeOfConduct.dc.html +105 -0
  795. package/templates/vn-code-of-conduct/ds-base.js +23 -0
  796. package/templates/vn-code-of-conduct/support.js +1841 -0
  797. package/templates/vn-compensation-regulation/.thumbnail +0 -0
  798. package/templates/vn-compensation-regulation/VnCompensationRegulation.dc.html +122 -0
  799. package/templates/vn-compensation-regulation/ds-base.js +23 -0
  800. package/templates/vn-compensation-regulation/support.js +1841 -0
  801. package/templates/vn-contract-amendment/.thumbnail +0 -0
  802. package/templates/vn-contract-amendment/VnContractAmendment.dc.html +107 -0
  803. package/templates/vn-contract-amendment/ds-base.js +23 -0
  804. package/templates/vn-contract-amendment/support.js +1841 -0
  805. package/templates/vn-contractor-agreement/.thumbnail +0 -0
  806. package/templates/vn-contractor-agreement/VnContractorAgreement.dc.html +120 -0
  807. package/templates/vn-contractor-agreement/ds-base.js +23 -0
  808. package/templates/vn-contractor-agreement/support.js +1841 -0
  809. package/templates/vn-data-protection-policy/.thumbnail +0 -0
  810. package/templates/vn-data-protection-policy/VnDataProtectionPolicy.dc.html +116 -0
  811. package/templates/vn-data-protection-policy/ds-base.js +23 -0
  812. package/templates/vn-data-protection-policy/support.js +1841 -0
  813. package/templates/vn-disciplinary-case-file/.thumbnail +0 -0
  814. package/templates/vn-disciplinary-case-file/VnDisciplinaryCaseFile.dc.html +172 -0
  815. package/templates/vn-disciplinary-case-file/ds-base.js +23 -0
  816. package/templates/vn-disciplinary-case-file/support.js +1841 -0
  817. package/templates/vn-disciplinary-schedule/.thumbnail +0 -0
  818. package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +91 -0
  819. package/templates/vn-disciplinary-schedule/ds-base.js +23 -0
  820. package/templates/vn-disciplinary-schedule/support.js +1841 -0
  821. package/templates/vn-employee-request/.thumbnail +0 -0
  822. package/templates/vn-employee-request/VnEmployeeRequest.dc.html +137 -0
  823. package/templates/vn-employee-request/ds-base.js +23 -0
  824. package/templates/vn-employee-request/support.js +1841 -0
  825. package/templates/vn-exit-handover/.thumbnail +0 -0
  826. package/templates/vn-exit-handover/VnExitHandover.dc.html +228 -0
  827. package/templates/vn-exit-handover/ds-base.js +23 -0
  828. package/templates/vn-exit-handover/support.js +1841 -0
  829. package/templates/vn-foreign-employee-pack/.thumbnail +0 -0
  830. package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +129 -0
  831. package/templates/vn-foreign-employee-pack/content-schema.json +22 -0
  832. package/templates/vn-foreign-employee-pack/ds-base.js +23 -0
  833. package/templates/vn-foreign-employee-pack/support.js +1841 -0
  834. package/templates/vn-grassroots-democracy/.thumbnail +0 -0
  835. package/templates/vn-grassroots-democracy/VnGrassrootsDemocracy.dc.html +117 -0
  836. package/templates/vn-grassroots-democracy/ds-base.js +23 -0
  837. package/templates/vn-grassroots-democracy/support.js +1841 -0
  838. package/templates/vn-infosec-policy/.thumbnail +0 -0
  839. package/templates/vn-infosec-policy/VnInfosecPolicy.dc.html +116 -0
  840. package/templates/vn-infosec-policy/ds-base.js +23 -0
  841. package/templates/vn-infosec-policy/support.js +1841 -0
  842. package/templates/vn-internal-labor-regulations/.thumbnail +0 -0
  843. package/templates/vn-internal-labor-regulations/VnInternalLaborRegulations.dc.html +155 -0
  844. package/templates/vn-internal-labor-regulations/ds-base.js +23 -0
  845. package/templates/vn-internal-labor-regulations/support.js +1841 -0
  846. package/templates/vn-internship-agreement/.thumbnail +0 -0
  847. package/templates/vn-internship-agreement/VnInternshipAgreement.dc.html +112 -0
  848. package/templates/vn-internship-agreement/ds-base.js +23 -0
  849. package/templates/vn-internship-agreement/support.js +1841 -0
  850. package/templates/vn-job-description/.thumbnail +0 -0
  851. package/templates/vn-job-description/VnJobDescription.dc.html +85 -0
  852. package/templates/vn-job-description/ds-base.js +23 -0
  853. package/templates/vn-job-description/support.js +1841 -0
  854. package/templates/vn-labor-contract/.thumbnail +0 -0
  855. package/templates/vn-labor-contract/VnLaborContract.dc.html +180 -0
  856. package/templates/vn-labor-contract/ds-base.js +23 -0
  857. package/templates/vn-labor-contract/support.js +1841 -0
  858. package/templates/vn-labour-management-book/.thumbnail +0 -0
  859. package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +115 -0
  860. package/templates/vn-labour-management-book/ds-base.js +23 -0
  861. package/templates/vn-labour-management-book/support.js +1841 -0
  862. package/templates/vn-mutual-nda/.thumbnail +0 -0
  863. package/templates/vn-mutual-nda/VnMutualNda.dc.html +114 -0
  864. package/templates/vn-mutual-nda/ds-base.js +23 -0
  865. package/templates/vn-mutual-nda/support.js +1841 -0
  866. package/templates/vn-ndnca-ip/.thumbnail +0 -0
  867. package/templates/vn-ndnca-ip/VnNdncaIp.dc.html +157 -0
  868. package/templates/vn-ndnca-ip/ds-base.js +23 -0
  869. package/templates/vn-ndnca-ip/support.js +1841 -0
  870. package/templates/vn-offer-letter/.thumbnail +0 -0
  871. package/templates/vn-offer-letter/VnOfferLetter.dc.html +84 -0
  872. package/templates/vn-offer-letter/ds-base.js +23 -0
  873. package/templates/vn-offer-letter/support.js +1841 -0
  874. package/templates/vn-onboarding-checklist/.thumbnail +0 -0
  875. package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +98 -0
  876. package/templates/vn-onboarding-checklist/content-schema.json +12 -0
  877. package/templates/vn-onboarding-checklist/ds-base.js +23 -0
  878. package/templates/vn-onboarding-checklist/support.js +1841 -0
  879. package/templates/vn-pdpl-consent/.thumbnail +0 -0
  880. package/templates/vn-pdpl-consent/VnPdplConsent.dc.html +111 -0
  881. package/templates/vn-pdpl-consent/ds-base.js +23 -0
  882. package/templates/vn-pdpl-consent/support.js +1841 -0
  883. package/templates/vn-performance-evaluation-regulation/.thumbnail +0 -0
  884. package/templates/vn-performance-evaluation-regulation/VnPerformanceEvaluationRegulation.dc.html +135 -0
  885. package/templates/vn-performance-evaluation-regulation/ds-base.js +23 -0
  886. package/templates/vn-performance-evaluation-regulation/support.js +1841 -0
  887. package/templates/vn-performance-review-form/.thumbnail +0 -0
  888. package/templates/vn-performance-review-form/VnPerformanceReviewForm.dc.html +129 -0
  889. package/templates/vn-performance-review-form/ds-base.js +23 -0
  890. package/templates/vn-performance-review-form/support.js +1841 -0
  891. package/templates/vn-phantom-stock/.thumbnail +0 -0
  892. package/templates/vn-phantom-stock/VnPhantomStock.dc.html +184 -0
  893. package/templates/vn-phantom-stock/content-schema.json +17 -0
  894. package/templates/vn-phantom-stock/ds-base.js +23 -0
  895. package/templates/vn-phantom-stock/support.js +1841 -0
  896. package/templates/vn-probation-contract/.thumbnail +0 -0
  897. package/templates/vn-probation-contract/VnProbationContract.dc.html +126 -0
  898. package/templates/vn-probation-contract/ds-base.js +23 -0
  899. package/templates/vn-probation-contract/support.js +1841 -0
  900. package/templates/vn-receipt-acknowledgement/.thumbnail +0 -0
  901. package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +106 -0
  902. package/templates/vn-receipt-acknowledgement/ds-base.js +23 -0
  903. package/templates/vn-receipt-acknowledgement/support.js +1841 -0
  904. package/templates/vn-remote-work-policy/.thumbnail +0 -0
  905. package/templates/vn-remote-work-policy/VnRemoteWorkPolicy.dc.html +103 -0
  906. package/templates/vn-remote-work-policy/ds-base.js +23 -0
  907. package/templates/vn-remote-work-policy/support.js +1841 -0
  908. package/templates/vn-resignation-letter/.thumbnail +0 -0
  909. package/templates/vn-resignation-letter/VnResignationLetter.dc.html +71 -0
  910. package/templates/vn-resignation-letter/ds-base.js +23 -0
  911. package/templates/vn-resignation-letter/support.js +1841 -0
  912. package/templates/vn-salary-scale/.thumbnail +0 -0
  913. package/templates/vn-salary-scale/VnSalaryScale.dc.html +110 -0
  914. package/templates/vn-salary-scale/ds-base.js +23 -0
  915. package/templates/vn-salary-scale/support.js +1841 -0
  916. package/templates/vn-sow-appendix/.thumbnail +0 -0
  917. package/templates/vn-sow-appendix/VnSowAppendix.dc.html +70 -0
  918. package/templates/vn-sow-appendix/ds-base.js +23 -0
  919. package/templates/vn-sow-appendix/support.js +1841 -0
  920. package/templates/vn-termination-decision/.thumbnail +0 -0
  921. package/templates/vn-termination-decision/VnTerminationDecision.dc.html +80 -0
  922. package/templates/vn-termination-decision/ds-base.js +23 -0
  923. package/templates/vn-termination-decision/support.js +1841 -0
  924. package/templates/vn-total-rewards-appendix/.thumbnail +0 -0
  925. package/templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html +138 -0
  926. package/templates/vn-total-rewards-appendix/ds-base.js +23 -0
  927. package/templates/vn-total-rewards-appendix/support.js +1841 -0
  928. package/templates/vn-training-commitment/.thumbnail +0 -0
  929. package/templates/vn-training-commitment/VnTrainingCommitment.dc.html +105 -0
  930. package/templates/vn-training-commitment/ds-base.js +23 -0
  931. package/templates/vn-training-commitment/support.js +1841 -0
  932. package/templates/vn-travel-expense-policy/.thumbnail +0 -0
  933. package/templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html +113 -0
  934. package/templates/vn-travel-expense-policy/ds-base.js +23 -0
  935. package/templates/vn-travel-expense-policy/support.js +1841 -0
  936. package/tokens/colors.css +77 -0
  937. package/tokens/component-tokens.css +46 -0
  938. package/tokens/elements.css +300 -0
  939. package/tokens/elevation.css +46 -0
  940. package/tokens/fonts.css +51 -0
  941. package/tokens/motion.css +25 -0
  942. package/tokens/native/CSTokens.kt +255 -0
  943. package/tokens/native/CSTokens.swift +257 -0
  944. package/tokens/native/cs_tokens.dart +253 -0
  945. package/tokens/provenance.json +52 -0
  946. package/tokens/spacing.css +34 -0
  947. package/tokens/tokens.dtcg.json +1222 -0
  948. package/tokens/tokens.js +436 -0
  949. package/tokens/tokens.json +434 -0
  950. package/tokens/typography.css +67 -0
  951. package/tokens/viewer.html +261 -0
  952. package/ui_kits/deck/README.md +21 -0
  953. package/ui_kits/deck/index.html +120 -0
  954. package/ui_kits/status-hub/README.md +40 -0
  955. package/ui_kits/status-hub/StatusHub.jsx +270 -0
  956. package/ui_kits/status-hub/data.js +57 -0
  957. package/ui_kits/status-hub/identity-lab.html +134 -0
  958. package/ui_kits/status-hub/index.html +24 -0
  959. package/ui_kits/status-hub/login.html +65 -0
  960. package/ui_kits/status-hub/project.html +137 -0
  961. package/ui_kits/status-hub/settings.html +88 -0
  962. package/ui_kits/status-hub/status.css +199 -0
  963. package/ui_kits/website/README.md +36 -0
  964. package/ui_kits/website/Website.jsx +167 -0
  965. package/ui_kits/website/careers.html +109 -0
  966. package/ui_kits/website/chat.html +133 -0
  967. package/ui_kits/website/copy.js +76 -0
  968. package/ui_kits/website/index.html +24 -0
  969. package/ui_kits/website/site.css +121 -0
  970. package/ui_kits/website/work.html +119 -0
package/guidelines/atomic-view.html ADDED
@@ -0,0 +1,497 @@
1
+ <!-- @dsCard group="Atomic View" viewport="1280x820" name="Atomic View" subtitle="Storybook-style browser — every component + variants, live across Theme × Element × Language" -->
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <title>CyberSkill — Atomic View</title>
8
+ <link rel="stylesheet" href="../styles.css" />
9
+ <style>
10
+ *{box-sizing:border-box}
11
+ body{margin:0;font-family:var(--cs-font-family-ui);color:var(--cs-color-text-primary);background:var(--cs-color-surface-raised)}
12
+ .app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}
13
+ /* --- chrome (always base brand, never reskinned) --- */
14
+ .nav{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;border-inline-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);padding:16px 12px}
15
+ .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;color:var(--cs-color-text-primary);padding:4px 8px 12px}
16
+ .brand small{font-weight:600;font-size:10.5px;color:var(--cs-color-text-primary);opacity:.72;letter-spacing:.04em;text-transform:uppercase}
17
+ .navsearch{width:100%;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-page);padding:8px 10px;font:inherit;font-size:13px;margin-bottom:10px;color:var(--cs-color-text-primary)}
18
+ .navsearch::placeholder{color:var(--cs-color-text-primary);opacity:.55}
19
+ .navgroup{border-top:1px solid var(--cs-color-border-default);margin-top:6px;padding-top:2px}
20
+ .navgroup:first-of-type{border-top:0;margin-top:0}
21
+ .navtier{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font:800 11px/1.4 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-primary);padding:10px 8px 6px;background:none;border:0;cursor:pointer;text-align:start}
22
+ .navtier:hover{color:var(--cs-color-brand-umber)}
23
+ [data-theme="dark"] .navtier:hover{color:var(--cs-color-brand-ochre)}
24
+ .navtier em,.navcount{font-style:normal;font-family:var(--cs-font-family-mono);font-size:10px;font-weight:700;color:var(--cs-color-text-inverse);background:var(--cs-color-brand-umber);padding:2px 6px;border-radius:999px;min-inline-size:1.4em;text-align:center}
25
+ .navsub{font:800 10px/1.3 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.09em;color:var(--cs-color-brand-umber);padding:8px 8px 3px;margin-top:2px}
26
+ [data-theme="dark"] .navsub{color:var(--cs-color-brand-ochre)}
27
+ .navlink{display:flex;justify-content:space-between;align-items:baseline;gap:8px;text-decoration:none;color:var(--cs-color-text-primary);font-size:13px;padding:5px 8px 5px 12px;border-radius:var(--cs-radius-sm)}
28
+ .navlink:hover{background:var(--cs-color-surface-raised);color:var(--cs-color-text-primary)}
29
+ .navlink .cat{flex:none;font:700 9.5px/1 var(--cs-font-family-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--cs-color-brand-umber);background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default);padding:3px 6px;border-radius:999px}
30
+ [data-theme="dark"] .navlink .cat{color:var(--cs-color-brand-ochre);border-color:var(--cs-color-border-default)}
31
+ .grphead{font:800 11px/1.3 var(--cs-font-family-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-brand-umber);margin:22px 0 6px}
32
+ [data-theme="dark"] .grphead{color:var(--cs-color-brand-ochre)}
33
+ .story .grp{font-size:11px;font-weight:700;color:var(--cs-color-brand-umber);background:var(--cs-color-surface-page);border:1px solid var(--cs-color-border-default);padding:2px 7px;border-radius:999px}
34
+ [data-theme="dark"] .story .grp{color:var(--cs-color-brand-ochre)}
35
+ .motion-embed{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-color-surface-panel);margin:16px 0}
36
+ .motion-embed iframe{width:100%;height:320px;border:0;display:block;background:var(--cs-color-surface-page)}
37
+ main{min-width:0}
38
+ .toolbar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding:12px 22px;background:color-mix(in oklab,var(--cs-color-surface-panel) 88%,transparent);backdrop-filter:blur(8px);border-block-end:1px solid var(--cs-color-border-default)}
39
+ .toolbar h1{font-size:15px;margin:0;letter-spacing:-.01em}
40
+ .ctl{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--cs-color-text-muted)}
41
+ .ctl select{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-sm);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
42
+ .count{margin-inline-start:auto;font-size:12px;color:var(--cs-color-text-muted);font-family:var(--cs-font-family-mono)}
43
+ /* --- canvas (reskinned by the axis attrs) --- */
44
+ #canvas{background:var(--cs-color-surface-page);padding:8px 22px 60px;min-height:calc(100vh - 52px)}
45
+ .tierhead{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:30px 0 4px;padding-top:10px;scroll-margin-top:64px}
46
+ .tierhead .sub{display:block;font-size:12.5px;font-weight:500;color:var(--cs-color-text-muted);letter-spacing:0}
47
+ .story{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);background:var(--cs-color-surface-panel);margin:16px 0;overflow:hidden;scroll-margin-top:64px}
48
+ .story>header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:11px 16px;border-block-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised)}
49
+ .story h3{margin:0;font-size:14.5px;font-weight:700}
50
+ .story .exp{margin-inline-start:auto;font-family:var(--cs-font-family-mono);font-size:10.5px;font-weight:600;color:var(--cs-color-text-primary);opacity:.72}
51
+ .story .perma{text-decoration:none;color:var(--cs-color-text-muted);font-family:var(--cs-font-family-mono);font-size:12px;padding:0 4px;border-radius:4px}
52
+ .story .perma:hover{color:var(--cs-color-brand-umber);background:var(--cs-color-surface-raised)}
53
+ .canvasbox{padding:20px 18px}
54
+ .framed{position:relative;z-index:0;min-height:250px;overflow:hidden;background:var(--cs-color-surface-raised);border-radius:var(--cs-radius-md)}
55
+ .framed .cs-dialog-layer,.framed .cs-drawer-scrim,.framed .cs-drawer,.framed .cs-toast-stack,.framed .cs-popover-layer{position:absolute}
56
+ .framed .cs-cmdk-scrim{position:static;inset:auto;background:transparent;padding:0;display:block;min-block-size:0}
57
+ .framed .cs-cmdk{inline-size:100%;box-shadow:none;position:static;margin:0}
58
+ .framed .cs-drawer-scrim,.framed .cs-drawer{animation:none}
59
+ .framed .cs-dialog{top:22px}
60
+ .srow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
61
+ .scol{display:grid;gap:14px}
62
+ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;align-items:start}
63
+ .icells{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:9px}
64
+ .icell{display:grid;place-items:center;gap:7px;padding:12px 4px;border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-panel)}
65
+ .icell span{font-family:var(--cs-font-family-mono);font-size:10.5px;color:var(--cs-color-text-muted)}
66
+ .miss{color:var(--cs-color-semantic-danger);font-size:13px;font-family:var(--cs-font-family-mono)}
67
+ .pglabel{font:700 10px/1 var(--cs-font-family-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--cs-color-text-muted);margin-bottom:8px}
68
+ .controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:10px 12px;margin-bottom:14px;border:1px dashed var(--cs-color-border-default);border-radius:var(--cs-radius-md);background:var(--cs-color-surface-raised)}
69
+ .controls label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--cs-color-text-muted)}
70
+ .controls select,.controls input[type=text]{font:inherit;font-size:12px;padding:3px 6px;border:1px solid var(--cs-color-border-default);border-radius:4px;background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary)}
71
+ .cstage{padding:4px 0 16px;border-bottom:1px dashed var(--cs-color-border-default);margin-bottom:16px}
72
+ .tpltier{display:grid;gap:16px}
73
+ .tpl{border:1px solid var(--cs-color-border-default);border-radius:var(--cs-radius-lg);overflow:hidden;background:var(--cs-color-surface-panel);scroll-margin-top:64px}
74
+ .tpl>header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-block-end:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-raised);font-size:13px;font-weight:700}
75
+ .tpl>header a{font:inherit;font-weight:600;font-size:11px;color:var(--cs-color-link);text-decoration:none}
76
+ .tpl iframe{width:100%;height:470px;border:0;display:block;background:#fff}
77
+ @media (max-width:820px){.app{grid-template-columns:1fr}.nav{display:none}.grid2{grid-template-columns:1fr}}
78
+ </style>
79
+ <script src="nav-model.cjs"></script>
80
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
81
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
82
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
83
+ <script src="../_ds_bundle.js"></script>
84
+ </head>
85
+ <body>
86
+ <div id="root"></div>
87
+ <script type="text/babel">
88
+ const { useState, useEffect, useRef } = React;
89
+ const NS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};
90
+ const {
91
+ Button, Icon, Badge, Tag, Alert, Toast, ToastStack, Spinner, ProgressBar, Skeleton, StatusIndicator, EmptyState,
92
+ TextField, Select, Checkbox, RadioGroup, Switch, Textarea, SearchField, NumberField, Slider, FileUpload, SegmentedControl,
93
+ Tabs, Breadcrumb, Pagination, Menu, MenuItem, Sidebar, NavItem, Steps, CommandPalette,
94
+ DataTable, Card, CardHeader, CardBody, CardFooter, Stat, Avatar, AvatarGroup, Tooltip, Divider,
95
+ List, ListItem, DescriptionList, Timeline, Accordion, Kbd, CodeBlock, Dialog, Drawer, Popover,
96
+ PromptInput, ChatMessage, ConfidenceMeter, AIDisclosureBadge, HumanReviewGate, PromptSuggestions, TypingIndicator, CitationList,
97
+ LumiAvatar, Logo, Toggle, Rating, InputOTP, ButtonGroup, Combobox, InputGroup, TagInput, Calendar, DatePicker, TimePicker,
98
+ HoverCard, Popconfirm, ContextMenu, FloatingActionButton, Result, InlineEdit, Link, Anchor, Image, Toolbar,
99
+ Menubar, NavigationMenu, Carousel, Comment, Form, FormField, FormFieldArray, FormWizard, Tree, BackTop, Watermark, TreeSelect, Cascader, Transfer, Mentions,
100
+ ColorPicker, Tour, QRCode, Masonry, Splitter, HotKeys, Dock, DataGrid, TreeTable, Sortable, Chart, Editor, Terminal
101
+ } = NS;
102
+
103
+ const slug = (s) => s.toLowerCase().replace(/[^a-z0-9]+/g,"-");
104
+ const Miss = ({n}) => <div className="miss">⚠ {n} not found on bundle</div>;
105
+ const has = (...c) => c.every(Boolean);
106
+
107
+ // ---- live controls panel (Storybook-style) ----
108
+ function Ctl({c,val,onCh}){
109
+ if(c.type==="toggle") return <label><input type="checkbox" checked={val} onChange={(e)=>onCh(e.target.checked)}/>{c.k}</label>;
110
+ if(c.type==="text") return <label>{c.k}<input type="text" value={val} onChange={(e)=>onCh(e.target.value)}/></label>;
111
+ if(c.type==="range") return <label>{c.k}<input type="range" min={c.min} max={c.max} step={c.step} value={val} onChange={(e)=>onCh(+e.target.value)}/><b style={{fontFamily:"var(--cs-font-family-mono)",fontWeight:400,fontSize:11}}>{val}</b></label>;
112
+ return <label>{c.k}<select value={val} onChange={(e)=>onCh(e.target.value)}>{c.options.map(o=><option key={o} value={o}>{o}</option>)}</select></label>;
113
+ }
114
+ function Controlled({spec}){
115
+ const init={}; spec.controls.forEach(c=>init[c.k]=c.def);
116
+ const [v,setV]=useState(init);
117
+ return <div>
118
+ <div className="pglabel">Playground — live props</div>
119
+ <div className="controls">{spec.controls.map(c=><Ctl key={c.k} c={c} val={v[c.k]} onCh={(nv)=>setV(s=>({...s,[c.k]:nv}))}/>)}</div>
120
+ <div className="cstage">{spec.renderC(v)}</div>
121
+ </div>;
122
+ }
123
+
124
+ // ---- stateful demo wrappers (hooks must live in a stable component) ----
125
+ 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"/>; }
126
+ function PaginationD(){ const [p,setP]=useState(3); return has(Pagination)?<Pagination page={p} pageCount={12} onChange={setP}/>:<Miss n="Pagination"/>; }
127
+ 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"/>; }
128
+ 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"/>; }
129
+ 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"/>; }
130
+ function NumberD(){ const [n,setN]=useState(3); return has(NumberField)?<NumberField value={n} onChange={setN} min={1} max={20}/>:<Miss n="NumberField"/>; }
131
+ 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>; }
132
+ function CalD({L}){ const [d,setD]=useState(()=>new Date(2026,6,18)); return has(Calendar)?<Calendar value={d} onChange={setD}/>:<Miss n="Calendar"/>; }
133
+ function ColorD({L}){ const [c,setC]=useState("#F4BA17"); return has(ColorPicker)?<div style={{minHeight:210}}><ColorPicker value={c} onChange={setC}/></div>:<Miss n="ColorPicker"/>; }
134
+ 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"/>; }
135
+ 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"/>; }
136
+ 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"/>; }
137
+ 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"/>; }
138
+ 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"/>; }
139
+ 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"/>; }
140
+ function ComboD({L}){ const [v,setV]=useState("ai"); const V=L==="vi"; return has(Combobox)?<Combobox value={v} onChange={setV} label={V?"Nhóm":"Squad"} options={[{value:"plat",label:V?"Nền tảng":"Platform"},{value:"ai",label:"AI"},{value:"growth",label:V?"Tăng trưởng":"Growth"},{value:"design",label:V?"Thiết kế":"Design"}]}/>:<Miss n="Combobox"/>; }
141
+ function PromptD({L}){ const [q,setQ]=useState(L==="vi"?"Một trang thanh toán nhanh hơn cho cửa hàng":"A faster checkout for our shop"); return has(PromptInput)?<PromptInput value={q} onChange={setQ} onSubmit={()=>{}} placeholder={L==="vi"?"Ước một điều…":"Make a wish…"}/>:<Miss n="PromptInput"/>; }
142
+ function FormD({L}){ const [done,setDone]=useState(null); const V=L==="vi";
143
+ return has(Form,FormField,TextField,Button)?<div style={{maxWidth:420}}>
144
+ <Form rules={{email:["required",(v)=>/.+@.+\..+/.test(String(v||""))?null:(V?"Email chưa hợp lệ.":"Enter a valid email.")],wish:"required"}} onSubmit={(v)=>setDone(v)}>
145
+ <FormField label={V?"Email công việc":"Work email"} required name="email"><TextField label={V?"Email công việc":"Work email"} placeholder="an@cyberskill.world"/></FormField>
146
+ <FormField label={V?"Điều ước":"Your wish"} required name="wish" hint={V?"Một câu là đủ.":"One sentence is plenty."}><TextField label={V?"Điều ước":"Your wish"}/></FormField>
147
+ <Button type="submit">{V?"Gửi":"Send"}</Button>
148
+ </Form>
149
+ {done?<p style={{font:"12px var(--cs-font-family-mono)",color:"var(--cs-color-text-muted)",marginTop:10}}>onSubmit → {JSON.stringify(done)}</p>:null}
150
+ </div>:<Miss n="Form"/>; }
151
+
152
+ const ICONS=["close","sun","moon","arrow-right","check","sparkle","chat","sound-on","sound-off","search","sliders","upload","download","calendar","user","plus","trash","external","menu","chevron-down","chevron-up","chevron-left","chevron-right","edit","copy","info","alert-triangle"];
153
+
154
+ // ---- STORIES (grouped by atomic tier) ----
155
+ const STORIES = [
156
+ // ============ ATOMS ============
157
+ { tier:"Atom", name:"Button", grp:"Core", controls:[{k:"variant",type:"select",options:["primary","secondary","tertiary","ghost","danger","danger-ghost"],def:"primary"},{k:"size",type:"select",options:["xs","sm","md","lg"],def:"md"},{k:"disabled",type:"toggle",def:false},{k:"loading",type:"toggle",def:false}], renderC:(v)=> has(Button)?<Button variant={v.variant} size={v.size} disabled={v.disabled} loading={v.loading} icon={has(Icon)?<Icon name="sparkle"/>:null}>Make a wish</Button>:<Miss n="Button"/>, render:()=> has(Button)?<div className="scol">
158
+ <div className="srow"><Button>Primary</Button><Button variant="secondary">Secondary</Button><Button variant="tertiary">Tertiary</Button><Button variant="ghost">Ghost</Button><Button variant="danger">Danger</Button><Button variant="danger-ghost">Danger ghost</Button></div>
159
+ <div className="srow"><Button size="xs">XS</Button><Button size="sm">Small</Button><Button size="md">Medium</Button><Button size="lg">Large</Button></div>
160
+ <div className="srow">{has(Icon)&&<Button icon={<Icon name="sparkle"/>}>Make a wish</Button>}<Button loading>Sending</Button><Button disabled>Disabled</Button></div>
161
+ </div>:<Miss n="Button"/> },
162
+ { tier:"Atom", name:"Toggle", grp:"Forms", controls:[{k:"disabled",type:"toggle",def:false}], renderC:(v)=> has(Toggle)?<Toggle disabled={v.disabled} icon={has(Icon)?<Icon name="sparkle" size="sm"/>:null}>Aurora wash</Toggle>:<Miss n="Toggle"/>, render:(L)=> has(Toggle)?<div className="srow"><Toggle defaultPressed>{L==="vi"?"Đậm":"Bold"}</Toggle><Toggle>{L==="vi"?"Nghiêng":"Italic"}</Toggle><Toggle disabled>{L==="vi"?"Vô hiệu":"Disabled"}</Toggle></div>:<Miss n="Toggle"/> },
163
+ { tier:"Atom", name:"Link", grp:"Navigation", render:(L)=> has(Link)?<div className="srow" style={{gap:20}}><Link href="#" onClick={(e)=>e.preventDefault()}>{L==="vi"?"Chính sách":"Privacy"}</Link><Link href="#" variant="muted" onClick={(e)=>e.preventDefault()}>{L==="vi"?"Điều khoản":"Terms"}</Link><Link href="#" variant="standalone" onClick={(e)=>e.preventDefault()}>{L==="vi"?"Xem dự án":"See our work"}</Link><Link href="https://cyberskill.world" external>cyberskill.world</Link></div>:<Miss n="Link"/> },
164
+ { tier:"Atom", name:"Icon", grp:"Brand", controls:[{k:"name",type:"select",options:["sparkle","check","search","chat","user","calendar","download","trash","info","alert-triangle"],def:"sparkle"},{k:"size",type:"select",options:["sm","md","lg"],def:"lg"}], renderC:(v)=> has(Icon)?<Icon name={v.name} size={v.size}/>:<Miss n="Icon"/>, render:()=> has(Icon)?<div className="icells">{ICONS.map(n=><div className="icell" key={n}><Icon name={n} size="lg"/><span>{n}</span></div>)}</div>:<Miss n="Icon"/> },
165
+ { tier:"Atom", name:"Badge & Tag", grp:"Feedback", controls:[{k:"variant",type:"select",options:["neutral","ochre","success","danger","info"],def:"ochre"},{k:"dot",type:"toggle",def:true},{k:"label",type:"text",def:"Now"}], renderC:(v)=> has(Badge)?<Badge variant={v.variant==="neutral"?undefined:v.variant} dot={v.dot}>{v.label}</Badge>:<Miss n="Badge"/>, render:()=> has(Badge,Tag)?<div className="srow"><Badge>Planned</Badge><Badge variant="ochre">Now</Badge><Badge variant="success" dot>Shipped</Badge><Badge variant="danger">Blocked</Badge><Badge variant="info">AI</Badge><Tag>Web apps</Tag><Tag onRemove={()=>{}}>TASK-DS-041</Tag></div>:<Miss n="Badge/Tag"/> },
166
+ { tier:"Atom", name:"StatusIndicator", grp:"Feedback", controls:[{k:"status",type:"select",options:["online","busy","error","offline"],def:"online"},{k:"pulse",type:"toggle",def:true},{k:"label",type:"text",def:"All systems go"}], renderC:(v)=> has(StatusIndicator)?<StatusIndicator status={v.status} pulse={v.pulse}>{v.label}</StatusIndicator>:<Miss n="StatusIndicator"/>, render:(L)=> has(StatusIndicator)?<div className="srow"><StatusIndicator status="online" pulse>{L==="vi"?"Mọi hệ thống ổn định":"All systems go"}</StatusIndicator><StatusIndicator status="busy">{L==="vi"?"Đang triển khai":"Deploying"}</StatusIndicator><StatusIndicator status="error">{L==="vi"?"Bị chặn":"Blocked"}</StatusIndicator><StatusIndicator status="offline">{L==="vi"?"Tạm nghỉ":"Idle"}</StatusIndicator></div>:<Miss n="StatusIndicator"/> },
167
+ { 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"/> },
168
+ { 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"/> },
169
+ { tier:"Atom", name:"Divider", grp:"Data", render:()=> has(Divider)?<div style={{maxWidth:360}}><Divider/><Divider label="team"/></div>:<Miss n="Divider"/> },
170
+ { tier:"Atom", name:"Kbd", grp:"Data", render:()=> has(Kbd)?<span>Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to search</span>:<Miss n="Kbd"/> },
171
+ { 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"/> },
172
+ { 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"/> },
173
+
174
+ // ============ MOLECULES ============
175
+ { 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"/> },
176
+ { 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">
177
+ <Select label="Squad" options={[{value:"plat",label:"Platform"},{value:"ai",label:"AI"},{value:"growth",label:"Growth"}]} defaultValue="ai"/>
178
+ <RadioGroup legend="Billing" defaultValue="yr" options={[{value:"mo",label:"Monthly"},{value:"yr",label:"Annual",description:"Two months free"}]}/>
179
+ <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>
180
+ <Textarea label="Tell us your wish" description="A sentence or two is plenty." rows={3} defaultValue="A faster checkout for our shop."/>
181
+ </div>:<Miss n="Form controls"/> },
182
+ { tier:"Molecule", name:"Search · Number · Slider · Segmented · FileUpload", grp:"Forms", render:(L)=> <div className="scol">
183
+ <div className="srow"><SearchD L={L}/></div>
184
+ <div className="srow"><NumberD/><SliderD/></div>
185
+ <div className="srow"><SegmentedD L={L}/></div>
186
+ {has(FileUpload)?<FileUpload/>:<Miss n="FileUpload"/>}
187
+ </div> },
188
+ { tier:"Molecule", name:"Rating", grp:"Forms", controls:[{k:"value",type:"range",min:0,max:5,step:1,def:4},{k:"readOnly",type:"toggle",def:false}], renderC:(v)=> has(Rating)?<Rating value={v.value} readOnly={v.readOnly} onChange={()=>{}}/>:<Miss n="Rating"/>, render:()=> has(Rating)?<div className="srow"><Rating defaultValue={4}/><Rating value={3} readOnly/></div>:<Miss n="Rating"/> },
189
+ { tier:"Molecule", name:"InputOTP", grp:"Forms", render:()=> has(InputOTP)?<InputOTP length={6} onComplete={()=>{}}/>:<Miss n="InputOTP"/> },
190
+ { 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"/> },
191
+ { tier:"Molecule", name:"Combobox", grp:"Forms", render:(L)=> <div style={{minHeight:230}}><ComboD L={L}/></div> },
192
+ { 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"/> },
193
+ { 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"/> },
194
+ { 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"/> },
195
+ { 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"/> },
196
+ { 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"/> },
197
+ { 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"/> },
198
+ { 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"/> },
199
+ { 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"/> },
200
+ { 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"/> },
201
+ { 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"/> },
202
+ { tier:"Molecule", name:"Tabs", grp:"Navigation", render:(L)=> <TabsD L={L}/> },
203
+ { 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"/> },
204
+ { tier:"Molecule", name:"Pagination", grp:"Navigation", render:()=> <PaginationD/> },
205
+ { 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"/> },
206
+ { 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"/> },
207
+ { 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"/> },
208
+ { tier:"Molecule", name:"Tooltip", grp:"Data", controls:[{k:"label",type:"text",def:"Blocked on infra"}], renderC:(v)=> has(Tooltip)?<Tooltip label={v.label}><span className="cs-badge cs-badge--danger">Blocked</span></Tooltip>:<Miss n="Tooltip"/>, render:()=> has(Tooltip)?<Tooltip label="Blocked on infra"><span className="cs-badge cs-badge--danger">Blocked</span></Tooltip>:<Miss n="Tooltip"/> },
209
+ { tier:"Molecule", name:"DescriptionList", grp:"Data", render:(L)=> has(DescriptionList)?<div style={{maxWidth:360}}><DescriptionList items={L==="vi"?[{term:"Phụ trách",value:"An Lê"},{term:"Nhóm",value:"Nền tảng"},{term:"Tiến độ",value:"72%"},{term:"Cập nhật",value:"2 giờ trước"}]:[{term:"Owner",value:"An Le"},{term:"Squad",value:"Platform"},{term:"Progress",value:"72%"},{term:"Updated",value:"2h ago"}]}/></div>:<Miss n="DescriptionList"/> },
210
+ { tier:"Molecule", name:"List", grp:"Data", render:(L)=> has(List,ListItem)?<div style={{maxWidth:400}}><List>{has(Avatar,Badge)&&<ListItem lead={<Avatar name="An Le" size="sm"/>} title="An Lê" subtitle={L==="vi"?"Nền tảng":"Platform"} trail={<Badge>{L==="vi"?"Phụ trách":"Owner"}</Badge>}/>}<ListItem title="Bảo Vũ" subtitle="AI" trail={L==="vi"?"5 giờ":"5h"} onClick={()=>{}}/></List></div>:<Miss n="List"/> },
211
+ { tier:"Molecule", name:"CodeBlock", grp:"Data", controls:[{k:"filename",type:"text",def:"styles.css"},{k:"code",type:"text",def:'@import "tokens/colors.css";'},{k:"showBar",type:"toggle",def:true}], renderC:(v)=> has(CodeBlock)?<CodeBlock filename={v.filename} showBar={v.showBar} code={v.code}/>:<Miss n="CodeBlock"/>, render:()=> has(CodeBlock)?<CodeBlock filename="styles.css" showBar={true} code={'@import "tokens/colors.css";'}/>:<Miss n="CodeBlock"/> },
212
+ { tier:"Molecule", name:"Alert", grp:"Feedback", controls:[{k:"variant",type:"select",options:["info","success","warning","danger"],def:"warning"},{k:"title",type:"text",def:"Blocked"}], renderC:(v)=> has(Alert)?<div style={{maxWidth:460}}><Alert variant={v.variant} title={v.title}>Provenance ledger needs the signing service.</Alert></div>:<Miss n="Alert"/>, render:(L)=> has(Alert)?<div className="scol" style={{maxWidth:460}}><Alert variant="warning" title={L==="vi"?"Bị chặn":"Blocked"}>{L==="vi"?"Sổ cái nguồn gốc cần dịch vụ ký số.":"Provenance ledger needs the signing service."}</Alert><Alert variant="success" title={L==="vi"?"Đã ra mắt":"Shipped"}>{L==="vi"?"v1.6 đã hoạt động cho mọi nhóm.":"v1.6 is live for all squads."}</Alert></div>:<Miss n="Alert"/> },
213
+ { tier:"Molecule", name:"Toast", grp:"Feedback", controls:[{k:"variant",type:"select",options:["success","info","warning","danger"],def:"success"},{k:"title",type:"text",def:"Saved"}], renderC:(v)=> has(Toast)?<div style={{maxWidth:340}}><Toast variant={v.variant} title={v.title} onClose={()=>{}}>Your wish is on its way.</Toast></div>:<Miss n="Toast"/>, framed:true, render:(L)=> has(Toast,ToastStack)?<ToastStack><Toast variant="success" title={L==="vi"?"Đã lưu":"Saved"} onClose={()=>{}}>{L==="vi"?"Điều ước của bạn đang trên đường đi.":"Your wish is on its way."}</Toast></ToastStack>:<Miss n="Toast"/> },
214
+ { tier:"Molecule", name:"Steps", grp:"Navigation", controls:[{k:"current",type:"select",options:["0","1","2","3"],def:"1"}], renderC:(v)=> has(Steps)?<Steps current={+v.current} steps={[{title:"Make a wish"},{title:"Shape it"},{title:"Build to ship"},{title:"Built to last"}]}/>:<Miss n="Steps"/>, render:(L)=> has(Steps)?<Steps current={1} steps={L==="vi"?[{title:"Ước một điều"},{title:"Định hình"},{title:"Xây để ra mắt"},{title:"Bền để dùng lâu"}]:[{title:"Make a wish"},{title:"Shape it"},{title:"Build to ship"},{title:"Built to last"}]}/>:<Miss n="Steps"/> },
215
+ { tier:"Molecule", name:"ConfidenceMeter", grp:"AI-native", controls:[{k:"value",type:"range",min:0,max:1,step:0.05,def:0.82}], renderC:(v)=> has(ConfidenceMeter)?<div style={{maxWidth:320}}><ConfidenceMeter value={v.value}/></div>:<Miss n="ConfidenceMeter"/>, render:()=> has(ConfidenceMeter)?<div className="scol" style={{maxWidth:320}}><ConfidenceMeter value={0.82}/><ConfidenceMeter level="medium" label="Model confidence"/><ConfidenceMeter level="low" label="Draft estimate"/></div>:<Miss n="ConfidenceMeter"/> },
216
+ { tier:"Molecule", name:"AIDisclosureBadge", grp:"AI-native", controls:[{k:"label",type:"text",def:"AI assisted"},{k:"details",type:"text",def:"Draft generated by Lumi, reviewed by the team."}], renderC:(v)=> has(AIDisclosureBadge)?<AIDisclosureBadge label={v.label} details={v.details} sources={["release-notes.md"]}/>:<Miss n="AIDisclosureBadge"/>, render:()=> has(AIDisclosureBadge)?<AIDisclosureBadge label="AI assisted" details="Draft summary generated by Lumi, reviewed by the team." sources={["release-notes.md","task backlog"]}/>:<Miss n="AIDisclosureBadge"/> },
217
+ { tier:"Molecule", name:"PromptSuggestions", grp:"AI-native", render:()=> has(PromptSuggestions)?<PromptSuggestions suggestions={["A web app","An internal tool","A design system"]} onSelect={()=>{}}/>:<Miss n="PromptSuggestions"/> },
218
+ { tier:"Molecule", name:"TypingIndicator", grp:"AI-native", render:()=> has(TypingIndicator)?(has(ChatMessage)?<div className="cs-chat"><ChatMessage role="lumi"><TypingIndicator/></ChatMessage></div>:<TypingIndicator/>):<Miss n="TypingIndicator"/> },
219
+ { tier:"Molecule", name:"CitationList", grp:"AI-native", render:()=> has(CitationList)?<div style={{maxWidth:420}}><CitationList items={[{title:"release-notes.md"},{title:"Task backlog",source:"Status Hub",href:"#"},{title:"DESIGN.md · Part 21",source:"Liquid Glass"}]}/></div>:<Miss n="CitationList"/> },
220
+
221
+ // ============ ORGANISMS ============
222
+ { tier:"Organism", name:"Form", grp:"Forms", render:(L)=> <FormD L={L}/> },
223
+ { tier:"Organism", name:"FormFieldArray", grp:"Forms", render:(L)=> has(Form,FormFieldArray,FormField,TextField,Button)?(
224
+ <div style={{maxWidth:480}}><Form initialValues={{teammates:[{name:""}]}} onSubmit={()=>{}}>
225
+ <FormFieldArray name="teammates" label={L==="vi"?"Đồng đội":"Teammates"} min={1} max={4} addLabel={L==="vi"?"Thêm":"Add"}>
226
+ {({index, remove, path})=>(
227
+ <div style={{display:"flex",gap:8,alignItems:"flex-end",marginBottom:8}}>
228
+ <div style={{flex:1}}><FormField label={(L==="vi"?"Tên ":"Name ")+(index+1)} name={path("name")}><TextField label="Name"/></FormField></div>
229
+ <Button type="button" variant="ghost" size="sm" onClick={remove}>{L==="vi"?"Xóa":"Remove"}</Button>
230
+ </div>
231
+ )}
232
+ </FormFieldArray>
233
+ <Button type="submit" size="sm">{L==="vi"?"Lưu":"Save"}</Button>
234
+ </Form></div>
235
+ ):<Miss n="FormFieldArray"/> },
236
+ { tier:"Organism", name:"FormWizard", grp:"Forms", render:(L)=> has(FormWizard,FormField,TextField)?(
237
+ <div style={{maxWidth:480}}><FormWizard
238
+ initialValues={{email:"",wish:""}}
239
+ onComplete={()=>{}}
240
+ steps={[
241
+ {id:"contact",title:L==="vi"?"Liên hệ":"Contact",rules:{email:"required"},render:()=><FormField label={L==="vi"?"Email":"Email"} required name="email"><TextField label="Email"/></FormField>},
242
+ {id:"wish",title:L==="vi"?"Điều ước":"Wish",rules:{wish:"required"},render:()=><FormField label={L==="vi"?"Điều ước":"Wish"} required name="wish"><TextField label="Wish"/></FormField>},
243
+ ]}
244
+ /></div>
245
+ ):<Miss n="FormWizard"/> },
246
+ { tier:"Organism", name:"Calendar", grp:"Forms", render:(L)=> <CalD L={L}/> },
247
+ { tier:"Organism", name:"DatePicker + TimePicker", grp:"Forms", render:(L)=> <DateD L={L}/> },
248
+ { tier:"Organism", name:"Result", grp:"Feedback", render:(L)=> has(Result,Button)?<div style={{border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-lg)"}}><Result status="success" actions={<Button size="sm">{L==="vi"?"Về trang chính":"Back home"}</Button>}>{L==="vi"?"Điều ước của bạn đã đến đội ngũ — chúng tôi trả lời trong một ngày làm việc.":"Your wish is with the team — we reply within one business day."}</Result></div>:<Miss n="Result"/> },
249
+ { tier:"Molecule", name:"ColorPicker", grp:"Forms", render:(L)=> <ColorD L={L}/> },
250
+ { tier:"Organism", name:"Tour", grp:"Overlays", render:(L)=> <TourD L={L}/> },
251
+ { tier:"Molecule", name:"QRCode", grp:"Data", render:(L)=> has(QRCode)?<div className="srow"><QRCode value="https://cyberskill.world" size={116} label="cyberskill.world"/><QRCode value={L==="vi"?"Hiện Thực Hoá Ý Chí":"Turn Your Will Into Real"} size={116}/></div>:<Miss n="QRCode"/> },
252
+ { tier:"Organism", name:"Chart", grp:"Data", render:(L)=> has(Chart)?<div className="srow" style={{gap:26,alignItems:"flex-start"}}><Chart type="bar" height={120} showValues label={L==="vi"?"Tốc độ theo tuần":"Weekly velocity"} data={[{label:"W26",value:9},{label:"W27",value:6},{label:"W28",value:11},{label:"W29",value:8}]}/><Chart type="pie" height={120} label={L==="vi"?"Trạng thái":"Status"} data={L==="vi"?[{label:"Đã ra mắt",value:60},{label:"Đang làm",value:22},{label:"Bị chặn",value:6}]:[{label:"Shipped",value:60},{label:"In progress",value:22},{label:"Blocked",value:6}]}/></div>:<Miss n="Chart"/> },
253
+ { tier:"Organism", name:"Editor", grp:"Forms", render:(L)=> has(Editor)?<Editor defaultValue={L==="vi"?"<p>Một <b>điều ước</b> rõ ràng…</p>":"<p>A clear <b>wish</b>…</p>"}/>:<Miss n="Editor"/> },
254
+ { tier:"Organism", name:"Terminal", grp:"Data", render:(L)=> has(Terminal)?<Terminal welcome={L==="vi"?"Gõ `help` để xem lệnh.":"Type `help` for commands."} onCommand={(c)=>c==="help"?"wish · status · clear":(L==="vi"?"không tìm thấy lệnh: ":"command not found: ")+c}/>:<Miss n="Terminal"/> },
255
+ { tier:"Organism", name:"DataGrid", grp:"Data", render:(L)=> <GridD L={L}/> },
256
+ { tier:"Organism", name:"TreeTable", grp:"Data", render:(L)=> has(TreeTable)?<TreeTable defaultExpanded={["p"]} columns={[{key:"name",header:L==="vi"?"Hạng mục":"Item"},{key:"pct",header:L==="vi"?"Tiến độ":"Progress"}]} nodes={[{key:"p",name:L==="vi"?"Nền tảng":"Platform",pct:"70%",children:[{key:"ds",name:"Design System",pct:"72%"},{key:"tok",name:"Token Pipeline",pct:"66%"}]},{key:"ai",name:"AI",pct:"58%",children:[{key:"lumi",name:"Lumi Genie",pct:"58%"}]}]}/>:<Miss n="TreeTable"/> },
257
+ { tier:"Organism", name:"Sortable", grp:"Data", render:(L)=> <SortD L={L}/> },
258
+ { tier:"Organism", name:"Masonry", grp:"Data", render:(L)=> has(Masonry)?<Masonry columns={3} gap={12}>{[64,110,80,140,72,96].map((h,i)=><div key={i} style={{height:h,background:"var(--cs-accent-tint)",border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-md)",display:"grid",placeItems:"center",fontSize:12,color:"var(--cs-color-text-muted)"}}>{(L==="vi"?"Thẻ ":"Card ")+(i+1)}</div>)}</Masonry>:<Miss n="Masonry"/> },
259
+ { tier:"Organism", name:"Splitter", grp:"Data", render:(L)=> has(Splitter)?<Splitter height={170} initial={45} start={<div style={{fontSize:13,color:"var(--cs-color-text-muted)"}}>{L==="vi"?"Khung trái — kéo thanh chia.":"Left pane — drag the divider."}</div>} end={<div style={{fontSize:13,color:"var(--cs-color-text-muted)"}}>{L==="vi"?"Khung phải.":"Right pane."}</div>}/>:<Miss n="Splitter"/> },
260
+ { tier:"Organism", name:"HotKeys", grp:"Navigation", render:(L)=> has(HotKeys,Kbd)?<HotKeys bindings={[{keys:"mod+k",description:L==="vi"?"Bảng lệnh":"Command palette"},{keys:"mod+s",description:L==="vi"?"Lưu":"Save"}]}><span style={{fontSize:13,color:"var(--cs-color-text-muted)"}}>{L==="vi"?"Nhấn ":"Press "}<Kbd>?</Kbd>{L==="vi"?" để xem phím tắt.":" for the shortcut sheet."}</span></HotKeys>:<Miss n="HotKeys"/> },
261
+ { tier:"Organism", name:"Dock", grp:"Navigation", render:(L)=> has(Dock,Icon)?<Dock label="Apps" items={[{icon:<Icon name="chat"/>,label:"Lumi",active:true},{icon:<Icon name="calendar"/>,label:L==="vi"?"Lịch":"Calendar"},{icon:<Icon name="sliders"/>,label:L==="vi"?"Cài đặt":"Settings"},{icon:<Icon name="search"/>,label:L==="vi"?"Tìm kiếm":"Search"}]}/>:<Miss n="Dock"/> },
262
+ { tier:"Organism", name:"TreeSelect", grp:"Forms", render:(L)=> <div style={{minHeight:260}}><TreeSelD L={L}/></div> },
263
+ { tier:"Organism", name:"Cascader", grp:"Forms", render:(L)=> <div style={{minHeight:240}}><CascD L={L}/></div> },
264
+ { tier:"Organism", name:"Transfer", grp:"Forms", render:(L)=> <TransD L={L}/> },
265
+ { 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"/> },
266
+ { 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"/> },
267
+ { 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"/> },
268
+ { 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"/> },
269
+ { 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"/> },
270
+ { 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"/> },
271
+ { 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"/> },
272
+ { 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"/> },
273
+ { 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"/> },
274
+ { tier:"Organism", name:"Sidebar + NavItem", grp:"Navigation", render:(L)=> has(Sidebar,NavItem)?<div style={{width:240,border:"1px solid var(--cs-color-border-default)",borderRadius:"var(--cs-radius-lg)",overflow:"hidden"}}><Sidebar label={L==="vi"?"Không gian":"Workspace"}><NavItem active>{L==="vi"?"Tổng quan":"Overview"}</NavItem><NavItem trail={has(Badge)?<Badge>3</Badge>:"3"}>{L==="vi"?"Dự án":"Projects"}</NavItem><NavItem>{L==="vi"?"Phát hành":"Releases"}</NavItem><NavItem>{L==="vi"?"Cài đặt":"Settings"}</NavItem></Sidebar></div>:<Miss n="Sidebar"/> },
275
+ { tier:"Organism", name:"CommandPalette", grp:"Navigation", framed:true, render:(L)=> has(CommandPalette)?<CommandPalette open={true} onClose={()=>{}} groups={L==="vi"?[{label:"Đi tới",items:[{label:"Bảng điều khiển",shortcut:"G D"},{label:"Phát hành",shortcut:"G R"}]},{label:"Hành động",items:[{label:"Dự án mới",shortcut:"N"},{label:"Trò chuyện với Lumi",shortcut:"L"}]}]:[{label:"Go to",items:[{label:"Dashboard",shortcut:"G D"},{label:"Releases",shortcut:"G R"}]},{label:"Actions",items:[{label:"New project",shortcut:"N"},{label:"Talk to Lumi",shortcut:"L"}]}]}/>:<Miss n="CommandPalette"/> },
276
+ { tier:"Organism", name:"DataTable", grp:"Data", render:(L)=> has(DataTable)?<DataTable caption={L==="vi"?"Phát hành":"Releases"} rowKey="ver" columns={[{key:"ver",header:L==="vi"?"Phiên bản":"Version",render:(r)=><span style={{fontFamily:"var(--cs-font-family-mono)",fontWeight:600}}>{r.ver}</span>},{key:"ships",header:L==="vi"?"Ra mắt":"Ships"},{key:"note",header:L==="vi"?"Ghi chú":"Notes"},{key:"status",header:L==="vi"?"Trạng thái":"Status"}]} rows={L==="vi"?[{ver:"v1.5.1",ships:"Đã ra mắt",status:"done",note:"Gói Ngũ Hành"},{ver:"v1.6.0",ships:"Tuần này",status:"active",note:"Liên kết Glass"},{ver:"v1.7.0",ships:"Q3 2026",status:"hold",note:"Chờ RFC"}]:[{ver:"v1.5.1",ships:"Shipped",status:"done",note:"Element packs"},{ver:"v1.6.0",ships:"This week",status:"active",note:"Glass bindings"},{ver:"v1.7.0",ships:"Q3 2026",status:"hold",note:"Awaiting RFC"}]}/>:<Miss n="DataTable"/> },
277
+ { 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"/> },
278
+ { 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"/> },
279
+ { 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"/> },
280
+ { 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"/> },
281
+ { 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"/> },
282
+ { 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"/> },
283
+ { 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"/> },
284
+ { 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"/> },
285
+ ];
286
+
287
+ const TIERS = [
288
+ { id:"Atom", label:"Atoms", sub:"Indivisible primitives — one job each." },
289
+ { id:"Molecule", label:"Molecules", sub:"A few atoms bonded into a usable control." },
290
+ { id:"Organism", label:"Organisms", sub:"Composite, self-contained sections." },
291
+ ];
292
+ const ELEMENTS = [
293
+ ["tho|","Thổ · studio"],["tho|clay","Thổ · clay"],["tho|sand","Thổ · sand"],
294
+ ["hoa|","Hỏa · ember"],["hoa|lava","Hỏa · lava"],["hoa|plasma","Hỏa · plasma"],
295
+ ["thuy|","Thủy · river"],["thuy|ocean","Thủy · ocean"],["thuy|mist","Thủy · mist"],
296
+ ["moc|","Mộc · leaf"],["moc|bamboo","Mộc · bamboo"],["moc|forest","Mộc · forest"],
297
+ ["kim|","Kim · champagne"],["kim|steel","Kim · steel"],["kim|titanium","Kim · titanium"],
298
+ ];
299
+ const LANGS = [["","Default"],["en","English"],["vi","Tiếng Việt"]];
300
+ const PAGES = [
301
+ { name:"Status Hub (product)", src:"../ui_kits/status-hub/index.html" },
302
+ { name:"Marketing site", src:"../ui_kits/website/index.html" },
303
+ { name:"Slide deck", src:"../ui_kits/deck/index.html" },
304
+ ];
305
+ // Force every axis on an external artifact via attribute-scoping on its <html>, so
306
+ // Templates/Pages honor the SAME toolbar as components (owner: axes on all artifacts).
307
+ function applyAxis(ifr, ax){
308
+ try{
309
+ const d=ifr.contentDocument, h=d&&d.documentElement; if(!h) return;
310
+ (ax.theme&&ax.theme!=="light")?h.setAttribute("data-theme",ax.theme):h.removeAttribute("data-theme");
311
+ ax.elm?h.setAttribute("data-cs-element",ax.elm):h.removeAttribute("data-cs-element");
312
+ ax.elv?h.setAttribute("data-cs-variant",ax.elv):h.removeAttribute("data-cs-variant");
313
+ if(ax.lang) h.setAttribute("lang", ax.lang);
314
+ const w=ifr.contentWindow;
315
+ if(ax.lang && w && w.__dcSetProps && w.__dcRootName){ const r=w.__dcRootName&&w.__dcRootName(); if(r) w.__dcSetProps(r,{language: ax.lang==="vi"?"Tiếng Việt":"English"}); }
316
+ }catch(e){}
317
+ }
318
+ function Tile({ item, ax, mount }){
319
+ const ref=useRef(null);
320
+ useEffect(()=>{ if(ref.current && mount) applyAxis(ref.current, ax); });
321
+ return <div className="tpl" id={"tpl-"+slug(item.name)}><header><span>{item.shortName||item.name}</span><a href={item.src} target="_blank" rel="noopener">open ↗</a></header>
322
+ {mount
323
+ ? <iframe ref={ref} src={item.src} loading="lazy" title={item.name} onLoad={(e)=>applyAxis(e.target, ax)}></iframe>
324
+ : <div style={{height:120,display:"grid",placeItems:"center",color:"var(--cs-color-text-primary)",opacity:.6,fontSize:12.5,background:"var(--cs-color-surface-raised)"}}>Scroll or open category to load preview</div>}
325
+ </div>;
326
+ }
327
+ function ArtifactTier({ items, ax, active }){
328
+ // Virtualize: only mount iframes when the category is open — closed cats mount zero previews.
329
+ return <div className="tpltier" data-active={active?"true":"false"} data-item-count={items.length}>{items.map((it)=><Tile key={it.src} item={it} ax={ax} mount={!!active}/>)}</div>;
330
+ }
331
+
332
+ function Perma({id}){
333
+ const [ok,setOk]=useState(false);
334
+ return <a className="perma" href={"#"+id} title="Copy permalink" onClick={()=>{ const url=location.href.split("#")[0]+"#"+id; try{ navigator.clipboard.writeText(url).then(()=>{ setOk(true); setTimeout(()=>setOk(false),1200); }).catch(()=>{}); }catch(e){} }}>{ok?"\u2713":"#"}</a>;
335
+ }
336
+ function Story({ s, lang }){
337
+ const L = lang === "vi" ? "vi" : "en";
338
+ return (
339
+ <section className="story" id={slug(s.name)}>
340
+ <header><h3>{s.name}</h3><span className="grp">{s.grp}</span><span className="exp">{s.tier}</span><Perma id={slug(s.name)}/></header>
341
+ <div className="canvasbox">
342
+ {s.controls?<Controlled spec={s}/>:null}
343
+ <div className={s.framed?"framed":""}>{s.render(L)}</div>
344
+ </div>
345
+ </section>
346
+ );
347
+ }
348
+
349
+ const NM = window.__csNavModel || {};
350
+
351
+ function App(){
352
+ const [theme,setTheme]=useState("light");
353
+ const [el,setEl]=useState("tho|");
354
+ const [lang,setLang]=useState("");
355
+ const [collapsed,setCollapsed]=useState({Atom:false,Molecule:false,Organism:false,found:false,tpl:true,pages:true});
356
+ const [openTplCat,setOpenTplCat]=useState({});
357
+ const [tpls,setTpls]=useState([]);
358
+ useEffect(()=>{ fetch("../_ds_manifest.json").then(r=>r.json()).then(m=>setTpls((m.templates||[]).map(t=>({name:t.name,src:"../"+t.entryPath})))).catch(()=>{}); },[]);
359
+ useEffect(()=>{ const id=decodeURIComponent((location.hash||"").slice(1)); if(!id) return; let n=0; const t=setInterval(()=>{ const el=document.getElementById(id); n++; if(el){ clearInterval(t); const sc=document.querySelector("main"); const y=el.getBoundingClientRect().top-64; if(sc && sc.scrollHeight>sc.clientHeight+4){ sc.scrollTop += y - sc.getBoundingClientRect().top; } else { (document.scrollingElement||document.documentElement).scrollTop += y; } } else if(n>40){ clearInterval(t); } },150); return ()=>clearInterval(t); },[]);
360
+ const [q,setQ]=useState("");
361
+ const nq=q.trim().toLowerCase();
362
+ const match=(s)=> !nq || s.name.toLowerCase().includes(nq) || s.grp.toLowerCase().includes(nq);
363
+ const shown=STORIES.filter(match);
364
+ const storyTree = (NM.groupStories||((xs)=>{const m=new Map(); xs.forEach(s=>{if(!m.has(s.tier))m.set(s.tier,new Map());const g=m.get(s.tier);if(!g.has(s.grp))g.set(s.grp,[]);g.get(s.grp).push(s);});return m;}))(shown);
365
+ const [elm,elv]=el.split("|");
366
+ const axis={};
367
+ if(theme!=="light") axis["data-theme"]=theme;
368
+ if(elm) axis["data-cs-element"]=elm;
369
+ if(elv) axis["data-cs-variant"]=elv;
370
+ if(lang) axis.lang=lang;
371
+ const artifactAx={theme,elm,elv,lang};
372
+ const shownTpls=tpls.filter(t=>!nq||t.name.toLowerCase().includes(nq)||(NM.classifyTemplate&&NM.classifyTemplate(t.name).toLowerCase().includes(nq)));
373
+ const tplGroups=(NM.groupTemplates||((xs)=>[{category:"All",items:xs}]))(shownTpls);
374
+ const shownPages=PAGES.filter(t=>!nq||t.name.toLowerCase().includes(nq));
375
+ // Expose nav snapshot for audits
376
+ useEffect(()=>{
377
+ try{
378
+ window.__csAtomicNav={
379
+ tiers:TIERS.map(t=>{
380
+ const byGrp=storyTree.get(t.id)||new Map();
381
+ const groups=[...(NM.sortedGroupNames?NM.sortedGroupNames(byGrp):[...byGrp.keys()].sort())].map(g=>({group:g,names:(byGrp.get(g)||[]).map(s=>s.name)}));
382
+ return {tier:t.id,label:t.label,groups};
383
+ }),
384
+ templates:tplGroups.map(g=>({category:g.category,count:g.items.length,names:g.items.map(i=>i.shortName||i.name)})),
385
+ };
386
+ }catch(e){}
387
+ },[shown,tpls,q]);
388
+ if(!NS || !Object.keys(NS).length){ return <div style={{padding:40,fontFamily:"var(--cs-font-family-mono)"}}>Bundle not loaded — <code>_ds_bundle.js</code> is compiled at end of turn; reopen on a fresh turn.</div>; }
389
+ return (
390
+ <div className="app">
391
+ <aside className="nav" data-chrome="atomic-nav">
392
+ <div className="brand"><span>Atomic View</span></div>
393
+ <input className="navsearch" placeholder="Filter components & templates…" value={q} onChange={(e)=>setQ(e.target.value)}/>
394
+ <div className="navgroup">
395
+ <button className="navtier" onClick={()=>setCollapsed(c=>({...c,found:!c.found}))}><span>{!collapsed.found?"▾":"▸"} Foundations</span><span className="navcount">1</span></button>
396
+ {!collapsed.found && <a className="navlink" href="#foundation-motion">Motion · live easings</a>}
397
+ </div>
398
+ {TIERS.map(t=>{
399
+ const byGrp=storyTree.get(t.id); if(!byGrp||!byGrp.size) return null;
400
+ const groups=NM.sortedGroupNames?NM.sortedGroupNames(byGrp):[...byGrp.keys()].sort();
401
+ const total=[...byGrp.values()].reduce((n,a)=>n+a.length,0);
402
+ const open=!collapsed[t.id];
403
+ return (
404
+ <div key={t.id} className="navgroup">
405
+ <button className="navtier" onClick={()=>setCollapsed(c=>({...c,[t.id]:!c[t.id]}))}><span>{open?"▾":"▸"} {t.label}</span><span className="navcount">{total}</span></button>
406
+ {open && groups.map(g=>(
407
+ <div key={g}>
408
+ <div className="navsub">{g}</div>
409
+ {(byGrp.get(g)||[]).map(s=><a className="navlink" key={s.name} href={"#"+slug(s.name)}>{s.name}</a>)}
410
+ </div>
411
+ ))}
412
+ </div>
413
+ );
414
+ })}
415
+ <div className="navgroup">
416
+ <button className="navtier" onClick={()=>setCollapsed(c=>({...c,tpl:!c.tpl}))}><span>{!collapsed.tpl?"▾":"▸"} Templates</span><span className="navcount">{shownTpls.length}</span></button>
417
+ {!collapsed.tpl && <>
418
+ <a className="navlink" href="#tier-templates"><b>All templates</b></a>
419
+ {tplGroups.map(g=>{
420
+ const defOpen = g.category==="Product" || g.category==="HR";
421
+ const catOpen = nq ? true : (openTplCat[g.category]===undefined ? defOpen : !!openTplCat[g.category]);
422
+ return (
423
+ <div key={g.category}>
424
+ <button type="button" className="navtier" style={{paddingInlineStart:4,fontSize:10.5}} onClick={()=>setOpenTplCat(c=>({...c,[g.category]:!catOpen}))}>
425
+ <span>{catOpen?"▾":"▸"} {g.category}{g.category==="HR"?" (ops + suite)":""}</span>
426
+ <span className="navcount">{g.items.length}</span>
427
+ </button>
428
+ {catOpen && g.items.map(t=><a className="navlink" key={t.src} href={"#tpl-"+slug(t.name)}>{t.shortName||t.name}<span className="cat">{g.category}</span></a>)}
429
+ </div>
430
+ );
431
+ })}
432
+ </>}
433
+ </div>
434
+ <div className="navgroup">
435
+ <button className="navtier" onClick={()=>setCollapsed(c=>({...c,pages:!c.pages}))}><span>{!collapsed.pages?"▾":"▸"} Pages</span><span className="navcount">{shownPages.length}</span></button>
436
+ {!collapsed.pages && <><a className="navlink" href="#tier-pages"><b>All pages</b></a>{shownPages.map(t=><a className="navlink" key={t.src} href={"#tpl-"+slug(t.name)}>{t.name}</a>)}</>}
437
+ </div>
438
+ </aside>
439
+ <main>
440
+ <div className="toolbar" data-chrome="atomic-toolbar">
441
+ <h1>CyberSkill · Components</h1>
442
+ <label className="ctl">Theme
443
+ <select value={theme} onChange={(e)=>setTheme(e.target.value)}><option value="light">Light</option><option value="dark">Dark</option></select>
444
+ </label>
445
+ <label className="ctl">Element
446
+ <select value={el} onChange={(e)=>setEl(e.target.value)}>{ELEMENTS.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>
447
+ </label>
448
+ <label className="ctl">Language
449
+ <select value={lang} onChange={(e)=>setLang(e.target.value)}>{LANGS.map(([v,l])=><option key={v} value={v}>{l}</option>)}</select>
450
+ </label>
451
+ <span className="count">{shown.length}/{STORIES.length}</span>
452
+ </div>
453
+ <div id="canvas" {...axis}>
454
+ <div id="foundation-motion">
455
+ <h2 className="tierhead">Foundations · Motion<span className="sub">Live easing tracks and duration chips — freezes under prefers-reduced-motion.</span></h2>
456
+ <div className="motion-embed"><iframe src="motion.html" title="Motion specimen" loading="lazy"></iframe></div>
457
+ </div>
458
+ <div key={"lang-"+(lang||"def")}>
459
+ {TIERS.map(t=>{
460
+ const byGrp=storyTree.get(t.id); if(!byGrp||!byGrp.size) return null;
461
+ const groups=NM.sortedGroupNames?NM.sortedGroupNames(byGrp):[...byGrp.keys()].sort();
462
+ return (
463
+ <div key={t.id}>
464
+ <h2 className="tierhead">{t.label}<span className="sub">{t.sub}</span></h2>
465
+ {groups.map(g=>(
466
+ <div key={g}>
467
+ <div className="grphead">{g}</div>
468
+ {(byGrp.get(g)||[]).map(s=><Story s={s} key={s.name} lang={lang}/>)}
469
+ </div>
470
+ ))}
471
+ </div>
472
+ );
473
+ })}
474
+ </div>
475
+ {shownTpls.length>0 && <div>
476
+ <h2 className="tierhead" id="tier-templates">Templates<span className="sub">Starting points ({shownTpls.length}) — HR ops tools and the lawyer-validated HR Suite share one HR group. Previews mount per open category (virtualized).</span></h2>
477
+ {tplGroups.map(g=>{
478
+ const defOpen = g.category==="Product" || g.category==="HR";
479
+ const catOpen = nq ? true : (openTplCat[g.category]===undefined ? defOpen : !!openTplCat[g.category]);
480
+ return (
481
+ <div key={g.category} id={"tplcat-"+slug(g.category)}>
482
+ <div className="grphead">{g.category}{g.category==="HR"?" — internal ops + employment suite":""} · {g.items.length}</div>
483
+ <ArtifactTier items={g.items} ax={artifactAx} active={catOpen}/>
484
+ </div>
485
+ );
486
+ })}
487
+ </div>}
488
+ {shownPages.length>0 && <div><h2 className="tierhead" id="tier-pages">Pages<span className="sub">Full product recreations (UI kits) — the same axes applied to whole apps.</span></h2><ArtifactTier items={shownPages} ax={artifactAx} active={true}/></div>}
489
+ </div>
490
+ </main>
491
+ </div>
492
+ );
493
+ }
494
+ ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
495
+ </script>
496
+ </body>
497
+ </html>