go
/
svelte-kit-vice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(demos): drop fake soma snippet from 26 eidos-only component demos

Browse Source 
Eidos-native components have NO soma layer, yet each demo rendered a
misleading "soma" code-snippet block ("n/a · eidos-native — equivalent
markup shown") fed by an orphan `somaSnippet` derived. Sweep the fix
already verified on text/heading across all 26:

  layout primitives  box flex grid stack container auto-grid wrap group
                     section aspect-ratio float
  typography/inline  code code-block kbd mark highlight link badge separator
  visual leaves      avatar banner skeleton spinner icon display scroll-frames

For each: remove the `somaSnippet` declaration + the soma `data-uix-code`
block, leaving only the real eidos snippet (and dropping its now-unneeded
inline margin-top).

Skipped (correctly): card / avatar-group / image (soma mentioned only in
prose, no fake code block — image reads a real ImageProvider) and all
genuinely soma-backed components.

Verified: `npm run check` 0 errors; 0 orphan somaSnippet refs in swept
files; browser spot-check (box, scroll-frames) shows one eidos code
block, zero soma badges.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent 8e162221c3
commit e97fdc53c2
26 changed files with 45 additions and 712 deletions
Show Stats Download Patch File Download Diff File

28
web/routes/uix/components/aspect-ratio/+page.svelte
Unescape View File

@ -58,22 +58,7 @@
return () => obs.disconnect();
});
// ── Snippets ─────────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- AspectRatio is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-aspect-ratio',
` style="aspect-ratio: ${ratio}; overflow: hidden; max-inline-size: ${maxWidth}px;"`,
'>',
' <img src="hero.jpg" alt="" />',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -218,17 +203,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · aspect-ratio is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · ratio maps to --aspect-ratio</span>

27
web/routes/uix/components/auto-grid/+page.svelte
Unescape View File

@ -65,22 +65,6 @@
: `repeat(${columns}, minmax(0, 1fr))`
);
const somaSnippet = $derived(
[
'<!-- AutoGrid is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-grid',
' data-auto-grid',
` style="display: grid; grid-template-columns: ${computedTemplate}; gap: var(--space-${gap});"`,
'>',
' …',
'</div>'
].join('\n')
);
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -233,17 +217,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · auto-grid is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · minChildWidth / columns computes templateColumns</span>

29
web/routes/uix/components/avatar/+page.svelte
Unescape View File

@ -73,23 +73,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Avatar is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<span',
' data-avatar',
' data-image-loaded={loaded}',
' data-image-error={error}',
'>',
' <img src="…" alt="…" />',
' <span>JD</span>',
'</span>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -432,17 +416,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · avatar is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · all props + Badge sub-part</span>

39
web/routes/uix/components/badge/+page.svelte
Unescape View File

@ -72,33 +72,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Badge is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<span',
' data-badge',
variant !== 'soft' && ` data-variant="${variant}"`,
size !== 'md' && ` data-size="${size}"`,
color !== 'primary' && ` data-color="${color}"`,
rounded !== 'full' && ` data-rounded="${rounded}"`,
withDot && ' data-dot',
removable && ' data-removable',
'>',
withDot && ' <span data-badge-dot aria-hidden="true"></span>',
withIcon &&
' <span data-badge-icon aria-hidden="true"><svg>…</svg></span>',
` <span data-badge-label>${labelText || ''}</span>`,
removable &&
' <button type="button" data-badge-remove aria-label="Remove">×</button>',
'</span>'
]
.filter(Boolean)
.join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -318,17 +292,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · badge is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · slots compose inline</span>

34
web/routes/uix/components/banner/+page.svelte
Unescape View File

@ -72,28 +72,7 @@
return () => obs.disconnect();
});
// ── Snippets ─────────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Banner is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<header',
' data-banner',
' role="banner"',
` data-intent="${intent}"`,
` data-variant="${variant}"`,
` data-size="${size}"`,
'>',
withIcon && ' <svg aria-hidden="true">…</svg>',
` <span>${message}</span>`,
withClose && ' <button data-banner-close aria-label="Dismiss">×</button>',
'</header>'
]
.filter(Boolean)
.join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -287,17 +266,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · banner is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · intent / variant / size + composition close</span>

27
web/routes/uix/components/box/+page.svelte
Unescape View File

@ -63,21 +63,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Box is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' style="display: var(--box-display); padding: var(--box-padding); gap: var(--box-gap);"',
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -226,17 +212,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · box is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · every prop maps to a --box-* CSS variable</span>

35
web/routes/uix/components/code-block/+page.svelte
Unescape View File

@ -53,31 +53,6 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- CodeBlock is eidos-native — no soma layer. -->',
'<!-- Equivalent markup: -->',
'',
'<div',
' data-code-block',
` data-variant="${variant}"`,
'>',
' <div data-code-block-header>',
title && ` <span data-code-block-title>${title}</span>`,
language && ` <span data-code-block-lang>${language}</span>`,
showCopy && ' <button data-code-block-copy>Copy</button>',
' </div>',
' <pre data-code-block-pre>',
' <code data-code-block-code>',
' …',
' </code>',
' </pre>',
'</div>'
]
.filter(Boolean)
.join('\n')
);
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -237,16 +212,8 @@
</label>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · code-block is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · variant + header composition</span>

27
web/routes/uix/components/code/+page.svelte
Unescape View File

@ -52,23 +52,6 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Code is eidos-native — no soma layer. -->',
'<!-- Equivalent markup: -->',
'',
'<code',
' data-code',
` data-variant="${variant}"`,
language && ` data-language="${language}"`,
'>',
` ${content}`,
'</code>'
]
.filter(Boolean)
.join('\n')
);
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -234,16 +217,8 @@
</label>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · code is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · variant + axis overrides</span>

30
web/routes/uix/components/container/+page.svelte
Unescape View File

@ -60,24 +60,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Container is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-container',
` data-size="${size}"`,
` data-align="${align}"`,
' style="inline-size: 100%; max-inline-size: var(--container-width-' + size + '); margin-inline: auto; padding-inline: var(--container-padding-inline);"',
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -232,17 +215,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · container is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · size token + auto inline margins</span>

28
web/routes/uix/components/display/+page.svelte
Unescape View File

@ -66,23 +66,7 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Display is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup: -->',
'',
`<${asTag}`,
' data-display',
tracking && ` data-tracking="${tracking}"`,
' style="font-family: var(--style-hero-font-family); …"',
'>',
` ${content}`,
`</${asTag}>`
]
.filter(Boolean)
.join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -337,16 +321,8 @@
</label>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · display is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · hero style + per-axis overrides</span>

28
web/routes/uix/components/flex/+page.svelte
Unescape View File

@ -63,22 +63,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Flex is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-flex',
' style="display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-3);"',
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -231,17 +216,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · flex is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · container props mapped to --flex-* CSS variables</span>

29
web/routes/uix/components/float/+page.svelte
Unescape View File

@ -53,23 +53,7 @@
return () => obs.disconnect();
});
// ── Snippets ─────────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Float is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-float',
` data-side="${side}"`,
` style="float: inline-${side}; margin-inline-${side === 'start' ? 'end' : 'start'}: var(--space-${gap}); max-inline-size: ${childWidth}px;"`,
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -245,17 +229,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · float is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · side / gap + inherited Box props</span>

28
web/routes/uix/components/grid/+page.svelte
Unescape View File

@ -70,22 +70,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Grid is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-grid',
' style="display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);"',
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -275,17 +260,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · grid is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · container props mapped to --grid-* CSS variables</span>

29
web/routes/uix/components/group/+page.svelte
Unescape View File

@ -72,23 +72,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Group is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-flex',
' data-group',
' style="display: flex; flex-direction: row; gap: var(--space-2);"',
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -270,17 +254,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · group is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · cluster props on top of Flex</span>

25
web/routes/uix/components/highlight/+page.svelte
Unescape View File

@ -62,21 +62,6 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Highlight is eidos-native — no soma layer. -->',
'<!-- Equivalent markup (per match): -->',
'',
'<span data-highlight',
` data-color="${color}"`,
'>',
' …text…',
` <mark data-mark data-color="${color}">match</mark>`,
' …more text…',
'</span>'
].join('\n')
);
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -209,16 +194,8 @@
</label>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · highlight is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · text + query + intent</span>

29
web/routes/uix/components/icon/+page.svelte
Unescape View File

@ -162,23 +162,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Icon is an eidos-only primitive — no soma layer. -->',
"<!-- The morfo declares scope:['eidos'] for the contract only. -->",
'',
'<!-- Equivalent semantic markup (not real soma): -->',
'<svg',
' role="img"',
' aria-hidden={decorative}',
'>',
' <title>{title}</title>',
' <path d="…" />',
'</svg>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -390,17 +374,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · icon is eidos-only — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · size, strokeWidth, color</span>

24
web/routes/uix/components/kbd/+page.svelte
Unescape View File

@ -44,20 +44,6 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Kbd is eidos-native — no soma layer. -->',
'<!-- Equivalent markup: -->',
'',
'<kbd',
' data-kbd',
` data-variant="${variant}"`,
'>',
` ${content}`,
'</kbd>'
].join('\n')
);
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -231,16 +217,8 @@
</div>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · kbd is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · variant + size</span>

33
web/routes/uix/components/link/+page.svelte
Unescape View File

@ -66,28 +66,7 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Link is eidos-native — no soma layer. -->',
'<!-- Equivalent markup: -->',
'',
disabled ? '<span' : '<a',
!disabled && ` href="${href}"`,
' data-link',
` data-variant="${variant}"`,
` data-underline="${underline}"`,
` data-color="${color}"`,
external && !disabled && ' target="_blank"',
external && !disabled && ' rel="noopener noreferrer"',
disabled && ' aria-disabled="true"',
'>',
' ' + content,
disabled ? '</span>' : '</a>'
]
.filter(Boolean)
.join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -278,16 +257,8 @@
</label>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · link is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · variant + color + external</span>

24
web/routes/uix/components/mark/+page.svelte
Unescape View File

@ -51,20 +51,6 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Mark is eidos-native — no soma layer. -->',
'<!-- Equivalent markup: -->',
'',
'<mark',
' data-mark',
` data-color="${color}"`,
'>',
` ${content}`,
'</mark>'
].join('\n')
);
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -212,16 +198,8 @@
</p>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · mark is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · intent tint</span>

16
web/routes/uix/components/scroll-frames/+page.svelte
Unescape View File

@ -96,12 +96,7 @@
return () => obs.disconnect();
});
// ── Snippets ──────────────────────────────────────────────────────────
const somaSnippet = [
'<!-- ScrollFrames is an eidos-only primitive — no soma layer. -->',
"<!-- The morfo declares scope:['eidos'] + 0 events (purely scroll-driven). -->"
].join('\n');
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -273,14 +268,7 @@
</label>
</div>
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>headless · none — eidos-only primitive</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>

29
web/routes/uix/components/section/+page.svelte
Unescape View File

@ -52,23 +52,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Section is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-section',
` data-size="${size}"`,
` style="inline-size: 100%; padding-block: var(--section-padding-block-${size});"`,
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -211,17 +195,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · section is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · size-keyed block padding on top of Box</span>

29
web/routes/uix/components/separator/+page.svelte
Unescape View File

@ -67,23 +67,7 @@
return () => obs.disconnect();
});
// ── Snippets ─────────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Separator is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-separator',
` data-orientation="${orientation}"`,
decorative ? ' aria-hidden="true"' : ' role="separator"',
decorative ? '' : ` aria-orientation="${orientation}"`,
'></div>'
]
.filter(Boolean)
.join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -283,17 +267,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · separator is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · orientation drives geometry; decorative drops the role</span>

32
web/routes/uix/components/skeleton/+page.svelte
Unescape View File

@ -68,27 +68,6 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Skeleton is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-skeleton',
shape !== 'rect' && ` data-shape="${shape}"`,
size !== 'md' && ` data-size="${size}"`,
color !== 'neutral' && ` data-color="${color}"`,
animated && ' data-animated=""',
' role="status"',
' aria-busy="true"',
' aria-label="Loading"',
shape === 'rect' && ` style="inline-size: ${width}; block-size: ${height};"`,
'></div>'
]
.filter(Boolean)
.join('\n')
);
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -252,17 +231,8 @@
{/if}
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · skeleton is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · shape + size drive recipe geometry</span>

40
web/routes/uix/components/spinner/+page.svelte
Unescape View File

@ -66,34 +66,7 @@
return () => obs.disconnect();
});
const somaSnippet = $derived(
[
'<!-- Spinner is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-spinner',
variant !== 'ring' && ` data-variant="${variant}"`,
size !== 'md' && ` data-size="${size}"`,
color !== 'primary' && ` data-color="${color}"`,
' role="status"',
' aria-live="polite"',
' aria-label="Loading"',
'>',
variant === 'ring' && ' <span data-spinner-track aria-hidden="true"></span>',
variant === 'dots' &&
' <span data-spinner-track aria-hidden="true">' +
'<span data-spinner-dot></span><span data-spinner-dot></span><span data-spinner-dot></span></span>',
variant === 'bars' &&
' <span data-spinner-track aria-hidden="true">' +
'<span data-spinner-bar></span><span data-spinner-bar></span><span data-spinner-bar></span><span data-spinner-bar></span></span>',
withLabel && ' <span data-spinner-label>Loading…</span>',
'</div>'
]
.filter(Boolean)
.join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -238,17 +211,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · spinner is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · variant swaps Track DOM</span>

29
web/routes/uix/components/stack/+page.svelte
Unescape View File

@ -68,23 +68,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Stack is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-flex',
' data-stack',
' style="display: flex; flex-direction: column; gap: var(--space-3);"',
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -249,17 +233,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · stack is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · 4 ergonomic props on top of Flex</span>

29
web/routes/uix/components/wrap/+page.svelte
Unescape View File

@ -90,23 +90,7 @@
return () => obs.disconnect();
});
// ── Code snippets ─────────────────────────────────────────────────────
const somaSnippet = $derived(
[
'<!-- Wrap is eidos-native — no soma layer. -->',
'<!-- Equivalent semantic markup (not real soma): -->',
'',
'<div',
' data-box',
' data-flex',
' data-wrap',
' style="display: flex; flex-wrap: wrap; gap: var(--space-2);"',
'>',
' …',
'</div>'
].join('\n')
);
// ── Code snippet ──────────────────────────────────────────────────────
const eidosSnippet = $derived(
[
"<script lang='ts'>",
@ -286,17 +270,8 @@
</label>
</div>
<!-- ── Code snippets per layer ─────────────────────────────────── -->
<!-- ── Code snippet (eidos-native — no soma layer) ──────────────── -->
<div data-uix-code>
<div data-uix-code-head>
<span data-uix-layer-badge="soma">soma</span>
<span>n/a · wrap is eidos-native — equivalent markup shown</span>
<span data-uix-code-lang>svelte</span>
</div>
<pre><code>{somaSnippet}</code></pre>
</div>
<div data-uix-code style="margin-top: var(--uix-space-3);">
<div data-uix-code-head>
<span data-uix-layer-badge="eidos">eidos</span>
<span>visual · always wraps · per-axis gap shorthands</span>

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.