canvas-ui-sdk 0.3.12 → 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"
             }
@@ -26342,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))
     ] })
   ] });
 }
@@ -26646,152 +26640,6 @@ function ButtonColorGroup({
     )
   ] });
 }
-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"
-            )
-          }
-        )
-      ] })
-    ] }),
-    /* @__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: style.bg,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { bg: val }),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Text",
-                  value: style.text,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { text: val }),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Border",
-                  value: style.border,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { 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: style.bgHover,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { bgHover: val }),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Text",
-                  value: style.textHover,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { textHover: val }),
-                  variableOptions: buttonColorVariableOptions
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ColorInputRow,
-                {
-                  label: "Border",
-                  value: style.borderHover,
-                  onChange: (val) => theme.updateCustomButtonStyle(style.id, { borderHover: val }),
-                  variableOptions: buttonColorVariableOptions
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    )
-  ] });
-}
 var inputSizeConfigs = [
   { id: "small", label: "Small", description: "Compact inputs (30px)", prefix: "--input-small" },
   { id: "standard", label: "Standard", description: "Default inputs (40px)", prefix: "--input-standard" },
@@ -27249,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"
@@ -27280,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",
@@ -27304,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",
@@ -27346,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,
@@ -27397,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(
@@ -27455,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"