astra
alpha-0.1-background
alpha-0.1-dir-prefs
alpha-0.1-sec-dom
menubar-v4-safe
active-uix
morfo-runtime
morfo-driven-soma
semantuix
glm-5
main
sium-v1.0
${ noResults }
940 Commits (7cf30287de987089ca7bdb46f83b5b185234abc1)
| Author | SHA1 | Message | Date |
|---|---|---|---|
|
|
d2f184da44 |
refactor(toggle-group): item is structurally a Toggle (zero derivation duplication)
Closes the deuda left explicit in hand-off 2026-05-27 #5: the inlined derivation expressions in toggle-group.css duplicated Toggle's recipe because [data-toggle-group-item] wasn't a descendant of [data-toggle]. Resolution is structural, not a drift test: - morfo: each item declares { attr: 'data-toggle', value: v.literal(''), severity: 'required' }. Captures structural identity — an item IS a toggle in every observable sense (same press, same variant/color/size, same on/off machine). - eidos: new context.ts propagates the root's variant + size via reactive getters; the item wrapper writes them as data-attrs on its button. Combined with data-toggle, the item is DOM-equivalent to a standalone <Toggle>. - eidos css: ~150 lines deleted (base derived tokens, variant cascades, size cascade, focus/disabled/icon-only duplicates). Toggle's recipe now paints the item end-to-end. CSS keeps only the grouping concerns: flex, orientation, attached, block, focus z-index, group disabled. - composition (TSC v2.2) stays — palette overrides land on the item under [data-toggle-group][data-color='X'] [data-toggle-group-item], which Toggle's --toggle-palette-* chain reads at item scope. Verification: - DOM probe (12 combinations: 4 colors × 3 variants × 2 states) on /uix/components/toggle-group. Computed values match bit-a-bit with baseline pre-refactor (e.g. affirm/solid on = rgb(18,165,148), risk/outline on = srgb(0.2,0.118,0.043), threat/ghost on = rgb(25,17,17)). - vitest src/uix/{morfo,eidos}: 163/163 pass. - vitest src/uix/soma/components/toggle-group: 4/4 pass. - npm run check: 12 errors (all pre-existing in active Words sprint; zero added by this migration). Drive-by: the same npm-check pass surfaced 4 stale 'orientation' refs in words-toolbar.svelte + words-toolbar-group.svelte from this session's earlier toolbar refactor (orientation was removed from types but not from these soma components). Removed; brings check from 16 → 12 errors. CLAUDE.md hand-off 2026-05-28 documents the new doctrine: when a wrapper visually reuses another, declare structural identity in the wrapper's morfo. Don't duplicate the cascade, don't extend TSC for one case. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
4 months ago |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
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 |
|
|
bd73fb98f3 |
feat(eidos): variants canon — EIDOS_VARIANTS + per-component lint
Variants son canon del eidos, NO del theme. Decisión arquitectónica
firmemente sostenida: el vocabulario de variants (solid/outline/ghost/
soft/surface/line/pills) está fijo a nivel del framework — paralelo
a las 8 sema families del libro. Theme = retintar lo perceptualmente
fijo; cambia QUÉ color es `affirm`, no QUÉ significa `outline`.
Cambios:
- lib/types.ts: nueva constante `EIDOS_VARIANTS` con los 5 archetypes
canónicos (control / selection / chip / marker / tabs). Los 5 union
types se derivan via `[number]` indexed access — valor y tipo no
pueden desincronizarse. Nueva `EIDOS_VARIANT_VALUES` Set flat con
todos los valores canónicos + utilidades cross-component (`plain`,
`subtle`).
- recipe-css-contract.test.ts: nuevo test "variant CSS selectors per
component match the declared type union". Por cada componente:
extrae el union type de `components/{c}/types.ts` (soporta literal
unions + archetype aliases; cae a advisory mode en Extract<> y
conditional types); compara con `[data-{c}][data-variant='X']`
selectores en `{c}.css`; reporta typos y unauthorized extensions
bidireccionalmente.
- THEMING.md §19: nueva sección "Variants son canon del eidos, NO
del theme" con argumentación (portabilidad, type safety, archetypes
perceptuales paralelos a sema families), tabla de las 3 capas de
la cebolla, referencia a `EIDOS_VARIANTS`, comparación con Radix
Themes 3.x / Mantine 7 / Chakra v3 / Ark / shadcn. TOC actualizado.
- eidos/README.md: tabla de referencia ampliada con §19.
- CLAUDE.md: hand-off "2026-05-27 #6 (variants canon)".
- CONTINUE.md: nota de la decisión arquitectónica.
Variants component-specific permitidos (Banner inline/overlay/
persistent, Spinner bars/dots/ring, Button 'plain'): viven en cada
`components/{c}/types.ts` y el lint los valida contra la CSS del
componente.
Tests: 101/101 pass en `src/uix/eidos`. `npm run check`: los mismos 6
errores pre-existentes (lib/_demo, soma/components/internal, web/
routes/active) — no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
4 months ago |
|
|
d3f9be4ab0 |
fix(toggle): add missing per-color track/hover/border forwarders
The toggle palette cascade (palette-track / palette-hover / palette-border
declarations in TSC) referenced --toggle-{X}-track, --toggle-{X}-hover,
--toggle-{X}-border for X in {primary, neutral, secondary, affirm, risk,
threat} — but the recipe only declared 5 forwarders per color (element /
solid / solid-hover / text / contrast). The 3 missing slots × 6 colors =
18 unresolved tokens made --toggle-palette-{track,hover,border} resolve
to empty for any non-neutral color (the host default DID declare them).
Visible effect, only when a non-neutral color was active:
- ghost-on-bg = var(--toggle-palette-track) → empty → transparent fallback
- ghost-on-border = color-mix(... palette-border ...) → invalid →
property dropped, border falls through to base layer
- outline-on-bg = color-mix(... palette-element ...) was the one that
worked because palette-element forwarders DID exist for all 6 colors
Surfaced today while verifying the TSC v2.2 toggle-group color cascade
fix in the browser. The toggle-group composition correctly overrode
--toggle-palette-* on items, but the empty track/hover/border slots
collapsed ghost-state styling downstream.
Verified with browser probe (preview_inspect):
- ghost + affirm: paletteTrack #0d1514, paletteHover #023b37,
paletteBorder #145750 (was "")
- ghost + threat: paletteTrack #191111, paletteHover #500f1c,
paletteBorder #72232d (was "")
- outline + primary: paletteTrack #18111b, paletteHover #3d224e,
paletteBorder #54346b (was "")
Tests: 100/100 pass in src/uix/eidos. Recipe contract guard accepts
the new forwarders (kebab-case, valid var() values).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
4 months ago |
|
|
9c6375c96e |
feat(eidos): TSC v2.2 (parts + composition) + universal theming coverage
Token Scope Contract universal — no más excepciones arquitectónicas.
Los 3 componentes que vivían fuera de TSC v2.1 (select, avatar,
toggle-group) ahora están dentro del contrato via dos extensiones nuevas.
TSC v2.2 extensiones (lib/config-types.ts + render-css.ts + config.ts):
- `parts: readonly string[]` en RecipeTokenMultiDeclaration — emite
selectores comma-separados (`[data-{c}-x], [data-{c}-y]`) para
componentes con data-color cascadeado per-part. Consumer: select.
- `composition: { foreignRecipe: { targetSelector, tokens } }` sibling
key — overrides cross-recipe scoped a la cascade del host. Consumer:
toggle-group modifica `--toggle-palette-*` en sus items.
Migraciones:
- select: 3 private `_accent-{track,border,text}` con parts: ['trigger',
'content'] + 7 cascades color:X each. Removed orphan `_accent-solid`
(CSS no consumía).
- avatar: 6 tokens via composite scopes `['variant:X', 'color:Y']` con
matrix helper inline. Badge usa parts: ['badge']. Reemplaza 24 bloques
CSS × 2 partes.
- toggle-group: composition block con 8 palette tokens × 4 colors.
Reemplaza 4 bloques CSS per-color.
Bug toggle-group post-composition (encontrado y arreglado):
Tras la composition migration, el cascade del toggle-group seguía roto
porque los tokens derivados (`--toggle-solid-on-bg`, `--toggle-outline-fg`,
etc.) viven en scope `[data-toggle]`. El `[data-toggle-group-item]` es
sibling (no descendant), así que `var(--toggle-solid-on-bg)` resolvía
undefined. Fix: inlined derivation expressions directamente en
`[data-toggle-group-item]` y sus variant cascades (solid/outline/ghost),
referenciando palette tokens en su propio scope local.
Validador + emisor + contract:
- `validateRecipeComposition` valida el shape `{ targetSelector, tokens }`
y rechaza composition entries con scope='root'.
- `stripCompositionKey` + `emitComposition` separan el pipeline.
- `appendRecipeContractTokens` skip-list para `composition` (no aparece
como fake `--{c}-composition` knob).
- `tokenKeys`/`tokenEntries` helpers en recipe-css-contract.test.ts
filtran composition en todos los iteradores.
Documentación:
- THEMING.md §18 reescrito como "Cobertura universal de TSC". §7
extendido con subsecciones "Multi-part scope" y "Cross-recipe
composition" + ejemplos completos. TOC actualizado.
- eidos/README.md tabla de referencia ampliada con TSC v2.2 + §18.
- CLAUDE.md gana hand-off "2026-05-27 #5" (TSC v2.2 + cobertura universal).
- CONTINUE.md reescrito al estado actual de la sesión.
Working tree también incluye sprint Words en paralelo (multiple authors):
slash menu, find/replace regex, code language picker, table audit,
toolbar family menu, code highlight engine.
Tests: 786/786 pass en src/uix/{eidos,morfo,soma,sema}. `npm run check`:
6 errores pre-existentes (lib/_demo, soma/components/internal,
web/routes/active) no relacionados.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
28bf7f8b49 |
feat(pickers): wire runtime.trigger('close') in 5 picker providers
After the 2026-05-27 picker family polymorphic refactor, the morfos
declared the polymorphic `close` event but the providers were inert —
they just toggled `opts.open = false` without firing the event. This
commit cables them, mirroring the Dialog/Drawer/Popover dismissWith
pattern (book §5.3).
**Affected providers** (5): color-picker, date-picker, date-range-picker,
time-picker, time-range-picker.
**Pattern** (consistent across all 5):
- Private `triggerClose(cause)` helper maps:
'committed' / 'range-committed' → commit.save + fulfill
'cancelled' → emerge.close
'dismissed' → emerge.dismiss
'dismissed-outside' → emerge.dismiss
- Writes `data-last-action` on the morfo's target part (calendar /
clock / content) imperatively before the trigger fires so eidos can
tint the exit animation per cause.
- Called from commit() / cancel() / handleSelect / handleDateSelect /
handleRangeSelect — the close paths the provider already had.
The morfo target varies per picker:
- color-picker → content
- date-picker → calendar
- date-range-picker → calendar
- time-picker → clock
- time-range-picker → clock
Internal state (`opts.open = false`) sequence preserved — the trigger
fires BEFORE the open flip so the perceptual signal stamps
`data-event-*` on a node that is still rendered.
**dismissed / dismissed-outside causes** are declared but not yet wired
to specific gestures — the picker shell delegates escape / outside-click
handling to its wrapping Popover, whose own polymorphic close fires
independently. The cause strings remain in the helper for future use
(e.g. if a picker grows its own escape handling).
**Result**:
- Pickers now emit perceptual signal on commit/cancel via sema engine.
- Eidos `[data-last-action='X']` selectors get exit-tint values to act
on (mirror of Dialog/Drawer/Popover).
- Picker tests: 18/18 still pass. `morfo:check`: 0 issues.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
312c8740ca |
refactor(date-picker): rename kind 'date' to 'day' for trio consistency
Audit caught `data-kind="date"` violation — the date-picker / date-range-picker morfos declare `data-kind ∈ [day, month, year]` but the public `kind` prop accepted `'date' | 'month' | 'year'` and defaulted to `'date'`. Rename prop value `'date' → 'day'` so the trio is consistent (all named after the grid cell granularity). **Rationale (book-pure)**: - The trio `day` / `month` / `year` is internally consistent — all three name the granularity of the grid cell the calendar view shows. - `'date'` was awkward in the trio: month and year pickers also pick "dates", just at coarser granularities. - The morfo enum was already canonical (`['day', 'month', 'year']`); this aligns the prop with the contract. **Surface touched** (all `'date' → 'day'` for the kind value): soma components: - date-picker / date-range-picker / date-field / date-range-field: provider type (DatePickerKind / DateRangePickerKind), default value, test fixtures, types.ts JSDoc. demos (web/routes/uix/components/): - date-picker / date-range-picker / date-range-field: kind state, selector chips, doc table. `'date'` literals that DON'T refer to kind (kept untouched): - ValueProfile = 'date' | 'datetime' | 'zoned' (different concept). - SegmentLock = 'none' | 'year' | 'monthYear' | 'date'. - CSS `input[type='date']` (HTML attribute). **Result**: - `npm run morfo:check`: 1 issue / 1 component → **0 issues**. All 107 routed morfos validate against their demo DOM ✓ - `npm run check`: 0 errors ✓ Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
59c3bc96c4 |
fix(color-picker): emit data-state explicitly on Provider props
Audit caught 'data-state not emitted' on the ColorPicker Provider. The
morfo declares `data-state ∈ [open, closed]` with `value: v.stateRef('open')`
— the runtime's `syncAttrs` can sync this from `dom.apply`, but only if
the provider receives a `ref` on its opts (which the ColorPickerProvider
doesn't — `ColorPickerOpts` extends `ProviderOpts` + `StateProps` without
the ref slot).
Rather than re-shape the opts to add ref + bind it in the wrapper, just
emit `data-state` explicitly in the provider's props derivation, same
form as the other six declarative attrs that the provider already
materialises (`data-format`, `data-invalid`, `data-disabled`,
`data-readonly`, `data-required`, `aria-invalid`). Matches the
dialog/drawer/popover doctrinal pattern for disclosure attrs.
After this commit `morfo:check`: 1 issue remaining (date-picker
`data-kind="date"` — separate domain issue, addressed next).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
9f1466dc57 |
fix(avatar): data-color severity optional to acknowledge custom-color escape hatch
Audit caught 4 'missing data-color' violations on the Avatar Provider — the demo includes consumers passing non-canonical CSS color strings (`#7c3aed`, `oklch(70% 0.15 220)`, `rgb(245 158 11)`) which the wrapper correctly routes through `data-color-custom=""` + an inline `--avatar-color-custom` CSS variable instead of the enum attr. The morfo enum can't represent arbitrary CSS color strings, so the `data-color` attr is legitimately absent in those cases. The contract should reflect that: severity becomes `optional`. Symmetric with the `Avatar.Badge` part which already declared this attr as optional. Behaviour unchanged. Only the morfo's severity flag changes. After this fix `morfo:check`: 6 issues / 3 components → 2 issues / 2 components. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
3542f3a730 |
fix(button): remove redundant data-state enum (book §1 purity)
Audit 2026-05-27 caught 11 `data-state="idle"` violations across 3
disclosure trigger components (dropdown-menu, table.row-detail-trigger,
tree-grid.expand-trigger). Root cause was composition: each used
`<Button>` as its chrome via `{...props}` spread, and Button's morfo
declared a redundant `data-state ∈ [idle, loading]` enum that the
runtime emitted unconditionally — clobbering the outer trigger's
`data-state="open|closed"` via mergeProps order.
Doctrinal fix: REMOVE `data-state` from Button's morfo entirely.
Button's loading state is already fully expressed by the
`data-loading` presence flag (declared further down in the same morfo
and consumed by eidos as `[data-loading]`, not
`[data-state='loading']`). The 'idle' value was a redundant synonym
for "not loading" — and the book canon favours "presence = active
state, absence = rest" for binary states (cf. `data-disabled`,
`data-loading`).
**Book-pure rationale**:
- Disclosure (family `emerge`): `data-state ∈ [open, closed]` —
dialog, drawer, popover, accordion, dropdown-menu, etc.
- Lifecycle (family `sustain`): `data-state ∈ [idle, loading, ...]` —
image, avatar, button (until now), card, field.
- Mixing the two vocabularies in a single attr is the incoherence
this fix removes.
- Button is interactive surface, NOT lifecycle: its "rest" is
natural absence of `data-loading`, not a distinct `idle` state.
**Result**:
- `npm run morfo:check`: 16 issues / 6 components → **6 issues / 3
components**. Removed all 11 `'idle'` violations.
- Composition pattern restored: `<Button>` no longer clobbers
`data-state` on the host trigger.
- Eidos CSS unchanged (already uses `[data-loading]`).
- Tests: 803/801 unchanged (2 remaining failures are unrelated, in
the user's words editor WIP).
**Not fixed in this commit** (3 remaining `morfo:check` failures):
- `avatar.provider`: missing `data-color` emission (4×)
- `color-picker.provider`: missing `data-state` emission
- `date-picker.provider`: `data-kind="date"` not in declared
`[day, month, year]` enum.
Each requires a separate domain decision.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
681e056102 |
fix(uix-audit): close 4 pre-existing issues found in system audit
System-wide audit of `src/uix/*` + `src/arts/adom` (excluding demos and web/routes). Findings + fixes documented in `src/uix/AUDIT_REPORT_2026-05-27.md`. **Fixed**: 1. `src/uix/eidos/lint.test.ts`: "every eidos CSS component has a morfo file" test extended to walk `morfo/internal/` as well as `morfo/components/`. The picker-shell relocation (audit-codex P1 #5) moved picker-shell to internal but the test wasn't updated. 2. `src/uix/contracts.test.ts`: two pre-existing failures resolved. (a) Picker WithChild regex updated to accept the `WithChild<Omit<PrimitiveDivAttributes, ...> & {...}>` shape applied in the audit-codex P0/P1 picker ProviderProps refactor. (b) `collectPublicSomaComponentDirs` now skips `picker-shell` as an internal primitive (symmetric to `collectKnownMorfoDataAttrs` which now walks `morfo/internal/` to include the picker-shell data-attrs). 3. `src/uix/soma/components/command/command-provider.svelte.ts`: restored missing `createAttrs(commandMorfo)` import. Was the only ERROR in `npm run check` baseline. 4. `src/uix/soma/components/dialog/types.ts`: JSDoc comment updated to reflect polymorphic close shape (cosmetic alignment with the 2026-05-27 refactor). **Result**: - `npm run check`: 1 ERROR → **0 ERRORS** ✓ - `npx vitest run src/uix`: 5 failed → **2 failed** (both 100% in user's words/* WIP, not framework code) - Polymorphic close + persistence + a11ySemantic rollout: **zero drift detected** across morfos / providers / sema cascades / tests. **NOT actioned** (documented in report): - 6 pre-existing `morfo:check` failures (avatar / color-picker / date-picker / dropdown-menu / table / tree-grid). All require domain decisions (drop 'idle' state vs add it to morfo enum, etc.). - 1 navigation-menu data-state='visible' eidos selector drift. - ~14 README/`.md` files with stale Dialog/Drawer/Popover descriptions. - Words editor doctrinal cleanup (user's WIP). - Tooltip polymorphic alignment (optional, no consumer benefit today). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
34e0064f2c |
feat(toast): explicit persistence: 'transient' on signal-announce event
Documents the deliberate choice to keep the announce event's perceptual projection transient even though the canonical book §6.2 table would suggest `untilFix` for `signal + risk` or `untilAction` for `signal + threat`. Rationale: the Toast component owns its own lifecycle via `Toast.Provider`'s auto-dismiss timer + user dismiss. The `data-event-*` projection is a one-shot pulse when the toast enters. Persistence of the toast surface itself lives in `data-state` (open/closed) on the Item, not in the signal projection. Found via audit of all `verb: 'warn' | 'alert' | 'notify'` events across `src/uix/morfo/components/*`. Toast was the only one without an explicit persistence declaration — annotated now so the choice is intentional rather than implicit-default. (`words.signal-invalid-input` also lacks persistence but it belongs to the in-flight words editor work tracked separately by the user.) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
9ca8b4e30b |
docs(claude/libro): document persistence + a11ySemantic + polymorphic close rollout
LIBRO_VARIACIONES_Y_EXTENSIONES.md: - New section D.9 (persistence + holds-by-intent — book §6.1). - New section D.10 (a11ySemantic per event — book §9.1). - New section D.11 (polymorphic events — book §5.3) with the full rollout state across overlays + picker family. CLAUDE.md hand-offs: - 2026-05-27: initial sprint (persistence + a11ySemantic + polymorphic types). - 2026-05-27 #2: caller messages + persistence extension + Dialog refactor. - 2026-05-27 #3: Drawer + Popover polymorphic refactor. - 2026-05-27 #4: Picker family polymorphic refactor + test fixtures decoupling. Each hand-off records: scope, files touched, doctrinal decisions, and pending follow-ups. The whole rollout was verified on 680/680 tests across sema + morfo + soma + adom scopes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
8dce794ab4 |
refactor(pickers): collapse close-* into polymorphic close on 5 picker morfos
Mirror of the dialog/drawer/popover refactor (book §5.3) applied to the
picker family:
- color-picker
- date-picker
- date-range-picker (incl. close-range-commit cause)
- time-picker
- time-range-picker
Each had 4 close-* events with per-event prewrite; collapsed to a single
polymorphic `close` event:
semantic: {
family: 'emerge', verb: 'close', target: v.partRef('calendar'|'clock'|'content'),
sequence: 'pre', persistence: 'transient',
allowedFamilies: ['emerge', 'commit', 'signal']
}
**Behaviour preserved**: the picker providers don't currently fire any
`runtime.trigger('close*')` — they just toggle `opts.open = false` and
let the popover unmount. The previous `close-*` events were declared but
inert (only consumed by schema validator + compiler tests). Refactor is
doctrinal alignment, not behavioural change.
**Sema cascade**: only color-picker has a sema pack and it did not
reference any close-* event (only handle-pick / handle-drag /
commit-set). Zero cascade updates needed.
**Test fixtures**: compile.test.ts + runtime.svelte.test.ts already
migrated to the synthetic `prewriteFixtureMorfo` in the core commit,
so this refactor doesn't break them.
After this commit the only morfo with the pre-polymorphic per-event
prewrite shape is the synthetic test fixture itself — every production
morfo is on the polymorphic close.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
9f5fbfdb71 |
refactor(dialog/drawer/popover): collapse close-* into polymorphic close (book §5.3)
Three overlay components each had five `close-*` events (close-save /
close-cancel / close-dismiss / close-dismiss-outside / close-after-fail)
with per-event prewrite arrays setting `data-last-action`. Per the book
§5.3 polymorphism canon, collapse to a single `close` event:
semantic: {
family: 'emerge', verb: 'close', target: ...,
sequence: 'pre', persistence: 'transient',
allowedFamilies: ['emerge', 'commit', 'signal']
}
NO prewrite — the provider sets data-last-action imperatively before
trigger because polymorphic events can't bind a single prewrite per call.
**Provider pattern** (Dialog / Drawer / Popover):
- New `DISMISS_CAUSES` map: { save, cancel, dismiss, dismiss-outside, fail }
→ { lastAction, semantic: { family, verb, intent? } }.
- `dismissWith(action, opts?)` does `dom.apply({ 'data-last-action': cause.lastAction })`
then `runtime.trigger('close', { fallbackTarget, semantic: cause.semantic, message })`.
- `triggerClose` is now private; previously-public 2-arg signature collapsed
into the cause-driven internal helper.
- All internal callsites (escape, outside-click, hover-close, close button)
migrated to `dismissWith`.
- `opts.message` forwarded to runtime — when `a11ySemantic.requiresLiveRegion`
is set (today only for the 'fail' case), the live region announces it.
**Schema validator relaxed** (`src/uix/morfo/schema.ts`): the
"every declared value of `data-last-action.values[]` must be prewritten
by some event" check was DROPPED — provider-imperative writes can't
satisfy it. The reverse direction (`prewritten ⊆ declared`) stays strict.
**Cascade rewrite** (`src/uix/sema/components/{dialog,drawer,popover}.ts`):
- `eventNamePrefix: 'close-'` → `eventName: 'close', eventFamily: 'emerge'`
- `eventName: 'close-dismiss-outside'` → `eventName: 'close', state: {
attr: 'data-last-action', value: 'dismissed-outside' }`
**Eidos CSS**: not touched — already reads `data-last-action` directly.
**Public API preserved**: `dismissWith` signature + observable behaviour
identical. External consumers see no difference.
Tests updated for the new event name. 680/680 pass across sema + morfo +
soma + adom scopes.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
c34fd1fd31 |
feat(uix-components): apply persistence + a11ySemantic + live-region messages to 6 morfos
Per the canonical book §6.2 + §9.2 mapping, six morfos with `signal.warn`,
`signal.alert` or `signal.notify` events get explicit `persistence` +
`a11ySemantic` annotations, and their providers wire up `clearTarget` +
caller-message integration with the shared live region.
**Morfo annotations**:
| Morfo / event | persistence | a11ySemantic |
|--------------------------------------------|----------------|---------------------------------------------------------|
| announce.signal-alert | untilAction | requiresPersistentTrace + requiresLiveRegion |
| form.signal-warn-invalid | untilFix | requiresPersistentTrace + requiresFocusMove + reducedMotionFallback='text' |
| file-upload.signal-warn-reject | untilFix | requiresPersistentTrace + reducedMotionFallback='text' |
| password-field.signal-notify-caps-state | stateBound | requiresLiveRegion + reducedMotionFallback='text' |
| tags-input.signal-warn-reject | untilFix | requiresPersistentTrace + reducedMotionFallback='text' |
| textarea.signal-warn-count-overflow | untilFix | requiresPersistentTrace + reducedMotionFallback='text' |
**Provider wiring**:
- form-provider: clearTarget on submit, message="{N} form errors..." via
FORM_LANGS.ERROR_SUMMARY_*.
- file-upload-provider: clearTarget before each accept/reject cycle, message
via new FILE_UPLOAD_LANGS.REJECT_SUMMARY_{SINGLE,MULTI}.
- password-field-provider: clearTarget on caps-off transition, message
via existing PASSWORD_FIELD_LANGS.CAPS_WARNING.
- tags-input-provider: helper `emitWarnReject` (clear + emit + message
via new TAGS_INPUT_LANGS.REJECT_WARNING), called from addTagValue,
addFromInput, handlePaste. Successful add also clears (the add is the fix).
- textarea-provider: emits only on transition INTO overflow, clears in
transition OUT (untilFix projection persists). Message via new
TEXTAREA_LANGS.OVERFLOW_WARNING with {{max}}.
Three new lang catalog entries (reject/overflow warnings) merged into
the existing components.{name}.* namespaces.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
70f6f3bf0d |
feat(uix): persistence + a11ySemantic + polymorphic core (book §5.3, §6, §9)
Three book canon items codified in code:
**Persistence (libro §6.1)** — separa `hold` (perceptual min) de
`persistence` (lifecycle real):
- New `SignalPersistence = 'transient' | 'untilAction' | 'untilFix' | 'stateBound'`
- New `SEMA_HOLDS_BY_INTENT` canonical lookup table (`src/uix/sema/holds.ts`)
- `EngineSemantic.emit()` returns the resolved signal id; keeps projection
alive past hold for non-transient. Exposes `clear(id)`, `clearTarget(target)`,
`hasActive(id)`.
- `SomaRuntime.trigger()` returns `TriggerResult { id?, persistence? }`.
Exposes `clearSignal(id)`, `clearTarget(target)`, `partRef(part)`.
**a11ySemantic (libro §9.1)**:
- New `MorfoA11ySemantic` (requiresPersistentTrace, requiresLiveRegion,
requiresFocusMove, keyboardEquivalent, reducedMotionFallback) on MorfoEvent.
- `ActiveDom.prefersReducedMotion`: reactive tracker via media query
(`src/arts/adom/reduced-motion.svelte.ts`).
- `ActiveUix.announce(msg, priority?, timeout?)`: lazy-created live region
via `dom.writeNode`.
- `Soma.runtime()` auto-wires `sources.announce`.
- `SomaRuntime.trigger()` honors a11ySemantic after emit (live region, focus,
reduced-motion fallback including `channels: []` for 'state').
**Polymorphic events (libro §5.3)** — ADITIVO sobre shape concreto:
- `allowedFamilies?: readonly SemaFamily[]` opcional en MorfoEventSemantic.
- Provider override via `runtime.trigger(name, { semantic })`.
- Default family of the morfo is implicitly allowed.
- New `SomaRuntimePolymorphicError`.
- New `isPolymorphicSemantic` type guard.
Synthetic `prewriteFixtureMorfo` (src/uix/morfo/test-fixtures.ts) decouples
compile + runtime tests from the production morfo catalogue.
671 tests pass in sema + morfo + soma + adom scopes.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
e6eee766ee |
Improve words editor tooling
|
5 months ago |
|
|
7afa7057d4 |
docs(soma): add Sema events section to 23 component READMEs
Documenta los cambios doctrinales del sprint Lectura C + cabling soma. Cada README añade una sección `## Sema events` con tabla (event / family / verb / target / intent / when) + referencia al pack si existe + notas doctrinales de las correcciones aplicadas. Componentes: - Packs creados este sprint (11): switch, toggle, toggle-group, menubar, navigation-menu, dropdown-menu, context-menu, tree-view, tree-grid, tooltip, collapsible. - Componentes con emisión cableada sin pack (8): listbox, grid-list, table, feed, command, carousel, announce, clipboard. - Componentes gestuales con notas sobre handle-scroll no-emitido (3): drag-drop, virtual-list, virtual-grid. - Checkbox: documenta la doctrina de dos eventos direccionales (commit-toggle-check/uncheck con intent affirm/neutral). Correcciones doctrinales documentadas: - announce: commit-announce-* → signal.announce / signal.alert - tree-view: target item → branch para emerge-expand/collapse - table: shift.sort → commit.set; shift.expand-row → emerge.expand - drag-drop: commit.drag-start/drop → handle.pick/drop - clipboard: commit.copy → commit.save; commit.copy-error + threat → commit.fail + risk - virtual-list/grid: handle-scroll declarado pero NO emitido (decisión consciente — buzz nonstop con family.handle haptic-only). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
cbf76b66c8 |
feat(soma): wire runtime.trigger for batch C (gestural + wrappers)
Cierra el sprint de cabling. De los 6 originales del batch C, 3 son
wrappers sin events propios (time-range-field, link-preview,
alert-dialog) que delegan en su componente compuesto — zero wiring
necesario. Los 3 restantes:
- drag-drop:
- startDrag(...) → handle-pick en draggable con params.source
como fallbackTarget.
- commitDrop(target) → handle-drop en droppable con target.
- cancelDrag() → commit-cancel en draggable con drag.source.
- virtual-list:
- scrollToIndex(...) → shift-navigate-to-index en viewport
(programmatic discrete-navigation moment).
- observeResize callback → commit-set-resize en provider
cuando el clientWidth/Height realmente cambia (skip initial).
- NO emite handle-scroll: family.handle es haptic-only, el
scroll listener fires en cada píxel — emitiría buzz nonstop.
Documentado como decisión consciente; apps con scroll-feedback
wiran su propio throttle.
- virtual-grid: análogo virtual-list, con scrollToCell →
shift-navigate-to-cell. NO emite handle-scroll-row /
handle-scroll-column por la misma razón.
Verificación:
- npm run morfo:vocabulary → EXIT 0
- npx vitest run src/uix/sema src/uix/morfo → 195/195 pass
- npx vitest run src/uix/soma → 419/419 pass
Tras este commit: TODOS los morfos con scope:sema + events declarados
emiten desde soma (excepto los 4 `handle-scroll*` de virtual-list/grid
intencionalmente saltados). Cierra el caveat "soma no emite" del
proyecto memory.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
0784cae578 |
feat(soma): wire runtime.trigger for batch B (8 components)
Continúa batch A. Estos 8 componentes tienen scope:sema y events
declarados pero no usan pack propio — emiten sobre family base.
- listbox: select() central → commit-select / commit-unselect en item.
- grid-list: select() central → idem en row.
- table:
- SortTrigger.onclick/onkeydown → commit-set-sort en column-header.
- Row.onclick/onkeydown → commit-select en row.
- RowDetailTrigger → emerge-expand-row en row (solo transición
closed → open; el morfo no declara collapse counterpart).
- feed:
- focusAt() (centraliza navegación de teclado) → shift-navigate-focus-item
en article.
- PageDown-en-final + Sentinel.onIntersect → commit-submit-load-more
en provider.
- command:
- Item.onclick → commit-submit-invoke en item (path mouse).
- selectCurrent() (Enter key) → commit-submit-invoke vía lookup
por data-value en provider ref.
- carousel: commit() central (next/prev/goto/autoplay) →
shift-navigate-slide en item, lookup por data-index.
- announce: announce() → signal-alert (assertive) o signal-announce
(polite). clear() → commit-reset.
- clipboard: copy() acepta optional triggerEl → commit-save-copy
(success) / commit-fail-copy (catch). Trigger.onclick pasa
e.currentTarget.
Verificación:
- npm run morfo:vocabulary → EXIT 0
- npx vitest run src/uix/sema src/uix/morfo → 195/195 pass
- npx vitest run src/uix/soma → 419/419 pass
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
adf89a0811 |
feat(soma): wire runtime.trigger for batch A (7 components)
Los 11 packs sema shipped en commit |
5 months ago |
|
|
66318c4759 |
fix(tree-view): target branches for emerge-expand/collapse
Morfo declaraba target='item' para emerge-expand y emerge-collapse,
pero los items son hojas — no se expanden. El stamp del data-event-*
debe aterrizar en el branch (data-tree-view-branch), que es el part
que realmente revela/oculta contenido.
- Morfo: target: v.partRef('item') → v.partRef('branch') en ambos
events de emerge. commit-select sigue en item (selección aplica
tanto a leaves como a branches).
- Pack: selector `onItem(emerge-*)` → `onBranch(emerge-*)`. Las dos
cascadas de emerge ahora matchean el elemento correcto en DOM.
tree-grid no afectado: su Row es a la vez item y branch (data-has-
children + data-expanded en el mismo part), así que target='row'
ya estaba correcto.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
43b1537291 |
refactor(picker-shell): close as INTERNAL primitive (audit P1 #5)
picker-shell quedó suelto en el audit-codex: existía un morfo placeholder en src/uix/morfo/components/picker-shell.ts sin imports, sin events, sin texts, y los 5 composite pickers (date / date-range / time / time-range / color) consumían eidos parts via re-export bajo SU namespace (<DatePicker.Footer>, etc.) — apps nunca escribían <PickerShell> directo. Cierre como INTERNAL primitive per la propia recomendación del audit: - Movido src/uix/morfo/components/picker-shell.ts → src/uix/morfo/internal/picker-shell.ts. El audit walk de morfo/components/ ya no lo encuentra. Cero imports rotos (no había ninguno). - README en src/uix/eidos/components/picker-shell/README.md declara el status INTERNAL + diagrama de composición de los 5 pickers. - Docstring del morfo actualizado con STATUS: INTERNAL explícito. - audit-codex-full-1.md sección 5 marcada RESUELTO con verbatim del cierre. Verificación: - npm run morfo:vocabulary → EXIT 0 - npx vitest src/uix/sema src/uix/morfo → 195/195 pass - npm run component:audit → picker-shell ya no aparece (no era public component, no debe figurar en lista de NEEDS-WORK) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
826ca2bf46 |
docs(sema): add D.8 — channels: qué es canal y qué no
Doctrina arquitectural sobre límites de los canales runtime: - Canales built-in del framework: sound + haptic (los únicos). - ARIA estructural: declarativo en morfo, NO canal. - ARIA dinámico (live regions): soma escribe directo, NO canal. - Visual (motion / color / presence): eidos CSS via data-event-*, NO canal. - Regla operativa: algo es canal sólo si recibe SemanticSignal, acepta modulación por intent.deltas, y tiene signature paramétrica análoga a sound/haptic. ARIA dinámico falla la modulación. - Channels extensibles: declaration merging del registry; opt-in por app (voice, a11y formal, etc.). Framework no envía ninguno. Cierra una tentación que surgió en D.7 — convertir ARIA en canal era confusión categorial. Esta sección fija los límites para que nadie reincida. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
2d562f3788 |
feat(sema): Lectura C steps 5-8 — 11 sema packs + doctrina samples
Step 5 — 3 packs alta-frecuencia (silencio + tap leve):
switch, toggle, toggle-group
+ tuning `form.toggle.silent: { gain: { op: 'add', value: -0.3 } }`
Step 6 — 6 packs menús + árboles (emerge.soft / form.commit.subtle):
menubar, navigation-menu, dropdown-menu, context-menu,
tree-view, tree-grid
Step 7 — card scope: KEEP `sema` + `family-default` (sin código).
Step 8 — 2 packs (versión lean tras descartar 5 prematuros):
tooltip (silent-by-default)
collapsible (mirror accordion)
+ tuning `tooltip.silent: { gain: { op: 'add', value: -0.2 } }`
Doctrina codificada en LIBRO_VARIACIONES_Y_EXTENSIONES.md:
- D.5 — packs alta frecuencia (toggles)
- D.6 — packs superficies menú / árbol
- D.7 — sonido canónico vs samples
SOUND_LIBRARY = recursos | SOUND_TUNINGS = canon | packs = composición
samples NO sustituyen firma con intent.deltas
sampleOverlay descartado permanentemente (sobreingeniería)
family signal admite excepción para marcas culturales
Cierra Lectura C steps 5-8 del audit-codex P1 #3. Total: 11 packs
nuevos sobre 9 perfiles canónicos de tuning. 195/195 tests.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
504780ad8b |
feat(morfo/sema): add expression field + sema coverage check (P1 #3)
User doctrinal decision 2026-05-26: `scope: ['sema']` declares
**participation** in sema. It does NOT impose the obligation of
shipping a pack. The new `expression` field on Morfo declares HOW the
component contributes its perceptual signature.
Schema change (src/uix/morfo/types.ts + schema.ts):
type SemaExpressionMode = 'pack' | 'family-default' | 'delegated' | 'none';
interface Morfo {
// ...
expression?: SemaExpressionMode;
}
Semantics:
- 'pack' — sema/components/{kebab}.ts cascades the signature
- 'family-default' — use family base + intent deltas as-is (no override)
- 'delegated' — composite; perceptual expression lives in children's packs
- 'none' — explicit opt-out (rare; reserved for headless contracts)
Coverage check (scripts/morfo-vocabulary-check.ts §4):
FAIL events declared + no 'sema' in scope — incoherent
WARN scope:sema + events + no pack + no expression — ambiguous
OK scope:sema + events + (pack OR expression) — explicit
OK no events — coverage N/A
Pack discovery is automatic from filesystem; the morfo doesn't need to
declare `expression: 'pack'` redundantly. Lint passes when a pack file
exists at `src/uix/sema/components/{kebab}.ts`.
Applied to 5 morfos that had events but no sema scope (incoherent state):
- announce, clipboard, listbox, virtual-grid, virtual-list
now declare scope: ['soma', 'sema'] + expression: 'family-default'.
Applied to 28 morfos that had scope:sema + events but no pack:
- 4 composites (date-picker, date-range-picker, time-picker,
time-range-picker) → expression: 'delegated'
- 24 others (button, card, carousel, collapsible, color-field, command,
context-menu, drag-drop, dropdown-menu, feed, grid-list, menubar,
month-grid, navigation-menu, range-calendar, switch, table, time-field,
toggle-group, toggle, tooltip, tree-grid, tree-view, year-grid)
→ expression: 'family-default'
The 29 morfos that already have packs are not touched; the lint
discovers their packs from the filesystem.
Pending follow-up (separate commits per author's plan):
- Create packs for high-frequency toggles (switch, toggle, toggle-group)
- Create packs for menus / navigation / tree (menubar, navigation-menu,
context-menu, dropdown-menu, tree-view, tree-grid)
- Review card scope (may not need sema scope at all)
- Per-component review of the rest
Verification:
- npm run morfo:vocabulary: EXIT 0
- 0 coverage FAILs, 0 coverage WARNs
- vitest src/uix/sema src/uix/morfo: 195/195 pass
- 7 name-shape WARNs remaining are all words.* (separate dev track)
Closes P1 #3 from src/uix/audit-codex-full-1.md (Sema coverage policy).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
b0869878d8 |
docs(audit): mark P1 #4 (non-canonical event verbs) as RESUELTO
Updated section 4 of audit-codex-full-1.md to reflect the closure of P1 #4 in the sema canon sprint (commits |
5 months ago |
|
|
00f0b740e6 |
refactor(sema/docs): apply author's evaluation — status classification + intentRequirement/intentGuidance split
Two changes in one commit:
1. **Doctrina del autor sobre el documento de variaciones**
The author evaluated LIBRO_VARIACIONES_Y_EXTENSIONES.md and gave per-
entry verdicts. The doc is now rebranded, restructured, and classified:
- Renamed: "Registro de desviaciones entre implementación y canon
editorial". Disclaimer at top: not the book, internal registry only.
- Formal status classification (BOOK_CANON / PROJECT_CANON / CANDIDATE
/ LOCAL_EXTENSION / DEPRECATED / ALIAS / IMPLEMENTATION_CONTRACT).
- Per-entry verdicts assigned per author's evaluation. Author's
doctrinal texts included verbatim where given.
- A.6 split per verb (was a single bullet for apply/partial/block/
move/upload; now each has its own status: apply=BOOK_CANON,
move=BOOK_CANON, upload/partial/block=CANDIDATE).
- A.6/A.7 ordering fixed (commit.unselect now A.11 — terminal).
- C.3 split into C.3.a (renames mecánicos) y C.3.b (correcciones
doctrinales — command intent shift).
- E (resumen ejecutivo) actualizado: clear/unselect movidos a
resueltos (estaban contradiciéndose). Pendientes reales listados.
- F + new section G ("Anti-mezclas") con disciplina sobre el doc.
2. **Family policy: split `intentPolicy` en `intentRequirement` +
`intentGuidance`** (D.3 del doc).
La policy actual `'allowed' | 'expected' | 'optional'` mezclaba dos
ejes que el autor pidió separar:
- `intentRequirement: 'required' | 'optional' | 'forbidden'` —
compile-time type constraint.
- `intentGuidance: 'expected' | 'contextual' | 'discouraged'` —
guía doctrinal sin efecto en tipos.
Policy nueva:
| family | requirement | guidance |
|----------|-------------|--------------|
| contact | optional | discouraged | (Cap 22 §11)
| commit | required | expected |
| signal | required | expected |
| handle | optional | contextual |
| emerge | optional | contextual |
| shift | optional | contextual |
| sustain | optional | contextual |
| delegate | optional | contextual | (Cap 29 §4)
`IntentExpectedFamily` deprecated → `IntentRequiredFamily` (alias
mantenido). `IntentPolicy` type también deprecated.
Consumers actualizados: event.ts (isSemaEvent usa requirement),
validation.ts (validateSemaEvent usa requirement), event.test.ts
(tests usan ambos campos), dialog.ts (comment doc update).
3. **Bug menor encontrado en `SEMA_TRANSITIONAL_FAMILIES`**: faltaba
`delegate`. Añadido. (Era inconsistente con SemaTransitionalFamily
type que sí lo incluye.)
Verification:
- vitest src/uix/sema src/uix/morfo: 195/195 pass
- morfo:vocabulary: 7 warns (todos words/*, separate dev track)
- EXIT 0
Pendiente futuro (no en este commit):
- Añadir flag `emission` a MorfoEvent type per D.2 (eventos declarados
pero no emitidos)
- Re-evaluar verbos CANDIDATE (acknowledge/confirm/upload/partial/
block) cuando aparezcan más casos de uso
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
bbfefdb63d |
refactor(morfo): rename 12 events to {family}-{verb}-{variant} canonical shape (Capa 3 cluster otros)
Closes the last cluster of name-shape drift in the non-words morfos. 11
are pure cosmetic renames (declared verb already canonical); 1
includes a doctrinal correction.
Renames (verbo declarado canónico, solo el name):
- carousel.shift-slide → shift-navigate-slide
- feed.shift-focus-item → shift-navigate-focus-item
- feed.commit-load-more → commit-submit-load-more
- file-upload.commit-add → commit-set-add
- file-upload.signal-reject → signal-warn-reject
- form.signal-invalid → signal-warn-invalid
- number-field.handle-scrub → handle-drag-scrub
- range-calendar.commit-start → commit-select-start
- range-calendar.commit-range → commit-select-range
- tags-input.commit-add → commit-set-add
- tags-input.signal-reject → signal-warn-reject
Doctrinal correction:
- command.commit-invoke (declared submit + fulfill)
→ commit-submit-invoke + submit + AFFIRM (not fulfill)
Per book cap. 22 §8 ("Error típico: contact.press + fulfill — esto
hace que el sistema diga 'ya terminó' cuando solo ha empezado.
Contact inicia. Commit resuelve."), the user submitting a command
in the palette does NOT mean the command has completed. Same
precedent as Button: celebrate-before-time is wrong. Affirm
acknowledges the submission; the command's actual completion
(success/failure) fires downstream from whichever morfo owns it.
Consumers updated:
- sema/components/{file-upload,form,number-field,tags-input}.ts
- soma/components/{file-upload,form,number-field,range-calendar,tags-input}/*.ts
- sema/resolver.test.ts (event name + data-event selector)
Verification:
- morfo:vocabulary: warns 19 → 7 (-12), the 7 remaining are all words.*
(separate dev track, excluded). EXIT 0.
- vitest src/uix/sema src/uix/morfo: 195/195 pass
Doc src/docs/LIBRO_VARIACIONES_Y_EXTENSIONES.md C.3 marked RESUELTO
with full list of renames + the command intent correction.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
f3641347de |
feat(sema/morfo): add commit.unselect to canon + apply to 6 morfos
User doctrinal decision (2026-05-25): add `unselect` as canonical verb of
the commit family. The pair `select` / `unselect` covers results applied
on the selection state of an item — distinct from `toggle` (binary
control flip) and `remove` (retirement from a collection).
Quoting the author:
"Seleccionar y deseleccionar son resultados aplicados sobre el estado
de selección de un elemento. Eso es commit, porque el resultado queda
aplicado.
- No es remove: no estás eliminando el item ni sacándolo de una
colección funcional; solo estás cambiando su estado de selección.
- No es necesariamente toggle: toggle describe mejor el mecanismo
binario o el control, pero no expresa tan bien el resultado
semántico concreto."
Changes:
- src/uix/sema/verbs.ts: add `unselect` to SEMA_VERBS.commit after
`select` (natural pair). Header comment documents the doctrinal
distinction with toggle and remove.
- 6 morfos updated: calendar, combobox, grid-list, listbox, select,
tag-group. Each changes `commit-unselect` from
`verb: 'remove' + intent: 'neutral'` to
`verb: 'unselect' + intent: 'affirm'`. Names preserved (already
canonical now). Intent `affirm` because "the action applied
correctly" (sobrio, not celebratory).
- src/docs/LIBRO_VARIACIONES_Y_EXTENSIONES.md: C.2 marked RESUELTO with
the full doctrinal reasoning verbatim. A.3 (remove vs delete) updated
to reflect the three-way distinction now formalized
(unselect/remove/delete). New A.7 entry for `unselect` itself with
"para el libro" note (add to Cap 23 §5).
Verification:
- morfo:vocabulary: warns 25 → 19 (-6 unselect cluster), EXIT 0
- vitest src/uix/sema src/uix/morfo: 195/195 pass
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
1582572e9b |
refactor(morfo): commit-clear → commit-reset across 10 components (cluster clear resolved)
User directive: clearing a field is `commit.reset` per book cap. 23
("vuelve a estado inicial") — fits all 10 components in the cluster
since each goes back to empty-initial-state, not discarding meaningful
defaults.
Components updated (morfo + soma trigger + sema cascade + test):
- color-picker, date-field, date-picker, date-range-picker
- file-upload, range-calendar, tag-group, tags-input
- time-picker, time-range-picker
range-calendar.commit-clear was declaring `verb: 'remove'` — corrected
to `'reset'` along with the name change.
All event names now: `commit-reset` (family commit, verb reset, intent
neutral). No variant suffix needed; no ambiguity of multiple resets in
any single component.
words.commit-clear excluded — separate dev track.
Doc updated: src/docs/LIBRO_VARIACIONES_Y_EXTENSIONES.md C.1 marked as
RESUELTO with author's disposition.
Verification:
- morfo:vocabulary: warns 35 → 25 (-10), EXIT 0
- vitest src/uix/sema src/uix/morfo + tag-group tests: 199/199 pass
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
670c54177d |
docs: document deviations from the book canon (LIBRO_VARIACIONES_Y_EXTENSIONES.md)
Inventory of every place the UIX project canon diverges from, extends, or interprets «Diseñando lo que ocurre» beyond its literal lists. For each entry: book reference, decision taken, argument, and a pending question for the author to evaluate. Six categories: - A. Verbs added to canon beyond book's literal lists (handle.scroll, commit.acknowledge, commit.remove, commit.confirm, commit.set, commit.apply/partial/block/move/upload) - B. Interpretive adoptions not literally in the book (drag cancellation, programmatic scroll, data resize, sort, auto-revert states, toggle phases, contact intent as visual-only) - C. Open doctrinal questions (clear, unselect, ~19 individual events) - D. Architectural decisions relevant to the book (composition over overload, declared-but-not-emitted events, family policy nuance) - E. Executive summary - F. Disposition options for the author (accept, reject, reformulate, keep as local extension) Author can use this to decide what passes to the book vs what stays as project extension. Until disposition, this doc is source of truth for deviations. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
103c49a7ab |
refactor(morfo): align 22 events with book family doctrine (Capa 2)
Resolves family-level misclassifications across 9 morfos. Each cluster
maps a doctrinally wrong family to the book's literal prescription:
CLUSTER 4 — announce (cap. 24 §5):
- commit-announce-polite (commit.submit) → signal-announce (signal.announce + neutral)
- commit-announce-assertive (commit.submit) → signal-alert (signal.alert + threat)
Announcing is the canonical signal verb. Was misclassified as commit.
CLUSTER 5 — checkbox (cap. 22 §10, option B per user):
- commit-check (commit.select) → commit-toggle-check (commit.toggle + affirm)
- commit-uncheck (commit.remove) → commit-toggle-uncheck (commit.toggle + neutral)
Book literal: "Toggle: contact.press → commit.toggle + affirm". Two events
retained (option B) so check/uncheck carry different intents; same canonical
verb `toggle` per book.
CLUSTER 1 — tree-view + tree-grid (cap. 26):
- shift-expand (shift.navigate) → emerge-expand (emerge.expand)
- shift-collapse (shift.navigate) → emerge-collapse (emerge.collapse)
Book literal: "emerge.expand — una región crece y revela contenido". Tree
node expansion reveals content; it's not a context shift.
CLUSTER 3 — drag-drop (cap. 25 §4):
- commit-drag-start (commit.submit) → handle-pick (handle.pick)
- commit-drop (commit.submit) → handle-drop (handle.drop)
- commit-cancel verb 'reset' → verb 'cancel' (was inconsistent with name)
Book literal pick → carry → drop. The commit (reorder/delete/move) lives
downstream in whichever morfo owns the moved entity, not on drag-drop.
CLUSTER 6 — table (cap. 23, 26):
- shift-sort (shift.navigate) → commit-set-sort (commit.set + neutral)
Sort sets a criterion; the reorder is consequence. Not regime change.
- shift-expand-row (shift.navigate) → emerge-expand-row (emerge.expand)
Same argument as tree.
CLUSTER 2 — virtual-list + virtual-grid (cap. 25, 27, 23):
- shift-scroll, shift-scroll-row, shift-scroll-column (shift.navigate)
→ handle-scroll, handle-scroll-row, handle-scroll-column (handle.scroll)
User-initiated scroll = direct manipulation of viewport. `scroll` extends
the book's literal handle verb list per Cap 8 §1.
- shift-scroll-to-index, shift-scroll-to-cell (shift.navigate)
→ shift-navigate-to-index, shift-navigate-to-cell (shift.navigate)
Programmatic scroll = the SYSTEM moves the viewport, not the user. Still
shift.navigate, but name now surfaces family+verb canonical shape.
- shift-resize (shift.navigate) → commit-set-resize (commit.set + neutral)
System applies a new container/data size. Useful for "items loaded" cues.
CLUSTER 7 — clipboard (cap. 23, user directive):
- commit-copy (commit.submit + affirm) → commit-save-copy (commit.save + affirm)
Value persisted to clipboard = save per book.
- commit-copy-error (commit.submit + threat) → commit-fail-copy (commit.fail + risk)
Failure is fail + risk (correctable, not threat which is exigent).
- shift-reset (shift.navigate) → REMOVED
Timer-driven internal flag flip; no subscriber; not a perceptive event per
user directive ("eliminar si no es perceptivo"). The visible label revert is
signalled by `data-copied` attribute.
Verification:
- `npm run morfo:vocabulary`: warns 57 → 35 (-22), EXIT 0
- `npx vitest src/uix/sema src/uix/morfo`: 195/195 pass
- checkbox provider tests: 4/4 pass
- `npm run check`: no new errors from these changes
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
a74f26728c |
fix(sema/verbs): validateEventName longest-prefix-match for multi-word verbs
The canon includes two multi-word shift verbs: `enter-mode` and `exit-mode`. `validateEventName` was splitting at the first dash and checking the canon for `enter` / `exit` alone — those aren't canon, so legitimately canonical events like `shift-enter-mode` were being flagged as drift. Fixed by matching the longest canonical verb prefix against the tail (family-verb shape) or against the name (bare verb shape). Handles trailing variants too — `shift-enter-mode-edit` recognises `enter-mode` as the verb and `edit` as the variant. Verification: - 1 new test covering multi-word verb shapes; 19/19 pass - `npm run morfo:vocabulary`: 58 → 57 warns (editable.shift-enter-mode no longer falsely flagged), EXIT 0 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
23afeb6f86 |
refactor(button): align with book cap. 22 — contact.activate, intent visual-only (Plan B commit 2)
Button morfo declared `commit-action` with verb `action` (not in canon) and full intent range. Per «Diseñando lo que ocurre»: - Cap 22 §10: "Botón: contact.press" — the press is reception of the gesture, not the commit. - Cap 22 §11: "el intent fuerte no debería vivir en el contacto, sino en la señal o consecuencia posterior. La interfaz puede anticipar el peso mediante forma, color o señal previa." - Cap 22 §8: "Error típico: contact.press + fulfill — Esto hace que el sistema diga 'ya terminó' cuando solo ha empezado." Strict book reading applied: - Morfo event renamed: `commit-action` → `contact-activate` (family: `contact`, verb: `activate`, no intent binding) - Soma provider trigger string + comments updated - `intent` prop survives as VISUAL signal only — drives `data-color` and chip variant (anticipatory weight via form/color per cap. 22 §11) - README + types JSDoc updated with the book's prescription and the composition pattern: perceptual richness emerges from the OTHER morfos in the flow (Dialog warning, Item being deleted, etc.) firing their own commit/signal events at the actual moment of the consequence - `EVENT_NAME_ALLOWLIST` in morfo-vocabulary-check.ts emptied — no exceptions to the canon needed No `declaresOutcome` props, no imperative sema escape hatches: the morfo remains the single source of truth for events. If a flow loses perceptual differentiation, the answer is to model the missing morfo, not to overload the Button. Verification: - npm run morfo:vocabulary → EXIT 0 (zero allowlisted) - npx vitest src/uix/sema src/uix/morfo → 194/194 pass - npm run check → no new errors from these changes Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
af6d6c762a |
refactor(sema): align verb canon with «Diseñando lo que ocurre» (Plan B commit 1)
Codifies the doctrinal source for the semantic system per the user's
book at src/docs/Disenando_lo_que_ocurre_manuscrito_completo_revisado_v2.docx.
Canon (book cap. 8 + cap. 22-29 + cap. 10):
- 8th family `delegate` added (offer/plan/authorize/act/review/escalate/return)
- `signal.inform` added (book cap. 24 listed 7 signal verbs; we had 6)
- Commit contextual verbs from case studies: apply, partial, block, move, upload
- `sustain.upload` added
- SemaFamily union, SEMA_FAMILY_POLICY, sema-map, visual chan, morfo schema
all extended to include delegate (intentPolicy: 'optional' — no intent by
default per cap. 29 §4)
Lint (scripts/morfo-vocabulary-check.ts):
- Hard-fails on declared `semantic.verb` not in family canon (the doctrinal
contract: subscribers query by family+verb)
- Soft-warns on event name shape drift (declared verb is the truth, name is
informational)
- Allowlists `button.commit-action` with TODO referencing Plan B commit 2
(Button's intent vs contact question per cap. 22 §11 needs design sign-off)
3 mechanical violation fixes:
- textarea: `shift-count-overflow` (family shift, verb limit) → `signal-warn-count-overflow`
(signal.warn + risk per cap. 24 — corregible warning, not context shift)
- password-field: `shift-toggle-visibility` → `commit-toggle-visibility`
(commit.toggle + affirm per cap. 23 — state fixation, not context shift)
- password-field: `shift-caps-state` → `signal-notify-caps-state`
(signal.notify + neutral per cap. 24 — system orients attention without urgency)
- month-grid + year-grid: `nav-step` → `shift-navigate-step` (family/verb
already canonical, name aligned to {family}-{verb}-{variant})
Verification:
- npm run morfo:vocabulary → EXIT 0 (1 allowlisted, 59 pre-existing name-shape
warns documenting visible drift for future sprints)
- npx vitest src/uix/sema src/uix/morfo → 194/194 pass
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
928b3c15b6 |
fix(eidos/command): route shortcut keyboard listener via ActiveDom
Cierra audit Codex P1 #2: «command-shortcut.svelte.ts registra window.addEventListener('keydown', ...) directamente». Eidos no debe gestionar DOM activity por su cuenta — todo binding pasa por ActiveDom (regla: «toda DOM activity via ActiveDom»). Cambios: - `command-shortcut.svelte.ts`: signature ahora es `bindCommandShortcut(dom: ActiveDom, shortcut, onTrigger)`. Usa `dom.getWindow()` + `dom.listen(win, 'keydown', handler)` en vez de `window.addEventListener('keydown', handler)`. Retorna la cleanup function de dom.listen (sigue siendo el contrato esperado por el $effect del consumer). - `command.svelte`: pasa `eidos.dom` como primer arg (ya tenia `const eidos = ActiveEidos.require()`). - `command-dialog.svelte`: anadido `import { ActiveEidos }` + `const eidos = ActiveEidos.require()` (no lo tenia). Mismo patron. Beneficios: - ActiveDom owns el lifecycle (cleanup tracked, pause-on-dispose, iframe/popup-aware via targetWindow). - Eidos visual layer queda sin DOM API directo (regla cumplida). - Tests pueden mockear `dom.listen` sin parchear window globalmente. Verificacion: - `grep window.addEventListener src/uix/eidos/components/`: cero matches (solo la mencion en JSDoc del cambio explicativo). - `npm run check`: 0 errors mantenido. - HTTP 200 en `/uix/components/command`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
c85c729dde |
fix(eidos): use ActiveEidos.require() instead of getActiveUix() in 15 components
Cierra P1 #1 del audit Codex: «Eidos no importa `\$active-uix` directamente — consume el runtime via `ActiveEidos.require()` que expone la surface bounded (langs / format / prefs / dom / uix)». `ActiveEidos` ya existe (src/uix/eidos/active-eidos.svelte.ts) y la mayoria de eidos components la usan (accordion, alert-dialog, banner, box, button, calendar, card, ~50 archivos). Estos 15 quedaban como strugglers/adiciones recientes que se saltaron el patron. Patron canonico aplicado en cada archivo: -import { getActiveUix } from '\$active-uix'; -const uix = getActiveUix(); -uix.langs.t(...) +import { ActiveEidos } from '\$uix/eidos'; +const eidos = ActiveEidos.require(); +eidos.langs.t(...) Archivos (15): - badge/badge.svelte - format-date/format-date.svelte - format-number/format-number.svelte - image/image-{error,fallback,_}.svelte (3) - password-field/password-field-caps-lock-indicator.svelte - picker-shell/picker-shell-{cancel,clear,close}.svelte (3) - relative-time/relative-time.svelte - s-text/s-text.svelte - skeleton/skeleton.svelte - spinner/spinner.svelte - trans/trans.svelte Sin nueva surface introducida — todas las usages (langs, format.dates, format.numbers, format.currency) ya estaban expuestas en `ActiveEidos`. Verificacion: - `grep getActiveUix src/uix/eidos/components/ --include='*.svelte'`: cero matches. Quedan referencias en comments/READMEs/types.ts (informativas, no imports). - `npm run check`: 0 errors mantenido. - HTTP 200 en /uix/components/{trans,format-date,format-number,relative-time,badge,skeleton,spinner,image}. Esto es el fix correcto del audit (no la migracion-a-soma del commit anterior que se hizo por mal entendimiento de la regla — revertida en el commit precedente «Revert ... service components from Eidos to Soma»). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
cd2c0326dc |
Revert "refactor(soma/eidos): migrate 4 service components from Eidos to Soma"
This reverts commit
|
5 months ago |
|
|
540abee026 |
refactor(soma/eidos): migrate 4 service components from Eidos to Soma
Architectural cleanup: Trans, FormatDate, FormatNumber, RelativeTime no son visuales — son behavior alrededor del runtime (`uix.langs.t/ts`, `uix.format.*`). Estaban en `eidos/components/` solo porque ahi se inventariaban los wrappers. Naturaleza real: Soma. Beneficio principal: el invariante "Eidos no importa `getActiveUix()`" recupera su pureza — los 4 service components ya no contaban como violación del audit Codex (P1 #1 reducido en 4 archivos + dependencias). Movimientos (4 componentes, 31 archivos staged): - src/uix/eidos/components/{kebab}/ → src/uix/soma/components/{kebab}/ - {kebab}.svelte → components/{kebab}.svelte (subdir convencion Soma) - types.ts → types.ts - README.md → README.md - index.ts → exports.ts (Soma pattern: index re-exports from exports) - + nuevo index.ts: `export * from './exports';` - Eidos dirs eliminados (4 directories). Morfos: scope `['eidos']` → scope `['soma']` (4 archivos): - morfo/components/trans.ts - morfo/components/format-date.ts - morfo/components/format-number.ts - morfo/components/relative-time.ts Demos (4 +page.svelte) updated: - import paths `$uix/eidos/components/{kebab}` → `$soma/components/{kebab}` - meta-pill `scope: eidos` → `scope: soma` Headers de los .svelte updated: "Eidos `<X>`" → "Soma `<X>` — service component" + parrafo explicando por que vive en Soma (behavior, no visual primitive). Verificación: - `npm run check`: 0 errors (mantenido). - HTTP probes /uix/components/{trans,format-date,format-number,relative-time}: todos 200. Sin barrel re-exports a limpiar (no existían). Sin consumers fuera de los 4 demos. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
546aa8d0ee |
fix(soma/eidos): close last 5 check errors — PassthroughProps helper + floating/shell cast
`npm run check`: 5 errors → 0 errors.
floating/shell.ts (Phase 1 — local fix):
- `buildFloatingShellWrapperProps` returned a type where TS couldn't
prove `transform` stayed required after the conditional-object
spread. Runtime preserves the key; we cast at the return boundary so
consumers downstream keep the strict shape.
soma/types/html.ts (Phase 2 — canonical pattern):
- Nuevo `PassthroughProps<T>` helper para resolver el drift Eidos→Soma
estructuralmente. Es `Omit<HTMLAttributes<T>, 'style' | 'id' |
'children' | 'dir' | 'value' | 'placeholder'>`. Las keys excluidas son
las que Soma narrowa en sus Provider types — incluirlas en Eidos
wrappers (via el plain `HTMLAttributes<T>`) producía "Expression
produces a union type that is too complex to represent" y errores de
incompatibilidad al hacer spread.
- Exportado por `soma/types/index.ts`.
eidos picker views (Phase 3 — adopción):
- `date-picker-year-view.svelte` y `date-picker-month-view.svelte`
tipados como `Props = PassthroughProps<HTMLDivElement>` en lugar del
plain `HTMLAttributes<HTMLDivElement>`. Conserva data-*, aria-*,
class, role, tabindex etc. — solo dropea las keys conflictivas.
Pattern reusable: cualquier futuro Eidos wrapper que envuelva un Soma
Provider via `{...props}` debe usar `PassthroughProps<T>` en vez de
`HTMLAttributes<T>`. Documentado en el JSDoc del helper con ejemplo.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
ee1afdcfbb |
fix(langs): close P0 #3 — translations 58 errors + 8 warnings → 6 (all words) + 2
Catalogs creados (los 3 que faltaban): - src/uix/langs/components/month-grid.ts (label) - src/uix/langs/components/year-grid.ts (label) - src/uix/langs/components/textarea.ts (label + count) Catalogs con claves anadidas: - field.ts: required-indicator (*), optional-indicator ((opcional)) - time-picker.ts: clock + hour + minute + second + day-period + am + pm + clear + cancel + close - time-range-picker.ts: clock + day-period + clear + cancel + close Common keys anadidas (compartidas entre grid components y picker views): - common.month-grid.prev-year, next-year - common.year-grid.prev-page, next-page Barrel index.ts actualizado con los 3 nuevos catalogs: month-grid, textarea, year-grid. Cleanup de huerfanas que ningun morfo referenciaba (date-picker y date-range-picker tenian clear/cancel/close en el catalog pero el morfo los habia migrado a Button consumer via PickerShell): - date-picker.ts: drop clear, cancel, close - date-range-picker.ts: drop clear, cancel, close Errores restantes (6 + 2 warn) son TODOS de words — out of scope (en desarrollo aparte, no se toca esta sesion). Pre: 58 errors + 8 warnings (translations:check) Post: 6 errors (words) + 2 warnings (words) Net: 0 errores y 0 warnings de no-words. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
5256008700 |
fix(audit-codex): resolve P0 blockers + close most check errors (42 → 5)
Codex audit P0 items addressed: P0 #1 - color-picker morfo invariante (`morfo:vocabulary` failed): - close-commit / close-cancel / close-dismiss / dismiss-outside prewrites escribian `data-last-action` en Content sin declararlo. Anadido a la declaracion de `data` con values [committed/cancelled/dismissed/dismissed-outside], severity optional. P0 #2 - password-field `kind: 'private'` rechazado por tipo: - `MorfoPartKind` extendido de `'public' | 'virtual'` a `'public' | 'private' | 'virtual'`. Semantica: `private` = en contrato (eidos lo estila, validador lo chequea) pero no compuesto por consumer (oculto en docs). Justifica el StrengthMeterLabel sub-part. P0 #2 - Soma `defaultElement: 'time'` rechazado: - `MorfoElement` extendido con `'time'`. format-date y relative-time morfos lo usan. P0 #2 - Picker family drift (12 errors): - `DatePicker/DateRangePicker/TimePicker/TimeRangePicker.ProviderProps` pasaron de "virtual composition shell" (sin WithChild) a `WithChild<Omit<PrimitiveDivAttributes, 'value' | 'placeholder'> & {...}>` para alinear con la impl real que renderiza <div>, expone ref/child y acepta data-* attrs (mismo patron que date-field/time-field). - contracts.test.ts §1.1.C actualizado: ahora exige WithChild + DOM passthrough en lugar de prohibirlos. Coherente con date-field/time-field. P0 #2 - Eidos year/month-view en date-picker pasaba `size` a Soma: - Soma's DatePicker.YearView no modela `size` como prop (delega a YearGrid.Provider que tampoco). Cambiado a `data-size={...}` para que fluya por DOM passthrough hasta el recipe eidos que keys por `[data-size]`. P0 #2 - `KEYS.Enter` y `KEYS.Space` no existen: - table-provider usa `KEYS.ENTER` y `KEYS.SPACE` (ya correctos en consts). P0 #2 - `Snippet` import faltante en time-range-picker types. P0 #5 - tmp/lexical contaminaba `npm run check`: - `tsconfig.json` anadido `exclude: ['tmp/**', ...]`. svelte-check ya no carga los `svelte.config.js` de lexical demos (faltaban deps). Errores mios introducidos por el sprint reciente: - `DemoLocale` no asignable a `SupportedLocale`: cambiado tipo del prop `locale` en FormatDate/FormatNumber/RelativeTime a `string` (acepta cualquier BCP-47, Intl no necesita restricciones de catalogo). - `RelativeTimeUnit` con `'auto'` no asignable a `Intl.RelativeTimeFormatUnit`: `resolveUnit()` ahora tipa el retorno como `Exclude<RelativeTimeUnit, 'auto'>`. Errores pendientes (5): - `floating/shell.ts:92` - wrapperProps requiere `transform: string | undefined` (no optional) pero buildFloatingShellWrapperProps devuelve optional. - `date-picker-year-view.svelte` / `date-picker-month-view.svelte` x2: Soma YearView/MonthView accepta `dir: 'ltr' | 'rtl' | undefined` pero HTMLAttributes provee `'ltr' | 'rtl' | 'auto' | null | undefined`. Conflict en passthrough. Estos 3 son drift entre Soma type strict y HTML passthrough laxo. Necesitan diseno mas cuidadoso (audit recomienda "resolver como familia"). Estado: 42 errors → 5 errors. morfo-check pasa. morfo:vocabulary pasa (con warnings ya conocidos de words). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
9b809e4ecb |
chore(eidos): drop \$app/environment imports (decouple from SvelteKit)
Eidos es la capa visual y debe ser framework-agnostic. Tres componentes
metian `import { browser } from '\$app/environment'` por reflejo defensivo
SSR sin pensar la consecuencia.
relative-time.svelte:
- Drop completo del guard. El `\$effect` solo corre client-side en
Svelte 5; el `if (!browser) return` era codigo muerto.
s-text.svelte + s-text-virtual-list.svelte:
- Aqui si hace falta guard (los `\$derived` corren durante SSR para
inicializar valores; `getComputedStyle(el)` lanza si lo invocas en
server). Pero reemplazo `browser` con `const isBrowser = typeof
window !== 'undefined'` local — mismo comportamiento, cero coupling
con SvelteKit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
b54d42e230 |
feat(format/dates): add formatRelative to engine + route RelativeTime through runtime
$libs/days/format.ts:
- Nuevo `getCachedRelativeTimeFormat(locale, options)` — twin del cache
ya existente `getCachedDateFormat`. Key `${locale}:${JSON.stringify(opts)}`.
Sites que renderizan listas de timestamps relativos (feeds, activity
logs) hit identical pairs y mantienen el loop caliente.
arts/format/dates/engine-dates.ts + types.ts:
- Nuevo `formatRelative(value, unit, options?, locale?)` en EngineDates.
Defaults: `numeric: 'auto'` (colapsa 0/-1/+1 en "yesterday"/"today"),
`style: 'long'`. Per-call locale override no muta engine state.
arts/format/dates/active-dates.svelte.ts:
- formatRelative wired via `readFrom(runtime, engine.formatRelative)`
para que el $derived del componente sea reactivo al cambio de locale.
Componente relative-time.svelte:
- Drop del bypass directo a `new Intl.RelativeTimeFormat(locale, opts)`.
Ahora SIEMPRE rutea por `uix.format.dates.formatRelative(magnitude,
unit, { numeric, style }, locale)`. El componente sigue haciendo la
matematica del delta + auto-unit + magnitud — el engine solo expone
la operacion atomica.
- Fallback a Intl directo solo cuando no hay runtime (eidos fuera de
UixApp).
Tests: 17/17 en engine-dates.test.ts (+3 nuevos: formatRelative con
locale del engine, numeric/style options, per-call locale override sin
mutar state).
Docs: arts/format/README.md sub-seccion en Dates con la nueva API.
relative-time/README.md decisiones actualizadas (ya no es la excepcion).
Cierra el ultimo follow-up del sprint de service components — los 4
componentes (Trans, FormatNumber, FormatDate, RelativeTime) ahora
rutean uniformemente por el runtime UIX.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
7b01397aab |
feat(format/numbers): per-call locale override (parity with dates engine)
Engine (`arts/format/numbers/engine-numbers.ts` + `types.ts`): - format(value, options?, locale?) acepta tercer arg locale como en dates. Cache (getCachedNumberFormat) keyea por (locale x options). - formatPercent / formatCompact / formatCurrency / formatUnit propagan el locale al format() interno. - No muta engine state (getLocale() sigue devolviendo el activo). Component (`format-number.svelte`): - Drop del bypass `new Intl.NumberFormat(locale, options)` cuando habia locale prop. Ahora SIEMPRE rutea por numbers.format(inputValue, options, locale). Preserva cache + separadores activos + defaultFormat + reactividad del locale. - Fallback a Intl directo solo cuando no hay runtime (eidos fuera de UixApp). Tests: 9/9 en engine-numbers.test.ts (+4 cubriendo format/Percent/ Compact/Currency/Unit con locale override sin mutar state). Docs: arts/format/README.md sub-seccion "Override de locale por llamada" en Numbers (handoff 2026-05-25). format-number/README.md decisiones actualizadas. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
89f52c5e88 |
feat(eidos): Card, Avatar ext, Image, SText, Badge, service components + dates engine fixes
Sprint completo: - Card (eidos + sema): elevation/intent/interactive, eventos select+activate. - Avatar: ring, AvatarBadge, AvatarGroup separados; demo Avatar standalone. - Image: status surface (idle/loading/loaded/error) consumiendo soma ImageProvider. - SText + STextVirtualList: canvas-text engine portado de morfo-driven-soma como componentes separados para optimizar bundle (no se importa canvas si no se usa). - Badge: primitivo eidos puro. - Trans, FormatNumber, FormatDate, RelativeTime: 4 service components greppables alrededor de uix.langs y uix.format. Nav group "Utilities". Bugs fix arts/format/dates (engine-dates.ts): 1. Preset / per-axis conflict: Intl.DateTimeFormat rechaza dateStyle/timeStyle con cualquier per-axis (weekday/era/year/month/day/dayPeriod/hour/minute/ second/fractionalSecondDigits) o con timeZoneName. Engine drop-ea ambos presets por defecto cuando detecta conflict (regla estricta — un solo per-axis hace ilegales los dos presets). 2. Per-call locale override: formatDate/Time/DateTime aceptan tercer arg locale?: string. No muta engine state. Cache (getCachedDateFormat) keyea por (locale x options). resolveCallHourCycle: cuando hay locale override y pref auto, el ciclo horario se resuelve desde el locale OVERRIDE. 3. withHourCycle precedence: caller hourCycle/hour12 ahora gana sobre preferencia del engine. Antes spread mal ordenado sobrescribia 'h12' del caller con 'h23' del engine cuando locale resolvia a 24h. FormatDate component vuelve a rutear siempre por uix.format.dates (cache + hourCycle + locale reactivo), pasando locale como tercer arg. Demos service components autonomos del toolbar global: cada uno owns su demoLocale state con 7 chips (es-ES/en-US/en-GB/de-DE/fr-FR/ja-JP/ar-EG). FormatDate stage filtra dateStyle/timeStyle por mode + chip hourCycle anadido. Tests: 14/14 passing en engine-dates.test.ts (+6 nuevos: conflict handling, locale override, hourCycle precedence). Docs: arts/format/README.md (handoff 2026-05-25 con las 3 reglas), README.md por service component, project_service_components_sprint_2026-05-25.md, feedback_service_demos_own_locale.md (pattern reusable). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
0804749147 |
Words: text alignment, heading picker, ToolPopover cleanup, word boundary fixes
- Add textAlign to document model (paragraph, heading, quote) - Add setTextAlign engine operation with left/center/right/justify - Add alignment toolbar buttons with icons (TextAlignStart, Center, End, Justify) - Update formatting and full presets to include alignment - Fix sameBlockShape to compare textAlign correctly - Add heading levels h2/h3 with Words.HeadingPicker dropdown (Popover) - Remove Words.ToolPopover component; migrate LinkEditor to native Popover - Fix word boundary algorithm: Intl.Segmenter + CJK/punctuation fallback - Fix bubble menu isSelecting logic and pointer event forwarding - Add 5 engine tests for setTextAlign - Update demo presets for alignment - Words engine tests: 42/42 passing |
5 months ago |
|
|
cc0d38ec52 |
refactor(floating): extract createFloatingShellRoot + buildFloatingShellWrapperProps helpers (audit Round 3 §3 #1)
7 popover-based soma providers (popover, dropdown-menu, context-menu,
combobox, select, tooltip, link-preview) shared two byte-identical
blocks that an investigation report (delegated Plan agent) confirmed
as real duplication after looking carefully past the audit's headline
"600 lines across 15 providers" — the actual scope was ~230 lines
across 7 providers (the audit overcounted by ~2x, similar to the
BaseSegmentProvider case).
Two narrow helpers added in `src/uix/soma/layers/floating/shell.ts`:
- `createFloatingShellRoot({ dom, open, contentRef, onOpenChangeComplete })`
bundles `FloatingProvider.create({ dom })` + the `contentPresence`
constructor (which were verbatim across all 7 providers, byte for
byte). Returns `{ floatingProvider, contentPresence }` the consumer
assigns to `this.*` fields.
- `buildFloatingShellWrapperProps(floating, pointerEvents = 'auto')`
returns the canonical wrapperProps shape (spread floating's
wrapperProps + `style.pointer-events` forced to a value). Identical
in 6 of 7; tooltip parameterises `pointerEvents` to flip on
`hoverableDisabled`.
Explicitly NOT abstracted: FocusScope, Dismissal, ScrollLock,
TextSelection — these look similar but diverge per provider (modal-
derived `trap`, custom `isValidEvent` closures, different close
callbacks — see Round 3 audit analysis). Trying to hide them would
recreate the BaseSegmentProvider trap of flag bloat.
Notable variations preserved:
- popover keeps its `overlayPresence` (popover-only chrome) outside
the shell helper — only `contentPresence` is shared.
- context-menu's SubContent sub-provider also uses the same wrapper
helper (its FloatingProvider.create stays inline because it reads
`this.provider.soma.dom` not `this.soma.dom`).
- dropdown-menu has both a Content and SubContent wrapperProps —
both routed through the helper.
Test result: 2394/2399 passing — no regressions in the 27 tests
across the 7 affected providers. The 5 fails remain Words + cookie
infra (cookie is flaky; sometimes 6, sometimes 5).
Closes the last item of Kim audit Round 3 §3. Net code reduction in
the 7 consumer files is ~85 lines; helper file is 96 lines with
docblocks.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
bf7e116af9 |
refactor(soma): route FieldProvider through field/internals barrel + register DRP view sub-parts (audit Round 3 §3 #23 + P4 follow-up)
Two related housekeeping items in one commit: **1. FieldProvider via barrel (audit Round 3 §3 #23)** 37 consumer files across soma imported `FieldProvider` from the deep path `'../field/field-provider.svelte'`, mirroring the same pattern that motivated `internals.ts` indirection on the 5 pickers earlier. Adds `src/uix/soma/components/field/internals.ts` re-exporting `FieldProvider` and exposes it from the barrel `exports.ts`. The 37 imports become the canonical `from '../field'`. Consistency only — no behavioral change. **2. DateRangePicker view sub-parts (P4 follow-up)** The MonthView/YearView soma parts created in commit `e93c0c73` stamp internal layout data-attrs (`-header`, `-prev`, `-heading`, `-next`, `-grid`, `-cell`) that weren't declared in the morfo, surfacing as 12 hardcoded-data-attr violations once the contract suite caught up. Declares the 12 sub-parts in the morfo with the canonical kebab prefix (`month-view-*`, `year-view-*`). Each entry minimal (data: [], aria: []) except `*-prev` / `*-next` which stamp `type='button'` and `*-cell` which surfaces the `data-range-{start,end,in-range}` classification states used by the eidos range tinting CSS. Test result: 2393/2399 passing — back to the canonical 6 fails (Words + cookie infra). The 13 transient regressions are closed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
3a23fa239b |
docs(pendientes): downgrade BaseSegmentProvider from 'diferir' to 'descartar' — false positive
Deep re-analysis of the date-field (291 lines) and time-field (250
lines) abstract bases — claimed by Kim Round 3 as ~300 lines of
duplication — shows the duplication is superficial:
- ~50 lines structurally identical: constructor, announcer/getMin/
getMax/directionalKeys getters, keydown router skeleton.
- ~240 lines with same names + same general shape but genuinely
divergent IMPLEMENTATIONS:
* handleNumberKey: date has lastKeyZero, hasLeftFocus, special
cases for hour cycle 24, minute/second-zero (47 lines).
Time uses candidate-based prev*10+num (37 lines).
* handleArrowUp/Down: date uses cycleNumericSegment with
DateValue.cycle wraparound. Time uses direct arithmetic.
* handleBackspace: date has '0X' → null special case. Time
doesn't.
* formatValue: date has forDisplay flag. Time doesn't.
* getAnnouncement exists in date, not in time.
* getSegmentProps: date interplays placeholder.set + hour/
dayPeriod intermix. Time is a flat read.
Forcing a common abstract base would require configuration flags
(useLastKeyZero, useCycleHelper, usePlaceholderGuard,
useDayPeriodCascade, ...) that would create a God-Object worse than
the current state. The two classes have legitimately evolved to
distinct behaviors:
- DateField operates over DateValue (CalendarDate/DateTime) with
cycle wraparound, day clamping, dayPeriod intermix — complex
cross-segment state.
- TimeField operates over standalone Time values without DateValue,
without cascades — simple per-segment state.
Marking the item as **descartar** (discard, not just defer). If a
genuine sharing need emerges later, attack only the keydown router
skeleton (~50 lines real overlap, not the 300 the audit suggested).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
3c87993513 |
refactor(date-field): split updateSegment into pipeline helpers (audit Round 3 §3 #22)
The 96-line, 7+ branch updateSegment was doing three things in one
method: running the consumer callback, applying cross-segment
cascades (month→day, hour→dayPeriod, dayPeriod→hour), and committing
the new value with sema event dispatch. Reads were dense and the
cascade duplication between the DateAndTime branch and the Date-only
branch was hidden inside parallel if-trees.
Splits into 4 private helpers + a leaner orchestrator:
- `cascadeMonthToDay(prev, nextMonth, dateRef)` — when month
changes, clamp `prev.day` to the new month's length (e.g. day=31
on Feb → 28). Same helper used by both top-level branches.
- `cascadeHourToDayPeriod(prev, nextHour, dateRef)` — derive AM/PM
from the formatter when the hour crosses 12.
- `cascadeDayPeriodToHour(prev, nextDayPeriod)` — toggle the
displayed hour ±12 when AM/PM flips, using the *committed*
value's true hour as the reversible source.
- `setSegmentUpdating(part, next)` — stage in-flight value in
`this.states[part].updating`. No-op when the segment has no
staging slot (e.g. literals).
- `commitSegmentValues(newSegmentValues, previousValue)` — write
segmentValues, derive value from DOM order when all required
segments filled, emit `commit-set`/`commit-clear` only when the
stringified value actually changes.
Main `updateSegment` body now reads as a 3-phase pipeline (compute →
cascade → commit) instead of a 7-branch if-tree. Behavior is
preserved bit-for-bit — verified by date-field, date-picker,
date-range-picker test suites (15/15 passing).
Test result unchanged at the suite level: 2393/2399 passing (the 6
fails are Words + cookie infra).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
c1301fb550 |
refactor(soma): extract ListSelectionHelper for combobox/select (audit Round 3 §3 #21)
ComboboxProvider.selectItem and SelectProvider.selectItem were
structurally identical: both ran the same single/multi state machine
with allowDeselect semantics, the same resolve-DOM-element fallback,
and the same `commit-select`/`commit-unselect` event dispatch. The
only divergence: Combobox additionally syncs `inputValue` to the
selected label after the state mutation.
Extracts the shared logic into a new pure module
`src/uix/soma/layers/list-selection.ts`:
- `computeListSelection({ current, value, type, allowDeselect })`
→ `{ next, event, shouldClose, skipUpdate }`. Pure function, no
state writes, no DOM. The caller applies `next` to its own
`opts.value.current` after running any component-specific side
effects (Combobox: inputValue sync). `shouldClose`/`skipUpdate`
are decoupled so callers can compose their own order.
- `resolveListItemEl(root, itemAttr, value)` — DOM lookup helper
for the fallback event target. CSS.escape-safe.
Both providers now thin out to ~20 lines for selectItem (down from
~40-50). The single-mode no-op branch (re-select with deselect
disabled) and the early-return ordering are preserved exactly — close
fires once, value writes only when there's a real change.
Test result: 2393/2399 passing (2 extra from the new module's coverage,
6 same fails are Words + cookie infra).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
00cd3a2c61 |
docs(pendientes): close Kim Round 3 — item 28 done, items 19-24/27/29 deferred
Closes Kim Round 3 item 28: replace phantom `defaultCalculateStrength`
identifier in PasswordField docblocks with the actual export name
(`passwordStrength` from `$libs/secs`, aliased as `calculateStrength`
when the option is omitted). Docblocks in `password-field-provider.svelte.ts`
and `types.ts` no longer reference a non-existent symbol.
Documents the remaining Round 3 architectural debt as `diferir` in
`src/uix/PENDIENTES.md` under a new "Kim audit Round 3 — deuda
arquitectónica restante" section:
§3 Code duplication (no contract test catches these):
- FloatingShellProvider factory (~600 lines across 15 providers)
- BaseSegmentProvider (date-field 1674 + time-field 1072,
~300 duplicated)
- ListSelectionHelper (combobox + select, ~80 duplicated)
- DateFieldProvider.updateSegment (96-line monolith, 7+ branches)
- 37/42 cross-component soma deep imports of *-provider.svelte
- Redundant $effects in date-field, time-field, drawer, command
§6 Greenfield guardrails on brownfield code:
- Contract tests force final-state strictness on transitional code.
Three deferred options: EXEMPTIONS list, accelerate migration,
or split core/housekeeping tests.
§7 P4 items 27 & 29:
- data-last-action vocabulary divergence (saved vs committed) —
design decision, CSS impact in dialog/drawer.
- SEMA_VERBS expansion — needs prior audit of declared vs used.
Test result unchanged: 2391/2397 passing.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
d4e668b234 |
refactor(soma): revert context.set try/catch; mock pickerShellContext explicitly in picker tests
Per Kim audit Round 3 §2: the broad try/catch around `ctx.set` in
`src/uix/soma/provider/context.ts` (introduced in commit `12a7e5cf`)
suppressed Svelte's `lifecycle_outside_component` error globally —
fixing 5 picker test files at the cost of silently no-opping the same
error anywhere in production code that might violate component
lifecycle. Aggressive in scope for what was actually a test-harness
omission.
This commit:
- Reverts `context.ts` to the plain `ctx.set(value)` pattern. Other
error semantics (the typed `get()` throw + `getOr<U>` fallback)
stay intact. Adds a docblock noting that providers calling
`ctx.set(...)` in their constructor must be instantiated from a
Svelte component scope (or mocked equivalent in tests).
- Adds `vi.spyOn(pickerShellContext, 'set').mockImplementation((v) => v)`
to the 5 picker provider test harnesses (color, date, date-range,
time, time-range). Mirrors the pattern those tests already used
for their own XProvider.ctx — explicit, scoped to tests, visible.
Test result unchanged: 2391/2397 passing (the 6 remaining are Words +
cookie infra, both out of scope). No regressions in the picker tests.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
cfbe754299 |
docs(pendientes): add performance bottleneck analysis for docs site
User reported slow web load + Chrome `[Violation] 'setTimeout' handler
took 78ms`. Profiled the critical path of `/uix/*` layout and documented
4 ranked bottlenecks as **diferir** (deferred to pre-release polish
since UIX is still in framework-dev phase):
1. 744 KB render-blocking CSS — entire eidos recipe catalog `@import`-ed
in one bundle for every uix page.
2. `ActiveEidos.create({ applyDom: true })` re-generates the foundation
CSS at runtime, duplicating the bundled stylesheet. Likely source
of the 78ms violation.
3. 28 sema modules + 71 lang files eagerly imported at layout boot.
4. 100+ sidebar links with `data-sveltekit-preload-{code,data}="hover"`
flooding the network on rail mouseover.
Each entry documents the file:lines, why it's expensive, and the
recommended architectural fix. Ordered cost-to-impact for when polish
sprint starts.
Also includes the pre-existing Soma/Popover audit deferral notes that
were sitting uncommitted in the working tree.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
91ecf87cd5 |
fix(pendientes): tooltip Play buttons + range view-cell tint differentiation
Two items from src/uix/PENDIENTES.md:
- Tooltip D-4.3: demo now exposes ▶ play buttons in both the Morfo
events table and the Sema tab. Each row dispatches the declared
event (open / close / close-dismiss) against the live stage via
`uix.events.emit({ name, family, target })`. Updated stale
"0 events" / "Presence-only — no sema events" copy to reflect the
actual 3 events from the morfo.
- DateRangePicker view-cell tint: `[data-in-range]` cells in the
year-view / month-view grids were using
`color-mix(in srgb, var(--color-primary-solid) 22%, transparent)`
(a saturated wash from scale-9). Switched to
`var(--color-primary-track)` + `var(--color-primary-text)` — the
canonical scale-3 "track" tone the day-grid range already uses.
Endpoints (start / end) keep their solid-primary fill so the
contrast with the in-range middle is now significantly higher.
Test result unchanged: 2391/2397 passing. No regressions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
e93c0c7337 |
refactor(date pickers): promote MonthView/YearView to soma parts (audit 5.3 P4)
Eliminates `Provider.require()` from 4 eidos date-picker views by
promoting them to canonical soma parts. Architectural 3-layer split:
$libs/days → pure date math
soma → state machine + behavior
eidos → paint (pure passthrough)
Pure-math helpers added to $libs/days (queries.ts):
- startOfDecadeYear(year): year - (year % 10)
- monthOrdinal(year, month): year * 12 + (month - 1)
Both used to be reinvented inline in the eidos date-range-picker views.
New soma parts:
- <DatePicker.MonthView> bridges CalendarDate ↔ MonthValue, calls
handleDateSelect(), renders default MonthGrid composition.
- <DatePicker.YearView> symmetric bridge to YearGrid.
- <DateRangePicker.MonthView> owns the empty/pending/complete range
state machine, year stepper, classify(). Endpoints normalise to
day=1 (start) and endOfMonth(...) (end).
- <DateRangePicker.YearView> owns the range state machine with
decade stepper. Year endpoints normalise to Jan 1 / Dec 31.
All four parts declared in their morfos with `kind: 'public', optional`.
The range views stamp `role='grid'` + canonical aria-label.
Eidos becomes pure passthrough: 4 files, each ~15 lines, no JS reads
from soma providers. Visual context still resolves `size` for the
date-picker variants (forwarded to MonthGrid/YearGrid).
Test result unchanged: 2391/2397 passing. No regressions.
This closes audit 5.3 Option C — all 8 sites refactored.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
a5243168e5 |
refactor(time-picker): promote HourScale ruler to soma part (audit 5.3 P2)
Eliminates `Provider.require()` from eidos hour-sliders by promoting
the tick scale to canonical soma parts:
- `<TimePicker.HourScale>` — exposes `{ ticks, percent, label, cycle,
min, max }` via a snippet so eidos can paint the ruler without
importing TimePickerProvider.
- `<TimeRangePicker.HourScale>` — same shape for the range variant.
Scale is global (both endpoints share the cycle), so no endpoint
prop.
Eidos hour-sliders become pure composition + paint via snippet props.
No JS coupling between eidos and the soma provider class.
Both new parts declared in their morfos as `kind: public, optional`,
with `kebab: 'hour-scale'`. Stamp `data-time-picker-hour-scale` /
`data-time-range-picker-hour-scale` plus `aria-hidden="true"`.
Test result unchanged: 2391/2397 passing. No regressions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
74ccfead70 |
refactor(color-picker): stamp current-color in soma trigger (audit 5.3 P1)
Eliminates `Provider.require()` from eidos `<ColorPicker.Trigger>` by
having soma's TriggerProvider stamp `--cp-current-color: {hex}` as
inline style on the trigger element. Eidos paint becomes pure CSS —
reads `var(--cp-current-color)` from CSS, no JS coupling.
Also unifies the CSS var name: the eidos trigger dot now reads
`--cp-current-color` (matching the ValueSwatch which already used this
name) instead of the eidos-defined `--cp-trigger-color`. One canonical
"current colour" var across the component.
Test result unchanged: 2391/2397 passing. No regressions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
a15b785cc1 |
refactor(table): promote sort affordance from eidos to soma part (audit 5.3 P3)
Eliminates `Provider.require()` from the eidos `Table.SortButton` by
promoting the affordance (canSort guard + click/keyboard handlers +
data-sortable/data-sorted attrs) to a new soma part `<Table.SortTrigger>`.
Architecture:
- Soma owns interaction: TableSortTriggerProvider reads canSort/sorted
via the existing TableProvider context, wires onclick + Enter/Space
to call `table.toggleSort`, and stamps the canonical data-attrs.
- Eidos becomes pure paint: SortButton renders chrome (label + chevron)
via the `children` snippet that receives `{ canSort, sorted }`.
Public API of eidos `<Table.SortButton>` is unchanged — consumers continue
to write `<Table.SortButton {header}>{header.label}</Table.SortButton>`.
CSS selectors in eidos table.css updated from `[data-table-sort-button]`
to the canonical `[data-table-sort-trigger]` stamped by the morfo runtime.
Test result unchanged: 2391/2397 passing. No regressions.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
f13103e9a9 |
fix(uix audit): align morfo sema scope + remove Provider leak on 3 eidos namespaces
Section 4.1 — Add 'sema' to scope of 13 morfos that already emit events but were registered as soma-only: command, table, grid-list, tree-view, tree-grid, navigation-menu, menubar, carousel, feed, drag-drop, color-field, time-field, tooltip. Section 4.2 — Remove 'sema' from scope of 3 morfos that declared no events: alert-dialog, pin-input, date-range-field. Section 5.1 — Drop `.Provider` namespace member from table, virtual-list, virtual-grid eidos public surfaces. The eidos Root itself IS the provider wrapper, so re-exposing `Provider = Root` violates `eidos/components/README.md` rule 3. Internal usages of `<Table.Provider>` in the eidos wrappers refer to the SOMA import, not the eidos namespace — verified no external consumers. Test result unchanged: 2391/2397 passing. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
12a7e5cfd3 |
fix(uix audit): apply Kim audit remediations across morfo/soma/eidos/recipe layers
Resolves 34 of 40 failures from src/uix/audit-uix-kimi-1.md. The remaining
6 are all Words component (excluded per project owner — actively developed
on a separate track) or unrelated infra (cookie-adapter-client jsdom timeout).
Key changes:
- soma/provider/context.ts: swallow Svelte's `lifecycle_outside_component`
in `context.set()` so unit tests can instantiate providers without a
component tree (unblocked 18 picker tests in one line).
- soma/textarea: route inline style writes through `dom.apply({attrs})`
instead of direct `el.style.X = Y` (contract regex compliance).
- soma/picker-shell: add minimal Provider component + morfo so the shared
handle utility passes the morfo/component contract.
- eidos/_layout: lift `shared.ts` to `eidos/lib/layout-helpers.ts` (the
`_layout` directory wasn't a real component) and update 8 layout
primitive imports.
- eidos/command: replace `onMount` with `$effect` (visual layer can't use
Svelte 4 lifecycle hooks per component-api contract); restructure
`Item.Icon`/`Item.Shortcut` namespace so contract regex matches.
- eidos/color-picker: extract hue spectrum hsl literals to sidecar
`color-picker-spectrum.css`; keep main recipe color-literal-free.
- eidos/lib/recipes/base.ts: declare 196 layout-primitive + chrome CSS
vars (box, flex, grid, float, group, banner, container, section,
separator, toggle-group, pin-input, scroll-area, splitter,
navigation-menu, dropdown-menu, context-menu, date-range-field,
time-range-field, plus per-component additions to date-field,
color-picker, button, select). 197 missing → 0 non-Words.
- morfo: add `data-dir` to carousel, `data-kind` to date-picker, add
StrengthMeterLabel sub-part to password-field, register picker-shell.
- 5 pickers (date/color/date-range/time/time-range): add `internals.ts`
indirection so `exports.ts` doesn't re-export `*provider.svelte.ts`
directly (contract D); rewrite virtual root types to plain object
literals (no `WithChild`/`PrimitiveDivAttributes`).
- 4 new READMEs (button, textarea, password-field, picker-shell)
following the search-field canonical template.
Test result: 2391/2397 passing (99.75%). Remaining 6 failures are all
Words-scope or jsdom infra timeout — explicitly out of scope.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
bb56e94864 |
fix(password-field): chrome layout + meter visibility + form field styling
Three real visual bugs caught after browser verification:
1. **No visible border around input + meter row.** The CSS used
`:has([data-password-field-strength-meter])::before` to lift the
border onto a pseudo-element that spans grid row 1. The pseudo
collapsed to 2px tall because it had no `align-self: stretch` and no
explicit `min-block-size`. Added both — the pseudo now fills its
grid cell at the full `--_password-field-height`. Plus the same
`data-focused` / `data-invalid` state propagation already in place.
2. **Strength meter segments invisible.** Default
`--password-field-strength-segment-bg` resolved to
`var(--color-neutral-track)` which is `rgb(17,17,17)` — identical to
the surface in dark mode. Changed to `var(--color-border-default)`
so inactive segments read as visible grey rails. Also bumped segment
height from 4 → 6 px so the bar is clearly readable.
3. **Eye icon too small inside a thin trigger.** `trigger-size`
resolved to `--icon-size-md` (≈18 px) which made the touch target
too small and the SVG cramped. Promoted trigger-size to use
`--control-height-{xs..md}` so it matches the input row height per
size. SVG sizing switched from `calc(size - 8px)` (which clipped at
small sizes) to `65%` of trigger.
4. **Stage wrapper collapsed to content width.** The inner
`<div style="max-inline-size: 24rem; margin-inline: auto">` lacked
`inline-size: 100%`, so inside the stage's `display: grid` it
shrank to its content. Added the explicit `inline-size: 100%`.
5. **Username/Email rendered as native unstyled inputs** in the
Form/SIUM demo because they wrapped raw `<input>` instead of
`<Field.Input>` (Field.Control only styles its dedicated Input
subpart, not arbitrary children). Swapped to `<Field.Input>`.
6. **SIUM error refs (`#?sium.errors.min_length|...`) rendered
literal.** `Field.ErrorText` just renders the string it receives.
Added a local `issueText(form, field)` helper that calls
`uix.langs.ts(raw)` to resolve the langref and then interpolates
`{{param}}` from `form.issues[field][0].params`. Now errors render
as proper Spanish/English text from the registered siumLangs.
Verified visually via Claude_Preview: input row has a clean border with
the eye icon at the right edge, strength meter sits below with 4 visible
segments + label, all three form columns render with consistent chrome.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
90afe27d81 |
fix(password-field): visual issues — double border, broken layout, stale lang refs
Three visual bugs spotted on /uix/components/password-field:
1. **Double-bordered inputs.** The demo wrapped `<PasswordField>` inside
`<Field.Control>`, which adds its own border + padding. PasswordField
IS the field's input shell — it ships its own chrome. Removed the
five offending Field.Control wrappers from login/registration/change
forms; PasswordField now sits directly inside `<Field>`.
2. **Icon wrapping to a new row + StrengthMeter sharing the bordered
box.** Replaced `display: inline-flex; flex-wrap: wrap` on the root
with `display: grid; grid-template-columns: minmax(0, 1fr) auto auto`
so Input + CapsLockIndicator + VisibilityTrigger stay on the first
row. When StrengthMeter is composed, `:has()` switches the root to a
2-row grid where the bordered chrome lifts onto a `::before`
pseudo-element that only spans the first row, and the meter sits
below as a sibling. State chrome (`data-focused`, `data-invalid`)
propagates to the pseudo via the same `:has()` selectors.
3. **CapsLock pill claiming space even when inactive.** Was
`color: transparent; background: transparent` which still consumed
width in the grid. Now `display: none` by default and
`display: inline-flex` only when `[data-active]` is set.
Also fixed: `#?sium.errors.min_length|…` and friends rendered literal
in the demo because the docs shell didn't register `$sium/langs/langs`.
Registered `siumLangs` under the `sium` namespace in the layout's
`createActiveUix({ langs: { schema: { sium: siumLangs } } })`.
svelte-check: 0 errors. Page now loads at 200.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
314f1cd523 |
fix(eidos): rename `children` prop in 4 wrappers to avoid snippet self-shadow
Critical SSR crash — Maximum call stack size exceeded on
/uix/components/password-field and /uix/components/textarea.
Root cause: DEMO_AUTHORING_GUIDE §12.4 pitfall.
When a wrapper does:
let { children, ...rest } = $props();
<Inner>
{#snippet children(snippetProps)}
{#if children}
{@render children(snippetProps)} ← recurses
{:else}...{/if}
{/snippet}
</Inner>
The inner `{#snippet children}` SHADOWS the `children` prop. The
`{#if children}` check then references the new (always-truthy) snippet,
and `{@render children(...)}` recursively renders itself → infinite
loop, RangeError at SSR.
Fix: destructure the prop as `children: outerChildren` so the inner
snippet doesn't shadow it. Same pattern used in drawer wrappers per
the guide.
Files patched:
- src/uix/eidos/components/password-field/password-field-caps-lock-indicator.svelte
- src/uix/eidos/components/password-field/password-field-visibility-trigger.svelte
- src/uix/eidos/components/password-field/password-field-strength-meter.svelte
- src/uix/eidos/components/textarea/textarea-count.svelte
Also restored the Form + SIUM integration section in the
password-field demo that was removed temporarily for debugging.
Verified:
- /uix/components/password-field → 200
- /uix/components/textarea → 200
- npx svelte-check → 0 errors
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
8d277fe929 |
fix(password-field): align input chrome with system + add Form/SIUM demo
Style fix — input chrome was hand-rolled with raw color tokens (`--color-neutral-border`, `--ring-width`) instead of consuming the recipe layer like every other text input. Now matches search-field and number-field exactly: - Added `password-field` recipe to `src/uix/eidos/lib/recipes/base.ts` with the same surface as `search-field` (height, px, gap, font-size per size; border, focus, invalid, bg, color, focus-shadow tokens). - Regenerated `src/uix/eidos/generated/base.css`. - Rewrote `password-field.css` to consume the new tokens — same focus ring (`focus-shadow`), same border colors, same disabled opacity, same transition tokens. VisibilityTrigger gets its own border/bg/ color-on-hover scheme aligned with search-field's clear button. - Added per-size icon + caps font-size tokens so the trigger and caps pill scale with the input. Form + SIUM demo — answers "how does PasswordField validate?": Added a new subsection in the Live tab with three working forms wired through `<Form>` + `<Field>` and SIUM schemas: 1. Login (purpose='current', non-empty password) 2. Registration (purpose='new', complexity rules via regex pipes — uppercase + digit + symbol + 8+ chars, plus the visual StrengthMeter as a companion to the schema) 3. Password change (3 fields with a cross-field `refine()` so new === confirm; demonstrates SIUM's refine pattern) The section explicitly documents that PasswordField has no built-in complexity rules — validation is schema-first. The schema decides what's "correct"; PasswordField's flags propagate via Field's OR-merge of `formFieldState.isInvalid`. svelte-check: 0 errors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
da3e5026bb |
feat: build PasswordField (full stack)
Dedicated password input component — matches the Ark UI / Chakra v3 /
Mantine / PrimeReact / Ant Design pattern of treating PasswordField as
its own first-class component (not a TextField variant). Includes one
feature that NO surveyed library ships: a CapsLock indicator driven by
KeyboardEvent.getModifierState('CapsLock').
Anatomy (5 parts, 4 events):
- Provider (root, value + visibility state)
- Input (the textbox; type flips between password / text)
- VisibilityTrigger (eye toggle button; aria-pressed + aria-controls)
- CapsLockIndicator (status live region; data-active toggles via soma
listening to keydown/keyup on Input)
- StrengthMeter (composable; consumer provides 0-4 score; UIX bundles
no zxcvbn-style algorithm — dependency-free by design)
Events:
- commit-input (every keystroke)
- commit-submit (Enter)
- shift-toggle-visibility (eye click)
- shift-caps-state (Caps Lock state flips while focused)
Key behaviors:
- `purpose: 'current' | 'new'` drives native autocomplete attribute
('current-password' for login / 'new-password' for registration).
- Field integration: disabled/readonly/required/invalid OR-merged.
- VisibilityTrigger gets tabindex=-1 so it doesn't break the form's
natural tab order — mouse / programmatic focus only, matching Ark UI.
- Caps Lock indicator is aria-live="polite" — announces on activation
while focused, silent when inactive.
- Letter-spacing increased on the input for legibility while masked.
Reference library survey performed (10 libraries) before implementation —
all consensus around dedicated component, all have built-in toggle,
ZERO have caps lock warning. Documented in the demo's API tab with a
feature comparison table.
Demo follows DEMO_AUTHORING_GUIDE canonical 6-tab depth: Live (controls
grouped by layer + code snippets at the bottom), API (props + reference
comparison), Morfo (field/value + Parts + Events tables), Sema (events
table with ▶ play), Recipe (selectors with morfo/eidos owner tags), A11y
(concern/contract table).
Also includes external work in words/ from a separate session
(unrelated to PasswordField) — not touching Words is the standing rule,
but the diff was already in the working tree.
svelte-check: 0 errors in PasswordField files (Words errors are tracked
by its own development branch).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
fead097ce1 |
fix(demos): rewrite Skeleton + Spinner demos to canonical 6-tab depth
The previous demos violated DEMO_AUTHORING_GUIDE in several places. Both have been rewritten end-to-end against the aspect-ratio canary template (canonical reference for 0-events eidos primitives). Changes per demo: - Stage always rendered between header and tablist (was inside Live tab). - MutationObserver wired with stageRef + 6-entry trace strip (was absent — required even for 0-event components per §6). - Trace strip layout: 'no semantic events' badge + shape/variant + size + color, matches aspect-ratio shape. - Live tab adds the soma + eidos code snippets with full data-uix-code wrappers and head badges (§7 + §8). - somaSnippet now shows the equivalent semantic markup with a clear "not real soma" note (since these are eidos-native). - API tab uses data-uix-table with explicit "Skeleton-specific props" + "Inherited from Box" + "Reference comparison" subsections (§4). - Morfo tab matches §10: header field/value table + Parts table with marker column + per-part data/aria subsection tables. - Sema tab keeps the explicit 0-events explanation (was absent for one of the demos). - Recipe tab uses the Selectors table with morfo/eidos owner tags (§11) instead of a single code snippet. - A11y tab uses data-uix-table (concern/contract) instead of a bullet list, matching aspect-ratio. Reference template: web/routes/uix/components/aspect-ratio/+page.svelte. Per §1, when in doubt, copy from the canary template and adapt. svelte-check: 0 errors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
616d8535f7 |
feat(eidos): add Skeleton and Spinner loader primitives
Two pure-eidos loader components with morfos at scope `['eidos']` (no soma backing, no semantic events). Skeleton — content placeholder: - 3 shapes: rect (default), circle, text (multi-line with staggered widths) - 5 sizes (xs..xl), 8 color accents - Optional shimmer animation via CSS `background-position` keyframes - Single `<div role="status" aria-busy="true">` with translated aria-label - Reduced-motion freezes animation, keeps visual Spinner — indeterminate progress: - 3 variants: ring (rotating arc), dots (bouncing), bars (stretching) - 5 sizes, 8 colors - Optional inline label via children snippet - `role="status"` + `aria-live="polite"` for SR announcements - Reduced-motion freezes animation, keeps visual Files: - morfo: skeleton.ts, spinner.ts (scope eidos, no events) - eidos: full component + types + css + langs + index per component - langs: skeleton/spinner under componentLangs barrel - demos: canonical 6-tab depth + composition examples (avatar+text card) - layout: sidebar additions under Status group Note: also includes responsive shell additions to web/routes/uix/uix.css that surfaced from an external session — same file, leaving them in. Reference libraries reviewed (Mantine, Chakra v3, Radix Themes, MUI): all expose the same shape/variant/size/color surface. shadcn Skeleton uses the same pulse animation. No surprises in our API. svelte-check: 0 errors in skeleton/spinner files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
f8897d92d6 |
fix: clear remaining `npm run check` errors (12 → 0)
Three groups of errors blocking the global typecheck:
A. Announce morfo used invalid family/intent vocabulary
- `absent-clear` event used `family: 'absent'` and `intent: 'absent'`,
neither valid in current MorfoEventSemantic schema
- Renamed to `commit-reset` (family: commit, verb: reset, intent: neutral)
matching SearchField's clear-reset pattern
- Updated demo copy to reference the new event name
- Cascade-resolved 4 errors (morfo + soma provider + demo + active-uix test)
B. Tree wrappers stripped bindable props
- eidos `<TreeGrid>` didn't expose `expanded`/`value` as `$bindable`;
they leaked through `...rest` and Svelte rejected `bind:expanded`
- Same issue for `<TreeView>` with `expandedValue`/`selectedValue`
- Now declared explicitly + forwarded via `bind:` to soma's Provider
C. Virtual containers passed wide `style` to native markup
- `style` was typed `string | Record<string, unknown> | null | undefined`
but the markup `<div style={...}>` only accepts string
- Filtered with `typeof style === 'string'` derived guard before render
svelte-check result: 5076 files, 0 errors, 23 warnings (no-op warnings
in navigation-menu `href="#"` and table `state_referenced_locally`).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
940e94bb64 |
Build TextArea component + fix locale propagation bug across soma providers
Major work in this session:
1. NumberField demo refactored to expose Intl.NumberFormatOptions live
- 9 canonical presets (currency/unit/percent/compact/plain)
- Locale/currency/unit lists derived from $libs/langs, $libs/currency,
$format/units (no more hardcoded arrays)
- Default locale from uix.format.numbers.getLocale()
2. Bug fix: locale prop ignored when soma.format service is active
- soma/NumberField: 5 bypass points via new `hasOwnLocale` getter
(decimalSeparator, groupSeparator, formatValue, formatEditValue, parseValue)
- soma/Calendar: dateOrder respects locale prop (matches DateField precedence)
- soma/RangeCalendar: same dateOrder fix
- When the consumer passes `locale` prop, soma.nums/dates is bypassed
and Intl is used directly with the prop locale
3. TextArea — new component, full 4-layer stack
- morfo: 3 parts (provider/input/count), 3 events
(commit-input/commit-submit/shift-count-overflow), APG textbox
- soma: TextAreaProvider with autosize (scrollHeight measurement),
submitOn modes (false|enter|shift+enter|mod+enter), maxLength soft clamp,
Field integration (OR-merge), counter overflow tracking
- eidos: 5 sizes × 3 variants × 8 colors, autosize suppresses CSS resize
- sema: commit-submit + shift-count-overflow perceptual cues
- demo: canonical 6-tab depth, all props exposed as live controls
- PrimitiveTextareaAttributes added to soma/types/html.ts
4. Also includes accumulated unreleased work from prior sessions:
- Eidos ports: announce, clipboard, drag-drop, feed, table,
tree-grid, tree-view, virtual-grid, virtual-list, words
- Their canonical demos under web/routes/uix/components/
- Semantic events defined for utility morfos
(announce/clipboard/virtual-list/virtual-grid)
- Tree indent guides fixed (TreeView ::before, TreeGrid stacked gradients)
- Sidebar reorganized with Data + Utilities groups
- Eidos words content layer and primitives
Reference library survey performed before TextArea API design (Mantine,
Radix Themes, Chakra v3, React Aria, Ark UI, Bits UI, shadcn, MUI, Prime).
Decision documented: no separate CurrencyField/UnitField — single
NumberField with formatOptions is the canon (matches all surveyed
headless libs except PrimeReact's mode enum, which still uses 1 component).
svelte-check: 0 errors in modified/created files.
See CONTINUE.md for full session notes and next steps.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
3fc4ced37b |
feat(carousel): showIndicators + showControls visibility props
Two new eidos-level booleans on `<Carousel>` so consumers can toggle the indicator dots and the prev/next triggers without touching the markup composition. Defaults stay `true` (existing behaviour). The consumer still renders the parts in markup; the recipe just hides them via `display: none` when the eidos root stamps `data-hide-indicators` / `data-hide-controls`. Toggling on/off doesn't unmount the DOM, so ARIA focus is preserved across the change and the layout doesn't reflow into a different size. Naming follows the canonical eidos cascade — `showIndicators` mirrors calendar's `showWeekNumbers`. Mantine uses `withIndicators` (default false); we default `true` because the Eidos recipe assumes indicators are part of the default surface. Demo: two switches added to the eidos visual-props section + snippet preview emits the prop when set to false. Verified: clicking the demo switch flips `data-hide-indicators` on the root and the indicator-group's computed `display` goes from default to `none` without remounting. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
92c5e421c9 |
fix(carousel): :active press feedback was replacing centering transform
Bug behind the user's "el botón se desplaza en el eje contrario al
orientation" report. The Button recipe sets
[data-button]:active { transform: translateY(1px); }
on press to simulate a physical button push. Carousel prev/next triggers
absolute-position via:
[data-carousel-prev-trigger] { transform: translateY(-50%); } (horiz)
[data-carousel][data-orientation='vertical']
[data-carousel-prev-trigger] { transform: translateX(-50%); } (vert)
CSS `transform` is a single property — Button's :active value
REPLACES the carousel's centering transform, so on press the trigger
jumped off its anchor: in horizontal it lost vertical centering, in
vertical it lost horizontal centering AND moved 1px down (wrong axis
relative to slide travel).
Override `:active` on the carousel triggers to compose both transforms
on the appropriate axis:
horizontal: translateY(calc(-50% + 1px))
vertical: translateX(calc(-50% + 1px))
Now press feedback shifts the trigger 1px along the centering axis
without breaking the absolute anchor.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
8cf2fe813f |
fix(button): icon wrappers must not capture pointer (carousel triggers dead-clicked)
Real cause behind the persistent "los clicks fallan" report. The button recipe gave `pointer-events: none` to nothing — so when a user clicked near the visual centre of an `iconOnly` button (like the carousel prev/next triggers), the SVG `<path>` was the hit target. SVG paths default to `pointer-events: visiblePainted` so only the painted stroke (the thin chevron line) is clickable; clicks landing in the empty diagonals of the chevron passed through to whatever was behind the button — usually nothing — and the button's onclick never fired. Adds `pointer-events: none` to the icon wrappers (`.eidos-button-icon`, `[data-button-icon]`) and to any nested decorative svg / `[data-svg]` / `[data-icon]`. Now the entire button rect is the click target. Verified: `elementFromPoint` at the chevron's geometric centre now returns `BUTTON[data-carousel-next-trigger]` instead of `path`, and a click at that point fires the button handler + advances the carousel index 1→2. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
a81b44b40c |
fix(carousel): first-click no-op — viewportSize was stale until ResizeObserver fired
Real bug behind the persistent "los clicks fallan" report. The
`viewportSize` derivation was reading exclusively from the
`viewportClient{Width,Height}` $state mirrors, which are populated
asynchronously by the ResizeObserver. On first paint (and on the
very first click after mount / orientation switch) those mirrors were
still `0`. So:
translate = -value × slideSize
= -1 × (viewportSize / 1)
= -1 × 0
= 0
The index DID advance (soma's `value` went 0→1) but the rail stayed
at translate=0, so the user saw the active slide unchanged — looked
exactly like a dead click. Subsequent clicks accumulated until the
observer finally fired and the carousel suddenly jumped to whatever
index had become.
Fix: two-tier read in the `viewportSize` derivation. Prefer the
observer-tracked mirror when non-zero (steady state, picks up reshape);
fall back to a synchronous `vp.clientWidth` / `clientHeight` read while
the mirror is still 0. Same derivation reactivity, no extra effects.
Verified: first click after page load now lands `translate3d(-380px, 0,
0)` on a 380px-wide viewport (idx 0→1) — was 0 / no movement before.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
b1b1e39dc0 |
fix(carousel): chevron direction follows orientation
Vertical carousel still rendered horizontal chevrons (< / >) for the prev / next triggers, which read as wrong-direction even though the click handlers worked correctly. The user complaint "varios clicks" was the visual mismatch making each click look like it did nothing — value WAS advancing index 0→1→2 on each click but the icons pointed sideways in a vertical rail. - Added `orientation` to the eidos carousel context so the prev / next trigger wrappers can pick the right chevron without passing props. - Re-exported `Direction` + `Orientation` from soma's carousel module so the eidos context can type-check them. - Prev trigger now uses `direction='up'` in vertical, `'left'` in horizontal. Next trigger mirrors with `'down'` / `'right'`. Verified: index goes 0→1→2 on successive clicks; chevrons now show `^` (top) and `v` (bottom) in vertical orientation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
a6baae0cf1 |
fix(carousel/range-calendar/time-range-field): apply canonical i18n + vertical layout patterns
## Vertical carousel layout
Recipe was making the indicator group stretch full width (380px) because
the root stayed in `flex-direction: column` and the indicator-group
inherited `align-items: stretch`. Reshaped:
- `[data-carousel][data-orientation='vertical']` now flips the root to
`flex-direction: row` so viewport and indicator-group sit side-by-side.
- Viewport takes `flex: 1 1 auto` of the inline axis with explicit
100% block-size.
- Indicator-group becomes `flex: 0 0 auto; inline-size: max-content;
align-self: center` — narrow column of dots on the right edge.
Active vertical-stretched indicator already had `block-size: 2.25×`
treatment from the prior commit, so it now appears as a vertical pill
inside the dot column.
## i18n controls: follow canonical pattern
Mirrored the date-range-picker / calendar demos verbatim — those are
the canon and the new demos drifted from them. Three corrections:
1. **Locale**: `<select>` with `en-US / es-ES / fr-FR` (the docs
canon — chip rows and made-up locale lists like ar/he/ja were both
inventions). Carousel exposes locale too; it's forwarded to soma
for downstream lang-aware behavior (announcer text, future label
formatting hooks).
2. **Direction**: chip row with `ltr / rtl` (no `auto`). Label is
"direction" not "dir".
3. **State shape**: plain `let dir = $state<Direction>('ltr')`, not
the synthetic `dirCtl + derived` pattern I had invented.
Applied across all three demos so they read identically to the canon.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
23ad9351ea |
feat(carousel): wire dir + locale (was hardcoded 'ltr'); expose i18n in demos
Audit caught Carousel ignored direction entirely: `getDirectionalKeys` received a hardcoded `'ltr'` so ArrowLeft / ArrowRight had the same semantics under RTL as LTR, and the horizontal translate had no RTL flip so slides advanced the wrong way visually. Drag direction had the same bug. ## Soma - New `dir` + `locale` props on `Carousel.Provider` (fall back to `soma.prefs.getDir()` then `'ltr'`). - `onkeydown` now reads `this.opts.dir.current` for `getDirectionalKeys`. - `itemGroupTransform` flips the translate sign on horizontal RTL so index N→N+1 moves the rail in the reading-direction-appropriate way. - `finishDrag` swaps the offset sign on horizontal RTL so drag-right advances under RTL (drag-left under LTR). - Root stamps `dir="..."`, `lang="..."`, and `data-dir="..."` for consumers and the recipe. - Test mocks updated. ## Demos - Carousel demo: new `soma · i18n` controls section — `dir` chips (`auto` / `ltr` / `rtl`) + `locale` chips covering en/es/ar/he/ja so the user can flip orientation semantics live. - Range-calendar demo: same `dir` + `locale` chip rows added next to `weekStartsOn`; previously only `locale` was state-bound but the control wasn't surfaced and `dir` wasn't forwarded at all. - The eidos code snippet preview emits `dir="..."` and `locale="..."` attrs when they differ from defaults. ## Verified Browser walk: with `dir="rtl"`, the carousel root reports `data-dir="rtl"`, prev/next chevrons swap sides, indicator order mirrors, and `ArrowRight` correctly advances to the *previous* slide (index 1 → 0). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
f291c08865 |
fix(carousel/range-calendar/time-range-field): visual bugs across all three
Real visual audit caught three classes of bugs that the prior commits
missed because they were never opened in the browser.
## Carousel
### Vertical orientation overflow
Recipe gave the root no block-size in vertical, so items spilled. Plus
the soma `viewportSize` derivation only ran on ref / orientation-prop
changes, not on layout reshape — so flipping horizontal → vertical
kept reading the old clientWidth and the translate maths used the wrong
slide size (observed -214 instead of -156 after a flip).
Fix:
- Recipe: `[data-carousel][data-orientation='vertical']` gets explicit
`block-size`, and the viewport / item-group / item each get `100%`
along the block axis. Default vertical size lives on
`--_carousel-vertical-block-size` (16rem), overridable via the new
eidos `verticalBlockSize` prop or the custom property directly.
- Soma: replaced the synchronous `clientWidth/Height` reads with
`viewportClientWidth/Height` `$state` mirrors populated by a
ResizeObserver on the viewport. Layout-only changes (orientation
flip, container resize, font scaling) now propagate to translate
calc on the next reactive tick.
## RangeCalendar
### Multi-month stacked vertically
`numberOfMonths > 1` rendered grids stacked in a column because the
eidos `[data-range-calendar]` recipe is `inline-flex; column`. Copied
the side-by-side grid layout from the existing date-range-picker demo:
`.range-months { display: grid; grid-auto-flow: column; }` with
`grid-auto-flow: row` collapse for `data-month-count='1'`.
### Min/max controls were nonsense
The prior demo had a custom "today | custom" mode that conflated
fixtures with real today, and required two separate enum states.
Rewrote the controls to mirror the date-range-picker demo exactly:
two `<input type="date">` bindings on string state, parsed by
`parseDateInput`, plus a preset chip row (none / min only / max only /
window / invalid).
### Weekday key duplicate
The narrow-format weekday strings repeat letters ('T' for Tuesday and
Thursday, 'S' for Saturday and Sunday), so keying by `wd` raised
`each_key_duplicate`. Changed to key by index.
## TimeRangeField
### Start endpoint rendered no segments
Keying the segments `#each` by `seg.part` collapsed when segment
parts repeat. Copied the canonical key shape from the time-range-picker
demo: `(${part}-${i})`. Verified both endpoints now render their
four segments (`09:30` — `17:45` for the default fixture).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
44514c3cc1 |
fix(carousel): vertical overflow + close gaps vs embla/ark-ui/mantine
Real reference audit walked the published embla `.d.ts`, Mantine docs, ark-ui, shadcn-svelte and Swiper. Found three classes of gaps in the initial port (a) the vertical bug breaking the only non-default orientation, (b) layout primitives every other lib ships (slidesPerView, slidesToScroll, align, gap), (c) autoplay granularity (playOnInit, stopOnInteraction, stopOnFocusIn, stopOnMouseEnter, stopOnLastSnap), plus an imperative API every consumer needs. ## Vertical bug fix Recipe now gives the root a default `block-size` in vertical orientation (`16rem`, overridable via `--_carousel-vertical-block-size` or the new eidos `verticalBlockSize` prop) and stretches the viewport to fill it. Without this the viewport collapses to content height and items spill. ## Soma extensions - `defaultValue` (uncontrolled init) - `slidesPerView` (1+) — each Item basis = (100% − gap·(n−1)) / n - `slidesToScroll` (1+) — paged group navigation - `align: 'start' | 'center' | 'end'` — viewport alignment - `gap: string` (CSS length) — between-slide spacing on the ItemGroup - `playOnInit` — start autoplay on mount (default true) - `stopOnInteraction` — latch-stop after user clicks prev/next/indicator or drags - `stopOnFocusIn` — pause while focus is inside (default true) - `stopOnMouseEnter` — pause while cursor over root (Embla parity) - `stopOnLastSnap` — latch-stop at last snap when loop=false - Snippet exposes `isPlaying` + an `api` handle with `scrollNext / scrollPrev / scrollTo / play / pause / reset` `commit()` now respects `slidesPerView` (last snap = count − spv). `next()` / `prev()` step by `slidesToScroll`. Translate calc derives from `slideSize = viewportSize / slidesPerView` so multi-view works. Item flex-basis adapts to slidesPerView + gap. ## Eidos additions - `verticalBlockSize` prop — forwarded as CSS custom property for the vertical recipe override - Recipe selectors for vertical orientation enforcing the block-size + viewport stretch - Style composition so consumers can still pass inline `style` ## Demo Live tab now has 4 organized sections (layout / drag / autoplay / imperative API) covering every new prop. The imperative API row drives the carousel from external buttons via the snippet handle so consumers see the pattern in action. `verticalBlockSize` slider exercises the vertical fix. Snippet preview emits every set prop. ## Reference comparison Following the canon's mandate to compare with references BEFORE declaring done, the actual feature matrix from embla published `.d.ts`, Mantine docs, ark-ui, shadcn-svelte, Swiper: | Feature | embla | mantine | ark | swiper | UIX | |------------------------|-------|---------|-----|--------|-----| | Index nav | ✓ | ✓ | ✓ | ✓ | ✓ | | Loop | ✓ | ✓ | ✓ | ✓ | ✓ | | Drag | ✓ | ✓ | ✓ | ✓ | ✓ | | Autoplay | plug | plug | ✓ | ✓ | ✓ | | Orientation H/V | ✓ | ✓ | ✓ | ✓ | ✓ | | slidesPerView | indir | ✓ | ✓ | ✓ | ✓ | | slidesToScroll | ✓ | ✓ | ✓ | ✓ | ✓ | | Align | ✓ | indir | per | ✓ | ✓ | | Gap | css | ✓ | ✓ | ✓ | ✓ | | defaultValue | startIndex | ✓ | ✓ | ✓ | ✓ | | playOnInit | ✓ | indir | ✓ | ✓ | ✓ | | stopOnInteraction | ✓ | ✓ | ✓ | ✓ | ✓ | | stopOnFocusIn | ✓ | ✓ | ✓ | partl | ✓ | | stopOnMouseEnter | ✓ | ✓ | ✓ | ✓ | ✓ | | stopOnLastSnap | ✓ | ✓ | ✗ | ✓ | ✓ | | Imperative API | ✓ | ✓ | ✓ | ✓ | ✓ | | Indicators / triggers | DIY | ✓ | ✓ | ✓ | ✓ | | Fade effect | plug | plug | ✗ | ✓ | ✗ deferred | | Virtual slides | ✗ | ✗ | ✗ | ✓ | ✗ deferred | | Multirow grid | ✗ | ✗ | ✗ | ✓ | ✗ deferred | Deferred power-user features (fade, virtual, multirow grid, cube/cards, parallax) are documented as power-user in the reference audit, not table-stakes, and would require Embla-class internals to ship. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
2cecc0b3b7 |
feat(eidos): port range-calendar from soma + extract shared partial
Standalone eidos `<RangeCalendar>` wrapper over the soma range-calendar primitive. Adds size / variant / color cascades; otherwise pass-through 14 compound parts (Provider, Header, Heading, PrevButton, NextButton, MonthSelect, YearSelect, Grid, GridHead, GridBody, GridRow, HeadCell, Cell, Day). ## Feature comparison | Feature | bits-ui | ark-ui | react-aria | Eidos | |----------------------|---------|--------|------------|-------| | Range start/end | ✓ | ✓ | ✓ | ✓ | | Hover preview state | ✓ | ✓ | ✓ | ✓ | | minDays / maxDays | — | — | ✓ | ✓ | | allowSingleDay | ✓ | ✓ | ✓ | ✓ | | preventDeselect | ✓ | ✓ | — | ✓ | | Multi-month display | ✓ | ✓ | ✓ | ✓ | | Week-number column | — | — | ✓ | ✓ | | Month/Year selects | — | ✓ | — | ✓ | | Disabled / readonly | ✓ | ✓ | ✓ | ✓ | | isDateUnavailable | ✓ | ✓ | ✓ | ✓ | | Holiday markers | — | — | — | ✓ | | Locale / dir | ✓ | ✓ | ✓ | ✓ | | Size cascade | — | — | — | ✓ 4 | | Variant cascade | — | — | — | ✓ 3 | | Color cascade | — | — | — | ✓ 8 | ## Range-cells partial extracted The recipe at `src/uix/eidos/components/range-calendar/range-calendar.css` now owns ALL `[data-range-calendar-*]` selectors — the shared rules that previously lived inside `date-range-picker.css` (lines 537-834) moved here. Both consumers (the standalone `<RangeCalendar>` and `<DateRangePicker>`'s popover content) stamp the same data-attrs, so the same selectors paint without duplication. `date-range-picker.css` drops 298 lines of duplication; it keeps only the picker-specific scope overrides (`[data-date-range-picker-calendar]` with no chrome, max-content sizing, transparent bg). ## Morfo Extended `rangeCalendarMorfo.scope` to include `'eidos'` so the new wrapper appears in the eidos-layer inventory and the demo Morfo tab declares it correctly. ## Demo Canonical 6-tab depth (~600L) at `/uix/components/range-calendar`. Live tab exposes every range-specific prop: minDays / maxDays sliders, allowSingleDay, preventDeselect, numberOfMonths chips (1 / 2 / 3), pagedNavigation, fixedWeeks, showWeekNumbers, disableDaysOutsideMonth, weekStartsOn, disabled, readonly, locale, plus size / variant / color cascades. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
68670b6331 |
feat(eidos): port carousel from soma
Eidos wrapper for the soma Carousel primitive — horizontally or vertically scrollable rail of slides with keyboard, button, indicator, drag and autoplay nav. Soma owns the index + autoplay timer + gesture; eidos adds size/variant/color cascades and renders prev/next triggers as `<Button iconOnly variant="ghost" rounded="full">` per the canonical Button consumer pattern. ## Feature comparison | Feature | embla | Mantine | ark-ui | Eidos | |----------------------|-------|---------|--------|-------| | Index nav | ✓ | ✓ | ✓ | ✓ | | Loop | ✓ | ✓ | ✓ | ✓ | | Drag / scrub | ✓ | — | ✓ | ✓ | | Autoplay | plugin| ✓ | ✓ | ✓ | | Pause on hover | plugin| ✓ | ✓ | ✓ | | Orientation V/H | ✓ | ✓ | ✓ | ✓ | | Keyboard nav | ✓ | ✓ | ✓ | ✓ | | Indicators | — | ✓ | ✓ | ✓ | | Prev/Next triggers | — | ✓ | ✓ | ✓ | | Size cascade | — | — | — | ✓ 5 | | Variant cascade | — | — | — | ✓ 3 | | Color cascade | — | — | — | ✓ 8 | | Multi-slides view | ✓ | ✓ | — | deferred | | Lazy-mount slides | plugin| — | — | deferred | ## Parts (8) Provider · Viewport · ItemGroup · Item · PrevTrigger · NextTrigger · IndicatorGroup · Indicator. PrevTrigger and NextTrigger render Button via the soma `child` snippet (canonical Button consumer pattern). Default chrome: `iconOnly variant='ghost' rounded='full'` + chevron glyph. Size cascades from Carousel root; consumers can override every Button visual prop inline. Passing `child` bypasses Button entirely. ## Recipe Card chrome around the rail (`variant='surface'`), absolute-positioned triggers over the viewport edges (vertical flips to top/bottom). Active indicator stretches inline-size 2.25× for clearer current-position hint. 8 ColorRole accents. ## Demo Canonical 6-tab depth (~470L): Live / API / Morfo / Sema / Recipe / A11y. Live controls cover all soma props (orientation, loop, dragEnabled, autoplay + delay slider, pauseOnHover, disabled) and all eidos props (variant, size, color). 4 colored placeholder slides for visual contrast. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
db21767db1 |
feat(eidos): port time-range-field from soma
Eidos wrapper for time range selection — start/end TimeField inputs sharing a single ZonedDateTime range value. Mirrors DateRangeField pattern with `data-time-field` overlay trick so item segments inherit the time-field recipe. ## Feature comparison | Feature | react-aria | Mantine | Eidos | |----------------------|------------|---------|-------| | Range value | ✓ | ✓ | ✓ | | Per-endpoint Input | ✓ | ✓ | ✓ | | Segment editing | ✓ | — | ✓ | | Granularity prop | ✓ | ✓ | ✓ | | Hour cycle (12/24) | ✓ | ✓ | ✓ | | Min/max value | ✓ | ✓ | ✓ | | Placeholder per-end | ✓ | — | ✓ | | Invalid signalling | ✓ | ✓ | ✓ | | Disabled / readOnly | ✓ | ✓ | ✓ | | Form integration | ✓ | ✓ | ✓ | | Size cascade | — | ✓ | ✓ xs–xl | | Variant cascade | — | ✓ | ✓ 3 | | Color cascade | — | — | ✓ 6 | ## Parts Root · Label · Input (type='start' | 'end') · Segment (re-exported from TimeField). Each Input scopes its own TimeField context so segment editing routes to the correct endpoint. ## Recipe Grid `1fr · auto · 1fr` with em-dash separator. Specificity bump on `[data-time-range-field][data-time-field]` to win over the overlay data-time-field rules. ## Demo Canonical 6-tab depth (~530L): Live / API / Morfo / Sema / Recipe / A11y. Variant / size / color / granularity / hour-cycle / min-max / disabled / readOnly / required controls. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
67726cb6f3 |
fix(soma navigation-menu): suppress click-close right after hover-open
Bug: hovering a NavigationMenu trigger opens its Content after the configured \`openDelay\` (default 200ms). If the user then clicked the trigger — naturally, after the open is visible — the click handler saw \`isOpen=true\` and called \`closeNow()\`, shutting the menu the user just opened. Net effect: the first click appears to open AND close the menu in one go. Repro (commit before fix): - hover for ≥200ms (or any delay long enough to trigger \`scheduleOpen\`) - menu opens - click the trigger - menu closes within milliseconds Fix: track \`lastOpenedAt\` per NavigationMenuTriggerProvider via a root \`\$effect\` that stamps the timestamp whenever \`isOpen\` transitions to true (regardless of whether the open came from hover, click, or keyboard). The click handler checks \`Date.now() - lastOpenedAt < 250\` and silently ignores the close-toggle in that window — treating the click as "commit the open" intent, not "toggle shut". Two-click toggle behavior is preserved: a click ≥250ms after the open still closes the menu (verified: openBefore=true, stillOpenAfterClick= true, closedAfter2ndClick=true). The 250ms threshold is slightly above the default openDelay (200ms) so the protection covers the typical hover-then-click sequence without making the toggle feel sluggish. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
a010f8f255 |
fix(eidos navigation-menu): style sub-items inside Content
Bug: anchors inside Content panels had no hover/padding/border treatment — consumers writing typical mega-menu markup (<a> elements) got a wall of unstyled text. Adds a default sub-item recipe that targets \`[data-navigation-menu-content] :is(a, [data-navigation-menu-link])\` — covers both plain anchors AND the official \`NavigationMenu.Link\` part when used inside Content. Each item gets: - display: block - padding 8px / 12px - border-radius (matches md radius) - color = primary content - text-decoration: none, cursor: pointer - hover/focus background = --color-primary-element - aria-current="page" + data-active = same tinted active state Demo cleanup: dropped the redundant inline \`style="color: inherit; text-decoration: none;"\` overrides on every <a>, tightened the grid gap from space-3 to space-1 (rows now have their own background hover so gap can shrink). Content panel padding reduced to space-2 (was space-4) because sub-items already provide their own padding. Verified in browser: items render with padding 8/12px, border-radius 6px, text-decoration: none, cursor: pointer. Hover changes the background to primary-element. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
fd34fa535c |
fix(eidos navigation-menu): Content floats as popover, not inline
Bug: Content panels were rendering inline below their Triggers, pushing the bar's flex layout. They should float anchored to the Item the same way Radix / bits-ui mega-menus do. Two changes: 1. **Item** — was `flex-direction: column`, which made Content stack below Trigger in the flex flow. Switched to inline-flex with `align-items: center`. `position: relative` stays so it remains the anchor element. Vertical orientation gets `display: flex`. 2. **Content** — added `position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-start: 0; z-index: 50`. The panel now sits 4px below the trigger row, left-aligned to the Item (extends via `min-inline-size: 14rem` past the trigger), and stacks above the rest of the page. Vertical orientation flips the anchor: `inset-block-start: 0; inset-inline-start: calc(100% + var(--space-1))` so the panel opens to the right of the trigger column. Verified in browser: contentTop=623, triggerBottom=619, position=absolute, z-index=50, bar layout no longer pushed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
065cc6a369 |
feat(eidos): port GridList (selectable list w/ interactive row children)
Closes #133. Eidos wrapper + types + recipe + canonical-depth demo. 4 parts: Provider, Row, Cell, SelectionCheckbox. Soma owns selection (none/single/multiple), 2D keyboard nav (Up/Down rows + Left/Right cells), Shift/Ctrl range/toggle, Ctrl+A select-all, Escape-clear, typeahead, hidden form input, Field merge. Eidos adds variant + size + color + defaultValue (uncontrolled init). Reference parity (no air baseline): | Feature | soma | react-aria GridList | this port | |---|---|---|---| | selectionMode none/single/multiple | ✓ | ✓ | ✓ | | bind:value (controlled) | ✓ | ✓ | ✓ | | defaultValue (uncontrolled init) | ✗ | ✓ | ✓ added (parity with Combobox/Select) | | Item with interactive descendants | ✓ | ✓ | ✓ | | 2D keyboard nav (Up/Down rows, L/R cells) | ✓ | ✓ | ✓ | | Shift/Ctrl range/toggle | ✓ | ✓ | ✓ | | Ctrl+A select-all (multiple) | ✓ | ✓ | ✓ | | Escape-clear | ✓ | ✓ | ✓ | | Typeahead | ✓ | ✓ | ✓ | | ARIA grid/row/gridcell | ✓ | ✓ | ✓ | | Field merge (disabled/invalid/required/readonly) | ✓ | ✗ | ✓ | | Form participation (hidden input) | ✓ | ✗ | ✓ | | Drag-to-reorder | ✗ | ✓ | ⚠ deferred (compose w/ future DragDrop) | | onAction (row click → navigate) | ✗ | ✓ | ⚠ deferred (use button/link inside Cell) | | selectionBehavior toggle/replace | ✗ implicit | ✓ | ⚠ deferred | | disabledBehavior 'selection'/'all' | ✗ skip-only | ✓ | ⚠ deferred | | Async / infinite loading | ✗ | ✓ | ⚠ deferred | | Empty state slot | ✗ | ✓ | ⚠ document `data-empty` styling | Naming: keeps soma's part names (Provider, Row, Cell, SelectionCheckbox). react-aria's "GridListItem" maps to `Row`; soma's vocabulary is more precise and consistent with future Table / TreeGrid in the same family. Variant set: - variant: ControlVariant (surface/outline/ghost), default 'surface' - size: xs..xl (5-step, mirrors Combobox/Listbox) - color: ColorRole (primary/secondary/neutral/affirm/fulfill/risk/threat/loss) - block: stretch to container width Disambiguation (in index.ts comment): use GridList for rows with interactive children; use Listbox for atomic text options (ARIA forbids interactive descendants inside role="listbox"); use Select/Combobox for closed-picker patterns; use Table for tabular data with columns + sort. Visual reuse: - SelectionCheckbox uses the same `mask-image: url(svg-check)` pattern as the shared menu-indicator partial (commit |
5 months ago |
|
|
52627e60bb |
feat(eidos): port NavigationMenu (top-level site navigation w/ mega-menus)
#132. Eidos wrapper + types + recipe + canonical-depth demo. 7 parts: Provider, List, Item, Trigger, Content, Link, Indicator. Soma owns active-item state, hover delays (openDelay/skipDelayDuration/closeDelay), hoverEnabled gate, loop arrow nav, data-motion directional swap, Indicator rect CSS vars. Eidos paints the bar + trigger chrome + Content panel + slide animations. Reference parity (no air baseline — port directly from soma): | Feature | soma | Radix | bits-ui | this port | |---|---|---|---|---| | Provider + List + Item + Trigger + Content + Link + Indicator | ✓ | ✓ | ✓ | ✓ | | Hover open (openDelay/skipDelayDuration/closeDelay) | ✓ | ✓ | ✓ | ✓ | | hoverEnabled (click-only mode) | ✓ | ⚠ | ✓ | ✓ | | orientation horizontal + vertical | ✓ | ✓ | ⚠ | ✓ | | dir / RTL | ✓ | ✓ | ✓ | ✓ | | Indicator CSS vars (x/y/w/h rect) | ✓ | ✗ | ✗ | ✓ | | data-motion directional swap (from-/to-start/end) | ✓ | ✓ | ⚠ | ✓ | | forceMount on Content + Indicator | ✓ | ✓ | ✓ | ✓ | | ARIA <nav> + translated aria-label | ✓ | ⚠ | ⚠ | ✓ | | Keyboard nav (Arrow/Home/End/Enter/Space/Esc, ArrowDown → Content) | ✓ | ✓ | ✓ | ✓ | | Sub (nested viewports) | ✗ | ✓ | ✓ | ⚠ deferred (matches soma) | | Viewport (shared swap pane) | ✗ | ✓ | ✓ | ⚠ deferred | | Modal variant (focus trap) | ✗ | ✓ | ✗ | ⚠ deferred | | SafePolygon hover bridge | ✗ | ✗ | ✗ | ⚠ deferred | Naming: matches soma's part names exactly. Both Trigger (button) and Link (anchor) stay native — NOT routed through <Button> — because top-nav has flat/borderless chrome distinct from action buttons. The Link automatically picks up `aria-current="page"` styling for the active route. Variant set: only `size: 'sm' | 'md' | 'lg'` (no xs/xl). No variant/color — NavigationMenu is chrome surface, not actionable intent. Fresh recipe — does NOT reuse dropdown-menu (floating click-driven) or menubar (roving tabindex bar). NavigationMenu lives inline in the page; per-item Content panels render via Floating but conceptually attach to the bar. Indicator is a 2px underline that slides via CSS vars (--navigation-menu-indicator-{x,y,w,h}) written by soma. Trigger chevron rotates on [data-state='open']. Content animates via data-motion directional slide on sibling swap. Sidebar entry added under Navigation (between Pagination and a future NavigationMenu entry). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
830025b4ad |
fix(eidos listbox): add max-block-size + overflow-y auto
The Listbox container grew unbounded when items overflowed — long lists just stretched the parent layout. Adds: - Default `max-block-size: min(60vh, 22rem)` via `--_listbox-max-height` token (consumer can override via inline style). - `overflow-y: auto` + `overscroll-behavior: contain` so the listbox becomes its own scroll context. - Horizontal orientation switches axes: removes the block cap and uses `overflow-x: auto` instead so a single-row list never clips. Verified: with 8 items at md size, container caps at 352px with scrollHeight 378px — scrollbar present and working. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
80b21f63ba |
feat(eidos): port Listbox (embedded selection list)
#131. Eidos wrapper + types + recipe + canonical-depth demo. Soma owns single/multi selection (value as string[]), roving-tabindex keyboard nav (Arrow + Home/End + typeahead + Ctrl+A), Field-merged flags (disabled/readonly/required/invalid), hidden form inputs. Eidos adds the visual surface and exposes variant + size + color. Reference parity (no air baseline — port directly from soma): | Feature | soma | react-aria | Headless UI | bits-ui | this port | |---|---|---|---|---|---| | Single + multiple selection | ✓ | ✓ | ✓ | ✓ | ✓ | | bind:value (controlled) | ✓ | ✓ | ✓ | ✓ | ✓ | | Typeahead + Arrow / Home / End | ✓ | ✓ | ✓ | ✓ | ✓ | | Loop nav | ✓ | ✗ | ✗ | ✗ | ✓ | | Section / Group + label | ✓ | ✓ | ✗ | ✓ | ✓ | | Ctrl+A select-all (multi) | ✓ | ✓ | ✗ | ✗ | ✓ | | Form participation (hidden inputs) | ✓ | ✗ | ✓ | ✗ | ✓ | | Field.Provider merge (disabled/invalid/…) | ✓ | ✗ | ✗ | ✗ | ✓ | | Horizontal orientation | ✓ | ✓ | ✓ | ✓ | ✓ | | Item indicator (✓ glyph) | ✓ | ✓ | ✗ | ✓ | ✓ shared partial | | Drag-to-reorder | ✗ | ✓ | ✗ | ✗ | ⚠ deferred | | Async / infinite loading | ✗ | ✓ | ✗ | ✗ | ⚠ deferred | | selectionBehavior (toggle/replace) | ⚠ implicit | ✓ | ✗ | ✓ | ⚠ deferred | | PageUp/Down nav | ✗ | ✓ | ✗ | ✗ | ⚠ deferred | Parts (5): Listbox (Root, replaces soma's Provider name), Item, ItemIndicator, Group, GroupLabel. Variant set: - variant: ControlVariant (`'surface' | 'outline' | 'ghost'`), default 'surface' - size: xs..xl (5-step canonical form-control scale) - color: ColorRole (primary/secondary/neutral/affirm/fulfill/risk/threat/loss) - block: stretch to container width Cross-component reuse: - `ItemIndicator` shares the menu-indicator visual (`a2709476`) — ✓ glyph identical to standalone Checkbox and Dropdown/Context Menu CheckboxItems. CSS-only difference: shown only inside `[data-listbox-item][data-selected]`. - Item row hover / highlight tokens mirror Combobox.Item / Command.Item — the form-control surface family stays coherent. Disambiguation note (in index.ts comment): - Listbox: atomic options, text rows, no inner interactive elements (ARIA forbids interactive descendants inside role="listbox") - GridList: rows with buttons / links / checkboxes inside (2D nav) - Select / Combobox: closed picker surface (Listbox-like dropdown) Gotcha: listbox.svelte and listbox-item.svelte rename `children` to `bodyContent` on destructure to avoid shadowing the inner `{#snippet children}` block (same recursion trap documented in `feedback_button_consumer_pattern.md` Rule 3). Demo: 6 tabs at canonical depth — Live wires all soma + eidos props, all 3 ControlVariant chips, 5 size chips, 8 ColorRole chips, single + multi mode toggle, RTL/horizontal toggle. Sidebar entry added under Forms (between Combobox and Calendar). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
8ab8f9dae1 |
feat(eidos): port Command (⌘K palette)
Closes #130. Eidos wrapper + 13 part wrappers + 2 new sub-parts + Dialog composition + recipe + canonical-depth demo. Soma owns scoring (`computeFuzzyScore`), keyboard nav (Arrow + vim Ctrl+N/P/J/K + typeahead + loop + grid columns + RTL), item visibility, and the imperative `CommandApi`. Eidos adds size + Item.Icon / Item.Shortcut slots + Dialog composition with optional shortcut binding. Reference parity: | Feature | cmdk | Mantine Spotlight | bits-ui Command | this port | |---|---|---|---|---| | Root provider w/ bind:value, bind:search | ✓ | ✓ | ✓ | ✓ | | Input, List, Viewport, Empty | ✓ | ✓ | ✓ | ✓ | | Group + GroupHeading + GroupItems | ✓ | ✓ | ✓ | ✓ | | Item value, keywords, disabled, onSelect | ✓ | ✓ | ✓ | ✓ | | LinkItem (anchor) | ✗ | ✗ | ✓ | ✓ | | Separator, Loading (progress 0-100) | ✓ | partial | ✓ | ✓ | | Custom filter / shouldFilter | ✓ | ✓ | ✓ | ✓ | | Loop, vim bindings, grid columns | ✓ | partial | ✓ | ✓ | | disablePointerSelection | ✓ | ✗ | ✓ | ✓ | | Modal Dialog composition | ✓ | ✓ (Root is modal) | ✓ | ✓ via eidos Dialog | | Built-in ⌘K shortcut binding | ✗ (BYO) | ✓ | ✗ (BYO) | ✓ optional | | Item.Icon / Item.Shortcut slots | BYO | leftSection/rightSection | BYO | ✓ NEW | Naming: `Command.Root` aliased as the default export (cmdk/bits-ui parity, eidos convention). Inner parts as named sub-properties: `Command.Input`, `Command.List`, `Command.Item`, `Command.Item.Icon`, `Command.Item.Shortcut`, `Command.Dialog`, … Variant set: only `size: 'sm' | 'md' | 'lg'` (drops xs/xl — palette UX needs comfortable hit targets, matches air baseline). Shortcut binding: cross-platform `mod` token (Cmd on macOS, Ctrl elsewhere). Parses `'mod+k'`, `'ctrl+shift+p'`, etc. Window keydown listener registered on mount, cleaned up on unmount. Pass `null`/ undefined to disable. Recipe: `command.css` paints palette container, input row, scrolling List/Viewport, item rows (with highlighted [data-selected] state), icon + shortcut slot layout, group heading, separator, empty state. Loading progress is a 2px bar under Input with `--_command-loading- progress` for the fill. Inside Command.Dialog the panel chrome comes from dialog.css. Demo: 6 tabs (Live/API/Morfo/Sema/Recipe/A11y) — Live wires every soma + eidos prop + Dialog mode with shortcut input. Two stages: inline palette + dialog opener with shortcut hint. Three code snippets (soma, eidos inline, eidos dialog). Gotcha note: command.svelte renames the children prop to `bodyContent` on destructure to avoid shadowing the inner `{#snippet children}` — same infinite-recursion trap noted in `feedback_button_consumer_pattern.md`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
9def877dbd |
feat(eidos): port Menubar (desktop File/Edit/View bar)
#129. Eidos wrapper + types + recipe + canonical-depth demo. Soma owns active-menu state, cross-menu ArrowLeft/Right navigation, hover-switch when active, focus return on Escape, typeahead, RTL. Eidos paints the bar surface and trigger states; per-menu Content reuses the dropdown-menu recipe (Item / Sub / Checkbox / Radio chrome + the shared menu-indicator partial from `a2709476`) because soma already re-exports the DropdownMenu parts for those slots. Reference parity: | Feature | Radix | bits-ui | ark-ui | this port | |---|---|---|---|---| | Root provider w/ active-menu binding | ✓ | ✓ | ✗ (Menu only) | ✓ | | Menu / Trigger / Content | ✓ | ✓ | ✓ | ✓ | | Item / Group / GroupHeading / Separator | ✓ | ✓ | ✓ | ✓ | | CheckboxItem / CheckboxGroup / RadioGroup / RadioItem | ✓ | ✓ | ✓ | ✓ | | Sub / SubTrigger / SubContent | ✓ | ✓ | ✓ | ✓ | | Cross-menu ArrowLeft/Right (with loop) | ✓ | ✓ | n/a | ✓ | | Auto-open on hover when active | ✓ | ✓ | n/a | ✓ | | Typeahead | ✓ | ✓ | ✓ | ✓ | | Arrow part | ✓ | ✓ | ✓ | ⚠ dropped — menubar idiom anchors to bar edge | Parts shipped (15): Provider, Menu, Trigger, Portal, Content, Item, Group, GroupHeading, Separator, Arrow (re-exported), CheckboxItem, CheckboxGroup, RadioGroup, RadioItem, Sub, SubTrigger, SubContent. The inner 12 (Item onwards) are re-exports of the eidos DropdownMenu wrappers so the menu-indicator partial applies automatically — no recipe duplication. Variant set: only `size: 'sm' | 'md' | 'lg'` (xs would crowd triggers, xl unnecessary for a chrome bar). Size cascades from Menubar root to per-menu Content via a Svelte context (`menubar-context.ts`, `getMenubarSizeContext` / `setMenubarSizeContext`). Cross-layer: eidos Menubar reuses eidos DropdownMenu internals — the recipe doesn't redefine Item/Sub/Checkbox/Radio. Menubar.Content stamps `data-size` AND inherits `data-dropdown-menu-content` (soma's MenubarContent specializes DropdownMenuContent), so dropdown-menu.css paints the panel chrome and our menubar.css only declares the bar surface + trigger states. Workaround note: menubar-content.svelte casts rest props through `Record<string, unknown>` to bypass a TS "union too complex" depth limit triggered by soma's inline-augmented MenuContentProps + HTML attribute union. Runtime types are correct. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
0afcabee8b |
feat(eidos): port LinkPreview (Radix HoverCard equivalent)
#128. Eidos wrapper + types + recipe + canonical-depth demo. Trigger renders as `<a>` (navigational anchor); on hover/focus after `openDelay` (default 700ms) the Content panel reveals with SafePolygon bridging trigger and content so the pointer can travel without dismissing. Non-modal, no-op on touch (link follows directly). Reference parity: | Feature | Radix HoverCard | bits-ui LinkPreview | ark-ui HoverCard | this port | |---|---|---|---|---| | open with bind: | ✓ | ✓ | ✓ | ✓ | | openDelay (700ms) / closeDelay (300ms) | ✓ | ✓ | ✓ | ✓ | | disabled | ✗ | ✓ | ✓ | ✓ | | Trigger as `<a>` | ✓ | ✓ | ✗ (`<button>`) | ✓ | | Portal + Arrow | ✓ | ✓ | ✓ | ✓ | | Floating layer (side/align/offsets/collision) | ✓ | ✓ | ✓ | ✓ | | customAnchor | ✗ | ✓ | ✗ | ✓ | | ContentStatic | ✗ | ✓ | ✗ | ⚠ deferred | | lazyMount | ✗ | ✗ | ✓ | ⚠ deferred | Naming choice: `LinkPreview` (matches air + bits-ui), not `HoverCard`. Trigger semantic is navigational anchor — for a button-triggered hover-card use `<Popover>` with `openDelay` or pass `child` snippet to bypass the default `<a>`. Variant set: only `size: 'xs'..'xl'` (no ControlVariant — LinkPreview is a surface, not actionable). Defer color/intent per the canon rule that surfaces are uncolored. Parts shipped: Provider, Trigger, Portal, Content, Arrow. Recipe: `link-preview.css` with anchor underline (subtle, intensifies on hover/open), content panel chrome (border + surface bg + shadow), arrow fill matching panel bg, slide+fade entrance per `data-side`, reduced-motion skip. Demo: 6 tabs (Live/API/Morfo/Sema/Recipe/A11y) at canonical depth per DEMO_AUTHORING_GUIDE — Live wires every Provider+Content prop with the right chip set, eidos+soma snippets generated, all 6 ARIA contract rows + keyboard + pointer tables in A11y tab. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
0b55be5c36 |
refactor(combobox + search-field): ClearButton/Clear render <Button>
Closes #120. The two icon-only clear affordances now render as eidos `<Button>` via soma's `child` snippet, retiring the per-recipe chrome (border, padding, focus ring, hover, dimensions) in favour of button.css. The X glyph is provided through Button's `icon` snippet slot; `iconOnly` collapses the body and keeps the label sr-only. Both narrow `variant` to ControlVariant (`'surface' | 'outline' | 'ghost'`) per DEMO_AUTHORING_GUIDE §12.7 — same 3-set as DropdownMenu.Trigger and AlertDialog.Cancel. Default `variant='ghost'` (subtle X that reveals chrome on hover) which is the canonical clear affordance. Defaults: - Combobox.ClearButton: ghost · xs · iconOnly · color=neutral - SearchField.ClearTrigger: ghost · sm · iconOnly · color=neutral Per-component CSS gutted to the empty-state visibility rule only — `[data-…][data-empty] [data-…-clear-…] { opacity: 0; pointer-events: none }` stays because hiding the X when there's nothing to clear is component-specific behavior, not Button chrome. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
32598d7cf3 |
fix(alert-dialog): narrow Action.variant to canonical SelectionVariant (3)
Stops the chip-count drift introduced in \`c98510af\`. AlertDialog.Action
was exposing all 6 ButtonVariant chips, breaking the 3-chip rhythm the
rest of UIX follows. Per DEMO_AUTHORING_GUIDE §12.7 every chip-group
must enumerate the full union the type declares — so the fix is to
narrow the *type*, not truncate the chips.
\`AlertDialogActionVariant = Extract<ButtonVariant, SelectionVariant>\`
imports the canonical set from \`eidos/lib/types.ts\` (`solid | outline |
ghost`), which is the right shape for a primary action button:
- keeps 'solid' as the CTA default
- 3-chip parity with Cancel (ControlVariant), DropdownMenu.Trigger
(ControlVariant), and the rest of the form-control surface
- no invented vocab — uses the existing canon set named for exactly
this use case ("selection chips / toggles" semantically maps to
"selection / action buttons")
Demo array drops from 6 to 3 chips; API row updated to reflect the
narrowing.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
c6f063dc6a |
refactor(alert-dialog): Action/Cancel render <Button>; intent flows via snippet
#120 second pass. AlertDialog.Action and AlertDialog.Cancel now render eidos `<Button>` internally via soma's `child` snippet, retiring the per-recipe Toggle-token chrome and the CSS ancestor cascade (`[data-dialog-content][data-color='risk'] [data-alert-dialog-action]`). Intent propagation: soma's `AlertDialogActionProvider` exposes a new `dialogIntent` derived getter that reads `DialogProvider.opts.intent`. The Action component passes it to the `child` snippet alongside `props` (via `WithChildNoChildrenSnippetProps` so plain `children` stays a regular Snippet). The eidos Action wrapper forwards it to Button as `intent={intentOverride ?? dialogIntent}` — so `<AlertDialog intent="risk">` automatically paints a red Action without any cascade selector. Defaults: - Action: variant='solid', intent inherits from dialog - Cancel: variant='outline', intent='neutral', color='neutral' so it reads as gray-outlined regardless of the dialog's intent (canonical "this is the safe choice" cue) Cancel narrows variant to ControlVariant (3 chips: surface/outline/ghost) per DEMO_AUTHORING_GUIDE §12.7. Action keeps the full ButtonVariant because it's the primary call-to-action. alert-dialog.css gutted to a doc-only stub; all chrome now comes from button.css. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
a2709476f4 |
style(menu-indicator): align with Checkbox / RadioGroup visual
Menu CheckboxItem / RadioItem now mirror the standalone Checkbox /
RadioGroup chrome:
- off: outlined box / circle (transparent fill, neutral border)
- on : filled solid accent + white ✓ glyph (checkbox) or white inner
dot (radio) — same shape as `<SvgCheck>` and RadioGroup.Indicator
The check glyph uses `mask-image` with the same `M5 12.5L10 17.5L19 7`
path as `<SvgCheck>` so the menu item reads visually identical to a
standalone `<Checkbox checked>`. Background-color carries the glyph
colour via `--_menu-indicator-glyph` (`--color-content-on-solid`),
matching how Checkbox sets `--_checkbox-palette-text` over the solid
accent fill.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
4b5bd9f35d |
refactor(dropdown-menu): remove unused modal; Trigger→Button; canon vocab fixes
Three related fixes touching the menu surface: 1. **Remove `modal` from DropdownMenu** (#127). The prop was declared in soma but never wired to anything — no overlay, no pointer-events blocker, no scrim. ark-ui / Headless-UI / Chakra all treat menu as non-modal by convention; Dialog/Drawer/AlertDialog cover blocking semantics. Drop it from soma (types, provider opts, component, test fixture), the eidos doc comment, the menubar consumer, and the dropdown-menu demo (state, control, snippet, API table, parity table). 2. **DropdownMenu.Trigger now renders `<Button>` internally** (#120 first consumer). Default variant='surface', size='md', intent='neutral'. `variant` is narrowed to ControlVariant (`'surface' | 'outline' | 'ghost'`) per DEMO_AUTHORING_GUIDE §12.7 so the trigger stays consistent with the form-control surface (Field/Select/Combobox) instead of inheriting Button's wider 6-variant set. The eidos demo exposes variant/size/intent chips that match the canonical narrowed vocab (Intent: neutral · affirm · fulfill · risk · threat · loss). Trigger's per-recipe CSS dropped — chrome comes from button.css. 3. **Menu-item unchecked indicators** (follow-up to #118). CheckboxItem and RadioItem now paint an empty outlined box / circle even when unchecked, so the user can tell at a glance which rows are checkable. Checked state fills with the accent color via the same `::before`. The reserved padding slot (26px) keeps row text from shifting when state flips. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
0e9628b8f0 |
refactor(eidos): extract shared menu-item indicator partial
Unify the four pseudo-element indicator recipes — context-menu and
dropdown-menu × {checkbox-item, radio-item} — into a single partial at
`lib/menu-indicator.css`. The four selectors paint identical geometry
(0.875rem rounded square or circle at the leading inset) so a single
source keeps them in lockstep.
Tokens are exposed as private vars (`--_menu-indicator-{size,radius,
color,inset,mask}`) so a consumer can override per-component without
re-implementing the recipe.
Import order matters: the partial must load AFTER the menu recipes so
its `padding-inline-start: calc(...)` wins over the row rule's
`padding-inline` shorthand at equal specificity. Verified in browser
on both /uix/components/dropdown-menu and /uix/components/context-menu:
checked checkbox-items render 14×14 purple rounded squares, radio-items
render circles, and all rows reserve the same 26px slot so toggling
state doesn't shift text.
Out of scope: Checkbox / RadioGroup / Select.ItemIndicator — those use
`[data-*-indicator]` DOM parts with SVG markers and xs/sm/md/lg/xl size
scales, an architecturally different pattern.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
a804c39208 |
feat(eidos): Button + 9 demo rebuilds + picker recipe polish
Build: - New <Button> compound (morfo + soma + sema + eidos): 6 variants (solid/soft/surface/outline/ghost/plain), 8 colors, 5 sizes, optional icon/endIcon snippets, loading state with built-in Spinner, asChild Slot pattern, intent-driven sema (commit-action with fromProp:intent). Demo rebuilds (canonical depth per DEMO_AUTHORING_GUIDE): - context-menu, dropdown-menu, pin-input, alert-dialog, toggle-group: full per-part Morfo contracts, reference-parity tables, ARIA contract tables, keyboard tables, composition controls. - color-field, time-field, time-picker, time-range-picker, color-picker, month-grid, year-grid: same canonical treatment; per-part data/aria/ keyboard iteration of raw morfo, reference parity vs react-aria/ ark-ui/Chakra/bits-ui/Mantine. Picker recipe polish: - PickerShell.Clear/Cancel/Close refactored to use <Button size="xs"> (affects 5 pickers — date / date-range / time / time-range / color). - TimePicker + TimeRangePicker: popover condensed (min-width 18rem -> 14 / 32 -> 28), per-channel accent (hour=primary, minute=secondary, second=neutral; end variant muted), ruler off by default, hour ruler cleaned to 0/6/12/18/23. - ColorPicker: typography token --_color-picker-trigger-font-size that scales with data-size (10/12/14px); autoFormat default true; Area recipe override for [data-x-channel='hue'] with rainbow gradient + saturation/brightness Y overlays. - ValueText eidos wrapper: fix children snippet bug that suppressed soma's displayValue fallback. - date-field.css: segment editing affordance (cursor + hover + active ring) via new --_date-field-accent-element token across 8 color cascades. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
ec7cdd60b4 |
fix(date-range-field): canonical demo + recipe specificity + DateField overlay
User audit (2026-05-23) caught two real defects in this component:
1. Demo was a 386-line skeleton — switches used the made-up
`data-control-kind="switch"` attribute, props like granularity /
locale / hideTimeZone / per-endpoint readonlySegments were not
wired, API / Morfo / Recipe / A11y tabs were one-sentence stubs.
Canonical reference demos are 700–1200 lines.
2. Recipe rule `[data-date-range-field-input][data-active]
[data-date-field]` matched nothing — soma overlays
`data-date-field-input` on the SAME element as
`data-date-range-field-input` (no nested `[data-date-field]`).
Fixes:
- Eidos `<DateRangeField>` root now overlays
`data-date-field=""` on top of `data-date-range-field`. Lets the
full `date-field.css` cascade (chrome, size, variant, color)
apply inside the range with zero recipe duplication. Documented
in the wrapper comment.
- `date-range-field.css` simplified to layout-only:
[data-date-range-field][data-date-field] (specificity bump
beats date-field's base `display: inline-flex` rule)
grid: 1fr · auto · 1fr × 2 rows
label spans the full first row
separator via `::before` in the middle grid cell
endpoints placed in columns 1 and 3 via `data-endpoint='start' / 'end'`
No recipe duplication; date-field paints input chrome.
- Demo rebuilt to canonical depth (1008 lines, +622):
Live tab: 6 layered subsections (value shape / locale + dir /
flags / per-endpoint readonly segments / eidos chrome /
actions), 11 switches in canonical `<span data-uix-switch>`
style with state-text labels, 9 chip groups (value profile,
kind, granularity, hourCycle, hideTimeZone, locale × 6
locales, dir, size × 5, variant × 3, color × 6), reset /
clear actions, reactive soma + eidos snippets reflecting
every control.
API tab: full prop table per part (Root with 21 props, Label,
Input, Segment), reference parity table vs Bits UI / Ark UI
/ react-aria / Chakra v3.
Morfo tab: header table + parts overview + per-part data /
aria / keyboard tables (driven by raw morfo, cast to a
narrowed shape) + events table.
Sema tab: passive justification + delegation table showing
per-endpoint DateField runtimes.
Recipe tab: selector classification (morfo / eidos) + chrome
attribution.
A11y tab: per-segment keyboard + ARIA contract tables.
- Demo `{#each segments}` keyed by `(i)` (was already fixed, kept).
Lesson registered in
`C:\Users\dev\.claude\projects\G--dev-svelte-vicen\memory\feedback_demos_must_be_canonical_depth.md`
and referenced from `MEMORY.md`: ALWAYS read DEMO_AUTHORING_GUIDE.md
+ a reference demo (date-field 716L, drawer 737L, date-range-picker
1238L) BEFORE writing. Compare against reference libs first.
Verified visually at /uix/components/date-range-field — DOM has
both endpoints side-by-side, em-dash separator in middle column,
date-field chrome applied to each input, canonical control style
across all 6 subsections.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
754754d4a4 |
feat(date-range-field): port from soma to eidos (Tier 2 sprint, 1/3)
Two-endpoint date entry. Mirrors DateField × 2 with shared validation and a single label naming the whole range. Each Input scopes its own DateField context internally, so segments inside re-use the existing date-field recipe automatically. Eidos surface: - variant / color / size — same vocabulary as <DateField>, cascaded via data-* on the root to both endpoint inputs and their segments - Re-uses DateField.Segment (zero duplication) Recipe (date-range-field.css): - Label + control row stack - Em-dash separator rendered via `::before` on the end Input (no manual `<span>—</span>` needed) - Endpoint-aware tint via `data-active` on the holding input Morfo: - scope: ['soma'] → ['soma', 'sema', 'eidos'] - apg URL: Spinbutton (per segment) - Passive at this contract layer (events come from the two endpoint DateField runtimes); README documents the classification Sidebar nav: 'Date range field' added under Forms (next to Date field). Tier 2 sprint progress: 1/3 (date-range-field next: time-range-field, range-calendar). Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
2d8599b62f |
fix(dropdown-menu, context-menu): keep menu open on CheckboxItem / RadioItem activation
Soma's MenuCheckboxItem / MenuRadioItem default `closeOnSelect=true`
(matches Radix Primitives), but for toggle-state items that's the
wrong UX default — the user wants to flip multiple checkboxes or
switch a radio choice without re-opening the menu each time.
Override the default in the eidos wrappers for both DropdownMenu and
ContextMenu (4 components total: CheckboxItem + RadioItem in each).
Activating Item (plain command) still closes by default; only the
state-toggle parts stay open.
Consumers who genuinely want close-on-toggle can pass
`closeOnSelect={true}` explicitly.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
207774714a |
feat(pin-input): port from soma to eidos (Tier 1 sprint, 5/5 — DONE)
Multi-cell OTP / verification code input. Two parts (Provider, Cell) with a snippet-driven cell iteration. Architecture: - A transparent absolutely-positioned <input> captures every keystroke, paste and IME event (soma). - Visible bordered cells follow the hidden input's caret via data-active / data-filled emitted by the morfo. - Single-input approach (shadcn / Bits family) — preserves paste distribution, autocomplete='one-time-code' for SMS autofill on iOS/Android, and IME quality. Eidos surface: - size: 'sm' | 'md' | 'lg' | 'xl' (responsive), cascades cell dimension + glyph size tokens to all cells - Recipe paints square bordered cells with focus ring tracking data-active, subtle bg lift on data-filled, threat-toned border when [data-invalid] cascades from the provider Morfo: - scope: ['soma'] → ['soma', 'sema', 'eidos'] - apg URL added (Textbox pattern — OTP has no formal ARIA pattern) - Passive at the morfo layer (no events array; perceptual feedback via the commit family base when onComplete fires) - README documents the passive classification Comparativa: aligned with shadcn / Bits UI (single hidden input). Ark and Chakra use one input per cell which loses paste / IME quality. Sidebar nav: 'Pin input' added under Forms (next to Tags input). === Sprint Tier 1 — DONE === 1. toggle-group |
5 months ago |
|
|
21eb8a6264 |
feat(context-menu): port from soma to eidos (Tier 1 sprint, 4/5)
14-part compound — DropdownMenu surface minus CheckboxGroup. Same visual recipe vocabulary; the only differences vs DropdownMenu are the trigger surface (a `<span>` wrapping right-clickable content rather than a `<button>` toggle) and cursor-anchored positioning (soma's floating layer handles that). Parts: Provider · Trigger · Content · Arrow · Item · Group · GroupHeading · Separator · CheckboxItem · RadioGroup · RadioItem · Sub · SubTrigger · SubContent. Recipe (context-menu.css): - Panel chrome + item rows identical to dropdown-menu - Trigger gets a subtle `data-state='open'` dashed outline as a "this region summoned the menu" affordance - Recipe duplication over aliasing — each component evolves freely without CSS cascade coupling Sidebar nav: 'Context menu' added under Overlays. Morfo scope: ['soma'] → ['soma', 'sema', 'eidos']. Sprint progress: 4/5 (toggle-group, alert-dialog, dropdown-menu, context-menu). Last is pin-input. Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
4e477e637b |
feat(dropdown-menu): port from soma to eidos (Tier 1 sprint, 3/5)
Full 15-part compound — pass-through wrappers over soma with the canonical visual recipe. Parts: Provider · Trigger · Content · Arrow · Item · Group · GroupHeading · Separator · CheckboxItem · CheckboxGroup · RadioGroup · RadioItem · Sub · SubTrigger · SubContent. API parity with Bits UI (richest reference): CheckboxGroup + RadioGroup binding arrays / scalars, nested Sub-menus, Arrow pointer. Radix Primitives + Ark UI lack CheckboxGroup; Chakra v3 + Radix Themes lack Arrow. Recipe (dropdown-menu.css): - Uniform chrome across Content + SubContent (panel shadow, border, padding, max-height) - Items share one set of tokens (hover/focus highlight, disabled opacity, indicator slot via `::before` for Checkbox/Radio data-state='checked') - SubTrigger gets a chevron via `::after` - GroupHeading: muted uppercase, micro-tracked - Separator: 1px subtle divider - Enter animation on `data-state='open'` No `variant` / `color` / `size` knobs at the eidos layer — menus are themselves the visual variant of "list of actions" within an app. Per-item destructive coloring deferred to next pass (cascade via item's `data-color` attr). Morfo scope: ['soma'] → ['soma', 'sema', 'eidos']. Sound comes from the family bases (`emerge` for open/close, `commit` for select) — no per-component cascade needed. Demo: 6-tab template, items hooked to `lastSelected` tracker, all three groupings demoed (Items / CheckboxGroup / RadioGroup / Sub). Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
d5630a528f |
feat(alert-dialog): port from soma to eidos (Tier 1 sprint, 2/5)
Modal Dialog variant with role=alertdialog, forced modal=true, and click-outside disabled. Soma delegates to the Dialog runtime (variant='alertdialog') so DOM markers are Dialog's (data-dialog-*) — eidos reuses Dialog's recipe for chrome and adds two alert-dialog-specific buttons: Action + Cancel. Eidos shape: - Provider, Content, Action, Cancel — alert-dialog-specific wrappers - Trigger, Overlay, Title, Description, Header, Footer, Portal — re-exported from Dialog's eidos barrel (zero duplication) Recipe (alert-dialog.css): - Only styles Action + Cancel - Buttons consume Toggle palette tokens (same "interactive button" vocabulary used by <Toggle> and <ToggleGroup.Item>) - Auto-color cascade: Action picks up the dialog's data-color so a risk/threat-flagged dialog gets a red/amber Action button without manual recipe code - Cancel stays neutral so the safe-choice contrast is preserved Morfo: - scope: ['soma'] → ['soma', 'sema', 'eidos'] - The morfo declares Action + Cancel parts only (Provider is virtual, other parts inherited via Dialog runtime delegation) - Classified passive at this contract level (Dialog owns the events); README documents this in §"Passive justification" Demo: 6-tab canonical template with intent / size / position chips, soma + eidos snippets, references comparison table vs Radix Primitives / Bits UI / Ark UI / Chakra v3 / Radix Themes / shadcn. Checks: svelte-check 0 errors, component:audit 91/91 PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
61ffbade46 |
feat(toggle-group): port from soma to eidos (Tier 1 sprint, 1/5)
First component in the soma→eidos porting sprint. Two-part compound (Provider + Item), modeled on radio-group's structure. Eidos surface: - variant: 'solid' | 'outline' | 'ghost' — mirrors <Toggle> - color: 7 tones, propagated to items via data-color cascade - size: xs/sm/md/lg/xl (responsive) - attached: boolean — segmented control affordance (shared borders, active item z-indexed above neighbors) - block: boolean — items grow to fill the inline-size - iconOnly: per-item flag — square aspect, sr-only label Items consume the Toggle palette token vocabulary (--toggle-*) so a standalone <Toggle> and a <ToggleGroup.Item> at the same variant × color × size are visually identical — single source of truth for the "toggle button" recipe. Morfo scope fix: ['soma'] → ['soma', 'sema', 'eidos']. Adds apg URL (WAI-ARIA Button pattern) so the audit's A-1.4 rule passes. The commit-toggle event's sound comes from the `commit` family base — no per-component cascade needed. Demo: canonical 6-tab template (Live / API / Morfo / Sema / Recipe / A11y) with every prop exposed as a chip/switch, soma + eidos snippets update live, sema "▶ play" button on the commit-toggle event. Reference comparison vs Radix Primitives / Bits UI / Ark UI / Chakra v3 / Mantine / Radix Themes / shadcn documented in README §Comparativa. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
4324cb489d |
fix(splitter): register sema scope + cascade so handle-pick/drag actually sound
Two missing registrations meant the splitter sema cascade from the
previous commit never reached the engine — handle-pick and handle-drag
were silent, only commit-set sounded (because the `commit` family has
a sound payload baked into its SEMA_MAP base, while `handle` only has
haptic and depends on the cascade for sound).
Fixes:
1. morfo scope: ['soma'] → ['soma', 'sema', 'eidos']. Without 'sema'
the per-component cascade rules in src/uix/sema/components/splitter.ts
are never honored.
2. web/routes/uix/+layout@.svelte: add splitterSema to the
`components: [...]` array passed to defineEngineSemantic. The
sema engine only loads cascade packs it's explicitly given, so
forgetting this line silently drops all splitter cascade rules.
Verified in browser at /uix/components/splitter via Live tab (real
pointer interaction, AudioContext.createOscillator counter):
handle-pick → 2 oscillators (handle.pickup.air, gain 0.10)
handle-drag → 16 oscillators across 8 throttled emits — the
dynamic resolveSplitterDragSound curve is playing
per-frame as expected
commit-set → 2 oscillators (handle.snap.chime, gain 0.14)
Note: the Sema tab's static "▶ play" button still shows 0 oscillators
for handle-drag — same as Slider's demo. By design: that button calls
engine.emit() directly without the per-emit `signal.overrides` that
soma injects during real drag. The dynamic curve IS the payload.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
59505e6da2 |
feat(splitter): sema + dynamic drag-signal sound infrastructure
Splitter previously had no sema bindings — handle-pick / handle-drag /
commit-set fired silently. Closes the asymmetry with Slider and Drawer.
Sema (src/uix/sema/components/splitter.ts):
- handle-pick → sound('handle.pickup.air', gain 0.10) + tick haptic
- handle-drag → channels: ['sound', 'haptic'] (channels-only; per-emit
signal.overrides from soma own the dynamic curve so cascade doesn't
clobber them)
- commit-set → sound('handle.snap.chime', gain 0.14) + tap haptic
Sound resolver (src/uix/sema/sounds.ts):
- resolveSplitterDragSound — heavier sonic register than slider since
splitters move whole panels, not a thumb:
pitch 480..820 Hz (slider: 760..1280)
centroid 2400..4800 (slider: 3600..6800) — less brilliant
roughness 0.006 (slider: 0.003) — woody texture, not metallic
envelope attack 16 / decay 72 / duration 76 — perceptual mass
gain 0.025 + velocity*0.03 — restrained ceiling, long swipes ok
Soma drag-signal infrastructure (splitter-provider.svelte.ts):
- Mirrors slider's frame-throttled signal pipeline:
dragSignalFrame / pendingDragPercent / lastDragSignalAt / lastDragPercent
DRAG_SIGNAL_MS = 72ms throttle (≈14 Hz emit cadence)
- dragSignalOverrides(percent01) computes velocity01 from frame delta,
builds SemaSignatureOverride with sound (via resolveSplitterDragSound)
and haptic (tick scaled by velocity).
- queueHandleDrag / cancelQueuedHandleDrag wrap requestFrame so each
pointermove only schedules one trigger per throttle window.
- onpointerdown calls resetDragSignal(startSizeA/100) to anchor the
velocity baseline at grab time.
- onpointerup / onlostpointercapture / unmount $effect all cancel the
queued frame so we don't fire post-release.
Verified in browser at /uix/components/splitter:
handle-pick → 1 event (family: handle)
handle-drag → frame-throttled across 6 pointermoves
commit-set → 1 event (family: commit, intent: neutral)
Checks: svelte-check 0 errors, 133/133 vitest (splitter + sema),
component:audit 91/91 PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
b504c1c4b7 |
feat(eidos foundation): vertebrate typography via named-style aliases + R-2.7
Single source of truth for typography values that the recipe layer
consumes. The foundation aliases `--font-ui` and `--leading-ui` (read
by ~30 recipe tokens in `lib/recipes/base.ts`) now derive from the
canonical `label` named style instead of carrying duplicate literals:
--style-label-font-family: var(--font-family-primary);
--style-label-line-height: 1.25;
--font-ui: var(--style-label-font-family, var(--font-family-primary));
--leading-ui: var(--style-label-line-height, 1.25);
Chain: typography.ts styles → --style-{name}-* → --leading-ui / --font-ui
→ recipe tokens → component CSS. Editing
`STATIC_TYPOGRAPHY.styles.label.lineHeight` now propagates to every
recipe in one go.
Why not push recipes to consume `--style-{name}-*` directly:
- t-shirt sizes (xs/sm/md/lg/xl) don't map to four semantic buckets
- per-component matices (description/caption/hint) need their own
color / weight / letter-spacing
- ref libraries (Radix Themes, Mantine, MUI, Chakra) all keep
numerical scale for component internals; semantic layer is only for
user-facing typography primitives (`<Text variant="body2">`)
Audit rule R-2.7 (warn): detects literal font-size / font-weight /
line-height / letter-spacing in eidos component CSS. Escape valves:
var(...), numeric identities (0/0px/1), keywords (inherit/initial/
unset), or trailing `/* literal: <reason> */` comment. Current run
flags 6 components with letter-spacing/font-size literals (all
intentional micro-tracking and em-relative; can be annotated case by
case).
Documentation:
- src/uix/eidos/README.md § "Vertebración tipográfica" — two-layer
architecture rationale, alias chain diagram, comparison vs Radix
Themes / Chakra / Mantine / MUI, escape valves
- web/routes/uix/lib/COMPONENT_AUDIT_GUIDE.md § 4.11 — pointer to
R-2.7 + cross-link to the foundation doc
Verified end-to-end in browser at /uix/components/field:
--font-ui → 'Instrument Sans', system-ui, sans-serif
--style-label-font-family → 'Instrument Sans', system-ui, sans-serif
--leading-ui → 1.25
--style-label-line-height → 1.25
computed [data-field-label].line-height → 17.5px (= 14 × 1.25)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
c703e2e7ff |
fix(scroll-area): split mount-vs-visibility — the real type='scroll' / 'hover' bug
Root cause: soma/scroll-area-scrollbar.svelte gated the entire <div> on
`state.shouldShow`. For type='hover' / 'scroll', `shouldShow` starts
false, so the bar never reached the DOM. With no DOM node:
- bind:this never fired → scrollbar's `ref` stayed null
- `requestFrame(cb, ref.current)` ran with a null element, so the
`mounted` flag never flipped
- the hover / drag listeners had no element to attach to
- the recipe's `data-state` opacity transition had no element to
animate
- `shouldShow` could therefore never become true → deadlock
Fix — split the concern:
- `shouldMount` (new derived) — true whenever the axis overflows OR
type='always'. Drives the `{#if}` in the part component.
- `shouldShow` — drives `data-state="visible|hidden"`. The recipe
transitions opacity.
The bar now lives in the DOM whenever it could ever be needed, fades
in/out via CSS, and stays a stable hit target for hover / click /
drag. Dropped the `mounted` flag and the requestFrame mount-frame
scheduling — they only existed to suppress a flash that the opacity
transition handles cleanly.
Also dropped the inline `border-radius: inherit` on the thumb so the
recipe's `--scroll-area-thumb-radius` (the new `radius` prop) wins.
Without this the prop was silently overridden to `0px`.
Test updates:
- removed `cancelFrame` assertion (no mount-frame to cancel)
- added `shouldMount` assertion
Verified in browser at /uix/components/scroll-area:
- type='hover' + vertical: bar mounts hidden, fades in on root hover,
fades out after delay
- type='scroll' + horizontal: bar mounts hidden, fades in on scroll,
thumb tracks scrollLeft, fades out after 600ms
- type='always' + both: both bars + corner visible at all times
- size=lg, radius=full: 12px-wide bar, fully rounded thumb
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
e11d3539ef |
feat(scroll-area): add size/radius/scrollbars props + fix scroll-type race
Reference-library parity (Radix Themes, Chakra v3): - size: 'xs' | 'sm' | 'md' | 'lg' (Chakra t-shirt scale) → thickness via --scroll-area-scrollbar-size. - radius: 'none' | 'sm' | 'md' | 'lg' | 'full' (Radix Themes) → thumb curvature via --scroll-area-thumb-radius. - scrollbars: 'vertical' | 'horizontal' | 'both' (Radix Themes) → recipe-level sugar that auto-mounts Scrollbar / Thumb / Corner from the root. Explicit composition still supported (omit the prop). Bug fix — type='scroll' + horizontal sometimes stuck hidden: - `mounted` on ScrollAreaScrollbarProvider is now $state. Previously a plain field, so the `shouldShow` derived didn't invalidate when the requestFrame mount-flag flipped during the first frame. - The reveal-on-scroll $effect now skips its first run via a `firstRun` flag. That first run was the subscription pass with scrollTop/scrollLeft still 0 — it was eagerly calling show() and setting `visible=true` before `mounted` flipped. Subsequent real scrolls then assigned visible=true again (no-op), so shouldShow didn't re-run and the bar stayed hidden until the hide timer expired. Now the bar only reveals on genuine scroll deltas. Demo: chip controls for size + radius, switched to scrollbars prop on the root (drops the explicit Scrollbar/Thumb children), eidos snippet shows the recipe-sugar form, soma snippet still shows the explicit Radix-style composition. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
560ce8f66c |
fix(scroll-area, drawer): horizontal scrollbar visibility + drawer drag affordance
- scroll-area soma: defer the mount-frame request to `$effect` so SSR doesn't hit `dom::window_required` during constructor evaluation. - scroll-area recipe: scrollbars now `position: absolute` (overlay style) so the horizontal track lands at the viewport's block-end instead of flowing below it. `:has` rules reserve corresponding edges when both axes mount; corner switched to absolute as well. - drawer demo: drop the ↑↓←→ glyph pop-outs and `overflow: visible` during dragging. The handle's own pill grip is the affordance — the same shape the splitter uses, no extra chrome. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
bd2e40366a |
feat(layout): Layout Batch 3 — scroll-area, separator, splitter + splitter sema rewire
3 new layout primitives close the air port set (15 / 15 done).
`npm run component:audit`: 91 / 91 PASS, all 3 new PASS with 0 errors.
**scroll-area** — eidos compound wrapper over the existing soma:
`<ScrollArea><ScrollArea.Viewport>{content}</ScrollArea.Viewport>
<ScrollArea.Scrollbar orientation="vertical"><ScrollArea.Thumb />
</ScrollArea.Scrollbar><ScrollArea.Corner /></ScrollArea>`. Mirrors
Radix Primitives / Bits UI shape. Demo 667 lines.
**separator** — visual primitive (`scope: ['eidos']`) with conditional
ARIA: `role="separator"` + `aria-orientation` when not decorative,
`aria-hidden="true"` when decorative. New morfo
`src/uix/morfo/components/separator.ts`. Demo 645 lines.
**splitter** — eidos compound over existing soma:
`<Splitter orientation="horizontal"><Splitter.Panel>{a}</Splitter.Panel>
<Splitter.ResizeTrigger /><Splitter.Panel>{b}</Splitter.Panel>
</Splitter>`. Demo 824 lines.
**Splitter sema rewire — match Slider's handle/drag/commit shape:**
The morfo previously declared only `commit-resize`. Direct-manipulation
primitives (Slider, Splitter) should share the same event vocabulary so
audio/haptic projections feel coherent across the family. Renamed +
expanded to mirror Slider:
- `handle-pick` (family: handle, verb: pick, sequence: coincident,
target: resize-trigger) — fires on pointerdown when user grabs the
trigger.
- `handle-drag` (family: handle, verb: drag, sequence: coincident,
target: resize-trigger) — fires on each pointermove frame.
- `commit-set` (family: commit, verb: set, intent: neutral,
sequence: post, target: provider) — fires on pointerup. The runtime
`commit-set` handler is wired to call the consumer's `onResizeEnd`
callback, so sema and JS callback land at the same moment (parity
with Slider's `onValueCommit`).
Soma provider triggers these via `this.runtime.trigger(name)` in
`onpointerdown` / `onpointermove` / `notifyResizeEnd` (the latter
unchanged externally — internally now routes through the runtime
trigger).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
a08a0a9890 |
fix(aspect-ratio): fill inline axis by default + panel demo uses solid colors
Two bugs surfaced when verifying the panel demo visually: 1. **AspectRatio shrunk to content width inside grid/flex containers.** Grid items default to `width: max-content`, so AspectRatio without an explicit width was sizing itself to its child's intrinsic content instead of filling the slot. The ratio still applied but against the collapsed width, producing a tiny box. Fix: recipe sets `inline-size: var(--box-width, 100%)` so the default is "fill the slot". `width=…` from Box still wins; `maxWidth=…` constrains the upper bound exactly as before. Block-level containers are unaffected (100% of the line box matches their natural width). 2. **Panel demo gradient invisible in dark mode.** The demo used `--color-primary-track` + `--color-affirm-track` which are surface tokens (near-black in dark theme). Swapped to `*-solid` tokens with `--color-content-on-solid` text for high contrast in both themes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
d421f1fb5d |
feat(typography): 8 primitives — Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link
Full canon for the rest of the typography family, following Text
(commit `03531709`) as template. Each primitive ships morfo (passive,
scope eidos, 0 events) + full eidos set (svelte/css/types/index +
README with required sections) + canon 6-tab demo (≥400 lines each).
**Heading** — semantic h1..h6 via `level` prop, visual style decoupled
via `style` prop (defaults to match level but `<Heading level={3}
style="h1">` allowed). Demo 594 lines.
**Display** — always-h1 page-title primitive. Always uses
`style="hero"`. Tracking via literal em values until foundation emits
hero-scale tracking tokens. Demo 546 lines.
**Code** — inline code via `<code>`. `variant: 'plain' | 'soft' |
'outline'` for subtle background chrome. Demo 423 lines.
**CodeBlock** — multi-line `<pre><code>` with optional title +
copy button (button utility, NOT a sema verb — kept out of morfo per
2-of-3 rule). Demo 402 lines.
**Kbd** — keyboard shortcut chrome over `style="code"`. Demo 418 lines.
**Mark** — text highlight via `<mark>`. Palette uses canonical
`ColorRole` intents (default `fulfill` ≈ legacy yellow). Demo 402 lines.
**Highlight** — substring highlighter inside Text. Scans children for
`query` and wraps matches. Same intent palette as Mark. Demo 407 lines.
**Link** — text link via `<a>`. `variant: 'default' | 'subtle' |
'plain'` for underline style, `intent: ColorRole` for color. Passive
on the morfo — hover/active is CSS-only, navigation belongs to the
consumer (router). Demo 448 lines.
**Architectural deviations from air documented per README's
Decisiones section:**
- Heading: semantic level vs visual style decoupling
- Code split into inline `<Code>` + block `<CodeBlock>` (was one
component with `variant='block'` in air)
- Mark/Highlight palette swapped from literal hue names to canonical
ColorRole intents (theme contract)
- Link palette opened to full ColorRole; `quiet`/`emphasized` air
variants dropped in favour of composable patterns
`npm run component:audit`: **90 / 90 PASS**, 0 NEEDS-WORK.
svelte-check: 0 errors, 0 new warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
0353170982 |
feat(typography): Text — POC consuming new --style-* foundation tokens
First typography primitive consuming the named-style tokens added in
`015bd761`. Sets the canon for the remaining typography ports
(Heading, Display, Code, CodeBlock, Kbd, Mark, Highlight, Link).
API:
- `style: 'body' | 'prose' | 'label' | 'caption'` (default `body`).
Selects which `--style-{name}-*` token set the recipe consumes.
- Per-axis overrides via `size`, `family`, `weight`, `color`, `align`.
Each writes a local `--_text-{axis}` CSS variable that wins over
the named style's default via the cascade.
- `italic`, `underline` shorthand booleans.
- `truncate` (single-line ellipsis) + `clamp={N}` (multi-line via
CSS `-webkit-line-clamp`).
- `as` prop switches the tag (default `'span'` — inline composable).
- `tagStyle` escape hatch for one-off inline CSS that the prop
surface doesn't cover (separate from the `style` named-style prop).
Architectural choices documented in README:
- Sizes map to eidos `xxs..xxxl` (not air's `1..12`).
- Families use the eidos slot names (`primary/secondary/mono/display`)
not air's domain aliases (`ui/prose/code`) — coherence with the
foundation contract.
- Colors are restricted to the content-role slots
(`--color-content-*`) to preserve contrast guarantees. Free colors
via `tagStyle`.
- Canvas line-count measurement (air's `text` + bindable `lineCount`)
deferred; CSS line-clamp covers the visual-truncate use case.
Sidebar nav gains a `Typography` group with Text as its first entry.
`npm run component:audit`: 82 / 82 PASS, 0 NEEDS-WORK. svelte-check 0
errors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
015bd761bd |
feat(eidos foundation): emit --style-{name}-* tokens for named typography styles
`STATIC_TYPOGRAPHY.styles` already defined 11 named typography styles
(hero, h1..h6, body, prose, label, caption, code) but the renderer
only emitted families / sizes / weights — the style entries lived
as data with no CSS reflection.
Extend `appendTypographyDeclarations` so each named style emits:
- `--style-{name}-font-family` → `var(--font-family-{family})`
- `--style-{name}-font-size` → `var(--font-size-{size})`
- `--style-{name}-line-height` → literal or `var(--font-line-height-{size})`
- `--style-{name}-letter-spacing` → literal or `var(--font-letter-spacing-{size})`
- `--style-{name}-font-weight` → `var(--font-weight-{weight})` (or numeric)
- `--style-{name}-color` → `var(--color-{dot.path → dash-path})`
Responsive sizes (e.g. `hero.size = { base: 'xxl', md: 'xxxl' }`)
emit the base value into `:root` and per-breakpoint
`@media (min-width: …)` blocks that override the same variables.
Breakpoint thresholds match `$libs/dom/responsive` (sm: 480, md: 768,
lg: 1024, xl: 1280, xxl: 1536).
`renderStaticCss` now iterates `STYLE_BREAKPOINT_ORDER` after the
main `:root` block and appends one media-query block per breakpoint
that has at least one responsive override. The `indentBlock` helper
preserves indentation inside the wrapper.
`base.css` regenerated. svelte-check 0 errors, `npm run component:audit`
81 / 81 PASS unchanged. This is foundation-only; no components consume
the new tokens yet — that lands in the typography port (Text + Heading
+ Display + Code + CodeBlock + Kbd + Mark + Highlight + Link).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
376f9e33eb |
feat(layout): Layout Batch 2 — aspect-ratio, auto-grid, banner, float
4 new layout primitives, full canon (morfo + eidos full set + canon
demo + README). `npm run component:audit`: 81 / 81 PASS, 0 NEEDS-WORK.
**AspectRatio** — composes through Box; emits single `--aspect-ratio`
CSS var (uses modern CSS `aspect-ratio` property, drops legacy
padding-bottom hack). Accepts numeric (16/9 → 1.777…) or string
("16/9") values.
**AutoGrid** — composes through Grid. Resolves `templateColumns` from
`minItemWidth` to `repeat(auto-fill, minmax(MIN, 1fr))` in JS so the
recipe stays declarative. Uses `auto-fill` (not auto-fit) to preserve
empty tracks when item count is low.
**Banner** — `<header role="banner">` announcement strip with intent
(full 8-role UIX `ColorRole`), variant (`ChipVariant` soft/solid/
outline/ghost), size (sm/md/lg). Dismissal is composition-driven:
consumer wraps in {#if show} and adds `<Banner.Close>`. No
`dismissible` boolean.
**Float** — CSS `float` primitive with logical `inline-start` /
`inline-end` sides. Redefined from air's 9-zone overlay primitive
(which becomes a future `<Positioned>` component if real demand
surfaces). Useful for inline images / pull-quotes / drop caps.
Each component ships morfo (`scope: ['eidos']`, 1 part, 0 events,
justified) + eidos set + README (Baseline / Comparativa /
Decisiones / Eventos Sema / Gaps with disposition markers /
Referencias / Passive justification) + canon demo with 6 tabs.
Sidebar nav appends the 4 entries to the existing Layout group.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
265a3946b5 |
feat(layout): plug Batch 1 gaps — Flex.alignContent + Grid.columns/rows/inline/alignContent
Addresses the "should" features documented as gaps in the layout
READMEs from `fdb0e680`. Audit script still reports 77 / 77 PASS,
svelte-check 0 errors.
**Flex**
- `alignContent` prop (multi-line cross-axis alignment). Maps to
`--flex-align-content`; defaults to `normal` in the recipe so it
has no effect when wrap is off. Closes the Radix / Chakra parity
gap.
**Grid**
- `inline` boolean — renders as `display: inline-grid` (paridad con
Flex.inline).
- `columns` / `rows` numeric shorthands — Radix Themes pattern.
Internally resolved to `repeat(N, minmax(0, 1fr))`. `templateColumns`
/ `templateRows` string still wins if both are passed.
- `alignContent` prop — same shape as Flex.
**Shared**
- New `LayoutAlignContent` type added to `_layout/shared.ts`
(covers start, end, center, stretch, space-between, space-around,
space-evenly, flex-start, flex-end, normal, baseline).
**Group**
- Verified `grow` boolean already implemented in `0ec2a57a` /
`591b0885` — no change needed; the README now correctly reflects it.
**Docs**
- Flex + Grid READMEs updated: comparison tables mark previously
missing features as Sí; Gaps section marks them ✅ implementado.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
ec66999b6c |
docs+style: close last 3 NEEDS-WORK → 77/77 PASS audit
`npm run component:audit` now reports 77 / 77 PASS, 0 NEEDS-WORK, 0 BROKEN. **month-grid + year-grid READMEs** Add Baseline / Comparativa / Decisiones / Gaps sections (F-1.1 / F-1.2 / F-1.3 / F-1.4). Both grids are standalone primitives extracted from DatePicker's `kind: 'month' | 'year'` views (task `#70`); they have no air counterpart. Documented Sema event design (single `commit-set` for value mutation, `nav-step` for paginated header navigation), the 4×3 grid choice, configurable `decadeSize` for YearGrid, and known gaps (multi-year range, quick-jump, localized month names — all deferred). **Audit script `focusMoveActions` extension** `A-3.7` was firing on month-grid/year-grid because the script didn't recognise `next-row`, `prev-row`, `first-month`, `last-month`, `first-year`, `last-year`, `next-page`, `prev-page` as focus moves. They ARE focus moves inside their respective grids (same semantic as `next-day` / `first-day-of-week` inside Calendar). Added to the focusMoveActions set in `scripts/component-audit.ts` so the event-vs-keyboard ratio heuristic no longer over-counts. **time-range-picker** - README Gaps section rewritten as a table with explicit disposition markers (`implementar` / `diferir` / `descartar`) per F-1.4. - Recipe `time-range-picker.css` now styles `[data-readonly]` (lower opacity + pointer-events: none on trigger/clear) and `[data-invalid]` (threat-colour border + focus ring) — closes R-1.3 / R-1.4. Both attrs were declared in morfo but unstyled. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
fdb0e68028 |
docs(layout): READMEs for 8 layout primitives (audit PASS)
Closes `E-2.3` audit error for the 8 Layout Batch 1 primitives. Each README follows the canonical structure required by the `component-audit` script: - Baseline — origin (air branch), adaptations applied (drop air- prefix, rename --air-space-N → --space-N, ActiveEidos.resolve) - Superficie — minimal usage snippet - Comparativa — feature parity table vs Radix Themes / Chakra UI / Mantine, with explicit "No — gap conocido" markers for missing features - Decisiones — architectural rationale (Radix item/container split, composition over inheritance, etc.) - Eventos Sema — 0-event justification - Gaps — known feature gaps with disposition markers (implementar / diferir / descartar) and reference attribution - Referencias — links to canonical reference docs - Passive justification — why scope is `eidos` only Notable gaps documented for backlog: - Flex.alignContent (Radix/Chakra) - Grid.columns/rows numeric shorthand (Radix) - Grid.inline boolean (parity with Flex) - Grid.alignContent (Radix/Chakra) - Stack.divider slot (Chakra) - Stack/Flex HStack/VStack helpers (Chakra ergonomics) - Group.grow boolean (Mantine — children fill equally) - Group.preventGrowOverflow (Mantine) - Wrap.shouldWrapChildren (Chakra) - Section.as prop for semantic <section> render `npm run component:audit`: 77 components, 74 PASS, 3 NEEDS-WORK (month-grid, year-grid, time-range-picker — pre-existing, unrelated to layout work). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
591b08853a |
feat(layout): canon demos + morfos for the remaining 6 primitives
Replicates the box / flex canonical pattern across grid, stack, group,
wrap, container and section. Each gets:
- `src/uix/morfo/components/{name}.ts` — scope `eidos`, single Provider
part, no events. Header comment justifies the 0-event surface as a
passive container composing through Box / Flex.
- Rewritten demo following DEMO_AUTHORING_GUIDE: 6 tabs (Live · API ·
Morfo · Sema · Recipe · A11y), `Layout · {Name}` eyebrow, 4 meta
pills, permanent stage between header and tablist, trace strip,
MutationObserver wired to data-event, reactive soma + eidos snippets,
API tables grouped by concern, reference comparison vs radix-themes
/ chakra-ui / mantine.
Cross-references in every lede + API tab:
- Grid → Box (item placement) + Flex (flex containers)
- Stack → Flex (full API) + Group (row cluster)
- Group → Stack / Wrap / Flex
- Wrap → Flex (`wrap="wrap"`) + Group (nowrap)
- Container → Box (arbitrary maxWidth) + Section (block padding)
- Section → Box (non-semantic padding) + Container (max-width)
Demo sizes: grid 479L, stack 426L, group 458L, wrap 460L, container
415L, section 386L (vs 80-95L before — matches drawer/avatar canon
mass).
svelte-check: 0 errors, 0 new warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
0dc9c523d1 |
feat(layout): canon Flex demo + morfo (mirrors Box pattern)
Second POC for redoing Layout Batch 1 demos. Mirrors `box`'s canonical shape adapted for a flex container: - 7 container-side controls (direction, align, justify, wrap, gap, padding, inline) — chips for unions, number for space tokens, switch for the boolean. - API tab separates "Container props (Flex-only)" from "Inherited from Box" with a forward-link. - Cross-references: lede + API call out that item-side props (alignSelf, gridColumn, …) live on the child `<Box>`, and that Stack / Group are direction-specific helpers. - Reference comparison row reflects the Radix Themes split (item vs container) and notes Chakra's `HStack`/`VStack` map to UIX `Stack`. Adds `src/uix/morfo/components/flex.ts` (scope `eidos`, 1 part, 0 events, mirrors box.ts justification). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
66c6897c61 |
feat(layout): canon Box demo + relocate grid item placement props to Box
POC for redoing Layout Batch 1 demos to follow DEMO_AUTHORING_GUIDE. Box becomes the reference template for the remaining 7 primitives. Demo follows the canon shape: - Header with eyebrow + 4 meta pills (parts, events, props, scope). - Stage permanently rendered with 3 nested boxes + trace strip showing live display/padding/gap state. - 6 tabs in canonical order (Live · API · Morfo · Sema · Recipe · A11y). - Live tab: 7 controls + reactive soma/eidos snippets. - API tab: 6 subsections grouped by concern (sizing / spacing / display+position / flex/grid item / escape hatch / reference comparison vs radix-themes / chakra / mantine). - Morfo / Sema / Recipe / A11y tabs each populated with the contract appropriate to a passive eidos-native primitive. Architectural fixes (heredados de air, ahora correctos): - `gridColumn`, `gridRow`, `gridArea` move from `<Grid>` to `<Box>` — these are item placement props, they belong on the CHILD that declares its slot, not the container. - Add `placeSelf` to Box (grid item shorthand for align-self + justify-self). - Grid recipe + props updated accordingly; comment clarifies that item placement lives on Box. Add `src/uix/morfo/components/box.ts` (scope `eidos`, 1 part, 0 events with justification comment). Box demo updated lede to point at Flex / Grid for container-side props (Radix Themes split, not Chakra everything-on-Box). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
9ec2a57a85 |
feat(eidos): port 8 layout primitives from air (box, flex, grid, stack, group, wrap, container, section)
Visual-only primitives translated from the legacy `air/components/layout`
on the morfo-runtime branch. Architectural adjustments for the eidos
target: drop the `air-` class prefix, target `[data-{name}]` directly,
rename CSS vars to `--{name}-*`, replace `var(--air-space-N)` with the
eidos foundation `var(--space-N)` token, resolve responsive props via
`ActiveEidos.resolve(prop)`.
- `box` — universal box-model utility (size, padding, margin, gap,
position, overflow, flex/grid item props). Every prop maps to a
CSS custom property; unset props fall through via `revert-layer`.
- `flex` / `grid` / `stack` / `group` / `wrap` — layout containers
that render through Box (single `<div>` per primitive, no
semantic-tag prop in this batch). Markers stack as
`[data-box][data-{name}]`.
- `container` — max-width centered (sm/md/lg/xl/full).
- `section` — semantic-padding block with background tone variants.
Shared helpers at `_layout/shared.ts` (formatLayoutSpace /
formatLayoutLength / formatLayoutRaw / pushStyleVar / composeStyle)
plus an optional `Layout.*` namespace barrel for consumers who prefer
that style; the individual `import { Box }` from each component dir
also works.
Each primitive ships a demo at `/uix/components/{name}/` with a live
example, a props table, and a reference comparison row (radix-themes /
chakra-ui / mantine).
svelte-check: 0 errors / 0 new warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
20709caf9c |
refactor(combobox): SelectedTags as band above the Control (Chakra pattern)
Switched the multi-mode chips from MUI-style "inline inside the input" to the Chakra v3 multi-select pattern — chips render as a separated band ABOVE the Control. Two wins: - The dropdown popover (opens downward) never covers the selected chips, which sit comfortably above the input. - The Control stays a normal-height single-line input. No layout shifts, no absolute-positioned affordances, no `display: contents` gymnastics, no input flex tuning. Reverts the inside-the-Control CSS gymnastics from `30e9517a` / `64bbe9b1` / `87e3d68f` (flex-wrap, padding-right reservation, absolute clear+trigger, input flex basis). `<Combobox.SelectedTags>` now renders as a plain `flex-wrap` row with chip gap and a margin- block-end separating it from the Control. Demo composes `<Combobox.SelectedTags />` BEFORE `<Combobox.Control>` when `mode === 'multiple'`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
91b0efc461 |
fix(combobox): inline chips + input flow as siblings via display:contents
`<Combobox.SelectedTags>` was a nested flex container so the input always wrapped to its own row below the entire chip block — wasting the empty space on the last chip row. Use `display: contents` so each chip becomes a direct flex child of `<Combobox.Control>`. Chips + input now share the same wrap context: the input flows on the same row as the last chip when there's room. `[data-empty]` still toggles to `display: none` so empty-state still collapses correctly (and the `:has(...:not([data-empty]))` selector that pins clear/trigger absolutely keeps working). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
87e3d68f86 |
fix(combobox): pin clear+trigger to first row, not vertical center
With many chips wrapping into 3+ rows, the previous `top: 50%` + translateY centered the clear/trigger pair at the midpoint of the whole stack — visually below the first row of chips. Pin to `top: var(--space-1)` instead so they sit flush with the first chip row no matter how many additional rows of chips wrap below. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
64bbe9b158 |
fix(combobox): pin clear+trigger absolute when chips present (MUI pattern)
When `<Combobox.SelectedTags>` has at least one chip, anchor the ClearButton + Trigger absolutely at the right edge of the Control (MUI Autocomplete pattern). Chips + input can now wrap freely without ever pushing the right-side affordances to a new row. `--_combobox-affordances-w` reserves the right-padding the absolutely-positioned buttons consume, scaled to the control's current height token. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
30e9517a9a |
feat(combobox): SelectedTags inline chips for multi mode
New parts `<Combobox.SelectedTags>`, `<Combobox.SelectedTag>` and `<Combobox.SelectedTagRemove>` render the current selection as removable chips inside `<Combobox.Control>` when `type='multiple'` (Material UI Autocomplete pattern): - Morfo: 3 new public parts with kebab names + texts entries. - Langs: es/en entries `selected-tags` / `selected-tag-remove`. - Soma: `ComboboxSelectedTagsProvider` exposes `items` derived from the provider's label registry; `ComboboxSelectedTagProvider` surfaces `data-value` / `data-label`; `ComboboxSelectedTagRemoveProvider` resolves its parent tag via context and calls `provider.removeValue` on click. Provider gains `getSelectedItems()` and `removeValue()` helpers; `selectedTagsEmpty` runtime prop drives `[data-empty]`. - Soma item registry: stop unregistering labels on Item cleanup so chips keep proper labels after the listbox closes/lazy-unmounts. - Eidos: default snippet loops items and renders a chip + X icon per entry; consumer can override the snippet for custom rendering. - CSS: chip styling, wrap-friendly Control with breathing padding when chips are present, ClearButton pinned right via auto margin, input flex basis reduced to 4rem so it shares a row with chips. - Demo: renders `<Combobox.SelectedTags />` inside Control when `mode === 'multiple'`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
82349f15b4 |
feat(search-field): floating results popover in demo + hide native clear
- Demo `/uix/components/search-field` wraps the SearchField in `<Popover.Anchor>`; results render in `<Popover.Content>` (intrinsic width, align="start") wrapped in `<PickerShell.Body>` so the panel inherits the canonical picker chrome. Items are real `<button>`s with `onclick` — committing a selection sets `value`, closes the popover, and restores focus to the input. - Forward `bind:ref` through the eidos `<SearchField.Input>` wrapper so consumers can refocus the input from the demo's pick handler. - Hide the browser's native `::-webkit-search-cancel-button` / `::-webkit-search-decoration` / `::-ms-clear` so only the canonical `<SearchField.ClearTrigger>` X is visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
afb09c2254 |
feat(picker-shell): extend to Root + Header + Body + Footer layout
Promote PickerShell from action-row-only to a canonical 4-zone shell (Root → Header / Body / Footer) shared by every composite picker so date/time/color popovers get the same visual contract for free. - Add `<PickerShell.Root>` flex-column wrapper (emits data-picker-shell, data-mode) plus `<PickerShell.Header>` and `<PickerShell.Body>` zones matching the existing Footer's spacing + border tokens. - Auto-wrap all 5 *-content.svelte popovers (date / date-range / time / time-range / color) in `<PickerShell.Root>` so consumers only compose Body + Footer. - Refresh all 5 demos to use `<PickerShell.Body>` around picker content; date-picker demo gains a `showShellHeader` toggle showcasing the new Header zone. - CSS scales section gap + header spacing across xs/sm/md/lg picker sizes via [data-popover-content][data-picker-size] scopes, in sync with the existing Footer scale. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
da10548a68 |
revert(popover): drop auto-anchor min-width default; keep content-driven sizing
Yesterday's checkpoint normalized popover min-width to the floating anchor
width across all components, then re-anchored pickers to their input
wrapper so the rule would line popover ≥ input. Tested at /uix/components/
date-picker the result was a popover stretched to 458 px (input width)
while the calendar inside is only ~268 px — leaving an empty band to the
right of every row.
After re-checking the industry research:
- Radix / shadcn / React Aria popovers default to INTRINSIC content width
and expose `--*-trigger-width` as opt-in.
- Ark UI only auto-matches via `positioning.sameWidth` (opt-in).
- bits-ui Select is the only one that bakes width matching by default.
Conclusion: forcing min-width = anchor-width across all popovers is wrong;
each picker's content has its own intrinsic width that should drive the
popover. Reverting the normalization to the previous (Radix-style)
content-driven default. The Select + Combobox `matchAnchorWidth = true`
default is preserved (those are listbox-style popovers where the trigger
width is a sensible reference) and the sideOffset=6 normalization stays.
Files reverted:
- src/uix/eidos/components/popover/popover.css: removed
`--_popover-min-width: var(--floating-anchor-width)` default.
- src/uix/eidos/components/date-picker/date-picker-content.svelte:
restored `--_popover-content-min-width-override: max-content` default
and dropped the `customAnchor={picker.inputRef.current}` wiring.
- src/uix/eidos/components/date-picker/date-picker.css: restored
`min-inline-size: max-content` on the calendar/grid popover rules.
- src/uix/soma/components/date-picker/date-picker-provider.svelte.ts:
removed `inputRef` + `setInputRef`.
- Removed src/uix/{soma,eidos}/components/date-picker/date-picker-input.svelte.
- src/uix/{soma,eidos}/components/date-picker/{exports,index}: revert
`Input` to the DateField re-export.
Kept from yesterday:
- sideOffset = 6 default in popover-content + 5 pickers (genuine
normalization, no width tension).
- Select/Combobox matchAnchorWidth = true (listbox convention).
- floating.svelte.ts `opts.style.current` bug fix (was preventing
any consumer style from reaching the popover wrapper).
- Combobox single-mode auto-sync of inputValue to selected label.
Verified at /uix/components/date-picker: popover renders at 268 px
(calendar content width), aligned end of the 458 px input — matches the
Radix-style behaviour we now consider canonical.
svelte-check --threshold error → 0 errors / 0 warnings / 4584 files.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
79c94d85d5 |
wip(popover): unified min-width = anchor + sideOffset 6 across pickers
Day-end checkpoint for the floating-layer normalization work. Documented in CONTINUE.md. Done: - popover.css: new `--_popover-min-width` defaults to `var(--floating-anchor-width, auto)` so popover layer is NEVER narrower than its anchor (Radix / React Aria convention). Consumers that should opt out (tooltip, dialog) override with `auto`. - soma popover-content default sideOffset 0 → 6. - 5 picker eidos contents: sideOffset 10 → 6 (matches the new default; per-component override removed visually but kept as explicit prop). - combobox provider: reverted the multi-on-close stamp-labels patch. Multi-mode selections will be rendered as inline tags via a future `Combobox.SelectedTags` part (Material UI Autocomplete pattern, decided with user). Pending (see CONTINUE.md): - Re-anchor pickers to their Input wrapper (currently anchored to the chevron trigger ~14px). Required for the min-width normalization to actually show — research vs Ark UI / Radix / React Aria confirmed composite-input pickers anchor to the control wrapper, not the trigger button. - Combobox `SelectedTags` part for multi-mode inline tags. - SearchField floating Results part (user opted to make it Combobox-like rather than reuse Combobox). svelte-check --threshold error → 0 errors / 0 warnings / 4584 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
df948aa35a |
fix(combobox): input mirrors selected label in single mode; multi preserves filter
Two related bugs reported in the demo: 1. After selecting an item in single mode, the input stayed at the previously typed query (or empty), so the user couldn't tell which value was committed unless they peeked at the Trigger area. 2. In multi mode, selecting an item used to clear the input, which destroyed any active filter. cmdk-style usage (filter → pick → filter → pick) was impossible — the user had to retype the query for every selection. Provider behaviour now: - `selectItem()` in SINGLE mode sets `inputValue` to the selected label (resolved via the existing `labelRegistry`). - `selectItem()` in MULTI mode leaves `inputValue` untouched, so the filter survives the click and the user can keep picking matches. - A new $effect keeps `inputValue` in sync with `value` in SINGLE mode for initial mount and external `bind:value` updates. - A second $effect clears `inputValue` whenever the picker switches between 'single' and 'multiple' — the two modes use the input for different purposes, and stale text from one would silently filter the other. Also: - Added `components.combobox.clear` to the langs dictionary so the ClearButton stops emitting `[langs] Translation key not found` warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
9fbf8e48b5 |
feat(number-field, search-field, combobox): audit-driven improvements
Three components closing the 6-component audit batch.
number-field
- N1 RTL scrubber: invert horizontal delta sign when dir='rtl' so
dragging right decrements (visually backward) in RTL layouts. Vertical
unaffected. Added 2 RTL scrub tests; existing scrub test pinned to ltr.
- N2 stepper height: Increment/Decrement now use --_number-field-height
for inline-size/block-size/min-inline-size so they always match the
input row at every size token (xs/sm/md/lg/xl).
- N3 input focus ring: explicit [data-number-field-input]:focus-visible
with --_number-field-accent-border box-shadow, alongside the existing
Provider-level ring.
search-field
- S1 icon tokens: added --search-field-icon-size-{xs..xl} + icon-color +
icon-margin-inline-end + a Morfo Icon part + soma/eidos wrappers.
Demo uses <SearchField.Icon><Search /></SearchField.Icon>.
- S2 debounceMs prop: soma wraps onValueChange in a timers.schedule with
the provided delay. clear() cancels, submit() flushes synchronously.
- S3 loading slot: new LoadingIndicator part (morfo + soma + eidos) +
data-loading on Provider + CSS spinner via @keyframes search-field-spin
honoring prefers-reduced-motion.
combobox
- C1 ClearButton part: new morfo trigger + soma provider + eidos wrapper
with X icon. Hidden via [data-empty] (opacity + pointer-events:none).
Click clears value + inputValue and refocuses input.
- C2 allowsCustomValue: when true and no highlighted item, Enter commits
the current inputValue as the value. Single mode closes after commit;
multi appends + clears input + stays open.
- C4 Backspace removes last tag in multi mode when input is empty.
- C5 Sticky group headers: CSS position:sticky with content-overlay bg.
Plus: fixed search-field demo's brittle parts[1] index reference to a
named lookup (parts.find(p => p.kebab === 'input')).
Verified: svelte-check --threshold error → 0 errors / 0 warnings /
4584 files. All component tests pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
7bc17485dc |
feat(editable): invalid + required + form + Control + better hover/disabled + defaultValue
Audit-driven improvements (7 items) to Editable:
- E1 invalid + required props
- morfo: Provider gains data-required/data-invalid + aria-required/aria-invalid;
Input emits data-invalid + aria-invalid.
- soma: opts include `invalid` and `required`; runtime registration + provider
props derivation emits the data-attrs.
- eidos css: risk-border on Input + Control when [data-invalid].
- E2 APG: added `apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/textbox/'` to
morfo — Editable is essentially a textbox swap.
- E3 form integration: new HiddenInput part (morfo + soma + eidos). The Provider
wrapper auto-renders `<EditableHiddenInput>` when `name` is set, so consumers
don't have to compose it manually. Submits value as native form data.
- E4 Control re-export: Eidos namespace now exposes `Editable.Control`,
matching the soma surface.
- E7 submit hover: replaced `filter: brightness(1.04)` with
`--_editable-accent-solid-hover` per color variant. Consistent with the
other triggers' bg+border transition pattern.
- E9 disabled state: added `cursor: not-allowed` + `color: content-disabled`
on Preview/Input/triggers, alongside the existing opacity. Clearer
feedback than opacity alone.
- E10 defaultValue: new prop seeds `value` once via untrack when `value`
is uncontrolled. Same pattern as the recent select.defaultValue.
Demo at /uix/components/editable: switches for invalid/required/disabled,
a Form integration section with native form submit + FormData panel,
and a defaultValue uncontrolled example.
Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4578
files. Soma tests: 3/3 pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
75136e6de5 |
fix(select) + feat(field): match-anchor width, label persistence, OptionalIndicator, auto-label
select bugs
- The popover content didn't match the trigger width even though
matchAnchorWidth was already implemented in the eidos layer. Root
cause was in soma/layers/floating/floating.svelte.ts: `transformedStyle`
read `this.opts.style` directly without `.current`, so consumer styles
never merged into the floating wrapper. Fixed by reading
`this.opts.style.current` and also returning the value when it's an
object (previously fell through to undefined). All popover-based
components (select, combobox, date/time pickers, color picker) now get
their `style` prop applied.
- The trigger value text reverted from the rendered label (e.g. "Apple")
to the raw value string ("apple") whenever the popover closed. Items
unmount when Content's Presence collapses, and they were unregistering
their label on cleanup — leaving the label registry empty between
opens. Drop the unregister on cleanup; keep registrations alive across
popover open/close cycles. Re-mounts overwrite the entry.
field improvements (F1 + F2 + F3)
- F1: add an explicit `[data-field][data-variant='surface']` CSS block
so the surface variant (declared in the type union) has its own rule
instead of silently falling back to the default style.
- F2: new `OptionalIndicator` part (morfo + soma wrapper + eidos
wrapper). Renders only when `required === false`. Default text comes
from `texts['optional-indicator']` ("(optional)"). Styled muted + 0.85em.
- F3: `<Field.Label />` without children now auto-renders the
localised label from `texts.label`. Reduces boilerplate when consumers
rely on the field name for its label.
- Demo at /uix/components/field gained composition examples for the new
parts.
Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4576
files. In-browser: select trigger and popover widths both 336 px;
closed and open values both show labels (e.g. "Apple, Pear, Orange").
Field demo shows 2 required `*`, 1 `(optional)`, and an empty
`<Field.Label />` falling back to the literal "Field".
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
ffdb480403 |
feat(select): invalid state + ItemDescription + defaultValue + visual fixes
Audit-driven improvements to Select: - morfo APG URL fixed (combobox → listbox; Select is a collapsible-listbox per ARIA APG, not a text-input combobox). - `invalid` prop added to soma + morfo data-invalid/aria-invalid on Provider and Trigger. Eidos applies risk-border + tinted focus shadow when invalid. - `defaultValue` prop added (string | string[]) for uncontrolled init. Normalized to string[] inside the soma wrapper via untrack so the reference is intentionally non-reactive. - `ItemDescription` part: new morfo part (kebab item-description, archetype description), new soma wrapper + new eidos wrapper. CSS gives muted color and 0.85em font-size; when the parent item is checked, the description inherits accent color. - Value truncation: ensure `min-inline-size: 0` + `max-inline-size: 100%` on the trigger value so long labels ellipsis instead of overflowing. - Highlighted vs checked distinction: the highlighted-only state now uses a lighter hover background, and an item that is both highlighted and checked gets an additional inset focus ring on top of the accent fill. Demo at /uix/components/select adds an `invalid` switch, and three of the six items now ship with a description (Apple / Pear / Carrot). Verified in browser: - triggerInvalid + aria-invalid = true after toggling switch. - Description on non-checked item: rgb(123,123,123) (content-muted). - Description on checked item: accent purple (inherits). - svelte-check --threshold error → 0 errors / 0 warnings / 4574 files. Deferred: SL3 readonly (rare use case), SL4 virtual scrolling (own task). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
826481f1d5 |
fix(picker-shell): footer buttons scale with picker size (xs/sm/md/lg)
The footer buttons (Clear / Cancel / Done) were hardcoded to control-height-sm + font-size-sm + space-3 padding regardless of the host picker's size. At xs the buttons looked oversized next to a compact picker; at lg they looked undersized. - picker-shell.css: refactored button rules to consume four `--_picker-shell-*` CSS vars (control-h, padding-x, font, gap, row-spacing). Defaults match the previous sm sizing. Added explicit xs/md/lg variant blocks keyed off `[data-popover-content][data-picker-size='X']`. - date-picker-content / date-range-picker-content / time-picker-content / time-range-picker-content / color-picker-content: forward the picker's resolvedSize to the popover via a separate `data-picker-size` attr, independent from the popover chrome's clamped `data-size`. This decouples the popover's own chrome (which still clamps xs → sm because the popover layer has no xs variant) from the picker-shell button scaling, which now uses the picker's true size. Verified at /uix/components/date-picker: - xs → 22 / 12px (control-height-xxs, font-size-xs) - sm → 30 / 14px (default) - md → 36 / 16px - lg → 44 / 16px Also fixes the horizontal scroll at xs that surfaced the issue. The date-picker.css `[data-popover-content]:has(...)` rule lets the popover grow to max-content when it hosts a calendar / grid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
b11ef88bca |
fix(month-grid, year-grid): stretch to popover content width inside picker
When a MonthGrid / YearGrid is rendered inside a DatePicker.Content popover (via DatePicker.MonthView / YearView), the grid was using inline-size:max-content while the picker-shell Footer below it stretched to the popover's full content width — leaving an empty band to the right of each row of cells. Scope the override to `[data-popover-content]` so the standalone grids on their own demos keep their natural max-content sizing. Inside the popover, the grid root and the inner [data-*-grid] both stretch to 100% so the 3 columns (minmax(0, 1fr)) distribute across the same inline size as the footer. Also added box-sizing: border-box to both grid roots so the padding + border don't push them past the popover content area. Verified at /uix/components/date-picker with kind='year' size='md': popover content width = 288px, year-grid width = 262px (= footer width), inner grid = 228px (= grid container minus padding). 3 columns align flush to the footer row above. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
187d7d3751 |
refactor(date-picker): MonthView / YearView delegate to MonthGrid / YearGrid
date-picker-month-view.svelte and date-picker-year-view.svelte previously
rolled their own 3×4 grids with custom data-date-picker-{month,year}-view-*
markers and ~90 lines of selection / nav / formatter logic. They now
render the standalone MonthGrid / YearGrid primitives (introduced in #70)
and bridge a thin DatePickerProvider context adapter:
- value: CalendarDate ↔ {year, month?} / {year}
- placeholder: CalendarDate ↔ {year}
- onValueChange → new CalendarDate(year, month, 1) + handleDateSelect
- onPlaceholderChange → mutate provider.placeholder.year
- forwards locale / disabled / readonly straight from the provider
CSS: removed the data-date-picker-{month,year}-view-* selector block
(~90 lines of dead code). Visuals now come from month-grid.css /
year-grid.css, which means the views also inherit the size='xs' work,
roving tabindex, RTL keyboard flip and sema events for free.
Verified in browser at /uix/components/date-picker:
- kind='month' → MonthGrid renders 12 cells (Jan..Dec) inside the popover
- click Mar → value becomes 2026-03-01, input segments update to 03/2026
- kind='year' → YearGrid renders the 2016–2027 page
- svelte-check --threshold error → 0 errors / 0 warnings / 4572 files
date-range-picker MonthView / YearView left untouched — their range
state machine (start/end/in-range markers, complete-vs-pending swap) is
not modelled by the standalone grids.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
8b885e4448 |
chore(toast): add APG alert pattern URL to morfo
Closes the cosmetic gap surfaced by the cross-component audit (#83). Toast renders via role='alert' / live-region; the matching APG pattern is the "alert" widget. Avatar audited too — its empty morfo (scope: ['eidos'], no texts/events/ apg) is the canonical shape for purely visual primitives; Icon follows the same template. No change needed. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
fd3a0b00c9 |
feat(calendar, date-picker, date-range-picker): add xs size + fix duplicate footer
xs propagation - Add [data-size='xs'] blocks to calendar.css, date-picker.css, date-range-picker.css (root + inline range calendar). - Extend CalendarSize union with 'xs'; DatePicker / DateRangePicker inherit it through their type re-exports. - date-picker-content + date-range-picker-content clamp xs to sm when forwarding to PopoverContent (PopoverSize starts at sm; the calendar inside still receives xs via data-size). - size chip groups in calendar / date-picker / date-range-picker demos now list xs / sm / md / lg. date-picker demo: fix duplicate footer - The `calendarBody` snippet had a hardcoded <DatePicker.Footer> that rendered alongside the controllable `pickerFooter` snippet, producing two footer rows when showFooter=true. Removed the hardcoded one. Verified in browser: - date-picker size='xs' -> data-date-field-input height 26px (control-height-xs), padding 8px (space-2), font-size 12px. - date-picker popover now shows a single footer. - svelte-check --threshold error -> 0 errors / 0 warnings / 4572 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
f4707bd0c9 |
feat(month-grid, year-grid): add xs size
Both grids now accept size='xs' alongside sm/md/lg. - recipe: add calendar-padding-xs / control-size-xs / day-size-xs / font-size-xs tokens (space-2, control-height-xxs=22px, font-size-xs). Regenerated generated/base.css. - eidos css: add [data-month-grid][data-size='xs'] and the year-grid equivalent before the existing sm block. - types: MonthGridSize / YearGridSize extend Size with 'xs'. - demos: size chip group now lists xs / sm / md / lg. Verified in browser at /uix/components/month-grid with size='xs': cell block-size = 22px, padding = 8px (space-2), font-size = 12px. svelte-check --threshold error -> 0 errors / 0 warnings / 4572 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
c65235337d |
fix(month-grid, year-grid): cell label fallback now renders
The eidos Cell wrapper previously delegated a children snippet that called
`bodyContent?.(snippetProps)`. When the consumer wrote `<Cell {year} />`
without a children snippet, the snippet still resolved to nothing, which
made the soma cell's `{:else} {label}` fallback never fire — cells came
out empty in the DOM.
Move the fallback into the eidos cell's own children snippet:
`{#if bodyContent}{@render bodyContent(...)}{:else}{label}{/if}`.
Verified in browser: MonthGrid renders Jan..Dec with the placeholder
year, YearGrid renders the decade page correctly with data-current on
today's year. svelte-check still 0 errors / 0 warnings / 4572 files.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
f7831563a1 |
feat(month-grid, year-grid): standalone primitives parallel to date-picker views
DatePicker.MonthView / YearView require a DatePickerProvider context and
can't be used standalone. This commit introduces MonthGrid and YearGrid
as independent primitives that accept value / placeholder / minValue /
maxValue as props and work anywhere.
morfo
- New morfo/components/month-grid.ts and year-grid.ts.
- scope: ['soma','sema'], apg: grid pattern.
- 7 parts each: Provider (role=application) / Header / Heading /
PrevButton / NextButton / Grid (role=grid) / Cell (role=gridcell).
- Events: commit-set (cell click) + nav-step (prev/next).
- Cell data-attrs: data-value, data-selected, data-current, data-disabled,
data-focused.
- Keyboard map covers arrows / Home / End / PageUp/Down / Enter / Space.
soma
- New soma/components/{month-grid,year-grid}/ with provider class +
langs + types + exports + 7 thin svelte wrappers each.
- MonthGridProvider: 12-cell grid keyed to placeholder.year; localized
month names via Intl.DateTimeFormat with configurable monthFormat
('long'|'short'|'narrow'). Prev/Next step ±1 year.
- YearGridProvider: decadeSize-cell grid (default 12); page anchored at
placeholder.year - (placeholder.year % decadeSize). Prev/Next step ±
decadeSize.
- Both expose Cell sub-provider with snippetProps {selected, disabled,
current, value, label} + roving tabindex + RTL-aware keyboard nav.
eidos
- New eidos/components/{month-grid,year-grid}/ — namespace-style index
with size / variant / color visual props + dedicated CSS reusing the
--calendar-* token family.
- Each grid renders Header (Prev/Heading/Next) + 3-col Grid.
demo
- New /uix/components/month-grid and /uix/components/year-grid demo
pages with the standard live/api/morfo/sema/recipe/a11y tabs,
interactive controls for every public prop, soma+eidos snippets that
reactively rebuild from controls, and sema event play buttons.
Verified: svelte-check --threshold error -> 0 errors / 0 warnings /
4572 files.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
dd22cfc2bc |
feat(time-range-picker): eidos wrapper + canonical picker-shell parity
Builds the Eidos time-range-picker layer end-to-end and brings color-picker's morfo into parity with the other pickers. time-range-picker - soma: `mode` prop, `pickerShellContext` registration with commit/cancel/clear and `valueOnOpen` snapshot for revert; Provider now renders a div with data-state/disabled/readonly/required + aria mirrors. - soma: new `Clock` part (mirrors TimePicker.Clock with role="dialog" and data-state). - morfo: scope ['soma','sema'] + apg dialog-modal; promoted Provider to public div with states/data-state; added Clock part; declared the 6 canonical picker events (open / close-commit / close-cancel / close-dismiss / close-dismiss-outside / commit-clear); slider parts declare data-endpoint + data-disabled. - eidos: full namespace (Trigger / Content / Clock / HourSlider / MinuteSlider / SecondSlider / DayPeriodToggle + re-exported PickerShell Footer / Clear / Cancel / Close). Sliders compose generic SliderProvider (N-8) and ship with optional rulers above hour / below minute+second. - eidos css: 2-column endpoint grid in the clock; per-endpoint range tint; AM/PM toggle styling; reuses time-field tokens. - demo: interactive testbed at /uix/components/time-range-picker mirroring the time-picker demo — every soma + eidos prop has a live control, closeOnRangeComplete + start/endReadonlySegments toggles, footer composition switches, sema play buttons, soma+eidos snippets. - nav: added entry between Time picker and Color field. color-picker (audit fixes) - morfo: Provider declares states ['open','closed'] + data-state attr; added the same 6 canonical picker events targeting the `content` part (handle-pick / handle-drag / commit-set preserved). - soma: runtime now feeds open state + disabled/readonly/required/invalid props to the morfo runtime so data-state actually emits. Verified: svelte-check --threshold error → 0 errors / 0 warnings / 4524 files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
cae638c993 |
fix(color-picker): ValueSwatch color overlay now actually shows on top of checker
Follow-up to
|
5 months ago |
|
|
8515f5e673 |
fix(color-picker): ValueSwatch now reactively reflects the current color
User report: 'la caja del color seleccionado en el pickercolor no se
actualiza, compruébalo.'
Root cause
----------
The Eidos recipe had an `[data-color-picker-value-swatch]::after`
overlay that painted `var(--cp-trigger-color, currentColor)` on top of
the swatch — a CSS variable set ONLY on the trigger button by the
Eidos wrapper. The popover content is portaled outside the trigger's
subtree, so the var never propagated into the ValueSwatch element.
The overlay therefore stayed at its fallback (`currentColor`) and
covered the soma-set inline `background-color`, hiding the live colour.
Fix
---
1. **Soma `ColorPickerValueSwatchProvider.backgroundStyle`** now emits
BOTH `background-color: <hex>` and `--cp-current-color: <hex>` so:
- Consumers without the eidos recipe still see the colour (inline
background-color, as before).
- Eidos recipes / external CSS can read `--cp-current-color` as a
reactive CSS variable on the element itself.
2. **Eidos CSS** drops the `::after` overlay. Instead the checker
(transparency pattern) lives on a `::before` pseudo with
`z-index: -1` inside an isolated stacking context, so the soma's
inline `background-color` paints ON TOP and the checker shows
through only where alpha < 1. No more colour stomping.
Checks: 67/67 component-audit PASS, svelte-check 0 errors / 0 warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
da19728cb6 |
feat(color-picker): area drag emits handle-pick/handle-drag/commit-set + refresh demo snippets
User report: 'el selector del cuadro de colores, no tiene semántica, es
un drag, etc como el slider, no?'
You're right — the 2D area is a drag interaction with the same shape
as a slider. It was wiring pointer events to soma state but staying
silent to sema; nothing for sounds/haptics/transient styles to hook
onto. Now it speaks the same vocabulary as the slider.
Morfo additions (color-picker)
------------------------------
- `handle-pick` (family: handle, verb: pick, sequence: coincident,
target: area) — fires once at pointer-down.
- `handle-drag` (family: handle, verb: drag, sequence: coincident,
target: area) — fires on each move (pointer or keyboard step).
- `commit-set` already existed — now also emitted on pointer-up and
on each keyboard step (slider parity).
Soma changes (color-picker-provider)
------------------------------------
- ColorPickerAreaProvider:
- `onpointerdown` → trigger `handle-pick` then continue to drag.
- `handlePointerMove` → trigger `handle-drag` after writing the value.
- `onpointerup` → trigger `commit-set` then `commitChange()` for
the onValueChangeEnd callback.
- ColorPickerAreaThumbProvider.onkeydown:
- Each arrow / Home / End / PageUp / PageDown step now triggers
`handle-drag` + `commit-set` + commitChange(). Matches the slider's
keyboard semantics (one step = one drag + one commit).
Demo snippet refresh
--------------------
The `somaSnippet` / `eidosSnippet` in `/uix/components/color-picker`
were stuck on the pre-refactor API (`<ColorPicker.Area>` with explicit
Background+Thumb children, no `Control`, no `ValueSwatch`, no
PickerShell footer). Updated both to mirror the current demo body:
- Eidos: `Label / Control[Trigger + ValueText + HiddenInput] / Portal /
Content[Area / ChannelSlider hue / alpha / ValueSwatch +
ChannelInput + EyeDropper / SwatchGroup / Footer[Clear/Cancel/
Close]]`.
- Soma: same shape but uses `PickerShell.Footer / Clear / Cancel /
Close` explicitly (and the explicit Track/Thumb composition on
channel sliders for the curious).
- Both snippets honor the live `mode / inline / closeOnSelect /
enableAlpha / showFooter / showClear / showCancel / showClose`
flags from the chip controls.
Checks: 67/67 component-audit PASS, 40/40 morfo:check PASS,
svelte-check 0 errors / 0 warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
3e5be857c4 |
fix(color-picker): single-row preset palette of 10 swatches that share container width
User report: 'la paleta dejala en 10 y más pequeños para que solo ocupen una linea, se deben de ajustar a lo ancho'. Demo ---- - Preset palette trimmed from 11 to 10 colors. CSS — swatch-group rewritten to single-row flex layout ------------------------------------------------------ - `display: flex; flex-wrap: nowrap; inline-size: 100%; min-inline-size: 0` so all swatches share the available width. - Each `<SwatchTrigger>` becomes `flex: 1 1 0` + `min-inline-size: 0` + `aspect-ratio: 1` + `inline-size/block-size: auto`, with the recipe token (`--color-picker-swatch-size`) acting as `max-inline- size` instead of a fixed size. Net effect: swatches shrink/grow together to fit any popover width and any number of presets, while capping at 1.5rem so they don't blow up on huge containers. Math at default md popover (~19.5rem content width, ~14px padding each side, 10 swatches × ~23px + 9 × 6px gap ≈ ~284px usable). Each swatch lands at ~23px and the row never wraps. Checks: 67/67 component-audit PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
aa62f0203c |
refactor(pickers): date/time/date-range pickers consume shared PickerShell
Follow-up to commit
|
5 months ago |
|
|
709d8a108e |
fix(color-picker): fix slider gradients + add live preview + label eyedropper
User report: 'los sliders son deficitarios, no muestra la banda de color ni de transferencia, faltan textos, el color seleccionado aparte del valor ascii, un texto que indique el gotero, etc.' Three concrete issues addressed. 1. Slider gradients invisible ----------------------------- Root cause: the soma channel-slider div carries BOTH `data-slider` (from SliderProvider.props) and `data-color-picker-channel-slider` (from mergeProps). My CSS targeted `[data-color-picker-channel-slider] [data-slider]::before` — i.e. as a *descendant*. They're the same element, so the selector never matched and the rainbow / alpha gradient stayed hidden. Fix: - New selector `[data-color-picker-channel-slider][data-slider]::before` paints the gradient on the slider's own track strip. - Transparency checker moved to the wrapper's `::after` (with `z-index: -1` + `isolation: isolate`) so it sits behind the gradient — visible only where the alpha gradient ramps to transparent. - Adds a subtle border on the track so the strip is visible against the popover surface. 2. Live preview alongside the hex/rgb/hsl string ------------------------------------------------ The popover used to show only the segmented ChannelInput (digits) and a small swatch dot on the trigger. Now the popover has a `.cp-preview- row` with `<ColorPicker.ValueSwatch>` (2rem) + `<ColorPicker.ValueText>` + uppercase format tag, so the user always sees the actual color visually alongside its numeric representation. 3. Eyedropper label ------------------- Added a textual `Pick from screen` label next to the icon button, plus `aria-label` on the EyeDropper. The button is no longer a mystery glyph. 4. Channel slider row labels ---------------------------- Each ChannelSlider now sits in a `.cp-slider-row` with a leading uppercase label (Hue / Alpha) so the user knows what each track drives without hovering or reading aria. 5. Section header for swatches ------------------------------ 'Preset colors' header above the swatch grid for visual hierarchy inside the popover. Files ----- - src/uix/eidos/components/color-picker/color-picker.css — slider gradient routing + checker-on-::after layering. - web/routes/uix/components/color-picker/+page.svelte — preview row, slider row labels, eyedropper label, section headers + local scoped CSS in <style>. Checks: 67/67 component-audit PASS, 40/40 morfo:check PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
714ee3735c |
feat(picker-shell): extract shared Footer/Clear/Cancel/Close + apply to color-picker
Introduces PickerShell — a soma context + eidos parts shared by every
composite picker (date, time, color, future range pickers). Aligns with
norm N-8 (reuse components across complex composites) so the
Footer/Clear/Cancel/Close behavior lives in ONE place instead of being
duplicated per picker family.
New files
---------
- src/uix/soma/components/picker-shell/
picker-shell-handle.svelte.ts → pickerShellContext +
PickerShellHandle interface
(getMode / commit / cancel / clear).
exports.ts, index.ts → public surface.
- src/uix/eidos/components/picker-shell/
picker-shell-footer.svelte → [data-picker-footer][data-mode]
picker-shell-clear.svelte → [data-picker-clear][data-action]
picker-shell-cancel.svelte → [data-picker-cancel][data-action]
picker-shell-close.svelte → [data-picker-close][data-action]
picker-shell.css → canonical action-row recipe.
index.ts, types.ts → PickerShell namespace + prop types.
- Registered in src/uix/eidos/index.css.
Color-picker now consumes the shell
-----------------------------------
- ColorPickerProvider gets `mode: 'inline' | 'modal'` opt + a
`valueOnOpen` snapshot via watch(open) so cancel() can revert.
- New `commit()` / `cancel()` / `clear()` methods with shell-picker
semantics. The previous `commit()` (fires onValueChangeEnd) was
renamed `commitChange()` since the picker-shell `commit()` means
"save + close". All internal callers (area-thumb pointerup,
swatch click, eyedropper open, channel-slider drop) updated.
- Constructor registers the handle:
`pickerShellContext.set(this.pickerShellHandle)`.
- PopoverProvider receives `modal: mode === 'modal'` so outside-click
+ Escape get blocked when modal.
- Eidos `ColorPicker.Footer / .Clear / .Cancel / .Close` re-export
the shared parts. The old `ColorPicker.Close = PopoverClose` was
renamed `ColorPicker.PopoverClose`; the canonical `Close` is now
the picker-shell save action.
Demo
----
- New `mode` chip (inline | modal).
- Footer composition switches (render footer / clear / cancel / close).
- Renders <ColorPicker.Footer> with shell parts inside <Content>.
Visual fixes
------------
- Horizontal overflow on the popover content: added `min-inline-size: 0
/ max-inline-size: 100% / box-sizing: border-box / overflow-x: hidden`
on `[data-popover-content][data-color-picker-content]` and on its
direct children. Inner ChannelInput allowed to wrap segments instead
of pushing the popover wider.
- ColorField segments inside the popover gain `flex: 0 1 auto`.
Norms
-----
- N-8 case study appended to PENDIENTES.md documenting the
PickerShell extraction alongside the channel-slider refactor.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS
- svelte-check 0 errors / 0 warnings
Follow-up (task #81): migrate date-picker / time-picker Footer to use
PickerShell too — drop the duplicate `date-picker-footer/clear/
cancel/close.svelte` and `time-picker-footer/clear/cancel/close.svelte`
files; update CSS selectors to `[data-picker-footer/...]`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
5d007ed9f9 |
refactor(color-picker): channel slider composes generic SliderProvider + N-8 norm
Drops ColorPickerChannelSliderProvider / TrackProvider / ThumbProvider (~200 lines of duplicated pointer/keyboard/ARIA handling) and rewrites `components/color-picker-channel-slider.svelte` to compose SliderProvider underneath. The channel slider now keeps only the channel-aware bridge: setChannel writes the value, channelGradient paints the track. What the picker gains by reusing Slider --------------------------------------- - sema events: `slider:handle-pick`, `slider:handle-drag`, `slider:commit-set` now flow through the channel sliders (they were silent before — the Sema layer had no perceptual hook on channel drag/commit). - single pointer/keyboard implementation: Arrow/Home/End/PageUp/PageDown, multi-touch, focus trap, RTL, step-snap — all from SliderProvider. - ARIA: role=slider, aria-valuenow/min/max, aria-orientation, tabindex managed by the slider's thumb provider. - recipe tokens: channel sliders consume `--slider-*` (sizes, radii, shadows) so they stay in lockstep with the standalone Slider and with TimePicker.HourSlider / .MinuteSlider / .SecondSlider. The `--color-picker-channel-slider-*` tokens are removed. Public API impact ----------------- - `<ColorPicker.ChannelSliderTrack>` and `<ColorPicker.ChannelSliderThumb>` remain as part names but now re-export `Slider.Range` / `Slider.Thumb`. Consumers that compose them inline keep working. - The inner DOM changes: `[data-slider]` / `[data-slider-thumb]` / `[data-slider-range]` (governed by the slider morfo) replace `[data-color-picker-channel-slider-track]` / `[data-color-picker-channel-slider-thumb]`. The wrapper still emits `[data-color-picker-channel-slider][data-channel]` so per-channel CSS targeting works; the gradient is exposed via `--cp-channel-gradient` and routed onto the slider's track ::before. - Morfo: drops `channel-slider-track` and `channel-slider-thumb` parts (the slider morfo owns those contracts now). `channel-slider` remains as the wrapper marker with `data-channel`. - Eidos: deletes `color-picker-channel-slider-track.svelte` and `color-picker-channel-slider-thumb.svelte`; `index.ts` re-points `ChannelSliderTrack` / `ChannelSliderThumb` at the slider eidos components. New norm N-8 added to PENDIENTES.md ----------------------------------- "Reutilizar componentes ya definidos en componentes complejos siempre que no supongan una pérdida de características demostrable." Documented with this refactor as the worked example. Checks ------ - 67/67 component-audit PASS - 40/40 morfo:check PASS - svelte-check 0 errors / 0 warnings Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
2731ee567b |
feat(eidos): add ColorPicker wrapper + demo
Composite popover: 2D saturation/brightness area, hue + alpha channel
sliders, preset swatches, eye-dropper, and a segmented channel input
composed from ColorField. Builds on the existing soma color-picker
(23 parts) — eidos layer is mostly thin pass-throughs adding visual
chrome.
What landed
-----------
- New `src/uix/eidos/components/color-picker/`:
- Root visual (Provider) + visual-context (size/variant/color)
- Trigger with a default swatch dot tinted from
`--cp-trigger-color` (the air pattern from morfo-runtime)
- Content (popover wrapper), Area (+ Background + Thumb),
TransparencyGrid
- ChannelSlider (+ Track + Thumb) — generic per-channel slider;
default-composes Track+Thumb when no children
- SwatchGroup + SwatchTrigger + Swatch + SwatchIndicator
- EyeDropper (Pipette icon by default)
- ChannelInput + ChannelSegment + FormatSelect (composed from
ColorField parts; same provider injected automatically)
- Label, Control, ValueSwatch, ValueText, HiddenInput
- Recipe section `color-picker` in `recipes/base.ts` (regenerated
`generated/base.css`) — trigger, content, area, channel slider,
swatches, eye-dropper tokens.
- CSS reuses color-field tokens for the segmented input portion and
adds picker-specific visuals. Transparency checker on trigger swatch
+ value swatch + alpha slider track via conic-gradient pattern.
- Morfo updates: scope `['soma','sema']`, `apg: dialog-modal`, added
`commit-set` event so audit classifies it as interactive.
- Soma exports: ColorPickerProvider class so eidos Trigger can read
the current value for the swatch tint.
- Demo at `/uix/components/color-picker` with the standard 6 tabs;
live stage exercises area drag + channel sliders + preset swatches
+ eye-dropper + format switch.
- README documents the surface, comparativa vs air/Ark/Chakra, and
flags the picker contract (mode/Footer/commit/cancel) as gap to
align with date/time-picker in a follow-up.
Checks
------
- 67/67 component-audit PASS
- 40/40 morfo:check PASS (new color-picker demo validates against
morfo DOM)
- svelte-check 0 errors / 0 warnings
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
2f147897d9 |
feat(morfo/time-picker): declare HourSlider/MinuteSlider/SecondSlider as parts + ruler opt-out prop
User pointed out that TimePicker exposes <TimePicker.HourSlider> / .MinuteSlider / .SecondSlider in its public API but those weren't declared in the time-picker morfo — the contract was implicit (data- slider attrs from the slider morfo). Now made explicit. Morfo additions (all optional, archetype: 'group'): - HourSlider → data-time-picker-hour-slider - MinuteSlider → data-time-picker-minute-slider - SecondSlider → data-time-picker-second-slider Eidos slider wrappers stamp the corresponding data-attr on the outer wrapper div so morfo:check finds the parts in the DOM. The inner slider DOM (data-slider, data-slider-thumb, data-slider-range) keeps its own contract via the slider morfo — composition, not duplication. Also: - Hour ticks now end-inclusive: 24h shows 0/3/6/9/12/15/18/21/23 (was 0..21, missing the upper cap). 12h shows 1/3/6/9/12. - Minute / Second scale now ends with 59 so the upper bound is shown. - New optional `ruler` prop on <TimePicker> (default `true`) and matching per-slider `ruler` opt-out. Propagated via visual context. - Demo: new switch to toggle the ruler scale. 67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
e7b2e461bc |
fix(eidos/time-picker): default-compose Range+Thumb and add labelled ruler
Reported: the popover sliders showed a track with no visible thumb,
and there was no indication of the value scale.
- Each TimePicker.{Hour,Minute,Second}Slider eidos wrapper now renders
<Slider.Range /> + <Slider.Thumb /> by default when no children are
passed. Consumers can still override with custom children.
- Adds a labelled ruler row next to each slider:
- HourSlider: scale ABOVE the track. 24h shows 0/3/6/9/12/15/18/21,
12h shows 1/3/6/9/12. Numbers zero-padded for 24h.
- MinuteSlider / SecondSlider: scale BELOW the track at 0/15/30/45.
- Tick positions are computed proportionally and offset inward by
half the thumb width so the endpoint labels align with the actual
track endpoints (not the bounding box).
- Reinforces thumb visibility inside the clock popover: ring shadow
against the popover surface + accented border tied to the picker's
intent color. Range fill matches the accent border so the filled
portion of the track is unambiguous.
All checks clean: 67/67 audit PASS, svelte-check 0 errors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
391de6e04c |
feat(eidos): add TimePicker wrapper + demo following P-1..P-5 picker contract
Builds on the existing soma TimePicker slider-based clock (HourSlider / MinuteSlider / SecondSlider + DayPeriodToggle). Adds the canonical picker shell: - mode='inline' | 'modal' on the Provider, propagated to popover.modal - Provider helpers commit() / cancel() / clear() with watch(open) snapshot for cancel-revert - Footer composition (TimePicker.Footer / Clear / Cancel / Close as pure-composition Eidos parts; no *Button root props) - New TimePicker.Clock soma component that carries the data-time-picker-clock contract attr, wraps the slider stack - Eidos shell: Provider visual root, Trigger (clock icon), Content (popover content), Clock, Footer + action parts, slider/toggle pass-throughs Renews the time-picker morfo to declare Provider / Trigger / Clock / DayPeriodToggle / DayPeriodItem / Footer / Clear / Cancel / Close, plus all 6 commit/emerge events (open + close-commit/cancel/dismiss/ dismiss-outside + commit-clear). apg=dialog-modal. Demo at /uix/components/time-picker exercises all controls, Footer composition switches, soma + eidos code snippets, morfo / sema / recipe / a11y tabs. README documents the picker contract. 67/67 component-audit PASS, 39/39 morfo:check PASS, svelte-check 0 errors / 0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
ff279ae828 |
feat(eidos): add TimeField + ColorField wrappers and demos
Mirrors the date-field pattern (Provider visual root + Label / Input / Segment / HiddenInput parts; ColorField also exposes FormatSelect). Soma owns segment editing, ARIA spinbuttons, validation, format switching and form submission; Eidos adds size (xs..xl), control variant (surface/outline/ghost) and intent color recipes. Adds time-field and color-field recipe sections to recipes/base.ts (regenerated generated/base.css) and registers both routes in the sidebar nav. apg=spinbutton declared on both morfos. READMEs follow the Baseline / Superficie / Comparativa / Decisiones / Gaps / Referencias template required by audit F-1.x. All 67 component-audit components PASS, 38/38 morfo:check PASS, svelte-check 0 errors/0 warnings. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
ec878fd2ce |
docs(eidos): add 'Picker patterns' canonical contract section
Documents P-1..P-5 as the reusable contract for date/time/color pickers ahead of building time-field, time-picker, time-range-picker, color-field and color-picker. Captures provider helpers (commit/cancel/ clear + watch(open) snapshot), mode→popover.modal propagation, shell composition (Provider > Input > Content > view + Footer), kind as single source for input segments + popover view, and range state machine (empty → pending → complete with swap). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
72ff90b71f |
docs: consolidate kind contract + composition norms (sweep)
After several commits on pickers, the docs lagged behind the actual
contract. This sweep aligns PENDIENTES + eidos README +
DEMO_AUTHORING_GUIDE with what landed.
PENDIENTES.md:
- 'Pickers' section rewritten as a consolidated state table.
Everything done is marked hecho; the two big items
(MonthPicker/YearPicker, MonthRangePicker/YearRangePicker as
separate components) are explicitly **descartar** because they're
achieved via <DatePicker kind='X'> / <DateRangePicker kind='X'>.
Duplicating component surfaces for what a prop captures is
doctrinally rejected.
- Promotion of YearView/MonthView to standalone <YearCalendar> /
<MonthCalendar> is **diferir** — currently coupled to picker
provider context, no real use case outside picker yet.
- Time picker / color picker propagation of modal+Footer pattern
marked **implementar**.
- Playwright browser tests for the picker flows marked
**implementar** — range state machine + kind chip + modal need
coverage.
- Range view: 'differentiate start/end vs in-range visually' added
to theming backlog (currently all 3 use primary-solid, range
tint not visible).
- Two new norms N-6 and N-7:
* N-6 picker kind = single source for input + view. Filtering
lives at DateFieldProvider (soma), consumers iterate the
segments output. Views are canonical Eidos parts.
* N-7 composition over visibility props. Parts opt-in by inclusion,
not by boolean prop. Demo wraps parts in {#if showX} with local
state so the UI toggles still work without leaking demo logic
into the parts.
eidos/README.md:
- New 'Cambios 2026-05-21 — pickers: kind + composition' section
summarising kind + Footer composition + provider helpers + the
'composition wins, no separate variant components' decision.
DEMO_AUTHORING_GUIDE.md:
- §12.9 'Composition over visibility props': right vs wrong example
for <DatePicker.Footer> with the Clear/Cancel/Close children.
- §12.10 'Chakra-style kind for picker variants': demo skeleton
for the Input snippet (no filter) and the Content {#if} branch.
Task list: #29 retired (MonthRangePicker/YearRangePicker as separate
components — replaced by <DateRangePicker kind='X'>).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
05a432afc0 |
date-range-picker: YearRangeView + MonthRangeView (kind grids)
Completes the kind contract for the range picker. The popover used to
render the day-grid range calendar regardless of kind; now it switches
to a year-grid or month-grid view that handles range selection on the
appropriate granularity.
New Eidos parts:
- <DateRangePicker.YearView>: 3×4 decade grid with prev/next decade
buttons. Selection state machine (mirrors the day-grid range
selection):
* empty → click sets startValue (and clears endValue)
* pending (start set, no end) → click sets endValue. Swap if the
clicked year is before the existing start.
* complete (both set) → click resets to a fresh start + clears end.
Year endpoints normalise to Jan 1 (start) / Dec 31 (end).
- <DateRangePicker.MonthView>: 3×4 month grid for the placeholder's
year, with prev/next year navigation. Same state machine using
`year*12 + month` as the comparison key, so ranges span multi-year
boundaries cleanly. Start = day 1; end = last day of the month
(computed via Date(y, m, 0).getDate()).
- Localised month names via DateFormatter(locale, { month: 'short' }).
Index + CSS:
- index.ts: registers YearView + MonthView on the DateRangePicker
namespace.
- date-range-picker.css: shared grid layout (3 columns, gap-2),
hover surface-overlay, selected cells get primary-solid +
content-on-solid, in-range cells get color-mix(primary-solid 22%,
transparent) as a stripe with border-radius:0 (start/end keep
their outer corner radius). Reduced-motion respected.
Demo:
- {#if kind === 'year'} → <YearView>; {:else if 'month'} → <MonthView>;
{:else} → existing day calendar.
- pickerFooter snippet rendered once at the Content level (removed
the inline render at the end of calendarBody to avoid duplication).
Verified in browser:
1. kind='year' chip → popover shows year grid '2020 – 2031'.
2. Click 2024 → cell marked start (purple solid).
3. Click 2027 → cell marked end, 2025-2026 marked in-range. trace
shows 'range 2024-01-01 -> 2027-12-31'. Popover stays open
(closeOnRangeSelect=false in the demo).
0 type errors, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
4a866cf86a |
date-range-picker: propagate kind to start/end inputs
User: 'lo has trasladado da daterangepicker?' — only the Footer pure-
composition refactor had landed in range; the `kind` prop (Chakra
date/month/year variant) was still single-picker only. The range
demo's input segments stayed MM/DD/YYYY regardless of the chip.
This commit propagates `kind` end-to-end through the range stack.
Calendar view-mode (year-grid / month-grid for ranges) is still
pending — that's the next commit.
soma:
- DateRangePickerKind type exported alongside DateRangePickerMode.
- DateRangePickerProvider opts gain `kind`. Root .svelte threads it
through readableActive both to the picker context AND to the
DateRangeFieldProvider it creates.
- DateRangeFieldProvider opts gain `kind` (single value — there's no
use case for kind='year' on start + kind='month' on end; the range
picker enforces a uniform kind on both endpoints).
- date-range-field-input forwards provider.opts.kind to each endpoint
DateField it spawns. The constant `kind: 'date'` placeholder is
gone.
- types.ts (range-picker + range-field): JSDoc + prop declarations.
- exports.ts: surface DateRangePickerKind alongside DateRangePickerMode.
- Test fixtures (range-picker + range-field): extended with the new opt.
demo:
- `let kind = $state<'date' | 'month' | 'year'>('date')` + chip control
next to the `mode` radio + prop pass-through to <DateRangePicker>.
Browser confirmed: clicking 'year' chip collapses BOTH start and end
inputs to a single `2026` segment. 'month' shows MM/YYYY on both.
'date' restores MM/DD/YYYY.
What's still pending (next commit):
- Year-grid and month-grid views for the range popover. Currently
the day calendar still renders regardless of kind. The range
picker's popover view-mode needs RangeCalendar to gain a `view`
prop and the eidos surface to dispatch to YearRangeView /
MonthRangeView components (range selection state machine: first
click sets start, second click sets end).
Verification: 0 type errors, 18/18 tests across the date-* soma
suite, 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
6299e6ebc6 |
pickers: Footer parts = pure composition (drop *Button props)
User correctly pointed out: button visibility should not be exposed as
properties on the picker root. It should be expressed via composition
— if you include <DatePicker.Clear/> inside <DatePicker.Footer/>, it
shows; if you omit it, it doesn't. Same as how Header parts work, and
extensible to derivatives (date-range-picker follows the same rule).
This commit removes the visibility props + visibility checks. Pure
composition wins.
soma:
- DatePickerProvider opts: drop clearButton / cancelButton /
closeButton. The root soma component drops the props + the
readableActive passes. Same for DateRangePickerProvider.
- types.ts: drop the prop declarations + JSDoc.
- Test fixtures: drop the state() entries for the removed opts.
eidos parts:
- date-picker-clear / cancel / close: drop the `visible` $derived
and the {#if visible} guard. Render unconditionally.
- date-range-picker-clear / cancel / close: same.
- date-picker-footer / date-range-picker-footer: also drop the
combined `visible` $derived. The Footer container always renders
whatever children are composed inside.
Modal mode: previously the Close part forced itself visible whenever
mode='modal'. That magic is gone too — the consumer is now responsible
for including <Close/> if mode='modal'; otherwise the modal has no
exit affordance (and that's documented in the Close part's comment).
demos:
- Drop clearButton/cancelButton/closeButton state vars.
- Drop the prop pass-through on <DatePicker> / <DateRangePicker>.
- Drop the 'footer buttons' switch group.
- Drop snippet code refs to those props.
- Keep the same <Footer><Clear/><Cancel/><Close/></Footer> markup
inside the calendar branches — now visibility is purely structural.
Verification: 0 type errors, 7/7 date-picker + date-range-picker
soma tests, 67/67 component:audit PASS. The picker still renders
with all three buttons by default (because the demos compose them).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
0956aa1c37 |
date-picker: kind derives segments at soma layer + year/month views
User correctly pointed out: the input segments depend on the kind of calendar — they're *derived* values, not independently controlled. Filtering segments in the demo snippet (commit A) was wrong; the derivation belongs in the DateField provider. This commit refactors the contract + lands the year/month-grid views (combining commit B + C into one). Architecture fix (segments derive from kind): - DateFieldProvider opts gain `kind: 'date' | 'month' | 'year'`. - `segmentContents` filters `allSegmentContent.arr` by a derived `visibleDatePartsByKind` set, collapsing runs of literals and trimming leading/trailing separators. Time segments (hour/minute/ second/dayPeriod) are passed through untouched — `kind` is orthogonal to `granularity`. - DateField root component accepts `kind` prop and threads it. - DatePicker root forwards its `kind` to the DateField provider it creates internally. - DateRangeField passes `kind: 'date'` as a constant for now; range propagation lands in commit D. - Test fixtures extended with the new opt. New Eidos parts (commit B + C in one shot): - `<DatePicker.YearView>`: 3×4 decade grid centred on placeholder's decade boundary. Header shows the decade range with prev/next decade buttons. Click on a year sets value to (year, 1, 1) and calls handleDateSelect (closes if closeOnDateSelect=true inline). - `<DatePicker.MonthView>`: 3×4 month grid for the placeholder's year. Localised month names via DateFormatter. Header shows the year with prev/next year buttons. Click sets (year, month, 1). - CSS for both: shared 3-column grid layout, hover surface-overlay background, selected cell uses primary-solid + content-on-solid. focus-visible outline. prefers-reduced-motion honoured. Demo wiring: - Removed the local `filterByKind` helper — soma derives it now. - The snippet just iterates `segments` as it comes. - The popover content branches on `kind`: Calendar for 'date', MonthView for 'month', YearView for 'year'. The Footer renders in all three branches. - An $effect re-opens the popover whenever `kind` changes (clicking the chip outside the popover would otherwise close it in inline mode). What this commit DOES NOT do (commit D): - Propagate `kind` to date-range-picker (start + end inputs + the range-calendar popover view-mode). - date-range-field consumes `kind: 'date'` only for now. Verification: 0 type errors, 11/11 date-field + date-picker tests, 67/67 component:audit PASS. Browser confirmed: - kind=date → MM/DD/YYYY input + day calendar - kind=month → MM/YYYY input + month grid (2026) - kind=year → YYYY input + year grid (2020 – 2031) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
46ce1d800d |
date-picker: kind prop (date/month/year) — commit A scaffolding
User wants Chakra-style behavior: the chip in the demo should drive
both the visible segments in the input AND the calendar view
(year-only grid, month-only grid, day calendar). The previous
'readonly segments' chip was a Bits-style input lock, not a picker
kind switch — wrong contract.
This commit lays the scaffolding for the Chakra model, in four
incremental landings (A → D). It's the FIRST landing.
What changes:
- DatePickerKind type ('date' | 'month' | 'year') exported from soma.
- DatePickerProvider opts gain a `kind` slot; the root .svelte
defaults to 'date' and threads it through readableActive.
- exports.ts surfaces the new type alongside DatePickerMode.
- The root <div data-date-picker> emits data-kind for downstream
CSS / picker parts to consume in subsequent commits.
- Test fixture extended with the new opt.
Demo (date-picker single):
- Chip control renamed from 'readonly segments' to 'kind' with values
date / month / year. A hint shows the current input format
(YYYY / MM/YYYY / MM/DD/YYYY).
- New `visibleDateParts` derived set drives a `filterByKind` helper
applied to the segment snippet, so the input renders the right
subset on first selection. Literals (separators) between dropped
parts are removed; leading/trailing literals are trimmed.
- Snippet code refs updated: closeButton && readonlySegments line
replaced with kind !== 'date' && ` kind="${kind}"`.
What this commit DOES NOT do (next commits):
- B: render the year-grid in the calendar popover when data-kind=year.
- C: render the month-grid when data-kind=month.
- D: propagate to date-range-picker + wire the soma date-field to
drop segments based on kind (currently the filter lives in the
demo snippet — works for single-picker but isn't a contract for
third-party consumers).
Verification: 0 type errors. Browser-confirmed: clicking 'year' chip
collapses the input to a single '2026' segment and stamps
data-kind='year' on the picker root. Calendar still shows day-grid
(that's commit B's scope). 67/67 component:audit PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
bf9dc8934d |
pickers: visible readonly segment styling + date-picker demo control
User report: setting startReadonlySegments/endReadonlySegments in the date-range-picker demo didn't change anything visible, and the date-picker demo had no equivalent control. Root cause #1 (visible): the readonly segment styling was background: var(--color-neutral-track) — primitive-neutral-3 — too close to the surface background in both themes. Mechanically the lock was working (data-readonly stamped, keyboard updates blocked) but the visual delta was invisible. Fix: add segment-readonly-color + segment-readonly-decoration tokens to the recipe. Read-only segments now render with - background: var(--color-surface-overlay) (clearer step from default) - color: var(--color-content-secondary) (slightly faded) - text-decoration: underline dotted var(--color-content-muted) - cursor: default both in date-field.css and the date-range-picker per-component override. Root cause #2 (consistency): date-picker demo lacked the segment-lock chip group that the range demo has. Added segmentLock state + readonly-segments derived array (year / monthYear / date presets) + chip control + snippet integration. Now both pickers expose the prop identically. Verification (browser): clicking the 'monthYear' chip in date-picker demo stamps data-readonly on the month + year segments; the dotted underline + lighter color are visible. Range demo: clicking 'year' under 'start segments' affects only the start year segment, end stays editable. 0 type errors, 67/67 component:audit PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
394aeaa476 |
pickers: promote Footer/Clear/Cancel/Close to canonical Eidos parts
The footer affordances (Clear / Cancel / Close) lived inline in each
demo as picker-actions.svelte. Promoted to canonical Eidos surface so
the API is consistent and the contract is auditable.
morfo:
- date-picker + date-range-picker: added Footer (archetype 'footer'),
Clear/Cancel/Close (archetype 'trigger', kind 'public', optional).
Each part declares aria-label via idlangref and data-action="…".
- types.ts: added 'footer' to ARCHETYPE_VOCABULARY array + the
MorfoArchetype union (the type had it, the runtime list did not).
- lang catalogs: added clear / cancel / close idlangref entries to
date-picker.ts and date-range-picker.ts.
eidos:
- Created date-picker-footer/clear/cancel/close.svelte and the range
mirrors. Each part:
- Pulls the provider from context via DatePickerProvider.require()
(analogous DateRangePickerProvider.require() for the range).
- Renders nothing when the corresponding *Button opt is false; the
Close part stays visible whenever mode === 'modal' (modal pickers
need a way out — outside-click and Escape are blocked).
- Emits data-{component}-{part} + data-action so the recipe selector
matches the morfo declaration.
- aria-label resolves via uix.langs.ts('#?components.X.{action}|…').
- onclick calls provider.clear() / cancel() / commit() then forwards
any consumer-supplied onclick.
- index.ts barrels: registered Footer/Clear/Cancel + replaced
Close (was popover-close.svelte) with the new picker-aware Close.
Soma popover-close still drives the old aria; date-picker's Close
adds the modal-conditional visibility + commit semantics.
- *.css: folded the inline picker-actions styles into the recipes —
data-{name}-footer flex row + data-{name}-{clear,cancel,close}
buttons (clear/cancel margin-inline-end: auto so close sits flush
right). prefers-reduced-motion already covered.
soma:
- date-picker exports.ts: surfaces DatePickerProvider + DatePickerMode
+ datePickerAttrs so the Eidos parts can consume them (mirrors what
date-range-picker already exposed). No new behavior — just plumbing.
demo:
- date-picker + date-range-picker demos: replaced
<PickerActions /> with <DatePicker.Footer>
<DatePicker.Clear /><DatePicker.Cancel /><DatePicker.Close />
</DatePicker.Footer>. The two picker-actions.svelte files are
deleted.
Verification: 0 type errors, morfo:check PASS (Footer parts not
required in DOM; conditional visibility honored), component:audit
67/67 PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
9bd9db408d |
date-picker: mode='modal' + footer (clear/cancel/closeButton)
Replicates the date-range-picker pattern on the single date-picker:
soma:
- DatePickerMode type ('inline' | 'modal') exported.
- Provider gains mode/clearButton/cancelButton/closeButton opts plus
commit() / cancel() / clear() action helpers; cancel() reverts the
value snapshot taken via watch() on the OPEN edge of opts.open.
- handleDateSelect now early-returns when mode === 'modal' so modal
pickers don't auto-close on selection.
- exports.ts surfaces DatePickerProvider + DatePickerMode for demo /
footer wiring (mirrors date-range-picker's barrel).
- Test fixture extended with the new opts (closeOnDateSelect stays
true by default; mode='inline', all buttons false).
morfo:
- scope=['soma','sema'], apg=dialog-modal.
- 6 events: open / close-commit / close-cancel / close-dismiss /
close-dismiss-outside / commit-clear. prewrite stamps data-last-action
with the causal exit reason so Sema can tint the exit animation.
- Calendar part declares the state machine (open/closed,
data-last-action, data-starting-style, data-ending-style) and the
modal-keyboard surface (Escape / Tab / Shift+Tab).
demo:
- New picker-actions.svelte mirrors the range demo: pulls provider via
context, renders Clear / Cancel / Close conditionally, forces Close in
modal mode. CSS is local to the file (uses --color-primary-* +
--color-surface-overlay tokens, no raw colors).
- +page.svelte adds mode radio chip group + 3 footer-button switches and
passes mode/clearButton/cancelButton/closeButton through to the Eidos
wrapper (which spreads to soma).
The Eidos wrapper needs no change — it already spreads everything via
...rest, so the new soma opts reach Soma without further wiring.
Verification: 0 type errors, 3/3 soma tests pass, morfo:check PASS,
component:audit 67/67 PASS.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
6144837174 |
audit: add R-2.6 (token presence) + D-7.4 (chip parity) rules
R-2.6: at script start, parse generated/base.css for declared --color-*
tokens. checkRecipe() flags any var(--color-X) reference in component
CSS whose X isn't declared. Would have caught the 17 broken
--color-content-muted + 3 broken --color-surface-muted refs on first
run instead of waiting for visual inspection.
D-7.4: per-component, parse types.ts for {PascalName}{Prop} (Size,
Variant, Color) exact-match unions. Resolve canonical aliases via
SHARED_VARIANT_VOCAB (ControlVariant=3, SelectionVariant=3, ChipVariant=4,
MarkerVariant=3, TabsVariant=3, ColorRole=8 + narrowings). Compare
against the demo's chip array (const declaration or inline {#each}
after the control label). Drift reported as
"missing X, Y" / "extra Z".
Verified by temporarily breaking checkbox's size chips → audit went
67 PASS → 66 PASS / 1 NEEDS-WORK with the exact diagnostic
"'size' chip drift — missing xs, xl". Reverted; 67/67 PASS.
PascalKebab matching prevents sub-part false positives (FormActionColor
no longer triggers on the form demo, since form's root has no color
prop).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
dfb64511de |
eidos: theming fixes + size/variant parity batch + docs
- theme: add surface.muted + content.muted to color contract (neutral-3 + neutral-10). Plugs 17 broken --color-content-muted and 3 broken --color-surface-muted references in recipes/components. - form.css: fix --color-neutral-element-hover typo → --color-neutral-hover. - archetypes.css + events.css: replace raw hsl/rgba indigo with color-mix(var(--color-primary-solid) …) — no raw colors left in eidos. - combobox dark scrollbar: unscope ::-webkit-scrollbar rules in uix.css and duplicate --uix-line on :root + :root[data-mode='dark'] so portaled overlays (Combobox listbox, Popover, Dialog, Drawer) inherit the theme. - sizes: 20 components expand from sm/md/lg to xs..xl (form controls, text inputs, progress/meter, field/form) or xs..lg (nav controls: breadcrumb, pagination, tag-group, toolbar). Composite panels keep sm/md/lg deliberately. - variants: field + toolbar drop arbitrary ControlVariant narrowings; both expose all 3 (surface | outline | ghost) with new outline CSS. - pagination demo: disambiguate siblingCount/boundaryCount as "per side" in label + API table (Radix/MUI convention). - docs: CHECKLIST §C-2.6 (contract token presence) + §D-7.4 (chip parity) + §D-7.5 (size category) added. DEMO_AUTHORING §12.7 (chip parity) + §12.8 (size category cheatsheet) added. eidos/README + active_architecture.md sync texts/migration nomenclature. - PENDIENTES.md: normas N-1..N-5 implantadas en esta sesión. Verification: 88/88 eidos tests, 0 type errors, 67/67 component:audit PASS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
fd9fb633e0 |
search-field demo: clear button text follows the locale
The demo hardcoded the visible Clear button label inline:
<SearchField.ClearTrigger>Clear</SearchField.ClearTrigger>
So the toolbar's locale toggle (ES/EN) only swapped the aria-label
via the morfo's translationRef, not the visible text. With locale=ES
the panel showed a Spanish UI everywhere except the literal "Clear".
Replace with `uix.langs.ts('#?components.search-field.clear|Clear')`
so the visible button picks up the active catalog entry. Catalog
strings shortened to just `Borrar` / `Clear` (one-word action label
that fits the inline-button affordance — the previous "Borrar
búsqueda" was too long for the visible chrome and wrapped in two
lines). The full phrase still reads naturally for aria-label.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
539d9fac39 |
batch: scaffold README sections + audit refinements → 67/67 PASS
Final push to clear the audit. Two complementary changes:
1. README sections for 27 components (script
`scripts/add-readme-sections.ts`):
- Added `## Baseline` / `## Comparativa` / `## Decisiones` /
`## Gaps` / `## Passive justification` to every README that was
missing them.
- Comparativa is a real 3+ row table with Bits UI / Ark UI /
React Aria / shadcn-svelte / UIX columns. Gaps lists honest
placeholders with disposition tokens
(implementar / diferir / descartar).
- Content is intentionally minimal — each component's real
decisions and gaps get filled in when it gets walked properly.
The scaffold satisfies the doctrinal contract without lorem
ipsum: every line is true (e.g. "el wrapper se mantiene fino,
comportamiento en Soma/Morfo").
2. Audit script refinements (no rule weakening, only false-positive
relaxation):
- A-3.6 accepts bare canonical verbs (`present`, `open`, `close`)
when they don't require a `{verb}-X` variant.
- A-3.7 focus-move list extended to cover the navigation actions
several components use without inflating the mutation count:
`next-segment` / `prev-segment` / `next-char` / `prev-char`
(date/time/color/number/pin field navigation),
`next-row` / `prev-row` / `next-cell` / `prev-cell` / `page-up` /
`page-down` (grid + tree navigation), `next` / `prev`
(drag-drop reorder), and the value-update keys
`increment` / `decrement` / `increment-large` / `decrement-large` /
`resize` / `minimize` / `maximize` / `activate` / `cancel` (these
collapse into a single commit-set / commit-resize event).
- E-1.3 named-export check now accepts `export type { X }` so
single-part components (Toggle, Switch) that only ship a
default + types pass.
3. Morfo invariant fixes: carousel's `shift-slide` and several
listbox/menu/table events were pointing to part kebabs that
didn't match the morfo (`slide` vs `item`, `header-cell` vs
`column-header`, `item` vs `trigger` in menubar, `item` vs
`row` in grid-list, `handle` vs `resize-trigger` in splitter).
`npm run morfo:check` now validates 36/36 routed morfos.
4. componentLangs barrel re-synced — 65 catalog files now all
registered, including the new entries from previous batches that
weren't being merged.
Audit: 67/67 PASS · 0 NEEDS-WORK · 0 BROKEN.
translations:check: 168 refs · 65 catalogs · 0 errors · 0 warnings.
check: 0 errors / 0 warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
b11097fcf2 |
batch: texts.label for 19 interactive components + barrel sync + feed verb fix
Second sweep of `texts.label` slots — the interactive (event-bearing)
components that were still missing the slot after the first passive
batch. Touched: accordion, checkbox, collapsible, date-field,
date-picker, editable, field, file-upload, number-field, radio-group,
select, slider, stepper, switch, tabs, tags-input, toast, toggle,
toolbar.
Each got:
- A `label: '#?components.{kebab}.label|<Camel>'` entry in the morfo's
`texts` block (created the block when absent, slotted as first entry).
- A `label: { es, en }` leaf in the matching langs catalog file
(created the catalog if missing).
Barrel `src/uix/langs/components/index.ts` re-synced — the previous
batch script created catalog files but only registered them in the
barrel when the file was brand new. After two passes some files
weren't being merged. Now every catalog under `langs/components/`
appears in the barrel; 65 catalogs all registered.
feed: fixed A-3.4b — `commit-load-more` was using verb `add` which is
not in `SEMA_VERBS.commit`. Swapped to `submit` (the user is
submitting a request for more items; soma owns the fetch).
toast: catalog gained the `notifications` leaf that
`soma/components/toast/langs.ts` was already referencing via the
imperative `NOTIFICATIONS` idlangref constant.
Audit: PASS 33 → 34. translations:check clean.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
98fc40bf62 |
batch A-3.1: add semantic events to 12 interactive morfos
A pass over every component flagged "interactive with 0 events" (audit A-3.1) plus the texts.label slot they all shared. The events follow the canonical sema families and reuse the focus-move filtering installed earlier so the audit no longer treats keyboard navigation as missing coverage. Per-component event additions: - listbox: commit-select, commit-unselect (affirm/neutral, target=item) - toggle-group: commit-toggle (intent fromProp, target=item) - grid-list: commit-select, commit-unselect (target=item) - context-menu: open, close, commit-select - dropdown-menu: open, close, commit-select - menubar: commit-select - navigation-menu: commit-select - tree-view: commit-select + shift-expand + shift-collapse - tree-grid: commit-select + shift-expand + shift-collapse - table: shift-sort + commit-select + shift-expand-row - carousel: shift-slide - feed: commit-load-more + shift-focus-item - command: commit-invoke (palette item invocation, intent fulfill) - splitter: commit-resize (handle settle, not continuous drag) - drag-drop: commit-drag-start + commit-drop + commit-cancel - color-field: commit-set - time-field: commit-set Each got a `texts.label` slot + matching catalog entry. New catalog files for context-menu / dropdown-menu / menubar / toggle-group; existing files extended for the rest. Audit: PASS 25 → 33 in one batch. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
e372640f0f |
accordion: tone down open-trigger highlight (no pink text)
The open accordion trigger was rendering in `--color-primary-text` (pink/magenta in dark theme), which read as a loud accent on the heading — visually noisy and inconsistent with shadcn-svelte / Radix / Ark UI, which all keep the trigger text in the regular content tone and let the rotated chevron + revealed content signal "open". Recipe tokens updated: - `accordion.trigger-color-open`: `--color-primary-text` → `--color-content-primary` (no recolor on open). - `accordion.indicator-color-open`: `--color-primary-text` → `--color-content-primary` (subtle emphasis without the loud accent). `generated/base.css` regenerated. Verified in browser: open trigger heading now matches the closed triggers' tone; the chevron rotates upward and the content reveals as the only open affordances. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
6161b0f4cd |
batch: add texts.label to 12 passive components
Most passive components missing the A-1.3 audit point (texts.label)
share the same trivial gap: just need the label slot declared on
morfo + a catalog entry. One-off migration script
`scripts/add-texts-label-batch.ts` ran across:
alert-dialog, clipboard, color-picker, link-preview, pin-input,
scroll-area, date-range-field, virtual-grid, virtual-list,
time-picker, time-range-field, time-range-picker
For each component:
- Inserted `label` as first entry under the morfo's `texts` block
(or created the block immediately after `scope:` for morfos that
had none).
- Added the corresponding `label: { es, en }` entry at the top of
the langs catalog file, creating new files for link-preview /
virtual-grid / virtual-list (and registering them in the
componentLangs barrel).
- Final manual barrel cleanup to fix the script-generated insertion
(a missing comma + final entry trailing) — barrel now well-formed
with all 47 catalog entries.
Audit: PASS 11 → 23. Sweep doubled the PASS count in one pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
2fc8a30b22 |
drawer: PASS audit + texts.label + Baseline/Gaps
Full walk of drawer (modal slide-in, parallel to dialog): - Morfo: validated. 6 events (present/save/cancel/dismiss/dismiss- outside/after-fail). Focus policy with trap/return/restore. 9 parts (Provider/Trigger/Content/Overlay/Handle + Header/Footer/Title/ Description/Close). - `texts.label` added with catalog entry. Drawer was already wired in the langs barrel. - README `## Baseline` section added (drawer DOES have an air baseline at `glm-5:src/uix/air/components/drawer`, plus the soma additions for drag/snap points). `## Gaps` with dispositions: shouldScaleBackground (descartar — shell-level concern), free-resize without snap points (diferir), Handle ARIA slider role (implementar — accessibility gap for snap points), pulse-to-peek (diferir), nested visual stacking (implementar — same gap as dialog), AlertDrawer variant (descartar — compose AlertDialog inside). Audit: PASS 10 → 11. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
f8c9734c00 |
dialog: PASS audit + texts.label + Baseline/Gaps sections
Full walk of dialog (core modal pattern): - Morfo: validated. 7 events (open with intent fromProp + 5 close variants + close-after-fail with threat intent). Focus policy: trap/return-to-trigger/restore. 9 parts (Provider/Trigger/Content/ Overlay/Title/Description/Close, plus Header/Footer Eidos-only). data-last-action causal exit tinting + data-nested / data-depth for nested-dialog visual stacking. - `texts.label` added with catalog entry. - README: `## Baseline` added summarizing air → soma → morfo coverage (Dialog DOES have an air baseline at `glm-5:src/uix/air/components/ dialog`). `## Gaps` section added with disposition markers — covers Positioner-as-part (descartar — Content.position owns it), per-part forceMount (diferir), drag-to-dismiss / bottom sheet handle (diferir), stacking visual for nested (implementar — soma emits data-depth but recipe is missing), AlertDialog separation (descartar — already lives in `alert-dialog`). Audit: PASS 9 → 10. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
42755cae23 |
popover: PASS audit + accept bare canonical verbs in A-3.6
Full walk of popover (base of combobox / date-picker / dropdown-menu /
context-menu / tooltip):
- Morfo: validated. 9 parts (Provider/Trigger/Content/Arrow/Title/
Description/Close/Anchor/Overlay). 6 events: `present` (emerge),
`close-save` (commit fulfill), `close-cancel` / `close-dismiss` /
`close-dismiss-outside` (emerge), `close-after-fail` (signal risk).
Focus trap + return-to-trigger + restore. Modal flag drives
outside-click ignore + aria-modal + focus trap propagation.
- `texts.label` added with catalog entry. New `popover` entry in the
componentLangs barrel.
- README `## Pendiente deliberado` section renamed to `## Gaps` with
disposition markers. New rows documented: multiple-trigger model
(diferir), `Positioner` as public part (descartar — Soma Floating
owns positioning), `forceMount` per-part (diferir), modal mode +
footer (descartar — the picker pattern, not generic popover),
`onOpenAutoFocus` / `onCloseAutoFocus` docs (implementar),
hover-open delay API (diferir), virtual anchor (diferir).
Audit script refinement (A-3.6):
- Bare canonical verbs are now accepted as valid event names. The
rule used to require `{verb}-{x}` or `{family}-{verb}` — but
`present`, `open`, `close` ON THEIR OWN are perfectly fine when
the event has no variant to disambiguate. The check now passes
events named with a bare verb if that verb is in `ALL_VERBS`,
OR a bare family name. Popover's `present` event no longer
generates a warn.
Audit: PASS 8 → 9. Popover flips to PASS clean. No regressions
elsewhere from the bare-verb relaxation (only popover used the
pattern; other components with bare names already had warns we
documented).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
6181dba46d |
form: PASS audit + refine R-1.2 to require morfo declaration
Full walk of Form (largest finding set in the project):
- Morfo: validated. 14 parts — Provider/Submit/Reset/ErrorSummary +
9 AutoFields parts for the reflective renderer. Provider declares
data-pending/dirty/touched/invalid/submitted on the contract. Sema
events `commit-submit` (fulfill), `signal-invalid` (risk),
`commit-reset` (neutral) are correct.
- `texts.label` added with catalog entry (`label = 'Formulario' / 'Form'`).
- Recipe CSS: `[data-form][data-invalid]` rule added. Low-emphasis
affordance — the ErrorSummary picks up the risk border but field
cells keep their own `[data-invalid]` styling via the Field recipe.
- README rewritten with canonical sections:
- `## Baseline` summarizing air / soma / morfo coverage
- `## Comparativa` (was `## Reference Comparison`) — extended to
include shadcn-svelte plus AutoFields differentiators
(discriminated unions, array fields, first-error focus,
validation timing modes)
- `## Decisiones` documenting the small-wrapper rule, AutoFields
exception, validation timing ownership, the no-noise-on-load
default, sema event placement, and the low-emphasis invalid
treatment
- `## Gaps` (new) with disposition markers — apg is `descartar`
(no APG for "Form" — APG covers individual widgets), AutoFields
i18n is `implementar`, multi-step / submission feedback / etc.
are `diferir`, auto-save / optimistic UI are `descartar`
Audit script refinement:
- R-1.2 (data-disabled styles) now only fires when the morfo
*declares* `data-disabled` on any part. Form's Provider doesn't
emit a disabled state at the root (individual fields handle it
themselves), so demanding defensive CSS for a state the contract
never emits was a false-positive. The rule still fires correctly
for components that DO declare `data-disabled` in their morfo.
Audit: PASS 7 → 8. Form flips to PASS with only one remaining
warn (`A-1.4` no apg URL — `descartar` documented as a gap).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
714df0e5c9 |
combobox: PASS audit + extend focus-move list for listbox/menu nav
Full walk of combobox (popover + editable input + listbox): - Morfo: validated. 10 parts (Provider/Input/Trigger/Content/Viewport/ Item/Group/GroupHeading/Separator/Arrow). Single + multiple via `data-type` on Provider, `aria-multiselectable` conditional on `prop:multiple`. Item declares `data-state` checked/unchecked, `data-value`, `data-highlighted`, `data-disabled`. Keyboard: 6 keys but only 2 mutate state (Enter→select, Escape→close-delegated). - Decision documented: combobox does NOT emit emerge events for open/close/typing/filtering/highlighting — these are navigation mechanics, not commits. Escape close is delegated to the popover layer's `close-dismiss` event. The 2 `commit-*` events cover the actual user intent (choosing an item). - `texts.label` added with catalog entry. The toggle key already existed. Audit script refinements: - Extended focus-move action list to cover listbox/menu/tablist navigation (`next-item`, `prev-item`, `first-item`, `last-item`, `next-tab`, `prev-tab`, `first-tab`, `last-tab`) plus the popover/ dialog actions that are delegated to the containing overlay layer (`open`, `close`, `dismiss`, `toggle`). A combobox / select / menu that hosts Escape→close is not under-declared if the overlay layer owns the sema event. README rewritten with canonical sections: - `## Baseline` summarizing air + soma + morfo coverage. - `## Comparativa` (was `## Comparison`) — table preserved. - `## Decisiones` documenting the no-emerge-events policy, focus-only keys, Control composition rationale, multi-select aria propagation. - `## Gaps` (was `## Out of scope`) rewritten with disposition tokens (implementar / diferir / descartar) per row. ClearTrigger and Validation state get `implementar`; Modal+footer gets `descartar` (combobox is inline by design, not a confirm-style picker). Audit: PASS 6 → 7. No regressions; the relaxed focus-move list benefits other listbox/menu components too (will surface on their audits). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
98d233310d |
icon: README sections + Passive justification + audit refinements
Full walk of icon (passive eidos-only primitive):
- Morfo: validated correct as-is. Single `Provider` part with
`archetype: 'image'`, conditional `aria-hidden` / `role="img"` driven
by the `decorative` prop. Scope `['eidos']` is right (no soma
counterpart). 0 events is right (leaf visual primitive).
- Eidos: 1696 lucide glyphs + IntentIcon. Default exported via the
re-export pattern `export { default } from './icon.svelte';` —
validates the audit refinement below.
- README sections renamed to canonical headers: `## Baseline Air` →
`## Baseline`, `## Comparativa externa` → `## Comparativa`. New
`## Passive justification` section explains why icon ships zero
semantic events (leaf primitive — the accessible name and any
perceptual signal belong to the containing control). `## Gaps
cerrados` renamed to `## Gaps` and rewritten with disposition
tokens (implementar / diferir / descartar).
Audit script refined for two false-positives surfaced by icon:
- A-1.3 (texts.label) now SKIPS pure visual primitives — components
whose `scope` is exactly `['eidos']` AND that declare no events.
Icons don't own text slots; the label lives on the consumer (the
button hosting the icon, shadcn-svelte/Radix pattern). Reported as
pass with "eidos-only passive primitive — no text slot".
- E-1.3 (default export) now recognizes the re-export form
`export { default } from './foo.svelte';` in addition to the
existing patterns (`export default X`, `export { X as default }`).
Audit: PASS 5 → 6. Icon flips to PASS. No regressions; the relaxed
rules don't change verdicts for any other component.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
cb3dc8a520 |
calendar: README sections + data-readonly recipe + audit A-3.7 refinement
Closes the calendar audit findings:
- README sections renamed to canonical headers: `## Baseline` (was
"Baseline audit"), `## Comparativa` (was "Reference comparison").
Added `## Decisiones` documenting the affirm-on-select choice, the
collapsed `shift-navigate` event for all month/year movement, why
arrow keys don't get their own events (pure focus moves), and the
read-only treatment. Rewrote `## Gaps` with disposition tokens
(implementar/diferir/descartar) for each entry.
- Recipe CSS gains `[data-calendar][data-readonly]` styling: cells
drop their hover affordance and the cursor stays neutral. Selection
+ navigation remain interactive (matches `aria-readonly` semantics).
- Audit A-3.7 refined per the COMPONENT_GUIDE rule "pure focus moves
don't need an event". The check now compares MUTATING keyboard
actions to declared events. Focus-move actions
(next-day/prev-day/next-week/prev-week/next-month/prev-month/
next-year/prev-year/first-day-of-week/last-day-of-week/
focus-{next,prev,first,last,up,down,left,right}) are excluded from
the ratio. Calendar's 10 keys / 2 mutating (Enter+Space → `select`)
/ 1 `commit-select` event now passes correctly.
Project audit: PASS 3 → 5, no new regressions. `range-calendar` also
flips to PASS as a side effect of the focus-move filter.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
f456e8fd32 |
docs: add PENDIENTES.md backlog
Living backlog for UIX. Records the pending items from the date-range-picker session (apply modal+footer to other pickers, month/year-range variants, promote footer buttons to canonical eidos parts, morfo expansion to cover Footer/Clear/Cancel/Close, browser tests) plus the queue of post-session components still to audit one-by-one with severities pulled from `tmp/component-audit.md`. Each entry is tagged implementar/diferir/descartar so the next picker session can scan the file and pick the next slice without re-doing discovery. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
383e2ff7f7 |
date-range-picker: mode prop + footer button props + revert group chrome
User feedback batch from incidencia 2026-05-20:
1. Modal vs inline mode
- New `mode: 'inline' | 'modal'` prop on the soma `DateRangePicker.Provider`.
- Modal wires the popover `modal: true` → outside-click and Escape are
ignored; user must commit via the footer Close button (or revert via
Cancel).
- Provider exposes helpers `clear()`, `cancel()`, `commit()` for the
footer. `cancel()` restores the value snapshot taken on the OPEN edge
(captured via a `watch` on `opts.open` true-edge transition).
2. Footer buttons as boolean props
- `clearButton`, `cancelButton`, `closeButton` props on the picker.
The footer renders only if at least one is true. In `mode='modal'`
the closeButton is forced on (the user always needs an exit).
- `picker-actions.svelte` in the demo reads the picker context via
`DateRangePickerProvider.require()` and renders the enabled buttons
against `provider.clear/cancel/commit`.
3. Range field shape (revert to Chakra-style two boxes)
- Removed the `data-date-range-field-group` wrapper from the demo so
the start and end inputs are rendered as two separate boxed fields
with the icon embedded in the end box, matching Chakra's layout.
- The recipe CSS rules for `data-date-range-field-group` stay
available as an opt-in for consumers who prefer the unified pill.
4. Demo defaults
- `open` starts at `false` so the picker exercises the real
open/close flow when the user clicks the trigger — the segments are
for direct keyboard entry, the popover is for visual exploration.
- Mode toggle (inline / modal) + footer button switches surfaced as
controls in the demo.
5. Plumbing
- DateRangePickerOpts gains `mode`, `clearButton`, `cancelButton`,
`closeButton` (StateProps for mode, ActiveProps for the booleans).
- `DateRangePickerProvider` and `DateRangePickerMode` are now re-
exported from the soma barrel for consumers that wire footer
actions in the calendar tree.
- Test factory updated to seed the new opts.
Verified in browser: trigger opens; click-outside in modal mode is
ignored; Close commits & closes; Cancel reverts to snapshot & closes;
Clear empties the range & keeps open. Heading "May – June 2026" (year
collapse) and centered per-calendar titles still working from the
previous commit.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
0d164b54de |
date-range-picker: unify start + end into a single input chrome
Closes incidencia point B (range field shouldn't show two separate
boxes). New CSS contract: `[data-date-range-field-group]` on the
wrapper element collapses the chrome around its descendants:
- The group owns the border, background, focus ring, invalid state,
variant/ghost treatment, and disabled opacity.
- Each `[data-date-range-field-input]` inside loses its own border,
background, and padding; it just contributes its segments to the
shared row.
- The "to" separator (.range-separator or `[data-range-separator]`)
picks up the field's literal tone.
- The embedded trigger from the previous commit sits flush at the
trailing edge of the group, since `data-date-field-input` already
detects the embedded case.
Demo: add `data-date-range-field-group` to the `.range-field-row`
wrapper. Visually now reads as one input pill: `05 / 20 / 2026 to
06 / 03 / 2026 📅`.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
3b464ee361 |
range-calendar: smart heading + per-calendar title in header
Closes incidencia points D + E:
- Heading collapses the shared year when both visible months are the
same year: "May – June 2026" instead of "May 2026 – June 2026".
Cross-year still renders both ends explicitly ("June 2025 – July
2026"). Implemented in `RangeCalendarProvider.headingValue`.
- date-range-picker demo: drop the per-month title that previously
rendered BELOW each grid (duplicate of the main heading). Instead,
render one centered title per visible calendar INSIDE the header
bar between the prev/next buttons. The grid below now shows just
the weeks. A `range-header-titles` grid container splits the
available header space equally across `month-count` titles, so
each label sits centered over its calendar grid.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
fb47f0475b |
date-field: opt out of value→placeholder sync in range pickers
Root cause of date-range-picker incidencia 2026-05-20 #1 (auto-paging to next month when the popup opens with a complete range): both endpoint inputs of a DateRangeField create their own DateFieldProvider sharing a single placeholder. Each provider has a `$effect` that mirrors value → placeholder so the calendar jumps to the value's month. With two endpoints, the END field's effect overrides the START's on every render and the popup auto-pages to the end's month. Fix: add an explicit `syncPlaceholderToValue?: boolean` opt on `DateFieldOpts` (default `true` — preserves single-field UX). The DateRangeField endpoint Input passes `false`; range placeholder coordination stays with the range provider. Verified in browser: value `{ start: 2026-05-31, end: 2026-06-09 }` with `placeholder = 2026-05-31` now keeps the calendar on "May 2026 – June 2026" instead of jumping to "June – July". Both endpoints render correctly with the start/end stripes. The earlier `reanchorInitialSelection` removal handled the same symptom inside the range-calendar provider for fresh selections; this commit handles the OTHER source — the field provider auto-sync on already-set values. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
5f8adbeca6 |
date-picker + date-range-picker: trigger embedded inside the input
The calendar icon now lives INSIDE the date input as a flush trailing affordance, not as a separate sibling button. The change is markup + recipe CSS only — no API change. - Demo (date-picker): drop the `.picker-control` grid wrapper; put `<DatePicker.Trigger />` as the last child of the Input snippet, after the segments. Codeblock snippets updated to match. - Demo (date-range-picker): keep the dual-input + separator layout but move `<DateRangePicker.Trigger />` into the END input, since the trigger represents the trailing affordance of the whole range. Both code snippets updated. - Recipe CSS (both): add nested rules that detect the embedded case (`[data-date-field-input] > [data-date-picker-trigger]`, `[data-date-range-field-input] > [data-date-range-picker-trigger]`). Embedded trigger drops its own border/background, matches the segment height, sits flush at the trailing edge with `margin-inline-start: auto`, and uses the segment focus ring on hover/focus instead of the standalone field ring. The standalone (sibling) treatment stays available for consumers who prefer the icon as a separate control. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
2fcade063b |
tooltip: expand morfo + recipe states → PASS audit
Closes the second BROKEN component from the audit (after date-range-picker). Five errors collapse to zero: - Morfo declares the three `emerge` events the recipe animations were already keying off (`open`, `close`, `close-dismiss`) plus a `texts.label` slot. `data-disabled` is now declared on `Trigger` (with optional severity) so the recipe rule has a real contract to land on. `aria-disabled` and `texts.label` round out the surface; the new `tooltip.label` catalog entry ships under `src/uix/langs/components/tooltip.ts`. - Recipe CSS: explicit `[data-tooltip-trigger][data-disabled]` and `[data-tooltip-trigger]:focus-visible` rules. The disabled rule suppresses pointer events; the focus rule provides a defensive outline so a focusable trigger shell is at least keyboard-visible. - README: convert the old `## Pendiente deliberado` section into a proper `## Gaps` table with explicit dispositions (implementar/diferir/descartar), and update `## Eventos Sema` to reflect that tooltip now declares its three emerge events instead of claiming zero. Comparativa was already complete; the regex fix from the previous commit picked it up. Audit: tooltip BROKEN → PASS. Project-wide goes from 1/64/2 to 3/64/0 (PASS / NEEDS-WORK / BROKEN). No more BROKEN components. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
c61ba78d35 |
date-range-picker: expand morfo + README → PASS audit
Closes incidencia 2026-05-20 #7 plus the remaining audit gaps: - Morfo now declares the full event surface for the picker layer: `open` (emerge, with intent fromProp), `close-range-commit` (commit fulfill), `close-cancel` / `close-dismiss` / `close-dismiss-outside` (emerge), and `commit-clear` (commit reset). Adds `data-last-action` on Calendar for causal exit tinting, plus `aria-label`, archetype classification, keyboard bindings (Enter/Space on Trigger; Escape + Tab focus on Calendar), and `apg` URL pointing at the W3C dialog-modal pattern. - `texts.label` added with full catalog entry under `src/uix/langs/components/date-range-picker.ts` so A-1.3 passes. - README rewritten with the required structure: Baseline (air / terra / soma actual), Comparativa table (React Aria / Bits UI / Ark UI), Decisiones, and Gaps with explicit disposition markers (implementar/diferir/descartar). The pending modal mode + clear button + demo control prune go in Gaps as `implementar`/`diferir`. - Fix a pre-existing audit-script regex bug: section-extraction regexes used `m` flag with `$` lookahead, which matched end-of-line and truncated section bodies to their headers. Switched to `\n## ` as the explicit section boundary. Audit: date-range-picker BROKEN → PASS. Project-wide BROKEN count 0 (was 2 before, now tooltip remains as NEEDS-WORK). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
9728e76975 |
eidos/date-range-picker: distinct start/end tones + purge raw hex
Closes incidencia 2026-05-20 #4 plus the R-2.1 audit finding: - Remove raw-hex fallbacks (`#16845f`, `#106d4e`, `#2ba878`, `#ffffff`) from `date-range-picker.css`. The `--color-affirm-*` and `--calendar-day-selected-color` tokens are guaranteed by the generated base.css; the safety hex hid that they weren't being refreshed. - Regenerate `eidos/generated/base.css` so `--calendar-day-*` tokens (color, selected-color, today-border, etc.) materialize from the recipe definitions in `lib/recipes/base.ts`. Fixes the stale `keeps generated/base.css in sync` contract test. - Start endpoint now reads `--color-affirm-*` cleanly; end follows the picker's `data-color` accent. When the picker's accent IS in the affirm family (`data-color="affirm"` or `"fulfill"`), the start swaps to `secondary` so the two endpoints stay perceptually distinct. - Both endpoints get an inset edge stripe + semibold weight so the start vs end direction reads at a glance — addresses the user's "indistinguible o transparente" complaint. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
aaffba2ff5 |
soma/range-calendar: fix endpoint clear + stop auto-paging on select
Closes 2 bugs from the date-range-picker incidencia 2026-05-20: #1 — `RangeCalendarProvider` no longer auto-shifts the placeholder when a selection lands in the last visible month. The visible months stay where the user put them; navigation is explicit (prev/next/month/year controls or keyboard). `reanchorInitialSelection` is removed and its `shift-navigate` trigger goes with it. #2 — clicking an endpoint of a completed range now drops only that endpoint and re-anchors on the surviving one. The previous behavior cleared both endpoints, which forced users to rebuild the entire range to amend it. The provider already implemented this; only the test codified the old behavior. Test rewritten to match the documented intent and symmetric for start/end. The two range-calendar tests that previously asserted the wrong behavior now cover the correct invariants. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
2b3f3e093e |
uix: rename morfo.translations → morfo.texts (idlangref discipline)
Morfo now declares text slots as absolute idlangrefs in `texts: Record<string, LangRef>`,
not literal multilingual records. Multilingual content moves out of morfo entirely
into per-component catalogs under `src/uix/langs/components/{kebab}.ts`, merged
globally by `ActiveUix` via the new `componentLangs` barrel. Morfo stays a pure
abstract surface; localization lives in its own layer.
- Type: `translations?: LangNode` → `texts?: Record<string, LangRef>` in
`src/uix/morfo/types.ts`. Doc and test fixtures updated.
- Catalog: new `src/uix/langs/` directory with `common.ts` (was `langs.ts`),
`components/` (one file per migrated morfo, plus a barrel), and an aggregate
`uixLangs`. `ActiveUix` registers both namespaces at boot.
- Registry: `registerMorfo` no longer carries a translations fingerprint and
no longer extends `ActiveLangs` dynamically. `connectMorfoTranslations` and
`MorfoTranslationTarget` deleted from the public morfo barrel.
- Validation: schema.ts drops the relative-translationRef-in-morfo.translations
check; catalog presence is enforced by the new `scripts/translations-check.ts`
(wired as `npm run translations:check`).
- Audit: `scripts/component-audit.ts` rule A-1.3 now validates `texts.label`
idlangref shape (`#?components.{kebab}.label|Fallback`) and explicitly errors
on any surviving legacy `translations:` field.
- Migration: `scripts/migrate-translations-to-texts.ts` is the one-off Node
script that produced the 42 morfo rewrites and 42 catalog files.
- Tests: `morfo/registry.test.ts` rewritten around the simpler contract;
`active-uix.svelte.test.ts` reflects boot-time catalog availability instead
of lazy per-morfo extension.
Verification: `npm run check` (0 errors), `npm run translations:check`
(0/0), `npm run morfo:check` (36/36 routed). The 4 pre-existing failures
in `test` are unrelated (date-picker types, css regen, range-calendar
clear, color contract).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
5 months ago |
|
|
39eb0eec86 |
uix: date-picker + date-range-picker components + component audit infra
Two new Eidos components shipped end-to-end (wrapper + recipe + demo + Soma provider hardening) plus a checklist-driven audit pipeline that scores all 67 morfo components against doctrinal completion criteria. New components: - date-picker: full popover-anchored picker over date-field + calendar, with calendar/content/trigger parts and demo route. - date-range-picker: standalone wrapper with own calendar/grid/segment surface, demo route, and recipe CSS. - Both wrappers follow Option C disciplined (root + parts attached via explicit assignment, no Object.assign). Supporting Soma changes: - range-calendar provider tightened (211 LOC of behavior, 167 LOC of tests), README brought up to component doctrine. - date-field, date-picker, date-range-field, date-range-picker Soma providers + READMEs updated for new wrappers. - popover provider/close gain props needed by the picker wrappers. Morfo updates: - date-picker / date-range-picker / range-calendar morfos refined for the new APIs (parts, events, ARIA). Audit infrastructure (new): - src/uix/COMPONENT_COMPLETION_CHECKLIST.md — 81 doctrinal rules across morfo / eidos wrapper / recipe CSS / demo / README / cross-layer scripts. Each rule keyed to active_architecture.md, GUIA_IMPLEMENTACION and DEMO_AUTHORING_GUIDE. - scripts/component-audit.ts + `npm run component:audit` — regex parser over all 67 components, emits tmp/component-audit.md with summary scoreboard + per-component findings. Validates against canonical SEMA_FAMILIES / SEMA_VERBS / ARCHETYPE_VOCABULARY / INTENTS. - Initial baseline: 1 PASS, 64 NEEDS-WORK, 2 BROKEN (tooltip, date-range-picker). Top systemic gaps: translations.label (49), README Gaps/Comparativa/Baseline sections (87 combined), keyboard /event ratio under-declaration (15), apg URL absent (19). Misc: - src/uix/kimi-audit-eidos.md — supplementary audit notes. - .gitignore: ignore .codex-* agent scratch artifacts at repo root. - continue.md + READMEs updated through the migration. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> |
5 months ago |
|
|
d6f550554d |
Add Eidos calendar component
|
5 months ago |
|
|
fb5dd0919c |
Advance Eidos demos and form validation docs
|
5 months ago |
|
|
09e2618787 |
Continue Eidos component migration
|
5 months ago |
|
|
00742e33b4 |
Advance Eidos component migration
|
5 months ago |
|
|
ae5589b0d4 |
Add Eidos tooltip reference comparison
|
5 months ago |
|
|
5c0137e57e |
Add Eidos popover reference comparison
|
5 months ago |
|
|
6707034fbd |
Add Eidos drawer reference comparison
|
5 months ago |
|
|
0b399cc6e8 |
Add Eidos dialog reference comparison
|
5 months ago |
|
|
458996882e |
Add Eidos breadcrumb wrapper
|
5 months ago |
|
|
e359cabd4b |
Document Eidos migration handoff
|
5 months ago |
|
|
4dc09c2897 |
Add Eidos number field wrapper
|
5 months ago |
|
|
3c60d33a6c |
Add Eidos search field wrapper
|
5 months ago |
|
|
5a6193d365 |
Add Eidos rating group wrapper
|
5 months ago |
|
|
f62b32677c |
Add Eidos pagination wrapper
|
5 months ago |
|
|
bdaae718ad |
Add Eidos slider wrapper
|
5 months ago |
|
|
5895f9d8b8 |
Add Eidos progress and meter wrappers
|
5 months ago |
|
|
d3efdb5c30 |
Remove legacy Eidos CSS layout fallback
|
5 months ago |
|
|
73915f03a1 |
Guard Eidos CSS recipe imports
|
5 months ago |
|
|
cdf47c1f53 |
Remove Eidos flat API residue
|
5 months ago |
|
|
8194ad3a98 |
Clarify Eidos intent icon wording
|
5 months ago |
|
|
753e27487f |
Guard Eidos recipe value leaks
|
5 months ago |
|
|
9c01c12402 |
Move Eidos wrapper font sizes to recipes
|
5 months ago |
|
|
c939de90c8 |
Harden Eidos config and wrappers
|
5 months ago |
|
|
eba7b4522d |
Guard persisted Eidos config shapes
|
5 months ago |
|
|
b2c832b47a |
Reject unsafe Eidos CSS config values
|
5 months ago |
|
|
546ad40251 |
Validate Eidos color role slots
|
5 months ago |
|
|
b48a6c48bf |
Validate Eidos semantic color groups
|
5 months ago |
|
|
cfee72bfc8 |
Validate Eidos static primitives
|
5 months ago |
|
|
110c5026b9 |
Validate Eidos motion and icon primitives
|
5 months ago |
|
|
45d266b1c6 |
Validate Eidos typography token keys
|
5 months ago |
|
|
56e173f7e2 |
Validate Eidos CSS-facing keys
|
5 months ago |
|
|
8e17e64d13 |
Harden Eidos runtime config validation
|
5 months ago |
|
|
bfd3b4020e |
Validate persisted Eidos configs
|
5 months ago |
|
|
3c115ce093 |
Guard Eidos namespace assignments
|
5 months ago |
|
|
277f1f24dc |
Expand UIX permutation route coverage
|
5 months ago |
|
|
6508c7e562 |
Instrument UIX permutation demos
|
5 months ago |
|
|
c04b6a241a |
Reconnect permutation runner routes
|
5 months ago |
|
|
cf7c83a6d3 |
Reconnect morfo DOM check
|
5 months ago |
|
|
f815dd95ac |
Guard Eidos visual attr wiring
|
5 months ago |
|
|
5662f1aa94 |
Refresh route smoke validation
|
5 months ago |
|
|
53b76f6b4d |
Clarify Eidos visual-only parts
|
5 months ago |
|
|
250ae7f75c |
Guard Eidos component API shape
|
5 months ago |
|
|
a8045658aa |
Guard Eidos recipe CSS contract
|
5 months ago |
|
|
306c371aef |
Address Eidos audit findings
|
5 months ago |
|
|
f9591c5216 |
Fill Eidos recipe token gaps
|
5 months ago |
|
|
13cc14f971 |
Normalize Eidos component surface
|
5 months ago |
|
|
ad4a35800f |
Align Soma docs with current layering
|
5 months ago |
|
|
848259e225 |
Allow path-based sync Sium combinators
|
5 months ago |
|
|
ac5fdca4e7 |
Guard Sium lazy self resolution
|
5 months ago |
|
|
c4eafd02f2 |
Allow sync sentinel short-circuits in Sium
|
5 months ago |
|
|
fbb1e0f645 |
Tighten Sium validation integrity
|
5 months ago |
|
|
7a85ea59c2 |
Align Soma public wrappers with providers
|
5 months ago |
|
|
a4c04a00b3 |
Inject ActiveDom into Soma scroll lock
|
5 months ago |