@dfosco/storyboard-core 4.2.0-beta.3 → 4.2.0

package/src/PwaInstallBanner.jsx

@@ -0,0 +1,124 @@
+/**
+ * PwaInstallBanner — mobile-only "Add to Home Screen" prompt.
+ *
+ * Listens for the `beforeinstallprompt` event (Chrome/Edge) and shows a
+ * dismissible banner. Never shows on desktop or when already installed.
+ */
+
+import { useState, useEffect, useRef, useCallback } from 'react'
+import './PwaInstallBanner.css'
+import { isMobile, isTouchDevice, subscribeToMobile } from './mobileViewport.js'
+
+const DISMISS_KEY = 'sb-pwa-install-dismissed'
+
+function isStandalone() {
+  if (typeof window === 'undefined') return false
+  return (
+    window.matchMedia('(display-mode: standalone)').matches ||
+    window.navigator.standalone === true
+  )
+}
+
+function isDismissed() {
+  try { return localStorage.getItem(DISMISS_KEY) === '1' } catch { return false }
+}
+
+const bannerStyle = {
+  position: 'fixed',
+  bottom: '5rem',
+  left: '1rem',
+  right: '1rem',
+  zIndex: 10000,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+  padding: '0.75rem 1rem',
+  background: 'var(--bgColor-default, #0d1117)',
+  color: 'var(--fgColor-default, #e6edf3)',
+  border: '1px solid var(--borderColor-default, #30363d)',
+  borderRadius: '0.75rem',
+  fontFamily: '"Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif',
+  fontSize: '0.8125rem',
+  boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4)',
+}
+
+const btnBase = {
+  border: 'none',
+  borderRadius: '0.375rem',
+  padding: '0.375rem 0.75rem',
+  fontSize: '0.8125rem',
+  cursor: 'pointer',
+  fontWeight: 500,
+}
+
+const installBtnStyle = {
+  ...btnBase,
+  background: 'var(--button-primary-bgColor-rest, #238636)',
+  color: '#fff',
+}
+
+const dismissBtnStyle = {
+  ...btnBase,
+  background: 'transparent',
+  color: 'var(--fgColor-muted, #8d96a0)',
+  padding: '0.375rem',
+}
+
+export default function PwaInstallBanner() {
+  const [showBanner, setShowBanner] = useState(false)
+  const deferredPromptRef = useRef(null)
+
+  const handleBeforeInstallPrompt = useCallback((e) => {
+    e.preventDefault()
+    deferredPromptRef.current = e
+    if (isMobile() && isTouchDevice() && !isStandalone() && !isDismissed()) {
+      setShowBanner(true)
+    }
+  }, [])
+
+  const handleInstall = useCallback(async () => {
+    const prompt = deferredPromptRef.current
+    if (!prompt) return
+    prompt.prompt()
+    const { outcome } = await prompt.userChoice
+    deferredPromptRef.current = null
+    setShowBanner(false)
+    if (outcome === 'dismissed') {
+      try { localStorage.setItem(DISMISS_KEY, '1') } catch { /* empty */ }
+    }
+  }, [])
+
+  const handleDismiss = useCallback(() => {
+    setShowBanner(false)
+    try { localStorage.setItem(DISMISS_KEY, '1') } catch { /* empty */ }
+  }, [])
+
+  useEffect(() => {
+    const handleInstalled = () => setShowBanner(false)
+    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+    window.addEventListener('appinstalled', handleInstalled)
+
+    const unsubMobile = subscribeToMobile((mobile) => {
+      if (!mobile) setShowBanner(false)
+      else if (deferredPromptRef.current && isTouchDevice() && !isStandalone() && !isDismissed()) {
+        setShowBanner(true)
+      }
+    })
+
+    return () => {
+      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
+      window.removeEventListener('appinstalled', handleInstalled)
+      if (unsubMobile) unsubMobile()
+    }
+  }, [handleBeforeInstallPrompt])
+
+  if (!showBanner) return null
+
+  return (
+    <div style={bannerStyle} role="alert">
+      <span style={{ flex: 1 }}>Add Storyboard to your home screen</span>
+      <button style={installBtnStyle} onClick={handleInstall}>Install</button>
+      <button style={dismissBtnStyle} onClick={handleDismiss} aria-label="Dismiss">✕</button>
+    </div>
+  )
+}

package/src/SidePanel.jsx

@@ -0,0 +1,261 @@
+/**
+ * SidePanel — push-style panel for Documentation and Inspector views.
+ *
+ * Can dock to the right edge (side) or bottom edge of the viewport.
+ * When open, pushes #root content via CSS classes on <html>.
+ * Background color follows the active mode's collar color.
+ * Resizable by dragging the panel edge.
+ * Position preference (side/bottom) is persisted in localStorage.
+ *
+ * Mounted lazily from CoreUIBar when a side panel trigger is clicked.
+ */
+
+import { useState, useEffect, useRef, lazy, Suspense } from 'react'
+import octicons from '@primer/octicons'
+import { sidePanelState, closePanel } from './stores/sidePanelStore.js'
+import './sidepanel.css'
+
+const MIN_WIDTH = 300
+const MAX_WIDTH = 900
+const MIN_HEIGHT = 200
+const MAX_HEIGHT = 600
+
+const LazyInspectorPanel = lazy(() => import('./InspectorPanel.jsx'))
+
+function OcticonSvg({ name, size = 16 }) {
+  const icon = octicons[name]
+  if (!icon) return null
+  const svg = icon.toSVG({ width: size, height: size }).replace('<svg ', '<svg fill="currentColor" ')
+  return <span style={{ display: 'inline-flex', alignItems: 'center' }} dangerouslySetInnerHTML={{ __html: svg }} />
+}
+
+export default function SidePanel({ resizable = true, onClose }) {
+  const [panelState, setPanelState] = useState({ open: false, activeTab: 'inspector' })
+  const [panelWidth, setPanelWidth] = useState(420)
+  const [panelHeight, setPanelHeight] = useState(300)
+  const [panelPosition, setPanelPosition] = useState('side')
+  const [dragging, setDragging] = useState(false)
+  const closeBtnRef = useRef(null)
+
+  const isBottom = panelPosition === 'bottom'
+
+  // Subscribe to the framework-agnostic store
+  useEffect(() => {
+    return sidePanelState.subscribe(setPanelState)
+  }, [])
+
+  // Sync panel width to CSS custom property
+  useEffect(() => {
+    document.documentElement.style.setProperty('--sb--sidepanel-width', `${panelWidth}px`)
+  }, [panelWidth])
+
+  // Sync panel height to CSS custom property
+  useEffect(() => {
+    document.documentElement.style.setProperty('--sb--sidepanel-height', `${panelHeight}px`)
+  }, [panelHeight])
+
+  // Sync position class on <html>
+  useEffect(() => {
+    document.documentElement.classList.toggle('sb-sidepanel-bottom', isBottom)
+    return () => document.documentElement.classList.remove('sb-sidepanel-bottom')
+  }, [isBottom])
+
+  // Auto-focus close button when panel opens
+  useEffect(() => {
+    if (panelState.open && closeBtnRef.current) {
+      requestAnimationFrame(() => closeBtnRef.current?.focus())
+    }
+  }, [panelState.open])
+
+  // Restore dimensions and position from localStorage
+  useEffect(() => {
+    const savedWidth = localStorage.getItem('sb-sidepanel-width')
+    if (savedWidth) {
+      const w = parseInt(savedWidth, 10)
+      // eslint-disable-next-line react-hooks/set-state-in-effect
+      if (w >= MIN_WIDTH && w <= MAX_WIDTH) setPanelWidth(w)
+    }
+
+    const savedHeight = localStorage.getItem('sb-sidepanel-height')
+    if (savedHeight) {
+      const h = parseInt(savedHeight, 10)
+      if (h >= MIN_HEIGHT && h <= MAX_HEIGHT) setPanelHeight(h)
+    }
+
+    const savedPos = localStorage.getItem('sb-sidepanel-position')
+    if (savedPos === 'side' || savedPos === 'bottom') setPanelPosition(savedPos)
+  }, [])
+
+  // Persist width
+  useEffect(() => {
+    localStorage.setItem('sb-sidepanel-width', String(panelWidth))
+  }, [panelWidth])
+
+  // Persist height
+  useEffect(() => {
+    localStorage.setItem('sb-sidepanel-height', String(panelHeight))
+  }, [panelHeight])
+
+  // Persist position
+  useEffect(() => {
+    localStorage.setItem('sb-sidepanel-position', panelPosition)
+  }, [panelPosition])
+
+  // Escape key handler
+  useEffect(() => {
+    function handleKeydown(e) {
+      if (e.key === 'Escape' && panelState.open) {
+        e.preventDefault()
+        closePanel()
+        onClose?.()
+      }
+    }
+    window.addEventListener('keydown', handleKeydown)
+    return () => window.removeEventListener('keydown', handleKeydown)
+  }, [panelState.open, onClose])
+
+  function togglePosition() {
+    setPanelPosition(prev => prev === 'bottom' ? 'side' : 'bottom')
+  }
+
+  // Drag resize (side mode — horizontal)
+  function startDragSide(e) {
+    if (!resizable) return
+    e.preventDefault()
+    setDragging(true)
+
+    const startX = e.clientX
+    const startWidth = panelWidth
+
+    function onMove(ev) {
+      const delta = startX - ev.clientX
+      setPanelWidth(Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + delta)))
+    }
+
+    function onUp() {
+      setDragging(false)
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  // Drag resize (bottom mode — vertical)
+  function startDragBottom(e) {
+    if (!resizable) return
+    e.preventDefault()
+    setDragging(true)
+
+    const startY = e.clientY
+    const startHeight = panelHeight
+
+    function onMove(ev) {
+      const delta = startY - ev.clientY
+      setPanelHeight(Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, startHeight + delta)))
+    }
+
+    function onUp() {
+      setDragging(false)
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  function handleClose() {
+    closePanel()
+    onClose?.()
+  }
+
+  if (!panelState.open) return null
+
+  const panelClassName = [
+    'sb-sidepanel',
+    isBottom && 'sb-sidepanel--bottom',
+    dragging && 'sb-sidepanel-dragging',
+  ].filter(Boolean).join(' ')
+
+  const panelStyle = isBottom
+    ? { height: `${panelHeight}px` }
+    : { width: `${panelWidth}px` }
+
+  const loading = (
+    <div className="sb-sidepanel-loading">
+      <span className="sb-sidepanel-spinner" />
+    </div>
+  )
+
+  return (
+    <div
+      className={panelClassName}
+      data-sidepanel=""
+      role="complementary"
+      aria-label={isBottom ? 'Bottom panel' : 'Side panel'}
+      style={panelStyle}
+    >
+      {/* Drag handle */}
+      {resizable && (
+        <div
+          className="sb-sidepanel-drag-handle"
+          onPointerDown={isBottom ? startDragBottom : startDragSide}
+          role="separator"
+          aria-orientation={isBottom ? 'horizontal' : 'vertical'}
+          aria-label="Resize panel"
+        >
+          <svg className="sb-sidepanel-grabber" width="4" height="16" viewBox="0 0 4 16" fill="currentColor">
+            <circle cx="1" cy="2" r="1" /><circle cx="3" cy="2" r="1" />
+            <circle cx="1" cy="6" r="1" /><circle cx="3" cy="6" r="1" />
+            <circle cx="1" cy="10" r="1" /><circle cx="3" cy="10" r="1" />
+            <circle cx="1" cy="14" r="1" /><circle cx="3" cy="14" r="1" />
+          </svg>
+        </div>
+      )}
+
+      {/* Header */}
+      <div className="sb-sidepanel-header">
+        <span className="sb-sidepanel-title">
+          {panelState.activeTab === 'inspector' ? 'Inspector' : ''}
+        </span>
+        <div className="sb-sidepanel-actions">
+          <button
+            className="sb-sidepanel-action-btn"
+            onClick={togglePosition}
+            aria-label={isBottom ? 'Dock to side' : 'Dock to bottom'}
+            title={isBottom ? 'Dock to side' : 'Dock to bottom'}
+          >
+            {isBottom ? (
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
+                <rect x="1.5" y="1.5" width="11" height="11" rx="1.5" />
+                <line x1="9" y1="1.5" x2="9" y2="12.5" />
+              </svg>
+            ) : (
+              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.2">
+                <rect x="1.5" y="1.5" width="11" height="11" rx="1.5" />
+                <line x1="1.5" y1="9" x2="12.5" y2="9" />
+              </svg>
+            )}
+          </button>
+          <button
+            className="sb-sidepanel-action-btn"
+            onClick={handleClose}
+            aria-label="Close panel"
+            ref={closeBtnRef}
+          >
+            <OcticonSvg name="x" size={16} />
+          </button>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="sb-sidepanel-body">
+        <Suspense fallback={loading}>
+          {panelState.activeTab === 'inspector' && <LazyInspectorPanel />}
+        </Suspense>
+      </div>
+    </div>
+  )
+}

package/src/ThemeMenuButton.jsx

@@ -0,0 +1,139 @@
+import { useState, useEffect } from 'react'
+import { TriggerButton } from './lib/components/ui/trigger-button/index.js'
+import * as DropdownMenu from './lib/components/ui/dropdown-menu/index.js'
+import Icon from './svelte-plugin-ui/components/Icon.jsx'
+import { themeState, setTheme, getTheme, THEMES, themeSyncState, getThemeSyncTargets, setThemeSyncTarget } from '@dfosco/storyboard-core'
+
+export default function ThemeMenuButton({ config = {}, data: _data, localOnly: _localOnly, tabindex = -1 }) {
+  void _data
+  void _localOnly
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [settingsOpen, setSettingsOpen] = useState(false)
+  const [canvasActive, setCanvasActive] = useState(false)
+  const [theme, setThemeState] = useState(getTheme)
+  const [syncState, setSyncState] = useState(getThemeSyncTargets)
+
+  useEffect(() => {
+    const unsub = themeState.subscribe(s => setThemeState(s.theme))
+    return unsub
+  }, [])
+
+  useEffect(() => {
+    const unsub = themeSyncState.subscribe(s => setSyncState({ ...s }))
+    return unsub
+  }, [])
+
+  useEffect(() => {
+    function handleCanvasMounted() { setCanvasActive(true) }
+    function handleCanvasUnmounted() { setCanvasActive(false) }
+    function handleOpenSettings() {
+      setMenuOpen(true)
+      setSettingsOpen(true)
+    }
+    document.addEventListener('storyboard:canvas:mounted', handleCanvasMounted)
+    document.addEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
+    document.addEventListener('storyboard:open-theme-settings', handleOpenSettings)
+
+    const state = window.__storyboardCanvasBridgeState
+    const active = state?.active === true
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setCanvasActive(active)
+    if (!active) {
+      document.dispatchEvent(new CustomEvent('storyboard:canvas:status-request'))
+    }
+
+    return () => {
+      document.removeEventListener('storyboard:canvas:mounted', handleCanvasMounted)
+      document.removeEventListener('storyboard:canvas:unmounted', handleCanvasUnmounted)
+      document.removeEventListener('storyboard:open-theme-settings', handleOpenSettings)
+    }
+  }, [])
+
+  function handleMenuOpenChange(open) {
+    setMenuOpen(open)
+    if (!open) setSettingsOpen(false)
+  }
+
+  function handleSelect(value) {
+    setTheme(value)
+    setMenuOpen(false)
+  }
+
+  function handleSyncToggle(e, target) {
+    e.preventDefault()
+    setThemeSyncTarget(target, !syncState[target])
+  }
+
+  return (
+    <DropdownMenu.Root open={menuOpen} onOpenChange={handleMenuOpenChange}>
+      <DropdownMenu.Trigger>
+          <TriggerButton
+            active={menuOpen}
+            size="icon-xl"
+            aria-label={config.ariaLabel || 'Theme'}
+            tabIndex={tabindex}
+          >
+            <Icon name={config.icon || 'primer/sun'} size={16} {...(config.meta || {})} />
+          </TriggerButton>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Content
+        side="top"
+        align="end"
+        sideOffset={16}
+        style={config.menuWidth ? { minWidth: config.menuWidth } : undefined}
+        className="min-w-[200px]"
+      >
+        {config.label && <DropdownMenu.Label>{config.label}</DropdownMenu.Label>}
+
+        <DropdownMenu.RadioGroup value={theme}>
+          {THEMES.map((option) => (
+            <DropdownMenu.RadioItem
+              key={option.value}
+              value={option.value}
+              onClick={() => handleSelect(option.value)}
+            >
+              {option.name}
+            </DropdownMenu.RadioItem>
+          ))}
+        </DropdownMenu.RadioGroup>
+
+        <DropdownMenu.Separator />
+
+        <DropdownMenu.Sub open={settingsOpen} onOpenChange={setSettingsOpen}>
+          <DropdownMenu.SubTrigger>Theme settings</DropdownMenu.SubTrigger>
+          <DropdownMenu.SubContent className="min-w-[180px]">
+            <DropdownMenu.Label>Apply theme to</DropdownMenu.Label>
+            {canvasActive ? (
+              <DropdownMenu.CheckboxItem
+                checked={syncState.canvas}
+                onSelect={(e) => handleSyncToggle(e, 'canvas')}
+              >
+                Canvas
+              </DropdownMenu.CheckboxItem>
+            ) : (
+              <DropdownMenu.CheckboxItem
+                checked={syncState.prototype}
+                onSelect={(e) => handleSyncToggle(e, 'prototype')}
+              >
+                Prototype
+              </DropdownMenu.CheckboxItem>
+            )}
+            <DropdownMenu.CheckboxItem
+              checked={syncState.toolbar}
+              onSelect={(e) => handleSyncToggle(e, 'toolbar')}
+            >
+              Tools
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.CheckboxItem
+              checked={syncState.codeBoxes}
+              onSelect={(e) => handleSyncToggle(e, 'codeBoxes')}
+            >
+              Code boxes
+            </DropdownMenu.CheckboxItem>
+          </DropdownMenu.SubContent>
+        </DropdownMenu.Sub>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  )
+}