@kyro-cms/admin 0.9.0 → 0.9.2

package/src/components/BrandingHub.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { apiGet, apiPatch } from "../lib/api";
+import { toast } from "../lib/stores";
 import {
   Palette,
   Tag,
@@ -25,7 +26,7 @@ export function BrandingHub() {
   useEffect(() => {
     const fetchBranding = async () => {
       try {
-        const result = await apiGet("/api/globals/site");
+        const result = await apiGet("/api/globals/site-settings");
         const data = result.data || result;
         if (data && Object.keys(data).length > 0) {
           if (data.siteName) setSiteName(data.siteName);
@@ -44,19 +45,21 @@ export function BrandingHub() {
   const handleSave = async () => {
     setSaving(true);
     try {
-      await apiPatch("/api/globals/site", {
+      await apiPatch("/api/globals/site-settings", {
         siteName,
         adminTitle,
         primaryColor,
         dashboardGreeting,
       });
       setSaved(true);
-      setTimeout(() => setSaved(false), 3000);
+      toast.success("Branding updated");
       document.documentElement.style.setProperty(
         "--kyro-primary",
         primaryColor,
       );
+      setTimeout(() => window.location.reload(), 800);
     } catch (e) {
+      toast.error("Failed to save branding");
       console.error(e);
     } finally {
       setSaving(false);
@@ -92,7 +95,7 @@ export function BrandingHub() {
             disabled={saving}
             className={`flex items-center gap-2 px-8 py-3 rounded-2xl font-bold text-sm shadow-xl transition-all active:scale-95 ${saved
               ? "bg-green-500 text-white"
-              : "bg-[var(--kyro-primary)] text-white hover:shadow-[var(--kyro-primary)]"
+              : "kyro-btn-primary hover:shadow-[var(--kyro-primary)]"
               }`}
           >
             {saving ? (

package/src/components/CreateView.tsx

@@ -5,6 +5,7 @@ import { AutoForm } from "./AutoForm";
 import { Spinner } from "./ui/Spinner";
 import { PageHeader } from "./ui/PageHeader";
 import { adminPath } from "../lib/paths";
+import { toast } from "../lib/stores";
 
 
 interface CreateViewProps {
@@ -34,6 +35,7 @@ export function CreateView({
     try {
       setSaving(true);
       await apiPost(`/api/${collection.slug}`, data);
+      toast.success(`${collection.singularLabel || collection.label || "Document"} created`);
       onSuccess();
     } catch (err) {
       onError(err instanceof Error ? err.message : "Failed to create");

package/src/components/DetailView.tsx

@@ -9,11 +9,12 @@ import { AutoForm } from "./AutoForm";
 import { ActionBar, type DocumentStatus, type SaveStatus } from "./ActionBar";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
-import { useToast } from "./ui/Toast";
-import { useUIStore } from "../lib/stores";
+import { useUIStore, toast } from "../lib/stores";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
+import { SplitButton } from "./ui/SplitButton";
 import { adminPath } from "../lib/paths";
+import { resolveFieldValue } from "../lib/resolve-field-value";
 
 
 interface DetailViewProps {
@@ -39,7 +40,6 @@ export function DetailView({
   onError,
   mode = "collection",
 }: DetailViewProps) {
-  const { addToast } = useToast();
   const { confirm, alert } = useUIStore();
   const [data, setData] = useState<Record<string, unknown>>({});
   const [originalData, setOriginalData] = useState<Record<string, unknown>>({});
@@ -94,10 +94,10 @@ export function DetailView({
       const docData = result.data || {};
       setData(docData);
       setOriginalData(docData);
-      setStatus((result.status || "draft") as DocumentStatus);
-      setCreatedAt(result.createdAt || null);
-      setUpdatedAt(result.updatedAt || null);
-      setPublishedAt(result.publishedAt || null);
+      setStatus(((docData as any)?.status || result.status || "draft") as DocumentStatus);
+      setCreatedAt(result.createdAt || (docData.createdAt as string) || null);
+      setUpdatedAt(result.updatedAt || (docData.updatedAt as string) || null);
+      setPublishedAt(result.publishedAt || (docData.publishedAt as string) || null);
     } catch {
       onError("Failed to load document");
     } finally {
@@ -134,7 +134,8 @@ export function DetailView({
             ? `/api/globals/${slug}`
             : `/api/${slug}/${documentId}`;
 
-        const result = (await apiPatch(endpoint, data) as { data?: Record<string, unknown> });
+        const isDraft = status === "draft" || (data as any)?.status === "draft";
+        const result = (await apiPatch(endpoint, data, { autoToast: false, headers: { "X-Draft": String(isDraft) } }) as { data?: Record<string, unknown> });
         const savedData = (result && (result.data || result)) || data;
 
         if (!isAutosave) {
@@ -143,6 +144,7 @@ export function DetailView({
         }
 
         setData(savedData);
+        setStatus((savedData as any)?.status || status);
         setSaveStatus("saved");
         setUpdatedAt(new Date().toISOString());
 
@@ -151,7 +153,9 @@ export function DetailView({
         setTimeout(() => setJustSaved(false), 3000);
 
         if (!isAutosave) {
-          addToast?.("success", "Saved successfully");
+          const isDraft = status === "draft" || (savedData as any)?.status === "draft";
+          if (isDraft) toast.warning("Draft saved");
+          else toast.success("Updated");
         }
 
         setTimeout(() => {
@@ -161,25 +165,29 @@ export function DetailView({
         setSaveStatus("error");
         if (!isAutosave) {
           onError("Failed to save changes");
-          addToast?.("error", "Failed to save changes");
+          toast.error("Failed to save changes");
         }
       } finally {
         setSaving(false);
       }
     },
-    [data, mode, slug, documentId, onSave, onError],
+    [data, mode, slug, documentId, status, onSave, onError],
   );
 
   const handlePublish = async () => {
     try {
       setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/publish`);
+      await apiPatch(`/api/${slug}/${documentId}`, data, {
+        autoToast: false,
+        headers: { "X-Draft": "false" },
+      } as any);
       setStatus("published");
       setPublishedAt(new Date().toISOString());
-      addToast?.("success", "Published successfully");
+      toast.success("Published successfully");
+      onSave();
     } catch {
       onError("Failed to publish");
-      addToast?.("error", "Failed to publish");
+      toast.error("Failed to publish");
     } finally {
       setSaving(false);
     }
@@ -188,10 +196,16 @@ export function DetailView({
   const handleUnpublish = async () => {
     try {
       setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/unpublish`);
+      await apiPatch(`/api/${slug}/${documentId}`, { status: 'draft' }, {
+        autoToast: false,
+        headers: { "X-Draft": "false" },
+      } as any);
       setStatus("draft");
+      toast.warning("Document unpublished");
+      onSave();
     } catch {
       onError("Failed to unpublish");
+      toast.error("Failed to unpublish");
     } finally {
       setSaving(false);
     }
@@ -199,14 +213,15 @@ export function DetailView({
 
   const handleDuplicate = async () => {
     try {
-      console.log(`[Duplicate] Calling /api/${slug}/${documentId}/duplicate`);
-      const result = await apiPost(`/api/${slug}/${documentId}/duplicate`);
-      console.log("[Duplicate] Success:", result);
-      onError("Document duplicated successfully");
-} catch (err: unknown) {
-       console.error("[Duplicate] Error:", err);
-       const message = err instanceof Error ? err.message : "Failed to duplicate document";
-       onError(message);
+      setSaving(true);
+      await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false });
+      toast.success("Document duplicated");
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Failed to duplicate document";
+      onError(message);
+      toast.error(message);
+    } finally {
+      setSaving(false);
     }
   };
 
@@ -218,12 +233,12 @@ export function DetailView({
       onConfirm: async () => {
         try {
           setDeleting(true);
-          await apiDelete(`/api/${slug}/${documentId}`);
+          await apiDelete(`/api/${slug}/${documentId}`, { autoToast: false });
           onDelete?.();
-} catch (err: unknown) {
-           console.error("[Delete] Error:", err);
-           const message = err instanceof Error ? err.message : "Failed to delete document";
-           alert({ title: "Error", message });
+          toast.error("Document deleted");
+        } catch (err: unknown) {
+          const message = err instanceof Error ? err.message : "Failed to delete document";
+          toast.error(message);
         } finally {
           setDeleting(false);
         }
@@ -263,7 +278,7 @@ export function DetailView({
           { label: mode === "global" ? "Edit" : documentId ? "Edit" : "New" }
         ]}
         title={
-          (mode === "global" ? label : (data[collection?.admin?.useAsTitle || "title"] as string || data.name as string || documentId || `New ${collection?.singularLabel || label}`))
+          (mode === "global" ? label : ((resolveFieldValue(collection?.fields as any, data, collection?.admin?.useAsTitle || "title") as string) || data.name as string || documentId || `New ${collection?.singularLabel || label}`))
         }
         metadata={[
           <Badge
@@ -325,8 +340,8 @@ export function DetailView({
               layout={isSingleLayout ? "single" : "split"}
               globalSlug={mode === "global" ? slug : undefined}
               collectionSlug={mode === "collection" ? slug : undefined}
-              onActionSuccess={(message) => addToast?.("success", message)}
-              onActionError={(message) => addToast?.("error", message)}
+              onActionSuccess={(message) => toast.success(message)}
+              onActionError={(message) => toast.error(message)}
               documentStatus={status}
               justSaved={justSaved}
             />
@@ -341,41 +356,13 @@ export function DetailView({
                     Delete
                   </button>
                 )}
-                <button
-                  type="button"
-                  onClick={() => handleSave(false)}
+                <SplitButton
+                  status={status}
+                  saveStatus={saving ? "saving" : "idle"}
+                  hasChanges={hasChanges}
+                  onPublish={() => handleSave(false)}
                   disabled={saving}
-                  className="kyro-btn kyro-btn-lg kyro-btn-primary shadow-xl flex items-center gap-2"
-                >
-                  {saving ? (
-                    <svg
-                      className="w-4 h-4 animate-spin"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-                    </svg>
-                  ) : (
-                    <svg
-                      className="w-4 h-4"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
-                      <polyline points="17 21 17 13 7 13 7 21" />
-                      <polyline points="7 3 7 8 15 8" />
-                    </svg>
-                  )}
-                  {saving
-                    ? "Saving..."
-                    : mode === "global"
-                      ? "Save Configuration"
-                      : "Save Document"}
-                </button>
+                />
               </div>
             )}
           </div>

package/src/components/DeveloperCenter.tsx

@@ -17,7 +17,7 @@ import {
 import CodeMirror from "@uiw/react-codemirror";
 import { json } from "@codemirror/lang-json";
 import { aura } from "@uiw/codemirror-theme-aura";
-import { useUIStore } from "../lib/stores";
+import { useUIStore, toast } from "../lib/stores";
 import { Modal, ModalContent, ModalActions } from "./ui/Modal";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
@@ -70,9 +70,10 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
       loadKeys();
       setShowCreateModal(false);
       setNewKeyName("");
+      toast.success("API key generated");
     } catch (e) {
       console.error(e);
-      alert({ title: "Error", message: "Failed to generate API key" });
+      toast.error("Failed to generate API key");
     }
   };
 
@@ -85,9 +86,10 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
         try {
           await apiDelete(`/api/keys/${id}`);
           loadKeys();
+          toast.success("API key revoked");
         } catch (e) {
           console.error(e);
-          alert({ title: "Error", message: "Failed to revoke API key" });
+          toast.error("Failed to revoke API key");
         }
       }
     });
@@ -180,7 +182,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
                             className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all text-[var(--kyro-text-secondary)]"
                             onClick={() => {
                               navigator.clipboard.writeText(key.key);
-                              alert({ title: "Success", message: "API key copied to clipboard" });
+                              toast.success("API key copied to clipboard");
                             }}
                           >
                             <Copy className="w-4 h-4" />
@@ -311,7 +313,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
                 type="button"
                 onClick={handleRunTest}
                 disabled={exploring || !testEndpoint}
-                className="px-8 py-4 bg-[var(--kyro-primary)] text-white rounded-[1.5rem] font-bold text-sm shadow-xl disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] transition-all flex items-center gap-3 shrink-0"
+                className="kyro-btn kyro-btn-primary px-8 py-4 rounded-[1.5rem] font-bold text-sm shadow-xl disabled:opacity-50 disabled:cursor-not-allowed hover:scale-[1.02] transition-all flex items-center gap-3 shrink-0"
               >
                 {exploring ? (
                   <RefreshCcw className="w-4 h-4 animate-spin" />
@@ -398,7 +400,7 @@ export function DeveloperCenter({ collections }: { collections: Record<string, u
           <button
             type="button"
             onClick={confirmGenerateKey}
-            className="px-8 py-3 rounded-xl font-bold text-sm bg-[var(--kyro-primary)] text-white hover:opacity-90 shadow-lg shadow-[var(--kyro-primary)]/20 transition-all"
+            className="kyro-btn kyro-btn-primary px-8 py-3 rounded-xl font-bold text-sm hover:opacity-90 shadow-lg shadow-[var(--kyro-primary)]/20 transition-all"
           >
             Generate Token
           </button>

package/src/components/FieldRenderer.tsx

@@ -9,10 +9,15 @@ import DateField from "./fields/DateField";
 import { MarkdownField } from "./fields/MarkdownField";
 import TextField from "./fields/TextField";
 import { BlocksField } from "./fields/BlocksField";
-import PortableTextField from "./fields/PortableTextField";
+import { RichTextField } from "./fields";
 import { ListField } from "./fields/ListField";
 import RelationshipField from "./fields/RelationshipField";
+import SecretField from "./fields/SecretField";
 import FieldLayout from "./fields/FieldLayout";
+import ArrayField from "./fields/ArrayField";
+import { GroupLayout } from "./fields/GroupLayout";
+import { ArrayLayout } from "./fields/ArrayLayout";
+import { setChangeSource } from "../lib/change-source";
 
 interface FieldRendererProps {
   field: Field;
@@ -29,7 +34,12 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
   error,
   disabled,
 }) => {
-  if (field.admin?.hidden) return null;
+  if (field.hidden === true || field.admin?.hidden === true) return null;
+
+  const onChangeKeystroke = (val: unknown) => {
+    setChangeSource("keystroke");
+    onChange(val);
+  };
 
   switch (field.type) {
     case "text":
@@ -39,7 +49,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <TextField
           field={field as any}
           value={value}
-          onChange={onChange}
+          onChange={onChangeKeystroke}
           error={error}
           disabled={disabled}
         />
@@ -49,7 +59,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <TextField
           field={{ ...field, variant: "textarea" } as any}
           value={value}
-          onChange={onChange}
+          onChange={onChangeKeystroke}
           error={error}
           disabled={disabled}
         />
@@ -59,7 +69,17 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <TextField
           field={{ ...field, variant: "password" } as any}
           value={value}
-          onChange={onChange}
+          onChange={onChangeKeystroke}
+          error={error}
+          disabled={disabled}
+        />
+      );
+    case "secret":
+      return (
+        <SecretField
+          field={field as any}
+          value={value as string | null | undefined}
+          onChange={onChange as (value: string) => void}
           error={error}
           disabled={disabled}
         />
@@ -105,19 +125,11 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         />
       );
     case "richtext":
-      return (field as any).hasBlocks === false ? (
-        <PortableTextField
-          field={field as any}
-          value={value}
-          onChange={onChange}
-          disabled={disabled}
-          error={error}
-        />
-      ) : (
-        <BlocksField
-          field={field as any}
+      return (
+        <RichTextField
+          field={field}
           value={value}
-          onChange={onChange}
+          onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
         />
@@ -127,7 +139,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <MarkdownField
           field={field as any}
           value={value}
-          onChange={onChange}
+          onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
         />
@@ -137,7 +149,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <CodeField
           field={field as any}
           value={value}
-          onChange={onChange}
+          onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
         />
@@ -174,6 +186,69 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
           />
         </FieldLayout>
       );
+    case "array":
+      return (
+        <ArrayLayout
+          field={field}
+          value={Array.isArray(value) ? value : []}
+          onChange={onChange}
+          disabled={disabled}
+          renderField={(nestedField, parentData, onNestedChange) => {
+            const nestedValue = parentData[nestedField.name];
+            return (
+              <FieldRenderer
+                key={nestedField.name}
+                field={nestedField}
+                value={nestedValue}
+                onChange={(val) => {
+                  onNestedChange({
+                    ...parentData,
+                    [nestedField.name]: val,
+                  });
+                }}
+                disabled={disabled}
+                error={error}
+              />
+            );
+          }}
+        />
+      );
+    case "blocks":
+      return (
+        <BlocksField
+          field={field as any}
+          value={value}
+          onChange={onChangeKeystroke}
+          disabled={disabled}
+          error={error}
+        />
+      );
+    case "group":
+      return (
+        <GroupLayout
+          field={field}
+          value={value as Record<string, unknown> | null}
+          onChange={onChange}
+          renderField={(nestedField, parentData, onNestedChange) => {
+            const nestedValue = parentData[nestedField.name];
+            return (
+              <FieldRenderer
+                key={nestedField.name}
+                field={nestedField}
+                value={nestedValue}
+                onChange={(val) => {
+                  onNestedChange({
+                    ...parentData,
+                    [nestedField.name]: val,
+                  });
+                }}
+                disabled={disabled}
+                error={error}
+              />
+            );
+          }}
+        />
+      );
     case "color":
       return (
         <FieldLayout field={field} error={error}>