@webdevarif/dashui 0.3.12 → 0.4.0

package/dist/index.js

@@ -58,6 +58,8 @@ __export(index_exports, {
   ColorPickerOutput: () => ColorPickerOutput,
   ColorPickerSelection: () => ColorPickerSelection,
   ConfirmDialog: () => ConfirmDialog,
+  DEVICES: () => DEVICES,
+  DEVICE_ICONS: () => DEVICE_ICONS,
   DashboardLayout: () => DashboardLayout,
   DataTable: () => DataTable,
   Dialog: () => Dialog,
@@ -94,6 +96,7 @@ __export(index_exports, {
   Input: () => Input,
   Label: () => Label2,
   LoadingSpinner: () => LoadingSpinner,
+  LocalInput: () => LocalInput,
   MediaCard: () => MediaCard,
   MediaGrid: () => MediaGrid,
   MediaPickerDialog: () => MediaPickerDialog,
@@ -110,6 +113,8 @@ __export(index_exports, {
   PostListTable: () => PostListTable,
   PostSidebarSection: () => PostSidebarSection,
   PostStatusBadge: () => PostStatusBadge,
+  ResponsiveSizeDeviceIcon: () => ResponsiveSizeDeviceIcon,
+  ResponsiveSizeField: () => ResponsiveSizeField,
   SearchBar: () => SearchBar,
   Select: () => Select,
   SelectContent: () => SelectContent,
@@ -2472,9 +2477,227 @@ function FormSection({
   ] });
 }
 
+// src/components/form/local-input.tsx
+var import_react = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function LocalInput({
+  value,
+  onChange,
+  commitOnBlur,
+  ...rest
+}) {
+  const [local, setLocal] = (0, import_react.useState)(String(value ?? ""));
+  const ref = (0, import_react.useRef)(null);
+  const onChangeRef = (0, import_react.useRef)(onChange);
+  onChangeRef.current = onChange;
+  (0, import_react.useEffect)(() => {
+    if (document.activeElement !== ref.current) {
+      setLocal(String(value ?? ""));
+    }
+  }, [value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "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
+var import_react2 = require("react");
+
+// src/components/form/responsive-types.tsx
+var import_jsx_runtime40 = require("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__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: "2", y: "4", width: "20", height: "14", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M8 20h8M12 18v2" })
+  ] }),
+  laptop: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: "3", y: "5", width: "18", height: "12", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { d: "M1 19h22" })
+  ] }),
+  tablet: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "12", cy: "18", r: "0.5", fill: "currentColor" })
+  ] }),
+  mobile: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: "6", y: "2", width: "12", height: "20", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "12", cy: "18", r: "0.5", fill: "currentColor" })
+  ] })
+};
+
+// src/components/form/responsive-size-device-icon.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function ResponsiveSizeDeviceIcon({
+  activeDevice,
+  setActiveDevice
+}) {
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "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__ */ (0, import_jsx_runtime41.jsx)(
+      "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__ */ (0, import_jsx_runtime41.jsxs)(
+          "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__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-white/60", children: DEVICE_ICONS[d.key] }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-white/70 flex-1 text-left", children: d.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-white/30", children: d.width }),
+              activeDevice === d.key && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "svg",
+                {
+                  className: "w-3 h-3 text-[#287f71] shrink-0",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "m5 13 4 4L19 7" })
+                }
+              )
+            ]
+          },
+          d.key
+        ))
+      }
+    )
+  ] });
+}
+
+// src/components/form/responsive-size-field.tsx
+var import_react3 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function ResponsiveSizeField({
+  value,
+  unit,
+  customUnit,
+  activeDevice,
+  onSizeChange,
+  onUnitChange,
+  onCustomChange
+}) {
+  const [unitOpen, setUnitOpen] = (0, import_react3.useState)(false);
+  const currentVal = value[activeDevice] ?? value.desktop ?? 0;
+  const isCustom = unit === "custom";
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative flex items-center border border-white/10 rounded-md bg-white/5 w-full", style: { height: 32 }, children: [
+    isCustom ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      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__ */ (0, import_jsx_runtime42.jsx)(
+      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__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "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__ */ (0, import_jsx_runtime42.jsx)(
+            "svg",
+            {
+              className: "w-3 h-3",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("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__ */ (0, import_jsx_runtime42.jsx)(
+        "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__ */ (0, import_jsx_runtime42.jsx)(
+            "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__ */ (0, import_jsx_runtime42.jsxs)(Select, { value: unit, onValueChange: onUnitChange, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        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__ */ (0, import_jsx_runtime42.jsx)(SelectValue, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(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__ */ (0, import_jsx_runtime42.jsx)(SelectItem, { value: u, children: u }, u)) })
+    ] })
+  ] });
+}
+
 // src/components/feedback/alert.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var variantConfig = {
   info: {
     icon: import_lucide_react10.Info,
@@ -2503,7 +2726,7 @@ function Alert({
 }) {
   const config = variantConfig[variant];
   const Icon2 = config.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       className: cn(
@@ -2513,17 +2736,17 @@ function Alert({
       ),
       role: "alert",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex-1", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "font-medium", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("text-sm", title && "mt-1"), children })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon2, { className: "mt-0.5 h-5 w-5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex-1", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-medium", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("text-sm", title && "mt-1"), children })
         ] }),
-        dismissible && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        dismissible && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "button",
           {
             onClick: onDismiss,
             className: "absolute right-3 top-3 rounded-md p-1 opacity-70 hover:opacity-100",
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react10.X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react10.X, { className: "h-4 w-4" })
           }
         )
       ]
@@ -2533,14 +2756,14 @@ function Alert({
 
 // src/components/feedback/loading-spinner.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("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__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_lucide_react11.Loader2,
     {
       className: cn("animate-spin text-muted-foreground", sizeMap2[size], className)
@@ -2549,7 +2772,7 @@ function LoadingSpinner({ size = "md", className }) {
 }
 
 // src/components/feedback/confirm-dialog.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function ConfirmDialog({
   open,
   onOpenChange,
@@ -2561,13 +2784,13 @@ function ConfirmDialog({
   loading,
   variant = "default"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DialogContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DialogTitle, { children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DialogDescription, { children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DialogDescription, { children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(DialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(DialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
         Button,
         {
           variant: "outline",
@@ -2576,14 +2799,14 @@ function ConfirmDialog({
           children: cancelLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         Button,
         {
           variant: variant === "destructive" ? "destructive" : "default",
           onClick: onConfirm,
           disabled: loading,
           children: [
-            loading && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(LoadingSpinner, { size: "sm", className: "mr-2" }),
+            loading && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(LoadingSpinner, { size: "sm", className: "mr-2" }),
             confirmLabel
           ]
         }
@@ -2593,7 +2816,7 @@ function ConfirmDialog({
 }
 
 // src/components/content/post-status-badge.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var statusConfig = {
   DRAFT: {
     label: "Draft",
@@ -2626,7 +2849,7 @@ function PostStatusBadge({
   className
 }) {
   const config = statusConfig[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "span",
     {
       className: cn(
@@ -2636,7 +2859,7 @@ function PostStatusBadge({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             className: cn("inline-block rounded-full", config.dot, {
@@ -2655,9 +2878,9 @@ function PostStatusBadge({
 var React21 = __toESM(require("react"));
 
 // src/components/Skeleton.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function Skeleton2({ width = "100%", height = 16, rounded, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       style: {
@@ -2670,7 +2893,7 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
         flexShrink: 0,
         ...style
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
         "div",
         {
           style: {
@@ -2686,49 +2909,49 @@ function Skeleton2({ width = "100%", height = 16, rounded, style }) {
 }
 
 // src/components/content/post-list-table.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function IconEdit() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime44.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("polyline", { points: "3 6 5 6 21 6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M10 11v6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M14 11v6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M10 11v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M14 11v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" })
   ] });
 }
 function IconCopy() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime44.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
   ] });
 }
 function IconChevronRight() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("polyline", { points: "9 18 15 12 9 6" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("polyline", { points: "9 18 15 12 9 6" }) });
 }
 function IconImage() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("polyline", { points: "21 15 16 10 5 21" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("polyline", { points: "21 15 16 10 5 21" })
   ] });
 }
 function IconPlus() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   ] });
 }
 function formatDate(date) {
@@ -2761,17 +2984,17 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
     { label: "Publish", value: "PUBLISHED" },
     { label: "Archive", value: "ARCHIVED" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative flex items-center gap-1", ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative flex items-center gap-1", ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "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__ */ (0, import_jsx_runtime44.jsx)(IconEdit, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconEdit, {})
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "button",
       {
         onClick: () => {
@@ -2780,11 +3003,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__ */ (0, import_jsx_runtime44.jsx)(IconMoreHorizontal, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconMoreHorizontal, {})
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("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__ */ (0, import_jsx_runtime44.jsxs)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsxs)(
         "button",
         {
           onClick: () => {
@@ -2793,13 +3016,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__ */ (0, import_jsx_runtime44.jsx)(IconCopy, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconCopy, {}),
             "Duplicate"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "relative", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           "button",
           {
             onMouseEnter: () => setStatusOpen(true),
@@ -2807,18 +3030,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__ */ (0, import_jsx_runtime44.jsx)("span", { children: "Change status" }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconChevronRight, {})
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: "Change status" }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconChevronRight, {})
             ]
           }
         ),
-        statusOpen && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        statusOpen && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "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__ */ (0, import_jsx_runtime44.jsx)(
+            children: statusOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "button",
               {
                 onClick: () => {
@@ -2837,8 +3060,8 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "my-1 border-t border-border" }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "my-1 border-t border-border" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         "button",
         {
           onClick: () => {
@@ -2847,7 +3070,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__ */ (0, import_jsx_runtime44.jsx)(IconTrash, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconTrash, {}),
             "Delete"
           ]
         }
@@ -2856,21 +3079,21 @@ function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
   ] });
 }
 function SkeletonRow() {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("tr", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "w-10 h-10 rounded-lg" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("td", { className: "px-4 py-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "h-4 w-40 mb-1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "h-3 w-24" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("tr", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "w-10 h-10 rounded-lg" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("td", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "h-4 w-40 mb-1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "h-3 w-24" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "h-5 w-20 rounded-full" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "w-6 h-6 rounded-full" }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "h-4 w-20" })
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "h-5 w-20 rounded-full" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "w-6 h-6 rounded-full" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "h-4 w-20" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "h-4 w-24" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex gap-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "w-7 h-7 rounded-md" }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Skeleton2, { className: "w-7 h-7 rounded-md" })
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "h-4 w-24" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "w-7 h-7 rounded-md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Skeleton2, { className: "w-7 h-7 rounded-md" })
     ] }) })
   ] });
 }
@@ -2889,45 +3112,45 @@ function PostListTable({
   className
 }) {
   const isEmpty = !loading && posts.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cn("w-full overflow-x-auto rounded-lg border border-border bg-card", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("table", { className: "w-full text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("tr", { className: "border-b border-border bg-muted/40", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-14", children: "Image" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Title" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Author" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Date" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground", children: "Actions" })
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("w-full overflow-x-auto rounded-lg border border-border bg-card", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("tr", { className: "border-b border-border bg-muted/40", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-14", children: "Image" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Title" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Author" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Date" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground", children: "Actions" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SkeletonRow, {}, i)) : isEmpty ? null : posts.map((post) => {
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonRow, {}, i)) : isEmpty ? null : posts.map((post) => {
         const date = post.status === "PUBLISHED" && post.publishedAt ? formatDate(post.publishedAt) : formatDate(post.createdAt);
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           "tr",
           {
             className: "border-b border-border last:border-0 hover:bg-muted/30 transition-colors",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: post.featuredImageUrl ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: post.featuredImageUrl ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "img",
                 {
                   src: post.featuredImageUrl,
                   alt: post.title,
                   className: "w-10 h-10 rounded-lg object-cover"
                 }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IconImage, {}) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("td", { className: "px-4 py-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "font-medium text-foreground leading-tight truncate max-w-[240px]", children: post.title }),
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "text-xs text-muted-foreground mt-0.5 truncate max-w-[240px]", children: [
+              ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconImage, {}) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("td", { className: "px-4 py-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "font-medium text-foreground leading-tight truncate max-w-[240px]", children: post.title }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "text-xs text-muted-foreground mt-0.5 truncate max-w-[240px]", children: [
                   "/",
                   post.slug
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PostStatusBadge, { status: post.status, size: "sm" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: post.author ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm text-foreground truncate max-w-[100px]", children: post.author })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-muted-foreground text-xs", children: "\u2014" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap", children: date }),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PostStatusBadge, { status: post.status, size: "sm" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: post.author ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("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__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-sm text-foreground truncate max-w-[100px]", children: post.author })
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-muted-foreground text-xs", children: "\u2014" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap", children: date }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("td", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 RowActions,
                 {
                   post,
@@ -2943,22 +3166,22 @@ function PostListTable({
         );
       }) })
     ] }),
-    isEmpty && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-muted-foreground mb-3", children: emptyIcon ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("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__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("polyline", { points: "14 2 14 8 20 8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("polyline", { points: "10 9 9 9 8 9" })
+    isEmpty && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "text-muted-foreground mb-3", children: emptyIcon ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("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__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("polyline", { points: "10 9 9 9 8 9" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: emptyMessage ?? `No ${singularLabel.toLowerCase()}s yet.` }),
-      onNewPost && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: emptyMessage ?? `No ${singularLabel.toLowerCase()}s yet.` }),
+      onNewPost && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
         "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__ */ (0, import_jsx_runtime44.jsx)(IconPlus, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconPlus, {}),
             newPostLabel ?? `New ${singularLabel}`
           ]
         }
@@ -2968,7 +3191,7 @@ function PostListTable({
 }
 
 // src/components/content/post-filters-bar.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var STATUS_TABS = [
   { value: "all", label: "All" },
   { value: "DRAFT", label: "Draft" },
@@ -2977,7 +3200,7 @@ var STATUS_TABS = [
   { value: "ARCHIVED", label: "Archived" }
 ];
 function IconSearch() {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "svg",
     {
       width: "14",
@@ -2989,14 +3212,14 @@ function IconSearch() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
       ]
     }
   );
 }
 function IconPlus2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "svg",
     {
       width: "14",
@@ -3008,8 +3231,8 @@ function IconPlus2() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
       ]
     }
   );
@@ -3025,11 +3248,11 @@ function PostFiltersBar({
   typeLabel = "Posts",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "relative flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "absolute left-2.5 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(IconSearch, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "absolute left-2.5 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IconSearch, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "input",
           {
             type: "text",
@@ -3040,7 +3263,7 @@ function PostFiltersBar({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex items-center gap-1 rounded-lg bg-muted p-0.5", children: STATUS_TABS.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center gap-1 rounded-lg bg-muted p-0.5", children: STATUS_TABS.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "button",
         {
           onClick: () => onStatusChange(tab.value),
@@ -3052,20 +3275,20 @@ function PostFiltersBar({
         },
         tab.value
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1" }),
-      onNew && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex-1" }),
+      onNew && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
         "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__ */ (0, import_jsx_runtime45.jsx)(IconPlus2, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IconPlus2, {}),
             newLabel
           ]
         }
       )
     ] }),
-    total !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+    total !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
       total,
       " ",
       total === 1 ? typeLabel.replace(/s$/, "") : typeLabel
@@ -3074,9 +3297,9 @@ function PostFiltersBar({
 }
 
 // src/components/content/post-editor-shell.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function IconArrowLeft() {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "svg",
     {
       width: "14",
@@ -3088,14 +3311,14 @@ function IconArrowLeft() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("polyline", { points: "12 19 5 12 12 5" })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("polyline", { points: "12 19 5 12 12 5" })
       ]
     }
   );
 }
 function IconSpinner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "svg",
     {
       width: "14",
@@ -3107,12 +3330,12 @@ function IconSpinner() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className: "animate-spin",
-      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
     }
   );
 }
 function IconMoreHorizontal2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "svg",
     {
       width: "16",
@@ -3124,9 +3347,9 @@ function IconMoreHorizontal2() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
       ]
     }
   );
@@ -3144,60 +3367,60 @@ function PostEditorShell({
   sidebar,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("flex flex-col h-screen bg-background overflow-hidden", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-3 h-14 px-4 border-b border-border bg-card shrink-0", children: [
-      onBack && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("flex flex-col h-screen bg-background overflow-hidden", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-3 h-14 px-4 border-b border-border bg-card shrink-0", children: [
+      onBack && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "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__ */ (0, import_jsx_runtime46.jsx)(IconArrowLeft, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconArrowLeft, {}),
             backLabel
           ]
         }
       ),
-      onBack && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-5 w-px bg-border" }),
-      title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium text-muted-foreground truncate max-w-xs", children: title }),
-      status && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(PostStatusBadge, { status, size: "sm" }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("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__ */ (0, import_jsx_runtime46.jsx)(IconMoreHorizontal2, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      onBack && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "h-5 w-px bg-border" }),
+      title && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-sm font-medium text-muted-foreground truncate max-w-xs", children: title }),
+      status && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PostStatusBadge, { status, size: "sm" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime50.jsx)(IconMoreHorizontal2, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "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__ */ (0, import_jsx_runtime46.jsx)(IconSpinner, {}),
+            saving && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconSpinner, {}),
             "Save Draft"
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "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__ */ (0, import_jsx_runtime46.jsx)(IconSpinner, {}),
+            publishing && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(IconSpinner, {}),
             "Publish"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "max-w-3xl mx-auto", children }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-72 shrink-0 border-l border-border overflow-y-auto p-4", children: sidebar })
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "max-w-3xl mx-auto", children }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "w-72 shrink-0 border-l border-border overflow-y-auto p-4", children: sidebar })
     ] })
   ] });
 }
 
 // src/components/content/slug-input.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function IconRefresh() {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "svg",
     {
       width: "13",
@@ -3209,9 +3432,9 @@ function IconRefresh() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("polyline", { points: "23 4 23 10 17 10" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("polyline", { points: "1 20 1 14 7 14" }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("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__ */ (0, import_jsx_runtime51.jsx)("polyline", { points: "23 4 23 10 17 10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("polyline", { points: "1 20 1 14 7 14" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("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" })
       ]
     }
   );
@@ -3224,10 +3447,10 @@ function SlugInput({
   disabled = false,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: cn("space-y-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex items-center gap-1", children: [
-      prefix && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "shrink-0 text-sm text-muted-foreground select-none", children: prefix }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-1", children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "shrink-0 text-sm text-muted-foreground select-none", children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "input",
         {
           type: "text",
@@ -3241,26 +3464,26 @@ function SlugInput({
           placeholder: "your-slug-here"
         }
       ),
-      onGenerate && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      onGenerate && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         "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__ */ (0, import_jsx_runtime47.jsx)(IconRefresh, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(IconRefresh, {})
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "text-[10px] text-muted-foreground", children: "Only lowercase letters, numbers, and hyphens" })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "text-[10px] text-muted-foreground", children: "Only lowercase letters, numbers, and hyphens" })
   ] });
 }
 
 // src/components/content/post-sidebar-section.tsx
 var React22 = __toESM(require("react"));
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function IconChevronDown() {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "svg",
     {
       width: "14",
@@ -3271,7 +3494,7 @@ function IconChevronDown() {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("polyline", { points: "6 9 12 15 18 9" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("polyline", { points: "6 9 12 15 18 9" })
     }
   );
 }
@@ -3282,28 +3505,28 @@ function PostSidebarSection({
   className
 }) {
   const [open, setOpen] = React22.useState(defaultOpen);
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("border-b border-border", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("border-b border-border", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       "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__ */ (0, import_jsx_runtime48.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "span",
             {
               className: cn(
                 "text-muted-foreground transition-transform duration-200",
                 open ? "rotate-0" : "-rotate-90"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(IconChevronDown, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(IconChevronDown, {})
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",
       {
         className: cn(
@@ -3317,18 +3540,18 @@ function PostSidebarSection({
 }
 
 // src/components/ui/hsl-color-input.tsx
-var import_react2 = require("react");
+var import_react5 = require("react");
 var import_color2 = __toESM(require("color"));
 var Popover2 = __toESM(require("@radix-ui/react-popover"));
 
 // src/components/ui/color-picker.tsx
 var import_color = __toESM(require("color"));
-var import_react = require("react");
+var import_react4 = require("react");
 var Slider = __toESM(require("@radix-ui/react-slider"));
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var ColorPickerContext = (0, import_react.createContext)(void 0);
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var ColorPickerContext = (0, import_react4.createContext)(void 0);
 var useColorPicker = () => {
-  const ctx = (0, import_react.useContext)(ColorPickerContext);
+  const ctx = (0, import_react4.useContext)(ColorPickerContext);
   if (!ctx) throw new Error("useColorPicker must be used within ColorPicker");
   return ctx;
 };
@@ -3346,52 +3569,51 @@ var ColorPicker = ({
       return (0, import_color.default)("#000000");
     }
   })();
-  const [hue, setHueState] = (0, import_react.useState)(initial.hue());
-  const [saturation, setSaturationState] = (0, import_react.useState)(initial.saturationl());
-  const [lightness, setLightnessState] = (0, import_react.useState)(initial.lightness());
-  const [alpha, setAlphaState] = (0, import_react.useState)(initial.alpha() * 100);
-  const [mode, setMode] = (0, import_react.useState)("HEX");
-  const notifyRef = (0, import_react.useRef)(onChange);
-  (0, import_react.useEffect)(() => {
+  const [hue, setHueState] = (0, import_react4.useState)(initial.hue());
+  const [saturation, setSaturationState] = (0, import_react4.useState)(initial.saturationl());
+  const [lightness, setLightnessState] = (0, import_react4.useState)(initial.lightness());
+  const [alpha, setAlphaState] = (0, import_react4.useState)(initial.alpha() * 100);
+  const [mode, setMode] = (0, import_react4.useState)("HEX");
+  const notifyRef = (0, import_react4.useRef)(onChange);
+  (0, import_react4.useEffect)(() => {
     notifyRef.current = onChange;
   }, [onChange]);
-  const notify = (0, import_react.useCallback)((h, s, l, a) => {
-    const hex = import_color.default.hsl(h, s, l).alpha(a / 100).hexa();
-    notifyRef.current?.(hex);
+  const notify = (0, import_react4.useCallback)((h, s, l, a) => {
+    notifyRef.current?.(import_color.default.hsl(h, s, l).alpha(a / 100).hexa());
   }, []);
-  const setHue = (0, import_react.useCallback)((h) => {
+  const setHue = (0, import_react4.useCallback)((h) => {
     setHueState(h);
     notify(h, saturation, lightness, alpha);
   }, [saturation, lightness, alpha, notify]);
-  const setSaturation = (0, import_react.useCallback)((s) => {
+  const setSaturation = (0, import_react4.useCallback)((s) => {
     setSaturationState(s);
     notify(hue, s, lightness, alpha);
   }, [hue, lightness, alpha, notify]);
-  const setLightness = (0, import_react.useCallback)((l) => {
+  const setLightness = (0, import_react4.useCallback)((l) => {
     setLightnessState(l);
     notify(hue, saturation, l, alpha);
   }, [hue, saturation, alpha, notify]);
-  const setAlpha = (0, import_react.useCallback)((a) => {
+  const setAlpha = (0, import_react4.useCallback)((a) => {
     setAlphaState(a);
     notify(hue, saturation, lightness, a);
   }, [hue, saturation, lightness, notify]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha, mode, setMode }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha, setMode }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
 };
-var ColorPickerSelection = (0, import_react.memo)(({ className, ...props }) => {
-  const containerRef = (0, import_react.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+var ColorPickerSelection = (0, import_react4.memo)(({ className, ...props }) => {
+  const containerRef = (0, import_react4.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
   const { hue, saturation, lightness, setSaturation, setLightness } = useColorPicker();
-  const [posX, setPosX] = (0, import_react.useState)(() => saturation / 100);
-  const [posY, setPosY] = (0, import_react.useState)(() => {
+  const [posX, setPosX] = (0, import_react4.useState)(() => saturation / 100);
+  const [posY, setPosY] = (0, import_react4.useState)(() => {
     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;
   });
-  const bg = (0, import_react.useMemo)(
+  const bg = (0, import_react4.useMemo)(
     () => `linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0)),linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0)),hsl(${hue},100%,50%)`,
     [hue]
   );
-  const handleMove = (0, import_react.useCallback)((e) => {
+  const handleMove = (0, import_react4.useCallback)((e) => {
     if (!isDragging || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
@@ -3399,10 +3621,9 @@ var ColorPickerSelection = (0, import_react.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]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isDragging) return;
     const up = () => setIsDragging(false);
     window.addEventListener("pointermove", handleMove);
@@ -3412,7 +3633,7 @@ var ColorPickerSelection = (0, import_react.memo)(({ className, ...props }) => {
       window.removeEventListener("pointerup", up);
     };
   }, [isDragging, handleMove]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
       ref: containerRef,
@@ -3424,15 +3645,11 @@ var ColorPickerSelection = (0, import_react.memo)(({ className, ...props }) => {
         handleMove(e.nativeEvent);
       },
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "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)" }
         }
       )
     }
@@ -3441,119 +3658,82 @@ var ColorPickerSelection = (0, import_react.memo)(({ className, ...props }) => {
 ColorPickerSelection.displayName = "ColorPickerSelection";
 var ColorPickerHue = ({ className, ...props }) => {
   const { hue, setHue } = useColorPicker();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-    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__ */ (0, import_jsx_runtime49.jsx)(Slider.Track, { className: "relative h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)]", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Slider.Range, { className: "absolute h-full" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(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__ */ (0, import_jsx_runtime53.jsxs)(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__ */ (0, import_jsx_runtime53.jsx)(Slider.Track, { className: "relative h-3 w-full grow rounded-full bg-[linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)]", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Slider.Range, { className: "absolute h-full" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(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__ */ (0, import_jsx_runtime49.jsxs)(
-    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__ */ (0, import_jsx_runtime49.jsx)(
-          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__ */ (0, import_jsx_runtime49.jsx)(Slider.Range, { className: "absolute h-full" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(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 = import_color.default.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex items-center gap-1.5 px-1", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "w-5 h-5 rounded border border-white/20 shrink-0", style: { background: `hsl(${hue},${saturation}%,${lightness}%)` } }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-mono text-white/50 flex-1", children: hex })
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(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__ */ (0, import_jsx_runtime53.jsx)(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__ */ (0, import_jsx_runtime53.jsx)(Slider.Range, { className: "absolute h-full" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(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 = (0, import_color.default)(result.sRGBHex);
-      setHue(c.hue());
-      setSaturation(c.saturationl());
-      setLightness(c.lightness());
-      setAlpha(100);
-    } catch {
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "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 = (0, import_color.default)(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__ */ (0, import_jsx_runtime49.jsxs)("svg", { className: "w-3.5 h-3.5", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime53.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime49.jsxs)(Select, { value: mode, onValueChange: setMode, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(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__ */ (0, import_jsx_runtime49.jsx)(SelectValue, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      SelectContent,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("relative shrink-0", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+      "select",
       {
-        className: "min-w-[4.5rem] border-white/10",
-        style: { backgroundColor: "#1a1c2e", color: "white" },
-        children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          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__ */ (0, import_jsx_runtime53.jsx)("option", { value: f, style: { backgroundColor: "#1e2130", color: "rgba(255,255,255,0.8)" }, children: f }, f))
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("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__ */ (0, import_jsx_runtime53.jsx)("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] = (0, import_react.useState)(false);
-  const [localVal, setLocalVal] = (0, import_react.useState)("");
+  const [focused, setFocused] = (0, import_react4.useState)(false);
+  const [localVal, setLocalVal] = (0, import_react4.useState)("");
   const computedVal = (() => {
     try {
       const c = import_color.default.hsl(hue, saturation, lightness).alpha(alpha / 100);
@@ -3567,29 +3747,28 @@ var ColorPickerFormat = ({ className, ...props }) => {
     }
     return "";
   })();
-  (0, import_react.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!focused) setLocalVal(computedVal);
   }, [computedVal, focused]);
   const tryApply = (raw) => {
     try {
       if (mode === "HEX") {
-        const hex = raw.startsWith("#") ? raw : `#${raw}`;
-        const c = (0, import_color.default)(hex);
+        const c = (0, import_color.default)(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 = import_color.default.rgb(+parts[0], +parts[1], +parts[2]);
+        const p = raw.split(/[\s,]+/).filter(Boolean);
+        if (p.length >= 3) {
+          const c = import_color.default.rgb(+p[0], +p[1], +p[2]);
           setHue(c.hue());
           setSaturation(c.saturationl());
           setLightness(c.lightness());
@@ -3598,7 +3777,7 @@ var ColorPickerFormat = ({ className, ...props }) => {
     } catch {
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "input",
     {
       type: "text",
@@ -3615,18 +3794,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 = import_color.default.hsl(hue, saturation, lightness).hex();
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cn("flex items-center gap-1.5 px-0.5", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "w-5 h-5 rounded border border-white/20 shrink-0", style: { background: `hsl(${hue},${saturation}%,${lightness}%)` } }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-xs font-mono text-white/50", children: hex })
+  ] });
+};
 
 // src/components/ui/hsl-color-input.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function hslToHex(hsl) {
   if (!hsl) return "#000000";
   try {
@@ -3649,7 +3845,7 @@ function hexToHsl(hex) {
 }
 function ColorReader({ onHexChange }) {
   const { hue, saturation, lightness, alpha } = useColorPicker();
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     try {
       const hex = import_color2.default.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
       onHexChange(hex);
@@ -3659,21 +3855,21 @@ function ColorReader({ onHexChange }) {
   return null;
 }
 function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
-  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [open, setOpen] = (0, import_react5.useState)(false);
   const hexValue = hslToHex(value);
   const cssColor = value ? `hsl(${value})` : "transparent";
-  const pendingHexRef = (0, import_react2.useRef)(hexValue);
-  const onChangeRef = (0, import_react2.useRef)(onChange);
-  (0, import_react2.useEffect)(() => {
+  const pendingHexRef = (0, import_react5.useRef)(hexValue);
+  const onChangeRef = (0, import_react5.useRef)(onChange);
+  (0, import_react5.useEffect)(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (open) pendingHexRef.current = hexValue;
   }, [open, hexValue]);
-  const handleHexChange = (0, import_react2.useCallback)((hex) => {
+  const handleHexChange = (0, import_react5.useCallback)((hex) => {
     pendingHexRef.current = hex;
   }, []);
-  const handleOpenChange = (0, import_react2.useCallback)((newOpen) => {
+  const handleOpenChange = (0, import_react5.useCallback)((newOpen) => {
     if (!newOpen && open) {
       const pending = pendingHexRef.current;
       if (pending && pending !== hexValue) {
@@ -3682,8 +3878,8 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
     }
     setOpen(newOpen);
   }, [open, hexValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover2.Root, { open, onOpenChange: disabled ? void 0 : handleOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(Popover2.Root, { open, onOpenChange: disabled ? void 0 : handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       "button",
       {
         type: "button",
@@ -3698,18 +3894,18 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
         ),
         "aria-label": "Pick color",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "span",
             {
               className: "w-4 h-4 rounded-full border border-white/20 shrink-0 inline-block",
               style: { background: cssColor }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: hexValue.toUpperCase() })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: hexValue.toUpperCase() })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Popover2.Content,
       {
         sideOffset: 6,
@@ -3720,19 +3916,19 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
           "focus:outline-none"
         ),
         onInteractOutside: () => handleOpenChange(false),
-        children: open && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ColorPicker, { defaultValue: hexValue, className: "gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorReader, { onHexChange: handleHexChange }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerSelection, { className: "h-32 w-full rounded-lg" }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerEyeDropper, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-1.5 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerHue, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerAlpha, {})
+        children: open && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(ColorPicker, { defaultValue: hexValue, className: "gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColorReader, { onHexChange: handleHexChange }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColorPickerSelection, { className: "h-32 w-full rounded-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColorPickerEyeDropper, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex flex-col gap-1.5 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColorPickerHue, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColorPickerAlpha, {})
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerOutput, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerFormat, { className: "min-w-0" })
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColorPickerOutput, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ColorPickerFormat, { className: "min-w-0" })
           ] })
         ] }, hexValue)
       }
@@ -3741,9 +3937,9 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
 }
 
 // src/hooks/index.ts
-var import_react3 = require("react");
+var import_react6 = require("react");
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(initial);
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3753,15 +3949,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = (0, import_react3.useState)(1);
+  const [page, setPage] = (0, import_react6.useState)(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       style: {
@@ -3776,7 +3972,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3790,7 +3986,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3804,16 +4000,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       style: {
@@ -3830,10 +4026,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "img",
       {
         src: imageUrl,
@@ -3842,7 +4038,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         height: size,
         style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "div",
       {
         style: {
@@ -3861,7 +4057,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "span",
       {
         style: {
@@ -3877,10 +4073,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "h1",
       {
         style: {
@@ -3893,7 +4089,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "p",
       {
         style: {
@@ -3909,12 +4105,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "label",
         {
           htmlFor: fieldId,
@@ -3926,9 +4122,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "input",
       {
         id: fieldId,
@@ -3958,13 +4154,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function AuthButton({
   loading,
   variant = "primary",
@@ -4007,7 +4203,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "button",
     {
       disabled: loading || disabled,
@@ -4019,8 +4215,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "span",
           {
             style: {
@@ -4041,19 +4237,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("p", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -4061,7 +4257,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "a",
       {
         href: linkHref,
@@ -4110,6 +4306,8 @@ var import_next_themes2 = require("next-themes");
   ColorPickerOutput,
   ColorPickerSelection,
   ConfirmDialog,
+  DEVICES,
+  DEVICE_ICONS,
   DashboardLayout,
   DataTable,
   Dialog,
@@ -4146,6 +4344,7 @@ var import_next_themes2 = require("next-themes");
   Input,
   Label,
   LoadingSpinner,
+  LocalInput,
   MediaCard,
   MediaGrid,
   MediaPickerDialog,
@@ -4162,6 +4361,8 @@ var import_next_themes2 = require("next-themes");
   PostListTable,
   PostSidebarSection,
   PostStatusBadge,
+  ResponsiveSizeDeviceIcon,
+  ResponsiveSizeField,
   SearchBar,
   Select,
   SelectContent,