@gjermundgaraba-designs/pixel-paper 0.25.0 → 0.27.0

package/dist/src/command-palette/command-palette.js

@@ -0,0 +1,625 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Input as UiInput } from "@foldkit/ui";
+import { Array, Effect, Equal, HashSet, Match, Option, Schema, Stream, String, pipe, } from "effect";
+import * as FoldkitCommand from "foldkit/command";
+import * as Dom from "foldkit/dom";
+import { defineMessageUnion } from "foldkit/message";
+import * as Render from "foldkit/render";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
+import * as Dialog from "../dialog/dialog.js";
+import { foldDialog } from "../dialog/fold.js";
+import { Focus } from "../focus/focus.js";
+import * as Glyph from "../glyph/glyph.js";
+import * as IconButton from "../icon-button/icon-button.js";
+import { isPlain } from "../keys/keys.js";
+import { LOCALE } from "../locale/locale.js";
+import { slotView } from "../slot/slot.js";
+import { prefixKeys } from "../subscription/prefix-keys.js";
+import { BindPaletteKeys, FIELD_ATTRIBUTE, OPTION_SELECTOR, PAGE_ATTRIBUTE, earlyKeys, } from "./keys.js";
+import { findCommands, pageChoices } from "./match.js";
+import { Message } from "./message.js";
+const OpenPage = Schema.Struct({
+    commandId: Schema.String,
+    query: Schema.String,
+    maybeCursor: Schema.Option(Schema.String),
+});
+/** Schema for a command palette: its Dialog, the commands' query and cursor (kept while a
+ *  page is open, so Back restores them), the open page, and the choice being picked. A cursor
+ *  is a row's id, so it holds to its row while the list changes. The rows are the view's
+ *  (built from its `commands`), so ↑, ↓ and Enter carry what their render showed: its rows,
+ *  the row it showed the cursor on, and the query and waiting arrows it was rendered with.
+ *  When that query is the Model's and the render had applied the waiting arrows, those rows
+ *  are the list, and update steps among them from the Model's cursor. A key pressed before the
+ *  view caught up (as the palette opens, or just after typing, while the list still shows the
+ *  last query's rows) cannot name a row yet: `cursorShift` counts the arrows, which the next
+ *  render applies from the cursor's row, and `isEnterPending` an Enter. Such a key returns
+ *  `ReportPendingKeys`, which reads the row the next render shows the cursor on: it becomes
+ *  the cursor, and a waiting Enter acts on it. `renderGeneration` counts the changes to the
+ *  page, the query and the waiting arrows, so a report from an older render is refused. */
+export const Model = Schema.Struct({
+    dialog: Dialog.Model,
+    query: Schema.String,
+    maybeCursor: Schema.Option(Schema.String),
+    cursorShift: Schema.Finite,
+    isEnterPending: Schema.Boolean,
+    renderGeneration: Schema.Int,
+    maybePage: Schema.Option(OpenPage),
+    maybePicking: Schema.Option(Schema.String),
+});
+/** Union of OutMessages a command palette reports. `SelectedCommand`: run this command; the
+ *  palette has closed first, so what it opens takes focus. `SelectedChoice`: apply this choice
+ *  of that command's page; the page holds, the row printing the working cursor, until the
+ *  caller reports back with `pickSucceeded` or `pickFailed`. `Closed`: the reader dismissed
+ *  the palette (Escape, a press on the veil), even while a pick was out; a write already
+ *  running keeps running, and its answer no longer changes the palette. */
+export const OutMessage = defineMessageUnion({
+    SelectedCommand: { id: Schema.String },
+    SelectedChoice: { commandId: Schema.String, choiceId: Schema.String },
+    Closed: {},
+});
+const fieldId = (paletteId) => __foldkitBrandViewResult((`${paletteId}-field`), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#fieldId");
+const listIdOf = (paletteId) => __foldkitBrandViewResult((`${paletteId}-list`), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#listIdOf");
+/** Creates a closed command palette. */
+export const init = (config) => (__foldkitBrandViewResult(({
+    dialog: Dialog.init({ id: config.id }),
+    query: "",
+    maybeCursor: Option.none(),
+    cursorShift: 0,
+    isEnterPending: false,
+    renderGeneration: 0,
+    maybePage: Option.none(),
+    maybePicking: Option.none(),
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#init"));
+/** The palette's id, unique in the document. */
+export const id = (model) => __foldkitBrandViewResult((Dialog.id(model.dialog)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#id");
+/** Whether the palette is open. */
+export const isOpen = (model) => __foldkitBrandViewResult((Dialog.isOpen(model.dialog)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isOpen");
+/** The words in the field: the open page's, or the commands'. A page whose choices are a
+ *  function of what is typed reads it here. */
+export const query = (model) => __foldkitBrandViewResult((Option.match(model.maybePage, {
+    onNone: () => __foldkitBrandViewResult((model.query), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone"),
+    onSome: (page) => __foldkitBrandViewResult((page.query), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome"),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#query");
+/** The command whose page is open. */
+export const maybePageId = (model) => __foldkitBrandViewResult((Option.map(model.maybePage, (page) => __foldkitBrandViewResult((page.commandId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePageId");
+/** Whether a picked choice is waiting for the caller's answer. */
+export const isPicking = (model) => __foldkitBrandViewResult((Option.isSome(model.maybePicking)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isPicking");
+const ROW_ATTRIBUTE = "value";
+const OPENS_PAGE_ATTRIBUTE = "pixel-paper-palette-opens-page";
+/**
+ * Scrolls the cursor's row of the palette `paletteId` (its `id`) into view by the least
+ * distance, once the view has rendered. The palette returns it itself as the cursor moves, the
+ * query changes or a page opens; an application returns it too when the rows change under an
+ * open palette (see `maybeCursorId`), or as it opens one on a page whose cursor may be far
+ * down, and resolves it with `Message.CompletedScrollToCursor` in a Scene.
+ */
+export const ScrollToCursor = FoldkitCommand.define("ScrollToCursor", {
+    args: { paletteId: Schema.String },
+    messages: [Message.CompletedScrollToCursor],
+    execute: ({ paletteId }) => __foldkitBrandViewResult((Effect.suspend(() => __foldkitBrandViewResult((Dom.scrollIntoView(`#${CSS.escape(listIdOf(paletteId))} [aria-selected="true"]`)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~2")).pipe(Effect.ignore, Effect.as(Message.CompletedScrollToCursor()))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#execute"),
+});
+const shownRowOf = (row) => __foldkitBrandViewResult((Option.map(Option.fromNullishOr(row.getAttribute(`data-${ROW_ATTRIBUTE}`)), (rowId) => (__foldkitBrandViewResult(({
+    id: rowId,
+    isHeld: row.getAttribute("aria-disabled") === "true",
+    hasPage: row.hasAttribute(`data-${OPENS_PAGE_ATTRIBUTE}`),
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~3")))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#shownRowOf");
+const find = (selector) => __foldkitBrandViewResult((Option.fromNullishOr(document.querySelector(selector))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#find");
+const shownCursorOf = (paletteId) => __foldkitBrandViewResult((Option.flatMap(find(`#${CSS.escape(listIdOf(paletteId))} ${OPTION_SELECTOR}[aria-selected="true"]`), shownRowOf)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#shownCursorOf");
+/** Reads, once the next render has committed, the row it shows the cursor on while keys wait
+ *  for it (see `Model`), with the Model's `renderGeneration` as they waited, so update knows
+ *  whether that render is still the list. The palette's update returns it as a key waits; in
+ *  a Scene, resolve it with `Message.CompletedReportPendingKeys`. */
+export const ReportPendingKeys = FoldkitCommand.define("ReportPendingKeys", {
+    args: {
+        paletteId: Schema.String,
+        renderGeneration: Schema.Int,
+    },
+    messages: [Message.CompletedReportPendingKeys],
+    execute: ({ paletteId, renderGeneration }) => __foldkitBrandViewResult((Effect.gen(function* () {
+        yield* Render.afterCommit;
+        const maybeRow = yield* Effect.sync(() => __foldkitBrandViewResult((shownCursorOf(paletteId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~5"));
+        return __foldkitBrandViewResult((Message.CompletedReportPendingKeys({ renderGeneration, maybeRow })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~4");
+    })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#execute~2"),
+});
+const scrollPaletteToCursor = (model) => __foldkitBrandViewResult((ScrollToCursor({ paletteId: id(model) })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#scrollPaletteToCursor");
+const reportPendingKeys = (model) => __foldkitBrandViewResult((ReportPendingKeys({
+    paletteId: id(model),
+    renderGeneration: model.renderGeneration,
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#reportPendingKeys");
+const focusField = (model) => __foldkitBrandViewResult((Focus({ id: fieldId(id(model)) })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#focusField");
+const toClosed = Dialog.OutMessage.match({
+    Closed: () => __foldkitBrandViewResult((OutMessage.Closed()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#Closed"),
+});
+const dialogFold = foldDialog(Dialog, {
+    read: (model) => __foldkitBrandViewResult((model.dialog), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#read"),
+    write: (model, nextDialog) => __foldkitBrandViewResult((modifyFields(model, { dialog: () => __foldkitBrandViewResult((nextDialog), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#dialog") })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#write"),
+    toParentMessage: (message) => __foldkitBrandViewResult((Message.GotDialogMessage({ message })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#toParentMessage"),
+    toParentOutMessage: toClosed,
+});
+const freshPage = (commandId) => (__foldkitBrandViewResult(({
+    commandId,
+    query: "",
+    maybeCursor: Option.none(),
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#freshPage"));
+const nextGeneration = (generation) => __foldkitBrandViewResult((generation + 1), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#nextGeneration");
+const clearPendingKeys = (model) => __foldkitBrandViewResult((modifyFields(model, {
+    cursorShift: () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cursorShift"),
+    isEnterPending: () => __foldkitBrandViewResult((false), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isEnterPending"),
+    renderGeneration: nextGeneration,
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#clearPendingKeys");
+const fresh = (model, maybePage) => __foldkitBrandViewResult((clearPendingKeys(modifyFields(model, {
+    query: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#query~2"),
+    maybeCursor: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybeCursor"),
+    maybePage: () => __foldkitBrandViewResult((maybePage), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePage"),
+    maybePicking: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePicking"),
+}))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#fresh");
+const followShown = (model, maybeShownPage) => __foldkitBrandViewResult((Equal.equals(maybePageId(model), maybeShownPage)
+    ? model
+    : clearPendingKeys(modifyFields(model, {
+        maybePage: () => __foldkitBrandViewResult((Option.map(maybeShownPage, freshPage)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePage~2"),
+        maybePicking: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePicking~2"),
+    }))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#followShown");
+const modifyPage = (model, modifyOpenPage) => __foldkitBrandViewResult((modifyFields(model, { maybePage: Option.map(modifyOpenPage) })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#modifyPage");
+const unlessPicking = (model, next) => (__foldkitBrandViewResult((isPicking(model) ? { model } : next(model)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#unlessPicking"));
+const leavePage = (model) => __foldkitBrandViewResult((isPicking(model) || Option.isNone(model.maybePage)
+    ? { model }
+    : {
+        model: clearPendingKeys(modifyFields(model, { maybePage: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePage~3") })),
+        commands: [focusField(model), scrollPaletteToCursor(model)],
+    }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#leavePage");
+const openPage = (model, commandId) => (__foldkitBrandViewResult(({
+    model: clearPendingKeys(modifyFields(model, { maybePage: () => __foldkitBrandViewResult((Option.some(freshPage(commandId))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePage~4") })),
+    commands: [focusField(model), scrollPaletteToCursor(model)],
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#openPage"));
+const selectCommand = (model, commandId) => __foldkitBrandViewResult((pipe(dialogFold.close(model), Update.withOutMessage(OutMessage.SelectedCommand({ id: commandId })))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#selectCommand");
+const moveCursor = (model, cursorId) => __foldkitBrandViewResult((modifyFields(Option.match(model.maybePage, {
+    onNone: () => __foldkitBrandViewResult((modifyFields(model, { maybeCursor: () => __foldkitBrandViewResult((Option.some(cursorId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybeCursor~2") })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~2"),
+    onSome: () => __foldkitBrandViewResult((modifyPage(model, (page) => __foldkitBrandViewResult((modifyFields(page, { maybeCursor: () => __foldkitBrandViewResult((Option.some(cursorId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybeCursor~3") })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~6"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~2"),
+}), { cursorShift: () => __foldkitBrandViewResult((0), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cursorShift~2"), renderGeneration: nextGeneration })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#moveCursor");
+const pick = (model, commandId, choiceId) => (__foldkitBrandViewResult(({
+    model: clearPendingKeys(modifyFields(moveCursor(model, choiceId), {
+        maybePicking: () => __foldkitBrandViewResult((Option.some(choiceId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePicking~3"),
+    })),
+    outMessage: OutMessage.SelectedChoice({ commandId, choiceId }),
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pick"));
+const runRow = (model, row) => {
+    if (row.isHeld) {
+        return __foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#runRow");
+    }
+    return __foldkitBrandViewResult((Option.match(maybePageId(model), {
+        onSome: (commandId) => __foldkitBrandViewResult((pick(model, commandId, row.id)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~3"),
+        onNone: () => __foldkitBrandViewResult((row.hasPage ? openPage(model, row.id) : selectCommand(model, row.id)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~3"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#runRow");
+};
+const maybeCurrentCursor = (model) => __foldkitBrandViewResult((Option.match(model.maybePage, {
+    onNone: () => __foldkitBrandViewResult((model.maybeCursor), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~4"),
+    onSome: (page) => __foldkitBrandViewResult((page.maybeCursor), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~4"),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybeCurrentCursor");
+const ARROW_STEP = {
+    ArrowUp: -1,
+    ArrowDown: 1,
+};
+const isListed = (rows, rowId) => __foldkitBrandViewResult((Array.some(rows, (row) => __foldkitBrandViewResult((row.id === rowId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~7"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isListed");
+const cursorAsShown = (model, shown) => {
+    const { rows, maybeShownCursor, shownQuery, shownShift } = shown;
+    const isTheList = shownQuery === query(model);
+    const hasNoWaitingArrows = model.cursorShift === 0;
+    const hasAppliedWaitingArrows = shownShift === model.cursorShift;
+    if (isTheList && hasNoWaitingArrows) {
+        return __foldkitBrandViewResult((Option.match(Option.filter(maybeCurrentCursor(model), (rowId) => __foldkitBrandViewResult((isListed(rows, rowId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~8")), {
+            onSome: (rowId) => (__foldkitBrandViewResult(({ _tag: "Listed", rowId }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~5")),
+            onNone: () => (__foldkitBrandViewResult(({
+                _tag: "Shown",
+                maybeRowId: maybeShownCursor,
+            }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~5")),
+        })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cursorAsShown");
+    }
+    else if (isTheList && hasAppliedWaitingArrows) {
+        return __foldkitBrandViewResult(({ _tag: "Shown", maybeRowId: maybeShownCursor }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cursorAsShown");
+    }
+    return __foldkitBrandViewResult(({ _tag: "Waiting" }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cursorAsShown");
+};
+const stepTo = (model, rowId) => {
+    const moved = moveCursor(model, rowId);
+    return __foldkitBrandViewResult(({
+        model: moved,
+        commands: [
+            scrollPaletteToCursor(model),
+            ...(moved.isEnterPending ? [reportPendingKeys(moved)] : []),
+        ],
+    }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#stepTo");
+};
+const rowAfter = (rows, maybeFrom, steps) => __foldkitBrandViewResult((pipe(maybeFrom, Option.flatMap((rowId) => __foldkitBrandViewResult((Array.findFirstIndex(rows, (row) => __foldkitBrandViewResult((row.id === rowId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~9")), Option.flatMap((index) => __foldkitBrandViewResult((Array.get(rows, Math.min(Math.max(index + steps, 0), rows.length - 1))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~11")))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#rowAfter");
+const stepFrom = (model, key, rows, maybeFrom) => __foldkitBrandViewResult((Option.match(rowAfter(rows, maybeFrom, ARROW_STEP[key]), {
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~6")),
+    onSome: (row) => __foldkitBrandViewResult((stepTo(model, row.id)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~6"),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#stepFrom");
+const pendArrow = (model, key) => {
+    const pending = modifyFields(model, {
+        cursorShift: (shift) => __foldkitBrandViewResult((shift + ARROW_STEP[key]), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cursorShift~3"),
+        renderGeneration: nextGeneration,
+    });
+    return __foldkitBrandViewResult(({
+        model: pending,
+        commands: [scrollPaletteToCursor(model), reportPendingKeys(pending)],
+    }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pendArrow");
+};
+const pressArrow = (model, key, shown) => __foldkitBrandViewResult((Match.valueTags(cursorAsShown(model, shown), {
+    Listed: ({ rowId }) => __foldkitBrandViewResult((stepFrom(model, key, shown.rows, Option.some(rowId))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#Listed"),
+    Shown: ({ maybeRowId }) => __foldkitBrandViewResult((stepFrom(model, key, shown.rows, maybeRowId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#Shown"),
+    Waiting: () => __foldkitBrandViewResult((pendArrow(model, key)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#Waiting"),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pressArrow");
+const pendEnter = (model) => {
+    const pending = modifyFields(model, { isEnterPending: () => __foldkitBrandViewResult((true), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isEnterPending~2") });
+    return __foldkitBrandViewResult(({ model: pending, commands: [reportPendingKeys(pending)] }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pendEnter");
+};
+const enterOn = (model, rows, maybeRowId) => __foldkitBrandViewResult((pipe(maybeRowId, Option.flatMap((rowId) => __foldkitBrandViewResult((Array.findFirst(rows, (row) => __foldkitBrandViewResult((row.id === rowId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~13"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~12")), Option.match({
+    onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~7")),
+    onSome: (row) => __foldkitBrandViewResult((runRow(model, row)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~7"),
+}))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#enterOn");
+const pressEnter = (model, shown) => __foldkitBrandViewResult((Match.valueTags(cursorAsShown(model, shown), {
+    Listed: ({ rowId }) => __foldkitBrandViewResult((enterOn(model, shown.rows, Option.some(rowId))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#Listed~2"),
+    Shown: ({ maybeRowId }) => __foldkitBrandViewResult((enterOn(model, shown.rows, maybeRowId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#Shown~2"),
+    Waiting: () => __foldkitBrandViewResult((pendEnter(model)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#Waiting~2"),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pressEnter");
+const isPending = (model) => __foldkitBrandViewResult((model.cursorShift !== 0 || model.isEnterPending), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isPending");
+const settlePending = (model, report) => {
+    if (!isPending(model) || report.renderGeneration !== model.renderGeneration) {
+        return __foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#settlePending");
+    }
+    const settled = clearPendingKeys(model);
+    return __foldkitBrandViewResult((Option.match(report.maybeRow, {
+        onNone: () => (__foldkitBrandViewResult(({ model: settled }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~8")),
+        onSome: (row) => {
+            const moved = moveCursor(settled, row.id);
+            const ran = model.isEnterPending ? runRow(moved, row) : { model: moved };
+            return __foldkitBrandViewResult(({
+                ...ran,
+                commands: [scrollPaletteToCursor(model), ...(ran.commands ?? [])],
+            }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~8");
+        },
+    })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#settlePending");
+};
+const updateQuery = (model, value) => __foldkitBrandViewResult((clearPendingKeys(Option.match(model.maybePage, {
+    onNone: () => __foldkitBrandViewResult((modifyFields(model, {
+        query: () => __foldkitBrandViewResult((value), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#query~3"),
+        maybeCursor: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybeCursor~4"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~9"),
+    onSome: () => __foldkitBrandViewResult((modifyPage(model, (page) => __foldkitBrandViewResult((modifyFields(page, {
+        query: () => __foldkitBrandViewResult((value), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#query~4"),
+        maybeCursor: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybeCursor~5"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~14"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~9"),
+}))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#updateQuery");
+/** Processes a command palette Message and returns the next Model, Commands and OutMessage. */
+export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
+    GotDialogMessage: ({ message: dialogMessage }) => __foldkitBrandViewResult((dialogFold.update(model, dialogMessage)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#GotDialogMessage"),
+    UpdatedQuery: ({ value, maybeShownPage }) => __foldkitBrandViewResult((unlessPicking(followShown(model, maybeShownPage), (shown) => (__foldkitBrandViewResult(({
+        model: updateQuery(shown, value),
+        commands: [scrollPaletteToCursor(shown)],
+    }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~15")))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#UpdatedQuery"),
+    PressedArrowKey: ({ key, snapshot }) => __foldkitBrandViewResult((unlessPicking(followShown(model, snapshot.maybeShownPage), (current) => __foldkitBrandViewResult((pressArrow(current, key, snapshot)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~16"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#PressedArrowKey"),
+    PressedEarlyArrowKey: ({ key }) => __foldkitBrandViewResult((unlessPicking(model, (current) => __foldkitBrandViewResult((pendArrow(current, key)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~17"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#PressedEarlyArrowKey"),
+    CompletedReportPendingKeys: (report) => __foldkitBrandViewResult((settlePending(model, report)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#CompletedReportPendingKeys"),
+    PressedEnter: ({ snapshot }) => __foldkitBrandViewResult((unlessPicking(followShown(model, snapshot.maybeShownPage), (current) => __foldkitBrandViewResult((pressEnter(current, snapshot)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~18"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#PressedEnter"),
+    PressedEarlyEnter: () => __foldkitBrandViewResult((unlessPicking(model, pendEnter)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#PressedEarlyEnter"),
+    PressedBackspace: ({ maybeShownPage }) => __foldkitBrandViewResult((leavePage(followShown(model, maybeShownPage))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#PressedBackspace"),
+    ClickedRow: ({ row, maybeShownPage }) => __foldkitBrandViewResult((unlessPicking(followShown(model, maybeShownPage), (current) => __foldkitBrandViewResult((runRow(current, row)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~19"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#ClickedRow"),
+    ClickedBack: () => __foldkitBrandViewResult((leavePage(model)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#ClickedBack"),
+    CompletedScrollToCursor: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#CompletedScrollToCursor")),
+    CompletedFocus: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#CompletedFocus")),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#update");
+/** Opens the palette on the commands, with an empty field and the cursor on the first row.
+ *  Snapshot what the commands act on (the selected item, its title for `scope`) in the
+ *  caller's Model as it opens, and build `commands` from that snapshot until it closes. */
+export const open = (model) => __foldkitBrandViewResult((dialogFold.open(fresh(model, Option.none()))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#open");
+/** Opens the palette straight on a command's page. Back still leads to the commands. */
+export const openAt = (model, config) => __foldkitBrandViewResult((dialogFold.open(fresh(model, Option.some(freshPage(config.commandId))))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#openAt");
+/** The caller applied the choice: the palette closes. An answer for a pick that is no longer
+ *  out (the palette was dismissed, its page left, or a newer pick replaced it) changes
+ *  nothing; the caller keeps the write it made. */
+export const pickSucceeded = (model, choiceId) => __foldkitBrandViewResult((Option.contains(model.maybePicking, choiceId)
+    ? dialogFold.close(fresh(model, Option.none()))
+    : { model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pickSucceeded");
+/** The caller refused the choice: the page stays with its query, focus and the cursor on that
+ *  choice; say why in the view's `toDetailView`. An answer for a pick that is no longer out
+ *  changes nothing. */
+export const pickFailed = (model, choiceId) => __foldkitBrandViewResult((Option.contains(model.maybePicking, choiceId)
+    ? { model: modifyFields(model, { maybePicking: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybePicking~4") }) }
+    : { model }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pickFailed");
+const earlyKeySubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
+    earlyKeys: entry({ maybeOpenId: Schema.Option(Schema.String) }, {
+        modelToDependencies: (model) => (__foldkitBrandViewResult(({
+            maybeOpenId: isOpen(model) ? Option.some(id(model)) : Option.none(),
+        }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#modelToDependencies")),
+        dependenciesToStream: ({ maybeOpenId }) => __foldkitBrandViewResult((Option.match(maybeOpenId, {
+            onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~10"),
+            onSome: earlyKeys,
+        })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#dependenciesToStream"),
+    }),
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~20")));
+/** While the palette is open, takes ↑ ↓ and Enter pressed before its field has focus (the
+ *  field's own are the view's), on the window, before the page's own key bindings see them,
+ *  so the keys pressed straight after the one that opened it are not lost. Lift it into the
+ *  application's Subscriptions, once per palette, with a key prefix of the parent's that no
+ *  other record on the page uses: `subscriptions("palette")` is keyed `paletteEarlyKeys`. */
+export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, earlyKeySubscriptions)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#subscriptions");
+const pageOf = (commands, state) => __foldkitBrandViewResult((pipe(Array.findFirst(commands, (command) => __foldkitBrandViewResult((command.id === state.commandId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~21")), Option.flatMap((command) => __foldkitBrandViewResult((Option.fromNullishOr(command.page)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~22")), Option.map((page) => (__foldkitBrandViewResult(({ page, state }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~23"))))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#pageOf");
+const firstListed = (rows, candidates) => __foldkitBrandViewResult((Array.findFirst(Array.getSomes(candidates), (cursorId) => __foldkitBrandViewResult((isListed(rows, cursorId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~24"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#firstListed");
+const firstId = (rows) => __foldkitBrandViewResult((Option.map(Array.head(rows), (row) => __foldkitBrandViewResult((row.id), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~25"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#firstId");
+const cursorRowFallback = ({ maybeMovedTo, rows, found, pageDefaults, }) => __foldkitBrandViewResult((pipe(Option.filter(maybeMovedTo, (rowId) => __foldkitBrandViewResult((isListed(rows, rowId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~26")), Option.orElse(() => __foldkitBrandViewResult((firstListed(found, pageDefaults)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~27")), Option.orElse(() => __foldkitBrandViewResult((firstId(found)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~28")))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cursorRowFallback");
+const shifted = (shown, shift) => (__foldkitBrandViewResult(({
+    ...shown,
+    maybeCursorId: Option.map(rowAfter(shown.rows, shown.maybeCursorId, shift), (row) => __foldkitBrandViewResult((row.id), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~29")),
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#shifted"));
+const unshiftedOf = (model, commands) => {
+    const maybePage = Option.flatMap(model.maybePage, (state) => __foldkitBrandViewResult((pageOf(commands, state)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~30"));
+    return __foldkitBrandViewResult((Option.match(maybePage, {
+        onNone: () => {
+            const rows = findCommands(commands, model.query);
+            return __foldkitBrandViewResult(({
+                maybePage,
+                rows,
+                contextIds: HashSet.empty(),
+                maybeCursorId: cursorRowFallback({
+                    maybeMovedTo: model.maybeCursor,
+                    rows,
+                    found: rows,
+                    pageDefaults: [],
+                }),
+            }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~11");
+        },
+        onSome: ({ page, state }) => {
+            const { rows, found, contextIds } = pageChoices(page, state.query);
+            return __foldkitBrandViewResult(({
+                maybePage,
+                rows,
+                contextIds,
+                maybeCursorId: cursorRowFallback({
+                    maybeMovedTo: state.maybeCursor,
+                    rows,
+                    found,
+                    pageDefaults: [
+                        Option.fromNullishOr(page.start),
+                        Option.fromNullishOr(page.current),
+                    ],
+                }),
+            }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~10");
+        },
+    })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#unshiftedOf");
+};
+const hasCursorRowLeft = (model, unshifted) => __foldkitBrandViewResult((Option.exists(maybeCurrentCursor(model), (rowId) => __foldkitBrandViewResult((!Option.contains(unshifted.maybeCursorId, rowId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~31"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#hasCursorRowLeft");
+const dropArrowsWhenCursorRowGone = (model, unshifted) => __foldkitBrandViewResult((hasCursorRowLeft(model, unshifted)
+    ? unshifted
+    : shifted(unshifted, model.cursorShift)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#dropArrowsWhenCursorRowGone");
+const shownOf = (model, commands) => __foldkitBrandViewResult((dropArrowsWhenCursorRowGone(model, unshiftedOf(model, commands))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#shownOf");
+/** The row the cursor is on as the view shows it with `commands`: the row the reader moved it
+ *  to while that row is listed, else the page's `start` or `current` while the query finds it,
+ *  else the first row the query finds; none when nothing is listed. Compare it before and after
+ *  the caller's commands change to know when the cursor fell to another row (its row left) and
+ *  should be scrolled into view with `ScrollToCursor`; a cursor whose row is still listed keeps
+ *  it, and the list its scroll. */
+export const maybeCursorId = (model, commands) => __foldkitBrandViewResult((shownOf(model, commands).maybeCursorId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#maybeCursorId");
+const isCommand = (row) => __foldkitBrandViewResult(("group" in row), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isCommand");
+const isCurrentRow = (shown, row) => __foldkitBrandViewResult((Option.exists(shown.maybePage, ({ page }) => __foldkitBrandViewResult((page.current === row.id), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~32"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isCurrentRow");
+const isContextRow = (shown, row) => __foldkitBrandViewResult((HashSet.has(shown.contextIds, row.id)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#isContextRow");
+const levelOf = (row) => __foldkitBrandViewResult(("level" in row ? Option.fromNullishOr(row.level) : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#levelOf");
+const shownRowFor = (shown, row) => (__foldkitBrandViewResult(({
+    id: row.id,
+    isHeld: row.isDisabled === true || isCurrentRow(shown, row),
+    hasPage: isCommand(row) && row.page !== undefined,
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#shownRowFor"));
+const shownQueryOf = (model, shown) => __foldkitBrandViewResult((Option.match(shown.maybePage, {
+    onNone: () => __foldkitBrandViewResult((model.query), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~12"),
+    onSome: ({ state }) => __foldkitBrandViewResult((state.query), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~11"),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#shownQueryOf");
+const shownPageIdOf = (shown) => __foldkitBrandViewResult((Option.map(shown.maybePage, ({ state }) => __foldkitBrandViewResult((state.commandId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~33"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#shownPageIdOf");
+const renderedListOf = (model, shown) => (__foldkitBrandViewResult(({
+    rows: Array.map(shown.rows, (row) => __foldkitBrandViewResult((shownRowFor(shown, row)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~34")),
+    maybeShownCursor: shown.maybeCursorId,
+    maybeShownPage: shownPageIdOf(shown),
+    shownQuery: shownQueryOf(model, shown),
+    shownShift: model.cursorShift,
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#renderedListOf"));
+const rowKeysWithRenderedList = (model, shown) => __foldkitBrandViewResult(((key, modifiers) => {
+    const snapshot = renderedListOf(model, shown);
+    return __foldkitBrandViewResult((isPicking(model) || !isPlain(modifiers)
+        ? Option.none()
+        : Match.value(key).pipe(Match.withReturnType(), Match.whenOr("ArrowDown", "ArrowUp", (arrow) => __foldkitBrandViewResult((Option.some(Message.PressedArrowKey({ key: arrow, snapshot }))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~36")), Match.when("Enter", () => __foldkitBrandViewResult((Option.some(Message.PressedEnter({ snapshot }))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~37")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~38")))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~35");
+}), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#rowKeysWithRenderedList");
+const optionId = (paletteId, index) => __foldkitBrandViewResult((`${paletteId}-option-${index}`), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#optionId");
+const NOTHING_FOUND = "nothing matches · try fewer letters";
+const COMMANDS_FOOT = "↑ ↓ move · enter runs · esc closes";
+const PAGE_FOOT = "↑ ↓ move · enter picks · ⌫ back · esc closes";
+const resultWord = (count) => __foldkitBrandViewResult((count === 1 ? "result" : "results"), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#resultWord");
+const countWords = (count) => __foldkitBrandViewResult((count === 0
+    ? "Nothing matches."
+    : `${count.toLocaleString(LOCALE)} ${resultWord(count)}.`), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#countWords");
+const rowPartsView = (model, shown, row, h) => {
+    const hint = row.isDisabled === true ? (row.reason ?? row.hint) : row.hint;
+    const opens = h.span([h.Class("glyph opens"), h.AriaHidden(true)], [Glyph.view({ name: "caret-right" }, h)]);
+    return __foldkitBrandViewResult(([
+        ...(row.glyph === undefined
+            ? []
+            : [h.span([h.Class("glyph")], [Glyph.view({ name: row.glyph }, h)])]),
+        h.span([h.Class("palette-label")], [
+            row.label,
+            ...(isContextRow(shown, row)
+                ? [h.span([h.Class("sr-only")], [" (context)"])]
+                : []),
+        ]),
+        ...(Option.contains(model.maybePicking, row.id)
+            ? [h.span([h.Class("cursor"), h.AriaHidden(true)])]
+            : []),
+        ...(isCurrentRow(shown, row)
+            ? [h.span([h.Class("tag")], ["current"])]
+            : []),
+        ...(hint === undefined ? [] : [h.span([h.Class("hint")], [hint])]),
+        ...(shownRowFor(shown, row).hasPage ? [opens] : []),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#rowPartsView");
+};
+const rowView = (model, shown, row, index, h) => {
+    const shownRow = shownRowFor(shown, row);
+    return __foldkitBrandViewResult((h.keyed("div")(row.id, [
+        h.Id(optionId(id(model), index)),
+        h.Role("option"),
+        h.AriaSelected(Option.contains(shown.maybeCursorId, row.id)),
+        ...(shownRow.isHeld ? [h.AriaDisabled(true)] : []),
+        h.DataAttribute(ROW_ATTRIBUTE, row.id),
+        ...(shownRow.hasPage ? [h.DataAttribute(OPENS_PAGE_ATTRIBUTE, "")] : []),
+        h.Class(Array.join([
+            "palette-row",
+            ...(row.isAuthored === true ? ["authored"] : []),
+            ...(isContextRow(shown, row) ? ["context"] : []),
+        ], " ")),
+        ...Option.match(levelOf(row), {
+            onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~13"),
+            onSome: (level) => __foldkitBrandViewResult(([h.Style({ "--palette-level": `${level}` })]), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~12"),
+        }),
+        ...(shownRow.isHeld || isPicking(model)
+            ? []
+            : [
+                h.OnClick(Message.ClickedRow({
+                    row: shownRow,
+                    maybeShownPage: shownPageIdOf(shown),
+                })),
+            ]),
+    ], rowPartsView(model, shown, row, h))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#rowView");
+};
+const groupedRows = (model, shown, h) => {
+    const indexed = Array.map(shown.rows, (row, index) => (__foldkitBrandViewResult(({ row, index }), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~39")));
+    return __foldkitBrandViewResult((Option.match(shown.maybePage, {
+        onSome: () => __foldkitBrandViewResult((Array.map(indexed, ({ row, index }) => __foldkitBrandViewResult((rowView(model, shown, row, index, h)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~40"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~13"),
+        onNone: () => {
+            const groups = Array.dedupe(Array.map(shown.rows, (row) => (__foldkitBrandViewResult((isCommand(row) ? row.group : ""), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~41"))));
+            return __foldkitBrandViewResult((Array.map(groups, (group, groupIndex) => {
+                const headingId = `${id(model)}-group-${groupIndex}`;
+                return __foldkitBrandViewResult((h.keyed("div")(`group-${group}`, [h.Role("group"), h.AriaLabelledBy(headingId)], [
+                    h.div([
+                        h.Id(headingId),
+                        h.Role("presentation"),
+                        h.Class("palette-group"),
+                    ], [group]),
+                    ...Array.map(Array.filter(indexed, ({ row }) => __foldkitBrandViewResult((isCommand(row) && row.group === group), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~43")), ({ row, index }) => __foldkitBrandViewResult((rowView(model, shown, row, index, h)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~44")),
+                ])), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~42");
+            })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~14");
+        },
+    })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#groupedRows");
+};
+const comboboxAttributes = (model, shown, noun, h) => {
+    const paletteId = id(model);
+    const maybeCursorIndex = Option.flatMap(shown.maybeCursorId, (cursorId) => __foldkitBrandViewResult((Array.findFirstIndex(shown.rows, (row) => __foldkitBrandViewResult((row.id === cursorId), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~46"))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~45"));
+    return __foldkitBrandViewResult(([
+        h.OnKeyDownPreventDefault(rowKeysWithRenderedList(model, shown)),
+        h.Role("combobox"),
+        h.AriaExpanded(true),
+        h.AriaControls(listIdOf(paletteId)),
+        h.AriaAutocomplete("list"),
+        ...Option.toArray(Option.map(maybeCursorIndex, (index) => __foldkitBrandViewResult((h.AriaActiveDescendant(optionId(paletteId, index))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~47"))),
+        h.AriaLabel(Option.match(shown.maybePage, {
+            onNone: () => __foldkitBrandViewResult((`Command or ${noun}`), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~15"),
+            onSome: ({ page }) => __foldkitBrandViewResult((page.title), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~14"),
+        })),
+        h.Autocomplete("off"),
+        h.DataAttribute(FIELD_ATTRIBUTE, ""),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#comboboxAttributes");
+};
+const fieldView = (model, shown, noun, render, h) => {
+    const maybeShownPage = shownPageIdOf(shown);
+    return __foldkitBrandViewResult((UiInput.view({
+        id: fieldId(id(model)),
+        value: shownQueryOf(model, shown),
+        onInput: (value) => __foldkitBrandViewResult((Message.UpdatedQuery({ value, maybeShownPage })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onInput"),
+        isReadOnly: isPicking(model),
+        placeholder: Option.match(shown.maybePage, {
+            onNone: () => __foldkitBrandViewResult((`type a command or a ${noun}`), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~16"),
+            onSome: ({ page }) => __foldkitBrandViewResult((page.find ?? "type to narrow"), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~15"),
+        }),
+        toView: (groups) => __foldkitBrandViewResult((h.input([
+            ...render.initialFocus,
+            ...groups.input,
+            ...comboboxAttributes(model, shown, noun, h),
+        ])), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#toView"),
+    }, h)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#fieldView");
+};
+const headView = (model, shown, scope, field, h) => __foldkitBrandViewResult((h.div([h.Class("palette-q field")], [
+    ...Option.toArray(Option.map(shown.maybePage, () => __foldkitBrandViewResult((IconButton.view({
+        glyph: "arrow-left",
+        label: "Back",
+        isQuiet: true,
+        isDisabled: isPicking(model),
+        onClick: Message.ClickedBack(),
+    }, h)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~48"))),
+    h.span([h.Class("palette-scope")], [scope]),
+    ...Option.toArray(Option.map(shown.maybePage, ({ page }) => __foldkitBrandViewResult((h.span([h.Class("palette-title")], [page.title])), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~49"))),
+    field,
+])), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#headView");
+const listView = (model, shown, h) => __foldkitBrandViewResult((h.div([
+    h.Id(listIdOf(id(model))),
+    h.Role("listbox"),
+    h.AriaLabel(Option.match(shown.maybePage, {
+        onNone: () => __foldkitBrandViewResult(("Results"), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~17"),
+        onSome: ({ page }) => __foldkitBrandViewResult((page.title), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~16"),
+    })),
+    ...(isPicking(model) ? [h.AriaBusy(true)] : []),
+    h.Class("palette-list"),
+], Array.match(shown.rows, {
+    onEmpty: () => __foldkitBrandViewResult(([
+        h.div([h.Role("presentation"), h.Class("palette-group")], [NOTHING_FOUND]),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onEmpty"),
+    onNonEmpty: () => __foldkitBrandViewResult((groupedRows(model, shown, h)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNonEmpty"),
+}))), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#listView");
+const countView = (model, shown, h) => {
+    const shownQuery = shownQueryOf(model, shown);
+    return __foldkitBrandViewResult((h.div([h.Role("status"), h.Class("sr-only")], String.isEmpty(shownQuery)
+        ? []
+        : [countWords(shown.rows.length - HashSet.size(shown.contextIds))])), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#countView");
+};
+const cardView = (model, viewInputs, render, h) => {
+    const { commands, scope = "commands", noun = "title", toDetailView = () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~50"), } = viewInputs;
+    const shown = shownOf(model, commands);
+    return __foldkitBrandViewResult((h.div([
+        ...Option.toArray(Option.map(shownPageIdOf(shown), (commandId) => __foldkitBrandViewResult((h.DataAttribute(PAGE_ATTRIBUTE, commandId)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~51"))),
+        h.OnMount(BindPaletteKeys()),
+        h.Class("card palette"),
+    ], [
+        headView(model, shown, scope, fieldView(model, shown, noun, render, h), h),
+        ...slotView("div", "palette-detail", toDetailView(), h),
+        listView(model, shown, h),
+        countView(model, shown, h),
+        h.div([h.Class("palette-more")], [
+            Option.match(shown.maybePage, {
+                onNone: () => __foldkitBrandViewResult((COMMANDS_FOOT), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onNone~18"),
+                onSome: () => __foldkitBrandViewResult((PAGE_FOOT), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#onSome~17"),
+            }),
+        ]),
+    ])), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#cardView");
+};
+/**
+ * Type to find a command or a title; one inverted cursor row, moved by ↑ and ↓ only
+ * (stopping at the ends; the pointer shades a row but never moves the cursor); Enter or a
+ * click selects it, and the palette closes first so what the command opens takes focus. A
+ * command with a page opens that page in place: Back, or Backspace in an empty field, returns
+ * to the commands with their query and cursor as they were. The choice in force is tagged
+ * current and cannot be picked; a picked choice holds the page until the caller answers. Once
+ * a query is typed, a polite status says how many rows it finds. Escape closes the whole
+ * palette.
+ *
+ * A pixel-paper Dialog (named "Commands", hung near the top) holding a field built on
+ * `@foldkit/ui`'s Input as an ARIA combobox (`aria-activedescendant` on the cursor's row) over
+ * an always open `role="listbox"` of `role="option"` rows, grouped under their headings.
+ */
+export const view = defineView((model, viewInputs, h) => __foldkitBrandViewResult((h.submodel({
+    slotId: id(model),
+    model: model.dialog,
+    view: Dialog.view,
+    viewInputs: {
+        label: "Commands",
+        placement: "Top",
+        toLiveRegionView: viewInputs.toLiveRegionView,
+        toView: (render) => __foldkitBrandViewResult((cardView(model, viewInputs, render, h)), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#toView~2"),
+    },
+    toParentMessage: (message) => __foldkitBrandViewResult((Message.GotDialogMessage({ message })), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#toParentMessage~2"),
+})), "@gjermundgaraba-designs/pixel-paper/src/command-palette/command-palette.js#anonymous~52"));