@dfosco/storyboard-core 3.6.0 → 3.7.0

package/src/core-ui-colors.css

@@ -25,20 +25,20 @@
   color-scheme: light;
 
   /* shadcn / Tailwind semantic tokens — pinned to light values */
-  --color-background: hsl(0 0% 100%);
-  --color-foreground: hsl(222.2 84% 4.9%);
-  --color-popover: hsl(0 0% 100%);
-  --color-popover-foreground: hsl(222.2 84% 4.9%);
-  --color-primary: hsl(222.2 47.4% 11.2%);
-  --color-primary-foreground: hsl(210 40% 98%);
-  --color-secondary: hsl(210 40% 96.1%);
-  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
-  --color-muted: hsl(210 40% 96.1%);
-  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
-  --color-accent: hsl(210 40% 96.1%);
-  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
-  --color-border: hsl(214.3 31.8% 91.4%);
-  --color-input: hsl(214.3 31.8% 91.4%);
+  --sb--color-background: hsl(0 0% 100%);
+  --sb--color-foreground: hsl(222.2 84% 4.9%);
+  --sb--color-popover: hsl(0 0% 100%);
+  --sb--color-popover-foreground: hsl(222.2 84% 4.9%);
+  --sb--color-primary: hsl(222.2 47.4% 11.2%);
+  --sb--color-primary-foreground: hsl(210 40% 98%);
+  --sb--color-secondary: hsl(210 40% 96.1%);
+  --sb--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --sb--color-muted: hsl(210 40% 96.1%);
+  --sb--color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --sb--color-accent: hsl(210 40% 96.1%);
+  --sb--color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --sb--color-border: hsl(214.3 31.8% 91.4%);
+  --sb--color-input: hsl(214.3 31.8% 91.4%);
 }
 
 /* Dark tokens — applied when toolbar syncs with a dark theme.
@@ -50,18 +50,18 @@
 :root[data-sb-toolbar-theme^="dark"] [data-slot="dropdown-menu-sub-content"] {
   color-scheme: dark;
 
-  --color-background: #161b22;
-  --color-foreground: #e6edf3;
-  --color-popover: #161b22;
-  --color-popover-foreground: #e6edf3;
-  --color-primary: #e6edf3;
-  --color-primary-foreground: #161b22;
-  --color-secondary: #21262d;
-  --color-secondary-foreground: #e6edf3;
-  --color-muted: #21262d;
-  --color-muted-foreground: #8b949e;
-  --color-accent: #21262d;
-  --color-accent-foreground: #e6edf3;
-  --color-border: #30363d;
-  --color-input: #30363d;
+  --sb--color-background: #161b22;
+  --sb--color-foreground: #e6edf3;
+  --sb--color-popover: #161b22;
+  --sb--color-popover-foreground: #e6edf3;
+  --sb--color-primary: #e6edf3;
+  --sb--color-primary-foreground: #161b22;
+  --sb--color-secondary: #21262d;
+  --sb--color-secondary-foreground: #e6edf3;
+  --sb--color-muted: #21262d;
+  --sb--color-muted-foreground: #8b949e;
+  --sb--color-accent: #21262d;
+  --sb--color-accent-foreground: #e6edf3;
+  --sb--color-border: #30363d;
+  --sb--color-input: #30363d;
 }

package/src/inspector/mouseMode.js

@@ -57,7 +57,7 @@ export function createMouseMode(options = {}) {
       position: 'fixed',
       pointerEvents: 'none',
       zIndex: '9997',
-      border: '2px solid var(--color-purple, #7655a4)',
+      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',
@@ -73,7 +73,7 @@ export function createMouseMode(options = {}) {
       position: 'fixed',
       pointerEvents: 'none',
       zIndex: '9997',
-      backgroundColor: 'var(--color-purple, #7655a4)',
+      backgroundColor: 'var(--sb--color-purple, #7655a4)',
       color: '#fff',
       fontSize: '11px',
       fontFamily: '"Ioskeley Mono", ui-monospace, monospace',

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

@@ -16,14 +16,14 @@
 			},
 			size: {
 				default: "text-sm gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-				xs: "text-xs gap-1 rounded-[min(var(--radius-md),10px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-				sm: "text-[0.8rem] gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				xs: "text-xs gap-1 rounded-[min(var(--sb--radius-md),10px)] px-2 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "text-[0.8rem] gap-1 rounded-[min(var(--sb--radius-md),12px)] px-2.5 in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
 				lg: "text-sm gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
 				xl: "text-base gap-2 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-5",
 				"2xl": "text-lg gap-2.5 px-5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 [&_svg:not([class*='size-'])]:size-6",
 				icon: "text-sm",
-				"icon-xs": "text-xs rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-				"icon-sm": "text-[0.8rem] rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-xs": "text-xs rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "text-[0.8rem] rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
 				"icon-lg": "text-sm",
 				"icon-xl": "text-base [&_svg:not([class*='size-'])]:size-5",
 				"icon-2xl": "text-lg [&_svg:not([class*='size-'])]:size-6",
@@ -40,14 +40,14 @@
 		variants: {
 			size: {
 				default: "h-8",
-				xs: "h-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
-				sm: "h-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				xs: "h-6 rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+				sm: "h-7 rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
 				lg: "h-9",
 				xl: "h-11",
 				"2xl": "h-14",
 				icon: "size-8",
-				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
-				"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-xs": "size-6 rounded-[min(var(--sb--radius-md),10px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-sm": "size-7 rounded-[min(var(--sb--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
 				"icon-lg": "size-9",
 				"icon-xl": "size-11",
 				"icon-2xl": "size-14",
@@ -78,7 +78,7 @@
 <span
 	data-slot="button-wrapper"
 	class={cn(wrapperVariants({ size }), wrapperClass)}
-	style="background: var(--sc-border-color, transparent); padding: var(--sc-border-width, 0px);"
+	style="background: var(--sb--sc-border-color, transparent); padding: var(--sb--sc-border-width, 0px);"
 >
 	{#if href}
 		<a

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

@@ -18,9 +18,9 @@
     onInteractOutside={(e) => e.preventDefault()}
     onFocusOutside={(e) => e.preventDefault()}
     class={cn(
-      "font-sans fixed z-[10000] bottom-28 right-6 w-[400px] max-h-[70vh] flex flex-col",
+      "font-sans fixed z-[10000] bottom-28 right-6 w-[400px] max-h-[90vh] flex flex-col",
       "bg-popover text-popover-foreground border-3 border-slate-400",
-      "rounded-xl shadow-xl overflow-hidden",
+      "rounded-xl shadow-xl overflow-x-hidden overflow-y-auto",
       "data-open:animate-in data-open:fade-in-0 data-open:slide-in-from-bottom-4",
       "data-closed:animate-out data-closed:fade-out-0 data-closed:slide-out-to-bottom-4",
       "duration-150",

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

@@ -17,7 +17,7 @@
 	data-slot="select-trigger"
 	data-size={size}
 	class={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(--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",
+		"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
 	)}
 	{...restProps}

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

@@ -10,7 +10,7 @@
 			},
 			size: {
 				default: "h-8 min-w-8 px-2",
-				sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+				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",
 			},
 		},

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

@@ -54,9 +54,9 @@ get along, so we shut typescript up by casting `value` to `never`.
 	data-variant={variant}
 	data-size={size}
 	data-spacing={spacing}
-	style={`--gap: ${spacing}`}
+	style={`--sb--gap: ${spacing}`}
 	class={cn(
-		"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch",
+		"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/trigger-button/trigger-button.svelte

@@ -3,10 +3,10 @@
   First component of the core UI kit for floating menus.
 
   Themable via CSS custom properties (set on any ancestor):
-    --trigger-bg         Background color        (default: slate-100)
-    --trigger-bg-hover   Background on hover/active (default: slate-200)
-    --trigger-text       Text / icon color        (default: slate-600)
-    --trigger-border     Border color             (default: slate-400)
+    --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>
@@ -17,7 +17,7 @@
   // that breaks when this source is consumed from node_modules.
   if (typeof CSS !== 'undefined' && 'paintWorklet' in CSS) {
     try {
-      const worklet = `class P{static get inputProperties(){return["--smooth-corners"]}superellipse(a,b,nX=4,nY){if(Number.isNaN(nX))nX=4;if(typeof nY==="undefined"||Number.isNaN(nY))nY=nX;if(nX>100)nX=100;if(nY>100)nY=100;if(nX<1e-11)nX=1e-11;if(nY<1e-11)nY=1e-11;const nX2=2/nX,nY2=nY?2/nY:nX2,steps=360,step=(2*Math.PI)/steps;return Array.from({length:steps},(_,i)=>{const t=i*step,cosT=Math.cos(t),sinT=Math.sin(t);return{x:Math.abs(cosT)**nX2*a*Math.sign(cosT),y:Math.abs(sinT)**nY2*b*Math.sign(sinT)}})}paint(ctx,geom,props){const[nX,nY]=props.get("--smooth-corners").toString().replace(/ /g,"").split(",");const w=geom.width/2,h=geom.height/2,s=this.superellipse(w,h,parseFloat(nX),parseFloat(nY));ctx.fillStyle="#000";ctx.setTransform(1,0,0,1,w,h);ctx.beginPath();for(let i=0;i<s.length;i++){const{x,y}=s[i];i===0?ctx.moveTo(x,y):ctx.lineTo(x,y)}ctx.closePath();ctx.fill()}}registerPaint("smooth-corners",P);`;
+      const worklet = `class P{static get inputProperties(){return["--sb--smooth-corners"]}superellipse(a,b,nX=4,nY){if(Number.isNaN(nX))nX=4;if(typeof nY==="undefined"||Number.isNaN(nY))nY=nX;if(nX>100)nX=100;if(nY>100)nY=100;if(nX<1e-11)nX=1e-11;if(nY<1e-11)nY=1e-11;const nX2=2/nX,nY2=nY?2/nY:nX2,steps=360,step=(2*Math.PI)/steps;return Array.from({length:steps},(_,i)=>{const t=i*step,cosT=Math.cos(t),sinT=Math.sin(t);return{x:Math.abs(cosT)**nX2*a*Math.sign(cosT),y:Math.abs(sinT)**nY2*b*Math.sign(sinT)}})}paint(ctx,geom,props){const[nX,nY]=props.get("--sb--smooth-corners").toString().replace(/ /g,"").split(",");const w=geom.width/2,h=geom.height/2,s=this.superellipse(w,h,parseFloat(nX),parseFloat(nY));ctx.fillStyle="#000";ctx.setTransform(1,0,0,1,w,h);ctx.beginPath();for(let i=0;i<s.length;i++){const{x,y}=s[i];i===0?ctx.moveTo(x,y):ctx.lineTo(x,y)}ctx.closePath();ctx.fill()}}registerPaint("smooth-corners",P);`;
       const blob = new Blob([worklet], { type: 'application/javascript' });
       CSS.paintWorklet.addModule(URL.createObjectURL(blob));
     } catch {}
@@ -50,14 +50,14 @@
   data-inactive={inactive || undefined}
   data-dimmed={dimmed || undefined}
   data-local-only={localOnly || undefined}
-  style:--sb-trigger-border-width={borderWidth}
+  style:--sb--trigger-border-width={borderWidth}
 >
   <Button
     variant="trigger"
     {size}
     disabled={inactive}
     wrapperClass={cn(
-      "smooth-corners [--smooth-corners:4] hover:rotate-2 focus-visible:rotate-2 transition-transform",
+      "smooth-corners [--sb--smooth-corners:4] hover:rotate-2 focus-visible:rotate-2 transition-transform",
       active && !inactive && "rotate-2",
       wrapperClass
     )}
@@ -77,22 +77,22 @@
     position: relative;
   }
   [data-trigger-button] :global([data-slot="button-wrapper"]) {
-    --sc-border-color: var(--trigger-border, var(--color-slate-400));
-    --sc-border-width: var(--sb-trigger-border-width, 3px);
+    --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)) {
-    --sc-border-color: hsl(212 92% 45%);
+    --sb--sc-border-color: hsl(212 92% 45%);
   }
   [data-trigger-button] :global([data-slot="button"]) {
-    background-color: var(--trigger-bg, var(--color-slate-100));
-    color: var(--trigger-text, var(--color-slate-600));
+    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(--trigger-bg-hover, var(--color-slate-300));
+    background-color: var(--sb--trigger-bg-hover, var(--color-slate-300));
   }
 
   /* Inactive: disabled-looking, no interaction */

package/src/modes.css

@@ -6,25 +6,25 @@
  */
 
 :root {
-  --mode-color: #fcfcfc;
-  --color-orange: #dfb490;
-  --color-green: #2a9d8f;
-  --color-blue: #4a7fad;
-  --color-purple: #7655a4;
-  --color-dark: #2a2a2a;
+  --sb--mode-color: #fcfcfc;
+  --sb--color-orange: #dfb490;
+  --sb--color-green: #2a9d8f;
+  --sb--color-blue: #4a7fad;
+  --sb--color-purple: #7655a4;
+  --sb--color-dark: #2a2a2a;
 }
 
-html.storyboard-mode-present   { --mode-color: var(--color-green); }
-html.storyboard-mode-plan      { --mode-color: var(--color-blue); }
-html.storyboard-mode-inspect   { --mode-color: var(--color-purple); }
-html.storyboard-mode-prototype { --mode-color: var(--color-dark); }
+html.storyboard-mode-present   { --sb--mode-color: var(--sb--color-green); }
+html.storyboard-mode-plan      { --sb--mode-color: var(--sb--color-blue); }
+html.storyboard-mode-inspect   { --sb--mode-color: var(--sb--color-purple); }
+html.storyboard-mode-prototype { --sb--mode-color: var(--sb--color-dark); }
 
 html.storyboard-mode-present,
 html.storyboard-mode-plan,
 html.storyboard-mode-prototype,
 html.storyboard-mode-inspect {
   padding: 12px;
-  background-color: var(--mode-color);
+  background-color: var(--sb--mode-color);
   transition: background-color 0.2s ease, padding 0.2s ease;
 }
 
@@ -41,7 +41,7 @@ html.storyboard-mode-inspect::before {
   left: 0;
   width: 100vw;
   height: 12px;
-  background-color: var(--mode-color);
+  background-color: var(--sb--mode-color);
   z-index: 99999;
   pointer-events: none;
 }
@@ -52,7 +52,7 @@ html.storyboard-mode-inspect > body > #root {
   overflow-x: hidden;
   overflow-y: hidden;
   border-radius: var(--borderRadius-default);
-  /* box-shadow: 0 0 80px 40px var(--mode-color); */
+  /* box-shadow: 0 0 80px 40px var(--sb--mode-color); */
 }
 
 /* Make body transparent so the html mode-color background
@@ -83,16 +83,16 @@ html.storyboard-mode-inspect > body > #root {
 html.storyboard-mode-present,
 html.storyboard-mode-plan,
 html.storyboard-mode-inspect {
-  --trigger-bg: color-mix(in srgb, var(--mode-color) 12%, white);
-  --trigger-bg-hover: color-mix(in srgb, var(--mode-color) 20%, white);
-  --trigger-text: color-mix(in srgb, var(--mode-color) 85%, black);
-  --trigger-border: color-mix(in srgb, var(--mode-color) 45%, white);
+  --sb--trigger-bg: color-mix(in srgb, var(--sb--mode-color) 12%, white);
+  --sb--trigger-bg-hover: color-mix(in srgb, var(--sb--mode-color) 20%, white);
+  --sb--trigger-text: color-mix(in srgb, var(--sb--mode-color) 85%, black);
+  --sb--trigger-border: color-mix(in srgb, var(--sb--mode-color) 45%, white);
 }
 
 /* Dark trigger tokens — applied when toolbar follows a dark theme */
 :root[data-sb-toolbar-theme^="dark"] {
-  --trigger-bg: #21262d;
-  --trigger-bg-hover: #30363d;
-  --trigger-text: #e6edf3;
-  --trigger-border: #30363d;
+  --sb--trigger-bg: #21262d;
+  --sb--trigger-bg-hover: #30363d;
+  --sb--trigger-text: #e6edf3;
+  --sb--trigger-border: #30363d;
 }

package/src/mountStoryboardCore.js

@@ -209,12 +209,12 @@ function showToast(message, route, basePath) {
     zIndex: '10000',
     padding: '0.75rem 1rem',
     borderRadius: '0.75rem',
-    background: 'var(--color-popover, #fff)',
-    color: 'var(--color-foreground, #1e293b)',
+    background: 'var(--sb--color-popover, #fff)',
+    color: 'var(--sb--color-foreground, #1e293b)',
     fontSize: '0.8125rem',
     fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif",
     boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
-    border: '1px solid var(--color-border, #cbd5e1)',
+    border: '1px solid var(--sb--color-border, #cbd5e1)',
     display: 'flex',
     flexDirection: 'column',
     gap: '0.25rem',
@@ -225,7 +225,7 @@ function showToast(message, route, basePath) {
 
   const href = route?.startsWith('/') ? (basePath.replace(/\/$/, '') + route) : route
   toast.innerHTML = `<span style="font-weight:500">✓ ${message.replace(/</g, '&lt;')}</span>`
-    + (href ? `<a href="${href}" style="color:var(--color-primary, #0969da);text-decoration:underline;font-size:0.8125rem">Open canvas</a>` : '')
+    + (href ? `<a href="${href}" style="color:var(--sb--color-primary, #0969da);text-decoration:underline;font-size:0.8125rem">Open canvas</a>` : '')
 
   document.body.appendChild(toast)
   requestAnimationFrame(() => { toast.style.opacity = '1' })

package/src/sidepanel.css

@@ -8,8 +8,8 @@
  */
 
 :root {
-  --sidepanel-width: 420px;
-  --sidepanel-height: 300px;
+  --sb--sidepanel-width: 420px;
+  --sb--sidepanel-height: 300px;
 }
 
 /* -----------------------------------------------------------------------
@@ -17,7 +17,7 @@
    ----------------------------------------------------------------------- */
 
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom) > body > #root {
-  margin-right: var(--sidepanel-width);
+  margin-right: var(--sb--sidepanel-width);
   transition: margin-right 0.25s ease;
 }
 
@@ -25,7 +25,7 @@ html.sb-sidepanel-open:not(.sb-sidepanel-bottom) > body > #root {
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom).storyboard-mode-present > body > #root,
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom).storyboard-mode-plan > body > #root,
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom).storyboard-mode-inspect > body > #root {
-  margin-right: calc(var(--sidepanel-width) + 12px);
+  margin-right: calc(var(--sb--sidepanel-width) + 12px);
 }
 
 html:not(.sb-sidepanel-open) > body > #root {
@@ -34,7 +34,7 @@ html:not(.sb-sidepanel-open) > body > #root {
 
 /* Push the CoreUIBar (fixed bottom-right) — side mode */
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom) [data-core-ui-bar] {
-  right: calc(var(--sidepanel-width) + 24px) !important;
+  right: calc(var(--sb--sidepanel-width) + 24px) !important;
   transition: right 0.25s ease;
 }
 
@@ -44,7 +44,7 @@ html:not(.sb-sidepanel-open) [data-core-ui-bar] {
 
 /* Push the ModeSwitch (fixed bottom-center) — side mode */
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom) .sb-mode-switch {
-  transform: translateX(calc(-50% - var(--sidepanel-width) / 2));
+  transform: translateX(calc(-50% - var(--sb--sidepanel-width) / 2));
   transition: transform 0.25s ease;
 }
 
@@ -55,7 +55,7 @@ html:not(.sb-sidepanel-open) .sb-mode-switch {
 /* When both modes collar padding AND sidepanel are active,
    the collar bottom bar should not extend under the panel + its right gap */
 html.sb-sidepanel-open:not(.sb-sidepanel-bottom)::before {
-  width: calc(100vw - var(--sidepanel-width) - 12px);
+  width: calc(100vw - var(--sb--sidepanel-width) - 12px);
 }
 
 /* -----------------------------------------------------------------------
@@ -63,7 +63,7 @@ html.sb-sidepanel-open:not(.sb-sidepanel-bottom)::before {
    ----------------------------------------------------------------------- */
 
 html.sb-sidepanel-open.sb-sidepanel-bottom > body > #root {
-  margin-bottom: var(--sidepanel-height);
+  margin-bottom: var(--sb--sidepanel-height);
   transition: margin-bottom 0.25s ease;
 }
 
@@ -71,17 +71,17 @@ html.sb-sidepanel-open.sb-sidepanel-bottom > body > #root {
 html.sb-sidepanel-open.sb-sidepanel-bottom.storyboard-mode-present > body > #root,
 html.sb-sidepanel-open.sb-sidepanel-bottom.storyboard-mode-plan > body > #root,
 html.sb-sidepanel-open.sb-sidepanel-bottom.storyboard-mode-inspect > body > #root {
-  margin-bottom: calc(var(--sidepanel-height) + 12px);
+  margin-bottom: calc(var(--sb--sidepanel-height) + 12px);
 }
 
 /* Push the CoreUIBar up — bottom mode */
 html.sb-sidepanel-open.sb-sidepanel-bottom [data-core-ui-bar] {
-  bottom: calc(var(--sidepanel-height) + 24px) !important;
+  bottom: calc(var(--sb--sidepanel-height) + 24px) !important;
   transition: bottom 0.25s ease;
 }
 
 /* Push the ModeSwitch up — bottom mode */
 html.sb-sidepanel-open.sb-sidepanel-bottom .sb-mode-switch {
-  bottom: calc(var(--sidepanel-height) + 24px);
+  bottom: calc(var(--sb--sidepanel-height) + 24px);
   transition: bottom 0.25s ease;
 }

package/src/styles/tailwind.css

@@ -2,6 +2,46 @@
 @import "tw-animate-css";
 @source "../**/*.{svelte,js,ts}";
 
+@font-face {
+  font-family: "Ioskeley Mono";
+  src: url("../assets/fonts/IoskeleyMono-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ioskeley Mono";
+  src: url("../assets/fonts/IoskeleyMono-Italic.woff2") format("woff2");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ioskeley Mono";
+  src: url("../assets/fonts/IoskeleyMono-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ioskeley Mono";
+  src: url("../assets/fonts/IoskeleyMono-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Ioskeley Mono";
+  src: url("../assets/fonts/IoskeleyMono-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
 @custom-variant dark (&:where([data-sb-theme^="dark"], [data-sb-theme^="dark"] *));
 
 @theme {
@@ -29,6 +69,31 @@
   --radius: 0.5rem;
   --font-sans: "Ioskeley Mono", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
   --font-mono: "Ioskeley Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+
+  --sb--color-background: hsl(0 0% 100%);
+  --sb--color-foreground: hsl(222.2 84% 4.9%);
+  --sb--color-card: hsl(0 0% 100%);
+  --sb--color-card-foreground: hsl(222.2 84% 4.9%);
+  --sb--color-popover: hsl(0 0% 100%);
+  --sb--color-popover-foreground: hsl(222.2 84% 4.9%);
+  --sb--color-primary: hsl(222.2 47.4% 11.2%);
+  --sb--color-primary-foreground: hsl(210 40% 98%);
+  --sb--color-secondary: hsl(210 40% 96.1%);
+  --sb--color-secondary-foreground: hsl(222.2 47.4% 11.2%);
+  --sb--color-muted: hsl(210 40% 96.1%);
+  --sb--color-muted-foreground: hsl(215.4 16.3% 46.9%);
+  --sb--color-accent: hsl(210 40% 96.1%);
+  --sb--color-accent-foreground: hsl(222.2 47.4% 11.2%);
+  --sb--color-destructive: hsl(0 84.2% 60.2%);
+  --sb--color-destructive-foreground: hsl(210 40% 98%);
+  --sb--color-border: hsl(214.3 31.8% 91.4%);
+  --sb--color-input: hsl(214.3 31.8% 91.4%);
+  --sb--color-ring: hsl(222.2 84% 4.9%);
+  --sb--color-success: hsl(142 71% 36%);
+  --sb--color-success-foreground: hsl(0 0% 100%);
+  --sb--radius: var(--radius);
+  --sb--font-sans: var(--font-sans);
+  --sb--font-mono: var(--font-mono);
 }
 
 @layer base {
@@ -54,6 +119,28 @@
     --color-ring: hsl(212.7 26.8% 83.9%);
     --color-success: hsl(142 71% 45%);
     --color-success-foreground: hsl(0 0% 100%);
+
+    --sb--color-background: hsl(222.2 84% 4.9%);
+    --sb--color-foreground: hsl(210 40% 98%);
+    --sb--color-card: hsl(222.2 84% 4.9%);
+    --sb--color-card-foreground: hsl(210 40% 98%);
+    --sb--color-popover: hsl(222.2 84% 4.9%);
+    --sb--color-popover-foreground: hsl(210 40% 98%);
+    --sb--color-primary: hsl(210 40% 98%);
+    --sb--color-primary-foreground: hsl(222.2 47.4% 11.2%);
+    --sb--color-secondary: hsl(217.2 32.6% 17.5%);
+    --sb--color-secondary-foreground: hsl(210 40% 98%);
+    --sb--color-muted: hsl(217.2 32.6% 17.5%);
+    --sb--color-muted-foreground: hsl(215 20.2% 65.1%);
+    --sb--color-accent: hsl(217.2 32.6% 17.5%);
+    --sb--color-accent-foreground: hsl(210 40% 98%);
+    --sb--color-destructive: hsl(0 62.8% 30.6%);
+    --sb--color-destructive-foreground: hsl(210 40% 98%);
+    --sb--color-border: hsl(217.2 32.6% 17.5%);
+    --sb--color-input: hsl(217.2 32.6% 17.5%);
+    --sb--color-ring: hsl(212.7 26.8% 83.9%);
+    --sb--color-success: hsl(142 71% 45%);
+    --sb--color-success-foreground: hsl(0 0% 100%);
   }
 }
 @custom-variant data-open {
@@ -116,7 +203,8 @@
 
 @layer base {
   :root {
-    --smooth-corners: 4;
+    --sb--smooth-corners: 4;
+    --sb--radius-md: var(--radius-md);
   }
 }
 

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

@@ -48,7 +48,7 @@
   :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(--mode-color) 40%, black);
+    background: color-mix(in srgb, var(--sb--mode-color) 40%, black);
     transition: background 0.2s ease;
   }
 
@@ -103,7 +103,7 @@
   :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(--mode-color) 70%, black);
+    color: color-mix(in srgb, var(--sb--mode-color) 70%, black);
   }
 
   :global(html.storyboard-mode-prototype) .sb-mode-btn-active:hover,
@@ -111,7 +111,7 @@
   :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(--mode-color) 70%, black);
+    color: color-mix(in srgb, var(--sb--mode-color) 70%, black);
   }
 
   /* Hide when chrome is toggled off via ⌘ + . */