svelte-kit-vice

Commit Graph

Author	SHA1	Message	Date
dev	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
dev	18edecba5b	fix(date-range-field demo): key each segments by index, not seg.part Soma's segments array uses `'literal'` as the part for every visual separator (e.g. the `/` between dd / mm / yyyy). Keying the {#each} by `seg.part` produced duplicate keys → `each_key_duplicate` runtime error at the second `literal` separator. Switch to positional key `(i)` — segments don't reorder, so positional is stable and correct. Snippet template strings updated to match so the visible code in the Live tab reflects the right pattern. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	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

Author

SHA1

Message

Date

dev

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>

dev

18edecba5b

fix(date-range-field demo): key each segments by index, not seg.part

Soma's segments array uses `'literal'` as the part for every visual
separator (e.g. the `/` between dd / mm / yyyy). Keying the {#each}
by `seg.part` produced duplicate keys → `each_key_duplicate` runtime
error at the second `literal` separator. Switch to positional key
`(i)` — segments don't reorder, so positional is stable and correct.

Snippet template strings updated to match so the visible code in
the Live tab reflects the right pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

dev

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>

3 Commits (8ab8f9dae1ed92307004f2aa84c96863efd684f1)