@dfosco/storyboard 0.5.0-alpha.0

package/src/core/inspector/highlighter.js

@@ -0,0 +1,275 @@
+/**
+ * Lightweight highlight.js highlighter for the inspector panel.
+ *
+ * Uses highlight.js/core with only the languages the inspector needs
+ * (javascript, typescript, xml for JSX), producing small bundles with
+ * no WASM dependencies.
+ *
+ * Theme is resolved at render time via toolbar.config.json's
+ * `highlighting` key and the theme sync settings. Colors are applied
+ * as inline styles — no global CSS injection, no theme conflicts.
+ */
+
+import hljs from 'highlight.js/lib/core'
+import javascript from 'highlight.js/lib/languages/javascript'
+import typescript from 'highlight.js/lib/languages/typescript'
+import xml from 'highlight.js/lib/languages/xml'
+import { getToolbarConfig } from '../stores/toolbarConfigStore.js'
+
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('typescript', typescript)
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('jsx', javascript)
+hljs.registerLanguage('tsx', typescript)
+
+// ---------------------------------------------------------------------------
+// Color palettes — inline styles, no external CSS needed
+// ---------------------------------------------------------------------------
+
+const THEMES = {
+  'github-dark-dimmed': {
+    bg: '#22272e',
+    fg: '#adbac7',
+    headerBg: '#2d333b',
+    headerFg: '#768390',
+    border: '#373e47',
+    lineHighlight: 'rgba(99, 110, 123, 0.15)',
+    linkHover: '#adbac7',
+    keyword: '#f47067',
+    string: '#96d0ff',
+    number: '#6cb6ff',
+    comment: '#768390',
+    function: '#dcbdfb',
+    title: '#dcbdfb',
+    built_in: '#6cb6ff',
+    literal: '#6cb6ff',
+    type: '#6cb6ff',
+    attr: '#6cb6ff',
+    tag: '#8ddb8c',
+    name: '#8ddb8c',
+    attribute: '#6cb6ff',
+    variable: '#f69d50',
+    'template-variable': '#f69d50',
+    params: '#adbac7',
+    meta: '#768390',
+    regexp: '#96d0ff',
+    symbol: '#6cb6ff',
+    operator: '#adbac7',
+    punctuation: '#adbac7',
+    selector: '#8ddb8c',
+    property: '#6cb6ff',
+  },
+  'github-dark': {
+    bg: '#0d1117',
+    fg: '#e6edf3',
+    headerBg: '#161b22',
+    headerFg: '#8b949e',
+    border: '#30363d',
+    lineHighlight: 'rgba(110, 118, 129, 0.15)',
+    linkHover: '#c9d1d9',
+    keyword: '#ff7b72',
+    string: '#a5d6ff',
+    number: '#79c0ff',
+    comment: '#8b949e',
+    function: '#d2a8ff',
+    title: '#d2a8ff',
+    built_in: '#79c0ff',
+    literal: '#79c0ff',
+    type: '#79c0ff',
+    attr: '#79c0ff',
+    tag: '#7ee787',
+    name: '#7ee787',
+    attribute: '#79c0ff',
+    variable: '#ffa657',
+    'template-variable': '#ffa657',
+    params: '#e6edf3',
+    meta: '#8b949e',
+    regexp: '#a5d6ff',
+    symbol: '#79c0ff',
+    operator: '#e6edf3',
+    punctuation: '#e6edf3',
+    selector: '#7ee787',
+    property: '#79c0ff',
+  },
+  github: {
+    bg: '#ffffff',
+    fg: '#1f2328',
+    headerBg: '#f6f8fa',
+    headerFg: '#656d76',
+    border: '#d1d9e0',
+    lineHighlight: 'rgba(234, 179, 8, 0.12)',
+    linkHover: '#1f2328',
+    keyword: '#cf222e',
+    string: '#0a3069',
+    number: '#0550ae',
+    comment: '#6e7781',
+    function: '#8250df',
+    title: '#8250df',
+    built_in: '#0550ae',
+    literal: '#0550ae',
+    type: '#0550ae',
+    attr: '#0550ae',
+    tag: '#116329',
+    name: '#116329',
+    attribute: '#0550ae',
+    variable: '#953800',
+    'template-variable': '#953800',
+    params: '#1f2328',
+    meta: '#6e7781',
+    regexp: '#0a3069',
+    symbol: '#0550ae',
+    operator: '#1f2328',
+    punctuation: '#1f2328',
+    selector: '#116329',
+    property: '#0550ae',
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Theme resolution
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve the current theme ID based on page theme and config.
+ * Follows code-box theme (data-sb-code-theme attribute).
+ */
+function normalizeThemeId(requested, mode) {
+  const fallback = mode === 'light' ? 'github' : 'github-dark-dimmed'
+  if (!requested || typeof requested !== 'string') return fallback
+  if (THEMES[requested]) return requested
+
+  const key = requested.trim().toLowerCase().replace(/[\s_]+/g, '-')
+  const aliases = {
+    github: 'github',
+    'github-light': 'github',
+    light: 'github',
+    'night-owl-light': 'github',
+    'github-dark': 'github-dark',
+    dark: 'github-dark-dimmed',
+    'dark-dimmed': 'github-dark-dimmed',
+    'github-dark-dimmed': 'github-dark-dimmed',
+    'night-owl': 'github-dark-dimmed',
+  }
+
+  const resolved = aliases[key]
+  if (resolved && THEMES[resolved]) return resolved
+  return fallback
+}
+
+/**
+ * Resolve the current theme ID based on page theme and config.
+ * Always follows the page theme (data-sb-theme attribute).
+ */
+function resolveThemeId() {
+  const config = getToolbarConfig()
+  const highlighting = config?.highlighting || {}
+  const darkTheme = normalizeThemeId(highlighting.dark, 'dark')
+  const lightTheme = normalizeThemeId(highlighting.light, 'light')
+
+  const codeTheme = typeof document !== 'undefined'
+    ? document.documentElement.getAttribute('data-sb-code-theme') || 'light'
+    : 'dark'
+
+  return codeTheme.startsWith('dark') ? darkTheme : lightTheme
+}
+
+/**
+ * Get the color palette for the current theme.
+ * Falls back to github-dark-dimmed for unknown theme names.
+ * Exported so InspectorPanel can use it for header/container colors.
+ */
+export function getColors() {
+  const id = resolveThemeId()
+  return THEMES[id] || THEMES['github-dark-dimmed']
+}
+
+// ---------------------------------------------------------------------------
+// HTML generation
+// ---------------------------------------------------------------------------
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+/**
+ * Convert highlight.js class-based spans to inline-styled spans.
+ * highlight.js emits `<span class="hljs-keyword">` etc.
+ * We replace each with `<span style="color:...">` using the palette.
+ */
+function applyInlineColors(html, colors) {
+  return html.replace(
+    /<span class="hljs-([^"]+)">/g,
+    (_, cls) => {
+      const color = colors[cls] || colors.fg
+      return `<span style="color:${color}">`
+    }
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Create the inspector highlighter.
+ * Returns an object with codeToHtml() matching the Shiki-compatible API.
+ */
+export async function createInspectorHighlighter() {
+  return {
+    /**
+     * Highlight code and return HTML string with inline styles.
+     *
+     * @param {string} code - Source code to highlight
+     * @param {object} options
+     * @param {string} [options.lang] - Language identifier
+     * @param {string} [options.theme] - Ignored (theme resolved from config)
+     * @param {boolean} [options.lineNumbers] - Show inline line numbers (default: true)
+     * @param {Array<{ start: { line: number }, end: { line: number }, properties: { class: string } }>} [options.decorations]
+     * @returns {string} HTML string with highlighted code
+     */
+    codeToHtml(code, options = {}) {
+      const lang = options.lang || 'javascript'
+      const decorations = options.decorations || []
+      const showLineNumbers = options.lineNumbers !== false
+      const colors = getColors()
+
+      let highlighted
+      try {
+        highlighted = hljs.highlight(code, { language: lang, ignoreIllegals: true }).value
+      } catch {
+        highlighted = escapeHtml(code)
+      }
+
+      // Convert class-based spans to inline styles
+      highlighted = applyInlineColors(highlighted, colors)
+
+      const lines = highlighted.split('\n')
+      const highlightedLines = new Set()
+      for (const dec of decorations) {
+        if (dec.start && dec.properties?.class) {
+          for (let i = dec.start.line; i <= (dec.end?.line ?? dec.start.line); i++) {
+            highlightedLines.add(i)
+          }
+        }
+      }
+
+      const lineNumWidth = String(lines.length).length
+      const gutterColor = colors.comment || colors.headerFg || '#636e7b'
+
+      const wrappedLines = lines.map((line, i) => {
+        const classes = ['line']
+        if (highlightedLines.has(i)) classes.push('highlighted-line')
+        const numSpan = showLineNumbers
+          ? `<span class="line-number" style="color:${gutterColor};user-select:none;opacity:0.5;display:inline-block;width:${lineNumWidth}ch;text-align:right;margin-right:1.5ch">${String(i + 1).padStart(lineNumWidth)}</span>`
+          : ''
+        return `<span class="${classes.join(' ')}">${numSpan}${line}</span>`
+      }).join('\n')
+
+      return `<pre style="background:${colors.bg};color:${colors.fg};margin:0;padding:var(--base-size-8);overflow-x:auto"><code>${wrappedLines}</code></pre>`
+    },
+  }
+}

package/src/core/inspector/mouseMode.js

@@ -0,0 +1,259 @@
+/**
+ * Inspector Mouse Mode — DOM element selection via hover + click.
+ *
+ * When activated, draws a highlight overlay on the hovered element and
+ * shows a tooltip with the React component name.  Clicking selects the
+ * element and returns its info via the onSelect callback.
+ *
+ * Usage:
+ *   import { createMouseMode } from './mouseMode.js'
+ *   const mode = createMouseMode({
+ *     onSelect: (el) => console.log('Selected:', el),
+ *     onDeactivate: () => console.log('Cancelled'),
+ *   })
+ *   mode.activate()
+ *   // later: mode.deactivate()
+ */
+
+import { getFiberFromElement, getComponentInfo } from './fiberWalker.js'
+
+/**
+ * @typedef {Object} MouseModeOptions
+ * @property {(el: Element) => void} onSelect  Called when user clicks an element
+ * @property {() => void} [onDeactivate]       Called when mode is exited (Escape or programmatic)
+ */
+
+/**
+ * @typedef {Object} MouseModeHandle
+ * @property {() => void} activate   Start inspector mouse mode
+ * @property {() => void} deactivate Stop inspector mouse mode
+ * @property {() => boolean} isActive Whether mouse mode is currently active
+ */
+
+/**
+ * Create an inspector mouse mode instance.
+ *
+ * @param {MouseModeOptions} options
+ * @returns {MouseModeHandle}
+ */
+export function createMouseMode(options = {}) {
+  const { onSelect, onDeactivate } = options
+
+  let active = false
+  let overlay = null
+  let tooltip = null
+  let currentTarget = null
+  let highlightedEl = null
+  let scrollTimer = null
+
+  // ---------------------------------------------------------------------------
+  // Overlay / tooltip creation
+  // ---------------------------------------------------------------------------
+
+  function createOverlay() {
+    overlay = document.createElement('div')
+    overlay.id = 'sb-inspector-overlay'
+    Object.assign(overlay.style, {
+      position: 'fixed',
+      pointerEvents: 'none',
+      zIndex: '9997',
+      border: '2px solid var(--sb--color-purple, #7655a4)',
+      backgroundColor: 'rgba(118, 85, 164, 0.08)',
+      borderRadius: '3px',
+      transition: 'top 0.06s ease, left 0.06s ease, width 0.06s ease, height 0.06s ease',
+      display: 'none',
+    })
+    document.body.appendChild(overlay)
+  }
+
+  function createTooltip() {
+    tooltip = document.createElement('div')
+    tooltip.id = 'sb-inspector-tooltip'
+    Object.assign(tooltip.style, {
+      position: 'fixed',
+      pointerEvents: 'none',
+      zIndex: '9997',
+      backgroundColor: 'var(--sb--color-purple, #7655a4)',
+      color: '#fff',
+      fontSize: '11px',
+      fontFamily: '"Hubot Sans", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
+      fontWeight: '600',
+      padding: '3px 8px',
+      borderRadius: '4px',
+      whiteSpace: 'nowrap',
+      display: 'none',
+      boxShadow: '0 2px 6px rgba(0,0,0,0.3)',
+    })
+    document.body.appendChild(tooltip)
+  }
+
+  function removeElements() {
+    overlay?.remove()
+    tooltip?.remove()
+    overlay = null
+    tooltip = null
+  }
+
+  // ---------------------------------------------------------------------------
+  // Positioning
+  // ---------------------------------------------------------------------------
+
+  function positionOverlay(el) {
+    if (!overlay || !tooltip) return
+
+    const rect = el.getBoundingClientRect()
+    overlay.style.display = 'block'
+    overlay.style.top = `${rect.top}px`
+    overlay.style.left = `${rect.left}px`
+    overlay.style.width = `${rect.width}px`
+    overlay.style.height = `${rect.height}px`
+
+    // Get component name for tooltip
+    const fiber = getFiberFromElement(el)
+    const info = fiber ? getComponentInfo(fiber) : null
+    const label = info?.name || el.tagName.toLowerCase()
+
+    tooltip.textContent = `<${label}>`
+    tooltip.style.display = 'block'
+
+    // Position tooltip above the element, or below if no space
+    const tooltipHeight = 24
+    const gap = 6
+    if (rect.top > tooltipHeight + gap) {
+      tooltip.style.top = `${rect.top - tooltipHeight - gap}px`
+    } else {
+      tooltip.style.top = `${rect.bottom + gap}px`
+    }
+    tooltip.style.left = `${rect.left}px`
+  }
+
+  function hideOverlay() {
+    if (overlay) overlay.style.display = 'none'
+    if (tooltip) tooltip.style.display = 'none'
+  }
+
+  // ---------------------------------------------------------------------------
+  // Event handlers
+  // ---------------------------------------------------------------------------
+
+  function shouldIgnore(el) {
+    // Ignore storyboard UI elements
+    if (el.closest('[data-core-ui-bar]')) return true
+    if (el.closest('#sb-core-ui')) return true
+    if (el.closest('#sb-inspector-overlay')) return true
+    if (el.closest('#sb-inspector-tooltip')) return true
+    if (el.closest('.sb-plugin-root')) return true
+    if (el.closest('[data-slot="panel-content"]')) return true
+    if (el.closest('[data-sidepanel]')) return true
+    return false
+  }
+
+  function handleMouseMove(e) {
+    const el = e.target
+    if (!el || shouldIgnore(el)) {
+      hideOverlay()
+      currentTarget = null
+      return
+    }
+    currentTarget = el
+    positionOverlay(el)
+  }
+
+  function handleClick(e) {
+    if (!currentTarget) return
+    if (shouldIgnore(e.target)) return
+
+    e.preventDefault()
+    e.stopPropagation()
+    e.stopImmediatePropagation()
+
+    const selected = currentTarget
+    deactivate()
+    onSelect?.(selected)
+  }
+
+  function handleKeydown(e) {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      deactivate()
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Public API
+  // ---------------------------------------------------------------------------
+
+  function activate() {
+    if (active) return
+    active = true
+
+    createOverlay()
+    createTooltip()
+
+    // Capture phase so we intercept before any other handler
+    document.addEventListener('mousemove', handleMouseMove, true)
+    document.addEventListener('click', handleClick, true)
+    document.addEventListener('keydown', handleKeydown, true)
+
+    // Change cursor to crosshair on the page
+    document.documentElement.style.cursor = 'crosshair'
+  }
+
+  function deactivate() {
+    if (!active) return
+    active = false
+
+    document.removeEventListener('mousemove', handleMouseMove, true)
+    document.removeEventListener('click', handleClick, true)
+    document.removeEventListener('keydown', handleKeydown, true)
+
+    document.documentElement.style.cursor = ''
+    currentTarget = null
+
+    removeElements()
+    onDeactivate?.()
+  }
+
+  function isActive() {
+    return active
+  }
+
+  /**
+   * Reposition the persistent highlight after scrolling stops.
+   */
+  function handleScroll() {
+    // Hide during scroll for smoother feel
+    if (overlay) overlay.style.display = 'none'
+    if (tooltip) tooltip.style.display = 'none'
+
+    clearTimeout(scrollTimer)
+    scrollTimer = setTimeout(() => {
+      if (highlightedEl) positionOverlay(highlightedEl)
+    }, 80)
+  }
+
+  /**
+   * Show a persistent highlight on an element (used after selection).
+   * Creates the overlay if needed, positions it, and leaves it visible.
+   * Listens for scroll to reposition.
+   */
+  function showHighlight(el) {
+    if (!overlay) createOverlay()
+    if (!tooltip) createTooltip()
+    highlightedEl = el
+    positionOverlay(el)
+    window.addEventListener('scroll', handleScroll, true)
+  }
+
+  /**
+   * Remove the persistent highlight.
+   */
+  function hideHighlight() {
+    highlightedEl = null
+    clearTimeout(scrollTimer)
+    window.removeEventListener('scroll', handleScroll, true)
+    removeElements()
+  }
+
+  return { activate, deactivate, isActive, showHighlight, hideHighlight }
+}

package/src/core/lib/components/ui/alert/alert-action.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertAction = forwardRef(function AlertAction({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertAction;

package/src/core/lib/components/ui/alert/alert-description.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertDescription = forwardRef(function AlertDescription({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-description" className={cn("text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertDescription;

package/src/core/lib/components/ui/alert/alert-title.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AlertTitle = forwardRef(function AlertTitle({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert-title" className={cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3", className)} {...props}>
+{children}
+</div>
+);
+});
+export default AlertTitle;

package/src/core/lib/components/ui/alert/alert.jsx

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+import { tv } from "tailwind-variants";
+
+export const alertVariants = tv({
+base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+variants: {
+variant: {
+default: "bg-card text-card-foreground",
+destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+},
+},
+defaultVariants: {
+variant: "default",
+},
+});
+
+const Alert = forwardRef(function Alert({ className, variant = "default", children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props}>
+{children}
+</div>
+);
+});
+export default Alert;

package/src/core/lib/components/ui/alert/index.js

@@ -0,0 +1,17 @@
+import Root, { alertVariants } from "./alert.jsx";
+import Description from "./alert-description.jsx";
+import Title from "./alert-title.jsx";
+import Action from "./alert-action.jsx";
+
+export {
+alertVariants,
+Root,
+Description,
+Title,
+Action,
+//
+Root as Alert,
+Description as AlertDescription,
+Title as AlertTitle,
+Action as AlertAction,
+};

package/src/core/lib/components/ui/avatar/avatar-badge.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarBadge = forwardRef(function AvatarBadge({ className, children, ...props }, ref) {
+return (
+<span
+ref={ref}
+data-slot="avatar-badge"
+className={cn(
+"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+className
+)}
+{...props}
+>
+{children}
+</span>
+);
+});
+export default AvatarBadge;

package/src/core/lib/components/ui/avatar/avatar-fallback.jsx

@@ -0,0 +1,18 @@
+import { forwardRef } from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../../utils/index.js";
+
+const AvatarFallback = forwardRef(function AvatarFallback({ className, ...props }, ref) {
+return (
+<AvatarPrimitive.Fallback
+ref={ref}
+data-slot="avatar-fallback"
+className={cn(
+"bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
+className
+)}
+{...props}
+/>
+);
+});
+export default AvatarFallback;

package/src/core/lib/components/ui/avatar/avatar-group-count.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const AvatarGroupCount = forwardRef(function AvatarGroupCount({ className, children, ...props }, ref) {
+return (
+<div
+ref={ref}
+data-slot="avatar-group-count"
+className={cn(
+"bg-muted text-muted-foreground size-8 rounded-full text-sm group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 ring-background relative flex shrink-0 items-center justify-center ring-2",
+className
+)}
+{...props}
+>
+{children}
+</div>
+);
+});
+export default AvatarGroupCount;