@panphora/bevel 0.1.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 (539) hide show
  1. package/LICENSE +16 -0
  2. package/README.md +226 -0
  3. package/bevel-fonts.css +16 -0
  4. package/bevel.css +3075 -0
  5. package/bevel.js +2126 -0
  6. package/dist/react/components/activity-feed.d.ts +89 -0
  7. package/dist/react/components/activity-feed.js +54 -0
  8. package/dist/react/components/alert-dialog.d.ts +14 -0
  9. package/dist/react/components/alert-dialog.js +19 -0
  10. package/dist/react/components/app-shell.d.ts +98 -0
  11. package/dist/react/components/app-shell.js +86 -0
  12. package/dist/react/components/app-toolbar.d.ts +19 -0
  13. package/dist/react/components/app-toolbar.js +22 -0
  14. package/dist/react/components/avatar-group.d.ts +67 -0
  15. package/dist/react/components/avatar-group.js +49 -0
  16. package/dist/react/components/badge-and-pill.d.ts +34 -0
  17. package/dist/react/components/badge-and-pill.js +12 -0
  18. package/dist/react/components/breadcrumbs.d.ts +56 -0
  19. package/dist/react/components/breadcrumbs.js +44 -0
  20. package/dist/react/components/bulk-bar.d.ts +22 -0
  21. package/dist/react/components/bulk-bar.js +59 -0
  22. package/dist/react/components/button.d.ts +15 -0
  23. package/dist/react/components/button.js +20 -0
  24. package/dist/react/components/callout-and-hint.d.ts +17 -0
  25. package/dist/react/components/callout-and-hint.js +8 -0
  26. package/dist/react/components/checkbox.d.ts +5 -0
  27. package/dist/react/components/checkbox.js +13 -0
  28. package/dist/react/components/chip.d.ts +149 -0
  29. package/dist/react/components/chip.js +29 -0
  30. package/dist/react/components/code-block.d.ts +50 -0
  31. package/dist/react/components/code-block.js +77 -0
  32. package/dist/react/components/code-editor.d.ts +122 -0
  33. package/dist/react/components/code-editor.js +695 -0
  34. package/dist/react/components/column-manager.d.ts +28 -0
  35. package/dist/react/components/column-manager.js +85 -0
  36. package/dist/react/components/combobox.d.ts +32 -0
  37. package/dist/react/components/combobox.js +37 -0
  38. package/dist/react/components/data-grid.d.ts +108 -0
  39. package/dist/react/components/data-grid.js +159 -0
  40. package/dist/react/components/data-table.d.ts +2 -0
  41. package/dist/react/components/data-table.js +6 -0
  42. package/dist/react/components/date.d.ts +23 -0
  43. package/dist/react/components/date.js +11 -0
  44. package/dist/react/components/details.d.ts +13 -0
  45. package/dist/react/components/details.js +20 -0
  46. package/dist/react/components/dialog.d.ts +74 -0
  47. package/dist/react/components/dialog.js +31 -0
  48. package/dist/react/components/diff-view.d.ts +73 -0
  49. package/dist/react/components/diff-view.js +68 -0
  50. package/dist/react/components/documents.d.ts +70 -0
  51. package/dist/react/components/documents.js +10 -0
  52. package/dist/react/components/drawer.d.ts +45 -0
  53. package/dist/react/components/drawer.js +35 -0
  54. package/dist/react/components/editable-grid-cells.d.ts +32 -0
  55. package/dist/react/components/editable-grid-cells.js +116 -0
  56. package/dist/react/components/eyebrow-kicker-lede-pull-quote.d.ts +39 -0
  57. package/dist/react/components/eyebrow-kicker-lede-pull-quote.js +12 -0
  58. package/dist/react/components/field.d.ts +32 -0
  59. package/dist/react/components/field.js +27 -0
  60. package/dist/react/components/file-tree.d.ts +75 -0
  61. package/dist/react/components/file-tree.js +247 -0
  62. package/dist/react/components/file.d.ts +43 -0
  63. package/dist/react/components/file.js +73 -0
  64. package/dist/react/components/files-table.d.ts +174 -0
  65. package/dist/react/components/files-table.js +237 -0
  66. package/dist/react/components/filter-builder.d.ts +37 -0
  67. package/dist/react/components/filter-builder.js +109 -0
  68. package/dist/react/components/form-error-summary.d.ts +16 -0
  69. package/dist/react/components/form-error-summary.js +49 -0
  70. package/dist/react/components/icon-button.d.ts +8 -0
  71. package/dist/react/components/icon-button.js +14 -0
  72. package/dist/react/components/icon.d.ts +7 -0
  73. package/dist/react/components/icon.js +15 -0
  74. package/dist/react/components/image.d.ts +72 -0
  75. package/dist/react/components/image.js +24 -0
  76. package/dist/react/components/inline-edit.d.ts +70 -0
  77. package/dist/react/components/inline-edit.js +149 -0
  78. package/dist/react/components/input.d.ts +29 -0
  79. package/dist/react/components/input.js +20 -0
  80. package/dist/react/components/kanban-board.d.ts +140 -0
  81. package/dist/react/components/kanban-board.js +374 -0
  82. package/dist/react/components/layout.d.ts +51 -0
  83. package/dist/react/components/layout.js +28 -0
  84. package/dist/react/components/list.d.ts +28 -0
  85. package/dist/react/components/list.js +6 -0
  86. package/dist/react/components/masthead-and-verdict.d.ts +60 -0
  87. package/dist/react/components/masthead-and-verdict.js +8 -0
  88. package/dist/react/components/menu.d.ts +26 -0
  89. package/dist/react/components/menu.js +31 -0
  90. package/dist/react/components/multi-select-picker.d.ts +49 -0
  91. package/dist/react/components/multi-select-picker.js +20 -0
  92. package/dist/react/components/note.d.ts +33 -0
  93. package/dist/react/components/note.js +8 -0
  94. package/dist/react/components/number-field.d.ts +16 -0
  95. package/dist/react/components/number-field.js +17 -0
  96. package/dist/react/components/pagination.d.ts +45 -0
  97. package/dist/react/components/pagination.js +87 -0
  98. package/dist/react/components/persistent-action-banner.d.ts +71 -0
  99. package/dist/react/components/persistent-action-banner.js +39 -0
  100. package/dist/react/components/popconfirm.d.ts +42 -0
  101. package/dist/react/components/popconfirm.js +59 -0
  102. package/dist/react/components/popover.d.ts +16 -0
  103. package/dist/react/components/popover.js +21 -0
  104. package/dist/react/components/progress-and-gauge.d.ts +44 -0
  105. package/dist/react/components/progress-and-gauge.js +19 -0
  106. package/dist/react/components/radio.d.ts +7 -0
  107. package/dist/react/components/radio.js +13 -0
  108. package/dist/react/components/rich-text-toolbar.d.ts +26 -0
  109. package/dist/react/components/rich-text-toolbar.js +64 -0
  110. package/dist/react/components/rows-and-card.d.ts +88 -0
  111. package/dist/react/components/rows-and-card.js +10 -0
  112. package/dist/react/components/save-status-indicator.d.ts +11 -0
  113. package/dist/react/components/save-status-indicator.js +33 -0
  114. package/dist/react/components/segmented-control.d.ts +21 -0
  115. package/dist/react/components/segmented-control.js +15 -0
  116. package/dist/react/components/select.d.ts +29 -0
  117. package/dist/react/components/select.js +29 -0
  118. package/dist/react/components/selectable-cards.d.ts +30 -0
  119. package/dist/react/components/selectable-cards.js +29 -0
  120. package/dist/react/components/settings-rows.d.ts +51 -0
  121. package/dist/react/components/settings-rows.js +8 -0
  122. package/dist/react/components/sidebar-nav.d.ts +77 -0
  123. package/dist/react/components/sidebar-nav.js +41 -0
  124. package/dist/react/components/skeleton-and-empty.d.ts +51 -0
  125. package/dist/react/components/skeleton-and-empty.js +14 -0
  126. package/dist/react/components/slider.d.ts +19 -0
  127. package/dist/react/components/slider.js +17 -0
  128. package/dist/react/components/small-charts.d.ts +60 -0
  129. package/dist/react/components/small-charts.js +76 -0
  130. package/dist/react/components/sortable.d.ts +30 -0
  131. package/dist/react/components/sortable.js +85 -0
  132. package/dist/react/components/split-button.d.ts +38 -0
  133. package/dist/react/components/split-button.js +43 -0
  134. package/dist/react/components/split-panes.d.ts +35 -0
  135. package/dist/react/components/split-panes.js +102 -0
  136. package/dist/react/components/stat-tiles.d.ts +54 -0
  137. package/dist/react/components/stat-tiles.js +8 -0
  138. package/dist/react/components/steps.d.ts +11 -0
  139. package/dist/react/components/steps.js +13 -0
  140. package/dist/react/components/switch.d.ts +6 -0
  141. package/dist/react/components/switch.js +13 -0
  142. package/dist/react/components/table.d.ts +61 -0
  143. package/dist/react/components/table.js +6 -0
  144. package/dist/react/components/tabs.d.ts +7 -0
  145. package/dist/react/components/tabs.js +13 -0
  146. package/dist/react/components/tags.d.ts +33 -0
  147. package/dist/react/components/tags.js +83 -0
  148. package/dist/react/components/textarea.d.ts +10 -0
  149. package/dist/react/components/textarea.js +6 -0
  150. package/dist/react/components/toast.d.ts +35 -0
  151. package/dist/react/components/toast.js +90 -0
  152. package/dist/react/components/tooltip-and-key.d.ts +20 -0
  153. package/dist/react/components/tooltip-and-key.js +20 -0
  154. package/dist/react/components/tree-view.d.ts +34 -0
  155. package/dist/react/components/tree-view.js +118 -0
  156. package/dist/react/components/upload-dropzone.d.ts +92 -0
  157. package/dist/react/components/upload-dropzone.js +116 -0
  158. package/dist/react/components/wizard-shell.d.ts +78 -0
  159. package/dist/react/components/wizard-shell.js +176 -0
  160. package/dist/react/fonts.css.d.ts +1 -0
  161. package/dist/react/index.d.ts +76 -0
  162. package/dist/react/index.js +77 -0
  163. package/dist/react/integrations/quickcrop.d.ts +58 -0
  164. package/dist/react/integrations/quickcrop.js +137 -0
  165. package/dist/react/integrations/richclay.d.ts +43 -0
  166. package/dist/react/integrations/richclay.js +129 -0
  167. package/dist/react/internal/classes.d.ts +3 -0
  168. package/dist/react/internal/classes.js +10 -0
  169. package/dist/react/internal/close-mark.d.ts +1 -0
  170. package/dist/react/internal/close-mark.js +10 -0
  171. package/dist/react/internal/controllable-state.d.ts +9 -0
  172. package/dist/react/internal/controllable-state.js +22 -0
  173. package/dist/react/internal/drop-effect.d.ts +28 -0
  174. package/dist/react/internal/drop-effect.js +8 -0
  175. package/dist/react/internal/form-reset.d.ts +2 -0
  176. package/dist/react/internal/form-reset.js +22 -0
  177. package/dist/react/internal/format.d.ts +1 -0
  178. package/dist/react/internal/format.js +14 -0
  179. package/dist/react/internal/link.d.ts +2 -0
  180. package/dist/react/internal/link.js +8 -0
  181. package/dist/react/internal/part.d.ts +20 -0
  182. package/dist/react/internal/part.js +47 -0
  183. package/dist/react/internal/pointer-session.d.ts +8 -0
  184. package/dist/react/internal/pointer-session.js +60 -0
  185. package/dist/react/internal/refs.d.ts +2 -0
  186. package/dist/react/internal/refs.js +22 -0
  187. package/dist/react/internal/rich-text.d.ts +28 -0
  188. package/dist/react/internal/rich-text.js +4 -0
  189. package/dist/react/internal/table-context.d.ts +39 -0
  190. package/dist/react/internal/table-context.js +12 -0
  191. package/dist/react/internal/use-object-url.d.ts +1 -0
  192. package/dist/react/internal/use-object-url.js +15 -0
  193. package/dist/react/layout.css +274 -0
  194. package/dist/react/layout.css.d.ts +1 -0
  195. package/dist/react/models/filter.d.ts +31 -0
  196. package/dist/react/models/filter.js +79 -0
  197. package/dist/react/models/kanban.d.ts +51 -0
  198. package/dist/react/models/kanban.js +35 -0
  199. package/dist/react/models/reorder.d.ts +9 -0
  200. package/dist/react/models/reorder.js +23 -0
  201. package/dist/react/models/table.d.ts +85 -0
  202. package/dist/react/models/table.js +144 -0
  203. package/dist/react/models/tree.d.ts +16 -0
  204. package/dist/react/models/tree.js +26 -0
  205. package/dist/react/provider.d.ts +18 -0
  206. package/dist/react/provider.js +31 -0
  207. package/dist/react/recipes/context-hypercms.d.ts +17 -0
  208. package/dist/react/recipes/context-hypercms.js +71 -0
  209. package/dist/react/recipes/context-quickcrop.d.ts +8 -0
  210. package/dist/react/recipes/context-quickcrop.js +49 -0
  211. package/dist/react/theme.css +8004 -0
  212. package/dist/react/theme.css.d.ts +1 -0
  213. package/examples/README.md +34 -0
  214. package/examples/components/activity-feed.html +28 -0
  215. package/examples/components/app-shell.html +12 -0
  216. package/examples/components/app-toolbar.html +38 -0
  217. package/examples/components/avatar-group.html +27 -0
  218. package/examples/components/breadcrumbs.html +26 -0
  219. package/examples/components/bulk-bar.html +22 -0
  220. package/examples/components/code-block.html +12 -0
  221. package/examples/components/code-editor.html +25 -0
  222. package/examples/components/column-manager.html +9 -0
  223. package/examples/components/combobox.html +13 -0
  224. package/examples/components/context-hypercms.css +41 -0
  225. package/examples/components/context-hypercms.html +40 -0
  226. package/examples/components/context-hypercms.js +62 -0
  227. package/examples/components/context-quickcrop.html +137 -0
  228. package/examples/components/diff-view.html +9 -0
  229. package/examples/components/drawer.html +11 -0
  230. package/examples/components/editable-grid-cells.html +9 -0
  231. package/examples/components/file-browser.html +53 -0
  232. package/examples/components/file-tree.html +34 -0
  233. package/examples/components/files-table.html +80 -0
  234. package/examples/components/filter-builder.html +11 -0
  235. package/examples/components/form-error-summary.html +11 -0
  236. package/examples/components/index.html +51 -0
  237. package/examples/components/inline-edit.html +42 -0
  238. package/examples/components/kanban-board.html +42 -0
  239. package/examples/components/manifest.json +3279 -0
  240. package/examples/components/modal.html +11 -0
  241. package/examples/components/multi-select-picker.html +13 -0
  242. package/examples/components/pagination.html +32 -0
  243. package/examples/components/persistent-action-banner.html +23 -0
  244. package/examples/components/popconfirm.html +13 -0
  245. package/examples/components/popover-menu.html +13 -0
  246. package/examples/components/reference/baseline/DECISIONS.md +85 -0
  247. package/examples/components/reference/baseline/README.md +58 -0
  248. package/examples/components/reference/baseline/bevel-fonts.css +16 -0
  249. package/examples/components/reference/baseline/bevel.css +1339 -0
  250. package/examples/components/reference/baseline/bevel.js +496 -0
  251. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  252. package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  253. package/examples/components/reference/baseline/fonts/LICENSE-newsreader.txt +93 -0
  254. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  255. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  256. package/examples/components/reference/baseline/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  257. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  258. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  259. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  260. package/examples/components/reference/baseline/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  261. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  262. package/examples/components/reference/baseline/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  263. package/examples/components/reference/fable/IMPROVEMENTS.md +106 -0
  264. package/examples/components/reference/fable/PARENT-REPAIRS.md +17 -0
  265. package/examples/components/reference/fable/__pycache__/build_repairs.cpython-311.pyc +0 -0
  266. package/examples/components/reference/fable/__pycache__/kanban.cpython-311.pyc +0 -0
  267. package/examples/components/reference/fable/as-authored/IMPROVEMENTS-completed.md +106 -0
  268. package/examples/components/reference/fable/as-authored/base-astra.css +17 -0
  269. package/examples/components/reference/fable/as-authored/base-parent.css +416 -0
  270. package/examples/components/reference/fable/as-authored/build.py +858 -0
  271. package/examples/components/reference/fable/as-authored/fable.css +823 -0
  272. package/examples/components/reference/fable/as-authored/kanban-completed.css +235 -0
  273. package/examples/components/reference/fable/as-authored/kanban-completed.html +53 -0
  274. package/examples/components/reference/fable/as-authored/kanban-completed.py +212 -0
  275. package/examples/components/reference/fable/as-authored/kanban.py +207 -0
  276. package/examples/components/reference/fable/base-astra.css +17 -0
  277. package/examples/components/reference/fable/base-parent.css +416 -0
  278. package/examples/components/reference/fable/build.py +858 -0
  279. package/examples/components/reference/fable/build_repairs.py +25 -0
  280. package/examples/components/reference/fable/components/activity-feed.html +3 -0
  281. package/examples/components/reference/fable/components/app-toolbar.html +3 -0
  282. package/examples/components/reference/fable/components/avatar-group.html +4 -0
  283. package/examples/components/reference/fable/components/breadcrumbs.html +3 -0
  284. package/examples/components/reference/fable/components/code-block.html +9 -0
  285. package/examples/components/reference/fable/components/column-manager.html +3 -0
  286. package/examples/components/reference/fable/components/combobox.html +6 -0
  287. package/examples/components/reference/fable/components/context-hypercms.html +3 -0
  288. package/examples/components/reference/fable/components/context-quickcrop.html +4 -0
  289. package/examples/components/reference/fable/components/diff-view.html +13 -0
  290. package/examples/components/reference/fable/components/drawer.html +3 -0
  291. package/examples/components/reference/fable/components/editable-grid-cells.html +3 -0
  292. package/examples/components/reference/fable/components/filter-builder.html +3 -0
  293. package/examples/components/reference/fable/components/form-error-summary.html +4 -0
  294. package/examples/components/reference/fable/components/inline-edit.html +3 -0
  295. package/examples/components/reference/fable/components/kanban-board.html +53 -0
  296. package/examples/components/reference/fable/components/modal.html +3 -0
  297. package/examples/components/reference/fable/components/multi-select-picker.html +5 -0
  298. package/examples/components/reference/fable/components/pagination.html +3 -0
  299. package/examples/components/reference/fable/components/persistent-action-banner.html +4 -0
  300. package/examples/components/reference/fable/components/popconfirm.html +5 -0
  301. package/examples/components/reference/fable/components/popover-menu.html +3 -0
  302. package/examples/components/reference/fable/components/rich-text-toolbar.html +3 -0
  303. package/examples/components/reference/fable/components/save-status-indicator.html +2 -0
  304. package/examples/components/reference/fable/components/selectable-cards.html +3 -0
  305. package/examples/components/reference/fable/components/settings-rows.html +3 -0
  306. package/examples/components/reference/fable/components/sidebar-nav.html +4 -0
  307. package/examples/components/reference/fable/components/small-charts.html +5 -0
  308. package/examples/components/reference/fable/components/split-button.html +4 -0
  309. package/examples/components/reference/fable/components/split-panes.html +8 -0
  310. package/examples/components/reference/fable/components/stat-tiles.html +3 -0
  311. package/examples/components/reference/fable/components/toast-stack.html +5 -0
  312. package/examples/components/reference/fable/components/tree-view.html +4 -0
  313. package/examples/components/reference/fable/components/upload-dropzone.html +6 -0
  314. package/examples/components/reference/fable/components/wizard-shell.html +3 -0
  315. package/examples/components/reference/fable/coverage.json +414 -0
  316. package/examples/components/reference/fable/fable.css +823 -0
  317. package/examples/components/reference/fable/index.html +5 -0
  318. package/examples/components/reference/fable/kanban.css +237 -0
  319. package/examples/components/reference/fable/kanban.py +212 -0
  320. package/examples/components/reference/fable/parent-repairs.css +9 -0
  321. package/examples/components/reference/fixtures/data.json +102 -0
  322. package/examples/components/reference/fixtures/host.js +47 -0
  323. package/examples/components/reference/fixtures/static-host.js +39 -0
  324. package/examples/components/reference/fixtures/workspace.jpg +0 -0
  325. package/examples/components/reference/parent/CHANGES.md +179 -0
  326. package/examples/components/reference/parent/__pycache__/kanban.cpython-311.pyc +0 -0
  327. package/examples/components/reference/parent/base-astra.css +17 -0
  328. package/examples/components/reference/parent/base-parent.css +416 -0
  329. package/examples/components/reference/parent/build.py +148 -0
  330. package/examples/components/reference/parent/components/activity-feed.html +2 -0
  331. package/examples/components/reference/parent/components/app-toolbar.html +2 -0
  332. package/examples/components/reference/parent/components/avatar-group.html +4 -0
  333. package/examples/components/reference/parent/components/breadcrumbs.html +2 -0
  334. package/examples/components/reference/parent/components/code-block.html +8 -0
  335. package/examples/components/reference/parent/components/column-manager.html +2 -0
  336. package/examples/components/reference/parent/components/combobox.html +6 -0
  337. package/examples/components/reference/parent/components/context-hypercms.html +2 -0
  338. package/examples/components/reference/parent/components/context-quickcrop.html +4 -0
  339. package/examples/components/reference/parent/components/diff-view.html +4 -0
  340. package/examples/components/reference/parent/components/drawer.html +2 -0
  341. package/examples/components/reference/parent/components/editable-grid-cells.html +2 -0
  342. package/examples/components/reference/parent/components/filter-builder.html +2 -0
  343. package/examples/components/reference/parent/components/form-error-summary.html +2 -0
  344. package/examples/components/reference/parent/components/inline-edit.html +2 -0
  345. package/examples/components/reference/parent/components/kanban-board.html +84 -0
  346. package/examples/components/reference/parent/components/modal.html +2 -0
  347. package/examples/components/reference/parent/components/multi-select-picker.html +5 -0
  348. package/examples/components/reference/parent/components/pagination.html +2 -0
  349. package/examples/components/reference/parent/components/persistent-action-banner.html +4 -0
  350. package/examples/components/reference/parent/components/popconfirm.html +5 -0
  351. package/examples/components/reference/parent/components/popover-menu.html +2 -0
  352. package/examples/components/reference/parent/components/rich-text-toolbar.html +2 -0
  353. package/examples/components/reference/parent/components/save-status-indicator.html +2 -0
  354. package/examples/components/reference/parent/components/selectable-cards.html +2 -0
  355. package/examples/components/reference/parent/components/settings-rows.html +2 -0
  356. package/examples/components/reference/parent/components/sidebar-nav.html +4 -0
  357. package/examples/components/reference/parent/components/small-charts.html +2 -0
  358. package/examples/components/reference/parent/components/split-button.html +5 -0
  359. package/examples/components/reference/parent/components/split-panes.html +8 -0
  360. package/examples/components/reference/parent/components/stat-tiles.html +2 -0
  361. package/examples/components/reference/parent/components/toast-stack.html +5 -0
  362. package/examples/components/reference/parent/components/tree-view.html +4 -0
  363. package/examples/components/reference/parent/components/upload-dropzone.html +6 -0
  364. package/examples/components/reference/parent/components/wizard-shell.html +2 -0
  365. package/examples/components/reference/parent/coverage.json +414 -0
  366. package/examples/components/reference/parent/index.html +1 -0
  367. package/examples/components/reference/parent/kanban.css +114 -0
  368. package/examples/components/reference/parent/kanban.py +55 -0
  369. package/examples/components/reference/parent/refinement.css +53 -0
  370. package/examples/components/reference/selected/build.py +70 -0
  371. package/examples/components/reference/selected/components/activity-feed.html +3 -0
  372. package/examples/components/reference/selected/components/app-toolbar.html +3 -0
  373. package/examples/components/reference/selected/components/avatar-group.html +4 -0
  374. package/examples/components/reference/selected/components/breadcrumbs.html +3 -0
  375. package/examples/components/reference/selected/components/code-block.html +9 -0
  376. package/examples/components/reference/selected/components/column-manager.html +3 -0
  377. package/examples/components/reference/selected/components/combobox.html +6 -0
  378. package/examples/components/reference/selected/components/context-hypercms.html +3 -0
  379. package/examples/components/reference/selected/components/context-quickcrop.html +4 -0
  380. package/examples/components/reference/selected/components/diff-view.html +13 -0
  381. package/examples/components/reference/selected/components/drawer.html +3 -0
  382. package/examples/components/reference/selected/components/editable-grid-cells.html +3 -0
  383. package/examples/components/reference/selected/components/filter-builder.html +3 -0
  384. package/examples/components/reference/selected/components/form-error-summary.html +4 -0
  385. package/examples/components/reference/selected/components/inline-edit.html +3 -0
  386. package/examples/components/reference/selected/components/kanban-board.html +53 -0
  387. package/examples/components/reference/selected/components/modal.html +2 -0
  388. package/examples/components/reference/selected/components/multi-select-picker.html +5 -0
  389. package/examples/components/reference/selected/components/pagination.html +3 -0
  390. package/examples/components/reference/selected/components/persistent-action-banner.html +4 -0
  391. package/examples/components/reference/selected/components/popconfirm.html +5 -0
  392. package/examples/components/reference/selected/components/popover-menu.html +3 -0
  393. package/examples/components/reference/selected/components/rich-text-toolbar.html +3 -0
  394. package/examples/components/reference/selected/components/save-status-indicator.html +2 -0
  395. package/examples/components/reference/selected/components/selectable-cards.html +3 -0
  396. package/examples/components/reference/selected/components/settings-rows.html +3 -0
  397. package/examples/components/reference/selected/components/sidebar-nav.html +4 -0
  398. package/examples/components/reference/selected/components/small-charts.html +5 -0
  399. package/examples/components/reference/selected/components/split-button.html +4 -0
  400. package/examples/components/reference/selected/components/split-panes.html +8 -0
  401. package/examples/components/reference/selected/components/stat-tiles.html +3 -0
  402. package/examples/components/reference/selected/components/toast-stack.html +5 -0
  403. package/examples/components/reference/selected/components/tree-view.html +4 -0
  404. package/examples/components/reference/selected/components/upload-dropzone.html +6 -0
  405. package/examples/components/reference/selected/components/wizard-shell.html +3 -0
  406. package/examples/components/reference/selected/corrections.css +11 -0
  407. package/examples/components/reference/selected/coverage.json +413 -0
  408. package/examples/components/reference/selected/gallery-build.mjs +49 -0
  409. package/examples/components/reference/selected/gallery-spec.json +12 -0
  410. package/examples/components/reference/selected/index.html +1 -0
  411. package/examples/components/reference/selected/kanban-comparison.json +6 -0
  412. package/examples/components/reference/selected/manifest.json +476 -0
  413. package/examples/components/reference/sha256.json +142 -0
  414. package/examples/components/reference/sources/diagonal-close.svg +1 -0
  415. package/examples/components/reference/sources/hyperclay/public-assets/css/hyperclay-app-source.css +614 -0
  416. package/examples/components/reference/sources/hyperclay/public-assets/js/app.js +94 -0
  417. package/examples/components/reference/sources/hyperclayjs/src/ui/theModal.js +897 -0
  418. package/examples/components/reference/sources/hypercms/scripts/build-theme.js +203 -0
  419. package/examples/components/reference/sources/hypercms/src/anchor.js +24 -0
  420. package/examples/components/reference/sources/hypercms/src/apply-loop.js +167 -0
  421. package/examples/components/reference/sources/hypercms/src/diagnostics.js +44 -0
  422. package/examples/components/reference/sources/hypercms/src/enhance.js +173 -0
  423. package/examples/components/reference/sources/hypercms/src/events.js +955 -0
  424. package/examples/components/reference/sources/hypercms/src/form-builder.js +518 -0
  425. package/examples/components/reference/sources/hypercms/src/form-rules.js +208 -0
  426. package/examples/components/reference/sources/hypercms/src/hooks.js +100 -0
  427. package/examples/components/reference/sources/hypercms/src/hypercms-bundle.js +10 -0
  428. package/examples/components/reference/sources/hypercms/src/hypercms.js +347 -0
  429. package/examples/components/reference/sources/hypercms/src/morph.js +10 -0
  430. package/examples/components/reference/sources/hypercms/src/path.js +61 -0
  431. package/examples/components/reference/sources/hypercms/src/place.js +131 -0
  432. package/examples/components/reference/sources/hypercms/src/platform.js +131 -0
  433. package/examples/components/reference/sources/hypercms/src/refresh.js +87 -0
  434. package/examples/components/reference/sources/hypercms/src/richclay-bridge.js +140 -0
  435. package/examples/components/reference/sources/hypercms/src/row-identity.js +111 -0
  436. package/examples/components/reference/sources/hypercms/src/scaffold.js +10 -0
  437. package/examples/components/reference/sources/hypercms/src/session.js +303 -0
  438. package/examples/components/reference/sources/hypercms/src/shell.js +248 -0
  439. package/examples/components/reference/sources/hypercms/src/styles.css +298 -0
  440. package/examples/components/reference/sources/hypercms/src/targets.js +144 -0
  441. package/examples/components/reference/sources/hypercms/src/templates.js +656 -0
  442. package/examples/components/reference/sources/hypercms/src/theme/pixel-quiet.overrides.css +761 -0
  443. package/examples/components/reference/sources/hypercms/src/theme.generated.css +1772 -0
  444. package/examples/components/reference/sources/hypercms/src/toggle.js +666 -0
  445. package/examples/components/reference/sources/hypercms/src/unresolved.js +211 -0
  446. package/examples/components/reference/sources/hypercms/src/vendor/mirk.vendor.js +212 -0
  447. package/examples/components/reference/sources/hypercms/src/views/inline-layer.js +421 -0
  448. package/examples/components/reference/sources/hypercms/src/views/inline.js +1072 -0
  449. package/examples/components/reference/sources/hypercms/src/views/sidebar.js +97 -0
  450. package/examples/components/reference/sources/modal-reference.html +301 -0
  451. package/examples/components/reference/sources/quickcrop/quickcrop.css +124 -0
  452. package/examples/components/reference/sources/quickcrop/quickcrop.js +400 -0
  453. package/examples/components/reference/sources/richclay/richclay.css +416 -0
  454. package/examples/components/reference/sources/richclay/richclay.js +2962 -0
  455. package/examples/components/reference/sources/richclay/src/a11y.js +67 -0
  456. package/examples/components/reference/sources/richclay/src/browser-global.js +7 -0
  457. package/examples/components/reference/sources/richclay/src/buttons.js +254 -0
  458. package/examples/components/reference/sources/richclay/src/hyperclay.js +470 -0
  459. package/examples/components/reference/sources/richclay/src/normalize.js +380 -0
  460. package/examples/components/reference/sources/richclay/src/richclay.js +1356 -0
  461. package/examples/components/reference/sources/richclay/src/sanitize.js +189 -0
  462. package/examples/components/reference/sources/richclay/src/styles.js +23 -0
  463. package/examples/components/reference/sources/richclay/src/toolbar-float.js +175 -0
  464. package/examples/components/reference/sources/richclay/src/toolbar.js +394 -0
  465. package/examples/components/reference/sources/richclay/src/vendor-bundle.js +15 -0
  466. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  467. package/examples/components/reference/sources/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  468. package/examples/components/reference/sources/richclay/vendor/SQUIRE-LICENSE +21 -0
  469. package/examples/components/reference/sources/richclay/vendor/purify.es.mjs +2249 -0
  470. package/examples/components/reference/sources/richclay/vendor/purify.min.js +3 -0
  471. package/examples/components/reference/sources/richclay/vendor/squire.js +22 -0
  472. package/examples/components/reference/sources/richclay/vendor/squire.mjs +22 -0
  473. package/examples/components/reference/sources/richclay/vendor/squire.provenance.json +19 -0
  474. package/examples/components/rich-text-toolbar.html +43 -0
  475. package/examples/components/save-status-indicator.html +11 -0
  476. package/examples/components/selectable-cards.html +9 -0
  477. package/examples/components/settings-rows.html +10 -0
  478. package/examples/components/sidebar-nav.html +9 -0
  479. package/examples/components/small-charts.html +21 -0
  480. package/examples/components/split-button.html +13 -0
  481. package/examples/components/split-panes-editor.html +6 -0
  482. package/examples/components/split-panes.html +9 -0
  483. package/examples/components/stat-tiles.html +23 -0
  484. package/examples/components/toast-stack.html +21 -0
  485. package/examples/components/tree-view.html +9 -0
  486. package/examples/components/upload-dropzone.html +88 -0
  487. package/examples/components/wizard-shell.html +50 -0
  488. package/examples/datastar/index.html +38 -0
  489. package/examples/datastar/server.mjs +31 -0
  490. package/examples/fixtures/field-guide.pdf +14 -0
  491. package/examples/fixtures/workspace.jpg +0 -0
  492. package/examples/setup-peers.mjs +35 -0
  493. package/fonts/LICENSE-ibm-plex-mono.txt +93 -0
  494. package/fonts/LICENSE-ibm-plex-sans.txt +93 -0
  495. package/fonts/LICENSE-newsreader.txt +93 -0
  496. package/fonts/ibm-plex-mono-latin-400-normal.woff2 +0 -0
  497. package/fonts/ibm-plex-mono-latin-500-normal.woff2 +0 -0
  498. package/fonts/ibm-plex-mono-latin-600-normal.woff2 +0 -0
  499. package/fonts/ibm-plex-sans-latin-400-italic.woff2 +0 -0
  500. package/fonts/ibm-plex-sans-latin-400-normal.woff2 +0 -0
  501. package/fonts/ibm-plex-sans-latin-500-normal.woff2 +0 -0
  502. package/fonts/ibm-plex-sans-latin-600-normal.woff2 +0 -0
  503. package/fonts/newsreader-latin-opsz-italic.woff2 +0 -0
  504. package/fonts/newsreader-latin-opsz-normal.woff2 +0 -0
  505. package/icons/LICENSE +21 -0
  506. package/icons/house.json +71 -0
  507. package/icons/icons.d.ts +17 -0
  508. package/icons/icons.js +648 -0
  509. package/icons/icons.svg +126 -0
  510. package/icons/marks/build-tray.source.mjs +45 -0
  511. package/icons/marks/hyperclay-local.svg +11 -0
  512. package/icons/phosphor.json +53 -0
  513. package/icons/round.json +8 -0
  514. package/integrations/datastar.js +202 -0
  515. package/integrations/quickcrop.css +26 -0
  516. package/integrations/quickcrop.js +56 -0
  517. package/integrations/richclay.css +100 -0
  518. package/integrations/richclay.js +131 -0
  519. package/package.json +630 -0
  520. package/react/README.md +244 -0
  521. package/src/README.md +83 -0
  522. package/vendor/datastar/datastar-1.0.3.js +10 -0
  523. package/vendor/datastar/provenance.json +6 -0
  524. package/vendor/floating-ui/LICENSE-core +20 -0
  525. package/vendor/floating-ui/LICENSE-dom +20 -0
  526. package/vendor/floating-ui/floating-ui.core.umd.min.js +1 -0
  527. package/vendor/floating-ui/floating-ui.dom.umd.min.js +1 -0
  528. package/vendor/floating-ui/provenance.json +17 -0
  529. package/vendor/richclay/LICENSE +16 -0
  530. package/vendor/richclay/THIRD-PARTY-NOTICES.md +45 -0
  531. package/vendor/richclay/provenance.json +17 -0
  532. package/vendor/richclay/richclay.css +404 -0
  533. package/vendor/richclay/richclay.js +2940 -0
  534. package/vendor/richclay/vendor/DOMPURIFY-LICENSE +202 -0
  535. package/vendor/richclay/vendor/DOMPURIFY-LICENSE-MPL +373 -0
  536. package/vendor/richclay/vendor/SQUIRE-LICENSE +21 -0
  537. package/vendor/richclay/vendor/purify.min.js +3 -0
  538. package/vendor/richclay/vendor/squire.js +22 -0
  539. package/vendor/richclay/vendor/squire.provenance.json +30 -0
package/examples/components/reference/fable/index.html ADDED
@@ -0,0 +1,5 @@
1
+ <!doctype html><html lang="en" class="light"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fable seat · Bevel components</title>
2
+ <link rel="stylesheet" href="../baseline/bevel-fonts.css"><link rel="stylesheet" href="../baseline/bevel.css">
3
+ <style>body{max-width:1040px;margin:40px auto;padding:24px;font:15px/1.5 var(--bevel-font-sans)}.kicker{font:11px var(--bevel-font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bevel-brass);margin-bottom:12px}h1{font:400 42px/1.05 var(--bevel-font-serif);letter-spacing:-.02em;margin:0 0 12px}p{color:var(--bevel-ink-2);max-width:60ch;margin:0 0 28px}h2{font:400 22px var(--bevel-font-serif);margin:36px 0 12px}nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--bevel-line-2);border:1px solid var(--bevel-line-2)}a{display:block;padding:16px 18px;background:var(--bevel-surface);color:var(--bevel-ink);text-decoration:none}a:hover{background:var(--bevel-sunk)}strong{display:block;font-weight:500}small{display:block;color:var(--bevel-muted);font:11px var(--bevel-font-mono);margin-top:6px}.foot{margin-top:32px;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}</style>
4
+ <div class="kicker">Bevel · Fable seat · Static refinement</div><h1>Every component, one more pass.</h1><p>Thirty-three static components and two product contexts, built from the selected references and refined for proportion, contrast and detail. Open any component and use the preview controls to switch states and colour modes.</p>
5
+ <h2>Components</h2><nav><a href="components/modal.html"><strong>Modal</strong><small>overlays · 4 states</small></a><a href="components/popover-menu.html"><strong>Popover menu</strong><small>overlays · 2 states</small></a><a href="components/drawer.html"><strong>Drawer</strong><small>overlays · 3 states</small></a><a href="components/popconfirm.html"><strong>Popconfirm</strong><small>overlays · 3 states</small></a><a href="components/combobox.html"><strong>Combobox</strong><small>pickers · 4 states</small></a><a href="components/multi-select-picker.html"><strong>Multi-select picker</strong><small>pickers · 3 states</small></a><a href="components/selectable-cards.html"><strong>Selectable cards</strong><small>pickers · 2 states</small></a><a href="components/upload-dropzone.html"><strong>Upload dropzone</strong><small>forms · 4 states</small></a><a href="components/inline-edit.html"><strong>Inline edit</strong><small>forms · 4 states</small></a><a href="components/settings-rows.html"><strong>Settings rows</strong><small>forms · 2 states</small></a><a href="components/form-error-summary.html"><strong>Form error summary</strong><small>forms · 2 states</small></a><a href="components/split-button.html"><strong>Split button</strong><small>forms · 5 states</small></a><a href="components/sidebar-nav.html"><strong>Sidebar nav</strong><small>navigation · 2 states</small></a><a href="components/app-toolbar.html"><strong>App toolbar</strong><small>navigation · 2 states</small></a><a href="components/breadcrumbs.html"><strong>Breadcrumbs</strong><small>navigation · 2 states</small></a><a href="components/pagination.html"><strong>Pagination</strong><small>navigation · 3 states</small></a><a href="components/tree-view.html"><strong>Tree view</strong><small>navigation · 2 states</small></a><a href="components/wizard-shell.html"><strong>Wizard shell</strong><small>navigation · 3 states</small></a><a href="components/toast-stack.html"><strong>Toast stack</strong><small>feedback · 3 states</small></a><a href="components/persistent-action-banner.html"><strong>Persistent action banner</strong><small>feedback · 2 states</small></a><a href="components/save-status-indicator.html"><strong>Save-status indicator</strong><small>feedback · 1 states</small></a><a href="components/code-block.html"><strong>Code block</strong><small>display · 2 states</small></a><a href="components/diff-view.html"><strong>Diff view</strong><small>display · 2 states</small></a><a href="components/activity-feed.html"><strong>Activity feed</strong><small>display · 2 states</small></a><a href="components/stat-tiles.html"><strong>Stat tiles</strong><small>display · 2 states</small></a><a href="components/avatar-group.html"><strong>Avatar group</strong><small>display · 2 states</small></a><a href="components/small-charts.html"><strong>Small charts</strong><small>display · 3 states</small></a><a href="components/filter-builder.html"><strong>Filter builder</strong><small>grid · 2 states</small></a><a href="components/column-manager.html"><strong>Column manager</strong><small>grid · 2 states</small></a><a href="components/editable-grid-cells.html"><strong>Editable grid cells</strong><small>grid · 3 states</small></a><a href="components/split-panes.html"><strong>Split panes</strong><small>workspaces · 2 states</small></a><a href="components/rich-text-toolbar.html"><strong>Rich text toolbar</strong><small>workspaces · 4 states</small></a><a href="components/kanban-board.html"><strong>Kanban board</strong><small>workspaces · 3 states</small></a></nav><h2>Contexts</h2><nav><a href="components/context-hypercms.html"><strong>HyperCMS inspector</strong><small>context · 2 states</small></a><a href="components/context-quickcrop.html"><strong>Quickcrop upload and crop</strong><small>context · 2 states</small></a></nav><p class="foot">Regenerate with <code>python3 build.py</code>. Notes in IMPROVEMENTS.md.</p></html>
package/examples/components/reference/fable/kanban.css ADDED
@@ -0,0 +1,237 @@
1
+ /* kanban.css — Fable's independent Kanban board. Four open lanes drawn on
2
+ the ground with a ruled top edge instead of lane containers, dense sans
3
+ cards, the blocking dependency shown on both ends, an aggregate tape, a
4
+ filter bar and a task panel that pushes the board into a scrollable strip.
5
+ Loads after fable.css. Every colour is a Bevel token. */
6
+
7
+ /* ------------------------------ frame ------------------------------ */
8
+ .kb{--kb-lane:248px;--kb-gap:18px;padding:26px 32px 24px;min-height:580px;font-size:13.5px;line-height:1.45;color:var(--bevel-ink);background:var(--bevel-ground)}
9
+ .kb svg{flex-shrink:0}
10
+ .kb h1,.kb h2,.kb h3,.kb h4,.kb p{margin:0}
11
+ .kb .kb-people{display:inline-flex}
12
+ .kb .kb-people .f-avatar{box-shadow:0 0 0 2px var(--bevel-ground)}
13
+ .kb .kb-people .f-avatar+.f-avatar{margin-left:-7px}
14
+ .kb-spacer{flex:1}
15
+ .kb-icon{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;background:none;color:var(--bevel-muted);cursor:pointer}
16
+ .kb-icon:hover{color:var(--bevel-ink);background:var(--bevel-sunk);border-color:var(--bevel-line)}
17
+ .kb-id{font:500 11px/1 var(--bevel-font-mono);letter-spacing:.04em;color:var(--bevel-muted)}
18
+
19
+ /* ---------------------------- masthead ----------------------------- */
20
+ .kb-mast{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:18px;border-bottom:2px solid var(--bevel-ink)}
21
+ .kb-kicker{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--bevel-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bevel-brass);margin-bottom:12px}
22
+ .kb-kicker i{font-style:normal;color:var(--bevel-faint)}
23
+ .kb-mast h1{font:400 40px/1 var(--bevel-font-serif);letter-spacing:-.024em}
24
+ .kb-mast-title p{margin-top:10px;font-size:14px;color:var(--bevel-ink-2);max-width:54ch}
25
+ .kb-mast-side{display:flex;align-items:center;gap:10px;flex-shrink:0;padding-bottom:2px}
26
+ .kb-team{display:flex;align-items:center;gap:10px;margin-right:8px}
27
+ .kb-team small{font:11px var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
28
+ .kb .bevel-button{white-space:nowrap}
29
+
30
+ /* ------------------------------ views ------------------------------ */
31
+ .kb-views{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--bevel-line-2)}
32
+ .kb-views a{display:inline-flex;align-items:center;gap:7px;padding:13px 12px 11px;margin-bottom:-1px;font-size:13.5px;color:var(--bevel-ink-2);text-decoration:none;border-bottom:2px solid transparent}
33
+ .kb-views a b{font:500 10.5px/1 var(--bevel-font-mono);padding:3px 5px;background:var(--bevel-sunk);color:var(--bevel-muted)}
34
+ .kb-views a[aria-current="page"]{color:var(--bevel-ink);border-bottom-color:var(--bevel-brass)}
35
+ .kb-views a[aria-current="page"] b{background:var(--bevel-brass-soft);color:var(--bevel-brass)}
36
+ .kb-views a[aria-current="page"] svg{color:var(--bevel-brass)}
37
+ .kb-views-note{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:11px var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
38
+
39
+ /* ------------------------------ tools ------------------------------ */
40
+ .kb-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0 0}
41
+ .kb-search{display:flex;align-items:center;gap:8px;flex:0 1 250px;min-width:180px;height:32px;padding:0 8px 0 10px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:inset 0 1px 0 var(--bevel-edge-in);color:var(--bevel-muted)}
42
+ .kb-search input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:13.5px;color:var(--bevel-ink)}
43
+ .kb-search input::placeholder{color:var(--bevel-muted)}
44
+ .kb-search kbd{border-color:var(--bevel-line);background:var(--bevel-sunk)}
45
+ .kb-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;font-size:12.5px;font-weight:500;color:var(--bevel-ink-2);background:var(--bevel-face);border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);cursor:pointer;white-space:nowrap}
46
+ .kb-chip:hover{background:color-mix(in srgb,var(--bevel-face),var(--bevel-edge-hi) 45%)}
47
+ .kb-chip[aria-pressed="true"]{color:var(--bevel-ink);background:var(--bevel-face-in);border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in)}
48
+ .kb-chip[aria-pressed="true"] svg:first-child{color:var(--bevel-brass)}
49
+ .kb-chip[aria-pressed="true"] svg:last-child{color:var(--bevel-muted);margin-left:2px}
50
+ .kb-chip-quiet{background:none;border-color:transparent;color:var(--bevel-muted);font-weight:400}
51
+ .kb-chip-quiet:hover{background:var(--bevel-sunk);border-color:transparent;color:var(--bevel-ink)}
52
+
53
+ /* ------------------------------- tape ------------------------------ */
54
+ .kb-tape{display:flex;align-items:stretch;margin:14px 0 0;padding:0;border-top:1px solid var(--bevel-line);border-bottom:1px solid var(--bevel-line)}
55
+ .kb-tape>div{display:flex;flex-direction:column;gap:5px;padding:10px 18px 11px 0;margin-right:18px;border-right:1px solid var(--bevel-line)}
56
+ .kb-tape>div:last-child{border-right:0;margin-right:0}
57
+ .kb-tape dt{font:500 10px/1 var(--bevel-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bevel-muted)}
58
+ .kb-tape dd{margin:0;font:400 22px/1 var(--bevel-font-serif);letter-spacing:-.01em;color:var(--bevel-ink)}
59
+ .kb-tape dd small{font:11px var(--bevel-font-mono);color:var(--bevel-muted);margin-left:5px}
60
+ .kb-tape dd[data-tone="ox"]{color:var(--bevel-ox)}
61
+ .kb-tape-meter{flex:1;min-width:160px}
62
+ .kb-tape-meter dd{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--bevel-font-mono);color:var(--bevel-ink-2);padding-top:6px}
63
+ .kb-tape-meter .kb-check-bar{flex:1;height:8px}
64
+
65
+ /* ---------------------------- empty note --------------------------- */
66
+ .kb-empty-note{margin-top:16px;padding:12px 14px;font-size:13.5px;color:var(--bevel-ink-2);background:var(--bevel-sunk);border-left:3px solid var(--bevel-brass)}
67
+ .kb-empty-note strong{font-weight:500;color:var(--bevel-ink)}
68
+
69
+ /* ------------------------------- work ------------------------------ */
70
+ .kb-work{display:flex;align-items:flex-start;gap:0;margin-top:22px}
71
+ .kb-board{display:grid;grid-template-columns:repeat(4,minmax(var(--kb-lane),1fr));gap:0 var(--kb-gap);flex:1;min-width:0;align-items:start}
72
+ .kb-board:focus-visible{outline:2px solid var(--bevel-brass);outline-offset:6px}
73
+
74
+ /* lanes: no containers, a ruled head on the ground */
75
+ .kb-lane{min-width:0}
76
+ .kb-lane-head{display:flex;align-items:center;gap:8px;padding:0 0 10px;border-bottom:1px solid var(--bevel-ink);margin-bottom:12px}
77
+ .kb-lane-head h2{font:500 13.5px/1 var(--bevel-font-sans);letter-spacing:.01em;color:var(--bevel-ink)}
78
+ .kb-lane-mark{width:8px;height:8px;background:var(--bevel-faint)}
79
+ .kb-lane-mark[data-lane="next"]{background:var(--bevel-brass)}
80
+ .kb-lane-mark[data-lane="progress"]{background:var(--bevel-teal)}
81
+ .kb-lane-mark[data-lane="done"]{background:var(--bevel-ink)}
82
+ .kb-count{font:500 11px/1 var(--bevel-font-mono);padding:4px 6px;background:var(--bevel-sunk);color:var(--bevel-ink-2);border:1px solid var(--bevel-line)}
83
+ .kb-wip{font:500 10px/1 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bevel-muted);white-space:nowrap}
84
+ .kb-wip[data-full="true"]{color:var(--bevel-ox)}
85
+ .kb-lane-head .kb-icon{margin-left:auto;width:24px;height:24px}
86
+ .kb-lane-body{display:flex;flex-direction:column;gap:10px}
87
+ .kb-add{display:flex;align-items:center;gap:6px;width:100%;padding:8px 10px;border:1px dashed var(--bevel-line-2);background:none;color:var(--bevel-muted);font-size:12.5px;cursor:pointer;text-align:left}
88
+ .kb-add:hover{color:var(--bevel-ink);border-color:var(--bevel-muted);background:var(--bevel-sunk)}
89
+
90
+ /* cards */
91
+ .kb-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:12px 13px 11px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-bottom-color:color-mix(in srgb,var(--bevel-line-2) 60%,var(--bevel-ink));box-shadow:var(--bevel-shadow)}
92
+ .kb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
93
+ .kb-card h3{font:500 14px/1.3 var(--bevel-font-sans);letter-spacing:-.005em;color:var(--bevel-ink)}
94
+ .kb-desc{font-size:12.5px;line-height:1.45;color:var(--bevel-ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
95
+ .kb-labels{display:flex;flex-wrap:wrap;gap:5px}
96
+ .kb-label{display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 6px;font:500 10.5px/1.4 var(--bevel-font-mono);letter-spacing:.03em;color:var(--bevel-ink-2);background:var(--tone-soft,var(--bevel-sunk));border:1px solid color-mix(in srgb,var(--tone,var(--bevel-muted)) 26%,var(--tone-soft,var(--bevel-sunk)))}
97
+ .kb-label::before{content:"";width:6px;height:6px;background:var(--tone,var(--bevel-muted))}
98
+ .kb-label[data-label="design"]{--tone:var(--bevel-brass);--tone-soft:var(--bevel-brass-soft)}
99
+ .kb-label[data-label="editorial"]{--tone:var(--bevel-teal);--tone-soft:var(--bevel-teal-soft)}
100
+ .kb-label[data-label="engineering"]{--tone:var(--bevel-ink-2);--tone-soft:var(--bevel-sunk)}
101
+ .kb-label[data-label="launch"]{--tone:var(--bevel-ox);--tone-soft:var(--bevel-ox-soft)}
102
+ .kb-label[data-label="studio"]{--tone:var(--bevel-ink);--tone-soft:var(--bevel-sunk)}
103
+ .kb-priority{display:inline-flex;align-items:center;gap:4px;font:500 10.5px/1 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bevel-muted)}
104
+ .kb-priority[data-priority="high"]{color:var(--bevel-brass)}
105
+ .kb-priority[data-priority="urgent"]{color:var(--bevel-ox-ink);background:var(--bevel-ox);padding:3px 6px 3px 5px}
106
+ .kb-priority[data-priority="urgent"] svg{color:var(--bevel-ox-ink)}
107
+ .kb-priority[data-priority="normal"] svg{display:none}
108
+ .kb-cover{margin:-12px -13px 2px;border-bottom:1px solid var(--bevel-line-2);position:relative}
109
+ .kb-cover img{display:block;width:100%;height:84px;object-fit:cover}
110
+ .kb-cover figcaption{position:absolute;left:8px;bottom:8px;padding:2px 6px;font:500 10px/1.4 var(--bevel-font-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--bevel-ink);color:var(--bevel-ground)}
111
+ .kb-dep{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:11.5px;line-height:1.3;color:var(--bevel-ink-2);background:var(--bevel-sunk);border-left:2px solid var(--bevel-muted)}
112
+ .kb-dep b{font-weight:500;font-family:var(--bevel-font-mono);font-size:11px;color:var(--bevel-ink)}
113
+ .kb-dep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
114
+ .kb-dep.is-blocked{color:var(--bevel-ox);background:var(--bevel-ox-soft);border-left-color:var(--bevel-ox)}
115
+ .kb-dep.is-blocked b{color:var(--bevel-ox)}
116
+ .kb-check{display:flex;align-items:center;gap:8px}
117
+ .kb-check-bar{display:block;flex:1;height:5px;background:var(--bevel-sunk);border:1px solid var(--bevel-line);font-style:normal}
118
+ .kb-check-bar b{display:block;height:100%;background:var(--bevel-teal)}
119
+ .kb-check-count{font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-muted)}
120
+ .kb-card-foot{display:flex;align-items:center;gap:10px;margin-top:2px;padding-top:9px;border-top:1px solid var(--bevel-line)}
121
+ .kb-due{display:inline-flex;align-items:center;gap:5px;font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-muted);white-space:nowrap}
122
+ .kb-due[data-due="today"]{color:var(--bevel-brass)}
123
+ .kb-due[data-due="overdue"]{color:var(--bevel-ox)}
124
+ .kb-due[data-due="done"]{color:var(--bevel-teal)}
125
+ .kb-meta{display:inline-flex;gap:9px;margin-left:auto}
126
+ .kb-meta span{display:inline-flex;align-items:center;gap:4px;font:11px/1 var(--bevel-font-mono);color:var(--bevel-muted)}
127
+ .kb-card-foot .kb-people .f-avatar{width:22px;height:22px;font-size:8.5px}
128
+ .kb-card-foot .kb-people .f-avatar+.f-avatar{margin-left:-6px}
129
+
130
+ /* card states */
131
+ .kb-card.is-blocked{border-left:3px solid var(--bevel-ox);padding-left:11px}
132
+ .kb-card.is-blocked .kb-cover{margin-left:-11px}
133
+ .kb-card.is-done{background:var(--bevel-ground);box-shadow:none;border-color:var(--bevel-line)}
134
+ .kb-card.is-done h3{color:var(--bevel-ink-2);text-decoration:line-through;text-decoration-color:var(--bevel-faint);text-decoration-thickness:1px}
135
+ .kb-card.is-done .kb-check-bar b{background:var(--bevel-muted)}
136
+ .kb-card.is-selected{border-color:var(--bevel-brass);border-top:3px solid var(--bevel-brass);padding-top:10px;box-shadow:0 0 0 1px var(--bevel-brass),var(--bevel-shadow)}
137
+ .kb-card.is-selected.is-blocked{border-left-color:var(--bevel-ox)}
138
+
139
+ /* empty lane */
140
+ .kb-lane-empty{padding:18px 14px 20px;border:1px dashed var(--bevel-line-2);color:var(--bevel-muted);text-align:left}
141
+ .kb-lane-empty strong{display:block;font:500 13.5px/1.3 var(--bevel-font-sans);color:var(--bevel-ink-2)}
142
+ .kb-lane-empty p{margin-top:5px;font-size:12.5px;line-height:1.45}
143
+ .kb-empty-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:14px}
144
+ .kb[data-state="empty"] .kb-lane[data-lane="backlog"] .kb-lane-empty{border-style:solid;border-color:var(--bevel-brass);background:var(--bevel-surface);color:var(--bevel-ink-2)}
145
+ .kb[data-state="empty"] .kb-lane[data-lane="backlog"] .kb-lane-empty strong{color:var(--bevel-ink)}
146
+
147
+ /* --------------------------- board + panel ------------------------- */
148
+ .kb-board-wrap{flex:1;min-width:0}
149
+ .kb-work.has-panel{--kb-lane:204px;--kb-gap:14px}
150
+ .kb-work.has-panel .kb-board{display:flex;gap:var(--kb-gap);overflow-x:auto;overscroll-behavior-x:contain;padding:0 2px 10px 2px;margin:0 -2px;scroll-snap-type:x proximity;scrollbar-width:none}
151
+ .kb-work.has-panel .kb-board::-webkit-scrollbar{display:none}
152
+ .kb-scroll-rail{height:7px;background:var(--bevel-sunk);border:1px solid var(--bevel-line)}
153
+ .kb-scroll-rail b{display:block;height:100%;background:var(--bevel-muted)}
154
+ .kb-work.has-panel .kb-lane{flex:0 0 var(--kb-lane);scroll-snap-align:start}
155
+ .kb-work.has-panel .kb-lane-head h2{white-space:nowrap}
156
+ .kb-work.has-panel .kb-wip{display:none}
157
+ .kb-board-wrap>.kb-scroll-hint{margin-top:7px;font:11px/1.6 var(--bevel-font-mono);color:var(--bevel-muted)}
158
+ .kb-scroll-hint svg{vertical-align:-2px;margin-right:6px}
159
+ .kb-scroll-hint b{font-weight:500;color:var(--bevel-ink-2)}
160
+ .kb-panel{flex:0 0 352px;margin-left:20px;padding:0 0 0 20px;border-left:2px solid var(--bevel-ink);font-size:13px}
161
+ .kb-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
162
+ .kb-status{display:inline-flex;align-items:center;gap:5px;padding:4px 7px 4px 8px;font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-teal);background:var(--bevel-teal-soft);border:1px solid color-mix(in srgb,var(--bevel-teal) 30%,var(--bevel-teal-soft));white-space:nowrap}
163
+ .kb-status svg{color:var(--bevel-teal)}
164
+ .kb-panel h2{font:400 25px/1.12 var(--bevel-font-serif);letter-spacing:-.015em;color:var(--bevel-ink)}
165
+ .kb-panel-lede{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--bevel-ink-2)}
166
+ .kb-props{display:grid;grid-template-columns:82px 1fr;gap:0;margin:16px 0 0;border-top:1px solid var(--bevel-line)}
167
+ .kb-props dt{padding:8px 0;font:500 10px/1.6 var(--bevel-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bevel-muted);border-bottom:1px solid var(--bevel-line)}
168
+ .kb-props dd{display:flex;align-items:center;gap:8px;margin:0;padding:6px 0;min-height:32px;border-bottom:1px solid var(--bevel-line);color:var(--bevel-ink);font-size:13px}
169
+ .kb-props dd.kb-labels{gap:5px}
170
+ .kb-props .kb-due{font-size:12px;color:var(--bevel-brass)}
171
+ .kb-props .f-mono{color:var(--bevel-ink-2)}
172
+ .kb-panel-section{margin-top:18px}
173
+ .kb-panel-section h4{display:flex;align-items:center;gap:8px;margin-bottom:9px;font:500 12.5px/1 var(--bevel-font-sans);color:var(--bevel-ink)}
174
+ .kb-panel-section h4 .kb-check-count{padding:3px 5px;background:var(--bevel-sunk);border:1px solid var(--bevel-line);color:var(--bevel-ink-2)}
175
+ .kb-panel-section>.kb-check-bar{height:6px;margin-bottom:10px}
176
+ .kb-check-item{display:flex;padding:5px 0;font-size:13px}
177
+ .kb-check-item:has(:checked) .bevel-checkbox__label{color:var(--bevel-muted);text-decoration:line-through;text-decoration-color:var(--bevel-faint)}
178
+ .kb-dep-row{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--bevel-ox-soft);border-left:2px solid var(--bevel-ox);color:var(--bevel-ox)}
179
+ .kb-dep-row>div{flex:1;min-width:0;color:var(--bevel-ink);line-height:1.35}
180
+ .kb-dep-row b{font:500 11px/1 var(--bevel-font-mono);color:var(--bevel-ox);margin-right:6px}
181
+ .kb-dep-row small{display:block;margin-top:3px;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
182
+ .kb-dep-row .kb-due{display:inline;font-size:11px}
183
+ .kb-files{display:flex;flex-direction:column;gap:6px}
184
+ .kb-file{display:flex;align-items:center;gap:10px;padding:6px 8px;text-decoration:none;color:var(--bevel-ink);background:var(--bevel-surface);border:1px solid var(--bevel-line)}
185
+ .kb-file:hover{border-color:var(--bevel-line-2);background:var(--bevel-sunk)}
186
+ .kb-file img{width:38px;height:28px;object-fit:cover;border:1px solid var(--bevel-line-2)}
187
+ .kb-file>svg{width:38px;height:28px;padding:5px 0;color:var(--bevel-muted);background:var(--bevel-sunk);border:1px solid var(--bevel-line-2)}
188
+ .kb-file span{display:flex;align-items:baseline;gap:8px;font:12.5px/1.2 var(--bevel-font-mono)}
189
+ .kb-file small{font-size:11px;color:var(--bevel-muted)}
190
+ .kb-comment{display:flex;gap:10px;padding:8px 0}
191
+ .kb-comment>div{flex:1;min-width:0}
192
+ .kb-comment b{display:flex;align-items:baseline;gap:8px;font-weight:500;font-size:13px}
193
+ .kb-comment b small{font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
194
+ .kb-comment p{margin-top:3px;font-size:13px;line-height:1.45;color:var(--bevel-ink-2)}
195
+ .kb-event{position:relative;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;padding:7px 0 7px 36px;font-size:12.5px;color:var(--bevel-ink-2)}
196
+ .kb-event b{font-weight:500;color:var(--bevel-ink)}
197
+ .kb-event small{width:100%;font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
198
+ .kb-event-dot{position:absolute;left:10px;top:12px;width:6px;height:6px;background:var(--bevel-brass)}
199
+ .kb-composer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding:8px 10px;color:var(--bevel-muted);font-size:13px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:inset 0 1px 0 var(--bevel-edge-in)}
200
+ .kb-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid var(--bevel-line)}
201
+ .kb-panel-foot .f-mono{color:var(--bevel-muted)}
202
+
203
+ /* ------------------------------- foot ------------------------------ */
204
+ .kb-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:12px;border-top:1px solid var(--bevel-line);font:11px var(--bevel-font-mono);color:var(--bevel-muted)}
205
+ .kb-foot span{display:inline-flex;align-items:center;gap:6px}
206
+
207
+ /* ------------------------------ narrow ----------------------------- */
208
+ @media(max-width:960px){
209
+ .kb-board,.kb-work.has-panel .kb-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px;overflow:visible;margin:0;padding:0}
210
+ .kb-scroll-hint,.kb-scroll-rail{display:none}
211
+ .kb-work.has-panel{flex-direction:column;--kb-lane:248px;--kb-gap:18px}
212
+ .kb-board-wrap{width:100%}
213
+ .kb-panel{flex:none;width:auto;margin:20px 0 0;padding:20px 0 0;border-left:0;border-top:2px solid var(--bevel-ink)}
214
+ }
215
+ @media(max-width:600px){
216
+ .kb{padding:20px 18px 20px;--kb-lane:100%}
217
+ .kb-mast{flex-direction:column;align-items:stretch;gap:16px}
218
+ .kb-mast h1{font-size:32px}
219
+ .kb-mast-side{flex-wrap:wrap;gap:8px}
220
+ .kb-team{flex-basis:100%;margin-right:0}
221
+ .kb-mast-side .bevel-button{flex:1;justify-content:center}
222
+ .kb-scroll-hint,.kb-scroll-rail{display:none}
223
+ .kb-views{overflow-x:auto;scrollbar-width:none}
224
+ .kb-views a{padding:11px 9px 9px;white-space:nowrap}
225
+ .kb-views-note{display:none}
226
+ .kb-search{flex-basis:100%}
227
+ .kb-tools{gap:6px}
228
+ .kb-tape{flex-wrap:wrap;border-bottom:0}
229
+ .kb-tape>div{flex:1 1 40%;padding:10px 12px 10px 0;margin-right:12px;border-bottom:1px solid var(--bevel-line)}
230
+ .kb-tape>div:nth-child(2n){border-right:0;margin-right:0}
231
+ .kb-tape-meter{flex-basis:100%;border-right:0;margin-right:0}
232
+ .kb-board{display:flex;flex-direction:column;align-items:stretch;gap:26px}
233
+ .kb-work.has-panel .kb-board{display:flex;flex-direction:column;align-items:stretch;overflow:visible;padding:0;margin:0}
234
+ .kb-work.has-panel .kb-lane{flex:none}
235
+ .kb-lane-head{position:sticky;top:0;background:var(--bevel-ground);z-index:1}
236
+ .kb-foot{flex-direction:column;gap:6px}
237
+ }
package/examples/components/reference/fable/kanban.py ADDED
@@ -0,0 +1,212 @@
1
+ """Fable Kanban board. An independent composition for the Northstar Studio /
2
+ Field notes project: broadsheet masthead, view tabs, filter chrome, an
3
+ aggregate tape, four open lanes on the ground (no lane containers), dense
4
+ sans cards, a blocking dependency drawn on both ends, and a task panel that
5
+ pushes the board into a visibly scrollable strip. Static markup only."""
6
+
7
+ PEOPLE = {'MC': ('Mira Chen', 'Designer'), 'AR': ('Alex Rivera', 'Developer'),
8
+ 'SP': ('Sam Patel', 'Editor'), 'JP': ('Jules Park', 'Owner')}
9
+
10
+ ICONS = {
11
+ 'plus': 'M12 5v14M5 12h14',
12
+ 'more': 'M5 12h1m5 0h1m5 0h1',
13
+ 'search': 'M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0',
14
+ 'filter': 'M3 5h18l-7 8v6l-4 2v-8Z',
15
+ 'chevron': 'm6 9 6 6 6-6',
16
+ 'check': 'm5 12 4 4L19 6',
17
+ 'clock': 'M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0',
18
+ 'comment': 'M4 4h16v12H9l-5 4V4Z',
19
+ 'clip': 'm9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8',
20
+ 'flag': 'M5 21V4h13l-3 4 3 4H5',
21
+ 'board': 'M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z',
22
+ 'list': 'M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1',
23
+ 'calendar': 'M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6',
24
+ 'timeline': 'M3 6h8M9 12h10M5 18h9',
25
+ 'lock': 'M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4',
26
+ 'link': 'm10 14 4-4M9 15l-2 2a3 3 0 0 1-4-4l4-4a3 3 0 0 1 4 0m2 0 2-2a3 3 0 0 1 4 4l-4 4a3 3 0 0 1-4 0',
27
+ 'close': 'm6 6 12 12M18 6 6 18',
28
+ 'doc': 'M5 3h9l5 5v13H5ZM14 3v6h5',
29
+ 'image': 'M3 5h18v14H3ZM3 15l5-5 4 4 3-3 6 6M16 9h1',
30
+ 'share': 'M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6',
31
+ 'sort': 'M4 6h16M7 12h10M10 18h4',
32
+ 'group': 'M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z',
33
+ 'arrow': 'M4 12h16m-6-6 6 6-6 6',
34
+ 'blocked': 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18ZM5.6 5.6l12.8 12.8',
35
+ 'expand': 'M4 4h6M4 4v6M20 20h-6m6 0v-6M4 20l6-6M20 4l-6 6',
36
+ 'template': 'M4 4h16v5H4ZM4 12h7v8H4ZM14 12h6v8h-6Z',
37
+ }
38
+
39
+
40
+ from build_repairs import ICONS as REPAIR_ICONS
41
+ ICONS.update(REPAIR_ICONS)
42
+
43
+ def icon(name, size=16):
44
+ return (f'<svg width="{size}" height="{size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" '
45
+ f'stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter" aria-hidden="true">'
46
+ f'<path d="{ICONS[name]}"/></svg>')
47
+
48
+
49
+ def avatar(who, size=''):
50
+ name = PEOPLE[who][0]
51
+ return f'<span class="f-avatar {size}" data-who="{who}" aria-label="{name}" title="{name}">{who}</span>'
52
+
53
+
54
+ def button(label, name=None, kind='', attrs=''):
55
+ cls = ('bevel-button ' + kind).strip()
56
+ inner = (icon(name, 15) if name else '') + f'<span class="bevel-button__label">{label}</span>'
57
+ return f'<button type="button" class="{cls}" {attrs}>{inner}</button>'
58
+
59
+
60
+ TASKS = {
61
+ 'backlog': [
62
+ dict(id='FN-109', title='Archive the 2025 field notes', labels=['editorial'], priority='normal', due='Sep 19', people=['SP'], comments=0, files=0),
63
+ dict(id='FN-110', title='Print-ready export for the field guide', labels=['engineering'], priority='normal', due='Sep 24', people=['AR'], check=(0, 3), comments=1, files=0),
64
+ dict(id='FN-111', title='Photograph the studio for the cover', labels=['design'], priority='normal', due='Sep 26', people=['MC'], comments=0, files=1),
65
+ ],
66
+ 'next': [
67
+ dict(id='FN-101', title='Turn research into a field guide', labels=['editorial'], priority='high', due='Sep 10', people=['SP'], check=(2, 5), comments=3, files=2,
68
+ desc='A useful home for what we learned in the interviews.'),
69
+ dict(id='FN-102', title='Shape the cover story', labels=['design'], priority='normal', due='Sep 11', people=['MC', 'SP'], comments=2, files=1, cover=True),
70
+ dict(id='FN-103', title='Invite the next four collaborators', labels=['studio'], priority='normal', due='Sep 12', people=['JP'], check=(0, 4), comments=0, files=0),
71
+ ],
72
+ 'progress': [
73
+ dict(id='FN-104', title='Make room for good work', labels=['design', 'launch'], priority='urgent', due='Today', due_kind='today', people=['MC', 'AR'], check=(3, 4), comments=8, files=3,
74
+ desc='Finish the new project experience. Keep the first step calm and easy to return to.', blocked_by='FN-105'),
75
+ dict(id='FN-105', title='Polish the document export', labels=['engineering'], priority='high', due='Sep 07', due_kind='overdue', people=['AR'], check=(1, 3), comments=4, files=0, blocks='FN-104'),
76
+ dict(id='FN-106', title='Give every empty state a voice', labels=['editorial'], priority='normal', due='Sep 09', people=['SP'], check=(2, 3), comments=1, files=0),
77
+ ],
78
+ 'done': [
79
+ dict(id='FN-107', title='A calmer workspace navigation', labels=['design'], priority='normal', due='Sep 08', due_kind='done', people=['MC'], check=(4, 4), comments=5, files=2),
80
+ dict(id='FN-108', title='Write the first welcome', labels=['editorial'], priority='normal', due='Sep 07', due_kind='done', people=['SP', 'JP'], check=(3, 3), comments=2, files=0),
81
+ ],
82
+ }
83
+
84
+ LANES = [
85
+ ('backlog', 'Backlog', '', 'Ideas that are not scheduled yet.', 'Nothing waiting'),
86
+ ('next', 'Up next', '', 'Scheduled for this week.', 'Nothing scheduled'),
87
+ ('progress', 'In progress', 'WIP 3 / 3', 'Being worked on right now.', 'Nothing in progress'),
88
+ ('done', 'Done', 'This week', 'Finished and reviewed.', 'Nothing finished yet'),
89
+ ]
90
+
91
+ LABEL_NAMES = {'design': 'Design', 'editorial': 'Editorial', 'engineering': 'Engineering', 'studio': 'Studio', 'launch': 'Launch'}
92
+
93
+
94
+ def label(key):
95
+ return f'<span class="kb-label" data-label="{key}">{LABEL_NAMES[key]}</span>'
96
+
97
+
98
+ def priority(p):
99
+ text = {'urgent': 'Urgent', 'high': 'High', 'normal': 'Normal'}[p]
100
+ return f'<span class="kb-priority" data-priority="{p}">{icon("flag", 11)}{text}</span>'
101
+
102
+
103
+ def card(t, selected=False):
104
+ classes = ['kb-card']
105
+ if selected: classes.append('is-selected')
106
+ if t.get('due_kind') == 'done': classes.append('is-done')
107
+ if t.get('blocked_by'): classes.append('is-blocked')
108
+ parts = [f'<article class="{" ".join(classes)}" data-task="{t["id"]}" {"aria-current=true" if selected else ""}>']
109
+ if t.get('cover'):
110
+ parts.append('<figure class="kb-cover"><img src="../../fixtures/workspace.jpg" alt="The studio desk, a reference for the cover"><figcaption>Cover reference</figcaption></figure>')
111
+ parts.append(f'<div class="kb-card-top"><span class="kb-id">{t["id"]}</span>{priority(t["priority"])}</div>')
112
+ parts.append(f'<h3>{t["title"]}</h3>')
113
+ if t.get('desc'):
114
+ parts.append(f'<p class="kb-desc">{t["desc"]}</p>')
115
+ parts.append('<div class="kb-labels">' + ''.join(label(l) for l in t['labels']) + '</div>')
116
+ if t.get('blocked_by'):
117
+ parts.append(f'<div class="kb-dep is-blocked">{icon("lock", 12)}<span>Blocked by <b>{t["blocked_by"]}</b> · Font licensing</span></div>')
118
+ if t.get('blocks'):
119
+ parts.append(f'<div class="kb-dep">{icon("link", 12)}<span>Blocks <b>{t["blocks"]}</b> · Make room for good work</span></div>')
120
+ if t.get('check'):
121
+ done, total = t['check']
122
+ pct = round(done / total * 100)
123
+ parts.append(f'<div class="kb-check" aria-label="Checklist {done} of {total}"><i class="kb-check-bar"><b style="width:{pct}%"></b></i><span class="kb-check-count">{done}/{total}</span></div>')
124
+ kind = t.get('due_kind', '')
125
+ due_icon = 'check' if kind == 'done' else 'calendar'
126
+ meta = ''
127
+ if t['comments']: meta += f'<span>{icon("comment", 12)}{t["comments"]}</span>'
128
+ if t['files']: meta += f'<span>{icon("clip", 12)}{t["files"]}</span>'
129
+ parts.append(f'<footer class="kb-card-foot"><span class="kb-due" data-due="{kind}">{icon(due_icon, 12)}{t["due"]}</span><span class="kb-meta">{meta}</span><span class="kb-people">{"".join(avatar(p, "small") for p in t["people"])}</span></footer>')
130
+ parts.append('</article>')
131
+ return ''.join(parts)
132
+
133
+
134
+ def lane(key, title, wip, blurb, empty_title, tasks, state):
135
+ empty = state == 'empty'
136
+ count = 0 if empty else len(tasks)
137
+ head = (f'<header class="kb-lane-head"><span class="kb-lane-mark" data-lane="{key}"></span><h2>{title}</h2>'
138
+ f'<span class="kb-count">{count}</span>'
139
+ + (f'<span class="kb-wip" data-full="{"true" if key == "progress" and not empty else "false"}">{wip}</span>' if wip and not empty else '')
140
+ + f'<button type="button" class="kb-icon" aria-label="Add a task to {title}">{icon("plus", 15)}</button></header>')
141
+ if empty:
142
+ cta = ''
143
+ if key == 'backlog':
144
+ cta = f'<div class="kb-empty-actions">{button("Add the first task", "plus", "bevel-button--small")}{button("Start from a template", "template", "bevel-button--small bevel-button--quiet")}</div>'
145
+ body = f'<div class="kb-lane-empty"><strong>{empty_title}</strong><p>{blurb}</p>{cta}</div>'
146
+ else:
147
+ body = ''.join(card(t, selected=(state == 'selected' and t['id'] == 'FN-104')) for t in tasks)
148
+ body += f'<button type="button" class="kb-add">{icon("plus", 13)}Add task</button>'
149
+ return f'<section class="kb-lane" data-lane="{key}" aria-label="{title}">{head}<div class="kb-lane-body">{body}</div></section>'
150
+
151
+
152
+ def checklist_item(text, done):
153
+ return (f'<label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input type="checkbox" class="bevel-sr-only" {"checked" if done else ""}>'
154
+ f'<span class="bevel-checkbox__box" aria-hidden="true"></span><span class="bevel-checkbox__label">{text}</span></label>')
155
+
156
+
157
+ def panel():
158
+ return f'''<aside class="kb-panel" aria-label="Task FN-104">
159
+ <header class="kb-panel-head"><span class="kb-id">FN-104</span><span class="kb-status" data-lane="progress">In progress {icon("chevron", 12)}</span><span class="kb-spacer"></span><button type="button" class="kb-icon" aria-label="Task options">{icon("more", 16)}</button><button type="button" class="kb-icon" aria-label="Close task">{icon("close", 16)}</button></header>
160
+ <h2>Make room for good work</h2>
161
+ <p class="kb-panel-lede">Finish the new project experience. Keep the first step calm, direct and easy to return to.</p>
162
+ <dl class="kb-props">
163
+ <dt>Assignees</dt><dd><span class="kb-people">{avatar("MC", "small")}{avatar("AR", "small")}</span>Mira Chen, Alex Rivera</dd>
164
+ <dt>Priority</dt><dd>{priority("urgent")}</dd>
165
+ <dt>Due</dt><dd><span class="kb-due" data-due="today">{icon("calendar", 12)}Today, Sep 08</span></dd>
166
+ <dt>Labels</dt><dd class="kb-labels">{label("design")}{label("launch")}</dd>
167
+ <dt>Estimate</dt><dd class="f-mono">3 days · 2 spent</dd>
168
+ </dl>
169
+ <section class="kb-panel-section"><h4>Checklist <b class="kb-check-count">3/4</b></h4><i class="kb-check-bar"><b style="width:75%"></b></i>
170
+ {checklist_item("Set the project details", True)}{checklist_item("Check both colour modes", True)}{checklist_item("Review the compact layout", True)}{checklist_item("Get Jules’ final review", False)}
171
+ </section>
172
+ <section class="kb-panel-section"><h4>Blocked by <b class="kb-check-count">1</b></h4>
173
+ <div class="kb-dep-row">{icon("lock", 14)}<div><b>FN-105</b> Polish the document export<small>In progress · Alex Rivera · <span class="kb-due" data-due="overdue">due Sep 07</span></small></div>{avatar("AR", "small")}</div>
174
+ </section>
175
+ <section class="kb-panel-section"><h4>Attachments <b class="kb-check-count">3</b></h4>
176
+ <div class="kb-files"><a class="kb-file" href="#workspace"><img src="../../fixtures/workspace.jpg" alt=""><span>workspace.jpg<small>184 KB</small></span></a><a class="kb-file" href="#brief">{icon("doc", 18)}<span>project-brief.pdf<small>420 KB</small></span></a><a class="kb-file" href="#copy">{icon("doc", 18)}<span>welcome-copy.md<small>3 KB</small></span></a></div>
177
+ </section>
178
+ <section class="kb-panel-section"><h4>Activity <b class="kb-check-count">8</b></h4>
179
+ <div class="kb-comment">{avatar("AR", "small")}<div><b>Alex Rivera <small>18 min ago</small></b><p>The new flow reads clearly. Ready for one last look at the copy.</p></div></div>
180
+ <div class="kb-comment">{avatar("SP", "small")}<div><b>Sam Patel <small>2 h ago</small></b><p>Tightened the welcome line. It is on the card now.</p></div></div>
181
+ <div class="kb-event"><span class="kb-event-dot"></span>Mira moved this from <b>Up next</b> to <b>In progress</b><small>Yesterday</small></div>
182
+ <div class="kb-composer"><span>Leave a comment…</span><kbd>⌘ ↵</kbd></div>
183
+ </section>
184
+ <footer class="kb-panel-foot"><span class="f-mono">Created Sep 02 by Jules Park</span>{button("Open task", "expand", "bevel-button--small")}</footer>
185
+ </aside>'''
186
+
187
+
188
+ def kanban(state):
189
+ empty = state == 'empty'
190
+ total = 0 if empty else sum(len(v) for v in TASKS.values())
191
+ done = 0 if empty else len(TASKS['done'])
192
+ progress = 0 if empty else len(TASKS['progress'])
193
+ blocked = 0 if empty else 1
194
+ pct = 0 if empty else round(done / total * 100)
195
+ lanes = ''.join(lane(k, t, w, b, e, TASKS[k], state) for k, t, w, b, e in LANES)
196
+ tape = (f'<dl class="kb-tape"><div><dt>Open</dt><dd>{total - done}</dd></div><div><dt>In progress</dt><dd>{progress}<small>of 3</small></dd></div>'
197
+ f'<div><dt>Blocked</dt><dd data-tone="{"ox" if blocked else ""}">{blocked}</dd></div><div><dt>Done this week</dt><dd>{done}</dd></div>'
198
+ f'<div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:{pct}%"></b></i>{pct}%</dd></div></dl>')
199
+ filters = ('' if empty else f'<button type="button" class="kb-chip">{icon("calendar", 13)}Due: any time{icon("chevron", 12)}</button>') + \
200
+ f'<button type="button" class="kb-chip">Assignee: anyone{icon("chevron", 12)}</button><button type="button" class="kb-chip">Label: all{icon("chevron", 12)}</button>'
201
+ hint = (f'<div class="kb-scroll-rail" aria-hidden="true"><b style="width:80%"></b></div>'
202
+ f'<p class="kb-scroll-hint">{icon("arrow", 12)}Four lanes. Scroll the board sideways for <b>Done</b>.</p>') if state == 'selected' else ''
203
+ empty_note = ('<div class="kb-empty-note"><strong>This board is empty.</strong> New tasks land in Backlog. Move them across the lanes as the work moves.</div>' if empty else '')
204
+ return f'''<main class="kb" data-state="{state}">
205
+ <header class="kb-mast"><div class="kb-mast-title"><div class="kb-kicker">Northstar Studio<i>/</i>Project 004<i>/</i>Board</div><h1>Field notes</h1><p>Everything the studio is making for the field guide, in the order it will ship.</p></div>
206
+ <div class="kb-mast-side"><div class="kb-team"><span class="kb-people">{"".join(avatar(p) for p in PEOPLE)}</span><small>4 people</small></div>{button("Share", "share")}{button("New task", "plus", "bevel-button--primary")}</div></header>
207
+ <nav class="kb-views" aria-label="Views"><a href="#board" aria-current="page">{icon("board", 15)}Board<b>{total}</b></a><a href="#list">{icon("list", 15)}List</a><a href="#timeline">{icon("timeline", 15)}Timeline</a><a href="#calendar">{icon("calendar", 15)}Calendar</a><span class="kb-views-note">{icon("lock", 12)}Private · updated 10:42</span></nav>
208
+ <div class="kb-tools"><label class="kb-search">{icon("search", 15)}<input type="search" placeholder="Search tasks" aria-label="Search tasks"><kbd>⌘ K</kbd></label>{filters}<span class="kb-spacer"></span><button type="button" class="kb-chip kb-chip-quiet">{icon("group", 13)}Group: status</button><button type="button" class="kb-chip kb-chip-quiet">{icon("sort", 13)}Sort: priority</button></div>
209
+ {tape}{empty_note}
210
+ <div class="kb-work {"has-panel" if state == "selected" else ""}"><div class="kb-board-wrap"><div class="kb-board" tabindex="0" aria-label="Board lanes">{lanes}</div>{hint}</div>{panel() if state == "selected" else ""}</div>
211
+ <footer class="kb-foot"><span>{icon("board", 13)}Grouped by status · sorted by priority</span><span>{total} tasks · {done} done · 4 people</span></footer>
212
+ </main>'''
package/examples/components/reference/fable/parent-repairs.css ADDED
@@ -0,0 +1,9 @@
1
+ body[data-component="drawer"] .r-diagonal-close{right:0;top:0}
2
+ .p-split-button>.f-split-caret[aria-expanded="true"]{background:var(--bevel-face);box-shadow:none}
3
+ .p-split-button[data-divider="inset"]>.f-split-caret[aria-expanded="true"]{box-shadow:inset 1px 0 var(--bevel-edge-hi)}
4
+ .p-tree summary{margin-top:8px;margin-bottom:8px}
5
+ .p-tree-leaf{margin-top:10px;margin-bottom:10px}
6
+ .p-tree-leaf.selected{margin-bottom:12.5px}
7
+ .p-tree-leaf .f-tree-open{flex:0 0 auto}
8
+ .f-cell-error{position:static;display:flex;justify-content:flex-end;margin-top:9px;white-space:normal;text-align:left;box-shadow:none}
9
+ .f-grid-table tr.is-editing-row td.f-cell.is-invalid{height:auto;padding-top:10px;padding-bottom:10px}
package/examples/components/reference/fixtures/data.json ADDED
@@ -0,0 +1,102 @@
1
+ {
2
+ "project": "Field notes",
3
+ "workspace": "Northstar Studio",
4
+ "members": [
5
+ {
6
+ "name": "Mira Chen",
7
+ "initials": "MC",
8
+ "role": "Designer"
9
+ },
10
+ {
11
+ "name": "Alex Rivera",
12
+ "initials": "AR",
13
+ "role": "Developer"
14
+ },
15
+ {
16
+ "name": "Sam Patel",
17
+ "initials": "SP",
18
+ "role": "Editor"
19
+ },
20
+ {
21
+ "name": "Jules Park",
22
+ "initials": "JP",
23
+ "role": "Owner"
24
+ }
25
+ ],
26
+ "invoices": [
27
+ {
28
+ "id": "INV-0431",
29
+ "client": "Juniper Health",
30
+ "amount": 1240,
31
+ "status": "Paid"
32
+ },
33
+ {
34
+ "id": "INV-0432",
35
+ "client": "Northstar Studio",
36
+ "amount": 3200,
37
+ "status": "Overdue"
38
+ },
39
+ {
40
+ "id": "INV-0433",
41
+ "client": "Maple House",
42
+ "amount": 860,
43
+ "status": "Sent"
44
+ },
45
+ {
46
+ "id": "INV-0434",
47
+ "client": "Juniper Health",
48
+ "amount": 410,
49
+ "status": "Due soon"
50
+ }
51
+ ],
52
+ "chart": {
53
+ "labels": [
54
+ "Mon",
55
+ "Tue",
56
+ "Wed",
57
+ "Thu",
58
+ "Fri",
59
+ "Sat",
60
+ "Sun"
61
+ ],
62
+ "values": [
63
+ 12,
64
+ 18,
65
+ 14,
66
+ 28,
67
+ 24,
68
+ 35,
69
+ 31
70
+ ]
71
+ },
72
+ "article": {
73
+ "title": "A place for good work",
74
+ "body": "Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.",
75
+ "linkLabel": "Read the field guide",
76
+ "linkUrl": "https://example.test/field-guide"
77
+ },
78
+ "image": "workspace.jpg",
79
+ "fileName": "workspace.jpg",
80
+ "fileSize": "184 KB",
81
+ "tags": [
82
+ "Design",
83
+ "Editorial",
84
+ "Engineering",
85
+ "Research"
86
+ ],
87
+ "saveTime": "10:42",
88
+ "sampleCode": "<article class=\"field-note\">\n <h1>A place for good work</h1>\n <p>Keep the useful things close.</p>\n</article>",
89
+ "kanban": {
90
+ "columns": [
91
+ "To do",
92
+ "In progress",
93
+ "Done"
94
+ ],
95
+ "cards": [
96
+ "Write the field guide",
97
+ "Update the home page",
98
+ "Review the onboarding flow",
99
+ "Publish the release notes"
100
+ ]
101
+ }
102
+ }