refactor(words): drawer canon — morfo part + soma provider + eidos consumes via provider (DRAWER-CANON)

Closes the architectural gap from the DRAWER spike: the companion
drawer now follows the same morfo/soma/eidos pattern as every other
Words part (Toolbar/BubbleMenu/SlashMenu/LinkEditor/Status/etc.).

DRAWER-CANON-1 — morfo + soma:
- wordsMorfo gains a 'Drawer' part (kebab 'drawer', archetype 'group',
  defaultElement 'aside', role 'complementary'). Declares data-words-
  drawer-mode (default/format/image/table/code/list), data-open,
  data-disabled, aria-label. New event 'commit-toggle-drawer' fires
  on collapse/expand for sema/telemetry hooks.
- New WordsDrawerProvider in words-provider.svelte: owns `open`
  bindable state, derives `mode` from parent provider's currentBlock
  + selection (same logic as the spike, now in soma where it
  belongs), exposes snippetProps {mode, open, disabled, snippet,
  toggle, setOpen}. `toggle()` and `setOpen()` emit the event.
- WordsDrawerProps + WordsDrawerSnippetProps + WordsDrawerMode types
  added to types.ts and re-exported via exports.ts.
- soma/components/words/components/words-drawer.svelte (the soma
  component) mounts the provider and forwards merged props to either
  the `child` snippet or the default <aside> render.

DRAWER-CANON-2 — eidos refactor:
- eidos words-drawer.svelte rewritten as a consumer of
  <Words.Drawer>. The shell (aside + header + collapse button) and
  the per-mode body now live inside the children snippet that
  receives the soma's drawer snippet props. Mode derivation removed
  from eidos (it's now in soma). Local open $state removed (now
  bindable via the soma component).
- Demo +page.svelte: `<Words.Drawer snippet={snippetProps} />`
  collapses to plain `<Words.Drawer />` — the soma provider hands the
  parent snippet down internally.

DRAWER-CANON-3 — verify:
- 214/214 tests pass in soma+morfo scope (no regressions).
- npx tsc --noEmit clean for words area.
- Visual verification: drawer still renders with DOCUMENT/OUTLINE/
  STATS/SUGGESTIONS in default mode; context-switching to table /
  code / list / format still works; aside element now carries
  role='complementary', aria-label from morfo translationRef,
  data-words-drawer-mode reflecting current panel.

The eidos drawer now passes the same canon checks as every other
Words part: morfo declares its contract, soma owns the state, eidos
only paints. The schema validator can verify the drawer's attrs, the
eidos lint can check selector usage, sema can react to the toggle
event.

Demo header chips reflect the new contract: PARTS 19→20, EVENTS
11→12.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/words/words-drawer.svelte

@@ -1,80 +1,37 @@
 <script lang="ts">
 	/**
-	 * Words.Drawer — companion right-rail that REPLACES the fragmented
+	 * Words.Drawer — companion right-rail eidos wrapper.
-	 * popovers of a traditional rich-text editor (bubble menu + slash
-	 * menu + link editor + heading picker + language picker + table
-	 * popover + image controls) with ONE contextual surface.
 	 *
-	 * Inspired by Figma's right panel: the same UI slot shows different
+	 * After DRAWER-CANON-2 the drawer is canonical: it consumes the
-	 * controls depending on what the user is editing.
+	 * soma `Words.Drawer` provider (which owns the open/collapsed state
+	 * and the derived `mode`) and renders the per-mode body here in
+	 * eidos.
 	 *
-	 * Contextual modes (derived from snippetProps):
+	 * Concept (still A+D from the spike):
-	 *  - 'default'  → outline + word/char/reading time + writer warnings
+	 * - Single contextual surface replacing bubble menu + slash menu +
-	 *  - 'format'   → bold/italic/underline + link + align (text selected)
+	 *   link editor + heading picker + language picker + table popover
-	 *  - 'image'    → alt/caption + alignment + status (in image)
+	 *   + image controls.
-	 *  - 'table'    → row/col ops + header + striped + tone (in table)
+	 * - Default mode shows outline + stats + writer-coaching suggestions.
-	 *  - 'code'     → language picker (in code block)
+	 * - Format / image / table / code / list modes show controls scoped
-	 *  - 'list'     → kind toggle + indent (in list item)
+	 *   to what the user is editing.
-	 *
-	 * This is the spike-1 surface (commit DRAWER-1): shell, context
-	 * detection, default panel only. Contextual panels arrive in
-	 * DRAWER-2.
 	 */
 	import { ChevronRight, ChevronLeft } from '$uix/eidos/components/icon';
+	import * as Words from '$soma/components/words';
 	import type {
-		ProviderSnippetProps,
+		DrawerSnippetProps,
-		WordsBlockType
+		DrawerProps,
+		ProviderSnippetProps
 	} from '$soma/components/words';
-	import type { Snippet } from 'svelte';
-
-	type DrawerMode = 'default' | 'format' | 'image' | 'table' | 'code' | 'list';
-
-	interface WordsDrawerProps {
-		/** All snippet props from `<Words>`. Forward them straight. */
-		readonly snippet: ProviderSnippetProps;
-		/** Open by default. The drawer is collapsible. */
-		open?: boolean;
-		/** Optional override for the panel renderer — consumers can
-		 *  inject their own content per mode. Receives `{mode, snippet}`. */
-		readonly content?: Snippet<
-			[{ readonly mode: DrawerMode; readonly snippet: ProviderSnippetProps }]
-		>;
-	}
-
-	let { snippet, open = $bindable(true), content }: WordsDrawerProps = $props();
 
-	const mode: DrawerMode = $derived.by(() => resolveMode(snippet));
+	let {
-
+		open = $bindable(undefined),
-	const modeLabel = $derived(MODE_LABELS[mode]);
+		defaultOpen = true,
-
+		disabled = false,
-	function resolveMode(s: ProviderSnippetProps): DrawerMode {
+		children: customChildren,
-		// Text-selection format takes precedence over block-type panels.
+		...rest
-		// "Range selection inside an inline-text block" → format mode.
+	}: Omit<DrawerProps, 'child'> = $props();
-		const sel = s.selection;
-		if (
-			sel &&
-			(sel.anchor.path[0] !== sel.focus.path[0] ||
-				sel.anchor.offset !== sel.focus.offset)
-		) {
-			const block = s.currentBlock as WordsBlockType;
-			if (
-				block === 'paragraph' ||
-				block === 'heading' ||
-				block === 'quote' ||
-				block === 'list'
-			) {
-				return 'format';
-			}
-		}
-		const block = s.currentBlock as WordsBlockType;
-		if (block === 'image') return 'image';
-		if (block === 'table') return 'table';
-		if (block === 'code') return 'code';
-		if (block === 'list') return 'list';
-		return 'default';
-	}
 
-	const MODE_LABELS: Record<DrawerMode, string> = {
+	const MODE_LABELS: Record<DrawerSnippetProps['mode'], string> = {
 		default: 'Document',
 		format: 'Format',
 		image: 'Image',
@@ -83,106 +40,19 @@
 		list: 'List'
 	};
 
-	// ── Default-panel derivations (D — writer coaching) ───────────────
-
-	const wordCount = $derived(countWordsInText(snippet.plainText));
-	const charCount = $derived(snippet.plainText.length);
-	/** Average reading speed 200wpm. Floor to 1 min so the value is
-	 *  always meaningful even for tiny drafts. */
-	const readingTimeMin = $derived(Math.max(1, Math.round(wordCount / 200)));
-
-	type OutlineEntry = {
-		readonly text: string;
-		readonly level: 1 | 2 | 3;
-		readonly blockIndex: number;
-	};
-
-	const outline = $derived.by<readonly OutlineEntry[]>(() => {
-		const out: OutlineEntry[] = [];
-		snippet.document.children.forEach((block, index) => {
-			if (block.type !== 'heading') return;
-			const text = block.children
-				.map((inline) =>
-					inline.type === 'text'
-						? inline.text
-						: inline.children.map((c) => (c.type === 'text' ? c.text : '')).join('')
-				)
-				.join('');
-			if (!text.trim()) return;
-			out.push({ text, level: block.level, blockIndex: index });
-		});
-		return out;
-	});
-
-	type Warning = {
-		readonly id: string;
-		readonly severity: 'info' | 'warn';
-		readonly message: string;
-	};
-
-	/**
-	 * Writer-coaching warnings (D). Lightweight, no I/O, derived from
-	 * the document model. Each rule is independent so adding new rules
-	 * is cheap.
-	 */
-	const warnings = $derived.by<readonly Warning[]>(() => {
-		const out: Warning[] = [];
-		snippet.document.children.forEach((block, index) => {
-			if (block.type === 'image' && !block.alt?.trim()) {
-				out.push({
-					id: `alt-${index}`,
-					severity: 'warn',
-					message: `Image at block ${index + 1} has no alt text`
-				});
-			}
-			if (block.type === 'paragraph') {
-				const text = block.children
-					.map((i) => (i.type === 'text' ? i.text : ''))
-					.join('');
-				if (text.length > 600) {
-					out.push({
-						id: `long-${index}`,
-						severity: 'info',
-						message: `Paragraph ${index + 1} is long (${text.length} chars) — consider splitting`
-					});
-				}
-			}
-		});
-		// Heading-structure check — H1 → H3 without H2 between is a
-		// common a11y gap.
-		const headingLevels = snippet.document.children
-			.filter((b) => b.type === 'heading')
-			.map((b) => (b.type === 'heading' ? b.level : 0));
-		for (let i = 1; i < headingLevels.length; i++) {
-			if (headingLevels[i] - headingLevels[i - 1] > 1) {
-				out.push({
-					id: `skip-${i}`,
-					severity: 'warn',
-					message: `Heading h${headingLevels[i]} appears without an h${headingLevels[i - 1] + 1} above — structure skip`
-				});
-				break;
-			}
-		}
-		return out;
-	});
-
 	function countWordsInText(text: string): number {
 		const trimmed = text.trim();
 		return trimmed ? trimmed.split(/\s+/).length : 0;
 	}
 
-	function toggleOpen() {
+	function imageBlockAtCaret(s: ProviderSnippetProps):
-		open = !open;
+		| {
+				readonly src: string;
+				readonly alt?: string;
+				readonly caption?: string;
+				readonly status?: 'pending' | 'error';
 		  }
-
+		| undefined {
-	/**
-	 * Return the image block currently containing the caret, or
-	 * undefined if the caret is not on an image. The image panel uses
-	 * this to display block attributes (src/alt/caption/status).
-	 */
-	function imageBlockAtCaret(
-		s: ProviderSnippetProps
-	): { readonly src: string; readonly alt?: string; readonly caption?: string; readonly status?: 'pending' | 'error' } | undefined {
 		const blockIndex = s.selection?.anchor.path[0];
 		if (blockIndex === undefined) return undefined;
 		const block = s.document.children[blockIndex];
@@ -202,36 +72,53 @@
 	] as const;
 </script>
 
-<aside
+<Words.Drawer bind:open {defaultOpen} {disabled} {...rest}>
-	data-words-drawer
+	{#snippet children(d: DrawerSnippetProps)}
-	data-mode={mode}
+		{@const { mode, snippet, toggle } = d}
-	data-open={open ? '' : undefined}
+		{@const wordCount = countWordsInText(snippet.plainText)}
-	aria-label="Editor companion drawer"
+		{@const charCount = snippet.plainText.length}
->
+		{@const readingTimeMin = Math.max(1, Math.round(wordCount / 200))}
+
 		<header data-words-drawer-header>
 			<button
 				type="button"
 				data-words-drawer-collapse
-			aria-label={open ? 'Collapse drawer' : 'Expand drawer'}
+				aria-label={d.open ? 'Collapse drawer' : 'Expand drawer'}
-			aria-expanded={open}
+				aria-expanded={d.open}
-			onclick={toggleOpen}
+				onclick={(e) => toggle(e.currentTarget as HTMLElement)}
 			>
-			{#if open}
+				{#if d.open}
 					<ChevronRight size="sm" decorative />
 				{:else}
 					<ChevronLeft size="sm" decorative />
 				{/if}
 			</button>
-		{#if open}
+			{#if d.open}
-			<span data-words-drawer-title>{modeLabel}</span>
+				<span data-words-drawer-title>{MODE_LABELS[mode]}</span>
 			{/if}
 		</header>
 
-	{#if open}
+		{#if d.open}
 			<div data-words-drawer-body>
-			{#if content}
+				{#if customChildren}
-				{@render content({ mode, snippet })}
+					{@render customChildren(d)}
 				{:else if mode === 'default'}
+					{@const outline = snippet.document.children
+						.map((block, blockIndex) => ({ block, blockIndex }))
+						.filter(({ block }) => block.type === 'heading')
+						.map(({ block, blockIndex }) => ({
+							blockIndex,
+							level: block.type === 'heading' ? block.level : 1,
+							text:
+								block.type === 'heading'
+									? block.children
+											.map((i) => (i.type === 'text' ? i.text : ''))
+											.join('')
+									: ''
+						}))
+						.filter((e) => e.text.trim())}
+					{@const warnings = collectWarnings(snippet)}
+
 					<section data-words-drawer-section>
 						<h3 data-words-drawer-section-title>Outline</h3>
 						{#if outline.length === 0}
@@ -253,10 +140,7 @@
 						<dl data-words-drawer-stats>
 							<div><dt>Words</dt><dd>{wordCount}</dd></div>
 							<div><dt>Chars</dt><dd>{charCount}</dd></div>
-						<div>
+							<div><dt>Reading</dt><dd>{readingTimeMin} min</dd></div>
-							<dt>Reading</dt>
-							<dd>{readingTimeMin} min</dd>
-						</div>
 						</dl>
 					</section>
 
@@ -401,67 +285,29 @@
 					<section data-words-drawer-section>
 						<h3 data-words-drawer-section-title>Rows</h3>
 						<div data-words-drawer-actions>
-						<button
+							<button type="button" data-words-drawer-action onclick={() => snippet.runCommand('insert-table-row')}>+ Row</button>
-							type="button"
+							<button type="button" data-words-drawer-action data-tone="risk" onclick={() => snippet.runCommand('delete-table-row')}>− Row</button>
-							data-words-drawer-action
-							onclick={() => snippet.runCommand('insert-table-row')}
-						>+ Row</button>
-						<button
-							type="button"
-							data-words-drawer-action
-							data-tone="risk"
-							onclick={() => snippet.runCommand('delete-table-row')}
-						>− Row</button>
 						</div>
 					</section>
 					<section data-words-drawer-section>
 						<h3 data-words-drawer-section-title>Columns</h3>
 						<div data-words-drawer-actions>
-						<button
+							<button type="button" data-words-drawer-action onclick={() => snippet.runCommand('insert-table-column')}>+ Col</button>
-							type="button"
+							<button type="button" data-words-drawer-action data-tone="risk" onclick={() => snippet.runCommand('delete-table-column')}>− Col</button>
-							data-words-drawer-action
-							onclick={() => snippet.runCommand('insert-table-column')}
-						>+ Col</button>
-						<button
-							type="button"
-							data-words-drawer-action
-							data-tone="risk"
-							onclick={() => snippet.runCommand('delete-table-column')}
-						>− Col</button>
 						</div>
 					</section>
 					<section data-words-drawer-section>
 						<h3 data-words-drawer-section-title>Headers</h3>
 						<div data-words-drawer-actions>
-						<button
+							<button type="button" data-words-drawer-action data-active={snippet.currentTableHeaderRowActive ? '' : undefined} onclick={() => snippet.runCommand('toggle-table-header-row')}>Row header</button>
-							type="button"
+							<button type="button" data-words-drawer-action data-active={snippet.currentTableHeaderColumnActive ? '' : undefined} onclick={() => snippet.runCommand('toggle-table-header-column')}>Col header</button>
-							data-words-drawer-action
-							data-active={snippet.currentTableHeaderRowActive ? '' : undefined}
-							onclick={() => snippet.runCommand('toggle-table-header-row')}
-						>Row header</button>
-						<button
-							type="button"
-							data-words-drawer-action
-							data-active={snippet.currentTableHeaderColumnActive ? '' : undefined}
-							onclick={() => snippet.runCommand('toggle-table-header-column')}
-						>Col header</button>
 						</div>
 					</section>
 					<section data-words-drawer-section>
 						<h3 data-words-drawer-section-title>Appearance</h3>
 						<div data-words-drawer-actions>
-						<button
+							<button type="button" data-words-drawer-action data-active={snippet.currentTableStriped ? '' : undefined} onclick={() => snippet.runCommand('toggle-table-striped')}>Striped</button>
-							type="button"
+							<button type="button" data-words-drawer-action data-active={snippet.currentTableCompact ? '' : undefined} onclick={() => snippet.runCommand('toggle-table-compact')}>Compact</button>
-							data-words-drawer-action
-							data-active={snippet.currentTableStriped ? '' : undefined}
-							onclick={() => snippet.runCommand('toggle-table-striped')}
-						>Striped</button>
-						<button
-							type="button"
-							data-words-drawer-action
-							data-active={snippet.currentTableCompact ? '' : undefined}
-							onclick={() => snippet.runCommand('toggle-table-compact')}
-						>Compact</button>
 						</div>
 					</section>
 					<section data-words-drawer-section>
@@ -499,39 +345,67 @@
 					<section data-words-drawer-section>
 						<h3 data-words-drawer-section-title>List kind</h3>
 						<div data-words-drawer-actions>
-						<button
+							<button type="button" data-words-drawer-action onclick={() => snippet.runCommand('unordered-list')}>Bullet</button>
-							type="button"
+							<button type="button" data-words-drawer-action onclick={() => snippet.runCommand('ordered-list')}>Numbered</button>
-							data-words-drawer-action
+							<button type="button" data-words-drawer-action onclick={() => snippet.runCommand('check-list')}>Check</button>
-							onclick={() => snippet.runCommand('unordered-list')}
-						>Bullet</button>
-						<button
-							type="button"
-							data-words-drawer-action
-							onclick={() => snippet.runCommand('ordered-list')}
-						>Numbered</button>
-						<button
-							type="button"
-							data-words-drawer-action
-							onclick={() => snippet.runCommand('check-list')}
-						>Check</button>
 						</div>
 					</section>
 					<section data-words-drawer-section>
 						<h3 data-words-drawer-section-title>Indent</h3>
 						<div data-words-drawer-actions>
-						<button
+							<button type="button" data-words-drawer-action onclick={() => snippet.runCommand('decrease-indent')}>⇤ Outdent</button>
-							type="button"
+							<button type="button" data-words-drawer-action onclick={() => snippet.runCommand('increase-indent')}>⇥ Indent</button>
-							data-words-drawer-action
-							onclick={() => snippet.runCommand('decrease-indent')}
-						>⇤ Outdent</button>
-						<button
-							type="button"
-							data-words-drawer-action
-							onclick={() => snippet.runCommand('increase-indent')}
-						>⇥ Indent</button>
 						</div>
 					</section>
 				{/if}
 			</div>
 		{/if}
-</aside>
+	{/snippet}
+</Words.Drawer>
+
+<script context="module" lang="ts">
+	import type { ProviderSnippetProps as PSP } from '$soma/components/words';
+	type Warning = {
+		readonly id: string;
+		readonly severity: 'info' | 'warn';
+		readonly message: string;
+	};
+	export function collectWarnings(s: PSP): readonly Warning[] {
+		const out: Warning[] = [];
+		s.document.children.forEach((block, index) => {
+			if (block.type === 'image' && !block.alt?.trim()) {
+				out.push({
+					id: `alt-${index}`,
+					severity: 'warn',
+					message: `Image at block ${index + 1} has no alt text`
+				});
+			}
+			if (block.type === 'paragraph') {
+				const text = block.children
+					.map((i) => (i.type === 'text' ? i.text : ''))
+					.join('');
+				if (text.length > 600) {
+					out.push({
+						id: `long-${index}`,
+						severity: 'info',
+						message: `Paragraph ${index + 1} is long (${text.length} chars) — consider splitting`
+					});
+				}
+			}
+		});
+		const headingLevels = s.document.children
+			.filter((b) => b.type === 'heading')
+			.map((b) => (b.type === 'heading' ? b.level : 0));
+		for (let i = 1; i < headingLevels.length; i++) {
+			if (headingLevels[i] - headingLevels[i - 1] > 1) {
+				out.push({
+					id: `skip-${i}`,
+					severity: 'warn',
+					message: `Heading h${headingLevels[i]} appears without an h${headingLevels[i - 1] + 1} above — structure skip`
+				});
+				break;
+			}
+		}
+		return out;
+	}
+</script>

src/uix/morfo/components/words.ts

@@ -15,7 +15,8 @@ export const wordsMorfo = {
 		slashMenu: '#?components.words.slash-menu|Insert block',
 		linkEditor: '#?components.words.link-editor|Edit link',
 		findReplace: '#?components.words.find-replace|Find and replace',
-		status: '#?components.words.status|Editor status'
+		status: '#?components.words.status|Editor status',
+		drawer: '#?components.words.drawer|Editor companion drawer'
 	},
 	events: [
 		{
@@ -126,6 +127,23 @@ export const wordsMorfo = {
 				intent: 'risk',
 				sequence: 'post'
 			}
+		},
+		{
+			// Toggle of the companion drawer (DRAWER refactor). Fires
+			// when the user collapses or expands the side rail; sema
+			// can hook this for telemetry / soft haptic. Mode shifts
+			// (contextual panel changes) flow as pure data via the
+			// data-words-drawer-mode attr — no event for those because
+			// they are derived from caret movement (already an event
+			// elsewhere).
+			name: 'commit-toggle-drawer',
+			semantic: {
+				family: 'commit',
+				verb: 'toggle',
+				target: v.partRef('drawer'),
+				intent: 'neutral',
+				sequence: 'post'
+			}
 		}
 	],
 	parts: [
@@ -637,6 +655,40 @@ export const wordsMorfo = {
 					severity: 'recommended'
 				}
 			]
+		},
+		{
+			// Companion drawer (right-rail). Hosts contextual panels
+			// that react to caret position — replaces N popovers
+			// (bubble menu + slash menu + link editor + table popover
+			// + image controls) with a single sticky surface.
+			//
+			// `data-words-drawer-mode` carries the active panel; eidos
+			// switches its body content per-mode. Open state is a
+			// boolean attr so a CSS-only collapse animation is possible.
+			name: 'Drawer',
+			kebab: 'drawer',
+			archetype: 'group',
+			kind: 'public',
+			defaultElement: 'aside',
+			role: 'complementary',
+			optional: true,
+			data: [
+				{
+					attr: 'data-words-drawer-mode',
+					values: ['default', 'format', 'image', 'table', 'code', 'list'],
+					value: v.propRef('mode'),
+					severity: 'optional'
+				},
+				{ attr: 'data-open', value: v.propRef('open'), severity: 'optional' },
+				{ attr: 'data-disabled', value: v.propRef('disabled'), severity: 'optional' }
+			],
+			aria: [
+				{
+					attr: 'aria-label',
+					value: v.translationRef('#?components.words.drawer|Editor companion drawer'),
+					severity: 'recommended'
+				}
+			]
 		}
 	]
 } as const satisfies Morfo;

src/uix/soma/components/words/components/words-drawer.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { mergeProps } from '../../../props';
+	import { createId } from '../../../id';
+	import { WordsDrawerProvider } from '../words-provider.svelte';
+	import type { WordsDrawerProps } from '../types';
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = createId(uid, 'words-drawer'),
+		open = $bindable(undefined),
+		defaultOpen = true,
+		disabled = false,
+		children,
+		child,
+		...restProps
+	}: WordsDrawerProps = $props();
+
+	// Initialise from defaultOpen when uncontrolled. After the first
+	// pass `open` is bound to provider state.
+	if (open === undefined) open = defaultOpen;
+
+	const state = WordsDrawerProvider.create({
+		id: readableActive(() => id),
+		ref: writableActive(
+			() => ref,
+			(v) => (ref = v)
+		),
+		open: writableActive(
+			() => open ?? defaultOpen,
+			(v) => (open = v)
+		),
+		disabled: readableActive(() => disabled)
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, state.props));
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps, ...state.snippetProps })}
+{:else}
+	<aside {...mergedProps}>
+		{@render children?.(state.snippetProps)}
+	</aside>
+{/if}

src/uix/soma/components/words/exports.ts

@@ -10,6 +10,7 @@ export { default as LinkEditor } from './components/words-link-editor.svelte';
 export { default as HiddenInput } from './components/words-hidden-input.svelte';
 export { default as Status } from './components/words-status.svelte';
 export { default as FindReplace } from './components/words-find-replace.svelte';
+export { default as Drawer } from './components/words-drawer.svelte';
 
 export type {
 	WordsCommandName,
@@ -33,6 +34,9 @@ export type {
 	WordsHiddenInputProps as HiddenInputProps,
 	WordsStatusProps as StatusProps,
 	WordsFindReplaceProps as FindReplaceProps,
+	WordsDrawerProps as DrawerProps,
+	WordsDrawerMode,
+	WordsDrawerSnippetProps as DrawerSnippetProps,
 	WordsProviderSnippetProps as ProviderSnippetProps,
 	WordsContentSnippetProps as ContentSnippetProps,
 	WordsBubbleMenuSnippetProps as BubbleMenuSnippetProps,

src/uix/soma/components/words/types.ts

@@ -351,6 +351,34 @@ export type WordsHiddenInputProps = WithChild<{ id?: string }> &
 export type WordsStatusProps = WithChild<{ id?: string }> &
 	Without<PrimitiveDivAttributes, { role?: unknown; 'aria-live'?: unknown }>;
 
+/** Active panel of the companion drawer (DRAWER refactor). Mirrors
+ *  `WordsDrawerMode` exported from the provider; surfaced here so eidos
+ *  doesn't import provider internals. */
+export type WordsDrawerMode = 'default' | 'format' | 'image' | 'table' | 'code' | 'list';
+
+export type WordsDrawerSnippetProps = {
+	readonly mode: WordsDrawerMode;
+	readonly open: boolean;
+	readonly disabled: boolean;
+	readonly snippet: WordsProviderSnippetProps;
+	readonly toggle: (target?: HTMLElement) => boolean;
+	readonly setOpen: (open: boolean, target?: HTMLElement) => void;
+};
+
+export type WordsDrawerProps = WithChild<
+	{
+		id?: string;
+		open?: boolean;
+		defaultOpen?: boolean;
+		disabled?: boolean;
+		'aria-label'?: string;
+		children?: Snippet<[WordsDrawerSnippetProps]>;
+	},
+	WordsDrawerSnippetProps,
+	HTMLElement
+> &
+	Without<PrimitiveDivAttributes, { 'aria-label'?: string; role?: unknown }>;
+
 export type WordsFindReplaceSnippetProps = {
 	readonly findQuery: string;
 	readonly findCaseSensitive: boolean;

src/uix/soma/components/words/words-provider.svelte.ts

@@ -122,6 +122,10 @@ interface WordsLinkEditorOpts
 interface WordsFindReplaceOpts extends WithRefOpts {}
 interface WordsHiddenInputOpts extends WithRefOpts {}
 interface WordsStatusOpts extends WithRefOpts {}
+interface WordsDrawerOpts
+	extends WithRefOpts,
+		StateProps<{ open: boolean }>,
+		ActiveProps<{ disabled: boolean }> {}
 type WordsSelectionSyncSource =
 	| 'selectionchange'
 	| 'pointer'
@@ -2401,6 +2405,131 @@ export class WordsStatusProvider {
 	);
 }
 
+/**
+ * Drawer — companion right-rail provider.
+ *
+ * Owns the open/collapsed state of the drawer and the derived `mode`
+ * (the contextual panel that should be visible: default | format |
+ * image | table | code | list). Eidos consumes both via the snippet
+ * to render the shell + the per-mode body.
+ *
+ * Mode derivation lives here (not in eidos) so any other consumer
+ * that wants to react to the contextual context (telemetry, future
+ * mini-drawer overlays, etc.) reads the same source of truth.
+ */
+export type WordsDrawerMode =
+	| 'default'
+	| 'format'
+	| 'image'
+	| 'table'
+	| 'code'
+	| 'list';
+
+export class WordsDrawerProvider {
+	readonly opts: WordsDrawerOpts;
+	readonly provider: WordsProvider;
+	readonly runtimePart: SomaRuntimePart;
+
+	static create(opts: WordsDrawerOpts) {
+		return new WordsDrawerProvider(opts);
+	}
+
+	private constructor(opts: WordsDrawerOpts) {
+		this.opts = opts;
+		this.provider = WordsProvider.require();
+		this.runtimePart = this.provider.runtime.part('drawer', {
+			id: opts.id,
+			ref: opts.ref,
+			owner: this,
+			props: {
+				mode: () => this.mode,
+				open: () => this.opts.open.current,
+				disabled: () => this.opts.disabled.current || this.provider.isDisabled
+			},
+			syncAttrs: true
+		});
+	}
+
+	readonly mode: WordsDrawerMode = $derived.by(() => {
+		const sel = this.provider.selection;
+		// Text-selection format takes precedence over block-type panels:
+		// a non-collapsed selection inside an inline-text block puts the
+		// drawer in 'format' mode so the user can act on the selection.
+		if (
+			sel &&
+			(sel.anchor.path[0] !== sel.focus.path[0] ||
+				sel.anchor.offset !== sel.focus.offset)
+		) {
+			const block = this.provider.currentBlock;
+			if (
+				block === 'paragraph' ||
+				block === 'heading' ||
+				block === 'quote' ||
+				block === 'list'
+			) {
+				return 'format';
+			}
+		}
+		const block = this.provider.currentBlock;
+		if (block === 'image') return 'image';
+		if (block === 'table') return 'table';
+		if (block === 'code') return 'code';
+		if (block === 'list') return 'list';
+		return 'default';
+	});
+
+	/**
+	 * Toggle the drawer open/closed and emit the `commit-toggle-drawer`
+	 * event so sema / telemetry can react. Returns the new open state.
+	 */
+	toggle(target?: HTMLElement): boolean {
+		const next = !this.opts.open.current;
+		this.opts.open.current = next;
+		try {
+			void this.provider.runtime.trigger('commit-toggle-drawer', {
+				fallbackTarget: target ?? this.opts.ref.current ?? undefined
+			});
+		} catch {
+			/* noop — runtime may not be wired (tests / SSR) */
+		}
+		return next;
+	}
+
+	setOpen(open: boolean, target?: HTMLElement): void {
+		if (this.opts.open.current === open) return;
+		this.opts.open.current = open;
+		try {
+			void this.provider.runtime.trigger('commit-toggle-drawer', {
+				fallbackTarget: target ?? this.opts.ref.current ?? undefined
+			});
+		} catch {
+			/* noop */
+		}
+	}
+
+	readonly snippetProps = $derived.by(() => ({
+		mode: this.mode,
+		open: this.opts.open.current,
+		disabled: this.opts.disabled.current || this.provider.isDisabled,
+		// Forward the parent snippet so eidos panels can call runCommand,
+		// read activeMarks, etc. without re-piping every action.
+		snippet: this.provider.snippetProps,
+		toggle: (target?: HTMLElement) => this.toggle(target),
+		setOpen: (open: boolean, target?: HTMLElement) => this.setOpen(open, target)
+	}));
+
+	readonly props = $derived.by(() =>
+		this.runtimePart.assert({
+			...this.runtimePart.props,
+			role: 'complementary' as const,
+			'data-words-drawer-mode': this.mode,
+			'data-open': this.opts.open.current ? '' : undefined,
+			'data-disabled':
+				this.opts.disabled.current || this.provider.isDisabled ? '' : undefined
+		} as const)
+	);
+}
+
 function firstUsableClientRect(range: Range): DOMRect | null {
 	const rects = range.getClientRects();
 	for (const rect of rects) {

web/routes/uix/components/words/+page.svelte

@@ -1074,7 +1074,7 @@
 					{/if}
 					<Words.HiddenInput />
 					{#if showDrawer}
-						<Words.Drawer snippet={snippetProps} />
+						<Words.Drawer />
 					{/if}
 					{#if showStatus}
 						<Words.Status>