@k2b/ui 0.50.0 → 0.52.0

package/dist/ssr/actions/CommandList.js

@@ -0,0 +1,638 @@
+import { ssr as _$ssr } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+var _tmpl$ = ["<p class=\"k2b-dropdown__empty\">", "</p>"],
+  _tmpl$2 = ["<p class=\"k2b-command-list__state\"><i class=\"ti ti-loader-2 k2b-spin\" aria-hidden=\"true\"></i><span>", "</span></p>"],
+  _tmpl$3 = ["<div", " role=\"listbox\"", " class=\"k2b-command-list\">", "", "", "", "</div>"],
+  _tmpl$4 = ["<span class=\"k2b-sr-only\" role=\"status\">", "</span>"],
+  _tmpl$5 = ["<span class=\"k2b-sr-only\" role=\"alert\">", "</span>"],
+  _tmpl$6 = ["<span class=\"k2b-command-list__step-hint\">", "</span>"],
+  _tmpl$7 = ["<div class=\"k2b-command-list__step\"><button type=\"button\" class=\"k2b-command-list__back\" tabindex=\"-1\"", "><i class=\"ti ti-chevron-left\" aria-hidden=\"true\"></i><span>", "</span></button>", "</div>"],
+  _tmpl$8 = ["<div", " class=\"k2b-dropdown__label\">", "</div>"],
+  _tmpl$9 = ["<div class=\"k2b-dropdown__section\" role=\"group\"", ">", "", "</div>"],
+  _tmpl$0 = "<i class=\"ti ti-chevron-right k2b-command-list__next\" aria-hidden=\"true\"></i>",
+  _tmpl$1 = ["<div", " role=\"option\" class=\"k2b-dropdown__item\"", ">", "<span class=\"k2b-dropdown__copy k2b-command-list__text\"><span>", "</span>", "</span>", "", "</div>"],
+  _tmpl$10 = "<i class=\"ti ti-loader-2 k2b-spin k2b-command-list__busy\" aria-hidden=\"true\"></i>",
+  _tmpl$11 = ["<span class=\"k2b-command-list__leading\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$12 = ["<small class=\"k2b-command-list__description\">", "</small>"],
+  _tmpl$13 = ["<span class=\"k2b-command-list__hint\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$14 = ["<p class=\"k2b-command-list__state\" data-error><i class=\"ti ti-alert-circle\" aria-hidden=\"true\"></i><span>", "</span><button type=\"button\" tabindex=\"-1\">", "</button></p>"],
+  _tmpl$15 = ["<button type=\"button\" class=\"k2b-command-outcome__close\"", "><i class=\"ti ti-x\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$16 = ["<div class=\"k2b-command-outcome\"", " tabindex=\"-1\"><i aria-hidden=\"true\"", "></i><span class=\"k2b-command-outcome__text\"", " aria-hidden=\"true\">", "</span>", "", "</div>"],
+  _tmpl$17 = ["<button type=\"button\">", "</button>"],
+  _tmpl$18 = ["<i", " aria-hidden=\"true\"></i>"],
+  _tmpl$19 = ["<span class=\"k2b-command-list__image\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$20 = ["<img", " alt width=\"16\" height=\"16\" decoding=\"async\">"],
+  _tmpl$21 = ["<img class=\"k2b-command-list__image-light\"", " alt width=\"16\" height=\"16\" decoding=\"async\">"],
+  _tmpl$22 = ["<img class=\"k2b-command-list__image-dark\"", " alt width=\"16\" height=\"16\" decoding=\"async\">"];
+import { createEffect, createMemo, createSignal, For, onCleanup, Show, untrack } from "solid-js";
+import { useUiMessages } from "../intl/messages";
+import { commandKey, filterCommandItems, groupCommandItems } from "./command-items";
+import { useCommandMessages } from "./command-messages";
+
+/** The state of one open command list: its steps, the shown entries, and the marked one. */
+
+/** The context without what the list adds itself: the query, the path, the signal, and the reports. */
+
+/** A list whose entries come from a promise: pending, or failed with the message of its rejection. */
+
+/** A command that returned a promise, busy while it runs. */
+
+/**
+ * What a finished command reported, shown in the list's place: a confirmation, an error (with a way to try again when
+ * the command threw or rejected), or the command running again after a retry.
+ */
+
+/** A confirmation or an error stays at least this long, even when the person types on at once. */
+export const COMMAND_OUTCOME_MIN_MS = 1200;
+/** A confirmation goes by itself after this long; an error stays until the person types, retries, or presses Escape. */
+export const COMMAND_OUTCOME_SUCCESS_MS = 4000;
+const ignoreReport = () => {};
+
+/**
+ * Keeps the steps, the marked entry, and the running command of a command list. The host owns the query and the
+ * effects: `onText` places an entry's text; for an entry with `onSelect`, `beforeRun` lets the host remove its query,
+ * `context` describes the text the command acts on, and `afterRun` closes the list once the command finished.
+ * `onStep` runs after a further list opened or closed, with the new depth, so the host clears its query.
+ */
+export const createCommandNavigator = options => {
+  const [status, setStatus] = createSignal();
+  const [outcome, setOutcome] = createSignal();
+  let shownAt = 0;
+  let outcomeTimer;
+  const clearOutcome = () => {
+    clearTimeout(outcomeTimer);
+    outcomeTimer = undefined;
+    setOutcome(undefined);
+  };
+  const showOutcome = next => {
+    clearTimeout(outcomeTimer);
+    outcomeTimer = undefined;
+    setOutcome(next);
+    shownAt = Date.now();
+    if (next.state === "success") outcomeTimer = setTimeout(clearOutcome, COMMAND_OUTCOME_SUCCESS_MS);
+  };
+  let running;
+  // A list that goes away forgets its run, as `reset` does: a late result reports nothing and starts no timer.
+  onCleanup(() => {
+    clearTimeout(outcomeTimer);
+    running = undefined;
+  });
+  const run = (item, path, again = false) => {
+    const controller = new AbortController();
+    running = controller;
+    const key = commandKey(item);
+    setStatus(undefined);
+    if (!again) options.beforeRun?.();
+    // What the command reported before it finished; a stopped command's report never shows.
+    let report;
+    const reporting = () => running === controller && !controller.signal.aborted;
+    const settle = failure => {
+      if (!reporting()) return;
+      running = undefined;
+      setStatus(undefined);
+      const next = failure ? {
+        state: "error",
+        message: failure.error instanceof Error && failure.error.message ? failure.error.message : undefined,
+        retry: () => runAgain(item, path)
+      } : report;
+      // The outcome takes its place before the host closes the list, so the container and its live regions stay and
+      // their text changes, which is what a screen reader announces.
+      if (next) showOutcome(next);else clearOutcome();
+      options.afterRun(next !== undefined);
+    };
+    let result;
+    try {
+      const base = options.context();
+      result = item.onSelect?.({
+        ...base,
+        // A command the person stopped writes nothing more.
+        insert: text => {
+          if (!controller.signal.aborted) base.insert(text);
+        },
+        success: message => {
+          report = {
+            state: "success",
+            message
+          };
+        },
+        error: message => {
+          report = {
+            state: "error",
+            message
+          };
+        },
+        query: options.query(),
+        path,
+        signal: controller.signal
+      });
+    } catch (error) {
+      settle({
+        error
+      });
+      return;
+    }
+    if (!(result instanceof Promise)) return settle();
+    // A first run shows on its row; a retry runs where its error was.
+    if (again) showOutcome({
+      state: "running",
+      message: item.label
+    });else setStatus({
+      key,
+      label: item.label,
+      state: "running"
+    });
+    result.then(() => settle(), error => settle({
+      error
+    }));
+  };
+  // The error stays until the retry's own state replaces it, so a host never sees the outcome go in between.
+  const runAgain = (item, path) => run(item, path, true);
+  const [steps, setSteps] = createSignal([]);
+  const step = () => steps().at(-1);
+  // A source that returns a promise: each request has a token, and only the latest one's result reaches the list. A new
+  // request aborts the previous one's signal, so stale results are discarded where they are made.
+  const [retries, setRetries] = createSignal(0);
+  const [settled, setSettled] = createSignal();
+  let pending;
+  // Where the list is, compared by value: only a new place, query, or path asks a source again, not every selection event.
+  const place = createMemo(() => options.context(), undefined, {
+    equals: (a, b) => a.text === b.text && a.before === b.before && a.atStart === b.atStart && a.lineStart === b.lineStart && a.selection.start === b.selection.start && a.selection.end === b.selection.end
+  });
+  const request = createMemo(() => {
+    retries();
+    pending?.abort();
+    pending = undefined;
+    if (!options.active()) return {
+      items: []
+    };
+    const source = step()?.next?.items ?? options.items();
+    if (typeof source !== "function") return {
+      items: filterCommandItems(source, options.query())
+    };
+    const controller = new AbortController();
+    const context = {
+      ...place(),
+      query: options.query(),
+      path: steps(),
+      signal: controller.signal,
+      success: ignoreReport,
+      error: ignoreReport
+    };
+    let result;
+    try {
+      result = untrack(() => source(context));
+    } catch (error) {
+      return {
+        error
+      };
+    }
+    if (!(result instanceof Promise)) return {
+      items: filterCommandItems(result, context.query)
+    };
+    pending = controller;
+    const token = {};
+    result.then(items => {
+      if (pending === controller) setSettled({
+        token,
+        items: filterCommandItems(items, context.query)
+      });
+    }, error => {
+      if (pending === controller && !controller.signal.aborted) setSettled({
+        token,
+        error
+      });
+    });
+    return {
+      token
+    };
+  });
+  /** Pending, failed, or ready; while a new query loads, the step's previous entries stay in place. */
+  const load = createMemo(() => {
+    const current = request();
+    const result = current.token ? settled()?.token === current.token ? settled() : undefined : current;
+    if (!result) return {
+      state: "loading"
+    };
+    if (result.error !== undefined) {
+      const message = result.error instanceof Error && result.error.message ? result.error.message : undefined;
+      return {
+        state: "failed",
+        message
+      };
+    }
+    return {
+      state: "ready"
+    };
+  });
+  // Only entries of the same step stay while a query loads: a further list never shows the list it came from.
+  const shown = createMemo(previous => {
+    const current = request();
+    const at = step();
+    if (!current.token) return {
+      step: at,
+      items: current.items ?? []
+    };
+    const result = settled();
+    if (result?.token === current.token) return {
+      step: at,
+      items: result.items ?? []
+    };
+    return {
+      step: at,
+      items: previous.step === at ? previous.items : []
+    };
+  }, {
+    step: undefined,
+    items: []
+  });
+  const entries = () => shown().items;
+  const groups = createMemo(() => groupCommandItems(entries()));
+  const ordered = createMemo(() => groups().flatMap(group => group.entries.map(entry => entry.item)));
+  // The marked entry is remembered for the query and step it was marked in; a new query marks the first entry again.
+  const [wanted, setWanted] = createSignal();
+  const active = createMemo(() => {
+    const list = ordered();
+    const mark = wanted();
+    if (mark && mark.query === options.query() && mark.step === step()) {
+      const index = list.findIndex(item => commandKey(item) === mark.key);
+      if (index >= 0) return index;
+    }
+    const enabled = list.findIndex(item => !item.disabled);
+    return enabled >= 0 ? enabled : 0;
+  });
+  const setActive = index => {
+    const list = ordered();
+    const item = list[(index + list.length) % Math.max(1, list.length)];
+    if (item && !item.disabled) setWanted({
+      key: commandKey(item),
+      query: options.query(),
+      step: step()
+    });
+  };
+  /** The next entry that can be chosen from `from` in `direction`, wrapping; unavailable entries are passed over. */
+  const nextEnabled = (from, direction) => {
+    const list = ordered();
+    for (let step = 1; step <= list.length; step++) {
+      const index = ((from + direction * step) % list.length + list.length) % list.length;
+      if (!list[index]?.disabled) return index;
+    }
+    return from;
+  };
+  /** Chooses the marked entry or the one at `index`. An unavailable entry, or any while a command runs, does nothing. */
+  const choose = (index = active()) => {
+    const item = ordered()[index];
+    if (!item || item.disabled || status()?.state === "running") return;
+    if (item.next) changeStep([...steps(), item]);else if (item.text !== undefined) options.onText(item);else run(item, steps());
+  };
+  const changeStep = next => {
+    setSteps(next);
+    setWanted(undefined);
+    options.onStep?.(next.length);
+  };
+  // Enter while entries load waits for that query's entries and takes the first that can be chosen; a new query or no
+  // match chooses nothing.
+  const [awaiting, setAwaiting] = createSignal();
+  createEffect(() => {
+    const query = awaiting();
+    if (query === undefined) return;
+    if (query !== options.query()) return setAwaiting(undefined);
+    const state = load().state;
+    if (state === "loading") return;
+    setAwaiting(undefined);
+    if (state !== "ready") return;
+    const index = ordered().findIndex(item => !item.disabled);
+    if (index >= 0) untrack(() => choose(index));
+  });
+  return {
+    query: options.query,
+    step,
+    groups,
+    entries: ordered,
+    active,
+    setActive,
+    /** Marks the next or previous entry, wrapping; unavailable entries are passed over, as in a searchable menu. */
+    move: delta => setActive(nextEnabled(active(), delta)),
+    edge: which => setActive(which === "first" ? nextEnabled(-1, 1) : nextEnabled(ordered().length, -1)),
+    status,
+    load,
+    /** Asks a source whose promise failed again. */
+    retry: () => setRetries(value => value + 1),
+    /** Whether a command's promise is pending; the list then waits for it. */
+    busy: () => status()?.state === "running",
+    choose: index => choose(index),
+    /** Enter while entries load: chooses the first entry of this query once it arrives. */
+    chooseWhenLoaded: () => setAwaiting(options.query()),
+    /** Whether a choice waits for entries on their way. */
+    awaitingChoice: () => awaiting() !== undefined,
+    /** Stops a running command: its signal aborts, and its result no longer reaches the list. */
+    abort: () => {
+      running?.abort();
+      running = undefined;
+      setStatus(undefined);
+      if (outcome()?.state === "running") clearOutcome();
+    },
+    /** What the last command reported, shown in the list's place until it clears. */
+    outcome,
+    /** The person typed on: the outcome clears, but not before it showed for `COMMAND_OUTCOME_MIN_MS`. */
+    typedOn: () => {
+      const current = outcome();
+      if (!current || current.state === "running") return;
+      const left = COMMAND_OUTCOME_MIN_MS - (Date.now() - shownAt);
+      if (left <= 0) return clearOutcome();
+      clearTimeout(outcomeTimer);
+      outcomeTimer = setTimeout(clearOutcome, left);
+    },
+    /** Clears the outcome at once, for Escape or a new list; a retry still running is stopped. */
+    clearOutcome: () => {
+      if (outcome()?.state === "running") {
+        running?.abort();
+        running = undefined;
+      }
+      clearOutcome();
+    },
+    /** Leaves the second list; `false` when the first list shows. */
+    back: () => {
+      if (steps().length === 0) return false;
+      changeStep(steps().slice(0, -1));
+      return true;
+    },
+    /**
+     * Forgets steps, mark, and status. A running command goes on, but its result no longer reaches the list, so a
+     * retry's running line goes too; a reported outcome stays until it clears.
+     */
+    reset: () => {
+      if (outcome()?.state === "running") clearOutcome();
+      running = undefined;
+      pending?.abort();
+      pending = undefined;
+      setSteps([]);
+      setWanted(undefined);
+      setStatus(undefined);
+    }
+  };
+};
+export const commandOptionId = (listId, index) => `${listId}-${index}`;
+
+/**
+ * The rows of a command list as a list box, with the menu's own rows and headings. The focus stays in the host's
+ * field, which points at the marked row as its active descendant; the rows only answer the pointer.
+ */
+export function CommandList(props) {
+  const messages = useUiMessages();
+  const commandMessages = useCommandMessages();
+  const nav = props.navigator;
+  const matches = () => nav.entries().filter(item => !item.disabled).length;
+  // The focus stays in the field, so the marked row scrolls into view itself.
+  createEffect(() => {
+    if (nav.entries().length === 0) return;
+    document.getElementById(commandOptionId(props.id, nav.active()))?.scrollIntoView?.({
+      block: "nearest"
+    });
+  });
+  const statusOf = item => {
+    const current = nav.status();
+    return current?.key === commandKey(item) ? current : undefined;
+  };
+  const runningLabel = () => {
+    const current = nav.status();
+    return current?.state === "running" ? commandMessages().running({
+      label: current.label
+    }) : "";
+  };
+  const loadFailure = () => {
+    const current = nav.load();
+    return current.state === "failed" ? current.message ?? commandMessages().loadFailed : "";
+  };
+  /** The outcome as one line of text: the report, or for an error without one, that it did not work. */
+  const outcomeText = outcome => outcome.state === "running" ? commandMessages().running({
+    label: outcome.message
+  }) : outcome.message ?? (outcome.state === "error" ? commandMessages().failed : commandMessages().done);
+  const outcomeError = () => {
+    const current = nav.outcome();
+    return current?.state === "error" ? outcomeText(current) : "";
+  };
+  const status = () => {
+    const current = nav.outcome();
+    if (current) return current.state === "error" ? "" : outcomeText(current);
+    if (runningLabel()) return runningLabel();
+    const step = nav.step()?.next;
+    const count = props.query().trim() || step ? messages().searchMatches({
+      count: matches()
+    }) : "";
+    return step && count ? `${step.label}, ${count}` : count;
+  };
+  return [_$createComponent(Show, {
+    get when() {
+      return !nav.outcome();
+    },
+    get fallback() {
+      return _$createComponent(CommandOutcomeLine, {
+        navigator: nav,
+        text: outcomeText,
+        get onAction() {
+          return props.onOutcomeAction;
+        }
+      });
+    },
+    get children() {
+      return [_$createComponent(Show, {
+        get when() {
+          return nav.step();
+        },
+        children: item => _$ssr(_tmpl$7, _$ssrAttribute("aria-label", _$escape(commandMessages().back({
+          label: item().label
+        }), true), false), _$escape(item().label), _$escape(_$createComponent(Show, {
+          get when() {
+            return props.stepHint;
+          },
+          get children() {
+            return _$ssr(_tmpl$6, _$escape(item().next?.label));
+          }
+        })))
+      }), props.header, _$ssr(_tmpl$3, _$ssrAttribute("id", _$escape(props.id, true), false), _$ssrAttribute("aria-label", _$escape(nav.step()?.next?.label ?? props.label, true), false) + _$ssrAttribute("aria-busy", nav.load().state === "loading" ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(For, {
+        get each() {
+          return nav.groups();
+        },
+        children: group => {
+          const headingId = `${props.id}-group-${group.entries[0]?.index ?? 0}`;
+          return _$ssr(_tmpl$9, _$ssrAttribute("aria-labelledby", group.label ? _$escape(headingId, true) : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+            get when() {
+              return group.label;
+            },
+            get children() {
+              return _$ssr(_tmpl$8, _$ssrAttribute("id", _$escape(headingId, true), false), _$escape(group.label));
+            }
+          })), _$escape(_$createComponent(For, {
+            get each() {
+              return group.entries;
+            },
+            children: entry => // biome-ignore lint/a11y/useKeyWithClickEvents: the host's field handles the keys through aria-activedescendant.
+            _$ssr(_tmpl$1, _$ssrAttribute("id", _$escape(commandOptionId(props.id, entry.index), true), false), _$ssrAttribute("aria-selected", _$escape(entry.index, true) === _$escape(nav.active(), true), false) + _$ssrAttribute("aria-disabled", entry.item.disabled ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("aria-busy", statusOf(entry.item)?.state === "running" ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-active", entry.index === nav.active() && !entry.item.disabled ? "" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+              get when() {
+                return statusOf(entry.item)?.state !== "running";
+              },
+              get fallback() {
+                return _$ssr(_tmpl$10);
+              },
+              get children() {
+                return _$createComponent(Show, {
+                  get when() {
+                    return entry.item.leading;
+                  },
+                  get fallback() {
+                    return _$createComponent(CommandVisual, {
+                      get item() {
+                        return entry.item;
+                      }
+                    });
+                  },
+                  children: leading => _$ssr(_tmpl$11, _$escape(leading()()))
+                });
+              }
+            })), _$escape(entry.item.label), _$escape(_$createComponent(Show, {
+              get when() {
+                return entry.item.disabled ?? entry.item.description;
+              },
+              children: text => _$ssr(_tmpl$12, _$escape(text()))
+            })), _$escape(_$createComponent(Show, {
+              get when() {
+                return entry.item.hint;
+              },
+              children: hint => _$ssr(_tmpl$13, _$escape(hint()))
+            })), _$escape(_$createComponent(Show, {
+              get when() {
+                return entry.item.next;
+              },
+              get children() {
+                return _$ssr(_tmpl$0);
+              }
+            })))
+          })));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return _$memo(() => nav.entries().length === 0)() && nav.load().state === "ready";
+        },
+        get children() {
+          return _$ssr(_tmpl$, _$escape(messages().noResults));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return nav.load().state === "loading";
+        },
+        get children() {
+          return _$ssr(_tmpl$2, nav.awaitingChoice() ? _$escape(commandMessages().loadingChoice) : _$escape(commandMessages().loading));
+        }
+      })), _$escape(_$createComponent(Show, {
+        get when() {
+          return _$memo(() => nav.load().state === "failed")() ? nav.load() : undefined;
+        },
+        children: failed => _$ssr(_tmpl$14, _$escape(failed().message ?? commandMessages().loadFailed), _$escape(messages().retry))
+      })))];
+    }
+  }), _$ssr(_tmpl$4, _$escape(status())), _$ssr(_tmpl$5, _$escape(outcomeError() || loadFailure()))];
+}
+
+/**
+ * A command's outcome in the list's place, one line: a confirmation in the status green, an error in the status red
+ * with Retry when the command threw or rejected, or a retry running. The live regions of the list announce its text,
+ * so the text is hidden here; its buttons are ordinary buttons, since the list it replaced is gone.
+ */
+function CommandOutcomeLine(props) {
+  const messages = useUiMessages();
+  const outcome = () => props.navigator.outcome();
+  return _$createComponent(Show, {
+    get when() {
+      return outcome();
+    },
+    children: current => // biome-ignore lint/a11y/noStaticElementInteractions: it holds the focus only when a menu without a target has nowhere else to keep it.
+    _$ssr(_tmpl$16, _$ssrAttribute("data-state", _$escape(current().state, true), false), _$ssrAttribute("class", current().state === "success" ? "ti ti-circle-check" : current().state === "error" ? "ti ti-alert-circle" : "ti ti-loader-2 k2b-spin", false), _$ssrAttribute("title", _$escape(props.text(current()), true), false), _$escape(props.text(current())), _$escape(_$createComponent(Show, {
+      get when() {
+        return _$memo(() => current().state === "error")() ? current().retry : undefined;
+      },
+      children: retry => _$ssr(_tmpl$17, _$escape(messages().retry))
+    })), _$escape(_$createComponent(Show, {
+      get when() {
+        return current().state === "error";
+      },
+      get children() {
+        return _$ssr(_tmpl$15, _$ssrAttribute("aria-label", _$escape(messages().close, true), false));
+      }
+    })))
+  });
+}
+
+/** An entry's image, one per theme when it has two, at icon size; or its icon. */
+function CommandVisual(props) {
+  const image = () => props.item.image;
+  return _$createComponent(Show, {
+    get when() {
+      return image();
+    },
+    get fallback() {
+      return _$createComponent(Show, {
+        get when() {
+          return props.item.icon;
+        },
+        children: icon => _$ssr(_tmpl$18, _$ssrAttribute("class", _$escape(icon(), true), false))
+      });
+    },
+    children: source => _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
+      get when() {
+        return _$memo(() => typeof source() === "object")() ? source() : undefined;
+      },
+      get fallback() {
+        return _$ssr(_tmpl$20, _$ssrAttribute("src", _$escape(source(), true), false));
+      },
+      children: pair => [_$ssr(_tmpl$21, _$ssrAttribute("src", _$escape(pair().light, true), false)), _$ssr(_tmpl$22, _$ssrAttribute("src", _$escape(pair().dark, true), false))]
+    })))
+  });
+}
+
+/**
+ * The keys of a command list in its host's field: Up, Down, Home, and End mark; Enter and Tab choose; Escape and
+ * Backspace on an empty query leave a second list. Returns whether the key was used; Escape in the first list is left
+ * to the host, which closes.
+ */
+export const commandListKey = (nav, event, query) => {
+  if (event.isComposing || event.metaKey || event.ctrlKey || event.altKey) return false;
+  switch (event.key) {
+    case "ArrowDown":
+    case "ArrowUp":
+      if (nav.entries().length === 0) return false;
+      nav.move(event.key === "ArrowDown" ? 1 : -1);
+      return true;
+    case "Home":
+    case "End":
+      if (event.shiftKey || nav.entries().length === 0) return false;
+      nav.edge(event.key === "Home" ? "first" : "last");
+      return true;
+    case "Enter":
+    case "Tab":
+      // Enter while entries load takes the first entry of exactly this query once it arrives, never a stale one.
+      if (event.key === "Enter" && !event.shiftKey && nav.load().state === "loading") {
+        nav.chooseWhenLoaded();
+        return true;
+      }
+      // Enter asks a list that could not load again.
+      if (event.key === "Enter" && !event.shiftKey && nav.load().state === "failed" && nav.entries().length === 0) {
+        nav.retry();
+        return true;
+      }
+      if (event.shiftKey || nav.entries().length === 0) return false;
+      nav.choose();
+      return true;
+    case "Escape":
+      // A running command is stopped by the host, before any back.
+      if (nav.busy()) return false;
+      return nav.back();
+    case "Backspace":
+      return query === "" && nav.back();
+    default:
+      return false;
+  }
+};
+//# sourceMappingURL=CommandList.js.map