From c250f7d7901d737ed95714a6d8ede27fb77e3f61 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 28 May 2026 02:27:42 +0200
Subject: [PATCH] fix(words): close 12 type-drift errors from F2/F3/COLOR
 sprints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

After the toggle-group structural migration `npm run check` still had
12 pre-existing errors. All from the active Words sprint (post-2026-05
F2/F3/COLOR work), not introduced by this session. Closes them to
restore green check:

- soma words.svelte: thread `onUploadImage` through the Provider opts
  (was required-undefined in WordsOpts but missing from the create()
  call).
- eidos words-toolbar-family-menu.svelte + words.svelte: add
  'insert-image' label to COMMAND_LABELS (the Record<WordsToolbarButton
  CommandName, string> required full coverage).
- eidos words.svelte: hoist the `leafItem` snippet out of <SomaWords.
  Provider> to template root level. Snippets defined INSIDE a component
  element are passed as named props in Svelte 5; this one was meant as
  a local helper. Also kills the "Expression too complex" error at the
  Provider tag — the leafItem prop was bloating the union.
- eidos words-drawer.svelte: extract 5 inline button-config arrays to
  typed `as const satisfies readonly { id: WordsCommandName; ... }[]`
  constants (FORMAT_MARKS, TEXT_ALIGN_ACTIONS, CELL_TONE_ACTIONS,
  CELL_VERTICAL_ACTIONS, CELL_TEXT_ALIGN_ACTIONS). The inline literals
  were inferring `id: string`, breaking `runCommand` and
  `activeMarks.includes`.

Result: npm run check 16 → 0 errors. Tests 658/658 pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/words/words-drawer.svelte      | 77 +++++++++++--------
 .../words/words-toolbar-family-menu.svelte    |  1 +
 src/uix/eidos/components/words/words.svelte   | 73 ++++++++++--------
 .../components/words/components/words.svelte  |  4 +-
 4 files changed, 91 insertions(+), 64 deletions(-)

diff --git a/src/uix/eidos/components/words/words-drawer.svelte b/src/uix/eidos/components/words/words-drawer.svelte
index 3db89467b..383a11d46 100644
--- a/src/uix/eidos/components/words/words-drawer.svelte
+++ b/src/uix/eidos/components/words/words-drawer.svelte
@@ -39,7 +39,9 @@
 		DrawerSnippetProps,
 		DrawerProps,
 		ProviderSnippetProps,
-		WordsDrawerMode
+		WordsDrawerMode,
+		WordsCommandName,
+		WordsMark
 	} from '$soma/components/words';
 	import { SvelteMap } from 'svelte/reactivity';
 
@@ -159,6 +161,45 @@
 		const found = marks.find((m) => m.startsWith(`${prefix}:`));
 		return found ? found.slice(prefix.length + 1) : '';
 	}
+
+	// Typed catalogs for drawer action buttons. `as const` narrows
+	// `id` to its literal type so it satisfies the canonical unions
+	// (WordsMark for inline marks; WordsCommandName for runCommand).
+	// Without this, an inline array literal infers `id: string` and
+	// runCommand / activeMarks.includes reject the call.
+	const FORMAT_MARKS = [
+		{ id: 'bold', label: 'B', title: 'Bold' },
+		{ id: 'italic', label: 'I', title: 'Italic' },
+		{ id: 'underline', label: 'U', title: 'Underline' },
+		{ id: 'strike', label: 'S', title: 'Strikethrough' },
+		{ id: 'code', label: '<>', title: 'Inline code' }
+	] as const satisfies readonly { id: WordsMark & WordsCommandName; label: string; title: string }[];
+
+	const TEXT_ALIGN_ACTIONS = [
+		{ id: 'align-left', label: '⫷', title: 'Left' },
+		{ id: 'align-center', label: '☰', title: 'Center' },
+		{ id: 'align-right', label: '⫸', title: 'Right' },
+		{ id: 'align-justify', label: '☷', title: 'Justify' }
+	] as const satisfies readonly { id: WordsCommandName; label: string; title: string }[];
+
+	const CELL_TONE_ACTIONS = [
+		{ id: 'table-cell-tone-default', label: 'Plain' },
+		{ id: 'table-cell-tone-muted', label: 'Muted' },
+		{ id: 'table-cell-tone-accent', label: 'Accent' }
+	] as const satisfies readonly { id: WordsCommandName; label: string }[];
+
+	const CELL_VERTICAL_ACTIONS = [
+		{ id: 'table-cell-vertical-top', label: '⬆ Top' },
+		{ id: 'table-cell-vertical-middle', label: '◆ Mid' },
+		{ id: 'table-cell-vertical-bottom', label: '⬇ Bot' }
+	] as const satisfies readonly { id: WordsCommandName; label: string }[];
+
+	const CELL_TEXT_ALIGN_ACTIONS = [
+		{ id: 'align-left', label: '⫷' },
+		{ id: 'align-center', label: '☰' },
+		{ id: 'align-right', label: '⫸' },
+		{ id: 'align-justify', label: '☷' }
+	] as const satisfies readonly { id: WordsCommandName; label: string }[];
 </script>
 
 <Words.Drawer bind:open {defaultOpen} {disabled} {...rest} data-side={side}>
@@ -356,13 +397,7 @@
 
 {#snippet formatPanel(s: ProviderSnippetProps)}
 	<div data-words-drawer-actions>
-		{#each [
-			{ id: 'bold', label: 'B', title: 'Bold' },
-			{ id: 'italic', label: 'I', title: 'Italic' },
-			{ id: 'underline', label: 'U', title: 'Underline' },
-			{ id: 'strike', label: 'S', title: 'Strikethrough' },
-			{ id: 'code', label: '<>', title: 'Inline code' }
-		] as mark (mark.id)}
+		{#each FORMAT_MARKS as mark (mark.id)}
 			<button
 				type="button"
 				data-words-drawer-action
@@ -486,12 +521,7 @@
 {#snippet blockPanel(s: ProviderSnippetProps)}
 	<div data-words-drawer-section-subtitle>Text align</div>
 	<div data-words-drawer-actions>
-		{#each [
-			{ id: 'align-left', label: '⫷', title: 'Left' },
-			{ id: 'align-center', label: '☰', title: 'Center' },
-			{ id: 'align-right', label: '⫸', title: 'Right' },
-			{ id: 'align-justify', label: '☷', title: 'Justify' }
-		] as a (a.id)}
+		{#each TEXT_ALIGN_ACTIONS as a (a.id)}
 			<button
 				type="button"
 				data-words-drawer-action
@@ -509,11 +539,7 @@
 {#snippet cellPanel(s: ProviderSnippetProps)}
 	<div data-words-drawer-section-subtitle>Tone</div>
 	<div data-words-drawer-actions>
-		{#each [
-			{ id: 'table-cell-tone-default', label: 'Plain' },
-			{ id: 'table-cell-tone-muted', label: 'Muted' },
-			{ id: 'table-cell-tone-accent', label: 'Accent' }
-		] as t (t.id)}
+		{#each CELL_TONE_ACTIONS as t (t.id)}
 			<button
 				type="button"
 				data-words-drawer-action
@@ -524,11 +550,7 @@
 	</div>
 	<div data-words-drawer-section-subtitle>Vertical</div>
 	<div data-words-drawer-actions>
-		{#each [
-			{ id: 'table-cell-vertical-top', label: '⬆ Top' },
-			{ id: 'table-cell-vertical-middle', label: '◆ Mid' },
-			{ id: 'table-cell-vertical-bottom', label: '⬇ Bot' }
-		] as v (v.id)}
+		{#each CELL_VERTICAL_ACTIONS as v (v.id)}
 			<button
 				type="button"
 				data-words-drawer-action
@@ -539,12 +561,7 @@
 	</div>
 	<div data-words-drawer-section-subtitle>Text align</div>
 	<div data-words-drawer-actions>
-		{#each [
-			{ id: 'align-left', label: '⫷' },
-			{ id: 'align-center', label: '☰' },
-			{ id: 'align-right', label: '⫸' },
-			{ id: 'align-justify', label: '☷' }
-		] as a (a.id)}
+		{#each CELL_TEXT_ALIGN_ACTIONS as a (a.id)}
 			<button
 				type="button"
 				data-words-drawer-action
diff --git a/src/uix/eidos/components/words/words-toolbar-family-menu.svelte b/src/uix/eidos/components/words/words-toolbar-family-menu.svelte
index 25d657afc..2798f9b52 100644
--- a/src/uix/eidos/components/words/words-toolbar-family-menu.svelte
+++ b/src/uix/eidos/components/words/words-toolbar-family-menu.svelte
@@ -70,6 +70,7 @@
 		heading: 'Heading',
 		quote: 'Quote',
 		'code-block': 'Code block',
+		'insert-image': 'Insert image',
 		'insert-table': 'Insert table',
 		'insert-table-row': 'Add row',
 		'insert-table-column': 'Add column',
diff --git a/src/uix/eidos/components/words/words.svelte b/src/uix/eidos/components/words/words.svelte
index ad6c77fbf..7ac740ffb 100644
--- a/src/uix/eidos/components/words/words.svelte
+++ b/src/uix/eidos/components/words/words.svelte
@@ -87,6 +87,7 @@
 		heading: 'Heading',
 		quote: 'Quote',
 		'code-block': 'Code block',
+		'insert-image': 'Insert image',
 		'insert-table': 'Insert table',
 		'insert-table-row': 'Add row',
 		'insert-table-column': 'Add column',
@@ -258,6 +259,45 @@
 	}
 </script>
 
+<!--
+	`leafItem` is a LOCAL helper snippet, not a prop passed to
+	SomaWords.Provider. Defining it at template root level keeps it
+	out of the Provider's prop space (Svelte 5 routes snippets defined
+	INSIDE a component element to its named props).
+-->
+{#snippet leafItem(item: WordsToolbarLeafItemConfig, snippetProps: any)}
+	{#if isLinkEditorConfig(item)}
+		<LinkEditor />
+	{:else if isHeadingPickerConfig(item)}
+		<HeadingPicker
+			currentBlock={snippetProps.currentBlock}
+			currentHeadingLevel={snippetProps.currentHeadingLevel}
+		/>
+	{:else if isCodeLanguagePickerConfig(item)}
+		<CodeLanguagePicker
+			currentBlock={snippetProps.currentBlock}
+			currentCodeLanguage={snippetProps.currentCodeLanguage}
+			disabled={snippetProps.isDisabled}
+			readonly={snippetProps.isReadonly}
+			label={typeof item === 'object' ? item.label : undefined}
+			languages={typeof item === 'object' ? item.languages : undefined}
+			setCodeLanguage={snippetProps.setCodeLanguage}
+		/>
+	{:else if isFindReplaceConfig(item)}
+		<FindReplace />
+	{:else}
+		{@const command = normalizeCommand(item)}
+		<CommandButton
+			command={command.command}
+			level={command.level}
+			listKind={command.listKind}
+			aria-label={command.label}
+		>
+			<CommandIcon command={command.command} />
+		</CommandButton>
+	{/if}
+{/snippet}
+
 <SomaWords.Provider
 	{...rest}
 	bind:value
@@ -266,39 +306,6 @@
 	data-variant={variant}
 	data-color={color}
 >
-	{#snippet leafItem(item: WordsToolbarLeafItemConfig, snippetProps: any)}
-		{#if isLinkEditorConfig(item)}
-			<LinkEditor />
-		{:else if isHeadingPickerConfig(item)}
-			<HeadingPicker
-				currentBlock={snippetProps.currentBlock}
-				currentHeadingLevel={snippetProps.currentHeadingLevel}
-			/>
-		{:else if isCodeLanguagePickerConfig(item)}
-			<CodeLanguagePicker
-				currentBlock={snippetProps.currentBlock}
-				currentCodeLanguage={snippetProps.currentCodeLanguage}
-				disabled={snippetProps.isDisabled}
-				readonly={snippetProps.isReadonly}
-				label={typeof item === 'object' ? item.label : undefined}
-				languages={typeof item === 'object' ? item.languages : undefined}
-				setCodeLanguage={snippetProps.setCodeLanguage}
-			/>
-		{:else if isFindReplaceConfig(item)}
-			<FindReplace />
-		{:else}
-			{@const command = normalizeCommand(item)}
-			<CommandButton
-				command={command.command}
-				level={command.level}
-				listKind={command.listKind}
-				aria-label={command.label}
-			>
-				<CommandIcon command={command.command} />
-			</CommandButton>
-		{/if}
-	{/snippet}
-
 	{#snippet children(snippetProps)}
 		{#if visibleToolbarGroups.length}
 			<Toolbar aria-label="Formatting toolbar">
diff --git a/src/uix/soma/components/words/components/words.svelte b/src/uix/soma/components/words/components/words.svelte
index 8dbe1e19b..0239a9d8b 100644
--- a/src/uix/soma/components/words/components/words.svelte
+++ b/src/uix/soma/components/words/components/words.svelte
@@ -26,6 +26,7 @@
 		onValueChange,
 		onSelectionChange,
 		onValueCommit,
+		onUploadImage,
 		children,
 		child,
 		...restProps
@@ -56,7 +57,8 @@
 		ariaLabel: readableActive(() => ariaLabel),
 		onValueChange: readableActive(() => onValueChange),
 		onSelectionChange: readableActive(() => onSelectionChange),
-		onValueCommit: readableActive(() => onValueCommit)
+		onValueCommit: readableActive(() => onValueCommit),
+		onUploadImage: readableActive(() => onUploadImage)
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));