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

package/src/lib/components/ui/textarea/textarea.svelte

@@ -1,21 +0,0 @@
-<script>
-	import { cn } from "../../../utils/index.js";
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		"data-slot": dataSlot = "textarea",
-		...restProps
-	} = $props();
-</script>
-
-<textarea
-	bind:this={ref}
-	data-slot={dataSlot}
-	class={cn(
-		"border-input dark:bg-input/30 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 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
-	bind:value
-	{...restProps}
-></textarea>

package/src/lib/components/ui/toggle/toggle.svelte

@@ -1,45 +0,0 @@
-<script module>
-	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",
-		},
-	});
-
-</script>
-
-<script>
-	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { cn } from "../../../utils/index.js";
-
-	let {
-		ref = $bindable(null),
-		pressed = $bindable(false),
-		class: className,
-		size = "default",
-		variant = "default",
-		...restProps
-	} = $props();
-</script>
-
-<TogglePrimitive.Root
-	bind:ref
-	bind:pressed
-	data-slot="toggle"
-	class={cn(toggleVariants({ variant, size }), className)}
-	{...restProps}
-/>

package/src/lib/components/ui/toggle-group/toggle-group-item.svelte

@@ -1,35 +0,0 @@
-<script>
-	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-	import { getToggleGroupCtx } from "./toggle-group.svelte";
-	import { cn } from "../../../utils/index.js";
-	import { toggleVariants } from "../../../components/ui/toggle/index.js";
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		size,
-		variant,
-		...restProps
-	} = $props();
-
-	const ctx = getToggleGroupCtx();
-</script>
-
-<ToggleGroupPrimitive.Item
-	bind:ref
-	data-slot="toggle-group-item"
-	data-variant={ctx.variant || variant}
-	data-size={ctx.size || size}
-	data-spacing={ctx.spacing}
-	class={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
-	)}
-	{value}
-	{...restProps}
-/>

package/src/lib/components/ui/toggle-group/toggle-group.svelte

@@ -1,63 +0,0 @@
-<script module>
-	import { getContext, setContext } from "svelte";
-	import { toggleVariants } from "../../../components/ui/toggle/index.js";
-
-	export function setToggleGroupCtx(props) {
-		setContext("toggleGroup", props);
-	}
-
-	export function getToggleGroupCtx() {
-		return getContext("toggleGroup");
-	}
-</script>
-
-<script>
-	import { ToggleGroup as ToggleGroupPrimitive } from "bits-ui";
-	import { cn } from "../../../utils/index.js";
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		size = "default",
-		spacing = 0,
-		orientation = "horizontal",
-		variant = "default",
-		...restProps
-	} = $props();
-
-	setToggleGroupCtx({
-		get variant() {
-			return variant;
-		},
-		get size() {
-			return size;
-		},
-		get spacing() {
-			return spacing;
-		},
-		get orientation() {
-			return orientation;
-		},
-	});
-</script>
-
-<!--
-Discriminated Unions + Destructing (required for bindable) do not
-get along, so we shut typescript up by casting `value` to `never`.
--->
-<ToggleGroupPrimitive.Root
-	bind:value={value}
-	bind:ref
-	{orientation}
-	data-slot="toggle-group"
-	data-variant={variant}
-	data-size={size}
-	data-spacing={spacing}
-	style={`--sb--gap: ${spacing}`}
-	class={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
-	)}
-	{...restProps}
-/>

package/src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -1,24 +0,0 @@
-<script>
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-	import { cn } from "../../../utils/index.js";
-
-	let {
-		ref = $bindable(null),
-		sideOffset = 8,
-		class: className,
-		...restProps
-	} = $props();
-</script>
-
-<TooltipPrimitive.Portal>
-	<TooltipPrimitive.Content
-		bind:ref
-		data-slot="tooltip-content"
-		{sideOffset}
-		class={cn(
-			"font-sans bg-slate-700 text-white text-xs px-2.5 py-1.5 rounded-lg shadow-lg z-[10001] animate-in fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-			className
-		)}
-		{...restProps}
-	/>
-</TooltipPrimitive.Portal>

package/src/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -1,27 +0,0 @@
-<script>
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-
-	let { child, children, ...restProps } = $props();
-</script>
-
-{#if child}
-	<TooltipPrimitive.Trigger {...restProps} {child} />
-{:else}
-	<TooltipPrimitive.Trigger {...restProps}>
-		{#snippet child({ props })}
-			<!-- inline-flex span: has a box for pointer events (tooltips on hover)
-			     but tabindex=-1 keeps it out of the tab order.
-			     onfocusin relays child focus to the tooltip's onfocus handler. -->
-			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-			<span
-				{...props}
-				tabindex={-1}
-				onfocusin={props.onfocus}
-				onfocusout={props.onblur}
-				style="display: inline-flex"
-			>
-				{@render children?.()}
-			</span>
-		{/snippet}
-	</TooltipPrimitive.Trigger>
-{/if}

package/src/lib/components/ui/tooltip/tooltip.svelte

@@ -1,9 +0,0 @@
-<script>
-	import { Tooltip as TooltipPrimitive } from "bits-ui";
-
-	let { ...restProps } = $props();
-</script>
-
-<TooltipPrimitive.Provider delayDuration={50}>
-	<TooltipPrimitive.Root {...restProps} />
-</TooltipPrimitive.Provider>

package/src/lib/components/ui/trigger-button/trigger-button.svelte

@@ -1,106 +0,0 @@
-<!--
-  TriggerButton — floating action trigger with smooth superellipse corners.
-  First component of the core UI kit for floating menus.
-
-  Themable via CSS custom properties (set on any ancestor):
-    --sb--trigger-bg         Background color        (default: slate-100)
-    --sb--trigger-bg-hover   Background on hover/active (default: slate-200)
-    --sb--trigger-text       Text / icon color        (default: slate-600)
-    --sb--trigger-border     Border color             (default: slate-400)
--->
-
-<script module>
-  import { cn } from "../../../utils/index.js";
-
-  // Register CSS Houdini paint worklet for superellipse masks.
-  import { registerSmoothCorners } from '../../../../smoothCorners.js'
-  registerSmoothCorners()
-</script>
-
-<script>
-  import { Button } from '../../../components/ui/button/index.js'
-
-  let {
-    class: className,
-    wrapperClass = "",
-    active = false,
-    inactive = false,
-    dimmed = false,
-    localOnly = false,
-    size = "icon-2xl",
-    children,
-    ...restProps
-  } = $props();
-
-  const borderWidth = $derived(
-    ['icon-2xl', 'icon-xl', '2xl', 'xl'].includes(size) ? '3px' : '2px'
-  );
-</script>
-
-<span
-  data-trigger-button
-  data-active={active || undefined}
-  data-inactive={inactive || undefined}
-  data-dimmed={dimmed || undefined}
-  data-local-only={localOnly || undefined}
-  style:--sb--trigger-border-width={borderWidth}
->
-  <Button
-    variant="trigger"
-    {size}
-    disabled={inactive}
-    wrapperClass={cn(
-      "smooth-corners [--sb--smooth-corners:4] hover:rotate-2 focus-visible:rotate-2 transition-transform",
-      active && !inactive && "rotate-2",
-      wrapperClass
-    )}
-    class={cn(
-      "smooth-corners leading-none font-semibold",
-      className
-    )}
-    {...restProps}
-  >
-    {@render children?.()}
-  </Button>
-</span>
-
-<style>
-  [data-trigger-button] {
-    display: inline-flex;
-    position: relative;
-  }
-  [data-trigger-button] :global([data-slot="button-wrapper"]) {
-    --sb--sc-border-color: var(--sb--trigger-border, var(--color-slate-400));
-    --sb--sc-border-width: var(--sb--trigger-border-width, 3px);
-  }
-  /* Accent-colored border/gap on focus — follows the superellipse shape */
-  [data-trigger-button] :global([data-slot="button-wrapper"]:has([data-slot="button"]:focus-visible)) {
-    --sb--sc-border-color: hsl(212 92% 45%);
-  }
-  [data-trigger-button] :global([data-slot="button"]) {
-    background-color: var(--sb--trigger-bg, var(--color-slate-100));
-    color: var(--sb--trigger-text, var(--color-slate-600));
-  }
-  [data-trigger-button] :global([data-slot="button"]:hover),
-  [data-trigger-button] :global([data-slot="button"]:focus-visible),
-  [data-trigger-button] :global([data-slot="button"][aria-expanded="true"]),
-  [data-trigger-button][data-active] :global([data-slot="button"]) {
-    background-color: var(--sb--trigger-bg-hover, var(--color-slate-300));
-  }
-
-  /* Inactive: disabled-looking, no interaction */
-  [data-trigger-button][data-inactive] {
-    opacity: 0.45;
-    pointer-events: none;
-  }
-
-  /* Dimmed: reduced visibility, interactive on hover/focus */
-  [data-trigger-button][data-dimmed] {
-    opacity: 0.3;
-    transition: opacity 200ms;
-  }
-  [data-trigger-button][data-dimmed]:hover,
-  [data-trigger-button][data-dimmed]:focus-within {
-    opacity: 1;
-  }
-</style>

package/src/svelte-plugin-ui/components/Icon.svelte

@@ -1,181 +0,0 @@
-<!--
-  Icon — renders icons from multiple sources using namespaced names.
-
-  Sources (by namespace prefix):
-    primer/    → Primer Octicons (fill-based)
-    feather/   → Feather Icons (stroke-based)
-    iconoir/   → Iconoir (stroke-based, manually registered)
-    (no prefix) → Custom overrides (folder, folder-open)
-
-  Usage:
-    <Icon name="primer/repo" />
-    <Icon name="folder" color="#54aeff" />
-    <Icon name="feather/fast-forward" size={16} />
-    <Icon name="iconoir/square-dashed" size={16} strokeWeight={2} scale={1.05} />
-    <Icon name="primer/gear" size={16} label="Settings" />
-    <Icon name="feather/tablet" rotate={90} />
-    <Icon name="primer/lock" offsetX={1} offsetY={-1} />
-    <Icon name="feather/arrow-right" flipX />
--->
-
-<script lang="ts">
-  import octicons from '@primer/octicons'
-  import feather from 'feather-icons'
-
-  // Custom SVG paths (fill-based, no namespace prefix).
-  const customIcons: Record<string, { viewBox: string; path: string }> = {
-    'folder': {
-      viewBox: '0 0 24 24',
-      path: 'M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h8q.825 0 1.413.588T22 8v10q0 .825-.587 1.413T20 20z',
-    },
-    'folder-open': {
-      viewBox: '0 0 24 24',
-      path: 'M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h5.175q.4 0 .763.15t.637.425L12 6h9q.425 0 .713.288T22 7t-.288.713T21 8H7.85q-1.55 0-2.7.975T4 11.45V18l1.975-6.575q.2-.65.738-1.037T7.9 10h12.9q1.025 0 1.613.813t.312 1.762l-1.8 6q-.2.65-.737 1.038T19 20z',
-    },
-  }
-
-  // Iconoir icons — registered manually from iconoir package.
-  // To add: copy inner paths from node_modules/iconoir/icons/{regular|solid}/{name}.svg
-  // Set fill: true for solid/fill-based icons (default: false = stroke-based)
-  const iconoirIcons: Record<string, { viewBox: string; strokeWidth?: string; content: string; fill?: boolean }> = {
-    'square-dashed': {
-      viewBox: '0 0 24 24',
-      strokeWidth: '1.5',
-      content: '<path d="M7 4H4V7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 11V13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 4H13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M11 20H13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 11V13" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 4H20V7" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 20H4V17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M17 20H20V17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
-    },
-    'key-command': {
-      viewBox: '0 0 24 24',
-      strokeWidth: '1.5',
-      content: '<path d="M9 6V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 6V18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 6C9 4.34315 7.65685 3 6 3C4.34315 3 3 4.34315 3 6C3 7.65685 4.34315 9 6 9H18C19.6569 9 21 7.65685 21 6C21 4.34315 19.6569 3 18 3C16.3431 3 15 4.34315 15 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 18C9 19.6569 7.65685 21 6 21C4.34315 21 3 19.6569 3 18C3 16.3431 4.34315 15 6 15H18C19.6569 15 21 16.3431 21 18C21 19.6569 19.6569 21 18 21C16.3431 21 15 19.6569 15 18" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
-    },
-    'plus-circle': {
-      viewBox: '0 0 24 24',
-      strokeWidth: '1.5',
-      content: '<path d="M8 12H12M16 12H12M12 12V8M12 12V16" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
-    },
-    'plus-circle-solid': {
-      viewBox: '0 0 24 24',
-      fill: true,
-      content: '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM12.75 8C12.75 7.58579 12.4142 7.25 12 7.25C11.5858 7.25 11.25 7.58579 11.25 8V11.25H8C7.58579 11.25 7.25 11.5858 7.25 12C7.25 12.4142 7.58579 12.75 8 12.75H11.25V16C11.25 16.4142 11.5858 16.75 12 16.75C12.4142 16.75 12.75 16.4142 12.75 16V12.75H16C16.4142 12.75 16.75 12.4142 16.75 12C16.75 11.5858 16.4142 11.25 16 11.25H12.75V8Z" fill="currentColor"/>',
-    },
-    'grid-plus': {
-      viewBox: '0 0 24 24',
-      strokeWidth: '1.5',
-      content: '<path d="M13.9922 17H16.9922M19.9922 17H16.9922M16.9922 17V14M16.9922 17V20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 9.4V4.6C4 4.26863 4.26863 4 4.6 4H9.4C9.73137 4 10 4.26863 10 4.6V9.4C10 9.73137 9.73137 10 9.4 10H4.6C4.26863 10 4 9.73137 4 9.4Z" stroke="currentColor" stroke-width="1.5"/><path d="M4 19.4V14.6C4 14.2686 4.26863 14 4.6 14H9.4C9.73137 14 10 14.2686 10 14.6V19.4C10 19.7314 9.73137 20 9.4 20H4.6C4.26863 20 4 19.7314 4 19.4Z" stroke="currentColor" stroke-width="1.5"/><path d="M14 9.4V4.6C14 4.26863 14.2686 4 14.6 4H19.4C19.7314 4 20 4.26863 20 4.6V9.4C20 9.73137 19.7314 10 19.4 10H14.6C14.2686 10 14 9.73137 14 9.4Z" stroke="currentColor" stroke-width="1.5"/>',
-    },
-    'dots-grid-3x3': {
-      viewBox: '0 0 24 24',
-      strokeWidth: '1.5',
-      content: '<path d="M5.5 6C5.77614 6 6 5.77614 6 5.5C6 5.22386 5.77614 5 5.5 5C5.22386 5 5 5.22386 5 5.5C5 5.77614 5.22386 6 5.5 6Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.5 12.5C5.77614 12.5 6 12.2761 6 12C6 11.7239 5.77614 11.5 5.5 11.5C5.22386 11.5 5 11.7239 5 12C5 12.2761 5.22386 12.5 5.5 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.5 19C5.77614 19 6 18.7761 6 18.5C6 18.2239 5.77614 18 5.5 18C5.22386 18 5 18.2239 5 18.5C5 18.7761 5.22386 19 5.5 19Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 6C12.2761 6 12.5 5.77614 12.5 5.5C12.5 5.22386 12.2761 5 12 5C11.7239 5 11.5 5.22386 11.5 5.5C11.5 5.77614 11.7239 6 12 6Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 12.5C12.2761 12.5 12.5 12.2761 12.5 12C12.5 11.7239 12.2761 11.5 12 11.5C11.7239 11.5 11.5 11.7239 11.5 12C11.5 12.2761 11.7239 12.5 12 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 19C12.2761 19 12.5 18.7761 12.5 18.5C12.5 18.2239 12.2761 18 12 18C11.7239 18 11.5 18.2239 11.5 18.5C11.5 18.7761 11.7239 19 12 19Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 6C18.7761 6 19 5.77614 19 5.5C19 5.22386 18.7761 5 18.5 5C18.2239 5 18 5.22386 18 5.5C18 5.77614 18.2239 6 18.5 6Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 12.5C18.7761 12.5 19 12.2761 19 12C19 11.7239 18.7761 11.5 18.5 11.5C18.2239 11.5 18 11.7239 18 12C18 12.2761 18.2239 12.5 18.5 12.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 19C18.7761 19 19 18.7761 19 18.5C19 18.2239 18.7761 18 18.5 18C18.2239 18 18 18.2239 18 18.5C18 18.7761 18.2239 19 18.5 19Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
-    },
-    'view-grid': {
-      viewBox: '0 0 24 24',
-      strokeWidth: '1.5',
-      content: '<path d="M14 20.4V14.6C14 14.2686 14.2686 14 14.6 14H20.4C20.7314 14 21 14.2686 21 14.6V20.4C21 20.7314 20.7314 21 20.4 21H14.6C14.2686 21 14 20.7314 14 20.4Z" stroke="currentColor" stroke-width="1.5"/><path d="M3 20.4V14.6C3 14.2686 3.26863 14 3.6 14H9.4C9.73137 14 10 14.2686 10 14.6V20.4C10 20.7314 9.73137 21 9.4 21H3.6C3.26863 21 3 20.7314 3 20.4Z" stroke="currentColor" stroke-width="1.5"/><path d="M14 9.4V3.6C14 3.26863 14.2686 3 14.6 3H20.4C20.7314 3 21 3.26863 21 3.6V9.4C21 9.73137 20.7314 10 20.4 10H14.6C14.2686 10 14 9.73137 14 9.4Z" stroke="currentColor" stroke-width="1.5"/><path d="M3 9.4V3.6C3 3.26863 3.26863 3 3.6 3H9.4C9.73137 3 10 3.26863 10 3.6V9.4C10 9.73137 9.73137 10 9.4 10H3.6C3.26863 10 3 9.73137 3 9.4Z" stroke="currentColor" stroke-width="1.5"/>',
-    },
-    'dots-grid-3x3-solid': {
-      viewBox: '0 0 24 24',
-      fill: true,
-      content: '<rect x="2.25" y="2.25" width="19.5" height="19.5" rx="1.35" fill="currentColor"/><circle cx="5.5" cy="5.5" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="5.5" cy="12" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="5.5" cy="18.5" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="12" cy="5.5" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="12" cy="12" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="12" cy="18.5" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="18.5" cy="5.5" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="18.5" cy="12" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/><circle cx="18.5" cy="18.5" r="1.25" fill="var(--sb--trigger-bg, var(--color-slate-100))"/>',
-    },
-    'square-3d-three-points': {
-      viewBox: '0 0 24 24',
-      strokeWidth: '1.5',
-      content: '<path d="M3 21V3.6C3 3.26863 3.26863 3 3.6 3H21" stroke="currentColor"/><path d="M17 21H20.4C20.7314 21 21 20.7314 21 20.4V17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 7V9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 12V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 21H9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 21H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 4C3.55228 4 4 3.55228 4 3C4 2.44772 3.55228 2 3 2C2.44772 2 2 2.44772 2 3C2 3.55228 2.44772 4 3 4Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 22C3.55228 22 4 21.5523 4 21C4 20.4477 3.55228 20 3 20C2.44772 20 2 20.4477 2 21C2 21.5523 2.44772 22 3 22Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 4C21.5523 4 22 3.55228 22 3C22 2.44772 21.5523 2 21 2C20.4477 2 20 2.44772 20 3C20 3.55228 20.4477 4 21 4Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>',
-    },
-  }
-
-  interface Props {
-    name: string
-    size?: number
-    label?: string
-    color?: string
-    offsetX?: number
-    offsetY?: number
-    rotate?: number
-    flipX?: boolean
-    flipY?: boolean
-    strokeWeight?: number
-    scale?: number
-  }
-
-  let {
-    name,
-    size = 16,
-    label,
-    color,
-    offsetX = 0,
-    offsetY = 0,
-    rotate = 0,
-    flipX = false,
-    flipY = false,
-    strokeWeight,
-    scale = 1,
-  }: Props = $props()
-
-  const ariaAttrs = $derived(
-    label ? `aria-label="${label}"` : 'aria-hidden="true"'
-  )
-
-  // Parse "source/icon-name" — no slash means custom icon
-  const source = $derived(name.includes('/') ? name.split('/')[0] : null)
-  const iconName = $derived(name.includes('/') ? name.slice(name.indexOf('/') + 1) : name)
-
-  const custom = $derived(!source ? customIcons[iconName] : null)
-  const octicon = $derived(source === 'primer' ? octicons[iconName] : null)
-  const featherIcon = $derived(source === 'feather' ? feather.icons[iconName] : null)
-  const iconoir = $derived(source === 'iconoir' ? iconoirIcons[iconName] : null)
-  const isStrokeIcon = $derived(source === 'feather' || (source === 'iconoir' && !iconoir?.fill))
-
-  const svg = $derived(
-    custom
-      ? `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${custom.viewBox}" fill="currentColor" ${ariaAttrs}><path d="${custom.path}"/></svg>`
-      : octicon?.toSVG({
-          width: size,
-          height: size,
-          ...(label ? { 'aria-label': label } : { 'aria-hidden': 'true' }),
-        })
-      ?? featherIcon?.toSvg({
-          width: size,
-          height: size,
-          'stroke-width': strokeWeight ?? 2,
-          ...(label ? { 'aria-label': label } : { 'aria-hidden': 'true' }),
-        })
-      ?? (iconoir
-          ? iconoir.fill
-            ? `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${iconoir.viewBox}" fill="currentColor" ${ariaAttrs}>${iconoir.content}</svg>`
-            : `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="${iconoir.viewBox}" fill="none" stroke-width="${strokeWeight ?? iconoir.strokeWidth}" ${ariaAttrs}>${iconoir.content}</svg>`
-          : '')
-  )
-
-  const scaleX = $derived((flipX ? -1 : 1) * scale)
-  const scaleY = $derived((flipY ? -1 : 1) * scale)
-  const hasScale = $derived(flipX || flipY || scale !== 1)
-
-  const style = $derived(
-    [
-      color ? `color: ${color}` : '',
-      (offsetX || offsetY) ? `translate: ${offsetX}px ${offsetY}px` : '',
-      rotate ? `rotate: ${rotate}deg` : '',
-      hasScale ? `scale: ${scaleX} ${scaleY}` : '',
-    ].filter(Boolean).join('; ') || undefined
-  )
-</script>
-
-<span class="storyboard-icon" class:stroke-icon={isStrokeIcon} {style}>
-  {@html svg}
-</span>
-
-<style>
-  .storyboard-icon {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-  }
-  .storyboard-icon:not(.stroke-icon) :global(svg) {
-    fill: currentColor;
-  }
-  .storyboard-icon.stroke-icon :global(svg) {
-    fill: none;
-  }
-</style>

package/src/svelte-plugin-ui/components/ModeSwitch.svelte

@@ -1,121 +0,0 @@
-<!--
-  ModeSwitch — segmented toggle for switching between design modes.
-
-  Renders as a fixed pill at the bottom-center of the viewport.
-  Only visible when two or more modes are registered.
-
-  Styled with Tachyons utilities + sb-* custom properties.
--->
-
-<script lang="ts">
-  import { modeState, switchMode } from '../stores/modeStore.js'
-</script>
-
-{#if $modeState.switcherVisible && $modeState.modes.length >= 2}
-  <div class="sb-mode-switch" role="tablist" aria-label="Design mode">
-    {#each $modeState.modes as m (m.name)}
-      <button
-        role="tab"
-        aria-selected={$modeState.mode === m.name}
-        class="sb-mode-btn"
-        class:sb-mode-btn-active={$modeState.mode === m.name}
-        onclick={() => switchMode(m.name)}
-      >
-        {m.label}
-      </button>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .sb-mode-switch {
-    position: fixed;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 9999;
-    display: flex;
-    align-items: center;
-    gap: 0;
-    background: var(--bgColor-muted, #161b22);
-    border: 1px solid var(--borderColor-default, #30363d);
-    border-radius: 999px;
-    padding: 4px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-    font-family: "Hubot Sans", -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-  }
-
-  :global(html.storyboard-mode-present) .sb-mode-switch,
-  :global(html.storyboard-mode-plan) .sb-mode-switch,
-  :global(html.storyboard-mode-inspect) .sb-mode-switch {
-    background: color-mix(in srgb, var(--sb--mode-color) 40%, black);
-    transition: background 0.2s ease;
-  }
-
-  .sb-mode-btn {
-    appearance: none;
-    border: none;
-    background: transparent;
-    color: var(--fgColor-muted, #848d97);
-    font-size: 13px;
-    font-weight: 500;
-    padding: 6px 14px;
-    border-radius: 999px;
-    cursor: pointer;
-    transition: background 0.15s ease, color 0.15s ease;
-    white-space: nowrap;
-    line-height: 1;
-  }
-
-  .sb-mode-btn:hover {
-    color: var(--fgColor-default, #e6edf3);
-    background: var(--bgColor-neutral-muted, rgba(110, 118, 129, 0.1));
-  }
-
-  .sb-mode-btn-active {
-    background: var(--bgColor-accent-muted, rgba(56, 139, 253, 0.15));
-    color: var(--fgColor-accent, #58a6ff);
-  }
-
-  .sb-mode-btn-active:hover {
-    background: var(--bgColor-accent-muted, rgba(56, 139, 253, 0.2));
-    color: var(--fgColor-accent, #58a6ff);
-  }
-
-  /* Mode-aware button colors */
-  :global(html.storyboard-mode-prototype) .sb-mode-btn,
-  :global(html.storyboard-mode-present) .sb-mode-btn,
-  :global(html.storyboard-mode-plan) .sb-mode-btn,
-  :global(html.storyboard-mode-inspect) .sb-mode-btn {
-    color: rgba(255, 255, 255, 0.7);
-  }
-
-  :global(html.storyboard-mode-prototype) .sb-mode-btn:hover,
-  :global(html.storyboard-mode-present) .sb-mode-btn:hover,
-  :global(html.storyboard-mode-plan) .sb-mode-btn:hover,
-  :global(html.storyboard-mode-inspect) .sb-mode-btn:hover {
-    color: #fff;
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  :global(html.storyboard-mode-prototype) .sb-mode-btn-active,
-  :global(html.storyboard-mode-present) .sb-mode-btn-active,
-  :global(html.storyboard-mode-plan) .sb-mode-btn-active,
-  :global(html.storyboard-mode-inspect) .sb-mode-btn-active {
-    background: rgba(255, 255, 255, 0.85);
-    color: color-mix(in srgb, var(--sb--mode-color) 70%, black);
-  }
-
-  :global(html.storyboard-mode-prototype) .sb-mode-btn-active:hover,
-  :global(html.storyboard-mode-present) .sb-mode-btn-active:hover,
-  :global(html.storyboard-mode-plan) .sb-mode-btn-active:hover,
-  :global(html.storyboard-mode-inspect) .sb-mode-btn-active:hover {
-    background: rgba(255, 255, 255, 0.85);
-    color: color-mix(in srgb, var(--sb--mode-color) 70%, black);
-  }
-
-  /* Hide when chrome is toggled off via ⌘ + . */
-  :global(html.storyboard-chrome-hidden) .sb-mode-switch {
-    display: none;
-  }
-</style>