@webdevarif/dashui 1.2.3 → 1.2.6

package/dist/index.js

@@ -57,6 +57,7 @@ __export(index_exports, {
   ColorPickerHue: () => ColorPickerHue,
   ColorPickerOutput: () => ColorPickerOutput,
   ColorPickerSelection: () => ColorPickerSelection,
+  ColorSchemaPanel: () => ColorSchemaPanel,
   ConfirmDialog: () => ConfirmDialog,
   DEVICES: () => DEVICES,
   DEVICE_ICONS: () => DEVICE_ICONS,
@@ -136,6 +137,7 @@ __export(index_exports, {
   TabsList: () => TabsList,
   TabsTrigger: () => TabsTrigger,
   Textarea: () => Textarea,
+  ThemeBuilder: () => ThemeBuilder,
   ThemeProvider: () => import_next_themes2.ThemeProvider,
   ThemeToggle: () => ThemeToggle,
   TiptapEditor: () => TiptapEditor,
@@ -144,6 +146,7 @@ __export(index_exports, {
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
   TopBar: () => TopBar,
+  TypographyPanel: () => TypographyPanel,
   UploadProgressPanel: () => UploadProgressPanel,
   UploadZone: () => UploadZone,
   badgeVariants: () => badgeVariants,
@@ -3869,10 +3872,347 @@ function ToolbarButton({
   );
 }
 
-// src/hooks/index.ts
+// src/components/cms/theme-builder.tsx
 var import_react8 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function ThemeBuilder({ theme, onSave, onPreviewUpdate, previewUrl }) {
+  const [sidebarTab, setSidebarTab] = (0, import_react8.useState)("variables");
+  const [iframeLoaded, setIframeLoaded] = (0, import_react8.useState)(false);
+  const iframeRef = (0, import_react8.useRef)(null);
+  const handleSave = (0, import_react8.useCallback)(() => {
+    onSave(theme);
+  }, [theme, onSave]);
+  const handlePreviewReload = (0, import_react8.useCallback)(() => {
+    if (iframeRef.current) {
+      iframeRef.current.src = previewUrl || "about:blank";
+    }
+  }, [previewUrl]);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex h-screen bg-[#0f1117] text-white overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "w-11 bg-[#010409] border-r border-white/10 flex flex-col items-center py-4 gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "button",
+        {
+          onClick: () => setSidebarTab("ai"),
+          title: "AI Assistant",
+          className: `p-2 rounded transition-colors ${sidebarTab === "ai" ? "bg-[#287f71]/20 text-[#287f71]" : "text-white/40 hover:text-white/60"}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "button",
+        {
+          onClick: () => setSidebarTab("variables"),
+          title: "Variables",
+          className: `p-2 rounded transition-colors ${sidebarTab === "variables" ? "bg-[#287f71]/20 text-[#287f71]" : "text-white/40 hover:text-white/60"}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("circle", { cx: "6", cy: "6", r: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("circle", { cx: "12", cy: "12", r: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("circle", { cx: "18", cy: "18", r: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M8 8l8 8M6 18l12-12" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "button",
+        {
+          onClick: () => setSidebarTab("styles"),
+          title: "Styles",
+          className: `p-2 rounded transition-colors ${sidebarTab === "styles" ? "bg-[#287f71]/20 text-[#287f71]" : "text-white/40 hover:text-white/60"}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M3 6h18M3 12h18M3 18h18" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "w-80 bg-[#13151e] border-r border-white/10 overflow-y-auto p-4", children: [
+      sidebarTab === "variables" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h2", { className: "text-lg font-semibold", children: "Theme Variables" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-sm text-white/50 p-4 bg-white/5 rounded", children: "\u{1F4A1} Variables panel component \u2014 render color schema, typography, page layout sections here" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "button",
+          {
+            onClick: handleSave,
+            className: "w-full px-4 py-2 bg-[#287f71] text-white rounded-lg hover:bg-[#287f71]/80 transition-colors font-medium",
+            children: "Save Changes"
+          }
+        )
+      ] }),
+      sidebarTab === "ai" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h2", { className: "text-lg font-semibold", children: "AI Assistant" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-sm text-white/50 p-4 bg-white/5 rounded", children: "\u{1F916} AI chat component \u2014 connect to OpenAI/Anthropic API" })
+      ] }),
+      sidebarTab === "styles" && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h2", { className: "text-lg font-semibold", children: "Style Classes" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "text-sm text-white/50 p-4 bg-white/5 rounded", children: "\u{1F3A8} Style Classes editor \u2014 coming soon" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex-1 flex flex-col bg-[#161b22]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "h-12 bg-[#0d1117] border-b border-white/10 flex items-center justify-between px-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h1", { className: "text-sm font-medium", children: "Preview" }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          "button",
+          {
+            onClick: handlePreviewReload,
+            className: "px-3 py-1 text-xs bg-white/10 hover:bg-white/20 rounded transition-colors",
+            children: "Reload"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "iframe",
+        {
+          ref: iframeRef,
+          src: previewUrl || "about:blank",
+          onLoad: () => setIframeLoaded(true),
+          className: "flex-1 border-0",
+          title: "Theme preview"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/cms/color-schema-panel.tsx
+var import_react9 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function ColorSchemaPanel({
+  schemas = [],
+  activeSchemaId,
+  onSchemaSelect,
+  onSchemaSave,
+  onSchemaCreate
+}) {
+  const [showCreate, setShowCreate] = (0, import_react9.useState)(false);
+  const [newName, setNewName] = (0, import_react9.useState)("");
+  const activeSchema = schemas.find((s) => s.id === activeSchemaId);
+  const handleCreate = () => {
+    if (newName.trim()) {
+      onSchemaCreate(newName);
+      setNewName("");
+      setShowCreate(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "text-sm font-semibold text-white", children: "Color Schemas" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        "button",
+        {
+          onClick: () => setShowCreate(!showCreate),
+          className: "text-xs px-2 py-1 bg-[#287f71] text-white rounded hover:bg-[#287f71]/80 transition-colors",
+          children: "+ New"
+        }
+      )
+    ] }),
+    showCreate && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex gap-2 p-3 bg-white/5 rounded-lg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        Input,
+        {
+          value: newName,
+          onChange: (e) => setNewName(e.target.value),
+          placeholder: "Schema name",
+          className: "h-8 text-xs bg-white/10 border-white/20 text-white placeholder:text-white/30"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        "button",
+        {
+          onClick: handleCreate,
+          className: "px-3 py-1 text-xs bg-[#287f71] text-white rounded hover:bg-[#287f71]/80",
+          children: "Create"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        "button",
+        {
+          onClick: () => setShowCreate(false),
+          className: "px-3 py-1 text-xs bg-white/10 text-white/70 rounded hover:bg-white/20",
+          children: "Cancel"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "space-y-2", children: schemas.map((schema) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      "button",
+      {
+        onClick: () => onSchemaSelect(schema.id),
+        className: `w-full p-3 rounded-lg border-2 transition-colors text-left ${activeSchemaId === schema.id ? "border-[#287f71] bg-[#287f71]/10" : "border-white/10 bg-white/5 hover:border-white/20"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-sm font-medium text-white", children: schema.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "text-xs text-white/50", children: [
+            Object.keys(schema.light).length,
+            " tokens"
+          ] })
+        ]
+      },
+      schema.id
+    )) }),
+    activeSchema && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "p-3 bg-white/5 rounded-lg border border-white/10 space-y-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h4", { className: "text-xs font-semibold text-white", children: "Light Mode" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "grid grid-cols-4 gap-2", children: Object.entries(activeSchema.light).slice(0, 8).map(([key, color]) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        "div",
+        {
+          className: "rounded border border-white/10 overflow-hidden",
+          title: key,
+          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "div",
+            {
+              className: "h-6",
+              style: { backgroundColor: color }
+            }
+          )
+        },
+        key
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h4", { className: "text-xs font-semibold text-white mt-3", children: "Dark Mode" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "grid grid-cols-4 gap-2", children: Object.entries(activeSchema.dark).slice(0, 8).map(([key, color]) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        "div",
+        {
+          className: "rounded border border-white/10 overflow-hidden",
+          title: key,
+          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "div",
+            {
+              className: "h-6",
+              style: { backgroundColor: color }
+            }
+          )
+        },
+        key
+      )) })
+    ] })
+  ] });
+}
+
+// src/components/cms/typography-panel.tsx
+var import_react10 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function TypographyPanel({
+  typography,
+  onSave
+}) {
+  const [expanded, setExpanded] = (0, import_react10.useState)("body");
+  const handleFontChange = (role, font) => {
+    const updated = {
+      ...typography,
+      fonts: { ...typography.fonts, [role]: font }
+    };
+    onSave(updated);
+  };
+  const handlePresetChange = (presetKey, field, value) => {
+    const isHeading = presetKey.startsWith("h");
+    const updated = isHeading ? {
+      ...typography,
+      headings: {
+        ...typography.headings,
+        [presetKey]: { ...typography.headings[presetKey], [field]: value }
+      }
+    } : {
+      ...typography,
+      body: { ...typography.body, [field]: value }
+    };
+    onSave(updated);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h3", { className: "text-sm font-semibold text-white", children: "Typography" }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "space-y-2 border-b border-white/10 pb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-xs font-medium text-white/70 uppercase", children: "Fonts" }),
+      Object.entries(typography.fonts || {}).map(([role, font]) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label2, { className: "text-xs text-white/60", children: role }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          Input,
+          {
+            value: font,
+            onChange: (e) => handleFontChange(role, e.target.value),
+            placeholder: "Font name",
+            className: "h-8 text-xs bg-white/10 border-white/20 text-white placeholder:text-white/30"
+          }
+        )
+      ] }, role))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h4", { className: "text-xs font-medium text-white/70 uppercase", children: "Text Styles" }),
+      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        "button",
+        {
+          onClick: () => setExpanded(expanded === "body" ? null : "body"),
+          className: "w-full text-left p-2 rounded hover:bg-white/5 transition-colors",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-medium text-white", children: "Body Text" }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "svg",
+              {
+                className: `w-3 h-3 inline ml-2 transition-transform ${expanded === "body" ? "rotate-180" : ""}`,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          ]
+        }
+      ),
+      expanded === "body" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "ml-2 space-y-2 p-2 bg-white/5 rounded", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label2, { className: "text-xs text-white/60", children: "Size" }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            Input,
+            {
+              type: "number",
+              value: typography.body?.size?.desktop || 16,
+              onChange: (e) => handlePresetChange("body", "size", { desktop: +e.target.value }),
+              className: "h-8 text-xs bg-white/10 border-white/20 text-white"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Label2, { className: "text-xs text-white/60", children: "Line Height" }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+            Input,
+            {
+              value: typography.body?.lineHeight || "1.5",
+              onChange: (e) => handlePresetChange("body", "lineHeight", e.target.value),
+              className: "h-8 text-xs bg-white/10 border-white/20 text-white"
+            }
+          )
+        ] })
+      ] }),
+      ["h1", "h2", "h3", "h4", "h5", "h6"].map((heading) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+        "button",
+        {
+          onClick: () => setExpanded(expanded === heading ? null : heading),
+          className: "w-full text-left p-2 rounded hover:bg-white/5 transition-colors",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "text-sm font-medium text-white uppercase", children: heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "svg",
+              {
+                className: `w-3 h-3 inline ml-2 transition-transform ${expanded === heading ? "rotate-180" : ""}`,
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          ]
+        },
+        heading
+      ))
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      "button",
+      {
+        onClick: () => onSave(typography),
+        className: "w-full px-4 py-2 bg-[#287f71] text-white rounded-lg hover:bg-[#287f71]/80 transition-colors font-medium text-sm mt-4",
+        children: "Save Typography"
+      }
+    )
+  ] });
+}
+
+// src/hooks/index.ts
+var import_react11 = require("react");
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(initial);
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3882,15 +4222,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = (0, import_react8.useState)(1);
+  const [page, setPage] = (0, import_react11.useState)(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
       style: {
@@ -3905,7 +4245,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3919,7 +4259,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3933,16 +4273,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
       style: {
@@ -3959,10 +4299,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "img",
       {
         src: imageUrl,
@@ -3971,7 +4311,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         height: size,
         style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "div",
       {
         style: {
@@ -3990,7 +4330,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "span",
       {
         style: {
@@ -4006,10 +4346,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "h1",
       {
         style: {
@@ -4022,7 +4362,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "p",
       {
         style: {
@@ -4038,12 +4378,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         "label",
         {
           htmlFor: fieldId,
@@ -4055,9 +4395,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       "input",
       {
         id: fieldId,
@@ -4087,13 +4427,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function AuthButton({
   loading,
   variant = "primary",
@@ -4136,7 +4476,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "button",
     {
       disabled: loading || disabled,
@@ -4148,8 +4488,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "span",
           {
             style: {
@@ -4170,19 +4510,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("p", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -4190,7 +4530,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "a",
       {
         href: linkHref,
@@ -4238,6 +4578,7 @@ var import_next_themes2 = require("next-themes");
   ColorPickerHue,
   ColorPickerOutput,
   ColorPickerSelection,
+  ColorSchemaPanel,
   ConfirmDialog,
   DEVICES,
   DEVICE_ICONS,
@@ -4317,6 +4658,7 @@ var import_next_themes2 = require("next-themes");
   TabsList,
   TabsTrigger,
   Textarea,
+  ThemeBuilder,
   ThemeProvider,
   ThemeToggle,
   TiptapEditor,
@@ -4325,6 +4667,7 @@ var import_next_themes2 = require("next-themes");
   TooltipProvider,
   TooltipTrigger,
   TopBar,
+  TypographyPanel,
   UploadProgressPanel,
   UploadZone,
   badgeVariants,