@object-ui/app-shell 6.1.0 → 6.2.1

package/dist/services/builtinComponents.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * Built-in component registrations — Phase 3b + 3c.
+ *
+ * Side-effect module imported by `index.ts` to ensure the platform's
+ * own admin UI is registered with the ComponentRegistry before
+ * AppContent mounts the first `<Route path="component/...">`.
+ *
+ * Plugins follow the same pattern: their package entry point imports
+ * a similar registration module, so `import '@object-ui/plugin-foo'`
+ * is enough to make the plugin's component refs reachable from app
+ * metadata.
+ *
+ * Phase 3c — also registers the new generic metadata admin engine and
+ * pre-wires specialised editors for `object` and `field` so admins
+ * still get the polished ObjectManager / FieldDesigner experience
+ * inside the unified Setup-app shell.
+ */
+import { lazy, Suspense } from 'react';
+import { registerAppComponent } from './componentRegistry';
+import { MetadataDirectoryPage, MetadataResourceRouter, registerMetadataResource, } from '../views/metadata-admin';
+import { PermissionMatrixEditPage } from '../views/metadata-admin/PermissionMatrixEditor';
+import { DesignerEditorBody } from '../views/metadata-admin/DesignerEditorWrapper';
+/* -------------------------------------------------------------------------- */
+/* 1) Top-level admin pages — bound to `metadata:directory` + `metadata:resource` */
+/* -------------------------------------------------------------------------- */
+registerAppComponent({
+    ref: 'metadata:directory',
+    label: 'All Metadata Types',
+    source: '@object-ui/app-shell',
+    component: MetadataDirectoryPage,
+});
+registerAppComponent({
+    ref: 'metadata:resource',
+    label: 'Metadata Resource',
+    source: '@object-ui/app-shell',
+    // The router switches between list / new / edit / history based on
+    // the sub-path under `/component/metadata/resource/...`.
+    component: MetadataResourceRouter,
+});
+/* -------------------------------------------------------------------------- */
+/* 2) Specialised editors for flagship types — opt the generic engine        */
+/*    out for the types that already have polished bespoke surfaces.         */
+/*                                                                            */
+/*    Note: `object` and `field` intentionally use the generic engine so the */
+/*    Metadata Directory has a consistent list/edit experience across every  */
+/*    type (only `permission`, `view`, `dashboard`, `page` keep bespoke      */
+/*    editors below — those are visual designers, not list/form pages).      */
+/* -------------------------------------------------------------------------- */
+registerMetadataResource({
+    type: 'object',
+    label: 'Objects',
+    description: 'Domain entities — tables in the data model. Each object owns its fields, relationships, validations, and lifecycle hooks.',
+    domain: 'data',
+    searchableFields: ['name', 'label', 'description'],
+    listColumns: [
+        { key: 'name', label: 'Name', width: '25%' },
+        { key: 'label', label: 'Label', width: '25%' },
+        { key: 'description', label: 'Description' },
+    ],
+});
+registerMetadataResource({
+    type: 'field',
+    label: 'Fields',
+    description: 'Columns attached to objects — name, type, validation, and storage settings.',
+    domain: 'data',
+    searchableFields: ['name', 'label', 'object', 'type'],
+    listColumns: [
+        { key: 'name', label: 'Name', width: '25%' },
+        { key: 'object', label: 'Object', width: '20%' },
+        { key: 'type', label: 'Type', width: '15%' },
+        { key: 'label', label: 'Label' },
+    ],
+});
+/* -------------------------------------------------------------------------- */
+/* 3) Permission matrix editor — replaces the generic AutoForm for           */
+/*    `type=permission` with a Salesforce-style grid (Phase 3e).             */
+/* -------------------------------------------------------------------------- */
+registerMetadataResource({
+    type: 'permission',
+    label: 'Permission sets',
+    description: 'Object-level CRUD + VAMA + lifecycle permissions, and field-level R/W. Profiles are permission sets with isProfile=true.',
+    domain: 'security',
+    EditPage: PermissionMatrixEditPage,
+    searchableFields: ['name', 'label'],
+    listColumns: [
+        { key: 'name', label: 'Name', width: '30%' },
+        { key: 'label', label: 'Label', width: '30%' },
+        {
+            key: 'isProfile',
+            label: 'Type',
+            width: '15%',
+            render: (v) => (v ? 'Profile' : 'Permission set'),
+        },
+    ],
+});
+/* -------------------------------------------------------------------------- */
+/* 4) Bespoke designers wired through DesignerEditorWrapper (Phase 3d).      */
+/*    These types continue to use the generic AutoForm-style list and        */
+/*    history pages but swap the edit page for the existing visual designer. */
+/* -------------------------------------------------------------------------- */
+const ObjectViewConfigurator = lazy(() => import('@object-ui/plugin-designer').then((m) => ({ default: m.ObjectViewConfigurator })));
+const DashboardEditor = lazy(() => import('@object-ui/plugin-designer').then((m) => ({ default: m.DashboardEditor })));
+const PageCanvasEditor = lazy(() => import('@object-ui/plugin-designer').then((m) => ({ default: m.PageCanvasEditor })));
+function ViewEditPage(props) {
+    return (_jsx(DesignerEditorBody, { ...props, fromMetadata: (raw) => {
+            // Normalize backend view metadata into the shape ObjectViewConfigurator expects.
+            // Built-in views may omit `columns` or use legacy field names.
+            const base = raw && typeof raw === 'object' ? raw : {};
+            return {
+                viewType: base.viewType ?? base.type ?? 'grid',
+                columns: Array.isArray(base.columns) ? base.columns : [],
+                filters: Array.isArray(base.filters) ? base.filters : [],
+                sorts: Array.isArray(base.sorts) ? base.sorts : [],
+                pageSize: typeof base.pageSize === 'number' ? base.pageSize : 25,
+                ...base,
+            };
+        }, renderDesigner: (value, onChange, readOnly) => (_jsx(Suspense, { fallback: _jsx(DesignerFallback, { label: "view designer" }), children: _jsx(ObjectViewConfigurator, { config: value, onChange: (next) => onChange(next), readOnly: readOnly }) })) }));
+}
+function DashboardEditPage(props) {
+    return (_jsx(DesignerEditorBody, { ...props, renderDesigner: (value, onChange, readOnly) => (_jsx(Suspense, { fallback: _jsx(DesignerFallback, { label: "dashboard editor" }), children: _jsx(DashboardEditor, { schema: value, onChange: (next) => onChange(next), readOnly: readOnly }) })) }));
+}
+function PageEditPage(props) {
+    return (_jsx(DesignerEditorBody, { ...props, renderDesigner: (value, onChange, readOnly) => (_jsx(Suspense, { fallback: _jsx(DesignerFallback, { label: "page canvas" }), children: _jsx(PageCanvasEditor, { schema: value, onChange: (next) => onChange(next), readOnly: readOnly }) })) }));
+}
+function DesignerFallback({ label }) {
+    return (_jsxs("div", { className: "p-6 text-sm text-muted-foreground", children: ["Loading ", label, "\u2026"] }));
+}
+registerMetadataResource({
+    type: 'view',
+    label: 'Views',
+    description: 'Saved list / kanban / calendar / gantt configurations on top of an object.',
+    domain: 'ui',
+    DesignerTab: ViewEditPage,
+    designerTabLabel: 'View designer',
+    listColumns: [
+        { key: 'name', label: 'Name', width: '30%' },
+        { key: 'object', label: 'Object', width: '20%' },
+        { key: 'type', label: 'Type', width: '15%' },
+        { key: 'label', label: 'Label' },
+    ],
+});
+registerMetadataResource({
+    type: 'dashboard',
+    label: 'Dashboards',
+    description: 'Composed dashboards with charts, KPIs, and tables.',
+    domain: 'ui',
+    DesignerTab: DashboardEditPage,
+    designerTabLabel: 'Dashboard designer',
+    listColumns: [
+        { key: 'name', label: 'Name', width: '30%' },
+        { key: 'label', label: 'Label', width: '30%' },
+        { key: 'description', label: 'Description' },
+    ],
+});
+registerMetadataResource({
+    type: 'page',
+    label: 'Pages',
+    description: 'Visual page layouts authored in the Page Canvas editor.',
+    domain: 'ui',
+    DesignerTab: PageEditPage,
+    designerTabLabel: 'Page canvas',
+    listColumns: [
+        { key: 'name', label: 'Name', width: '30%' },
+        { key: 'label', label: 'Label', width: '30%' },
+        { key: 'route', label: 'Route' },
+    ],
+});

package/dist/services/componentRegistry.d.ts

@@ -0,0 +1,63 @@
+/**
+ * ComponentRegistry — central lookup for first-party UI components that
+ * are addressable from App metadata via the `component` nav-item type.
+ *
+ * Phase 3b: introduced so the framework's Setup app (and any other app)
+ * can declare admin/setup surfaces declaratively:
+ *
+ * ```ts
+ * { id: 'nav_objects', type: 'component',
+ *   componentRef: 'metadata:resource',
+ *   params: { type: 'object' } }
+ * ```
+ *
+ * Why a registry instead of importing the component directly in
+ * AppContent.tsx?
+ *   • Keeps the app-shell agnostic of which plugins are installed.
+ *   • Lets plugin packages (plugin-designer, plugin-permissions,
+ *     plugin-metadata-admin, …) register their pages without
+ *     forcing a coupled import graph.
+ *   • Provides a single place to render a friendly "component not
+ *     registered" empty state when a metadata entry references a
+ *     plugin that isn't loaded.
+ *
+ * Convention: registry keys are `namespace:name` (colon-separated).
+ * The namespace maps to a route segment so URLs stay clean:
+ *   `metadata:resource` → `/component/metadata/resource`
+ * Params from the nav metadata are serialised as query string.
+ */
+import type { ComponentType } from 'react';
+export type AppComponentRegistryEntry = {
+    /** Registry key, e.g. `metadata:resource`. */
+    ref: string;
+    /** Human-readable label for diagnostics / "Component not found" empty state. */
+    label?: string;
+    /** Owning plugin / package id, for diagnostics. */
+    source?: string;
+    /** The React component. Receives the merged params (nav `params` + URL query) as props. */
+    component: ComponentType<any>;
+};
+/**
+ * Register (or replace) a component. Idempotent — re-registering with the
+ * same `ref` overwrites the previous entry, which is the expected behavior
+ * during HMR / dev workflows.
+ */
+export declare function registerAppComponent(entry: AppComponentRegistryEntry): void;
+/**
+ * Look up a component by ref. Returns `undefined` if not registered;
+ * AppContent surfaces this as a structured empty state so the operator
+ * knows which plugin is missing.
+ */
+export declare function getAppComponent(ref: string): AppComponentRegistryEntry | undefined;
+/**
+ * Snapshot of all registered components — used by diagnostics surfaces
+ * (e.g. a future "Installed UI Components" admin page).
+ */
+export declare function listAppComponents(): AppComponentRegistryEntry[];
+/**
+ * Convert `metadata:resource` ↔ URL segments `['metadata', 'resource']`.
+ * Component refs are restricted to one colon in MVP, but the helper is
+ * future-proofed for nested keys (`metadata:resource:edit`).
+ */
+export declare function componentRefToUrlSegments(ref: string): string[];
+export declare function urlSegmentsToComponentRef(segments: string[]): string;

package/dist/services/componentRegistry.js

@@ -0,0 +1,36 @@
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+const REGISTRY = new Map();
+/**
+ * Register (or replace) a component. Idempotent — re-registering with the
+ * same `ref` overwrites the previous entry, which is the expected behavior
+ * during HMR / dev workflows.
+ */
+export function registerAppComponent(entry) {
+    REGISTRY.set(entry.ref, entry);
+}
+/**
+ * Look up a component by ref. Returns `undefined` if not registered;
+ * AppContent surfaces this as a structured empty state so the operator
+ * knows which plugin is missing.
+ */
+export function getAppComponent(ref) {
+    return REGISTRY.get(ref);
+}
+/**
+ * Snapshot of all registered components — used by diagnostics surfaces
+ * (e.g. a future "Installed UI Components" admin page).
+ */
+export function listAppComponents() {
+    return Array.from(REGISTRY.values());
+}
+/**
+ * Convert `metadata:resource` ↔ URL segments `['metadata', 'resource']`.
+ * Component refs are restricted to one colon in MVP, but the helper is
+ * future-proofed for nested keys (`metadata:resource:edit`).
+ */
+export function componentRefToUrlSegments(ref) {
+    return ref.split(':').filter(Boolean);
+}
+export function urlSegmentsToComponentRef(segments) {
+    return segments.filter(Boolean).join(':');
+}

package/dist/views/ComponentNavView.d.ts

@@ -0,0 +1,6 @@
+export interface ComponentNavViewProps {
+    /** Extra props injected by the parent route element (typically empty). */
+    extraProps?: Record<string, unknown>;
+}
+export declare function ComponentNavView({ extraProps }?: ComponentNavViewProps): import("react/jsx-runtime").JSX.Element;
+export default ComponentNavView;

package/dist/views/ComponentNavView.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useParams, useSearchParams } from 'react-router-dom';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { getAppComponent } from '../services/componentRegistry';
+export function ComponentNavView({ extraProps } = {}) {
+    const params = useParams();
+    const [search] = useSearchParams();
+    // URL: /apps/:appName/component/:ns/:name (sub-routes via /*)
+    const ns = params.ns;
+    const name = params.name;
+    const ref = ns && name ? `${ns}:${name}` : (ns ?? '');
+    const entry = getAppComponent(ref);
+    if (!entry) {
+        return (_jsx("div", { className: "h-full flex items-center justify-center p-8", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "Component not registered" }), _jsxs(EmptyDescription, { children: ["No component is registered for ", _jsx("code", { className: "font-mono", children: ref || '(empty)' }), ". Ensure the plugin that provides this surface is installed and has called", _jsx("code", { className: "font-mono", children: " registerAppComponent()" }), "."] })] }) }));
+    }
+    // Merge query string into props. Strings only at this layer — the
+    // component can coerce as needed. Nav-metadata `params` (the
+    // `{ type: 'object' }` from setup.app.ts) are forwarded by the
+    // sidebar URL builder as query string, so this merge captures them.
+    const queryProps = {};
+    for (const [k, v] of search.entries())
+        queryProps[k] = v;
+    const Component = entry.component;
+    return _jsx(Component, { ...queryProps, ...(extraProps ?? {}) });
+}
+export default ComponentNavView;

package/dist/views/RecordDetailView.js

@@ -370,6 +370,24 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
         const params = (action.params && !Array.isArray(action.params))
             ? action.params
             : {};
+        // ── Popup-blocker workaround ──────────────────────────────────────
+        // When `action.opensInNewTab` is set, the handler is known to return
+        // `{ redirectUrl: ... }` for the UI to navigate to. We pre-open
+        // `about:blank` synchronously *here*, before the await fetch — this
+        // preserves the user-gesture context so Chrome/Safari don't block
+        // the eventual navigation. Drives the same tab to `redirectUrl`
+        // after the server replies. If pre-open fails (popup blocker on the
+        // initial gesture), we fall back to navigating the current tab so
+        // the user always gets there.
+        let preOpenedTab = null;
+        if (action.opensInNewTab) {
+            try {
+                preOpenedTab = window.open('about:blank', '_blank', 'noopener,noreferrer');
+            }
+            catch {
+                preOpenedTab = null;
+            }
+        }
         try {
             const baseUrl = import.meta.env.VITE_SERVER_URL || '';
             const obj = action.objectName || objectName || 'global';
@@ -381,6 +399,12 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
             const json = await res.json().catch(() => null);
             if (!res.ok || (json && json.success === false)) {
                 const errMsg = json?.error || `Action "${targetName}" failed (HTTP ${res.status})`;
+                if (preOpenedTab) {
+                    try {
+                        preOpenedTab.close();
+                    }
+                    catch { /* ignore */ }
+                }
                 return { success: false, error: errMsg };
             }
             const shouldRefresh = action.refreshAfter !== false;
@@ -389,19 +413,55 @@ export function RecordDetailView({ dataSource, objects, onEdit, objectNameOverri
             const result = json?.data;
             // ── redirectUrl convention ────────────────────────────────────────
             // A script-action handler can return `{ redirectUrl: 'https://…' }`
-            // to ask the UI to open the URL in a new tab. Used by the
-            // `sso_as_owner` action on sys_environment to drop the operator
-            // into the env runtime as its admin. Same pattern works for any
-            // future "deep link" style action.
+            // to ask the UI to open the URL. If the action declared
+            // `opensInNewTab: true`, we drive the pre-opened tab to that URL
+            // (popup-blocker-safe). Otherwise we open lazily and, if blocked,
+            // fall back to navigating the current tab so the user always gets
+            // to the destination.
             if (result && typeof result === 'object' && typeof result.redirectUrl === 'string') {
+                const redirectUrl = result.redirectUrl;
+                if (preOpenedTab) {
+                    try {
+                        preOpenedTab.location.href = redirectUrl;
+                    }
+                    catch {
+                        try {
+                            preOpenedTab.close();
+                        }
+                        catch { /* ignore */ }
+                        window.location.href = redirectUrl;
+                    }
+                }
+                else {
+                    let popup = null;
+                    try {
+                        popup = window.open(redirectUrl, '_blank', 'noopener,noreferrer');
+                    }
+                    catch {
+                        popup = null;
+                    }
+                    if (!popup) {
+                        window.location.href = redirectUrl;
+                    }
+                }
+            }
+            else if (preOpenedTab) {
+                // Handler didn't return a redirectUrl — close the empty tab we
+                // optimistically pre-opened so the user isn't left with about:blank.
                 try {
-                    window.open(result.redirectUrl, '_blank', 'noopener,noreferrer');
+                    preOpenedTab.close();
                 }
-                catch { /* popup blocked — fall through */ }
+                catch { /* ignore */ }
             }
             return { success: true, data: result, reload: shouldRefresh };
         }
         catch (error) {
+            if (preOpenedTab) {
+                try {
+                    preOpenedTab.close();
+                }
+                catch { /* ignore */ }
+            }
             return { success: false, error: error.message };
         }
     }, [authFetch, pureRecordId, objectName]);

package/dist/views/RecordFormPage.js

@@ -28,7 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module views/RecordFormPage
  */
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams, useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { ObjectForm } from '@object-ui/plugin-form';
 import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
@@ -58,7 +58,19 @@ export function RecordFormPage({ mode }) {
     const { objects, loading: metadataLoading } = useMetadata();
     const { t } = useObjectTranslation();
     const { objectLabel } = useObjectLabel();
-    const { user } = useAuth();
+    const { user, getAuthConfig } = useAuth();
+    // Pull deployment-level feature flags so action visibility predicates
+    // (e.g. `features.multiOrgEnabled != false` on sys_organization's create
+    // action) can see them inside the nested ExpressionProvider below.
+    const [features, setFeatures] = useState({});
+    useEffect(() => {
+        let cancelled = false;
+        getAuthConfig()
+            .then(cfg => { if (!cancelled)
+            setFeatures(cfg?.features ?? {}); })
+            .catch(() => { });
+        return () => { cancelled = true; };
+    }, [getAuthConfig]);
     /**
      * Query-string prefills for create mode. Used by related-list "+ New"
      * buttons that pass the parent record id as a `<referenceField>=<id>`
@@ -162,7 +174,7 @@ export function RecordFormPage({ mode }) {
     if (!objectDef) {
         return (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.objectNotFound') }), _jsx(EmptyDescription, { children: t('empty.objectNotFoundDescription', { name: objectName }) }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), t('empty.back')] }) })] }) }));
     }
-    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle }), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy, className: "ml-1" })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
+    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, features: features, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle }), _jsx(ManagedByBadge, { managedBy: objectDef?.managedBy, className: "ml-1" })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
                                 type: 'object-form',
                                 formType: 'simple',
                                 objectName: objectDef.name,

package/dist/views/SearchResultsPage.js

@@ -66,6 +66,10 @@ export function SearchResultsPage() {
                 href = `${baseUrl}/page/${item.pageName}`;
             else if (item.type === 'report')
                 href = `${baseUrl}/report/${item.reportName}`;
+            else if (item.type === 'component' && item.componentRef) {
+                const segs = String(item.componentRef).split(':').filter(Boolean);
+                href = `${baseUrl}/component/${segs.join('/')}`;
+            }
             return {
                 id: item.id,
                 label: item.label || item.objectName || item.dashboardName || item.pageName || item.reportName || '',

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

@@ -0,0 +1,68 @@
+/**
+ * DesignerEditorWrapper — Phase 3d.
+ *
+ * Generic "load metadata → hand to a controlled designer component →
+ * save on commit" wrapper. Lets us plug existing bespoke designers
+ * (ObjectViewConfigurator, DashboardEditor, PageDesigner, …) into the
+ * unified Setup-app shell without rewriting them.
+ *
+ * Each designer takes a different prop shape, so we accept a
+ * `renderDesigner` callback that gets `(value, onChange, readOnly)`
+ * and returns whatever the designer needs.
+ *
+ * Wiring is dead simple — see `builtinComponents.tsx`:
+ *
+ *   registerMetadataResource({
+ *     type: 'view',
+ *     EditPage: (props) => (
+ *       <DesignerEditorWrapper
+ *         {...props}
+ *         renderDesigner={(value, onChange, readOnly) => (
+ *           <ObjectViewConfigurator config={value} onChange={onChange} readOnly={readOnly} />
+ *         )}
+ *       />
+ *     ),
+ *   });
+ *
+ * The wrapper handles:
+ *   • Initial fetch via `client.layered()` (so admins see overlay vs code).
+ *   • Local edit state with Save / Revert.
+ *   • Destructive-change confirmation (409 → dialog → retry with force).
+ *   • Reset overlay button (DELETE).
+ *   • Read-only fallback when the type isn't allowed to override at runtime
+ *     (driven by /meta/types#allowOrgOverride).
+ *
+ * Validation errors (422) are surfaced as an error banner; bespoke
+ * designers usually handle their own field-level UX.
+ */
+import * as React from 'react';
+export interface DesignerEditorWrapperProps<TValue = any> {
+    type: string;
+    name: string;
+    /**
+     * Render the actual designer. Receives the current draft value, a
+     * setter, and whether the editor must be read-only.
+     */
+    renderDesigner: (value: TValue, onChange: (next: TValue) => void, readOnly: boolean) => React.ReactNode;
+    /**
+     * Optional adapter to normalise the value the server returns into
+     * the shape the designer wants. Defaults to identity.
+     */
+    fromMetadata?: (raw: unknown) => TValue;
+    /**
+     * Optional adapter to turn the designer's value back into the
+     * metadata payload before save. Defaults to identity.
+     */
+    toMetadata?: (value: TValue) => unknown;
+}
+export declare function DesignerEditorWrapper<TValue = any>(props: DesignerEditorWrapperProps<TValue>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Embedded variant — same state machine, but no surrounding `PageShell`.
+ * Used by `ResourceEditPage` to host the designer inside a tab alongside
+ * the generic Form / Layers / References tabs. The action toolbar (Save /
+ * Reset / Refresh) is rendered inline at the top of the panel so the tab
+ * remains self-sufficient.
+ */
+export declare function DesignerEditorBody<TValue = any>({ type, name, renderDesigner, fromMetadata, toMetadata, withChrome, }: DesignerEditorWrapperProps<TValue> & {
+    withChrome?: boolean;
+}): import("react/jsx-runtime").JSX.Element;