@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/RecordFormPage.d.ts

@@ -39,4 +39,4 @@ export interface RecordFormPageProps {
  * `formType: 'simple'` (i.e. a flat in-page form), wrapped in a page header
  * that mirrors the look of `RecordDetailView`.
  */
-export declare function RecordFormPage({ mode }: RecordFormPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function RecordFormPage({ mode }: RecordFormPageProps): import("react").JSX.Element;

package/dist/views/RecordFormPage.js

@@ -174,9 +174,29 @@ export function RecordFormPage({ mode }) {
     if (!objectDef) {
         return (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.objectNotFound') }), _jsx(EmptyDescription, { children: t('empty.objectNotFoundDescription', { name: objectName }) }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), t('empty.back')] }) })] }) }));
     }
+    // Honour the object's form view layout (#1890): wire the declared `type`
+    // (simple/tabbed/wizard/split) + `sections` through to ObjectForm, which
+    // already renders each variant. Page-level layouts only — `drawer`/`modal`
+    // are presentation/open-modes, not record-page layouts, so they fall back to
+    // `simple` here (see the form-layout-vs-presentation modelling note in #1890).
+    const formDef = objectDef.form ?? objectDef.formViews?.default ?? {};
+    const pageFormType = ['tabbed', 'wizard', 'split'].includes(formDef.type) ? formDef.type : 'simple';
+    const formLayoutProps = pageFormType !== 'simple' && Array.isArray(formDef.sections)
+        ? {
+            sections: formDef.sections,
+            defaultTab: formDef.defaultTab,
+            tabPosition: formDef.tabPosition,
+            allowSkip: formDef.allowSkip,
+            showStepIndicator: formDef.showStepIndicator,
+            splitDirection: formDef.splitDirection,
+            splitSize: formDef.splitSize,
+            splitResizable: formDef.splitResizable,
+        }
+        : {};
     return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, features: features, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle }), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy, className: "ml-1" })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
                                 type: 'object-form',
-                                formType: 'simple',
+                                formType: pageFormType,
+                                ...formLayoutProps,
                                 objectName: objectDef.name,
                                 mode,
                                 recordId: mode === 'edit' ? recordId : undefined,
@@ -193,6 +213,11 @@ export function RecordFormPage({ mode }) {
                                     }),
                                 layout: 'vertical',
                                 fields,
+                                // Master-detail by config: if the object's form view declares
+                                // inline child collections, ObjectForm renders them as an atomic
+                                // master-detail form on this page — no bespoke page needed.
+                                subforms: objectDef.form?.subforms
+                                    ?? objectDef.formViews?.default?.subforms,
                                 onSuccess: handleSuccess,
                                 onCancel: handleCancel,
                                 showSubmit: true,

package/dist/views/ReportConfigPanel.d.ts

@@ -0,0 +1,37 @@
+/** Field option shape the host (ReportView) already computes. */
+interface AvailableField {
+    value: string;
+    label?: string;
+    type?: string;
+}
+export interface ReportConfigPanelProps {
+    /** Whether the panel is open. */
+    open: boolean;
+    /** Close callback. */
+    onClose: () => void;
+    /** The current report definition (flat spec Report document). */
+    config: Record<string, any> | null;
+    /** Persist all draft changes. */
+    onSave: (config: Record<string, any>) => void;
+    /** Called on every field change so the host can drive a live preview. */
+    onFieldChange?: (key: string, value: any, draft?: Record<string, any>) => void;
+    /**
+     * Legacy field catalog for the pre-9.0 object-bound report editor. Kept for
+     * prop compatibility; a 9.0 report binds a dataset, so the inspector now
+     * sources its pickers from the dataset catalog instead.
+     */
+    availableFields?: AvailableField[];
+    /** Reserved for parity with the legacy panel; unused by the inspector. */
+    getFieldsForObject?: (objectName: string | undefined) => AvailableField[] | undefined;
+    /** Report artifact name — the `:name` for the ADR-0034 draft/publish chrome. */
+    name?: string;
+    /**
+     * Studio metadata client — drives the draft/publish chrome
+     * ({@link RuntimeDraftBar}).
+     */
+    metadataClient?: any;
+    /** Called after a publish / discard so the host can refresh its read. */
+    onAfterChange?: () => void;
+}
+export declare function ReportConfigPanel({ open, onClose, config, onSave, onFieldChange, name, metadataClient, onAfterChange, }: ReportConfigPanelProps): import("react").JSX.Element | null;
+export {};

package/dist/views/ReportConfigPanel.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ReportConfigPanel — the runtime ReportView's right-rail "report editor".
+ *
+ * MIGRATED: this panel hosts the studio's spec-driven
+ * {@link ReportDefaultInspector} instead of the legacy
+ * `buildReportSchema` / `ConfigPanelRenderer` engine in `plugin-report`, so the
+ * runtime and the metadata studio share ONE report-editing surface. The
+ * inspector renders the report config fields straight from `@objectstack/spec`
+ * (`reportForm` / `ReportSchema`) plus a curated type / dataset / values /
+ * rows layer (ADR-0021 single-form).
+ *
+ * It lives in `app-shell` (next to the studio inspector) rather than in
+ * `plugin-report`: `app-shell` depends on `plugin-report`, so hosting the
+ * inspector here avoids the circular import a plugin-side panel would need.
+ *
+ * The Report document is FLAT (label / dataset / type / values / rows / … at
+ * the top level), so — unlike the View migration — no shape adapter is
+ * required: the report config IS the inspector draft. The dataset catalog
+ * (binding options + measure/dimension pickers) loads through the shared
+ * MetadataClient.
+ *
+ * Props mirror the legacy `plugin-report` panel so it is a drop-in replacement
+ * for ReportView.
+ */
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Button } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { X } from 'lucide-react';
+import { ReportDefaultInspector } from './metadata-admin/inspectors/ReportDefaultInspector';
+import { RuntimeDraftBar } from './RuntimeDraftBar';
+import { detectLocale } from './metadata-admin/i18n';
+export function ReportConfigPanel({ open, onClose, config, onSave, onFieldChange, name, metadataClient, onAfterChange, }) {
+    const { t } = useObjectTranslation();
+    const locale = useMemo(() => detectLocale(), []);
+    // Unsaved-edits flag — gates Publish (mirrors studio's "save first").
+    const [dirty, setDirty] = useState(false);
+    // Draft state seeded from `config`. Rebuilt only when the source identity
+    // changes (the host stabilizes `config` and bumps it on open / save) — never
+    // on every live field change — so in-flight edits are not clobbered.
+    const initialDraft = useMemo(() => ({ ...(config ?? {}) }), [config]);
+    const [draft, setDraft] = useState(initialDraft);
+    const draftRef = useRef(draft);
+    const lastSourceRef = useRef(initialDraft);
+    if (lastSourceRef.current !== initialDraft) {
+        lastSourceRef.current = initialDraft;
+        draftRef.current = initialDraft;
+        setDraft(initialDraft);
+        setDirty(false);
+    }
+    // Shallow-merge an inspector patch into the draft, then mirror each changed
+    // field back to the host so the live preview reflects the edit.
+    const handlePatch = useCallback((patch) => {
+        const next = { ...draftRef.current, ...patch };
+        draftRef.current = next;
+        setDraft(next);
+        setDirty(true);
+        if (onFieldChange) {
+            for (const [key, value] of Object.entries(patch)) {
+                onFieldChange(key, value, next);
+            }
+        }
+    }, [onFieldChange]);
+    const handleSave = useCallback(() => {
+        onSave(draftRef.current);
+        setDirty(false);
+        onClose();
+    }, [onSave, onClose]);
+    // ADR-0034 (#1515): resume a pending draft into the inspector on open
+    // (flag-ON only). The report document IS the inspector draft, so seed it
+    // directly.
+    const handleResumeDraft = useCallback((body) => {
+        const next = { ...body };
+        draftRef.current = next;
+        setDraft(next);
+        setDirty(false);
+    }, []);
+    const handleDiscard = useCallback(() => {
+        onClose();
+    }, [onClose]);
+    if (!open)
+        return null;
+    return (_jsxs("aside", { className: "hidden sm:flex w-[440px] shrink-0 flex-col border-l bg-background h-full", "data-testid": "report-config-panel", role: "complementary", "aria-label": t('report.editor.title', { defaultValue: 'Edit report' }), children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-4 py-2.5 shrink-0", children: [_jsx("div", { className: "text-sm font-medium truncate", children: t('report.editor.title', { defaultValue: 'Edit report' }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "h-7 w-7 p-0", "aria-label": t('common.close', { defaultValue: 'Close' }), "data-testid": "report-config-close", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsx(ReportDefaultInspector, { type: "report", name: typeof draft.name === 'string' ? draft.name : '', draft: draft, readOnly: false, locale: locale, onPatch: handlePatch }) }), _jsxs("div", { "data-testid": "report-config-footer", className: "flex items-center justify-end gap-2 border-t px-4 py-2.5 shrink-0", children: [_jsx(RuntimeDraftBar, { type: "report", name: name, metadataClient: metadataClient, dirty: dirty, onResume: handleResumeDraft, onAfterChange: onAfterChange }), _jsx(Button, { variant: "ghost", size: "sm", onClick: handleDiscard, "data-testid": "report-config-discard", children: t('common.cancel', { defaultValue: 'Cancel' }) }), _jsx(Button, { size: "sm", onClick: handleSave, "data-testid": "report-config-save", children: t('common.save', { defaultValue: 'Save' }) })] })] }));
+}

package/dist/views/ReportView.d.ts

@@ -1,4 +1,4 @@
 import type { DataSource } from '@object-ui/types';
 export declare function ReportView({ dataSource }: {
     dataSource?: DataSource;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/views/ReportView.js

@@ -3,13 +3,23 @@ import { useState, useEffect, useCallback, useMemo, lazy, Suspense } from 'react
 import { useParams } from 'react-router-dom';
 const ReportViewer = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportViewer })));
 const ReportRenderer = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportRenderer })));
-const ReportConfigPanel = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportConfigPanel })));
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+// Runtime report editor — hosts the studio's spec-driven report inspector
+// (lives in app-shell to avoid a circular dep on plugin-report).
+import { ReportConfigPanel } from './ReportConfigPanel';
 import { Pencil, BarChart3, Loader2 } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { useMetadata } from '../providers/MetadataProvider';
+import { useExpressionContext } from '../providers/ExpressionProvider';
+import { preferLocal } from '../utils/preferLocal';
 import { useAdapter } from '../providers/AdapterProvider';
+import { useMetadataClient } from './metadata-admin/useMetadata';
+import { persistRuntimeMetadata } from './runtime-metadata-persistence';
+import { useAuth } from '@object-ui/auth';
+import { DrillDownDrawer } from '@object-ui/plugin-dashboard';
+import { DrillNavigationProvider } from '@object-ui/react';
+import { useOpenRecordList } from './useOpenRecordList';
 // Fallback fields when no schema is available
 const FALLBACK_FIELDS = [
     { value: 'month', label: 'Month', type: 'text' },
@@ -26,18 +36,31 @@ export function ReportView({ dataSource }) {
     const { reportName } = useParams();
     const { showDebug } = useMetadataInspector();
     const adapter = useAdapter();
+    // ADR-0034: report edits persist via the metadata draft/publish model.
+    const metadataClient = useMetadataClient();
+    // Editing a report 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 [configPanelOpen, setConfigPanelOpen] = useState(false);
     // Version counter — incremented on save to refresh the stable config reference
     const [configVersion, setConfigVersion] = useState(0);
     // Find report definition from API-driven metadata
     const { reports, objects, loading, refresh } = useMetadata();
-    const initialReport = reports?.find((r) => r.name === reportName);
+    // ADR-0048 Phase 2 — prefer the report owned by the current app's package.
+    const { app: activeApp } = useExpressionContext();
+    const initialReport = preferLocal(reports, reportName, activeApp?._packageId);
     const [reportData, setReportData] = useState(initialReport);
     // Local schema state for live preview — initialized from metadata
     const [editSchema, setEditSchema] = useState(null);
     // State for report runtime data
     const [reportRuntimeData, setReportRuntimeData] = useState([]);
     const [dataLoading, setDataLoading] = useState(false);
+    // Drill-through (ADR-0021 D2): clicking an aggregated row/cell opens the
+    // underlying records in an in-place drawer (peek without leaving the report),
+    // with an "Open in list →" escape hatch to the full object list page.
+    const openRecordList = useOpenRecordList();
+    const [drill, setDrill] = useState(null);
     const getFieldsForObject = useCallback((objName) => {
         if (!objName || !objects?.length)
             return undefined;
@@ -56,6 +79,78 @@ export function ReportView({ dataSource }) {
             type: def.type || 'text',
         }));
     }, [objects]);
+    // ADR-0021 D2 drill-down: open the dataset's object list scoped by
+    // `?filter[<field>]=<value>` (the same equality-filter contract the
+    // related-list "View All" buttons use).
+    //
+    // Preferred: the renderer hands us the base `object` + an exact field→RAW
+    // `objectFilter` (built from the server's drillRawRows), so we navigate
+    // straight away — correct for select/lookup dims, no metadata round-trip.
+    //
+    // Fallback (older server with no drill metadata): only dimension NAMES +
+    // DISPLAY-label bucket values arrive, so resolve them through the dataset
+    // definition and reverse-map labels to stored values before filtering:
+    //   - select fields  → reverse-map label → option value
+    //   - lookup fields  → the label is a record name, not the FK id; skip the
+    //     dim (the drill lands on a superset rather than filtering wrongly)
+    //   - granularity-bucketed dates → need a range, not equality; skip too
+    const handleDatasetDrill = useCallback(async ({ dataset, groupKey, object, objectFilter }) => {
+        try {
+            // Drawer header: the clicked group's display values (e.g. "West / Q3").
+            const titleParts = Object.values(groupKey).filter((v) => v != null).map((v) => String(v));
+            const title = titleParts.join(' / ')
+                || String(reportData?.label ?? reportData?.name ?? 'Details');
+            // Fast path (ADR-0021 D2): the renderer already resolved the dataset's
+            // base object + an exact object FIELD → RAW value filter from the
+            // server's drillRawRows — correct for select/lookup dims (a stored
+            // value, not a display label) with NO dataset-definition round-trip.
+            if (object && objectFilter) {
+                setDrill({ object, filter: objectFilter, title });
+                return;
+            }
+            // Fallback (older server with no drill metadata): resolve the dataset's
+            // object and reverse-map dimension labels → stored values ourselves.
+            const def = await metadataClient.get('dataset', dataset);
+            const objectName = typeof def?.object === 'string' ? def.object : undefined;
+            if (!objectName)
+                return;
+            const dims = Array.isArray(def?.dimensions) ? def.dimensions : [];
+            const dimByName = new Map(dims.filter((d) => d?.name).map((d) => [d.name, d]));
+            // Field defs of the dataset's object — the option value↔label source.
+            const objDef = objects?.find((o) => o.name === objectName);
+            const rawFields = objDef?.fields;
+            const fieldDef = (field) => {
+                if (Array.isArray(rawFields))
+                    return rawFields.find((f) => f?.name === field);
+                if (rawFields && typeof rawFields === 'object')
+                    return rawFields[field];
+                return undefined;
+            };
+            const filter = {};
+            for (const [dim, value] of Object.entries(groupKey)) {
+                if (value == null)
+                    continue;
+                const dimDef = dimByName.get(dim);
+                if (dimDef?.dateGranularity)
+                    continue;
+                const field = dimDef?.field || dim;
+                const fd = fieldDef(field);
+                if (fd?.type === 'lookup' || fd?.type === 'master_detail')
+                    continue;
+                let stored = value;
+                if (Array.isArray(fd?.options)) {
+                    const opt = fd.options.find((o) => o?.label === value || o?.value === value);
+                    if (opt && opt.value != null)
+                        stored = opt.value;
+                }
+                filter[field] = stored;
+            }
+            setDrill({ object: objectName, filter, title });
+        }
+        catch (err) {
+            console.warn('ReportView: drill failed', err);
+        }
+    }, [metadataClient, objects, reportData]);
     // Derive available fields from object schema for filter/sort editors
     // Uses live editSchema when available to respond to objectName changes
     const availableFields = useMemo(() => {
@@ -66,15 +161,19 @@ export function ReportView({ dataSource }) {
     // ---- Save helper --------------------------------------------------------
     const saveSchema = useCallback(async (schema) => {
         try {
-            if (adapter) {
-                await adapter.update('sys_report', reportName, schema);
+            if (metadataClient) {
+                // ADR-0034: save stages a per-item draft; an explicit Publish
+                // promotes it (RuntimeDraftBar). `sys_report` is retired.
+                await persistRuntimeMetadata('report', reportName, schema, {
+                    metadataClient,
+                });
                 refresh().catch(() => { });
             }
         }
         catch (err) {
             console.warn('[ReportView] Auto-save failed:', err);
         }
-    }, [adapter, reportName, refresh]);
+    }, [metadataClient, reportName, refresh]);
     // ---- Open / close config panel ------------------------------------------
     const handleOpenConfigPanel = useCallback(() => {
         setEditSchema(reportData);
@@ -334,7 +433,17 @@ export function ReportView({ dataSource }) {
     // and drill protocol end-to-end. The legacy ReportViewer is only used as a
     // last resort for fully-legacy schemas that lack `objectName` (e.g. inline
     // `fields` + `data` arrays from older app code).
-    const useSpecRenderer = Boolean(previewReport &&
+    // ADR-0021 single-form: a report bound to a semantic-layer `dataset` (no
+    // `objectName`/`columns`) still routes through the spec ReportRenderer, which
+    // dispatches it to the dataset path (queryDataset + grouped table / joined
+    // blocks). Without this it would fall to the legacy ReportViewer, which has no
+    // data source to fetch from → a blank page.
+    const isDatasetBound = Boolean(previewReport &&
+        (typeof previewReport.dataset === 'string' ||
+            (previewReport.type === 'joined' &&
+                Array.isArray(previewReport.blocks) &&
+                previewReport.blocks.some((b) => typeof b?.dataset === 'string'))));
+    const useSpecRenderer = isDatasetBound || Boolean(previewReport &&
         previewReport.objectName &&
         (previewReport.type === 'matrix' ||
             previewReport.type === 'joined' ||
@@ -352,5 +461,5 @@ export function ReportView({ dataSource }) {
         allowExport: true,
         loading: dataLoading, // Loading state for data fetching
     };
-    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _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": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.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-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "w-full shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: t('common.loading', { defaultValue: 'Loading…' }) }), children: useSpecRenderer ? (_jsx("div", { className: "p-4 sm:p-6", children: _jsx(ReportRenderer, { schema: previewReport, dataSource: dataSource }) })) : (_jsx(ReportViewer, { schema: viewerSchema })) }) }) }), _jsx(Suspense, { fallback: null, children: _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields, getFieldsForObject: getFieldsForObject }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
+    return (_jsxs(DrillNavigationProvider, { value: { openRecordList }, children: [_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: 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": "report-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.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-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "w-full shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: t('common.loading', { defaultValue: 'Loading…' }) }), children: useSpecRenderer ? (_jsx("div", { className: "p-4 sm:p-6", children: _jsx(ReportRenderer, { schema: previewReport, dataSource: dataSource, rows: reportRuntimeData, onDrill: handleDatasetDrill }) })) : (_jsx(ReportViewer, { schema: viewerSchema })) }) }) }), _jsx(ReportConfigPanel, { open: configPanelOpen && isAdmin, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields, getFieldsForObject: getFieldsForObject, name: reportName, metadataClient: metadataClient, onAfterChange: () => refresh().catch(() => { }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }), _jsx(DrillDownDrawer, { open: !!drill, onClose: () => setDrill(null), title: drill?.title ?? '', objectName: drill?.object ?? '', filter: drill?.filter, dataSource: dataSource })] }));
 }

package/dist/views/RuntimeDraftBar.d.ts

@@ -0,0 +1,30 @@
+import { type RuntimeArtifactType } from './runtime-metadata-persistence';
+export interface RuntimeDraftBarProps {
+    /** Artifact type — the `:type` in `/meta/:type/:name`. */
+    type: RuntimeArtifactType;
+    /** Artifact name — the `:name`. Chrome stays inert until this is known. */
+    name?: string;
+    /** Studio metadata client (flag-ON path). */
+    metadataClient: any;
+    /**
+     * Disable Publish while the panel has unsaved local edits, mirroring
+     * studio's "save first, then publish" rule.
+     */
+    dirty?: boolean;
+    /**
+     * Seed an existing draft back into the editor when the panel opens, so a
+     * half-finished edit is restored. Called at most once per `name` per mount.
+     */
+    onResume?: (body: Record<string, unknown>) => void;
+    /** Called after a successful publish / discard so the host can refresh. */
+    onAfterChange?: () => void;
+    /**
+     * Monotonic counter the host bumps right after it saves a draft. The bar
+     * reads the pending draft only on open, so without this a save in an
+     * already-open panel wouldn't surface the indicator until reopen. Bumping
+     * this marks the indicator immediately (a save just created a draft) — no
+     * dependence on the fire-and-forget write's timing.
+     */
+    savedSignal?: number;
+}
+export declare function RuntimeDraftBar({ type, name, metadataClient, dirty, onResume, onAfterChange, savedSignal, }: RuntimeDraftBarProps): import("react").JSX.Element | null;

package/dist/views/RuntimeDraftBar.js

@@ -0,0 +1,112 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * RuntimeDraftBar — ADR-0034 step 3 (#1515): the draft/publish chrome for the
+ * runtime config panels (ViewConfigPanel / ReportConfigPanel /
+ * DashboardConfigPanel).
+ *
+ * It mirrors studio's `ResourceEditPage` affordances: on open it reads the
+ * pending draft (`?state=draft`), shows an "unpublished changes" indicator when
+ * one exists, resumes it into the editor (`onResume`), and exposes **Publish**
+ * and **Discard draft**. It renders nothing until there is a pending draft.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Button } from '@object-ui/components';
+import { Loader2, Send, Undo2 } from 'lucide-react';
+import { publishRuntimeMetadata, discardRuntimeDraft, readRuntimeDraft, } from './runtime-metadata-persistence';
+import { detectLocale, t, tFormat } from './metadata-admin/i18n';
+export function RuntimeDraftBar({ type, name, metadataClient, dirty, onResume, onAfterChange, savedSignal, }) {
+    const locale = detectLocale();
+    const [hasDraft, setHasDraft] = useState(false);
+    const [busy, setBusy] = useState(false);
+    // Track the `name` we've already resumed so reopening the same item doesn't
+    // clobber in-flight edits with the stored draft on every effect run.
+    const resumedRef = useRef(null);
+    const refresh = useCallback(async () => {
+        if (!name || !metadataClient) {
+            setHasDraft(false);
+            return;
+        }
+        let body;
+        try {
+            body = await readRuntimeDraft(type, name, {
+                metadataClient,
+            });
+        }
+        catch {
+            // A failed draft read must not break the editor — treat as "no draft".
+            setHasDraft(false);
+            return;
+        }
+        setHasDraft(!!body);
+        // Resume is best-effort: a failure to seed the editor must NOT hide the
+        // "unpublished changes" indicator (the draft still exists on the server).
+        if (body && onResume && resumedRef.current !== name) {
+            resumedRef.current = name;
+            try {
+                onResume(body);
+            }
+            catch (err) {
+                console.error('[RuntimeDraftBar] Resume draft failed:', err);
+            }
+        }
+    }, [type, name, metadataClient, onResume]);
+    // Read the pending draft on open / when the edited item changes.
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    // A host save just wrote a draft → surface the indicator immediately,
+    // without waiting for a reopen or racing the fire-and-forget write.
+    // Skip the initial mount (savedSignal === 0 / undefined).
+    const lastSavedSignal = useRef(savedSignal);
+    useEffect(() => {
+        if (savedSignal === lastSavedSignal.current)
+            return;
+        lastSavedSignal.current = savedSignal;
+        if (savedSignal)
+            setHasDraft(true);
+    }, [savedSignal]);
+    const handlePublish = useCallback(async () => {
+        if (!name)
+            return;
+        setBusy(true);
+        try {
+            await publishRuntimeMetadata(type, name, { metadataClient });
+            setHasDraft(false);
+            onAfterChange?.();
+        }
+        catch (err) {
+            console.error('[RuntimeDraftBar] Publish failed:', err);
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [type, name, metadataClient, onAfterChange]);
+    const handleDiscard = useCallback(async () => {
+        if (!name)
+            return;
+        if (typeof confirm === 'function' &&
+            !confirm(tFormat('engine.edit.discardDraftConfirm', locale, { type, name }))) {
+            return;
+        }
+        setBusy(true);
+        try {
+            await discardRuntimeDraft(type, name, { metadataClient });
+            setHasDraft(false);
+            onAfterChange?.();
+        }
+        catch (err) {
+            console.error('[RuntimeDraftBar] Discard draft failed:', err);
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [type, name, metadataClient, onAfterChange, locale]);
+    // flag OFF, or nothing pending → render nothing (zero DOM, zero layout shift).
+    // Nothing pending → render nothing (no indicator, no buttons).
+    if (!hasDraft)
+        return null;
+    return (_jsxs("div", { className: "mr-auto flex items-center gap-2", "data-testid": "runtime-draft-bar", children: [_jsxs("span", { className: "text-xs text-amber-700 dark:text-amber-400", title: t('engine.edit.draftPending', locale), "data-testid": "runtime-draft-indicator", children: ["\u25CF ", t('engine.edit.draftPending', locale)] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: handleDiscard, disabled: busy, className: "h-7 w-7 p-0 text-muted-foreground", title: t('engine.edit.discardDraft', locale), "aria-label": t('engine.edit.discardDraft', locale), "data-testid": "runtime-draft-discard", children: _jsx(Undo2, { className: "h-3.5 w-3.5" }) }), _jsx(Button, { size: "sm", onClick: handlePublish, disabled: busy || dirty, className: "h-7 px-2 bg-emerald-600 hover:bg-emerald-700 text-emerald-50", title: dirty
+                    ? t('engine.edit.publishBlockedDirty', locale)
+                    : t('engine.edit.publish', locale), "data-testid": "runtime-draft-publish", children: busy ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (_jsxs(_Fragment, { children: [_jsx(Send, { className: "h-3.5 w-3.5 mr-1" }), t('engine.edit.publish', locale)] })) })] }));
+}

package/dist/views/ScreenView.d.ts

@@ -0,0 +1,70 @@
+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;
+}
+/** Whether a screen renders the object-form body rather than the flat fields. */
+export declare function isObjectFormScreen(screen: ScreenSpec): boolean;
+/** Seed flat-field values from each field's `defaultValue`. */
+export declare function initialScreenValues(screen: ScreenSpec): Record<string, unknown>;
+/** Submit/cancel wiring for the object-form body — runtime persists & resumes;
+ *  the design preview hides the bar (`showSubmit`/`showCancel` false). */
+export interface ScreenObjectFormActions {
+    showSubmit?: boolean;
+    showCancel?: boolean;
+    submitText?: string;
+    cancelText?: string;
+    onSuccess?: (saved: any) => void;
+    onCancel?: () => void;
+    /** Overrides the "no data source" copy (the preview phrases it for authors). */
+    noDataSourceMessage?: React.ReactNode;
+}
+export interface ScreenViewProps {
+    screen: ScreenSpec;
+    /** Controlled values for the flat-fields body. */
+    values: Record<string, unknown>;
+    onValueChange: (name: string, value: unknown) => void;
+    /**
+     * Data source — required to render the `object-form` body. ObjectForm fetches
+     * the object schema (and persists) 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[];
+    objectForm?: ScreenObjectFormActions;
+    className?: string;
+}
+export declare function ScreenView({ screen, values, onValueChange, dataSource, objects, objectForm, className }: ScreenViewProps): import("react").JSX.Element;
+export declare function FieldInput({ field, value, onChange }: {
+    field: ScreenFieldSpec;
+    value: unknown;
+    onChange: (v: unknown) => void;
+}): import("react").JSX.Element;