@adminforge/core 0.3.1

package/src/ui/AdminDashboard.tsx

@@ -0,0 +1,176 @@
+"use client";
+import React from "react";
+import { AdminLayout } from "./components/AdminLayout.js";
+import { AdminPage } from "./screens/AdminPage.js";
+import { CollectionListPage } from "./screens/CollectionListPage.js";
+import { CollectionFormPage } from "./screens/CollectionFormPage.js";
+import { CollectionSchemaPage } from "./screens/CollectionSchemaPage.js";
+import { RolesListPage } from "./screens/RolesListPage.js";
+import { RoleDetailPage } from "./screens/RoleDetailPage.js";
+import { AgentTokenPage } from "./screens/AgentTokenPage.js";
+import type { AdminForgeConfig } from "../core/index.js";
+import { useAdminForge, AdminForgeProvider } from "./AdminForgeContext.js";
+import { useAdminSession } from "../auth/provider.js";
+import { useSearchParams } from "next/navigation.js";
+
+interface AdminDashboardProps {
+  config?: AdminForgeConfig;
+  params?: { admin?: string[] } | Promise<{ admin?: string[] }>;
+  apiBase?: string;
+}
+
+export function AdminDashboard({ config: initialConfig, params: initialParams, apiBase: initialApiBase }: AdminDashboardProps) {
+  const ctx = useAdminForge();
+  const config = initialConfig ?? ctx.config;
+  const apiBase = initialApiBase ?? ctx.apiBase;
+  const searchParams = useSearchParams();
+  const queryStr = searchParams.toString();
+
+  const [adminParams, setAdminParams] = React.useState<string[]>([]);
+  const [data, setData] = React.useState<any>(null);
+  const [record, setRecord] = React.useState<any>(null);
+  const [unauthorized, setUnauthorized] = React.useState(false);
+
+  React.useEffect(() => {
+    async function resolveParams() {
+      // If params is a promise (Next.js 15+), wait for it
+      const resolved = initialParams instanceof Promise ? await initialParams : initialParams;
+      
+      if (resolved?.admin) {
+        setAdminParams(resolved.admin);
+      } else if (typeof window !== "undefined") {
+        // Fallback to window.location if params are missing
+        const path = window.location.pathname;
+        const segments = path.split("/admin/").pop()?.split("/") || [];
+        setAdminParams(segments.filter(Boolean));
+      }
+    }
+    
+    resolveParams();
+  }, [initialParams]);
+
+  const [segment, actionOrId] = adminParams;
+
+  React.useEffect(() => {
+    if (!config || !segment) return;
+    const isCollection = config.collections.some((c: any) => c.name === segment);
+    if (!isCollection) return;
+
+    const query = queryStr ? `?${queryStr}` : "";
+
+    if (!actionOrId) {
+      fetch(`${apiBase}/${segment}${query}`)
+        .then(async res => {
+          if (res.status === 401) {
+            setUnauthorized(true);
+            return null;
+          }
+          if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+          const text = await res.text();
+          return text ? JSON.parse(text) : {};
+        })
+        .then(res => setData(res))
+        .catch(e => console.error(`[AdminForge] Failed to fetch ${apiBase}/${segment}:`, e));
+    } else if (actionOrId !== "new" && actionOrId !== "schema") {
+      fetch(`${apiBase}/${segment}/${actionOrId}${query}`)
+        .then(async res => {
+          if (res.status === 401) {
+            setUnauthorized(true);
+            return null;
+          }
+          if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+          const text = await res.text();
+          return text ? JSON.parse(text) : {};
+        })
+        .then(res => setRecord(res))
+        .catch(e => console.error(`[AdminForge] Failed to fetch ${apiBase}/${segment}/${actionOrId}:`, e));
+    }
+  }, [segment, actionOrId, apiBase, config, queryStr]);
+
+  return (
+    <AdminForgeProvider config={config} apiBase={apiBase}>
+      <AdminDashboardContent 
+        config={config} 
+        adminParams={adminParams}
+        unauthorized={unauthorized} 
+        data={data}
+        record={record}
+      />
+    </AdminForgeProvider>
+  );
+}
+
+function AdminDashboardContent({ config: _config, adminParams, unauthorized: localUnauthorized, data, record }: any) {
+  const { config: ctxConfig, unauthorized: ctxUnauthorized } = useAdminForge();
+  const config = _config ?? ctxConfig;
+  const session = useAdminSession();
+  const noSession = config?.auth?.enabled && !session?.user;
+  const unauthorized = localUnauthorized || ctxUnauthorized || noSession;
+
+  if (unauthorized) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', background: '#f8fafc', padding: '20px' }}>
+        <div style={{ background: '#fff', padding: '40px', borderRadius: '16px', boxShadow: '0 20px 25px -5px rgba(0,0,0,0.1)', maxWidth: '400px', width: '100%', textAlign: 'center' }}>
+          <div style={{ width: '64px', height: '64px', background: '#eff6ff', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 24px' }}>
+            <span className="material-symbols-outlined" style={{ color: '#3b82f6', fontSize: '32px' }}>lock</span>
+          </div>
+          <h2 style={{ fontSize: '24px', fontWeight: 700, color: '#0f172a', marginBottom: '8px' }}>Login Required</h2>
+          <p style={{ color: '#64748b', fontSize: '15px', marginBottom: '32px', lineHeight: 1.6 }}>Please sign in to access the AdminForge dashboard.</p>
+          <form action="/api/auth/signin" method="GET">
+            <button className="adminforge-btn adminforge-btn-primary" style={{ width: '100%', height: '48px', fontSize: '16px' }}>
+              Sign In to Admin
+            </button>
+          </form>
+        </div>
+      </div>
+    );
+  }
+
+  if (config) {
+    const [segment, actionOrId] = adminParams;
+
+    if (adminParams.length === 0) return <AdminPage config={config} />;
+
+    if (segment === "roles") {
+      if (actionOrId) return <RoleDetailPage config={config} roleId={actionOrId} />;
+      return <RolesListPage config={config} />;
+    }
+
+    if (segment === "settings" && actionOrId === "agent-tokens") {
+      return <AgentTokenPage config={config} />;
+    }
+
+    const collection = config.collections.find((c: any) => c.name === segment);
+    if (collection) {
+      if (actionOrId === "new") return <CollectionFormPage config={config} collection={collection} isNew />;
+      if (actionOrId === "schema") return <CollectionSchemaPage config={config} collection={collection} />;
+      if (actionOrId) return <CollectionFormPage config={config} collection={collection} isNew={false} record={record} />;
+
+      return (
+        <CollectionListPage
+          config={config}
+          collection={collection}
+          data={data?.data || []}
+          total={data?.total || 0}
+          page={data?.page || 1}
+          pageSize={data?.pageSize || 10}
+        />
+      );
+    }
+
+    return <AdminPage config={config} />;
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', background: '#f8fafc' }}>
+      <div style={{ textAlign: 'center' }}>
+        <div className="adminforge-spinner" style={{ width: '40px', height: '40px', border: '3px solid #e2e8f0', borderTopColor: '#3b82f6', borderRadius: '50%', margin: '0 auto 16px' }}></div>
+        <p style={{ color: '#64748b', fontSize: '14px', fontWeight: 500 }}>Loading AdminForge...</p>
+      </div>
+      <style>{`
+        .adminforge-spinner { animation: spin 0.8s linear infinite; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+      `}</style>
+    </div>
+  );
+}

package/src/ui/AdminForgeContext.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React, { createContext, useContext } from "react";
+import type { AdminForgeConfig } from "../core/index.js";
+
+interface AdminForgeContextType {
+  config: AdminForgeConfig | undefined;
+  apiBase: string;
+  unauthorized: boolean;
+}
+
+const AdminForgeContext = createContext<AdminForgeContextType>({ 
+  config: undefined, 
+  apiBase: "/api/adminforge",
+  unauthorized: false 
+});
+
+export function AdminForgeProvider({ 
+  children, 
+  config: initialConfig, 
+  apiBase = "/api" 
+}: { 
+  children: React.ReactNode; 
+  config?: AdminForgeConfig;
+  apiBase?: string;
+}) {
+  const [config, setConfig] = React.useState<AdminForgeConfig | undefined>(initialConfig);
+  const [unauthorized, setUnauthorized] = React.useState(false);
+
+  React.useEffect(() => {
+    // 1. Inject Material Symbols if missing
+    if (typeof document !== "undefined" && !document.getElementById("adminforge-fonts")) {
+      const link = document.createElement("link");
+      link.id = "adminforge-fonts";
+      link.rel = "stylesheet";
+      link.href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+      document.head.appendChild(link);
+    }
+
+    // 2. Auto-fetch config if not provided
+    if (!config) {
+      fetch(`${apiBase}/_config`)
+        .then(res => {
+          if (res.status === 401) {
+            setUnauthorized(true);
+            return null;
+          }
+          return res.ok ? res.json() : null;
+        })
+        .then(cfg => cfg?.collections ? setConfig(cfg) : null)
+        .catch(e => console.error("[AdminForge] Failed to fetch config:", e));
+    }
+  }, [config, apiBase]);
+
+  return (
+    <AdminForgeContext.Provider value={{ config, apiBase, unauthorized }}>
+      {children}
+    </AdminForgeContext.Provider>
+  );
+}
+
+export function useAdminForge() {
+  return useContext(AdminForgeContext);
+}

package/src/ui/components/AdminLayout.tsx

@@ -0,0 +1,107 @@
+import type { AdminForgeConfig } from "../../core";
+import Link from "next/link";
+
+interface AdminLayoutProps {
+  config: AdminForgeConfig;
+  children: React.ReactNode;
+  currentPath?: string;
+  role?: string;
+}
+
+const iconMap: Record<string, string> = {
+  posts: "article",
+  categories: "category",
+  tags: "sell",
+  users: "person",
+};
+
+export function AdminLayout({ config, children, currentPath, role }: AdminLayoutProps) {
+  return (
+    <div className="adminforge-layout">
+      <nav className="adminforge-sidebar">
+        <div className="adminforge-sidebar-header">
+          <Link href="/admin">
+            <h1>AdminForge</h1>
+          </Link>
+          <p className="adminforge-sidebar-subtitle">Collections Manager</p>
+        </div>
+        <ul className="adminforge-nav">
+          <li>
+            <Link href="/admin" className={`adminforge-nav-link ${currentPath === "/admin" ? "active" : ""}`}>
+              <div className="adminforge-nav-item-content">
+                <span className="material-symbols-outlined adminforge-nav-icon">dashboard</span>
+                <span>Overview</span>
+              </div>
+            </Link>
+          </li>
+          {config.collections.map((collection) => {
+            const a = collection.access;
+            if (a?.read && (!role || !a.read.includes(role))) return null;
+            const href = `/admin/${collection.name}`;
+            const icon = collection.icon || "database";
+            return (
+              <li key={collection.name} className="adminforge-nav-item">
+                <Link href={href} className={`adminforge-nav-link ${currentPath === href ? "active" : ""}`}>
+                  <div className="adminforge-nav-item-content">
+                    <span className="material-symbols-outlined adminforge-nav-icon">{icon}</span>
+                    <span>{collection.label}</span>
+                  </div>
+                </Link>
+                <Link href={`${href}/new`} className="adminforge-nav-quick-create" title={`Create New ${collection.label}`}>
+                  <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>add</span>
+                </Link>
+              </li>
+            );
+          })}
+          
+          <li className="adminforge-nav-section-title" style={{ marginTop: '24px', padding: '8px 16px', fontSize: '11px', fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            Access Control
+          </li>
+          <li>
+            <Link href="/admin/roles" className={`adminforge-nav-link ${currentPath?.startsWith("/admin/roles") ? "active" : ""}`}>
+              <div className="adminforge-nav-item-content">
+                <span className="material-symbols-outlined adminforge-nav-icon">shield_person</span>
+                <span>Roles</span>
+              </div>
+            </Link>
+          </li>
+
+          <li className="adminforge-nav-section-title" style={{ marginTop: '24px', padding: '8px 16px', fontSize: '11px', fontWeight: 700, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+            AI & Agents
+          </li>
+          <li>
+            <Link href="/admin/settings/agent-tokens" className={`adminforge-nav-link ${currentPath === "/admin/settings/agent-tokens" ? "active" : ""}`}>
+              <div className="adminforge-nav-item-content">
+                <span className="material-symbols-outlined adminforge-nav-icon">smart_toy</span>
+                <span>Agent Tokens</span>
+              </div>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+      <main className="adminforge-content">
+        <header className="adminforge-topbar">
+          <h2 style={{ fontSize: "1.125rem", fontWeight: 600 }}>
+            {currentPath === "/admin" ? "Dashboard" : "Management"}
+          </h2>
+          <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+            {role && (
+              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                <div style={{ width: "8px", height: "8px", borderRadius: "50%", background: "#10b981" }}></div>
+                <span style={{ fontSize: "13px", fontWeight: 500, color: "var(--color-text-secondary)" }}>{role}</span>
+              </div>
+            )}
+            {config.auth?.enabled && (
+              <form action="/api/logout" method="POST">
+                <button type="submit" className="adminforge-btn adminforge-btn-secondary" style={{ padding: "6px 12px", fontSize: "13px" }}>
+                  Log Out
+                </button>
+              </form>
+            )}
+          </div>
+        </header>
+        <div className="adminforge-main-canvas">{children}</div>
+      </main>
+    </div>
+  );
+}

package/src/ui/form-engine/FormEngine.tsx

@@ -0,0 +1,250 @@
+"use client";
+
+import type { CollectionDefinition, FieldDefinition, AccessConfig } from "../../core";
+import { useCallback, useRef, useState, useEffect } from "react";
+import { RichTextEditor } from "./RichTextEditor.js";
+import { ImageUpload } from "./ImageUpload.js";
+import { RelationInput } from "./RelationInput.js";
+
+interface FormEngineProps {
+  collection: CollectionDefinition;
+  record?: Record<string, unknown> | null;
+  isNew: boolean;
+  role?: string;
+}
+
+function hasAccess(access: AccessConfig | undefined, operation: string, role?: string): boolean {
+  if (!access) return true;
+  const allowed = access[operation as keyof AccessConfig];
+  if (!allowed || !Array.isArray(allowed)) return true;
+  if (!role) return false;
+  return allowed.includes(role);
+}
+
+function FieldRenderer({
+  name, field, value, onChange, onRelationChange, error, role, checked, onCheckedChange,
+}: {
+  name: string; field: FieldDefinition; value?: unknown; onChange?: (val: string) => void;
+  onRelationChange?: (val: string | string[]) => void; error?: string; role?: string;
+  checked?: boolean; onCheckedChange?: (checked: boolean) => void;
+}) {
+  const { component, props } = field.ui;
+  if (props?.hidden) return null;
+  if (!hasAccess(field.access, "read", role)) return null;
+
+  const errorClass = error ? "adminforge-input-error" : "";
+  const resolvedValue = value !== undefined ? value : field.db?.default;
+  const isReadOnly = Boolean(props?.readOnly) || !hasAccess(field.access, "update", role);
+
+  switch (component) {
+    case "text": case "slug": case "date":
+      return (
+        <div className="adminforge-field">
+          <label htmlFor={name}>{(props?.label as string) ?? name}</label>
+          <input id={name} name={name} type={component === "date" ? "datetime-local" : "text"}
+            className={`adminforge-input ${errorClass}`} required={!field.db?.nullable}
+            defaultValue={typeof resolvedValue === "string" ? resolvedValue : ""} readOnly={isReadOnly} />
+          {error && <span className="adminforge-field-err">{error}</span>}
+        </div>
+      );
+    case "boolean":
+      return (
+        <div className="adminforge-field adminforge-field-checkbox">
+          <label htmlFor={name}>
+            <input id={name} name={name} type="checkbox"
+              checked={!!checked}
+              onChange={(e) => onCheckedChange?.(e.target.checked)}
+              disabled={isReadOnly} />
+            {(props?.label as string) ?? name}
+          </label>
+          {error && <span className="adminforge-field-err">{error}</span>}
+        </div>
+      );
+    case "relation":
+      return (
+        <div className="adminforge-field">
+          <label>{(props?.label as string) ?? name}</label>
+          <RelationInput name={name} to={props?.to as string} relationType={props?.relationType as string}
+            value={resolvedValue as string | string[] | undefined} onChange={onRelationChange} error={error} disabled={isReadOnly} />
+          {error && <span className="adminforge-field-err">{error}</span>}
+        </div>
+      );
+    case "richText":
+      return (
+        <div className="adminforge-field">
+          <label>{(props?.label as string) ?? name}</label>
+          <RichTextEditor name={name} value={typeof resolvedValue === "string" ? resolvedValue : ""}
+            onChange={(val) => !isReadOnly && onChange?.(val)} />
+          <input type="hidden" name={name} id={`${name}-hidden`} defaultValue={typeof resolvedValue === "string" ? resolvedValue : ""} />
+          {error && <span className="adminforge-field-err">{error}</span>}
+        </div>
+      );
+    case "image":
+      return <ImageUpload name={name} value={typeof resolvedValue === "string" ? resolvedValue : ""}
+        onChange={(val) => !isReadOnly && onChange?.(val)} />;
+    default:
+      return (
+        <div className="adminforge-field">
+          <label htmlFor={name}>{(props?.label as string) ?? name}</label>
+          <input id={name} name={name} type="text" className={`adminforge-input ${errorClass}`}
+            defaultValue={typeof resolvedValue === "string" ? resolvedValue : ""} readOnly={isReadOnly} />
+          {error && <span className="adminforge-field-err">{error}</span>}
+        </div>
+      );
+  }
+}
+
+export function FormEngine({ collection, record, isNew, role }: FormEngineProps) {
+  const formRef = useRef<HTMLFormElement>(null);
+  const [richTextValues, setRichTextValues] = useState<Record<string, string>>({});
+  const [relationValues, setRelationValues] = useState<Record<string, string | string[]>>({});
+  const [booleanValues, setBooleanValues] = useState<Record<string, boolean>>({});
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const canSave = isNew
+    ? hasAccess(collection.access, "create", role)
+    : hasAccess(collection.access, "update", role);
+
+  useEffect(() => {
+    if (record && !isNew) {
+      const rt: Record<string, string> = {};
+      const rv: Record<string, string | string[]> = {};
+      const bv: Record<string, boolean> = {};
+      for (const [key, value] of Object.entries(record)) {
+        const field = collection.fields[key];
+        if (field?.type === "richText" && typeof value === "string") rt[key] = value;
+        if (field?.type === "relation") {
+          if (Array.isArray(value)) rv[key] = value.map((v: any) => (typeof v === "string" ? v : v.id));
+          else if (typeof value === "string") rv[key] = value;
+          else if (value && typeof value === "object" && (value as any).id) rv[key] = (value as any).id;
+        }
+        if (field?.type === "boolean") bv[key] = !!value;
+      }
+      setRichTextValues(rt);
+      setRelationValues(rv);
+      setBooleanValues(bv);
+    }
+  }, [record, isNew, collection.fields]);
+
+  useEffect(() => {
+    if (!isNew) return;
+    const form = formRef.current;
+    if (!form) return;
+    const listeners: { input: HTMLInputElement; fn: EventListener }[] = [];
+    Object.entries(collection.fields).forEach(([name, field]) => {
+      if (field.type === "slug" && field.ui.props?.from) {
+        const src = form.querySelector(`[name="${field.ui.props.from}"]`) as HTMLInputElement | null;
+        const dst = form.querySelector(`[name="${name}"]`) as HTMLInputElement | null;
+        if (src && dst) {
+          const fn = (e: Event) => {
+            const val = (e.target as HTMLInputElement).value;
+            dst.value = val.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+          };
+          src.addEventListener("input", fn);
+          listeners.push({ input: src, fn });
+        }
+      }
+    });
+    return () => listeners.forEach((l) => l.input.removeEventListener("input", l.fn));
+  }, [isNew, collection.fields]);
+
+  const handleSubmit = useCallback(async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!canSave) return;
+    setFieldErrors({});
+    setSubmitError(null);
+    const form = e.currentTarget;
+    const formData = new FormData(form);
+    const data: Record<string, unknown> = {};
+    for (const [key, value] of formData.entries()) {
+      if (value instanceof File) continue;
+      const field = collection.fields[key];
+      if (!hasAccess(field?.access, isNew ? "create" : "update", role)) continue;
+      if (richTextValues[key]) { data[key] = richTextValues[key]; }
+      else if (field?.type === "boolean") { continue; } // handled below from state
+      else if (field?.type === "relation") { continue; }
+      else { data[key] = value.toString(); }
+    }
+    // Merge boolean values from controlled state
+    for (const [name, field] of Object.entries(collection.fields)) {
+      if (field.type === "boolean" && hasAccess(field.access, isNew ? "create" : "update", role)) {
+        data[name] = booleanValues[name] ?? false;
+      }
+    }
+    for (const [key, val] of Object.entries(relationValues)) {
+      if (collection.fields[key] && hasAccess(collection.fields[key]?.access, isNew ? "create" : "update", role)) {
+        data[key] = val;
+      }
+    }
+    const url = isNew ? `/api/${collection.name}` : `/api/${collection.name}/${record?.id}`;
+    const method = isNew ? "POST" : "PATCH";
+    const res = await fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) });
+    if (res.ok) { window.location.href = `/admin/${collection.name}`; }
+    else {
+      const err = await res.json().catch(() => ({ error: "Request failed" }));
+      if (err.fields) {
+        const errors: Record<string, string> = {};
+        for (const f of err.fields as { path: string; message: string }[]) errors[f.path] = f.message;
+        setFieldErrors(errors);
+      }
+      setSubmitError(err.error ?? "An error occurred");
+    }
+  }, [collection, isNew, record?.id, richTextValues, relationValues, booleanValues, role, canSave]);
+
+  const handleRichTextChange = useCallback((name: string, value: string) => {
+    setRichTextValues((prev) => {
+      const next = { ...prev, [name]: value };
+      const hidden = formRef.current?.querySelector(`#${name}-hidden`) as HTMLInputElement | null;
+      if (hidden) hidden.value = value;
+      return next;
+    });
+  }, []);
+
+  return (
+    <form ref={formRef} onSubmit={handleSubmit} className="adminforge-form">
+      {submitError && <div className="adminforge-form-error">{submitError}</div>}
+      
+      {!isNew && !!record?.id && (
+        <div className="adminforge-field">
+          <label>Internal ID</label>
+          <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+            <input 
+              type="text" 
+              className="adminforge-input" 
+              value={String(record.id)} 
+              readOnly 
+              style={{ background: '#f8fafc', color: '#64748b', fontFamily: 'monospace' }} 
+            />
+            <button 
+              type="button" 
+              className="adminforge-btn-icon" 
+              title="Copy ID"
+              onClick={() => navigator.clipboard.writeText(String(record.id))}
+            >
+              <span className="material-symbols-outlined">content_copy</span>
+            </button>
+          </div>
+        </div>
+      )}
+      {Object.entries(collection.fields).map(([name, field]) => {
+        const fv = field.type === "relation" && relationValues[name] !== undefined ? relationValues[name] : record?.[name];
+        return (
+          <FieldRenderer key={name} name={name} field={field} value={fv}
+            onChange={(val) => handleRichTextChange(name, val)}
+            onRelationChange={(val) => setRelationValues((prev) => ({ ...prev, [name]: val }))}
+            checked={field.type === "boolean" ? (booleanValues[name] ?? false) : undefined}
+            onCheckedChange={field.type === "boolean" ? (checked) => setBooleanValues((prev) => ({ ...prev, [name]: checked })) : undefined}
+            error={fieldErrors[name]} role={role} />
+        );
+      })}
+      {canSave && (
+        <div className="adminforge-form-actions">
+          <button type="submit" className="adminforge-btn adminforge-btn-primary">
+            {isNew ? "Create" : "Save"}
+          </button>
+        </div>
+      )}
+    </form>
+  );
+}

package/src/ui/form-engine/ImageUpload.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { useAdminForge } from "../AdminForgeContext.js";
+
+interface ImageUploadProps {
+  name: string;
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+export function ImageUpload({ name, value, onChange }: ImageUploadProps) {
+  const { apiBase } = useAdminForge();
+  const [uploading, setUploading] = useState(false);
+  const [preview, setPreview] = useState(value ?? "");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  async function handleFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const res = await fetch(`${apiBase}/_media`, {
+        method: "POST",
+        body: formData,
+      });
+      if (!res.ok) throw new Error("Upload failed");
+      const data = await res.json();
+      onChange(data.url);
+      setPreview(data.url);
+    } catch {
+      alert("Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  return (
+    <div className="adminforge-field">
+      <label>{(name.charAt(0).toUpperCase() + name.slice(1))} Image</label>
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFile}
+        style={{ display: "none" }}
+      />
+      <div className="adminforge-image-upload">
+        {preview && (
+          <img src={preview} alt="Preview" className="adminforge-image-preview" />
+        )}
+        <button
+          type="button"
+          className="adminforge-btn adminforge-btn-secondary"
+          onClick={() => inputRef.current?.click()}
+          disabled={uploading}
+        >
+          {uploading ? "Uploading..." : preview ? "Replace Image" : "Choose Image"}
+        </button>
+      </div>
+      <input type="hidden" name={name} value={preview} />
+    </div>
+  );
+}