0.1.3 candidate · PaneShell editor integration

rom-ui/paneshell composes host-supplied document editors with Dockview Svelte. Dockview owns tabs, splits and floating windows. ROM or your application owns document contents, permissions and saves. PaneShell uses Dockview's retained renderer to keep editor DOM attached during tab activation. Saved layouts cannot select a detaching renderer. Omitted renderer metadata is normalized to retained rendering.

Document and layout ownership

Supply document metadata through bind:documents. Each document has a unique id, a title and an optional dirty flag. The shell supports up to 128 documents. A dirty flag does not establish whether a close operation is permitted.

Supply onclose(document) to decide whether a document can close. Return true only after the host approves closure. A rejected decision retains the editor. Pending decisions from an old authority cannot close a replacement document.

Use onlayout to observe the native manager's layout projection. This callback does not control a second layout model. Call saveLayout() and restoreLayout(snapshot) on the shell instance to preserve arrangements. Restoration checks the disclosed document set, native fields and maximized paths before calling Dockview. Malformed snapshots return false and report an error through onerror.

Change authority when the editor lifetime changes, including session or permission replacement. The shell destroys the old editor subtree. The host must also replace its private drafts and disclosed document list. Use a stable, nonsecret scalar lifetime token when storing serialized layouts. Object tokens compare by identity after loading. A layout snapshot does not grant access to a Resource.

Document search

Use the Find document toolbar button to open the shared command dialog. Search matches the supplied document IDs and titles. Keyboard selection activates the existing native panel without creating another editor. Escape closes the dialog and returns focus to its opener. Host navigation can call selectDocument(id) on the shell instance. It returns false for unavailable panels or pending close decisions. The command dialog is recreated when authority changes. This operation does not save a Resource or perform a server query.

Navigation

Supply navigation(close) to render host navigation in the shared Sidebar. After selectDocument(id) returns true, call close() to close the mobile Sheet. Desktop navigation remains collapsible. Each embedded shell disables shared sidebar cookies and global shortcuts. The navigation subtree is recreated when authority changes.

Inspector

Supply an inspector snippet to add a responsive details panel. The inspector starts closed. Use its toolbar button or bind:inspectorOpen to control visibility. The desktop separator uses PaneForge. Drag it or use Arrow keys while it has focus to resize the inspector. PaneForge controls outer chrome widths; Dockview still controls document tabs, splits and floating windows. On narrow screens, the shared ResponsiveDetails component presents a modal Sheet with focus return. The same inspector input survives desktop/mobile relocation. Authority replacement closes and recreates the inspector subtree. The host must also replace its private inspector drafts when authority changes.

CodeMirror composition

Install the qualified editor packages separately. The default ROM UI controls entry does not import them.

corepack pnpm add --save-exact svelte-codemirror-editor@2.1.0 codemirror@6.0.2

<script lang="ts">
  import { PaneShell, type PaneDocument } from 'rom-ui/paneshell';
  import CodeMirror from 'svelte-codemirror-editor';
  let documents = $state([{ id: 'code', title: 'Code editor' }]);
  let drafts = $state<Record<string, string>>({ code: 'const enabled = false;' });
</script>

{#snippet editor(document: PaneDocument)}
  <CodeMirror
    value={drafts[document.id] ?? ''}
    onchange={value => drafts = { ...drafts, [document.id]: value }}
    nodebounce
    useTab={false}
    onready={view => view.contentDOM.setAttribute('aria-label', document.title)}
  />
{/snippet}

<PaneShell bind:documents authority="code-example" {editor} />

nodebounce updates host drafts without the wrapper's change debounce. useTab={false} lets Tab move focus out of the editor. Supply language extensions through the editor's lang or extensions props. Use readonly to prevent document edits while retaining selection and copy behavior. CodeMirror reports this state with aria-readonly; its DOM can remain content-editable.

Connect saves through the existing ROM Studio session and recovery composition. Keep candidate editor text separate from validated wire values and confirmed Resource state. This example contains local drafts and does not perform a ROM action.

The Svelte wrapper documentation describes its props and editor callbacks.

Qualification scope

The installed consumer tests cover editor selection, undo history, one mounted view during float/dock operations and authority replacement. They also hydrate server-rendered PaneShell markup in Chromium and WebKit without hydration warnings. CodeMirror mounts its editor contents on the client; server rendering emits its container.

The gallery includes a local CodeMirror workspace, read-only controls and a copyable composition example. These checks do not establish ROM attachment, persistence or release completion.

Import validatePaneLayout from rom-ui/paneshell to admit saved layout metadata before changing the mounted document list. Supply the exact document IDs permitted by the host. The function returns a detached layout with retained editor rendering. Resource access remains enforced by ROM. After an authorized settings read, bind the snapshot to the current authority before restoration.