svelte-kit-vice/web/routes/uix/components/fab/+page.svelte

<script lang="ts">
	import { Fab, type FabSize, type FabPlacement } from '$uix/eidos/components/fab';
	import { SvgPlus } from '$uix/eidos/components/svg';
	import { compileMorfo } from '$uix/morfo';
	import { fabMorfo } from '@/uix/morfo/components/fab';
	import type { ButtonVariant } from '$uix/eidos/components/button';

	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
	type TraceEntry = { event: string; family: string; intent?: string; at: number };
	let tab = $state<Tab>('live');
	let trace = $state<TraceEntry[]>([]);
	let stageRef = $state<HTMLElement | null>(null);

	// ── Live state — every public prop is a control ────────────────────────
	let extended = $state(false);
	let size = $state<FabSize>('md');
	let placement = $state<FabPlacement>('static');
	let variant = $state<ButtonVariant>('solid');
	let intent = $state<'neutral' | 'affirm' | 'fulfill' | 'risk' | 'threat' | 'loss'>('neutral');
	let color = $state<'primary' | 'secondary' | 'neutral'>('primary');
	let disabled = $state(false);
	let label = $state('Compose');
	let count = $state(0);

	const sizes = ['sm', 'md', 'lg'] as const;
	const placements = ['static', 'bottom-end', 'bottom-start', 'top-end', 'top-start'] as const;
	const variants = ['solid', 'soft', 'surface', 'outline', 'ghost', 'plain'] as const;
	const intents = ['neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as const;
	const colors = ['primary', 'secondary', 'neutral'] as const;

	// ── Compiled morfo ─────────────────────────────────────────────────────
	const compiled = compileMorfo(fabMorfo);
	const partsList = $derived([...compiled.parts.byKebab.values()]);
	const events = $derived([...compiled.actions.byName.values()]);

	function fmtTime(at: number): string {
		const d = new Date(at);
		return `${String(d.getSeconds()).padStart(2, '0')}.${String(d.getMilliseconds()).padStart(3, '0')}`;
	}

	$effect(() => {
		const el = stageRef;
		if (!el) return;
		const obs = new MutationObserver((mutations) => {
			for (const m of mutations) {
				if (m.attributeName !== 'data-event') continue;
				const target = m.target as Element;
				const ev = target.getAttribute('data-event');
				if (!ev) continue;
				trace = [
					{
						event: ev,
						family: target.getAttribute('data-event-family') ?? '—',
						intent: target.getAttribute('data-event-intent') ?? undefined,
						at: Date.now()
					},
					...trace
				].slice(0, 6);
			}
		});
		obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
		return () => obs.disconnect();
	});

	// ── Code snippet (eidos-native — no soma layer) ────────────────────────
	const eidosSnippet = $derived(
		[
			"<script lang='ts'>",
			"  import { Fab } from '$uix/eidos/components/fab';",
			"  import { SvgPlus } from '$uix/eidos/components/svg';",
			'</' + 'script>',
			'',
			'<Fab',
			extended && '  extended',
			size !== 'md' && `  size="${size}"`,
			placement !== 'bottom-end' && `  placement="${placement}"`,
			variant !== 'solid' && `  variant="${variant}"`,
			intent !== 'neutral' && `  intent="${intent}"`,
			color !== 'primary' && intent === 'neutral' && `  color="${color}"`,
			disabled && '  disabled',
			`  aria-label="${extended ? label : 'Compose'}"`,
			'  onclick={compose}',
			'>',
			'  {#snippet icon()}<SvgPlus />{/snippet}',
			extended && `  ${label}`,
			'</Fab>'
		]
			.filter(Boolean)
			.join('\n')
	);
</script>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Controls · Fab</div>
		<h1 data-uix-page-title>Fab</h1>
		<p data-uix-page-lede>
			Floating Action Button — a prominent, elevated button for a screen's primary action. A
			circular icon by default, or an <code>extended</code> pill with a label. It floats over
			content (own <code>placement</code>, fixed) and lifts on hover. Pure composition over
			<a href="/uix/components/button">&lt;Button&gt;</a> — 0 own events, interactive by composition.
		</p>
		<div data-uix-page-meta>
			<span data-uix-meta-pill>
				<span data-uix-meta-key>parts</span>{compiled.parts.order.length}
			</span>
			<span data-uix-meta-pill>
				<span data-uix-meta-key>events</span>0
			</span>
			<span data-uix-meta-pill>
				<span data-uix-meta-key>composes</span>Button
			</span>
			<span data-uix-meta-pill>
				<span data-uix-meta-key>scope</span>eidos
			</span>
		</div>
	</header>

	<!-- Live preview always rendered. The "screen" box uses `contain: layout` so a
	     floating FAB pins to ITS corners (it's the containing block for the fixed
	     FAB), instead of the whole viewport — otherwise the demo FAB would jump
	     over the page chrome. -->
	<div data-uix-stage>
		<div
			data-uix-stage-area
			bind:this={stageRef}
			style="position: relative; contain: layout; min-block-size: 300px; border-radius: var(--uix-radius-lg); overflow: hidden;"
		>
			<div style="padding: var(--uix-space-4); color: var(--uix-text-faint); font-size: 0.85em; max-inline-size: 30ch;">
				A page. The FAB floats in {placement === 'static' ? 'flow (static)' : `the ${placement} corner`} of this box.
			</div>
			<Fab
				{extended}
				{size}
				{placement}
				{variant}
				{intent}
				{color}
				{disabled}
				aria-label={extended ? label : 'Compose'}
				onclick={() => (count += 1)}
			>
				{#snippet icon()}<SvgPlus />{/snippet}
				{#if extended}{label}{/if}
			</Fab>
		</div>
		<div data-uix-stage-trace>
			<span data-uix-stage-trace-key>trace</span>
			{#if trace.length === 0}
				<span>click the FAB to fire its action</span>
			{:else}
				{#each trace.slice(0, 3) as entry}
					<span
						><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent
							? ' · ' + entry.intent
							: ''}</span
					>
					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
				{/each}
			{/if}
			<span style="margin-inline-start: auto;">
				<span data-uix-stage-trace-key>clicks</span>
				{count}
			</span>
		</div>
	</div>

	<div data-uix-tabs role="tablist">
		<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
		<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>
			API <span data-uix-tab-count>8</span>
		</button>
		<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
			<span data-uix-layer-badge="morfo">morfo</span>
			<span data-uix-tab-count>{partsList.length}p · 0e</span>
		</button>
		<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
			<span data-uix-layer-badge="sema">sema</span>
			<span data-uix-tab-count>{events.length}</span>
		</button>
		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button
		>
		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
	</div>

	{#if tab === 'live'}
		<section data-uix-section>
			<h2 data-uix-section-title>Controls</h2>
			<p data-uix-section-desc>
				Fab is eidos-only — no <span data-uix-layer-badge="soma">soma</span> split. The visual props
				forward to the composed <a href="/uix/components/button">&lt;Button&gt;</a>; the FAB owns
				size, shape, elevation and placement.
			</p>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="eidos">eidos</span> props · FAB treatment
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>extended <span data-uix-control-hint>pill + label</span></span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={extended} />
						<span data-uix-switch-label>{extended ? 'on' : 'off'}</span>
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>size</span>
					<span data-uix-chips role="radiogroup">
						{#each sizes as s}
							<button data-uix-chip data-active={size === s} onclick={() => (size = s)}>{s}</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>placement <span data-uix-control-hint>fixed; static = in-flow</span></span>
					<span data-uix-chips role="radiogroup">
						{#each placements as p}
							<button data-uix-chip data-active={placement === p} onclick={() => (placement = p)}>{p}</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>disabled</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={disabled} />
						<span data-uix-switch-label>{disabled ? 'on' : 'off'}</span>
					</span>
				</label>
			</div>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="eidos">eidos</span> props · forwarded to Button
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>variant</span>
					<span data-uix-chips role="radiogroup">
						{#each variants as v}
							<button data-uix-chip data-active={variant === v} onclick={() => (variant = v)}>{v}</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>intent</span>
					<span data-uix-chips role="radiogroup">
						{#each intents as i}
							<button data-uix-chip data-active={intent === i} onclick={() => (intent = i)}>{i}</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>color <span data-uix-control-hint>under intent=neutral</span></span>
					<span data-uix-chips role="radiogroup">
						{#each colors as c}
							<button data-uix-chip data-active={color === c} onclick={() => (color = c)}>{c}</button>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>label <span data-uix-control-hint>extended only</span></span>
					<input type="text" bind:value={label} />
				</label>
			</div>

			<div data-uix-code>
				<div data-uix-code-head>
					<span data-uix-layer-badge="eidos">eidos</span>
					<span>visual · composes Button</span>
					<span data-uix-code-lang>svelte</span>
				</div>
				<pre><code>{eidosSnippet}</code></pre>
			</div>
		</section>
	{/if}

	{#if tab === 'api'}
		<section data-uix-section>
			<h2 data-uix-section-title>API reference</h2>
			<p data-uix-section-desc>
				FAB-specific props below; everything else (<code>intent</code>, <code>color</code>,
				<code>shape</code>, <code>loading</code>, <code>onclick</code>, <code>aria-label</code>…)
				forwards to <a href="/uix/components/button">Button</a>. Button's <code>size</code> /
				<code>iconOnly</code> / <code>rounded</code> / <code>block</code> are owned by the FAB.
			</p>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
					<tbody>
						<tr><td class="name">extended</td><td class="type">boolean</td><td class="default">false</td><td>Pill with a visible label vs circular icon-only.</td></tr>
						<tr><td class="name">size</td><td class="type">'sm' | 'md' | 'lg'</td><td class="default">'md'</td><td>FAB scale (≈ 40 / 56 / 72px) — its own, larger than a control.</td></tr>
						<tr><td class="name">placement</td><td class="type">'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | 'static'</td><td class="default">'bottom-end'</td><td>Where it floats (fixed + safe-area). <code>static</code> = consumer positions it.</td></tr>
						<tr><td class="name">offset</td><td class="type">string</td><td class="default">var(--fab-offset)</td><td>Distance from the edges when floating.</td></tr>
						<tr><td class="name">icon</td><td class="type">Snippet</td><td class="default empty">—</td><td>The glyph (visible in both forms).</td></tr>
						<tr><td class="name">variant</td><td class="type">ButtonVariant</td><td class="default">'solid'</td><td>Forwarded to Button (FAB defaults to the prominent solid).</td></tr>
						<tr><td class="name">intent / color</td><td class="type">like Button</td><td class="default">neutral / primary</td><td>Forwarded — the screen's primary action.</td></tr>
						<tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">—</td><td>Accessible name. Required for the icon-only form.</td></tr>
					</tbody>
				</table>
			</div>

			<div data-uix-subsection-head>Reference comparison</div>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Library</th><th>Closest equivalent</th><th>Difference vs UIX</th></tr></thead>
					<tbody>
						<tr><td class="name">material-web</td><td><code>&lt;md-fab&gt;</code></td><td>Same model (regular + extended, sm/md/lg). UIX composes its own Button for chrome + intent palette.</td></tr>
						<tr><td class="name">mui</td><td><code>&lt;Fab&gt;</code> + <code>&lt;SpeedDial&gt;</code></td><td>UIX ships the FAB; speed-dial (fan-out menu) is a deferred follow-up.</td></tr>
						<tr><td class="name">ant-design</td><td><code>&lt;FloatButton&gt;</code></td><td>Both own placement. UIX drops badge/BackTop (compose Badge / out of scope).</td></tr>
						<tr><td class="name">radix / ark / chakra</td><td>— (none)</td><td>Headless libs have no FAB — you compose a button + positioning, which is exactly what UIX packages here.</td></tr>
					</tbody>
				</table>
			</div>
		</section>
	{/if}

	{#if tab === 'morfo'}
		<section data-uix-section>
			<h2 data-uix-section-title>
				<span data-uix-layer-badge="morfo">morfo</span> · declarative contract
			</h2>
			<p data-uix-section-desc>
				scope-eidos — no soma runtime. The morfo declares the FAB's own contract: the action role,
				the accessible name, and the <code>data-fab</code> structural identity (over the composed
				Button). role / disabled come from Button — referenced, never re-stamped. Source:
				<code>src/uix/morfo/components/fab.ts</code>.
			</p>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Field</th><th>Value</th></tr></thead>
					<tbody>
						<tr><td class="name">name</td><td class="type">"{fabMorfo.name}"</td></tr>
						<tr><td class="name">kebab</td><td class="type">"{fabMorfo.kebab}"</td></tr>
						<tr><td class="name">scope</td><td class="type">[{fabMorfo.scope.map((s) => `"${s}"`).join(', ')}]</td></tr>
						<tr><td class="name">apg</td><td><a href={fabMorfo.apg} target="_blank" rel="noreferrer">button ↗</a></td></tr>
						<tr><td class="name">parts.length</td><td class="default">{fabMorfo.parts.length}</td></tr>
						<tr><td class="name">events.length</td><td class="default">0</td></tr>
					</tbody>
				</table>
			</div>

			<div data-uix-subsection-head>Parts</div>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Archetype</th><th>States</th></tr></thead>
					<tbody>
						{#each partsList as part}
							<tr>
								<td class="name">{part.kebab}</td>
								<td><code data-uix-part-marker>[{part.marker}]</code></td>
								<td class="type">&lt;{part.defaultElement}&gt;</td>
								<td class="type">{part.role ?? '—'}</td>
								<td class="default">{part.archetype ?? '—'}</td>
								<td class="default">{part.states.length ? part.states.join(' | ') : '—'}</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		</section>
	{/if}

	{#if tab === 'sema'}
		<section data-uix-section id="sema">
			<h2 data-uix-section-title>
				<span data-uix-layer-badge="sema">sema</span> · events
			</h2>
			<p data-uix-section-desc>
				Fab declares no events of its own — it is interactive <strong>by composition</strong>. The
				press fires <code>contact-activate</code> on the composed Button. Click the FAB and watch
				the trace strip.
			</p>
			<div data-uix-empty-state>No Sema events declared.</div>
		</section>
	{/if}

	{#if tab === 'recipe'}
		<section data-uix-section>
			<h2 data-uix-section-title>Eidos recipe</h2>
			<p data-uix-section-desc>
				The composed <a href="/uix/components/button">&lt;Button&gt;</a> paints the chrome;
				<code>src/uix/eidos/components/fab/fab.css</code> owns the FAB treatment — elevation,
				size scale, circular/extended shape, and floating placement.
			</p>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Selector</th><th>Source</th><th>Purpose</th></tr></thead>
					<tbody>
						<tr><td class="name"><code>[data-fab]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Elevation tokens + rest shadow + transition.</td></tr>
						<tr><td class="name"><code>[data-fab]:hover:not([data-disabled])</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Hover lift via the <code>translate</code> property (composes with Button's press-squeeze).</td></tr>
						<tr><td class="name"><code>[data-button][data-fab][data-fab-size='…']</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>FAB diameter + glyph size (out-specifies Button).</td></tr>
						<tr><td class="name"><code>[data-fab][data-extended]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Pill: auto width + label padding + gap.</td></tr>
						<tr><td class="name"><code>[data-fab][data-placement='…']</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Fixed positioning + safe-area inset.</td></tr>
					</tbody>
				</table>
			</div>
		</section>
	{/if}

	{#if tab === 'a11y'}
		<section data-uix-section>
			<h2 data-uix-section-title>Accessibility</h2>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Concern</th><th>Contract</th></tr></thead>
					<tbody>
						<tr><td class="name">Role</td><td>A native <code>&lt;button&gt;</code> (from Button) — <code>role="button"</code>, focusable, Enter/Space activate.</td></tr>
						<tr><td class="name">Accessible name</td><td>Icon-only FAB has no visible text, so <code>aria-label</code> is required. Extended FAB names itself from the visible label (keep <code>aria-label</code> when the label is terse).</td></tr>
						<tr><td class="name">Disabled</td><td><code>disabled</code> (from Button) removes it from the tab order + drops the elevation.</td></tr>
						<tr><td class="name">Motion</td><td>The hover lift is suppressed under <span data-uix-kbd>prefers-reduced-motion</span>.</td></tr>
						<tr><td class="name">Placement</td><td>Floating corners clear notches / home indicators via <code>env(safe-area-inset-*)</code>. A fixed FAB shouldn't obscure focusable content — keep it clear of interactive bottom bars.</td></tr>
					</tbody>
				</table>
			</div>
		</section>
	{/if}
</div>