@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/blocks/BlockEditModal.tsx

@@ -1,13 +1,27 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
+import { ChevronRight } from "lucide-react";
 import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { SlidePanel } from "../ui/SlidePanel";
 import { ChildBlocksTree } from "./ChildBlocksTree";
-import { ImageField } from "../fields/ImageField";
+import { UploadField } from "../fields/UploadField";
 import PortableTextField from "../fields/PortableTextField";
-import { FileField } from "../fields/FileField";
+import {
+  CodeField,
+  LinkField,
+  AccordionField,
+  ButtonField,
+  HeadingField,
+  VideoField,
+  ListField,
+  HeroField,
+  ArrayField,
+  ChildrenField,
+  ColumnsField,
+  RelationshipBlockField,
+} from "../fields";
 
 interface BlockEditModalProps {
   block: any;
@@ -25,20 +39,6 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
   const { updateBlock } = useBlockActions();
   const data = blockData?.data || block.data || {};
   const children = blockData?.children || block.children || [];
-  const [collections, setCollections] = useState<string[]>([]);
-  const [loadingCollections, setLoadingCollections] = useState(true);
-
-  useEffect(() => {
-    fetch("/api/collections", { credentials: "include" })
-      .then((res) => res.json())
-      .then((data) => {
-        setCollections(
-          (data.collections || []).map((c: any) => c.slug || c.name || c),
-        );
-        setLoadingCollections(false);
-      })
-      .catch(() => setLoadingCollections(false));
-  }, []);
 
   const handleChange = (field: string, value: any) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
@@ -64,65 +64,33 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
   const renderFields = () => {
     switch (block.type) {
       case "heading":
+        return (
+          <HeadingField
+            text={data.text || ""}
+            onChange={handleChange}
+            compact
+          />
+        );
+
+      case "paragraph":
         return (
           <div className="space-y-3">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-[var(--kyro-text-muted)]">
-                Level:
-              </span>
-              <div className="flex items-center gap-1 bg-[var(--kyro-surface-accent)] rounded-lg p-0.5">
-                {[1, 2, 3].map((level) => (
-                  <button
-                    key={level}
-                    type="button"
-                    onClick={() => handleChange("level", level)}
-                    className={`px-3 py-1.5 rounded-md text-xs font-medium transition-all ${
-                      (data.level || 1) === level
-                        ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm"
-                        : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-                    }`}
-                  >
-                    H{level}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div>
-              <input
-                type="text"
-                value={data.text || ""}
-                onChange={(e) => handleChange("text", e.target.value)}
-                className="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"
-                placeholder="Enter heading text..."
-              />
-              {data.text && (
-                <div
-                  className="mt-3 p-3 bg-[var(--kyro-surface)] rounded-lg border border-[var(--kyro-border)]"
-                  style={{
-                    fontSize:
-                      data.level === 1
-                        ? "1.75rem"
-                        : data.level === 2
-                          ? "1.5rem"
-                          : "1.25rem",
-                    fontWeight: 700,
-                  }}
-                >
-                  {data.text}
-                </div>
-              )}
-            </div>
+            <textarea
+              value={data.text || ""}
+              onChange={(e) => handleChange("text", e.target.value)}
+              className="w-full px-3 py-3 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-primary)] text-sm min-h-[150px] resize-y focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+              placeholder="Enter paragraph text..."
+            />
           </div>
         );
 
-      case "paragraph":
+      case "richtext":
         return (
           <div className="space-y-3">
             <PortableTextField
-              field={{ name: "paragraph", label: "Content" }}
-              value={data.text}
-              onChange={(value) => handleChange("text", value)}
-              client:only="react"
+              field={{ name: "richtext", label: "Content" }}
+              value={data.content}
+              onChange={(value: any) => handleChange("content", value)}
             />
           </div>
         );
@@ -130,7 +98,7 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
       case "image":
         return (
           <div className="space-y-4">
-            <ImageField
+            <UploadField
               field={{ label: "Image", name: "image", maxCount: 1 }}
               value={data.src}
               onChange={(value) => handleChange("src", value)}
@@ -152,151 +120,43 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
 
       case "video":
         return (
-          <div className="space-y-4">
-            <div>
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                Video URL
-              </label>
-              <input
-                type="url"
-                value={data.src || ""}
-                onChange={(e) => handleChange("src", e.target.value)}
-                className="w-full px-3 py-2 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="MP4 or YouTube or Vimeo URL..."
-              />
-            </div>
-          </div>
+          <VideoField
+            src={data.src || ""}
+            title={data.title || ""}
+            onChange={handleChange}
+            compact
+          />
         );
 
       case "link":
         return (
-          <div className="space-y-4">
-            <div>
-              <input
-                type="text"
-                value={data.text || ""}
-                onChange={(e) => handleChange("text", e.target.value)}
-                className="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"
-                placeholder="Link text..."
-              />
-            </div>
-            <div>
-              <input
-                type="url"
-                value={data.url || ""}
-                onChange={(e) => handleChange("url", e.target.value)}
-                className="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"
-                placeholder="https://..."
-              />
-            </div>
-            {data.url && data.text && (
-              <div className="pt-2">
-                <div className="text-xs font-medium text-[var(--kyro-text-muted)] mb-2">
-                  Preview
-                </div>
-                <a
-                  href={data.url}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-medium text-sm hover:opacity-90 transition-opacity"
-                >
-                  {data.text}
-                  <svg
-                    className="w-3.5 h-3.5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                    />
-                  </svg>
-                </a>
-              </div>
-            )}
+          <div className="space-y-3">
+            <LinkField
+              text={data.text || ""}
+              url={data.url || ""}
+              onChange={handleChange}
+              compact
+            />
           </div>
         );
 
       case "button":
         return (
-          <div className="space-y-4">
-            <div>
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                Button Text
-              </label>
-              <input
-                type="text"
-                value={data.text || "Button"}
-                onChange={(e) => handleChange("text", e.target.value)}
-                className="w-full px-3 py-2 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"
-              />
-            </div>
-            <div>
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                Link URL
-              </label>
-              <input
-                type="url"
-                value={data.url || ""}
-                onChange={(e) => handleChange("url", e.target.value)}
-                className="w-full px-3 py-2 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="https://..."
-              />
-            </div>
-          </div>
+          <ButtonField
+            text={data.text || "Button"}
+            url={data.url || ""}
+            onChange={handleChange}
+            compact
+          />
         );
 
       case "list":
-        const listItems = Array.isArray(data.items) ? data.items : [];
         return (
-          <div className="space-y-3">
-            <div className="space-y-2">
-              {listItems.length === 0 ? (
-                <div className="text-center py-6 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
-                  No items. Type below to add.
-                </div>
-              ) : (
-                <div className="space-y-1">
-                  {listItems.map((item: any, index: number) => (
-                    <div key={index} className="flex items-center gap-2 group">
-                      <span className="text-sm text-[var(--kyro-text-primary)] flex-1">
-                        {item}
-                      </span>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          const newItems = listItems.filter(
-                            (_: any, i: number) => i !== index,
-                          );
-                          handleChange("items", newItems);
-                        }}
-                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-red-50 rounded text-red-500 transition-opacity"
-                      >
-                        ×
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-              <input
-                type="text"
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") {
-                    const input = e.target as HTMLInputElement;
-                    if (input.value.trim()) {
-                      handleChange("items", [...listItems, input.value.trim()]);
-                      input.value = "";
-                    }
-                  }
-                }}
-                className="w-full px-3 py-2 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="Type and press Enter to add..."
-              />
-            </div>
-          </div>
+          <ListField
+            items={Array.isArray(data.items) ? data.items : []}
+            onChange={(items) => handleChange("items", items)}
+            compact
+          />
         );
 
       case "code":
@@ -310,189 +170,100 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
           { value: "json", label: "JSON", icon: "📋" },
         ];
         return (
-          <div className="space-y-3">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-[var(--kyro-text-muted)]">
-                Language:
-              </span>
-              <div className="flex items-center gap-1 bg-[var(--kyro-surface-accent)] rounded-lg p-0.5 overflow-x-auto">
-                {languages.map((lang) => (
-                  <button
-                    key={lang.value}
-                    type="button"
-                    onClick={() => handleChange("language", lang.value)}
-                    className={`px-2 py-1 rounded text-[10px] font-medium whitespace-nowrap transition-all flex items-center gap-1 ${
-                      (data.language || "plaintext") === lang.value
-                        ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm"
-                        : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)]"
-                    }`}
+          <div className="space-y-4">
+            <CodeField
+              field={{
+                type: "code",
+                name: "code",
+                label: "Snippet",
+                language: data.language || "javascript",
+              }}
+              value={data.code || ""}
+              onChange={(val) => handleChange("code", val)}
+            />
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="text-[10px] font-bold uppercase tracking-widest text-[var(--kyro-text-muted)] mb-1.5 block">
+                  Language
+                </label>
+                <div className="relative">
+                  <select
+                    value={data.language || "javascript"}
+                    onChange={(e) => handleChange("language", e.target.value)}
+                    className="w-full pl-3 pr-10 py-2.5 bg-[var(--kyro-bg-secondary)] border border-[var(--kyro-border)] rounded-xl text-xs font-bold text-[var(--kyro-text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-primary)]/20 transition-all appearance-none cursor-pointer"
                   >
-                    <span className="text-xs">{lang.icon}</span>
-                    {lang.label}
-                  </button>
-                ))}
+                    <option value="plaintext">Plain Text</option>
+                    <option value="javascript">JS</option>
+                    <option value="typescript">TS</option>
+                    <option value="python">PY</option>
+                    <option value="html">HTML</option>
+                    <option value="css">CSS</option>
+                    <option value="json">JSON</option>
+                    <option value="rust">Rust</option>
+                  </select>
+                  <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[var(--kyro-text-muted)]">
+                    <ChevronRight className="w-4 h-4 rotate-90" />
+                  </div>
+                </div>
               </div>
             </div>
-            <div>
-              <textarea
-                value={data.code || ""}
-                onChange={(e) => handleChange("code", e.target.value)}
-                placeholder="Paste or type your code here..."
-                className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[160px] font-mono text-[var(--kyro-code-text)] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-                spellCheck={false}
-              />
-            </div>
           </div>
         );
 
       case "file":
         return (
-          <div className="space-y-4">
-            <FileField
-              field={{ label: "File", name: "file", maxCount: 1 }}
-              value={data.file}
-              onChange={(value) => handleChange("file", value)}
-            />
-          </div>
+          <UploadField
+            field={{ label: "File", name: "file", maxCount: 1 }}
+            value={data.file}
+            onChange={(value) => handleChange("file", value)}
+          />
         );
 
       case "relationship":
         return (
-          <div className="space-y-4">
-            <div>
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                Target Collection
-              </label>
-              {loadingCollections ? (
-                <div className="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-muted)]">
-                  Loading collections...
-                </div>
-              ) : (
-                <select
-                  value={data.relationTo || ""}
-                  onChange={(e) => handleChange("relationTo", e.target.value)}
-                  className="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"
-                >
-                  <option value="">Select collection...</option>
-                  {collections.map((col) => (
-                    <option key={col} value={col}>
-                      {col}
-                    </option>
-                  ))}
-                </select>
-              )}
-            </div>
-            <div>
-              <label className="flex items-center gap-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={data.hasMany || false}
-                  onChange={(e) => handleChange("hasMany", e.target.checked)}
-                  className="w-4 h-4 rounded border-[var(--kyro-border)] focus:ring-[var(--kyro-sidebar-active)] focus:ring-offset-0"
-                />
-                <span className="text-sm text-[var(--kyro-text-primary)]">
-                  Allow multiple selections
-                </span>
-              </label>
-            </div>
-            <div>
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                Label Field
-              </label>
-              <input
-                type="text"
-                value={data.labelField || "title"}
-                onChange={(e) => handleChange("labelField", e.target.value)}
-                className="w-full px-3 py-2 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"
-                placeholder="title, name, label..."
-              />
-            </div>
-          </div>
+          <RelationshipBlockField
+            relationTo={data.relationTo || "pages"}
+            hasMany={data.hasMany || false}
+            selectedIds={
+              Array.isArray(data.selectedIds) ? data.selectedIds : []
+            }
+            selectedId={data.selectedId}
+            labelField={data.labelField || "title"}
+            onChange={handleChange}
+          />
         );
 
       case "hero":
         return (
-          <div className="space-y-4">
-            <div>
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                Heading
-              </label>
-              <input
-                type="text"
-                value={data.heading || ""}
-                onChange={(e) => handleChange("heading", e.target.value)}
-                className="w-full px-3 py-2 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="Hero heading..."
+          <div className="space-y-3">
+            <HeroField
+              heading={data.heading || ""}
+              subheading={data.subheading || ""}
+              ctaText={data.ctaText || ""}
+              ctaUrl={data.ctaUrl || ""}
+              onChange={handleChange}
+              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)}
               />
-            </div>
-            <div>
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                Subheading
-              </label>
-              <textarea
-                value={data.subheading || ""}
-                onChange={(e) => handleChange("subheading", e.target.value)}
-                className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[80px] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-                placeholder="Hero subheading..."
+              <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>
-            <div className="grid grid-cols-2 gap-3">
-              <div>
-                <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                  Background Image
-                </label>
-                <ImageField
-                  field={{
-                    label: "Background Image",
-                    name: "bgImage",
-                    maxCount: 1,
-                  }}
-                  value={data.bgImage}
-                  onChange={(value) => handleChange("bgImage", value)}
-                />
-              </div>
-              <div>
-                <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                  Video URL
-                </label>
-                <input
-                  type="url"
-                  value={data.videoUrl || ""}
-                  onChange={(e) => handleChange("videoUrl", e.target.value)}
-                  className="w-full px-3 py-2 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="https://youtube.com/..."
-                />
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-3">
-              <div>
-                <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                  CTA Text
-                </label>
-                <input
-                  type="text"
-                  value={data.ctaText || ""}
-                  onChange={(e) => handleChange("ctaText", e.target.value)}
-                  className="w-full px-3 py-2 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="Button text..."
-                />
-              </div>
-              <div>
-                <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                  CTA URL
-                </label>
-                <input
-                  type="url"
-                  value={data.ctaUrl || ""}
-                  onChange={(e) => handleChange("ctaUrl", e.target.value)}
-                  className="w-full px-3 py-2 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="https://..."
-                />
-              </div>
-            </div>
-            <div className="pt-4 border-t border-[var(--kyro-border)]">
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-2 block">
-                Children
+
+            <div className="pt-2 border-t border-[var(--kyro-border)]">
+              <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block">
+                Children ({children.length})
               </label>
               <ChildBlocksTree
                 blockId={block.id}
@@ -505,10 +276,15 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
 
       case "array":
         return (
-          <div className="space-y-4">
-            <div className="pt-4 border-t border-[var(--kyro-border)]">
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-2 block">
-                Children
+          <div className="space-y-3">
+            <ArrayField
+              items={Array.isArray(data.items) ? data.items : []}
+              onChange={(items) => handleChange("items", items)}
+              compact
+            />
+            <div className="pt-2 border-t border-[var(--kyro-border)]">
+              <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1.5 block">
+                Children ({children.length})
               </label>
               <ChildBlocksTree
                 blockId={block.id}
@@ -521,226 +297,39 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
 
       case "accordion":
         return (
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)]">
-                Accordion Items
-              </label>
-              {(() => {
-                const accordionItems = Array.isArray(data.items)
-                  ? data.items
-                  : [];
-                if (accordionItems.length === 0) {
-                  return (
-                    <div className="text-center py-4 text-[var(--kyro-text-muted)] text-sm border border-dashed border-[var(--kyro-border)] rounded-lg">
-                      No items. Click "Add Item" to create one.
-                    </div>
-                  );
-                }
-                return (
-                  <div className="space-y-2">
-                    {accordionItems.map((item: any, index: number) => (
-                      <div
-                        key={index}
-                        className="p-3 border border-[var(--kyro-border)] rounded-lg bg-[var(--kyro-surface)] group"
-                      >
-                        <div className="flex items-center gap-2 mb-3">
-                          <div className="flex-1">
-                            <input
-                              type="text"
-                              value={item.title || ""}
-                              onChange={(e) => {
-                                const newItems = [...accordionItems];
-                                newItems[index] = {
-                                  ...newItems[index],
-                                  title: e.target.value,
-                                };
-                                handleChange("items", newItems);
-                              }}
-                              className="w-full px-3 py-2 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="Item title..."
-                            />
-                          </div>
-                          <button
-                            type="button"
-                            onClick={() => {
-                              const newItems = accordionItems.filter(
-                                (_: any, i: number) => i !== index,
-                              );
-                              handleChange("items", newItems);
-                            }}
-                            className="opacity-0 group-hover:opacity-100 p-1.5 hover:bg-red-50 rounded text-red-500 transition-opacity shrink-0"
-                          >
-                            <svg
-                              className="w-4 h-4"
-                              fill="none"
-                              stroke="currentColor"
-                              viewBox="0 0 24 24"
-                            >
-                              <path
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth="2"
-                                d="M6 18L18 6M6 6l12 12"
-                              />
-                            </svg>
-                          </button>
-                        </div>
-                        <div>
-                          <label className="text-[10px] font-medium text-[var(--kyro-text-muted)] mb-1 block">
-                            Content
-                          </label>
-                          <textarea
-                            value={item.content || ""}
-                            onChange={(e) => {
-                              const newItems = [...accordionItems];
-                              newItems[index] = {
-                                ...newItems[index],
-                                content: e.target.value,
-                              };
-                              handleChange("items", newItems);
-                            }}
-                            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-sm text-[var(--kyro-text-primary)] min-h-[60px] focus:outline-none focus:ring-1 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
-                            placeholder="Item content..."
-                          />
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                );
-              })()}
-              <button
-                type="button"
-                onClick={() => {
-                  const accordionItems = Array.isArray(data.items)
-                    ? data.items
-                    : [];
-                  const newItems = [
-                    ...accordionItems,
-                    { title: `Item ${accordionItems.length + 1}`, content: "" },
-                  ];
-                  handleChange("items", newItems);
-                }}
-                className="mt-2 px-3 py-1.5 text-xs rounded border border-dashed border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)] cursor-pointer hover:border-[var(--kyro-sidebar-active)] transition-colors w-full"
-              >
-                + Add Item
-              </button>
-            </div>
-          </div>
+          <AccordionField
+            items={Array.isArray(data.items) ? data.items : []}
+            onChange={(items) => handleChange("items", items)}
+            compact
+          />
         );
 
       case "vstack":
         return (
-          <div className="space-y-4">
-            <div className="pt-4 border-t border-[var(--kyro-border)]">
-              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-2 block">
-                Children
-              </label>
-              <ChildBlocksTree
-                blockId={block.id}
-                children={children}
-                onUpdateChildren={handleUpdateChildren}
-              />
-            </div>
-          </div>
+          <ChildrenField
+            blockId={block.id}
+            children={children}
+            onUpdateChildren={handleUpdateChildren}
+          />
         );
 
       case "columns":
-        const columns = data.columns || 1;
-        const columnData = data.columnData || [];
         return (
-          <div className="space-y-4">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-medium text-[var(--kyro-text-muted)]">
-                Columns:
-              </span>
-              <div className="flex items-center gap-1">
-                <button
-                  type="button"
-                  onClick={() =>
-                    handleChange("columns", Math.max(1, columns - 1))
-                  }
-                  disabled={columns <= 1}
-                  className="w-7 h-7 flex items-center justify-center rounded border border-[var(--kyro-border)] hover:border-[var(--kyro-sidebar-active)] hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30 disabled:cursor-not-allowed text-sm"
-                >
-                  −
-                </button>
-                <div className="w-8 h-7 flex items-center justify-center bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded text-sm font-medium">
-                  {columns}
-                </div>
-                <button
-                  type="button"
-                  onClick={() =>
-                    handleChange("columns", Math.min(6, columns + 1))
-                  }
-                  disabled={columns >= 6}
-                  className="w-7 h-7 flex items-center justify-center rounded border border-[var(--kyro-border)] hover:border-[var(--kyro-sidebar-active)] hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30 disabled:cursor-not-allowed text-sm"
-                >
-                  +
-                </button>
-              </div>
-              <span className="text-[10px] text-[var(--kyro-text-muted)] ml-auto">
-                1-6
-              </span>
-            </div>
-            <div className="pt-4 border-t border-[var(--kyro-border)]">
-              <div className="flex items-center justify-between mb-4">
-                <label className="text-xs font-medium text-[var(--kyro-text-muted)]">
-                  Column Children
-                </label>
-                <div className="flex gap-1">
-                  {Array.from({ length: columns }, (_, i) => (
-                    <div
-                      key={i}
-                      className={`w-6 h-6 rounded flex items-center justify-center text-[10px] font-medium ${
-                        i === 0
-                          ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-                          : "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-muted)]"
-                      }`}
-                    >
-                      {i + 1}
-                    </div>
-                  ))}
-                </div>
-              </div>
-              <div className="overflow-x-auto pb-2 -mx-2 px-2">
-                <div
-                  className={`grid gap-3`}
-                  style={{
-                    gridTemplateColumns: `repeat(${columns}, minmax(220px, 1fr))`,
-                  }}
-                >
-                  {Array.from({ length: columns }, (_, i) => (
-                    <div
-                      key={i}
-                      className="border-2 border-dashed border-[var(--kyro-border)] rounded-lg p-3 bg-[var(--kyro-bg-secondary)]/50 hover:border-[var(--kyro-sidebar-active)]/50 transition-colors"
-                    >
-                      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--kyro-border)]">
-                        <div className="w-5 h-5 rounded bg-[var(--kyro-sidebar-active)]/10 flex items-center justify-center">
-                          <span className="text-[10px] font-bold text-[var(--kyro-sidebar-active)]">
-                            {i + 1}
-                          </span>
-                        </div>
-                        <span className="text-xs font-medium text-[var(--kyro-text-primary)]">
-                          Column {i + 1}
-                        </span>
-                        <span className="text-[10px] text-[var(--kyro-text-muted)] ml-auto">
-                          {columnData[i]?.children?.length || 0} blocks
-                        </span>
-                      </div>
-                      <ChildBlocksTree
-                        blockId={`${block.id}-col-${i}`}
-                        children={columnData[i]?.children || []}
-                        onUpdateChildren={(newChildren) =>
-                          handleUpdateColumnChildren(i, newChildren)
-                        }
-                      />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
+          <ColumnsField
+            columns={data.columns || 2}
+            columnData={data.columnData || []}
+            onColumnsChange={(c) => {
+              const columnData = data.columnData || [];
+              const newColumnData = Array.from({ length: c }, (_, i) => ({
+                id: i,
+                children: columnData[i]?.children || [],
+              }));
+              updateBlock(block.id, {
+                data: { ...data, columns: c, columnData: newColumnData },
+              });
+            }}
+            onUpdateColumnChildren={handleUpdateColumnChildren}
+          />
         );
 
       default: