@kyro-cms/admin 0.9.0 → 0.9.1

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

@@ -14,6 +14,7 @@ import { useUIStore } from "../lib/stores";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
 import { adminPath } from "../lib/paths";
+import { resolveFieldValue } from "../lib/resolve-field-value";
 
 
 interface DetailViewProps {
@@ -94,10 +95,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)?.publishStatus || 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 +135,7 @@ export function DetailView({
             ? `/api/globals/${slug}`
             : `/api/${slug}/${documentId}`;
 
-        const result = (await apiPatch(endpoint, data) as { data?: Record<string, unknown> });
+        const result = (await apiPatch(endpoint, data, { autoToast: false }) 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)?.publishStatus || status);
         setSaveStatus("saved");
         setUpdatedAt(new Date().toISOString());
 
@@ -151,7 +153,8 @@ export function DetailView({
         setTimeout(() => setJustSaved(false), 3000);
 
         if (!isAutosave) {
-          addToast?.("success", "Saved successfully");
+          const isDraft = status === "draft" || (savedData as any)?.publishStatus === "draft";
+          addToast?.(isDraft ? "warning" : "success", isDraft ? "Draft saved" : "Updated");
         }
 
         setTimeout(() => {
@@ -173,7 +176,7 @@ export function DetailView({
   const handlePublish = async () => {
     try {
       setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/publish`);
+      await apiPost(`/api/${slug}/${documentId}/publish`, undefined, { autoToast: false });
       setStatus("published");
       setPublishedAt(new Date().toISOString());
       addToast?.("success", "Published successfully");
@@ -188,10 +191,12 @@ export function DetailView({
   const handleUnpublish = async () => {
     try {
       setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/unpublish`);
+      await apiPost(`/api/${slug}/${documentId}/unpublish`, undefined, { autoToast: false });
       setStatus("draft");
+      addToast?.("warning", "Document unpublished");
     } catch {
       onError("Failed to unpublish");
+      addToast?.("error", "Failed to unpublish");
     } finally {
       setSaving(false);
     }
@@ -199,14 +204,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 });
+      addToast?.("success", "Document duplicated");
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : "Failed to duplicate document";
+      onError(message);
+      addToast?.("error", message);
+    } finally {
+      setSaving(false);
     }
   };
 
@@ -218,12 +224,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 });
+          addToast?.("error", "Document deleted");
+        } catch (err: unknown) {
+          const message = err instanceof Error ? err.message : "Failed to delete document";
+          addToast?.("error", message);
         } finally {
           setDeleting(false);
         }
@@ -263,7 +269,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
@@ -341,41 +347,50 @@ export function DetailView({
                     Delete
                   </button>
                 )}
-                <button
-                  type="button"
-                  onClick={() => 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" />
+                {status === "published" && !hasChanges && !saving ? (
+                  <span className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg text-xs font-bold bg-green-100 text-green-700 border border-green-200 cursor-not-allowed shadow-xl">
+                    <svg width="14" height="14" 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>
-                  ) : (
-                    <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>
+                    Published
+                  </span>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => 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={onChange}
+          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}>

package/src/components/ListView.tsx

@@ -4,7 +4,7 @@ import { Shimmer } from "./ui/Shimmer";
 import { Plus } from "./ui/icons";
 import { apiGet, apiDelete, withCacheBust } from "../lib/api";
 
-import { useAuthStore } from "../lib/stores";
+import { useAuthStore, toast } from "../lib/stores";
 import { useUIStore } from "../lib/stores";
 import { adminPath as ADMIN_BASE } from "../lib/paths";
 import { PageHeader } from "./ui/PageHeader";
@@ -12,6 +12,7 @@ import { Badge } from "./ui/Badge";
 
 
 import type { CollectionConfig, Field } from "@kyro-cms/core";
+import { resolveFieldValue } from "../lib/resolve-field-value";
 
 type FieldConfig = Field;
 
@@ -114,7 +115,7 @@ export function ListView({
   function flattenFields(fields: FieldConfig[]): FieldConfig[] {
     const result: FieldConfig[] = [];
     for (const field of fields || []) {
-      if (!field.name || field.admin?.hidden || field.name === "id") continue;
+      if (!field.name || field.hidden === true || field.admin?.hidden || field.name === "id") continue;
       if (field.type === "tabs" && field.tabs) {
         for (const tab of field.tabs) {
           if (tab.fields) {
@@ -197,7 +198,21 @@ export function ListView({
   }, []);
 
   const displayFields = useMemo(
-    () => allFields.filter((f): f is typeof f & { name: string } => !!f.name && visibleColumns.has(f.name)),
+    () => {
+      const fields = allFields.filter((f): f is typeof f & { name: string } => !!f.name && visibleColumns.has(f.name));
+      if (visibleColumns.has("publishStatus")) {
+        fields.push({
+          name: "publishStatus",
+          type: "select",
+          label: "Status",
+          options: [
+            { value: "draft", label: "Draft" },
+            { value: "published", label: "Published" },
+          ],
+        } as any);
+      }
+      return fields;
+    },
     [allFields, visibleColumns],
   );
 
@@ -211,21 +226,8 @@ export function ListView({
 
   function extractFieldValue(doc: any, field: FieldConfig): any {
     if (!field.name) return null;
-    if (doc[field.name] !== undefined && doc[field.name] !== null) {
-      return doc[field.name];
-    }
-    if (field.type === "group" && typeof doc[field.name] === "object") {
-      const firstFieldName = field.fields?.[0]?.name;
-      if (
-        firstFieldName &&
-        doc[field.name][firstFieldName] !== undefined
-      ) {
-        return doc[field.name][firstFieldName];
-      }
-      const firstKey = Object.keys(doc[field.name] || {})[0];
-      if (firstKey) return doc[field.name][firstKey];
-    }
-    return null;
+    const val = resolveFieldValue(collection.fields as any, doc, field.name);
+    return val ?? null;
   }
 
   const fetchDocs = useCallback(async () => {
@@ -303,9 +305,10 @@ export function ListView({
           }
           setSelectedIds(new Set());
           fetchDocs();
+          toast.success("Documents deleted");
         } catch (error) {
           console.error("Bulk delete failed:", error);
-          alert({ title: "Error", message: "Failed to delete some documents" });
+          toast.error("Failed to delete some documents");
         }
       }
     });
@@ -320,9 +323,10 @@ export function ListView({
         try {
           await apiDelete(`/api/${collectionSlug}/${id}`);
           fetchDocs();
+          toast.success("Document deleted");
         } catch (error) {
           console.error("Delete failed:", error);
-          alert({ title: "Error", message: "Failed to delete document" });
+          toast.error("Failed to delete document");
         }
       }
     });
@@ -891,6 +895,15 @@ function formatCellValue(value: any, type?: string): string {
     });
   }
 
+  if (Array.isArray(value)) {
+    return value.map(item => {
+      if (item && typeof item === "object") {
+        return item.title || item.name || item.email || item.filename || item.url || JSON.stringify(item).slice(0, 30);
+      }
+      return String(item ?? "").slice(0, 30);
+    }).filter(Boolean).join(", ");
+  }
+
   if (typeof value === "object") {
     if (value.title) return value.title;
     if (value.name) return value.name;