@object-ui/app-shell 6.0.4 → 6.2.0

package/dist/views/metadata-admin/SchemaForm.js

@@ -0,0 +1,556 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * SchemaForm — minimal JSONSchema-driven form (Phase 3c).
+ *
+ * The framework's `/meta/types` endpoint returns a `schema` field per
+ * type, generated from Zod via `zod-to-json-schema`. We render that
+ * schema as a form so admins can edit *any* metadata type without
+ * the platform having to write a bespoke editor for each.
+ *
+ * Scope (MVP):
+ *   • string  → Input (or Textarea if `format: 'multiline'`)
+ *   • number  → Input type="number"
+ *   • boolean → Switch
+ *   • enum    → Select
+ *   • array of strings → tag editor (comma-separated for MVP)
+ *   • object  → recursive collapsed section
+ *   • anyOf / oneOf / unknown → JSON textarea fallback
+ *
+ * NOT covered (yet) — those types use bespoke editors registered via
+ * `registerMetadataResource()`:
+ *   • Permission matrix (rows × columns × actions)
+ *   • Object/Field designers
+ *   • View / dashboard / page canvas designers
+ *
+ * Error display:
+ *   • Pass `issues` in the shape `[{ path: 'a.b', message: '...' }, ...]`
+ *     to render inline error chips next to the offending fields.
+ *   • Matches the framework's `error.issues` envelope from `sendError`.
+ */
+import * as React from 'react';
+import { Input } from '@object-ui/components';
+import { Textarea } from '@object-ui/components';
+import { Label } from '@object-ui/components';
+import { Switch } from '@object-ui/components';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+import { Button } from '@object-ui/components';
+import { Plus, Trash2, ChevronDown, ChevronRight } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger, TabsContent, } from '@object-ui/components';
+import { evaluatePredicate } from './predicate';
+import { WIDGETS } from './widgets';
+/** Widgets that don't need a custom renderer — they overlay on the
+ * existing default control (textarea/input/etc) and just act as a hint. */
+const KNOWN_PASSTHROUGH_WIDGETS = new Set([
+    'text',
+    'textarea',
+    'number',
+    'switch',
+    'select',
+    'json',
+]);
+/**
+ * Infer widget name from FormFieldSpec.type (Data.FieldType) and schema.
+ * Priority: explicit widget > type-based inference > schema-based inference > default.
+ */
+function inferWidget(fieldSpec, schema) {
+    // 1. Explicit widget always wins
+    if (fieldSpec?.widget)
+        return fieldSpec.widget;
+    // 2. Infer from Data.FieldType
+    if (fieldSpec?.type) {
+        const t = fieldSpec.type;
+        // Text types
+        if (t === 'text' || t === 'email' || t === 'url' || t === 'phone' || t === 'password')
+            return 'text';
+        if (t === 'textarea' || t === 'markdown' || t === 'html' || t === 'richtext')
+            return 'textarea';
+        // Number types
+        if (t === 'number' || t === 'currency' || t === 'percent')
+            return 'number';
+        // Date/time
+        if (t === 'date' || t === 'datetime' || t === 'time')
+            return 'date-picker';
+        // Boolean
+        if (t === 'boolean' || t === 'toggle')
+            return 'switch';
+        // Selection
+        if (t === 'select' || t === 'radio')
+            return fieldSpec.multiple ? 'multiselect' : 'select';
+        if (t === 'multiselect' || t === 'checkboxes' || t === 'tags')
+            return 'string-tags';
+        // Embedded structured (composite/repeater handled natively in FieldControl
+        // BEFORE the WIDGETS registry — return the type name so the badge is
+        // accurate; FieldControl short-circuits before widget lookup).
+        if (t === 'composite')
+            return 'composite';
+        if (t === 'repeater')
+            return 'repeater';
+        // Relational
+        if (t === 'lookup' || t === 'master_detail')
+            return 'ref-object';
+        if (t === 'tree')
+            return 'ref-object';
+        // Media
+        if (t === 'image' || t === 'file' || t === 'avatar' || t === 'video' || t === 'audio')
+            return 'file-upload';
+        // Code/JSON
+        if (t === 'code')
+            return 'code';
+        if (t === 'json')
+            return 'json';
+        // Enhanced
+        if (t === 'location' || t === 'address')
+            return 'json';
+        if (t === 'color')
+            return 'color-picker';
+        if (t === 'rating')
+            return 'number';
+        if (t === 'slider')
+            return 'slider';
+        if (t === 'signature')
+            return 'signature';
+        if (t === 'qrcode')
+            return 'qrcode';
+        if (t === 'progress')
+            return 'number';
+        // Calculated
+        if (t === 'formula' || t === 'summary' || t === 'autonumber')
+            return 'text';
+        // Vector
+        if (t === 'vector')
+            return 'json';
+    }
+    // 3. Infer from JSON Schema
+    if (schema) {
+        const type = schema.type;
+        // Array of strings → string-tags
+        if (type === 'array' && schema.items?.type === 'string')
+            return 'string-tags';
+        // Array of objects → master-detail
+        if (type === 'array' && schema.items?.type === 'object')
+            return 'master-detail';
+        // Object → object-fields
+        if (type === 'object')
+            return 'object-fields';
+        // Boolean → switch
+        if (type === 'boolean')
+            return 'switch';
+        // Number → number
+        if (type === 'number' || type === 'integer')
+            return 'number';
+        // Enum → select
+        if (Array.isArray(schema.enum))
+            return 'select';
+        // String with format
+        if (type === 'string') {
+            if (schema.format === 'date' || schema.format === 'date-time')
+                return 'date-picker';
+            if (schema.format === 'email' || schema.format === 'uri' || schema.format === 'uri-reference')
+                return 'text';
+            if (schema.format === 'multiline')
+                return 'textarea';
+        }
+    }
+    // 4. Default fallback
+    return undefined;
+}
+export function SchemaForm({ schema, form, value, onChange, issues = [], hiddenFields = [], fieldOrder = [], readOnly = false, createMode = false, widgetContext, }) {
+    // No schema → synthesize one from the value's top-level keys so the
+    // form renderer can still produce a structured, labelled view (with
+    // proper read-only semantics) instead of falling back to a raw JSON
+    // dump. This handles metadata types the framework hasn't yet shipped
+    // a Zod schema for (`hook`, `trigger`, `validation`, etc.).
+    //
+    // Editable + truly unknown shape → keep the raw JSON editor as a
+    // last resort, since we can't safely guess primitive types for
+    // fields the user might add.
+    let effectiveSchema = schema;
+    if (!effectiveSchema || typeof effectiveSchema !== 'object') {
+        if (value && typeof value === 'object') {
+            effectiveSchema = inferSchemaFromValue(value);
+        }
+        else {
+            return (_jsx(RawJsonEditor, { value: value, onChange: onChange, readOnly: readOnly }));
+        }
+    }
+    // Resolve top-level object properties.
+    const props = (effectiveSchema.properties ?? {});
+    const required = Array.isArray(effectiveSchema.required) ? effectiveSchema.required : [];
+    const keys = orderKeys(Object.keys(props), fieldOrder).filter((k) => !hiddenFields.includes(k));
+    const issuesByPath = React.useMemo(() => {
+        var _a;
+        const map = {};
+        for (const i of issues) {
+            (map[_a = i.path] ?? (map[_a] = [])).push(i.message);
+        }
+        return map;
+    }, [issues]);
+    const v = value ?? {};
+    function setField(key, fieldValue) {
+        const next = { ...v, [key]: fieldValue };
+        if (fieldValue === undefined || fieldValue === '') {
+            delete next[key];
+        }
+        onChange(next);
+    }
+    // If the framework provided a FormView layout, render sections (tabbed
+    // or simple). Otherwise fall through to the flat property list.
+    if (form?.sections?.length) {
+        return (_jsx(SectionedSchemaForm, { form: form, props: props, required: required, hiddenFields: hiddenFields, issuesByPath: issuesByPath, value: v, readOnly: readOnly, createMode: createMode, widgetContext: widgetContext, onChange: setField }));
+    }
+    return (_jsx("div", { className: "space-y-4", children: keys.map((key) => (_jsx(FieldRow, { name: key, schema: props[key], value: v[key], required: required.includes(key), issues: issuesByPath[key], readOnly: readOnly, widgetContext: widgetContext, formData: v, onChange: (val) => setField(key, val) }, key))) }));
+}
+/* ----- sectioned layout (FormView spec) ---------------------------------- */
+function normaliseField(f) {
+    return typeof f === 'string' ? { field: f } : f;
+}
+function SectionedSchemaForm({ form, props, required, hiddenFields, issuesByPath, value, readOnly, createMode, widgetContext, onChange, }) {
+    const sections = (form.sections ?? []).filter((s) => !s.visibleOn || evaluatePredicate(s.visibleOn, { data: value }));
+    // Decide whether to render as tabs or stacked sections.
+    const isTabbed = form.type === 'tabbed' && sections.length > 1;
+    const renderSection = (s, idx) => {
+        const fields = s.fields
+            .map(normaliseField)
+            .filter((f) => {
+            if (f.hidden)
+                return false;
+            if (hiddenFields.includes(f.field))
+                return false;
+            if (f.visibleOn && !evaluatePredicate(f.visibleOn, { data: value })) {
+                return false;
+            }
+            return true;
+        });
+        if (fields.length === 0)
+            return null;
+        const cols = s.columns ?? 1;
+        return (_jsxs("section", { className: "space-y-3 rounded-md border border-border/40 bg-card/30 p-4", children: [s.label && (_jsxs("header", { children: [_jsx("h3", { className: "text-sm font-semibold text-foreground/90", children: s.label }), s.description && (_jsx("p", { className: "text-xs text-muted-foreground", children: s.description }))] })), _jsx("div", { className: "grid gap-4", style: {
+                        gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+                    }, children: fields.map((f) => {
+                        const propSchema = props[f.field];
+                        if (!propSchema) {
+                            return (_jsxs("div", { className: "rounded border border-dashed border-amber-500/40 bg-amber-500/5 p-2 text-xs text-amber-700 dark:text-amber-300", style: { gridColumn: `span ${f.colSpan ?? 1}` }, children: ["\u26A0\uFE0F Field ", _jsx("code", { children: f.field }), " declared in form layout but missing from schema. Skipping."] }, f.field));
+                        }
+                        return (_jsx("div", { style: { gridColumn: `span ${f.colSpan ?? 1}` }, children: _jsx(FieldRow, { name: f.field, schema: {
+                                    ...propSchema,
+                                    ...(f.label ? { title: f.label } : {}),
+                                    ...(f.helpText ? { description: f.helpText } : {}),
+                                    ...(f.placeholder ? { placeholder: f.placeholder } : {}),
+                                }, value: value[f.field], required: f.required ?? required.includes(f.field), issues: issuesByPath[f.field], readOnly: readOnly || f.readonly || (f.immutable && !createMode), fieldSpec: f, widgetContext: widgetContext, formData: value, onChange: (val) => onChange(f.field, val) }) }, f.field));
+                    }) })] }, idx));
+    };
+    if (isTabbed) {
+        const tabSections = sections.filter((s) => s.fields
+            .map(normaliseField)
+            .some((f) => !f.hidden &&
+            !hiddenFields.includes(f.field) &&
+            (!f.visibleOn ||
+                evaluatePredicate(f.visibleOn, { data: value }))));
+        if (tabSections.length === 0)
+            return null;
+        const defaultTab = (tabSections[0].label ?? 'section-0').toLowerCase();
+        return (_jsxs(Tabs, { defaultValue: defaultTab, className: "w-full", children: [_jsx(TabsList, { className: "flex flex-wrap gap-1", children: tabSections.map((s, i) => (_jsx(TabsTrigger, { value: (s.label ?? `section-${i}`).toLowerCase(), children: s.label ?? `Section ${i + 1}` }, i))) }), tabSections.map((s, i) => (_jsx(TabsContent, { value: (s.label ?? `section-${i}`).toLowerCase(), className: "mt-4", children: renderSection(s, i) }, i)))] }));
+    }
+    return _jsx("div", { className: "space-y-4", children: sections.map(renderSection) });
+}
+/* ----- inner field row ---------------------------------------------------- */
+function FieldRow({ name, schema, value, required, issues, readOnly, fieldSpec, widgetContext, formData, onChange, }) {
+    const label = schema?.title || prettify(name);
+    const description = schema?.description;
+    const id = `mdf-${name}`;
+    // Auto-infer widget from fieldSpec.type or schema
+    const widget = inferWidget(fieldSpec, schema);
+    // Booleans with a schema default are never *missing* — don't show the
+    // required asterisk (which would otherwise lie about user obligation).
+    const isBoolean = schema?.type === 'boolean' || widget === 'switch';
+    const hasDefault = schema?.default !== undefined;
+    const showRequiredStar = required && !(isBoolean && hasDefault);
+    // Only show the machine name when it materially differs from the
+    // prettified label (e.g. `is_active` → "Is Active" matches, hide it;
+    // `rls` → "Rls" doesn't, show it). Cuts ~50% of the visual noise.
+    const labelMatchesName = prettify(name).toLowerCase() === label.toLowerCase();
+    // Booleans render inline (label · description · switch) on one row to
+    // save vertical space and feel like a real settings panel.
+    if (isBoolean) {
+        return (_jsxs("div", { className: "flex items-start justify-between gap-3 py-1.5", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs(Label, { htmlFor: id, className: "text-sm font-medium cursor-pointer", children: [label, showRequiredStar && _jsx("span", { className: "text-destructive ml-0.5", children: "*" })] }), description && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description })), issues?.map((m, i) => (_jsx("div", { className: "text-xs text-destructive mt-0.5", children: m }, i)))] }), _jsx(FieldControl, { id: id, schema: schema, value: value, onChange: onChange, readOnly: readOnly, widget: widget, fieldSpec: fieldSpec, widgetContext: widgetContext, formData: formData })] }));
+    }
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx("div", { className: "flex items-center justify-between gap-2", children: _jsxs(Label, { htmlFor: id, className: "text-sm font-medium", children: [label, showRequiredStar && _jsx("span", { className: "text-destructive ml-0.5", children: "*" }), !labelMatchesName && (_jsx("code", { className: "ml-2 text-[10px] font-mono text-muted-foreground/70", title: "Machine name", children: name }))] }) }), _jsx(FieldControl, { id: id, schema: schema, value: value, onChange: onChange, readOnly: readOnly, widget: widget, fieldSpec: fieldSpec, widgetContext: widgetContext, formData: formData }), description && (_jsx("div", { className: "text-xs text-muted-foreground", children: description })), issues?.map((m, i) => (_jsx("div", { className: "text-xs text-destructive", children: m }, i)))] }));
+}
+function FieldControl({ id, schema, value, onChange, readOnly, widget, fieldSpec, widgetContext, formData, }) {
+    // Composite/repeater are first-class structured types — render natively
+    // with recursive FieldRow calls so all UI features (widgets, options,
+    // visibility, readonly) work uniformly at every nesting level.
+    // When `fields` is omitted, fall back to schema-derived sub-fields
+    // (all schema.properties / items.properties) so authors don't have to
+    // enumerate every sub-property by hand.
+    if (fieldSpec?.type === 'composite') {
+        const fields = fieldSpec.fields?.length
+            ? fieldSpec.fields
+            : derivePropertyNames(schema);
+        return (_jsx(CompositeField, { value: value, fields: fields, schema: schema, readOnly: readOnly, widgetContext: widgetContext, onChange: onChange }));
+    }
+    if (fieldSpec?.type === 'repeater') {
+        const itemSchema = schema?.items ?? {};
+        const fields = fieldSpec.fields?.length
+            ? fieldSpec.fields
+            : derivePropertyNames(itemSchema);
+        return (_jsx(RepeaterField, { value: value, fields: fields, schema: schema, readOnly: readOnly, widgetContext: widgetContext, widget: fieldSpec.widget, onChange: onChange }));
+    }
+    // Widget hint takes precedence: try the registry first, then the
+    // passthrough hint list, then fall back to JSON with an inline hint.
+    if (widget) {
+        const Renderer = WIDGETS[widget];
+        if (Renderer) {
+            return (_jsx(Renderer, { id: id, schema: schema, value: value, onChange: onChange, readOnly: readOnly, context: widgetContext, fieldSpec: fieldSpec, formData: formData }));
+        }
+        if (!KNOWN_PASSTHROUGH_WIDGETS.has(widget)) {
+            return (_jsxs("div", { className: "space-y-1", children: [_jsx(RawJsonEditor, { value: value, onChange: (v) => onChange(v), readOnly: readOnly }), _jsxs("div", { className: "text-[10px] text-muted-foreground", children: ["widget ", _jsx("code", { className: "font-mono", children: widget }), " \u2014 falling back to JSON until a custom renderer is registered."] })] }));
+        }
+    }
+    // Enum / Select — fieldSpec.options takes precedence over schema.enum.
+    const options = fieldSpec?.options;
+    const enumValues = schema?.enum ?? undefined;
+    if (Array.isArray(options) && options.length > 0) {
+        // Render from fieldSpec.options (Data.SelectOption[])
+        return (_jsxs(Select, { value: value == null ? '' : String(value), onValueChange: (v) => onChange(v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: "Select\u2026" }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsxs(SelectItem, { value: opt.value, children: [opt.label, opt.color && (_jsx("span", { className: "ml-2 inline-block h-3 w-3 rounded", style: { backgroundColor: opt.color } }))] }, opt.value))) })] }));
+    }
+    if (Array.isArray(enumValues) && enumValues.length > 0) {
+        // Fallback to schema.enum
+        return (_jsxs(Select, { value: value == null ? '' : String(value), onValueChange: (v) => onChange(v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: "Select\u2026" }) }), _jsx(SelectContent, { children: enumValues.map((opt) => (_jsx(SelectItem, { value: String(opt), children: String(opt) }, String(opt)))) })] }));
+    }
+    // Boolean → Switch (no redundant "true/false" text; the toggle state
+    // already conveys the value).
+    if (schema?.type === 'boolean') {
+        return (_jsx(Switch, { id: id, checked: !!value, onCheckedChange: (c) => onChange(c), disabled: readOnly }));
+    }
+    // Number / integer → numeric input with min/max from fieldSpec.
+    if (schema?.type === 'number' || schema?.type === 'integer') {
+        const min = fieldSpec?.min;
+        const max = fieldSpec?.max;
+        return (_jsx(Input, { id: id, type: "number", value: value == null ? '' : String(value), min: min, max: max, onChange: (e) => {
+                const raw = e.target.value;
+                if (raw === '')
+                    return onChange(undefined);
+                const n = schema.type === 'integer' ? parseInt(raw, 10) : Number(raw);
+                onChange(Number.isFinite(n) ? n : undefined);
+            }, readOnly: readOnly }));
+    }
+    // String → Input (or Textarea if it looks long), with maxLength from fieldSpec.
+    if (schema?.type === 'string') {
+        const maxLength = fieldSpec?.maxLength;
+        const long = schema?.format === 'multiline' ||
+            schema?.contentMediaType === 'text/markdown' ||
+            (typeof value === 'string' && value.length > 80);
+        if (long) {
+            return (_jsx(Textarea, { id: id, rows: 4, value: value ?? '', maxLength: maxLength, onChange: (e) => onChange(e.target.value || undefined), readOnly: readOnly }));
+        }
+        return (_jsx(Input, { id: id, value: value ?? '', maxLength: maxLength, onChange: (e) => onChange(e.target.value || undefined), readOnly: readOnly }));
+    }
+    // Array of primitives → comma-separated tag editor (MVP).
+    if (schema?.type === 'array') {
+        const itemsSchema = schema?.items ?? {};
+        const isPrimitive = itemsSchema.type === 'string' ||
+            itemsSchema.type === 'number' ||
+            itemsSchema.type === 'integer';
+        if (isPrimitive) {
+            const arr = Array.isArray(value) ? value : [];
+            return (_jsx(Input, { id: id, value: arr.map(String).join(', '), placeholder: "comma, separated, values", onChange: (e) => {
+                    const raw = e.target.value;
+                    const parts = raw
+                        .split(',')
+                        .map((s) => s.trim())
+                        .filter(Boolean);
+                    if (itemsSchema.type === 'number' || itemsSchema.type === 'integer') {
+                        onChange(parts.map((p) => Number(p)).filter((n) => Number.isFinite(n)));
+                    }
+                    else {
+                        onChange(parts);
+                    }
+                }, readOnly: readOnly }));
+        }
+    }
+    // Object / complex → JSON fallback so admins can still edit.
+    return _jsx(RawJsonEditor, { value: value, onChange: onChange, readOnly: readOnly, small: true });
+}
+/* ----- composite / repeater (embedded structured values) ----------------- */
+/**
+ * Resolve the JSONSchema fragment for a sub-field of a composite/repeater.
+ * Looks under parent `schema.properties[subName]` (composite) or
+ * `schema.items.properties[subName]` (repeater). Falls back to `{}`.
+ */
+function pickSubSchema(parent, kind, subName) {
+    if (!parent)
+        return {};
+    const props = kind === 'composite'
+        ? parent.properties
+        : parent.items?.properties;
+    return props?.[subName] ?? {};
+}
+function CompositeField({ value, fields, schema, readOnly, widgetContext, onChange, }) {
+    const obj = (value && typeof value === 'object' && !Array.isArray(value))
+        ? value
+        : {};
+    const specs = fields.map(normaliseField);
+    return (_jsx("div", { className: "rounded-md border border-border/50 bg-muted/20 p-3 space-y-3", children: specs.map((spec) => {
+            const subSchema = pickSubSchema(schema, 'composite', spec.field);
+            return (_jsx(FieldRow, { name: spec.field, schema: subSchema, value: obj[spec.field], required: Boolean(spec.required), readOnly: readOnly || spec.readonly, fieldSpec: spec, widgetContext: widgetContext, formData: obj, onChange: (v) => onChange({ ...obj, [spec.field]: v }) }, spec.field));
+        }) }));
+}
+function RepeaterField({ value, fields, schema, readOnly, widgetContext, widget, onChange, }) {
+    const rows = Array.isArray(value) ? value : [];
+    const specs = fields.map(normaliseField);
+    const [openIdx, setOpenIdx] = React.useState(null);
+    // Default to card layout (one fieldset per row). `widget: 'grid'` opts
+    // into compact inline-table layout for short, atomic sub-fields.
+    const useGrid = widget === 'grid' || widget === 'table';
+    const update = (i, patch) => {
+        const next = rows.map((r, idx) => (idx === i ? { ...r, ...patch } : r));
+        onChange(next);
+    };
+    const remove = (i) => onChange(rows.filter((_, idx) => idx !== i));
+    const add = () => {
+        const blank = {};
+        specs.forEach((s) => { blank[s.field] = undefined; });
+        onChange([...rows, blank]);
+        setOpenIdx(rows.length);
+    };
+    if (useGrid) {
+        return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded-md border border-border/50", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40", children: _jsxs("tr", { children: [specs.map((s) => (_jsxs("th", { className: "px-2 py-1.5 text-left text-xs font-medium", children: [s.label || prettify(s.field), s.required && _jsx("span", { className: "text-destructive ml-0.5", children: "*" })] }, s.field))), !readOnly && _jsx("th", { className: "w-8" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: specs.length + 1, className: "px-2 py-3 text-center text-xs text-muted-foreground", children: "No items. Click + to add." }) })), rows.map((row, idx) => (_jsxs("tr", { className: "border-t border-border/30 align-top", children: [specs.map((s) => {
+                                                const sub = pickSubSchema(schema, 'repeater', s.field);
+                                                return (_jsx("td", { className: "p-1.5", children: _jsx(FieldControl, { id: `rep-${idx}-${s.field}`, schema: sub, value: row?.[s.field], readOnly: readOnly || s.readonly, widget: inferWidget(s, sub), fieldSpec: s, widgetContext: widgetContext, formData: row, onChange: (v) => update(idx, { [s.field]: v }) }) }, s.field));
+                                            }), !readOnly && (_jsx("td", { className: "p-1.5 text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(idx), className: "h-7 w-7 p-0", "aria-label": "Remove", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }))] }, idx)))] })] }) }), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Add"] }))] }));
+    }
+    // Card layout — one collapsible fieldset per row.
+    return (_jsxs("div", { className: "space-y-2", children: [rows.length === 0 && (_jsx("div", { className: "rounded-md border border-dashed border-border/50 px-3 py-4 text-center text-xs text-muted-foreground", children: "No items yet." })), rows.map((row, idx) => {
+                const isOpen = openIdx === idx;
+                const summary = specs
+                    .map((s) => row?.[s.field])
+                    .find((v) => v != null && v !== '');
+                return (_jsxs("div", { className: "rounded-md border border-border/50 bg-muted/10", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-2 py-1.5 border-b border-border/30", children: [_jsxs("button", { type: "button", onClick: () => setOpenIdx(isOpen ? null : idx), className: "flex items-center gap-1.5 text-sm font-medium text-left flex-1 min-w-0", children: [isOpen ? _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) : _jsx(ChevronRight, { className: "h-3.5 w-3.5" }), _jsxs("span", { className: "truncate", children: ["#", idx + 1, summary != null ? ` — ${String(summary)}` : ''] })] }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => remove(idx), className: "h-7 w-7 p-0", "aria-label": "Remove", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }), isOpen && (_jsx("div", { className: "p-3 space-y-3", children: specs.map((s) => {
+                                const sub = pickSubSchema(schema, 'repeater', s.field);
+                                return (_jsx(FieldRow, { name: s.field, schema: sub, value: row?.[s.field], required: Boolean(s.required), readOnly: readOnly || s.readonly, fieldSpec: s, widgetContext: widgetContext, formData: row, onChange: (v) => update(idx, { [s.field]: v }) }, s.field));
+                            }) }))] }, idx));
+            }), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: add, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Add item"] }))] }));
+}
+/* ----- raw JSON fallback -------------------------------------------------- */
+function RawJsonEditor({ value, onChange, readOnly, small, }) {
+    const [text, setText] = React.useState(() => safeStringify(value));
+    const [error, setError] = React.useState(null);
+    // Re-sync when external value changes (e.g. Reset Overlay).
+    React.useEffect(() => {
+        setText(safeStringify(value));
+        setError(null);
+    }, [JSON.stringify(value)]); // intentional: stringify-deep-equal
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Textarea, { rows: small ? 4 : 12, className: "font-mono text-xs", value: text, readOnly: readOnly, onChange: (e) => {
+                    const next = e.target.value;
+                    setText(next);
+                    if (!next.trim()) {
+                        setError(null);
+                        onChange(undefined);
+                        return;
+                    }
+                    try {
+                        const parsed = JSON.parse(next);
+                        setError(null);
+                        onChange(parsed);
+                    }
+                    catch (err) {
+                        setError(err?.message ?? 'Invalid JSON');
+                    }
+                } }), error && _jsx("div", { className: "text-xs text-destructive", children: error })] }));
+}
+/**
+ * Synthesize a minimal JSON Schema by introspecting a runtime value.
+ *
+ * Used as the fallback when the framework hasn't shipped a Zod schema
+ * for a metadata type (e.g. `hook`, `trigger`, `validation`). The
+ * resulting schema lets `SchemaForm` render a real labelled form
+ * (respecting `readOnly`) instead of bailing out to a raw JSON dump.
+ *
+ * Types are guessed conservatively from the value: scalars become
+ * `string` / `number` / `boolean`; arrays of strings become string
+ * tags; arrays of objects become master-detail tables; objects become
+ * nested JSON regions. Anything indeterminate falls back to `string`
+ * so the field still renders.
+ */
+function inferSchemaFromValue(value) {
+    const properties = {};
+    for (const [k, v] of Object.entries(value)) {
+        if (k.startsWith('_'))
+            continue;
+        if (v === null || v === undefined) {
+            properties[k] = { type: 'string' };
+        }
+        else if (typeof v === 'string') {
+            properties[k] = v.length > 80 || v.includes('\n')
+                ? { type: 'string', format: 'multiline' }
+                : { type: 'string' };
+        }
+        else if (typeof v === 'number') {
+            properties[k] = { type: Number.isInteger(v) ? 'integer' : 'number' };
+        }
+        else if (typeof v === 'boolean') {
+            properties[k] = { type: 'boolean' };
+        }
+        else if (Array.isArray(v)) {
+            if (v.length > 0 && typeof v[0] === 'string') {
+                properties[k] = { type: 'array', items: { type: 'string' } };
+            }
+            else if (v.length > 0 && typeof v[0] === 'object' && v[0] !== null) {
+                const sample = v[0];
+                const itemProps = {};
+                for (const key of Object.keys(sample)) {
+                    itemProps[key] = { type: 'string' };
+                }
+                properties[k] = {
+                    type: 'array',
+                    items: { type: 'object', properties: itemProps },
+                };
+            }
+            else {
+                properties[k] = { type: 'array', items: { type: 'string' } };
+            }
+        }
+        else if (typeof v === 'object') {
+            properties[k] = { type: 'object', additionalProperties: true };
+        }
+        else {
+            properties[k] = { type: 'string' };
+        }
+    }
+    return { type: 'object', properties, additionalProperties: true };
+}
+/* ----- helpers ------------------------------------------------------------ */
+function safeStringify(v) {
+    if (v === undefined)
+        return '';
+    try {
+        return JSON.stringify(v, null, 2);
+    }
+    catch {
+        return String(v);
+    }
+}
+function prettify(key) {
+    return key
+        .replace(/[_-]+/g, ' ')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function orderKeys(keys, preferred) {
+    if (!preferred.length)
+        return keys;
+    const set = new Set(keys);
+    const head = preferred.filter((k) => set.has(k));
+    const tail = keys.filter((k) => !preferred.includes(k));
+    return [...head, ...tail];
+}
+/**
+ * Derive a fields[] list for `composite` / `repeater` from a JSON schema.
+ * Used when the form author hasn't explicitly enumerated sub-fields.
+ */
+function derivePropertyNames(schema) {
+    const props = (schema?.properties ?? {});
+    return Object.keys(props);
+}

package/dist/views/metadata-admin/default-schemas.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Register fallback schemas for every writable type. Idempotent — uses
+ * `registerMetadataResource` so any prior registration (e.g. a bespoke
+ * EditPage from PermissionMatrixEditor) is merged via the engine.
+ */
+export declare function registerDefaultMetadataSchemas(): void;