@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/website/careers.html ADDED
@@ -0,0 +1,109 @@
1
+ <!-- @dsCard group="Website" viewport="1200x820" name="cyberskill.world — careers" subtitle="Values, open roles list, culture CTA" -->
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 · Careers</title>
8
+ <link rel="icon" href="../../assets/favicon.svg" />
9
+ <link rel="stylesheet" href="../../styles.css" />
10
+ <link rel="stylesheet" href="site.css" />
11
+ <style>
12
+ html, body { margin: 0; }
13
+ .car-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 76px 0 64px; position: relative; overflow: hidden; }
14
+ .car-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .32; }
15
+ .car-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.28), rgba(26,17,8,.78)); }
16
+ .car-hero .container { position: relative; z-index: 1; }
17
+ .car-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 12px 0 6px; }
18
+ .car-hero p { font-size: 18px; opacity: .92; max-width: 600px; margin: 0; }
19
+ .vals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
20
+ .val { border-top: 3px solid var(--cs-color-brand-ochre); padding-top: 16px; }
21
+ .val h3 { margin: 0 0 6px; font-size: 18px; }
22
+ .val p { margin: 0; color: var(--cs-color-text-muted); font-size: 14px; line-height: 1.5; }
23
+ .roles { display: grid; gap: 12px; }
24
+ .role { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); transition: border-color .12s; flex-wrap: wrap; }
25
+ .role:hover { border-color: var(--cs-color-brand-ochre); }
26
+ .role h3 { margin: 0 0 4px; font-size: 19px; }
27
+ .role .meta { color: var(--cs-color-text-muted); font-size: 14px; display: flex; gap: 14px; flex-wrap: wrap; }
28
+ @media (max-width: 760px) { .vals { grid-template-columns: 1fr 1fr; } .nav { display: none; } }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div class="site">
33
+ <header class="hdr cs-surface-light">
34
+ <div class="container hdr-in">
35
+ <a class="brand" href="index.html"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
36
+ <nav class="nav"><a href="index.html" data-vi="Dịch vụ">Services</a><a href="work.html" data-vi="Dự án">Work</a><a href="careers.html" data-vi="Tuyển dụng">Careers</a><a href="index.html" data-vi="Liên hệ">Contact</a></nav>
37
+ <div class="hdr-side"><a class="mini" href="#" id="langToggle">Tiếng Việt</a><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
38
+ </div>
39
+ </header>
40
+
41
+ <section class="car-hero">
42
+ <div class="container">
43
+ <div class="eyebrow" style="color:var(--cs-color-brand-ochre)" data-vi="Tuyển dụng">Careers</div>
44
+ <h1 data-vi="Cùng xây với chúng tôi">Build with us</h1>
45
+ <p data-vi="Chúng tôi tuyển vì tay nghề và sự tận tâm — đội ngũ senior, nhỏ gọn, trung thực về đánh đổi. Ở Sài Gòn, song ngữ, thân thiện với làm việc từ xa.">We hire for craft and care — senior, small, and honest about trade-offs. Saigon-based, bilingual, remote-friendly.</p>
46
+ </div>
47
+ </section>
48
+
49
+ <section class="sec">
50
+ <div class="container">
51
+ <div class="eyebrow" data-vi="Cách chúng tôi làm việc">How we work</div>
52
+ <h2 style="margin:8px 0 32px" data-vi="Điều chúng tôi trân trọng">What we value</h2>
53
+ <div class="vals">
54
+ <div class="val"><h3 data-vi="Ấm áp">Warm</h3><p data-vi="Chúng tôi đối xử với khách hàng và với nhau bằng sự quan tâm chân thành.">We treat clients and each other with genuine care.</p></div>
55
+ <div class="val"><h3 data-vi="Thẳng thắn">Direct</h3><p data-vi="Lời nói giản dị, kết quả cụ thể, không vòng vo.">Plain words, concrete outcomes, no hedging.</p></div>
56
+ <div class="val"><h3 data-vi="Trung thực">Honest</h3><p data-vi="Chúng tôi gọi tên các đánh đổi, kể cả những điều bất tiện.">We name the trade-offs, even the inconvenient ones.</p></div>
57
+ <div class="val"><h3 data-vi="Tôn trọng">Respectful</h3><p data-vi="Với thời gian, dữ liệu và sự đồng ý của bạn.">Of your time, your data, and your consent.</p></div>
58
+ </div>
59
+ </div>
60
+ </section>
61
+
62
+ <section class="sec sec-alt">
63
+ <div class="container">
64
+ <div class="eyebrow" data-vi="Vị trí đang tuyển">Open roles</div>
65
+ <h2 style="margin:8px 0 28px" data-vi="Nơi dành cho bạn">Where you fit</h2>
66
+ <div class="roles">
67
+ <div class="role"><div><h3>Senior Product Engineer</h3><div class="meta"><span data-vi="Nền tảng">Platform</span><span data-vi="Sài Gòn · Kết hợp">Saigon · Hybrid</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html" data-vi="Ứng tuyển →">Apply →</a></div>
68
+ <div class="role"><div><h3>Design Systems Engineer</h3><div class="meta"><span data-vi="Nền tảng">Platform</span><span data-vi="Từ xa · VN">Remote · VN</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html" data-vi="Ứng tuyển →">Apply →</a></div>
69
+ <div class="role"><div><h3>AI Product Designer</h3><div class="meta"><span>AI</span><span data-vi="Sài Gòn · Kết hợp">Saigon · Hybrid</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html" data-vi="Ứng tuyển →">Apply →</a></div>
70
+ <div class="role"><div><h3>Founding Growth Lead</h3><div class="meta"><span data-vi="Tăng trưởng">Growth</span><span data-vi="Sài Gòn">Saigon</span><span data-vi="Toàn thời gian">Full-time</span></div></div><a class="btn-gold" href="index.html" data-vi="Ứng tuyển →">Apply →</a></div>
71
+ </div>
72
+ </div>
73
+ </section>
74
+
75
+ <footer class="ft">
76
+ <div class="container ft-in">
77
+ <a class="brand" href="index.html"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
78
+ <div class="ft-links"><a href="#" data-vi="Quyền riêng tư">Privacy</a><a href="#" data-vi="Trợ năng">Accessibility</a><a href="#" data-vi="Điều khoản">Terms</a></div>
79
+ <small data-vi="© 2026 CyberSkill · Sài Gòn · Hiện Thực Hoá Ý Chí">© 2026 CyberSkill · Saigon · Hiện Thực Hoá Ý Chí</small>
80
+ </div>
81
+ </footer>
82
+ </div>
83
+ <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>
84
+ <script>
85
+ document.getElementById("themeToggle").addEventListener("click", function () {
86
+ var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
87
+ el.setAttribute("data-theme", dark ? "light" : "dark");
88
+ this.textContent = dark ? "☾" : "☀";
89
+ });
90
+ </script>
91
+ <script>
92
+ (function(){
93
+ var KEY="cs_site_lang", link=document.getElementById("langToggle");
94
+ function apply(vi){
95
+ document.documentElement.setAttribute("lang", vi?"vi":"en");
96
+ document.querySelectorAll("[data-vi]").forEach(function(el){
97
+ if(!el.dataset.en) el.dataset.en=el.textContent;
98
+ el.textContent = vi ? el.dataset.vi : el.dataset.en;
99
+ });
100
+ if(link) link.textContent = vi ? "English" : "Tiếng Việt";
101
+ try{localStorage.setItem(KEY, vi?"vi":"en");}catch(e){}
102
+ }
103
+ var vi=false; try{vi=localStorage.getItem(KEY)==="vi";}catch(e){}
104
+ if(vi) apply(true);
105
+ if(link) link.addEventListener("click", function(e){e.preventDefault(); apply(document.documentElement.getAttribute("lang")!=="vi");});
106
+ })();
107
+ </script>
108
+ </body>
109
+ </html>
package/ui_kits/website/chat.html ADDED
@@ -0,0 +1,133 @@
1
+ <!-- @dsCard group="Website" viewport="1200x820" name="cyberskill.world — Lumi chat" subtitle="Full-page AI assistant: prompt, messages, citations, review gate" -->
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 · Lumi</title>
8
+ <link rel="icon" href="../../assets/favicon.svg" />
9
+ <link rel="stylesheet" href="../../styles.css" />
10
+ <link rel="stylesheet" href="site.css" />
11
+ <style>
12
+ html, body { margin: 0; height: 100%; }
13
+ .lumi-page { display: grid; grid-template-columns: 288px 1fr; height: 100vh; background: var(--cs-color-surface-page); font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
14
+ .lumi-side { border-right: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); display: flex; flex-direction: column; padding: 16px 14px; gap: 4px; }
15
+ .lumi-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--cs-color-brand-umber); padding: 6px 10px 14px; }
16
+ .lumi-brand img { width: 30px; height: 30px; }
17
+ .lumi-new { margin: 0 4px 12px; }
18
+ .lumi-conv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); padding: 10px 12px 4px; }
19
+ .lumi-side-foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--cs-color-border-default); }
20
+ .lumi-main { display: flex; flex-direction: column; min-width: 0; }
21
+ .lumi-top { display: flex; align-items: center; gap: 12px; padding: 14px 28px; border-bottom: 1px solid var(--cs-color-border-default); background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
22
+ .lumi-top h1 { font-size: 17px; margin: 0; }
23
+ .lumi-top .sub { font-size: 12.5px; color: var(--cs-color-text-muted); }
24
+ .lumi-thread { flex: 1; overflow: auto; padding: 28px; }
25
+ .lumi-thread-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
26
+ .lumi-compose { border-top: 1px solid var(--cs-color-border-default); padding: 16px 28px 22px; background: var(--cs-color-surface-page); }
27
+ .lumi-compose-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
28
+ .lumi-answer-card { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: 14px; padding: 16px 18px; display: grid; gap: 14px; }
29
+ .lumi-answer-card p { margin: 0; font-size: 15px; line-height: 1.6; }
30
+ .lumi-answer-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
31
+ @media (max-width: 820px) { .lumi-page { grid-template-columns: 1fr; } .lumi-side { display: none; } }
32
+ </style>
33
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
34
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
35
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
36
+ <script src="../../_ds_bundle.js"></script>
37
+ </head>
38
+ <body>
39
+ <div id="root"></div>
40
+ <script type="text/babel">
41
+ const CS = window[Object.keys(window).find(k=>/^CyberSkillDesignSystem_[0-9a-f]{6}$/.test(k))] || {};
42
+ const { LumiAvatar, PromptInput, PromptSuggestions, ChatMessage, TypingIndicator, CitationList, AIDisclosureBadge, ConfidenceMeter, Button, Sidebar, NavItem, Badge } = CS;
43
+ const { useState, useRef, useEffect } = React;
44
+
45
+ function LumiPage() {
46
+ const [msgs, setMsgs] = useState([
47
+ { who: "lumi", kind: "intro" },
48
+ ]);
49
+ const [typing, setTyping] = useState(false);
50
+ const threadRef = useRef(null);
51
+ useEffect(() => { const t = threadRef.current; if (t) t.scrollTop = t.scrollHeight; }, [msgs, typing]);
52
+
53
+ function ask(text) {
54
+ const m = (text || "").trim(); if (!m) return;
55
+ setMsgs((c) => [...c, { who: "user", text: m }]);
56
+ setTyping(true);
57
+ setTimeout(() => {
58
+ setTyping(false);
59
+ setMsgs((c) => [...c, { who: "lumi", kind: "answer", text: m }]);
60
+ }, 1100);
61
+ }
62
+
63
+ return (
64
+ <div className="lumi-page">
65
+ <aside className="lumi-side">
66
+ <div className="lumi-brand"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</div>
67
+ <div className="lumi-new"><Button variant="primary" size="sm" fullWidth onClick={() => setMsgs([{ who: "lumi", kind: "intro" }])}>✦ New wish</Button></div>
68
+ <div className="lumi-conv-label">Recent</div>
69
+ <Sidebar>
70
+ <NavItem active>A faster checkout</NavItem>
71
+ <NavItem>Internal ops console</NavItem>
72
+ <NavItem>Bilingual design system</NavItem>
73
+ </Sidebar>
74
+ <div className="lumi-side-foot">
75
+ <NavItem icon={<LumiAvatar size="sm" />}>Lumi · genie mode</NavItem>
76
+ </div>
77
+ </aside>
78
+
79
+ <main className="lumi-main">
80
+ <header className="lumi-top">
81
+ <LumiAvatar src="../../assets/lumi-poster.webp" size="md" ring />
82
+ <div><h1>Lumi</h1><div className="sub">Golden genie · replies, then hands clear wishes to a human</div></div>
83
+ <span style={{ marginLeft: "auto" }}><Badge variant="info">AI-native</Badge></span>
84
+ </header>
85
+
86
+ <div className="lumi-thread" ref={threadRef}>
87
+ <div className="lumi-thread-inner">
88
+ {msgs.map((m, i) => {
89
+ if (m.who === "user") return <ChatMessage key={i} role="user">{m.text}</ChatMessage>;
90
+ if (m.kind === "intro") return (
91
+ <div key={i}>
92
+ <ChatMessage role="lumi" avatar={<LumiAvatar size="sm" />}>
93
+ Hello, I’m Lumi. Tell me a wish, and I’ll share plain advice before asking for anything. When a wish is clear, it goes to a real person on the team.
94
+ </ChatMessage>
95
+ <div style={{ marginTop: 12, marginLeft: 42 }}>
96
+ <PromptSuggestions suggestions={["A web app", "An internal tool", "A design system"]} onSelect={ask} />
97
+ </div>
98
+ </div>
99
+ );
100
+ return (
101
+ <ChatMessage key={i} role="lumi" avatar={<LumiAvatar size="sm" />}>
102
+ <div className="lumi-answer-card">
103
+ <p>A wish worth granting. For “{m.text}”, I’d start with a two-week shaping sprint — scope, a clickable prototype, and an honest estimate. Shall I hand this to the team?</p>
104
+ <div className="lumi-answer-meta">
105
+ <ConfidenceMeter value={0.82} label="Confidence" />
106
+ <AIDisclosureBadge label="AI assisted" details="Draft plan generated by Lumi from your wish, reviewed before handoff." sources={["Services", "Process"]} />
107
+ </div>
108
+ <CitationList label="Grounded in" items={[{ title: "What we build", source: "Services" }, { title: "The arc of a wish", source: "Process" }]} />
109
+ <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
110
+ <Button size="sm">Hand to the team</Button>
111
+ <Button variant="secondary" size="sm">Keep refining</Button>
112
+ </div>
113
+ </div>
114
+ </ChatMessage>
115
+ );
116
+ })}
117
+ {typing && <ChatMessage role="lumi" avatar={<LumiAvatar size="sm" />}><TypingIndicator /></ChatMessage>}
118
+ </div>
119
+ </div>
120
+
121
+ <div className="lumi-compose">
122
+ <div className="lumi-compose-inner">
123
+ <PromptInput onSubmit={ask} placeholder="Make a wish…" sendLabel="Send" />
124
+ </div>
125
+ </div>
126
+ </main>
127
+ </div>
128
+ );
129
+ }
130
+ ReactDOM.createRoot(document.getElementById("root")).render(<LumiPage />);
131
+ </script>
132
+ </body>
133
+ </html>
package/ui_kits/website/copy.js ADDED
@@ -0,0 +1,76 @@
1
+ // cyberskill.world — real bilingual copy (EN + VN) lifted from the product
2
+ // i18n dictionaries + content. window.SITE_COPY[locale]. Vietnamese-first.
3
+ window.SITE_COPY = {
4
+ en: {
5
+ nav: ["Services", "Work", "Process", "Careers", "Contact"],
6
+ langLabel: "Tiếng Việt",
7
+ eyebrow: "A Saigon studio that turns will into working software. Since 2020.",
8
+ slogan: "Turn Your Will Into Real",
9
+ sub: "Hiện Thực Hoá Ý Chí",
10
+ lead: "Lumi, our golden genie, takes a clear wish and helps the human team turn it into software your people actually run — built to ship, and built to last.",
11
+ wishPlaceholder: "Make a wish… a faster checkout, an app, a tool",
12
+ wishCta: "Make a wish",
13
+ talk: "Talk to Lumi",
14
+ marquee: ["Web apps", "Mobile apps", "Internal systems", "Automation", "Design systems", "Built to last"],
15
+ servicesTitle: "What we build",
16
+ servicesLead: "Three focused practices. One team that answers for the result.",
17
+ services: [
18
+ { icon: "sparkle", t: "Web & mobile apps", s: "Product apps your customers reach for — fast, accessible, bilingual by default.", o: ["Web apps", "Mobile apps", "Design systems"] },
19
+ { icon: "chat", t: "Internal systems & automation", s: "The tools your team runs on: dashboards, workflows, and the automation behind them.", o: ["Internal systems", "Automation"] },
20
+ { icon: "check", t: "Built to last", s: "Shipped software that keeps running — tested, documented, handed over cleanly.", o: ["Testing", "Docs", "Handover"] },
21
+ ],
22
+ processTitle: "The arc of a wish",
23
+ processLead: "Every project follows one arc: from a clear wish to software running in the real world.",
24
+ steps: [
25
+ { n: "01", t: "Make a wish", s: "Tell us the outcome in a sentence or two. We reply within one business day." },
26
+ { n: "02", t: "Shape it", s: "A small senior team scopes the work and is honest about trade-offs." },
27
+ { n: "03", t: "Build to ship", s: "Short cycles, real software you can run — not slideware." },
28
+ { n: "04", t: "Built to last", s: "Tested, documented, handed over. It keeps running after we leave." },
29
+ ],
30
+ careersTitle: "Build with us",
31
+ careersLead: "We hire for craft and care — senior, small, and honest about trade-offs.",
32
+ careersCta: "See open roles",
33
+ contactTitle: "Tell us your wish",
34
+ contactLead: "Send a short note. We reply within one business day.",
35
+ form: { name: "Your name", email: "Work email", company: "Company", message: "Anything we should know?", submit: "Send", optional: "optional", trust: "Your details go straight to the team. We never share them." },
36
+ genie: { title: "Lumi · CyberSkill’s golden genie", greeting: "Hello, I’m Lumi. Think of me as a friendly guide: tell me a wish, and I’ll share plain advice before asking for anything. When a wish is clear, it goes to a real person on the team.", placeholder: "Type your wish…", send: "Send", chips: ["A web app", "An internal tool", "A design system"] },
37
+ footerRights: "All rights reserved.",
38
+ footerLinks: ["Privacy", "Accessibility", "Terms"],
39
+ },
40
+ vi: {
41
+ nav: ["Dịch vụ", "Dự án", "Quy trình", "Tuyển dụng", "Liên hệ"],
42
+ langLabel: "English",
43
+ eyebrow: "Studio Sài Gòn. Biến ý chí thành phần mềm chạy thật. Từ năm 2020.",
44
+ slogan: "Hiện Thực Hoá Ý Chí",
45
+ sub: "Turn Your Will Into Real",
46
+ lead: "Lumi, thần đèn vàng của CyberSkill, cùng đội ngũ biến điều ước rõ thành phần mềm đội bạn dùng mỗi ngày: bàn giao được, dùng lâu được.",
47
+ wishPlaceholder: "Ước một điều… thanh toán nhanh hơn, một ứng dụng, một công cụ",
48
+ wishCta: "Ước điều này",
49
+ talk: "Trò chuyện với Lumi",
50
+ marquee: ["Ứng dụng web", "Ứng dụng di động", "Hệ thống nội bộ", "Tự động hóa", "Hệ thống thiết kế", "Bền bỉ lâu dài"],
51
+ servicesTitle: "Chúng tôi xây dựng những gì",
52
+ servicesLead: "Ba mảng chuyên sâu. Một đội chịu trách nhiệm đến kết quả cuối cùng.",
53
+ services: [
54
+ { icon: "sparkle", t: "Ứng dụng web & di động", s: "Sản phẩm khách hàng dùng mỗi ngày — nhanh, dễ tiếp cận, song ngữ mặc định.", o: ["Ứng dụng web", "Di động", "Hệ thống thiết kế"] },
55
+ { icon: "chat", t: "Hệ thống nội bộ & tự động hóa", s: "Công cụ đội bạn vận hành: bảng điều khiển, quy trình và tự động hóa phía sau.", o: ["Hệ thống nội bộ", "Tự động hóa"] },
56
+ { icon: "check", t: "Bền bỉ lâu dài", s: "Phần mềm bàn giao vẫn chạy tốt — được kiểm thử, tài liệu đầy đủ, bàn giao gọn.", o: ["Kiểm thử", "Tài liệu", "Bàn giao"] },
57
+ ],
58
+ processTitle: "Hành trình của một điều ước",
59
+ processLead: "Mỗi dự án một hành trình: từ điều ước rõ đến phần mềm chạy giữa đời thật.",
60
+ steps: [
61
+ { n: "01", t: "Ước một điều", s: "Kể kết quả bạn muốn trong một hai câu. Chúng tôi phản hồi trong một ngày làm việc." },
62
+ { n: "02", t: "Định hình", s: "Đội nhỏ, kinh nghiệm bóc tách công việc và nói thẳng về đánh đổi." },
63
+ { n: "03", t: "Xây để bàn giao", s: "Chu kỳ ngắn, phần mềm chạy thật — không phải slide." },
64
+ { n: "04", t: "Dùng lâu được", s: "Kiểm thử, tài liệu, bàn giao. Vẫn chạy tốt sau khi chúng tôi rời đi." },
65
+ ],
66
+ careersTitle: "Cùng chúng tôi kiến tạo",
67
+ careersLead: "Tuyển người có tay nghề và chỉn chu — đội gọn, kinh nghiệm, nói thẳng đánh đổi.",
68
+ careersCta: "Xem vị trí đang mở",
69
+ contactTitle: "Kể chúng tôi nghe điều bạn ước",
70
+ contactLead: "Một lời nhắn ngắn là đủ. Chúng tôi phản hồi trong một ngày làm việc.",
71
+ form: { name: "Tên của bạn", email: "Email công việc", company: "Công ty", message: "Bạn muốn chia sẻ thêm điều gì?", submit: "Gửi", optional: "không bắt buộc", trust: "Thông tin của bạn được gửi thẳng đến đội ngũ. Chúng tôi không chia sẻ cho bên thứ ba." },
72
+ genie: { title: "Lumi · thần đèn vàng CyberSkill", greeting: "Chào bạn, mình là Lumi. Cứ kể mình một điều ước; mình tư vấn trước, chỉ xin thông tin khi bạn muốn gửi. Điều ước rõ sẽ được chuyển cho người thật trong đội.", placeholder: "Viết điều ước của bạn…", send: "Gửi", chips: ["Một ứng dụng web", "Công cụ nội bộ", "Hệ thống thiết kế"] },
73
+ footerRights: "Bảo lưu mọi quyền.",
74
+ footerLinks: ["Quyền riêng tư", "Khả năng tiếp cận", "Điều khoản"],
75
+ },
76
+ };
package/ui_kits/website/index.html ADDED
@@ -0,0 +1,24 @@
1
+ <!-- @dsCard group="Website" viewport="1200x820" name="cyberskill.world — marketing home" subtitle="Bilingual hero, services, process, Lumi chat" -->
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 · Turn Your Will Into Real</title>
8
+ <link rel="icon" href="../../assets/favicon.svg" />
9
+ <link rel="stylesheet" href="../../styles.css" />
10
+ <link rel="stylesheet" href="site.css" />
11
+ <style>html,body{margin:0}</style>
12
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
13
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
14
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
15
+ <script src="copy.js"></script>
16
+ </head>
17
+ <body>
18
+ <div id="root"></div>
19
+ <script type="text/babel" src="Website.jsx"></script>
20
+ <script type="text/babel">
21
+ ReactDOM.createRoot(document.getElementById("root")).render(<Website />);
22
+ </script>
23
+ </body>
24
+ </html>
package/ui_kits/website/site.css ADDED
@@ -0,0 +1,121 @@
1
+ /* cyberskill.world — marketing site kit. Tokens from styles.css; this is the
2
+ * bespoke section layer. The production site adds a 3D cosmic scene + Lumi
3
+ * genie GLB over this base; here the base is the product. */
4
+
5
+ .site { font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-page); }
6
+ .container { max-width: 1200px; margin: 0 auto; padding: 0 var(--cs-space-6); }
7
+ .eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--cs-color-text-accent); }
8
+ .site a { color: var(--cs-color-link); text-decoration: none; }
9
+ .site a:hover { color: var(--cs-color-link-hover); }
10
+
11
+ /* header */
12
+ .hdr { position: sticky; top: 0; z-index: var(--cs-depth-nav); border-bottom: 1px solid var(--cs-glass-light-border); }
13
+ .hdr-in { display: flex; align-items: center; gap: var(--cs-space-6); padding: 12px 0; }
14
+ .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--cs-color-brand-umber); }
15
+ .brand img { width: 34px; height: 34px; }
16
+ .nav { display: flex; gap: var(--cs-space-5); margin-left: var(--cs-space-4); }
17
+ .nav a { font-size: 14px; font-weight: 600; color: var(--cs-color-text-primary); }
18
+ .nav a:hover { color: var(--cs-color-text-accent); }
19
+ .hdr-side { margin-left: auto; display: flex; align-items: center; gap: 10px; }
20
+ .mini { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-full); height: 38px; padding: 0 14px; font: 600 13px/1 var(--cs-font-family-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
21
+ .mini:hover { border-color: var(--cs-color-brand-ochre); }
22
+ .mini.icon { width: 38px; padding: 0; justify-content: center; }
23
+
24
+ /* hero */
25
+ .hero { position: relative; overflow: hidden; background: var(--cs-color-brand-umber); color: #fff; }
26
+ .hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .5; }
27
+ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.35), rgba(26,17,8,.82) 78%); }
28
+ .hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--cs-space-8); align-items: center; padding: 84px 0 96px; }
29
+ .hero .eyebrow { color: var(--cs-color-brand-ochre); }
30
+ .hero h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 14px 0 6px; color: var(--cs-color-brand-ochre); }
31
+ .hero .vn { font-size: 20px; font-weight: 600; opacity: .9; margin-bottom: 18px; }
32
+ .hero .lead { font-size: 18px; line-height: 1.55; max-width: 620px; opacity: .95; }
33
+ .wish { display: flex; gap: 10px; margin-top: 26px; max-width: 620px; flex-wrap: wrap; }
34
+ .wish input { flex: 1 1 300px; min-height: 52px; border-radius: var(--cs-radius-full); border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1); backdrop-filter: blur(8px); color: #fff; padding: 0 22px; font: 400 15px/1 var(--cs-font-family-ui); }
35
+ .wish input::placeholder { color: rgba(255,255,255,.72); }
36
+ .wish input:focus { outline: 3px solid var(--cs-color-brand-ochre); outline-offset: 1px; }
37
+ .btn-gold { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border: 0; border-radius: var(--cs-radius-full); min-height: 52px; padding: 0 26px; font: 700 15px/1 var(--cs-font-family-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
38
+ .btn-gold:hover { filter: brightness(1.06); }
39
+ .btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: var(--cs-radius-full); min-height: 52px; padding: 0 22px; font: 700 15px/1 var(--cs-font-family-ui); cursor: pointer; }
40
+ .btn-ghost-light:hover { background: rgba(255,255,255,.1); }
41
+ .hero-art { position: relative; justify-self: center; }
42
+ .hero-art img { width: 260px; filter: drop-shadow(0 24px 60px rgba(0,0,0,.5)); animation: float 6s var(--cs-ease-standard) infinite; }
43
+ @keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
44
+ @media (prefers-reduced-motion: reduce) { .hero-art img { animation: none; } }
45
+
46
+ /* marquee band */
47
+ .marq { background: var(--cs-color-brand-umber); border-top: 1px solid rgba(255,255,255,.12); overflow: hidden; }
48
+ .marq-in { display: flex; gap: 40px; padding: 16px 0; color: var(--cs-color-brand-ochre); font-weight: 700; font-size: 14px; letter-spacing: .04em; white-space: nowrap; justify-content: center; flex-wrap: wrap; }
49
+ .marq-in span { opacity: .9; }
50
+ .marq-in b { color: rgba(255,255,255,.4); }
51
+
52
+ /* section shell */
53
+ .sec { padding: 88px 0; }
54
+ .sec-alt { background: var(--cs-color-surface-raised); }
55
+ .sec h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.02em; margin: 8px 0 10px; }
56
+ .sec-lead { font-size: 17px; color: var(--cs-color-text-muted); max-width: 620px; margin: 0 0 40px; }
57
+
58
+ /* services */
59
+ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cs-space-5); }
60
+ .svc { border-radius: var(--cs-radius-lg); padding: 26px 24px; background: var(--cs-color-surface-panel); }
61
+ .svc-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 26%, var(--cs-color-surface-panel)); color: var(--cs-color-brand-umber); margin-bottom: 16px; }
62
+ .svc h3 { font-size: 20px; margin: 0 0 8px; }
63
+ .svc p { color: var(--cs-color-text-muted); font-size: 15px; margin: 0 0 16px; }
64
+ .svc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
65
+ .svc li { font-size: 12px; font-weight: 600; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 4px 10px; color: var(--cs-color-text-accent); }
66
+
67
+ /* process */
68
+ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cs-space-5); counter-reset: s; }
69
+ .step { position: relative; padding-top: 20px; border-top: 3px solid var(--cs-color-brand-ochre); }
70
+ .step .n { font-family: var(--cs-font-family-mono); font-weight: 700; font-size: 13px; color: var(--cs-color-text-accent); }
71
+ .step h3 { font-size: 18px; margin: 6px 0 6px; }
72
+ .step p { color: var(--cs-color-text-muted); font-size: 14px; margin: 0; }
73
+
74
+ /* careers band */
75
+ .band { background: var(--cs-color-brand-umber); color: #fff; border-radius: var(--cs-radius-lg); padding: 44px 40px; display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-6); flex-wrap: wrap; }
76
+ .band h2 { color: var(--cs-color-brand-ochre); margin: 0 0 6px; }
77
+ .band p { margin: 0; opacity: .9; max-width: 520px; }
78
+
79
+ /* contact */
80
+ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cs-space-10); align-items: start; }
81
+ .form { display: grid; gap: 14px; }
82
+ .form .cs-field__control, .form textarea.cs-field__control { width: 100%; }
83
+ .form textarea.cs-field__control { min-height: 96px; resize: vertical; }
84
+ .trust { font-size: 13px; color: var(--cs-color-text-muted); display: flex; gap: 8px; align-items: center; }
85
+ .sent { background: color-mix(in oklab, var(--cs-color-semantic-success) 10%, var(--cs-color-surface-panel)); border: 1px solid var(--cs-color-semantic-success); color: var(--cs-color-semantic-success); border-radius: var(--cs-radius-md); padding: 20px; font-weight: 600; }
86
+
87
+ /* footer */
88
+ .ft { background: var(--cs-color-brand-umber); color: rgba(255,255,255,.82); padding: 48px 0 40px; }
89
+ .ft-in { display: flex; justify-content: space-between; gap: var(--cs-space-6); flex-wrap: wrap; align-items: center; }
90
+ .ft .brand { color: #fff; }
91
+ .ft-links { display: flex; gap: var(--cs-space-5); }
92
+ .ft-links a { color: rgba(255,255,255,.82); font-size: 14px; }
93
+ .ft-links a:hover { color: var(--cs-color-brand-ochre); }
94
+ .ft small { color: rgba(255,255,255,.6); font-size: 13px; }
95
+
96
+ /* Lumi chat */
97
+ .fab { position: fixed; right: 22px; bottom: 22px; z-index: var(--cs-depth-toast); background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border: 0; border-radius: var(--cs-radius-full); height: 56px; padding: 0 22px 0 18px; font: 700 15px/1 var(--cs-font-family-ui); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--cs-shadow-lg); }
98
+ .fab:hover { filter: brightness(1.06); }
99
+ .fab img { width: 30px; height: 30px; }
100
+ .chat { position: fixed; right: 22px; bottom: 22px; z-index: calc(var(--cs-depth-toast) + 1); width: min(380px, calc(100vw - 44px)); border-radius: var(--cs-radius-lg); overflow: hidden; box-shadow: var(--cs-shadow-xl); display: flex; flex-direction: column; max-height: min(560px, 84vh); }
101
+ .chat-h { background: var(--cs-color-brand-umber); color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
102
+ .chat-h img { width: 30px; height: 30px; }
103
+ .chat-h b { font-size: 14px; }
104
+ .chat-h button { margin-left: auto; background: transparent; border: 0; color: rgba(255,255,255,.8); cursor: pointer; display: grid; place-items: center; }
105
+ .chat-b { background: var(--cs-color-surface-panel); padding: 16px; overflow: auto; display: grid; gap: 12px; align-content: start; }
106
+ .msg { max-width: 84%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
107
+ .msg.bot { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-bottom-left-radius: 4px; }
108
+ .msg.me { background: var(--cs-color-brand-umber); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
109
+ .chips { display: flex; flex-wrap: wrap; gap: 8px; }
110
+ .chips button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); border-radius: var(--cs-radius-full); padding: 7px 12px; font: 600 13px/1 var(--cs-font-family-ui); color: var(--cs-color-text-accent); cursor: pointer; }
111
+ .chips button:hover { border-color: var(--cs-color-brand-ochre); }
112
+ .chat-f { display: flex; gap: 8px; padding: 12px; background: var(--cs-color-surface-panel); border-top: 1px solid var(--cs-color-border-default); }
113
+ .chat-f input { flex: 1; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-full); padding: 0 14px; min-height: 42px; font: inherit; font-size: 14px; color: var(--cs-color-text-primary); background: var(--cs-color-surface-page); }
114
+ .chat-f input:focus { outline: 2px solid var(--cs-color-brand-ochre); }
115
+ .chat-f button { background: var(--cs-color-brand-umber); color: #fff; border: 0; border-radius: var(--cs-radius-full); padding: 0 16px; font: 700 13px/1 var(--cs-font-family-ui); cursor: pointer; }
116
+
117
+ @media (max-width: 860px) {
118
+ .hero-in { grid-template-columns: 1fr; } .hero-art { display: none; }
119
+ .svc-grid, .steps, .contact-grid { grid-template-columns: 1fr; }
120
+ .nav { display: none; }
121
+ }
package/ui_kits/website/work.html ADDED
@@ -0,0 +1,119 @@
1
+ <!-- @dsCard group="Website" viewport="1200x820" name="cyberskill.world — work" subtitle="Case-study grid, results band, CTA" -->
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 · Work</title>
8
+ <link rel="icon" href="../../assets/favicon.svg" />
9
+ <link rel="stylesheet" href="../../styles.css" />
10
+ <link rel="stylesheet" href="site.css" />
11
+ <style>
12
+ html, body { margin: 0; }
13
+ .work-hero { background: var(--cs-color-brand-umber); color: #fff; padding: 72px 0 60px; position: relative; overflow: hidden; }
14
+ .work-hero::before { content: ""; position: absolute; inset: 0; background-image: url("../../assets/aurora-gold.jpg"); background-size: cover; background-position: center; opacity: .34; }
15
+ .work-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,17,8,.3), rgba(26,17,8,.75)); }
16
+ .work-hero .container { position: relative; z-index: 1; }
17
+ .work-hero h1 { font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-ochre); margin: 12px 0 6px; }
18
+ .work-hero p { font-size: 18px; opacity: .92; max-width: 620px; margin: 0; }
19
+ .case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
20
+ .case { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); overflow: hidden; background: var(--cs-color-surface-panel); box-shadow: var(--cs-shadow-sm); transition: border-color .12s, box-shadow .12s; }
21
+ .case:hover { border-color: var(--cs-color-brand-ochre); box-shadow: var(--cs-shadow-md); }
22
+ .case-cap { height: 128px; display: flex; align-items: flex-end; padding: 16px 18px; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: 22px; }
23
+ .case-cap.a { background: var(--cs-color-brand-umber); color: var(--cs-color-brand-ochre); }
24
+ .case-cap.b { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
25
+ .case-cap.c { background: #6E3B0E; color: #fff; }
26
+ .case-b { padding: 18px 20px 22px; }
27
+ .case-b h3 { margin: 0 0 6px; font-size: 20px; }
28
+ .case-b p { margin: 0 0 14px; color: var(--cs-color-text-muted); font-size: 14.5px; line-height: 1.5; }
29
+ .case-tags { display: flex; flex-wrap: wrap; gap: 6px; }
30
+ .case-tags span { font-size: 12px; font-weight: 600; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 4px 10px; color: var(--cs-color-text-accent); }
31
+ .results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
32
+ .results .n { font-size: 44px; font-weight: 800; letter-spacing: -.02em; color: var(--cs-color-brand-umber); }
33
+ .results .l { color: var(--cs-color-text-muted); font-size: 14px; margin-top: 2px; }
34
+ @media (max-width: 760px) { .results { grid-template-columns: 1fr 1fr; } .nav { display: none; } }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="site">
39
+ <header class="hdr cs-surface-light">
40
+ <div class="container hdr-in">
41
+ <a class="brand" href="index.html"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
42
+ <nav class="nav"><a href="index.html" data-vi="Dịch vụ">Services</a><a href="work.html" data-vi="Dự án">Work</a><a href="careers.html" data-vi="Tuyển dụng">Careers</a><a href="index.html" data-vi="Liên hệ">Contact</a></nav>
43
+ <div class="hdr-side"><a class="mini" href="#" id="langToggle">Tiếng Việt</a><a class="mini" style="background:var(--cs-color-brand-umber);color:#fff;border-color:transparent" href="index.html" data-vi="Trò chuyện với Lumi">Talk to Lumi</a></div>
44
+ </div>
45
+ </header>
46
+
47
+ <section class="work-hero">
48
+ <div class="container">
49
+ <div class="eyebrow" style="color:var(--cs-color-brand-ochre)" data-vi="Dự án tiêu biểu">Selected work</div>
50
+ <h1 data-vi="Những điều ước đã thành hiện thực">Wishes we've granted</h1>
51
+ <p data-vi="Một vài sản phẩm chúng tôi đã giao từ 2020 — từ ứng dụng cho khách hàng đến hệ thống nội bộ mà các đội ngũ dùng hằng ngày.">A few of the products we've shipped since 2020 — from customer-facing apps to the internal systems teams run on.</p>
52
+ </div>
53
+ </section>
54
+
55
+ <section class="sec">
56
+ <div class="container">
57
+ <div class="case-grid">
58
+ <article class="case"><div class="case-cap a">SHOP</div><div class="case-b"><h3 data-vi="Thanh toán một chạm">One-tap checkout</h3><p data-vi="Xây lại trang thanh toán của một nhà bán lẻ cho tốc độ và trợ năng — song ngữ, ưu tiên di động.">Rebuilt a retailer's checkout for speed and accessibility — bilingual, mobile-first.</p><div class="case-tags"><span data-vi="Ứng dụng web">Web app</span><span data-vi="Thanh toán">Payments</span><span>VN + EN</span></div></div></article>
59
+ <article class="case"><div class="case-cap b">OPS</div><div class="case-b"><h3 data-vi="Bàn điều hành hiện trường">Field operations console</h3><p data-vi="Bảng điều khiển nội bộ thời gian thực, thay cho năm bảng tính và một nhóm chat.">A real-time internal dashboard replacing five spreadsheets and a group chat.</p><div class="case-tags"><span data-vi="Hệ thống nội bộ">Internal system</span><span data-vi="Bảng điều khiển">Dashboard</span></div></div></article>
60
+ <article class="case"><div class="case-cap c">FLOW</div><div class="case-b"><h3 data-vi="Phê duyệt, tự động hóa">Approvals, automated</h3><p data-vi="Tự động hóa có con người kiểm duyệt, cổng xét duyệt rõ ràng và nhật ký đầy đủ.">Human-in-the-loop automation with clear review gates and a full audit trail.</p><div class="case-tags"><span data-vi="Tự động hóa">Automation</span><span>AI-native</span></div></div></article>
61
+ </div>
62
+ </div>
63
+ </section>
64
+
65
+ <section class="sec sec-alt">
66
+ <div class="container">
67
+ <div class="results">
68
+ <div><div class="n">2020</div><div class="l" data-vi="Thành lập tại Sài Gòn">Founded in Saigon</div></div>
69
+ <div><div class="n">40+</div><div class="l" data-vi="Điều ước đã thực hiện">Wishes granted</div></div>
70
+ <div><div class="n">1 day</div><div class="l" data-vi="Thời gian phản hồi">Reply time</div></div>
71
+ <div><div class="n">EN·VN</div><div class="l" data-vi="Song ngữ mặc định">Bilingual by default</div></div>
72
+ </div>
73
+ </div>
74
+ </section>
75
+
76
+ <section class="sec">
77
+ <div class="container">
78
+ <div class="band">
79
+ <div><h2 data-vi="Bạn cũng có một điều ước?">Have a wish of your own?</h2><p data-vi="Nói kết quả bạn muốn trong một câu. Chúng tôi trả lời trong một ngày làm việc.">Tell us the outcome in a sentence. We reply within one business day.</p></div>
80
+ <a class="btn-gold" href="index.html" data-vi="Ước một điều →">Make a wish →</a>
81
+ </div>
82
+ </div>
83
+ </section>
84
+
85
+ <footer class="ft">
86
+ <div class="container ft-in">
87
+ <a class="brand" href="index.html"><img src="../../assets/logo-mark.svg" alt="" />CyberSkill</a>
88
+ <div class="ft-links"><a href="#" data-vi="Quyền riêng tư">Privacy</a><a href="#" data-vi="Trợ năng">Accessibility</a><a href="#" data-vi="Điều khoản">Terms</a></div>
89
+ <small data-vi="© 2026 CyberSkill · Sài Gòn · Hiện Thực Hoá Ý Chí">© 2026 CyberSkill · Saigon · Hiện Thực Hoá Ý Chí</small>
90
+ </div>
91
+ </footer>
92
+ </div>
93
+ <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>
94
+ <script>
95
+ document.getElementById("themeToggle").addEventListener("click", function () {
96
+ var el = document.documentElement, dark = el.getAttribute("data-theme") === "dark";
97
+ el.setAttribute("data-theme", dark ? "light" : "dark");
98
+ this.textContent = dark ? "☾" : "☀";
99
+ });
100
+ </script>
101
+ <script>
102
+ (function(){
103
+ var KEY="cs_site_lang", link=document.getElementById("langToggle");
104
+ function apply(vi){
105
+ document.documentElement.setAttribute("lang", vi?"vi":"en");
106
+ document.querySelectorAll("[data-vi]").forEach(function(el){
107
+ if(!el.dataset.en) el.dataset.en=el.textContent;
108
+ el.textContent = vi ? el.dataset.vi : el.dataset.en;
109
+ });
110
+ if(link) link.textContent = vi ? "English" : "Tiếng Việt";
111
+ try{localStorage.setItem(KEY, vi?"vi":"en");}catch(e){}
112
+ }
113
+ var vi=false; try{vi=localStorage.getItem(KEY)==="vi";}catch(e){}
114
+ if(vi) apply(true);
115
+ if(link) link.addEventListener("click", function(e){e.preventDefault(); apply(document.documentElement.getAttribute("lang")!=="vi");});
116
+ })();
117
+ </script>
118
+ </body>
119
+ </html>