@keyfunc/keybricks-ds 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 (418) hide show
  1. package/DEPLOY.md +204 -0
  2. package/DESIGN.md +269 -0
  3. package/INTEGRATION.md +417 -0
  4. package/SKILL.md +32 -0
  5. package/_adherence.oxlintrc.json +1469 -0
  6. package/_scripts/build-index.mjs +80 -0
  7. package/_scripts/build-tokens.mjs +135 -0
  8. package/assets/icons/icon-index.js +1 -0
  9. package/assets/icons/icon-index.json +1 -0
  10. package/assets/icons/unicons-index.js +1 -0
  11. package/assets/icons/unicons-index.json +1 -0
  12. package/assets/keybricks-logo.png +0 -0
  13. package/components/_cards/accordion.card.html +32 -0
  14. package/components/_cards/action-chip.card.html +22 -0
  15. package/components/_cards/activity.card.html +34 -0
  16. package/components/_cards/alert.card.html +32 -0
  17. package/components/_cards/app-chrome.card.html +36 -0
  18. package/components/_cards/banner.card.html +21 -0
  19. package/components/_cards/brand-visual.card.html +43 -0
  20. package/components/_cards/breadcrumb.card.html +23 -0
  21. package/components/_cards/button-1-base.card.html +39 -0
  22. package/components/_cards/button-2-states.card.html +56 -0
  23. package/components/_cards/button-3-sizes-icons.card.html +32 -0
  24. package/components/_cards/button-4-group.card.html +47 -0
  25. package/components/_cards/canvas-zoom-controls.card.html +19 -0
  26. package/components/_cards/cards-indicators.card.html +59 -0
  27. package/components/_cards/charts-1-sparkline.card.html +55 -0
  28. package/components/_cards/charts-10-gauge.card.html +31 -0
  29. package/components/_cards/charts-11-funnel.card.html +28 -0
  30. package/components/_cards/charts-12-treemap.card.html +23 -0
  31. package/components/_cards/charts-14-radar.card.html +31 -0
  32. package/components/_cards/charts-15-distribution.card.html +32 -0
  33. package/components/_cards/charts-16-pareto.card.html +25 -0
  34. package/components/_cards/charts-17-candlestick.card.html +34 -0
  35. package/components/_cards/charts-18-sankey.card.html +29 -0
  36. package/components/_cards/charts-19-chord.card.html +31 -0
  37. package/components/_cards/charts-2-line.card.html +46 -0
  38. package/components/_cards/charts-20-sunburst.card.html +38 -0
  39. package/components/_cards/charts-21-worldmap.card.html +33 -0
  40. package/components/_cards/charts-22-gantt.card.html +37 -0
  41. package/components/_cards/charts-23-bar3d.card.html +26 -0
  42. package/components/_cards/charts-24-pie3d.card.html +32 -0
  43. package/components/_cards/charts-25-surface3d.card.html +24 -0
  44. package/components/_cards/charts-26-scatter3d.card.html +24 -0
  45. package/components/_cards/charts-27-ribbon3d.card.html +23 -0
  46. package/components/_cards/charts-3-bar.card.html +71 -0
  47. package/components/_cards/charts-4-barlist.card.html +30 -0
  48. package/components/_cards/charts-5-donut.card.html +35 -0
  49. package/components/_cards/charts-6-scatter.card.html +26 -0
  50. package/components/_cards/charts-7-heatmap.card.html +28 -0
  51. package/components/_cards/charts-8-waterfall.card.html +25 -0
  52. package/components/_cards/charts-9-bullet.card.html +31 -0
  53. package/components/_cards/charts-99-fullpage.card.html +194 -0
  54. package/components/_cards/checkbox.card.html +34 -0
  55. package/components/_cards/codeblock.card.html +19 -0
  56. package/components/_cards/combobox.card.html +25 -0
  57. package/components/_cards/context-menu.card.html +21 -0
  58. package/components/_cards/datatable.card.html +48 -0
  59. package/components/_cards/date-picker.card.html +31 -0
  60. package/components/_cards/diffvalue.card.html +21 -0
  61. package/components/_cards/divider.card.html +24 -0
  62. package/components/_cards/drawer.card.html +30 -0
  63. package/components/_cards/dropdown-menu.card.html +38 -0
  64. package/components/_cards/dropzone.card.html +22 -0
  65. package/components/_cards/empty-state.card.html +29 -0
  66. package/components/_cards/filter-bar.card.html +34 -0
  67. package/components/_cards/icon-button.card.html +27 -0
  68. package/components/_cards/icons-1-core.card.html +49 -0
  69. package/components/_cards/icons-2-feather.card.html +39 -0
  70. package/components/_cards/icons-3-unicons.card.html +44 -0
  71. package/components/_cards/input.card.html +25 -0
  72. package/components/_cards/kbd.card.html +20 -0
  73. package/components/_cards/keyvalue.card.html +23 -0
  74. package/components/_cards/listrow.card.html +30 -0
  75. package/components/_cards/loading.card.html +33 -0
  76. package/components/_cards/log-viewer.card.html +23 -0
  77. package/components/_cards/modal.card.html +35 -0
  78. package/components/_cards/multi-select.card.html +26 -0
  79. package/components/_cards/number-stepper.card.html +24 -0
  80. package/components/_cards/pagination.card.html +25 -0
  81. package/components/_cards/people.card.html +46 -0
  82. package/components/_cards/pipeline-node.card.html +76 -0
  83. package/components/_cards/pipeline-palette.card.html +54 -0
  84. package/components/_cards/search.card.html +23 -0
  85. package/components/_cards/select.card.html +23 -0
  86. package/components/_cards/slider.card.html +25 -0
  87. package/components/_cards/smart-table.card.html +37 -0
  88. package/components/_cards/spreadsheet.card.html +31 -0
  89. package/components/_cards/stepper.card.html +25 -0
  90. package/components/_cards/tabs.card.html +25 -0
  91. package/components/_cards/tag.card.html +26 -0
  92. package/components/_cards/textarea.card.html +27 -0
  93. package/components/_cards/timeline.card.html +32 -0
  94. package/components/_cards/toast.card.html +33 -0
  95. package/components/_cards/toggles.card.html +68 -0
  96. package/components/_cards/tooltip.card.html +22 -0
  97. package/components/_cards/tree.card.html +150 -0
  98. package/components/_shared/frame-theme.js +16 -0
  99. package/components/_shared/src-brand.js +1 -0
  100. package/components/_shared/src-buttons.js +1 -0
  101. package/components/_shared/src-charts.js +1 -0
  102. package/components/_shared/src-data.js +1 -0
  103. package/components/_shared/src-display.js +1 -0
  104. package/components/_shared/src-feedback.js +1 -0
  105. package/components/_shared/src-forms.js +1 -0
  106. package/components/_shared/src-icons.js +1 -0
  107. package/components/_shared/src-navigation.js +1 -0
  108. package/components/_shared/src-pipeline.js +1 -0
  109. package/components/_shared/src-tabs.js +1 -0
  110. package/components/_shared/svg-download.js +19 -0
  111. package/components/_shared/view-source.js +185 -0
  112. package/components/_vue/index.mjs +114 -0
  113. package/components/brand/BrandVisual.d.ts +17 -0
  114. package/components/brand/BrandVisual.jsx +29 -0
  115. package/components/brand/BrandVisual.vue +34 -0
  116. package/components/brand/_dir.card.html +13 -0
  117. package/components/brand/brandMotifs.js +210 -0
  118. package/components/buttons/ActionChip.d.ts +10 -0
  119. package/components/buttons/ActionChip.jsx +20 -0
  120. package/components/buttons/ActionChip.vue +18 -0
  121. package/components/buttons/Button.d.ts +40 -0
  122. package/components/buttons/Button.jsx +101 -0
  123. package/components/buttons/Button.vue +87 -0
  124. package/components/buttons/IconButton.d.ts +26 -0
  125. package/components/buttons/IconButton.jsx +28 -0
  126. package/components/buttons/IconButton.vue +21 -0
  127. package/components/buttons/_dir.card.html +13 -0
  128. package/components/buttons/buttons.prompt.md +19 -0
  129. package/components/charts/Bar3D.d.ts +15 -0
  130. package/components/charts/Bar3D.jsx +93 -0
  131. package/components/charts/Bar3D.vue +79 -0
  132. package/components/charts/BarChart.d.ts +23 -0
  133. package/components/charts/BarChart.jsx +135 -0
  134. package/components/charts/BarChart.vue +139 -0
  135. package/components/charts/BarList.d.ts +13 -0
  136. package/components/charts/BarList.jsx +31 -0
  137. package/components/charts/BarList.vue +25 -0
  138. package/components/charts/BoxPlot.d.ts +18 -0
  139. package/components/charts/BoxPlot.jsx +62 -0
  140. package/components/charts/BoxPlot.vue +58 -0
  141. package/components/charts/BulletChart.d.ts +12 -0
  142. package/components/charts/BulletChart.jsx +41 -0
  143. package/components/charts/BulletChart.vue +33 -0
  144. package/components/charts/CandlestickChart.d.ts +15 -0
  145. package/components/charts/CandlestickChart.jsx +63 -0
  146. package/components/charts/CandlestickChart.vue +62 -0
  147. package/components/charts/ChartKit.d.ts +8 -0
  148. package/components/charts/ChartKit.jsx +76 -0
  149. package/components/charts/ChartKit.vue +47 -0
  150. package/components/charts/ChordChart.d.ts +13 -0
  151. package/components/charts/ChordChart.jsx +55 -0
  152. package/components/charts/ChordChart.vue +54 -0
  153. package/components/charts/DonutChart.d.ts +15 -0
  154. package/components/charts/DonutChart.jsx +73 -0
  155. package/components/charts/DonutChart.vue +61 -0
  156. package/components/charts/FunnelChart.d.ts +11 -0
  157. package/components/charts/FunnelChart.jsx +37 -0
  158. package/components/charts/FunnelChart.vue +29 -0
  159. package/components/charts/GanttChart.d.ts +20 -0
  160. package/components/charts/GanttChart.jsx +80 -0
  161. package/components/charts/GanttChart.vue +60 -0
  162. package/components/charts/GaugeChart.d.ts +13 -0
  163. package/components/charts/GaugeChart.jsx +33 -0
  164. package/components/charts/GaugeChart.vue +29 -0
  165. package/components/charts/HeatmapChart.d.ts +13 -0
  166. package/components/charts/HeatmapChart.jsx +62 -0
  167. package/components/charts/HeatmapChart.vue +38 -0
  168. package/components/charts/Histogram.d.ts +16 -0
  169. package/components/charts/Histogram.jsx +56 -0
  170. package/components/charts/Histogram.vue +53 -0
  171. package/components/charts/LineChart.d.ts +17 -0
  172. package/components/charts/LineChart.jsx +84 -0
  173. package/components/charts/LineChart.vue +86 -0
  174. package/components/charts/ParetoChart.d.ts +13 -0
  175. package/components/charts/ParetoChart.jsx +54 -0
  176. package/components/charts/ParetoChart.vue +55 -0
  177. package/components/charts/Pie3D.d.ts +17 -0
  178. package/components/charts/Pie3D.jsx +145 -0
  179. package/components/charts/Pie3D.vue +115 -0
  180. package/components/charts/RadarChart.d.ts +14 -0
  181. package/components/charts/RadarChart.jsx +79 -0
  182. package/components/charts/RadarChart.vue +73 -0
  183. package/components/charts/Ribbon3D.d.ts +13 -0
  184. package/components/charts/Ribbon3D.jsx +89 -0
  185. package/components/charts/Ribbon3D.vue +79 -0
  186. package/components/charts/SankeyChart.d.ts +15 -0
  187. package/components/charts/SankeyChart.jsx +59 -0
  188. package/components/charts/SankeyChart.vue +53 -0
  189. package/components/charts/Scatter3D.d.ts +12 -0
  190. package/components/charts/Scatter3D.jsx +69 -0
  191. package/components/charts/Scatter3D.vue +59 -0
  192. package/components/charts/ScatterChart.d.ts +12 -0
  193. package/components/charts/ScatterChart.jsx +53 -0
  194. package/components/charts/ScatterChart.vue +57 -0
  195. package/components/charts/Sparkline.d.ts +19 -0
  196. package/components/charts/Sparkline.jsx +63 -0
  197. package/components/charts/Sparkline.vue +54 -0
  198. package/components/charts/SunburstChart.d.ts +12 -0
  199. package/components/charts/SunburstChart.jsx +61 -0
  200. package/components/charts/SunburstChart.vue +60 -0
  201. package/components/charts/Surface3D.d.ts +13 -0
  202. package/components/charts/Surface3D.jsx +70 -0
  203. package/components/charts/Surface3D.vue +63 -0
  204. package/components/charts/TreemapChart.d.ts +11 -0
  205. package/components/charts/TreemapChart.jsx +35 -0
  206. package/components/charts/TreemapChart.vue +27 -0
  207. package/components/charts/WaterfallChart.d.ts +11 -0
  208. package/components/charts/WaterfallChart.jsx +59 -0
  209. package/components/charts/WaterfallChart.vue +46 -0
  210. package/components/charts/WorldMap.d.ts +21 -0
  211. package/components/charts/WorldMap.jsx +107 -0
  212. package/components/charts/WorldMap.vue +73 -0
  213. package/components/charts/_dir.card.html +7 -0
  214. package/components/charts/chart-3d.js +84 -0
  215. package/components/charts/chart-geometry.js +223 -0
  216. package/components/charts/charts.prompt.md +24 -0
  217. package/components/data/CodeBlock.d.ts +9 -0
  218. package/components/data/CodeBlock.jsx +19 -0
  219. package/components/data/CodeBlock.vue +22 -0
  220. package/components/data/DataTable.d.ts +28 -0
  221. package/components/data/DataTable.jsx +32 -0
  222. package/components/data/DataTable.vue +25 -0
  223. package/components/data/DiffValue.d.ts +11 -0
  224. package/components/data/DiffValue.jsx +15 -0
  225. package/components/data/DiffValue.vue +13 -0
  226. package/components/data/FilterBar.d.ts +16 -0
  227. package/components/data/FilterBar.jsx +22 -0
  228. package/components/data/FilterBar.vue +23 -0
  229. package/components/data/KeyValue.d.ts +16 -0
  230. package/components/data/KeyValue.jsx +25 -0
  231. package/components/data/KeyValue.vue +26 -0
  232. package/components/data/ListRow.d.ts +14 -0
  233. package/components/data/ListRow.jsx +25 -0
  234. package/components/data/ListRow.vue +25 -0
  235. package/components/data/Pagination.d.ts +12 -0
  236. package/components/data/Pagination.jsx +27 -0
  237. package/components/data/Pagination.vue +24 -0
  238. package/components/data/SmartTable.d.ts +30 -0
  239. package/components/data/SmartTable.jsx +73 -0
  240. package/components/data/SmartTable.vue +74 -0
  241. package/components/data/Spreadsheet.d.ts +33 -0
  242. package/components/data/Spreadsheet.jsx +110 -0
  243. package/components/data/Spreadsheet.vue +95 -0
  244. package/components/data/_dir.card.html +13 -0
  245. package/components/data/data.prompt.md +33 -0
  246. package/components/display/Avatar.d.ts +21 -0
  247. package/components/display/Avatar.jsx +31 -0
  248. package/components/display/Avatar.vue +34 -0
  249. package/components/display/Badge.d.ts +27 -0
  250. package/components/display/Badge.jsx +40 -0
  251. package/components/display/Badge.vue +47 -0
  252. package/components/display/Card.d.ts +27 -0
  253. package/components/display/Card.jsx +27 -0
  254. package/components/display/Card.vue +28 -0
  255. package/components/display/Divider.d.ts +8 -0
  256. package/components/display/Divider.jsx +14 -0
  257. package/components/display/Divider.vue +13 -0
  258. package/components/display/Kbd.d.ts +7 -0
  259. package/components/display/Kbd.jsx +12 -0
  260. package/components/display/Kbd.vue +9 -0
  261. package/components/display/ProgressBar.d.ts +42 -0
  262. package/components/display/ProgressBar.jsx +70 -0
  263. package/components/display/ProgressBar.vue +69 -0
  264. package/components/display/Tag.d.ts +9 -0
  265. package/components/display/Tag.jsx +15 -0
  266. package/components/display/Tag.vue +15 -0
  267. package/components/display/_dir.card.html +13 -0
  268. package/components/display/display.prompt.md +30 -0
  269. package/components/feedback/Accordion.d.ts +13 -0
  270. package/components/feedback/Accordion.jsx +21 -0
  271. package/components/feedback/Accordion.vue +22 -0
  272. package/components/feedback/ActivityItem.d.ts +25 -0
  273. package/components/feedback/ActivityItem.jsx +39 -0
  274. package/components/feedback/ActivityItem.vue +46 -0
  275. package/components/feedback/Alert.d.ts +36 -0
  276. package/components/feedback/Alert.jsx +48 -0
  277. package/components/feedback/Alert.vue +59 -0
  278. package/components/feedback/Banner.d.ts +15 -0
  279. package/components/feedback/Banner.jsx +25 -0
  280. package/components/feedback/Banner.vue +25 -0
  281. package/components/feedback/ContextMenu.d.ts +8 -0
  282. package/components/feedback/ContextMenu.jsx +18 -0
  283. package/components/feedback/ContextMenu.vue +19 -0
  284. package/components/feedback/Drawer.d.ts +18 -0
  285. package/components/feedback/Drawer.jsx +26 -0
  286. package/components/feedback/Drawer.vue +24 -0
  287. package/components/feedback/Menu.d.ts +10 -0
  288. package/components/feedback/Menu.jsx +24 -0
  289. package/components/feedback/Menu.vue +21 -0
  290. package/components/feedback/Modal.d.ts +38 -0
  291. package/components/feedback/Modal.jsx +69 -0
  292. package/components/feedback/Modal.vue +65 -0
  293. package/components/feedback/Stepper.d.ts +9 -0
  294. package/components/feedback/Stepper.jsx +24 -0
  295. package/components/feedback/Stepper.vue +18 -0
  296. package/components/feedback/Timeline.d.ts +15 -0
  297. package/components/feedback/Timeline.jsx +27 -0
  298. package/components/feedback/Timeline.vue +21 -0
  299. package/components/feedback/_dir.card.html +13 -0
  300. package/components/feedback/feedback.prompt.md +35 -0
  301. package/components/forms/Checkbox.d.ts +13 -0
  302. package/components/forms/Checkbox.jsx +17 -0
  303. package/components/forms/Checkbox.vue +18 -0
  304. package/components/forms/Combobox.d.ts +13 -0
  305. package/components/forms/Combobox.jsx +34 -0
  306. package/components/forms/Combobox.vue +35 -0
  307. package/components/forms/DatePicker.d.ts +12 -0
  308. package/components/forms/DatePicker.jsx +48 -0
  309. package/components/forms/DatePicker.vue +46 -0
  310. package/components/forms/Dropzone.d.ts +20 -0
  311. package/components/forms/Dropzone.jsx +36 -0
  312. package/components/forms/Dropzone.vue +28 -0
  313. package/components/forms/Field.d.ts +13 -0
  314. package/components/forms/Field.jsx +13 -0
  315. package/components/forms/Field.vue +12 -0
  316. package/components/forms/Input.d.ts +18 -0
  317. package/components/forms/Input.jsx +35 -0
  318. package/components/forms/Input.vue +38 -0
  319. package/components/forms/MultiSelect.d.ts +14 -0
  320. package/components/forms/MultiSelect.jsx +33 -0
  321. package/components/forms/MultiSelect.vue +36 -0
  322. package/components/forms/NumberStepper.d.ts +13 -0
  323. package/components/forms/NumberStepper.jsx +15 -0
  324. package/components/forms/NumberStepper.vue +17 -0
  325. package/components/forms/Radio.vue +16 -0
  326. package/components/forms/RadioGroup.vue +11 -0
  327. package/components/forms/SearchInput.d.ts +12 -0
  328. package/components/forms/SearchInput.jsx +17 -0
  329. package/components/forms/SearchInput.vue +14 -0
  330. package/components/forms/Select.d.ts +14 -0
  331. package/components/forms/Select.jsx +17 -0
  332. package/components/forms/Select.vue +16 -0
  333. package/components/forms/Slider.d.ts +15 -0
  334. package/components/forms/Slider.jsx +21 -0
  335. package/components/forms/Slider.vue +23 -0
  336. package/components/forms/Switch.d.ts +31 -0
  337. package/components/forms/Switch.jsx +40 -0
  338. package/components/forms/Switch.vue +16 -0
  339. package/components/forms/_dir.card.html +13 -0
  340. package/components/forms/forms.prompt.md +23 -0
  341. package/components/icons/Icon.d.ts +19 -0
  342. package/components/icons/Icon.jsx +93 -0
  343. package/components/icons/Icon.prompt.md +8 -0
  344. package/components/icons/Icon.vue +12 -0
  345. package/components/icons/Unicon.d.ts +12 -0
  346. package/components/icons/Unicon.jsx +16 -0
  347. package/components/icons/Unicon.vue +15 -0
  348. package/components/icons/_dir.card.html +13 -0
  349. package/components/icons/feather-paths.js +2 -0
  350. package/components/icons/icon-paths.js +73 -0
  351. package/components/index.d.ts +87 -0
  352. package/components/index.js +110 -0
  353. package/components/navigation/Breadcrumb.d.ts +24 -0
  354. package/components/navigation/Breadcrumb.jsx +120 -0
  355. package/components/navigation/Breadcrumb.vue +94 -0
  356. package/components/navigation/DocTree.d.ts +18 -0
  357. package/components/navigation/DocTree.jsx +37 -0
  358. package/components/navigation/DocTree.vue +25 -0
  359. package/components/navigation/Sidebar.d.ts +29 -0
  360. package/components/navigation/Sidebar.jsx +75 -0
  361. package/components/navigation/Sidebar.vue +54 -0
  362. package/components/navigation/TopBar.d.ts +27 -0
  363. package/components/navigation/TopBar.jsx +44 -0
  364. package/components/navigation/TopBar.vue +51 -0
  365. package/components/navigation/Tree.d.ts +83 -0
  366. package/components/navigation/Tree.jsx +347 -0
  367. package/components/navigation/Tree.vue +258 -0
  368. package/components/navigation/_dir.card.html +13 -0
  369. package/components/navigation/navigation.prompt.md +22 -0
  370. package/components/pipeline/ConfigPanel.d.ts +18 -0
  371. package/components/pipeline/ConfigPanel.jsx +30 -0
  372. package/components/pipeline/ConfigPanel.vue +32 -0
  373. package/components/pipeline/DataPreview.d.ts +14 -0
  374. package/components/pipeline/DataPreview.jsx +24 -0
  375. package/components/pipeline/DataPreview.vue +21 -0
  376. package/components/pipeline/NodeCard.d.ts +47 -0
  377. package/components/pipeline/NodeCard.jsx +97 -0
  378. package/components/pipeline/NodeCard.vue +75 -0
  379. package/components/pipeline/PaletteItem.vue +15 -0
  380. package/components/pipeline/PaletteListItem.vue +15 -0
  381. package/components/pipeline/PalettePanel.d.ts +20 -0
  382. package/components/pipeline/PalettePanel.jsx +74 -0
  383. package/components/pipeline/PalettePanel.vue +45 -0
  384. package/components/pipeline/PipelineCanvas.d.ts +25 -0
  385. package/components/pipeline/PipelineCanvas.jsx +94 -0
  386. package/components/pipeline/PipelineCanvas.vue +73 -0
  387. package/components/pipeline/ZoomControls.d.ts +9 -0
  388. package/components/pipeline/ZoomControls.jsx +15 -0
  389. package/components/pipeline/ZoomControls.vue +15 -0
  390. package/components/pipeline/_dir.card.html +13 -0
  391. package/components/pipeline/pipeline.prompt.md +22 -0
  392. package/components/tabs/SegmentedControl.d.ts +11 -0
  393. package/components/tabs/SegmentedControl.jsx +21 -0
  394. package/components/tabs/SegmentedControl.vue +15 -0
  395. package/components/tabs/Tabs.d.ts +13 -0
  396. package/components/tabs/Tabs.jsx +52 -0
  397. package/components/tabs/Tabs.vue +39 -0
  398. package/components/tabs/ViewToggle.d.ts +8 -0
  399. package/components/tabs/ViewToggle.jsx +12 -0
  400. package/components/tabs/ViewToggle.vue +12 -0
  401. package/components/tabs/_dir.card.html +13 -0
  402. package/components/tabs/tabs.prompt.md +14 -0
  403. package/package.json +76 -0
  404. package/readme.md +150 -0
  405. package/styles.css +10 -0
  406. package/tokens/alpha.css +27 -0
  407. package/tokens/charts.css +55 -0
  408. package/tokens/colors-extended.css +40 -0
  409. package/tokens/colors.css +39 -0
  410. package/tokens/dark.css +96 -0
  411. package/tokens/fonts.css +4 -0
  412. package/tokens/interaction.css +48 -0
  413. package/tokens/layout.css +30 -0
  414. package/tokens/motion.css +22 -0
  415. package/tokens/tokens.d.ts +680 -0
  416. package/tokens/tokens.js +1018 -0
  417. package/tokens/tokens.json +2928 -0
  418. package/tokens/typography.css +22 -0
package/components/_cards/charts-1-sparkline.card.html ADDED
@@ -0,0 +1,55 @@
1
+ <!-- @dsCard group="Charts" viewport="700x790" name="Sparkline" subtitle="Micro trends for stat tiles, table cells, list rows — line · area · bars · curve" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.tile .n{font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num,26px);line-height:1.2;color:var(--text-heading)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Sparkline, Tag } = window.KeybricksDesignSystem_71231a;
13
+ const up=[4.1,4.4,4.2,4.8,4.7,5.1,5.4,5.8], down=[96,94,95,91,90,87,85,82], noisy=[3,-2,5,4,-1,6,8,2];
14
+ const M=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug"];
15
+ function Sheet(){
16
+ return <div>
17
+ <div className="sec"><span className="lbl">In a stat tile — the sm tier</span>
18
+ <div className="row">
19
+ <div className="tile" style={{width:200}}><div className="k">Revenue run rate</div><div className="n">$5.8M</div><div style={{paddingTop:8}}><Sparkline values={up} labels={M} mode="area" tone="auto" width={168} height={30} valueFormat={(v)=>"$"+v.toFixed(1)+"M"}/></div></div>
20
+ <div className="tile" style={{width:200}}><div className="k">Open exceptions</div><div className="n">82</div><div style={{paddingTop:8}}><Sparkline values={down} labels={M} tone="auto" width={168} height={30}/></div></div>
21
+ <div className="tile" style={{width:200}}><div className="k">Daily variance</div><div className="n">+2.4%</div><div style={{paddingTop:8}}><Sparkline values={noisy} labels={M} mode="bars" width={168} height={30} valueFormat={(v)=>(v>=0?"+":"")+v+"%"}/></div></div>
22
+ </div>
23
+ </div>
24
+ <div className="sec"><span className="lbl">Inline — table cells and list rows</span>
25
+ <div style={{maxWidth:430}}>
26
+ {[["Sales Orders",up,"+41%","pos"],["Manual journals",down,"-15%","neg"],["FX exposure",noisy,"±","muted"]].map(([l,v,d,t])=>(
27
+ <div key={l} style={{display:"flex",alignItems:"center",gap:12,height:36,borderBottom:"1px solid var(--border-subtle)"}}>
28
+ <span style={{fontSize:"var(--text-sm)",color:"var(--text-body)",width:130}}>{l}</span>
29
+ <Sparkline values={v} labels={M} tone={t==="muted"?"muted":"auto"} width={130} height={22} strokeWidth={1.2}/>
30
+ <span style={{marginLeft:"auto",fontFamily:"var(--font-mono)",fontSize:"var(--text-xs)",color:t==="neg"?"var(--chart-neg)":t==="pos"?"var(--chart-pos)":"var(--text-muted)"}}>{d}</span>
31
+ </div>))}
32
+ </div>
33
+ </div>
34
+ <div className="sec"><span className="lbl">Modes and tones</span>
35
+ <div className="row" style={{alignItems:"center"}}>
36
+ <Sparkline values={up}/><Sparkline values={up} mode="area"/><Sparkline values={noisy} mode="bars"/>
37
+ <Sparkline values={down} tone="auto"/><Sparkline values={up} tone="muted" dot={false}/>
38
+ <Sparkline values={up} baseline={4.9}/>
39
+ </div>
40
+ <span className="lbl" style={{paddingTop:22}}>Curve — linear · smooth · step</span>
41
+ <div className="row" style={{alignItems:"center"}}>
42
+ {["linear","smooth","step"].map(cv=>(
43
+ <span key={cv} style={{display:"inline-flex",alignItems:"center",gap:9}}>
44
+ <Sparkline values={up} labels={M} curve={cv} mode="area" width={120} height={34}/>
45
+ <code style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>{cv}</code>
46
+ </span>
47
+ ))}
48
+ </div>
49
+ </div>
50
+ <div className="note"><strong>No axes, ever.</strong> A sparkline answers “which way is it going”, not “what is the value” — the number next to it does that. Every sparkline is still hoverable — a compact chip names the point and its value, because “which way” usually invites “when”. Direction color comes from <code>tone="auto"</code> (<code>--chart-pos</code> up, <code>--chart-neg</code> down); <code>baseline</code> draws one dashed reference. Default 96×28; never taller than the row it sits in.</div>
51
+ </div>;
52
+ }
53
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
54
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Sparkline.jsx","path":"../charts/Sparkline.jsx"}]); }, 0);
55
+ </script></body></html>
package/components/_cards/charts-10-gauge.card.html ADDED
@@ -0,0 +1,31 @@
1
+ <!-- @dsCard group="Charts" viewport="700x300" name="Gauge" subtitle="Semi-circular KPI — flat arc, threshold bands, no needle" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { GaugeChart } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="row sec">
16
+ <div><span className="lbl">Default — percent of max</span><GaugeChart size={170} value={78} label="Pipeline health"/></div>
17
+ <div><span className="lbl">Threshold bands recolor the fill</span>
18
+ <div style={{display:"flex",gap:22}}>
19
+ <GaugeChart size={170} value={42} max={60} valueFormat={(v)=>v+"ms"} label="P99 latency"
20
+ bands={[{upTo:30,color:"var(--chart-pos)"},{upTo:50,color:"var(--series-8)"},{upTo:60,color:"var(--chart-neg)"}]}/>
21
+ <GaugeChart size={170} value={57} max={60} valueFormat={(v)=>v+"ms"} label="P99 latency · degraded"
22
+ bands={[{upTo:30,color:"var(--chart-pos)"},{upTo:50,color:"var(--series-8)"},{upTo:60,color:"var(--chart-neg)"}]}/>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ <div className="note"><strong>A gauge is one number with a ceiling.</strong> Use it when the max is physically meaningful (utilization, SLA, latency budget); otherwise a stat tile with a sparkline says more. Flat arc only — no needle, no gloss, numeral in <code>--weight-light</code> like every KPI in the system.</div>
27
+ </div>;
28
+ }
29
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
30
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"GaugeChart.jsx","path":"../charts/GaugeChart.jsx"}]); }, 0);
31
+ </script></body></html>
package/components/_cards/charts-11-funnel.card.html ADDED
@@ -0,0 +1,28 @@
1
+ <!-- @dsCard group="Charts" viewport="700x360" name="Funnel" subtitle="Stage counts with step-to-step conversion — sub-50% steps flagged" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { FunnelChart } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="row sec">
16
+ <div><span className="lbl">md — pipeline stages</span>
17
+ <FunnelChart width={400} stages={[{label:"Extracted",value:48200},{label:"Validated",value:41900},{label:"Transformed",value:39400},{label:"Loaded",value:38800}]}/>
18
+ </div>
19
+ <div><span className="lbl">A leaky step reads red</span>
20
+ <FunnelChart width={240} bandHeight={28} stages={[{label:"Invited",value:1200},{label:"Signed up",value:460},{label:"Activated",value:390}]}/>
21
+ </div>
22
+ </div>
23
+ <div className="note"><strong>The % between bands is step conversion,</strong> not share-of-top — that's the number you act on, and anything under 50% flips to <code>--chart-neg</code>. Bands fade down a single hue (<code>--series-1</code>) because funnel stages are one sequence, not categories.</div>
24
+ </div>;
25
+ }
26
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
27
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"FunnelChart.jsx","path":"../charts/FunnelChart.jsx"}]); }, 0);
28
+ </script></body></html>
package/components/_cards/charts-12-treemap.card.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Charts" viewport="700x400" name="Treemap" subtitle="Squarified composition — readable at 15+ items, hover for share" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { TreemapChart } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="sec"><span className="lbl">md — cost base at a glance</span>
16
+ <TreemapChart width={650} height={250} items={[{label:"Payroll",value:4200},{label:"Cloud",value:2600},{label:"Facilities",value:1300},{label:"Software",value:900},{label:"Travel",value:700},{label:"Marketing",value:600},{label:"Legal",value:350},{label:"Other",value:250}]} valueFormat={(v)=>"$"+v+"K"}/>
17
+ </div>
18
+ <div className="note"><strong>Area does the comparing.</strong> The squarify layout keeps cells near-square so labels fit; a label renders only when its cell exceeds 74×34px — small slivers stay clean and their values live in the hover tooltip. This is the composition chart for 15+ items, where a donut's legend would outgrow the ring.</div>
19
+ </div>;
20
+ }
21
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
22
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"TreemapChart.jsx","path":"../charts/TreemapChart.jsx"}]); }, 0);
23
+ </script></body></html>
package/components/_cards/charts-14-radar.card.html ADDED
@@ -0,0 +1,31 @@
1
+ <!-- @dsCard group="Charts" viewport="700x560" name="Radar" subtitle="Spider chart — a few entities across the same 3–10 measures" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { RadarChart } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="row sec">
16
+ <div><span className="lbl">md — hover a spoke to read every series at that measure</span>
17
+ <RadarChart size={280} axes={[{label:"Speed"},{label:"Accuracy"},{label:"Coverage"},{label:"Cost"},{label:"Uptime"}]}
18
+ series={[{name:"Current",values:[80,92,70,60,99]},{name:"Target",values:[90,95,85,75,99.5]}]}/>
19
+ </div>
20
+ <div><span className="lbl">sm — one profile in a tile</span>
21
+ <div className="tile"><div className="k">Model fitness</div>
22
+ <RadarChart size={190} legend={false} levels={3} axes={[{label:"Fit"},{label:"Recall"},{label:"Speed"},{label:"Size"}]} series={[{name:"v8",values:[74,88,62,55]}]}/>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ <div className="note"><strong>Radar compares profiles, not magnitudes.</strong> Keep it to 3–10 axes and at most 3 series — beyond that the polygons occlude each other and a small-multiple bar chart reads better. Each axis scales independently (<code>max</code> per axis) so mixed units are legal, which also means the enclosed area is <em>not</em> a total: never label it as one.</div>
27
+ </div>;
28
+ }
29
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
30
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"RadarChart.jsx","path":"../charts/RadarChart.jsx"}]); }, 0);
31
+ </script></body></html>
package/components/_cards/charts-15-distribution.card.html ADDED
@@ -0,0 +1,32 @@
1
+ <!-- @dsCard group="Charts" viewport="700x760" name="Histogram & Box Plot" subtitle="Distribution of one measure · spread and outliers per group" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Histogram, BoxPlot } = window.KeybricksDesignSystem_71231a;
13
+ const LAT=[...Array(260)].map((_,i)=>Math.round(38+Math.random()*26+Math.random()*26+(i%40===0?55:0)));
14
+ function Sheet(){
15
+ return <div>
16
+ <div className="sec"><span className="lbl">Histogram — journal posting latency, mean guide on</span>
17
+ <Histogram width={650} height={230} showMean values={LAT} valueFormat={(v)=>Math.round(v)+"ms"} countFormat={(v)=>v+""}/>
18
+ </div>
19
+ <div className="sec"><span className="lbl">Box plot — the same measure split by entity, Tukey outliers ringed</span>
20
+ <BoxPlot width={650} height={250} valueFormat={(v)=>Math.round(v)+"ms"} groups={[
21
+ {label:"Germany",values:[42,48,51,55,58,61,64,69,120]},
22
+ {label:"France",values:[38,40,44,47,49,52,56,59]},
23
+ {label:"US",values:[48,52,55,57,60,63,68,82,140]},
24
+ {label:"Japan",values:[35,37,39,41,43,45,48,51]},
25
+ {label:"Singapore",values:[44,49,53,58,62,67,71,88]}]}/>
26
+ </div>
27
+ <div className="note"><strong>Histogram for one population, box plot for many.</strong> The histogram bins a single measure (<code>bins</code>, or hand it pre-computed <code>buckets</code>); the box plot summarizes each group to five numbers — pass raw <code>values</code> and it computes quartiles and the 1.5×IQR fences for you, or pass the stats if your warehouse already has them. Outliers are drawn as hollow rings, never dropped.</div>
28
+ </div>;
29
+ }
30
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
31
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Histogram.jsx","path":"../charts/Histogram.jsx"},{"name":"BoxPlot.jsx","path":"../charts/BoxPlot.jsx"}]); }, 0);
32
+ </script></body></html>
package/components/_cards/charts-16-pareto.card.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Charts" viewport="700x400" name="Pareto" subtitle="Sorted bars + cumulative % line — the vital few vs. the trivial many" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { ParetoChart } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="sec"><span className="lbl">md — reconciliation breaks by cause</span>
16
+ <ParetoChart width={650} height={260} items={[
17
+ {label:"FX rate",value:340},{label:"Manual JE",value:210},{label:"Mapping",value:120},
18
+ {label:"Rounding",value:70},{label:"Timing",value:45},{label:"Other",value:25}]}/>
19
+ </div>
20
+ <div className="note"><strong>The chart sorts and accumulates for you</strong> — pass unordered <code>items</code>. Bars up to the cumulative <code>threshold</code> (80% by default) stay <code>--series-1</code>; everything past it drops to the track color, so the “fix these first” set is visible without reading the line. The cumulative line owns the right axis in percent and is <code>--chart-total</code>, never a series color.</div>
21
+ </div>;
22
+ }
23
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ParetoChart.jsx","path":"../charts/ParetoChart.jsx"}]); }, 0);
25
+ </script></body></html>
package/components/_cards/charts-17-candlestick.card.html ADDED
@@ -0,0 +1,34 @@
1
+ <!-- @dsCard group="Charts" viewport="700x480" name="Candlestick" subtitle="OHLC K-line — volume band, moving average, hollow-body convention" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { CandlestickChart } = window.KeybricksDesignSystem_71231a;
13
+ const DATA=[["Mar 2",128,132,126,131,3.2],["Mar 3",131,134,130,133,2.8],["Mar 4",133,133,127,128,4.1],["Mar 5",128,130,124,125,5.0],["Mar 6",125,131,125,130,3.6],["Mar 9",130,136,129,135,4.4],["Mar 10",135,138,134,137,3.1],["Mar 11",137,137,131,132,3.9],["Mar 12",132,140,132,139,5.5],["Mar 13",139,142,138,141,2.7],["Mar 16",141,141,136,137,3.3],["Mar 17",137,144,137,143,4.8]].map(([t,o,h,l,c,v])=>({t,o,h,l,c,v}));
14
+ function Sheet(){
15
+ return <div>
16
+ <div className="sec"><span className="lbl">md — price, volume and a 5-period moving average</span>
17
+ <CandlestickChart width={650} height={290} ma={5} candles={DATA} valueFormat={(v)=>"$"+v.toFixed(0)}/>
18
+ </div>
19
+ <div className="row sec">
20
+ <div><span className="lbl">Hollow bodies for up candles</span>
21
+ <CandlestickChart width={310} height={170} hollowUp volume={false} candles={DATA.slice(0,8)} valueFormat={(v)=>"$"+v.toFixed(0)}/>
22
+ </div>
23
+ <div><span className="lbl">sm — a tile of price action</span>
24
+ <div className="tile"><div className="k">KBX · last 8 sessions</div>
25
+ <CandlestickChart width={230} height={110} axes={false} volume={false} candles={DATA.slice(-8)}/>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ <div className="note"><strong>Up is <code>--chart-pos</code>, down is <code>--chart-neg</code></strong> — the same signed pair as every other chart, so a red candle means the same thing as a red bar. The wick spans high–low, the body open–close; volume rides a 22% band under the price plot with the candle's own color at 35% opacity. Set <code>hollowUp</code> for the East-Asian convention where rising sessions are outlined rather than filled.</div>
30
+ </div>;
31
+ }
32
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
33
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"CandlestickChart.jsx","path":"../charts/CandlestickChart.jsx"}]); }, 0);
34
+ </script></body></html>
package/components/_cards/charts-18-sankey.card.html ADDED
@@ -0,0 +1,29 @@
1
+ <!-- @dsCard group="Charts" viewport="700x520" name="Sankey" subtitle="Flow diagram — columns derived from the graph, never positioned by hand" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { SankeyChart } = window.KeybricksDesignSystem_71231a;
13
+ const NODES=[{id:"b",label:"Annual budget"},{id:"mk",label:"Marketing"},{id:"op",label:"Operations"},{id:"rd",label:"R&D"},
14
+ {id:"ads",label:"Digital ads"},{id:"ev",label:"Events"},{id:"sal",label:"Salaries"},{id:"sw",label:"Software"},{id:"eq",label:"Equipment"}];
15
+ const LINKS=[{source:"b",target:"mk",value:40},{source:"b",target:"op",value:35},{source:"b",target:"rd",value:25},
16
+ {source:"mk",target:"ads",value:26},{source:"mk",target:"ev",value:8},{source:"mk",target:"sal",value:6},
17
+ {source:"op",target:"sal",value:20},{source:"op",target:"sw",value:15},
18
+ {source:"rd",target:"sw",value:9},{source:"rd",target:"eq",value:16}];
19
+ function Sheet(){
20
+ return <div>
21
+ <div className="sec"><span className="lbl">md — hover a ribbon or a node to isolate that flow</span>
22
+ <SankeyChart width={650} height={330} valueFormat={(v)=>"$"+v+"M"} nodes={NODES} links={LINKS}/>
23
+ </div>
24
+ <div className="note"><strong>You give the graph, not the layout.</strong> Column depth comes from the longest path to each node and sinks are pinned to the right edge, so adding a stage never means re-positioning the rest. Ribbon thickness is the flow value on a single scale across all columns — which is why a node's inflow and outflow read as equal when they balance. Every ribbon takes its source node's color, so a flow keeps one identity across the whole diagram.</div>
25
+ </div>;
26
+ }
27
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
28
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"SankeyChart.jsx","path":"../charts/SankeyChart.jsx"}]); }, 0);
29
+ </script></body></html>
package/components/_cards/charts-19-chord.card.html ADDED
@@ -0,0 +1,31 @@
1
+ <!-- @dsCard group="Charts" viewport="700x520" name="Chord" subtitle="Circular Sankey — many-to-many, cyclical flows on one ring" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { ChordChart } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="row sec">
16
+ <div><span className="lbl">md — inter-entity settlements, hover an arc to isolate a party</span>
17
+ <ChordChart size={380} valueFormat={(v)=>"$"+v+"M"} labels={["EMEA","APAC","AMER","LATAM","Treasury"]}
18
+ matrix={[[0,12,8,3,6],[9,0,14,2,4],[6,11,0,7,9],[2,3,5,0,2],[5,4,7,1,0]]}/>
19
+ </div>
20
+ <div><span className="lbl">sm — four parties in a tile</span>
21
+ <div className="tile"><div className="k">Intercompany netting</div>
22
+ <ChordChart size={220} thickness={10} labels={["DE","FR","UK","JP"]} matrix={[[0,8,4,2],[6,0,5,1],[3,7,0,4],[2,1,3,0]]}/>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ <div className="note"><strong>Reach for a chord when the flows loop back.</strong> A Sankey assumes direction — sources on the left, sinks on the right; when EMEA both pays and receives from APAC, a Sankey either duplicates nodes or crosses itself. The matrix is <code>matrix[i][j] = i → j</code>, the arc length is that party's total volume in and out, and the diagonal is ignored. Above ~10 parties the ribbons stop being separable — aggregate first.</div>
27
+ </div>;
28
+ }
29
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
30
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ChordChart.jsx","path":"../charts/ChordChart.jsx"}]); }, 0);
31
+ </script></body></html>
package/components/_cards/charts-2-line.card.html ADDED
@@ -0,0 +1,46 @@
1
+ <!-- @dsCard group="Charts" viewport="700x1300" name="Line & Area" subtitle="Trends over time — straight, smooth or stepped · stacked area · hover + legend mute" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.tile .n{font-family:var(--font-sans);font-weight:var(--weight-light);font-size:var(--text-num,26px);line-height:1.2;color:var(--text-heading)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { LineChart } = window.KeybricksDesignSystem_71231a;
13
+ const M=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
14
+ function Sheet(){
15
+ return <div>
16
+ <div className="sec"><span className="lbl">md — interactive: hover for the guideline, click a legend item to mute</span>
17
+ <LineChart width={650} height={250} xLabels={M} target={1250} targetLabel="Plan ceiling"
18
+ series={[{name:"Actual",values:[820,932,901,934,1290,1330,1320,1450,1420,1510,1560,1610]},{name:"Prior year",values:[700,810,860,880,1010,1100,1150,1260,1300,1340,1390,1420]}]}/>
19
+ </div>
20
+ <div className="sec"><span className="lbl">Stacked area — composition over time</span>
21
+ <LineChart width={650} height={230} stacked xLabels={M.slice(0,8)}
22
+ series={[{name:"EMEA",values:[320,332,301,334,390,330,320,360]},{name:"APAC",values:[220,182,191,234,290,330,310,340]},{name:"AMER",values:[150,232,201,154,190,330,410,420]}]}/>
23
+ </div>
24
+ <div className="sec"><span className="lbl">curve — linear · smooth (monotone cubic) · step</span>
25
+ <div className="row">
26
+ {[["linear","Straight"],["smooth","Smooth"],["step","Step"]].map(([cv,label])=>(
27
+ <div key={cv}>
28
+ <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)",paddingBottom:6}}>{label} · <code>curve="{cv}"</code></div>
29
+ <LineChart width={200} height={130} area curve={cv} legend={false} xLabels={M.slice(0,8)}
30
+ series={[{name:"Requests",values:[820,932,901,934,1290,1330,1320,1450]}]}/>
31
+ </div>
32
+ ))}
33
+ </div>
34
+ </div>
35
+ <div className="sec"><span className="lbl">sm — a tile trend: axes off, legend off, still hoverable</span>
36
+ <div className="row">
37
+ <div className="tile"><div className="k">Close progress</div><LineChart width={210} height={64} axes={false} legend={false} area xLabels={M.slice(0,8)} series={[{name:"Tasks closed",values:[10,14,13,18,22,26,31,38]}]}/></div>
38
+ <div className="tile"><div className="k">Data quality</div><LineChart width={210} height={64} axes={false} legend={false} xLabels={M.slice(0,8)} series={[{name:"Pass rate",values:[92,94,91,95,96,94,97,98],color:"var(--chart-pos)"}]}/></div>
39
+ </div>
40
+ </div>
41
+ <div className="note"><strong>Interpolation must not invent values.</strong> Straight is the default; <code>curve="smooth"</code> is monotone cubic, which bends the line without ever overshooting a real data point (a plain Catmull-Rom spline would — that is why it is not an option). <code>curve="step"</code> is for readings that hold until the next one (rates, headcount, config changes), where a diagonal would imply change that never happened. Series colors walk <code>--series-1…10</code> in order; the dashed <code>target</code> guide is <code>--chart-guide</code>, never a series color. Area fills are a vertical gradient from the series color (34% → 2%), so overlapping bands stay readable and the line keeps the edge. Losing the axes never means losing the tooltip: tile-tier charts still answer a hover.</div>
42
+ </div>;
43
+ }
44
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
45
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"LineChart.jsx","path":"../charts/LineChart.jsx"}]); }, 0);
46
+ </script></body></html>
package/components/_cards/charts-20-sunburst.card.html ADDED
@@ -0,0 +1,38 @@
1
+ <!-- @dsCard group="Charts" viewport="700x480" name="Sunburst" subtitle="Hierarchy as concentric rings — click a ring to zoom, center to go back" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { SunburstChart } = window.KeybricksDesignSystem_71231a;
13
+ const TREE={label:"Total cost",children:[
14
+ {label:"People",children:[{label:"Engineering",value:4200},{label:"Sales",value:2600},{label:"G&A",value:1200}]},
15
+ {label:"Cloud",children:[{label:"Compute",value:1800},{label:"Storage",value:900},{label:"Egress",value:310}]},
16
+ {label:"Facilities",children:[{label:"Offices",value:820},{label:"Utilities",value:240}]},
17
+ {label:"Other",value:430}]};
18
+ function Sheet(){
19
+ return <div>
20
+ <div className="row sec">
21
+ <div><span className="lbl">md — click a branch to zoom in, the center to step back out</span>
22
+ <SunburstChart size={320} data={TREE} valueFormat={(v)=>"$"+(v/1000).toFixed(1)+"M"}/>
23
+ </div>
24
+ <div><span className="lbl">sm — one level in a tile</span>
25
+ <div className="tile"><div className="k">Storage by dataset</div>
26
+ <SunburstChart size={190} valueFormat={(v)=>v+"GB"} data={{label:"Datasets",children:[
27
+ {label:"Ledger",children:[{label:"2026",value:420},{label:"2025",value:260}]},
28
+ {label:"Sales",children:[{label:"Orders",value:310},{label:"Returns",value:90}]},
29
+ {label:"Logs",value:150}]}}/>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ <div className="note"><strong>Sunburst over treemap when depth is the point.</strong> Rings are levels: leaf values roll up automatically, so a parent always equals its children. Color is inherited from the first ring, which keeps a branch recognizable as it fans out; opacity steps down per level so the outer rings recede. Beyond three levels the outer arcs get too thin to hit — zoom is the escape hatch, and the center always shows the current branch's total.</div>
34
+ </div>;
35
+ }
36
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
37
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"SunburstChart.jsx","path":"../charts/SunburstChart.jsx"}]); }, 0);
38
+ </script></body></html>
package/components/_cards/charts-21-worldmap.card.html ADDED
@@ -0,0 +1,33 @@
1
+ <!-- @dsCard group="Charts" viewport="700x620" name="World Map" subtitle="Choropleth on real Natural Earth geometry — hover, select, diverging scale" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/d3@7.9.0/dist/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/topojson-client@3.1.0/dist/topojson-client.min.js" integrity="sha384-Ukv1p/xTma6P4/2bY5KzWBw+ydSpXmhCMtyciIQVDJ1RmOxtCYNMF1uXT9T63H67" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
7
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
8
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
9
+ <script src="../../_ds_bundle.js"></script>
10
+ <script src="../_shared/view-source.js"></script>
11
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
12
+ <body><div id="root"></div>
13
+ <script type="text/babel">
14
+ const { WorldMap } = window.KeybricksDesignSystem_71231a;
15
+ const REV={"United States":6400,Canada:2100,Brazil:1400,Mexico:800,"United Kingdom":4200,Germany:5200,France:3100,Spain:1100,Italy:1500,
16
+ Netherlands:1700,Sweden:600,Poland:700,China:5900,Japan:2600,India:2200,"South Korea":1300,Singapore:900,Australia:950,"South Africa":420,"United Arab Emirates":510};
17
+ const VAR={"United States":8.4,Canada:-3.1,Brazil:12.0,"United Kingdom":-6.2,Germany:4.1,France:-1.8,Italy:2.4,China:9.6,Japan:-4.4,India:14.2,Australia:-2.1,"South Africa":5.5};
18
+ function Sheet(){
19
+ const [picked,setPicked]=React.useState(null);
20
+ return <div>
21
+ <div className="sec"><span className="lbl">Sequential — revenue by country, click one to select</span>
22
+ <WorldMap width={650} height={330} unit="$K" values={REV} valueFormat={(v)=>"$"+v+"K"} onSelect={(c,v)=>setPicked(c+(v!=null?" · $"+v+"K":" · no data"))}/>
23
+ <div style={{paddingTop:8,fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>{picked||"— click a country —"}</div>
24
+ </div>
25
+ <div className="sec"><span className="lbl">Diverging — growth vs. plan, red under / green over</span>
26
+ <WorldMap width={650} height={230} scale="diverging" unit="%" values={VAR} valueFormat={(v)=>(v>=0?"+":"")+v.toFixed(1)+"%"}/>
27
+ </div>
28
+ <div className="note"><strong>Real geometry, never a drawing.</strong> The map projects Natural Earth 110m country outlines (world-atlas, public domain) with d3-geo — the host page loads the pinned <code>d3</code> and <code>topojson-client</code> tags and the component fetches the pinned topology itself. Keys are country names with everyday aliases accepted (<code>"United States"</code>, <code>"UK"</code>); unmatched countries stay <code>--chart-track</code> so “no data” never reads as zero. Projections: <code>naturalEarth</code> for the globe, <code>mercator</code> or <code>equalEarth</code> when the job calls for it.</div>
29
+ </div>;
30
+ }
31
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
32
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"WorldMap.jsx","path":"../charts/WorldMap.jsx"}]); }, 0);
33
+ </script></body></html>
package/components/_cards/charts-22-gantt.card.html ADDED
@@ -0,0 +1,37 @@
1
+ <!-- @dsCard group="Charts" viewport="700x460" name="Gantt" subtitle="Timeline of tasks — weekend tinting, progress fill, today marker, milestones" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.tile{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;background:var(--bg-surface)}.tile .k{font-size:var(--text-xs);color:var(--text-secondary)}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { GanttChart } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="sec"><span className="lbl">md — a monthly close calendar</span>
16
+ <GanttChart width={650} today="2026-03-11" tasks={[
17
+ {label:"Extract source data",start:"2026-03-02",end:"2026-03-05",progress:1,lane:0},
18
+ {label:"Validate & reconcile",start:"2026-03-05",end:"2026-03-10",progress:0.8,lane:1},
19
+ {label:"FX revaluation",start:"2026-03-09",end:"2026-03-12",progress:0.35,lane:2},
20
+ {label:"Consolidate",start:"2026-03-12",end:"2026-03-17",lane:3},
21
+ {label:"Controller sign-off",start:"2026-03-18",milestone:true,lane:5},
22
+ {label:"Board pack",start:"2026-03-18",end:"2026-03-20",lane:4}]}/>
23
+ </div>
24
+ <div className="sec"><span className="lbl">sm — three waves in a tile</span>
25
+ <div className="tile" style={{width:390}}><div className="k">Migration waves</div>
26
+ <GanttChart width={356} rowHeight={22} today="2026-03-11" tasks={[
27
+ {label:"Wave 1 · EMEA",start:"2026-03-02",end:"2026-03-09",progress:1,lane:0},
28
+ {label:"Wave 2 · APAC",start:"2026-03-09",end:"2026-03-16",progress:0.4,lane:1},
29
+ {label:"Wave 3 · AMER",start:"2026-03-16",end:"2026-03-23",lane:2}]}/>
30
+ </div>
31
+ </div>
32
+ <div className="note"><strong>Dates in, geometry out.</strong> Tasks carry ISO dates; the axis thins itself to one tick per ~52px so labels never collide, weekends tint to <code>--bg-inset</code>, and <code>today</code> draws the only <code>--action-primary</code> mark on the chart — the live line is the one thing that should catch the eye. <code>progress</code> fills the bar against its own translucent track; <code>milestone</code> swaps the bar for a diamond, because a zero-length bar is invisible.</div>
33
+ </div>;
34
+ }
35
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
36
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"GanttChart.jsx","path":"../charts/GanttChart.jsx"}]); }, 0);
37
+ </script></body></html>
package/components/_cards/charts-23-bar3d.card.html ADDED
@@ -0,0 +1,26 @@
1
+ <!-- @dsCard group="Charts" viewport="700x420" name="3D Bars" subtitle="Cuboid bars, grouped depth rows or stacked — drag to orbit, hover to read" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}.row{display:flex;flex-wrap:wrap;gap:24px 36px;align-items:flex-start}.sec{padding-bottom:26px}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Bar3D } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ return <div>
15
+ <div className="row sec">
16
+ <div><span className="lbl">Grouped — series as depth rows</span>
17
+ <Bar3D width={330} height={250} categories={["Q1","Q2","Q3","Q4","Q5"]} series={[{name:"North",values:[44,34,48,56,32]},{name:"South",values:[18,22,45,24,28]},{name:"West",values:[54,52,30,50,47]}]}/></div>
18
+ <div><span className="lbl">Stacked — segments pile in one row</span>
19
+ <Bar3D width={300} height={250} mode="stacked" categories={["10–20","20–30","30–50"]} series={[{name:"GP",values:[80,95,60]},{name:"HI",values:[25,30,45]}]}/></div>
20
+ </div>
21
+ <div className="note"><strong>Drag to orbit, hover to read.</strong> Pitch clamps to 8–80° so the plot can't flip; hovering a bar dims the rest and pins its category · series · value. Faces shade from one upper-left light via <code>color-mix</code> on the series color. 3D is presentation-tier — for analysis, the 2D <code>BarChart</code> compares honestly.</div>
22
+ </div>;
23
+ }
24
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
25
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Bar3D.jsx","path":"../charts/Bar3D.jsx"}]); }, 0);
26
+ </script></body></html>