canvas-ui-sdk 0.3.11 → 0.3.13

package/dist/index.js

@@ -7,7 +7,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as React13 from 'react';
 import React13__default, { createContext, useState, useContext, useEffect, useRef, Children, useMemo, useCallback } from 'react';
-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, 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, 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 { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -25166,19 +25166,45 @@ function VariableColorRow({
         padding: "8px 0"
       },
       children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: "24px",
-              height: "24px",
-              borderRadius: "4px",
-              border: "1px solid #e5e7eb",
-              flexShrink: 0,
-              backgroundColor: resolvedColor
+        /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: {
+                width: "24px",
+                height: "24px",
+                borderRadius: "4px",
+                border: "1px solid #e5e7eb",
+                flexShrink: 0,
+                backgroundColor: resolvedColor,
+                cursor: "pointer",
+                transition: "transform 150ms"
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.transform = "scale(1.05)";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.transform = "scale(1)";
+              },
+              "aria-label": `Edit ${label} color`
             }
-          }
-        ),
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              className: "w-auto p-0",
+              align: "start",
+              onPointerDownOutside: (e) => e.preventDefault(),
+              children: /* @__PURE__ */ jsx(
+                HslColorPicker,
+                {
+                  value: isVariable ? resolvedColor : value,
+                  onChange: (hex) => onChange(hex)
+                }
+              )
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -25192,93 +25218,110 @@ function VariableColorRow({
           }
         ),
         /* @__PURE__ */ jsxs(
-          "select",
+          Select,
           {
             value: selectValue,
-            onChange: (e) => {
-              if (e.target.value === "__custom__") {
+            onValueChange: (v) => {
+              if (v === "__custom__") {
                 onChange("#000000");
               } else {
-                onChange(e.target.value);
+                onChange(v);
               }
             },
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  inputSize: "sm",
+                  className: "max-w-[140px] bg-white",
+                  style: { flexShrink: 0 },
+                  children: /* @__PURE__ */ jsx(SelectValue, { children: selectedOption ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "w-2.5 h-2.5 rounded-sm border shrink-0",
+                        style: {
+                          backgroundColor: resolvedColor,
+                          borderColor: "#e5e7eb"
+                        }
+                      }
+                    ),
+                    selectedOption.label
+                  ] }) : "Custom" })
+                }
+              ),
+              /* @__PURE__ */ jsxs(SelectContent, { children: [
+                variableOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, className: "text-xs", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "w-3 h-3 rounded-sm border shrink-0",
+                      style: {
+                        backgroundColor: resolveBrandingColor(opt.value),
+                        borderColor: "#e5e7eb"
+                      }
+                    }
+                  ),
+                  opt.label
+                ] }) }, opt.value)),
+                /* @__PURE__ */ jsx(SelectItem, { value: "__custom__", className: "text-xs", children: "Custom" })
+              ] })
+            ]
+          }
+        ),
+        !isVariable && /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: (e) => {
+              let hex = e.target.value;
+              if (hex && !hex.startsWith("#")) hex = "#" + hex;
+              if (/^#[0-9A-Fa-f]{0,6}$/.test(hex)) onChange(hex);
+            },
             style: {
-              height: "28px",
+              width: "72px",
               fontSize: "11px",
-              padding: "0 6px",
+              fontFamily: "monospace",
+              padding: "4px 6px",
               border: "1px solid #e5e7eb",
               borderRadius: "4px",
               color: "#374151",
               background: "#ffffff",
-              cursor: "pointer",
-              flexShrink: 0,
-              maxWidth: "120px"
+              textTransform: "uppercase",
+              textAlign: "center"
             },
-            children: [
-              variableOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value)),
-              /* @__PURE__ */ jsx("option", { value: "__custom__", children: "Custom" })
-            ]
+            placeholder: "#000000"
           }
-        ),
-        !isVariable && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs(Popover, { children: [
-            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                style: {
-                  width: "24px",
-                  height: "24px",
-                  borderRadius: "4px",
-                  border: "1px solid #e5e7eb",
-                  cursor: "pointer",
-                  flexShrink: 0,
-                  backgroundColor: value
-                },
-                "aria-label": `Edit ${label} color`
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              PopoverContent,
-              {
-                className: "w-auto p-0",
-                align: "start",
-                onPointerDownOutside: (e) => e.preventDefault(),
-                children: /* @__PURE__ */ jsx(HslColorPicker, { value, onChange })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              value,
-              onChange: (e) => {
-                let hex = e.target.value;
-                if (hex && !hex.startsWith("#")) hex = "#" + hex;
-                if (/^#[0-9A-Fa-f]{0,6}$/.test(hex)) onChange(hex);
-              },
-              style: {
-                width: "72px",
-                fontSize: "11px",
-                fontFamily: "monospace",
-                padding: "4px 6px",
-                border: "1px solid #e5e7eb",
-                borderRadius: "4px",
-                color: "#374151",
-                background: "#ffffff",
-                textTransform: "uppercase",
-                textAlign: "center"
-              },
-              placeholder: "#000000"
-            }
-          )
-        ] })
+        )
       ]
     }
   );
 }
 function ColorsPanel({ theme }) {
+  const resolvedPrimary = resolveBrandingColor("var(--canvas-primary)");
   return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-6 p-4", children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        [data-theme-drawer-panel] input[type=range]::-webkit-slider-thumb {
+          -webkit-appearance: none;
+          width: 16px;
+          height: 16px;
+          border-radius: 50%;
+          background: ${resolvedPrimary};
+          border: 2px solid #ffffff;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+          cursor: pointer;
+        }
+        [data-theme-drawer-panel] input[type=range]::-moz-range-thumb {
+          width: 12px;
+          height: 12px;
+          border-radius: 50%;
+          background: ${resolvedPrimary};
+          border: 2px solid #ffffff;
+          box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+          cursor: pointer;
+        }
+      ` }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -25314,9 +25357,7 @@ function ColorsPanel({ theme }) {
                   const hsl = hexToHsl2(hex);
                   theme.setBrandHue(hsl.h);
                   theme.setBrandVibrancy(1);
-                  if (theme.syncRelatedColors) {
-                    theme.applyBrandHueVibrancy(hsl.h, 1, true);
-                  }
+                  theme.applyBrandHueVibrancy(hsl.h, 1, true);
                 }
               }
             }
@@ -25356,9 +25397,7 @@ function ColorsPanel({ theme }) {
                 onChange: (e) => {
                   const newHue = parseInt(e.target.value);
                   theme.setBrandHue(newHue);
-                  if (theme.syncRelatedColors) {
-                    theme.applyBrandHueVibrancy(newHue, theme.brandVibrancy);
-                  }
+                  theme.applyBrandHueVibrancy(newHue, theme.brandVibrancy);
                 },
                 style: {
                   width: "100%",
@@ -25372,7 +25411,7 @@ function ColorsPanel({ theme }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+          /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsxs(
               "div",
               {
@@ -25407,9 +25446,7 @@ function ColorsPanel({ theme }) {
                 onChange: (e) => {
                   const newVibrancy = parseInt(e.target.value) / 100;
                   theme.setBrandVibrancy(newVibrancy);
-                  if (theme.syncRelatedColors) {
-                    theme.applyBrandHueVibrancy(theme.brandHue, newVibrancy, true);
-                  }
+                  theme.applyBrandHueVibrancy(theme.brandHue, newVibrancy, true);
                 },
                 style: {
                   width: "100%",
@@ -25422,32 +25459,7 @@ function ColorsPanel({ theme }) {
                 }
               }
             )
-          ] }),
-          /* @__PURE__ */ jsxs(
-            "label",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                cursor: "pointer",
-                fontSize: "13px",
-                color: "#374151"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: theme.syncRelatedColors,
-                    onChange: (e) => theme.setSyncRelatedColors(e.target.checked),
-                    style: { width: "16px", height: "16px", cursor: "pointer" }
-                  }
-                ),
-                "Apply to related colors"
-              ]
-            }
-          )
+          ] })
         ]
       }
     ),
@@ -25572,6 +25584,7 @@ function ImagesPanel({ theme, onImageUpload }) {
   const currentShape = iconShapes6.find((s) => s.id === theme.branding.iconShape) ?? iconShapes6[0];
   const resolvedBgColor = resolveBrandingColor(theme.branding.bgColor);
   const resolvedIconColor = resolveBrandingColor(theme.branding.iconColor);
+  const resolvedPrimary = resolveBrandingColor("var(--canvas-primary)");
   const SelectedIcon = logoIcons.find((i) => i.name === theme.branding.iconName)?.icon ?? Buildings;
   return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, style: { display: "flex", flexDirection: "column", gap: "24px", padding: "16px" }, children: [
     /* @__PURE__ */ jsxs("div", { children: [
@@ -25750,8 +25763,8 @@ function ImagesPanel({ theme, onImageUpload }) {
                     alignItems: "center",
                     justifyContent: "center",
                     borderRadius: "6px",
-                    border: isSelected ? "2px solid #1165ef" : "1px solid transparent",
-                    background: isSelected ? "#1165ef" : "transparent",
+                    border: isSelected ? `2px solid ${resolvedPrimary}` : "1px solid transparent",
+                    background: isSelected ? resolvedPrimary : "transparent",
                     cursor: "pointer",
                     padding: 0,
                     transition: "background 100ms, border-color 100ms"
@@ -25923,20 +25936,22 @@ function ImageUploadRow({
               style: {
                 fontSize: "12px",
                 fontWeight: 500,
-                color: "#1165ef",
-                background: "#ebf2ff",
-                border: "1px solid #1165ef",
+                color: "#374151",
+                background: "#f9fafb",
+                border: "1px solid #e5e7eb",
                 borderRadius: "4px",
                 padding: "4px 10px",
                 cursor: "pointer",
                 flexShrink: 0,
-                transition: "background 100ms"
+                transition: "background 100ms, border-color 100ms"
               },
               onMouseEnter: (e) => {
-                e.currentTarget.style.background = "#dbeafe";
+                e.currentTarget.style.background = "#f3f4f6";
+                e.currentTarget.style.borderColor = "#d1d5db";
               },
               onMouseLeave: (e) => {
-                e.currentTarget.style.background = "#ebf2ff";
+                e.currentTarget.style.background = "#f9fafb";
+                e.currentTarget.style.borderColor = "#e5e7eb";
               },
               children: "Upload"
             }
@@ -25980,11 +25995,20 @@ function ImageUploadRow({
   );
 }
 var typographyColorOptions = [
+  // Text colors
   { value: "var(--canvas-text)", label: "Text" },
   { value: "var(--canvas-text-muted)", label: "Text Muted" },
   { value: "var(--canvas-text-placeholder)", label: "Placeholder" },
+  // Brand colors
   { value: "var(--canvas-primary)", label: "Primary" },
-  { value: "var(--canvas-destructive)", label: "Destructive" }
+  { value: "var(--canvas-primary-dark)", label: "Primary Dark" },
+  { value: "var(--canvas-primary-foreground)", label: "Primary Text" },
+  { value: "var(--canvas-destructive)", label: "Destructive" },
+  // Sidebar colors
+  { value: "var(--canvas-sidebar-light-text)", label: "Sidebar Light Text" },
+  { value: "var(--canvas-sidebar-light-active-text)", label: "Sidebar Light Active Text" },
+  { value: "var(--canvas-sidebar-dark-text)", label: "Sidebar Dark Text" },
+  { value: "var(--canvas-sidebar-dark-active-text)", label: "Sidebar Dark Active Text" }
 ];
 var generalPurposeStyles = [
   { prefix: "h1", label: "H1", description: "Hero headlines" },
@@ -26000,119 +26024,53 @@ var generalPurposeStyles = [
   { prefix: "body-xs", label: "Body XS", description: "Fine print, labels" }
 ];
 var componentStyles = [
-  { prefix: "menu-label", label: "Menu Label" },
-  { prefix: "sidebar-label", label: "Sidebar Label" },
-  { prefix: "sidebar-tab", label: "Sidebar Tab" },
-  { prefix: "sidebar-subtab", label: "Sidebar Subtab" },
-  { prefix: "header", label: "Header" },
-  { prefix: "input-label", label: "Input Label" },
-  { prefix: "button", label: "Button" }
+  { prefix: "menu-label", label: "Menu Label", description: "Expandable menu items" },
+  { prefix: "sidebar-label", label: "Sidebar Label", description: "Section titles" },
+  { prefix: "sidebar-tab", label: "Sidebar Tab", description: "Navigation items" },
+  { prefix: "sidebar-subtab", label: "Sidebar Subtab", description: "Nested navigation" },
+  { prefix: "header", label: "Header", description: "Header navigation text" },
+  { prefix: "input-label", label: "Input Label", description: "Form field labels" },
+  { prefix: "button", label: "Button", description: "All button labels" }
 ];
 function TypographyPanel({ theme }) {
   useEffect(() => {
     preloadAllFonts();
   }, []);
   const globalFont = theme.variables["--typo-global-font"] || "Inter";
-  return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, style: { padding: "16px" }, children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "12px",
-          background: "#f9fafb",
-          borderRadius: "8px",
-          border: "1px solid #e5e7eb",
-          marginBottom: "20px"
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontSize: "13px",
-                  fontWeight: 600,
-                  color: "#374151"
-                },
-                children: "Global Font"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  fontSize: "11px",
-                  color: "#6b7280",
-                  marginTop: "2px"
-                },
-                children: "Default font for all text styles"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: globalFont,
-              onChange: (e) => {
-                const v = e.target.value;
-                loadGoogleFont(v);
-                theme.setVariable("--typo-global-font", v);
-              },
-              style: {
-                height: "32px",
-                fontSize: "12px",
-                padding: "0 8px",
-                border: "1px solid #e5e7eb",
-                borderRadius: "6px",
-                color: "#374151",
-                background: "#ffffff",
-                cursor: "pointer",
-                maxWidth: "180px"
-              },
-              children: fontOptions.map((f) => /* @__PURE__ */ jsx(
-                "option",
-                {
-                  value: f.value,
-                  style: { fontFamily: f.value },
-                  children: f.label
-                },
-                f.value
-              ))
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          style: {
-            fontSize: "11px",
-            fontWeight: 600,
-            color: "#6b7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
-            marginBottom: "4px"
-          },
-          children: "General Purpose"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "p",
+  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", { 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" })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        Select,
         {
-          style: {
-            fontSize: "11px",
-            color: "#6b7280",
-            marginBottom: "12px"
+          value: globalFont,
+          onValueChange: (v) => {
+            loadGoogleFont(v);
+            theme.setVariable("--typo-global-font", v);
           },
-          children: "Headings and body text used across the application."
+          children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "w-44 bg-white", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: fontOptions.map((f) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                value: f.value,
+                className: "text-xs",
+                style: { fontFamily: f.value },
+                children: f.label
+              },
+              f.value
+            )) })
+          ]
         }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: generalPurposeStyles.map((s) => /* @__PURE__ */ jsx(
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide mb-1", children: "General Purpose" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[var(--canvas-text-muted)] mb-3", children: "Headings and body text used across the application." }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: generalPurposeStyles.map((s) => /* @__PURE__ */ jsx(
         TypographyRow,
         {
           config: s,
@@ -26124,32 +26082,9 @@ function TypographyPanel({ theme }) {
       )) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          style: {
-            fontSize: "11px",
-            fontWeight: 600,
-            color: "#6b7280",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em",
-            marginBottom: "4px"
-          },
-          children: "Component-Specific"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            fontSize: "11px",
-            color: "#6b7280",
-            marginBottom: "12px"
-          },
-          children: "Typography styles scoped to specific UI components."
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: componentStyles.map((s) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide mb-1", children: "Component-Specific" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[var(--canvas-text-muted)] mb-3", children: "Typography styles scoped to specific UI components." }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: componentStyles.map((s) => /* @__PURE__ */ jsx(
         TypographyRow,
         {
           config: s,
@@ -26171,334 +26106,166 @@ function TypographyRow({
   const [expanded, setExpanded] = useState(false);
   const { prefix, label, description } = config;
   const varKey = (suffix) => `--typo-${prefix}-${suffix}`;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        border: "1px solid #e5e7eb",
-        borderRadius: "8px",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setExpanded(!expanded),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              width: "100%",
-              padding: "10px 12px",
-              background: "#f9fafb",
-              border: "none",
-              cursor: "pointer",
-              fontSize: "13px",
-              fontWeight: 600,
-              color: "#374151"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: "8px" }, children: [
-                /* @__PURE__ */ jsx("span", { children: label }),
-                description && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "11px",
-                      fontWeight: 400,
-                      color: "#6b7280"
-                    },
-                    children: description
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx(
-                "span",
+  const font = theme.variables[varKey("font")] ?? "";
+  const weight = theme.variables[varKey("weight")] ?? defaultTypography[varKey("weight")] ?? "";
+  const spacing = theme.variables[varKey("spacing")] ?? defaultTypography[varKey("spacing")] ?? "";
+  const color = theme.variables[varKey("color")] ?? defaultTypography[varKey("color")] ?? "var(--canvas-text)";
+  const effectiveFont = font || globalFont;
+  const resolvedColor = resolveBrandingColor(color);
+  return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center justify-between gap-3 text-left cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block truncate",
+                style: {
+                  fontFamily: effectiveFont,
+                  fontWeight: weight || void 0,
+                  letterSpacing: spacing || void 0,
+                  color: resolvedColor,
+                  fontSize: "14px"
+                },
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)] mt-0.5", children: description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
+                expanded && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden transition-all duration-200 ease-out",
+          expanded ? "mt-3 max-h-[500px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Family" }),
+              /* @__PURE__ */ jsxs(
+                Select,
                 {
-                  style: {
-                    fontSize: "11px",
-                    color: "#9ca3af",
-                    transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                    transition: "transform 150ms"
+                  value: font || "__global__",
+                  onValueChange: (v) => {
+                    if (v === "__global__") {
+                      theme.setVariable(varKey("font"), "");
+                    } else {
+                      loadGoogleFont(v);
+                      theme.setVariable(varKey("font"), v);
+                    }
                   },
-                  children: "\u25BC"
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "bg-white", children: /* @__PURE__ */ jsx(SelectValue, { children: font ? font : `Use Global (${globalFont})` }) }),
+                    /* @__PURE__ */ jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsxs(SelectItem, { value: "__global__", className: "text-xs", children: [
+                        "Use Global (",
+                        globalFont,
+                        ")"
+                      ] }),
+                      fontOptions.map((f) => /* @__PURE__ */ jsx(
+                        SelectItem,
+                        {
+                          value: f.value,
+                          className: "text-xs",
+                          style: { fontFamily: f.value },
+                          children: f.label
+                        },
+                        f.value
+                      ))
+                    ] })
+                  ]
                 }
               )
-            ]
-          }
-        ),
-        expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "12px" }, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "grid",
-                gridTemplateColumns: "1fr 1fr",
-                gap: "8px",
-                marginBottom: "8px"
-              },
-              children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        display: "block",
-                        fontSize: "11px",
-                        color: "#6b7280",
-                        marginBottom: "4px"
-                      },
-                      children: "Font Family"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "select",
-                    {
-                      value: theme.variables[varKey("font")] ?? "",
-                      onChange: (e) => {
-                        const v = e.target.value;
-                        if (v) {
-                          loadGoogleFont(v);
-                          theme.setVariable(varKey("font"), v);
-                        } else {
-                          theme.setVariable(varKey("font"), "");
-                        }
-                      },
-                      style: {
-                        width: "100%",
-                        height: "30px",
-                        fontSize: "12px",
-                        padding: "0 6px",
-                        border: "1px solid #e5e7eb",
-                        borderRadius: "4px",
-                        color: "#374151",
-                        background: "#ffffff",
-                        cursor: "pointer"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs("option", { value: "", style: { fontFamily: globalFont }, children: [
-                          "Use Global (",
-                          globalFont,
-                          ")"
-                        ] }),
-                        fontOptions.map((f) => /* @__PURE__ */ jsx(
-                          "option",
-                          {
-                            value: f.value,
-                            style: { fontFamily: f.value },
-                            children: f.label
-                          },
-                          f.value
-                        ))
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        display: "block",
-                        fontSize: "11px",
-                        color: "#6b7280",
-                        marginBottom: "4px"
-                      },
-                      children: "Size"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "text",
-                      value: theme.variables[varKey("size")] ?? "",
-                      onChange: (e) => theme.setVariable(varKey("size"), e.target.value),
-                      placeholder: "e.g. 16px",
-                      style: {
-                        width: "100%",
-                        height: "30px",
-                        fontSize: "12px",
-                        fontFamily: "monospace",
-                        padding: "0 8px",
-                        border: "1px solid #e5e7eb",
-                        borderRadius: "4px",
-                        color: "#374151",
-                        background: "#ffffff",
-                        boxSizing: "border-box"
-                      }
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "grid",
-                gridTemplateColumns: "1fr 1fr",
-                gap: "8px",
-                marginBottom: "8px"
-              },
-              children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        display: "block",
-                        fontSize: "11px",
-                        color: "#6b7280",
-                        marginBottom: "4px"
-                      },
-                      children: "Mobile Size"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "text",
-                      value: theme.variables[varKey("size-mobile")] ?? "",
-                      onChange: (e) => theme.setVariable(varKey("size-mobile"), e.target.value),
-                      placeholder: "e.g. 14px",
-                      style: {
-                        width: "100%",
-                        height: "30px",
-                        fontSize: "12px",
-                        fontFamily: "monospace",
-                        padding: "0 8px",
-                        border: "1px solid #e5e7eb",
-                        borderRadius: "4px",
-                        color: "#374151",
-                        background: "#ffffff",
-                        boxSizing: "border-box"
-                      }
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        display: "block",
-                        fontSize: "11px",
-                        color: "#6b7280",
-                        marginBottom: "4px"
-                      },
-                      children: "Weight"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs(
-                    "select",
-                    {
-                      value: theme.variables[varKey("weight")] ?? "",
-                      onChange: (e) => theme.setVariable(varKey("weight"), e.target.value),
-                      style: {
-                        width: "100%",
-                        height: "30px",
-                        fontSize: "12px",
-                        padding: "0 6px",
-                        border: "1px solid #e5e7eb",
-                        borderRadius: "4px",
-                        color: "#374151",
-                        background: "#ffffff",
-                        cursor: "pointer"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx("option", { value: "", children: "Default" }),
-                        fontWeightOptions.map((w) => /* @__PURE__ */ jsx("option", { value: w.value, children: w.label }, w.value))
-                      ]
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "grid",
-                gridTemplateColumns: "1fr 1fr",
-                gap: "8px",
-                marginBottom: "8px"
-              },
-              children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        display: "block",
-                        fontSize: "11px",
-                        color: "#6b7280",
-                        marginBottom: "4px"
-                      },
-                      children: "Letter Spacing"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "text",
-                      value: theme.variables[varKey("spacing")] ?? "",
-                      onChange: (e) => theme.setVariable(varKey("spacing"), e.target.value),
-                      placeholder: "e.g. -0.02em",
-                      style: {
-                        width: "100%",
-                        height: "30px",
-                        fontSize: "12px",
-                        fontFamily: "monospace",
-                        padding: "0 8px",
-                        border: "1px solid #e5e7eb",
-                        borderRadius: "4px",
-                        color: "#374151",
-                        background: "#ffffff",
-                        boxSizing: "border-box"
-                      }
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        display: "block",
-                        fontSize: "11px",
-                        color: "#6b7280",
-                        marginBottom: "4px"
-                      },
-                      children: "Line Height"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "text",
-                      value: theme.variables[varKey("line-height")] ?? "",
-                      onChange: (e) => theme.setVariable(varKey("line-height"), e.target.value),
-                      placeholder: "e.g. 1.5",
-                      style: {
-                        width: "100%",
-                        height: "30px",
-                        fontSize: "12px",
-                        fontFamily: "monospace",
-                        padding: "0 8px",
-                        border: "1px solid #e5e7eb",
-                        borderRadius: "4px",
-                        color: "#374151",
-                        background: "#ffffff",
-                        boxSizing: "border-box"
-                      }
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Size" }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  inputSize: "sm",
+                  value: theme.variables[varKey("size")] ?? "",
+                  onChange: (e) => theme.setVariable(varKey("size"), e.target.value),
+                  className: "w-full font-mono",
+                  placeholder: "e.g. 16px"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Mobile Size" }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  inputSize: "sm",
+                  value: theme.variables[varKey("size-mobile")] ?? "",
+                  onChange: (e) => theme.setVariable(varKey("size-mobile"), e.target.value),
+                  className: "w-full font-mono",
+                  placeholder: "e.g. 14px"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Weight" }),
+              /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  value: theme.variables[varKey("weight")] ?? "",
+                  onValueChange: (v) => theme.setVariable(varKey("weight"), v),
+                  children: [
+                    /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", className: "bg-white", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Default" }) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: fontWeightOptions.map((w) => /* @__PURE__ */ jsx(SelectItem, { value: w.value, className: "text-xs", children: w.label }, w.value)) })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3 mb-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Letter Spacing" }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  inputSize: "sm",
+                  value: theme.variables[varKey("spacing")] ?? "",
+                  onChange: (e) => theme.setVariable(varKey("spacing"), e.target.value),
+                  className: "w-full font-mono",
+                  placeholder: "e.g. -0.02em"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Line Height" }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  inputSize: "sm",
+                  value: theme.variables[varKey("line-height")] ?? "",
+                  onChange: (e) => theme.setVariable(varKey("line-height"), e.target.value),
+                  className: "w-full font-mono",
+                  placeholder: "e.g. 1.5"
+                }
+              )
+            ] })
+          ] }),
           /* @__PURE__ */ jsx(
             ColorInputRow,
             {
@@ -26517,47 +26284,21 @@ function TypographyRow({
               variableOptions: typographyColorOptions
             }
           ),
-          /* @__PURE__ */ jsx(
-            "div",
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsxs(
+            "button",
             {
-              style: {
-                display: "flex",
-                justifyContent: "flex-end",
-                marginTop: "8px"
-              },
-              children: /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  onClick: () => theme.resetCategory("--typo-" + prefix),
-                  style: {
-                    fontSize: "11px",
-                    color: "#6b7280",
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    padding: "4px 8px",
-                    borderRadius: "4px"
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.color = "#374151";
-                    e.currentTarget.style.background = "#f3f4f6";
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.color = "#6b7280";
-                    e.currentTarget.style.background = "none";
-                  },
-                  children: [
-                    "Reset ",
-                    label
-                  ]
-                }
-              )
+              onClick: () => theme.resetCategory("--typo-" + prefix),
+              className: "text-[11px] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] bg-transparent border-none cursor-pointer px-2 py-1 rounded hover:bg-[var(--canvas-surface)]",
+              children: [
+                "Reset ",
+                label
+              ]
             }
-          )
-        ] })
-      ]
-    }
-  );
+          ) })
+        ]
+      }
+    )
+  ] });
 }
 var buttonSizeConfigs = [
   { id: "mini", label: "Mini", description: "28px height, 12px font", prefix: "--btn-mini" },
@@ -26616,29 +26357,8 @@ function ButtonsPanel({ theme }) {
       buttonSizeConfigs.map((size) => /* @__PURE__ */ jsx(SizeGroup, { size, theme }, size.id))
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide", children: "Color Styles" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: theme.addCustomButtonStyle,
-            className: "text-[11px] font-medium text-[var(--canvas-primary)] bg-transparent border border-[var(--canvas-border)] cursor-pointer px-2.5 py-1 rounded flex items-center gap-1 hover:bg-[var(--canvas-surface)]",
-            children: "+ Add Style"
-          }
-        )
-      ] }),
-      defaultButtonColorStyles.map((style) => /* @__PURE__ */ jsx(ButtonColorGroup, { style, theme }, style.id)),
-      theme.customButtonStyles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-4 border-t border-[var(--canvas-border)]", children: [
-        /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] mb-3", children: "Custom Styles" }),
-        theme.customButtonStyles.map((style) => /* @__PURE__ */ jsx(
-          CustomButtonColorGroup,
-          {
-            style,
-            theme
-          },
-          style.id
-        ))
-      ] })
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide mb-3", children: "Color Styles" }),
+      defaultButtonColorStyles.map((style) => /* @__PURE__ */ jsx(ButtonColorGroup, { style, theme }, style.id))
     ] })
   ] });
 }
@@ -26822,173 +26542,27 @@ function ButtonColorGroup({
                   backgroundColor: resolvedBg === "transparent" ? "white" : resolvedBg,
                   color: resolvedText,
                   borderColor: resolvedBorder === "transparent" ? void 0 : resolvedBorder
-                },
-                children: "Aa"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--canvas-text)]", children: style.label }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: style.description })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: cn(
-                "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
-                expanded && "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "overflow-hidden transition-all duration-200 ease-out",
-          expanded ? "mt-3 max-h-[400px] opacity-100" : "max-h-0 opacity-0"
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Normal" }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Background",
-                  value: bg,
-                  onChange: (val) => theme.setVariable(`${prefix}-bg`, val),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Text",
-                  value: text,
-                  onChange: (val) => theme.setVariable(`${prefix}-text`, val),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Border",
-                  value: border,
-                  onChange: (val) => theme.setVariable(`${prefix}-border`, val),
-                  variableOptions: buttonColorVariableOptions
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-[var(--canvas-text-muted)] mb-2", children: "Hover" }),
-            /* @__PURE__ */ jsxs("div", { className: "space-y-0", children: [
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Background",
-                  value: theme.variables[`${prefix}-bg-hover`] ?? "",
-                  onChange: (val) => theme.setVariable(`${prefix}-bg-hover`, val),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Text",
-                  value: theme.variables[`${prefix}-text-hover`] ?? "",
-                  onChange: (val) => theme.setVariable(`${prefix}-text-hover`, val),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Border",
-                  value: theme.variables[`${prefix}-border-hover`] ?? "",
-                  onChange: (val) => theme.setVariable(`${prefix}-border-hover`, val),
-                  variableOptions: buttonColorVariableOptions
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-function CustomButtonColorGroup({
-  style,
-  theme
-}) {
-  const [expanded, setExpanded] = React13__default.useState(false);
-  const [editing, setEditing] = React13__default.useState(false);
-  const resolvedBg = resolveBrandingColor(style.bg);
-  const resolvedText = resolveBrandingColor(style.text);
-  const resolvedBorder = resolveBrandingColor(style.border);
-  return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
-      editing ? /* @__PURE__ */ jsx(
-        "input",
-        {
-          type: "text",
-          value: style.label,
-          onChange: (e) => theme.updateCustomButtonStyle(style.id, { label: e.target.value }),
-          onBlur: () => setEditing(false),
-          onKeyDown: (e) => e.key === "Enter" && setEditing(false),
-          autoFocus: true,
-          className: "text-sm font-semibold text-[var(--canvas-text)] border border-[var(--canvas-border)] rounded px-1.5 py-0.5 bg-white flex-1"
-        }
-      ) : /* @__PURE__ */ jsxs(
-        "button",
-        {
-          onClick: () => setExpanded(!expanded),
-          className: "flex items-center gap-3 flex-1 min-w-0 text-left cursor-pointer",
-          onDoubleClick: (e) => {
-            e.stopPropagation();
-            setEditing(true);
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "w-8 h-6 rounded border shrink-0 flex items-center justify-center text-xs",
-                style: {
-                  backgroundColor: resolvedBg === "transparent" ? "white" : resolvedBg,
-                  color: resolvedText,
-                  borderColor: resolvedBorder === "transparent" ? void 0 : resolvedBorder
-                },
-                children: "Aa"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--canvas-text)]", children: style.label })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => theme.deleteCustomButtonStyle(style.id),
-            className: "text-[11px] text-[var(--canvas-destructive)] bg-transparent border-none cursor-pointer px-1.5 py-0.5",
-            children: "Delete"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ChevronDown,
-          {
-            onClick: () => setExpanded(!expanded),
-            className: cn(
-              "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200 cursor-pointer",
-              expanded && "rotate-180"
-            )
-          }
-        )
-      ] })
-    ] }),
+                },
+                children: "Aa"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--canvas-text)]", children: style.label }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: style.description })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
+                expanded && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -27004,8 +26578,8 @@ function CustomButtonColorGroup({
                 ColorInputRow,
                 {
                   label: "Background",
-                  value: style.bg,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { bg: val }),
+                  value: bg,
+                  onChange: (val) => theme.setVariable(`${prefix}-bg`, val),
                   variableOptions: buttonColorVariableOptions
                 }
               ),
@@ -27013,8 +26587,8 @@ function CustomButtonColorGroup({
                 ColorInputRow,
                 {
                   label: "Text",
-                  value: style.text,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { text: val }),
+                  value: text,
+                  onChange: (val) => theme.setVariable(`${prefix}-text`, val),
                   variableOptions: buttonColorVariableOptions
                 }
               ),
@@ -27022,8 +26596,8 @@ function CustomButtonColorGroup({
                 ColorInputRow,
                 {
                   label: "Border",
-                  value: style.border,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { border: val }),
+                  value: border,
+                  onChange: (val) => theme.setVariable(`${prefix}-border`, val),
                   variableOptions: buttonColorVariableOptions
                 }
               )
@@ -27036,8 +26610,8 @@ function CustomButtonColorGroup({
                 ColorInputRow,
                 {
                   label: "Background",
-                  value: style.bgHover,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { bgHover: val }),
+                  value: theme.variables[`${prefix}-bg-hover`] ?? "",
+                  onChange: (val) => theme.setVariable(`${prefix}-bg-hover`, val),
                   variableOptions: buttonColorVariableOptions
                 }
               ),
@@ -27045,8 +26619,8 @@ function CustomButtonColorGroup({
                 ColorInputRow,
                 {
                   label: "Text",
-                  value: style.textHover,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { textHover: val }),
+                  value: theme.variables[`${prefix}-text-hover`] ?? "",
+                  onChange: (val) => theme.setVariable(`${prefix}-text-hover`, val),
                   variableOptions: buttonColorVariableOptions
                 }
               ),
@@ -27054,8 +26628,8 @@ function CustomButtonColorGroup({
                 ColorInputRow,
                 {
                   label: "Border",
-                  value: style.borderHover,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { borderHover: val }),
+                  value: theme.variables[`${prefix}-border-hover`] ?? "",
+                  onChange: (val) => theme.setVariable(`${prefix}-border-hover`, val),
                   variableOptions: buttonColorVariableOptions
                 }
               )
@@ -27067,46 +26641,20 @@ function CustomButtonColorGroup({
   ] });
 }
 var inputSizeConfigs = [
-  { id: "small", label: "Small", prefix: "--input-small" },
-  { id: "standard", label: "Standard", prefix: "--input-standard" },
-  { id: "large", label: "Large", prefix: "--input-large" },
-  { id: "expandable", label: "Expandable", prefix: "--input-expandable" }
-];
-var inputFields = [
-  { suffix: "-height", label: "Height" },
-  { suffix: "-font-size", label: "Font Size" },
-  { suffix: "-px", label: "Padding X" },
-  { suffix: "-radius", label: "Radius" }
+  { id: "small", label: "Small", description: "Compact inputs (30px)", prefix: "--input-small" },
+  { id: "standard", label: "Standard", description: "Default inputs (40px)", prefix: "--input-standard" },
+  { id: "large", label: "Large", description: "Hero inputs (64px)", prefix: "--input-large" },
+  { id: "expandable", label: "Expandable", description: "TextArea, uploaders (80px)", prefix: "--input-expandable" }
 ];
 function InputsPanel({ theme }) {
   return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "flex flex-col gap-5 p-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(
-        "h3",
-        {
-          style: {
-            fontSize: "13px",
-            fontWeight: 600,
-            color: "#374151",
-            textTransform: "uppercase",
-            letterSpacing: "0.05em"
-          },
-          children: "Input Sizes"
-        }
-      ),
+      /* @__PURE__ */ jsx("h3", { className: "text-[11px] font-semibold text-[var(--canvas-text-muted)] uppercase tracking-wide", children: "Input Sizes" }),
       /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => theme.resetCategory("--input-"),
-          style: {
-            fontSize: "11px",
-            color: "#6b7280",
-            background: "none",
-            border: "none",
-            cursor: "pointer",
-            padding: "2px 6px",
-            borderRadius: "4px"
-          },
+          className: "text-[11px] text-[var(--canvas-text-muted)] hover:text-[var(--canvas-text)] bg-transparent border-none cursor-pointer px-1.5 py-0.5 rounded hover:bg-[var(--canvas-surface)]",
           children: "Reset All"
         }
       )
@@ -27119,121 +26667,114 @@ function InputSizeGroup({
   theme
 }) {
   const [expanded, setExpanded] = React13__default.useState(false);
-  const previewStyle = {
-    height: theme.variables[`${size.prefix}-height`] || "40px",
-    fontSize: theme.variables[`${size.prefix}-font-size`] || "14px",
-    paddingLeft: theme.variables[`${size.prefix}-px`] || "14px",
-    paddingRight: theme.variables[`${size.prefix}-px`] || "14px",
-    borderRadius: theme.variables[`${size.prefix}-radius`] || "8px",
-    border: "1px solid #d1d9e0",
-    color: "#374151",
-    background: "#ffffff",
-    width: "100%",
-    boxSizing: "border-box"
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        border: "1px solid #e5e7eb",
-        borderRadius: "8px",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setExpanded(!expanded),
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              width: "100%",
-              padding: "10px 12px",
-              background: "#f9fafb",
-              border: "none",
-              cursor: "pointer",
-              fontSize: "13px",
-              fontWeight: 600,
-              color: "#374151"
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { children: size.label }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  style: {
-                    fontSize: "11px",
-                    color: "#9ca3af",
-                    transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
-                    transition: "transform 150ms"
-                  },
-                  children: "\u25BC"
-                }
-              )
-            ]
-          }
-        ),
-        expanded && /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px" }, className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx("div", { style: { marginBottom: "8px" }, children: /* @__PURE__ */ jsx(
-            "input",
+  const heightVar = `${size.prefix}-height`;
+  const fontSizeVar = `${size.prefix}-font-size`;
+  const pxVar = `${size.prefix}-px`;
+  const radiusVar = `${size.prefix}-radius`;
+  const height = theme.variables[heightVar] || defaultInputSizes[heightVar];
+  const fontSize = theme.variables[fontSizeVar] || defaultInputSizes[fontSizeVar];
+  const px = theme.variables[pxVar] || defaultInputSizes[pxVar];
+  const radius = theme.variables[radiusVar] || defaultInputSizes[radiusVar];
+  return /* @__PURE__ */ jsxs("div", { className: "py-3 border-b border-[var(--canvas-border)] last:border-b-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center justify-between gap-3 text-left cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              type: "text",
-              placeholder: `${size.label} input preview`,
-              readOnly: true,
-              style: previewStyle
+              className: "shrink-0 flex items-center border border-[var(--canvas-border-input)] bg-white",
+              style: {
+                width: "160px",
+                height,
+                fontSize,
+                paddingLeft: px,
+                paddingRight: px,
+                borderRadius: radius
+              },
+              children: /* @__PURE__ */ jsx("span", { className: "text-[var(--canvas-text-placeholder)]", children: size.label })
             }
-          ) }),
-          inputFields.map((field) => {
-            const key = `${size.prefix}${field.suffix}`;
-            return /* @__PURE__ */ jsxs(
-              "div",
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--canvas-text-muted)]", children: size.description }) }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "size-4 text-[var(--canvas-text-muted)] shrink-0 transition-transform duration-200",
+                expanded && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "grid grid-cols-2 gap-3 overflow-hidden transition-all duration-200 ease-out",
+          expanded ? "mt-3 max-h-[200px] opacity-100" : "max-h-0 opacity-0"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Height" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
               {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "8px"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "label",
-                    {
-                      style: {
-                        fontSize: "12px",
-                        color: "#6b7280",
-                        width: "80px",
-                        flexShrink: 0
-                      },
-                      children: field.label
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "text",
-                      value: theme.variables[key] ?? "",
-                      onChange: (e) => theme.setVariable(key, e.target.value),
-                      style: {
-                        flex: 1,
-                        fontSize: "12px",
-                        fontFamily: "monospace",
-                        padding: "4px 8px",
-                        border: "1px solid #e5e7eb",
-                        borderRadius: "4px",
-                        color: "#374151",
-                        background: "#ffffff"
-                      }
-                    }
-                  )
-                ]
-              },
-              key
-            );
-          })
-        ] })
-      ]
-    }
-  );
+                inputSize: "sm",
+                value: height,
+                onChange: (e) => theme.setVariable(heightVar, e.target.value),
+                className: "w-full font-mono",
+                placeholder: "40px"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Font Size" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                inputSize: "sm",
+                value: fontSize,
+                onChange: (e) => theme.setVariable(fontSizeVar, e.target.value),
+                className: "w-full font-mono",
+                placeholder: "14px"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Padding X" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                inputSize: "sm",
+                value: px,
+                onChange: (e) => theme.setVariable(pxVar, e.target.value),
+                className: "w-full font-mono",
+                placeholder: "14px"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("label", { className: "text-xs text-[var(--canvas-text-muted)]", children: "Border Radius" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                inputSize: "sm",
+                value: radius,
+                onChange: (e) => theme.setVariable(radiusVar, e.target.value),
+                className: "w-full font-mono",
+                placeholder: "8px"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/components/theme-drawer/utils/generate-bake-prompt.ts
@@ -27556,29 +27097,11 @@ var drawerStyles = {
     fontSize: "14px",
     lineHeight: "1.5"
   },
-  trigger: (position) => ({
-    position: "fixed",
-    bottom: "20px",
-    ...position === "bottom-right" ? { right: "20px" } : { left: "20px" },
-    zIndex: 9999,
-    width: "48px",
-    height: "48px",
-    borderRadius: "12px",
-    background: "#1f2937",
-    color: "#ffffff",
-    border: "none",
-    cursor: "pointer",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-    transition: "transform 150ms, box-shadow 150ms"
-  }),
   tabBar: {
     display: "flex",
     borderBottom: "1px solid #e5e7eb",
-    background: "#f9fafb",
-    padding: "0",
+    background: "#ffffff",
+    padding: "0 8px",
     gap: "0",
     flexShrink: 0,
     overflowX: "auto"
@@ -27587,11 +27110,11 @@ var drawerStyles = {
     flex: 1,
     padding: "10px 4px",
     fontSize: "12px",
-    fontWeight: active ? 600 : 400,
-    color: active ? "#1f2937" : "#6b7280",
+    fontWeight: active ? 500 : 400,
+    color: active ? "#111827" : "#9ca3af",
     background: "none",
     border: "none",
-    borderBottom: active ? "2px solid #1f2937" : "2px solid transparent",
+    borderBottom: active ? "2px solid #111827" : "2px solid transparent",
     cursor: "pointer",
     transition: "color 150ms, border-color 150ms",
     textAlign: "center",
@@ -27611,8 +27134,8 @@ function PaletteIcon6() {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      width: "22",
-      height: "22",
+      width: "16",
+      height: "16",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -27653,6 +27176,44 @@ function ThemeDrawer({
   const [open, setOpen] = useState(defaultOpen);
   const [activeTab, setActiveTab] = useState("colors");
   const [resetConfirmOpen, setResetConfirmOpen] = useState(false);
+  const isRight = triggerPosition === "bottom-right";
+  const [dragPos, setDragPos] = useState({ x: 20, y: 20 });
+  const isDraggingRef = useRef(false);
+  const dragStart = useRef({ pointerX: 0, pointerY: 0, startX: 0, startY: 0 });
+  const handleDragPointerDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      isDraggingRef.current = true;
+      dragStart.current = {
+        pointerX: e.clientX,
+        pointerY: e.clientY,
+        startX: dragPos.x,
+        startY: dragPos.y
+      };
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [dragPos]
+  );
+  const handleDragPointerMove = useCallback(
+    (e) => {
+      if (!isDraggingRef.current) return;
+      const dx = e.clientX - dragStart.current.pointerX;
+      const dy = e.clientY - dragStart.current.pointerY;
+      setDragPos({
+        x: Math.max(4, isRight ? dragStart.current.startX - dx : dragStart.current.startX + dx),
+        y: Math.max(4, dragStart.current.startY - dy)
+      });
+    },
+    [isRight]
+  );
+  const handleDragPointerUp = useCallback(
+    (e) => {
+      isDraggingRef.current = false;
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    },
+    []
+  );
   const theme = useThemeState({
     storageKey,
     initialOverrides,
@@ -27704,21 +27265,69 @@ function ThemeDrawer({
   const activePanels = enabledPanels ? panelConfig.filter((p) => enabledPanels.includes(p.id)) : panelConfig;
   const showFooter = theme.isDirty || resetConfirmOpen;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !open && /* @__PURE__ */ jsx(
-      "button",
+    !open && /* @__PURE__ */ jsxs(
+      "div",
       {
-        onClick: () => setOpen(true),
-        style: drawerStyles.trigger(triggerPosition),
-        onMouseEnter: (e) => {
-          e.currentTarget.style.transform = "scale(1.08)";
-          e.currentTarget.style.boxShadow = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)";
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.transform = "scale(1)";
-          e.currentTarget.style.boxShadow = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)";
+        style: {
+          position: "fixed",
+          bottom: `${dragPos.y}px`,
+          ...isRight ? { right: `${dragPos.x}px` } : { left: `${dragPos.x}px` },
+          zIndex: 9999,
+          display: "flex",
+          alignItems: "center",
+          gap: "0"
         },
-        "aria-label": "Open theme editor",
-        children: /* @__PURE__ */ jsx(PaletteIcon6, {})
+        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, {})
+            }
+          )
+        ]
       }
     ),
     /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
@@ -27762,6 +27371,7 @@ function ThemeDrawer({
                       fontSize: "13px",
                       color: "#6b7280",
                       marginTop: "2px",
+                      marginBottom: "4px",
                       fontFamily: drawerStyles.container.fontFamily
                     },
                     children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"