@object-ui/app-shell 7.0.0 → 7.2.0

package/dist/utils/recordFormNavigation.d.ts

@@ -55,6 +55,66 @@ export declare function resolveRecordFormTarget(opts: {
         _id?: string | number;
     } | null | undefined;
 }): RecordFormTarget;
+/**
+ * Subset of the default form-view shape consumed by
+ * {@link resolveFormViewLayout}. This is the flattened `config` body of the
+ * object's default `viewKind: 'form'` ViewItem (ADR-0017), merged onto the
+ * object by `MetadataProvider` as `objectDef.form` (and mirrored under
+ * `objectDef.formViews.default` for the legacy aggregated-container shape).
+ */
+export interface FormViewDefinition {
+    /**
+     * Layout family declared by the form view (`simple` | `tabbed` | `wizard`
+     * | `split`). Only `tabbed` changes the *modal's* internal layout; the
+     * others still render their curated sections, just stacked.
+     */
+    type?: string;
+    /** Curated field sections — the selection, order, and grouping to render. */
+    sections?: any[];
+    /** Inline child collections (master-detail). */
+    subforms?: any[];
+}
+/**
+ * Object metadata subset carrying the default form view, as merged onto the
+ * runtime objects list (`useMetadata().objects`).
+ */
+export interface ObjectDefinitionForFormView {
+    form?: FormViewDefinition | null;
+    formViews?: {
+        default?: FormViewDefinition | null;
+    } | null;
+}
+/**
+ * Layout props derived from an object's default form view, ready to spread
+ * into a `<ModalForm>` schema.
+ */
+export interface FormViewModalLayout {
+    /** Curated sections to render (omitted when the form view declares none). */
+    sections?: any[];
+    /** `'tabbed'` when the form view is tabbed; omitted otherwise (stacked). */
+    contentLayout?: 'tabbed';
+    /** Inline child collections for a master-detail modal. */
+    subforms?: any[];
+}
+/**
+ * Resolve a `<ModalForm>`'s layout props from an object's DEFAULT FORM VIEW
+ * (curated sections + field selection/order, plus master-detail subforms).
+ *
+ * The create / edit record modal otherwise falls back to the raw object
+ * schema — rendering every field in schema order and ignoring the curated
+ * form view entirely. This resolver lets the New/Edit modal honor the same
+ * view-driven layout the full-screen record page (`RecordFormPage`) does.
+ *
+ * Resolution mirrors `RecordFormPage`: prefer `objectDef.form` (the default
+ * ViewItem) and fall back to `objectDef.formViews.default` (legacy container).
+ *
+ * Returns an EMPTY object when the object has no form view, or a form view
+ * that declares no sections — the caller then keeps its existing behavior
+ * (a flat field list, i.e. the raw object schema). Empty `sections` /
+ * `subforms` arrays are treated as absent so an empty curation never blanks
+ * out the form.
+ */
+export declare function resolveFormViewLayout(objectDef: ObjectDefinitionForFormView | null | undefined): FormViewModalLayout;
 /**
  * Action descriptor accepted by the navigate-create / navigate-edit
  * handlers. Loose-typed because the same shape is constructed dynamically

package/dist/utils/recordFormNavigation.js

@@ -41,6 +41,41 @@ export function resolveRecordFormTarget(opts) {
     }
     return { kind: 'page', url: `${baseUrl}/${objectDef.name}/new` };
 }
+/**
+ * Resolve a `<ModalForm>`'s layout props from an object's DEFAULT FORM VIEW
+ * (curated sections + field selection/order, plus master-detail subforms).
+ *
+ * The create / edit record modal otherwise falls back to the raw object
+ * schema — rendering every field in schema order and ignoring the curated
+ * form view entirely. This resolver lets the New/Edit modal honor the same
+ * view-driven layout the full-screen record page (`RecordFormPage`) does.
+ *
+ * Resolution mirrors `RecordFormPage`: prefer `objectDef.form` (the default
+ * ViewItem) and fall back to `objectDef.formViews.default` (legacy container).
+ *
+ * Returns an EMPTY object when the object has no form view, or a form view
+ * that declares no sections — the caller then keeps its existing behavior
+ * (a flat field list, i.e. the raw object schema). Empty `sections` /
+ * `subforms` arrays are treated as absent so an empty curation never blanks
+ * out the form.
+ */
+export function resolveFormViewLayout(objectDef) {
+    const formView = objectDef?.form ?? objectDef?.formViews?.default;
+    if (!formView)
+        return {};
+    const layout = {};
+    if (Array.isArray(formView.sections) && formView.sections.length > 0) {
+        layout.sections = formView.sections;
+        // Only 'tabbed' maps to a modal content layout; 'wizard'/'split' have no
+        // modal equivalent and degrade to a stacked section list.
+        if (formView.type === 'tabbed')
+            layout.contentLayout = 'tabbed';
+    }
+    if (Array.isArray(formView.subforms) && formView.subforms.length > 0) {
+        layout.subforms = formView.subforms;
+    }
+    return layout;
+}
 /**
  * Resolve the URL for a `navigate_create` action.
  *

package/dist/utils/resolvePageVarTokens.d.ts

@@ -0,0 +1,31 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * resolvePageVarTokens — resolve `{{page.<path>}}` tokens against a page-variable
+ * snapshot. The data-entry bridge for SDUI forms: an interactive input
+ * (`element:text_input`, `element:record_picker`) writes a page variable; a
+ * submit action references it in its params/body as `{{page.<var>}}`; this
+ * resolves those tokens against the live snapshot — published into the action
+ * context by `PageVariableActionBridge` — just before the request body is built.
+ *
+ * - A WHOLE-VALUE token (`"{{page.amount}}"`) is replaced by the variable's RAW
+ *   value, preserving its type — a number stays a number, an object stays an
+ *   object — so numeric/boolean/array form fields submit with the right JSON
+ *   type rather than being stringified.
+ * - An EMBEDDED token (`"/orgs/{{page.slug}}/setup"`) is string-interpolated.
+ * - Resolution walks nested objects/arrays. A whole-value miss resolves to ''
+ *   (kept as a present-but-empty field); an embedded miss drops to ''.
+ *
+ * Distinct from the single-brace `{field}` row-record interpolation used in API
+ * target URLs (different brace count, different source) so the two never collide.
+ */
+/**
+ * Deep-resolve every `{{page.<var>}}` token in `value` against `pageVariables`.
+ * Returns `value` unchanged when there is no snapshot. Non-string leaves pass
+ * through untouched; the input is never mutated (objects/arrays are copied).
+ */
+export declare function resolvePageVarTokens<T>(value: T, pageVariables?: Record<string, any> | null): T;

package/dist/utils/resolvePageVarTokens.js

@@ -0,0 +1,72 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * resolvePageVarTokens — resolve `{{page.<path>}}` tokens against a page-variable
+ * snapshot. The data-entry bridge for SDUI forms: an interactive input
+ * (`element:text_input`, `element:record_picker`) writes a page variable; a
+ * submit action references it in its params/body as `{{page.<var>}}`; this
+ * resolves those tokens against the live snapshot — published into the action
+ * context by `PageVariableActionBridge` — just before the request body is built.
+ *
+ * - A WHOLE-VALUE token (`"{{page.amount}}"`) is replaced by the variable's RAW
+ *   value, preserving its type — a number stays a number, an object stays an
+ *   object — so numeric/boolean/array form fields submit with the right JSON
+ *   type rather than being stringified.
+ * - An EMBEDDED token (`"/orgs/{{page.slug}}/setup"`) is string-interpolated.
+ * - Resolution walks nested objects/arrays. A whole-value miss resolves to ''
+ *   (kept as a present-but-empty field); an embedded miss drops to ''.
+ *
+ * Distinct from the single-brace `{field}` row-record interpolation used in API
+ * target URLs (different brace count, different source) so the two never collide.
+ */
+const WHOLE_RE = /^\s*\{\{\s*page\.([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)\s*\}\}\s*$/;
+function lookup(path, vars) {
+    let node = vars;
+    for (const seg of path.split('.')) {
+        if (node == null)
+            return undefined;
+        node = node[seg];
+    }
+    return node;
+}
+function resolveString(str, vars) {
+    if (!str.includes('{{'))
+        return str;
+    const whole = str.match(WHOLE_RE);
+    if (whole) {
+        const v = lookup(whole[1], vars);
+        return v === undefined ? '' : v;
+    }
+    // Fresh global regex per call — avoids shared `lastIndex` state.
+    return str.replace(/\{\{\s*page\.([A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*)\s*\}\}/g, (_m, path) => {
+        const v = lookup(path, vars);
+        return v == null ? '' : String(v);
+    });
+}
+function walk(value, vars) {
+    if (typeof value === 'string')
+        return resolveString(value, vars);
+    if (Array.isArray(value))
+        return value.map((v) => walk(v, vars));
+    if (value && typeof value === 'object') {
+        const out = {};
+        for (const [k, v] of Object.entries(value))
+            out[k] = walk(v, vars);
+        return out;
+    }
+    return value;
+}
+/**
+ * Deep-resolve every `{{page.<var>}}` token in `value` against `pageVariables`.
+ * Returns `value` unchanged when there is no snapshot. Non-string leaves pass
+ * through untouched; the input is never mutated (objects/arrays are copied).
+ */
+export function resolvePageVarTokens(value, pageVariables) {
+    if (!pageVariables)
+        return value;
+    return walk(value, pageVariables);
+}

package/dist/views/CreateViewDialog.js

@@ -18,7 +18,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Button, cn, } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { deriveFieldOptions, isImageLikeField, isGeoLikeField, pickPreferredField, KANBAN_GROUP_PREFERRED, PRIMARY_DATE_PREFERRED, END_DATE_PREFERRED, } from '@object-ui/plugin-view';
-import { LayoutGrid, KanbanSquare, Calendar as CalendarIcon, Image as ImageIcon, GanttChartSquare, Clock, Map as MapIcon, BarChart3, AlertCircle, } from 'lucide-react';
+import { LayoutGrid, KanbanSquare, Calendar as CalendarIcon, Image as ImageIcon, GanttChartSquare, Clock, Map as MapIcon, BarChart3, ListTree, AlertCircle, } from 'lucide-react';
 function buildViewTypeMeta(t) {
     return [
         { type: 'grid', icon: LayoutGrid, label: t('console.objectView.viewTypeGrid'), description: t('console.objectView.viewTypeGridDesc') },
@@ -29,6 +29,7 @@ function buildViewTypeMeta(t) {
         { type: 'gantt', icon: GanttChartSquare, label: t('console.objectView.viewTypeGantt'), description: t('console.objectView.viewTypeGanttDesc') },
         { type: 'map', icon: MapIcon, label: t('console.objectView.viewTypeMap'), description: t('console.objectView.viewTypeMapDesc') },
         { type: 'chart', icon: BarChart3, label: t('console.objectView.viewTypeChart'), description: t('console.objectView.viewTypeChartDesc') },
+        { type: 'tree', icon: ListTree, label: t('console.objectView.viewTypeTree'), description: t('console.objectView.viewTypeTreeDesc') },
     ];
 }
 /** Suggest a non-colliding default name like "Grid 1", "Grid 2", … */
@@ -154,6 +155,18 @@ const REQUIRED_FIELDS_BY_TYPE = {
             filter: (f) => f.type === 'number',
         },
     ],
+    tree: [
+        {
+            key: 'parentField',
+            i18nKey: 'console.objectView.parentField',
+            helpI18nKey: 'console.objectView.parentFieldHelp',
+            // Self-referencing pointer: a `tree` field, or a lookup/master_detail
+            // back to the same object. `rawType` carries the unnormalized field type.
+            filter: (f) => f.rawType === 'tree' ||
+                f.rawType === 'lookup' ||
+                f.rawType === 'master_detail',
+        },
+    ],
     // grid has no strictly required fields at create time
 };
 export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }) {

package/dist/views/FlowRunner.d.ts

@@ -1,33 +1,5 @@
-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;
-}
+import { type ScreenSpec } from './ScreenView';
+export type { ScreenSpec, ScreenFieldSpec } from './ScreenView';
 export interface ScreenFlowState {
     flowName: string;
     runId: string;

package/dist/views/FlowRunner.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } 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
@@ -10,18 +10,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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.
+ *
+ * The screen BODY (flat fields / object-form) is rendered by the shared
+ * {@link ScreenView} — the same renderer the Studio design preview reuses, so
+ * the two can never drift (cf. #1927).
  */
 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 { Dialog, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, Button, } from '@object-ui/components';
 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;
-}
+import { ScreenView, isObjectFormScreen, initialScreenValues } from './ScreenView';
 export function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dataSource, objects }) {
     const [screen, setScreen] = useState(null);
     const [runId, setRunId] = useState('');
@@ -33,7 +30,7 @@ export function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dat
             setScreen(state.screen);
             setRunId(state.runId);
             setFlowName(state.flowName);
-            setValues(initialValues(state.screen));
+            setValues(initialScreenValues(state.screen));
         }
     }, [state]);
     if (!state || !screen)
@@ -67,7 +64,7 @@ export function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dat
         if (data.status === 'paused' && data.screen) {
             setScreen(data.screen);
             setRunId(data.runId || runId);
-            setValues(initialValues(data.screen));
+            setValues(initialScreenValues(data.screen));
             toast.success('Saved — next step');
         }
         else {
@@ -111,43 +108,14 @@ export function FlowRunner({ state, authFetch, baseUrl, onClose, onComplete, dat
             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;
+    const isObjectForm = isObjectFormScreen(screen);
     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) }));
+            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 })] }), _jsx(ScreenView, { screen: screen, values: values, onValueChange: setVal, dataSource: dataSource, objects: objects, objectForm: {
+                        onSuccess: onObjectFormSaved,
+                        onCancel: onClose,
+                        showSubmit: true,
+                        showCancel: true,
+                        submitText: 'Save & Continue',
+                        cancelText: 'Cancel',
+                    } }), !isObjectForm && (_jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx(Button, { onClick: submit, disabled: submitting, children: submitting ? 'Submitting…' : 'Submit' })] }))] }) }));
 }

package/dist/views/ObjectView.js

@@ -42,6 +42,8 @@ import { useRealtimeSubscription, useConflictResolution } from '@object-ui/colla
 import { ActionProvider, useNavigationOverlay, SchemaRenderer } from '@object-ui/react';
 import { toast } from 'sonner';
 import { useConsoleActionRuntime } from '../hooks/useConsoleActionRuntime';
+import { useEnvironmentEntitlements } from '../environment/useEnvironmentEntitlements';
+import { EnvironmentListToolbar } from '../environment/EnvironmentListToolbar';
 /** Map view types to Lucide icons (Airtable-style) */
 const VIEW_TYPE_ICONS = {
     grid: TableIcon,
@@ -272,6 +274,27 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }) {
         onRefresh: () => setRefreshKey((k) => k + 1),
     });
     const { confirmHandler, toastHandler } = actionRuntime;
+    // Environment list (sys_environment) is entitlement- + state-aware: born
+    // with one production env per org, its single `create_environment` action
+    // means different things — "Set up your production environment", "Add
+    // development environment", or an upgrade prompt — depending on org state.
+    // Resolved org-side here; the hook is a no-op for every other object.
+    const isEnvironmentList = objectDef.name === 'sys_environment';
+    const environmentEntitlements = useEnvironmentEntitlements({
+        enabled: isEnvironmentList,
+        dataSource,
+        authFetch: actionRuntime.authFetch,
+        apiBase: import.meta.env?.VITE_SERVER_URL || '',
+        refreshKey,
+    });
+    // Localized `list_toolbar` actions, shared by the generic action bar and the
+    // environment-aware toolbar (the action:bar renderer filters by location).
+    const localizedToolbarActions = useMemo(() => (objectDef.actions || []).map((a) => ({
+        ...a,
+        label: actionLabel(objectDef.name, a.name, a.label || a.name),
+        ...(a.confirmText !== undefined && { confirmText: actionConfirm(objectDef.name, a.name, a.confirmText) }),
+        ...(a.successMessage !== undefined && { successMessage: actionSuccess(objectDef.name, a.name, a.successMessage) }),
+    })), [objectDef, actionLabel, actionConfirm, actionSuccess]);
     // Resolve which generic CRUD affordances belong in the toolbar for
     // this object's lifecycle bucket (`managedBy`).  config tables show
     // New/Edit/Delete but no CSV Import; system / append-only / better-auth
@@ -1333,19 +1356,10 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }) {
                                             ? t('common.removeFromFavorites', { defaultValue: 'Remove from favorites' })
                                             : t('common.addToFavorites', { defaultValue: 'Add to favorites' }), "data-testid": `object-favorite-btn-${objectName}`, children: isFavorite(`object:${objectName}`)
                                             ? _jsx(Star, { className: "h-4 w-4 fill-amber-400 text-amber-400" })
-                                            : _jsx(StarOff, { className: "h-4 w-4" }) })), affordances.create && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), affordances.import && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "hidden sm:inline-flex shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (_jsx(SchemaRenderer, { schema: {
+                                            : _jsx(StarOff, { className: "h-4 w-4" }) })), affordances.create && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", onClick: actions.create, className: "shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.new') })] })), affordances.import && can(objectDef.name, 'create') && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => setShowImport(true), className: "hidden sm:inline-flex shadow-none gap-1.5 sm:gap-2 h-8 sm:h-9", title: t('console.objectView.importTitle'), "data-testid": "object-view-import-button", children: [_jsx(Upload, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('console.objectView.import') })] })), objectDef.actions?.some((a) => a.locations?.includes('list_toolbar')) && (isEnvironmentList ? (_jsx(EnvironmentListToolbar, { actions: localizedToolbarActions, entitlements: environmentEntitlements, onUpgrade: actionRuntime.openEntitlementDialog })) : (_jsx(SchemaRenderer, { schema: {
                                             type: 'action:bar',
                                             location: 'list_toolbar',
-                                            actions: (objectDef.actions || []).map((a) => ({
-                                                ...a,
-                                                label: actionLabel(objectDef.name, a.name, a.label || a.name),
-                                                ...(a.confirmText !== undefined && {
-                                                    confirmText: actionConfirm(objectDef.name, a.name, a.confirmText),
-                                                }),
-                                                ...(a.successMessage !== undefined && {
-                                                    successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
-                                                }),
-                                            })),
+                                            actions: localizedToolbarActions,
                                             size: 'sm',
                                             variant: 'outline',
                                             // On mobile, collapse all schema-driven toolbar actions
@@ -1353,7 +1367,7 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }) {
                                             // Import buttons stay visible without pushing the page
                                             // title off-screen.
                                             mobileMaxVisible: 0,
-                                        } }))] }) }) }), affordances.create && can(objectDef.name, 'create') && (_jsx("button", { type: "button", onClick: actions.create, className: "sm:hidden fixed right-4 bottom-36 z-40 h-12 w-12 rounded-full bg-primary text-primary-foreground shadow-lg active:scale-95 transition-transform inline-flex items-center justify-center", "aria-label": t('console.objectView.new'), "data-testid": "mobile-fab-create", children: _jsx(Plus, { className: "h-5 w-5" }) })), showImport && (_jsx(Suspense, { fallback: null, children: _jsx(ImportWizard, { open: showImport, onOpenChange: setShowImport, objectName: objectDef.name, objectLabel: objectLabel(objectDef), fields: Object.entries(objectDef.fields || {}).map(([name, def]) => ({
+                                        } })))] }) }) }), affordances.create && can(objectDef.name, 'create') && (_jsx("button", { type: "button", onClick: actions.create, className: "sm:hidden fixed right-4 bottom-36 z-40 h-12 w-12 rounded-full bg-primary text-primary-foreground shadow-lg active:scale-95 transition-transform inline-flex items-center justify-center", "aria-label": t('console.objectView.new'), "data-testid": "mobile-fab-create", children: _jsx(Plus, { className: "h-5 w-5" }) })), showImport && (_jsx(Suspense, { fallback: null, children: _jsx(ImportWizard, { open: showImport, onOpenChange: setShowImport, objectName: objectDef.name, objectLabel: objectLabel(objectDef), fields: Object.entries(objectDef.fields || {}).map(([name, def]) => ({
                                 name,
                                 label: def?.label || name,
                                 type: def?.type || 'text',

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;

package/dist/views/ScreenView.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * ScreenView — the presentational body of a flow `screen` (framework
+ * screen-flow runtime, ADR-0019): the flat input-field list OR the named
+ * object's full create/edit form.
+ *
+ * Extracted from {@link FlowRunner} so the exact same renderer drives both the
+ * runtime (paused screen-flow → collect input → resume) and the Studio design
+ * preview ({@link ScreenPreview}). Keeping ONE renderer is deliberate: a
+ * separate preview reimplementation would drift from runtime — the
+ * simulator-vs-engine divergence fixed in #1927.
+ *
+ * It owns no submit/resume behaviour and no Dialog chrome — the caller frames
+ * it (the runtime wraps it in a Dialog + footer and resumes the run; the
+ * preview wraps it in a card and hides the persist bar).
+ */
+import { Input, Label, Textarea, Checkbox, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, cn, } from '@object-ui/components';
+import { ObjectForm } from '@object-ui/plugin-form';
+/** Whether a screen renders the object-form body rather than the flat fields. */
+export function isObjectFormScreen(screen) {
+    return screen.kind === 'object-form' && !!screen.objectName;
+}
+/** Seed flat-field values from each field's `defaultValue`. */
+export function initialScreenValues(screen) {
+    const v = {};
+    for (const f of screen.fields)
+        if (f.defaultValue !== undefined)
+            v[f.name] = f.defaultValue;
+    return v;
+}
+export function ScreenView({ screen, values, onValueChange, dataSource, objects, objectForm, className }) {
+    if (isObjectFormScreen(screen)) {
+        const objectDef = Array.isArray(objects) ? objects.find((o) => o?.name === screen.objectName) : undefined;
+        const subforms = objectDef
+            ? (objectDef.form?.subforms ?? objectDef.formViews?.default?.subforms)
+            : undefined;
+        // Full object create/edit form (with inline master-detail grids). At runtime
+        // the form owns its own Save/Cancel bar; the preview hides it.
+        return (_jsx("div", { className: cn('py-2', className), 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: objectForm?.onSuccess,
+                    onCancel: objectForm?.onCancel,
+                    showSubmit: objectForm?.showSubmit ?? true,
+                    showCancel: objectForm?.showCancel ?? true,
+                    submitText: objectForm?.submitText ?? 'Save & Continue',
+                    cancelText: objectForm?.cancelText ?? 'Cancel',
+                }, dataSource: dataSource }, screen.nodeId)) : (_jsx("div", { className: "text-sm text-destructive py-4", children: objectForm?.noDataSourceMessage ?? 'This step renders an object form but no data source is available.' })) }));
+    }
+    return (_jsx("div", { className: cn('space-y-4 py-2', className), 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) => onValueChange(f.name, v) })] }, f.name))) }));
+}
+export 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/metadata-admin/AssignedUsersSection.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * AssignedUsersSection — "Manage Assignments" for a permission set.
+ *
+ * The admin's mental model is "who holds this role / AI seat" — so this is a
+ * people-first list (name + email + remove), not a raw junction table. It reads
+ * `sys_user_permission_set` for the set, resolves each `user_id` to a real
+ * person, and uses the reusable `RecordPickerDialog` to assign more. Server-side
+ * rules on the junction insert (e.g. the AI-seat cap) are caught and shown as a
+ * friendly, localized inline message — not a raw developer error.
+ *
+ * Permission-set-agnostic: every role gets the same UI, and the AI seat
+ * (`ai_seat`) is just one of them. The generic add-by-picker engine (spec
+ * RecordRelatedListProps.add) powers the capability; this is the polished
+ * surface for the high-value case.
+ */
+import * as React from 'react';
+export interface AssignedUsersSectionProps {
+    /** The permission set's machine name (e.g. `ai_seat`, `admin_full_access`). */
+    permissionSetName: string;
+}
+export declare function AssignedUsersSection({ permissionSetName }: AssignedUsersSectionProps): React.JSX.Element;
+export default AssignedUsersSection;