@kyro-cms/admin 0.1.7 → 0.1.9

package/src/components/blocks/ButtonBlock.tsx

@@ -3,16 +3,16 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X, ExternalLink } from "lucide-react";
+import { ChevronRight, X } from "lucide-react";
+import { ButtonField } from "../fields/ButtonField";
 
-interface ButtonBlockProps {
-  block: any;
-  index: number;
-}
-
-export const ButtonBlock: React.FC<ButtonBlockProps> = ({ block, index }) => {
+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) => {
@@ -20,31 +20,32 @@ export const ButtonBlock: React.FC<ButtonBlockProps> = ({ block, index }) => {
   };
 
   return (
-    <div className="block-button border border-[var(--kyro-border)] rounded-md p-4 mb-4 relative group">
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
-            Button
-          </span>
-        </div>
-        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-          <button type="button"
+    <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-[-90deg]" />
+            <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"
+            className="p-1 hover:bg-red-50 rounded text-red-500"
             title="Remove"
           >
             <X className="w-3 h-3" />
@@ -52,114 +53,12 @@ export const ButtonBlock: React.FC<ButtonBlockProps> = ({ block, index }) => {
         </div>
       </div>
 
-      <div className="space-y-3">
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            Button 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="Click here..."
-          />
-        </div>
-
-        <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 className="grid grid-cols-3 gap-3">
-          <div>
-            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-              Style
-            </label>
-            <select
-              value={block.data.variant || "primary"}
-              onChange={(e) => handleChange("variant", 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="primary">Primary</option>
-              <option value="secondary">Secondary</option>
-              <option value="outline">Outline</option>
-              <option value="ghost">Ghost</option>
-            </select>
-          </div>
-          <div>
-            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-              Size
-            </label>
-            <select
-              value={block.data.size || "md"}
-              onChange={(e) => handleChange("size", 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="sm">Small</option>
-              <option value="md">Medium</option>
-              <option value="lg">Large</option>
-            </select>
-          </div>
-          <div>
-            <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-              Target
-            </label>
-            <select
-              value={block.data.target || "_self"}
-              onChange={(e) => handleChange("target", 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="_self">Same Tab</option>
-              <option value="_blank">New Tab</option>
-            </select>
-          </div>
-        </div>
-
-        <div>
-          <label className="text-xs font-medium text-[var(--kyro-text-muted)] mb-1 block">
-            Alignment
-          </label>
-          <select
-            value={block.data.align || "left"}
-            onChange={(e) => handleChange("align", 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="left">Left</option>
-            <option value="center">Center</option>
-            <option value="right">Right</option>
-          </select>
-        </div>
-      </div>
-
-      {/* Preview */}
-      <div className="mt-4 p-4 bg-[var(--kyro-surface)] rounded border border-[var(--kyro-border)]">
-        <p className="text-xs text-[var(--kyro-text-muted)] mb-2">Preview:</p>
-        <button type="button"
-          className={`px-4 py-2 rounded font-medium text-sm
-            ${block.data.variant === "primary" ? "bg-[var(--kyro-primary)] text-white" : ""}
-            ${block.data.variant === "secondary" ? "bg-[var(--kyro-secondary)] text-white" : ""}
-            ${block.data.variant === "outline" ? "border border-[var(--kyro-primary)] text-[var(--kyro-primary)] bg-transparent" : ""}
-            ${block.data.variant === "ghost" ? "text-[var(--kyro-primary)] bg-transparent" : ""}
-            ${block.data.size === "sm" ? "text-xs px-3 py-1" : ""}
-            ${block.data.size === "md" ? "text-sm px-4 py-2" : ""}
-            ${block.data.size === "lg" ? "text-base px-5 py-3" : ""}
-          `}
-        >
-          {block.data.text || "Button"}
-          {block.data.target === "_blank" && (
-            <ExternalLink className="w-3 h-3 ml-2 inline" />
-          )}
-        </button>
-      </div>
+      <ButtonField
+        text={data.text || "Button"}
+        url={data.url || ""}
+        onChange={handleChange}
+        compact
+      />
     </div>
   );
 };

package/src/components/blocks/CodeBlock.tsx

@@ -3,7 +3,8 @@ import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X } from "lucide-react";
+import { ChevronRight, X, Code2 } from "lucide-react";
+import { CodeField } from "../fields/CodeField";
 
 export const CodeBlock: React.FC<{ block: any; index: number }> = ({
   block,
@@ -18,48 +19,95 @@ export const CodeBlock: React.FC<{ block: any; index: number }> = ({
   };
 
   return (
-    <div className="block-code border border-[var(--kyro-border)] rounded-md p-4 mb-2 relative group font-mono">
-      <div className="flex items-center justify-between mb-1">
-        <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
-          Code
-        </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>
+    <div className="group/block relative border border-[var(--kyro-border)] rounded-2xl p-6 mb-6 transition-all duration-300 bg-[var(--kyro-surface)] hover:border-[var(--kyro-primary)]/20">
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl bg-[var(--kyro-primary)]/10 flex items-center justify-center text-[var(--kyro-primary)] transition-transform group-hover/block:scale-110">
+            <Code2 className="w-5 h-5" />
+          </div>
+          <div>
+            <h4 className="text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]">Code Snippet</h4>
+            <p className="text-[10px] font-medium text-[var(--kyro-text-muted)] uppercase tracking-widest">
+              Block Editor • {data.language || "javascript"}
+            </p>
+          </div>
+        </div>
+        
+        <div className="flex items-center gap-1.5 opacity-0 group-hover/block:opacity-100 transition-all translate-x-2 group-hover/block:translate-x-0">
+          <div className="flex bg-[var(--kyro-surface-accent)]/50 p-1 rounded-xl border border-[var(--kyro-border)]">
+            <button 
+              type="button"
+              onClick={() => moveBlock(block.id, "up")}
+              className="p-1.5 hover:bg-[var(--kyro-surface)] rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)]"
+              title="Move up"
+            >
+              <ChevronRight className="w-4 h-4 rotate-[-90deg]" />
+            </button>
+            <div className="w-px h-4 bg-[var(--kyro-border)] mx-1 self-center" />
+            <button 
+              type="button"
+              onClick={() => removeBlock(block.id)}
+              className="p-1.5 hover:bg-red-500/10 rounded-lg transition-all text-[var(--kyro-text-muted)] hover:text-red-500"
+              title="Remove"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
         </div>
       </div>
-      <div>
-        <select
-          value={block.data.language || "plaintext"}
-          onChange={(e) => handleChange("language", 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 mb-3"
-        >
-          <option value="plaintext">Plain Text</option>
-          <option value="javascript">JavaScript</option>
-          <option value="typescript">TypeScript</option>
-          <option value="python">Python</option>
-          <option value="json">JSON</option>
-          <option value="html">HTML</option>
-          <option value="css">CSS</option>
-        </select>
-        <textarea
-          value={block.data.code || ""}
-          onChange={(e) => handleChange("code", 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-[120px] resize-none"
-          placeholder="Enter code..."
+      
+      <div className="space-y-6">
+        <CodeField
+          field={{
+            type: "code",
+            name: "code",
+            label: "Source Code",
+            language: data.language || "javascript"
+          }}
+          value={data.code || ""}
+          onChange={(val) => handleChange("code", val)}
         />
+        
+        <div className="flex items-center gap-4 bg-[var(--kyro-surface-accent)]/20 p-4 rounded-xl border border-[var(--kyro-border)]/50">
+          <div className="flex-1">
+            <label className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-text-muted)] mb-2 block">
+              Syntax Highlighting
+            </label>
+            <div className="relative">
+              <select
+                value={data.language || "javascript"}
+                onChange={(e) => handleChange("language", e.target.value)}
+                className="w-full pl-4 pr-10 py-2.5 bg-[var(--kyro-surface)] 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 focus:border-[var(--kyro-primary)] transition-all appearance-none cursor-pointer"
+              >
+                <option value="plaintext">Plain Text</option>
+                <option value="javascript">JavaScript</option>
+                <option value="typescript">TypeScript</option>
+                <option value="python">Python</option>
+                <option value="json">JSON</option>
+                <option value="html">HTML</option>
+                <option value="css">CSS</option>
+                <option value="sql">SQL</option>
+                <option value="rust">Rust</option>
+                <option value="markdown">Markdown</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 className="hidden sm:block w-px h-10 bg-[var(--kyro-border)]" />
+          
+          <div className="hidden sm:flex flex-col justify-center">
+            <span className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-text-muted)] mb-2">
+              Status
+            </span>
+            <div className="flex items-center gap-2 px-3 py-2 bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-xl">
+              <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+              <span className="text-[10px] font-bold text-[var(--kyro-text-primary)] tracking-wide">EDITING</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/components/blocks/ColumnsBlock.tsx

@@ -1,17 +1,15 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   useBlockById,
   useBlockActions,
 } from "../fields/extensions/blocksStore";
-import { ChevronRight, X, Plus, Minus, Columns3 } from "lucide-react";
-import { ChildBlocksTree } from "./ChildBlocksTree";
+import { ChevronRight, X, Columns3 } from "lucide-react";
+import { ColumnsField } from "../fields/ColumnsField";
 
-interface ColumnsBlockProps {
-  block: any;
-  index: number;
-}
-
-export const ColumnsBlock: React.FC<ColumnsBlockProps> = ({ block, index }) => {
+export const ColumnsBlock: React.FC<{ block: any; index: number }> = ({
+  block,
+  index,
+}) => {
   const blockData = useBlockById(block.id);
   const { updateBlock, removeBlock, moveBlock } = useBlockActions();
 
@@ -19,23 +17,11 @@ export const ColumnsBlock: React.FC<ColumnsBlockProps> = ({ block, index }) => {
   const columns = data.columns || 2;
   const columnData = data.columnData || [];
 
-  const ensureColumnData = () => {
-    if (columnData.length !== columns) {
-      return Array.from({ length: columns }, (_, i) => ({
-        id: i,
-        children: columnData[i]?.children || [],
-      }));
-    }
-    return columnData;
-  };
-
-  const currentColumnData = ensureColumnData();
-
   const handleColumnsChange = (newColumns: number) => {
     if (newColumns < 1 || newColumns > 6) return;
     const newColumnData = Array.from({ length: newColumns }, (_, i) => ({
       id: i,
-      children: currentColumnData[i]?.children || [],
+      children: columnData[i]?.children || [],
     }));
     updateBlock(block.id, {
       data: { ...data, columns: newColumns, columnData: newColumnData },
@@ -46,7 +32,7 @@ export const ColumnsBlock: React.FC<ColumnsBlockProps> = ({ block, index }) => {
     columnIndex: number,
     newChildren: any[],
   ) => {
-    const newColumnData = [...currentColumnData];
+    const newColumnData = [...columnData];
     newColumnData[columnIndex] = {
       ...newColumnData[columnIndex],
       children: newChildren,
@@ -57,95 +43,51 @@ export const ColumnsBlock: React.FC<ColumnsBlockProps> = ({ block, index }) => {
   };
 
   return (
-    <div className="block-columns border border-[var(--kyro-border)] rounded-lg mb-4 overflow-hidden">
-      <div className="flex items-center justify-between px-4 py-2 bg-[var(--kyro-surface)] border-b border-[var(--kyro-border)]">
+    <div className="block-columns 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">
-          <Columns3 className="w-4 h-4 text-[var(--kyro-primary)]" />
-          <span className="text-sm font-medium text-[var(--kyro-text-primary)]">
+          <Columns3 className="w-3.5 h-3.5 text-[var(--kyro-primary)]" />
+          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
             Columns
           </span>
-          <span className="text-xs text-[var(--kyro-text-muted)]">
+          <span className="text-[10px] text-[var(--kyro-text-muted)]">
             ({columns})
           </span>
         </div>
-        <div className="flex items-center gap-1 bg-[var(--kyro-surface-accent)] rounded">
-          <button
-            type="button"
-            onClick={() => handleColumnsChange(columns - 1)}
-            disabled={columns <= 1}
-            className="p-1.5 hover:bg-[var(--kyro-surface)] rounded disabled:opacity-30"
-            title="Remove column"
-          >
-            <Minus className="w-3 h-3" />
-          </button>
-          <span className="px-2 text-xs font-medium">{columns}</span>
-          <button
-            type="button"
-            onClick={() => handleColumnsChange(columns + 1)}
-            disabled={columns >= 6}
-            className="p-1.5 hover:bg-[var(--kyro-surface)] rounded disabled:opacity-30"
-            title="Add column"
-          >
-            <Plus className="w-3 h-3" />
-          </button>
-        </div>
-        <div className="flex items-center gap-1">
+        <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]" />
+            <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" />
+            <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="grid gap-4 p-4"
-        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
-      >
-        {currentColumnData.map((col: any, colIndex: number) => (
-          <div
-            key={colIndex}
-            className="border-2 border-dashed border-[var(--kyro-border)] rounded-lg overflow-hidden"
-          >
-            <div className="px-3 py-2 bg-[var(--kyro-surface-accent)]/30 border-b border-[var(--kyro-border)] flex items-center justify-between">
-              <span className="text-xs font-medium text-[var(--kyro-text-muted)]">
-                Column {colIndex + 1}
-              </span>
-              <span className="text-xs text-[var(--kyro-text-muted)]">
-                ({col.children?.length || 0})
-              </span>
-            </div>
-            <div className="p-3 min-h-[80px]">
-              <ChildBlocksTree
-                blockId={`${block.id}-col-${colIndex}`}
-                children={col.children || []}
-                onUpdateChildren={(newChildren) =>
-                  handleUpdateColumnChildren(colIndex, newChildren)
-                }
-              />
-            </div>
-          </div>
-        ))}
-      </div>
+      <ColumnsField
+        columns={columns}
+        columnData={columnData}
+        onColumnsChange={handleColumnsChange}
+        onUpdateColumnChildren={handleUpdateColumnChildren}
+      />
     </div>
   );
 };

package/src/components/blocks/FileBlock.tsx

@@ -4,6 +4,7 @@ import {
   useBlockActions,
 } from "../fields/extensions/blocksStore";
 import { ChevronRight, X } from "lucide-react";
+import { UploadField } from "../fields/UploadField";
 
 export const FileBlock: React.FC<{ block: any; index: number }> = ({
   block,
@@ -11,6 +12,7 @@ export const FileBlock: 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,47 +20,44 @@ export const FileBlock: React.FC<{ block: any; index: number }> = ({
   };
 
   return (
-    <div className="block-file border border-[var(--kyro-border)] rounded-md p-4 mb-2 relative group flex items-center gap-3">
-      <div className="flex-1">
-        <div className="flex items-center justify-between mb-1">
-          <span className="text-xs font-semibold text-[var(--kyro-text-muted)] uppercase">
-            File
-          </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>
-          </div>
+    <div className="block-file 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">
+          File
+        </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={() => 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>
-        <input
-          type="text"
-          value={block.data.filename || ""}
-          onChange={(e) => handleChange("filename", 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="File name..."
-        />
-        <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 mt-2"
-          placeholder="Download URL..."
-        />
-      </div>
-      <div className="w-6 h-6 flex items-center justify-center text-[var(--kyro-text-muted)] flex-shrink-0">
-        📄
       </div>
+
+      <UploadField
+        field={{ label: "File", name: "file", maxCount: 1 }}
+        value={data.file}
+        onChange={(v) => handleChange("file", v)}
+      />
     </div>
   );
 };