746 Commits (949cc88d7507be6e8d1f900e1668320f0975374c)

 

All Branches   

Search

Author	SHA1	Message	Date
dev	949cc88d75	fix(codex-audit): narrow content non-null in block-handle + inserter ... `npm run check` was reporting 'content is possibly null' errors in both block-handle and block-inserter $effect closures — 6 errors between them. TS doesn't carry the `if (!content) return` narrowing into inner closures, so we re-bind to a const typed `HTMLElement` right after the guard. `npm run check`: 22 → 16 errors. Remaining 10 (drawer command-name / mark string-not-assignable, words.svelte missing 'insert-image' key in the Record, plus 6 pre-existing in src/lib/_demo and others) need a deeper look at the command-name / mark string unions — follow-up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	d767d88c03	fix(codex-audit): close P0 + tokenize drift introduced by Words sprint ... Three categories of audit drift introduced during the recent Words sprints (drawer redesign, image float bar, color marks, insert panel, gutter rail), all caught by the existing contract tests now that the work has landed: 1. **Undeclared morfo attr** (P0 contracts test): `data-words-block-selected` is stamped by the engine's render on the atomic-selected block (today only image) but wasn't in the morfo's data-attr list. Adds it as optional on the same parts array that already declares `data-words-image-*`. 2. **Missing i18n key** (translations:check): The drawer part references `components.words.drawer` for its aria-label, but the langs catalog was never updated when DRAWER-CANON landed. Add `drawer` to `src/uix/langs/components/words.ts` (es + en). 3. **Recipe CSS contract drift** (eidos recipe-css-contract test): - 3 undeclared CSS vars used in the drawer-Editable styles: `--words-toolbar-color` → `--words-command-color` `--words-command-hover-bg` → `--words-command-bg-hover` `--words-command-active-color` → `--words-command-color-hover` (Right names per `lib/recipes/base.ts > words`.) - 15 raw font-size literals (0.65rem / 0.7rem / 0.75rem / 0.8rem / 0.9rem) replaced with the existing words font-size tokens: 0.65/0.7rem → `var(--words-status-font-size)` 0.75/0.8rem → `var(--words-font-size-sm)` 0.9rem → `var(--words-font-size-md)` Result: - `contracts.test.ts`: 31→32 pass (the data-attr violation is gone). - `translations:check`: 219 refs / 76 catalogs / 0 errors / 0 warnings. - `recipe-css-contract.test.ts`: 17→19 pass. - Full `vitest run src/uix`: **867/867** pass (was 865/2-fail before). - `npm run check` clean (only 6 pre-existing errors unrelated). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	08ae867caf	fix(words): grip lands in the rail (rem→px) + drag preview is the block ... Two bugs blocking the drag-and-drop UX: 1. **Grip was 22px off** — `parseFloat('2rem')` returns 2, not 32. I was reading `--_words-rail-px` / `--_words-rail-gap` as raw strings and treating them as pixels. With the actual rem values the grip landed in the gap/content padding instead of the rail. Fix: `cssToPx(raw, rootFontSize)` resolves `rem`/`em` → px via the documentElement's computed font-size. With the fix the grip's center matches the rail's center exactly. 2. **Drag preview was the tiny grip icon, not the block** — native HTML5 drag defaults to a snapshot of the `draggable` element. Since `draggable=true` lives on the 28×28 grip button, the user saw a tiny grip ghosted under the cursor instead of the paragraph/heading/image being moved. Fix: `e.dataTransfer.setDragImage(hoverBlockEl, 12, 12)` in `ondragstart`. The browser now uses the BLOCK's element as the drag image — user sees the whole row/heading/image moving with the cursor, just like Notion / Linear / Figma. Note re: soma's `<DragDrop.Provider>`: the user is right that soma has a first-class drag-drop system (pointer + keyboard + ARIA). The reason this implementation still uses native HTML5 dragstart/ dragend is architectural: soma's `<DragDrop.Draggable>` is designed to WRAP each draggable item, but here the blocks are rendered by the engine's HTML render function as plain DOM (not Svelte components), so each block isn't wrappable. The block-handle is a single floating overlay that snaps to whichever block is hovered. Migrating to soma DragDrop would require restructuring the editor render to per-block Svelte components — a larger architectural change. Filed as a follow-up. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	ccd9d3e0ab	fix(words): "+" inserter only shows in the rail gap between blocks ... Previously the "+" snapped to any seam within 18 px of the cursor's Y — which meant it appeared even when the cursor was hovering on a block's body (near its top/bottom edge) or in the rail aligned with the block. That clashed with the grip's territory. Per user spec: when the cursor is on a block (text or rail-aligned), the grip is the actor — the "+" should be hidden. The "+" only surfaces when the cursor is in the rail column AND vertically positioned in a gap BETWEEN two blocks. Two new gates added to `findSeamForCursor`: 1. **Out-of-content X**: if `e.clientX` falls inside the content box's horizontal extent (the editor's text area), return null immediately. The cursor is reading text or near the toolbar/ status row, not the rail. 2. **Out-of-block Y**: if `e.clientY` falls inside ANY top-level block's vertical band, return null. The block-handle owns that slot. Only when both gates pass do we snap to the nearest seam. The existing `dragover` path is untouched — drag indicator still works inside the content area because the drag operation has different ergonomics (you're actively moving a block, the line is the drop target, not a discoverability cue). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	6bcbd8a983	refactor(words): rail is now a real column outside the editor box ... User feedback was right — the previous approach put the rail INSIDE the editor as extra content padding, so it was glued to the editor card with no visual separation. Reframed as a proper SIBLING column in the grid layout, with its own grey/dotted background and a gap to the editor mirroring the drawer's gap on the other side. Layout (right-drawer default): [rail 2rem] [gap 0.5rem] [editor card] [drawer] Left-drawer flips both rail + gap to the right side. CSS changes: - New tokens: `--_words-rail-px` (2rem ~32px column width), `--_words-rail-gap` (0.5rem ~8px gap to editor), `--_words-rail-bg` (subtle grey using toolbar-border tint), `--_words-rail-dot` (denser status-color dots at 65% opacity). - Grid `template-columns` and `template-areas` of `[data-words]:has([data-words-drawer])` extended to include `rail` and a `.` gap column. Left-drawer mirror reverses them. - Rail visual: `[data-words]:has(...)::before` with `grid-area: rail`, dotted radial-gradient on grey bg, rounded corners matching the editor's radius. - Reverted content + placeholder to symmetric `padding-inline` (the rail no longer lives in content's padding). Deleted the obsolete `[data-words-content]::before` rule. Overlay positioning (JS): - `words-block-handle.svelte` reads `--_words-rail-px`, `--_words-rail-gap`, `--_words-content-px` from the editor host and computes the grip's `left` as the center of the rail column in viewport coords: right-drawer: `block.rect.left - content-px - rail-gap - rail-px/2` left-drawer: `block.rect.right + content-px + rail-gap + rail-px/2` Then offset by half the grip's width (14 px) to center on the rail. Inserter "+" button (CSS-only): - `left` switched from a hard `-28px` to a calc that mirrors the grip math: `-(content-px + rail-gap + rail-px/2) - 12px` Right-edge mirror for the left-drawer case. Grip visibility bumped: - Color from `status-color` to `command-color` so it reads as active-text against the dotted rail. - Default opacity 0.45 → 0.75 (visible without hover). - Hover state gains a toolbar-bg fill + accent-text + accent border ring so the hovered grip stands out from the rail. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	33b3a580b7	feat(words): visible dotted band in the grip rail + trim to 1rem ... Two complaints from the user on the rail: 1. Still too wide at 1.5rem (~24px). 2. The band doesn't visually distinguish itself from the canvas so the grip + "+" look detached. Fixes: - **Rail trimmed to 1rem (~16px)** — combined with content-px gives a 32px total padding on the rail side. The 28×28 grip lands at content.left+0 → +28 with a 4px gap before the text. This is the minimum band width that still keeps the grip fully inside the editor's visible content area. - **Dotted pattern on the band** — `[data-words-content]::before` fills the rail's padding zone (32px wide, full height) with a radial-gradient dot pattern at 8×8 px tiles. Color is `status-color @ 40% opacity` so the dots read as a "this is a gutter" cue without competing with content. `pointer-events: none` and `z-index: 0` so they don't interfere with selection or caret. - **Flips with drawer side** — when `<Words.Drawer side='left'>` the pseudo's inset moves to inline-end so the dotted band tracks the rail to the right side. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	0edb7be26c	fix(words): trim the gutter rail to 1.5rem (~24px) ... Previous 2.5rem (~40px) made the content's left padding total ~56px which felt excessive — the band was very wide and the grip looked lost in the middle of it. Trim to 1.5rem so the total padding is ~40px on the rail side: tight enough that the 28×28 grip occupies most of the band (content.left+8 → +36) with just enough breathing room (4 px) before the text starts. Same Notion-style density. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	5a3029e589	feat(words): real gutter rail for the block-handle + inserter ... The grip `::` and the "+" inserter were positioned at `block.rect.left - 28..32` — fine in theory but the content area had symmetric `padding-inline` so that math landed the overlays in empty body space outside the editor box. User-visible result: the left band had no width, the grip dragged on/off the edge unevenly, and the click target felt invisible. Fix: dedicate a visible rail of `2.5rem` (~40px) on the side OPPOSITE the drawer, by switching the content + placeholder from symmetric `padding-inline` to an asymmetric pair (`padding-inline-start` + `padding-inline-end`). New token `--_words-rail-px` is added to one of those sides per drawer position. - Drawer on RIGHT (default): rail is on the LEFT — content's `padding-inline-start` becomes `content-px + rail-px`. The grip at `block.rect.left - 32` now lands inside that visible band (≈ 24-52 px from the editor's left edge), with the inserter "+" button at -28 alongside it. Block text starts 56 px from the editor's left edge. - Drawer on LEFT: mirrored — the asymmetric padding flips via `[data-words]:has([data-words-drawer][data-side='left']) > [data-words-content]` so the rail moves to the inline-end side where the overlays now render. No JS changes needed — the existing geometry-based positioning (`block.rect.left - 32`, `seam.left - 28` for the "+", with the drawer-side detection added in an earlier commit) automatically lands in the new band because `block.rect.left` shifted right by the rail width. Verified in browser: hovering anywhere over a paragraph reveals the grip at the expected band position, with no flicker, and the hit area is comfortably wide for a click. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	377168550c	feat(words): drawer follows emptiness — Insert when empty, Inspect when filled ... User-clarified rule for the right drawer: when the current block is empty, the drawer shows ONLY the constructors (Insert panel) — no point in showing format/block-scope options on a blank line. When the block has any content, the inspector for that content type appears (paragraph + text-align, heading, image, code, etc.). Implementation: - New helper `isEmptyEditableTextBlock(block)` next to the slash command catalog. It returns true for paragraph / heading / quote / code-without-language whose single text child is the empty string. Atomic blocks (image / table / list) never qualify — they always carry structure. - `WordsDrawerProvider.modes` derivation gates the scope-stack computation behind `!isEmptyTextBlock(currentNode)`. Empty text blocks fall through directly to `['default']` (just Insert); blocks with content build the scope stack as before (format / block / cell / row / table / list-item / list) and Insert collapses at the bottom of the stack. - Atomic blocks (image / code with language) still push their scope unconditionally because their "content" lives in attributes, not children. Before: clicking "+" → empty paragraph inserted → caret on it → drawer showed `['block', 'default']` with Block expanded (text-align controls for an empty line — useless), Insert collapsed below. After: clicking "+" → empty paragraph inserted → caret on it → drawer shows `['default']` only (Insert expanded). As soon as the user types a character, Block panel appears above with Insert collapsed underneath. 152/152 soma words tests still pass; `npm run check` clean. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	2bf6aef035	fix(words): eliminate block-handle flicker in the gutter + bump hit area ... Two issues with the block-handle grip the user just hit: 1. Same flicker pattern the inserter had before its fix: the handle's listener was on `[data-words-content]`, and the grip sits OUTSIDE that box in the gutter. The moment the cursor moved toward the grip, `mouseleave` fired on content → grip vanished → cursor back inside content → grip reappeared → loop. 2. The 24×24 hit area sitting in a 28-px-wide gutter was hard to land, especially when the gutter also got the flicker treatment. Fixes: - **Document-level mousemove** (was: content-level). Bounds are checked manually against the content rect with an EXPANDED buffer on the side where the grip lives (56 px) and a tight 8 px on the opposite. Drawer side is read from the DOM so the bounds flip automatically with `<Words.Drawer side="left">`. - **Early-return when the cursor is over the handle or its menu** (`target.closest('[data-words-block-handle]' | '...-menu')`) so hovering the grip itself never recomputes/hides the state. - **Geometric fallback** when the cursor is in the gutter and `findBlockElement(e.target)` would return null: walk the top-level blocks and pick the one whose vertical band contains `e.clientY`. Keeps the grip pinned to the right block while the user is moving toward it. - **Mouseleave listener removed entirely** — the bounds check above handles the "cursor truly left the editor area" case without the flicker-prone per-element leave events. - **Hit area bumped to 28×28** (`1.75rem`) so it's comfortably above WCAG 2.5.5's 24×24 minimum and easier to grab in the narrow gutter. Visible icon stays at `size="sm"`. Centering math updated (-14 instead of -12); horizontal offset bumped from `-28` to `-32` to keep a small gap between grip and text descenders. 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	71c24dca9b	refactor(words): drop vertical toolbar orientation ... The companion drawer + new floating overlays (image bar, block handle, block inserter) assume a horizontal toolbar above the content. The vertical layout was a CSS-grid two-column repositioning that fights that geometry and was the cause of the new design breaking when the user switched to vertical. `horizontal` is the only orientation now. Cuts: Morfo (`morfo/components/words.ts`) - Toolbar + ToolbarGroup parts: `data-orientation` becomes a literal `'horizontal'` (no longer reads from `propRef('orientation')`). - Same for the toolbar's `aria-orientation`. Soma (`soma/components/words/types.ts`, `exports.ts`, provider) - Removed `WordsToolbarOrientation` type entirely. - Removed `orientation?` from WordsToolbarProps and WordsToolbarGroupProps. - Provider opts no longer read or pass through `orientation`. Eidos (`eidos/components/words/{types,words.svelte,words-toolbar.svelte,words.css}`) - `WordsProps.toolbarOrientation` removed. - `<Words.Toolbar>` / `<Words.ToolbarGroup>` no longer accept or forward `orientation`. - Six chunks of CSS that targeted `[data-orientation='vertical']` deleted (toolbar layout, content grid placement, status, find-replace, link-editor, placeholder). Demo (`web/routes/uix/components/words/+page.svelte`) - `orientations` const, `orientation` state, the chip-control UI, the `toolbarOrientation={orientation}` prop, and the corresponding line in the generated code snippet all removed. - Recipe-selector entry for `[data-orientation]` deleted. - A11y row text simplified. Verified: `npm run check` clean (only pre-existing 6 errors unrelated); soma words tests 152/152 pass. Eidos vertical CSS is gone end-to-end. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	a62b23538d	feat(words): HTML5 drag-drop block reorder + keyboard grab on grip ... The block-handle grip is now actually grabbable. Native HTML5 drag: mousedown + drag → dragstart fires → wordsDragState.sourceIndex is set → the BlockInserter switches to drop-target mode (line goes prominent, "+" hides) → dragover snaps to the nearest seam → drop commits `moveBlockTo({fromIndex, toIndex})`. Keyboard equivalent: focus the grip → Space toggles "grabbed" mode (grip lights up accent-filled, aria-pressed) → ArrowUp / ArrowDown swaps with the neighbour (via the existing moveBlock command, so each press is committed individually) → Space or Escape exits. Architecture: - `words-drag-state.svelte.ts` — module-level `$state` shared between handle (writer) and inserter (reader). Lives in eidos because this is a visual interaction pattern, not a soma/morfo contract. - `moveBlockToAt(state, from, to)` in operations.ts — splice out, then splice in at the post-removal destination. Normalizes + drops caret at the moved block's new position. - `moveBlockTo` case in commands.ts. The existing `moveBlock` (swap-with-neighbor) stays because the click-menu uses it. - BlockInserter dragover/drop handlers reuse `findSeamForCursor` — same seam math as the regular insert hover, so the drop indicator lands exactly where the "+" would have. `seam.insertIndex > fromIndex ? -1` correction accounts for the source's removal shifting subsequent indices down by one. CSS: - `[data-words-block-inserter][data-mode='drop']` makes the line solid + thicker + with an outer glow during drag, and hides the "+" button entirely (the line IS the drop indicator). - `[data-words-block-handle][data-grabbed]` paints the grip accent- filled with a focus ring for keyboard-grab state. aria: `aria-pressed={keyboardGrabbed}`, descriptive aria-label on the grip mentioning Space + arrows. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	305fd70129	fix(words): eliminate flicker on block inserter "+" button ... The previous pass listened to mousemove ON the content element and cleared the seam on mouseleave. The "+" button lives at left:-28px of the content (in the gutter), so the moment the cursor reached the button it triggered mouseleave on content → seam cleared → button vanished → cursor was over content again → mousemove → button shown → loop. That was the constant flicker. Three fixes, smallest to largest: 1. **Listen on document, not content.** A single document-level mousemove handler with manual bounds checking. No more mouseleave/mouseout firing as the cursor crosses element edges. 2. **Hold steady when over the inserter itself.** If `e.target` is under `[data-words-block-inserter]`, return early — don't recompute or clear the seam. The button can stay reachable forever. 3. **Memoize the seam.** Reuse the existing Seam object whenever the snap target (`insertIndex`) is unchanged. Cursor jitter within the same snap window no longer triggers re-renders. Bounds-check buffer: 48px to the left (so the "+" button at -28 is safely inside the keep-alive zone), 16px on the right, 12px top/bottom. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	9b1a964c69	feat(words): "+ between blocks" hover-zone inserter (POLISH-2b) ... Fixes the wedge case the user just hit: two atomic blocks back-to-back (image, table, code) leave no caret position between them, so there's no way to insert a paragraph by clicking. Now: hover near the seam between any two top-level blocks and a "+" appears on the left margin with a faint accent line spanning the seam. Click "+" → a new paragraph is dropped at that index and the caret lands at the start so the user starts typing immediately. Same overlay pattern as the block-handle: single component watches mousemove inside `[data-words-content]`, computes the boundaries of all top-level blocks (plus "before first" and "after last" seams), snaps to the closest seam within 18px of the cursor's Y, and renders a fixed-positioned strip with the "+" button and accent line. New engine surface: - `insertBlockAt(state, blockIndex, block)` in `operations.ts` — splices the block in, normalizes, drops caret at `[blockIndex, 0]`. `blockIndex === children.length` appends to the tail. - `insertBlock` case added to `WordsCommand` + dispatcher in `commands.ts`. The command surface keeps `block` as a loose JSON record so consumers don't need to import `WordsBlock` — the reducer casts on the boundary and `normalizeDocument` validates. Verified in browser: hover at the seam between code (index 3) and image (index 4) → "+" appears at the left margin → click → doc becomes 0:heading | 1:paragraph | 2:quote | 3:code | 4:paragraph | 5:image; caret in the new paragraph ready for input. 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	66225404e1	feat(words): drag handle + block action menu per block (POLISH-2a) ... Notion-style :: grip rendered to the left of the hovered block via a single overlay component (`Words.BlockHandle`). Click reveals a small popover with Move up / Move down / Duplicate / Delete. Each fires via `snippet.applyCommand` so the discrete imperatives bypass the sema runtime (no extra event noise on top of what the operation already implies for downstream consumers). Backed by three new generic operations on the engine: - `moveBlockAt(state, blockIndex, direction)` — swap with neighbour. - `duplicateBlockAt(state, blockIndex)` — JSON-clone insert-after. - `deleteBlockAt(state, blockIndex)` — already existed; now wired to the menu's Delete entry. The three operations are exposed as `moveBlock` / `duplicateBlock` / `deleteBlock` commands in `WordsCommand` so any future block-toolbar can reuse them without per-feature engine plumbing. Also: add `applyCommand` / `selectAtomicBlock` / `clearSelectedBlock` to `WordsProviderSnippetProps` — they were emitted by the provider but missing from the type. Float bar + block handle both consume `snippet.applyCommand`. Verified in browser: hover over a block renders the grip (24×24, opacity 0.45 → 1 on hover, z-index popover); click opens menu with all 4 actions correctly labelled; Duplicate on the heading at index 0 produced a new heading at index 1 and pushed the rest down. 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	5c10ab74b3	feat(words): floating image control bar + generic updateBlock/deleteBlock commands (POLISH-1a) ... Quick-action toolbar that hovers above the selected image, mirroring the pattern in Notion / Linear / Figma. Lets the user align L/C/R, delete, or dismiss the image without having to expand the Image panel of the drawer. New eidos component (spike — no morfo/soma yet, refactor canon if it sticks): src/uix/eidos/components/words/words-image-float-bar.svelte - Position: fixed, calculated from the selected figure's getBoundingClientRect on every selection / scroll / resize / figure size change (ResizeObserver + window listeners). - Visible only when snippet.selectedBlockIndex points to an image block; null position otherwise so the component reflows away. - 5 actions: align left / align center / align right / delete / dismiss. Divider between layout and destructive actions. - Calls snippet.applyCommand for align / delete instead of running through runCommand string-name path (commands target an arbitrary block index, no string lookup needed). Engine — new generic commands so feature panels stop reaching for hacky JSON re-imports to mutate single blocks: - WordsCommand union gains 'updateBlock' (blockIndex + patch) and 'deleteBlock' (blockIndex). - updateBlockAt(state, idx, patch) — shallow-merge patch into the block, normalize doc, clamp selection. No-op when patch matches current values. - deleteBlockAt(state, idx) — remove block, fall back to empty paragraph when doc would be empty, place caret on the next block. - applyCommand exposed on provider snippetProps so any consumer (eidos panels, future block toolbars, tests) can drive arbitrary WordsCommand without needing a string-name route. CSS additions: float bar styling (position fixed, accent border, shadow), action chips with hover + active + risk + ghost variants, divider. Demo: <Words.ImageFloatBar snippet={snippetProps} /> mounted next to <Words.Drawer />. Verified visually: clicking the demo image now (a) outlines the image (COLOR-1 highlight), (b) opens the drawer in IMAGE mode, (c) shows the float bar hovering above the figure with "align center" active (default), trash + dismiss available. 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	ab06562abe	style(words): drawer per-scope accent color + tinted header (COLOR-2) ... Each drawer panel category gets a distinct hue so the user reads the panel's *kind* at a glance: - Text scopes (format, block) → primary accent (project violet) - Structure scopes (cell, row, table, list, list-item) → secondary (slate-blue) — the contextual scaffolding around the text - Media scopes (image, code) → fulfill (teal-mint) — opaque blocks - Default (document outline) → neutral toolbar tone Implementation: scope hue resolves into `--_drawer-scope-accent` via `[data-words-drawer-panel][data-mode=...]` selectors. Then: - The left border (already used as depth indicator) inherits the scope accent at decreasing alpha as depth grows (leaf 100%, depth 1 65%, 2 40%, 3 25%). - Open panel headers paint with a 6% tint of the scope accent + the accent color for the title text. - Active action chips inside a panel inherit the scope accent for background + border + text, so the active variant matches the scope's color identity (no more "always-violet" Striped/Plain). Visual cohesion: a user in a table cell with text selected now sees: - FORMAT panel header in violet (text scope) - CELL/ROW/TABLE headers in slate-blue when expanded (structure scope) - IMAGE/CODE panels in teal-mint (media scope) - DEFAULT in neutral CSS-only change; nothing in soma/morfo touched. 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
dev	ef95b1a82a	feat(words): slash command /image + paste/drop with onUploadImage (F3.7, F3.8) ... F3.7 — slash command /image: - DEFAULT_SLASH_COMMANDS gains an 'image' entry: triggers a window prompt for the URL (and optional alt text), then dispatches insertImage. The native prompt is MVP — consumers wanting a custom dialog can hide the slash entry via slashCommands override and call applyWordsCommand({ type: 'insertImage', src }) from their own UI. - WordsSlashCommandId union + WordsCommandName union extended with 'image' / 'insert-image' respectively. - slashCommandToWordsCommand returns undefined for 'image' so the prompt path in commitSlashCommand owns it. F3.8 — paste/drop with onUploadImage callback: - New WordsProps.onUploadImage prop: (file: File) => Promise<{url, alt?}>. Consumer-injected upload pipeline (S3, R2, own backend, etc.). - onpaste detects image files in clipboardData.files. If present + the callback is wired, intercepts the paste (drops text/html processing) and inserts each image with a blob: URL + status='pending'. - New ondragover + ondrop handlers gate on dataTransferHasImageFiles and the callback being set; trigger insertImageFiles on drop. - insertImageFiles inserts pending placeholders, awaits the upload promise for each, then either swaps src for the final URL (success) or flips status='error' (rejection). Matches blocks by blob URL (unique) so concurrent uploads + concurrent edits stay coherent. - replaceImageBlock / markImageBlockError use mapImageBlocksBySrc to rewrite the document via replaceDocument command. No new command type needed. - Helpers added: collectImageFiles, dataTransferHasImageFiles, mapImageBlocksBySrc — all pure functions at module scope. Test fixture: wordsOpts gains the onUploadImage state slot so the 16 existing provider tests typecheck without behavior change. 152/152 tests pass in the full words soma scope. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	cf9cb0b127	demo(words): add image block to sample document + fix readPlainText (F3.11) ... - Sample document gains an image block between the code block and the table, showing figure/img/figcaption render in action. - readPlainText demo helper gets an 'image' branch returning alt text (was crashing the SSR with 'Cannot read properties of undefined (reading map)' because image has no .children). Demo screenshot confirms: - Image renders inside a figure with border + padding - Caption shows centered + italic below - img max-inline-size cap keeps the image inside the editor frame - Word/char count in status bar reflects alt + caption text F3 MVP visually verified end-to-end: - Block parses from markdown / HTML in the document model - Renders correctly as figure/img/figcaption in the contenteditable - Eidos styling (border, caption italic, alignment data-attr) applies - Status bar counts include image alt text Pending (UX surfaces, deferred to a follow-up session): - F3.7 slash menu /image entry (open a URL prompt) - F3.8 paste/drop handler with onUploadImage callback for file uploads - F3.7/F3.8 require new svelte components (insert dialog, drop overlay) and provider event handlers — they're isolatable from this commit's surface and are the next sub-sprint. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	86b47cef25	fix(words): normalize handles image blocks + 3 image tests (F3.11 partial) ... normalizeBlock had no case for type='image' — image blocks coming from parseWordsMarkdown / parseWordsHtml were silently dropped at the default branch. Now: - normalize.ts case 'image': validates src (non-empty + sanitizeWordsUrl), passes through alt / caption / width (numeric) / height (numeric) / align (validated via isWordsImageAlign) / status ('pending' | 'error'). - normalize.ts imports createImage + isWordsImageAlign from the extension. Image-extension cast widened with `as unknown as ErasedFactory` because WordsImageBlock (no `children` field) doesn't satisfy the contract's node shape strictly; the double-cast is the same pattern table-extension already uses for typed factories. 3 new engine tests cover the F3 happy path: - parses a block-level markdown image ( on its own line yields a type:'image' block) - round-trips an image through markdown (serialize → parse → matches) - round-trips an image through HTML (figure>img+figcaption → ImageBlock → serialize back) 85/85 engine tests pass (was 82; +3 image tests). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	2a51adc00f	feat(words): insertImage operation + command + CSS + extension stub (F3.6, F3.9, F3.10) ... F3.6 — insertImage reducer + command: - engine/operations.ts: insertImage(state, options) — atomic insert (URL required, optional alt/caption/width/height/align/status). Replaces an empty paragraph cursor lands on, otherwise inserts after. Caret lands on the new paragraph following the image (image is atomic — no caret inside the figure). - engine/commands.ts: 'insertImage' case added to WordsCommand union + applyWordsCommand switch. Public command surface: provider can call applyWordsCommand(state, { type: 'insertImage', src, alt?, ... }). F3.9 — eidos CSS for image block: - figure[data-words-block='image']: centered flex column with border, bg, padding, gap. - img: max-inline-size 100%, auto height, user-select none. - figcaption: italic, centered, status-color, smaller font. - data-words-image-align='left'/'right': flex alignment + auto margins. - data-words-image-status='pending': opacity + grayscale + "Uploading…" ::after pseudo-text. - data-words-image-status='error': threat border + "Upload failed" ::after pseudo-text. - :focus / :focus-within: 2px accent outline so the atomic block has a visible selection state. F3.10 — imageExtension stub: - extensions/image/image-extension.ts: WordsExtension shape with name='image', nodeTypes=['image'], factories.image=createImage, commandNames.insertImage='insertImage'. Hooks intentionally absent (engine still hardcodes branches today; stub publishes the public shape parallel to tableExtension). - extensions/index.ts exports imageExtension alongside tableExtension. Morfo: - data-block + data-words-node value sets include 'image'. - New optional attrs declared: data-words-image-align (left/center/ right), data-words-image-status (pending/error). Now the eidos CSS selectors validate against the morfo contract. 211/211 tests pass in words soma + morfo scope. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	08bef77f4b	feat(words): image extension foundation — types, render, HTML+Markdown serializers (F3.1-F3.5) ... Adds image as a first-class block node to the words engine. Phase F3 of the words rich-text editor. Ships the bottom half of the stack so images can be authored in source (markdown / HTML / value JSON) and roundtripped, but UX surfaces (toolbar action, slash command, paste/ drop) land in subsequent commits. F3.1 — extensions/image/{types,factories,index}.ts: - WordsImageBlock = { type: 'image', src, alt?, caption?, width?, height?, align?, status? } - createImage(src, options) factory canonicalising defaults (align='center' stripped, etc.) - WordsImageStatus = 'pending' | 'error' for upload lifecycle - WORDS_IMAGE_ALIGNS + isWordsImageAlign predicate F3.2 — engine/document.ts: - WordsBlockType + WordsBlock union extended with 'image' - Image types re-exported (backward-compat with the table-types pattern) - getBlockText: image → alt text (captions excluded; image stays a single atom in plain-text contexts) F3.3 — engine/render.ts: - Image branch renders <figure data-words-block=image contenteditable=false> <img src alt width? height? loading=lazy draggable=false> <figcaption>caption</figcaption? - WordsRenderTag union gains 'figure' | 'img' | 'figcaption' - data-words-image-align / data-words-image-status surface state - renderBlockPlainText: image → alt F3.4 — engine/serialize-html.ts: - Out: <figure data-words-image-align?><img alt src width? height?><figcaption?></figure> - In: 'figure' added to BLOCK_TAGS; <figure><img> elements parsed back to ImageBlock (with caption from <figcaption>); bare <img> parses to a block too - htmlElementText helper added for caption text extraction F3.5 — engine/serialize-markdown.ts: - Out:  — escapes ], ( and ) in src, " in caption - In: standalone line matching ^$ promotes to a block image. Inline images mid-paragraph become text + no image (lossy by design — keep the model tight; inline image is a separate node type if added later) Engine ripple — exhaustive switches updated: - normalize.getInlineBlockText - path.collectContainerChildren (image marked as terminal) - selection.collectBlockText (image returns empty — opaque atom) - operations: - setBlock skips image (image is not convertible to inline-text blocks) - setTextAlign skips image (no text align on image) - deleteRange refuses if range crosses an image (atomic) - insertParagraph on image inserts a fresh paragraph after it and moves the caret - blockTextAlign() returns undefined for image - words-provider.currentTextAlign returns 'left' on image 149/149 tests pass in the full words soma scope. `npx tsc --noEmit` clean for the touched area. Engine consumers compile unchanged. Next: F3.6 insertImage operation + toolbar/slash command, F3.7 slash menu /image entry, F3.8 paste/drop with onUploadImage callback, F3.9 eidos CSS, F3.10 imageExtension stub, F3.11 demo + verify. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	f25bf1558e	demo(words): enrich status bar with char count + selection + dynamic link/commit (F4.5b) ... Before: 'Optional editor · 64 words · none' After: 'Optional · 64 words · 453 chars · none' (no link, no commit) 'Required · 64 words · 453 chars · range · https://...' (selection + link) 'Optional · 64 words · 453 chars · none · save' (after commit) - Drops the redundant 'editor' suffix; the surface is already an editor. - Adds char count from plainText.length — useful for size limits. - Adds the existing selectionState (none/collapsed/range) inline. - Splits link/commit into separate optional segments instead of collapsing them into one slot. Demo-only change in +page.svelte. The eidos Words.Status wrapper still passes children through unchanged — enriching the eidos default status snippet itself would require Words provider to expose wordCount/charCount, which is a larger refactor. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	5bd9f9fe4f	fix(words): slash menu wider + description wraps to 2 lines instead of ellipsis (F4.5a) ... Before: - Menu width was 7× button-size (≈224px), so even short descriptions clipped: "Large section headin…", "Blockquote callou…". - Description was single-line nowrap+ellipsis, doubling the clipping. After: - Menu width 10× button-size (≈320px) — enough room for the longest default description ("Large section heading") without truncation. - Description switches to a 2-line line-clamp with line-height 1.3, so longer custom descriptions still degrade gracefully instead of silently disappearing past the first line. Label still nowrap+ellipsis (the bold first line is supposed to be a short title; if it doesn't fit, that's an author issue worth a visual cue). CSS-only in words.css. Visible immediately on the demo's SlashMenu. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	eb6a019b5a	fix(words): vertical rhythm — heading top margin, blockquote distinctive, code block generous padding (F4.3) ... Three small typography lifts that compound into a noticeably cleaner document rhythm: - Headings (h1/h2/h3) gain 1.5× block-gap top margin when NOT first child. Opens visible breathing room between a body block and the next section. Skipped on first-child so the editor opens flush against the toolbar. - Blockquote: was just a left border + recolored text. Now adds vertical padding, italic, a 1.5× border-inline-start width, and a 4% accent background tint. Reads unambiguously as a callout rather than indistinguishable from a regular paragraph. - Pre (code block): padding bumped from 1× quote-px to 1.25× and the border mixed with 60% accent-border so the block is visually weightier and stands apart from the body bg. CSS-only change in words.css. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	c09f7b0d87	fix(words): table accent tone softer, hover cells, stronger header divider (F4.2) ... Before: - tone='accent' painted at 14% solid + full accent-text recolor — the cell read as "broken / special-cased random" rather than emphasised. - striped used 70%-transparent overlay on toolbar-bg ≈ invisible against the editor bg. - no hover state on cells — users had no signal that cells are interactive (clickable to edit). - header row used the same single-width border as body cells, so the divider got lost when striped or accent kicked in. After: - tone='accent' at 8% solid, text color inherited from default — the cell still draws the eye without shouting. - striped uses solid toolbar-bg (no transparency) — actual zebra. - subtle hover (5% accent overlay) on every non-header cell, with a 120ms ease transition. - header row gets a 2× bottom border so the head/body divider is unambiguous regardless of striping/accent. CSS-only change in words.css, no markup or logic touched. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	3cc171f747	fix(words): toolbar horizontal-scroll instead of multi-line wrap on mobile (F4.1) ... Before: at narrow viewports the toolbar wrapped to 2-3 lines with orphan icons in the last row (e.g. at 375px: 5 + 4 + 1 icons = 3 rows). Awkward visually and wasteful of vertical space. After: single-row horizontal scroll with a soft trailing fade (mask-image gradient) hinting at hidden overflow. Same UX as Google Docs / Word / Notion mobile toolbars. All commands stay reachable without changing the markup or the provider logic. Vertical-orientation toolbar opts out of the horizontal-scroll mask (it already lays out top-to-bottom and the mask would clip the trailing icons in the visible direction). Verified: - 375px (mobile) — single row, fade visible on right edge. - 900px (laptop) — single row, no overflow, fade harmless. - Vertical orientation — column layout intact. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	1043f1de4a	refactor(words): extract 8 pure table helpers to extensions/table/utils.ts (F2.3h.1) ... Moves the table-pure helpers (no engine selection/normalize/marks dependencies) from `engine/operations.ts` to `extensions/table/utils.ts`: - createTableGrid (2×2 default, clamped 1..12 × 1..8) - tableCellPathFromContainer (3-tuple path resolver) - tableOptions / tableCellOptions (option-bag readers) - tableColumnCount (max-cells-across-rows, min 1) - createEmptyTableRow (N-cell row factory) - insertTableCellInRow / deleteTableCellFromRow (cell ops over a row) - WordsTableCellPath type alias The 6 *mixed* helpers (currentTableCellPath, selectTableCell, setTableCellTextAlign, updateCurrentTableCell, updateCurrentTable, preserveTableFormattingSelection) still live in operations.ts — they read private engine state and can only move once F2.3i full lands a visitor pattern that injects those engine APIs as parameters. clampInteger stays duplicated locally in utils.ts (9 LoC, generic numeric helper) instead of being exported from the engine, to keep the extension's surface tight. If a third caller emerges, promote to a shared location. 149/149 tests pass in the full words soma scope. TS check clean in extensions+engine area. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	bde6728590	refactor(words): table extension stub — name + nodeTypes + factories + commandNames (F2.3i) ... Publishes `tableExtension: WordsExtension` in `extensions/table/table-extension.ts` with the three static facets we can ship without touching the engine: - `nodeTypes`: ['table', 'table-row', 'table-cell'] - `factories`: typed constructors for the three node types - `commandNames`: the 12 public table commands (insertTable, deleteTableRow, toggleTableHeaderRow, setTableCellTone, …) mapped to internal operation types (1:1 today). The dynamic hooks (`render`, `normalize`, `serialize`, `path`, `keyboard`, `commands`, `events`) are intentionally absent — F2.3f-h port each one incrementally. The engine does NOT yet consume the registry; the stub publishes the shape the engine will respect once F2.3i full lands. 6 smoke tests verify the public shape (nodeTypes, factories produce valid nodes, registry registers cleanly + finds by every nodeType, all 12 command names exposed, hooks intentionally absent, default 1×1 table). 102/102 in extensions + engine scope, 149/149 in full words soma scope. CONTINUE.md updated to reflect F2.3i-stub done + next-session order (F2.3h first, then F2.3f/g — F2.3i full wire-up follows F2.3h). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	54cd1744c7	docs(CONTINUE): record F2.3a-e completion + remaining sub-plan ... Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	d839273536	refactor(words): extract table render to extensions/table (F2.3e) ... Fifth atomic checkpoint of F2.3. Moves the table-specific DOM render helpers from engine/render.ts to extensions/table/render.ts. Moved: - renderTable(block, path, helpers) — replaces the table branch in renderWordsBlock + internal renderWordsTableRow + renderWordsTableCell - renderTablePlainText(block, helpers) — replaces the table branch in renderBlockPlainText The extension defines structural render-element types (TableRenderElement, TableRenderText, TableRenderNode) assignment- compatible with the engine's WordsRenderElement/Node. The engine passes its constants (WORDS_PATH_ATTR, WORDS_NODE_ATTR) + helpers (encodePath, renderInlines, getInlineText) via a TableRenderHelpers object, keeping the extension independent of engine/dom.ts. The engine's renderWordsBlock dispatcher branch for `block.type === 'table'` now delegates to `renderTable(block, path, { ... })` in a single call. ~50 LoC of helper functions removed from the engine. Extension barrel updated to expose: - renderTable / renderTablePlainText - TableRenderElement / TableRenderNode / TableRenderText / TableRenderHelpers / RenderPath types Verification: - 143/143 tests pass in src/uix/soma/components/words - 0 new TypeScript errors F2.3 progress: a + b + c + d + e done. Remaining: f (path), g (normalize), h (operations — largest at ~400-500 LoC), i (registry wire-up), j (verify). Operations remains the heaviest piece — likely its own dedicated session. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	5797e69b88	refactor(words): extract table HTML serializer (F2.3c) ... Fourth atomic checkpoint of F2.3. Moves the HTML pipe-table serialize + parse helpers from engine/serialize-html.ts to extensions/table/serialize-html.ts. Moved (write side): - serializeTableHtml(block, serializeInlines, escapeHtmlAttr) - serializeTableCellHtml (internal) - tableAttrsHtml (internal) - tableCellAttrsHtml (internal) Moved (parse side): - parseTableHtml(node, parseInlines, textAlignFromStyle) - collectTableRows (internal) - htmlRowToWords (internal) - htmlCellToWords (internal) - tableCellVerticalAlignFromNode (internal) - tableCellToneFromNode (internal) Mirrors the F2.3d pattern: extension consumes engine inline serializer + HTML attribute escaper as callback parameters to avoid circular dependencies. The extension defines its own minimal `WordsTableHtmlElement` / `WordsTableHtmlChild` types structurally compatible with the engine's internal HtmlElementNode/HtmlNode — engine passes its own parsed nodes via a safe `as unknown as` cast at the call site (commented). engine/serialize-html.ts now contains only the dispatch call to the extension's serializeTableHtml / parseTableHtml. ~150 LoC of helper code removed from the engine; same LoC + clearer separation in extension. Extension barrel updated to expose: - serializeTableHtml / parseTableHtml - WordsTableHtmlElement / WordsTableHtmlChild types Verification: - 143/143 tests pass in src/uix/soma/components/words - 0 new TypeScript errors F2.3 progress: a + b + c + d done. Remaining: e (render), f (path), g (normalize), h (operations — largest), i (registry wire-up), j (verify). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	d6f0af4846	refactor(words): extract table markdown serializer (F2.3d) ... Third atomic checkpoint of F2.3. Moves the markdown pipe-table serialize + parse helpers from engine/serialize-markdown.ts to extensions/table/serialize-markdown.ts: Moved: - serializeTableMarkdown(block, renderInline) - tableMarkdownRow (internal) - escapeMarkdownTableCell (internal) - collectTable(lines, startIndex) - parseTableLine (internal) - isTableSeparator (internal) - NEW: buildTableFromMarkdownRows(rows, parseInline) — convenience for the engine to convert collectTable's raw output into a WordsTableBlock, keeping the extension free from the engine's inline parser implementation. The extension takes inline serialize/parse functions as callback parameters (`renderInline`, `parseInline`) instead of importing the engine's inline serializers. Avoids circular dependency — the extension imports engine for shared types (WordsInline, WordsTableRow) and factories only, never for runtime function dependencies. engine/serialize-markdown.ts now imports the 3 extension functions and calls them from `serializeBlockMarkdown` (write side) and `parseWordsMarkdown` (parse side). Internal `collectTable`, `parseTableLine`, `isTableSeparator` removed. Extension barrel updated to expose the new functions: - serializeTableMarkdown - parseTableMarkdownRows (collectTable re-exported under clearer name) - buildTableFromMarkdownRows Verification: - 143/143 tests pass in src/uix/soma/components/words - 0 new TypeScript errors F2.3 progress: a + b + d done. Pending: c (serialize-html), e (render), f (path), g (normalize), h (operations — largest), i (registry wire-up), j (verify). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	a0afa44da4	refactor(words): extract table factories to extensions/table (F2.3b) ... Second atomic checkpoint of F2.3. Moves table factory functions (createTable, createTableRow, createTableCell), predicate functions (isWordsTableCellVerticalAlign, isWordsTableCellTone), and value-set constants (WORDS_TABLE_CELL_VERTICAL_ALIGNS, WORDS_TABLE_CELL_TONES) from engine/document.ts to extensions/table/factories.ts. engine/document.ts now re-exports the moved symbols so existing imports keep working unchanged. The factories module imports its back-references (createText, WordsInline) from engine/document — the extension may depend on the engine core but the engine core only depends on the extension via re-export indirection (no functional dependency). extensions/table/index.ts barrel updated to expose types (F2.3a) + factories (F2.3b) as the table extension's public surface. Document header notes which pieces have been migrated and which are still pending (serializers, render, path, normalize, operations, registry wire-up). Verification: - 143/143 tests pass in src/uix/soma/components/words - 0 new TypeScript errors - No engine behaviour change (symbol relocation only) F2.3 progress: a + b done. Pending: c (serialize-html), d (serialize-markdown), e (render), f (path), g (normalize), h (operations — largest), i (registry wire-up), j (verify). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	a82c422b05	docs(CONTINUE): record F2 sprint state and F2.3 sub-plan ... Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	088d31ec5d	refactor(words): extract table types to extensions/table/types.ts (F2.3a) ... First atomic checkpoint of F2.3 (table migration to extension). Moves the type declarations only — interfaces and unions for the table node tree (WordsTableBlock, WordsTableRow, WordsTableCell, WordsTableOptions, WordsTableCellOptions, WordsTableCellVerticalAlign, WordsTableCellTone) go from engine/document.ts to extensions/table/types.ts. engine/document.ts re-exports the moved types via `export type { ... } from '../extensions/table/types'` so every existing consumer keeps compiling without changes. Internal usages within document.ts use a separate `import type` to keep the types in local scope for factory function signatures. The rest of F2.3 (factories + serializers + render + normalize + path + operations + registry wire-up) requires deeper dependency analysis across the engine's ~990 LoC of table code spread over 10 files. That work is deferred to a dedicated session to avoid mid-refactor breakage. Verification: - 143/143 tests pass in src/uix/soma/components/words - 0 new TypeScript errors - No engine behaviour change (types-only move) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	1805b0817d	feat(words): extension system skeleton (F2.1 + F2.2) ... Phase 1 of the words rich-text editor extension system. Skeleton + contract only — engine is NOT yet wired to consult the registry. That happens in F2.3 (migrate table) and F2.4 (migrate code-block). New module `src/uix/soma/components/words/extensions/`: - extension-types.ts: WordsExtension interface + sub-types. Every hook is optional. Hooks cover document semantics (nodeTypes, factories), normalization, commands (reducer pattern), rendering, serialization (HTML + Markdown, in + out), path navigation, keyboard, sema events, dispose. Each hook documented inline with rationale. - extension-registry.ts: createWordsExtensionRegistry() returns the runtime container. API: register / unregister / dispose extensions / findByNodeType / findByCommandName getRender / getNormalize / getCommand / getSerialize / getPath / getKeyboard allEvents / allCommandNames / allNodeTypes tryDeserializeHtml / tryDeserializeMarkdown Duplicate-name and duplicate-nodeType detection at register-time with rollback-safe semantics. dispose() tears down extensions in reverse-registration order. - extension-registry.test.ts: 14 tests covering register, conflict rejection (duplicate name, duplicate nodeType, duplicate command name), all-or-nothing rollback, sema event aggregation, dispose ordering, unregister, getRender/getNormalize/getCommand walks, tryDeserializeHtml walk-until-non-null. - index.ts: barrel. Verification: - 14/14 registry tests pass - 82/82 existing engine tests still pass (no engine touched) - Total 96/96 in src/uix/soma/components/words F2.1 (audit) + F2.2 (skeleton) done. F2.3 (migrate table) and F2.4 (migrate code-block) are separate sessions per the planned rollback-safe sub-task structure — each one will move the ~990 LoC of table and ~790 LoC of code-block from the engine core into extensions/{table,code-block}/* and wire them into the registry. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	85b8a56ab0	feat(words): add toolbarLayout grouped|inline (responsive) ... New optional prop on <Words> for the toolbar layout strategy: - 'grouped' (default): each family (text/block/list/align/insert/table/ link/tools) becomes a single trigger button that opens a popover with its commands. Compact, recommended for narrow viewports. - 'inline': every command in every family renders flat in the toolbar, with the toolbar group separators marking family boundaries. High discoverability, recommended for wide editors. Tools that own their own panel UI (LinkEditor, FindReplace, HeadingPicker, CodeLanguagePicker) remain popovers/dropdowns in both layouts by design — they are not "inlineable". Accepts ResponsiveProp<WordsToolbarLayout> for breakpoint-aware switching, e.g. `toolbarLayout={{ base: 'grouped', md: 'inline' }}`. Implementation: - types.ts: new WordsToolbarLayout = 'grouped' | 'inline'; new toolbarLayout?: ResponsiveProp<WordsToolbarLayout> on WordsProps. - index.ts: export WordsToolbarLayout type. - words.svelte: resolved via eidos.resolve(toolbarLayout, 'grouped'). New helper flattenFamilyToLeafItems(family, customItems) returns the default leaf items per family for the inline expansion. Render refactored: leaf rendering extracted to a Svelte snippet reusable by both layouts, so the conditional only chooses between <ToolbarFamilyMenu> (grouped) and {#each leafs as leaf}{@render leafItem(leaf, snippetProps)}{/each} (inline). - demo: toolbarLayout state added + wired to <Words>. Verified visually in browser (preview + screenshot): - grouped: 9 family menu triggers + 1 sibling tool = 10 toolbar buttons - inline: 0 family triggers + 28 command buttons + 5 tools = 33 buttons Tests: 161/161 pass in src/uix/{contracts,soma/components/words}. TypeScript: 0 new errors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago
dev	58c2c0babf	fix(words): close audit P0 + quiet focus event (FASE 1) ... Cierre de los hallazgos P0/P1 del audit Codex sobre Words + fix del evento contact-focus molesto reportado por el usuario. F1.1 — Fix evento foco (UX): El handler onfocus disparaba `runtime.trigger('contact-focus')` cada vez que el editor recibía foco, generando sound + haptic + visual stamp en cada re-focus desde popovers internos (bubble menu / link editor / find panel / slash menu / toolbar dropdowns). En sesión normal de edición el foco entra/sale del content docenas de veces, lo que producía fatiga perceptual. Cambios en words-provider.svelte.ts: - onfocus: emit solo en transición real (was-not-focused → focused). Re-focus desde popover interno NO emite. - onblur: si el related target es interno al Words tool tree (isInsideWordsTool), mantener focused=true (Words se trata como un solo scope de foco). Skip commit('blur') también para evitar commits espurios entre popover hops. F1.2 — Declarar 8 data-* hardcoded en morfo (audit P0-1): Añadidos al Content part: - data-words-find-match, data-words-find-active (mark highlights) - data-words-indent (list items con indent > 0) - data-language (alias parsing-only para interop con HTML externo emitido por Prism/highlight.js) Nuevas 6 parts compound (Eidos wrappers): - HeadingPicker + HeadingPickerPanel (data-words-heading-picker / -panel) - CodeLanguagePicker + CodeLanguagePanel - ToolbarFamilyMenu + ToolbarFamilyPanel F1.3 — Rename i18n keys a kebab-case (audit P0-1): 4 keys camelCase eran ilegales según contracts.test.ts. Renamed: - components.words.bubbleMenu → bubble-menu - components.words.slashMenu → slash-menu - components.words.linkEditor → link-editor - components.words.findReplace → find-replace Propagado a: morfo declarations (8 refs), provider tslangs calls (4 refs), catalog langs/components/words.ts (4 keys). F1.4 — Canonizar 9 event names a forma {family}-{verb}[-{variant}] (audit P2-1): Renombrados para parsear con el morfo:vocabulary script. El verb declarado en cada semantic ahora aparece explícito en el name: - commit-content → commit-save-content (verb: save) - commit-format → commit-set-format (verb: set) - commit-link → commit-set-link - commit-unlink → commit-reset-link (verb: reset) - commit-slash-command → commit-set-slash - commit-check → commit-set-check - commit-history → commit-restore-history (verb: restore) - commit-clear → commit-reset-content (verb: reset) - signal-invalid-input → signal-warn-invalid (verb: warn) Propagado a: sema cascade selectors, soma provider trigger calls, provider + content tests, demo route. 0 conflictos con event names de otros componentes (file-upload/tag-group/etc. usan namespaces propios sin colisión con words). Tests: 161/161 pass en src/uix/{contracts,soma/components/words}. Suite full eidos+morfo+soma+sema pendiente de verificar tras commit. contracts.test.ts ahora verde — cierra P0 audit Codex. morfo:vocabulary 0 event-name warnings (los 107 data-attr enum warnings son pre-existentes, separate scope). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	4 months ago