@webdevarif/dashui 0.3.12 → 0.4.0

package/dist/index.mjs

@@ -2320,9 +2320,227 @@ function FormSection({
   ] });
 }
 
+// src/components/form/local-input.tsx
+import { useState as useState5, useRef as useRef3, useEffect as useEffect4 } from "react";
+import { jsx as jsx39 } from "react/jsx-runtime";
+function LocalInput({
+  value,
+  onChange,
+  commitOnBlur,
+  ...rest
+}) {
+  const [local, setLocal] = useState5(String(value ?? ""));
+  const ref = useRef3(null);
+  const onChangeRef = useRef3(onChange);
+  onChangeRef.current = onChange;
+  useEffect4(() => {
+    if (document.activeElement !== ref.current) {
+      setLocal(String(value ?? ""));
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx39(
+    "input",
+    {
+      ref,
+      ...rest,
+      value: local,
+      onChange: (e) => {
+        setLocal(e.target.value);
+        if (!commitOnBlur) {
+          onChangeRef.current(e.target.value);
+        }
+      },
+      onBlur: (e) => {
+        if (commitOnBlur) {
+          onChangeRef.current(e.target.value);
+        }
+      }
+    }
+  );
+}
+
+// src/components/form/responsive-size-device-icon.tsx
+import { useState as useState6 } from "react";
+
+// src/components/form/responsive-types.tsx
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+var DEVICES = [
+  { key: "desktop", label: "Desktop", width: "1200px" },
+  { key: "laptop", label: "Laptop", width: "1024px" },
+  { key: "tablet", label: "Tablet", width: "768px" },
+  { key: "mobile", label: "Mobile", width: "375px" }
+];
+var DEVICE_ICONS = {
+  desktop: /* @__PURE__ */ jsxs25("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx40("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ jsx40("path", { d: "M8 20h8M12 18v2" })
+  ] }),
+  laptop: /* @__PURE__ */ jsxs25("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx40("rect", { x: "3", y: "5", width: "18", height: "12", rx: "1.5" }),
+    /* @__PURE__ */ jsx40("path", { d: "M1 19h22" })
+  ] }),
+  tablet: /* @__PURE__ */ jsxs25("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx40("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2" }),
+    /* @__PURE__ */ jsx40("circle", { cx: "12", cy: "18", r: "0.5", fill: "currentColor" })
+  ] }),
+  mobile: /* @__PURE__ */ jsxs25("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ jsx40("rect", { x: "6", y: "2", width: "12", height: "20", rx: "2" }),
+    /* @__PURE__ */ jsx40("circle", { cx: "12", cy: "18", r: "0.5", fill: "currentColor" })
+  ] })
+};
+
+// src/components/form/responsive-size-device-icon.tsx
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+function ResponsiveSizeDeviceIcon({
+  activeDevice,
+  setActiveDevice
+}) {
+  const [open, setOpen] = useState6(false);
+  return /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx41(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        className: "flex items-center text-white/30 hover:text-white/60 transition-colors",
+        children: DEVICE_ICONS[activeDevice]
+      }
+    ),
+    open && /* @__PURE__ */ jsx41(
+      "div",
+      {
+        className: "absolute left-0 top-full mt-1 z-[200] rounded-lg overflow-hidden border border-white/10 shadow-xl",
+        style: { background: "#1e2030", minWidth: 160 },
+        children: DEVICES.map((d) => /* @__PURE__ */ jsxs26(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setActiveDevice(d.key);
+              setOpen(false);
+            },
+            className: "w-full flex items-center gap-3 px-3 py-2 text-xs hover:bg-white/10 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx41("span", { className: "text-white/60", children: DEVICE_ICONS[d.key] }),
+              /* @__PURE__ */ jsx41("span", { className: "text-white/70 flex-1 text-left", children: d.label }),
+              /* @__PURE__ */ jsx41("span", { className: "text-white/30", children: d.width }),
+              activeDevice === d.key && /* @__PURE__ */ jsx41(
+                "svg",
+                {
+                  className: "w-3 h-3 text-[#287f71] shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  children: /* @__PURE__ */ jsx41("path", { d: "m5 13 4 4L19 7" })
+                }
+              )
+            ]
+          },
+          d.key
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/form/responsive-size-field.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+function ResponsiveSizeField({
+  value,
+  unit,
+  customUnit,
+  activeDevice,
+  onSizeChange,
+  onUnitChange,
+  onCustomChange
+}) {
+  const [unitOpen, setUnitOpen] = useState7(false);
+  const currentVal = value[activeDevice] ?? value.desktop ?? 0;
+  const isCustom = unit === "custom";
+  return /* @__PURE__ */ jsxs27("div", { className: "relative flex items-center border border-white/10 rounded-md bg-white/5 w-full", style: { height: 32 }, children: [
+    isCustom ? /* @__PURE__ */ jsx42(
+      LocalInput,
+      {
+        type: "text",
+        value: customUnit || "",
+        onChange: (v) => onCustomChange?.(v),
+        commitOnBlur: true,
+        placeholder: "e.g. 2rem",
+        className: "flex-1 min-w-0 bg-transparent px-2 text-xs text-white/80 outline-none h-full"
+      }
+    ) : /* @__PURE__ */ jsx42(
+      LocalInput,
+      {
+        type: "number",
+        min: 0,
+        value: currentVal,
+        onChange: (v) => onSizeChange(activeDevice, +v),
+        commitOnBlur: true,
+        className: "flex-1 min-w-0 bg-transparent px-2 text-xs text-white/80 outline-none text-center h-full"
+      }
+    ),
+    isCustom ? /* @__PURE__ */ jsxs27("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ jsx42(
+        "div",
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: () => setUnitOpen((o) => !o),
+          title: "Choose unit",
+          className: "flex items-center justify-center px-2 h-full text-white/30 hover:text-white/60 transition-colors cursor-pointer",
+          children: /* @__PURE__ */ jsx42(
+            "svg",
+            {
+              className: "w-3 h-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              children: /* @__PURE__ */ jsx42("path", { d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Z" })
+            }
+          )
+        }
+      ),
+      unitOpen && /* @__PURE__ */ jsx42(
+        "div",
+        {
+          className: "absolute right-0 top-full mt-1 z-[200] rounded-lg overflow-hidden border border-white/10 shadow-xl",
+          style: { background: "#1e2030", minWidth: 60 },
+          children: ["px", "rem", "em", "vh", "vw"].map((u) => /* @__PURE__ */ jsx42(
+            "div",
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: () => {
+                onUnitChange(u);
+                setUnitOpen(false);
+              },
+              className: "w-full px-3 py-2 text-xs text-white/70 hover:bg-white/10 text-right transition-colors cursor-pointer",
+              children: u
+            },
+            u
+          ))
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs27(Select, { value: unit, onValueChange: onUnitChange, children: [
+      /* @__PURE__ */ jsx42(
+        SelectTrigger,
+        {
+          className: "h-full border-0 rounded-l-none rounded-r-lg px-2 text-xs text-white/50 bg-transparent focus:ring-0 shadow-none",
+          style: { width: 52, minWidth: 52 },
+          children: /* @__PURE__ */ jsx42(SelectValue, {})
+        }
+      ),
+      /* @__PURE__ */ jsx42(SelectContent, { style: { background: "#1a1c2e", border: "1px solid rgba(255,255,255,0.1)", color: "rgba(255,255,255,0.7)" }, children: ["px", "rem", "em", "vh", "vw", "custom"].map((u) => /* @__PURE__ */ jsx42(SelectItem, { value: u, children: u }, u)) })
+    ] })
+  ] });
+}
+
 // src/components/feedback/alert.tsx
 import { AlertCircle, CheckCircle2, Info, AlertTriangle, X as X2 } from "lucide-react";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 var variantConfig = {
   info: {
     icon: Info,
@@ -2351,7 +2569,7 @@ function Alert({
 }) {
   const config = variantConfig[variant];
   const Icon2 = config.icon;
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs28(
     "div",
     {
       className: cn(
@@ -2361,17 +2579,17 @@ function Alert({
       ),
       role: "alert",
       children: [
-        /* @__PURE__ */ jsx39(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
-        /* @__PURE__ */ jsxs25("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ jsx39("p", { className: "font-medium", children: title }),
-          /* @__PURE__ */ jsx39("div", { className: cn("text-sm", title && "mt-1"), children })
+        /* @__PURE__ */ jsx43(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
+        /* @__PURE__ */ jsxs28("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ jsx43("p", { className: "font-medium", children: title }),
+          /* @__PURE__ */ jsx43("div", { className: cn("text-sm", title && "mt-1"), children })
         ] }),
-        dismissible && /* @__PURE__ */ jsx39(
+        dismissible && /* @__PURE__ */ jsx43(
           "button",
           {
             onClick: onDismiss,
             className: "absolute right-3 top-3 rounded-md p-1 opacity-70 hover:opacity-100",
-            children: /* @__PURE__ */ jsx39(X2, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx43(X2, { className: "h-4 w-4" })
           }
         )
       ]
@@ -2381,14 +2599,14 @@ function Alert({
 
 // src/components/feedback/loading-spinner.tsx
 import { Loader2 } from "lucide-react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var sizeMap2 = {
   sm: "h-4 w-4",
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
 function LoadingSpinner({ size = "md", className }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx44(
     Loader2,
     {
       className: cn("animate-spin text-muted-foreground", sizeMap2[size], className)
@@ -2397,7 +2615,7 @@ function LoadingSpinner({ size = "md", className }) {
 }
 
 // src/components/feedback/confirm-dialog.tsx
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -2409,13 +2627,13 @@ function ConfirmDialog({
   loading,
   variant = "default"
 }) {
-  return /* @__PURE__ */ jsx41(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs26(DialogContent, { children: [
-    /* @__PURE__ */ jsxs26(DialogHeader, { children: [
-      /* @__PURE__ */ jsx41(DialogTitle, { children: title }),
-      description && /* @__PURE__ */ jsx41(DialogDescription, { children: description })
+  return /* @__PURE__ */ jsx45(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs29(DialogContent, { children: [
+    /* @__PURE__ */ jsxs29(DialogHeader, { children: [
+      /* @__PURE__ */ jsx45(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ jsx45(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsxs26(DialogFooter, { children: [
-      /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsxs29(DialogFooter, { children: [
+      /* @__PURE__ */ jsx45(
         Button,
         {
           variant: "outline",
@@ -2424,14 +2642,14 @@ function ConfirmDialog({
           children: cancelLabel
         }
       ),
-      /* @__PURE__ */ jsxs26(
+      /* @__PURE__ */ jsxs29(
         Button,
         {
           variant: variant === "destructive" ? "destructive" : "default",
           onClick: onConfirm,
           disabled: loading,
           children: [
-            loading && /* @__PURE__ */ jsx41(LoadingSpinner, { size: "sm", className: "mr-2" }),
+            loading && /* @__PURE__ */ jsx45(LoadingSpinner, { size: "sm", className: "mr-2" }),
             confirmLabel
           ]
         }
@@ -2441,7 +2659,7 @@ function ConfirmDialog({
 }
 
 // src/components/content/post-status-badge.tsx
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 var statusConfig = {
   DRAFT: {
     label: "Draft",
@@ -2474,7 +2692,7 @@ function PostStatusBadge({
   className
 }) {
   const config = statusConfig[status];
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs30(
     "span",
     {
       className: cn(
@@ -2484,7 +2702,7 @@ function PostStatusBadge({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx46(
           "span",
           {
             className: cn("inline-block rounded-full", config.dot, {
@@ -2503,9 +2721,9 @@ function PostStatusBadge({
 import * as React21 from "react";
 
 // src/components/Skeleton.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Skeleton2({ width = "100%", height = 16, rounded, style }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx47(
     "div",
     {
       style: {
@@ -2518,7 +2736,7 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
         flexShrink: 0,
         ...style
       },
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx47(
         "div",
         {
           style: {
@@ -2534,49 +2752,49 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
 }
 
 // src/components/content/post-list-table.tsx
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function IconEdit() {
-  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx44("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-    /* @__PURE__ */ jsx44("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+  return /* @__PURE__ */ jsxs31("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx48("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+    /* @__PURE__ */ jsx48("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
   ] });
 }
 function IconTrash() {
-  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx44("polyline", { points: "3 6 5 6 21 6" }),
-    /* @__PURE__ */ jsx44("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
-    /* @__PURE__ */ jsx44("path", { d: "M10 11v6" }),
-    /* @__PURE__ */ jsx44("path", { d: "M14 11v6" }),
-    /* @__PURE__ */ jsx44("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" })
+  return /* @__PURE__ */ jsxs31("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx48("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsx48("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
+    /* @__PURE__ */ jsx48("path", { d: "M10 11v6" }),
+    /* @__PURE__ */ jsx48("path", { d: "M14 11v6" }),
+    /* @__PURE__ */ jsx48("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" })
   ] });
 }
 function IconCopy() {
-  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx44("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsx44("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  return /* @__PURE__ */ jsxs31("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx48("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx48("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
   ] });
 }
 function IconMoreHorizontal() {
-  return /* @__PURE__ */ jsxs28("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx44("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
-    /* @__PURE__ */ jsx44("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
-    /* @__PURE__ */ jsx44("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
+  return /* @__PURE__ */ jsxs31("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx48("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx48("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
   ] });
 }
 function IconChevronRight() {
-  return /* @__PURE__ */ jsx44("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx44("polyline", { points: "9 18 15 12 9 6" }) });
+  return /* @__PURE__ */ jsx48("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx48("polyline", { points: "9 18 15 12 9 6" }) });
 }
 function IconImage() {
-  return /* @__PURE__ */ jsxs28("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx44("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-    /* @__PURE__ */ jsx44("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-    /* @__PURE__ */ jsx44("polyline", { points: "21 15 16 10 5 21" })
+  return /* @__PURE__ */ jsxs31("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx48("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx48("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ jsx48("polyline", { points: "21 15 16 10 5 21" })
   ] });
 }
 function IconPlus() {
-  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ jsx44("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-    /* @__PURE__ */ jsx44("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  return /* @__PURE__ */ jsxs31("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx48("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx48("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   ] });
 }
 function formatDate(date) {
@@ -2609,17 +2827,17 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
     { label: "Publish", value: "PUBLISHED" },
     { label: "Archive", value: "ARCHIVED" }
   ];
-  return /* @__PURE__ */ jsxs28("div", { className: "relative flex items-center gap-1", ref, children: [
-    /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs31("div", { className: "relative flex items-center gap-1", ref, children: [
+    /* @__PURE__ */ jsx48(
       "button",
       {
         onClick: () => onEdit?.(post.id),
         className: "inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
         title: "Edit",
-        children: /* @__PURE__ */ jsx44(IconEdit, {})
+        children: /* @__PURE__ */ jsx48(IconEdit, {})
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx48(
       "button",
       {
         onClick: () => {
@@ -2628,11 +2846,11 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
         },
         className: "inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
         title: "More actions",
-        children: /* @__PURE__ */ jsx44(IconMoreHorizontal, {})
+        children: /* @__PURE__ */ jsx48(IconMoreHorizontal, {})
       }
     ),
-    open && /* @__PURE__ */ jsxs28("div", { className: "absolute right-0 top-8 z-50 min-w-[160px] rounded-lg border border-border bg-card shadow-md py-1", children: [
-      /* @__PURE__ */ jsxs28(
+    open && /* @__PURE__ */ jsxs31("div", { className: "absolute right-0 top-8 z-50 min-w-[160px] rounded-lg border border-border bg-card shadow-md py-1", children: [
+      /* @__PURE__ */ jsxs31(
         "button",
         {
           onClick: () => {
@@ -2641,13 +2859,13 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
           },
           className: "flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors",
           children: [
-            /* @__PURE__ */ jsx44(IconCopy, {}),
+            /* @__PURE__ */ jsx48(IconCopy, {}),
             "Duplicate"
           ]
         }
       ),
-      /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs28(
+      /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs31(
           "button",
           {
             onMouseEnter: () => setStatusOpen(true),
@@ -2655,18 +2873,18 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
             onClick: () => setStatusOpen((v) => !v),
             className: "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors",
             children: [
-              /* @__PURE__ */ jsx44("span", { children: "Change status" }),
-              /* @__PURE__ */ jsx44(IconChevronRight, {})
+              /* @__PURE__ */ jsx48("span", { children: "Change status" }),
+              /* @__PURE__ */ jsx48(IconChevronRight, {})
             ]
           }
         ),
-        statusOpen && /* @__PURE__ */ jsx44(
+        statusOpen && /* @__PURE__ */ jsx48(
           "div",
           {
             className: "absolute left-full top-0 z-50 min-w-[130px] rounded-lg border border-border bg-card shadow-md py-1",
             onMouseEnter: () => setStatusOpen(true),
             onMouseLeave: () => setStatusOpen(false),
-            children: statusOptions.map((opt) => /* @__PURE__ */ jsx44(
+            children: statusOptions.map((opt) => /* @__PURE__ */ jsx48(
               "button",
               {
                 onClick: () => {
@@ -2685,8 +2903,8 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx44("div", { className: "my-1 border-t border-border" }),
-      /* @__PURE__ */ jsxs28(
+      /* @__PURE__ */ jsx48("div", { className: "my-1 border-t border-border" }),
+      /* @__PURE__ */ jsxs31(
         "button",
         {
           onClick: () => {
@@ -2695,7 +2913,7 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
           },
           className: "flex w-full items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 transition-colors",
           children: [
-            /* @__PURE__ */ jsx44(IconTrash, {}),
+            /* @__PURE__ */ jsx48(IconTrash, {}),
             "Delete"
           ]
         }
@@ -2704,21 +2922,21 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
   ] });
 }
 function SkeletonRow() {
-  return /* @__PURE__ */ jsxs28("tr", { children: [
-    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(Skeleton2, { className: "w-10 h-10 rounded-lg" }) }),
-    /* @__PURE__ */ jsxs28("td", { className: "px-4 py-3", children: [
-      /* @__PURE__ */ jsx44(Skeleton2, { className: "h-4 w-40 mb-1.5" }),
-      /* @__PURE__ */ jsx44(Skeleton2, { className: "h-3 w-24" })
+  return /* @__PURE__ */ jsxs31("tr", { children: [
+    /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx48(Skeleton2, { className: "w-10 h-10 rounded-lg" }) }),
+    /* @__PURE__ */ jsxs31("td", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsx48(Skeleton2, { className: "h-4 w-40 mb-1.5" }),
+      /* @__PURE__ */ jsx48(Skeleton2, { className: "h-3 w-24" })
     ] }),
-    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(Skeleton2, { className: "h-5 w-20 rounded-full" }) }),
-    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx44(Skeleton2, { className: "w-6 h-6 rounded-full" }),
-      /* @__PURE__ */ jsx44(Skeleton2, { className: "h-4 w-20" })
+    /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx48(Skeleton2, { className: "h-5 w-20 rounded-full" }) }),
+    /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx48(Skeleton2, { className: "w-6 h-6 rounded-full" }),
+      /* @__PURE__ */ jsx48(Skeleton2, { className: "h-4 w-20" })
     ] }) }),
-    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(Skeleton2, { className: "h-4 w-24" }) }),
-    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs28("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ jsx44(Skeleton2, { className: "w-7 h-7 rounded-md" }),
-      /* @__PURE__ */ jsx44(Skeleton2, { className: "w-7 h-7 rounded-md" })
+    /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx48(Skeleton2, { className: "h-4 w-24" }) }),
+    /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx48(Skeleton2, { className: "w-7 h-7 rounded-md" }),
+      /* @__PURE__ */ jsx48(Skeleton2, { className: "w-7 h-7 rounded-md" })
     ] }) })
   ] });
 }
@@ -2737,45 +2955,45 @@ function PostListTable({
   className
 }) {
   const isEmpty = !loading && posts.length === 0;
-  return /* @__PURE__ */ jsxs28("div", { className: cn("w-full overflow-x-auto rounded-lg border border-border bg-card", className), children: [
-    /* @__PURE__ */ jsxs28("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ jsx44("thead", { children: /* @__PURE__ */ jsxs28("tr", { className: "border-b border-border bg-muted/40", children: [
-        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-14", children: "Image" }),
-        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Title" }),
-        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
-        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Author" }),
-        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Date" }),
-        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground", children: "Actions" })
+  return /* @__PURE__ */ jsxs31("div", { className: cn("w-full overflow-x-auto rounded-lg border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs31("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx48("thead", { children: /* @__PURE__ */ jsxs31("tr", { className: "border-b border-border bg-muted/40", children: [
+        /* @__PURE__ */ jsx48("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-14", children: "Image" }),
+        /* @__PURE__ */ jsx48("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Title" }),
+        /* @__PURE__ */ jsx48("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ jsx48("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Author" }),
+        /* @__PURE__ */ jsx48("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Date" }),
+        /* @__PURE__ */ jsx48("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ jsx44("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx44(SkeletonRow, {}, i)) : isEmpty ? null : posts.map((post) => {
+      /* @__PURE__ */ jsx48("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx48(SkeletonRow, {}, i)) : isEmpty ? null : posts.map((post) => {
         const date = post.status === "PUBLISHED" && post.publishedAt ? formatDate(post.publishedAt) : formatDate(post.createdAt);
-        return /* @__PURE__ */ jsxs28(
+        return /* @__PURE__ */ jsxs31(
           "tr",
           {
             className: "border-b border-border last:border-0 hover:bg-muted/30 transition-colors",
             children: [
-              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: post.featuredImageUrl ? /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: post.featuredImageUrl ? /* @__PURE__ */ jsx48(
                 "img",
                 {
                   src: post.featuredImageUrl,
                   alt: post.title,
                   className: "w-10 h-10 rounded-lg object-cover"
                 }
-              ) : /* @__PURE__ */ jsx44("div", { className: "w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx44(IconImage, {}) }) }),
-              /* @__PURE__ */ jsxs28("td", { className: "px-4 py-3", children: [
-                /* @__PURE__ */ jsx44("div", { className: "font-medium text-foreground leading-tight truncate max-w-[240px]", children: post.title }),
-                /* @__PURE__ */ jsxs28("div", { className: "text-xs text-muted-foreground mt-0.5 truncate max-w-[240px]", children: [
+              ) : /* @__PURE__ */ jsx48("div", { className: "w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx48(IconImage, {}) }) }),
+              /* @__PURE__ */ jsxs31("td", { className: "px-4 py-3", children: [
+                /* @__PURE__ */ jsx48("div", { className: "font-medium text-foreground leading-tight truncate max-w-[240px]", children: post.title }),
+                /* @__PURE__ */ jsxs31("div", { className: "text-xs text-muted-foreground mt-0.5 truncate max-w-[240px]", children: [
                   "/",
                   post.slug
                 ] })
               ] }),
-              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(PostStatusBadge, { status: post.status, size: "sm" }) }),
-              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: post.author ? /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx44("div", { className: "w-6 h-6 rounded-full bg-primary/20 text-primary flex items-center justify-center text-[10px] font-semibold shrink-0", children: getInitials(post.author) }),
-                /* @__PURE__ */ jsx44("span", { className: "text-sm text-foreground truncate max-w-[100px]", children: post.author })
-              ] }) : /* @__PURE__ */ jsx44("span", { className: "text-muted-foreground text-xs", children: "\u2014" }) }),
-              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap", children: date }),
-              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx44(
+              /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx48(PostStatusBadge, { status: post.status, size: "sm" }) }),
+              /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: post.author ? /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx48("div", { className: "w-6 h-6 rounded-full bg-primary/20 text-primary flex items-center justify-center text-[10px] font-semibold shrink-0", children: getInitials(post.author) }),
+                /* @__PURE__ */ jsx48("span", { className: "text-sm text-foreground truncate max-w-[100px]", children: post.author })
+              ] }) : /* @__PURE__ */ jsx48("span", { className: "text-muted-foreground text-xs", children: "\u2014" }) }),
+              /* @__PURE__ */ jsx48("td", { className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap", children: date }),
+              /* @__PURE__ */ jsx48("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx48("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx48(
                 RowActions,
                 {
                   post,
@@ -2791,22 +3009,22 @@ function PostListTable({
         );
       }) })
     ] }),
-    isEmpty && /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [
-      /* @__PURE__ */ jsx44("div", { className: "text-muted-foreground mb-3", children: emptyIcon ?? /* @__PURE__ */ jsxs28("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-40", children: [
-        /* @__PURE__ */ jsx44("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-        /* @__PURE__ */ jsx44("polyline", { points: "14 2 14 8 20 8" }),
-        /* @__PURE__ */ jsx44("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-        /* @__PURE__ */ jsx44("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
-        /* @__PURE__ */ jsx44("polyline", { points: "10 9 9 9 8 9" })
+    isEmpty && /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [
+      /* @__PURE__ */ jsx48("div", { className: "text-muted-foreground mb-3", children: emptyIcon ?? /* @__PURE__ */ jsxs31("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-40", children: [
+        /* @__PURE__ */ jsx48("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx48("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ jsx48("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+        /* @__PURE__ */ jsx48("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+        /* @__PURE__ */ jsx48("polyline", { points: "10 9 9 9 8 9" })
       ] }) }),
-      /* @__PURE__ */ jsx44("p", { className: "text-sm text-muted-foreground mb-4", children: emptyMessage ?? `No ${singularLabel.toLowerCase()}s yet.` }),
-      onNewPost && /* @__PURE__ */ jsxs28(
+      /* @__PURE__ */ jsx48("p", { className: "text-sm text-muted-foreground mb-4", children: emptyMessage ?? `No ${singularLabel.toLowerCase()}s yet.` }),
+      onNewPost && /* @__PURE__ */ jsxs31(
         "button",
         {
           onClick: onNewPost,
           className: "inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
           children: [
-            /* @__PURE__ */ jsx44(IconPlus, {}),
+            /* @__PURE__ */ jsx48(IconPlus, {}),
             newPostLabel ?? `New ${singularLabel}`
           ]
         }
@@ -2816,7 +3034,7 @@ function PostListTable({
 }
 
 // src/components/content/post-filters-bar.tsx
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 var STATUS_TABS = [
   { value: "all", label: "All" },
   { value: "DRAFT", label: "Draft" },
@@ -2825,7 +3043,7 @@ var STATUS_TABS = [
   { value: "ARCHIVED", label: "Archived" }
 ];
 function IconSearch() {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs32(
     "svg",
     {
       width: "14",
@@ -2837,14 +3055,14 @@ function IconSearch() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx45("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx45("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+        /* @__PURE__ */ jsx49("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx49("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ]
     }
   );
 }
 function IconPlus2() {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs32(
     "svg",
     {
       width: "14",
@@ -2856,8 +3074,8 @@ function IconPlus2() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx45("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-        /* @__PURE__ */ jsx45("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        /* @__PURE__ */ jsx49("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+        /* @__PURE__ */ jsx49("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
       ]
     }
   );
@@ -2873,11 +3091,11 @@ function PostFiltersBar({
   typeLabel = "Posts",
   className
 }) {
-  return /* @__PURE__ */ jsxs29("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ jsx45("span", { className: "absolute left-2.5 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsx45(IconSearch, {}) }),
-        /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs32("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs32("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsx49("span", { className: "absolute left-2.5 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsx49(IconSearch, {}) }),
+        /* @__PURE__ */ jsx49(
           "input",
           {
             type: "text",
@@ -2888,7 +3106,7 @@ function PostFiltersBar({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-1 rounded-lg bg-muted p-0.5", children: STATUS_TABS.map((tab) => /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx49("div", { className: "flex items-center gap-1 rounded-lg bg-muted p-0.5", children: STATUS_TABS.map((tab) => /* @__PURE__ */ jsx49(
         "button",
         {
           onClick: () => onStatusChange(tab.value),
@@ -2900,20 +3118,20 @@ function PostFiltersBar({
         },
         tab.value
       )) }),
-      /* @__PURE__ */ jsx45("div", { className: "flex-1" }),
-      onNew && /* @__PURE__ */ jsxs29(
+      /* @__PURE__ */ jsx49("div", { className: "flex-1" }),
+      onNew && /* @__PURE__ */ jsxs32(
         "button",
         {
           onClick: onNew,
           className: "inline-flex items-center gap-1.5 h-8 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
           children: [
-            /* @__PURE__ */ jsx45(IconPlus2, {}),
+            /* @__PURE__ */ jsx49(IconPlus2, {}),
             newLabel
           ]
         }
       )
     ] }),
-    total !== void 0 && /* @__PURE__ */ jsxs29("p", { className: "text-xs text-muted-foreground", children: [
+    total !== void 0 && /* @__PURE__ */ jsxs32("p", { className: "text-xs text-muted-foreground", children: [
       total,
       " ",
       total === 1 ? typeLabel.replace(/s$/, "") : typeLabel
@@ -2922,9 +3140,9 @@ function PostFiltersBar({
 }
 
 // src/components/content/post-editor-shell.tsx
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
 function IconArrowLeft() {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs33(
     "svg",
     {
       width: "14",
@@ -2936,14 +3154,14 @@ function IconArrowLeft() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx46("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-        /* @__PURE__ */ jsx46("polyline", { points: "12 19 5 12 12 5" })
+        /* @__PURE__ */ jsx50("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ jsx50("polyline", { points: "12 19 5 12 12 5" })
       ]
     }
   );
 }
 function IconSpinner() {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx50(
     "svg",
     {
       width: "14",
@@ -2955,12 +3173,12 @@ function IconSpinner() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className: "animate-spin",
-      children: /* @__PURE__ */ jsx46("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+      children: /* @__PURE__ */ jsx50("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
     }
   );
 }
 function IconMoreHorizontal2() {
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs33(
     "svg",
     {
       width: "16",
@@ -2972,9 +3190,9 @@ function IconMoreHorizontal2() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx46("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ jsx46("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ jsx46("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
+        /* @__PURE__ */ jsx50("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx50("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx50("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
       ]
     }
   );
@@ -2992,60 +3210,60 @@ function PostEditorShell({
   sidebar,
   className
 }) {
-  return /* @__PURE__ */ jsxs30("div", { className: cn("flex flex-col h-screen bg-background overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-3 h-14 px-4 border-b border-border bg-card shrink-0", children: [
-      onBack && /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs33("div", { className: cn("flex flex-col h-screen bg-background overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 h-14 px-4 border-b border-border bg-card shrink-0", children: [
+      onBack && /* @__PURE__ */ jsxs33(
         "button",
         {
           onClick: onBack,
           className: "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
           children: [
-            /* @__PURE__ */ jsx46(IconArrowLeft, {}),
+            /* @__PURE__ */ jsx50(IconArrowLeft, {}),
             backLabel
           ]
         }
       ),
-      onBack && /* @__PURE__ */ jsx46("div", { className: "h-5 w-px bg-border" }),
-      title && /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium text-muted-foreground truncate max-w-xs", children: title }),
-      status && /* @__PURE__ */ jsx46(PostStatusBadge, { status, size: "sm" }),
-      /* @__PURE__ */ jsx46("div", { className: "flex-1" }),
-      /* @__PURE__ */ jsx46("button", { className: "inline-flex items-center justify-center h-8 w-8 rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx46(IconMoreHorizontal2, {}) }),
-      /* @__PURE__ */ jsxs30(
+      onBack && /* @__PURE__ */ jsx50("div", { className: "h-5 w-px bg-border" }),
+      title && /* @__PURE__ */ jsx50("span", { className: "text-sm font-medium text-muted-foreground truncate max-w-xs", children: title }),
+      status && /* @__PURE__ */ jsx50(PostStatusBadge, { status, size: "sm" }),
+      /* @__PURE__ */ jsx50("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx50("button", { className: "inline-flex items-center justify-center h-8 w-8 rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx50(IconMoreHorizontal2, {}) }),
+      /* @__PURE__ */ jsxs33(
         "button",
         {
           onClick: onSave,
           disabled: saving,
           className: "inline-flex items-center gap-1.5 h-8 rounded-lg border border-border bg-background px-3 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-60",
           children: [
-            saving && /* @__PURE__ */ jsx46(IconSpinner, {}),
+            saving && /* @__PURE__ */ jsx50(IconSpinner, {}),
             "Save Draft"
           ]
         }
       ),
-      /* @__PURE__ */ jsxs30(
+      /* @__PURE__ */ jsxs33(
         "button",
         {
           onClick: onPublish,
           disabled: publishing,
           className: "inline-flex items-center gap-1.5 h-8 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-60",
           children: [
-            publishing && /* @__PURE__ */ jsx46(IconSpinner, {}),
+            publishing && /* @__PURE__ */ jsx50(IconSpinner, {}),
             "Publish"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs30("div", { className: "flex flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ jsx46("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsx46("div", { className: "max-w-3xl mx-auto", children }) }),
-      /* @__PURE__ */ jsx46("div", { className: "w-72 shrink-0 border-l border-border overflow-y-auto p-4", children: sidebar })
+    /* @__PURE__ */ jsxs33("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx50("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsx50("div", { className: "max-w-3xl mx-auto", children }) }),
+      /* @__PURE__ */ jsx50("div", { className: "w-72 shrink-0 border-l border-border overflow-y-auto p-4", children: sidebar })
     ] })
   ] });
 }
 
 // src/components/content/slug-input.tsx
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 function IconRefresh() {
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs34(
     "svg",
     {
       width: "13",
@@ -3057,9 +3275,9 @@ function IconRefresh() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx47("polyline", { points: "23 4 23 10 17 10" }),
-        /* @__PURE__ */ jsx47("polyline", { points: "1 20 1 14 7 14" }),
-        /* @__PURE__ */ jsx47("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })
+        /* @__PURE__ */ jsx51("polyline", { points: "23 4 23 10 17 10" }),
+        /* @__PURE__ */ jsx51("polyline", { points: "1 20 1 14 7 14" }),
+        /* @__PURE__ */ jsx51("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })
       ]
     }
   );
@@ -3072,10 +3290,10 @@ function SlugInput({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ jsxs31("div", { className: cn("space-y-1", className), children: [
-    /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1", children: [
-      prefix && /* @__PURE__ */ jsx47("span", { className: "shrink-0 text-sm text-muted-foreground select-none", children: prefix }),
-      /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs34("div", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1", children: [
+      prefix && /* @__PURE__ */ jsx51("span", { className: "shrink-0 text-sm text-muted-foreground select-none", children: prefix }),
+      /* @__PURE__ */ jsx51(
         "input",
         {
           type: "text",
@@ -3089,26 +3307,26 @@ function SlugInput({
           placeholder: "your-slug-here"
         }
       ),
-      onGenerate && /* @__PURE__ */ jsx47(
+      onGenerate && /* @__PURE__ */ jsx51(
         "button",
         {
           onClick: onGenerate,
           disabled,
           title: "Generate slug",
           className: "inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-60",
-          children: /* @__PURE__ */ jsx47(IconRefresh, {})
+          children: /* @__PURE__ */ jsx51(IconRefresh, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsx47("p", { className: "text-[10px] text-muted-foreground", children: "Only lowercase letters, numbers, and hyphens" })
+    /* @__PURE__ */ jsx51("p", { className: "text-[10px] text-muted-foreground", children: "Only lowercase letters, numbers, and hyphens" })
   ] });
 }
 
 // src/components/content/post-sidebar-section.tsx
 import * as React22 from "react";
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function IconChevronDown() {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx52(
     "svg",
     {
       width: "14",
@@ -3119,7 +3337,7 @@ function IconChevronDown() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx48("polyline", { points: "6 9 12 15 18 9" })
+      children: /* @__PURE__ */ jsx52("polyline", { points: "6 9 12 15 18 9" })
     }
   );
 }
@@ -3130,28 +3348,28 @@ function PostSidebarSection({
   className
 }) {
   const [open, setOpen] = React22.useState(defaultOpen);
-  return /* @__PURE__ */ jsxs32("div", { className: cn("border-b border-border", className), children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs35("div", { className: cn("border-b border-border", className), children: [
+    /* @__PURE__ */ jsxs35(
       "button",
       {
         onClick: () => setOpen((v) => !v),
         className: "flex w-full items-center justify-between py-3 px-0 text-sm font-medium text-foreground hover:text-primary transition-colors",
         children: [
           title,
-          /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx52(
             "span",
             {
               className: cn(
                 "text-muted-foreground transition-transform duration-200",
                 open ? "rotate-0" : "-rotate-90"
               ),
-              children: /* @__PURE__ */ jsx48(IconChevronDown, {})
+              children: /* @__PURE__ */ jsx52(IconChevronDown, {})
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx48(
+    /* @__PURE__ */ jsx52(
       "div",
       {
         className: cn(
@@ -3165,7 +3383,7 @@ function PostSidebarSection({
 }
 
 // src/components/ui/hsl-color-input.tsx
-import { useState as useState8, useRef as useRef5, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+import { useState as useState11, useRef as useRef6, useEffect as useEffect7, useCallback as useCallback2 } from "react";
 import Color2 from "color";
 import * as Popover2 from "@radix-ui/react-popover";
 
@@ -3176,13 +3394,13 @@ import {
   memo,
   useCallback,
   useContext,
-  useEffect as useEffect5,
+  useEffect as useEffect6,
   useMemo as useMemo2,
-  useRef as useRef4,
-  useState as useState7
+  useRef as useRef5,
+  useState as useState10
 } from "react";
 import * as Slider from "@radix-ui/react-slider";
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 var ColorPickerContext = createContext(void 0);
 var useColorPicker = () => {
   const ctx = useContext(ColorPickerContext);
@@ -3203,18 +3421,17 @@ var ColorPicker = ({
       return Color("#000000");
     }
   })();
-  const [hue, setHueState] = useState7(initial.hue());
-  const [saturation, setSaturationState] = useState7(initial.saturationl());
-  const [lightness, setLightnessState] = useState7(initial.lightness());
-  const [alpha, setAlphaState] = useState7(initial.alpha() * 100);
-  const [mode, setMode] = useState7("HEX");
-  const notifyRef = useRef4(onChange);
-  useEffect5(() => {
+  const [hue, setHueState] = useState10(initial.hue());
+  const [saturation, setSaturationState] = useState10(initial.saturationl());
+  const [lightness, setLightnessState] = useState10(initial.lightness());
+  const [alpha, setAlphaState] = useState10(initial.alpha() * 100);
+  const [mode, setMode] = useState10("HEX");
+  const notifyRef = useRef5(onChange);
+  useEffect6(() => {
     notifyRef.current = onChange;
   }, [onChange]);
   const notify = useCallback((h, s, l, a) => {
-    const hex = Color.hsl(h, s, l).alpha(a / 100).hexa();
-    notifyRef.current?.(hex);
+    notifyRef.current?.(Color.hsl(h, s, l).alpha(a / 100).hexa());
   }, []);
   const setHue = useCallback((h) => {
     setHueState(h);
@@ -3232,14 +3449,14 @@ var ColorPicker = ({
     setAlphaState(a);
     notify(hue, saturation, lightness, a);
   }, [hue, saturation, lightness, notify]);
-  return /* @__PURE__ */ jsx49(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha, mode, setMode }, children: /* @__PURE__ */ jsx49("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
+  return /* @__PURE__ */ jsx53(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha, setMode }, children: /* @__PURE__ */ jsx53("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
 };
 var ColorPickerSelection = memo(({ className, ...props }) => {
-  const containerRef = useRef4(null);
-  const [isDragging, setIsDragging] = useState7(false);
+  const containerRef = useRef5(null);
+  const [isDragging, setIsDragging] = useState10(false);
   const { hue, saturation, lightness, setSaturation, setLightness } = useColorPicker();
-  const [posX, setPosX] = useState7(() => saturation / 100);
-  const [posY, setPosY] = useState7(() => {
+  const [posX, setPosX] = useState10(() => saturation / 100);
+  const [posY, setPosY] = useState10(() => {
     const x = saturation / 100;
     const topL = x < 0.01 ? 100 : 50 + 50 * (1 - x);
     return topL > 0 ? Math.max(0, Math.min(1, 1 - lightness / topL)) : 0;
@@ -3256,10 +3473,9 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
     setPosX(x);
     setPosY(y);
     setSaturation(x * 100);
-    const topL = x < 0.01 ? 100 : 50 + 50 * (1 - x);
-    setLightness(topL * (1 - y));
+    setLightness((x < 0.01 ? 100 : 50 + 50 * (1 - x)) * (1 - y));
   }, [isDragging, setSaturation, setLightness]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isDragging) return;
     const up = () => setIsDragging(false);
     window.addEventListener("pointermove", handleMove);
@@ -3269,7 +3485,7 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
       window.removeEventListener("pointerup", up);
     };
   }, [isDragging, handleMove]);
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(
     "div",
     {
       ref: containerRef,
@@ -3281,15 +3497,11 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
         handleMove(e.nativeEvent);
       },
       ...props,
-      children: /* @__PURE__ */ jsx49(
+      children: /* @__PURE__ */ jsx53(
         "div",
         {
           className: "pointer-events-none absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white",
-          style: {
-            left: `${posX * 100}%`,
-            top: `${posY * 100}%`,
-            boxShadow: "0 0 0 1px rgba(0,0,0,0.6)"
-          }
+          style: { left: `${posX * 100}%`, top: `${posY * 100}%`, boxShadow: "0 0 0 1px rgba(0,0,0,0.6)" }
         }
       )
     }
@@ -3298,119 +3510,82 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
 ColorPickerSelection.displayName = "ColorPickerSelection";
 var ColorPickerHue = ({ className, ...props }) => {
   const { hue, setHue } = useColorPicker();
-  return /* @__PURE__ */ jsxs33(
-    Slider.Root,
-    {
-      className: cn("relative flex h-4 w-full touch-none items-center", className),
-      max: 360,
-      step: 1,
-      value: [hue],
-      onValueChange: ([h]) => setHue(h),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx49(Slider.Track, { className: "relative h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)]", children: /* @__PURE__ */ jsx49(Slider.Range, { className: "absolute h-full" }) }),
-        /* @__PURE__ */ jsx49(Slider.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-white shadow-md focus:outline-none", style: { boxShadow: "0 0 0 1px rgba(0,0,0,0.4)" } })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs36(Slider.Root, { className: cn("relative flex h-4 w-full touch-none items-center", className), max: 360, step: 1, value: [hue], onValueChange: ([h]) => setHue(h), ...props, children: [
+    /* @__PURE__ */ jsx53(Slider.Track, { className: "relative h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)]", children: /* @__PURE__ */ jsx53(Slider.Range, { className: "absolute h-full" }) }),
+    /* @__PURE__ */ jsx53(Slider.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-white shadow-md focus:outline-none", style: { boxShadow: "0 0 0 1px rgba(0,0,0,0.4)" } })
+  ] });
 };
 var ColorPickerAlpha = ({ className, ...props }) => {
   const { alpha, setAlpha, hue, saturation, lightness } = useColorPicker();
-  const solidColor = `hsl(${hue},${saturation}%,${lightness}%)`;
-  return /* @__PURE__ */ jsxs33(
-    Slider.Root,
-    {
-      className: cn("relative flex h-4 w-full touch-none items-center", className),
-      max: 100,
-      step: 1,
-      value: [alpha],
-      onValueChange: ([a]) => setAlpha(a),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx49(
-          Slider.Track,
-          {
-            className: "relative h-3 w-full grow rounded-full",
-            style: {
-              backgroundImage: `linear-gradient(90deg, transparent, ${solidColor}), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")`
-            },
-            children: /* @__PURE__ */ jsx49(Slider.Range, { className: "absolute h-full" })
-          }
-        ),
-        /* @__PURE__ */ jsx49(Slider.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-white shadow-md focus:outline-none", style: { boxShadow: "0 0 0 1px rgba(0,0,0,0.4)" } })
-      ]
-    }
-  );
-};
-var ColorPickerHexOutput = ({ className, ...props }) => {
-  const { hue, saturation, lightness, alpha } = useColorPicker();
-  const hex = Color.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
-  return /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1.5 px-1", className), ...props, children: [
-    /* @__PURE__ */ jsx49("div", { className: "w-5 h-5 rounded border border-white/20 shrink-0", style: { background: `hsl(${hue},${saturation}%,${lightness}%)` } }),
-    /* @__PURE__ */ jsx49("span", { className: "text-xs font-mono text-white/50 flex-1", children: hex })
+  return /* @__PURE__ */ jsxs36(Slider.Root, { className: cn("relative flex h-4 w-full touch-none items-center", className), max: 100, step: 1, value: [alpha], onValueChange: ([a]) => setAlpha(a), ...props, children: [
+    /* @__PURE__ */ jsx53(Slider.Track, { className: "relative h-3 w-full grow rounded-full", style: {
+      backgroundImage: `linear-gradient(90deg,transparent,hsl(${hue},${saturation}%,${lightness}%)),url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")`
+    }, children: /* @__PURE__ */ jsx53(Slider.Range, { className: "absolute h-full" }) }),
+    /* @__PURE__ */ jsx53(Slider.Thumb, { className: "block h-4 w-4 rounded-full border-2 border-white shadow-md focus:outline-none", style: { boxShadow: "0 0 0 1px rgba(0,0,0,0.4)" } })
   ] });
 };
 var ColorPickerEyeDropper = ({ className, ...props }) => {
   const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
-  const pick = async () => {
-    try {
-      const result = await new EyeDropper().open();
-      const c = Color(result.sRGBHex);
-      setHue(c.hue());
-      setSaturation(c.saturationl());
-      setLightness(c.lightness());
-      setAlpha(100);
-    } catch {
-    }
-  };
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(
     "button",
     {
       type: "button",
-      onClick: pick,
       title: "Eye dropper",
-      className: cn(
-        "w-7 h-7 flex items-center justify-center rounded-md",
-        "border border-white/10 text-white/40 hover:text-white/70 hover:border-white/25",
-        "transition-colors shrink-0",
-        className
-      ),
+      onClick: async () => {
+        try {
+          const r = await new EyeDropper().open();
+          const c = Color(r.sRGBHex);
+          setHue(c.hue());
+          setSaturation(c.saturationl());
+          setLightness(c.lightness());
+          setAlpha(100);
+        } catch {
+        }
+      },
+      className: cn("shrink-0 focus:outline-none", className),
+      style: { width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 6, border: "1px solid rgba(255,255,255,0.12)", backgroundColor: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.5)", cursor: "pointer" },
       ...props,
-      children: /* @__PURE__ */ jsxs33("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-        /* @__PURE__ */ jsx49("path", { d: "M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Z" }),
-        /* @__PURE__ */ jsx49("path", { d: "m13.5 10.5 2.25-2.25m0 0 2.25-2.25M15.75 8.25l2.25 2.25M15.75 8.25 13.5 6m4.5-1.5 1.5-1.5" }),
-        /* @__PURE__ */ jsx49("path", { d: "M6.75 7.5 10.5 4.5c.5-.375 1.25-.375 1.5 0l6.75 6.75c.375.5.375 1.25 0 1.5L15 16.5" })
+      children: /* @__PURE__ */ jsxs36("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ jsx53("path", { d: "M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Z" }),
+        /* @__PURE__ */ jsx53("path", { d: "m13.5 10.5 2.25-2.25m0 0 2.25-2.25M15.75 8.25l2.25 2.25M15.75 8.25 13.5 6m4.5-1.5 1.5-1.5" }),
+        /* @__PURE__ */ jsx53("path", { d: "M6.75 7.5 10.5 4.5c.5-.375 1.25-.375 1.5 0l6.75 6.75c.375.5.375 1.25 0 1.5L15 16.5" })
       ] })
     }
   );
 };
 var ColorPickerOutput = ({ className, ...props }) => {
   const { mode, setMode } = useColorPicker();
-  return /* @__PURE__ */ jsxs33(Select, { value: mode, onValueChange: setMode, children: [
-    /* @__PURE__ */ jsx49(SelectTrigger, { className: cn("h-7 w-[4.5rem] shrink-0 text-xs px-2 border-white/10 bg-white/5 text-white/70 rounded-md", className), children: /* @__PURE__ */ jsx49(SelectValue, {}) }),
-    /* @__PURE__ */ jsx49(
-      SelectContent,
+  return /* @__PURE__ */ jsxs36("div", { className: cn("relative shrink-0", className), ...props, children: [
+    /* @__PURE__ */ jsx53(
+      "select",
       {
-        className: "min-w-[4.5rem] border-white/10",
-        style: { backgroundColor: "#1a1c2e", color: "white" },
-        children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ jsx49(
-          SelectItem,
-          {
-            value: f,
-            className: "text-xs text-white/70 focus:bg-white/10 focus:text-white data-[state=checked]:text-white cursor-pointer",
-            style: { color: "rgba(255,255,255,0.7)" },
-            children: f
-          },
-          f
-        ))
+        value: mode,
+        onChange: (e) => setMode(e.target.value),
+        style: {
+          height: 32,
+          width: 72,
+          backgroundColor: "rgba(255,255,255,0.06)",
+          border: "1px solid rgba(255,255,255,0.12)",
+          borderRadius: 6,
+          color: "rgba(255,255,255,0.75)",
+          fontSize: 12,
+          paddingLeft: 8,
+          paddingRight: 24,
+          outline: "none",
+          cursor: "pointer",
+          appearance: "none",
+          WebkitAppearance: "none"
+        },
+        children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ jsx53("option", { value: f, style: { backgroundColor: "#1e2130", color: "rgba(255,255,255,0.8)" }, children: f }, f))
       }
-    )
+    ),
+    /* @__PURE__ */ jsx53("svg", { style: { position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)", width: 12, height: 12, color: "rgba(255,255,255,0.35)", pointerEvents: "none" }, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx53("path", { d: "m6 9 6 6 6-6" }) })
   ] });
 };
 var ColorPickerFormat = ({ className, ...props }) => {
   const { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
-  const [focused, setFocused] = useState7(false);
-  const [localVal, setLocalVal] = useState7("");
+  const [focused, setFocused] = useState10(false);
+  const [localVal, setLocalVal] = useState10("");
   const computedVal = (() => {
     try {
       const c = Color.hsl(hue, saturation, lightness).alpha(alpha / 100);
@@ -3424,29 +3599,28 @@ var ColorPickerFormat = ({ className, ...props }) => {
     }
     return "";
   })();
-  useEffect5(() => {
+  useEffect6(() => {
     if (!focused) setLocalVal(computedVal);
   }, [computedVal, focused]);
   const tryApply = (raw) => {
     try {
       if (mode === "HEX") {
-        const hex = raw.startsWith("#") ? raw : `#${raw}`;
-        const c = Color(hex);
+        const c = Color(raw.startsWith("#") ? raw : `#${raw}`);
         setHue(c.hue());
         setSaturation(c.saturationl());
         setLightness(c.lightness());
         setAlpha(c.alpha() * 100);
       } else if (mode === "HSL") {
-        const parts = raw.split(/[\s,%]+/).filter(Boolean);
-        if (parts.length >= 3) {
-          setHue(+parts[0]);
-          setSaturation(+parts[1]);
-          setLightness(+parts[2]);
+        const p = raw.split(/[\s,%]+/).filter(Boolean);
+        if (p.length >= 3) {
+          setHue(+p[0]);
+          setSaturation(+p[1]);
+          setLightness(+p[2]);
         }
       } else if (mode === "RGB") {
-        const parts = raw.split(/[\s,]+/).filter(Boolean);
-        if (parts.length >= 3) {
-          const c = Color.rgb(+parts[0], +parts[1], +parts[2]);
+        const p = raw.split(/[\s,]+/).filter(Boolean);
+        if (p.length >= 3) {
+          const c = Color.rgb(+p[0], +p[1], +p[2]);
           setHue(c.hue());
           setSaturation(c.saturationl());
           setLightness(c.lightness());
@@ -3455,7 +3629,7 @@ var ColorPickerFormat = ({ className, ...props }) => {
     } catch {
     }
   };
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx53(
     "input",
     {
       type: "text",
@@ -3472,18 +3646,35 @@ var ColorPickerFormat = ({ className, ...props }) => {
         tryApply(localVal);
         setFocused(false);
       },
-      className: cn(
-        "flex-1 min-w-0 h-7 bg-white/5 border border-white/10 rounded-md px-2",
-        "text-xs text-white/70 font-mono outline-none focus:border-white/30",
-        className
-      ),
+      style: {
+        flex: 1,
+        minWidth: 0,
+        height: 32,
+        backgroundColor: "rgba(255,255,255,0.05)",
+        border: "1px solid rgba(255,255,255,0.12)",
+        borderRadius: 6,
+        padding: "0 8px",
+        color: "rgba(255,255,255,0.75)",
+        fontSize: 12,
+        fontFamily: "monospace",
+        outline: "none"
+      },
+      className,
       ...props
     }
   );
 };
+var ColorPickerHexOutput = ({ className, ...props }) => {
+  const { hue, saturation, lightness } = useColorPicker();
+  const hex = Color.hsl(hue, saturation, lightness).hex();
+  return /* @__PURE__ */ jsxs36("div", { className: cn("flex items-center gap-1.5 px-0.5", className), ...props, children: [
+    /* @__PURE__ */ jsx53("div", { className: "w-5 h-5 rounded border border-white/20 shrink-0", style: { background: `hsl(${hue},${saturation}%,${lightness}%)` } }),
+    /* @__PURE__ */ jsx53("span", { className: "text-xs font-mono text-white/50", children: hex })
+  ] });
+};
 
 // src/components/ui/hsl-color-input.tsx
-import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 function hslToHex(hsl) {
   if (!hsl) return "#000000";
   try {
@@ -3506,7 +3697,7 @@ function hexToHsl(hex) {
 }
 function ColorReader({ onHexChange }) {
   const { hue, saturation, lightness, alpha } = useColorPicker();
-  useEffect6(() => {
+  useEffect7(() => {
     try {
       const hex = Color2.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
       onHexChange(hex);
@@ -3516,15 +3707,15 @@ function ColorReader({ onHexChange }) {
   return null;
 }
 function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
-  const [open, setOpen] = useState8(false);
+  const [open, setOpen] = useState11(false);
   const hexValue = hslToHex(value);
   const cssColor = value ? `hsl(${value})` : "transparent";
-  const pendingHexRef = useRef5(hexValue);
-  const onChangeRef = useRef5(onChange);
-  useEffect6(() => {
+  const pendingHexRef = useRef6(hexValue);
+  const onChangeRef = useRef6(onChange);
+  useEffect7(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (open) pendingHexRef.current = hexValue;
   }, [open, hexValue]);
   const handleHexChange = useCallback2((hex) => {
@@ -3539,8 +3730,8 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
     }
     setOpen(newOpen);
   }, [open, hexValue]);
-  return /* @__PURE__ */ jsxs34(Popover2.Root, { open, onOpenChange: disabled ? void 0 : handleOpenChange, children: [
-    /* @__PURE__ */ jsx50(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs37(Popover2.Root, { open, onOpenChange: disabled ? void 0 : handleOpenChange, children: [
+    /* @__PURE__ */ jsx54(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs37(
       "button",
       {
         type: "button",
@@ -3555,18 +3746,18 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
         ),
         "aria-label": "Pick color",
         children: [
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx54(
             "span",
             {
               className: "w-4 h-4 rounded-full border border-white/20 shrink-0 inline-block",
               style: { background: cssColor }
             }
           ),
-          /* @__PURE__ */ jsx50("span", { children: hexValue.toUpperCase() })
+          /* @__PURE__ */ jsx54("span", { children: hexValue.toUpperCase() })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx50(Popover2.Portal, { children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx54(Popover2.Portal, { children: /* @__PURE__ */ jsx54(
       Popover2.Content,
       {
         sideOffset: 6,
@@ -3577,19 +3768,19 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
           "focus:outline-none"
         ),
         onInteractOutside: () => handleOpenChange(false),
-        children: open && /* @__PURE__ */ jsxs34(ColorPicker, { defaultValue: hexValue, className: "gap-2.5", children: [
-          /* @__PURE__ */ jsx50(ColorReader, { onHexChange: handleHexChange }),
-          /* @__PURE__ */ jsx50(ColorPickerSelection, { className: "h-32 w-full rounded-lg" }),
-          /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx50(ColorPickerEyeDropper, {}),
-            /* @__PURE__ */ jsxs34("div", { className: "flex flex-col gap-1.5 flex-1", children: [
-              /* @__PURE__ */ jsx50(ColorPickerHue, {}),
-              /* @__PURE__ */ jsx50(ColorPickerAlpha, {})
+        children: open && /* @__PURE__ */ jsxs37(ColorPicker, { defaultValue: hexValue, className: "gap-2.5", children: [
+          /* @__PURE__ */ jsx54(ColorReader, { onHexChange: handleHexChange }),
+          /* @__PURE__ */ jsx54(ColorPickerSelection, { className: "h-32 w-full rounded-lg" }),
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx54(ColorPickerEyeDropper, {}),
+            /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-1.5 flex-1", children: [
+              /* @__PURE__ */ jsx54(ColorPickerHue, {}),
+              /* @__PURE__ */ jsx54(ColorPickerAlpha, {})
             ] })
           ] }),
-          /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-            /* @__PURE__ */ jsx50(ColorPickerOutput, {}),
-            /* @__PURE__ */ jsx50(ColorPickerFormat, { className: "min-w-0" })
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsx54(ColorPickerOutput, {}),
+            /* @__PURE__ */ jsx54(ColorPickerFormat, { className: "min-w-0" })
           ] })
         ] }, hexValue)
       }
@@ -3598,9 +3789,9 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
 }
 
 // src/hooks/index.ts
-import { useState as useState9 } from "react";
+import { useState as useState12 } from "react";
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = useState9(initial);
+  const [isOpen, setIsOpen] = useState12(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3610,15 +3801,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = useState9(1);
+  const [page, setPage] = useState12(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       style: {
@@ -3633,7 +3824,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ jsx51(
+        pattern === "dots" && /* @__PURE__ */ jsx55(
           "div",
           {
             "aria-hidden": true,
@@ -3647,7 +3838,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ jsx51(
+        pattern === "grid" && /* @__PURE__ */ jsx55(
           "div",
           {
             "aria-hidden": true,
@@ -3661,16 +3852,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx51("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ jsx55("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx56(
     "div",
     {
       style: {
@@ -3687,10 +3878,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs39 } from "react/jsx-runtime";
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ jsxs36("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs39("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ jsx57(
       "img",
       {
         src: imageUrl,
@@ -3699,7 +3890,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__ */ jsx53(
+    ) : /* @__PURE__ */ jsx57(
       "div",
       {
         style: {
@@ -3718,7 +3909,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx57(
       "span",
       {
         style: {
@@ -3734,10 +3925,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs40 } from "react/jsx-runtime";
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ jsxs37("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs40("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx58(
       "h1",
       {
         style: {
@@ -3750,7 +3941,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx54(
+    description && /* @__PURE__ */ jsx58(
       "p",
       {
         style: {
@@ -3766,12 +3957,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs41 } from "react/jsx-runtime";
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ jsxs38("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ jsxs38("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs41("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs41("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx59(
         "label",
         {
           htmlFor: fieldId,
@@ -3783,9 +3974,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ jsx55("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ jsx59("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx59(
       "input",
       {
         id: fieldId,
@@ -3815,13 +4006,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx55("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ jsx55("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ jsx59("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ jsx59("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 function AuthButton({
   loading,
   variant = "primary",
@@ -3864,7 +4055,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx60(
     "button",
     {
       disabled: loading || disabled,
@@ -3876,8 +4067,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsxs39(Fragment5, { children: [
-        /* @__PURE__ */ jsx56(
+      children: loading ? /* @__PURE__ */ jsxs42(Fragment5, { children: [
+        /* @__PURE__ */ jsx60(
           "span",
           {
             style: {
@@ -3898,19 +4089,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-import { jsx as jsx57, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ jsxs40("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ jsx57("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ jsx57("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ jsx57("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ jsxs43("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ jsx61("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ jsx61("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ jsx61("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-import { jsx as jsx58, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ jsxs41("p", { style: {
+  return /* @__PURE__ */ jsxs44("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -3918,7 +4109,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ jsx58(
+    /* @__PURE__ */ jsx62(
       "a",
       {
         href: linkHref,
@@ -3966,6 +4157,8 @@ export {
   ColorPickerOutput,
   ColorPickerSelection,
   ConfirmDialog,
+  DEVICES,
+  DEVICE_ICONS,
   DashboardLayout,
   DataTable,
   Dialog,
@@ -4002,6 +4195,7 @@ export {
   Input,
   Label2 as Label,
   LoadingSpinner,
+  LocalInput,
   MediaCard,
   MediaGrid,
   MediaPickerDialog,
@@ -4018,6 +4212,8 @@ export {
   PostListTable,
   PostSidebarSection,
   PostStatusBadge,
+  ResponsiveSizeDeviceIcon,
+  ResponsiveSizeField,
   SearchBar,
   Select,
   SelectContent,