canvas-ui-sdk 0.3.17 → 0.3.19

package/dist/index.js

@@ -4,10 +4,10 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React14 from 'react';
-import React14__default, { createContext, useState, useContext, useEffect, useRef, Children, useMemo, useCallback } from 'react';
+import React14__default, { createContext, useState, useContext, useEffect, useRef, Children, useMemo, useCallback, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { Check, Calendar as Calendar$1, Upload, FileText, Trash2, ChevronLeft, ChevronRight, X, Search, Layout, Settings, User, LogIn, List, MessageSquare, CreditCard, Video, Play, Table, LayoutGrid, Layers, SlidersHorizontal, Type, Users, Image, Star, Award, Hash, MapPin, Megaphone, Newspaper, Building, Square, CheckSquare, ToggleLeft, CircleDot, Tags, Key, Bell, Home, PieChart, ShoppingBag, Mail, Phone, MessageCircle, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, XIcon, CheckIcon, CircleIcon, ChevronUpIcon, PanelLeftIcon, Info, ShoppingCart, LogOut, Menu, ChevronDown, Filter, Wand2, Paperclip, MoreHorizontal, PenSquare, Briefcase as Briefcase$1, MoreVertical, Minus, Plus, Instagram, Linkedin, Twitter, Facebook, Globe as Globe$1, DollarSign, BookOpen, Eye, CheckCircle, Zap, Camera as Camera$1, VideoOff, Mic, MicOff, Cast, Pencil, GripHorizontal, ChevronUp, Sparkles, Copy, ArrowRight, GitBranch, FileBox, ExternalLink, Target as Target$1, AlertCircle, Quote, GripVertical, ArrowUp, Heart as Heart$1, Link2, FolderPlus, ThumbsUp, ChevronsRight, ChevronsLeft, RefreshCw, Send, Bookmark } from 'lucide-react';
+import { Check, Calendar as Calendar$1, Upload, FileText, Trash2, ChevronLeft, ChevronRight, X, Search, User, Key, CreditCard, Bell, Home, Users, MessageSquare, PieChart, ShoppingBag, Mail, Phone, MessageCircle, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, XIcon, CheckIcon, CircleIcon, ChevronUpIcon, PanelLeftIcon, Info, LayoutGrid, ShoppingCart, LogOut, Menu, ChevronDown, Filter, Wand2, Image, Paperclip, MoreHorizontal, PenSquare, Star as Star$1, Briefcase as Briefcase$1, MoreVertical, Minus, Plus, MapPin, Instagram, Linkedin, Twitter, Facebook, Globe as Globe$1, DollarSign, Video, BookOpen, Eye, CheckCircle, Zap, Camera as Camera$1, VideoOff, Mic, MicOff, Cast, Play, Pencil, ChevronUp, Sparkles, Copy, ArrowRight, GitBranch, FileBox, ExternalLink, Target as Target$1, AlertCircle, Quote, GripVertical, PanelRightClose, ArrowUp, Heart as Heart$1, Link2, FolderPlus, ThumbsUp, ChevronsRight, ChevronsLeft, RefreshCw, Send, Bookmark } from 'lucide-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -22,10 +22,8 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { Flag, Target, Rocket, Trophy, Shield, Heart, Megaphone as Megaphone$1, Phone as Phone$1, Envelope, ChatCircle, Drop, Fire, Moon, Sun, Tree, Leaf, Lightbulb, MusicNote, Camera, PencilSimple, Palette, ChartLine, Handshake, Storefront, Buildings, Briefcase, WifiHigh, Cloud, Globe, Database, Cpu, Terminal, Code, Infinity, Sparkle, Lightning, Star as Star$1, Hexagon, Diamond, ArrowUpRight, ArrowDownRight, MagnifyingGlass, MapPin as MapPin$1, Calendar as Calendar$2, Users as Users$1, ArrowRight as ArrowRight$1, CaretLeft, CaretRight, Check as Check$1, FacebookLogo, TwitterLogo, LinkedinLogo, InstagramLogo, XLogo, Info as Info$1, CaretUp, CaretDown, DotsThreeVertical, Gear, Mountains, ShieldCheck, Coffee, Coins, CurrencyDollar, Smiley, Image as Image$1, Clock, Bed, CreditCard as CreditCard$1, UserFocus, UsersFour, Eye as Eye$1, Books } from '@phosphor-icons/react';
+import { Flag, Target, Rocket, Trophy, Shield, Heart, Megaphone, Phone as Phone$1, Envelope, ChatCircle, Drop, Fire, Moon, Sun, Tree, Leaf, Lightbulb, MusicNote, Camera, PencilSimple, Palette, ChartLine, Handshake, Storefront, Buildings, Briefcase, WifiHigh, Cloud, Globe, Database, Cpu, Terminal, Code, Infinity, Sparkle, Lightning, Star, Hexagon, Diamond, ArrowUpRight, ArrowDownRight, MagnifyingGlass, MapPin as MapPin$1, Calendar as Calendar$2, Users as Users$1, ArrowRight as ArrowRight$1, CaretLeft, CaretRight, Check as Check$1, FacebookLogo, TwitterLogo, LinkedinLogo, InstagramLogo, XLogo, Info as Info$1, CaretUp, CaretDown, DotsThreeVertical, Gear, Mountains, ShieldCheck, Coffee, Coins, CurrencyDollar, Smiley, Image as Image$1, Clock, Bed, CreditCard as CreditCard$1, UserFocus, UsersFour, Eye as Eye$1, Books } from '@phosphor-icons/react';
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
-import { useDraggable } from '@dnd-kit/core';
-import { CSS } from '@dnd-kit/utilities';
 import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, Filler, ArcElement } from 'chart.js';
 import { Line, Doughnut } from 'react-chartjs-2';
 import { startOfMonth, addMonths, isBefore, subMonths, format, endOfMonth, startOfWeek, endOfWeek, addDays, isSameMonth, isSameDay, isWithinInterval } from 'date-fns';
@@ -461,7 +459,7 @@ var Checkbox = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     className: cn(
       "peer size-4 shrink-0 rounded-[var(--radius-xs)] border border-[var(--canvas-border-input)]",
-      "bg-[var(--canvas-background)] transition-colors",
+      "bg-[var(--canvas-background)] transition-colors cursor-pointer",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
       "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
       "data-[state=checked]:bg-[var(--canvas-primary)] data-[state=checked]:border-[var(--canvas-primary)]",
@@ -613,7 +611,7 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
@@ -731,7 +729,7 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -749,7 +747,7 @@ function DropdownMenuCheckboxItem({
     {
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -782,7 +780,7 @@ function DropdownMenuRadioItem({
     {
       "data-slot": "dropdown-menu-radio-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -857,7 +855,7 @@ function DropdownMenuSubTrigger({
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -1067,7 +1065,7 @@ var FileUploader = React14.forwardRef(
                         onClick: () => handleDelete(file.id),
                         disabled,
                         className: cn(
-                          "shrink-0 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-destructive)] transition-colors",
+                          "cursor-pointer shrink-0 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-destructive)] transition-colors",
                           disabled && "opacity-60 cursor-not-allowed"
                         ),
                         children: /* @__PURE__ */ jsx(Trash2, { style: { width: "16px", height: "16px" } })
@@ -1238,7 +1236,7 @@ var ImageUploader = React14.forwardRef(
                   "div",
                   {
                     className: cn(
-                      "flex flex-col shrink-0 rounded-[var(--radius-xs)] border overflow-hidden",
+                      "cursor-pointer flex flex-col shrink-0 rounded-[var(--radius-xs)] border overflow-hidden",
                       isSelected ? "border-[var(--canvas-primary)]" : "border-[var(--canvas-border)]"
                     ),
                     onClick: () => onSelectImage?.(image.id),
@@ -1284,7 +1282,7 @@ var ImageUploader = React14.forwardRef(
                                 },
                                 disabled: disabled || isFirst,
                                 className: cn(
-                                  "flex items-center justify-center rounded-full transition-colors",
+                                  "cursor-pointer flex items-center justify-center rounded-full transition-colors",
                                   isFirst || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)]"
                                 ),
                                 style: { width: "24px", height: "24px" },
@@ -1301,7 +1299,7 @@ var ImageUploader = React14.forwardRef(
                                 },
                                 disabled: disabled || isLast,
                                 className: cn(
-                                  "flex items-center justify-center rounded-full transition-colors",
+                                  "cursor-pointer flex items-center justify-center rounded-full transition-colors",
                                   isLast || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)]"
                                 ),
                                 style: { width: "24px", height: "24px" },
@@ -1317,7 +1315,7 @@ var ImageUploader = React14.forwardRef(
                                   handleDelete(image.id);
                                 },
                                 disabled,
-                                className: "flex items-center justify-center rounded-full bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)] transition-colors",
+                                className: "cursor-pointer flex items-center justify-center rounded-full bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)] transition-colors",
                                 style: { width: "24px", height: "24px" },
                                 children: /* @__PURE__ */ jsx(Trash2, { style: { width: "16px", height: "16px" } })
                               }
@@ -1449,7 +1447,7 @@ var MultiselectCheckboxField = React14.forwardRef(
               onClick: () => handleToggle(option.id),
               disabled,
               className: cn(
-                "flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors",
+                "cursor-pointer flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors",
                 "focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]",
                 isSelected ? "border-[var(--canvas-primary)]" : "border-[var(--canvas-border-input)]",
                 disabled && "cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)] opacity-60"
@@ -1652,7 +1650,7 @@ function RadioGroupItem({
     {
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-[var(--canvas-background)] transition-colors",
+        "cursor-pointer aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-[var(--canvas-background)] transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
         "aria-invalid:border-[var(--canvas-border-input-invalid)] aria-invalid:ring-[var(--canvas-border-input-invalid)]/20",
         "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
@@ -1871,7 +1869,7 @@ var Searchbox = React14.forwardRef(
 Searchbox.displayName = "Searchbox";
 var selectTriggerVariants = cva(
   // Base styles using CSS variables
-  "flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
+  "cursor-pointer flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
   {
     variants: {
       inputSize: {
@@ -1979,7 +1977,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 font-[family-name:var(--typo-global-font)]",
+        "focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-[var(--canvas-primary)] [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 font-[family-name:var(--typo-global-font)]",
         className
       ),
       ...props,
@@ -2198,7 +2196,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -2988,7 +2986,7 @@ var Slider = React14.forwardRef(({
             SliderPrimitive.Thumb,
             {
               className: cn(
-                "block rounded-full border-2 border-[var(--canvas-background)] bg-[var(--canvas-primary)]",
+                "cursor-grab active:cursor-grabbing block rounded-full border-2 border-[var(--canvas-background)] bg-[var(--canvas-primary)]",
                 "shadow-[0px_1px_2px_0px_rgba(0,0,0,0.08)]",
                 "ring-offset-background transition-colors",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
@@ -3023,7 +3021,7 @@ function Switch({
     {
       "data-slot": "switch",
       className: cn(
-        "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-colors",
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
         "data-[state=checked]:bg-[var(--canvas-primary)] data-[state=unchecked]:bg-[var(--canvas-border)]",
         "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
         "disabled:cursor-not-allowed disabled:data-[state=checked]:bg-[var(--canvas-input-disabled-text)] disabled:data-[state=unchecked]:bg-[var(--canvas-input-disabled-border)]",
@@ -3563,11 +3561,15 @@ function ThemeProvider({
 }) {
   const [previewBranding, setPreviewBranding] = useState(null);
   const [previewImages, setPreviewImages] = useState(null);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
   const contextValue = {
     images,
     branding,
     brandAssets,
-    isMounted: true
+    isMounted
   };
   const previewBrandingValue = {
     previewBranding,
@@ -3660,7 +3662,7 @@ var iconShapes = {
 var iconMap = {
   Diamond,
   Hexagon,
-  Star: Star$1,
+  Star,
   Lightning,
   Sparkle,
   Infinity,
@@ -3690,7 +3692,7 @@ var iconMap = {
   ChatCircle,
   Envelope,
   Phone: Phone$1,
-  Megaphone: Megaphone$1,
+  Megaphone,
   Heart,
   Shield,
   Trophy,
@@ -3864,6 +3866,7 @@ function Header({
     /* @__PURE__ */ jsx(
       Button,
       {
+        variant: "primary",
         className: "w-full",
         size: "default",
         onClick: onCheckout,
@@ -4220,7 +4223,7 @@ function Header({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  variant: "outline",
+                  variant: "primary-outline",
                   size: "default",
                   onClick: onLogin,
                   children: "Log in"
@@ -4229,7 +4232,7 @@ function Header({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  variant: "default",
+                  variant: "primary",
                   size: "default",
                   onClick: onSignUp,
                   children: "Sign up"
@@ -4362,7 +4365,7 @@ function Header({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  variant: "outline",
+                  variant: "primary-outline",
                   className: "w-full",
                   size: "lg",
                   onClick: () => {
@@ -4375,7 +4378,7 @@ function Header({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  variant: "default",
+                  variant: "primary",
                   className: "w-full",
                   size: "lg",
                   onClick: () => {
@@ -4557,7 +4560,7 @@ var iconShapes2 = [
 var iconMap2 = {
   Diamond: Diamond,
   Hexagon: Hexagon,
-  Star: Star$1,
+  Star: Star,
   Lightning: Lightning,
   Sparkle: Sparkle,
   Infinity: Infinity,
@@ -4587,7 +4590,7 @@ var iconMap2 = {
   ChatCircle: ChatCircle,
   Envelope: Envelope,
   Phone: Phone$1,
-  Megaphone: Megaphone$1,
+  Megaphone: Megaphone,
   Heart: Heart,
   Shield: Shield,
   Trophy: Trophy,
@@ -4702,7 +4705,31 @@ function broadcastCSSVariables(variables) {
     }
   });
 }
-function setupCSSVariableListener() {
+function broadcastBranding(branding) {
+  const iframes = document.querySelectorAll("iframe");
+  iframes.forEach((iframe) => {
+    try {
+      iframe.contentWindow?.postMessage(
+        { type: "branding-update", branding },
+        "*"
+      );
+    } catch {
+    }
+  });
+}
+function broadcastImages(images) {
+  const iframes = document.querySelectorAll("iframe");
+  iframes.forEach((iframe) => {
+    try {
+      iframe.contentWindow?.postMessage(
+        { type: "images-update", images },
+        "*"
+      );
+    } catch {
+    }
+  });
+}
+function setupCSSVariableListener(options) {
   if (typeof window === "undefined") return () => {
   };
   const handler = (event) => {
@@ -4716,15 +4743,21 @@ function setupCSSVariableListener() {
         document.documentElement.style.removeProperty(name);
       });
     }
+    if (event.data?.type === "branding-update") {
+      options?.onBrandingUpdate?.(event.data.branding);
+    }
+    if (event.data?.type === "images-update") {
+      options?.onImagesUpdate?.(event.data.images);
+    }
   };
   window.addEventListener("message", handler);
   return () => window.removeEventListener("message", handler);
 }
 
 // src/hooks/use-css-variable-sync.ts
-function useCSSVariableSync() {
+function useCSSVariableSync(options) {
   useEffect(() => {
-    const cleanup = setupCSSVariableListener();
+    const cleanup = setupCSSVariableListener(options);
     return cleanup;
   }, []);
 }
@@ -4746,7 +4779,7 @@ function DashboardShell({
     onAppMenuClick?.();
     console.log("App menu clicked - implement app-level mobile menu here");
   };
-  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-[var(--canvas-background)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen min-w-0 bg-[var(--canvas-background)]", children: [
     /* @__PURE__ */ jsx("div", { className: "fixed top-0 left-0 right-0 lg:left-[var(--sidebar-width)] z-40", children: /* @__PURE__ */ jsx(Header, { onMenuClick: handleAppMenuClick }) }),
     /* @__PURE__ */ jsx("div", { className: "hidden lg:block fixed top-0 left-0 bottom-0 z-50 w-[var(--sidebar-width)]", children: /* @__PURE__ */ jsx(
       Sidebar2,
@@ -4792,7 +4825,8 @@ function DashboardShell({
         className: cn(
           "pt-[var(--header-height)]",
           "lg:pl-[var(--sidebar-width)]",
-          "min-h-screen"
+          "min-h-screen",
+          "overflow-x-hidden"
         ),
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -4830,7 +4864,7 @@ var iconShapes3 = [
 var iconMap3 = {
   Diamond: Diamond,
   Hexagon: Hexagon,
-  Star: Star$1,
+  Star: Star,
   Lightning: Lightning,
   Sparkle: Sparkle,
   Infinity: Infinity,
@@ -4860,7 +4894,7 @@ var iconMap3 = {
   ChatCircle: ChatCircle,
   Envelope: Envelope,
   Phone: Phone$1,
-  Megaphone: Megaphone$1,
+  Megaphone: Megaphone,
   Heart: Heart,
   Shield: Shield,
   Trophy: Trophy,
@@ -5088,7 +5122,7 @@ var iconShapes4 = [
 var iconMap4 = {
   Diamond: Diamond,
   Hexagon: Hexagon,
-  Star: Star$1,
+  Star: Star,
   Lightning: Lightning,
   Sparkle: Sparkle,
   Infinity: Infinity,
@@ -5118,7 +5152,7 @@ var iconMap4 = {
   ChatCircle: ChatCircle,
   Envelope: Envelope,
   Phone: Phone$1,
-  Megaphone: Megaphone$1,
+  Megaphone: Megaphone,
   Heart: Heart,
   Shield: Shield,
   Trophy: Trophy,
@@ -5870,9 +5904,16 @@ var defaultDateRange = {
   startPlaceholder: "Start date",
   endPlaceholder: "End date"
 };
+var filterLabelStyle = {
+  fontFamily: "var(--typo-input-label-font)",
+  fontSize: "var(--typo-input-label-sm-size, 12px)",
+  fontWeight: "var(--typo-input-label-weight)",
+  letterSpacing: "var(--typo-input-label-spacing)",
+  lineHeight: "var(--typo-input-label-line-height)"
+};
 function FilterDropdown({ config, value, onChange }) {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: config.label }),
+    /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: config.label }),
     /* @__PURE__ */ jsxs(Select, { value: value || void 0, onValueChange: onChange, children: [
       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: config.placeholder }) }),
       /* @__PURE__ */ jsx(SelectContent, { position: "popper", side: "bottom", sideOffset: 4, children: config.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
@@ -5947,7 +5988,7 @@ function FilterPopover({
     "button",
     {
       className: cn(
-        "flex items-center justify-between gap-2 bg-[var(--canvas-background)] border text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 data-[state=open]:border-[var(--canvas-border-input-focus)]",
+        "cursor-pointer flex items-center justify-between gap-2 bg-[var(--canvas-background)] border text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] data-[state=open]:border-[var(--canvas-border-input-focus)]",
         className
       ),
       style: {
@@ -5981,11 +6022,11 @@ function FilterPopover({
         children: [
           /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-5 max-h-[480px] overflow-y-auto", children: [
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Text Input" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Text Input" }),
               /* @__PURE__ */ jsx(TextInput, { inputSize: "sm", placeholder: "Enter text..." })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Searchbox" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Searchbox" }),
               /* @__PURE__ */ jsx(Searchbox, { inputSize: "sm", placeholder: "Search..." })
             ] }),
             dropdowns.slice(0, 1).map((dropdown) => /* @__PURE__ */ jsx(
@@ -5998,11 +6039,11 @@ function FilterPopover({
               dropdown.id
             )),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Date Input" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Date Input" }),
               /* @__PURE__ */ jsx(DateInput, { inputSize: "sm" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Radio Buttons" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Radio Buttons" }),
               /* @__PURE__ */ jsxs(RadioGroup2, { defaultValue: "option1", className: "flex", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx(RadioGroupItem, { value: "option1", id: "radio1" }),
@@ -6031,7 +6072,7 @@ function FilterPopover({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Radio Buttons List" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Radio Buttons List" }),
               /* @__PURE__ */ jsxs(RadioGroup2, { defaultValue: "list-opt1", className: "flex flex-col gap-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                   /* @__PURE__ */ jsx(RadioGroupItem, { value: "list-opt1", id: "radio-list-1" }),
@@ -6072,7 +6113,7 @@ function FilterPopover({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Checkbox" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Checkbox" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Checkbox, { id: "single-checkbox" }),
                 /* @__PURE__ */ jsx(
@@ -6087,7 +6128,7 @@ function FilterPopover({
               ] })
             ] }),
             checkboxGroup && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Checkbox List" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Checkbox List" }),
               /* @__PURE__ */ jsx("div", { className: "space-y-2", children: checkboxGroup.options.map((option) => /* @__PURE__ */ jsx(
                 CheckboxWithLabel,
                 {
@@ -6099,7 +6140,7 @@ function FilterPopover({
               )) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Toggle" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Toggle" }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(Switch, { id: "toggle-switch" }),
                 /* @__PURE__ */ jsx(
@@ -6114,7 +6155,7 @@ function FilterPopover({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: { fontSize: "var(--typo-input-label-sm-size)", fontWeight: "var(--typo-input-label-weight)" }, children: "Multiselect Tags" }),
+              /* @__PURE__ */ jsx("label", { className: "text-[var(--canvas-text-muted)]", style: filterLabelStyle, children: "Multiselect Tags" }),
               /* @__PURE__ */ jsx(MultiselectTags, { inputSize: "sm", tags: ["Tag 1", "Tag 2"], placeholder: "Add..." })
             ] })
           ] }),
@@ -6965,7 +7006,7 @@ var iconShapes5 = [
 var iconMap5 = {
   Diamond: Diamond,
   Hexagon: Hexagon,
-  Star: Star$1,
+  Star: Star,
   Lightning: Lightning,
   Sparkle: Sparkle,
   Infinity: Infinity,
@@ -6995,7 +7036,7 @@ var iconMap5 = {
   ChatCircle: ChatCircle,
   Envelope: Envelope,
   Phone: Phone$1,
-  Megaphone: Megaphone$1,
+  Megaphone: Megaphone,
   Heart: Heart,
   Shield: Shield,
   Trophy: Trophy,
@@ -7968,7 +8009,7 @@ function ContentDropzone({
       "div",
       {
         className: cn(
-          "flex flex-col gap-10",
+          "flex flex-col gap-[var(--spacing-4xl)]",
           className
         ),
         children
@@ -8287,7 +8328,7 @@ function MenuSection({
 }
 var tabIcons = {
   briefcase: Briefcase$1,
-  star: Star,
+  star: Star$1,
   user: User
 };
 function PillTabs({
@@ -8423,10 +8464,7 @@ function TitleGroup({
                 paddingLeft: "var(--btn-small-px)",
                 paddingRight: "var(--btn-small-px)",
                 fontSize: "var(--btn-small-font-size)",
-                borderRadius: "var(--btn-small-radius)",
-                backgroundColor: "var(--btn-primary-bg)",
-                color: "var(--btn-primary-text)",
-                borderColor: "var(--btn-primary-border)"
+                borderRadius: "var(--btn-small-radius)"
               },
               children: actionButtonText
             }
@@ -8809,7 +8847,7 @@ function MenufocusTemplate({
       "button",
       {
         className: cn(
-          "flex items-center justify-center rounded-full hover:bg-[var(--canvas-surface)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2",
+          "cursor-pointer flex items-center justify-center rounded-full hover:bg-[var(--canvas-surface)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2",
           buttonSize,
           className
         ),
@@ -8936,6 +8974,7 @@ function StandardDataTable({
           /* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs(
             "tr",
             {
+              className: "hover:bg-[var(--canvas-surface)] transition-colors",
               style: { borderBottom: "1px solid var(--canvas-border)" },
               children: [
                 /* @__PURE__ */ jsx(
@@ -9210,6 +9249,7 @@ function FixedColumnDataTable({
           /* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs(
             "tr",
             {
+              className: "hover:bg-[var(--canvas-surface)] transition-colors",
               style: { borderBottom: "1px solid var(--canvas-border)" },
               children: [
                 /* @__PURE__ */ jsx(TableCell2, { isFixed: true, className: "pr-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -9430,7 +9470,7 @@ function NestedTable({ children, onChildAction }) {
         children.map((child, index) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "grid items-center",
+            className: "grid items-center hover:bg-[var(--canvas-surface)] transition-colors rounded-sm",
             style: {
               borderBottom: index < children.length - 1 ? "1px solid var(--canvas-border)" : "none",
               padding: "var(--spacing-md) 0",
@@ -9450,7 +9490,7 @@ function NestedTable({ children, onChildAction }) {
                 "button",
                 {
                   onClick: () => onChildAction?.("view", child),
-                  className: "flex items-center justify-center size-8 rounded-full hover:bg-[var(--canvas-surface)] transition-colors",
+                  className: "cursor-pointer flex items-center justify-center size-8 rounded-full hover:bg-[var(--canvas-surface)] transition-colors",
                   "aria-label": `View ${child.name}`,
                   children: /* @__PURE__ */ jsx(Eye, { size: 20, style: { color: "var(--canvas-text-muted)" } })
                 }
@@ -9530,7 +9570,7 @@ function NestedDataTable({
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: "grid items-center",
+                      className: "grid items-center hover:bg-[var(--canvas-surface)] transition-colors rounded-sm",
                       style: {
                         padding: "var(--spacing-md) 0",
                         minHeight: "64px",
@@ -10573,7 +10613,7 @@ function CommentInput2({
             "button",
             {
               type: "button",
-              className: "absolute right-3 top-1/2 -translate-y-1/2",
+              className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2",
               style: { color: "var(--canvas-text-placeholder)" },
               children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" })
             }
@@ -10605,7 +10645,7 @@ function CommentActions2({
           {
             type: "button",
             onClick: onReply,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10622,7 +10662,7 @@ function CommentActions2({
           {
             type: "button",
             onClick: onLike,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10805,6 +10845,7 @@ function CommentItem({
                 "button",
                 {
                   type: "button",
+                  className: "cursor-pointer",
                   onClick: () => setShowReplies(!showReplies),
                   style: {
                     fontFamily: "var(--typo-body-xs-font, var(--typo-global-font))",
@@ -11105,7 +11146,7 @@ function ProfileCard({
           /* @__PURE__ */ jsx(Typography, { variant: "body-s", color: "muted", className: "text-center", children: username })
         ] }),
         rating > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 mt-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
-          Star,
+          Star$1,
           {
             className: cn(
               "size-4",
@@ -11205,7 +11246,7 @@ function SidebarProfileCard({
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 justify-center", children: [
-          /* @__PURE__ */ jsx(Star, { className: "size-4 fill-[var(--canvas-primary)] text-[var(--canvas-primary)]" }),
+          /* @__PURE__ */ jsx(Star$1, { className: "size-4 fill-[var(--canvas-primary)] text-[var(--canvas-primary)]" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body-xs", className: "font-semibold", children: rating }),
           /* @__PURE__ */ jsx(Typography, { variant: "body-xs", color: "muted", children: reviewCount })
         ] }),
@@ -11375,7 +11416,7 @@ function SkillsCard({
 }
 var badgeIcons = {
   zap: Zap,
-  star: Star,
+  star: Star$1,
   check: CheckCircle
 };
 var badgeColors = {
@@ -11818,7 +11859,7 @@ function StarRating2({ rating, reviewCount }) {
       style: { gap: "var(--spacing-xxs, 2px)" },
       children: [
         [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
-          Star,
+          Star$1,
           {
             className: "size-5",
             fill: star <= rating ? "var(--canvas-primary)" : "var(--canvas-border)",
@@ -13905,7 +13946,7 @@ function ControlButton({ icon, onClick, isActive = true, label }) {
       onClick,
       "aria-label": label,
       className: cn(
-        "w-10 h-10 rounded-full flex items-center justify-center",
+        "cursor-pointer w-10 h-10 rounded-full flex items-center justify-center",
         "shadow-sm transition-colors",
         isActive ? "bg-[var(--canvas-sidebar-light-text)] text-[var(--canvas-primary-foreground)] hover:opacity-80" : "bg-[var(--canvas-destructive)] text-[var(--canvas-primary-foreground)] hover:opacity-80"
       ),
@@ -14088,7 +14129,7 @@ function VideoPlaylistCard({
           "button",
           {
             type: "button",
-            className: "flex items-center gap-2 p-4 border-b border-[var(--canvas-border)] text-left w-full",
+            className: "cursor-pointer flex items-center gap-2 p-4 border-b border-[var(--canvas-border)] text-left w-full",
             onClick: () => setIsCollapsed(!isCollapsed),
             children: [
               /* @__PURE__ */ jsx("div", { className: "w-4 h-4 shrink-0 flex items-center justify-center", children: isCollapsed ? /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 text-[var(--canvas-text)]" }) : /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4 text-[var(--canvas-text)]" }) }),
@@ -14478,327 +14519,6 @@ function CreditCardDisplay({
     }
   );
 }
-function CanvasItem({
-  item,
-  isSelected,
-  onSelect,
-  onDelete,
-  onDragStart,
-  scale,
-  children
-}) {
-  const [isDragging, setIsDragging] = useState(false);
-  const handleDragHandleMouseDown = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsDragging(true);
-    onSelect(item.id);
-    onDragStart(item.id, e.clientX, e.clientY, item.x, item.y);
-  };
-  const handleClick = (e) => {
-    e.stopPropagation();
-    onSelect(item.id);
-  };
-  const handleDelete = (e) => {
-    e.stopPropagation();
-    onDelete(item.id);
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "absolute group",
-        "transition-shadow duration-150",
-        isSelected && "ring-2 ring-[var(--canvas-primary)] ring-offset-2",
-        isDragging && "opacity-90 shadow-2xl z-50"
-      ),
-      style: {
-        left: item.x,
-        top: item.y
-      },
-      onClick: handleClick,
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "absolute -top-9 left-0 right-0 flex items-center justify-between px-2 py-1.5",
-              "bg-[var(--canvas-text)] rounded-t-md",
-              "opacity-0 group-hover:opacity-100 transition-opacity",
-              isSelected && "opacity-100"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  onMouseDown: handleDragHandleMouseDown,
-                  className: "flex items-center gap-1.5 text-white/90 cursor-grab active:cursor-grabbing select-none",
-                  style: { fontSize: "var(--typo-body-xs-size)" },
-                  children: [
-                    /* @__PURE__ */ jsx(GripHorizontal, { className: "size-4" }),
-                    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium", children: item.componentType })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: handleDelete,
-                  className: "p-1 rounded hover:bg-white/20 text-white/80 hover:text-white transition-colors",
-                  "aria-label": "Delete component",
-                  children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "pointer-events-none", children })
-      ]
-    }
-  );
-}
-var paletteComponents = [
-  // =====================
-  // PAGE TEMPLATES
-  // =====================
-  { id: "page-about", type: "PageAbout", label: "About", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-account", type: "PageAccount", label: "Account Settings", icon: /* @__PURE__ */ jsx(Settings, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-admin-portal", type: "PageAdminPortal", label: "Admin Portal", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-centered-profile", type: "PageCenteredProfile", label: "Centered Profile", icon: /* @__PURE__ */ jsx(User, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-double-sidebar", type: "PageDoubleSidebar", label: "Double Sidebar", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-icon-sidebar", type: "PageIconSidebar", label: "Icon Sidebar", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-login", type: "PageLogin", label: "Login / Signup", icon: /* @__PURE__ */ jsx(LogIn, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-menu-sections", type: "PageMenuSections", label: "Menu Sections", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-messenger", type: "PageMessenger", label: "Messenger", icon: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-mobile-menu", type: "PageMobileMenu", label: "Mobile Menu", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-multistep-progressbar", type: "PageMultistepProgressbar", label: "Multistep + Progress", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-multistep-sidebar", type: "PageMultistepSidebar", label: "Multistep + Sidebar", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-pricing", type: "PagePricing", label: "Pricing", icon: /* @__PURE__ */ jsx(CreditCard, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-product-homepage", type: "PageProductHomepage", label: "Product Homepage", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-reset-password", type: "PageResetPassword", label: "Reset Password", icon: /* @__PURE__ */ jsx(LogIn, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-search-bar", type: "PageSearchBar", label: "Search Bar", icon: /* @__PURE__ */ jsx(Search, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-sidebar-profile", type: "PageSidebarProfile", label: "Sidebar Profile", icon: /* @__PURE__ */ jsx(User, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-standard", type: "PageStandard", label: "Standard Page", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-standard-multistep", type: "PageStandardMultistep", label: "Standard Multistep", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-standard-search", type: "PageStandardSearch", label: "Standard Search", icon: /* @__PURE__ */ jsx(Search, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-vertical-multistep", type: "PageVerticalMultistep", label: "Vertical Multistep", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-video-chat", type: "PageVideoChat", label: "Video Chat", icon: /* @__PURE__ */ jsx(Video, { className: "size-4" }), category: "Page Templates" },
-  { id: "page-video-list", type: "PageVideoList", label: "Video List", icon: /* @__PURE__ */ jsx(Play, { className: "size-4" }), category: "Page Templates" },
-  // =====================
-  // BLOCKS
-  // =====================
-  // Data & Tables
-  { id: "standard-data-table", type: "StandardDataTable", label: "Data Table", icon: /* @__PURE__ */ jsx(Table, { className: "size-4" }), category: "Blocks" },
-  // Cards & Profiles
-  { id: "profile-card", type: "ProfileCard", label: "Profile Card", icon: /* @__PURE__ */ jsx(User, { className: "size-4" }), category: "Blocks" },
-  { id: "sidebar-profile-card", type: "SidebarProfileCard", label: "Sidebar Profile Card", icon: /* @__PURE__ */ jsx(User, { className: "size-4" }), category: "Blocks" },
-  { id: "profile-info-cards", type: "ProfileInfoCards", label: "Profile Info Cards", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }), category: "Blocks" },
-  { id: "sidebar-cards", type: "SidebarCards", label: "Sidebar Cards", icon: /* @__PURE__ */ jsx(Layers, { className: "size-4" }), category: "Blocks" },
-  { id: "credit-card-display", type: "CreditCardDisplay", label: "Credit Card Display", icon: /* @__PURE__ */ jsx(CreditCard, { className: "size-4" }), category: "Blocks" },
-  // Navigation & Progress
-  { id: "step-tracker", type: "StepTracker", label: "Step Tracker", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Blocks" },
-  { id: "vertical-step-tracker", type: "VerticalStepTracker", label: "Vertical Step Tracker", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Blocks" },
-  { id: "progress-bar", type: "ProgressBar", label: "Progress Bar", icon: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4" }), category: "Blocks" },
-  { id: "pill-tabs", type: "PillTabs", label: "Pill Tabs", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }), category: "Blocks" },
-  { id: "mobile-bottom-nav", type: "MobileBottomNav", label: "Mobile Bottom Nav", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Blocks" },
-  // Banners & Headers
-  { id: "flair-banner", type: "FlairBanner", label: "Flair Banner", icon: /* @__PURE__ */ jsx(Type, { className: "size-4" }), category: "Blocks" },
-  { id: "gradient-banner", type: "GradientBanner", label: "Gradient Banner", icon: /* @__PURE__ */ jsx(Type, { className: "size-4" }), category: "Blocks" },
-  { id: "page-header-section", type: "PageHeaderSection", label: "Page Header Section", icon: /* @__PURE__ */ jsx(FileText, { className: "size-4" }), category: "Blocks" },
-  // Chat & Messaging
-  { id: "messenger-sidebar", type: "MessengerSidebar", label: "Messenger Sidebar", icon: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" }), category: "Blocks" },
-  { id: "chat-message", type: "ChatMessage", label: "Chat Message", icon: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" }), category: "Blocks" },
-  // Video
-  { id: "video-chat-controls", type: "VideoChatControls", label: "Video Chat Controls", icon: /* @__PURE__ */ jsx(Video, { className: "size-4" }), category: "Blocks" },
-  { id: "webcam-preview", type: "WebcamPreview", label: "Webcam Preview", icon: /* @__PURE__ */ jsx(Video, { className: "size-4" }), category: "Blocks" },
-  { id: "participant-list", type: "ParticipantList", label: "Participant List", icon: /* @__PURE__ */ jsx(Users, { className: "size-4" }), category: "Blocks" },
-  { id: "video-content-section", type: "VideoContentSection", label: "Video Content Section", icon: /* @__PURE__ */ jsx(Play, { className: "size-4" }), category: "Blocks" },
-  { id: "video-playlist", type: "VideoPlaylist", label: "Video Playlist", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Blocks" },
-  // Search & Filters
-  { id: "search-bar", type: "SearchBar", label: "Search Bar", icon: /* @__PURE__ */ jsx(Search, { className: "size-4" }), category: "Blocks" },
-  { id: "filter-popover", type: "FilterPopover", label: "Filter Popover", icon: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4" }), category: "Blocks" },
-  // Forms & Settings
-  { id: "settings-list-row", type: "SettingsListRow", label: "Settings List Row", icon: /* @__PURE__ */ jsx(Settings, { className: "size-4" }), category: "Blocks" },
-  { id: "profile-image-uploader", type: "ProfileImageUploader", label: "Profile Image Uploader", icon: /* @__PURE__ */ jsx(Image, { className: "size-4" }), category: "Blocks" },
-  { id: "login-branding-panel", type: "LoginBrandingPanel", label: "Login Branding Panel", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Blocks" },
-  // Marketing - Heroes
-  { id: "hero-section", type: "HeroSection", label: "Hero Section", icon: /* @__PURE__ */ jsx(Image, { className: "size-4" }), category: "Blocks" },
-  { id: "hero-dark-with-image", type: "HeroDarkWithImage", label: "Hero Dark + Image", icon: /* @__PURE__ */ jsx(Image, { className: "size-4" }), category: "Blocks" },
-  { id: "centered-hero", type: "CenteredHero", label: "Centered Hero", icon: /* @__PURE__ */ jsx(Image, { className: "size-4" }), category: "Blocks" },
-  // Marketing - Social Proof
-  { id: "testimonial-carousel", type: "TestimonialCarousel", label: "Testimonial Carousel", icon: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" }), category: "Blocks" },
-  { id: "reviews-grid", type: "ReviewsGrid", label: "Reviews Grid", icon: /* @__PURE__ */ jsx(Star, { className: "size-4" }), category: "Blocks" },
-  { id: "social-proof", type: "SocialProof", label: "Social Proof (Logos)", icon: /* @__PURE__ */ jsx(Award, { className: "size-4" }), category: "Blocks" },
-  { id: "metrics-section", type: "MetricsSection", label: "Metrics Section", icon: /* @__PURE__ */ jsx(Hash, { className: "size-4" }), category: "Blocks" },
-  // Marketing - Features
-  { id: "feature-with-image", type: "FeatureWithImage", label: "Feature + Image", icon: /* @__PURE__ */ jsx(Image, { className: "size-4" }), category: "Blocks" },
-  { id: "core-values-grid", type: "CoreValuesGrid", label: "Core Values Grid", icon: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" }), category: "Blocks" },
-  { id: "destination-cards", type: "DestinationCards", label: "Destination Cards", icon: /* @__PURE__ */ jsx(MapPin, { className: "size-4" }), category: "Blocks" },
-  // Marketing - Team
-  { id: "team-cards-grid", type: "TeamCardsGrid", label: "Team Cards Grid", icon: /* @__PURE__ */ jsx(Users, { className: "size-4" }), category: "Blocks" },
-  { id: "team-circular-grid", type: "TeamCircularGrid", label: "Team Circular Grid", icon: /* @__PURE__ */ jsx(Users, { className: "size-4" }), category: "Blocks" },
-  // Marketing - CTA & Footer
-  { id: "cta-banner", type: "CtaBanner", label: "CTA Banner", icon: /* @__PURE__ */ jsx(Megaphone, { className: "size-4" }), category: "Blocks" },
-  { id: "footer-navbar", type: "FooterNavbar", label: "Footer Navbar", icon: /* @__PURE__ */ jsx(Layout, { className: "size-4" }), category: "Blocks" },
-  // Marketing - Other
-  { id: "featured-news-cards", type: "FeaturedNewsCards", label: "Featured News Cards", icon: /* @__PURE__ */ jsx(Newspaper, { className: "size-4" }), category: "Blocks" },
-  { id: "office-locations", type: "OfficeLocations", label: "Office Locations", icon: /* @__PURE__ */ jsx(Building, { className: "size-4" }), category: "Blocks" },
-  // Pricing
-  { id: "pricing-cards", type: "PricingCards", label: "Pricing Cards", icon: /* @__PURE__ */ jsx(CreditCard, { className: "size-4" }), category: "Blocks" },
-  { id: "faq-accordion", type: "FaqAccordion", label: "FAQ Accordion", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Blocks" },
-  { id: "features-comparison", type: "FeaturesComparison", label: "Features Comparison", icon: /* @__PURE__ */ jsx(Table, { className: "size-4" }), category: "Blocks" },
-  // =====================
-  // COMPONENTS (UI Primitives)
-  // =====================
-  { id: "button", type: "Button", label: "Button", icon: /* @__PURE__ */ jsx(Square, { className: "size-4" }), category: "Components" },
-  { id: "checkbox", type: "Checkbox", label: "Checkbox", icon: /* @__PURE__ */ jsx(CheckSquare, { className: "size-4" }), category: "Components" },
-  { id: "date-input", type: "DateInput", label: "Date Input", icon: /* @__PURE__ */ jsx(Calendar$1, { className: "size-4" }), category: "Components" },
-  { id: "input", type: "Input", label: "Text Input", icon: /* @__PURE__ */ jsx(Type, { className: "size-4" }), category: "Components" },
-  { id: "select", type: "Select", label: "Select", icon: /* @__PURE__ */ jsx(List, { className: "size-4" }), category: "Components" },
-  { id: "switch", type: "Switch", label: "Switch", icon: /* @__PURE__ */ jsx(ToggleLeft, { className: "size-4" }), category: "Components" },
-  { id: "radio-group", type: "RadioGroup", label: "Radio Group", icon: /* @__PURE__ */ jsx(CircleDot, { className: "size-4" }), category: "Components" },
-  { id: "multiselect-tags", type: "MultiselectTags", label: "Multiselect Tags", icon: /* @__PURE__ */ jsx(Tags, { className: "size-4" }), category: "Components" },
-  { id: "avatar", type: "Avatar", label: "Avatar", icon: /* @__PURE__ */ jsx(User, { className: "size-4" }), category: "Components" },
-  { id: "badge", type: "Badge", label: "Badge", icon: /* @__PURE__ */ jsx(Award, { className: "size-4" }), category: "Components" }
-];
-var componentsByCategory = paletteComponents.reduce((acc, comp) => {
-  if (!acc[comp.category]) {
-    acc[comp.category] = [];
-  }
-  acc[comp.category].push(comp);
-  return acc;
-}, {});
-var categoryOrder = ["Page Templates", "Blocks", "Components"];
-function DraggableComponent({ component }) {
-  const [isMounted, setIsMounted] = useState(false);
-  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
-    id: component.id,
-    data: {
-      type: component.type,
-      label: component.label
-    }
-  });
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    opacity: isDragging ? 0.5 : 1
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: setNodeRef,
-      style,
-      ...isMounted ? attributes : {},
-      ...isMounted ? listeners : {},
-      className: cn(
-        "flex items-center gap-3 px-3 py-2.5 rounded-md cursor-grab active:cursor-grabbing",
-        "border border-transparent",
-        "hover:bg-[var(--canvas-surface)] hover:border-[var(--canvas-border)]",
-        "transition-colors group"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex items-center justify-center size-8 rounded-md bg-[var(--canvas-surface-brand)] text-[var(--canvas-primary)]",
-            children: component.icon
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "text-[var(--canvas-text)]",
-            style: {
-              fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
-              fontSize: "var(--typo-body-s-size)"
-            },
-            children: component.label
-          }
-        )
-      ]
-    }
-  );
-}
-function CategorySection({ category, components, defaultExpanded = true }) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
-  return /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setIsExpanded(!isExpanded),
-        className: "cursor-pointer flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-[var(--canvas-surface)] rounded-md transition-colors",
-        children: [
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-[var(--canvas-text-muted)]" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-[var(--canvas-text-muted)]" }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "font-semibold uppercase tracking-wider text-[var(--canvas-text-muted)]",
-              style: { fontSize: "var(--typo-body-xs-size)" },
-              children: category
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "ml-auto text-[var(--canvas-text-placeholder)]", style: { fontSize: "var(--typo-body-xs-size)" }, children: components.length })
-        ]
-      }
-    ),
-    isExpanded && /* @__PURE__ */ jsx("div", { className: "mt-1 ml-2 space-y-0.5", children: components.map((component) => /* @__PURE__ */ jsx(DraggableComponent, { component }, component.id)) })
-  ] });
-}
-function ComponentPalette({ className }) {
-  return /* @__PURE__ */ jsxs(
-    "aside",
-    {
-      className: cn(
-        "w-[280px] h-full flex flex-col",
-        "bg-[var(--canvas-background)] border-r border-[var(--canvas-border)]",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 border-b border-[var(--canvas-border)]", children: [
-          /* @__PURE__ */ jsx(
-            "h2",
-            {
-              className: "font-semibold text-[var(--canvas-text)]",
-              style: {
-                fontFamily: "var(--typo-body-m-font, var(--typo-global-font))",
-                fontSize: "var(--typo-body-s-size)"
-              },
-              children: "Components"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "p",
-            {
-              className: "text-[var(--canvas-text-muted)] mt-1",
-              style: { fontSize: "var(--typo-body-xs-size)" },
-              children: "Drag components onto the canvas"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "p-3", children: categoryOrder.map((category) => {
-          const components = componentsByCategory[category];
-          if (!components) return null;
-          return /* @__PURE__ */ jsx(
-            CategorySection,
-            {
-              category,
-              components,
-              defaultExpanded: category !== "Page Templates"
-            },
-            category
-          );
-        }) }) }),
-        /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-[var(--canvas-border)] bg-[var(--canvas-surface)]", children: /* @__PURE__ */ jsxs("p", { className: "text-[var(--canvas-text-placeholder)]", style: { fontSize: "var(--typo-body-xs-size)" }, children: [
-          "Tip: Press ",
-          /* @__PURE__ */ jsx("kbd", { className: "px-1.5 py-0.5 bg-[var(--canvas-background)] rounded border border-[var(--canvas-border)]", style: { fontSize: "10px" }, children: "Delete" }),
-          " to remove selected"
-        ] }) })
-      ]
-    }
-  );
-}
 
 // src/lib/component-registry.ts
 var layoutShells = {
@@ -15053,8 +14773,8 @@ var blocks = {
   },
   ContentDropzone: {
     path: "@/components/blocks",
-    description: "Placeholder dropzone for content areas during development.",
-    props: ["label?", "className?"]
+    description: "Placeholder dropzone for content areas. Shows dashed placeholder when empty; arranges children in a flex column with 32px (--spacing-4xl) gap between blocks. Within a block, use 12px (--spacing-lg) gap between title groups and their content.",
+    props: ["height?", "className?", "children?"]
   },
   UpvotingPostsTable: {
     path: "@/components/blocks",
@@ -15175,23 +14895,6 @@ var groupModalDrawerBlocks = {
     props: ["title?", "description?", "rows?: FormRowConfig[]", "sortOptions?", "filterOptions?", "inputSize?: 'sm' | 'default' | 'lg'", "onAddNew?", "onCancel?", "onSave?", "onFieldChange?", "showHeader?", "showFooter?"]
   }
 };
-var canvasBlocks = {
-  InfinityCanvas: {
-    path: "@/components/blocks",
-    description: "Pannable, zoomable infinite canvas for placing components. Supports drag-and-drop from palette.",
-    props: ["items: CanvasItemData[]", "onItemsChange", "selectedId", "onSelectItem"]
-  },
-  ComponentPalette: {
-    path: "@/components/blocks",
-    description: "Sidebar listing draggable components grouped by category. Used with InfinityCanvas.",
-    props: ["className?"]
-  },
-  CanvasItem: {
-    path: "@/components/blocks",
-    description: "Wrapper for components placed on the infinity canvas. Handles positioning and selection.",
-    props: ["item: CanvasItemData", "isSelected", "onSelect", "onDelete", "children"]
-  }
-};
 var videoBlocks = {
   VideoChatControls: {
     path: "@/components/blocks",
@@ -15465,12 +15168,6 @@ var pageTemplates = {
     description: "Video content page with player and playlist sidebar.",
     shell: "custom (no shell)",
     blocks: ["VideoContentSection", "VideoPlaylist", "YouTubePlayer"]
-  },
-  "page-canvas": {
-    path: "/page-canvas",
-    description: "Figma-style infinite canvas whiteboard. Drag components from sidebar palette onto a pannable, zoomable canvas.",
-    shell: "custom (no shell)",
-    blocks: ["InfinityCanvas", "ComponentPalette", "CanvasItem", "Header"]
   }
 };
 function buildComponentOptions() {
@@ -16411,7 +16108,7 @@ function StarRating3({ rating }) {
       className: "flex items-center",
       style: { gap: "var(--spacing-xxs, 2px)" },
       children: [1, 2, 3, 4, 5].map((star) => /* @__PURE__ */ jsx(
-        Star,
+        Star$1,
         {
           className: "size-5",
           fill: star <= rating ? "var(--canvas-primary)" : "var(--canvas-border)",
@@ -16804,7 +16501,7 @@ function ProfileTileCard({ item, onClick }) {
                   style: { gap: "4px" },
                   children: [
                     /* @__PURE__ */ jsx(
-                      Star,
+                      Star$1,
                       {
                         className: "w-5 h-5",
                         style: { color: "var(--canvas-primary)", fill: "var(--canvas-primary)" }
@@ -20876,7 +20573,7 @@ function FeaturedPlaces() {
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mt-6", children: [
                       /* @__PURE__ */ jsx(Typography, { variant: "body-xl", as: "h3", style: { fontWeight: 600 }, children: place.name }),
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                        /* @__PURE__ */ jsx(Star$1, { size: 16, weight: "fill", style: { color: "var(--canvas-primary)" } }),
+                        /* @__PURE__ */ jsx(Star, { size: 16, weight: "fill", style: { color: "var(--canvas-primary)" } }),
                         /* @__PURE__ */ jsx(Typography, { variant: "body-s", as: "span", children: place.rating })
                       ] })
                     ] }),
@@ -20963,7 +20660,7 @@ function HowItWorks({ variant = "light", features = defaultFeatures }) {
 }
 var defaultCategories = [
   { id: "1", title: "Most popular", count: "5,000 homes", icon: /* @__PURE__ */ jsx(Heart, { size: 48 }) },
-  { id: "2", title: "Top rated", count: "5,000 homes", icon: /* @__PURE__ */ jsx(Star$1, { size: 48 }) },
+  { id: "2", title: "Top rated", count: "5,000 homes", icon: /* @__PURE__ */ jsx(Star, { size: 48 }) },
   { id: "3", title: "Unique stays", count: "5,000 homes", icon: /* @__PURE__ */ jsx(Sun, { size: 48 }) },
   { id: "4", title: "Affordable", count: "5,000 homes", icon: /* @__PURE__ */ jsx(CurrencyDollar, { size: 48 }) },
   { id: "5", title: "Friendly staff", count: "5,000 homes", icon: /* @__PURE__ */ jsx(Smiley, { size: 48 }) },
@@ -21150,7 +20847,7 @@ var defaultSteps2 = [
     id: "4",
     title: "Share your experience",
     description: "Leave a review for the property and host for other users to see",
-    icon: /* @__PURE__ */ jsx(Star$1, { size: 24 })
+    icon: /* @__PURE__ */ jsx(Star, { size: 24 })
   }
 ];
 function VerticalHowItWorks({
@@ -23307,7 +23004,17 @@ var brandColorVars = [
   "--canvas-sidebar-dark-active-bg",
   "--canvas-sidebar-dark-text",
   "--canvas-sidebar-dark-border",
-  "--canvas-border-input-focus"
+  "--canvas-border-input-focus",
+  // Button colors that track primary
+  "--btn-primary-bg",
+  "--btn-primary-border",
+  "--btn-primary-bg-hover",
+  "--btn-primary-border-hover",
+  "--btn-primary-outline-text",
+  "--btn-primary-outline-border",
+  "--btn-primary-outline-text-hover",
+  "--btn-primary-outline-border-hover",
+  "--btn-primary-neutral-bg-hover"
 ];
 function isEqual(a, b) {
   if (a === b) return true;
@@ -23640,11 +23347,17 @@ function useThemeState(options) {
       setOverrides((prev) => {
         const effectivePrimaryColor = newValues["--canvas-primary"] || prev["--canvas-primary"] || defaultColors["--canvas-primary"];
         varsToUpdate.forEach((varName) => {
-          if (varName === "--canvas-sidebar-light-active-text" || varName === "--canvas-border-input-focus") {
+          if (varName === "--canvas-sidebar-light-active-text" || varName === "--canvas-border-input-focus" || varName === "--btn-primary-bg" || varName === "--btn-primary-border" || varName === "--btn-primary-outline-text" || varName === "--btn-primary-outline-border" || varName === "--btn-primary-outline-text-hover" || varName === "--btn-primary-outline-border-hover" || varName === "--btn-primary-neutral-bg-hover") {
             newValues[varName] = effectivePrimaryColor;
             (document.body ?? document.documentElement).style.setProperty(varName, effectivePrimaryColor);
             return;
           }
+          if (varName === "--btn-primary-bg-hover" || varName === "--btn-primary-border-hover") {
+            const primaryDarkColor = newValues["--canvas-primary-dark"] || prev["--canvas-primary-dark"] || defaultColors["--canvas-primary-dark"];
+            newValues[varName] = primaryDarkColor;
+            (document.body ?? document.documentElement).style.setProperty(varName, primaryDarkColor);
+            return;
+          }
           if (varName === "--canvas-primary") return;
           const defaultColor = defaultColors[varName];
           if (!defaultColor || !defaultColor.startsWith("#")) return;
@@ -23693,6 +23406,9 @@ function useThemeState(options) {
   const isDirty = useMemo(() => {
     return !isEqual(overrides, savedOverrides) || !isEqual(branding, savedBranding) || !isEqual(images, savedImages) || !isEqual(customButtonStyles, savedCustomButtonStyles);
   }, [overrides, savedOverrides, branding, savedBranding, images, savedImages, customButtonStyles, savedCustomButtonStyles]);
+  const hasCustomizations = useMemo(() => {
+    return Object.keys(savedOverrides).length > 0 || !isEqual(savedBranding, defaultBranding) || !isEqual(savedImages, defaultImages) || !isEqual(savedCustomButtonStyles, defaultCustomButtonStyles);
+  }, [savedOverrides, savedBranding, savedImages, savedCustomButtonStyles]);
   const unsavedChangesCount = useMemo(() => {
     let count = 0;
     const allKeys = /* @__PURE__ */ new Set([...Object.keys(overrides), ...Object.keys(savedOverrides)]);
@@ -23732,7 +23448,8 @@ function useThemeState(options) {
     setBrandHue,
     setBrandVibrancy,
     setSyncRelatedColors,
-    applyBrandHueVibrancy
+    applyBrandHueVibrancy,
+    hasCustomizations
   };
 }
 function HslColorPicker({ value, onChange }) {
@@ -24010,7 +23727,6 @@ function ColorInputRow({
             {
               className: "w-auto p-0",
               align: "start",
-              onPointerDownOutside: (e) => e.preventDefault(),
               children: /* @__PURE__ */ jsx(HslColorPicker, { value, onChange })
             }
           )
@@ -24109,7 +23825,6 @@ function VariableColorRow({
             {
               className: "w-auto p-0",
               align: "start",
-              onPointerDownOutside: (e) => e.preventDefault(),
               children: /* @__PURE__ */ jsx(
                 HslColorPicker,
                 {
@@ -24251,7 +23966,6 @@ function ColorsPanel({ theme }) {
       {
         style: {
           padding: "12px",
-          background: "#f9fafb",
           borderRadius: "8px",
           border: "1px solid #e5e7eb"
         },
@@ -24447,7 +24161,7 @@ function ColorsPanel({ theme }) {
 var logoIcons = [
   { name: "Diamond", icon: Diamond },
   { name: "Hexagon", icon: Hexagon },
-  { name: "Star", icon: Star$1 },
+  { name: "Star", icon: Star },
   { name: "Lightning", icon: Lightning },
   { name: "Sparkle", icon: Sparkle },
   { name: "Infinity", icon: Infinity },
@@ -24477,7 +24191,7 @@ var logoIcons = [
   { name: "ChatCircle", icon: ChatCircle },
   { name: "Envelope", icon: Envelope },
   { name: "Phone", icon: Phone$1 },
-  { name: "Megaphone", icon: Megaphone$1 },
+  { name: "Megaphone", icon: Megaphone },
   { name: "Heart", icon: Heart },
   { name: "Shield", icon: Shield },
   { name: "Trophy", icon: Trophy },
@@ -24537,7 +24251,6 @@ function ImagesPanel({ theme, onImageUpload }) {
             gap: "12px",
             marginBottom: "16px",
             padding: "16px",
-            background: "#f9fafb",
             borderRadius: "8px",
             border: "1px solid #e5e7eb"
           },
@@ -24690,7 +24403,10 @@ function ImagesPanel({ theme, onImageUpload }) {
             style: {
               display: "grid",
               gridTemplateColumns: "repeat(8, 1fr)",
-              gap: "4px"
+              gap: "4px",
+              border: "1px solid #e5e7eb",
+              borderRadius: "8px",
+              padding: "6px"
             },
             children: logoIcons.map((icon) => {
               const isSelected = theme.branding.iconName === icon.name;
@@ -24816,7 +24532,6 @@ function ImageUploadRow({
         alignItems: "center",
         gap: "10px",
         padding: "8px 10px",
-        background: "#f9fafb",
         borderRadius: "6px",
         border: "1px solid #e5e7eb"
       },
@@ -24982,7 +24697,7 @@ function TypographyPanel({ theme }) {
   }, []);
   const globalFont = theme.variables["--typo-global-font"] || "Inter";
   return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 bg-[var(--canvas-surface)] rounded-lg border border-[var(--canvas-border)] mb-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg border border-[var(--canvas-border)] mb-5", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--canvas-text)]", children: "Global Font" }),
         /* @__PURE__ */ jsx("div", { className: "text-[11px] text-[var(--canvas-text-muted)] mt-0.5", children: "Default font for all text styles" })
@@ -26043,12 +25758,9 @@ var drawerStyles = {
   },
   tabBar: {
     display: "flex",
-    background: "#f2f2f2",
-    padding: "3px",
-    gap: "2px",
+    gap: "8px",
     flexShrink: 0,
     overflowX: "auto",
-    borderRadius: "8px",
     margin: "0 16px 8px"
   },
   tab: (active) => ({
@@ -26056,7 +25768,7 @@ var drawerStyles = {
     fontSize: "12px",
     fontWeight: 500,
     color: active ? "#ffffff" : "#6b7280",
-    background: active ? "#171717" : "transparent",
+    background: active ? "#171717" : "#f3f4f6",
     border: "none",
     borderRadius: "6px",
     cursor: "pointer",
@@ -26112,7 +25824,11 @@ function ThemeDrawer({
   storageKey,
   title = "Design Variables",
   width = 464,
-  readOnly = false
+  readOnly = false,
+  hideSave = false,
+  docked = false,
+  stickyTopOffset = 0,
+  children
 }) {
   if (devOnly && process.env.NODE_ENV === "production") {
     return null;
@@ -26120,6 +25836,8 @@ function ThemeDrawer({
   const [open, setOpen] = useState(defaultOpen);
   const [activeTab, setActiveTab] = useState("colors");
   const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+  const [localPreviewBranding, setLocalPreviewBranding] = useState(null);
+  const [localPreviewImages, setLocalPreviewImages] = useState(null);
   const isRight = triggerPosition === "bottom-right";
   const [dragPos, setDragPos] = useState({ x: 20, y: 20 });
   const isDraggingRef = useRef(false);
@@ -26158,6 +25876,8 @@ function ThemeDrawer({
     },
     []
   );
+  const contentRef = useRef(null);
+  const prevOverrideKeysRef = useRef(/* @__PURE__ */ new Set());
   const theme = useThemeState({
     storageKey,
     initialOverrides,
@@ -26173,13 +25893,21 @@ function ThemeDrawer({
   useEffect(() => {
     if (open) {
       setPreviewBranding(theme.branding);
+      setLocalPreviewBranding(theme.branding);
     }
   }, [open, theme.branding, setPreviewBranding]);
   useEffect(() => {
     if (open) {
       setPreviewImages(theme.images);
+      setLocalPreviewImages(theme.images);
     }
   }, [open, theme.images, setPreviewImages]);
+  useEffect(() => {
+    broadcastBranding(open ? theme.branding : null);
+  }, [open, theme.branding]);
+  useEffect(() => {
+    broadcastImages(open ? theme.images : null);
+  }, [open, theme.images]);
   const handleOpenChange = useCallback(
     (newOpen) => {
       if (!newOpen) {
@@ -26188,6 +25916,8 @@ function ThemeDrawer({
         }
         setPreviewBranding(null);
         setPreviewImages(null);
+        setLocalPreviewBranding(null);
+        setLocalPreviewImages(null);
         setResetConfirmOpen(false);
       }
       setOpen(newOpen);
@@ -26204,76 +25934,401 @@ function ThemeDrawer({
     theme.resetAll();
     setPreviewBranding(null);
     setPreviewImages(null);
+    setLocalPreviewBranding(null);
+    setLocalPreviewImages(null);
     setResetConfirmOpen(false);
   }, [theme, setPreviewBranding, setPreviewImages]);
   const activePanels = enabledPanels ? panelConfig.filter((p) => enabledPanels.includes(p.id)) : panelConfig;
-  const showFooter = !readOnly && (theme.isDirty || resetConfirmOpen);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !open && /* @__PURE__ */ jsxs(
+  const showFooter = !readOnly && (!hideSave && theme.isDirty || resetConfirmOpen || theme.hasCustomizations);
+  useEffect(() => {
+    if (!docked || !open) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        handleOpenChange(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [docked, open, handleOpenChange]);
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const currentKeys = new Set(Object.keys(theme.overrides));
+    prevOverrideKeysRef.current.forEach((key) => {
+      if (!currentKeys.has(key)) {
+        const defaultValue = theme.variables[key];
+        if (defaultValue) {
+          el.style.setProperty(key, defaultValue);
+        } else {
+          el.style.removeProperty(key);
+        }
+      }
+    });
+    Object.entries(theme.overrides).forEach(([name, value]) => {
+      el.style.setProperty(name, value);
+    });
+    prevOverrideKeysRef.current = currentKeys;
+  }, [theme.overrides, theme.variables]);
+  const scrollHeight = docked ? `calc(100vh - ${stickyTopOffset}px - ${showFooter ? 200 : 150}px)` : `calc(100vh - ${showFooter ? 200 : 150}px)`;
+  const tabBar = /* @__PURE__ */ jsx("div", { style: drawerStyles.tabBar, children: activePanels.map((panel) => {
+    const isActive = activeTab === panel.id;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveTab(panel.id),
+        style: drawerStyles.tab(isActive),
+        onMouseEnter: (e) => {
+          if (!isActive) {
+            e.currentTarget.style.background = "#e5e7eb";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!isActive) {
+            e.currentTarget.style.background = "#f3f4f6";
+          }
+        },
+        children: panel.label
+      },
+      panel.id
+    );
+  }) });
+  const panelContent = /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      className: "flex-1 overflow-hidden",
+      style: { height: scrollHeight },
+      children: /* @__PURE__ */ jsxs("div", { style: drawerStyles.container, children: [
+        activeTab === "colors" && /* @__PURE__ */ jsx(ColorsPanel, { theme }),
+        activeTab === "images" && /* @__PURE__ */ jsx(ImagesPanel, { theme, onImageUpload }),
+        activeTab === "typography" && /* @__PURE__ */ jsx(TypographyPanel, { theme }),
+        activeTab === "buttons" && /* @__PURE__ */ jsx(ButtonsPanel, { theme }),
+        activeTab === "inputs" && /* @__PURE__ */ jsx(InputsPanel, { theme }),
+        activeTab === "export" && /* @__PURE__ */ jsx(ExportPanel, { theme })
+      ] })
+    }
+  );
+  const footerContent = showFooter ? /* @__PURE__ */ jsx("div", { style: drawerStyles.footer, children: resetConfirmOpen ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "13px",
+              color: "#374151",
+              textAlign: "center"
+            },
+            children: "Reset all settings to defaults?"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "8px",
+              justifyContent: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setResetConfirmOpen(false),
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "#374151",
+                    background: "#ffffff",
+                    border: "1px solid #e5e7eb",
+                    cursor: "pointer",
+                    padding: "6px 16px",
+                    borderRadius: "6px"
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleReset,
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "#ffffff",
+                    background: "#dc2626",
+                    border: "1px solid #dc2626",
+                    cursor: "pointer",
+                    padding: "6px 16px",
+                    borderRadius: "6px"
+                  },
+                  children: "Reset All"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideSave && theme.isDirty && /* @__PURE__ */ jsxs(
       "div",
       {
         style: {
-          position: "fixed",
-          bottom: `${dragPos.y}px`,
-          ...isRight ? { right: `${dragPos.x}px` } : { left: `${dragPos.x}px` },
-          zIndex: 9999,
           display: "flex",
-          alignItems: "center",
-          gap: "0"
+          gap: "8px",
+          width: "100%"
         },
         children: [
           /* @__PURE__ */ jsx(
-            "div",
+            "button",
             {
-              onPointerDown: handleDragPointerDown,
-              onPointerMove: handleDragPointerMove,
-              onPointerUp: handleDragPointerUp,
+              onClick: handleDiscard,
               style: {
-                cursor: "grab",
-                padding: "4px 2px",
-                display: "flex",
-                alignItems: "center",
-                opacity: 0.25,
-                touchAction: "none"
+                flex: 1,
+                fontSize: "13px",
+                fontWeight: 500,
+                color: "#374151",
+                background: "#ffffff",
+                border: "1px solid #e5e7eb",
+                cursor: "pointer",
+                padding: "8px 16px",
+                borderRadius: "6px"
               },
-              children: /* @__PURE__ */ jsx(GripVertical, { size: 12, color: "#9ca3af" })
+              children: "Discard"
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => setOpen(true),
+              onClick: handleSave,
               style: {
-                width: "36px",
-                height: "36px",
-                borderRadius: "10px",
-                background: "#ffffff",
-                color: "#6b7280",
-                border: "1px solid #e5e7eb",
+                flex: 1,
+                fontSize: "13px",
+                fontWeight: 600,
+                color: "#ffffff",
+                background: "#1f2937",
+                border: "1px solid #1f2937",
                 cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)",
-                transition: "transform 150ms, box-shadow 150ms, border-color 150ms"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.transform = "scale(1.06)";
-                e.currentTarget.style.boxShadow = "0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)";
-                e.currentTarget.style.borderColor = "#d1d5db";
+                padding: "8px 16px",
+                borderRadius: "6px"
               },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.transform = "scale(1)";
-                e.currentTarget.style.boxShadow = "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)";
-                e.currentTarget.style.borderColor = "#e5e7eb";
-              },
-              "aria-label": "Open theme editor",
-              children: /* @__PURE__ */ jsx(PaletteIcon6, {})
+              children: "Save"
             }
           )
         ]
       }
     ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setResetConfirmOpen(true),
+        style: {
+          fontSize: "12px",
+          fontWeight: 400,
+          color: "#9ca3af",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: "2px 0",
+          textAlign: "center",
+          textDecoration: "underline",
+          textUnderlineOffset: "2px"
+        },
+        children: "Reset all to defaults"
+      }
+    )
+  ] }) }) : null;
+  const headerBlock = /* @__PURE__ */ jsxs("div", { style: { padding: "16px 0 0" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: "16px",
+          fontWeight: 700,
+          color: "#1f2937",
+          fontFamily: drawerStyles.container.fontFamily
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: "13px",
+          color: "#6b7280",
+          marginTop: "2px",
+          marginBottom: "12px",
+          fontFamily: drawerStyles.container.fontFamily
+        },
+        children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"
+      }
+    )
+  ] });
+  const triggerButton = !open && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: `${dragPos.y}px`,
+        ...isRight ? { right: `${dragPos.x}px` } : { left: `${dragPos.x}px` },
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        gap: "0"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onPointerDown: handleDragPointerDown,
+            onPointerMove: handleDragPointerMove,
+            onPointerUp: handleDragPointerUp,
+            style: {
+              cursor: "grab",
+              padding: "4px 2px",
+              display: "flex",
+              alignItems: "center",
+              opacity: 0.25,
+              touchAction: "none"
+            },
+            children: /* @__PURE__ */ jsx(GripVertical, { size: 12, color: "#9ca3af" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setOpen(true),
+            style: {
+              width: "36px",
+              height: "36px",
+              borderRadius: "10px",
+              background: "#ffffff",
+              color: "#6b7280",
+              border: "1px solid #e5e7eb",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)",
+              transition: "transform 150ms, box-shadow 150ms, border-color 150ms"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "scale(1.06)";
+              e.currentTarget.style.boxShadow = "0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)";
+              e.currentTarget.style.borderColor = "#d1d5db";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "scale(1)";
+              e.currentTarget.style.boxShadow = "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)";
+              e.currentTarget.style.borderColor = "#e5e7eb";
+            },
+            "aria-label": "Open theme editor",
+            children: /* @__PURE__ */ jsx(PaletteIcon6, {})
+          }
+        )
+      ]
+    }
+  );
+  const dockedAside = /* @__PURE__ */ jsx(
+    "aside",
+    {
+      "data-theme-drawer": true,
+      style: {
+        width: open ? `${width}px` : "0px",
+        transition: "width 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+        overflow: "hidden",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            width: `${width}px`,
+            height: `calc(100vh - ${stickyTopOffset}px)`,
+            position: "sticky",
+            top: `${stickyTopOffset}px`,
+            display: "flex",
+            flexDirection: "column",
+            borderLeft: "1px solid #e5e7eb",
+            background: "#ffffff",
+            ...drawerStyles.container
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleOpenChange(false),
+                style: {
+                  position: "absolute",
+                  top: 16,
+                  right: 16,
+                  width: 24,
+                  height: 24,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  opacity: 0.5,
+                  transition: "opacity 150ms",
+                  zIndex: 10
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.opacity = "1";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.opacity = "0.5";
+                },
+                "aria-label": "Close theme editor",
+                children: /* @__PURE__ */ jsx(PanelRightClose, { size: 16, color: "#6b7280" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 12px", background: "#ffffff" }, children: headerBlock }),
+            tabBar,
+            panelContent,
+            footerContent
+          ]
+        }
+      )
+    }
+  );
+  if (docked && children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      triggerButton,
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", minHeight: "100vh" }, children: [
+        /* @__PURE__ */ jsx(
+          PreviewBrandingContext.Provider,
+          {
+            value: {
+              previewBranding: localPreviewBranding,
+              setPreviewBranding: setLocalPreviewBranding,
+              previewImages: localPreviewImages,
+              setPreviewImages: setLocalPreviewImages
+            },
+            children: /* @__PURE__ */ jsx("div", { ref: contentRef, style: { flex: 1, minWidth: 0, overflow: "auto", transform: "translateZ(0)" }, children })
+          }
+        ),
+        dockedAside
+      ] })
+    ] });
+  }
+  if (docked) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      triggerButton,
+      dockedAside
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerButton,
     /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
@@ -26286,7 +26341,7 @@ function ThemeDrawer({
           maxWidth: `${width}px`
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             SheetHeader,
             {
               className: "!p-0",
@@ -26294,197 +26349,16 @@ function ThemeDrawer({
                 padding: "16px 16px 12px",
                 background: "#ffffff"
               },
-              children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px 16px 0" }, children: [
-                /* @__PURE__ */ jsx(
-                  SheetTitle,
-                  {
-                    style: {
-                      fontSize: "16px",
-                      fontWeight: 700,
-                      color: "#1f2937",
-                      fontFamily: drawerStyles.container.fontFamily
-                    },
-                    children: title
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SheetDescription,
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: "#6b7280",
-                      marginTop: "2px",
-                      marginBottom: "12px",
-                      fontFamily: drawerStyles.container.fontFamily
-                    },
-                    children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"
-                  }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { style: drawerStyles.tabBar, children: activePanels.map((panel) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setActiveTab(panel.id),
-              style: drawerStyles.tab(activeTab === panel.id),
-              children: panel.label
-            },
-            panel.id
-          )) }),
-          /* @__PURE__ */ jsx(
-            ScrollArea,
-            {
-              className: "flex-1 overflow-hidden",
-              style: { height: `calc(100vh - ${showFooter ? 200 : 150}px)` },
-              children: /* @__PURE__ */ jsxs("div", { style: drawerStyles.container, children: [
-                activeTab === "colors" && /* @__PURE__ */ jsx(ColorsPanel, { theme }),
-                activeTab === "images" && /* @__PURE__ */ jsx(ImagesPanel, { theme, onImageUpload }),
-                activeTab === "typography" && /* @__PURE__ */ jsx(TypographyPanel, { theme }),
-                activeTab === "buttons" && /* @__PURE__ */ jsx(ButtonsPanel, { theme }),
-                activeTab === "inputs" && /* @__PURE__ */ jsx(InputsPanel, { theme }),
-                activeTab === "export" && /* @__PURE__ */ jsx(ExportPanel, { theme })
-              ] })
-            }
-          ),
-          showFooter && /* @__PURE__ */ jsx("div", { style: drawerStyles.footer, children: resetConfirmOpen ? /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px",
-                width: "100%"
-              },
               children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: "#374151",
-                      textAlign: "center"
-                    },
-                    children: "Reset all settings to defaults?"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      gap: "8px",
-                      justifyContent: "center"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: () => setResetConfirmOpen(false),
-                          style: {
-                            fontSize: "13px",
-                            fontWeight: 500,
-                            color: "#374151",
-                            background: "#ffffff",
-                            border: "1px solid #e5e7eb",
-                            cursor: "pointer",
-                            padding: "6px 16px",
-                            borderRadius: "6px"
-                          },
-                          children: "Cancel"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: handleReset,
-                          style: {
-                            fontSize: "13px",
-                            fontWeight: 500,
-                            color: "#ffffff",
-                            background: "#dc2626",
-                            border: "1px solid #dc2626",
-                            cursor: "pointer",
-                            padding: "6px 16px",
-                            borderRadius: "6px"
-                          },
-                          children: "Reset All"
-                        }
-                      )
-                    ]
-                  }
-                )
+                /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: title }),
+                /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Customize your design system" }),
+                headerBlock
               ]
             }
-          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  gap: "8px",
-                  width: "100%"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: handleDiscard,
-                      style: {
-                        flex: 1,
-                        fontSize: "13px",
-                        fontWeight: 500,
-                        color: "#374151",
-                        background: "#ffffff",
-                        border: "1px solid #e5e7eb",
-                        cursor: "pointer",
-                        padding: "8px 16px",
-                        borderRadius: "6px"
-                      },
-                      children: "Discard"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: handleSave,
-                      style: {
-                        flex: 1,
-                        fontSize: "13px",
-                        fontWeight: 600,
-                        color: "#ffffff",
-                        background: "#1f2937",
-                        border: "1px solid #1f2937",
-                        cursor: "pointer",
-                        padding: "8px 16px",
-                        borderRadius: "6px"
-                      },
-                      children: "Save"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setResetConfirmOpen(true),
-                style: {
-                  fontSize: "12px",
-                  fontWeight: 400,
-                  color: "#9ca3af",
-                  background: "none",
-                  border: "none",
-                  cursor: "pointer",
-                  padding: "2px 0",
-                  textAlign: "center",
-                  textDecoration: "underline",
-                  textUnderlineOffset: "2px"
-                },
-                children: "Reset all to defaults"
-              }
-            )
-          ] }) })
+          ),
+          tabBar,
+          panelContent,
+          footerContent
         ]
       }
     ) })
@@ -26510,6 +26384,6 @@ function getTopLevelScreens(allScreens) {
   return allScreens.filter((s) => !s.parentId);
 }
 
-export { AccountSettingsShell, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, Button, Calendar, CanvasItem, CategoryGrid, CenteredHero, ChatBubble, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, ColorInputRow, ComponentPalette, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, CustomComponentHelper, DashboardHeader, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChartWidget, DoubleSidebar, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, FilterPopover, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GraphMetricTilesDemo, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, HslColorPicker, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, ImageUploader, InfoCard, Input, Label2 as Label, LargeImageLabelsList, Sidebar2 as LayoutSidebar, LineChartWidget, LineTabs, LinksCard, Loader, LoginBrandingPanel, MenuSection, MenufocusTemplate, MessengerInput, MessengerSidebar, MetricCard, MetricCardsRow, MetricListCard, MetricsSection, MobileBottomNav, MobileMenuShell, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, MultistepShell, MultistepSidebarShell, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, PersonaCard, PersonaGrid, PillTabs, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, ProgressMetricCard, ProjectContextShell, PromptChipsRow, PromptTemplate, RadioGroup2 as RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator3 as Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, StepTracker, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, ThemeContext, ThemeDrawer, ThemeProvider, TitleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoColumnWidgets, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastCSSVariables, buttonVariants, canvasBlocks, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
+export { AccountSettingsShell, ActivityFeed, Avatar, AvatarFallback, AvatarImage, BadgesCard, BlogCards, BottomInputChatWidget, Button, Calendar, CategoryGrid, CenteredHero, ChatBubble, ChatDateSeparator, ChatInput, ChatMessageList, Checkbox, CheckboxWithLabel, CircularProgressBar, CircularProgressBarList, ColorInputRow, ComponentSearch, ContentDropzone, ContentWithImage, CoreValuesGrid, CreditCardDisplay, CtaBanner, CustomComponentHelper, DashboardHeader, DashboardShell, DateInput, DescriptionCard, DestinationCards, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChartWidget, DoubleSidebar, DoubleSidebarShell, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, FaqAccordion, FaqsTable, FeatureWithImage, FeaturedNewsCards, FeaturedPlaces, FeaturesComparison, FileUploader, FilterPopover, FixedColumnDataTable, FlairBanner, FooterNavbar, FormGroup, GallerySection, GradientBanner, GraphMetricTilesDemo, GridTilesList, Header, HeroDarkCentered, HeroDarkWithImage, HeroFullwidthImage, HeroSection, HowItWorks, HslColorPicker, IconSidebar, IconSidebarShell, ImageFeedWithNestedComments, ImageUploader, InfoCard, Input, Label2 as Label, LargeImageLabelsList, Sidebar2 as LayoutSidebar, LineChartWidget, LineTabs, LinksCard, Loader, LoginBrandingPanel, MenuSection, MenufocusTemplate, MessengerInput, MessengerSidebar, MetricCard, MetricCardsRow, MetricListCard, MetricsSection, MobileBottomNav, MobileMenuShell, MonthlyCalendarWidget, MultiselectCheckboxField, MultiselectTags, MultistepProgressBarShell, MultistepShell, MultistepSidebarShell, NestedCommentsTable, NestedDataTable, OfficeLocations, PageHeaderSection, Pagination, ParticipantList, PersonaCard, PersonaGrid, PillTabs, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortfolioCard, PreviewBrandingContext, PricingCards, PricingCta, ProfileCard, ProfileGridTilesList, ProfileImageUploader, ProgressBar, ProgressMetricCard, ProjectContextShell, PromptChipsRow, PromptTemplate, RadioGroup2 as RadioGroup, RadioGroupItem, RangeInput, ReviewsGrid, ReviewsTable, ScreenFlowchart, ScreenPromptBuilder, ScreenPromptTemplate, ScrollArea, ScrollBar, SearchBar, SearchBarShell, SearchSidebar, Searchbox, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectablePills, Separator3 as Separator, SettingsListRow, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarNav, SidebarProfileCard, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SkillsCard, Slider, SlideshowGridTiles, SocialFeed, SocialProof, StandardDataTable, StandardListWithImage, StandardPageShell, StatsCard, StepTracker, Switch, Tabs, TabsContent, TabsList, TabsTrigger, TeamCardsGrid, TeamCircularGrid, TestimonialCarousel, TextInput, Textarea, ThemeContext, ThemeDrawer, ThemeProvider, TitleGroup, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TwoColumnWidgets, Typography, UpvotingPostsTable, VerticalHowItWorks, VerticalMultistepShell, VerticalStepTracker, VideoChatControls, VideoContentSection, VideoPlaylistCard, VideoPlaylistItem, WebcamPreview, YouTubePlayer, accountTabs, allColorVariables, blocks, broadcastBranding, broadcastCSSVariables, broadcastImages, buttonVariants, cn, colorVariables, defaultBranding, defaultButtonColorStyles, defaultButtonColors, defaultButtonSizes, defaultColors, defaultCustomButtonStyles, defaultDoubleSidebarSections, defaultIconNavItems, defaultImages, defaultInputSizes, defaultProgressBarSteps, defaultSteps, defaultSupportLinks, defaultTypography, defaultVerticalSteps, getChildScreens, getScreenUrl, getTopLevelScreens, groupModalDrawerBlocks, layoutPrimitives, layoutShells, marketingBlocks, pageTemplates, pricingBlocks, removeCSSVariables, setCSSVariable, setCSSVariables, setupCSSVariableListener, useCSSVariableSync, useIsMobile, usePreviewBranding, useSidebar, useThemeBrandAssets, useThemeBranding, useThemeImages, videoBlocks };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map