@joewinke/jatui 0.14.0 → 0.16.0

package/dist/video/presence.d.ts

@@ -1,25 +1,29 @@
 /**
- * Presence module — CONTRACT ONLY (mos-5lzns.28). Implemented by mos-5lzns.34
- * ("wind-down (Idle Detection API), resume-at-sentence, FLIP open").
+ * Presence (mos-5lzns.34) — the barrel. Three behaviours about whether you
+ * are there and where you were, each an OPTIONAL VideoPlayer prop that is
+ * inert when absent (extension-library FEATURES.md §Wind-down, §Resume at a
+ * sentence, §Open like an object):
  *
- * What lands here (extension-library FEATURES.md §Wind-down,
- * §Resume at a sentence, §Open like an object), as ADVISORS + pure helpers:
+ * · `presence/winddown.ts` — pure: the begin decision, fade levels, hint.
+ *   The desktop says nobody is there → picture and sound fade over 20s and
+ *   the video pauses. The fade IS the prompt; any input cancels it.
+ * · `presence/idle.ts` — the desktop signal: Chromium's Idle Detection API,
+ *   feature-detected, never prompting unless the host opted in (and then
+ *   only from a gesture). Elsewhere the player falls back to page presence,
+ *   reported as `source: 'page'` so the host can label it.
+ * · `presence/resume.ts` — resume-at-sentence glue around .27's
+ *   `advisors/resume-point` (the snapping is NOT duplicated here): the
+ *   host-supplied store (localStorage default), the data mapping, and the
+ *   two integration rules — snap when the boundaries land, stand down once
+ *   the user has taken the wheel.
+ * · `presence/flip.ts` — FLIP open/close over WAAPI with the poster painted
+ *   on every path; a no-op under prefers-reduced-motion except the poster.
  *
- * · wind-down — the desktop says nobody is there (Idle Detection API / user
- *   activity), the player fades picture and sound over ~20s and pauses. The
- *   fade IS the prompt — cancelling it is how you come back.
- * · resume-at-sentence — snap a resume point back to the nearest sentence /
- *   speaker turn / chapter within 15s (CLOSEST wins, not most-specific);
- *   quote the line, never paraphrase; stand down if the user has taken the
- *   wheel (>2.5s from the stored point). Runs when the transcript lands, not
- *   at open.
- * · FLIP open — the clicked card's rectangle → the player shell, WAAPI, two
- *   keyframes, transform-origin top-left, poster painted under the video on
- *   EVERY path (a black rectangle is a bug at any motion setting); no-op
- *   under prefers-reduced-motion except the poster.
- *
- * All three are advisors/mechanics: they read no settings, touch no
- * <video> outside the callbacks the component passes, and fail toward doing
- * nothing.
+ * Advisors and mechanics: they read no settings and touch no <video>; the
+ * component passes knobs in and applies what comes back, and every one of
+ * them fails toward doing nothing.
  */
-export declare const PRESENCE_NEUTRAL = 1;
+export { WIND_DOWN_FADE_MS, WIND_DOWN_DEPTH, WIND_DOWN_AFTER_DEFAULT, WIND_DOWN_AFTER_MIN, WIND_DOWN_AFTER_MAX, WIND_DOWN_PROBE_MS, windDownAfterMs, shouldBeginWindDown, desktopPresent, windDownProgress, windDownLevels, windDownHint, type PresenceSource, type DesktopSignal, type WindDownPhase, type WindDownState, type WindDownInput } from './presence/winddown';
+export { IDLE_THRESHOLD_MIN_MS, idleDetectionSupported, idleDetectionPermission, requestIdleDetection, startDesktopWatch, toDesktopSignal, type IdlePermission, type DesktopWatch } from './presence/idle';
+export { RESUME_WHEEL_SEC, RESUME_MAX_BACK, RESUME_SAVE_MS, RESUME_FLOOR_SEC, RESUME_TAIL_SEC, localResumeStore, coerceResumeSec, resumeToSave, toResumeCtx, hasBoundaries, planResumeSnap, type VideoResumeStore, type ResumeSnapPlan } from './presence/resume';
+export { FLIP_EASE, FLIP_OPEN_MS, FLIP_CLOSE_MS, FLIP_FADE_WITH_POSTER, FLIP_FADE_BARE, FLIP_POSTER_CLASS, flipOpen, flipClose, clearPoster, posterBackground, rectOf, onScreen, flipGeometry, awayFrame, homeFrame, type FlipSource, type FlipRect } from './presence/flip';

package/dist/video/presence.js

@@ -1,25 +1,29 @@
 /**
- * Presence module — CONTRACT ONLY (mos-5lzns.28). Implemented by mos-5lzns.34
- * ("wind-down (Idle Detection API), resume-at-sentence, FLIP open").
+ * Presence (mos-5lzns.34) — the barrel. Three behaviours about whether you
+ * are there and where you were, each an OPTIONAL VideoPlayer prop that is
+ * inert when absent (extension-library FEATURES.md §Wind-down, §Resume at a
+ * sentence, §Open like an object):
  *
- * What lands here (extension-library FEATURES.md §Wind-down,
- * §Resume at a sentence, §Open like an object), as ADVISORS + pure helpers:
+ * · `presence/winddown.ts` — pure: the begin decision, fade levels, hint.
+ *   The desktop says nobody is there → picture and sound fade over 20s and
+ *   the video pauses. The fade IS the prompt; any input cancels it.
+ * · `presence/idle.ts` — the desktop signal: Chromium's Idle Detection API,
+ *   feature-detected, never prompting unless the host opted in (and then
+ *   only from a gesture). Elsewhere the player falls back to page presence,
+ *   reported as `source: 'page'` so the host can label it.
+ * · `presence/resume.ts` — resume-at-sentence glue around .27's
+ *   `advisors/resume-point` (the snapping is NOT duplicated here): the
+ *   host-supplied store (localStorage default), the data mapping, and the
+ *   two integration rules — snap when the boundaries land, stand down once
+ *   the user has taken the wheel.
+ * · `presence/flip.ts` — FLIP open/close over WAAPI with the poster painted
+ *   on every path; a no-op under prefers-reduced-motion except the poster.
  *
- * · wind-down — the desktop says nobody is there (Idle Detection API / user
- *   activity), the player fades picture and sound over ~20s and pauses. The
- *   fade IS the prompt — cancelling it is how you come back.
- * · resume-at-sentence — snap a resume point back to the nearest sentence /
- *   speaker turn / chapter within 15s (CLOSEST wins, not most-specific);
- *   quote the line, never paraphrase; stand down if the user has taken the
- *   wheel (>2.5s from the stored point). Runs when the transcript lands, not
- *   at open.
- * · FLIP open — the clicked card's rectangle → the player shell, WAAPI, two
- *   keyframes, transform-origin top-left, poster painted under the video on
- *   EVERY path (a black rectangle is a bug at any motion setting); no-op
- *   under prefers-reduced-motion except the poster.
- *
- * All three are advisors/mechanics: they read no settings, touch no
- * <video> outside the callbacks the component passes, and fail toward doing
- * nothing.
+ * Advisors and mechanics: they read no settings and touch no <video>; the
+ * component passes knobs in and applies what comes back, and every one of
+ * them fails toward doing nothing.
  */
-export const PRESENCE_NEUTRAL = 1;
+export { WIND_DOWN_FADE_MS, WIND_DOWN_DEPTH, WIND_DOWN_AFTER_DEFAULT, WIND_DOWN_AFTER_MIN, WIND_DOWN_AFTER_MAX, WIND_DOWN_PROBE_MS, windDownAfterMs, shouldBeginWindDown, desktopPresent, windDownProgress, windDownLevels, windDownHint } from './presence/winddown';
+export { IDLE_THRESHOLD_MIN_MS, idleDetectionSupported, idleDetectionPermission, requestIdleDetection, startDesktopWatch, toDesktopSignal } from './presence/idle';
+export { RESUME_WHEEL_SEC, RESUME_MAX_BACK, RESUME_SAVE_MS, RESUME_FLOOR_SEC, RESUME_TAIL_SEC, localResumeStore, coerceResumeSec, resumeToSave, toResumeCtx, hasBoundaries, planResumeSnap } from './presence/resume';
+export { FLIP_EASE, FLIP_OPEN_MS, FLIP_CLOSE_MS, FLIP_FADE_WITH_POSTER, FLIP_FADE_BARE, FLIP_POSTER_CLASS, flipOpen, flipClose, clearPoster, posterBackground, rectOf, onScreen, flipGeometry, awayFrame, homeFrame } from './presence/flip';

package/dist/video/settings/SettingsPanel.svelte

@@ -0,0 +1,414 @@
+<script module lang="ts">
+	let nextId = 0;
+</script>
+
+<script lang="ts">
+	/**
+	 * The VideoPlayer settings panel (mos-5lzns.35) — extension-library's
+	 * `openSettings()` ported. Generated wholly from `VIDEO_SETTINGS` via
+	 * `panelGroups`: every row is a label, one control, and the sentence saying
+	 * what the thing does. The sentence is not decoration — it is the reason
+	 * this screen exists rather than a list of switches.
+	 *
+	 * Keyboard: focus lands on the first control and Tab cycles inside the
+	 * dialog; Esc (or `,`) closes and hands focus back. Controls follow the
+	 * ARIA APG patterns — a switch, a radio group (arrows move the choice), a
+	 * native range. It is a FORM, not a list: arrow keys belong to the
+	 * controls (a range and a radio group both need them), so there is no
+	 * row-level listNav to fight them.
+	 *
+	 * Values are live, not on close: these are things you judge by watching
+	 * the result, so the result has to move while you drag.
+	 *
+	 * Token-only chrome; the only motion (a short fade) is dropped under
+	 * prefers-reduced-motion.
+	 */
+	import { onMount } from 'svelte';
+	import type { SettingSpec, SettingValue } from './registry';
+	import { formatSettingValue, stepOption, type SettingsPanelGroup } from './panel';
+
+	let {
+		groups,
+		values,
+		onchange,
+		onclose,
+		helpHref = null,
+		persisted = false
+	}: {
+		groups: SettingsPanelGroup[];
+		/** Effective value per id — what the player is doing right now. */
+		values: Record<string, SettingValue>;
+		onchange: (id: string, value: SettingValue) => void;
+		onclose: () => void;
+		/** A host help page explaining all of this ("How all of this works →"). */
+		helpHref?: string | null;
+		/** The host supplied a store — the footer says choices are remembered. */
+		persisted?: boolean;
+	} = $props();
+
+	const uid = `vp-set-${++nextId}`;
+	let cardEl: HTMLDivElement | undefined = $state();
+
+	function rowId(spec: SettingSpec) {
+		return `${uid}-${spec.id.replace(/[^a-z0-9]/gi, '-')}`;
+	}
+
+	function focusables(): HTMLElement[] {
+		if (!cardEl) return [];
+		return Array.from(
+			cardEl.querySelectorAll<HTMLElement>('button:not([tabindex="-1"]), input, a[href]')
+		).filter((el) => !el.hasAttribute('disabled'));
+	}
+
+	onMount(() => {
+		const first = cardEl?.querySelector<HTMLElement>('.vp-set-control button:not([tabindex="-1"]), .vp-set-control input');
+		(first ?? cardEl)?.focus();
+	});
+
+	function onKeyDown(e: KeyboardEvent) {
+		// The player's own shortcuts must not fire from inside the dialog
+		// (Space on a switch would also play/pause).
+		e.stopPropagation();
+		if (e.key === 'Escape' || (e.key === ',' && (e.target as HTMLElement)?.tagName !== 'INPUT')) {
+			e.preventDefault();
+			onclose();
+			return;
+		}
+		if (e.key === 'Tab') {
+			const els = focusables();
+			if (!els.length) return;
+			const i = els.indexOf(document.activeElement as HTMLElement);
+			const next = e.shiftKey ? (i <= 0 ? els.length - 1 : i - 1) : i === els.length - 1 ? 0 : i + 1;
+			e.preventDefault();
+			els[next].focus();
+		}
+	}
+
+	function onRadioKey(e: KeyboardEvent, spec: SettingSpec) {
+		const dir = e.key === 'ArrowRight' || e.key === 'ArrowDown' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowUp' ? -1 : 0;
+		if (!dir) return;
+		e.preventDefault();
+		const next = stepOption(spec, values[spec.id], dir);
+		if (next === undefined) return;
+		onchange(spec.id, next);
+		const group = (e.currentTarget as HTMLElement).closest('[role="radiogroup"]');
+		queueMicrotask(() => group?.querySelector<HTMLElement>(`[data-value="${next}"]`)?.focus());
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<div class="vp-set-backdrop" onclick={(e) => { if (e.target === e.currentTarget) onclose(); }}>
+	<div
+		class="vp-set"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby="{uid}-title"
+		tabindex="-1"
+		bind:this={cardEl}
+		onkeydown={onKeyDown}
+	>
+		<div class="vp-set-head">
+			<h2 class="vp-set-title" id="{uid}-title">Settings</h2>
+			<button type="button" class="vp-set-close" aria-label="Close settings" onclick={onclose}>
+				<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+					<path d="M6 6l12 12M18 6 6 18" />
+				</svg>
+			</button>
+		</div>
+
+		<div class="vp-set-body">
+			{#each groups as g (g.group)}
+				<section class="vp-set-group" aria-labelledby="{uid}-g-{g.group}">
+					<h3 class="vp-set-group-title" id="{uid}-g-{g.group}">{g.group}</h3>
+					{#each g.rows as spec (spec.id)}
+						{@const id = rowId(spec)}
+						{@const value = values[spec.id] ?? spec.default}
+						<div class="vp-set-row" data-setting={spec.id}>
+							<span class="vp-set-label" id="{id}-label">{spec.label}</span>
+							<div class="vp-set-control">
+								{#if spec.type === 'bool'}
+									<button
+										type="button"
+										class="vp-set-switch"
+										role="switch"
+										aria-checked={value === true}
+										aria-labelledby="{id}-label"
+										aria-describedby="{id}-hint"
+										onclick={() => onchange(spec.id, value !== true)}
+									>
+										<span class="vp-set-knob" aria-hidden="true"></span>
+										<span class="vp-set-switch-text">{value === true ? 'On' : 'Off'}</span>
+									</button>
+								{:else if spec.type === 'enum'}
+									<div
+										class="vp-set-seg"
+										role="radiogroup"
+										aria-labelledby="{id}-label"
+										aria-describedby="{id}-hint"
+									>
+										{#each spec.options ?? [] as opt (opt.value)}
+											<button
+												type="button"
+												role="radio"
+												data-value={opt.value}
+												aria-checked={value === opt.value}
+												tabindex={value === opt.value ? 0 : -1}
+												onclick={() => onchange(spec.id, opt.value)}
+												onkeydown={(e) => onRadioKey(e, spec)}
+											>
+												{opt.label}
+											</button>
+										{/each}
+									</div>
+								{:else}
+									<input
+										type="range"
+										class="vp-set-range"
+										min={spec.min}
+										max={spec.max}
+										step={spec.step}
+										value={value}
+										aria-labelledby="{id}-label"
+										aria-describedby="{id}-hint"
+										aria-valuetext={formatSettingValue(spec, value)}
+										oninput={(e) => onchange(spec.id, Number((e.currentTarget as HTMLInputElement).value))}
+									/>
+									<span class="vp-set-value" aria-hidden="true">{formatSettingValue(spec, value)}</span>
+								{/if}
+							</div>
+							<p class="vp-set-hint" id="{id}-hint">{spec.hint}</p>
+						</div>
+					{/each}
+				</section>
+			{:else}
+				<p class="vp-set-empty">Nothing on this video can be adjusted yet — settings appear as the features they control arrive.</p>
+			{/each}
+		</div>
+
+		<div class="vp-set-foot">
+			<span>{persisted ? 'Your choices are remembered.' : 'Choices last while this player is open.'} Esc closes.</span>
+			{#if helpHref}
+				<a class="vp-set-help" href={helpHref}>How all of this works →</a>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.vp-set-backdrop {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--jatui-space-lg, 12px);
+		background: color-mix(in oklch, var(--color-base-100) 70%, transparent);
+		z-index: 11;
+		border-radius: inherit;
+		animation: vp-set-in var(--motion-quick, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-set {
+		width: min(28rem, 100%);
+		max-height: 100%;
+		display: flex;
+		flex-direction: column;
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		box-shadow: 0 8px 30px color-mix(in oklch, var(--color-base-content) 25%, transparent);
+		outline: none;
+	}
+
+	.vp-set-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--jatui-space-md, 6px) var(--jatui-space-lg, 12px);
+		border-bottom: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+
+	.vp-set-title {
+		margin: 0;
+		font-size: 0.85rem;
+		font-weight: 700;
+	}
+
+	.vp-set-close {
+		display: inline-flex;
+		padding: var(--jatui-space-xs, 2px);
+		background: none;
+		border: none;
+		color: inherit;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		cursor: pointer;
+	}
+
+	.vp-set-body {
+		overflow-y: auto;
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-lg, 12px) var(--jatui-space-md, 6px);
+	}
+
+	.vp-set-group-title {
+		margin: var(--jatui-space-md, 6px) 0 var(--jatui-space-xs, 2px);
+		font-size: 0.66rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+	}
+
+	.vp-set-row {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		align-items: center;
+		gap: var(--jatui-space-xs, 2px) var(--jatui-space-md, 6px);
+		padding: var(--jatui-space-sm, 4px) 0;
+		border-top: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 6%, transparent);
+	}
+
+	.vp-set-group-title + .vp-set-row {
+		border-top: none;
+	}
+
+	.vp-set-label {
+		font-size: 0.78rem;
+		font-weight: 600;
+	}
+
+	.vp-set-control {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+	}
+
+	.vp-set-hint {
+		grid-column: 1 / -1;
+		margin: 0;
+		font-size: 0.7rem;
+		line-height: 1.4;
+		color: color-mix(in oklch, var(--color-base-content) 68%, transparent);
+	}
+
+	/* Switch: the state reads in text AND position, never colour alone. */
+	.vp-set-switch {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		padding: 2px var(--jatui-space-sm, 4px) 2px 2px;
+		font: inherit;
+		font-size: 0.7rem;
+		color: inherit;
+		background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
+		border-radius: 999px;
+		cursor: pointer;
+	}
+
+	.vp-set-knob {
+		width: 0.8rem;
+		height: 0.8rem;
+		border-radius: 999px;
+		background: color-mix(in oklch, var(--color-base-content) 45%, transparent);
+		transition: transform var(--motion-quick, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-set-switch[aria-checked='true'] {
+		background: color-mix(in oklch, var(--color-primary) 22%, transparent);
+		border-color: color-mix(in oklch, var(--color-primary) 55%, transparent);
+	}
+
+	.vp-set-switch[aria-checked='true'] .vp-set-knob {
+		background: var(--color-primary);
+		transform: translateX(0.15rem);
+	}
+
+	.vp-set-switch-text {
+		min-width: 1.6em;
+		text-align: left;
+	}
+
+	.vp-set-seg {
+		display: inline-flex;
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		overflow: hidden;
+	}
+
+	.vp-set-seg button {
+		padding: 2px var(--jatui-space-md, 6px);
+		font: inherit;
+		font-size: 0.7rem;
+		color: inherit;
+		background: none;
+		border: none;
+		cursor: pointer;
+	}
+
+	.vp-set-seg button + button {
+		border-left: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
+	}
+
+	.vp-set-seg button[aria-checked='true'] {
+		background: color-mix(in oklch, var(--color-primary) 22%, transparent);
+		font-weight: 700;
+	}
+
+	.vp-set-range {
+		width: 7rem;
+		accent-color: var(--color-primary);
+	}
+
+	.vp-set-value {
+		min-width: 3.2em;
+		font-size: 0.7rem;
+		font-variant-numeric: tabular-nums;
+		text-align: right;
+	}
+
+	.vp-set-switch:focus-visible,
+	.vp-set-seg button:focus-visible,
+	.vp-set-range:focus-visible,
+	.vp-set-close:focus-visible,
+	.vp-set-help:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+
+	.vp-set-empty {
+		margin: var(--jatui-space-md, 6px) 0;
+		font-size: 0.75rem;
+		color: color-mix(in oklch, var(--color-base-content) 68%, transparent);
+	}
+
+	.vp-set-foot {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		gap: var(--jatui-space-sm, 4px);
+		padding: var(--jatui-space-md, 6px) var(--jatui-space-lg, 12px);
+		font-size: 0.66rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+		border-top: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+
+	.vp-set-help {
+		color: var(--color-primary);
+	}
+
+	@keyframes vp-set-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.vp-set-backdrop {
+			animation: none;
+		}
+		.vp-set-knob {
+			transition: none;
+		}
+	}
+</style>

package/dist/video/settings/SettingsPanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SettingValue } from './registry';
+import { type SettingsPanelGroup } from './panel';
+type $$ComponentProps = {
+    groups: SettingsPanelGroup[];
+    /** Effective value per id — what the player is doing right now. */
+    values: Record<string, SettingValue>;
+    onchange: (id: string, value: SettingValue) => void;
+    onclose: () => void;
+    /** A host help page explaining all of this ("How all of this works →"). */
+    helpHref?: string | null;
+    /** The host supplied a store — the footer says choices are remembered. */
+    persisted?: boolean;
+};
+declare const SettingsPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type SettingsPanel = ReturnType<typeof SettingsPanel>;
+export default SettingsPanel;

package/dist/video/settings/panel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The settings panel's model (mos-5lzns.35) — pure, so what the panel shows
+ * is node-testable without a DOM. The component renders exactly what these
+ * return; nothing about which rows exist is decided in markup.
+ */
+import { type SettingAvailability, type SettingSpec, type SettingValue } from './registry';
+export interface SettingsPanelGroup {
+    group: string;
+    rows: SettingSpec[];
+}
+/**
+ * The rows this player can honestly offer, grouped in panel order. A row
+ * whose `when` is not true in `available` is omitted — never shown disabled:
+ * a switch for a feature this player doesn't have is noise, and a disabled
+ * one invites the question it can't answer.
+ */
+export declare function panelGroups(available: SettingAvailability, specs?: SettingSpec[]): SettingsPanelGroup[];
+/** How a value reads in the panel (the range's readout, an enum's label, On/Off). */
+export declare function formatSettingValue(spec: SettingSpec, value: SettingValue): string;
+/**
+ * Radio-group arrow keys: the next option in `dir`, wrapping (APG radio
+ * pattern). An unknown current value starts from the first option.
+ */
+export declare function stepOption(spec: SettingSpec, current: SettingValue, dir: 1 | -1): string | undefined;

package/dist/video/settings/panel.js

@@ -0,0 +1,58 @@
+/**
+ * The settings panel's model (mos-5lzns.35) — pure, so what the panel shows
+ * is node-testable without a DOM. The component renders exactly what these
+ * return; nothing about which rows exist is decided in markup.
+ */
+import { SETTING_GROUPS, VIDEO_SETTINGS } from './registry';
+/**
+ * The rows this player can honestly offer, grouped in panel order. A row
+ * whose `when` is not true in `available` is omitted — never shown disabled:
+ * a switch for a feature this player doesn't have is noise, and a disabled
+ * one invites the question it can't answer.
+ */
+export function panelGroups(available, specs = VIDEO_SETTINGS) {
+    const order = [...SETTING_GROUPS];
+    for (const s of specs)
+        if (!order.includes(s.group))
+            order.push(s.group);
+    const out = [];
+    for (const group of order) {
+        const rows = specs.filter((s) => s.group === group && s.wired !== false && available[s.when] === true);
+        if (rows.length)
+            out.push({ group, rows });
+    }
+    return out;
+}
+/** How a value reads in the panel (the range's readout, an enum's label, On/Off). */
+export function formatSettingValue(spec, value) {
+    try {
+        if (spec.type === 'bool')
+            return value ? 'On' : 'Off';
+        if (spec.type === 'enum')
+            return spec.options?.find((o) => o.value === value)?.label ?? String(value);
+        const n = typeof value === 'number' ? value : Number(value);
+        if (!Number.isFinite(n))
+            return '';
+        // Round to the step so 0.30000000000000004 never reaches the screen.
+        const step = spec.step && spec.step > 0 ? spec.step : 0;
+        const decimals = step ? Math.max(0, Math.min(6, (String(step).split('.')[1] ?? '').length)) : 2;
+        const shown = Number(n.toFixed(decimals));
+        return spec.format ? spec.format(shown) : String(shown);
+    }
+    catch {
+        return '';
+    }
+}
+/**
+ * Radio-group arrow keys: the next option in `dir`, wrapping (APG radio
+ * pattern). An unknown current value starts from the first option.
+ */
+export function stepOption(spec, current, dir) {
+    const opts = spec.options ?? [];
+    if (!opts.length)
+        return undefined;
+    const i = opts.findIndex((o) => o.value === current);
+    if (i < 0)
+        return opts[0].value;
+    return opts[(i + dir + opts.length) % opts.length].value;
+}