@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/previews/DashboardPreview.js

@@ -1,25 +1,127 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 /**
- * DashboardPreview — read-only render of a Dashboard metadata draft.
+ * DashboardPreview — interactive design surface for a Dashboard
+ * metadata draft. Clicking a widget emits a {@link MetadataSelection}
+ * so the host swaps the right-side inspector to that widget's form.
  *
  * Uses the same DashboardRenderer the runtime DashboardView uses, with
  * the adapter from app-shell's AdapterProvider so widgets can query
- * live data. `designMode` is OFF — this is preview, not edit.
+ * live data. `designMode` is ON whenever the host is editing —
+ * read-only / view mode falls back to a plain runtime preview so the
+ * canvas looks identical to what end users see.
  *
  * The plugin is loaded lazily to avoid pulling its dep graph into
  * every metadata-admin page load.
  */
 import * as React from 'react';
-import { Loader2 } from 'lucide-react';
+import { Loader2, Pencil, X, Check } from 'lucide-react';
 import { useAdapter } from '../../../providers/AdapterProvider';
 import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
+import { uniqueId, appendArray } from '../inspectors/_shared';
+import { t as tr } from '../i18n';
+import { AddWidgetPicker } from './AddWidgetPicker';
+import { WIDGET_TYPE_META } from './widget-types';
 const DashboardRenderer = React.lazy(() => import('@object-ui/plugin-dashboard').then((m) => ({ default: m.DashboardRenderer })));
-export function DashboardPreview({ draft }) {
+export function DashboardPreview({ draft, editing, onPatch, selection, onSelectionChange, locale, }) {
     const adapter = useAdapter();
-    const widgets = Array.isArray(draft.widgets) ? draft.widgets : [];
+    const widgets = Array.isArray(draft.widgets)
+        ? draft.widgets
+        : [];
+    // Design mode is opt-in: only active while the host edits AND the
+    // host supplied a selection channel. In read-only / drawer-preview
+    // contexts we render the runtime presentation untouched.
+    const designMode = !!(editing && onSelectionChange);
+    const canEdit = designMode && !!onPatch;
+    const selectedWidgetId = selection && selection.kind === 'widget' ? selection.id : null;
+    const handleWidgetClick = React.useCallback((widgetId) => {
+        if (!onSelectionChange)
+            return;
+        if (!widgetId) {
+            onSelectionChange(null);
+            return;
+        }
+        const w = widgets.find((wi) => wi?.id === widgetId);
+        onSelectionChange({
+            kind: 'widget',
+            id: widgetId,
+            label: w?.title || widgetId,
+        });
+    }, [onSelectionChange, widgets]);
+    const handleReorder = React.useCallback((next) => {
+        if (!onPatch)
+            return;
+        onPatch({ widgets: next });
+    }, [onPatch]);
+    const handleAddWidget = React.useCallback((type) => {
+        if (!canEdit)
+            return;
+        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 newWidget = { id, type, title, ...(meta?.defaults ?? {}) };
+        const next = appendArray(widgets, newWidget);
+        onPatch({ widgets: next });
+        onSelectionChange?.({ kind: 'widget', id, label: title });
+    }, [canEdit, widgets, onPatch, onSelectionChange]);
+    const handleRenameWidget = React.useCallback((id, nextTitle) => {
+        if (!canEdit)
+            return;
+        const trimmed = nextTitle.trim();
+        const next = widgets.map((w) => w?.id === id ? { ...w, title: trimmed } : w);
+        onPatch({ widgets: next });
+        onSelectionChange?.({ kind: 'widget', id, label: trimmed || id });
+    }, [canEdit, widgets, onPatch, onSelectionChange]);
+    const selectedWidget = selectedWidgetId
+        ? widgets.find((w) => w?.id === selectedWidgetId) ?? null
+        : null;
+    const addButton = canEdit ? (_jsx(AddWidgetPicker, { onAdd: handleAddWidget, label: tr('engine.inspector.add.widget', locale) })) : null;
     if (widgets.length === 0) {
-        return (_jsx(PreviewShell, { hint: "dashboard", children: _jsx(PreviewMessage, { children: "Add at least one widget to see a preview." }) }));
+        return (_jsx(PreviewShell, { hint: `dashboard${designMode ? ' · design' : ''}`, toolbar: addButton, children: _jsx(PreviewMessage, { children: "Add at least one widget to see a preview." }) }));
     }
-    return (_jsx(PreviewShell, { hint: `dashboard · ${widgets.length} widget${widgets.length === 1 ? '' : 's'}`, children: _jsx(PreviewErrorBoundary, { fallbackHint: "A widget references an object or field that doesn't resolve.", children: _jsx(React.Suspense, { fallback: _jsxs("div", { className: "p-6 text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading dashboard renderer\u2026"] }), children: _jsx("div", { className: "p-3 max-h-[70vh] overflow-auto", children: _jsx(DashboardRenderer, { schema: draft, dataSource: adapter, designMode: false, hideHeaderText: true }) }) }) }) }));
+    return (_jsx(PreviewShell, { hint: `dashboard · ${widgets.length} widget${widgets.length === 1 ? '' : 's'}${designMode ? ' · design' : ''}`, toolbar: addButton, children: _jsxs(PreviewErrorBoundary, { fallbackHint: "A widget references an object or field that doesn't resolve.", children: [canEdit && selectedWidget ? (_jsx(SelectedWidgetStrip, { widget: selectedWidget, onRename: (nextTitle) => handleRenameWidget(selectedWidget.id, nextTitle), onClose: () => onSelectionChange?.(null) })) : null, _jsx(React.Suspense, { fallback: _jsxs("div", { className: "p-6 text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " Loading dashboard renderer\u2026"] }), children: _jsx("div", { className: "p-3 max-h-[70vh] overflow-auto", children: _jsx("div", { className: "min-w-[768px]", children: _jsx(DashboardRenderer, { schema: draft, dataSource: adapter, designMode: designMode, selectedWidgetId: selectedWidgetId, onWidgetClick: designMode ? handleWidgetClick : undefined, onWidgetsReorder: designMode && onPatch ? handleReorder : undefined, hideHeaderText: true }) }) }) })] }) }));
+}
+/**
+ * Floating strip that appears above the dashboard whenever a widget
+ * is selected in design mode. Lets the author rename the widget
+ * inline (Enter commits, Esc cancels) without diving into the right-
+ * side inspector for a single text edit.
+ */
+function SelectedWidgetStrip({ widget, onRename, onClose, }) {
+    const currentTitle = widget.title ?? widget.id ?? '';
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(currentTitle);
+    const inputRef = React.useRef(null);
+    // Sync local state when the externally-selected widget changes.
+    React.useEffect(() => {
+        setDraft(currentTitle);
+        setEditing(false);
+    }, [widget.id, currentTitle]);
+    React.useEffect(() => {
+        if (editing)
+            inputRef.current?.select();
+    }, [editing]);
+    const commit = () => {
+        const v = draft.trim();
+        if (v && v !== currentTitle)
+            onRename(v);
+        setEditing(false);
+    };
+    const cancel = () => {
+        setDraft(currentTitle);
+        setEditing(false);
+    };
+    const meta = WIDGET_TYPE_META[widget.type];
+    const TypeIcon = meta?.icon ?? null;
+    return (_jsxs("div", { className: "sticky top-0 z-10 flex items-center gap-2 border-b bg-primary/5 px-3 py-1.5 text-xs", children: [TypeIcon ? _jsx(TypeIcon, { className: "h-3.5 w-3.5 text-primary" }) : null, _jsx("span", { className: "rounded bg-primary px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary-foreground", children: "Selected" }), editing ? (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, value: draft, onChange: (e) => setDraft(e.target.value), onBlur: commit, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                commit();
+                            }
+                            else if (e.key === 'Escape') {
+                                e.preventDefault();
+                                cancel();
+                            }
+                        }, className: "flex-1 min-w-0 rounded border bg-background px-2 py-0.5 text-xs outline-none focus:ring-1 focus:ring-primary" }), _jsx("button", { type: "button", onClick: commit, className: "rounded p-1 hover:bg-primary/10", "aria-label": "Save title", children: _jsx(Check, { className: "h-3.5 w-3.5" }) })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setEditing(true), className: "flex-1 min-w-0 truncate text-left font-medium hover:underline", title: "Click to rename", children: currentTitle || _jsx("span", { className: "italic text-muted-foreground", children: "untitled" }) }), _jsx("button", { type: "button", onClick: () => setEditing(true), className: "rounded p-1 hover:bg-primary/10", "aria-label": "Rename widget", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) })] })), _jsx("button", { type: "button", onClick: onClose, className: "rounded p-1 hover:bg-primary/10", "aria-label": "Clear selection", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] }));
 }

package/dist/views/metadata-admin/previews/DatasetPreview.d.ts

@@ -0,0 +1,18 @@
+/**
+ * DatasetPreview — runs the live `dataset` draft (ADR-0021) against the server
+ * and shows the resulting rows, so authors can see their semantic layer work
+ * before saving.
+ *
+ * It posts the (possibly unsaved) draft inline to
+ * `POST /api/v1/analytics/dataset/query` via the AdapterProvider data source
+ * (`adapter.queryDataset`). The server compiles the dataset → Cube, applies the
+ * tenant/RLS read scope (ADR-0021 D-C), and returns chart-ready rows.
+ *
+ * Unlike the legacy single-object aggregation, dataset queries are cross-object
+ * and only run server-side — so a failure is surfaced as an error banner (the
+ * compile error, e.g. "relationship not declared in include") rather than
+ * silently falling back to wrong numbers.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function DatasetPreview({ draft }: MetadataPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/DatasetPreview.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2026 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DatasetPreview — runs the live `dataset` draft (ADR-0021) against the server
+ * and shows the resulting rows, so authors can see their semantic layer work
+ * before saving.
+ *
+ * It posts the (possibly unsaved) draft inline to
+ * `POST /api/v1/analytics/dataset/query` via the AdapterProvider data source
+ * (`adapter.queryDataset`). The server compiles the dataset → Cube, applies the
+ * tenant/RLS read scope (ADR-0021 D-C), and returns chart-ready rows.
+ *
+ * Unlike the legacy single-object aggregation, dataset queries are cross-object
+ * and only run server-side — so a failure is surfaced as an error banner (the
+ * compile error, e.g. "relationship not declared in include") rather than
+ * silently falling back to wrong numbers.
+ */
+import * as React from 'react';
+import { Loader2, BarChart3, AlertTriangle } from 'lucide-react';
+import { useAdapter } from '../../../providers/AdapterProvider';
+import { PreviewShell, PreviewEmptyState, PreviewErrorBoundary } from './PreviewShell';
+import { formatMeasure, formatDimensionValue, buildDatasetFieldHelpers, } from '@object-ui/core';
+import { useSafeFieldLabel } from '@object-ui/i18n';
+// Lazy-loaded so the (recharts-backed) chart bundle only loads when a dataset
+// preview actually renders a chart — keeps the metadata-admin bundle small.
+const ChartRenderer = React.lazy(() => import('@object-ui/plugin-charts').then((m) => ({ default: m.ChartRenderer })));
+export function DatasetPreview({ draft }) {
+    const adapter = useAdapter();
+    const { fieldLabel } = useSafeFieldLabel();
+    const objectName = draft.object;
+    const measureNames = React.useMemo(() => {
+        const m = Array.isArray(draft.measures) ? draft.measures : [];
+        return m.map((x) => String(x?.name ?? '')).filter(Boolean);
+    }, [draft]);
+    const dimensionNames = React.useMemo(() => {
+        const d = Array.isArray(draft.dimensions) ? draft.dimensions : [];
+        return d.map((x) => String(x?.name ?? '')).filter(Boolean);
+    }, [draft]);
+    const canRun = !!objectName && measureNames.length > 0;
+    const [state, setState] = React.useState({ status: 'idle', rows: [] });
+    const run = React.useCallback(async () => {
+        if (!canRun)
+            return;
+        setState({ status: 'loading', rows: [] });
+        try {
+            const result = await adapter.queryDataset(draft, { dimensions: dimensionNames, measures: measureNames });
+            setState({
+                status: 'ok',
+                rows: Array.isArray(result?.rows) ? result.rows : [],
+                fields: Array.isArray(result?.fields) ? result.fields : [],
+                object: result?.object,
+            });
+        }
+        catch (e) {
+            setState({ status: 'error', rows: [], error: String(e?.message ?? e) });
+        }
+    }, [adapter, draft, dimensionNames, measureNames, canRun]);
+    // Auto-run a live preview whenever the meaningful selection signature changes.
+    const signature = `${objectName ?? ''}|${dimensionNames.join(',')}|${measureNames.join(',')}`;
+    React.useEffect(() => {
+        if (canRun)
+            void run();
+        // Intentionally keyed on `signature` only — re-run when the dataset's
+        // object/dimensions/measures change, not on every unrelated draft edit.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [signature]);
+    if (!objectName) {
+        return (_jsx(PreviewShell, { children: _jsx(PreviewEmptyState, { icon: _jsx(BarChart3, { className: "h-8 w-8" }), title: "Pick a base object", description: "Set the dataset's `object` to preview it against live data." }) }));
+    }
+    if (measureNames.length === 0) {
+        return (_jsx(PreviewShell, { children: _jsx(PreviewEmptyState, { icon: _jsx(BarChart3, { className: "h-8 w-8" }), title: "Add a measure", description: "A dataset needs at least one measure (e.g. revenue = sum(amount)) to preview." }) }));
+    }
+    // Display labels + currency-aware formatting, shared with the dashboard widget
+    // and the report renderer (@object-ui/core). Falls back to the raw name / plain
+    // number when the server result carries no field metadata.
+    const resultFields = state.status === 'ok' ? state.fields : undefined;
+    const resultObject = state.status === 'ok' ? state.object : undefined;
+    const { measureField, headerLabel } = buildDatasetFieldHelpers(resultFields, resultObject, fieldLabel);
+    const columns = [...dimensionNames, ...measureNames];
+    // A ratio/percent measure (format like `0.0%`) on the same axis as a
+    // magnitude measure (currency in the hundred-thousands) renders as an
+    // invisible sliver. When the selection MIXES the two scales, plot the ratio
+    // measures as a line on a secondary (right) Y axis via the `combo` chart —
+    // bars (magnitude) keep the left axis. Same-scale selections stay a plain bar.
+    const isRatioMeasure = (m) => {
+        const f = measureField(m)?.format;
+        return typeof f === 'string' && f.includes('%');
+    };
+    const ratioMeasures = measureNames.filter(isRatioMeasure);
+    const mixedScale = ratioMeasures.length > 0 && ratioMeasures.length < measureNames.length;
+    return (_jsx(PreviewShell, { hint: `dataset · ${objectName}${dimensionNames.length ? ' · by ' + dimensionNames.join(', ') : ''}`, children: _jsxs("div", { className: "p-3 space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: () => void run(), disabled: state.status === 'loading', className: "inline-flex items-center gap-1.5 rounded-md border bg-background px-3 py-1.5 text-xs font-medium hover:bg-accent disabled:opacity-50", children: [state.status === 'loading'
+                                    ? _jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })
+                                    : _jsx(BarChart3, { className: "h-3.5 w-3.5" }), "Run preview"] }), _jsxs("span", { className: "text-[11px] text-muted-foreground", children: [measureNames.length, " measure", measureNames.length === 1 ? '' : 's', " \u00B7 ", dimensionNames.length, " dimension", dimensionNames.length === 1 ? '' : 's'] })] }), state.status === 'error' && (_jsxs("div", { role: "alert", className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: [_jsx(AlertTriangle, { className: "h-3.5 w-3.5 mt-0.5 shrink-0" }), _jsx("span", { className: "break-words", children: state.error })] })), state.status === 'ok' && state.rows.length === 0 && (_jsx(PreviewEmptyState, { icon: _jsx(BarChart3, { className: "h-8 w-8" }), title: "No rows", description: "The dataset returned no rows for the current scope." })), state.rows.length > 0 && dimensionNames.length >= 1 && (_jsx(PreviewErrorBoundary, { fallbackHint: "Couldn't render the chart for this result \u2014 the table below still shows the data.", children: _jsx(React.Suspense, { fallback: _jsx("div", { className: "h-[260px] flex items-center justify-center text-xs text-muted-foreground", children: _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) }), children: _jsxs("div", { className: "rounded-md border p-2", children: [_jsx(ChartRenderer, { schema: {
+                                        data: state.rows,
+                                        xAxisKey: dimensionNames[0],
+                                        chartType: mixedScale ? 'combo' : 'bar',
+                                        series: measureNames.map((m) => ({
+                                            dataKey: m,
+                                            label: headerLabel(m),
+                                            chartType: mixedScale ? (isRatioMeasure(m) ? 'line' : 'bar') : 'bar',
+                                        })),
+                                    } }), mixedScale && (_jsxs("p", { className: "mt-1 px-1 text-[10px] text-muted-foreground", children: ["Ratio measures (", ratioMeasures.map(headerLabel).join(', '), ") use the right axis."] }))] }) }) })), state.rows.length > 0 && (_jsx("div", { className: "overflow-auto max-h-[60vh] rounded-md border", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { className: "bg-muted/40", children: _jsx("tr", { children: columns.map((c) => (_jsx("th", { className: "px-2 py-1.5 text-left font-medium whitespace-nowrap", children: headerLabel(c) }, c))) }) }), _jsx("tbody", { children: state.rows.map((row, i) => (_jsx("tr", { className: "border-t", children: columns.map((c) => (_jsx("td", { className: "px-2 py-1 tabular-nums whitespace-nowrap", children: measureNames.includes(c)
+                                            ? formatMeasure(row[c], measureField(c)?.format, measureField(c)?.currency)
+                                            : formatDimensionValue(row[c]) }, c))) }, i))) })] }) }))] }) }));
+}

package/dist/views/metadata-admin/previews/DatasourcePreview.d.ts

@@ -0,0 +1,23 @@
+/**
+ * DatasourcePreview — read-only summary of a Datasource draft.
+ *
+ * Datasources hold connection material, so the preview's most
+ * important contract is "show enough to verify the binding, never
+ * leak secrets". Concretely:
+ *
+ *   • Header: driver pill (postgres/mysql/mongo/…), name, label,
+ *     active flag, default-flag.
+ *   • Connection card: a redacted config table where any key whose
+ *     name matches /pass|secret|key|token|credential/i is replaced
+ *     with `••••••` and a "redacted" badge. Other primitives render
+ *     verbatim; nested objects render as their key count.
+ *   • Pool, SSL, retry, health-check pills derived from optional
+ *     sibling blocks.
+ *   • Read-replica count and capabilities chip strip.
+ *
+ * The preview never attempts a live "test connection" — it runs
+ * inside the editor sandbox and must remain side-effect free.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function DatasourcePreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/DatasourcePreview.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, Copy, Database, HardDrive, Lock, Power, RotateCcw, ShieldCheck, Star, } from 'lucide-react';
+import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+import { ExternalDatasourcePanel } from '../external/ExternalDatasourcePanel';
+const SECRET_RE = /pass|secret|key|token|credential|auth/i;
+function isSecretKey(k) {
+    return SECRET_RE.test(k);
+}
+function redactValue(v) {
+    if (v == null || v === '')
+        return '∅';
+    return '••••••';
+}
+function renderValue(v) {
+    if (v == null)
+        return '∅';
+    if (typeof v === 'string')
+        return v;
+    if (typeof v === 'number' || typeof v === 'boolean')
+        return String(v);
+    if (Array.isArray(v))
+        return `[${v.length}]`;
+    if (typeof v === 'object')
+        return `{${Object.keys(v).length} keys}`;
+    return String(v);
+}
+export function DatasourcePreview({ name, draft }) {
+    const d = draft;
+    const dsName = String(d.name ?? name ?? '');
+    const label = String(d.label ?? dsName);
+    const description = d.description ?? '';
+    const driver = d.driver ?? d.type ?? 'unknown';
+    const active = d.active !== false;
+    const isDefault = !!d.isDefault || !!d.default;
+    const config = d.config ?? {};
+    const pool = d.pool;
+    const ssl = d.ssl;
+    const retryPolicy = d.retryPolicy;
+    const healthCheck = d.healthCheck;
+    const readReplicas = Array.isArray(d.readReplicas) ? d.readReplicas : [];
+    const capabilities = Array.isArray(d.capabilities) ? d.capabilities : [];
+    // External Datasource Federation (ADR-0015): a non-'managed' schemaMode
+    // marks this datasource as federated. The panel keys off the *saved* item
+    // name (`name`) so its REST calls hit a persisted datasource.
+    const schemaMode = d.schemaMode ?? 'managed';
+    const isFederated = schemaMode !== 'managed';
+    const external = d.external ?? undefined;
+    const allowWrites = !!external?.allowWrites;
+    const configEntries = Object.entries(config);
+    if (!dsName && configEntries.length === 0) {
+        return (_jsx(PreviewShell, { hint: "datasource", children: _jsx(PreviewMessage, { children: "Set a name and at least a driver to see the datasource preview." }) }));
+    }
+    return (_jsx(PreviewShell, { hint: `datasource · ${driver}`, children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsx("div", { className: "rounded border bg-muted/30 p-3", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Database, { className: "h-4 w-4 mt-0.5 text-muted-foreground shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2", children: [_jsx("span", { className: "text-sm font-medium truncate", children: label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: dsName })] }), description && (_jsx("div", { className: "text-xs text-muted-foreground mt-0.5", children: description })), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px]", children: [_jsxs("span", { className: "inline-flex items-center gap-1 rounded border bg-background px-1.5 py-0.5 font-mono", children: [_jsx(HardDrive, { className: "h-3 w-3 text-muted-foreground" }), " ", driver] }), _jsx(Pill, { icon: Power, label: active ? 'Active' : 'Disabled', tone: active ? 'green' : 'gray' }), isDefault && _jsx(Pill, { icon: Star, label: "default", tone: "amber" }), readReplicas.length > 0 && (_jsx(Pill, { icon: Copy, label: `${readReplicas.length} read replica${readReplicas.length === 1 ? '' : 's'}` }))] })] })] }) }), isFederated && (_jsx(ExternalDatasourcePanel, { datasource: String(name ?? ''), schemaMode: schemaMode, allowWrites: allowWrites })), _jsx(Section, { title: "Connection", icon: Lock, children: configEntries.length === 0 ? (_jsx("div", { className: "text-xs text-muted-foreground italic", children: "No config keys set." })) : (_jsx("div", { className: "rounded border bg-background overflow-hidden", children: _jsx("table", { className: "w-full text-xs", children: _jsx("tbody", { className: "divide-y", children: configEntries.map(([k, v]) => {
+                                        const secret = isSecretKey(k);
+                                        return (_jsxs("tr", { children: [_jsx("td", { className: "px-2.5 py-1.5 align-top w-40 font-mono text-muted-foreground", children: k }), _jsx("td", { className: "px-2.5 py-1.5 font-mono break-all", children: secret ? (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { children: redactValue(v) }), _jsx("span", { className: "rounded bg-amber-50 border border-amber-200 px-1 py-0.5 text-[9px] uppercase tracking-wider text-amber-800", children: "redacted" })] })) : (renderValue(v)) })] }, k));
+                                    }) }) }) })) }), _jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsx(SideBlock, { title: "Pool", icon: Activity, value: pool }), _jsx(SideBlock, { title: "SSL", icon: ShieldCheck, value: typeof ssl === 'boolean' ? { enabled: ssl } : ssl }), _jsx(SideBlock, { title: "Retry Policy", icon: RotateCcw, value: retryPolicy }), _jsx(SideBlock, { title: "Health Check", icon: Activity, value: healthCheck })] }), capabilities.length > 0 && (_jsx(Section, { title: "Capabilities", icon: ShieldCheck, children: _jsx("div", { className: "flex flex-wrap gap-1", children: capabilities.map((c) => (_jsx("span", { className: "inline-flex items-center gap-1 rounded border bg-muted/40 px-1.5 py-0.5 text-[11px] font-mono", children: c }, c))) }) }))] }) }) }));
+}
+function SideBlock({ title, icon: Icon, value, }) {
+    const present = value && typeof value === 'object' && Object.keys(value).length > 0;
+    return (_jsxs("div", { className: `rounded border bg-background ${present ? '' : 'opacity-60'}`, children: [_jsxs("div", { className: "flex items-center gap-1.5 border-b px-2.5 py-1.5", children: [_jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx("span", { className: "text-xs font-medium", children: title })] }), _jsx("div", { className: "px-2.5 py-1.5 text-[11px]", children: !present ? (_jsx("span", { className: "text-muted-foreground italic", children: "not configured" })) : (_jsx("dl", { className: "space-y-0.5", children: Object.entries(value).slice(0, 6).map(([k, v]) => (_jsxs("div", { className: "flex items-baseline gap-2 truncate", children: [_jsxs("dt", { className: "text-muted-foreground font-mono shrink-0", children: [k, ":"] }), _jsx("dd", { className: "font-mono truncate", children: isSecretKey(k) ? redactValue(v) : renderValue(v) })] }, k))) })) })] }));
+}
+function Section({ title, icon: Icon, children, }) {
+    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground uppercase tracking-wider", children: [Icon && _jsx(Icon, { className: "h-3 w-3" }), _jsx("span", { children: title })] }), children] }));
+}
+function Pill({ icon: Icon, label, tone = 'gray', mono = false, }) {
+    const cls = tone === 'green' ? 'text-emerald-700' : tone === 'amber' ? 'text-amber-700' : 'text-foreground';
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [Icon && _jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), _jsx("span", { className: `${cls} ${mono ? 'font-mono' : ''}`, children: label })] }));
+}

package/dist/views/metadata-admin/previews/EmailTemplatePreview.d.ts

@@ -1,2 +1,15 @@
+/**
+ * EmailTemplatePreview — sandboxed HTML preview with `{{var}}` and
+ * `${var}` substitution from a tiny variables editor.
+ *
+ * Why an iframe? Email HTML is full-document content (`<html>`, inline
+ * styles, sometimes `<head>` blocks). Injecting it inline would let it
+ * style the host page. `srcdoc` + `sandbox="allow-same-origin"` gives
+ * us a clean visual without exposing the admin UI to template CSS.
+ *
+ * Subject / from / to are surfaced above the body so authors can see
+ * the full envelope at a glance.
+ */
+import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function EmailTemplatePreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmailTemplatePreview({ draft }: MetadataPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/FieldStub.d.ts

@@ -0,0 +1,30 @@
+/**
+ * FieldStub — visual placeholder that mimics the *runtime input* for
+ * every supported field type. Used inside the form-designer canvas
+ * so authors see "what their form will look like" without actually
+ * mounting the real widget (which would need a ValueDataSource and
+ * may fetch records, validate, etc.).
+ *
+ * Always disabled and stateless. Switches on `type` to render the
+ * appropriate shape (text input, switch, picklist, star row, …). Any
+ * unknown type falls back to a generic input + type badge.
+ */
+import * as React from 'react';
+interface FieldStubProps {
+    type: string;
+    label?: string;
+    placeholder?: string;
+    /** Picklist options for select/radio/multiselect/checkboxes. */
+    options?: Array<{
+        value: string;
+        label?: string;
+    }>;
+    /** Reference target for lookup/master_detail/tree. */
+    referenceTo?: string;
+    /** Formula expression for formula/summary. */
+    formula?: string;
+    /** Active UI locale (illustrative placeholder text is localized). */
+    locale?: string;
+}
+export declare function FieldStub(props: FieldStubProps): React.JSX.Element;
+export {};

package/dist/views/metadata-admin/previews/FieldStub.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Switch, Badge } from '@object-ui/components';
+import { Calendar, Clock, Link2, Image as ImageIcon, Paperclip, MapPin, Star, ChevronDown, Search, Hash, Phone, AtSign, Globe, Lock, Palette, } from 'lucide-react';
+import { FIELD_TYPE_META } from './field-types';
+import { t, tFormat } from '../i18n';
+export function FieldStub(props) {
+    const { type, locale } = props;
+    switch (type) {
+        case 'text':
+        case 'password':
+            return _jsx(PlainInput, { ...props, icon: type === 'password' ? _jsx(Lock, { className: "h-3.5 w-3.5" }) : undefined });
+        case 'email':
+            return _jsx(PlainInput, { ...props, icon: _jsx(AtSign, { className: "h-3.5 w-3.5" }), placeholder: props.placeholder ?? 'name@example.com' });
+        case 'url':
+            return _jsx(PlainInput, { ...props, icon: _jsx(Globe, { className: "h-3.5 w-3.5" }), placeholder: props.placeholder ?? 'https://…' });
+        case 'phone':
+            return _jsx(PlainInput, { ...props, icon: _jsx(Phone, { className: "h-3.5 w-3.5" }), placeholder: props.placeholder ?? '+1 555 …' });
+        case 'number':
+        case 'currency':
+        case 'percent':
+        case 'autonumber':
+            return _jsx(PlainInput, { ...props, icon: _jsx(Hash, { className: "h-3.5 w-3.5" }), placeholder: props.placeholder ?? '0' });
+        case 'date':
+        case 'datetime':
+            return _jsx(PlainInput, { ...props, icon: _jsx(Calendar, { className: "h-3.5 w-3.5" }), placeholder: t('designer.stub.pickDate', locale) });
+        case 'time':
+            return _jsx(PlainInput, { ...props, icon: _jsx(Clock, { className: "h-3.5 w-3.5" }), placeholder: "hh:mm" });
+        case 'textarea':
+        case 'markdown':
+        case 'html':
+        case 'richtext':
+        case 'json':
+        case 'code':
+            return _jsx(TextareaStub, { ...props, mono: type === 'json' || type === 'code' });
+        case 'boolean':
+        case 'toggle':
+            return (_jsxs("div", { className: "flex items-center gap-2 h-8", children: [_jsx(Switch, { disabled: true }), _jsx("span", { className: "text-xs text-muted-foreground", children: props.placeholder ?? t('designer.stub.off', locale) })] }));
+        case 'select':
+        case 'radio':
+            return _jsx(PicklistStub, { ...props, single: true });
+        case 'multiselect':
+        case 'checkboxes':
+        case 'tags':
+            return _jsx(PicklistStub, { ...props, single: false });
+        case 'lookup':
+        case 'master_detail':
+        case 'tree':
+            return _jsx(LookupStub, { ...props });
+        case 'image':
+        case 'avatar':
+            return _jsx(MediaTile, { icon: _jsx(ImageIcon, { className: "h-4 w-4" }), label: t(type === 'avatar' ? 'designer.stub.uploadAvatar' : 'designer.stub.uploadImage', locale) });
+        case 'file':
+        case 'video':
+        case 'audio':
+        case 'signature':
+            return _jsx(MediaTile, { icon: _jsx(Paperclip, { className: "h-4 w-4" }), label: tFormat('designer.stub.upload', locale, { type }) });
+        case 'qrcode':
+            return _jsx(MediaTile, { icon: _jsx(Paperclip, { className: "h-4 w-4" }), label: t('designer.stub.qrcode', locale) });
+        case 'color':
+            return (_jsxs("div", { className: "flex items-center gap-2 h-8", children: [_jsx("span", { className: "inline-block h-6 w-6 rounded border", style: { background: '#3b82f6' } }), _jsx("span", { className: "text-xs text-muted-foreground", children: "#3b82f6" }), _jsx(Palette, { className: "h-3.5 w-3.5 text-muted-foreground" })] }));
+        case 'rating':
+            return (_jsx("div", { className: "flex items-center gap-0.5 h-8", children: [0, 1, 2, 3, 4].map((i) => (_jsx(Star, { className: 'h-4 w-4 ' + (i < 3 ? 'fill-amber-400 text-amber-400' : 'text-muted-foreground/40') }, i))) }));
+        case 'slider':
+            return (_jsxs("div", { className: "flex items-center gap-2 h-8", children: [_jsxs("div", { className: "relative flex-1 h-1.5 rounded bg-muted", children: [_jsx("div", { className: "absolute inset-y-0 left-0 w-2/5 rounded bg-primary" }), _jsx("div", { className: "absolute h-3 w-3 -top-[3px] left-[40%] rounded-full border-2 border-primary bg-background" })] }), _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: "40" })] }));
+        case 'progress':
+            return (_jsxs("div", { className: "flex items-center gap-2 h-8", children: [_jsx("div", { className: "relative flex-1 h-2 rounded bg-muted", children: _jsx("div", { className: "absolute inset-y-0 left-0 w-3/5 rounded bg-emerald-500" }) }), _jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: "60%" })] }));
+        case 'location':
+            return _jsx(PlainInput, { ...props, icon: _jsx(MapPin, { className: "h-3.5 w-3.5" }), placeholder: t('designer.stub.latLng', locale) });
+        case 'address':
+            return _jsx(TextareaStub, { ...props, placeholder: props.placeholder ?? 'Street\nCity, State ZIP\nCountry' });
+        case 'formula':
+        case 'summary':
+            return (_jsx("div", { className: "h-8 px-2 flex items-center text-xs font-mono bg-muted/40 border rounded text-muted-foreground", children: props.formula ? `ƒ ${props.formula}` : `ƒ ${t('designer.stub.computed', locale)}` }));
+        case 'composite':
+            return (_jsx("div", { className: "p-2 border-dashed border-2 rounded text-[11px] text-muted-foreground italic", children: t('designer.stub.composite', locale) }));
+        case 'repeater':
+            return (_jsx("div", { className: "p-2 border-dashed border-2 rounded text-[11px] text-muted-foreground italic", children: t('designer.stub.repeater', locale) }));
+        case 'vector':
+            return (_jsxs("div", { className: "h-8 px-2 flex items-center text-xs font-mono bg-muted/40 border rounded text-muted-foreground", children: ["[0.124, 0.337, \u2026] ", props.placeholder ? `(${props.placeholder})` : ''] }));
+        default:
+            return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { disabled: true, placeholder: props.placeholder ?? `(${type})`, className: "h-8 text-sm" }), _jsx(Badge, { variant: "outline", className: "text-[10px]", children: type })] }));
+    }
+}
+function PlainInput({ placeholder, icon }) {
+    return (_jsxs("div", { className: "relative", children: [_jsx(Input, { disabled: true, placeholder: placeholder ?? '', className: 'h-8 text-sm ' + (icon ? 'pl-8' : '') }), icon && (_jsx("div", { className: "absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground", children: icon }))] }));
+}
+function TextareaStub({ placeholder, mono }) {
+    return (_jsx("textarea", { disabled: true, placeholder: placeholder ?? '', className: 'w-full min-h-[60px] text-sm rounded-md border bg-background px-2 py-1.5 disabled:opacity-100 ' + (mono ? 'font-mono text-xs' : '') }));
+}
+function PicklistStub({ options, placeholder, single, locale }) {
+    const opts = options ?? [];
+    const visible = opts.slice(0, single ? 1 : 3).filter((o) => o.value || o.label);
+    if (single) {
+        return (_jsxs("div", { className: "h-8 px-2 flex items-center justify-between text-sm border rounded bg-background text-muted-foreground", children: [_jsx("span", { className: "truncate", children: visible[0]?.label || visible[0]?.value || placeholder || t('designer.stub.select', locale) }), _jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0" })] }));
+    }
+    return (_jsxs("div", { className: "min-h-8 px-1.5 py-1 flex items-center flex-wrap gap-1 border rounded bg-background", children: [visible.length === 0 ? (_jsx("span", { className: "text-xs text-muted-foreground px-1", children: placeholder || t('designer.stub.pickMulti', locale) })) : (visible.map((o, i) => (_jsx(Badge, { variant: "secondary", className: "text-[10px]", children: o.label || o.value }, i)))), opts.length > visible.length && (_jsxs("span", { className: "text-[10px] text-muted-foreground", children: ["+", opts.length - visible.length] }))] }));
+}
+function LookupStub({ referenceTo, placeholder, locale }) {
+    const meta = referenceTo ? FIELD_TYPE_META.lookup : null;
+    return (_jsxs("div", { className: "h-8 px-2 flex items-center gap-2 border rounded bg-background text-sm text-muted-foreground", children: [_jsx(Link2, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "truncate flex-1", children: placeholder || (referenceTo ? tFormat('designer.stub.searchRef', locale, { ref: referenceTo }) : t('designer.stub.chooseRelated', locale)) }), referenceTo && (_jsxs(Badge, { variant: "outline", className: "text-[10px] shrink-0", children: ["\u2192 ", referenceTo] })), !referenceTo && _jsx(Search, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }), meta && null] }));
+}
+function MediaTile({ icon, label }) {
+    return (_jsxs("div", { className: "h-16 w-full border-2 border-dashed rounded flex flex-col items-center justify-center gap-1 text-muted-foreground bg-muted/20", children: [icon, _jsx("span", { className: "text-[11px]", children: label })] }));
+}

package/dist/views/metadata-admin/previews/FieldsListEditor.d.ts

@@ -0,0 +1,50 @@
+/**
+ * FieldsListEditor — the right-panel column manager (mainstream low-code
+ * pattern: a vertical, drag-reorderable list of fields with an inline
+ * "+ Add field" picker).
+ *
+ * This is the SINGLE owner of column read / write / reorder / remove / select
+ * logic for a View variant. It is rendered in two places so the fields list is
+ * always visible:
+ *   • {@link ViewVariantInspector} (the home / variant panel) — no row is
+ *     highlighted; clicking a row drills into the scoped column inspector.
+ *   • {@link ViewColumnInspector} (the scoped column panel) — the selected row
+ *     is highlighted and the column's detail props render below it.
+ *
+ * Columns round-trip in their original shape: string variants (e.g. kanban
+ * card fields) stay strings; object variants keep `{ field, label, … }`. The
+ * raw `columns` array is reordered / spliced directly — never normalised — so
+ * round-trips stay lossless.
+ */
+import * as React from 'react';
+import { type ObjectFieldInfo } from './useObjectFields';
+export interface FieldsListEditorProps {
+    /** Top-level variant key the columns belong to (e.g. 'list'). */
+    variantKey: string;
+    /** The variant schema; re-spread on every column write. */
+    schema: Record<string, unknown>;
+    /** Raw columns array (entries may be strings or objects). */
+    columns: unknown[];
+    /** Whether every column is a bare string (drives new-column shape). */
+    allStrings: boolean;
+    /** Bound object name — drives field icons + the Add-field picker. */
+    objectName?: string;
+    /**
+     * Pre-resolved field catalog. When supplied, skips the network fetch and
+     * uses this list instead (host already holds the object definition).
+     */
+    objectFieldsOverride?: ObjectFieldInfo[];
+    /** Index of the currently selected column, or null when none. */
+    selectedIndex: number | null;
+    /** Read-only mode disables drag / add / remove. */
+    readOnly?: boolean;
+    /** Apply a shallow patch to the draft. */
+    onPatch: (patch: Record<string, unknown>) => void;
+    /** Emit / redirect the column selection. */
+    onSelectionChange?: (sel: {
+        kind: string;
+        id: string;
+        label?: string;
+    } | null) => void;
+}
+export declare function FieldsListEditor({ variantKey, schema, columns, allStrings, objectName, objectFieldsOverride, selectedIndex, readOnly, onPatch, onSelectionChange, }: FieldsListEditorProps): React.JSX.Element;