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

package/src/CreateMenuButton.svelte

@@ -1,133 +0,0 @@
-<!--
-  CreateMenuButton — config-driven trigger for create/workshop features.
-  Appears to the left of the command button in develop (inspect) mode.
-  Menu label and items are defined by toolbar.config.json buttons.create section.
-
-  Icon options (set in config):
-    - "icon": octicon name (e.g. "plus", "beaker") — rendered via Octicon.svelte
-    - "character": raw character/emoji (e.g. "⌘", "🧩") — rendered as text
-    - Falls back to "+" if neither is set
--->
-
-<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 * as Panel from './lib/components/ui/panel/index.js'
-  import Icon from './svelte-plugin-ui/components/Icon.svelte'
-  import { isExcludedByRoute } from './commandActions.js'
-  import type { Component } from 'svelte'
-
-  interface CreateMenuFeature {
-    name: string
-    label: string
-    overlayId: string
-    overlay: Component<Record<string, any>>
-  }
-
-  interface CreateMenuConfig {
-    label: string
-    ariaLabel?: string
-    icon?: string
-    character?: string
-    items?: Array<{ feature: string; label?: string }>
-  }
-
-  interface Props {
-    features?: CreateMenuFeature[]
-    data?: { features?: CreateMenuFeature[] }
-    config?: CreateMenuConfig
-    localOnly?: boolean
-    tabindex?: number
-  }
-
-  let { features: featuresProp = [], data, config = { label: 'Create' }, localOnly, tabindex }: Props = $props()
-
-  // Support both direct `features` prop (legacy) and `data.features` (generic toolbar)
-  const features = $derived(featuresProp.length > 0 ? featuresProp : (data?.features || []))
-
-  const menuWidth = $derived((config as any).menuWidth || null)
-
-  let menuOpen = $state(false)
-  let activeAction: any | null = $state(null)
-
-  // Build a feature lookup for resolving config actions
-  const featuresByName = $derived(
-    Object.fromEntries(features.map(f => [f.name, f]))
-  )
-
-  // Merge config actions with resolved features, preserving order
-  const resolvedActions = $derived.by(() => {
-    const actions = (config as any).actions
-    if (!Array.isArray(actions)) {
-      // Fallback: render a header + feature items if no actions defined
-      return [
-        { type: 'header', label: config.label, _key: 'header' },
-        ...features.map(f => ({ type: 'default', label: f.label, _feature: f, _key: f.overlayId })),
-      ]
-    }
-    return actions.map((a: any, i: number) => {
-      if (a.feature) {
-        const feat = featuresByName[a.feature]
-        if (!feat) return null
-        return { ...a, _feature: feat, _key: a.id || `action-${i}` }
-      }
-      return { ...a, _key: a.id || `${a.type}-${i}` }
-    }).filter(Boolean)
-  })
-
-  function showOverlay(action: any) {
-    activeAction = action
-    menuOpen = false
-  }
-
-  function closeOverlay() { activeAction = null }
-</script>
-
-<DropdownMenu.Root bind:open={menuOpen}>
-  <DropdownMenu.Trigger>
-    {#snippet child({ props })}
-      <TriggerButton
-        active={menuOpen}
-        size="icon-xl"
-        aria-label={config.ariaLabel || config.label}
-        {tabindex}
-        {...props}
-      >
-        {#if config.icon}
-          <Icon name={config.icon} size={16} {...(config.meta || {})} />
-        {:else if config.character}
-          {config.character}
-        {:else}
-          +
-        {/if}
-      </TriggerButton>
-    {/snippet}
-  </DropdownMenu.Trigger>
-
-  <DropdownMenu.Content side="top" align="end" sideOffset={16} class="min-w-[180px]" style={menuWidth ? `width: ${menuWidth}` : ''}>
-    {#each resolvedActions as action (action._key)}
-      {#if isExcludedByRoute(action)}
-        <!-- hidden by route -->
-      {:else if action.type === 'header'}
-        <DropdownMenu.Label>{action.label}</DropdownMenu.Label>
-      {:else if action.type === 'separator'}
-        <DropdownMenu.Separator />
-      {:else if action.type === 'footer'}
-        <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 action._feature}
-        <DropdownMenu.Item onclick={() => showOverlay(action)}>
-          {action.label || action._feature.label}
-        </DropdownMenu.Item>
-      {/if}
-    {/each}
-  </DropdownMenu.Content>
-</DropdownMenu.Root>
-
-{#if activeAction?._feature}
-  <Panel.Root open={true} onOpenChange={(open) => { if (!open) closeOverlay() }}>
-    <Panel.Content>
-      <activeAction._feature.overlay onClose={closeOverlay} {...(activeAction.overlayProps || {})} />
-    </Panel.Content>
-  </Panel.Root>
-{/if}

package/src/DocPanel.svelte

@@ -1,299 +0,0 @@
-<!--
-  DocPanel — Documentation tab for the side panel.
-  Renders the project README.md as styled markdown.
-
-  Server endpoints:
-    GET /_storyboard/docs/readme → { content, path }
-    GET /_storyboard/docs/repo   → { owner, name }
--->
-
-<script>
-  import { onMount } from 'svelte'
-  import { marked } from 'marked'
-  import Icon from './svelte-plugin-ui/components/Icon.svelte'
-
-  // ── README state ──────────────────────────────────────────────
-  let readmeHtml = $state('')
-  let readmeLoading = $state(true)
-  let readmeError = $state('')
-
-  /** @type {{ owner: string, name: string } | null} */
-  let repoInfo = $state(null)
-
-  const githubUrl = $derived(
-    repoInfo ? `https://github.com/${repoInfo.owner}/${repoInfo.name}` : null
-  )
-
-  const _basePath = (typeof window !== 'undefined' && window.__STORYBOARD_BASE_PATH__) || '/'
-  const _apiBase = _basePath.replace(/\/$/, '')
-
-  // ── Effects ───────────────────────────────────────────────────
-
-  onMount(() => {
-    fetchReadme()
-    fetchRepoInfo()
-  })
-
-  // ── Fetchers ──────────────────────────────────────────────────
-
-  async function fetchReadme() {
-    readmeLoading = true
-    readmeError = ''
-    try {
-      const res = await fetch(`${_apiBase}/_storyboard/docs/readme`)
-      if (!res.ok) throw new Error(`${res.status}`)
-      const data = await res.json()
-      readmeHtml = marked.parse(data.content ?? '')
-    } catch {
-      readmeError = 'README.md not found'
-    } finally {
-      readmeLoading = false
-    }
-  }
-
-  async function fetchRepoInfo() {
-    try {
-      const res = await fetch(`${_apiBase}/_storyboard/docs/repo`)
-      if (res.ok) repoInfo = await res.json()
-    } catch {}
-  }
-</script>
-
-<div class="sb-doc-panel">
-  <div class="sb-doc-header">
-    <span class="sb-doc-header-title">
-      <Icon name="primer/book" size={14} />
-      README
-    </span>
-    {#if githubUrl}
-      <a
-        href={githubUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="sb-doc-github-link"
-      >
-        <Icon name="primer/mark-github" size={14} />
-        <span>GitHub</span>
-      </a>
-    {/if}
-  </div>
-
-  <div class="sb-doc-content">
-    {#if readmeLoading}
-      <div class="sb-doc-loading">
-        <div class="sb-doc-spinner"></div>
-      </div>
-    {:else if readmeError}
-      <div class="sb-doc-empty">
-        <Icon name="primer/book" size={24} color="var(--fgColor-muted)" />
-        <p>{readmeError}</p>
-      </div>
-    {:else}
-      <div class="markdown-body">
-        {@html readmeHtml}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  /* ── Panel layout ──────────────────────────────────────────── */
-  .sb-doc-panel {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    color: var(--fgColor-default, #e6edf3);
-    font-family: "Mona Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-    font-size: 13px;
-  }
-
-  /* ── Header ────────────────────────────────────────────────── */
-  .sb-doc-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    border-bottom: 1px solid var(--borderColor-default, #30363d);
-    flex-shrink: 0;
-  }
-
-  .sb-doc-header-title {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--fgColor-default, #e6edf3);
-  }
-
-  .sb-doc-github-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-    color: var(--fgColor-muted, #848d97);
-    text-decoration: none;
-    flex-shrink: 0;
-  }
-
-  .sb-doc-github-link:hover {
-    text-decoration: underline;
-  }
-
-  /* ── Content area ──────────────────────────────────────────── */
-  .sb-doc-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px;
-  }
-
-  /* ── Loading / empty states ────────────────────────────────── */
-  .sb-doc-loading {
-    display: flex;
-    justify-content: center;
-    padding: 32px 0;
-  }
-
-  .sb-doc-spinner {
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--borderColor-default, #30363d);
-    border-top-color: var(--fgColor-accent, #58a6ff);
-    border-radius: 50%;
-    animation: sb-spin 0.6s linear infinite;
-  }
-
-  @keyframes sb-spin {
-    to { transform: rotate(360deg); }
-  }
-
-  .sb-doc-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 32px 16px;
-    color: var(--fgColor-muted, #848d97);
-    text-align: center;
-  }
-
-  /* ── Markdown body ─────────────────────────────────────────── */
-  .markdown-body {
-    line-height: 1.6;
-    word-wrap: break-word;
-  }
-
-  .markdown-body :global(h1) {
-    font-size: 1.6em;
-    font-weight: 600;
-    margin: 0 0 12px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid var(--borderColor-default, #30363d);
-  }
-
-  .markdown-body :global(h2) {
-    font-size: 1.3em;
-    font-weight: 600;
-    margin: 20px 0 8px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid var(--borderColor-default, #30363d);
-  }
-
-  .markdown-body :global(h3) {
-    font-size: 1.1em;
-    font-weight: 600;
-    margin: 16px 0 6px;
-  }
-
-  .markdown-body :global(h4),
-  .markdown-body :global(h5),
-  .markdown-body :global(h6) {
-    font-size: 1em;
-    font-weight: 600;
-    margin: 12px 0 4px;
-  }
-
-  .markdown-body :global(p) {
-    margin: 0 0 12px;
-  }
-
-  .markdown-body :global(a) {
-    color: var(--fgColor-accent, #58a6ff);
-    text-decoration: none;
-  }
-
-  .markdown-body :global(a:hover) {
-    text-decoration: underline;
-  }
-
-  .markdown-body :global(ul),
-  .markdown-body :global(ol) {
-    margin: 0 0 12px;
-    padding-left: 24px;
-  }
-
-  .markdown-body :global(li) {
-    margin: 2px 0;
-  }
-
-  .markdown-body :global(code) {
-    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-    font-size: 0.9em;
-    padding: 2px 6px;
-    background: var(--bgColor-muted, #161b22);
-    border-radius: 4px;
-  }
-
-  .markdown-body :global(pre) {
-    margin: 0 0 12px;
-    padding: 12px;
-    background: var(--bgColor-muted, #161b22);
-    border-radius: 6px;
-    overflow-x: auto;
-  }
-
-  .markdown-body :global(pre code) {
-    padding: 0;
-    background: none;
-    font-size: 12px;
-    line-height: 1.5;
-  }
-
-  .markdown-body :global(blockquote) {
-    margin: 0 0 12px;
-    padding: 4px 12px;
-    border-left: 3px solid var(--borderColor-default, #30363d);
-    color: var(--fgColor-muted, #848d97);
-  }
-
-  .markdown-body :global(table) {
-    width: 100%;
-    border-collapse: collapse;
-    margin: 0 0 12px;
-  }
-
-  .markdown-body :global(th),
-  .markdown-body :global(td) {
-    padding: 6px 10px;
-    border: 1px solid var(--borderColor-default, #30363d);
-    text-align: left;
-  }
-
-  .markdown-body :global(th) {
-    font-weight: 600;
-    background: var(--bgColor-muted, #161b22);
-  }
-
-  .markdown-body :global(hr) {
-    border: none;
-    border-top: 1px solid var(--borderColor-default, #30363d);
-    margin: 16px 0;
-  }
-
-  .markdown-body :global(img) {
-    max-width: 100%;
-    border-radius: 6px;
-  }
-</style>