@object-ui/app-shell 6.2.3 → 7.1.0

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

@@ -0,0 +1,332 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * PageBlockInspector — scoped editor for the selected page block /
+ * component subtree.
+ *
+ * Selection shape:  { kind: 'block', id: 'children[i]' | 'children[i].children[j]' | … }
+ *
+ * A Page schema is a SDUI tree; "blocks" are children nodes. The id
+ * is a dotted path of `children[i]` hops, identical in spirit to
+ * AppNavInspector but always rooted at top-level `children`.
+ */
+import * as React from 'react';
+import { t } from '../i18n';
+import { InspectorShell, InspectorReorderButtons, InspectorTextField, InspectorNumberField, InspectorSelectField, InspectorCheckboxField, InspectorRemoveButton, InspectorEmptyState, moveArray, } from './_shared';
+import { BLOCK_CONFIG, blockHasConfig } from '../previews/block-config';
+import { ColorVariantPicker } from '../color-variant-field';
+import { ConditionBuilder } from './ConditionBuilder';
+import { useObjectOptions } from '../previews/useObjectOptions';
+import { useObjectFields } from '../previews/useObjectFields';
+import { Button, Input, Label, Select, SelectTrigger, SelectContent, SelectItem, SelectValue, } from '@object-ui/components';
+import { Plus, X, Trash2 } from 'lucide-react';
+// ── Schema-driven picker fields ──────────────────────────────────────────────
+/** Field options for an object (visible fields), as {value,label}. */
+function useFieldOptions(objectName) {
+    const { fields } = useObjectFields(objectName);
+    return React.useMemo(() => fields
+        .filter((f) => !f.hidden)
+        .map((f) => ({ value: f.name, label: f.label && f.label !== f.name ? `${f.label} (${f.name})` : f.name })), [fields]);
+}
+/** Object dropdown; falls back to a free-text input when the list is empty. */
+function ObjectPickerField({ label, value, onCommit, disabled }) {
+    const { options } = useObjectOptions();
+    if (options.length === 0) {
+        return _jsx(InspectorTextField, { label: label, value: value ?? '', placeholder: "snake_case object", onCommit: onCommit, disabled: disabled, mono: true });
+    }
+    return _jsx(InspectorSelectField, { label: label, value: value || undefined, options: options, onCommit: onCommit, disabled: disabled });
+}
+/** Field dropdown for `objectName`; falls back to free text when unresolved. */
+function FieldPickerField({ label, objectName, value, onCommit, disabled }) {
+    const options = useFieldOptions(objectName);
+    if (!objectName || options.length === 0) {
+        return _jsx(InspectorTextField, { label: label, value: value ?? '', onCommit: onCommit, disabled: disabled, mono: true });
+    }
+    return _jsx(InspectorSelectField, { label: label, value: value || undefined, options: options, onCommit: onCommit, disabled: disabled });
+}
+/** Editable list of field names — each row a field dropdown (or text fallback). */
+function FieldListField({ label, objectName, value, onChange, disabled }) {
+    const options = useFieldOptions(objectName);
+    const arr = Array.isArray(value) ? value : [];
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), arr.map((s, i) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [options.length > 0 ? (_jsx("div", { className: "flex-1", children: _jsxs(Select, { value: s ? String(s) : '', onValueChange: (v) => { const n = [...arr]; n[i] = v; onChange(n); }, disabled: disabled, children: [_jsx(SelectTrigger, { className: "h-8", children: _jsx(SelectValue, { placeholder: "\u2014" }) }), _jsx(SelectContent, { children: options.map((o) => _jsx(SelectItem, { value: o.value, children: o.label }, o.value)) })] }) })) : (_jsx(Input, { className: "h-8 text-sm", value: String(s ?? ''), placeholder: "field name", disabled: disabled, onChange: (e) => { const n = [...arr]; n[i] = e.target.value; onChange(n); } })), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", disabled: disabled, "aria-label": "Remove", onClick: () => onChange(arr.filter((_, j) => j !== i)), children: _jsx(X, { className: "h-4 w-4" }) })] }, i))), !disabled && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => onChange([...arr, '']), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), " Add"] }))] }));
+}
+/** Pretty-print a value for the JSON editor; undefined → empty string. */
+function safeStringify(value) {
+    if (value === undefined)
+        return '';
+    try {
+        return JSON.stringify(value, null, 2);
+    }
+    catch {
+        return '';
+    }
+}
+/** Editable JSON field for object/array properties — commits on blur so a
+ *  half-typed value never trips the parser. Empty clears the property. */
+function InspectorJsonField({ label, value, onCommit, disabled }) {
+    const initial = React.useMemo(() => safeStringify(value), [value]);
+    const [text, setText] = React.useState(initial);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => { setText(initial); setError(null); }, [initial]);
+    const commit = () => {
+        if (disabled)
+            return;
+        const trimmed = text.trim();
+        if (trimmed === '') {
+            setError(null);
+            onCommit(undefined);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(trimmed);
+            setError(null);
+            onCommit(parsed);
+        }
+        catch {
+            setError('Invalid JSON');
+        }
+    };
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: label }), _jsx("textarea", { value: text, onChange: (e) => setText(e.target.value), onBlur: commit, disabled: disabled, spellCheck: false, rows: Math.min(12, Math.max(2, text.split('\n').length)), 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" }), error && _jsx("div", { className: "text-[11px] text-destructive", children: error })] }));
+}
+/** Renders one arbitrary block property by inferring an editor from its
+ *  runtime type. Guarantees the inspector can edit anything visible in the
+ *  source, even block types with no curated BLOCK_CONFIG entry. */
+function GenericPropField({ name, value, onCommit, disabled }) {
+    if (typeof value === 'boolean') {
+        return _jsx(InspectorCheckboxField, { label: name, value: value, onCommit: onCommit, disabled: disabled });
+    }
+    if (typeof value === 'number') {
+        return _jsx(InspectorNumberField, { label: name, value: value, onCommit: (v) => onCommit(v), disabled: disabled });
+    }
+    if (value === null || typeof value === 'string') {
+        return _jsx(InspectorTextField, { label: name, value: value == null ? '' : value, onCommit: onCommit, disabled: disabled, mono: true });
+    }
+    return _jsx(InspectorJsonField, { label: name, value: value, onCommit: onCommit, disabled: disabled });
+}
+/** Block `properties` keys whose values are nested block trees — these are
+ *  edited visually on the canvas, so they are excluded from the generic
+ *  property editor to avoid two conflicting editors for the same data. */
+const STRUCTURAL_PROP_KEYS = new Set(['children', 'body']);
+const REMOVE = Symbol('remove');
+/** A segment is `key` (object) or `key[i]` (array). */
+export function parsePath(id) {
+    const segs = id.split('.');
+    const hops = [];
+    for (const s of segs) {
+        const m = /^([a-zA-Z_]\w*)(?:\[(\d+)\])?$/.exec(s);
+        if (!m)
+            return null;
+        hops.push({ key: m[1], index: m[2] != null ? Number(m[2]) : -1 });
+    }
+    return hops.length > 0 ? hops : null;
+}
+/** Flatten hops to a JSON-pointer-like path: object key, then index if any. */
+export function hopsToPath(hops) {
+    const p = [];
+    for (const h of hops) {
+        p.push(h.key);
+        if (h.index >= 0)
+            p.push(h.index);
+    }
+    return p;
+}
+export function getByPath(root, path) {
+    let node = root;
+    for (const seg of path) {
+        if (node == null)
+            return null;
+        node = node[seg];
+    }
+    return node ?? null;
+}
+/** Immutable set/remove along a path. `value === REMOVE` deletes the leaf. */
+export function setByPath(root, path, value) {
+    if (path.length === 0)
+        return value;
+    const [head, ...rest] = path;
+    if (typeof head === 'number') {
+        const arr = Array.isArray(root) ? [...root] : [];
+        if (rest.length === 0) {
+            if (value === REMOVE)
+                arr.splice(head, 1);
+            else
+                arr[head] = value;
+        }
+        else
+            arr[head] = setByPath(arr[head], rest, value);
+        return arr;
+    }
+    const obj = { ...(root || {}) };
+    if (rest.length === 0) {
+        if (value === REMOVE)
+            delete obj[head];
+        else
+            obj[head] = value;
+    }
+    else
+        obj[head] = setByPath(obj[head], rest, value);
+    return obj;
+}
+export function readAt(root, hops) {
+    return getByPath(root, hopsToPath(hops));
+}
+/** Returns a shallow patch `{ [topKey]: newValue }` for onPatch. */
+export function writeAt(root, hops, replacement) {
+    const path = hopsToPath(hops);
+    const next = setByPath(root, path, replacement === null ? REMOVE : replacement);
+    const topKey = path[0];
+    return { [topKey]: next[topKey] };
+}
+export function readSiblings(root, hops) {
+    const path = hopsToPath(hops);
+    const last = path[path.length - 1];
+    if (typeof last !== 'number')
+        return null;
+    const siblings = getByPath(root, path.slice(0, -1));
+    if (!Array.isArray(siblings))
+        return null;
+    return { siblings: siblings, index: last };
+}
+export function writeSiblings(root, hops, nextSiblings) {
+    const path = hopsToPath(hops);
+    const next = setByPath(root, path.slice(0, -1), nextSiblings);
+    const topKey = path[0];
+    return { [topKey]: next[topKey] };
+}
+export function PageBlockInspector({ selection, draft, onPatch, onClearSelection, onSelectionChange, locale, readOnly }) {
+    // Slotted record page: selection ids are `slot:<name>:<index>` and address
+    // `draft.slots.<name>` (a single component is normalised to a 1-element array).
+    // `slot:<name>:<idx>` optionally followed by a nested sub-path within the
+    // slot's block (e.g. `slot:tabs:0.properties.items[0].children[0]`), so a
+    // block inside a slotted container is addressable too (issue #1499).
+    const slotMatch = /^slot:([a-zA-Z_]+):(\d+)(?:\.(.+))?$/.exec(selection.id);
+    const hops = slotMatch ? null : parsePath(selection.id);
+    const slotName = slotMatch ? slotMatch[1] : '';
+    const slotIdx = slotMatch ? Number(slotMatch[2]) : -1;
+    const slotSub = slotMatch ? slotMatch[3] : undefined;
+    const subHops = slotSub ? parsePath(slotSub) : null;
+    const slotsObj = draft.slots && typeof draft.slots === 'object' ? draft.slots : {};
+    const slotArr = slotMatch
+        ? Array.isArray(slotsObj[slotName])
+            ? slotsObj[slotName]
+            : slotsObj[slotName] != null
+                ? [slotsObj[slotName]]
+                : []
+        : [];
+    const slotBase = slotMatch ? (slotArr[slotIdx] ?? null) : null;
+    // Write the slot's whole array back (delete the base block when null).
+    const writeSlot = (nextArr) => onPatch({ slots: { ...slotsObj, [slotName]: nextArr } });
+    const writeSlotBase = (nextBase) => writeSlot(nextBase === null ? slotArr.filter((_, i) => i !== slotIdx) : slotArr.map((b, i) => (i === slotIdx ? nextBase : b)));
+    const block = slotMatch
+        ? subHops
+            ? readAt((slotBase || {}), subHops)
+            : slotBase
+        : hops
+            ? readAt(draft, hops)
+            : null;
+    const sibInfo = slotMatch
+        ? subHops
+            ? readSiblings((slotBase || {}), subHops)
+            : { siblings: slotArr, index: slotIdx }
+        : hops
+            ? readSiblings(draft, hops)
+            : null;
+    if ((!slotMatch && !hops) || !block) {
+        return (_jsx(InspectorShell, { kindLabel: t('engine.inspector.pageBlock.kind', locale), title: selection.label ?? selection.id, onClose: onClearSelection, closeLabel: t('engine.inspector.pageBlock.close', locale), children: _jsx(InspectorEmptyState, { message: selection.id }) }));
+    }
+    const patch = (updates) => {
+        if (!slotMatch)
+            return onPatch(writeAt(draft, hops, { ...block, ...updates }));
+        if (subHops)
+            return writeSlotBase({ ...slotBase, ...writeAt((slotBase || {}), subHops, { ...block, ...updates }) });
+        return writeSlotBase({ ...block, ...updates });
+    };
+    // Per-block configurable properties (spec `properties`). The renderer hoists
+    // `properties.*` to the top level, so we read from either and always write
+    // back to `properties` (the canonical shape).
+    const blockProps = block.properties || {};
+    // The record page's bound object — drives `field-picker`/`field-list` with
+    // objectFrom:'page'. (objectFrom:'self' reads a sibling block property.)
+    const pageObject = typeof draft?.object === 'string' ? draft.object : undefined;
+    const resolveObject = (src) => src.objectFrom === 'page'
+        ? pageObject
+        : src.objectProp != null && blockProps[src.objectProp] != null
+            ? String(blockProps[src.objectProp])
+            : undefined;
+    const readProp = (name) => blockProps[name] ?? block[name];
+    const patchProp = (name, value) => patch({ properties: { ...blockProps, [name]: value } });
+    // Properties already handled by curated fields — excluded from the generic
+    // "Advanced" section so each property has exactly one editor.
+    const curatedNames = new Set((blockHasConfig(block.type) ? BLOCK_CONFIG[block.type] : []).map((f) => f.name));
+    const advancedKeys = Object.keys(blockProps).filter((key) => !curatedNames.has(key) && !STRUCTURAL_PROP_KEYS.has(key));
+    // Generic, recursive field renderer. `read`/`write` abstract the value source
+    // (the block's `properties` at the top level, or an item object inside an
+    // `array` field), so the same code drives nested array-item editors.
+    const renderField = (f, read, write, keyPrefix = '') => {
+        const k = `${keyPrefix}${f.name}`;
+        switch (f.kind) {
+            case 'number':
+                return (_jsx(InspectorNumberField, { label: f.label, value: typeof read(f.name) === 'number' ? read(f.name) : undefined, placeholder: f.placeholder, onCommit: (v) => write(f.name, v), disabled: readOnly }, k));
+            case 'boolean':
+                return (_jsx(InspectorCheckboxField, { label: f.label, value: !!read(f.name), onCommit: (v) => write(f.name, v), disabled: readOnly }, k));
+            case 'color':
+                return (_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: f.label }), _jsx(ColorVariantPicker, { value: read(f.name) != null ? String(read(f.name)) : undefined, onChange: (v) => write(f.name, v), disabled: readOnly, options: f.options })] }, k));
+            case 'select':
+                return (_jsx(InspectorSelectField, { label: f.label, value: read(f.name) != null ? String(read(f.name)) : undefined, options: f.options, onCommit: (v) => write(f.name, v), disabled: readOnly }, k));
+            case 'string-list': {
+                const arr = Array.isArray(read(f.name)) ? read(f.name) : [];
+                return (_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: f.label }), arr.map((s, i) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Input, { className: "h-8 text-sm", value: String(s ?? ''), placeholder: f.placeholder, disabled: readOnly, onChange: (e) => { const next = [...arr]; next[i] = e.target.value; write(f.name, next); } }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", disabled: readOnly, "aria-label": "Remove", onClick: () => write(f.name, arr.filter((_, j) => j !== i)), children: _jsx(X, { className: "h-4 w-4" }) })] }, i))), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => write(f.name, [...arr, '']), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), " Add"] }))] }, k));
+            }
+            case 'array': {
+                const arr = Array.isArray(read(f.name)) ? read(f.name) : [];
+                return (_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: f.label }), arr.map((item, i) => {
+                            const itemObj = item && typeof item === 'object' ? item : {};
+                            return (_jsxs("div", { className: "space-y-2 rounded-md border border-border p-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-xs text-muted-foreground", children: ["#", i + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-7 w-7", disabled: readOnly, "aria-label": "Remove item", onClick: () => write(f.name, arr.filter((_, j) => j !== i)), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }), f.itemFields.map((itf) => renderField(itf, (n) => itemObj[n], (n, v) => { const next = [...arr]; next[i] = { ...itemObj, [n]: v }; write(f.name, next); }, `${k}-${i}-`))] }, i));
+                        }), !readOnly && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => write(f.name, [...arr, {}]), children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), " ", f.addLabel || 'Add'] }))] }, k));
+            }
+            case 'object-picker':
+                return (_jsx(ObjectPickerField, { label: f.label, value: read(f.name) != null ? String(read(f.name)) : undefined, onCommit: (v) => write(f.name, v), disabled: readOnly }, k));
+            case 'field-picker':
+                return (_jsx(FieldPickerField, { label: f.label, objectName: resolveObject(f), value: read(f.name) != null ? String(read(f.name)) : undefined, onCommit: (v) => write(f.name, v), disabled: readOnly }, k));
+            case 'field-list':
+                return (_jsx(FieldListField, { label: f.label, objectName: resolveObject(f), value: read(f.name), onChange: (v) => write(f.name, v), disabled: readOnly }, k));
+            default:
+                return (_jsx(InspectorTextField, { label: f.label, value: read(f.name) != null ? String(read(f.name)) : '', placeholder: f.placeholder, onCommit: (v) => write(f.name, v), disabled: readOnly }, k));
+        }
+    };
+    const remove = () => {
+        if (slotMatch) {
+            if (subHops)
+                writeSlotBase({ ...slotBase, ...writeAt((slotBase || {}), subHops, null) });
+            else
+                writeSlotBase(null);
+        }
+        else
+            onPatch(writeAt(draft, hops, null));
+        onClearSelection();
+    };
+    // Re-serialise hops to an id, honouring object hops (index < 0 → no `[i]`).
+    const fmtHops = (hs) => hs.map((h) => (h.index >= 0 ? `${h.key}[${h.index}]` : h.key)).join('.');
+    const move = (to) => {
+        if (!sibInfo)
+            return;
+        if (slotMatch) {
+            if (subHops) {
+                const next = moveArray(sibInfo.siblings, sibInfo.index, to);
+                writeSlotBase({ ...slotBase, ...writeSiblings((slotBase || {}), subHops, next) });
+                const newSub = fmtHops([...subHops.slice(0, -1), { key: subHops[subHops.length - 1].key, index: to }]);
+                onSelectionChange?.({ kind: 'block', id: `slot:${slotName}:${slotIdx}.${newSub}`, label: String(block.id || block.type || to) });
+            }
+            else {
+                writeSlot(moveArray(slotArr, slotIdx, to));
+                onSelectionChange?.({ kind: 'block', id: `slot:${slotName}:${to}`, label: String(block.id || block.type || to) });
+            }
+            return;
+        }
+        const next = moveArray(sibInfo.siblings, sibInfo.index, to);
+        onPatch(writeSiblings(draft, hops, next));
+        const newId = fmtHops([...hops.slice(0, -1), { key: hops[hops.length - 1].key, index: to }]);
+        onSelectionChange?.({ kind: 'block', id: newId, label: String(block.id || block.type || newId) });
+    };
+    return (_jsxs(InspectorShell, { kindLabel: t('engine.inspector.pageBlock.kind', locale), title: String(block.id || block.type || selection.id), onClose: onClearSelection, closeLabel: t('engine.inspector.pageBlock.close', locale), headerActions: sibInfo ? (_jsx(InspectorReorderButtons, { index: sibInfo.index, total: sibInfo.siblings.length, onMove: move, upLabel: t('engine.inspector.reorder.up', locale), downLabel: t('engine.inspector.reorder.down', locale), disabled: readOnly })) : undefined, footer: _jsx(InspectorRemoveButton, { label: t('engine.inspector.pageBlock.remove', locale), onClick: remove, disabled: readOnly }), children: [_jsx(InspectorTextField, { label: t('engine.inspector.pageBlock.type', locale), value: block.type ?? '', onCommit: (v) => patch({ type: v }), disabled: readOnly, mono: true }), _jsx(InspectorTextField, { label: t('engine.inspector.pageBlock.id', locale), value: block.id ?? '', onCommit: (v) => patch({ id: v }), disabled: readOnly, mono: true }), _jsx(InspectorTextField, { label: t('engine.inspector.pageBlock.className', locale), value: block.className ?? '', onCommit: (v) => patch({ className: v }), disabled: readOnly, mono: true }), _jsx(ConditionBuilder, { label: t('engine.inspector.pageBlock.hidden', locale), value: block.hidden ?? '', onCommit: (v) => patch({ hidden: v || undefined }), objectName: pageObject, disabled: readOnly }), blockHasConfig(block.type) && (_jsxs("div", { className: "space-y-3 border-t border-border pt-3", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t('engine.inspector.pageBlock.properties', locale) }), BLOCK_CONFIG[block.type].map((f) => renderField(f, readProp, patchProp))] })), advancedKeys.length > 0 && (_jsxs("div", { className: "space-y-3 border-t border-border pt-3", children: [_jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t('engine.inspector.pageBlock.advanced', locale) }), advancedKeys.map((key) => (_jsx(GenericPropField, { name: key, value: blockProps[key], onCommit: (v) => patchProp(key, v), disabled: readOnly }, key)))] }))] }));
+}

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

@@ -0,0 +1,58 @@
+/**
+ * ReportDefaultInspector — the curated "home" panel for a Report.
+ *
+ * Shown as the DEFAULT right panel (no selection) for a report. Mirrors
+ * {@link ViewVariantInspector} but for the flat Report document.
+ *
+ * SPEC-DRIVEN: the per-report-type config fields are NOT hardcoded. They are
+ * rendered by feeding the spec's canonical authoring form (`reportForm`) and
+ * the spec-derived Report JSONSchema into the generic {@link SchemaForm}. The
+ * form's type-conditional `visibleOn` section (joined blocks) automatically
+ * surfaces the right fields — adding a new report type or prop to
+ * `@objectstack/spec` flows through with zero code changes here.
+ *
+ * ADR-0021 single-form: a 9.0 report is dataset-bound — it binds a
+ * semantic-layer `dataset` and selects its `values` (measure names) grouped
+ * by `rows` (dimension names). The inspector keeps a thin curated layer for
+ * the concerns the spec form can't express well on its own:
+ *   1. the REPORT TYPE picker (options sourced from the spec `type` enum),
+ *   2. the DATASET binding (drives the measure/dimension catalogs), and
+ *   3. the VALUES / ROWS lists — add / remove / reorder from the bound
+ *      dataset's measures and dimensions.
+ * Those fields are pruned from the spec form to avoid double-editing.
+ *
+ * Unlike a View (a nested document with a variant BODY), a Report is FLAT:
+ * label / dataset / type / values / rows all live at the draft top level, so
+ * every write is a plain shallow `onPatch`.
+ */
+import * as React from 'react';
+import type { MetadataDefaultInspectorProps } from '../default-inspector-registry';
+import type { ObjectFieldInfo } from '../previews/useObjectFields';
+import { type DatasetCatalogEntry } from '../previews/useDatasetCatalog';
+export interface ReportDefaultInspectorProps extends MetadataDefaultInspectorProps {
+    /**
+     * Pre-resolved dataset catalog. When supplied, the inspector skips the
+     * network fetches (`useDatasetCatalog`) and uses this list instead. Hosts
+     * that already hold the catalog pass it to keep the inspector free of any
+     * network dependency.
+     */
+    datasetCatalogOverride?: DatasetCatalogEntry[];
+}
+/**
+ * A reorderable list of dataset member names (the report's `values` or
+ * `rows`) with an add-popover fed by the bound dataset's catalog. Exported so
+ * the Dashboard widget inspector can bind the same governed dimensions/measures
+ * the same way (single source of truth for dataset-member editing).
+ */
+export declare function DatasetNamesEditor({ label, emptyText, names, options, loading, error, readOnly, onCommit, }: {
+    label: string;
+    emptyText: string;
+    names: string[];
+    /** Picker options from the dataset's semantic layer. */
+    options: ObjectFieldInfo[];
+    loading: boolean;
+    error: string | null;
+    readOnly?: boolean;
+    onCommit: (next: string[]) => void;
+}): React.JSX.Element;
+export declare function ReportDefaultInspector({ name, draft, onPatch, readOnly, locale, datasetCatalogOverride, serverSchema, }: ReportDefaultInspectorProps): React.JSX.Element;

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

@@ -0,0 +1,218 @@
+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.
+/**
+ * ReportDefaultInspector — the curated "home" panel for a Report.
+ *
+ * Shown as the DEFAULT right panel (no selection) for a report. Mirrors
+ * {@link ViewVariantInspector} but for the flat Report document.
+ *
+ * SPEC-DRIVEN: the per-report-type config fields are NOT hardcoded. They are
+ * rendered by feeding the spec's canonical authoring form (`reportForm`) and
+ * the spec-derived Report JSONSchema into the generic {@link SchemaForm}. The
+ * form's type-conditional `visibleOn` section (joined blocks) automatically
+ * surfaces the right fields — adding a new report type or prop to
+ * `@objectstack/spec` flows through with zero code changes here.
+ *
+ * ADR-0021 single-form: a 9.0 report is dataset-bound — it binds a
+ * semantic-layer `dataset` and selects its `values` (measure names) grouped
+ * by `rows` (dimension names). The inspector keeps a thin curated layer for
+ * the concerns the spec form can't express well on its own:
+ *   1. the REPORT TYPE picker (options sourced from the spec `type` enum),
+ *   2. the DATASET binding (drives the measure/dimension catalogs), and
+ *   3. the VALUES / ROWS lists — add / remove / reorder from the bound
+ *      dataset's measures and dimensions.
+ * Those fields are pruned from the spec form to avoid double-editing.
+ *
+ * Unlike a View (a nested document with a variant BODY), a Report is FLAT:
+ * label / dataset / type / values / rows all live at the draft top level, so
+ * every write is a plain shallow `onPatch`.
+ */
+import * as React from 'react';
+import { Badge, Label } from '@object-ui/components';
+import { InspectorShell, InspectorTextField, InspectorSelectField, appendArray, moveArray, spliceArray, } from './_shared';
+import { AddFieldPopover, FieldListRow } from '../previews/ViewColumnPanes';
+import { toFieldName } from '../previews/object-fields-io';
+import { SchemaForm } from '../SchemaForm';
+import { useDatasetCatalog, useDatasetSemantics, } from '../previews/useDatasetCatalog';
+import { getReportForm, getReportSchema } from '../report-schema';
+import { mergeServerFields } from '../mergeServerFields';
+import { t } from '../i18n';
+/**
+ * Top-level report fields this inspector renders with its own dedicated
+ * controls (type / dataset / values / rows + identity), so the spec-form
+ * graft never double-renders them. Mirrors the `hiddenFields` passed to
+ * SchemaForm.
+ */
+const REPORT_CURATED_FIELDS = new Set([
+    'type',
+    'label',
+    'name',
+    'dataset',
+    'values',
+    'rows',
+    'columns', // matrix across-dimensions — dedicated list below
+    'chart', // dedicated Chart panel below (type + dataset-aware X/Y pickers)
+]);
+/**
+ * Chart types offered in the curated Chart panel. A dataset-bound report plots
+ * one measure (yAxis) across one dimension (xAxis), so we surface the families
+ * that fit that shape; the renderer maps the rest. (`''` = no chart / table-only.)
+ */
+const REPORT_CHART_TYPES = ['bar', 'column', 'line', 'area', 'pie', 'donut'];
+/** i18n keys for the spec `type` enum (falls back to the raw value). */
+const TYPE_LABEL_KEYS = {
+    tabular: 'engine.inspector.report.type.tabular',
+    summary: 'engine.inspector.report.type.summary',
+    matrix: 'engine.inspector.report.type.matrix',
+    joined: 'engine.inspector.report.type.joined',
+};
+/** Build the Report-type <select> options from the spec `type` enum. */
+function useTypeOptions(currentType, locale) {
+    return React.useMemo(() => {
+        const schema = getReportSchema();
+        const rawEnum = schema?.properties?.type?.enum;
+        const values = Array.isArray(rawEnum) && rawEnum.length
+            ? rawEnum.filter((v) => typeof v === 'string')
+            : ['tabular', 'summary', 'matrix', 'joined'];
+        const opts = values.map((v) => {
+            const key = TYPE_LABEL_KEYS[v];
+            // i18n with a raw-value fallback (`t` echoes unknown keys verbatim).
+            const label = key ? t(key, locale) : v;
+            return { value: v, label: label === key ? v : label };
+        });
+        if (!opts.some((o) => o.value === currentType) && currentType) {
+            opts.push({ value: currentType, label: currentType });
+        }
+        return opts;
+    }, [currentType, locale]);
+}
+/** Read a `string[]` draft field defensively. */
+function readNames(value) {
+    return Array.isArray(value) ? value.filter((v) => typeof v === 'string') : [];
+}
+/**
+ * A reorderable list of dataset member names (the report's `values` or
+ * `rows`) with an add-popover fed by the bound dataset's catalog. Exported so
+ * the Dashboard widget inspector can bind the same governed dimensions/measures
+ * the same way (single source of truth for dataset-member editing).
+ */
+export function DatasetNamesEditor({ label, emptyText, names, options, loading, error, readOnly, onCommit, }) {
+    const [dragIndex, setDragIndex] = React.useState(null);
+    const [overIndex, setOverIndex] = React.useState(null);
+    const used = React.useMemo(() => new Set(names), [names]);
+    const typeByName = React.useMemo(() => {
+        const m = new Map();
+        for (const o of options)
+            m.set(o.name, o.type);
+        return m;
+    }, [options]);
+    return (_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: label }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: names.length })] }), names.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: emptyText })) : (_jsx("div", { className: "space-y-1", children: names.map((name, i) => (_jsx(FieldListRow, { index: i, label: name, fieldName: name, fieldType: typeByName.get(name) ?? 'number', selected: false, canEdit: !readOnly, dragging: dragIndex !== null, dropBefore: overIndex === i && dragIndex !== null && dragIndex !== i, onSelect: () => { }, onRemove: () => onCommit(spliceArray(names, i, null)), onDragStart: () => setDragIndex(i), onDragEnd: () => {
+                        setDragIndex(null);
+                        setOverIndex(null);
+                    }, onDragOverRow: () => setOverIndex(i), onDropRow: () => {
+                        if (dragIndex != null && dragIndex !== i)
+                            onCommit(moveArray(names, dragIndex, i));
+                        setDragIndex(null);
+                        setOverIndex(null);
+                    } }, `${name}-${i}`))) })), !readOnly && (_jsx(AddFieldPopover, { fields: options, usedNames: used, loading: loading, error: error, onAdd: (f) => onCommit(appendArray(names, f.name)) }))] }));
+}
+export function ReportDefaultInspector({ name, draft, onPatch, readOnly, locale, datasetCatalogOverride, serverSchema, }) {
+    const tr = React.useCallback((key) => t(key, locale), [locale]);
+    // In create mode the host passes an empty `name` (the PK is assigned on
+    // first save). Mirror ObjectDefaultInspector: expose an editable Name that
+    // auto-derives a snake_case slug from the label until the author edits it
+    // directly. Without this, a report created through the canvas would save
+    // with an empty name and fail the snake_case identity rule (the create flow
+    // would dead-end exactly the way it did before report-create used the canvas).
+    const createMode = !name;
+    const nameTouched = React.useRef(false);
+    const nameValue = typeof draft.name === 'string' ? draft.name : '';
+    const reportType = typeof draft.type === 'string' ? draft.type : 'tabular';
+    const typeOptions = useTypeOptions(reportType, locale);
+    const labelValue = typeof draft.label === 'string' ? draft.label : '';
+    const datasetName = typeof draft.dataset === 'string' ? draft.dataset : '';
+    const values = React.useMemo(() => readNames(draft.values), [draft.values]);
+    const rows = React.useMemo(() => readNames(draft.rows), [draft.rows]);
+    const columnsAcross = React.useMemo(() => readNames(draft.columns), [draft.columns]);
+    // Dataset catalog (binding options) + the bound dataset's semantic layer
+    // (measure/dimension picker options).
+    const catalog = useDatasetCatalog(datasetCatalogOverride);
+    const semantics = useDatasetSemantics(datasetName || undefined, catalog);
+    const datasetOptions = 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 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]);
+    // Embedded chart (ADR-0021) — edited via the dedicated panel below so authors
+    // pick the X dimension / Y measure from dropdowns sourced from the bound
+    // dataset (instead of free-typing field names), and the generic spec-form
+    // graft excludes `chart`. Patching merges into the chart object; clearing the
+    // type drops the chart entirely.
+    const chart = draft.chart && typeof draft.chart === 'object'
+        ? draft.chart
+        : {};
+    const chartType = typeof chart.type === 'string' ? chart.type : '';
+    const chartX = typeof chart.xAxis === 'string' ? chart.xAxis : '';
+    const chartY = typeof chart.yAxis === 'string' ? chart.yAxis : '';
+    const chartTitle = typeof chart.title === 'string' ? chart.title : '';
+    const commitChart = (patch) => {
+        const next = { ...chart, ...patch };
+        onPatch({ chart: next.type ? next : undefined });
+    };
+    const chartXOptions = React.useMemo(() => {
+        const opts = dimensionOptions.map((d) => ({ value: d.name, label: d.label || d.name }));
+        if (chartX && !opts.some((o) => o.value === chartX))
+            opts.push({ value: chartX, label: chartX });
+        return opts;
+    }, [dimensionOptions, chartX]);
+    const chartYOptions = React.useMemo(() => {
+        const opts = measureOptions.map((m) => ({ value: m.name, label: m.label || m.name }));
+        if (chartY && !opts.some((o) => o.value === chartY))
+            opts.push({ value: chartY, label: chartY });
+        return opts;
+    }, [measureOptions, chartY]);
+    // A `joined` report carries its data on dataset-bound `blocks` (edited via
+    // the spec form's repeater) — the top-level binding only applies otherwise.
+    const datasetBound = reportType !== 'joined';
+    // Graft any server-only top-level fields onto the bundled-spec form so they
+    // are directly editable here even when the bundled `@objectstack/spec` lags
+    // the running server (skew root-cure).
+    const { schema, form } = React.useMemo(() => mergeServerFields({
+        bundledSchema: getReportSchema(),
+        bundledForm: getReportForm(),
+        serverSchema,
+        excludeFields: REPORT_CURATED_FIELDS,
+        sectionTitle: t('engine.inspector.moreFields', locale),
+    }), [serverSchema, locale]);
+    return (_jsxs(InspectorShell, { kindLabel: tr('engine.inspector.report.kind'), title: String(labelValue || draft.name || tr('engine.inspector.report.kind')), onClose: () => { }, closeLabel: tr('engine.inspector.report.close'), hideClose: true, children: [createMode && (_jsx(InspectorTextField, { label: tr('engine.inspector.report.name'), value: nameValue, onCommit: (v) => {
+                    nameTouched.current = true;
+                    onPatch({ name: toFieldName(v) });
+                }, placeholder: tr('engine.inspector.report.namePlaceholder'), disabled: readOnly, mono: true })), _jsx(InspectorTextField, { label: tr('engine.inspector.report.label'), value: labelValue, onCommit: (v) => {
+                    // Live-derive the snake_case name from the label until the author
+                    // edits the Name field directly (create mode only).
+                    const patch = { label: v };
+                    if (createMode && !nameTouched.current)
+                        patch.name = toFieldName(v);
+                    onPatch(patch);
+                }, placeholder: tr('engine.inspector.report.labelPlaceholder'), disabled: readOnly }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.type'), value: reportType, options: typeOptions, onCommit: (v) => onPatch({ type: v }), disabled: readOnly }), datasetBound && (_jsxs(_Fragment, { children: [catalog.datasets.length > 0 || datasetName ? (_jsx(InspectorSelectField, { label: tr('engine.inspector.report.dataset'), value: datasetName, options: datasetOptions, onCommit: (v) => onPatch({ dataset: v }), disabled: readOnly })) : (_jsx(InspectorTextField, { label: tr('engine.inspector.report.dataset'), value: datasetName, onCommit: (v) => onPatch({ dataset: v }), placeholder: tr('engine.inspector.report.datasetPlaceholder'), disabled: readOnly, mono: true })), _jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.values'), emptyText: tr('engine.inspector.report.valuesEmpty'), names: values, options: measureOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ values: next }) }), _jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.rows'), emptyText: tr('engine.inspector.report.rowsEmpty'), names: rows, options: dimensionOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ rows: next }) }), reportType === 'matrix' && (_jsx(DatasetNamesEditor, { label: tr('engine.inspector.report.columnsAcross'), emptyText: tr('engine.inspector.report.columnsAcrossEmpty'), names: columnsAcross, options: dimensionOptions, loading: semantics.loading, error: semantics.error, readOnly: readOnly, onCommit: (next) => onPatch({ columns: next }) })), _jsxs("div", { className: "border-t pt-3 space-y-2", children: [_jsx(Label, { className: "text-xs text-muted-foreground", children: tr('engine.inspector.report.chart') }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.chartType'), value: chartType, options: [
+                                    { value: '', label: tr('engine.inspector.report.chartNone') },
+                                    ...REPORT_CHART_TYPES.map((tp) => ({ value: tp, label: tp })),
+                                ], onCommit: (v) => commitChart({ type: v || undefined }), disabled: readOnly }), chartType ? (_jsxs(_Fragment, { children: [_jsx(InspectorTextField, { label: tr('engine.inspector.report.chartTitle'), value: chartTitle, onCommit: (v) => commitChart({ title: v || undefined }), disabled: readOnly }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.chartX'), value: chartX, options: chartXOptions, onCommit: (v) => commitChart({ xAxis: v }), disabled: readOnly }), _jsx(InspectorSelectField, { label: tr('engine.inspector.report.chartY'), value: chartY, options: chartYOptions, onCommit: (v) => commitChart({ yAxis: v }), disabled: readOnly })] })) : null] })] })), _jsx("div", { className: "border-t pt-3", children: schema ? (_jsx(SchemaForm, { schema: schema, form: form, value: draft, hiddenFields: ['type', 'label', 'name', 'dataset', 'values', 'rows', 'columns', 'chart'], readOnly: readOnly, onChange: (next) => onPatch(next) })) : (_jsx("p", { className: "text-[11px] text-muted-foreground", children: tr('engine.inspector.report.noSchema') })) })] }));
+}

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

@@ -0,0 +1,19 @@
+/**
+ * ViewColumnInspector — scoped editor for the selected View column.
+ *
+ * Selection shape:  { kind: 'column', id: '<variant>.columns[<i>]' }
+ *
+ * SPEC-DRIVEN: the column's detail properties (width / align / pinned /
+ * summary / sortable / …) are rendered from the spec's `ListColumn`
+ * JSONSchema via the generic {@link SchemaForm}, NOT a hardcoded field
+ * list. New ListColumn props in `@objectstack/spec` appear automatically.
+ *
+ * A thin curated layer stays on top for the column IDENTITY (field key +
+ * label) because those round-trip through two shapes: the ObjectStack
+ * canonical `{ field, label }` and the legacy TanStack `{ accessorKey,
+ * header }`. A column that is a bare string (e.g. a kanban card field) is
+ * kept as a string until the author edits a detail prop.
+ */
+import * as React from 'react';
+import type { MetadataInspectorProps } from '../inspector-registry';
+export declare function ViewColumnInspector({ selection, draft, onPatch, onClearSelection, onSelectionChange, locale, readOnly, }: MetadataInspectorProps): React.JSX.Element;