canvas-ui-sdk 0.3.17 → 0.3.18

package/dist/index.js

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React14 from 'react';
-import React14__default, { createContext, useState, useContext, useEffect, useRef, Children, useMemo, useCallback } from 'react';
+import React14__default, { createContext, useState, useContext, useEffect, useRef, Children, useMemo, useCallback, useLayoutEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { Check, Calendar as Calendar$1, Upload, FileText, Trash2, ChevronLeft, ChevronRight, X, Search, Layout, Settings, User, LogIn, List, MessageSquare, CreditCard, Video, Play, Table, LayoutGrid, Layers, SlidersHorizontal, Type, Users, Image, Star, Award, Hash, MapPin, Megaphone, Newspaper, Building, Square, CheckSquare, ToggleLeft, CircleDot, Tags, Key, Bell, Home, PieChart, ShoppingBag, Mail, Phone, MessageCircle, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, XIcon, CheckIcon, CircleIcon, ChevronUpIcon, PanelLeftIcon, Info, ShoppingCart, LogOut, Menu, ChevronDown, Filter, Wand2, Paperclip, MoreHorizontal, PenSquare, Briefcase as Briefcase$1, MoreVertical, Minus, Plus, Instagram, Linkedin, Twitter, Facebook, Globe as Globe$1, DollarSign, BookOpen, Eye, CheckCircle, Zap, Camera as Camera$1, VideoOff, Mic, MicOff, Cast, Pencil, GripHorizontal, ChevronUp, Sparkles, Copy, ArrowRight, GitBranch, FileBox, ExternalLink, Target as Target$1, AlertCircle, Quote, GripVertical, ArrowUp, Heart as Heart$1, Link2, FolderPlus, ThumbsUp, ChevronsRight, ChevronsLeft, RefreshCw, Send, Bookmark } from 'lucide-react';
@@ -461,7 +461,7 @@ var Checkbox = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__
     ref,
     className: cn(
       "peer size-4 shrink-0 rounded-[var(--radius-xs)] border border-[var(--canvas-border-input)]",
-      "bg-[var(--canvas-background)] transition-colors",
+      "bg-[var(--canvas-background)] transition-colors cursor-pointer",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
       "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
       "data-[state=checked]:bg-[var(--canvas-primary)] data-[state=checked]:border-[var(--canvas-primary)]",
@@ -613,7 +613,7 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
               children: [
                 /* @__PURE__ */ jsx(XIcon, {}),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
@@ -731,7 +731,7 @@ function DropdownMenuItem({
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -749,7 +749,7 @@ function DropdownMenuCheckboxItem({
     {
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       checked,
@@ -782,7 +782,7 @@ function DropdownMenuRadioItem({
     {
       "data-slot": "dropdown-menu-radio-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -857,7 +857,7 @@ function DropdownMenuSubTrigger({
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
@@ -1067,7 +1067,7 @@ var FileUploader = React14.forwardRef(
                         onClick: () => handleDelete(file.id),
                         disabled,
                         className: cn(
-                          "shrink-0 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-destructive)] transition-colors",
+                          "cursor-pointer shrink-0 text-[var(--canvas-text-muted)] hover:text-[var(--canvas-destructive)] transition-colors",
                           disabled && "opacity-60 cursor-not-allowed"
                         ),
                         children: /* @__PURE__ */ jsx(Trash2, { style: { width: "16px", height: "16px" } })
@@ -1238,7 +1238,7 @@ var ImageUploader = React14.forwardRef(
                   "div",
                   {
                     className: cn(
-                      "flex flex-col shrink-0 rounded-[var(--radius-xs)] border overflow-hidden",
+                      "cursor-pointer flex flex-col shrink-0 rounded-[var(--radius-xs)] border overflow-hidden",
                       isSelected ? "border-[var(--canvas-primary)]" : "border-[var(--canvas-border)]"
                     ),
                     onClick: () => onSelectImage?.(image.id),
@@ -1284,7 +1284,7 @@ var ImageUploader = React14.forwardRef(
                                 },
                                 disabled: disabled || isFirst,
                                 className: cn(
-                                  "flex items-center justify-center rounded-full transition-colors",
+                                  "cursor-pointer flex items-center justify-center rounded-full transition-colors",
                                   isFirst || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)]"
                                 ),
                                 style: { width: "24px", height: "24px" },
@@ -1301,7 +1301,7 @@ var ImageUploader = React14.forwardRef(
                                 },
                                 disabled: disabled || isLast,
                                 className: cn(
-                                  "flex items-center justify-center rounded-full transition-colors",
+                                  "cursor-pointer flex items-center justify-center rounded-full transition-colors",
                                   isLast || disabled ? "bg-[var(--canvas-surface)] border border-[var(--canvas-border)] text-[var(--canvas-text-muted)]" : "bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)]"
                                 ),
                                 style: { width: "24px", height: "24px" },
@@ -1317,7 +1317,7 @@ var ImageUploader = React14.forwardRef(
                                   handleDelete(image.id);
                                 },
                                 disabled,
-                                className: "flex items-center justify-center rounded-full bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)] transition-colors",
+                                className: "cursor-pointer flex items-center justify-center rounded-full bg-[var(--canvas-text)] text-[var(--canvas-primary-foreground)] transition-colors",
                                 style: { width: "24px", height: "24px" },
                                 children: /* @__PURE__ */ jsx(Trash2, { style: { width: "16px", height: "16px" } })
                               }
@@ -1449,7 +1449,7 @@ var MultiselectCheckboxField = React14.forwardRef(
               onClick: () => handleToggle(option.id),
               disabled,
               className: cn(
-                "flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors",
+                "cursor-pointer flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors",
                 "focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]",
                 isSelected ? "border-[var(--canvas-primary)]" : "border-[var(--canvas-border-input)]",
                 disabled && "cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)] opacity-60"
@@ -1652,7 +1652,7 @@ function RadioGroupItem({
     {
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-[var(--canvas-background)] transition-colors",
+        "cursor-pointer aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-[var(--canvas-background)] transition-colors",
         "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
         "aria-invalid:border-[var(--canvas-border-input-invalid)] aria-invalid:ring-[var(--canvas-border-input-invalid)]/20",
         "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
@@ -1871,7 +1871,7 @@ var Searchbox = React14.forwardRef(
 Searchbox.displayName = "Searchbox";
 var selectTriggerVariants = cva(
   // Base styles using CSS variables
-  "flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
+  "cursor-pointer flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
   {
     variants: {
       inputSize: {
@@ -1979,7 +1979,7 @@ function SelectItem({
     {
       "data-slot": "select-item",
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 font-[family-name:var(--typo-global-font)]",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 font-[family-name:var(--typo-global-font)]",
         className
       ),
       ...props,
@@ -2198,7 +2198,7 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "cursor-pointer ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
             /* @__PURE__ */ jsx(XIcon, { className: "size-4" }),
             /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
           ] })
@@ -2988,7 +2988,7 @@ var Slider = React14.forwardRef(({
             SliderPrimitive.Thumb,
             {
               className: cn(
-                "block rounded-full border-2 border-[var(--canvas-background)] bg-[var(--canvas-primary)]",
+                "cursor-grab active:cursor-grabbing block rounded-full border-2 border-[var(--canvas-background)] bg-[var(--canvas-primary)]",
                 "shadow-[0px_1px_2px_0px_rgba(0,0,0,0.08)]",
                 "ring-offset-background transition-colors",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
@@ -3023,7 +3023,7 @@ function Switch({
     {
       "data-slot": "switch",
       className: cn(
-        "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-colors",
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
         "data-[state=checked]:bg-[var(--canvas-primary)] data-[state=unchecked]:bg-[var(--canvas-border)]",
         "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
         "disabled:cursor-not-allowed disabled:data-[state=checked]:bg-[var(--canvas-input-disabled-text)] disabled:data-[state=unchecked]:bg-[var(--canvas-input-disabled-border)]",
@@ -5947,7 +5947,7 @@ function FilterPopover({
     "button",
     {
       className: cn(
-        "flex items-center justify-between gap-2 bg-[var(--canvas-background)] border text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 data-[state=open]:border-[var(--canvas-border-input-focus)]",
+        "cursor-pointer flex items-center justify-between gap-2 bg-[var(--canvas-background)] border text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 data-[state=open]:border-[var(--canvas-border-input-focus)]",
         className
       ),
       style: {
@@ -8809,7 +8809,7 @@ function MenufocusTemplate({
       "button",
       {
         className: cn(
-          "flex items-center justify-center rounded-full hover:bg-[var(--canvas-surface)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2",
+          "cursor-pointer flex items-center justify-center rounded-full hover:bg-[var(--canvas-surface)] transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--canvas-primary)] focus:ring-offset-2",
           buttonSize,
           className
         ),
@@ -8936,6 +8936,7 @@ function StandardDataTable({
           /* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs(
             "tr",
             {
+              className: "hover:bg-[var(--canvas-surface)] transition-colors",
               style: { borderBottom: "1px solid var(--canvas-border)" },
               children: [
                 /* @__PURE__ */ jsx(
@@ -9210,6 +9211,7 @@ function FixedColumnDataTable({
           /* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs(
             "tr",
             {
+              className: "hover:bg-[var(--canvas-surface)] transition-colors",
               style: { borderBottom: "1px solid var(--canvas-border)" },
               children: [
                 /* @__PURE__ */ jsx(TableCell2, { isFixed: true, className: "pr-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -9430,7 +9432,7 @@ function NestedTable({ children, onChildAction }) {
         children.map((child, index) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "grid items-center",
+            className: "grid items-center hover:bg-[var(--canvas-surface)] transition-colors rounded-sm",
             style: {
               borderBottom: index < children.length - 1 ? "1px solid var(--canvas-border)" : "none",
               padding: "var(--spacing-md) 0",
@@ -9450,7 +9452,7 @@ function NestedTable({ children, onChildAction }) {
                 "button",
                 {
                   onClick: () => onChildAction?.("view", child),
-                  className: "flex items-center justify-center size-8 rounded-full hover:bg-[var(--canvas-surface)] transition-colors",
+                  className: "cursor-pointer flex items-center justify-center size-8 rounded-full hover:bg-[var(--canvas-surface)] transition-colors",
                   "aria-label": `View ${child.name}`,
                   children: /* @__PURE__ */ jsx(Eye, { size: 20, style: { color: "var(--canvas-text-muted)" } })
                 }
@@ -9530,7 +9532,7 @@ function NestedDataTable({
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
-                      className: "grid items-center",
+                      className: "grid items-center hover:bg-[var(--canvas-surface)] transition-colors rounded-sm",
                       style: {
                         padding: "var(--spacing-md) 0",
                         minHeight: "64px",
@@ -10573,7 +10575,7 @@ function CommentInput2({
             "button",
             {
               type: "button",
-              className: "absolute right-3 top-1/2 -translate-y-1/2",
+              className: "cursor-pointer absolute right-3 top-1/2 -translate-y-1/2",
               style: { color: "var(--canvas-text-placeholder)" },
               children: /* @__PURE__ */ jsx(Paperclip, { className: "w-5 h-5" })
             }
@@ -10605,7 +10607,7 @@ function CommentActions2({
           {
             type: "button",
             onClick: onReply,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10622,7 +10624,7 @@ function CommentActions2({
           {
             type: "button",
             onClick: onLike,
-            className: "flex items-center",
+            className: "cursor-pointer flex items-center",
             style: {
               gap: "var(--spacing-sm)",
               fontFamily: "var(--typo-body-s-font, var(--typo-global-font))",
@@ -10805,6 +10807,7 @@ function CommentItem({
                 "button",
                 {
                   type: "button",
+                  className: "cursor-pointer",
                   onClick: () => setShowReplies(!showReplies),
                   style: {
                     fontFamily: "var(--typo-body-xs-font, var(--typo-global-font))",
@@ -13905,7 +13908,7 @@ function ControlButton({ icon, onClick, isActive = true, label }) {
       onClick,
       "aria-label": label,
       className: cn(
-        "w-10 h-10 rounded-full flex items-center justify-center",
+        "cursor-pointer w-10 h-10 rounded-full flex items-center justify-center",
         "shadow-sm transition-colors",
         isActive ? "bg-[var(--canvas-sidebar-light-text)] text-[var(--canvas-primary-foreground)] hover:opacity-80" : "bg-[var(--canvas-destructive)] text-[var(--canvas-primary-foreground)] hover:opacity-80"
       ),
@@ -14088,7 +14091,7 @@ function VideoPlaylistCard({
           "button",
           {
             type: "button",
-            className: "flex items-center gap-2 p-4 border-b border-[var(--canvas-border)] text-left w-full",
+            className: "cursor-pointer flex items-center gap-2 p-4 border-b border-[var(--canvas-border)] text-left w-full",
             onClick: () => setIsCollapsed(!isCollapsed),
             children: [
               /* @__PURE__ */ jsx("div", { className: "w-4 h-4 shrink-0 flex items-center justify-center", children: isCollapsed ? /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 text-[var(--canvas-text)]" }) : /* @__PURE__ */ jsx(Minus, { className: "w-4 h-4 text-[var(--canvas-text)]" }) }),
@@ -23307,7 +23310,17 @@ var brandColorVars = [
   "--canvas-sidebar-dark-active-bg",
   "--canvas-sidebar-dark-text",
   "--canvas-sidebar-dark-border",
-  "--canvas-border-input-focus"
+  "--canvas-border-input-focus",
+  // Button colors that track primary
+  "--btn-primary-bg",
+  "--btn-primary-border",
+  "--btn-primary-bg-hover",
+  "--btn-primary-border-hover",
+  "--btn-primary-outline-text",
+  "--btn-primary-outline-border",
+  "--btn-primary-outline-text-hover",
+  "--btn-primary-outline-border-hover",
+  "--btn-primary-neutral-bg-hover"
 ];
 function isEqual(a, b) {
   if (a === b) return true;
@@ -23640,11 +23653,17 @@ function useThemeState(options) {
       setOverrides((prev) => {
         const effectivePrimaryColor = newValues["--canvas-primary"] || prev["--canvas-primary"] || defaultColors["--canvas-primary"];
         varsToUpdate.forEach((varName) => {
-          if (varName === "--canvas-sidebar-light-active-text" || varName === "--canvas-border-input-focus") {
+          if (varName === "--canvas-sidebar-light-active-text" || varName === "--canvas-border-input-focus" || varName === "--btn-primary-bg" || varName === "--btn-primary-border" || varName === "--btn-primary-outline-text" || varName === "--btn-primary-outline-border" || varName === "--btn-primary-outline-text-hover" || varName === "--btn-primary-outline-border-hover" || varName === "--btn-primary-neutral-bg-hover") {
             newValues[varName] = effectivePrimaryColor;
             (document.body ?? document.documentElement).style.setProperty(varName, effectivePrimaryColor);
             return;
           }
+          if (varName === "--btn-primary-bg-hover" || varName === "--btn-primary-border-hover") {
+            const primaryDarkColor = newValues["--canvas-primary-dark"] || prev["--canvas-primary-dark"] || defaultColors["--canvas-primary-dark"];
+            newValues[varName] = primaryDarkColor;
+            (document.body ?? document.documentElement).style.setProperty(varName, primaryDarkColor);
+            return;
+          }
           if (varName === "--canvas-primary") return;
           const defaultColor = defaultColors[varName];
           if (!defaultColor || !defaultColor.startsWith("#")) return;
@@ -23693,6 +23712,9 @@ function useThemeState(options) {
   const isDirty = useMemo(() => {
     return !isEqual(overrides, savedOverrides) || !isEqual(branding, savedBranding) || !isEqual(images, savedImages) || !isEqual(customButtonStyles, savedCustomButtonStyles);
   }, [overrides, savedOverrides, branding, savedBranding, images, savedImages, customButtonStyles, savedCustomButtonStyles]);
+  const hasCustomizations = useMemo(() => {
+    return Object.keys(savedOverrides).length > 0 || !isEqual(savedBranding, defaultBranding) || !isEqual(savedImages, defaultImages) || !isEqual(savedCustomButtonStyles, defaultCustomButtonStyles);
+  }, [savedOverrides, savedBranding, savedImages, savedCustomButtonStyles]);
   const unsavedChangesCount = useMemo(() => {
     let count = 0;
     const allKeys = /* @__PURE__ */ new Set([...Object.keys(overrides), ...Object.keys(savedOverrides)]);
@@ -23732,7 +23754,8 @@ function useThemeState(options) {
     setBrandHue,
     setBrandVibrancy,
     setSyncRelatedColors,
-    applyBrandHueVibrancy
+    applyBrandHueVibrancy,
+    hasCustomizations
   };
 }
 function HslColorPicker({ value, onChange }) {
@@ -24251,7 +24274,6 @@ function ColorsPanel({ theme }) {
       {
         style: {
           padding: "12px",
-          background: "#f9fafb",
           borderRadius: "8px",
           border: "1px solid #e5e7eb"
         },
@@ -24537,7 +24559,6 @@ function ImagesPanel({ theme, onImageUpload }) {
             gap: "12px",
             marginBottom: "16px",
             padding: "16px",
-            background: "#f9fafb",
             borderRadius: "8px",
             border: "1px solid #e5e7eb"
           },
@@ -24690,7 +24711,10 @@ function ImagesPanel({ theme, onImageUpload }) {
             style: {
               display: "grid",
               gridTemplateColumns: "repeat(8, 1fr)",
-              gap: "4px"
+              gap: "4px",
+              border: "1px solid #e5e7eb",
+              borderRadius: "8px",
+              padding: "6px"
             },
             children: logoIcons.map((icon) => {
               const isSelected = theme.branding.iconName === icon.name;
@@ -24816,7 +24840,6 @@ function ImageUploadRow({
         alignItems: "center",
         gap: "10px",
         padding: "8px 10px",
-        background: "#f9fafb",
         borderRadius: "6px",
         border: "1px solid #e5e7eb"
       },
@@ -24982,7 +25005,7 @@ function TypographyPanel({ theme }) {
   }, []);
   const globalFont = theme.variables["--typo-global-font"] || "Inter";
   return /* @__PURE__ */ jsxs("div", { "data-theme-drawer-panel": true, className: "p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 bg-[var(--canvas-surface)] rounded-lg border border-[var(--canvas-border)] mb-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 rounded-lg border border-[var(--canvas-border)] mb-5", children: [
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--canvas-text)]", children: "Global Font" }),
         /* @__PURE__ */ jsx("div", { className: "text-[11px] text-[var(--canvas-text-muted)] mt-0.5", children: "Default font for all text styles" })
@@ -26043,12 +26066,9 @@ var drawerStyles = {
   },
   tabBar: {
     display: "flex",
-    background: "#f2f2f2",
-    padding: "3px",
-    gap: "2px",
+    gap: "8px",
     flexShrink: 0,
     overflowX: "auto",
-    borderRadius: "8px",
     margin: "0 16px 8px"
   },
   tab: (active) => ({
@@ -26056,7 +26076,7 @@ var drawerStyles = {
     fontSize: "12px",
     fontWeight: 500,
     color: active ? "#ffffff" : "#6b7280",
-    background: active ? "#171717" : "transparent",
+    background: active ? "#171717" : "#f3f4f6",
     border: "none",
     borderRadius: "6px",
     cursor: "pointer",
@@ -26112,7 +26132,10 @@ function ThemeDrawer({
   storageKey,
   title = "Design Variables",
   width = 464,
-  readOnly = false
+  readOnly = false,
+  docked = false,
+  stickyTopOffset = 0,
+  children
 }) {
   if (devOnly && process.env.NODE_ENV === "production") {
     return null;
@@ -26158,6 +26181,8 @@ function ThemeDrawer({
     },
     []
   );
+  const contentRef = useRef(null);
+  const prevOverrideKeysRef = useRef(/* @__PURE__ */ new Set());
   const theme = useThemeState({
     storageKey,
     initialOverrides,
@@ -26207,73 +26232,380 @@ function ThemeDrawer({
     setResetConfirmOpen(false);
   }, [theme, setPreviewBranding, setPreviewImages]);
   const activePanels = enabledPanels ? panelConfig.filter((p) => enabledPanels.includes(p.id)) : panelConfig;
-  const showFooter = !readOnly && (theme.isDirty || resetConfirmOpen);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !open && /* @__PURE__ */ jsxs(
+  const showFooter = !readOnly && (theme.isDirty || resetConfirmOpen || theme.hasCustomizations);
+  useEffect(() => {
+    if (!docked || !open) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        handleOpenChange(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [docked, open, handleOpenChange]);
+  useLayoutEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    const currentKeys = new Set(Object.keys(theme.overrides));
+    prevOverrideKeysRef.current.forEach((key) => {
+      if (!currentKeys.has(key)) {
+        el.style.removeProperty(key);
+      }
+    });
+    Object.entries(theme.overrides).forEach(([name, value]) => {
+      el.style.setProperty(name, value);
+    });
+    prevOverrideKeysRef.current = currentKeys;
+  }, [theme.overrides]);
+  const scrollHeight = docked ? `calc(100vh - ${stickyTopOffset}px - ${showFooter ? 200 : 150}px)` : `calc(100vh - ${showFooter ? 200 : 150}px)`;
+  const tabBar = /* @__PURE__ */ jsx("div", { style: drawerStyles.tabBar, children: activePanels.map((panel) => {
+    const isActive = activeTab === panel.id;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setActiveTab(panel.id),
+        style: drawerStyles.tab(isActive),
+        onMouseEnter: (e) => {
+          if (!isActive) {
+            e.currentTarget.style.background = "#e5e7eb";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (!isActive) {
+            e.currentTarget.style.background = "#f3f4f6";
+          }
+        },
+        children: panel.label
+      },
+      panel.id
+    );
+  }) });
+  const panelContent = /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      className: "flex-1 overflow-hidden",
+      style: { height: scrollHeight },
+      children: /* @__PURE__ */ jsxs("div", { style: drawerStyles.container, children: [
+        activeTab === "colors" && /* @__PURE__ */ jsx(ColorsPanel, { theme }),
+        activeTab === "images" && /* @__PURE__ */ jsx(ImagesPanel, { theme, onImageUpload }),
+        activeTab === "typography" && /* @__PURE__ */ jsx(TypographyPanel, { theme }),
+        activeTab === "buttons" && /* @__PURE__ */ jsx(ButtonsPanel, { theme }),
+        activeTab === "inputs" && /* @__PURE__ */ jsx(InputsPanel, { theme }),
+        activeTab === "export" && /* @__PURE__ */ jsx(ExportPanel, { theme })
+      ] })
+    }
+  );
+  const footerContent = showFooter ? /* @__PURE__ */ jsx("div", { style: drawerStyles.footer, children: resetConfirmOpen ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: "13px",
+              color: "#374151",
+              textAlign: "center"
+            },
+            children: "Reset all settings to defaults?"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "8px",
+              justifyContent: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setResetConfirmOpen(false),
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "#374151",
+                    background: "#ffffff",
+                    border: "1px solid #e5e7eb",
+                    cursor: "pointer",
+                    padding: "6px 16px",
+                    borderRadius: "6px"
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleReset,
+                  style: {
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "#ffffff",
+                    background: "#dc2626",
+                    border: "1px solid #dc2626",
+                    cursor: "pointer",
+                    padding: "6px 16px",
+                    borderRadius: "6px"
+                  },
+                  children: "Reset All"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    theme.isDirty && /* @__PURE__ */ jsxs(
       "div",
       {
         style: {
-          position: "fixed",
-          bottom: `${dragPos.y}px`,
-          ...isRight ? { right: `${dragPos.x}px` } : { left: `${dragPos.x}px` },
-          zIndex: 9999,
           display: "flex",
-          alignItems: "center",
-          gap: "0"
+          gap: "8px",
+          width: "100%"
         },
         children: [
           /* @__PURE__ */ jsx(
-            "div",
+            "button",
             {
-              onPointerDown: handleDragPointerDown,
-              onPointerMove: handleDragPointerMove,
-              onPointerUp: handleDragPointerUp,
+              onClick: handleDiscard,
               style: {
-                cursor: "grab",
-                padding: "4px 2px",
-                display: "flex",
-                alignItems: "center",
-                opacity: 0.25,
-                touchAction: "none"
+                flex: 1,
+                fontSize: "13px",
+                fontWeight: 500,
+                color: "#374151",
+                background: "#ffffff",
+                border: "1px solid #e5e7eb",
+                cursor: "pointer",
+                padding: "8px 16px",
+                borderRadius: "6px"
               },
-              children: /* @__PURE__ */ jsx(GripVertical, { size: 12, color: "#9ca3af" })
+              children: "Discard"
             }
           ),
           /* @__PURE__ */ jsx(
             "button",
             {
-              onClick: () => setOpen(true),
+              onClick: handleSave,
               style: {
-                width: "36px",
-                height: "36px",
-                borderRadius: "10px",
-                background: "#ffffff",
-                color: "#6b7280",
-                border: "1px solid #e5e7eb",
+                flex: 1,
+                fontSize: "13px",
+                fontWeight: 600,
+                color: "#ffffff",
+                background: "#1f2937",
+                border: "1px solid #1f2937",
                 cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)",
-                transition: "transform 150ms, box-shadow 150ms, border-color 150ms"
-              },
-              onMouseEnter: (e) => {
-                e.currentTarget.style.transform = "scale(1.06)";
-                e.currentTarget.style.boxShadow = "0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)";
-                e.currentTarget.style.borderColor = "#d1d5db";
+                padding: "8px 16px",
+                borderRadius: "6px"
               },
-              onMouseLeave: (e) => {
-                e.currentTarget.style.transform = "scale(1)";
-                e.currentTarget.style.boxShadow = "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)";
-                e.currentTarget.style.borderColor = "#e5e7eb";
-              },
-              "aria-label": "Open theme editor",
-              children: /* @__PURE__ */ jsx(PaletteIcon6, {})
+              children: "Save"
             }
           )
         ]
       }
     ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setResetConfirmOpen(true),
+        style: {
+          fontSize: "12px",
+          fontWeight: 400,
+          color: "#9ca3af",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: "2px 0",
+          textAlign: "center",
+          textDecoration: "underline",
+          textUnderlineOffset: "2px"
+        },
+        children: "Reset all to defaults"
+      }
+    )
+  ] }) }) : null;
+  const headerBlock = /* @__PURE__ */ jsxs("div", { style: { padding: "16px 0 0" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: "16px",
+          fontWeight: 700,
+          color: "#1f2937",
+          fontFamily: drawerStyles.container.fontFamily
+        },
+        children: title
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          fontSize: "13px",
+          color: "#6b7280",
+          marginTop: "2px",
+          marginBottom: "12px",
+          fontFamily: drawerStyles.container.fontFamily
+        },
+        children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"
+      }
+    )
+  ] });
+  const triggerButton = !open && /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: `${dragPos.y}px`,
+        ...isRight ? { right: `${dragPos.x}px` } : { left: `${dragPos.x}px` },
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        gap: "0"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onPointerDown: handleDragPointerDown,
+            onPointerMove: handleDragPointerMove,
+            onPointerUp: handleDragPointerUp,
+            style: {
+              cursor: "grab",
+              padding: "4px 2px",
+              display: "flex",
+              alignItems: "center",
+              opacity: 0.25,
+              touchAction: "none"
+            },
+            children: /* @__PURE__ */ jsx(GripVertical, { size: 12, color: "#9ca3af" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setOpen(true),
+            style: {
+              width: "36px",
+              height: "36px",
+              borderRadius: "10px",
+              background: "#ffffff",
+              color: "#6b7280",
+              border: "1px solid #e5e7eb",
+              cursor: "pointer",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)",
+              transition: "transform 150ms, box-shadow 150ms, border-color 150ms"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.transform = "scale(1.06)";
+              e.currentTarget.style.boxShadow = "0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)";
+              e.currentTarget.style.borderColor = "#d1d5db";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "scale(1)";
+              e.currentTarget.style.boxShadow = "0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)";
+              e.currentTarget.style.borderColor = "#e5e7eb";
+            },
+            "aria-label": "Open theme editor",
+            children: /* @__PURE__ */ jsx(PaletteIcon6, {})
+          }
+        )
+      ]
+    }
+  );
+  const dockedAside = /* @__PURE__ */ jsx(
+    "aside",
+    {
+      "data-theme-drawer": true,
+      style: {
+        width: open ? `${width}px` : "0px",
+        transition: "width 300ms cubic-bezier(0.4, 0, 0.2, 1)",
+        overflow: "hidden",
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            width: `${width}px`,
+            height: `calc(100vh - ${stickyTopOffset}px)`,
+            position: "sticky",
+            top: `${stickyTopOffset}px`,
+            display: "flex",
+            flexDirection: "column",
+            borderLeft: "1px solid #e5e7eb",
+            background: "#ffffff",
+            ...drawerStyles.container
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => handleOpenChange(false),
+                style: {
+                  position: "absolute",
+                  top: 16,
+                  right: 16,
+                  width: 24,
+                  height: 24,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: "transparent",
+                  border: "none",
+                  cursor: "pointer",
+                  opacity: 0.5,
+                  transition: "opacity 150ms",
+                  zIndex: 10
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.opacity = "1";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.opacity = "0.5";
+                },
+                "aria-label": "Close theme editor",
+                children: /* @__PURE__ */ jsx(XIcon, { size: 16, color: "#6b7280" })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 12px", background: "#ffffff" }, children: headerBlock }),
+            tabBar,
+            panelContent,
+            footerContent
+          ]
+        }
+      )
+    }
+  );
+  if (docked && children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      triggerButton,
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", minHeight: "100vh" }, children: [
+        /* @__PURE__ */ jsx("div", { ref: contentRef, style: { flex: 1, minWidth: 0, overflow: "auto", transform: "translateZ(0)" }, children }),
+        dockedAside
+      ] })
+    ] });
+  }
+  if (docked) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      triggerButton,
+      dockedAside
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerButton,
     /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(
       SheetContent,
       {
@@ -26286,7 +26618,7 @@ function ThemeDrawer({
           maxWidth: `${width}px`
         },
         children: [
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             SheetHeader,
             {
               className: "!p-0",
@@ -26294,197 +26626,16 @@ function ThemeDrawer({
                 padding: "16px 16px 12px",
                 background: "#ffffff"
               },
-              children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px 16px 0" }, children: [
-                /* @__PURE__ */ jsx(
-                  SheetTitle,
-                  {
-                    style: {
-                      fontSize: "16px",
-                      fontWeight: 700,
-                      color: "#1f2937",
-                      fontFamily: drawerStyles.container.fontFamily
-                    },
-                    children: title
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SheetDescription,
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: "#6b7280",
-                      marginTop: "2px",
-                      marginBottom: "12px",
-                      fontFamily: drawerStyles.container.fontFamily
-                    },
-                    children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"
-                  }
-                )
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { style: drawerStyles.tabBar, children: activePanels.map((panel) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: () => setActiveTab(panel.id),
-              style: drawerStyles.tab(activeTab === panel.id),
-              children: panel.label
-            },
-            panel.id
-          )) }),
-          /* @__PURE__ */ jsx(
-            ScrollArea,
-            {
-              className: "flex-1 overflow-hidden",
-              style: { height: `calc(100vh - ${showFooter ? 200 : 150}px)` },
-              children: /* @__PURE__ */ jsxs("div", { style: drawerStyles.container, children: [
-                activeTab === "colors" && /* @__PURE__ */ jsx(ColorsPanel, { theme }),
-                activeTab === "images" && /* @__PURE__ */ jsx(ImagesPanel, { theme, onImageUpload }),
-                activeTab === "typography" && /* @__PURE__ */ jsx(TypographyPanel, { theme }),
-                activeTab === "buttons" && /* @__PURE__ */ jsx(ButtonsPanel, { theme }),
-                activeTab === "inputs" && /* @__PURE__ */ jsx(InputsPanel, { theme }),
-                activeTab === "export" && /* @__PURE__ */ jsx(ExportPanel, { theme })
-              ] })
-            }
-          ),
-          showFooter && /* @__PURE__ */ jsx("div", { style: drawerStyles.footer, children: resetConfirmOpen ? /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                display: "flex",
-                flexDirection: "column",
-                gap: "8px",
-                width: "100%"
-              },
               children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: "13px",
-                      color: "#374151",
-                      textAlign: "center"
-                    },
-                    children: "Reset all settings to defaults?"
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    style: {
-                      display: "flex",
-                      gap: "8px",
-                      justifyContent: "center"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: () => setResetConfirmOpen(false),
-                          style: {
-                            fontSize: "13px",
-                            fontWeight: 500,
-                            color: "#374151",
-                            background: "#ffffff",
-                            border: "1px solid #e5e7eb",
-                            cursor: "pointer",
-                            padding: "6px 16px",
-                            borderRadius: "6px"
-                          },
-                          children: "Cancel"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "button",
-                        {
-                          onClick: handleReset,
-                          style: {
-                            fontSize: "13px",
-                            fontWeight: 500,
-                            color: "#ffffff",
-                            background: "#dc2626",
-                            border: "1px solid #dc2626",
-                            cursor: "pointer",
-                            padding: "6px 16px",
-                            borderRadius: "6px"
-                          },
-                          children: "Reset All"
-                        }
-                      )
-                    ]
-                  }
-                )
+                /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: title }),
+                /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Customize your design system" }),
+                headerBlock
               ]
             }
-          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  gap: "8px",
-                  width: "100%"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: handleDiscard,
-                      style: {
-                        flex: 1,
-                        fontSize: "13px",
-                        fontWeight: 500,
-                        color: "#374151",
-                        background: "#ffffff",
-                        border: "1px solid #e5e7eb",
-                        cursor: "pointer",
-                        padding: "8px 16px",
-                        borderRadius: "6px"
-                      },
-                      children: "Discard"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: handleSave,
-                      style: {
-                        flex: 1,
-                        fontSize: "13px",
-                        fontWeight: 600,
-                        color: "#ffffff",
-                        background: "#1f2937",
-                        border: "1px solid #1f2937",
-                        cursor: "pointer",
-                        padding: "8px 16px",
-                        borderRadius: "6px"
-                      },
-                      children: "Save"
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => setResetConfirmOpen(true),
-                style: {
-                  fontSize: "12px",
-                  fontWeight: 400,
-                  color: "#9ca3af",
-                  background: "none",
-                  border: "none",
-                  cursor: "pointer",
-                  padding: "2px 0",
-                  textAlign: "center",
-                  textDecoration: "underline",
-                  textUnderlineOffset: "2px"
-                },
-                children: "Reset all to defaults"
-              }
-            )
-          ] }) })
+          ),
+          tabBar,
+          panelContent,
+          footerContent
         ]
       }
     ) })