@object-ui/app-shell 6.2.2 → 7.0.0

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

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * 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 { t } from '../i18n';
+import { InspectorShell, InspectorReorderButtons, InspectorTextField, InspectorSelectField, InspectorRemoveButton, InspectorEmptyState, spliceArray, moveArray, } from './_shared';
+import { SchemaForm } from '../SchemaForm';
+import { getListColumnSchema } from '../view-schema';
+import { useObjectFields } from '../previews/useObjectFields';
+import { FieldsListEditor } from '../previews/FieldsListEditor';
+/** Identity keys owned by the curated layer — hidden from the spec form. */
+const IDENTITY_KEYS = ['field', 'label', 'accessorKey', 'header'];
+function parseId(id) {
+    const m = /^([a-zA-Z_][\w]*)\.columns\[(\d+)\]$/.exec(id);
+    if (!m)
+        return null;
+    return { variant: m[1], index: Number(m[2]) };
+}
+/** Read a column entry — handles object shape AND raw string shape (kanban). */
+function readColumn(raw) {
+    if (typeof raw === 'string')
+        return { field: raw };
+    if (raw && typeof raw === 'object')
+        return raw;
+    return {};
+}
+function colFieldKey(c) {
+    return c.field ?? c.accessorKey ?? '';
+}
+function colDisplayLabel(c) {
+    return c.label ?? c.header ?? colFieldKey(c);
+}
+/** Does the object carry any detail prop beyond its identity keys? */
+function hasDetailProps(c) {
+    return Object.keys(c).some((k) => !IDENTITY_KEYS.includes(k));
+}
+/** Resolve the object a variant is bound to (drives field loading). */
+function readVariantObject(v) {
+    if (!v)
+        return '';
+    const data = v.data;
+    if (data && typeof data.object === 'string')
+        return data.object;
+    if (typeof v.object === 'string')
+        return v.object;
+    return '';
+}
+export function ViewColumnInspector({ selection, draft, onPatch, onClearSelection, onSelectionChange, locale, readOnly, }) {
+    const parsed = parseId(selection.id);
+    const variantSchema = parsed
+        ? draft[parsed.variant]
+        : undefined;
+    const rawColumns = parsed && Array.isArray(variantSchema?.columns)
+        ? variantSchema.columns
+        : [];
+    const columns = rawColumns.map(readColumn);
+    const col = parsed ? columns[parsed.index] ?? null : null;
+    const isStringColumn = parsed
+        ? typeof rawColumns[parsed.index] === 'string'
+        : false;
+    const columnSchema = React.useMemo(() => getListColumnSchema(), []);
+    // Load the bound object's field catalog so the column's field key is a
+    // proper picker (dropdown of real fields) instead of a free-text box.
+    const objectName = readVariantObject(variantSchema);
+    const { fields: objectFields } = useObjectFields(objectName || undefined);
+    const currentFieldKey = col ? colFieldKey(col) : '';
+    const fieldOptions = React.useMemo(() => {
+        const opts = objectFields.map((f) => ({
+            value: f.name,
+            label: f.label && f.label !== f.name ? `${f.label} · ${f.name}` : f.name,
+        }));
+        // Keep the current value visible even if it isn't a known object field
+        // (computed / virtual / stale columns).
+        if (currentFieldKey && !opts.some((o) => o.value === currentFieldKey)) {
+            opts.unshift({ value: currentFieldKey, label: `${currentFieldKey} (not in object)` });
+        }
+        return opts;
+    }, [objectFields, currentFieldKey]);
+    if (!parsed || !col) {
+        return (_jsx(InspectorShell, { kindLabel: t('engine.inspector.viewColumn.kind', locale), title: selection.label ?? selection.id, onClose: onClearSelection, closeLabel: t('engine.inspector.viewColumn.close', locale), children: _jsx(InspectorEmptyState, { message: selection.id }) }));
+    }
+    /** Write the column array back, preserving string shape when lossless. */
+    const writeColumns = (next) => {
+        const serialized = next.map((c, i) => {
+            const wasString = typeof rawColumns[i] === 'string';
+            const fieldKey = colFieldKey(c);
+            if (wasString && !hasDetailProps(c) && !c.label && !c.header && fieldKey) {
+                return fieldKey;
+            }
+            return c;
+        });
+        onPatch({ [parsed.variant]: { ...variantSchema, columns: serialized } });
+    };
+    /** Patch identity (field/label) honouring whichever shape is in use. */
+    const patchIdentity = (updates) => {
+        const targetField = 'field' in col || !('accessorKey' in col) ? 'field' : 'accessorKey';
+        const targetLabel = 'label' in col || !('header' in col) ? 'label' : 'header';
+        const remapped = { ...updates };
+        if ('field' in updates) {
+            remapped[targetField] = updates.field;
+            if (targetField !== 'field')
+                delete remapped.field;
+        }
+        if ('label' in updates) {
+            remapped[targetLabel] = updates.label;
+            if (targetLabel !== 'label')
+                delete remapped.label;
+        }
+        writeColumns(spliceArray(columns, parsed.index, { ...col, ...remapped }));
+    };
+    /** Whole-column write from the spec detail form. */
+    const writeDetail = (next) => {
+        writeColumns(spliceArray(columns, parsed.index, next));
+    };
+    const remove = () => {
+        writeColumns(spliceArray(columns, parsed.index, null));
+        onClearSelection();
+    };
+    const move = (to) => {
+        writeColumns(moveArray(columns, parsed.index, to));
+        onSelectionChange?.({
+            kind: 'column',
+            id: `${parsed.variant}.columns[${to}]`,
+            label: colDisplayLabel(col) || `columns[${to}]`,
+        });
+    };
+    return (_jsxs(InspectorShell, { kindLabel: t('engine.inspector.viewColumn.kind', locale), title: colDisplayLabel(col) || selection.id, onClose: onClearSelection, closeLabel: t('engine.inspector.viewColumn.close', locale), headerActions: _jsx(InspectorReorderButtons, { index: parsed.index, total: columns.length, onMove: move, upLabel: t('engine.inspector.reorder.up', locale), downLabel: t('engine.inspector.reorder.down', locale), disabled: readOnly }), footer: _jsx(InspectorRemoveButton, { label: t('engine.inspector.viewColumn.remove', locale), onClick: remove, disabled: readOnly }), children: [variantSchema && (_jsx("div", { className: "pb-1", children: _jsx(FieldsListEditor, { variantKey: parsed.variant, schema: variantSchema, columns: rawColumns, allStrings: rawColumns.length > 0 &&
+                        rawColumns.every((c) => typeof c === 'string'), objectName: objectName || undefined, selectedIndex: parsed.index, readOnly: readOnly, onPatch: onPatch, onSelectionChange: onSelectionChange }) })), _jsxs("div", { className: "border-t pt-3 space-y-3", children: [fieldOptions.length > 0 ? (_jsx(InspectorSelectField, { label: t('engine.inspector.viewColumn.accessorKey', locale), value: colFieldKey(col), options: fieldOptions, onCommit: (v) => patchIdentity({ field: v }), disabled: readOnly })) : (_jsx(InspectorTextField, { label: t('engine.inspector.viewColumn.accessorKey', locale), value: colFieldKey(col), onCommit: (v) => patchIdentity({ field: v }), disabled: readOnly, mono: true })), _jsx(InspectorTextField, { label: t('engine.inspector.viewColumn.header', locale), value: colDisplayLabel(col) === colFieldKey(col) ? '' : colDisplayLabel(col), onCommit: (v) => patchIdentity({ label: v }), disabled: readOnly }), !isStringColumn && columnSchema ? (_jsx("div", { className: "border-t pt-3", children: _jsx(SchemaForm, { schema: columnSchema, value: col, hiddenFields: IDENTITY_KEYS, readOnly: readOnly, onChange: writeDetail }) })) : null] })] }));
+}

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

@@ -0,0 +1,19 @@
+/**
+ * ViewInspector — routes the View right-panel to the right sub-inspector.
+ *
+ *   • Scoped (a selection exists):
+ *       - `{ kind:'column', id:'<variant>.columns[<i>]' }` → ViewColumnInspector
+ *       - `{ kind:'view',   id:'<variant>' }`              → ViewVariantInspector
+ *   • Default (no selection) → ViewVariantInspector for the primary variant
+ *     ("home" panel: pick view type + manage fields, Airtable-style).
+ *
+ * Routing is by `selection.kind` FIRST — the column inspector's id regex
+ * would not match a bare variant id, so we must dispatch before it runs.
+ */
+import * as React from 'react';
+import type { MetadataInspectorProps } from '../inspector-registry';
+import type { MetadataDefaultInspectorProps } from '../default-inspector-registry';
+/** Scoped inspector: a selection is always present here. */
+export declare function ViewInspector(props: MetadataInspectorProps): React.JSX.Element;
+/** Default inspector: no selection — the View's "home" panel. */
+export declare function ViewDefaultInspector(props: MetadataDefaultInspectorProps): React.JSX.Element;

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ViewColumnInspector } from './ViewColumnInspector';
+import { ViewVariantInspector } from './ViewVariantInspector';
+import { bindingForStoreKey, primaryVariantBinding } from '../view-variant-model';
+/** Scoped inspector: a selection is always present here. */
+export function ViewInspector(props) {
+    const { selection } = props;
+    if (selection.kind === 'column') {
+        return _jsx(ViewColumnInspector, { ...props });
+    }
+    // kind === 'view' (or any non-column kind) → variant home, scoped.
+    // `selection.id` carries the variant's STORE key (the tab strip emits it).
+    const binding = bindingForStoreKey(props.draft, selection.id || undefined) ??
+        primaryVariantBinding(props.draft);
+    return (_jsx(ViewVariantInspector, { type: props.type, name: props.name, draft: props.draft, onPatch: props.onPatch, onSelectionChange: props.onSelectionChange, onClearSelection: props.onClearSelection, readOnly: props.readOnly, locale: props.locale, variantKey: binding?.storeKey ?? 'list', familyKey: binding?.familyKey ?? binding?.storeKey ?? 'list', isHome: false }));
+}
+/** Default inspector: no selection — the View's "home" panel. */
+export function ViewDefaultInspector(props) {
+    const binding = primaryVariantBinding(props.draft);
+    return (_jsx(ViewVariantInspector, { ...props, variantKey: binding?.storeKey ?? 'list', familyKey: binding?.familyKey ?? binding?.storeKey ?? 'list', isHome: true }));
+}

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

@@ -0,0 +1,54 @@
+/**
+ * ViewVariantInspector — the curated "home" panel for a View variant.
+ *
+ * Shown:
+ *   • as the DEFAULT right panel (no selection) for the primary variant, and
+ *   • as the scoped inspector when a variant tab is selected
+ *     (`{ kind:'view', id:'<variant>' }`).
+ *
+ * SPEC-DRIVEN: the per-view-type config fields are NOT hardcoded. They are
+ * rendered by feeding the spec's canonical authoring form (`viewForm`) and
+ * the spec-derived View JSONSchema into the generic {@link SchemaForm}. The
+ * form's type-conditional `visibleOn` sections automatically surface the
+ * right fields for grid / kanban / calendar / gallery / gantt / timeline /
+ * chart — adding a new view type or prop to `@objectstack/spec` flows
+ * through with zero code changes here.
+ *
+ * The inspector keeps a thin curated layer for two cross-cutting concerns
+ * the spec form can't express well on its own:
+ *   1. the VIEW TYPE picker (options sourced from the spec `type` enum), and
+ *   2. the bound OBJECT (stored at `data.object`, drives field loading).
+ *
+ * Column add / reorder / select lives in the live column canvas above the
+ * grid; per-column properties live in {@link ViewColumnInspector}. Those
+ * fields are therefore pruned from the spec form to avoid double-editing.
+ */
+import * as React from 'react';
+import type { MetadataDefaultInspectorProps } from '../default-inspector-registry';
+import { type ObjectFieldInfo } from '../previews/useObjectFields';
+export interface ViewVariantInspectorProps extends MetadataDefaultInspectorProps {
+    /**
+     * Draft key the variant BODY is stored under — drives reads/writes and
+     * column selection ids. 'list' | … for the spec shape, 'config' for the
+     * effective ({viewKind,config}) shape.
+     */
+    variantKey: string;
+    /**
+     * Logical family ('list' | 'form' | …). Drives form-vs-list rendering.
+     * Defaults to `variantKey` when the two coincide (spec shape).
+     */
+    familyKey?: string;
+    /** When true, the close (×) button is hidden (home mode). */
+    isHome: boolean;
+    /** Clear the current selection (scoped mode only). */
+    onClearSelection?: () => void;
+    /**
+     * Pre-resolved field catalog for the bound object. When supplied, both
+     * this inspector and its {@link FieldsListEditor} skip the network fetch
+     * (`useObjectFields`) and use this list instead. Hosts that already hold
+     * the object definition (e.g. the runtime ViewConfigPanel) pass it to keep
+     * the inspector free of any network dependency.
+     */
+    objectFieldsOverride?: ObjectFieldInfo[];
+}
+export declare function ViewVariantInspector({ draft, variantKey, familyKey, isHome, onPatch, readOnly, onClearSelection, onSelectionChange, objectFieldsOverride, locale, serverSchema, }: ViewVariantInspectorProps): React.JSX.Element;

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

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ViewVariantInspector — the curated "home" panel for a View variant.
+ *
+ * Shown:
+ *   • as the DEFAULT right panel (no selection) for the primary variant, and
+ *   • as the scoped inspector when a variant tab is selected
+ *     (`{ kind:'view', id:'<variant>' }`).
+ *
+ * SPEC-DRIVEN: the per-view-type config fields are NOT hardcoded. They are
+ * rendered by feeding the spec's canonical authoring form (`viewForm`) and
+ * the spec-derived View JSONSchema into the generic {@link SchemaForm}. The
+ * form's type-conditional `visibleOn` sections automatically surface the
+ * right fields for grid / kanban / calendar / gallery / gantt / timeline /
+ * chart — adding a new view type or prop to `@objectstack/spec` flows
+ * through with zero code changes here.
+ *
+ * The inspector keeps a thin curated layer for two cross-cutting concerns
+ * the spec form can't express well on its own:
+ *   1. the VIEW TYPE picker (options sourced from the spec `type` enum), and
+ *   2. the bound OBJECT (stored at `data.object`, drives field loading).
+ *
+ * Column add / reorder / select lives in the live column canvas above the
+ * grid; per-column properties live in {@link ViewColumnInspector}. Those
+ * fields are therefore pruned from the spec form to avoid double-editing.
+ */
+import * as React from 'react';
+import { InspectorShell, InspectorTextField, InspectorSelectField, } from './_shared';
+import { InspectorComboField } from './InspectorComboField';
+import { useObjectOptions } from './useDatasetFields';
+import { SchemaForm } from '../SchemaForm';
+import { useObjectFields } from '../previews/useObjectFields';
+/**
+ * Object picker for the view's binding — a searchable dropdown over the live
+ * object catalog (custom value still allowed) instead of recalling the API
+ * name. The catalog hook lives in a child component so the parent inspector's
+ * hook order is unaffected.
+ */
+function ViewObjectPicker({ label, value, onCommit, placeholder, disabled, }) {
+    const { options, loading } = useObjectOptions();
+    return (_jsx(InspectorComboField, { label: label, value: value, onCommit: onCommit, options: options.map((o) => ({ value: o.name, label: o.label })), loading: loading, placeholder: placeholder, searchPlaceholder: "Search objects\u2026", disabled: disabled, mono: true }));
+}
+import { FieldsListEditor } from '../previews/FieldsListEditor';
+import { getViewForm, getListVariantSchema, getFormVariantSchema, } from '../view-schema';
+import { isFormFamilyKey } from '../view-variant-model';
+import { mergeServerFields } from '../mergeServerFields';
+import { t } from '../i18n';
+/**
+ * Variant-body fields this inspector renders with its own controls, pruned
+ * from the spec-form graft so they are not double-rendered. Mirrors the
+ * `hiddenFields` passed to SchemaForm (`type`/`object`/`label`) plus the
+ * canvas-owned `columns`.
+ */
+const VIEW_CURATED_FIELDS = new Set(['type', 'object', 'label', 'columns']);
+/** English fallback labels for the spec `type` enum (used when the i18n
+ * catalog has no entry for a view type the spec introduces later). */
+const TYPE_LABELS = {
+    grid: 'Table / List',
+    kanban: 'Kanban',
+    calendar: 'Calendar',
+    gallery: 'Gallery',
+    gantt: 'Gantt',
+    timeline: 'Timeline',
+    map: 'Map',
+    chart: 'Chart',
+};
+/** Localized label for a view `type`, falling back to the English map (and
+ * then the raw value) when the i18n catalog has no entry. */
+function typeLabel(value, locale) {
+    const key = `engine.inspector.view.type.${value}`;
+    const translated = t(key, locale);
+    return translated === key ? (TYPE_LABELS[value] ?? value) : translated;
+}
+/** Keys re-pinned from the live draft after every spec-form edit. */
+const PRESERVED_KEYS = ['columns', 'data', 'name'];
+/**
+ * Resolve the object a view is bound to. The canonical ViewItem carries the
+ * binding at the TOP LEVEL (`draft.object`) — authoritative for every view
+ * kind. A list `config` body additionally denormalizes it into its render
+ * data source (`config.data.object`); a form `config` has no such block. We
+ * therefore prefer the body's render binding (so the preview stays accurate)
+ * but always fall back to the top-level FK, which is the one field guaranteed
+ * present across list AND form views.
+ */
+function readObjectBinding(variant, draft) {
+    const data = variant.data;
+    if (data && typeof data === 'object' && typeof data.object === 'string' && data.object) {
+        return { value: data.object, path: 'data.object' };
+    }
+    if (typeof variant.object === 'string' && variant.object) {
+        return { value: variant.object, path: 'object' };
+    }
+    if (typeof draft.object === 'string' && draft.object) {
+        return { value: draft.object, path: 'top' };
+    }
+    return { value: '', path: 'top' };
+}
+/** Build the View-type <select> options from the spec `type` enum. */
+function useTypeOptions(currentType, locale) {
+    return React.useMemo(() => {
+        const schema = getListVariantSchema();
+        const rawEnum = schema?.properties?.type?.enum;
+        const values = Array.isArray(rawEnum) && rawEnum.length
+            ? rawEnum.filter((v) => typeof v === 'string')
+            : ['grid', 'kanban', 'calendar', 'gallery', 'gantt', 'timeline'];
+        const opts = values.map((v) => ({ value: v, label: typeLabel(v, locale) }));
+        if (!opts.some((o) => o.value === currentType) && currentType) {
+            opts.push({ value: currentType, label: typeLabel(currentType, locale) });
+        }
+        return opts;
+    }, [currentType, locale]);
+}
+export function ViewVariantInspector({ draft, variantKey, familyKey, isHome, onPatch, readOnly, onClearSelection, onSelectionChange, objectFieldsOverride, locale, serverSchema, }) {
+    const variant = draft[variantKey] ?? {};
+    const isFormFamily = isFormFamilyKey(familyKey ?? variantKey);
+    const viewType = typeof variant.type === 'string' ? variant.type : 'grid';
+    const typeOptions = useTypeOptions(viewType, locale);
+    const binding = readObjectBinding(variant, draft);
+    // Canonical label lives at the top level (`draft.label`); a list `config`
+    // mirrors it, a form `config` does not. Prefer the top-level value.
+    const labelValue = (typeof draft.label === 'string' && draft.label) ||
+        (typeof variant.label === 'string' ? variant.label : '') ||
+        '';
+    const rawColumns = Array.isArray(variant.columns)
+        ? variant.columns
+        : [];
+    const allStrings = rawColumns.length > 0 && rawColumns.every((c) => typeof c === 'string');
+    // Load the bound object's field catalog so field-reference config props
+    // (groupByField, startDateField, xAxisField, visibleFields, …) render as
+    // object-field pickers rather than free-text inputs.
+    const { fields: objectFields } = useObjectFields(binding.value || undefined, objectFieldsOverride);
+    const widgetContext = React.useMemo(() => ({
+        objectFields: objectFields.map((f) => ({
+            name: f.name,
+            label: f.label,
+            type: f.type,
+        })),
+    }), [objectFields]);
+    // Graft server-only fields onto the bundled variant form so new server
+    // fields are editable even when the bundled spec lags (skew root-cure). A
+    // View is a nested document: the variant body lives under
+    // `serverSchema.properties.{list|form}`, so we pass that sub-schema.
+    const serverVariantSchema = (() => {
+        const props = serverSchema?.properties;
+        return (isFormFamily ? props?.form : props?.list);
+    })();
+    const { schema, form } = React.useMemo(() => mergeServerFields({
+        bundledSchema: isFormFamily ? getFormVariantSchema() : getListVariantSchema(),
+        bundledForm: isFormFamily ? undefined : getViewForm(),
+        serverSchema: serverVariantSchema,
+        excludeFields: VIEW_CURATED_FIELDS,
+        sectionTitle: t('engine.inspector.moreFields', locale),
+    }), [isFormFamily, serverVariantSchema, locale]);
+    /** Shallow-write a curated patch onto the variant. */
+    const writeVariant = (patch) => {
+        onPatch({ [variantKey]: { ...variant, ...patch } });
+    };
+    /** Whole-variant write from the spec form; re-pin canvas-owned keys. */
+    const writeForm = (next) => {
+        const merged = { ...next };
+        for (const k of PRESERVED_KEYS) {
+            if (k in variant)
+                merged[k] = variant[k];
+            else
+                delete merged[k];
+        }
+        onPatch({ [variantKey]: merged });
+    };
+    /** Write the bound object: top-level FK is canonical; mirror the list
+     *  body's render binding so the preview keeps resolving live data. */
+    const setObject = (v) => {
+        const patch = { object: v };
+        if (variant.data && typeof variant.data === 'object') {
+            patch[variantKey] = {
+                ...variant,
+                data: { ...variant.data, object: v },
+            };
+        }
+        else if (binding.path === 'object') {
+            patch[variantKey] = { ...variant, object: v };
+        }
+        onPatch(patch);
+    };
+    /** Write the display label: top-level is canonical; mirror it onto the
+     *  body so the preview / runtime view switcher show the same text. */
+    const setLabel = (v) => {
+        onPatch({ label: v, [variantKey]: { ...variant, label: v } });
+    };
+    return (_jsxs(InspectorShell, { kindLabel: t('engine.inspector.view.kind', locale), title: String(labelValue || draft.name || variantKey), onClose: () => onClearSelection?.(), closeLabel: t('engine.inspector.view.close', locale), hideClose: isHome, children: [_jsx(InspectorTextField, { label: t('engine.inspector.view.label', locale), value: labelValue, onCommit: setLabel, placeholder: t('engine.inspector.view.labelPlaceholder', locale), disabled: readOnly }), _jsx(InspectorSelectField, { label: t('engine.inspector.view.type', locale), value: viewType, options: typeOptions, onCommit: (v) => writeVariant({ type: v }), disabled: readOnly }), _jsx(ViewObjectPicker, { label: t('engine.inspector.view.object', locale), value: binding.value, onCommit: setObject, placeholder: t('engine.inspector.view.objectPlaceholder', locale), disabled: readOnly }), !isFormFamily && (_jsx("div", { className: "border-t pt-3", children: _jsx(FieldsListEditor, { variantKey: variantKey, schema: variant, columns: rawColumns, allStrings: allStrings, objectName: binding.value || undefined, objectFieldsOverride: objectFieldsOverride, selectedIndex: null, readOnly: readOnly, onPatch: onPatch, onSelectionChange: onSelectionChange }) })), _jsx("div", { className: "border-t pt-3", children: schema ? (_jsx(SchemaForm, { schema: schema, form: form, value: variant, hiddenFields: ['type', 'object', 'label'], readOnly: readOnly, widgetContext: widgetContext, onChange: writeForm })) : (_jsx("p", { className: "text-[11px] text-muted-foreground", children: t('engine.inspector.view.noSchema', locale) })) })] }));
+}

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

@@ -0,0 +1,124 @@
+/**
+ * Shared building blocks for scoped metadata inspectors.
+ *
+ * Every inspector renders the same three regions:
+ *   • Header strip — kind chip + element label + close button
+ *   • Scrollable form area — labelled inputs in a single column
+ *   • Footer — destructive "remove this element" button
+ *
+ * The widgets below factor those regions out so each per-type
+ * inspector can stay focused on field definitions and update logic.
+ *
+ * All inputs are uncontrolled-from-outside: parent owns the draft
+ * record, inspectors call `onCommit(value)` which trips an immutable
+ * splice + `onPatch({...})`. Locale-aware via the `useT` hook the
+ * caller already has in scope — the shared shell takes raw strings.
+ */
+import * as React from 'react';
+export interface InspectorShellProps {
+    kindLabel: string;
+    title: string;
+    onClose: () => void;
+    closeLabel?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    /**
+     * Optional reorder controls rendered to the left of the close button.
+     * Use {@link InspectorReorderButtons} for the standard ↑/↓ pair.
+     */
+    headerActions?: React.ReactNode;
+    /**
+     * Hide the close (×) button. Used by "home" inspectors that have no
+     * better state to fall back to (e.g. the View inspector is the default
+     * right-panel for a view, so closing it would just re-open it).
+     */
+    hideClose?: boolean;
+}
+export declare function InspectorShell({ kindLabel, title, onClose, closeLabel, children, footer, headerActions, hideClose }: InspectorShellProps): React.JSX.Element;
+export interface InspectorReorderButtonsProps {
+    /** Current 0-based index of the selected item. */
+    index: number;
+    /** Total number of siblings. */
+    total: number;
+    /** Called with the new index when the user clicks ↑ or ↓. */
+    onMove: (toIndex: number) => void;
+    /** Localized aria-labels (e.g. tr('engine.inspector.reorder.up', locale)). */
+    upLabel?: string;
+    downLabel?: string;
+    /** Disable both buttons (read-only inspectors). */
+    disabled?: boolean;
+}
+/**
+ * Compact ↑/↓ pair sized to fit alongside the close button in the
+ * inspector header. Auto-disables boundaries (↑ at index 0, ↓ at
+ * `total - 1`) and the whole pair when `total <= 1`.
+ */
+export declare function InspectorReorderButtons({ index, total, onMove, upLabel, downLabel, disabled, }: InspectorReorderButtonsProps): React.JSX.Element | null;
+export declare function InspectorTextField({ label, value, onCommit, placeholder, disabled, mono, }: {
+    label: string;
+    value: string;
+    onCommit: (v: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    mono?: boolean;
+}): React.JSX.Element;
+export declare function InspectorNumberField({ label, value, onCommit, placeholder, disabled, }: {
+    label: string;
+    value: number | undefined;
+    onCommit: (v: number | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}): React.JSX.Element;
+export declare function InspectorSelectField({ label, value, options, onCommit, placeholder, disabled, }: {
+    label: string;
+    value: string | undefined;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    onCommit: (v: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+}): React.JSX.Element;
+export declare function InspectorCheckboxField({ label, value, onCommit, disabled, }: {
+    label: string;
+    value: boolean;
+    onCommit: (v: boolean) => void;
+    disabled?: boolean;
+}): React.JSX.Element;
+export declare function InspectorRemoveButton({ label, onClick, disabled }: {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}): React.JSX.Element;
+export declare function InspectorEmptyState({ message }: {
+    message: string;
+}): React.JSX.Element;
+/**
+ * Helper to immutably splice an item in an array on a draft.
+ * Returns a new array; never mutates input.
+ */
+export declare function spliceArray<T>(arr: T[] | undefined, index: number, replacement: T | null): T[];
+/**
+ * Insert `item` at `index` immutably. Index out of range clamps to
+ * [0, length]. Returns a new array; never mutates input.
+ */
+export declare function insertArray<T>(arr: T[] | undefined, index: number, item: T): T[];
+/**
+ * Append `item` to the end immutably. Convenience wrapper over
+ * insertArray for the common "+ Add at end" case.
+ */
+export declare function appendArray<T>(arr: T[] | undefined, item: T): T[];
+/**
+ * Move an item from `from` to `to` immutably. Out-of-range or no-op
+ * moves return a new copy unchanged. Useful for ↑/↓ reorder buttons.
+ */
+export declare function moveArray<T>(arr: T[] | undefined, from: number, to: number): T[];
+/**
+ * Generate a snake_case id that doesn't collide with `existing`. Used
+ * by Add helpers that need a stable identifier (Flow nodes, App nav,
+ * Dashboard widgets) before the user fills in a meaningful name.
+ *
+ *   uniqueId('node', ['node_1', 'node_3']) -> 'node_2'
+ */
+export declare function uniqueId(prefix: string, existing: ReadonlyArray<string | undefined | null>): string;