@object-ui/app-shell 11.2.0 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @object-ui/app-shell — Changelog
 
+## 11.3.0
+
+### Patch Changes
+
+- ca4a795: fix(app-shell): restore admin design surface gated on the removed `user.role='admin'` overwrite
+
+  ADR-0068 (a3a5abff8) stopped the server `customSession` from overwriting
+  `user.role = 'admin'` for workspace owners/admins — canonical roles now arrive
+  in `user.roles[]` (`org_owner` / `org_admin`) with `user.isPlatformAdmin` as a
+  derived alias, and `useIsWorkspaceAdmin()` was introduced to read them. Four
+  runtime views were missed in that migration and still gated their admin design
+  tools on the now-defunct `user?.role === 'admin'`, so workspace owners/admins
+  silently lost:
+
+  - **ObjectView** — the list "+ New view" button plus rename/delete/pin/
+    set-default/config/manage-views and the view config panel.
+  - **PageView / DashboardView / ReportView** — the inline "Edit"/config entry
+    points for the shared page / dashboard / report definitions.
+
+  All four now call `useIsWorkspaceAdmin()` (same helper already adopted by
+  AppSidebar, UnifiedSidebar, HomePage, Marketplace…). No behavior change for
+  genuine platform admins; restores the surface for org owners/admins.
+
+- Updated dependencies [d88c8ec]
+- Updated dependencies [b7237bb]
+- Updated dependencies [d23d6eb]
+  - @object-ui/components@11.3.0
+  - @object-ui/i18n@11.3.0
+  - @object-ui/core@11.3.0
+  - @object-ui/fields@11.3.0
+  - @object-ui/layout@11.3.0
+  - @object-ui/plugin-editor@11.3.0
+  - @object-ui/react@11.3.0
+  - @object-ui/data-objectstack@11.3.0
+  - @object-ui/types@11.3.0
+  - @object-ui/auth@11.3.0
+  - @object-ui/permissions@11.3.0
+  - @object-ui/collaboration@11.3.0
+  - @object-ui/providers@11.3.0
+
 ## 11.2.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -61,6 +61,7 @@ import './console/marketplace/InstalledListWidget';
 import './console/home/CloudOnboardingNext';
 export { MetadataDirectoryPage, MetadataResourceRouter, MetadataResourceListPage, MetadataResourceEditPage, MetadataResourceHistoryPage, MetadataDiagnosticsPage, MetadataQuickFind, MetadataPageShell, SchemaForm, LayeredDiff, registerMetadataResource, getMetadataResource, listMetadataResources, resolveResourceConfig, useMetadataClient, useMetadataTypes, useTypesIndex, useGlobalDiagnostics, matchesQuery, registerMetadataPreview, getMetadataPreview, listMetadataPreviewTypes, registerMetadataInspector, getMetadataInspector, listMetadataInspectorTypes, } from './views/metadata-admin';
 export type { MetadataResourceConfig, MetadataDomain, RichMetadataTypeEntry, MetadataPreview, MetadataPreviewProps, MetadataSelection, MetadataInspector, MetadataInspectorProps, } from './views/metadata-admin';
+export { StudioDesignSurface, type StudioDesignSurfaceProps, } from './views/studio-design/StudioDesignSurface';
 export { assistantBus, useAssistant, useRegisterAssistantEditor, requestAssistantOpen, } from './assistant/assistantBus';
 export type { AssistantSnapshot, AssistantEditorContext, AssistantEditorField, } from './assistant/assistantBus';
 export { RemediationOverlay } from './console/RemediationOverlay';

package/dist/index.js

@@ -79,6 +79,9 @@ import './console/home/CloudOnboardingNext';
 // list / edit / create components, and host apps can compose the
 // page primitives directly when needed.
 export { MetadataDirectoryPage, MetadataResourceRouter, MetadataResourceListPage, MetadataResourceEditPage, MetadataResourceHistoryPage, MetadataDiagnosticsPage, MetadataQuickFind, MetadataPageShell, SchemaForm, LayeredDiff, registerMetadataResource, getMetadataResource, listMetadataResources, resolveResourceConfig, useMetadataClient, useMetadataTypes, useTypesIndex, useGlobalDiagnostics, matchesQuery, registerMetadataPreview, getMetadataPreview, listMetadataPreviewTypes, registerMetadataInspector, getMetadataInspector, listMetadataInspectorTypes, } from './views/metadata-admin';
+// Studio WYSIWYG design surface (ADR-0080) — the open-source design surface.
+// The left AI copilot is an injected `aiSlot`; OSS renders three zones.
+export { StudioDesignSurface, } from './views/studio-design/StudioDesignSurface';
 // AI assistant bus — connects the metadata designers to the global chat.
 export { assistantBus, useAssistant, useRegisterAssistantEditor, requestAssistantOpen, } from './assistant/assistantBus';
 export { RemediationOverlay } from './console/RemediationOverlay';

package/dist/utils/index.d.ts

@@ -1,6 +1,8 @@
 /**
  * Utility functions for ObjectStack Console
  */
+export { getRecordDisplayName, deriveTitleField, isTitleEligibleField, formatTitleTemplate as formatRecordTitle, } from '@object-ui/core';
+export type { RecordDisplayNameOptions } from '@object-ui/core';
 export { resolveRecordFormTarget, resolveFormViewLayout, } from './recordFormNavigation';
 export type { ObjectDefinitionForNavigation, RecordFormTarget, ObjectDefinitionForFormView, FormViewDefinition, FormViewModalLayout, } from './recordFormNavigation';
 export { deriveRelatedLists } from './deriveRelatedLists';
@@ -23,27 +25,3 @@ export declare function resolveI18nLabel(label: string | {
  * Preferred over CSS `capitalize` for i18n compatibility.
  */
 export declare function capitalizeFirst(str: string): string;
-/**
- * Format a record title using the titleFormat pattern.
- *
- * Accepts either a legacy string template or an Expression envelope
- * (`{ dialect: 'template', source: string }`) emitted by `@objectstack/spec`'s
- * normalized templates. The placeholder syntax (`{field}`) is identical in both
- * shapes; only the wrapping object is new.
- *
- * Empty placeholders (missing or null/empty fields) are stripped along with
- * any orphan separator they leave behind, so a template like
- *   "{full_name} - {company}"
- * evaluated against `{ company: "Acme" }` resolves to `"Acme"` rather than
- * `" - Acme"`. Returns an empty string when no placeholder resolved.
- */
-export declare function formatRecordTitle(titleFormat: string | {
-    source?: string;
-} | undefined, record: any): string;
-/**
- * Get display name for a record using titleFormat or fallback
- * @param objectDef Object definition with optional titleFormat
- * @param record The record data
- * @returns Display name for the record
- */
-export declare function getRecordDisplayName(objectDef: any, record: any): string;

package/dist/utils/index.js

@@ -1,6 +1,14 @@
 /**
  * Utility functions for ObjectStack Console
  */
+// Re-export the unified record display-name resolver (ADR-0079) so existing
+// importers of `@object-ui/app-shell`'s `getRecordDisplayName` /
+// `formatRecordTitle` keep working unchanged. The implementation now lives in
+// `@object-ui/core` (pure util, shared by every view plugin and field widget).
+export { getRecordDisplayName, deriveTitleField, isTitleEligibleField, 
+// `formatTitleTemplate` is the new canonical name; alias it to the legacy
+// `formatRecordTitle` export this module has always provided.
+formatTitleTemplate as formatRecordTitle, } from '@object-ui/core';
 export { resolveRecordFormTarget, resolveFormViewLayout, } from './recordFormNavigation';
 export { deriveRelatedLists } from './deriveRelatedLists';
 export { preferLocal } from './preferLocal';
@@ -32,104 +40,9 @@ export function capitalizeFirst(str) {
         return str;
     return str.charAt(0).toUpperCase() + str.slice(1);
 }
-// Sentinel used to mark empty-placeholder positions inside formatRecordTitle
-// so adjacent separators can be stripped in a second pass.
-const EMPTY_TOKEN = '\u0000';
-// Separator characters commonly placed between {fields} in titleFormat patterns
-// (hyphen, em/en dashes, pipes, slashes, middle dot, comma, colon).
-const SEPARATOR_CLASS = '[-\\u2013\\u2014|/·,:]';
-/**
- * Format a record title using the titleFormat pattern.
- *
- * Accepts either a legacy string template or an Expression envelope
- * (`{ dialect: 'template', source: string }`) emitted by `@objectstack/spec`'s
- * normalized templates. The placeholder syntax (`{field}`) is identical in both
- * shapes; only the wrapping object is new.
- *
- * Empty placeholders (missing or null/empty fields) are stripped along with
- * any orphan separator they leave behind, so a template like
- *   "{full_name} - {company}"
- * evaluated against `{ company: "Acme" }` resolves to `"Acme"` rather than
- * `" - Acme"`. Returns an empty string when no placeholder resolved.
- */
-export function formatRecordTitle(titleFormat, record) {
-    // Normalize Expression envelope ({ dialect, source }) → raw template string.
-    const template = typeof titleFormat === 'string'
-        ? titleFormat
-        : (titleFormat && typeof titleFormat === 'object' && typeof titleFormat.source === 'string')
-            ? titleFormat.source
-            : undefined;
-    if (!template || !record) {
-        return record?.id || record?._id || 'Record';
-    }
-    let anyResolved = false;
-    let out = template.replace(/\{([^{}]+)\}/g, (_match, fieldName) => {
-        // Support dotted paths (e.g. `{account.name}`) for $expanded lookups.
-        const parts = String(fieldName).trim().split('.');
-        let value = record;
-        for (const p of parts) {
-            if (value == null)
-                break;
-            value = value[p];
-        }
-        // Auto-extract display name from expanded reference objects, with a
-        // Salesforce-style fallback chain.
-        if (value && typeof value === 'object') {
-            const o = value;
-            let display = o.name ?? o.full_name ?? o.display_name ?? o.label ?? o.title ?? o.subject ?? null;
-            if (display == null || (typeof display === 'string' && !display.trim())) {
-                const composite = [o.salutation, o.first_name, o.last_name]
-                    .filter((p) => typeof p === 'string' && p.trim())
-                    .map((p) => p.trim())
-                    .join(' ');
-                if (composite)
-                    display = composite;
-                else if (typeof o.email === 'string' && o.email.trim())
-                    display = o.email.trim();
-                else
-                    display = null;
-            }
-            value = display;
-        }
-        if (value === null || value === undefined || value === '') {
-            return EMPTY_TOKEN;
-        }
-        anyResolved = true;
-        return String(value);
-    });
-    if (!anyResolved)
-        return '';
-    // Drop separators on either side of an empty token, then any leftover
-    // tokens, then collapse runs of whitespace.
-    const sepBefore = new RegExp(`\\s*${SEPARATOR_CLASS}\\s*${EMPTY_TOKEN}`, 'g');
-    const sepAfter = new RegExp(`${EMPTY_TOKEN}\\s*${SEPARATOR_CLASS}\\s*`, 'g');
-    out = out
-        .replace(sepBefore, '')
-        .replace(sepAfter, '')
-        .replace(new RegExp(EMPTY_TOKEN, 'g'), '')
-        .replace(/\s+/g, ' ')
-        .trim();
-    return out;
-}
-/**
- * Get display name for a record using titleFormat or fallback
- * @param objectDef Object definition with optional titleFormat
- * @param record The record data
- * @returns Display name for the record
- */
-export function getRecordDisplayName(objectDef, record) {
-    if (objectDef?.titleFormat) {
-        const formatted = formatRecordTitle(objectDef.titleFormat, record);
-        if (formatted)
-            return formatted;
-    }
-    return (record?.name ||
-        record?.full_name ||
-        record?.fullName ||
-        record?.title ||
-        record?.label ||
-        record?.subject ||
-        record?.id ||
-        record?._id ||
-        'Untitled');
-}
+// NOTE (ADR-0079): `formatRecordTitle` (now canonically `formatTitleTemplate`)
+// and `getRecordDisplayName` moved to `@object-ui/core` and are re-exported
+// from the top of this module. The previous local copies — a titleFormat-only
+// resolver that fell back to a hard-coded `name`/`title`/… list and bottomed
+// out at the literal 'Untitled' — are gone, so every surface now also honors
+// the object's `displayNameField` + type-aware derivation + `Record #<id>`.

package/dist/views/DashboardView.js

@@ -13,7 +13,7 @@ import { DrillNavigationProvider } from '@object-ui/react';
 import { useOpenRecordList } from './useOpenRecordList';
 import { ModalForm } from '@object-ui/plugin-form';
 import { DashboardConfigPanel } from './DashboardConfigPanel';
-import { useAuth } from '@object-ui/auth';
+import { useIsWorkspaceAdmin } from '@object-ui/auth';
 import { toast } from 'sonner';
 import { Empty, EmptyTitle, EmptyDescription, Button, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, } from '@object-ui/components';
 import { LayoutDashboard, Pencil, TrendingUp, BarChart3, LineChart, PieChart, Table2, LayoutGrid, Plus, } from 'lucide-react';
@@ -77,8 +77,7 @@ export function DashboardView({ dataSource }) {
     const { dashboardLabel, dashboardDescription } = useObjectLabel();
     // Editing a dashboard mutates the SHARED definition, so it is an admin-only
     // quick-edit affordance (mirrors ObjectView's view-config gate).
-    const { user } = useAuth();
-    const isAdmin = user?.role === 'admin';
+    const isAdmin = useIsWorkspaceAdmin();
     const [isLoading, setIsLoading] = useState(true);
     const [configPanelOpen, setConfigPanelOpen] = useState(false);
     const [selectedWidgetId, setSelectedWidgetId] = useState(null);

package/dist/views/InterfaceListPage.js

@@ -319,7 +319,10 @@ export function InterfaceListPage({ page, className, onConfigChange, reserveEdit
             showGroup: false,
             showColor: false,
             allowExport: false,
-            inlineEdit: false,
+            // Inline record editing is a page-authored property: a list block opts in
+            // via `userActions.editInline` (default off). When on, clicking a cell
+            // edits it with the dedicated field widgets, same as the object views.
+            inlineEdit: userActions.editInline === true,
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [objectDefName, viewDefJson, cfg]);

package/dist/views/ObjectView.js

@@ -37,7 +37,7 @@ import { resolveManagedByEmptyState } from '../utils/managedByEmptyState';
 import { useObjectActions } from '../hooks/useObjectActions';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { usePermissions } from '@object-ui/permissions';
-import { useAuth } from '@object-ui/auth';
+import { useAuth, useIsWorkspaceAdmin } from '@object-ui/auth';
 import { useRealtimeSubscription, useConflictResolution } from '@object-ui/collaboration';
 import { ActionProvider, useNavigationOverlay, SchemaRenderer } from '@object-ui/react';
 import { toast } from 'sonner';
@@ -253,7 +253,7 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }) {
     const [recordCount, setRecordCount] = useState(undefined);
     // Admin users automatically get design tools (no toggle needed)
     const { user, activeOrganization } = useAuth();
-    const isAdmin = user?.role === 'admin';
+    const isAdmin = useIsWorkspaceAdmin();
     const { can } = usePermissions();
     // Get Object Definition. The outer ObjectView wrapper already guards the
     // missing-object case, so this always resolves while this component is
@@ -1302,6 +1302,8 @@ function ObjectViewInner({ dataSource, objects, onEdit, externalRefreshKey }) {
                 persistViewPatch(viewDef.id, viewDef, { filter });
             }, onHiddenFieldsChange: (hidden) => {
                 persistViewPatch(viewDef.id, viewDef, { hiddenFields: hidden });
+            }, onInlineEditChange: (next) => {
+                persistViewPatch(viewDef.id, viewDef, { inlineEdit: next });
             }, onColumnStateChange: (state) => {
                 persistViewPatch(viewDef.id, viewDef, { columnState: state });
             }, userFilterSelections: initialUfSelections, onUserFilterSelectionsChange: handleUserFilterSelectionsChange, dataSource: ds }, key));

package/dist/views/PageView.js

@@ -15,7 +15,7 @@ import { SchemaRenderer, useAdapter } from '@object-ui/react';
 import { Empty, EmptyTitle, EmptyDescription, Spinner } from '@object-ui/components';
 import { FileText, Pencil } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/i18n';
-import { useAuth } from '@object-ui/auth';
+import { useIsWorkspaceAdmin } from '@object-ui/auth';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useExpressionContext } from '../providers/ExpressionProvider';
@@ -31,8 +31,7 @@ export function PageView() {
     const location = useLocation();
     // Editing a page mutates the shared metadata definition, so the entry point
     // is admin-only (mirrors the view/report/dashboard runtime editors).
-    const { user } = useAuth();
-    const isAdmin = user?.role === 'admin';
+    const isAdmin = useIsWorkspaceAdmin();
     const { pages, objects, getTypeStatus } = useMetadata();
     // ADR-0048 Phase 2 — prefer the page owned by the current app's package so
     // two packages shipping `page/<same-name>` each resolve within their own

package/dist/views/ReportView.js

@@ -16,7 +16,7 @@ import { preferLocal } from '../utils/preferLocal';
 import { useAdapter } from '../providers/AdapterProvider';
 import { useMetadataClient } from './metadata-admin/useMetadata';
 import { persistRuntimeMetadata } from './runtime-metadata-persistence';
-import { useAuth } from '@object-ui/auth';
+import { useIsWorkspaceAdmin } from '@object-ui/auth';
 import { DrillDownDrawer } from '@object-ui/plugin-dashboard';
 import { DrillNavigationProvider } from '@object-ui/react';
 import { useOpenRecordList } from './useOpenRecordList';
@@ -40,8 +40,7 @@ export function ReportView({ dataSource }) {
     const metadataClient = useMetadataClient();
     // Editing a report mutates the SHARED definition, so it is an admin-only
     // quick-edit affordance (mirrors ObjectView's view-config gate).
-    const { user } = useAuth();
-    const isAdmin = user?.role === 'admin';
+    const isAdmin = useIsWorkspaceAdmin();
     const [configPanelOpen, setConfigPanelOpen] = useState(false);
     // Version counter — incremented on save to refresh the stable config reference
     const [configVersion, setConfigVersion] = useState(0);

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

@@ -6,7 +6,12 @@
 // Types still falling through to server-only validation:
 //   - `validation`: not a top-level metadata file; lives inside object. (DataValidationRuleSchema
 //     exists but has empty shape, so it's not useful for client validation.)
-//   - `profile`: spec ships no top-level ProfileSchema (7.1 confirmed).
+//   - `policy`: spec 11.2.0 (PR #2078) removed the generic `PolicySchema` (the org-wide
+//     password/network/session/audit policy) from `@objectstack/spec/security`, and the
+//     canonical metadata-type→schema registry (spec kernel/metadata-type-schemas.ts) has
+//     no `policy` entry — so there is no client schema. `RowLevelSecurityPolicySchema`
+//     remains on /security but is a different shape (a per-object RLS rule), NOT the
+//     `policy` metadata file, so it must not be substituted.
 //   - `trigger`: no standalone TriggerSchema export at runtime (only
 //     ConnectorTriggerSchema / WebhookEventSchema variants).
 //   - `sharing_rule`: SharingRuleSchema is declared but has empty shape — server-only.
@@ -52,7 +57,8 @@ const LOADERS = {
     // packages/spec/src/kernel/metadata-type-schemas.ts for the canonical mapping.
     permission: async () => (await import('@objectstack/spec/security')).PermissionSetSchema,
     profile: async () => (await import('@objectstack/spec/security')).PermissionSetSchema,
-    policy: async () => (await import('@objectstack/spec/security')).PolicySchema,
+    // `policy` intentionally omitted — spec 11.2.0 dropped `PolicySchema` and the metadata-type
+    // registry has no `policy` schema; drafts fall through to server-side validation (see top).
     // identity
     role: async () => (await import('@objectstack/spec/identity')).RoleSchema,
     // api

package/dist/views/metadata-admin/color-variant-field.d.ts

@@ -1,14 +1,3 @@
-/**
- * Shared color-variant swatch picker.
- *
- * Metadata color fields (`colorVariant` on metrics / dashboard widgets, badge
- * tones, …) are a fixed SEMANTIC palette, not arbitrary hex. A row of colored
- * swatches is far more scannable than a text dropdown — the admin sees the
- * actual color, like Linear/Notion label pickers. Reused by the generic
- * SchemaForm `color-picker` widget and the curated inspectors so every color
- * field looks and behaves the same.
- */
-import * as React from 'react';
 export interface ColorVariant {
     value: string;
     label: string;
@@ -27,4 +16,4 @@ export declare function ColorVariantPicker({ value, onChange, disabled, options
         value: string;
         label?: string;
     }>;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/views/metadata-admin/color-variant-field.js

@@ -1,4 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Shared color-variant swatch picker.
+ *
+ * Metadata color fields (`colorVariant` on metrics / dashboard widgets, badge
+ * tones, …) are a fixed SEMANTIC palette, not arbitrary hex. A row of colored
+ * swatches is far more scannable than a text dropdown — the admin sees the
+ * actual color, like Linear/Notion label pickers. Reused by the generic
+ * SchemaForm `color-picker` widget and the curated inspectors so every color
+ * field looks and behaves the same.
+ */
 import { cn } from '@object-ui/components';
 /** Canonical semantic palette (mirrors the renderer's colorVariant tokens). */
 export const COLOR_VARIANTS = [

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/StudioDesignSurface.d.ts

@@ -0,0 +1,20 @@
+/**
+ * StudioDesignSurface — the open-source WYSIWYG design surface (ADR-0080).
+ *
+ * Routed as /studio/:packageId/{data|automations|interfaces} — three pillars,
+ * each composed AROUND existing renderers (no new editor code):
+ *   - Interfaces: the real App navigation tree → live canvas (getMetadataPreview)
+ *     + inspector (getMetadataInspector), edits persisting via draft → publish.
+ *   - Data: the package's objects → fields + record grid.
+ *   - Automations: flows → FlowPreview (default OFF / review-then-enable).
+ *
+ * Open-core boundary: the left AI copilot is NOT part of the open-source
+ * surface — it is an injected slot (`aiSlot`) the cloud edition fills.
+ */
+import * as React from 'react';
+export interface StudioDesignSurfaceProps {
+    /** Open-core slot — the cloud edition injects its AI copilot panel here. */
+    aiSlot?: React.ReactNode;
+}
+export declare function StudioDesignSurface({ aiSlot }: StudioDesignSurfaceProps): React.ReactElement;
+export default StudioDesignSurface;