@kyro-cms/admin 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "engines": {
     "node": ">=22"
   },
@@ -128,4 +128,4 @@
     "type": "git",
     "url": "https://github.com/danielDozie/kyro-cms"
   }
-}
+}

package/src/components/ActionBar.tsx

@@ -3,6 +3,7 @@ import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye
 import { DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { SplitButton } from "./ui/SplitButton";
 import { Spinner } from "./ui/Spinner";
+import { useAutoFormStore } from "../lib/autoform-store";
 
 export type DocumentStatus = "draft" | "published" | "scheduled" | "archived";
 export type SaveStatus = "idle" | "saving" | "saved" | "error";
@@ -18,6 +19,8 @@ export interface ActionBarProps {
   onViewHistory?: () => void;
   onPreview?: () => void;
   onDelete?: () => void;
+  onBack?: () => void;
+  onToggleSidebar?: () => void;
   publishedAt?: string | null;
   updatedAt?: string | null;
 }
@@ -33,9 +36,14 @@ export function ActionBar({
   onViewHistory,
   onPreview,
   onDelete,
+  onBack,
+  onToggleSidebar,
   publishedAt,
   updatedAt,
 }: ActionBarProps) {
+  const view = useAutoFormStore((s) => s.view) || "edit";
+  const setView = useAutoFormStore((s) => s.setView);
+
   const getSaveStatusText = () => {
     if (saveStatus === "saving") return "Saving...";
     if (saveStatus === "saved") return "Saved";
@@ -84,13 +92,103 @@ export function ActionBar({
   };
 
   return (
-    <div className="flex items-center justify-between py-3 px-1">
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-2">
+    <>
+      {/* ─── MOBILE LAYOUT ─── */}
+      <div className="md:hidden flex flex-col gap-3 py-3 px-4 bg-[var(--kyro-bg)] border-t border-[var(--kyro-border)]">
+        {/* Row 1: Back + icon buttons */}
+        <div className="flex items-center gap-1">
+          {onBack && (
+            <button
+              type="button"
+              onClick={onBack}
+              className="p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] transition-all"
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                <path d="M19 12H5M12 19l-7-7 7-7" />
+              </svg>
+            </button>
+          )}
+          <div className="flex items-center gap-1 ml-auto">
+            {onPreview && (
+              <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"
+              >
+                <IconEye className="w-4 h-4" />
+              </button>
+            )}
+            {onViewHistory && (
+              <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"
+              >
+                <IconClock className="w-4 h-4" />
+              </button>
+            )}
+            {onDuplicate && (
+              <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"
+              >
+                <IconCopy className="w-4 h-4" />
+              </button>
+            )}
+            {onDelete && (
+              <button
+                type="button"
+                onClick={onDelete}
+                className="p-2 rounded-lg hover:bg-[var(--kyro-danger-bg)] text-[var(--kyro-error)] transition-all"
+                title="Delete"
+              >
+                <IconTrash2 className="w-4 h-4" />
+              </button>
+            )}
+            {onToggleSidebar && (
+              <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"
+              >
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+                  <line x1="9" y1="3" x2="9" y2="21" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Row 2: Edit / Version / API tabs */}
+          <div className="flex items-center gap-1 bg-[var(--kyro-bg-secondary)] p-0.5 rounded-lg border border-[var(--kyro-border)] self-start">
+            {(["edit", "version", "api"] as const).map((v) => (
+              <button
+                key={v}
+                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"
+                }`}
+              >
+                {v === "edit" ? "Edit" : v === "version" ? "Version" : "API"}
+              </button>
+            ))}
+          </div>
+
+        {/* Row 3: Status + timestamps */}
+        <div className="flex items-center gap-2 flex-wrap">
           {getStatusBadge()}
           {getSaveStatusText() && (
             <span
-              className={`text-sm ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`}
+              className={`text-xs ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`}
             >
               {saveStatus === "saving" ? (
                 <Spinner size="sm" className="inline mr-1" />
@@ -98,83 +196,169 @@ export function ActionBar({
               {getSaveStatusText()}
             </span>
           )}
+          <span className="text-[10px] text-[var(--kyro-text-muted)] ml-auto">
+            {updatedAt && `Updated ${formatDate(updatedAt)}`}
+            {publishedAt && status === "published" && ` · Published ${formatDate(publishedAt)}`}
+          </span>
         </div>
-        <div className="text-xs space-y-0.5">
-          {updatedAt && (
-            <div className="text-[var(--kyro-text-muted)]">
-              Updated: {formatDate(updatedAt)}
-            </div>
+
+        {/* Row 4: Publish + Save */}
+        <div className="flex items-center gap-2">
+          {status === "draft" && onPublish && (
+            <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"
+            >
+              <IconSend className="w-4 h-4" />
+              Publish
+            </button>
           )}
-          {publishedAt && status === "published" && (
-            <div className="text-[var(--kyro-primary)] font-medium">
-              Published: {formatDate(publishedAt)}
-            </div>
+          {status === "published" && onUnpublish && (
+            <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"
+            >
+              <IconUndo className="w-4 h-4" />
+              Unpublish
+            </button>
           )}
+          <div className="flex-1">
+            <SplitButton
+              status={status}
+              saveStatus={saveStatus}
+              hasChanges={hasChanges}
+              onPublish={onSave}
+            >
+              {onDuplicate && (
+                <DropdownItem
+                  icon={<IconCopy className="w-4 h-4" />}
+                >
+                  Duplicate
+                </DropdownItem>
+              )}
+              {onViewHistory && (
+                <DropdownItem
+                  icon={<IconClock className="w-4 h-4" />}
+                >
+                  View History
+                </DropdownItem>
+              )}
+              {onPreview && (
+                <DropdownItem
+                  icon={<IconEye className="w-4 h-4" />}
+                >
+                  Preview
+                </DropdownItem>
+              )}
+              {(onDuplicate || onViewHistory || onPreview) && <DropdownSeparator />}
+              {onDelete && (
+                <DropdownItem
+                  onClick={onDelete}
+                  danger
+                  icon={<IconTrash2 className="w-4 h-4" />}
+                >
+                  Delete
+                </DropdownItem>
+              )}
+            </SplitButton>
+          </div>
         </div>
       </div>
 
-      <div className="flex items-center gap-2">
-        {status === "draft" && onPublish && (
-          <button type="button"
-            onClick={onPublish}
-            disabled={saveStatus === "saving"}
-            className="kyro-btn kyro-btn-primary kyro-btn-md flex items-center gap-2"
-          >
-            <IconSend className="w-4 h-4" />
-            Publish
-          </button>
-        )}
-        {status === "published" && onUnpublish && (
-          <button type="button"
-            onClick={onUnpublish}
-            disabled={saveStatus === "saving"}
-            className="kyro-btn kyro-btn-secondary kyro-btn-md flex items-center gap-2"
-          >
-            <IconUndo className="w-4 h-4" />
-            Unpublish
-          </button>
-        )}
+      {/* ─── DESKTOP LAYOUT ─── */}
+      <div className="hidden md:flex flex-row items-center justify-between gap-4 py-3 px-6 bg-transparent border-0 static z-40">
+        <div className="flex flex-row items-center gap-4">
+          <div className="flex items-center gap-2">
+            {getStatusBadge()}
+            {getSaveStatusText() && (
+              <span
+                className={`text-sm ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`}
+              >
+                {saveStatus === "saving" ? (
+                  <Spinner size="sm" className="inline mr-1" />
+                ) : null}
+                {getSaveStatusText()}
+              </span>
+            )}
+          </div>
+          <div className="text-xs space-y-0.5">
+            {updatedAt && (
+              <div className="text-[var(--kyro-text-muted)]">
+                Updated: {formatDate(updatedAt)}
+              </div>
+            )}
+            {publishedAt && status === "published" && (
+              <div className="text-[var(--kyro-primary)] font-medium">
+                Published: {formatDate(publishedAt)}
+              </div>
+            )}
+          </div>
+        </div>
 
-        {/* Button Group: Save + Dropdown */}
-        <SplitButton
-          status={status}
-          saveStatus={saveStatus}
-          hasChanges={hasChanges}
-          onPublish={onSave}
-        >
-          {onDuplicate && (
-            <DropdownItem
-              icon={<IconCopy className="w-4 h-4" />}
-            >
-              Duplicate
-            </DropdownItem>
-          )}
-          {onViewHistory && (
-            <DropdownItem
-              icon={<IconClock className="w-4 h-4" />}
+        <div className="flex items-center gap-2 flex-wrap">
+          {status === "draft" && onPublish && (
+            <button type="button"
+              onClick={onPublish}
+              disabled={saveStatus === "saving"}
+              className="kyro-btn kyro-btn-primary kyro-btn-md flex items-center gap-2"
             >
-              View History
-            </DropdownItem>
+              <IconSend className="w-4 h-4" />
+              Publish
+            </button>
           )}
-          {onPreview && (
-            <DropdownItem
-              icon={<IconEye className="w-4 h-4" />}
+          {status === "published" && onUnpublish && (
+            <button type="button"
+              onClick={onUnpublish}
+              disabled={saveStatus === "saving"}
+              className="kyro-btn kyro-btn-secondary kyro-btn-md flex items-center gap-2"
             >
-              Preview
-            </DropdownItem>
+              <IconUndo className="w-4 h-4" />
+              Unpublish
+            </button>
           )}
-          {(onDuplicate || onViewHistory || onPreview) && <DropdownSeparator />}
-          {onDelete && (
-            <DropdownItem
-              onClick={onDelete}
-              danger
-              icon={<IconTrash2 className="w-4 h-4" />}
-            >
-              Delete
-            </DropdownItem>
-          )}
-        </SplitButton>
+
+          <SplitButton
+            status={status}
+            saveStatus={saveStatus}
+            hasChanges={hasChanges}
+            onPublish={onSave}
+          >
+            {onDuplicate && (
+              <DropdownItem
+                icon={<IconCopy className="w-4 h-4" />}
+              >
+                Duplicate
+              </DropdownItem>
+            )}
+            {onViewHistory && (
+              <DropdownItem
+                icon={<IconClock className="w-4 h-4" />}
+              >
+                View History
+              </DropdownItem>
+            )}
+            {onPreview && (
+              <DropdownItem
+                icon={<IconEye className="w-4 h-4" />}
+              >
+                Preview
+              </DropdownItem>
+            )}
+            {(onDuplicate || onViewHistory || onPreview) && <DropdownSeparator />}
+            {onDelete && (
+              <DropdownItem
+                onClick={onDelete}
+                danger
+                icon={<IconTrash2 className="w-4 h-4" />}
+              >
+                Delete
+              </DropdownItem>
+            )}
+          </SplitButton>
+        </div>
       </div>
-    </div>
+    </>
   );
 }

package/src/components/Admin.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from "react";
 import { apiPost } from "../lib/api";
-import { useToastStore, toast, useAuthStore, type AuthUser } from "../lib/stores";
+import { toast, useAuthStore, type AuthUser } from "../lib/stores";
 import type { CollectionConfig, GlobalConfig } from "@kyro-cms/core/client";
 import { ListView } from "./ListView";
 import { DetailView } from "./DetailView";
@@ -14,7 +14,7 @@ import { WebhookManager } from "./WebhookManager";
 import { MediaGallery } from "./MediaGallery";
 import { CommandPalette } from "./ui/CommandPalette";
 import { GlobalModal } from "./ui/GlobalModal";
-import { Toast } from "./ui/Toast";
+import { Toaster } from "./ui/Toaster";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
 import { toArray, toCollectionMap, toGlobalMap } from "../lib/config";
 import "../styles/main.css";
@@ -65,9 +65,6 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
   const [activeDocumentId, setActiveDocumentId] = useState<string | null>(null);
   const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
 
-const toasts = useToastStore((state) => state.toasts);
-   const removeToast = useToastStore((state) => state.removeToast);
-
   useEffect(() => {
     // Basic session check
     const checkAuth = async () => {
@@ -107,7 +104,13 @@ const toasts = useToastStore((state) => state.toasts);
       }
     };
     window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
+
+    (window as { openCommandPalette?: () => void }).openCommandPalette = () => setIsCommandPaletteOpen(true);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      delete (window as { openCommandPalette?: () => void }).openCommandPalette;
+    };
   }, []);
 
   const handleLogin = async (data: Record<string, unknown>) => {
@@ -215,17 +218,7 @@ const toasts = useToastStore((state) => state.toasts);
             </main>
           </div>
           <GlobalModal />
-          
-          <div className="kyro-toasts-container">
-            {toasts.map((t) => (
-              <Toast
-                key={t.id}
-                type={t.type}
-                message={t.message}
-                onClose={() => removeToast(t.id)}
-              />
-            ))}
-          </div>
+          <Toaster />
         </div>
     </ThemeProvider>
   );

package/src/components/ApiKeysManager.tsx

@@ -91,6 +91,7 @@ export function ApiKeysManager() {
         try {
           const rotated = await apiPost<ApiKeyItem>(`/api/keys/${key.id}/rotate`);
           setNewKey(rotated);
+          toast.success("API key rotated");
         } catch {
           toast.error("Failed to rotate key. Please try again.");
         } finally {

package/src/components/AuditLogsPage.tsx

@@ -229,7 +229,7 @@ export function AuditLogsPage() {
       </div>
 
       {/* Filters */}
-      <div className="surface-tile p-4 flex flex-wrap items-center gap-3">
+      <div className="surface-tile p-4 flex flex-col md:flex-row flex-wrap items-stretch md:items-center gap-3">
         <div className="relative flex-1 min-w-48">
           <Search className="w-4 h-4" />
           <input
@@ -320,7 +320,7 @@ export function AuditLogsPage() {
       )}
 
       {/* Table */}
-      <div className="surface-tile overflow-hidden">
+      <div className="surface-tile overflow-x-auto">
         {loading ? (
           <div className="space-y-2 p-4">
             <Shimmer variant="table-row" count={5} />
@@ -356,7 +356,7 @@ export function AuditLogsPage() {
         ) : (
           <table className="w-full text-left">
             <thead>
-              <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.2em] border-b border-[var(--kyro-border)]">
+              <tr className="text-[var(--kyro-text-secondary)] font-bold text-[10px]  tracking-[0.2em] border-b border-[var(--kyro-border)] whitespace-nowrap">
                 <th className="px-6 py-5 w-8"></th>
                 <th className="px-6 py-5">Action</th>
                 <th className="px-6 py-5">User</th>

package/src/components/AutoForm.tsx

@@ -582,12 +582,12 @@ export function AutoForm({
         try {
           const cond = field.admin.condition as any;
           const targetField = cond.field;
-          
+
           // Get target field value, prioritizing sibling context (currentData) then root context (formData)
           const val = (currentData && currentData[targetField] !== undefined)
             ? currentData[targetField]
             : (formData && formData[targetField] !== undefined ? formData[targetField] : undefined);
-            
+
           let shouldShow = true;
           if ("equals" in cond) {
             shouldShow = val === cond.equals;
@@ -596,7 +596,7 @@ export function AutoForm({
           } else if ("in" in cond && Array.isArray(cond.in)) {
             shouldShow = cond.in.includes(val);
           }
-          
+
           if (!shouldShow) {
             return null;
           }
@@ -622,7 +622,7 @@ export function AutoForm({
       return (
         <div
           key={field.name || `row-${Math.random()}`}
-          className="kyro-form-row flex gap-6 items-end"
+          className="kyro-form-row flex flex-col md:flex-row gap-4 md:gap-6 items-start md:items-end w-full"
         >
           {rowFields?.map((f: Field) => {
             const fAdmin = f.admin || {};
@@ -893,22 +893,22 @@ export function AutoForm({
         : 'bg-[var(--kyro-text-muted)]/10 text-[var(--kyro-text-muted)] border-[var(--kyro-text-muted)]/20';
 
     return (
-      <header className="surface-tile px-8 py-6 flex items-center justify-between sticky top-0 z-50 border-b border-[var(--kyro-border)] mb-8 bg-[var(--kyro-surface)] backdrop-blur-md">
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-3">
+      <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">
+        <div className="flex flex-col gap-1 md:gap-2 min-w-0">
+          <div className="flex items-center gap-2 md:gap-3 flex-wrap min-w-0">
             <a
               href={`/${collectionSlug}`}
-              className="p-2 border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors"
+              className="p-1.5 md:p-2 border-0 md:border border-[var(--kyro-border)] rounded-xl hover:bg-[var(--kyro-bg-secondary)] transition-colors shrink-0"
             >
               <ChevronRight className="w-4 h-4" />
             </a>
-            <h1 className="text-xl font-bold tracking-tighter">{docTitle}</h1>
-            <span className={`inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`}>
+            <h1 className="text-lg md:text-xl font-bold tracking-tighter truncate min-w-0">{docTitle}</h1>
+            <span className={`shrink-0 inline-flex items-center gap-1.5 px-2 rounded-full text-[10px] font-regular border ${statusBadgeBg}`}>
               <span className={`h-1.5 w-1.5 rounded-full ${statusColor}`} />
               {statusLabel}
             </span>
           </div>
-          <div className="flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 ml-12">
+          <div className="flex items-center gap-4 text-[11px] font-medium tracking-wide opacity-60 md:ml-12">
             {autoSaveStatus === "saving" && (
               <span className="flex items-center gap-1.5 text-[var(--kyro-text-muted)]">
                 <svg
@@ -1028,7 +1028,7 @@ export function AutoForm({
           </div>
         </div>
 
-        <div className="flex items-center gap-6">
+        <div className="max-md:hidden flex items-center gap-6">
           <div className="flex items-center gap-1 bg-[var(--kyro-bg-secondary)] p-1 rounded-xl border border-[var(--kyro-border)]">
             {["edit", "version", "api"].map((v) => (
               <button
@@ -1221,8 +1221,8 @@ export function AutoForm({
     // Single layout: no split grid, no sidebar column — just a clean field list
     if (layout === "single") {
       return (
-        <div className="w-full space-y-8">
-          <div className="surface-tile p-8 space-y-8">
+        <div className="w-full space-y-6 md:space-y-8">
+          <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
             {config.fields.map((f: Field) => renderField(f))}
           </div>
         </div>
@@ -1237,18 +1237,18 @@ export function AutoForm({
 
     return (
       <div
-        className={`w-full mx-auto grid gap-8 pb-32 transition-all duration-700 ${showPreview
+        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]"
           }`}
       >
-        <div className="space-y-8 animate-in fade-in slide-in-from-left-4 duration-500">
+        <div className="space-y-6 md:space-y-8 animate-in fade-in slide-in-from-left-4 duration-500">
           {config.tabs ? (
             renderField({ type: "tabs", tabs: config.tabs } as Field)
           ) : (
-            <div className="surface-tile p-8 space-y-8">
+            <div className="surface-tile p-4 md:p-8 space-y-6 md:space-y-8">
               {config.fields
                 .filter(
                   (f: Field) => !f.admin?.position || f.admin.position === "main",
@@ -1276,16 +1276,33 @@ export function AutoForm({
             </div>
           </div>
         ) : sidebarCollapsed ? null : (
-          <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
+          <div className="space-y-4 md:space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
             {config.fields.some((f: Field) => f.admin?.position === "sidebar") && (
-              <div className="surface-tile p-6 space-y-6">
-                <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
-                  Settings
-                </h3>
-                {config.fields
-                  .filter((f: Field) => f.admin?.position === "sidebar")
-                  .map((f: Field) => renderField(f))}
-              </div>
+              <>
+                {/* Desktop: always visible */}
+                <div className="hidden lg:block surface-tile p-6 space-y-6">
+                  <h3 className="text-[10px] font-bold  tracking-[0.2em] opacity-40">
+                    Settings
+                  </h3>
+                  {config.fields
+                    .filter((f: Field) => f.admin?.position === "sidebar")
+                    .map((f: Field) => renderField(f))}
+                </div>
+                {/* Mobile: collapsible accordion */}
+                <details className="lg:hidden surface-tile p-4 space-y-4 group">
+                  <summary className="cursor-pointer font-semibold text-xs tracking-widest opacity-40 text-[var(--kyro-text-secondary)] select-none flex items-center gap-2">
+                    <svg className="w-3 h-3 transition-transform group-open:rotate-90" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                      <path d="M9 18l6-6-6-6" />
+                    </svg>
+                    Settings
+                  </summary>
+                  <div className="space-y-4 pt-4 border-t border-[var(--kyro-border)]">
+                    {config.fields
+                      .filter((f: Field) => f.admin?.position === "sidebar")
+                      .map((f: Field) => renderField(f))}
+                  </div>
+                </details>
+              </>
             )}
           </div>
         )}
@@ -1642,13 +1659,13 @@ export function AutoForm({
             onClick={async () => {
               try {
                 const response = await saveDocument();
-              if (response.ok) {
-                const result = await response.json();
-                const savedData = result.data || formData;
-                setFormData({ ...formData, ...savedData });
-                setLastSavedData({ ...formData, ...savedData });
-                onActionSuccess?.("Changes saved");
-              }
+                if (response.ok) {
+                  const result = await response.json();
+                  const savedData = result.data || formData;
+                  setFormData({ ...formData, ...savedData });
+                  setLastSavedData({ ...formData, ...savedData });
+                  onActionSuccess?.("Changes saved");
+                }
               } catch (e) {
                 console.error("Save error exception:", e);
                 onActionError?.("Save failed: " + (e as Error).message);
@@ -1657,7 +1674,7 @@ export function AutoForm({
           />
         </>
       )}
-      <main className="w-full">
+      <main className="w-full pt-6 md:pt-0">
         {view === "edit" && renderEditView()}
         {view === "version" && renderVersionView()}
         {view === "api" && renderApiView()}