@kyro-cms/admin 0.9.4 → 0.9.6

package/dist/index.js

@@ -1,7 +1,7 @@
-import React56, { createContext, lazy, useState, useContext, useRef, useEffect, useCallback, useMemo, Suspense } from 'react';
+import React, { createContext, lazy, useState, useContext, useRef, useEffect, useCallback, useMemo, Suspense } from 'react';
 import { create, useStore } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
-import { GripVertical, Copy, X, Video, Mail, Clock, Database, Users, Tag, Image, Activity, CircleHelp, Sparkles, Blocks, Columns3, Link2, ListOrdered, Box, Heading1, Star, AlignLeft, ChevronDown, File, Code, List, Plus, ChevronRight, ChevronUp, Search, LoaderCircle, Check, RefreshCw, Undo, Redo, Bold, Italic, Underline, Strikethrough, Highlighter, Palette, CheckSquare, Quote, Terminal, Minus, AlignCenter, AlignRight, Link, Minimize2, Maximize2, Grid3X3, FolderPlus, FolderInput, Folder, Trash2, Film, Music, FileText, Archive, Download, Crop, Server, CodeXml, Filter, Pencil, Send, Eye, Info, TriangleAlert, ShieldAlert, CircleCheck, History, CheckCircle2, User, GitCompare, Undo2, ExternalLink, Settings, Shield, Hexagon, Network, Sun, Moon, LogOut, ArrowRight, LayoutDashboard, ArrowUpRight, Webhook, Zap, Pause, Play, Key, Lock, EyeOff, CirclePlay, RefreshCcw, Save, UserPlus, LockOpen } from 'lucide-react';
+import { GripVertical, Copy, X, Video, Mail, Clock, Database, Users, Tag, Image, Activity, CircleHelp, Sparkles, Blocks, Columns3, Link2, ListOrdered, Box, Heading1, Star, AlignLeft, ChevronDown, File, Code, List, Plus, ChevronRight, ChevronUp, Search, LoaderCircle, Check, RefreshCw, Undo, Redo, Bold, Italic, Underline, Strikethrough, Highlighter, Palette, CheckSquare, Quote, Terminal, Minus, AlignCenter, AlignRight, Link, Minimize2, Maximize2, Grid3X3, Filter, FolderPlus, FolderInput, Folder, Trash2, Film, Music, FileText, Archive, Download, Crop, Server, CodeXml, Pencil, Eye, Send, Info, TriangleAlert, ShieldAlert, CircleCheck, History, CheckCircle2, User, GitCompare, Undo2, ExternalLink, Settings, Shield, Hexagon, Network, Sun, Moon, LogOut, ArrowRight, LayoutDashboard, ArrowUpRight, Webhook, Zap, Pause, Play, Key, Lock, EyeOff, CirclePlay, RefreshCcw, Save, UserPlus, LockOpen } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { useEditor, EditorContent } from '@tiptap/react';
@@ -437,6 +437,84 @@ function Shimmer({ variant, count = 1, className = "" }) {
     i
   )) });
 }
+function BackButton({ back }) {
+  if (back.href) {
+    return /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) })
+    }
+  );
+}
+function DesktopBreadcrumbs({ breadcrumbs }) {
+  return breadcrumbs?.map((crumb, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    i > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-20 text-[10px]", children: "/" }),
+    crumb.href || crumb.onClick ? /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[10px] font-bold tracking-widest opacity-40", children: crumb.label })
+  ] }, i));
+}
+function ActionsSlot({ actions }) {
+  if (Array.isArray(actions)) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: actions.map((act, i) => /* @__PURE__ */ 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__ */ jsx(act.icon, { className: "w-4 h-4" }),
+          act.label
+        ]
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: actions });
+}
+function SingleAction({ action }) {
+  return /* @__PURE__ */ 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__ */ jsx(action.icon, { className: "w-4 h-4" }),
+        action.label
+      ]
+    }
+  );
+}
 function PageHeader({
   title,
   description,
@@ -448,80 +526,79 @@ function PageHeader({
   actions,
   children
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center surface-tile justify-between gap-6 pt-4 mb-8", children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      (breadcrumbs || back) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-        back && /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) })
-          }
-        ),
-        breadcrumbs?.map((crumb, i) => /* @__PURE__ */ jsxs(React56.Fragment, { children: [
-          i > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-20 text-[10px]", children: "/" }),
-          crumb.href || crumb.onClick ? /* @__PURE__ */ jsx(
-            "a",
-            {
-              href: crumb.href,
-              onClick: (e) => {
-                if (crumb.onClick) {
-                  e.preventDefault();
-                  crumb.onClick();
+  const lastBreadcrumb = breadcrumbs?.[breadcrumbs.length - 1];
+  return /* @__PURE__ */ jsxs("div", { className: "surface-tile px-3 md:px-6 py-3 md:pt-4 mb-4 md:mb-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "md:hidden space-y-2", children: [
+      (breadcrumbs || back) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        back && /* @__PURE__ */ jsx(BackButton, { back }),
+        /* @__PURE__ */ jsxs("details", { className: "group [&::-webkit-details-marker]:hidden flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("summary", { className: "flex items-center gap-2 cursor-pointer list-none", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] truncate", children: lastBreadcrumb?.label || "" }),
+            /* @__PURE__ */ 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__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--kyro-border)] space-y-2", children: [
+            breadcrumbs && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              i > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-20 text-[10px]", children: "/" }),
+              crumb.href || crumb.onClick ? /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[10px] font-bold  tracking-widest opacity-40", children: crumb.label })
-        ] }, i))
+              ) : /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-widest opacity-40", children: crumb.label })
+            ] }, i)) }),
+            metadata && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children: metadata.map((item, i) => /* @__PURE__ */ jsx(React.Fragment, { children: item }, i)) }),
+            children
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6 text-[var(--kyro-primary)]" }),
-        title && /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate", children: title })
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 text-[var(--kyro-primary)] shrink-0" }),
+        title && /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate", children: title }),
+        metadata && !description && /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full bg-[var(--kyro-primary)] shrink-0" })
       ] }),
-      description && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1", children: description }),
-        metadata && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: metadata.map((item, i) => /* @__PURE__ */ jsxs(React56.Fragment, { children: [
+      description && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1 min-w-0 text-xs", children: description }),
+        metadata && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: metadata.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
           i === 0 && /* @__PURE__ */ jsx("span", { className: "opacity-20 ml-1", children: "\xB7" }),
           item
-        ] }, i)) }),
-        children
+        ] }, i)) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-      actions && (Array.isArray(actions) ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: actions.map((act, i) => /* @__PURE__ */ 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__ */ jsx(act.icon, { className: "w-4 h-4" }),
-            act.label
-          ]
-        },
-        i
-      )) }) : actions),
-      action && /* @__PURE__ */ 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__ */ jsx(action.icon, { className: "w-4 h-4" }),
-            action.label
-          ]
-        }
-      )
+    /* @__PURE__ */ jsxs("div", { className: "hidden md:flex md:flex-row md:items-center justify-between gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        (breadcrumbs || back) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
+          back && /* @__PURE__ */ jsx(BackButton, { back }),
+          breadcrumbs && /* @__PURE__ */ jsx(DesktopBreadcrumbs, { breadcrumbs })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "w-6 h-6 text-[var(--kyro-primary)]" }),
+          title && /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)] truncate", children: title })
+        ] }),
+        (description || metadata) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 mt-1", children: [
+          description && /* @__PURE__ */ jsx("p", { className: "text-[var(--kyro-text-secondary)] font-medium opacity-60 line-clamp-1 min-w-0", children: description }),
+          metadata && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: metadata.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            i === 0 && (description || i > 0) && /* @__PURE__ */ jsx("span", { className: "opacity-20 ml-1", children: "\xB7" }),
+            item
+          ] }, i)) }),
+          children
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap shrink-0", children: [
+        actions && /* @__PURE__ */ jsx(ActionsSlot, { actions }),
+        action && /* @__PURE__ */ jsx(SingleAction, { action })
+      ] })
+    ] }),
+    (actions || action) && /* @__PURE__ */ jsxs("div", { className: "md:hidden flex items-center gap-2 mt-3 pt-3 border-t border-[var(--kyro-border)]", children: [
+      action && /* @__PURE__ */ jsx(SingleAction, { action }),
+      actions && /* @__PURE__ */ jsx(ActionsSlot, { actions })
     ] })
   ] });
 }
@@ -583,7 +660,7 @@ function Button({
 }
 function Pagination({ page, totalPages, totalDocs, limit, onPageChange, onLimitChange }) {
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--kyro-border)]", children: [
+  return /* @__PURE__ */ 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__ */ jsxs("span", { className: "text-xs text-[var(--kyro-text-secondary)] font-medium", children: [
       "Showing ",
       (page - 1) * limit + 1,
@@ -592,7 +669,7 @@ function Pagination({ page, totalPages, totalDocs, limit, onPageChange, onLimitC
       " of ",
       totalDocs
     ] }) : /* @__PURE__ */ jsx("span", {}),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap justify-center", children: [
       onLimitChange && /* @__PURE__ */ jsxs(
         "select",
         {
@@ -947,8 +1024,8 @@ function ListView({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-md", children: [
-        /* @__PURE__ */ jsx(Search, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 w-full lg:max-w-md", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -1140,7 +1217,7 @@ function ListView({
         }
       )
     ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.3em] border-b border-[var(--kyro-border)]", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ 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__ */ jsx("th", { className: "px-4 py-4 w-10", children: /* @__PURE__ */ jsx(
           "input",
           {
@@ -1933,10 +2010,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 createPortal(
@@ -2236,6 +2313,7 @@ function MediaGallery({
     {}
   );
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
+  const [showMobileFilters, setShowMobileFilters] = useState(false);
   const [storageConfigured, setStorageConfigured] = useState(null);
   const [storageChecked, setStorageChecked] = useState(false);
   const [showStorageConfigModal, setShowStorageConfigModal] = useState(false);
@@ -2389,6 +2467,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");
@@ -2406,6 +2485,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");
@@ -2420,8 +2500,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) => {
@@ -2470,6 +2552,7 @@ function MediaGallery({
           await apiUpload("/api/media", formData);
           loadMedia();
           setShowCrop(false);
+          toast.success("Cropped image saved");
         }
       }
     } catch (err) {
@@ -2505,7 +2588,7 @@ function MediaGallery({
         }
       },
       children: [
-        /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]", children: "Media Library" }),
             /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 mt-1", children: /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-bold tracking-widest text-[var(--kyro-text-secondary)] opacity-50", children: [
@@ -2516,7 +2599,7 @@ function MediaGallery({
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`, children: [
             /* @__PURE__ */ jsxs("div", { className: "relative group flex-1 min-w-[200px]", children: [
-              /* @__PURE__ */ jsx(Search, { className: "w-4 h-4" }),
+              /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]" }),
               /* @__PURE__ */ jsx(
                 "input",
                 {
@@ -2529,21 +2612,31 @@ function MediaGallery({
               )
             ] }),
             !pickerMode && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]", children: [
-                /* @__PURE__ */ 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__ */ jsx(Grid3X3, { className: "w-4 h-4" })
-                  }
-                ),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]", children: [
+                  /* @__PURE__ */ 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__ */ jsx(Grid3X3, { className: "w-4 h-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ 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__ */ jsx(File, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
                 /* @__PURE__ */ 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__ */ jsx(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__ */ jsx(Filter, { className: "w-4 h-4" })
                   }
                 )
               ] }),
@@ -2642,7 +2735,7 @@ function MediaGallery({
             ] })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-h-0 bg-[var(--kyro-bg)]", children: [
-            /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto custom-scrollbar ${pickerMode ? "px-2 py-4" : "py-8 px-4"}`, children: loading ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: /* @__PURE__ */ jsx(Shimmer, { variant: "media-card", count: 12 }) }) : items.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 text-center", children: [
+            /* @__PURE__ */ 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__ */ jsx("div", { className: "grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: /* @__PURE__ */ jsx(Shimmer, { variant: "media-card", count: 12 }) }) : items.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-32 text-center", children: [
               /* @__PURE__ */ 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__ */ jsx(Grid3X3, { className: "w-10 h-10 text-[var(--kyro-text-muted)] opacity-30" }) }),
               /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-[var(--kyro-text-primary)] tracking-tight", children: "No assets found" }),
               /* @__PURE__ */ 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." }),
@@ -2842,6 +2935,105 @@ function MediaGallery({
             )
           ] })
         ] }),
+        showMobileFilters && !pickerMode && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[70] md:hidden", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "fixed inset-0 bg-black/50 backdrop-blur-sm",
+              onClick: () => setShowMobileFilters(false)
+            }
+          ),
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("h3", { className: "text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]", children: "Filters" }),
+              /* @__PURE__ */ 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__ */ jsx(X, { className: "w-4 h-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-8", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40 block mb-4", children: "Quick Filters" }),
+                /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: ["all", "image", "video", "audio", "document", "archive"].map((t) => /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40", children: "Folders" }),
+                  /* @__PURE__ */ 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__ */ jsx(FolderPlus, { className: "w-4 h-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("nav", { className: "space-y-1", children: [
+                  /* @__PURE__ */ 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__ */ jsx(FolderInput, { className: "w-4 h-4 opacity-70" }),
+                        "All Assets"
+                      ]
+                    }
+                  ),
+                  folders.map((folder) => /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+                    /* @__PURE__ */ 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__ */ jsx("div", { className: "w-4 h-4 flex items-center justify-center opacity-70", children: /* @__PURE__ */ jsx(Folder, { fill: currentFolder === folder ? "currentColor" : "none" }) }),
+                          folder
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ 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__ */ jsx(Trash2, { className: "w-3.5 h-3.5" })
+                      }
+                    )
+                  ] }, folder))
+                ] })
+              ] })
+            ] })
+          ] })
+        ] }),
         /* @__PURE__ */ jsx(
           SlidePanel,
           {
@@ -3139,6 +3331,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",
@@ -6100,7 +6294,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -6124,7 +6318,7 @@ var ListField = ({
   onChange,
   compact = false
 }) => {
-  const [inputValue, setInputValue] = React56.useState("");
+  const [inputValue, setInputValue] = React.useState("");
   const handleAdd = () => {
     if (inputValue.trim()) {
       onChange([...items, inputValue.trim()]);
@@ -6210,7 +6404,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -6259,7 +6453,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__ */ jsx(X, { className: "w-4 h-4" })
           }
@@ -6358,7 +6552,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -6380,7 +6574,7 @@ var AccordionField = ({
   onChange,
   compact = false
 }) => {
-  const [openIndex, setOpenIndex] = React56.useState(0);
+  const [openIndex, setOpenIndex] = React.useState(0);
   const handleTitleChange = (index, value) => {
     const newItems = [...items];
     newItems[index] = { ...newItems[index], title: value };
@@ -6604,7 +6798,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -6656,7 +6850,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -6806,7 +7000,7 @@ function ArrayLayout({
   const firstField = fields2[0];
   const labelField = firstField?.name || "user";
   const isRelationship = firstField?.type === "relationship";
-  const [openIndex, setOpenIndex] = React56.useState(0);
+  const [openIndex, setOpenIndex] = React.useState(0);
   function getItemLabel(item) {
     for (const key of ["label", "title", "name"]) {
       const val = item[key];
@@ -7443,7 +7637,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"
                     }
                   ),
@@ -7466,8 +7660,8 @@ var ChildBlocksTree = ({
                   e.stopPropagation();
                   setConfirmDeleteId(child.id);
                 },
-                className: "p-1.5 rounded-md transition-opacity cursor-pointer hover:bg-red-50",
-                children: /* @__PURE__ */ jsx(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__ */ jsx(X, { className: "w-3.5 h-3.5 text-[var(--kyro-danger)] invisible group-hover/column:visible" })
               }
             )
           ]
@@ -7664,7 +7858,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"
                     }
                   ),
@@ -7687,8 +7881,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__ */ jsx(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__ */ jsx(X, { className: "w-3.5 h-3.5 text-[var(--kyro-danger)]" })
               }
             )
           ]
@@ -7821,7 +8015,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -8049,7 +8243,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -8266,7 +8460,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__ */ jsx(X, { className: "w-3 h-3" })
           }
@@ -8466,7 +8660,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"
                 }
               ),
@@ -8501,7 +8695,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__ */ jsx(X, { className: "w-3 h-3" })
                 }
@@ -8520,11 +8714,11 @@ var SortableBlockComponent = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, style, className: "relative group pl-8 mb-2", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: setNodeRef, style, className: "relative group md:pl-8 mb-2", children: [
     /* @__PURE__ */ 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__ */ jsx(GripVertical, { className: "w-4 h-4" })
@@ -8565,7 +8759,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"
                   }
                 ),
@@ -8602,7 +8796,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__ */ jsx(X, { className: "w-3.5 h-3.5" })
               }
@@ -8621,7 +8815,7 @@ var SortableBlockComponent = ({
     )
   ] });
 };
-var SortableBlock = React56.memo(SortableBlockComponent);
+var SortableBlock = React.memo(SortableBlockComponent);
 var BlocksField = ({
   field: field3,
   value,
@@ -8792,7 +8986,7 @@ var BlocksField = ({
       }
     }
   };
-  const activeBlock = activeDrag ? blockCategories.flatMap((cat) => cat.blocks).find((b) => `drawer-${b.type}` === activeDrag.id) || blocks2.find((b) => b.id === activeDrag.id) : null;
+  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";
   useEffect(() => {
     if (!isDropdownOpen) return;
@@ -10040,7 +10234,7 @@ function AutoForm({
       return /* @__PURE__ */ 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;
@@ -10272,24 +10466,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__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-1 md:gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 md:gap-3 flex-wrap min-w-0", children: [
           /* @__PURE__ */ 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__ */ jsx(ChevronRight, { className: "w-4 h-4" })
             }
           ),
-          /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold tracking-tighter", children: docTitle }),
-          /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`, children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl font-bold tracking-tighter truncate min-w-0", children: docTitle }),
+          /* @__PURE__ */ jsxs("span", { className: `shrink-0 inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`, children: [
             /* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 rounded-full ${statusColor}` }),
             statusLabel
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 ml-12", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 md:ml-12", children: [
           autoSaveStatus === "saving" && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[var(--kyro-text-muted)]", children: [
             /* @__PURE__ */ jsxs(
               "svg",
@@ -10410,7 +10604,7 @@ function AutoForm({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "max-md:hidden flex items-center gap-6", children: [
         /* @__PURE__ */ 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__ */ jsx(
           "button",
           {
@@ -10595,15 +10789,15 @@ function AutoForm({
   };
   const renderEditView = () => {
     if (layout === "single") {
-      return /* @__PURE__ */ jsx("div", { className: "w-full space-y-8", children: /* @__PURE__ */ jsx("div", { className: "surface-tile p-8 space-y-8", children: config.fields.map((f) => renderField(f)) }) });
+      return /* @__PURE__ */ jsx("div", { className: "w-full space-y-6 md:space-y-8", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("div", { className: "surface-tile p-8 space-y-8", children: config.fields.filter(
+          /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "sticky top-36 h-[calc(100vh-280px)] animate-in fade-in slide-in-from-right-10 duration-700", children: /* @__PURE__ */ 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: [
@@ -10620,9 +10814,18 @@ function AutoForm({
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-transparent pointer-events-none border-[12px] border-[var(--kyro-surface)] rounded-3xl" })
-          ] }) }) : sidebarCollapsed ? null : /* @__PURE__ */ 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__ */ jsxs("div", { className: "surface-tile p-6 space-y-6", children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "hidden lg:block surface-tile p-6 space-y-6", children: [
+              /* @__PURE__ */ 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__ */ jsxs("details", { className: "lg:hidden surface-tile p-4 space-y-4 group", children: [
+              /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "M9 18l6-6-6-6" }) }),
+                "Settings"
+              ] }),
+              /* @__PURE__ */ 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)) })
+            ] })
           ] }) })
         ]
       }
@@ -10874,7 +11077,7 @@ function AutoForm({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("main", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs("main", { className: "w-full pt-6 md:pt-0", children: [
       view === "edit" && renderEditView(),
       view === "version" && renderVersionView(),
       view === "api" && renderApiView()
@@ -10892,9 +11095,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";
@@ -10941,101 +11148,268 @@ function ActionBar({
     if (!dateStr) return "Never";
     return new Date(dateStr).toLocaleString();
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between py-3 px-1", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        onBack && /* @__PURE__ */ 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__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("path", { d: "M19 12H5M12 19l-7-7 7-7" }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto", children: [
+          onPreview && /* @__PURE__ */ 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__ */ jsx(Eye, { className: "w-4 h-4" })
+            }
+          ),
+          onViewHistory && /* @__PURE__ */ 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__ */ jsx(Clock, { className: "w-4 h-4" })
+            }
+          ),
+          onDuplicate && /* @__PURE__ */ 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__ */ jsx(Copy, { className: "w-4 h-4" })
+            }
+          ),
+          onDelete && /* @__PURE__ */ 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__ */ jsx(Trash2, { className: "w-4 h-4" })
+            }
+          ),
+          onToggleSidebar && /* @__PURE__ */ 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__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
+              ] })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
         getStatusBadge(),
         getSaveStatusText() && /* @__PURE__ */ 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__ */ jsx(Spinner, { size: "sm", className: "inline mr-1" }) : null,
               getSaveStatusText()
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-xs space-y-0.5", children: [
-        updatedAt && /* @__PURE__ */ jsxs("div", { className: "text-[var(--kyro-text-muted)]", children: [
-          "Updated: ",
-          formatDate2(updatedAt)
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        status === "draft" && onPublish && /* @__PURE__ */ 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__ */ jsx(Send, { className: "w-4 h-4" }),
+              "Publish"
+            ]
+          }
+        ),
+        status === "published" && onUnpublish && /* @__PURE__ */ 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__ */ jsx(Undo, { className: "w-4 h-4" }),
+              "Unpublish"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(
+          SplitButton,
+          {
+            status,
+            saveStatus,
+            hasChanges,
+            onPublish: onSave,
+            children: [
+              onDuplicate && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+                  children: "Duplicate"
+                }
+              ),
+              onViewHistory && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" }),
+                  children: "View History"
+                }
+              ),
+              onPreview && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" }),
+                  children: "Preview"
+                }
+              ),
+              (onDuplicate || onViewHistory || onPreview) && /* @__PURE__ */ jsx(DropdownSeparator, {}),
+              onDelete && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  onClick: onDelete,
+                  danger: true,
+                  icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
+                  children: "Delete"
+                }
+              )
+            ]
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-row items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          getStatusBadge(),
+          getSaveStatusText() && /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: `text-sm ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`,
+              children: [
+                saveStatus === "saving" ? /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "inline mr-1" }) : null,
+                getSaveStatusText()
+              ]
+            }
+          )
         ] }),
-        publishedAt && status === "published" && /* @__PURE__ */ jsxs("div", { className: "text-[var(--kyro-primary)] font-medium", children: [
-          "Published: ",
-          formatDate2(publishedAt)
+        /* @__PURE__ */ jsxs("div", { className: "text-xs space-y-0.5", children: [
+          updatedAt && /* @__PURE__ */ jsxs("div", { className: "text-[var(--kyro-text-muted)]", children: [
+            "Updated: ",
+            formatDate2(updatedAt)
+          ] }),
+          publishedAt && status === "published" && /* @__PURE__ */ jsxs("div", { className: "text-[var(--kyro-primary)] font-medium", children: [
+            "Published: ",
+            formatDate2(publishedAt)
+          ] })
         ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [
+        status === "draft" && onPublish && /* @__PURE__ */ 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__ */ jsx(Send, { className: "w-4 h-4" }),
+              "Publish"
+            ]
+          }
+        ),
+        status === "published" && onUnpublish && /* @__PURE__ */ 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__ */ jsx(Undo, { className: "w-4 h-4" }),
+              "Unpublish"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SplitButton,
+          {
+            status,
+            saveStatus,
+            hasChanges,
+            onPublish: onSave,
+            children: [
+              onDuplicate && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
+                  children: "Duplicate"
+                }
+              ),
+              onViewHistory && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" }),
+                  children: "View History"
+                }
+              ),
+              onPreview && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" }),
+                  children: "Preview"
+                }
+              ),
+              (onDuplicate || onViewHistory || onPreview) && /* @__PURE__ */ jsx(DropdownSeparator, {}),
+              onDelete && /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  onClick: onDelete,
+                  danger: true,
+                  icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
+                  children: "Delete"
+                }
+              )
+            ]
+          }
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      status === "draft" && onPublish && /* @__PURE__ */ 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__ */ jsx(Send, { className: "w-4 h-4" }),
-            "Publish"
-          ]
-        }
-      ),
-      status === "published" && onUnpublish && /* @__PURE__ */ 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__ */ jsx(Undo, { className: "w-4 h-4" }),
-            "Unpublish"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        SplitButton,
-        {
-          status,
-          saveStatus,
-          hasChanges,
-          onPublish: onSave,
-          children: [
-            onDuplicate && /* @__PURE__ */ jsx(
-              DropdownItem,
-              {
-                icon: /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4" }),
-                children: "Duplicate"
-              }
-            ),
-            onViewHistory && /* @__PURE__ */ jsx(
-              DropdownItem,
-              {
-                icon: /* @__PURE__ */ jsx(Clock, { className: "w-4 h-4" }),
-                children: "View History"
-              }
-            ),
-            onPreview && /* @__PURE__ */ jsx(
-              DropdownItem,
-              {
-                icon: /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" }),
-                children: "Preview"
-              }
-            ),
-            (onDuplicate || onViewHistory || onPreview) && /* @__PURE__ */ jsx(DropdownSeparator, {}),
-            onDelete && /* @__PURE__ */ jsx(
-              DropdownItem,
-              {
-                onClick: onDelete,
-                danger: true,
-                icon: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" }),
-                children: "Delete"
-              }
-            )
-          ]
-        }
-      )
     ] })
   ] });
 }
@@ -11259,7 +11633,27 @@ function DetailView({
         ]
       }
     ),
-    !isSingleLayout && /* @__PURE__ */ jsx(
+    isSingleLayout ? /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ 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__ */ jsx(
       ActionBar,
       {
         status,
@@ -11274,6 +11668,8 @@ function DetailView({
         },
         onPreview: () => window.open(`/preview/${slug}/${documentId}`, "_blank"),
         onDelete: handleDeleteTrigger,
+        onBack,
+        onToggleSidebar: () => window.dispatchEvent(new CustomEvent("toggle-sidebar")),
         publishedAt,
         updatedAt
       }
@@ -11281,9 +11677,9 @@ function DetailView({
     /* @__PURE__ */ 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__ */ jsx("div", { className: "space-y-8 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "surface-tile p-8", children: [
+          /* @__PURE__ */ jsx("div", { className: "space-y-4 md:space-y-8 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: "surface-tile p-4 md:p-8", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-8 px-1", children: [
               /* @__PURE__ */ jsx("h2", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40", children: "Core Configuration" }),
               /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[var(--kyro-border)] ml-6 opacity-30" })
@@ -11325,10 +11721,10 @@ function DetailView({
               )
             ] })
           ] }) }),
-          !isSingleLayout && /* @__PURE__ */ jsxs("div", { className: "space-y-6 animate-in fade-in slide-in-from-right-4 duration-500", children: [
-            /* @__PURE__ */ jsxs("div", { className: "surface-tile p-8", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-6", children: "Metadata" }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+          !isSingleLayout && /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500", children: [
+            /* @__PURE__ */ jsxs("div", { className: "surface-tile p-4 md:p-8", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4 md:mb-6", children: "Metadata" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-4 md:space-y-6", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold  tracking-widest opacity-40", children: "Dynamic Status" }),
                   /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
@@ -11362,9 +11758,9 @@ function DetailView({
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "surface-tile p-8 bg-[var(--kyro-bg-secondary)]", children: [
-              /* @__PURE__ */ jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-4", children: "Quick Links" }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "surface-tile p-4 md:p-8 bg-[var(--kyro-bg-secondary)]", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-[10px] font-bold  tracking-[0.2em] opacity-40 mb-3 md:mb-4", children: "Quick Links" }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-2 md:space-y-3", children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -11451,8 +11847,8 @@ function CreateView({
   ] });
 }
 function Toast({ type, message, onClose }) {
-  const [isPaused, setIsPaused] = React56.useState(false);
-  const timerRef = React56.useRef(null);
+  const [isPaused, setIsPaused] = React.useState(false);
+  const timerRef = React.useRef(null);
   const startTimer = () => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(onClose, 5e3);
@@ -11460,7 +11856,7 @@ function Toast({ type, message, onClose }) {
   const clearTimer = () => {
     if (timerRef.current) clearTimeout(timerRef.current);
   };
-  React56.useEffect(() => {
+  React.useEffect(() => {
     if (!isPaused) {
       startTimer();
     } else {
@@ -11506,14 +11902,19 @@ 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__ */ 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__ */ jsx("div", { style: { pointerEvents: "auto" }, children: /* @__PURE__ */ jsx(Toast, { type: t.type, message: t.message, onClose: () => removeToast(t.id) }) }, t.id)) });
+}
 function LoginPage({ onAuth, theme = "light" }) {
   const [mode, setMode] = useState("login");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [toasts, setToasts] = useState([]);
   const [isFirstUser, setIsFirstUser] = useState(false);
+  const addToast = useToastStore((state) => state.addToast);
   useEffect(() => {
     checkIfFirstUser();
   }, []);
@@ -11525,13 +11926,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);
@@ -11557,7 +11951,7 @@ function LoginPage({ onAuth, theme = "light" }) {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx(ThemeProvider, { defaultMode: theme, children: /* @__PURE__ */ jsx(ToastProvider, { children: /* @__PURE__ */ jsxs("div", { className: "kyro-login-page", children: [
+  return /* @__PURE__ */ jsx(ThemeProvider, { defaultMode: theme, children: /* @__PURE__ */ jsxs("div", { className: "kyro-login-page", children: [
     /* @__PURE__ */ jsxs("div", { className: "kyro-login-container", children: [
       /* @__PURE__ */ jsxs("div", { className: "kyro-login-header", children: [
         /* @__PURE__ */ jsx("h1", { className: "kyro-login-title", children: isFirstUser ? "Create Admin Account" : mode === "login" ? "Sign In" : "Create Account" }),
@@ -11647,16 +12041,8 @@ function LoginPage({ onAuth, theme = "light" }) {
         )
       ] }) }) })
     ] }),
-    toasts.map((toast2) => /* @__PURE__ */ jsx(
-      Toast,
-      {
-        type: toast2.type,
-        message: toast2.message,
-        onClose: () => setToasts((prev) => prev.filter((t) => t.id !== toast2.id))
-      },
-      toast2.id
-    ))
-  ] }) }) });
+    /* @__PURE__ */ jsx(Toaster, {})
+  ] }) });
 }
 function Dashboard({ collections: collections2, onNavigate, user }) {
   const { permissions } = useAuthStore();
@@ -12078,7 +12464,7 @@ function UserManagement() {
   const filteredUsers = users.filter(
     (u) => u.email.toLowerCase().includes(searchQuery.toLowerCase()) || u.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx(
       PageHeader,
       {
@@ -12116,8 +12502,8 @@ function UserManagement() {
         /* @__PURE__ */ jsx("button", { className: "px-4 py-1.5 text-[10px] font-bold tracking-widest opacity-40 hover:opacity-100 transition-all", children: "LOCKED" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "surface-tile overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left table-fixed", children: [
-      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-[var(--kyro-text-secondary)] font-bold text-[9px]  tracking-[0.2em] uppercase border-b border-[var(--kyro-border)]", children: [
+    /* @__PURE__ */ jsx("div", { className: "surface-tile overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ 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__ */ jsx("th", { className: "px-6 py-4 w-64", children: "Member Identity" }),
         /* @__PURE__ */ jsx("th", { className: "px-6 py-4", children: "Administrative Role" }),
         /* @__PURE__ */ jsx("th", { className: "px-6 py-4", children: "Security Status" }),
@@ -12848,6 +13234,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);
@@ -13076,12 +13463,12 @@ function WebhookManager() {
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "grid sm:grid-cols-3 gap-6 pt-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-6 pt-2", children: [
                 /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
                   /* @__PURE__ */ jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest opacity-30", children: "Destination" }),
                   /* @__PURE__ */ jsx("div", { className: "font-mono text-xs opacity-60 truncate max-w-[200px]", title: webhook.url, children: webhook.url })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-l border-[var(--kyro-border)] pl-6", children: [
+                /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest opacity-30", children: "Events" }),
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
                     webhook.events.slice(0, 2).map((event) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-[8px] font-bold px-1.5 opacity-60", children: event }, event)),
@@ -13092,7 +13479,7 @@ function WebhookManager() {
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-l border-[var(--kyro-border)] pl-6", children: [
+                /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[9px] font-bold uppercase tracking-widest opacity-30", children: "Activity" }),
                   /* @__PURE__ */ jsxs("div", { className: "text-[10px] font-bold opacity-60 flex items-center gap-1.5", children: [
                     /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" }),
@@ -13195,7 +13582,7 @@ function WebhookManager() {
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
                 /* @__PURE__ */ jsx("label", { className: "block text-xs font-bold mb-1.5 text-[var(--kyro-text-secondary)] uppercase tracking-wider", children: "Subscribed Events" }),
-                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-4", children: eventOptions.map((opt) => /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: eventOptions.map((opt) => /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
@@ -13711,8 +14098,6 @@ function Admin({ config, theme = "light", onThemeChange }) {
   const [currentView, setCurrentView] = useState("list");
   const [activeDocumentId, setActiveDocumentId] = useState(null);
   const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
-  const toasts = useToastStore((state) => state.toasts);
-  const removeToast = useToastStore((state) => state.removeToast);
   useEffect(() => {
     const checkAuth = async () => {
       try {
@@ -13748,7 +14133,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__ */ jsx(
@@ -13834,15 +14223,7 @@ function Admin({ config, theme = "light", onThemeChange }) {
       renderContent()
     ] }) }) }),
     /* @__PURE__ */ jsx(GlobalModal, {}),
-    /* @__PURE__ */ jsx("div", { className: "kyro-toasts-container", children: toasts.map((t) => /* @__PURE__ */ jsx(
-      Toast,
-      {
-        type: t.type,
-        message: t.message,
-        onClose: () => removeToast(t.id)
-      },
-      t.id
-    )) })
+    /* @__PURE__ */ jsx(Toaster, {})
   ] }) });
 }
 function BulkActionsBar({