@kyro-cms/admin 0.9.1 → 0.9.3

package/src/components/DetailView.tsx

@@ -9,10 +9,10 @@ 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";
 
@@ -40,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>>({});
@@ -95,7 +94,7 @@ export function DetailView({
       const docData = result.data || {};
       setData(docData);
       setOriginalData(docData);
-      setStatus(((docData as any)?.publishStatus || result.status || "draft") as DocumentStatus);
+      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);
@@ -135,7 +134,8 @@ export function DetailView({
             ? `/api/globals/${slug}`
             : `/api/${slug}/${documentId}`;
 
-        const result = (await apiPatch(endpoint, data, { autoToast: false }) 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) {
@@ -144,7 +144,7 @@ export function DetailView({
         }
 
         setData(savedData);
-        setStatus((savedData as any)?.publishStatus || status);
+        setStatus((savedData as any)?.status || status);
         setSaveStatus("saved");
         setUpdatedAt(new Date().toISOString());
 
@@ -153,8 +153,9 @@ export function DetailView({
         setTimeout(() => setJustSaved(false), 3000);
 
         if (!isAutosave) {
-          const isDraft = status === "draft" || (savedData as any)?.publishStatus === "draft";
-          addToast?.(isDraft ? "warning" : "success", isDraft ? "Draft saved" : "Updated");
+          const isDraft = status === "draft" || (savedData as any)?.status === "draft";
+          if (isDraft) toast.warning("Draft saved");
+          else toast.success("Updated");
         }
 
         setTimeout(() => {
@@ -164,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`, undefined, { autoToast: false });
+      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);
     }
@@ -191,12 +196,16 @@ export function DetailView({
   const handleUnpublish = async () => {
     try {
       setSaving(true);
-      await apiPost(`/api/${slug}/${documentId}/unpublish`, undefined, { autoToast: false });
+      await apiPatch(`/api/${slug}/${documentId}`, { status: 'draft' }, {
+        autoToast: false,
+        headers: { "X-Draft": "false" },
+      } as any);
       setStatus("draft");
-      addToast?.("warning", "Document unpublished");
+      toast.warning("Document unpublished");
+      onSave();
     } catch {
       onError("Failed to unpublish");
-      addToast?.("error", "Failed to unpublish");
+      toast.error("Failed to unpublish");
     } finally {
       setSaving(false);
     }
@@ -206,11 +215,11 @@ export function DetailView({
     try {
       setSaving(true);
       await apiPost(`/api/${slug}/${documentId}/duplicate`, undefined, { autoToast: false });
-      addToast?.("success", "Document duplicated");
+      toast.success("Document duplicated");
     } catch (err: unknown) {
       const message = err instanceof Error ? err.message : "Failed to duplicate document";
       onError(message);
-      addToast?.("error", message);
+      toast.error(message);
     } finally {
       setSaving(false);
     }
@@ -226,10 +235,10 @@ export function DetailView({
           setDeleting(true);
           await apiDelete(`/api/${slug}/${documentId}`, { autoToast: false });
           onDelete?.();
-          addToast?.("error", "Document deleted");
+          toast.error("Document deleted");
         } catch (err: unknown) {
           const message = err instanceof Error ? err.message : "Failed to delete document";
-          addToast?.("error", message);
+          toast.error(message);
         } finally {
           setDeleting(false);
         }
@@ -331,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}
             />
@@ -347,50 +356,13 @@ export function DetailView({
                     Delete
                   </button>
                 )}
-                {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>
-                    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>
-                )}
+                <SplitButton
+                  status={status}
+                  saveStatus={saving ? "saving" : "idle"}
+                  hasChanges={hasChanges}
+                  onPublish={() => handleSave(false)}
+                  disabled={saving}
+                />
               </div>
             )}
           </div>

package/src/components/FieldRenderer.tsx

@@ -218,7 +218,7 @@ export const FieldRenderer: React.FC<FieldRendererProps> = ({
         <BlocksField
           field={field as any}
           value={value}
-          onChange={onChange}
+          onChange={onChangeKeystroke}
           disabled={disabled}
           error={error}
         />

package/src/components/ListView.tsx

@@ -1,3 +1,4 @@
+import { Search, Filter, Columns3, X, Trash2, Archive, ChevronUp, Edit2 } from "./ui/icons";
 import { useState, useEffect, useMemo, useCallback, useRef } from "react";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
@@ -9,6 +10,7 @@ import { useUIStore } from "../lib/stores";
 import { adminPath as ADMIN_BASE } from "../lib/paths";
 import { PageHeader } from "./ui/PageHeader";
 import { Badge } from "./ui/Badge";
+import { Pagination } from "./ui/Pagination";
 
 
 import type { CollectionConfig, Field } from "@kyro-cms/core";
@@ -200,9 +202,9 @@ export function ListView({
   const displayFields = useMemo(
     () => {
       const fields = allFields.filter((f): f is typeof f & { name: string } => !!f.name && visibleColumns.has(f.name));
-      if (visibleColumns.has("publishStatus")) {
+      if (visibleColumns.has("status")) {
         fields.push({
-          name: "publishStatus",
+          name: "status",
           type: "select",
           label: "Status",
           options: [
@@ -358,19 +360,7 @@ export function ListView({
       <div className="surface-tile p-4 flex flex-col lg:flex-row gap-4 items-start lg:items-center">
         {/* Search */}
         <div className="relative flex-1 max-w-md">
-          <svg
-            className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)]"
-            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..."
@@ -390,19 +380,7 @@ export function ListView({
               : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
               }`}
           >
-            <svg
-              className="w-4 h-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"
-              />
-            </svg>
+            <Filter className="w-4 h-4" />
             Filters
             {filters.length > 0 && (
               <span className="ml-1 px-1.5 py-0.5 bg-[var(--kyro-sidebar-text-active)] text-[var(--kyro-sidebar-active)] rounded-full text-xs">
@@ -418,19 +396,7 @@ export function ListView({
               onClick={() => setShowColumns(!showColumns)}
               className="flex items-center gap-2 px-4 py-2 rounded-xl font-bold text-sm bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
             >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-                />
-              </svg>
+              <Columns3 className="w-4 h-4" />
               Columns
             </button>
             {showColumns && (
@@ -490,19 +456,7 @@ export function ListView({
               onClick={addFilter}
               className="flex items-center gap-2 px-3 py-1.5 text-sm font-bold text-[var(--kyro-sidebar-active)] hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-all"
             >
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M12 5v14M5 12h14"
-                />
-              </svg>
+              <Plus className="w-4 h-4" />
               Add Filter
             </button>
           </div>
@@ -552,19 +506,7 @@ export function ListView({
                   onClick={() => removeFilter(index)}
                   className="p-2 text-[var(--kyro-text-muted)] hover:text-red-500 transition-colors"
                 >
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
+                  <X className="w-4 h-4" />
                 </button>
               </div>
             ))}
@@ -590,19 +532,7 @@ export function ListView({
                 onClick={handleBulkDelete}
                 className="flex items-center gap-2 px-4 py-2 bg-red-500 text-white rounded-lg font-bold text-sm hover:bg-red-600 transition-all"
               >
-                <svg
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2"
-                    d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                  />
-                </svg>
+                <Trash2 className="w-4 h-4" />
                 Delete Selected
               </button>
             )}
@@ -626,19 +556,7 @@ export function ListView({
         ) : docs.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-16 px-8">
             <div className="w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-4">
-              <svg
-                className="w-8 h-8 text-[var(--kyro-text-muted)]"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="1.5"
-                  d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-                />
-              </svg>
+              <Archive className="w-4 h-4" />
             </div>
             <p className="font-medium text-[var(--kyro-text-primary)] text-base">
               No documents found
@@ -654,19 +572,7 @@ export function ListView({
                 onClick={handleCreate}
                 className="mt-4 kyro-btn kyro-btn-md kyro-btn-primary shadow-md flex items-center gap-2"
               >
-                <svg
-                  className="w-3.5 h-3.5"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth="2.5"
-                    d="M12 5v14M5 12h14"
-                  />
-                </svg>
+                <Plus className="w-4 h-4" />
                 Create{" "}
 {String(collection.singularLabel || collection.label || collectionSlug)}
               </button>
@@ -697,19 +603,7 @@ export function ListView({
                         {checkTabbedValue(displayFields, field.type) ??
                           (field.label || field.name)}
                         {sort && sort.field === field.name && (
-                          <svg
-                            className={`w-3 h-3 ${sort.direction === "desc" ? "rotate-180" : ""}`}
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth="2"
-                              d="M5 15l7-7 7 7"
-                            />
-                          </svg>
+                          <ChevronUp className="w-4 h-4" />
                         )}
                       </div>
                     </th>
@@ -779,19 +673,7 @@ export function ListView({
                           className="flex items-center gap-2 px-3 py-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-all"
                           title={canUpdate ? "Edit" : "View"}
                         >
-                          <svg
-                            className="w-4 h-4"
-                            fill="none"
-                            stroke="currentColor"
-                            viewBox="0 0 24 24"
-                          >
-                            <path
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                              strokeWidth="2"
-                              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                            />
-                          </svg>
+                          <Edit2 className="w-4 h-4" />
                         </button>
                         {canDelete && (
                           <button
@@ -800,19 +682,7 @@ export function ListView({
                             className="inline-flex items-center justify-center w-8 h-8 rounded-md text-[var(--kyro-text-muted)] hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-500/10 transition-colors"
                             title="Delete"
                           >
-                            <svg
-                              className="w-4 h-4"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth="2"
-                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                              />
-                            </svg>
+                            <Trash2 className="w-4 h-4" />
                           </button>
                         )}
                       </div>
@@ -826,59 +696,17 @@ export function ListView({
       </div>
 
       {/* Pagination */}
-      {totalDocs > limit && (
-        <div className="flex flex-col lg:flex-row items-center justify-between gap-4 px-2">
-          <div className="flex items-center gap-4">
-            <span className="text-sm text-[var(--kyro-text-secondary)] font-medium">
-              Showing{" "}
-              <span className="text-[var(--kyro-text-primary)] font-bold">
-                {(page - 1) * limit + 1}
-              </span>{" "}
-              to{" "}
-              <span className="text-[var(--kyro-text-primary)] font-bold">
-                {Math.min(page * limit, totalDocs)}
-              </span>{" "}
-              of{" "}
-              <span className="text-[var(--kyro-text-primary)] font-bold">
-                {totalDocs}
-              </span>
-            </span>
-            <select
-              value={limit}
-              onChange={(e) => {
-                setLimit(Number(e.target.value));
-                setPage(1);
-              }}
-              className="px-2 py-1 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)]"
-            >
-              <option value={10}>10 / page</option>
-              <option value={25}>25 / page</option>
-              <option value={50}>50 / page</option>
-              <option value={100}>100 / page</option>
-            </select>
-          </div>
-          <div className="flex gap-2">
-            {page > 1 && (
-              <button
-                type="button"
-                onClick={() => setPage(page - 1)}
-                className="px-4 py-2 border border-[var(--kyro-border)] rounded-lg text-sm font-medium text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-colors"
-              >
-                ← Previous
-              </button>
-            )}
-            {page < totalPages && (
-              <button
-                type="button"
-                onClick={() => setPage(page + 1)}
-                className="px-4 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg text-sm font-bold hover:opacity-90 transition-all"
-              >
-                Next →
-              </button>
-            )}
-          </div>
-        </div>
-      )}
+      <Pagination
+        page={page}
+        totalPages={totalPages}
+        totalDocs={totalDocs}
+        limit={limit}
+        onPageChange={setPage}
+        onLimitChange={(newLimit) => {
+          setLimit(newLimit);
+          setPage(1);
+        }}
+      />
     </div>
   );
 }