@kyro-cms/admin 0.9.4 → 0.9.6

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React56 = require('react');
+var React = require('react');
 var zustand = require('zustand');
 var middleware = require('zustand/middleware');
 var lucideReact = require('lucide-react');
@@ -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 React56__default = /*#__PURE__*/_interopDefault(React56);
+var React__default = /*#__PURE__*/_interopDefault(React);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var Link4__default = /*#__PURE__*/_interopDefault(Link4);
 var Image3__default = /*#__PURE__*/_interopDefault(Image3);
@@ -458,6 +458,84 @@ function Shimmer({ variant, count = 1, className = "" }) {
     i
   )) });
 }
+function BackButton({ back }) {
+  if (back.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: back.href,
+        onClick: (e) => {
+          if (back.onClick) {
+            e.preventDefault();
+            back.onClick();
+          }
+        },
+        className: "p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
+        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" }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: back.onClick,
+      className: "p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
+      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" }) })
+    }
+  );
+}
+function DesktopBreadcrumbs({ breadcrumbs }) {
+  return breadcrumbs?.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-20 text-[10px]", children: "/" }),
+    crumb.href || crumb.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: crumb.href,
+        onClick: (e) => {
+          if (crumb.onClick) {
+            e.preventDefault();
+            crumb.onClick();
+          }
+        },
+        className: "text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] transition-all",
+        children: crumb.label
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tracking-widest opacity-40", children: crumb.label })
+  ] }, i));
+}
+function ActionsSlot({ actions }) {
+  if (Array.isArray(actions)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: actions.map((act, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: act.onClick,
+        className: `flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${act.variant === "outline" ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]" : act.variant === "ghost" ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none" : "kyro-btn-primary hover:opacity-90"} ${act.className || ""}`,
+        children: [
+          act.icon && /* @__PURE__ */ jsxRuntime.jsx(act.icon, { className: "w-4 h-4" }),
+          act.label
+        ]
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: actions });
+}
+function SingleAction({ action }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: action.onClick,
+      className: `kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 w-full lg:w-auto justify-center ${action.className || ""}`,
+      children: [
+        action.icon && /* @__PURE__ */ jsxRuntime.jsx(action.icon, { className: "w-4 h-4" }),
+        action.label
+      ]
+    }
+  );
+}
 function PageHeader({
   title,
   description,
@@ -469,80 +547,79 @@ function PageHeader({
   actions,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center surface-tile justify-between gap-6 pt-4 mb-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-      (breadcrumbs || back) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-        back && /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: back.href,
-            onClick: (e) => {
-              if (back.onClick) {
-                e.preventDefault();
-                back.onClick();
-              }
-            },
-            className: "p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
-            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(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",
-            {
-              href: crumb.href,
-              onClick: (e) => {
-                if (crumb.onClick) {
-                  e.preventDefault();
-                  crumb.onClick();
+  const lastBreadcrumb = breadcrumbs?.[breadcrumbs.length - 1];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile px-3 md:px-6 py-3 md:pt-4 mb-4 md:mb-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden space-y-2", children: [
+      (breadcrumbs || back) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        back && /* @__PURE__ */ jsxRuntime.jsx(BackButton, { back }),
+        /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "group [&::-webkit-details-marker]:hidden flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "flex items-center gap-2 cursor-pointer list-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] truncate", children: lastBreadcrumb?.label || "" }),
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 text-[var(--kyro-text-secondary)] opacity-40 group-open:rotate-180 transition-transform", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--kyro-border)] space-y-2", children: [
+            breadcrumbs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-20 text-[10px]", children: "/" }),
+              crumb.href || crumb.onClick ? /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: crumb.href,
+                  onClick: (e) => {
+                    if (crumb.onClick) {
+                      e.preventDefault();
+                      crumb.onClick();
+                    }
+                  },
+                  className: "text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] transition-all",
+                  children: crumb.label
                 }
-              },
-              className: "text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] transition-all",
-              children: crumb.label
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold  tracking-widest opacity-40", children: crumb.label })
-        ] }, i))
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tracking-widest opacity-40", children: crumb.label })
+            ] }, i)) }),
+            metadata && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 flex-wrap", children: metadata.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: item }, i)) }),
+            children
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-6 h-6 text-[var(--kyro-primary)]" }),
-        title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate", children: title })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-5 h-5 text-[var(--kyro-primary)] shrink-0" }),
+        title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate", children: title }),
+        metadata && !description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2 w-2 rounded-full bg-[var(--kyro-primary)] shrink-0" })
       ] }),
-      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(React56__default.default.Fragment, { children: [
+      description && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1 min-w-0 text-xs", children: description }),
+        metadata && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: metadata.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
           i === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-20 ml-1", children: "\xB7" }),
           item
-        ] }, i)) }),
-        children
+        ] }, i)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-      actions && (Array.isArray(actions) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: actions.map((act, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: act.onClick,
-          className: `flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${act.variant === "outline" ? "border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]" : act.variant === "ghost" ? "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] shadow-none" : "kyro-btn-primary hover:opacity-90"} ${act.className || ""}`,
-          children: [
-            act.icon && /* @__PURE__ */ jsxRuntime.jsx(act.icon, { className: "w-4 h-4" }),
-            act.label
-          ]
-        },
-        i
-      )) }) : actions),
-      action && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: action.onClick,
-          className: `kyro-btn kyro-btn-primary flex items-center gap-2 px-6 py-2.5 rounded-xl font-bold text-sm hover:opacity-90 transition-all shadow-lg shadow-[var(--kyro-primary)]/10 ${action.className || ""}`,
-          children: [
-            action.icon && /* @__PURE__ */ jsxRuntime.jsx(action.icon, { className: "w-4 h-4" }),
-            action.label
-          ]
-        }
-      )
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex md:flex-row md:items-center justify-between gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+        (breadcrumbs || back) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+          back && /* @__PURE__ */ jsxRuntime.jsx(BackButton, { back }),
+          breadcrumbs && /* @__PURE__ */ jsxRuntime.jsx(DesktopBreadcrumbs, { breadcrumbs })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-6 h-6 text-[var(--kyro-primary)]" }),
+          title && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate", children: title })
+        ] }),
+        (description || metadata) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 mt-1", children: [
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1 min-w-0", children: description }),
+          metadata && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: metadata.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
+            i === 0 && (description || i > 0) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-20 ml-1", children: "\xB7" }),
+            item
+          ] }, i)) }),
+          children
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap shrink-0", children: [
+        actions && /* @__PURE__ */ jsxRuntime.jsx(ActionsSlot, { actions }),
+        action && /* @__PURE__ */ jsxRuntime.jsx(SingleAction, { action })
+      ] })
+    ] }),
+    (actions || action) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden flex items-center gap-2 mt-3 pt-3 border-t border-[var(--kyro-border)]", children: [
+      action && /* @__PURE__ */ jsxRuntime.jsx(SingleAction, { action }),
+      actions && /* @__PURE__ */ jsxRuntime.jsx(ActionsSlot, { actions })
     ] })
   ] });
 }
@@ -604,7 +681,7 @@ function Button({
 }
 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: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-3 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,
@@ -613,7 +690,7 @@ function Pagination({ page, totalPages, totalDocs, limit, onPageChange, onLimitC
       " of ",
       totalDocs
     ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap justify-center", children: [
       onLimitChange && /* @__PURE__ */ jsxRuntime.jsxs(
         "select",
         {
@@ -730,14 +807,14 @@ function ListView({
       window.location.href = `${adminPath}/${collectionSlug}/${id}`;
     }
   };
-  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 [docs, setDocs] = React.useState(initialDocs);
+  const [totalDocs, setTotalDocs] = React.useState(initialTotal);
+  const [loading, setLoading] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [limit, setLimit] = React.useState(10);
+  const [selectedIds, setSelectedIds] = React.useState(/* @__PURE__ */ new Set());
+  const [search, setSearch] = React.useState("");
+  const [filters, setFilters] = React.useState([]);
   const { confirm, alert } = useUIStore();
   const addFilter = () => {
     setFilters([...filters, { field: "", operator: "equals", value: "" }]);
@@ -753,9 +830,9 @@ function ListView({
   const updateFilter = (index, updates) => {
     setFilters(filters.map((f, i) => i === index ? { ...f, ...updates } : f));
   };
-  const [sort, setSort] = React56.useState(null);
-  const [showFilters, setShowFilters] = React56.useState(false);
-  const [showColumns, setShowColumns] = React56.useState(false);
+  const [sort, setSort] = React.useState(null);
+  const [showFilters, setShowFilters] = React.useState(false);
+  const [showColumns, setShowColumns] = React.useState(false);
   function flattenFields(fields2) {
     const result = [];
     for (const field3 of fields2 || []) {
@@ -774,12 +851,12 @@ function ListView({
     }
     return result;
   }
-  const allFields = React56.useMemo(
+  const allFields = React.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] = React56.useState(() => {
+  const [visibleColumns, setVisibleColumns] = React.useState(() => {
     let cols;
     if (collection.admin?.defaultColumns) {
       cols = [...collection.admin?.defaultColumns || []];
@@ -794,7 +871,7 @@ function ListView({
     }
     return new Set(cols);
   });
-  const toggleColumn = React56.useCallback((fieldName) => {
+  const toggleColumn = React.useCallback((fieldName) => {
     setVisibleColumns((prev) => {
       const next = new Set(prev);
       if (next.has(fieldName)) {
@@ -813,7 +890,7 @@ function ListView({
     }
     return fieldName;
   }
-  const handleSort = React56.useCallback((fieldName) => {
+  const handleSort = React.useCallback((fieldName) => {
     const resolvedField = resolveSortField(fieldName);
     setSort((prev) => {
       if (prev && prev.field === resolvedField) {
@@ -825,7 +902,7 @@ function ListView({
       return { field: resolvedField, direction: "asc" };
     });
   }, []);
-  const displayFields = React56.useMemo(
+  const displayFields = React.useMemo(
     () => {
       const fields2 = allFields.filter((f) => !!f.name && visibleColumns.has(f.name));
       if (visibleColumns.has("status")) {
@@ -855,7 +932,7 @@ function ListView({
     const val = resolveFieldValue(collection.fields, doc, field3.name);
     return val ?? null;
   }
-  const fetchDocs = React56.useCallback(async () => {
+  const fetchDocs = React.useCallback(async () => {
     setLoading(true);
     try {
       const params = new URLSearchParams({
@@ -880,13 +957,13 @@ function ListView({
       setLoading(false);
     }
   }, [collectionSlug, page, limit, search, sort, filters]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (docs.length === 0 && initialTotal === 0) {
       fetchDocs();
     }
   }, []);
-  const isFirstRender = React56.useRef(true);
-  React56.useEffect(() => {
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -968,8 +1045,8 @@ 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(lucideReact.Search, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 w-full lg:max-w-md", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1161,7 +1238,7 @@ function ListView({
         }
       )
     ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-left", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)] whitespace-nowrap", children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-4 py-4 w-10", children: /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -1349,26 +1426,26 @@ function UploadField({
   onChange,
   disabled
 }) {
-  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 inputRef = React.useRef(null);
+  const urlInputRef = React.useRef(null);
+  const [uploading, setUploading] = React.useState(false);
+  const [showPicker, setShowPicker] = React.useState(false);
+  const [isPickerFullscreen, setIsPickerFullscreen] = React.useState(false);
+  const [mediaItems, setMediaItems] = React.useState([]);
+  const [folders, setFolders] = React.useState([]);
+  const [selectedFolder, setSelectedFolder] = React.useState("");
+  const [mediaLoading, setMediaLoading] = React.useState(false);
+  const [pickerSearch, setPickerSearch] = React.useState("");
+  const [showUrlInput, setShowUrlInput] = React.useState(false);
+  const [urlValue, setUrlValue] = React.useState("");
+  const [urlError, setUrlError] = React.useState("");
+  const [selectedItems, setSelectedItems] = React.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;
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const fetchMissingDetails = async () => {
       const idsToFetch = currentValue.filter((item) => typeof item === "string").map((id) => id);
       const objectIdsToFetch = currentValue.filter(
@@ -1402,7 +1479,7 @@ function UploadField({
     };
     fetchMissingDetails();
   }, [value]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (showPicker) {
       loadFolders();
       loadMedia();
@@ -1528,7 +1605,7 @@ function UploadField({
     newValue.splice(index, 1);
     onChange(isMultiple ? newValue : newValue[0] || null);
   };
-  const filteredMedia = React56.useMemo(() => {
+  const filteredMedia = React.useMemo(() => {
     return mediaItems.filter((item) => {
       return !pickerSearch || item.filename?.toLowerCase().includes(pickerSearch.toLowerCase()) || item.title?.toLowerCase().includes(pickerSearch.toLowerCase());
     });
@@ -1935,12 +2012,12 @@ function SlidePanel({
   showOverlay = false,
   accentClass
 }) {
-  const panelRef = React56.useRef(null);
-  const [hydrated, setHydrated] = React56.useState(false);
-  React56.useEffect(() => {
+  const panelRef = React.useRef(null);
+  const [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
     setHydrated(true);
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -1954,10 +2031,10 @@ function SlidePanel({
     };
   }, [open, onClose]);
   const widthClasses = {
-    sm: "w-[320px]",
-    md: "w-[400px]",
-    lg: "w-[550px]",
-    xl: "w-[700px]"
+    sm: "w-full sm:w-[320px]",
+    md: "w-full sm:w-[400px]",
+    lg: "w-full sm:w-[550px]",
+    xl: "w-full sm:w-[700px]"
   };
   if (!open || !hydrated) return null;
   return reactDom.createPortal(
@@ -2021,7 +2098,7 @@ function Modal({
   size = "md",
   variant = "default"
 }) {
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -2129,7 +2206,7 @@ function PromptModal({
   placeholder = "",
   defaultValue = ""
 }) {
-  const [value, setValue] = React56.useState(defaultValue);
+  const [value, setValue] = React.useState(defaultValue);
   const handleSubmit = (e) => {
     e.preventDefault();
     if (value.trim()) {
@@ -2242,35 +2319,36 @@ function MediaGallery({
   const canUpload = permissions?.media?.create !== false;
   const canDelete = permissions?.media?.delete !== false;
   const canUpdate = permissions?.media?.update !== false;
-  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 [items, setItems] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [folders, setFolders] = React.useState([]);
+  const [currentFolder, setCurrentFolder] = React.useState("");
+  const [search, setSearch] = React.useState("");
+  const [filter, setFilter] = React.useState("all");
+  const [view, setView] = React.useState("grid");
+  const [panelItem, setPanelItem] = React.useState(null);
+  const [showPreview, setShowPreview] = React.useState(false);
+  const [showCrop, setShowCrop] = React.useState(false);
+  const [uploading, setUploading] = React.useState(false);
+  const [uploadProgress, setUploadProgress] = React.useState(
     {}
   );
-  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 [showNewFolderModal, setShowNewFolderModal] = React.useState(false);
+  const [showMobileFilters, setShowMobileFilters] = React.useState(false);
+  const [storageConfigured, setStorageConfigured] = React.useState(null);
+  const [storageChecked, setStorageChecked] = React.useState(false);
+  const [showStorageConfigModal, setShowStorageConfigModal] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [total, setTotal] = React.useState(0);
+  const [totalPages, setTotalPages] = React.useState(1);
   const limit = 40;
-  const [selectedIds, setSelectedIds] = React56.useState(/* @__PURE__ */ new Set());
+  const [selectedIds, setSelectedIds] = React.useState(/* @__PURE__ */ new Set());
   const { confirm, alert } = useUIStore();
-  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 () => {
+  const [isDragging, setIsDragging] = React.useState(false);
+  const fileInputRef = React.useRef(null);
+  const [crop, setCrop] = React.useState();
+  const imgRef = React.useRef(null);
+  const loadMedia = React.useCallback(async () => {
     setLoading(true);
     try {
       const params = new URLSearchParams({
@@ -2293,7 +2371,7 @@ function MediaGallery({
       setLoading(false);
     }
   }, [page, currentFolder, search, filter]);
-  const loadFolders = React56.useCallback(async () => {
+  const loadFolders = React.useCallback(async () => {
     try {
       const result = await apiGet(withCacheBust("/api/media/folders"));
       setFolders(Array.isArray(result) ? result : result.folders || []);
@@ -2301,7 +2379,7 @@ function MediaGallery({
       console.error("Failed to load folders:", error);
     }
   }, []);
-  const checkStorage = React56.useCallback(async () => {
+  const checkStorage = React.useCallback(async () => {
     try {
       const res = await apiGet("/api/globals/storage-settings");
       const isConfigured = !!res?.data?.provider;
@@ -2310,23 +2388,23 @@ function MediaGallery({
       setStorageConfigured(false);
     }
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!pickerMode) checkStorage();
   }, [checkStorage, pickerMode]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (pickerMode) return;
     if (storageConfigured === false && !storageChecked) {
       setStorageChecked(true);
       setShowStorageConfigModal(true);
     }
   }, [pickerMode, storageConfigured, storageChecked]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     loadMedia();
   }, [loadMedia]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     loadFolders();
   }, [loadFolders]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (pickerMode) return;
     const handlePaste = (e) => {
       const files = e.clipboardData?.files;
@@ -2410,6 +2488,7 @@ function MediaGallery({
       await apiPost("/api/media/folders", { name });
       loadFolders();
       setShowNewFolderModal(false);
+      toast.success(`Folder "${name}" created`);
     } catch (error) {
       console.error("Failed to create folder:", error);
       toast.error("Failed to create folder");
@@ -2427,6 +2506,7 @@ function MediaGallery({
           if (currentFolder === folder) setCurrentFolder("");
           loadFolders();
           loadMedia();
+          toast.success(`Folder "${folder}" deleted`);
         } catch (error) {
           console.error("Failed to delete folder:", error);
           toast.error("Failed to delete folder");
@@ -2441,8 +2521,10 @@ function MediaGallery({
       if (panelItem?.id === id) {
         setPanelItem(result.doc);
       }
+      toast.success("Metadata updated");
     } catch (error) {
       console.error("Failed to update metadata:", error);
+      toast.error("Failed to update metadata");
     }
   };
   const onImageLoad = (e) => {
@@ -2491,6 +2573,7 @@ function MediaGallery({
           await apiUpload("/api/media", formData);
           loadMedia();
           setShowCrop(false);
+          toast.success("Cropped image saved");
         }
       }
     } catch (err) {
@@ -2500,7 +2583,7 @@ function MediaGallery({
       setUploading(false);
     }
   };
-  const stats = React56.useMemo(() => {
+  const stats = React.useMemo(() => {
     return items.reduce(
       (acc, item) => {
         acc.totalSize += item.fileSize || 0;
@@ -2526,7 +2609,7 @@ function MediaGallery({
         }
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 z-40 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`, children: [
           !pickerMode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]", children: "Media Library" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 mt-1", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] opacity-50", children: [
@@ -2537,7 +2620,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(lucideReact.Search, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "input",
                 {
@@ -2550,21 +2633,31 @@ function MediaGallery({
               )
             ] }),
             !pickerMode && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    onClick: () => setView("grid"),
-                    className: `p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3X3, { className: "w-4 h-4" })
-                  }
-                ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setView("grid"),
+                      className: `p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3X3, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => setView("list"),
+                      className: `p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
-                    onClick: () => setView("list"),
-                    className: `p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { className: "w-4 h-4" })
+                    onClick: () => setShowMobileFilters(true),
+                    className: "md:hidden p-2 rounded-xl bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "w-4 h-4" })
                   }
                 )
               ] }),
@@ -2663,7 +2756,7 @@ function MediaGallery({
             ] })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-h-0 bg-[var(--kyro-bg)]", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto custom-scrollbar ${pickerMode ? "px-2 py-4" : "py-8 px-4"}`, children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: /* @__PURE__ */ jsxRuntime.jsx(Shimmer, { variant: "media-card", count: 12 }) }) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-32 text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto custom-scrollbar ${pickerMode ? "px-2 py-4" : "py-4 px-2 md:py-8 md:px-4"}`, children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: /* @__PURE__ */ jsxRuntime.jsx(Shimmer, { variant: "media-card", count: 12 }) }) : items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-32 text-center", children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 h-24 rounded-[2rem] bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-8 rotate-12 group-hover:rotate-0 transition-transform duration-500", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Grid3X3, { className: "w-10 h-10 text-[var(--kyro-text-muted)] opacity-30" }) }),
               /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-bold text-[var(--kyro-text-primary)] tracking-tight", children: "No assets found" }),
               /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[var(--kyro-text-secondary)] mt-2 max-w-xs mx-auto text-sm font-medium leading-relaxed", children: "Upload your first file or create a folder to organize your media assets." }),
@@ -2863,6 +2956,105 @@ function MediaGallery({
             )
           ] })
         ] }),
+        showMobileFilters && !pickerMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-[70] md:hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "fixed inset-0 bg-black/50 backdrop-blur-sm",
+              onClick: () => setShowMobileFilters(false)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed bottom-0 left-0 right-0 bg-[var(--kyro-surface)] rounded-t-3xl shadow-2xl max-h-[70vh] overflow-y-auto animate-in slide-in-from-bottom-12 duration-300", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky top-0 bg-[var(--kyro-surface)] z-10 flex items-center justify-between p-6 pb-4 border-b border-[var(--kyro-border)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]", children: "Filters" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => setShowMobileFilters(false),
+                  className: "p-2 rounded-xl hover:bg-[var(--kyro-surface-accent)] transition-colors text-[var(--kyro-text-muted)]",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 space-y-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40 block mb-4", children: "Quick Filters" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "image", "video", "audio", "document", "archive"].map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      setFilter(t);
+                      setShowMobileFilters(false);
+                    },
+                    className: `px-4 py-2 rounded-xl text-[11px] font-bold capitalize transition-all border ${filter === t ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] border-transparent" : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] border-[var(--kyro-border)] hover:border-[var(--kyro-text-muted)]"}`,
+                    children: t
+                  },
+                  t
+                )) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40", children: "Folders" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => {
+                        setShowNewFolderModal(true);
+                        setShowMobileFilters(false);
+                      },
+                      className: "p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors text-[var(--kyro-text-primary)]",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderPlus, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      onClick: () => {
+                        setCurrentFolder("");
+                        setShowMobileFilters(false);
+                      },
+                      className: `w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === "" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`,
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderInput, { className: "w-4 h-4 opacity-70" }),
+                        "All Assets"
+                      ]
+                    }
+                  ),
+                  folders.map((folder) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "button",
+                      {
+                        onClick: () => {
+                          setCurrentFolder(folder);
+                          setShowMobileFilters(false);
+                        },
+                        className: `w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === folder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`,
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 flex items-center justify-center opacity-70", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { fill: currentFolder === folder ? "currentColor" : "none" }) }),
+                          folder
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          handleDeleteFolder(folder);
+                          setShowMobileFilters(false);
+                        },
+                        className: "absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-red-500 opacity-0 group-hover:opacity-100 transition-all hover:bg-red-50 rounded-lg",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-3.5 h-3.5" })
+                      }
+                    )
+                  ] }, folder))
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           SlidePanel,
           {
@@ -3160,6 +3352,8 @@ function MediaGallery({
                         setShowStorageConfigModal(false);
                         setStorageConfigured(true);
                         window.location.reload();
+                      }).catch(() => {
+                        toast.error("Failed to configure storage");
                       });
                     },
                     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",
@@ -3205,9 +3399,9 @@ var MenuBar = ({
   setIsExpanded,
   onOpenMediaPicker
 }) => {
-  const [activeDropdown, setActiveDropdown] = React56.useState(null);
-  const menuBarRef = React56.useRef(null);
-  React56.useEffect(() => {
+  const [activeDropdown, setActiveDropdown] = React.useState(null);
+  const menuBarRef = React.useRef(null);
+  React.useEffect(() => {
     function handleClickOutside(event) {
       if (menuBarRef.current && !menuBarRef.current.contains(event.target)) {
         setActiveDropdown(null);
@@ -3667,14 +3861,14 @@ function RichTextField({
   error,
   disabled
 }) {
-  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(() => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [panelWidth, setPanelWidth] = React.useState(0);
+  const [isMediaPickerOpen, setIsMediaPickerOpen] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
     setIsMounted(true);
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!isExpanded) {
       setPanelWidth(0);
       return;
@@ -3740,7 +3934,7 @@ function RichTextField({
       }
     }
   });
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (editor && value && JSON.stringify(value) !== JSON.stringify(editor.getJSON())) {
       editor.commands.setContent(value);
     }
@@ -4009,9 +4203,9 @@ function mergeThemes(base, overrides) {
     fields: base.fields ? { ...base.fields, ...overrides.fields } : overrides.fields
   };
 }
-var ThemeContext = React56.createContext(null);
+var ThemeContext = React.createContext(null);
 function useTheme() {
-  const context = React56.useContext(ThemeContext);
+  const context = React.useContext(ThemeContext);
   if (!context) {
     return {
       mode: "light",
@@ -4122,16 +4316,16 @@ function ThemeProvider({
   light: lightOverrides,
   dark: darkOverrides
 }) {
-  const [mode, setMode] = React56.useState(defaultMode);
-  const [baseLight, setBaseLight] = React56.useState(
+  const [mode, setMode] = React.useState(defaultMode);
+  const [baseLight, setBaseLight] = React.useState(
     lightOverrides || {}
   );
-  const [baseDark, setBaseDark] = React56.useState(
+  const [baseDark, setBaseDark] = React.useState(
     darkOverrides || {}
   );
   const lightTheme = mergeThemes(LIGHT_THEME, baseLight);
   const darkTheme = mergeThemes(DARK_THEME, baseDark);
-  const getResolvedTheme = React56.useCallback(() => {
+  const getResolvedTheme = React.useCallback(() => {
     if (mode === "system") {
       if (typeof window !== "undefined") {
         return window.matchMedia("(prefers-color-scheme: dark)").matches ? darkTheme : lightTheme;
@@ -4140,13 +4334,13 @@ function ThemeProvider({
     }
     return mode === "dark" ? darkTheme : lightTheme;
   }, [mode, lightTheme, darkTheme]);
-  const [theme, setTheme] = React56.useState(getResolvedTheme());
-  React56.useEffect(() => {
+  const [theme, setTheme] = React.useState(getResolvedTheme());
+  React.useEffect(() => {
     const resolved = getResolvedTheme();
     setTheme(resolved);
     applyThemeToDOM(resolved);
   }, [getResolvedTheme]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (mode !== "system") return;
     const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = () => {
@@ -4157,11 +4351,11 @@ function ThemeProvider({
     mediaQuery.addEventListener("change", handler);
     return () => mediaQuery.removeEventListener("change", handler);
   }, [mode, getResolvedTheme]);
-  const updateTheme = React56.useCallback((overrides) => {
+  const updateTheme = React.useCallback((overrides) => {
     setBaseLight((prev) => ({ ...prev, ...overrides }));
     setBaseDark((prev) => ({ ...prev, ...overrides }));
   }, []);
-  const getCssVar = React56.useCallback((key) => `var(--kyro-${key})`, []);
+  const getCssVar = React.useCallback((key) => `var(--kyro-${key})`, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ThemeContext.Provider,
     {
@@ -4180,7 +4374,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 = React56.lazy(
+var CodeMirrorEditor = React.lazy(
   () => import('@uiw/react-codemirror').then((mod) => ({ default: mod.default }))
 );
 var LANGUAGES = [
@@ -4232,16 +4426,16 @@ var CodeField = ({
   error,
   disabled
 }) => {
-  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 [isMounted, setIsMounted] = React.useState(false);
+  const [isDark, setIsDark] = React.useState(false);
+  const [extensions, setExtensions] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [copied, setCopied] = React.useState(false);
+  const [isFullScreen, setIsFullScreen] = React.useState(false);
   const { theme } = useTheme();
   const accent = theme.colors?.accent || theme.colors?.primary || "#6366f1";
   const language = field3.language?.toLowerCase() || "javascript";
-  React56.useEffect(() => {
+  React.useEffect(() => {
     setIsMounted(true);
     setIsDark(document.documentElement.classList.contains("dark"));
     const observer = new MutationObserver(() => {
@@ -4253,7 +4447,7 @@ var CodeField = ({
     });
     return () => observer.disconnect();
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!isMounted) return;
     const loadExtensions = async () => {
       setLoading(true);
@@ -4270,16 +4464,16 @@ var CodeField = ({
     };
     loadExtensions();
   }, [language, isMounted]);
-  const handleChange = React56.useCallback(
+  const handleChange = React.useCallback(
     (val) => onChange?.(val),
     [onChange]
   );
-  const handleCopy = React56.useCallback(() => {
+  const handleCopy = React.useCallback(() => {
     navigator.clipboard.writeText(value);
     setCopied(true);
     setTimeout(() => setCopied(false), 1500);
   }, [value]);
-  const toggleFullScreen = React56.useCallback(() => {
+  const toggleFullScreen = React.useCallback(() => {
     setIsFullScreen((prev) => !prev);
     document.body.style.overflow = !isFullScreen ? "hidden" : "";
   }, [isFullScreen]);
@@ -4369,7 +4563,7 @@ var CodeField = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                React56.Suspense,
+                React.Suspense,
                 {
                   fallback: /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
@@ -4489,18 +4683,18 @@ var MarkdownField = ({
   error,
   disabled
 }) => {
-  const [showPreview, setShowPreview] = React56.useState(false);
-  const [isMounted, setIsMounted] = React56.useState(false);
-  React56.useEffect(() => {
+  const [showPreview, setShowPreview] = React.useState(false);
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const handleChange = React56.useCallback(
+  const handleChange = React.useCallback(
     (e) => {
       onChange?.(e.target.value);
     },
     [onChange]
   );
-  const wordCount = React56.useMemo(() => {
+  const wordCount = React.useMemo(() => {
     if (!value) return 0;
     return value.trim().split(/\s+/).filter(Boolean).length;
   }, [value]);
@@ -4605,8 +4799,8 @@ function SecretField({
   error,
   disabled
 }) {
-  const [copied, setCopied] = React56.useState(false);
-  const [regenerating, setRegenerating] = React56.useState(false);
+  const [copied, setCopied] = React.useState(false);
+  const [regenerating, setRegenerating] = React.useState(false);
   const fullValue = value ?? "";
   const displayValue = fullValue.length > 8 ? fullValue.slice(0, -8) + "*".repeat(8) : fullValue;
   const handleCopy = async () => {
@@ -5354,22 +5548,22 @@ function RelationshipField({
   error,
   disabled
 }) {
-  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(() => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [options, setOptions] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [selectedDocs, setSelectedDocs] = React.useState([]);
+  const fetchedIdsRef = React.useRef(/* @__PURE__ */ new Set());
+  const containerRef = React.useRef(null);
+  const onChangeRef = React.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] = React56.useState(relationTo[0]);
-  const extractIds = React56.useCallback(() => {
+  const [activeRelation, setActiveRelation] = React.useState(relationTo[0]);
+  const extractIds = React.useCallback(() => {
     if (!value) return [];
     const items = isMultiple ? Array.isArray(value) ? value : [] : value ? [value] : [];
     return items.map((item) => {
@@ -5379,7 +5573,7 @@ function RelationshipField({
       return String(item);
     }).filter(Boolean);
   }, [value, isMultiple]);
-  const fetchSelectedDocs = React56.useCallback((ids) => {
+  const fetchSelectedDocs = React.useCallback((ids) => {
     if (ids.length === 0) return;
     ids.forEach((id) => {
       if (fetchedIdsRef.current.has(id)) return;
@@ -5406,11 +5600,11 @@ function RelationshipField({
       });
     });
   }, [isPolymorphic, value, activeRelation, isMultiple]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const ids = extractIds();
     fetchSelectedDocs(ids);
   }, [extractIds, fetchSelectedDocs]);
-  const fetchOptions = React56.useCallback((query = "") => {
+  const fetchOptions = React.useCallback((query = "") => {
     setLoading(true);
     const searchFields = ["title", "name", "label", "email"];
     const url = `/api/${activeRelation}?${buildSearchQuery(query, searchFields)}`;
@@ -5427,13 +5621,13 @@ function RelationshipField({
       setLoading(false);
     });
   }, [activeRelation]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) {
       setOptions([]);
       fetchOptions(search);
     }
   }, [isOpen, activeRelation]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -5581,7 +5775,7 @@ function RelationshipField({
   ] });
 }
 var RelationshipField_default = RelationshipField;
-var BlocksContext = React56.createContext(null);
+var BlocksContext = React.createContext(null);
 function createBlocksStore(allowedBlocks = [], dynamicCategories = []) {
   return vanilla.createStore((set, get) => ({
     blocks: [],
@@ -5736,7 +5930,7 @@ function getDefaultData(type) {
   return defaults[type] || {};
 }
 function useBlockById(id) {
-  const store = React56.useContext(BlocksContext);
+  const store = React.useContext(BlocksContext);
   if (!store) return void 0;
   return zustand.useStore(store, (state) => {
     const findRecursive = (blocksList) => {
@@ -5761,7 +5955,7 @@ function useBlockById(id) {
   });
 }
 function useBlockActions() {
-  const store = React56.useContext(BlocksContext);
+  const store = React.useContext(BlocksContext);
   if (!store) {
     throw new Error("useBlockActions must be used within a BlocksContext.Provider");
   }
@@ -6121,7 +6315,7 @@ var VideoBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -6145,7 +6339,7 @@ var ListField = ({
   onChange,
   compact = false
 }) => {
-  const [inputValue, setInputValue] = React56__default.default.useState("");
+  const [inputValue, setInputValue] = React__default.default.useState("");
   const handleAdd = () => {
     if (inputValue.trim()) {
       onChange([...items, inputValue.trim()]);
@@ -6231,7 +6425,7 @@ var ListBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -6280,7 +6474,7 @@ var CodeBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1.5 hover:bg-red-500/10 rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-red-500",
+            className: "p-1.5 hover:bg-[var(--kyro-danger-bg)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
           }
@@ -6379,7 +6573,7 @@ var FileBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -6401,7 +6595,7 @@ var AccordionField = ({
   onChange,
   compact = false
 }) => {
-  const [openIndex, setOpenIndex] = React56__default.default.useState(0);
+  const [openIndex, setOpenIndex] = React__default.default.useState(0);
   const handleTitleChange = (index, value) => {
     const newItems = [...items];
     newItems[index] = { ...newItems[index], title: value };
@@ -6625,7 +6819,7 @@ var AccordionBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -6677,7 +6871,7 @@ var RichTextBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -6827,7 +7021,7 @@ function ArrayLayout({
   const firstField = fields2[0];
   const labelField = firstField?.name || "user";
   const isRelationship = firstField?.type === "relationship";
-  const [openIndex, setOpenIndex] = React56__default.default.useState(0);
+  const [openIndex, setOpenIndex] = React__default.default.useState(0);
   function getItemLabel(item) {
     for (const key of ["label", "title", "name"]) {
       const val = item[key];
@@ -7367,11 +7561,11 @@ var ChildBlocksTree = ({
   depth = 0,
   maxDepth = MAX_DEPTH
 }) => {
-  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);
+  const [showAddModal, setShowAddModal] = React.useState(false);
+  const [expandedIds, setExpandedIds] = React.useState(/* @__PURE__ */ new Set());
+  const [editingBlockId, setEditingBlockId] = React.useState(null);
+  const [confirmDeleteId, setConfirmDeleteId] = React.useState(null);
+  const store = React.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);
@@ -7464,7 +7658,7 @@ var ChildBlocksTree = ({
                         handleRemoveChild(child.id);
                         setConfirmDeleteId(null);
                       },
-                      className: "px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600",
+                      className: "px-2 py-1 text-xs bg-[var(--kyro-danger)] text-white rounded",
                       children: "Remove"
                     }
                   ),
@@ -7487,8 +7681,8 @@ var ChildBlocksTree = ({
                   e.stopPropagation();
                   setConfirmDeleteId(child.id);
                 },
-                className: "p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-red-50",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5 text-red-500 invisible group-hover/column:visible" })
+                className: "p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-[var(--kyro-danger-bg)]",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5 text-[var(--kyro-danger)] invisible group-hover/column:visible" })
               }
             )
           ]
@@ -7588,11 +7782,11 @@ var NestedChildBlocks = ({
   depth,
   maxDepth
 }) => {
-  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);
+  const [showAddModal, setShowAddModal] = React.useState(false);
+  const [expandedIds, setExpandedIds] = React.useState(/* @__PURE__ */ new Set());
+  const [editingBlockId, setEditingBlockId] = React.useState(null);
+  const [confirmDeleteId, setConfirmDeleteId] = React.useState(null);
+  const store = React.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);
@@ -7685,7 +7879,7 @@ var NestedChildBlocks = ({
                         handleRemoveChild(child.id);
                         setConfirmDeleteId(null);
                       },
-                      className: "px-2 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600",
+                      className: "px-2 py-1 text-xs bg-[var(--kyro-danger)] text-white rounded",
                       children: "Remove"
                     }
                   ),
@@ -7708,8 +7902,8 @@ var NestedChildBlocks = ({
                   e.stopPropagation();
                   setConfirmDeleteId(child.id);
                 },
-                className: "p-1.5 rounded-md invisible group-hover:visible transition-opacity cursor-pointer hover:bg-red-50",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5 text-red-500" })
+                className: "p-1.5 rounded-md invisible group-hover:visible transition-opacity cursor-pointer hover:bg-[var(--kyro-danger-bg)]",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5 text-[var(--kyro-danger)]" })
               }
             )
           ]
@@ -7842,7 +8036,7 @@ var HeroBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -8070,7 +8264,7 @@ var ArrayBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -8096,13 +8290,13 @@ var RelationshipBlockField = ({
   onChange,
   compact = false
 }) => {
-  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(() => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+  const [options, setOptions] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [collections2, setCollections] = React.useState([]);
+  const [loadingCollections, setLoadingCollections] = React.useState(true);
+  React.useEffect(() => {
     apiGet("/api/collections").then((data) => {
       setCollections(
         (data.collections || []).map((c) => c.slug || c.name || c)
@@ -8118,7 +8312,7 @@ var RelationshipBlockField = ({
       setLoading(false);
     }).catch(() => setLoading(false));
   };
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (isOpen) fetchOptions(search);
   }, [isOpen, search, relationTo, labelField]);
   const getLabel2 = (opt) => {
@@ -8287,7 +8481,7 @@ var RelationshipBlock = ({
           {
             type: "button",
             onClick: () => removeBlock(block3.id),
-            className: "p-1 hover:bg-red-50 rounded text-red-500",
+            className: "p-1 hover:bg-[var(--kyro-danger-bg)] rounded text-[var(--kyro-danger)]",
             title: "Remove",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
           }
@@ -8448,7 +8642,7 @@ var SortableBlockComponent = ({
   } = sortable.useSortable({ id: block3.id });
   const { removeBlock } = useBlockActions();
   const isEditing = editingBlockId === block3.id;
-  const [showDeleteConfirm, setShowDeleteConfirm] = React56.useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = React.useState(false);
   const style = {
     transform: utilities.CSS.Transform.toString(transform),
     transition,
@@ -8487,7 +8681,7 @@ var SortableBlockComponent = ({
                     removeBlock(block3.id);
                     setShowDeleteConfirm(false);
                   },
-                  className: "px-1.5 py-0.5 text-[9px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors",
+                  className: "px-1.5 py-0.5 text-[9px] bg-[var(--kyro-danger)] text-white rounded font-semibold transition-colors hover:brightness-90",
                   children: "Remove"
                 }
               ),
@@ -8522,7 +8716,7 @@ var SortableBlockComponent = ({
                     e.stopPropagation();
                     setShowDeleteConfirm(true);
                   },
-                  className: "p-0.5 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors",
+                  className: "p-0.5 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors",
                   title: "Remove",
                   children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
                 }
@@ -8541,11 +8735,11 @@ var SortableBlockComponent = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setNodeRef, style, className: "relative group pl-8 mb-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setNodeRef, style, className: "relative group md:pl-8 mb-2", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded",
+        className: "hidden md:absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded",
         ...attributes,
         ...listeners,
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "w-4 h-4" })
@@ -8586,7 +8780,7 @@ var SortableBlockComponent = ({
                       removeBlock(block3.id);
                       setShowDeleteConfirm(false);
                     },
-                    className: "px-2.5 py-1 text-[10px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors",
+                    className: "px-2.5 py-1 text-[10px] bg-[var(--kyro-danger)] text-white rounded font-semibold transition-colors hover:brightness-90",
                     children: "Remove"
                   }
                 ),
@@ -8623,7 +8817,7 @@ var SortableBlockComponent = ({
                   e.stopPropagation();
                   setShowDeleteConfirm(true);
                 },
-                className: "p-1 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors",
+                className: "p-1 hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] rounded text-[var(--kyro-text-muted)] transition-colors",
                 title: "Remove Block",
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" })
               }
@@ -8642,7 +8836,7 @@ var SortableBlockComponent = ({
     )
   ] });
 };
-var SortableBlock = React56__default.default.memo(SortableBlockComponent);
+var SortableBlock = React__default.default.memo(SortableBlockComponent);
 var BlocksField = ({
   field: field3,
   value,
@@ -8653,9 +8847,9 @@ var BlocksField = ({
   documentStatus,
   justSaved
 }) => {
-  const [isDrawerOpen, setIsDrawerOpen] = React56.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React56.useState(false);
-  const dropdownRef = React56.useRef(null);
+  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const dropdownRef = React.useRef(null);
   const pickerMode = field3.admin?.pickerMode || "drawer";
   const allowedBlocks = field3.blocks || [];
   const groupedBlocks = allowedBlocks.reduce((acc, block3) => {
@@ -8685,18 +8879,18 @@ var BlocksField = ({
     title,
     blocks: blocks3
   }));
-  const storeRef = React56.useRef(null);
+  const storeRef = React.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] = 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(() => {
+  const [activeDrag, setActiveDrag] = React.useState(null);
+  const [editingBlockId, setEditingBlockId] = React.useState(null);
+  const prevBlocksLengthRef = React.useRef(blocks2.length);
+  const prevBlockIdsRef = React.useRef(new Set(blocks2.map((b) => b.id)));
+  const isInitializedRef = React.useRef(false);
+  React.useEffect(() => {
     if (isInitializedRef.current) {
       if (blocks2.length > prevBlocksLengthRef.current) {
         const newBlock = blocks2.find((b) => b.id && !prevBlockIdsRef.current.has(b.id));
@@ -8708,7 +8902,7 @@ var BlocksField = ({
     prevBlocksLengthRef.current = blocks2.length;
     prevBlockIdsRef.current = new Set(blocks2.map((b) => b.id));
   }, [blocks2]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (onBlocksChange) {
       store.getState().setOnBlocksChange(onBlocksChange);
     }
@@ -8717,8 +8911,8 @@ var BlocksField = ({
       });
     };
   }, [onBlocksChange, store]);
-  const lastValueRef = React56.useRef(null);
-  React56.useEffect(() => {
+  const lastValueRef = React.useRef(null);
+  React.useEffect(() => {
     const valueArray = Array.isArray(value) ? value : [];
     const lastValueArray = lastValueRef.current || [];
     if (JSON.stringify(valueArray) !== JSON.stringify(lastValueArray)) {
@@ -8733,9 +8927,9 @@ var BlocksField = ({
       lastValueRef.current = [];
     }
   }, [value, field3.name, store]);
-  const onChangeRef = React56.useRef(onChange);
+  const onChangeRef = React.useRef(onChange);
   onChangeRef.current = onChange;
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!onChangeRef.current) return;
     const lastValue = lastValueRef.current;
     if (!lastValue) return;
@@ -8744,13 +8938,13 @@ var BlocksField = ({
       onChangeRef.current(blocks2);
     }
   }, [blocks2]);
-  const handleAddBlock = React56.useCallback(
+  const handleAddBlock = React.useCallback(
     (blockType) => {
       store.getState().addBlock(blockType);
     },
     [store]
   );
-  const duplicateBlock = React56.useCallback(
+  const duplicateBlock = React.useCallback(
     (blockId) => {
       const blockIndex = blocks2.findIndex((b) => b.id === blockId);
       if (blockIndex === -1) return;
@@ -8813,9 +9007,9 @@ 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;
+  const activeBlock = activeDrag ? dynamicCategories.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";
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!isDropdownOpen) return;
     const handleClick = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
@@ -8976,9 +9170,9 @@ function normalizeUploadFields(value) {
   return value;
 }
 function useQueue() {
-  const queue = React56.useRef([]);
-  const isProcessing = React56.useRef(false);
-  const queueTask = React56.useCallback((fn, options) => {
+  const queue = React.useRef([]);
+  const isProcessing = React.useRef(false);
+  const queueTask = React.useCallback((fn, options) => {
     queue.current.push(fn);
     async function processQueue() {
       if (isProcessing.current) return;
@@ -9041,27 +9235,27 @@ function useAutoFormState({
   } = store;
   const versionsEnabled = !!config.versions;
   const currentContextKey = globalSlug || initialData?.id || collectionSlug;
-  const needsResetRef = React56.useRef(false);
+  const needsResetRef = React.useRef(false);
   if (!globalSlug && currentContextKey && formData && Object.keys(formData).length > 0 && formData.id !== currentContextKey) {
     needsResetRef.current = true;
   }
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (needsResetRef.current) {
       needsResetRef.current = false;
       resetForm();
     }
   }, [resetForm]);
-  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 localSaveTimerRef = React.useRef(null);
+  const serverSaveTimerRef = React.useRef(null);
+  const retryTimerRef = React.useRef(null);
+  const isOnlineRef = React.useRef(typeof navigator !== "undefined" ? navigator.onLine : true);
+  const lastAutoSaveTimeRef = React.useRef(0);
+  const autoSaveSkipRef = React.useRef(false);
+  const restorePromptedRef = React.useRef(null);
+  const previousFormDataRef = React.useRef("");
+  const astroSyncDataRef = React.useRef("");
   const { queueTask } = useQueue();
-  const getDocumentKey = React56.useCallback(
+  const getDocumentKey = React.useCallback(
     (id) => {
       if (globalSlug) return `global:${globalSlug}`;
       if (collectionSlug && id) return `${collectionSlug}:${id}`;
@@ -9069,7 +9263,7 @@ function useAutoFormState({
     },
     [collectionSlug, globalSlug]
   );
-  const persistBrowserDraft = React56.useCallback(
+  const persistBrowserDraft = React.useCallback(
     (documentKey, data, options) => {
       setDraftCache(documentKey, {
         data,
@@ -9080,7 +9274,7 @@ function useAutoFormState({
     },
     [lastSavedData.updatedAt, setDraftCache]
   );
-  const fetchVersions = React56.useCallback(async () => {
+  const fetchVersions = React.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);
@@ -9094,7 +9288,7 @@ function useAutoFormState({
       setLoadingVersions(false);
     }
   }, [formData.id, collectionSlug, globalSlug, setLoadingVersions, setVersions]);
-  const performLocalAutoSave = React56.useCallback(() => {
+  const performLocalAutoSave = React.useCallback(() => {
     const state = useAutoFormStore.getState();
     const latestFormData = state.formData;
     if (autoSaveSkipRef.current || !collectionSlug || !latestFormData.id) return;
@@ -9104,7 +9298,7 @@ function useAutoFormState({
       persistBrowserDraft(documentKey, latestFormData);
     }
   }, [collectionSlug, getDocumentKey, persistBrowserDraft]);
-  const doAutosaveFetch = React56.useCallback(async (options) => {
+  const doAutosaveFetch = React.useCallback(async (options) => {
     const state = useAutoFormStore.getState();
     const latestFormData = state.formData;
     const currentLastSaved = state.lastSavedData;
@@ -9187,7 +9381,7 @@ function useAutoFormState({
     setIsAutoSaving,
     versionsEnabled
   ]);
-  const performAutosave = React56.useCallback((options) => {
+  const performAutosave = React.useCallback((options) => {
     queueTask(
       () => doAutosaveFetch(options),
       {
@@ -9199,7 +9393,7 @@ function useAutoFormState({
       }
     );
   }, [doAutosaveFetch, queueTask]);
-  const saveDocument = React56.useCallback(
+  const saveDocument = React.useCallback(
     async (dataOverride, isDraft = true) => {
       const state = useAutoFormStore.getState();
       const payload = dataOverride || state.formData;
@@ -9225,17 +9419,17 @@ function useAutoFormState({
     },
     [collectionSlug, globalSlug, setAutoSaveStatus]
   );
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleToggle = () => {
       setSidebarCollapsed(!sidebarCollapsed);
     };
     window.addEventListener("toggle-sidebar", handleToggle);
     return () => window.removeEventListener("toggle-sidebar", handleToggle);
   }, [sidebarCollapsed, setSidebarCollapsed]);
-  const lastLoadedSlugRef = React56.useRef(null);
-  const lastInitialDataRef = React56.useRef("");
-  const initialDataLoadedRef = React56.useRef(false);
-  React56.useEffect(() => {
+  const lastLoadedSlugRef = React.useRef(null);
+  const lastInitialDataRef = React.useRef("");
+  const initialDataLoadedRef = React.useRef(false);
+  React.useEffect(() => {
     const currentSlug = globalSlug || initialData?.id;
     const serialized = JSON.stringify(initialData);
     if (initialDataLoadedRef.current && lastLoadedSlugRef.current === currentSlug && lastInitialDataRef.current === serialized) return;
@@ -9244,7 +9438,7 @@ function useAutoFormState({
     lastLoadedSlugRef.current = currentSlug;
     lastInitialDataRef.current = serialized;
   }, [collectionSlug, formData.id, globalSlug, initialData, loadDocument]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!collectionSlug || !initialData?.id) return;
     const documentKey = getDocumentKey(initialData.id);
     if (!documentKey) return;
@@ -9307,7 +9501,7 @@ function useAutoFormState({
     }
     return void 0;
   }
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const fields2 = config.fields;
     const metaTitleField = findFieldDeep(fields2, "metaTitle");
     if (!metaTitleField) return;
@@ -9317,7 +9511,7 @@ function useAutoFormState({
       setField("metaTitle", titleStr);
     }
   }, [formData, config.fields, setField]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const fields2 = config.fields;
     const slugField = fields2.find(
       (f) => f.name === "slug" && f.admin?.autoGenerate
@@ -9332,7 +9526,7 @@ function useAutoFormState({
       }
     }
   }, [formData, isSlugLocked, config.fields, setField]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (sidebarCollapsed) return;
     if (!globalSlug && (!collectionSlug || !formData.id)) return;
     const state = useAutoFormStore.getState();
@@ -9349,7 +9543,7 @@ function useAutoFormState({
       performAutosave();
     }, 8e3);
   }, [formData, sidebarCollapsed, collectionSlug, globalSlug, performLocalAutoSave, performAutosave]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!globalSlug && (!collectionSlug || !formData.id)) return;
     const flushDraft = () => {
       if (autoSaveSkipRef.current) return;
@@ -9386,7 +9580,7 @@ function useAutoFormState({
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, [collectionSlug, globalSlug, formData.id, performAutosave]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const serialized = JSON.stringify(formData);
     if (serialized === astroSyncDataRef.current) return;
     astroSyncDataRef.current = serialized;
@@ -9396,7 +9590,7 @@ function useAutoFormState({
     }
     onChange?.(formData);
   }, [formData, onChange]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (globalSlug || formData.id) fetchVersions();
   }, [formData.id, globalSlug, fetchVersions]);
   const documentStatus = (() => {
@@ -9423,9 +9617,9 @@ function Dropdown({
   align = "right",
   direction = "up"
 }) {
-  const [open, setOpen] = React56.useState(false);
-  const ref = React56.useRef(null);
-  React56.useEffect(() => {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -9552,7 +9746,7 @@ function TabsLayout({
   onTabDataChange,
   renderField
 }) {
-  const [activeTab, setActiveTab] = React56.useState(0);
+  const [activeTab, setActiveTab] = React.useState(0);
   const fieldTabs = field3.tabs || [];
   const currentTab = fieldTabs[activeTab] || fieldTabs[0];
   const tabData = field3.name ? formData[field3.name] || {} : formData;
@@ -9653,13 +9847,13 @@ function AutoForm({
     onActionSuccess,
     onActionError
   });
-  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 menuRef = React.useRef(null);
+  const scheduleRef = React.useRef(null);
+  const [showSchedulePicker, setShowSchedulePicker] = React.useState(false);
+  const [localSaveStatus, setLocalSaveStatus] = React.useState("idle");
+  const [now, setNow] = React.useState(Date.now());
   const disabled = propDisabled;
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const id = setInterval(() => setNow(Date.now()), 1e4);
     return () => clearInterval(id);
   }, []);
@@ -9737,7 +9931,7 @@ function AutoForm({
       return [...prev, versionId];
     });
   };
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleShortcuts = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "s") {
         e.preventDefault();
@@ -9760,12 +9954,12 @@ function AutoForm({
     window.addEventListener("keydown", handleShortcuts);
     return () => window.removeEventListener("keydown", handleShortcuts);
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handler = () => setView("version");
     window.addEventListener("kyro:show-version-history", handler);
     return () => window.removeEventListener("kyro:show-version-history", handler);
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setIsMenuOpen(false);
@@ -9776,7 +9970,7 @@ function AutoForm({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [isMenuOpen]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (scheduleRef.current && !scheduleRef.current.contains(e.target)) {
         setShowSchedulePicker(false);
@@ -10061,7 +10255,7 @@ function AutoForm({
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "kyro-form-row flex gap-6 items-end",
+          className: "kyro-form-row flex flex-col md:flex-row gap-4 md:gap-6 items-start md:items-end w-full",
           children: rowFields?.map((f) => {
             const fAdmin = f.admin || {};
             const actionUrl = fAdmin?.action;
@@ -10293,24 +10487,24 @@ function AutoForm({
     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: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "surface-tile px-3 md:px-8 py-2 md:py-6 flex items-center justify-between max-md:static sticky top-0 z-50 border-b border-[var(--kyro-border)] mb-0 md:mb-8 bg-[var(--kyro-surface)] backdrop-blur-md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 md:gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 md:gap-3 flex-wrap min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
               href: `/${collectionSlug}`,
-              className: "p-2 border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors",
+              className: "p-1.5 md:p-2 border-0 md:border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors shrink-0",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-bold tracking-tighter", children: docTitle }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl font-bold tracking-tighter truncate min-w-0", children: docTitle }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `shrink-0 inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: `h-1.5 w-1.5 rounded-full ${statusColor}` }),
             statusLabel
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 ml-12", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 md:ml-12", children: [
           autoSaveStatus === "saving" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 text-[var(--kyro-text-muted)]", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               "svg",
@@ -10431,7 +10625,7 @@ function AutoForm({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-md:hidden flex items-center gap-6", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 bg-[var(--kyro-bg-secondary)] p-1 rounded-xl border border-[var(--kyro-border)]", children: ["edit", "version", "api"].map((v) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -10616,15 +10810,15 @@ function AutoForm({
   };
   const renderEditView = () => {
     if (layout === "single") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full space-y-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "surface-tile p-8 space-y-8", children: config.fields.map((f) => renderField(f)) }) });
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full space-y-6 md:space-y-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "surface-tile p-4 md:p-8 space-y-6 md:space-y-8", children: config.fields.map((f) => renderField(f)) }) });
     }
     const hasSidebarFields = config.fields.some((f) => f.admin?.position === "sidebar") && !showPreview;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: `w-full mx-auto grid gap-8 pb-32 transition-all duration-700 ${showPreview ? "grid-cols-1 lg:grid-cols-2" : sidebarCollapsed || !hasSidebarFields ? "grid-cols-1" : "grid-cols-1 lg:grid-cols-[1fr_380px]"}`,
+        className: `w-full mx-auto grid gap-4 md:gap-8 pb-32 transition-all duration-700 ${showPreview ? "grid-cols-1 lg:grid-cols-2" : sidebarCollapsed || !hasSidebarFields ? "grid-cols-1" : "grid-cols-1 lg:grid-cols-[1fr_380px]"}`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-8 animate-in fade-in slide-in-from-left-4 duration-500", children: config.tabs ? renderField({ type: "tabs", tabs: config.tabs }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "surface-tile p-8 space-y-8", children: config.fields.filter(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6 md:space-y-8 animate-in fade-in slide-in-from-left-4 duration-500", children: config.tabs ? renderField({ type: "tabs", tabs: config.tabs }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "surface-tile p-4 md:p-8 space-y-6 md:space-y-8", children: config.fields.filter(
             (f) => !f.admin?.position || f.admin.position === "main"
           ).map((f) => renderField(f)) }) }),
           showPreview ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-36 h-[calc(100vh-280px)] animate-in fade-in slide-in-from-right-10 duration-700", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full h-full rounded-3xl border border-[var(--kyro-border)] bg-[var(--kyro-bg-secondary)] shadow-2xl overflow-hidden relative group", children: [
@@ -10641,9 +10835,18 @@ function AutoForm({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" })
-          ] }) }) : sidebarCollapsed ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-500", children: config.fields.some((f) => f.admin?.position === "sidebar") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-6 space-y-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40", children: "Settings" }),
-            config.fields.filter((f) => f.admin?.position === "sidebar").map((f) => renderField(f))
+          ] }) }) : sidebarCollapsed ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500", children: config.fields.some((f) => f.admin?.position === "sidebar") && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:block surface-tile p-6 space-y-6", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40", children: "Settings" }),
+              config.fields.filter((f) => f.admin?.position === "sidebar").map((f) => renderField(f))
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "lg:hidden surface-tile p-4 space-y-4 group", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("summary", { className: "cursor-pointer font-semibold text-xs tracking-widest opacity-40 text-[var(--kyro-text-secondary)] select-none flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3 h-3 transition-transform group-open:rotate-90", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6" }) }),
+                "Settings"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 pt-4 border-t border-[var(--kyro-border)]", children: config.fields.filter((f) => f.admin?.position === "sidebar").map((f) => renderField(f)) })
+            ] })
           ] }) })
         ]
       }
@@ -10895,7 +11098,7 @@ function AutoForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "w-full pt-6 md:pt-0", children: [
       view === "edit" && renderEditView(),
       view === "version" && renderVersionView(),
       view === "api" && renderApiView()
@@ -10913,9 +11116,13 @@ function ActionBar({
   onViewHistory,
   onPreview,
   onDelete,
+  onBack,
+  onToggleSidebar,
   publishedAt,
   updatedAt
 }) {
+  const view = useAutoFormStore((s) => s.view) || "edit";
+  const setView = useAutoFormStore((s) => s.setView);
   const getSaveStatusText = () => {
     if (saveStatus === "saving") return "Saving...";
     if (saveStatus === "saved") return "Saved";
@@ -10962,101 +11169,268 @@ function ActionBar({
     if (!dateStr) return "Never";
     return new Date(dateStr).toLocaleString();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-3 px-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden flex flex-col gap-3 py-3 px-4 bg-[var(--kyro-bg)] border-t border-[var(--kyro-border)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        onBack && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            className: "p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
+            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" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+          onPreview && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onPreview,
+              className: "p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
+              title: "Preview",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4" })
+            }
+          ),
+          onViewHistory && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onViewHistory,
+              className: "p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
+              title: "View History",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4" })
+            }
+          ),
+          onDuplicate && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDuplicate,
+              className: "p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
+              title: "Duplicate",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" })
+            }
+          ),
+          onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDelete,
+              className: "p-2 rounded-lg hover:bg-[var(--kyro-danger-bg)] text-[var(--kyro-error)] transition-all",
+              title: "Delete",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
+            }
+          ),
+          onToggleSidebar && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onToggleSidebar,
+              className: "p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all",
+              title: "Toggle Sidebar",
+              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: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
+              ] })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 bg-[var(--kyro-bg-secondary)] p-0.5 rounded-lg border border-[var(--kyro-border)] self-start", children: ["edit", "version", "api"].map((v) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setView(v),
+          className: `px-4 py-1.5 text-xs font-bold rounded-md transition-all ${view === v ? "bg-[var(--kyro-surface)] shadow-sm border border-[var(--kyro-border)] text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`,
+          children: v === "edit" ? "Edit" : v === "version" ? "Version" : "API"
+        },
+        v
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
         getStatusBadge(),
         getSaveStatusText() && /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
-            className: `text-sm ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`,
+            className: `text-xs ${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()
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-[var(--kyro-text-muted)] ml-auto", children: [
+          updatedAt && `Updated ${formatDate2(updatedAt)}`,
+          publishedAt && status === "published" && ` \xB7 Published ${formatDate2(publishedAt)}`
+        ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs space-y-0.5", children: [
-        updatedAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--kyro-text-muted)]", children: [
-          "Updated: ",
-          formatDate2(updatedAt)
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        status === "draft" && onPublish && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onPublish,
+            disabled: saveStatus === "saving",
+            className: "kyro-btn kyro-btn-primary kyro-btn-md flex items-center gap-2 flex-1 justify-center",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }),
+              "Publish"
+            ]
+          }
+        ),
+        status === "published" && onUnpublish && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onUnpublish,
+            disabled: saveStatus === "saving",
+            className: "kyro-btn kyro-btn-secondary kyro-btn-md flex items-center gap-2 flex-1 justify-center",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo, { className: "w-4 h-4" }),
+              "Unpublish"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          SplitButton,
+          {
+            status,
+            saveStatus,
+            hasChanges,
+            onPublish: onSave,
+            children: [
+              onDuplicate && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }),
+                  children: "Duplicate"
+                }
+              ),
+              onViewHistory && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4" }),
+                  children: "View History"
+                }
+              ),
+              onPreview && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4" }),
+                  children: "Preview"
+                }
+              ),
+              (onDuplicate || onViewHistory || onPreview) && /* @__PURE__ */ jsxRuntime.jsx(DropdownSeparator, {}),
+              onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  onClick: onDelete,
+                  danger: true,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" }),
+                  children: "Delete"
+                }
+              )
+            ]
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex flex-row items-center justify-between gap-4 py-3 px-6 bg-transparent border-0 static z-40", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          getStatusBadge(),
+          getSaveStatusText() && /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              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()
+              ]
+            }
+          )
         ] }),
-        publishedAt && status === "published" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--kyro-primary)] font-medium", children: [
-          "Published: ",
-          formatDate2(publishedAt)
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs space-y-0.5", children: [
+          updatedAt && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--kyro-text-muted)]", children: [
+            "Updated: ",
+            formatDate2(updatedAt)
+          ] }),
+          publishedAt && status === "published" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--kyro-primary)] font-medium", children: [
+            "Published: ",
+            formatDate2(publishedAt)
+          ] })
         ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+        status === "draft" && onPublish && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onPublish,
+            disabled: saveStatus === "saving",
+            className: "kyro-btn kyro-btn-primary kyro-btn-md flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }),
+              "Publish"
+            ]
+          }
+        ),
+        status === "published" && onUnpublish && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onUnpublish,
+            disabled: saveStatus === "saving",
+            className: "kyro-btn kyro-btn-secondary kyro-btn-md flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo, { className: "w-4 h-4" }),
+              "Unpublish"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          SplitButton,
+          {
+            status,
+            saveStatus,
+            hasChanges,
+            onPublish: onSave,
+            children: [
+              onDuplicate && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }),
+                  children: "Duplicate"
+                }
+              ),
+              onViewHistory && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4" }),
+                  children: "View History"
+                }
+              ),
+              onPreview && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4" }),
+                  children: "Preview"
+                }
+              ),
+              (onDuplicate || onViewHistory || onPreview) && /* @__PURE__ */ jsxRuntime.jsx(DropdownSeparator, {}),
+              onDelete && /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  onClick: onDelete,
+                  danger: true,
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" }),
+                  children: "Delete"
+                }
+              )
+            ]
+          }
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      status === "draft" && onPublish && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: onPublish,
-          disabled: saveStatus === "saving",
-          className: "kyro-btn kyro-btn-primary kyro-btn-md flex items-center gap-2",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" }),
-            "Publish"
-          ]
-        }
-      ),
-      status === "published" && onUnpublish && /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: onUnpublish,
-          disabled: saveStatus === "saving",
-          className: "kyro-btn kyro-btn-secondary kyro-btn-md flex items-center gap-2",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo, { className: "w-4 h-4" }),
-            "Unpublish"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        SplitButton,
-        {
-          status,
-          saveStatus,
-          hasChanges,
-          onPublish: onSave,
-          children: [
-            onDuplicate && /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownItem,
-              {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4" }),
-                children: "Duplicate"
-              }
-            ),
-            onViewHistory && /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownItem,
-              {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-4 h-4" }),
-                children: "View History"
-              }
-            ),
-            onPreview && /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownItem,
-              {
-                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4" }),
-                children: "Preview"
-              }
-            ),
-            (onDuplicate || onViewHistory || onPreview) && /* @__PURE__ */ jsxRuntime.jsx(DropdownSeparator, {}),
-            onDelete && /* @__PURE__ */ jsxRuntime.jsx(
-              DropdownItem,
-              {
-                onClick: onDelete,
-                danger: true,
-                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" }),
-                children: "Delete"
-              }
-            )
-          ]
-        }
-      )
     ] })
   ] });
 }
@@ -11072,32 +11446,32 @@ function DetailView({
   mode = "collection"
 }) {
   const { confirm, alert } = useUIStore();
-  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 [data, setData] = React.useState({});
+  const [originalData, setOriginalData] = React.useState({});
+  const [loading, setLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const [saveStatus, setSaveStatus] = React.useState("idle");
+  const [deleting, setDeleting] = React.useState(false);
+  const [status, setStatus] = React.useState("draft");
+  const [createdAt, setCreatedAt] = React.useState(null);
+  const [updatedAt, setUpdatedAt] = React.useState(null);
+  const [publishedAt, setPublishedAt] = React.useState(null);
+  const [justSaved, setJustSaved] = React.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);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (hasChanges && status === "published") {
       setStatus("draft");
     }
   }, [hasChanges, status]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (hasChanges && saveStatus === "saved") {
       setSaveStatus("idle");
     }
   }, [hasChanges, saveStatus]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (mode === "global") {
       loadGlobal();
     } else if (documentId) {
@@ -11136,7 +11510,7 @@ function DetailView({
       setLoading(false);
     }
   };
-  const handleSave = React56.useCallback(
+  const handleSave = React.useCallback(
     async (isAutosave = false) => {
       try {
         setSaveStatus("saving");
@@ -11280,7 +11654,27 @@ function DetailView({
         ]
       }
     ),
-    !isSingleLayout && /* @__PURE__ */ jsxRuntime.jsx(
+    isSingleLayout ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      ActionBar,
+      {
+        status,
+        saveStatus,
+        hasChanges,
+        onSave: () => handleSave(false),
+        onPublish: handlePublish,
+        onUnpublish: status === "published" ? handleUnpublish : void 0,
+        onDuplicate: handleDuplicate,
+        onViewHistory: () => {
+          window.dispatchEvent(new CustomEvent("kyro:show-version-history"));
+        },
+        onPreview: () => window.open(`/preview/${slug}/${documentId}`, "_blank"),
+        onDelete: handleDeleteTrigger,
+        onBack,
+        onToggleSidebar: () => window.dispatchEvent(new CustomEvent("toggle-sidebar")),
+        publishedAt,
+        updatedAt
+      }
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx(
       ActionBar,
       {
         status,
@@ -11295,6 +11689,8 @@ function DetailView({
         },
         onPreview: () => window.open(`/preview/${slug}/${documentId}`, "_blank"),
         onDelete: handleDeleteTrigger,
+        onBack,
+        onToggleSidebar: () => window.dispatchEvent(new CustomEvent("toggle-sidebar")),
         publishedAt,
         updatedAt
       }
@@ -11302,9 +11698,9 @@ function DetailView({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: isSingleLayout ? "w-full pb-32 pt-8" : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-8 pb-32",
+        className: isSingleLayout ? "w-full pb-32 pt-4 md:pt-8" : "w-full mx-auto grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-4 md:gap-8 pt-4 md:pt-0 pb-32",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-8 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-8", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 md:space-y-8 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-4 md:p-8", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-8 px-1", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40", children: "Core Configuration" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-[var(--kyro-border)] ml-6 opacity-30" })
@@ -11346,10 +11742,10 @@ function DetailView({
               )
             ] })
           ] }) }),
-          !isSingleLayout && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-500", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-8", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-6", children: "Metadata" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+          !isSingleLayout && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-4 md:p-8", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4 md:mb-6", children: "Metadata" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 md:space-y-6", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold  tracking-widest opacity-40", children: "Dynamic Status" }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -11383,9 +11779,9 @@ function DetailView({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-8 bg-[var(--kyro-bg-secondary)]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4", children: "Quick Links" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "surface-tile p-4 md:p-8 bg-[var(--kyro-bg-secondary)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-3 md:mb-4", children: "Quick Links" }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 md:space-y-3", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
@@ -11428,8 +11824,8 @@ function CreateView({
   onSuccess,
   onError
 }) {
-  const [data, setData] = React56.useState({});
-  const [saving, setSaving] = React56.useState(false);
+  const [data, setData] = React.useState({});
+  const [saving, setSaving] = React.useState(false);
   const fields2 = collection.fields || [];
   const label = collection.label || collection.slug;
   const handleSubmit = async (e) => {
@@ -11472,8 +11868,8 @@ function CreateView({
   ] });
 }
 function Toast({ type, message, onClose }) {
-  const [isPaused, setIsPaused] = React56__default.default.useState(false);
-  const timerRef = React56__default.default.useRef(null);
+  const [isPaused, setIsPaused] = React__default.default.useState(false);
+  const timerRef = React__default.default.useRef(null);
   const startTimer = () => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(onClose, 5e3);
@@ -11481,7 +11877,7 @@ function Toast({ type, message, onClose }) {
   const clearTimer = () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   };
-  React56__default.default.useEffect(() => {
+  React__default.default.useEffect(() => {
     if (!isPaused) {
       startTimer();
     } else {
@@ -11527,15 +11923,20 @@ function useToast() {
   const toasts = useToastStore((state) => state.toasts);
   return { toasts, addToast, removeToast };
 }
+function Toaster() {
+  const toasts = useToastStore((state) => state.toasts);
+  const removeToast = useToastStore((state) => state.removeToast);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toasts-container", style: { position: "fixed", bottom: "24px", right: "24px", display: "flex", flexDirection: "column", gap: "12px", zIndex: 9999, pointerEvents: "none" }, children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(Toast, { type: t.type, message: t.message, onClose: () => removeToast(t.id) }) }, t.id)) });
+}
 function LoginPage({ onAuth, theme = "light" }) {
-  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(() => {
+  const [mode, setMode] = React.useState("login");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [confirmPassword, setConfirmPassword] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [isFirstUser, setIsFirstUser] = React.useState(false);
+  const addToast = useToastStore((state) => state.addToast);
+  React.useEffect(() => {
     checkIfFirstUser();
   }, []);
   const checkIfFirstUser = async () => {
@@ -11546,13 +11947,6 @@ function LoginPage({ onAuth, theme = "light" }) {
       setMode("register");
     }
   };
-  const addToast = (type, message) => {
-    const id = Math.random().toString(36).substring(7);
-    setToasts((prev) => [...prev, { id, type, message }]);
-    setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== id));
-    }, 5e3);
-  };
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -11578,7 +11972,7 @@ function LoginPage({ onAuth, theme = "light" }) {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultMode: theme, children: /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kyro-login-page", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { defaultMode: theme, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kyro-login-page", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kyro-login-container", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "kyro-login-header", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "kyro-login-title", children: isFirstUser ? "Create Admin Account" : mode === "login" ? "Sign In" : "Create Account" }),
@@ -11668,27 +12062,19 @@ function LoginPage({ onAuth, theme = "light" }) {
         )
       ] }) }) })
     ] }),
-    toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(
-      Toast,
-      {
-        type: toast2.type,
-        message: toast2.message,
-        onClose: () => setToasts((prev) => prev.filter((t) => t.id !== toast2.id))
-      },
-      toast2.id
-    ))
-  ] }) }) });
+    /* @__PURE__ */ jsxRuntime.jsx(Toaster, {})
+  ] }) });
 }
 function Dashboard({ collections: collections2, onNavigate, user }) {
   const { permissions } = useAuthStore();
-  const [stats, setStats] = React56.useState({
+  const [stats, setStats] = React.useState({
     totalDocs: 0,
     totalMedia: 0,
     totalUsers: 0,
     recentActivity: []
   });
-  const [loading, setLoading] = React56.useState(true);
-  React56.useEffect(() => {
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
     const timer = setTimeout(() => {
       setStats({
         totalDocs: 124,
@@ -12009,15 +12395,15 @@ function Dashboard({ collections: collections2, onNavigate, user }) {
   ] });
 }
 function UserManagement() {
-  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 [users, setUsers] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [showCreateModal, setShowCreateModal] = React.useState(false);
+  const [createForm, setCreateForm] = React.useState({ name: "", email: "", password: "", role: "customer" });
+  const [createError, setCreateError] = React.useState("");
+  const [creating, setCreating] = React.useState(false);
   const { confirm, alert } = useUIStore();
-  React56.useEffect(() => {
+  React.useEffect(() => {
     loadUsers();
   }, []);
   const loadUsers = async () => {
@@ -12099,7 +12485,7 @@ function UserManagement() {
   const filteredUsers = users.filter(
     (u) => u.email.toLowerCase().includes(searchQuery.toLowerCase()) || u.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-8 pb-12", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-700 px-4 md:px-8 pb-12", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       PageHeader,
       {
@@ -12137,8 +12523,8 @@ function UserManagement() {
         /* @__PURE__ */ jsxRuntime.jsx("button", { className: "px-4 py-1.5 text-[10px] font-bold tracking-widest opacity-40 hover:opacity-100 transition-all", children: "LOCKED" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "surface-tile overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-left table-fixed", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "surface-tile overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full text-left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)] whitespace-nowrap", children: [
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-4 w-64", children: "Member Identity" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-4", children: "Administrative Role" }),
         /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-6 py-4", children: "Security Status" }),
@@ -12282,8 +12668,8 @@ function UserManagement() {
   ] });
 }
 function AvatarCell({ user }) {
-  const [url, setUrl] = React56.useState(null);
-  React56.useEffect(() => {
+  const [url, setUrl] = React.useState(null);
+  React.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));
@@ -12295,15 +12681,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] = React56.useState("Kyro CMS");
-  const [adminTitle, setAdminTitle] = React56.useState("Command Center");
-  const [primaryColor, setPrimaryColor] = React56.useState("#6366f1");
-  const [dashboardGreeting, setDashboardGreeting] = React56.useState(
+  const [siteName, setSiteName] = React.useState("Kyro CMS");
+  const [adminTitle, setAdminTitle] = React.useState("Command Center");
+  const [primaryColor, setPrimaryColor] = React.useState("#6366f1");
+  const [dashboardGreeting, setDashboardGreeting] = React.useState(
     "Welcome back to your Command Center."
   );
-  const [saving, setSaving] = React56.useState(false);
-  const [saved, setSaved] = React56.useState(false);
-  React56.useEffect(() => {
+  const [saving, setSaving] = React.useState(false);
+  const [saved, setSaved] = React.useState(false);
+  React.useEffect(() => {
     const fetchBranding = async () => {
       try {
         const result = await apiGet("/api/globals/site-settings");
@@ -12499,15 +12885,15 @@ function BrandingHub() {
 }
 var API_BASE2 = typeof __KYRO_API_PATH__ !== "undefined" ? __KYRO_API_PATH__ : "/api";
 function DeveloperCenter({ collections: collections2 }) {
-  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 [keys, setKeys] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [showKey, setShowKey] = React.useState(null);
+  const [testEndpoint, setTestEndpoint] = React.useState("");
+  const [playgroundResult, setPlaygroundResult] = React.useState(null);
+  const [exploring, setExploring] = React.useState(false);
   const { confirm, alert } = useUIStore();
-  const [showCreateModal, setShowCreateModal] = React56.useState(false);
-  const [newKeyName, setNewKeyName] = React56.useState("");
+  const [showCreateModal, setShowCreateModal] = React.useState(false);
+  const [newKeyName, setNewKeyName] = React.useState("");
   const loadKeys = async () => {
     try {
       const data = await apiGet("/api/keys");
@@ -12516,7 +12902,7 @@ function DeveloperCenter({ collections: collections2 }) {
       console.error(e);
     }
   };
-  React56.useEffect(() => {
+  React.useEffect(() => {
     loadKeys();
   }, []);
   const handleGenerateKey = async () => {
@@ -12834,12 +13220,12 @@ function DeveloperCenter({ collections: collections2 }) {
   ] });
 }
 function useResourceManager(options) {
-  const [items, setItems] = React56.useState([]);
-  const [loading, setLoading] = React56.useState(false);
-  const [error, setError] = React56.useState(null);
-  const [isCreateModalOpen, setIsCreateModalOpen] = React56.useState(false);
+  const [items, setItems] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = React.useState(false);
   const { confirm } = useUIStore();
-  const load = React56.useCallback(async () => {
+  const load = React.useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -12856,10 +13242,10 @@ function useResourceManager(options) {
       setLoading(false);
     }
   }, [options.endpoint, options.transformLoad]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     load();
   }, [load]);
-  const remove = React56.useCallback((id, resourceName = "item") => {
+  const remove = React.useCallback((id, resourceName = "item") => {
     confirm({
       title: `Delete ${resourceName}`,
       message: `Are you sure you want to delete this ${resourceName.toLowerCase()}? This action cannot be undone.`,
@@ -12869,6 +13255,7 @@ function useResourceManager(options) {
           await apiDelete(`${options.endpoint}/${id}`);
           setItems((prev) => prev.filter((item) => item.id !== id));
           options.onSuccess?.("delete", id);
+          toast.success(`${resourceName} deleted`);
         } catch (e) {
           const message = e instanceof Error ? e.message : `Failed to delete ${resourceName}`;
           toast.error(message);
@@ -12877,7 +13264,7 @@ function useResourceManager(options) {
       }
     });
   }, [options.endpoint, confirm]);
-  const create3 = React56.useCallback(async (data) => {
+  const create3 = React.useCallback(async (data) => {
     setError(null);
     try {
       const created = await apiPost(options.endpoint, data);
@@ -12892,7 +13279,7 @@ function useResourceManager(options) {
       throw e;
     }
   }, [options.endpoint]);
-  const update = React56.useCallback(async (id, data) => {
+  const update = React.useCallback(async (id, data) => {
     setError(null);
     try {
       const updated = await apiPatch(`${options.endpoint}/${id}`, data);
@@ -12932,17 +13319,17 @@ function WebhookManager() {
     endpoint: "/api/webhooks"
   });
   const { confirm } = useUIStore();
-  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({
+  const [showTestModal, setShowTestModal] = React.useState(false);
+  const [showHelpModal, setShowHelpModal] = React.useState(false);
+  const [testResult, setTestResult] = React.useState(null);
+  const [testId, setTestId] = React.useState(null);
+  const [formData, setFormData] = React.useState({
     name: "",
     url: "",
     events: [],
     secret: ""
   });
-  const [createError, setCreateError] = React56.useState("");
+  const [createError, setCreateError] = React.useState("");
   const handleCreate = async () => {
     if (!formData.name.trim() || !formData.url.trim()) {
       setCreateError("Name and URL are required");
@@ -13097,12 +13484,12 @@ function WebhookManager() {
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid sm:grid-cols-3 gap-6 pt-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-6 pt-2", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest opacity-30", children: "Destination" }),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-mono text-xs opacity-60 truncate max-w-[200px]", title: webhook.url, children: webhook.url })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 border-l border-[var(--kyro-border)] pl-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 sm:border-l border-t sm:border-t-0 border-[var(--kyro-border)] pt-4 sm:pt-0 sm:pl-6 mt-4 sm:mt-0", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest opacity-30", children: "Events" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1", children: [
                     webhook.events.slice(0, 2).map((event) => /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "text-[8px] font-bold px-1.5 opacity-60", children: event }, event)),
@@ -13113,7 +13500,7 @@ function WebhookManager() {
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 border-l border-[var(--kyro-border)] pl-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 sm:border-l border-t sm:border-t-0 border-[var(--kyro-border)] pt-4 sm:pt-0 sm:pl-6 mt-4 sm:mt-0", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest opacity-30", children: "Activity" }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] font-bold opacity-60 flex items-center gap-1.5", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "w-3 h-3" }),
@@ -13216,7 +13603,7 @@ function WebhookManager() {
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider", children: "Subscribed Events" }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-4", children: eventOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: eventOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     type: "button",
@@ -13394,13 +13781,13 @@ function CommandPalette({
   onNavigate
 }) {
   const { user, permissions } = useAuthStore();
-  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(() => {
+  const [query, setQuery] = React.useState("");
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [loading, setLoading] = React.useState(false);
+  const [searchResults, setSearchResults] = React.useState([]);
+  const inputRef = React.useRef(null);
+  const debounceRef = React.useRef(null);
+  React.useEffect(() => {
     if (isOpen) {
       setQuery("");
       setSelectedIndex(0);
@@ -13409,7 +13796,7 @@ function CommandPalette({
       setTimeout(() => inputRef.current?.focus(), 100);
     }
   }, [isOpen]);
-  const performSearch = React56.useCallback(async (searchQuery) => {
+  const performSearch = React.useCallback(async (searchQuery) => {
     if (!searchQuery || searchQuery.length < 2) {
       setSearchResults([]);
       return;
@@ -13430,7 +13817,7 @@ function CommandPalette({
       setLoading(false);
     }
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
     }
@@ -13677,7 +14064,7 @@ function CommandPalette({
 }
 function GlobalModal() {
   const { modal, closeModal } = useUIStore();
-  const [loading, setLoading] = React56.useState(false);
+  const [loading, setLoading] = React.useState(false);
   if (!modal.open || !modal.config) return null;
   const { config } = modal;
   const handleConfirm = async () => {
@@ -13717,24 +14104,22 @@ function GlobalModal() {
   );
 }
 function Admin({ config, theme = "light", onThemeChange }) {
-  const [authenticated, setAuthenticated] = React56.useState(false);
-  const [currentUser, setCurrentUser] = React56.useState(null);
-  const collections2 = React56.useMemo(
+  const [authenticated, setAuthenticated] = React.useState(false);
+  const [currentUser, setCurrentUser] = React.useState(null);
+  const collections2 = React.useMemo(
     () => toCollectionMap(toArray(config.collections)),
     [config.collections]
   );
-  const globals2 = React56.useMemo(
+  const globals2 = React.useMemo(
     () => toGlobalMap(toArray(config.globals)),
     [config.globals]
   );
-  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);
-  React56.useEffect(() => {
+  const [activeCollection, setActiveCollection] = React.useState(null);
+  const [activeGlobal, setActiveGlobal] = React.useState(null);
+  const [currentView, setCurrentView] = React.useState("list");
+  const [activeDocumentId, setActiveDocumentId] = React.useState(null);
+  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = React.useState(false);
+  React.useEffect(() => {
     const checkAuth = async () => {
       try {
         const response = await fetch("/api/users/me");
@@ -13749,7 +14134,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
     };
     checkAuth();
   }, []);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (authenticated && !activeCollection) {
       const firstCol = Object.keys(collections2)[0];
       if (firstCol) setActiveCollection(firstCol);
@@ -13761,7 +14146,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
     if (id) setActiveDocumentId(id);
     setIsCommandPaletteOpen(false);
   };
-  React56.useEffect(() => {
+  React.useEffect(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -13769,7 +14154,11 @@ function Admin({ config, theme = "light", onThemeChange }) {
       }
     };
     window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+    window.openCommandPalette = () => setIsCommandPaletteOpen(true);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      delete window.openCommandPalette;
+    };
   }, []);
   if (!authenticated) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -13855,15 +14244,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
       renderContent()
     ] }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx(GlobalModal, {}),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "kyro-toasts-container", children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
-      Toast,
-      {
-        type: t.type,
-        message: t.message,
-        onClose: () => removeToast(t.id)
-      },
-      t.id
-    )) })
+    /* @__PURE__ */ jsxRuntime.jsx(Toaster, {})
   ] }) });
 }
 function BulkActionsBar({
@@ -14161,10 +14542,10 @@ function getApiUrl(path2) {
   return `${base}${path2}`;
 }
 function useKyroQuery(slug, options = {}) {
-  const [data, setData] = React56.useState(null);
-  const [loading, setLoading] = React56.useState(true);
-  const [error, setError] = React56.useState(null);
-  const fetchData = React56.useCallback(async () => {
+  const [data, setData] = React.useState(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  const fetchData = React.useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -14186,15 +14567,15 @@ function useKyroQuery(slug, options = {}) {
       setLoading(false);
     }
   }, [slug, options.page, options.limit, options.sort, options.order]);
-  React56.useEffect(() => {
+  React.useEffect(() => {
     fetchData();
   }, [fetchData]);
   return { data, loading, error, refetch: fetchData };
 }
 function useKyroMutation(slug, method = "POST") {
-  const [loading, setLoading] = React56.useState(false);
-  const [error, setError] = React56.useState(null);
-  const mutate = React56.useCallback(
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const mutate = React.useCallback(
     async (data) => {
       setLoading(true);
       setError(null);