@kyro-cms/admin 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyro-cms/admin",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "engines": {
     "node": ">=22"
   },
@@ -77,12 +77,19 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@graphiql/react": "^0.37.3",
     "@kyro-cms/core": "file:..",
-    "@portabletext/editor": "^6.6.3",
-    "@portabletext/react": "^6.0.3",
-    "@portabletext/schema": "^2.1.1",
-    "@portabletext/toolbar": "^7.0.26",
-    "@portabletext/types": "^4.0.2",
     "@tailwindcss/vite": "^4.0.0",
+    "@tiptap/extension-color": "^3.23.6",
+    "@tiptap/extension-highlight": "^3.23.6",
+    "@tiptap/extension-image": "^3.23.6",
+    "@tiptap/extension-link": "^3.23.6",
+    "@tiptap/extension-task-item": "^3.23.6",
+    "@tiptap/extension-task-list": "^3.23.6",
+    "@tiptap/extension-text-align": "^3.23.6",
+    "@tiptap/extension-text-style": "^3.23.6",
+    "@tiptap/extension-underline": "^3.23.6",
+    "@tiptap/pm": "^3.23.6",
+    "@tiptap/react": "^3.23.6",
+    "@tiptap/starter-kit": "^3.23.6",
     "@types/pg": "^8.20.0",
     "@uiw/codemirror-theme-aura": "^4.25.9",
     "@uiw/codemirror-theme-dracula": "^4.25.9",
@@ -96,14 +103,11 @@
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-icons": "^5.0.0",
     "react-image-crop": "^11.0.10",
-    "slate": "^0.124.1",
-    "slate-history": "^0.113.1",
-    "slate-react": "^0.124.0",
     "swup": "^4.9.0",
     "tailwindcss": "^4.0.0",
     "unstorage": "^1.17.5",
+    "use-sync-external-store": "1.5.0",
     "zustand": "^5.0.3"
   },
   "devDependencies": {
@@ -111,12 +115,12 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "dotenv-cli": "^11.0.0",
-    "tsup": "^6.0.0",
+    "tsup": "^8.5.1",
     "typescript": "^5.7.3",
     "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="bg-[var(--kyro-primary)] hover:opacity-90 text-white 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,103 +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>
         )}
-        <button type="button"
-          onClick={onSave}
-          disabled={
-            saveStatus === "saving" || (!hasChanges && saveStatus !== "error")
-          }
-          className={getSaveButtonClass()}
-        >
-          {saveStatus === "saving"
-            ? "Saving..."
-            : saveStatus === "saved"
-              ? "Saved"
-              : "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>
@@ -295,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";
@@ -158,7 +158,7 @@ const toasts = useToastStore((state) => state.toasts);
             collection={collection}
             documentId={activeDocumentId}
             onBack={() => setCurrentView("list")}
-            onSave={() => toast.success("Changes saved")}
+            onSave={() => {}}
             onError={(msg) => toast.error(msg)}
           />
         ) : null;
@@ -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/ApiKeysManager.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { apiPost } from "../lib/api";
 import { useResourceManager } from "../lib/useResourceManager";
-import { useUIStore } from "../lib/stores";
+import { useUIStore, toast } from "../lib/stores";
 import {
   Key, Plus, Trash2, Copy, CheckCircle2, Clock,
   Shield, Zap, AlertTriangle, Info, Terminal,
@@ -65,7 +65,7 @@ export function ApiKeysManager() {
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [createError, setCreateError] = useState("");
   const [rotatingId, setRotatingId] = useState<string | null>(null);
-  const { alert, confirm: kyroConfirm } = useUIStore();
+  const { confirm: kyroConfirm } = useUIStore();
 
   const handleCreateKey = async () => {
     if (!newKeyName.trim()) { setCreateError("Name is required"); return; }
@@ -92,7 +92,7 @@ export function ApiKeysManager() {
           const rotated = await apiPost<ApiKeyItem>(`/api/keys/${key.id}/rotate`);
           setNewKey(rotated);
         } catch {
-          alert({ title: "Error", message: "Failed to rotate key. Please try again." });
+          toast.error("Failed to rotate key. Please try again.");
         } finally {
           setRotatingId(null);
         }
@@ -287,7 +287,7 @@ export function ApiKeysManager() {
                   <button
                     type="button"
                     onClick={() => copyToClipboard(newKey.key!, newKey.id)}
-                    className="flex items-center justify-center gap-2 px-8 py-4 bg-[var(--kyro-primary)] text-white rounded-2xl font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
+                    className="kyro-btn kyro-btn-primary flex items-center justify-center gap-2 px-8 py-4 rounded-2xl font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg shadow-[var(--kyro-primary)]/20"
                   >
                     {copiedId === newKey.id ? <CheckCircle2 className="w-5 h-5" /> : <Copy className="w-5 h-5" />}
                     <span>{copiedId === newKey.id ? "Copied" : "Copy Key"}</span>
@@ -333,7 +333,7 @@ export function ApiKeysManager() {
               <button
                 type="button"
                 onClick={() => setIsCreateModalOpen(true)}
-                className="inline-flex items-center gap-3 px-8 py-4 bg-[var(--kyro-primary)] text-white rounded-2xl font-bold hover:scale-[1.05] transition-all shadow-xl shadow-[var(--kyro-primary)]/10"
+                className="kyro-btn kyro-btn-primary inline-flex items-center gap-3 px-8 py-4 rounded-2xl font-bold hover:scale-[1.05] transition-all shadow-xl shadow-[var(--kyro-primary)]/10"
               >
                 <Plus className="w-5 h-5" />
                 Generate API Key

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..."