7 Commits (5acee947778f6dccf4542ec6e01db51e2a872337)

Author	SHA1	Message	Date
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