@adminforge/core 0.3.1

package/dist/ui.js

@@ -0,0 +1,2448 @@
+"use client";
+
+// src/ui/components/AdminLayout.tsx
+import Link from "next/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AdminLayout({ config, children, currentPath, role }) {
+  return /* @__PURE__ */ jsxs("div", { className: "adminforge-layout", children: [
+    /* @__PURE__ */ jsxs("nav", { className: "adminforge-sidebar", children: [
+      /* @__PURE__ */ jsxs("div", { className: "adminforge-sidebar-header", children: [
+        /* @__PURE__ */ jsx(Link, { href: "/admin", children: /* @__PURE__ */ jsx("h1", { children: "AdminForge" }) }),
+        /* @__PURE__ */ jsx("p", { className: "adminforge-sidebar-subtitle", children: "Collections Manager" })
+      ] }),
+      /* @__PURE__ */ jsxs("ul", { className: "adminforge-nav", children: [
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: "/admin", className: `adminforge-nav-link ${currentPath === "/admin" ? "active" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "adminforge-nav-item-content", children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined adminforge-nav-icon", children: "dashboard" }),
+          /* @__PURE__ */ jsx("span", { children: "Overview" })
+        ] }) }) }),
+        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 /* @__PURE__ */ jsxs("li", { className: "adminforge-nav-item", children: [
+            /* @__PURE__ */ jsx(Link, { href, className: `adminforge-nav-link ${currentPath === href ? "active" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "adminforge-nav-item-content", children: [
+              /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined adminforge-nav-icon", children: icon }),
+              /* @__PURE__ */ jsx("span", { children: collection.label })
+            ] }) }),
+            /* @__PURE__ */ jsx(Link, { href: `${href}/new`, className: "adminforge-nav-quick-create", title: `Create New ${collection.label}`, children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", style: { fontSize: "18px" }, children: "add" }) })
+          ] }, collection.name);
+        }),
+        /* @__PURE__ */ jsx("li", { className: "adminforge-nav-section-title", style: { marginTop: "24px", padding: "8px 16px", fontSize: "11px", fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Access Control" }),
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: "/admin/roles", className: `adminforge-nav-link ${currentPath?.startsWith("/admin/roles") ? "active" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "adminforge-nav-item-content", children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined adminforge-nav-icon", children: "shield_person" }),
+          /* @__PURE__ */ jsx("span", { children: "Roles" })
+        ] }) }) }),
+        /* @__PURE__ */ jsx("li", { className: "adminforge-nav-section-title", style: { marginTop: "24px", padding: "8px 16px", fontSize: "11px", fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "AI & Agents" }),
+        /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Link, { href: "/admin/settings/agent-tokens", className: `adminforge-nav-link ${currentPath === "/admin/settings/agent-tokens" ? "active" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "adminforge-nav-item-content", children: [
+          /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined adminforge-nav-icon", children: "smart_toy" }),
+          /* @__PURE__ */ jsx("span", { children: "Agent Tokens" })
+        ] }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("main", { className: "adminforge-content", children: [
+      /* @__PURE__ */ jsxs("header", { className: "adminforge-topbar", children: [
+        /* @__PURE__ */ jsx("h2", { style: { fontSize: "1.125rem", fontWeight: 600 }, children: currentPath === "/admin" ? "Dashboard" : "Management" }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+          role && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { width: "8px", height: "8px", borderRadius: "50%", background: "#10b981" } }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 500, color: "var(--color-text-secondary)" }, children: role })
+          ] }),
+          config.auth?.enabled && /* @__PURE__ */ jsx("form", { action: "/api/logout", method: "POST", children: /* @__PURE__ */ jsx("button", { type: "submit", className: "adminforge-btn adminforge-btn-secondary", style: { padding: "6px 12px", fontSize: "13px" }, children: "Log Out" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "adminforge-main-canvas", children })
+    ] })
+  ] });
+}
+
+// src/ui/AdminDashboard.tsx
+import React3 from "react";
+
+// src/ui/screens/AdminPage.tsx
+import Link2 from "next/link";
+
+// src/auth/provider.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AdminSessionContext = createContext(null);
+function AuthProvider({
+  children,
+  session
+}) {
+  return /* @__PURE__ */ jsx2(AdminSessionContext.Provider, { value: session, children });
+}
+function useAdminSession() {
+  return useContext(AdminSessionContext);
+}
+
+// src/ui/screens/AdminPage.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function formatRelativeTime(date) {
+  const diff = Date.now() - date.getTime();
+  const minutes = Math.floor(diff / 6e4);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (isNaN(date.getTime())) return "Invalid date";
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  return `${days}d ago`;
+}
+function AdminPage({ config, role: propRole }) {
+  const session = useAdminSession();
+  const role = propRole || session?.role || session?.user?.role;
+  const schemaActivity = config.collections?.[0] && config.collections[0]?.schemaActivity;
+  return /* @__PURE__ */ jsx3(AdminLayout, { config, currentPath: "/admin", role, children: /* @__PURE__ */ jsxs2("div", { className: "adminforge-dashboard", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mb-10", children: [
+      /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", gap: "16px", marginBottom: "8px" }, children: /* @__PURE__ */ jsx3("h2", { className: "adminforge-display-title", style: { marginBottom: 0 }, children: "Collection Registry" }) }),
+      /* @__PURE__ */ jsx3("p", { className: "adminforge-display-subtitle", style: { marginBottom: "32px" }, children: "Index of all data models defined in your system." })
+    ] }),
+    schemaActivity && /* @__PURE__ */ jsxs2("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      padding: "12px 20px",
+      background: "#f0f9ff",
+      border: "1px solid #bae6fd",
+      borderRadius: "12px",
+      marginBottom: "24px",
+      boxShadow: "0 1px 2px rgba(0,0,0,0.05)"
+    }, children: [
+      /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", style: { color: "#0284c7", fontSize: "20px" }, children: "sync" }),
+      /* @__PURE__ */ jsxs2("div", { style: { fontSize: "14px", color: "#0369a1" }, children: [
+        /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600 }, children: "Schema Synced:" }),
+        " Your definitions from ",
+        /* @__PURE__ */ jsx3("code", { style: { background: "#e0f2fe", padding: "2px 4px", borderRadius: "4px" }, children: "adminforge.ts" }),
+        " were last updated ",
+        /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500 }, children: formatRelativeTime(new Date(schemaActivity.updatedAt)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "adminforge-table-wrapper", children: [
+      /* @__PURE__ */ jsx3("div", { style: { padding: "24px", borderBottom: "1px solid var(--color-border)", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsx3("h3", { style: { fontSize: "18px", fontWeight: 600 }, children: "Registered Collections" }) }),
+      /* @__PURE__ */ jsxs2("table", { className: "adminforge-table", children: [
+        /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs2("tr", { children: [
+          /* @__PURE__ */ jsx3("th", { style: { width: "auto" }, children: "Collection Name" }),
+          /* @__PURE__ */ jsx3("th", { style: { width: "180px" }, children: "Field Definitions" }),
+          /* @__PURE__ */ jsx3("th", { style: { width: "120px", textAlign: "right" }, children: "Actions" })
+        ] }) }),
+        /* @__PURE__ */ jsx3("tbody", { children: config.collections.filter((collection) => {
+          const a = collection.access;
+          if (!a?.read) return true;
+          if (!role) return false;
+          return a.read.includes(role);
+        }).map((collection) => {
+          return /* @__PURE__ */ jsxs2("tr", { children: [
+            /* @__PURE__ */ jsx3("td", { children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+              /* @__PURE__ */ jsx3("div", { style: { width: "36px", height: "36px", borderRadius: "8px", background: "#f1f5f9", display: "flex", alignItems: "center", justifyContent: "center", color: "#64748b" }, children: /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", style: { fontSize: "20px" }, children: collection.icon || "database" }) }),
+              /* @__PURE__ */ jsx3("span", { style: { fontWeight: 600, color: "var(--color-text)", fontSize: "15px" }, children: collection.label })
+            ] }) }),
+            /* @__PURE__ */ jsx3("td", { children: /* @__PURE__ */ jsxs2("span", { className: "adminforge-badge adminforge-badge-secondary", style: { padding: "4px 10px" }, children: [
+              Object.keys(collection.fields).length,
+              " mapped fields"
+            ] }) }),
+            /* @__PURE__ */ jsx3("td", { style: { textAlign: "right" }, children: /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" }, children: [
+              /* @__PURE__ */ jsx3(Link2, { href: `/admin/${collection.name}`, className: "adminforge-btn-icon", title: "View Data", children: /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", style: { fontSize: "20px" }, children: "database" }) }),
+              /* @__PURE__ */ jsx3(Link2, { href: `/admin/${collection.name}/schema`, className: "adminforge-btn-icon", title: "View Schema", children: /* @__PURE__ */ jsx3("span", { className: "material-symbols-outlined", style: { fontSize: "20px" }, children: "visibility" }) })
+            ] }) })
+          ] }, collection.name);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { style: { padding: "20px 24px", background: "#fcfcfd", borderTop: "1px solid var(--color-border)", display: "flex", justifyContent: "space-between", alignItems: "center" }, children: /* @__PURE__ */ jsxs2("p", { style: { fontSize: "13px", color: "var(--color-text-secondary)" }, children: [
+        "Showing ",
+        config.collections.length,
+        " models from your current configuration."
+      ] }) })
+    ] })
+  ] }) });
+}
+
+// src/ui/table-engine/TableEngine.tsx
+import Link3 from "next/link";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function hasAccess(access, operation, role) {
+  if (!access) return true;
+  const allowed = access[operation];
+  if (!allowed || !Array.isArray(allowed)) return true;
+  if (!role) return false;
+  return allowed.includes(role);
+}
+function formatRelativeTime2(date) {
+  const diff = Date.now() - date.getTime();
+  const minutes = Math.floor(diff / 6e4);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  if (isNaN(date.getTime())) return "Invalid date";
+  if (minutes < 1) return "Just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  if (hours < 24) return `${hours}h ago`;
+  return `${days}d ago`;
+}
+function ActivityCell({ record }) {
+  const createdAtStr = record.createdAt || record.created_at;
+  const updatedAtStr = record.updatedAt || record.updated_at;
+  const createdAt = createdAtStr ? new Date(createdAtStr) : null;
+  const updatedAt = updatedAtStr ? new Date(updatedAtStr) : null;
+  const isUpdated = updatedAt && createdAt && updatedAt.getTime() > createdAt.getTime() + 1e3;
+  const date = isUpdated ? updatedAt : createdAt;
+  const label = isUpdated ? "Updated" : "Created";
+  if (!date) return /* @__PURE__ */ jsx4("span", { style: { color: "#94a3b8", fontSize: "13px" }, children: "No activity" });
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: "2px", minWidth: "120px" }, children: [
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px" }, children: [
+      /* @__PURE__ */ jsx4(
+        "span",
+        {
+          style: {
+            fontSize: "10px",
+            padding: "1px 6px",
+            borderRadius: "10px",
+            background: isUpdated ? "#fef3c7" : "#dcfce7",
+            color: isUpdated ? "#92400e" : "#166534",
+            fontWeight: 700,
+            textTransform: "uppercase"
+          },
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx4("span", { style: { fontWeight: 500, color: "var(--color-text)" }, children: formatRelativeTime2(date) })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: { fontSize: "11px", color: "#64748b" }, children: [
+      "by ",
+      /* @__PURE__ */ jsx4("span", { style: { color: "#0f172a", fontWeight: 600 }, children: "Admin" })
+    ] })
+  ] });
+}
+function TableEngine({ collection, data, basePath, role }) {
+  const records = data;
+  const fieldKeys = Object.keys(collection.fields);
+  const displayKeys = ["id", ...fieldKeys.slice(0, 4)];
+  const canDelete = hasAccess(collection.access, "delete", role);
+  const canUpdate = hasAccess(collection.access, "update", role);
+  return /* @__PURE__ */ jsx4("div", { className: "adminforge-table-wrapper", children: /* @__PURE__ */ jsxs3("table", { className: "adminforge-table", children: [
+    /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
+      displayKeys.map((key) => /* @__PURE__ */ jsx4("th", { children: key }, key)),
+      /* @__PURE__ */ jsx4("th", { children: "Activity" }),
+      /* @__PURE__ */ jsx4("th", { style: { textAlign: "right", paddingRight: "20px" }, children: "Actions" })
+    ] }) }),
+    /* @__PURE__ */ jsxs3("tbody", { children: [
+      records.map((record) => /* @__PURE__ */ jsxs3("tr", { children: [
+        displayKeys.map((key) => /* @__PURE__ */ jsx4("td", { children: key === "id" ? /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsxs3("span", { className: "adminforge-id-badge", title: String(record[key]), children: [
+            String(record[key]).substring(0, 8),
+            "..."
+          ] }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              className: "adminforge-btn-icon",
+              style: { width: "24px", height: "24px", minWidth: "24px" },
+              title: "Copy ID",
+              onClick: (e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(String(record[key]));
+              },
+              children: /* @__PURE__ */ jsx4("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: "content_copy" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx4("div", { style: { maxWidth: "140px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: String(record[key] ?? "") }) }, key)),
+        /* @__PURE__ */ jsx4("td", { children: /* @__PURE__ */ jsx4(ActivityCell, { record }) }),
+        /* @__PURE__ */ jsx4("td", { style: { textAlign: "right", paddingRight: "20px" }, children: /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: "4px", justifyContent: "flex-end" }, children: [
+          canUpdate && /* @__PURE__ */ jsx4(Link3, { href: `${basePath}/${record.id}`, className: "adminforge-btn-icon", title: "Edit", children: /* @__PURE__ */ jsx4("span", { className: "material-symbols-outlined", style: { fontSize: "20px" }, children: "edit" }) }),
+          canDelete && /* @__PURE__ */ jsx4(
+            "button",
+            {
+              className: "adminforge-btn-icon adminforge-btn-icon-danger",
+              title: "Delete",
+              onClick: async () => {
+                if (confirm("Are you sure you want to delete this item?")) {
+                  const res = await fetch(`/api/${collection.name}/${record.id}`, { method: "DELETE" });
+                  if (res.ok) {
+                    window.location.reload();
+                  } else {
+                    const err = await res.json();
+                    alert(err.error || "Failed to delete item");
+                  }
+                }
+              },
+              children: /* @__PURE__ */ jsx4("span", { className: "material-symbols-outlined", style: { fontSize: "20px" }, children: "delete" })
+            }
+          )
+        ] }) })
+      ] }, record.id)),
+      records.length === 0 && /* @__PURE__ */ jsx4("tr", { children: /* @__PURE__ */ jsx4("td", { colSpan: displayKeys.length + 1, children: "No records found" }) })
+    ] })
+  ] }) });
+}
+
+// src/ui/screens/CollectionListPage.tsx
+import Link4 from "next/link";
+import { useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function hasAccess2(access, operation, role) {
+  if (!access) return true;
+  const allowed = access[operation];
+  if (!allowed || !Array.isArray(allowed)) return true;
+  if (!role) return false;
+  return allowed.includes(role);
+}
+function CollectionListPage({ config, collection, data, total, page, pageSize, role: propRole }) {
+  const router = useRouter();
+  const session = useAdminSession();
+  const role = propRole || session?.role || session?.user?.role;
+  const [searchQuery, setSearchQuery] = useState("");
+  const canCreate = hasAccess2(collection.access, "create", role);
+  const updateParams = useCallback((newParams) => {
+    const params = new URLSearchParams(window.location.search);
+    Object.entries(newParams).forEach(([key, value]) => {
+      if (value) params.set(key, String(value));
+      else params.delete(key);
+    });
+    router.push(`/admin/${collection.name}?${params.toString()}`);
+  }, [collection.name, router]);
+  const handleSearch = (e) => {
+    e.preventDefault();
+    updateParams({ search: searchQuery, page: 1 });
+  };
+  const totalPages = Math.ceil(total / pageSize);
+  const startEntry = (page - 1) * pageSize + 1;
+  const endEntry = Math.min(page * pageSize, total);
+  return /* @__PURE__ */ jsx5(AdminLayout, { config, currentPath: `/admin/${collection.name}`, role, children: /* @__PURE__ */ jsxs4("div", { className: "adminforge-collection-page", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "adminforge-page-header", children: [
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+        /* @__PURE__ */ jsx5("h2", { style: { fontSize: "24px", fontWeight: 700, margin: 0 }, children: collection.label }),
+        /* @__PURE__ */ jsxs4("span", { className: "adminforge-badge", style: { background: "#f8fafc", color: "#64748b", borderColor: "#e2e8f0", fontSize: "11px", fontWeight: 600 }, children: [
+          total,
+          " total records"
+        ] })
+      ] }),
+      canCreate && /* @__PURE__ */ jsxs4(Link4, { href: `/admin/${collection.name}/new`, className: "adminforge-btn adminforge-btn-primary", children: [
+        /* @__PURE__ */ jsx5("span", { className: "material-symbols-outlined", style: { fontSize: "20px", marginRight: "8px" }, children: "add" }),
+        "Create New"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: { background: "var(--color-surface)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }, children: [
+      /* @__PURE__ */ jsx5("div", { style: { padding: "20px", borderBottom: "1px solid var(--color-border)", background: "#fcfcfd" }, children: /* @__PURE__ */ jsxs4("form", { onSubmit: handleSearch, style: { maxWidth: "400px", position: "relative" }, children: [
+        /* @__PURE__ */ jsx5("span", { className: "material-symbols-outlined", style: { position: "absolute", left: "12px", top: "50%", transform: "translateY(-50%)", color: "#94a3b8", fontSize: "20px" }, children: "search" }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            type: "text",
+            className: "adminforge-search-input",
+            placeholder: `Search ${(collection.label || collection.name).toLowerCase()}...`,
+            value: searchQuery,
+            onChange: (e) => setSearchQuery(e.target.value),
+            style: { paddingLeft: "40px", width: "100%" }
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx5(TableEngine, { collection, data, basePath: `/admin/${collection.name}`, role }),
+      /* @__PURE__ */ jsxs4("div", { style: { padding: "16px 24px", borderTop: "1px solid var(--color-border)", display: "flex", justifyContent: "space-between", alignItems: "center", background: "#fcfcfd" }, children: [
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+          /* @__PURE__ */ jsxs4("div", { style: { fontSize: "14px", color: "var(--color-text-secondary)" }, children: [
+            "Showing ",
+            /* @__PURE__ */ jsx5("span", { style: { fontWeight: 600, color: "var(--color-text)" }, children: startEntry }),
+            " to ",
+            /* @__PURE__ */ jsx5("span", { style: { fontWeight: 600, color: "var(--color-text)" }, children: endEntry }),
+            " of ",
+            /* @__PURE__ */ jsx5("span", { style: { fontWeight: 600, color: "var(--color-text)" }, children: total }),
+            " results"
+          ] }),
+          /* @__PURE__ */ jsx5(
+            "select",
+            {
+              value: pageSize,
+              onChange: (e) => updateParams({ pageSize: e.target.value, page: 1 }),
+              style: {
+                padding: "4px 8px",
+                borderRadius: "6px",
+                border: "1px solid var(--color-border)",
+                fontSize: "12px",
+                background: "white",
+                color: "var(--color-text)",
+                cursor: "pointer",
+                outline: "none"
+              },
+              children: [10, 25, 50, 100].map((size) => /* @__PURE__ */ jsxs4("option", { value: size, children: [
+                size,
+                " / page"
+              ] }, size))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => updateParams({ page: page - 1 }),
+              disabled: page <= 1,
+              className: "adminforge-btn-icon",
+              style: { border: "1px solid var(--color-border)", background: "white" },
+              children: /* @__PURE__ */ jsx5("span", { className: "material-symbols-outlined", children: "chevron_left" })
+            }
+          ),
+          [...Array(totalPages)].map((_, i) => {
+            const p = i + 1;
+            if (totalPages > 7 && p > 1 && p < totalPages && Math.abs(p - page) > 1) {
+              if (p === 2 || p === totalPages - 1) return /* @__PURE__ */ jsx5("span", { style: { padding: "0 4px" }, children: "..." }, p);
+              return null;
+            }
+            return /* @__PURE__ */ jsx5(
+              "button",
+              {
+                onClick: () => updateParams({ page: p }),
+                style: {
+                  width: "36px",
+                  height: "36px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "6px",
+                  border: "1px solid",
+                  borderColor: p === page ? "var(--color-primary)" : "var(--color-border)",
+                  background: p === page ? "var(--color-primary)" : "white",
+                  color: p === page ? "white" : "var(--color-text)",
+                  fontWeight: p === page ? 600 : 400,
+                  cursor: "pointer"
+                },
+                children: p
+              },
+              p
+            );
+          }),
+          /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: () => updateParams({ page: page + 1 }),
+              disabled: page >= totalPages,
+              className: "adminforge-btn-icon",
+              style: { border: "1px solid var(--color-border)", background: "white" },
+              children: /* @__PURE__ */ jsx5("span", { className: "material-symbols-outlined", children: "chevron_right" })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/ui/form-engine/FormEngine.tsx
+import { useCallback as useCallback3, useRef as useRef3, useState as useState5, useEffect as useEffect3 } from "react";
+
+// src/ui/form-engine/RichTextEditor.tsx
+import { useEditor, EditorContent } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import StarterKit from "@tiptap/starter-kit";
+import Link5 from "@tiptap/extension-link";
+import Underline from "@tiptap/extension-underline";
+import TextAlign from "@tiptap/extension-text-align";
+import Placeholder from "@tiptap/extension-placeholder";
+import Highlight from "@tiptap/extension-highlight";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Typography from "@tiptap/extension-typography";
+import BubbleMenuExtension from "@tiptap/extension-bubble-menu";
+import Image from "@tiptap/extension-image";
+import { useEffect, useCallback as useCallback2 } from "react";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function MenuButton({
+  onClick,
+  isActive = false,
+  disabled = false,
+  icon,
+  title
+}) {
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: `adminforge-editor-btn ${isActive ? "active" : ""}`,
+      title,
+      children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", style: { fontSize: "18px" }, children: icon })
+    }
+  );
+}
+function Toolbar({ editor }) {
+  const setLink = useCallback2(() => {
+    if (!editor) return;
+    const previousUrl = editor.getAttributes("link").href;
+    const url = window.prompt("URL", previousUrl);
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  }, [editor]);
+  const addImage = useCallback2(() => {
+    if (!editor) return;
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file) return;
+      const formData = new FormData();
+      formData.append("file", file);
+      try {
+        const res = await fetch("/api/upload", {
+          method: "POST",
+          body: formData
+        });
+        if (!res.ok) throw new Error("Upload failed");
+        const data = await res.json();
+        editor.chain().focus().setImage({ src: data.url }).run();
+      } catch (err) {
+        alert("Failed to upload image");
+      }
+    };
+    input.click();
+  }, [editor]);
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar-group", children: [
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().undo().run(),
+          disabled: !editor.can().undo(),
+          icon: "undo",
+          title: "Undo"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().redo().run(),
+          disabled: !editor.can().redo(),
+          icon: "redo",
+          title: "Redo"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-toolbar-separator" }),
+    /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar-group", children: [
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+          isActive: editor.isActive("heading", { level: 1 }),
+          icon: "format_h1",
+          title: "Heading 1"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+          isActive: editor.isActive("heading", { level: 2 }),
+          icon: "format_h2",
+          title: "Heading 2"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+          isActive: editor.isActive("heading", { level: 3 }),
+          icon: "format_h3",
+          title: "Heading 3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-toolbar-separator" }),
+    /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar-group", children: [
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleBold().run(),
+          isActive: editor.isActive("bold"),
+          icon: "format_bold",
+          title: "Bold"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleItalic().run(),
+          isActive: editor.isActive("italic"),
+          icon: "format_italic",
+          title: "Italic"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleUnderline().run(),
+          isActive: editor.isActive("underline"),
+          icon: "format_underlined",
+          title: "Underline"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleStrike().run(),
+          isActive: editor.isActive("strike"),
+          icon: "format_strikethrough",
+          title: "Strikethrough"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleCode().run(),
+          isActive: editor.isActive("code"),
+          icon: "code",
+          title: "Code"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleHighlight().run(),
+          isActive: editor.isActive("highlight"),
+          icon: "format_ink_highlighter",
+          title: "Highlight"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-toolbar-separator" }),
+    /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar-group", children: [
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: setLink,
+          isActive: editor.isActive("link"),
+          icon: "link",
+          title: "Link"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: addImage,
+          icon: "add_photo_alternate",
+          title: "Add Image"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleSubscript().run(),
+          isActive: editor.isActive("subscript"),
+          icon: "subscript",
+          title: "Subscript"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleSuperscript().run(),
+          isActive: editor.isActive("superscript"),
+          icon: "superscript",
+          title: "Superscript"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-toolbar-separator" }),
+    /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar-group", children: [
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("left").run(),
+          isActive: editor.isActive({ textAlign: "left" }),
+          icon: "format_align_left",
+          title: "Align Left"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("center").run(),
+          isActive: editor.isActive({ textAlign: "center" }),
+          icon: "format_align_center",
+          title: "Align Center"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("right").run(),
+          isActive: editor.isActive({ textAlign: "right" }),
+          icon: "format_align_right",
+          title: "Align Right"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+          isActive: editor.isActive({ textAlign: "justify" }),
+          icon: "format_align_justify",
+          title: "Justify"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-toolbar-separator" }),
+    /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar-group", children: [
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          isActive: editor.isActive("bulletList"),
+          icon: "format_list_bulleted",
+          title: "Bullet List"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+          isActive: editor.isActive("orderedList"),
+          icon: "format_list_numbered",
+          title: "Ordered List"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleTaskList().run(),
+          isActive: editor.isActive("taskList"),
+          icon: "checklist",
+          title: "Task List"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-toolbar-separator" }),
+    /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-toolbar-group", children: [
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleBlockquote().run(),
+          isActive: editor.isActive("blockquote"),
+          icon: "format_quote",
+          title: "Blockquote"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+          isActive: editor.isActive("codeBlock"),
+          icon: "terminal",
+          title: "Code Block"
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        MenuButton,
+        {
+          onClick: () => editor.chain().focus().setHorizontalRule().run(),
+          icon: "horizontal_rule",
+          title: "Horizontal Rule"
+        }
+      )
+    ] })
+  ] });
+}
+function RichTextEditor({ name, value = "", onChange }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        horizontalRule: false
+      }),
+      Link5.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          class: "adminforge-editor-link"
+        }
+      }),
+      Underline,
+      TextAlign.configure({
+        types: ["heading", "paragraph", "image"]
+      }),
+      Placeholder.configure({
+        placeholder: "Write something amazing..."
+      }),
+      Highlight,
+      Subscript,
+      Superscript,
+      TaskList,
+      TaskItem.configure({
+        nested: true
+      }),
+      HorizontalRule,
+      Typography,
+      BubbleMenuExtension,
+      Image.extend({
+        addAttributes() {
+          return {
+            ...this.parent?.(),
+            width: {
+              default: "100%",
+              renderHTML: (attributes) => {
+                return {
+                  style: `width: ${attributes.width}; height: auto;`
+                };
+              }
+            },
+            textAlign: {
+              default: "left",
+              parseHTML: (element) => element.style.textAlign || element.getAttribute("data-text-align"),
+              renderHTML: (attributes) => {
+                return {
+                  "data-align": attributes.textAlign
+                };
+              }
+            }
+          };
+        }
+      }).configure({
+        allowBase64: true,
+        HTMLAttributes: {
+          class: "adminforge-editor-image"
+        }
+      })
+    ],
+    content: value,
+    immediatelyRender: false,
+    editorProps: {
+      handleDrop: (view, event, slice, moved) => {
+        if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
+          const file = event.dataTransfer.files[0];
+          if (file.type.startsWith("image/")) {
+            const formData = new FormData();
+            formData.append("file", file);
+            fetch("/api/upload", { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
+              if (data.url) {
+                const { schema } = view.state;
+                const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
+                const node = schema.nodes.image.create({ src: data.url });
+                const transaction = view.state.tr.insert(coordinates?.pos ?? 0, node);
+                view.dispatch(transaction);
+              }
+            }).catch(() => alert("Upload failed"));
+            return true;
+          }
+        }
+        return false;
+      },
+      handlePaste: (view, event) => {
+        if (event.clipboardData && event.clipboardData.files && event.clipboardData.files[0]) {
+          const file = event.clipboardData.files[0];
+          if (file.type.startsWith("image/")) {
+            const formData = new FormData();
+            formData.append("file", file);
+            fetch("/api/upload", { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
+              if (data.url) {
+                const { schema } = view.state;
+                const node = schema.nodes.image.create({ src: data.url });
+                const transaction = view.state.tr.replaceSelectionWith(node);
+                view.dispatch(transaction);
+              }
+            }).catch(() => alert("Upload failed"));
+            return true;
+          }
+        }
+        return false;
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      onChange(editor2.getHTML());
+    }
+  });
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value);
+    }
+  }, [value, editor]);
+  if (!editor) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "adminforge-editor-container", children: [
+    /* @__PURE__ */ jsx6(Toolbar, { editor }),
+    editor && /* @__PURE__ */ jsx6(Fragment, { children: editor && /* @__PURE__ */ jsx6(
+      BubbleMenu,
+      {
+        editor,
+        shouldShow: ({ editor: editor2, state }) => {
+          const isImage = editor2.isActive("image") || state.selection.content().content.firstChild?.type.name === "image";
+          return isImage || !state.selection.empty;
+        },
+        options: { duration: 100, zIndex: 9999 },
+        children: /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-bubble-menu", style: { zIndex: 1e4 }, children: editor.isActive("image") ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().setTextAlign("left").run(),
+              className: editor.isActive({ textAlign: "left" }) ? "active" : "",
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "format_align_left" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().setTextAlign("center").run(),
+              className: editor.isActive({ textAlign: "center" }) ? "active" : "",
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "format_align_center" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().setTextAlign("right").run(),
+              className: editor.isActive({ textAlign: "right" }) ? "active" : "",
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "format_align_right" })
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { style: { width: "1px", background: "rgba(255,255,255,0.2)", margin: "4px 2px" } }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().updateAttributes("image", { width: "calc(25% - 1rem)" }).run(),
+              style: { fontSize: "11px", fontWeight: "bold" },
+              children: "25%"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().updateAttributes("image", { width: "calc(50% - 1rem)" }).run(),
+              style: { fontSize: "11px", fontWeight: "bold" },
+              children: "50%"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().updateAttributes("image", { width: "100%" }).run(),
+              style: { fontSize: "11px", fontWeight: "bold" },
+              children: "100%"
+            }
+          ),
+          /* @__PURE__ */ jsx6("div", { style: { width: "1px", background: "rgba(255,255,255,0.2)", margin: "4px 2px" } }),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().deleteSelection().run(),
+              style: { color: "#f87171" },
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "delete" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().toggleBold().run(),
+              className: editor.isActive("bold") ? "active" : "",
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "format_bold" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().toggleItalic().run(),
+              className: editor.isActive("italic") ? "active" : "",
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "format_italic" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().toggleStrike().run(),
+              className: editor.isActive("strike") ? "active" : "",
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "format_strikethrough" })
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().toggleHighlight().run(),
+              className: editor.isActive("highlight") ? "active" : "",
+              children: /* @__PURE__ */ jsx6("span", { className: "material-symbols-outlined", children: "format_ink_highlighter" })
+            }
+          )
+        ] }) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx6("div", { className: "adminforge-editor-content", children: /* @__PURE__ */ jsx6(EditorContent, { editor }) }),
+    /* @__PURE__ */ jsx6("style", { dangerouslySetInnerHTML: { __html: `
+        .adminforge-editor-container {
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+          overflow: hidden;
+          background: white;
+          display: flex;
+          flex-direction: column;
+          min-height: 400px;
+        }
+        
+        .adminforge-editor-toolbar {
+          display: flex;
+          flex-wrap: wrap;
+          padding: 8px;
+          background: #f9fafb;
+          border-bottom: 1px solid #e5e7eb;
+          gap: 4px;
+        }
+        
+        .adminforge-editor-toolbar-group {
+          display: flex;
+          gap: 2px;
+        }
+        
+        .adminforge-editor-toolbar-separator {
+          width: 1px;
+          background: #e5e7eb;
+          margin: 4px 2px;
+        }
+        
+        .adminforge-editor-btn {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          border: none;
+          background: transparent;
+          color: #4b5563;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        
+        .adminforge-editor-btn:hover {
+          background: #f3f4f6;
+          color: #111827;
+        }
+        
+        .adminforge-editor-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+        
+        .adminforge-editor-btn.active {
+          background: #e5e7eb;
+          color: #2563eb;
+        }
+        
+        .adminforge-editor-content {
+          padding: 16px;
+          flex: 1;
+          overflow-y: auto;
+        }
+        
+        .ProseMirror {
+          min-height: 300px;
+          outline: none;
+        }
+        
+        .ProseMirror p.is-editor-empty:first-child::before {
+          content: attr(data-placeholder);
+          float: left;
+          color: #9ca3af;
+          pointer-events: none;
+          height: 0;
+        }
+        
+        .adminforge-editor-link {
+          color: #2563eb;
+          text-decoration: underline;
+          cursor: pointer;
+        }
+        
+        .adminforge-editor-bubble-menu {
+          display: flex;
+          background: #1f2937;
+          padding: 4px;
+          border-radius: 6px;
+          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+          gap: 2px;
+        }
+        
+        .adminforge-editor-bubble-menu button {
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: none;
+          background: transparent;
+          color: white;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        
+        .adminforge-editor-bubble-menu button:hover {
+          background: #374151;
+        }
+        
+        .adminforge-editor-bubble-menu button.active {
+          color: #60a5fa;
+          background: #374151;
+        }
+        
+        .adminforge-editor-bubble-menu .material-symbols-outlined {
+          font-size: 16px;
+        }
+
+        /* Task list styles */
+        ul[data-type="taskList"] {
+          list-style: none;
+          padding: 0;
+        }
+
+        ul[data-type="taskList"] li {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 0.5rem;
+        }
+
+        ul[data-type="taskList"] li > label {
+          margin-right: 0.5rem;
+          user-select: none;
+        }
+
+        ul[data-type="taskList"] li > div {
+          flex: 1;
+        }
+
+        .adminforge-editor-image {
+          max-width: 100% !important;
+          height: auto !important;
+          border-radius: 8px;
+          margin: 0.5rem;
+          display: inline-block;
+          vertical-align: middle;
+          transition: all 0.2s;
+        }
+
+        /* Float logic for text wrapping and alignment */
+        .adminforge-editor-image[data-align="left"] {
+          float: left;
+          margin-left: 0;
+          margin-right: 1.5rem;
+          display: block; /* block + float is standard */
+        }
+        
+        .adminforge-editor-image[data-align="right"] {
+          float: right;
+          margin-right: 0;
+          margin-left: 1.5rem;
+          display: block;
+        }
+        
+        .adminforge-editor-image[data-align="center"] {
+          display: block;
+          margin-left: auto;
+          margin-right: auto;
+          float: none;
+        }
+
+        /* Clearfix for the parent paragraph to contain floats */
+        .ProseMirror p::after {
+          content: "";
+          display: table;
+          clear: both;
+        }
+
+        .adminforge-editor-image.ProseMirror-selectednode {
+          outline: 3px solid #2563eb;
+        }
+      ` } })
+  ] });
+}
+
+// src/ui/form-engine/ImageUpload.tsx
+import { useState as useState3, useRef } from "react";
+
+// src/ui/AdminForgeContext.tsx
+import React, { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var AdminForgeContext = createContext2({
+  config: void 0,
+  apiBase: "/api/adminforge",
+  unauthorized: false
+});
+function AdminForgeProvider({
+  children,
+  config: initialConfig,
+  apiBase = "/api"
+}) {
+  const [config, setConfig] = React.useState(initialConfig);
+  const [unauthorized, setUnauthorized] = React.useState(false);
+  React.useEffect(() => {
+    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);
+    }
+    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 /* @__PURE__ */ jsx7(AdminForgeContext.Provider, { value: { config, apiBase, unauthorized }, children });
+}
+function useAdminForge() {
+  return useContext2(AdminForgeContext);
+}
+
+// src/ui/form-engine/ImageUpload.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ImageUpload({ name, value, onChange }) {
+  const { apiBase } = useAdminForge();
+  const [uploading, setUploading] = useState3(false);
+  const [preview, setPreview] = useState3(value ?? "");
+  const inputRef = useRef(null);
+  async function handleFile(e) {
+    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 /* @__PURE__ */ jsxs6("div", { className: "adminforge-field", children: [
+    /* @__PURE__ */ jsxs6("label", { children: [
+      name.charAt(0).toUpperCase() + name.slice(1),
+      " Image"
+    ] }),
+    /* @__PURE__ */ jsx8(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/*",
+        onChange: handleFile,
+        style: { display: "none" }
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "adminforge-image-upload", children: [
+      preview && /* @__PURE__ */ jsx8("img", { src: preview, alt: "Preview", className: "adminforge-image-preview" }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          className: "adminforge-btn adminforge-btn-secondary",
+          onClick: () => inputRef.current?.click(),
+          disabled: uploading,
+          children: uploading ? "Uploading..." : preview ? "Replace Image" : "Choose Image"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8("input", { type: "hidden", name, value: preview })
+  ] });
+}
+
+// src/ui/form-engine/RelationInput.tsx
+import { useEffect as useEffect2, useState as useState4, useRef as useRef2 } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function RelationInput({ name, to, relationType, value, onChange, error, disabled }) {
+  const [options, setOptions] = useState4([]);
+  const [loading, setLoading] = useState4(true);
+  const [search, setSearch] = useState4("");
+  const [open, setOpen] = useState4(false);
+  const containerRef = useRef2(null);
+  useEffect2(() => {
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const isMulti = relationType === "many-to-many" || relationType === "one-to-many";
+  const rawValueArray = Array.isArray(value) ? value : value ? [value] : [];
+  const selectedIds = rawValueArray.map((v) => typeof v === "object" && v !== null ? v.id : v).filter(Boolean);
+  useEffect2(() => {
+    let mounted = true;
+    async function fetchOptions() {
+      try {
+        setLoading(true);
+        const res = await fetch(`/api/${to}?pageSize=100`);
+        const json = await res.json();
+        if (mounted && json.data) {
+          const uniqueOptions = [];
+          const seen = /* @__PURE__ */ new Set();
+          const getLbl = (opt) => opt.name || opt.title || opt.label || opt.id;
+          for (const opt of json.data) {
+            const lbl = getLbl(opt);
+            if (!seen.has(lbl)) {
+              seen.add(lbl);
+              uniqueOptions.push(opt);
+            }
+          }
+          setOptions(uniqueOptions);
+        }
+      } catch (err) {
+        console.error("Failed to fetch relations", err);
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    }
+    fetchOptions();
+    return () => {
+      mounted = false;
+    };
+  }, [to]);
+  const getLabel = (opt) => opt.name || opt.title || opt.label || opt.id;
+  const filteredOptions = options.filter(
+    (o) => getLabel(o).toLowerCase().includes(search.toLowerCase())
+  );
+  const toggleOption = (id) => {
+    if (isMulti) {
+      const newIds = selectedIds.includes(id) ? selectedIds.filter((v) => v !== id) : [...selectedIds, id];
+      onChange?.(newIds);
+    } else {
+      onChange?.(id);
+      setOpen(false);
+      setSearch("");
+    }
+  };
+  const removeOption = (e, id) => {
+    e.stopPropagation();
+    if (disabled) return;
+    onChange?.(selectedIds.filter((v) => v !== id));
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: "adminforge-relation", ref: containerRef, style: { position: "relative" }, children: [
+    selectedIds.length === 0 && /* @__PURE__ */ jsx9("input", { type: "hidden", name, value: "" }),
+    selectedIds.map((id) => /* @__PURE__ */ jsx9("input", { type: "hidden", name, value: id }, id)),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: `adminforge-input ${error ? "adminforge-input-error" : ""}`,
+        style: {
+          position: "relative",
+          cursor: disabled ? "not-allowed" : "pointer",
+          minHeight: "38px",
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: "4px",
+          padding: "4px 8px",
+          opacity: disabled ? 0.6 : 1
+        },
+        onClick: () => !disabled && setOpen(!open),
+        children: selectedIds.length > 0 ? selectedIds.map((id) => {
+          const opt = options.find((o) => o.id === id);
+          const label = opt ? getLabel(opt) : id;
+          if (isMulti) {
+            return /* @__PURE__ */ jsxs7("span", { style: {
+              background: "#e0e0e0",
+              padding: "2px 6px",
+              borderRadius: "4px",
+              fontSize: "14px",
+              display: "flex",
+              alignItems: "center",
+              gap: "4px"
+            }, children: [
+              label,
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => removeOption(e, id),
+                  style: { background: "none", border: "none", cursor: "pointer", padding: "0 2px", fontWeight: "bold" },
+                  children: "\xD7"
+                }
+              )
+            ] }, id);
+          }
+          return /* @__PURE__ */ jsx9("span", { children: label }, id);
+        }) : /* @__PURE__ */ jsx9("span", { style: { color: "#888" }, children: "Select..." })
+      }
+    ),
+    open && /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          zIndex: 10,
+          background: "white",
+          border: "1px solid #ccc",
+          borderRadius: "4px",
+          marginTop: "4px",
+          width: "100%",
+          maxHeight: "250px",
+          overflowY: "auto",
+          boxShadow: "0 4px 6px rgba(0,0,0,0.1)"
+        },
+        children: [
+          /* @__PURE__ */ jsx9("div", { style: { padding: "8px", borderBottom: "1px solid #eee" }, children: /* @__PURE__ */ jsx9(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              onClick: (e) => e.stopPropagation(),
+              style: {
+                width: "100%",
+                padding: "4px 8px",
+                border: "1px solid #ccc",
+                borderRadius: "4px"
+              }
+            }
+          ) }),
+          loading ? /* @__PURE__ */ jsx9("div", { style: { padding: "8px", color: "#888" }, children: "Loading..." }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx9("div", { style: { padding: "8px", color: "#888" }, children: "No options found" }) : /* @__PURE__ */ jsx9("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: filteredOptions.map((opt) => {
+            const isSelected = selectedIds.includes(opt.id);
+            return /* @__PURE__ */ jsxs7(
+              "li",
+              {
+                style: {
+                  padding: "8px 12px",
+                  cursor: "pointer",
+                  background: isSelected ? "#f0f0f0" : "transparent",
+                  display: "flex",
+                  justifyContent: "space-between"
+                },
+                onMouseEnter: (e) => e.currentTarget.style.background = "#f9f9f9",
+                onMouseLeave: (e) => e.currentTarget.style.background = isSelected ? "#f0f0f0" : "transparent",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  toggleOption(opt.id);
+                },
+                children: [
+                  getLabel(opt),
+                  isSelected && isMulti && /* @__PURE__ */ jsx9("span", { style: { color: "#417690" }, children: "\u2713" })
+                ]
+              },
+              opt.id
+            );
+          }) })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui/form-engine/FormEngine.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function hasAccess3(access, operation, role) {
+  if (!access) return true;
+  const allowed = access[operation];
+  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
+}) {
+  const { component, props } = field.ui;
+  if (props?.hidden) return null;
+  if (!hasAccess3(field.access, "read", role)) return null;
+  const errorClass = error ? "adminforge-input-error" : "";
+  const resolvedValue = value !== void 0 ? value : field.db?.default;
+  const isReadOnly = Boolean(props?.readOnly) || !hasAccess3(field.access, "update", role);
+  switch (component) {
+    case "text":
+    case "slug":
+    case "date":
+      return /* @__PURE__ */ jsxs8("div", { className: "adminforge-field", children: [
+        /* @__PURE__ */ jsx10("label", { htmlFor: name, children: props?.label ?? name }),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            id: name,
+            name,
+            type: component === "date" ? "datetime-local" : "text",
+            className: `adminforge-input ${errorClass}`,
+            required: !field.db?.nullable,
+            defaultValue: typeof resolvedValue === "string" ? resolvedValue : "",
+            readOnly: isReadOnly
+          }
+        ),
+        error && /* @__PURE__ */ jsx10("span", { className: "adminforge-field-err", children: error })
+      ] });
+    case "boolean":
+      return /* @__PURE__ */ jsxs8("div", { className: "adminforge-field adminforge-field-checkbox", children: [
+        /* @__PURE__ */ jsxs8("label", { htmlFor: name, children: [
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              id: name,
+              name,
+              type: "checkbox",
+              checked: !!checked,
+              onChange: (e) => onCheckedChange?.(e.target.checked),
+              disabled: isReadOnly
+            }
+          ),
+          props?.label ?? name
+        ] }),
+        error && /* @__PURE__ */ jsx10("span", { className: "adminforge-field-err", children: error })
+      ] });
+    case "relation":
+      return /* @__PURE__ */ jsxs8("div", { className: "adminforge-field", children: [
+        /* @__PURE__ */ jsx10("label", { children: props?.label ?? name }),
+        /* @__PURE__ */ jsx10(
+          RelationInput,
+          {
+            name,
+            to: props?.to,
+            relationType: props?.relationType,
+            value: resolvedValue,
+            onChange: onRelationChange,
+            error,
+            disabled: isReadOnly
+          }
+        ),
+        error && /* @__PURE__ */ jsx10("span", { className: "adminforge-field-err", children: error })
+      ] });
+    case "richText":
+      return /* @__PURE__ */ jsxs8("div", { className: "adminforge-field", children: [
+        /* @__PURE__ */ jsx10("label", { children: props?.label ?? name }),
+        /* @__PURE__ */ jsx10(
+          RichTextEditor,
+          {
+            name,
+            value: typeof resolvedValue === "string" ? resolvedValue : "",
+            onChange: (val) => !isReadOnly && onChange?.(val)
+          }
+        ),
+        /* @__PURE__ */ jsx10("input", { type: "hidden", name, id: `${name}-hidden`, defaultValue: typeof resolvedValue === "string" ? resolvedValue : "" }),
+        error && /* @__PURE__ */ jsx10("span", { className: "adminforge-field-err", children: error })
+      ] });
+    case "image":
+      return /* @__PURE__ */ jsx10(
+        ImageUpload,
+        {
+          name,
+          value: typeof resolvedValue === "string" ? resolvedValue : "",
+          onChange: (val) => !isReadOnly && onChange?.(val)
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsxs8("div", { className: "adminforge-field", children: [
+        /* @__PURE__ */ jsx10("label", { htmlFor: name, children: props?.label ?? name }),
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            id: name,
+            name,
+            type: "text",
+            className: `adminforge-input ${errorClass}`,
+            defaultValue: typeof resolvedValue === "string" ? resolvedValue : "",
+            readOnly: isReadOnly
+          }
+        ),
+        error && /* @__PURE__ */ jsx10("span", { className: "adminforge-field-err", children: error })
+      ] });
+  }
+}
+function FormEngine({ collection, record, isNew, role }) {
+  const formRef = useRef3(null);
+  const [richTextValues, setRichTextValues] = useState5({});
+  const [relationValues, setRelationValues] = useState5({});
+  const [booleanValues, setBooleanValues] = useState5({});
+  const [fieldErrors, setFieldErrors] = useState5({});
+  const [submitError, setSubmitError] = useState5(null);
+  const canSave = isNew ? hasAccess3(collection.access, "create", role) : hasAccess3(collection.access, "update", role);
+  useEffect3(() => {
+    if (record && !isNew) {
+      const rt = {};
+      const rv = {};
+      const bv = {};
+      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) => typeof v === "string" ? v : v.id);
+          else if (typeof value === "string") rv[key] = value;
+          else if (value && typeof value === "object" && value.id) rv[key] = value.id;
+        }
+        if (field?.type === "boolean") bv[key] = !!value;
+      }
+      setRichTextValues(rt);
+      setRelationValues(rv);
+      setBooleanValues(bv);
+    }
+  }, [record, isNew, collection.fields]);
+  useEffect3(() => {
+    if (!isNew) return;
+    const form = formRef.current;
+    if (!form) return;
+    const listeners = [];
+    Object.entries(collection.fields).forEach(([name, field]) => {
+      if (field.type === "slug" && field.ui.props?.from) {
+        const src = form.querySelector(`[name="${field.ui.props.from}"]`);
+        const dst = form.querySelector(`[name="${name}"]`);
+        if (src && dst) {
+          const fn = (e) => {
+            const val = e.target.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 = useCallback3(async (e) => {
+    e.preventDefault();
+    if (!canSave) return;
+    setFieldErrors({});
+    setSubmitError(null);
+    const form = e.currentTarget;
+    const formData = new FormData(form);
+    const data = {};
+    for (const [key, value] of formData.entries()) {
+      if (value instanceof File) continue;
+      const field = collection.fields[key];
+      if (!hasAccess3(field?.access, isNew ? "create" : "update", role)) continue;
+      if (richTextValues[key]) {
+        data[key] = richTextValues[key];
+      } else if (field?.type === "boolean") {
+        continue;
+      } else if (field?.type === "relation") {
+        continue;
+      } else {
+        data[key] = value.toString();
+      }
+    }
+    for (const [name, field] of Object.entries(collection.fields)) {
+      if (field.type === "boolean" && hasAccess3(field.access, isNew ? "create" : "update", role)) {
+        data[name] = booleanValues[name] ?? false;
+      }
+    }
+    for (const [key, val] of Object.entries(relationValues)) {
+      if (collection.fields[key] && hasAccess3(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 = {};
+        for (const f of err.fields) errors[f.path] = f.message;
+        setFieldErrors(errors);
+      }
+      setSubmitError(err.error ?? "An error occurred");
+    }
+  }, [collection, isNew, record?.id, richTextValues, relationValues, booleanValues, role, canSave]);
+  const handleRichTextChange = useCallback3((name, value) => {
+    setRichTextValues((prev) => {
+      const next = { ...prev, [name]: value };
+      const hidden = formRef.current?.querySelector(`#${name}-hidden`);
+      if (hidden) hidden.value = value;
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs8("form", { ref: formRef, onSubmit: handleSubmit, className: "adminforge-form", children: [
+    submitError && /* @__PURE__ */ jsx10("div", { className: "adminforge-form-error", children: submitError }),
+    !isNew && !!record?.id && /* @__PURE__ */ jsxs8("div", { className: "adminforge-field", children: [
+      /* @__PURE__ */ jsx10("label", { children: "Internal ID" }),
+      /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx10(
+          "input",
+          {
+            type: "text",
+            className: "adminforge-input",
+            value: String(record.id),
+            readOnly: true,
+            style: { background: "#f8fafc", color: "#64748b", fontFamily: "monospace" }
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            className: "adminforge-btn-icon",
+            title: "Copy ID",
+            onClick: () => navigator.clipboard.writeText(String(record.id)),
+            children: /* @__PURE__ */ jsx10("span", { className: "material-symbols-outlined", children: "content_copy" })
+          }
+        )
+      ] })
+    ] }),
+    Object.entries(collection.fields).map(([name, field]) => {
+      const fv = field.type === "relation" && relationValues[name] !== void 0 ? relationValues[name] : record?.[name];
+      return /* @__PURE__ */ jsx10(
+        FieldRenderer,
+        {
+          name,
+          field,
+          value: fv,
+          onChange: (val) => handleRichTextChange(name, val),
+          onRelationChange: (val) => setRelationValues((prev) => ({ ...prev, [name]: val })),
+          checked: field.type === "boolean" ? booleanValues[name] ?? false : void 0,
+          onCheckedChange: field.type === "boolean" ? (checked) => setBooleanValues((prev) => ({ ...prev, [name]: checked })) : void 0,
+          error: fieldErrors[name],
+          role
+        },
+        name
+      );
+    }),
+    canSave && /* @__PURE__ */ jsx10("div", { className: "adminforge-form-actions", children: /* @__PURE__ */ jsx10("button", { type: "submit", className: "adminforge-btn adminforge-btn-primary", children: isNew ? "Create" : "Save" }) })
+  ] });
+}
+
+// src/ui/screens/CollectionFormPage.tsx
+import Link6 from "next/link";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+function formatDate(date) {
+  if (isNaN(date.getTime())) return "Invalid date";
+  return date.toLocaleString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+function CollectionFormPage({ config, collection, record, isNew, role: propRole }) {
+  const session = useAdminSession();
+  const role = propRole || session?.role || session?.user?.role;
+  return /* @__PURE__ */ jsx11(AdminLayout, { config, currentPath: `/admin/${collection.name}`, role, children: /* @__PURE__ */ jsxs9("div", { className: "adminforge-collection-page", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "adminforge-page-header", children: [
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+        /* @__PURE__ */ jsx11("h2", { style: { fontSize: "24px", fontWeight: 700, margin: 0 }, children: isNew ? `Create ${collection.label}` : `Edit ${collection.label}` }),
+        !isNew && /* @__PURE__ */ jsxs9("span", { className: "adminforge-badge", style: { background: "#f8fafc", color: "#64748b", borderColor: "#e2e8f0", fontSize: "11px" }, children: [
+          "ID: ",
+          String(record?.id).substring(0, 8),
+          "..."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { style: { display: "flex", gap: "12px" }, children: [
+        !isNew && /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            className: "adminforge-btn adminforge-btn-danger",
+            onClick: async () => {
+              if (confirm("Are you sure you want to delete this item?")) {
+                const res = await fetch(`/api/${collection.name}/${record?.id}`, { method: "DELETE" });
+                if (res.ok) {
+                  window.location.href = `/admin/${collection.name}`;
+                } else {
+                  const err = await res.json();
+                  alert(err.error || "Failed to delete item");
+                }
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined", style: { fontSize: "20px", marginRight: "8px" }, children: "delete" }),
+              "Delete"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs9(Link6, { href: `/admin/${collection.name}`, className: "adminforge-btn adminforge-btn-secondary", children: [
+          /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined", style: { fontSize: "20px", marginRight: "8px" }, children: "arrow_back" }),
+          "Back"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
+      /* @__PURE__ */ jsx11(FormEngine, { collection, record, isNew, role }),
+      !isNew && record && /* @__PURE__ */ jsxs9("div", { style: {
+        padding: "24px",
+        background: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        borderRadius: "var(--radius-lg)",
+        boxShadow: "var(--shadow-sm)"
+      }, children: [
+        /* @__PURE__ */ jsxs9("h3", { style: {
+          fontSize: "14px",
+          fontWeight: 600,
+          color: "#64748b",
+          marginBottom: "20px",
+          display: "flex",
+          alignItems: "center",
+          gap: "10px",
+          textTransform: "uppercase",
+          letterSpacing: "0.025em"
+        }, children: [
+          /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined", style: { fontSize: "20px", color: "var(--color-primary)" }, children: "info" }),
+          "System Information"
+        ] }),
+        /* @__PURE__ */ jsxs9("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "32px" }, children: [
+          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx11("div", { style: { fontSize: "11px", fontWeight: 700, color: "#94a3b8", textTransform: "uppercase" }, children: "Created" }),
+            /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+              /* @__PURE__ */ jsx11("div", { style: { width: "32px", height: "32px", borderRadius: "50%", background: "#f1f5f9", display: "flex", alignItems: "center", justifyContent: "center", color: "#64748b" }, children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined", style: { fontSize: "18px" }, children: "person" }) }),
+              /* @__PURE__ */ jsxs9("div", { children: [
+                /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px", color: "var(--color-text)", fontWeight: 500 }, children: "Admin" }),
+                /* @__PURE__ */ jsx11("div", { style: { fontSize: "12px", color: "#64748b" }, children: record.createdAt ? formatDate(new Date(record.createdAt)) : "Unknown date" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs9("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            /* @__PURE__ */ jsx11("div", { style: { fontSize: "11px", fontWeight: 700, color: "#94a3b8", textTransform: "uppercase" }, children: "Last Updated" }),
+            /* @__PURE__ */ jsxs9("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+              /* @__PURE__ */ jsx11("div", { style: { width: "32px", height: "32px", borderRadius: "50%", background: "#f0f9ff", display: "flex", alignItems: "center", justifyContent: "center", color: "#0284c7" }, children: /* @__PURE__ */ jsx11("span", { className: "material-symbols-outlined", style: { fontSize: "18px" }, children: "edit_note" }) }),
+              /* @__PURE__ */ jsxs9("div", { children: [
+                /* @__PURE__ */ jsx11("div", { style: { fontSize: "14px", color: "var(--color-text)", fontWeight: 500 }, children: "Admin" }),
+                /* @__PURE__ */ jsx11("div", { style: { fontSize: "12px", color: "#64748b" }, children: record.updatedAt || record.createdAt ? formatDate(new Date(record.updatedAt || record.createdAt)) : "Unknown date" })
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/ui/screens/CollectionSchemaPage.tsx
+import Link7 from "next/link";
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function formatFullTimestamp(date) {
+  if (isNaN(date.getTime())) return "Unknown";
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  }).format(date);
+}
+function CollectionSchemaPage({ config, collection, role }) {
+  const [lastActivity, setLastActivity] = useState6("Loading...");
+  useEffect4(() => {
+    fetch(`/api/${collection.name}?pageSize=1`).then((res) => res.json()).then((result) => {
+      const item = result.data?.[0];
+      if (item) {
+        const dateStr = item.updatedAt || item.updated_at || item.createdAt || item.created_at;
+        if (dateStr) {
+          setLastActivity(formatFullTimestamp(new Date(dateStr)));
+        } else {
+          setLastActivity("No date info");
+        }
+      } else {
+        setLastActivity("No activity");
+      }
+    }).catch(() => setLastActivity("Unknown"));
+  }, [collection.name]);
+  const getFieldIcon = (type) => {
+    switch (type) {
+      case "text":
+        return "text_fields";
+      case "slug":
+        return "link";
+      case "richText":
+        return "description";
+      case "boolean":
+        return "toggle_on";
+      case "image":
+        return "image";
+      case "relation":
+        return "account_tree";
+      case "date":
+        return "calendar_today";
+      default:
+        return "label";
+    }
+  };
+  return /* @__PURE__ */ jsx12(AdminLayout, { config, currentPath: `/admin/${collection.name}`, role, children: /* @__PURE__ */ jsxs10("div", { className: "adminforge-schema-page", children: [
+    /* @__PURE__ */ jsx12("div", { style: { marginBottom: "32px", display: "flex", justifyContent: "space-between", alignItems: "flex-end" }, children: /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsxs10(Link7, { href: "/admin", style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "14px", color: "var(--color-text-secondary)", marginBottom: "16px", textDecoration: "none" }, children: [
+        /* @__PURE__ */ jsx12("span", { className: "material-symbols-outlined", style: { fontSize: "18px" }, children: "arrow_back" }),
+        "Back to Collection Registry"
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+        /* @__PURE__ */ jsxs10("h1", { style: { fontSize: "32px", fontWeight: 700 }, children: [
+          collection.label,
+          " Schema"
+        ] }),
+        /* @__PURE__ */ jsx12("span", { className: "adminforge-badge", style: { background: "#f8fafc", color: "#64748b", borderColor: "#e2e8f0", fontSize: "11px", fontWeight: 600 }, children: "defined in adminforge.ts" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs10("div", { style: { display: "grid", gridTemplateColumns: "1fr 340px", gap: "24px", alignItems: "start" }, children: [
+      /* @__PURE__ */ jsxs10("div", { className: "adminforge-card", style: { border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsx12("div", { style: { padding: "24px", borderBottom: "1px solid var(--color-border)" }, children: /* @__PURE__ */ jsx12("h3", { style: { fontSize: "18px", fontWeight: 600 }, children: "Field Definitions" }) }),
+        /* @__PURE__ */ jsxs10("table", { className: "adminforge-table", children: [
+          /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+            /* @__PURE__ */ jsx12("th", { style: { fontSize: "12px", color: "var(--color-text-secondary)" }, children: "FIELD NAME" }),
+            /* @__PURE__ */ jsx12("th", { style: { fontSize: "12px", color: "var(--color-text-secondary)" }, children: "TYPE" }),
+            /* @__PURE__ */ jsx12("th", { style: { fontSize: "12px", color: "var(--color-text-secondary)" }, children: "PROPERTIES" })
+          ] }) }),
+          /* @__PURE__ */ jsx12("tbody", { children: Object.entries(collection.fields).map(([name, field]) => /* @__PURE__ */ jsxs10("tr", { children: [
+            /* @__PURE__ */ jsx12("td", { style: { fontWeight: 600 }, children: name }),
+            /* @__PURE__ */ jsx12("td", { children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ jsx12("span", { className: "material-symbols-outlined", style: { fontSize: "20px", color: "var(--color-text-secondary)" }, children: getFieldIcon(field.type) }),
+              /* @__PURE__ */ jsx12("span", { children: field.type })
+            ] }) }),
+            /* @__PURE__ */ jsx12("td", { children: /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: [
+              field.meta?.required && /* @__PURE__ */ jsx12("span", { className: "adminforge-badge adminforge-badge-danger", style: { fontSize: "11px" }, children: "required" }),
+              field.meta?.unique && /* @__PURE__ */ jsx12("span", { className: "adminforge-badge adminforge-badge-primary", style: { fontSize: "11px" }, children: "unique" }),
+              !!field.ui.props?.from && /* @__PURE__ */ jsxs10("span", { className: "adminforge-badge adminforge-badge-secondary", style: { fontSize: "11px" }, children: [
+                "from: ",
+                String(field.ui.props.from)
+              ] }),
+              !!field.ui.props?.to && /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
+                /* @__PURE__ */ jsxs10("span", { style: { fontSize: "12px" }, children: [
+                  "to: ",
+                  /* @__PURE__ */ jsx12("strong", { children: String(field.ui.props.to) })
+                ] }),
+                /* @__PURE__ */ jsx12("span", { className: "adminforge-badge adminforge-badge-secondary", style: { fontSize: "10px", alignSelf: "flex-start" }, children: String(field.ui.props.relationType) })
+              ] }),
+              field.meta?.default !== void 0 && /* @__PURE__ */ jsxs10("span", { style: { fontSize: "12px", color: "var(--color-text-secondary)" }, children: [
+                "default: ",
+                /* @__PURE__ */ jsx12("code", { children: JSON.stringify(field.meta.default) })
+              ] }),
+              !field.meta?.required && !field.meta?.unique && !field.ui.props?.from && !field.ui.props?.to && /* @__PURE__ */ jsx12("span", { style: { color: "var(--color-text-secondary)" }, children: "-" })
+            ] }) })
+          ] }, name)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs10("div", { className: "adminforge-card", style: { padding: "24px", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)" }, children: [
+        /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "24px" }, children: [
+          /* @__PURE__ */ jsx12("span", { className: "material-symbols-outlined", style: { color: "var(--color-text-secondary)" }, children: "info" }),
+          /* @__PURE__ */ jsx12("h3", { style: { fontSize: "18px", fontWeight: 600 }, children: "Collection Meta" })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx12("label", { style: { fontSize: "12px", fontWeight: 700, color: "var(--color-text-secondary)", textTransform: "uppercase", marginBottom: "8px", display: "block" }, children: "Collection Name" }),
+          /* @__PURE__ */ jsx12("code", { style: { background: "#f1f5f9", padding: "4px 8px", borderRadius: "4px", fontSize: "14px" }, children: collection.name })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { style: { marginBottom: "20px" }, children: [
+          /* @__PURE__ */ jsx12("label", { style: { fontSize: "12px", fontWeight: 700, color: "var(--color-text-secondary)", textTransform: "uppercase", marginBottom: "8px", display: "block" }, children: "UI Label" }),
+          /* @__PURE__ */ jsx12("span", { style: { fontSize: "16px", fontWeight: 500 }, children: collection.label })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { style: { marginBottom: "24px", paddingBottom: "24px", borderBottom: "1px solid var(--color-border)" }, children: [
+          /* @__PURE__ */ jsx12("label", { style: { fontSize: "12px", fontWeight: 700, color: "var(--color-text-secondary)", textTransform: "uppercase", marginBottom: "8px", display: "block" }, children: "Last Activity" }),
+          /* @__PURE__ */ jsx12("span", { style: { fontSize: "14px", color: "var(--color-text-secondary)" }, children: lastActivity })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx12("label", { style: { fontSize: "12px", fontWeight: 700, color: "var(--color-text-secondary)", textTransform: "uppercase", marginBottom: "16px", display: "block" }, children: "Access Rules" }),
+          /* @__PURE__ */ jsxs10("div", { style: { display: "flex", flexDirection: "column", gap: "12px" }, children: [
+            /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx12("span", { style: { fontSize: "14px" }, children: "Create" }),
+              /* @__PURE__ */ jsx12("div", { style: { display: "flex", gap: "4px" }, children: (collection.access?.create || ["admin"]).map((role2) => /* @__PURE__ */ jsx12("span", { className: "adminforge-badge adminforge-badge-secondary", style: { fontSize: "11px" }, children: role2 }, role2)) })
+            ] }),
+            /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx12("span", { style: { fontSize: "14px" }, children: "Update" }),
+              /* @__PURE__ */ jsx12("div", { style: { display: "flex", gap: "4px" }, children: (collection.access?.update || ["admin"]).map((role2) => /* @__PURE__ */ jsx12("span", { className: "adminforge-badge adminforge-badge-secondary", style: { fontSize: "11px" }, children: role2 }, role2)) })
+            ] }),
+            /* @__PURE__ */ jsxs10("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx12("span", { style: { fontSize: "14px" }, children: "Delete" }),
+              /* @__PURE__ */ jsx12("div", { style: { display: "flex", gap: "4px" }, children: (collection.access?.delete || ["admin"]).map((role2) => /* @__PURE__ */ jsx12("span", { className: "adminforge-badge adminforge-badge-danger", style: { fontSize: "11px", background: "#fee2e2", color: "#b91c1c" }, children: role2 }, role2)) })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/ui/screens/RolesListPage.tsx
+import Link8 from "next/link";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function RolesListPage({ config, role }) {
+  const roles = Object.entries(config.auth?.roles || {});
+  return /* @__PURE__ */ jsx13(AdminLayout, { config, currentPath: "/admin/roles", role, children: /* @__PURE__ */ jsxs11("div", { className: "adminforge-collection-page", children: [
+    /* @__PURE__ */ jsx13("div", { className: "adminforge-page-header", children: /* @__PURE__ */ jsx13("h2", { style: { fontSize: "24px", fontWeight: 700, margin: 0 }, children: "Roles" }) }),
+    /* @__PURE__ */ jsx13("div", { style: { background: "var(--color-surface)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }, children: /* @__PURE__ */ jsxs11("table", { className: "adminforge-table", style: { width: "100%", borderCollapse: "collapse" }, children: [
+      /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs11("tr", { style: { background: "#fcfcfd", borderBottom: "1px solid var(--color-border)" }, children: [
+        /* @__PURE__ */ jsx13("th", { style: { textAlign: "left", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Role Name" }),
+        /* @__PURE__ */ jsx13("th", { style: { textAlign: "left", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Label" }),
+        /* @__PURE__ */ jsx13("th", { style: { textAlign: "right", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Actions" })
+      ] }) }),
+      /* @__PURE__ */ jsx13("tbody", { children: roles.map(([key, roleDef]) => /* @__PURE__ */ jsxs11("tr", { style: { borderBottom: "1px solid var(--color-border)" }, children: [
+        /* @__PURE__ */ jsx13("td", { style: { padding: "16px 24px", fontSize: "14px", color: "var(--color-text)", fontWeight: 500 }, children: /* @__PURE__ */ jsx13("code", { children: key }) }),
+        /* @__PURE__ */ jsx13("td", { style: { padding: "16px 24px", fontSize: "14px", color: "var(--color-text-secondary)" }, children: roleDef.label }),
+        /* @__PURE__ */ jsx13("td", { style: { padding: "16px 24px", textAlign: "right" }, children: /* @__PURE__ */ jsx13(
+          Link8,
+          {
+            href: `/admin/roles/${key}`,
+            className: "adminforge-btn adminforge-btn-secondary",
+            style: { padding: "6px 12px", fontSize: "13px" },
+            children: "View Permissions"
+          }
+        ) })
+      ] }, key)) })
+    ] }) })
+  ] }) });
+}
+
+// src/ui/screens/RoleDetailPage.tsx
+import Link9 from "next/link";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function hasAccess4(access, operation, roleName) {
+  if (!access) return true;
+  const allowed = access[operation];
+  if (!allowed || !Array.isArray(allowed)) return true;
+  return allowed.includes(roleName);
+}
+function RoleDetailPage({ config, roleId, role }) {
+  const roleDef = config.auth?.roles?.[roleId];
+  if (!roleDef) {
+    return /* @__PURE__ */ jsx14(AdminLayout, { config, currentPath: "/admin/roles", role, children: /* @__PURE__ */ jsxs12("div", { className: "adminforge-collection-page", children: [
+      /* @__PURE__ */ jsx14("div", { className: "adminforge-page-header", children: /* @__PURE__ */ jsx14("h2", { style: { fontSize: "24px", fontWeight: 700, margin: 0 }, children: "Role not found" }) }),
+      /* @__PURE__ */ jsx14(Link9, { href: "/admin/roles", className: "adminforge-btn adminforge-btn-secondary", children: "Back to Roles" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx14(AdminLayout, { config, currentPath: "/admin/roles", role, children: /* @__PURE__ */ jsxs12("div", { className: "adminforge-collection-page", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "adminforge-page-header", children: [
+      /* @__PURE__ */ jsxs12("div", { style: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+        /* @__PURE__ */ jsx14(Link9, { href: "/admin/roles", className: "adminforge-btn-icon", style: { border: "1px solid var(--color-border)", background: "white" }, children: /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined", children: "arrow_back" }) }),
+        /* @__PURE__ */ jsxs12("h2", { style: { fontSize: "24px", fontWeight: 700, margin: 0 }, children: [
+          "Role: ",
+          roleDef.label || roleId
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx14("div", { className: "adminforge-badge", style: { background: "#f8fafc", color: "#64748b", borderColor: "#e2e8f0", fontSize: "11px", fontWeight: 600 }, children: "Read-only Config" })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { style: { marginBottom: "32px" }, children: [
+      /* @__PURE__ */ jsx14("h3", { style: { fontSize: "16px", fontWeight: 600, marginBottom: "16px", color: "var(--color-text)" }, children: "Permissions Matrix" }),
+      /* @__PURE__ */ jsx14("div", { style: { background: "var(--color-surface)", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)" }, children: /* @__PURE__ */ jsxs12("table", { className: "adminforge-table", style: { width: "100%", borderCollapse: "collapse" }, children: [
+        /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs12("tr", { style: { background: "#fcfcfd", borderBottom: "1px solid var(--color-border)" }, children: [
+          /* @__PURE__ */ jsx14("th", { style: { textAlign: "left", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Collection" }),
+          /* @__PURE__ */ jsx14("th", { style: { textAlign: "center", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Read" }),
+          /* @__PURE__ */ jsx14("th", { style: { textAlign: "center", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Create" }),
+          /* @__PURE__ */ jsx14("th", { style: { textAlign: "center", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Update" }),
+          /* @__PURE__ */ jsx14("th", { style: { textAlign: "center", padding: "16px 24px", fontSize: "13px", fontWeight: 600, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.05em" }, children: "Delete" })
+        ] }) }),
+        /* @__PURE__ */ jsx14("tbody", { children: config.collections.map((collection) => {
+          const canRead = hasAccess4(collection.access, "read", roleId);
+          const canCreate = hasAccess4(collection.access, "create", roleId);
+          const canUpdate = hasAccess4(collection.access, "update", roleId);
+          const canDelete = hasAccess4(collection.access, "delete", roleId);
+          return /* @__PURE__ */ jsxs12("tr", { style: { borderBottom: "1px solid var(--color-border)" }, children: [
+            /* @__PURE__ */ jsx14("td", { style: { padding: "16px 24px", fontSize: "14px", fontWeight: 600, color: "var(--color-text)" }, children: collection.label || collection.name }),
+            /* @__PURE__ */ jsx14("td", { style: { padding: "16px 24px", textAlign: "center" }, children: /* @__PURE__ */ jsx14(PermissionStatus, { allowed: canRead }) }),
+            /* @__PURE__ */ jsx14("td", { style: { padding: "16px 24px", textAlign: "center" }, children: /* @__PURE__ */ jsx14(PermissionStatus, { allowed: canCreate }) }),
+            /* @__PURE__ */ jsx14("td", { style: { padding: "16px 24px", textAlign: "center" }, children: /* @__PURE__ */ jsx14(PermissionStatus, { allowed: canUpdate }) }),
+            /* @__PURE__ */ jsx14("td", { style: { padding: "16px 24px", textAlign: "center" }, children: /* @__PURE__ */ jsx14(PermissionStatus, { allowed: canDelete }) })
+          ] }, collection.name);
+        }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsx14("h3", { style: { fontSize: "16px", fontWeight: 600, marginBottom: "16px", color: "var(--color-text)" }, children: "Field-Level Overrides" }),
+      config.collections.map((collection) => {
+        const fieldsWithAccess = Object.entries(collection.fields).filter(([_, field]) => field.access);
+        if (fieldsWithAccess.length === 0) return null;
+        return /* @__PURE__ */ jsxs12("div", { style: { marginBottom: "24px", padding: "20px", border: "1px solid var(--color-border)", borderRadius: "var(--radius-lg)", background: "white" }, children: [
+          /* @__PURE__ */ jsx14("h4", { style: { fontSize: "14px", fontWeight: 600, marginBottom: "12px", color: "var(--color-text-secondary)" }, children: collection.label || collection.name }),
+          /* @__PURE__ */ jsx14("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gap: "12px" }, children: fieldsWithAccess.map(([name, field]) => {
+            const canRead = hasAccess4(field.access, "read", roleId);
+            const canCreate = hasAccess4(field.access, "create", roleId);
+            const canUpdate = hasAccess4(field.access, "update", roleId);
+            return /* @__PURE__ */ jsxs12("div", { style: { padding: "12px", border: "1px solid #f1f5f9", borderRadius: "8px", background: "#f8fafc" }, children: [
+              /* @__PURE__ */ jsx14("div", { style: { fontSize: "13px", fontWeight: 600, marginBottom: "8px" }, children: /* @__PURE__ */ jsx14("code", { children: name }) }),
+              /* @__PURE__ */ jsxs12("div", { style: { display: "flex", gap: "8px", fontSize: "11px" }, children: [
+                /* @__PURE__ */ jsxs12("span", { style: { display: "flex", alignItems: "center", gap: "4px", color: canRead ? "#10b981" : "#ef4444" }, children: [
+                  /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: canRead ? "check_circle" : "cancel" }),
+                  " read"
+                ] }),
+                /* @__PURE__ */ jsxs12("span", { style: { display: "flex", alignItems: "center", gap: "4px", color: canCreate ? "#10b981" : "#ef4444" }, children: [
+                  /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: canCreate ? "check_circle" : "cancel" }),
+                  " create"
+                ] }),
+                /* @__PURE__ */ jsxs12("span", { style: { display: "flex", alignItems: "center", gap: "4px", color: canUpdate ? "#10b981" : "#ef4444" }, children: [
+                  /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined", style: { fontSize: "14px" }, children: canUpdate ? "check_circle" : "cancel" }),
+                  " update"
+                ] })
+              ] })
+            ] }, name);
+          }) })
+        ] }, collection.name);
+      })
+    ] })
+  ] }) });
+}
+function PermissionStatus({ allowed }) {
+  return /* @__PURE__ */ jsx14("span", { className: "material-symbols-outlined", style: {
+    color: allowed ? "#10b981" : "#ef4444",
+    fontSize: "20px",
+    fontWeight: "bold"
+  }, children: allowed ? "check" : "close" });
+}
+
+// src/ui/screens/AgentTokenPage.tsx
+import { useState as useState7 } from "react";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function AgentTokenPage({ config }) {
+  const { apiBase } = useAdminForge();
+  const session = useAdminSession();
+  const [selectedScopes, setSelectedScopes] = useState7([]);
+  const [expiresIn, setExpiresIn] = useState7(600);
+  const [token, setToken] = useState7(null);
+  const [loading, setLoading] = useState7(false);
+  const toggleScope = (scope) => {
+    setSelectedScopes(
+      (prev) => prev.includes(scope) ? prev.filter((s) => s !== scope) : [...prev, scope]
+    );
+  };
+  const handleGenerate = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch(`${apiBase}/_tokens`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ scope: selectedScopes, expiresIn })
+      });
+      const data = await res.json();
+      if (data.token) {
+        setToken(data.token);
+      } else {
+        alert(data.error || "Failed to generate token");
+      }
+    } catch (e) {
+      alert("Error connecting to API: " + e.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const role = session?.role || session?.user?.role;
+  return /* @__PURE__ */ jsx15(AdminLayout, { config, currentPath: "/admin/settings/agent-tokens", role, children: /* @__PURE__ */ jsxs13("div", { className: "adminforge-collection-page", children: [
+    /* @__PURE__ */ jsx15("div", { className: "adminforge-page-header", style: { marginBottom: "40px" }, children: /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx15("h1", { style: { fontSize: "24px", fontWeight: 700, margin: 0 }, children: "Agent Token Generator" }),
+      /* @__PURE__ */ jsx15("p", { style: { color: "#64748b", fontSize: "14px", marginTop: "4px" }, children: "Issue secure, scoped passes for your AI agents." })
+    ] }) }),
+    token ? /* @__PURE__ */ jsxs13("div", { style: {
+      background: "#f0fdf4",
+      border: "1px solid #10b981",
+      borderRadius: "12px",
+      padding: "32px",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+    }, children: [
+      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "20px" }, children: [
+        /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined", style: { color: "#059669", fontSize: "32px" }, children: "verified_user" }),
+        /* @__PURE__ */ jsx15("h2", { style: { fontSize: "20px", fontWeight: 700, color: "#064e3b", margin: 0 }, children: "Token Generated Successfully" })
+      ] }),
+      /* @__PURE__ */ jsx15("div", { style: { background: "#dcfce7", padding: "16px", borderRadius: "8px", marginBottom: "24px", border: "1px solid #10b98140" }, children: /* @__PURE__ */ jsxs13("p", { style: { fontSize: "14px", color: "#166534", lineHeight: 1.6, margin: 0 }, children: [
+        /* @__PURE__ */ jsx15("strong", { children: "\u26A0\uFE0F Security Alert:" }),
+        " Copy this token now. It is never stored and will only be shown once. It will expire in ",
+        /* @__PURE__ */ jsxs13("strong", { children: [
+          expiresIn / 60,
+          " minutes"
+        ] }),
+        "."
+      ] }) }),
+      /* @__PURE__ */ jsxs13("div", { style: { display: "flex", gap: "12px" }, children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            readOnly: true,
+            value: token,
+            className: "adminforge-input",
+            style: { fontFamily: "monospace", fontSize: "12px", flex: 1, height: "48px", background: "white" }
+          }
+        ),
+        /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            onClick: () => {
+              navigator.clipboard.writeText(token);
+              alert("Copied to clipboard!");
+            },
+            className: "adminforge-btn adminforge-btn-primary",
+            style: { height: "48px", padding: "0 24px" },
+            children: [
+              /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined", children: "content_copy" }),
+              "Copy"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs13(
+        "button",
+        {
+          onClick: () => setToken(null),
+          className: "adminforge-btn-text",
+          style: { marginTop: "24px", display: "flex", alignItems: "center", gap: "8px", color: "#059669", background: "none", border: "none", cursor: "pointer", fontWeight: 600 },
+          children: [
+            /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined", style: { fontSize: "18px" }, children: "refresh" }),
+            "Generate another token"
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs13("div", { style: { display: "flex", flexDirection: "column", gap: "32px" }, children: [
+      /* @__PURE__ */ jsx15("div", { className: "adminforge-table-wrapper", children: /* @__PURE__ */ jsxs13("table", { className: "adminforge-table", children: [
+        /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx15("th", { children: "Collection" }),
+          /* @__PURE__ */ jsx15("th", { style: { textAlign: "center" }, children: "Create" }),
+          /* @__PURE__ */ jsx15("th", { style: { textAlign: "center" }, children: "Read" }),
+          /* @__PURE__ */ jsx15("th", { style: { textAlign: "center" }, children: "Update" }),
+          /* @__PURE__ */ jsx15("th", { style: { textAlign: "center" }, children: "Delete" })
+        ] }) }),
+        /* @__PURE__ */ jsx15("tbody", { children: config.collections.map((c) => /* @__PURE__ */ jsxs13("tr", { children: [
+          /* @__PURE__ */ jsx15("td", { style: { fontWeight: 600 }, children: /* @__PURE__ */ jsxs13("div", { style: { display: "flex", alignItems: "center", gap: "10px" }, children: [
+            /* @__PURE__ */ jsx15("span", { className: "material-symbols-outlined", style: { fontSize: "20px", color: "#94a3b8" }, children: c.icon || "database" }),
+            c.label
+          ] }) }),
+          ["create", "read", "update", "delete"].map((action) => {
+            const scope = `${c.name}:${action}`;
+            return /* @__PURE__ */ jsx15("td", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx15("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx15(
+              "input",
+              {
+                type: "checkbox",
+                checked: selectedScopes.includes(scope),
+                onChange: () => toggleScope(scope),
+                style: { width: "18px", height: "18px", cursor: "pointer" }
+              }
+            ) }) }, action);
+          })
+        ] }, c.name)) })
+      ] }) }),
+      /* @__PURE__ */ jsxs13("div", { style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        background: "#fff",
+        padding: "24px",
+        borderRadius: "12px",
+        border: "1px solid var(--color-border)",
+        boxShadow: "var(--shadow-sm)"
+      }, children: [
+        /* @__PURE__ */ jsxs13("div", { children: [
+          /* @__PURE__ */ jsxs13("div", { style: { marginBottom: "16px" }, children: [
+            /* @__PURE__ */ jsxs13("p", { style: { fontWeight: 700, fontSize: "16px", color: "var(--color-text)", marginBottom: "8px", margin: 0 }, children: [
+              selectedScopes.length,
+              " scopes selected"
+            ] }),
+            /* @__PURE__ */ jsx15("div", { style: { display: "flex", gap: "8px", marginTop: "12px" }, children: [
+              { label: "10m", val: 600 },
+              { label: "30m", val: 1800 },
+              { label: "1h", val: 3600 }
+            ].map((opt) => /* @__PURE__ */ jsx15(
+              "button",
+              {
+                onClick: () => setExpiresIn(opt.val),
+                style: {
+                  padding: "6px 12px",
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  borderRadius: "6px",
+                  border: "1px solid",
+                  background: expiresIn === opt.val ? "var(--color-primary)" : "#fff",
+                  color: expiresIn === opt.val ? "#fff" : "var(--color-text)",
+                  borderColor: expiresIn === opt.val ? "var(--color-primary)" : "var(--color-border)",
+                  cursor: "pointer",
+                  transition: "all 0.2s"
+                },
+                children: opt.label
+              },
+              opt.val
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs13("p", { style: { fontSize: "13px", color: "#64748b", margin: 0 }, children: [
+            "Token will expire in ",
+            expiresIn / 60,
+            " minutes."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx15(
+          "button",
+          {
+            onClick: handleGenerate,
+            disabled: loading || selectedScopes.length === 0,
+            className: "adminforge-btn adminforge-btn-primary",
+            style: { padding: "12px 32px", fontSize: "15px" },
+            children: loading ? "Generating..." : "Generate Agent Token"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs13("div", { style: { marginTop: "24px" }, children: [
+        /* @__PURE__ */ jsx15("h3", { style: { fontSize: "11px", fontWeight: 700, color: "#94a3b8", textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: "16px", margin: 0 }, children: "Security Protocol" }),
+        /* @__PURE__ */ jsxs13("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px", marginTop: "16px" }, children: [
+          /* @__PURE__ */ jsxs13("div", { style: { background: "#fff", padding: "20px", borderRadius: "8px", border: "1px solid var(--color-border)" }, children: [
+            /* @__PURE__ */ jsx15("p", { style: { fontSize: "13px", fontWeight: 600, marginBottom: "8px", margin: 0 }, children: "Short-Lived Keys" }),
+            /* @__PURE__ */ jsx15("p", { style: { fontSize: "13px", color: "#64748b", lineHeight: 1.6, margin: 0 }, children: "Tokens expire after 10 minutes. This reduces the risk of long-term credential leakage." })
+          ] }),
+          /* @__PURE__ */ jsxs13("div", { style: { background: "#fff", padding: "20px", borderRadius: "8px", border: "1px solid var(--color-border)" }, children: [
+            /* @__PURE__ */ jsx15("p", { style: { fontSize: "13px", fontWeight: 600, marginBottom: "8px", margin: 0 }, children: "Scoped Authority" }),
+            /* @__PURE__ */ jsx15("p", { style: { fontSize: "13px", color: "#64748b", lineHeight: 1.6, margin: 0 }, children: "Agents are strictly limited to the checkboxes above. They cannot bypass RBAC rules." })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/ui/AdminDashboard.tsx
+import { useSearchParams } from "next/navigation.js";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function AdminDashboard({ config: initialConfig, params: initialParams, apiBase: initialApiBase }) {
+  const ctx = useAdminForge();
+  const config = initialConfig ?? ctx.config;
+  const apiBase = initialApiBase ?? ctx.apiBase;
+  const searchParams = useSearchParams();
+  const queryStr = searchParams.toString();
+  const [adminParams, setAdminParams] = React3.useState([]);
+  const [data, setData] = React3.useState(null);
+  const [record, setRecord] = React3.useState(null);
+  const [unauthorized, setUnauthorized] = React3.useState(false);
+  React3.useEffect(() => {
+    async function resolveParams() {
+      const resolved = initialParams instanceof Promise ? await initialParams : initialParams;
+      if (resolved?.admin) {
+        setAdminParams(resolved.admin);
+      } else if (typeof window !== "undefined") {
+        const path = window.location.pathname;
+        const segments = path.split("/admin/").pop()?.split("/") || [];
+        setAdminParams(segments.filter(Boolean));
+      }
+    }
+    resolveParams();
+  }, [initialParams]);
+  const [segment, actionOrId] = adminParams;
+  React3.useEffect(() => {
+    if (!config || !segment) return;
+    const isCollection = config.collections.some((c) => 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 /* @__PURE__ */ jsx16(AdminForgeProvider, { config, apiBase, children: /* @__PURE__ */ jsx16(
+    AdminDashboardContent,
+    {
+      config,
+      adminParams,
+      unauthorized,
+      data,
+      record
+    }
+  ) });
+}
+function AdminDashboardContent({ config: _config, adminParams, unauthorized: localUnauthorized, data, record }) {
+  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 /* @__PURE__ */ jsx16("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", background: "#f8fafc", padding: "20px" }, children: /* @__PURE__ */ jsxs14("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" }, children: [
+      /* @__PURE__ */ jsx16("div", { style: { width: "64px", height: "64px", background: "#eff6ff", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 24px" }, children: /* @__PURE__ */ jsx16("span", { className: "material-symbols-outlined", style: { color: "#3b82f6", fontSize: "32px" }, children: "lock" }) }),
+      /* @__PURE__ */ jsx16("h2", { style: { fontSize: "24px", fontWeight: 700, color: "#0f172a", marginBottom: "8px" }, children: "Login Required" }),
+      /* @__PURE__ */ jsx16("p", { style: { color: "#64748b", fontSize: "15px", marginBottom: "32px", lineHeight: 1.6 }, children: "Please sign in to access the AdminForge dashboard." }),
+      /* @__PURE__ */ jsx16("form", { action: "/api/auth/signin", method: "GET", children: /* @__PURE__ */ jsx16("button", { className: "adminforge-btn adminforge-btn-primary", style: { width: "100%", height: "48px", fontSize: "16px" }, children: "Sign In to Admin" }) })
+    ] }) });
+  }
+  if (config) {
+    const [segment, actionOrId] = adminParams;
+    if (adminParams.length === 0) return /* @__PURE__ */ jsx16(AdminPage, { config });
+    if (segment === "roles") {
+      if (actionOrId) return /* @__PURE__ */ jsx16(RoleDetailPage, { config, roleId: actionOrId });
+      return /* @__PURE__ */ jsx16(RolesListPage, { config });
+    }
+    if (segment === "settings" && actionOrId === "agent-tokens") {
+      return /* @__PURE__ */ jsx16(AgentTokenPage, { config });
+    }
+    const collection = config.collections.find((c) => c.name === segment);
+    if (collection) {
+      if (actionOrId === "new") return /* @__PURE__ */ jsx16(CollectionFormPage, { config, collection, isNew: true });
+      if (actionOrId === "schema") return /* @__PURE__ */ jsx16(CollectionSchemaPage, { config, collection });
+      if (actionOrId) return /* @__PURE__ */ jsx16(CollectionFormPage, { config, collection, isNew: false, record });
+      return /* @__PURE__ */ jsx16(
+        CollectionListPage,
+        {
+          config,
+          collection,
+          data: data?.data || [],
+          total: data?.total || 0,
+          page: data?.page || 1,
+          pageSize: data?.pageSize || 10
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx16(AdminPage, { config });
+  }
+  return /* @__PURE__ */ jsxs14("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", height: "100vh", background: "#f8fafc" }, children: [
+    /* @__PURE__ */ jsxs14("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx16("div", { className: "adminforge-spinner", style: { width: "40px", height: "40px", border: "3px solid #e2e8f0", borderTopColor: "#3b82f6", borderRadius: "50%", margin: "0 auto 16px" } }),
+      /* @__PURE__ */ jsx16("p", { style: { color: "#64748b", fontSize: "14px", fontWeight: 500 }, children: "Loading AdminForge..." })
+    ] }),
+    /* @__PURE__ */ jsx16("style", { children: `
+        .adminforge-spinner { animation: spin 0.8s linear infinite; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+      ` })
+  ] });
+}
+export {
+  AdminDashboard,
+  AdminForgeProvider,
+  AdminLayout,
+  AdminPage,
+  AgentTokenPage,
+  AuthProvider,
+  CollectionFormPage,
+  CollectionListPage,
+  CollectionSchemaPage,
+  FormEngine,
+  ImageUpload,
+  RichTextEditor,
+  RoleDetailPage,
+  RolesListPage,
+  TableEngine,
+  useAdminForge,
+  useAdminSession
+};
+//# sourceMappingURL=ui.js.map