@dfosco/storyboard 0.7.0 → 0.8.1

package/src/core/lib/components/ui/select/select-scroll-up-button.jsx

@@ -1,18 +0,0 @@
-import { forwardRef } from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronUp } from "lucide-react";
-import { cn } from "../../../utils/index.js";
-
-const SelectScrollUpButton = forwardRef(function SelectScrollUpButton({ className, ...props }, ref) {
-return (
-<SelectPrimitive.ScrollUpButton
-ref={ref}
-data-slot="select-scroll-up-button"
-className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
-{...props}
->
-<ChevronUp />
-</SelectPrimitive.ScrollUpButton>
-);
-});
-export default SelectScrollUpButton;

package/src/core/lib/components/ui/select/select-separator.jsx

@@ -1,15 +0,0 @@
-import { forwardRef } from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { cn } from "../../../utils/index.js";
-
-const SelectSeparator = forwardRef(function SelectSeparator({ className, ...props }, ref) {
-return (
-<SelectPrimitive.Separator
-ref={ref}
-data-slot="select-separator"
-className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
-{...props}
-/>
-);
-});
-export default SelectSeparator;

package/src/core/lib/components/ui/select/select-trigger.jsx

@@ -1,25 +0,0 @@
-import { forwardRef } from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { ChevronDown } from "lucide-react";
-import { cn } from "../../../utils/index.js";
-
-const SelectTrigger = forwardRef(function SelectTrigger({ className, children, size = "default", ...props }, ref) {
-return (
-<SelectPrimitive.Trigger
-ref={ref}
-data-slot="select-trigger"
-data-size={size}
-className={cn(
-"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--sb--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-className
-)}
-{...props}
->
-{children}
-<SelectPrimitive.Icon asChild>
-<ChevronDown className="text-muted-foreground size-4 pointer-events-none" />
-</SelectPrimitive.Icon>
-</SelectPrimitive.Trigger>
-);
-});
-export default SelectTrigger;

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

@@ -1,4 +0,0 @@
-import * as SelectPrimitive from "@radix-ui/react-select";
-export default function Select({ children, ...props }) {
-return <SelectPrimitive.Root {...props}>{children}</SelectPrimitive.Root>;
-}

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

@@ -1,34 +0,0 @@
-import Root from "./sheet.jsx";
-import Portal from "./sheet-portal.jsx";
-import Trigger from "./sheet-trigger.jsx";
-import Close from "./sheet-close.jsx";
-import Overlay from "./sheet-overlay.jsx";
-import Content from "./sheet-content.jsx";
-import Header from "./sheet-header.jsx";
-import Footer from "./sheet-footer.jsx";
-import Title from "./sheet-title.jsx";
-import Description from "./sheet-description.jsx";
-
-export {
-Root,
-Close,
-Trigger,
-Portal,
-Overlay,
-Content,
-Header,
-Footer,
-Title,
-Description,
-//
-Root as Sheet,
-Close as SheetClose,
-Trigger as SheetTrigger,
-Portal as SheetPortal,
-Overlay as SheetOverlay,
-Content as SheetContent,
-Header as SheetHeader,
-Footer as SheetFooter,
-Title as SheetTitle,
-Description as SheetDescription,
-};

package/src/core/lib/components/ui/sheet/sheet-close.jsx

@@ -1,7 +0,0 @@
-import { forwardRef } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-
-const SheetClose = forwardRef(function SheetClose(props, ref) {
-return <DialogPrimitive.Close ref={ref} data-slot="sheet-close" {...props} />;
-});
-export default SheetClose;

package/src/core/lib/components/ui/sheet/sheet-content.jsx

@@ -1,35 +0,0 @@
-import { forwardRef } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import SheetOverlay from "./sheet-overlay.jsx";
-import { cn } from "../../../utils/index.js";
-import { Button } from "../button/index.js";
-import { X } from "lucide-react";
-
-const SheetContent = forwardRef(function SheetContent({ className, side = "right", showCloseButton = true, children, ...props }, ref) {
-return (
-<DialogPrimitive.Portal>
-<SheetOverlay />
-<DialogPrimitive.Content
-ref={ref}
-data-slot="sheet-content"
-data-side={side}
-className={cn(
-"bg-background fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[side=bottom]:data-[state=open]:slide-in-from-bottom-10 data-[side=left]:data-[state=open]:slide-in-from-left-10 data-[side=right]:data-[state=open]:slide-in-from-right-10 data-[side=top]:data-[state=open]:slide-in-from-top-10 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[side=bottom]:data-[state=closed]:slide-out-to-bottom-10 data-[side=left]:data-[state=closed]:slide-out-to-left-10 data-[side=right]:data-[state=closed]:slide-out-to-right-10 data-[side=top]:data-[state=closed]:slide-out-to-top-10",
-className
-)}
-{...props}
->
-{children}
-{showCloseButton && (
-<DialogPrimitive.Close asChild data-slot="sheet-close">
-<Button variant="ghost" className="absolute top-3 right-3" size="icon-sm">
-<X />
-<span className="sr-only">Close</span>
-</Button>
-</DialogPrimitive.Close>
-)}
-</DialogPrimitive.Content>
-</DialogPrimitive.Portal>
-);
-});
-export default SheetContent;

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

@@ -1,15 +0,0 @@
-import { forwardRef } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../../../utils/index.js";
-
-const SheetDescription = forwardRef(function SheetDescription({ className, ...props }, ref) {
-return (
-<DialogPrimitive.Description
-ref={ref}
-data-slot="sheet-description"
-className={cn("text-muted-foreground text-sm", className)}
-{...props}
-/>
-);
-});
-export default SheetDescription;

package/src/core/lib/components/ui/sheet/sheet-footer.jsx

@@ -1,11 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../../utils/index.js";
-
-const SheetFooter = forwardRef(function SheetFooter({ className, children, ...props }, ref) {
-return (
-<div ref={ref} data-slot="sheet-footer" className={cn("gap-2 p-4 mt-auto flex flex-col", className)} {...props}>
-{children}
-</div>
-);
-});
-export default SheetFooter;

package/src/core/lib/components/ui/sheet/sheet-header.jsx

@@ -1,11 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../../utils/index.js";
-
-const SheetHeader = forwardRef(function SheetHeader({ className, children, ...props }, ref) {
-return (
-<div ref={ref} data-slot="sheet-header" className={cn("gap-0.5 p-4 flex flex-col", className)} {...props}>
-{children}
-</div>
-);
-});
-export default SheetHeader;

package/src/core/lib/components/ui/sheet/sheet-overlay.jsx

@@ -1,15 +0,0 @@
-import { forwardRef } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../../../utils/index.js";
-
-const SheetOverlay = forwardRef(function SheetOverlay({ className, ...props }, ref) {
-return (
-<DialogPrimitive.Overlay
-ref={ref}
-data-slot="sheet-overlay"
-className={cn("bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
-{...props}
-/>
-);
-});
-export default SheetOverlay;

package/src/core/lib/components/ui/sheet/sheet-portal.jsx

@@ -1,4 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-export default function SheetPortal(props) {
-return <DialogPrimitive.Portal {...props} />;
-}

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

@@ -1,15 +0,0 @@
-import { forwardRef } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "../../../utils/index.js";
-
-const SheetTitle = forwardRef(function SheetTitle({ className, ...props }, ref) {
-return (
-<DialogPrimitive.Title
-ref={ref}
-data-slot="sheet-title"
-className={cn("text-foreground text-base font-medium", className)}
-{...props}
-/>
-);
-});
-export default SheetTitle;

package/src/core/lib/components/ui/sheet/sheet-trigger.jsx

@@ -1,7 +0,0 @@
-import { forwardRef } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-
-const SheetTrigger = forwardRef(function SheetTrigger(props, ref) {
-return <DialogPrimitive.Trigger ref={ref} data-slot="sheet-trigger" {...props} />;
-});
-export default SheetTrigger;

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

@@ -1,4 +0,0 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-export default function Sheet({ children, ...props }) {
-return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;
-}

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

@@ -1,8 +0,0 @@
-import Root, { toggleVariants } from "./toggle.jsx";
-
-export {
-toggleVariants,
-Root,
-//
-Root as Toggle,
-};

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

@@ -1,36 +0,0 @@
-import { forwardRef } from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
-import { cn } from "../../../utils/index.js";
-import { tv } from "tailwind-variants";
-
-export const toggleVariants = tv({
-base: "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-variants: {
-variant: {
-default: "bg-transparent",
-outline: "border-input hover:bg-muted border bg-transparent",
-},
-size: {
-default: "h-8 min-w-8 px-2",
-sm: "h-7 min-w-7 rounded-[min(var(--sb--radius-md),12px)] px-1.5 text-[0.8rem]",
-lg: "h-9 min-w-9 px-2.5",
-},
-},
-defaultVariants: {
-variant: "default",
-size: "default",
-},
-});
-
-const Toggle = forwardRef(function Toggle({ className, variant = "default", size = "default", ...props }, ref) {
-return (
-<TogglePrimitive.Root
-ref={ref}
-data-slot="toggle"
-className={cn(toggleVariants({ variant, size }), className)}
-{...props}
-/>
-);
-});
-
-export default Toggle;

package/src/core/lib/components/ui/toggle-group/index.js

@@ -1,10 +0,0 @@
-import Root from "./toggle-group.jsx";
-import Item from "./toggle-group-item.jsx";
-
-export {
-Root,
-Item,
-//
-Root as ToggleGroup,
-Item as ToggleGroupItem,
-};

package/src/core/lib/components/ui/toggle-group/toggle-group-item.jsx

@@ -1,29 +0,0 @@
-import { forwardRef } from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { useToggleGroupCtx } from "./toggle-group.jsx";
-import { cn } from "../../../utils/index.js";
-import { toggleVariants } from "../toggle/index.js";
-
-const ToggleGroupItem = forwardRef(function ToggleGroupItem({ className, variant, size, ...props }, ref) {
-const ctx = useToggleGroupCtx();
-
-return (
-<ToggleGroupPrimitive.Item
-ref={ref}
-data-slot="toggle-group-item"
-data-variant={ctx.variant || variant}
-data-size={ctx.size || size}
-data-spacing={ctx.spacing}
-className={cn(
-"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
-toggleVariants({
-variant: ctx.variant || variant,
-size: ctx.size || size,
-}),
-className
-)}
-{...props}
-/>
-);
-});
-export default ToggleGroupItem;

package/src/core/lib/components/ui/toggle-group/toggle-group.jsx

@@ -1,43 +0,0 @@
-import { forwardRef, createContext, useContext, useMemo } from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { cn } from "../../../utils/index.js";
-
-export const ToggleGroupContext = createContext({
-variant: "default",
-size: "default",
-spacing: 0,
-orientation: "horizontal",
-});
-
-export function useToggleGroupCtx() {
-return useContext(ToggleGroupContext);
-}
-
-const ToggleGroup = forwardRef(function ToggleGroup(
-{ className, variant = "default", size = "default", spacing = 0, orientation = "horizontal", children, ...props },
-ref
-) {
-const ctx = useMemo(() => ({ variant, size, spacing, orientation }), [variant, size, spacing, orientation]);
-
-return (
-<ToggleGroupContext.Provider value={ctx}>
-<ToggleGroupPrimitive.Root
-ref={ref}
-orientation={orientation}
-data-slot="toggle-group"
-data-variant={variant}
-data-size={size}
-data-spacing={spacing}
-style={{ '--sb--gap': spacing }}
-className={cn(
-"rounded-lg data-[size=sm]:rounded-[min(var(--sb--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--sb--gap))] data-vertical:flex-col data-vertical:items-stretch",
-className
-)}
-{...props}
->
-{children}
-</ToggleGroupPrimitive.Root>
-</ToggleGroupContext.Provider>
-);
-});
-export default ToggleGroup;

package/src/internals/canvas/StoryErrorBoundary.jsx

@@ -1,47 +0,0 @@
-/**
- * Shared error boundary for isolated story rendering.
- *
- * Used by:
- *  - componentIsolate.jsx (the iframe shell at /_storyboard/canvas/isolate)
- *  - InlineStoryRenderer (in-process story rendering when canvas.inlineStories=true)
- *
- * Catches render errors so a broken story cannot crash the parent (canvas or shell).
- */
-import { createElement, Component as ReactComponent } from 'react'
-
-const errorStyle = {
-  padding: '16px',
-  color: '#cf222e',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  fontSize: '13px',
-  lineHeight: 1.5,
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-word',
-}
-
-export class StoryErrorBoundary extends ReactComponent {
-  constructor(props) {
-    super(props)
-    this.state = { error: null }
-  }
-  static getDerivedStateFromError(error) {
-    return { error }
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.resetKey !== this.props.resetKey && this.state.error) {
-      this.setState({ error: null })
-    }
-  }
-  render() {
-    if (this.state.error) {
-      return createElement('div', { style: errorStyle },
-        createElement('strong', null, this.props.name || 'Component'),
-        createElement('br'),
-        String(this.state.error.message || this.state.error),
-      )
-    }
-    return this.props.children
-  }
-}
-
-export default StoryErrorBoundary

package/src/internals/canvas/componentIsolate.jsx

@@ -1,144 +0,0 @@
-/**
- * Canvas Component Isolate — iframe entry point.
- *
- * Renders a single named export from a .story.jsx module inside an
- * isolated document. The parent CanvasPage embeds this via an iframe
- * so a broken component cannot crash the entire canvas.
- *
- * Query params:
- *   module — absolute or base-relative path to the .story.jsx file
- *   export — the named export to render
- *   theme  — canvas theme (light / dark / dark_dimmed)
- */
-import { createElement } from 'react'
-import { createRoot } from 'react-dom/client'
-import { ThemeProvider, BaseStyles } from '@primer/react'
-import { StoryErrorBoundary as IsolateErrorBoundary } from './StoryErrorBoundary.jsx'
-
-// ── Primer Primitives CSS (required for CSS variables) ──────────────
-import '@primer/primitives/dist/css/base/size/size.css'
-import '@primer/primitives/dist/css/base/typography/typography.css'
-import '@primer/primitives/dist/css/base/motion/motion.css'
-import '@primer/primitives/dist/css/functional/size/border.css'
-import '@primer/primitives/dist/css/functional/size/breakpoints.css'
-import '@primer/primitives/dist/css/functional/size/size-coarse.css'
-import '@primer/primitives/dist/css/functional/size/size-fine.css'
-import '@primer/primitives/dist/css/functional/size/size.css'
-import '@primer/primitives/dist/css/functional/size/viewport.css'
-import '@primer/primitives/dist/css/functional/typography/typography.css'
-import '@primer/primitives/dist/css/functional/themes/light.css'
-import '@primer/primitives/dist/css/functional/themes/light-colorblind.css'
-import '@primer/primitives/dist/css/functional/themes/dark.css'
-import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css'
-import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css'
-import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css'
-
-// ── Styles ──────────────────────────────────────────────────────────
-const errorStyle = {
-  padding: '16px',
-  color: '#cf222e',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  fontSize: '13px',
-  lineHeight: 1.5,
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-word',
-}
-
-// ── Resolve module path (mirrors useCanvas.resolveCanvasModuleImport) ─
-function resolveModulePath(raw) {
-  if (!raw) return raw
-  if (/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(raw)) return raw
-  if (!raw.startsWith('/')) return raw
-  const base = (import.meta.env?.BASE_URL || '/').replace(/\/$/, '')
-  if (!base) return raw
-  if (raw.startsWith(base)) return raw
-  return `${base}${raw}`
-}
-
-// ── Main ────────────────────────────────────────────────────────────
-const params = new URLSearchParams(window.location.search)
-const modulePath = params.get('module')
-const exportName = params.get('export')
-const theme = params.get('theme') || 'light'
-
-// Map theme to Primer colorMode
-const colorMode = theme.startsWith('dark') ? 'night' : 'day'
-
-// Apply theme to document for Primer / CSS-var inheritance
-document.documentElement.setAttribute('data-color-mode', theme.startsWith('dark') ? 'dark' : 'light')
-document.documentElement.setAttribute('data-dark-theme', theme.startsWith('dark') ? theme : '')
-document.documentElement.setAttribute('data-light-theme', theme.startsWith('dark') ? '' : theme || 'light')
-document.documentElement.setAttribute('data-sb-theme', theme || 'light')
-
-// Note: we deliberately do NOT install the canvas-hmr-guard here. The guard
-// drops BOTH `full-reload` and `update` payloads server-side, which means
-// edits to the story source file never reach this iframe — no Fast Refresh,
-// no reload, nothing. Story widgets are expected to refresh when the
-// underlying .story.jsx is edited, so we let HMR through.
-void import.meta.hot
-
-const root = createRoot(document.getElementById('root'))
-
-async function mount() {
-  if (!modulePath) {
-    root.render(createElement('div', { style: errorStyle }, 'Missing module param'))
-    return
-  }
-
-  // Validate: only allow .story.{jsx,tsx} modules
-  if (!modulePath.match(/\.story\.(jsx|tsx)$/)) {
-    root.render(createElement('div', { style: errorStyle }, 'Invalid module path — only .story.jsx/.tsx files are allowed'))
-    return
-  }
-
-  try {
-    const resolved = resolveModulePath(modulePath)
-    const mod = await import(/* @vite-ignore */ resolved)
-
-    if (exportName) {
-      // Single export mode
-      const Component = mod[exportName]
-      if (!Component || typeof Component !== 'function') {
-        throw new Error(`Export "${exportName}" not found or is not a component`)
-      }
-      root.render(
-        createElement(ThemeProvider, { colorMode },
-          createElement(BaseStyles, null,
-            createElement(IsolateErrorBoundary, { name: exportName },
-              createElement(Component),
-            ),
-          ),
-        ),
-      )
-    } else {
-      // All exports mode — render every named function export stacked
-      const entries = Object.entries(mod).filter(
-        ([key, value]) => key !== 'default' && typeof value === 'function',
-      )
-      if (entries.length === 0) {
-        throw new Error('No named exports found in story module')
-      }
-      root.render(
-        createElement(ThemeProvider, { colorMode },
-          createElement(BaseStyles, null,
-            ...entries.map(([name, Component]) =>
-              createElement(IsolateErrorBoundary, { key: name, name },
-                createElement(Component),
-              ),
-            ),
-          ),
-        ),
-      )
-    }
-  } catch (err) {
-    root.render(
-      createElement('div', { style: errorStyle },
-        createElement('strong', null, exportName || 'Component'),
-        createElement('br'),
-        String(err.message || err),
-      ),
-    )
-  }
-}
-
-mount()