@kyro-cms/admin 0.1.6 → 0.1.8

package/src/components/blocks/ArrayBlock.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { ArrayField } from "../fields/ArrayField";
+import { ChildBlocksTree } from "./ChildBlocksTree";
+
+export const ArrayBlock: 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 children = blockData?.children ?? block.children ?? [];
+  const items = Array.isArray(data.items) ? data.items : [];
+
+  return (
+    <div className="block-array border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+            Repeater
+          </span>
+          <span className="text-[10px] text-[var(--kyro-text-muted)]">
+            ({items.length + children.length} items)
+          </span>
+        </div>
+        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {items.length > 0 && (
+          <ArrayField
+            items={items}
+            onChange={(newItems) =>
+              updateBlock(block.id, { data: { ...data, items: newItems } })
+            }
+            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}
+            children={children}
+            onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/BlockEditModal.tsx

@@ -0,0 +1,363 @@
+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 { UploadField } from "../fields/UploadField";
+import PortableTextField from "../fields/PortableTextField";
+import {
+  CodeField,
+  LinkField,
+  AccordionField,
+  ButtonField,
+  HeadingField,
+  VideoField,
+  ListField,
+  HeroField,
+  ArrayField,
+  ChildrenField,
+  ColumnsField,
+  RelationshipBlockField,
+} from "../fields";
+
+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 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 (
+          <HeadingField
+            text={data.text || ""}
+            onChange={handleChange}
+            compact
+          />
+        );
+
+      case "paragraph":
+        return (
+          <div className="space-y-3">
+            <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 "richtext":
+        return (
+          <div className="space-y-3">
+            <PortableTextField
+              field={{ name: "richtext", label: "Content" }}
+              value={data.content}
+              onChange={(value: any) => handleChange("content", value)}
+            />
+          </div>
+        );
+
+      case "image":
+        return (
+          <div className="space-y-4">
+            <UploadField
+              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 (
+          <VideoField
+            src={data.src || ""}
+            title={data.title || ""}
+            onChange={handleChange}
+            compact
+          />
+        );
+
+      case "link":
+        return (
+          <div className="space-y-3">
+            <LinkField
+              text={data.text || ""}
+              url={data.url || ""}
+              onChange={handleChange}
+              compact
+            />
+          </div>
+        );
+
+      case "button":
+        return (
+          <ButtonField
+            text={data.text || "Button"}
+            url={data.url || ""}
+            onChange={handleChange}
+            compact
+          />
+        );
+
+      case "list":
+        return (
+          <ListField
+            items={Array.isArray(data.items) ? data.items : []}
+            onChange={(items) => handleChange("items", items)}
+            compact
+          />
+        );
+
+      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-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"
+                  >
+                    <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>
+        );
+
+      case "file":
+        return (
+          <UploadField
+            field={{ label: "File", name: "file", maxCount: 1 }}
+            value={data.file}
+            onChange={(value) => handleChange("file", value)}
+          />
+        );
+
+      case "relationship":
+        return (
+          <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-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)}
+              />
+              <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="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}
+                children={children}
+                onUpdateChildren={handleUpdateChildren}
+              />
+            </div>
+          </div>
+        );
+
+      case "array":
+        return (
+          <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}
+                children={children}
+                onUpdateChildren={handleUpdateChildren}
+              />
+            </div>
+          </div>
+        );
+
+      case "accordion":
+        return (
+          <AccordionField
+            items={Array.isArray(data.items) ? data.items : []}
+            onChange={(items) => handleChange("items", items)}
+            compact
+          />
+        );
+
+      case "vstack":
+        return (
+          <ChildrenField
+            blockId={block.id}
+            children={children}
+            onUpdateChildren={handleUpdateChildren}
+          />
+        );
+
+      case "columns":
+        return (
+          <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:
+        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>
+  );
+};

package/src/components/blocks/ButtonBlock.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { ButtonField } from "../fields/ButtonField";
+
+export const ButtonBlock: 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 handleChange = (field: string, value: any) => {
+    updateBlock(block.id, { data: { ...data, [field]: value } });
+  };
+
+  return (
+    <div className="block-button border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+          Button
+        </span>
+        <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3 h-3 rotate-90" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3 h-3" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1 hover:bg-red-50 rounded text-red-500"
+            title="Remove"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+
+      <ButtonField
+        text={data.text || "Button"}
+        url={data.url || ""}
+        onChange={handleChange}
+        compact
+      />
+    </div>
+  );
+};