@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/icons-3-unicons.card.html ADDED
@@ -0,0 +1,44 @@
1
+ <!-- @dsCard group="Icons" viewport="700x560" name="Unicons Library" subtitle="1,206 Unicons line glyphs via CDN webfont · keyword search · click to download the SVG" -->
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/svg-download.js"></script>
9
+ <script src="../../assets/icons/unicons-index.js"></script>
10
+ <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:repeat(auto-fill,minmax(74px,1fr));gap:2px;padding-top:12px}.tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}.tile:hover{background:var(--bg-hover)}.tile span{font-size:9px;color:var(--text-secondary);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.meta{font-size:11px;color:var(--text-muted);padding-top:8px;line-height:1.5}</style></head>
11
+ <body><div id="root"></div>
12
+ <script type="text/babel">
13
+ const { Unicon, SearchInput, Tag, Button } = window.KeybricksDesignSystem_71231a;
14
+ const PAGE=96;
15
+ function Gallery(){
16
+ const [all,setAll]=React.useState([]);
17
+ const [q,setQ]=React.useState("");
18
+ const [cap,setCap]=React.useState(PAGE);
19
+ const [copied,setCopied]=React.useState("");
20
+ React.useEffect(()=>{
21
+ if (window.KB_UNICON_INDEX) setAll(window.KB_UNICON_INDEX);
22
+ else fetch("../../assets/icons/unicons-index.json").then(r=>r.json()).then(setAll).catch(function(){});
23
+ },[]);
24
+ const needle=q.trim().toLowerCase();
25
+ const match=needle?all.filter(i=>i.name.includes(needle)||i.tags.some(t=>t.toLowerCase().includes(needle))):all;
26
+ const shown=match.slice(0,cap);
27
+ const grab=(n)=>{ setCopied(n); setTimeout(()=>setCopied(""),1400);
28
+ if(window.KBSaveRemoteSVG)KBSaveRemoteSVG(n,"https://unicons.iconscout.com/release/v4.0.8/svg/line/"+n+".svg",function(){ try{navigator.clipboard.writeText(n);}catch(e){} setCopied(n+"\u00a0\u2014\u00a0name copied"); setTimeout(()=>setCopied(""),1800); }); };
29
+ return <div>
30
+ <div style={{display:"flex",alignItems:"center",gap:12}}>
31
+ <SearchInput value={q} onChange={(v)=>{setQ(typeof v==="string"?v:(v&&v.target?v.target.value:""));setCap(PAGE);}} placeholder="Search 1,206 Unicons — try “analytics”, “invoice”, “cloud”..." style={{flex:1}}/>
32
+ <Tag tone="info">{match.length} / {all.length}</Tag>
33
+ </div>
34
+ <div className="grid">
35
+ {shown.map(i=><div key={i.name} className="tile" title={i.name+" — "+i.tags.join(", ")} onClick={()=>grab(i.name)} style={copied===i.name?{borderColor:"var(--focus-border)",background:"var(--soft-bg)"}:null}>
36
+ <Unicon name={i.name} size={18}/><span>{copied===i.name?"saved":(copied&&copied.indexOf(i.name)===0?"name copied":i.name)}</span>
37
+ </div>)}
38
+ </div>
39
+ {match.length>cap && <div style={{paddingTop:10,display:"flex",justifyContent:"center"}}><Button variant="outline" size="sm" onClick={()=>setCap(cap+PAGE*2)}>Show more ({match.length-cap} left)</Button></div>}
40
+ <div className="meta">Unicons line style (Apache 2.0), rendered with <code>&lt;Unicon name="…"/&gt;</code> from the official Unicons CDN webfont — the 1,206-file SVG set is not vendored locally. Click a tile to download that glyph as an SVG from the CDN; keyword index lives in <code>assets/icons/unicons-index.json</code>. Use <code>Icon</code> (stroke SVG) for product chrome; Unicons adds breadth for illustrations, empty states and domain glyphs.</div>
41
+ </div>;
42
+ }
43
+ ReactDOM.createRoot(document.getElementById("root")).render(<Gallery/>);
44
+ </script></body></html>
package/components/_cards/input.card.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Components" viewport="700x480" name="Input" subtitle="Default · filled · required · readOnly · disabled · error · hint · focus" -->
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:16px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Field, Input } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div className="g">
14
+ <Field label="Default — empty"><Input placeholder="Sales Orders"/></Field>
15
+ <Field label="Filled"><Input defaultValue="Sales Orders"/></Field>
16
+ <Field label="Required, unfilled" required error="Node Name is required"><Input/></Field>
17
+ <Field label="Read-only" hint="Derived from the selected node type"><Input readOnly value="Data Source · Detail Sheet"/></Field>
18
+ <Field label="Disabled"><Input disabled defaultValue="Locked by workflow"/></Field>
19
+ <Field label="Error — invalid value" error="Only letters, numbers and underscores are allowed"><Input defaultValue="Sales Orders!!" error/></Field>
20
+ <Field label="With hint text" hint="Shown in Data Integration node lists"><Input placeholder="e.g. Sales Orders"/></Field>
21
+ <Field label="Focus (click to try)"><Input placeholder="Click me"/></Field>
22
+ </div>;}
23
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Field.jsx","path":"../forms/Field.jsx"},{"name":"Input.jsx","path":"../forms/Input.jsx"}]); }, 0);
25
+ </script></body></html>
package/components/_cards/kbd.card.html ADDED
@@ -0,0 +1,20 @@
1
+ <!-- @dsCard group="Components" viewport="700x150" name="Keyboard Shortcuts" subtitle="Kbd — keycap hints for a power-user tool" -->
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;justify-content:space-between;align-items:center;padding:6px 0;max-width:280px}.t{font-size:13px;color:var(--text-body)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Kbd } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div>
14
+ <div className="row"><span className="t">Open command search</span><Kbd keys={["⌘","K"]}/></div>
15
+ <div className="row"><span className="t">Run test</span><Kbd keys={["Ctrl","Enter"]}/></div>
16
+ <div className="row"><span className="t">Close panel</span><Kbd keys={["Esc"]}/></div>
17
+ </div>;}
18
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
19
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Kbd.jsx","path":"../display/Kbd.jsx"}]); }, 0);
20
+ </script></body></html>
package/components/_cards/keyvalue.card.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Components" viewport="700x220" name="Key/Value Rows" subtitle="Config summary and confirmation-step rows" -->
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 { KeyValueList, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <Card dense style={{maxWidth:420}}>
14
+ <KeyValueList rows={[
15
+ {label:"Node Type",value:"Data Source · Detail Sheet"},
16
+ {label:"Node Name",value:"Sales Orders"},
17
+ {label:"Created",value:"Apr 12, 2026"},
18
+ {label:"Last Run",value:"528563",mono:true},
19
+ ]}/>
20
+ </Card>;}
21
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
22
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"KeyValue.jsx","path":"../data/KeyValue.jsx"},{"name":"Card.jsx","path":"../display/Card.jsx"}]); }, 0);
23
+ </script></body></html>
package/components/_cards/listrow.card.html ADDED
@@ -0,0 +1,30 @@
1
+ <!-- @dsCard group="Components" viewport="700x360" name="List Row" subtitle="Expandable workflow rows — collapsed, expanded, with trailing count" -->
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 { ListRow, Card, Badge } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [open,setOpen]=React.useState("Budgeting");
15
+ const toggle=(k)=>setOpen(open===k?null:k);
16
+ return <Card pad={false}>
17
+ <ListRow icon="chart-line" title="Business Analysis" meta="1 document" trailing="1 item"/>
18
+ <ListRow icon="target" title="Corporate Strategic Planning" meta="1 document" trailing="1 item"/>
19
+ <ListRow icon="table" title="Budgeting" meta="2 documents" trailing="2 items" expanded={open==="Budgeting"} onClick={()=>toggle("Budgeting")}>
20
+ <div style={{display:"flex",gap:6,flexWrap:"wrap"}}><Badge tone="info">Budget 2026.xlsx</Badge><Badge tone="neutral">Q1 Forecast.xlsx</Badge></div>
21
+ </ListRow>
22
+ <ListRow icon="file" title="Management Reporting" meta="No documents yet" trailing="0 items" expanded={open==="Management Reporting"} onClick={()=>toggle("Management Reporting")}>
23
+ <span style={{fontSize:12,color:"var(--text-muted)"}}>Documents added to this workflow will appear here.</span>
24
+ </ListRow>
25
+ <ListRow icon="folder" title="Archived — Q4 2025" meta="4 documents" trailing="4 items" style={{opacity:.55}}/>
26
+ </Card>;
27
+ }
28
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
29
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ListRow.jsx","path":"../data/ListRow.jsx"},{"name":"Card.jsx","path":"../display/Card.jsx"},{"name":"Badge.jsx","path":"../display/Badge.jsx"}]); }, 0);
30
+ </script></body></html>
package/components/_cards/loading.card.html ADDED
@@ -0,0 +1,33 @@
1
+ <!-- @dsCard group="Components" viewport="700x280" name="Loading" subtitle="Spinner sizes · Skeleton text, blocks and table rows" -->
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 { Spinner, Skeleton, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"grid",gridTemplateColumns:"1fr 1.4fr",gap:20,alignItems:"start"}}>
14
+ <div><span className="lbl">Spinner</span>
15
+ <div style={{display:"flex",flexDirection:"column",gap:14}}>
16
+ <div style={{display:"flex",alignItems:"center",gap:10}}><Spinner size={12}/><Spinner/><Spinner size={20}/><Spinner size={28}/></div>
17
+ <div style={{display:"flex",alignItems:"center",gap:10}}><Spinner/><span style={{fontSize:12,color:"var(--text-secondary)"}}>Running pipeline…</span></div>
18
+ </div>
19
+ </div>
20
+ <div><span className="lbl">Skeleton</span>
21
+ <div style={{display:"flex",flexDirection:"column",gap:10}}>
22
+ <Card dense style={{display:"flex",flexDirection:"column",gap:8}}>
23
+ <Skeleton width={140} height={13}/><Skeleton height={10}/><Skeleton width="72%" height={10}/>
24
+ </Card>
25
+ <Card dense style={{display:"flex",flexDirection:"column",gap:9}}>
26
+ {[0,1,2].map(i=><div key={i} style={{display:"flex",gap:10,alignItems:"center"}}><Skeleton width={20} height={20} radius="var(--radius-full)"/><Skeleton height={10} style={{flex:1}}/><Skeleton width={54} height={10}/></div>)}
27
+ </Card>
28
+ </div>
29
+ </div>
30
+ </div>;}
31
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
32
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Alert.jsx","path":"../feedback/Alert.jsx"}]); }, 0);
33
+ </script></body></html>
package/components/_cards/log-viewer.card.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Components" viewport="700x320" name="Log Viewer" subtitle="Mono run log — info · warn · error lines" -->
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 { LogViewer } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"flex",flexDirection:"column",gap:18}}>
14
+ <div><span className="lbl">Successful run</span>
15
+ <LogViewer lines={["[14:30] Task started: Import","[14:31] Parsing configuration...","[14:32] 128 rows validated",{text:"[14:33] WARN duplicate key FIN_04",color:"var(--warning-text)"},"[14:34] Task completed in 4.2s"]}/>
16
+ </div>
17
+ <div><span className="lbl">Failed run</span>
18
+ <LogViewer lines={["[09:41] Connecting to ERP source...",{text:"[09:41] ERROR connection refused (timeout 30s)",color:"var(--danger-text)"},{text:"[09:42] WARN retrying (1/3)",color:"var(--warning-text)"},{text:"[09:43] ERROR run aborted",color:"var(--danger-text)"}]}/>
19
+ </div>
20
+ </div>;}
21
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
22
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"ActivityItem.jsx","path":"../feedback/ActivityItem.jsx"}]); }, 0);
23
+ </script></body></html>
package/components/_cards/modal.card.html ADDED
@@ -0,0 +1,35 @@
1
+ <!-- @dsCard group="Components" viewport="700x520" name="Modal" subtitle="Default · destructive footer · with form content · no subtitle" -->
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:10px;flex-wrap:wrap}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Modal, Button, Field, Input } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [which,setWhich]=React.useState(null);
15
+ return <div>
16
+ <div className="row">
17
+ <Button variant="outline" size="sm" onClick={()=>setWhich("confirm")}>Open confirm</Button>
18
+ <Button variant="outline" size="sm" onClick={()=>setWhich("destructive")}>Open destructive</Button>
19
+ <Button variant="outline" size="sm" onClick={()=>setWhich("form")}>Open with form</Button>
20
+ <Button variant="outline" size="sm" onClick={()=>setWhich("plain")}>Open, no subtitle</Button>
21
+ </div>
22
+ <Modal open={which==="confirm"} title="Discard changes?" subtitle="Your edits to this node haven't been saved." onClose={()=>setWhich(null)}
23
+ footer={<React.Fragment><Button variant="outline" size="sm" onClick={()=>setWhich(null)}>Keep Editing</Button><Button size="sm" onClick={()=>setWhich(null)}>Discard</Button></React.Fragment>}/>
24
+ <Modal open={which==="destructive"} title="Delete node?" subtitle="“Sales × Product Join” and its 2 edges will be removed." onClose={()=>setWhich(null)}
25
+ footer={<React.Fragment><Button variant="outline" size="sm" onClick={()=>setWhich(null)}>Cancel</Button><Button variant="danger" size="sm" onClick={()=>setWhich(null)}>Delete Node</Button></React.Fragment>}/>
26
+ <Modal open={which==="form"} title="Rename Node" subtitle="This name is shown on the canvas and in logs." onClose={()=>setWhich(null)}
27
+ footer={<React.Fragment><Button variant="outline" size="sm" onClick={()=>setWhich(null)}>Cancel</Button><Button size="sm" onClick={()=>setWhich(null)}>Save</Button></React.Fragment>}>
28
+ <Field label="Node Name" required><Input defaultValue="Sales × Product Join"/></Field>
29
+ </Modal>
30
+ <Modal open={which==="plain"} title="Export complete" onClose={()=>setWhich(null)} footer={<Button size="sm" onClick={()=>setWhich(null)}>Done</Button>}/>
31
+ </div>;
32
+ }
33
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
34
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Modal.jsx","path":"../feedback/Modal.jsx"},{"name":"Button.jsx","path":"../buttons/Button.jsx"},{"name":"Field.jsx","path":"../forms/Field.jsx"},{"name":"Input.jsx","path":"../forms/Input.jsx"}]); }, 0);
35
+ </script></body></html>
package/components/_cards/multi-select.card.html ADDED
@@ -0,0 +1,26 @@
1
+ <!-- @dsCard group="Components" viewport="700x330" name="Multi Select" subtitle="Checkbox dropdown — removable tags · +n overflow · clear all" -->
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:repeat(2,1fr);gap:14px 16px;align-items:start}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:6px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { MultiSelect, Field } = window.KeybricksDesignSystem_71231a;
13
+ const DEPTS = ["Engineering","Marketing","Operations","Sales","Finance","Legal","HR"];
14
+ function Sheet(){
15
+ const [a,setA]=React.useState([]); const [b,setB]=React.useState(["Engineering","Sales"]);
16
+ const [c,setC]=React.useState(["Engineering","Sales","Finance","Legal"]);
17
+ return <div className="g">
18
+ <div><span className="lbl">Empty — click to open</span><MultiSelect options={DEPTS} value={a} onChange={setA} placeholder="Select departments..."/></div>
19
+ <div><span className="lbl">Two selected</span><MultiSelect options={DEPTS} value={b} onChange={setB}/></div>
20
+ <div><span className="lbl">Overflow → +n</span><MultiSelect options={DEPTS} value={c} onChange={setC}/></div>
21
+ <div><span className="lbl">Disabled</span><MultiSelect options={DEPTS} value={["Operations"]} disabled/></div>
22
+ </div>;
23
+ }
24
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
25
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"MultiSelect.jsx","path":"../forms/MultiSelect.jsx"}]); }, 0);
26
+ </script></body></html>
package/components/_cards/number-stepper.card.html ADDED
@@ -0,0 +1,24 @@
1
+ <!-- @dsCard group="Components" viewport="700x160" name="Number Stepper" subtitle="Default · at min · at max · 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}.g{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.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 { NumberStepper } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [n,setN]=React.useState(100);
15
+ return <div className="g">
16
+ <div><span className="lbl">Default</span><NumberStepper value={n} onChange={setN}/></div>
17
+ <div><span className="lbl">At minimum (− disabled)</span><NumberStepper value={0} min={0}/></div>
18
+ <div><span className="lbl">At maximum (+ disabled)</span><NumberStepper value={500} max={500}/></div>
19
+ <div><span className="lbl">Disabled</span><NumberStepper value={100} disabled/></div>
20
+ </div>;
21
+ }
22
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
23
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"NumberStepper.jsx","path":"../forms/NumberStepper.jsx"}]); }, 0);
24
+ </script></body></html>
package/components/_cards/pagination.card.html ADDED
@@ -0,0 +1,25 @@
1
+ <!-- @dsCard group="Components" viewport="700x240" name="Pagination" subtitle="Row-range label · small set · first/last page states" -->
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 { Pagination } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){
14
+ const [p,setP]=React.useState(2);
15
+ const [p2,setP2]=React.useState(1);
16
+ return <div style={{display:"flex",flexDirection:"column",gap:16}}>
17
+ <div><span className="lbl">With row-range label</span><Pagination page={p} pageCount={7} total={128} pageSize={20} onChange={setP}/></div>
18
+ <div><span className="lbl">Small set — no range label</span><Pagination page={p2} pageCount={3} onChange={setP2}/></div>
19
+ <div><span className="lbl">First page — Prev disabled</span><Pagination page={1} pageCount={12} total={224} pageSize={20}/></div>
20
+ <div><span className="lbl">Last page — Next disabled</span><Pagination page={12} pageCount={12} total={224} pageSize={20}/></div>
21
+ </div>;
22
+ }
23
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
24
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Pagination.jsx","path":"../data/Pagination.jsx"}]); }, 0);
25
+ </script></body></html>
package/components/_cards/people.card.html ADDED
@@ -0,0 +1,46 @@
1
+ <!-- @dsCard group="Components" viewport="700x210" name="People" subtitle="Avatar · AvatarGroup — initials, sizes, real images" -->
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;flex-direction:column;gap:4px}.lbl{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 { Avatar, AvatarGroup, Card } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
14
+ <Card dense style={{display:"flex",flexDirection:"column",gap:14}}>
15
+ <div className="row"><span className="lbl">Sizes</span>
16
+ <div style={{display:"flex",gap:8,alignItems:"center"}}>
17
+ <Avatar name="Felix Chen" size={20}/><Avatar name="Felix Chen" size={24}/><Avatar name="Felix Chen" size={28}/><Avatar name="Felix Chen" size={36}/><Avatar name="Felix Chen" size={44}/>
18
+ </div>
19
+ </div>
20
+ <div className="row"><span className="lbl">Initials from name</span>
21
+ <div style={{display:"flex",gap:8}}>
22
+ <Avatar name="Felix Chen" size={32}/><Avatar name="Mia Park" size={32}/><Avatar name="财务分析" size={32}/><Avatar name="Ana Diaz" size={32}/>
23
+ </div>
24
+ </div>
25
+ <div className="row"><span className="lbl">With real image (src)</span>
26
+ <Avatar name="Felix Chen" size={32} src="https://i.pravatar.cc/64?img=12"/>
27
+ </div>
28
+ </Card>
29
+ <Card dense style={{display:"flex",flexDirection:"column",gap:14}}>
30
+ <div className="row"><span className="lbl">Overlapping group</span>
31
+ <AvatarGroup names={["Felix Chen","Mia Park","Chen Wu","Ana Diaz","Sam Lee","Rui Zhang"]}/>
32
+ </div>
33
+ <div className="row"><span className="lbl">Small group, no overflow</span>
34
+ <AvatarGroup names={["Felix Chen","Mia Park"]} size={22}/>
35
+ </div>
36
+ <div className="row"><span className="lbl">Assignee row (task context)</span>
37
+ <div style={{display:"flex",alignItems:"center",gap:10}}>
38
+ <span style={{fontSize:"var(--text-sm)",color:"var(--text-body)"}}>Assigned to</span>
39
+ <AvatarGroup names={["Felix Chen","Mia Park","Chen Wu"]} size={24}/>
40
+ </div>
41
+ </div>
42
+ </Card>
43
+ </div>;}
44
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
45
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Avatar.jsx","path":"../display/Avatar.jsx"},{"name":"Card.jsx","path":"../display/Card.jsx"}]); }, 0);
46
+ </script></body></html>
package/components/_cards/pipeline-node.card.html ADDED
@@ -0,0 +1,76 @@
1
+ <!-- @dsCard group="Components" viewport="700x1200" name="Pipeline Node Card" subtitle="220×90 node — category hues · status badges · ports with hover, drag-to-connect and drop states" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:14px}.row{display:flex;flex-wrap:wrap;gap:34px 46px;padding-bottom:26px}.sec{padding-bottom:6px}.note{border-top:1px solid var(--border-subtle);padding-top:12px;font-size:var(--text-xs);line-height:17px;color:var(--text-secondary)}.note code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note strong{color:var(--text-heading);font-weight:var(--weight-medium)}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { NodeCard, Port, PortLabel, PipelineCanvas } = window.KeybricksDesignSystem_71231a;
13
+
14
+ const CONNECT_NODES=[
15
+ {id:"filter",x:14,y:26,title:"Filter Active",subtitle:"Multi-Condition Judge",icon:"funnel",hue:"transform",inputs:[]},
16
+ {id:"orders",x:14,y:136,title:"Sales Orders",subtitle:"Detail Sheet",icon:"table",hue:"source",inputs:[]},
17
+ {id:"sum",x:330,y:80,title:"Summary",subtitle:"Group Calculation",icon:"database",hue:"merge",badge:"clock",inputs:["A","B"]},
18
+ ];
19
+
20
+ function Sheet(){
21
+ const [sel,setSel]=React.useState("b");
22
+ const [wires,setWires]=React.useState([{from:"orders",to:"sum",toPort:1}]);
23
+ return <div>
24
+ <div className="sec">
25
+ <span className="lbl">Category hues — one per palette group</span>
26
+ <div className="row">
27
+ <NodeCard title="Sales Orders" subtitle="Detail Sheet" icon="table" hue="source" inputs={[]}/>
28
+ <NodeCard title="Lookup Region" subtitle="Lookup Data" icon="text-search" hue="join" inputs={[""]}/>
29
+ <NodeCard title="Net Revenue" subtitle="Field Value Calculation" icon="sliders-horizontal" hue="transform" inputs={[""]}/>
30
+ <NodeCard title="Group by Entity" subtitle="Group Calculation" icon="database" hue="merge" inputs={[""]}/>
31
+ <NodeCard title="Consolidated Model" subtitle="Model" icon="layers" hue="output" inputs={[""]} output={false}/>
32
+ </div>
33
+ </div>
34
+ <div className="sec">
35
+ <span className="lbl">Selection — click a card</span>
36
+ <div className="row">
37
+ <NodeCard title="Sales Orders" subtitle="Detail Sheet" icon="table" hue="source" inputs={[]} selected={sel==="a"} onClick={()=>setSel("a")}/>
38
+ <NodeCard title="Sales × Product" subtitle="Association Match" icon="shuffle" hue="join" inputs={["A","B"]} selected={sel==="b"} onClick={()=>setSel("b")}/>
39
+ </div>
40
+ </div>
41
+ <div className="sec">
42
+ <span className="lbl">Status badges — error, warning, queued</span>
43
+ <div className="row">
44
+ <NodeCard title="Product Dimensions" subtitle="Dimension" icon="grid-3x3" hue="source" badge="warning" inputs={[]}/>
45
+ <NodeCard title="Sales × Product" subtitle="Association Match" icon="shuffle" hue="join" badge="error" inputs={["A","B"]}/>
46
+ <NodeCard title="Nightly Rebuild" subtitle="Model" icon="layers" hue="output" badge="clock" inputs={[""]} output={false}/>
47
+ </div>
48
+ </div>
49
+ <div className="sec">
50
+ <span className="lbl">Port states — rest, hover, dragging, drop target</span>
51
+ <div className="row" style={{alignItems:"center",gap:"18px 30px",paddingBottom:18}}>
52
+ <span style={{display:"flex",alignItems:"center",gap:10}}><Port/><code style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>rest</code></span>
53
+ <span style={{display:"flex",alignItems:"center",gap:10}}><Port interactive/><code style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>hover me</code></span>
54
+ <span style={{display:"flex",alignItems:"center",gap:10}}><Port tone="active"/><code style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>active</code></span>
55
+ <span style={{display:"flex",alignItems:"center",gap:10}}><Port tone="target"/><code style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>target</code></span>
56
+ <span style={{display:"flex",alignItems:"center",gap:10}}><PortLabel label="A"/><PortLabel label="B" interactive/><PortLabel label="B" tone="target"/><code style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--text-secondary)"}}>A/B pills</code></span>
57
+ </div>
58
+ <span className="lbl">Drag to connect — hold an output port and drop it on an input</span>
59
+ <div style={{border:"1px solid var(--border-card)",borderRadius:"var(--radius-lg)",overflow:"hidden",height:250}}>
60
+ <PipelineCanvas nodes={CONNECT_NODES} edges={wires} onConnect={(e)=>setWires(w=>[...w.filter(x=>!(x.to===e.to&&x.toPort===e.toPort)),e])}/>
61
+ </div>
62
+ <div style={{paddingTop:8,fontFamily:"var(--font-sans)",fontSize:"var(--text-xs)",lineHeight:"16px",color:"var(--text-secondary)"}}>
63
+ {wires.length} wire{wires.length===1?"":"s"} — the dashed line follows the cursor, snaps to the port under it, and a drop on an occupied port replaces that wire.
64
+ </div>
65
+ </div>
66
+ <div className="note">
67
+ <strong>Fixed geometry.</strong> Every node is 220×90 at <code>--radius-node</code> so edges can be routed from constants: output port at <code>x+220, y+44</code>, a single input at <code>y+44</code>, A/B inputs at <code>y+23</code> and <code>y+61</code>. Don't resize the card to fit a longer title — it truncates.
68
+ <br/><br/><strong>Hue means category, badge means state.</strong> The five hues map to the palette groups (source, join, transform, merge, output) and never encode status; the corner badge carries severity. A node shows at most one badge.
69
+ <br/><br/><strong>Ports are the only draggable part of a node.</strong> Rest is grey; hover and drag light the ring to <code>--action-primary</code>; the port under the cursor mid-drag swaps its arrow for a crosshair on <code>--soft-bg</code>. Wires always run output → input, so dropping on an output does nothing, and dropping back on the source node is rejected rather than silently creating a loop.
70
+ <br/><br/><strong>Which port an edge lands on matters.</strong> <code>inputs={"{[]}"}</code> = source (no input) · <code>{"{[\"\"]}"}</code> = one plain port · <code>{"{[\"A\",\"B\"]}"}</code> = labelled pair, and <code>toPort</code> is that pair's index — A and B are not interchangeable in a join.
71
+ </div>
72
+ </div>;
73
+ }
74
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
75
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"NodeCard.jsx","path":"../pipeline/NodeCard.jsx"}]); }, 0);
76
+ </script></body></html>
package/components/_cards/pipeline-palette.card.html ADDED
@@ -0,0 +1,54 @@
1
+ <!-- @dsCard group="Components" viewport="700x580" name="Pipeline Palette" subtitle="240px component drawer — grid/list toggle · collapsible hued categories" -->
2
+ <!DOCTYPE html>
3
+ <html><head><meta charset="utf-8"><script src="../_shared/frame-theme.js"></script><link rel="stylesheet" href="../../styles.css">
4
+ <script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
5
+ <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
6
+ <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
7
+ <script src="../../_ds_bundle.js"></script>
8
+ <script src="../_shared/view-source.js"></script>
9
+ <style>body{margin:0;background:var(--bg-surface);padding:18px;font-family:var(--font-sans);box-sizing:border-box}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted);display:block;padding-bottom:8px}.g{display:flex;gap:28px;align-items:flex-start}.pane{border:1px solid var(--border-card);border-radius:var(--radius-lg);overflow:hidden;height:390px;width:242px}.bits{flex:1;min-width:0}.bitrow{display:flex;align-items:center;gap:16px;padding:6px 0}.hint{font-size:var(--text-xs);line-height:16px;color:var(--text-secondary);padding-top:8px}.hint code{font-family:var(--font-mono);font-size:11px;color:var(--text-body)}.note{border-top:1px solid var(--border-subtle);margin-top:18px;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 { PalettePanel, PaletteItem, PaletteListItem, PIPELINE_CATALOG } = window.KeybricksDesignSystem_71231a;
13
+
14
+ function Sheet(){
15
+ const [picked,setPicked]=React.useState(null);
16
+ return <div>
17
+ <div className="g">
18
+ <div>
19
+ <span className="lbl">Full panel — grid view is the default</span>
20
+ <div className="pane"><PalettePanel onPick={(cat,item)=>setPicked(cat+" › "+item)}/></div>
21
+ <div className="hint">{picked ? <>Dragged out: <code>{picked}</code></> : "Click a tile: the panel reports the category and node type."}</div>
22
+ </div>
23
+ <div className="bits">
24
+ <span className="lbl">Tiles in isolation</span>
25
+ <div className="bitrow">
26
+ <PaletteItem icon="table" hue="source" label="Detail Sheet"/>
27
+ <PaletteItem icon="shuffle" hue="join" label="Association Match"/>
28
+ <PaletteItem icon="split" hue="transform" label="Field Split"/>
29
+ <PaletteItem icon="merge" hue="merge" label="Concat Merge"/>
30
+ </div>
31
+ <div className="hint">Grid tile: 67.7px column, 40px tinted <code>IconTile</code>, two-line 10px label, <code>cursor: grab</code>.</div>
32
+ <span className="lbl" style={{paddingTop:22}}>List rows</span>
33
+ <div style={{maxWidth:230}}>
34
+ <PaletteListItem icon="text-search" hue="join" label="Lookup Data"/>
35
+ <PaletteListItem icon="sliders-horizontal" hue="transform" label="Field Value Calculation"/>
36
+ <PaletteListItem icon="code" hue="transform" label="JS Enhanced Processing"/>
37
+ <PaletteListItem icon="database" hue="merge" label="Group Calculation"/>
38
+ </div>
39
+ <div className="hint">List row: 14px hued glyph + 13px label, indented 20px under its category header.</div>
40
+ <span className="lbl" style={{paddingTop:22}}>Catalog</span>
41
+ <div className="hint" style={{paddingTop:0}}>
42
+ <code>PIPELINE_CATALOG</code> ships the real inventory — {PIPELINE_CATALOG.length} categories, {PIPELINE_CATALOG.reduce((n,c)=>n+c.items.length,0)} node types. Pass your own <code>catalog</code> to scope the panel to one workspace.
43
+ </div>
44
+ </div>
45
+ </div>
46
+ <div className="note">
47
+ <strong>Grid for browsing, list for recall.</strong> The <code>ViewToggle</code> in the header is per-user state, not per-document: a first-time user scans icons, an experienced one scans names. Categories collapse independently and stay collapsed while the panel is open.
48
+ <br/><br/><strong>Width is fixed at <code>--sidebar-w</code></strong> (240px) and the panel never scrolls horizontally — long node names wrap in grid view and truncate in list view.
49
+ </div>
50
+ </div>;
51
+ }
52
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
53
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"PalettePanel.jsx","path":"../pipeline/PalettePanel.jsx"}]); }, 0);
54
+ </script></body></html>
package/components/_cards/search.card.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Components" viewport="700x230" name="Search Input" subtitle="Bordered · bare top-bar · with value/clear · 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}.row{display:flex;flex-direction:column;gap:6px}.lbl{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}.dark-strip{background:var(--neutral-900);border-radius:8px;padding:14px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { SearchInput } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div style={{display:"flex",flexDirection:"column",gap:14}}>
14
+ <div className="row"><span className="lbl">Empty</span><SearchInput style={{width:260}}/></div>
15
+ <div className="row"><span className="lbl">With value (shows clear ×)</span><SearchInput defaultValue="Budget 2026" style={{width:260}}/></div>
16
+ <div className="row"><span className="lbl">Disabled</span><SearchInput placeholder="Search unavailable" disabled style={{width:260}}/></div>
17
+ <div className="row"><span className="lbl">Bare — top bar flavor, on dark chrome</span>
18
+ <div className="dark-strip"><SearchInput bare placeholder="Search documents, workflows, data..." style={{width:320}}/></div>
19
+ </div>
20
+ </div>;}
21
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
22
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"SearchInput.jsx","path":"../forms/SearchInput.jsx"}]); }, 0);
23
+ </script></body></html>
package/components/_cards/select.card.html ADDED
@@ -0,0 +1,23 @@
1
+ <!-- @dsCard group="Components" viewport="700x220" name="Select" subtitle="md / sm · placeholder · disabled · error" -->
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:repeat(3,1fr);gap:16px 12px}</style></head>
10
+ <body><div id="root"></div>
11
+ <script type="text/babel">
12
+ const { Select, Field } = window.KeybricksDesignSystem_71231a;
13
+ function Sheet(){return <div className="g">
14
+ <Field label="Default (md)"><Select options={["All Modules","Financial Settings","User Management"]}/></Field>
15
+ <Field label="Placeholder, unselected"><Select options={["New","Overwrite","Skip"]} placeholder="Choose an action"/></Field>
16
+ <Field label="Disabled"><Select options={["USD","EUR"]} value="USD" disabled/></Field>
17
+ <Field label="Small (table row)"><Select size="sm" options={["New","Overwrite","Skip"]} value="Overwrite"/></Field>
18
+ <Field label="Required, unselected" required error="Select a target module"><Select options={["Financial Settings","User Management"]} placeholder="Select module" error/></Field>
19
+ <Field label="Small, disabled"><Select size="sm" options={["New","Overwrite","Skip"]} value="Skip" disabled/></Field>
20
+ </div>;}
21
+ ReactDOM.createRoot(document.getElementById("root")).render(<Sheet/>);
22
+ if (window.KBViewSource) setTimeout(function(){ KBViewSource.mount("#root", [{"name":"Select.jsx","path":"../forms/Select.jsx"},{"name":"Field.jsx","path":"../forms/Field.jsx"}]); }, 0);
23
+ </script></body></html>