@quillmark/svelte 0.0.0

package/dist/visual/Card.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { Document, Quill, Addr, Diagnostic } from '@quillmark/wasm';
+import type { EditorErrorHandler } from '../core/errors.js';
+import type { FieldController } from '../core/codec/index.js';
+import type { CardModel } from './structure.js';
+import type { FieldDomIds } from './domid.js';
+/** The per-card operation bundle the VisualEditor builds (all resolve id→index lazily). */
+interface CardOps {
+    makeAddr: (field?: string) => Addr;
+    leafKey: (field?: string) => string;
+    domIds: (field?: string) => FieldDomIds;
+    panelId: (group: string) => string;
+    commit: (name: string, value: unknown) => void;
+    move: (dir: -1 | 1) => void;
+    remove: () => void;
+    retype: (kind: string) => void;
+    rename: (title: string) => void;
+    diagFor: (field?: string) => Diagnostic[] | undefined;
+    /** Consumer enum-option policy for a field; true when no hook set. */
+    enumAllowed: (field: string, value: string) => boolean;
+}
+interface Props {
+    card: CardModel;
+    doc: Document;
+    /** The schema a prose leaf reads its content through (`ProseField`). */
+    quill: Quill;
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    kinds: string[];
+    ops: CardOps;
+    onFocus?: (addr: Addr) => void;
+    onCaretMove?: (addr: Addr, pos: number) => void;
+    onChange?: (addr: Addr) => void;
+    onError?: EditorErrorHandler;
+    register?: (key: string, controller: FieldController) => void;
+    unregister?: (key: string) => void;
+}
+declare const Card: import("svelte").Component<Props, {
+    revealLeaf: (key: string) => void;
+    scrollIntoViewCard: (block: ScrollLogicalPosition) => void;
+}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/visual/CardControls.svelte

@@ -0,0 +1,92 @@
+<!--
+  Card controls, composable cards only.
+  Right-aligned in the header: a move-up/move-down chevron pair revealed while the
+  pointer or the caret is in the card (each disabled at its edge), then an
+  always-visible delete. Reorder is BUTTONS, not drag (V1). The card scopes that
+  reveal, so its condition lives in the parent's CSS; the pair keeps the narrower
+  guarantee here, that a focused chevron is a visible one. The card also hangs this
+  cluster to land these glyphs on its right gutter, and reads `--_qm-glyph-control`
+  to do it: the size is the stylesheet's below, never an attribute.
+-->
+<script lang="ts">
+	import { wording } from './strings.js';
+
+	// The surface's words, ambient from the editor root; the package's English
+	// off-tree, so this component renders standalone too.
+	const t = wording();
+	import Icon from './icons/Icon.svelte';
+	import './controls.css';
+
+	interface Props {
+		isFirst: boolean;
+		isLast: boolean;
+		onMoveUp: () => void;
+		onMoveDown: () => void;
+		onDelete: () => void;
+	}
+	let { isFirst, isLast, onMoveUp, onMoveDown, onDelete }: Props = $props();
+</script>
+
+<div class="qm-card-controls">
+	<div class="qm-card-reorder">
+		<button
+			type="button"
+			class="qm-icon-btn"
+			title={t.strings.cardMoveUp}
+			disabled={isFirst}
+			onclick={onMoveUp}><Icon name="chevron-up" /></button
+		>
+		<button
+			type="button"
+			class="qm-icon-btn"
+			title={t.strings.cardMoveDown}
+			disabled={isLast}
+			onclick={onMoveDown}><Icon name="chevron-down" /></button
+		>
+	</div>
+	<button
+		type="button"
+		class="qm-icon-btn qm-card-delete"
+		title={t.strings.cardDelete}
+		onclick={onDelete}><Icon name="x" /></button
+	>
+</div>
+
+<style>
+	.qm-card-controls {
+		display: flex;
+		align-items: center;
+		gap: var(--_qm-space);
+	}
+	/* The glyph rung in CSS rather than through the icon's `size`, because the card
+	 header's right hang is arithmetic over this number and the tap floor: an
+	 attribute set in the script is a second place the size lives, and the balance
+	 breaks silently when the two disagree. A stylesheet beats an SVG presentation
+	 attribute, so the rung wins without the attribute being removed from the icon. */
+	.qm-card-controls :global(svg) {
+		width: var(--_qm-glyph-control);
+		height: var(--_qm-glyph-control);
+	}
+	.qm-card-reorder {
+		display: flex;
+		gap: var(--_qm-space-half);
+		opacity: 0;
+		transition: opacity var(--_qm-duration-fast) var(--_qm-ease-reverse);
+	}
+	/* Opacity hides the pair without taking it out of the tab order, so the
+	   component holds its own floor: a chevron that has focus is drawn, and its ring
+	   with it. The card's reveal already covers this; the rule is here because the
+	   hidden state is. */
+	.qm-card-reorder:focus-within {
+		opacity: 1;
+	}
+	/* Box and disabled state come from `.qm-icon-btn` (controls.css); only the ink
+	 is this component's: the reorder pair recedes to the label tone, delete
+	 carries the danger hue (scoped, so both beat the layered base). */
+	.qm-icon-btn {
+		color: var(--_qm-ink-label);
+	}
+	.qm-card-delete {
+		color: var(--_qm-danger);
+	}
+</style>

package/dist/visual/CardControls.svelte.d.ts

@@ -0,0 +1,11 @@
+import './controls.css';
+interface Props {
+    isFirst: boolean;
+    isLast: boolean;
+    onMoveUp: () => void;
+    onMoveDown: () => void;
+    onDelete: () => void;
+}
+declare const CardControls: import("svelte").Component<Props, {}, "">;
+type CardControls = ReturnType<typeof CardControls>;
+export default CardControls;

package/dist/visual/DateField.svelte

@@ -0,0 +1,203 @@
+<!--
+ A `date` (or `datetime`) field → a styled segmented date field on bits-ui. The
+ stored value is a string (fixture uses `YYYY-MM-DD`, blank to mean "today at
+ render"); a cleared control commits `undefined` (the unset rung): the parent
+ removes the field, so the memo quill's blank-date → `datetime.today`
+ substitution applies. The value-object a date field lowers to is a
+ render-time concern: the editor only sees the stored string.
+
+ Styled rather than a native `<input type="date">`: that control's calendar popup
+ is UA-owned and reaches no dial. `DateField` (segments, no
+ calendar) rather than `DatePicker`: the segments are the entry affordance, and a
+ calendar is a second surface this field does not need.
+
+ THE BOUNDARY IS A STRING, AND THE LOCAL IS TOO. The primitive speaks
+ `CalendarDate`; the document speaks `YYYY-MM-DD`. `CalendarDate` carries no time
+ and no zone, so the round-trip is lossless and no local-midnight shift can occur:
+ the hazard that makes `new Date('2026-07-25')` the wrong tool here. Authored
+ values are data, not input: `parseDate` THROWS on anything malformed, so a bad
+ string degrades to an empty field rather than taking the editor down with it.
+
+ `syncedLocal` reconciles by IDENTITY, so the local must hold the string, not the
+ parsed value: a fresh `CalendarDate` is never `===` the last one, which would
+ make every reconcile fire and re-render all seven segments on each commit.
+
+ THE GHOST IS THE DEFAULT'S DIGITS, NOT A FORMAT HINT. An unset field
+ carrying a `default:` prints the default's digits in the segments, ghost-toned,
+ instead of the primitive's `mm`/`dd`/`yyyy` hints, which say "empty" where the
+ rung says "will render 2026-01-01". The ghost is painted in the SEGMENT SNIPPET,
+ over an unset primitive: substituting the default for `value` instead would make
+ the field indistinguishable from an authored one to every path that reads it
+ (`areAllSegmentsFilled`, Backspace, the hidden input), and the primitive shadows
+ a written-back `value` prop it was not `bind:`-ed to, so re-seating the ghost
+ after a clear never lands. `placeholder` (the `DateValue` the segments COUNT
+ from, never one they display) carries the default too, so arrowing an empty
+ segment starts at the render's date rather than today's.
+-->
+<script lang="ts">
+	import { DateField as BitsDateField } from 'bits-ui';
+	import { parseDate, type DateValue } from '@internationalized/date';
+	import { syncedLocal } from './synced.svelte.js';
+	import './controls.css';
+
+	interface Props {
+		value: string | undefined;
+		/** The resolved `default:` in the boundary's currency (`YYYY-MM-DD`): parsed
+		 * for display only, shown while unset, never written. */
+		fallback?: string;
+		/** Accessible name for a field NOTHING else names: an object property, whose
+		 * name is the field label plus the property's. A field's own date takes
+		 * `labelledBy` instead. */
+		label?: string;
+		/** The field label's own id. `for` CANNOT reach this control: the segment
+		 * container is not a labelable element; so the association runs the other way,
+		 * and the label's click comes back through {@link focus}. It lands on the
+		 * container, which the primitive gives `role="group"`: the name belongs to the
+		 * SET of segments, and entering any of them announces it. (bits builds each
+		 * segment's own `aria-labelledby` from a `DateField.Label` inside its root:
+		 * unreachable from here, since the field's label is a grid child of the field,
+		 * not of the control.) */
+		labelledBy?: string;
+		/** The parked `description` (FieldLabel): announced after the name. */
+		describedBy?: string;
+		onCommit: (v: string | undefined) => void;
+	}
+	let { value, fallback, label, labelledBy, describedBy, onCommit }: Props = $props();
+
+	let wrapEl: HTMLElement | undefined = $state();
+	/** Take the caret: what the label click, and a parent placing focus here, calls.
+	 * The FIRST segment, not the field: focus lives on a segment (which is why the
+	 * ring is `.qm-focus-ring-within`), and the container holds none. `literal` is the
+	 * separator between segments: present, never focusable. */
+	export function focus(): void {
+		wrapEl?.querySelector<HTMLElement>('[data-segment]:not([data-segment="literal"])')?.focus();
+	}
+
+	// The stored form may carry a time (`datetime`); the date half is what a date
+	// field edits, so anything past `YYYY-MM-DD` is not this control's. `parseDate`
+	// throws on a malformed authored value: an empty field is the honest render.
+	function toDateValue(s: string): DateValue | undefined {
+		if (!s) return undefined;
+		try {
+			return parseDate(s);
+		} catch {
+			return undefined;
+		}
+	}
+
+	// Local value synced to `value` as a STRING (see the identity note above);
+	// own-edits stay local, only an external change reconciles back in. Driven
+	// CONTROLLED (`value` + `onValueChange`, never `bind:`) so reconciliation stays
+	// the package's.
+	const local = syncedLocal(() => value?.slice(0, 10) ?? '');
+	const parsed = $derived(toDateValue(local.value));
+	// The date the empty segments ghost, or undefined when there is nothing to ghost:
+	// the field is unset AND the default has a date form. A non-blank local that
+	// fails to parse is AUTHORED-but-malformed, which the empty field states
+	// honestly: the ghost would claim it unset. Held as the parsed value rather than
+	// a boolean so the substitution below narrows on the one fact it needs.
+	const fallbackDate = $derived(toDateValue(fallback?.slice(0, 10) ?? ''));
+	const ghost = $derived(local.value === '' ? fallbackDate : undefined);
+
+	// What one segment prints, and whether that text is shown-never-written.
+	//
+	// An UNFILLED segment is always shown-never-written, whether it prints the
+	// default's digits or the primitive's own `mm`/`dd`/`yyyy` hint: both state
+	// "nothing authored here". Only an unfilled segment ghosts: a half-entered date
+	// holds digits while the VALUE is still undefined (one unfilled segment unsets
+	// the whole field), so ghosting unconditionally would paint over, and dim, the
+	// digits just typed. The segment's own text is the tell: its unfilled hint is
+	// alphabetic in every locale bits ships (`mm`/`yyyy`, `аа`, `年`), a filled one
+	// is digits.
+	//
+	// The separators are `literal` parts, never unfilled; substitution covers the
+	// date parts only, so any time part keeps the primitive's text. Digits are
+	// zero-padded to the segment widths the field displays.
+	function segmentText(part: string, text: string): { text: string; ghosted: boolean } {
+		if (part === 'literal' || /\d/.test(text)) return { text, ghosted: false };
+		if (!ghost) return { text, ghosted: true };
+		switch (part) {
+			case 'year':
+				return { text: String(ghost.year).padStart(4, '0'), ghosted: true };
+			case 'month':
+				return { text: String(ghost.month).padStart(2, '0'), ghosted: true };
+			case 'day':
+				return { text: String(ghost.day).padStart(2, '0'), ghosted: true };
+			default:
+				return { text, ghosted: true };
+		}
+	}
+</script>
+
+<span class="qm-date-wrap" bind:this={wrapEl}>
+	<BitsDateField.Root
+		value={parsed}
+		placeholder={fallbackDate}
+		onValueChange={(d) => {
+			// `CalendarDate.toString()` is exactly `YYYY-MM-DD`. A cleared or
+			// half-typed field yields undefined: the unset rung.
+			local.value = d?.toString() ?? '';
+			onCommit(d?.toString());
+		}}
+	>
+		<!-- `data-ghosted` states the rung the way the enum trigger does. The date
+		 primitive emits no per-segment placeholder marker (only bits' `select`
+		 does), so the TONE rides the same attribute, set per segment from the
+		 substitution itself; which is also what keeps a half-typed date's own
+		 digits at full ink while the segments around them ghost. -->
+		<BitsDateField.Input
+			class="qm-date qm-control-box qm-focus-ring-within"
+			aria-label={labelledBy ? undefined : label}
+			aria-labelledby={labelledBy}
+			aria-describedby={describedBy}
+			data-ghosted={ghost ? '' : undefined}
+		>
+			{#snippet children({ segments })}
+				<!-- Keyed by INDEX: `part` repeats (the `literal` separators between
+				 segments all carry it) so a part-keyed block collides. -->
+				{#each segments as seg, i (i)}
+					{@const shown = segmentText(seg.part, seg.value)}
+					<BitsDateField.Segment
+						class="qm-date-segment"
+						part={seg.part}
+						data-ghosted={shown.ghosted ? '' : undefined}
+					>
+						{shown.text}
+					</BitsDateField.Segment>
+				{/each}
+			{/snippet}
+		</BitsDateField.Input>
+	</BitsDateField.Root>
+</span>
+
+<style>
+	/* A primitive renders its OWN element, which a scoped selector cannot reach:
+	 styled through the wrapper with `:global`. */
+	/* The box is `.qm-control-box` (controls.css), carried on the primitive's own
+	   element beside `.qm-focus-ring-within`; the segments inherit its size and ink
+	   rungs, so the field and its neighbours agree without a second rule. */
+	.qm-date-wrap :global(.qm-date) {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+	}
+	/* The ring rides `.qm-focus-ring-within` (controls.css) rather than the plain
+	   marker: focus lives on the SEGMENT, so it rings the field, not the segment
+	   the caret happens to be in. */
+	.qm-date-wrap :global(.qm-date-segment) {
+		padding: 0 var(--_qm-space-half);
+		border-radius: var(--_qm-radius-inner);
+		outline: none;
+	}
+	.qm-date-wrap :global(.qm-date-segment:focus) {
+		background: var(--_qm-surface-hover);
+	}
+	/* An unfilled segment is ghost-toned whatever it prints: the resolved `default:`
+	 when there is one to ghost, the `dd`/`mm`/`yyyy` hint when there is not. Shown,
+	 never written, either way. The marker is the component's own (see the snippet):
+	 the date primitive emits no placeholder attribute of its own. */
+	.qm-date-wrap :global(.qm-date-segment[data-ghosted]) {
+		color: var(--_qm-ink-ghost);
+	}
+</style>

package/dist/visual/DateField.svelte.d.ts

@@ -0,0 +1,28 @@
+import './controls.css';
+interface Props {
+    value: string | undefined;
+    /** The resolved `default:` in the boundary's currency (`YYYY-MM-DD`): parsed
+     * for display only, shown while unset, never written. */
+    fallback?: string;
+    /** Accessible name for a field NOTHING else names: an object property, whose
+     * name is the field label plus the property's. A field's own date takes
+     * `labelledBy` instead. */
+    label?: string;
+    /** The field label's own id. `for` CANNOT reach this control: the segment
+     * container is not a labelable element; so the association runs the other way,
+     * and the label's click comes back through {@link focus}. It lands on the
+     * container, which the primitive gives `role="group"`: the name belongs to the
+     * SET of segments, and entering any of them announces it. (bits builds each
+     * segment's own `aria-labelledby` from a `DateField.Label` inside its root:
+     * unreachable from here, since the field's label is a grid child of the field,
+     * not of the control.) */
+    labelledBy?: string;
+    /** The parked `description` (FieldLabel): announced after the name. */
+    describedBy?: string;
+    onCommit: (v: string | undefined) => void;
+}
+declare const DateField: import("svelte").Component<Props, {
+    focus: () => void;
+}, "">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

package/dist/visual/DiagnosticList.svelte

@@ -0,0 +1,50 @@
+<!--
+ Inline diagnostic display (VISUAL_EDITOR §Diagnostics), severity-styled via
+ CSS vars, NON-GATING: purely additive, never disables the field it sits
+ under. Shared by `Field.svelte` (a scalar/prose field) and `Card.svelte` (the
+ body leaf, which has no `Field.svelte` wrapper), so a card's body diagnostics
+ render the same way a field's do.
+-->
+<script lang="ts">
+	import type { Diagnostic } from '@quillmark/wasm';
+	import { diagnosticText, wording } from './strings.js';
+
+	// The consumer's formatter, ambient from the editor root. The fallback to
+	// `d.message` is load-bearing rather than defensive: the parse and render lanes
+	// carry their parameters only inside that English string, so a formatter that
+	// routes on `code` has nothing to build from and says so by returning
+	// `undefined` (FormatDiagnostic). That text is the whole rendering: no `hint`
+	// beside it, which would ship a two-language diagnostic.
+	const t = wording();
+
+	interface Props {
+		diagnostics: Diagnostic[] | undefined;
+	}
+	let { diagnostics }: Props = $props();
+</script>
+
+{#if diagnostics && diagnostics.length}
+	<!-- role=status: commit errors appear mid-typing; announce without stealing focus. -->
+	<div class="qm-diag-list" role="status">
+		{#each diagnostics as d, i (i)}
+			<span class="qm-diag-line" data-severity={d.severity}
+				>{diagnosticText(d, t.formatDiagnostic)}</span
+			>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.qm-diag-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_qm-space-half);
+	}
+	.qm-diag-line {
+		font-size: var(--_qm-text-meta);
+		color: var(--_qm-warning);
+	}
+	.qm-diag-line[data-severity='error'] {
+		color: var(--_qm-danger);
+	}
+</style>

package/dist/visual/DiagnosticList.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Diagnostic } from '@quillmark/wasm';
+interface Props {
+    diagnostics: Diagnostic[] | undefined;
+}
+declare const DiagnosticList: import("svelte").Component<Props, {}, "">;
+type DiagnosticList = ReturnType<typeof DiagnosticList>;
+export default DiagnosticList;

package/dist/visual/EnumField.svelte

@@ -0,0 +1,169 @@
+<!--
+ A `string`+`enum` (or `type: 'enum'`) field → a styled listbox over `enum ??
+ values`, on bits-ui. When nothing is authored the list shows a distinct UNSET
+ sentinel that GHOSTS the `default:` (muted, shown-never-written), distinguishable
+ from an authored pick and re-selectable; so re-picking the default fires a
+ change. The sentinel commits nothing; any real pick: INCLUDING the
+ value that equals the default: commits via the parent's typed `writer.set`.
+ Explicitly picking the default is the one place "commit the default" is genuine
+ intent, expressible. The sentinel stays in the list once a value is authored, as
+ the "clear back to default" (unset) affordance.
+
+ Styled rather than a native `<select>`: the dropdown list is UA-owned and reaches
+ no dial. Listbox semantics and typeahead come with the primitive.
+-->
+<script lang="ts">
+	import { Select } from 'bits-ui';
+	import Icon from './icons/Icon.svelte';
+	import { syncedLocal } from './synced.svelte.js';
+	import './controls.css';
+
+	interface Props {
+		value: string | undefined;
+		values: string[];
+		fallback?: string;
+		/** Accessible name for a trigger NOTHING else names: an object property, whose
+		 * name is the field label plus the property's. A field's own trigger takes `id`
+		 * instead and is named by the `<label for>` beside it (the trigger is a
+		 * `<button>`, so `for` reaches it and a label click opens the list: what the
+		 * native `<select>` this replaces would have done). */
+		label?: string;
+		/** `<label for>` target. Set → the label names this trigger, so `aria-label`
+		 * comes off: two names is where implementations disagree about which wins. */
+		id?: string;
+		/** The parked `description` (FieldLabel): announced after the name. */
+		describedBy?: string;
+		onCommit: (v: string | undefined) => void;
+		/** Consumer policy: `false` disables an option so it can't be picked.
+		 * A disallowed value already authored stays SELECTED and visible (disabled), never
+		 * stripped or mutated. The UNSET sentinel is exempt: clear-to-default always works. */
+		optionAllowed?: (value: string) => boolean;
+	}
+	let { value, values, fallback, label, id, describedBy, onCommit, optionAllowed }: Props =
+		$props();
+
+	// The sentinel's option value: a namespaced marker that no schema-authored
+	// enum member would ever be (`values` are classification markings, seal ids, and
+	// the like), so it never collides with a real option.
+	const UNSET = '__qm_unset__';
+
+	// Local selection synced to `value` (sentinel when unauthored); own-picks stay
+	// local, only an external change reconciles back in (see `syncedLocal`). Driven
+	// CONTROLLED (`value` + `onValueChange`, never `bind:`) so reconciliation stays
+	// the package's rather than the primitive's.
+	const local = syncedLocal(() => value ?? UNSET);
+
+	/** An empty enum member has no glyph of its own; an em dash stands in for it. */
+	const dash = (v: string | undefined) => v || '—';
+
+	const unset = $derived(local.value === UNSET);
+	const ghostText = $derived(dash(fallback));
+	/** What the closed trigger shows: the pick, or the ghosted default while unset. */
+	const shown = $derived(unset ? ghostText : dash(local.value));
+
+	/** The root to portal INTO: `document.body` would escape the consumer's dials
+	 * along with the editor's subtree. `undefined` falls back to bits-ui's default. */
+	let wrapEl = $state<HTMLElement | undefined>(undefined);
+	const portalTarget = $derived(wrapEl?.closest<HTMLElement>('[data-qm-root]') ?? undefined);
+</script>
+
+<span class="qm-select-wrap" bind:this={wrapEl}>
+	<!-- `allowDeselect={false}`: the UNSET sentinel is the clear-to-default
+	 affordance, so the primitive's own deselect must stay off. It reports a
+	 deselect as `''`: INDISTINGUISHABLE from picking the empty-string enum
+	 member the reference quill actually declares. -->
+	<Select.Root
+		type="single"
+		allowDeselect={false}
+		value={local.value}
+		onValueChange={(v) => {
+			if (v == null) return;
+			local.value = v;
+			// Sentinel → unset (parent `removeField`, default renders); any real pick
+			// (incl. the default value) → a genuine write.
+			onCommit(v === UNSET ? undefined : v);
+		}}
+	>
+		<Select.Trigger
+			class="qm-select qm-control-box qm-focus-ring"
+			{id}
+			aria-label={id ? undefined : label}
+			aria-describedby={describedBy}
+			data-ghosted={unset ? '' : undefined}
+		>
+			{shown}
+			<Icon name="chevron-down" size={14} />
+		</Select.Trigger>
+		<Select.Portal to={portalTarget}>
+			<Select.Content sideOffset={4}>
+				<!-- The list PORTALS out of the trigger's DOM but INTO the nearest
+				     `[data-qm-root]`, and carries the marker itself, like FormatPopover.
+				     The pill is this
+				     element (not the primitive's) because scoped CSS keys off which
+				     component OWNS the markup: a `class` passed to a primitive is a
+				     plain string and never picks up the scoping hash. -->
+				<div class="qm-menu-surface qm-select-content" data-qm-root>
+					<Select.Viewport>
+						<Select.Item class="qm-menu-item qm-select-item" value={UNSET} label={ghostText}>
+							<span class="qm-select-ghost">{ghostText}</span>
+						</Select.Item>
+						{#each values as v (v)}
+							<Select.Item
+								class="qm-menu-item qm-select-item"
+								value={v}
+								label={dash(v)}
+								disabled={optionAllowed?.(v) === false}
+							>
+								{dash(v)}
+							</Select.Item>
+						{/each}
+					</Select.Viewport>
+				</div>
+			</Select.Content>
+		</Select.Portal>
+	</Select.Root>
+</span>
+
+<style>
+	/* A primitive renders its OWN element, which a scoped selector cannot reach:
+	 styled through the wrapper with `:global`. */
+	/* The box is `.qm-control-box` (controls.css), carried on the primitive's own
+	   element the same way `.qm-focus-ring` is; only what a TRIGGER adds over a typed
+	   value's box is here. */
+	.qm-select-wrap :global(.qm-select) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--_qm-space);
+		width: 100%;
+		box-sizing: border-box;
+		text-align: left;
+		cursor: pointer;
+	}
+	/* The focus ring rides `.qm-focus-ring` on the trigger (controls.css). */
+	/* Shown-never-written: the closed control reads muted while unset, matching the
+	   ghosted placeholder the text/number controls show. */
+	.qm-select-wrap :global(.qm-select[data-ghosted]) {
+		color: var(--_qm-ink-ghost);
+	}
+	/* The open list is `.qm-menu-surface` and its rows `.qm-menu-item` (controls.css):
+	 the lift, the inset and the highlight are the shared menu recipe. What a LISTBOX
+	 adds over a menu is here: it spans its trigger rather than its own content, it
+	 scrolls past a screenful, and it marks the value already stored. */
+	.qm-select-content {
+		min-width: var(--bits-select-anchor-width);
+		max-height: 16rem;
+		overflow-y: auto;
+	}
+	.qm-select-content :global(.qm-select-item[data-selected]) {
+		font-weight: var(--_qm-weight-label);
+	}
+	/* Consumer policy: offered but unpickable, never hidden. */
+	.qm-select-content :global(.qm-select-item[data-disabled]) {
+		opacity: var(--_qm-opacity-muted);
+		cursor: default;
+	}
+	.qm-select-ghost {
+		color: var(--_qm-ink-ghost);
+	}
+</style>

package/dist/visual/EnumField.svelte.d.ts

@@ -0,0 +1,25 @@
+import './controls.css';
+interface Props {
+    value: string | undefined;
+    values: string[];
+    fallback?: string;
+    /** Accessible name for a trigger NOTHING else names: an object property, whose
+     * name is the field label plus the property's. A field's own trigger takes `id`
+     * instead and is named by the `<label for>` beside it (the trigger is a
+     * `<button>`, so `for` reaches it and a label click opens the list: what the
+     * native `<select>` this replaces would have done). */
+    label?: string;
+    /** `<label for>` target. Set → the label names this trigger, so `aria-label`
+     * comes off: two names is where implementations disagree about which wins. */
+    id?: string;
+    /** The parked `description` (FieldLabel): announced after the name. */
+    describedBy?: string;
+    onCommit: (v: string | undefined) => void;
+    /** Consumer policy: `false` disables an option so it can't be picked.
+     * A disallowed value already authored stays SELECTED and visible (disabled), never
+     * stripped or mutated. The UNSET sentinel is exempt: clear-to-default always works. */
+    optionAllowed?: (value: string) => boolean;
+}
+declare const EnumField: import("svelte").Component<Props, {}, "">;
+type EnumField = ReturnType<typeof EnumField>;
+export default EnumField;