@kyro-cms/admin 0.9.1 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "engines": {
     "node": ">=22"
   },
@@ -120,7 +120,7 @@
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@kyro-cms/core": "^0.6.0",
+    "@kyro-cms/core": "^0.9.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/components/ActionBar.tsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Dropdown, DropdownItem, DropdownSeparator } from "./ui/Dropdown";
+import React from "react";
+import { IconPlus, IconSend, IconClock, IconArchive, IconUndo, IconCopy, IconEye, IconTrash2 } from "./ui/icons";
+import { DropdownItem, DropdownSeparator } from "./ui/Dropdown";
+import { SplitButton } from "./ui/SplitButton";
 import { Spinner } from "./ui/Spinner";
 
 export type DocumentStatus = "draft" | "published" | "scheduled" | "archived";
@@ -42,81 +44,27 @@ export function ActionBar({
     return null;
   };
 
-  const getSaveButtonClass = () => {
-    const base = "kyro-btn kyro-btn-md text-[11px] font-bold  tracking-widest transition-all duration-300";
-    if (saveStatus === "saving") return `${base} bg-[var(--kyro-gray-400)] text-white opacity-70 cursor-wait`;
-    if (saveStatus === "saved") return `${base} bg-[var(--kyro-success)] border-[var(--kyro-success)] text-white shadow-[0_0_15px_rgba(34,197,94,0.3)]`;
-    if (saveStatus === "error") return `${base} bg-[var(--kyro-error)] border-[var(--kyro-error)] text-white shadow-[0_0_15px_rgba(239,68,68,0.3)]`;
-    if (hasChanges) return `${base} bg-[var(--kyro-warning)] border-[var(--kyro-warning)] text-black shadow-[0_0_15px_rgba(255,174,0,0.3)] animate-pulse`;
-    return `${base} bg-[var(--kyro-gray-500)] border-[var(--kyro-gray-500)] text-white hover:bg-[var(--kyro-gray-600)]`;
-  };
-
   const getStatusBadge = () => {
     const statusConfig = {
       draft: {
         label: "Draft",
         class: "bg-gray-100 text-gray-600 border-gray-200",
-        icon: (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2.5"
-          >
-            <path d="M12 2v20M2 12h20" />
-          </svg>
-        ),
+        icon: <IconPlus className="w-3 h-3" />,
       },
       published: {
         label: "Published",
         class: "bg-green-100 text-green-700 border-green-200",
-        icon: (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2.5"
-          >
-            <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
-          </svg>
-        ),
+        icon: <IconSend className="w-3 h-3" />,
       },
       scheduled: {
         label: "Scheduled",
         class: "bg-blue-100 text-blue-700 border-blue-200",
-        icon: (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2.5"
-          >
-            <circle cx="12" cy="12" r="10" />
-            <path d="M12 6v6l4 2" />
-          </svg>
-        ),
+        icon: <IconClock className="w-3 h-3" />,
       },
       archived: {
         label: "Archived",
         class: "bg-yellow-100 text-yellow-700 border-yellow-200",
-        icon: (
-          <svg
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2.5"
-          >
-            <path d="M21 8v13H3V8M1 3h22v5H1zM10 12h4" />
-          </svg>
-        ),
+        icon: <IconArchive className="w-3 h-3" />,
       },
     };
     const config = statusConfig[status];
@@ -142,7 +90,7 @@ export function ActionBar({
           {getStatusBadge()}
           {getSaveStatusText() && (
             <span
-              className={`text-sm ${saveStatus === "error" ? "text-red-500" : "text-gray-500"}`}
+              className={`text-sm ${saveStatus === "error" ? "text-[var(--kyro-error)]" : "text-[var(--kyro-text-muted)]"}`}
             >
               {saveStatus === "saving" ? (
                 <Spinner size="sm" className="inline mr-1" />
@@ -153,7 +101,7 @@ export function ActionBar({
         </div>
         <div className="text-xs space-y-0.5">
           {updatedAt && (
-            <div className="text-gray-400">
+            <div className="text-[var(--kyro-text-muted)]">
               Updated: {formatDate(updatedAt)}
             </div>
           )}
@@ -170,18 +118,9 @@ export function ActionBar({
           <button type="button"
             onClick={onPublish}
             disabled={saveStatus === "saving"}
-            className="kyro-btn-success hover:opacity-90 kyro-btn-md flex items-center gap-2"
+            className="kyro-btn kyro-btn-primary kyro-btn-md flex items-center gap-2"
           >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-            >
-              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
-            </svg>
+            <IconSend className="w-4 h-4" />
             Publish
           </button>
         )}
@@ -189,116 +128,37 @@ export function ActionBar({
           <button type="button"
             onClick={onUnpublish}
             disabled={saveStatus === "saving"}
-            className="kyro-btn kyro-btn-warning kyro-btn-md flex items-center gap-2"
+            className="kyro-btn kyro-btn-secondary kyro-btn-md flex items-center gap-2"
           >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-            >
-              <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8M3 3v5h5" />
-            </svg>
+            <IconUndo className="w-4 h-4" />
             Unpublish
           </button>
         )}
-        {status === "published" && !hasChanges && saveStatus !== "saving" && saveStatus !== "error" ? (
-          <span className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-[11px] font-bold tracking-widest bg-green-100 text-green-700 border border-green-200 cursor-not-allowed shadow-sm">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-              <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
-            </svg>
-            Published
-          </span>
-        ) : (
-          <button type="button"
-            onClick={onSave}
-            disabled={
-              saveStatus === "saving" || (!hasChanges && saveStatus !== "error")
-            }
-            className={getSaveButtonClass()}
-          >
-            {saveStatus === "saving"
-              ? "Saving..."
-              : saveStatus === "saved"
-                ? "Saved"
-                : hasChanges && status === "published"
-                  ? "Save Draft"
-                  : status === "draft" && hasChanges
-                    ? "Save Draft"
-                    : "Save"}
-          </button>
-        )}
 
-        <Dropdown
-          trigger={
-            <button type="button" className="kyro-btn kyro-btn-ghost kyro-btn-md p-2">
-              <svg
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <circle cx="12" cy="12" r="1" />
-                <circle cx="12" cy="5" r="1" />
-                <circle cx="12" cy="19" r="1" />
-              </svg>
-            </button>
-          }
+        {/* Button Group: Save + Dropdown */}
+        <SplitButton
+          status={status}
+          saveStatus={saveStatus}
+          hasChanges={hasChanges}
+          onPublish={onSave}
         >
           {onDuplicate && (
             <DropdownItem
-              onClick={onDuplicate}
-              icon={
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <rect x="9" y="9" width="13" height="13" rx="2" />
-                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-                </svg>
-              }
+              icon={<IconCopy className="w-4 h-4" />}
             >
               Duplicate
             </DropdownItem>
           )}
           {onViewHistory && (
             <DropdownItem
-              onClick={onViewHistory}
-              icon={
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <polyline points="12,6 12,12 16,14" />
-                </svg>
-              }
+              icon={<IconClock className="w-4 h-4" />}
             >
               View History
             </DropdownItem>
           )}
           {onPreview && (
             <DropdownItem
-              onClick={onPreview}
-              icon={
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-                  <circle cx="12" cy="12" r="3" />
-                </svg>
-              }
+              icon={<IconEye className="w-4 h-4" />}
             >
               Preview
             </DropdownItem>
@@ -308,21 +168,12 @@ export function ActionBar({
             <DropdownItem
               onClick={onDelete}
               danger
-              icon={
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <path d="M3 6h18M19 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" />
-                </svg>
-              }
+              icon={<IconTrash2 className="w-4 h-4" />}
             >
               Delete
             </DropdownItem>
           )}
-        </Dropdown>
+        </SplitButton>
       </div>
     </div>
   );

package/src/components/Admin.tsx

@@ -14,7 +14,7 @@ import { WebhookManager } from "./WebhookManager";
 import { MediaGallery } from "./MediaGallery";
 import { CommandPalette } from "./ui/CommandPalette";
 import { GlobalModal } from "./ui/GlobalModal";
-import { Toast, ToastProvider } from "./ui/Toast";
+import { Toast } from "./ui/Toast";
 import { ThemeProvider, type ThemeMode } from "./ThemeProvider";
 import { toArray, toCollectionMap, toGlobalMap } from "../lib/config";
 import "../styles/main.css";
@@ -199,7 +199,6 @@ const toasts = useToastStore((state) => state.toasts);
 
   return (
     <ThemeProvider {...({ mode: theme, onChange: onThemeChange } as any)}>
-      <ToastProvider>
         <div className="kyro-admin min-h-screen bg-[var(--kyro-bg)] text-[var(--kyro-text-primary)]">
           <div className="flex h-screen overflow-hidden">
             <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
@@ -228,7 +227,6 @@ const toasts = useToastStore((state) => state.toasts);
             ))}
           </div>
         </div>
-      </ToastProvider>
     </ThemeProvider>
   );
 }

package/src/components/AuditLogsPage.tsx

@@ -1,3 +1,4 @@
+import { Search } from "./ui/icons";
 import React, { useState, useEffect, useCallback } from "react";
 import { fetchWithAuth } from "../lib/api";
 import { Modal } from "./ui/Modal";
@@ -230,19 +231,7 @@ export function AuditLogsPage() {
       {/* Filters */}
       <div className="surface-tile p-4 flex flex-wrap items-center gap-3">
         <div className="relative flex-1 min-w-48">
-          <svg
-            className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            />
-          </svg>
+          <Search className="w-4 h-4" />
           <input
             type="text"
             placeholder="Search by user email..."