@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/blocks/BlockEditModal.tsx

@@ -0,0 +1,774 @@
+import React, { useState, useEffect } from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { SlidePanel } from "../ui/SlidePanel";
+import { ChildBlocksTree } from "./ChildBlocksTree";
+import { ImageField } from "../fields/ImageField";
+import PortableTextField from "../fields/PortableTextField";
+import { FileField } from "../fields/FileField";
+
+interface BlockEditModalProps {
+  block: any;
+  onClose: () => void;
+}
+
+// @MARKER: BlockEditModal with children - 2026-04-29
+// If you want to revert, check git history for previous version
+
+export const BlockEditModal: React.FC<BlockEditModalProps> = ({
+  block,
+  onClose,
+}) => {
+  const blockData = useBlockById(block.id);
+  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 } });
+  };
+
+  const handleUpdateChildren = (newChildren: any[]) => {
+    updateBlock(block.id, { children: newChildren });
+  };
+
+  const handleUpdateColumnChildren = (
+    columnIndex: number,
+    newChildren: any[],
+  ) => {
+    const columnData = data.columnData || [];
+    const newColumnData = [...columnData];
+    newColumnData[columnIndex] = {
+      ...newColumnData[columnIndex],
+      children: newChildren,
+    };
+    updateBlock(block.id, { data: { ...data, columnData: newColumnData } });
+  };
+
+  const renderFields = () => {
+    switch (block.type) {
+      case "heading":
+        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>
+          </div>
+        );
+
+      case "paragraph":
+        return (
+          <div className="space-y-3">
+            <PortableTextField
+              field={{ name: "paragraph", label: "Content" }}
+              value={data.text}
+              onChange={(value) => handleChange("text", value)}
+              client:only="react"
+            />
+          </div>
+        );
+
+      case "image":
+        return (
+          <div className="space-y-4">
+            <ImageField
+              field={{ label: "Image", name: "image", maxCount: 1 }}
+              value={data.src}
+              onChange={(value) => handleChange("src", value)}
+            />
+            <div>
+              <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
+                Alt Text
+              </label>
+              <input
+                type="text"
+                value={data.alt || ""}
+                onChange={(e) => handleChange("alt", 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="Description for accessibility..."
+              />
+            </div>
+          </div>
+        );
+
+      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>
+        );
+
+      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>
+        );
+
+      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>
+        );
+
+      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>
+        );
+
+      case "code":
+        const languages = [
+          { value: "plaintext", label: "Text", icon: "📄" },
+          { value: "javascript", label: "JS", icon: "🟨" },
+          { value: "typescript", label: "TS", icon: "🔷" },
+          { value: "python", label: "PY", icon: "🐍" },
+          { value: "html", label: "HTML", icon: "🌐" },
+          { value: "css", label: "CSS", icon: "🎨" },
+          { 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)]"
+                    }`}
+                  >
+                    <span className="text-xs">{lang.icon}</span>
+                    {lang.label}
+                  </button>
+                ))}
+              </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>
+        );
+
+      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>
+        );
+
+      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>
+            <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..."
+              />
+            </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
+              </label>
+              <ChildBlocksTree
+                blockId={block.id}
+                children={children}
+                onUpdateChildren={handleUpdateChildren}
+              />
+            </div>
+          </div>
+        );
+
+      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
+              </label>
+              <ChildBlocksTree
+                blockId={block.id}
+                children={children}
+                onUpdateChildren={handleUpdateChildren}
+              />
+            </div>
+          </div>
+        );
+
+      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>
+        );
+
+      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>
+        );
+
+      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>
+        );
+
+      default:
+        return (
+          <div className="text-center py-8 text-[var(--kyro-text-muted)]">
+            No editor for "{block.type}"
+          </div>
+        );
+    }
+  };
+
+  return (
+    <SlidePanel
+      open={true}
+      onClose={onClose}
+      title={`Edit ${block.type}`}
+      width="xl"
+    >
+      <div className="space-y-4">{renderFields()}</div>
+      <div className="mt-6 pt-4 border-t border-[var(--kyro-border)]">
+        <button
+          type="button"
+          onClick={onClose}
+          className="w-full py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-medium hover:opacity-90 transition-opacity"
+        >
+          Done
+        </button>
+      </div>
+    </SlidePanel>
+  );
+};