@maykonpaulo/maestro-admin 0.2.0 → 0.3.0-next.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/MaestroAdmin.tsx
-import { useMemo as useMemo3, useState as useState9 } from "react";
+import { useMemo as useMemo3, useState as useState10 } from "react";
 
 // src/client/MaestroClient.ts
 var MaestroApiError = class extends Error {
@@ -294,6 +294,12 @@ var EN = {
   entitiesFooter: (count) => `${count} entities \xB7 Maestro`,
   yes: "true",
   no: "false",
+  jsonFormMode: "Fields",
+  jsonRawMode: "JSON",
+  jsonInvalid: "Invalid JSON \u2014 fix it to apply this change.",
+  emptyObject: "(empty)",
+  addItem: "Add item",
+  removeItem: "Remove item",
   searchMenu: "Search menu\u2026",
   recents: "Recents",
   menus: "Menus",
@@ -334,6 +340,12 @@ var PT_BR = {
   entitiesFooter: (count) => `${count} entidades \xB7 Maestro`,
   yes: "sim",
   no: "n\xE3o",
+  jsonFormMode: "Campos",
+  jsonRawMode: "JSON",
+  jsonInvalid: "JSON inv\xE1lido \u2014 corrija para aplicar esta altera\xE7\xE3o.",
+  emptyObject: "(vazio)",
+  addItem: "Adicionar item",
+  removeItem: "Remover item",
   searchMenu: "Buscar no menu\u2026",
   recents: "Recentes",
   menus: "Menus",
@@ -595,8 +607,58 @@ function RelationValue({ field, value }) {
   );
 }
 
+// src/components/ObjectValue.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ISO_DATETIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
+var MAX_DEPTH = 4;
+function isPlainObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function Primitive({ value }) {
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "\u2014" });
+  }
+  if (typeof value === "boolean" || typeof value === "number") {
+    return /* @__PURE__ */ jsx4("code", { className: "text-xs font-medium text-indigo-700", children: String(value) });
+  }
+  const text = String(value);
+  if (ISO_DATETIME.test(text)) {
+    const d = new Date(text);
+    if (!Number.isNaN(d.getTime())) {
+      return /* @__PURE__ */ jsx4("span", { className: "whitespace-nowrap text-slate-700", children: d.toLocaleString() });
+    }
+  }
+  return /* @__PURE__ */ jsx4("span", { className: "break-all text-slate-700", children: text });
+}
+function ObjectValue({ value, depth = 0 }) {
+  const t = useT();
+  if (!isPlainObject(value) && !Array.isArray(value)) {
+    return /* @__PURE__ */ jsx4(Primitive, { value });
+  }
+  if (depth >= MAX_DEPTH) {
+    return /* @__PURE__ */ jsx4("code", { className: "block max-w-md overflow-x-auto rounded bg-slate-50 px-1.5 py-0.5 text-xs text-slate-700", children: JSON.stringify(value) });
+  }
+  const entries = Array.isArray(value) ? value.map((v, i) => [String(i), v]) : Object.entries(value);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: t.emptyObject });
+  }
+  return /* @__PURE__ */ jsx4(
+    "dl",
+    {
+      className: depth === 0 ? "w-full divide-y divide-slate-100 rounded-md border border-slate-200 bg-slate-50/50" : "w-full divide-y divide-slate-100 border-l-2 border-slate-200 pl-2",
+      children: entries.map(([key, entry]) => (
+        // flex-wrap + basis: deeply nested values drop to their own full-width line instead of squeezing.
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1 px-3 py-1.5", children: [
+          /* @__PURE__ */ jsx4("dt", { className: "w-36 shrink-0 truncate pt-px text-xs font-medium text-slate-500", title: key, children: key }),
+          /* @__PURE__ */ jsx4("dd", { className: "min-w-0 flex-1 basis-56 text-sm", children: isPlainObject(entry) || Array.isArray(entry) ? /* @__PURE__ */ jsx4(ObjectValue, { value: entry, depth: depth + 1 }) : /* @__PURE__ */ jsx4(Primitive, { value: entry }) })
+        ] }, key)
+      ))
+    }
+  );
+}
+
 // src/components/FieldValue.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function enumLabel(field, value) {
   const opt = field.enumOptions?.find((o) => o.value === value);
   return opt ? opt.label : String(value);
@@ -604,34 +666,40 @@ function enumLabel(field, value) {
 function FieldValue({ field, value, compact = false }) {
   const t = useT();
   if (value === null || value === void 0 || value === "") {
-    return /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "\u2014" });
+    return /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "\u2014" });
   }
   if (field.sensitive) {
-    return /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "\u2022\u2022\u2022\u2022\u2022\u2022" });
+    return /* @__PURE__ */ jsx5("span", { className: "text-slate-400", children: "\u2022\u2022\u2022\u2022\u2022\u2022" });
   }
   switch (field.type) {
     case "boolean":
-      return value ? /* @__PURE__ */ jsx4(Badge, { tone: "green", children: t.yes }) : /* @__PURE__ */ jsx4(Badge, { tone: "slate", children: t.no });
+      return value ? /* @__PURE__ */ jsx5(Badge, { tone: "green", children: t.yes }) : /* @__PURE__ */ jsx5(Badge, { tone: "slate", children: t.no });
     case "enum":
-      return /* @__PURE__ */ jsx4(Badge, { tone: "indigo", children: enumLabel(field, value) });
+      return /* @__PURE__ */ jsx5(Badge, { tone: "indigo", children: enumLabel(field, value) });
     case "relation":
-      return field.relationEntity ? /* @__PURE__ */ jsx4(RelationValue, { field, value }) : /* @__PURE__ */ jsx4("span", { className: "text-slate-700", children: String(value) });
+      return field.relationEntity ? /* @__PURE__ */ jsx5(RelationValue, { field, value }) : /* @__PURE__ */ jsx5("span", { className: "text-slate-700", children: String(value) });
     case "date":
     case "datetime": {
       const d = new Date(String(value));
-      return /* @__PURE__ */ jsx4("span", { className: "whitespace-nowrap", children: Number.isNaN(d.getTime()) ? String(value) : d.toLocaleString() });
+      return /* @__PURE__ */ jsx5("span", { className: "whitespace-nowrap", children: Number.isNaN(d.getTime()) ? String(value) : d.toLocaleString() });
     }
     case "json":
-      return /* @__PURE__ */ jsx4("code", { className: `block overflow-x-auto rounded bg-slate-50 px-1.5 py-0.5 text-xs text-slate-700 ${compact ? "max-w-xs truncate" : "max-w-md"}`, children: JSON.stringify(value) });
+      if (compact) {
+        return /* @__PURE__ */ jsx5("code", { className: "block max-w-xs truncate overflow-x-auto rounded bg-slate-50 px-1.5 py-0.5 text-xs text-slate-700", children: JSON.stringify(value) });
+      }
+      if (typeof value === "object") {
+        return /* @__PURE__ */ jsx5(ObjectValue, { value });
+      }
+      return /* @__PURE__ */ jsx5("code", { className: "block max-w-md overflow-x-auto rounded bg-slate-50 px-1.5 py-0.5 text-xs text-slate-700", children: JSON.stringify(value) });
     default:
-      return /* @__PURE__ */ jsx4("span", { className: `text-slate-700 ${compact ? "block max-w-64 truncate" : ""}`, children: String(value) });
+      return /* @__PURE__ */ jsx5("span", { className: `text-slate-700 ${compact ? "block max-w-64 truncate" : ""}`, children: String(value) });
   }
 }
 
 // src/components/menu.tsx
 import { useEffect as useEffect4, useLayoutEffect, useRef as useRef2, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function PopMenu({ anchor, items, onClose }) {
   const ref = useRef2(null);
   const [pos, setPos] = useState4(anchor);
@@ -663,14 +731,14 @@ function PopMenu({ anchor, items, onClose }) {
     };
   }, [onClose]);
   return createPortal(
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         ref,
         role: "menu",
         style: { position: "fixed", left: pos.x, top: pos.y, zIndex: 50 },
         className: "min-w-44 rounded-md border border-slate-200 bg-white py-1 shadow-lg",
-        children: items.map((item) => /* @__PURE__ */ jsx5(
+        children: items.map((item) => /* @__PURE__ */ jsx6(
           "button",
           {
             role: "menuitem",
@@ -690,8 +758,8 @@ function PopMenu({ anchor, items, onClose }) {
 }
 function MenuButton({ items, label }) {
   const [anchor, setAnchor] = useState4(void 0);
-  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
@@ -705,7 +773,7 @@ function MenuButton({ items, label }) {
         children: "\u22EE"
       }
     ),
-    anchor && /* @__PURE__ */ jsx5(PopMenu, { anchor, items, onClose: () => setAnchor(void 0) })
+    anchor && /* @__PURE__ */ jsx6(PopMenu, { anchor, items, onClose: () => setAnchor(void 0) })
   ] });
 }
 
@@ -729,7 +797,7 @@ async function copyText(text) {
 }
 
 // src/components/EntityList.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var PAGE_SIZE = 20;
 function filterFor(field, value) {
   if (value === null || value === void 0) return { field: field.name, operator: "isNull" };
@@ -843,14 +911,14 @@ function EntityList({
     return items;
   };
   const totalPages = data?.totalPages ?? (data ? Math.max(1, Math.ceil(data.total / PAGE_SIZE)) : 1);
-  return /* @__PURE__ */ jsxs5("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs5("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx6("h1", { className: "text-lg font-semibold text-slate-900", children: entity.label.plural }),
-        data && /* @__PURE__ */ jsx6("p", { className: "text-sm text-slate-500", children: t.records(data.total) })
+  return /* @__PURE__ */ jsxs6("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs6("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7("h1", { className: "text-lg font-semibold text-slate-900", children: entity.label.plural }),
+        data && /* @__PURE__ */ jsx7("p", { className: "text-sm text-slate-500", children: t.records(data.total) })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-        searchFields.length > 0 && /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        searchFields.length > 0 && /* @__PURE__ */ jsx7(
           "input",
           {
             type: "search",
@@ -863,15 +931,15 @@ function EntityList({
             className: "rounded-md border border-slate-300 px-3 py-1.5 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
           }
         ),
-        entity.capabilities.create && /* @__PURE__ */ jsx6(Button, { variant: "primary", onClick: onCreate, children: t.newRecord })
+        entity.capabilities.create && /* @__PURE__ */ jsx7(Button, { variant: "primary", onClick: onCreate, children: t.newRecord })
       ] })
     ] }),
-    filters.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
-      /* @__PURE__ */ jsxs5("span", { className: "text-slate-500", children: [
+    filters.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsxs6("span", { className: "text-slate-500", children: [
         t.filters,
         ":"
       ] }),
-      filters.map((f) => /* @__PURE__ */ jsxs5(
+      filters.map((f) => /* @__PURE__ */ jsxs6(
         "button",
         {
           onClick: () => {
@@ -882,12 +950,12 @@ function EntityList({
           className: "inline-flex items-center gap-1 rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-medium text-indigo-700 hover:bg-indigo-100",
           children: [
             filterChipText(entity, f),
-            /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\xD7" })
+            /* @__PURE__ */ jsx7("span", { "aria-hidden": true, children: "\xD7" })
           ]
         },
         f.field
       )),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           onClick: () => {
@@ -899,10 +967,10 @@ function EntityList({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx6(ErrorBanner, { error }),
-    loading && !data ? /* @__PURE__ */ jsx6(Spinner, { label: t.loading }) : data && data.records.length === 0 ? /* @__PURE__ */ jsx6(EmptyState, { title: t.noRecords, hint: search || filters.length ? t.tryDifferentSearch : void 0 }) : /* @__PURE__ */ jsx6("div", { className: "overflow-x-auto rounded-lg border border-slate-200", children: /* @__PURE__ */ jsxs5("table", { className: "min-w-full divide-y divide-slate-200 text-sm", children: [
-      /* @__PURE__ */ jsx6("thead", { className: "bg-slate-50", children: /* @__PURE__ */ jsxs5("tr", { children: [
-        columns.map((f) => /* @__PURE__ */ jsxs5(
+    error && /* @__PURE__ */ jsx7(ErrorBanner, { error }),
+    loading && !data ? /* @__PURE__ */ jsx7(Spinner, { label: t.loading }) : data && data.records.length === 0 ? /* @__PURE__ */ jsx7(EmptyState, { title: t.noRecords, hint: search || filters.length ? t.tryDifferentSearch : void 0 }) : /* @__PURE__ */ jsx7("div", { className: "overflow-x-auto rounded-lg border border-slate-200", children: /* @__PURE__ */ jsxs6("table", { className: "min-w-full divide-y divide-slate-200 text-sm", children: [
+      /* @__PURE__ */ jsx7("thead", { className: "bg-slate-50", children: /* @__PURE__ */ jsxs6("tr", { children: [
+        columns.map((f) => /* @__PURE__ */ jsxs6(
           "th",
           {
             onClick: () => f.sortable && toggleSort(f.name),
@@ -914,38 +982,38 @@ function EntityList({
           },
           f.name
         )),
-        /* @__PURE__ */ jsx6("th", { className: "px-3 py-2 text-right font-medium text-slate-600", children: t.actions })
+        /* @__PURE__ */ jsx7("th", { className: "px-3 py-2 text-right font-medium text-slate-600", children: t.actions })
       ] }) }),
-      /* @__PURE__ */ jsx6("tbody", { className: "divide-y divide-slate-100 bg-white", children: data?.records.map((record, i) => {
+      /* @__PURE__ */ jsx7("tbody", { className: "divide-y divide-slate-100 bg-white", children: data?.records.map((record, i) => {
         const id = String(record[entity.primaryKey]);
-        return /* @__PURE__ */ jsxs5("tr", { className: "hover:bg-slate-50", children: [
-          columns.map((f) => /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsxs6("tr", { className: "hover:bg-slate-50", children: [
+          columns.map((f) => /* @__PURE__ */ jsx7(
             "td",
             {
               className: "cursor-pointer px-3 py-2 align-top",
               onClick: (e) => setCellMenu({ anchor: { x: e.clientX, y: e.clientY }, field: f, record }),
               onDoubleClick: () => onOpen(id),
-              children: /* @__PURE__ */ jsx6(FieldValue, { field: f, value: record[f.name], compact: true })
+              children: /* @__PURE__ */ jsx7(FieldValue, { field: f, value: record[f.name], compact: true })
             },
             f.name
           )),
-          /* @__PURE__ */ jsx6("td", { className: "whitespace-nowrap px-3 py-2 text-right", children: /* @__PURE__ */ jsx6(MenuButton, { label: t.actions, items: rowMenuItems(record) }) })
+          /* @__PURE__ */ jsx7("td", { className: "whitespace-nowrap px-3 py-2 text-right", children: /* @__PURE__ */ jsx7(MenuButton, { label: t.actions, items: rowMenuItems(record) }) })
         ] }, id || i);
       }) })
     ] }) }),
-    cellMenu && /* @__PURE__ */ jsx6(PopMenu, { anchor: cellMenu.anchor, items: cellMenuItems(cellMenu), onClose: () => setCellMenu(void 0) }),
-    copied && /* @__PURE__ */ jsx6("div", { className: "fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white shadow-lg", children: t.copied }),
-    data && totalPages > 1 && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-end gap-2 text-sm", children: [
-      /* @__PURE__ */ jsx6(Button, { variant: "secondary", disabled: page <= 1, onClick: () => setPage((p) => p - 1), children: t.previous }),
-      /* @__PURE__ */ jsx6("span", { className: "text-slate-500", children: t.page(page, totalPages) }),
-      /* @__PURE__ */ jsx6(Button, { variant: "secondary", disabled: page >= totalPages, onClick: () => setPage((p) => p + 1), children: t.next })
+    cellMenu && /* @__PURE__ */ jsx7(PopMenu, { anchor: cellMenu.anchor, items: cellMenuItems(cellMenu), onClose: () => setCellMenu(void 0) }),
+    copied && /* @__PURE__ */ jsx7("div", { className: "fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white shadow-lg", children: t.copied }),
+    data && totalPages > 1 && /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx7(Button, { variant: "secondary", disabled: page <= 1, onClick: () => setPage((p) => p - 1), children: t.previous }),
+      /* @__PURE__ */ jsx7("span", { className: "text-slate-500", children: t.page(page, totalPages) }),
+      /* @__PURE__ */ jsx7(Button, { variant: "secondary", disabled: page >= totalPages, onClick: () => setPage((p) => p + 1), children: t.next })
     ] })
   ] });
 }
 
 // src/components/EntityDetail.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function EntityDetail({
   entity,
   id,
@@ -986,34 +1054,34 @@ function EntityDetail({
   if (entity.capabilities.delete) {
     menuItems.push({ id: "remove", label: `\u{1F5D1} ${t.remove}`, danger: true, onSelect: () => void onDelete() });
   }
-  return /* @__PURE__ */ jsxs6("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs6("header", { className: "flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs6("div", { children: [
-        /* @__PURE__ */ jsxs6("button", { onClick: onBack, className: "text-sm text-indigo-600 hover:underline", children: [
+  return /* @__PURE__ */ jsxs7("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs7("header", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsxs7("button", { onClick: onBack, className: "text-sm text-indigo-600 hover:underline", children: [
           "\u2190 ",
           entity.label.plural
         ] }),
-        /* @__PURE__ */ jsxs6("h1", { className: "text-lg font-semibold text-slate-900", children: [
+        /* @__PURE__ */ jsxs7("h1", { className: "text-lg font-semibold text-slate-900", children: [
           entity.label.singular,
           " ",
           data ? String(data[entity.displayField] ?? id) : ""
         ] })
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
-        entity.capabilities.update && /* @__PURE__ */ jsx7(Button, { variant: "primary", onClick: onEdit, children: t.edit }),
-        /* @__PURE__ */ jsx7(MenuButton, { label: t.actions, items: menuItems })
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1", children: [
+        entity.capabilities.update && /* @__PURE__ */ jsx8(Button, { variant: "primary", onClick: onEdit, children: t.edit }),
+        /* @__PURE__ */ jsx8(MenuButton, { label: t.actions, items: menuItems })
       ] })
     ] }),
-    error && /* @__PURE__ */ jsx7(ErrorBanner, { error }),
-    loading && !data ? /* @__PURE__ */ jsx7(Spinner, {}) : data && /* @__PURE__ */ jsx7("dl", { className: "divide-y divide-slate-100 rounded-lg border border-slate-200 bg-white", children: fields.map((f) => {
+    error && /* @__PURE__ */ jsx8(ErrorBanner, { error }),
+    loading && !data ? /* @__PURE__ */ jsx8(Spinner, {}) : data && /* @__PURE__ */ jsx8("dl", { className: "divide-y divide-slate-100 rounded-lg border border-slate-200 bg-white", children: fields.map((f) => {
       const value = data[f.name];
       const isRelation = f.type === "relation" && f.relationEntity && value !== null && value !== void 0;
       const target = isRelation ? entities.find((e) => e.id === f.relationEntity) : void 0;
-      return /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-3 gap-4 px-4 py-3", children: [
-        /* @__PURE__ */ jsx7("dt", { className: "text-sm font-medium text-slate-500", children: f.label }),
-        /* @__PURE__ */ jsxs6("dd", { className: "col-span-2 flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ jsx7(FieldValue, { field: f, value }),
-          isRelation && /* @__PURE__ */ jsxs6(
+      return /* @__PURE__ */ jsxs7("div", { className: "grid grid-cols-3 gap-4 px-4 py-3", children: [
+        /* @__PURE__ */ jsx8("dt", { className: "text-sm font-medium text-slate-500", children: f.label }),
+        /* @__PURE__ */ jsxs7("dd", { className: "col-span-2 flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx8(FieldValue, { field: f, value }),
+          isRelation && /* @__PURE__ */ jsxs7(
             "button",
             {
               onClick: () => onNavigate(f.relationEntity, String(value)),
@@ -1027,15 +1095,270 @@ function EntityDetail({
         ] })
       ] }, f.name);
     }) }),
-    copied && /* @__PURE__ */ jsx7("div", { className: "fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white shadow-lg", children: t.copied })
+    copied && /* @__PURE__ */ jsx8("div", { className: "fixed bottom-4 right-4 z-50 rounded-md bg-slate-900 px-3 py-1.5 text-sm text-white shadow-lg", children: t.copied })
   ] });
 }
 
 // src/components/EntityForm.tsx
-import { useEffect as useEffect5, useState as useState7 } from "react";
+import { useEffect as useEffect6, useState as useState8 } from "react";
+
+// src/components/JsonInput.tsx
+import { useEffect as useEffect5, useRef as useRef3, useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var leafInputClass = "w-full rounded-md border border-slate-300 px-2.5 py-1 text-sm text-slate-800 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:bg-slate-100";
+var MAX_DEPTH2 = 3;
+function RawJsonArea({
+  id,
+  value,
+  onChange,
+  disabled,
+  rows = 8,
+  placeholder
+}) {
+  const t = useT();
+  const [text, setText] = useState7(() => value === null || value === void 0 ? "" : JSON.stringify(value, null, 2));
+  const [invalid, setInvalid] = useState7(false);
+  const lastEmitted = useRef3(value);
+  useEffect5(() => {
+    if (value !== lastEmitted.current) {
+      lastEmitted.current = value;
+      setText(value === null || value === void 0 ? "" : JSON.stringify(value, null, 2));
+      setInvalid(false);
+    }
+  }, [value]);
+  const onText = (raw) => {
+    setText(raw);
+    if (raw.trim() === "") {
+      lastEmitted.current = null;
+      setInvalid(false);
+      onChange(null);
+      return;
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      lastEmitted.current = parsed;
+      setInvalid(false);
+      onChange(parsed);
+    } catch {
+      setInvalid(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx9(
+      "textarea",
+      {
+        id,
+        rows,
+        value: text,
+        placeholder,
+        disabled,
+        onChange: (e) => onText(e.target.value),
+        "aria-invalid": invalid || void 0,
+        className: `${leafInputClass} font-mono ${invalid ? "border-amber-400 focus:border-amber-500 focus:ring-amber-500" : ""}`
+      }
+    ),
+    invalid && /* @__PURE__ */ jsx9("p", { role: "alert", className: "text-xs text-amber-600", children: t.jsonInvalid })
+  ] });
+}
+function LeafEditor({
+  id,
+  value,
+  onChange,
+  disabled,
+  depth
+}) {
+  if (typeof value === "boolean") {
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        checked: value,
+        disabled,
+        onChange: (e) => onChange(e.target.checked),
+        className: "mt-1 h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
+      }
+    );
+  }
+  if (typeof value === "number") {
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        id,
+        type: "number",
+        value: String(value),
+        disabled,
+        step: "any",
+        onChange: (e) => onChange(e.target.value === "" ? null : Number(e.target.value)),
+        className: leafInputClass
+      }
+    );
+  }
+  if (typeof value === "string") {
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        id,
+        type: "text",
+        value,
+        disabled,
+        onChange: (e) => onChange(e.target.value),
+        className: leafInputClass
+      }
+    );
+  }
+  if (value === null || value === void 0) {
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        id,
+        type: "text",
+        value: "",
+        placeholder: "null",
+        disabled,
+        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
+        className: leafInputClass
+      }
+    );
+  }
+  if (isPlainObject(value) && depth < MAX_DEPTH2) {
+    return /* @__PURE__ */ jsx9("div", { className: "rounded-md border border-slate-200", children: /* @__PURE__ */ jsx9(ObjectEditor, { idPrefix: id, value, onChange, disabled, depth: depth + 1 }) });
+  }
+  if (Array.isArray(value) && depth < MAX_DEPTH2) {
+    return /* @__PURE__ */ jsx9("div", { className: "rounded-md border border-slate-200", children: /* @__PURE__ */ jsx9(ArrayEditor, { idPrefix: id, value, onChange, disabled, depth: depth + 1 }) });
+  }
+  return /* @__PURE__ */ jsx9(RawJsonArea, { id, value, onChange, disabled, rows: 3 });
+}
+function ArrayEditor({
+  idPrefix,
+  value,
+  onChange,
+  disabled,
+  depth = 0
+}) {
+  const t = useT();
+  const setAt = (i, next) => onChange(value.map((cur, idx) => idx === i ? next : cur));
+  const removeAt = (i) => onChange(value.filter((_, idx) => idx !== i));
+  const append = () => {
+    const last = value[value.length - 1];
+    const template = last === void 0 || last === null ? null : JSON.parse(JSON.stringify(last));
+    onChange([...value, template]);
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "divide-y divide-slate-100", children: [
+    value.map((item, i) => {
+      const id = `${idPrefix}-${i}`;
+      return /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1.5 px-3 py-2", children: [
+        /* @__PURE__ */ jsx9("label", { htmlFor: id, className: "w-8 shrink-0 pt-1.5 text-right text-xs font-medium text-slate-400", children: i }),
+        !disabled && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            title: t.removeItem,
+            "aria-label": `${t.removeItem} ${i}`,
+            onClick: () => removeAt(i),
+            className: "shrink-0 pt-1.5 text-xs text-slate-400 transition-colors hover:text-red-600",
+            children: "\u2715"
+          }
+        ),
+        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1 basis-64", children: /* @__PURE__ */ jsx9(LeafEditor, { id, value: item, onChange: (next) => setAt(i, next), disabled, depth }) })
+      ] }, i);
+    }),
+    value.length === 0 && /* @__PURE__ */ jsx9("p", { className: "px-3 py-2 text-xs text-slate-400", children: t.emptyObject }),
+    !disabled && /* @__PURE__ */ jsx9("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsxs8("button", { type: "button", onClick: append, className: "text-xs font-medium text-indigo-600 hover:underline", children: [
+      "+ ",
+      t.addItem
+    ] }) })
+  ] });
+}
+function ObjectEditor({
+  idPrefix,
+  value,
+  onChange,
+  disabled,
+  depth = 0
+}) {
+  const t = useT();
+  const entries = Object.entries(value);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsx9("p", { className: "px-3 py-2 text-xs text-slate-400", children: t.emptyObject });
+  }
+  return /* @__PURE__ */ jsx9("div", { className: "divide-y divide-slate-100", children: entries.map(([key, entry]) => {
+    const id = `${idPrefix}-${key}`;
+    return (
+      // flex-wrap + basis: when the label column leaves less than ~16rem for the control (deeply
+      // nested groups), the control wraps to its own full-width line instead of squeezing.
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-wrap items-start gap-x-3 gap-y-1.5 px-3 py-2", children: [
+        /* @__PURE__ */ jsx9("label", { htmlFor: id, className: "w-36 shrink-0 truncate pt-1.5 text-xs font-medium text-slate-500", title: key, children: key }),
+        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1 basis-64", children: /* @__PURE__ */ jsx9(
+          LeafEditor,
+          {
+            id,
+            value: entry,
+            onChange: (next) => onChange({ ...value, [key]: next }),
+            disabled,
+            depth
+          }
+        ) })
+      ] }, key)
+    );
+  }) });
+}
+function JsonInput({
+  field,
+  value,
+  onChange,
+  disabled
+}) {
+  const t = useT();
+  const [mode, setMode] = useState7(() => isPlainObject(value) ? "form" : "raw");
+  const [modeTouched, setModeTouched] = useState7(false);
+  const structured = isPlainObject(value) || Array.isArray(value);
+  useEffect5(() => {
+    if (!modeTouched && structured) setMode("form");
+  }, [structured, modeTouched]);
+  const pick = (next) => {
+    setModeTouched(true);
+    setMode(next);
+  };
+  const showForm = mode === "form" && structured;
+  const toggleClass = (active) => `rounded px-2 py-0.5 text-xs font-medium transition-colors ${active ? "bg-white text-slate-800 shadow-sm ring-1 ring-slate-300" : "text-slate-500 hover:text-slate-700"}`;
+  return /* @__PURE__ */ jsxs8("div", { className: "rounded-md border border-slate-300 shadow-sm", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-end gap-1 rounded-t-md border-b border-slate-200 bg-slate-50 px-2 py-1", children: [
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          className: toggleClass(showForm),
+          disabled: !structured,
+          onClick: () => pick("form"),
+          children: t.jsonFormMode
+        }
+      ),
+      /* @__PURE__ */ jsx9("button", { type: "button", className: toggleClass(!showForm), onClick: () => pick("raw"), children: t.jsonRawMode })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "p-1", children: showForm ? Array.isArray(value) ? /* @__PURE__ */ jsx9(ArrayEditor, { idPrefix: `field-${field.name}`, value, onChange, disabled }) : /* @__PURE__ */ jsx9(
+      ObjectEditor,
+      {
+        idPrefix: `field-${field.name}`,
+        value,
+        onChange,
+        disabled
+      }
+    ) : /* @__PURE__ */ jsx9(
+      RawJsonArea,
+      {
+        id: `field-${field.name}`,
+        value,
+        onChange,
+        disabled,
+        placeholder: field.form.placeholder
+      }
+    ) })
+  ] });
+}
 
 // src/components/FieldInput.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var inputClass = "w-full rounded-md border border-slate-300 px-3 py-1.5 text-sm text-slate-800 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:bg-slate-100";
 function FieldInput({
   field,
@@ -1046,7 +1369,7 @@ function FieldInput({
   const id = `field-${field.name}`;
   switch (field.type) {
     case "boolean":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx10(
         "input",
         {
           id,
@@ -1062,7 +1385,7 @@ function FieldInput({
     case "float":
     case "decimal":
     case "currency":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx10(
         "input",
         {
           id,
@@ -1076,7 +1399,7 @@ function FieldInput({
         }
       );
     case "enum":
-      return /* @__PURE__ */ jsxs7(
+      return /* @__PURE__ */ jsxs9(
         "select",
         {
           id,
@@ -1085,13 +1408,13 @@ function FieldInput({
           onChange: (e) => onChange(e.target.value),
           className: inputClass,
           children: [
-            /* @__PURE__ */ jsx8("option", { value: "", children: "\u2014" }),
-            field.enumOptions?.map((o) => /* @__PURE__ */ jsx8("option", { value: String(o.value), children: o.label }, String(o.value)))
+            /* @__PURE__ */ jsx10("option", { value: "", children: "\u2014" }),
+            field.enumOptions?.map((o) => /* @__PURE__ */ jsx10("option", { value: String(o.value), children: o.label }, String(o.value)))
           ]
         }
       );
     case "date":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx10(
         "input",
         {
           id,
@@ -1102,32 +1425,23 @@ function FieldInput({
           className: inputClass
         }
       );
-    case "text":
     case "json":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx10(JsonInput, { field, value, onChange, disabled });
+    case "text":
+      return /* @__PURE__ */ jsx10(
         "textarea",
         {
           id,
-          rows: field.type === "json" ? 5 : 3,
-          value: field.type === "json" && value !== null && typeof value === "object" ? JSON.stringify(value, null, 2) : value === null || value === void 0 ? "" : String(value),
+          rows: 3,
+          value: value === null || value === void 0 ? "" : String(value),
           placeholder: field.form.placeholder,
           disabled,
-          onChange: (e) => {
-            if (field.type === "json") {
-              try {
-                onChange(e.target.value ? JSON.parse(e.target.value) : null);
-              } catch {
-                onChange(e.target.value);
-              }
-            } else {
-              onChange(e.target.value);
-            }
-          },
-          className: `${inputClass} font-mono`
+          onChange: (e) => onChange(e.target.value),
+          className: inputClass
         }
       );
     default:
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx10(
         "input",
         {
           id,
@@ -1143,7 +1457,7 @@ function FieldInput({
 }
 
 // src/components/EntityForm.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function EntityForm({
   entity,
   mode,
@@ -1157,10 +1471,10 @@ function EntityForm({
   const fields = formFields(entity, mode);
   const sourceId = mode === "edit" ? id : cloneFromId;
   const existing = useEntityRecord(entity.id, sourceId);
-  const [values, setValues] = useState7({});
-  const [saving, setSaving] = useState7(false);
-  const [error, setError] = useState7(void 0);
-  useEffect5(() => {
+  const [values, setValues] = useState8({});
+  const [saving, setSaving] = useState8(false);
+  const [error, setError] = useState8(void 0);
+  useEffect6(() => {
     if (!existing.data || !sourceId) return;
     if (mode === "edit") {
       setValues(existing.data);
@@ -1192,25 +1506,25 @@ function EntityForm({
     }
   };
   if (sourceId && existing.loading && !existing.data) {
-    return /* @__PURE__ */ jsx9(Spinner, {});
+    return /* @__PURE__ */ jsx11(Spinner, {});
   }
   const title = mode === "edit" ? t.editTitle(entity.label.singular) : cloneFromId ? t.cloneTitle(entity.label.singular) : t.newTitle(entity.label.singular);
-  return /* @__PURE__ */ jsxs8("section", { className: "max-w-2xl space-y-4", children: [
-    /* @__PURE__ */ jsxs8("header", { children: [
-      /* @__PURE__ */ jsxs8("button", { onClick: onCancel, className: "text-sm text-indigo-600 hover:underline", children: [
+  return /* @__PURE__ */ jsxs10("section", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs10("header", { children: [
+      /* @__PURE__ */ jsxs10("button", { onClick: onCancel, className: "text-sm text-indigo-600 hover:underline", children: [
         "\u2190 ",
         entity.label.plural
       ] }),
-      /* @__PURE__ */ jsx9("h1", { className: "text-lg font-semibold text-slate-900", children: title })
+      /* @__PURE__ */ jsx11("h1", { className: "text-lg font-semibold text-slate-900", children: title })
     ] }),
-    error && /* @__PURE__ */ jsx9(ErrorBanner, { error }),
-    /* @__PURE__ */ jsxs8("form", { onSubmit: submit, className: "space-y-4 rounded-lg border border-slate-200 bg-white p-5", children: [
-      fields.map((f) => /* @__PURE__ */ jsxs8("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxs8("label", { htmlFor: `field-${f.name}`, className: "block text-sm font-medium text-slate-700", children: [
+    error && /* @__PURE__ */ jsx11(ErrorBanner, { error }),
+    /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: "space-y-4 rounded-lg border border-slate-200 bg-white p-5", children: [
+      fields.map((f) => /* @__PURE__ */ jsxs10("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs10("label", { htmlFor: `field-${f.name}`, className: "block text-sm font-medium text-slate-700", children: [
           f.label,
-          f.required && /* @__PURE__ */ jsx9("span", { className: "ml-0.5 text-red-500", children: "*" })
+          f.required && /* @__PURE__ */ jsx11("span", { className: "ml-0.5 text-red-500", children: "*" })
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           FieldInput,
           {
             field: f,
@@ -1219,11 +1533,11 @@ function EntityForm({
             onChange: (next) => setValues((v) => ({ ...v, [f.name]: next }))
           }
         ),
-        f.form.helpText && /* @__PURE__ */ jsx9("p", { className: "text-xs text-slate-500", children: f.form.helpText })
+        f.form.helpText && /* @__PURE__ */ jsx11("p", { className: "text-xs text-slate-500", children: f.form.helpText })
       ] }, f.name)),
-      /* @__PURE__ */ jsxs8("div", { className: "flex justify-end gap-2 border-t border-slate-100 pt-4", children: [
-        /* @__PURE__ */ jsx9(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: saving, children: t.cancel }),
-        /* @__PURE__ */ jsx9(Button, { type: "submit", variant: "primary", disabled: saving, children: saving ? t.saving : mode === "create" ? t.create : t.save })
+      /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2 border-t border-slate-100 pt-4", children: [
+        /* @__PURE__ */ jsx11(Button, { type: "button", variant: "secondary", onClick: onCancel, disabled: saving, children: t.cancel }),
+        /* @__PURE__ */ jsx11(Button, { type: "submit", variant: "primary", disabled: saving, children: saving ? t.saving : mode === "create" ? t.create : t.save })
       ] })
     ] })
   ] });
@@ -1252,7 +1566,7 @@ function applyLabels(metadata, labels) {
 }
 
 // src/recents.ts
-import { useCallback as useCallback2, useState as useState8 } from "react";
+import { useCallback as useCallback2, useState as useState9 } from "react";
 var STORAGE_KEY = "maestro-admin:recents";
 var MAX_RECENTS = 8;
 function read(key) {
@@ -1272,7 +1586,7 @@ function write(key, ids) {
 }
 function useRecents(scope) {
   const key = scope ? `${STORAGE_KEY}:${scope}` : STORAGE_KEY;
-  const [recents, setRecents] = useState8(() => read(key));
+  const [recents, setRecents] = useState9(() => read(key));
   const push = useCallback2(
     (entityId) => {
       setRecents((prev) => {
@@ -1287,11 +1601,11 @@ function useRecents(scope) {
 }
 
 // src/components/MaestroAdmin.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function AdminShell({ title, labels }) {
   const { data, error, loading } = useMetadata();
   const t = useT();
-  const [view, setView] = useState9(void 0);
+  const [view, setView] = useState10(void 0);
   const { recents, push: pushRecent } = useRecents();
   const metadata = useMemo3(() => data ? applyLabels(data, labels) : void 0, [data, labels]);
   const entities = metadata?.entities ?? [];
@@ -1307,10 +1621,10 @@ function AdminShell({ title, labels }) {
     setView({ kind: "detail", entityId, id });
   };
   if (loading && !data) {
-    return /* @__PURE__ */ jsx10("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx10(Spinner, { label: t.loadingMetadata }) });
+    return /* @__PURE__ */ jsx12("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx12(Spinner, { label: t.loadingMetadata }) });
   }
-  return /* @__PURE__ */ jsx10(AdminEntitiesProvider, { value: entities, children: /* @__PURE__ */ jsxs9("div", { className: "flex h-screen overflow-hidden bg-white text-slate-800", children: [
-    /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(AdminEntitiesProvider, { value: entities, children: /* @__PURE__ */ jsxs11("div", { className: "flex h-screen overflow-hidden bg-white text-slate-800", children: [
+    /* @__PURE__ */ jsx12(
       Sidebar,
       {
         entities,
@@ -1321,9 +1635,9 @@ function AdminShell({ title, labels }) {
         onSelect: openEntity
       }
     ),
-    /* @__PURE__ */ jsxs9("main", { className: "flex-1 overflow-y-auto p-6", children: [
-      error && /* @__PURE__ */ jsx10(ErrorBanner, { error }),
-      activeEntity && effectiveView && effectiveView.kind === "list" && /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs11("main", { className: "flex-1 overflow-y-auto p-6", children: [
+      error && /* @__PURE__ */ jsx12(ErrorBanner, { error }),
+      activeEntity && effectiveView && effectiveView.kind === "list" && /* @__PURE__ */ jsx12(
         EntityList,
         {
           entity: activeEntity,
@@ -1334,7 +1648,7 @@ function AdminShell({ title, labels }) {
           onNavigate: navigateToRecord
         }
       ),
-      activeEntity && effectiveView?.kind === "detail" && /* @__PURE__ */ jsx10(
+      activeEntity && effectiveView?.kind === "detail" && /* @__PURE__ */ jsx12(
         EntityDetail,
         {
           entity: activeEntity,
@@ -1346,7 +1660,7 @@ function AdminShell({ title, labels }) {
           onNavigate: navigateToRecord
         }
       ),
-      activeEntity && (effectiveView?.kind === "create" || effectiveView?.kind === "edit") && /* @__PURE__ */ jsx10(
+      activeEntity && (effectiveView?.kind === "create" || effectiveView?.kind === "edit") && /* @__PURE__ */ jsx12(
         EntityForm,
         {
           entity: activeEntity,
@@ -1366,7 +1680,7 @@ function MaestroAdmin(props) {
     [props.client, props.apiUrl, props.headers]
   );
   const strings = useMemo3(() => stringsFor(props.locale ?? "en"), [props.locale]);
-  return /* @__PURE__ */ jsx10(AdminClientProvider, { value: client, children: /* @__PURE__ */ jsx10(I18nProvider, { value: strings, children: /* @__PURE__ */ jsx10(AdminShell, { title: props.title ?? "Maestro Admin", labels: props.labels }) }) });
+  return /* @__PURE__ */ jsx12(AdminClientProvider, { value: client, children: /* @__PURE__ */ jsx12(I18nProvider, { value: strings, children: /* @__PURE__ */ jsx12(AdminShell, { title: props.title ?? "Maestro Admin", labels: props.labels }) }) });
 }
 export {
   AdminClientProvider,
@@ -1376,9 +1690,11 @@ export {
   FieldInput,
   FieldValue,
   I18nProvider,
+  JsonInput,
   MaestroAdmin,
   MaestroApiError,
   MaestroClient,
+  ObjectValue,
   Sidebar,
   applyLabels,
   buildMenu,