@kyro-cms/admin 0.1.6 → 0.1.7

package/src/components/blocks/AccordionBlock.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X, ChevronDown, ChevronUp } from "lucide-react";
+
+interface AccordionBlockProps {
+  block: any;
+  index: number;
+}
+
+export const AccordionBlock: React.FC<AccordionBlockProps> = ({
+  block,
+  index,
+}) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+  const data = blockData?.data ?? block.data ?? {};
+  const items = Array.isArray(data.items) ? data.items : [];
+  const [openIndex, setOpenIndex] = React.useState<number | null>(0);
+
+  return (
+    <div className="block-accordion border border-[var(--kyro-border)] rounded-lg p-4 mb-4 relative group bg-[var(--kyro-surface)]">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+            Accordion
+          </span>
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            ({items.length} items)
+          </span>
+        </div>
+        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3.5 h-3.5 rotate-[-90deg] text-[var(--kyro-text-muted)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3.5 h-3.5 rotate-90 text-[var(--kyro-text-muted)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1.5 hover:bg-red-50 rounded"
+            title="Remove"
+          >
+            <X className="w-3.5 h-3.5 text-red-500" />
+          </button>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        {items.map((item: any, i: number) => {
+          const isOpen = openIndex === i;
+          return (
+            <div
+              key={i}
+              className="border border-[var(--kyro-border)] rounded-lg overflow-hidden"
+            >
+              <button
+                type="button"
+                onClick={() => setOpenIndex(isOpen ? null : i)}
+                className="w-full flex items-center justify-between p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-sidebar-active)]/10 transition-colors"
+              >
+                <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+                  {item.title || `Item ${i + 1}`}
+                </span>
+                {isOpen ? (
+                  <ChevronUp className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                ) : (
+                  <ChevronDown className="w-4 h-4 text-[var(--kyro-text-muted)]" />
+                )}
+              </button>
+              {isOpen && (
+                <div className="p-3 bg-[var(--kyro-surface)]">
+                  <p className="text-sm text-[var(--kyro-text-primary)] whitespace-pre-wrap">
+                    {item.content || "No content"}
+                  </p>
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

package/src/components/blocks/ArrayBlock.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { ChevronRight, X } from "lucide-react";
+import { ChildBlocksTree } from "./ChildBlocksTree";
+
+interface ArrayBlockProps {
+  block: any;
+  index: number;
+}
+
+export const ArrayBlock: React.FC<ArrayBlockProps> = ({ 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 handleUpdateChildren = (newChildren: any[]) => {
+    updateBlock(block.id, { children: newChildren });
+  };
+
+  return (
+    <div className="block-array border border-[var(--kyro-border)] rounded-lg p-4 mb-4 relative group bg-[var(--kyro-surface)]">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+            Repeater
+          </span>
+          <span className="text-xs text-[var(--kyro-text-muted)]">
+            ({children.length} children)
+          </span>
+        </div>
+        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "up")}
+            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move up"
+          >
+            <ChevronRight className="w-3.5 h-3.5 rotate-[-90deg] text-[var(--kyro-text-muted)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => moveBlock(block.id, "down")}
+            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            title="Move down"
+          >
+            <ChevronRight className="w-3.5 h-3.5 rotate-90 text-[var(--kyro-text-muted)]" />
+          </button>
+          <button
+            type="button"
+            onClick={() => removeBlock(block.id)}
+            className="p-1.5 hover:bg-red-50 rounded"
+            title="Remove"
+          >
+            <X className="w-3.5 h-3.5 text-red-500" />
+          </button>
+        </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>
+  );
+};

package/src/components/blocks/BlockEditModal.MARKER

@@ -0,0 +1,12 @@
+# BlockEditModal Children Marker
+# Created: 2026-04-29
+# 
+# This marks the point where BlockEditModal was updated to include:
+# - Children (via ChildBlocksTree) for array, vstack, accordion, columns, hero
+# - Matching styling to original block components
+#
+# To revert:
+# 1. Check git history for previous BlockEditModal.tsx
+# 2. Or use: git show HEAD~1:admin/src/components/blocks/BlockEditModal.tsx > BlockEditModal.tsx
+#
+# Marker Line in code: // @MARKER: BlockEditModal with children - 2026-04-29