@kyro-cms/admin 0.9.5 → 0.9.7

package/package.json

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

package/src/components/ActionBar.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye, IconTrash2 } from "./ui/icons";
+import React, { useState, useRef, useEffect } from "react";
+import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye, IconTrash2, IconMoreVertical } from "./ui/icons";
 import { DropdownItem, DropdownSeparator } from "./ui/Dropdown";
 import { SplitButton } from "./ui/SplitButton";
 import { Spinner } from "./ui/Spinner";
@@ -25,6 +25,20 @@ export interface ActionBarProps {
   updatedAt?: string | null;
 }
 
+const STATUS_DOT: Record<string, string> = {
+  draft: "bg-[var(--kyro-warning)]",
+  published: "bg-[var(--kyro-success)]",
+  scheduled: "bg-[var(--kyro-primary)]",
+  archived: "bg-[var(--kyro-text-muted)]",
+};
+
+const STATUS_COLOR: Record<string, string> = {
+  draft: "var(--kyro-warning)",
+  published: "var(--kyro-success)",
+  scheduled: "var(--kyro-primary)",
+  archived: "var(--kyro-text-muted)",
+};
+
 export function ActionBar({
   status,
   saveStatus,
@@ -43,322 +57,188 @@ export function ActionBar({
 }: ActionBarProps) {
   const view = useAutoFormStore((s) => s.view) || "edit";
   const setView = useAutoFormStore((s) => s.setView);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const moreRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (moreRef.current && !moreRef.current.contains(e.target as Node)) 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 statusConfig = {
-      draft: {
-        label: "Draft",
-        class: "bg-gray-100 text-gray-600 border-gray-200",
-        icon: <IconPlus className="w-3 h-3" />,
-      },
-      published: {
-        label: "Published",
-        class: "bg-green-100 text-green-700 border-green-200",
-        icon: <IconSend className="w-3 h-3" />,
-      },
-      scheduled: {
-        label: "Scheduled",
-        class: "bg-blue-100 text-blue-700 border-blue-200",
-        icon: <IconClock className="w-3 h-3" />,
-      },
-      archived: {
-        label: "Archived",
-        class: "bg-yellow-100 text-yellow-700 border-yellow-200",
-        icon: <IconArchive className="w-3 h-3" />,
-      },
-    };
-    const config = statusConfig[status];
-    return (
-      <span
-        className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-semibold border ${config.class}`}
-      >
-        {config.icon}
-        {config.label}
-      </span>
-    );
-  };
+  const tabs = ["edit", "version", "api"] as const;
+  const saveText = getSaveStatusText();
 
-  const formatDate = (dateStr: string | null | undefined) => {
-    if (!dateStr) return "Never";
-    return new Date(dateStr).toLocaleString();
-  };
+  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 (
-    <>
-      {/* ─── 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>
+    <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">
+      {onBack && (
+        <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">
+          <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>
+      )}
 
-        {/* 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>
+      <div className={`w-2 h-2 rounded-full shrink-0 ${STATUS_DOT[status] || "bg-[var(--kyro-text-muted)]"}`} />
 
-        {/* Row 3: Status + timestamps */}
-        <div className="flex items-center gap-2 flex-wrap">
-          {getStatusBadge()}
-          {getSaveStatusText() && (
-            <span
-              className={`text-xs ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`}
-            >
-              {saveStatus === "saving" ? (
-                <Spinner size="sm" className="inline mr-1" />
-              ) : null}
-              {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>
+      {saveText && (
+        <span className={`text-[10px] whitespace-nowrap max-md:hidden ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`}>
+          {saveStatus === "saving" && <Spinner size="sm" className="inline mr-0.5" />}
+          {saveText}
+        </span>
+      )}
 
-        {/* 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>
-          )}
-          {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>
+      <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">
+        {tabs.map((v) => (
+          <button key={v} 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)]"
+            }`}
+          >
+            {v === "edit" ? "Edit" : v === "version" ? "Ver" : "API"}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex items-center gap-1 ml-auto shrink-0">
+        {onPreview && (
+          <button type="button" onClick={onPreview} className={`${iconBtnClass} max-md:hidden`} title="Preview">
+            <IconEye className="w-3.5 h-3.5" />
+          </button>
+        )}
+        {onViewHistory && (
+          <button type="button" onClick={onViewHistory} className={`${iconBtnClass} max-md:hidden`} title="View History">
+            <IconClock className="w-3.5 h-3.5" />
+          </button>
+        )}
+        {onDuplicate && (
+          <button type="button" onClick={onDuplicate} className={`${iconBtnClass} max-md:hidden`} title="Duplicate">
+            <IconCopy className="w-3.5 h-3.5" />
+          </button>
+        )}
+        {onDelete && (
+          <button type="button" onClick={onDelete} className={`${iconBtnClass} hover:bg-[var(--kyro-danger-bg)] hover:text-[var(--kyro-danger)] max-md:hidden`} title="Delete">
+            <IconTrash2 className="w-3.5 h-3.5" />
+          </button>
+        )}
+        {onToggleSidebar && (
+          <button type="button" onClick={onToggleSidebar} className={`${iconBtnClass} max-md:hidden`} title="Toggle Sidebar">
+            <svg width="14" height="14" 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>
+        )}
+
+        {/* Mobile overflow menu */}
+        <div ref={moreRef} className="relative md:hidden">
+          <button type="button" onClick={() => setMoreOpen(!moreOpen)} className={iconBtnClass} title="More">
+            <IconMoreVertical className="w-3.5 h-3.5" />
+          </button>
+          {moreOpen && (
+            <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">
+              {saveText && (
+                <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">
+                  <div className={`w-1.5 h-1.5 rounded-full ${STATUS_DOT[status]}`} />
+                  <span className="capitalize">{status}</span>
+                  <span>·</span>
+                  {saveStatus === "saving" && <Spinner size="sm" className="inline" />}
+                  <span>{saveText}</span>
+                </div>
               )}
+              <div className="flex gap-1 px-2 py-2 border-b border-[var(--kyro-border)]">
+                {tabs.map((v) => (
+                  <button key={v} type="button" 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)]"
+                    }`}
+                  >
+                    {v === "edit" ? "Edit" : v === "version" ? "Ver" : "API"}
+                  </button>
+                ))}
+              </div>
               {onViewHistory && (
-                <DropdownItem
-                  icon={<IconClock className="w-4 h-4" />}
-                >
-                  View History
-                </DropdownItem>
+                <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">
+                  <IconClock className="w-3.5 h-3.5" /> View History
+                </button>
+              )}
+              {onDuplicate && (
+                <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">
+                  <IconCopy className="w-3.5 h-3.5" /> Duplicate
+                </button>
               )}
               {onPreview && (
-                <DropdownItem
-                  icon={<IconEye className="w-4 h-4" />}
-                >
-                  Preview
-                </DropdownItem>
+                <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">
+                  <IconEye className="w-3.5 h-3.5" /> Preview
+                </button>
               )}
-              {(onDuplicate || onViewHistory || onPreview) && <DropdownSeparator />}
               {onDelete && (
-                <DropdownItem
-                  onClick={onDelete}
-                  danger
-                  icon={<IconTrash2 className="w-4 h-4" />}
-                >
-                  Delete
-                </DropdownItem>
+                <div className="border-t border-[var(--kyro-border)] mt-1 pt-1">
+                  <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">
+                    <IconTrash2 className="w-3.5 h-3.5" /> Delete
+                  </button>
+                </div>
               )}
-            </SplitButton>
-          </div>
+            </div>
+          )}
         </div>
-      </div>
 
-      {/* ─── 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>
+        <div className="h-4 w-px bg-[var(--kyro-border)] mx-0.5" />
 
-        <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"
-            >
-              <IconSend className="w-4 h-4" />
-              Publish
-            </button>
+        {status === "draft" && onPublish && (
+          <button type="button" onClick={onPublish} disabled={saveStatus === "saving"}
+            className="kyro-btn kyro-btn-primary kyro-btn-sm flex items-center gap-1 shrink-0"
+          >
+            <IconSend className="w-3.5 h-3.5" />
+            <span className="max-md:hidden">Publish</span>
+          </button>
+        )}
+        {status === "published" && onUnpublish && (
+          <button type="button" onClick={onUnpublish} disabled={saveStatus === "saving"}
+            className="kyro-btn kyro-btn-secondary kyro-btn-sm flex items-center gap-1 shrink-0"
+          >
+            <IconUndo className="w-3.5 h-3.5" />
+            <span className="max-md:hidden">Unpublish</span>
+          </button>
+        )}
+
+        <SplitButton
+          status={status}
+          saveStatus={saveStatus}
+          hasChanges={hasChanges}
+          onPublish={onSave}
+        >
+          {onDuplicate && (
+            <DropdownItem icon={<IconCopy className="w-4 h-4" />}>Duplicate</DropdownItem>
           )}
-          {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>
+          {onViewHistory && (
+            <DropdownItem icon={<IconClock className="w-4 h-4" />}>View History</DropdownItem>
           )}
-
-          <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>
+          {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>
   );
 }

package/src/components/Admin.tsx

@@ -104,7 +104,13 @@ export function Admin({ config, theme = "light", onThemeChange }: AdminProps) {
       }
     };
     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>) => {