@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/inspectors/ConditionBuilder.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ConditionBuilder — a no-code editor for a CEL predicate (ServiceNow-style),
+ * compiling rows of [subject][operator][value] joined by AND/OR into a CEL
+ * string emitted via onCommit (empty ⇒ '' ⇒ caller should unset).
+ *
+ * Stateful by design: rows live in local state so an in-progress row (no
+ * subject yet) stays on screen instead of vanishing the moment it compiles to
+ * an empty string. The emitted CEL is recomputed from rows on every edit.
+ *
+ * Safety: on (re)load the builder only adopts an existing expression when it
+ * parses AND round-trips byte-for-byte (whitespace-normalised). Anything it
+ * can't round-trip cleanly opens in a raw expression textarea, so hand-authored
+ * complex CEL is never silently rewritten.
+ */
+import * as React from 'react';
+import { Button, Input, Label, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, } from '@object-ui/components';
+import { Plus, X, Code2, ListFilter } from 'lucide-react';
+import { useObjectFields } from '../previews/useObjectFields';
+const COMPARE_OPS = [
+    { value: '==', label: 'equals' },
+    { value: '!=', label: 'not equals' },
+    { value: '>', label: 'greater than' },
+    { value: '<', label: 'less than' },
+    { value: '>=', label: '≥' },
+    { value: '<=', label: '≤' },
+    { value: 'truthy', label: 'is set / true' },
+    { value: 'falsy', label: 'is empty / false' },
+];
+const CONTEXT_SUBJECTS = [
+    { value: 'record.id', label: 'record.id' },
+    { value: 'user.id', label: 'user.id' },
+    { value: 'user.email', label: 'user.email' },
+    { value: 'user.role', label: 'user.role' },
+    { value: 'user.isAdmin', label: 'user.isAdmin' },
+    { value: 'org.id', label: 'org.id' },
+];
+const norm = (s) => s.replace(/\s+/g, ' ').trim();
+/** Quote a raw value for CEL unless it is a number / boolean / null. */
+function fmtValue(v) {
+    const t = v.trim();
+    if (t === 'true' || t === 'false' || t === 'null')
+        return t;
+    if (t !== '' && !Number.isNaN(Number(t)))
+        return t;
+    return `'${t.replace(/'/g, "\\'")}'`;
+}
+/** Inverse of fmtValue for display in the value input. */
+function unfmtValue(raw) {
+    const t = raw.trim();
+    const m = /^'(.*)'$/.exec(t);
+    if (m)
+        return m[1].replace(/\\'/g, "'");
+    return t;
+}
+/** Compile rows → CEL. Rows without a subject are skipped (in-progress). */
+function compile(rows, join) {
+    return rows
+        .filter((r) => r.subject)
+        .map((r) => {
+        if (r.op === 'truthy')
+            return r.subject;
+        if (r.op === 'falsy')
+            return `!${r.subject}`;
+        return `${r.subject} ${r.op} ${fmtValue(r.value)}`;
+    })
+        .join(` ${join} `);
+}
+/** Parse a simple AND/OR predicate. Returns null if it isn't the simple shape. */
+function parse(expr) {
+    const s = norm(expr);
+    if (!s)
+        return { rows: [], join: '&&' };
+    const hasAnd = s.includes('&&');
+    const hasOr = s.includes('||');
+    if (hasAnd && hasOr)
+        return null; // mixed joins → too complex
+    const join = hasOr ? '||' : '&&';
+    const parts = s.split(hasOr ? '||' : '&&').map((p) => p.trim());
+    const rows = [];
+    for (const p of parts) {
+        const cmp = /^([a-zA-Z_][\w.]*)\s*(==|!=|>=|<=|>|<)\s*(.+)$/.exec(p);
+        if (cmp) {
+            rows.push({ subject: cmp[1], op: cmp[2], value: unfmtValue(cmp[3]) });
+            continue;
+        }
+        const neg = /^!\s*([a-zA-Z_][\w.]*)$/.exec(p);
+        if (neg) {
+            rows.push({ subject: neg[1], op: 'falsy', value: '' });
+            continue;
+        }
+        const truthy = /^([a-zA-Z_][\w.]*)$/.exec(p);
+        if (truthy) {
+            rows.push({ subject: truthy[1], op: 'truthy', value: '' });
+            continue;
+        }
+        return null; // unrecognised term
+    }
+    return { rows, join };
+}
+function initFrom(value) {
+    const p = parse(value || '');
+    if (p && norm(compile(p.rows, p.join)) === norm(value || '')) {
+        return { rows: p.rows, join: p.join, raw: false };
+    }
+    return { rows: [], join: '&&', raw: !!value };
+}
+export function ConditionBuilder({ label, value, onCommit, objectName, fields: fieldsProp, disabled }) {
+    const { fields: hookFields } = useObjectFields(objectName);
+    const fields = fieldsProp ?? hookFields;
+    const subjectOptions = React.useMemo(() => {
+        const fieldOpts = fields
+            .filter((f) => !f.hidden)
+            .map((f) => ({ value: `record.${f.name}`, label: `record.${f.name}` }));
+        return [...fieldOpts, ...CONTEXT_SUBJECTS];
+    }, [fields]);
+    const init = React.useMemo(() => initFrom(value), []); // first mount only
+    const [rows, setRowsState] = React.useState(init.rows);
+    const [join, setJoin] = React.useState(init.join);
+    const [raw, setRaw] = React.useState(init.raw);
+    // Adopt an externally-changed value (e.g. switching records, or a raw edit
+    // from elsewhere) when it isn't the CEL we just emitted.
+    const lastEmitted = React.useRef(value || '');
+    React.useEffect(() => {
+        const v = value || '';
+        if (v === lastEmitted.current)
+            return;
+        lastEmitted.current = v;
+        const next = initFrom(v);
+        setRowsState(next.rows);
+        setJoin(next.join);
+        setRaw(next.raw);
+    }, [value]);
+    const emit = (nextRows, nextJoin) => {
+        const cel = compile(nextRows, nextJoin);
+        lastEmitted.current = cel;
+        onCommit(cel);
+    };
+    const update = (nextRows, nextJoin = join) => {
+        setRowsState(nextRows);
+        setJoin(nextJoin);
+        emit(nextRows, nextJoin);
+    };
+    const compiled = compile(rows, join);
+    if (raw) {
+        return (_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [label ? _jsx(Label, { className: "text-xs text-muted-foreground", children: label }) : _jsx("span", {}), _jsxs("button", { type: "button", disabled: disabled, onClick: () => { const n = initFrom(value); if (!value || !n.raw) {
+                                setRowsState(n.rows);
+                                setJoin(n.join);
+                                setRaw(false);
+                            } }, className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-50", children: [_jsx(ListFilter, { className: "h-3 w-3" }), " Builder"] })] }), _jsx("textarea", { value: value, onChange: (e) => { lastEmitted.current = e.target.value; onCommit(e.target.value); }, disabled: disabled, spellCheck: false, rows: 2, placeholder: "CEL expression, e.g. record.status != 'done' && user.isAdmin", className: "w-full rounded border border-input bg-background px-2 py-1.5 text-xs font-mono outline-none focus:ring-1 focus:ring-primary resize-y disabled:opacity-60" }), value && !parse(value) && (_jsx("div", { className: "text-[10px] text-muted-foreground/70", children: "Advanced expression \u2014 Builder only supports simple AND/OR conditions." }))] }));
+    }
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [label ? _jsx(Label, { className: "text-xs text-muted-foreground", children: label }) : _jsx("span", {}), _jsxs("button", { type: "button", disabled: disabled, onClick: () => setRaw(true), className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground disabled:opacity-50", children: [_jsx(Code2, { className: "h-3 w-3" }), " Expression"] })] }), rows.length === 0 ? (_jsx("p", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-2 text-center text-[11px] text-muted-foreground", children: "Always \u2014 no condition." })) : (_jsx("div", { className: "space-y-1.5", children: rows.map((r, i) => (_jsxs("div", { className: "space-y-1 rounded-md border border-border p-1.5", children: [i > 0 && (_jsx("div", { className: "flex justify-center", children: _jsxs(Select, { value: join, onValueChange: (v) => update(rows, v), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-6 w-16 text-[10px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "&&", children: "AND" }), _jsx(SelectItem, { value: "||", children: "OR" })] })] }) })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsxs(Select, { value: r.subject, onValueChange: (v) => update(rows.map((x, j) => j === i ? { ...x, subject: v } : x)), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-7 text-xs", children: _jsx(SelectValue, { placeholder: "field / context" }) }), _jsxs(SelectContent, { children: [subjectOptions.map((o) => _jsx(SelectItem, { value: o.value, children: o.label }, o.value)), r.subject && !subjectOptions.some((o) => o.value === r.subject) && (_jsx(SelectItem, { value: r.subject, children: r.subject }))] })] }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7 shrink-0", disabled: disabled, "aria-label": "Remove condition", onClick: () => update(rows.filter((_, j) => j !== i)), children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-28 shrink-0", children: _jsxs(Select, { value: r.op, onValueChange: (v) => update(rows.map((x, j) => j === i ? { ...x, op: v } : x)), disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-7 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: COMPARE_OPS.map((o) => _jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })] }) }), r.op !== 'truthy' && r.op !== 'falsy' && (_jsx(Input, { className: "h-7 flex-1 text-xs", value: r.value, placeholder: "value", disabled: disabled, onChange: (e) => update(rows.map((x, j) => j === i ? { ...x, value: e.target.value } : x)) }))] })] }, i))) })), !disabled && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => update([...rows, { subject: '', op: 'truthy', value: '' }]), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), " Add condition"] })), compiled && (_jsx("div", { className: "rounded bg-muted/40 px-2 py-1 text-[10px] font-mono text-muted-foreground break-all", children: compiled }))] }));
+}

package/dist/views/metadata-admin/inspectors/DashboardDefaultInspector.d.ts

@@ -0,0 +1,28 @@
+/**
+ * DashboardDefaultInspector — the curated "home" panel for a Dashboard.
+ *
+ * Shown as the DEFAULT right panel (no selection) for a dashboard. Mirrors
+ * {@link ReportDefaultInspector} but for the flat Dashboard document.
+ *
+ * SPEC-DRIVEN: the layout / filter / performance config fields are NOT
+ * hardcoded. They are rendered by feeding the spec's canonical authoring
+ * form (`dashboardForm`) and the spec-derived Dashboard JSONSchema into the
+ * generic {@link SchemaForm}. Adding a new dashboard prop to
+ * `@objectstack/spec` flows through with zero code changes here.
+ *
+ * The inspector keeps a thin curated layer for the cross-cutting concerns the
+ * spec form can't express well on its own:
+ *   1. the LABEL / DESCRIPTION basics, and
+ *   2. the WIDGETS list — add / remove / reorder / select drills into the
+ *      scoped {@link DashboardWidgetInspector}. Those fields are therefore
+ *      pruned from the spec form to avoid double-editing.
+ *
+ * Unlike a View (a nested document with a variant BODY), a Dashboard is FLAT:
+ * label / description / widgets / layout all live at the draft top level, so
+ * every write is a plain shallow `onPatch`. Widgets are addressed by their
+ * own `id` (matching {@link DashboardWidgetInspector} and {@link
+ * DashboardPreview}), not by an index path.
+ */
+import * as React from 'react';
+import type { MetadataDefaultInspectorProps } from '../default-inspector-registry';
+export declare function DashboardDefaultInspector({ draft, onPatch, readOnly, locale, onSelectionChange, serverSchema, }: MetadataDefaultInspectorProps): React.JSX.Element;

package/dist/views/metadata-admin/inspectors/DashboardDefaultInspector.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DashboardDefaultInspector — the curated "home" panel for a Dashboard.
+ *
+ * Shown as the DEFAULT right panel (no selection) for a dashboard. Mirrors
+ * {@link ReportDefaultInspector} but for the flat Dashboard document.
+ *
+ * SPEC-DRIVEN: the layout / filter / performance config fields are NOT
+ * hardcoded. They are rendered by feeding the spec's canonical authoring
+ * form (`dashboardForm`) and the spec-derived Dashboard JSONSchema into the
+ * generic {@link SchemaForm}. Adding a new dashboard prop to
+ * `@objectstack/spec` flows through with zero code changes here.
+ *
+ * The inspector keeps a thin curated layer for the cross-cutting concerns the
+ * spec form can't express well on its own:
+ *   1. the LABEL / DESCRIPTION basics, and
+ *   2. the WIDGETS list — add / remove / reorder / select drills into the
+ *      scoped {@link DashboardWidgetInspector}. Those fields are therefore
+ *      pruned from the spec form to avoid double-editing.
+ *
+ * Unlike a View (a nested document with a variant BODY), a Dashboard is FLAT:
+ * label / description / widgets / layout all live at the draft top level, so
+ * every write is a plain shallow `onPatch`. Widgets are addressed by their
+ * own `id` (matching {@link DashboardWidgetInspector} and {@link
+ * DashboardPreview}), not by an index path.
+ */
+import * as React from 'react';
+import { GripVertical, X } from 'lucide-react';
+import { Badge, Button, Label } from '@object-ui/components';
+import { InspectorShell, InspectorTextField, appendArray, moveArray, spliceArray, uniqueId, } from './_shared';
+import { AddWidgetPicker } from '../previews/AddWidgetPicker';
+import { WIDGET_TYPE_META, UnknownWidgetIcon } from '../previews/widget-types';
+import { SchemaForm } from '../SchemaForm';
+import { getDashboardForm, getDashboardSchema } from '../dashboard-schema';
+import { mergeServerFields } from '../mergeServerFields';
+import { t } from '../i18n';
+/**
+ * Top-level dashboard fields rendered by this inspector's own controls (or by
+ * the dedicated widgets list), pruned from the spec-form graft so they are not
+ * double-rendered. Mirrors the `hiddenFields` passed to SchemaForm.
+ */
+const DASHBOARD_CURATED_FIELDS = new Set([
+    'name',
+    'label',
+    'description',
+    'widgets',
+]);
+export function DashboardDefaultInspector({ draft, onPatch, readOnly, locale, onSelectionChange, serverSchema, }) {
+    const tr = React.useCallback((key) => t(key, locale), [locale]);
+    const labelValue = typeof draft.label === 'string' ? draft.label : '';
+    const descriptionValue = typeof draft.description === 'string' ? draft.description : '';
+    const widgets = React.useMemo(() => Array.isArray(draft.widgets) ? draft.widgets : [], [draft.widgets]);
+    /* ─────────────── Widget read / write / reorder / select ─────────────── */
+    const addWidget = (type) => {
+        const existingIds = widgets.map((w) => w?.id).filter(Boolean);
+        const id = uniqueId('widget', existingIds);
+        const meta = WIDGET_TYPE_META[type];
+        const title = meta ? `New ${meta.label.toLowerCase()}` : 'New widget';
+        const widget = { id, type, title, ...(meta?.defaults ?? {}) };
+        onPatch({ widgets: appendArray(widgets, widget) });
+        onSelectionChange?.({ kind: 'widget', id, label: title });
+    };
+    const removeWidget = (index) => {
+        onPatch({ widgets: spliceArray(widgets, index, null) });
+    };
+    const moveWidget = (from, to) => {
+        if (from === to)
+            return;
+        onPatch({ widgets: moveArray(widgets, from, to) });
+    };
+    const selectWidget = (widget, index) => {
+        if (!widget?.id)
+            return;
+        onSelectionChange?.({
+            kind: 'widget',
+            id: widget.id,
+            label: widget.title || widget.id || `Widget ${index + 1}`,
+        });
+    };
+    const [dragIndex, setDragIndex] = React.useState(null);
+    const [overIndex, setOverIndex] = React.useState(null);
+    // Graft any server-only top-level dashboard fields onto the bundled-spec
+    // form so they are editable even when the bundled spec lags the server.
+    const { schema, form } = React.useMemo(() => mergeServerFields({
+        bundledSchema: getDashboardSchema(),
+        bundledForm: getDashboardForm(),
+        serverSchema,
+        excludeFields: DASHBOARD_CURATED_FIELDS,
+        sectionTitle: t('engine.inspector.moreFields', locale),
+    }), [serverSchema, locale]);
+    return (_jsxs(InspectorShell, { kindLabel: tr('engine.inspector.dashboard.kind'), title: String(labelValue || draft.name || tr('engine.inspector.dashboard.kind')), onClose: () => { }, closeLabel: tr('engine.inspector.dashboard.close'), hideClose: true, children: [_jsx(InspectorTextField, { label: tr('engine.inspector.dashboard.label'), value: labelValue, onCommit: (v) => onPatch({ label: v }), placeholder: tr('engine.inspector.dashboard.labelPlaceholder'), disabled: readOnly }), _jsx(InspectorTextField, { label: tr('engine.inspector.dashboard.description'), value: descriptionValue, onCommit: (v) => onPatch({ description: v }), placeholder: tr('engine.inspector.dashboard.descriptionPlaceholder'), disabled: readOnly }), _jsxs("div", { className: "border-t pt-3 space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: tr('engine.inspector.dashboard.widgets') }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: widgets.length })] }), widgets.length === 0 ? (_jsx("p", { className: "rounded-md border border-dashed bg-muted/30 px-3 py-3 text-center text-[11px] text-muted-foreground", children: tr('engine.inspector.dashboard.widgetsEmpty') })) : (_jsx("div", { className: "space-y-1", children: widgets.map((w, i) => {
+                            const meta = WIDGET_TYPE_META[w?.type];
+                            const Icon = meta?.icon ?? UnknownWidgetIcon;
+                            const showDropLine = overIndex === i && dragIndex !== null && dragIndex !== i;
+                            return (_jsxs("div", { draggable: !readOnly, onDragStart: () => setDragIndex(i), onDragEnd: () => {
+                                    setDragIndex(null);
+                                    setOverIndex(null);
+                                }, onDragOver: (e) => {
+                                    e.preventDefault();
+                                    setOverIndex(i);
+                                }, onDrop: () => {
+                                    if (dragIndex != null && dragIndex !== i)
+                                        moveWidget(dragIndex, i);
+                                    setDragIndex(null);
+                                    setOverIndex(null);
+                                }, className: 'group flex items-center gap-2 rounded-md border px-2 py-1.5 text-xs hover:bg-accent' +
+                                    (showDropLine ? ' border-primary' : ''), children: [!readOnly && (_jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0 cursor-grab text-muted-foreground" })), _jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), _jsx("button", { type: "button", className: "min-w-0 flex-1 truncate text-left font-medium", onClick: () => selectWidget(w, i), title: w?.title || w?.id, children: w?.title || w?.id || `Widget ${i + 1}` }), _jsx("code", { className: "text-[10px] text-muted-foreground", children: w?.type }), !readOnly && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100", onClick: () => removeWidget(i), title: tr('engine.inspector.dashboard.removeWidget'), "aria-label": tr('engine.inspector.dashboard.removeWidget'), children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }, w?.id ?? i));
+                        }) })), !readOnly && (_jsx(AddWidgetPicker, { onAdd: addWidget, label: tr('engine.inspector.add.widget') }))] }), _jsx("div", { className: "border-t pt-3", children: schema ? (_jsx(SchemaForm, { schema: schema, form: form, value: draft, hiddenFields: ['name', 'label', 'description', 'widgets'], readOnly: readOnly, onChange: (next) => onPatch(next) })) : (_jsx("p", { className: "text-[11px] text-muted-foreground", children: tr('engine.inspector.dashboard.noSchema') })) })] }));
+}

package/dist/views/metadata-admin/inspectors/DashboardWidgetInspector.d.ts

@@ -0,0 +1,18 @@
+/**
+ * DashboardWidgetInspector — scoped property panel for the widget
+ * selected inside <DashboardPreview>.
+ *
+ * Renders the per-widget form (title / type / data source / KPI value
+ * / aggregate / color / layout size) for the widget identified by
+ * `selection.id`. Patches are written back into `draft.widgets[i]`
+ * (immutably) and emitted via `onPatch`, so live preview updates
+ * instantly on the left side.
+ *
+ * The shape mirrors the WidgetPropertyPanel that ships in
+ * @object-ui/plugin-designer's DashboardEditor — same fields, same
+ * defaults, same enums — so users familiar with the standalone
+ * designer feel at home here.
+ */
+import * as React from 'react';
+import type { MetadataInspectorProps } from '../inspector-registry';
+export declare function DashboardWidgetInspector({ draft, selection, onPatch, onClearSelection, onSelectionChange, readOnly, locale, }: MetadataInspectorProps): React.JSX.Element;

package/dist/views/metadata-admin/inspectors/DashboardWidgetInspector.js

@@ -0,0 +1,139 @@
+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.
+/**
+ * DashboardWidgetInspector — scoped property panel for the widget
+ * selected inside <DashboardPreview>.
+ *
+ * Renders the per-widget form (title / type / data source / KPI value
+ * / aggregate / color / layout size) for the widget identified by
+ * `selection.id`. Patches are written back into `draft.widgets[i]`
+ * (immutably) and emitted via `onPatch`, so live preview updates
+ * instantly on the left side.
+ *
+ * The shape mirrors the WidgetPropertyPanel that ships in
+ * @object-ui/plugin-designer's DashboardEditor — same fields, same
+ * defaults, same enums — so users familiar with the standalone
+ * designer feel at home here.
+ */
+import * as React from 'react';
+import { ColorVariantPicker } from '../color-variant-field';
+import { X } from 'lucide-react';
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+import { t } from '../i18n';
+import { InspectorReorderButtons, moveArray } from './_shared';
+import { InspectorComboField } from './InspectorComboField';
+import { DatasetNamesEditor } from './ReportDefaultInspector';
+import { useDatasetCatalog, useDatasetSemantics } from '../previews/useDatasetCatalog';
+import { useObjectFields } from '../previews/useObjectFields';
+import { useObjectOptions } from './useDatasetFields';
+const WIDGET_TYPES = [
+    { value: 'metric', label: 'KPI Metric' },
+    { value: 'bar', label: 'Bar Chart' },
+    { value: 'line', label: 'Line Chart' },
+    { value: 'pie', label: 'Pie Chart' },
+    { value: 'table', label: 'Table' },
+    { value: 'grid', label: 'Grid' },
+];
+const AGGREGATES = ['count', 'sum', 'avg', 'min', 'max'];
+const COLORS = [
+    'default',
+    'blue',
+    'teal',
+    'orange',
+    'purple',
+    'success',
+    'warning',
+    'danger',
+];
+function findWidget(draft, id) {
+    const widgets = Array.isArray(draft.widgets)
+        ? draft.widgets
+        : [];
+    const index = widgets.findIndex((w) => w?.id === id);
+    if (index < 0)
+        return null;
+    return { widget: widgets[index], index };
+}
+export function DashboardWidgetInspector({ draft, selection, onPatch, onClearSelection, onSelectionChange, readOnly, locale, }) {
+    const widgetsAll = Array.isArray(draft.widgets)
+        ? draft.widgets
+        : [];
+    const selId = selection.kind === 'widget' ? selection.id : undefined;
+    const hit = selId ? findWidget(draft, selId) : null;
+    // ── Dataset binding (ADR-0021) ──────────────────────────────────────────
+    // Field access goes through `as any`: the bundled `@object-ui/types`
+    // `DashboardWidgetSchema` only gains `dataset`/`dimensions`/`values` once
+    // objectui bumps `@objectstack/spec`. Same accessor pattern as DatasetWidget.
+    const w = (hit?.widget ?? {});
+    const datasetName = typeof w.dataset === 'string' ? w.dataset : '';
+    const objectName = typeof w.object === 'string' ? w.object : '';
+    const dimensions = Array.isArray(w.dimensions)
+        ? w.dimensions.filter((x) => typeof x === 'string')
+        : [];
+    const values = Array.isArray(w.values)
+        ? w.values.filter((x) => typeof x === 'string')
+        : [];
+    // Catalogs — called unconditionally (stable hook order) BEFORE any early
+    // return, so the dataset/object/field pickers below bind to the live schema
+    // instead of free-text the author has to recall.
+    const catalog = useDatasetCatalog();
+    const semantics = useDatasetSemantics(datasetName || undefined, catalog);
+    const { options: objectOptions, loading: objectsLoading } = useObjectOptions();
+    const { fields: objectFields } = useObjectFields(objectName || undefined);
+    const datasetComboOptions = React.useMemo(() => {
+        const opts = catalog.datasets.map((d) => ({
+            value: d.name,
+            label: d.label && d.label !== d.name ? `${d.label} (${d.name})` : d.name,
+        }));
+        if (datasetName && !opts.some((o) => o.value === datasetName)) {
+            opts.push({ value: datasetName, label: datasetName });
+        }
+        return opts;
+    }, [catalog.datasets, datasetName]);
+    const objectComboOptions = React.useMemo(() => objectOptions.map((o) => ({ value: o.name, label: o.label })), [objectOptions]);
+    const fieldComboOptions = React.useMemo(() => objectFields.map((f) => ({ value: f.name, label: f.label, hint: f.type })), [objectFields]);
+    const measureOptions = React.useMemo(() => semantics.measures.map((m) => ({ name: m.name, label: m.aggregate ? `${m.name} · ${m.aggregate}` : m.name, type: 'number', hidden: false })), [semantics.measures]);
+    const dimensionOptions = React.useMemo(() => semantics.dimensions.map((d) => ({ name: d.name, label: d.name, type: d.type ?? 'text', hidden: false })), [semantics.dimensions]);
+    if (selection.kind !== 'widget') {
+        return (_jsx(InspectorEmpty, { message: `Unsupported selection kind: ${selection.kind}`, onClose: onClearSelection, locale: locale }));
+    }
+    if (!hit) {
+        return (_jsx(InspectorEmpty, { message: "The selected widget was removed from the draft.", onClose: onClearSelection, locale: locale }));
+    }
+    const { widget, index } = hit;
+    function patchWidget(updates) {
+        const widgets = [...widgetsAll];
+        widgets[index] = { ...widgets[index], ...updates };
+        onPatch({ widgets });
+    }
+    function moveWidget(to) {
+        onPatch({ widgets: moveArray(widgetsAll, index, to) });
+        if (widget.id) {
+            onSelectionChange?.({ kind: 'widget', id: widget.id, label: widget.title ?? undefined });
+        }
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: t('engine.inspector.widget.kind', locale) }), _jsx("div", { className: "truncate text-sm font-semibold", children: widget.title || selection.label || `Widget ${index + 1}` })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [_jsx(InspectorReorderButtons, { index: index, total: widgetsAll.length, onMove: moveWidget, upLabel: t('engine.inspector.reorder.up', locale), downLabel: t('engine.inspector.reorder.down', locale), disabled: readOnly }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: onClearSelection, title: t('engine.inspector.widget.close', locale), "aria-label": t('engine.inspector.widget.close', locale), children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] }), _jsx(Field, { id: "widget-title", label: t('engine.inspector.widget.title', locale), children: _jsx(Input, { id: "widget-title", value: widget.title ?? '', onChange: (e) => patchWidget({ title: e.target.value }), disabled: readOnly }) }), _jsx(Field, { id: "widget-type", label: t('engine.inspector.widget.type', locale), children: _jsxs(Select, { value: widget.type ?? 'metric', onValueChange: (v) => patchWidget({ type: v }), disabled: readOnly, children: [_jsx(SelectTrigger, { id: "widget-type", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: WIDGET_TYPES.map((wt) => (_jsx(SelectItem, { value: wt.value, children: wt.label }, wt.value))) })] }) }), _jsxs("div", { className: "space-y-3 rounded-md border border-dashed border-primary/40 bg-primary/5 p-3", children: [_jsx("div", { className: "text-[10px] font-semibold uppercase tracking-wider text-primary/80", children: t('engine.inspector.widget.datasetSection', locale) }), _jsxs(Field, { id: "widget-dataset", label: t('engine.inspector.widget.dataset', locale), children: [_jsx(InspectorComboField, { value: datasetName, onCommit: (v) => patchWidget({ dataset: v || undefined }), options: datasetComboOptions, loading: catalog.loading, placeholder: t('engine.inspector.widget.datasetPlaceholder', locale), searchPlaceholder: t('engine.inspector.widget.datasetPlaceholder', locale), disabled: readOnly, mono: true }), _jsx("p", { className: "text-[10px] leading-snug text-muted-foreground", children: t('engine.inspector.widget.datasetHint', locale) })] }), datasetName && (_jsxs(_Fragment, { children: [_jsx(DatasetNamesEditor, { label: t('engine.inspector.widget.dimensions', locale), emptyText: t('engine.inspector.widget.dimensionsHint', locale), names: dimensions, options: dimensionOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => patchWidget({ dimensions: next }) }), _jsx(DatasetNamesEditor, { label: t('engine.inspector.widget.values', locale), emptyText: t('engine.inspector.widget.valuesHint', locale), names: values, options: measureOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => patchWidget({ values: next }) })] }))] }), _jsx(Field, { id: "widget-object", label: t('engine.inspector.widget.object', locale), children: _jsx(InspectorComboField, { value: widget.object ?? '', onCommit: (v) => patchWidget({ object: v || undefined }), options: objectComboOptions, loading: objectsLoading, placeholder: "Select an object\u2026", searchPlaceholder: "Search objects\u2026", disabled: readOnly, mono: true }) }), _jsx(Field, { id: "widget-value-field", label: t('engine.inspector.widget.valueField', locale), children: _jsx(InspectorComboField, { value: widget.valueField ?? '', onCommit: (v) => patchWidget({ valueField: v || undefined }), options: fieldComboOptions, placeholder: widget.object ? 'Select a field…' : 'e.g. amount', searchPlaceholder: "Search fields\u2026", disabled: readOnly, mono: true }) }), _jsx(Field, { id: "widget-category-field", label: t('engine.inspector.widget.categoryField', locale), children: _jsx(InspectorComboField, { value: widget.categoryField ?? '', onCommit: (v) => patchWidget({ categoryField: v || undefined }), options: fieldComboOptions, placeholder: widget.object ? 'Select a field…' : 'e.g. status', searchPlaceholder: "Search fields\u2026", disabled: readOnly, mono: true }) }), _jsx(Field, { id: "widget-aggregate", label: t('engine.inspector.widget.aggregate', locale), children: _jsxs(Select, { value: widget.aggregate ?? 'count', onValueChange: (v) => patchWidget({ aggregate: v }), disabled: readOnly, children: [_jsx(SelectTrigger, { id: "widget-aggregate", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: AGGREGATES.map((a) => (_jsx(SelectItem, { value: a, children: a }, a))) })] }) }), _jsx(Field, { id: "widget-color", label: t('engine.inspector.widget.color', locale), children: _jsx(ColorVariantPicker, { value: widget.colorVariant ?? 'default', onChange: (v) => patchWidget({ colorVariant: v }), disabled: readOnly, options: COLORS.map((c) => ({ value: c })) }) }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Field, { id: "widget-w", label: t('engine.inspector.widget.width', locale), children: _jsx(Input, { id: "widget-w", type: "number", min: 1, value: widget.layout?.w ?? 1, onChange: (e) => patchWidget({
+                                layout: {
+                                    ...(widget.layout ?? {}),
+                                    w: Number(e.target.value) || 1,
+                                },
+                            }), disabled: readOnly }) }), _jsx(Field, { id: "widget-h", label: t('engine.inspector.widget.height', locale), children: _jsx(Input, { id: "widget-h", type: "number", min: 1, value: widget.layout?.h ?? 1, onChange: (e) => patchWidget({
+                                layout: {
+                                    ...(widget.layout ?? {}),
+                                    h: Number(e.target.value) || 1,
+                                },
+                            }), disabled: readOnly }) })] }), !readOnly && (_jsx("div", { className: "pt-2 border-t", children: _jsx(Button, { type: "button", variant: "outline", size: "sm", className: "w-full text-destructive hover:text-destructive", onClick: () => {
+                        const widgets = Array.isArray(draft.widgets)
+                            ? [...draft.widgets]
+                            : [];
+                        widgets.splice(index, 1);
+                        onPatch({ widgets });
+                        onClearSelection();
+                    }, children: t('engine.inspector.widget.remove', locale) }) }))] }));
+}
+function Field({ id, label, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: id, className: "text-xs font-medium text-muted-foreground", children: label }), children] }));
+}
+function InspectorEmpty({ message, onClose, locale, }) {
+    return (_jsxs("div", { className: "space-y-3 rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: [_jsx("p", { children: message }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClose, children: t('engine.inspector.widget.close', locale) })] }));
+}

package/dist/views/metadata-admin/inspectors/DatasetDefaultInspector.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DatasetDefaultInspector — the curated designer for an analytics `dataset`
+ * (ADR-0021). Replaces the generic whole-draft JSON SchemaForm with structured,
+ * fool-proof editors for the dataset's parts:
+ *
+ *   - base `object`,
+ *   - `include` relationships (the join allowlist — D-C),
+ *   - `dimensions` (name + field/`relationship.field` + type + granularity), and
+ *   - `measures` (name + aggregate + field + format/currency/derived).
+ *
+ * The base object, the included relationships, and every `field` are picked
+ * from the live object graph (a searchable combo over {@link useDatasetFieldCatalog})
+ * — not recalled by hand — so authoring matches mainstream low-code dataset
+ * builders. The aggregate / type / granularity are closed dropdowns so an
+ * author can't type an unsupported value. Each combo still allows a custom
+ * value as an escape hatch (offline catalog, computed path). Edits flow through
+ * `onPatch`; the DatasetPreview on the canvas re-runs live as the draft changes.
+ */
+import * as React from 'react';
+import type { MetadataDefaultInspectorProps } from '../default-inspector-registry';
+export declare function DatasetDefaultInspector({ draft, onPatch, readOnly, name }: MetadataDefaultInspectorProps): React.JSX.Element;