@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/blocks/ArrayBlock.tsx

@@ -4,7 +4,6 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "../ui/icons";
-import { ArrayField } from "../fields/ArrayField";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 
 export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
@@ -16,7 +15,6 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
 
   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">
@@ -26,7 +24,7 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
             Repeater
           </span>
           <span className="text-[10px] text-[var(--kyro-text-muted)]">
-            ({items.length + children.length} items)
+            ({children.length} items)
           </span>
         </div>
         <div className="flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -58,26 +56,11 @@ export const ArrayBlock: React.FC<{ block: Record<string, unknown>; index: numbe
       </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>
+        <ChildBlocksTree
+          blockId={block.id}
+          children={children}
+          onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
+        />
       </div>
     </div>
   );

package/src/components/blocks/BlockEditModal.tsx

@@ -1,38 +1,22 @@
 import React from "react";
-import { ChevronRight } from "../ui/icons";
 import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
+import { blockTheme } from "../fields/extensions/blockComponents";
 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";
+import { FieldRenderer } from "../FieldRenderer";
 
 interface BlockEditModalProps {
   block: Record<string, unknown>;
+  blockSchema?: Record<string, 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,
+  blockSchema,
   onClose,
 }) => {
   const blockData = useBlockById(block.id);
@@ -48,307 +32,96 @@ export const BlockEditModal: React.FC<BlockEditModalProps> = ({
     updateBlock(block.id, { children: newChildren });
   };
 
-  const handleUpdateColumnChildren = (
-    columnIndex: number,
-    newChildren: Record<string, unknown>[],
-  ) => {
-    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: unknown) => 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  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-medium 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 : []
+    // If a schema is present, render all fields dynamically using FieldRenderer
+    if (blockSchema && Array.isArray(blockSchema.fields)) {
+      return (
+        <div className="space-y-4 pt-2">
+          {blockSchema.fields.map((field: any) => {
+            // Evaluate condition if present
+            if (field.admin?.condition) {
+              if (typeof field.admin.condition === "function") {
+                try {
+                  // Compatibility wrapper: pass { values: data, ...data } to support both old and new signatures
+                  const evalData = { values: data, ...data };
+                  const shouldShow = field.admin.condition(evalData, evalData);
+                  if (!shouldShow) return null;
+                } catch (e) {
+                  console.warn(`Condition error for field ${field.name}:`, e);
+                }
+              } else if (typeof field.admin.condition === "object") {
+                try {
+                  const cond = field.admin.condition as any;
+                  const targetField = cond.field;
+                  const val = data[targetField];
+                  let shouldShow = true;
+                  if ("equals" in cond) {
+                    shouldShow = val === cond.equals;
+                  } else if ("notEquals" in cond) {
+                    shouldShow = val !== cond.notEquals;
+                  } else if ("in" in cond && Array.isArray(cond.in)) {
+                    shouldShow = cond.in.includes(val);
+                  }
+                  if (!shouldShow) return null;
+                } catch (e) {
+                  console.warn(`Declarative condition error for field ${field.name}:`, e);
+                }
+              }
             }
-            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>
-        );
+            const value = data[field.name];
+            return (
+              <div
+                key={field.name}
+                className="kyro-block-field-row border-b border-[var(--kyro-border)]/30 pb-3 last:border-b-0 last:pb-0"
+              >
+                <FieldRenderer
+                  field={field}
+                  value={value}
+                  onChange={(val) => handleChange(field.name, val)}
+                />
+              </div>
+            );
+          })}
+        </div>
+      );
     }
+
+    // Fallback if no schema is provided (for safety with legacy records)
+    return (
+      <div className="text-center py-8 text-[var(--kyro-text-muted)] text-sm italic">
+        No schema defined for block type "{block.type}"
+      </div>
+    );
   };
 
+  const theme = blockTheme[block.type as string] || blockTheme.default;
+
   return (
     <SlidePanel
       open={true}
       onClose={onClose}
-      title={`Edit ${block.type}`}
+      title={`Edit ${blockSchema?.label || block.type}`}
       width="xl"
+      showOverlay={false}
+      accentClass={theme.border}
     >
-      <div className="space-y-4">{renderFields()}</div>
+      <div className="space-y-4">
+        {renderFields()}
+
+        {children.length > 0 && (
+          <div className="pt-4 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>
       <div className="mt-6 pt-4 border-t border-[var(--kyro-border)]">
         <button
           type="button"

package/src/components/blocks/CardBlock.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
+import { CardField } from "../fields/CardField";
+import { BlockWrapper } from "./BlockWrapper";
+
+export const CardBlock: React.FC<{ block: Record<string, unknown>; index: number }> = ({
+  block,
+  index,
+}) => {
+  const blockData = useBlockById(block.id);
+  const { updateBlock } = useBlockActions();
+
+  const data = blockData?.data || block.data || {};
+
+  const handleChange = (field: string, value: unknown) => {
+    updateBlock(block.id, { data: { ...data, [field]: value } });
+  };
+
+  return (
+    <BlockWrapper id={block.id} type="card" label="Card">
+      <CardField
+        title={data.title || ""}
+        description={data.description || ""}
+        icon={data.icon || ""}
+        link={data.link || ""}
+        linkText={data.linkText || ""}
+        onChange={handleChange}
+        compact
+      />
+    </BlockWrapper>
+  );
+};