@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/blocks/ChildBlocksTree.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { Plus, X, ChevronRight, ChevronDown } from "../ui/icons";
 import {
-  blockCategories,
   blockIcons,
   getBlockComponent,
   getBlockLabel,
@@ -9,6 +8,9 @@ import {
 import { createNewBlock } from "../fields/extensions/blocksStore";
 import { BlockDrawer } from "../ui/BlockDrawer";
 import { BlockEditModal } from "./BlockEditModal";
+import { useStore } from "zustand";
+import { BlocksContext } from "../fields/extensions/blocksStore";
+import { useContext } from "react";
 
 interface ChildBlocksTreeProps {
   blockId: string;
@@ -32,7 +34,11 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
   const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
 
-  const availableBlocks = blockCategories.flatMap((cat) => cat.blocks);
+  const store = useContext(BlocksContext);
+  if (!store) throw new Error("ChildBlocksTree must be used within a BlocksContext");
+  const dynamicCategories = useStore(store, (s) => s.dynamicCategories);
+  const allowedBlocks = useStore(store, (s) => s.allowedBlocks);
+
   const canAddChildren = depth < maxDepth;
   const indentWidth = 16;
 
@@ -88,6 +94,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
     const BlockComponent = getBlockComponent(child.type);
     const childHasOwnChildren = hasChildren;
     const isEditing = editingBlockId === child.id;
+    const blockSchema = allowedBlocks.find((b: any) => b.slug === child.type);
 
     return (
       <div key={child.id} className="relative group">
@@ -123,20 +130,27 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
           )}
 
           {blockIcons[child.type] && (
-            <span className="text-[var(--kyro-text-secondary)]">
+            <div className="w-8 h-8 rounded bg-[var(--kyro-surface-accent)] flex items-center justify-center text-[var(--kyro-text-secondary)]">
               {blockIcons[child.type]}
-            </span>
+            </div>
           )}
 
-          <span className="text-xs font-medium text-[var(--kyro-text-secondary)] flex-1 truncate">
-            {getBlockLabel(child.type)}
-            {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
-            {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
-          </span>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs font-medium text-[var(--kyro-text-secondary)] truncate">
+              {getBlockLabel(child.type)}
+              {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
+              {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
+            </div>
+            {blockSchema?.admin?.description && (
+              <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80">
+                {blockSchema.admin.description}
+              </div>
+            )}
+          </div>
 
           {hasChildren && (
-            <span className="text-[10px] text-[var(--kyro-text-muted)]">
-              ({child.children.length})
+            <span className="text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium">
+              {child.children.length} nested
             </span>
           )}
 
@@ -223,7 +237,7 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
             onClose={() => setShowAddModal(false)}
             onSelect={handleAddChild}
           >
-            {blockCategories.map((category) => (
+            {dynamicCategories.map((category) => (
               <div key={category.title} className="mb-4">
                 <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)]  tracking-wide mb-2">
                   {category.title}
@@ -231,23 +245,23 @@ export const ChildBlocksTree: React.FC<ChildBlocksTreeProps> = ({
                 <div className="grid grid-cols-3 gap-2">
                   {category.blocks.map((block) => (
                     <button
-                      key={block.type}
+                      key={block.slug}
                       type="button"
                       onClick={() => {
-                        handleAddChild(block.type);
+                        handleAddChild(block.slug);
                         setShowAddModal(false);
                       }}
                       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"
                     >
                       <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">
-                        {blockIcons[block.icon]}
+                        {blockIcons[block.slug as keyof typeof blockIcons]}
                       </div>
                       <div className="flex-1 min-w-0">
                         <div className="text-xs font-medium  tracking-tight text-[var(--kyro-text-primary)]">
                           {block.label}
                         </div>
                         <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5">
-                          {block.description}
+                          {block.admin?.description || ""}
                         </div>
                       </div>
                     </button>
@@ -300,7 +314,11 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
   const [editingBlockId, setEditingBlockId] = useState<string | null>(null);
   const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
 
-  const availableBlocks = blockCategories.flatMap((cat) => cat.blocks);
+  const store = useContext(BlocksContext);
+  if (!store) throw new Error("NestedChildBlocks must be used within a BlocksContext");
+  const dynamicCategories = useStore(store, (s) => s.dynamicCategories);
+  const allowedBlocks = useStore(store, (s) => s.allowedBlocks);
+
   const canAddChildren = depth < maxDepth;
   const indentWidth = 16;
 
@@ -356,6 +374,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
     const BlockComponent = getBlockComponent(child.type);
     const childHasOwnChildren = hasChildren;
     const isEditing = editingBlockId === child.id;
+    const blockSchema = allowedBlocks.find((b: any) => b.slug === child.type);
 
     return (
       <div key={child.id} className="relative group">
@@ -391,20 +410,27 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
           )}
 
           {blockIcons[child.type] && (
-            <span className="text-[var(--kyro-text-secondary)]">
+            <div className="w-8 h-8 rounded bg-[var(--kyro-surface-accent)] flex items-center justify-center text-[var(--kyro-text-secondary)]">
               {blockIcons[child.type]}
-            </span>
+            </div>
           )}
 
-          <span className="text-xs font-medium text-[var(--kyro-text-secondary)] flex-1 truncate">
-            {getBlockLabel(child.type)}
-            {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
-            {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
-          </span>
+          <div className="flex-1 min-w-0">
+            <div className="text-xs font-medium text-[var(--kyro-text-secondary)] truncate">
+              {getBlockLabel(child.type)}
+              {child.data?.text ? ` - ${child.data.text.slice(0, 30)}` : ""}
+              {child.data?.heading ? ` - ${child.data.heading.slice(0, 30)}` : ""}
+            </div>
+            {blockSchema?.admin?.description && (
+              <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5 truncate opacity-80">
+                {blockSchema.admin.description}
+              </div>
+            )}
+          </div>
 
           {hasChildren && (
-            <span className="text-[10px] text-[var(--kyro-text-muted)]">
-              ({child.children.length})
+            <span className="text-[10px] bg-[var(--kyro-surface-accent)] px-2 py-0.5 rounded text-[var(--kyro-text-muted)] font-medium">
+              {child.children.length} nested
             </span>
           )}
 
@@ -491,7 +517,7 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
             onClose={() => setShowAddModal(false)}
             onSelect={handleAddChild}
           >
-            {blockCategories.map((category) => (
+            {dynamicCategories.map((category) => (
               <div key={category.title} className="mb-4">
                 <h3 className="text-xs font-semibold text-[var(--kyro-text-muted)]  tracking-wide mb-2">
                   {category.title}
@@ -499,23 +525,23 @@ const NestedChildBlocks: React.FC<NestedChildBlocksProps> = ({
                 <div className="grid grid-cols-3 gap-2">
                   {category.blocks.map((block) => (
                     <button
-                      key={block.type}
+                      key={block.slug}
                       type="button"
                       onClick={() => {
-                        handleAddChild(block.type);
+                        handleAddChild(block.slug);
                         setShowAddModal(false);
                       }}
                       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"
                     >
                       <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">
-                        {blockIcons[block.icon]}
+                        {blockIcons[block.slug as keyof typeof blockIcons]}
                       </div>
                       <div className="flex-1 min-w-0">
                         <div className="text-xs font-medium  tracking-tight text-[var(--kyro-text-primary)]">
                           {block.label}
                         </div>
                         <div className="text-[10px] text-[var(--kyro-text-muted)] mt-0.5">
-                          {block.description}
+                          {block.admin?.description || ""}
                         </div>
                       </div>
                     </button>

package/src/components/blocks/GenericBlock.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { BlockWrapper } from "./BlockWrapper";
+import { FieldRenderer } from "../FieldRenderer";
+import { useBlockById, useBlockActions } from "../fields/extensions/blocksStore";
+
+interface GenericBlockProps {
+  block: Record<string, unknown>;
+  index: number;
+  blockSchema: Record<string, any>;
+}
+
+export const GenericBlock: React.FC<GenericBlockProps> = ({
+  block,
+  index,
+  blockSchema,
+}) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock } = useBlockActions();
+
+  const data = (blockData?.data || block.data || {}) as Record<string, unknown>;
+
+  const handleChange = (fieldName: string, value: unknown) => {
+    updateBlock(block.id, { data: { ...data, [fieldName]: value } });
+  };
+
+  return (
+    <BlockWrapper id={block.id} type={block.type as string} label={blockSchema.label as string}>
+      <div className="space-y-4 pt-2">
+        {blockSchema.fields?.map((field: any) => {
+          const value = data[field.name];
+          return (
+            <div key={field.name} className="kyro-block-field-row border-b border-[var(--kyro-border)]/30 pb-3 last:border-b-0 last:pb-0">
+              <FieldRenderer
+                field={field}
+                value={value}
+                onChange={(val) => handleChange(field.name, val)}
+              />
+            </div>
+          );
+        })}
+      </div>
+    </BlockWrapper>
+  );
+};

package/src/components/blocks/HeadingSubheadingBlock.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { HeadingSubheadingField } from "../fields/HeadingSubheadingField";
+import { BlockWrapper } from "./BlockWrapper";
+
+export const HeadingSubheadingBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+  block,
+  index,
+}) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock } = useBlockActions();
+
+  const data = blockData?.data || block.data || {};
+
+  const handleChange = (field: string, value: unknown) => {
+    updateBlock(block.id, { data: { ...data, [field]: value } });
+  };
+
+  return (
+    <BlockWrapper id={block.id} type="heading-subheading" label="Heading + Subheading">
+      <HeadingSubheadingField
+        heading={data.heading || ""}
+        subheading={data.subheading || ""}
+        onChange={handleChange}
+        compact
+      />
+    </BlockWrapper>
+  );
+};

package/src/components/blocks/HeroBlock.tsx

@@ -68,20 +68,11 @@ export const HeroBlock: React.FC<{ block: Record<string, unknown>; index: number
           compact
         />
 
-        <div className="grid grid-cols-2 gap-2">
-          <UploadField
-            field={{ label: "Background", name: "bgImage", maxCount: 1 }}
-            value={data.bgImage}
-            onChange={(v) => handleChange("bgImage", v)}
-          />
-          <input
-            type="url"
-            value={data.videoUrl || ""}
-            onChange={(e) => handleChange("videoUrl", e.target.value)}
-            className="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 font-mono text-xs"
-            placeholder="Video URL..."
-          />
-        </div>
+        <UploadField
+          field={{ label: "Background", name: "bgImage", maxCount: 1 }}
+          value={data.bgImage}
+          onChange={(v) => handleChange("bgImage", v)}
+        />
 
         <div className="pt-3 border-t border-[var(--kyro-border)]">
           <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block">

package/src/components/blocks/RichTextBlock.tsx

@@ -4,16 +4,16 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X, AlignLeft } from "../ui/icons";
-import PortableTextField from "../fields/PortableTextField";
+import { RichTextField } from "../fields";
 
-export const RichTextBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+export const RichTextBlock: React.FC<{ block: any; index: number }> = ({
   block,
   index,
 }) => {
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
-  const data = blockData?.data || block.data || {};
+  const data = (blockData?.data || block.data || {}) as Record<string, any>;
 
   const handleChange = (newValue: unknown) => {
     updateBlock(block.id, { data: { ...data, content: newValue } });
@@ -56,8 +56,8 @@ export const RichTextBlock: React.FC<{ block: Record<string, unknown>; index: nu
         </div>
       </div>
 
-      <PortableTextField
-        field={{ name: "content", label: "Content" }}
+      <RichTextField
+        field={{ name: "content", label: "Content", type: "richtext" } as any}
         value={data.content}
         onChange={handleChange}
       />

package/src/components/blocks/index.ts

@@ -1,10 +1,12 @@
-export { ColumnsBlock } from './ColumnsBlock';
 export { HeadingBlock } from './HeadingBlock';
+export { HeadingSubheadingBlock } from './HeadingSubheadingBlock';
 export { ParagraphBlock } from './ParagraphBlock';
-export { DividerBlock } from './DividerBlock';
 export { ImageBlock } from './ImageBlock';
 export { VideoBlock } from './VideoBlock';
 export { ListBlock } from './ListBlock';
 export { CodeBlock } from './CodeBlock';
-export { LinkBlock } from './LinkBlock';
 export { FileBlock } from './FileBlock';
+export { CardBlock } from './CardBlock';
+export { GenericBlock } from './GenericBlock';
+
+

package/src/components/fields/AccordionField.tsx

@@ -53,7 +53,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
     return (
       <div className="space-y-2">
         {items.length === 0 ? (
-          <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+          <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
             No items. Click "Add Item" to create one.
           </div>
         ) : (
@@ -135,7 +135,7 @@ export const AccordionField: React.FC<AccordionFieldProps> = ({
   return (
     <div className="space-y-2">
       {items.length === 0 ? (
-        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+        <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
           No items. Click "Add Item" to create one.
         </div>
       ) : (

package/src/components/fields/ArrayField.tsx

@@ -55,7 +55,7 @@ export const ArrayField: React.FC<ArrayFieldProps> = ({
     return (
       <div className="space-y-1.5">
         {items.length === 0 ? (
-          <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
+          <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-md">
             No items. Click "Add Item" to create one.
           </div>
         ) : (

package/src/components/fields/ArrayLayout.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import type { Field } from "@kyro-cms/core/client";
 import RelationshipField from "./RelationshipField";
+import { ChevronDown, ChevronUp } from "../ui/icons";
+
+const SIMPLE_TYPES = new Set(["text", "textarea", "number", "checkbox", "select", "radio", "color", "email", "password", "code", "markdown", "upload"]);
 
 interface ArrayLayoutProps {
   field: Field;
@@ -14,6 +17,12 @@ interface ArrayLayoutProps {
   disabled?: boolean;
 }
 
+function isCompactArray(field: Field): boolean {
+  const subFields = (field as Field & { fields?: Field[] }).fields || [];
+  if (subFields.length === 0 || subFields.length > 4) return false;
+  return subFields.every((f: Field) => SIMPLE_TYPES.has(f.type));
+}
+
 export function ArrayLayout({
   field,
   value,
@@ -22,8 +31,26 @@ export function ArrayLayout({
   disabled,
 }: ArrayLayoutProps) {
   const items = Array.isArray(value) ? value : [];
-  const labelField = (field as Field & { fields?: { name?: string; type?: string; relationTo?: string; label?: string }[] }).fields?.[0]?.name || "user";
-  const isRelationship = (field as Field & { fields?: { type?: string }[] }).fields?.[0]?.type === "relationship";
+  const fields = (field as Field & { fields?: { name?: string; type?: string; relationTo?: string; label?: string }[] }).fields || [];
+  const firstField = fields[0];
+  const labelField = firstField?.name || "user";
+  const isRelationship = firstField?.type === "relationship";
+  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+  function getItemLabel(item: Record<string, unknown>): string {
+    for (const key of ["label", "title", "name"]) {
+      const val = item[key];
+      if (val && typeof val === "string") return val;
+    }
+    for (const f of fields) {
+      if (f.type === "text" || f.type === "textarea") {
+        const val = item[f.name!];
+        if (val && typeof val === "string") return val;
+      }
+    }
+    return "";
+  }
+  const compact = isCompactArray(field);
 
   return (
     <div className="kyro-form-field">
@@ -45,42 +72,106 @@ export function ArrayLayout({
           }}
           disabled={disabled}
         />
-      ) : (
-        <div className="kyro-form-array border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-[var(--kyro-radius-md)] p-4 space-y-4">
+      ) : compact ? (
+        <div className="kyro-form-array kyro-form-array--compact border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-md overflow-hidden">
           {(items as Record<string, unknown>[]).map((item, index) => (
             <div
               key={index}
-              className="kyro-form-array-item bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-[var(--kyro-radius-md)] p-4 relative group"
+              className="flex items-start gap-2 px-3 py-1.5 border-b border-[var(--kyro-border)] last:border-b-0 hover:bg-[var(--kyro-sidebar-active)]/5 transition-colors"
             >
-              <div className="flex justify-between items-center mb-4 pb-2 border-b border-[var(--kyro-border)]">
-                <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-muted)]">
-                  Item {index + 1}
-                </span>
-                <button
-                  type="button"
-                  disabled={disabled}
-                  className="text-[11px] font-bold text-[var(--kyro-error)] opacity-50 hover:opacity-100 transition-opacity disabled:opacity-30"
-                  onClick={() =>
-                    onChange(items.filter((_: unknown, i: number) => i !== index))
-                  }
-                >
-                  Remove
-                </button>
-              </div>
-              <div className="space-y-4">
-                {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
-                  renderField(f, item, (newItem) => {
-                    const newItems = [...items];
-                    newItems[index] = newItem;
-                    onChange(newItems);
-                  }),
-                )}
+              <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] pt-2 min-w-[18px] text-center">
+                {index + 1}
+              </span>
+              <div className="flex-1 flex items-start gap-1.5 min-w-0">
+                  {(field as Field & { fields?: Field[] }).fields.map((f: Field) => {
+                  return (
+                    <div key={f.name} className="flex-1 min-w-0">
+                      {renderField(f, item, (newItem) => {
+                        const newItems = [...items];
+                        newItems[index] = newItem;
+                        onChange(newItems);
+                      })}
+                    </div>
+                  );
+                })}
               </div>
+              <button
+                type="button"
+                disabled={disabled}
+                onClick={() => onChange(items.filter((_: unknown, i: number) => i !== index))}
+                className="text-[var(--kyro-text-muted)] hover:text-[var(--kyro-error)] transition-colors disabled:opacity-30 p-0.5 mt-1.5 flex-shrink-0"
+                title="Remove"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
             </div>
           ))}
           <button
             type="button"
-            className="w-full py-3 border-2 border-dashed border-[var(--kyro-border)] rounded-[var(--kyro-radius-md)] text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
+            className="w-full py-2 border-2 border-dashed border-[var(--kyro-border)] rounded-none text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
+            disabled={disabled}
+            onClick={() => onChange([...items, {}])}
+          >
+            + Add Item
+          </button>
+        </div>
+      ) : (
+        <div className="kyro-form-array border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)]/30 rounded-md p-3 space-y-4">
+          {(items as Record<string, unknown>[]).map((item, index) => {
+            const isOpen = openIndex === index;
+            return (
+              <div
+                key={index}
+                className="border border-[var(--kyro-border)] rounded-lg overflow-hidden group"
+              >
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => setOpenIndex(isOpen ? null : index)}
+                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpenIndex(isOpen ? null : index); } }}
+                  className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors cursor-pointer"
+                >
+                  <span className="text-xs font-bold tracking-widest text-[var(--kyro-text-muted)] truncate">
+                    {getItemLabel(item) || `Item ${index + 1}`}
+                  </span>
+                  <div className="flex items-center gap-1">
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onChange(items.filter((_: unknown, i: number) => i !== index));
+                      }}
+                      className="text-[11px] font-bold text-[var(--kyro-error)] opacity-0 group-hover:opacity-100 transition-opacity disabled:opacity-30 hover:bg-[var(--kyro-danger-bg)] rounded px-1.5 py-0.5"
+                    >
+                      Remove
+                    </button>
+                    {isOpen ? (
+                      <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    ) : (
+                      <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                    )}
+                  </div>
+                </div>
+                {isOpen && (
+                  <div className="p-4 bg-[var(--kyro-surface)] space-y-4">
+                    {(field as Field & { fields?: Field[] }).fields.map((f: Field) =>
+                      renderField(f, item, (newItem) => {
+                        const newItems = [...items];
+                        newItems[index] = newItem;
+                        onChange(newItems);
+                      }),
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+          <button
+            type="button"
+            className="w-full py-3 border-2 border-dashed border-[var(--kyro-border)] rounded-lg text-xs font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-primary)] hover:border-[var(--kyro-primary)] transition-all disabled:opacity-50"
             disabled={disabled}
             onClick={() => onChange([...items, {}])}
           >