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

<script lang="ts">
	import {
		TextArea,
		type TextAreaColor,
		type TextAreaSize,
		type TextAreaVariant
	} from '$uix/eidos/components/textarea';
	import type { TextAreaResize, TextAreaSubmitMode } from '$soma/components/textarea';
	import { compileMorfo } from '$uix/morfo';
	import { textareaMorfo } from '@/uix/morfo/components/textarea';

	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
	type TraceEntry = { event: string; family: string; intent?: string; at: number };

	let tab = $state<Tab>('live');
	let value = $state(
		'Reading is to the mind what exercise is to the body.\n— Joseph Addison'
	);

	// soma props
	let autosize = $state(true);
	let minRows = $state(3);
	let maxRows = $state<number | undefined>(8);
	let rows = $state(4);
	let resize = $state<TextAreaResize>('vertical');
	let submitOn = $state<TextAreaSubmitMode>(false);
	let maxLength = $state<number | undefined>(280);
	let disabled = $state(false);
	let readonly = $state(false);
	let required = $state(false);
	let invalid = $state(false);
	let placeholder = $state('Write something…');

	// eidos props
	let size = $state<TextAreaSize>('md');
	let variant = $state<TextAreaVariant>('surface');
	let color = $state<TextAreaColor>('primary');

	let trace = $state<TraceEntry[]>([]);
	let stageRef = $state<HTMLElement | null>(null);
	let lastSubmitted = $state<string | null>(null);

	const compiled = compileMorfo(textareaMorfo);
	const partsList = $derived([...compiled.parts.byKebab.values()]);
	const events = $derived([...compiled.actions.byName.values()]);

	const sizes: TextAreaSize[] = ['xs', 'sm', 'md', 'lg', 'xl'];
	const variants: TextAreaVariant[] = ['surface', 'outline', 'ghost'];
	const colors: TextAreaColor[] = [
		'primary',
		'secondary',
		'neutral',
		'affirm',
		'fulfill',
		'risk',
		'threat',
		'loss'
	];
	const resizeOpts: TextAreaResize[] = ['none', 'vertical', 'horizontal', 'both'];
	const submitOnOpts: { label: string; value: TextAreaSubmitMode }[] = [
		{ label: 'off', value: false },
		{ label: 'Enter', value: 'enter' },
		{ label: 'Shift+Enter', value: 'shift+enter' },
		{ label: 'Cmd/Ctrl+Enter', value: 'mod+enter' }
	];

	$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();
	});

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

	const somaSnippet = $derived(
		[
			"<script lang='ts'>",
			"  import * as TextArea from '$soma/components/textarea';",
			`  let value = $state('');`,
			'</' + 'script>',
			'',
			'<TextArea.Provider',
			'  bind:value',
			autosize && '  autosize',
			autosize && `  minRows={${minRows}}`,
			autosize && maxRows !== undefined && `  maxRows={${maxRows}}`,
			!autosize && `  rows={${rows}}`,
			`  resize="${resize}"`,
			submitOn !== false && `  submitOn="${submitOn}"`,
			maxLength !== undefined && `  maxLength={${maxLength}}`,
			'>',
			'  <TextArea.Input placeholder="Write…" />',
			maxLength !== undefined && '  <TextArea.Count />',
			'</TextArea.Provider>'
		]
			.filter(Boolean)
			.join('\n')
	);

	const eidosSnippet = $derived(
		[
			"<script lang='ts'>",
			"  import { TextArea } from '$uix/eidos/components/textarea';",
			`  let value = $state('');`,
			'</' + 'script>',
			'',
			'<TextArea',
			'  bind:value',
			autosize && '  autosize',
			autosize && `  minRows={${minRows}}`,
			autosize && maxRows !== undefined && `  maxRows={${maxRows}}`,
			!autosize && `  rows={${rows}}`,
			`  resize="${resize}"`,
			submitOn !== false && `  submitOn="${submitOn}"`,
			maxLength !== undefined && `  maxLength={${maxLength}}`,
			size !== 'md' && `  size="${size}"`,
			variant !== 'surface' && `  variant="${variant}"`,
			color !== 'primary' && `  color="${color}"`,
			'>',
			'  <TextArea.Input placeholder="Write…" />',
			maxLength !== undefined && '  <TextArea.Count />',
			'</TextArea>'
		]
			.filter(Boolean)
			.join('\n')
	);
</script>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Forms · TextArea</div>
		<h1 data-uix-page-title>TextArea</h1>
		<p data-uix-page-lede>
			Multi-line textbox with optional autosize between <code>minRows</code> and
			<code>maxRows</code>, configurable resize handle, character counter, and submit shortcut.
			Soma owns value, autosize math, submit dispatch and Field integration.
		</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>{events.length}</span>
			<span data-uix-meta-pill><span data-uix-meta-key>keyboard</span>1</span>
			<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>{sizes.length}</span>
		</div>
	</header>

	<div data-uix-stage>
		<div data-uix-stage-area bind:this={stageRef}>
			<TextArea
				bind:value
				{autosize}
				{minRows}
				{maxRows}
				{rows}
				{resize}
				{submitOn}
				{maxLength}
				{disabled}
				{readonly}
				{required}
				{invalid}
				{size}
				{variant}
				{color}
				onSubmit={(v) => (lastSubmitted = v)}
			>
				<TextArea.Input {placeholder} aria-label="Notes" />
				{#if maxLength !== undefined}
					<TextArea.Count />
				{/if}
			</TextArea>
		</div>
		<div data-uix-stage-trace>
			<span data-uix-stage-trace-key>trace</span>
			{#if trace.length === 0}
				<span>type, paste or press the submit shortcut to see events</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>chars</span>
				<span data-uix-stage-trace-event>{value.length}</span>
			</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>15</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 · {events.length}e</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>
				<span data-uix-layer-badge="soma">soma</span> owns the textbox model.
				<span data-uix-layer-badge="eidos">eidos</span> owns size, variant and color.
			</p>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="soma">soma</span> props · sizing
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>autosize</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={autosize} />
						<span data-uix-switch-label>{autosize ? 'on' : 'off'}</span>
					</span>
				</label>
				{#if autosize}
					<label data-uix-control>
						<span data-uix-control-label>minRows</span>
						<input type="number" min="1" max="20" bind:value={minRows} />
					</label>
					<label data-uix-control>
						<span data-uix-control-label
							>maxRows
							<span data-uix-control-hint>blank = unbounded</span>
						</span>
						<input
							type="number"
							min="1"
							max="40"
							value={maxRows ?? ''}
							oninput={(e) => {
								const v = e.currentTarget.value;
								maxRows = v === '' ? undefined : Number(v);
							}}
						/>
					</label>
				{:else}
					<label data-uix-control>
						<span data-uix-control-label>rows</span>
						<input type="number" min="1" max="20" bind:value={rows} />
					</label>
				{/if}
				<label data-uix-control>
					<span data-uix-control-label>resize</span>
					<span data-uix-chips role="radiogroup">
						{#each resizeOpts as r (r)}
							<button data-uix-chip data-active={resize === r} onclick={() => (resize = r)}>
								{r}
							</button>
						{/each}
					</span>
				</label>
			</div>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="soma">soma</span> props · submission &amp; counter
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>submitOn</span>
					<span data-uix-chips role="radiogroup">
						{#each submitOnOpts as opt (opt.label)}
							<button
								data-uix-chip
								data-active={submitOn === opt.value}
								onclick={() => (submitOn = opt.value)}>{opt.label}</button
							>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>
						maxLength
						<span data-uix-control-hint>blank = unlimited</span>
					</span>
					<input
						type="number"
						min="1"
						value={maxLength ?? ''}
						oninput={(e) => {
							const v = e.currentTarget.value;
							maxLength = v === '' ? undefined : Number(v);
						}}
					/>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>placeholder</span>
					<input type="text" bind:value={placeholder} />
				</label>
			</div>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="soma">soma</span> props · flags
			</div>
			<div data-uix-controls>
				{#each ['disabled', 'readonly', 'required', 'invalid'] as flag}
					<label data-uix-control>
						<span data-uix-control-label>{flag}</span>
						<span data-uix-switch>
							{#if flag === 'disabled'}
								<input type="checkbox" bind:checked={disabled} />
								<span data-uix-switch-label>{disabled ? 'on' : 'off'}</span>
							{:else if flag === 'readonly'}
								<input type="checkbox" bind:checked={readonly} />
								<span data-uix-switch-label>{readonly ? 'on' : 'off'}</span>
							{:else if flag === 'required'}
								<input type="checkbox" bind:checked={required} />
								<span data-uix-switch-label>{required ? 'on' : 'off'}</span>
							{:else}
								<input type="checkbox" bind:checked={invalid} />
								<span data-uix-switch-label>{invalid ? 'on' : 'off'}</span>
							{/if}
						</span>
					</label>
				{/each}
			</div>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="eidos">eidos</span> props · presentation
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>size</span>
					<span data-uix-chips role="radiogroup">
						{#each sizes as s (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>variant</span>
					<span data-uix-chips role="radiogroup">
						{#each variants as v (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>color</span>
					<span data-uix-chips role="radiogroup">
						{#each colors as c (c)}
							<button data-uix-chip data-active={color === c} onclick={() => (color = c)}>{c}</button>
						{/each}
					</span>
				</label>
			</div>

			{#if submitOn !== false}
				<div data-uix-subsection-head>Last submitted</div>
				<pre data-uix-snippet><code>{lastSubmitted ?? '— no submission yet —'}</code></pre>
			{/if}
		</section>
	{:else if tab === 'api'}
		<section data-uix-section>
			<h2 data-uix-section-title>API</h2>
			<table data-uix-api-table>
				<thead>
					<tr><th>prop</th><th>type</th><th>default</th><th>description</th></tr>
				</thead>
				<tbody>
					<tr><td>value</td><td>string</td><td>''</td><td>Current text. Bindable.</td></tr>
					<tr><td>autosize</td><td>boolean</td><td>false</td><td>Grow between minRows/maxRows.</td></tr>
					<tr><td>minRows</td><td>number</td><td>2</td><td>Lower bound when autosize is on.</td></tr>
					<tr><td>maxRows</td><td>number?</td><td>—</td><td>Upper bound. Unbounded when omitted.</td></tr>
					<tr><td>rows</td><td>number</td><td>3</td><td>Fixed row count (ignored under autosize).</td></tr>
					<tr><td>resize</td><td>'none' | 'vertical' | 'horizontal' | 'both'</td><td>'vertical'</td><td>CSS resize. Suppressed under autosize.</td></tr>
					<tr><td>submitOn</td><td>false | 'enter' | 'shift+enter' | 'mod+enter'</td><td>false</td><td>Submit shortcut. Enter inserts newline by default.</td></tr>
					<tr><td>maxLength</td><td>number?</td><td>—</td><td>Character cap. Value never exceeds it.</td></tr>
					<tr><td>disabled / readonly / required / invalid</td><td>boolean</td><td>false</td><td>OR-merged with parent Field.</td></tr>
					<tr><td>placeholder</td><td>string?</td><td>—</td><td>Native placeholder.</td></tr>
					<tr><td>name</td><td>string?</td><td>—</td><td>Form submission name.</td></tr>
					<tr><td>onValueChange</td><td>(v: string) =&gt; void</td><td>—</td><td>Fired on every keystroke.</td></tr>
					<tr><td>onSubmit</td><td>(v: string) =&gt; void</td><td>—</td><td>Fired on the configured submit shortcut.</td></tr>
					<tr><td>size</td><td>'xs' | 'sm' | 'md' | 'lg' | 'xl'</td><td>'md'</td><td>Eidos visual scale.</td></tr>
					<tr><td>variant / color</td><td>—</td><td>'surface' / 'primary'</td><td>Eidos chrome + accent.</td></tr>
				</tbody>
			</table>
		</section>
	{:else if tab === 'morfo'}
		<section data-uix-section>
			<h2 data-uix-section-title>
				<span data-uix-layer-badge="morfo">morfo</span> contract
			</h2>
			<p data-uix-section-desc>
				Parts and events declared by <code>textareaMorfo</code>. Soma exports
				<code>data-textarea</code> attrs that Sema and the runtime consume.
			</p>
			<div data-uix-subsection-head>Parts ({partsList.length})</div>
			<table data-uix-api-table>
				<thead><tr><th>part</th><th>element</th><th>role</th><th>archetype</th></tr></thead>
				<tbody>
					{#each partsList as p (p.kebab)}
						<tr>
							<td><code>{p.kebab}</code></td>
							<td><code>{p.defaultElement}</code></td>
							<td>{p.role ?? '—'}</td>
							<td>{p.archetype ?? '—'}</td>
						</tr>
					{/each}
				</tbody>
			</table>

			<div data-uix-subsection-head>Events ({events.length})</div>
			<table data-uix-api-table>
				<thead><tr><th>name</th><th>family</th><th>verb</th><th>intent</th></tr></thead>
				<tbody>
					{#each events as e (e.name)}
						<tr>
							<td><code>{e.name}</code></td>
							<td>{e.semantic?.family ?? '—'}</td>
							<td>{e.semantic?.verb ?? '—'}</td>
							<td>{e.semantic?.intent ?? '—'}</td>
						</tr>
					{/each}
				</tbody>
			</table>
		</section>
	{:else if tab === 'sema'}
		<section data-uix-section>
			<h2 data-uix-section-title>
				<span data-uix-layer-badge="sema">sema</span> events
			</h2>
			<p data-uix-section-desc>
				Type characters or paste a large block of text. Each meaningful action emits a sema event.
				The morfo declares 3 events:
			</p>
			<ul>
				<li>
					<code>commit-input</code> — value committed (every keystroke). Family
					<code>commit</code>, intent <code>neutral</code>.
				</li>
				<li>
					<code>commit-submit</code> — user pressed the submit shortcut. Same family, neutral intent.
				</li>
				<li>
					<code>shift-count-overflow</code> — user attempted to type past <code>maxLength</code>.
					Family <code>shift</code>, intent <code>threat</code>.
				</li>
			</ul>
			<p data-uix-section-desc>
				Try setting <code>maxLength</code> to 12 and pasting more text — you'll see the overflow
				event in the trace and the counter chip will turn red.
			</p>
		</section>
	{:else if tab === 'recipe'}
		<section data-uix-section>
			<h2 data-uix-section-title>Recipe</h2>
			<div data-uix-subsection-head>
				<span data-uix-layer-badge="soma">soma</span> · primitive only
			</div>
			<pre data-uix-snippet><code>{somaSnippet}</code></pre>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="eidos">eidos</span> · with chrome
			</div>
			<pre data-uix-snippet><code>{eidosSnippet}</code></pre>
		</section>
	{:else if tab === 'a11y'}
		<section data-uix-section>
			<h2 data-uix-section-title>Accessibility</h2>
			<ul>
				<li>
					Renders a native <code>&lt;textarea&gt;</code> with
					<code>role="textbox"</code> and <code>aria-multiline="true"</code>. APG textbox pattern.
				</li>
				<li>
					Inside a <code>&lt;Field&gt;</code> with a <code>&lt;Field.Label&gt;</code>, the textarea
					inherits the label via <code>aria-labelledby</code>; outside Field a translated
					<code>aria-label="Text area"</code> is applied.
				</li>
				<li>
					<code>disabled</code>, <code>readonly</code>, <code>required</code> and
					<code>invalid</code> mirror to their native attributes AND ARIA equivalents.
				</li>
				<li>
					The character counter has <code>aria-live="polite"</code> so screen readers announce
					updates without barging.
				</li>
				<li>
					When <code>submitOn</code> is enabled the morfo declares an
					<code>Enter</code> keyboard binding so AT users discover the shortcut.
				</li>
				<li>
					<code>maxLength</code> is enforced both via the native attribute AND a soft clamp in
					soma, so paste events that exceed the limit are truncated cleanly.
				</li>
			</ul>
		</section>
	{/if}
</div>