@dfosco/storyboard-core 4.2.0-beta.2 → 4.2.0-beta.21

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 (414) hide show
  1. package/commandpalette.config.json +109 -24
  2. package/dist/storyboard-ui.css +1 -1
  3. package/dist/storyboard-ui.js +17379 -28568
  4. package/dist/storyboard-ui.js.map +1 -1
  5. package/dist/tailwind.css +1 -1
  6. package/package.json +5 -2
  7. package/scaffold/agents/prompt-agent.agent.md +181 -0
  8. package/scaffold/agents/terminal-agent.agent.md +351 -0
  9. package/scaffold/codex/config.toml +246 -0
  10. package/scaffold/manifest.json +5 -0
  11. package/scaffold/skills/canvas/SKILL.md +5 -4
  12. package/scaffold/skills/ship/SKILL.md +1 -1
  13. package/scaffold/storyboard.config.json +14 -1
  14. package/scaffold/toolbar.config.json +1 -1
  15. package/src/ActionMenuButton.jsx +100 -0
  16. package/src/AutosyncMenuButton.css +67 -0
  17. package/src/AutosyncMenuButton.jsx +241 -0
  18. package/src/BranchSelect.jsx +29 -0
  19. package/src/BranchSelect.module.css +30 -0
  20. package/src/CanvasAgentsMenu.jsx +87 -0
  21. package/src/CanvasCreateMenu.jsx +609 -0
  22. package/src/CanvasSnap.css +27 -0
  23. package/src/CanvasSnap.jsx +51 -0
  24. package/src/CanvasUndoRedo.css +36 -0
  25. package/src/CanvasUndoRedo.jsx +62 -0
  26. package/src/CanvasZoomControl.css +53 -0
  27. package/src/CanvasZoomControl.jsx +49 -0
  28. package/src/CanvasZoomToFit.css +18 -0
  29. package/src/CanvasZoomToFit.jsx +26 -0
  30. package/src/CommandMenu.css +8 -0
  31. package/src/CommandMenu.jsx +286 -0
  32. package/src/CommandPalette.jsx +35 -0
  33. package/src/CommandPaletteTrigger.jsx +25 -0
  34. package/src/CommentsMenuButton.jsx +38 -0
  35. package/src/CoreUIBar.css +47 -0
  36. package/src/CoreUIBar.jsx +855 -0
  37. package/src/CreateMenuButton.jsx +116 -0
  38. package/src/HideChromeTrigger.jsx +40 -0
  39. package/src/InspectorPanel.css +109 -0
  40. package/src/InspectorPanel.jsx +629 -0
  41. package/src/PwaInstallBanner.css +42 -0
  42. package/src/PwaInstallBanner.jsx +124 -0
  43. package/src/SidePanel.jsx +260 -0
  44. package/src/ThemeMenuButton.jsx +136 -0
  45. package/src/autosync/server.js +202 -5
  46. package/src/autosync/server.test.js +112 -0
  47. package/src/canvas/__tests__/agent-integration.test.js +593 -0
  48. package/src/canvas/__tests__/helpers/browser.js +95 -0
  49. package/src/canvas/__tests__/helpers/canvas-api.js +129 -0
  50. package/src/canvas/__tests__/helpers/perf.js +118 -0
  51. package/src/canvas/__tests__/helpers/setup.js +176 -0
  52. package/src/canvas/__tests__/helpers/tmux.js +130 -0
  53. package/src/canvas/__tests__/helpers/transcript.js +129 -0
  54. package/src/canvas/__tests__/terminal-integration.test.js +175 -0
  55. package/src/canvas/hot-pool.js +757 -0
  56. package/src/canvas/materializer.js +31 -0
  57. package/src/canvas/materializer.test.js +56 -0
  58. package/src/canvas/selectedWidgets.js +65 -7
  59. package/src/canvas/server.js +1801 -22
  60. package/src/canvas/server.test.js +239 -0
  61. package/src/canvas/terminal-config.js +331 -0
  62. package/src/canvas/terminal-registry.js +38 -0
  63. package/src/canvas/terminal-server.js +1037 -29
  64. package/src/canvas/writeGuard.js +51 -3
  65. package/src/canvasConfig.js +67 -1
  66. package/src/canvasConfig.test.js +79 -1
  67. package/src/cli/agent.js +85 -0
  68. package/src/cli/branch.js +232 -0
  69. package/src/cli/canvasAdd.js +59 -12
  70. package/src/cli/canvasBatch.js +98 -0
  71. package/src/cli/canvasBounds.js +1 -1
  72. package/src/cli/canvasRead.js +1 -1
  73. package/src/cli/canvasUpdate.js +179 -0
  74. package/src/cli/create.js +38 -14
  75. package/src/cli/dev.js +157 -83
  76. package/src/cli/exit.js +23 -24
  77. package/src/cli/index.js +55 -2
  78. package/src/cli/proxy.js +96 -37
  79. package/src/cli/schemas.js +22 -4
  80. package/src/cli/server.js +148 -25
  81. package/src/cli/serverUrl.js +8 -3
  82. package/src/cli/sessions.js +131 -5
  83. package/src/cli/setup.js +109 -11
  84. package/src/cli/terminal-commands.js +16 -8
  85. package/src/cli/terminal-messaging.js +231 -0
  86. package/src/cli/terminal-welcome.js +365 -33
  87. package/src/commandActions.js +1 -0
  88. package/src/commandPaletteConfig.js +9 -0
  89. package/src/comments/auth.js +2 -1
  90. package/src/comments/ui/AuthModal.jsx +114 -0
  91. package/src/comments/ui/CommentWindow.jsx +329 -0
  92. package/src/comments/ui/CommentsDrawer.jsx +102 -0
  93. package/src/comments/ui/Composer.jsx +64 -0
  94. package/src/comments/ui/authModal.test.js +1 -1
  95. package/src/comments/ui/commentWindow.js +16 -17
  96. package/src/comments/ui/commentsDrawer.js +25 -26
  97. package/src/comments/ui/composer.js +23 -24
  98. package/src/comments/ui/index.js +2 -3
  99. package/src/configSchema.js +59 -1
  100. package/src/configStore.js +161 -0
  101. package/src/core-ui-colors.css +12 -0
  102. package/src/devtools.js +17 -19
  103. package/src/devtools.test.js +18 -9
  104. package/src/featureFlags.js +12 -5
  105. package/src/fuzzySearch.test.js +10 -0
  106. package/src/index.js +14 -2
  107. package/src/lib/components/ui/alert/alert-action.jsx +11 -0
  108. package/src/lib/components/ui/alert/alert-description.jsx +11 -0
  109. package/src/lib/components/ui/alert/alert-title.jsx +11 -0
  110. package/src/lib/components/ui/alert/alert.jsx +25 -0
  111. package/src/lib/components/ui/alert/index.js +15 -15
  112. package/src/lib/components/ui/avatar/avatar-badge.jsx +22 -0
  113. package/src/lib/components/ui/avatar/avatar-fallback.jsx +18 -0
  114. package/src/lib/components/ui/avatar/avatar-group-count.jsx +19 -0
  115. package/src/lib/components/ui/avatar/avatar-group.jsx +19 -0
  116. package/src/lib/components/ui/avatar/avatar-image.jsx +15 -0
  117. package/src/lib/components/ui/avatar/avatar.jsx +19 -0
  118. package/src/lib/components/ui/avatar/index.js +20 -20
  119. package/src/lib/components/ui/badge/badge.jsx +31 -0
  120. package/src/lib/components/ui/badge/index.js +2 -2
  121. package/src/lib/components/ui/button/button.jsx +100 -0
  122. package/src/lib/components/ui/button/index.js +9 -9
  123. package/src/lib/components/ui/card/card-action.jsx +11 -0
  124. package/src/lib/components/ui/card/card-content.jsx +11 -0
  125. package/src/lib/components/ui/card/card-description.jsx +11 -0
  126. package/src/lib/components/ui/card/card-footer.jsx +11 -0
  127. package/src/lib/components/ui/card/card-header.jsx +19 -0
  128. package/src/lib/components/ui/card/card-title.jsx +11 -0
  129. package/src/lib/components/ui/card/card.jsx +17 -0
  130. package/src/lib/components/ui/card/index.js +23 -23
  131. package/src/lib/components/ui/checkbox/checkbox.jsx +29 -0
  132. package/src/lib/components/ui/checkbox/index.js +5 -5
  133. package/src/lib/components/ui/collapsible/collapsible-content.jsx +7 -0
  134. package/src/lib/components/ui/collapsible/collapsible-trigger.jsx +7 -0
  135. package/src/lib/components/ui/collapsible/collapsible.jsx +7 -0
  136. package/src/lib/components/ui/collapsible/index.js +11 -11
  137. package/src/lib/components/ui/dialog/dialog-close.jsx +7 -0
  138. package/src/lib/components/ui/dialog/dialog-content.jsx +34 -0
  139. package/src/lib/components/ui/dialog/dialog-description.jsx +15 -0
  140. package/src/lib/components/ui/dialog/dialog-footer.jsx +23 -0
  141. package/src/lib/components/ui/dialog/dialog-header.jsx +11 -0
  142. package/src/lib/components/ui/dialog/dialog-overlay.jsx +15 -0
  143. package/src/lib/components/ui/dialog/dialog-portal.jsx +4 -0
  144. package/src/lib/components/ui/dialog/dialog-title.jsx +15 -0
  145. package/src/lib/components/ui/dialog/dialog-trigger.jsx +7 -0
  146. package/src/lib/components/ui/dialog/dialog.jsx +4 -0
  147. package/src/lib/components/ui/dialog/index.js +32 -32
  148. package/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.jsx +8 -0
  149. package/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.jsx +30 -0
  150. package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.jsx +22 -0
  151. package/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.jsx +16 -0
  152. package/src/lib/components/ui/dropdown-menu/dropdown-menu-group.jsx +7 -0
  153. package/src/lib/components/ui/dropdown-menu/dropdown-menu-item.jsx +20 -0
  154. package/src/lib/components/ui/dropdown-menu/dropdown-menu-label.jsx +17 -0
  155. package/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.jsx +4 -0
  156. package/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.jsx +7 -0
  157. package/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.jsx +29 -0
  158. package/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.jsx +15 -0
  159. package/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.jsx +16 -0
  160. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.jsx +15 -0
  161. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.jsx +23 -0
  162. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.jsx +4 -0
  163. package/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.jsx +7 -0
  164. package/src/lib/components/ui/dropdown-menu/dropdown-menu.jsx +4 -0
  165. package/src/lib/components/ui/dropdown-menu/index.js +52 -52
  166. package/src/lib/components/ui/input/index.js +5 -5
  167. package/src/lib/components/ui/input/input.jsx +19 -0
  168. package/src/lib/components/ui/label/index.js +5 -5
  169. package/src/lib/components/ui/label/label.jsx +19 -0
  170. package/src/lib/components/ui/panel/index.js +21 -21
  171. package/src/lib/components/ui/panel/panel-body.jsx +11 -0
  172. package/src/lib/components/ui/panel/panel-close.jsx +16 -0
  173. package/src/lib/components/ui/panel/panel-content.jsx +29 -0
  174. package/src/lib/components/ui/panel/panel-footer.jsx +11 -0
  175. package/src/lib/components/ui/panel/panel-header.jsx +11 -0
  176. package/src/lib/components/ui/panel/panel-title.jsx +12 -0
  177. package/src/lib/components/ui/panel/panel.jsx +4 -0
  178. package/src/lib/components/ui/popover/index.js +26 -26
  179. package/src/lib/components/ui/popover/popover-close.jsx +7 -0
  180. package/src/lib/components/ui/popover/popover-content.jsx +22 -0
  181. package/src/lib/components/ui/popover/popover-description.jsx +11 -0
  182. package/src/lib/components/ui/popover/popover-header.jsx +11 -0
  183. package/src/lib/components/ui/popover/popover-portal.jsx +4 -0
  184. package/src/lib/components/ui/popover/popover-title.jsx +11 -0
  185. package/src/lib/components/ui/popover/popover-trigger.jsx +8 -0
  186. package/src/lib/components/ui/popover/popover.jsx +4 -0
  187. package/src/lib/components/ui/searchable-list.jsx +159 -0
  188. package/src/lib/components/ui/select/index.js +35 -35
  189. package/src/lib/components/ui/select/select-content.jsx +30 -0
  190. package/src/lib/components/ui/select/select-group-heading.jsx +17 -0
  191. package/src/lib/components/ui/select/select-group.jsx +15 -0
  192. package/src/lib/components/ui/select/select-item.jsx +26 -0
  193. package/src/lib/components/ui/select/select-label.jsx +11 -0
  194. package/src/lib/components/ui/select/select-portal.jsx +4 -0
  195. package/src/lib/components/ui/select/select-scroll-down-button.jsx +18 -0
  196. package/src/lib/components/ui/select/select-scroll-up-button.jsx +18 -0
  197. package/src/lib/components/ui/select/select-separator.jsx +15 -0
  198. package/src/lib/components/ui/select/select-trigger.jsx +25 -0
  199. package/src/lib/components/ui/select/select.jsx +4 -0
  200. package/src/lib/components/ui/separator/index.js +5 -5
  201. package/src/lib/components/ui/separator/separator.jsx +22 -0
  202. package/src/lib/components/ui/sheet/index.js +32 -32
  203. package/src/lib/components/ui/sheet/sheet-close.jsx +7 -0
  204. package/src/lib/components/ui/sheet/sheet-content.jsx +35 -0
  205. package/src/lib/components/ui/sheet/sheet-description.jsx +15 -0
  206. package/src/lib/components/ui/sheet/sheet-footer.jsx +11 -0
  207. package/src/lib/components/ui/sheet/sheet-header.jsx +11 -0
  208. package/src/lib/components/ui/sheet/sheet-overlay.jsx +15 -0
  209. package/src/lib/components/ui/sheet/sheet-portal.jsx +4 -0
  210. package/src/lib/components/ui/sheet/sheet-title.jsx +15 -0
  211. package/src/lib/components/ui/sheet/sheet-trigger.jsx +7 -0
  212. package/src/lib/components/ui/sheet/sheet.jsx +4 -0
  213. package/src/lib/components/ui/textarea/index.js +5 -5
  214. package/src/lib/components/ui/textarea/textarea.jsx +18 -0
  215. package/src/lib/components/ui/toggle/index.js +6 -9
  216. package/src/lib/components/ui/toggle/toggle.jsx +36 -0
  217. package/src/lib/components/ui/toggle-group/index.js +8 -8
  218. package/src/lib/components/ui/toggle-group/toggle-group-item.jsx +29 -0
  219. package/src/lib/components/ui/toggle-group/toggle-group.jsx +43 -0
  220. package/src/lib/components/ui/tooltip/index.js +3 -3
  221. package/src/lib/components/ui/tooltip/tooltip-content.jsx +21 -0
  222. package/src/lib/components/ui/tooltip/tooltip-trigger.jsx +23 -0
  223. package/src/lib/components/ui/tooltip/tooltip.jsx +11 -0
  224. package/src/lib/components/ui/trigger-button/index.js +3 -3
  225. package/src/lib/components/ui/trigger-button/trigger-button.css +38 -0
  226. package/src/lib/components/ui/trigger-button/trigger-button.jsx +63 -0
  227. package/src/logger/devLogger.js +238 -0
  228. package/src/logger/devLogger.test.js +193 -0
  229. package/src/modes.test.js +4 -4
  230. package/src/mountStoryboardCore.js +123 -27
  231. package/src/paletteProviders.js +3 -0
  232. package/src/paletteProviders.test.js +2 -2
  233. package/src/server/index.js +98 -36
  234. package/src/sidepanel.css +214 -0
  235. package/src/styles/tailwind.css +1 -1
  236. package/src/svelte-plugin-ui/__tests__/ModeSwitch.test.ts +8 -8
  237. package/src/svelte-plugin-ui/__tests__/ToolbarShell.test.ts +11 -10
  238. package/src/svelte-plugin-ui/components/Icon.css +11 -0
  239. package/src/svelte-plugin-ui/components/Icon.jsx +281 -0
  240. package/src/svelte-plugin-ui/components/ModeSwitch.css +90 -0
  241. package/src/svelte-plugin-ui/components/ModeSwitch.jsx +47 -0
  242. package/src/svelte-plugin-ui/components/ToolbarShell.css +80 -0
  243. package/src/svelte-plugin-ui/components/ToolbarShell.jsx +84 -0
  244. package/src/svelte-plugin-ui/components/Viewfinder.css +412 -0
  245. package/src/svelte-plugin-ui/components/Viewfinder.jsx +512 -0
  246. package/src/svelte-plugin-ui/mount.ts +12 -16
  247. package/src/toolRegistry.js +4 -4
  248. package/src/toolbarConfigStore.js +30 -0
  249. package/src/tools/handlers/autosync.js +1 -1
  250. package/src/tools/handlers/canvasAddWidget.js +1 -1
  251. package/src/tools/handlers/canvasAgents.js +19 -0
  252. package/src/tools/handlers/canvasToolbar.js +8 -8
  253. package/src/tools/handlers/commandPalette.js +9 -0
  254. package/src/tools/handlers/comments.js +1 -1
  255. package/src/tools/handlers/create.js +1 -1
  256. package/src/tools/handlers/devtools.js +16 -0
  257. package/src/tools/handlers/devtools.test.js +38 -0
  258. package/src/tools/handlers/flows.js +1 -1
  259. package/src/tools/handlers/hideChrome.js +9 -0
  260. package/src/tools/handlers/paletteTheme.js +35 -0
  261. package/src/tools/handlers/theme.js +1 -1
  262. package/src/tools/registry.js +4 -1
  263. package/src/tools/surfaces/commandList.js +3 -3
  264. package/src/tools/surfaces/mainToolbar.js +3 -3
  265. package/src/tools/surfaces/registry.js +4 -4
  266. package/src/ui/design-modes.ts +2 -2
  267. package/src/ui/viewfinder.ts +1 -1
  268. package/src/vite/server-plugin.js +242 -60
  269. package/src/workshop/features/createCanvas/CreateCanvasForm.jsx +260 -0
  270. package/src/workshop/features/createCanvas/index.js +1 -1
  271. package/src/workshop/features/createFlow/CreateFlowForm.jsx +334 -0
  272. package/src/workshop/features/createFlow/index.js +1 -1
  273. package/src/workshop/features/createPage/CreatePageForm.jsx +304 -0
  274. package/src/workshop/features/createPage/index.js +1 -1
  275. package/src/workshop/features/createPrototype/CreatePrototypeForm.jsx +289 -0
  276. package/src/workshop/features/createPrototype/index.js +1 -1
  277. package/src/workshop/features/createPrototype/server.js +98 -0
  278. package/src/workshop/features/createStory/CreateStoryForm.jsx +208 -0
  279. package/src/workshop/features/createStory/index.js +1 -1
  280. package/src/workshop/ui/WorkshopPanel.jsx +98 -0
  281. package/src/workshop/ui/mount.ts +1 -1
  282. package/src/worktree/port.js +48 -0
  283. package/src/worktree/serverRegistry.js +120 -0
  284. package/toolbar.config.json +93 -42
  285. package/widgets.config.json +580 -12
  286. package/src/ActionMenuButton.svelte +0 -119
  287. package/src/AutosyncMenuButton.svelte +0 -397
  288. package/src/CanvasCreateMenu.svelte +0 -295
  289. package/src/CanvasSnap.svelte +0 -87
  290. package/src/CanvasUndoRedo.svelte +0 -108
  291. package/src/CanvasZoomControl.svelte +0 -111
  292. package/src/CanvasZoomToFit.svelte +0 -52
  293. package/src/CommandMenu.svelte +0 -249
  294. package/src/CommandPalette.svelte +0 -33
  295. package/src/CommentsMenuButton.svelte +0 -53
  296. package/src/CoreUIBar.svelte +0 -847
  297. package/src/CreateMenuButton.svelte +0 -133
  298. package/src/DocPanel.svelte +0 -299
  299. package/src/InspectorPanel.svelte +0 -745
  300. package/src/PwaInstallBanner.svelte +0 -124
  301. package/src/SidePanel.svelte +0 -480
  302. package/src/ThemeMenuButton.svelte +0 -132
  303. package/src/comments/ui/AuthModal.svelte +0 -108
  304. package/src/comments/ui/CommentWindow.svelte +0 -333
  305. package/src/comments/ui/CommentsDrawer.svelte +0 -96
  306. package/src/comments/ui/Composer.svelte +0 -65
  307. package/src/lib/components/ui/alert/alert-action.svelte +0 -19
  308. package/src/lib/components/ui/alert/alert-description.svelte +0 -22
  309. package/src/lib/components/ui/alert/alert-title.svelte +0 -22
  310. package/src/lib/components/ui/alert/alert.svelte +0 -38
  311. package/src/lib/components/ui/avatar/avatar-badge.svelte +0 -25
  312. package/src/lib/components/ui/avatar/avatar-fallback.svelte +0 -20
  313. package/src/lib/components/ui/avatar/avatar-group-count.svelte +0 -22
  314. package/src/lib/components/ui/avatar/avatar-group.svelte +0 -22
  315. package/src/lib/components/ui/avatar/avatar-image.svelte +0 -17
  316. package/src/lib/components/ui/avatar/avatar.svelte +0 -24
  317. package/src/lib/components/ui/badge/badge.svelte +0 -44
  318. package/src/lib/components/ui/button/button.svelte +0 -108
  319. package/src/lib/components/ui/card/card-action.svelte +0 -21
  320. package/src/lib/components/ui/card/card-content.svelte +0 -19
  321. package/src/lib/components/ui/card/card-description.svelte +0 -19
  322. package/src/lib/components/ui/card/card-footer.svelte +0 -18
  323. package/src/lib/components/ui/card/card-header.svelte +0 -21
  324. package/src/lib/components/ui/card/card-title.svelte +0 -14
  325. package/src/lib/components/ui/card/card.svelte +0 -21
  326. package/src/lib/components/ui/checkbox/checkbox.svelte +0 -39
  327. package/src/lib/components/ui/collapsible/collapsible-content.svelte +0 -7
  328. package/src/lib/components/ui/collapsible/collapsible-trigger.svelte +0 -7
  329. package/src/lib/components/ui/collapsible/collapsible.svelte +0 -11
  330. package/src/lib/components/ui/dialog/dialog-close.svelte +0 -11
  331. package/src/lib/components/ui/dialog/dialog-content.svelte +0 -42
  332. package/src/lib/components/ui/dialog/dialog-description.svelte +0 -17
  333. package/src/lib/components/ui/dialog/dialog-footer.svelte +0 -29
  334. package/src/lib/components/ui/dialog/dialog-header.svelte +0 -19
  335. package/src/lib/components/ui/dialog/dialog-overlay.svelte +0 -17
  336. package/src/lib/components/ui/dialog/dialog-portal.svelte +0 -7
  337. package/src/lib/components/ui/dialog/dialog-title.svelte +0 -17
  338. package/src/lib/components/ui/dialog/dialog-trigger.svelte +0 -11
  339. package/src/lib/components/ui/dialog/dialog.svelte +0 -7
  340. package/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte +0 -16
  341. package/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +0 -40
  342. package/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte +0 -27
  343. package/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte +0 -18
  344. package/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte +0 -7
  345. package/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte +0 -24
  346. package/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte +0 -20
  347. package/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte +0 -7
  348. package/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte +0 -16
  349. package/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte +0 -34
  350. package/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte +0 -17
  351. package/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte +0 -19
  352. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte +0 -17
  353. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +0 -27
  354. package/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte +0 -7
  355. package/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte +0 -7
  356. package/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte +0 -7
  357. package/src/lib/components/ui/input/input.svelte +0 -40
  358. package/src/lib/components/ui/label/label.svelte +0 -20
  359. package/src/lib/components/ui/panel/panel-body.svelte +0 -13
  360. package/src/lib/components/ui/panel/panel-close.svelte +0 -16
  361. package/src/lib/components/ui/panel/panel-content.svelte +0 -33
  362. package/src/lib/components/ui/panel/panel-footer.svelte +0 -13
  363. package/src/lib/components/ui/panel/panel-header.svelte +0 -16
  364. package/src/lib/components/ui/panel/panel-title.svelte +0 -14
  365. package/src/lib/components/ui/panel/panel.svelte +0 -15
  366. package/src/lib/components/ui/popover/popover-close.svelte +0 -7
  367. package/src/lib/components/ui/popover/popover-content.svelte +0 -27
  368. package/src/lib/components/ui/popover/popover-description.svelte +0 -19
  369. package/src/lib/components/ui/popover/popover-header.svelte +0 -19
  370. package/src/lib/components/ui/popover/popover-portal.svelte +0 -7
  371. package/src/lib/components/ui/popover/popover-title.svelte +0 -19
  372. package/src/lib/components/ui/popover/popover-trigger.svelte +0 -17
  373. package/src/lib/components/ui/popover/popover.svelte +0 -7
  374. package/src/lib/components/ui/select/select-content.svelte +0 -40
  375. package/src/lib/components/ui/select/select-group-heading.svelte +0 -19
  376. package/src/lib/components/ui/select/select-group.svelte +0 -17
  377. package/src/lib/components/ui/select/select-item.svelte +0 -38
  378. package/src/lib/components/ui/select/select-label.svelte +0 -18
  379. package/src/lib/components/ui/select/select-portal.svelte +0 -7
  380. package/src/lib/components/ui/select/select-scroll-down-button.svelte +0 -20
  381. package/src/lib/components/ui/select/select-scroll-up-button.svelte +0 -20
  382. package/src/lib/components/ui/select/select-separator.svelte +0 -17
  383. package/src/lib/components/ui/select/select-trigger.svelte +0 -27
  384. package/src/lib/components/ui/select/select.svelte +0 -11
  385. package/src/lib/components/ui/separator/separator.svelte +0 -23
  386. package/src/lib/components/ui/sheet/sheet-close.svelte +0 -7
  387. package/src/lib/components/ui/sheet/sheet-content.svelte +0 -43
  388. package/src/lib/components/ui/sheet/sheet-description.svelte +0 -17
  389. package/src/lib/components/ui/sheet/sheet-footer.svelte +0 -18
  390. package/src/lib/components/ui/sheet/sheet-header.svelte +0 -19
  391. package/src/lib/components/ui/sheet/sheet-overlay.svelte +0 -17
  392. package/src/lib/components/ui/sheet/sheet-portal.svelte +0 -7
  393. package/src/lib/components/ui/sheet/sheet-title.svelte +0 -17
  394. package/src/lib/components/ui/sheet/sheet-trigger.svelte +0 -7
  395. package/src/lib/components/ui/sheet/sheet.svelte +0 -7
  396. package/src/lib/components/ui/textarea/textarea.svelte +0 -21
  397. package/src/lib/components/ui/toggle/toggle.svelte +0 -45
  398. package/src/lib/components/ui/toggle-group/toggle-group-item.svelte +0 -35
  399. package/src/lib/components/ui/toggle-group/toggle-group.svelte +0 -63
  400. package/src/lib/components/ui/tooltip/tooltip-content.svelte +0 -24
  401. package/src/lib/components/ui/tooltip/tooltip-trigger.svelte +0 -27
  402. package/src/lib/components/ui/tooltip/tooltip.svelte +0 -9
  403. package/src/lib/components/ui/trigger-button/trigger-button.svelte +0 -106
  404. package/src/svelte-plugin-ui/components/Icon.svelte +0 -181
  405. package/src/svelte-plugin-ui/components/ModeSwitch.svelte +0 -121
  406. package/src/svelte-plugin-ui/components/ToolbarShell.svelte +0 -150
  407. package/src/svelte-plugin-ui/components/Viewfinder.svelte +0 -1001
  408. package/src/tools/handlers/docs.js +0 -11
  409. package/src/workshop/features/createCanvas/CreateCanvasForm.svelte +0 -139
  410. package/src/workshop/features/createFlow/CreateFlowForm.svelte +0 -314
  411. package/src/workshop/features/createPage/CreatePageForm.svelte +0 -249
  412. package/src/workshop/features/createPrototype/CreatePrototypeForm.svelte +0 -287
  413. package/src/workshop/features/createStory/CreateStoryForm.svelte +0 -161
  414. package/src/workshop/ui/WorkshopPanel.svelte +0 -97
package/src/PwaInstallBanner.svelte DELETED
@@ -1,124 +0,0 @@
1
- <!--
2
- PwaInstallBanner — mobile-only "Add to Home Screen" prompt.
3
-
4
- Listens for the `beforeinstallprompt` event (Chrome/Edge) and shows a
5
- dismissible banner. Never shows on desktop or when already installed.
6
- -->
7
-
8
- <script lang="ts">
9
- import { onMount, onDestroy } from 'svelte'
10
- import { isMobile, isTouchDevice, subscribeToMobile } from './mobileViewport.js'
11
-
12
- const DISMISS_KEY = 'sb-pwa-install-dismissed'
13
-
14
- let showBanner = $state(false)
15
- let deferredPrompt: any = null
16
-
17
- function isStandalone(): boolean {
18
- if (typeof window === 'undefined') return false
19
- return (
20
- window.matchMedia('(display-mode: standalone)').matches ||
21
- (window.navigator as any).standalone === true
22
- )
23
- }
24
-
25
- function isDismissed(): boolean {
26
- try { return localStorage.getItem(DISMISS_KEY) === '1' } catch { return false }
27
- }
28
-
29
- function handleBeforeInstallPrompt(e: Event) {
30
- e.preventDefault()
31
- deferredPrompt = e
32
- if (isMobile() && isTouchDevice() && !isStandalone() && !isDismissed()) {
33
- showBanner = true
34
- }
35
- }
36
-
37
- async function handleInstall() {
38
- if (!deferredPrompt) return
39
- deferredPrompt.prompt()
40
- const { outcome } = await deferredPrompt.userChoice
41
- deferredPrompt = null
42
- showBanner = false
43
- if (outcome === 'dismissed') {
44
- try { localStorage.setItem(DISMISS_KEY, '1') } catch {}
45
- }
46
- }
47
-
48
- function handleDismiss() {
49
- showBanner = false
50
- try { localStorage.setItem(DISMISS_KEY, '1') } catch {}
51
- }
52
-
53
- let unsubMobile: (() => void) | null = null
54
-
55
- onMount(() => {
56
- window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
57
- window.addEventListener('appinstalled', () => { showBanner = false })
58
-
59
- unsubMobile = subscribeToMobile((mobile: boolean) => {
60
- if (!mobile) showBanner = false
61
- else if (deferredPrompt && isTouchDevice() && !isStandalone() && !isDismissed()) {
62
- showBanner = true
63
- }
64
- })
65
- })
66
-
67
- onDestroy(() => {
68
- window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
69
- if (unsubMobile) unsubMobile()
70
- })
71
- </script>
72
-
73
- {#if showBanner}
74
- <div class="pwa-banner" role="alert">
75
- <span class="pwa-banner-text">Add Storyboard to your home screen</span>
76
- <button class="pwa-banner-btn install" onclick={handleInstall}>Install</button>
77
- <button class="pwa-banner-btn dismiss" onclick={handleDismiss} aria-label="Dismiss">✕</button>
78
- </div>
79
- {/if}
80
-
81
- <style>
82
- .pwa-banner {
83
- position: fixed;
84
- bottom: 5rem;
85
- left: 1rem;
86
- right: 1rem;
87
- z-index: 10000;
88
- display: flex;
89
- align-items: center;
90
- gap: 0.5rem;
91
- padding: 0.75rem 1rem;
92
- background: var(--bgColor-default, #0d1117);
93
- color: var(--fgColor-default, #e6edf3);
94
- border: 1px solid var(--borderColor-default, #30363d);
95
- border-radius: 0.75rem;
96
- font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
97
- font-size: 0.8125rem;
98
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
99
- }
100
-
101
- .pwa-banner-text {
102
- flex: 1;
103
- }
104
-
105
- .pwa-banner-btn {
106
- border: none;
107
- border-radius: 0.375rem;
108
- padding: 0.375rem 0.75rem;
109
- font-size: 0.8125rem;
110
- cursor: pointer;
111
- font-weight: 500;
112
- }
113
-
114
- .pwa-banner-btn.install {
115
- background: var(--button-primary-bgColor-rest, #238636);
116
- color: #fff;
117
- }
118
-
119
- .pwa-banner-btn.dismiss {
120
- background: transparent;
121
- color: var(--fgColor-muted, #8d96a0);
122
- padding: 0.375rem;
123
- }
124
- </style>
package/src/SidePanel.svelte DELETED
@@ -1,480 +0,0 @@
1
- <!--
2
- SidePanel — push-style panel for Documentation and Inspector views.
3
-
4
- Can dock to the right edge (side) or bottom edge of the viewport.
5
- When open, pushes #root content via CSS classes on <html>.
6
- Background color follows the active mode's collar color.
7
- Resizable by dragging the panel edge.
8
- Position preference (side/bottom) is persisted in localStorage.
9
-
10
- Mounted lazily from CoreUIBar when a side panel trigger is clicked.
11
- -->
12
-
13
- <script lang="ts">
14
- import { onMount, onDestroy } from 'svelte'
15
- import { sidePanelState, closePanel, openPanel } from './stores/sidePanelStore.js'
16
- import type { SidePanelTab } from './stores/sidePanelStore.js'
17
- import Icon from './svelte-plugin-ui/components/Icon.svelte'
18
- import './sidepanel.css'
19
-
20
- interface Props {
21
- resizable?: boolean
22
- onClose?: () => void
23
- }
24
-
25
- let { resizable = true, onClose }: Props = $props()
26
-
27
- let DocPanel: any = $state(null)
28
- let InspectorPanel: any = $state(null)
29
- let panelWidth = $state(420)
30
- let panelHeight = $state(300)
31
- let panelPosition = $state<'side' | 'bottom'>('side')
32
- let dragging = $state(false)
33
- let closeBtnEl: HTMLButtonElement | null = $state(null)
34
-
35
- const MIN_WIDTH = 300
36
- const MAX_WIDTH = 900
37
- const MIN_HEIGHT = 200
38
- const MAX_HEIGHT = 600
39
-
40
- const isBottom = $derived(panelPosition === 'bottom')
41
-
42
- // Lazy-load tab content components
43
- $effect(() => {
44
- if ($sidePanelState.open && $sidePanelState.activeTab === 'docs' && !DocPanel) {
45
- import('./DocPanel.svelte').then(m => { DocPanel = m.default })
46
- }
47
- if ($sidePanelState.open && $sidePanelState.activeTab === 'inspector' && !InspectorPanel) {
48
- import('./InspectorPanel.svelte').then(m => { InspectorPanel = m.default })
49
- }
50
- })
51
-
52
- // Sync panel width to CSS custom property
53
- $effect(() => {
54
- if (typeof document !== 'undefined') {
55
- document.documentElement.style.setProperty('--sb--sidepanel-width', `${panelWidth}px`)
56
- }
57
- })
58
-
59
- // Sync panel height to CSS custom property
60
- $effect(() => {
61
- if (typeof document !== 'undefined') {
62
- document.documentElement.style.setProperty('--sb--sidepanel-height', `${panelHeight}px`)
63
- }
64
- })
65
-
66
- // Sync position class on <html>
67
- $effect(() => {
68
- if (typeof document !== 'undefined') {
69
- document.documentElement.classList.toggle('sb-sidepanel-bottom', isBottom)
70
- }
71
- })
72
-
73
- // Auto-focus close button when panel opens
74
- $effect(() => {
75
- if ($sidePanelState.open && closeBtnEl) {
76
- requestAnimationFrame(() => closeBtnEl?.focus())
77
- }
78
- })
79
-
80
- function handleKeydown(e: KeyboardEvent) {
81
- if (e.key === 'Escape' && $sidePanelState.open) {
82
- e.preventDefault()
83
- closePanel()
84
- onClose?.()
85
- }
86
- }
87
-
88
- function togglePosition() {
89
- panelPosition = isBottom ? 'side' : 'bottom'
90
- }
91
-
92
- // --- Drag resize (side mode — horizontal) ---
93
- function startDragSide(e: PointerEvent) {
94
- if (!resizable) return
95
- e.preventDefault()
96
- dragging = true
97
-
98
- const startX = e.clientX
99
- const startWidth = panelWidth
100
-
101
- function onMove(ev: PointerEvent) {
102
- const delta = startX - ev.clientX
103
- panelWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + delta))
104
- }
105
-
106
- function onUp() {
107
- dragging = false
108
- window.removeEventListener('pointermove', onMove)
109
- window.removeEventListener('pointerup', onUp)
110
- }
111
-
112
- window.addEventListener('pointermove', onMove)
113
- window.addEventListener('pointerup', onUp)
114
- }
115
-
116
- // --- Drag resize (bottom mode — vertical) ---
117
- function startDragBottom(e: PointerEvent) {
118
- if (!resizable) return
119
- e.preventDefault()
120
- dragging = true
121
-
122
- const startY = e.clientY
123
- const startHeight = panelHeight
124
-
125
- function onMove(ev: PointerEvent) {
126
- const delta = startY - ev.clientY
127
- panelHeight = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startHeight + delta))
128
- }
129
-
130
- function onUp() {
131
- dragging = false
132
- window.removeEventListener('pointermove', onMove)
133
- window.removeEventListener('pointerup', onUp)
134
- }
135
-
136
- window.addEventListener('pointermove', onMove)
137
- window.addEventListener('pointerup', onUp)
138
- }
139
-
140
- // Restore dimensions and position from localStorage
141
- onMount(() => {
142
- const savedWidth = localStorage.getItem('sb-sidepanel-width')
143
- if (savedWidth) {
144
- const w = parseInt(savedWidth, 10)
145
- if (w >= MIN_WIDTH && w <= MAX_WIDTH) panelWidth = w
146
- }
147
-
148
- const savedHeight = localStorage.getItem('sb-sidepanel-height')
149
- if (savedHeight) {
150
- const h = parseInt(savedHeight, 10)
151
- if (h >= MIN_HEIGHT && h <= MAX_HEIGHT) panelHeight = h
152
- }
153
-
154
- const savedPos = localStorage.getItem('sb-sidepanel-position')
155
- if (savedPos === 'side' || savedPos === 'bottom') panelPosition = savedPos
156
- })
157
-
158
- // Clean up position class on unmount
159
- onDestroy(() => {
160
- if (typeof document !== 'undefined') {
161
- document.documentElement.classList.remove('sb-sidepanel-bottom')
162
- }
163
- })
164
-
165
- // Persist width on change
166
- $effect(() => {
167
- if (typeof localStorage !== 'undefined') {
168
- localStorage.setItem('sb-sidepanel-width', String(panelWidth))
169
- }
170
- })
171
-
172
- // Persist height on change
173
- $effect(() => {
174
- if (typeof localStorage !== 'undefined') {
175
- localStorage.setItem('sb-sidepanel-height', String(panelHeight))
176
- }
177
- })
178
-
179
- // Persist position on change
180
- $effect(() => {
181
- if (typeof localStorage !== 'undefined') {
182
- localStorage.setItem('sb-sidepanel-position', panelPosition)
183
- }
184
- })
185
- </script>
186
-
187
- <svelte:window onkeydown={handleKeydown} />
188
-
189
- {#if $sidePanelState.open}
190
- <div
191
- class="sb-sidepanel"
192
- class:sb-sidepanel--bottom={isBottom}
193
- class:sb-sidepanel-dragging={dragging}
194
- data-sidepanel
195
- role="complementary"
196
- aria-label={isBottom ? 'Bottom panel' : 'Side panel'}
197
- style={isBottom ? `height:${panelHeight}px` : `width:${panelWidth}px`}
198
- >
199
- <!-- Drag handle -->
200
- {#if resizable}
201
- <div
202
- class="sb-sidepanel-drag-handle"
203
- onpointerdown={isBottom ? startDragBottom : startDragSide}
204
- role="separator"
205
- aria-orientation={isBottom ? 'horizontal' : 'vertical'}
206
- aria-label="Resize panel"
207
- >
208
- <svg class="sb-sidepanel-grabber" width="4" height="16" viewBox="0 0 4 16" fill="currentColor">
209
- <circle cx="1" cy="2" r="1" /><circle cx="3" cy="2" r="1" />
210
- <circle cx="1" cy="6" r="1" /><circle cx="3" cy="6" r="1" />
211
- <circle cx="1" cy="10" r="1" /><circle cx="3" cy="10" r="1" />
212
- <circle cx="1" cy="14" r="1" /><circle cx="3" cy="14" r="1" />
213
- </svg>
214
- </div>
215
- {/if}
216
-
217
- <!-- Header — title, dock toggle, and close -->
218
- <div class="sb-sidepanel-header">
219
- <span class="sb-sidepanel-title">
220
- {$sidePanelState.activeTab === 'docs' ? 'Docs' : $sidePanelState.activeTab === 'inspector' ? 'Inspector' : ''}
221
- </span>
222
- <div class="sb-sidepanel-actions">
223
- <button
224
- class="sb-sidepanel-action-btn"
225
- onclick={togglePosition}
226
- aria-label={isBottom ? 'Dock to side' : 'Dock to bottom'}
227
- title={isBottom ? 'Dock to side' : 'Dock to bottom'}
228
- >
229
- {#if isBottom}
230
- <!-- Dock-to-side icon: rectangle with right portion divided -->
231
- <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2">
232
- <rect x="1.5" y="1.5" width="11" height="11" rx="1.5" />
233
- <line x1="9" y1="1.5" x2="9" y2="12.5" />
234
- </svg>
235
- {:else}
236
- <!-- Dock-to-bottom icon: rectangle with bottom portion divided -->
237
- <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2">
238
- <rect x="1.5" y="1.5" width="11" height="11" rx="1.5" />
239
- <line x1="1.5" y1="9" x2="12.5" y2="9" />
240
- </svg>
241
- {/if}
242
- </button>
243
- <button
244
- class="sb-sidepanel-action-btn"
245
- onclick={() => { closePanel(); onClose?.() }}
246
- aria-label="Close panel"
247
- bind:this={closeBtnEl}
248
- >
249
- <Icon name="primer/x" size={16} />
250
- </button>
251
- </div>
252
- </div>
253
-
254
- <!-- Content -->
255
- <div class="sb-sidepanel-body">
256
- {#if $sidePanelState.activeTab === 'docs' && DocPanel}
257
- <DocPanel />
258
- {:else if $sidePanelState.activeTab === 'inspector' && InspectorPanel}
259
- <InspectorPanel />
260
- {:else}
261
- <div class="sb-sidepanel-loading">
262
- <span class="sb-sidepanel-spinner"></span>
263
- </div>
264
- {/if}
265
- </div>
266
- </div>
267
- {/if}
268
-
269
- <style>
270
- .sb-sidepanel {
271
- position: fixed;
272
- top: var(--sb-branch-bar-height, 0px);
273
- right: 0;
274
- bottom: 0;
275
- width: var(--sb--sidepanel-width, 420px);
276
- z-index: 9998;
277
- display: flex;
278
- flex-direction: column;
279
- background-color: var(--bgColor-default, var(--sb--color-background, #ffffff));
280
- border-left: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
281
- box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
282
- font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
283
- color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
284
- animation: sb-sidepanel-slide-in 0.25s ease;
285
- }
286
-
287
- /* Bottom panel position */
288
- .sb-sidepanel--bottom {
289
- top: auto;
290
- right: 0;
291
- bottom: 0;
292
- left: 0;
293
- width: 100% !important;
294
- height: var(--sb--sidepanel-height, 300px);
295
- border-left: none;
296
- border-top: 1px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
297
- box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
298
- animation: sb-sidepanel-slide-up 0.25s ease;
299
- }
300
-
301
- .sb-sidepanel-dragging {
302
- user-select: none;
303
- }
304
-
305
- @keyframes sb-sidepanel-slide-in {
306
- from { transform: translateX(100%); }
307
- to { transform: translateX(0); }
308
- }
309
-
310
- @keyframes sb-sidepanel-slide-up {
311
- from { transform: translateY(100%); }
312
- to { transform: translateY(0); }
313
- }
314
-
315
- /* Mode-aware top accent bar */
316
- .sb-sidepanel::before {
317
- content: '';
318
- position: absolute;
319
- top: 0;
320
- left: 0;
321
- right: 0;
322
- height: 3px;
323
- /* background: var(--sb--mode-color, var(--borderColor-default, var(--sb--color-border, #d0d7de))); */
324
- }
325
-
326
- /* Drag handle — side mode (left edge, vertical) */
327
- .sb-sidepanel-drag-handle {
328
- position: absolute;
329
- top: 0;
330
- left: -4px;
331
- bottom: 0;
332
- width: 8px;
333
- cursor: col-resize;
334
- z-index: 1;
335
- display: flex;
336
- align-items: center;
337
- justify-content: center;
338
- }
339
-
340
- /* Drag handle — bottom mode (top edge, horizontal) */
341
- .sb-sidepanel--bottom .sb-sidepanel-drag-handle {
342
- top: -4px;
343
- left: 0;
344
- right: 0;
345
- bottom: auto;
346
- width: 100%;
347
- height: 8px;
348
- cursor: row-resize;
349
- }
350
-
351
- .sb-sidepanel-grabber {
352
- opacity: 0;
353
- color: rgba(0, 0, 0, 0.5);
354
- transition: opacity 0.15s ease;
355
- pointer-events: none;
356
- }
357
-
358
- .sb-sidepanel--bottom .sb-sidepanel-grabber {
359
- transform: rotate(90deg);
360
- }
361
-
362
- .sb-sidepanel-drag-handle:hover .sb-sidepanel-grabber,
363
- .sb-sidepanel-dragging .sb-sidepanel-grabber {
364
- opacity: 1;
365
- }
366
-
367
- /* Header */
368
- .sb-sidepanel-header {
369
- display: flex;
370
- align-items: center;
371
- justify-content: space-between;
372
- padding: 8px 8px 0;
373
- flex-shrink: 0;
374
- }
375
-
376
- .sb-sidepanel-title {
377
- font-size: 11px;
378
- font-weight: 600;
379
- text-transform: uppercase;
380
- letter-spacing: 0.05em;
381
- color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
382
- padding-left: 4px;
383
- }
384
-
385
- .sb-sidepanel-actions {
386
- display: flex;
387
- align-items: center;
388
- gap: 2px;
389
- }
390
-
391
- .sb-sidepanel-action-btn {
392
- appearance: none;
393
- border: none;
394
- background: transparent;
395
- color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
396
- cursor: pointer;
397
- padding: 6px;
398
- border-radius: 6px;
399
- display: flex;
400
- align-items: center;
401
- justify-content: center;
402
- transition: background 0.15s ease, color 0.15s ease;
403
- }
404
-
405
- .sb-sidepanel-action-btn:hover {
406
- background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
407
- color: var(--fgColor-default, var(--sb--color-foreground, #1f2328));
408
- }
409
-
410
- /* Body */
411
- .sb-sidepanel-body {
412
- flex: 1;
413
- overflow: hidden;
414
- display: flex;
415
- flex-direction: column;
416
- }
417
-
418
- .sb-sidepanel-loading {
419
- display: flex;
420
- align-items: center;
421
- justify-content: center;
422
- height: 120px;
423
- }
424
-
425
- .sb-sidepanel-spinner {
426
- width: 20px;
427
- height: 20px;
428
- border: 2px solid var(--borderColor-default, var(--sb--color-border, #d0d7de));
429
- border-top-color: var(--fgColor-muted, var(--sb--color-muted-foreground, #656d76));
430
- border-radius: 50%;
431
- animation: sb-spin 0.6s linear infinite;
432
- }
433
-
434
- @keyframes sb-spin {
435
- to { transform: rotate(360deg); }
436
- }
437
-
438
- /* Float the side panel inside the mode collar (present/plan/inspect) */
439
- :global(html.storyboard-mode-present) .sb-sidepanel:not(.sb-sidepanel--bottom),
440
- :global(html.storyboard-mode-plan) .sb-sidepanel:not(.sb-sidepanel--bottom),
441
- :global(html.storyboard-mode-inspect) .sb-sidepanel:not(.sb-sidepanel--bottom) {
442
- top: 12px;
443
- right: 12px;
444
- bottom: 12px;
445
- border-radius: var(--borderRadius-default);
446
- border-left: none;
447
- }
448
-
449
- /* Float the bottom panel inside the mode collar */
450
- :global(html.storyboard-mode-present) .sb-sidepanel--bottom,
451
- :global(html.storyboard-mode-plan) .sb-sidepanel--bottom,
452
- :global(html.storyboard-mode-inspect) .sb-sidepanel--bottom {
453
- left: 12px;
454
- right: 12px;
455
- bottom: 12px;
456
- width: auto !important;
457
- border-radius: var(--borderRadius-default);
458
- border-top: none;
459
- }
460
-
461
- /* Remove accent bar when collar provides mode context */
462
- :global(html.storyboard-mode-present) .sb-sidepanel::before,
463
- :global(html.storyboard-mode-plan) .sb-sidepanel::before,
464
- :global(html.storyboard-mode-inspect) .sb-sidepanel::before {
465
- display: none;
466
- }
467
-
468
- /* Mode-specific box-shadow matching #root treatment */
469
- :global(html.storyboard-mode-present) .sb-sidepanel {
470
- box-shadow: 0 0 7px 2px rgb(42 157 143 / 60%);
471
- }
472
-
473
- :global(html.storyboard-mode-plan) .sb-sidepanel {
474
- box-shadow: 0 0 7px 2px rgb(74 127 173 / 60%);
475
- }
476
-
477
- :global(html.storyboard-mode-inspect) .sb-sidepanel {
478
- box-shadow: 0 0 7px 2px rgb(118 85 164 / 60%);
479
- }
480
- </style>