@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/file-browser.html ADDED
@@ -0,0 +1,53 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width,initial-scale=1">
6
+ <title>File browser &#183; Bevel</title>
7
+ <link rel="stylesheet" href="../../bevel-fonts.css">
8
+ <link rel="stylesheet" href="../../bevel.css">
9
+ </head>
10
+ <body data-bevel-example="file-browser">
11
+ <main class="bevel-example">
12
+ <header class="bevel-example__header">
13
+ <div class="bevel-eyebrow">Hyperclay / Dashboard</div>
14
+ <h1>The account, assembled.</h1>
15
+ <p>The round one drawing, built only from shipped families: app shell, icon button, file tree, files table, bulk bar, toast, banner and code editor.</p>
16
+ </header>
17
+ <div class="bevel-app-shell" id="fb-shell">
18
+ <header class="bevel-app-shell__bar"><a class="bevel-app-shell__brand" href="#fb-files"><span class="bevel-app-shell__mark"><svg aria-hidden="true" height="26" width="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 3h7v7H3ZM14 3h7v7h-7ZM3 14h7v7H3ZM14 14h7v7h-7Z"/></svg></span><span class="bevel-app-shell__word">Hyperclay</span></a><span class="bevel-app-shell__rule" aria-hidden="true"></span><button type="button" class="bevel-app-shell__switcher" id="fb-switcher" aria-haspopup="menu" aria-controls="fb-accounts" aria-expanded="false" data-bevel-open="fb-accounts"><span class="bevel-app-shell__switcher-icon"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg></span><span class="bevel-app-shell__switcher-label">panphora</span><span class="bevel-app-shell__caret"><svg aria-hidden="true" height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></span></button><nav class="bevel-seg bevel-seg--links bevel-app-shell__tabs" aria-label="Account"><a class="bevel-button" href="#fb-files" aria-current="page"><span class="bevel-button__label">Files</span></a><a class="bevel-button" href="#fb-files"><span class="bevel-button__label">Trash</span></a></nav><span class="bevel-app-shell__spacer"></span><button type="button" class="bevel-icon-button bevel-icon-button--flat bevel-app-shell__nav-toggle" aria-label="Show files tree" aria-controls="fb-tree-panel" aria-expanded="false" data-bevel-shell-nav><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M80,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H88A8,8,0,0,1,80,64Zm136,56H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm0,64H88a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16ZM44,52A12,12,0,1,0,56,64,12,12,0,0,0,44,52Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,116Zm0,64a12,12,0,1,0,12,12A12,12,0,0,0,44,180Z"/></svg></button><button type="button" class="bevel-button bevel-icon-button bevel-app-shell__account" id="fb-account" aria-label="Account menu" aria-haspopup="menu" aria-controls="fb-account-menu" aria-expanded="false" data-bevel-open="fb-account-menu"><span class="bevel-button__label"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg></span></button><div id="fb-accounts" class="bevel-menu" popover="manual" role="menu" aria-label="Accounts"><div class="bevel-menu__title">Accounts</div><button type="button" role="menuitemradio" aria-checked="true" data-bevel-key="panphora" tabindex="0"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg></span>panphora<span class="bevel-menu__state">Current</span></button><button type="button" role="menuitemradio" aria-checked="false" data-bevel-key="northstar" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6 21c1-2.5 3-4 6-4s5 1.5 6 4M8.5 6.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM15.5 6.5a3 3 0 1 0 6 0 3 3 0 0 0-6 0ZM2 16c1-3 3-4.5 5-4.5M22 16c-1-3-3-4.5-5-4.5"/></svg></span>Northstar Studio</button><button type="button" role="menuitemradio" aria-checked="false" data-bevel-key="field-notes" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM6 21c1-2.5 3-4 6-4s5 1.5 6 4M8.5 6.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM15.5 6.5a3 3 0 1 0 6 0 3 3 0 0 0-6 0ZM2 16c1-3 3-4.5 5-4.5M22 16c-1-3-3-4.5-5-4.5"/></svg></span>Field Notes</button><hr><button type="button" role="menuitem" data-bevel-key="new-team" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 5v14M5 12h14"/></svg></span>New team&#8230;</button><button type="button" role="menuitem" data-bevel-key="deleted-teams" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z"/></svg></span>Deleted teams&#8230;</button></div><div id="fb-account-menu" class="bevel-menu" popover="manual" role="menu" aria-label="My account" data-bevel-placement="bottom-end"><div class="bevel-menu__title">Signed in as panphora</div><button type="button" role="menuitem" data-bevel-key="username" tabindex="0"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/></svg></span>Change username&#8230;</button><button type="button" role="menuitem" data-bevel-key="sync-key" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 12h11v4M17 12v3M3 12a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/></svg></span>Generate sync key&#8230;</button><hr><a href="#fb-files" role="menuitem" data-bevel-key="documentation" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M2.5 4.5H9l3 2 3-2h6.5v13H15l-3 2-3-2H2.5ZM12 6.5v13"/></svg></span>Documentation</a><a href="#fb-files" role="menuitem" data-bevel-key="billing" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 5h18v14H3ZM3 9h18M6 15h4"/></svg></span>Manage billing</a><hr><a href="#fb-files" role="menuitem" data-bevel-key="log-out" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z"/></svg></span>Log out</a></div></header>
19
+ <div class="bevel-app-shell__body">
20
+ <aside class="bevel-app-shell__side" id="fb-tree-panel" aria-label="Files tree"><div class="bevel-app-shell__side-head"><label class="bevel-sr-only" for="fb-filter">Filter files</label><input class="bevel-input bevel-input--small" id="fb-filter" type="search" placeholder="Filter files" data-bevel-file-tree="fb-tree"><button type="button" class="bevel-icon-button bevel-icon-button--flat bevel-app-shell__side-toggle" aria-label="Collapse sidebar" title="Collapse sidebar" aria-controls="fb-tree-panel" aria-expanded="true" data-bevel-shell-collapse><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 4h18v16H3ZM9 4v16"/></svg></button></div><div class="bevel-file-tree" id="fb-tree" role="tree" aria-label="panphora files" data-bevel-selected="card-canvas.html"><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="fb-ft-archive" data-bevel-expanded="false" data-bevel-key="archive" data-bevel-label="archive"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">archive</span></button><div class="bevel-file-tree__group" id="fb-ft-archive" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="archive/2024-portfolio.html" data-bevel-label="2024-portfolio.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">2024-portfolio.html</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="archive/pitch-deck.pdf" data-bevel-label="pitch-deck.pdf"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-file-tree__name">pitch-deck.pdf</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="fb-ft-assets" data-bevel-expanded="false" data-bevel-key="assets" data-bevel-label="assets"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">assets</span></button><div class="bevel-file-tree__group" id="fb-ft-assets" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-expanded="false" aria-controls="fb-ft-assets-brand" data-bevel-expanded="false" data-bevel-key="assets/brand" data-bevel-label="brand"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">brand</span></button><div class="bevel-file-tree__group" id="fb-ft-assets-brand" role="group" hidden><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="3" aria-selected="false" data-bevel-key="assets/brand/logo-mark.svg" data-bevel-label="logo-mark.svg"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">logo-mark.svg</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="3" aria-selected="false" data-bevel-key="assets/brand/og-cover.png" data-bevel-label="og-cover.png"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">og-cover.png</span></button></div><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="assets/favicon.ico" data-bevel-label="favicon.ico"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">favicon.ico</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="true" aria-controls="fb-ft-core" data-bevel-expanded="true" data-bevel-key="core" data-bevel-label="core"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">core</span></button><div class="bevel-file-tree__group" id="fb-ft-core" role="group"><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="core/kanban.html" data-bevel-label="kanban.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">kanban.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="core/writer.html" data-bevel-label="writer.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">writer.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="core/devlog.html" data-bevel-label="devlog.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">devlog.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="fb-ft-planning" data-bevel-expanded="false" data-bevel-key="planning-canvas" data-bevel-label="planning-canvas"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">planning-canvas</span></button><div class="bevel-file-tree__group" id="fb-ft-planning" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-expanded="false" aria-controls="fb-ft-sketches" data-bevel-expanded="false" data-bevel-key="planning-canvas/sketches" data-bevel-label="sketches"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">sketches</span></button><div class="bevel-file-tree__group" id="fb-ft-sketches" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="3" aria-selected="false" data-bevel-key="planning-canvas/sketches/board.html" data-bevel-label="board.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">board.html</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="3" aria-selected="false" data-bevel-key="planning-canvas/sketches/wall.png" data-bevel-label="wall.png"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">wall.png</span></button></div><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="planning-canvas/notes.md" data-bevel-label="notes.md"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-file-tree__name">notes.md</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="fb-ft-qa" data-bevel-expanded="false" data-bevel-key="qa-r2-livesync" data-bevel-label="qa-r2-livesync"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">qa-r2-livesync</span></button><div class="bevel-file-tree__group" id="fb-ft-qa" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="qa-r2-livesync/run-01.html" data-bevel-label="run-01.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">run-01.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="qa-r2-livesync/run-02.html" data-bevel-label="run-02.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">run-02.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="fb-ft-writing" data-bevel-expanded="false" data-bevel-key="writing" data-bevel-label="writing" data-bevel-drop-target><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">writing</span></button><div class="bevel-file-tree__group" id="fb-ft-writing" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-expanded="false" aria-controls="fb-ft-drafts" data-bevel-expanded="false" data-bevel-key="writing/drafts" data-bevel-label="drafts"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">drafts</span></button><div class="bevel-file-tree__group" id="fb-ft-drafts" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="3" aria-selected="false" data-bevel-key="writing/drafts/breathing-life.html" data-bevel-label="breathing-life.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">breathing-life.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="writing/plumbing.html" data-bevel-label="plumbing.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">plumbing.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="true" data-bevel-key="card-canvas.html" data-bevel-label="card-canvas.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">card-canvas.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="early-access.html" data-bevel-label="early-access.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">early-access.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="hi.html" data-bevel-label="hi.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">hi.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="how-i-got-hyperclay-com.html" data-bevel-label="how-i-got-hyperclay-com.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">how-i-got-hyperclay-com.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="just-launch.html" data-bevel-label="just-launch.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">just-launch.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="landing-clayjs-check.html" data-bevel-label="landing-clayjs-check.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">landing-clayjs-check.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="notes.html" data-bevel-label="notes.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">notes.html</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="hello.md" data-bevel-label="hello.md"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-file-tree__name">hello.md</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="logo.png" data-bevel-label="logo.png"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">logo.png</span></button><p class="bevel-file-tree__empty" hidden>No file matches that filter.</p></div></aside>
21
+ <div class="bevel-app-shell__main" id="fb-files">
22
+ <div class="bevel-app-shell__content">
23
+ <section class="bevel-section" aria-labelledby="fb-files-title">
24
+ <div class="bevel-app-shell-example__head"><h2 id="fb-files-title">Files</h2><div class="bevel-buttons"><label class="bevel-toolbar__search"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"/></svg><span class="bevel-sr-only">Search this account</span><input class="bevel-input bevel-input--small" aria-label="Search this account" placeholder="Search this account" type="search"><kbd>/</kbd></label><button type="button" class="bevel-button bevel-button--primary" id="fb-new" aria-haspopup="menu" aria-controls="fb-new-menu" aria-expanded="false" data-bevel-open="fb-new-menu"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 5v14M5 12h14"/></svg><span class="bevel-button__label">New</span><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 9 7 7 7-7"/></svg></button><div id="fb-new-menu" class="bevel-menu" popover="manual" role="menu" aria-label="New" data-bevel-placement="bottom-end"><div class="bevel-menu__title">Create</div><button type="button" role="menuitem" data-bevel-key="new-site" tabindex="0"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span>New site<kbd>&#8984;N</kbd></button><button type="button" role="menuitem" data-bevel-key="new-folder" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span>New folder</button><button type="button" role="menuitem" data-bevel-key="new-collection" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 6a8 3 0 1 1-16 0 8 3 0 0 1 16 0v12a8 3 0 0 1-16 0V6M4 12a8 3 0 0 0 16 0"/></svg></span>New collection</button><hr><button type="button" role="menuitem" data-bevel-key="upload" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.5 18H6a4 4 0 0 1 0-8c0-3.5 2.5-6 6-6s6 2.5 6 6a4 4 0 0 1 0 8h-2.5M12 21v-9m-3 3 3-3 3 3"/></svg></span>Upload files&#8230;</button></div></div></div>
25
+ <section class="bevel-action-banner bevel-action-banner--running" data-bevel-key="delete-12-items" aria-labelledby="fb-running-title" tabindex="-1"><span class="bevel-action-banner__icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 3a9 9 0 1 1-9 9"/></svg></span><div class="bevel-action-banner__body"><div class="bevel-action-banner__head"><h2 id="fb-running-title">Deleting 12 items&#8230;</h2><span class="bevel-action-banner__count">7 of 12</span></div><progress class="bevel-action-banner__progress" aria-labelledby="fb-running-title" max="12" value="7">7 of 12</progress><p class="bevel-action-banner__status" aria-live="polite">Delete results: 6 succeeded, 1 unchanged. Each item reports as it finishes.</p></div></section>
26
+ <section class="bevel-action-banner bevel-action-banner--uncertain" data-bevel-key="move-3-items" aria-labelledby="fb-uncertain-title" tabindex="-1"><span class="bevel-action-banner__icon"><svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg></span><div class="bevel-action-banner__body"><h2 id="fb-uncertain-title">We didn't get a response for Move 3 items</h2><p>The response was lost. This change may have completed.</p><p class="bevel-action-banner__observation" aria-live="polite">Current state matches the requested change. Current folder: writing &#183; 3 items moved &#183; Checked just now</p><div class="bevel-action-banner__actions"><button class="bevel-button bevel-button--small" data-bevel-action="check" data-bevel-key="move-3-items" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 20l-4.5-4.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0"/></svg><span class="bevel-button__label">Check current state</span></button><button class="bevel-button bevel-button--small bevel-button--quiet" data-bevel-banner-dismiss type="button"><span class="bevel-button__label">Dismiss after checking</span></button><span class="bevel-action-banner__meta">Started 2 minutes ago &#183; This is a snapshot, not an operation receipt.</span></div></div></section>
27
+ <div class="bevel-files" id="fb-files-table"><div class="bevel-files__scroll"><table class="bevel-files__table"><thead><tr><th class="bevel-files__pick" scope="col"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select all files"><span class="bevel-checkbox__box"></span></label></th><th class="bevel-files__name" scope="col" data-bevel-column="name" aria-sort="ascending"><button type="button" class="bevel-files__sort">Name<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th class="bevel-files__status" scope="col">Status</th><th class="bevel-files__updated" scope="col" data-bevel-column="updated" aria-sort="none"><button type="button" class="bevel-files__sort">Updated<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th class="bevel-files__size" scope="col" data-bevel-column="size" aria-sort="none"><button type="button" class="bevel-files__sort">Size<svg class="bevel-files__arrow" aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M12 20V4m-6 6 6-6 6 6"/></svg></button></th><th class="bevel-files__actions" scope="col"><span class="bevel-sr-only">Actions</span></th></tr></thead><tbody><tr class="bevel-files__row" data-bevel-key="archive"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select archive"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="archive">archive</button><span class="bevel-files__detail">32 items</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated">&ndash;</td><td class="bevel-files__size"></td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open archive" data-bevel-action="open" data-bevel-key="archive"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for archive" data-bevel-action="actions" data-bevel-key="archive"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="assets"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select assets"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="assets">assets</button><span class="bevel-files__detail">4 items</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated">&ndash;</td><td class="bevel-files__size"></td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open assets" data-bevel-action="open" data-bevel-key="assets"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for assets" data-bevel-action="actions" data-bevel-key="assets"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="core"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select core"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="core">core</button><span class="bevel-files__detail">9 items</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated">&ndash;</td><td class="bevel-files__size"></td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open core" data-bevel-action="open" data-bevel-key="core"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for core" data-bevel-action="actions" data-bevel-key="core"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="planning-canvas"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select planning-canvas"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="planning-canvas">planning-canvas</button><span class="bevel-files__detail">4 items</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated">&ndash;</td><td class="bevel-files__size"></td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open planning-canvas" data-bevel-action="open" data-bevel-key="planning-canvas"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for planning-canvas" data-bevel-action="actions" data-bevel-key="planning-canvas"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="qa-r2-livesync"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select qa-r2-livesync"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="qa-r2-livesync">qa-r2-livesync</button><span class="bevel-files__detail">6 items</span></span></span></td><td class="bevel-files__status"><span class="bevel-files__pill bevel-files__pill--accent">Collection</span><span class="bevel-files__pill bevel-files__pill--alert">Paused</span></td><td class="bevel-files__updated">&ndash;</td><td class="bevel-files__size"></td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open qa-r2-livesync" data-bevel-action="open" data-bevel-key="qa-r2-livesync"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for qa-r2-livesync" data-bevel-action="actions" data-bevel-key="qa-r2-livesync"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="writing" data-bevel-drop-target><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select writing"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="writing">writing</button><span class="bevel-files__detail">12 items</span></span></span></td><td class="bevel-files__status"><span class="bevel-files__drop-hint"><svg aria-hidden="true" height="12" width="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3ZM7 13.5h10m-3-3 3 3-3 3"/></svg>Move 3 items here</span></td><td class="bevel-files__updated">&ndash;</td><td class="bevel-files__size"></td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open writing" data-bevel-action="open" data-bevel-key="writing"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for writing" data-bevel-action="actions" data-bevel-key="writing"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="card-canvas.html"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select card-canvas.html"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="card-canvas.html">card-canvas.html</button><span class="bevel-files__detail">card-canvas.hyperclay.com</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated"><time datetime="2026-09-15T08:44" title="Sep 15, 2026, 8:44 AM">2h ago</time></td><td class="bevel-files__size">48 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share card-canvas.html" data-bevel-action="share" data-bevel-key="card-canvas.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open card-canvas.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="card-canvas.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for card-canvas.html" data-bevel-action="actions" data-bevel-key="card-canvas.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="early-access.html"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select early-access.html" checked><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="early-access.html">early-access.html</button><span class="bevel-files__detail">early-access.hyperclay.com</span></span></span></td><td class="bevel-files__status"><span class="bevel-files__pill">Private</span></td><td class="bevel-files__updated"><time datetime="2026-09-14T16:20" title="Sep 14, 2026, 4:20 PM">yesterday</time></td><td class="bevel-files__size">31 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share early-access.html" data-bevel-action="share" data-bevel-key="early-access.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open early-access.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="early-access.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for early-access.html" data-bevel-action="actions" data-bevel-key="early-access.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="hi.html"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select hi.html" checked><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="hi.html">hi.html</button><span class="bevel-files__detail">hi.hyperclay.com</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated"><time datetime="2026-09-12T11:05" title="Sep 12, 2026, 11:05 AM">3d ago</time></td><td class="bevel-files__size">2 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share hi.html" data-bevel-action="share" data-bevel-key="hi.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open hi.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="hi.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for hi.html" data-bevel-action="actions" data-bevel-key="hi.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="how-i-got-hyperclay-com.html"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select how-i-got-hyperclay-com.html"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="how-i-got-hyperclay-com.html">how-i-got-hyperclay-com.html</button><span class="bevel-files__detail">howigothyperclay.com</span></span></span></td><td class="bevel-files__status"><span class="bevel-files__pill bevel-files__pill--good">Discover</span><span class="bevel-files__pill" title="Has a share link"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>Shared</span></td><td class="bevel-files__updated"><time datetime="2026-08-30T09:30" title="Aug 30, 2026, 9:30 AM">Aug 30</time></td><td class="bevel-files__size">19 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share how-i-got-hyperclay-com.html" data-bevel-action="share" data-bevel-key="how-i-got-hyperclay-com.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open how-i-got-hyperclay-com.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="how-i-got-hyperclay-com.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for how-i-got-hyperclay-com.html" data-bevel-action="actions" data-bevel-key="how-i-got-hyperclay-com.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="just-launch.html"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select just-launch.html"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="just-launch.html">just-launch.html</button><span class="bevel-files__detail">just-launch.hyperclay.com</span></span></span></td><td class="bevel-files__status"><span class="bevel-files__pill bevel-files__pill--good">Signups</span></td><td class="bevel-files__updated"><time datetime="2026-08-28T18:02" title="Aug 28, 2026, 6:02 PM">Aug 28</time></td><td class="bevel-files__size">74 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share just-launch.html" data-bevel-action="share" data-bevel-key="just-launch.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open just-launch.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="just-launch.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for just-launch.html" data-bevel-action="actions" data-bevel-key="just-launch.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="landing-clayjs-check.html"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select landing-clayjs-check.html"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="landing-clayjs-check.html">landing-clayjs-check.html</button><span class="bevel-files__detail">landing-clayjs-check.hyperclay.com</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated"><time datetime="2026-08-21T14:47" title="Aug 21, 2026, 2:47 PM">Aug 21</time></td><td class="bevel-files__size">12 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share landing-clayjs-check.html" data-bevel-action="share" data-bevel-key="landing-clayjs-check.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open landing-clayjs-check.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="landing-clayjs-check.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for landing-clayjs-check.html" data-bevel-action="actions" data-bevel-key="landing-clayjs-check.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="notes.html"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select notes.html" checked><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="notes.html">notes.html</button><span class="bevel-files__detail">notes.hyperclay.com</span></span></span></td><td class="bevel-files__status"><span class="bevel-files__pill" title="Has a share link"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg>Shared</span></td><td class="bevel-files__updated"><time datetime="2026-08-14T10:18" title="Aug 14, 2026, 10:18 AM">Aug 14</time></td><td class="bevel-files__size">9 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share notes.html" data-bevel-action="share" data-bevel-key="notes.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open notes.html in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="notes.html"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for notes.html" aria-haspopup="menu" aria-controls="fb-row-menu" aria-expanded="false" data-bevel-open="fb-row-menu" data-bevel-action="actions" data-bevel-key="notes.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="hello.md"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select hello.md"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="hello.md">hello.md</button><span class="bevel-files__detail">panphora.hyperclay.com/hello.md</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated"><time datetime="2026-06-02T12:09" title="Jun 2, 2026, 12:09 PM">Jun 2</time></td><td class="bevel-files__size">1 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share hello.md" data-bevel-action="share" data-bevel-key="hello.md"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open hello.md in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="hello.md"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for hello.md" data-bevel-action="actions" data-bevel-key="hello.md"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr><tr class="bevel-files__row" data-bevel-key="logo.png"><td class="bevel-files__pick"><label class="bevel-checkbox bevel-checkbox--small"><input type="checkbox" class="bevel-sr-only" aria-label="Select logo.png"><span class="bevel-checkbox__box"></span></label></td><td class="bevel-files__name"><span class="bevel-files__anchor"><span class="bevel-files__kind"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-files__label"><button type="button" class="bevel-files__title" data-bevel-action="open" data-bevel-key="logo.png">logo.png</button><span class="bevel-files__detail">panphora.hyperclay.com/logo.png</span></span></span></td><td class="bevel-files__status"></td><td class="bevel-files__updated"><time datetime="2026-06-02T12:11" title="Jun 2, 2026, 12:11 PM">Jun 2</time></td><td class="bevel-files__size">210 KB</td><td class="bevel-files__actions"><span class="bevel-files__tools"><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Share logo.png" data-bevel-action="share" data-bevel-key="logo.png"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></button><button type="button" class="bevel-files__tool bevel-files__tool--reveal" aria-label="Open logo.png in a new tab" data-bevel-action="open-in-new-tab" data-bevel-key="logo.png"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></button><button type="button" class="bevel-files__tool" aria-label="Actions for logo.png" data-bevel-action="actions" data-bevel-key="logo.png"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></span></td></tr></tbody></table></div><div class="bevel-files__foot"><span>15 items &#183; 6 folders, 7 sites, 2 uploads</span><span>7 of 25 sites in use</span></div></div>
28
+ <div id="fb-row-menu" class="bevel-menu" popover="manual" role="menu" aria-label="Actions for notes.html"><div class="bevel-menu__title">notes.html</div><button type="button" role="menuitem" data-bevel-key="open" tabindex="0"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg></span>Open<kbd>&#8629;</kbd></button><button type="button" role="menuitem" data-bevel-key="edit-code" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"/></svg></span>Edit code</button><button type="button" role="menuitem" data-bevel-key="share" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg></span>Share&#8230;</button><button type="button" role="menuitem" data-bevel-key="download" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"/></svg></span>Download</button><hr><button type="button" role="menuitem" data-bevel-key="rename" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"/></svg></span>Rename</button><button type="button" role="menuitem" data-bevel-key="duplicate" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z"/></svg></span>Duplicate</button><button type="button" role="menuitem" data-bevel-key="move" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3ZM7 13.5h10m-3-3 3 3-3 3"/></svg></span>Move to folder&#8230;</button><button type="button" role="menuitem" data-bevel-key="move-account" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z"/></svg></span>Move to another account&#8230;</button><button type="button" role="menuitem" data-bevel-key="make-private" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M6 11h12v10H6ZM8 11V7a4 4 0 0 1 8 0v4"/></svg></span>Make private</button><hr><button type="button" role="menuitem" data-bevel-key="versions" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M136,80v43.47l36.12,21.67a8,8,0,0,1-8.24,13.72l-40-24A8,8,0,0,1,120,128V80a8,8,0,0,1,16,0Zm-8-48A95.44,95.44,0,0,0,60.08,60.15C52.81,67.51,46.35,74.59,40,82V64a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H72a8,8,0,0,0,0-16H49c7.15-8.42,14.27-16.35,22.39-24.57a80,80,0,1,1,1.66,114.75,8,8,0,1,0-11,11.64A96,96,0,1,0,128,32Z"/></svg></span>Version history</button><button type="button" role="menuitem" data-bevel-key="domains" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M16 12a4 9 0 1 1-8 0 4 9 0 0 1 8 0M3 12h18"/></svg></span>Custom domains</button><button type="button" role="menuitem" data-bevel-key="subdomain" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M165.66,90.34a8,8,0,0,1,0,11.32l-64,64a8,8,0,0,1-11.32-11.32l64-64A8,8,0,0,1,165.66,90.34ZM215.6,40.4a56,56,0,0,0-79.2,0L106.34,70.45a8,8,0,0,0,11.32,11.32l30.06-30a40,40,0,0,1,56.57,56.56l-30.07,30.06a8,8,0,0,0,11.31,11.32L215.6,119.6a56,56,0,0,0,0-79.2ZM138.34,174.22l-30.06,30.06a40,40,0,1,1-56.56-56.57l30.05-30.05a8,8,0,0,0-11.32-11.32L40.4,136.4a56,56,0,0,0,79.2,79.2l30.06-30.07a8,8,0,0,0-11.32-11.31Z"/></svg></span>Hyperclay subdomain</button><hr><button type="button" role="menuitem" data-bevel-key="add-cms" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M10 5l1.8 5.2L17 12l-5.2 1.8L10 19l-1.8-5.2L3 12l5.2-1.8ZM18 2.5v4M16 4.5h4M18.5 16v4M16.5 18h4"/></svg></span>Add CMS with AI</button><button type="button" role="menuitem" data-bevel-key="signups" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M13 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0ZM2 21a7 7 0 0 1 14 0M19 7v6M16 10h6"/></svg></span>Enable signups</button><button type="button" role="menuitem" data-bevel-key="discover" tabindex="-1"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0M16 8l-2 6-6 2 2-6Z"/></svg></span>Add to Discover</button><button type="button" role="menuitem" data-bevel-key="managed-pages" tabindex="-1" disabled><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M20 6a8 3 0 1 1-16 0 8 3 0 0 1 16 0v12a8 3 0 0 1-16 0V6M4 12a8 3 0 0 0 16 0"/></svg></span>Managed pages come from the collection</button><hr><button type="button" role="menuitem" data-bevel-key="delete" tabindex="-1" data-tone="danger"><span><svg aria-hidden="true" height="15" width="15" viewBox="0 0 256 256" fill="currentColor"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg></span>Delete</button></div>
29
+ </section>
30
+ <section class="bevel-section bevel-files-example__section" id="fb-site" aria-labelledby="fb-site-title">
31
+ <p class="bevel-kicker" id="fb-site-crumb">Files / card-canvas.html</p><div class="bevel-app-shell-example__head"><h2 id="fb-site-title">card-canvas.html</h2><div class="bevel-buttons"><span class="bevel-files__detail bevel-files__detail--location">card-canvas.hyperclay.com</span><span class="bevel-files__pill bevel-files__pill--good">Public</span><button type="button" class="bevel-button bevel-button--small"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M8.2 10.8l7.6-4.1M8.2 13.2l7.6 4.1M8.5 12a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 5.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM20.5 18.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0Z"/></svg><span class="bevel-button__label">Share</span></button><button type="button" class="bevel-button bevel-button--small"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg><span class="bevel-button__label">Open</span></button><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Actions for card-canvas.html"><svg aria-hidden="true" height="17" width="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 12h1m5 0h1m5 0h1"/></svg></button></div></div><nav class="bevel-seg bevel-seg--links" aria-label="card-canvas.html"><a class="bevel-button" href="#fb-site"><span class="bevel-button__label">Preview</span></a><a class="bevel-button" href="#fb-site" aria-current="page"><span class="bevel-button__label">Code</span></a><a class="bevel-button" href="#fb-site"><span class="bevel-button__label">Versions 14</span></a><a class="bevel-button" href="#fb-site"><span class="bevel-button__label">Domains 1</span></a></nav>
32
+ <div class="bevel-code-editor-example"><div class="bevel-code-editor"><div class="bevel-code-editor__tab"><span class="bevel-code-editor__name">card-canvas.html</span><i class="bevel-code-editor__dot" title="Unsaved changes"></i><span class="bevel-code-editor__spacer"></span><span class="bevel-code-editor__host">card-canvas.hyperclay.com</span></div><div class="bevel-code-editor__toolbar" role="toolbar" aria-label="Editor actions"><button class="bevel-code-editor__tool" type="button" aria-label="Undo"><span aria-hidden="true">&#8630;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Redo"><span aria-hidden="true">&#8631;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="false">Find</button><button class="bevel-code-editor__tool" type="button" aria-label="Outdent"><span aria-hidden="true">&#8676;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Indent"><span aria-hidden="true">&#8677;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="true">Wrap</button><span class="bevel-code-editor__spacer"></span><button class="bevel-button bevel-button--primary bevel-button--small" type="button"><span class="bevel-button__label">Save</span></button></div><div class="bevel-code-editor__surface"><pre class="bevel-code-editor__sample" aria-label="Source preview"><code><span class="bevel-code-editor__line" data-line="1"><span class="bevel-code-editor__comment">&lt;!-- card-canvas.html, saved by the page itself --&gt;</span></span>
33
+ <span class="bevel-code-editor__line" data-line="2"><span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">html</span> <span class="bevel-code-editor__attr">lang</span><span class="bevel-code-editor__punct">=</span><span class="bevel-code-editor__string">"en"</span> <span class="bevel-code-editor__attr">editmode</span><span class="bevel-code-editor__punct">=</span><span class="bevel-code-editor__string">"false"</span><span class="bevel-code-editor__punct">&gt;</span></span>
34
+ <span class="bevel-code-editor__line" data-line="3"> <span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">script</span> <span class="bevel-code-editor__attr">src</span><span class="bevel-code-editor__punct">=</span><span class="bevel-code-editor__string">"https://clayjs.com/v1/clay.js?plugins=sortable,sync"</span><span class="bevel-code-editor__punct">&gt;&lt;/</span><span class="bevel-code-editor__tag">script</span><span class="bevel-code-editor__punct">&gt;</span></span>
35
+ <span class="bevel-code-editor__line" data-line="4"> <span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">section</span> <span class="bevel-code-editor__attr">class</span><span class="bevel-code-editor__punct">=</span><span class="bevel-code-editor__string">"board"</span> <span class="bevel-code-editor__attr">data-cards</span><span class="bevel-code-editor__punct">=</span><span class="bevel-code-editor__string">"</span><span class="bevel-code-editor__number">22</span><span class="bevel-code-editor__string">"</span><span class="bevel-code-editor__punct">&gt;</span></span>
36
+ <span class="bevel-code-editor__line" data-line="5"> <span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">h1</span><span class="bevel-code-editor__punct">&gt;</span>Card canvas<span class="bevel-code-editor__punct">&lt;/</span><span class="bevel-code-editor__tag">h1</span><span class="bevel-code-editor__punct">&gt;</span></span>
37
+ <span class="bevel-code-editor__line" data-line="6"> <span class="bevel-code-editor__punct">&lt;/</span><span class="bevel-code-editor__invalid">sectoin</span><span class="bevel-code-editor__punct">&gt;</span></span>
38
+ <span class="bevel-code-editor__line" data-line="7"> <span class="bevel-code-editor__punct">&lt;</span><span class="bevel-code-editor__tag">style</span><span class="bevel-code-editor__punct">&gt;</span></span>
39
+ <span class="bevel-code-editor__line" data-line="8"> <span class="bevel-code-editor__punct">.</span><span class="bevel-code-editor__tag">board</span> <span class="bevel-code-editor__punct">{</span> <span class="bevel-code-editor__attr">gap</span><span class="bevel-code-editor__punct">:</span> <span class="bevel-code-editor__number">18px</span><span class="bevel-code-editor__punct">;</span> <span class="bevel-code-editor__punct">}</span></span>
40
+ <span class="bevel-code-editor__line" data-line="9"> <span class="bevel-code-editor__punct">&lt;/</span><span class="bevel-code-editor__tag">style</span><span class="bevel-code-editor__punct">&gt;</span></span></code></pre></div><div class="bevel-code-editor__status"><span class="bevel-code-editor__meta">Saved <b>2h ago</b> by panphora</span><span class="bevel-code-editor__spacer"></span><span class="bevel-code-editor__meta">182.6 KB</span><span class="bevel-code-editor__meta">2,625 lines</span></div></div><div class="bevel-code-editor__bar" role="toolbar" aria-label="Editor actions on a narrow screen"><div class="bevel-code-editor__bar-tools"><button class="bevel-code-editor__tool" type="button" aria-label="Undo"><span aria-hidden="true">&#8630;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Redo"><span aria-hidden="true">&#8631;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="false">Find</button><button class="bevel-code-editor__tool" type="button" aria-label="Outdent"><span aria-hidden="true">&#8676;</span></button><button class="bevel-code-editor__tool" type="button" aria-label="Indent"><span aria-hidden="true">&#8677;</span></button><button class="bevel-code-editor__tool" type="button" aria-pressed="true">Wrap</button><button class="bevel-code-editor__tool" type="button">Fold</button><button class="bevel-code-editor__tool" type="button">Sug</button></div><i class="bevel-code-editor__dot" title="Unsaved changes"></i><button class="bevel-button bevel-button--primary bevel-button--small" type="button"><span class="bevel-button__label">Save</span></button></div></div>
41
+ </section>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ <div class="bevel-bulk-bar bevel-bulk-bar--floating" role="toolbar" aria-label="Bulk actions"><span class="bevel-bulk-bar__count">3 selected</span><span class="bevel-bulk-bar__rule" role="separator" aria-orientation="vertical"></span><button class="bevel-bulk-bar__action" data-bevel-action="move" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.71" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3ZM7 13.5h10m-3-3 3 3-3 3"/></svg>Move to folder</button><button class="bevel-bulk-bar__action bevel-bulk-bar__action--danger" data-bevel-action="delete" type="button"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"/></svg>Delete</button><span class="bevel-bulk-bar__rule" role="separator" aria-orientation="vertical"></span><button class="bevel-bulk-bar__clear" data-bevel-action="clear" type="button" aria-label="Clear selection"><svg aria-hidden="true" height="14" width="14" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></div>
46
+ </div>
47
+ </main>
48
+ <div class="bevel-toasts" aria-live="polite"><article class="bevel-toast" data-bevel-tone="success" data-bevel-key="cms-job"><span class="bevel-toast__icon"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="m5 12 4 4L19 6"/></svg></span><div class="bevel-toast__body"><h2 class="bevel-toast__title">CMS job done</h2><p class="bevel-toast__message">just-launch.html has a CMS now.</p><button class="bevel-toast__action bevel-button bevel-button--small" type="button"><span class="bevel-button__label">Open CMS</span></button></div><button class="bevel-toast__close" type="button" aria-label="Dismiss CMS job done"><svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></article><article class="bevel-toast" data-bevel-tone="error" data-bevel-key="rename-failed" role="alert"><span class="bevel-toast__icon"><svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><path d="M236.8,188.09,149.35,36.22h0a24.76,24.76,0,0,0-42.7,0L19.2,188.09a23.51,23.51,0,0,0,0,23.72A24.35,24.35,0,0,0,40.55,224h174.9a24.35,24.35,0,0,0,21.33-12.19A23.51,23.51,0,0,0,236.8,188.09ZM222.93,203.8a8.5,8.5,0,0,1-7.48,4.2H40.55a8.5,8.5,0,0,1-7.48-4.2,7.59,7.59,0,0,1,0-7.72L120.52,44.21a8.75,8.75,0,0,1,15,0l87.45,151.87A7.59,7.59,0,0,1,222.93,203.8ZM120,144V104a8,8,0,0,1,16,0v40a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,180Z"/></svg></span><div class="bevel-toast__body"><h2 class="bevel-toast__title">Couldn't rename notes.html</h2><p class="bevel-toast__message">A file called notes-2026.html already exists in this folder.</p></div><button class="bevel-toast__close" type="button" aria-label="Dismiss Couldn't rename notes.html"><svg aria-hidden="true" viewBox="0 0 256 256" fill="currentColor"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg></button></article></div>
49
+ <script src="../../vendor/floating-ui/floating-ui.core.umd.min.js"></script>
50
+ <script src="../../vendor/floating-ui/floating-ui.dom.umd.min.js"></script>
51
+ <script src="../../bevel.js"></script>
52
+ </body>
53
+ </html>
package/examples/components/file-tree.html ADDED
@@ -0,0 +1,34 @@
1
+ <!doctype html>
2
+ <html data-theme="light" lang="en">
3
+ <head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>File tree · Bevel</title><link rel="stylesheet" href="../../bevel-fonts.css"><link rel="stylesheet" href="../../bevel.css"></head>
4
+ <body>
5
+ <main class="bevel-example bevel-navigation-example">
6
+ <header class="bevel-example__header"><div class="bevel-eyebrow">Hyperclay / Sidebar</div><h1>The whole account, one column wide.</h1><p>Folders, sites and dimmed uploads on 28px rows. The filter hides what does not match and opens the folders that do, the picked row keeps the brass bar, and a folder under a drag takes the brass tint.</p></header>
7
+ <div class="bevel-file-tree-example__frame">
8
+ <div class="bevel-file-tree-example__side">
9
+ <div class="bevel-file-tree-example__head"><label class="bevel-sr-only" for="file-tree-filter">Filter files</label><input class="bevel-input bevel-input--small" id="file-tree-filter" type="search" placeholder="Filter files" data-bevel-file-tree="file-tree-demo"><button type="button" class="bevel-icon-button bevel-icon-button--flat" aria-label="Collapse sidebar" aria-controls="file-tree-demo" aria-expanded="true" data-bevel-action="collapse"><svg aria-hidden="true" height="15" width="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 4h18v16H3ZM9 4v16"/></svg></button></div>
10
+ <div class="bevel-file-tree" id="file-tree-demo" role="tree" aria-label="Account files" data-bevel-selected="card-canvas.html"><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="ft-archive" data-bevel-expanded="false" data-bevel-key="archive" data-bevel-label="archive"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">archive</span></button><div class="bevel-file-tree__group" id="ft-archive" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="archive/2024-portfolio.html" data-bevel-label="2024-portfolio.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">2024-portfolio.html</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="archive/pitch-deck.pdf" data-bevel-label="pitch-deck.pdf"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-file-tree__name">pitch-deck.pdf</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="ft-assets" data-bevel-expanded="false" data-bevel-key="assets" data-bevel-label="assets"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">assets</span></button><div class="bevel-file-tree__group" id="ft-assets" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-expanded="false" aria-controls="ft-assets-brand" data-bevel-expanded="false" data-bevel-key="assets/brand" data-bevel-label="brand"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">brand</span></button><div class="bevel-file-tree__group" id="ft-assets-brand" role="group" hidden><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="3" aria-selected="false" data-bevel-key="assets/brand/wordmark.svg" data-bevel-label="wordmark.svg"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">wordmark.svg</span></button></div><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="assets/logo-dark.png" data-bevel-label="logo-dark.png"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">logo-dark.png</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="true" aria-controls="ft-core" data-bevel-expanded="true" data-bevel-key="core" data-bevel-label="core"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">core</span></button><div class="bevel-file-tree__group" id="ft-core" role="group"><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="core/devlog.html" data-bevel-label="devlog.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">devlog.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="core/kanban.html" data-bevel-label="kanban.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">kanban.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="core/writer.html" data-bevel-label="writer.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">writer.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="ft-planning-canvas" data-bevel-expanded="false" data-bevel-key="planning-canvas" data-bevel-label="planning-canvas"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">planning-canvas</span></button><div class="bevel-file-tree__group" id="ft-planning-canvas" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="planning-canvas/board.html" data-bevel-label="board.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">board.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="ft-qa-r2-livesync" data-bevel-expanded="false" data-bevel-key="qa-r2-livesync" data-bevel-label="qa-r2-livesync"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">qa-r2-livesync</span></button><div class="bevel-file-tree__group" id="ft-qa-r2-livesync" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="qa-r2-livesync/board.html" data-bevel-label="board.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">board.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-expanded="false" aria-controls="ft-writing" data-bevel-expanded="false" data-bevel-key="writing" data-bevel-label="writing"><span class="bevel-file-tree__caret"><svg aria-hidden="true" height="11" width="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.18" stroke-linecap="square" stroke-linejoin="miter"><path d="m9 5 7 7-7 7"/></svg></span><span class="bevel-file-tree__icon"><svg class="bevel-file-tree__folder-shut" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 7V4h6l3 3h9v13H3Z"/></svg><svg class="bevel-file-tree__folder-open" aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M3 20V4h6l3 3h9v4M3 20h15l4-9H7Z"/></svg></span><span class="bevel-file-tree__name">writing</span></button><div class="bevel-file-tree__group" id="ft-writing" role="group" hidden><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="2" aria-selected="false" data-bevel-key="writing/board.html" data-bevel-label="board.html"><span class="bevel-file-tree__indent" aria-hidden="true"></span><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">board.html</span></button></div><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="card-canvas.html" data-bevel-label="card-canvas.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">card-canvas.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="early-access.html" data-bevel-label="early-access.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">early-access.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="hi.html" data-bevel-label="hi.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">hi.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="how-i-got-hyperclay-com.html" data-bevel-label="how-i-got-hyperclay-com.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">how-i-got-hyperclay-com.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="just-launch.html" data-bevel-label="just-launch.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">just-launch.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="landing-clayjs-check.html" data-bevel-label="landing-clayjs-check.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">landing-clayjs-check.html</span></button><button class="bevel-file-tree__row" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="notes.html" data-bevel-label="notes.html"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,120V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v80a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48v24a8,8,0,0,0,16,0ZM160,51.31,188.69,80H160ZM68,160v48a8,8,0,0,1-16,0V192H32v16a8,8,0,0,1-16,0V160a8,8,0,0,1,16,0v16H52V160a8,8,0,0,1,16,0Zm56,0a8,8,0,0,1-8,8h-8v40a8,8,0,0,1-16,0V168H84a8,8,0,0,1,0-16h32A8,8,0,0,1,124,160Zm72,0v48a8,8,0,0,1-16,0V184l-9.6,12.8a8,8,0,0,1-12.8,0L148,184v24a8,8,0,0,1-16,0V160a8,8,0,0,1,14.4-4.8L164,178.67l17.6-23.47A8,8,0,0,1,196,160Zm56,48a8,8,0,0,1-8,8H216a8,8,0,0,1-8-8V160a8,8,0,0,1,16,0v40h20A8,8,0,0,1,252,208Z"/></svg></span><span class="bevel-file-tree__name">notes.html</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="hello.md" data-bevel-label="hello.md"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="square" stroke-linejoin="miter"><path d="M5 3h9l5 5v13H5ZM14 3v6h5"/></svg></span><span class="bevel-file-tree__name">hello.md</span></button><button class="bevel-file-tree__row bevel-file-tree__row--upload" type="button" role="treeitem" aria-level="1" aria-selected="false" data-bevel-key="logo.png" data-bevel-label="logo.png"><span class="bevel-file-tree__caret" aria-hidden="true"></span><span class="bevel-file-tree__icon"><svg aria-hidden="true" height="16" width="16" viewBox="0 0 256 256" fill="currentColor"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z"/></svg></span><span class="bevel-file-tree__name">logo.png</span></button><p class="bevel-file-tree__empty" hidden>No file matches that filter.</p></div>
11
+ </div>
12
+ <div class="bevel-file-tree-example__main"><h2 id="file-tree-open">card-canvas.html</h2><dl class="bevel-file-tree-example__facts"><dt>Rows</dt><dd>28px, 13px IBM Plex Sans</dd><dt>Depth</dt><dd>18px per level, guide always on</dd><dt>Uploads</dt><dd>Dimmed to the faint token</dd><dt>Drop</dt><dd>writing is under a drag</dd></dl></div>
13
+ </div>
14
+ <output aria-live="polite">Pick a row to open it.</output>
15
+ </main>
16
+
17
+ <script src="../../bevel.js"></script>
18
+ <script>((host, { ready } = {}) => {
19
+ ready(() => {
20
+ const tree = host.querySelector(".bevel-file-tree"), title = host.querySelector("#file-tree-open"), output = host.querySelector("output");
21
+ if (!tree) return;
22
+ tree.querySelector('.bevel-file-tree__row[data-bevel-key="writing"]')?.setAttribute("data-bevel-drop-target", "");
23
+ tree.addEventListener("bevel:change", (event) => {
24
+ if (event.detail.action !== "select") return;
25
+ title.textContent = event.detail.next;
26
+ output.textContent = `Opened ${event.detail.next}.`;
27
+ });
28
+ tree.addEventListener("bevel:filter", (event) => {
29
+ output.textContent = event.detail.value ? `${event.detail.matches} files match ${event.detail.value}.` : "Pick a row to open it.";
30
+ });
31
+ });
32
+ })(document.body, {standalone:true,assetRoot:"../../",ready:callback => { if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", callback, {once:true}); else callback(); }});</script>
33
+ </body>
34
+ </html>