@kyro-cms/admin 0.9.1 → 0.9.2

package/dist/index.cjs

@@ -1,10 +1,10 @@
 'use strict';
 
-var React54 = require('react');
+var React56 = require('react');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
-var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
 var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
@@ -41,7 +41,7 @@ var worker_threads = require('worker_threads');
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React54__default = /*#__PURE__*/_interopDefault(React54);
+var React56__default = /*#__PURE__*/_interopDefault(React56);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var Link4__default = /*#__PURE__*/_interopDefault(Link4);
 var Image3__default = /*#__PURE__*/_interopDefault(Image3);
@@ -486,7 +486,7 @@ function PageHeader({
             children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) })
           }
         ),
-        breadcrumbs?.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React54__default.default.Fragment, { children: [
+        breadcrumbs?.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React56__default.default.Fragment, { children: [
           i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-20 text-[10px]", children: "/" }),
           crumb.href || crumb.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
             "a",
@@ -510,7 +510,7 @@ function PageHeader({
       ] }),
       description && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1", children: description }),
-        metadata && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: metadata.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React54__default.default.Fragment, { children: [
+        metadata && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: metadata.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React56__default.default.Fragment, { children: [
           i === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-20 ml-1", children: "\xB7" }),
           item
         ] }, i)) }),
@@ -576,6 +576,89 @@ function CountBadge({ count, max = 99 }) {
   if (count === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-medium bg-gray-200 text-gray-700 rounded-full", children: count > max ? `${max}+` : count });
 }
+function Button({
+  variant = "secondary",
+  size = "md",
+  loading = false,
+  children,
+  className = "",
+  disabled,
+  ...props
+}) {
+  const baseClass = "kyro-btn";
+  const variantClass = `kyro-btn-${variant}`;
+  const sizeClass = `kyro-btn-${size}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: `${baseClass} ${variantClass} ${sizeClass} ${className}`,
+      disabled: disabled || loading,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kyro-btn-loading", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "kyro-btn-spinner", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeDasharray: "60 30" }) }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: loading ? "kyro-btn-text-hidden" : "", children })
+      ]
+    }
+  );
+}
+function Pagination({ page, totalPages, totalDocs, limit, onPageChange, onLimitChange }) {
+  if (totalPages <= 1) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--kyro-border)]", children: [
+    totalDocs !== void 0 && limit ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-[var(--kyro-text-secondary)] font-medium", children: [
+      "Showing ",
+      (page - 1) * limit + 1,
+      " to ",
+      Math.min(page * limit, totalDocs),
+      " of ",
+      totalDocs
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      onLimitChange && /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: limit,
+          onChange: (e) => onLimitChange(Number(e.target.value)),
+          className: "text-xs border border-[var(--kyro-border)] rounded-lg px-2 py-1 bg-[var(--kyro-bg)] text-[var(--kyro-text-secondary)]",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: 10, children: "10/page" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: 25, children: "25/page" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: 50, children: "50/page" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: 100, children: "100/page" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-[var(--kyro-text-secondary)] font-medium", children: [
+        "Page ",
+        page,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            disabled: page <= 1,
+            onClick: () => onPageChange(page - 1),
+            children: "\u2190 Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            disabled: page >= totalPages,
+            onClick: () => onPageChange(page + 1),
+            children: "Next \u2192"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 
 // src/lib/resolve-field-value.ts
 function resolveFieldValue(fields2, formData, fieldName) {
@@ -647,14 +730,14 @@ function ListView({
       window.location.href = `${adminPath}/${collectionSlug}/${id}`;
     }
   };
-  const [docs, setDocs] = React54.useState(initialDocs);
-  const [totalDocs, setTotalDocs] = React54.useState(initialTotal);
-  const [loading, setLoading] = React54.useState(false);
-  const [page, setPage] = React54.useState(1);
-  const [limit, setLimit] = React54.useState(10);
-  const [selectedIds, setSelectedIds] = React54.useState(/* @__PURE__ */ new Set());
-  const [search, setSearch] = React54.useState("");
-  const [filters, setFilters] = React54.useState([]);
+  const [docs, setDocs] = React56.useState(initialDocs);
+  const [totalDocs, setTotalDocs] = React56.useState(initialTotal);
+  const [loading, setLoading] = React56.useState(false);
+  const [page, setPage] = React56.useState(1);
+  const [limit, setLimit] = React56.useState(10);
+  const [selectedIds, setSelectedIds] = React56.useState(/* @__PURE__ */ new Set());
+  const [search, setSearch] = React56.useState("");
+  const [filters, setFilters] = React56.useState([]);
   const { confirm, alert } = useUIStore();
   const addFilter = () => {
     setFilters([...filters, { field: "", operator: "equals", value: "" }]);
@@ -670,9 +753,9 @@ function ListView({
   const updateFilter = (index, updates) => {
     setFilters(filters.map((f, i) => i === index ? { ...f, ...updates } : f));
   };
-  const [sort, setSort] = React54.useState(null);
-  const [showFilters, setShowFilters] = React54.useState(false);
-  const [showColumns, setShowColumns] = React54.useState(false);
+  const [sort, setSort] = React56.useState(null);
+  const [showFilters, setShowFilters] = React56.useState(false);
+  const [showColumns, setShowColumns] = React56.useState(false);
   function flattenFields(fields2) {
     const result = [];
     for (const field3 of fields2 || []) {
@@ -691,12 +774,12 @@ function ListView({
     }
     return result;
   }
-  const allFields = React54.useMemo(
+  const allFields = React56.useMemo(
     () => flattenFields(collection.fields),
     [collection.fields]
   );
   const titleField = typeof collection.admin?.useAsTitle === "string" ? collection.admin.useAsTitle : allFields.find((f) => f.type !== "group" && typeof f.name === "string")?.name;
-  const [visibleColumns, setVisibleColumns] = React54.useState(() => {
+  const [visibleColumns, setVisibleColumns] = React56.useState(() => {
     let cols;
     if (collection.admin?.defaultColumns) {
       cols = [...collection.admin?.defaultColumns || []];
@@ -711,7 +794,7 @@ function ListView({
     }
     return new Set(cols);
   });
-  const toggleColumn = React54.useCallback((fieldName) => {
+  const toggleColumn = React56.useCallback((fieldName) => {
     setVisibleColumns((prev) => {
       const next = new Set(prev);
       if (next.has(fieldName)) {
@@ -730,7 +813,7 @@ function ListView({
     }
     return fieldName;
   }
-  const handleSort = React54.useCallback((fieldName) => {
+  const handleSort = React56.useCallback((fieldName) => {
     const resolvedField = resolveSortField(fieldName);
     setSort((prev) => {
       if (prev && prev.field === resolvedField) {
@@ -742,12 +825,12 @@ function ListView({
       return { field: resolvedField, direction: "asc" };
     });
   }, []);
-  const displayFields = React54.useMemo(
+  const displayFields = React56.useMemo(
     () => {
       const fields2 = allFields.filter((f) => !!f.name && visibleColumns.has(f.name));
-      if (visibleColumns.has("publishStatus")) {
+      if (visibleColumns.has("status")) {
         fields2.push({
-          name: "publishStatus",
+          name: "status",
           type: "select",
           label: "Status",
           options: [
@@ -772,7 +855,7 @@ function ListView({
     const val = resolveFieldValue(collection.fields, doc, field3.name);
     return val ?? null;
   }
-  const fetchDocs = React54.useCallback(async () => {
+  const fetchDocs = React56.useCallback(async () => {
     setLoading(true);
     try {
       const params = new URLSearchParams({
@@ -797,13 +880,13 @@ function ListView({
       setLoading(false);
     }
   }, [collectionSlug, page, limit, search, sort, filters]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (docs.length === 0 && initialTotal === 0) {
       fetchDocs();
     }
   }, []);
-  const isFirstRender = React54.useRef(true);
-  React54.useEffect(() => {
+  const isFirstRender = React56.useRef(true);
+  React56.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -886,24 +969,7 @@ function ListView({
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 max-w-md", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)]",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: "2",
-                d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-              }
-            )
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-4 h-4" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -923,24 +989,7 @@ function ListView({
             onClick: () => setShowFilters(!showFilters),
             className: `flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm transition-all ${showFilters || filters.length > 0 ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]" : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"}`,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-                    }
-                  )
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-4 h-4" }),
               "Filters",
               filters.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 px-1.5 py-0.5 bg-[var(--kyro-sidebar-text-active)] text-[var(--kyro-sidebar-active)] rounded-full text-xs", children: filters.length })
             ]
@@ -954,24 +1003,7 @@ function ListView({
               onClick: () => setShowColumns(!showColumns),
               className: "flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: "w-4 h-4",
-                    fill: "none",
-                    stroke: "currentColor",
-                    viewBox: "0 0 24 24",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "path",
-                      {
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        strokeWidth: "2",
-                        d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-                      }
-                    )
-                  }
-                ),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Columns3, { className: "w-4 h-4" }),
                 "Columns"
               ]
             }
@@ -1023,24 +1055,7 @@ function ListView({
             onClick: addFilter,
             className: "flex items-center gap-2 px-3 py-1.5 text-sm font-bold text-[var(--kyro-sidebar-active)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "M12 5v14M5 12h14"
-                    }
-                  )
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
               "Add Filter"
             ]
           }
@@ -1091,24 +1106,7 @@ function ListView({
               type: "button",
               onClick: () => removeFilter(index),
               className: "p-2 text-[var(--kyro-text-muted)] hover:text-red-500 transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
             }
           )
         ] }, index)),
@@ -1128,24 +1126,7 @@ function ListView({
             onClick: handleBulkDelete,
             className: "flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg font-bold text-sm hover:bg-red-600 transition-all",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                    }
-                  )
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" }),
               "Delete Selected"
             ]
           }
@@ -1162,24 +1143,7 @@ function ListView({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "surface-tile overflow-hidden", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 p-4", children: /* @__PURE__ */ jsxRuntime.jsx(Shimmer, { variant: "table-row", count: 8 }) }) : docs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-8", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "svg",
-        {
-          className: "w-8 h-8 text-[var(--kyro-text-muted)]",
-          fill: "none",
-          stroke: "currentColor",
-          viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              strokeWidth: "1.5",
-              d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-            }
-          )
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Archive, { className: "w-4 h-4" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-[var(--kyro-text-primary)] text-base", children: "No documents found" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--kyro-text-secondary)] mt-1", children: hasActiveFilters ? "Try adjusting your filters or search query." : `Get started by creating your first ${(collection.singularLabel || collection.label || collectionSlug).toLowerCase()}.` }),
       !hasActiveFilters && canCreate && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1189,24 +1153,7 @@ function ListView({
           onClick: handleCreate,
           className: "mt-4 kyro-btn kyro-btn-md kyro-btn-primary shadow-md flex items-center gap-2",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "w-3.5 h-3.5",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: "2.5",
-                    d: "M12 5v14M5 12h14"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
             "Create",
             " ",
             String(collection.singularLabel || collection.label || collectionSlug)
@@ -1231,24 +1178,7 @@ function ListView({
             onClick: () => handleSort(field3.name),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
               checkTabbedValue(displayFields, field3.type) ?? (field3.label || field3.name),
-              sort && sort.field === field3.name && /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: `w-3 h-3 ${sort.direction === "desc" ? "rotate-180" : ""}`,
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2",
-                      d: "M5 15l7-7 7 7"
-                    }
-                  )
-                }
-              )
+              sort && sort.field === field3.name && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-4 h-4" })
             ] })
           },
           field3.name
@@ -1311,24 +1241,7 @@ function ListView({
                       onClick: () => handleEdit(doc.id),
                       className: "flex items-center gap-2 px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all",
                       title: canUpdate ? "Edit" : "View",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "svg",
-                        {
-                          className: "w-4 h-4",
-                          fill: "none",
-                          stroke: "currentColor",
-                          viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "path",
-                            {
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              strokeWidth: "2",
-                              d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                            }
-                          )
-                        }
-                      )
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "w-4 h-4" })
                     }
                   ),
                   canDelete && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1338,24 +1251,7 @@ function ListView({
                       onClick: () => handleDeleteSingle(doc.id),
                       className: "inline-flex items-center justify-center w-8 h-8 rounded-md text-[var(--kyro-text-muted)] hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-500/10 transition-colors",
                       title: "Delete",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "svg",
-                        {
-                          className: "w-4 h-4",
-                          fill: "none",
-                          stroke: "currentColor",
-                          viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "path",
-                            {
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              strokeWidth: "2",
-                              d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                            }
-                          )
-                        }
-                      )
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
                     }
                   )
                 ] })
@@ -1366,60 +1262,20 @@ function ListView({
         doc.id
       )) })
     ] }) }) }),
-    totalDocs > limit && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row items-center justify-between gap-4 px-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-[var(--kyro-text-secondary)] font-medium", children: [
-          "Showing",
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--kyro-text-primary)] font-bold", children: (page - 1) * limit + 1 }),
-          " ",
-          "to",
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--kyro-text-primary)] font-bold", children: Math.min(page * limit, totalDocs) }),
-          " ",
-          "of",
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--kyro-text-primary)] font-bold", children: totalDocs })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
-          {
-            value: limit,
-            onChange: (e) => {
-              setLimit(Number(e.target.value));
-              setPage(1);
-            },
-            className: "px-2 py-1 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 10, children: "10 / page" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 25, children: "25 / page" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 50, children: "50 / page" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: 100, children: "100 / page" })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-        page > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setPage(page - 1),
-            className: "px-4 py-2 border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors",
-            children: "\u2190 Previous"
-          }
-        ),
-        page < totalPages && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setPage(page + 1),
-            className: "px-4 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg text-sm font-bold hover:opacity-90 transition-all",
-            children: "Next \u2192"
-          }
-        )
-      ] })
-    ] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Pagination,
+      {
+        page,
+        totalPages,
+        totalDocs,
+        limit,
+        onPageChange: setPage,
+        onLimitChange: (newLimit) => {
+          setLimit(newLimit);
+          setPage(1);
+        }
+      }
+    )
   ] });
 }
 function formatCellValue(value, type) {
@@ -1493,26 +1349,26 @@ function UploadField({
   onChange,
   disabled
 }) {
-  const inputRef = React54.useRef(null);
-  const urlInputRef = React54.useRef(null);
-  const [uploading, setUploading] = React54.useState(false);
-  const [showPicker, setShowPicker] = React54.useState(false);
-  const [isPickerFullscreen, setIsPickerFullscreen] = React54.useState(false);
-  const [mediaItems, setMediaItems] = React54.useState([]);
-  const [folders, setFolders] = React54.useState([]);
-  const [selectedFolder, setSelectedFolder] = React54.useState("");
-  const [mediaLoading, setMediaLoading] = React54.useState(false);
-  const [pickerSearch, setPickerSearch] = React54.useState("");
-  const [showUrlInput, setShowUrlInput] = React54.useState(false);
-  const [urlValue, setUrlValue] = React54.useState("");
-  const [urlError, setUrlError] = React54.useState("");
-  const [selectedItems, setSelectedItems] = React54.useState([]);
+  const inputRef = React56.useRef(null);
+  const urlInputRef = React56.useRef(null);
+  const [uploading, setUploading] = React56.useState(false);
+  const [showPicker, setShowPicker] = React56.useState(false);
+  const [isPickerFullscreen, setIsPickerFullscreen] = React56.useState(false);
+  const [mediaItems, setMediaItems] = React56.useState([]);
+  const [folders, setFolders] = React56.useState([]);
+  const [selectedFolder, setSelectedFolder] = React56.useState("");
+  const [mediaLoading, setMediaLoading] = React56.useState(false);
+  const [pickerSearch, setPickerSearch] = React56.useState("");
+  const [showUrlInput, setShowUrlInput] = React56.useState(false);
+  const [urlValue, setUrlValue] = React56.useState("");
+  const [urlError, setUrlError] = React56.useState("");
+  const [selectedItems, setSelectedItems] = React56.useState([]);
   const fieldLabel = field3?.label || field3?.name || "File";
   const maxCount = field3.maxCount ?? (field3.hasMany ? 999 : 1);
   const isMultiple = maxCount > 1;
   const currentValue = Array.isArray(value) ? value : value ? [value] : [];
   const canAddMore = currentValue.length < maxCount;
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const fetchMissingDetails = async () => {
       const idsToFetch = currentValue.filter((item) => typeof item === "string").map((id) => id);
       const objectIdsToFetch = currentValue.filter(
@@ -1546,7 +1402,7 @@ function UploadField({
     };
     fetchMissingDetails();
   }, [value]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (showPicker) {
       loadFolders();
       loadMedia();
@@ -1672,7 +1528,7 @@ function UploadField({
     newValue.splice(index, 1);
     onChange(isMultiple ? newValue : newValue[0] || null);
   };
-  const filteredMedia = React54.useMemo(() => {
+  const filteredMedia = React56.useMemo(() => {
     return mediaItems.filter((item) => {
       return !pickerSearch || item.filename?.toLowerCase().includes(pickerSearch.toLowerCase()) || item.title?.toLowerCase().includes(pickerSearch.toLowerCase());
     });
@@ -2079,12 +1935,12 @@ function SlidePanel({
   showOverlay = false,
   accentClass
 }) {
-  const panelRef = React54.useRef(null);
-  const [hydrated, setHydrated] = React54.useState(false);
-  React54.useEffect(() => {
+  const panelRef = React56.useRef(null);
+  const [hydrated, setHydrated] = React56.useState(false);
+  React56.useEffect(() => {
     setHydrated(true);
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -2129,18 +1985,7 @@ function SlidePanel({
                   type: "button",
                   onClick: onClose,
                   className: "p-1.5 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
-                    }
-                  )
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
                 }
               )
             ] }),
@@ -2161,54 +2006,158 @@ function SlidePanel({
     document.body
   );
 }
-function PromptModal({
+function ModalContent({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[var(--kyro-text-secondary)]", children });
+}
+function ModalActions({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 mt-6", children });
+}
+function Modal({
   open,
   onClose,
-  onSubmit,
   title,
-  placeholder = "",
-  defaultValue = ""
+  children,
+  footer,
+  size = "md",
+  variant = "default"
 }) {
-  const [value, setValue] = React54.useState(defaultValue);
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    if (value.trim()) {
-      onSubmit(value.trim());
-      setValue("");
-      onClose();
+  React56.useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
     }
-  };
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
   if (!open) return null;
+  const sizeClasses = {
+    sm: "max-w-sm",
+    md: "max-w-md",
+    lg: "max-w-lg",
+    full: "w-full h-full max-w-none rounded-none border-0"
+  };
+  const isLightbox = variant === "lightbox";
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+          className: `absolute inset-0 transition-all duration-500 ${isLightbox ? "bg-black/95 backdrop-blur-none" : "bg-[var(--kyro-black)]/40 backdrop-blur-md"}`,
           onClick: onClose
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-lg mx-4 bg-[var(--kyro-surface)] rounded-lg shadow-2xl animate-in fade-in zoom-in-95 duration-200 border border-[var(--kyro-border)]", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--kyro-border)]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-[var(--kyro-text-primary)]", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onClose,
-              className: "p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  width: "20",
-                  height: "20",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: `relative ${sizeClasses[size]} ${isLightbox ? "bg-transparent text-white" : "bg-[var(--kyro-surface)]"} ${!isLightbox && size !== "full" ? "rounded-[var(--kyro-radius-lg)]" : ""} shadow-2xl animate-in fade-in zoom-in-95 duration-300 ${!isLightbox ? "border" : ""} ${variant === "danger" ? "border-red-500/30" : "border-[var(--kyro-border)]"} flex flex-col overflow-hidden`,
+          children: [
+            !isLightbox && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-8 py-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50 backdrop-blur-md", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-[var(--kyro-text-primary)]", children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "p-2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all duration-200",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
                 }
               )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-auto ${isLightbox ? "" : "px-8 py-8"}`, children }),
+            footer && !isLightbox && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 px-8 py-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50", children: footer })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function ConfirmModal({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  loading = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Modal,
+    {
+      open,
+      onClose,
+      title,
+      size: "sm",
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            disabled: loading,
+            className: "kyro-btn kyro-btn-md kyro-btn-secondary",
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onConfirm,
+            disabled: loading,
+            className: `kyro-btn kyro-btn-md ${variant === "danger" ? "kyro-btn-danger" : "kyro-btn-primary"}`,
+            children: loading ? "Loading..." : confirmLabel
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)]", children: message })
+    }
+  );
+}
+function PromptModal({
+  open,
+  onClose,
+  onSubmit,
+  title,
+  placeholder = "",
+  defaultValue = ""
+}) {
+  const [value, setValue] = React56.useState(defaultValue);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim()) {
+      onSubmit(value.trim());
+      setValue("");
+      onClose();
+    }
+  };
+  if (!open) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+          onClick: onClose
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full max-w-lg mx-4 bg-[var(--kyro-surface)] rounded-lg shadow-2xl animate-in fade-in zoom-in-95 duration-200 border border-[var(--kyro-border)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-[var(--kyro-border)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-[var(--kyro-text-primary)]", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "p-1 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
             }
           )
         ] }),
@@ -2293,35 +2242,35 @@ function MediaGallery({
   const canUpload = permissions?.media?.create !== false;
   const canDelete = permissions?.media?.delete !== false;
   const canUpdate = permissions?.media?.update !== false;
-  const [items, setItems] = React54.useState([]);
-  const [loading, setLoading] = React54.useState(true);
-  const [folders, setFolders] = React54.useState([]);
-  const [currentFolder, setCurrentFolder] = React54.useState("");
-  const [search, setSearch] = React54.useState("");
-  const [filter, setFilter] = React54.useState("all");
-  const [view, setView] = React54.useState("grid");
-  const [panelItem, setPanelItem] = React54.useState(null);
-  const [showPreview, setShowPreview] = React54.useState(false);
-  const [showCrop, setShowCrop] = React54.useState(false);
-  const [uploading, setUploading] = React54.useState(false);
-  const [uploadProgress, setUploadProgress] = React54.useState(
+  const [items, setItems] = React56.useState([]);
+  const [loading, setLoading] = React56.useState(true);
+  const [folders, setFolders] = React56.useState([]);
+  const [currentFolder, setCurrentFolder] = React56.useState("");
+  const [search, setSearch] = React56.useState("");
+  const [filter, setFilter] = React56.useState("all");
+  const [view, setView] = React56.useState("grid");
+  const [panelItem, setPanelItem] = React56.useState(null);
+  const [showPreview, setShowPreview] = React56.useState(false);
+  const [showCrop, setShowCrop] = React56.useState(false);
+  const [uploading, setUploading] = React56.useState(false);
+  const [uploadProgress, setUploadProgress] = React56.useState(
     {}
   );
-  const [showNewFolderModal, setShowNewFolderModal] = React54.useState(false);
-  const [storageConfigured, setStorageConfigured] = React54.useState(null);
-  const [storageChecked, setStorageChecked] = React54.useState(false);
-  const [showStorageConfigModal, setShowStorageConfigModal] = React54.useState(false);
-  const [page, setPage] = React54.useState(1);
-  const [total, setTotal] = React54.useState(0);
-  const [totalPages, setTotalPages] = React54.useState(1);
+  const [showNewFolderModal, setShowNewFolderModal] = React56.useState(false);
+  const [storageConfigured, setStorageConfigured] = React56.useState(null);
+  const [storageChecked, setStorageChecked] = React56.useState(false);
+  const [showStorageConfigModal, setShowStorageConfigModal] = React56.useState(false);
+  const [page, setPage] = React56.useState(1);
+  const [total, setTotal] = React56.useState(0);
+  const [totalPages, setTotalPages] = React56.useState(1);
   const limit = 40;
-  const [selectedIds, setSelectedIds] = React54.useState(/* @__PURE__ */ new Set());
+  const [selectedIds, setSelectedIds] = React56.useState(/* @__PURE__ */ new Set());
   const { confirm, alert } = useUIStore();
-  const [isDragging, setIsDragging] = React54.useState(false);
-  const fileInputRef = React54.useRef(null);
-  const [crop, setCrop] = React54.useState();
-  const imgRef = React54.useRef(null);
-  const loadMedia = React54.useCallback(async () => {
+  const [isDragging, setIsDragging] = React56.useState(false);
+  const fileInputRef = React56.useRef(null);
+  const [crop, setCrop] = React56.useState();
+  const imgRef = React56.useRef(null);
+  const loadMedia = React56.useCallback(async () => {
     setLoading(true);
     try {
       const params = new URLSearchParams({
@@ -2344,7 +2293,7 @@ function MediaGallery({
       setLoading(false);
     }
   }, [page, currentFolder, search, filter]);
-  const loadFolders = React54.useCallback(async () => {
+  const loadFolders = React56.useCallback(async () => {
     try {
       const result = await apiGet(withCacheBust("/api/media/folders"));
       setFolders(Array.isArray(result) ? result : result.folders || []);
@@ -2352,7 +2301,7 @@ function MediaGallery({
       console.error("Failed to load folders:", error);
     }
   }, []);
-  const checkStorage = React54.useCallback(async () => {
+  const checkStorage = React56.useCallback(async () => {
     try {
       const res = await apiGet("/api/globals/storage-settings");
       const isConfigured = !!res?.data?.provider;
@@ -2361,23 +2310,23 @@ function MediaGallery({
       setStorageConfigured(false);
     }
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (!pickerMode) checkStorage();
   }, [checkStorage, pickerMode]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (pickerMode) return;
     if (storageConfigured === false && !storageChecked) {
       setStorageChecked(true);
       setShowStorageConfigModal(true);
     }
   }, [pickerMode, storageConfigured, storageChecked]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     loadMedia();
   }, [loadMedia]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     loadFolders();
   }, [loadFolders]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (pickerMode) return;
     const handlePaste = (e) => {
       const files = e.clipboardData?.files;
@@ -2551,7 +2500,7 @@ function MediaGallery({
       setUploading(false);
     }
   };
-  const stats = React54.useMemo(() => {
+  const stats = React56.useMemo(() => {
     return items.reduce(
       (acc, item) => {
         acc.totalSize += item.fileSize || 0;
@@ -2588,24 +2537,7 @@ function MediaGallery({
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group flex-1 min-w-[200px]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2.5",
-                      d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-                    }
-                  )
-                }
-              ),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "w-4 h-4" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -2772,45 +2704,11 @@ function MediaGallery({
                       {
                         onClick: (e) => handleSelectOne(item.id, e),
                         className: `kyro-btn-primary p-1.5 rounded-lg transition-all ${selectedIds.has(item.id) ? "" : "bg-white/10 text-white hover:bg-white/20"}`,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          "svg",
-                          {
-                            className: "w-3 h-3",
-                            fill: "none",
-                            stroke: "currentColor",
-                            viewBox: "0 0 24 24",
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              "path",
-                              {
-                                strokeLinecap: "round",
-                                strokeLinejoin: "round",
-                                strokeWidth: "3",
-                                d: "M5 13l4 4L19 7"
-                              }
-                            )
-                          }
-                        )
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" })
                       }
                     ) })
                   ] }) }),
-                  selectedIds.has(item.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 w-6 h-6 rounded-lg bg-[var(--kyro-primary)] text-white flex items-center justify-center shadow-lg border-2 border-white/20 animate-in zoom-in duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      className: "w-3 h-3",
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: "3",
-                          d: "M5 13l4 4L19 7"
-                        }
-                      )
-                    }
-                  ) })
+                  selectedIds.has(item.id) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-3 left-3 w-6 h-6 rounded-lg bg-[var(--kyro-primary)] text-white flex items-center justify-center shadow-lg border-2 border-white/20 animate-in zoom-in duration-300", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" }) })
                 ]
               },
               item.id
@@ -2890,34 +2788,14 @@ function MediaGallery({
                 item.id
               )) })
             ] }) }) }),
-            totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface)]/50 backdrop-blur-md flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50", children: [
-                "Page ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Pagination,
+              {
                 page,
-                " of ",
-                totalPages
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    disabled: page === 1,
-                    onClick: () => setPage(page - 1),
-                    className: "px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-xs font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30 transition-all",
-                    children: "Previous"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    disabled: page === totalPages,
-                    onClick: () => setPage(page + 1),
-                    className: "px-6 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-xs font-bold shadow-lg hover:opacity-90 disabled:opacity-30 transition-all",
-                    children: "Next"
-                  }
-                )
-              ] })
-            ] })
+                totalPages,
+                onPageChange: setPage
+              }
+            )
           ] })
         ] }),
         !pickerMode && uploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed bottom-12 left-1/2 -translate-x-1/2 z-[60] w-full max-w-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-[2rem] shadow-2xl p-6 ring-1 ring-white/10 animate-in slide-in-from-bottom-12 duration-700", children: [
@@ -3143,86 +3021,100 @@ function MediaGallery({
             ] })
           }
         ),
-        showPreview && panelItem && reactDom.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[9999] bg-black/95 flex flex-col animate-in fade-in duration-500", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-6", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-bold text-lg tracking-tight", children: panelItem.filename }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/40 text-[10px] font-bold  tracking-widest mt-1", children: [
-                  formatFileSize(panelItem.fileSize),
-                  " \xB7 ",
-                  panelItem.mimeType
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => setShowPreview(false),
-                  className: "p-3 bg-white/10 hover:bg-white/20 text-white rounded-2xl transition-all active:scale-90",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-6 h-6" })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full flex items-center justify-center p-12", children: panelItem.type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: getAbsoluteUrl(panelItem.url),
-                alt: "",
-                className: "max-h-full max-w-full object-contain shadow-2xl rounded-lg animate-in zoom-in-95 duration-500"
-              }
-            ) : panelItem.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "video",
-              {
-                src: getAbsoluteUrl(panelItem.url),
-                controls: true,
-                autoPlay: true,
-                className: "max-h-full max-w-full rounded-lg shadow-2xl"
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "w-24 h-24 mx-auto mb-6 opacity-20" }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-bold opacity-50", children: "Preview not available for this file type" })
-            ] }) })
-          ] }),
-          document.body
-        ),
-        !pickerMode && showCrop && panelItem && reactDom.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[9999] bg-black/95 flex flex-col p-8", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-8", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-white font-bold text-2xl tracking-tighter", children: "Crop Image" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setShowCrop(false),
-                    className: "px-4 py-2 border border-white/20 text-white/80 hover:bg-white/10 rounded-lg font-bold text-sm transition-colors",
-                    children: "Cancel"
-                  }
-                ),
+        showPreview && panelItem && /* @__PURE__ */ jsxRuntime.jsxs(
+          Modal,
+          {
+            open: showPreview,
+            onClose: () => setShowPreview(false),
+            title: "",
+            size: "full",
+            variant: "lightbox",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-white font-bold text-lg tracking-tight", children: panelItem.filename }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/40 text-[10px] font-bold  tracking-widest mt-1", children: [
+                    formatFileSize(panelItem.fileSize),
+                    " \xB7 ",
+                    panelItem.mimeType
+                  ] })
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
-                    type: "button",
-                    disabled: uploading,
-                    onClick: onCropComplete,
-                    className: "px-4 py-2 bg-[var(--kyro-sidebar-active)] hover:opacity-90 text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm transition-colors",
-                    children: uploading ? "Saving..." : "Save Crop"
+                    onClick: () => setShowPreview(false),
+                    className: "p-3 bg-white/10 hover:bg-white/20 text-white rounded-2xl transition-all active:scale-90",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-6 h-6" })
                   }
                 )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full flex items-center justify-center overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ReactCrop__default.default, { crop, onChange: (c) => setCrop(c), children: /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                ref: imgRef,
-                src: panelItem.url,
-                alt: "Crop preview",
-                className: "max-h-[70vh] object-contain",
-                onLoad: onImageLoad
-              }
-            ) }) })
-          ] }),
-          document.body
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full flex items-center justify-center p-12", children: panelItem.type === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: getAbsoluteUrl(panelItem.url),
+                  alt: "",
+                  className: "max-h-full max-w-full object-contain shadow-2xl rounded-lg animate-in zoom-in-95 duration-500"
+                }
+              ) : panelItem.type === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "video",
+                {
+                  src: getAbsoluteUrl(panelItem.url),
+                  controls: true,
+                  autoPlay: true,
+                  className: "max-h-full max-w-full rounded-lg shadow-2xl"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "w-24 h-24 mx-auto mb-6 opacity-20" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-bold opacity-50", children: "Preview not available for this file type" })
+              ] }) })
+            ]
+          }
+        ),
+        !pickerMode && showCrop && panelItem && /* @__PURE__ */ jsxRuntime.jsx(
+          Modal,
+          {
+            open: showCrop,
+            onClose: () => setShowCrop(false),
+            title: "",
+            size: "full",
+            variant: "lightbox",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full p-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-8", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-white font-bold text-2xl tracking-tighter", children: "Crop Image" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setShowCrop(false),
+                      className: "px-4 py-2 border border-white/20 text-white/80 hover:bg-white/10 rounded-lg font-bold text-sm transition-colors",
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: uploading,
+                      onClick: onCropComplete,
+                      className: "px-4 py-2 bg-[var(--kyro-sidebar-active)] hover:opacity-90 text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm transition-colors",
+                      children: uploading ? "Saving..." : "Save Crop"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 w-full flex items-center justify-center overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ReactCrop__default.default, { crop, onChange: (c) => setCrop(c), children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  ref: imgRef,
+                  src: panelItem.url,
+                  alt: "Crop preview",
+                  className: "max-h-[70vh] object-contain",
+                  onLoad: onImageLoad
+                }
+              ) }) })
+            ] })
+          }
         ),
         !pickerMode && /* @__PURE__ */ jsxRuntime.jsx(
           PromptModal,
@@ -3234,61 +3126,49 @@ function MediaGallery({
             placeholder: "Folder name"
           }
         ),
-        !pickerMode && showStorageConfigModal && reactDom.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-2xl p-8 max-w-md w-full shadow-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--kyro-sidebar-active)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "w-8 h-8 text-[var(--kyro-sidebar-text-active)]",
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
+        !pickerMode && /* @__PURE__ */ jsxRuntime.jsx(
+          Modal,
+          {
+            open: showStorageConfigModal,
+            onClose: () => setShowStorageConfigModal(false),
+            title: "Storage Not Configured",
+            size: "md",
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--kyro-sidebar-active)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Server, { className: "w-8 h-8 text-[var(--kyro-sidebar-text-active)]" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)] mb-6 text-sm", children: "Before uploading media, you need to configure your storage settings. Choose where files should be stored and how URLs are generated." }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: "/settings/storage-settings",
+                    className: "flex-1 px-4 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-center hover:opacity-90 transition-colors",
+                    children: "Configure Storage"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
                   {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2H5a2 2 0 00-2 2v1m2 2a2 2 0 11-4 0 2 2 0 014 0zm2 2h.008v.008H5v-.008z"
+                    type: "button",
+                    onClick: () => {
+                      apiPost("/api/globals/storage-settings", {
+                        provider: "local",
+                        local: {
+                          uploadDir: "./public/uploads",
+                          baseUrl: "/uploads"
+                        }
+                      }).then(() => {
+                        setShowStorageConfigModal(false);
+                        setStorageConfigured(true);
+                        window.location.reload();
+                      });
+                    },
+                    className: "flex-1 px-4 py-3 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-xl font-bold hover:bg-[var(--kyro-surface-accent)] transition-colors",
+                    children: "Use Defaults"
                   }
                 )
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-[var(--kyro-text-primary)] mb-2", children: "Storage Not Configured" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)] mb-6 text-sm", children: "Before uploading media, you need to configure your storage settings. Choose where files should be stored and how URLs are generated." }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "a",
-                {
-                  href: "/settings/storage-settings",
-                  className: "flex-1 px-4 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-center hover:opacity-90 transition-colors",
-                  children: "Configure Storage"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    apiPost("/api/globals/storage-settings", {
-                      provider: "local",
-                      local: {
-                        uploadDir: "./public/uploads",
-                        baseUrl: "/uploads"
-                      }
-                    }).then(() => {
-                      setShowStorageConfigModal(false);
-                      setStorageConfigured(true);
-                      window.location.reload();
-                    });
-                  },
-                  className: "flex-1 px-4 py-3 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-xl font-bold hover:bg-[var(--kyro-surface-accent)] transition-colors",
-                  children: "Use Defaults"
-                }
-              )
+              ] })
             ] })
-          ] }) }) }),
-          document.body
+          }
         ),
         !pickerMode && /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -3325,9 +3205,9 @@ var MenuBar = ({
   setIsExpanded,
   onOpenMediaPicker
 }) => {
-  const [activeDropdown, setActiveDropdown] = React54.useState(null);
-  const menuBarRef = React54.useRef(null);
-  React54.useEffect(() => {
+  const [activeDropdown, setActiveDropdown] = React56.useState(null);
+  const menuBarRef = React56.useRef(null);
+  React56.useEffect(() => {
     function handleClickOutside(event) {
       if (menuBarRef.current && !menuBarRef.current.contains(event.target)) {
         setActiveDropdown(null);
@@ -3787,14 +3667,14 @@ function RichTextField({
   error,
   disabled
 }) {
-  const [isExpanded, setIsExpanded] = React54.useState(false);
-  const [panelWidth, setPanelWidth] = React54.useState(0);
-  const [isMediaPickerOpen, setIsMediaPickerOpen] = React54.useState(false);
-  const [isMounted, setIsMounted] = React54.useState(false);
-  React54.useEffect(() => {
+  const [isExpanded, setIsExpanded] = React56.useState(false);
+  const [panelWidth, setPanelWidth] = React56.useState(0);
+  const [isMediaPickerOpen, setIsMediaPickerOpen] = React56.useState(false);
+  const [isMounted, setIsMounted] = React56.useState(false);
+  React56.useEffect(() => {
     setIsMounted(true);
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (!isExpanded) {
       setPanelWidth(0);
       return;
@@ -3860,7 +3740,7 @@ function RichTextField({
       }
     }
   });
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (editor && value && JSON.stringify(value) !== JSON.stringify(editor.getJSON())) {
       editor.commands.setContent(value);
     }
@@ -4129,9 +4009,9 @@ function mergeThemes(base, overrides) {
     fields: base.fields ? { ...base.fields, ...overrides.fields } : overrides.fields
   };
 }
-var ThemeContext = React54.createContext(null);
+var ThemeContext = React56.createContext(null);
 function useTheme() {
-  const context = React54.useContext(ThemeContext);
+  const context = React56.useContext(ThemeContext);
   if (!context) {
     return {
       mode: "light",
@@ -4242,16 +4122,16 @@ function ThemeProvider({
   light: lightOverrides,
   dark: darkOverrides
 }) {
-  const [mode, setMode] = React54.useState(defaultMode);
-  const [baseLight, setBaseLight] = React54.useState(
+  const [mode, setMode] = React56.useState(defaultMode);
+  const [baseLight, setBaseLight] = React56.useState(
     lightOverrides || {}
   );
-  const [baseDark, setBaseDark] = React54.useState(
+  const [baseDark, setBaseDark] = React56.useState(
     darkOverrides || {}
   );
   const lightTheme = mergeThemes(LIGHT_THEME, baseLight);
   const darkTheme = mergeThemes(DARK_THEME, baseDark);
-  const getResolvedTheme = React54.useCallback(() => {
+  const getResolvedTheme = React56.useCallback(() => {
     if (mode === "system") {
       if (typeof window !== "undefined") {
         return window.matchMedia("(prefers-color-scheme: dark)").matches ? darkTheme : lightTheme;
@@ -4260,13 +4140,13 @@ function ThemeProvider({
     }
     return mode === "dark" ? darkTheme : lightTheme;
   }, [mode, lightTheme, darkTheme]);
-  const [theme, setTheme] = React54.useState(getResolvedTheme());
-  React54.useEffect(() => {
+  const [theme, setTheme] = React56.useState(getResolvedTheme());
+  React56.useEffect(() => {
     const resolved = getResolvedTheme();
     setTheme(resolved);
     applyThemeToDOM(resolved);
   }, [getResolvedTheme]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (mode !== "system") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = () => {
@@ -4277,11 +4157,11 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handler);
     return () => mediaQuery.removeEventListener("change", handler);
   }, [mode, getResolvedTheme]);
-  const updateTheme = React54.useCallback((overrides) => {
+  const updateTheme = React56.useCallback((overrides) => {
     setBaseLight((prev) => ({ ...prev, ...overrides }));
     setBaseDark((prev) => ({ ...prev, ...overrides }));
   }, []);
-  const getCssVar = React54.useCallback((key) => `var(--kyro-${key})`, []);
+  const getCssVar = React56.useCallback((key) => `var(--kyro-${key})`, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ThemeContext.Provider,
     {
@@ -4300,7 +4180,7 @@ function ThemeProvider({
 }
 var LightThemeProvider = (props) => /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultMode: "light", ...props });
 var DarkThemeProvider = (props) => /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultMode: "dark", ...props });
-var CodeMirrorEditor = React54.lazy(
+var CodeMirrorEditor = React56.lazy(
   () => import('@uiw/react-codemirror').then((mod) => ({ default: mod.default }))
 );
 var LANGUAGES = [
@@ -4352,16 +4232,16 @@ var CodeField = ({
   error,
   disabled
 }) => {
-  const [isMounted, setIsMounted] = React54.useState(false);
-  const [isDark, setIsDark] = React54.useState(false);
-  const [extensions, setExtensions] = React54.useState([]);
-  const [loading, setLoading] = React54.useState(false);
-  const [copied, setCopied] = React54.useState(false);
-  const [isFullScreen, setIsFullScreen] = React54.useState(false);
+  const [isMounted, setIsMounted] = React56.useState(false);
+  const [isDark, setIsDark] = React56.useState(false);
+  const [extensions, setExtensions] = React56.useState([]);
+  const [loading, setLoading] = React56.useState(false);
+  const [copied, setCopied] = React56.useState(false);
+  const [isFullScreen, setIsFullScreen] = React56.useState(false);
   const { theme } = useTheme();
   const accent = theme.colors?.accent || theme.colors?.primary || "#6366f1";
   const language = field3.language?.toLowerCase() || "javascript";
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     setIsMounted(true);
     setIsDark(document.documentElement.classList.contains("dark"));
     const observer = new MutationObserver(() => {
@@ -4373,7 +4253,7 @@ var CodeField = ({
     });
     return () => observer.disconnect();
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (!isMounted) return;
     const loadExtensions = async () => {
       setLoading(true);
@@ -4390,16 +4270,16 @@ var CodeField = ({
     };
     loadExtensions();
   }, [language, isMounted]);
-  const handleChange = React54.useCallback(
+  const handleChange = React56.useCallback(
     (val) => onChange?.(val),
     [onChange]
   );
-  const handleCopy = React54.useCallback(() => {
+  const handleCopy = React56.useCallback(() => {
     navigator.clipboard.writeText(value);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   }, [value]);
-  const toggleFullScreen = React54.useCallback(() => {
+  const toggleFullScreen = React56.useCallback(() => {
     setIsFullScreen((prev) => !prev);
     document.body.style.overflow = !isFullScreen ? "hidden" : "";
   }, [isFullScreen]);
@@ -4489,7 +4369,7 @@ var CodeField = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                React54.Suspense,
+                React56.Suspense,
                 {
                   fallback: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
@@ -4609,18 +4489,18 @@ var MarkdownField = ({
   error,
   disabled
 }) => {
-  const [showPreview, setShowPreview] = React54.useState(false);
-  const [isMounted, setIsMounted] = React54.useState(false);
-  React54.useEffect(() => {
+  const [showPreview, setShowPreview] = React56.useState(false);
+  const [isMounted, setIsMounted] = React56.useState(false);
+  React56.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const handleChange = React54.useCallback(
+  const handleChange = React56.useCallback(
     (e) => {
       onChange?.(e.target.value);
     },
     [onChange]
   );
-  const wordCount = React54.useMemo(() => {
+  const wordCount = React56.useMemo(() => {
     if (!value) return 0;
     return value.trim().split(/\s+/).filter(Boolean).length;
   }, [value]);
@@ -4725,8 +4605,8 @@ function SecretField({
   error,
   disabled
 }) {
-  const [copied, setCopied] = React54.useState(false);
-  const [regenerating, setRegenerating] = React54.useState(false);
+  const [copied, setCopied] = React56.useState(false);
+  const [regenerating, setRegenerating] = React56.useState(false);
   const fullValue = value ?? "";
   const displayValue = fullValue.length > 8 ? fullValue.slice(0, -8) + "*".repeat(8) : fullValue;
   const handleCopy = async () => {
@@ -4882,6 +4762,7 @@ var useAutoFormStore = zustand.create()(
       loadingDiffs: false,
       isAutoSaving: false,
       autoSaveStatus: "idle",
+      backgroundProcessing: false,
       // Auto-save state
       lastAutoSaveTime: 0,
       lastSavedAt: null,
@@ -4957,6 +4838,7 @@ var useAutoFormStore = zustand.create()(
       setLoadingDiffs: (loading) => set({ loadingDiffs: loading }),
       setIsAutoSaving: (saving) => set({ isAutoSaving: saving }),
       setAutoSaveStatus: (status) => set({ autoSaveStatus: status }),
+      setBackgroundProcessing: (processing) => set({ backgroundProcessing: processing }),
       setSidebarCollapsed: (collapsed) => set({ sidebarCollapsed: collapsed }),
       setLastSavedAt: (time) => set({ lastSavedAt: time }),
       setRetryCount: (count) => set({ retryCount: count }),
@@ -5453,6 +5335,14 @@ function SelectField({
     }
   );
 }
+function EmptyState({ icon, title, description, action }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-3 justify-center py-16 px-8", children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-4", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-[var(--kyro-text-primary)] text-base", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--kyro-text-secondary)] mt-1", children: description }),
+    action
+  ] });
+}
 function getLabel(opt) {
   const mainTabs = opt?.mainTabs;
   return opt?.title || mainTabs?.title || opt?.name || opt?.label || opt?.email || opt?.filename || opt?.slug || "Untitled";
@@ -5464,22 +5354,22 @@ function RelationshipField({
   error,
   disabled
 }) {
-  const [isOpen, setIsOpen] = React54.useState(false);
-  const [search, setSearch] = React54.useState("");
-  const [options, setOptions] = React54.useState([]);
-  const [loading, setLoading] = React54.useState(false);
-  const [selectedDocs, setSelectedDocs] = React54.useState([]);
-  const fetchedIdsRef = React54.useRef(/* @__PURE__ */ new Set());
-  const containerRef = React54.useRef(null);
-  const onChangeRef = React54.useRef(() => {
+  const [isOpen, setIsOpen] = React56.useState(false);
+  const [search, setSearch] = React56.useState("");
+  const [options, setOptions] = React56.useState([]);
+  const [loading, setLoading] = React56.useState(false);
+  const [selectedDocs, setSelectedDocs] = React56.useState([]);
+  const fetchedIdsRef = React56.useRef(/* @__PURE__ */ new Set());
+  const containerRef = React56.useRef(null);
+  const onChangeRef = React56.useRef(() => {
   });
   onChangeRef.current = onChange || (() => {
   });
   const isMultiple = field3.hasMany;
   const relationTo = Array.isArray(field3.relationTo) ? field3.relationTo : [field3.relationTo];
   const isPolymorphic = relationTo.length > 1;
-  const [activeRelation, setActiveRelation] = React54.useState(relationTo[0]);
-  const extractIds = React54.useCallback(() => {
+  const [activeRelation, setActiveRelation] = React56.useState(relationTo[0]);
+  const extractIds = React56.useCallback(() => {
     if (!value) return [];
     const items = isMultiple ? Array.isArray(value) ? value : [] : value ? [value] : [];
     return items.map((item) => {
@@ -5489,7 +5379,7 @@ function RelationshipField({
       return String(item);
     }).filter(Boolean);
   }, [value, isMultiple]);
-  const fetchSelectedDocs = React54.useCallback((ids) => {
+  const fetchSelectedDocs = React56.useCallback((ids) => {
     if (ids.length === 0) return;
     ids.forEach((id) => {
       if (fetchedIdsRef.current.has(id)) return;
@@ -5516,11 +5406,11 @@ function RelationshipField({
       });
     });
   }, [isPolymorphic, value, activeRelation, isMultiple]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const ids = extractIds();
     fetchSelectedDocs(ids);
   }, [extractIds, fetchSelectedDocs]);
-  const fetchOptions = React54.useCallback((query = "") => {
+  const fetchOptions = React56.useCallback((query = "") => {
     setLoading(true);
     const searchFields = ["title", "name", "label", "email"];
     const url = `/api/${activeRelation}?${buildSearchQuery(query, searchFields)}`;
@@ -5537,13 +5427,13 @@ function RelationshipField({
       setLoading(false);
     });
   }, [activeRelation]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (isOpen) {
       setOptions([]);
       fetchOptions(search);
     }
   }, [isOpen, activeRelation]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -5668,7 +5558,7 @@ function RelationshipField({
           }
         ) })
       ] }),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 w-full mt-1 border border-[var(--kyro-border)] rounded-lg shadow-lg bg-[var(--kyro-surface)] max-h-64 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-[var(--kyro-text-muted)]", children: "Loading..." }) : options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-[var(--kyro-text-muted)]", children: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-20 w-full mt-1 border border-[var(--kyro-border)] rounded-lg shadow-lg bg-[var(--kyro-surface)] max-h-64 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 text-center text-sm text-[var(--kyro-text-muted)]", children: "Loading..." }) : options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { title: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -5691,7 +5581,7 @@ function RelationshipField({
   ] });
 }
 var RelationshipField_default = RelationshipField;
-var BlocksContext = React54.createContext(null);
+var BlocksContext = React56.createContext(null);
 function createBlocksStore(allowedBlocks = [], dynamicCategories = []) {
   return vanilla.createStore((set, get) => ({
     blocks: [],
@@ -5846,7 +5736,7 @@ function getDefaultData(type) {
   return defaults[type] || {};
 }
 function useBlockById(id) {
-  const store = React54.useContext(BlocksContext);
+  const store = React56.useContext(BlocksContext);
   if (!store) return void 0;
   return zustand.useStore(store, (state) => {
     const findRecursive = (blocksList) => {
@@ -5871,7 +5761,7 @@ function useBlockById(id) {
   });
 }
 function useBlockActions() {
-  const store = React54.useContext(BlocksContext);
+  const store = React56.useContext(BlocksContext);
   if (!store) {
     throw new Error("useBlockActions must be used within a BlocksContext.Provider");
   }
@@ -6255,7 +6145,7 @@ var ListField = ({
   onChange,
   compact = false
 }) => {
-  const [inputValue, setInputValue] = React54__default.default.useState("");
+  const [inputValue, setInputValue] = React56__default.default.useState("");
   const handleAdd = () => {
     if (inputValue.trim()) {
       onChange([...items, inputValue.trim()]);
@@ -6511,7 +6401,7 @@ var AccordionField = ({
   onChange,
   compact = false
 }) => {
-  const [openIndex, setOpenIndex] = React54__default.default.useState(0);
+  const [openIndex, setOpenIndex] = React56__default.default.useState(0);
   const handleTitleChange = (index, value) => {
     const newItems = [...items];
     newItems[index] = { ...newItems[index], title: value };
@@ -6937,7 +6827,7 @@ function ArrayLayout({
   const firstField = fields2[0];
   const labelField = firstField?.name || "user";
   const isRelationship = firstField?.type === "relationship";
-  const [openIndex, setOpenIndex] = React54__default.default.useState(0);
+  const [openIndex, setOpenIndex] = React56__default.default.useState(0);
   function getItemLabel(item) {
     for (const key of ["label", "title", "name"]) {
       const val = item[key];
@@ -7292,7 +7182,7 @@ var FieldRenderer = ({
         {
           field: field3,
           value,
-          onChange,
+          onChange: onChangeKeystroke,
           disabled,
           error
         }
@@ -7477,11 +7367,11 @@ var ChildBlocksTree = ({
   depth = 0,
   maxDepth = MAX_DEPTH
 }) => {
-  const [showAddModal, setShowAddModal] = React54.useState(false);
-  const [expandedIds, setExpandedIds] = React54.useState(/* @__PURE__ */ new Set());
-  const [editingBlockId, setEditingBlockId] = React54.useState(null);
-  const [confirmDeleteId, setConfirmDeleteId] = React54.useState(null);
-  const store = React54.useContext(BlocksContext);
+  const [showAddModal, setShowAddModal] = React56.useState(false);
+  const [expandedIds, setExpandedIds] = React56.useState(/* @__PURE__ */ new Set());
+  const [editingBlockId, setEditingBlockId] = React56.useState(null);
+  const [confirmDeleteId, setConfirmDeleteId] = React56.useState(null);
+  const store = React56.useContext(BlocksContext);
   if (!store) throw new Error("ChildBlocksTree must be used within a BlocksContext");
   const dynamicCategories = zustand.useStore(store, (s) => s.dynamicCategories);
   const allowedBlocks = zustand.useStore(store, (s) => s.allowedBlocks);
@@ -7698,11 +7588,11 @@ var NestedChildBlocks = ({
   depth,
   maxDepth
 }) => {
-  const [showAddModal, setShowAddModal] = React54.useState(false);
-  const [expandedIds, setExpandedIds] = React54.useState(/* @__PURE__ */ new Set());
-  const [editingBlockId, setEditingBlockId] = React54.useState(null);
-  const [confirmDeleteId, setConfirmDeleteId] = React54.useState(null);
-  const store = React54.useContext(BlocksContext);
+  const [showAddModal, setShowAddModal] = React56.useState(false);
+  const [expandedIds, setExpandedIds] = React56.useState(/* @__PURE__ */ new Set());
+  const [editingBlockId, setEditingBlockId] = React56.useState(null);
+  const [confirmDeleteId, setConfirmDeleteId] = React56.useState(null);
+  const store = React56.useContext(BlocksContext);
   if (!store) throw new Error("NestedChildBlocks must be used within a BlocksContext");
   const dynamicCategories = zustand.useStore(store, (s) => s.dynamicCategories);
   const allowedBlocks = zustand.useStore(store, (s) => s.allowedBlocks);
@@ -8206,13 +8096,13 @@ var RelationshipBlockField = ({
   onChange,
   compact = false
 }) => {
-  const [isOpen, setIsOpen] = React54.useState(false);
-  const [search, setSearch] = React54.useState("");
-  const [options, setOptions] = React54.useState([]);
-  const [loading, setLoading] = React54.useState(false);
-  const [collections2, setCollections] = React54.useState([]);
-  const [loadingCollections, setLoadingCollections] = React54.useState(true);
-  React54.useEffect(() => {
+  const [isOpen, setIsOpen] = React56.useState(false);
+  const [search, setSearch] = React56.useState("");
+  const [options, setOptions] = React56.useState([]);
+  const [loading, setLoading] = React56.useState(false);
+  const [collections2, setCollections] = React56.useState([]);
+  const [loadingCollections, setLoadingCollections] = React56.useState(true);
+  React56.useEffect(() => {
     apiGet("/api/collections").then((data) => {
       setCollections(
         (data.collections || []).map((c) => c.slug || c.name || c)
@@ -8228,7 +8118,7 @@ var RelationshipBlockField = ({
       setLoading(false);
     }).catch(() => setLoading(false));
   };
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (isOpen) fetchOptions(search);
   }, [isOpen, search, relationTo, labelField]);
   const getLabel2 = (opt) => {
@@ -8302,7 +8192,7 @@ var RelationshipBlockField = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "w-4 h-4 text-[var(--kyro-text-muted)] animate-spin" }) })
       ] }),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 w-full mt-1 border border-[var(--kyro-border)] rounded-lg shadow-lg bg-[var(--kyro-surface)] max-h-48 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-center text-sm text-[var(--kyro-text-muted)]", children: "Loading..." }) : options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-center text-sm text-[var(--kyro-text-muted)]", children: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute z-20 w-full mt-1 border border-[var(--kyro-border)] rounded-lg shadow-lg bg-[var(--kyro-surface)] max-h-48 overflow-auto", children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-center text-sm text-[var(--kyro-text-muted)]", children: "Loading..." }) : options.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { title: "No results found" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-1", children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
@@ -8558,7 +8448,7 @@ var SortableBlockComponent = ({
   } = sortable.useSortable({ id: block3.id });
   const { removeBlock } = useBlockActions();
   const isEditing = editingBlockId === block3.id;
-  const [showDeleteConfirm, setShowDeleteConfirm] = React54.useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = React56.useState(false);
   const style = {
     transform: utilities.CSS.Transform.toString(transform),
     transition,
@@ -8752,7 +8642,7 @@ var SortableBlockComponent = ({
     )
   ] });
 };
-var SortableBlock = React54__default.default.memo(SortableBlockComponent);
+var SortableBlock = React56__default.default.memo(SortableBlockComponent);
 var BlocksField = ({
   field: field3,
   value,
@@ -8763,9 +8653,9 @@ var BlocksField = ({
   documentStatus,
   justSaved
 }) => {
-  const [isDrawerOpen, setIsDrawerOpen] = React54.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React54.useState(false);
-  const dropdownRef = React54.useRef(null);
+  const [isDrawerOpen, setIsDrawerOpen] = React56.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React56.useState(false);
+  const dropdownRef = React56.useRef(null);
   const pickerMode = field3.admin?.pickerMode || "drawer";
   const allowedBlocks = field3.blocks || [];
   const groupedBlocks = allowedBlocks.reduce((acc, block3) => {
@@ -8795,18 +8685,18 @@ var BlocksField = ({
     title,
     blocks: blocks3
   }));
-  const storeRef = React54.useRef(null);
+  const storeRef = React56.useRef(null);
   if (!storeRef.current) {
     storeRef.current = createBlocksStore(allowedBlocks, dynamicCategories);
   }
   const store = storeRef.current;
   const blocks2 = zustand.useStore(store, (s) => s.blocks);
-  const [activeDrag, setActiveDrag] = React54.useState(null);
-  const [editingBlockId, setEditingBlockId] = React54.useState(null);
-  const prevBlocksLengthRef = React54.useRef(blocks2.length);
-  const prevBlockIdsRef = React54.useRef(new Set(blocks2.map((b) => b.id)));
-  const isInitializedRef = React54.useRef(false);
-  React54.useEffect(() => {
+  const [activeDrag, setActiveDrag] = React56.useState(null);
+  const [editingBlockId, setEditingBlockId] = React56.useState(null);
+  const prevBlocksLengthRef = React56.useRef(blocks2.length);
+  const prevBlockIdsRef = React56.useRef(new Set(blocks2.map((b) => b.id)));
+  const isInitializedRef = React56.useRef(false);
+  React56.useEffect(() => {
     if (isInitializedRef.current) {
       if (blocks2.length > prevBlocksLengthRef.current) {
         const newBlock = blocks2.find((b) => b.id && !prevBlockIdsRef.current.has(b.id));
@@ -8818,7 +8708,7 @@ var BlocksField = ({
     prevBlocksLengthRef.current = blocks2.length;
     prevBlockIdsRef.current = new Set(blocks2.map((b) => b.id));
   }, [blocks2]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (onBlocksChange) {
       store.getState().setOnBlocksChange(onBlocksChange);
     }
@@ -8827,14 +8717,11 @@ var BlocksField = ({
       });
     };
   }, [onBlocksChange, store]);
-  const lastValueRef = React54.useRef(null);
-  React54.useEffect(() => {
+  const lastValueRef = React56.useRef(null);
+  React56.useEffect(() => {
     const valueArray = Array.isArray(value) ? value : [];
     const lastValueArray = lastValueRef.current || [];
-    const valueIds = valueArray.map((b) => b.id).join(",");
-    const lastValueIds = lastValueArray.map((b) => b.id).join(",");
-    if (valueIds !== lastValueIds) {
-      console.log("BlocksField sync: value=", value, "valueIds=", valueIds, "lastValueIds=", lastValueIds);
+    if (JSON.stringify(valueArray) !== JSON.stringify(lastValueArray)) {
       const valueArrayCopy = [...valueArray];
       prevBlocksLengthRef.current = valueArrayCopy.length;
       prevBlockIdsRef.current = new Set(valueArrayCopy.map((b) => b.id));
@@ -8843,27 +8730,27 @@ var BlocksField = ({
       isInitializedRef.current = true;
     } else if (valueArray.length === 0 && !isInitializedRef.current) {
       isInitializedRef.current = true;
+      lastValueRef.current = [];
     }
   }, [value, field3.name, store]);
-  const onChangeRef = React54.useRef(onChange);
+  const onChangeRef = React56.useRef(onChange);
   onChangeRef.current = onChange;
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (!onChangeRef.current) return;
     const lastValue = lastValueRef.current;
     if (!lastValue) return;
-    const currentIds = blocks2.map((b) => b.id).join(",");
-    const lastIds = lastValue.map((b) => b.id).join(",");
-    if (currentIds !== lastIds) {
+    if (JSON.stringify(blocks2) !== JSON.stringify(lastValue)) {
+      lastValueRef.current = [...blocks2];
       onChangeRef.current(blocks2);
     }
   }, [blocks2]);
-  const handleAddBlock = React54.useCallback(
+  const handleAddBlock = React56.useCallback(
     (blockType) => {
       store.getState().addBlock(blockType);
     },
     [store]
   );
-  const duplicateBlock = React54.useCallback(
+  const duplicateBlock = React56.useCallback(
     (blockId) => {
       const blockIndex = blocks2.findIndex((b) => b.id === blockId);
       if (blockIndex === -1) return;
@@ -8928,7 +8815,7 @@ var BlocksField = ({
   };
   const activeBlock = activeDrag ? blockCategories.flatMap((cat) => cat.blocks).find((b) => `drawer-${b.type}` === activeDrag.id) || blocks2.find((b) => b.id === activeDrag.id) : null;
   activeBlock ? "label" in activeBlock ? activeBlock.label : activeBlock.type : "Block";
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (!isDropdownOpen) return;
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -9088,12 +8975,45 @@ function normalizeUploadFields(value) {
   }
   return value;
 }
-function useAutoFormState({
-  config,
-  initialData,
-  collectionSlug,
-  globalSlug,
-  onChange,
+function useQueue() {
+  const queue = React56.useRef([]);
+  const isProcessing = React56.useRef(false);
+  const queueTask = React56.useCallback((fn, options) => {
+    queue.current.push(fn);
+    async function processQueue() {
+      if (isProcessing.current) return;
+      if (typeof options?.beforeProcess === "function") {
+        const shouldContinue = options.beforeProcess();
+        if (shouldContinue === false) return;
+      }
+      while (queue.current.length > 0) {
+        const latestTask = queue.current.pop();
+        queue.current = [];
+        isProcessing.current = true;
+        try {
+          await latestTask();
+        } catch (err) {
+          console.error("Error in queued function:", err);
+        } finally {
+          isProcessing.current = false;
+          if (typeof options?.afterProcess === "function") {
+            options.afterProcess();
+          }
+        }
+      }
+    }
+    processQueue();
+  }, []);
+  return { queueTask };
+}
+
+// src/hooks/useAutoFormState.ts
+function useAutoFormState({
+  config,
+  initialData,
+  collectionSlug,
+  globalSlug,
+  onChange,
   onActionSuccess,
   onActionError
 }) {
@@ -9121,24 +9041,27 @@ function useAutoFormState({
   } = store;
   const versionsEnabled = !!config.versions;
   const currentContextKey = globalSlug || initialData?.id || collectionSlug;
-  const needsResetRef = React54.useRef(false);
+  const needsResetRef = React56.useRef(false);
   if (!globalSlug && currentContextKey && formData && Object.keys(formData).length > 0 && formData.id !== currentContextKey) {
     needsResetRef.current = true;
   }
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (needsResetRef.current) {
       needsResetRef.current = false;
       resetForm();
     }
   }, [resetForm]);
-  const localSaveTimerRef = React54.useRef(null);
-  const serverSaveTimerRef = React54.useRef(null);
-  const retryTimerRef = React54.useRef(null);
-  const isOnlineRef = React54.useRef(typeof navigator !== "undefined" ? navigator.onLine : true);
-  const lastAutoSaveTimeRef = React54.useRef(0);
-  const autoSaveSkipRef = React54.useRef(false);
-  const restorePromptedRef = React54.useRef(null);
-  const getDocumentKey = React54.useCallback(
+  const localSaveTimerRef = React56.useRef(null);
+  const serverSaveTimerRef = React56.useRef(null);
+  const retryTimerRef = React56.useRef(null);
+  const isOnlineRef = React56.useRef(typeof navigator !== "undefined" ? navigator.onLine : true);
+  const lastAutoSaveTimeRef = React56.useRef(0);
+  const autoSaveSkipRef = React56.useRef(false);
+  const restorePromptedRef = React56.useRef(null);
+  const previousFormDataRef = React56.useRef("");
+  const astroSyncDataRef = React56.useRef("");
+  const { queueTask } = useQueue();
+  const getDocumentKey = React56.useCallback(
     (id) => {
       if (globalSlug) return `global:${globalSlug}`;
       if (collectionSlug && id) return `${collectionSlug}:${id}`;
@@ -9146,7 +9069,7 @@ function useAutoFormState({
     },
     [collectionSlug, globalSlug]
   );
-  const persistBrowserDraft = React54.useCallback(
+  const persistBrowserDraft = React56.useCallback(
     (documentKey, data, options) => {
       setDraftCache(documentKey, {
         data,
@@ -9157,24 +9080,7 @@ function useAutoFormState({
     },
     [lastSavedData.updatedAt, setDraftCache]
   );
-  const clearDraftArtifacts = React54.useCallback(async () => {
-    const state = useAutoFormStore.getState();
-    const documentKey = getDocumentKey(state.formData.id);
-    if (documentKey) {
-      clearDraftCache(documentKey);
-    }
-    const draftUrl = globalSlug ? resolveApi(`/api/globals/${globalSlug}/draft`) : collectionSlug && state.formData.id ? resolveApi(`/api/${collectionSlug}/${state.formData.id}/draft`) : null;
-    if (draftUrl && versionsEnabled) {
-      try {
-        await fetchWithAuth(draftUrl, {
-          method: "DELETE"
-        });
-      } catch (err) {
-        console.error("Failed to clear draft snapshot:", err);
-      }
-    }
-  }, [clearDraftCache, collectionSlug, globalSlug, getDocumentKey]);
-  const fetchVersions = React54.useCallback(async () => {
+  const fetchVersions = React56.useCallback(async () => {
     const url = globalSlug ? resolveApi(`/api/globals/${globalSlug}/versions`) : collectionSlug && formData.id ? resolveApi(`/api/${collectionSlug}/${formData.id}/versions`) : null;
     if (!url) return;
     setLoadingVersions(true);
@@ -9188,7 +9094,7 @@ function useAutoFormState({
       setLoadingVersions(false);
     }
   }, [formData.id, collectionSlug, globalSlug, setLoadingVersions, setVersions]);
-  const performLocalAutoSave = React54.useCallback(() => {
+  const performLocalAutoSave = React56.useCallback(() => {
     const state = useAutoFormStore.getState();
     const latestFormData = state.formData;
     if (autoSaveSkipRef.current || !collectionSlug || !latestFormData.id) return;
@@ -9198,7 +9104,7 @@ function useAutoFormState({
       persistBrowserDraft(documentKey, latestFormData);
     }
   }, [collectionSlug, getDocumentKey, persistBrowserDraft]);
-  const performServerAutoSave = React54.useCallback(async (options) => {
+  const doAutosaveFetch = React56.useCallback(async (options) => {
     const state = useAutoFormStore.getState();
     const latestFormData = state.formData;
     const currentLastSaved = state.lastSavedData;
@@ -9215,29 +9121,22 @@ function useAutoFormState({
     }
     setIsAutoSaving(true);
     setAutoSaveStatus("saving");
+    state.setBackgroundProcessing(true);
     try {
-      const draftUpdatedAt = (/* @__PURE__ */ new Date()).toISOString();
-      const draftUrl = globalSlug ? resolveApi(`/api/globals/${globalSlug}/draft`) : resolveApi(`/api/${collectionSlug}/${latestFormData.id}/draft`);
-      const delta = state.getDirtyData();
-      const idempotencyKey = `${documentKey || "global"}:${Date.now()}`;
-      const response = await fetchWithAuth(
-        draftUrl,
-        {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Idempotency-Key": idempotencyKey
-          },
-          keepalive: options?.keepalive,
-          body: JSON.stringify({
-            delta: normalizeUploadFields(delta),
-            baseUpdatedAt: currentLastSaved.updatedAt ?? null,
-            draftUpdatedAt
-          })
-        }
-      );
+      const url = globalSlug ? resolveApi(`/api/globals/${globalSlug}?autosave=true`) : resolveApi(`/api/${collectionSlug}/${latestFormData.id}?autosave=true`);
+      const response = await fetchWithAuth(url, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Draft": "true"
+        },
+        keepalive: options?.keepalive,
+        body: JSON.stringify({
+          ...normalizeUploadFields(latestFormData),
+          baseUpdatedAt: currentLastSaved.updatedAt ?? null
+        })
+      });
       if (response.ok) {
-        const result = await response.json();
         lastAutoSaveTimeRef.current = Date.now();
         state.setRetryCount(0);
         state.setLastSavedAt(Date.now());
@@ -9246,8 +9145,8 @@ function useAutoFormState({
           setDraftCache(documentKey, {
             data: latestFormData,
             baseUpdatedAt: currentLastSaved.updatedAt ?? null,
-            draftUpdatedAt: result.data?.draftUpdatedAt || draftUpdatedAt,
-            lastSyncedAt: result.data?.updatedAt || (/* @__PURE__ */ new Date()).toISOString()
+            draftUpdatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+            lastSyncedAt: (await response.clone().json()).data?.updatedAt || (/* @__PURE__ */ new Date()).toISOString()
           });
         }
         setAutoSaveStatus("success");
@@ -9256,24 +9155,27 @@ function useAutoFormState({
             setAutoSaveStatus("idle");
           }
         }, 2e3);
+      } else if (response.status === 409) {
+        setAutoSaveStatus("conflict");
       } else {
         throw new Error(`Draft auto-save failed with status ${response.status}`);
       }
     } catch (err) {
       console.error("Auto-save failed:", err);
-      const state2 = useAutoFormStore.getState();
-      const currentRetryCount = state2.retryCount;
+      const currentState = useAutoFormStore.getState();
+      const currentRetryCount = currentState.retryCount;
       if (currentRetryCount < 5) {
-        state2.setRetryCount(currentRetryCount + 1);
+        currentState.setRetryCount(currentRetryCount + 1);
         setAutoSaveStatus("retrying");
         const delay = Math.min(1e3 * Math.pow(2, currentRetryCount), 6e4);
         if (retryTimerRef.current) clearTimeout(retryTimerRef.current);
-        retryTimerRef.current = setTimeout(() => performServerAutoSave(options), delay);
+        retryTimerRef.current = setTimeout(() => performAutosave(options), delay);
       } else {
         setAutoSaveStatus("offline");
       }
     } finally {
       setIsAutoSaving(false);
+      useAutoFormStore.getState().setBackgroundProcessing(false);
     }
   }, [
     collectionSlug,
@@ -9285,8 +9187,20 @@ function useAutoFormState({
     setIsAutoSaving,
     versionsEnabled
   ]);
-  const saveDocument = React54.useCallback(
-    async (dataOverride) => {
+  const performAutosave = React56.useCallback((options) => {
+    queueTask(
+      () => doAutosaveFetch(options),
+      {
+        beforeProcess: () => {
+          return true;
+        },
+        afterProcess: () => {
+        }
+      }
+    );
+  }, [doAutosaveFetch, queueTask]);
+  const saveDocument = React56.useCallback(
+    async (dataOverride, isDraft = true) => {
       const state = useAutoFormStore.getState();
       const payload = dataOverride || state.formData;
       const url = globalSlug ? resolveApi(`/api/globals/${globalSlug}`) : resolveApi(`/api/${collectionSlug}/${payload.id}`);
@@ -9294,7 +9208,10 @@ function useAutoFormState({
         url,
         {
           method: "PATCH",
-          headers: { "Content-Type": "application/json" },
+          headers: {
+            "Content-Type": "application/json",
+            "X-Draft": String(isDraft)
+          },
           body: JSON.stringify({
             ...normalizeUploadFields(payload),
             baseUpdatedAt: state.lastSavedData.updatedAt ?? null
@@ -9308,53 +9225,26 @@ function useAutoFormState({
     },
     [collectionSlug, globalSlug, setAutoSaveStatus]
   );
-  const publishDocument = React54.useCallback(async () => {
-    const state = useAutoFormStore.getState();
-    const url = globalSlug ? resolveApi(`/api/globals/${globalSlug}/publish`) : resolveApi(`/api/${collectionSlug}/${state.formData.id}/publish`);
-    const response = await fetchWithAuth(
-      url,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          baseUpdatedAt: state.lastSavedData.updatedAt ?? null
-        })
-      }
-    );
-    if (response.status === 409) {
-      setAutoSaveStatus("conflict");
-    }
-    return response;
-  }, [collectionSlug, globalSlug, setAutoSaveStatus]);
-  const unpublishDocument = React54.useCallback(async () => {
-    const state = useAutoFormStore.getState();
-    const url = globalSlug ? resolveApi(`/api/globals/${globalSlug}/unpublish`) : resolveApi(`/api/${collectionSlug}/${state.formData.id}/unpublish`);
-    const response = await fetchWithAuth(
-      url,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" }
-      }
-    );
-    return response;
-  }, [collectionSlug, globalSlug]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handleToggle = () => {
       setSidebarCollapsed(!sidebarCollapsed);
     };
     window.addEventListener("toggle-sidebar", handleToggle);
     return () => window.removeEventListener("toggle-sidebar", handleToggle);
   }, [sidebarCollapsed, setSidebarCollapsed]);
-  const lastLoadedSlugRef = React54.useRef(null);
-  const initialDataLoadedRef = React54.useRef(false);
-  React54.useEffect(() => {
+  const lastLoadedSlugRef = React56.useRef(null);
+  const lastInitialDataRef = React56.useRef("");
+  const initialDataLoadedRef = React56.useRef(false);
+  React56.useEffect(() => {
     const currentSlug = globalSlug || initialData?.id;
-    if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug) return;
+    const serialized = JSON.stringify(initialData);
+    if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug && lastInitialDataRef.current === serialized) return;
     loadDocument(initialData || {}, initialData || {});
     initialDataLoadedRef.current = true;
     lastLoadedSlugRef.current = currentSlug;
+    lastInitialDataRef.current = serialized;
   }, [collectionSlug, formData.id, globalSlug, initialData, loadDocument]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (!collectionSlug || !initialData?.id) return;
     const documentKey = getDocumentKey(initialData.id);
     if (!documentKey) return;
@@ -9363,24 +9253,9 @@ function useAutoFormState({
     const maybeRestoreDraft = async () => {
       if (!versionsEnabled) return;
       const browserDraft = getDraftCache(documentKey);
-      let serverDraft = null;
-      try {
-        const response = await fetchWithAuth(
-          resolveApi(`/api/${collectionSlug}/${initialData.id}/draft`)
-        );
-        if (response.ok) {
-          const result = await response.json();
-          serverDraft = result.data || null;
-        }
-      } catch (err) {
-        console.error("Failed to fetch server draft:", err);
-      }
-      const drafts = [browserDraft, serverDraft].filter(Boolean);
-      const candidate = drafts.sort(
-        (a, b) => new Date(b.draftUpdatedAt).getTime() - new Date(a.draftUpdatedAt).getTime()
-      )[0];
-      if (!candidate) return;
-      if (JSON.stringify(candidate.data) === JSON.stringify(initialData)) {
+      if (!browserDraft) return;
+      if (JSON.stringify(browserDraft.data) === JSON.stringify(initialData)) {
+        clearDraftCache(documentKey);
         return;
       }
       restorePromptedRef.current = documentKey;
@@ -9392,20 +9267,12 @@ function useAutoFormState({
         onConfirm: async () => {
           if (cancelled) return;
           const currentFormData = useAutoFormStore.getState().formData;
-          const mergedData = { ...currentFormData, ...candidate.data };
+          const mergedData = { ...currentFormData, ...browserDraft.data };
           setFormData(mergedData);
           onActionSuccess?.("Recovered autosaved draft");
         },
         onCancel: async () => {
           clearDraftCache(documentKey);
-          try {
-            await fetchWithAuth(
-              resolveApi(`/api/${collectionSlug}/${initialData.id}/draft`),
-              { method: "DELETE" }
-            );
-          } catch (err) {
-            console.error("Failed to discard server draft:", err);
-          }
         }
       });
     };
@@ -9421,7 +9288,8 @@ function useAutoFormState({
     getDraftCache,
     initialData,
     onActionSuccess,
-    setFormData
+    setFormData,
+    versionsEnabled
   ]);
   function findFieldDeep(fields2, name) {
     for (const f of fields2) {
@@ -9439,7 +9307,7 @@ function useAutoFormState({
     }
     return void 0;
   }
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const fields2 = config.fields;
     const metaTitleField = findFieldDeep(fields2, "metaTitle");
     if (!metaTitleField) return;
@@ -9449,7 +9317,7 @@ function useAutoFormState({
       setField("metaTitle", titleStr);
     }
   }, [formData, config.fields, setField]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const fields2 = config.fields;
     const slugField = fields2.find(
       (f) => f.name === "slug" && f.admin?.autoGenerate
@@ -9464,25 +9332,30 @@ function useAutoFormState({
       }
     }
   }, [formData, isSlugLocked, config.fields, setField]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (sidebarCollapsed) return;
     if (!globalSlug && (!collectionSlug || !formData.id)) return;
     const state = useAutoFormStore.getState();
     if (!state.hasDirtyFields()) return;
     if (getLastChangeSource() !== "keystroke") return;
     setChangeSource("other");
+    const serialized = JSON.stringify(formData);
+    if (serialized === previousFormDataRef.current) return;
     if (localSaveTimerRef.current) clearTimeout(localSaveTimerRef.current);
-    if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
     localSaveTimerRef.current = setTimeout(performLocalAutoSave, 1500);
-    serverSaveTimerRef.current = setTimeout(performServerAutoSave, 8e3);
-  }, [formData, sidebarCollapsed, collectionSlug, globalSlug, performLocalAutoSave, performServerAutoSave]);
-  React54.useEffect(() => {
+    if (serverSaveTimerRef.current) clearTimeout(serverSaveTimerRef.current);
+    serverSaveTimerRef.current = setTimeout(() => {
+      previousFormDataRef.current = serialized;
+      performAutosave();
+    }, 8e3);
+  }, [formData, sidebarCollapsed, collectionSlug, globalSlug, performLocalAutoSave, performAutosave]);
+  React56.useEffect(() => {
     if (!globalSlug && (!collectionSlug || !formData.id)) return;
     const flushDraft = () => {
       if (autoSaveSkipRef.current) return;
       const state = useAutoFormStore.getState();
       if (!state.hasDirtyFields()) return;
-      void performServerAutoSave({ keepalive: true });
+      void performAutosave({ keepalive: true });
     };
     const handleVisibilityChange = () => {
       if (document.hidden) {
@@ -9512,32 +9385,31 @@ function useAutoFormState({
       window.removeEventListener("offline", handleOffline);
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
-  }, [collectionSlug, globalSlug, formData.id, performServerAutoSave]);
-  React54.useEffect(() => {
+  }, [collectionSlug, globalSlug, formData.id, performAutosave]);
+  React56.useEffect(() => {
+    const serialized = JSON.stringify(formData);
+    if (serialized === astroSyncDataRef.current) return;
+    astroSyncDataRef.current = serialized;
     const hiddenInput = document.getElementById("form-data");
     if (hiddenInput) {
-      hiddenInput.value = JSON.stringify(formData);
+      hiddenInput.value = serialized;
     }
     onChange?.(formData);
   }, [formData, onChange]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (globalSlug || formData.id) fetchVersions();
   }, [formData.id, globalSlug, fetchVersions]);
   const documentStatus = (() => {
     if (!formData.id && !globalSlug) return "draft";
     if (!versionsEnabled) return "published";
-    if (formData.hasDraft) return "draft";
-    return formData.publishStatus || "published";
+    return formData.status || "published";
   })();
-  const hasUnpublishedChanges = (!!formData.id || !!globalSlug) && (documentStatus !== "published" || !!formData.hasDraft);
+  const hasUnpublishedChanges = (!!formData.id || !!globalSlug) && documentStatus === "draft";
   return {
     ...store,
     fetchVersions,
-    performAutoSave: performServerAutoSave,
+    performAutoSave: performAutosave,
     saveDocument,
-    publishDocument,
-    unpublishDocument,
-    clearDraftArtifacts,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,
@@ -9545,129 +9417,120 @@ function useAutoFormState({
     versionsEnabled
   };
 }
-function ModalContent({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[var(--kyro-text-secondary)]", children });
-}
-function ModalActions({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 mt-6", children });
-}
-function Modal({
-  open,
-  onClose,
-  title,
+function Dropdown({
+  trigger,
   children,
-  footer,
-  size = "md",
-  variant = "default"
+  align = "right",
+  direction = "up"
 }) {
-  React54.useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape") onClose();
+  const [open, setOpen] = React56.useState(false);
+  const ref = React56.useRef(null);
+  React56.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
     };
     if (open) {
-      document.addEventListener("keydown", handleEscape);
-      document.body.style.overflow = "hidden";
+      document.addEventListener("mousedown", handleClickOutside);
     }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
-    };
-  }, [open, onClose]);
-  if (!open) return null;
-  const sizeClasses = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg"
-  };
-  return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "absolute inset-0 bg-[var(--kyro-black)]/40 backdrop-blur-md transition-all duration-500",
-          onClick: onClose
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: `relative w-full ${sizeClasses[size]} bg-[var(--kyro-surface)] rounded-[var(--kyro-radius-lg)] shadow-2xl animate-in fade-in zoom-in-95 duration-300 border ${variant === "danger" ? "border-red-500/30" : "border-[var(--kyro-border)]"} overflow-hidden`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-8 py-6 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50 backdrop-blur-md", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold text-[var(--kyro-text-primary)]", children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onClose,
-                  className: "p-2 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] rounded-xl hover:bg-[var(--kyro-surface)] transition-all duration-200",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      width: "20",
-                      height: "20",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2.5",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
-                    }
-                  )
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-8 py-8", children }),
-            footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 px-8 py-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/50", children: footer })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => setOpen(!open), className: "cursor-pointer", children: trigger }),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `absolute z-[100] min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${align === "right" ? "right-0" : "left-0"} ${direction === "down" ? "top-full mt-2" : "bottom-full mb-2"}`,
+        onClick: () => setOpen(false),
+        children
+      }
+    )
+  ] });
 }
-function ConfirmModal({
-  open,
-  onClose,
-  onConfirm,
-  title,
-  message,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  variant = "default",
-  loading = false
+function DropdownItem({
+  children,
+  onClick,
+  icon,
+  danger,
+  disabled,
+  className = ""
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Modal,
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
     {
-      open,
-      onClose,
-      title,
-      size: "sm",
-      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onClose,
-            disabled: loading,
-            className: "kyro-btn kyro-btn-md kyro-btn-secondary",
-            children: cancelLabel
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onConfirm,
-            disabled: loading,
-            className: `kyro-btn kyro-btn-md ${variant === "danger" ? "kyro-btn-danger" : "kyro-btn-primary"}`,
-            children: loading ? "Loading..." : confirmLabel
-          }
-        )
-      ] }),
-      children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)]", children: message })
+      type: "button",
+      onClick,
+      disabled,
+      className: `w-full flex items-center gap-3 px-3 py-2.5 text-[11px] font-medium tracking-wide text-left transition-all rounded-xl ${danger ? "text-red-500 hover:bg-red-500/10" : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 opacity-70", children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children })
+      ]
     }
-  );
+  ) });
+}
+function DropdownSeparator() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--kyro-border)] opacity-50" });
+}
+function SplitButton({
+  status,
+  saveStatus,
+  hasChanges,
+  onPublish,
+  children,
+  disabled,
+  direction = "down"
+}) {
+  const isPublishedIdle = status === "published" && !hasChanges && saveStatus !== "saving" && saveStatus !== "error";
+  const isDisabled = disabled || saveStatus === "saving" || isPublishedIdle;
+  const btnBase = "kyro-btn kyro-btn-sm text-[11px] font-regular tracking-widest transition-all duration-300 rounded-lg";
+  const getBtnClass = () => {
+    if (saveStatus === "saving") return `${btnBase} bg-[var(--kyro-primary)]/70 border-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] cursor-wait`;
+    if (saveStatus === "saved") return `${btnBase} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)]`;
+    if (saveStatus === "error") return `${btnBase} bg-[var(--kyro-error)]   border-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)]`;
+    if (isPublishedIdle) return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
+    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
+  };
+  const chevronBase = "kyro-btn kyro-btn-md px-2 rounded-l-none border-l-[1px] border-white/20 transition-all duration-300";
+  const getChevronClass = () => {
+    if (saveStatus === "saving") return `${chevronBase} bg-[var(--kyro-primary)]/70 text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)]/70`;
+    if (saveStatus === "saved") return `${chevronBase} bg-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-success)]`;
+    if (saveStatus === "error") return `${chevronBase} bg-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-error)]`;
+    if (isPublishedIdle) return `${chevronBase} bg-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] border-[var(--kyro-gray-200)]`;
+    return `${chevronBase} bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
+  };
+  const getLabel2 = () => {
+    if (saveStatus === "saving") return "Publishing...";
+    if (saveStatus === "saved") return "Published \u2713";
+    if (saveStatus === "error") return "Retry";
+    if (isPublishedIdle) return "Published";
+    return "Publish Changes";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onPublish,
+        disabled: isDisabled,
+        className: `${getBtnClass()} ${!children ? "rounded-r-lg border-r border-[var(--kyro-border)]" : ""}`,
+        children: [
+          saveStatus === "saving" && /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", className: "inline mr-1.5" }),
+          isPublishedIdle && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", className: "inline mr-1", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+          getLabel2()
+        ]
+      }
+    ),
+    children && /* @__PURE__ */ jsxRuntime.jsx(
+      Dropdown,
+      {
+        trigger: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: getChevronClass(), disabled: saveStatus === "saving", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) }) }),
+        direction,
+        children
+      }
+    )
+  ] });
 }
 var SeoPreview = ({ title, description, slug }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg p-6 max-w-2xl shadow-sm transition-colors duration-300", children: [
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
@@ -9689,7 +9552,7 @@ function TabsLayout({
   onTabDataChange,
   renderField
 }) {
-  const [activeTab, setActiveTab] = React54.useState(0);
+  const [activeTab, setActiveTab] = React56.useState(0);
   const fieldTabs = field3.tabs || [];
   const currentTab = fieldTabs[activeTab] || fieldTabs[0];
   const tabData = field3.name ? formData[field3.name] || {} : formData;
@@ -9776,8 +9639,6 @@ function AutoForm({
     setAutoSaveStatus,
     fetchVersions,
     saveDocument,
-    publishDocument,
-    clearDraftArtifacts,
     autoSaveSkipRef,
     lastAutoSaveTimeRef,
     documentStatus,
@@ -9792,10 +9653,16 @@ function AutoForm({
     onActionSuccess,
     onActionError
   });
-  const menuRef = React54.useRef(null);
-  const scheduleRef = React54.useRef(null);
-  const [showSchedulePicker, setShowSchedulePicker] = React54.useState(false);
+  const menuRef = React56.useRef(null);
+  const scheduleRef = React56.useRef(null);
+  const [showSchedulePicker, setShowSchedulePicker] = React56.useState(false);
+  const [localSaveStatus, setLocalSaveStatus] = React56.useState("idle");
+  const [now, setNow] = React56.useState(Date.now());
   const disabled = propDisabled;
+  React56.useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1e4);
+    return () => clearInterval(id);
+  }, []);
   const resolveAdminFlag = (value, currentData) => {
     if (typeof value === "function") {
       try {
@@ -9870,7 +9737,7 @@ function AutoForm({
       return [...prev, versionId];
     });
   };
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handleShortcuts = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
@@ -9893,12 +9760,12 @@ function AutoForm({
     window.addEventListener("keydown", handleShortcuts);
     return () => window.removeEventListener("keydown", handleShortcuts);
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handler = () => setView("version");
     window.addEventListener("kyro:show-version-history", handler);
     return () => window.removeEventListener("kyro:show-version-history", handler);
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setIsMenuOpen(false);
@@ -9909,7 +9776,7 @@ function AutoForm({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isMenuOpen]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handleClickOutside = (e) => {
       if (scheduleRef.current && !scheduleRef.current.contains(e.target)) {
         setShowSchedulePicker(false);
@@ -9990,18 +9857,16 @@ function AutoForm({
       message: "Unpublish this document?",
       onConfirm: async () => {
         try {
-          const response = await fetchWithAuth(
-            resolveApi(`/api/${collectionSlug}/${formData.id}/unpublish`),
-            {
-              method: "POST"
-            }
+          const response = await saveDocument(
+            { ...formData, status: "draft" },
+            false
           );
-          if (response.ok) {
+          if (response?.ok) {
             onActionSuccess?.("Document unpublished successfully");
             location.reload();
           } else {
-            const error = await response.json();
-            toast.error(error.error || "Failed to unpublish");
+            const error = await response?.json().catch(() => ({}));
+            toast.error(error?.error || "Failed to unpublish");
           }
         } catch (err) {
           toast.error("Failed to unpublish");
@@ -10012,12 +9877,7 @@ function AutoForm({
   const handleSaveDraft = async () => {
     const isNewDoc = !formData.id;
     autoSaveSkipRef.current = true;
-    const btn = document.getElementById("btn-publish");
-    const originalText = btn?.textContent || "";
-    if (btn) {
-      btn.textContent = "Saving...";
-      btn.setAttribute("disabled", "true");
-    }
+    setLocalSaveStatus("saving");
     try {
       const data = normalizeUploadFields({ ...formData });
       const isPost = isNewDoc && !globalSlug;
@@ -10033,9 +9893,12 @@ function AutoForm({
         setLastSavedData({ ...formData, ...savedData });
         lastAutoSaveTimeRef.current = Date.now();
         setAutoSaveStatus("success");
-        await clearDraftArtifacts();
+        setLocalSaveStatus("saved");
         if (versionsEnabled) fetchVersions();
-        setTimeout(() => setAutoSaveStatus("idle"), 5e3);
+        setTimeout(() => {
+          setAutoSaveStatus("idle");
+          setLocalSaveStatus("idle");
+        }, 2e3);
         onActionSuccess?.(
           isPost ? "Document created successfully" : "Changes saved"
         );
@@ -10049,78 +9912,63 @@ function AutoForm({
         if (response.status === 409) {
           setAutoSaveStatus("conflict");
         }
+        setLocalSaveStatus("error");
         toast.error(error.error || "Failed to save");
+        setTimeout(() => setLocalSaveStatus("idle"), 3e3);
       }
     } catch (err) {
+      setLocalSaveStatus("error");
       toast.error("Failed to save document");
+      setTimeout(() => setLocalSaveStatus("idle"), 3e3);
     } finally {
       autoSaveSkipRef.current = false;
-      if (btn) {
-        btn.textContent = originalText;
-        btn.removeAttribute("disabled");
-      }
     }
   };
   const handlePublish = async () => {
     const isNewDoc = !formData.id;
     autoSaveSkipRef.current = true;
-    const btn = document.getElementById("btn-publish");
-    const originalText = btn?.textContent || "";
-    if (btn) {
-      btn.textContent = "Publishing...";
-      btn.setAttribute("disabled", "true");
-    }
+    setLocalSaveStatus("saving");
     try {
       if (isNewDoc && !globalSlug) {
-        const data = normalizeUploadFields({ ...formData });
+        const data2 = normalizeUploadFields({ ...formData });
         const response2 = await fetchWithAuth(`/api/${collectionSlug}`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(data)
+          body: JSON.stringify(data2)
         });
         if (!response2.ok) {
           const error = await response2.json().catch(() => ({}));
           if (response2.status === 409) setAutoSaveStatus("conflict");
+          setLocalSaveStatus("error");
           toast.error(error.error || "Failed to create document");
+          setTimeout(() => setLocalSaveStatus("idle"), 3e3);
           return;
         }
         const result = await response2.json();
-        const savedData = result.data || data;
+        const savedData = result.data || data2;
         setFormData({ ...formData, ...savedData });
         setLastSavedData({ ...formData, ...savedData });
-      } else if (hasUnsavedChanges) {
-        const response2 = await saveDocument(formData);
-        if (!response2.ok) {
-          const error = await response2.json().catch(() => ({}));
-          if (response2.status === 409) setAutoSaveStatus("conflict");
-          toast.error(error.error || "Failed to save before publishing");
-          return;
-        }
-        const result = await response2.json();
-        if (result.data) {
-          setFormData({ ...formData, ...result.data });
-          setLastSavedData({ ...formData, ...result.data });
-        }
       }
-      const response = await publishDocument();
-      if (response.ok) {
-        await clearDraftArtifacts();
+      const data = normalizeUploadFields({ ...formData });
+      const response = await saveDocument(data, false);
+      if (response?.ok) {
+        setLocalSaveStatus("saved");
         onActionSuccess?.("Published successfully");
-        await new Promise((r) => setTimeout(r, 1500));
+        await new Promise((r) => setTimeout(r, 1e3));
         location.reload();
       } else {
-        const error = await response.json();
-        if (response.status === 409) setAutoSaveStatus("conflict");
-        toast.error(error.error || "Failed to publish");
+        const error = await response?.json().catch(() => ({}));
+        if (response?.status === 409) setAutoSaveStatus("conflict");
+        setLocalSaveStatus("error");
+        toast.error(error?.error || "Failed to publish");
+        setTimeout(() => setLocalSaveStatus("idle"), 3e3);
       }
     } catch (err) {
+      setLocalSaveStatus("error");
       toast.error("Failed to publish");
+      setTimeout(() => setLocalSaveStatus("idle"), 3e3);
     } finally {
       autoSaveSkipRef.current = false;
-      if (btn) {
-        btn.textContent = originalText;
-        btn.removeAttribute("disabled");
-      }
     }
   };
   const handleSchedulePublish = async (scheduledFor) => {
@@ -10437,12 +10285,12 @@ function AutoForm({
     const docTitle = String(
       formData.mainTabs?.title || (typeof formData.title === "object" ? "" : formData.title) || (typeof formData.name === "object" ? "" : formData.name) || "Untitled"
     );
-    const docStatus = documentStatus ?? formData.publishStatus ?? formData.status ?? "draft";
+    const docStatus = documentStatus ?? formData.status ?? "draft";
     const isNew = !formData.id;
     const lastModified = formData.updatedAt ? new Date(formData.updatedAt).toLocaleString() : "Just now";
     const createdAt = formData.createdAt ? new Date(formData.createdAt).toLocaleString() : "Just now";
-    const isDraftMode = !formData.id || documentStatus === "draft" || !!formData.hasDraft;
-    const statusLabel = hasUnpublishedChanges ? docStatus === "draft" && !formData._prevStatus ? "Draft" : "Published (unpublished changes)" : docStatus === "published" ? "Published" : "Draft";
+    !formData.id || documentStatus === "draft";
+    const statusLabel = hasUnpublishedChanges ? "Draft (unpublished changes)" : docStatus === "published" ? "Published" : "Draft";
     const statusColor = docStatus === "published" && !hasUnsavedChanges ? "bg-[var(--kyro-success)]" : hasUnpublishedChanges ? "bg-[var(--kyro-warning)]" : "bg-[var(--kyro-text-muted)]";
     const statusBadgeBg = docStatus === "published" && !hasUnpublishedChanges ? "bg-[var(--kyro-success)]/10 text-[var(--kyro-success)] border-[var(--kyro-success)]/20" : hasUnpublishedChanges ? "bg-[var(--kyro-warning)]/10 text-[var(--kyro-warning)] border-[var(--kyro-warning)]/20" : "bg-[var(--kyro-text-muted)]/10 text-[var(--kyro-text-muted)] border-[var(--kyro-text-muted)]/20";
     return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "surface-tile px-8 py-6 flex items-center justify-between sticky top-0 z-50 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] backdrop-blur-md", children: [
@@ -10453,24 +10301,7 @@ function AutoForm({
             {
               href: `/${collectionSlug}`,
               className: "p-2 border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: "2.5",
-                      d: "M15 19l-7-7 7-7"
-                    }
-                  )
-                }
-              )
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold tracking-tighter", children: docTitle }),
@@ -10513,18 +10344,7 @@ function AutoForm({
             "Saving draft..."
           ] }),
           autoSaveStatus === "success" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--kyro-success)] flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "12",
-                height: "12",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "3",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" })
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" }),
             lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 6e4)}m ago` : "Draft saved"
           ] }),
           autoSaveStatus === "retrying" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--kyro-warning)] flex items-center gap-1.5", children: [
@@ -10584,13 +10404,23 @@ function AutoForm({
                 onClick: async () => {
                   setFormData(lastSavedData);
                   markSaved();
-                  await clearDraftArtifacts();
                 },
                 className: "text-[var(--kyro-primary)] hover:underline",
                 children: "Revert changes"
               }
             )
           ] }),
+          lastSavedAt && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "success" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
+            "Draft saved ",
+            (() => {
+              const diffMs = now - lastSavedAt;
+              const diffMin = Math.floor(diffMs / 6e4);
+              const diffSec = Math.floor(diffMs / 1e3);
+              if (diffMin >= 1) return `${diffMin}m ago`;
+              if (diffSec >= 5) return `${diffSec}s ago`;
+              return "just now";
+            })()
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
             "Modified ",
             lastModified
@@ -10622,18 +10452,7 @@ function AutoForm({
               className: `kyro-btn p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`,
               title: "Live Preview",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14L21 3" })
-                  }
-                ),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "w-4 h-4" }),
                 showPreview && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold  tracking-widest pr-1", children: "Active" })
               ]
             }
@@ -10664,164 +10483,98 @@ function AutoForm({
               )
             }
           ),
-          documentStatus === "published" && !isNew && !hasUnsavedChanges ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 px-6 py-2.5 text-xs rounded-xl bg-green-100 text-green-700 border border-green-200 cursor-not-allowed", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) }),
-            "Published"
-          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, className: "relative flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center rounded-xl overflow-hidden shadow-lg", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SplitButton,
+            {
+              status: documentStatus,
+              saveStatus: localSaveStatus,
+              hasChanges: hasUnsavedChanges,
+              onPublish: handlePublish,
+              disabled: localSaveStatus === "saving"
+            }
+          ),
+          !isNew && /* @__PURE__ */ jsxRuntime.jsxs(
+            Dropdown,
+            {
+              trigger: /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  id: "btn-publish",
                   type: "button",
-                  onClick: isDraftMode ? handleSaveDraft : handlePublish,
-                  className: `px-6 py-2.5 text-xs font-bold rounded-l-xl rounded-r-none transition-all whitespace-nowrap ${isDraftMode ? "kyro-btn-primary" : "kyro-btn-success"}`,
-                  children: isDraftMode ? "Save Draft" : "Publish Changes"
+                  className: "kyro-btn p-2.5 rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)] transition-all",
+                  title: "More actions",
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "1.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "19", r: "1.5" })
+                  ] })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setIsMenuOpen(!isMenuOpen),
-                  className: `px-2.5 py-2.5 text-xs rounded-r-xl rounded-l-none transition-all ${isDraftMode ? "kyro-btn-primary" : "kyro-btn-success"}`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) })
-                }
-              )
-            ] }),
-            isMenuOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-full mt-2 w-56 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50 overflow-hidden", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    handleSaveDraft();
-                    setIsMenuOpen(false);
-                  },
-                  className: "w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 21 17 13 7 13 7 21" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 3 7 8 15 8" })
+              direction: "down",
+              children: [
+                !globalSlug && /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownItem,
+                  {
+                    onClick: handleCreateNew,
+                    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
                     ] }),
-                    "Save Draft"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    handlePublish();
-                    setIsMenuOpen(false);
-                  },
-                  className: "w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "5 3 19 12 5 21 5 3" }) }),
-                    "Publish"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    setIsMenuOpen(false);
-                    setShowSchedulePicker(true);
-                  },
-                  className: "w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                    children: "Create New"
+                  }
+                ),
+                !globalSlug && /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownItem,
+                  {
+                    onClick: handleDuplicate,
+                    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+                    ] }),
+                    children: "Duplicate"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownItem,
+                  {
+                    onClick: () => setShowSchedulePicker(true),
+                    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
                       /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
                       /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
                       /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
                     ] }),
-                    "Schedule Publish"
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-[var(--kyro-border)]" }),
-              !globalSlug && /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    handleCreateNew();
-                    setIsMenuOpen(false);
-                  },
-                  className: "w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-                    ] }),
-                    "Create New"
-                  ]
-                }
-              ),
-              !isNew && !globalSlug && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      handleDuplicate();
-                      setIsMenuOpen(false);
-                    },
-                    className: "w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                      ] }),
-                      "Duplicate"
-                    ]
+                    children: "Schedule Publish"
                   }
                 ),
-                documentStatus === "published" && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
+                documentStatus === "published" && /* @__PURE__ */ jsxRuntime.jsx(
+                  DropdownItem,
                   {
-                    type: "button",
-                    onClick: () => {
-                      handleUnpublish();
-                      setIsMenuOpen(false);
-                    },
-                    className: "w-full px-4 py-2.5 text-left text-xs font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] flex items-center gap-3 transition-colors",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
-                      ] }),
-                      "Unpublish"
-                    ]
+                    onClick: handleUnpublish,
+                    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+                    ] }),
+                    children: "Unpublish"
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px bg-[var(--kyro-border)]" }),
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      handleDelete();
-                      setIsMenuOpen(false);
-                    },
-                    className: "w-full px-4 py-2.5 text-left text-xs font-medium text-red-600 hover:bg-red-50 flex items-center gap-3 transition-colors",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                !globalSlug && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DropdownSeparator, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    DropdownItem,
+                    {
+                      onClick: handleDelete,
+                      danger: true,
+                      icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
                         /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "3 6 5 6 21 6" }),
                         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
                       ] }),
-                      "Delete"
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          ] }),
+                      children: "Delete"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
           showSchedulePicker && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scheduleRef, className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 top-2 p-4 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium mb-2", children: "Schedule Publish" }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -10941,17 +10694,7 @@ function AutoForm({
             type: "button",
             onClick: () => setCompareDiffs([]),
             className: "p-1 rounded hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-muted)]",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                className: "w-3.5 h-3.5",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2.5",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12" })
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
           }
         )
       ] }),
@@ -10982,17 +10725,7 @@ function AutoForm({
               "div",
               {
                 className: `w-4 h-4 rounded-full border ${isSelected ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]" : "border-[var(--kyro-border)]"}`,
-                children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: "w-full h-full text-white p-0.5",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "3",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" })
-                  }
-                )
+                children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" })
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-[var(--kyro-text-muted)] w-5", children: versions.length - i }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-4 min-w-0", children: [
@@ -11085,18 +10818,7 @@ function AutoForm({
                   "div",
                   {
                     className: `w-4 h-4 rounded border transition-all flex items-center justify-center ${item.checked ? "bg-[var(--kyro-primary)] border-[var(--kyro-primary)]" : "border-[var(--kyro-border)] group-hover:border-[var(--kyro-text-secondary)]"}`,
-                    children: item.checked && /* @__PURE__ */ jsxRuntime.jsx(
-                      "svg",
-                      {
-                        width: "10",
-                        height: "10",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "white",
-                        strokeWidth: "4",
-                        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" })
-                      }
-                    )
+                    children: item.checked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--kyro-text-secondary)] group-hover:text-[var(--kyro-text-primary)] transition-colors", children: item.label })
@@ -11131,7 +10853,7 @@ function AutoForm({
             "Saving..."
           ] }),
           autoSaveStatus === "success" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--kyro-success)] flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6L9 17l-5-5" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4" }),
             lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 6e4)}m ago` : "Saved"
           ] }),
           autoSaveStatus === "retrying" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--kyro-warning)] flex items-center gap-1.5", children: [
@@ -11156,85 +10878,29 @@ function AutoForm({
           type: "button",
           style: { width: 0, height: 0, opacity: 0, padding: 0, margin: 0, border: "none", position: "absolute" },
           onClick: async () => {
-            console.log("[AutoForm] Hidden save button clicked");
             try {
               const response = await saveDocument();
               if (response.ok) {
-                const result = await response.json();
-                const savedData = result.data || formData;
-                setFormData({ ...formData, ...savedData });
-                setLastSavedData({ ...formData, ...savedData });
-                onActionSuccess?.("Changes saved");
-              }
-            } catch (e) {
-              console.error("Save error exception:", e);
-              onActionError?.("Save failed: " + e.message);
-            }
-          }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "w-full", children: [
-      view === "edit" && renderEditView(),
-      view === "version" && renderVersionView(),
-      view === "api" && renderApiView()
-    ] })
-  ] });
-}
-function Dropdown({
-  trigger,
-  children,
-  align = "right"
-}) {
-  const [open, setOpen] = React54.useState(false);
-  const ref = React54.useRef(null);
-  React54.useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (ref.current && !ref.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    if (open) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: () => setOpen(!open), className: "cursor-pointer", children: trigger }),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: `absolute z-[100] mt-2 min-w-[200px] py-2 bg-[var(--kyro-surface)] rounded-2xl shadow-2xl border border-[var(--kyro-border)] animate-in fade-in zoom-in-95 duration-100 ${align === "right" ? "right-0 bottom-full mb-2" : "left-0 bottom-full mb-2"}`,
-        onClick: () => setOpen(false),
-        children
-      }
-    )
-  ] });
-}
-function DropdownItem({
-  children,
-  onClick,
-  icon,
-  danger,
-  disabled,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      onClick,
-      disabled,
-      className: `w-full flex items-center gap-3 px-3 py-2.5 text-[11px] font-medium tracking-wide text-left transition-all rounded-xl ${danger ? "text-red-500 hover:bg-red-500/10" : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`,
-      children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 opacity-70", children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children })
-      ]
-    }
-  ) });
-}
-function DropdownSeparator() {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--kyro-border)] opacity-50" });
+                const result = await response.json();
+                const savedData = result.data || formData;
+                setFormData({ ...formData, ...savedData });
+                setLastSavedData({ ...formData, ...savedData });
+                onActionSuccess?.("Changes saved");
+              }
+            } catch (e) {
+              console.error("Save error exception:", e);
+              onActionError?.("Save failed: " + e.message);
+            }
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "w-full", children: [
+      view === "edit" && renderEditView(),
+      view === "version" && renderVersionView(),
+      view === "api" && renderApiView()
+    ] })
+  ] });
 }
 function ActionBar({
   status,
@@ -11257,82 +10923,27 @@ function ActionBar({
     if (hasChanges) return "Unsaved changes";
     return null;
   };
-  const getSaveButtonClass = () => {
-    const base = "kyro-btn kyro-btn-md text-[11px] font-bold  tracking-widest transition-all duration-300";
-    if (saveStatus === "saving") return `${base} bg-[var(--kyro-gray-400)] text-white opacity-70 cursor-wait`;
-    if (saveStatus === "saved") return `${base} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-white shadow-[0_0_15px_rgba(34,197,94,0.3)]`;
-    if (saveStatus === "error") return `${base} bg-[var(--kyro-error)] border-[var(--kyro-error)] text-white shadow-[0_0_15px_rgba(239,68,68,0.3)]`;
-    if (hasChanges) return `${base} bg-[var(--kyro-warning)] border-[var(--kyro-warning)] text-black shadow-[0_0_15px_rgba(255,174,0,0.3)] animate-pulse`;
-    return `${base} bg-[var(--kyro-gray-500)] border-[var(--kyro-gray-500)] text-white hover:bg-[var(--kyro-gray-600)]`;
-  };
   const getStatusBadge = () => {
     const statusConfig2 = {
       draft: {
         label: "Draft",
         class: "bg-gray-100 text-gray-600 border-gray-200",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            width: "12",
-            height: "12",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2v20M2 12h20" })
-          }
-        )
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3" })
       },
       published: {
         label: "Published",
         class: "bg-green-100 text-green-700 border-green-200",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            width: "12",
-            height: "12",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" })
-          }
-        )
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-3 h-3" })
       },
       scheduled: {
         label: "Scheduled",
         class: "bg-blue-100 text-blue-700 border-blue-200",
-        icon: /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            width: "12",
-            height: "12",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6v6l4 2" })
-            ]
-          }
-        )
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-3 h-3" })
       },
       archived: {
         label: "Archived",
         class: "bg-yellow-100 text-yellow-700 border-yellow-200",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            width: "12",
-            height: "12",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "2.5",
-            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 8v13H3V8M1 3h22v5H1zM10 12h4" })
-          }
-        )
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Archive, { className: "w-3 h-3" })
       }
     };
     const config = statusConfig2[status];
@@ -11358,7 +10969,7 @@ function ActionBar({
         getSaveStatusText() && /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
-            className: `text-sm ${saveStatus === "error" ? "text-red-500" : "text-gray-500"}`,
+            className: `text-sm ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`,
             children: [
               saveStatus === "saving" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm", className: "inline mr-1" }) : null,
               getSaveStatusText()
@@ -11367,7 +10978,7 @@ function ActionBar({
         )
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs space-y-0.5", children: [
-        updatedAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-gray-400", children: [
+        updatedAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--kyro-text-muted)]", children: [
           "Updated: ",
           formatDate2(updatedAt)
         ] }),
@@ -11384,20 +10995,9 @@ function ActionBar({
           type: "button",
           onClick: onPublish,
           disabled: saveStatus === "saving",
-          className: "kyro-btn-success hover:opacity-90 kyro-btn-md flex items-center gap-2",
+          className: "kyro-btn kyro-btn-primary kyro-btn-md flex items-center gap-2",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2.5",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" })
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }),
             "Publish"
           ]
         }
@@ -11408,114 +11008,39 @@ function ActionBar({
           type: "button",
           onClick: onUnpublish,
           disabled: saveStatus === "saving",
-          className: "kyro-btn kyro-btn-warning kyro-btn-md flex items-center gap-2",
+          className: "kyro-btn kyro-btn-secondary kyro-btn-md flex items-center gap-2",
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                width: "16",
-                height: "16",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2.5",
-                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8M3 3v5h5" })
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo, { className: "w-4 h-4" }),
             "Unpublish"
           ]
         }
       ),
-      status === "published" && !hasChanges && saveStatus !== "saving" && saveStatus !== "error" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-[11px] font-bold tracking-widest bg-green-100 text-green-700 border border-green-200 cursor-not-allowed shadow-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) }),
-        "Published"
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onSave,
-          disabled: saveStatus === "saving" || !hasChanges && saveStatus !== "error",
-          className: getSaveButtonClass(),
-          children: saveStatus === "saving" ? "Saving..." : saveStatus === "saved" ? "Saved" : hasChanges && status === "published" ? "Save Draft" : status === "draft" && hasChanges ? "Save Draft" : "Save"
-        }
-      ),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        Dropdown,
+        SplitButton,
         {
-          trigger: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "kyro-btn kyro-btn-ghost kyro-btn-md p-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "svg",
-            {
-              width: "16",
-              height: "16",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1" }),
-                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "1" }),
-                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "19", r: "1" })
-              ]
-            }
-          ) }),
+          status,
+          saveStatus,
+          hasChanges,
+          onPublish: onSave,
           children: [
             onDuplicate && /* @__PURE__ */ jsxRuntime.jsx(
               DropdownItem,
               {
-                onClick: onDuplicate,
-                icon: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                    ]
-                  }
-                ),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }),
                 children: "Duplicate"
               }
             ),
             onViewHistory && /* @__PURE__ */ jsxRuntime.jsx(
               DropdownItem,
               {
-                onClick: onViewHistory,
-                icon: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12,6 12,12 16,14" })
-                    ]
-                  }
-                ),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4" }),
                 children: "View History"
               }
             ),
             onPreview && /* @__PURE__ */ jsxRuntime.jsx(
               DropdownItem,
               {
-                onClick: onPreview,
-                icon: /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
-                      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" })
-                    ]
-                  }
-                ),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4" }),
                 children: "Preview"
               }
             ),
@@ -11525,16 +11050,7 @@ function ActionBar({
               {
                 onClick: onDelete,
                 danger: true,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: "2",
-                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
-                  }
-                ),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" }),
                 children: "Delete"
               }
             )
@@ -11544,62 +11060,6 @@ function ActionBar({
     ] })
   ] });
 }
-function Toast({ type, message, onClose }) {
-  const [isPaused, setIsPaused] = React54__default.default.useState(false);
-  const timerRef = React54__default.default.useRef(null);
-  const startTimer = () => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    timerRef.current = setTimeout(onClose, 5e3);
-  };
-  const clearTimer = () => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-  };
-  React54__default.default.useEffect(() => {
-    if (!isPaused) {
-      startTimer();
-    } else {
-      clearTimer();
-    }
-    return clearTimer;
-  }, [isPaused, onClose]);
-  const Icon = {
-    success: lucideReact.CircleCheck,
-    error: lucideReact.ShieldAlert,
-    warning: lucideReact.TriangleAlert,
-    info: lucideReact.Info
-  }[type];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `kyro-toast kyro-toast-${type} group animate-in fade-in slide-in-from-right-4 duration-300`,
-      onMouseEnter: () => setIsPaused(true),
-      onMouseLeave: () => setIsPaused(false),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toast-accent" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toast-icon-container", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toast-content", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "kyro-toast-message", children: message }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "kyro-toast-close group-hover:opacity-100 opacity-40 transition-opacity",
-            onClick: onClose,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
-          }
-        )
-      ]
-    }
-  );
-}
-function ToastProvider({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-}
-function useToast() {
-  const addToast = useToastStore((state) => state.addToast);
-  const removeToast = useToastStore((state) => state.removeToast);
-  const toasts = useToastStore((state) => state.toasts);
-  return { toasts, addToast, removeToast };
-}
 function DetailView({
   config,
   collection,
@@ -11611,34 +11071,33 @@ function DetailView({
   onError,
   mode = "collection"
 }) {
-  const { addToast } = useToast();
   const { confirm, alert } = useUIStore();
-  const [data, setData] = React54.useState({});
-  const [originalData, setOriginalData] = React54.useState({});
-  const [loading, setLoading] = React54.useState(true);
-  const [saving, setSaving] = React54.useState(false);
-  const [saveStatus, setSaveStatus] = React54.useState("idle");
-  const [deleting, setDeleting] = React54.useState(false);
-  const [status, setStatus] = React54.useState("draft");
-  const [createdAt, setCreatedAt] = React54.useState(null);
-  const [updatedAt, setUpdatedAt] = React54.useState(null);
-  const [publishedAt, setPublishedAt] = React54.useState(null);
-  const [justSaved, setJustSaved] = React54.useState(false);
+  const [data, setData] = React56.useState({});
+  const [originalData, setOriginalData] = React56.useState({});
+  const [loading, setLoading] = React56.useState(true);
+  const [saving, setSaving] = React56.useState(false);
+  const [saveStatus, setSaveStatus] = React56.useState("idle");
+  const [deleting, setDeleting] = React56.useState(false);
+  const [status, setStatus] = React56.useState("draft");
+  const [createdAt, setCreatedAt] = React56.useState(null);
+  const [updatedAt, setUpdatedAt] = React56.useState(null);
+  const [publishedAt, setPublishedAt] = React56.useState(null);
+  const [justSaved, setJustSaved] = React56.useState(false);
   const fields2 = global?.fields || collection?.fields || [];
   const label = global?.label || collection?.label || "Document";
   const slug = global?.slug || collection?.slug || "";
   const hasChanges = JSON.stringify(data) !== JSON.stringify(originalData);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (hasChanges && status === "published") {
       setStatus("draft");
     }
   }, [hasChanges, status]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (hasChanges && saveStatus === "saved") {
       setSaveStatus("idle");
     }
   }, [hasChanges, saveStatus]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (mode === "global") {
       loadGlobal();
     } else if (documentId) {
@@ -11652,7 +11111,7 @@ function DetailView({
       const docData = result.data || {};
       setData(docData);
       setOriginalData(docData);
-      setStatus(docData?.publishStatus || result.status || "draft");
+      setStatus(docData?.status || result.status || "draft");
       setCreatedAt(result.createdAt || docData.createdAt || null);
       setUpdatedAt(result.updatedAt || docData.updatedAt || null);
       setPublishedAt(result.publishedAt || docData.publishedAt || null);
@@ -11677,26 +11136,28 @@ function DetailView({
       setLoading(false);
     }
   };
-  const handleSave = React54.useCallback(
+  const handleSave = React56.useCallback(
     async (isAutosave = false) => {
       try {
         setSaveStatus("saving");
         const endpoint = mode === "global" ? `/api/globals/${slug}` : `/api/${slug}/${documentId}`;
-        const result = await apiPatch(endpoint, data, { autoToast: false });
+        const isDraft = status === "draft" || data?.status === "draft";
+        const result = await apiPatch(endpoint, data, { autoToast: false, headers: { "X-Draft": String(isDraft) } });
         const savedData = result && (result.data || result) || data;
         if (!isAutosave) {
           setOriginalData(savedData);
           onSave();
         }
         setData(savedData);
-        setStatus(savedData?.publishStatus || status);
+        setStatus(savedData?.status || status);
         setSaveStatus("saved");
         setUpdatedAt((/* @__PURE__ */ new Date()).toISOString());
         setJustSaved(true);
         setTimeout(() => setJustSaved(false), 3e3);
         if (!isAutosave) {
-          const isDraft = status === "draft" || savedData?.publishStatus === "draft";
-          addToast?.(isDraft ? "warning" : "success", isDraft ? "Draft saved" : "Updated");
+          const isDraft2 = status === "draft" || savedData?.status === "draft";
+          if (isDraft2) toast.warning("Draft saved");
+          else toast.success("Updated");
         }
         setTimeout(() => {
           setSaveStatus("idle");
@@ -11705,24 +11166,28 @@ function DetailView({
         setSaveStatus("error");
         if (!isAutosave) {
           onError("Failed to save changes");
-          addToast?.("error", "Failed to save changes");
+          toast.error("Failed to save changes");
         }
       } finally {
         setSaving(false);
       }
     },
-    [data, mode, slug, documentId, onSave, onError]
+    [data, mode, slug, documentId, status, onSave, onError]
   );
   const handlePublish = async () => {
     try {
       setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/publish`, void 0, { autoToast: false });
+      await apiPatch(`/api/${slug}/${documentId}`, data, {
+        autoToast: false,
+        headers: { "X-Draft": "false" }
+      });
       setStatus("published");
       setPublishedAt((/* @__PURE__ */ new Date()).toISOString());
-      addToast?.("success", "Published successfully");
+      toast.success("Published successfully");
+      onSave();
     } catch {
       onError("Failed to publish");
-      addToast?.("error", "Failed to publish");
+      toast.error("Failed to publish");
     } finally {
       setSaving(false);
     }
@@ -11730,12 +11195,16 @@ function DetailView({
   const handleUnpublish = async () => {
     try {
       setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/unpublish`, void 0, { autoToast: false });
+      await apiPatch(`/api/${slug}/${documentId}`, { status: "draft" }, {
+        autoToast: false,
+        headers: { "X-Draft": "false" }
+      });
       setStatus("draft");
-      addToast?.("warning", "Document unpublished");
+      toast.warning("Document unpublished");
+      onSave();
     } catch {
       onError("Failed to unpublish");
-      addToast?.("error", "Failed to unpublish");
+      toast.error("Failed to unpublish");
     } finally {
       setSaving(false);
     }
@@ -11744,11 +11213,11 @@ function DetailView({
     try {
       setSaving(true);
       await apiPost(`/api/${slug}/${documentId}/duplicate`, void 0, { autoToast: false });
-      addToast?.("success", "Document duplicated");
+      toast.success("Document duplicated");
     } catch (err) {
       const message = err instanceof Error ? err.message : "Failed to duplicate document";
       onError(message);
-      addToast?.("error", message);
+      toast.error(message);
     } finally {
       setSaving(false);
     }
@@ -11763,10 +11232,10 @@ function DetailView({
           setDeleting(true);
           await apiDelete(`/api/${slug}/${documentId}`, { autoToast: false });
           onDelete?.();
-          addToast?.("error", "Document deleted");
+          toast.error("Document deleted");
         } catch (err) {
           const message = err instanceof Error ? err.message : "Failed to delete document";
-          addToast?.("error", message);
+          toast.error(message);
         } finally {
           setDeleting(false);
         }
@@ -11849,8 +11318,8 @@ function DetailView({
                 layout: isSingleLayout ? "single" : "split",
                 globalSlug: mode === "global" ? slug : void 0,
                 collectionSlug: mode === "collection" ? slug : void 0,
-                onActionSuccess: (message) => addToast?.("success", message),
-                onActionError: (message) => addToast?.("error", message),
+                onActionSuccess: (message) => toast.success(message),
+                onActionError: (message) => toast.error(message),
                 documentStatus: status,
                 justSaved
               }
@@ -11865,44 +11334,14 @@ function DetailView({
                   children: "Delete"
                 }
               ),
-              status === "published" && !hasChanges && !saving ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 px-6 py-2.5 rounded-lg text-xs font-bold bg-green-100 text-green-700 border border-green-200 cursor-not-allowed shadow-xl", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }) }),
-                "Published"
-              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SplitButton,
                 {
-                  type: "button",
-                  onClick: () => handleSave(false),
-                  disabled: saving,
-                  className: "kyro-btn kyro-btn-lg kyro-btn-primary shadow-xl flex items-center gap-2",
-                  children: [
-                    saving ? /* @__PURE__ */ jsxRuntime.jsx(
-                      "svg",
-                      {
-                        className: "w-4 h-4 animate-spin",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-                      }
-                    ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                      "svg",
-                      {
-                        className: "w-4 h-4",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 21 17 13 7 13 7 21" }),
-                          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 3 7 8 15 8" })
-                        ]
-                      }
-                    ),
-                    saving ? "Saving..." : mode === "global" ? "Save Configuration" : "Save Document"
-                  ]
+                  status,
+                  saveStatus: saving ? "saving" : "idle",
+                  hasChanges,
+                  onPublish: () => handleSave(false),
+                  disabled: saving
                 }
               )
             ] })
@@ -11989,8 +11428,8 @@ function CreateView({
   onSuccess,
   onError
 }) {
-  const [data, setData] = React54.useState({});
-  const [saving, setSaving] = React54.useState(false);
+  const [data, setData] = React56.useState({});
+  const [saving, setSaving] = React56.useState(false);
   const fields2 = collection.fields || [];
   const label = collection.label || collection.slug;
   const handleSubmit = async (e) => {
@@ -12032,15 +11471,71 @@ function CreateView({
     ) }) }) }) })
   ] });
 }
+function Toast({ type, message, onClose }) {
+  const [isPaused, setIsPaused] = React56__default.default.useState(false);
+  const timerRef = React56__default.default.useRef(null);
+  const startTimer = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(onClose, 5e3);
+  };
+  const clearTimer = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+  };
+  React56__default.default.useEffect(() => {
+    if (!isPaused) {
+      startTimer();
+    } else {
+      clearTimer();
+    }
+    return clearTimer;
+  }, [isPaused, onClose]);
+  const Icon = {
+    success: lucideReact.CircleCheck,
+    error: lucideReact.ShieldAlert,
+    warning: lucideReact.TriangleAlert,
+    info: lucideReact.Info
+  }[type];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `kyro-toast kyro-toast-${type} group animate-in fade-in slide-in-from-right-4 duration-300`,
+      onMouseEnter: () => setIsPaused(true),
+      onMouseLeave: () => setIsPaused(false),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toast-accent" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toast-icon-container", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toast-content", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "kyro-toast-message", children: message }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "kyro-toast-close group-hover:opacity-100 opacity-40 transition-opacity",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ]
+    }
+  );
+}
+function ToastProvider({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function useToast() {
+  const addToast = useToastStore((state) => state.addToast);
+  const removeToast = useToastStore((state) => state.removeToast);
+  const toasts = useToastStore((state) => state.toasts);
+  return { toasts, addToast, removeToast };
+}
 function LoginPage({ onAuth, theme = "light" }) {
-  const [mode, setMode] = React54.useState("login");
-  const [email, setEmail] = React54.useState("");
-  const [password, setPassword] = React54.useState("");
-  const [confirmPassword, setConfirmPassword] = React54.useState("");
-  const [loading, setLoading] = React54.useState(false);
-  const [toasts, setToasts] = React54.useState([]);
-  const [isFirstUser, setIsFirstUser] = React54.useState(false);
-  React54.useEffect(() => {
+  const [mode, setMode] = React56.useState("login");
+  const [email, setEmail] = React56.useState("");
+  const [password, setPassword] = React56.useState("");
+  const [confirmPassword, setConfirmPassword] = React56.useState("");
+  const [loading, setLoading] = React56.useState(false);
+  const [toasts, setToasts] = React56.useState([]);
+  const [isFirstUser, setIsFirstUser] = React56.useState(false);
+  React56.useEffect(() => {
     checkIfFirstUser();
   }, []);
   const checkIfFirstUser = async () => {
@@ -12186,14 +11681,14 @@ function LoginPage({ onAuth, theme = "light" }) {
 }
 function Dashboard({ collections: collections2, onNavigate, user }) {
   const { permissions } = useAuthStore();
-  const [stats, setStats] = React54.useState({
+  const [stats, setStats] = React56.useState({
     totalDocs: 0,
     totalMedia: 0,
     totalUsers: 0,
     recentActivity: []
   });
-  const [loading, setLoading] = React54.useState(true);
-  React54.useEffect(() => {
+  const [loading, setLoading] = React56.useState(true);
+  React56.useEffect(() => {
     const timer = setTimeout(() => {
       setStats({
         totalDocs: 124,
@@ -12514,15 +12009,15 @@ function Dashboard({ collections: collections2, onNavigate, user }) {
   ] });
 }
 function UserManagement() {
-  const [users, setUsers] = React54.useState([]);
-  const [loading, setLoading] = React54.useState(true);
-  const [searchQuery, setSearchQuery] = React54.useState("");
-  const [showCreateModal, setShowCreateModal] = React54.useState(false);
-  const [createForm, setCreateForm] = React54.useState({ name: "", email: "", password: "", role: "customer" });
-  const [createError, setCreateError] = React54.useState("");
-  const [creating, setCreating] = React54.useState(false);
+  const [users, setUsers] = React56.useState([]);
+  const [loading, setLoading] = React56.useState(true);
+  const [searchQuery, setSearchQuery] = React56.useState("");
+  const [showCreateModal, setShowCreateModal] = React56.useState(false);
+  const [createForm, setCreateForm] = React56.useState({ name: "", email: "", password: "", role: "customer" });
+  const [createError, setCreateError] = React56.useState("");
+  const [creating, setCreating] = React56.useState(false);
   const { confirm, alert } = useUIStore();
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     loadUsers();
   }, []);
   const loadUsers = async () => {
@@ -12787,8 +12282,8 @@ function UserManagement() {
   ] });
 }
 function AvatarCell({ user }) {
-  const [url, setUrl] = React54.useState(null);
-  React54.useEffect(() => {
+  const [url, setUrl] = React56.useState(null);
+  React56.useEffect(() => {
     const avatar = user.avatar;
     if (typeof avatar === "string" && /^[0-9a-f-]+$/i.test(avatar)) {
       apiGet(`/api/media/${avatar}`).then((media) => setUrl(media?.thumbnailUrl || media?.url || null)).catch(() => setUrl(null));
@@ -12800,15 +12295,15 @@ function AvatarCell({ user }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 h-8 rounded-lg bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] flex items-center justify-center text-xs font-bold text-[var(--kyro-primary)] flex-shrink-0", children: user.name ? user.name[0] : user.email[0].toUpperCase() });
 }
 function BrandingHub() {
-  const [siteName, setSiteName] = React54.useState("Kyro CMS");
-  const [adminTitle, setAdminTitle] = React54.useState("Command Center");
-  const [primaryColor, setPrimaryColor] = React54.useState("#6366f1");
-  const [dashboardGreeting, setDashboardGreeting] = React54.useState(
+  const [siteName, setSiteName] = React56.useState("Kyro CMS");
+  const [adminTitle, setAdminTitle] = React56.useState("Command Center");
+  const [primaryColor, setPrimaryColor] = React56.useState("#6366f1");
+  const [dashboardGreeting, setDashboardGreeting] = React56.useState(
     "Welcome back to your Command Center."
   );
-  const [saving, setSaving] = React54.useState(false);
-  const [saved, setSaved] = React54.useState(false);
-  React54.useEffect(() => {
+  const [saving, setSaving] = React56.useState(false);
+  const [saved, setSaved] = React56.useState(false);
+  React56.useEffect(() => {
     const fetchBranding = async () => {
       try {
         const result = await apiGet("/api/globals/site-settings");
@@ -13004,15 +12499,15 @@ function BrandingHub() {
 }
 var API_BASE2 = typeof __KYRO_API_PATH__ !== "undefined" ? __KYRO_API_PATH__ : "/api";
 function DeveloperCenter({ collections: collections2 }) {
-  const [keys, setKeys] = React54.useState([]);
-  const [loading, setLoading] = React54.useState(false);
-  const [showKey, setShowKey] = React54.useState(null);
-  const [testEndpoint, setTestEndpoint] = React54.useState("");
-  const [playgroundResult, setPlaygroundResult] = React54.useState(null);
-  const [exploring, setExploring] = React54.useState(false);
+  const [keys, setKeys] = React56.useState([]);
+  const [loading, setLoading] = React56.useState(false);
+  const [showKey, setShowKey] = React56.useState(null);
+  const [testEndpoint, setTestEndpoint] = React56.useState("");
+  const [playgroundResult, setPlaygroundResult] = React56.useState(null);
+  const [exploring, setExploring] = React56.useState(false);
   const { confirm, alert } = useUIStore();
-  const [showCreateModal, setShowCreateModal] = React54.useState(false);
-  const [newKeyName, setNewKeyName] = React54.useState("");
+  const [showCreateModal, setShowCreateModal] = React56.useState(false);
+  const [newKeyName, setNewKeyName] = React56.useState("");
   const loadKeys = async () => {
     try {
       const data = await apiGet("/api/keys");
@@ -13021,7 +12516,7 @@ function DeveloperCenter({ collections: collections2 }) {
       console.error(e);
     }
   };
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     loadKeys();
   }, []);
   const handleGenerateKey = async () => {
@@ -13339,12 +12834,12 @@ function DeveloperCenter({ collections: collections2 }) {
   ] });
 }
 function useResourceManager(options) {
-  const [items, setItems] = React54.useState([]);
-  const [loading, setLoading] = React54.useState(false);
-  const [error, setError] = React54.useState(null);
-  const [isCreateModalOpen, setIsCreateModalOpen] = React54.useState(false);
+  const [items, setItems] = React56.useState([]);
+  const [loading, setLoading] = React56.useState(false);
+  const [error, setError] = React56.useState(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = React56.useState(false);
   const { confirm } = useUIStore();
-  const load = React54.useCallback(async () => {
+  const load = React56.useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -13361,10 +12856,10 @@ function useResourceManager(options) {
       setLoading(false);
     }
   }, [options.endpoint, options.transformLoad]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     load();
   }, [load]);
-  const remove = React54.useCallback((id, resourceName = "item") => {
+  const remove = React56.useCallback((id, resourceName = "item") => {
     confirm({
       title: `Delete ${resourceName}`,
       message: `Are you sure you want to delete this ${resourceName.toLowerCase()}? This action cannot be undone.`,
@@ -13382,7 +12877,7 @@ function useResourceManager(options) {
       }
     });
   }, [options.endpoint, confirm]);
-  const create3 = React54.useCallback(async (data) => {
+  const create3 = React56.useCallback(async (data) => {
     setError(null);
     try {
       const created = await apiPost(options.endpoint, data);
@@ -13397,7 +12892,7 @@ function useResourceManager(options) {
       throw e;
     }
   }, [options.endpoint]);
-  const update = React54.useCallback(async (id, data) => {
+  const update = React56.useCallback(async (id, data) => {
     setError(null);
     try {
       const updated = await apiPatch(`${options.endpoint}/${id}`, data);
@@ -13437,17 +12932,17 @@ function WebhookManager() {
     endpoint: "/api/webhooks"
   });
   const { confirm } = useUIStore();
-  const [showTestModal, setShowTestModal] = React54.useState(false);
-  const [showHelpModal, setShowHelpModal] = React54.useState(false);
-  const [testResult, setTestResult] = React54.useState(null);
-  const [testId, setTestId] = React54.useState(null);
-  const [formData, setFormData] = React54.useState({
+  const [showTestModal, setShowTestModal] = React56.useState(false);
+  const [showHelpModal, setShowHelpModal] = React56.useState(false);
+  const [testResult, setTestResult] = React56.useState(null);
+  const [testId, setTestId] = React56.useState(null);
+  const [formData, setFormData] = React56.useState({
     name: "",
     url: "",
     events: [],
     secret: ""
   });
-  const [createError, setCreateError] = React54.useState("");
+  const [createError, setCreateError] = React56.useState("");
   const handleCreate = async () => {
     if (!formData.name.trim() || !formData.url.trim()) {
       setCreateError("Name and URL are required");
@@ -13899,13 +13394,13 @@ function CommandPalette({
   onNavigate
 }) {
   const { user, permissions } = useAuthStore();
-  const [query, setQuery] = React54.useState("");
-  const [selectedIndex, setSelectedIndex] = React54.useState(0);
-  const [loading, setLoading] = React54.useState(false);
-  const [searchResults, setSearchResults] = React54.useState([]);
-  const inputRef = React54.useRef(null);
-  const debounceRef = React54.useRef(null);
-  React54.useEffect(() => {
+  const [query, setQuery] = React56.useState("");
+  const [selectedIndex, setSelectedIndex] = React56.useState(0);
+  const [loading, setLoading] = React56.useState(false);
+  const [searchResults, setSearchResults] = React56.useState([]);
+  const inputRef = React56.useRef(null);
+  const debounceRef = React56.useRef(null);
+  React56.useEffect(() => {
     if (isOpen) {
       setQuery("");
       setSelectedIndex(0);
@@ -13914,7 +13409,7 @@ function CommandPalette({
       setTimeout(() => inputRef.current?.focus(), 100);
     }
   }, [isOpen]);
-  const performSearch = React54.useCallback(async (searchQuery) => {
+  const performSearch = React56.useCallback(async (searchQuery) => {
     if (!searchQuery || searchQuery.length < 2) {
       setSearchResults([]);
       return;
@@ -13935,7 +13430,7 @@ function CommandPalette({
       setLoading(false);
     }
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
     }
@@ -14182,7 +13677,7 @@ function CommandPalette({
 }
 function GlobalModal() {
   const { modal, closeModal } = useUIStore();
-  const [loading, setLoading] = React54.useState(false);
+  const [loading, setLoading] = React56.useState(false);
   if (!modal.open || !modal.config) return null;
   const { config } = modal;
   const handleConfirm = async () => {
@@ -14222,24 +13717,24 @@ function GlobalModal() {
   );
 }
 function Admin({ config, theme = "light", onThemeChange }) {
-  const [authenticated, setAuthenticated] = React54.useState(false);
-  const [currentUser, setCurrentUser] = React54.useState(null);
-  const collections2 = React54.useMemo(
+  const [authenticated, setAuthenticated] = React56.useState(false);
+  const [currentUser, setCurrentUser] = React56.useState(null);
+  const collections2 = React56.useMemo(
     () => toCollectionMap(toArray(config.collections)),
     [config.collections]
   );
-  const globals2 = React54.useMemo(
+  const globals2 = React56.useMemo(
     () => toGlobalMap(toArray(config.globals)),
     [config.globals]
   );
-  const [activeCollection, setActiveCollection] = React54.useState(null);
-  const [activeGlobal, setActiveGlobal] = React54.useState(null);
-  const [currentView, setCurrentView] = React54.useState("list");
-  const [activeDocumentId, setActiveDocumentId] = React54.useState(null);
-  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = React54.useState(false);
+  const [activeCollection, setActiveCollection] = React56.useState(null);
+  const [activeGlobal, setActiveGlobal] = React56.useState(null);
+  const [currentView, setCurrentView] = React56.useState("list");
+  const [activeDocumentId, setActiveDocumentId] = React56.useState(null);
+  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = React56.useState(false);
   const toasts = useToastStore((state) => state.toasts);
   const removeToast = useToastStore((state) => state.removeToast);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const checkAuth = async () => {
       try {
         const response = await fetch("/api/users/me");
@@ -14254,7 +13749,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
     };
     checkAuth();
   }, []);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     if (authenticated && !activeCollection) {
       const firstCol = Object.keys(collections2)[0];
       if (firstCol) setActiveCollection(firstCol);
@@ -14266,7 +13761,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
     if (id) setActiveDocumentId(id);
     setIsCommandPaletteOpen(false);
   };
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -14345,7 +13840,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
         );
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { ...{ mode: theme, onChange: onThemeChange }, children: /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kyro-admin min-h-screen bg-[var(--kyro-bg)] text-[var(--kyro-text-primary)]", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { ...{ mode: theme, onChange: onThemeChange }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kyro-admin min-h-screen bg-[var(--kyro-bg)] text-[var(--kyro-text-primary)]", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         CommandPalette,
@@ -14369,7 +13864,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
       },
       t.id
     )) })
-  ] }) }) });
+  ] }) });
 }
 function BulkActionsBar({
   selectedCount,
@@ -14600,32 +14095,6 @@ function Header({ title, onMenuClick, actions }) {
     ] })
   ] });
 }
-function Button({
-  variant = "secondary",
-  size = "md",
-  loading = false,
-  children,
-  className = "",
-  disabled,
-  ...props
-}) {
-  const baseClass = "kyro-btn";
-  const variantClass = `kyro-btn-${variant}`;
-  const sizeClass = `kyro-btn-${size}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      className: `${baseClass} ${variantClass} ${sizeClass} ${className}`,
-      disabled: disabled || loading,
-      ...props,
-      children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "kyro-btn-loading", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "kyro-btn-spinner", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "3", fill: "none", strokeDasharray: "60 30" }) }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: loading ? "kyro-btn-text-hidden" : "", children })
-      ]
-    }
-  );
-}
 
 // src/hooks/lifecycle.ts
 var registry = {
@@ -14692,10 +14161,10 @@ function getApiUrl(path2) {
   return `${base}${path2}`;
 }
 function useKyroQuery(slug, options = {}) {
-  const [data, setData] = React54.useState(null);
-  const [loading, setLoading] = React54.useState(true);
-  const [error, setError] = React54.useState(null);
-  const fetchData = React54.useCallback(async () => {
+  const [data, setData] = React56.useState(null);
+  const [loading, setLoading] = React56.useState(true);
+  const [error, setError] = React56.useState(null);
+  const fetchData = React56.useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -14717,15 +14186,15 @@ function useKyroQuery(slug, options = {}) {
       setLoading(false);
     }
   }, [slug, options.page, options.limit, options.sort, options.order]);
-  React54.useEffect(() => {
+  React56.useEffect(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 function useKyroMutation(slug, method = "POST") {
-  const [loading, setLoading] = React54.useState(false);
-  const [error, setError] = React54.useState(null);
-  const mutate = React54.useCallback(
+  const [loading, setLoading] = React56.useState(false);
+  const [error, setError] = React56.useState(null);
+  const mutate = React56.useCallback(
     async (data) => {
       setLoading(true);
       setError(null);