@k2b/ui 0.32.0 → 0.34.0

package/dist/browser/inputs/ChoiceTiles.js

@@ -0,0 +1,135 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-choice-tiles__group role=radiogroup>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button role=radio class=k2b-choice-tiles__tile><span class=k2b-choice-tiles__visual aria-hidden=true></span><span class=k2b-choice-tiles__text><span class=k2b-choice-tiles__label></span><!$><!/>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-choice-tiles__status>`);
+import { For } from "solid-js";
+import { createFieldMeta, Field, fieldDescribedBy } from "../internal/field";
+import { radioKeyTarget } from "../internal/radio-keys";
+import { resolveMaybeAccessor } from "./field-contract";
+/**
+ * A labeled single choice shown as tiles with a preview, for picking how something looks: a face shape, a frame, a
+ * kind of picture. Every tile keeps its size when chosen, so nothing moves. Use `ChoiceChips` for text choices and
+ * `ColorChoices` for named colours.
+ */
+export function ChoiceTiles(props) {
+  const meta = createFieldMeta(props.id);
+  let group;
+  const value = () => resolveMaybeAccessor(props.value) ?? null;
+  const tabStop = (option, index) => value() === option.value || index === 0 && !props.options.some(candidate => candidate.value === value());
+  const choose = (index, focus = false) => {
+    const option = props.options[index];
+    if (!option || props.disabled) return;
+    props.onValueChange?.(option.value);
+    props.onValueCommit?.(option.value);
+    // The radios in their current DOM order: options may have been reordered since they rendered.
+    if (focus) queueMicrotask(() => group?.querySelectorAll('[role="radio"]')[index]?.focus());
+  };
+  return _$createComponent(Field, {
+    meta: meta,
+    labelFor: false,
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$);
+      var _ref$ = group;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$) : group = _el$;
+      _$insert(_el$, _$createComponent(For, {
+        get each() {
+          return props.options;
+        },
+        children: (option, index) => (() => {
+          var _el$2 = _$getNextElement(_tmpl$2),
+            _el$3 = _el$2.firstChild,
+            _el$4 = _el$3.nextSibling,
+            _el$5 = _el$4.firstChild,
+            _el$6 = _el$5.nextSibling,
+            [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling);
+          _el$2.$$keydown = event => {
+            const target = radioKeyTarget(event.key, index(), props.options.length);
+            if (target === undefined) return;
+            event.preventDefault();
+            choose(target, true);
+          };
+          _el$2.$$click = () => choose(index());
+          _$insert(_el$3, () => option.visual);
+          _$insert(_el$5, () => option.label);
+          _$insert(_el$4, (() => {
+            var _c$ = _$memo(() => props.layout === "row");
+            return () => _c$() && (() => {
+              var _el$8 = _$getNextElement(_tmpl$3);
+              _$insert(_el$8, () => option.status ?? "");
+              return _el$8;
+            })();
+          })(), _el$7, _co$);
+          _$effect(_p$ => {
+            var _v$7 = value() === option.value,
+              _v$8 = props.disabled,
+              _v$9 = tabStop(option, index()) ? 0 : -1;
+            _v$7 !== _p$.e && _$setAttribute(_el$2, "aria-checked", _p$.e = _v$7);
+            _v$8 !== _p$.t && _$setProperty(_el$2, "disabled", _p$.t = _v$8);
+            _v$9 !== _p$.a && _$setAttribute(_el$2, "tabindex", _p$.a = _v$9);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined
+          });
+          _$runHydrationEvents();
+          return _el$2;
+        })()
+      }));
+      _$effect(_p$ => {
+        var _v$ = props.layout ?? "grid",
+          _v$2 = props.dimmed ? "true" : undefined,
+          _v$3 = props.label ? undefined : props["aria-label"],
+          _v$4 = props.label ? meta.labelId : undefined,
+          _v$5 = fieldDescribedBy(meta, props),
+          _v$6 = props.disabled ? "true" : undefined;
+        _v$ !== _p$.e && _$setAttribute(_el$, "data-layout", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "data-dimmed", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$, "aria-label", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$, "aria-labelledby", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setAttribute(_el$, "aria-describedby", _p$.i = _v$5);
+        _v$6 !== _p$.n && _$setAttribute(_el$, "aria-disabled", _p$.n = _v$6);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined,
+        n: undefined
+      });
+      return _el$;
+    }
+  });
+}
+_$delegateEvents(["click", "keydown"]);
+//# sourceMappingURL=ChoiceTiles.js.map

package/dist/browser/inputs/ChoiceTiles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/ChoiceTiles.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\nimport { createFieldMeta, Field, fieldDescribedBy } from \"../internal/field\";\nimport { radioKeyTarget } from \"../internal/radio-keys\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\n\nexport type ChoiceTileOption<T extends string = string> = {\n  value: T;\n  label: string;\n  /** What the choice looks like, such as a preview image; decorative, the label names the choice. */\n  visual: JSX.Element;\n  /** A short state under the label, such as \"Active\"; keeps its line, so tiles never change height. */\n  status?: string;\n};\n\nexport type ChoiceTilesProps<T extends string = string> = Omit<ValueFieldProps<T | null>, \"onValueChange\" | \"onValueCommit\"> & {\n  options: readonly ChoiceTileOption<T>[];\n  /** `grid`: preview over label in as many columns as fit. `row`: preview beside label in one row, stacked on phones. */\n  layout?: \"grid\" | \"row\";\n  /** The choice is kept but has no visible effect right now; previews are dimmed, choosing still works. */\n  dimmed?: boolean;\n  onValueChange?: (value: T) => void;\n  onValueCommit?: (value: T) => void;\n};\n\n/**\n * A labeled single choice shown as tiles with a preview, for picking how something looks: a face shape, a frame, a\n * kind of picture. Every tile keeps its size when chosen, so nothing moves. Use `ChoiceChips` for text choices and\n * `ColorChoices` for named colours.\n */\nexport function ChoiceTiles<T extends string = string>(props: ChoiceTilesProps<T>): JSX.Element {\n  const meta = createFieldMeta(props.id);\n  let group: HTMLDivElement | undefined;\n  const value = () => resolveMaybeAccessor(props.value) ?? null;\n  const tabStop = (option: ChoiceTileOption<T>, index: number) =>\n    value() === option.value || (index === 0 && !props.options.some((candidate) => candidate.value === value()));\n  const choose = (index: number, focus = false) => {\n    const option = props.options[index];\n    if (!option || props.disabled) return;\n    props.onValueChange?.(option.value);\n    props.onValueCommit?.(option.value);\n    // The radios in their current DOM order: options may have been reordered since they rendered.\n    if (focus) queueMicrotask(() => group?.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')[index]?.focus());\n  };\n  return (\n    <Field\n      meta={meta}\n      labelFor={false}\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={props.error}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div\n        class=\"k2b-choice-tiles__group\"\n        ref={group}\n        role=\"radiogroup\"\n        data-layout={props.layout ?? \"grid\"}\n        data-dimmed={props.dimmed ? \"true\" : undefined}\n        aria-label={props.label ? undefined : props[\"aria-label\"]}\n        aria-labelledby={props.label ? meta.labelId : undefined}\n        aria-describedby={fieldDescribedBy(meta, props)}\n        aria-disabled={props.disabled ? \"true\" : undefined}\n      >\n        <For each={props.options}>\n          {(option, index) => (\n            <button\n              type=\"button\"\n              role=\"radio\"\n              class=\"k2b-choice-tiles__tile\"\n              aria-checked={value() === option.value}\n              disabled={props.disabled}\n              tabIndex={tabStop(option, index()) ? 0 : -1}\n              onClick={() => choose(index())}\n              onKeyDown={(event) => {\n                const target = radioKeyTarget(event.key, index(), props.options.length);\n                if (target === undefined) return;\n                event.preventDefault();\n                choose(target, true);\n              }}\n            >\n              <span class=\"k2b-choice-tiles__visual\" aria-hidden=\"true\">\n                {option.visual}\n              </span>\n              <span class=\"k2b-choice-tiles__text\">\n                <span class=\"k2b-choice-tiles__label\">{option.label}</span>\n                {props.layout === \"row\" && <span class=\"k2b-choice-tiles__status\">{option.status ?? \"\"}</span>}\n              </span>\n            </button>\n          )}\n        </For>\n      </div>\n    </Field>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/inputs/ColorChoices.js

@@ -0,0 +1,120 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div class=k2b-color-choices__group role=radiogroup>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<button type=button role=radio class=k2b-color-choices__swatch><i class="ti ti-check"aria-hidden=true>`);
+import { For } from "solid-js";
+import { createFieldMeta, Field, fieldDescribedBy } from "../internal/field";
+import { radioKeyTarget } from "../internal/radio-keys";
+import { resolveMaybeAccessor } from "./field-contract";
+/**
+ * A labeled single choice from a fixed palette of named colours, shown as round swatches. Use `ColorInput` when any
+ * colour is allowed.
+ */
+export function ColorChoices(props) {
+  const meta = createFieldMeta(props.id);
+  let group;
+  const value = () => resolveMaybeAccessor(props.value) ?? null;
+  const tabStop = (option, index) => value() === option.value || index === 0 && !props.options.some(candidate => candidate.value === value());
+  const choose = (index, focus = false) => {
+    const option = props.options[index];
+    if (!option || props.disabled) return;
+    props.onValueChange?.(option.value);
+    props.onValueCommit?.(option.value);
+    // The radios in their current DOM order: options may have been reordered since they rendered.
+    if (focus) queueMicrotask(() => group?.querySelectorAll('[role="radio"]')[index]?.focus());
+  };
+  return _$createComponent(Field, {
+    meta: meta,
+    labelFor: false,
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return props.error;
+    },
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return props.disabled;
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$);
+      var _ref$ = group;
+      typeof _ref$ === "function" ? _$use(_ref$, _el$) : group = _el$;
+      _$insert(_el$, _$createComponent(For, {
+        get each() {
+          return props.options;
+        },
+        children: (option, index) => (() => {
+          var _el$2 = _$getNextElement(_tmpl$2);
+          _el$2.$$keydown = event => {
+            const target = radioKeyTarget(event.key, index(), props.options.length);
+            if (target === undefined) return;
+            event.preventDefault();
+            choose(target, true);
+          };
+          _el$2.$$click = () => choose(index());
+          _$effect(_p$ => {
+            var _v$5 = option.color,
+              _v$6 = value() === option.value,
+              _v$7 = option.label,
+              _v$8 = option.label,
+              _v$9 = props.disabled,
+              _v$0 = tabStop(option, index()) ? 0 : -1;
+            _v$5 !== _p$.e && _$setStyleProperty(_el$2, "--k2b-color-choice", _p$.e = _v$5);
+            _v$6 !== _p$.t && _$setAttribute(_el$2, "aria-checked", _p$.t = _v$6);
+            _v$7 !== _p$.a && _$setAttribute(_el$2, "aria-label", _p$.a = _v$7);
+            _v$8 !== _p$.o && _$setAttribute(_el$2, "title", _p$.o = _v$8);
+            _v$9 !== _p$.i && _$setProperty(_el$2, "disabled", _p$.i = _v$9);
+            _v$0 !== _p$.n && _$setAttribute(_el$2, "tabindex", _p$.n = _v$0);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined,
+            a: undefined,
+            o: undefined,
+            i: undefined,
+            n: undefined
+          });
+          _$runHydrationEvents();
+          return _el$2;
+        })()
+      }));
+      _$effect(_p$ => {
+        var _v$ = props.label ? undefined : props["aria-label"],
+          _v$2 = props.label ? meta.labelId : undefined,
+          _v$3 = fieldDescribedBy(meta, props),
+          _v$4 = props.disabled ? "true" : undefined;
+        _v$ !== _p$.e && _$setAttribute(_el$, "aria-label", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$, "aria-labelledby", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setAttribute(_el$, "aria-describedby", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setAttribute(_el$, "aria-disabled", _p$.o = _v$4);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      return _el$;
+    }
+  });
+}
+_$delegateEvents(["click", "keydown"]);
+//# sourceMappingURL=ColorChoices.js.map

package/dist/browser/inputs/ColorChoices.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["inputs/ColorChoices.tsx"],"sourcesContent":["import { For, type JSX } from \"solid-js\";\nimport { createFieldMeta, Field, fieldDescribedBy } from \"../internal/field\";\nimport { radioKeyTarget } from \"../internal/radio-keys\";\nimport type { ValueFieldProps } from \"./field-contract\";\nimport { resolveMaybeAccessor } from \"./field-contract\";\n\nexport type ColorChoiceOption<T extends string = string> = {\n  value: T;\n  /** The colour's name; screen readers and the tooltip use it, so colour is never the only signal. */\n  label: string;\n  /** Any CSS colour. */\n  color: string;\n};\n\nexport type ColorChoicesProps<T extends string = string> = Omit<ValueFieldProps<T | null>, \"onValueChange\" | \"onValueCommit\"> & {\n  options: readonly ColorChoiceOption<T>[];\n  onValueChange?: (value: T) => void;\n  onValueCommit?: (value: T) => void;\n};\n\n/**\n * A labeled single choice from a fixed palette of named colours, shown as round swatches. Use `ColorInput` when any\n * colour is allowed.\n */\nexport function ColorChoices<T extends string = string>(props: ColorChoicesProps<T>): JSX.Element {\n  const meta = createFieldMeta(props.id);\n  let group: HTMLDivElement | undefined;\n  const value = () => resolveMaybeAccessor(props.value) ?? null;\n  const tabStop = (option: ColorChoiceOption<T>, index: number) =>\n    value() === option.value || (index === 0 && !props.options.some((candidate) => candidate.value === value()));\n  const choose = (index: number, focus = false) => {\n    const option = props.options[index];\n    if (!option || props.disabled) return;\n    props.onValueChange?.(option.value);\n    props.onValueCommit?.(option.value);\n    // The radios in their current DOM order: options may have been reordered since they rendered.\n    if (focus) queueMicrotask(() => group?.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]')[index]?.focus());\n  };\n  return (\n    <Field\n      meta={meta}\n      labelFor={false}\n      class={props.class}\n      label={props.label}\n      description={props.description}\n      error={props.error}\n      required={props.required}\n      disabled={props.disabled}\n    >\n      <div\n        class=\"k2b-color-choices__group\"\n        ref={group}\n        role=\"radiogroup\"\n        aria-label={props.label ? undefined : props[\"aria-label\"]}\n        aria-labelledby={props.label ? meta.labelId : undefined}\n        aria-describedby={fieldDescribedBy(meta, props)}\n        aria-disabled={props.disabled ? \"true\" : undefined}\n      >\n        <For each={props.options}>\n          {(option, index) => (\n            <button\n              type=\"button\"\n              role=\"radio\"\n              class=\"k2b-color-choices__swatch\"\n              style={{ \"--k2b-color-choice\": option.color }}\n              aria-checked={value() === option.value}\n              aria-label={option.label}\n              title={option.label}\n              disabled={props.disabled}\n              tabIndex={tabStop(option, index()) ? 0 : -1}\n              onClick={() => choose(index())}\n              onKeyDown={(event) => {\n                const target = radioKeyTarget(event.key, index(), props.options.length);\n                if (target === undefined) return;\n                event.preventDefault();\n                choose(target, true);\n              }}\n            >\n              <i class=\"ti ti-check\" aria-hidden=\"true\" />\n            </button>\n          )}\n        </For>\n      </div>\n    </Field>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/inputs/QrScanner.js

@@ -3,15 +3,17 @@ import { setAttribute as _$setAttribute } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<p class=k2b-qr-scanner__note>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<div><div class=k2b-qr-scanner__preview><video muted playsinline></video></div><p role=status></p><!$><!/>`);
+  _tmpl$2 = /*#__PURE__*/_$template(`<div><div class=k2b-qr-scanner__preview><video autoplay muted playsinline></video></div><p role=status></p><!$><!/><!$><!/>`);
 import { timed } from "@k2b/stdlib/solid";
 import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { Button } from "../actions/Button";
+import { useUiMessages } from "../intl/messages";
 import { prefersReducedMotion } from "../motion";
 import { useQrMessages } from "./qr-messages";
 
@@ -93,6 +95,12 @@ const openCamera = async closed => {
     error
   };
 };
+
+/**
+ * How long the camera may take to show its first picture. A working camera shows one well within a second; after three
+ * the person has looked at a black square long enough to need a way to start it again.
+ */
+const firstPictureMs = 3000;
 const stopStream = stream => {
   for (const track of stream.getTracks()) track.stop();
 };
@@ -104,7 +112,9 @@ const stopStream = stream => {
  */
 export function QrScanner(props) {
   const qrMessages = useQrMessages();
+  const uiMessages = useUiMessages();
   const [starting, setStarting] = createSignal(true);
+  const [stalled, setStalled] = createSignal(false);
   const [invalid, setInvalid] = createSignal(false);
   let lastRejected;
   const resetRejected = timed.debounce(() => {
@@ -113,17 +123,21 @@ export function QrScanner(props) {
   const resetFeedback = timed.debounce(() => setInvalid(false), 1500);
   let video;
   let scanner;
+  let stream;
   let closed = false;
-  let cleanupMotion;
+  const detach = [];
   const destroy = () => {
     closed = true;
-    cleanupMotion?.();
+    for (const listener of detach.splice(0)) listener();
     resetRejected.cancel();
     resetFeedback.cancel();
-    // pause(true) stops the camera stream immediately.
+    // pause(true) stops the camera stream immediately while the engine runs; a stream it never started stops here.
     void scanner?.pause(true);
     scanner?.destroy();
     scanner = undefined;
+    if (stream) stopStream(stream);
+    stream = undefined;
+    video.srcObject = null;
   };
   // Once closed, the host has unmounted the scanner or heard why it stopped; later failures stay silent.
   const fail = reason => {
@@ -131,6 +145,40 @@ export function QrScanner(props) {
     destroy();
     props.onError(reason);
   };
+  /**
+   * Waits for the camera picture. WebKit, above all in an installed web app, can leave a stream black: play() never
+   * settles or is refused. The scanner then offers to try again rather than wait in silence, and a picture that starts
+   * late still clears that offer.
+   */
+  let attempt = 0;
+  const show = async play => {
+    const current = ++attempt;
+    const latest = () => !closed && current === attempt;
+    setStalled(false);
+    const playing = play().then(() => video.videoWidth > 0, () => false);
+    let timer;
+    const shown = await Promise.race([playing, new Promise(resolve => {
+      timer = setTimeout(resolve, firstPictureMs, false);
+    })]);
+    clearTimeout(timer);
+    if (!latest()) return;
+    if (!shown) {
+      setStalled(true);
+      if (!(await playing) || !latest()) return;
+    }
+    setStalled(false);
+    setStarting(false);
+  };
+  /**
+   * Attaching the stream again restarts a player that stalled on it, and play() runs within the click, the gesture a
+   * refused play() may need. The engine already runs from its first start and scans from the play event it hears.
+   */
+  const retry = () => {
+    if (closed || !stream) return;
+    video.srcObject = null;
+    video.srcObject = stream;
+    void show(() => video.play());
+  };
   onMount(() => {
     const hidden = () => {
       if (document.visibilityState !== "visible") props.onStop();
@@ -188,15 +236,30 @@ export function QrScanner(props) {
         };
         applyMotion();
         motion.addEventListener("change", applyMotion);
-        cleanupMotion = () => motion.removeEventListener("change", applyMotion);
+        detach.push(() => motion.removeEventListener("change", applyMotion));
+        // The engine places its scan region and frame on loadedmetadata, play, and a window resize. It misses a picture
+        // that turns, as when a tablet rotates, and a preview that changes size alone; replay loadedmetadata for both,
+        // or the region stays where the old picture had it and the frame sits off-centre.
+        const relayout = () => {
+          if (video.videoWidth > 0) video.dispatchEvent(new Event("loadedmetadata"));
+        };
+        video.addEventListener("resize", relayout);
+        const resized = new ResizeObserver(relayout);
+        resized.observe(video);
+        detach.push(() => {
+          video.removeEventListener("resize", relayout);
+          resized.disconnect();
+        });
         const camera = await openCamera(() => closed);
         if ("error" in camera) return fail(camera.error);
         if (closed) return stopStream(camera.stream);
         // qr-scanner plays a stream that is already set instead of opening its own.
-        video.srcObject = camera.stream;
+        stream = camera.stream;
+        video.srcObject = stream;
         video.style.transform = camera.mirrored ? "scaleX(-1)" : "";
-        await scanner.start();
-        if (!closed) setStarting(false);
+        // start() awaits the engine's play() of this stream.
+        const engine = scanner;
+        await show(() => engine.start());
       } catch {
         fail("unavailable");
       }
@@ -208,13 +271,32 @@ export function QrScanner(props) {
       _el$3 = _el$2.firstChild,
       _el$4 = _el$2.nextSibling,
       _el$6 = _el$4.nextSibling,
-      [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling);
+      [_el$7, _co$] = _$getNextMarker(_el$6.nextSibling),
+      _el$8 = _el$7.nextSibling,
+      [_el$9, _co$2] = _$getNextMarker(_el$8.nextSibling);
     var _ref$ = video;
     typeof _ref$ === "function" ? _$use(_ref$, _el$3) : video = _el$3;
     _$insert(_el$4, (() => {
-      var _c$ = _$memo(() => !!starting());
-      return () => _c$() ? qrMessages().qrCameraStarting : props.instructions ?? qrMessages().qrCameraInstructions;
+      var _c$ = _$memo(() => !!stalled());
+      return () => _c$() ? qrMessages().qrCameraStalled : _$memo(() => !!starting())() ? qrMessages().qrCameraStarting : props.instructions ?? qrMessages().qrCameraInstructions;
     })());
+    _$insert(_el$, _$createComponent(Show, {
+      get when() {
+        return stalled();
+      },
+      get children() {
+        return _$createComponent(Button, {
+          type: "button",
+          size: "sm",
+          variant: "secondary",
+          "class": "k2b-qr-scanner__retry",
+          onClick: retry,
+          get children() {
+            return uiMessages().tryAgain;
+          }
+        });
+      }
+    }), _el$7, _co$);
     _$insert(_el$, _$createComponent(Show, {
       get when() {
         return !starting();
@@ -224,7 +306,7 @@ export function QrScanner(props) {
         _$insert(_el$5, () => qrMessages().qrCameraPrivacy);
         return _el$5;
       }
-    }), _el$7, _co$);
+    }), _el$9, _co$2);
     _$effect(_p$ => {
       var _v$ = props.class ? `k2b-qr-scanner ${props.class}` : "k2b-qr-scanner",
         _v$2 = invalid() || undefined,

package/dist/browser/inputs/QrScanner.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["inputs/QrScanner.tsx"],"sourcesContent":["import { timed } from \"@k2b/stdlib/solid\";\nimport type QrScannerEngine from \"qr-scanner\";\nimport { createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { prefersReducedMotion } from \"../motion\";\nimport { useQrMessages } from \"./qr-messages\";\n\n/**\n * Why the scanner could not start, as far as the browser tells: `\"denied\"` when camera access is off, `\"no-camera\"`\n * when the device has no camera, `\"in-use\"` when the camera is busy or could not start, most often because another app\n * holds it, and `\"unavailable\"` for anything else, including a scanning engine that cannot load.\n */\nexport type QrScannerError = \"denied\" | \"no-camera\" | \"in-use\" | \"unavailable\";\n\nexport type QrScannerProps = {\n  /** Decoded text is untrusted. Return `true` to accept it and stop the camera, `false` to reject it and keep scanning. */\n  onResult: (text: string) => boolean;\n  /** The page was hidden or left; unmount the scanner. */\n  onStop: () => void;\n  /**\n   * The camera or the scanning engine could not start; the scanner has stopped. Offer another way in. A frame that\n   * cannot be decoded never ends here.\n   */\n  onError: (reason: QrScannerError) => void;\n  /** What to point the camera at. Defaults to a generic QR code hint. */\n  instructions?: string;\n  class?: string;\n};\n\nconst sizes: MediaTrackConstraints[] = [{ width: { min: 1024 } }, { width: { min: 768 } }, {}];\n/** The rear camera at a resolution that keeps small codes readable, then any camera: the order qr-scanner tries. */\nconst cameraRequests: MediaTrackConstraints[] = [...sizes.map((size) => ({ ...size, facingMode: { exact: \"environment\" } })), ...sizes];\n\nconst errorName = (error: unknown): string => (typeof error === \"object\" && error !== null && \"name\" in error ? String(error.name) : \"\");\n\nconst cameraFailure = (name: string): QrScannerError => {\n  if (name === \"NotAllowedError\" || name === \"SecurityError\") return \"denied\";\n  if (name === \"NotFoundError\" || name === \"OverconstrainedError\") return \"no-camera\";\n  if (name === \"NotReadableError\") return \"in-use\";\n  return \"unavailable\";\n};\n\n/** The facing a track reports, or else the one its label names, as qr-scanner reads it. */\nconst facingOf = (track: MediaStreamTrack | undefined): string | undefined => {\n  if (!track) return undefined;\n  const { facingMode } = track.getSettings();\n  if (facingMode) return facingMode;\n  if (/rear|back|environment/i.test(track.label)) return \"environment\";\n  if (/front|user|face/i.test(track.label)) return \"user\";\n  return undefined;\n};\n\n/**\n * Opens the camera here rather than in qr-scanner, which turns every failure into \"Camera not found.\". A refusal ends\n * the search, because asking again could show the permission prompt again. Any other failure may belong to the request,\n * such as a camera that cannot start at the larger size, so the next, looser request follows, as in qr-scanner. When\n * none succeeds, a camera that exists but fails outweighs a request no camera could meet. A closed scanner asks no more.\n */\nconst openCamera = async (closed: () => boolean): Promise<{ stream: MediaStream; mirrored: boolean } | { error: QrScannerError }> => {\n  if (!navigator.mediaDevices) return { error: \"unavailable\" };\n  let error: QrScannerError = \"no-camera\";\n  for (const video of cameraRequests) {\n    if (closed()) break;\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ video, audio: false });\n      const facing = facingOf(stream.getVideoTracks()[0]);\n      // Like qr-scanner, mirror a front camera, and a camera of unknown facing that the rear request did not find.\n      return { stream, mirrored: facing ? facing === \"user\" : !video.facingMode };\n    } catch (failure) {\n      const reason = cameraFailure(errorName(failure));\n      if (reason === \"denied\") return { error: reason };\n      if (reason !== \"no-camera\") error = reason;\n    }\n  }\n  return { error };\n};\n\nconst stopStream = (stream: MediaStream) => {\n  for (const track of stream.getTracks()) track.stop();\n};\n\n/**\n * Scans a QR code with the rear camera. Each mount owns exactly one camera session, which stops when the scanner\n * unmounts, the page is hidden, or a result is accepted. The scanning engine loads only when the scanner mounts.\n * Decoded content is never logged.\n */\nexport function QrScanner(props: QrScannerProps): JSX.Element {\n  const qrMessages = useQrMessages();\n  const [starting, setStarting] = createSignal(true);\n  const [invalid, setInvalid] = createSignal(false);\n  let lastRejected: string | undefined;\n  const resetRejected = timed.debounce(() => {\n    lastRejected = undefined;\n  }, 1000);\n  const resetFeedback = timed.debounce(() => setInvalid(false), 1500);\n  let video!: HTMLVideoElement;\n  let scanner: QrScannerEngine | undefined;\n  let closed = false;\n  let cleanupMotion: (() => void) | undefined;\n  const destroy = () => {\n    closed = true;\n    cleanupMotion?.();\n    resetRejected.cancel();\n    resetFeedback.cancel();\n    // pause(true) stops the camera stream immediately.\n    void scanner?.pause(true);\n    scanner?.destroy();\n    scanner = undefined;\n  };\n  // Once closed, the host has unmounted the scanner or heard why it stopped; later failures stay silent.\n  const fail = (reason: QrScannerError) => {\n    if (closed) return;\n    destroy();\n    props.onError(reason);\n  };\n  onMount(() => {\n    const hidden = () => {\n      if (document.visibilityState !== \"visible\") props.onStop();\n    };\n    const leaving = () => props.onStop();\n    document.addEventListener(\"visibilitychange\", hidden);\n    window.addEventListener(\"pagehide\", leaving);\n    onCleanup(() => {\n      destroy();\n      document.removeEventListener(\"visibilitychange\", hidden);\n      window.removeEventListener(\"pagehide\", leaving);\n    });\n    void (async () => {\n      try {\n        const { default: Engine } = await import(\"qr-scanner\");\n        if (closed || document.visibilityState !== \"visible\") return;\n        scanner = new Engine(\n          video,\n          (result) => {\n            if (closed) return;\n            // Rearm only after a full second without a decoded QR, not between individual frames.\n            resetRejected.debouncedFn();\n            if (result.data === lastRejected) return;\n            if (props.onResult(result.data)) {\n              destroy();\n              return;\n            }\n            lastRejected = result.data;\n            setInvalid(true);\n            resetFeedback.debouncedFn();\n          },\n          {\n            highlightScanRegion: true,\n            // A frame that cannot be decoded never ends the session: the camera runs, and the next frame may read.\n            // An engine error other than an empty frame, which the native BarcodeDetector reports as \"Scanner error:\n            // No QR code found\", means the detector cannot read on this device. Fall back to the bundled worker for\n            // the page through the flag qr-scanner 1.4.2 sets itself for \"not implemented\" and \"service unavailable\";\n            // it swaps engines after this frame. Worker errors carry the same prefix; the flag changes nothing there.\n            // qr-scanner reports frames only as strings: an Error means the engine itself did not load, such as a\n            // decoder chunk gone after a deploy or a worker that cannot start, and no later frame can read. Never log\n            // decoded content or frame data.\n            onDecodeError: (error) => {\n              if (typeof error !== \"string\") return fail(\"unavailable\");\n              if (error.startsWith(\"Scanner error: \") && !error.endsWith(Engine.NO_QR_CODE_FOUND)) {\n                Reflect.set(Engine, \"_disableBarcodeDetector\", true);\n              }\n            },\n          },\n        );\n        const motion = matchMedia(\"(prefers-reduced-motion: reduce)\");\n        const applyMotion = () => {\n          for (const animation of scanner?.$overlay?.getAnimations({ subtree: true }) ?? []) {\n            if (prefersReducedMotion()) animation.pause();\n            else animation.play();\n          }\n        };\n        applyMotion();\n        motion.addEventListener(\"change\", applyMotion);\n        cleanupMotion = () => motion.removeEventListener(\"change\", applyMotion);\n        const camera = await openCamera(() => closed);\n        if (\"error\" in camera) return fail(camera.error);\n        if (closed) return stopStream(camera.stream);\n        // qr-scanner plays a stream that is already set instead of opening its own.\n        video.srcObject = camera.stream;\n        video.style.transform = camera.mirrored ? \"scaleX(-1)\" : \"\";\n        await scanner.start();\n        if (!closed) setStarting(false);\n      } catch {\n        fail(\"unavailable\");\n      }\n    })();\n  });\n  return (\n    <div class={props.class ? `k2b-qr-scanner ${props.class}` : \"k2b-qr-scanner\"}>\n      <div class=\"k2b-qr-scanner__preview\" data-invalid={invalid() || undefined}>\n        {/* Live camera preview contains no prerecorded speech or audio. */}\n        <video ref={video} muted playsinline aria-label={qrMessages().qrCameraPreview} />\n      </div>\n      <p role=\"status\">{starting() ? qrMessages().qrCameraStarting : (props.instructions ?? qrMessages().qrCameraInstructions)}</p>\n      <Show when={!starting()}>\n        <p class=\"k2b-qr-scanner__note\">{qrMessages().qrCameraPrivacy}</p>\n      </Show>\n    </div>\n  );\n}\n\nexport default QrScanner;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["inputs/QrScanner.tsx"],"sourcesContent":["import { timed } from \"@k2b/stdlib/solid\";\nimport type QrScannerEngine from \"qr-scanner\";\nimport { createSignal, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { prefersReducedMotion } from \"../motion\";\nimport { useQrMessages } from \"./qr-messages\";\n\n/**\n * Why the scanner could not start, as far as the browser tells: `\"denied\"` when camera access is off, `\"no-camera\"`\n * when the device has no camera, `\"in-use\"` when the camera is busy or could not start, most often because another app\n * holds it, and `\"unavailable\"` for anything else, including a scanning engine that cannot load.\n */\nexport type QrScannerError = \"denied\" | \"no-camera\" | \"in-use\" | \"unavailable\";\n\nexport type QrScannerProps = {\n  /** Decoded text is untrusted. Return `true` to accept it and stop the camera, `false` to reject it and keep scanning. */\n  onResult: (text: string) => boolean;\n  /** The page was hidden or left; unmount the scanner. */\n  onStop: () => void;\n  /**\n   * The camera or the scanning engine could not start; the scanner has stopped. Offer another way in. A frame that\n   * cannot be decoded never ends here.\n   */\n  onError: (reason: QrScannerError) => void;\n  /** What to point the camera at. Defaults to a generic QR code hint. */\n  instructions?: string;\n  class?: string;\n};\n\nconst sizes: MediaTrackConstraints[] = [{ width: { min: 1024 } }, { width: { min: 768 } }, {}];\n/** The rear camera at a resolution that keeps small codes readable, then any camera: the order qr-scanner tries. */\nconst cameraRequests: MediaTrackConstraints[] = [...sizes.map((size) => ({ ...size, facingMode: { exact: \"environment\" } })), ...sizes];\n\nconst errorName = (error: unknown): string => (typeof error === \"object\" && error !== null && \"name\" in error ? String(error.name) : \"\");\n\nconst cameraFailure = (name: string): QrScannerError => {\n  if (name === \"NotAllowedError\" || name === \"SecurityError\") return \"denied\";\n  if (name === \"NotFoundError\" || name === \"OverconstrainedError\") return \"no-camera\";\n  if (name === \"NotReadableError\") return \"in-use\";\n  return \"unavailable\";\n};\n\n/** The facing a track reports, or else the one its label names, as qr-scanner reads it. */\nconst facingOf = (track: MediaStreamTrack | undefined): string | undefined => {\n  if (!track) return undefined;\n  const { facingMode } = track.getSettings();\n  if (facingMode) return facingMode;\n  if (/rear|back|environment/i.test(track.label)) return \"environment\";\n  if (/front|user|face/i.test(track.label)) return \"user\";\n  return undefined;\n};\n\n/**\n * Opens the camera here rather than in qr-scanner, which turns every failure into \"Camera not found.\". A refusal ends\n * the search, because asking again could show the permission prompt again. Any other failure may belong to the request,\n * such as a camera that cannot start at the larger size, so the next, looser request follows, as in qr-scanner. When\n * none succeeds, a camera that exists but fails outweighs a request no camera could meet. A closed scanner asks no more.\n */\nconst openCamera = async (closed: () => boolean): Promise<{ stream: MediaStream; mirrored: boolean } | { error: QrScannerError }> => {\n  if (!navigator.mediaDevices) return { error: \"unavailable\" };\n  let error: QrScannerError = \"no-camera\";\n  for (const video of cameraRequests) {\n    if (closed()) break;\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ video, audio: false });\n      const facing = facingOf(stream.getVideoTracks()[0]);\n      // Like qr-scanner, mirror a front camera, and a camera of unknown facing that the rear request did not find.\n      return { stream, mirrored: facing ? facing === \"user\" : !video.facingMode };\n    } catch (failure) {\n      const reason = cameraFailure(errorName(failure));\n      if (reason === \"denied\") return { error: reason };\n      if (reason !== \"no-camera\") error = reason;\n    }\n  }\n  return { error };\n};\n\n/**\n * How long the camera may take to show its first picture. A working camera shows one well within a second; after three\n * the person has looked at a black square long enough to need a way to start it again.\n */\nconst firstPictureMs = 3000;\n\nconst stopStream = (stream: MediaStream) => {\n  for (const track of stream.getTracks()) track.stop();\n};\n\n/**\n * Scans a QR code with the rear camera. Each mount owns exactly one camera session, which stops when the scanner\n * unmounts, the page is hidden, or a result is accepted. The scanning engine loads only when the scanner mounts.\n * Decoded content is never logged.\n */\nexport function QrScanner(props: QrScannerProps): JSX.Element {\n  const qrMessages = useQrMessages();\n  const uiMessages = useUiMessages();\n  const [starting, setStarting] = createSignal(true);\n  const [stalled, setStalled] = createSignal(false);\n  const [invalid, setInvalid] = createSignal(false);\n  let lastRejected: string | undefined;\n  const resetRejected = timed.debounce(() => {\n    lastRejected = undefined;\n  }, 1000);\n  const resetFeedback = timed.debounce(() => setInvalid(false), 1500);\n  let video!: HTMLVideoElement;\n  let scanner: QrScannerEngine | undefined;\n  let stream: MediaStream | undefined;\n  let closed = false;\n  const detach: (() => void)[] = [];\n  const destroy = () => {\n    closed = true;\n    for (const listener of detach.splice(0)) listener();\n    resetRejected.cancel();\n    resetFeedback.cancel();\n    // pause(true) stops the camera stream immediately while the engine runs; a stream it never started stops here.\n    void scanner?.pause(true);\n    scanner?.destroy();\n    scanner = undefined;\n    if (stream) stopStream(stream);\n    stream = undefined;\n    video.srcObject = null;\n  };\n  // Once closed, the host has unmounted the scanner or heard why it stopped; later failures stay silent.\n  const fail = (reason: QrScannerError) => {\n    if (closed) return;\n    destroy();\n    props.onError(reason);\n  };\n  /**\n   * Waits for the camera picture. WebKit, above all in an installed web app, can leave a stream black: play() never\n   * settles or is refused. The scanner then offers to try again rather than wait in silence, and a picture that starts\n   * late still clears that offer.\n   */\n  let attempt = 0;\n  const show = async (play: () => Promise<void>) => {\n    const current = ++attempt;\n    const latest = () => !closed && current === attempt;\n    setStalled(false);\n    const playing = play().then(\n      () => video.videoWidth > 0,\n      () => false,\n    );\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const shown = await Promise.race([\n      playing,\n      new Promise<false>((resolve) => {\n        timer = setTimeout(resolve, firstPictureMs, false);\n      }),\n    ]);\n    clearTimeout(timer);\n    if (!latest()) return;\n    if (!shown) {\n      setStalled(true);\n      if (!(await playing) || !latest()) return;\n    }\n    setStalled(false);\n    setStarting(false);\n  };\n  /**\n   * Attaching the stream again restarts a player that stalled on it, and play() runs within the click, the gesture a\n   * refused play() may need. The engine already runs from its first start and scans from the play event it hears.\n   */\n  const retry = () => {\n    if (closed || !stream) return;\n    video.srcObject = null;\n    video.srcObject = stream;\n    void show(() => video.play());\n  };\n  onMount(() => {\n    const hidden = () => {\n      if (document.visibilityState !== \"visible\") props.onStop();\n    };\n    const leaving = () => props.onStop();\n    document.addEventListener(\"visibilitychange\", hidden);\n    window.addEventListener(\"pagehide\", leaving);\n    onCleanup(() => {\n      destroy();\n      document.removeEventListener(\"visibilitychange\", hidden);\n      window.removeEventListener(\"pagehide\", leaving);\n    });\n    void (async () => {\n      try {\n        const { default: Engine } = await import(\"qr-scanner\");\n        if (closed || document.visibilityState !== \"visible\") return;\n        scanner = new Engine(\n          video,\n          (result) => {\n            if (closed) return;\n            // Rearm only after a full second without a decoded QR, not between individual frames.\n            resetRejected.debouncedFn();\n            if (result.data === lastRejected) return;\n            if (props.onResult(result.data)) {\n              destroy();\n              return;\n            }\n            lastRejected = result.data;\n            setInvalid(true);\n            resetFeedback.debouncedFn();\n          },\n          {\n            highlightScanRegion: true,\n            // A frame that cannot be decoded never ends the session: the camera runs, and the next frame may read.\n            // An engine error other than an empty frame, which the native BarcodeDetector reports as \"Scanner error:\n            // No QR code found\", means the detector cannot read on this device. Fall back to the bundled worker for\n            // the page through the flag qr-scanner 1.4.2 sets itself for \"not implemented\" and \"service unavailable\";\n            // it swaps engines after this frame. Worker errors carry the same prefix; the flag changes nothing there.\n            // qr-scanner reports frames only as strings: an Error means the engine itself did not load, such as a\n            // decoder chunk gone after a deploy or a worker that cannot start, and no later frame can read. Never log\n            // decoded content or frame data.\n            onDecodeError: (error) => {\n              if (typeof error !== \"string\") return fail(\"unavailable\");\n              if (error.startsWith(\"Scanner error: \") && !error.endsWith(Engine.NO_QR_CODE_FOUND)) {\n                Reflect.set(Engine, \"_disableBarcodeDetector\", true);\n              }\n            },\n          },\n        );\n        const motion = matchMedia(\"(prefers-reduced-motion: reduce)\");\n        const applyMotion = () => {\n          for (const animation of scanner?.$overlay?.getAnimations({ subtree: true }) ?? []) {\n            if (prefersReducedMotion()) animation.pause();\n            else animation.play();\n          }\n        };\n        applyMotion();\n        motion.addEventListener(\"change\", applyMotion);\n        detach.push(() => motion.removeEventListener(\"change\", applyMotion));\n        // The engine places its scan region and frame on loadedmetadata, play, and a window resize. It misses a picture\n        // that turns, as when a tablet rotates, and a preview that changes size alone; replay loadedmetadata for both,\n        // or the region stays where the old picture had it and the frame sits off-centre.\n        const relayout = () => {\n          if (video.videoWidth > 0) video.dispatchEvent(new Event(\"loadedmetadata\"));\n        };\n        video.addEventListener(\"resize\", relayout);\n        const resized = new ResizeObserver(relayout);\n        resized.observe(video);\n        detach.push(() => {\n          video.removeEventListener(\"resize\", relayout);\n          resized.disconnect();\n        });\n        const camera = await openCamera(() => closed);\n        if (\"error\" in camera) return fail(camera.error);\n        if (closed) return stopStream(camera.stream);\n        // qr-scanner plays a stream that is already set instead of opening its own.\n        stream = camera.stream;\n        video.srcObject = stream;\n        video.style.transform = camera.mirrored ? \"scaleX(-1)\" : \"\";\n        // start() awaits the engine's play() of this stream.\n        const engine = scanner;\n        await show(() => engine.start());\n      } catch {\n        fail(\"unavailable\");\n      }\n    })();\n  });\n  return (\n    <div class={props.class ? `k2b-qr-scanner ${props.class}` : \"k2b-qr-scanner\"}>\n      <div class=\"k2b-qr-scanner__preview\" data-invalid={invalid() || undefined}>\n        {/* Live camera preview contains no prerecorded speech or audio. */}\n        <video ref={video} autoplay muted playsinline aria-label={qrMessages().qrCameraPreview} />\n      </div>\n      <p role=\"status\">\n        {stalled()\n          ? qrMessages().qrCameraStalled\n          : starting()\n            ? qrMessages().qrCameraStarting\n            : (props.instructions ?? qrMessages().qrCameraInstructions)}\n      </p>\n      <Show when={stalled()}>\n        <Button type=\"button\" size=\"sm\" variant=\"secondary\" class=\"k2b-qr-scanner__retry\" onClick={retry}>\n          {uiMessages().tryAgain}\n        </Button>\n      </Show>\n      <Show when={!starting()}>\n        <p class=\"k2b-qr-scanner__note\">{qrMessages().qrCameraPrivacy}</p>\n      </Show>\n    </div>\n  );\n}\n\nexport default QrScanner;\n"],"mappings":"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","ignoreList":[]}

package/dist/browser/inputs/TextInput.js

@@ -30,7 +30,7 @@ import { MarkdownEditor } from "./markdown/MarkdownEditor";
 export function TextInput(props) {
   const messages = useUiMessages();
   const inputMessages = useInputMessages();
-  const [local, rest] = splitProps(props, ["activeIcon", "aria-describedby", "aria-label", "class", "clearLabel", "clearable", "completions", "description", "error", "externalErrorId", "icon", "id", "label", "lines", "markdown", "minLength", "maxLength", "monospace", "multiline", "onClear", "onValueCommit", "onSubmit", "onValueChange", "password", "prefix", "required", "suffix", "type", "value", "variant", "abbreviations"]);
+  const [local, rest] = splitProps(props, ["activeIcon", "aria-describedby", "aria-label", "class", "clearLabel", "clearable", "completions", "description", "error", "externalErrorId", "icon", "id", "label", "lines", "markdown", "minLength", "maxLength", "onKeyDown", "monospace", "multiline", "onClear", "onValueCommit", "onSubmit", "onValueChange", "password", "prefix", "required", "suffix", "type", "value", "variant", "abbreviations"]);
   const meta = createFieldMeta(local.id);
   const value = () => resolveMaybeAccessor(local.value) ?? "";
   const error = () => resolveMaybeAccessor(local.error);
@@ -55,7 +55,22 @@ export function TextInput(props) {
   const verbatim = () => local.password || local.type === "email" || local.type === "url" || /\b(username|email|url)\b/.test(String(rest.autocomplete ?? ""));
   const input = next => local.onValueChange?.(next);
   const commit = next => local.onValueCommit?.(next);
-  const clear = () => {
+  const submitOnEnter = event => {
+    if (local.onSubmit && event.key === "Enter" && !event.shiftKey && !event.metaKey) {
+      event.preventDefault();
+      local.onSubmit();
+    }
+  };
+  /** The caller's key handler runs first; Enter submits unless it handled the key. */
+  const keyDown = event => {
+    const handler = local.onKeyDown;
+    if (typeof handler === "function") handler(event);else if (Array.isArray(handler)) handler[0](handler[1], event);
+    if (!event.defaultPrevented) submitOnEnter(event);
+  };
+  const clear = event => {
+    // Clearing removes the button. Return to the field before notifying the caller, whose handler
+    // may deliberately navigate or move focus somewhere else.
+    event.currentTarget.ownerDocument.getElementById(meta.controlId)?.focus();
     if (local.onClear) {
       local.onClear();
       return;
@@ -177,12 +192,7 @@ export function TextInput(props) {
                     input(event.currentTarget.value);
                   },
                   "onChange": event => commit(event.currentTarget.value),
-                  "onKeyDown": event => {
-                    if (local.onSubmit && event.key === "Enter" && !event.shiftKey && !event.metaKey) {
-                      event.preventDefault();
-                      local.onSubmit();
-                    }
-                  }
+                  "onKeyDown": keyDown
                 }), false, false);
                 _$runHydrationEvents();
                 return _el$21;
@@ -215,12 +225,7 @@ export function TextInput(props) {
                   input(event.currentTarget.value);
                 },
                 "onChange": event => commit(event.currentTarget.value),
-                "onKeyDown": event => {
-                  if (local.onSubmit && event.key === "Enter" && !event.shiftKey && !event.metaKey) {
-                    event.preventDefault();
-                    local.onSubmit();
-                  }
-                }
+                "onKeyDown": submitOnEnter
               }), false, true);
               _$insert(_el$6, () => isServer ? `\n${value()}` : undefined);
               _$runHydrationEvents();