12 Commits (c250f7d7901d737ed95714a6d8ede27fb77e3f61)

Author	SHA1	Message	Date
dev	c250f7d790	fix(words): close 12 type-drift errors from F2/F3/COLOR sprints ... 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>	4 months ago
dev	4cd54e2111	feat(words): drawer `side` prop (left | right) + overlays auto-mirror ... The companion drawer was hard-coded to the right column. Now `<Words.Drawer side="left">` flips the editor grid so the drawer takes the start column; the floating overlays (block handle grip, block inserter "+") automatically render on the OPPOSITE margin so they don't crash with the drawer's gutter. Default stays `'right'` so existing consumers see no change. Wiring: - Eidos `<Words.Drawer>` gains `side?: 'left' | 'right'` (default 'right'). The value is passthrough'd as `data-side={side}` on the rendered drawer root so CSS + sibling overlays can read it from the DOM. - `words.css`: - `[data-words]:has([data-words-drawer][data-side='left'])` flips `grid-template-columns` + `grid-template-areas` so the drawer column sits at the inline-start. - `[data-words-drawer][data-side='left']` swaps the visual seam from `border-inline-start` to `border-inline-end`. - `[data-words-block-inserter][data-side='left'] [data-words-block-inserter-button]` overrides `left: -28px` to `right: -28px` so the "+" lands on the block's right margin. - Block-handle (`words-block-handle.svelte`): new `detectDrawerSide()` reads `[data-words-drawer]@data-side` once per measurement. The grip's `position.left` becomes `rect.right + 4` when drawer is on the left (was always `rect.left - 28`). - Block-inserter (`words-block-inserter.svelte`): same `$derived` read of the drawer's `data-side`, propagated as `data-side` on the inserter overlay element so the CSS rule above can flip the "+" button. - Demo: new `let drawerSide = $state<'left' | 'right'>('right')` + a chip control "drawer side: right | left". `<Words.Drawer side={drawerSide} />`. Verified `npm run check` clean (pre-existing errors only). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	3128b5f13c	refactor(words): drawer reinvented as Insert ↔ Inspect ... The right drawer's default panel is reframed: instead of an outline + stats overview that doesn't compose well with the editing surface, the default mode now shows an "Insert" catalogue of block constructors (Paragraph, Headings 1-3, Quote, Code, three list types, Image, Table). When there's contextual scope (image / table / code / format), those panels stack above with Insert collapsed at the bottom as a secondary affordance. Same Figma / Linear "right inspector" pattern but Notion-aware on the empty-context default. Architecture: - New `WordsDrawerMode` value: `'document'` (outline + stats + suggestions, opt-in via a header toggle). The old default content moved there verbatim. `'default'` was renamed (label-side) to "Insert". - `WordsDrawerProvider.modes` now ALWAYS appends `'default'` to the end of the stack. So: - No selection → `['default']` - Caret on paragraph → `['block', 'default']` - Inside table cell → `['cell', 'row', 'table', 'default']` - With doc panel toggled on → `['document', ...above]` Eidos auto-collapses the trailing `'default'` whenever any scope is also active, so it sits as a footer chip the user can expand to drop a new block without leaving the current inspector. - `documentPanelOpen = $state(false)` + `toggleDocumentPanel()` method on the provider. Exposed in the drawer snippet props as `documentPanelOpen` / `toggleDocumentPanel()`. - New provider method `insertBlockOfType(id: WordsSlashCommandId)`: reuses the slash-id space (paragraph / heading-* / quote / code-block / *-list / image / table) but with different semantics: - Empty paragraph context → `setBlock` (transform in-place, no stray blank). - Non-empty → insert a fresh block AFTER current via `insertBlock`. Caret lands at start of the new block. - Image / table → existing `insertImage` / `insertTable` commands (URL prompt still inline). Exposed in `ProviderSnippetProps` so the Insert panel buttons call it directly without going through the slash menu state. Eidos panels: - `insertPanel` snippet: a 2-column grid of `[data-words-drawer- insert-item]` buttons, each with icon + label. Click → `s.insertBlockOfType(item.id)`. - `documentPanel` snippet: outline + stats + suggestions (verbatim from the old default). - Header gains a circular `FileText` toggle on the right (`[data-words-drawer-document-toggle]`) — `data-active` when doc panel is in the stack. Same hover affordance as the rest of the drawer header. CSS additions: - `[data-words-drawer-insert]` grid layout. - `[data-words-drawer-insert-item]` button styling — neutral border, accent on hover. - `[data-words-drawer-document-toggle]` header chip with active state. Verified: 152/152 soma words tests pass. `npm run check` clean (only pre-existing errors). Browser smoke-test confirmed clicking "Heading 1" with caret on the image block inserts a new heading after the image and switches drawer to Block scope, Insert collapsed below. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	e6caf308b0	refactor(words): refine drawer Editable — hover pencil + textarea + icon-only controls ... User feedback on the previous DRAWER-EDITABLE pass: the "Edit / Save / Cancel" labeled buttons were too heavy. The reference design is the Notion / Linear inline-edit pattern — resting state shows only the preview text, a small pencil reveals on hover, click opens a textarea with compact icon-only ✓ / ✕ controls beneath. Drawer refactor: - `activationMode="none"` + `submitMode="none"` — only the explicit triggers drive state. Removes accidental commits on blur / Enter (Enter must be a newline in a textarea anyway). - `Editable.Input` swapped to a textarea via the `child` snippet: `{#snippet child({ props })}<textarea {...props} rows={2}></textarea>`. ALT and CAPTION can run long; a single-line input was wrong. - `EditTrigger` / `SubmitTrigger` / `CancelTrigger` now hold only an icon (Pencil / Check / X) with `decorative` flag + `aria-label` on the trigger button for screen readers. - Wrapper attribute `data-words-drawer-editable` scopes all the custom CSS to these two Editables — other Editable instances in the app keep the canonical wrapper look. CSS (`words.css`, scoped to `[data-editable][data-words-drawer-editable]`): - Pencil hidden by default (opacity 0); revealed on `:hover` / `:focus-within` of the editable row. - Edit mode flips layout to column: textarea fills the row, the Control bar sits beneath, right-aligned. - Textarea has a real border + focus ring (was inheriting the ghost variant's transparent treatment, looked invisible against the drawer). - Submit chip is filled accent (✓ stands out), Cancel chip is outlined neutral. Both 28×28 square. - Preview placeholder ("Describe the image…") is italic + muted. Verified in browser: - Hover over ALT row → pencil appears at the right (opacity 0.7) - Click pencil → textarea visible with current value preselected - Below: purple ✓ + outlined ✕ - Type new value → click ✓ → `<img alt="...">` in the editor and the drawer preview both update; mode returns to preview. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	ffe2c56f42	feat(words): use Editable for ALT/CAPTION in image drawer panel ... User-suggested polish: replace the read-only `<p>` previews for the image alt and caption fields with the canonical Editable component. Same inline-edit shape used in the dedicated Editable demo — preview text with a small "Edit" trigger that swaps to an input + Save/Cancel on activation. Closer to the Notion/Figma/Linear interaction the user expects out of a sidebar property panel. Wiring: - `imageBlockAtCaret` now returns `{ index, block }` so the panel can dispatch `applyCommand({ type:'updateBlock', blockIndex, patch })` with the right index instead of re-walking the selection. - ALT: `onValueCommit={(next) => s.applyCommand({ type:'updateBlock', blockIndex, patch: { alt: next } })}`. `placeholder` "Describe the image…" surfaces when alt is empty. - CAPTION: same shape; `patch: { caption: next || undefined }` so clearing the field drops the field entirely from the block. - `size="sm" variant="ghost" color="primary"` chosen to fit the drawer's compact density without competing with the image preview. - Status (pending/error) stays as the existing readonly tag — not user-editable. Also: add `selectedBlockIndex: number | undefined` to `WordsProviderSnippetProps`. The provider was already emitting it (consumed by `imageBlockAtCaret` and the image float bar) but the type definition didn't list it. Verified in browser: clicking the image enters image mode in the drawer; clicking ALT's Edit trigger reveals the input; typing a new value and clicking Save propagated end-to-end — `<img alt="…">` in the editor and the preview both updated. Same flow for caption. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	5acee94777	fix(words): color picker uses applyCommand (no sema) + onchange instead of oninput ... Two related fixes to the color picker UX: 1. Swatches now call applyCommand({type:'toggleMark', mark:'color:#x'}) directly instead of runCommand('color:#x'). runCommand emits the 'commit-set-format' sema event (which fires sound + visual feedback on the editor surface). For discrete color picks the sema event is noise — applyCommand bypasses the trigger and just mutates the doc. 2. Native <input type=color> uses `onchange` instead of `oninput`. `oninput` fires continuously while the user drags the OS color picker — each fire was queueing a separate command + sema event, producing a horror cascade of sound / visual flashes on every pixel of the slider drag. `onchange` only fires when the user releases / commits the picker (closes the OS popup), so we get exactly one command per intent. Same pattern applied to both Foreground and Background pickers + the clear (×) buttons. Sema events are still emitted by the rest of the drawer's action chips (run via runCommand) because those are user-facing intent actions (Bold, Italic, etc.) where the perceptual feedback aligns with the user's notion of "I just did a thing". Color slider drags are NOT in that category — they're continuous parameter tuning. Verified: clicking the red swatch on selected "ActiveUI" produces the expected red <span> in the document AND the trace shows no new commit-set-format event (was previously firing on every swatch click, drowning audio + animation). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	c1c3cd9404	feat(words): parametric color marks — foreground + background pickers (COLOR-3) ... Marks now support parametric values via colon syntax: - color:#hex — foreground text color - bgcolor:#hex — highlight / background color Existing boolean marks (bold/italic/underline/strike/code) are unchanged. Empty value (color:, bgcolor:) clears that slot. Engine - WordsMark union extended with `color:\${string}` and `bgcolor:\${string}` template literal variants. - isWordsMark accepts the parametric form (validates against #hex 3/4/6/8 digits). - normalizeMarks de-duplicates by prefix for parametric marks (only one color, one bgcolor per inline survives). - toggleMarkSet REPLACES same-prefix entries instead of toggling them; empty value strips the slot. - New helpers markValue() and markPrefix() for reading parametric data. Serializers - HTML out: wrapMarks collects color/bgcolor into a single `<span style="color:..;background-color:..">` instead of nested spans, then wraps with the boolean-mark tags. - HTML in: not extended this pass — round-trip via style attr is a follow-up. The marks survive in the document model + render OK. - Markdown out: silently drops parametric marks (no MD syntax for inline color; HTML round-trip is the supported path). DOM render - createWordsTextAttrs splits marks into booleans (→ data-words-marks) and parametrics (→ inline `style` attr) so the contenteditable paints the colors directly. Drawer Format panel - New "Foreground" + "Background" sections with: - 10-swatch palette (red/orange/amber/green/cyan/blue/violet/pink/ white/grey) — hand-picked editorial set - Native <input type=color> for free hex pick (no preset constraint) - "×" clear button (only when a value is set for that slot) - Active swatch outline when the current value matches the preset - runCommand passes the `color:#hex` / `bgcolor:#hex` string straight through commandFromName → toggleMark. WordsCommandName extended with `color:\${string}` and `bgcolor:\${string}` for type-safe consumer calls. 152/152 tests pass. Verified visually: clicking the red swatch on selected "ActiveUI" text in the demo produces `<span data-words-marks="bold" style="color:#ef4444">ActiveUI</span>` in the rendered HTML, text paints red in the editor, the swatch shows active outline + clear (×) button appears. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	b3524b3446	fix(words): image block selection — click figure activates image drawer mode (COLOR-1) ... Image blocks are contenteditable=false so the text caret can never live inside them. The drawer never entered image mode and the user had no visible "selected image" state. Fixed with a separate atomic- block selection layer: - New provider state `selectedBlockIndex` (number | undefined) for atomic block selection. Distinct from text selection. - `currentBlock` derived now short-circuits to the atomic block's type when `selectedBlockIndex` is set, so the drawer enters image mode whenever the user has selected an image. - New methods `selectAtomicBlock(blockIndex)` + `clearSelectedBlock()` on the provider. selectAtomicBlock also focuses the editor root so keyboard handlers (esc, delete) work on the atomic block. - `syncSelectionFromDom` clears the atomic-block highlight only when the text selection actually moved (was clearing on every selectionchange echo, which wiped the highlight a tick after the click landed). - Provider onclick handler detects clicks on figure[data-words-block= 'image'][data-words-path], decodes the path, calls selectAtomicBlock(blockIndex). - Render passes `selectedBlockIndex` through findOpts; image block render adds `data-words-block-selected` attr when the index matches. - Eidos CSS paints a 3px accent outline + glow on the selected figure. Image panel's imageBlockAtCaret() now falls back to selectedBlockIndex first, then text-selection anchor. Result: clicking an image in the editor now highlights it (accent outline + glow), the drawer enters IMAGE mode and shows its source/alt/caption/status panel. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	e25ac301b5	feat(words): drawer hierarchical mode stack — Format → Cell → Row → Table (HIER 1-3) ... The drawer now renders the FULL hierarchy of scopes that apply at the caret, instead of only the most-specific one. Inside a table cell with text selected the user sees four panels stacked: Format ← active selection's inline marks/links Cell ← tone, vertical align, cell text-align Row ← +/- row, row header toggle Table ← striped, compact, +/- column, col header Each panel is independently collapsible. Default: the leaf (most specific) is open, the rest are collapsed but accessible via the chevron next to their header. User-explicit toggles persist across context changes. HIER-1 — soma: - WordsDrawerMode union expanded: split 'table' → 'cell' | 'row' | 'table'; split 'list' → 'list-item' | 'list'; added 'block' for the paragraph/heading/quote text-align scope. - WordsDrawerProvider gains `modes: readonly DrawerMode[]` derived that walks the caret context outward (most-specific first). The legacy `mode` field is kept as the top of the stack for consumers that just want the leaf. - snippetProps surfaces both `modes` (stack) and `mode` (leaf). - Morfo `data-words-drawer-mode` values updated to the new union. HIER-2 — eidos panel split: - Table panel decomposed into three: cell-scope (tone + vertical + text-align), row-scope (+/- row, row header), table-scope (+/- col, col header, striped, compact). - List panel decomposed into list-item-scope (indent/outdent) + list-scope (kind). - New 'block' panel hosts text-align when caret is in a heading / paragraph / quote outside a table cell. - Each panel is a `<section data-words-drawer-panel data-depth=N>` with its own toggleable header + body snippet. HIER-3 — per-panel collapse: - SvelteMap stores user-explicit open/closed overrides per mode. isPanelOpen() falls back to "open if leaf, else collapsed" when no override exists. - Drawer header now shows leaf title in bold + breadcrumb of deeper panels in muted text (Format · Cell · Row · Table). - Visual depth cue: border-inline-start of each panel renders at decreasing strength as depth grows (leaf solid, deeper at 60% / 30% accent border). Visual verification: selected text inside a sample table cell shows 4 panels stacked (Format open, Cell/Row/Table collapsed), header breadcrumb "FORMAT · Cell · Row · Table". Click on any collapsed header expands it. 214/214 tests pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	9a5f3c2359	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>	4 months ago
dev	15dbf0f8fd	feat(words): drawer contextual panels — format/image/table/code/list (DRAWER-2) ... The companion drawer now switches its body content based on where the caret is. Five context modes wired to runCommand on the snippet provider, all reading current state to show active highlights: - format: B/I/U/S/code mark toggles (data-active reflects activeMarks), align L/C/R/J (data-active reflects currentTextAlign), Add link (URL prompt) + Remove (canUnlink-gated), Clear formatting. - image: read-only view of src, alt (italic + "(missing)" placeholder when empty), caption, status (pending → accent tint, error → threat tint). Edit-image flow deferred to a follow-up (needs a new updateImage operation; for the spike, view-only is enough to validate the panel works). - table: Rows +/- · Columns +/- · Row/Col header toggles · Striped / Compact toggles · Cell tone Plain/Muted/Accent. Every toggle reads current* state so the user sees which buttons are currently applied. - code: Plain + TS/JS/CSS/HTML/JSON/Bash/Py language chips, data-active reflects currentCodeLanguage. - list: Bullet/Numbered/Check kind chips · ⇤ Outdent / ⇥ Indent. All buttons use onmousedown preventDefault so the editor selection isn't dropped when clicking a drawer action (would otherwise lose the target paragraph / table cell / list item). CSS adds a generic .data-words-drawer-action chip (with hover, active, ghost, full, risk tones) + readonly-text style with pending/error tints. Reused across all panels, so adding new panels later means markup-only, no CSS extension. Verified in browser: - Click table cell → drawer shows TABLE panel with Striped active (matches sample's striped=true) and Plain tone active (matches default cell tone). - Click code block → drawer shows CODE panel with TS chip active (matches sample's language='ts'). - Click list item → drawer shows LIST panel with kind + indent actions. Concept A+D validated visually: ONE surface replaces what would otherwise be bubble menu + slash menu + heading picker + language picker + table popover + image controls + link editor. The contextual switch happens automatically; the user just moves the caret. DRAWER-3 (polish): mobile bottom-sheet layout, A/B toggle in demo controls, image-edit flow — deferred to next session if needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	23f90a775c	feat(words): companion drawer right-rail (concept A+D) — shell + default panel (DRAWER-1) ... A radical disposition shift: instead of N fragmented popovers (bubble menu + slash menu + link editor + heading picker + language picker + table popover + image controls) we mount ONE contextual right-rail that changes its panel based on what the user is editing. Spike-1 surface (this commit) ships: - New eidos component <Words.Drawer> (words-drawer.svelte) — a collapsible right sidebar with mode detection derived from snippet props (currentBlock + selection). 6 modes mapped: default | format | image | table | code | list. - Default panel (visible when no contextual mode active): - OUTLINE — flat list of h1/h2/h3 headings, indented by level - STATS — word count + char count + reading time (200wpm) - SUGGESTIONS — writer-coaching warnings derived from the document model: missing alt text, long paragraphs (>600 chars), heading skip patterns (h3 without h2 above). Empty state shows "Nothing flagged" in affirm color. - Contextual panels (format/image/table/code/list) render a placeholder "coming soon" message — implemented in DRAWER-2. - Eidos CSS: - Provider host gains a grid-template-areas layout when a drawer is present: 'toolbar drawer / content drawer / status drawer'. Existing children (toolbar/content/placeholder/status) get explicit grid-area assignments. - Drawer collapses to 2.25rem (just the chevron) when closed. 16rem default open. - Outline items, stats grid, warning list each have their own discrete styling. Demo (+page.svelte): - New `showDrawer` state (default true). - Children snippet refactored to capture full snippetProps via @const destructure (kept selectedLink working). - <Words.Drawer snippet={snippetProps} /> mounted inside the children block alongside the other parts. Visual verification: - Drawer renders as a dedicated right column with the editor content on the left, no layout overlap. - DOCUMENT header + OUTLINE shows "H1 ActiveUIX Words", STATS shows 73 words / 508 chars / 1 min reading, SUGGESTIONS shows "Nothing flagged" (sample doc has no warnings). - Collapse button toggles open/closed via animated inline-size transition. Next: - DRAWER-2: format/image/table/code/list contextual panels wired to runCommand. - DRAWER-3: polish (mobile drawer-as-bottom-sheet, transitions, A/B toggle in demo to compare classic toolbar vs companion drawer). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago