@object-ui/app-shell 6.2.3 → 7.1.0

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 /**
  * Built-in widget renderers for SchemaForm.
@@ -19,28 +19,35 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * SchemaForm.tsx and prefetch it in ResourceEditPage.
  */
 import * as React from 'react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Input, Button, } from '@object-ui/components';
-import { Plus, Trash2 } from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Input, Button, Label, Switch, LazyIcon, toKebabIconName, Popover, PopoverTrigger, PopoverContent, FilterBuilder, Dialog, DialogContent, DialogHeader, DialogTitle, } from '@object-ui/components';
+import { ChevronDown, ChevronsUpDown, ChevronUp, Eye, EyeOff, Plus, Search, Trash2 } from 'lucide-react';
+// @ts-ignore - lucide-react has no `exports` field; subpath types live alongside dynamic.mjs
+import { iconNames } from 'lucide-react/dynamic.mjs';
+import { detectLocale, t, tFormat } from './i18n';
+import { ColorVariantPicker } from './color-variant-field';
+import { ConditionBuilder } from './inspectors/ConditionBuilder';
 /* -------------------------------------------------------------------------- */
 /* ref:object — pick an object by name                                        */
 /* -------------------------------------------------------------------------- */
 function RefObjectWidget({ id, value, onChange, readOnly, context, }) {
+    const locale = detectLocale();
     const names = context?.objectNames ?? [];
     const v = value == null ? '' : String(value);
     if (context?.objectsLoading) {
-        return (_jsx(Input, { id: id, value: v, disabled: true, placeholder: "Loading objects\u2026" }));
+        return (_jsx(Input, { id: id, value: v, disabled: true, placeholder: t('engine.form.loadingObjects', locale) }));
     }
     // If list is empty (e.g. no objects defined yet), fall back to a
     // freeform text input so the user can still type a value.
     if (names.length === 0) {
-        return (_jsx(Input, { id: id, value: v, disabled: readOnly, onChange: (e) => onChange(e.target.value || undefined), placeholder: "object_name (no objects detected)" }));
+        return (_jsx(Input, { id: id, value: v, disabled: readOnly, onChange: (e) => onChange(e.target.value || undefined), placeholder: t('engine.form.noObjects', locale) }));
     }
-    return (_jsxs(Select, { value: v, onValueChange: (next) => onChange(next || undefined), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: "Select object\u2026" }) }), _jsx(SelectContent, { children: names.map((n) => (_jsx(SelectItem, { value: n, children: n }, n))) })] }));
+    return (_jsxs(Select, { value: v, onValueChange: (next) => onChange(next || undefined), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: t('engine.form.selectObject', locale) }) }), _jsx(SelectContent, { children: names.map((n) => (_jsx(SelectItem, { value: n, children: n }, n))) })] }));
 }
 /* -------------------------------------------------------------------------- */
 /* object-selector — multi-select object picker                               */
 /* -------------------------------------------------------------------------- */
 function ObjectSelectorWidget({ id, value, onChange, readOnly, context, fieldSpec, }) {
+    const locale = detectLocale();
     const names = context?.objectNames ?? [];
     const multiple = fieldSpec?.multiple ?? false;
     // Parse value: string[], string (comma-separated), or empty
@@ -70,14 +77,15 @@ function ObjectSelectorWidget({ id, value, onChange, readOnly, context, fieldSpe
         onChange(multiple ? newSelection : '');
     };
     if (context?.objectsLoading) {
-        return _jsx(Input, { id: id, value: "Loading objects...", readOnly: true, disabled: true });
+        return _jsx(Input, { id: id, value: t('engine.form.loadingObjects', locale), readOnly: true, disabled: true });
     }
-    return (_jsxs("div", { className: "space-y-2", children: [selectedValues.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map(obj => (_jsxs("div", { className: "inline-flex items-center gap-1 rounded bg-secondary px-2 py-1 text-sm", children: [_jsx("span", { children: obj }), !readOnly && (_jsx("button", { type: "button", onClick: () => handleRemove(obj), className: "text-muted-foreground hover:text-foreground", children: "\u00D7" }))] }, obj))) })), _jsxs(Select, { value: "", onValueChange: handleToggle, disabled: readOnly || names.length === 0, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: multiple ? "Add objects..." : "Select object..." }) }), _jsx(SelectContent, { children: names.map(name => (_jsxs(SelectItem, { value: name, disabled: !multiple && selectedValues.includes(name), children: [name, selectedValues.includes(name) && ' ✓'] }, name))) })] })] }));
+    return (_jsxs("div", { className: "space-y-2", children: [selectedValues.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map(obj => (_jsxs("div", { className: "inline-flex items-center gap-1 rounded bg-secondary px-2 py-1 text-sm", children: [_jsx("span", { children: obj }), !readOnly && (_jsx("button", { type: "button", onClick: () => handleRemove(obj), className: "text-muted-foreground hover:text-foreground", children: "\u00D7" }))] }, obj))) })), _jsxs(Select, { value: "", onValueChange: handleToggle, disabled: readOnly || names.length === 0, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: multiple ? t('engine.form.addObjects', locale) : t('engine.form.selectObjectDots', locale) }) }), _jsx(SelectContent, { children: names.map(name => (_jsxs(SelectItem, { value: name, disabled: !multiple && selectedValues.includes(name), children: [name, selectedValues.includes(name) && ' ✓'] }, name))) })] })] }));
 }
 /* -------------------------------------------------------------------------- */
 /* field-selector — smart field picker (depends on selected object)          */
 /* -------------------------------------------------------------------------- */
 function FieldSelectorWidget({ id, value, onChange, readOnly, fieldSpec, formData, }) {
+    const locale = detectLocale();
     const [fields, setFields] = React.useState([]);
     const [loading, setLoading] = React.useState(false);
     // Resolve dependency: fieldSpec.dependsOn or fieldSpec.reference or 'objectName'
@@ -131,20 +139,21 @@ function FieldSelectorWidget({ id, value, onChange, readOnly, fieldSpec, formDat
         onChange(multiple ? newSelection : '');
     };
     if (!objectName) {
-        return _jsx(Input, { id: id, value: "(Select an object first)", readOnly: true, disabled: true });
+        return _jsx(Input, { id: id, value: t('engine.form.selectObjectFirst', locale), readOnly: true, disabled: true });
     }
     if (loading) {
-        return _jsx(Input, { id: id, value: "Loading fields...", readOnly: true, disabled: true });
+        return _jsx(Input, { id: id, value: t('engine.form.loadingFields', locale), readOnly: true, disabled: true });
     }
     return (_jsxs("div", { className: "space-y-2", children: [selectedValues.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map(field => {
                     const fieldMeta = fields.find(f => f.name === field);
                     return (_jsxs("div", { className: "inline-flex items-center gap-1 rounded bg-secondary px-2 py-1 text-sm", children: [_jsx("span", { children: fieldMeta?.label || field }), _jsx("code", { className: "text-xs text-muted-foreground", children: fieldMeta?.type }), !readOnly && (_jsx("button", { type: "button", onClick: () => handleRemove(field), className: "text-muted-foreground hover:text-foreground", children: "\u00D7" }))] }, field));
-                }) })), _jsxs(Select, { value: "", onValueChange: handleToggle, disabled: readOnly || fields.length === 0, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: multiple ? "Add fields..." : "Select field..." }) }), _jsx(SelectContent, { children: fields.map(f => (_jsx(SelectItem, { value: f.name, disabled: !multiple && selectedValues.includes(f.name), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: f.label || f.name }), _jsx("code", { className: "text-xs text-muted-foreground", children: f.type }), selectedValues.includes(f.name) && ' ✓'] }) }, f.name))) })] })] }));
+                }) })), _jsxs(Select, { value: "", onValueChange: handleToggle, disabled: readOnly || fields.length === 0, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: multiple ? t('engine.form.addFields', locale) : t('engine.form.selectFieldDots', locale) }) }), _jsx(SelectContent, { children: fields.map(f => (_jsx(SelectItem, { value: f.name, disabled: !multiple && selectedValues.includes(f.name), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: f.label || f.name }), _jsx("code", { className: "text-xs text-muted-foreground", children: f.type }), selectedValues.includes(f.name) && ' ✓'] }) }, f.name))) })] })] }));
 }
 /* -------------------------------------------------------------------------- */
 /* master-detail — inline row editor for array-of-object fields               */
 /* -------------------------------------------------------------------------- */
 function MasterDetailWidget({ schema, value, onChange, readOnly, context, }) {
+    const locale = detectLocale();
     // Unwrap anyOf/oneOf: pick the first array-of-object branch.
     let resolved = schema;
     if (resolved?.anyOf || resolved?.oneOf) {
@@ -160,7 +169,7 @@ function MasterDetailWidget({ schema, value, onChange, readOnly, context, }) {
     const cols = Object.keys(itemProps);
     if (cols.length === 0) {
         // Falls back to JSON if the array items aren't a typed object.
-        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", children: ["master-detail widget requires ", _jsx("code", { children: "items.properties" }), " on the JSON schema (or an ", _jsx("code", { children: "anyOf" }), " branch that has them)."] }));
+        return (_jsx("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", children: t('engine.form.masterDetailSchemaError', locale) }));
     }
     function updateRow(idx, patch) {
         const next = rows.slice();
@@ -175,7 +184,7 @@ function MasterDetailWidget({ schema, value, onChange, readOnly, context, }) {
         next.splice(idx, 1);
         onChange(next);
     }
-    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded border border-border/40", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40", children: _jsxs("tr", { children: [cols.map((c) => (_jsxs("th", { className: "px-2 py-1.5 text-left text-xs font-medium text-muted-foreground", children: [itemProps[c]?.title ?? c, required.has(c) && (_jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }, c))), _jsx("th", { className: "w-8" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: cols.length + 1, className: "px-2 py-3 text-center text-xs text-muted-foreground", children: "No rows. Click + to add." }) })), rows.map((row, idx) => (_jsxs("tr", { className: "border-t border-border/30", children: [cols.map((c) => (_jsx("td", { className: "p-1", children: _jsx(RowCell, { schema: itemProps[c], value: (row ?? {})[c], readOnly: readOnly, context: context, onChange: (v) => updateRow(idx, { [c]: v }) }) }, c))), _jsx("td", { className: "p-1 text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeRow(idx), disabled: readOnly, className: "h-7 w-7 p-0", "aria-label": "Remove row", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })] }, idx)))] })] }) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addRow, disabled: readOnly, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Add row"] })] }));
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "overflow-x-auto rounded border border-border/40", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40", children: _jsxs("tr", { children: [cols.map((c) => (_jsxs("th", { className: "px-2 py-1.5 text-left text-xs font-medium text-muted-foreground", children: [itemProps[c]?.title ?? c, required.has(c) && (_jsx("span", { className: "text-destructive ml-0.5", children: "*" }))] }, c))), _jsx("th", { className: "w-8" })] }) }), _jsxs("tbody", { children: [rows.length === 0 && (_jsx("tr", { children: _jsx("td", { colSpan: cols.length + 1, className: "px-2 py-3 text-center text-xs text-muted-foreground", children: t('engine.form.noRows', locale) }) })), rows.map((row, idx) => (_jsxs("tr", { className: "border-t border-border/30", children: [cols.map((c) => (_jsx("td", { className: "p-1", children: _jsx(RowCell, { schema: itemProps[c], value: (row ?? {})[c], readOnly: readOnly, context: context, onChange: (v) => updateRow(idx, { [c]: v }) }) }, c))), _jsx("td", { className: "p-1 text-right", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => removeRow(idx), disabled: readOnly, className: "h-7 w-7 p-0", "aria-label": t('engine.form.removeRow', locale), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })] }, idx)))] })] }) }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: addRow, disabled: readOnly, children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " ", t('engine.form.addRow', locale)] })] }));
 }
 function RowCell({ schema, value, readOnly, context, onChange, }) {
     // ref:object hint inside a row cell
@@ -205,6 +214,7 @@ function RowCell({ schema, value, readOnly, context, onChange, }) {
 /* string-tags — chip input for string[] (e.g. searchableFields)              */
 /* -------------------------------------------------------------------------- */
 function StringTagsWidget({ id, value, onChange, readOnly, }) {
+    const locale = detectLocale();
     const tags = Array.isArray(value) ? value : [];
     const [draft, setDraft] = React.useState('');
     function add(raw) {
@@ -226,7 +236,7 @@ function StringTagsWidget({ id, value, onChange, readOnly, }) {
         next.splice(idx, 1);
         onChange(next);
     }
-    return (_jsx("div", { className: "rounded border border-input bg-background p-1.5", children: _jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [tags.map((t, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs", children: [_jsx("span", { className: "font-mono", children: t }), !readOnly && (_jsx("button", { type: "button", "aria-label": `Remove ${t}`, onClick: () => remove(i), className: "text-muted-foreground hover:text-destructive", children: "\u00D7" }))] }, i))), _jsx("input", { id: id, type: "text", value: draft, disabled: readOnly, placeholder: tags.length === 0 ? 'Type and press Enter…' : '', onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+    return (_jsx("div", { className: "rounded border border-input bg-background p-1.5", children: _jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [tags.map((t, i) => (_jsxs("span", { className: "inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs", children: [_jsx("span", { className: "font-mono", children: t }), !readOnly && (_jsx("button", { type: "button", "aria-label": `Remove ${t}`, onClick: () => remove(i), className: "text-muted-foreground hover:text-destructive", children: "\u00D7" }))] }, i))), _jsx("input", { id: id, type: "text", value: draft, disabled: readOnly, placeholder: tags.length === 0 ? t('engine.form.tagsPlaceholder', locale) : '', onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
                         if (e.key === 'Enter' || e.key === ',') {
                             e.preventDefault();
                             add(draft);
@@ -237,17 +247,481 @@ function StringTagsWidget({ id, value, onChange, readOnly, }) {
                     }, onBlur: () => draft && add(draft), className: "min-w-[8rem] flex-1 bg-transparent text-sm outline-none" })] }) }));
 }
 /* -------------------------------------------------------------------------- */
-/* registry                                                                   */
+/* multiselect — pick from a fixed option set (array of enum)                 */
 /* -------------------------------------------------------------------------- */
+/** "grid" → "Grid", "start_date" → "Start Date". */
+function humanizeOption(v) {
+    return v
+        .replace(/[_-]+/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/**
+ * Toggleable option set for `array<enum>` fields (e.g.
+ * `appearance.allowedVisualizations`). Options come from the JSON Schema's
+ * `items.enum` (or `fieldSpec.options`); the value is the selected subset
+ * as a `string[]`, preserving the enum's declared order. Replaces the
+ * free-text tag input the generic array renderer fell back to — the author
+ * picks from the real allowed values instead of typing (and mistyping) them.
+ */
+function MultiSelectWidget({ value, onChange, readOnly, schema, fieldSpec }) {
+    // Prefer explicit form options; else the JSON Schema enum on the items.
+    const options = React.useMemo(() => {
+        if (Array.isArray(fieldSpec?.options) && fieldSpec.options.length) {
+            return fieldSpec.options.map((o) => ({ label: o.label, value: o.value }));
+        }
+        const enumVals = schema?.items?.enum ?? schema?.enum ?? [];
+        return (Array.isArray(enumVals) ? enumVals : [])
+            .filter((v) => typeof v === 'string')
+            .map((v) => ({ label: humanizeOption(v), value: v }));
+    }, [fieldSpec, schema]);
+    const selected = React.useMemo(() => (Array.isArray(value) ? value.filter((v) => typeof v === 'string') : []), [value]);
+    function toggle(opt) {
+        if (readOnly)
+            return;
+        // Keep selection ordered by the option list so behaviour is stable
+        // (e.g. allowedVisualizations[0] = the default/initial visualization).
+        const set = new Set(selected);
+        if (set.has(opt))
+            set.delete(opt);
+        else
+            set.add(opt);
+        const next = options.map((o) => o.value).filter((v) => set.has(v));
+        onChange(next.length ? next : undefined);
+    }
+    if (options.length === 0) {
+        // No known option set — degrade to the comma-tag editor so the field
+        // is still editable rather than rendering an empty box.
+        return _jsx(StringTagsWidget, { value: value, onChange: onChange, readOnly: readOnly, schema: schema, fieldSpec: fieldSpec });
+    }
+    return (_jsx("div", { className: "flex flex-wrap gap-1.5", role: "group", children: options.map((o) => {
+            const on = selected.includes(o.value);
+            return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": on, disabled: readOnly, onClick: () => toggle(o.value), className: 'inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors ' +
+                    (on
+                        ? 'border-primary bg-primary/10 text-primary'
+                        : 'border-input bg-background text-muted-foreground hover:text-foreground hover:bg-muted') +
+                    (readOnly ? ' opacity-60 cursor-not-allowed' : ''), children: [_jsx("span", { "aria-hidden": true, className: 'flex h-3.5 w-3.5 items-center justify-center rounded-[3px] border text-[9px] leading-none ' +
+                            (on ? 'border-primary bg-primary text-primary-foreground' : 'border-muted-foreground/40'), children: on ? '✓' : '' }), o.label] }, o.value));
+        }) }));
+}
+/* -------------------------------------------------------------------------- */
+/* field-ref / field-multi — pick object field(s) from the bound object       */
+/* -------------------------------------------------------------------------- */
+const NO_FIELD = '__none__';
+/**
+ * Single object-field picker. Used for View config props that reference one
+ * field by name (titleField, groupByField, startDateField, colorField,
+ * xAxisField, …). Field list comes from `context.objectFields`; a value not
+ * present in the catalog is still shown so stale/custom values survive.
+ */
+function FieldRefWidget({ id, value, onChange, readOnly, context }) {
+    const locale = detectLocale();
+    const fields = context?.objectFields ?? [];
+    const current = value == null ? '' : String(value);
+    const inCatalog = !current || fields.some((f) => f.name === current);
+    return (_jsxs(Select, { value: current || NO_FIELD, onValueChange: (v) => onChange(v === NO_FIELD ? '' : v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: fields.length ? t('engine.form.selectField', locale) : t('engine.form.noObjectBound', locale) }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NO_FIELD, children: _jsx("span", { className: "text-muted-foreground", children: t('engine.form.none', locale) }) }), !inCatalog && current && (_jsxs(SelectItem, { value: current, children: [_jsx("span", { className: "font-mono", children: current }), _jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: t('engine.form.notInObject', locale) })] })), fields.map((f) => (_jsx(SelectItem, { value: f.name, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { children: f.label || f.name }), _jsx("code", { className: "text-xs text-muted-foreground", children: f.name })] }) }, f.name)))] })] }));
+}
+/**
+ * Resolve a stored `sourceView` value against a source object's view catalog,
+ * mirroring the runtime resolver (InterfaceListPage.resolveSourceView): a value
+ * resolves if it's an exact view name, a bare name matching a view's
+ * `<object>.<name>` suffix, or the special `default`/`list` (→ object default
+ * view). `showStored` is true when the stored value needs a synthesized option
+ * (i.e. it isn't already an exact catalog entry). Exported for unit tests.
+ */
+export function resolveStoredViewRef(views, current) {
+    const exact = current ? views.find((v) => v.name === current) : undefined;
+    const suffixMatch = current && !exact ? views.find((v) => v.name.endsWith(`.${current}`)) : undefined;
+    const isSpecial = current === 'default' || current === 'list';
+    return { exact, suffixMatch, isSpecial, resolves: !!exact || !!suffixMatch || isSpecial, showStored: !!current && !exact };
+}
+/**
+ * Single view picker for `interfaceConfig.sourceView`. Views come from
+ * `context.objectViews` (the source object's views, loaded from the object
+ * named by the sibling `source` field). A value not present in the catalog is
+ * still shown so stale/custom names survive; clearing to "None" omits the
+ * field, which the protocol treats as the object's default view. Replaces the
+ * free-text input where an author could type a non-existent view name.
+ */
+function ViewRefWidget({ id, value, onChange, readOnly, context }) {
+    const locale = detectLocale();
+    const views = context?.objectViews ?? [];
+    const current = value == null ? '' : String(value);
+    // Mirror the runtime resolver (InterfaceListPage.resolveSourceView): a stored
+    // value resolves if it's an exact view name, OR a bare name matching a view's
+    // `<object>.<name>` suffix, OR the special `default`/`list` (→ object default
+    // view). Only a value that resolves to NOTHING gets the "(not in object)" tag —
+    // so a working bare value like `default` is no longer mislabelled.
+    const { suffixMatch, resolves, showStored } = resolveStoredViewRef(views, current);
+    return (_jsxs(Select, { value: current || NO_FIELD, onValueChange: (v) => onChange(v === NO_FIELD ? undefined : v), disabled: readOnly, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: views.length ? t('engine.form.selectEllipsis', locale) : t('engine.form.noObjectBound', locale) }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NO_FIELD, children: _jsx("span", { className: "text-muted-foreground", children: t('engine.form.none', locale) }) }), showStored && (_jsx(SelectItem, { value: current, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { children: suffixMatch?.label || current }), _jsx("code", { className: "text-xs text-muted-foreground", children: suffixMatch ? `\u2192 ${suffixMatch.name}` : current }), !resolves && (_jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: t('engine.form.notInObject', locale) }))] }) })), views.map((v) => (_jsx(SelectItem, { value: v.name, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { children: v.label || v.name }), _jsx("code", { className: "text-xs text-muted-foreground", children: v.name })] }) }, v.name)))] })] }));
+}
+/**
+ * Ordered multi object-field picker. Used for props that reference a list of
+ * fields (kanban card `columns`, gallery `visibleFields`, chart
+ * `yAxisFields`, `searchableFields`, …). Preserves order; supports reorder
+ * and removal; values outside the catalog are retained.
+ */
+function FieldRefMultiWidget({ id, value, onChange, readOnly, context }) {
+    const locale = detectLocale();
+    const fields = context?.objectFields ?? [];
+    const selected = Array.isArray(value)
+        ? value.map(String)
+        : typeof value === 'string' && value
+            ? value.split(',').map((s) => s.trim()).filter(Boolean)
+            : [];
+    const labelFor = (name) => fields.find((f) => f.name === name)?.label || name;
+    const remaining = fields.filter((f) => !selected.includes(f.name));
+    const add = (name) => {
+        if (!selected.includes(name))
+            onChange([...selected, name]);
+    };
+    const removeAt = (i) => {
+        const next = selected.slice();
+        next.splice(i, 1);
+        onChange(next);
+    };
+    const move = (i, dir) => {
+        const j = i + dir;
+        if (j < 0 || j >= selected.length)
+            return;
+        const next = selected.slice();
+        [next[i], next[j]] = [next[j], next[i]];
+        onChange(next);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [selected.length > 0 && (_jsx("div", { className: "space-y-1", children: selected.map((name, i) => (_jsxs("div", { className: "flex items-center gap-1 rounded border border-input bg-background px-2 py-1 text-sm", children: [_jsxs("span", { className: "flex-1 truncate", children: [labelFor(name), _jsx("code", { className: "ml-2 text-xs text-muted-foreground", children: name })] }), !readOnly && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Move up", disabled: i === 0, onClick: () => move(i, -1), className: "px-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: "\u2191" }), _jsx("button", { type: "button", "aria-label": "Move down", disabled: i === selected.length - 1, onClick: () => move(i, 1), className: "px-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: "\u2193" }), _jsx("button", { type: "button", "aria-label": `Remove ${name}`, onClick: () => removeAt(i), className: "px-1 text-muted-foreground hover:text-destructive", children: "\u00D7" })] }))] }, name))) })), !readOnly && (_jsxs(Select, { value: "", onValueChange: add, disabled: remaining.length === 0, children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: fields.length
+                                ? remaining.length
+                                    ? t('engine.form.addField', locale)
+                                    : t('engine.form.allFieldsAdded', locale)
+                                : t('engine.form.noObjectBound', locale) }) }), _jsx(SelectContent, { children: remaining.map((f) => (_jsx(SelectItem, { value: f.name, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { children: f.label || f.name }), _jsx("code", { className: "text-xs text-muted-foreground", children: f.name })] }) }, f.name))) })] }))] }));
+}
+/* -------------------------------------------------------------------------- */
+/* icon — searchable Lucide icon picker                                       */
+/* -------------------------------------------------------------------------- */
+// Lucide ships ~1500+ kebab-case icon names; freeze once for O(1) reuse.
+const LUCIDE_ICON_NAMES = iconNames;
+const LUCIDE_ICON_SET = new Set(LUCIDE_ICON_NAMES);
+// Cap the rendered grid — each cell mounts a lazily-loaded icon, so showing all
+// ~1500 at once would fire a flood of chunk requests. The search box narrows it.
+const ICON_RESULT_LIMIT = 120;
+/**
+ * Searchable icon picker for `widget: 'icon'` string fields (page/app/object
+ * `icon`). Replaces the raw text input where an author had to know and type a
+ * Lucide name. The trigger shows a live preview of the current icon; opening it
+ * reveals a search box + a grid of matching icons (preview + name). Selecting
+ * writes the kebab-case name string.
+ *
+ * Out-of-catalog values survive: a name that isn't a Lucide icon (e.g. one from
+ * another library, or a typo to be fixed later) is still shown on the trigger as
+ * plain text (LazyIcon degrades to a fallback glyph) and is offered as the first
+ * "keep" option so re-opening the picker never silently drops it.
+ *
+ * Built inline (no Radix portal) so the search + grid render eagerly — the same
+ * jsdom-friendly choice the other pickers' tests rely on.
+ */
+export function IconPickerWidget({ id, value, onChange, readOnly }) {
+    const locale = detectLocale();
+    const current = value == null ? '' : String(value);
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState('');
+    const currentKebab = current ? toKebabIconName(current) : '';
+    const inCatalog = !current || LUCIDE_ICON_SET.has(currentKebab);
+    const q = toKebabIconName(query.trim());
+    const allMatches = React.useMemo(() => (q ? LUCIDE_ICON_NAMES.filter((n) => n.includes(q)) : LUCIDE_ICON_NAMES), [q]);
+    const results = allMatches.slice(0, ICON_RESULT_LIMIT);
+    const truncated = allMatches.length > results.length;
+    const select = (name) => {
+        onChange(name || undefined);
+        setOpen(false);
+        setQuery('');
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { id: id, type: "button", role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, disabled: readOnly, onClick: () => !readOnly && setOpen(true), className: "flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm text-left disabled:cursor-not-allowed disabled:opacity-60", children: [_jsx(LazyIcon, { name: inCatalog ? current : undefined, className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: 'flex-1 truncate ' + (current ? 'font-mono' : 'text-muted-foreground'), children: current || t('engine.form.selectEllipsis', locale) }), !inCatalog && current && (_jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: t('engine.form.notInObject', locale) })), _jsx(ChevronsUpDown, { "aria-hidden": true, className: "h-3.5 w-3.5 shrink-0 opacity-50" })] }), _jsx(Dialog, { open: open, onOpenChange: (o) => { setOpen(o); if (!o)
+                    setQuery(''); }, children: _jsxs(DialogContent, { className: "max-w-2xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('engine.form.chooseIcon', locale) }) }), _jsxs("div", { className: "flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2", children: [_jsx(Search, { "aria-hidden": true, className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsx("input", { type: "text", autoFocus: true, value: query, "aria-label": t('engine.form.searchIcons', locale), placeholder: t('engine.form.searchIcons', locale), onChange: (e) => setQuery(e.target.value), className: "w-full bg-transparent text-sm outline-none" })] }), _jsxs("div", { id: id ? `${id}-listbox` : undefined, role: "listbox", className: "grid max-h-[52vh] grid-cols-6 gap-1.5 overflow-y-auto pr-1 sm:grid-cols-8", children: [current && (_jsxs("button", { type: "button", role: "option", "aria-selected": false, title: t('engine.form.none', locale), onClick: () => select(undefined), className: "flex aspect-square flex-col items-center justify-center gap-1 rounded border border-dashed border-border p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground", children: [_jsx(Trash2, { className: "h-4 w-4" }), _jsx("span", { className: "w-full truncate text-center text-[9px] leading-tight", children: "none" })] })), !inCatalog && current && (_jsxs("button", { type: "button", role: "option", "aria-selected": true, title: current, onClick: () => select(current), className: "flex aspect-square flex-col items-center justify-center gap-1 rounded bg-accent p-1 text-accent-foreground ring-1 ring-primary", children: [_jsx(LazyIcon, { name: undefined, className: "h-4 w-4" }), _jsx("span", { className: "w-full truncate text-center text-[9px] leading-tight", children: current })] })), results.map((name) => {
+                                    const selected = name === currentKebab;
+                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": selected, title: name, onClick: () => select(name), className: 'flex aspect-square flex-col items-center justify-center gap-1 rounded p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground ' +
+                                            (selected ? 'bg-accent text-accent-foreground ring-1 ring-primary' : ''), children: [_jsx(LazyIcon, { name: name, className: "h-5 w-5" }), _jsx("span", { className: "w-full truncate text-center text-[9px] leading-tight", children: name })] }, name));
+                                }), results.length === 0 && (_jsx("p", { className: "col-span-full px-2 py-6 text-center text-sm text-muted-foreground", children: t('engine.form.noMatchingIcons', locale) }))] }), truncated && (_jsx("p", { className: "text-center text-xs text-muted-foreground", children: tFormat('engine.form.iconsTruncated', locale, { shown: results.length, total: allMatches.length }) }))] }) })] }));
+}
+const FILTER_MODES = [
+    { key: 'none', label: 'None' },
+    { key: 'tabs', label: 'Tabs' },
+    { key: 'dropdown', label: 'Dropdown' },
+];
+const slugifyTabName = (s) => (s || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '') || 'tab';
+function FilterModeWidget({ value, onChange, readOnly, context }) {
+    const uf = (value && typeof value === 'object' ? value : undefined);
+    const mode = uf?.element ?? (uf ? 'dropdown' : 'none');
+    const objectFields = context?.objectFields ?? [];
+    const setMode = (next) => {
+        if (readOnly)
+            return;
+        if (next === 'none') {
+            onChange(undefined);
+            return;
+        } // omit-is-none
+        onChange({ ...(uf ?? {}), element: next });
+    };
+    const fields = Array.isArray(uf?.fields) ? uf.fields : [];
+    const patchFields = (nextFields) => onChange({ ...(uf ?? {}), element: mode === 'none' ? 'dropdown' : mode, fields: nextFields });
+    const selected = new Set(fields.map((f) => f.field));
+    const remaining = objectFields.filter((f) => !selected.has(f.name));
+    const labelFor = (name) => objectFields.find((f) => f.name === name)?.label || name;
+    // A deprecated `element: 'toggle'` config still lands here — render its
+    // field picker too so it stays editable, even though Toggle isn't offered
+    // as a new authoring choice.
+    const isFieldMode = mode === 'dropdown' || mode === 'toggle';
+    // ── Tabs preset editing (ADR-0053) ──────────────────────────────────────
+    // Read any shape (canonical {name,filter} or legacy {id,filters}) into the
+    // canonical editing model; writes always emit the canonical form so authoring
+    // converges on one schema.
+    const readTabs = () => {
+        const raw = Array.isArray(uf?.tabs) ? uf.tabs : [];
+        return raw.map((t) => ({
+            ...t,
+            name: t?.name ?? t?.id ?? '',
+            label: typeof t?.label === 'string' ? t.label : (t?.name ?? t?.id ?? ''),
+            filter: Array.isArray(t?.filter)
+                ? t.filter
+                : Array.isArray(t?.filters)
+                    ? t.filters
+                        .filter((r) => Array.isArray(r) && r.length >= 2)
+                        .map((r) => ({ field: String(r[0]), operator: String(r[1]), value: r[2] }))
+                    : [],
+            isDefault: t?.isDefault ?? t?.default,
+        }));
+    };
+    const tabs = readTabs();
+    const canonicalTab = (t) => {
+        const out = { name: slugifyTabName(t.label || t.name), label: t.label || t.name || 'Tab' };
+        if (t.icon)
+            out.icon = t.icon;
+        out.filter = Array.isArray(t.filter) ? t.filter : [];
+        if (t.isDefault)
+            out.isDefault = true;
+        return out;
+    };
+    const writeTabs = (next) => {
+        const seen = {};
+        const canon = next.map(canonicalTab).map((o) => {
+            let n = o.name;
+            if (seen[n]) {
+                let k = 2;
+                while (seen[`${o.name}_${k}`])
+                    k++;
+                n = `${o.name}_${k}`;
+            }
+            seen[n] = true;
+            return { ...o, name: n };
+        });
+        onChange({ ...(uf ?? {}), element: 'tabs', tabs: canon });
+    };
+    const addTab = () => writeTabs([...tabs, { name: '', label: `Tab ${tabs.length + 1}`, filter: [] }]);
+    const removeTab = (ti) => writeTabs(tabs.filter((_, i) => i !== ti));
+    const moveTab = (ti, dir) => {
+        const next = [...tabs];
+        const j = ti + dir;
+        if (j < 0 || j >= next.length)
+            return;
+        [next[ti], next[j]] = [next[j], next[ti]];
+        writeTabs(next);
+    };
+    const patchTab = (ti, patch) => writeTabs(tabs.map((t, i) => (i === ti ? { ...t, ...patch } : t)));
+    const setShowAllRecords = (c) => onChange({ ...(uf ?? {}), element: 'tabs', showAllRecords: c });
+    return (_jsxs("div", { className: "space-y-3", children: [_jsx("div", { className: "inline-flex rounded-md border border-input bg-background p-0.5", role: "radiogroup", "aria-label": "Filter element", children: FILTER_MODES.map((m) => {
+                    const active = mode === m.key;
+                    return (_jsx("button", { type: "button", role: "radio", "aria-checked": active, "data-testid": `filter-mode-${m.key}`, disabled: readOnly, onClick: () => setMode(m.key), className: 'px-3 py-1 text-xs font-medium rounded transition-colors ' +
+                            (active
+                                ? 'bg-primary text-primary-foreground shadow-sm'
+                                : 'text-muted-foreground hover:text-foreground hover:bg-muted'), children: m.label }, m.key));
+                }) }), isFieldMode && (_jsxs("div", { className: "space-y-2", "data-testid": "filter-mode-fields", children: [fields.length > 0 && (_jsx("div", { className: "space-y-1", children: fields.map((f, i) => (_jsxs("div", { className: "flex items-center gap-2 rounded border border-input bg-background px-2 py-1 text-sm", children: [_jsxs("span", { className: "flex-1 truncate", children: [labelFor(f.field), _jsx("code", { className: "ml-2 text-xs text-muted-foreground", children: f.field })] }), _jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [_jsx(Switch, { checked: !!f.showCount, disabled: readOnly, onCheckedChange: (c) => patchFields(fields.map((x, j) => (j === i ? { ...x, showCount: c } : x))) }), "count"] }), !readOnly && (_jsx("button", { type: "button", "aria-label": "Remove field", onClick: () => patchFields(fields.filter((_, j) => j !== i)), className: "px-1 text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }))] }, f.field))) })), !readOnly && remaining.length > 0 && (_jsxs(Select, { onValueChange: (name) => patchFields([...fields, { field: name }]), children: [_jsx(SelectTrigger, { className: "h-8 text-xs", "data-testid": "filter-mode-add-field", children: _jsx(SelectValue, { placeholder: "+ Add filter field\u2026" }) }), _jsx(SelectContent, { children: remaining.map((f) => (_jsx(SelectItem, { value: f.name, children: f.label || f.name }, f.name))) })] })), objectFields.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Bind a source object to pick filter fields." }))] })), mode === 'tabs' && (_jsxs("div", { className: "space-y-2", "data-testid": "filter-mode-tabs-editor", children: [tabs.map((tab, ti) => (_jsxs("div", { className: "rounded-md border border-input bg-background p-2 space-y-2", "data-testid": `tab-preset-${ti}`, children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { value: tab.label, placeholder: "Tab label", disabled: readOnly, className: "h-8 text-sm flex-1", "data-testid": `tab-label-${ti}`, onChange: (e) => patchTab(ti, { label: e.target.value }) }), _jsx("code", { className: "text-[10px] text-muted-foreground shrink-0 max-w-[6rem] truncate", title: tab.name, children: tab.name }), !readOnly && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Move tab up", disabled: ti === 0, onClick: () => moveTab(ti, -1), className: "px-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: _jsx(ChevronUp, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", "aria-label": "Move tab down", disabled: ti === tabs.length - 1, onClick: () => moveTab(ti, 1), className: "px-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: _jsx(ChevronDown, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", "aria-label": "Remove tab", onClick: () => removeTab(ti), className: "px-1 text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }))] }), _jsx("div", { className: "pl-1", "data-testid": `tab-${ti}-filter`, children: _jsx(FilterBuilderField, { value: tab.filter, onChange: (f) => patchTab(ti, { filter: f }), fields: objectFields, readOnly: readOnly }) })] }, ti))), !readOnly && (_jsxs("button", { type: "button", "data-testid": "filter-mode-add-tab", onClick: addTab, className: "inline-flex items-center text-xs font-medium text-primary hover:underline", children: [_jsx(Plus, { className: "h-3.5 w-3.5 mr-1" }), " Add tab"] })), _jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground pt-1", children: [_jsx(Switch, { checked: uf?.showAllRecords !== false, disabled: readOnly, "data-testid": "filter-mode-show-all", onCheckedChange: setShowAllRecords }), "Show \u201CAll records\u201D tab"] }), objectFields.length === 0 && (_jsx("p", { className: "text-xs text-muted-foreground", children: "Bind a source object to build tab filter rules." }))] }))] }));
+}
+/* -------------------------------------------------------------------------- */
+/* action-multi — pick toolbar buttons from the source object's actions       */
+/*                                                                            */
+/* Interface-page `buttons` are object Actions (ActionSchema), not free text. */
+/* This makes "buttons = object actions" correct-by-construction (the picker  */
+/* only offers actions the object actually defines).                          */
+/* -------------------------------------------------------------------------- */
+function ActionMultiWidget({ id, value, onChange, readOnly, context }) {
+    const actions = context?.objectActions ?? [];
+    const selected = Array.isArray(value)
+        ? value.map(String)
+        : typeof value === 'string' && value
+            ? value.split(',').map((s) => s.trim()).filter(Boolean)
+            : [];
+    const labelFor = (name) => actions.find((a) => a.name === name)?.label || name;
+    const remaining = actions.filter((a) => !selected.includes(a.name));
+    const add = (name) => { if (!selected.includes(name))
+        onChange([...selected, name]); };
+    const removeAt = (i) => { const next = selected.slice(); next.splice(i, 1); onChange(next); };
+    const move = (i, dir) => {
+        const j = i + dir;
+        if (j < 0 || j >= selected.length)
+            return;
+        const next = selected.slice();
+        [next[i], next[j]] = [next[j], next[i]];
+        onChange(next);
+    };
+    return (_jsxs("div", { className: "space-y-2", "data-testid": "action-multi", children: [selected.length > 0 && (_jsx("div", { className: "space-y-1", children: selected.map((name, i) => (_jsxs("div", { className: "flex items-center gap-1 rounded border border-input bg-background px-2 py-1 text-sm", children: [_jsxs("span", { className: "flex-1 truncate", children: [labelFor(name), _jsx("code", { className: "ml-2 text-xs text-muted-foreground", children: name })] }), !readOnly && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Move up", disabled: i === 0, onClick: () => move(i, -1), className: "px-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: "\u2191" }), _jsx("button", { type: "button", "aria-label": "Move down", disabled: i === selected.length - 1, onClick: () => move(i, 1), className: "px-1 text-muted-foreground hover:text-foreground disabled:opacity-30", children: "\u2193" }), _jsx("button", { type: "button", "aria-label": `Remove ${name}`, onClick: () => removeAt(i), className: "px-1 text-muted-foreground hover:text-destructive", children: "\u00D7" })] }))] }, name))) })), !readOnly && (_jsxs(Select, { value: "", onValueChange: add, disabled: remaining.length === 0, children: [_jsx(SelectTrigger, { id: id, "data-testid": "action-multi-add", children: _jsx(SelectValue, { placeholder: actions.length ? (remaining.length ? '+ Add action button…' : 'All actions added') : 'Bind a source object to pick actions' }) }), _jsx(SelectContent, { children: remaining.map((a) => (_jsx(SelectItem, { value: a.name, children: _jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { children: a.label || a.name }), _jsx("code", { className: "text-xs text-muted-foreground", children: a.name })] }) }, a.name))) })] }))] }));
+}
+/* -------------------------------------------------------------------------- */
+/* filter-builder — the SAME runtime FilterBuilder used by the list toolbar,   */
+/* reused in Studio for tab presets and the page base filter (unified UX).     */
+/* Stored format stays spec ViewFilterRule[] ({field,operator,value}); the     */
+/* builder's camelCase operators are mapped at the boundary so the runtime     */
+/* (specOperatorToAst) keeps working unchanged.                                */
+/* -------------------------------------------------------------------------- */
+const FB_TO_SPEC = {
+    equals: 'equals', notEquals: 'not_equals', contains: 'contains', notContains: 'not_contains',
+    isEmpty: 'is_empty', isNotEmpty: 'is_not_empty', greaterThan: 'gt', lessThan: 'lt',
+    greaterOrEqual: 'gte', lessOrEqual: 'lte', before: 'lt', after: 'gt', between: 'between',
+    in: 'in', notIn: 'not_in',
+};
+const SPEC_TO_FB = {
+    equals: 'equals', eq: 'equals', not_equals: 'notEquals', ne: 'notEquals', neq: 'notEquals',
+    contains: 'contains', not_contains: 'notContains', is_empty: 'isEmpty', is_not_empty: 'isNotEmpty',
+    gt: 'greaterThan', greater_than: 'greaterThan', lt: 'lessThan', less_than: 'lessThan',
+    gte: 'greaterOrEqual', lte: 'lessOrEqual', in: 'in', not_in: 'notIn', nin: 'notIn',
+};
+function FilterBuilderField({ value, onChange, fields, readOnly }) {
+    const rules = Array.isArray(value) ? value : [];
+    const group = {
+        id: 'g',
+        logic: 'and',
+        conditions: rules.map((r, i) => ({
+            id: `c${i}`,
+            field: r.field,
+            operator: SPEC_TO_FB[r.operator] ?? r.operator ?? 'equals',
+            value: r.value ?? '',
+        })),
+    };
+    const fbFields = fields.map((f) => ({ value: f.name, label: f.label || f.name, type: f.type }));
+    const summary = rules.length
+        ? rules.map((r) => `${fields.find((f) => f.name === r.field)?.label || r.field}`).filter(Boolean).join(', ')
+        : '';
+    const handle = (g) => {
+        const next = (g?.conditions ?? [])
+            .filter((c) => c?.field)
+            .map((c) => ({ field: c.field, operator: FB_TO_SPEC[c.operator] ?? c.operator, value: c.value }));
+        onChange(next);
+    };
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", disabled: readOnly, className: "h-8 w-full justify-between text-xs font-normal", "data-testid": "filter-builder-trigger", children: [_jsx("span", { className: "truncate text-left", children: summary || _jsx("span", { className: "text-muted-foreground", children: "+ Add filter\u2026" }) }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-60 shrink-0" })] }) }), _jsx(PopoverContent, { align: "start", className: "w-[440px] max-w-[90vw] p-3", children: fields.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: "Bind a source object to add filter conditions." })) : (_jsx(FilterBuilder, { fields: fbFields, value: group, onChange: handle })) })] }));
+}
+function FilterBuilderWidget({ value, onChange, readOnly, context }) {
+    return (_jsx(FilterBuilderField, { value: value, onChange: (rules) => onChange(rules.length ? rules : undefined), fields: context?.objectFields ?? [], readOnly: readOnly }));
+}
+/* -------------------------------------------------------------------------- */
+/* color-picker — semantic swatch row (enum) or native hex input (free color) */
+/* -------------------------------------------------------------------------- */
+function ColorPickerWidget({ value, onChange, readOnly, schema, fieldSpec }) {
+    const enumOpts = Array.isArray(fieldSpec?.options) && fieldSpec.options.length
+        ? fieldSpec.options.map((o) => ({ value: o.value, label: o.label }))
+        : Array.isArray(schema?.enum)
+            ? schema.enum.filter((v) => typeof v === 'string').map((v) => ({ value: v }))
+            : null;
+    if (enumOpts && enumOpts.length) {
+        return (_jsx(ColorVariantPicker, { value: value == null ? undefined : String(value), onChange: (v) => onChange(v), disabled: readOnly, options: enumOpts }));
+    }
+    // Free color → native picker + hex text.
+    const v = value == null ? '' : String(value);
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: /^#([0-9a-f]{6})$/i.test(v) ? v : '#000000', disabled: readOnly, onChange: (e) => onChange(e.target.value), className: "h-8 w-10 shrink-0 rounded border border-input bg-background p-0.5 disabled:opacity-60", "aria-label": "Color" }), _jsx(Input, { value: v, placeholder: "#RRGGBB", disabled: readOnly, onChange: (e) => onChange(e.target.value || undefined), className: "h-8 text-sm font-mono" })] }));
+}
+/* -------------------------------------------------------------------------- */
+/* condition — no-code CEL predicate builder (visible / hidden / disabled / …) */
+/* -------------------------------------------------------------------------- */
+function ConditionWidget({ value, onChange, readOnly, context }) {
+    return (_jsx(ConditionBuilder, { value: value == null ? '' : String(value), onCommit: (cel) => onChange(cel || undefined), fields: context?.objectFields, disabled: readOnly }));
+}
+/* -------------------------------------------------------------------------- */
+/* secret — write-only / masked credential input (encrypt-on-write fields)     */
+/* -------------------------------------------------------------------------- */
+/** Mirrors objectql\'s SECRET_MASK: a stored secret reads back as this, never plaintext. */
+export const SECRET_MASK = '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022';
+/**
+ * `secret` widget — a write-only credential input for `secret` field types (and
+ * `format: 'password'` / `writeOnly` props). A stored secret reads back masked,
+ * so the box starts empty with a "leave blank to keep" hint; typing replaces it,
+ * a reveal toggle shows what you type, and Clear removes it. Emits the typed
+ * value (new secret), `SECRET_MASK` (blank + existing = keep, a no-op on write),
+ * `null` (Clear), or `undefined` (blank + none).
+ */
+function SecretWidget({ value, onChange, readOnly, schema, id }) {
+    const stored = value === SECRET_MASK;
+    const [reveal, setReveal] = React.useState(false);
+    const [draft, setDraft] = React.useState(stored || value == null ? '' : String(value));
+    const update = (v) => {
+        setDraft(v);
+        if (v === '')
+            onChange(stored ? SECRET_MASK : undefined); // blank: keep if stored, else unset
+        else
+            onChange(v);
+    };
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: id, type: reveal ? 'text' : 'password', value: draft, disabled: readOnly, autoComplete: "off", placeholder: stored ? (schema?.description ? '•••••••• set — type to replace' : '•••••••• set — leave blank to keep') : (typeof schema?.description === 'string' ? '' : 'Enter a value'), onChange: (e) => update(e.target.value), className: "h-8 text-sm font-mono", "aria-label": "Secret value" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8 shrink-0", disabled: readOnly, "aria-label": reveal ? 'Hide value' : 'Reveal value', onClick: () => setReveal((r) => !r), children: reveal ? _jsx(EyeOff, { className: "h-4 w-4" }) : _jsx(Eye, { className: "h-4 w-4" }) }), stored && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 shrink-0 text-destructive hover:text-destructive", disabled: readOnly, onClick: () => { setDraft(''); onChange(null); }, children: "Clear" }))] }));
+}
+/* -------------------------------------------------------------------------- */
+/* dynamic-config — sub-form whose schema is chosen by a sibling field value   */
+/* -------------------------------------------------------------------------- */
+/**
+ * `dynamic-config` widget — renders an object field whose shape depends on a
+ * SIBLING field\'s value. `fieldSpec.dependsOn` names the parent field (e.g.
+ * `driver`); `context.dynamicSchemas[<parentValue>]` supplies the JSON-Schema
+ * for the config object. The canonical case is a datasource\'s `config` field
+ * that changes fields per driver, but it is generic: any "pick X → these
+ * settings" pattern can reuse it by populating `dynamicSchemas`.
+ */
+function DynamicConfigWidget({ value, onChange, readOnly, fieldSpec, formData, context }) {
+    const dep = Array.isArray(fieldSpec?.dependsOn) ? fieldSpec.dependsOn[0] : fieldSpec?.dependsOn;
+    const depVal = dep ? formData?.[dep] : undefined;
+    const sub = depVal != null ? context?.dynamicSchemas?.[String(depVal)] : undefined;
+    const props = (sub?.properties ?? {});
+    const required = new Set(sub?.required ?? []);
+    const cfg = (value && typeof value === 'object' ? value : {});
+    const setKey = (k, v) => {
+        const next = { ...cfg };
+        if (v === undefined || v === '')
+            delete next[k];
+        else
+            next[k] = v;
+        onChange(next);
+    };
+    if (!depVal) {
+        return _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Select ", dep ?? 'an option', " to configure."] });
+    }
+    if (!sub || Object.keys(props).length === 0) {
+        return _jsxs("p", { className: "text-xs text-muted-foreground", children: ["No configuration needed for \"", String(depVal), "\"."] });
+    }
+    return (_jsx("div", { className: "space-y-2 rounded-md border border-border/60 p-3", children: Object.entries(props).map(([key, p]) => {
+            const label = p?.title || key;
+            const cur = cfg[key];
+            const isReq = required.has(key);
+            if (p?.type === 'boolean') {
+                return (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { className: "text-xs", children: label }), _jsx(Switch, { checked: Boolean(cur), disabled: readOnly, onCheckedChange: (c) => setKey(key, c) })] }, key));
+            }
+            if (Array.isArray(p?.enum)) {
+                return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs", children: [label, isReq ? ' *' : ''] }), _jsxs(Select, { value: cur != null ? String(cur) : '', onValueChange: (v) => setKey(key, v), disabled: readOnly, children: [_jsx(SelectTrigger, { className: "h-8", "aria-label": label, children: _jsx(SelectValue, { placeholder: "Select\u2026" }) }), _jsx(SelectContent, { children: p.enum.map((o) => _jsx(SelectItem, { value: String(o), children: String(o) }, String(o))) })] })] }, key));
+            }
+            const isSecret = p?.format === 'password' || p?.writeOnly === true;
+            const isNum = p?.type === 'number' || p?.type === 'integer';
+            return (_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { className: "text-xs", children: [label, isReq ? ' *' : ''] }), isSecret ? (_jsx(SecretWidget, { value: cur, onChange: (v) => setKey(key, v), readOnly: readOnly, schema: p })) : (_jsx(Input, { type: isNum ? 'number' : 'text', value: cur != null ? String(cur) : '', disabled: readOnly, "aria-label": label, onChange: (e) => setKey(key, isNum ? (e.target.value === '' ? undefined : Number(e.target.value)) : e.target.value), className: "h-8 text-sm" })), p?.description && _jsx("p", { className: "text-[11px] text-muted-foreground", children: p.description })] }, key));
+        }) }));
+}
 export const WIDGETS = {
     'ref:object': RefObjectWidget,
+    'filter-mode': FilterModeWidget,
     'object-selector': ObjectSelectorWidget,
     'field-selector': FieldSelectorWidget,
+    'field-ref': FieldRefWidget,
+    'field-multi': FieldRefMultiWidget,
+    'action-multi': ActionMultiWidget,
+    'filter-builder': FilterBuilderWidget,
+    'view-ref': ViewRefWidget,
+    'icon': IconPickerWidget,
+    'color-picker': ColorPickerWidget,
+    'condition': ConditionWidget,
     'master-detail': MasterDetailWidget,
     'string-tags': StringTagsWidget,
+    'multiselect': MultiSelectWidget,
     'code': CodeWidget,
-    // Reasonable fallbacks until dedicated builders ship:
-    'filter-builder': MasterDetailWidget,
+    'secret': SecretWidget,
+    'dynamic-config': DynamicConfigWidget,
 };
 /* -------------------------------------------------------------------------- */
 /* CodeWidget — Monaco editor for `type: 'code'` fields                       */