@webdevarif/dashui 0.2.4 → 0.3.0

package/dist/index.mjs

@@ -1913,14 +1913,22 @@ function MediaPickerDialog({
   const fileInputRef = React20.useRef(null);
   const dragCounterRef = React20.useRef(0);
   React20.useEffect(() => {
-    if (open) {
-      setLocalSelected(new Set(initialSelected));
-    } else {
+    if (!open) {
       setLocalSelected(/* @__PURE__ */ new Set());
       setIsDragging(false);
       dragCounterRef.current = 0;
     }
   }, [open]);
+  const prevInitialRef = React20.useRef("");
+  React20.useEffect(() => {
+    if (!open) return;
+    const key = initialSelected.join(",");
+    if (key === prevInitialRef.current) return;
+    prevInitialRef.current = key;
+    if (initialSelected.length > 0) {
+      setLocalSelected(new Set(initialSelected));
+    }
+  }, [open, initialSelected]);
   const handleDragEnter = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -2431,10 +2439,734 @@ function ConfirmDialog({
   ] }) });
 }
 
+// src/components/content/post-status-badge.tsx
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+var statusConfig = {
+  DRAFT: {
+    label: "Draft",
+    container: "bg-muted text-muted-foreground",
+    dot: "bg-gray-400"
+  },
+  PUBLISHED: {
+    label: "Published",
+    container: "bg-primary/10 text-primary",
+    dot: "bg-primary animate-pulse"
+  },
+  SCHEDULED: {
+    label: "Scheduled",
+    container: "bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400",
+    dot: "bg-blue-500 dark:bg-blue-400"
+  },
+  ARCHIVED: {
+    label: "Archived",
+    container: "bg-amber-50 text-amber-600 dark:bg-amber-950 dark:text-amber-400",
+    dot: "bg-amber-500 dark:bg-amber-400"
+  }
+};
+var sizeConfig = {
+  sm: "text-[10px] px-1.5 py-0.5",
+  md: "text-xs px-2 py-1"
+};
+function PostStatusBadge({
+  status,
+  size = "md",
+  className
+}) {
+  const config = statusConfig[status];
+  return /* @__PURE__ */ jsxs27(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full font-medium",
+        config.container,
+        sizeConfig[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx42(
+          "span",
+          {
+            className: cn("inline-block rounded-full", config.dot, {
+              "w-1.5 h-1.5": size === "md",
+              "w-1 h-1": size === "sm"
+            })
+          }
+        ),
+        config.label
+      ]
+    }
+  );
+}
+
+// src/components/content/post-list-table.tsx
+import * as React21 from "react";
+
+// src/components/Skeleton.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+function Skeleton2({ width = "100%", height = 16, rounded, style }) {
+  return /* @__PURE__ */ jsx43(
+    "div",
+    {
+      style: {
+        width,
+        height,
+        background: "var(--muted, #e5e7eb)",
+        borderRadius: rounded ?? "var(--radius, 0.5rem)",
+        overflow: "hidden",
+        position: "relative",
+        flexShrink: 0,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx43(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            background: "linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--background, #fff) 40%, transparent) 50%, transparent 100%)",
+            animation: "dashui-shimmer 1.6s ease-in-out infinite"
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/components/content/post-list-table.tsx
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+function IconEdit() {
+  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx44("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+    /* @__PURE__ */ jsx44("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+  ] });
+}
+function IconTrash() {
+  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx44("polyline", { points: "3 6 5 6 21 6" }),
+    /* @__PURE__ */ jsx44("path", { d: "M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" }),
+    /* @__PURE__ */ jsx44("path", { d: "M10 11v6" }),
+    /* @__PURE__ */ jsx44("path", { d: "M14 11v6" }),
+    /* @__PURE__ */ jsx44("path", { d: "M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" })
+  ] });
+}
+function IconCopy() {
+  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx44("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx44("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+  ] });
+}
+function IconMoreHorizontal() {
+  return /* @__PURE__ */ jsxs28("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx44("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx44("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+    /* @__PURE__ */ jsx44("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
+  ] });
+}
+function IconChevronRight() {
+  return /* @__PURE__ */ jsx44("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx44("polyline", { points: "9 18 15 12 9 6" }) });
+}
+function IconImage() {
+  return /* @__PURE__ */ jsxs28("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx44("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ jsx44("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+    /* @__PURE__ */ jsx44("polyline", { points: "21 15 16 10 5 21" })
+  ] });
+}
+function IconPlus() {
+  return /* @__PURE__ */ jsxs28("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx44("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx44("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] });
+}
+function formatDate(date) {
+  return new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function getInitials(name) {
+  return name.split(" ").slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
+}
+function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
+  const [open, setOpen] = React21.useState(false);
+  const [statusOpen, setStatusOpen] = React21.useState(false);
+  const ref = React21.useRef(null);
+  React21.useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+        setStatusOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  const statusOptions = [
+    { label: "Draft", value: "DRAFT" },
+    { label: "Publish", value: "PUBLISHED" },
+    { label: "Archive", value: "ARCHIVED" }
+  ];
+  return /* @__PURE__ */ jsxs28("div", { className: "relative flex items-center gap-1", ref, children: [
+    /* @__PURE__ */ jsx44(
+      "button",
+      {
+        onClick: () => onEdit?.(post.id),
+        className: "inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+        title: "Edit",
+        children: /* @__PURE__ */ jsx44(IconEdit, {})
+      }
+    ),
+    /* @__PURE__ */ jsx44(
+      "button",
+      {
+        onClick: () => {
+          setOpen((v) => !v);
+          setStatusOpen(false);
+        },
+        className: "inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+        title: "More actions",
+        children: /* @__PURE__ */ jsx44(IconMoreHorizontal, {})
+      }
+    ),
+    open && /* @__PURE__ */ jsxs28("div", { className: "absolute right-0 top-8 z-50 min-w-[160px] rounded-lg border border-border bg-card shadow-md py-1", children: [
+      /* @__PURE__ */ jsxs28(
+        "button",
+        {
+          onClick: () => {
+            onDuplicate?.(post.id);
+            setOpen(false);
+          },
+          className: "flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors",
+          children: [
+            /* @__PURE__ */ jsx44(IconCopy, {}),
+            "Duplicate"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs28("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs28(
+          "button",
+          {
+            onMouseEnter: () => setStatusOpen(true),
+            onMouseLeave: () => setStatusOpen(false),
+            onClick: () => setStatusOpen((v) => !v),
+            className: "flex w-full items-center justify-between gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors",
+            children: [
+              /* @__PURE__ */ jsx44("span", { children: "Change status" }),
+              /* @__PURE__ */ jsx44(IconChevronRight, {})
+            ]
+          }
+        ),
+        statusOpen && /* @__PURE__ */ jsx44(
+          "div",
+          {
+            className: "absolute left-full top-0 z-50 min-w-[130px] rounded-lg border border-border bg-card shadow-md py-1",
+            onMouseEnter: () => setStatusOpen(true),
+            onMouseLeave: () => setStatusOpen(false),
+            children: statusOptions.map((opt) => /* @__PURE__ */ jsx44(
+              "button",
+              {
+                onClick: () => {
+                  onStatusChange?.(post.id, opt.value);
+                  setOpen(false);
+                  setStatusOpen(false);
+                },
+                className: cn(
+                  "flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent transition-colors",
+                  post.status === opt.value && "text-primary font-medium"
+                ),
+                children: opt.label
+              },
+              opt.value
+            ))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx44("div", { className: "my-1 border-t border-border" }),
+      /* @__PURE__ */ jsxs28(
+        "button",
+        {
+          onClick: () => {
+            onDelete?.(post.id);
+            setOpen(false);
+          },
+          className: "flex w-full items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx44(IconTrash, {}),
+            "Delete"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function SkeletonRow() {
+  return /* @__PURE__ */ jsxs28("tr", { children: [
+    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(Skeleton2, { className: "w-10 h-10 rounded-lg" }) }),
+    /* @__PURE__ */ jsxs28("td", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsx44(Skeleton2, { className: "h-4 w-40 mb-1.5" }),
+      /* @__PURE__ */ jsx44(Skeleton2, { className: "h-3 w-24" })
+    ] }),
+    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(Skeleton2, { className: "h-5 w-20 rounded-full" }) }),
+    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx44(Skeleton2, { className: "w-6 h-6 rounded-full" }),
+      /* @__PURE__ */ jsx44(Skeleton2, { className: "h-4 w-20" })
+    ] }) }),
+    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(Skeleton2, { className: "h-4 w-24" }) }),
+    /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs28("div", { className: "flex gap-1", children: [
+      /* @__PURE__ */ jsx44(Skeleton2, { className: "w-7 h-7 rounded-md" }),
+      /* @__PURE__ */ jsx44(Skeleton2, { className: "w-7 h-7 rounded-md" })
+    ] }) })
+  ] });
+}
+function PostListTable({
+  posts,
+  loading = false,
+  singularLabel = "Post",
+  onEdit,
+  onDelete,
+  onDuplicate,
+  onStatusChange,
+  emptyMessage,
+  emptyIcon,
+  onNewPost,
+  newPostLabel,
+  className
+}) {
+  const isEmpty = !loading && posts.length === 0;
+  return /* @__PURE__ */ jsxs28("div", { className: cn("w-full overflow-x-auto rounded-lg border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs28("table", { className: "w-full text-sm", children: [
+      /* @__PURE__ */ jsx44("thead", { children: /* @__PURE__ */ jsxs28("tr", { className: "border-b border-border bg-muted/40", children: [
+        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground w-14", children: "Image" }),
+        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Title" }),
+        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Status" }),
+        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Author" }),
+        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-left text-xs font-medium text-muted-foreground", children: "Date" }),
+        /* @__PURE__ */ jsx44("th", { className: "px-4 py-2.5 text-right text-xs font-medium text-muted-foreground", children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx44("tbody", { children: loading ? Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx44(SkeletonRow, {}, i)) : isEmpty ? null : posts.map((post) => {
+        const date = post.status === "PUBLISHED" && post.publishedAt ? formatDate(post.publishedAt) : formatDate(post.createdAt);
+        return /* @__PURE__ */ jsxs28(
+          "tr",
+          {
+            className: "border-b border-border last:border-0 hover:bg-muted/30 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: post.featuredImageUrl ? /* @__PURE__ */ jsx44(
+                "img",
+                {
+                  src: post.featuredImageUrl,
+                  alt: post.title,
+                  className: "w-10 h-10 rounded-lg object-cover"
+                }
+              ) : /* @__PURE__ */ jsx44("div", { className: "w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx44(IconImage, {}) }) }),
+              /* @__PURE__ */ jsxs28("td", { className: "px-4 py-3", children: [
+                /* @__PURE__ */ jsx44("div", { className: "font-medium text-foreground leading-tight truncate max-w-[240px]", children: post.title }),
+                /* @__PURE__ */ jsxs28("div", { className: "text-xs text-muted-foreground mt-0.5 truncate max-w-[240px]", children: [
+                  "/",
+                  post.slug
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44(PostStatusBadge, { status: post.status, size: "sm" }) }),
+              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: post.author ? /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx44("div", { className: "w-6 h-6 rounded-full bg-primary/20 text-primary flex items-center justify-center text-[10px] font-semibold shrink-0", children: getInitials(post.author) }),
+                /* @__PURE__ */ jsx44("span", { className: "text-sm text-foreground truncate max-w-[100px]", children: post.author })
+              ] }) : /* @__PURE__ */ jsx44("span", { className: "text-muted-foreground text-xs", children: "\u2014" }) }),
+              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3 text-sm text-muted-foreground whitespace-nowrap", children: date }),
+              /* @__PURE__ */ jsx44("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx44("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx44(
+                RowActions,
+                {
+                  post,
+                  onEdit,
+                  onDelete,
+                  onDuplicate,
+                  onStatusChange
+                }
+              ) }) })
+            ]
+          },
+          post.id
+        );
+      }) })
+    ] }),
+    isEmpty && /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [
+      /* @__PURE__ */ jsx44("div", { className: "text-muted-foreground mb-3", children: emptyIcon ?? /* @__PURE__ */ jsxs28("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", className: "opacity-40", children: [
+        /* @__PURE__ */ jsx44("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx44("polyline", { points: "14 2 14 8 20 8" }),
+        /* @__PURE__ */ jsx44("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+        /* @__PURE__ */ jsx44("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+        /* @__PURE__ */ jsx44("polyline", { points: "10 9 9 9 8 9" })
+      ] }) }),
+      /* @__PURE__ */ jsx44("p", { className: "text-sm text-muted-foreground mb-4", children: emptyMessage ?? `No ${singularLabel.toLowerCase()}s yet.` }),
+      onNewPost && /* @__PURE__ */ jsxs28(
+        "button",
+        {
+          onClick: onNewPost,
+          className: "inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx44(IconPlus, {}),
+            newPostLabel ?? `New ${singularLabel}`
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/content/post-filters-bar.tsx
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+var STATUS_TABS = [
+  { value: "all", label: "All" },
+  { value: "DRAFT", label: "Draft" },
+  { value: "PUBLISHED", label: "Published" },
+  { value: "SCHEDULED", label: "Scheduled" },
+  { value: "ARCHIVED", label: "Archived" }
+];
+function IconSearch() {
+  return /* @__PURE__ */ jsxs29(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx45("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx45("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+      ]
+    }
+  );
+}
+function IconPlus2() {
+  return /* @__PURE__ */ jsxs29(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx45("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+        /* @__PURE__ */ jsx45("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+      ]
+    }
+  );
+}
+function PostFiltersBar({
+  search,
+  onSearch,
+  status,
+  onStatusChange,
+  onNew,
+  newLabel = "New Post",
+  total,
+  typeLabel = "Posts",
+  className
+}) {
+  return /* @__PURE__ */ jsxs29("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap items-center gap-3", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "relative flex items-center", children: [
+        /* @__PURE__ */ jsx45("span", { className: "absolute left-2.5 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsx45(IconSearch, {}) }),
+        /* @__PURE__ */ jsx45(
+          "input",
+          {
+            type: "text",
+            value: search,
+            onChange: (e) => onSearch(e.target.value),
+            placeholder: `Search ${typeLabel}\u2026`,
+            className: "h-8 pl-8 pr-3 rounded-lg border border-border bg-background text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-colors w-56"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-1 rounded-lg bg-muted p-0.5", children: STATUS_TABS.map((tab) => /* @__PURE__ */ jsx45(
+        "button",
+        {
+          onClick: () => onStatusChange(tab.value),
+          className: cn(
+            "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
+            status === tab.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: tab.label
+        },
+        tab.value
+      )) }),
+      /* @__PURE__ */ jsx45("div", { className: "flex-1" }),
+      onNew && /* @__PURE__ */ jsxs29(
+        "button",
+        {
+          onClick: onNew,
+          className: "inline-flex items-center gap-1.5 h-8 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx45(IconPlus2, {}),
+            newLabel
+          ]
+        }
+      )
+    ] }),
+    total !== void 0 && /* @__PURE__ */ jsxs29("p", { className: "text-xs text-muted-foreground", children: [
+      total,
+      " ",
+      total === 1 ? typeLabel.replace(/s$/, "") : typeLabel
+    ] })
+  ] });
+}
+
+// src/components/content/post-editor-shell.tsx
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+function IconArrowLeft() {
+  return /* @__PURE__ */ jsxs30(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx46("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ jsx46("polyline", { points: "12 19 5 12 12 5" })
+      ]
+    }
+  );
+}
+function IconSpinner() {
+  return /* @__PURE__ */ jsx46(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "animate-spin",
+      children: /* @__PURE__ */ jsx46("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function IconMoreHorizontal2() {
+  return /* @__PURE__ */ jsxs30(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx46("circle", { cx: "5", cy: "12", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx46("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
+        /* @__PURE__ */ jsx46("circle", { cx: "19", cy: "12", r: "1", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function PostEditorShell({
+  title,
+  backLabel = "Back",
+  onBack,
+  onSave,
+  onPublish,
+  saving = false,
+  publishing = false,
+  status,
+  children,
+  sidebar,
+  className
+}) {
+  return /* @__PURE__ */ jsxs30("div", { className: cn("flex flex-col h-screen bg-background overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-3 h-14 px-4 border-b border-border bg-card shrink-0", children: [
+      onBack && /* @__PURE__ */ jsxs30(
+        "button",
+        {
+          onClick: onBack,
+          className: "inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors",
+          children: [
+            /* @__PURE__ */ jsx46(IconArrowLeft, {}),
+            backLabel
+          ]
+        }
+      ),
+      onBack && /* @__PURE__ */ jsx46("div", { className: "h-5 w-px bg-border" }),
+      title && /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium text-muted-foreground truncate max-w-xs", children: title }),
+      status && /* @__PURE__ */ jsx46(PostStatusBadge, { status, size: "sm" }),
+      /* @__PURE__ */ jsx46("div", { className: "flex-1" }),
+      /* @__PURE__ */ jsx46("button", { className: "inline-flex items-center justify-center h-8 w-8 rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx46(IconMoreHorizontal2, {}) }),
+      /* @__PURE__ */ jsxs30(
+        "button",
+        {
+          onClick: onSave,
+          disabled: saving,
+          className: "inline-flex items-center gap-1.5 h-8 rounded-lg border border-border bg-background px-3 text-sm font-medium hover:bg-accent transition-colors disabled:opacity-60",
+          children: [
+            saving && /* @__PURE__ */ jsx46(IconSpinner, {}),
+            "Save Draft"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs30(
+        "button",
+        {
+          onClick: onPublish,
+          disabled: publishing,
+          className: "inline-flex items-center gap-1.5 h-8 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-60",
+          children: [
+            publishing && /* @__PURE__ */ jsx46(IconSpinner, {}),
+            "Publish"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs30("div", { className: "flex flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx46("div", { className: "flex-1 overflow-y-auto p-6", children: /* @__PURE__ */ jsx46("div", { className: "max-w-3xl mx-auto", children }) }),
+      /* @__PURE__ */ jsx46("div", { className: "w-72 shrink-0 border-l border-border overflow-y-auto p-4", children: sidebar })
+    ] })
+  ] });
+}
+
+// src/components/content/slug-input.tsx
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+function IconRefresh() {
+  return /* @__PURE__ */ jsxs31(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx47("polyline", { points: "23 4 23 10 17 10" }),
+        /* @__PURE__ */ jsx47("polyline", { points: "1 20 1 14 7 14" }),
+        /* @__PURE__ */ jsx47("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" })
+      ]
+    }
+  );
+}
+function SlugInput({
+  value,
+  onChange,
+  onGenerate,
+  prefix,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs31("div", { className: cn("space-y-1", className), children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1", children: [
+      prefix && /* @__PURE__ */ jsx47("span", { className: "shrink-0 text-sm text-muted-foreground select-none", children: prefix }),
+      /* @__PURE__ */ jsx47(
+        "input",
+        {
+          type: "text",
+          value,
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          className: cn(
+            "flex-1 h-8 border-0 border-b border-input bg-transparent text-sm focus:outline-none focus:border-primary transition-colors",
+            disabled && "opacity-60 cursor-not-allowed"
+          ),
+          placeholder: "your-slug-here"
+        }
+      ),
+      onGenerate && /* @__PURE__ */ jsx47(
+        "button",
+        {
+          onClick: onGenerate,
+          disabled,
+          title: "Generate slug",
+          className: "inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-60",
+          children: /* @__PURE__ */ jsx47(IconRefresh, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx47("p", { className: "text-[10px] text-muted-foreground", children: "Only lowercase letters, numbers, and hyphens" })
+  ] });
+}
+
+// src/components/content/post-sidebar-section.tsx
+import * as React22 from "react";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+function IconChevronDown() {
+  return /* @__PURE__ */ jsx48(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx48("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+function PostSidebarSection({
+  title,
+  children,
+  defaultOpen = true,
+  className
+}) {
+  const [open, setOpen] = React22.useState(defaultOpen);
+  return /* @__PURE__ */ jsxs32("div", { className: cn("border-b border-border", className), children: [
+    /* @__PURE__ */ jsxs32(
+      "button",
+      {
+        onClick: () => setOpen((v) => !v),
+        className: "flex w-full items-center justify-between py-3 px-0 text-sm font-medium text-foreground hover:text-primary transition-colors",
+        children: [
+          title,
+          /* @__PURE__ */ jsx48(
+            "span",
+            {
+              className: cn(
+                "text-muted-foreground transition-transform duration-200",
+                open ? "rotate-0" : "-rotate-90"
+              ),
+              children: /* @__PURE__ */ jsx48(IconChevronDown, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx48(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden transition-all duration-200",
+          open ? "max-h-[9999px] pb-4 opacity-100" : "max-h-0 opacity-0 pointer-events-none"
+        ),
+        children
+      }
+    )
+  ] });
+}
+
 // src/hooks/index.ts
-import { useState as useState5 } from "react";
+import { useState as useState7 } from "react";
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = useState5(initial);
+  const [isOpen, setIsOpen] = useState7(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -2444,15 +3176,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = useState5(1);
+  const [page, setPage] = useState7(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       style: {
@@ -2467,7 +3199,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ jsx42(
+        pattern === "dots" && /* @__PURE__ */ jsx49(
           "div",
           {
             "aria-hidden": true,
@@ -2481,7 +3213,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ jsx42(
+        pattern === "grid" && /* @__PURE__ */ jsx49(
           "div",
           {
             "aria-hidden": true,
@@ -2495,16 +3227,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ jsx42("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ jsx49("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       style: {
@@ -2521,10 +3253,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ jsxs28("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsxs34("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ jsx51(
       "img",
       {
         src: imageUrl,
@@ -2533,7 +3265,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__ */ jsx44(
+    ) : /* @__PURE__ */ jsx51(
       "div",
       {
         style: {
@@ -2552,7 +3284,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx51(
       "span",
       {
         style: {
@@ -2568,10 +3300,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ jsxs29("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs35("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ jsx52(
       "h1",
       {
         style: {
@@ -2584,7 +3316,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ jsx45(
+    description && /* @__PURE__ */ jsx52(
       "p",
       {
         style: {
@@ -2600,12 +3332,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ jsxs30("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsxs36("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ jsxs36("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx53(
         "label",
         {
           htmlFor: fieldId,
@@ -2617,9 +3349,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ jsx46("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ jsx53("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ jsx46(
+    /* @__PURE__ */ jsx53(
       "input",
       {
         id: fieldId,
@@ -2649,13 +3381,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx46("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ jsx46("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ jsx53("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ jsx53("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-import { Fragment as Fragment5, jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
 function AuthButton({
   loading,
   variant = "primary",
@@ -2698,7 +3430,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx54(
     "button",
     {
       disabled: loading || disabled,
@@ -2710,8 +3442,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsxs31(Fragment5, { children: [
-        /* @__PURE__ */ jsx47(
+      children: loading ? /* @__PURE__ */ jsxs37(Fragment5, { children: [
+        /* @__PURE__ */ jsx54(
           "span",
           {
             style: {
@@ -2732,19 +3464,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ jsxs32("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ jsx48("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ jsx48("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ jsx48("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ jsxs38("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ jsx55("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ jsx55("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ jsx55("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ jsxs33("p", { style: {
+  return /* @__PURE__ */ jsxs39("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -2752,7 +3484,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx56(
       "a",
       {
         href: linkHref,
@@ -2769,37 +3501,6 @@ function AuthFootnote({ text, linkText, linkHref }) {
   ] });
 }
 
-// src/components/Skeleton.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
-function Skeleton2({ width = "100%", height = 16, rounded, style }) {
-  return /* @__PURE__ */ jsx50(
-    "div",
-    {
-      style: {
-        width,
-        height,
-        background: "var(--muted, #e5e7eb)",
-        borderRadius: rounded ?? "var(--radius, 0.5rem)",
-        overflow: "hidden",
-        position: "relative",
-        flexShrink: 0,
-        ...style
-      },
-      children: /* @__PURE__ */ jsx50(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            inset: 0,
-            background: "linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--background, #fff) 40%, transparent) 50%, transparent 100%)",
-            animation: "dashui-shimmer 1.6s ease-in-out infinite"
-          }
-        }
-      )
-    }
-  );
-}
-
 // src/index.ts
 import { ThemeProvider, useTheme as useTheme2 } from "next-themes";
 export {
@@ -2869,6 +3570,11 @@ export {
   Popover,
   PopoverContent,
   PopoverTrigger,
+  PostEditorShell,
+  PostFiltersBar,
+  PostListTable,
+  PostSidebarSection,
+  PostStatusBadge,
   SearchBar,
   Select,
   SelectContent,
@@ -2883,6 +3589,7 @@ export {
   Separator3 as Separator,
   Sidebar,
   Skeleton2 as Skeleton,
+  SlugInput,
   Stats,
   StorageBar,
   Switch,