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

package/scaffold/githooks/pre-push

@@ -0,0 +1,114 @@
+#!/usr/bin/env bash
+#
+# pre-push pipeline — runs checks and generators before pushing.
+#
+# Pipeline stages run in order. Each stage can:
+#   - Pass silently (exit 0)
+#   - Fail and block the push (exit 1) — all changes are reverted
+#   - Generate files that get auto-committed
+#
+# Add new stages by defining a function and adding it to STAGES.
+#
+# Installed by: storyboard setup / storyboard-scaffold
+#
+
+set -euo pipefail
+
+# ── Configuration ─────────────────────────────────────────────────
+# Ordered list of stages. Add new stages here.
+STAGES=(
+  stage_snapshots
+)
+
+# ── Helpers ───────────────────────────────────────────────────────
+
+SNAPSHOT_SHA=""
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+DIM='\033[2m'
+BOLD='\033[1m'
+RESET='\033[0m'
+
+log()  { echo -e "${DIM}[pre-push]${RESET} $*"; }
+ok()   { echo -e "${DIM}[pre-push]${RESET} ${GREEN}✓${RESET} $*"; }
+fail() { echo -e "${DIM}[pre-push]${RESET} ${RED}✗${RESET} $*"; }
+
+save_snapshot() {
+  SNAPSHOT_SHA=$(git rev-parse HEAD)
+}
+
+revert_snapshot() {
+  if [ -n "$SNAPSHOT_SHA" ] && [ "$(git rev-parse HEAD)" != "$SNAPSHOT_SHA" ]; then
+    log "Reverting auto-committed changes..."
+    git reset --soft "$SNAPSHOT_SHA" 2>/dev/null || true
+  fi
+}
+
+auto_commit() {
+  local label="$1"
+  shift
+  local paths=("$@")
+
+  local changes=""
+  for p in "${paths[@]}"; do
+    changes+=$(git status --porcelain "$p" 2>/dev/null || true)
+  done
+
+  if [ -n "$changes" ]; then
+    git add "${paths[@]}" 2>/dev/null
+    git commit -m "chore: ${label}" --no-verify --allow-empty 2>/dev/null
+    ok "${label} (committed)"
+    return 0
+  fi
+  return 1
+}
+
+# ── Stages ────────────────────────────────────────────────────────
+
+stage_test() {
+  if [ ! -f "vitest.config.js" ] && [ ! -f "vitest.config.ts" ]; then return 0; fi
+  if ! command -v npx &>/dev/null; then return 0; fi
+
+  log "Running tests..."
+  if npx --no-install vitest run --reporter=dot 2>&1; then
+    ok "Tests passed"
+  else
+    fail "Tests failed — push blocked"
+    return 1
+  fi
+}
+
+stage_snapshots() {
+  local canvas_files
+  canvas_files=$(find src/canvas -name "*.canvas.jsonl" 2>/dev/null | head -1)
+  [ -z "$canvas_files" ] && return 0
+
+  if ! npx --no-install storyboard snapshots 2>&1; then
+    log "Snapshot generation skipped"
+    return 0
+  fi
+
+  auto_commit "update canvas snapshots" \
+    "assets/canvas/snapshots/" \
+    "assets/canvas/images/" \
+    "src/canvas/" \
+    || true
+}
+
+# ── Pipeline runner ───────────────────────────────────────────────
+
+main() {
+  save_snapshot
+
+  for stage in "${STAGES[@]}"; do
+    if ! "$stage"; then
+      revert_snapshot
+      fail "${BOLD}Push aborted${RESET} by ${stage}"
+      exit 1
+    fi
+  done
+
+  log "${GREEN}All stages passed${RESET}"
+}
+
+main

package/scaffold/manifest.json

@@ -30,6 +30,17 @@
       "target": ".github/skills/",
       "mode": "updateable",
       "directory": true
+    },
+    {
+      "source": "scaffold/deploy.yml",
+      "target": ".github/workflows/deploy.yml",
+      "mode": "scaffold"
+    },
+    {
+      "source": "scaffold/githooks/",
+      "target": ".githooks/",
+      "mode": "updateable",
+      "directory": true
     }
   ]
 }

package/scaffold/storyboard.config.json

@@ -1,4 +1,5 @@
 {
+  "customDomain": "",
   "repository": {
     "owner": "",
     "name": ""
@@ -22,5 +23,7 @@
       "createCanvas": true
     }
   },
-  "featureFlags": {}
+  "featureFlags": {},
+  "canvas": {},
+  "commandPalette": {}
 }

package/src/ActionMenuButton.svelte

@@ -81,7 +81,12 @@
             {#if child.type === 'radio'}
               <DropdownMenu.RadioItem
                 value={child.id}
-                onclick={() => { if (child.execute) child.execute(); menuOpen = false }}
+                onclick={(e) => {
+                  if (child.href && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault(); window.open(child.href, '_blank'); menuOpen = false; return
+                  }
+                  if (child.execute) child.execute(); menuOpen = false
+                }}
               >
                 {child.label}
               </DropdownMenu.RadioItem>
@@ -98,7 +103,12 @@
               {child.label}
             </DropdownMenu.CheckboxItem>
           {:else}
-            <DropdownMenu.Item onclick={() => { if (child.execute) child.execute(); menuOpen = false }}>
+            <DropdownMenu.Item onclick={(e) => {
+              if (child.href && (e.metaKey || e.ctrlKey)) {
+                e.preventDefault(); window.open(child.href, '_blank'); menuOpen = false; return
+              }
+              if (child.execute) child.execute(); menuOpen = false
+            }}>
               {child.label}
             </DropdownMenu.Item>
           {/if}

package/src/CanvasCreateMenu.svelte

@@ -7,6 +7,9 @@
 <script lang="ts">
   import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
   import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
+  import { Button } from './lib/components/ui/button/index.js'
+  import { Input } from './lib/components/ui/input/index.js'
+  import { Label } from './lib/components/ui/label/index.js'
   import Icon from './svelte-plugin-ui/components/Icon.svelte'
 
   interface Props {
@@ -25,7 +28,73 @@
     { type: 'prototype', label: 'Prototype embed' },
   ]
 
+  interface StoryEntry {
+    name: string
+    path: string
+    exports: string[]
+  }
+
+  type View = 'menu' | 'create' | 'notification'
+
   let menuOpen = $state(false)
+  let view: View = $state('menu')
+  let stories: StoryEntry[] = $state([])
+  let storiesLoaded = $state(false)
+
+  // Create form state
+  let createName = $state('')
+  let createLocation = $state('canvas')
+  let createFormat = $state('jsx')
+  let submitting = $state(false)
+  let createError: string | null = $state(null)
+  let notificationPath: string | null = $state(null)
+
+  const kebabName = $derived(
+    createName.replace(/[^a-zA-Z0-9\s_-]/g, '').trim().replace(/[\s_]+/g, '-').toLowerCase().replace(/-+/g, '-').replace(/^-|-$/g, '')
+  )
+  const nameError = $derived(
+    createName.trim() && !kebabName ? 'Name must contain at least one alphanumeric character' : null
+  )
+  const filePreview = $derived(
+    kebabName ? `${kebabName}.story.${createFormat}` : ''
+  )
+  const canSubmit = $derived(!!kebabName && !nameError && !submitting)
+
+  function getApiUrl() {
+    const basePath = (window as any).__STORYBOARD_BASE_PATH__ || '/'
+    return basePath.replace(/\/$/, '') + '/_storyboard/canvas'
+  }
+
+  async function loadStories() {
+    try {
+      const res = await fetch(getApiUrl() + '/stories')
+      if (res.ok) {
+        const data = await res.json()
+        stories = data.stories || []
+      }
+    } catch { /* ignore */ }
+    storiesLoaded = true
+  }
+
+  // Load stories when menu opens
+  $effect(() => {
+    if (menuOpen) loadStories()
+  })
+
+  // Reset view when menu closes (but not during view transitions)
+  $effect(() => {
+    if (!menuOpen && view === 'menu') {
+      resetCreateForm()
+    }
+  })
+
+  function resetCreateForm() {
+    createName = ''
+    createLocation = 'canvas'
+    createFormat = 'jsx'
+    createError = null
+    submitting = false
+  }
 
   function addWidget(type: string) {
     document.dispatchEvent(new CustomEvent('storyboard:canvas:add-widget', {
@@ -33,9 +102,70 @@
     }))
     menuOpen = false
   }
+
+  function addStoryWidget(storyId: string) {
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:add-story-widget', {
+      detail: { storyId, canvasName }
+    }))
+    menuOpen = false
+  }
+
+  function showCreateForm() {
+    resetCreateForm()
+    view = 'create'
+  }
+
+  async function submitCreate() {
+    if (!canSubmit) return
+    submitting = true; createError = null
+    try {
+      const bridgeState = (window as any).__storyboardCanvasBridgeState
+      const activeCanvasName = bridgeState?.name || canvasName
+
+      const res = await fetch(getApiUrl() + '/create-story', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: kebabName,
+          location: createLocation,
+          format: createFormat,
+          canvasName: createLocation === 'canvas' ? activeCanvasName : undefined,
+        }),
+      })
+      const data = await res.json()
+      if (!res.ok) { createError = data.error || 'Failed to create component'; submitting = false; return }
+
+      // Add the new component to the canvas
+      addStoryWidget(data.name)
+
+      // Show inline notification
+      notificationPath = data.path
+      view = 'notification'
+      menuOpen = true
+
+      // Refresh story list for next time
+      storiesLoaded = false
+
+      // Auto-dismiss after 6 seconds
+      setTimeout(() => {
+        if (view === 'notification') {
+          menuOpen = false
+          view = 'menu'
+          notificationPath = null
+        }
+      }, 6000)
+    } catch (err: any) { createError = err.message || 'Network error' } finally { submitting = false }
+  }
 </script>
 
-<DropdownMenu.Root bind:open={menuOpen}>
+<DropdownMenu.Root bind:open={menuOpen} onOpenChange={(open) => {
+  if (!open && view !== 'menu') {
+    // User dismissed the panel — reset everything
+    view = 'menu'
+    notificationPath = null
+    resetCreateForm()
+  }
+}}>
   <DropdownMenu.Trigger>
     {#snippet child({ props })}
       <TriggerButton
@@ -54,14 +184,102 @@
     {/snippet}
   </DropdownMenu.Trigger>
 
-  <DropdownMenu.Content side="top" align="start" sideOffset={16} class="min-w-[180px]" style={config.menuWidth ? `width: ${config.menuWidth}` : ''}>
-    <DropdownMenu.Label>Add to canvas</DropdownMenu.Label>
-    {#each widgetTypes as wt (wt.type)}
-      <DropdownMenu.Item onclick={() => addWidget(wt.type)}>
-        {wt.label}
-      </DropdownMenu.Item>
-    {/each}
-    <DropdownMenu.Separator />
-    <div class="px-2 py-1.5 text-xs text-muted-foreground flex flex-row items-baseline"><span class="inline-flex w-2 h-2 rounded-full mr-1.5" style="background: hsl(212, 92%, 45%)"></span>Only available in dev environment</div>
+  <DropdownMenu.Content side="top" align="start" sideOffset={16} class="min-w-[180px]" style={config.menuWidth ? `width: ${config.menuWidth}` : ''} onInteractOutside={(e) => { if (view === 'create') e.preventDefault() }}>
+    {#if view === 'menu'}
+      <DropdownMenu.Label>Add to canvas</DropdownMenu.Label>
+      {#each widgetTypes as wt (wt.type)}
+        <DropdownMenu.Item onclick={() => addWidget(wt.type)}>
+          {wt.label}
+        </DropdownMenu.Item>
+      {/each}
+
+      <DropdownMenu.Sub>
+        <DropdownMenu.SubTrigger>Component</DropdownMenu.SubTrigger>
+        <DropdownMenu.SubContent class="min-w-[200px] max-h-[320px] overflow-y-auto">
+          <button
+            class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground w-full text-left bg-transparent border-none"
+            onclick={(e) => { e.preventDefault(); e.stopPropagation(); showCreateForm() }}
+            onpointerdown={(e) => e.stopPropagation()}
+          >
+            <span class="font-medium">Create new component…</span>
+          </button>
+          {#if stories.length > 0}
+            <DropdownMenu.Separator />
+            <DropdownMenu.Label>Existing stories</DropdownMenu.Label>
+            {#each stories as story (story.name)}
+              <DropdownMenu.Item onclick={() => addStoryWidget(story.name)}>
+                <span class="flex flex-col">
+                  <span>{story.name}</span>
+                  <span class="text-xs text-muted-foreground">{story.path}</span>
+                </span>
+              </DropdownMenu.Item>
+            {/each}
+          {/if}
+        </DropdownMenu.SubContent>
+      </DropdownMenu.Sub>
+
+      <DropdownMenu.Separator />
+      <div class="px-2 py-1.5 text-xs text-muted-foreground flex flex-row items-baseline"><span class="inline-flex w-2 h-2 rounded-full mr-1.5" style="background: hsl(212, 92%, 45%)"></span>Only available in dev environment</div>
+
+    {:else if view === 'create'}
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="p-3 space-y-3 min-w-[280px]" onkeydown={(e) => { if (e.key === 'Enter' && canSubmit) submitCreate(); if (e.key === 'Escape') { view = 'menu' } }} onclick={(e) => e.stopPropagation()} onpointerdown={(e) => e.stopPropagation()}>
+        <div class="flex items-center justify-between">
+          <span class="text-sm font-medium">Create component</span>
+          <button class="text-muted-foreground hover:text-foreground text-xs bg-transparent border-none cursor-pointer p-0.5" onclick={() => { view = 'menu' }}>← Back</button>
+        </div>
+
+        <div class="space-y-1">
+          <Label for="sb-create-comp-name" class="text-xs">Name</Label>
+          <Input id="sb-create-comp-name" placeholder="e.g. user-card" autocomplete="off" spellcheck="false" bind:value={createName} class="h-8 text-sm" />
+          {#if nameError}<p class="text-xs text-destructive">{nameError}</p>{/if}
+          {#if filePreview}<p class="text-xs text-muted-foreground">{filePreview}</p>{/if}
+        </div>
+
+        <fieldset class="space-y-1">
+          <Label class="text-xs">Location</Label>
+          <div class="flex flex-col gap-1">
+            <label class="flex items-center gap-1.5 text-xs cursor-pointer">
+              <input type="radio" name="sb-create-location" value="canvas" bind:group={createLocation} class="accent-primary" />
+              This canvas directory
+            </label>
+            <label class="flex items-center gap-1.5 text-xs cursor-pointer">
+              <input type="radio" name="sb-create-location" value="components" bind:group={createLocation} class="accent-primary" />
+              <code class="text-xs">src/components/</code>
+            </label>
+          </div>
+        </fieldset>
+
+        <fieldset class="space-y-1">
+          <Label class="text-xs">Format</Label>
+          <div class="flex gap-3">
+            <label class="flex items-center gap-1.5 text-xs cursor-pointer">
+              <input type="radio" name="sb-create-format" value="jsx" bind:group={createFormat} class="accent-primary" />
+              JSX
+            </label>
+            <label class="flex items-center gap-1.5 text-xs cursor-pointer">
+              <input type="radio" name="sb-create-format" value="tsx" bind:group={createFormat} class="accent-primary" />
+              TSX
+            </label>
+          </div>
+        </fieldset>
+
+        {#if createError}<p class="text-xs text-destructive">{createError}</p>{/if}
+
+        <div class="flex gap-2 justify-end pt-1">
+          <Button variant="outline" size="sm" onclick={() => { view = 'menu' }}>Cancel</Button>
+          <Button size="sm" onclick={submitCreate} disabled={!canSubmit}>{submitting ? 'Creating…' : 'Create'}</Button>
+        </div>
+      </div>
+
+    {:else if view === 'notification'}
+      <div class="p-3 min-w-[260px] space-y-1">
+        <p class="text-sm font-medium">✓ Component added to canvas</p>
+        {#if notificationPath}
+          <p class="text-xs text-muted-foreground">To edit your component, go to</p>
+          <code class="text-xs block bg-muted px-2 py-1 rounded">{notificationPath}</code>
+        {/if}
+      </div>
+    {/if}
   </DropdownMenu.Content>
 </DropdownMenu.Root>

package/src/CanvasSnap.svelte

@@ -29,6 +29,8 @@
         detail: { gridSize }
       }))
     }
+    // Request current snap state from React (may have dispatched before we mounted)
+    document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state-request'))
   })
 
   onDestroy(() => {

package/src/CoreUIBar.svelte

@@ -13,12 +13,14 @@
   import { onMount, onDestroy, untrack } from 'svelte'
   import './core-ui-colors.css'
   import CommandMenu from './CommandMenu.svelte'
+  import PwaInstallBanner from './PwaInstallBanner.svelte'
   import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
   import * as Tooltip from './lib/components/ui/tooltip/index.js'
   import Icon from './svelte-plugin-ui/components/Icon.svelte'
   import { modeState } from './svelte-plugin-ui/stores/modeStore.js'
   import { sidePanelState, togglePanel } from './stores/sidePanelStore.js'
-  import { initCommandActions, registerCommandAction, getActionChildren, hasChildrenProvider, isExcludedByRoute, setRoutingBasePath } from './commandActions.js'
+  import { initCommandActions, registerCommandAction, getActionChildren, hasChildrenProvider, isExcludedByRoute, setRoutingBasePath, setDynamicActions, clearDynamicActions } from './commandActions.js'
+  import { isMobile, subscribeToMobile } from './mobileViewport.js'
   import { isMenuHidden } from './uiConfig.js'
   import { subscribeToToolbarConfig, getToolbarConfig } from './toolbarConfigStore.js'
   import { initToolbarToolStates, getToolbarToolState, isToolbarToolLocalOnly, subscribeToToolbarToolStates } from './toolStateStore.js'
@@ -74,6 +76,11 @@
   let canvasZoom = $state(100)
   let toolStateVersion = $state(0)
 
+  // Mobile viewport state — on narrow screens, toolbar tools move into the command menu
+  let isMobileState = $state(isMobile())
+  let unsubMobile: (() => void) | null = null
+  let mobileActionsRegistered = false
+
   // Roving tabindex: only one button in the toolbar is tabbable at a time
   let activeToolbarIndex = $state(-1)
 
@@ -361,7 +368,7 @@
       }
     }
 
-    bumpNav = () => { navVersion++; syncPrototypeToolbar() }
+    bumpNav = () => { navVersion++; syncPrototypeToolbar(); syncMobileActions() }
     window.addEventListener('popstate', bumpNav)
     origPushState = history.pushState.bind(history)
     history.pushState = (...args: any[]) => { origPushState(...args); bumpNav() }
@@ -451,6 +458,13 @@
     document.addEventListener('storyboard:canvas:zoom-changed', handleZoomChanged)
     document.addEventListener('storyboard:canvas:status', handleCanvasMounted)
     syncCanvasBridgeState()
+
+    // Subscribe to mobile viewport changes and sync mobile command actions
+    syncMobileActions()
+    unsubMobile = subscribeToMobile((mobile: boolean) => {
+      isMobileState = mobile
+      syncMobileActions()
+    })
   })
 
   onDestroy(() => {
@@ -458,6 +472,8 @@
     if (bumpNav) window.removeEventListener('popstate', bumpNav)
     if (origPushState) history.pushState = origPushState
     if (origReplaceState) history.replaceState = origReplaceState
+    if (unsubMobile) unsubMobile()
+    clearDynamicActions('mobile-toolbar')
     document.removeEventListener('storyboard:canvas:mounted', handleCanvasMounted)
     document.removeEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
     document.removeEventListener('storyboard:canvas:zoom-changed', handleZoomChanged)
@@ -469,12 +485,14 @@
     const detail = (e as CustomEvent).detail
     activeCanvasName = detail?.name || ''
     canvasZoom = detail?.zoom ?? 100
+    syncMobileActions()
   }
 
   function handleCanvasUnmounted() {
     canvasActive = false
     activeCanvasName = ''
     canvasZoom = 100
+    syncMobileActions()
   }
 
   function handleZoomChanged(e: Event) {
@@ -495,6 +513,132 @@
     }
   }
 
+  /**
+   * Sync mobile command actions — when in mobile viewport, toolbar tools
+   * become dynamic command actions in the ⌘ menu.
+   */
+  async function syncMobileActions() {
+    if (!isMobileState) {
+      if (mobileActionsRegistered) {
+        clearDynamicActions('mobile-toolbar')
+        mobileActionsRegistered = false
+      }
+      return
+    }
+
+    const actions: any[] = []
+    const handlers: Record<string, any> = {}
+    const toolConfigs = config.tools || {}
+
+    // Main-toolbar tools → command actions
+    actions.push({ type: 'header', label: 'Tools', id: '_mobile_header' })
+
+    for (const [key, tool] of Object.entries(toolConfigs as Record<string, any>)) {
+      if (tool.surface !== 'main-toolbar') continue
+      if (tool.render === 'separator') continue
+      if (!tool.prod && !isLocalDev) continue
+      if (getToolbarToolState(key) === 'disabled') continue
+      if (isExcludedByRoute(tool)) continue
+
+      // Always use mobile:-prefixed ids to avoid clobbering shared desktop handlers
+      const mobileId = `mobile:${key}`
+      const desktopActionId = tool.handler || `core:${key}`
+
+      // Menu tools with getChildren → submenu (delegate to existing desktop handler)
+      if (tool.render === 'menu' && hasChildrenProvider(desktopActionId)) {
+        actions.push({
+          id: mobileId,
+          label: tool.label || tool.ariaLabel,
+          type: 'submenu',
+          modes: tool.modes || ['*'],
+          excludeRoutes: tool.excludeRoutes,
+          toolKey: key,
+          localOnly: !tool.prod,
+        })
+        handlers[mobileId] = {
+          getChildren: () => getActionChildren(desktopActionId),
+        }
+      }
+      // Sidepanel tools → default action (toggle panel)
+      else if (tool.render === 'sidepanel') {
+        actions.push({
+          id: mobileId,
+          label: tool.ariaLabel || tool.label || key,
+          type: 'default',
+          modes: tool.modes || ['*'],
+          excludeRoutes: tool.excludeRoutes,
+          toolKey: key,
+          localOnly: !tool.prod,
+        })
+        handlers[mobileId] = () => { togglePanel(tool.sidepanel) }
+      }
+      // Button tools (e.g. comments) — only if the desktop guard passed (component loaded)
+      else if (tool.render === 'button' && toolComponents[key]) {
+        try {
+          if (key === 'comments') {
+            const { toggleCommentMode, isCommentModeActive } = await import('./comments/commentMode.js')
+            const { isAuthenticated } = await import('./comments/auth.js')
+            const { openAuthModal } = await import('./comments/ui/authModal.js')
+            actions.push({
+              id: mobileId,
+              label: tool.ariaLabel || 'Comments',
+              type: 'toggle',
+              modes: tool.modes || ['*'],
+              excludeRoutes: tool.excludeRoutes,
+              toolKey: key,
+              localOnly: !tool.prod,
+            })
+            handlers[mobileId] = {
+              execute: async () => {
+                if (!isAuthenticated()) {
+                  const user = await openAuthModal()
+                  if (!user) return
+                }
+                toggleCommentMode()
+              },
+              getState: () => isCommentModeActive(),
+            }
+          }
+        } catch { /* comments module not available */ }
+      }
+    }
+
+    // Theme tool — special handling (component-only, no handler in registry)
+    if (toolConfigs.theme && toolComponents.theme) {
+      // Only add if not already handled above (theme has no getChildren in registry)
+      if (!actions.some(a => a.id === 'mobile:theme')) {
+        try {
+          const { themeState, setTheme, THEMES } = await import('./stores/themeStore.js')
+          actions.push({
+            id: 'mobile:theme',
+            label: 'Theme',
+            type: 'submenu',
+            modes: ['*'],
+            toolKey: 'theme',
+            localOnly: !toolConfigs.theme.prod,
+          })
+          handlers['mobile:theme'] = {
+            getChildren: () => {
+              const current = themeState.theme
+              return THEMES.map((t: any) => ({
+                id: `theme:${t.value}`,
+                label: t.label,
+                type: 'toggle' as const,
+                active: current === t.value,
+                execute: () => setTheme(t.value),
+              }))
+            },
+          }
+        } catch { /* theme store not available */ }
+      }
+    }
+
+    // Canvas toolbar stays visible on mobile — no need to duplicate canvas tools here
+
+    setDynamicActions('mobile-toolbar', actions, handlers)
+    mobileActionsRegistered = true
+  }
+
   // Flow info dialog state — driven by core/show-flow-info action
   let flowDialogOpen = $state(false)
   let flowName = $state('default')
@@ -557,7 +701,7 @@
     onkeydown={handleToolbarKeydown}
     bind:this={toolbarEl}
   >
-    {#if visible}
+    {#if visible && !isMobileState}
       {#each cleanedMenus as menu, i (menu.key)}
         {#if menu.render === 'separator'}
           <div class="toolbar-separator" aria-hidden="true"></div>
@@ -592,6 +736,7 @@
                     data={toolData[menu.key]}
                     tabindex={getTabindex(i)}
                     localOnly={isToolbarToolLocalOnly(menu.key)}
+                    {basePath}
                   />
                 </span>
               {/if}
@@ -618,6 +763,10 @@
   <SidePanel onClose={() => focusToolbarItem(activeToolbarIndex < 0 ? toolbarItemCount - 1 : activeToolbarIndex)} />
 {/if}
 
+{#if !isEmbed}
+  <PwaInstallBanner />
+{/if}
+
 <style>
   .toolbar-separator {
     width: 1px;