quilt-react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 niko-dellic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# quilt-react
+
+React components and hooks over the shared Quilt engine and DOM renderer. React 18.3 and 19 are supported peers. MIT licensed; ESM, declarations, and sources included.
+
+## Install
+
+```sh
+npm install quilt-react react react-dom
+```
+
+Core and DOM are installed automatically. TypeScript apps also need matching `@types/react` and `@types/react-dom`. Use an ESM-capable bundler with CSS imports. For local archives, see [packaging instructions](https://github.com/niko-dellic/quilt/blob/main/docs/packaging.md).
+
+## Use
+
+Provide `<div id="app"></div>` in your HTML.
+
+```tsx
+import { createRoot } from 'react-dom/client';
+import { Layout, LayoutStore, createLayout } from 'quilt-react';
+import type { PaneProps } from 'quilt-react';
+import 'quilt-react/styles.css';
+
+const store = new LayoutStore(
+  createLayout({
+    pane: { id: 'notes', type: 'notes', title: 'Notes' },
+  }),
+);
+const data = { text: 'Hello' };
+const getPaneState = () => data;
+function Notes({ state }: PaneProps) {
+  const model = state as typeof data;
+  return (
+    <textarea
+      defaultValue={model.text}
+      onChange={(e) => {
+        model.text = e.target.value;
+      }}
+    />
+  );
+}
+const components = { notes: Notes };
+const root = createRoot(document.getElementById('app')!);
+root.render(
+  <Layout
+    store={store}
+    components={components}
+    getPaneState={getPaneState}
+    style={{ width: '100%', height: 600 }}
+  />,
+);
+// Call when removing the workspace:
+function disposeWorkspace() {
+  root.unmount();
+  // The binding queues pane disposal beyond the parent React commit.
+  queueMicrotask(() => store.dispose());
+}
+```
+
+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.
+
+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.
+
+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

@@ -0,0 +1,20 @@
+export type { TabBarOptions, TabBarStyle } from 'quilt-vanilla';
+import type { ComponentType, CSSProperties } from 'react';
+import type { LayoutOptions, MountedLayout, PaneContext, PaneRenderer } from 'quilt-vanilla';
+import type { Layout as LayoutSnapshot, LayoutStore } from 'quilt-core';
+export type PaneProps = Omit<PaneContext, '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>>;
+    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>>;
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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"}

package/dist/index.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx } 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';
+class Boundary extends Component {
+    state = { failed: false };
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        this.props.onError(error);
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}
+/** A separate root is created for each pane view, including companion documents. */
+export function reactRenderer(component) {
+    return (context) => {
+        const root = createRoot(context.element);
+        let failure;
+        const { element: _element, ...props } = context;
+        try {
+            flushSync(() => root.render(createElement(Boundary, {
+                onError: (error) => {
+                    failure = error;
+                },
+                children: createElement(component, props),
+            })));
+            if (failure)
+                throw failure;
+        }
+        catch (error) {
+            root.unmount();
+            throw error;
+        }
+        return {
+            dispose() {
+                root.unmount();
+            },
+            update(pane) {
+                root.render(createElement(Boundary, {
+                    onError: (error) => {
+                        context.element.textContent = error instanceof Error ? error.message : String(error);
+                    },
+                    children: createElement(component, { ...props, pane }),
+                }));
+            },
+        };
+    };
+}
+/** 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(),
+    }), []);
+    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 } : {}),
+            });
+            mounted.current = instance;
+        });
+        return () => {
+            cancelled = true;
+            const previous = instance;
+            queueMicrotask(() => previous?.dispose());
+            if (mounted.current === previous)
+                mounted.current = null;
+        };
+    }, [
+        store,
+        renderers,
+        tabs,
+        getPaneState,
+        onError,
+        prepareWindow,
+        openWindow,
+        renderIcon,
+        shortcuts,
+    ]);
+    return (_jsx("div", { ref: host, className: className, style: { width: '100%', height: '100%', ...style } }));
+});
+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';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"]}

package/dist/styles.css

@@ -0,0 +1,842 @@
+.layouts {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  color: var(--layouts-text, #e5e9f0);
+  background: var(--layouts-bg, #161a20);
+  font-family: var(--layouts-font-family, system-ui, sans-serif);
+  font-size: var(--layouts-font-size, 13px);
+  line-height: 1.45;
+  isolation: isolate;
+}
+.layouts *,
+.layouts *::before,
+.layouts *::after {
+  box-sizing: border-box;
+}
+.layouts [hidden] {
+  display: none !important;
+}
+.layouts-stage {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+}
+.layouts-node {
+  position: absolute;
+  min-width: 0;
+  min-height: 0;
+}
+.layouts-group {
+  display: flex;
+  flex-direction: column;
+  background: var(--layouts-panel, #1d222a);
+}
+.layouts-group::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  pointer-events: none;
+  border: 1px solid;
+  border-color: var(--layouts-edge-top, var(--layouts-line, #39414e))
+    var(--layouts-edge-right, var(--layouts-line, #39414e))
+    var(--layouts-edge-bottom, var(--layouts-line, #39414e))
+    var(--layouts-edge-left, var(--layouts-line, #39414e));
+}
+.layouts-header {
+  height: var(--layouts-header-height, 34px);
+  flex: 0 0 var(--layouts-header-height, 34px);
+  display: flex;
+  align-items: center;
+  background: var(--layouts-header, #242a34);
+  border-bottom: 1px solid var(--layouts-line, #39414e);
+  padding: 4px 6px;
+  gap: 2px;
+}
+.layouts-tabs {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  height: 100%;
+  gap: 3px;
+}
+.layouts-button,
+.layouts-tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--layouts-muted, #a2acba);
+  font: inherit;
+  padding: 5px 9px;
+  cursor: pointer;
+  border-radius: var(--layouts-radius, 5px);
+  white-space: nowrap;
+}
+.layouts-tab {
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  text-overflow: ellipsis;
+  max-width: 240px;
+  overflow: hidden;
+}
+.layouts-tab[aria-selected='true'] {
+  color: var(--layouts-text, #e5e9f0);
+  background: var(--layouts-panel, #1d222a);
+}
+.layouts-button:hover:not(:disabled),
+.layouts-tab:hover {
+  color: var(--layouts-text, #e5e9f0);
+  background: color-mix(in srgb, var(--layouts-text, #e5e9f0) 8%, transparent);
+}
+.layouts-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.layouts :focus-visible {
+  outline: 2px solid var(--layouts-focus, #b3decf);
+  outline-offset: -2px;
+}
+.layouts .layouts-menu:focus-visible {
+  outline: none;
+}
+/* Arrow-key navigation activates the focused tab; its background marks selection. */
+.layouts .layouts-tab[aria-selected='true']:focus-visible {
+  outline: none;
+}
+.layouts-body {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.layouts-pane {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.layouts-divider {
+  position: absolute;
+  z-index: 3;
+  touch-action: none;
+  background: var(--layouts-bg, #161a20);
+}
+.layouts-divider[data-axis='horizontal'] {
+  cursor: col-resize;
+}
+.layouts-divider[data-axis='vertical'] {
+  cursor: row-resize;
+}
+.layouts-divider:hover:not([aria-disabled='true']),
+.layouts-divider:focus-visible {
+  background: var(--layouts-accent, #8bbaaa);
+}
+.layouts-divider[aria-disabled='true'] {
+  cursor: default;
+}
+.layouts-resizing {
+  user-select: none;
+}
+.layouts-placeholder {
+  padding: 24px;
+  color: var(--layouts-muted, #a2acba);
+}
+.layouts-status {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  max-width: min(560px, 90%);
+  padding: 10px 14px;
+  background: var(--layouts-header, #242a34);
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 5px);
+  z-index: 20;
+}
+.layouts-status:empty {
+  display: none;
+}
+.layouts-menu {
+  position: fixed;
+  margin: 0;
+  padding: 5px;
+  width: 240px;
+  max-height: min(520px, 70vh);
+  overflow: auto;
+  background: var(--layouts-header, #242a34);
+  color: var(--layouts-text, #e5e9f0);
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 7px);
+  box-shadow: 0 12px 40px #0005;
+}
+.layouts-menu .layouts-button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  text-align: left;
+  white-space: normal;
+}
+.layouts-menu::backdrop {
+  background: transparent;
+}
+.layouts-group[data-drop]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  pointer-events: none;
+  background: color-mix(in srgb, var(--layouts-accent, #8bbaaa) 22%, transparent);
+  border: 2px solid var(--layouts-accent, #8bbaaa);
+}
+.layouts-group[data-drop='left']::after {
+  right: 50%;
+}
+.layouts-group[data-drop='right']::after {
+  left: 50%;
+}
+.layouts-group[data-drop='top']::after {
+  bottom: 50%;
+}
+.layouts-group[data-drop='bottom']::after {
+  top: 50%;
+}
+.layouts-companion {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+}
+.layouts-companion-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 38px;
+  background: var(--layouts-header, #242a34);
+  border-bottom: 1px solid var(--layouts-line, #39414e);
+  padding: 0 10px;
+}
+.layouts-companion > .layouts-pane {
+  flex: 1;
+  min-height: 0;
+  height: auto;
+}
+
+/* Each tab responds to its allocated width, not the whole viewport. */
+.layouts-tab-item {
+  position: relative;
+  display: flex;
+  flex: 0 1 180px;
+  min-width: 32px;
+  container: layouts-tab / inline-size;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-tab-item[data-active='true'] {
+  min-width: 56px;
+  background: var(--layouts-panel, #1d222a);
+}
+.layouts-tab-item .layouts-tab {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  padding: 0 8px;
+}
+.layouts-tab-icon {
+  flex: 0 0 var(--layouts-icon-size, 16px);
+  width: var(--layouts-icon-size, 16px);
+  height: var(--layouts-icon-size, 16px);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.layouts-tab-icon > * {
+  width: var(--layouts-icon-size, 16px);
+  height: var(--layouts-icon-size, 16px);
+}
+.layouts-tab-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.layouts-tab-item .layouts-tab-close {
+  flex: 0 0 22px;
+  align-self: center;
+  width: 22px;
+  height: 100%;
+  max-height: 24px;
+  padding: 0;
+  margin-right: 3px;
+}
+@container layouts-tab (max-width: 130px) {
+  .layouts-tab-close {
+    display: none;
+  }
+  .layouts-tab-item[data-active='true'] > .layouts-tab-close {
+    display: block;
+  }
+}
+@container layouts-tab (max-width: 95px) {
+  .layouts-tab-label {
+    display: none;
+  }
+  .layouts-tab-item .layouts-tab {
+    justify-content: center;
+    padding-inline: 4px;
+  }
+}
+.layouts-tab-item[data-tab-drop]::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  left: 0;
+  width: 2px;
+  background: var(--layouts-accent, #8bbaaa);
+  pointer-events: none;
+}
+.layouts-tab-item[data-tab-drop='after']::after {
+  left: auto;
+  right: 0;
+}
+
+.layouts-picker {
+  width: min(340px, calc(100vw - 16px));
+}
+.layouts-picker-search {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 5px);
+  background: var(--layouts-panel, #1d222a);
+  color: var(--layouts-text, #e5e9f0);
+  font: inherit;
+}
+.layouts-picker-list {
+  max-height: 280px;
+  overflow: auto;
+  margin-top: 5px;
+}
+.layouts-picker-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px;
+  cursor: pointer;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-picker-option[aria-selected='true'],
+.layouts-picker-option:hover {
+  background: color-mix(in srgb, var(--layouts-accent, #8bbaaa) 20%, transparent);
+}
+.layouts-picker-option strong,
+.layouts-picker-option small {
+  display: block;
+}
+.layouts-picker-option small,
+.layouts-picker-status {
+  color: var(--layouts-muted, #a2acba);
+}
+.layouts-picker-status {
+  padding: 10px;
+}
+
+/* Consumer-owned scrollbar roles also apply to nested application content. */
+.layouts,
+.layouts * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--layouts-scrollbar-thumb, var(--layouts-line, #39414e))
+    var(--layouts-scrollbar-track, transparent);
+}
+.layouts ::-webkit-scrollbar {
+  width: var(--layouts-scrollbar-size, 6px);
+  height: var(--layouts-scrollbar-size, 6px);
+}
+.layouts ::-webkit-scrollbar-thumb {
+  background: var(--layouts-scrollbar-thumb, var(--layouts-line, #39414e));
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts ::-webkit-scrollbar-track {
+  background: var(--layouts-scrollbar-track, transparent);
+}
+.layouts-submenu {
+  position: relative;
+}
+.layouts-submenu > button {
+  width: 100%;
+  text-align: left;
+}
+.layouts-submenu-content {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  border: 1px solid var(--layouts-line);
+  background: var(--layouts-panel);
+}
+.layouts-menu:has(.layouts-submenu-content:not([hidden])) {
+  min-width: 300px;
+}
+.layouts-corner {
+  position: absolute;
+  display: var(--layouts-corner-handle-display, block);
+  width: var(--layouts-corner-handle-size, 8px);
+  height: var(--layouts-corner-handle-size, 8px);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  z-index: 3;
+  touch-action: none;
+  cursor: crosshair;
+}
+.layouts-corner::after {
+  content: '';
+  position: absolute;
+  inset: 2px;
+  border-style: solid;
+  border-width: var(--layouts-corner-handle-border-width, 2px 0 0 2px);
+  border-color: var(--layouts-corner-handle-color, var(--layouts-muted));
+  border-radius: var(--layouts-corner-handle-radius, 0px);
+  background: var(--layouts-corner-handle-fill, transparent);
+  opacity: var(--layouts-corner-handle-opacity, 0.35);
+}
+.layouts-corner:hover::after {
+  opacity: 1;
+}
+.layouts-corner[data-corner='tl'] {
+  top: var(--layouts-corner-handle-inset, 0px);
+  left: var(--layouts-corner-handle-inset, 0px);
+}
+.layouts-corner[data-corner='tr'] {
+  top: var(--layouts-corner-handle-inset, 0px);
+  right: var(--layouts-corner-handle-inset, 0px);
+  transform: rotate(90deg);
+}
+.layouts-corner[data-corner='br'] {
+  bottom: var(--layouts-corner-handle-inset, 0px);
+  right: var(--layouts-corner-handle-inset, 0px);
+  transform: rotate(180deg);
+}
+.layouts-corner[data-corner='bl'] {
+  bottom: var(--layouts-corner-handle-inset, 0px);
+  left: var(--layouts-corner-handle-inset, 0px);
+  transform: rotate(270deg);
+}
+.layouts-group[data-corner-preview] {
+  outline: 2px solid var(--layouts-accent);
+  outline-offset: -2px;
+}
+
+.layouts-menu:has(.layouts-submenu) {
+  overflow: visible;
+}
+.layouts-submenu-content {
+  position: absolute;
+  top: 0;
+  left: calc(100% - 1px);
+  width: 200px;
+  box-shadow: 0 8px 24px #0005;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-submenu[data-side='left'] .layouts-submenu-content {
+  left: auto;
+  right: calc(100% - 1px);
+}
+.layouts-menu:has(.layouts-submenu-content:not([hidden])) {
+  min-width: 0;
+}
+
+.layouts-corner-overlay {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 100;
+}
+.layouts-corner-preview {
+  position: fixed;
+  box-sizing: border-box;
+  border: 2px solid var(--layouts-accent);
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+}
+.layouts-corner-preview[data-corner-preview='split'],
+.layouts-corner-preview[data-corner-preview='join-target'] {
+  background: color-mix(in srgb, var(--layouts-accent) 16%, transparent);
+}
+.layouts-corner-preview[data-corner-preview='join-source'] {
+  border-style: dashed;
+  background: color-mix(in srgb, var(--layouts-bg) 65%, transparent);
+}
+.layouts-corner-preview[data-corner-preview='join'] {
+  border-width: 3px;
+}
+.layouts-corner-label {
+  background: var(--layouts-panel);
+  color: var(--layouts-text);
+  padding: 6px 10px;
+  border-radius: var(--layouts-radius);
+  text-align: center;
+}
+.layouts-corner-label:empty {
+  display: none;
+}
+
+/* Themeable density affects chrome only; structural divider gaps stay in layout JSON. */
+.layouts-menu button,
+.layouts-picker button {
+  min-height: var(--layouts-control-height, 28px);
+}
+.layouts-menu {
+  padding: var(--layouts-spacing, 5px);
+}
+
+/* Tapered chrome overlays the pane; only its painted footprint intercepts input. */
+.layouts-group[data-tab-bar='tapered'] > .layouts-header {
+  position: absolute;
+  inset: 0 auto auto 0;
+  z-index: 2;
+  max-width: 100%;
+  border-bottom-color: transparent;
+}
+.layouts-group[data-tab-bar='tapered'] .layouts-tab-item {
+  flex-basis: var(--layouts-tab-preferred-width, 180px);
+}
+.layouts-header > .layouts-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  height: 100%;
+  padding: 0 7px;
+}
+.layouts-tab-cap {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  height: calc(100% + 1px);
+  overflow: visible;
+  pointer-events: none;
+}
+.layouts-tab-cap path {
+  fill: var(--layouts-header, #242a34);
+  pointer-events: visiblePainted;
+}
+.layouts-header.layouts-tab-measure {
+  position: fixed !important;
+  inset: -10000px auto auto -10000px !important;
+  width: max-content !important;
+  max-width: none !important;
+  visibility: hidden;
+  pointer-events: none;
+}
+.layouts-tab-measure .layouts-tabs {
+  flex: none;
+  overflow: visible;
+}
+.layouts-tab-measure .layouts-tab-item {
+  container: none;
+  flex: none;
+  width: max-content;
+  min-width: 0;
+  max-width: 180px;
+}
+.layouts-tab-measure .layouts-tab-label {
+  display: block;
+}
+.layouts-tab-measure .layouts-tab-close {
+  display: block;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab-label {
+  display: block;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab-close {
+  display: block;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab {
+  padding: 0 8px;
+  justify-content: flex-start;
+}
+
+.layouts-tab-measure .layouts-tab {
+  flex: none;
+  max-width: none;
+}
+.layouts-group[data-tab-bar-filled='false'] .layouts-tab-item {
+  flex-shrink: 0;
+}
+
+.layouts-tab-outline {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  pointer-events: none;
+}
+.layouts-tab-outline path {
+  fill: none;
+  stroke: var(--layouts-line, #39414e);
+  stroke-width: 1px;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+.layouts-chrome-icon {
+  display: inline-block;
+  width: var(--layouts-icon-size, 16px);
+  height: var(--layouts-icon-size, 16px);
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+/* A reserved left rail keeps pane content clear of icon-only controls. */
+.layouts-group[data-tab-placement='left'] {
+  flex-direction: row;
+}
+.layouts-group[data-tab-placement='left'] > .layouts-header {
+  position: relative;
+  inset: auto;
+  width: var(--layouts-header-width, 32px);
+  height: 100%;
+  flex: 0 0 var(--layouts-header-width, 32px);
+  flex-direction: column;
+  padding: 4px;
+  border-bottom: 0;
+  border-right: 1px solid var(--layouts-line, #39414e);
+  min-height: 0;
+  gap: 4px;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tabs {
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item {
+  flex: 0 0 30px;
+  min-width: 0;
+  width: 100%;
+  height: 30px;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item .layouts-tab {
+  padding: 0;
+  justify-content: center;
+  border-radius: var(--layouts-radius, 5px);
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-label,
+.layouts-group[data-tab-placement='left'] .layouts-tab-item > .layouts-tab-close {
+  display: none;
+}
+.layouts-group[data-tab-placement='left'] > .layouts-header > .layouts-button {
+  flex: 0 0 30px;
+  height: 30px;
+  width: 100%;
+  padding: 0;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item[data-tab-drop]::after {
+  inset: 0 2px auto;
+  width: auto;
+  height: 2px;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-item[data-tab-drop='after']::after {
+  inset: auto 2px 0;
+}
+
+.layouts-group[data-tab-placement='left'][data-tab-bar='tapered'] > .layouts-header {
+  position: absolute;
+  inset: 0 auto auto 0;
+  border-right-color: transparent;
+}
+.layouts-group[data-tab-placement='left'] .layouts-tab-cap {
+  left: 0;
+  top: 100%;
+}
+.layouts-group[data-tab-placement='left'] > .layouts-header > .layouts-button .layouts-chrome-icon {
+  transform: rotate(90deg);
+}
+
+.layouts-picker-persistent {
+  position: absolute;
+  z-index: 3;
+  left: 50%;
+  top: calc(50% + var(--layouts-header-height, 32px) / 2);
+  transform: translate(-50%, -50%);
+  width: min(340px, calc(100% - 16px));
+  max-height: calc(100% - var(--layouts-header-height, 32px) - 16px);
+  box-sizing: border-box;
+}
+
+.layouts-tab-tooltip {
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  max-width: min(280px, calc(100vw - 16px));
+  padding: 6px 9px;
+  border: 1px solid var(--layouts-line, #39414e);
+  border-radius: var(--layouts-radius, 5px);
+  background: var(--layouts-panel, #1d222a);
+  color: var(--layouts-text, #e5e9f0);
+  box-shadow: 0 3px 12px #0003;
+  font-size: 12px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+/* Gapless frozen boundaries are decorative and never intercept pane input. */
+[data-frozen-border='horizontal']::after,
+[data-frozen-border='vertical']::after {
+  content: '';
+  position: absolute;
+  z-index: 4;
+  pointer-events: none;
+  background: var(--layouts-frozen-pane-border, var(--layouts-line, #39414e));
+}
+[data-frozen-border='horizontal']::after {
+  left: calc(var(--layouts-frozen-boundary) - 1px);
+  top: 0;
+  width: 1px;
+  height: 100%;
+}
+[data-frozen-border='vertical']::after {
+  top: calc(var(--layouts-frozen-boundary) - 1px);
+  left: 0;
+  height: 1px;
+  width: 100%;
+}
+
+/* The split owns shared frozen borders; descendants omit those same edges. */
+.layouts-group[data-shared-edges~='top'] {
+  --layouts-edge-top: transparent;
+}
+.layouts-group[data-shared-edges~='right'] {
+  --layouts-edge-right: transparent;
+}
+.layouts-group[data-shared-edges~='bottom'] {
+  --layouts-edge-bottom: transparent;
+}
+.layouts-group[data-shared-edges~='left'] {
+  --layouts-edge-left: transparent;
+}
+
+.layouts-tabs:empty {
+  display: none;
+}
+
+.layouts-empty {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--layouts-line, #39414e);
+  cursor: pointer;
+}
+.layouts-empty:disabled {
+  cursor: default;
+}
+.layouts-empty:focus-visible {
+  outline: 1px solid var(--layouts-accent, #8bbaaa);
+  outline-offset: -3px;
+}
+.layouts-empty > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1;
+}
+
+.layouts-picker-search:focus,
+.layouts-picker-search:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.layouts-group[data-tab-attachment='floating'][data-tab-bar] > .layouts-header {
+  position: absolute;
+  inset: var(--layouts-floating-inset-y, 8px) auto auto var(--layouts-floating-inset-x, 8px);
+  max-width: calc(100% - 2 * var(--layouts-floating-inset-x, 8px));
+  max-height: calc(100% - 2 * var(--layouts-floating-inset-y, 8px));
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--layouts-line, #39414e);
+}
+.layouts-header[data-tab-bar-shape='rounded'] {
+  border-radius: var(--layouts-radius, 5px);
+}
+
+.layouts-group[data-tab-attachment='floating'][data-tab-bar]
+  > .layouts-header[data-tab-corners='rounded'] {
+  border-radius: var(--layouts-radius, 5px);
+  box-shadow: inset 0 0 0 1px var(--layouts-line, #39414e);
+}
+.layouts-group[data-tab-attachment='floating'][data-tab-bar]
+  > .layouts-header[data-tab-corners='capsule'] {
+  border-radius: 999px;
+}
+.layouts-group[data-tab-attachment='floating'][data-tab-bar]
+  > .layouts-header[data-tab-corners='fitted'] {
+  border-radius: 0;
+}
+
+/* Display is independent of orientation; automatic follows each tab's width. */
+@container layouts-tab (min-width: 96px) {
+  .layouts-group[data-tab-placement='left'][data-tab-display='automatic'] .layouts-tab-label {
+    display: block;
+  }
+  .layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+    .layouts-tab-item
+    .layouts-tab {
+    padding: 0 8px;
+    justify-content: flex-start;
+  }
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic'] > .layouts-header {
+  min-width: max(32px, calc(var(--layouts-icon-size, 16px) + 10px));
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']:has(> .layouts-tab-close) {
+  flex-direction: column;
+  flex-basis: 52px;
+  height: 52px;
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']:has(> .layouts-tab-close)
+  > .layouts-tab {
+  flex: 0 0 30px;
+  width: 100%;
+}
+.layouts-group[data-tab-placement='left'][data-tab-display='automatic']
+  .layouts-tab-item[data-active='true']
+  > .layouts-tab-close {
+  display: block;
+  flex: 0 0 22px;
+  height: 22px;
+  margin: 0;
+}
+.layouts-group[data-tab-display='compact'] .layouts-tab-label,
+.layouts-group[data-tab-display='compact'] .layouts-tab-close,
+.layouts-header[data-tab-display='compact'] .layouts-tab-label,
+.layouts-header[data-tab-display='compact'] .layouts-tab-close {
+  display: none;
+}
+.layouts-group[data-tab-display='compact'] .layouts-tab-item .layouts-tab,
+.layouts-header[data-tab-display='compact'] .layouts-tab-item .layouts-tab {
+  justify-content: center;
+  padding-inline: 8px;
+}
+.layouts-group[data-tab-placement='top'][data-tab-display='compact'] .layouts-tab-item,
+.layouts-header.layouts-tab-measure[data-tab-display='compact'] .layouts-tab-item {
+  flex: 0 0 calc(var(--layouts-icon-size, 16px) + 16px);
+  min-width: calc(var(--layouts-icon-size, 16px) + 16px);
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "quilt-react",
+  "version": "0.1.0",
+  "description": "React split panes and tabs with shared DOM chrome and browser window popouts",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/niko-dellic/quilt.git",
+    "directory": "packages/react"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-package.mjs react",
+    "prepack": "node ../../scripts/build-package.mjs react --dependencies"
+  },
+  "dependencies": {
+    "quilt-core": "0.1.0",
+    "quilt-vanilla": "0.1.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "homepage": "https://github.com/niko-dellic/quilt/tree/main/packages/react#readme",
+  "bugs": {
+    "url": "https://github.com/niko-dellic/quilt/issues"
+  },
+  "keywords": [
+    "layout",
+    "split-pane",
+    "tabs",
+    "workspace",
+    "typescript",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,196 @@
+export type { TabBarOptions, TabBarStyle } from 'quilt-vanilla';
+import {
+  Component,
+  createElement,
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useSyncExternalStore,
+} from 'react';
+import type { ComponentType, CSSProperties, ReactNode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { flushSync } from 'react-dom';
+import { mountLayout } 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'>;
+class Boundary extends Component<
+  { children: ReactNode; onError: (error: unknown) => void },
+  { failed: boolean }
+> {
+  override state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  override componentDidCatch(error: unknown) {
+    this.props.onError(error);
+  }
+  override render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+/** A separate root is created for each pane view, including companion documents. */
+export function reactRenderer(component: ComponentType<PaneProps>): PaneRenderer {
+  return (context) => {
+    const root = createRoot(context.element);
+    let failure: unknown;
+    const { element: _element, ...props } = context;
+    try {
+      flushSync(() =>
+        root.render(
+          createElement(Boundary, {
+            onError: (error) => {
+              failure = error;
+            },
+            children: createElement(component, props),
+          }),
+        ),
+      );
+      if (failure) throw failure;
+    } catch (error) {
+      root.unmount();
+      throw error;
+    }
+    return {
+      dispose() {
+        root.unmount();
+      },
+      update(pane) {
+        root.render(
+          createElement(Boundary, {
+            onError: (error) => {
+              context.element.textContent = error instanceof Error ? error.message : String(error);
+            },
+            children: createElement(component, { ...props, pane }),
+          }),
+        );
+      },
+    };
+  };
+}
+export interface LayoutProps extends Omit<LayoutOptions, 'renderers'> {
+  components: Record<string, ComponentType<PaneProps>>;
+  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],
+  );
+  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(),
+    }),
+    [],
+  );
+  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 } : {}),
+      });
+      mounted.current = instance;
+    });
+    return () => {
+      cancelled = true;
+      const previous = instance;
+      queueMicrotask(() => previous?.dispose());
+      if (mounted.current === previous) mounted.current = null;
+    };
+  }, [
+    store,
+    renderers,
+    tabs,
+    getPaneState,
+    onError,
+    prepareWindow,
+    openWindow,
+    renderIcon,
+    shortcuts,
+  ]);
+  return (
+    <div ref={host} className={className} style={{ width: '100%', height: '100%', ...style }} />
+  );
+});
+export function useLayoutSnapshot(store: LayoutStore): LayoutSnapshot {
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+}
+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';