@webdevarif/dashui 1.2.3 → 1.2.4

package/dist/index.mjs

@@ -3720,10 +3720,347 @@ function ToolbarButton({
   );
 }
 
+// src/components/cms/theme-builder.tsx
+import { useState as useState12, useCallback as useCallback3, useRef as useRef7 } from "react";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+function ThemeBuilder({ theme, onSave, onPreviewUpdate, previewUrl }) {
+  const [sidebarTab, setSidebarTab] = useState12("variables");
+  const [iframeLoaded, setIframeLoaded] = useState12(false);
+  const iframeRef = useRef7(null);
+  const handleSave = useCallback3(() => {
+    onSave(theme);
+  }, [theme, onSave]);
+  const handlePreviewReload = useCallback3(() => {
+    if (iframeRef.current) {
+      iframeRef.current.src = previewUrl || "about:blank";
+    }
+  }, [previewUrl]);
+  return /* @__PURE__ */ jsxs39("div", { className: "flex h-screen bg-[#0f1117] text-white overflow-hidden", children: [
+    /* @__PURE__ */ jsxs39("div", { className: "w-11 bg-[#010409] border-r border-white/10 flex flex-col items-center py-4 gap-6", children: [
+      /* @__PURE__ */ jsx56(
+        "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__ */ jsx56("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx56("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__ */ jsx56(
+        "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__ */ jsxs39("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsx56("circle", { cx: "6", cy: "6", r: "2" }),
+            /* @__PURE__ */ jsx56("circle", { cx: "12", cy: "12", r: "2" }),
+            /* @__PURE__ */ jsx56("circle", { cx: "18", cy: "18", r: "2" }),
+            /* @__PURE__ */ jsx56("path", { d: "M8 8l8 8M6 18l12-12" })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx56(
+        "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__ */ jsx56("svg", { className: "w-5 h-5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx56("path", { d: "M3 6h18M3 12h18M3 18h18" }) })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs39("div", { className: "w-80 bg-[#13151e] border-r border-white/10 overflow-y-auto p-4", children: [
+      sidebarTab === "variables" && /* @__PURE__ */ jsxs39("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsx56("h2", { className: "text-lg font-semibold", children: "Theme Variables" }),
+        /* @__PURE__ */ jsx56("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__ */ jsx56(
+          "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__ */ jsxs39("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx56("h2", { className: "text-lg font-semibold", children: "AI Assistant" }),
+        /* @__PURE__ */ jsx56("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__ */ jsxs39("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx56("h2", { className: "text-lg font-semibold", children: "Style Classes" }),
+        /* @__PURE__ */ jsx56("div", { className: "text-sm text-white/50 p-4 bg-white/5 rounded", children: "\u{1F3A8} Style Classes editor \u2014 coming soon" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs39("div", { className: "flex-1 flex flex-col bg-[#161b22]", children: [
+      /* @__PURE__ */ jsxs39("div", { className: "h-12 bg-[#0d1117] border-b border-white/10 flex items-center justify-between px-4", children: [
+        /* @__PURE__ */ jsx56("h1", { className: "text-sm font-medium", children: "Preview" }),
+        /* @__PURE__ */ jsx56(
+          "button",
+          {
+            onClick: handlePreviewReload,
+            className: "px-3 py-1 text-xs bg-white/10 hover:bg-white/20 rounded transition-colors",
+            children: "Reload"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx56(
+        "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
+import { useState as useState13 } from "react";
+import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+function ColorSchemaPanel({
+  schemas = [],
+  activeSchemaId,
+  onSchemaSelect,
+  onSchemaSave,
+  onSchemaCreate
+}) {
+  const [showCreate, setShowCreate] = useState13(false);
+  const [newName, setNewName] = useState13("");
+  const activeSchema = schemas.find((s) => s.id === activeSchemaId);
+  const handleCreate = () => {
+    if (newName.trim()) {
+      onSchemaCreate(newName);
+      setNewName("");
+      setShowCreate(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs40("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx57("h3", { className: "text-sm font-semibold text-white", children: "Color Schemas" }),
+      /* @__PURE__ */ jsx57(
+        "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__ */ jsxs40("div", { className: "flex gap-2 p-3 bg-white/5 rounded-lg", children: [
+      /* @__PURE__ */ jsx57(
+        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__ */ jsx57(
+        "button",
+        {
+          onClick: handleCreate,
+          className: "px-3 py-1 text-xs bg-[#287f71] text-white rounded hover:bg-[#287f71]/80",
+          children: "Create"
+        }
+      ),
+      /* @__PURE__ */ jsx57(
+        "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__ */ jsx57("div", { className: "space-y-2", children: schemas.map((schema) => /* @__PURE__ */ jsxs40(
+      "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__ */ jsx57("p", { className: "text-sm font-medium text-white", children: schema.name }),
+          /* @__PURE__ */ jsxs40("p", { className: "text-xs text-white/50", children: [
+            Object.keys(schema.light).length,
+            " tokens"
+          ] })
+        ]
+      },
+      schema.id
+    )) }),
+    activeSchema && /* @__PURE__ */ jsxs40("div", { className: "p-3 bg-white/5 rounded-lg border border-white/10 space-y-3", children: [
+      /* @__PURE__ */ jsx57("h4", { className: "text-xs font-semibold text-white", children: "Light Mode" }),
+      /* @__PURE__ */ jsx57("div", { className: "grid grid-cols-4 gap-2", children: Object.entries(activeSchema.light).slice(0, 8).map(([key, color]) => /* @__PURE__ */ jsx57(
+        "div",
+        {
+          className: "rounded border border-white/10 overflow-hidden",
+          title: key,
+          children: /* @__PURE__ */ jsx57(
+            "div",
+            {
+              className: "h-6",
+              style: { backgroundColor: color }
+            }
+          )
+        },
+        key
+      )) }),
+      /* @__PURE__ */ jsx57("h4", { className: "text-xs font-semibold text-white mt-3", children: "Dark Mode" }),
+      /* @__PURE__ */ jsx57("div", { className: "grid grid-cols-4 gap-2", children: Object.entries(activeSchema.dark).slice(0, 8).map(([key, color]) => /* @__PURE__ */ jsx57(
+        "div",
+        {
+          className: "rounded border border-white/10 overflow-hidden",
+          title: key,
+          children: /* @__PURE__ */ jsx57(
+            "div",
+            {
+              className: "h-6",
+              style: { backgroundColor: color }
+            }
+          )
+        },
+        key
+      )) })
+    ] })
+  ] });
+}
+
+// src/components/cms/typography-panel.tsx
+import { useState as useState14 } from "react";
+import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
+function TypographyPanel({
+  typography,
+  onSave
+}) {
+  const [expanded, setExpanded] = useState14("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__ */ jsxs41("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx58("h3", { className: "text-sm font-semibold text-white", children: "Typography" }),
+    /* @__PURE__ */ jsxs41("div", { className: "space-y-2 border-b border-white/10 pb-4", children: [
+      /* @__PURE__ */ jsx58("h4", { className: "text-xs font-medium text-white/70 uppercase", children: "Fonts" }),
+      Object.entries(typography.fonts || {}).map(([role, font]) => /* @__PURE__ */ jsxs41("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx58(Label2, { className: "text-xs text-white/60", children: role }),
+        /* @__PURE__ */ jsx58(
+          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__ */ jsxs41("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx58("h4", { className: "text-xs font-medium text-white/70 uppercase", children: "Text Styles" }),
+      /* @__PURE__ */ jsxs41(
+        "button",
+        {
+          onClick: () => setExpanded(expanded === "body" ? null : "body"),
+          className: "w-full text-left p-2 rounded hover:bg-white/5 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx58("span", { className: "text-sm font-medium text-white", children: "Body Text" }),
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsx58("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          ]
+        }
+      ),
+      expanded === "body" && /* @__PURE__ */ jsxs41("div", { className: "ml-2 space-y-2 p-2 bg-white/5 rounded", children: [
+        /* @__PURE__ */ jsxs41("div", { children: [
+          /* @__PURE__ */ jsx58(Label2, { className: "text-xs text-white/60", children: "Size" }),
+          /* @__PURE__ */ jsx58(
+            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__ */ jsxs41("div", { children: [
+          /* @__PURE__ */ jsx58(Label2, { className: "text-xs text-white/60", children: "Line Height" }),
+          /* @__PURE__ */ jsx58(
+            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__ */ jsxs41(
+        "button",
+        {
+          onClick: () => setExpanded(expanded === heading ? null : heading),
+          className: "w-full text-left p-2 rounded hover:bg-white/5 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx58("span", { className: "text-sm font-medium text-white uppercase", children: heading }),
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsx58("path", { d: "m6 9 6 6 6-6" })
+              }
+            )
+          ]
+        },
+        heading
+      ))
+    ] }),
+    /* @__PURE__ */ jsx58(
+      "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
-import { useState as useState12 } from "react";
+import { useState as useState15 } from "react";
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = useState12(initial);
+  const [isOpen, setIsOpen] = useState15(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3733,15 +4070,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = useState12(1);
+  const [page, setPage] = useState15(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs42 } from "react/jsx-runtime";
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       style: {
@@ -3756,7 +4093,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ jsx56(
+        pattern === "dots" && /* @__PURE__ */ jsx59(
           "div",
           {
             "aria-hidden": true,
@@ -3770,7 +4107,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ jsx56(
+        pattern === "grid" && /* @__PURE__ */ jsx59(
           "div",
           {
             "aria-hidden": true,
@@ -3784,16 +4121,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx56("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ jsx59("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx60(
     "div",
     {
       style: {
@@ -3810,10 +4147,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ jsxs40("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs43("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ jsx61(
       "img",
       {
         src: imageUrl,
@@ -3822,7 +4159,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__ */ jsx58(
+    ) : /* @__PURE__ */ jsx61(
       "div",
       {
         style: {
@@ -3841,7 +4178,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx61(
       "span",
       {
         style: {
@@ -3857,10 +4194,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ jsxs41("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsxs44("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx62(
       "h1",
       {
         style: {
@@ -3873,7 +4210,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx59(
+    description && /* @__PURE__ */ jsx62(
       "p",
       {
         style: {
@@ -3889,12 +4226,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-import { jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ jsxs42("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ jsxs42("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsxs45("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs45("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx63(
         "label",
         {
           htmlFor: fieldId,
@@ -3906,9 +4243,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ jsx60("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ jsx63("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ jsx60(
+    /* @__PURE__ */ jsx63(
       "input",
       {
         id: fieldId,
@@ -3938,13 +4275,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx60("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ jsx60("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ jsx63("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ jsx63("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-import { Fragment as Fragment4, jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx64, jsxs as jsxs46 } from "react/jsx-runtime";
 function AuthButton({
   loading,
   variant = "primary",
@@ -3987,7 +4324,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx64(
     "button",
     {
       disabled: loading || disabled,
@@ -3999,8 +4336,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsxs43(Fragment4, { children: [
-        /* @__PURE__ */ jsx61(
+      children: loading ? /* @__PURE__ */ jsxs46(Fragment4, { children: [
+        /* @__PURE__ */ jsx64(
           "span",
           {
             style: {
@@ -4021,19 +4358,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ jsxs44("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ jsx62("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ jsx62("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ jsx62("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ jsxs47("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ jsx65("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ jsx65("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ jsx65("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ jsxs45("p", { style: {
+  return /* @__PURE__ */ jsxs48("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -4041,7 +4378,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx66(
       "a",
       {
         href: linkHref,
@@ -4088,6 +4425,7 @@ export {
   ColorPickerHue,
   ColorPickerOutput,
   ColorPickerSelection,
+  ColorSchemaPanel,
   ConfirmDialog,
   DEVICES,
   DEVICE_ICONS,
@@ -4167,6 +4505,7 @@ export {
   TabsList,
   TabsTrigger,
   Textarea,
+  ThemeBuilder,
   ThemeProvider,
   ThemeToggle,
   TiptapEditor,
@@ -4175,6 +4514,7 @@ export {
   TooltipProvider,
   TooltipTrigger,
   TopBar,
+  TypographyPanel,
   UploadProgressPanel,
   UploadZone,
   badgeVariants,