@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/selected/components/context-hypercms.html ADDED
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>HyperCMS inspector · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="context-hypercms" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="default" inert=""><div class="hcms-context"><article class="hcms-preview"><div class="eyebrow">LIVE PAGE / FIELD NOTES</div><h1>A place for<br/>good work.</h1><img alt="A laptop and notebook on a sunlit desk" src="../../fixtures/workspace.jpg"/><p class="muted">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="rule"><div class="f-hcms-byline"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><small>Mira Chen · edited 10:42</small></div></div></article><aside class="hcms-shell hcms-panel hcms-side-right" data-hcms-shell=""><div class="hcms-shell-body"><header class="hcms-shell-header"><div class="hcms-shell-heading"><div class="hcms-shell-eyebrow">HYPERCMS / INSPECTOR</div><h2 class="hcms-shell-title">Page content</h2></div><button aria-label="Close inspector" class="f-icon-button f-hcms-close" title="Close inspector" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></header><div class="hcms-shell-notice" hidden="" role="status"></div><div class="hcms-shell-error notice error f-error-summary" hidden="" role="alert">Give the page a title before saving.</div><div class="hcms-form" data-hcms-form-root=""><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Page title</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">A place for good work</textarea><span class="hcms-error" hidden="">A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Introduction</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Keep the useful things close.</textarea><span class="hcms-error" hidden="">A title is required.</span></label><section class="hcms-object" data-hcms-shape="object"><h3 class="hcms-object-title" data-hcms-label="">Field guide link</h3><div class="hcms-object-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Label</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Read the field guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Destination</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">https://example.test/field-guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-error" hidden=""></div></section><section class="hcms-array hcms-object-array hcms-array--cards" data-hcms-shape="object-array"><header class="hcms-array-header"><h3 class="hcms-array-title" data-hcms-label="">Contributors <small class="f-count">1 item</small></h3></header><div class="hcms-array-items"><article class="hcms-card"><div aria-hidden="true" class="hcms-drag-handle"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></div><div class="hcms-card-body"><div class="hcms-card-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Name</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Mira Chen</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-card-controls"><button class="bevel-button bevel-button--quiet" data-action="Contributor removal simulated" data-hcms-action="remove" type="button"><span class="bevel-button__label">Remove</span></button></div></div><div class="hcms-error" hidden=""></div></article></div><div class="hcms-error" hidden=""></div></section><div class="hcms-field hcms-upload hcms-upload--image" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Cover image</span><div class="row f-hcms-upload"><img alt="Workspace" data-hcms-field="" src="../../fixtures/workspace.jpg"/><div><small>workspace.jpg · 184 KB</small><br/><button class="bevel-button bevel-button--quiet" data-action="Image chooser simulated" type="button"><span class="bevel-button__label">Change image</span></button></div></div><div class="hcms-error" hidden=""></div></div></div><footer class="hcms-shell-footer"><button class="bevel-button bevel-button--primary hcms-shell-save" data-action="Page changes saved in this local reference" type="button"><span class="bevel-button__label">Save changes</span></button></footer></div></aside></div></section><section data-ref-state="error" hidden="" inert=""><div class="hcms-context"><article class="hcms-preview"><div class="eyebrow">LIVE PAGE / FIELD NOTES</div><h1>A place for<br/>good work.</h1><img alt="A laptop and notebook on a sunlit desk" src="../../fixtures/workspace.jpg"/><p class="muted">Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><div class="rule"><div class="f-hcms-byline"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><small>Mira Chen · edited 10:42</small></div></div></article><aside class="hcms-shell hcms-panel hcms-side-right" data-hcms-shell=""><div class="hcms-shell-body"><header class="hcms-shell-header"><div class="hcms-shell-heading"><div class="hcms-shell-eyebrow">HYPERCMS / INSPECTOR</div><h2 class="hcms-shell-title">Page content</h2></div><button aria-label="Close inspector" class="f-icon-button f-hcms-close" title="Close inspector" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></header><div class="hcms-shell-notice" hidden="" role="status"></div><div class="hcms-shell-error notice error f-error-summary" role="alert"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg><div><strong>Give the page a title before saving.</strong></div></div><div class="hcms-form" data-hcms-form-root=""><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Page title</span><textarea aria-invalid="true" class="bevel-input invalid" data-hcms-field="" rows="1"></textarea><span class="hcms-error f-field-error"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Introduction</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Keep the useful things close.</textarea><span class="hcms-error" hidden="">A title is required.</span></label><section class="hcms-object" data-hcms-shape="object"><h3 class="hcms-object-title" data-hcms-label="">Field guide link</h3><div class="hcms-object-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Label</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Read the field guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Destination</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">https://example.test/field-guide</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-error" hidden=""></div></section><section class="hcms-array hcms-object-array hcms-array--cards" data-hcms-shape="object-array"><header class="hcms-array-header"><h3 class="hcms-array-title" data-hcms-label="">Contributors <small class="f-count">1 item</small></h3></header><div class="hcms-array-items"><article class="hcms-card"><div aria-hidden="true" class="hcms-drag-handle"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M8 4h1m6 0h1M8 9h1m6 0h1M8 14h1m6 0h1M8 19h1m6 0h1"></path></svg></div><div class="hcms-card-body"><div class="hcms-card-fields"><label class="hcms-field" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Name</span><textarea aria-invalid="false" class="bevel-input" data-hcms-field="" rows="1">Mira Chen</textarea><span class="hcms-error" hidden="">A title is required.</span></label></div><div class="hcms-card-controls"><button class="bevel-button bevel-button--quiet" data-action="Contributor removal simulated" data-hcms-action="remove" type="button"><span class="bevel-button__label">Remove</span></button></div></div><div class="hcms-error" hidden=""></div></article></div><div class="hcms-error" hidden=""></div></section><div class="hcms-field hcms-upload hcms-upload--image" data-hcms-shape="scalar"><span class="hcms-label" data-hcms-label="">Cover image</span><div class="row f-hcms-upload"><img alt="Workspace" data-hcms-field="" src="../../fixtures/workspace.jpg"/><div><small>workspace.jpg · 184 KB</small><br/><button class="bevel-button bevel-button--quiet" data-action="Image chooser simulated" type="button"><span class="bevel-button__label">Change image</span></button></div></div><div class="hcms-error" hidden=""></div></div></div><footer class="hcms-shell-footer"><button class="bevel-button bevel-button--primary hcms-shell-save" data-action="Page changes saved in this local reference" type="button"><span class="bevel-button__label">Save changes</span></button></footer></div></aside></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/context-quickcrop.html ADDED
@@ -0,0 +1,4 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Quickcrop upload and crop · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../parent/base-parent.css" rel="stylesheet"/><link href="../../parent/refinement.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="context-quickcrop" data-reference-phase="static" data-selected-source="parent"><section data-ref-state="locked" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Theme in context</div><h1>Finish the image before it lands</h1><p>Quickcrop’s stage inside the Hyperclay modal family.</p></div></header><div class="p-crop-context"><div class="p-modal" style="width:100%;padding:25px"><button aria-label="Close dialog" class="p-corner" type="button"><svg aria-hidden="true" viewBox="0 0 48 48"><path class="corner-bg" d="M0 0h48v48Z"></path><path class="corner-x" d="M28 8h3v3h3v3h3v-3h3V8h3v6h-3v3h-3v3h3v3h3v6h-3v-3h-3v-3h-3v3h-3v3h-3v-6h3v-3h3v-3h-3v-3h-3Z"></path></svg></button><div class="p-eyebrow">Image / workspace.jpg</div><div class="p-between" style="margin-bottom:20px"><h2 style="margin:0;font-size:28px">Find the useful part.</h2><span class="p-badge">1:1 crop</span></div><div class="qc-stage" data-part="crop-stage"><img alt="A bright workspace with a laptop and monitor" src="../../fixtures/workspace.jpg"/><div class="qc-dim"></div><div class="qc-box"><div class="qc-handle qc-nw"></div><div class="qc-handle qc-ne"></div><div class="qc-handle qc-sw"></div><div class="qc-handle qc-se"></div><i class="qc-rule horizontal one"></i><i class="qc-rule horizontal two"></i><i class="qc-rule vertical one"></i><i class="qc-rule vertical two"></i></div><span class="p-crop-size">800 × 800</span></div><div class="p-crop-actions"><div class="p-row"><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Square</span></button><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Free</span></button></div><span class="p-small p-muted">Aspect ratio locked</span><div class="qc-bar"><button class="qc-btn" type="button">Reset preview</button><button class="qc-btn qc-btn-primary" data-local-action="Crop confirmed in this preview" type="button">Use image</button></div></div></div></div></main></section>
4
+ <section data-ref-state="free" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Theme in context</div><h1>Finish the image before it lands</h1><p>Quickcrop’s stage inside the Hyperclay modal family.</p></div></header><div class="p-crop-context"><div class="p-modal" style="width:100%;padding:25px"><button aria-label="Close dialog" class="p-corner" type="button"><svg aria-hidden="true" viewBox="0 0 48 48"><path class="corner-bg" d="M0 0h48v48Z"></path><path class="corner-x" d="M28 8h3v3h3v3h3v-3h3V8h3v6h-3v3h-3v3h3v3h3v6h-3v-3h-3v-3h-3v3h-3v3h-3v-6h3v-3h3v-3h-3v-3h-3Z"></path></svg></button><div class="p-eyebrow">Image / workspace.jpg</div><div class="p-between" style="margin-bottom:20px"><h2 style="margin:0;font-size:28px">Find the useful part.</h2><span class="p-badge">Free crop</span></div><div class="qc-stage" data-part="crop-stage"><img alt="A bright workspace with a laptop and monitor" src="../../fixtures/workspace.jpg"/><div class="qc-dim"></div><div class="qc-box free"><div class="qc-handle qc-nw"></div><div class="qc-handle qc-ne"></div><div class="qc-handle qc-sw"></div><div class="qc-handle qc-se"></div><i class="qc-rule horizontal one"></i><i class="qc-rule horizontal two"></i><i class="qc-rule vertical one"></i><i class="qc-rule vertical two"></i></div><span class="p-crop-size">960 × 480</span></div><div class="p-crop-actions"><div class="p-row"><button class="bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Square</span></button><button class="bevel-button bevel-button--small bevel-button--primary" type="button"><span class="bevel-button__label">Free</span></button></div><span class="p-small p-muted">Unconstrained crop</span><div class="qc-bar"><button class="qc-btn" type="button">Reset preview</button><button class="qc-btn qc-btn-primary" data-local-action="Crop confirmed in this preview" type="button">Use image</button></div></div></div></div></main></section><footer class="r-static-note">Selected static UI · Parent design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/diff-view.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Diff view · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="diff-view" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="parent"><section data-ref-state="unified" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Reference / 23</div><h1>See what changed</h1><p>The before and after stay close enough to compare.</p></div></header><div class="p-diff f-diff" data-part="diff-frame"><header><span class="p-row"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg> field-note.html</span><div class="p-row"><span class="p-badge teal">+2</span><span class="p-badge ox">−2</span><div aria-label="Layout" class="bevel-seg f-diff-seg" role="group"><button aria-pressed="true" class="bevel-button" type="button"><span class="bevel-button__label">Unified</span></button><button aria-pressed="false" class="bevel-button" type="button"><span class="bevel-button__label">Split</span></button></div></div></header><div class="p-diff-hunk">@@ 1,4 → 1,4 @@</div><div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div><div class="p-diff-line removed f-diff-line"><span>2</span><span>−</span><code>&lt;h1&gt;A place for <mark>ideas</mark>&lt;/h1&gt;</code></div><div class="p-diff-line added f-diff-line"><span>2</span><span>+</span><code>&lt;h1&gt;A place for <mark>good work</mark>&lt;/h1&gt;</code></div><div class="p-diff-line removed f-diff-line"><span>3</span><span>−</span><code>&lt;p&gt;Keep <mark>everything</mark> close.&lt;/p&gt;</code></div><div class="p-diff-line added f-diff-line"><span>3</span><span>+</span><code>&lt;p&gt;Keep <mark>the useful things</mark> close.&lt;/p&gt;</code></div><div class="p-diff-line f-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div><footer>Updated by Mira Chen · today at 10:42</footer></div></main></section>
4
+ <section data-ref-state="split" hidden="" inert=""><main class="reference-stage"><header class="p-header" data-part="heading"><div><div class="p-eyebrow">Reference / 23</div><h1>See what changed</h1><p>The before and after stay close enough to compare.</p></div></header><div class="p-diff f-diff" data-part="diff-frame"><header><span class="p-row"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg> field-note.html</span><div class="p-row"><span class="p-badge teal">+2</span><span class="p-badge ox">−2</span><div aria-label="Layout" class="bevel-seg f-diff-seg" role="group"><button aria-pressed="false" class="bevel-button" type="button"><span class="bevel-button__label">Unified</span></button><button aria-pressed="true" class="bevel-button" type="button"><span class="bevel-button__label">Split</span></button></div></div></header><div class="f-diff-split"><section><h3>Before <small>field-note.html @ 1,4</small></h3>
5
+ <div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div>
6
+ <div class="p-diff-line f-diff-line removed"><span>2</span><span>−</span><code>&lt;h1&gt;A place for <mark>ideas</mark>&lt;/h1&gt;</code></div>
7
+ <div class="p-diff-line f-diff-line removed"><span>3</span><span>−</span><code>&lt;p&gt;Keep <mark>everything</mark> close.&lt;/p&gt;</code></div>
8
+ <div class="p-diff-line f-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div></section>
9
+ <section><h3>After <small>field-note.html @ 1,4</small></h3>
10
+ <div class="p-diff-line f-diff-line"><span>1</span><span> </span><code>&lt;article class="field-note"&gt;</code></div>
11
+ <div class="p-diff-line f-diff-line added"><span>2</span><span>+</span><code>&lt;h1&gt;A place for <mark>good work</mark>&lt;/h1&gt;</code></div>
12
+ <div class="p-diff-line f-diff-line added"><span>3</span><span>+</span><code>&lt;p&gt;Keep <mark>the useful things</mark> close.&lt;/p&gt;</code></div>
13
+ <div class="p-diff-line f-diff-line"><span>4</span><span> </span><code>&lt;/article&gt;</code></div></section></div><footer>Updated by Mira Chen · today at 10:42</footer></div></main></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/drawer.html ADDED
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Drawer · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="drawer" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="open" inert=""><div class="drawer-scene" data-part="drawer"><div class="drawer-underlay"><div class="eyebrow">Workspace</div><h2>Invoices</h2><p class="note">4 records · Northstar Studio</p><div class="f-underlay-row"><span class="mono">INV-0431</span><span>Juniper Health</span></div><div class="f-underlay-row is-open"><span class="mono">INV-0432</span><span>Northstar Studio</span></div><div class="f-underlay-row"><span class="mono">INV-0433</span><span>Maple House</span></div><div class="f-underlay-row"><span class="mono">INV-0434</span><span>Juniper Health</span></div></div><aside class="drawer-panel"><button aria-label="Close details" class="r-diagonal-close" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><header><div class="row between"><span class="eyebrow">INVOICE / 0432</span></div><h2>Northstar Studio</h2><div class="f-drawer-amount"><span class="mono" style="font-size:28px">$3,200.00</span><span class="badge bad">Overdue</span></div></header><main><dl class="detail-grid f-detail-grid"><dt>Client</dt><dd>Northstar Studio</dd><dt>Issued</dt><dd class="mono">Aug 24, 2026</dd><dt>Due</dt><dd class="mono bad">Sep 01, 2026</dd><dt>Owner</dt><dd>Mira Chen</dd></dl><div class="rule"><div class="eyebrow">LINE ITEMS</div><div class="listrow between"><span>Design direction <small>× 1</small></span><span class="mono">$2,400</span></div><div class="listrow between"><span>Editorial review <small>× 2</small></span><span class="mono">$800</span></div></div></main><footer><div class="row between"><small>Updated at 10:42</small><button class="bevel-button bevel-button--primary" data-action="Invoice marked paid locally" type="button"><span class="bevel-button__label">Mark as paid</span></button></div></footer></aside></div></section><section data-ref-state="long" hidden="" inert=""><div class="drawer-scene" data-part="drawer"><div class="drawer-underlay"><div class="eyebrow">Workspace</div><h2>Invoices</h2><p class="note">4 records · Northstar Studio</p><div class="f-underlay-row"><span class="mono">INV-0431</span><span>Juniper Health</span></div><div class="f-underlay-row is-open"><span class="mono">INV-0432</span><span>Northstar Studio</span></div><div class="f-underlay-row"><span class="mono">INV-0433</span><span>Maple House</span></div><div class="f-underlay-row"><span class="mono">INV-0434</span><span>Juniper Health</span></div></div><aside class="drawer-panel"><button aria-label="Close details" class="r-diagonal-close" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><header><div class="row between"><span class="eyebrow">INVOICE / 0432</span></div><h2>Northstar Studio</h2><div class="f-drawer-amount"><span class="mono" style="font-size:28px">$3,200.00</span><span class="badge bad">Overdue</span></div></header><main><dl class="detail-grid f-detail-grid"><dt>Client</dt><dd>Northstar Studio</dd><dt>Issued</dt><dd class="mono">Aug 24, 2026</dd><dt>Due</dt><dd class="mono bad">Sep 01, 2026</dd><dt>Owner</dt><dd>Mira Chen</dd></dl><div class="rule"><div class="eyebrow">LINE ITEMS</div><div class="listrow between"><span>Design direction <small>× 1</small></span><span class="mono">$2,400</span></div><div class="listrow between"><span>Editorial review <small>× 2</small></span><span class="mono">$800</span></div></div><div class="rule"><div class="eyebrow">Activity</div><div class="listrow"><span class="mono muted">01</span><div>Payment reminder prepared<br/><small>Sep 07, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">02</span><div>Due date reached<br/><small>Sep 06, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">03</span><div>Invoice viewed by client<br/><small>Sep 05, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">04</span><div>Invoice sent<br/><small>Sep 04, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">05</span><div>Draft approved<br/><small>Sep 03, 2026 · Mira Chen</small></div></div><div class="listrow"><span class="mono muted">06</span><div>Line items updated<br/><small>Sep 02, 2026 · Mira Chen</small></div></div></div></main><footer><div class="row between"><small>Updated at 10:42</small><button class="bevel-button bevel-button--primary" data-action="Invoice marked paid locally" type="button"><span class="bevel-button__label">Mark as paid</span></button></div></footer></aside></div></section><section data-ref-state="closed" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Invoices</h1><p>Four records in Northstar Studio.</p></header><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric">$3,200.00</td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><div class="rule row between wrap"><small>Choose a record to open its details.</small><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M14 3h7v7M21 3l-11 11M11 5H4v16h16v-7"></path></svg><span class="bevel-button__label">View INV-0432</span></button></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/editable-grid-cells.html ADDED
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Editable grid cells · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="editable-grid-cells" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="idle" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The detail, right in the row.</h1><p>Invoices / Amount</p></header><div class="table-scroll"><table class="f-grid-table"><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric f-cell is-editable"><button class="f-cell-button" type="button"><span>$3,200.00</span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg></button></td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><p class="note f-edit-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg>Amounts can be edited in place. Choose a value to change it.</p></div></section><section data-ref-state="editing" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The detail, right in the row.</h1><p>Invoices / Amount</p></header><div class="table-scroll"><table class="f-grid-table"><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr class="is-editing-row"><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric f-cell is-editing"><span class="f-cell-editor"><span class="f-cell-prefix">$</span><input aria-label="Amount for INV-0432" class="f-cell-input" value="3200.00"/><button aria-label="Save amount" class="f-icon-button f-cell-ok" title="Save amount" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-label="Cancel" class="f-icon-button f-cell-cancel" title="Cancel" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></span></td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><p class="note f-edit-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg>Editing INV-0432 · Amount. <kbd>↵</kbd> saves, <kbd>esc</kbd> cancels.</p></div></section><section data-ref-state="error" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>The detail, right in the row.</h1><p>Invoices / Amount</p></header><div class="table-scroll"><table class="f-grid-table"><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr class="is-editing-row"><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric f-cell is-editing is-invalid"><span class="f-cell-editor"><span class="f-cell-prefix">$</span><input aria-invalid="true" aria-label="Amount for INV-0432" class="f-cell-input" value="three thousand"/><button aria-label="Save amount" class="f-icon-button f-cell-ok" title="Save amount" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m5 12 4 4L19 6"></path></svg></button><button aria-label="Cancel" class="f-icon-button f-cell-cancel" title="Cancel" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></span><small class="f-cell-error"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>Enter a number, like 3200</small></td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div><p class="note f-edit-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 16 11-11 3 3-11 11-5 2ZM14 7l3 3"></path></svg>Editing INV-0432 · Amount. <kbd>↵</kbd> saves, <kbd>esc</kbd> cancels.</p></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/filter-builder.html ADDED
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Filter builder · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="filter-builder" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="applied" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Find the work that matters.</h1><p>A few plain conditions bring the right records into view.</p></header><div class="panel pad"><div class="row between" style="margin-bottom:24px"><strong>Show invoices where</strong><span class="badge">ALL RULES</span></div><div class="filters"><div class="filter-row f-filter-row"><span class="f-rule-word">WHERE</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Status</option><option>Client</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>is</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="Overdue"/><button aria-label="Remove rule" class="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div><div class="filter-row f-filter-row"><span class="f-rule-word">AND</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Client</option><option>Status</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>contains</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="Northstar"/><button aria-label="Remove rule" class="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div></div><template><div class="filter-row f-filter-row"><span class="f-rule-word">AND</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Amount</option><option>Client</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>is</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="3200"/><button aria-label="Remove rule" class="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div></template><div class="actions" style="justify-content:space-between"><button class="bevel-button" data-add-rule="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">Add rule</span></button><button class="bevel-button bevel-button--primary" data-action="Filters applied in this visual simulation." type="button"><span class="bevel-button__label">Apply filters</span></button></div></div><div class="rule"><span class="eyebrow f-result-label">APPLIED / 1 MATCHING RECORD</span><div class="listrow between"><div><strong>Northstar Studio</strong><br/><small>INV-0432 · Overdue</small></div><span class="mono">$3,200.00</span></div></div></div></section><section data-ref-state="empty" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Find the work that matters.</h1><p>A few plain conditions bring the right records into view.</p></header><div class="panel pad"><div class="row between" style="margin-bottom:24px"><strong>Show invoices where</strong><span class="badge">ALL RULES</span></div><div class="filters"><div class="f-empty-rules"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M3 5h18l-7 8v6l-4 2v-8Z"></path></svg><span>No conditions yet. Start with a field, then a comparison.</span></div></div><template><div class="filter-row f-filter-row"><span class="f-rule-word">AND</span><label class="bevel-select"><span class="bevel-sr-only">Filter field</span><select class="bevel-select__field"><option>Amount</option><option>Client</option><option>Amount</option></select></label><label class="bevel-select"><span class="bevel-sr-only">Operator</span><select class="bevel-select__field"><option>is</option><option>is not</option><option>contains</option></select></label><input aria-label="Filter value" class="bevel-input bevel-input--small" value="3200"/><button aria-label="Remove rule" class="f-icon-button f-rule-remove" title="Remove rule" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></div></template><div class="actions" style="justify-content:space-between"><button class="bevel-button" data-add-rule="" type="button"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">Add rule</span></button><button class="bevel-button bevel-button--primary" data-action="Filters applied in this visual simulation." type="button"><span class="bevel-button__label">Apply filters</span></button></div></div><div class="rule"><span class="eyebrow f-result-label">ALL RECORDS / 4 INVOICES</span><div class="table-scroll"><table><thead><tr><th>Invoice</th><th>Client</th><th style="text-align:right">Amount</th><th>Status</th></tr></thead><tbody><tr><td class="mono">INV-0431</td><td>Juniper Health</td><td class="numeric">$1,240.00</td><td><span class="badge good">Paid</span></td></tr><tr><td class="mono">INV-0432</td><td>Northstar Studio</td><td class="numeric">$3,200.00</td><td><span class="badge bad">Overdue</span></td></tr><tr><td class="mono">INV-0433</td><td>Maple House</td><td class="numeric">$860.00</td><td><span class="badge">Sent</span></td></tr><tr><td class="mono">INV-0434</td><td>Juniper Health</td><td class="numeric">$410.00</td><td><span class="badge">Due soon</span></td></tr></tbody></table></div></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/form-error-summary.html ADDED
@@ -0,0 +1,4 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Form error summary · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="form-error-summary" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="errors" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A clear way forward.</h1><p>Create a project / Details</p></header><div class="notice error f-error-summary" role="alert"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg><div class="s-error-copy"><strong>Two things need your attention.</strong><ul><li><a href="#e-name">Enter a project name</a></li><li><a href="#e-email">Use a complete email address</a></li></ul></div></div><div class="stack"><label class="field f-field is-invalid">Project name<input aria-invalid="true" class="bevel-input" id="e-name" placeholder="e.g. Field notes" value=""/><small class="f-field-error"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>A project name is required.</small></label>
4
+ <label class="field f-field is-invalid">Invite a collaborator<input aria-invalid="true" class="bevel-input" id="e-email" value="mira@"/><small class="f-field-error"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>Enter an address like mira@example.test.</small></label></div><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Create project</span></button></div></div></section><section data-ref-state="corrected" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>A clear way forward.</h1><p>Create a project / Details</p></header><div class="notice success f-error-summary" role="status"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="m5 12 4 4L19 6"></path></svg><div><strong>Everything looks good.</strong><span>Both fields are complete. Your project is ready to create.</span></div></div><div class="stack f-form-stack"><label class="field f-field">Project name<input aria-invalid="false" class="bevel-input" id="c-name" value="Field notes"/></label><label class="field f-field">Invite a collaborator<input aria-invalid="false" class="bevel-input" id="c-email" value="mira@example.test"/></label></div><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" type="button"><span class="bevel-button__label">Create project</span></button></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/inline-edit.html ADDED
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Inline edit · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-astra.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="inline-edit" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="astra"><section data-ref-state="resting" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div class="f-inline-wrap"><div class="eyebrow">PROJECT NAME</div><div class="row between inline-title"><h2 data-saved-name="">Field notes</h2><button class="bevel-button bevel-button--quiet" type="button"><span class="bevel-button__label">Edit</span></button></div><p class="note">The name appears on every document in the project.</p></div></div></section><section data-ref-state="editing" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div class="f-inline-wrap"><div class="f-inline-hint"><span class="eyebrow">Project name</span><span class="f-keys"><kbd>↵</kbd> save <kbd>esc</kbd> cancel</span></div><h2 aria-invalid="false" class="r-inline-name richclay-inline richclay-active richclay-focused" data-richclay-active="true" data-richclay-options="singleLine">Field notes</h2><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-inline-save="" type="button"><span class="bevel-button__label">Done</span></button></div></div></div></section><section data-ref-state="error" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div class="f-inline-wrap"><div class="f-inline-hint"><span class="eyebrow">Project name</span><span class="f-keys"><kbd>↵</kbd> save <kbd>esc</kbd> cancel</span></div><h2 aria-invalid="true" class="r-inline-name richclay-inline richclay-active richclay-focused" data-richclay-active="true" data-richclay-options="singleLine"><span class="r-placeholder">Project name</span></h2><p class="f-field-error"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="m12 3 10 18H2ZM12 9v5m0 3v1"></path></svg>Give this project a name before saving.</p><div class="actions"><button class="bevel-button" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-inline-save="" type="button"><span class="bevel-button__label">Done</span></button></div></div></div></section><section data-ref-state="saved" hidden="" inert=""><div class="specimen"><header data-part="heading"><div class="eyebrow">NORTHSTAR STUDIO / FIELD NOTES</div><h1>Small changes, in place.</h1><p>Keep the value and its editor close together.</p></header><div class="f-inline-wrap"><div class="eyebrow">PROJECT NAME</div><div class="row between inline-title"><h2 data-saved-name="">Field notes, together</h2><button class="bevel-button bevel-button--quiet" type="button"><span class="bevel-button__label">Edit</span></button></div><p class="f-status-line good f-inline-saved"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="m5 12 4 4L19 6"></path></svg><span>Saved at 10:42</span></p></div></div></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/kanban-board.html ADDED
@@ -0,0 +1,53 @@
1
+ <!DOCTYPE html>
2
+ <html class="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Kanban board · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../fable/base-parent.css" rel="stylesheet"/><link href="../../fable/fable.css" rel="stylesheet"/><link href="../../fable/parent-repairs.css" rel="stylesheet"/><link href="../../fable/kanban.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="kanban-board" data-reference-phase="static" data-seat="selected" data-selected-from="fable" data-selected-source="parent"><section data-ref-state="default" inert=""><main class="kb" data-state="default">
3
+ <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>
4
+ <div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">New task</span></button></div></header>
5
+ <nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>11</b></a><a href="#list"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg>List</a><a href="#timeline"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
6
+ <div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button class="kb-chip" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Due: any time<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
7
+ <dl class="kb-tape"><div><dt>Open</dt><dd>9</dd></div><div><dt>In progress</dt><dd>3<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="ox">1</dd></div><div><dt>Done this week</dt><dd>2</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:18%"></b></i>18%</dd></div></dl>
8
+ <div class="kb-work"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">3</span><button aria-label="Add a task to Backlog" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-109"><div class="kb-card-top"><span class="kb-id">FN-109</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Archive the 2025 field notes</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 19</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-110"><div class="kb-card-top"><span class="kb-id">FN-110</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Print-ready export for the field guide</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div aria-label="Checklist 0 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 24</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-111"><div class="kb-card-top"><span class="kb-id">FN-111</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Photograph the studio for the cover</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 26</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">3</span><button aria-label="Add a task to Up next" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-101"><div class="kb-card-top"><span class="kb-id">FN-101</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Turn research into a field guide</h3><p class="kb-desc">A useful home for what we learned in the interviews.</p><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 5" class="kb-check"><i class="kb-check-bar"><b style="width:40%"></b></i><span class="kb-check-count">2/5</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 10</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>3</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-102"><figure class="kb-cover"><img alt="The studio desk, a reference for the cover" src="../../fixtures/workspace.jpg"/><figcaption>Cover reference</figcaption></figure><div class="kb-card-top"><span class="kb-id">FN-102</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Shape the cover story</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 11</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-103"><div class="kb-card-top"><span class="kb-id">FN-103</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Invite the next four collaborators</h3><div class="kb-labels"><span class="kb-label" data-label="studio">Studio</span></div><div aria-label="Checklist 0 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 12</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">3</span><span class="kb-wip" data-full="true">WIP 3 / 3</span><button aria-label="Add a task to In progress" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card is-blocked" data-task="FN-104"><div class="kb-card-top"><span class="kb-id">FN-104</span><span class="kb-priority" data-priority="urgent"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></div><h3>Make room for good work</h3><p class="kb-desc">Finish the new project experience. Keep the first step calm and easy to return to.</p><div class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></div><div class="kb-dep is-blocked"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><span>Blocked by <b>FN-105</b> · Font licensing</span></div><div aria-label="Checklist 3 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:75%"></b></i><span class="kb-check-count">3/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>8</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>3</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-105"><div class="kb-card-top"><span class="kb-id">FN-105</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Polish the document export</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div class="kb-dep"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="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"></path></svg><span>Blocks <b>FN-104</b> · Make room for good work</span></div><div aria-label="Checklist 1 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:33%"></b></i><span class="kb-check-count">1/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="overdue"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>4</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-106"><div class="kb-card-top"><span class="kb-id">FN-106</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Give every empty state a voice</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:67%"></b></i><span class="kb-check-count">2/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 09</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">2</span><span class="kb-wip" data-full="false">This week</span><button aria-label="Add a task to Done" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card is-done" data-task="FN-107"><div class="kb-card-top"><span class="kb-id">FN-107</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>A calmer workspace navigation</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><div aria-label="Checklist 4 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">4/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 08</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>5</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><article class="kb-card is-done" data-task="FN-108"><div class="kb-card-top"><span class="kb-id">FN-108</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Write the first welcome</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 3 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">3/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section></div></div></div>
9
+ <footer class="kb-foot"><span><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>11 tasks · 2 done · 4 people</span></footer>
10
+ </main></section><section data-ref-state="empty" hidden="" inert=""><main class="kb" data-state="empty">
11
+ <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>
12
+ <div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">New task</span></button></div></header>
13
+ <nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>0</b></a><a href="#list"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg>List</a><a href="#timeline"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
14
+ <div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
15
+ <dl class="kb-tape"><div><dt>Open</dt><dd>0</dd></div><div><dt>In progress</dt><dd>0<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="">0</dd></div><div><dt>Done this week</dt><dd>0</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:0%"></b></i>0%</dd></div></dl><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>
16
+ <div class="kb-work"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">0</span><button aria-label="Add a task to Backlog" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing waiting</strong><p>Ideas that are not scheduled yet.</p><div class="kb-empty-actions"><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">Add the first task</span></button><button class="bevel-button bevel-button--small bevel-button--quiet" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 4h16v5H4ZM4 12h7v8H4ZM14 12h6v8h-6Z"></path></svg><span class="bevel-button__label">Start from a template</span></button></div></div></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">0</span><button aria-label="Add a task to Up next" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing scheduled</strong><p>Scheduled for this week.</p></div></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">0</span><button aria-label="Add a task to In progress" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing in progress</strong><p>Being worked on right now.</p></div></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">0</span><button aria-label="Add a task to Done" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><div class="kb-lane-empty"><strong>Nothing finished yet</strong><p>Finished and reviewed.</p></div></div></section></div></div></div>
17
+ <footer class="kb-foot"><span><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>0 tasks · 0 done · 4 people</span></footer>
18
+ </main></section><section data-ref-state="selected" hidden="" inert=""><main class="kb" data-state="selected">
19
+ <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>
20
+ <div class="kb-mast-side"><div class="kb-team"><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar" data-who="AR" title="Alex Rivera">AR</span><span aria-label="Sam Patel" class="f-avatar" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar" data-who="JP" title="Jules Park">JP</span></span><small>4 people</small></div><button class="bevel-button" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 3v12m-4-8 4-4 4 4M5 14v6h14v-6"></path></svg><span class="bevel-button__label">Share</span></button><button class="bevel-button bevel-button--primary" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg><span class="bevel-button__label">New task</span></button></div></header>
21
+ <nav aria-label="Views" class="kb-views"><a aria-current="page" href="#board"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Board<b>11</b></a><a href="#list"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M8 6h13M8 12h13M8 18h13M3 6h1M3 12h1M3 18h1"></path></svg>List</a><a href="#timeline"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M3 6h8M9 12h10M5 18h9"></path></svg>Timeline</a><a href="#calendar"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Calendar</a><span class="kb-views-note"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg>Private · updated 10:42</span></nav>
22
+ <div class="kb-tools"><label class="kb-search"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"></path></svg><input aria-label="Search tasks" placeholder="Search tasks" type="search"/><kbd>⌘ K</kbd></label><button class="kb-chip" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Due: any time<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Assignee: anyone<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><button class="kb-chip" type="button">Label: all<svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></button><span class="kb-spacer"></span><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h7v7H3ZM14 4h7v7h-7ZM3 13h7v7H3ZM14 13h7v7h-7Z"></path></svg>Group: status</button><button class="kb-chip kb-chip-quiet" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M4 6h16M7 12h10M10 18h4"></path></svg>Sort: priority</button></div>
23
+ <dl class="kb-tape"><div><dt>Open</dt><dd>9</dd></div><div><dt>In progress</dt><dd>3<small>of 3</small></dd></div><div><dt>Blocked</dt><dd data-tone="ox">1</dd></div><div><dt>Done this week</dt><dd>2</dd></div><div class="kb-tape-meter"><dt>Progress</dt><dd><i class="kb-check-bar"><b style="width:18%"></b></i>18%</dd></div></dl>
24
+ <div class="kb-work has-panel"><div class="kb-board-wrap"><div aria-label="Board lanes" class="kb-board" tabindex="0"><section aria-label="Backlog" class="kb-lane" data-lane="backlog"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="backlog"></span><h2>Backlog</h2><span class="kb-count">3</span><button aria-label="Add a task to Backlog" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-109"><div class="kb-card-top"><span class="kb-id">FN-109</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Archive the 2025 field notes</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 19</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-110"><div class="kb-card-top"><span class="kb-id">FN-110</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Print-ready export for the field guide</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div aria-label="Checklist 0 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 24</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-111"><div class="kb-card-top"><span class="kb-id">FN-111</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Photograph the studio for the cover</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 26</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Up next" class="kb-lane" data-lane="next"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="next"></span><h2>Up next</h2><span class="kb-count">3</span><button aria-label="Add a task to Up next" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card" data-task="FN-101"><div class="kb-card-top"><span class="kb-id">FN-101</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Turn research into a field guide</h3><p class="kb-desc">A useful home for what we learned in the interviews.</p><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 5" class="kb-check"><i class="kb-check-bar"><b style="width:40%"></b></i><span class="kb-check-count">2/5</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 10</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>3</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-102"><figure class="kb-cover"><img alt="The studio desk, a reference for the cover" src="../../fixtures/workspace.jpg"/><figcaption>Cover reference</figcaption></figure><div class="kb-card-top"><span class="kb-id">FN-102</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Shape the cover story</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 11</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>1</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><article class="kb-card" data-task="FN-103"><div class="kb-card-top"><span class="kb-id">FN-103</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Invite the next four collaborators</h3><div class="kb-labels"><span class="kb-label" data-label="studio">Studio</span></div><div aria-label="Checklist 0 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:0%"></b></i><span class="kb-check-count">0/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 12</span><span class="kb-meta"></span><span class="kb-people"><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="In progress" class="kb-lane" data-lane="progress"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="progress"></span><h2>In progress</h2><span class="kb-count">3</span><span class="kb-wip" data-full="true">WIP 3 / 3</span><button aria-label="Add a task to In progress" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article aria-current="true" class="kb-card is-selected is-blocked" data-task="FN-104"><div class="kb-card-top"><span class="kb-id">FN-104</span><span class="kb-priority" data-priority="urgent"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></div><h3>Make room for good work</h3><p class="kb-desc">Finish the new project experience. Keep the first step calm and easy to return to.</p><div class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></div><div class="kb-dep is-blocked"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><span>Blocked by <b>FN-105</b> · Font licensing</span></div><div aria-label="Checklist 3 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:75%"></b></i><span class="kb-check-count">3/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>8</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>3</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-105"><div class="kb-card-top"><span class="kb-id">FN-105</span><span class="kb-priority" data-priority="high"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>High</span></div><h3>Polish the document export</h3><div class="kb-labels"><span class="kb-label" data-label="engineering">Engineering</span></div><div class="kb-dep"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="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"></path></svg><span>Blocks <b>FN-104</b> · Make room for good work</span></div><div aria-label="Checklist 1 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:33%"></b></i><span class="kb-check-count">1/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="overdue"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>4</span></span><span class="kb-people"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span></footer></article><article class="kb-card" data-task="FN-106"><div class="kb-card-top"><span class="kb-id">FN-106</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Give every empty state a voice</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 2 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:67%"></b></i><span class="kb-check-count">2/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due=""><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Sep 09</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>1</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section><section aria-label="Done" class="kb-lane" data-lane="done"><header class="kb-lane-head"><span class="kb-lane-mark" data-lane="done"></span><h2>Done</h2><span class="kb-count">2</span><span class="kb-wip" data-full="false">This week</span><button aria-label="Add a task to Done" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M12 5v14M5 12h14"></path></svg></button></header><div class="kb-lane-body"><article class="kb-card is-done" data-task="FN-107"><div class="kb-card-top"><span class="kb-id">FN-107</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>A calmer workspace navigation</h3><div class="kb-labels"><span class="kb-label" data-label="design">Design</span></div><div aria-label="Checklist 4 of 4" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">4/4</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 08</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>5</span><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m9 16 7-7a3 3 0 0 0-4-4l-7 7a5 5 0 0 0 7 7l8-8"></path></svg>2</span></span><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span></span></footer></article><article class="kb-card is-done" data-task="FN-108"><div class="kb-card-top"><span class="kb-id">FN-108</span><span class="kb-priority" data-priority="normal"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Normal</span></div><h3>Write the first welcome</h3><div class="kb-labels"><span class="kb-label" data-label="editorial">Editorial</span></div><div aria-label="Checklist 3 of 3" class="kb-check"><i class="kb-check-bar"><b style="width:100%"></b></i><span class="kb-check-count">3/3</span></div><footer class="kb-card-foot"><span class="kb-due" data-due="done"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m5 12 4 4L19 6"></path></svg>Sep 07</span><span class="kb-meta"><span><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 4h16v12H9l-5 4V4Z"></path></svg>2</span></span><span class="kb-people"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><span aria-label="Jules Park" class="f-avatar small" data-who="JP" title="Jules Park">JP</span></span></footer></article><button class="kb-add" type="button"><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M12 5v14M5 12h14"></path></svg>Add task</button></div></section></div><div aria-hidden="true" class="kb-scroll-rail"><b style="width:80%"></b></div><p class="kb-scroll-hint"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 12h16m-6-6 6 6-6 6"></path></svg>Four lanes. Scroll the board sideways for <b>Done</b>.</p></div><aside aria-label="Task FN-104" class="kb-panel">
25
+ <header class="kb-panel-head"><span class="kb-id">FN-104</span><span class="kb-status" data-lane="progress">In progress <svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="m6 9 6 6 6-6"></path></svg></span><span class="kb-spacer"></span><button aria-label="Task options" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="M5 12h1m5 0h1m5 0h1"></path></svg></button><button aria-label="Close task" class="kb-icon" type="button"><svg aria-hidden="true" fill="none" height="16" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="16"><path d="m6 6 12 12M18 6 6 18"></path></svg></button></header>
26
+ <h2>Make room for good work</h2>
27
+ <p class="kb-panel-lede">Finish the new project experience. Keep the first step calm, direct and easy to return to.</p>
28
+ <dl class="kb-props">
29
+ <dt>Assignees</dt><dd><span class="kb-people"><span aria-label="Mira Chen" class="f-avatar small" data-who="MC" title="Mira Chen">MC</span><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></span>Mira Chen, Alex Rivera</dd>
30
+ <dt>Priority</dt><dd><span class="kb-priority" data-priority="urgent"><svg aria-hidden="true" fill="none" height="11" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="11"><path d="M5 21V4h13l-3 4 3 4H5"></path></svg>Urgent</span></dd>
31
+ <dt>Due</dt><dd><span class="kb-due" data-due="today"><svg aria-hidden="true" fill="none" height="12" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="12"><path d="M4 5h16v16H4ZM4 10h16M8 2v6m8-6v6"></path></svg>Today, Sep 08</span></dd>
32
+ <dt>Labels</dt><dd class="kb-labels"><span class="kb-label" data-label="design">Design</span><span class="kb-label" data-label="launch">Launch</span></dd>
33
+ <dt>Estimate</dt><dd class="f-mono">3 days · 2 spent</dd>
34
+ </dl>
35
+ <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>
36
+ <label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Set the project details</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Check both colour modes</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input checked="" class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Review the compact layout</span></label><label class="bevel-checkbox bevel-checkbox--small kb-check-item"><input class="bevel-sr-only" type="checkbox"/><span aria-hidden="true" class="bevel-checkbox__box"></span><span class="bevel-checkbox__label">Get Jules’ final review</span></label>
37
+ </section>
38
+ <section class="kb-panel-section"><h4>Blocked by <b class="kb-check-count">1</b></h4>
39
+ <div class="kb-dep-row"><svg aria-hidden="true" fill="none" height="14" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="14"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"></path></svg><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><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span></div>
40
+ </section>
41
+ <section class="kb-panel-section"><h4>Attachments <b class="kb-check-count">3</b></h4>
42
+ <div class="kb-files"><a class="kb-file" href="#workspace"><img alt="" src="../../fixtures/workspace.jpg"/><span>workspace.jpg<small>184 KB</small></span></a><a class="kb-file" href="#brief"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>project-brief.pdf<small>420 KB</small></span></a><a class="kb-file" href="#copy"><svg aria-hidden="true" fill="none" height="18" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="18"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"></path></svg><span>welcome-copy.md<small>3 KB</small></span></a></div>
43
+ </section>
44
+ <section class="kb-panel-section"><h4>Activity <b class="kb-check-count">8</b></h4>
45
+ <div class="kb-comment"><span aria-label="Alex Rivera" class="f-avatar small" data-who="AR" title="Alex Rivera">AR</span><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>
46
+ <div class="kb-comment"><span aria-label="Sam Patel" class="f-avatar small" data-who="SP" title="Sam Patel">SP</span><div><b>Sam Patel <small>2 h ago</small></b><p>Tightened the welcome line. It is on the card now.</p></div></div>
47
+ <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>
48
+ <div class="kb-composer"><span>Leave a comment…</span><kbd>⌘ ↵</kbd></div>
49
+ </section>
50
+ <footer class="kb-panel-foot"><span class="f-mono">Created Sep 02 by Jules Park</span><button class="bevel-button bevel-button--small" type="button"><svg aria-hidden="true" fill="none" height="15" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="15"><path d="M4 4h6M4 4v6M20 20h-6m6 0v-6M4 20l6-6M20 4l-6 6"></path></svg><span class="bevel-button__label">Open task</span></button></footer>
51
+ </aside></div>
52
+ <footer class="kb-foot"><span><svg aria-hidden="true" fill="none" height="13" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.6" viewBox="0 0 24 24" width="13"><path d="M3 4h5v16H3ZM10 4h5v11h-5ZM17 4h4v7h-4Z"></path></svg>Grouped by status · sorted by priority</span><span>11 tasks · 2 done · 4 people</span></footer>
53
+ </main></section><footer class="r-static-note">Selected static UI · Fable design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>
package/examples/components/reference/selected/components/modal.html ADDED
@@ -0,0 +1,2 @@
1
+ <!DOCTYPE html>
2
+ <html data-theme="light" lang="en"><head><meta charset="utf-8"/><meta content="width=device-width,initial-scale=1" name="viewport"/><title>Modal · Selected · Bevel</title><link href="../../baseline/bevel-fonts.css" rel="stylesheet"/><link href="../../baseline/bevel.css" rel="stylesheet"/><link href="../../parent/base-astra.css" rel="stylesheet"/><link href="../../parent/refinement.css" rel="stylesheet"/><link rel="stylesheet" href="../corrections.css"></head><body data-component="modal" data-reference-phase="static" data-selected-source="astra"><section data-ref-state="form" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="Make room for an idea." aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / A NEW BEGINNING</div><div class="micromodal__content"><h2 class="micromodal__heading">Make room for an idea.</h2><p>Give your project a name and a place to begin. You can change these details later.</p><div class="stack"><label class="field">Project name<input class="bevel-input" value="Field notes"/></label><label class="field">Workspace<label class="bevel-select"><span class="bevel-sr-only">Workspace</span><select class="bevel-select__field"><option>Northstar Studio</option><option>Personal workspace</option></select></label></label></div></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-modal-done="Create project" type="button"><span class="bevel-button__label">Create project</span></button></div></div></div></div></div></section><section data-ref-state="prompt" hidden="" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="Name this field note." aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / A NEW BEGINNING</div><div class="micromodal__content"><h2 class="micromodal__heading">Name this field note.</h2><p>A good name makes it easier to find your way back.</p><label class="field">Title<input class="bevel-input" value="A place for good work"/></label></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-modal-done="Save name" type="button"><span class="bevel-button__label">Save name</span></button></div></div></div></div></div></section><section data-ref-state="confirm" hidden="" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="Archive this project?" aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / PROJECT SETTINGS</div><div class="micromodal__content"><h2 class="micromodal__heading">Archive this project?</h2><p>Field notes will leave your active workspace. Your documents and history stay together.</p><div class="well row"><span style="font-size:28px">▧</span><div><strong>Field notes</strong><br/><small>12 documents · 4 collaborators</small></div></div></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--danger" data-modal-done="Archive project" type="button"><span class="bevel-button__label">Archive project</span></button></div></div></div></div></div></section><section data-ref-state="long" hidden="" inert=""><div class="overlay-scene"><div class="micromodal is-open" data-part="modal-frame" style="width:100%;max-width:490px"><div aria-label="A little shared understanding." aria-modal="true" class="micromodal__container" role="dialog"><button aria-label="Close" class="micromodal__close" data-close-modal="" type="button"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button><div class="micromodal__inner"><div class="eyebrow">FIELD NOTES / A NEW BEGINNING</div><div class="micromodal__content"><h2 class="micromodal__heading">A little shared understanding.</h2><p>Before inviting your team, take a moment to review how this workspace works.</p><div class="scroll-copy" tabindex="0"><h3>Keep useful things close</h3><p>Keep the useful things close. Field notes brings the documents, decisions and small details of a project into one place.</p><h3>One place, one team</h3><p>Everyone you invite can read shared documents. Editors can update content, and owners can manage workspace settings.</p><h3>Your work stays yours</h3><p>You can export your notes at any time. Archived projects keep their documents, decisions and complete history.</p><h3>A thoughtful default</h3><p>New projects start private. Choose who to invite when the work is ready for another pair of eyes.</p></div></div><div class="micromodal__buttons"><button class="bevel-button" data-close-modal="" type="button"><span class="bevel-button__label">Cancel</span></button><button class="bevel-button bevel-button--primary" data-modal-done="I understand" type="button"><span class="bevel-button__label">I understand</span></button></div></div></div></div></div></section><footer class="r-static-note">Selected static UI · Parent design · Preview controls show authored states.</footer><script src="../../fixtures/static-host.js"></script></body></html>