@kyro-cms/admin 0.1.7 → 0.1.8

package/src/components/blocks/HeadingBlock.tsx

@@ -4,6 +4,7 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
+import { HeadingField } from "../fields/HeadingField";
 
 export const HeadingBlock: React.FC<{ block: any; index: number }> = ({
   block,
@@ -25,21 +26,24 @@ export const HeadingBlock: React.FC<{ block: any; index: number }> = ({
           Heading
         </span>
         <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button type="button"
+          <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"
+          <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"
+          <button
+            type="button"
             onClick={() => removeBlock(block.id)}
             className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded"
             title="Remove"
@@ -48,34 +52,8 @@ export const HeadingBlock: React.FC<{ block: any; index: number }> = ({
           </button>
         </div>
       </div>
-      <div className="space-y-2">
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            Level
-          </label>
-          <select
-            value={data.level || 1}
-            onChange={(e) => handleChange("level", parseInt(e.target.value))}
-            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-          >
-            <option value={1}>H1</option>
-            <option value={2}>H2</option>
-            <option value={3}>H3</option>
-          </select>
-        </div>
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            Text
-          </label>
-          <input
-            type="text"
-            value={data.text || ""}
-            onChange={(e) => handleChange("text", e.target.value)}
-            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="Enter heading text..."
-          />
-        </div>
-      </div>
+
+      <HeadingField text={data.text || ""} onChange={handleChange} compact />
     </div>
   );
 };

package/src/components/blocks/HeroBlock.tsx

@@ -3,17 +3,18 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { X, ChevronRight } from "lucide-react";
+import { ChevronRight, X } from "lucide-react";
+import { HeroField } from "../fields/HeroField";
+import { UploadField } from "../fields/UploadField";
 import { ChildBlocksTree } from "./ChildBlocksTree";
 
-interface HeroBlockProps {
-  block: any;
-  index: number;
-}
-
-export const HeroBlock: React.FC<HeroBlockProps> = ({ block, index }) => {
+export const HeroBlock: 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 ?? [];
 
@@ -21,134 +22,75 @@ export const HeroBlock: React.FC<HeroBlockProps> = ({ block, index }) => {
     updateBlock(block.id, { data: { ...data, [field]: value } });
   };
 
-  const handleUpdateChildren = (newChildren: any[]) => {
-    updateBlock(block.id, { children: newChildren });
-  };
-
   return (
-    <div className="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="block-hero 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-sm font-medium text-[var(--kyro-text-primary)]">
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
             Hero Section
           </span>
         </div>
-        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+        <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.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 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)]" />
+            <ChevronRight className="w-3 h-3 rotate-90" />
           </button>
           <button
             type="button"
             onClick={() => moveBlock(block.id, "down")}
-            className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded"
+            className="p-1 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)]" />
+            <ChevronRight className="w-3 h-3" />
           </button>
           <button
             type="button"
             onClick={() => removeBlock(block.id)}
-            className="p-1.5 hover:bg-red-50 rounded"
+            className="p-1 hover:bg-red-50 rounded text-red-500"
             title="Remove"
           >
-            <X className="w-3.5 h-3.5 text-red-500" />
+            <X className="w-3 h-3" />
           </button>
         </div>
       </div>
 
-      <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-[var(--kyro-text-primary)] text-lg font-bold"
-            placeholder="Hero heading..."
-          />
-        </div>
+      <div className="space-y-3">
+        <HeroField
+          heading={data.heading || ""}
+          subheading={data.subheading || ""}
+          ctaText={data.ctaText || ""}
+          ctaUrl={data.ctaUrl || ""}
+          onChange={handleChange}
+          compact
+        />
 
-        <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-[var(--kyro-text-primary)] text-sm min-h-[60px] resize-none"
-            placeholder="Hero subheading..."
+        <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="grid grid-cols-2 gap-3">
-          <div>
-            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-              Background Image URL
-            </label>
-            <input
-              type="url"
-              value={data.bgImage || ""}
-              onChange={(e) => handleChange("bgImage", e.target.value)}
-              className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-bg-secondary)] text-[var(--kyro-text-primary)] text-sm"
-              placeholder="https://..."
-            />
-          </div>
-          <div>
-            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-              Video URL (YouTube/Vimeo)
-            </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-[var(--kyro-text-primary)] text-sm"
-              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-[var(--kyro-text-primary)] text-sm"
-              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-[var(--kyro-text-primary)] text-sm"
-              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">
+        <div className="pt-3 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}
+            onUpdateChildren={(c) => updateBlock(block.id, { children: c })}
           />
         </div>
       </div>

package/src/components/blocks/ImageBlock.tsx

@@ -4,6 +4,7 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
+import { UploadField } from "../fields/UploadField";
 
 export const ImageBlock: React.FC<{ block: any; index: number }> = ({
   block,
@@ -43,14 +44,12 @@ export const ImageBlock: React.FC<{ block: any; index: number }> = ({
       <div className="space-y-3">
         <div>
           <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            Image URL
+            Image Asset
           </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-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="https://..."
+          <UploadField
+            field={{ label: "Image Asset", name: "src", maxCount: 1 }}
+            value={data.src}
+            onChange={(value) => handleChange("src", value)}
           />
         </div>
         <div>

package/src/components/blocks/LinkBlock.tsx

@@ -4,6 +4,7 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
+import { LinkField } from "../fields/LinkField";
 
 export const LinkBlock: React.FC<{ block: any; index: number }> = ({
   block,
@@ -11,6 +12,7 @@ export const LinkBlock: React.FC<{ block: any; index: number }> = ({
 }) => {
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
+
   const data = blockData?.data ?? block.data ?? {};
 
   const handleChange = (field: string, value: any) => {
@@ -18,54 +20,46 @@ export const LinkBlock: React.FC<{ block: any; index: number }> = ({
   };
 
   return (
-    <div className="block-link border border-dashed border-[var(--kyro-border)] rounded-md p-4 mb-2 relative group">
-      <div className="flex items-center justify-between mb-1">
-        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+    <div className="block-link border border-[var(--kyro-border)] rounded-md p-2.5 mb-2 relative group">
+      <div className="flex items-center gap-2">
+        <span className="text-[10px] font-bold text-[var(--kyro-text-muted)] uppercase shrink-0 w-8">
           Link
         </span>
-        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button type="button"
+        <div className="flex-1 min-w-0">
+          <LinkField
+            text={data.text || ""}
+            url={data.url || ""}
+            onChange={handleChange}
+            compact
+          />
+        </div>
+        <div className="flex gap-0.5 shrink-0 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={() => removeBlock(block.id)}
+          <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">
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            URL
-          </label>
-          <input
-            type="url"
-            value={block.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-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="https://..."
-          />
-        </div>
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            Text
-          </label>
-          <input
-            type="text"
-            value={block.data.text || ""}
-            onChange={(e) => handleChange("text", e.target.value)}
-            className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-            placeholder="Link text..."
-          />
-        </div>
-      </div>
     </div>
   );
 };

package/src/components/blocks/ListBlock.tsx

@@ -1,39 +1,60 @@
 import React from "react";
-import { useBlocksStore } from "../fields/extensions/blocksStore";
+import {
+  useBlockById,
+  useBlockActions,
+} from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
+import { ListField } from "../fields/ListField";
 
-export const ListBlock: React.FC<{ block: any; index: number }> = ({ block, index }) => {
-  const { updateBlock, removeBlock, moveBlock } = useBlocksStore();
-  
-  const handleChange = (field: string, value: any) => {
-    updateBlock(block.id, { data: { ...block.data, [field]: value } });
+export const ListBlock: 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 listItems = Array.isArray(data.items) ? data.items : [];
+
+  const handleChange = (items: string[]) => {
+    updateBlock(block.id, { data: { ...data, items } });
   };
 
   return (
-    <div className="block-list border border-[var(--kyro-border)] rounded-md p-4 mb-2 relative group">
+    <div className="block-list border border-[var(--kyro-border)] rounded-md p-3 mb-2 relative group">
       <div className="flex items-center justify-between mb-1">
-        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">List</span>
+        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
+          List
+        </span>
         <div className="flex gap-1 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={() => removeBlock(block.id)} className="p-1 hover:bg-[var(--kyro-surface-accent)] rounded" title="Remove"><X className="w-3 h-3" /></button>
+          <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-2">
-        <select
-          value={block.data.type || "unordered"}
-          onChange={(e) => handleChange("type", e.target.value)}
-          className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm"
-        >
-          <option value="unordered">Unordered</option>
-          <option value="ordered">Ordered</option>
-        </select>
-        <textarea
-          value={block.data.items || ""}
-          onChange={(e) => handleChange("items", e.target.value)}
-          className="w-full px-3 py-2 border border-[var(--kyro-border)] rounded bg-[var(--kyro-surface)] text-[var(--kyro-text-primary)] text-sm min-h-[80px] resize-none"
-          placeholder="Enter list items (one per line)..."
-        />
-      </div>
+
+      <ListField items={listItems} onChange={handleChange} compact />
     </div>
   );
 };