@object-ui/app-shell 11.2.0 → 11.4.0

package/dist/views/metadata-admin/inspectors/ObjectFieldInspector.js

@@ -340,19 +340,33 @@ function useObjectOptions() {
     const [opts, setOpts] = React.useState([]);
     React.useEffect(() => {
         let cancelled = false;
-        client
-            .list('object')
-            .then((items) => {
+        Promise.all([
+            client.list('object'),
+            // Draft objects are not yet published, so `list('object')` can't see
+            // them. Include them so a lookup can target a SIBLING object being
+            // designed in the same authoring pass (before the package's first
+            // publish) instead of forcing the author to type an API name blind.
+            client.listDrafts({ type: 'object' }).catch(() => []),
+        ])
+            .then(([published, drafts]) => {
             if (cancelled)
                 return;
-            const mapped = items
-                .filter((i) => typeof i?.name === 'string' && i.name)
-                .map((i) => ({
-                value: i.name,
-                label: i.label ? `${i.label} (${i.name})` : i.name,
-            }))
-                .sort((a, b) => a.value.localeCompare(b.value));
-            setOpts(mapped);
+            const byName = new Map();
+            for (const i of published ?? []) {
+                if (typeof i?.name === 'string' && i.name && !byName.has(i.name)) {
+                    byName.set(i.name, {
+                        value: i.name,
+                        label: i.label ? `${i.label} (${i.name})` : i.name,
+                    });
+                }
+            }
+            for (const d of drafts ?? []) {
+                const name = d.name;
+                if (typeof name === 'string' && name && !byName.has(name)) {
+                    byName.set(name, { value: name, label: `${name} (草稿)` });
+                }
+            }
+            setOpts([...byName.values()].sort((a, b) => a.value.localeCompare(b.value)));
         })
             .catch(() => {
             // Empty list — picker falls back to free-text. No banner needed.

package/dist/views/metadata-admin/permission-slice.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Package-scoped slice merge for the permission matrix (ADR-0086 P0).
+ *
+ * A Permission Set / Profile is a single metadata record whose `objects` and
+ * `fields` maps accumulate authorization rows contributed by many packages.
+ * When the Access matrix is opened inside a package context it must:
+ *
+ *   1. show only the objects that package declares (scope), and
+ *   2. on Save write back ONLY that slice — leaving every row contributed by
+ *      other packages byte-for-byte intact.
+ *
+ * Overwriting the whole record (the pre-P0 behavior) silently drops the rows
+ * other packages contributed. {@link mergePermissionSlice} rebuilds the record
+ * from a freshly-read base, keeping the set-level identity and every
+ * out-of-scope row, and overlaying only the in-scope rows the user edited.
+ */
+export interface ObjectPerm {
+    allowCreate?: boolean;
+    allowRead?: boolean;
+    allowEdit?: boolean;
+    allowDelete?: boolean;
+    allowTransfer?: boolean;
+    allowRestore?: boolean;
+    allowPurge?: boolean;
+    viewAllRecords?: boolean;
+    modifyAllRecords?: boolean;
+}
+export interface FieldPerm {
+    readable?: boolean;
+    editable?: boolean;
+}
+export interface PermissionSetDraft {
+    name: string;
+    label?: string;
+    isProfile?: boolean;
+    objects: Record<string, ObjectPerm>;
+    fields?: Record<string, FieldPerm>;
+    systemPermissions?: string[];
+    tabPermissions?: Record<string, 'visible' | 'hidden' | 'default_on' | 'default_off'>;
+    [extra: string]: unknown;
+}
+/**
+ * Object name embedded in a `${object}.${field}` field-permission key. Object
+ * and field names are field-name-safe (snake_case, no dots), so the object is
+ * everything up to the first dot.
+ */
+export declare function fieldKeyObject(key: string): string;
+/**
+ * Narrow a permission set down to just the rows whose object is in `scope`.
+ * Used to drive the matrix display so a package panel lists only its own
+ * objects (and their field overrides), never the whole environment.
+ */
+export declare function scopePermissionSet(set: Pick<PermissionSetDraft, 'objects' | 'fields'>, scope: Iterable<string>): {
+    objects: Record<string, ObjectPerm>;
+    fields: Record<string, FieldPerm>;
+};
+/**
+ * Merge the edited in-scope slice back onto a freshly-read full `base`.
+ *
+ * Out-of-scope rows (other packages' contributions) are copied verbatim from
+ * `base`; in-scope rows are taken entirely from `edited` (so removing a grant
+ * in the package panel deletes only that package's row). Set-level identity and
+ * any extra keys (systemPermissions, tabPermissions, …) come from `base`, with
+ * name / label / isProfile taking the user's edits.
+ */
+export declare function mergePermissionSlice(base: PermissionSetDraft, edited: PermissionSetDraft, scope: Iterable<string>): PermissionSetDraft;

package/dist/views/metadata-admin/permission-slice.js

@@ -0,0 +1,70 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Object name embedded in a `${object}.${field}` field-permission key. Object
+ * and field names are field-name-safe (snake_case, no dots), so the object is
+ * everything up to the first dot.
+ */
+export function fieldKeyObject(key) {
+    const dot = key.indexOf('.');
+    return dot === -1 ? key : key.slice(0, dot);
+}
+function asScopeSet(scope) {
+    return scope instanceof Set ? scope : new Set(scope);
+}
+/**
+ * Narrow a permission set down to just the rows whose object is in `scope`.
+ * Used to drive the matrix display so a package panel lists only its own
+ * objects (and their field overrides), never the whole environment.
+ */
+export function scopePermissionSet(set, scope) {
+    const scopeSet = asScopeSet(scope);
+    const objects = {};
+    for (const [k, v] of Object.entries(set.objects ?? {})) {
+        if (scopeSet.has(k))
+            objects[k] = v;
+    }
+    const fields = {};
+    for (const [k, v] of Object.entries(set.fields ?? {})) {
+        if (scopeSet.has(fieldKeyObject(k)))
+            fields[k] = v;
+    }
+    return { objects, fields };
+}
+/**
+ * Merge the edited in-scope slice back onto a freshly-read full `base`.
+ *
+ * Out-of-scope rows (other packages' contributions) are copied verbatim from
+ * `base`; in-scope rows are taken entirely from `edited` (so removing a grant
+ * in the package panel deletes only that package's row). Set-level identity and
+ * any extra keys (systemPermissions, tabPermissions, …) come from `base`, with
+ * name / label / isProfile taking the user's edits.
+ */
+export function mergePermissionSlice(base, edited, scope) {
+    const scopeSet = asScopeSet(scope);
+    const objects = {};
+    for (const [k, v] of Object.entries(base.objects ?? {})) {
+        if (!scopeSet.has(k))
+            objects[k] = v; // preserve other packages' rows
+    }
+    for (const [k, v] of Object.entries(edited.objects ?? {})) {
+        if (scopeSet.has(k))
+            objects[k] = v; // write this package's slice
+    }
+    const fields = {};
+    for (const [k, v] of Object.entries(base.fields ?? {})) {
+        if (!scopeSet.has(fieldKeyObject(k)))
+            fields[k] = v;
+    }
+    for (const [k, v] of Object.entries(edited.fields ?? {})) {
+        if (scopeSet.has(fieldKeyObject(k)))
+            fields[k] = v;
+    }
+    return {
+        ...base,
+        name: edited.name,
+        label: edited.label,
+        isProfile: edited.isProfile,
+        objects,
+        fields,
+    };
+}

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

@@ -19,6 +19,7 @@ import * as React from 'react';
 import { BarChart3, Compass, Database, FileText, Folder, GripVertical, LayoutDashboard, Link as LinkIcon, Plus, Trash2, } from 'lucide-react';
 import { Badge, cn } from '@object-ui/components';
 import { appendArray, moveArray, spliceArray } from '../inspectors/_shared';
+import { t, useMetadataLocale } from '../i18n';
 const DND_MIME = 'text/x-objectui-nav';
 function inferKind(it) {
     if (it.kind)
@@ -100,6 +101,7 @@ function navPath(it) {
     return typeof p === 'string' && p ? p : undefined;
 }
 export function AppNavCanvas({ draft, rootKey, onPatch, selection, onSelectionChange, }) {
+    const locale = useMetadataLocale();
     const items = React.useMemo(() => {
         const v = draft[rootKey];
         return Array.isArray(v) ? v : [];
@@ -114,15 +116,16 @@ export function AppNavCanvas({ draft, rootKey, onPatch, selection, onSelectionCh
     const addItem = React.useCallback(() => {
         if (!onPatch)
             return;
-        const newItem = { label: 'New item', path: '' };
+        const newLabel = t('engine.appNav.newItem', locale);
+        const newItem = { label: newLabel, path: '' };
         const next = appendArray(items, newItem);
         setItems(next);
         onSelectionChange?.({
             kind: 'nav',
             id: `${rootKey}[${next.length - 1}]`,
-            label: 'New item',
+            label: newLabel,
         });
-    }, [onPatch, items, setItems, rootKey, onSelectionChange]);
+    }, [onPatch, items, setItems, rootKey, onSelectionChange, locale]);
     const removeItem = React.useCallback((index) => {
         if (!onPatch)
             return;
@@ -158,7 +161,7 @@ export function AppNavCanvas({ draft, rootKey, onPatch, selection, onSelectionCh
             label: navLabel(next[to] ?? {}, to),
         });
     }, [onPatch, items, setItems, rootKey, onSelectionChange]);
-    return (_jsxs("div", { className: "rounded-md border bg-card/40", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "font-mono uppercase tracking-wide text-muted-foreground", children: rootKey }), _jsxs(Badge, { variant: "outline", className: "text-[10px]", children: [items.length, " ", items.length === 1 ? 'item' : 'items'] })] }), onPatch && (_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-dashed px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted/30 hover:text-foreground", onClick: addItem, children: [_jsx(Plus, { className: "h-3 w-3" }), " Add nav item"] }))] }), _jsx("div", { className: "space-y-1.5 p-2", onDragOver: (e) => {
+    return (_jsxs("div", { className: "rounded-md border bg-card/40", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "font-medium uppercase tracking-wide text-muted-foreground", children: t('engine.appNav.heading', locale) }), _jsxs(Badge, { variant: "outline", className: "text-[10px]", children: [items.length, " ", items.length === 1 ? t('engine.appNav.itemOne', locale) : t('engine.appNav.itemOther', locale)] })] }), onPatch && (_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-dashed px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted/30 hover:text-foreground", onClick: addItem, children: [_jsx(Plus, { className: "h-3 w-3" }), " ", t('engine.appNav.addItem', locale)] }))] }), _jsx("div", { className: "space-y-1.5 p-2", onDragOver: (e) => {
                     if (!onPatch)
                         return;
                     if (!e.dataTransfer.types.includes(DND_MIME))
@@ -176,8 +179,8 @@ export function AppNavCanvas({ draft, rootKey, onPatch, selection, onSelectionCh
                     moveItem(dragIndex, items.length);
                     setDragIndex(null);
                 }, children: items.length === 0 ? (_jsx("div", { className: "rounded border border-dashed px-3 py-4 text-center text-[11px] text-muted-foreground", children: onPatch
-                        ? 'Empty — click "Add nav item" to start'
-                        : 'No top-level nav items yet' })) : (items.map((it, i) => (_jsx(NavCardTree, { item: it, index: i, depth: 0, path: `${rootKey}[${i}]`, selectedId: selectedId, canEdit: !!onPatch, onClick: (p, lbl) => onSelectionChange?.({ kind: 'nav', id: p, label: lbl }), onRename: (lbl) => renameItem(i, lbl), onRemove: () => removeItem(i), onDragStart: () => setDragIndex(i), onDragEnd: () => setDragIndex(null), onDropBefore: () => {
+                        ? t('engine.appNav.empty', locale)
+                        : t('engine.appNav.emptyReadonly', locale) })) : (items.map((it, i) => (_jsx(NavCardTree, { item: it, index: i, depth: 0, path: `${rootKey}[${i}]`, selectedId: selectedId, canEdit: !!onPatch, onClick: (p, lbl) => onSelectionChange?.({ kind: 'nav', id: p, label: lbl }), onRename: (lbl) => renameItem(i, lbl), onRemove: () => removeItem(i), onDragStart: () => setDragIndex(i), onDragEnd: () => setDragIndex(null), onDropBefore: () => {
                         if (dragIndex == null)
                             return;
                         moveItem(dragIndex, i);
@@ -192,6 +195,7 @@ function NavCardTree({ item, index, depth, path, selectedId, canEdit, onClick, o
                 })] }));
 }
 function NavCard({ item, index, depth, path, isSelected, canEdit, onClick, onRename, onRemove, onDragStart, onDragEnd, onDropBefore, }) {
+    const locale = useMetadataLocale();
     const kind = inferKind(item);
     const Icon = kindIcon(kind);
     const tone = kindTone(kind);
@@ -256,5 +260,5 @@ function NavCard({ item, index, depth, path, isSelected, canEdit, onClick, onRen
                                 e.stopPropagation();
                                 onRemove();
                             }
-                        }, className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive", "aria-label": "Remove nav item", children: _jsx(Trash2, { className: "h-3 w-3" }) }))] })] }));
+                        }, className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive", "aria-label": t('engine.appNav.removeItem', locale), children: _jsx(Trash2, { className: "h-3 w-3" }) }))] })] }));
 }

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

@@ -10,16 +10,20 @@
  * designer.
  */
 import * as React from 'react';
+/** An error on a run/step. The engine sends the run-level `error` as a plain
+ *  string (`ExecutionLog.error`) while a step-level error is a `{code,message}`
+ *  object — the panel accepts either shape. */
+type RunError = string | {
+    code?: string;
+    message?: string;
+};
 /** Step entry of a run log (spec `ExecutionStepLogSchema`, fields we render). */
 interface RunStep {
     nodeId: string;
     nodeType?: string;
     status: 'success' | 'failure' | 'skipped' | string;
     durationMs?: number;
-    error?: {
-        code?: string;
-        message?: string;
-    };
+    error?: RunError;
 }
 /** Run log entry (spec `ExecutionLogSchema`, fields we render). */
 export interface FlowRun {
@@ -34,10 +38,15 @@ export interface FlowRun {
         object?: string;
     };
     steps?: RunStep[];
-    error?: {
-        message?: string;
-    };
+    error?: RunError;
 }
+/**
+ * Normalize a run/step error to its human-readable message. The engine emits a
+ * run-level `error` as a plain string but a step-level error as `{code,message}`
+ * — reading `.message` off the string case silently dropped the run failure
+ * reason (the whole point of the Runs panel for a failed run), so accept both.
+ */
+export declare function errorText(e: RunError | undefined | null): string | undefined;
 /** Fetch a flow's run history. Exposed for tests. */
 export declare function fetchFlowRuns(flowName: string, signal?: AbortSignal): Promise<FlowRun[] | null>;
 export declare function FlowRunsPanel({ flowName }: {

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

@@ -15,6 +15,20 @@ import * as React from 'react';
 import { AlertCircle, CheckCircle2, ChevronDown, ChevronRight, Clock, Loader2, PauseCircle, RefreshCw, SkipForward } from 'lucide-react';
 import { cn } from '@object-ui/components';
 import { apiBase } from './useFlowNodePalette';
+/**
+ * Normalize a run/step error to its human-readable message. The engine emits a
+ * run-level `error` as a plain string but a step-level error as `{code,message}`
+ * — reading `.message` off the string case silently dropped the run failure
+ * reason (the whole point of the Runs panel for a failed run), so accept both.
+ */
+export function errorText(e) {
+    if (!e)
+        return undefined;
+    if (typeof e === 'string')
+        return e || undefined;
+    const m = e.message;
+    return typeof m === 'string' && m ? m : undefined;
+}
 /** Fetch a flow's run history. Exposed for tests. */
 export async function fetchFlowRuns(flowName, signal) {
     try {
@@ -60,14 +74,16 @@ function StepRow({ step }) {
         : step.status === 'failure'
             ? 'text-rose-600 dark:text-rose-400'
             : 'text-muted-foreground';
-    return (_jsxs("li", { className: "flex items-baseline gap-1.5 py-0.5", children: [_jsx("span", { className: cn('shrink-0 text-[9px] font-semibold uppercase', cls), children: step.status }), _jsx("span", { className: "truncate font-mono text-[10px]", title: step.nodeId, children: step.nodeId }), step.nodeType && _jsx("span", { className: "shrink-0 text-[9px] uppercase text-muted-foreground", children: step.nodeType }), fmtDuration(step.durationMs) && (_jsx("span", { className: "ml-auto shrink-0 text-[9px] text-muted-foreground", children: fmtDuration(step.durationMs) })), step.error?.message && (_jsx("span", { className: "min-w-0 truncate text-[9px] text-rose-600", title: step.error.message, children: step.error.message }))] }));
+    const stepErr = errorText(step.error);
+    return (_jsxs("li", { className: "flex items-baseline gap-1.5 py-0.5", children: [_jsx("span", { className: cn('shrink-0 text-[9px] font-semibold uppercase', cls), children: step.status }), _jsx("span", { className: "truncate font-mono text-[10px]", title: step.nodeId, children: step.nodeId }), step.nodeType && _jsx("span", { className: "shrink-0 text-[9px] uppercase text-muted-foreground", children: step.nodeType }), fmtDuration(step.durationMs) && (_jsx("span", { className: "ml-auto shrink-0 text-[9px] text-muted-foreground", children: fmtDuration(step.durationMs) })), stepErr && (_jsx("span", { className: "min-w-0 truncate text-[9px] text-rose-600", title: stepErr, children: stepErr }))] }));
 }
 function RunRow({ run }) {
     const [open, setOpen] = React.useState(false);
     const meta = statusMeta(run.status);
     const Icon = meta.icon;
     const steps = Array.isArray(run.steps) ? run.steps : [];
-    return (_jsxs("li", { className: "rounded border bg-background", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-1.5 p-1.5 text-left", "aria-expanded": open, children: [open ? (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground" })), _jsx(Icon, { className: cn('h-3.5 w-3.5 shrink-0', meta.cls, run.status === 'running' && 'animate-spin') }), _jsx("span", { className: cn('shrink-0 text-[10px] font-semibold', meta.cls), children: meta.label }), _jsx("span", { className: "min-w-0 truncate text-[10px] text-muted-foreground", title: run.id, children: fmtTime(run.startedAt) }), fmtDuration(run.durationMs) && (_jsx("span", { className: "ml-auto shrink-0 text-[10px] text-muted-foreground", children: fmtDuration(run.durationMs) }))] }), open && (_jsxs("div", { className: "border-t px-2 py-1.5", children: [_jsxs("div", { className: "pb-1 font-mono text-[9px] text-muted-foreground", title: run.id, children: ["run ", run.id, run.trigger?.type && ` · trigger ${run.trigger.type}`] }), run.error?.message && (_jsx("div", { className: "pb-1 text-[10px] text-rose-600", children: run.error.message })), steps.length === 0 ? (_jsx("div", { className: "text-[10px] italic text-muted-foreground", children: "No step log recorded." })) : (_jsx("ul", { className: "divide-y divide-border/50", children: steps.map((s, i) => (_jsx(StepRow, { step: s }, `${s.nodeId}#${i}`))) }))] }))] }));
+    const runErr = errorText(run.error);
+    return (_jsxs("li", { className: "rounded border bg-background", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "flex w-full items-center gap-1.5 p-1.5 text-left", "aria-expanded": open, children: [open ? (_jsx(ChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground" })), _jsx(Icon, { className: cn('h-3.5 w-3.5 shrink-0', meta.cls, run.status === 'running' && 'animate-spin') }), _jsx("span", { className: cn('shrink-0 text-[10px] font-semibold', meta.cls), children: meta.label }), _jsx("span", { className: "min-w-0 truncate text-[10px] text-muted-foreground", title: run.id, children: fmtTime(run.startedAt) }), fmtDuration(run.durationMs) && (_jsx("span", { className: "ml-auto shrink-0 text-[10px] text-muted-foreground", children: fmtDuration(run.durationMs) }))] }), open && (_jsxs("div", { className: "border-t px-2 py-1.5", children: [_jsxs("div", { className: "pb-1 font-mono text-[9px] text-muted-foreground", title: run.id, children: ["run ", run.id, run.trigger?.type && ` · trigger ${run.trigger.type}`] }), runErr && (_jsx("div", { className: "pb-1 text-[10px] text-rose-600", children: runErr })), steps.length === 0 ? (_jsx("div", { className: "text-[10px] italic text-muted-foreground", children: "No step log recorded." })) : (_jsx("ul", { className: "divide-y divide-border/50", children: steps.map((s, i) => (_jsx(StepRow, { step: s }, `${s.nodeId}#${i}`))) }))] }))] }));
 }
 export function FlowRunsPanel({ flowName }) {
     const [runs, setRuns] = React.useState([]);

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

@@ -1,15 +1,3 @@
-/**
- * OutlineStrip — clickable chip strip that lets users select
- * sub-elements inside a preview whose main canvas renders through a
- * sealed external renderer (SchemaRenderer, ReportRenderer, …) and
- * therefore can't intercept clicks directly.
- *
- * The strip sits above the canvas. Each chip emits a selection on
- * click; the currently-selected one gets a ring. Empty list collapses
- * the strip entirely so the canvas takes the full preview height
- * outside design mode.
- */
-import * as React from 'react';
 export interface OutlineEntry {
     /** Selection id to emit. */
     id: string;
@@ -29,4 +17,4 @@ export declare function OutlineStrip({ title, entries, selectedId, onSelect, onA
     onAdd?: () => void;
     /** Tooltip / aria-label for the Add chip. Defaults to "Add". */
     addLabel?: string;
-}): React.JSX.Element | null;
+}): import("react").JSX.Element | null;

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

@@ -1,4 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * OutlineStrip — clickable chip strip that lets users select
+ * sub-elements inside a preview whose main canvas renders through a
+ * sealed external renderer (SchemaRenderer, ReportRenderer, …) and
+ * therefore can't intercept clicks directly.
+ *
+ * The strip sits above the canvas. Each chip emits a selection on
+ * click; the currently-selected one gets a ring. Empty list collapses
+ * the strip entirely so the canvas takes the full preview height
+ * outside design mode.
+ */
 import { Plus } from 'lucide-react';
 import { cn } from '@object-ui/components';
 export function OutlineStrip({ title, entries, selectedId, onSelect, onAdd, addLabel, }) {

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

@@ -14,6 +14,7 @@ import { buildExpandFields } from '@object-ui/core';
 import { buildDefaultPageSchema } from '@object-ui/plugin-detail';
 import { PreviewShell, PreviewErrorBoundary, PreviewMessage } from './PreviewShell';
 import { OutlineStrip } from './OutlineStrip';
+import { SourcePageEditor } from './SourcePageEditor';
 import { PageBlockCanvas } from './PageBlockCanvas';
 import { InterfaceListPage } from '../../InterfaceListPage';
 import { t as tr } from '../i18n';
@@ -205,6 +206,14 @@ export function PagePreview({ draft, editing, selection, onSelectionChange, onPa
     if (isInterfacePage) {
         return (_jsx(PreviewShell, { hint: "page \u00B7 interface", children: _jsx(PreviewErrorBoundary, { fallbackHint: "The interface page references a source object/view that isn't available.", children: _jsx(InterfaceListPage, { page: draft, onConfigChange: canEdit ? (patch) => onPatch({ interfaceConfig: { ...((draft.interfaceConfig) || {}), ...patch } }) : undefined }) }) }));
     }
+    // Source page (ADR-0080/0081) → `kind:'html'`/`'react'` pages are a `source`
+    // string, not a region tree. The design canvas does not apply (and would
+    // choke on the absent regions/children), so edit the source directly with a
+    // live preview. This is the fix for the editor crashing on these pages.
+    const pageKind = draft.kind;
+    if (pageKind === 'react' || pageKind === 'html') {
+        return (_jsx(SourcePageEditor, { draft: draft, onPatch: canEdit ? onPatch : undefined, readOnly: !canEdit }));
+    }
     // Empty draft → no preview; but if we're in design mode show the
     // canvas so users can author from scratch.
     if (!schema || Object.keys(schema).length <= 1) {

package/dist/views/metadata-admin/previews/SourcePageEditor.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.
+ *
+ * SourcePageEditor — the Studio editor surface for `kind:'html'` and
+ * `kind:'react'` pages (ADR-0080/0081). These pages ARE a `source` string
+ * (JSX/HTML or real React), not a region tree — so the structured design
+ * canvas does not apply (and would choke on the missing `regions`/`children`).
+ * Instead we present a code editor for the `source` field beside a live preview
+ * rendered through the runtime SchemaRenderer. Edits patch `draft.source`.
+ *
+ * Mirrors JsonSourceEditor's Monaco + textarea-fallback + theme handling, but
+ * edits ONE field (the source) instead of the whole-record JSON, with a
+ * JSX/TSX language mode.
+ */
+import * as React from 'react';
+export interface SourcePageEditorProps {
+    draft: Record<string, unknown>;
+    /** Patch the draft; undefined in read-only mode. */
+    onPatch?: (patch: Record<string, unknown>) => void;
+    readOnly?: boolean;
+    fallbackDelayMs?: number;
+}
+export declare function SourcePageEditor({ draft, onPatch, readOnly, fallbackDelayMs }: SourcePageEditorProps): React.JSX.Element;
+export default SourcePageEditor;

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

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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.
+ *
+ * SourcePageEditor — the Studio editor surface for `kind:'html'` and
+ * `kind:'react'` pages (ADR-0080/0081). These pages ARE a `source` string
+ * (JSX/HTML or real React), not a region tree — so the structured design
+ * canvas does not apply (and would choke on the missing `regions`/`children`).
+ * Instead we present a code editor for the `source` field beside a live preview
+ * rendered through the runtime SchemaRenderer. Edits patch `draft.source`.
+ *
+ * Mirrors JsonSourceEditor's Monaco + textarea-fallback + theme handling, but
+ * edits ONE field (the source) instead of the whole-record JSON, with a
+ * JSX/TSX language mode.
+ */
+import * as React from 'react';
+import { Skeleton } from '@object-ui/components';
+import { SchemaRenderer } from '@object-ui/react';
+import { PreviewShell, PreviewErrorBoundary } from './PreviewShell';
+const LazyMonaco = React.lazy(async () => {
+    const mod = await import('@monaco-editor/react');
+    return { default: mod.default };
+});
+export function SourcePageEditor({ draft, onPatch, readOnly, fallbackDelayMs = 4000 }) {
+    const kind = draft.kind === 'react' ? 'react' : 'html';
+    const source = typeof draft.source === 'string' ? draft.source : '';
+    const [text, setText] = React.useState(source);
+    const lastCommittedRef = React.useRef(source);
+    const containerRef = React.useRef(null);
+    // Sync from upstream (Reset / inspector edits) without clobbering keystrokes.
+    React.useEffect(() => {
+        if (source !== lastCommittedRef.current) {
+            setText(source);
+            lastCommittedRef.current = source;
+        }
+    }, [source]);
+    // Monaco-unavailable fallback (headless / CSP) → plain textarea.
+    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]);
+    const [theme, setTheme] = React.useState(() => typeof document !== 'undefined' && document.documentElement.classList.contains('dark') ? 'vs-dark' : 'light');
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const update = () => setTheme(root.classList.contains('dark') ? 'vs-dark' : 'light');
+        const obs = new MutationObserver(update);
+        obs.observe(root, { attributes: true, attributeFilter: ['class'] });
+        return () => obs.disconnect();
+    }, []);
+    const handleChange = (next) => {
+        const v = next ?? '';
+        setText(v);
+        lastCommittedRef.current = v;
+        onPatch?.({ source: v });
+    };
+    const previewSchema = React.useMemo(() => ({ ...draft, type: draft.type ?? 'page' }), [draft]);
+    return (_jsx(PreviewShell, { hint: `page · ${kind} source`, children: _jsxs("div", { className: "grid h-full grid-cols-1 divide-y divide-border lg:grid-cols-2 lg:divide-x lg:divide-y-0", children: [_jsx("div", { ref: containerRef, className: "h-full min-h-[260px] overflow-hidden bg-background", children: monacoUnavailable ? (_jsx("textarea", { value: text, onChange: (e) => handleChange(e.target.value), readOnly: readOnly, spellCheck: false, "aria-label": "Page source", className: "h-full w-full resize-none bg-background p-3 font-mono text-xs leading-relaxed outline-none" })) : (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { className: "h-full w-full" }), children: _jsx(LazyMonaco, { value: text, language: "typescript", path: kind === 'react' ? 'page.tsx' : 'page.html.tsx', theme: theme, onChange: handleChange, options: {
+                                readOnly,
+                                minimap: { enabled: false },
+                                fontSize: 12,
+                                lineNumbers: 'on',
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                folding: true,
+                                wordWrap: 'on',
+                                tabSize: 2,
+                                scrollbar: { verticalScrollbarSize: 10, horizontalScrollbarSize: 10 },
+                            } }) })) }), _jsx("div", { className: "h-full min-h-[260px] overflow-auto bg-muted/20", children: _jsx(PreviewErrorBoundary, { fallbackHint: "The page source threw while rendering \u2014 fix the code on the left.", children: _jsx(SchemaRenderer, { schema: previewSchema }) }) })] }) }));
+}
+export default SourcePageEditor;

package/dist/views/studio-design/BuilderLanding.d.ts

@@ -0,0 +1,15 @@
+/**
+ * BuilderLanding — the application builder's front door.
+ *
+ * The journey from login: Home → Studio app → 「应用构建」 (this page, embedded
+ * in the app chrome via the `studio:builder` component ref) → pick or create a
+ * writable base package → the full-screen pillar builder
+ * (`/studio/:packageId/:tab`). Also served standalone at bare `/studio` so the
+ * builder is bookmarkable.
+ *
+ * Writable bases (where authoring happens) lead; read-only code packages are
+ * listed secondary for browsing. Writability is the shared display heuristic
+ * from packages-io — the ADR-0070 D4 gate stays the server-side authority.
+ */
+import * as React from 'react';
+export declare function BuilderLanding(): React.ReactElement;