@object-ui/app-shell 6.2.3 → 7.0.0

package/dist/views/DashboardView.js

@@ -2,21 +2,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Dashboard View Component
  * Renders a dashboard based on the dashboardName parameter.
- * Edit mode shows an inline config panel (DashboardConfigPanel / WidgetConfigPanel)
- * on the right side, following the same pattern as ListView.
+ * Edit mode shows a single inline config panel (DashboardConfigPanel) on the
+ * right side that hosts the studio's dashboard / widget inspectors, following
+ * the same pattern as ReportView.
  */
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
-import { DashboardRenderer, DashboardConfigPanel, WidgetConfigPanel, } from '@object-ui/plugin-dashboard';
+import { DashboardRenderer } from '@object-ui/plugin-dashboard';
+import { DrillNavigationProvider } from '@object-ui/react';
+import { useOpenRecordList } from './useOpenRecordList';
 import { ModalForm } from '@object-ui/plugin-form';
+import { DashboardConfigPanel } from './DashboardConfigPanel';
+import { useAuth } from '@object-ui/auth';
 import { toast } from 'sonner';
 import { Empty, EmptyTitle, EmptyDescription, Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@object-ui/components';
-import { LayoutDashboard, Pencil, TrendingUp, BarChart3, LineChart, PieChart, Table2, LayoutGrid, Plus, Trash2, } from 'lucide-react';
+import { LayoutDashboard, Pencil, TrendingUp, BarChart3, LineChart, PieChart, Table2, LayoutGrid, Plus, } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { SkeletonDashboard } from '../skeletons';
 import { useMetadata } from '../providers/MetadataProvider';
-import { resolveI18nLabel } from '../utils';
+import { useExpressionContext } from '../providers/ExpressionProvider';
+import { resolveI18nLabel, preferLocal } from '../utils';
 import { useAdapter } from '../providers/AdapterProvider';
+import { useMetadataClient } from './metadata-admin/useMetadata';
+import { persistRuntimeMetadata } from './runtime-metadata-persistence';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 // ---------------------------------------------------------------------------
 // Widget type palette for the add-widget toolbar
@@ -55,127 +63,25 @@ function defaultWidgetTitle(type) {
     return entry ? `New ${entry.label}` : 'New Widget';
 }
 // ---------------------------------------------------------------------------
-// Helpers: flatten / unflatten widget config for WidgetConfigPanel
-// ---------------------------------------------------------------------------
-// Top-level widget schema keys that the config panel exposes as flat fields.
-// Anything outside this set (e.g. pivot rowField/columnField, table searchable,
-// chart xAxisField/yAxisFields, list itemTemplate, custom component) is stored
-// under `widget.options` per the spec and round-tripped via spread.
-const TOP_LEVEL_WIDGET_KEYS = new Set([
-    'title',
-    'description',
-    'type',
-    'object',
-    'categoryField',
-    'valueField',
-    'aggregate',
-    'colorVariant',
-    'actionUrl',
-    'layoutW',
-    'layoutH',
-    'id',
-    // Spec-declared top-level fields that the renderer reads directly off the
-    // widget (not from options). Keeping them here ensures the unflatten path
-    // does not silently drop them into options where the renderer ignores them.
-    'searchable',
-    'pagination',
-    // Drill-down virtual flat keys are handled explicitly below — listing them
-    // here keeps the generic options-collector from duplicating them.
-    'drillDownEnabled',
-    'drillDownTarget',
-]);
-function flattenWidgetConfig(widget) {
-    // Spread options first so explicit top-level widget fields take precedence
-    // on collision. This surfaces type-specific options (pivot/table/chart axes,
-    // list itemTemplate, etc.) so they appear pre-filled in the config panel.
-    const options = (widget.options ?? {});
-    const drillDown = (options.drillDown ?? {});
-    return {
-        ...options,
-        title: widget.title ?? '',
-        description: widget.description ?? '',
-        type: widget.type ?? 'metric',
-        object: widget.object ?? '',
-        categoryField: widget.categoryField ?? options.categoryField ?? '',
-        valueField: widget.valueField ?? options.valueField ?? '',
-        aggregate: widget.aggregate ?? options.aggregate ?? 'count',
-        layoutW: widget.layout?.w ?? 1,
-        layoutH: widget.layout?.h ?? 1,
-        colorVariant: widget.colorVariant ?? options.colorVariant ?? 'default',
-        actionUrl: widget.actionUrl ?? options.actionUrl ?? '',
-        searchable: widget.searchable ?? options.searchable ?? false,
-        pagination: widget.pagination ?? options.pagination ?? false,
-        // Surface drill-down nested shape as flat switches for the panel
-        drillDownEnabled: drillDown.enabled ?? false,
-        drillDownTarget: drillDown.target ?? 'drawer',
-    };
-}
-function unflattenWidgetConfig(config, base) {
-    // Collect any unknown keys (pivot/table/chart-specific) into options so the
-    // serialized widget keeps the spec-compliant nested shape.
-    const baseOptions = (base.options ?? {});
-    const newOptions = { ...baseOptions };
-    for (const [key, value] of Object.entries(config)) {
-        if (TOP_LEVEL_WIDGET_KEYS.has(key))
-            continue;
-        if (value === undefined)
-            continue;
-        newOptions[key] = value;
-    }
-    // Re-nest drill-down flat keys back under options.drillDown so the renderer
-    // (which reads `options.drillDown`) picks them up.
-    const drillDownEnabled = config.drillDownEnabled;
-    const drillDownTarget = config.drillDownTarget;
-    if (drillDownEnabled !== undefined || drillDownTarget !== undefined) {
-        newOptions.drillDown = {
-            ...(baseOptions.drillDown || {}),
-            ...(drillDownEnabled !== undefined ? { enabled: !!drillDownEnabled } : {}),
-            ...(drillDownTarget !== undefined ? { target: drillDownTarget } : {}),
-        };
-    }
-    return {
-        title: config.title,
-        description: config.description,
-        type: config.type,
-        object: config.object,
-        categoryField: config.categoryField,
-        valueField: config.valueField,
-        aggregate: config.aggregate,
-        layout: { ...(base.layout || {}), w: config.layoutW, h: config.layoutH },
-        colorVariant: config.colorVariant,
-        actionUrl: config.actionUrl,
-        ...(config.searchable !== undefined ? { searchable: !!config.searchable } : {}),
-        ...(config.pagination !== undefined ? { pagination: !!config.pagination } : {}),
-        ...(Object.keys(newOptions).length > 0 ? { options: newOptions } : {}),
-    };
-}
-function extractDashboardConfig(schema) {
-    const s = (schema ?? {});
-    return {
-        columns: s.columns ?? 3,
-        gap: s.gap ?? 4,
-        rowHeight: String(s.rowHeight ?? '120'),
-        refreshInterval: String(s.refreshInterval ?? '0'),
-        title: s.title ?? '',
-        description: s.description ?? '',
-        showDescription: s.showDescription ?? true,
-        theme: s.theme ?? 'auto',
-    };
-}
-// ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
 export function DashboardView({ dataSource }) {
+    // Drill "escape hatch": lets the drill drawers open an object's full list page.
+    const openRecordList = useOpenRecordList();
     const { dashboardName } = useParams();
     const { showDebug } = useMetadataInspector();
     const adapter = useAdapter();
+    // ADR-0034: dashboard edits persist via the metadata draft/publish model.
+    const metadataClient = useMetadataClient();
     const { t } = useObjectTranslation();
     const { dashboardLabel, dashboardDescription } = useObjectLabel();
+    // Editing a dashboard mutates the SHARED definition, so it is an admin-only
+    // quick-edit affordance (mirrors ObjectView's view-config gate).
+    const { user } = useAuth();
+    const isAdmin = user?.role === 'admin';
     const [isLoading, setIsLoading] = useState(true);
     const [configPanelOpen, setConfigPanelOpen] = useState(false);
     const [selectedWidgetId, setSelectedWidgetId] = useState(null);
-    // Version counter — incremented on save to refresh the stable config reference
-    const [configVersion, setConfigVersion] = useState(0);
     // Modal state for header action buttons that request a modal (e.g. New Opportunity)
     const [modalState, setModalState] = useState(null);
     const closeModal = useCallback((result) => {
@@ -235,7 +141,9 @@ export function DashboardView({ dataSource }) {
         queueMicrotask(() => setIsLoading(false));
     }, [dashboardName]);
     const { dashboards, objects: metadataObjects, refresh } = useMetadata();
-    const dashboard = dashboards?.find((d) => d.name === dashboardName);
+    // ADR-0048 Phase 2 — prefer the dashboard owned by the current app's package.
+    const { app: activeApp } = useExpressionContext();
+    const dashboard = preferLocal(dashboards, dashboardName, activeApp?._packageId);
     // Local schema state for live preview — initialized from metadata
     const [editSchema, setEditSchema] = useState(null);
     // When metadata refreshes (dashboard reference changes), discard stale
@@ -249,12 +157,12 @@ export function DashboardView({ dataSource }) {
     // ---- Save helper --------------------------------------------------------
     const saveSchema = useCallback(async (schema) => {
         try {
-            if (adapter && adapter.updateDashboard) {
-                await adapter.updateDashboard(dashboardName, schema);
-            }
-            else if (adapter) {
-                // Fallback for adapters that don't expose updateDashboard
-                await adapter.update('sys_dashboard', dashboardName, schema);
+            if (metadataClient) {
+                // ADR-0034: save stages a per-item draft; an explicit Publish
+                // promotes it (RuntimeDraftBar). `sys_dashboard` is retired.
+                await persistRuntimeMetadata('dashboard', dashboardName, schema, {
+                    metadataClient,
+                });
             }
             // Refresh metadata cache so closing the config panel shows saved data
             refresh().catch(() => { });
@@ -267,12 +175,11 @@ export function DashboardView({ dataSource }) {
             console.warn('[DashboardView] Auto-save failed:', err);
             toast.error(`Failed to save dashboard: ${message}`);
         }
-    }, [adapter, dashboardName, refresh]);
+    }, [metadataClient, dashboardName, refresh]);
     // ---- Open / close config panel ------------------------------------------
     const handleOpenConfigPanel = useCallback(() => {
         setEditSchema(ensureWidgetIds(dashboard));
         setConfigPanelOpen(true);
-        setConfigVersion((v) => v + 1);
     }, [dashboard]);
     const handleCloseConfigPanel = useCallback(() => {
         setConfigPanelOpen(false);
@@ -298,7 +205,6 @@ export function DashboardView({ dataSource }) {
         setEditSchema(newSchema);
         saveSchema(newSchema);
         setSelectedWidgetId(id);
-        setConfigVersion((v) => v + 1);
     }, [editSchema, saveSchema]);
     const removeWidget = useCallback((widgetId) => {
         if (!editSchema)
@@ -325,119 +231,12 @@ export function DashboardView({ dataSource }) {
         setEditSchema(newSchema);
         saveSchema(newSchema);
     }, [editSchema, dashboard, saveSchema]);
-    // ---- Dashboard config panel handlers ------------------------------------
-    // Stabilize config reference: only recompute after explicit actions (panel
-    // open, save, widget add). configVersion is incremented on those actions.
-    // This prevents useConfigDraft from resetting the draft on every live field
-    // change (same pattern as ViewConfigPanel's stableActiveView).
-    const dashboardConfig = useMemo(() => extractDashboardConfig(editSchema || dashboard), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [configVersion]);
-    const handleDashboardConfigSave = useCallback((config) => {
-        if (!editSchema)
-            return;
-        const toNum = (v, fallback) => {
-            const n = Number(v);
-            return Number.isFinite(n) ? n : fallback;
-        };
-        const newSchema = {
-            ...editSchema,
-            columns: toNum(config.columns, editSchema.columns),
-            gap: toNum(config.gap, editSchema.gap),
-            rowHeight: toNum(config.rowHeight, editSchema.rowHeight),
-            refreshInterval: toNum(config.refreshInterval, 0) ?? 0,
-            title: config.title,
-            description: config.description,
-            showDescription: config.showDescription,
-            theme: config.theme,
-        };
-        setEditSchema(newSchema);
-        saveSchema(newSchema);
-        setConfigVersion((v) => v + 1);
-    }, [editSchema, saveSchema]);
-    const handleDashboardFieldChange = useCallback((field, value) => {
-        if (!editSchema)
-            return;
-        // Map config field keys to proper DashboardSchema updates for live preview.
-        // Coerce numeric layout fields so previews/save payloads stay typed.
-        setEditSchema((prev) => {
-            if (!prev)
-                return prev;
-            const numericFields = new Set(['columns', 'gap', 'rowHeight', 'refreshInterval']);
-            if (numericFields.has(field)) {
-                const n = Number(value);
-                return { ...prev, [field]: Number.isFinite(n) ? n : prev[field] };
-            }
-            return { ...prev, [field]: value };
-        });
-    }, [editSchema]);
-    // ---- Widget config panel handlers ---------------------------------------
-    const selectedWidget = editSchema?.widgets?.find((w) => w.id === selectedWidgetId);
-    // Stabilize widget config: only recompute after explicit actions (widget
-    // switch, save, add). configVersion is incremented on save/add, and
-    // selectedWidgetId changes on widget switch — this prevents useConfigDraft
-    // from resetting the draft on every live field change.
-    const widgetConfig = useMemo(() => (selectedWidget ? flattenWidgetConfig(selectedWidget) : {}), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [selectedWidgetId, configVersion]);
-    const handleWidgetConfigSave = useCallback((config) => {
-        if (!editSchema || !selectedWidgetId || !selectedWidget)
-            return;
-        const updates = unflattenWidgetConfig(config, selectedWidget);
-        const newSchema = {
-            ...editSchema,
-            widgets: editSchema.widgets.map((w) => w.id === selectedWidgetId ? { ...w, ...updates } : w),
-        };
-        setEditSchema(newSchema);
-        saveSchema(newSchema);
-        setConfigVersion((v) => v + 1);
-    }, [editSchema, selectedWidgetId, selectedWidget, saveSchema]);
-    const handleWidgetFieldChange = useCallback((field, value) => {
-        if (!selectedWidgetId)
-            return;
-        setEditSchema((prev) => {
-            if (!prev)
-                return prev;
-            const widget = prev.widgets?.find((w) => w.id === selectedWidgetId);
-            if (!widget)
-                return prev;
-            const flat = flattenWidgetConfig(widget);
-            flat[field] = value;
-            const updates = unflattenWidgetConfig(flat, widget);
-            return {
-                ...prev,
-                widgets: prev.widgets.map((w) => w.id === selectedWidgetId ? { ...w, ...updates } : w),
-            };
-        });
-    }, [selectedWidgetId]);
-    // ---- Metadata-driven dropdown options -----------------------------------
-    const availableObjects = useMemo(() => {
-        if (!metadataObjects?.length)
-            return undefined;
-        return metadataObjects.map((obj) => ({
-            value: obj.name,
-            label: obj.label || obj.name,
-        }));
-    }, [metadataObjects]);
-    const availableFields = useMemo(() => {
-        const objectName = selectedWidget?.object;
-        if (!objectName || !metadataObjects?.length)
-            return undefined;
-        const obj = metadataObjects.find((o) => o.name === objectName);
-        if (!obj?.fields)
-            return undefined;
-        const fields = obj.fields;
-        if (Array.isArray(fields)) {
-            return fields
-                .filter((f) => f.name)
-                .map((f) => ({ value: f.name, label: f.label || f.name }));
-        }
-        // fields can be Record<string, FieldMetadata>
-        return Object.entries(fields).map(([key, f]) => ({
-            value: key,
-            label: f.label || key,
-        }));
-    }, [selectedWidget?.object, metadataObjects]);
+    // ---- Live-edit schema for the config panel ------------------------------
+    // The single controlled config panel hosts the studio inspectors, which edit
+    // the FULL nested dashboard draft directly (dashboard-level via shallow patch,
+    // widget-level by addressing `widgets` by id). No flatten / unflatten / config
+    // extraction is required anymore.
+    const panelSchema = (editSchema || dashboard) ?? null;
     // ---- Runtime capability gate (must run before guards to respect Rules of Hooks)
     // Hide widgets whose `requiresObject` is not registered (mirrors
     // NavigationItem.requiresObject for nav entries). Defaults to widget.object
@@ -495,7 +294,7 @@ export function DashboardView({ dataSource }) {
                                     description: resolveI18nLabel(rawDesc, t),
                                 });
                                 return desc ? (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: desc })) : null;
-                            })()] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.edit', { defaultValue: 'Edit' })] })] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, onWidgetsReorder: handleWidgetsReorder, modalHandler: modalHandler, scriptHandlers: scriptHandlers, hideHeaderText: true }) }), selectedWidget ? (_jsx(WidgetConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: widgetConfig, onSave: handleWidgetConfigSave, onFieldChange: handleWidgetFieldChange, availableObjects: availableObjects, availableFields: availableFields, headerExtra: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => removeWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "data-testid": "widget-delete-button", title: "Delete widget", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }, selectedWidgetId)) : (_jsx(DashboardConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: dashboardConfig, onSave: handleDashboardConfigSave, onFieldChange: handleDashboardFieldChange })), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
+                            })()] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), isAdmin && (_jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.edit', { defaultValue: 'Edit' })] }))] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DrillNavigationProvider, { value: { openRecordList }, children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, onWidgetsReorder: handleWidgetsReorder, modalHandler: modalHandler, scriptHandlers: scriptHandlers, hideHeaderText: true }) }) }), _jsx(DashboardConfigPanel, { open: configPanelOpen && isAdmin, onClose: handleCloseConfigPanel, schema: panelSchema, selectedWidgetId: selectedWidgetId, onSelectWidget: setSelectedWidgetId, onSave: saveSchema, onChange: setEditSchema, onRemoveWidget: removeWidget, name: dashboardName, metadataClient: metadataClient, onAfterChange: () => refresh().catch(() => { }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
                     type: 'object-form',
                     formType: 'modal',
                     objectName: modalState.schema.objectName,

package/dist/views/FlowRunner.d.ts

@@ -0,0 +1,59 @@
+export interface ScreenFieldSpec {
+    name: string;
+    label?: string;
+    type?: string;
+    required?: boolean;
+    options?: Array<{
+        value: unknown;
+        label: string;
+    }>;
+    defaultValue?: unknown;
+    placeholder?: string;
+}
+export interface ScreenSpec {
+    nodeId: string;
+    title?: string;
+    description?: string;
+    fields: ScreenFieldSpec[];
+    /**
+     * `'object-form'` renders the named object's FULL create/edit form — incl.
+     * inline master-detail child grids — as a wizard step (vs. the flat `fields`
+     * list). The form persists the record (and its children, atomically) itself,
+     * then resumes the run with the saved id bound to `idVariable`.
+     */
+    kind?: 'fields' | 'object-form';
+    objectName?: string;
+    mode?: 'create' | 'edit';
+    recordId?: string;
+    defaults?: Record<string, unknown>;
+    idVariable?: string;
+}
+export interface ScreenFlowState {
+    flowName: string;
+    runId: string;
+    screen: ScreenSpec;
+}
+export interface FlowRunnerProps {
+    /** The paused screen-flow to drive, or `null` when closed. */
+    state: ScreenFlowState | null;
+    /** Authenticated fetch (shared with the host view). */
+    authFetch: (url: string, init?: RequestInit) => Promise<Response>;
+    /** API base (e.g. `import.meta.env.VITE_SERVER_URL || ''`). */
+    baseUrl: string;
+    /** User dismissed the runner without completing. */
+    onClose: () => void;
+    /** The flow ran to completion — host should refresh. */
+    onComplete: () => void;
+    /**
+     * Data source — required to render `object-form` wizard steps. ObjectForm
+     * fetches the object schema and persists (incl. atomic master-detail batch)
+     * through this adapter.
+     */
+    dataSource?: any;
+    /**
+     * Object definitions — used to derive an `object-form` step's inline
+     * master-detail `subforms` (mirrors RecordFormPage's create form).
+     */
+    objects?: any[];
+}
+export declare function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dataSource, objects }: FlowRunnerProps): import("react").JSX.Element | null;

package/dist/views/FlowRunner.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * FlowRunner — renders the interactive `screen` of a paused screen-flow run
+ * (framework screen-flow runtime, ADR-0019) and resumes it with the collected
+ * input.
+ *
+ * A `type: 'flow'` action launches a flow; when the run pauses at a `screen`
+ * node the launch response carries `{ status: 'paused', runId, screen }`. The
+ * host view (ObjectView / RecordDetailView) opens this modal with that state.
+ * On submit it POSTs `/api/v1/automation/{flow}/runs/{runId}/resume` with the
+ * field values as `inputs`; a `paused` response renders the next screen
+ * (multi-screen wizards), a terminal response closes and refreshes the view.
+ */
+import { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, Button, Input, Label, Textarea, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, } from '@object-ui/components';
+import { ObjectForm } from '@object-ui/plugin-form';
+import { toast } from 'sonner';
+function initialValues(screen) {
+    const v = {};
+    for (const f of screen.fields)
+        if (f.defaultValue !== undefined)
+            v[f.name] = f.defaultValue;
+    return v;
+}
+export function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dataSource, objects }) {
+    const [screen, setScreen] = useState(null);
+    const [runId, setRunId] = useState('');
+    const [flowName, setFlowName] = useState('');
+    const [values, setValues] = useState({});
+    const [submitting, setSubmitting] = useState(false);
+    useEffect(() => {
+        if (state) {
+            setScreen(state.screen);
+            setRunId(state.runId);
+            setFlowName(state.flowName);
+            setValues(initialValues(state.screen));
+        }
+    }, [state]);
+    if (!state || !screen)
+        return null;
+    const setVal = (name, v) => setValues((p) => ({ ...p, [name]: v }));
+    // Resume the paused run with `inputs` (applied as bare flow variables) and
+    // advance: render the next screen (multi-step wizard) or finish + refresh.
+    // Shared by the flat-field submit and the object-form save callback.
+    const resumeWith = async (inputs) => {
+        const res = await authFetch(`${baseUrl}/api/v1/automation/${encodeURIComponent(flowName)}/runs/${encodeURIComponent(runId)}/resume`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ inputs }) });
+        const json = await res.json().catch(() => null);
+        if (!res.ok || json?.success === false) {
+            // Transport / envelope failure — possibly transient (network, 5xx), so
+            // keep the dialog open and let the user retry the same run.
+            toast.error(json?.error || `Resume failed (HTTP ${res.status})`);
+            return;
+        }
+        const data = json?.data ?? {};
+        // The HTTP envelope is `{ success:true, data: AutomationResult }`; a flow
+        // that errored downstream surfaces as `data.success === false`. That is
+        // TERMINAL: the engine consumes the suspension before running downstream
+        // nodes (resume-once), so this run can never be resumed again — a retry
+        // would only hit "No suspended run". Close the runner instead of leaving
+        // a dead form open.
+        if (data.success === false || data.status === 'failed') {
+            // Prefer the flow's friendly `errorMessage`; fall back to the raw error.
+            toast.error(data.errorMessage || data.error || 'The flow failed to complete.');
+            onClose();
+            return;
+        }
+        if (data.status === 'paused' && data.screen) {
+            setScreen(data.screen);
+            setRunId(data.runId || runId);
+            setValues(initialValues(data.screen));
+            toast.success('Saved — next step');
+        }
+        else {
+            // Terminal success — show the flow's declared completion message.
+            toast.success(data.successMessage || 'Done');
+            onComplete();
+        }
+    };
+    const submit = async () => {
+        const missing = screen.fields.filter((f) => f.required && (values[f.name] === undefined || values[f.name] === '' || values[f.name] === null));
+        if (missing.length) {
+            toast.error(`Please fill: ${missing.map((f) => f.label || f.name).join(', ')}`);
+            return;
+        }
+        setSubmitting(true);
+        try {
+            await resumeWith(values);
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    // Object-form step: ObjectForm has already persisted the record (and its
+    // children, atomically). Resume the run with the new record's id bound to the
+    // step's `idVariable` so later steps can reference it (e.g. the Opportunity
+    // form's `account` FK = the Customer step's new id).
+    const onObjectFormSaved = async (saved) => {
+        const id = saved?.id ?? saved?.data?.id ?? saved?.record?.id;
+        const inputs = screen.idVariable && id != null ? { [screen.idVariable]: id } : {};
+        setSubmitting(true);
+        try {
+            await resumeWith(inputs);
+        }
+        catch (err) {
+            toast.error(err.message);
+        }
+        finally {
+            setSubmitting(false);
+        }
+    };
+    const isObjectForm = screen.kind === 'object-form' && !!screen.objectName;
+    const objectDef = isObjectForm && Array.isArray(objects)
+        ? objects.find((o) => o?.name === screen.objectName)
+        : undefined;
+    const subforms = objectDef
+        ? (objectDef.form?.subforms ?? objectDef.formViews?.default?.subforms)
+        : undefined;
+    return (_jsx(Dialog, { open: true, onOpenChange: (o) => { if (!o && !submitting)
+            onClose(); }, children: _jsxs(DialogContent, { className: isObjectForm ? 'sm:max-w-3xl max-h-[90vh] overflow-y-auto' : 'sm:max-w-md', children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: screen.title || 'Input' }), screen.description && _jsx(DialogDescription, { children: screen.description })] }), isObjectForm ? (_jsx("div", { className: "py-2", children: dataSource ? (_jsx(ObjectForm, { schema: {
+                            type: 'object-form',
+                            formType: 'simple',
+                            objectName: screen.objectName,
+                            mode: screen.mode === 'edit' ? 'edit' : 'create',
+                            recordId: screen.mode === 'edit' ? screen.recordId : undefined,
+                            ...(screen.defaults ? { initialValues: screen.defaults } : {}),
+                            layout: 'vertical',
+                            subforms,
+                            onSuccess: onObjectFormSaved,
+                            onCancel: onClose,
+                            showSubmit: true,
+                            showCancel: true,
+                            submitText: 'Save & Continue',
+                            cancelText: 'Cancel',
+                        }, dataSource: dataSource }, screen.nodeId)) : (_jsx("div", { className: "text-sm text-destructive py-4", children: "This step renders an object form but no data source is available." })) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "space-y-4 py-2", children: screen.fields.map((f) => (_jsxs("div", { className: "space-y-1.5", children: [_jsxs(Label, { htmlFor: `ff-${f.name}`, className: "text-sm", children: [f.label || f.name, f.required && _jsx("span", { className: "text-destructive", children: " *" })] }), _jsx(FieldInput, { field: f, value: values[f.name], onChange: (v) => setVal(f.name, v) })] }, f.name))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx(Button, { onClick: submit, disabled: submitting, children: submitting ? 'Submitting…' : 'Submit' })] })] }))] }) }));
+}
+function FieldInput({ field, value, onChange }) {
+    const id = `ff-${field.name}`;
+    const t = (field.type || 'text').toLowerCase();
+    if (Array.isArray(field.options) && field.options.length > 0) {
+        return (_jsxs(Select, { value: value != null ? String(value) : undefined, onValueChange: (v) => onChange(v), children: [_jsx(SelectTrigger, { id: id, children: _jsx(SelectValue, { placeholder: field.placeholder || 'Select…' }) }), _jsx(SelectContent, { children: field.options.map((o, i) => (_jsx(SelectItem, { value: String(o.value), children: o.label }, i))) })] }));
+    }
+    if (t === 'boolean' || t === 'checkbox') {
+        return _jsx(Checkbox, { id: id, checked: value === true, onCheckedChange: (c) => onChange(c === true) });
+    }
+    if (t === 'textarea' || t === 'markdown') {
+        return _jsx(Textarea, { id: id, value: value ?? '', placeholder: field.placeholder, onChange: (e) => onChange(e.target.value) });
+    }
+    const htmlType = t === 'number' || t === 'currency' ? 'number' : t === 'email' ? 'email' : t === 'date' ? 'date' : 'text';
+    return (_jsx(Input, { id: id, type: htmlType, value: value ?? '', placeholder: field.placeholder, onChange: (e) => onChange(htmlType === 'number' ? (e.target.value === '' ? undefined : Number(e.target.value)) : e.target.value) }));
+}

package/dist/views/InterfaceListPage.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Interface List Page — ADR-0047 interface mode.
+ *
+ * Renders a page whose `interfaceConfig` binds a single source view into an
+ * author-curated list surface. Where ObjectView (data mode) shows ALL of an
+ * object's list views as switcher tabs and lets users create views, this
+ * surface is deliberately closed:
+ *
+ *   • the page REFERENCES one view (`interfaceConfig.sourceView`) — columns,
+ *     base filter and sort are inherited, never restated (the iron rule);
+ *   • end users get exactly the `userFilters` the author enabled;
+ *   • the visualization comes from `appearance.allowedVisualizations`
+ *     (a single entry renders no switcher);
+ *   • `userActions` toggles map onto the toolbar — advanced filtering and
+ *     view management are absent by default.
+ */
+import * as React from 'react';
+interface InterfaceListPageProps {
+    page: any;
+    className?: string;
+    /** Design-mode only: persist toolbar edits (sort, column order) back to the
+     * page's interfaceConfig metadata (Airtable parity — the toolbar IS the
+     * authoring surface). Receives a partial interfaceConfig patch. */
+    onConfigChange?: (patch: Record<string, unknown>) => void;
+    /** When the host overlays an edit-in-studio affordance at the page's
+     * top-right (PageView's pencil), reserve right padding on the header so the
+     * toolbar buttons don't sit under it. */
+    reserveEditAffordance?: boolean;
+}
+export declare function defaultKanbanFromObject(objectDef: any): {
+    groupField: string;
+    groupByField: string;
+} | undefined;
+export declare function defaultCalendarFromObject(objectDef: any): {
+    startDateField: string;
+} | undefined;
+export declare function defaultGalleryFromObject(objectDef: any): {
+    coverField: string;
+} | undefined;
+export declare function defaultGanttFromObject(objectDef: any): {
+    startDateField: string;
+    endDateField: string;
+    progressField?: string;
+} | undefined;
+export declare function defaultMapFromObject(objectDef: any): {
+    locationField: string;
+} | undefined;
+export declare function InterfaceListPage({ page, className, onConfigChange, reserveEditAffordance }: InterfaceListPageProps): React.JSX.Element;
+export {};