canvas-ui-sdk 0.3.18 → 0.3.19

package/dist/index.js

@@ -7,7 +7,7 @@ import * as React14 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';
@@ -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-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)]",
+        "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,
@@ -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(
-        "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)] 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
             }
@@ -11108,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",
@@ -11208,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 })
         ] }),
@@ -11378,7 +11416,7 @@ function SkillsCard({
 }
 var badgeIcons = {
   zap: Zap,
-  star: Star,
+  star: Star$1,
   check: CheckCircle
 };
 var badgeColors = {
@@ -11821,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)",
@@ -14481,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 = {
@@ -15056,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",
@@ -15178,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",
@@ -15468,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() {
@@ -16414,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)",
@@ -16807,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)" }
@@ -20879,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 })
                       ] })
                     ] }),
@@ -20966,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 }) },
@@ -21153,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({
@@ -24033,7 +23727,6 @@ function ColorInputRow({
             {
               className: "w-auto p-0",
               align: "start",
-              onPointerDownOutside: (e) => e.preventDefault(),
               children: /* @__PURE__ */ jsx(HslColorPicker, { value, onChange })
             }
           )
@@ -24132,7 +23825,6 @@ function VariableColorRow({
             {
               className: "w-auto p-0",
               align: "start",
-              onPointerDownOutside: (e) => e.preventDefault(),
               children: /* @__PURE__ */ jsx(
                 HslColorPicker,
                 {
@@ -24469,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 },
@@ -24499,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 },
@@ -26133,6 +25825,7 @@ function ThemeDrawer({
   title = "Design Variables",
   width = 464,
   readOnly = false,
+  hideSave = false,
   docked = false,
   stickyTopOffset = 0,
   children
@@ -26143,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);
@@ -26198,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) {
@@ -26213,6 +25916,8 @@ function ThemeDrawer({
         }
         setPreviewBranding(null);
         setPreviewImages(null);
+        setLocalPreviewBranding(null);
+        setLocalPreviewImages(null);
         setResetConfirmOpen(false);
       }
       setOpen(newOpen);
@@ -26229,10 +25934,12 @@ 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 || theme.hasCustomizations);
+  const showFooter = !readOnly && (!hideSave && theme.isDirty || resetConfirmOpen || theme.hasCustomizations);
   useEffect(() => {
     if (!docked || !open) return;
     const handleEscape = (e) => {
@@ -26249,14 +25956,19 @@ function ThemeDrawer({
     const currentKeys = new Set(Object.keys(theme.overrides));
     prevOverrideKeysRef.current.forEach((key) => {
       if (!currentKeys.has(key)) {
-        el.style.removeProperty(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.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;
@@ -26365,7 +26077,7 @@ function ThemeDrawer({
       ]
     }
   ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    theme.isDirty && /* @__PURE__ */ jsxs(
+    !hideSave && theme.isDirty && /* @__PURE__ */ jsxs(
       "div",
       {
         style: {
@@ -26577,7 +26289,7 @@ function ThemeDrawer({
                   e.currentTarget.style.opacity = "0.5";
                 },
                 "aria-label": "Close theme editor",
-                children: /* @__PURE__ */ jsx(XIcon, { size: 16, color: "#6b7280" })
+                children: /* @__PURE__ */ jsx(PanelRightClose, { size: 16, color: "#6b7280" })
               }
             ),
             /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 12px", background: "#ffffff" }, children: headerBlock }),
@@ -26593,7 +26305,18 @@ function ThemeDrawer({
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       triggerButton,
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", minHeight: "100vh" }, children: [
-        /* @__PURE__ */ jsx("div", { ref: contentRef, style: { flex: 1, minWidth: 0, overflow: "auto", transform: "translateZ(0)" }, 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
       ] })
     ] });
@@ -26661,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