@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/fields/BlocksField.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
-import { useBlocksStore, createNewBlock } from "./extensions/blocksStore";
+import { useStore } from "zustand";
+import { BlocksContext, createBlocksStore, createNewBlock, type BlocksStoreApi } from "./extensions/blocksStore";
 import { BlockDrawer, DraggableBlockType } from "../ui/BlockDrawer";
-import { Plus, Box } from "lucide-react";
+import { Plus, Box } from "../ui/icons";
 import {
   BLOCK_COMPONENTS,
   getBlockComponent,
@@ -27,9 +28,9 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 
 interface BlocksFieldProps {
-  field: any;
-  value: any;
-  onChange?: (value: any) => void;
+  field: Record<string, unknown>;
+  value: unknown[];
+  onChange?: (value: unknown[]) => void;
   onBlocksChange?: () => void;
   error?: string;
   disabled?: boolean;
@@ -37,14 +38,14 @@ interface BlocksFieldProps {
   justSaved?: boolean;
 }
 
-import { GripVertical } from "lucide-react";
+import { GripVertical } from "../ui/icons";
 
 // Sortable block wrapper for drag-and-drop
 const SortableBlockComponent = ({
   block,
   index,
 }: {
-  block: any;
+  block: Record<string, unknown>;
   index: number;
 }) => {
   const {
@@ -98,44 +99,53 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   justSaved,
 }) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const { blocks, setBlocks, addBlock, setOnBlocksChange } = useBlocksStore();
+  const storeRef = useRef<BlocksStoreApi | null>(null);
+  if (!storeRef.current) {
+    storeRef.current = createBlocksStore();
+  }
+  const store = storeRef.current;
+
+  const blocks = useStore(store, (s) => s.blocks);
   const [activeDrag, setActiveDrag] = useState<Active | null>(null);
 
   // Register blocks change callback
   useEffect(() => {
     if (onBlocksChange) {
-      setOnBlocksChange(onBlocksChange);
+      store.getState().setOnBlocksChange(onBlocksChange);
     }
     return () => {
-      setOnBlocksChange(() => {});
+      store.getState().setOnBlocksChange(() => { });
     };
-  }, [onBlocksChange, setOnBlocksChange]);
+  }, [onBlocksChange, store]);
 
   // Sync external value changes (e.g., auto-save restore) to store
+  // Track last-synced value so we don't revert our own internal mutations
+  const lastValueRef = useRef<unknown[] | null>(null);
   useEffect(() => {
-    const currentIds = blocks.map((b) => b.id).join(",");
-    const valueIds = (value || []).map((b: any) => b.id).join(",");
+    const valueArray = Array.isArray(value) ? value : [];
+    const lastValueArray = lastValueRef.current || [];
+    const valueIds = valueArray.map((b: Record<string, unknown>) => b.id).join(",");
+    const lastValueIds = lastValueArray.map((b: Record<string, unknown>) => b.id).join(",");
 
-    // Only update if the IDs don't match (external change)
-    if (valueIds !== currentIds) {
-      if (value && Array.isArray(value) && value.length > 0) {
-        setBlocks(value);
-      } else if (!value || (Array.isArray(value) && value.length === 0)) {
-        setBlocks([]);
-      }
+    if (valueIds !== lastValueIds) {
+      console.log("BlocksField sync: value=", value, "valueIds=", valueIds, "lastValueIds=", lastValueIds);
+      store.getState().setBlocks(valueArray);
+      lastValueRef.current = [...valueArray];
     }
-  }, [value]);
+  }, [value, field.name, store]);
 
   // Debounced sync of store changes back to parent form to reduce re-renders
   const onChangeTimer = useRef<number | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
   useEffect(() => {
-    if (!onChange) return;
+    if (!onChangeRef.current) return;
     if (onChangeTimer.current) {
       window.clearTimeout(onChangeTimer.current);
       onChangeTimer.current = null;
     }
     onChangeTimer.current = window.setTimeout(() => {
-      onChange(blocks);
+      onChangeRef.current?.(blocks);
     }, 250);
     return () => {
       if (onChangeTimer.current) {
@@ -143,7 +153,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
         onChangeTimer.current = null;
       }
     };
-  }, [blocks, onChange]);
+  }, [blocks]);
 
   // Determine left border style based on document status
   const getBorderClass = () => {
@@ -162,9 +172,9 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
 
   const handleAddBlock = useCallback(
     (blockType: string) => {
-      addBlock(blockType);
+      store.getState().addBlock(blockType);
     },
-    [addBlock],
+    [store],
   );
 
   // Set up dnd-kit sensors
@@ -196,15 +206,14 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
         const containerId = over.id.toString().replace("container-", "");
         const container = blocks.find((b) => b.id === containerId);
         if (container) {
-          const { updateBlock } = useBlocksStore.getState();
           const newBlock = createNewBlock(blockType);
-          updateBlock(containerId, {
+          store.getState().updateBlock(containerId, {
             children: [...(container.children || []), newBlock],
           });
         }
       } else {
         // Dropped on root level - add as top-level block
-        addBlock(blockType);
+        handleAddBlock(blockType);
       }
       return;
     }
@@ -218,7 +227,7 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
         const newBlocks = [...blocks];
         const [movedBlock] = newBlocks.splice(oldIndex, 1);
         newBlocks.splice(newIndex, 0, movedBlock);
-        setBlocks(newBlocks);
+        store.getState().setBlocks(newBlocks);
       }
     }
   };
@@ -226,98 +235,100 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   // Render active drag overlay
   const activeBlock = activeDrag
     ? blockCategories
-        .flatMap((cat) => cat.blocks)
-        .find((b) => `drawer-${b.type}` === activeDrag.id) ||
-      blocks.find((b) => b.id === activeDrag.id)
+      .flatMap((cat) => cat.blocks)
+      .find((b) => `drawer-${b.type}` === activeDrag.id) ||
+    blocks.find((b) => b.id === activeDrag.id)
     : null;
 
-  const activeBlockLabel = activeBlock
-    ? "label" in activeBlock
-      ? (activeBlock as any).label
-      : activeBlock.type
-    : "Block";
+const activeBlockLabel = activeBlock
+     ? "label" in activeBlock
+       ? (activeBlock as Record<string, unknown>).label
+       : activeBlock.type
+     : "Block";
 
   const borderClass = getBorderClass();
 
   return (
-    <div className={`kyro-form-field ${borderClass}`}>
-      <DndContext
-        sensors={sensors}
-        collisionDetection={closestCenter}
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
-      >
-        {/* Block Builder Toolbar */}
-        <div className="flex items-center justify-between mb-2">
-          <label className="kyro-form-label">{field.label || field.name}</label>
-          <button
-            type="button"
-            onClick={() => setIsDrawerOpen(true)}
-            disabled={disabled}
-            className="flex items-center gap-2 px-3 py-2 text-sm text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)]/30 rounded-md transition-colors disabled:opacity-50"
-          >
-            <Plus className="w-4 h-4" />
-            Add Block
-          </button>
-          <BlockDrawer
-            open={isDrawerOpen}
-            onClose={() => setIsDrawerOpen(false)}
-            onSelect={handleAddBlock}
+    <BlocksContext.Provider value={store}>
+      <div className={`kyro-form-field ${borderClass}`}>
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragEnd={handleDragEnd}
+        >
+          {/* Block Builder Toolbar */}
+          <div className="flex items-center justify-between mb-2">
+            <label className="kyro-form-label">{field.label || field.name}</label>
+            <button
+              type="button"
+              onClick={() => setIsDrawerOpen(true)}
+              disabled={disabled}
+              className="flex items-center gap-2 px-3 py-2 text-sm text-[var(--kyro-primary)] hover:bg-[var(--kyro-surface-accent)]/30 rounded-md transition-colors disabled:opacity-50 font-semibold"
+            >
+              <Plus className="w-4 h-4" />
+              Add Block
+            </button>
+            <BlockDrawer
+              open={isDrawerOpen}
+              onClose={() => setIsDrawerOpen(false)}
+              onSelect={handleAddBlock}
+            >
+              <div className="space-y-4">
+                {blockCategories.map((category) => (
+                  <div key={category.title}>
+                    <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] mb-2  tracking-wider">
+                      {category.title}
+                    </h3>
+                    <div className="grid grid-cols-3 gap-2">
+                      {category.blocks.map((block) => (
+                        <DraggableBlockType
+                          key={block.type}
+                          block={block}
+                          onSelect={handleAddBlock}
+                        >
+                          <div className="w-6 h-6 flex items-center justify-center rounded group-hover:bg-[var(--kyro-primary)]/10 group-hover:text-[var(--kyro-primary)] transition-all duration-300">
+                            <span className="text-[var(--kyro-text-muted)]">
+                              {blockIcons[
+                                block.icon as keyof typeof blockIcons
+                              ] || <Box className="w-4 h-4" />}
+                            </span>
+                          </div>
+                        </DraggableBlockType>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </BlockDrawer>
+          </div>
+
+          {/* Block List with Drag-and-Drop */}
+          <SortableContext
+            items={blocks.map((b) => b.id)}
+            strategy={verticalListSortingStrategy}
           >
             <div className="space-y-4">
-              {blockCategories.map((category) => (
-                <div key={category.title}>
-                  <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] mb-2 uppercase tracking-wider">
-                    {category.title}
-                  </h3>
-                  <div className="grid grid-cols-3 gap-2">
-                    {category.blocks.map((block) => (
-                      <DraggableBlockType
-                        key={block.type}
-                        block={block}
-                        onSelect={handleAddBlock}
-                      >
-                        <div className="w-6 h-6 flex items-center justify-center rounded group-hover:bg-[var(--kyro-primary)]/10 group-hover:text-[var(--kyro-primary)] transition-all duration-300">
-                          <span className="text-[var(--kyro-text-muted)]">
-                            {blockIcons[
-                              block.icon as keyof typeof blockIcons
-                            ] || <Box className="w-4 h-4" />}
-                          </span>
-                        </div>
-                      </DraggableBlockType>
-                    ))}
-                  </div>
-                </div>
+              {blocks.map((block, index) => (
+                <SortableBlock key={block.id || index} block={block} index={index} />
               ))}
+              {blocks.length === 0 && (
+                <div className="text-center py-12 text-[var(--kyro-text-muted)] border-2 border-dashed border-[var(--kyro-border)] rounded-lg">
+                  Click the button above to add your first block
+                </div>
+              )}
             </div>
-          </BlockDrawer>
-        </div>
-
-        {/* Block List with Drag-and-Drop */}
-        <SortableContext
-          items={blocks.map((b) => b.id)}
-          strategy={verticalListSortingStrategy}
-        >
-          <div className="space-y-4">
-            {blocks.map((block, index) => (
-              <SortableBlock key={block.id} block={block} index={index} />
-            ))}
-            {blocks.length === 0 && (
-              <div className="text-center py-12 text-[var(--kyro-text-muted)] border-2 border-dashed border-[var(--kyro-border)] rounded-lg">
-                Click the button above to add your first block
+          </SortableContext>
+          <DragOverlay>
+            {activeDrag && activeBlock && (
+              <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-primary)] rounded-md p-3 shadow-lg">
+                {(activeBlock as Record<string, unknown>).label || activeBlock.type || "Block"}
               </div>
             )}
-          </div>
-        </SortableContext>
-        <DragOverlay>
-          {activeDrag && activeBlock && (
-            <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-primary)] rounded-md p-3 shadow-lg">
-              {(activeBlock as any).label || activeBlock.type || "Block"}
-            </div>
-          )}
-        </DragOverlay>
-      </DndContext>
-      {error && <p className="kyro-form-error">{error}</p>}
-    </div>
+          </DragOverlay>
+        </DndContext>
+        {error && <p className="kyro-form-error">{error}</p>}
+      </div>
+    </BlocksContext.Provider>
   );
 };

package/src/components/fields/ButtonField.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ExternalLink } from "lucide-react";
+import { ExternalLink } from "../ui/icons";
 
 interface ButtonFieldProps {
   text?: string;

package/src/components/fields/CheckboxField.tsx

@@ -1,4 +1,5 @@
 import type { CheckboxField as CheckboxFieldType } from "@kyro-cms/core/client";
+import FieldLayout from "./FieldLayout";
 
 interface CheckboxFieldComponentProps {
   field: CheckboxFieldType;
@@ -15,33 +16,31 @@ export default function CheckboxField({
   error,
   disabled,
 }: CheckboxFieldComponentProps) {
+  const isReadOnly = field.admin?.readOnly;
+
   return (
-    <div className="space-y-1">
-      <label className="flex items-center gap-2 cursor-pointer">
+    <FieldLayout
+      field={field}
+      error={error}
+      hideLabel={true}
+    >
+      <label className="flex items-center gap-2.5 cursor-pointer group py-0.5">
         <input
           type="checkbox"
           checked={value}
           onChange={(e) => onChange?.(e.target.checked)}
-          disabled={disabled || field.admin?.readOnly}
-          className={`w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-sidebar-active)] focus:ring-[var(--kyro-sidebar-active)] ${
-            disabled || field.admin?.readOnly ? "opacity-50" : ""
+          disabled={disabled || isReadOnly}
+          className={`w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)] transition-all ${
+            disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
           }`}
         />
-        <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+        <span className="text-sm font-semibold text-[var(--kyro-text-primary)] tracking-tight group-hover:text-[var(--kyro-primary)] transition-colors">
           {field.label || field.name}
           {field.required && (
             <span className="text-[var(--kyro-error)] ml-1">*</span>
           )}
         </span>
       </label>
-      {field.admin?.description && !error && (
-        <p className="text-xs text-[var(--kyro-text-secondary)] ml-6">
-          {field.admin.description}
-        </p>
-      )}
-      {error && (
-        <p className="text-xs text-[var(--kyro-error)] ml-6">{error}</p>
-      )}
-    </div>
+    </FieldLayout>
   );
 }

package/src/components/fields/ChildrenField.tsx

@@ -3,8 +3,8 @@ import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
 
 interface ChildrenFieldProps {
   blockId: string;
-  children: any[];
-  onUpdateChildren: (newChildren: any[]) => void;
+  children: Record<string, unknown>[];
+  onUpdateChildren: (newChildren: Record<string, unknown>[]) => void;
   label?: string;
   compact?: boolean;
 }

package/src/components/fields/CodeField.tsx

@@ -30,7 +30,7 @@ const LANGUAGES = [
   { value: "markdown", label: "Markdown" },
 ];
 
-const languageExtensions: Record<string, () => Promise<any>> = {
+const languageExtensions: Record<string, () => Promise<unknown>> = {
   javascript: () =>
     import("@codemirror/lang-javascript").then((m) =>
       m.javascript({ jsx: true, typescript: true }),
@@ -74,7 +74,7 @@ export const CodeField: React.FC<CodeFieldProps> = ({
 }) => {
   const [isMounted, setIsMounted] = useState(false);
   const [isDark, setIsDark] = useState(false);
-  const [extensions, setExtensions] = useState<any[]>([]);
+  const [extensions, setExtensions] = useState<unknown[]>([]);
   const [loading, setLoading] = useState(false);
   const [copied, setCopied] = useState(false);
   const [isFullScreen, setIsFullScreen] = useState(false);
@@ -243,7 +243,7 @@ export const CodeField: React.FC<CodeFieldProps> = ({
           }
         >
           <CodeMirrorEditor
-            value={value}
+            value={value == null ? "" : value}
             height={isFullScreen ? "calc(100vh - 100px)" : "280px"}
             width="100%"
             extensions={extensions}

package/src/components/fields/ColumnsField.tsx

@@ -3,14 +3,14 @@ import { ChildBlocksTree } from "../blocks/ChildBlocksTree";
 
 interface ColumnData {
   id: number;
-  children: any[];
+  children: Record<string, unknown>[];
 }
 
 interface ColumnsFieldProps {
   columns?: number;
   columnData?: ColumnData[];
   onColumnsChange: (columns: number) => void;
-  onUpdateColumnChildren: (columnIndex: number, newChildren: any[]) => void;
+  onUpdateColumnChildren: (columnIndex: number, newChildren: Record<string, unknown>[]) => void;
   compact?: boolean;
 }
 

package/src/components/fields/DateField.tsx

@@ -1,4 +1,5 @@
 import type { DateField as DateFieldType } from "@kyro-cms/core/client";
+import FieldLayout from "./FieldLayout";
 
 interface DateFieldComponentProps {
   field: DateFieldType;
@@ -15,40 +16,26 @@ export default function DateField({
   error,
   disabled,
 }: DateFieldComponentProps) {
+  const isReadOnly = field.admin?.readOnly;
+
   return (
-    <div className="space-y-1">
-      {field.label && (
-        <label className="block text-sm font-medium text-[var(--kyro-text-primary)]">
-          {field.label}
-          {field.required && (
-            <span className="text-[var(--kyro-error)] ml-1">*</span>
-          )}
-        </label>
-      )}
+    <FieldLayout
+      field={field}
+      error={error}
+    >
       <input
         type={field.time ? "datetime-local" : "date"}
-        value={value}
+        id={field.name}
+        value={value == null ? "" : value}
         onChange={(e) => onChange?.(e.target.value)}
-        disabled={disabled || field.admin?.readOnly}
+        disabled={disabled || isReadOnly}
         min={field.minDate}
         max={field.maxDate}
         required={field.required}
-        className={`w-full px-3 py-2 border rounded-md text-sm transition-colors ${
-          error
-            ? "border-[var(--kyro-error)] focus:border-[var(--kyro-error)] focus:ring-[var(--kyro-error)]"
-            : "border-[var(--kyro-border)] focus:border-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
-        } ${
-          disabled || field.admin?.readOnly
-            ? "bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-secondary)] opacity-50"
-            : "bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)]"
+        className={`kyro-form-input ${
+          disabled || isReadOnly ? "opacity-50 cursor-not-allowed" : ""
         }`}
       />
-      {field.admin?.description && !error && (
-        <p className="text-xs text-[var(--kyro-text-muted)]">
-          {field.admin.description}
-        </p>
-      )}
-      {error && <p className="text-xs text-[var(--kyro-error)]">{error}</p>}
-    </div>
+    </FieldLayout>
   );
 }

package/src/components/fields/EditorClient.tsx

@@ -40,24 +40,24 @@ import {
   ChevronDown,
   X,
   ExternalLink,
-} from "lucide-react";
+} from "../ui/icons";
 
 interface EditorClientProps {
-  initialValue: any[];
-  onChange: (blocks: any[]) => void;
+  initialValue: Record<string, unknown>[];
+  onChange: (blocks: Record<string, unknown>[]) => void;
   disabled?: boolean;
 }
 
-function sanitizeInitialValue(value: any): any[] {
+function sanitizeInitialValue(value: unknown): Record<string, unknown>[] {
   if (!value || !Array.isArray(value)) return [];
-  return value.filter((block) => {
+  return (value as Record<string, unknown>[]).filter((block) => {
     if (!block || typeof block !== "object") return false;
-    if (!block._type) return false;
-    if (block._type === "block" && Array.isArray(block.children)) {
-      block.children = block.children.map((child: any) => ({
+    if (!("_type" in block)) return false;
+    if ((block as { _type?: string })._type === "block" && Array.isArray((block as { children?: unknown[] }).children)) {
+      (block as { children: Record<string, unknown>[] }).children = (block.children as Record<string, unknown>[]).map((child) => ({
         ...child,
-        _type: child._type || "span",
-        text: typeof child.text === "string" ? child.text : "",
+        _type: (child as { _type?: string })._type || "span",
+        text: typeof (child as { text?: unknown }).text === "string" ? child.text : "",
       }));
     }
     return true;
@@ -333,7 +333,7 @@ const LinkDialog: React.FC = () => {
       if (href.trim()) {
         popover.send({
           type: "edit",
-          at: [] as any,
+          at: [] as string[],
           props: { href: href.trim() },
         });
       }
@@ -414,7 +414,7 @@ const StyleSelector: React.FC = () => {
       <select
         value={activeStyle}
         onChange={(e) => {
-          send({ type: "toggle", style: e.target.value as any });
+          send({ type: "toggle", style: e.target.value as string });
           editor.send({ type: "focus" });
         }}
         className="appearance-none bg-transparent text-sm pr-6 pl-2 py-1 rounded hover:bg-[var(--kyro-surface-accent)] cursor-pointer focus:outline-none focus:ring-1 focus:ring-[var(--kyro-primary)]"
@@ -469,7 +469,7 @@ const Toolbar: React.FC = () => {
 };
 
 const EditorInner: React.FC<{
-  onChange: (blocks: any[]) => void;
+  onChange: (blocks: Record<string, unknown>[]) => void;
   disabled?: boolean;
 }> = ({ onChange, disabled }) => {
   return (
@@ -506,32 +506,30 @@ export const EditorClient: React.FC<EditorClientProps> = ({
     }
   }, [initialValue]);
 
-  const handleChange = useCallback(
-    (newValue: any) => {
-      setValue(newValue);
-      onChange(newValue);
-    },
-    [onChange],
-  );
+const handleChange = useCallback(
+     (newValue: Record<string, unknown>[]) => {
+       setValue(newValue);
+       onChange(newValue);
+     },
+     [onChange],
+   );
 
   return (
     <EditorProvider
       key={JSON.stringify(value)}
       initialConfig={{
-        schemaDefinition: schemaDefinition as any,
+        schemaDefinition: schemaDefinition as Record<string, unknown>,
         initialValue: value,
       }}
     >
       <EventListenerPlugin
-        on={(event: any) => {
+        on={(event: Record<string, unknown>) => {
           if (event.type === "mutation" && event.value) {
-            handleChange(event.value);
+            handleChange(event.value as Record<string, unknown>);
           }
         }}
       />
-      <EditorInner onChange={handleChange} disabled={disabled} />
-    </EditorProvider>
-  );
+<EditorInner onChange={handleChange} disabled={disabled} />
+  </EditorProvider>
+);
 };
-
-export default EditorClient;