@kyro-cms/admin 0.9.5 → 0.9.7

package/dist/index.js

@@ -1,7 +1,7 @@
 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, 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 { 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, EllipsisVertical, 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';
@@ -1025,7 +1025,7 @@ 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 w-full lg:max-w-md", 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",
           {
@@ -2735,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." }),
@@ -3882,7 +3882,9 @@ function RichTextField({
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
-        codeBlock: true
+        codeBlock: true,
+        link: false,
+        underline: false
       }),
       Link4.configure({
         openOnClick: false
@@ -3902,7 +3904,7 @@ function RichTextField({
       TextStyle,
       Color
     ],
-    content: value || {},
+    content: value || { type: "doc", content: [] },
     editable: !disabled,
     onUpdate: ({ editor: editor2 }) => {
       onChange(editor2.getJSON());
@@ -6294,7 +6296,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" })
           }
@@ -6404,7 +6406,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" })
           }
@@ -6453,7 +6455,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" })
           }
@@ -6552,7 +6554,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" })
           }
@@ -6798,7 +6800,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" })
           }
@@ -6850,7 +6852,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" })
           }
@@ -7637,7 +7639,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"
                     }
                   ),
@@ -7660,8 +7662,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" })
               }
             )
           ]
@@ -7858,7 +7860,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"
                     }
                   ),
@@ -7881,8 +7883,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)]" })
               }
             )
           ]
@@ -8015,7 +8017,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" })
           }
@@ -8243,7 +8245,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" })
           }
@@ -8460,7 +8462,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" })
           }
@@ -8660,7 +8662,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"
                 }
               ),
@@ -8695,7 +8697,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" })
                 }
@@ -8759,7 +8761,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"
                   }
                 ),
@@ -8796,7 +8798,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" })
               }
@@ -8986,7 +8988,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;
@@ -9663,7 +9665,7 @@ function SplitButton({
     if (saveStatus === "saved") return `${btnBase} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-[var(--kyro-sidebar-text-active)]`;
     if (saveStatus === "error") return `${btnBase} bg-[var(--kyro-error)]   border-[var(--kyro-error)]   text-[var(--kyro-sidebar-text-active)]`;
     if (isPublishedIdle) return `${btnBase} bg-[var(--kyro-gray-200)] border-[var(--kyro-gray-200)] text-[var(--kyro-text-muted)] cursor-not-allowed`;
-    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] hover:bg-[var(--kyro-primary-hover)]`;
+    return `${btnBase} bg-[var(--kyro-primary)] border-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] hover:bg-[var(--kyro-primary-hover)]`;
   };
   const chevronBase = "kyro-btn kyro-btn-md px-2 rounded-l-none border-l-[1px] border-white/20 transition-all duration-300";
   const getChevronClass = () => {
@@ -10464,338 +10466,443 @@ function AutoForm({
     const createdAt = formData.createdAt ? new Date(formData.createdAt).toLocaleString() : "Just now";
     !formData.id || documentStatus === "draft";
     const statusLabel = hasUnpublishedChanges ? "Draft (unpublished changes)" : docStatus === "published" ? "Published" : "Draft";
+    const statusLabelMobile = hasUnpublishedChanges ? "Unpublished" : 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-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: [
+    const renderAutoSaveStatus = (compact = false) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      autoSaveStatus === "saving" && /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[var(--kyro-text-muted)]", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "animate-spin h-3 w-3 shrink-0",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                }
+              )
+            ]
+          }
+        ),
+        compact ? "Saving\u2026" : "Saving draft..."
+      ] }),
+      autoSaveStatus === "success" && /* @__PURE__ */ jsxs("span", { className: "text-[var(--kyro-success)] flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 shrink-0" }),
+        compact ? "Saved" : lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 6e4)}m ago` : "Draft saved"
+      ] }),
+      autoSaveStatus === "retrying" && /* @__PURE__ */ jsxs("span", { className: "text-[var(--kyro-warning)] flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-3 w-3 shrink-0", viewBox: "0 0 24 24", fill: "none", children: [
+          /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+        ] }),
+        compact ? `Retry ${retryCount}/5` : `Retrying save (${retryCount}/5)`
+      ] }),
+      autoSaveStatus === "offline" && /* @__PURE__ */ jsxs("span", { className: "text-[var(--kyro-text-muted)] flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0", children: [
+          /* @__PURE__ */ jsx("path", { d: "M10.61 10.61a3 3 0 0 0 4.24 4.24" }),
+          /* @__PURE__ */ jsx("path", { d: "M13.36 13.36a3 3 0 0 0-4.24-4.24" }),
+          /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" }),
+          /* @__PURE__ */ jsx("path", { d: "M18.36 5.64a9 9 0 0 0-12.72 0" }),
+          /* @__PURE__ */ jsx("path", { d: "M22.61 1.39a15 15 0 0 0-21.22 0" })
+        ] }),
+        compact ? "Offline" : "Offline \u2014 cached locally"
+      ] }),
+      autoSaveStatus === "error" && /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-danger)]", children: compact ? "Failed" : "Draft save failed" }),
+      autoSaveStatus === "conflict" && (compact ? /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-danger)] font-semibold", children: "Conflict" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-danger)] font-semibold", children: "Conflict detected" }),
+        /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "\u2014" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: async () => {
+              await saveDocument(formData);
+              setAutoSaveStatus("success");
+            },
+            className: "text-[var(--kyro-primary)] hover:underline",
+            children: "Keep my changes"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "|" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              window.location.reload();
+            },
+            className: "text-[var(--kyro-danger)] hover:underline",
+            children: "Reload server version"
+          }
+        )
+      ] }))
+    ] });
+    const renderKebabMenu = () => !isNew && /* @__PURE__ */ jsxs(
+      Dropdown,
+      {
+        trigger: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "kyro-btn p-2 md:p-2.5 rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)] transition-all",
+            title: "More actions",
+            children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.5" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.5" })
+            ] })
+          }
+        ),
+        direction: "down",
+        children: [
+          !globalSlug && /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              onClick: handleCreateNew,
+              icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+              ] }),
+              children: "Create New"
+            }
+          ),
+          !globalSlug && /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              onClick: handleDuplicate,
+              icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] }),
+              children: "Duplicate"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              onClick: () => setShowSchedulePicker(true),
+              icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+                /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+              ] }),
+              children: "Schedule Publish"
+            }
+          ),
+          documentStatus === "published" && /* @__PURE__ */ jsx(
+            DropdownItem,
+            {
+              onClick: handleUnpublish,
+              icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+                /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+              ] }),
+              children: "Unpublish"
+            }
+          ),
+          !globalSlug && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownSeparator, {}),
+            /* @__PURE__ */ jsx(
+              DropdownItem,
+              {
+                onClick: handleDelete,
+                danger: true,
+                icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+                  /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+                ] }),
+                children: "Delete"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+    const renderSchedulePicker = () => showSchedulePicker && /* @__PURE__ */ jsx("div", { ref: scheduleRef, className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-2 p-4 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50 min-w-[260px]", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-medium mb-2", children: "Schedule Publish" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "datetime-local",
+          id: "schedule-datetime",
+          className: "kyro-form-input text-xs mb-3 w-full",
+          min: (/* @__PURE__ */ new Date()).toISOString().slice(0, 16)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 justify-end", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowSchedulePicker(false),
+            className: "px-3 py-1.5 text-xs kyro-btn rounded-lg",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              const val = document.getElementById("schedule-datetime")?.value;
+              if (val) handleSchedulePublish(val);
+            },
+            className: "px-3 py-1.5 text-xs kyro-btn-success rounded-lg",
+            children: "Schedule"
+          }
+        )
+      ] })
+    ] }) });
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("header", { className: "md:hidden border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)] backdrop-blur-md rounded-lg", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
           /* @__PURE__ */ jsx(
             "a",
             {
               href: `/${collectionSlug}`,
-              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",
+              className: "p-1.5 rounded-lg hover:bg-[var(--kyro-bg-secondary)] transition-colors shrink-0",
+              "aria-label": "Back to list",
               children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
             }
           ),
-          /* @__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 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",
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-base font-bold tracking-tight truncate min-w-0", children: docTitle }),
+            /* @__PURE__ */ jsxs("span", { className: `shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[9px] font-medium border ${statusBadgeBg}`, children: [
+              /* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 rounded-full ${statusColor}` }),
+              statusLabelMobile
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+            /* @__PURE__ */ jsx(
+              SplitButton,
               {
-                className: "animate-spin h-3 w-3",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "circle",
-                    {
-                      className: "opacity-25",
-                      cx: "12",
-                      cy: "12",
-                      r: "10",
-                      stroke: "currentColor",
-                      strokeWidth: "4"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      className: "opacity-75",
-                      fill: "currentColor",
-                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                    }
-                  )
-                ]
+                status: documentStatus,
+                saveStatus: localSaveStatus,
+                hasChanges: hasUnsavedChanges,
+                onPublish: handlePublish,
+                disabled: localSaveStatus === "saving"
               }
             ),
-            "Saving draft..."
-          ] }),
-          autoSaveStatus === "success" && /* @__PURE__ */ jsxs("span", { className: "text-[var(--kyro-success)] flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" }),
-            lastSavedAt ? `Saved ${Math.floor((Date.now() - lastSavedAt) / 6e4)}m ago` : "Draft saved"
-          ] }),
-          autoSaveStatus === "retrying" && /* @__PURE__ */ jsxs("span", { className: "text-[var(--kyro-warning)] flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: [
-              /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-            ] }),
-            "Retrying save (",
-            retryCount,
-            "/5)"
-          ] }),
-          autoSaveStatus === "offline" && /* @__PURE__ */ jsxs("span", { className: "text-[var(--kyro-text-muted)] flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx("path", { d: "M10.61 10.61a3 3 0 0 0 4.24 4.24" }),
-              /* @__PURE__ */ jsx("path", { d: "M13.36 13.36a3 3 0 0 0-4.24-4.24" }),
-              /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" }),
-              /* @__PURE__ */ jsx("path", { d: "M18.36 5.64a9 9 0 0 0-12.72 0" }),
-              /* @__PURE__ */ jsx("path", { d: "M22.61 1.39a15 15 0 0 0-21.22 0" })
-            ] }),
-            "Offline \u2014 cached locally"
-          ] }),
-          autoSaveStatus === "error" && /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-danger)]", children: "Draft save failed" }),
-          autoSaveStatus === "conflict" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-danger)] font-semibold", children: "Conflict detected" }),
-            /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "\u2014" }),
-            /* @__PURE__ */ jsx(
+            renderKebabMenu(),
+            renderSchedulePicker()
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1.5 border-t border-[var(--kyro-border)]/50 bg-[var(--kyro-bg-secondary)]/30", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 bg-[var(--kyro-bg-secondary)] p-0.5 rounded-lg border border-[var(--kyro-border)]/50", children: ["edit", "version", "api"].map((v) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setView(v),
+              className: `px-3 py-1 text-[10px] 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 active:opacity-100"}`,
+              children: v === "edit" ? "Edit" : v === "version" ? "History" : "API"
+            },
+            v
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[10px] font-medium", children: [
+            renderAutoSaveStatus(true),
+            hasUnsavedChanges && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "conflict" && /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: async () => {
-                  await saveDocument(formData);
-                  setAutoSaveStatus("success");
+                  setFormData(lastSavedData);
+                  markSaved();
                 },
-                className: "text-[var(--kyro-primary)] hover:underline",
-                children: "Keep my changes"
+                className: "text-[var(--kyro-primary)] text-[10px] font-medium hover:underline",
+                children: "Revert"
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "|" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--kyro-border)] mx-0.5" }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                onClick: () => {
-                  window.location.reload();
-                },
-                className: "text-[var(--kyro-danger)] hover:underline",
-                children: "Reload server version"
+                onClick: () => setShowPreview(!showPreview),
+                className: `p-1.5 rounded-lg transition-all ${showPreview ? "bg-[var(--kyro-primary)]/10 text-[var(--kyro-primary)]" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`,
+                title: "Live Preview",
+                children: /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5" })
               }
             )
-          ] }),
-          hasUnsavedChanges && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "conflict" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "\u2014" }),
+          ] })
+        ] }),
+        autoSaveStatus === "conflict" && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-t border-[var(--kyro-danger)]/30 bg-[var(--kyro-danger)]/5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-[var(--kyro-danger)]", children: "Conflict detected" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
                 onClick: async () => {
-                  setFormData(lastSavedData);
-                  markSaved();
+                  await saveDocument(formData);
+                  setAutoSaveStatus("success");
                 },
-                className: "text-[var(--kyro-primary)] hover:underline",
-                children: "Revert changes"
+                className: "text-[11px] font-medium text-[var(--kyro-primary)] hover:underline",
+                children: "Keep mine"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--kyro-text-muted)] opacity-30", children: "|" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => window.location.reload(),
+                className: "text-[11px] font-medium text-[var(--kyro-danger)] hover:underline",
+                children: "Reload"
               }
             )
-          ] }),
-          lastSavedAt && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "success" && /* @__PURE__ */ jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
-            "Draft saved ",
-            (() => {
-              const diffMs = now - lastSavedAt;
-              const diffMin = Math.floor(diffMs / 6e4);
-              const diffSec = Math.floor(diffMs / 1e3);
-              if (diffMin >= 1) return `${diffMin}m ago`;
-              if (diffSec >= 5) return `${diffSec}s ago`;
-              return "just now";
-            })()
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
-            "Modified ",
-            lastModified
-          ] }),
-          /* @__PURE__ */ jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
-            "Created ",
-            createdAt
           ] })
         ] })
       ] }),
-      /* @__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",
-          {
-            type: "button",
-            onClick: () => setView(v),
-            className: `px-5 py-2 text-xs font-bold rounded-lg 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.toUpperCase()
-          },
-          v
-        )) }),
-        /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-[var(--kyro-border)] mx-2" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              onClick: () => setShowPreview(!showPreview),
-              className: `kyro-btn p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`,
-              title: "Live Preview",
-              children: [
-                /* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4" }),
-                showPreview && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold  tracking-widest pr-1", children: "Active" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                window.dispatchEvent(new CustomEvent("toggle-sidebar"));
-              },
-              className: `kyro-btn p-2.5 rounded-xl transition-all ${sidebarCollapsed ? "" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`,
-              title: "Toggle Sidebar",
-              children: /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  width: "20",
-                  height: "20",
-                  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(
-            SplitButton,
-            {
-              status: documentStatus,
-              saveStatus: localSaveStatus,
-              hasChanges: hasUnsavedChanges,
-              onPublish: handlePublish,
-              disabled: localSaveStatus === "saving"
-            }
-          ),
-          !isNew && /* @__PURE__ */ jsxs(
-            Dropdown,
-            {
-              trigger: /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "kyro-btn p-2.5 rounded-xl border border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)] transition-all",
-                  title: "More actions",
-                  children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: [
-                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1.5" }),
-                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
-                    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1.5" })
-                  ] })
-                }
-              ),
-              direction: "down",
-              children: [
-                !globalSlug && /* @__PURE__ */ jsx(
-                  DropdownItem,
-                  {
-                    onClick: handleCreateNew,
-                    icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-                      /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-                    ] }),
-                    children: "Create New"
-                  }
-                ),
-                !globalSlug && /* @__PURE__ */ jsx(
-                  DropdownItem,
-                  {
-                    onClick: handleDuplicate,
-                    icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-                      /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-                    ] }),
-                    children: "Duplicate"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  DropdownItem,
-                  {
-                    onClick: () => setShowSchedulePicker(true),
-                    icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
-                      /* @__PURE__ */ jsx("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
-                      /* @__PURE__ */ jsx("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
-                      /* @__PURE__ */ jsx("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
-                    ] }),
-                    children: "Schedule Publish"
-                  }
-                ),
-                documentStatus === "published" && /* @__PURE__ */ jsx(
-                  DropdownItem,
-                  {
-                    onClick: handleUnpublish,
-                    icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                      /* @__PURE__ */ jsx("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
-                      /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
-                    ] }),
-                    children: "Unpublish"
-                  }
-                ),
-                !globalSlug && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(DropdownSeparator, {}),
-                  /* @__PURE__ */ jsx(
-                    DropdownItem,
-                    {
-                      onClick: handleDelete,
-                      danger: true,
-                      icon: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                        /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
-                        /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
-                      ] }),
-                      children: "Delete"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          showSchedulePicker && /* @__PURE__ */ jsx("div", { ref: scheduleRef, className: "relative", children: /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-2 p-4 rounded-lg border border-[var(--kyro-border)] bg-[var(--kyro-surface)] shadow-2xl z-50", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium mb-2", children: "Schedule Publish" }),
+      /* @__PURE__ */ jsxs("header", { className: "hidden md:flex surface-tile px-8 py-6 items-center justify-between sticky top-0 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 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap min-w-0", children: [
             /* @__PURE__ */ jsx(
-              "input",
+              "a",
               {
-                type: "datetime-local",
-                id: "schedule-datetime",
-                className: "kyro-form-input text-xs mb-3 w-full",
-                min: (/* @__PURE__ */ new Date()).toISOString().slice(0, 16)
+                href: `/${collectionSlug}`,
+                className: "p-2 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__ */ jsxs("div", { className: "flex items-center gap-2 justify-end", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => setShowSchedulePicker(false),
-                  className: "px-3 py-1.5 text-xs kyro-btn rounded-lg",
-                  children: "Cancel"
-                }
-              ),
+            /* @__PURE__ */ jsx("h1", { className: "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: [
+            renderAutoSaveStatus(false),
+            hasUnsavedChanges && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "conflict" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "opacity-30", children: "\u2014" }),
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: () => {
-                    const val = document.getElementById("schedule-datetime")?.value;
-                    if (val) handleSchedulePublish(val);
+                  onClick: async () => {
+                    setFormData(lastSavedData);
+                    markSaved();
                   },
-                  className: "px-3 py-1.5 text-xs kyro-btn-success rounded-lg",
-                  children: "Schedule"
+                  className: "text-[var(--kyro-primary)] hover:underline",
+                  children: "Revert changes"
                 }
               )
+            ] }),
+            lastSavedAt && autoSaveStatus !== "saving" && autoSaveStatus !== "retrying" && autoSaveStatus !== "success" && /* @__PURE__ */ jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
+              "Draft saved ",
+              (() => {
+                const diffMs = now - lastSavedAt;
+                const diffMin = Math.floor(diffMs / 6e4);
+                const diffSec = Math.floor(diffMs / 1e3);
+                if (diffMin >= 1) return `${diffMin}m ago`;
+                if (diffSec >= 5) return `${diffSec}s ago`;
+                return "just now";
+              })()
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
+              "Modified ",
+              lastModified
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "border-l border-[var(--kyro-border)] pl-4", children: [
+              "Created ",
+              createdAt
             ] })
-          ] }) })
-        ] })
-      ] })
-    ] });
-  };
-  const renderEditView = () => {
-    if (layout === "single") {
-      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-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]"}`,
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "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",
+            {
+              type: "button",
+              onClick: () => setView(v),
+              className: `px-5 py-2 text-xs font-bold rounded-lg 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.toUpperCase()
+            },
+            v
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-[var(--kyro-border)] mx-2" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowPreview(!showPreview),
+                className: `kyro-btn p-2.5 rounded-xl transition-all flex items-center gap-2 ${showPreview ? "shadow-lg" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`,
+                title: "Live Preview",
+                children: [
+                  /* @__PURE__ */ jsx(ExternalLink, { className: "w-4 h-4" }),
+                  showPreview && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold  tracking-widest pr-1", children: "Active" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  window.dispatchEvent(new CustomEvent("toggle-sidebar"));
+                },
+                className: `kyro-btn p-2.5 rounded-xl transition-all ${sidebarCollapsed ? "" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-bg-secondary)]"}`,
+                title: "Toggle Sidebar",
+                children: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    width: "20",
+                    height: "20",
+                    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(
+              SplitButton,
+              {
+                status: documentStatus,
+                saveStatus: localSaveStatus,
+                hasChanges: hasUnsavedChanges,
+                onPublish: handlePublish,
+                disabled: localSaveStatus === "saving"
+              }
+            ),
+            renderKebabMenu(),
+            renderSchedulePicker()
+          ] })
+        ] })
+      ] })
+    ] });
+  };
+  const renderEditView = () => {
+    if (layout === "single") {
+      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-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-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"
@@ -10814,27 +10921,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-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)) })
-            ] })
+          ] }) }) : 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("div", { className: "surface-tile p-4 md:p-6 space-y-4 md: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))
           ] }) })
         ]
       }
     );
   };
   const renderVersionView = () => /* @__PURE__ */ jsx("div", { className: "w-full animate-in fade-in slide-in-from-bottom-4 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "surface-tile p-0 overflow-hidden", children: [
-    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-b border-[var(--kyro-border)] flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 md:px-6 py-3 md:py-4 border-b border-[var(--kyro-border)] flex flex-col md:flex-row md:items-center justify-between gap-2", children: [
       /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-lg font-bold text-[var(--kyro-text-primary)]", children: "Version History" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-base md:text-lg font-bold text-[var(--kyro-text-primary)]", children: "Version History" }),
         /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[var(--kyro-text-muted)] mt-0.5", children: compareMode ? `Select 2 versions \xB7 ${compareSelected.length}/2 chosen` : `${versions.length} snapshot${versions.length !== 1 ? "s" : ""} \xB7 Auto-saved` })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -10883,11 +10981,14 @@ function AutoForm({
       /* @__PURE__ */ jsx("div", { className: "max-h-[400px] overflow-y-auto", children: compareDiffs.map((d, i) => /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "grid grid-cols-4 gap-3 px-6 py-2.5 text-[11px] font-mono border-t border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)]",
+          className: "flex flex-col md:grid md:grid-cols-4 gap-1 md:gap-3 px-4 md:px-6 py-2.5 text-[11px] font-mono border-t border-[var(--kyro-border)] hover:bg-[var(--kyro-bg-secondary)]",
           children: [
-            /* @__PURE__ */ jsx("div", { className: "text-[var(--kyro-text-muted)] truncate", children: d.field }),
-            /* @__PURE__ */ jsx("div", { className: "text-[var(--kyro-text-muted)] truncate", children: typeof d.oldValue === "object" ? JSON.stringify(d.oldValue) : String(d.oldValue ?? "null") }),
-            /* @__PURE__ */ jsx("div", { className: "col-span-2 text-[var(--kyro-text-primary)] truncate", children: typeof d.newValue === "object" ? JSON.stringify(d.newValue) : String(d.newValue ?? "null") })
+            /* @__PURE__ */ jsx("div", { className: "text-[var(--kyro-text-muted)] truncate font-semibold md:font-normal", children: d.field }),
+            /* @__PURE__ */ jsx("div", { className: "text-[var(--kyro-text-muted)] truncate hidden md:block", children: typeof d.oldValue === "object" ? JSON.stringify(d.oldValue) : String(d.oldValue ?? "null") }),
+            /* @__PURE__ */ jsxs("div", { className: "md:col-span-2 text-[var(--kyro-text-primary)] truncate", children: [
+              /* @__PURE__ */ jsx("span", { className: "md:hidden text-[var(--kyro-text-muted)]", children: "\u2192 " }),
+              typeof d.newValue === "object" ? JSON.stringify(d.newValue) : String(d.newValue ?? "null")
+            ] })
           ]
         },
         i
@@ -10895,58 +10996,108 @@ function AutoForm({
     ] }),
     loadingVersions ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-16", children: /* @__PURE__ */ jsx("span", { className: "animate-spin text-[var(--kyro-primary)]", children: "\u231B" }) }) : versions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-16 text-[var(--kyro-text-muted)] text-sm italic", children: "No versions yet." }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-[var(--kyro-border)]", children: versions.map((v, i) => {
       const isSelected = compareSelected.includes(v.id);
-      const isDraftVersion = v.status === "draft";
+      v.status === "draft";
       const isAutoSaved = (v.changeDescription || "").toLowerCase().includes("auto");
       return /* @__PURE__ */ jsxs(
         "div",
         {
           onClick: compareMode ? () => toggleCompareSelection(v.id) : void 0,
-          className: `grid grid-cols-12 gap-3 px-6 py-3 items-center transition-all ${compareMode ? isSelected ? "bg-[var(--kyro-primary)]/5 cursor-pointer" : "hover:bg-[var(--kyro-bg-secondary)] cursor-pointer" : "hover:bg-[var(--kyro-bg-secondary)]"} ${isDraftVersion ? "" : ""}`,
+          className: `transition-all ${compareMode ? isSelected ? "bg-[var(--kyro-primary)]/5 cursor-pointer" : "hover:bg-[var(--kyro-bg-secondary)] cursor-pointer" : "hover:bg-[var(--kyro-bg-secondary)]"}`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: "col-span-1 flex items-center gap-2", children: compareMode ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: `w-4 h-4 rounded-full border ${isSelected ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]" : "border-[var(--kyro-border)]"}`,
-                children: isSelected && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" })
-              }
-            ) : /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-[var(--kyro-text-muted)] w-5", children: versions.length - i }) }),
-            /* @__PURE__ */ jsxs("div", { className: "col-span-4 min-w-0", children: [
-              /* @__PURE__ */ jsxs("div", { className: "text-[13px] font-medium text-[var(--kyro-text-primary)] truncate flex items-center gap-2", children: [
-                v.changeDescription || "Snapshot",
-                isAutoSaved && /* @__PURE__ */ jsx("span", { className: "text-[9px] px-1.5 py-0.5 bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] rounded font-bold  tracking-wider", children: "Auto" })
+            /* @__PURE__ */ jsxs("div", { className: "hidden md:grid grid-cols-12 gap-3 px-6 py-3 items-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "col-span-1 flex items-center gap-2", children: compareMode ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `w-4 h-4 rounded-full border ${isSelected ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]" : "border-[var(--kyro-border)]"}`,
+                  children: isSelected && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" })
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-[var(--kyro-text-muted)] w-5", children: versions.length - i }) }),
+              /* @__PURE__ */ jsxs("div", { className: "col-span-4 min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-[13px] font-medium text-[var(--kyro-text-primary)] truncate flex items-center gap-2", children: [
+                  v.changeDescription || "Snapshot",
+                  isAutoSaved && /* @__PURE__ */ jsx("span", { className: "text-[9px] px-1.5 py-0.5 bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] rounded font-bold  tracking-wider", children: "Auto" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "text-[11px] text-[var(--kyro-text-muted)]", children: new Date(v.createdAt).toLocaleString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  hour: "2-digit",
+                  minute: "2-digit"
+                }) })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-[var(--kyro-text-muted)]", children: new Date(v.createdAt).toLocaleString("en-US", {
-                month: "short",
-                day: "numeric",
-                hour: "2-digit",
-                minute: "2-digit"
-              }) })
+              /* @__PURE__ */ jsx("div", { className: "col-span-3", children: v.status && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: `inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold capitalize tracking-wider ${v.status === "published" ? " text-[var(--kyro-success)]" : " text-[var(--kyro-warning)]"}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `w-1.5 h-1.5 rounded-full ${v.status === "published" ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`
+                      }
+                    ),
+                    v.status
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "col-span-2 text-[11px] text-[var(--kyro-text-muted)]", children: v.createdBy || "system" }),
+              /* @__PURE__ */ jsx("div", { className: "col-span-2 flex justify-end", children: !compareMode && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleRestoreVersion(v.id),
+                  className: "px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[11px] font-bold tracking-wider text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] transition-all active:scale-95",
+                  children: "Restore"
+                }
+              ) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "col-span-3", children: v.status && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: `inline-flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold capitalize tracking-wider ${v.status === "published" ? " text-[var(--kyro-success)]" : " text-[var(--kyro-warning)]"}`,
-                children: [
-                  /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("div", { className: "md:hidden flex items-start gap-3 px-4 py-3", children: [
+              /* @__PURE__ */ jsx("div", { className: "pt-0.5 shrink-0", children: compareMode ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `w-4 h-4 rounded-full border ${isSelected ? "border-[var(--kyro-primary)] bg-[var(--kyro-primary)]" : "border-[var(--kyro-border)]"}`,
+                  children: isSelected && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4" })
+                }
+              ) : /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-[var(--kyro-text-muted)] w-5 inline-block text-center", children: versions.length - i }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-[13px] font-medium text-[var(--kyro-text-primary)] truncate flex items-center gap-1.5", children: [
+                  v.changeDescription || "Snapshot",
+                  isAutoSaved && /* @__PURE__ */ jsx("span", { className: "text-[9px] px-1 py-0.5 bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] rounded font-bold tracking-wider shrink-0", children: "Auto" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1 flex-wrap", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[11px] text-[var(--kyro-text-muted)]", children: new Date(v.createdAt).toLocaleString("en-US", {
+                    month: "short",
+                    day: "numeric",
+                    hour: "2-digit",
+                    minute: "2-digit"
+                  }) }),
+                  v.status && /* @__PURE__ */ jsxs(
                     "span",
                     {
-                      className: `w-1.5 h-1.5 rounded-full ${v.status === "published" ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`
+                      className: `inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[9px] font-bold capitalize tracking-wider ${v.status === "published" ? "text-[var(--kyro-success)]" : "text-[var(--kyro-warning)]"}`,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `w-1 h-1 rounded-full ${v.status === "published" ? "bg-[var(--kyro-success)]" : "bg-[var(--kyro-warning)]"}`
+                          }
+                        ),
+                        v.status
+                      ]
                     }
                   ),
-                  v.status
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: "col-span-2 text-[11px] text-[var(--kyro-text-muted)]", children: v.createdBy || "system" }),
-            /* @__PURE__ */ jsx("div", { className: "col-span-2 flex justify-end", children: !compareMode && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => handleRestoreVersion(v.id),
-                className: "px-3 py-1.5 rounded-lg border border-[var(--kyro-border)] text-[11px] font-bold tracking-wider text-[var(--kyro-text-secondary)] kyro-btn-primary hover:border-[var(--kyro-primary)] transition-all active:scale-95",
-                children: "Restore"
-              }
-            ) })
+                  /* @__PURE__ */ jsx("span", { className: "text-[10px] text-[var(--kyro-text-muted)] opacity-60", children: v.createdBy || "system" })
+                ] })
+              ] }),
+              !compareMode && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleRestoreVersion(v.id),
+                  className: "shrink-0 px-2.5 py-1 rounded-lg border border-[var(--kyro-border)] text-[10px] font-bold tracking-wider text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:border-[var(--kyro-primary)] transition-all active:scale-95",
+                  children: "Restore"
+                }
+              )
+            ] })
           ]
         },
         v.id
@@ -11084,6 +11235,12 @@ function AutoForm({
     ] })
   ] });
 }
+var STATUS_DOT = {
+  draft: "bg-[var(--kyro-warning)]",
+  published: "bg-[var(--kyro-success)]",
+  scheduled: "bg-[var(--kyro-primary)]",
+  archived: "bg-[var(--kyro-text-muted)]"
+};
 function ActionBar({
   status,
   saveStatus,
@@ -11102,314 +11259,147 @@ function ActionBar({
 }) {
   const view = useAutoFormStore((s) => s.view) || "edit";
   const setView = useAutoFormStore((s) => s.setView);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef(null);
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (moreRef.current && !moreRef.current.contains(e.target)) setMoreOpen(false);
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, []);
   const getSaveStatusText = () => {
     if (saveStatus === "saving") return "Saving...";
     if (saveStatus === "saved") return "Saved";
     if (saveStatus === "error") return "Error saving";
-    if (hasChanges) return "Unsaved changes";
+    if (hasChanges) return "Unsaved";
     return null;
   };
-  const getStatusBadge = () => {
-    const statusConfig2 = {
-      draft: {
-        label: "Draft",
-        class: "bg-gray-100 text-gray-600 border-gray-200",
-        icon: /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3" })
-      },
-      published: {
-        label: "Published",
-        class: "bg-green-100 text-green-700 border-green-200",
-        icon: /* @__PURE__ */ jsx(Send, { className: "w-3 h-3" })
-      },
-      scheduled: {
-        label: "Scheduled",
-        class: "bg-blue-100 text-blue-700 border-blue-200",
-        icon: /* @__PURE__ */ jsx(Clock, { className: "w-3 h-3" })
-      },
-      archived: {
-        label: "Archived",
-        class: "bg-yellow-100 text-yellow-700 border-yellow-200",
-        icon: /* @__PURE__ */ jsx(Archive, { className: "w-3 h-3" })
-      }
-    };
-    const config = statusConfig2[status];
-    return /* @__PURE__ */ jsxs(
-      "span",
+  const tabs = ["edit", "version", "api"];
+  const saveText = getSaveStatusText();
+  const iconBtnClass = "p-1.5 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)] transition-all shrink-0";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)] w-full overflow-x-auto", children: [
+    onBack && /* @__PURE__ */ jsx("button", { type: "button", onClick: onBack, className: "p-1 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all shrink-0", 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__ */ jsx("div", { className: `w-2 h-2 rounded-full shrink-0 ${STATUS_DOT[status] || "bg-[var(--kyro-text-muted)]"}` }),
+    saveText && /* @__PURE__ */ jsxs("span", { className: `text-[10px] whitespace-nowrap max-md:hidden ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`, children: [
+      saveStatus === "saving" && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "inline mr-0.5" }),
+      saveText
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 bg-[var(--kyro-bg-secondary)] p-0.5 rounded-lg border border-[var(--kyro-border)] shrink-0 max-md:hidden", children: tabs.map((v) => /* @__PURE__ */ jsx(
+      "button",
       {
-        className: `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold border ${config.class}`,
-        children: [
-          config.icon,
-          config.label
-        ]
-      }
-    );
-  };
-  const formatDate2 = (dateStr) => {
-    if (!dateStr) return "Never";
-    return new Date(dateStr).toLocaleString();
-  };
-  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(
+        type: "button",
+        onClick: () => setView(v),
+        className: `px-2.5 py-1 text-[11px] font-semibold 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)] hover:text-[var(--kyro-text-primary)]"}`,
+        children: v === "edit" ? "Edit" : v === "version" ? "Ver" : "API"
+      },
+      v
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-auto shrink-0", children: [
+      onPreview && /* @__PURE__ */ jsx("button", { type: "button", onClick: onPreview, className: `${iconBtnClass} max-md:hidden`, title: "Preview", children: /* @__PURE__ */ jsx(Eye, { className: "w-3.5 h-3.5" }) }),
+      onViewHistory && /* @__PURE__ */ jsx("button", { type: "button", onClick: onViewHistory, className: `${iconBtnClass} max-md:hidden`, title: "View History", children: /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5" }) }),
+      onDuplicate && /* @__PURE__ */ jsx("button", { type: "button", onClick: onDuplicate, className: `${iconBtnClass} max-md:hidden`, title: "Duplicate", children: /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" }) }),
+      onDelete && /* @__PURE__ */ jsx("button", { type: "button", onClick: onDelete, className: `${iconBtnClass} hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] max-md:hidden`, title: "Delete", children: /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" }) }),
+      onToggleSidebar && /* @__PURE__ */ jsx("button", { type: "button", onClick: onToggleSidebar, className: `${iconBtnClass} max-md:hidden`, title: "Toggle Sidebar", children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", 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__ */ jsxs("div", { ref: moreRef, className: "relative md:hidden", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setMoreOpen(!moreOpen), className: iconBtnClass, title: "More", children: /* @__PURE__ */ jsx(EllipsisVertical, { className: "w-3.5 h-3.5" }) }),
+        moreOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full mt-1 w-48 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 py-1 max-h-[70vh] overflow-y-auto", children: [
+          saveText && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 text-[10px] text-[var(--kyro-text-muted)] border-b border-[var(--kyro-border)] flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: `w-1.5 h-1.5 rounded-full ${STATUS_DOT[status]}` }),
+            /* @__PURE__ */ jsx("span", { className: "capitalize", children: status }),
+            /* @__PURE__ */ jsx("span", { children: "\xB7" }),
+            saveStatus === "saving" && /* @__PURE__ */ jsx(Spinner, { size: "sm", className: "inline" }),
+            /* @__PURE__ */ jsx("span", { children: saveText })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-1 px-2 py-2 border-b border-[var(--kyro-border)]", children: tabs.map((v) => /* @__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" })
-              ] })
-            }
-          )
+              onClick: () => {
+                setView(v);
+                setMoreOpen(false);
+              },
+              className: `px-2.5 py-1 text-[11px] font-semibold rounded-md transition-all flex-1 ${view === v ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-muted)] hover:text-[var(--kyro-text-primary)]"}`,
+              children: v === "edit" ? "Edit" : v === "version" ? "Ver" : "API"
+            },
+            v
+          )) }),
+          onViewHistory && /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => {
+            onViewHistory();
+            setMoreOpen(false);
+          }, className: "w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5" }),
+            " View History"
+          ] }),
+          onDuplicate && /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => {
+            onDuplicate();
+            setMoreOpen(false);
+          }, className: "w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors", children: [
+            /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" }),
+            " Duplicate"
+          ] }),
+          onPreview && /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => {
+            onPreview();
+            setMoreOpen(false);
+          }, className: "w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors", children: [
+            /* @__PURE__ */ jsx(Eye, { className: "w-3.5 h-3.5" }),
+            " Preview"
+          ] }),
+          onDelete && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--kyro-border)] mt-1 pt-1", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => {
+            onDelete();
+            setMoreOpen(false);
+          }, className: "w-full flex items-center gap-2 px-3 py-2 text-xs text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger-bg)] transition-colors", children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "w-3.5 h-3.5" }),
+            " Delete"
+          ] }) })
         ] })
       ] }),
-      /* @__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(
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-[var(--kyro-border)] mx-0.5" }),
+      status === "draft" && onPublish && /* @__PURE__ */ jsxs(
         "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-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: "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()
-              ]
-            }
-          )
-        ] }),
-        /* @__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"
-                }
-              )
-            ]
-          }
-        )
-      ] })
+          onClick: onPublish,
+          disabled: saveStatus === "saving",
+          className: "kyro-btn kyro-btn-primary kyro-btn-sm flex items-center gap-1 shrink-0",
+          children: [
+            /* @__PURE__ */ jsx(Send, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "max-md:hidden", children: "Publish" })
+          ]
+        }
+      ),
+      status === "published" && onUnpublish && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onUnpublish,
+          disabled: saveStatus === "saving",
+          className: "kyro-btn kyro-btn-secondary kyro-btn-sm flex items-center gap-1 shrink-0",
+          children: [
+            /* @__PURE__ */ jsx(Undo, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "max-md:hidden", children: "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" })
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -11633,27 +11623,7 @@ function DetailView({
         ]
       }
     ),
-    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(
+    /* @__PURE__ */ jsx(
       ActionBar,
       {
         status,
@@ -11677,7 +11647,7 @@ function DetailView({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        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",
+        className: isSingleLayout ? "w-full 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",
         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: [
@@ -11877,13 +11847,14 @@ function Toast({ type, message, onClose }) {
       onMouseEnter: () => setIsPaused(true),
       onMouseLeave: () => setIsPaused(false),
       children: [
+        /* @__PURE__ */ jsx("div", { className: "kyro-toast-accent" }),
         /* @__PURE__ */ jsx("div", { className: "kyro-toast-icon-container", children: /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4" }) }),
         /* @__PURE__ */ jsx("div", { className: "kyro-toast-content", children: /* @__PURE__ */ jsx("p", { className: "kyro-toast-message", children: message }) }),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            className: "kyro-toast-close",
+            className: "kyro-toast-close group-hover:opacity-100 opacity-40 transition-opacity",
             onClick: onClose,
             children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
           }
@@ -14132,7 +14103,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(