svelte-kit-vice

Commit Graph

Author	SHA1	Message	Date
dev	4f0108f839	eidos: V1.5 — Toast component recipe First per-component recipe in eidos/components/. Composes tokens + archetypes + intent palette into a finished Toast visual: - viewport stack layout (no positioning — integrator's call) - card with intent-tinted left border (reuses --eidos-tint-) - absolute close button so layout doesn't depend on a header wrapper - typography for title / description, secondary-button style for action - swipe state (data-swipe='move'/'cancel') translates the card - loading state adds an accent stripe via inset shadow Toast.Item carries archetype='item' which sets cursor:pointer + user- select:none in archetypes.css; the recipe overrides those because a notification is passive, not selectable. Possible future morfo decision: introduce a 'card' or 'notification' archetype. The eidos test page drops its :global([data-toast-]) scoped CSS — the recipe now suffices. Stale '~13 ms / 1 rAF' text replaced with the correct per-family hold (600ms for alert). Wired via @import './components/toast.css' from eidos/index.css. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>	5 months ago
dev	44a499d052	eidos: V1 minimum viable — tokens + archetype rules + event reactions First eidos code. Closes the cross-layer cycle that's been documented but unproven: an actual CSS layer that consumes the morfo + sema contracts and applies styles transversally without enumerating components. src/uix/eidos/ - tokens.css — motion durations (quick/fast/base) + easings (standard / emphasized / decelerate) + opacity scale (hover/disabled/faded) + intent tints (neutral/affirm/fulfill/risk/threat) + focus ring tokens. ~30 lines. No theming dimension yet — when it arrives, these are the base theme. - archetypes.css — transversal selectors keyed by `data-archetype`. Covers trigger, overlay, content, indicator, thumb, track, close, action, item, option. Plus a universal `:focus-visible` ring rule that applies to every archetype-classified element. Single attribute selector specificity — components can override freely. - events.css — reactions to perceptual signals during their ~13ms life. `[data-event^="dismiss"]` fades out, `[data-event^="announce"]` pulses with intent-tinted box-shadow, `[data-last-action]` tints exit animation by causa. - index.css — entrypoint that imports the above in cascade order. Consumer: `import '$uix/eidos/index.css'`. src/routes/test/eidos/+page.svelte (demo) - Sets up Soma + App context inline (independent of /test/soma layout). - Imports `$uix/eidos/index.css` and demonstrates the cross-layer story: - Toggle + Switch buttons share trigger styles via `[data-archetype="trigger"]` without per-component CSS. - Collapsible expands/collapses with state-driven attrs. - Toast intent buttons fire `data-event="announce" data-intent="risk\|threat\|affirm"`, which eidos's events.css briefly tints via box-shadow during the signal window. - Component-specific layout (positioning, switch thumb transform) lives in the page's `<style>` block — eidos provides only the cross-component baseline, NOT per-component recipes. What this proves - The runtime emits `data-archetype` correctly in browser (not just in unit tests). - A single CSS rule can target ALL triggers across all components without enumeration. Add a new component with `archetype: 'trigger'` and it inherits the styling automatically. - Sema's `data-event*` signals live in the DOM long enough for CSS to react (the ~13ms window measured by `scripts/probe-toast-dismiss.ts` is observable as a brief box-shadow flash on toasts). - The cross-layer cycle Morfo declara → Soma transcribe → Sema emite → Dom aplica → Eidos lee runs end-to-end. What V1 deliberately excludes - Theming dimension (no `[data-theme]` overrides yet). - Per-component recipes (each component will get its own CSS later). - Keyframes / @starting-style / animation primitives. - Sound / vibra (those are separate engines that subscribe to sema). Verification - /test/eidos returns 200; manual browser check shows triggers share hover dim + focus ring across components, toasts flash intent tint on appear. - 68/68 smoke routes (smoke only scans /test/soma — eidos route is outside that scope, manually verified). - svelte-check unchanged at 155 (pure CSS additions).	6 months ago

Author

SHA1

Message

Date

dev

4f0108f839

eidos: V1.5 — Toast component recipe

First per-component recipe in eidos/components/. Composes tokens +
archetypes + intent palette into a finished Toast visual:

- viewport stack layout (no positioning — integrator's call)
- card with intent-tinted left border (reuses --eidos-tint-*)
- absolute close button so layout doesn't depend on a header wrapper
- typography for title / description, secondary-button style for action
- swipe state (data-swipe='move'/'cancel') translates the card
- loading state adds an accent stripe via inset shadow

Toast.Item carries archetype='item' which sets cursor:pointer + user-
select:none in archetypes.css; the recipe overrides those because a
notification is passive, not selectable. Possible future morfo decision:
introduce a 'card' or 'notification' archetype.

The eidos test page drops its :global([data-toast-*]) scoped CSS — the
recipe now suffices. Stale '~13 ms / 1 rAF' text replaced with the
correct per-family hold (600ms for alert).

Wired via @import './components/toast.css' from eidos/index.css.

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

dev

44a499d052

eidos: V1 minimum viable — tokens + archetype rules + event reactions

First eidos code. Closes the cross-layer cycle that's been documented but
unproven: an actual CSS layer that consumes the morfo + sema contracts
and applies styles transversally without enumerating components.

src/uix/eidos/
- tokens.css — motion durations (quick/fast/base) + easings (standard /
  emphasized / decelerate) + opacity scale (hover/disabled/faded) +
  intent tints (neutral/affirm/fulfill/risk/threat) + focus ring tokens.
  ~30 lines. No theming dimension yet — when it arrives, these are the
  base theme.
- archetypes.css — transversal selectors keyed by `data-archetype`.
  Covers trigger, overlay, content, indicator, thumb, track, close,
  action, item, option. Plus a universal `:focus-visible` ring rule that
  applies to every archetype-classified element. Single attribute
  selector specificity — components can override freely.
- events.css — reactions to perceptual signals during their ~13ms life.
  `[data-event^="dismiss"]` fades out, `[data-event^="announce"]` pulses
  with intent-tinted box-shadow, `[data-last-action]` tints exit
  animation by causa.
- index.css — entrypoint that imports the above in cascade order.
  Consumer: `import '$uix/eidos/index.css'`.

src/routes/test/eidos/+page.svelte (demo)
- Sets up Soma + App context inline (independent of /test/soma layout).
- Imports `$uix/eidos/index.css` and demonstrates the cross-layer story:
  - Toggle + Switch buttons share trigger styles via `[data-archetype="trigger"]`
    without per-component CSS.
  - Collapsible expands/collapses with state-driven attrs.
  - Toast intent buttons fire `data-event="announce" data-intent="risk|threat|affirm"`,
    which eidos's events.css briefly tints via box-shadow during the signal window.
- Component-specific layout (positioning, switch thumb transform) lives in
  the page's `<style>` block — eidos provides only the cross-component
  baseline, NOT per-component recipes.

What this proves
- The runtime emits `data-archetype` correctly in browser (not just in
  unit tests).
- A single CSS rule can target ALL triggers across all components
  without enumeration. Add a new component with `archetype: 'trigger'`
  and it inherits the styling automatically.
- Sema's `data-event*` signals live in the DOM long enough for CSS to
  react (the ~13ms window measured by `scripts/probe-toast-dismiss.ts`
  is observable as a brief box-shadow flash on toasts).
- The cross-layer cycle Morfo declara → Soma transcribe → Sema emite →
  Dom aplica → Eidos lee runs end-to-end.

What V1 deliberately excludes
- Theming dimension (no `[data-theme]` overrides yet).
- Per-component recipes (each component will get its own CSS later).
- Keyframes / @starting-style / animation primitives.
- Sound / vibra (those are separate engines that subscribe to sema).

Verification
- /test/eidos returns 200; manual browser check shows triggers share
  hover dim + focus ring across components, toasts flash intent tint on
  appear.
- 68/68 smoke routes (smoke only scans /test/soma — eidos route is
  outside that scope, manually verified).
- svelte-check unchanged at 155 (pure CSS additions).

2 Commits (e69e0cba803b6be819cfc1701d907a4397c62db8)