@kyro-cms/admin 0.3.2 → 0.3.5

package/src/components/fields/extensions/blocksStore.ts

@@ -1,4 +1,6 @@
-import { create } from "zustand";
+import { createStore, type StoreApi } from "zustand/vanilla";
+import { useStore } from "zustand";
+import { createContext, useContext } from "react";
 import type { BlockData } from "@kyro-cms/core/client";
 
 export interface BlocksStore {
@@ -12,10 +14,130 @@ export interface BlocksStore {
   setOnBlocksChange: (cb: () => void) => void;
 }
 
-// Helper to create new block (since we can't import createBlock from core in zustand)
+export type BlocksStoreApi = StoreApi<BlocksStore>;
+
+export const BlocksContext = createContext<BlocksStoreApi | null>(null);
+
+export function createBlocksStore(): BlocksStoreApi {
+  return createStore<BlocksStore>((set, get) => ({
+    blocks: [],
+    setBlocks: (blocks) => {
+      const ensuredBlocks = ensureIds(blocks || []);
+      set({ blocks: ensuredBlocks });
+    },
+    onBlocksChange: null,
+    setOnBlocksChange: (cb) => set({ onBlocksChange: cb }),
+    addBlock: (type, index) => {
+      const newBlock = createNewBlock(type);
+      const { blocks } = get();
+      const newBlocks = [...blocks];
+      if (index !== undefined) {
+        newBlocks.splice(index, 0, newBlock);
+      } else {
+        newBlocks.push(newBlock);
+      }
+      set({ blocks: newBlocks });
+      const { onBlocksChange } = get();
+      if (onBlocksChange) onBlocksChange();
+    },
+    updateBlock: (id, data) => {
+      const { blocks } = get();
+
+      const newBlocks = traverseBlocks(blocks, (blocksList) => {
+        const index = blocksList.findIndex(b => b.id === id);
+        if (index !== -1) {
+          const newBlocksList = [...blocksList];
+          newBlocksList[index] = { ...newBlocksList[index], ...data };
+          return { newList: newBlocksList, found: true };
+        }
+        return { newList: blocksList, found: false };
+      });
+
+      if (newBlocks !== blocks) {
+        set({ blocks: newBlocks });
+        const { onBlocksChange } = get();
+        if (onBlocksChange) onBlocksChange();
+      }
+    },
+    removeBlock: (id) => {
+      if (!id) return;
+      const { blocks } = get();
+      
+      const newBlocks = traverseBlocks(blocks, (blocksList) => {
+        const filtered = blocksList.filter(b => b.id !== id);
+        if (filtered.length !== blocksList.length) {
+          return { newList: filtered, found: true };
+        }
+        return { newList: blocksList, found: false };
+      });
+
+      if (newBlocks !== blocks) {
+        set({ blocks: newBlocks });
+        const { onBlocksChange } = get();
+        if (onBlocksChange) onBlocksChange();
+      }
+    },
+    moveBlock: (id, direction) => {
+      const { blocks } = get();
+
+      const newBlocks = traverseBlocks(blocks, (blocksList) => {
+        const index = blocksList.findIndex(b => b.id === id);
+        if (index !== -1) {
+          const targetIndex = direction === "up" ? index - 1 : index + 1;
+          if (targetIndex >= 0 && targetIndex < blocksList.length) {
+            const newBlocksList = [...blocksList];
+            [newBlocksList[index], newBlocksList[targetIndex]] = [
+              newBlocksList[targetIndex],
+              newBlocksList[index],
+            ];
+            return { newList: newBlocksList, found: true };
+          }
+        }
+        return { newList: blocksList, found: false };
+      });
+
+      if (newBlocks !== blocks) {
+        set({ blocks: newBlocks });
+        const { onBlocksChange } = get();
+        if (onBlocksChange) onBlocksChange();
+      }
+    },
+  }));
+}
+
+/**
+ * Recursively ensures all blocks and nested children have unique IDs
+ */
+export function ensureIds(blocks: BlockData[]): BlockData[] {
+  if (!Array.isArray(blocks)) return [];
+
+  return blocks.map((block) => {
+    const updatedBlock = {
+      ...block,
+      id: block.id || Math.random().toString(36).substr(2, 9),
+    };
+
+    if (updatedBlock.children && Array.isArray(updatedBlock.children)) {
+      updatedBlock.children = ensureIds(updatedBlock.children);
+    }
+
+    if (updatedBlock.data?.columnData && Array.isArray(updatedBlock.data.columnData)) {
+      updatedBlock.data = {
+        ...updatedBlock.data,
+        columnData: updatedBlock.data.columnData.map((col: Record<string, unknown>) => ({
+          ...col,
+          children: col.children ? ensureIds(col.children) : col.children,
+        })),
+      };
+    }
+
+    return updatedBlock;
+  });
+}
+
+// Create new block helper (pure function, no store needed)
 export function createNewBlock(type: string): BlockData {
   const defaultData = getDefaultData(type);
-  // Extract options and children from defaultData if present
   const { options, children, ...data } = defaultData;
   return {
     id: Math.random().toString(36).substr(2, 9),
@@ -27,8 +149,8 @@ export function createNewBlock(type: string): BlockData {
   };
 }
 
-function getDefaultData(type: string): Record<string, any> {
-  const defaults: Record<string, any> = {
+function getDefaultData(type: string): Record<string, unknown> {
+  const defaults: Record<string, unknown> = {
     heading: { level: 1, text: "" },
     paragraph: { text: "" },
     divider: {},
@@ -41,7 +163,7 @@ function getDefaultData(type: string): Record<string, any> {
     table: { rows: 3, columns: 3, content: "" },
     quote: { text: "", author: "" },
     file: { filename: "", url: "" },
-    kyroColumns: { columns: 2, direction: "horizontal" },
+    columns: { columns: 2, direction: "horizontal" },
     vstack: { direction: "vertical", gap: "md" },
     container: {
       options: {
@@ -62,185 +184,19 @@ function getDefaultData(type: string): Record<string, any> {
   return defaults[type] || {};
 }
 
-export const useBlocksStore = create<BlocksStore>((set, get) => ({
-  blocks: [],
-  setBlocks: (blocks) => set({ blocks }),
-  onBlocksChange: null,
-  setOnBlocksChange: (cb) => set({ onBlocksChange: cb }),
-  addBlock: (type, index) => {
-    const newBlock = createNewBlock(type);
-    const { blocks } = get();
-    const newBlocks = [...blocks];
-    if (index !== undefined) {
-      newBlocks.splice(index, 0, newBlock);
-    } else {
-      newBlocks.push(newBlock);
-    }
-    set({ blocks: newBlocks });
-    const { onBlocksChange } = get();
-    if (onBlocksChange) onBlocksChange();
-  },
-  updateBlock: (id, data) => {
-    const { blocks } = get();
-    
-    const updateRecursive = (blocksList: BlockData[]): BlockData[] => {
-      let changed = false;
-      const newList = blocksList.map(b => {
-        if (b.id === id) {
-          changed = true;
-          return { ...b, ...data };
-        }
-        
-        let newB = b;
-        if (b.children && b.children.length > 0) {
-          const newChildren = updateRecursive(b.children);
-          if (newChildren !== b.children) {
-            newB = { ...newB, children: newChildren };
-            changed = true;
-          }
-        }
-        
-        if (b.data?.columnData) {
-          const newColumnData = b.data.columnData.map((col: any) => {
-            if (col.children && col.children.length > 0) {
-              const newChildren = updateRecursive(col.children);
-              if (newChildren !== col.children) {
-                return { ...col, children: newChildren };
-              }
-            }
-            return col;
-          });
-          
-          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
-            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
-            changed = true;
-          }
-        }
-        
-        return newB;
-      });
-      return changed ? newList : blocksList;
-    };
-
-    const newBlocks = updateRecursive(blocks);
-    if (newBlocks !== blocks) {
-      set({ blocks: newBlocks });
-      const { onBlocksChange } = get();
-      if (onBlocksChange) onBlocksChange();
-    }
-  },
-  removeBlock: (id) => {
-    const { blocks } = get();
-    
-    const removeRecursive = (blocksList: BlockData[]): BlockData[] => {
-      const filtered = blocksList.filter(b => b.id !== id);
-      if (filtered.length !== blocksList.length) {
-        return filtered; // found and removed at this level
-      }
-      
-      let changed = false;
-      const newList = blocksList.map(b => {
-        let newB = b;
-        if (b.children && b.children.length > 0) {
-          const newChildren = removeRecursive(b.children);
-          if (newChildren !== b.children) {
-            newB = { ...newB, children: newChildren };
-            changed = true;
-          }
-        }
-        
-        if (b.data?.columnData) {
-          const newColumnData = b.data.columnData.map((col: any) => {
-            if (col.children && col.children.length > 0) {
-              const newChildren = removeRecursive(col.children);
-              if (newChildren !== col.children) {
-                return { ...col, children: newChildren };
-              }
-            }
-            return col;
-          });
-          
-          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
-            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
-            changed = true;
-          }
-        }
-        
-        return newB;
-      });
-      return changed ? newList : blocksList;
-    };
-
-    const newBlocks = removeRecursive(blocks);
-    if (newBlocks !== blocks) {
-      set({ blocks: newBlocks });
-      const { onBlocksChange } = get();
-      if (onBlocksChange) onBlocksChange();
-    }
-  },
-  moveBlock: (id, direction) => {
-    const { blocks } = get();
-    
-    const moveRecursive = (blocksList: BlockData[]): BlockData[] => {
-      const index = blocksList.findIndex(b => b.id === id);
-      if (index !== -1) {
-        const targetIndex = direction === "up" ? index - 1 : index + 1;
-        if (targetIndex >= 0 && targetIndex < blocksList.length) {
-          const newBlocksList = [...blocksList];
-          [newBlocksList[index], newBlocksList[targetIndex]] = [
-            newBlocksList[targetIndex],
-            newBlocksList[index],
-          ];
-          return newBlocksList;
-        }
-        return blocksList;
-      }
-      
-      let changed = false;
-      const newList = blocksList.map(b => {
-        let newB = b;
-        if (b.children && b.children.length > 0) {
-          const newChildren = moveRecursive(b.children);
-          if (newChildren !== b.children) {
-            newB = { ...newB, children: newChildren };
-            changed = true;
-          }
-        }
-        
-        if (b.data?.columnData) {
-          const newColumnData = b.data.columnData.map((col: any) => {
-            if (col.children && col.children.length > 0) {
-              const newChildren = moveRecursive(col.children);
-              if (newChildren !== col.children) {
-                return { ...col, children: newChildren };
-              }
-            }
-            return col;
-          });
-          
-          if (newColumnData.some((col: any, i: number) => col !== b.data.columnData[i])) {
-            newB = { ...newB, data: { ...newB.data, columnData: newColumnData } };
-            changed = true;
-          }
-        }
-        
-        return newB;
-      });
-      return changed ? newList : blocksList;
-    };
-
-    const newBlocks = moveRecursive(blocks);
-    if (newBlocks !== blocks) {
-      set({ blocks: newBlocks });
-      const { onBlocksChange } = get();
-      if (onBlocksChange) onBlocksChange();
-    }
-  },
-}));
+// React hooks that read from context
+export function useBlocksStore(): BlocksStore {
+  const store = useContext(BlocksContext);
+  if (!store) {
+    throw new Error("useBlocksStore must be used within a BlocksContext.Provider");
+  }
+  return useStore(store);
+}
 
-// Selector for individual block - only re-renders when that specific block changes
-export const useBlockById = (id: string) =>
-  useBlocksStore((state) => {
+export function useBlockById(id: string): BlockData | undefined {
+  const store = useContext(BlocksContext);
+  if (!store) return undefined;
+  return useStore(store, (state) => {
     const findRecursive = (blocksList: BlockData[]): BlockData | undefined => {
       for (const b of blocksList) {
         if (b.id === id) return b;
@@ -250,7 +206,7 @@ export const useBlockById = (id: string) =>
         }
         if (b.data?.columnData) {
           for (const col of b.data.columnData) {
-            if (col.children && col.children.length > 0) {
+            if (col && col.children && col.children.length > 0) {
               const found = findRecursive(col.children);
               if (found) return found;
             }
@@ -261,13 +217,71 @@ export const useBlockById = (id: string) =>
     };
     return findRecursive(state.blocks);
   });
+}
+
+export function useBlockCount(): number {
+  const store = useContext(BlocksContext);
+  if (!store) return 0;
+  return useStore(store, (state) => state.blocks.length);
+}
+
+export function useBlockActions() {
+  const store = useContext(BlocksContext);
+  if (!store) {
+    throw new Error("useBlockActions must be used within a BlocksContext.Provider");
+  }
+  return {
+    updateBlock: (id: string, data: Partial<BlockData>) => store.getState().updateBlock(id, data),
+    removeBlock: (id: string) => store.getState().removeBlock(id),
+    moveBlock: (id: string, direction: "up" | "down") => store.getState().moveBlock(id, direction),
+  };
+}
 
-// Selector for block count - for quick checks
-export const useBlockCount = () =>
-  useBlocksStore((state) => state.blocks.length);
+/**
+ * Generic tree traversal helper for blocks
+ */
+export function traverseBlocks(
+  blocks: BlockData[],
+  action: (blocksList: BlockData[]) => { newList: BlockData[]; found: boolean }
+): BlockData[] {
+  const { newList, found } = action(blocks);
+  if (found) return newList;
 
-// Get action functions without subscription - uses getState() for direct access
-// This prevents re-renders when other blocks change
-export const useBlockActions = () => {
-  return useBlocksStore.getState();
-};
+  let overallChanged = false;
+  const deepUpdatedList = blocks.map((block) => {
+    let updatedBlock = { ...block };
+    let blockChanged = false;
+
+    // Handle children
+    if (block.children && block.children.length > 0) {
+      const updatedChildren = traverseBlocks(block.children, action);
+      if (updatedChildren !== block.children) {
+        updatedBlock.children = updatedChildren;
+        blockChanged = true;
+      }
+    }
+
+    // Handle columnData
+    if (block.data?.columnData && Array.isArray(block.data.columnData)) {
+      const updatedColumnData = block.data.columnData.map((col: Record<string, unknown>) => {
+        if (col.children && col.children.length > 0) {
+          const updatedColChildren = traverseBlocks(col.children, action);
+          if (updatedColChildren !== col.children) {
+            return { ...col, children: updatedColChildren };
+          }
+        }
+        return col;
+      });
+
+      if (updatedColumnData.some((col: Record<string, unknown>, i: number) => col !== block.data.columnData[i])) {
+        updatedBlock.data = { ...updatedBlock.data, columnData: updatedColumnData };
+        blockChanged = true;
+      }
+    }
+
+    if (blockChanged) overallChanged = true;
+    return blockChanged ? updatedBlock : block;
+  });
+
+  return overallChanged ? deepUpdatedList : blocks;
+}

package/src/components/fields/types.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { Field } from "@kyro-cms/core/client";
+
+export interface FieldComponentProps<TField extends Field = Field> {
+  field: TField;
+  value?: unknown;
+  onChange?: (value: unknown) => void;
+  error?: string;
+  disabled?: boolean;
+}
+
+export interface Compactable {
+  compact?: boolean;
+}
+
+export type FieldChangeHandler = (field: string, value: unknown) => void;
+
+export type RenderFieldFn = (
+  field: Field,
+  parentData: Record<string, unknown>,
+  onChange: (value: unknown) => void,
+) => ReactNode;

package/src/components/layout/Layout.tsx

@@ -1,7 +1,7 @@
 import { type CollectionConfig } from '@kyro-cms/core/client';
 
 interface LayoutProps {
-  children: any;
+  children: React.ReactNode;
   collections?: CollectionConfig[];
   currentSlug?: string;
 }

package/src/components/ui/ActionMenu.tsx

@@ -0,0 +1,63 @@
+import { useState, useRef, useEffect } from "react";
+import type { ReactNode } from "react";
+import { IconButton } from "./IconButton";
+import { IconMoreVertical } from "./icons";
+
+export interface ActionMenuItem {
+  label: string;
+  icon?: ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+  divider?: boolean;
+}
+
+interface ActionMenuProps {
+  items: ActionMenuItem[];
+  label?: string;
+}
+
+export function ActionMenu({ items, label = "Actions" }: ActionMenuProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <IconButton
+        icon={<IconMoreVertical className="w-4 h-4" />}
+        label={label}
+        variant="ghost"
+        size="sm"
+        onClick={() => setOpen(!open)}
+      />
+      {open && (
+        <div className="absolute right-0 z-50 min-w-[160px] bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg shadow-lg py-1">
+          {items.map((item, i) => (
+            <div key={i}>
+              {item.divider && <div className="border-t border-[var(--kyro-border)] my-1" />}
+              <button
+                className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-bold transition-colors ${item.danger
+                  ? "text-red-500 hover:bg-red-50"
+                  : "text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]"
+                  }`}
+                onClick={() => { item.onClick(); setOpen(false); }}
+              >
+                {item.icon && <span className="w-4 h-4">{item.icon}</span>}
+                {item.label}
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/Badge.tsx

@@ -1,19 +1,73 @@
 import type { ReactNode } from "react";
 
+export type BadgeVariant =
+  | "default"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "outline"
+  | "draft"
+  | "published"
+  | "scheduled"
+  | "archived"
+  | "active"
+  | "inactive"
+  | "pending"
+  | "completed"
+  | "cancelled";
+
 interface BadgeProps {
-  variant?: "default" | "success" | "warning" | "danger" | "info";
+  variant?: BadgeVariant;
+  status?: BadgeVariant; // Alias for variant when used for statuses
   className?: string;
-  children: ReactNode;
+  children?: ReactNode;
+  dot?: boolean;
 }
 
+const statusConfig: Record<string, { class: string; label?: string }> = {
+  draft: { class: "bg-gray-100 text-gray-600", label: "Draft" },
+  published: { class: "bg-green-100 text-green-700", label: "Published" },
+  scheduled: { class: "bg-blue-100 text-blue-700", label: "Scheduled" },
+  archived: { class: "bg-yellow-100 text-yellow-700", label: "Archived" },
+  active: { class: "bg-green-100 text-green-700", label: "Active" },
+  inactive: { class: "bg-gray-100 text-gray-600", label: "Inactive" },
+  pending: { class: "bg-yellow-100 text-yellow-700", label: "Pending" },
+  completed: { class: "bg-green-100 text-green-700", label: "Completed" },
+  cancelled: { class: "bg-red-100 text-red-700", label: "Cancelled" },
+};
+
 export function Badge({
-  variant = "default",
+  variant,
+  status,
   className = "",
   children,
+  dot = false,
 }: BadgeProps) {
+  const activeVariant = variant || status || "default";
+  const config = statusConfig[activeVariant];
+
+  const variantClass = config 
+    ? config.class 
+    : `kyro-badge-${activeVariant}`;
+
   return (
-    <span className={`kyro-badge kyro-badge-${variant} ${className}`}>
-      {children}
+    <span className={`kyro-badge ${variantClass} ${className}`}>
+      {dot && (
+        <span className="w-1.5 h-1.5 rounded-full bg-current mr-1.5 opacity-60" />
+      )}
+      {children || config?.label || activeVariant}
     </span>
   );
 }
+
+export function CountBadge({ count, max = 99 }: { count: number; max?: number }) {
+  if (count === 0) return null;
+
+  return (
+    <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-medium bg-gray-200 text-gray-700 rounded-full">
+      {count > max ? `${max}+` : count}
+    </span>
+  );
+}
+

package/src/components/ui/BlockDrawer.tsx

@@ -33,7 +33,7 @@ export function DraggableBlockType({
   onSelect,
   children,
 }: {
-  block: { type: string; label: string; icon: any; description: string };
+  block: { type: string; label: string; icon: React.ReactNode; description: string };
   onSelect: (type: string) => void;
   children?: ReactNode;
 }) {
@@ -48,9 +48,8 @@ export function DraggableBlockType({
       {...listeners}
       {...attributes}
       onClick={() => onSelect(block.type)}
-      className={`flex flex-col items-center text-center gap-1 p-2 rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/60 hover:bg-[var(--kyro-surface-accent)]/30 transition-all cursor-pointer group ${
-        isDragging ? "opacity-50 border-[var(--kyro-primary)]" : ""
-      }`}
+      className={`flex flex-col items-center text-center gap-1 p-2 rounded-md border border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/60 hover:bg-[var(--kyro-surface-accent)]/30 transition-all cursor-pointer group ${isDragging ? "opacity-50 border-[var(--kyro-primary)]" : ""
+        }`}
       style={{ opacity: isDragging ? 0.5 : 1 }}
     >
       <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">
@@ -61,7 +60,7 @@ export function DraggableBlockType({
         )}
       </div>
       <div className="flex-1 min-w-0">
-        <div className="text-xs font-medium uppercase tracking-tight text-[var(--kyro-text-primary)] leading-tight">
+        <div className="text-xs font-medium  tracking-tight text-[var(--kyro-text-primary)] leading-tight">
           {block.label}
         </div>
         <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 leading-tight">