@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/slider.card.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Components" viewport="700x300" name="Slider" subtitle="Filled track · ring knob · value bubble · min/max labels" -->
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 16px 24px;font-family:var(--font-sans);box-sizing:border-box}.g{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 24px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:12px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Slider } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [a,setA]=React.useState(60); const [b,setB]=React.useState(0.5);
15
+ const [c,setC]=React.useState(75); const [d]=React.useState(30);
16
+ return <div className="g">
17
+ <div><span className="lbl">Default — drag to see the bubble</span><Slider value={a} onChange={setA}/></div>
18
+ <div><span className="lbl">Min/max labels + step 0.1 + unit</span><Slider value={b} min={0} max={1} step={0.1} labels unit="%" onChange={setB}/></div>
19
+ <div><span className="lbl">Always-on value bubble</span><Slider value={c} showValue unit="%" onChange={setC}/></div>
20
+ <div><span className="lbl">Disabled</span><Slider value={d} disabled/></div>
21
+ </div>;
22
+ }
23
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Slider.jsx","path":"../forms/Slider.jsx"}]); }, 0);
25
+ </script></body></html>
package/components/_cards/smart-table.card.html ADDED
@@ -0,0 +1,37 @@
1
+ <!-- @dsCard group="Components" viewport="700x480" name="Smart Table (Database Grid)" subtitle="Notion/Airtable-style grid — typed fields · hue pills · aggregates · + New" -->
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}.hint{font-size:11px;color:var(--text-secondary);padding-top:10px;line-height:1.5}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { SmartTable } = window.KeybricksDesignSystem_71231a;
13
+ const fields=[
14
+ {key:"task",label:"Task",type:"text",width:190,primary:true},
15
+ {key:"status",label:"Status",type:"select",width:118,options:{"Live":"green","In progress":"amber","Blocked":"red","Backlog":"gray"}},
16
+ {key:"tags",label:"Tags",type:"multiSelect",width:170,options:{"Data":"blue","Finance":"purple","Urgent":"red","Q3":"teal"}},
17
+ {key:"owner",label:"Owner",type:"person",width:132},
18
+ {key:"due",label:"Due",type:"date",width:96},
19
+ {key:"done",label:"Done",type:"checkbox",width:58,aggregate:"count"},
20
+ {key:"effort",label:"Effort",type:"number",width:68,aggregate:"sum"},
21
+ {key:"progress",label:"Progress",type:"progress",width:118,aggregate:"avg"},
22
+ ];
23
+ const rows=[
24
+ {task:"Migrate journal import",status:"Live",tags:["Data","Q3"],owner:"Felix Zhang",due:"Aug 18",done:true,effort:8,progress:100},
25
+ {task:"FX rounding rule review",status:"In progress",tags:["Finance","Urgent"],owner:"Maria Gomez",due:"Aug 20",done:false,effort:5,progress:60},
26
+ {task:"Vendor master dedupe",status:"In progress",tags:["Data"],owner:"Ken Watanabe",due:"Aug 22",done:false,effort:3,progress:45},
27
+ {task:"Consolidation dry run",status:"Blocked",tags:["Finance"],owner:"Priya Nair",due:"Aug 25",done:false,effort:13,progress:20},
28
+ {task:"Archive 2025 workpapers",status:"Backlog",tags:["Q3"],owner:"Felix Zhang",due:"Sep 02",done:false,effort:2,progress:0},
29
+ {task:"Reconciliation alerts",status:"Live",tags:["Data","Urgent"],owner:"Maria Gomez",due:"Aug 15",done:true,effort:5,progress:100},
30
+ ];
31
+ function Sheet(){return <div>
32
+ <SmartTable fields={fields} rows={rows} title="Launch tracker"/>
33
+ <div className="hint">Typed fields with per-type header icons; select/multi-select render theme-aware hue pills; hover a row number for the expand affordance; double-click text/number/date cells to edit; “+ New” appends a row; the footer aggregates per column (COUNT / SUM / AVG). Scrolls horizontally like Airtable when fields overflow.</div>
34
+ </div>;}
35
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
36
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"SmartTable.jsx","path":"../data/SmartTable.jsx"}]); }, 0);
37
+ </script></body></html>
package/components/_cards/spreadsheet.card.html ADDED
@@ -0,0 +1,31 @@
1
+ <!-- @dsCard group="Components" viewport="924x554" name="Spreadsheet" subtitle="Formula bar · frozen headers · range selection · =SUM() · sheet tabs · status bar" -->
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}.hint{font-size:11px;color:var(--text-secondary);padding-top:10px;line-height:1.5}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Spreadsheet } = window.KeybricksDesignSystem_71231a;
13
+ const data = [
14
+ [{v:"Department",b:true},{v:"Q1",b:true,align:"flex-end"},{v:"Q2",b:true,align:"flex-end"},{v:"Q3",b:true,align:"flex-end"},{v:"Q4",b:true,align:"flex-end"},{v:"Total",b:true,align:"flex-end"}],
15
+ ["Engineering",{v:128500,t:"currency"},{v:132400,t:"currency"},{v:141200,t:"currency"},{v:150800,t:"currency"},{f:"=SUM(B2:E2)",t:"currency"}],
16
+ ["Marketing",{v:64200,t:"currency"},{v:58900,t:"currency"},{v:71500,t:"currency"},{v:69300,t:"currency"},{f:"=SUM(B3:E3)",t:"currency"}],
17
+ ["Operations",{v:48750,t:"currency"},{v:51200,t:"currency"},{v:49800,t:"currency"},{v:53100,t:"currency"},{f:"=SUM(B4:E4)",t:"currency"}],
18
+ ["Sales",{v:92300,t:"currency"},{v:98700,t:"currency"},{v:104500,t:"currency"},{v:112900,t:"currency"},{f:"=SUM(B5:E5)",t:"currency"}],
19
+ [{v:"Subtotal",b:true},{f:"=SUM(B2:B5)",t:"currency",b:true},{f:"=SUM(C2:C5)",t:"currency",b:true},{f:"=SUM(D2:D5)",t:"currency",b:true},{f:"=SUM(E2:E5)",t:"currency",b:true},{f:"=SUM(F2:F5)",t:"currency",b:true}],
20
+ ["Growth vs Q1",{v:"—",align:"flex-end"},{f:"=(C6-B6)/B6",t:"percent"},{f:"=(D6-B6)/B6",t:"percent"},{f:"=(E6-B6)/B6",t:"percent"},{v:"",t:"percent"}],
21
+ [],
22
+ ["Avg / quarter",{f:"=AVERAGE(B6:E6)",t:"currency"},{v:""},{v:""},{v:""},{v:""}],
23
+ ];
24
+ function Sheet(){return <div>
25
+ <span className="lbl">2026 budget — click a cell, shift-click a range, double-click to edit, type =SUM(…) formulas</span>
26
+ <Spreadsheet data={data} rows={10} cols={7} colWidths={[110,82,82,82,82,92]} defaultActive="F2" sheets={["Budget","Actuals","Forecast"]}/>
27
+ <div className="hint">Selection stats (Sum · Avg · Count) appear in the status bar when a range is selected — try shift-clicking B2 → E5. The formula bar name box shows the active ref; fx shows the raw formula.</div>
28
+ </div>;}
29
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
30
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Spreadsheet.jsx","path":"../data/Spreadsheet.jsx"}]); }, 0);
31
+ </script></body></html>
package/components/_cards/stepper.card.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Components" viewport="700x260" name="Stepper" subtitle="Multi-step flow header — done · current · upcoming" -->
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 { Stepper } = window.KeybricksDesignSystem_71231a;
13
+ const STEPS=[{label:"Upload & Parse",icon:"upload"},{label:"Comparison",icon:"file-text"},{label:"Confirmation",icon:"check"},{label:"Execution",icon:"play"},{label:"Results",icon:"eye"}];
14
+ function Sheet(){
15
+ const [i,setI]=React.useState(1);
16
+ return <div style={{display:"flex",flexDirection:"column",gap:22}}>
17
+ <div><span className="lbl">Interactive — click a step</span><Stepper current={i} steps={STEPS} onSelect={setI}/></div>
18
+ <div><span className="lbl">First step</span><Stepper current={0} steps={STEPS}/></div>
19
+ <div><span className="lbl">All complete</span><Stepper current={4} steps={STEPS}/></div>
20
+ <div><span className="lbl">Three steps</span><Stepper current={1} steps={[{label:"Connect",icon:"link"},{label:"Map Fields",icon:"sliders-horizontal"},{label:"Review",icon:"eye"}]}/></div>
21
+ </div>;
22
+ }
23
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Stepper.jsx","path":"../feedback/Stepper.jsx"}]); }, 0);
25
+ </script></body></html>
package/components/_cards/tabs.card.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Components" viewport="700x230" name="Tabs" subtitle="Underline tabs · panel tabs · pill filter tabs" -->
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 { Tabs, PanelTabs, PillTabs } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [a,setA]=React.useState("Import");
15
+ const [b,setB]=React.useState("Node Info");
16
+ const [c,setC]=React.useState("For Review");
17
+ return <div style={{display:"flex",flexDirection:"column",gap:18}}>
18
+ <div><span className="lbl">Tabs — underline, page level</span><Tabs tabs={["Import","Export"]} active={a} onChange={setA}/></div>
19
+ <div><span className="lbl">PanelTabs — inside a detail panel</span><PanelTabs tabs={["Node Info","Calc Rules","Output Fields","SQL Preview"]} active={b} onChange={setB}/></div>
20
+ <div><span className="lbl">PillTabs — filter/status tabs</span><PillTabs tabs={["For Review","To be Submitted","For Approval"]} active={c} onChange={setC}/></div>
21
+ </div>;
22
+ }
23
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Tabs.jsx","path":"../tabs/Tabs.jsx"}]); }, 0);
25
+ </script></body></html>
package/components/_cards/tag.card.html ADDED
@@ -0,0 +1,26 @@
1
+ <!-- @dsCard group="Components" viewport="700x150" name="Tag" subtitle="Removable filter tags — distinct from Badge/ActionChip" -->
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 { Tag } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [tags,setTags]=React.useState(["Financial Settings","User Management","2026"]);
15
+ return <div style={{display:"flex",flexDirection:"column",gap:14}}>
16
+ <div><span className="lbl">Removable (active filters)</span>
17
+ <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>{tags.map(t=><Tag key={t} onRemove={()=>setTags(tags.filter(x=>x!==t))}>{t}</Tag>)}</div>
18
+ </div>
19
+ <div><span className="lbl">Static, neutral & info tone</span>
20
+ <div style={{display:"flex",gap:6}}><Tag>Draft</Tag><Tag tone="info">Auto-tagged</Tag></div>
21
+ </div>
22
+ </div>;
23
+ }
24
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
25
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Tag.jsx","path":"../display/Tag.jsx"}]); }, 0);
26
+ </script></body></html>
package/components/_cards/textarea.card.html ADDED
@@ -0,0 +1,27 @@
1
+ <!-- @dsCard group="Components" viewport="924x509" name="Textarea" subtitle="Default · character count · over the limit · disabled" -->
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 { Field, Textarea } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [text,setText]=React.useState("Migration notes for the Q1 batch");
15
+ return <div style={{display:"flex",flexDirection:"column",gap:16}}>
16
+ <Field label="With character count" hint="Keep it under 120 characters">
17
+ <Textarea showCount maxLength={120} value={text} onChange={(e)=>setText(e.target.value)}/>
18
+ </Field>
19
+ <Field label="Over the limit" error="120 character limit exceeded">
20
+ <Textarea showCount maxLength={120} defaultValue={"This node description has run well past the recommended length and now exceeds the one hundred and twenty character limit that the field allows for review."}/>
21
+ </Field>
22
+ <Field label="Disabled"><Textarea disabled defaultValue="Locked while the pipeline is running"/></Field>
23
+ </div>;
24
+ }
25
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
26
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Field.jsx","path":"../forms/Field.jsx"},{"name":"Input.jsx","path":"../forms/Input.jsx"}]); }, 0);
27
+ </script></body></html>
package/components/_cards/timeline.card.html ADDED
@@ -0,0 +1,32 @@
1
+ <!-- @dsCard group="Components" viewport="700x440" name="Timeline" subtitle="Vertical activity timeline — toned icon nodes on a hairline spine" -->
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}.g{display:grid;grid-template-columns:1fr 1fr;gap:24px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:10px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Timeline, Tag } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div className="g">
14
+ <div><span className="lbl">Migration run</span>
15
+ <Timeline items={[
16
+ {icon:"circle-check",tone:"success",title:"Validation passed",meta:"Today 09:41 · System"},
17
+ {icon:"upload",tone:"info",title:"Configuration uploaded",meta:"Today 09:38 · Felix Zhang",body:"migration-config.json · 1.2 MB"},
18
+ {icon:"triangle-alert",tone:"warning",title:"3 field mappings need review",meta:"Today 09:36 · Validator"},
19
+ {icon:"clock",tone:"neutral",title:"Run scheduled",meta:"Yesterday 18:02 · Scheduler"},
20
+ ]}/>
21
+ </div>
22
+ <div><span className="lbl">With rich body content</span>
23
+ <Timeline items={[
24
+ {icon:"bug",tone:"danger",title:"Node failed: Field Value Calculation",meta:"Aug 13 · Pipeline engine",body:"Division by zero in row 1,204 — see debug log."},
25
+ {icon:"file-text",tone:"info",title:"Comment from Maria",meta:"Aug 13",body:<span>Please re-check the FX rounding rule. <Tag tone="info">FX-104</Tag></span>},
26
+ {icon:"circle-check",tone:"success",title:"Pipeline published",meta:"Aug 12 · v2.4"},
27
+ ]}/>
28
+ </div>
29
+ </div>;}
30
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
31
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Timeline.jsx","path":"../feedback/Timeline.jsx"}]); }, 0);
32
+ </script></body></html>
package/components/_cards/toast.card.html ADDED
@@ -0,0 +1,33 @@
1
+ <!-- @dsCard group="Components" viewport="700x420" name="Toast" subtitle="Tones · with/without meta · live ToastStack demo" -->
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;max-width:380px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Toast, ToastStack, Button } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [toasts,setToasts]=React.useState([]);
15
+ const notify=(tone,title,meta)=>{const id=Date.now()+Math.random();setToasts(s=>[...s,{id,tone,title,meta}]);setTimeout(()=>setToasts(s=>s.filter(t=>t.id!==id)),3200);};
16
+ return <div>
17
+ <div className="col">
18
+ <Toast tone="success" title="Import completed" meta="3 configurations applied" onClose={()=>{}}/>
19
+ <Toast tone="danger" title="Report generation failed" meta="Q1 Summary • retry available" onClose={()=>{}}/>
20
+ <Toast tone="warning" title="4 configurations differ" meta="Review before continuing" onClose={()=>{}}/>
21
+ <Toast tone="info" title="Sync started" onClose={()=>{}}/>
22
+ <Toast tone="success" title="Saved" />
23
+ </div>
24
+ <div style={{display:"flex",gap:8,paddingTop:16}}>
25
+ <Button size="sm" onClick={()=>notify("success","Import completed","3 configurations applied")}>Trigger success</Button>
26
+ <Button size="sm" variant="outline" onClick={()=>notify("danger","Task failed","Retry available")}>Trigger danger</Button>
27
+ </div>
28
+ <ToastStack toasts={toasts} onDismiss={(id)=>setToasts(s=>s.filter(t=>t.id!==id))}/>
29
+ </div>;
30
+ }
31
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
32
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Modal.jsx","path":"../feedback/Modal.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"}]); }, 0);
33
+ </script></body></html>
package/components/_cards/toggles.card.html ADDED
@@ -0,0 +1,68 @@
1
+ <!-- @dsCard group="Components" viewport="700x260" name="Toggles" subtitle="Switch · Radio · Checkbox · SegmentedControl · ViewToggle — sm/md sizes" -->
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 { Switch, Radio, RadioGroup, Checkbox, SegmentedControl, ViewToggle } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [a,setA]=React.useState(true),[b,setB]=React.useState(false);
15
+ const [c1,setC1]=React.useState(true),[c2,setC2]=React.useState(true),[c3,setC3]=React.useState("some");
16
+ const [r,setR]=React.useState("Overwrite");
17
+ const [s,setS]=React.useState("Grid");
18
+ const [t,setT]=React.useState("Last 30 days");
19
+ const [v,setV]=React.useState("grid");
20
+ return <div>
21
+ <div style={{display:"grid",gridTemplateColumns:"200px 200px 1fr",gap:20,alignItems:"start"}}>
22
+ <div>
23
+ <span className="lbl">Switch — md</span>
24
+ <div style={{display:"flex",flexDirection:"column",gap:12}}>
25
+ <Switch label="Debug Mode" checked={a} onChange={setA}/>
26
+ <Switch label="Auto-run on save" checked={b} onChange={setB}/>
27
+ <Switch label="Locked by admin" checked disabled/>
28
+ </div>
29
+ </div>
30
+ <div>
31
+ <span className="lbl">Radio — md</span>
32
+ <RadioGroup options={["New","Overwrite","Skip"]} value={r} onChange={setR}/>
33
+ </div>
34
+ <div>
35
+ <span className="lbl">Checkbox — md / sm</span>
36
+ <div style={{display:"flex",flexDirection:"column",gap:10}}>
37
+ <Checkbox label="Send weekly summary" checked={c1} onChange={setC1}/>
38
+ <Checkbox size="sm" label="Include archived rows" checked={c2} onChange={setC2}/>
39
+ <Checkbox size="sm" label="Row selected" checked={c3==="all"} indeterminate={c3==="some"} onChange={()=>setC3(c3==="none"?"all":"none")}/>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ <div style={{display:"grid",gridTemplateColumns:"200px 200px 1fr",gap:20,alignItems:"start",paddingTop:20,borderTop:"1px solid var(--border-subtle)",marginTop:20}}>
44
+ <div>
45
+ <span className="lbl">Switch — sm</span>
46
+ <div style={{display:"flex",flexDirection:"column",gap:10}}>
47
+ <Switch size="sm" label="Compact rows" checked={a} onChange={setA}/>
48
+ <Switch size="sm" label="Show line numbers" checked={b} onChange={setB}/>
49
+ </div>
50
+ </div>
51
+ <div>
52
+ <span className="lbl">Radio — sm</span>
53
+ <RadioGroup size="sm" options={["Ascending","Descending"]} value={r==="Skip"?"Ascending":"Descending"} onChange={()=>{}}/>
54
+ </div>
55
+ <div>
56
+ <span className="lbl">SegmentedControl — md / sm · ViewToggle</span>
57
+ <div style={{display:"flex",flexDirection:"column",gap:12,alignItems:"flex-start"}}>
58
+ <SegmentedControl options={[{label:"List",icon:"list"},{label:"Grid",icon:"layout-grid"}]} value={s} onChange={setS}/>
59
+ <SegmentedControl size="sm" options={["Last 7 days","Last 30 days","Quarter"]} value={t} onChange={setT}/>
60
+ <ViewToggle value={v} onChange={setV}/>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>;
65
+ }
66
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
67
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Switch.jsx","path":"../forms/Switch.jsx"},{"name":"Checkbox.jsx","path":"../forms/Checkbox.jsx"},{"name":"SegmentedControl.jsx","path":"../tabs/SegmentedControl.jsx"},{"name":"ViewToggle.jsx","path":"../tabs/ViewToggle.jsx"}]); }, 0);
68
+ </script></body></html>
package/components/_cards/tooltip.card.html ADDED
@@ -0,0 +1,22 @@
1
+ <!-- @dsCard group="Components" viewport="700x260" name="Tooltip" subtitle="Placements — top · bottom · left · right, on icon and text triggers" -->
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 16px 60px;font-family:var(--font-sans);box-sizing:border-box}.row{display:flex;gap:24px;align-items:center;margin-bottom:20px}.lbl{width:64px;flex-shrink:0;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Tooltip, Button, IconButton } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div>
14
+ <div className="row"><span className="lbl">top</span><Tooltip label="Run a test execution" placement="top"><Button variant="ghost" icon="play">Run Test</Button></Tooltip></div>
15
+ <div className="row"><span className="lbl">bottom</span><Tooltip label="Notifications" placement="bottom"><IconButton icon="bell" size="lg"/></Tooltip></div>
16
+ <div className="row"><span className="lbl">left</span><Tooltip label="Collapse sidebar" placement="left"><IconButton icon="panel-left" size="md"/></Tooltip></div>
17
+ <div className="row"><span className="lbl">right</span><Tooltip label="More actions" placement="right"><IconButton icon="ellipsis" size="md"/></Tooltip></div>
18
+ <div className="row"><span className="lbl">on text</span><Tooltip label="This value is derived from the node's input schema"><span style={{fontSize:13,color:"var(--text-secondary)",borderBottom:"1px dotted var(--text-muted)",cursor:"help"}}>Output Field</span></Tooltip></div>
19
+ </div>;}
20
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
21
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Modal.jsx","path":"../feedback/Modal.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"IconButton.jsx","path":"../buttons/IconButton.jsx"}]); }, 0);
22
+ </script></body></html>
package/components/_cards/tree.card.html ADDED
@@ -0,0 +1,150 @@
1
+ <!-- @dsCard group="Components" viewport="700x1340" name="Tree" subtitle="Cascading checkboxes · disabled nodes · lines · async load · search · drag · keyboard" -->
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}.g{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}.hint{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);padding-top:7px}.hint code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note{grid-column:1/-1;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 { Tree, SearchInput, IconButton, Icon } = window.KeybricksDesignSystem_71231a;
13
+
14
+ const FILES = [
15
+ {key:"finance",title:"Finance",children:[
16
+ {key:"close",title:"Monthly Close",children:[
17
+ {key:"aug",title:"August Close.xlsx",hue:"green"},
18
+ {key:"jul",title:"July Close.xlsx",hue:"green"},
19
+ {key:"adj",title:"Adjustments.numbers",hue:"orange"}]},
20
+ {key:"fx",title:"FX Rates",count:12,children:[{key:"rates",title:"2026-rates.csv",hue:"teal"}]}]},
21
+ {key:"ops",title:"Operations",count:8,children:[{key:"vendor",title:"Vendor Sync Log.txt",hue:"gray"}]},
22
+ {key:"archive",title:"Archive",children:[{key:"y2025",title:"2025",children:[{key:"ye",title:"Year End.xlsx",hue:"green"}]}]},
23
+ ];
24
+
25
+ const SCOPE = [
26
+ {key:"entities",title:"Legal Entities",children:[
27
+ {key:"emea",title:"EMEA",children:[
28
+ {key:"de",title:"Germany GmbH"},
29
+ {key:"fr",title:"France SAS"},
30
+ {key:"uk",title:"UK Ltd",tag:"locked",disableCheckbox:true}]},
31
+ {key:"apac",title:"APAC",children:[
32
+ {key:"jp",title:"Japan KK"},
33
+ {key:"sg",title:"Singapore Pte"}]}]},
34
+ {key:"consol",title:"Consolidation",disabled:true,children:[{key:"elim",title:"Eliminations"}]},
35
+ ];
36
+
37
+ function Basic(){
38
+ const [sel,setSel]=React.useState("aug");
39
+ return <div>
40
+ <span className="lbl">Basic — single select, chevron expand</span>
41
+ <Tree items={FILES} defaultExpanded={["finance","close"]} defaultActive="aug" onSelect={setSel}/>
42
+ <div className="hint">Selected: <code>{sel}</code></div>
43
+ </div>;
44
+ }
45
+
46
+ function Checkable(){
47
+ const [keys,setKeys]=React.useState(["de","fr"]);
48
+ return <div>
49
+ <span className="lbl">Checkable — cascades to children, parents go indeterminate</span>
50
+ <Tree items={SCOPE} checkable defaultExpanded={["entities","emea"]} checkedKeys={keys} onCheck={setKeys} selectable={false}/>
51
+ <div className="hint">Checked: <code>{keys.length ? keys.join(", ") : "none"}</code></div>
52
+ </div>;
53
+ }
54
+
55
+ function Strict(){
56
+ const [keys,setKeys]=React.useState(["emea"]);
57
+ return <div>
58
+ <span className="lbl">checkStrictly — parent and children stay independent</span>
59
+ <Tree items={SCOPE} checkable checkStrictly defaultExpanded={["entities","emea"]} checkedKeys={keys} onCheck={setKeys} selectable={false}/>
60
+ <div className="hint">Checked: <code>{keys.length ? keys.join(", ") : "none"}</code></div>
61
+ </div>;
62
+ }
63
+
64
+ function DisabledCase(){
65
+ return <div>
66
+ <span className="lbl">Disabled node vs. disabled checkbox</span>
67
+ <Tree items={SCOPE} checkable defaultExpanded={["entities","emea","consol"]} defaultChecked={["jp"]}/>
68
+ <div className="hint"><code>Consolidation</code> is <code>disabled</code> — inert and greyed. <code>UK Ltd</code> uses <code>disableCheckbox</code>: still selectable, but excluded from every cascade.</div>
69
+ </div>;
70
+ }
71
+
72
+ function Lines(){
73
+ return <div>
74
+ <span className="lbl">showLine — connector guides for deep hierarchies</span>
75
+ <Tree items={FILES} showLine defaultExpanded={["finance","close","archive","y2025"]} defaultActive="jul"/>
76
+ </div>;
77
+ }
78
+
79
+ function Multi(){
80
+ const [keys,setKeys]=React.useState(["aug","rates"]);
81
+ return <div>
82
+ <span className="lbl">Multiple selection — click to add or remove</span>
83
+ <Tree items={FILES} multiple defaultExpanded={["finance","close","fx"]} selectedKeys={keys} onSelect={(k,all)=>setKeys(all)}/>
84
+ <div className="hint">{keys.length} selected</div>
85
+ </div>;
86
+ }
87
+
88
+ function Draggable(){
89
+ const [last,setLast]=React.useState(null);
90
+ return <div>
91
+ <span className="lbl">Draggable — drop a row into a folder</span>
92
+ <Tree items={FILES} draggable defaultExpanded={["finance","close"]} onDrop={(i)=>setLast(i.dragKey+" → "+i.position+" "+i.dropKey)}/>
93
+ <div className="hint">{last ? <>Moved <code>{last}</code></> : "Only folders are drop targets — the whole row fills blue. Hovering a file shows nothing, and a folder can’t be dropped into its own subtree."}</div>
94
+ </div>;
95
+ }
96
+
97
+ function AsyncLoad(){
98
+ const [log,setLog]=React.useState(0);
99
+ const load=(node)=>new Promise(res=>setTimeout(()=>{
100
+ setLog(n=>n+1);
101
+ res([{key:node.key+"-a",title:node.title+" · Q1.xlsx",hue:"green"},
102
+ {key:node.key+"-b",title:node.title+" · Q2.xlsx",hue:"green"},
103
+ {key:node.key+"-c",title:node.title+" · notes",hue:"gray",isLeaf:false}]);
104
+ },900));
105
+ return <div>
106
+ <span className="lbl">Async children — loadData with a spinner</span>
107
+ <Tree loadData={load} items={[
108
+ {key:"r1",title:"Revenue Models",isLeaf:false},
109
+ {key:"r2",title:"Cost Centers",isLeaf:false},
110
+ {key:"r3",title:"Headcount",isLeaf:false}]}/>
111
+ <div className="hint">Children fetch once per branch, then cache. {log} request{log===1?"":"s"} so far.</div>
112
+ </div>;
113
+ }
114
+
115
+ function Searchable(){
116
+ const [q,setQ]=React.useState("close");
117
+ return <div>
118
+ <span className="lbl">Search — highlights matches, auto-expands ancestors</span>
119
+ <SearchInput value={q} onChange={setQ} placeholder="Filter documents…" style={{marginBottom:8}}/>
120
+ <Tree items={FILES} searchValue={q} showLine/>
121
+ </div>;
122
+ }
123
+
124
+ function WithActions(){
125
+ return <div>
126
+ <span className="lbl">Row actions — revealed on hover</span>
127
+ <Tree items={FILES} defaultExpanded={["finance","close"]} defaultActive="adj"
128
+ rowActions={(n)=><>
129
+ <IconButton icon="download" size="sm" aria-label={"Download "+(n.title||n.label)}/>
130
+ <IconButton icon="ellipsis" size="sm" aria-label="More"/>
131
+ </>}/>
132
+ </div>;
133
+ }
134
+
135
+ function Sheet(){return <div className="g">
136
+ <Basic/><Checkable/>
137
+ <Strict/><DisabledCase/>
138
+ <Lines/><Multi/>
139
+ <Draggable/><AsyncLoad/>
140
+ <Searchable/><WithActions/>
141
+ <div className="note">
142
+ <strong>Keyboard.</strong> The tree is a single tab stop. <code>↑ ↓</code> move between visible rows, <code>→</code> opens a branch (or steps into it), <code>←</code> closes it (or jumps to the parent), <code>Enter</code> selects, <code>Space</code> toggles the checkbox. Focus draws the global 2px <code>--focus-ring</code>, never a new colour.
143
+ <br/><br/><strong>Checkbox semantics.</strong> A parent is checked only when every <em>enabled</em> descendant is checked, and indeterminate when some are — so <code>disabled</code> and <code>disableCheckbox</code> rows never block a parent from completing. Use <code>checkStrictly</code> when a branch is a real selectable value rather than a roll-up of its children.
144
+ <br/><br/><strong>Selection vs. expansion.</strong> With <code>selectable={"{false}"}</code> a row click only expands — the right default for a checkbox picker. Otherwise a click both selects and expands, matching the file-tree pattern used in the product sidebar.
145
+ <br/><br/><strong>Dragging moves a node into a folder.</strong> Files are not drop targets — hovering one shows nothing rather than an indicator for a move that can’t happen — and neither is a folder inside the dragged node’s own subtree. Pass <code>reorder</code> when order matters: a folder’s outer 20% then becomes a thin insert rule above or below it.
146
+ </div>
147
+ </div>;}
148
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
149
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Tree.jsx","path":"../navigation/Tree.jsx"}]); }, 0);
150
+ </script></body></html>
package/components/_shared/frame-theme.js ADDED
@@ -0,0 +1,16 @@
1
+ /* Card frames follow the host page's theme: the site posts {kb:'theme'} on load
2
+ and on every toggle. Works cross-document, so it also holds under file://. */
3
+ (function(){
4
+ function apply(t){
5
+ if (t !== 'dark' && t !== 'light') return;
6
+ document.documentElement.setAttribute('data-theme', t);
7
+ document.documentElement.style.colorScheme = t;
8
+ }
9
+ window.addEventListener('message', function(e){
10
+ var m = e.data;
11
+ if (m && m.kb === 'theme') apply(m.theme);
12
+ });
13
+ try {
14
+ if (window.parent !== window) window.parent.postMessage({ kb: 'theme-ask' }, '*');
15
+ } catch(e){}
16
+ })();