@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/assets/keybricks-logo.png ADDED
Binary file
package/components/_cards/accordion.card.html ADDED
@@ -0,0 +1,32 @@
1
+ <!-- @dsCard group="Components" viewport="700x260" name="Accordion" subtitle="Generic collapsible section — settings/FAQ style" -->
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:16px;font-family:var(--font-sans);box-sizing:border-box}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Accordion, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [open,setOpen]=React.useState("Retry policy");
15
+ const toggle=(k)=>setOpen(open===k?null:k);
16
+ return <Card pad={false} style={{maxWidth:520}}>
17
+ <div style={{padding:"0 17px"}}>
18
+ <Accordion title="Retry policy" subtitle="What happens when a task fails" open={open==="Retry policy"} onToggle={()=>toggle("Retry policy")}>
19
+ <span style={{fontSize:13,color:"var(--text-body)"}}>Failed tasks retry up to 3 times with exponential backoff before being marked Failed.</span>
20
+ </Accordion>
21
+ <Accordion title="Data retention" subtitle="How long run logs are kept" open={open==="Data retention"} onToggle={()=>toggle("Data retention")}>
22
+ <span style={{fontSize:13,color:"var(--text-body)"}}>Execution logs are retained for 90 days, then archived.</span>
23
+ </Accordion>
24
+ <Accordion title="Debug Mode" subtitle="Verbose logging for this pipeline" open={open==="Debug Mode"} onToggle={()=>toggle("Debug Mode")} style={{borderBottom:"none"}}>
25
+ <span style={{fontSize:13,color:"var(--text-body)"}}>Adds row-level trace output to Data Preview during Run Test.</span>
26
+ </Accordion>
27
+ </div>
28
+ </Card>;
29
+ }
30
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
31
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Accordion.jsx","path":"../feedback/Accordion.jsx"},{"name":"Card.jsx","path":"../display/Card.jsx"}]); }, 0);
32
+ </script></body></html>
package/components/_cards/action-chip.card.html ADDED
@@ -0,0 +1,22 @@
1
+ <!-- @dsCard group="Components" viewport="700x150" name="Action Chip" subtitle="Tinted bulk-action chip — success/warning/neutral/info/danger" -->
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:16px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:8px;flex-wrap:wrap}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { ActionChip } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div className="row">
14
+ <ActionChip tone="success">Mark as New</ActionChip>
15
+ <ActionChip tone="warning">Mark as Overwrite</ActionChip>
16
+ <ActionChip tone="neutral">Skip Selected</ActionChip>
17
+ <ActionChip tone="info">Preview Full Export</ActionChip>
18
+ <ActionChip tone="danger">Rollback</ActionChip>
19
+ </div>;}
20
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
21
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ActionChip.jsx","path":"../buttons/ActionChip.jsx"}]); }, 0);
22
+ </script></body></html>
package/components/_cards/activity.card.html ADDED
@@ -0,0 +1,34 @@
1
+ <!-- @dsCard group="Components" viewport="700x300" name="Activity" subtitle="ActivityItem rows · DotActivity feed" -->
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:16px;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:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { ActivityItem, DotActivity, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"grid",gridTemplateColumns:"1.3fr 1fr",gap:20,alignItems:"start"}}>
14
+ <div><span className="lbl">ActivityItem — icon, title, meta, action</span>
15
+ <Card pad={false}>
16
+ <ActivityItem title="Model Integration updated" meta="财务分析 • 2 hours ago" action="Open"/>
17
+ <div style={{height:1,background:"var(--border-subtle)"}}></div>
18
+ <ActivityItem icon="chart-line" title="Report generated" meta="Q1 Summary • 5 hours ago" action="Open"/>
19
+ <div style={{height:1,background:"var(--border-subtle)"}}></div>
20
+ <ActivityItem icon="upload" title="journal-august.csv imported" meta="12,401 rows • yesterday"/>
21
+ </Card>
22
+ </div>
23
+ <div><span className="lbl">DotActivity — status feed</span>
24
+ <div style={{display:"flex",flexDirection:"column",gap:10}}>
25
+ <DotActivity tone="success" text="Data consolidation completed" time="2 min ago"/>
26
+ <DotActivity tone="warning" text="Validation warning in Budget 2026" time="5 min ago"/>
27
+ <DotActivity tone="danger" text="Report generation failed" time="15 min ago"/>
28
+ <DotActivity tone="neutral" text="Scheduled run queued" time="1 hour ago"/>
29
+ </div>
30
+ </div>
31
+ </div>;}
32
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
33
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ActivityItem.jsx","path":"../feedback/ActivityItem.jsx"},{"name":"Card.jsx","path":"../display/Card.jsx"}]); }, 0);
34
+ </script></body></html>
package/components/_cards/alert.card.html ADDED
@@ -0,0 +1,32 @@
1
+ <!-- @dsCard group="Components" viewport="700x260" name="Alert" subtitle="In-card message — 4 tones, with and without body" -->
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:16px;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:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Alert } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,alignItems:"start"}}>
14
+ <div><span className="lbl">With body copy</span>
15
+ <div style={{display:"flex",flexDirection:"column",gap:8}}>
16
+ <Alert tone="warning" title="4 configurations differ">Review the comparison before continuing.</Alert>
17
+ <Alert tone="danger" title="Node has an unresolved input">Connect port B on “Sales × Product Join”.</Alert>
18
+ <Alert tone="info" title="Dry run only">No records will be written to the target system.</Alert>
19
+ </div>
20
+ </div>
21
+ <div><span className="lbl">Title only</span>
22
+ <div style={{display:"flex",flexDirection:"column",gap:8}}>
23
+ <Alert tone="success" title="Validation passed"/>
24
+ <Alert tone="warning" title="2 rows skipped"/>
25
+ <Alert tone="danger" title="Import failed"/>
26
+ <Alert tone="info" title="Sync scheduled for 02:00 UTC"/>
27
+ </div>
28
+ </div>
29
+ </div>;}
30
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
31
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Alert.jsx","path":"../feedback/Alert.jsx"}]); }, 0);
32
+ </script></body></html>
package/components/_cards/app-chrome.card.html ADDED
@@ -0,0 +1,36 @@
1
+ <!-- @dsCard group="Components" viewport="700x420" name="App Chrome" subtitle="Sidebar · TopBar · PageToolbar · DocTree" -->
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-app);font-family:var(--font-sans);overflow:hidden;box-sizing:border-box;padding:18px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Sidebar, KEYBRICKS_NAV, TopBar, PageToolbar, DocTree, Button } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [active,setActive]=React.useState("Home");
15
+ const [col,setCol]=React.useState(false);
16
+ return <div style={{display:"flex",height:420,overflow:"hidden"}}>
17
+ <Sidebar items={KEYBRICKS_NAV} active={active} onSelect={setActive} collapsed={col} onToggleCollapse={()=>setCol(!col)} logo="../../assets/keybricks-logo.png"/>
18
+ <DocTree active="财务分析" items={[
19
+ {label:"Q1 2026",kind:"folder"},{label:"Q4 2025",kind:"folder"},
20
+ {label:"财务分析",hue:"orange"},{label:"Revenue Analysis",hue:"green"},
21
+ {label:"Budget 2026",kind:"folder"},{label:"Monthly Journal",hue:"purple",icon:"book-open"},{label:"Variance Report",hue:"blue"},
22
+ ]}/>
23
+ <div style={{flex:1,display:"flex",flexDirection:"column",minWidth:0}}>
24
+ <TopBar/>
25
+ <PageToolbar title="Oracle Adapter" onBack={()=>{}} actions={<React.Fragment>
26
+ <Button variant="ghost" icon="settings-2">Custom Parameters</Button>
27
+ <Button variant="ghost" icon="play">Run Test</Button>
28
+ <Button icon="send">Submit</Button>
29
+ </React.Fragment>}/>
30
+ <div style={{flex:1}}></div>
31
+ </div>
32
+ </div>;
33
+ }
34
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
35
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Sidebar.jsx","path":"../navigation/Sidebar.jsx"},{"name":"TopBar.jsx","path":"../navigation/TopBar.jsx"},{"name":"DocTree.jsx","path":"../navigation/DocTree.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
36
+ </script></body></html>
package/components/_cards/banner.card.html ADDED
@@ -0,0 +1,21 @@
1
+ <!-- @dsCard group="Components" viewport="700x300" name="Banner" subtitle="Page-level notification — 4 tones · action link · dismissible" -->
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:16px;font-family:var(--font-sans);box-sizing:border-box}.col{display:flex;flex-direction:column;gap:10px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Banner } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div className="col">
14
+ <Banner tone="info" title="Scheduled maintenance." action="View schedule" dismissible>The reconciliation service will be unavailable Sunday 02:00–04:00 UTC.</Banner>
15
+ <Banner tone="success" title="Migration complete." action="View report">1,046 documents imported with no conflicts.</Banner>
16
+ <Banner tone="warning" title="License expiring." action="Renew now" dismissible>Your Data Integration license expires in 14 days.</Banner>
17
+ <Banner tone="danger" title="Connection lost." action="Retry">Cannot reach the ERP source system — last sync 09:41.</Banner>
18
+ </div>;}
19
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
20
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Banner.jsx","path":"../feedback/Banner.jsx"}]); }, 0);
21
+ </script></body></html>
package/components/_cards/brand-visual.card.html ADDED
@@ -0,0 +1,43 @@
1
+ <!-- @dsCard group="Brand" viewport="700x560" name="Brand Visuals" subtitle="Seven generative motifs — one 1200×400 canvas each, cropped to fill any box" -->
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:20px;font-family:var(--font-sans)}
10
+ .lab{font-size:var(--text-2xs);letter-spacing:.7px;text-transform:uppercase;color:var(--text-muted);font-weight:var(--weight-semibold);margin:0 0 6px}
11
+ .grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
12
+ .name{font-size:var(--text-xs);color:var(--text-secondary);margin:5px 0 0}
13
+ .name b{color:var(--text-heading);font-weight:var(--weight-medium)}
14
+ .hero-t{font-size:26px;line-height:30px;font-weight:var(--weight-semibold);color:#fff;letter-spacing:-.4px;margin:0}
15
+ .hero-e{font-size:var(--text-2xs);letter-spacing:.8px;text-transform:uppercase;color:#93c5fd;font-weight:var(--weight-semibold);margin:0 0 6px}
16
+ a{color:var(--link)}a:hover{color:var(--link-hover)}</style></head>
17
+ <body><div id="root"></div>
18
+ <script type="text/babel">
19
+ const { BrandVisual } = window.KeybricksDesignSystem_71231a;
20
+ const M = [["orbit","Orbit","同心弧 · 主母题"],["entropy","Entropy","晶核与尘"],["focal","Focal","景深点阵"],["manifold","Manifold","参数曲面"],["tesseract","Tesseract","嵌套立方"],["meridian","Meridian","经线扭曲"],["ledger","Ledger","刻度与游标"]];
21
+ function Demo(){
22
+ return (<div>
23
+ <p className="lab">Hero — full width, overlay content</p>
24
+ <BrandVisual motif="orbit" height={150}>
25
+ <div style={{padding:"26px 28px"}}>
26
+ <p className="hero-e">Design System</p>
27
+ <p className="hero-t">Keybricks</p>
28
+ </div>
29
+ </BrandVisual>
30
+ <p className="lab" style={{marginTop:22}}>Motifs — uniform 1200×400 canvas, cropped to fill</p>
31
+ <div className="grid">
32
+ {M.map(([m,en,zh])=>(
33
+ <div key={m}>
34
+ <BrandVisual motif={m} height={104}/>
35
+ <p className="name"><b>{en}</b> · {zh}</p>
36
+ </div>
37
+ ))}
38
+ </div>
39
+ </div>);
40
+ }
41
+ ReactDOM.createRoot(document.getElementById("root")).render(<Demo/>);
42
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"BrandVisual.jsx","path":"../brand/BrandVisual.jsx"},{"name":"brandMotifs.js","path":"../brand/brandMotifs.js"}]); }, 0);
43
+ </script></body></html>
package/components/_cards/breadcrumb.card.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Components" viewport="700x460" name="Breadcrumb" subtitle="Path trail — hover darkens · long trails collapse to an ellipsis dropdown" -->
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:16px;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:8px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Breadcrumb } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"flex",flexDirection:"column",gap:16}}>
14
+ <div><span className="lbl">Two levels</span><Breadcrumb items={["Documents","Budget 2026"]}/></div>
15
+ <div><span className="lbl">Three levels</span><Breadcrumb items={["Management","System Migration","Import"]}/></div>
16
+ <div><span className="lbl">Four levels — clickable trail (hover any crumb but the last)</span><Breadcrumb items={["Documents","Budget 2026","Monthly Journal","August"]} onSelect={()=>{}}/></div>
17
+ <div><span className="lbl">Hover state, forced on the first crumb</span><Breadcrumb items={["Documents","Budget 2026","August"]} hoveredIndex={0} onSelect={()=>{}}/><span style={{fontSize:11,color:"var(--text-secondary)",paddingTop:6,display:"block",lineHeight:1.5}}>Clickable crumbs move from <code style={{fontFamily:"var(--font-mono)",fontSize:10}}>--text-secondary</code> to <code style={{fontFamily:"var(--font-mono)",fontSize:10}}>--text-heading</code>; the last crumb never reacts.</span></div>
18
+ <div><span className="lbl">Seven levels — collapsed, click the … for the hidden ones</span><Breadcrumb items={["Documents","Finance","Budget 2026","Q3","Monthly Journal","August","Adjustments"]} onSelect={()=>{}}/></div>
19
+ <div><span className="lbl">Same trail, collapse disabled (maxItems=0)</span><Breadcrumb items={["Documents","Finance","Budget 2026","Q3","Monthly Journal","August","Adjustments"]} maxItems={0} onSelect={()=>{}}/><span style={{fontSize:11,color:"var(--text-secondary)",paddingTop:6,display:"block",lineHeight:1.5}}>Past <code style={{fontFamily:"var(--font-mono)",fontSize:10}}>maxItems</code> (default 4) the trail keeps the first crumb and the last two, and the levels between them move into a dropdown on the ellipsis — indented there to show their depth.</span></div>
20
+ </div>;}
21
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
22
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Breadcrumb.jsx","path":"../navigation/Breadcrumb.jsx"}]); }, 0);
23
+ </script></body></html>
package/components/_cards/button-1-base.card.html ADDED
@@ -0,0 +1,39 @@
1
+ <!-- @dsCard group="Components" viewport="1000x700" name="Button" subtitle="Solid · soft/outline · ghost · text-only · disabled · loading" -->
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:16px;font-family:var(--font-sans);box-sizing:border-box}.section{margin-bottom:22px}.sh{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);padding-bottom:10px;border-bottom:1px solid var(--border-subtle);margin-bottom:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.row:last-child{margin-bottom:0}.lbl{width:76px;flex-shrink:0;font-size:11px;color:var(--text-secondary)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Button } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div>
14
+ <div className="section">
15
+ <div className="sh">Solid</div>
16
+ <div className="row"><span className="lbl">primary</span><Button icon="send">Submit</Button></div>
17
+ <div className="row"><span className="lbl">dark</span><Button variant="dark" icon="sparkles">AI Assistant</Button></div>
18
+ <div className="row"><span className="lbl">danger</span><Button variant="danger" icon="trash-2">Delete Node</Button></div>
19
+ </div>
20
+ <div className="section">
21
+ <div className="sh">Soft &amp; Outline</div>
22
+ <div className="row"><span className="lbl">outline</span><Button variant="outline" icon="settings-2">Custom Parameters</Button></div>
23
+ <div className="row"><span className="lbl">primary-soft</span><Button variant="primary-soft" icon="eye">Data Preview</Button></div>
24
+ <div className="row"><span className="lbl">danger-soft</span><Button variant="danger-soft" icon="x">Remove</Button></div>
25
+ </div>
26
+ <div className="section">
27
+ <div className="sh">Ghost &amp; Text-only</div>
28
+ <div className="row"><span className="lbl">ghost</span><Button variant="ghost" icon="play">Run Test</Button></div>
29
+ <div className="row"><span className="lbl">text</span><Button variant="text">Cancel</Button><Button variant="text">View all</Button><Button variant="text" icon="chevron-right" iconPosition="right">Learn more</Button></div>
30
+ </div>
31
+ <div className="section">
32
+ <div className="sh">Disabled &amp; Loading</div>
33
+ <div className="row"><span className="lbl">disabled</span><Button disabled>Submit</Button><Button variant="outline" disabled icon="settings-2">Custom Parameters</Button><Button variant="danger" disabled icon="trash-2">Delete Node</Button></div>
34
+ <div className="row"><span className="lbl">loading</span><Button loading>Submit</Button><Button variant="outline" loading>Saving…</Button><Button size="sm" variant="primary">Run Test</Button></div>
35
+ </div>
36
+ </div>;}
37
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
38
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
39
+ </script></body></html>
package/components/_cards/button-2-states.card.html ADDED
@@ -0,0 +1,56 @@
1
+ <!-- @dsCard group="Components" viewport="700x640" name="Button Interaction States" subtitle="Rest · hover · press · focus · loading · disabled — every variant, live and forced" -->
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:16px;font-family:var(--font-sans);box-sizing:border-box}.grid{display:grid;grid-template-columns:104px repeat(6,1fr);gap:8px 10px;align-items:center}.ch{font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);padding-bottom:2px}.rh{font-size:11px;color:var(--text-secondary);font-family:var(--font-mono)}.sh{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);padding:18px 0 10px;border-bottom:1px solid var(--border-subtle);margin-bottom:12px}.note{font-size:11px;color:var(--text-secondary);padding-top:14px;line-height:1.6}.note code{font-family:var(--font-mono);font-size:10.5px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Button, IconButton } = window.KeybricksDesignSystem_71231a;
13
+ const VARIANTS=[["primary","Submit"],["dark","AI Assistant"],["outline","Cancel"],["primary-soft","Data Preview"],["danger","Delete"],["danger-soft","Remove"],["ghost","Details"],["text","View all"]];
14
+ const HOVER={primary:"var(--action-primary-hover)",dark:"var(--action-dark-hover)",outline:"var(--bg-hover)",ghost:"var(--bg-hover)","primary-soft":"var(--soft-hover)",danger:"var(--danger-text)","danger-soft":"var(--danger-bg)"};
15
+ const hoverStyle=(v)=>v==="text"?{color:"var(--text-heading)",textDecoration:"underline"}:{background:HOVER[v]};
16
+ function Sheet(){return <div>
17
+ <div className="grid">
18
+ <span></span>
19
+ {["Rest","Hover","Press","Focus","Loading","Disabled"].map(h=><span key={h} className="ch">{h}</span>)}
20
+ {VARIANTS.map(([v,l])=><React.Fragment key={v}>
21
+ <span className="rh">{v}</span>
22
+ <span><Button variant={v}>{l}</Button></span>
23
+ <span><Button variant={v} style={hoverStyle(v)}>{l}</Button></span>
24
+ <span><Button variant={v} pressed>{l}</Button></span>
25
+ <span><Button variant={v} focused>{l}</Button></span>
26
+ <span><Button variant={v} loading>{l}</Button></span>
27
+ <span><Button variant={v} disabled>{l}</Button></span>
28
+ </React.Fragment>)}
29
+ </div>
30
+ <div className="sh">Icon button — same six states</div>
31
+ <div className="grid">
32
+ <span></span>
33
+ {["Rest","Hover","Press","Focus","Active (on)","Disabled"].map(h=><span key={h} className="ch">{h}</span>)}
34
+ <span className="rh">default</span>
35
+ <span><IconButton icon="ellipsis" size="lg" label="More"/></span>
36
+ <span><IconButton icon="ellipsis" size="lg" label="More" style={{background:"var(--bg-hover)"}}/></span>
37
+ <span><IconButton icon="ellipsis" size="lg" label="More" pressed/></span>
38
+ <span><IconButton icon="ellipsis" size="lg" label="More" focused/></span>
39
+ <span><IconButton icon="ellipsis" size="lg" label="More" active/></span>
40
+ <span><IconButton icon="ellipsis" size="lg" label="More" disabled/></span>
41
+ <span className="rh">danger</span>
42
+ <span><IconButton icon="trash-2" size="lg" danger label="Delete"/></span>
43
+ <span><IconButton icon="trash-2" size="lg" danger label="Delete" style={{background:"var(--danger-bg)"}}/></span>
44
+ <span><IconButton icon="trash-2" size="lg" danger label="Delete" pressed/></span>
45
+ <span><IconButton icon="trash-2" size="lg" danger label="Delete" focused/></span>
46
+ <span><IconButton icon="trash-2" size="lg" danger label="Delete" active/></span>
47
+ <span><IconButton icon="trash-2" size="lg" danger label="Delete" disabled/></span>
48
+ </div>
49
+ <div className="note">
50
+ <strong>Rules.</strong> Hover moves the fill one step darker (<code>--action-primary-hover</code>, <code>--bg-hover</code>, <code>--soft-hover</code>); press moves it a second step (<code>--action-primary-active</code>, <code>--bg-press</code>, <code>--soft-active</code>, <code>--danger-active</code>) — no scale, no shadow shift. Keyboard focus adds the two-ring halo <code>--ring-focus</code> and appears only on <code>:focus-visible</code>, never on mouse click. <code>text</code> variant has no fill: it underlines and darkens on hover, and drops to 70% opacity on press. Loading keeps the button’s width and swaps the icon for a spinner; disabled is 55% opacity with the default cursor. The <code>pressed</code> / <code>focused</code> props force those states for specimens like this one.
51
+ <br/><br/><strong>Every other control</strong> — nav rows, tree items, menu items, chips, tabs, list rows, option rows, palette tiles — gets press and keyboard focus from the global layer in <code>tokens/interaction.css</code> (<code>filter:var(--press-filter)</code> on <code>:active</code>, a 2px <code>--focus-border</code> outline on <code>:focus-visible</code>), so no component re-implements them. Button and IconButton carry <code>data-press="own"</code> to opt out, since their press colors are explicit tokens.
52
+ </div>
53
+ </div>;}
54
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
55
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"}]); }, 0);
56
+ </script></body></html>
package/components/_cards/button-3-sizes-icons.card.html ADDED
@@ -0,0 +1,32 @@
1
+ <!-- @dsCard group="Components" viewport="700x460" name="Button Sizes & Icons" subtitle="sm/md/lg · leading/trailing icon · icon-only · full-width" -->
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:16px;font-family:var(--font-sans);box-sizing:border-box}.section{margin-bottom:22px}.sh{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);padding-bottom:10px;border-bottom:1px solid var(--border-subtle);margin-bottom:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.row:last-child{margin-bottom:0}.lbl{width:76px;flex-shrink:0;font-size:11px;color:var(--text-secondary)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Button } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div>
14
+ <div className="section">
15
+ <div className="sh">Sizes</div>
16
+ <div className="row"><span className="lbl">sm / md / lg</span><Button size="sm">Save Settings</Button><Button size="md">Submit</Button><Button size="lg">Continue to Confirmation</Button><Button size="lg" variant="text">Back</Button></div>
17
+ <div className="row"><span className="lbl">all sm</span><Button size="sm">Submit</Button><Button size="sm" variant="dark" icon="sparkles">AI Assistant</Button><Button size="sm" variant="outline">Custom Parameters</Button><Button size="sm" variant="ghost" icon="play">Run Test</Button><Button size="sm" variant="danger" icon="trash-2">Delete</Button><Button size="sm" variant="text">Cancel</Button></div>
18
+ </div>
19
+ <div className="section">
20
+ <div className="sh">Icon placement</div>
21
+ <div className="row"><span className="lbl">leading</span><Button icon="download" iconPosition="left">Export Log</Button></div>
22
+ <div className="row"><span className="lbl">trailing</span><Button icon="chevron-down" iconPosition="right" variant="outline">Show</Button></div>
23
+ <div className="row"><span className="lbl">icon-only</span><Button icon="bell" iconOnly label="Notifications" variant="outline"/><Button icon="ellipsis" iconOnly label="More" variant="ghost"/><Button icon="trash-2" iconOnly label="Delete" variant="danger"/></div>
24
+ </div>
25
+ <div className="section">
26
+ <div className="sh">Full width</div>
27
+ <div className="row"><div style={{width:280}}><Button fullWidth icon="upload">Upload Configuration File</Button></div></div>
28
+ </div>
29
+ </div>;}
30
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
31
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
32
+ </script></body></html>
package/components/_cards/button-4-group.card.html ADDED
@@ -0,0 +1,47 @@
1
+ <!-- @dsCard group="Components" viewport="700x420" name="Button Group" subtitle="Segmented group · split button · shortcut hint · badge" -->
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:16px;font-family:var(--font-sans);box-sizing:border-box}.section{margin-bottom:22px}.sh{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);padding-bottom:10px;border-bottom:1px solid var(--border-subtle);margin-bottom:12px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.row:last-child{margin-bottom:0}.lbl{width:96px;flex-shrink:0;font-size:11px;color:var(--text-secondary)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Button, ButtonGroup, IconButton, Kbd, StatusBadge } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [range,setRange]=React.useState("Week");
15
+ return <div>
16
+ <div className="section">
17
+ <div className="sh">Segmented group</div>
18
+ <div className="row"><span className="lbl">Day / Week / Month</span>
19
+ <ButtonGroup>
20
+ <Button variant="outline" size="sm" onClick={()=>setRange("Day")} style={range==="Day"?{background:"var(--bg-active)"}:null}>Day</Button>
21
+ <Button variant="outline" size="sm" onClick={()=>setRange("Week")} style={range==="Week"?{background:"var(--bg-active)"}:null}>Week</Button>
22
+ <Button variant="outline" size="sm" onClick={()=>setRange("Month")} style={range==="Month"?{background:"var(--bg-active)"}:null}>Month</Button>
23
+ </ButtonGroup>
24
+ </div>
25
+ </div>
26
+ <div className="section">
27
+ <div className="sh">Split button</div>
28
+ <div className="row"><span className="lbl">main + attached</span>
29
+ <ButtonGroup>
30
+ <Button icon="download">Export</Button>
31
+ <Button iconOnly label="More export options" icon="chevron-down" style={{borderLeft:"1px solid rgba(255,255,255,.3)"}}/>
32
+ </ButtonGroup>
33
+ </div>
34
+ </div>
35
+ <div className="section">
36
+ <div className="sh">Shortcut hint</div>
37
+ <div className="row"><span className="lbl">inline Kbd</span><Button variant="outline">Run Test<Kbd keys={["⌘","⏎"]} style={{marginLeft:8}}/></Button></div>
38
+ </div>
39
+ <div className="section">
40
+ <div className="sh">With badge</div>
41
+ <div className="row"><span className="lbl">unread dot</span><span style={{position:"relative",display:"inline-flex"}}><IconButton icon="bell" size="lg" label="Notifications"/><StatusBadge tone="danger" size={9} style={{position:"absolute",top:2,right:2}}/></span></div>
42
+ </div>
43
+ </div>;
44
+ }
45
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
46
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"},{"name":"Badge.jsx","path":"../display/Badge.jsx"},{"name":"Kbd.jsx","path":"../display/Kbd.jsx"}]); }, 0);
47
+ </script></body></html>
package/components/_cards/canvas-zoom-controls.card.html ADDED
@@ -0,0 +1,19 @@
1
+ <!-- @dsCard group="Components" viewport="700x180" name="Canvas Zoom Controls" subtitle="Pipeline canvas − / % / + / fit-to-view" -->
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-app);padding:20px;font-family:var(--font-sans);display:flex;align-items:flex-end;height:110px;box-sizing:border-box}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { ZoomControls } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [z,setZ]=React.useState(100);
15
+ return <ZoomControls value={z} onChange={setZ} onFit={()=>setZ(100)}/>;
16
+ }
17
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
18
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ZoomControls.jsx","path":"../pipeline/ZoomControls.jsx"}]); }, 0);
19
+ </script></body></html>
package/components/_cards/cards-indicators.card.html ADDED
@@ -0,0 +1,59 @@
1
+ <!-- @dsCard group="Components" viewport="700x400" name="Cards & Indicators" subtitle="Work in progress · Card · StatCard · Badge · IconTile · charts" -->
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-app);padding:16px;font-family:var(--font-sans);box-sizing:border-box}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Card, StatCard, Badge, StatusBadge, IconTile, ProgressBar, Donut, AreaChart, MiniBars } = window.KeybricksDesignSystem_71231a;
13
+ const grid = { display:"grid", gridTemplateColumns:"repeat(3,minmax(0,1fr))", gap:12 };
14
+ const H = 176;
15
+ function Sheet(){return <div style={{display:"flex",flexDirection:"column",gap:12}}>
16
+ <div style={grid}>
17
+ <Card title="Revenue Trend" dense style={{height:H,boxSizing:"border-box",display:"flex",flexDirection:"column"}}>
18
+ <AreaChart width={200} height={92} style={{width:"100%",flex:1}}/>
19
+ <div style={{display:"flex",justifyContent:"space-between",paddingTop:6,fontSize:"var(--text-xs)",letterSpacing:"var(--tracking-xs)",color:"var(--text-muted)"}}><span>Jan 1</span><span>Jan 29</span><span>Feb 12</span></div>
20
+ </Card>
21
+ <Card title="Expense Distribution" dense style={{height:H,boxSizing:"border-box"}}>
22
+ <div style={{display:"flex",flexDirection:"column",gap:10}}>
23
+ <ProgressBar label="Operations" value={45}/>
24
+ <ProgressBar label="Marketing" value={25} color="var(--success)"/>
25
+ <ProgressBar label="R&D" value={30} color="var(--purple-500)"/>
26
+ </div>
27
+ </Card>
28
+ <Card title="Budget vs Actual" dense style={{height:H,boxSizing:"border-box",display:"flex",flexDirection:"column"}}>
29
+ <div style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center"}}><Donut size={100}/></div>
30
+ </Card>
31
+ </div>
32
+ <div style={grid}>
33
+ <StatCard label="Total Tasks" value="156" dense style={{height:H,boxSizing:"border-box",justifyContent:"space-between"}}>
34
+ <MiniBars width={200} height={64} style={{width:"100%"}}/>
35
+ </StatCard>
36
+ <Card title="Statuses" dense style={{height:H,boxSizing:"border-box",display:"flex",flexDirection:"column"}}>
37
+ <div style={{display:"flex",gap:6,flexWrap:"wrap",alignContent:"flex-start",flex:1}}>
38
+ <Badge tone="success">Completed</Badge><Badge tone="danger">Failed</Badge><Badge tone="warning">Partial</Badge><Badge tone="info">Running</Badge><Badge tone="neutral">Queued</Badge>
39
+ </div>
40
+ <div style={{display:"flex",gap:10,alignItems:"center",paddingTop:10,borderTop:"1px solid var(--border-subtle)"}}>
41
+ <StatusBadge tone="success" icon="check" size={20}/><StatusBadge tone="danger" icon="bug" size={20}/><StatusBadge tone="warning" size={13}/><StatusBadge tone="pending" icon="clock" size={20}/>
42
+ </div>
43
+ </Card>
44
+ <Card title="Icon tiles" dense style={{height:H,boxSizing:"border-box",display:"flex",flexDirection:"column"}}>
45
+ <div style={{flex:1,display:"grid",gridTemplateColumns:"repeat(3,40px)",gap:10,alignContent:"center",justifyContent:"start"}}>
46
+ <IconTile icon="table" hue="source"/>
47
+ <IconTile icon="shuffle" hue="join"/>
48
+ <IconTile icon="funnel" hue="transform"/>
49
+ <IconTile icon="database" hue="merge"/>
50
+ <IconTile icon="layers" hue="output"/>
51
+ <IconTile icon="file-text" kind="row" style={{width:40,height:40,borderRadius:"var(--radius-tile)"}}/>
52
+ </div>
53
+ <span style={{fontSize:"var(--text-xs)",letterSpacing:"var(--tracking-xs)",color:"var(--text-muted)"}}>source · join · transform · merge · output · row</span>
54
+ </Card>
55
+ </div>
56
+ </div>;}
57
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
58
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Card.jsx","path":"../display/Card.jsx"},{"name":"Badge.jsx","path":"../display/Badge.jsx"},{"name":"ProgressBar.jsx","path":"../display/ProgressBar.jsx"}]); }, 0);
59
+ </script></body></html>