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

package/src/CanvasCreateMenu.svelte

@@ -1,295 +0,0 @@
-<!--
-  CanvasCreateMenu — CoreUIBar dropdown for adding widgets to the active canvas.
-  Dispatches custom events to bridge Svelte → React.
-  Only visible when a canvas page is active.
--->
-
-<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 {
-    config?: any
-    data?: any
-    canvasName?: string
-    zoom?: number
-    tabindex?: number
-  }
-
-  let { config = {}, data, canvasName = '', zoom, tabindex }: Props = $props()
-
-  const widgetTypes = [
-    { type: 'sticky-note', label: 'Sticky Note' },
-    { type: 'markdown', label: 'Markdown' },
-    { type: 'prototype', label: 'Prototype' },
-  ]
-
-  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()
-  })
-
-  // Focus the first menu item when the dropdown opens
-  $effect(() => {
-    if (menuOpen && view === 'menu') {
-      requestAnimationFrame(() => {
-        const item = document.querySelector('[data-bits-dropdown-menu-content] [data-bits-dropdown-menu-item]:not([data-disabled])') as HTMLElement
-        item?.focus()
-      })
-    }
-  })
-
-  // 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', {
-      detail: { type, canvasName }
-    }))
-    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 activeCanvasId = bridgeState?.canvasId || 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' ? activeCanvasId : 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} onOpenChange={(open) => {
-  if (!open && view !== 'menu') {
-    // User dismissed the panel — reset everything
-    view = 'menu'
-    notificationPath = null
-    resetCreateForm()
-  }
-}}>
-  <DropdownMenu.Trigger>
-    {#snippet child({ props })}
-      <TriggerButton
-        active={menuOpen}
-        size="icon-xl"
-        aria-label={config.ariaLabel || 'Add widget'}
-        {tabindex}
-        {...props}
-      >
-        {#if config.icon}
-          <Icon name={config.icon} size={16} {...(config.meta || {})} />
-        {:else}
-          +
-        {/if}
-      </TriggerButton>
-    {/snippet}
-  </DropdownMenu.Trigger>
-
-  <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

@@ -1,87 +0,0 @@
-<!--
-  CanvasSnap — standalone snap-to-grid toggle button.
--->
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte'
-  import * as Tooltip from './lib/components/ui/tooltip/index.js'
-  import Icon from './svelte-plugin-ui/components/Icon.svelte'
-
-  interface Props {
-    config?: any
-    data?: any
-    tabindex?: number
-  }
-
-  let { config = {}, data, tabindex = -1 }: Props = $props()
-
-  let snapEnabled = $state(false)
-
-  function handleSnapState(e: CustomEvent) {
-    snapEnabled = !!e.detail?.snapEnabled
-  }
-
-  onMount(() => {
-    document.addEventListener('storyboard:canvas:snap-state', handleSnapState as EventListener)
-    // Broadcast configured gridSize to React on mount
-    const gridSize = config.gridSize
-    if (gridSize) {
-      document.dispatchEvent(new CustomEvent('storyboard:canvas:grid-size', {
-        detail: { gridSize }
-      }))
-    }
-    // Request current snap state from React (may have dispatched before we mounted)
-    document.dispatchEvent(new CustomEvent('storyboard:canvas:snap-state-request'))
-  })
-
-  onDestroy(() => {
-    document.removeEventListener('storyboard:canvas:snap-state', handleSnapState as EventListener)
-  })
-</script>
-
-{#if data}
-  <Tooltip.Root>
-    <Tooltip.Trigger>
-      <button
-        class="canvas-snap-btn"
-        class:canvas-snap-btn-active={snapEnabled}
-        onclick={() => data.toggleSnap()}
-        aria-label={config.label || 'Snap to grid'}
-        aria-pressed={snapEnabled}
-        {tabindex}
-      >
-        <Icon name={config.icon || 'iconoir/view-grid'} size={16} {...(config.meta || {})} />
-      </button>
-    </Tooltip.Trigger>
-    <Tooltip.Content side="top">{snapEnabled ? (config.labelOn || 'Snap to grid (on)') : (config.labelOff || 'Snap to grid (off)')}</Tooltip.Content>
-  </Tooltip.Root>
-{/if}
-
-<style>
-  .canvas-snap-btn {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 38px;
-    height: 38px;
-    border-radius: 10px;
-    border: 2.5px solid var(--sb--trigger-border, var(--color-slate-400));
-    background: var(--sb--trigger-bg, var(--color-slate-100));
-    color: var(--sb--trigger-text, var(--color-slate-600));
-    transition: background 120ms;
-  }
-
-  .canvas-snap-btn:hover:not(:disabled) {
-    background: var(--sb--trigger-bg-hover, var(--color-slate-300));
-  }
-
-  .canvas-snap-btn-active {
-    background: var(--sb--trigger-bg-hover, var(--color-slate-300));
-    border-color: var(--sb--trigger-text, var(--color-slate-600));
-  }
-
-  .canvas-snap-btn-active:hover {
-    opacity: 0.85;
-  }
-</style>

package/src/CanvasUndoRedo.svelte

@@ -1,108 +0,0 @@
-<!--
-  CanvasUndoRedo — grouped undo/redo button bar.
--->
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte'
-  import * as Tooltip from './lib/components/ui/tooltip/index.js'
-
-  interface Props {
-    config?: any
-    data?: any
-    tabindex?: number
-  }
-
-  let { config = {}, data, tabindex = -1 }: Props = $props()
-
-  let canUndo = $state(false)
-  let canRedo = $state(false)
-
-  function handleUndoRedoState(e: CustomEvent) {
-    canUndo = !!e.detail?.canUndo
-    canRedo = !!e.detail?.canRedo
-  }
-
-  onMount(() => {
-    document.addEventListener('storyboard:canvas:undo-redo-state', handleUndoRedoState as EventListener)
-  })
-
-  onDestroy(() => {
-    document.removeEventListener('storyboard:canvas:undo-redo-state', handleUndoRedoState as EventListener)
-  })
-</script>
-
-{#if data}
-  <div class="canvas-undo-bar" role="group" aria-label={config.ariaLabel || 'Undo and redo'}>
-    <Tooltip.Root>
-      <Tooltip.Trigger>
-        <button
-          class="canvas-undo-btn"
-          onclick={() => data.undo()}
-          disabled={!canUndo}
-          aria-label="Undo"
-          {tabindex}
-        >
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-            <path d="M6.78 1.97a.75.75 0 0 1 0 1.06L3.81 6h6.44A4.75 4.75 0 0 1 15 10.75v2.5a.75.75 0 0 1-1.5 0v-2.5a3.25 3.25 0 0 0-3.25-3.25H3.81l2.97 2.97a.75.75 0 1 1-1.06 1.06L1.47 7.28a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" />
-          </svg>
-        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side="top">Undo (⌘Z)</Tooltip.Content>
-    </Tooltip.Root>
-    <span class="canvas-undo-separator"></span>
-    <Tooltip.Root>
-      <Tooltip.Trigger>
-        <button
-          class="canvas-undo-btn"
-          onclick={() => data.redo()}
-          disabled={!canRedo}
-          aria-label="Redo"
-          tabindex={-1}
-        >
-          <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
-            <path d="M9.22 1.97a.75.75 0 0 0 0 1.06L12.19 6H5.75A4.75 4.75 0 0 0 1 10.75v2.5a.75.75 0 0 0 1.5 0v-2.5a3.25 3.25 0 0 1 3.25-3.25h6.44l-2.97 2.97a.75.75 0 1 0 1.06 1.06l4.25-4.25a.75.75 0 0 0 0-1.06l-4.25-4.25a.75.75 0 0 0-1.06 0Z" />
-          </svg>
-        </button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side="top">Redo (⌘⇧Z)</Tooltip.Content>
-    </Tooltip.Root>
-  </div>
-{/if}
-
-<style>
-  .canvas-undo-bar {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    border: 2.5px solid var(--sb--trigger-border, var(--color-slate-400));
-    background: var(--sb--trigger-bg, var(--color-slate-100));
-    overflow: hidden;
-  }
-
-  .canvas-undo-btn {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 38px;
-    color: var(--sb--trigger-text, var(--color-slate-600));
-    transition: background 120ms;
-  }
-
-  .canvas-undo-btn:hover:not(:disabled) {
-    background: var(--sb--trigger-bg-hover, var(--color-slate-300));
-  }
-
-  .canvas-undo-btn:disabled {
-    opacity: 0.3;
-    cursor: default;
-  }
-
-  .canvas-undo-separator {
-    width: 2px;
-    height: 40px;
-    background: var(--sb--trigger-border, var(--color-slate-400));
-    flex-shrink: 0;
-  }
-</style>

package/src/CanvasZoomControl.svelte

@@ -1,111 +0,0 @@
-<!--
-  CanvasZoomControl — zoom in/out/reset bar for canvas pages.
--->
-<script lang="ts">
-  import * as Tooltip from './lib/components/ui/tooltip/index.js'
-
-  interface Props {
-    config?: any
-    data?: any
-    zoom?: number
-    tabindex?: number
-  }
-
-  let { config = {}, data, zoom = 100, tabindex = -1 }: Props = $props()
-</script>
-
-{#if data}
-  <div class="canvas-zoom-bar" role="group" aria-label={config.ariaLabel || 'Zoom controls'}>
-    <Tooltip.Root>
-      <Tooltip.Trigger>
-        <button
-          class="canvas-zoom-btn"
-          onclick={() => data.zoomOut(zoom)}
-          disabled={zoom <= data.ZOOM_MIN}
-          aria-label="Decrease zoom"
-          {tabindex}
-        >−</button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side="top">Decrease zoom</Tooltip.Content>
-    </Tooltip.Root>
-    <Tooltip.Root>
-      <Tooltip.Trigger>
-        <button
-          class="canvas-zoom-label"
-          onclick={() => data.zoomReset()}
-          aria-label="Zoom to 100%"
-          tabindex={-1}
-        >{zoom}%</button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side="top">Zoom to 100%</Tooltip.Content>
-    </Tooltip.Root>
-    <Tooltip.Root>
-      <Tooltip.Trigger>
-        <button
-          class="canvas-zoom-btn"
-          onclick={() => data.zoomIn(zoom)}
-          disabled={zoom >= data.ZOOM_MAX}
-          aria-label="Increase zoom"
-          tabindex={-1}
-        >+</button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side="top">Increase zoom</Tooltip.Content>
-    </Tooltip.Root>
-  </div>
-{/if}
-
-<style>
-  .canvas-zoom-bar {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    border: 2.5px solid var(--sb--trigger-border, var(--color-slate-400));
-    background: var(--sb--trigger-bg, var(--color-slate-100));
-    overflow: hidden;
-  }
-
-  .canvas-zoom-btn {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 38px;
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--sb--trigger-text, var(--color-slate-600));
-    transition: background 120ms;
-  }
-
-  .canvas-zoom-btn:hover:not(:disabled) {
-    background: var(--sb--trigger-bg-hover, var(--color-slate-300));
-  }
-
-  .canvas-zoom-btn:disabled {
-    opacity: 0.3;
-    cursor: default;
-  }
-
-  .canvas-zoom-label {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 48px;
-    height: 38px;
-    padding: 0 4px;
-    font-size: 13px;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    color: var(--sb--trigger-text, var(--color-slate-600));
-    border-left: 2px solid var(--sb--trigger-border, var(--color-slate-400));
-    border-right: 2px solid var(--sb--trigger-border, var(--color-slate-400));
-    transition: background 120ms;
-  }
-
-  .canvas-zoom-label:hover {
-    background: var(--sb--trigger-bg-hover, var(--color-slate-300));
-  }
-</style>

package/src/CanvasZoomToFit.svelte

@@ -1,52 +0,0 @@
-<!--
-  CanvasZoomToFit — standalone zoom-to-objects button.
--->
-<script lang="ts">
-  import * as Tooltip from './lib/components/ui/tooltip/index.js'
-  import Icon from './svelte-plugin-ui/components/Icon.svelte'
-
-  interface Props {
-    config?: any
-    data?: any
-    tabindex?: number
-  }
-
-  let { config = {}, data, tabindex = -1 }: Props = $props()
-</script>
-
-{#if data}
-  <Tooltip.Root>
-    <Tooltip.Trigger>
-      <button
-        class="canvas-standalone-btn"
-        onclick={() => data.zoomToFit()}
-        aria-label={config.label || 'Zoom to objects'}
-        {tabindex}
-      >
-        <Icon name={config.icon || 'iconoir/square-3d-three-points'} size={16} {...(config.meta || {})} />
-      </button>
-    </Tooltip.Trigger>
-    <Tooltip.Content side="top">{config.label || 'Zoom to objects'}</Tooltip.Content>
-  </Tooltip.Root>
-{/if}
-
-<style>
-  .canvas-standalone-btn {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 38px;
-    height: 38px;
-    border-radius: 10px;
-    border: 2.5px solid var(--sb--trigger-border, var(--color-slate-400));
-    background: var(--sb--trigger-bg, var(--color-slate-100));
-    color: var(--sb--trigger-text, var(--color-slate-600));
-    transition: background 120ms;
-  }
-
-  .canvas-standalone-btn:hover {
-    background: var(--sb--trigger-bg-hover, var(--color-slate-300));
-  }
-</style>