@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/fields/BlocksField.tsx

@@ -1,15 +1,19 @@
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import { useStore } from "zustand";
-import { BlocksContext, createBlocksStore, createNewBlock, type BlocksStoreApi } from "./extensions/blocksStore";
+import { BlocksContext, createBlocksStore, createNewBlock, type BlocksStoreApi, useBlockActions } from "./extensions/blocksStore";
 import { BlockDrawer, DraggableBlockType } from "../ui/BlockDrawer";
-import { Plus, Box } from "../ui/icons";
+import { Plus, Box, X, Copy, ChevronDown } from "../ui/icons";
 import {
   BLOCK_COMPONENTS,
   getBlockComponent,
-  blockCategories,
   blockIcons,
+  getBlockLabel,
+  blockTheme,
 } from "./extensions/blockComponents";
+import { GenericBlock } from "../blocks/GenericBlock";
+import { BlockEditModal } from "../blocks/BlockEditModal";
 import {
+
   DndContext,
   closestCenter,
   PointerSensor,
@@ -40,13 +44,38 @@ interface BlocksFieldProps {
 
 import { GripVertical } from "../ui/icons";
 
+function getBlockPreviewSnippet(
+  data: Record<string, any>,
+  blockSchema?: Record<string, any>,
+): string {
+  if (blockSchema?.fields) {
+    for (const field of blockSchema.fields) {
+      if (field.type === "text" || field.type === "textarea") {
+        const val = data[field.name];
+        if (val && typeof val === "string") return val;
+      }
+    }
+  }
+  return data.heading || data.title || data.text || data.name || data.label || data.sectionTitle || "";
+}
+
 // Sortable block wrapper for drag-and-drop
 const SortableBlockComponent = ({
   block,
   index,
+  blockSchema,
+  editingBlockId,
+  setEditingBlockId,
+  onDuplicate,
+  compact,
 }: {
   block: Record<string, unknown>;
   index: number;
+  blockSchema?: Record<string, any>;
+  editingBlockId: string | null;
+  setEditingBlockId: (id: string | null) => void;
+  onDuplicate: (id: string) => void;
+  compact?: boolean;
 }) => {
   const {
     attributes,
@@ -57,6 +86,10 @@ const SortableBlockComponent = ({
     isDragging,
   } = useSortable({ id: block.id });
 
+  const { removeBlock } = useBlockActions();
+  const isEditing = editingBlockId === block.id;
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -64,10 +97,101 @@ const SortableBlockComponent = ({
     opacity: isDragging ? 0.8 : 1,
   };
 
-  const Component = getBlockComponent(block.type);
+  const itemLabel = getBlockLabel(block.type as string);
+  const data = (block.data || {}) as Record<string, any>;
+  const previewSnippet = getBlockPreviewSnippet(data, blockSchema);
+
+  if (compact) {
+    return (
+      <div ref={setNodeRef} style={style} className="relative group">
+        <div
+          onClick={() => setEditingBlockId(block.id as string)}
+          className={`flex items-center gap-1 pl-5 pr-1.5 py-1 bg-[var(--kyro-bg-secondary)] rounded-md border transition-colors cursor-pointer text-xs whitespace-nowrap ${
+            isEditing
+              ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
+              : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
+          }`}
+        >
+          <div
+            className="absolute left-0.5 top-1/2 -translate-y-1/2 p-0.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
+            {...attributes}
+            {...listeners}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <GripVertical className="w-2.5 h-2.5" />
+          </div>
+
+          {blockIcons[block.type as string] && (
+            <span className="text-[var(--kyro-text-secondary)] flex-shrink-0">
+              {blockIcons[block.type as string]}
+            </span>
+          )}
+
+          <span className="font-medium text-[var(--kyro-text-secondary)] truncate max-w-[120px]">
+            {itemLabel}
+          </span>
+
+          {showDeleteConfirm ? (
+            <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
+              <button
+                type="button"
+                onClick={() => {
+                  removeBlock(block.id as string);
+                  setShowDeleteConfirm(false);
+                }}
+                className="px-1.5 py-0.5 text-[9px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors"
+              >
+                Remove
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowDeleteConfirm(false)}
+                className="px-1.5 py-0.5 text-[9px] bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded font-semibold transition-colors"
+              >
+                Cancel
+              </button>
+            </div>
+          ) : (
+            <div className="flex items-center gap-0.5">
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDuplicate(block.id as string);
+                }}
+                className="p-0.5 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
+                title="Duplicate"
+              >
+                <Copy className="w-3 h-3" />
+              </button>
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowDeleteConfirm(true);
+                }}
+                className="p-0.5 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors"
+                title="Remove"
+              >
+                <X className="w-3 h-3" />
+              </button>
+            </div>
+          )}
+        </div>
+
+        {isEditing && (
+          <BlockEditModal
+            block={block}
+            blockSchema={blockSchema}
+            onClose={() => setEditingBlockId(null)}
+          />
+        )}
+      </div>
+    );
+  }
 
   return (
-    <div ref={setNodeRef} style={style} className="relative group pl-8">
+    <div ref={setNodeRef} style={style} className="relative group pl-8 mb-2">
       <div
         className="absolute left-0 top-1/2 -translate-y-1/2 p-1.5 cursor-grab active:cursor-grabbing text-[var(--kyro-text-muted)] opacity-0 group-hover:opacity-100 transition-opacity hover:bg-[var(--kyro-surface-accent)] rounded"
         {...attributes}
@@ -75,12 +199,100 @@ const SortableBlockComponent = ({
       >
         <GripVertical className="w-4 h-4" />
       </div>
-      {Component ? (
-        <Component block={block} index={index} />
-      ) : (
-        <div className="p-4 border border-[var(--kyro-border)] rounded-md">
-          Unknown block: {block.type}
+
+      <div
+        onClick={() => setEditingBlockId(block.id as string)}
+        className={`flex items-center gap-3 p-3 bg-[var(--kyro-bg-secondary)] rounded-lg border transition-colors cursor-pointer ${
+          isEditing
+            ? `${(blockTheme[block.type as string] || blockTheme.default).border} bg-[var(--kyro-primary)]/5`
+            : "border-[var(--kyro-border)] hover:border-[var(--kyro-primary)]/50 hover:bg-[var(--kyro-primary)]/5"
+        }`}
+      >
+        {blockIcons[block.type as string] && (
+          <span className="text-[var(--kyro-text-secondary)]">
+            {blockIcons[block.type as string]}
+          </span>
+        )}
+
+        <div className="flex-1 min-w-0">
+          <div className="text-xs font-semibold text-[var(--kyro-text-secondary)] truncate">
+            {itemLabel}
+            {previewSnippet && typeof previewSnippet === "string" && (
+              <span className="text-[var(--kyro-text-muted)] font-normal ml-1.5">
+                - {previewSnippet.length > 40 ? `${previewSnippet.slice(0, 40)}...` : previewSnippet}
+              </span>
+            )}
+          </div>
+          {blockSchema?.admin?.description && (
+            <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80">
+              {blockSchema.admin.description}
+            </div>
+          )}
         </div>
+
+        {block.children && Array.isArray(block.children) && block.children.length > 0 && (
+          <span className="text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium">
+            {block.children.length} nested
+          </span>
+        )}
+
+        {showDeleteConfirm ? (
+          <div
+            className="flex items-center gap-1.5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <button
+              type="button"
+              onClick={() => {
+                removeBlock(block.id as string);
+                setShowDeleteConfirm(false);
+              }}
+              className="px-2.5 py-1 text-[10px] bg-red-500 hover:bg-red-600 text-white rounded font-semibold transition-colors"
+            >
+              Remove
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowDeleteConfirm(false)}
+              className="px-2.5 py-1 text-[10px] bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded font-semibold transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onDuplicate(block.id as string);
+              }}
+              className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded text-[var(--kyro-text-secondary)] transition-colors"
+              title="Duplicate Block"
+            >
+              <Copy className="w-3.5 h-3.5" />
+            </button>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                setShowDeleteConfirm(true);
+              }}
+              className="p-1 hover:bg-red-50 hover:text-red-500 rounded text-[var(--kyro-text-muted)] transition-colors"
+              title="Remove Block"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {isEditing && (
+        <BlockEditModal
+          block={block}
+          blockSchema={blockSchema}
+          onClose={() => setEditingBlockId(null)}
+        />
       )}
     </div>
   );
@@ -99,14 +311,72 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
   justSaved,
 }) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const pickerMode = (field as any).admin?.pickerMode || "drawer";
+  const allowedBlocks = (field.blocks as any[]) || [];
+
+  const groupedBlocks = allowedBlocks.reduce((acc, block) => {
+    const groupName = block.admin?.group || "Custom Blocks";
+    if (!acc[groupName]) {
+      acc[groupName] = [];
+    }
+    acc[groupName].push(block);
+    return acc;
+  }, {} as Record<string, any[]>);
+
+  // Define a preferred ordering of core categories if possible
+  const categoryOrder = [
+    "Structural Sections",
+    "Marketing Grids",
+    "Lead Capture & Interactive",
+    "Dynamic Content",
+    "Basic Content Elements",
+    "Custom Blocks",
+  ];
+
+  const dynamicCategories = Object.entries(groupedBlocks)
+    .sort(([titleA], [titleB]) => {
+      const idxA = categoryOrder.indexOf(titleA);
+      const idxB = categoryOrder.indexOf(titleB);
+      if (idxA !== -1 && idxB !== -1) return idxA - idxB;
+      if (idxA !== -1) return -1;
+      if (idxB !== -1) return 1;
+      return titleA.localeCompare(titleB);
+    })
+    .map(([title, blocks]) => ({
+      title,
+      blocks,
+    }));
+
   const storeRef = useRef<BlocksStoreApi | null>(null);
   if (!storeRef.current) {
-    storeRef.current = createBlocksStore();
+    storeRef.current = createBlocksStore(allowedBlocks, dynamicCategories);
   }
   const store = storeRef.current;
 
   const blocks = useStore(store, (s) => s.blocks);
   const [activeDrag, setActiveDrag] = useState<Active | null>(null);
+  const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
+
+  // Track previous blocks count and IDs to auto-open newly added blocks
+  const prevBlocksLengthRef = useRef(blocks.length);
+  const prevBlockIdsRef = useRef(new Set(blocks.map((b) => b.id)));
+  const isInitializedRef = useRef(false);
+
+  useEffect(() => {
+    if (isInitializedRef.current) {
+      if (blocks.length > prevBlocksLengthRef.current) {
+        // Find the new block ID that wasn't present before
+        const newBlock = blocks.find((b) => b.id && !prevBlockIdsRef.current.has(b.id));
+        if (newBlock) {
+          setEditingBlockId(newBlock.id);
+        }
+      }
+    }
+    prevBlocksLengthRef.current = blocks.length;
+    prevBlockIdsRef.current = new Set(blocks.map((b) => b.id));
+  }, [blocks]);
 
   // Register blocks change callback
   useEffect(() => {
@@ -129,30 +399,31 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
 
     if (valueIds !== lastValueIds) {
       console.log("BlocksField sync: value=", value, "valueIds=", valueIds, "lastValueIds=", lastValueIds);
-      store.getState().setBlocks(valueArray);
-      lastValueRef.current = [...valueArray];
+      const valueArrayCopy = [...valueArray];
+      prevBlocksLengthRef.current = valueArrayCopy.length;
+      prevBlockIdsRef.current = new Set(valueArrayCopy.map((b: Record<string, unknown>) => b.id));
+      store.getState().setBlocks(valueArrayCopy);
+      lastValueRef.current = valueArrayCopy;
+      isInitializedRef.current = true;
+    } else if (valueArray.length === 0 && !isInitializedRef.current) {
+      isInitializedRef.current = true;
     }
   }, [value, field.name, store]);
 
-  // Debounced sync of store changes back to parent form to reduce re-renders
-  const onChangeTimer = useRef<number | null>(null);
+  // Propagate blocks to parent only when they differ from the last loaded value
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   useEffect(() => {
     if (!onChangeRef.current) return;
-    if (onChangeTimer.current) {
-      window.clearTimeout(onChangeTimer.current);
-      onChangeTimer.current = null;
+    const lastValue = lastValueRef.current;
+    if (!lastValue) return;
+
+    const currentIds = blocks.map((b: Record<string, unknown>) => b.id).join(",");
+    const lastIds = lastValue.map((b: Record<string, unknown>) => b.id).join(",");
+
+    if (currentIds !== lastIds) {
+      onChangeRef.current(blocks);
     }
-    onChangeTimer.current = window.setTimeout(() => {
-      onChangeRef.current?.(blocks);
-    }, 250);
-    return () => {
-      if (onChangeTimer.current) {
-        window.clearTimeout(onChangeTimer.current);
-        onChangeTimer.current = null;
-      }
-    };
   }, [blocks]);
 
   // Determine left border style based on document status
@@ -177,6 +448,31 @@ export const BlocksField: React.FC<BlocksFieldProps> = ({
     [store],
   );
 
+  const duplicateBlock = useCallback(
+    (blockId: string) => {
+      const blockIndex = blocks.findIndex((b) => b.id === blockId);
+      if (blockIndex === -1) return;
+
+      const blockToClone = blocks[blockIndex];
+
+      const cloneBlock = (b: any): any => {
+        const newId = Math.random().toString(36).substr(2, 9);
+        return {
+          ...b,
+          id: newId,
+          children: b.children ? b.children.map((c: any) => cloneBlock(c)) : b.children,
+          data: b.data ? JSON.parse(JSON.stringify(b.data)) : b.data,
+        };
+      };
+
+      const cloned = cloneBlock(blockToClone);
+      const newBlocks = [...blocks];
+      newBlocks.splice(blockIndex + 1, 0, cloned);
+      store.getState().setBlocks(newBlocks);
+    },
+    [blocks, store],
+  );
+
   // Set up dnd-kit sensors
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -248,49 +544,119 @@ const activeBlockLabel = activeBlock
 
   const borderClass = getBorderClass();
 
+  useEffect(() => {
+    if (!isDropdownOpen) return;
+    const handleClick = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [isDropdownOpen]);
+
   return (
-    <BlocksContext.Provider value={store}>
-      <div className={`kyro-form-field ${borderClass}`}>
+    <BlocksContext.Provider value={storeRef.current}>
+      <div className="kyro-blocks-field">
         <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>
+            {pickerMode === "dropdown" ? (
+              <div ref={dropdownRef} className="relative">
+                <button
+                  type="button"
+                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+                  disabled={disabled}
+                  className="flex items-center gap-1.5 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"
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
+                  </svg>
+                  Add Element
+                  <ChevronDown className={`w-3.5 h-3.5 transition-transform ${isDropdownOpen ? "rotate-180" : ""}`} />
+                </button>
+
+                {isDropdownOpen && (
+                  <div className="absolute right-0 top-full mt-1 w-56 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-lg shadow-xl z-50 py-2 max-h-80 overflow-y-auto">
+                    {dynamicCategories.map((category) => (
+                      <div key={category.title}>
+                        {dynamicCategories.length > 1 && (
+                          <div className="px-3 py-1.5 text-[10px] font-bold tracking-wider text-[var(--kyro-text-muted)] uppercase">
+                            {category.title}
+                          </div>
+                        )}
+                        {category.blocks.map((block) => (
+                          <button
+                            key={block.slug}
+                            type="button"
+                            onClick={() => {
+                              handleAddBlock(block.slug);
+                              setIsDropdownOpen(false);
+                            }}
+                            className="w-full flex items-center gap-3 px-3 py-2 text-sm text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]/50 transition-colors text-left"
+                          >
+                            <span className="flex-shrink-0 w-5 h-5 flex items-center justify-center text-[var(--kyro-text-muted)]">
+                              {blockIcons[block.slug as keyof typeof blockIcons] || <Box className="w-4 h-4" />}
+                            </span>
+                            <div className="min-w-0 flex-1">
+                              <div className="text-xs font-semibold truncate">{block.label}</div>
+                              {block.admin?.description && (
+                                <div className="text-[10px] text-[var(--kyro-text-muted)] truncate">{block.admin.description}</div>
+                              )}
+                            </div>
+                          </button>
+                        ))}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <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>
+            )}
+          </div>
+
+          <div className="mb-4">
             <BlockDrawer
               open={isDrawerOpen}
               onClose={() => setIsDrawerOpen(false)}
               onSelect={handleAddBlock}
             >
               <div className="space-y-4">
-                {blockCategories.map((category) => (
+                {dynamicCategories.map((category) => (
                   <div key={category.title}>
-                    <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)] mb-2  tracking-wider">
+                    <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}
+                          key={block.slug}
+                          block={{
+                            type: block.slug,
+                            label: block.label,
+                            description: block.admin?.description || "",
+                            icon: null,
+                          }}
                           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
+                                block.slug as keyof typeof blockIcons
                               ] || <Box className="w-4 h-4" />}
                             </span>
                           </div>
@@ -308,13 +674,27 @@ const activeBlockLabel = activeBlock
             items={blocks.map((b) => b.id)}
             strategy={verticalListSortingStrategy}
           >
-            <div className="space-y-4">
-              {blocks.map((block, index) => (
-                <SortableBlock key={block.id || index} block={block} index={index} />
-              ))}
+            <div className={pickerMode === "dropdown" ? "flex flex-wrap gap-1.5" : "space-y-4"}>
+              {blocks.map((block, index) => {
+                const blockSchema = (field.blocks as any[])?.find(
+                  (b) => b.slug === block.type
+                );
+                return (
+                  <SortableBlock
+                    key={block.id || index}
+                    block={block}
+                    index={index}
+                    blockSchema={blockSchema}
+                    editingBlockId={editingBlockId}
+                    setEditingBlockId={setEditingBlockId}
+                    onDuplicate={duplicateBlock}
+                    compact={pickerMode === "dropdown"}
+                  />
+                );
+              })}
               {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 className={pickerMode === "dropdown" ? "text-xs text-[var(--kyro-text-muted)] italic py-1" : "text-center py-12 text-[var(--kyro-text-muted)] border-2 border-dashed border-[var(--kyro-border)] rounded-lg"}>
+                  {pickerMode === "dropdown" ? "No elements added" : "Click the button above to add your first block"}
                 </div>
               )}
             </div>

package/src/components/fields/CardField.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+interface CardFieldProps {
+  title?: string;
+  description?: string;
+  icon?: string;
+  link?: string;
+  linkText?: string;
+  onChange: (field: string, value: string) => void;
+  compact?: boolean;
+}
+
+export const CardField: React.FC<CardFieldProps> = ({
+  title = "",
+  description = "",
+  icon = "",
+  link = "",
+  linkText = "",
+  onChange,
+  compact = false,
+}) => {
+  const inputClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  const textareaClass = compact
+    ? "w-full px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[50px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+    : "w-full px-3 py-2.5 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[80px] resize-none focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent";
+
+  return (
+    <div className={compact ? "space-y-2" : "space-y-3"}>
+      <input
+        type="text"
+        value={title}
+        onChange={(e) => onChange("title", e.target.value)}
+        className={`${inputClass} font-bold text-base`}
+        placeholder="Card title..."
+      />
+      <textarea
+        value={description}
+        onChange={(e) => onChange("description", e.target.value)}
+        className={textareaClass}
+        placeholder="Card description..."
+      />
+      <input
+        type="text"
+        value={icon}
+        onChange={(e) => onChange("icon", e.target.value)}
+        className={inputClass}
+        placeholder="Icon (emoji or name)..."
+      />
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={linkText}
+          onChange={(e) => onChange("linkText", e.target.value)}
+          className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+          placeholder="Link text..."
+        />
+        <span className="text-[var(--kyro-text-muted)] text-xs">→</span>
+        <input
+          type="url"
+          value={link}
+          onChange={(e) => onChange("link", e.target.value)}
+          className="flex-1 px-2.5 py-1.5 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent font-mono text-xs"
+          placeholder="https://..."
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CardField;