quilt-react 0.1.1 → 0.2.1

package/README.md

@@ -27,8 +27,7 @@ const store = new LayoutStore(
 );
 const data = { text: 'Hello' };
 const getPaneState = () => data;
-function Notes({ state }: PaneProps) {
-  const model = state as typeof data;
+function Notes({ state: model }: PaneProps<typeof data>) {
   return (
     <textarea
       defaultValue={model.text}
@@ -41,7 +40,7 @@ function Notes({ state }: PaneProps) {
 const components = { notes: Notes };
 const root = createRoot(document.getElementById('app')!);
 root.render(
-  <Layout
+  <Layout<typeof data>
     store={store}
     components={components}
     getPaneState={getPaneState}
@@ -56,8 +55,8 @@ function disposeWorkspace() {
 }
 ```
 
-Keep the store, components, registry, and adapter callbacks stable. `useLayoutSnapshot(store)` observes layout changes. The model type is `LayoutSnapshot`; `Layout` is the component. `MountedLayout`, `TabRegistry`, theme presets, and DOM configuration types are available here too. Attach a `MountedLayout` ref to call `popout` from a user gesture; before mounting completes its methods return false/no-op.
+Keep the store stable. Component maps and adapter callbacks can change identity without rebuilding the workspace. Declarative panes inherit application providers through portals. `useLayoutSnapshot(store)` observes layout changes. The model type is `LayoutSnapshot`; `Layout` is the component. `MountedLayout`, `TabRegistry`, theme presets, and DOM configuration types are available here too. Attach a `MountedLayout` ref to call `popout` from a user gesture; before mounting completes, popout/requestClose resolve false; workspace configuration methods throw a clear not-mounted error.
 
-Panes are separate React roots and do not inherit your app's context providers. Wrap pane components with required providers. React-local state does not survive crossing documents: retain data in an application-owned store, and subscribe inside each view when live synchronization is needed. Companion windows are same-origin and depend on the main session.
+Only standalone `reactRenderer` creates separate roots requiring explicit provider wrappers. React-local state does not survive crossing documents: retain data in an application-owned store, and subscribe inside each view when live synchronization is needed. Companion windows are same-origin and depend on the main session.
 
 The stylesheet is identical to `quilt-vanilla/styles.css`; import either once. See [API](https://github.com/niko-dellic/quilt/blob/main/docs/api.md), [lifecycle](https://github.com/niko-dellic/quilt/blob/main/docs/lifecycle.md), and [migration](https://github.com/niko-dellic/quilt/blob/main/docs/migration.md).

package/dist/index.d.ts

@@ -1,20 +1,29 @@
-export type { TabBarOptions, TabBarStyle } from 'quilt-vanilla';
-import type { ComponentType, CSSProperties } from 'react';
+import type { ComponentType, CSSProperties, RefAttributes, ReactElement } from 'react';
+import { PaneRegistry } from 'quilt-vanilla';
 import type { LayoutOptions, MountedLayout, PaneContext, PaneRenderer } from 'quilt-vanilla';
 import type { Layout as LayoutSnapshot, LayoutStore } from 'quilt-core';
-export type PaneProps = Omit<PaneContext, 'element'>;
+export type PaneProps<State = unknown> = Omit<PaneContext<State>, 'element'>;
 /** A separate root is created for each pane view, including companion documents. */
-export declare function reactRenderer(component: ComponentType<PaneProps>): PaneRenderer;
-export interface LayoutProps extends Omit<LayoutOptions, 'renderers'> {
-    components: Record<string, ComponentType<PaneProps>>;
+export declare function reactRenderer<State = unknown>(component: ComponentType<PaneProps<State>>): PaneRenderer<State>;
+export type LayoutProps<State = unknown> = Omit<LayoutOptions<State>, 'renderers' | 'registry' | 'tabs'> & {
     className?: string;
     style?: CSSProperties;
-}
-/** Keep store, components, and adapter callbacks stable to avoid remounting the workspace. */
-export declare const Layout: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<MountedLayout>>;
+} & ({
+    registry: PaneRegistry<ComponentType<PaneProps<State>>>;
+    components?: never;
+    tabs?: never;
+} | {
+    registry?: undefined;
+    components?: Record<string, ComponentType<PaneProps<State>>>;
+    tabs?: import('quilt-vanilla').TabRegistry;
+});
+/** State is application-owned and shared by every registered pane in this layout. */
+export declare const Layout: <State = unknown>(props: LayoutProps<State> & RefAttributes<MountedLayout<State>>) => ReactElement | null;
 export declare function useLayoutSnapshot(store: LayoutStore): LayoutSnapshot;
 export { LayoutStore, LayoutError, createLayout, parseLayout, validate } from 'quilt-core';
 export type { AutoCollapse, LayoutStoreOptions, Json, Capability, Axis, Pane, Group, Split, Node, WindowPlacement, Popout, Layout as LayoutSnapshot, Issue, CommandOptions, Change, Bounds, JoinOptions, } from 'quilt-core';
 export { TabRegistry, themes, themeFamilies } from 'quilt-vanilla';
 export type { TabRegistration, LayoutTheme, LayoutOptions, MountedLayout, PaneContext, PaneView, PaneRenderer, } from 'quilt-vanilla';
+export { PaneRegistry, parseWorkspace, dockLayout, themeProperties, defaultMessages, } from 'quilt-vanilla';
+export type { PaneRegistration, WorkspacePreset, Messages, CloseRequest, KeyBinding, TabBarOptions, TabBarStyle, } from 'quilt-vanilla';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAWhE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACxE,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAgBrD,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,YAAY,CAqC/E;AACD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC;IACnE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AACD,8FAA8F;AAC9F,eAAO,MAAM,MAAM,uGAoFjB,CAAC;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEpE;AACD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3F,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,eAAe,EACf,MAAM,EACN,MAAM,IAAI,cAAc,EACxB,KAAK,EACL,cAAc,EACd,MAAM,EACN,MAAM,EACN,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,QAAQ,EACR,YAAY,GACb,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAa,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGlG,OAAO,EAAe,YAAY,EAAE,MAAM,eAAe,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,KAAK,EAAE,MAAM,IAAI,cAAc,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACxE,MAAM,MAAM,SAAS,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAsB7E,oFAAoF;AACpF,wBAAgB,aAAa,CAAC,KAAK,GAAG,OAAO,EAC3C,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GACzC,YAAY,CAAC,KAAK,CAAC,CAqCrB;AAmED,MAAM,MAAM,WAAW,CAAC,KAAK,GAAG,OAAO,IAAI,IAAI,CAC7C,aAAa,CAAC,KAAK,CAAC,EACpB,WAAW,GAAG,UAAU,GAAG,MAAM,CAClC,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,CACE;IAAE,QAAQ,EAAE,YAAY,CAAC,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,GAC7F;IACE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC7D,IAAI,CAAC,EAAE,OAAO,eAAe,EAAE,WAAW,CAAC;CAC5C,CACJ,CAAC;AAqIJ,qFAAqF;AACrF,eAAO,MAAM,MAAM,EAAiB,CAAC,KAAK,GAAG,OAAO,EAClD,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAC5D,YAAY,GAAG,IAAI,CAAC;AACzB,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEpE;AACD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3F,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,IAAI,EACJ,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,eAAe,EACf,MAAM,EACN,MAAM,IAAI,cAAc,EACxB,KAAK,EACL,cAAc,EACd,MAAM,EACN,MAAM,EACN,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,QAAQ,EACR,YAAY,GACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,eAAe,CAAC;AACvB,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component, createElement, forwardRef, useImperativeHandle, useLayoutEffect, useMemo, useRef, useSyncExternalStore, } from 'react';
 import { createRoot } from 'react-dom/client';
-import { flushSync } from 'react-dom';
-import { mountLayout } from 'quilt-vanilla';
+import { createPortal, flushSync } from 'react-dom';
+import { mountLayout, PaneRegistry } from 'quilt-vanilla';
 class Boundary extends Component {
     state = { failed: false };
     static getDerivedStateFromError() {
@@ -12,7 +12,9 @@ class Boundary extends Component {
         this.props.onError(error);
     }
     render() {
-        return this.state.failed ? null : this.props.children;
+        return this.state.failed
+            ? createElement('div', { role: 'alert' }, this.props.fallback ?? 'Pane could not be rendered.')
+            : this.props.children;
     }
 }
 /** A separate root is created for each pane view, including companion documents. */
@@ -42,7 +44,7 @@ export function reactRenderer(component) {
             update(pane) {
                 root.render(createElement(Boundary, {
                     onError: (error) => {
-                        context.element.textContent = error instanceof Error ? error.message : String(error);
+                        context.reportError(error);
                     },
                     children: createElement(component, { ...props, pane }),
                 }));
@@ -50,73 +52,175 @@ export function reactRenderer(component) {
         };
     };
 }
-/** Keep store, components, and adapter callbacks stable to avoid remounting the workspace. */
-export const Layout = forwardRef(function Layout(props, ref) {
-    const { store, tabs, theme, tabBar, components, getPaneState, onError, prepareWindow, openWindow, renderIcon, shortcuts, className, style, } = props;
-    const host = useRef(null), mounted = useRef(null);
-    const currentTabBar = useRef(tabBar);
-    currentTabBar.current = tabBar;
-    useLayoutEffect(() => {
-        mounted.current?.setTabBar(tabBar ?? {});
-    }, [tabBar]);
-    const currentTheme = useRef(theme);
-    currentTheme.current = theme;
-    useLayoutEffect(() => {
-        mounted.current?.setTheme(theme ?? {});
-    }, [theme]);
-    const renderers = useMemo(() => Object.fromEntries(Object.entries(components).map(([id, c]) => [id, reactRenderer(c)])), [components]);
-    useImperativeHandle(ref, () => ({
-        setTabBar: (options) => mounted.current?.setTabBar(options),
-        setTheme: (theme) => mounted.current?.setTheme(theme),
-        popout: (...args) => mounted.current?.popout(...args) ?? false,
-        returnPane: (id) => mounted.current?.returnPane(id),
-        dispose: () => mounted.current?.dispose(),
-    }), []);
+function Ready({ children, onReady }) {
+    useLayoutEffect(onReady, [onReady]);
+    return children;
+}
+function createBridge() {
+    let sequence = 0;
+    let entries = [];
+    const listeners = new Set();
+    const emit = () => {
+        for (const listener of listeners)
+            listener();
+    };
+    const cache = new WeakMap();
+    return {
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        snapshot: () => entries,
+        renderer(component) {
+            let renderer = cache.get(component);
+            if (renderer)
+                return renderer;
+            renderer = (context) => {
+                let resolve, reject;
+                const ready = new Promise((yes, no) => {
+                    resolve = yes;
+                    reject = no;
+                });
+                void ready.catch(() => { });
+                const entry = {
+                    id: ++sequence,
+                    context,
+                    component,
+                    ready: resolve,
+                    fail: reject,
+                };
+                entries = [...entries, entry];
+                emit();
+                return {
+                    ready,
+                    update(pane) {
+                        entry.context = { ...entry.context, pane };
+                        entries = [...entries];
+                        emit();
+                    },
+                    dispose() {
+                        entries = entries.filter((value) => value !== entry);
+                        emit();
+                        reject(new Error('Pane disposed before readiness'));
+                    },
+                };
+            };
+            cache.set(component, renderer);
+            return renderer;
+        },
+    };
+}
+const LayoutImpl = forwardRef(function Layout(props, ref) {
+    const { store, components, registry, className, style, ...rest } = props;
+    if (registry && (components || props.tabs))
+        throw new Error('registry cannot be combined with components or tabs');
+    const bridge = useMemo(createBridge, [store]);
+    const entries = useSyncExternalStore(bridge.subscribe, bridge.snapshot, bridge.snapshot);
+    const host = useRef(null);
+    const mounted = useRef(null);
+    const latest = useRef(props);
+    latest.current = props;
+    const adapt = () => {
+        const current = latest.current;
+        const { store: _store, components: map, registry: source, className: _className, style: _style, ...options } = current;
+        const complete = Object.fromEntries([
+            'tabs',
+            'theme',
+            'tabBar',
+            'getPaneState',
+            'onError',
+            'prepareWindow',
+            'openWindow',
+            'renderIcon',
+            'shortcuts',
+            'messages',
+            'popouts',
+            'confirmClose',
+            'registry',
+            'renderers',
+        ].map((key) => [key, undefined]));
+        if (source) {
+            const adapted = new PaneRegistry(source.list().map((entry) => ({ ...entry, view: bridge.renderer(entry.view) })));
+            return { ...complete, ...options, registry: adapted };
+        }
+        return {
+            ...complete,
+            ...options,
+            renderers: Object.fromEntries(Object.entries(map ?? {}).map(([key, component]) => [key, bridge.renderer(component)])),
+        };
+    };
+    useImperativeHandle(ref, () => {
+        const instance = () => {
+            if (!mounted.current)
+                throw new Error('Layout is not mounted');
+            return mounted.current;
+        };
+        return {
+            setTheme: (theme) => instance().setTheme(theme),
+            setTabBar: (options) => instance().setTabBar(options),
+            updateOptions: (options) => instance().updateOptions(options),
+            refreshTheme: () => instance().refreshTheme(),
+            retryPane: (id) => instance().retryPane(id),
+            exportWorkspace: () => instance().exportWorkspace(),
+            loadWorkspace: (input) => instance().loadWorkspace(input),
+            requestClose: (id, kind) => mounted.current?.requestClose(id, kind) ?? Promise.resolve(false),
+            popout: (id, placement) => mounted.current?.popout(id, placement) ?? Promise.resolve(false),
+            returnPane: (id) => mounted.current?.returnPane(id),
+            dispose: () => mounted.current?.dispose(),
+        };
+    }, []);
     useLayoutEffect(() => {
         let cancelled = false;
         let instance;
-        // Pane roots must mount outside the parent React commit (flushSync is forbidden there).
         queueMicrotask(() => {
             if (cancelled || !host.current)
                 return;
-            instance = mountLayout(host.current, {
-                store,
-                renderers,
-                ...(currentTabBar.current ? { tabBar: currentTabBar.current } : {}),
-                ...(tabs ? { tabs } : {}),
-                ...(currentTheme.current ? { theme: currentTheme.current } : {}),
-                ...(getPaneState ? { getPaneState } : {}),
-                ...(onError ? { onError } : {}),
-                ...(prepareWindow ? { prepareWindow } : {}),
-                ...(openWindow ? { openWindow } : {}),
-                ...(renderIcon ? { renderIcon } : {}),
-                ...(shortcuts !== undefined ? { shortcuts } : {}),
-            });
+            instance = mountLayout(host.current, { store, ...adapt() });
             mounted.current = instance;
         });
         return () => {
             cancelled = true;
-            const previous = instance;
-            queueMicrotask(() => previous?.dispose());
-            if (mounted.current === previous)
+            if (mounted.current === instance)
                 mounted.current = null;
+            queueMicrotask(() => instance?.dispose());
         };
+    }, [store, bridge]);
+    // Only changes to public options update the DOM adapter; bridge renders don't rebuild chrome.
+    useLayoutEffect(() => {
+        mounted.current?.updateOptions(adapt());
     }, [
-        store,
-        renderers,
-        tabs,
-        getPaneState,
-        onError,
-        prepareWindow,
-        openWindow,
-        renderIcon,
-        shortcuts,
+        components,
+        registry,
+        rest.tabs,
+        rest.theme,
+        rest.tabBar,
+        rest.getPaneState,
+        rest.onError,
+        rest.prepareWindow,
+        rest.openWindow,
+        rest.renderIcon,
+        rest.shortcuts,
+        rest.messages,
+        rest.popouts,
+        rest.confirmClose,
     ]);
-    return (_jsx("div", { ref: host, className: className, style: { width: '100%', height: '100%', ...style } }));
+    useLayoutEffect(() => registry?.subscribe(() => mounted.current?.updateOptions(adapt())), [registry, bridge]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: host, className: className, style: { width: '100%', height: '100%', ...style } }), entries.map((entry) => {
+                const { element, ...context } = entry.context;
+                return createPortal(_jsx(Boundary, { fallback: props.messages?.['Pane could not be rendered.'] ?? 'Pane could not be rendered.', onError: (error) => {
+                        entry.fail(error);
+                        entry.context.reportError(error);
+                    }, children: _jsx(Ready, { onReady: entry.ready, children: createElement(entry.component, context) }) }), element, String(entry.id));
+            })] }));
 });
+/** State is application-owned and shared by every registered pane in this layout. */
+export const Layout = LayoutImpl;
 export function useLayoutSnapshot(store) {
     return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
 export { LayoutStore, LayoutError, createLayout, parseLayout, validate } from 'quilt-core';
 export { TabRegistry, themes, themeFamilies } from 'quilt-vanilla';
+export { PaneRegistry, parseWorkspace, dockLayout, themeProperties, defaultMessages, } from 'quilt-vanilla';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["export type { TabBarOptions, TabBarStyle } from 'quilt-vanilla';\nimport {\n  Component,\n  createElement,\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport type { ComponentType, CSSProperties, ReactNode } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { flushSync } from 'react-dom';\nimport { mountLayout } from 'quilt-vanilla';\nimport type { LayoutOptions, MountedLayout, PaneContext, PaneRenderer } from 'quilt-vanilla';\nimport type { Layout as LayoutSnapshot, LayoutStore } from 'quilt-core';\nexport type PaneProps = Omit<PaneContext, 'element'>;\nclass Boundary extends Component<\n  { children: ReactNode; onError: (error: unknown) => void },\n  { failed: boolean }\n> {\n  override state = { failed: false };\n  static getDerivedStateFromError() {\n    return { failed: true };\n  }\n  override componentDidCatch(error: unknown) {\n    this.props.onError(error);\n  }\n  override render() {\n    return this.state.failed ? null : this.props.children;\n  }\n}\n/** A separate root is created for each pane view, including companion documents. */\nexport function reactRenderer(component: ComponentType<PaneProps>): PaneRenderer {\n  return (context) => {\n    const root = createRoot(context.element);\n    let failure: unknown;\n    const { element: _element, ...props } = context;\n    try {\n      flushSync(() =>\n        root.render(\n          createElement(Boundary, {\n            onError: (error) => {\n              failure = error;\n            },\n            children: createElement(component, props),\n          }),\n        ),\n      );\n      if (failure) throw failure;\n    } catch (error) {\n      root.unmount();\n      throw error;\n    }\n    return {\n      dispose() {\n        root.unmount();\n      },\n      update(pane) {\n        root.render(\n          createElement(Boundary, {\n            onError: (error) => {\n              context.element.textContent = error instanceof Error ? error.message : String(error);\n            },\n            children: createElement(component, { ...props, pane }),\n          }),\n        );\n      },\n    };\n  };\n}\nexport interface LayoutProps extends Omit<LayoutOptions, 'renderers'> {\n  components: Record<string, ComponentType<PaneProps>>;\n  className?: string;\n  style?: CSSProperties;\n}\n/** Keep store, components, and adapter callbacks stable to avoid remounting the workspace. */\nexport const Layout = forwardRef<MountedLayout, LayoutProps>(function Layout(props, ref) {\n  const {\n    store,\n    tabs,\n    theme,\n    tabBar,\n    components,\n    getPaneState,\n    onError,\n    prepareWindow,\n    openWindow,\n    renderIcon,\n    shortcuts,\n    className,\n    style,\n  } = props;\n  const host = useRef<HTMLDivElement>(null),\n    mounted = useRef<MountedLayout | null>(null);\n  const currentTabBar = useRef(tabBar);\n  currentTabBar.current = tabBar;\n  useLayoutEffect(() => {\n    mounted.current?.setTabBar(tabBar ?? {});\n  }, [tabBar]);\n  const currentTheme = useRef(theme);\n  currentTheme.current = theme;\n  useLayoutEffect(() => {\n    mounted.current?.setTheme(theme ?? {});\n  }, [theme]);\n  const renderers = useMemo(\n    () => Object.fromEntries(Object.entries(components).map(([id, c]) => [id, reactRenderer(c)])),\n    [components],\n  );\n  useImperativeHandle(\n    ref,\n    () => ({\n      setTabBar: (options) => mounted.current?.setTabBar(options),\n      setTheme: (theme) => mounted.current?.setTheme(theme),\n      popout: (...args) => mounted.current?.popout(...args) ?? false,\n      returnPane: (id) => mounted.current?.returnPane(id),\n      dispose: () => mounted.current?.dispose(),\n    }),\n    [],\n  );\n  useLayoutEffect(() => {\n    let cancelled = false;\n    let instance: MountedLayout | undefined;\n    // Pane roots must mount outside the parent React commit (flushSync is forbidden there).\n    queueMicrotask(() => {\n      if (cancelled || !host.current) return;\n      instance = mountLayout(host.current, {\n        store,\n        renderers,\n        ...(currentTabBar.current ? { tabBar: currentTabBar.current } : {}),\n        ...(tabs ? { tabs } : {}),\n        ...(currentTheme.current ? { theme: currentTheme.current } : {}),\n        ...(getPaneState ? { getPaneState } : {}),\n        ...(onError ? { onError } : {}),\n        ...(prepareWindow ? { prepareWindow } : {}),\n        ...(openWindow ? { openWindow } : {}),\n        ...(renderIcon ? { renderIcon } : {}),\n        ...(shortcuts !== undefined ? { shortcuts } : {}),\n      });\n      mounted.current = instance;\n    });\n    return () => {\n      cancelled = true;\n      const previous = instance;\n      queueMicrotask(() => previous?.dispose());\n      if (mounted.current === previous) mounted.current = null;\n    };\n  }, [\n    store,\n    renderers,\n    tabs,\n    getPaneState,\n    onError,\n    prepareWindow,\n    openWindow,\n    renderIcon,\n    shortcuts,\n  ]);\n  return (\n    <div ref={host} className={className} style={{ width: '100%', height: '100%', ...style }} />\n  );\n});\nexport function useLayoutSnapshot(store: LayoutStore): LayoutSnapshot {\n  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n}\nexport { LayoutStore, LayoutError, createLayout, parseLayout, validate } from 'quilt-core';\nexport type {\n  AutoCollapse,\n  LayoutStoreOptions,\n  Json,\n  Capability,\n  Axis,\n  Pane,\n  Group,\n  Split,\n  Node,\n  WindowPlacement,\n  Popout,\n  Layout as LayoutSnapshot,\n  Issue,\n  CommandOptions,\n  Change,\n  Bounds,\n  JoinOptions,\n} from 'quilt-core';\nexport { TabRegistry, themes, themeFamilies } from 'quilt-vanilla';\nexport type {\n  TabRegistration,\n  LayoutTheme,\n  LayoutOptions,\n  MountedLayout,\n  PaneContext,\n  PaneView,\n  PaneRenderer,\n} from 'quilt-vanilla';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  createElement,\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useSyncExternalStore,\n} from 'react';\nimport type { ComponentType, CSSProperties, ReactNode, RefAttributes, ReactElement } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { createPortal, flushSync } from 'react-dom';\nimport { mountLayout, PaneRegistry } from 'quilt-vanilla';\nimport type { LayoutOptions, MountedLayout, PaneContext, PaneRenderer } from 'quilt-vanilla';\nimport type { Layout as LayoutSnapshot, LayoutStore } from 'quilt-core';\nexport type PaneProps<State = unknown> = Omit<PaneContext<State>, 'element'>;\nclass Boundary extends Component<\n  { children: ReactNode; onError: (error: unknown) => void; fallback?: string },\n  { failed: boolean }\n> {\n  override state = { failed: false };\n  static getDerivedStateFromError() {\n    return { failed: true };\n  }\n  override componentDidCatch(error: unknown) {\n    this.props.onError(error);\n  }\n  override render() {\n    return this.state.failed\n      ? createElement(\n          'div',\n          { role: 'alert' },\n          this.props.fallback ?? 'Pane could not be rendered.',\n        )\n      : this.props.children;\n  }\n}\n/** A separate root is created for each pane view, including companion documents. */\nexport function reactRenderer<State = unknown>(\n  component: ComponentType<PaneProps<State>>,\n): PaneRenderer<State> {\n  return (context) => {\n    const root = createRoot(context.element);\n    let failure: unknown;\n    const { element: _element, ...props } = context;\n    try {\n      flushSync(() =>\n        root.render(\n          createElement(Boundary, {\n            onError: (error) => {\n              failure = error;\n            },\n            children: createElement(component, props),\n          }),\n        ),\n      );\n      if (failure) throw failure;\n    } catch (error) {\n      root.unmount();\n      throw error;\n    }\n    return {\n      dispose() {\n        root.unmount();\n      },\n      update(pane) {\n        root.render(\n          createElement(Boundary, {\n            onError: (error) => {\n              context.reportError(error);\n            },\n            children: createElement(component, { ...props, pane }),\n          }),\n        );\n      },\n    };\n  };\n}\n\ninterface PortalEntry {\n  id: number;\n  context: PaneContext;\n  component: ComponentType<PaneProps>;\n  ready: () => void;\n  fail: (error: unknown) => void;\n}\nfunction Ready({ children, onReady }: { children: ReactNode; onReady: () => void }) {\n  useLayoutEffect(onReady, [onReady]);\n  return children;\n}\nfunction createBridge() {\n  let sequence = 0;\n  let entries: PortalEntry[] = [];\n  const listeners = new Set<() => void>();\n  const emit = () => {\n    for (const listener of listeners) listener();\n  };\n  const cache = new WeakMap<ComponentType<PaneProps>, PaneRenderer>();\n  return {\n    subscribe: (listener: () => void) => {\n      listeners.add(listener);\n      return () => {\n        listeners.delete(listener);\n      };\n    },\n    snapshot: () => entries,\n    renderer(component: ComponentType<PaneProps>): PaneRenderer {\n      let renderer = cache.get(component);\n      if (renderer) return renderer;\n      renderer = (context) => {\n        let resolve!: () => void, reject!: (error: unknown) => void;\n        const ready = new Promise<void>((yes, no) => {\n          resolve = yes;\n          reject = no;\n        });\n        void ready.catch(() => {});\n        const entry: PortalEntry = {\n          id: ++sequence,\n          context,\n          component,\n          ready: resolve,\n          fail: reject,\n        };\n        entries = [...entries, entry];\n        emit();\n        return {\n          ready,\n          update(pane) {\n            entry.context = { ...entry.context, pane };\n            entries = [...entries];\n            emit();\n          },\n          dispose() {\n            entries = entries.filter((value) => value !== entry);\n            emit();\n            reject(new Error('Pane disposed before readiness'));\n          },\n        };\n      };\n      cache.set(component, renderer);\n      return renderer;\n    },\n  };\n}\nexport type LayoutProps<State = unknown> = Omit<\n  LayoutOptions<State>,\n  'renderers' | 'registry' | 'tabs'\n> & {\n  className?: string;\n  style?: CSSProperties;\n} & (\n    | { registry: PaneRegistry<ComponentType<PaneProps<State>>>; components?: never; tabs?: never }\n    | {\n        registry?: undefined;\n        components?: Record<string, ComponentType<PaneProps<State>>>;\n        tabs?: import('quilt-vanilla').TabRegistry;\n      }\n  );\nconst LayoutImpl = forwardRef<MountedLayout, LayoutProps>(function Layout(props, ref) {\n  const { store, components, registry, className, style, ...rest } = props;\n  if (registry && (components || props.tabs))\n    throw new Error('registry cannot be combined with components or tabs');\n  const bridge = useMemo(createBridge, [store]);\n  const entries = useSyncExternalStore(bridge.subscribe, bridge.snapshot, bridge.snapshot);\n  const host = useRef<HTMLDivElement>(null);\n  const mounted = useRef<MountedLayout | null>(null);\n  const latest = useRef(props);\n  latest.current = props;\n  const adapt = () => {\n    const current = latest.current;\n    const {\n      store: _store,\n      components: map,\n      registry: source,\n      className: _className,\n      style: _style,\n      ...options\n    } = current;\n    const complete = Object.fromEntries(\n      [\n        'tabs',\n        'theme',\n        'tabBar',\n        'getPaneState',\n        'onError',\n        'prepareWindow',\n        'openWindow',\n        'renderIcon',\n        'shortcuts',\n        'messages',\n        'popouts',\n        'confirmClose',\n        'registry',\n        'renderers',\n      ].map((key) => [key, undefined]),\n    );\n    if (source) {\n      const adapted = new PaneRegistry<PaneRenderer>(\n        source.list().map((entry) => ({ ...entry, view: bridge.renderer(entry.view) })),\n      );\n      return { ...complete, ...options, registry: adapted };\n    }\n    return {\n      ...complete,\n      ...options,\n      renderers: Object.fromEntries(\n        Object.entries(map ?? {}).map(([key, component]) => [key, bridge.renderer(component)]),\n      ),\n    };\n  };\n  useImperativeHandle(ref, () => {\n    const instance = () => {\n      if (!mounted.current) throw new Error('Layout is not mounted');\n      return mounted.current;\n    };\n    return {\n      setTheme: (theme) => instance().setTheme(theme),\n      setTabBar: (options) => instance().setTabBar(options),\n      updateOptions: (options) => instance().updateOptions(options),\n      refreshTheme: () => instance().refreshTheme(),\n      retryPane: (id) => instance().retryPane(id),\n      exportWorkspace: () => instance().exportWorkspace(),\n      loadWorkspace: (input) => instance().loadWorkspace(input),\n      requestClose: (id, kind) => mounted.current?.requestClose(id, kind) ?? Promise.resolve(false),\n      popout: (id, placement) => mounted.current?.popout(id, placement) ?? Promise.resolve(false),\n      returnPane: (id) => mounted.current?.returnPane(id),\n      dispose: () => mounted.current?.dispose(),\n    };\n  }, []);\n  useLayoutEffect(() => {\n    let cancelled = false;\n    let instance: MountedLayout | undefined;\n    queueMicrotask(() => {\n      if (cancelled || !host.current) return;\n      instance = mountLayout(host.current, { store, ...adapt() } as LayoutOptions);\n      mounted.current = instance;\n    });\n    return () => {\n      cancelled = true;\n      if (mounted.current === instance) mounted.current = null;\n      queueMicrotask(() => instance?.dispose());\n    };\n  }, [store, bridge]);\n  // Only changes to public options update the DOM adapter; bridge renders don't rebuild chrome.\n  useLayoutEffect(() => {\n    mounted.current?.updateOptions(adapt());\n  }, [\n    components,\n    registry,\n    rest.tabs,\n    rest.theme,\n    rest.tabBar,\n    rest.getPaneState,\n    rest.onError,\n    rest.prepareWindow,\n    rest.openWindow,\n    rest.renderIcon,\n    rest.shortcuts,\n    rest.messages,\n    rest.popouts,\n    rest.confirmClose,\n  ]);\n  useLayoutEffect(\n    () => registry?.subscribe(() => mounted.current?.updateOptions(adapt())),\n    [registry, bridge],\n  );\n  return (\n    <>\n      <div ref={host} className={className} style={{ width: '100%', height: '100%', ...style }} />\n      {entries.map((entry) => {\n        const { element, ...context } = entry.context;\n        return createPortal(\n          <Boundary\n            fallback={\n              props.messages?.['Pane could not be rendered.'] ?? 'Pane could not be rendered.'\n            }\n            onError={(error) => {\n              entry.fail(error);\n              entry.context.reportError(error);\n            }}\n          >\n            <Ready onReady={entry.ready}>{createElement(entry.component, context)}</Ready>\n          </Boundary>,\n          element,\n          String(entry.id),\n        );\n      })}\n    </>\n  );\n});\n/** State is application-owned and shared by every registered pane in this layout. */\nexport const Layout = LayoutImpl as <State = unknown>(\n  props: LayoutProps<State> & RefAttributes<MountedLayout<State>>,\n) => ReactElement | null;\nexport function useLayoutSnapshot(store: LayoutStore): LayoutSnapshot {\n  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);\n}\nexport { LayoutStore, LayoutError, createLayout, parseLayout, validate } from 'quilt-core';\nexport type {\n  AutoCollapse,\n  LayoutStoreOptions,\n  Json,\n  Capability,\n  Axis,\n  Pane,\n  Group,\n  Split,\n  Node,\n  WindowPlacement,\n  Popout,\n  Layout as LayoutSnapshot,\n  Issue,\n  CommandOptions,\n  Change,\n  Bounds,\n  JoinOptions,\n} from 'quilt-core';\nexport { TabRegistry, themes, themeFamilies } from 'quilt-vanilla';\nexport type {\n  TabRegistration,\n  LayoutTheme,\n  LayoutOptions,\n  MountedLayout,\n  PaneContext,\n  PaneView,\n  PaneRenderer,\n} from 'quilt-vanilla';\n\nexport {\n  PaneRegistry,\n  parseWorkspace,\n  dockLayout,\n  themeProperties,\n  defaultMessages,\n} from 'quilt-vanilla';\nexport type {\n  PaneRegistration,\n  WorkspacePreset,\n  Messages,\n  CloseRequest,\n  KeyBinding,\n  TabBarOptions,\n  TabBarStyle,\n} from 'quilt-vanilla';\n"]}

package/dist/styles.css

@@ -10,12 +10,12 @@
   line-height: 1.45;
   isolation: isolate;
 }
-.layouts *,
-.layouts *::before,
-.layouts *::after {
+.layouts [data-layouts-chrome],
+.layouts [data-layouts-chrome]::before,
+.layouts [data-layouts-chrome]::after {
   box-sizing: border-box;
 }
-.layouts [hidden] {
+.layouts [data-layouts-chrome][hidden] {
   display: none !important;
 }
 .layouts-stage {
@@ -96,7 +96,7 @@
   opacity: 0.4;
   cursor: default;
 }
-.layouts :focus-visible {
+.layouts :where([data-layouts-chrome]):focus-visible {
   outline: 2px solid var(--layouts-focus, #b3decf);
   outline-offset: -2px;
 }
@@ -348,20 +348,20 @@
 
 /* Consumer-owned scrollbar roles also apply to nested application content. */
 .layouts,
-.layouts * {
+.layouts [data-layouts-chrome] {
   scrollbar-width: thin;
   scrollbar-color: var(--layouts-scrollbar-thumb, var(--layouts-line, #39414e))
     var(--layouts-scrollbar-track, transparent);
 }
-.layouts ::-webkit-scrollbar {
+.layouts [data-layouts-chrome]::-webkit-scrollbar {
   width: var(--layouts-scrollbar-size, 6px);
   height: var(--layouts-scrollbar-size, 6px);
 }
-.layouts ::-webkit-scrollbar-thumb {
+.layouts [data-layouts-chrome]::-webkit-scrollbar-thumb {
   background: var(--layouts-scrollbar-thumb, var(--layouts-line, #39414e));
   border-radius: var(--layouts-radius, 5px);
 }
-.layouts ::-webkit-scrollbar-track {
+.layouts [data-layouts-chrome]::-webkit-scrollbar-track {
   background: var(--layouts-scrollbar-track, transparent);
 }
 .layouts-submenu {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quilt-react",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "React split panes and tabs with shared DOM chrome and browser window popouts",
   "type": "module",
   "license": "MIT",
@@ -30,8 +30,8 @@
     "prepack": "node ../../scripts/build-package.mjs react --dependencies"
   },
   "dependencies": {
-    "quilt-core": "0.1.1",
-    "quilt-vanilla": "0.1.1"
+    "quilt-core": "0.2.1",
+    "quilt-vanilla": "0.2.1"
   },
   "sideEffects": [
     "**/*.css"

package/src/index.tsx

@@ -1,4 +1,3 @@
-export type { TabBarOptions, TabBarStyle } from 'quilt-vanilla';
 import {
   Component,
   createElement,
@@ -9,15 +8,15 @@ import {
   useRef,
   useSyncExternalStore,
 } from 'react';
-import type { ComponentType, CSSProperties, ReactNode } from 'react';
+import type { ComponentType, CSSProperties, ReactNode, RefAttributes, ReactElement } from 'react';
 import { createRoot } from 'react-dom/client';
-import { flushSync } from 'react-dom';
-import { mountLayout } from 'quilt-vanilla';
+import { createPortal, flushSync } from 'react-dom';
+import { mountLayout, PaneRegistry } from 'quilt-vanilla';
 import type { LayoutOptions, MountedLayout, PaneContext, PaneRenderer } from 'quilt-vanilla';
 import type { Layout as LayoutSnapshot, LayoutStore } from 'quilt-core';
-export type PaneProps = Omit<PaneContext, 'element'>;
+export type PaneProps<State = unknown> = Omit<PaneContext<State>, 'element'>;
 class Boundary extends Component<
-  { children: ReactNode; onError: (error: unknown) => void },
+  { children: ReactNode; onError: (error: unknown) => void; fallback?: string },
   { failed: boolean }
 > {
   override state = { failed: false };
@@ -28,11 +27,19 @@ class Boundary extends Component<
     this.props.onError(error);
   }
   override render() {
-    return this.state.failed ? null : this.props.children;
+    return this.state.failed
+      ? createElement(
+          'div',
+          { role: 'alert' },
+          this.props.fallback ?? 'Pane could not be rendered.',
+        )
+      : this.props.children;
   }
 }
 /** A separate root is created for each pane view, including companion documents. */
-export function reactRenderer(component: ComponentType<PaneProps>): PaneRenderer {
+export function reactRenderer<State = unknown>(
+  component: ComponentType<PaneProps<State>>,
+): PaneRenderer<State> {
   return (context) => {
     const root = createRoot(context.element);
     let failure: unknown;
@@ -61,7 +68,7 @@ export function reactRenderer(component: ComponentType<PaneProps>): PaneRenderer
         root.render(
           createElement(Boundary, {
             onError: (error) => {
-              context.element.textContent = error instanceof Error ? error.message : String(error);
+              context.reportError(error);
             },
             children: createElement(component, { ...props, pane }),
           }),
@@ -70,97 +77,222 @@ export function reactRenderer(component: ComponentType<PaneProps>): PaneRenderer
     };
   };
 }
-export interface LayoutProps extends Omit<LayoutOptions, 'renderers'> {
-  components: Record<string, ComponentType<PaneProps>>;
+
+interface PortalEntry {
+  id: number;
+  context: PaneContext;
+  component: ComponentType<PaneProps>;
+  ready: () => void;
+  fail: (error: unknown) => void;
+}
+function Ready({ children, onReady }: { children: ReactNode; onReady: () => void }) {
+  useLayoutEffect(onReady, [onReady]);
+  return children;
+}
+function createBridge() {
+  let sequence = 0;
+  let entries: PortalEntry[] = [];
+  const listeners = new Set<() => void>();
+  const emit = () => {
+    for (const listener of listeners) listener();
+  };
+  const cache = new WeakMap<ComponentType<PaneProps>, PaneRenderer>();
+  return {
+    subscribe: (listener: () => void) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    snapshot: () => entries,
+    renderer(component: ComponentType<PaneProps>): PaneRenderer {
+      let renderer = cache.get(component);
+      if (renderer) return renderer;
+      renderer = (context) => {
+        let resolve!: () => void, reject!: (error: unknown) => void;
+        const ready = new Promise<void>((yes, no) => {
+          resolve = yes;
+          reject = no;
+        });
+        void ready.catch(() => {});
+        const entry: PortalEntry = {
+          id: ++sequence,
+          context,
+          component,
+          ready: resolve,
+          fail: reject,
+        };
+        entries = [...entries, entry];
+        emit();
+        return {
+          ready,
+          update(pane) {
+            entry.context = { ...entry.context, pane };
+            entries = [...entries];
+            emit();
+          },
+          dispose() {
+            entries = entries.filter((value) => value !== entry);
+            emit();
+            reject(new Error('Pane disposed before readiness'));
+          },
+        };
+      };
+      cache.set(component, renderer);
+      return renderer;
+    },
+  };
+}
+export type LayoutProps<State = unknown> = Omit<
+  LayoutOptions<State>,
+  'renderers' | 'registry' | 'tabs'
+> & {
   className?: string;
   style?: CSSProperties;
-}
-/** Keep store, components, and adapter callbacks stable to avoid remounting the workspace. */
-export const Layout = forwardRef<MountedLayout, LayoutProps>(function Layout(props, ref) {
-  const {
-    store,
-    tabs,
-    theme,
-    tabBar,
-    components,
-    getPaneState,
-    onError,
-    prepareWindow,
-    openWindow,
-    renderIcon,
-    shortcuts,
-    className,
-    style,
-  } = props;
-  const host = useRef<HTMLDivElement>(null),
-    mounted = useRef<MountedLayout | null>(null);
-  const currentTabBar = useRef(tabBar);
-  currentTabBar.current = tabBar;
-  useLayoutEffect(() => {
-    mounted.current?.setTabBar(tabBar ?? {});
-  }, [tabBar]);
-  const currentTheme = useRef(theme);
-  currentTheme.current = theme;
-  useLayoutEffect(() => {
-    mounted.current?.setTheme(theme ?? {});
-  }, [theme]);
-  const renderers = useMemo(
-    () => Object.fromEntries(Object.entries(components).map(([id, c]) => [id, reactRenderer(c)])),
-    [components],
+} & (
+    | { registry: PaneRegistry<ComponentType<PaneProps<State>>>; components?: never; tabs?: never }
+    | {
+        registry?: undefined;
+        components?: Record<string, ComponentType<PaneProps<State>>>;
+        tabs?: import('quilt-vanilla').TabRegistry;
+      }
   );
-  useImperativeHandle(
-    ref,
-    () => ({
-      setTabBar: (options) => mounted.current?.setTabBar(options),
-      setTheme: (theme) => mounted.current?.setTheme(theme),
-      popout: (...args) => mounted.current?.popout(...args) ?? false,
+const LayoutImpl = forwardRef<MountedLayout, LayoutProps>(function Layout(props, ref) {
+  const { store, components, registry, className, style, ...rest } = props;
+  if (registry && (components || props.tabs))
+    throw new Error('registry cannot be combined with components or tabs');
+  const bridge = useMemo(createBridge, [store]);
+  const entries = useSyncExternalStore(bridge.subscribe, bridge.snapshot, bridge.snapshot);
+  const host = useRef<HTMLDivElement>(null);
+  const mounted = useRef<MountedLayout | null>(null);
+  const latest = useRef(props);
+  latest.current = props;
+  const adapt = () => {
+    const current = latest.current;
+    const {
+      store: _store,
+      components: map,
+      registry: source,
+      className: _className,
+      style: _style,
+      ...options
+    } = current;
+    const complete = Object.fromEntries(
+      [
+        'tabs',
+        'theme',
+        'tabBar',
+        'getPaneState',
+        'onError',
+        'prepareWindow',
+        'openWindow',
+        'renderIcon',
+        'shortcuts',
+        'messages',
+        'popouts',
+        'confirmClose',
+        'registry',
+        'renderers',
+      ].map((key) => [key, undefined]),
+    );
+    if (source) {
+      const adapted = new PaneRegistry<PaneRenderer>(
+        source.list().map((entry) => ({ ...entry, view: bridge.renderer(entry.view) })),
+      );
+      return { ...complete, ...options, registry: adapted };
+    }
+    return {
+      ...complete,
+      ...options,
+      renderers: Object.fromEntries(
+        Object.entries(map ?? {}).map(([key, component]) => [key, bridge.renderer(component)]),
+      ),
+    };
+  };
+  useImperativeHandle(ref, () => {
+    const instance = () => {
+      if (!mounted.current) throw new Error('Layout is not mounted');
+      return mounted.current;
+    };
+    return {
+      setTheme: (theme) => instance().setTheme(theme),
+      setTabBar: (options) => instance().setTabBar(options),
+      updateOptions: (options) => instance().updateOptions(options),
+      refreshTheme: () => instance().refreshTheme(),
+      retryPane: (id) => instance().retryPane(id),
+      exportWorkspace: () => instance().exportWorkspace(),
+      loadWorkspace: (input) => instance().loadWorkspace(input),
+      requestClose: (id, kind) => mounted.current?.requestClose(id, kind) ?? Promise.resolve(false),
+      popout: (id, placement) => mounted.current?.popout(id, placement) ?? Promise.resolve(false),
       returnPane: (id) => mounted.current?.returnPane(id),
       dispose: () => mounted.current?.dispose(),
-    }),
-    [],
-  );
+    };
+  }, []);
   useLayoutEffect(() => {
     let cancelled = false;
     let instance: MountedLayout | undefined;
-    // Pane roots must mount outside the parent React commit (flushSync is forbidden there).
     queueMicrotask(() => {
       if (cancelled || !host.current) return;
-      instance = mountLayout(host.current, {
-        store,
-        renderers,
-        ...(currentTabBar.current ? { tabBar: currentTabBar.current } : {}),
-        ...(tabs ? { tabs } : {}),
-        ...(currentTheme.current ? { theme: currentTheme.current } : {}),
-        ...(getPaneState ? { getPaneState } : {}),
-        ...(onError ? { onError } : {}),
-        ...(prepareWindow ? { prepareWindow } : {}),
-        ...(openWindow ? { openWindow } : {}),
-        ...(renderIcon ? { renderIcon } : {}),
-        ...(shortcuts !== undefined ? { shortcuts } : {}),
-      });
+      instance = mountLayout(host.current, { store, ...adapt() } as LayoutOptions);
       mounted.current = instance;
     });
     return () => {
       cancelled = true;
-      const previous = instance;
-      queueMicrotask(() => previous?.dispose());
-      if (mounted.current === previous) mounted.current = null;
+      if (mounted.current === instance) mounted.current = null;
+      queueMicrotask(() => instance?.dispose());
     };
+  }, [store, bridge]);
+  // Only changes to public options update the DOM adapter; bridge renders don't rebuild chrome.
+  useLayoutEffect(() => {
+    mounted.current?.updateOptions(adapt());
   }, [
-    store,
-    renderers,
-    tabs,
-    getPaneState,
-    onError,
-    prepareWindow,
-    openWindow,
-    renderIcon,
-    shortcuts,
+    components,
+    registry,
+    rest.tabs,
+    rest.theme,
+    rest.tabBar,
+    rest.getPaneState,
+    rest.onError,
+    rest.prepareWindow,
+    rest.openWindow,
+    rest.renderIcon,
+    rest.shortcuts,
+    rest.messages,
+    rest.popouts,
+    rest.confirmClose,
   ]);
+  useLayoutEffect(
+    () => registry?.subscribe(() => mounted.current?.updateOptions(adapt())),
+    [registry, bridge],
+  );
   return (
-    <div ref={host} className={className} style={{ width: '100%', height: '100%', ...style }} />
+    <>
+      <div ref={host} className={className} style={{ width: '100%', height: '100%', ...style }} />
+      {entries.map((entry) => {
+        const { element, ...context } = entry.context;
+        return createPortal(
+          <Boundary
+            fallback={
+              props.messages?.['Pane could not be rendered.'] ?? 'Pane could not be rendered.'
+            }
+            onError={(error) => {
+              entry.fail(error);
+              entry.context.reportError(error);
+            }}
+          >
+            <Ready onReady={entry.ready}>{createElement(entry.component, context)}</Ready>
+          </Boundary>,
+          element,
+          String(entry.id),
+        );
+      })}
+    </>
   );
 });
+/** State is application-owned and shared by every registered pane in this layout. */
+export const Layout = LayoutImpl as <State = unknown>(
+  props: LayoutProps<State> & RefAttributes<MountedLayout<State>>,
+) => ReactElement | null;
 export function useLayoutSnapshot(store: LayoutStore): LayoutSnapshot {
   return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
 }
@@ -194,3 +326,20 @@ export type {
   PaneView,
   PaneRenderer,
 } from 'quilt-vanilla';
+
+export {
+  PaneRegistry,
+  parseWorkspace,
+  dockLayout,
+  themeProperties,
+  defaultMessages,
+} from 'quilt-vanilla';
+export type {
+  PaneRegistration,
+  WorkspacePreset,
+  Messages,
+  CloseRequest,
+  KeyBinding,
+  TabBarOptions,
+  TabBarStyle,
+} from 'quilt-vanilla';