@embedpdf/svelte 0.0.0-stage → 3.0.0-next.16

package/dist/form/FormFocusRing.svelte

@@ -0,0 +1,25 @@
+<!--
+  The focus ring of a field, painted above the field's picture and its see-through native
+  control. An inset outline on the box itself would sit under an opaque child, so rectangular
+  checkboxes and dropdowns would look unfocused while they are active in the native Tab order.
+-->
+<script lang="ts">
+  import { cssText, formFocusRingStyleOf } from '@embedpdf/web';
+
+  let {
+    visible,
+    color,
+  }: {
+    visible: boolean;
+    /** The ring's CSS color: the form's `focus.color` setting, through its CSS variable. */
+    color: string;
+  } = $props();
+</script>
+
+{#if visible}
+  <span
+    aria-hidden="true"
+    data-embedpdf-form-focus-ring=""
+    style={cssText(formFocusRingStyleOf(color))}
+  ></span>
+{/if}

package/dist/form/FormFocusRing.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    visible: boolean;
+    /** The ring's CSS color: the form's `focus.color` setting, through its CSS variable. */
+    color: string;
+};
+declare const FormFocusRing: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormFocusRing = ReturnType<typeof FormFocusRing>;
+export default FormFocusRing;

package/dist/form/FormLayer.svelte

@@ -0,0 +1,98 @@
+<!--
+  The form's fields on one page, painted as the engine draws them (their values, borders and
+  fonts), with real HTML controls people fill them in with, with or without the annotation
+  plugin. While it's on the page, the `<RenderLayer>` leaves the fields out of the page's picture.
+  The controls add what people interact with on top of the pictures:
+
+    text      → the picture at rest; focus shows an editor in the field's font.
+    toggle    → the picture is the control; a click writes the toggled value.
+    combo     → an invisible native <select> over the picture.
+    list      → a visible native <select>: one surface owns the rows, the keyboard and the
+                scrolling.
+    button    → a native click target over the picture that runs its action.
+    signature → "sign here", or the signed field's details, with the signature plugin.
+
+  The controls show while the active tool fills forms (the `pointer` and `pan` tools do), and
+  stand down in design mode, where fields are boxes you select and move. What the viewer draws itself (the
+  focus ring, the edge of a field without a border, the editor) takes its colors from the form
+  settings, which the `--epdf-form-*` CSS variables override. The colors, the field looks, the
+  boxes' and controls' styles, and the toggle, text-field and list-box policies are
+  `@embedpdf/web`'s, the same for every framework; every control keeps its presses from the
+  Stage below (`WidgetBox.svelte`).
+-->
+<script lang="ts">
+  import type { FormWidgetItem } from '@embedpdf/plugin-form';
+  // Loading a page's widgets and listing them as controls are host reads.
+  import { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';
+  import { InteractionToken } from '@embedpdf/plugin-interaction/contract/host';
+  import { usePage } from '../runtime/page.js';
+  import { usePaintsPagePart } from '../runtime/page-layers.svelte.js';
+  import {
+    shallowArray,
+    useOptionalCapability,
+    useOptionalSelector,
+  } from '../runtime/readers.svelte.js';
+  import ButtonControl from './ButtonControl.svelte';
+  import ComboControl from './ComboControl.svelte';
+  import FieldPictures from './FieldPictures.svelte';
+  import ListControl from './ListControl.svelte';
+  import { useFormColors } from './readers.svelte.js';
+  import SignatureControl from './SignatureControl.svelte';
+  import TextControl from './TextControl.svelte';
+  import ToggleControl from './ToggleControl.svelte';
+
+  const NO_WIDGETS: readonly FormWidgetItem[] = Object.freeze([]);
+
+  const page = usePage();
+  const form = useOptionalCapability(FormHostToken);
+  // While it's here with the form plugin, the page's picture leaves the fields to it.
+  usePaintsPagePart(() => (form.current ? page.ref : null), 'formFields');
+  const colors = useFormColors();
+  const active = useOptionalSelector(
+    InteractionToken,
+    (interaction) => interaction.activeToolEnables('form-fill'),
+    false,
+  );
+  // The same list until a widget on this page changes.
+  const items = useOptionalSelector(
+    FormHostToken,
+    (lens) => lens.listWidgets(page.ref),
+    NO_WIDGETS,
+    shallowArray,
+  );
+
+  // The page's widgets are read when the layer comes to it.
+  $effect(() => {
+    const lens = form.current;
+    const ref = page.ref;
+    if (lens) void lens.ensureLoaded(ref);
+  });
+
+  /**
+   * One control per widget of a field (a radio group has a widget per button), made again for
+   * another document: a text box keeps its field's editing policy for its life.
+   */
+  const keyOf = (item: FormWidgetItem) =>
+    `${page.documentId}:${item.key}:${item.annotObjectNumber}`;
+</script>
+
+<div style="position: absolute; inset: 0; pointer-events: none">
+  <FieldPictures />
+  {#if active.current}
+    {#each items.current as item (keyOf(item))}
+      {#if item.control === 'text'}
+        <TextControl {item} colors={colors.current} />
+      {:else if item.control === 'toggle'}
+        <ToggleControl {item} colors={colors.current} />
+      {:else if item.control === 'choice' && item.kind === 'list'}
+        <ListControl {item} colors={colors.current} />
+      {:else if item.control === 'choice'}
+        <ComboControl {item} colors={colors.current} />
+      {:else if item.control === 'button'}
+        <ButtonControl {item} colors={colors.current} />
+      {:else if item.control === 'signature'}
+        <SignatureControl {item} colors={colors.current} />
+      {/if}
+    {/each}
+  {/if}
+</div>

package/dist/form/FormLayer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FormLayer: import("svelte").Component<Record<string, never>, {}, "">;
+type FormLayer = ReturnType<typeof FormLayer>;
+export default FormLayer;

package/dist/form/ListControl.svelte

@@ -0,0 +1,49 @@
+<!--
+  A list: a visible native `<select>` in the field's own look, the settings where it has none.
+  It draws its own border, so the box gets no edge.
+-->
+<script lang="ts">
+  import type { FormWidgetItem } from '@embedpdf/plugin-form';
+  import { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';
+  import { cssText, listBoxControlStyleOf, rectInPixels } from '@embedpdf/web';
+  import type { FormColors } from '@embedpdf/web';
+  import { usePage } from '../runtime/page.js';
+  import { useCapability } from '../runtime/readers.svelte.js';
+  import FormFocusRing from './FormFocusRing.svelte';
+  import NativeListBox from './NativeListBox.svelte';
+  import { useWidgetActivation } from './widget.js';
+  import WidgetBox from './WidgetBox.svelte';
+
+  let {
+    item,
+    colors,
+  }: { item: Extract<FormWidgetItem, { control: 'choice' }>; colors: FormColors } = $props();
+
+  const page = usePage();
+  const form = useCapability(FormHostToken);
+  const activate = useWidgetActivation(() => item.annotationRef);
+  let focused = $state(false);
+
+  const listStyle = $derived(
+    cssText(listBoxControlStyleOf(item, rectInPixels(item.box, page.transform), colors)),
+  );
+
+  async function select(values: string[]) {
+    await form.setValue(item.fieldRef, { selectedValues: values });
+  }
+</script>
+
+<WidgetBox {item} {colors} edge={false} onclick={activate}>
+  <NativeListBox
+    ariaLabel={item.label}
+    disabled={item.disabled}
+    multi={item.multi}
+    options={item.options}
+    selected={item.selected}
+    onSelect={select}
+    onfocus={() => (focused = true)}
+    onblur={() => (focused = false)}
+    style={listStyle}
+  />
+  <FormFocusRing visible={focused} color={colors.focus} />
+</WidgetBox>

package/dist/form/ListControl.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormWidgetItem } from '@embedpdf/plugin-form';
+import type { FormColors } from '@embedpdf/web';
+type $$ComponentProps = {
+    item: Extract<FormWidgetItem, {
+        control: 'choice';
+    }>;
+    colors: FormColors;
+};
+declare const ListControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListControl = ReturnType<typeof ListControl>;
+export default ListControl;

package/dist/form/NativeListBox.svelte

@@ -0,0 +1,57 @@
+<!--
+  A PDF list box needs one owner for its pixels, its hit-testing and its scrolling. A baked
+  picture with an invisible native select can't give that: the browser and the PDF would each
+  keep their own top visible row. So the list is a visible native `<select>`, never made again
+  (its scroll position is the user's), showing a choice at once while the engine write is on its
+  way and the engine's selection when that changes (`@embedpdf/web`'s
+  `createOptimisticSelection`).
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { createOptimisticSelection, isolateWheel } from '@embedpdf/web';
+  import type { NativeListBoxProps } from './props.js';
+
+  let {
+    ariaLabel,
+    disabled,
+    multi,
+    options,
+    selected,
+    onSelect,
+    onfocus,
+    onblur,
+    style = '',
+  }: NativeListBoxProps = $props();
+
+  const selection = untrack(() => createOptimisticSelection(selected));
+  let shown = $state.raw(selection.get());
+  $effect(() => selection.subscribe(() => (shown = selection.get())));
+  // The engine's selection, each time the field gives a new one.
+  $effect(() => selection.setConfirmed(selected));
+
+  function onChange(event: Event & { currentTarget: HTMLSelectElement }) {
+    const values = Array.from(event.currentTarget.selectedOptions).map((option) => option.value);
+    selection.choose(values, onSelect);
+  }
+
+  // The Stage pans or zooms on the wheel from an ancestor: stop it at the list, so the browser
+  // scrolls the list with the same wheel event.
+  const ownWheel = (element: HTMLElement) => isolateWheel(element);
+</script>
+
+<select
+  {@attach ownWheel}
+  aria-label={ariaLabel}
+  multiple={multi}
+  size={Math.max(2, options.length)}
+  {disabled}
+  value={multi ? shown : (shown[0] ?? '')}
+  {onfocus}
+  {onblur}
+  onchange={onChange}
+  {style}
+>
+  {#each options as option, index (index)}
+    <option value={option.value}>{option.label}</option>
+  {/each}
+</select>

package/dist/form/NativeListBox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { NativeListBoxProps } from './props.js';
+declare const NativeListBox: import("svelte").Component<NativeListBoxProps, {}, "">;
+type NativeListBox = ReturnType<typeof NativeListBox>;
+export default NativeListBox;

package/dist/form/SignatureControl.svelte

@@ -0,0 +1,53 @@
+<!--
+  A signature field. With the signature plugin, an empty field is "sign here" (a click makes it
+  the target the next mark goes to), and a signed one asks your UI to show its details
+  (`onInspectionRequested`). Without the plugin, or for a read-only empty field, it is only its
+  picture.
+-->
+<script lang="ts">
+  import type { FormWidgetItem } from '@embedpdf/plugin-form';
+  import { SignatureToken } from '@embedpdf/plugin-signature/contract';
+  import type { FormColors } from '@embedpdf/web';
+  import { useOptionalCapability, useOptionalSelector } from '../runtime/readers.svelte.js';
+  import { FILL } from './widget.js';
+  import WidgetBox from './WidgetBox.svelte';
+
+  let {
+    item,
+    colors,
+  }: { item: Extract<FormWidgetItem, { control: 'signature' }>; colors: FormColors } = $props();
+
+  const signature = useOptionalCapability(SignatureToken);
+  // The signature plugin knows best whether it's signed (it reads again after every new
+  // version); the field's own value is the fallback.
+  const known = useOptionalSelector(
+    SignatureToken,
+    (plugin) => plugin.getSignature(item.fieldRef)?.signed ?? null,
+    null,
+  );
+  const signed = $derived(known.current ?? item.signed);
+  const actionable = $derived(signature.current !== null && (signed || !item.disabled));
+
+  function onClick() {
+    const plugin = signature.current;
+    if (!plugin) return;
+    if (signed) plugin.requestInspection(item.fieldRef);
+    else plugin.setTarget(item.fieldRef);
+  }
+</script>
+
+<WidgetBox {item} {colors} style="cursor: {actionable ? 'pointer' : 'default'}">
+  {#if actionable}
+    <button
+      type="button"
+      aria-label={item.label}
+      data-signed={signed ? '' : undefined}
+      onclick={onClick}
+      style={FILL}
+      style:padding="0"
+      style:border="0"
+      style:background="transparent"
+      style:cursor="inherit"
+    ></button>
+  {/if}
+</WidgetBox>

package/dist/form/SignatureControl.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormWidgetItem } from '@embedpdf/plugin-form';
+import type { FormColors } from '@embedpdf/web';
+type $$ComponentProps = {
+    item: Extract<FormWidgetItem, {
+        control: 'signature';
+    }>;
+    colors: FormColors;
+};
+declare const SignatureControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type SignatureControl = ReturnType<typeof SignatureControl>;
+export default SignatureControl;

package/dist/form/TextControl.svelte

@@ -0,0 +1,107 @@
+<!--
+  A text box: the field's picture at rest, an editor in the field's own font while focused. The
+  editor is always mounted, see-through at rest: the DOM is the focus manager, so Tab reaches
+  every field. Typing drafts (the plugin keeps the draft, so a download writes it), blur or Enter
+  commits, Escape puts the value back: `@embedpdf/web`'s `createTextFieldEditor`.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { FormWidgetItem } from '@embedpdf/plugin-form';
+  // The draft calls are the host lens's.
+  import { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';
+  import {
+    createFontMounts,
+    createTextFieldEditor,
+    cssText,
+    rectInPixels,
+    textFieldEditorStyleOf,
+  } from '@embedpdf/web';
+  import type { FormColors } from '@embedpdf/web';
+  import { usePage } from '../runtime/page.js';
+  import { useCapability } from '../runtime/readers.svelte.js';
+  import { useWidgetActivation } from './widget.js';
+  import WidgetBox from './WidgetBox.svelte';
+
+  let {
+    item,
+    colors,
+  }: { item: Extract<FormWidgetItem, { control: 'text' }>; colors: FormColors } = $props();
+
+  const page = usePage();
+  const form = useCapability(FormHostToken);
+  const activate = useWidgetActivation(() => item.annotationRef);
+
+  // One editing policy per field: the layer keys this control by its document, field and
+  // widget, so the field stays the same for the control's life.
+  const editor = untrack(() => createTextFieldEditor(form, item.fieldRef, item.value));
+  let editing = $state.raw(editor.getState());
+  $effect(() => editor.subscribe(() => (editing = editor.getState())));
+  // Take the field's value whenever it changes under us; the editor keeps what's typed until
+  // the edit ends.
+  $effect(() => editor.setValue(item.value));
+
+  // The text being typed, where the engine will draw it, in its face.
+  const layout = $derived(
+    item.annotationRef ? form.getTextEditorLayout(item.annotationRef, editing.draft) : null,
+  );
+  const mounts = createFontMounts();
+  $effect(() => () => mounts.release());
+  $effect(() => {
+    if (layout) mounts.mount([layout.program]);
+  });
+
+  const editorStyle = $derived(
+    cssText(
+      textFieldEditorStyleOf(
+        item,
+        rectInPixels(item.box, page.transform),
+        colors,
+        editing.focused,
+        layout,
+      ),
+    ),
+  );
+
+  function onInput(event: Event & { currentTarget: HTMLInputElement | HTMLTextAreaElement }) {
+    editor.input(event.currentTarget.value);
+  }
+
+  function onKeyDown(
+    event: KeyboardEvent & { currentTarget: HTMLInputElement | HTMLTextAreaElement },
+  ) {
+    if (editor.keyDown(event.key, item.multiline)) event.currentTarget.blur();
+  }
+</script>
+
+<!--
+  A click runs the widget's action too, as in Acrobat: the editor's focus click bubbles here, a
+  read-only field's lands here directly.
+-->
+<WidgetBox {item} {colors} onclick={activate}>
+  {#if item.multiline}
+    <textarea
+      value={editing.draft}
+      maxlength={item.maxLength ?? undefined}
+      aria-label={item.label}
+      disabled={item.disabled}
+      style={editorStyle}
+      onfocus={editor.focus}
+      oninput={onInput}
+      onblur={editor.blur}
+      onkeydown={onKeyDown}
+    ></textarea>
+  {:else}
+    <input
+      type={item.password ? 'password' : 'text'}
+      value={editing.draft}
+      maxlength={item.maxLength ?? undefined}
+      aria-label={item.label}
+      disabled={item.disabled}
+      style={editorStyle}
+      onfocus={editor.focus}
+      oninput={onInput}
+      onblur={editor.blur}
+      onkeydown={onKeyDown}
+    />
+  {/if}
+</WidgetBox>

package/dist/form/TextControl.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormWidgetItem } from '@embedpdf/plugin-form';
+import type { FormColors } from '@embedpdf/web';
+type $$ComponentProps = {
+    item: Extract<FormWidgetItem, {
+        control: 'text';
+    }>;
+    colors: FormColors;
+};
+declare const TextControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type TextControl = ReturnType<typeof TextControl>;
+export default TextControl;

package/dist/form/ToggleControl.svelte

@@ -0,0 +1,50 @@
+<!--
+  A checkbox or a radio button: the field's picture is the control, so the box itself takes the
+  role, the tab stop and the keys. A click, Space or Enter writes the toggled value, then runs
+  the widget's action (Acrobat's order: `@embedpdf/web`'s `pressToggle`).
+-->
+<script lang="ts">
+  import type { FormWidgetItem } from '@embedpdf/plugin-form';
+  // The value write and the activation go through the host lens, like the rest of the layer.
+  import { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';
+  import { pressToggle } from '@embedpdf/web';
+  import type { FormColors } from '@embedpdf/web';
+  import { useCapability } from '../runtime/readers.svelte.js';
+  import FormFocusRing from './FormFocusRing.svelte';
+  import { useWidgetActivation } from './widget.js';
+  import WidgetBox from './WidgetBox.svelte';
+
+  let {
+    item,
+    colors,
+  }: { item: Extract<FormWidgetItem, { control: 'toggle' }>; colors: FormColors } = $props();
+
+  const form = useCapability(FormHostToken);
+  const activate = useWidgetActivation(() => item.annotationRef);
+  let focused = $state(false);
+
+  // The value first, then the widget's action.
+  const press = () => pressToggle(form, item, activate);
+
+  function onKeyDown(event: KeyboardEvent) {
+    if (event.key !== ' ' && event.key !== 'Enter') return;
+    event.preventDefault();
+    press();
+  }
+</script>
+
+<WidgetBox
+  {item}
+  {colors}
+  role={item.kind === 'checkbox' ? 'checkbox' : 'radio'}
+  aria-checked={item.checked}
+  aria-label={item.label}
+  tabindex={item.disabled ? -1 : 0}
+  onclick={press}
+  onkeydown={onKeyDown}
+  onfocus={() => (focused = true)}
+  onblur={() => (focused = false)}
+  style="cursor: {item.disabled ? 'default' : 'pointer'}; outline: none"
+>
+  <FormFocusRing visible={focused} color={colors.focus} />
+</WidgetBox>

package/dist/form/ToggleControl.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { FormWidgetItem } from '@embedpdf/plugin-form';
+import type { FormColors } from '@embedpdf/web';
+type $$ComponentProps = {
+    item: Extract<FormWidgetItem, {
+        control: 'toggle';
+    }>;
+    colors: FormColors;
+};
+declare const ToggleControl: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToggleControl = ReturnType<typeof ToggleControl>;
+export default ToggleControl;

package/dist/form/WidgetBox.svelte

@@ -0,0 +1,82 @@
+<!--
+  The positioned box every control of `<FormLayer>` sits in: where the widget is on the page, the
+  widget's event surface (it always takes the pointer; the control inside gates the edits), and
+  the edge a field without a border of its own gets, so people see where to fill in.
+  `edge={false}` leaves the edge out for controls that draw their own (a list box) or never have
+  one (a button). Every other attribute (a role, a tab stop, keys) goes on the box itself: a
+  checkbox's box is its control.
+
+  The box keeps every press that starts in it from the page below. The Stage listens natively on
+  an ancestor, and a press reaching it would start the active tool's gesture or end an edit as a
+  click outside; Svelte hands `onpointerdown` to the app's root, after the Stage saw the press,
+  so the box stops it with a native listener (`isolatePointerDown`). The widget's pointer and
+  focus events (its `/AA` actions: enter, exit, down, up, focus, blur) go to the form plugin from
+  native listeners on the same box (`bindWidgetEvents`), never the control inside: "may edit this
+  field" and "may receive PDF action events" are different rights, and a session that may not
+  fill still sees hover tooltips. That `pointerdown` listener sits on the element that stops the
+  press, so the stopped press still reaches the field's "mouse down" action. Focus is
+  `focusin`/`focusout`, so a control's own blur (where a text field starts its commit) runs
+  before the box sends "blur", and a blur script sees the committed value.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { FormWidgetItem } from '@embedpdf/plugin-form';
+  // The widget's PDF events go to the plugin's host lens.
+  import { FormToken as FormHostToken } from '@embedpdf/plugin-form/contract/host';
+  import {
+    bindWidgetEvents,
+    cssText,
+    isolatePointerDown,
+    rectInPixels,
+    widgetBoxStyleOf,
+  } from '@embedpdf/web';
+  import type { FormColors } from '@embedpdf/web';
+  import { usePage } from '../runtime/page.js';
+  import { useCapability } from '../runtime/readers.svelte.js';
+
+  let {
+    item,
+    colors,
+    edge = true,
+    style = '',
+    children,
+    ...rest
+  }: {
+    item: FormWidgetItem;
+    colors: FormColors;
+    edge?: boolean;
+    /** More style for the box, after its own place. */
+    style?: string;
+    children?: Snippet;
+  } & Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'> = $props();
+
+  const page = usePage();
+  const form = useCapability(FormHostToken);
+  // The box's own place and edge, then the control's additions (a cursor, an outline).
+  const boxStyle = $derived(
+    [
+      cssText(widgetBoxStyleOf(item, rectInPixels(item.box, page.transform), colors, { edge })),
+      style,
+    ]
+      .filter(Boolean)
+      .join('; '),
+  );
+
+  function eventSurface(box: HTMLElement): () => void {
+    const release = isolatePointerDown(box);
+    const unbind = bindWidgetEvents(box, (event) => {
+      // Read at the event: a widget the engine has just placed gets its address later.
+      const { fieldRef, annotationRef } = item;
+      if (annotationRef) form.notifyWidgetEvent(fieldRef, annotationRef, event);
+    });
+    return () => {
+      release();
+      unbind();
+    };
+  }
+</script>
+
+<div {@attach eventSurface} {...rest} style={boxStyle}>
+  {@render children?.()}
+</div>

package/dist/form/WidgetBox.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { FormWidgetItem } from '@embedpdf/plugin-form';
+import type { FormColors } from '@embedpdf/web';
+type $$ComponentProps = {
+    item: FormWidgetItem;
+    colors: FormColors;
+    edge?: boolean;
+    /** More style for the box, after its own place. */
+    style?: string;
+    children?: Snippet;
+} & Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'children'>;
+declare const WidgetBox: import("svelte").Component<$$ComponentProps, {}, "">;
+type WidgetBox = ReturnType<typeof WidgetBox>;
+export default WidgetBox;

package/dist/form/props.d.ts

@@ -0,0 +1,21 @@
+/** The props of the form layer's own parts. */
+import type { FocusEventHandler } from 'svelte/elements';
+/** One row of a list box: what it shows, and the value it stands for. */
+export interface NativeListBoxOption {
+    label: string;
+    value: string;
+}
+/** The props of the list box `<FormLayer>` draws over a list field. */
+export interface NativeListBoxProps {
+    ariaLabel: string;
+    disabled: boolean;
+    multi: boolean;
+    options: readonly NativeListBoxOption[];
+    /** The engine's selection: the list shows it whenever it changes. */
+    selected: readonly string[];
+    /** Write the chosen values; a promise that rejects puts the engine's selection back. */
+    onSelect(values: string[]): void | Promise<unknown>;
+    onfocus?: FocusEventHandler<HTMLSelectElement>;
+    onblur?: FocusEventHandler<HTMLSelectElement>;
+    style?: string;
+}

package/dist/form/props.js

@@ -0,0 +1 @@
+export {};