@quillmark/svelte 0.0.0

package/dist/visual/ProseArrayElement.svelte

@@ -0,0 +1,98 @@
+<!--
+ One element of an array-of-`richtext` field (fixture `references`). Array
+ elements are NOT `applyChange`-addressable: `Addr.field` is a flat name, so
+ `references.0` has no op address. So
+ this is NOT a `createField` leaf: it mounts a minimal PM view over the codec's
+ decode/encode + inline schema, and on every edit hands the re-encoded
+ `Content` UP to the parent {@link ArrayField}, which commits the WHOLE array
+ by value (`writer.set(field, arrayWithElementReplaced)`). Anchors within an
+ element are dropped on that value write: acceptable for inline refs. Mounts
+ ONCE per stable element id (no reset on the parent's re-derive).
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { EditorState } from 'prosemirror-state';
+	import { EditorView } from 'prosemirror-view';
+	import { decode, pmToContent, inlineSchema, proseLeafPlugins } from '../core/codec/index.js';
+	import './controls.css';
+	import type { Content } from '@quillmark/wasm';
+
+	interface Props {
+		value: Content;
+		plaintext?: boolean;
+		/** Accessible name for the editable region (the array has no per-element label). */
+		label?: string;
+		onChange: (rt: Content) => void;
+		/** Raw keydown, for a container whose own keys run through this element: the
+		 * array repeater's Enter/Backspace (`ArrayField`). Fires BEFORE the view's own
+		 * keymap, so the state it reads is the one this keystroke has yet to change. */
+		onKey?: (e: KeyboardEvent) => void;
+		onFocusEl?: () => void;
+	}
+	let { value, plaintext, label, onChange, onKey, onFocusEl }: Props = $props();
+
+	let containerEl: HTMLDivElement | undefined = $state();
+	let view: EditorView | undefined;
+	/** Take the caret: what a parent placing focus on this element calls. The VIEW's
+	 * focus, not the element's: a PM view restores its selection, where a bare DOM
+	 * focus on a contenteditable leaves the caret unplaced. */
+	export function focus(): void {
+		view?.focus();
+	}
+
+	onMount(() => {
+		if (!containerEl) return;
+		// An array element is an inline, value-by-value leaf: the SAME keymap and
+		// plugin stack a `createField` leaf mounts (shared `proseLeafPlugins`), minus
+		// the anchor-position plugin (element anchors are dropped on the array's value
+		// write, per the header). Its own `dispatchTransaction` hands `Content` up.
+		const pmDoc = decode(value, inlineSchema, { plaintext: !!plaintext });
+		const state = EditorState.create({
+			doc: pmDoc,
+			plugins: proseLeafPlugins(inlineSchema, { inline: true, plaintext: !!plaintext })
+		});
+		const mounted = new EditorView(containerEl, {
+			state,
+			// Names the `contenteditable` for assistive tech (the array row has no
+			// label element to associate).
+			attributes: label ? { 'aria-label': label } : undefined,
+			dispatchTransaction(tr) {
+				const next = mounted.state.apply(tr);
+				mounted.updateState(next);
+				if (tr.docChanged) onChange(pmToContent(next.doc));
+			},
+			handleDOMEvents: {
+				focus: () => {
+					onFocusEl?.();
+					return false;
+				},
+				keydown: (_v, e) => {
+					onKey?.(e);
+					return false;
+				}
+			}
+		});
+		view = mounted;
+		return () => {
+			view = undefined;
+			mounted.destroy();
+		};
+	});
+</script>
+
+<!-- `.qm-control-box` (controls.css) is the whole box, so an array of `richtext` and
+ an array of `string` render rows of equal height. No floor: the reset in
+ `core/codec/prose.css` makes one line of prose measure one line. Width is the
+ row's to give: the element fills the track it is placed in (`ArrayField`). -->
+<div bind:this={containerEl} class="qm-array-prose qm-control-box"></div>
+
+<style>
+	/* Caret-primary, matching ProseField: the contenteditable outline is dropped
+	   and the active element is cued by the wrapper border tint below, not a ring. */
+	.qm-array-prose :global(.ProseMirror) {
+		outline: none;
+	}
+	.qm-array-prose:focus-within {
+		border-color: var(--_qm-accent);
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import './controls.css';
+import type { Content } from '@quillmark/wasm';
+interface Props {
+    value: Content;
+    plaintext?: boolean;
+    /** Accessible name for the editable region (the array has no per-element label). */
+    label?: string;
+    onChange: (rt: Content) => void;
+    /** Raw keydown, for a container whose own keys run through this element: the
+     * array repeater's Enter/Backspace (`ArrayField`). Fires BEFORE the view's own
+     * keymap, so the state it reads is the one this keystroke has yet to change. */
+    onKey?: (e: KeyboardEvent) => void;
+    onFocusEl?: () => void;
+}
+declare const ProseArrayElement: import("svelte").Component<Props, {
+    focus: () => void;
+}, "">;
+type ProseArrayElement = ReturnType<typeof ProseArrayElement>;
+export default ProseArrayElement;

package/dist/visual/ProseField.svelte

@@ -0,0 +1,213 @@
+<!--
+ One content prose leaf: a thin Svelte mount of the codec's `createField`
+ (VISUAL_EDITOR §Surface). Mounts ONCE per stable leaf key and tears down on
+ unmount; the leaf owns its PM state, history, and per-keystroke `applyChange`
+ commit, so this wrapper adds no logic beyond wiring and registration. The
+ `addr` is supplied by the parent as a LIVE object (its `card` a getter over the
+ stable-id→index map), so a card reorder re-targets this leaf's commits without
+ a remount: the caret rides the untouched PM view.
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { createField, type FieldController, type SlashState } from '../core/codec/index.js';
+	import SlashMenu from './SlashMenu.svelte';
+	import { wording } from './strings.js';
+	import './controls.css';
+	import type { Document, Quill, Addr } from '@quillmark/wasm';
+	import type { EditorErrorHandler } from '../core/errors.js';
+
+	interface Props {
+		doc: Document;
+		/** The schema this leaf reads its content through: `createField` binds a reader
+		 *  off it, so a stored string decodes by declared type rather than by guess. */
+		quill: Quill;
+		addr: Addr;
+		inline?: boolean;
+		plaintext?: boolean;
+		/**
+		 * Draw no box: the card body's leaf, and nothing else. A property
+		 * of the SLOT rather than of the leaf: `block` is not the same predicate, since
+		 * a `richtext` field without `inline` is block prose and still a control in a
+		 * row of controls. Only the body is paper, and only its caller knows it is.
+		 */
+		unframed?: boolean;
+		/** Accessible name for a leaf NOTHING else names: an array element, or the
+		 * card body. A leaf with a field label takes `labelledBy` instead. */
+		label?: string;
+		/** The field label's own id → `aria-labelledby` on the editable region. `for`
+		 * cannot reach a `contenteditable` (not a labelable element) so the
+		 * association runs the other way, and the label's click comes back through
+		 * the controller's `focus`. */
+		labelledBy?: string;
+		/** The parked `description` (FieldLabel) → `aria-describedby`. */
+		describedBy?: string;
+		/** Ghost shown on the empty leaf. An inline leaf's is the resolved `default:`
+		 * or nothing; a body's always has text, falling back to an invitation
+		 * (`resolveBodyGhost`). Reactive: a change is pushed into the mounted view,
+		 * never a remount. */
+		placeholder?: string;
+		/** Stable identity for the registry, stamped on the DOM node so a remount is
+		 *  visible as one. */
+		leafKey: string;
+		onFocus?: (addr: Addr) => void;
+		onCaretMove?: (addr: Addr, pos: number) => void;
+		/** A commit landed on this leaf: the prose change lane. */
+		onChange?: (addr: Addr) => void;
+		onError?: EditorErrorHandler;
+		register?: (key: string, controller: FieldController) => void;
+		unregister?: (key: string) => void;
+	}
+
+	let {
+		doc,
+		quill,
+		addr,
+		inline,
+		plaintext,
+		unframed,
+		label,
+		labelledBy,
+		describedBy,
+		placeholder,
+		leafKey,
+		onFocus,
+		onCaretMove,
+		onChange,
+		onError,
+		register,
+		unregister
+	}: Props = $props();
+
+	let containerEl: HTMLDivElement | undefined = $state();
+
+	// The island chrome's wording, read where every other surface reads it. Passed as
+	// a GETTER: the codec draws that chrome on each render, so a locale swap reaches a
+	// mounted table without remounting the leaf and losing the caret.
+	const t = wording();
+
+	/** The insert menu's live state, pushed by the leaf's trigger plugin. Held HERE
+	 * rather than in the shell: a trigger belongs to one caret in one leaf, so the
+	 * menu is the leaf's surface, unlike the one format popover that follows whichever
+	 * leaf is active. A constrained leaf never receives one (`createField` mounts the
+	 * trigger on the block schema alone). */
+	let slash: SlashState | undefined = $state();
+
+	// Block prose vs a control in a row of controls: the SAME predicate the codec
+	// picks its schema by (`createField`: `plaintext` implies `inline`), so the box a
+	// leaf draws and the schema it holds cannot disagree. Keyed on `inline` alone, a
+	// `plaintext`-only field would take the body's floor while holding one paragraph.
+	const block = $derived(!(inline || plaintext));
+
+	// An absent richtext field (a `default:`-only field like `tag_line`) is handled
+	// by the codec itself: `createField` decodes an empty content and overwrites on
+	// the first edit; so this wrapper adds no pre-seeding, and an untouched field
+	// stays absent (its default rendering intact) until actually edited.
+	let controller: FieldController | undefined;
+
+	/** Take the caret: what the label click calls. The CONTROLLER's focus, not the
+	 * container's: a PM view restores a selection that an `HTMLElement.focus` on
+	 * the wrapper leaves unplaced. */
+	export function focus(): void {
+		controller?.focus();
+	}
+
+	onMount(() => {
+		if (!containerEl) return;
+		controller = createField({
+			doc,
+			quill,
+			addr,
+			container: containerEl,
+			inline,
+			plaintext,
+			label,
+			labelledBy,
+			describedBy,
+			placeholder,
+			tableStrings: () => t.strings,
+			slashStrings: () => t.strings,
+			onSlash: (next) => {
+				slash = next;
+			},
+			onFocus,
+			onCaretMove,
+			onChange,
+			onError
+		});
+		register?.(leafKey, controller);
+		return () => {
+			unregister?.(leafKey);
+			controller?.destroy();
+			controller = undefined;
+		};
+	});
+
+	// The ghost outlives no remount of its own: the leaf is keyed by the card's
+	// session id, so a card RETYPED to another kind keeps this view and would keep
+	// the old kind's wording. Push it instead: the caret is worth more than the
+	// simplicity of rebuilding.
+	$effect(() => {
+		controller?.setPlaceholder(placeholder);
+	});
+</script>
+
+<div
+	bind:this={containerEl}
+	class="qm-prose"
+	class:qm-control-box={!unframed}
+	class:qm-prose-block={block}
+	data-leaf-key={leafKey}
+></div>
+<SlashMenu menu={slash} leaf={() => controller} label={t.strings.slashLabel} />
+
+<style>
+	/* The box is `.qm-control-box` (controls.css): the same rule the input beside it
+	 draws, so the two agree on height by construction rather than by two floors
+	 tuned to match. Nothing here restates it, and there is no
+	 `min-height`: `core/codec/prose.css` resets the paragraph box, so one line of
+	 prose in this box measures one line of text in that one. */
+	.qm-prose {
+		/* Positioned for the arrival wash `setCaret` inserts (`core/bloom.ts`): an
+		 inset child, so it covers the text without fading it or tinting the leaf's
+		 own surface. */
+		position: relative;
+	}
+	/* A leaf the inline schema does NOT constrain (the body) is paper rather than a
+	 cell in a row of controls, so it opens at a few lines and grows. The floor is
+	 three LINE BOXES, not a length: size times leading is what one line measures, so
+	 both factors are named or the expression stops meaning the three lines it claims.
+	 It moves with the type ramp and with nothing else. Three is what an EMPTY body
+	 costs, which is the only state the floor is ever the height: the ghost takes the
+	 first line, so the opening reads as an invitation with room under it rather than
+	 as a drop. */
+	.qm-prose-block {
+		min-height: calc(var(--_qm-text-body) * var(--_qm-leading-body) * 3);
+	}
+	/* The caret is the prose leaf's focus indicator, not a ring: a ring around a
+	 contenteditable reads as form chrome rather than as paper. So the outline is
+	 dropped; a boxed leaf tints its wrapper border below. */
+	.qm-prose :global(.ProseMirror) {
+		outline: none;
+	}
+	/* Active-leaf cue: tint the hairline to the focus hue, shared with the scalar
+	 ring and the preview active box: no added box (the editor↔preview address).
+	 Scoped to the leaves that HAVE a hairline: the body has none, and the caret is
+	 the whole indicator there: one surface per card, and the largest in it, so
+	 "which leaf am I in" is not a question it raises. A rule drawn to answer it
+	 would be a stroke bought back to replace the one unframing removed. */
+	.qm-prose.qm-control-box:focus-within {
+		border-color: var(--_qm-accent);
+	}
+	/* Empty-leaf ghost: the resolved `default:` as dim/italic ghost,
+	   matching the scalar ghost rung. Rendered from a node decoration's data attr so
+	   it stays out of the
+	   document; `float`/`height:0` keep it from displacing the caret. */
+	.qm-prose :global(.ProseMirror .qm-prose-placeholder::before) {
+		content: attr(data-placeholder);
+		color: var(--_qm-ink-ghost);
+		font-style: italic;
+		float: left;
+		height: 0;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,50 @@
+import { type FieldController } from '../core/codec/index.js';
+import './controls.css';
+import type { Document, Quill, Addr } from '@quillmark/wasm';
+import type { EditorErrorHandler } from '../core/errors.js';
+interface Props {
+    doc: Document;
+    /** The schema this leaf reads its content through: `createField` binds a reader
+     *  off it, so a stored string decodes by declared type rather than by guess. */
+    quill: Quill;
+    addr: Addr;
+    inline?: boolean;
+    plaintext?: boolean;
+    /**
+     * Draw no box: the card body's leaf, and nothing else. A property
+     * of the SLOT rather than of the leaf: `block` is not the same predicate, since
+     * a `richtext` field without `inline` is block prose and still a control in a
+     * row of controls. Only the body is paper, and only its caller knows it is.
+     */
+    unframed?: boolean;
+    /** Accessible name for a leaf NOTHING else names: an array element, or the
+     * card body. A leaf with a field label takes `labelledBy` instead. */
+    label?: string;
+    /** The field label's own id → `aria-labelledby` on the editable region. `for`
+     * cannot reach a `contenteditable` (not a labelable element) so the
+     * association runs the other way, and the label's click comes back through
+     * the controller's `focus`. */
+    labelledBy?: string;
+    /** The parked `description` (FieldLabel) → `aria-describedby`. */
+    describedBy?: string;
+    /** Ghost shown on the empty leaf. An inline leaf's is the resolved `default:`
+     * or nothing; a body's always has text, falling back to an invitation
+     * (`resolveBodyGhost`). Reactive: a change is pushed into the mounted view,
+     * never a remount. */
+    placeholder?: string;
+    /** Stable identity for the registry, stamped on the DOM node so a remount is
+     *  visible as one. */
+    leafKey: string;
+    onFocus?: (addr: Addr) => void;
+    onCaretMove?: (addr: Addr, pos: number) => void;
+    /** A commit landed on this leaf: the prose change lane. */
+    onChange?: (addr: Addr) => void;
+    onError?: EditorErrorHandler;
+    register?: (key: string, controller: FieldController) => void;
+    unregister?: (key: string) => void;
+}
+declare const ProseField: import("svelte").Component<Props, {
+    focus: () => void;
+}, "">;
+type ProseField = ReturnType<typeof ProseField>;
+export default ProseField;

package/dist/visual/SlashMenu.svelte

@@ -0,0 +1,126 @@
+<!--
+ The slash menu. The leaf's own surface, not the
+ shell's: the trigger belongs to one caret in one leaf, so it is mounted by
+ `ProseField` beside the view it reads from, unlike the ONE shell-owned format
+ popover that follows whichever leaf is active.
+
+ The MODEL is the codec's (`codec/slash.ts`: the trigger run, the query, the
+ highlighted index, and what each pick does). This component draws it and nothing
+ else. The keys are the leaf's keymap for the same reason: the caret stays in the
+ contenteditable while the menu is open, so a focus-taking listbox would move the
+ selection the insert is measured against. What is left here is the POINTER's half:
+ buttons that pick, and that swallow their own mousedown so the caret stays put.
+
+ The highlight has ONE lane: `data-highlighted` marks whichever item the codec's
+ index names, and a pointer entering an item MOVES that index rather than painting a
+ second highlight the keyboard cannot reach (controls.css, the shared menu recipe).
+-->
+<script lang="ts">
+	import { Popover } from 'bits-ui';
+	import type { FieldController, SlashState } from '../core/codec/index.js';
+	import './controls.css';
+
+	interface Props {
+		/** The live menu, or `undefined` when closed: the codec's report channel. Named
+		 *  `menu` rather than `state`, which is the rune's word in this file. */
+		menu: SlashState | undefined;
+		/** The leaf the trigger is in; `slashFocus` / `slashPick` drive it. */
+		leaf: () => FieldController | undefined;
+		/** The menu's accessible name. */
+		label: string;
+	}
+	let { menu, leaf, label }: Props = $props();
+
+	/** Raised whenever the codec reports offers. Mirrored into local state rather than
+	 * derived, because the primitive OWNS this prop: its own dismissal layer (an
+	 * outside press) writes it, and a derived it cannot write to is an error rather
+	 * than a dismissal. The next report re-syncs, so the codec stays the authority on
+	 * whether a run is live. */
+	let open = $state(false);
+	$effect(() => {
+		open = !!menu && menu.items.length > 0;
+	});
+
+	/** The root to portal INTO, resolved from the leaf's own DOM so the menu lands
+	 * inside whichever `[data-qm-root]` raised it and inherits the consumer's dials;
+	 * `undefined` falls back to bits-ui's `document.body`. */
+	const portalTarget = $derived(leaf()?.el.closest<HTMLElement>('[data-qm-root]') ?? undefined);
+
+	/** Swallow the item's own mousedown: without it the browser focuses the item and
+	 *  blurs the leaf, taking the trigger run's caret with it. */
+	function keepFocus(e: MouseEvent): void {
+		e.preventDefault();
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Portal to={portalTarget}>
+		<Popover.Content
+			customAnchor={menu?.anchor ?? null}
+			side="bottom"
+			align="start"
+			trapFocus={false}
+			sideOffset={6}
+			onOpenAutoFocus={(e: Event) => e.preventDefault()}
+			onCloseAutoFocus={(e: Event) => e.preventDefault()}
+		>
+			{#snippet child({ props, wrapperProps, open: raised })}
+				<div {...wrapperProps}>
+					<!-- `role="group"`, not `listbox`: the caret never leaves the leaf, so no
+					     item is ever the focused option an `option` promises, and the buttons
+					     carry no roving tabindex. A labelled group of real buttons is the honest
+					     description, and it is the shape the format popover already takes.
+					     `inert` is the dismissal's other half: a surface on its way out is not
+					     a thing to click, tab into, or read. -->
+					<div
+						{...props}
+						class="qm-slash-menu qm-menu-surface"
+						data-qm-root
+						role="group"
+						aria-label={label}
+						inert={!raised}
+					>
+						{#each menu?.items ?? [] as item, i (item.id)}
+							<button
+								type="button"
+								class="qm-menu-item qm-slash-item"
+								data-highlighted={i === menu?.index ? '' : undefined}
+								onmousedown={keepFocus}
+								onclick={() => leaf()?.slashPick(item.id)}
+								onpointerenter={() => leaf()?.slashFocus(item.id)}
+							>
+								{item.label}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/snippet}
+		</Popover.Content>
+	</Popover.Portal>
+</Popover.Root>
+
+<style>
+	/* The surface, its inset, its item pad and the rung a highlight fills with are all
+	   `.qm-menu-surface` / `.qm-menu-item` (controls.css): the same recipe the enum
+	   listbox and the card stack's kind menu draw, because all three are lists picked
+	   from. What is here is this menu's own: a measure, so a long label does not stretch
+	   the surface across the card, and a scroll for a filtered list that stays long. */
+	.qm-slash-menu {
+		min-width: 12rem;
+		max-height: 16rem;
+		overflow-y: auto;
+	}
+	/* An item is a row of text, not a glyph: the whole row is the target, and the label
+	   is the accessible name with nothing beside it. A button is a button, so the UA's
+	   own box is taken back; what is left is the shared item recipe. */
+	.qm-slash-item {
+		display: block;
+		width: 100%;
+		border: none;
+		background: none;
+		font: inherit;
+		color: inherit;
+		text-align: left;
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+import type { FieldController, SlashState } from '../core/codec/index.js';
+import './controls.css';
+interface Props {
+    /** The live menu, or `undefined` when closed: the codec's report channel. Named
+     *  `menu` rather than `state`, which is the rune's word in this file. */
+    menu: SlashState | undefined;
+    /** The leaf the trigger is in; `slashFocus` / `slashPick` drive it. */
+    leaf: () => FieldController | undefined;
+    /** The menu's accessible name. */
+    label: string;
+}
+declare const SlashMenu: import("svelte").Component<Props, {}, "">;
+type SlashMenu = ReturnType<typeof SlashMenu>;
+export default SlashMenu;

package/dist/visual/TextField.svelte

@@ -0,0 +1,63 @@
+<!--
+ A `string` field → text input. Commits a non-empty edit LIVE (on input) via the
+ parent's typed `writer.set`, so the preview tracks typing. A cleared field is the
+ UNSET rung of the commitment ladder (VISUAL_EDITOR §"Structure mirrors the schema"): it
+ commits `undefined` (the parent removes the field, ghosted `default:` renders):
+ but at `change` (blur), NOT per keystroke, so select-all-and-retype doesn't flash
+ the field through its default between the delete and the first typed char.
+ Trade-off (recorded in VISUAL_EDITOR): an explicit empty string OVER a non-empty
+ default is inexpressible from the UI: clear and unset collapse to one gesture.
+-->
+<script lang="ts">
+	import { syncedLocal } from './synced.svelte.js';
+	import './controls.css';
+
+	interface Props {
+		value: string | undefined;
+		placeholder?: string;
+		/** Accessible name for an input NOTHING else names: an array element, whose
+		 * name is the field label plus its 1-based index. A field's own input takes
+		 * `id` instead and is named by the `<label for>` beside it. */
+		label?: string;
+		/** `<label for>` target. Set → the label names this input, 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;
+		/** Raw keydown, for a container whose own keys run through this control: the
+		 * array repeater's Enter/Backspace (`ArrayField`). */
+		onKey?: (e: KeyboardEvent) => void;
+	}
+	let { value, placeholder, label, id, describedBy, onCommit, onKey }: Props = $props();
+
+	// Local input state synced to `value`: own-typing stays local, only an external
+	// change reconciles back in (see `syncedLocal`).
+	const local = syncedLocal(() => value ?? '');
+
+	let inputEl: HTMLInputElement | undefined = $state();
+	/** Take the caret: what a parent placing focus on this control calls. */
+	export function focus(): void {
+		inputEl?.focus();
+	}
+</script>
+
+<input
+	bind:this={inputEl}
+	class="qm-input qm-focus-ring"
+	type="text"
+	value={local.value}
+	{id}
+	{placeholder}
+	aria-label={id ? undefined : label}
+	aria-describedby={describedBy}
+	onkeydown={onKey}
+	oninput={(e) => {
+		local.value = (e.currentTarget as HTMLInputElement).value;
+		// Live-commit a non-empty edit; defer a cleared field to `change` (see header).
+		if (local.value !== '') onCommit(local.value);
+	}}
+	onchange={() => {
+		if (local.value === '') onCommit(undefined);
+	}}
+/>

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

@@ -0,0 +1,23 @@
+import './controls.css';
+interface Props {
+    value: string | undefined;
+    placeholder?: string;
+    /** Accessible name for an input NOTHING else names: an array element, whose
+     * name is the field label plus its 1-based index. A field's own input takes
+     * `id` instead and is named by the `<label for>` beside it. */
+    label?: string;
+    /** `<label for>` target. Set → the label names this input, 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;
+    /** Raw keydown, for a container whose own keys run through this control: the
+     * array repeater's Enter/Backspace (`ArrayField`). */
+    onKey?: (e: KeyboardEvent) => void;
+}
+declare const TextField: import("svelte").Component<Props, {
+    focus: () => void;
+}, "">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;