@object-ui/app-shell 7.0.0 → 7.1.0

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/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/DirectoryPage.js

@@ -25,6 +25,7 @@ import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { useMetadataClient, useMetadataTypes, useGlobalDiagnostics, } from './useMetadata';
 import { MetadataQuickFind } from './QuickFind';
 import { translateMetadataType, translateMetadataDomain, t, tFormat, detectLocale, } from './i18n';
+import { buildPackageScopeOptions } from './package-scope';
 const DOMAIN_ICONS = {
     data: Database,
     ui: Layers,
@@ -79,20 +80,7 @@ export function MetadataDirectoryPage() {
                 const list = await client.list('package');
                 if (cancelled)
                     return;
-                const SYSTEM_SCOPES = new Set(['system', 'cloud']);
-                const rows = (list ?? [])
-                    .map((raw) => {
-                    const item = raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw;
-                    const m = (item?.manifest ?? item ?? {});
-                    return {
-                        id: m.id,
-                        scope: m.scope,
-                        name: m.name || m.id,
-                    };
-                })
-                    .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
-                rows.sort((a, b) => a.name.localeCompare(b.name));
-                setProjectPackages(rows.map((p) => ({ id: p.id, name: p.name })));
+                setProjectPackages(buildPackageScopeOptions(list));
             }
             catch {
                 if (!cancelled)

package/dist/views/metadata-admin/JsonSourceEditor.d.ts

@@ -32,6 +32,8 @@ export interface JsonSourceEditorProps {
     issues?: JsonIssue[];
     /** Pixel or CSS-length height. Defaults to `60vh`. */
     height?: string | number;
+    /** Grace period (ms) before the textarea fallback engages. Test-tunable. */
+    fallbackDelayMs?: number;
 }
-export declare function JsonSourceEditor({ value, onChange, readOnly, issues, height, }: JsonSourceEditorProps): React.JSX.Element;
+export declare function JsonSourceEditor({ value, onChange, readOnly, issues, height, fallbackDelayMs, }: JsonSourceEditorProps): React.JSX.Element;
 export default JsonSourceEditor;

package/dist/views/metadata-admin/JsonSourceEditor.js

@@ -45,7 +45,7 @@ function splitPath(p) {
         return Number.isInteger(n) && String(n) === seg ? n : seg;
     });
 }
-export function JsonSourceEditor({ value, onChange, readOnly, issues, height = '60vh', }) {
+export function JsonSourceEditor({ value, onChange, readOnly, issues, height = '60vh', fallbackDelayMs = 4000, }) {
     const locale = React.useMemo(() => detectLocale(), []);
     const [text, setText] = React.useState(() => stringify(value));
     const [parseError, setParseError] = React.useState(null);
@@ -54,6 +54,24 @@ export function JsonSourceEditor({ value, onChange, readOnly, issues, height = '
     // when either the source text or the issues prop changes.
     const editorRef = React.useRef(null);
     const monacoRef = React.useRef(null);
+    // Monaco's core is fetched lazily and, by default, from a public CDN, and it
+    // also spins up web workers. When any of that is blocked — offline /
+    // air-gapped / CSP-restricted installs — the editor mounts an empty shell
+    // with no error and the Source tab looks blank. Detect "nothing actually
+    // painted" via the rendered `.view-line` rows and fall back to a plain
+    // textarea so the source is always readable and editable.
+    const containerRef = React.useRef(null);
+    const [monacoUnavailable, setMonacoUnavailable] = React.useState(false);
+    React.useEffect(() => {
+        if (monacoUnavailable)
+            return;
+        const id = setTimeout(() => {
+            const el = containerRef.current;
+            if (!el || !el.querySelector('.view-line'))
+                setMonacoUnavailable(true);
+        }, fallbackDelayMs);
+        return () => clearTimeout(id);
+    }, [monacoUnavailable, fallbackDelayMs]);
     // Match against the dark class our app-shell toggles on <html>; pick
     // a Monaco theme that doesn't fight the rest of the chrome.
     const [theme, setTheme] = React.useState(() => {
@@ -161,7 +179,7 @@ export function JsonSourceEditor({ value, onChange, readOnly, issues, height = '
         // Defer one tick so the model has settled before the first paint.
         setTimeout(applyMarkers, 0);
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "border rounded overflow-hidden bg-background", style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsx(React.Suspense, { fallback: _jsx(Skeleton, { className: "w-full h-full" }), children: _jsx(LazyMonaco, { value: text, language: "json", theme: theme, onChange: handleChange, onMount: handleMount, options: {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { ref: containerRef, "data-testid": "source-editor", className: "border rounded overflow-hidden bg-background", style: { height: typeof height === 'number' ? `${height}px` : height }, children: monacoUnavailable ? (_jsx("textarea", { value: text, onChange: (e) => handleChange(e.target.value), readOnly: readOnly, spellCheck: false, "aria-label": "JSON source", className: "w-full h-full resize-none bg-background p-3 font-mono text-xs leading-relaxed outline-none" })) : (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { className: "w-full h-full" }), children: _jsx(LazyMonaco, { value: text, language: "json", theme: theme, onChange: handleChange, onMount: handleMount, options: {
                             readOnly,
                             minimap: { enabled: false },
                             fontSize: 12,
@@ -173,6 +191,6 @@ export function JsonSourceEditor({ value, onChange, readOnly, issues, height = '
                             tabSize: 2,
                             renderLineHighlight: 'line',
                             scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10 },
-                        } }) }) }), parseError && (_jsxs("div", { className: "text-xs text-destructive flex items-start gap-1.5", children: [_jsx("span", { "aria-hidden": true, children: "\u26A0" }), _jsx("span", { children: parseError })] }))] }));
+                        } }) })) }), parseError && (_jsxs("div", { className: "text-xs text-destructive flex items-start gap-1.5", children: [_jsx("span", { "aria-hidden": true, children: "\u26A0" }), _jsx("span", { children: parseError })] }))] }));
 }
 export default JsonSourceEditor;

package/dist/views/metadata-admin/PackagesPage.js

@@ -104,6 +104,14 @@ function CreatePackageDialog({ open, onOpenChange, onCreated, }) {
                 }),
             });
             onCreated(id.trim());
+            // Let context selectors (e.g. the sidebar package switcher) pick up the
+            // new package without a full page reload.
+            try {
+                window.dispatchEvent(new CustomEvent('objectui:packages-changed'));
+            }
+            catch {
+                /* non-DOM env */
+            }
             onOpenChange(false);
         }
         catch (e) {
@@ -113,7 +121,7 @@ function CreatePackageDialog({ open, onOpenChange, onCreated, }) {
             setBusy(false);
         }
     }
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('engine.packages.create.title', locale) }), _jsx(DialogDescription, { children: tFormat('engine.packages.create.description', locale, { example: 'com.acme.crm' }) })] }), _jsxs("div", { className: "space-y-4 py-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-id", children: t('engine.packages.create.id', locale) }), _jsx(Input, { id: "pkg-id", placeholder: "com.acme.crm", value: id, onChange: (e) => setId(e.target.value), "aria-invalid": !!id && !idValid }), !!id && !idValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.idInvalid', locale) }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-name", children: t('engine.packages.create.name', locale) }), _jsx(Input, { id: "pkg-name", placeholder: "Acme CRM", value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-version", children: t('engine.packages.create.version', locale) }), _jsx(Input, { id: "pkg-version", placeholder: "0.1.0", value: version, onChange: (e) => setVersion(e.target.value), "aria-invalid": !!version && !versionValid }), !!version && !versionValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.versionInvalid', locale) }))] }), error && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t('engine.cancel', locale) }), _jsx(Button, { onClick: submit, disabled: !canSubmit, children: busy ? t('engine.packages.create.creating', locale) : t('engine.packages.create.submit', locale) })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('engine.packages.create.title', locale) }), _jsx(DialogDescription, { children: tFormat('engine.packages.create.description', locale, { example: 'com.acme.crm' }) })] }), _jsxs("div", { className: "space-y-4 py-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-id", children: t('engine.packages.create.id', locale) }), _jsx(Input, { id: "pkg-id", "data-testid": "package-id-input", placeholder: "com.acme.crm", value: id, onChange: (e) => setId(e.target.value), "aria-invalid": !!id && !idValid }), !!id && !idValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.idInvalid', locale) }))] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-name", children: t('engine.packages.create.name', locale) }), _jsx(Input, { id: "pkg-name", "data-testid": "package-name-input", placeholder: "Acme CRM", value: name, onChange: (e) => setName(e.target.value) })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx(Label, { htmlFor: "pkg-version", children: t('engine.packages.create.version', locale) }), _jsx(Input, { id: "pkg-version", placeholder: "0.1.0", value: version, onChange: (e) => setVersion(e.target.value), "aria-invalid": !!version && !versionValid }), !!version && !versionValid && (_jsx("p", { className: "text-xs text-destructive", children: t('engine.packages.create.versionInvalid', locale) }))] }), error && (_jsxs("div", { className: "flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/10 p-2 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 h-4 w-4 shrink-0" }), _jsx("span", { children: error })] }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), disabled: busy, children: t('engine.cancel', locale) }), _jsx(Button, { onClick: submit, disabled: !canSubmit, children: busy ? t('engine.packages.create.creating', locale) : t('engine.packages.create.submit', locale) })] })] }) }));
 }
 /* -------------------------------------------------------------------------- */
 /* Detail sheet — manifest + lifecycle actions                                 */

package/dist/views/metadata-admin/ResourceEditPage.js

@@ -48,6 +48,7 @@ import { getMetadataDefaultInspector } from './default-inspector-registry';
 import { detectLocale, t, tFormat, translateValidationMessage } from './i18n';
 import { JsonSourceEditor } from './JsonSourceEditor';
 import { validateMetadataDraft, hasClientValidator } from './clientValidation';
+import { describeIssuePath } from './issuePath';
 // react-resizable-panels' `direction` prop type does not always narrow
 // cleanly in our TS config; cast at the boundary (precedent:
 // packages/components/src/custom/navigation-overlay.tsx).
@@ -59,7 +60,7 @@ const PanelGroup = ResizablePanelGroup;
  * editable via the no-selection default inspector. Other types keep
  * the conventional "name it first, design after save" create flow.
  */
-const CREATE_MODE_CANVAS_TYPES = new Set(['object']);
+const CREATE_MODE_CANVAS_TYPES = new Set(['object', 'report', 'dataset']);
 /**
  * Top-level metadata keys that a type's canvas PreviewComponent owns and
  * edits visually (e.g. the object designer owns `fields` + `fieldGroups`).
@@ -749,7 +750,10 @@ function MetadataResourceEditPageImpl({ type, name, createMode, embedded, }) {
         const PC = getMetadataPreview(type);
         if (!PC)
             return;
-        const isArtifact = layered?.code != null;
+        // See `isArtifactItem` below — a `sys_metadata`-tagged code layer is a
+        // published org object, NOT a packaged artifact, so it stays editable.
+        const isArtifact = layered?.code != null
+            && layered.code?._packageId !== 'sys_metadata';
         const cw = isArtifact
             ? !!entry?.allowOrgOverride
             : !!(entry?.allowOrgOverride || entry?.allowRuntimeCreate);
@@ -815,22 +819,29 @@ function MetadataResourceEditPageImpl({ type, name, createMode, embedded, }) {
         const key = path.split('.')[0];
         if (!key)
             return path;
-        const formForLabels = (createMode && config.createSchema ? undefined : entry?.form);
-        const sections = Array.isArray(formForLabels?.sections) ? formForLabels.sections : [];
-        for (const section of sections) {
-            const fields = Array.isArray(section?.fields) ? section.fields : [];
-            for (const field of fields) {
-                if (typeof field === 'string') {
-                    if (field === key)
-                        return field;
-                }
-                else if (field?.field === key) {
-                    return String(field.label ?? key);
+        // Resolve the human label for the HEAD segment from the form/schema.
+        const headLabel = (() => {
+            const formForLabels = (createMode && config.createSchema ? undefined : entry?.form);
+            const sections = Array.isArray(formForLabels?.sections) ? formForLabels.sections : [];
+            for (const section of sections) {
+                const fields = Array.isArray(section?.fields) ? section.fields : [];
+                for (const field of fields) {
+                    if (typeof field === 'string') {
+                        if (field === key)
+                            return field;
+                    }
+                    else if (field?.field === key) {
+                        return String(field.label ?? key);
+                    }
                 }
             }
-        }
-        const props = (schema?.properties ?? {});
-        return String(props[key]?.title ?? key);
+            const props = (schema?.properties ?? {});
+            return String(props[key]?.title ?? key);
+        })();
+        // For a NESTED path (e.g. `widgets.2.layout`) append a readable trail naming
+        // the offending element + sub-field, so a terse "Widgets: Invalid input"
+        // becomes "Widgets → priority_split → layout".
+        return describeIssuePath(headLabel, path, draft);
     }
     async function doSave(force) {
         setSaving(true);
@@ -929,7 +940,15 @@ function MetadataResourceEditPageImpl({ type, name, createMode, embedded, }) {
             if (!createMode && !stayInEditing)
                 setEditing(false);
             if (createMode) {
-                navigate(`../${encodeURIComponent(savedName)}`, { relative: 'path' });
+                // Preserve the active query string (notably `?package=…`) so the
+                // post-create navigation lands on the item in the SAME package the
+                // author was working in. Without this the param is dropped and the
+                // editor falls back to the user's default package, where the freshly
+                // saved draft doesn't exist — so it reloads a blank form.
+                const qs = searchParams.toString();
+                navigate(`../${encodeURIComponent(savedName)}${qs ? `?${qs}` : ''}`, {
+                    relative: 'path',
+                });
             }
         }
         catch (err) {
@@ -1101,7 +1120,15 @@ function MetadataResourceEditPageImpl({ type, name, createMode, embedded, }) {
     //   - artifact-backed items (layered.code != null) need allowOrgOverride
     //   - DB-only items (no artifact) need allowOrgOverride OR allowRuntimeCreate
     //   - createMode is always writable (the server will gate on intent)
-    const isArtifactItem = !createMode && layered?.code != null;
+    // A non-null `code` layer alone is NOT proof of a code (artifact) package:
+    // a published org object also surfaces its active version in `code`, but
+    // tagged with the `sys_metadata` provenance sentinel. Mirror the server's
+    // `isArtifactBacked` (which excludes `_packageId === 'sys_metadata'`) so an
+    // org-authored object stays editable after publish instead of being mis-read
+    // as a read-only packaged item.
+    const isArtifactItem = !createMode
+        && layered?.code != null
+        && layered.code?._packageId !== 'sys_metadata';
     // ADR-0010 — server-computed lock flags. undefined means "no opinion"
     // (older server / non-lockable item) → preserve legacy behaviour.
     const lockEditable = layered?.editable !== false;
@@ -1320,7 +1347,7 @@ function MetadataResourceEditPageImpl({ type, name, createMode, embedded, }) {
                     ? 'flex h-full min-h-0 flex-col'
                     : 'p-6 space-y-6 max-w-7xl', children: [(error || readOnly || hasDraft || isLocked) && (_jsxs("div", { className: PreviewComponent
                             ? 'px-6 pt-4 space-y-3'
-                            : 'space-y-3', children: [error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), isLocked && (_jsxs("div", { className: "text-xs text-amber-900 border border-amber-300/70 bg-amber-50/70 rounded-md px-3 py-2.5 dark:text-amber-200 dark:border-amber-700/40 dark:bg-amber-950/20 flex items-start gap-2.5", children: [_jsx(Lock, { className: "h-3.5 w-3.5 mt-0.5 shrink-0 opacity-80" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "font-medium", children: [layered?.lock === 'full' && t('engine.edit.lockFull', locale), layered?.lock === 'no-overlay' && t('engine.edit.lockNoOverlay', locale), layered?.lock === 'no-delete' && t('engine.edit.lockNoDelete', locale)] }), lockReason && _jsx("div", { className: "mt-0.5 opacity-90", children: lockReason }), layered?.lockDocsUrl && (_jsxs("a", { href: layered.lockDocsUrl, target: "_blank", rel: "noopener noreferrer", className: "mt-1 inline-flex items-center gap-1 text-amber-800 underline hover:text-amber-900 dark:text-amber-200 dark:hover:text-amber-100", children: [locale === 'zh-CN' ? '查看文档' : 'View docs', " \u2192"] })), layered?.packageId && (_jsx("div", { className: "mt-0.5 text-amber-700 dark:text-amber-300/80", children: _jsxs("code", { className: "font-mono", children: [layered.packageId, layered.packageVersion ? `@${layered.packageVersion}` : ''] }) }))] }), showArtifactLockedBanner && (_jsx(Button, { size: "sm", variant: "outline", className: "shrink-0 h-7 bg-background/60", onClick: () => navigate(`../new`, { relative: 'path' }), children: t('engine.list.create', locale) }))] })), hasDraft && !createMode && (_jsxs("div", { className: "text-xs text-emerald-900 border border-emerald-300 bg-emerald-50 rounded p-3 dark:text-emerald-200 dark:border-emerald-700/50 dark:bg-emerald-950/30 flex items-center gap-3", children: [_jsx(Send, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1", children: t('engine.edit.draftPending', locale) }), canWrite && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: doDiscardDraft, disabled: saving || publishing, className: "h-7", children: t('engine.edit.discardDraft', locale) }), _jsx(Button, { size: "sm", onClick: doPublish, disabled: saving || publishing || isDirty, className: "h-7 bg-emerald-600 hover:bg-emerald-700 text-emerald-50", children: publishing ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (t('engine.edit.publish', locale)) })] }))] })), readOnly && !isLocked && (_jsxs("div", { className: "text-xs text-amber-800 border border-amber-300/70 bg-amber-50/70 rounded-md px-3 py-2.5 dark:text-amber-200 dark:border-amber-700/40 dark:bg-amber-950/20 flex items-start gap-3", children: [_jsx("div", { className: "flex-1", children: showArtifactLockedBanner ? (
+                            : 'space-y-3', children: [error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), isLocked && (_jsxs("div", { className: "text-xs text-amber-900 border border-amber-300/70 bg-amber-50/70 rounded-md px-3 py-2.5 dark:text-amber-200 dark:border-amber-700/40 dark:bg-amber-950/20 flex items-start gap-2.5", children: [_jsx(Lock, { className: "h-3.5 w-3.5 mt-0.5 shrink-0 opacity-80" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "font-medium", children: [layered?.lock === 'full' && t('engine.edit.lockFull', locale), layered?.lock === 'no-overlay' && t('engine.edit.lockNoOverlay', locale), layered?.lock === 'no-delete' && t('engine.edit.lockNoDelete', locale)] }), lockReason && _jsx("div", { className: "mt-0.5 opacity-90", children: lockReason }), layered?.lockDocsUrl && (_jsxs("a", { href: layered.lockDocsUrl, target: "_blank", rel: "noopener noreferrer", className: "mt-1 inline-flex items-center gap-1 text-amber-800 underline hover:text-amber-900 dark:text-amber-200 dark:hover:text-amber-100", children: [locale === 'zh-CN' ? '查看文档' : 'View docs', " \u2192"] })), layered?.packageId && (_jsx("div", { className: "mt-0.5 text-amber-700 dark:text-amber-300/80", children: _jsxs("code", { className: "font-mono", children: [layered.packageId, layered.packageVersion ? `@${layered.packageVersion}` : ''] }) }))] }), showArtifactLockedBanner && (_jsx(Button, { size: "sm", variant: "outline", className: "shrink-0 h-7 bg-background/60", onClick: () => navigate(`../new`, { relative: 'path' }), children: t('engine.list.create', locale) }))] })), hasDraft && !createMode && (_jsxs("div", { className: "text-xs text-emerald-900 border border-emerald-300 bg-emerald-50 rounded p-3 dark:text-emerald-200 dark:border-emerald-700/50 dark:bg-emerald-950/30 flex items-center gap-3", children: [_jsx(Send, { className: "h-3.5 w-3.5 shrink-0" }), _jsx("span", { className: "flex-1", children: t('engine.edit.draftPending', locale) }), canWrite && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: doDiscardDraft, disabled: saving || publishing, className: "h-7", children: t('engine.edit.discardDraft', locale) }), _jsx(Button, { size: "sm", onClick: doPublish, disabled: saving || publishing || isDirty, className: "h-7 bg-emerald-600 hover:bg-emerald-700 text-emerald-50", children: publishing ? (_jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" })) : (t('engine.edit.publish', locale)) })] }))] })), readOnly && !isLocked && (_jsxs("div", { "data-testid": "readonly-banner", className: "text-xs text-amber-800 border border-amber-300/70 bg-amber-50/70 rounded-md px-3 py-2.5 dark:text-amber-200 dark:border-amber-700/40 dark:bg-amber-950/20 flex items-start gap-3", children: [_jsx("div", { className: "flex-1", children: showArtifactLockedBanner ? (
                                         /* Type allows runtime-create but THIS item ships from
                                            a code package. Tell the user clearly and provide
                                            a CTA to author their own. */
@@ -1404,7 +1431,7 @@ function MetadataResourceEditPageImpl({ type, name, createMode, embedded, }) {
                                         const titleKey = kind === 'error'
                                             ? 'engine.edit.diagnostics.title'
                                             : 'engine.edit.diagnostics.warnTitle';
-                                        return (_jsxs("div", { className: `flex items-start gap-2 text-xs border rounded p-2.5 ${cls}`, children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium", children: tFormat(titleKey, locale, { count: items.length }) }), _jsxs("ul", { className: "mt-1 space-y-0.5 font-mono text-[11px]", children: [head.map((e, i) => (_jsxs("li", { className: "truncate", children: [_jsx("span", { className: "opacity-70", children: e.path ? labelForIssuePath(e.path) : '(root)' }), ": ", e.message] }, i))), rest > 0 && (_jsx("li", { className: "opacity-70", children: tFormat('engine.edit.diagnostics.more', locale, { count: rest }) }))] })] })] }, kind));
+                                        return (_jsxs("div", { "data-testid": kind === 'error' ? 'metadata-validation-banner' : undefined, className: `flex items-start gap-2 text-xs border rounded p-2.5 ${cls}`, children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "font-medium", children: tFormat(titleKey, locale, { count: items.length }) }), _jsxs("ul", { className: "mt-1 space-y-0.5 font-mono text-[11px]", children: [head.map((e, i) => (_jsxs("li", { className: "truncate", children: [_jsx("span", { className: "opacity-70", children: e.path ? labelForIssuePath(e.path) : '(root)' }), ": ", e.message] }, i))), rest > 0 && (_jsx("li", { className: "opacity-70", children: tFormat('engine.edit.diagnostics.more', locale, { count: rest }) }))] })] })] }, kind));
                                     };
                                     return (_jsxs("div", { className: "space-y-2", children: [hasErrs && renderBlock('error', errs), hasWarns && renderBlock('warning', warns)] }));
                                 })(), PreviewComponent ? (_jsx("div", { className: isFullscreen

package/dist/views/metadata-admin/ResourceListPage.js

@@ -24,6 +24,7 @@ import { MetadataTypeActions } from './MetadataTypeActions';
 import { useMetadataClient, useMetadataTypes, matchesQuery, } from './useMetadata';
 import { getMetadataResource, resolveResourceConfig, } from './registry';
 import { t, tFormat, translateMetadataType, detectLocale } from './i18n';
+import { buildPackageScopeOptions, LOCAL_PACKAGE_ID } from './package-scope';
 /**
  * Derive provenance from item._packageId. The `loadMetaFromDb` path
  * tags objects with the synthetic packageId 'sys_metadata' (see
@@ -82,20 +83,7 @@ function DefaultMetadataList({ type, appName }) {
                 const list = await client.list('package');
                 if (cancelled)
                     return;
-                const SYSTEM_SCOPES = new Set(['system', 'cloud']);
-                const rows = (list ?? [])
-                    .map((raw) => {
-                    const item = raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw;
-                    const m = (item?.manifest ?? item ?? {});
-                    return {
-                        id: m.id,
-                        scope: m.scope,
-                        name: m.name || m.id,
-                    };
-                })
-                    .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
-                rows.sort((a, b) => a.name.localeCompare(b.name));
-                setProjectPackages(rows.map((p) => ({ id: p.id, name: p.name })));
+                setProjectPackages(buildPackageScopeOptions(list));
             }
             catch {
                 if (!cancelled)
@@ -249,8 +237,12 @@ function DefaultMetadataList({ type, appName }) {
         if (!activePackage)
             return false;
         const pkg = row.item?._packageId;
-        const effectivePkg = !pkg || pkg === 'sys_metadata' ? null : pkg;
-        return effectivePkg === activePackage;
+        const isLocal = !pkg || pkg === LOCAL_PACKAGE_ID;
+        // Local/Custom scope surfaces this environment's runtime-authored items
+        // (untagged / `sys_metadata` provenance); a code package shows its own.
+        if (activePackage === LOCAL_PACKAGE_ID)
+            return isLocal;
+        return !isLocal && pkg === activePackage;
     }), [items, activePackage, config]);
     // User-driven filters (search query + source provenance) on top of scope.
     const filtered = scopedItems.filter((row) => {

package/dist/views/metadata-admin/StudioHomePage.js

@@ -28,6 +28,7 @@ import { useRecentItems } from '../../context/RecentItemsProvider';
 import { useMetadataClient, useMetadataTypes, useGlobalDiagnostics, } from './useMetadata';
 import { MetadataQuickFind } from './QuickFind';
 import { translateMetadataType, translateMetadataDomain, t, tFormat, detectLocale, } from './i18n';
+import { buildPackageScopeOptions, LOCAL_PACKAGE_ID } from './package-scope';
 const HIDDEN_TYPES = new Set(['field', 'package']);
 const DOMAIN_ICONS = {
     data: Database,
@@ -104,20 +105,7 @@ export function StudioHomePage() {
                 const list = await client.list('package');
                 if (cancelled)
                     return;
-                const SYSTEM_SCOPES = new Set(['system', 'cloud']);
-                const rows = (list ?? [])
-                    .map((raw) => {
-                    const item = raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw;
-                    const m = (item?.manifest ?? item ?? {});
-                    return {
-                        id: m.id,
-                        scope: m.scope,
-                        name: m.name || m.id,
-                    };
-                })
-                    .filter((p) => p.id && !SYSTEM_SCOPES.has(p.scope));
-                rows.sort((a, b) => a.name.localeCompare(b.name));
-                setProjectPackages(rows.map((p) => ({ id: p.id, name: p.name })));
+                setProjectPackages(buildPackageScopeOptions(list));
             }
             catch {
                 if (!cancelled)
@@ -155,6 +143,10 @@ export function StudioHomePage() {
             return false;
         if (!activePackage)
             return false;
+        // Local/Custom scope: show every runtime-creatable type so the user can
+        // start authoring any kind of metadata here, even with zero items yet.
+        if (activePackage === LOCAL_PACKAGE_ID)
+            return e.allowOrgOverride || e.allowRuntimeCreate;
         return (packagesByType[e.type] ?? []).includes(activePackage);
     }), [activePackage, entries, packagesByType]);
     const writable = React.useMemo(() => visible.filter((e) => e.allowOrgOverride || e.allowRuntimeCreate), [visible]);