@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/ui_kits/status-hub/project.html ADDED
@@ -0,0 +1,137 @@
1
+ <!-- @dsCard group="Status Hub" viewport="1280x900" name="Status Hub — project detail" subtitle="Full project view: breadcrumb, steps, tasks, timeline, risk" -->
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 · Design System v1.6</title>
8
+ <link rel="icon" href="../../assets/favicon.svg" />
9
+ <link rel="stylesheet" href="../../styles.css" />
10
+ <link rel="stylesheet" href="status.css" />
11
+ <style>
12
+ html, body { margin: 0; background: var(--cs-color-surface-page); }
13
+ .pd { max-width: 1000px; margin: 0 auto; padding: 22px 28px 72px; }
14
+ .crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--cs-color-text-muted); margin: 18px 0 16px; }
15
+ .crumb a { color: var(--cs-color-text-muted); text-decoration: none; }
16
+ .crumb a:hover { color: var(--cs-color-text-accent); }
17
+ .crumb .sep { color: var(--cs-color-border-default); }
18
+ .crumb .cur { color: var(--cs-color-text-primary); font-weight: 600; }
19
+ .pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
20
+ .pd-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
21
+ .pd-head h1 .k { font-family: var(--cs-font-family-mono); color: var(--cs-color-brand-umber); }
22
+ .pd-head p { margin: 0; color: var(--cs-color-text-muted); max-width: 560px; }
23
+ .pd-actions { display: flex; gap: 10px; }
24
+ .pd-stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 20px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: 14px; padding: 20px 22px; margin: 20px 0; }
25
+ .stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--cs-color-text-muted); }
26
+ .stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; }
27
+ .pd-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
28
+ .panel h2.sec { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--cs-color-text-muted); margin: 0 0 14px; }
29
+ .steps-wrap { margin: 6px 0 4px; }
30
+ .task { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--cs-color-border-default); }
31
+ .task:first-of-type { border-top: 0; }
32
+ .task .mono { font-family: var(--cs-font-family-mono); font-size: 12.5px; color: var(--cs-color-text-accent); }
33
+ .task .nm { flex: 1; font-size: 14px; }
34
+ .toggle { position: fixed; right: 20px; bottom: 20px; z-index: 60; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); width: 44px; height: 44px; border-radius: 999px; cursor: pointer; box-shadow: var(--cs-shadow-md); display: grid; place-items: center; }
35
+ @media (max-width: 820px) { .pd-grid { grid-template-columns: 1fr; } }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <div class="sh">
40
+ <header class="hd">
41
+ <div class="hd-in">
42
+ <div class="hd-id">
43
+ <span class="hd-mark"><img src="../../assets/logo-mark.svg" alt="" /></span>
44
+ <div><h1>Status Hub</h1><p class="hd-sub">CyberSkill · project detail</p></div>
45
+ </div>
46
+ <div class="hd-side"><p class="hd-meta">Updated<br />2h ago · An Le</p></div>
47
+ </div>
48
+ </header>
49
+
50
+ <div class="pd">
51
+ <nav class="crumb" aria-label="Breadcrumb">
52
+ <a href="index.html">Status Hub</a><span class="sep">/</span>
53
+ <a href="index.html">Platform</a><span class="sep">/</span>
54
+ <span class="cur">Design System v1.6</span>
55
+ </nav>
56
+
57
+ <div class="pd-head">
58
+ <div>
59
+ <h1><span class="k">CDS</span> · Design System v1.6</h1>
60
+ <p>Liquid Glass component bindings + 15 element packs, verified. Ships this week.</p>
61
+ </div>
62
+ <div class="pd-actions">
63
+ <button class="cs-button cs-button--secondary cs-button--sm">Share</button>
64
+ <button class="cs-button cs-button--primary cs-button--sm">Open board</button>
65
+ </div>
66
+ </div>
67
+
68
+ <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px">
69
+ <span class="pill active">In progress</span>
70
+ <span class="cs-badge">Platform</span>
71
+ <span class="cs-badge">Owner · An Le</span>
72
+ <span class="cs-badge cs-badge--info">AI-native</span>
73
+ </div>
74
+
75
+ <div class="pd-stats">
76
+ <div class="stat"><div class="l">Progress</div><div class="v">72%</div></div>
77
+ <div class="stat"><div class="l">Tasks</div><div class="v">18</div></div>
78
+ <div class="stat"><div class="l">Shipped</div><div class="v">13</div></div>
79
+ <div class="stat"><div class="l">Target</div><div class="v" style="font-size:18px;padding-top:6px">This week</div></div>
80
+ </div>
81
+
82
+ <div style="margin:8px 0 22px">
83
+ <div class="cs-progress"><span class="cs-progress__fill" style="width:72%"></span></div>
84
+ </div>
85
+
86
+ <div class="pd-grid">
87
+ <section class="panel">
88
+ <h2 class="sec">Tasks</h2>
89
+ <div class="task"><span class="mono">TASK-DS-041</span><span class="nm">Glass surface bindings</span><span class="pill done">Shipped</span></div>
90
+ <div class="task"><span class="mono">TASK-DS-047</span><span class="nm">Element-pack verifier v2</span><span class="pill active">In progress</span></div>
91
+ <div class="task"><span class="mono">TASK-DS-052</span><span class="nm">Dark-mode APCA re-check</span><span class="pill active">In progress</span></div>
92
+ <div class="task"><span class="mono">TASK-DS-055</span><span class="nm">Figma variable sync</span><span class="pill todo">Planned</span></div>
93
+
94
+ <h2 class="sec" style="margin-top:26px">The arc of this release</h2>
95
+ <div class="steps-wrap">
96
+ <div class="cs-steps">
97
+ <div class="cs-step cs-step--done"><span class="cs-step__marker">✓</span><span class="cs-step__title">Shape</span><span class="cs-step__body">Scoped</span></div>
98
+ <div class="cs-step cs-step--done"><span class="cs-step__marker">✓</span><span class="cs-step__title">Build</span><span class="cs-step__body">In code</span></div>
99
+ <div class="cs-step cs-step--active"><span class="cs-step__marker">3</span><span class="cs-step__title">Verify</span><span class="cs-step__body">Now</span></div>
100
+ <div class="cs-step"><span class="cs-step__marker">4</span><span class="cs-step__title">Ship</span><span class="cs-step__body">This week</span></div>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <aside style="display:grid;gap:20px">
106
+ <section class="panel">
107
+ <h2 class="sec">Details</h2>
108
+ <dl class="cs-dl">
109
+ <div><dt>Owner</dt><dd>An Le</dd></div>
110
+ <div><dt>Squad</dt><dd>Platform</dd></div>
111
+ <div><dt>Started</dt><dd>02 Jun 2026</dd></div>
112
+ <div><dt>Target</dt><dd>This week</dd></div>
113
+ </dl>
114
+ </section>
115
+ <section class="panel">
116
+ <h2 class="sec">Recent releases</h2>
117
+ <div class="cs-timeline">
118
+ <div class="cs-timeline__item cs-timeline__item--now"><span class="cs-timeline__marker">→</span><div><div class="cs-timeline__title">v1.6.0</div><div class="cs-timeline__meta">This week</div><div class="cs-timeline__body">Glass bindings + verifier v2</div></div></div>
119
+ <div class="cs-timeline__item"><span class="cs-timeline__marker">✓</span><div><div class="cs-timeline__title">v1.5.1</div><div class="cs-timeline__meta">04 Jul 2026</div><div class="cs-timeline__body">15 element packs ship</div></div></div>
120
+ <div class="cs-timeline__item"><span class="cs-timeline__marker">✓</span><div><div class="cs-timeline__title">v1.4.0</div><div class="cs-timeline__meta">13 Jun 2026</div><div class="cs-timeline__body">Liquid Glass in code</div></div></div>
121
+ </div>
122
+ </section>
123
+ </aside>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <button class="toggle" id="themeToggle" aria-label="Toggle theme">☾</button>
128
+ <script>
129
+ document.getElementById("themeToggle").addEventListener("click", function () {
130
+ var el = document.documentElement;
131
+ var dark = el.getAttribute("data-theme") === "dark";
132
+ el.setAttribute("data-theme", dark ? "light" : "dark");
133
+ this.textContent = dark ? "☾" : "☀";
134
+ });
135
+ </script>
136
+ </body>
137
+ </html>
package/ui_kits/status-hub/settings.html ADDED
@@ -0,0 +1,88 @@
1
+ <!-- @dsCard group="Status Hub" viewport="1280x840" name="Status Hub — settings" subtitle="Tabs, form controls, switches, danger zone" -->
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 · Settings</title>
8
+ <link rel="icon" href="../../assets/favicon.svg" />
9
+ <link rel="stylesheet" href="../../styles.css" />
10
+ <link rel="stylesheet" href="status.css" />
11
+ <style>
12
+ html, body { margin: 0; background: var(--cs-color-surface-page); }
13
+ .set-grid { display: grid; gap: 18px; margin: 22px 0 64px; }
14
+ .panel h3.sec { margin: 0 0 4px; font-size: 18px; }
15
+ .panel .hint { margin: 0 0 18px; color: var(--cs-color-text-muted); font-size: 14px; }
16
+ .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
17
+ .toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--cs-color-border-default); }
18
+ .toggle-row:first-of-type { border-top: 0; }
19
+ .toggle-row .t { font-weight: 600; }
20
+ .toggle-row .d { color: var(--cs-color-text-muted); font-size: 13.5px; margin-top: 2px; max-width: 460px; }
21
+ .danger { border: 1px solid var(--cs-color-semantic-danger); border-radius: 14px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: color-mix(in oklab, var(--cs-color-semantic-danger) 5%, var(--cs-color-surface-panel)); }
22
+ .danger .t { font-weight: 700; }
23
+ .actions { display: flex; gap: 10px; justify-content: flex-end; }
24
+ @media (max-width: 700px) { .field-row { grid-template-columns: 1fr; } }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <div class="sh">
29
+ <header class="hd">
30
+ <div class="hd-in">
31
+ <div class="hd-id">
32
+ <span class="hd-mark"><img src="../../assets/logo-mark.svg" alt="" /></span>
33
+ <div><h1>Settings</h1><p class="hd-sub">CyberSkill · workspace &amp; preferences</p></div>
34
+ </div>
35
+ <div class="hd-side"><p class="hd-meta">Signed in as<br />an@cyberskill.world</p></div>
36
+ </div>
37
+ </header>
38
+
39
+ <div class="wrap">
40
+ <nav class="cs-tabs" style="margin-top:24px" aria-label="Settings sections">
41
+ <button class="cs-tab" aria-selected="true">Profile</button>
42
+ <button class="cs-tab">Notifications</button>
43
+ <button class="cs-tab">Appearance</button>
44
+ <button class="cs-tab">Team <span class="cs-tab__count">6</span></button>
45
+ </nav>
46
+
47
+ <div class="set-grid">
48
+ <section class="panel">
49
+ <h3 class="sec">Profile</h3>
50
+ <p class="hint">This is how you appear across the Status Hub.</p>
51
+ <div class="field-row">
52
+ <label class="cs-field"><span class="cs-field__label">Full name</span><input class="cs-field__control" value="Nguyễn Hoàng An" /></label>
53
+ <label class="cs-field"><span class="cs-field__label">Work email</span><input class="cs-field__control" type="email" value="an@cyberskill.world" /></label>
54
+ <label class="cs-field"><span class="cs-field__label">Squad</span><span class="cs-select"><select class="cs-field__control"><option>Platform</option><option>AI</option><option>Growth</option></select><span class="cs-select__chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span></span></label>
55
+ <label class="cs-field"><span class="cs-field__label">Interface language</span><span class="cs-select"><select class="cs-field__control"><option>English</option><option>Tiếng Việt</option></select><span class="cs-select__chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span></span></label>
56
+ </div>
57
+ </section>
58
+
59
+ <section class="panel">
60
+ <h3 class="sec">Notifications</h3>
61
+ <p class="hint">We keep it quiet — only what you ask for.</p>
62
+ <div class="toggle-row"><div><div class="t">Release notes</div><div class="d">A summary each time a project ships. Bilingual (EN + VN).</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
63
+ <div class="toggle-row"><div><div class="t">Blocked-project alerts</div><div class="d">Get pinged when a project moves to Blocked.</div></div><label class="cs-switch"><input type="checkbox" role="switch" checked /><span class="cs-switch__track"></span></label></div>
64
+ <div class="toggle-row"><div><div class="t">Weekly velocity digest</div><div class="d">Tasks shipped per week, every Monday morning.</div></div><label class="cs-switch"><input type="checkbox" role="switch" /><span class="cs-switch__track"></span></label></div>
65
+ </section>
66
+
67
+ <section class="danger">
68
+ <div><div class="t">Delete workspace</div><div class="d" style="color:var(--cs-color-text-muted);font-size:13.5px;margin-top:2px">Removes every project and release. This cannot be undone.</div></div>
69
+ <button class="cs-button cs-button--danger-ghost">Delete workspace</button>
70
+ </section>
71
+
72
+ <div class="actions">
73
+ <button class="cs-button cs-button--ghost">Cancel</button>
74
+ <button class="cs-button cs-button--primary">Save changes</button>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ <button id="themeToggle" aria-label="Toggle theme" style="position:fixed;right:20px;bottom:20px;z-index:60;border:1px solid var(--cs-color-border-default);background:var(--cs-color-surface-panel);color:var(--cs-color-text-primary);width:44px;height:44px;border-radius:999px;cursor:pointer;box-shadow:var(--cs-shadow-md)">☾</button>
80
+ <script>
81
+ document.getElementById("themeToggle").addEventListener("click", function () {
82
+ var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
83
+ el.setAttribute("data-theme", dark ? "light" : "dark");
84
+ this.textContent = dark ? "☾" : "☀";
85
+ });
86
+ </script>
87
+ </body>
88
+ </html>
package/ui_kits/status-hub/status.css ADDED
@@ -0,0 +1,199 @@
1
+ /* CyberSkill Status Hub — product surface styles.
2
+ * Ported from the real status-hub stylesheet (status-hub@2). Tokens come from
3
+ * the design system (styles.css); this file is the component layer only, plus
4
+ * the page-local tokens the CDS palette doesn't carry (text-on-fill roles). */
5
+
6
+ :root {
7
+ --cs-status-on-ochre: #45210E;
8
+ --cs-status-on-fill: #FFFFFF;
9
+ --cs-status-todo: #E7D9C6;
10
+ --cs-status-header-bg: #45210E;
11
+ --cs-status-header-fg: #FFFFFF;
12
+ --cs-status-scrim: rgba(23, 17, 12, .45);
13
+ --cs-status-shadow: rgba(23, 17, 12, .22);
14
+ --cs-status-ghost-border: rgba(255, 255, 255, .25);
15
+ }
16
+ [data-theme="dark"] {
17
+ --cs-status-header-bg: #120D09;
18
+ --cs-status-header-fg: #F3E9DC;
19
+ --cs-status-on-fill: #17110C;
20
+ --cs-status-todo: #59452F;
21
+ }
22
+
23
+ .sh { background: var(--cs-color-surface-page); color: var(--cs-color-text-primary);
24
+ font-family: var(--cs-font-family-ui); font-size: 15px; line-height: var(--cs-font-lineHeight-body); min-height: 100%; }
25
+ .wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--cs-space-6); }
26
+ .mono { font-family: var(--cs-font-family-mono); }
27
+ .muted { color: var(--cs-color-text-muted); }
28
+
29
+ /* header */
30
+ .hd { background: var(--cs-status-header-bg); color: var(--cs-status-header-fg);
31
+ border-bottom: 3px solid var(--cs-color-brand-ochre); }
32
+ .hd-in { display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-6);
33
+ padding: var(--cs-space-5) var(--cs-space-6); flex-wrap: wrap; max-width: 1320px; margin: 0 auto; }
34
+ .hd-id { display: flex; align-items: center; gap: var(--cs-space-4); }
35
+ .hd-mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px;
36
+ background: var(--cs-color-brand-ochre); overflow: hidden; }
37
+ .hd-mark img { width: 42px; height: 42px; display: block; }
38
+ .hd h1 { margin: 0; font-size: 24px; letter-spacing: .2px; line-height: var(--cs-font-lineHeight-heading); }
39
+ .hd-sub { margin: 2px 0 0; font-size: 13.5px; opacity: .8; }
40
+ .hd-side { display: flex; align-items: center; gap: var(--cs-space-4); }
41
+ .hd-meta { margin: 0; font-size: 12.5px; opacity: .75; text-align: right; }
42
+
43
+ /* buttons */
44
+ .btn { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel);
45
+ color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); padding: 7px 12px; cursor: pointer;
46
+ font: inherit; font-size: 13.5px; font-weight: 600; }
47
+ .btn:hover { border-color: var(--cs-color-brand-ochre); }
48
+ .hd .btn.ghost { background: transparent; border-color: var(--cs-status-ghost-border);
49
+ color: var(--cs-status-header-fg); width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
50
+
51
+ /* deck */
52
+ .deck { margin: var(--cs-space-6) 0 var(--cs-space-4); display: grid; gap: var(--cs-space-4);
53
+ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
54
+ .panel { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
55
+ border-radius: 14px; padding: var(--cs-space-4) var(--cs-space-5); }
56
+ .panel > h2 { margin: 0 0 var(--cs-space-3); font-size: 12px; text-transform: uppercase;
57
+ letter-spacing: .09em; color: var(--cs-color-text-muted); }
58
+ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--cs-space-3);
59
+ margin-bottom: var(--cs-space-4); }
60
+ .kpi { text-align: left; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; }
61
+ .kpi b { display: block; font-size: 24px; line-height: 1.15; }
62
+ .kpi span { font-size: 12px; color: var(--cs-color-text-muted); }
63
+ .kpi[data-on="1"] b, .kpi:hover b { color: var(--cs-color-text-accent); }
64
+ .bar-seg { height: 12px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised);
65
+ overflow: hidden; display: flex; }
66
+ .bar-seg i { display: block; height: 100%; }
67
+ .seg-done { background: var(--cs-color-semantic-success); }
68
+ .seg-active { background: var(--cs-color-brand-ochre); }
69
+ .seg-hold { background: var(--cs-color-semantic-danger); }
70
+ .seg-todo { background: var(--cs-status-todo); }
71
+ .legend { display: flex; gap: var(--cs-space-4); flex-wrap: wrap; margin-top: var(--cs-space-3);
72
+ font-size: 12.5px; color: var(--cs-color-text-muted); }
73
+ .legend span { display: inline-flex; align-items: center; gap: 6px; }
74
+ .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
75
+ .spark { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: var(--cs-space-2); }
76
+ .spark a { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
77
+ gap: 4px; text-decoration: none; color: var(--cs-color-text-muted); font-size: 10.5px; }
78
+ .spark i { display: block; width: 100%; background: var(--cs-color-brand-ochre); border-radius: 4px 4px 0 0; min-height: 3px; }
79
+ .spark a:hover i { background: var(--cs-color-text-accent); }
80
+ .spark b { font-size: 11px; color: var(--cs-color-text-primary); font-weight: 600; }
81
+
82
+ /* now shipping */
83
+ .now { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-brand-ochre);
84
+ border-left: 4px solid var(--cs-color-brand-ochre); border-radius: 12px;
85
+ padding: var(--cs-space-4) var(--cs-space-5); margin-bottom: var(--cs-space-4); }
86
+ .now h2 { margin: 0 0 var(--cs-space-2); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
87
+ .now p { margin: 0; }
88
+
89
+ /* command bar */
90
+ .bar { position: sticky; top: 0; z-index: var(--cs-depth-nav);
91
+ background: color-mix(in oklab, var(--cs-color-surface-page) 78%, transparent);
92
+ -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%);
93
+ border: 1px solid var(--cs-color-border-default); border-radius: 14px;
94
+ padding: var(--cs-space-3) var(--cs-space-4); margin-bottom: var(--cs-space-4); }
95
+ .bar-top { display: flex; gap: var(--cs-space-3); align-items: center; flex-wrap: wrap; }
96
+ .srch { flex: 1 1 340px; display: flex; align-items: center; gap: var(--cs-space-2);
97
+ background: var(--cs-color-surface-panel); border: 1px solid var(--cs-component-textfield-border-default);
98
+ border-radius: var(--cs-radius-full); padding: 0 var(--cs-space-4); min-height: 42px; }
99
+ .srch:focus-within { border-color: var(--cs-color-brand-ochre); }
100
+ .srch svg { color: var(--cs-color-text-muted); }
101
+ .srch input { flex: 1; border: 0; background: transparent; outline: 0; min-width: 0;
102
+ color: var(--cs-color-text-primary); font: inherit; font-size: 14px; }
103
+ .lenses { display: flex; gap: 4px; background: var(--cs-color-surface-raised);
104
+ border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
105
+ .ln { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px;
106
+ font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--cs-color-text-accent); }
107
+ .ln[aria-selected="true"] { background: var(--cs-color-brand-umber); color: var(--cs-color-text-inverse); }
108
+ [data-theme="dark"] .ln[aria-selected="true"] { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
109
+ .facet { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--cs-color-text-muted); }
110
+ .facet select { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary);
111
+ border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px;
112
+ font-family: inherit; font-size: 13px; }
113
+ .cnt { margin-left: auto; font-size: 12.5px; color: var(--cs-color-text-muted); }
114
+
115
+ /* pills + chips */
116
+ .pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--cs-radius-full);
117
+ text-transform: uppercase; letter-spacing: .04em; }
118
+ .pill.done { background: var(--cs-color-semantic-success); color: var(--cs-status-on-fill); }
119
+ .pill.active { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
120
+ .pill.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill); }
121
+ .pill.todo { background: var(--cs-color-border-default); color: var(--cs-color-text-accent); }
122
+ .task-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--cs-space-2); }
123
+ .chip { font-family: var(--cs-font-family-mono); font-size: 11px; font-weight: 600; padding: 3px 7px;
124
+ border-radius: 6px; cursor: pointer; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent);
125
+ border: 1px solid var(--cs-color-border-default); }
126
+ .chip:hover { border-color: var(--cs-color-brand-ochre); }
127
+ .chip.done { background: var(--cs-color-semantic-success); color: var(--cs-status-on-fill); border-color: transparent; }
128
+ .chip.active { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); border-color: transparent; }
129
+ .chip.hold { background: var(--cs-color-semantic-danger); color: var(--cs-status-on-fill); border-color: transparent; }
130
+
131
+ /* board */
132
+ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--cs-space-4); }
133
+ .card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
134
+ border-radius: 14px; padding: var(--cs-space-4); cursor: pointer; text-align: left; font: inherit; color: inherit; }
135
+ .card:hover { border-color: var(--cs-color-brand-ochre); }
136
+ .card.hot { border-color: var(--cs-color-brand-ochre); }
137
+ .card-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-space-2); }
138
+ .card-h h3 { margin: 0; font-size: 15px; line-height: var(--cs-font-lineHeight-heading); }
139
+ .card-h h3 .k { color: var(--cs-color-brand-umber); font-weight: 700; }
140
+ .card-h .pct { font-size: 12.5px; color: var(--cs-color-text-muted); white-space: nowrap; }
141
+ .card p { margin: var(--cs-space-2) 0 0; font-size: 13px; color: var(--cs-color-text-muted); }
142
+ .minibar { height: 6px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised);
143
+ overflow: hidden; display: flex; margin: var(--cs-space-3) 0 0; }
144
+ .minibar i { display: block; height: 100%; }
145
+
146
+ /* table */
147
+ .tbl-wrap { border: 1px solid var(--cs-color-border-default); border-radius: 14px; overflow: hidden;
148
+ background: var(--cs-color-surface-panel); }
149
+ table.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
150
+ .tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--cs-color-border-default); vertical-align: top; }
151
+ .tbl thead th { background: var(--cs-color-surface-raised); font-size: 11.5px; text-transform: uppercase;
152
+ letter-spacing: .06em; color: var(--cs-color-text-muted); white-space: nowrap; }
153
+ .tbl tbody tr { cursor: pointer; }
154
+ .tbl tbody tr:hover { background: var(--cs-color-surface-raised); }
155
+ .tbl tbody tr:last-child td { border-bottom: 0; }
156
+
157
+ /* releases */
158
+ .rels { display: grid; gap: var(--cs-space-3); }
159
+ .rel { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default);
160
+ border-radius: 14px; padding: var(--cs-space-4) var(--cs-space-5); display: grid;
161
+ grid-template-columns: 30px 1fr; gap: var(--cs-space-4); }
162
+ .rel.now { border-color: var(--cs-color-brand-ochre); }
163
+ .rel .tick { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
164
+ font-size: 12px; font-weight: 700; color: var(--cs-status-on-fill); background: var(--cs-color-semantic-success); }
165
+ .rel.now .tick { background: var(--cs-color-brand-ochre); color: var(--cs-status-on-ochre); }
166
+ .rel-h { display: flex; align-items: baseline; gap: var(--cs-space-3); flex-wrap: wrap; }
167
+ .rel-h b { font-size: 17px; font-family: var(--cs-font-family-mono); }
168
+ .rel-sec h4 { margin: var(--cs-space-3) 0 var(--cs-space-1); font-size: 11.5px; text-transform: uppercase;
169
+ letter-spacing: .07em; color: var(--cs-color-text-muted); }
170
+ .rel-sec ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
171
+ .rel-sec li { margin: 3px 0; }
172
+
173
+ /* drawer */
174
+ .scrim { position: fixed; inset: 0; background: var(--cs-status-scrim); z-index: var(--cs-depth-modal); }
175
+ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: calc(var(--cs-depth-modal) + 1);
176
+ background: var(--cs-color-surface-page); border-left: 1px solid var(--cs-color-border-default);
177
+ box-shadow: -18px 0 48px var(--cs-status-shadow); display: flex; flex-direction: column; }
178
+ .dw-h { padding: var(--cs-space-4) var(--cs-space-5); border-bottom: 1px solid var(--cs-color-border-default);
179
+ background: var(--cs-color-surface-panel); }
180
+ .dw-h .row { display: flex; align-items: center; gap: var(--cs-space-2); flex-wrap: wrap; }
181
+ .dw-h h2 { margin: var(--cs-space-2) 0 0; font-size: 19px; line-height: var(--cs-font-lineHeight-heading); }
182
+ .dw-x { margin-left: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted);
183
+ padding: 2px 6px; display: grid; place-items: center; }
184
+ .dw-x:hover { color: var(--cs-color-semantic-danger); }
185
+ .dw-b { overflow: auto; padding: var(--cs-space-5); flex: 1; }
186
+ .meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--cs-space-3);
187
+ margin: 0 0 var(--cs-space-4); }
188
+ .meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-color-text-muted); }
189
+ .meta dd { margin: 2px 0 0; font-size: 13.5px; }
190
+ .sect h3 { margin: var(--cs-space-5) 0 var(--cs-space-2); font-size: 12px; text-transform: uppercase;
191
+ letter-spacing: .08em; color: var(--cs-color-text-muted); }
192
+ .tasks { margin: 0; padding-left: 18px; font-size: 13.5px; }
193
+ .tasks li { margin: 4px 0; }
194
+ .risk { background: var(--cs-color-surface-raised); border-left: 3px solid var(--cs-color-semantic-danger);
195
+ border-radius: var(--cs-radius-md); padding: var(--cs-space-3) var(--cs-space-4); font-size: 13.5px; }
196
+
197
+ .ft { margin: var(--cs-space-12) 0 var(--cs-space-16); text-align: center; font-size: 12px; color: var(--cs-color-text-muted); }
198
+
199
+ @media (max-width: 900px) { .deck { grid-template-columns: 1fr; } .hd-meta { text-align: left; } }
package/ui_kits/website/README.md ADDED
@@ -0,0 +1,36 @@
1
+ # cyberskill.world — UI kit
2
+
3
+ A high-fidelity recreation of the **CyberSkill marketing site** home page — the public front door for the Saigon studio whose guide is **Lumi**, the golden genie. Bilingual (EN + VN), lead-generation first.
4
+
5
+ ## What it demonstrates
6
+ - **Glass header** (`cs-surface-light`) with the Logo lockup, nav, a **language toggle** (EN ⇄ Tiếng Việt — flips every string, Vietnamese-first), a theme toggle, and a "Talk to Lumi" CTA.
7
+
8
+ - **Hero** over the warm `aurora-gold` wash with an umber protection gradient: eyebrow, the Ochre slogan + Vietnamese counterpart, lead, a **"make a wish"** input, and Lumi floating alongside.
9
+
10
+ - **Keyword marquee** band (real "what we build" terms).
11
+
12
+ - **Services** — three Standard-Glass cards.
13
+
14
+ - **Process** — the four-step "arc of a wish".
15
+
16
+ - **Careers** umber band + **Contact** form built from the design system's `cs-field` controls.
17
+
18
+ - **Lumi chat** — a floating launcher opens a scripted genie panel (real greeting + quick "wish" chips); typing a wish in the hero seeds the conversation.
19
+
20
+ ## Files
21
+ - `index.html` — entry; loads `styles.css`, `site.css`, React, and the app.
22
+
23
+ - `work.html` — case-study grid + results band (static, `.cs-*` classes; dark toggle).
24
+
25
+ - `careers.html` — values, open roles, culture CTA (static; dark toggle).
26
+
27
+ - `chat.html` — full-page **Lumi assistant**: composes `PromptInput`, `ChatMessage`, `PromptSuggestions`, `TypingIndicator`, `CitationList`, `ConfidenceMeter`, `AIDisclosureBadge`, and `LumiAvatar` from the bundle.
28
+
29
+ - `site.css` — bespoke marketing section styles, all driven by design tokens.
30
+
31
+ - `copy.js` — real EN + VN copy lifted from the product i18n dictionaries (`window.SITE_COPY`).
32
+
33
+ - `Website.jsx` — the interactive app (`window.Website`).
34
+
35
+ ## Fidelity notes
36
+ The production site layers a **3D cosmic scroll-story and a Claude-powered Lumi genie** (R3F + GSAP) over this HTML-first base — that base is the real product and is what's recreated here. The chat is scripted (no live model), copy is real, and colours/type/spacing come from the design tokens. Exact service and case-study copy lives in the production CMS; the service cards here use the real "what we build" categories.
package/ui_kits/website/Website.jsx ADDED
@@ -0,0 +1,167 @@
1
+ const { useState, useRef, useEffect } = React;
2
+
3
+ function I({ name, size = 20, stroke = 1.9 }) {
4
+ const p = {
5
+ sparkle: "M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z",
6
+ chat: "M4 5h16v11H8l-4 4z",
7
+ check: "M4 12.5l5 5 11-11",
8
+ "arrow-right": "M5 12h14M13 6l6 6-6 6",
9
+ close: "M6 6l12 12M18 6L6 18",
10
+ sun: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zM12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4",
11
+ moon: "M20 13.5A8 8 0 1 1 10.5 4a6.5 6.5 0 0 0 9.5 9.5z",
12
+ }[name];
13
+ return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={p} /></svg>;
14
+ }
15
+
16
+ function Chat({ t, seed, onClose }) {
17
+ const [msgs, setMsgs] = useState([{ who: "bot", text: t.genie.greeting }]);
18
+ const [val, setVal] = useState("");
19
+ const bodyRef = useRef(null);
20
+ useEffect(() => { if (seed) send(seed); }, []);
21
+ useEffect(() => { const b = bodyRef.current; if (b) b.scrollTop = b.scrollHeight; }, [msgs]);
22
+ function send(text) {
23
+ const m = (text || "").trim(); if (!m) return;
24
+ setMsgs((cur) => [...cur, { who: "me", text: m }]);
25
+ setVal("");
26
+ setTimeout(() => setMsgs((cur) => [...cur, { who: "bot", text: "A wish worth granting. I’ll hand it to the team — first, what should I call you?" }]), 500);
27
+ }
28
+ return (
29
+ <div className="chat">
30
+ <div className="chat-h">
31
+ <img src="../../assets/lumi-poster.webp" alt="" />
32
+ <b>{t.genie.title}</b>
33
+ <button onClick={onClose} aria-label="Close chat"><I name="close" size={18} /></button>
34
+ </div>
35
+ <div className="chat-b" ref={bodyRef}>
36
+ {msgs.map((m, i) => <div key={i} className={"msg " + m.who}>{m.text}</div>)}
37
+ {msgs.length === 1 && (
38
+ <div className="chips">{t.genie.chips.map((c) => <button key={c} onClick={() => send(c)}>{c}</button>)}</div>
39
+ )}
40
+ </div>
41
+ <div className="chat-f">
42
+ <input value={val} onChange={(e) => setVal(e.target.value)} onKeyDown={(e) => e.key === "Enter" && send(val)} placeholder={t.genie.placeholder} />
43
+ <button onClick={() => send(val)}>{t.genie.send}</button>
44
+ </div>
45
+ </div>
46
+ );
47
+ }
48
+
49
+ function Website() {
50
+ const [loc, setLoc] = useState("en");
51
+ const [dark, setDark] = useState(false);
52
+ const [chat, setChat] = useState(false);
53
+ const [seed, setSeed] = useState("");
54
+ const [wish, setWish] = useState("");
55
+ const [sent, setSent] = useState(false);
56
+ const t = window.SITE_COPY[loc];
57
+
58
+ function openChat(s) { setSeed(s || ""); setChat(true); }
59
+
60
+ return (
61
+ <div className="site" data-theme={dark ? "dark" : undefined}>
62
+ <header className="hdr cs-surface-light">
63
+ <div className="container hdr-in">
64
+ <a className="brand" href="#top"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
65
+ <nav className="nav">{t.nav.map((n, i) => <a key={i} href={"#" + ["services","work","process","careers","contact"][i]}>{n}</a>)}</nav>
66
+ <div className="hdr-side">
67
+ <button className="mini" onClick={() => setLoc(loc === "en" ? "vi" : "en")}>{t.langLabel}</button>
68
+ <button className="mini icon" onClick={() => setDark(!dark)} aria-label="Toggle theme"><I name={dark ? "sun" : "moon"} size={18} /></button>
69
+ <button className="mini" style={{ background: "var(--cs-color-brand-umber)", color: "#fff", borderColor: "transparent" }} onClick={() => openChat("")}>{t.talk}</button>
70
+ </div>
71
+ </div>
72
+ </header>
73
+
74
+ <section className="hero" id="top">
75
+ <div className="container hero-in">
76
+ <div>
77
+ <div className="eyebrow">{t.eyebrow}</div>
78
+ <h1>{t.slogan}</h1>
79
+ <div className="vn">{t.sub}</div>
80
+ <p className="lead">{t.lead}</p>
81
+ <div className="wish">
82
+ <input value={wish} onChange={(e) => setWish(e.target.value)} onKeyDown={(e) => e.key === "Enter" && openChat(wish)} placeholder={t.wishPlaceholder} aria-label={t.wishPlaceholder} />
83
+ <button className="btn-gold" onClick={() => openChat(wish)}><I name="sparkle" size={18} />{t.wishCta}</button>
84
+ <button className="btn-ghost-light" onClick={() => openChat("")}>{t.talk}</button>
85
+ </div>
86
+ </div>
87
+ <div className="hero-art"><img src="../../assets/lumi-poster.webp" alt="Lumi, the golden genie" /></div>
88
+ </div>
89
+ </section>
90
+ <div className="marq"><div className="container marq-in">{t.marquee.map((m, i) => <React.Fragment key={i}>{i > 0 && <b>·</b>}<span>{m}</span></React.Fragment>)}</div></div>
91
+
92
+ <section className="sec" id="services">
93
+ <div className="container">
94
+ <div className="eyebrow">{t.nav[0]}</div>
95
+ <h2>{t.servicesTitle}</h2>
96
+ <p className="sec-lead">{t.servicesLead}</p>
97
+ <div className="svc-grid">
98
+ {t.services.map((s, i) => (
99
+ <article className="svc cs-surface-standard" key={i}>
100
+ <div className="svc-ic"><I name={s.icon} /></div>
101
+ <h3>{s.t}</h3><p>{s.s}</p>
102
+ <ul>{s.o.map((o) => <li key={o}>{o}</li>)}</ul>
103
+ </article>
104
+ ))}
105
+ </div>
106
+ </div>
107
+ </section>
108
+
109
+ <section className="sec sec-alt" id="process">
110
+ <div className="container">
111
+ <div className="eyebrow">{t.nav[2]}</div>
112
+ <h2>{t.processTitle}</h2>
113
+ <p className="sec-lead">{t.processLead}</p>
114
+ <div className="steps">
115
+ {t.steps.map((s) => (
116
+ <div className="step" key={s.n}><span className="n">{s.n}</span><h3>{s.t}</h3><p>{s.s}</p></div>
117
+ ))}
118
+ </div>
119
+ </div>
120
+ </section>
121
+
122
+ <section className="sec" id="careers">
123
+ <div className="container">
124
+ <div className="band">
125
+ <div><h2>{t.careersTitle}</h2><p>{t.careersLead}</p></div>
126
+ <button className="btn-gold" onClick={() => openChat("")}>{t.careersCta}<I name="arrow-right" size={18} /></button>
127
+ </div>
128
+ </div>
129
+ </section>
130
+
131
+ <section className="sec sec-alt" id="contact">
132
+ <div className="container contact-grid">
133
+ <div>
134
+ <div className="eyebrow">{t.nav[4]}</div>
135
+ <h2>{t.contactTitle}</h2>
136
+ <p className="sec-lead" style={{ marginBottom: 16 }}>{t.contactLead}</p>
137
+ <p className="trust"><I name="check" size={16} />{t.form.trust}</p>
138
+ </div>
139
+ {sent ? (
140
+ <div className="sent"><I name="check" size={18} /> {loc === "vi" ? "Đã nhận được lời nhắn. Cảm ơn bạn!" : "Message received. Thank you!"}</div>
141
+ ) : (
142
+ <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
143
+ <label className="cs-field"><span className="cs-field__label">{t.form.name}</span><input className="cs-field__control" required /></label>
144
+ <label className="cs-field"><span className="cs-field__label">{t.form.email}</span><input className="cs-field__control" type="email" required /></label>
145
+ <label className="cs-field"><span className="cs-field__label">{t.form.company} <span className="muted" style={{ fontWeight: 400, color: "var(--cs-color-text-muted)" }}>· {t.form.optional}</span></span><input className="cs-field__control" /></label>
146
+ <label className="cs-field"><span className="cs-field__label">{t.form.message}</span><textarea className="cs-field__control" rows="3" /></label>
147
+ <div><button type="submit" className="btn-gold">{t.form.submit}<I name="arrow-right" size={18} /></button></div>
148
+ </form>
149
+ )}
150
+ </div>
151
+ </section>
152
+
153
+ <footer className="ft">
154
+ <div className="container ft-in">
155
+ <a className="brand" href="#top"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
156
+ <div className="ft-links">{t.footerLinks.map((l) => <a key={l} href="#top">{l}</a>)}</div>
157
+ <small>© 2026 CyberSkill · {t.footerRights} · Saigon</small>
158
+ </div>
159
+ </footer>
160
+
161
+ {!chat && <button className="fab" onClick={() => openChat("")}><img src="../../assets/lumi-poster.webp" alt="" />{t.talk}</button>}
162
+ {chat && <Chat t={t} seed={seed} onClose={() => setChat(false)} />}
163
+ </div>
164
+ );
165
+ }
166
+
167
+ window.Website = Website;