svelte-kit-vice/web/routes/uix/components/time-range-picker/+page.svelte

<script lang="ts">
	import {
		TimeRangePicker,
		type TimeRangePickerColor,
		type TimeRangePickerSize,
		type TimeRangePickerVariant,
		type InputSnippetProps
	} from '$uix/eidos/components/time-range-picker';
	import { PickerShell } from '$uix/eidos/components/picker-shell';
	import { compileMorfo } from '$uix/morfo';
	import { timeRangePickerMorfo } from '@/uix/morfo/components/time-range-picker';
	import { timeRangeFieldMorfo } from '@/uix/morfo/components/time-range-field';
	import { popoverMorfo } from '@/uix/morfo/components/popover';
	import { getActiveUix } from '$active-uix';
	import {
		Time,
		type TimeValue,
		type TimeRange,
		type TimeGranularity,
		type HourCycle,
		type EditableTimeSegmentPart
	} from '$libs/days';

	const uix = getActiveUix();

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

	const businessRange: TimeRange = {
		start: new Time(9, 0, 0),
		end: new Time(17, 0, 0)
	};
	const lunchRange: TimeRange = {
		start: new Time(13, 0, 0),
		end: new Time(14, 30, 0)
	};

	let tab = $state<Tab>('live');
	let trace = $state<TraceEntry[]>([]);
	let stageRef = $state<HTMLElement | null>(null);
	let value = $state<TimeRange | undefined>(businessRange);
	let placeholder = $state<TimeValue>(new Time(9, 0, 0));
	let open = $state(false);
	let mode = $state<'inline' | 'modal'>('inline');
	let required = $state(false);
	let disabled = $state(false);
	let readonly = $state(false);
	let lockSeconds = $state(false);
	let ruler = $state(false);
	let granularity = $state<TimeGranularity>('minute');
	let hourCycle = $state<HourCycle>(24);
	let bounds = $state(false);
	let closeOnRangeComplete = $state(false);
	let locale = $state('en-US');
	let size = $state<TimeRangePickerSize>('md');
	let variant = $state<TimeRangePickerVariant>('surface');
	let color = $state<TimeRangePickerColor>('primary');

	// Footer composition toggles
	let showFooter = $state(true);
	let showClear = $state(true);
	let showCancel = $state(true);
	let showClose = $state(true);

	const compiled = compileMorfo(timeRangePickerMorfo);
	const fieldCompiled = compileMorfo(timeRangeFieldMorfo);
	const popoverCompiled = compileMorfo(popoverMorfo);
	const partsList = $derived([...compiled.parts.byKebab.values()]);
	const events = $derived([...compiled.actions.byName.values()]);
	const fieldEvents = $derived([...fieldCompiled.actions.byName.values()]);
	const popoverEvents = $derived([...popoverCompiled.actions.byName.values()]);
	const eventRows = $derived([
		...events.map((action) => ({ owner: 'TimeRangePicker', action })),
		...fieldEvents.map((action) => ({ owner: 'TimeRangeField', action })),
		...popoverEvents.map((action) => ({ owner: 'Popover', action }))
	]);
	const readonlySegments = $derived<EditableTimeSegmentPart[]>(lockSeconds ? ['second'] : []);
	const valueLabel = $derived(
		value?.start && value?.end
			? `${value.start.toString()} → ${value.end.toString()}`
			: 'empty'
	);

	const minValue: TimeValue = new Time(8, 0, 0);
	const maxValue: TimeValue = new Time(20, 0, 0);

	function sameRange(a: TimeRange | undefined, b: TimeRange): boolean {
		return (
			a?.start?.toString() === b.start?.toString() && a?.end?.toString() === b.end?.toString()
		);
	}

	function setDemoValue(kind: 'business' | 'lunch' | 'empty'): void {
		if (kind === 'empty') {
			value = undefined;
			return;
		}
		value = kind === 'business' ? businessRange : lunchRange;
	}

	function fmtTime(at: number): string {
		return new Intl.DateTimeFormat(undefined, {
			minute: '2-digit',
			second: '2-digit',
			fractionalSecondDigits: 2
		}).format(at);
	}

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

	const somaSnippet = $derived(
		[
			"<script lang='ts'>",
			"  import * as TimeRangePicker from '$soma/components/time-range-picker';",
			"  import { Time, type TimeRange } from '$libs/days';",
			'',
			'  let value = $state<TimeRange | undefined>({',
			'    start: new Time(9, 0, 0),',
			'    end: new Time(17, 0, 0)',
			'  });',
			'  let open = $state(false);',
			'</' + 'script>',
			'',
			'<TimeRangePicker.Provider',
			'  bind:value bind:open',
			mode !== 'inline' && `  mode="${mode}"`,
			granularity !== 'minute' && `  granularity="${granularity}"`,
			hourCycle !== 24 && `  hourCycle={${hourCycle}}`,
			closeOnRangeComplete && '  closeOnRangeComplete',
			required && '  required',
			disabled && '  disabled',
			readonly && '  readonly',
			'>',
			'  <TimeRangePicker.Input type="start">…</TimeRangePicker.Input>',
			'  <TimeRangePicker.Input type="end">…<TimeRangePicker.Trigger /></TimeRangePicker.Input>',
			'  <TimeRangePicker.Clock>',
			'    <TimeRangePicker.HourSlider type="start" />',
			'    <TimeRangePicker.MinuteSlider type="start" />',
			'    <TimeRangePicker.HourSlider type="end" />',
			'    <TimeRangePicker.MinuteSlider type="end" />',
			'  </TimeRangePicker.Clock>',
			'</TimeRangePicker.Provider>'
		]
			.filter(Boolean)
			.join('\n')
	);

	const eidosSnippet = $derived(
		[
			"<script lang='ts'>",
			"  import { TimeRangePicker } from '$uix/eidos/components/time-range-picker';",
			"  import { PickerShell } from '$uix/eidos/components/picker-shell';",
			"  import { Time, type TimeRange } from '$libs/days';",
			'',
			'  let value = $state<TimeRange | undefined>({',
			'    start: new Time(9, 0, 0),',
			'    end: new Time(17, 0, 0)',
			'  });',
			'  let open = $state(false);',
			'</' + 'script>',
			'',
			'<TimeRangePicker',
			'  bind:value bind:open',
			size !== 'md' && `  size="${size}"`,
			variant !== 'surface' && `  variant="${variant}"`,
			color !== 'primary' && `  color="${color}"`,
			mode !== 'inline' && `  mode="${mode}"`,
			granularity !== 'minute' && `  granularity="${granularity}"`,
			hourCycle !== 24 && `  hourCycle={${hourCycle}}`,
			closeOnRangeComplete && '  closeOnRangeComplete',
			required && '  required',
			disabled && '  disabled',
			readonly && '  readonly',
			lockSeconds && "  startReadonlySegments={['second']} endReadonlySegments={['second']}",
			bounds && '  minValue={new Time(8, 0, 0)} maxValue={new Time(20, 0, 0)}',
			'>',
			'  <TimeRangePicker.Input type="start">',
			'    {#snippet children({ segments })}',
			'      {#each segments as { part, value }, i (`${part}-${i}`)}',
			'        <TimeRangePicker.Segment {part}>{value}</TimeRangePicker.Segment>',
			'      {/each}',
			'    {/snippet}',
			'  </TimeRangePicker.Input>',
			'  <TimeRangePicker.Input type="end">',
			'    {#snippet children({ segments })}',
			'      {#each segments as { part, value }, i (`${part}-${i}`)}',
			'        <TimeRangePicker.Segment {part}>{value}</TimeRangePicker.Segment>',
			'      {/each}',
			'      <TimeRangePicker.Trigger />',
			'    {/snippet}',
			'  </TimeRangePicker.Input>',
			'  <TimeRangePicker.Portal>',
			'    <TimeRangePicker.Content>',
			'      <PickerShell.Body>',
			'        <TimeRangePicker.Clock>',
			'          <div class="time-range-picker-endpoint">',
			'            <span class="time-range-picker-endpoint-label">Start</span>',
			'            <TimeRangePicker.HourSlider type="start" />',
			'            <TimeRangePicker.MinuteSlider type="start" />',
			granularity === 'second' && '            <TimeRangePicker.SecondSlider type="start" />',
			hourCycle === 12 && '            <TimeRangePicker.DayPeriodToggle type="start" />',
			'          </div>',
			'          <div class="time-range-picker-endpoint">',
			'            <span class="time-range-picker-endpoint-label">End</span>',
			'            <TimeRangePicker.HourSlider type="end" />',
			'            <TimeRangePicker.MinuteSlider type="end" />',
			granularity === 'second' && '            <TimeRangePicker.SecondSlider type="end" />',
			hourCycle === 12 && '            <TimeRangePicker.DayPeriodToggle type="end" />',
			'          </div>',
			'        </TimeRangePicker.Clock>',
			'      </PickerShell.Body>',
			showFooter && (showClear || showCancel || showClose) && '      <TimeRangePicker.Footer>',
			showFooter && showClear && '        <TimeRangePicker.Clear />',
			showFooter && showCancel && '        <TimeRangePicker.Cancel />',
			showFooter && showClose && '        <TimeRangePicker.Close />',
			showFooter && (showClear || showCancel || showClose) && '      </TimeRangePicker.Footer>',
			'    </TimeRangePicker.Content>',
			'  </TimeRangePicker.Portal>',
			'</TimeRangePicker>'
		]
			.filter(Boolean)
			.join('\n')
	);
</script>

<div data-uix-canvas-inner>
	<header>
		<div data-uix-eyebrow>Form · TimeRangePicker</div>
		<h1 data-uix-page-title>TimeRangePicker</h1>
		<p data-uix-page-lede>
			Paired segmented time inputs (start + end) + popover Clock with
			per-endpoint sliders and an optional <code>DayPeriodToggle</code>
			when <code>hourCycle=12</code>. The shared Trigger lives inside
			the end Input. <span data-uix-layer-badge="soma">soma</span> owns
			the range state machine (empty → pending → complete), the open
			lifecycle and the 5 own events
			(<code>open</code>/<code>close-commit</code>/<code>close-cancel</code>/<code>close-dismiss</code>/<code>commit-clear</code>);
			<span data-uix-layer-badge="eidos">eidos</span> adds size /
			variant / color recipe, the per-channel accent (hour=primary,
			minute=secondary, second=neutral · end variant slightly muted),
			the optional ruler and the canonical Footer composition. Each
			endpoint can be locked per-segment via
			<code>startReadonlySegments</code> / <code>endReadonlySegments</code>.
		</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>inherited</span>{fieldEvents.length} TimeRangeField · {popoverEvents.length} Popover
			</span>
			<span data-uix-meta-pill>
				<span data-uix-meta-key>sizes</span>3
			</span>
			<span data-uix-meta-pill>
				<span data-uix-meta-key>apg</span>
				<a href={timeRangePickerMorfo.apg} target="_blank" rel="noreferrer">dialog-modal ↗</a>
			</span>
			<span data-uix-meta-pill>
				<span data-uix-meta-key>value</span>{valueLabel}
			</span>
		</div>
	</header>

	<div data-uix-stage>
		<div data-uix-stage-area bind:this={stageRef}>
			<div style="inline-size: min(32rem, 100%);">
				<TimeRangePicker
					bind:value
					bind:placeholder
					bind:open
					{mode}
					{required}
					{disabled}
					{readonly}
					startReadonlySegments={readonlySegments}
					endReadonlySegments={readonlySegments}
					{granularity}
					{hourCycle}
					{locale}
					{ruler}
					{closeOnRangeComplete}
					{size}
					{variant}
					{color}
					minValue={bounds ? minValue : undefined}
					maxValue={bounds ? maxValue : undefined}
				>
					<TimeRangePicker.Label>Working hours</TimeRangePicker.Label>
					<TimeRangePicker.Input type="start" aria-label="Start time">
						{#snippet children({ segments }: InputSnippetProps)}
							{#each segments as { part, value }, i (`${part}-${i}`)}
								<TimeRangePicker.Segment {part}>{value}</TimeRangePicker.Segment>
							{/each}
						{/snippet}
					</TimeRangePicker.Input>
					<TimeRangePicker.Input type="end" aria-label="End time">
						{#snippet children({ segments }: InputSnippetProps)}
							{#each segments as { part, value }, i (`${part}-${i}`)}
								<TimeRangePicker.Segment {part}>{value}</TimeRangePicker.Segment>
							{/each}
							<TimeRangePicker.Trigger />
						{/snippet}
					</TimeRangePicker.Input>

					<TimeRangePicker.Portal>
						<TimeRangePicker.Content>
							<PickerShell.Body>
								<TimeRangePicker.Clock>
									<div class="time-range-picker-endpoint">
										<span class="time-range-picker-endpoint-label">Start</span>
										<TimeRangePicker.HourSlider type="start" />
										<TimeRangePicker.MinuteSlider type="start" />
										{#if granularity === 'second'}
											<TimeRangePicker.SecondSlider type="start" />
										{/if}
										{#if hourCycle === 12}
											<TimeRangePicker.DayPeriodToggle type="start" />
										{/if}
									</div>
									<div class="time-range-picker-endpoint">
										<span class="time-range-picker-endpoint-label">End</span>
										<TimeRangePicker.HourSlider type="end" />
										<TimeRangePicker.MinuteSlider type="end" />
										{#if granularity === 'second'}
											<TimeRangePicker.SecondSlider type="end" />
										{/if}
										{#if hourCycle === 12}
											<TimeRangePicker.DayPeriodToggle type="end" />
										{/if}
									</div>
								</TimeRangePicker.Clock>
							</PickerShell.Body>

							{#if showFooter && (showClear || showCancel || showClose)}
								<TimeRangePicker.Footer>
									{#if showClear}<TimeRangePicker.Clear />{/if}
									{#if showCancel}<TimeRangePicker.Cancel />{/if}
									{#if showClose}<TimeRangePicker.Close />{/if}
								</TimeRangePicker.Footer>
							{/if}
						</TimeRangePicker.Content>
					</TimeRangePicker.Portal>
				</TimeRangePicker>
			</div>
		</div>
		<div data-uix-stage-trace>
			<span data-uix-stage-trace-key>trace</span>
			{#if trace.length === 0}
				<span>edit, open the clock or play an event to see sema stamps</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>value</span>
				{valueLabel}
			</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</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>{eventRows.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 range state machine, segment
				editing, validation and the open state.
				<span data-uix-layer-badge="eidos">eidos</span> owns visual treatment.
			</p>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="soma">soma</span> props · value + behaviour
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>value</span>
					<span data-uix-chips role="group">
						<button
							data-uix-chip
							data-active={value && sameRange(value, businessRange)}
							onclick={() => setDemoValue('business')}>business</button
						>
						<button
							data-uix-chip
							data-active={value && sameRange(value, lunchRange)}
							onclick={() => setDemoValue('lunch')}>lunch</button
						>
						<button
							data-uix-chip
							data-active={value === undefined}
							onclick={() => setDemoValue('empty')}>empty</button
						>
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>mode</span>
					<span data-uix-chips role="radiogroup">
						{#each ['inline', 'modal'] as v}
							<button
								data-uix-chip
								data-active={mode === v}
								onclick={() => (mode = v as 'inline' | 'modal')}>{v}</button
							>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>granularity</span>
					<span data-uix-chips role="radiogroup">
						{#each ['hour', 'minute', 'second'] as v}
							<button
								data-uix-chip
								data-active={granularity === v}
								onclick={() => (granularity = v as TimeGranularity)}>{v}</button
							>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>hour cycle</span>
					<span data-uix-chips role="radiogroup">
						{#each [12, 24] as v}
							<button
								data-uix-chip
								data-active={hourCycle === v}
								onclick={() => (hourCycle = v as HourCycle)}>{v}</button
							>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>locale</span>
					<select bind:value={locale}>
						<option value="en-US">en-US</option>
						<option value="es-ES">es-ES</option>
						<option value="fr-FR">fr-FR</option>
					</select>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>states</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={required} />
						<span data-uix-switch-label>required</span>
					</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={disabled} />
						<span data-uix-switch-label>disabled</span>
					</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={readonly} />
						<span data-uix-switch-label>readonly</span>
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>constraints</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={bounds} />
						<span data-uix-switch-label>min 08:00 · max 20:00</span>
					</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={lockSeconds} />
						<span data-uix-switch-label>seconds readonly</span>
					</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={closeOnRangeComplete} />
						<span data-uix-switch-label>close on range complete</span>
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>clock</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={ruler} />
						<span data-uix-switch-label>show ruler scale</span>
					</span>
				</label>
			</div>

			<div data-uix-subsection-head>Footer composition</div>
			<p data-uix-section-desc>
				Each switch decides whether the part is <em>included</em> in the markup. The parts
				never read these flags — omitting the part hides it, including it always renders.
			</p>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>visibility</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={showFooter} />
						<span data-uix-switch-label>render footer</span>
					</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={showClear} disabled={!showFooter} />
						<span data-uix-switch-label>clear</span>
					</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={showCancel} disabled={!showFooter} />
						<span data-uix-switch-label>cancel</span>
					</span>
					<span data-uix-switch>
						<input type="checkbox" bind:checked={showClose} disabled={!showFooter} />
						<span data-uix-switch-label>close</span>
					</span>
				</label>
			</div>

			<div data-uix-subsection-head>
				<span data-uix-layer-badge="eidos">eidos</span> props · visual treatment
			</div>
			<div data-uix-controls>
				<label data-uix-control>
					<span data-uix-control-label>size</span>
					<span data-uix-chips role="radiogroup">
						{#each ['sm', 'md', 'lg'] as v}
							<button
								data-uix-chip
								data-active={size === v}
								onclick={() => (size = v as TimeRangePickerSize)}>{v}</button
							>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>variant</span>
					<span data-uix-chips role="radiogroup">
						{#each ['surface', 'outline', 'ghost'] as v}
							<button
								data-uix-chip
								data-active={variant === v}
								onclick={() => (variant = v as TimeRangePickerVariant)}>{v}</button
							>
						{/each}
					</span>
				</label>
				<label data-uix-control>
					<span data-uix-control-label>color</span>
					<span data-uix-chips role="radiogroup">
						{#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as v}
							<button
								data-uix-chip
								data-active={color === v}
								onclick={() => (color = v as TimeRangePickerColor)}>{v}</button
							>
						{/each}
					</span>
				</label>
			</div>

			<div data-uix-code>
				<div data-uix-code-head>
					<span data-uix-layer-badge="soma">soma</span>
					<span>headless · provider + sliders</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 · root + attached parts</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 comparison</h2>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead>
						<tr><th>Feature</th><th>React Aria</th><th>Ark</th><th>Chakra</th><th>UIX</th><th>Decision</th></tr>
					</thead>
					<tbody>
						<tr><td class="name">Paired segmented inputs</td><td>yes (Date)</td><td>no</td><td>no</td><td>yes</td><td>Soma owns start/end editors.</td></tr>
						<tr><td class="name">Per-endpoint sliders</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>Two slider columns; share generic Slider.</td></tr>
						<tr><td class="name">Range state machine</td><td>yes (Date)</td><td>n/a</td><td>n/a</td><td>yes</td><td>Empty → pending → complete coordinated in soma.</td></tr>
						<tr><td class="name">mode='inline' | 'modal'</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>Same contract as date / time / color pickers.</td></tr>
						<tr><td class="name">Footer = composition</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>No *Button root props — pure composition.</td></tr>
						<tr><td class="name">commit/cancel/clear helpers</td><td>manual</td><td>manual</td><td>manual</td><td>yes</td><td>Wired by Footer parts via picker-shell context.</td></tr>
						<tr><td class="name">closeOnRangeComplete</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>Auto-dismiss when both endpoints set.</td></tr>
					</tbody>
				</table>
			</div>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Prop</th><th>Owner</th><th>Default</th><th>Notes</th></tr></thead>
					<tbody>
						<tr><td class="name">value / placeholder</td><td>soma</td><td class="default">—</td><td>Bindable <code>TimeRange</code>.</td></tr>
						<tr><td class="name">open</td><td>soma</td><td class="default">false</td><td>Bindable popover state.</td></tr>
						<tr><td class="name">mode</td><td>soma</td><td class="default">inline</td><td><code>inline</code> closes on outside-click; <code>modal</code> requires footer action.</td></tr>
						<tr><td class="name">closeOnRangeComplete</td><td>soma</td><td class="default">false</td><td>Auto-close once both endpoints are set.</td></tr>
						<tr><td class="name">minValue / maxValue</td><td>soma</td><td class="default">—</td><td>Validation bounds applied to both endpoints.</td></tr>
						<tr><td class="name">granularity</td><td>soma</td><td class="default">minute</td><td>Hour / minute / second.</td></tr>
						<tr><td class="name">hourCycle</td><td>soma</td><td class="default">locale</td><td>12h adds dayPeriod toggle per endpoint.</td></tr>
						<tr><td class="name">start / endReadonlySegments</td><td>soma</td><td class="default">[]</td><td>Lock segments per endpoint.</td></tr>
						<tr><td class="name">size / variant / color</td><td>eidos</td><td class="default">md / surface / primary</td><td>Visual-only data attrs.</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>
				TimeRangePicker declares the composite surface (Trigger +
				Clock + per-endpoint Sliders + DayPeriodToggle + Footer
				parts) on top of the delegated TimeRangeField (paired
				segments) and Popover (open-state machine). 5 own events:
				<code>open</code>, <code>close-commit</code>,
				<code>close-cancel</code>, <code>close-dismiss</code>,
				<code>commit-clear</code>. Source:
				<code>src/uix/morfo/components/time-range-picker.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">"{timeRangePickerMorfo.name}"</td></tr>
						<tr><td class="name">kebab</td><td class="type">"{timeRangePickerMorfo.kebab}"</td></tr>
						<tr><td class="name">scope</td><td class="type">[{timeRangePickerMorfo.scope.map((s) => `"${s}"`).join(', ')}]</td></tr>
						<tr><td class="name">apg</td><td><a href={timeRangePickerMorfo.apg} target="_blank" rel="noreferrer">{timeRangePickerMorfo.apg}</a></td></tr>
						<tr><td class="name">parts.length</td><td class="default">{timeRangePickerMorfo.parts.length}</td></tr>
						<tr><td class="name">events.length</td><td class="default">{timeRangePickerMorfo.events?.length ?? 0} <span style="color: var(--uix-text-faint)">(+ {fieldEvents.length} TimeRangeField + {popoverEvents.length} Popover inherited)</span></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><th>Optional</th></tr></thead>
					<tbody>
						{#each partsList as part (part.kebab)}
							<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>
								<td class="default">{part.optional ? 'yes' : 'no'}</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>

			{#each timeRangePickerMorfo.parts as rawPart (rawPart.kebab)}
				{@const partAny = rawPart as unknown as { kebab: string; aria?: ReadonlyArray<{ attr: string; value: { kind: string }; condition?: { when: string; prop?: string; part?: string }; severity?: string }>; keyboard?: ReadonlyArray<{ key: string; action: string }> }}
				{@const dataAttrs = compiled.contracts.dataAttrsByPart.get(partAny.kebab) ?? []}
				{@const ariaAttrs = partAny.aria ?? []}
				{@const keyboard = partAny.keyboard ?? []}
				{#if dataAttrs.length || ariaAttrs.length || keyboard.length}
					<div data-uix-subsection-head>{partAny.kebab}</div>

					{#if dataAttrs.length}
						<div data-uix-table-wrap>
							<table data-uix-table>
								<thead><tr><th>data-attr</th><th>Values</th><th>Source kind</th></tr></thead>
								<tbody>
									{#each dataAttrs as attr (attr.attr)}
										<tr>
											<td class="name">{attr.attr}</td>
											<td class="type">{attr.values ? attr.values.join(' | ') : '—'}</td>
											<td class="default">{'value' in attr && attr.value ? (attr as { value: { kind: string } }).value.kind : '—'}</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
					{/if}

					{#if ariaAttrs.length}
						<div data-uix-table-wrap style="margin-top: var(--uix-space-2);">
							<table data-uix-table>
								<thead><tr><th>aria-attr</th><th>Source kind</th><th>Condition</th><th>Severity</th></tr></thead>
								<tbody>
									{#each ariaAttrs as a (a.attr)}
										<tr>
											<td class="name">{a.attr}</td>
											<td class="type">{a.value.kind}</td>
											<td class="default">{a.condition ? `when ${a.condition.when}${a.condition.prop ? ` (${a.condition.prop})` : ''}${a.condition.part ? ` (${a.condition.part})` : ''}` : 'always'}</td>
											<td class="default">{a.severity ?? 'required'}</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
					{/if}

					{#if keyboard.length}
						<div data-uix-table-wrap style="margin-top: var(--uix-space-2);">
							<table data-uix-table>
								<thead><tr><th>key</th><th>action</th></tr></thead>
								<tbody>
									{#each keyboard as kb (kb.key)}
										<tr>
											<td><span data-uix-kbd>{kb.key === ' ' ? 'Space' : kb.key}</span></td>
											<td class="default">{kb.action}</td>
										</tr>
									{/each}
								</tbody>
							</table>
						</div>
					{/if}
				{/if}
			{/each}

			<div data-uix-subsection-head>Events declaration (own)</div>
			<p data-uix-section-desc style="margin-top: 0.25rem;">
				<code>open</code> fires <em>pre</em> with intent bound to the
				consumer's <code>intent</code> prop;
				<code>close-commit</code> fires <em>post</em> with static
				intent <code>fulfill</code> (Save closure);
				<code>close-cancel</code> / <code>close-dismiss</code> /
				<code>close-dismiss-outside</code> stamp the
				<code>data-last-action</code> causa before fade;
				<code>commit-clear</code> fires on Clear with intent
				<code>absent</code>.
			</p>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>name</th><th>family</th><th>verb</th><th>sequence</th><th>intent</th><th>target</th><th>prewrite</th><th>commit</th></tr></thead>
					<tbody>
						{#each events as action (action.name)}
							{@const sem = action.semantic}
							{@const intentDecl = 'intent' in sem ? sem.intent : undefined}
							{@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'}
							<tr>
								<td class="name">{action.name}</td>
								<td class="type">{sem.family}</td>
								<td>{sem.verb ?? '—'}</td>
								<td>{sem.sequence ?? 'pre'}</td>
								<td class="default">{intentStr}</td>
								<td>{action.target}</td>
								<td class="default">{action.prewrite.length ? action.prewrite.map((p) => `${p.attr}=${p.value}`).join(', ') : '—'}</td>
								<td class="default">{action.commit ? `${action.commit.attr}=${action.commit.value}` : '—'}</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		</section>
	{/if}

	{#if tab === 'sema'}
		<section data-uix-section>
			<h2 data-uix-section-title>
				<span data-uix-layer-badge="sema">sema</span> · events + perceptual signature
			</h2>
			<p data-uix-section-desc>
				TimeRangePicker declares open / dismiss / commit / clear events on its own surface.
				The underlying TimeRangeField and Popover contribute their own events too.
			</p>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Owner</th><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Target</th><th>Play</th></tr></thead>
					<tbody>
						{#each eventRows as row}
							<tr>
								<td class="default">{row.owner}</td>
								<td class="name">{row.action.name}</td>
								<td class="type">{row.action.semantic.family}</td>
								<td>{row.action.semantic.verb ?? '—'}</td>
								<td>{row.action.semantic.sequence ?? 'pre'}</td>
								<td>{row.action.target}</td>
								<td>
									<button
										data-uix-play
										onclick={() => {
											const selector =
												row.owner === 'TimeRangePicker'
													? '[data-time-range-picker]'
													: row.owner === 'TimeRangeField'
														? '[data-time-range-field]'
														: '[data-popover-content]';
											const target = stageRef?.querySelector(
												selector
											) as HTMLElement | null;
											if (!target) return;
											void uix.events?.emit({
												name: row.action.name,
												family: row.action.semantic.family,
												target
											});
										}}>▶ play</button
									>
								</td>
							</tr>
						{/each}
					</tbody>
				</table>
			</div>
		</section>
	{/if}

	{#if tab === 'recipe'}
		<section data-uix-section>
			<h2 data-uix-section-title>Eidos recipe</h2>
			<p data-uix-section-desc>
				Selectors live in
				<code>src/uix/eidos/components/time-range-picker/time-range-picker.css</code> and reuse
				the time-field tokens for the field portion. The clock body lays out two endpoint
				columns (start / end) and inherits slider chrome from the slider recipe.
			</p>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Selector</th><th>Owner</th><th>Purpose</th></tr></thead>
					<tbody>
						<tr><td class="name"><code>[data-time-range-picker]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Root visual scope + size/variant/color tokens.</td></tr>
						<tr><td class="name"><code>[data-time-range-picker-trigger]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Open-clock button. Has embedded variant inside the input.</td></tr>
						<tr><td class="name"><code>[data-time-range-picker-clock][data-state]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Popover dialog surface. 2-column endpoint grid.</td></tr>
						<tr><td class="name"><code>[data-time-range-picker-hour-slider][data-endpoint]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Per-endpoint slider wrapper. Composes generic Slider chrome.</td></tr>
						<tr><td class="name"><code>[data-picker-footer][data-mode]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Footer action row shared via picker-shell.</td></tr>
					</tbody>
				</table>
			</div>
		</section>
	{/if}

	{#if tab === 'a11y'}
		<section data-uix-section>
			<h2 data-uix-section-title>Accessibility</h2>
			<p data-uix-section-desc>
				Follows the WAI-ARIA APG <a href={timeRangePickerMorfo.apg} target="_blank" rel="noreferrer">dialog-modal pattern</a>
				for the clock popover + spinbutton per segment + slider per
				channel per endpoint. <code>mode='modal'</code> blocks
				outside-click + Escape; consumer must compose
				<code>Cancel</code> or <code>Close</code> for exit.
				Per-endpoint segments and sliders carry
				<code>data-endpoint='start'</code> / <code>'end'</code> so
				screen readers and CSS can distinguish them.
			</p>

			<div data-uix-subsection-head>Keyboard (Trigger + segments)</div>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Key</th><th>Action</th></tr></thead>
					<tbody>
						<tr><td><span data-uix-kbd>Enter</span> / <span data-uix-kbd>Space</span> on Trigger</td><td>Open the clock popover; focus first slider.</td></tr>
						<tr><td><span data-uix-kbd>ArrowUp</span> / <span data-uix-kbd>ArrowDown</span> on Segment</td><td>Increment / decrement focused segment (clamped to bounds).</td></tr>
						<tr><td><span data-uix-kbd>ArrowLeft</span> / <span data-uix-kbd>ArrowRight</span> on Segment</td><td>Move focus to previous / next segment (dir-aware); jumps between start / end input groups.</td></tr>
						<tr><td>Digit keys on Segment</td><td>Type the value directly; auto-advance when filled.</td></tr>
						<tr><td><span data-uix-kbd>Backspace</span> on Segment</td><td>Delete current segment value.</td></tr>
					</tbody>
				</table>
			</div>

			<div data-uix-subsection-head>Keyboard (inside clock)</div>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Key</th><th>Action</th></tr></thead>
					<tbody>
						<tr><td><span data-uix-kbd>Tab</span> / <span data-uix-kbd>Shift+Tab</span></td><td>Cycle focus across Start sliders → End sliders → DayPeriodToggles → Footer buttons.</td></tr>
						<tr><td><span data-uix-kbd>ArrowLeft</span> / <span data-uix-kbd>ArrowRight</span> on Slider</td><td>Step by 1 (clamped to min/max per endpoint).</td></tr>
						<tr><td><span data-uix-kbd>PageUp</span> / <span data-uix-kbd>PageDown</span></td><td>Step by 5 (slider default).</td></tr>
						<tr><td><span data-uix-kbd>Home</span> / <span data-uix-kbd>End</span></td><td>Jump to min / max for the focused channel.</td></tr>
						<tr><td><span data-uix-kbd>Enter</span> on Close</td><td>Save + close (fires <code>close-commit</code>).</td></tr>
						<tr><td><span data-uix-kbd>Escape</span></td><td>inline mode: dismiss (fires <code>close-dismiss</code>). modal mode: ignored unless Cancel is wired.</td></tr>
					</tbody>
				</table>
			</div>

			<div data-uix-subsection-head>ARIA contract</div>
			<div data-uix-table-wrap>
				<table data-uix-table>
					<thead><tr><th>Part</th><th>Attribute</th><th>Value</th></tr></thead>
					<tbody>
						<tr><td class="name">trigger</td><td>aria-haspopup</td><td class="type">"dialog"</td></tr>
						<tr><td class="name">trigger</td><td>aria-expanded</td><td class="type">{`{open}`}</td></tr>
						<tr><td class="name">trigger</td><td>aria-controls</td><td class="type">{`<clock id>`}</td></tr>
						<tr><td class="name">input[type='start' | 'end']</td><td>role</td><td class="type">"group"</td></tr>
						<tr><td class="name">input</td><td>aria-label / aria-labelledby</td><td class="type">{`{aria-label}`} or {`<label id>`}</td></tr>
						<tr><td class="name">segment</td><td>role / aria-valuemin / aria-valuemax / aria-valuenow / aria-valuetext</td><td class="type">"spinbutton" + per-segment range, scoped per endpoint</td></tr>
						<tr><td class="name">clock</td><td>role</td><td class="type">"dialog"</td></tr>
						<tr><td class="name">clock</td><td>aria-modal</td><td class="type">"true" when mode='modal'</td></tr>
						<tr><td class="name">clock</td><td>aria-labelledby</td><td class="type">{`<trigger id>`}</td></tr>
						<tr><td class="name">hour-slider / minute-slider / second-slider</td><td>role / data-endpoint</td><td class="type">"slider" + "start" | "end"</td></tr>
						<tr><td class="name">day-period-toggle</td><td>role / data-endpoint</td><td class="type">"radiogroup" with AM/PM radio items + "start" | "end"</td></tr>
						<tr><td class="name">clear / cancel / close (Footer)</td><td>type / aria-label</td><td class="type">"button" + localised label</td></tr>
						<tr><td class="name">hidden-input</td><td>name / required</td><td class="type">{`{name}`} / mirrors required state · emits ISO strings for both endpoints</td></tr>
					</tbody>
				</table>
			</div>
		</section>
	{/if}
</div>