@gjermundgaraba-designs/pixel-paper 0.25.0 → 0.27.0

package/src/{commandPalette → command-palette}/index.ts

@@ -17,10 +17,20 @@ export {
   subscriptions,
   update,
   view,
-} from "./commandPalette.ts";
-export type { InitConfig, OpenAtConfig, ViewInputs } from "./commandPalette.ts";
+} from "./command-palette.ts";
+
+export type {
+  InitConfig,
+  OpenAtConfig,
+  ViewInputs,
+} from "./command-palette.ts";
+
 export { BindPaletteKeys } from "./keys.ts";
+
 export { findChoices } from "./match.ts";
+
 export type { Choice, Command, Page } from "./match.ts";
+
 export { Message } from "./message.ts";
+
 export { Focus } from "../focus/focus.ts";

package/src/{commandPalette → command-palette}/keys.ts

@@ -5,62 +5,60 @@ import * as Mount from "foldkit/mount";
 import { isPlain } from "../keys/keys.ts";
 import { Message } from "./message.ts";
 
-/** A row of the palette's list. */
 export const OPTION_SELECTOR = '[role="option"]';
 
-/** The data attribute on the palette's field, by which its keys know it. */
 export const FIELD_ATTRIBUTE = "pixel-paper-palette-field";
 
-/** The data attribute on the card while a page is open: the page's command. */
 export const PAGE_ATTRIBUTE = "pixel-paper-palette-page";
 
-/** The page an element of the palette shows, from its `PAGE_ATTRIBUTE`: none for the
- *  commands. */
 export const shownPageOf = (element: Element): Option.Option<string> =>
   Option.fromNullishOr(element.getAttribute(`data-${PAGE_ATTRIBUTE}`));
 
 const isEmptyFieldOnPage = (root: Element, field: Element): boolean =>
-  field instanceof HTMLInputElement && field.value === "" && Option.isSome(shownPageOf(root));
+  field instanceof HTMLInputElement &&
+  field.value === "" &&
+  Option.isSome(shownPageOf(root));
+
+const isComposingModifiedOrHandled = (event: KeyboardEvent): boolean =>
+  event.isComposing || !isPlain(event) || event.defaultPrevented;
 
-/** What a Backspace in the palette's field does: in an empty field on a page it goes back.
- *  It reads the field as it is at the press, which a render cannot know. A key from elsewhere,
- *  a key an IME is composing, a modified key and a key someone already handled are left
- *  alone; while a pick is out the update refuses it. */
 export const fieldKey = (
   root: Element,
-  event: KeyboardEvent,
+  event: KeyboardEvent
 ): Option.Option<typeof Message.PressedBackspace.Type> => {
   const field = root.querySelector(`[data-${FIELD_ATTRIBUTE}]`);
+
   if (
     field === null ||
     event.target !== field ||
     event.key !== "Backspace" ||
-    event.isComposing ||
-    event.defaultPrevented ||
-    !isPlain(event) ||
+    isComposingModifiedOrHandled(event) ||
     !isEmptyFieldOnPage(root, field)
   ) {
     return Option.none();
   }
-  return Option.some(Message.PressedBackspace({ maybeShownPage: shownPageOf(root) }));
+
+  return Option.some(
+    Message.PressedBackspace({ maybeShownPage: shownPageOf(root) })
+  );
 };
 
-/** Keeps a key an IME is composing from the field's own key handler (the view's, which is
- *  given a key's name and modifiers only), so the IME's arrows and its Enter stay the IME's.
- *  It listens in the capture phase and reports nothing. */
 export const composingKey = (event: KeyboardEvent): Option.Option<never> => {
   if (event.isComposing) {
     event.stopPropagation();
   }
+
   return Option.none();
 };
 
-/** A press on a row keeps focus in the field (its default, moving focus, is prevented). It
- *  reports nothing: the click that follows picks the row. */
 export const rowPress = (event: MouseEvent): Option.Option<never> => {
-  if (event.target instanceof Element && event.target.closest(OPTION_SELECTOR) !== null) {
+  if (
+    event.target instanceof Element &&
+    event.target.closest(OPTION_SELECTOR) !== null
+  ) {
     event.preventDefault();
   }
+
   return Option.none();
 };
 
@@ -92,7 +90,7 @@ export const BindPaletteKeys = Mount.defineStream("BindPaletteKeys", {
           filterMapEvent: rowPress,
         }),
       ],
-      { concurrency: "unbounded" },
+      { concurrency: "unbounded" }
     ),
 });
 
@@ -100,40 +98,43 @@ type EarlyKeyMessage =
   | typeof Message.PressedEarlyArrowKey.Type
   | typeof Message.PressedEarlyEnter.Type;
 
-/** What a key pressed while the palette is open but before its field has focus does: ↑ ↓ and
- *  Enter, from anywhere outside the palette, are the palette's (their default prevented, and
- *  kept from the page's own bindings), so the keys pressed straight after the one that opened
- *  it are not lost to the page. A key inside the palette is its field's; a key an IME is
- *  composing, a modified key and a key someone already handled are left alone. */
-export const earlyKey = (
-  paletteId: string,
-  event: KeyboardEvent,
-): Option.Option<EarlyKeyMessage> => {
-  const isInside = Option.exists(
-    Option.fromNullishOr(document.getElementById(paletteId)),
-    (dialog) => event.target instanceof Node && dialog.contains(event.target),
+const isInsidePalette = (paletteId: string, event: KeyboardEvent): boolean =>
+  Option.exists(
+    Option.fromNullishOr(document.querySelector(`#${CSS.escape(paletteId)}`)),
+    (dialog) => event.target instanceof Node && dialog.contains(event.target)
   );
-  if (isInside || event.isComposing || event.defaultPrevented || !isPlain(event)) {
-    return Option.none();
-  }
 
-  const maybeMessage = Match.value(event.key).pipe(
+const earlyKeyMessageOf = (key: string): Option.Option<EarlyKeyMessage> =>
+  Match.value(key).pipe(
     Match.withReturnType<Option.Option<EarlyKeyMessage>>(),
-    Match.whenOr("ArrowDown", "ArrowUp", (key) =>
-      Option.some(Message.PressedEarlyArrowKey({ key })),
+    Match.whenOr("ArrowDown", "ArrowUp", (arrow) =>
+      Option.some(Message.PressedEarlyArrowKey({ key: arrow }))
     ),
     Match.when("Enter", () => Option.some(Message.PressedEarlyEnter())),
-    Match.orElse(() => Option.none()),
+    Match.orElse(() => Option.none())
   );
+
+export const earlyKey = (
+  paletteId: string,
+  event: KeyboardEvent
+): Option.Option<EarlyKeyMessage> => {
+  if (
+    isInsidePalette(paletteId, event) ||
+    isComposingModifiedOrHandled(event)
+  ) {
+    return Option.none();
+  }
+
+  const maybeMessage = earlyKeyMessageOf(event.key);
+
   if (Option.isSome(maybeMessage)) {
     event.preventDefault();
     event.stopPropagation();
   }
+
   return maybeMessage;
 };
 
-/** The keys `earlyKey` takes for the palette `paletteId`, on the window in the capture
- *  phase, before the page's own bindings. */
 export const earlyKeys = (paletteId: string): Stream.Stream<Message> =>
   Dom.streamFromEventFilterMap({
     target: () => window,

package/src/{commandPalette → command-palette}/match.ts

@@ -2,8 +2,6 @@ import { Array, HashSet, Option, Order, String, pipe } from "effect";
 
 import type { GlyphName } from "../glyph/glyphs.ts";
 
-// ROWS
-
 /** One row of the palette: a command, or a choice on a page. */
 export type Choice = Readonly<{
   id: string;
@@ -28,7 +26,7 @@ export type Choice = Readonly<{
 export type Page = Readonly<{
   /** The page's name, in the head after Back (`"Status"`, `"Move to"`). */
   title: string;
-  choices: ReadonlyArray<Choice>;
+  choices: readonly Choice[];
   /** The field's placeholder; `"type to narrow"` when not given. */
   find?: string;
   /** The choice in force now: tagged current, and not picked again. */
@@ -41,61 +39,62 @@ export type Page = Readonly<{
 
 /** One command, under its group's heading. With a `page` it opens that page in place instead
  *  of being selected. */
-export type Command = Omit<Choice, "level"> & Readonly<{ group: string; page?: Page }>;
-
-// MATCHING
+export type Command = Omit<Choice, "level"> &
+  Readonly<{ group: string; page?: Page }>;
 
 const isSubsequence = (needle: string, haystack: string): boolean =>
   Array.reduce(Array.fromIterable(haystack), 0, (found, character) =>
-    needle.charAt(found) === character ? found + 1 : found,
+    needle.charAt(found) === character ? found + 1 : found
   ) === needle.length;
 
-/** Whether the query finds a label: its letters in order, anywhere, ignoring case. */
 export const matches = (query: string, label: string): boolean => {
   const needle = pipe(query, String.trim, String.toLowerCase);
+
   return isSubsequence(needle, String.toLowerCase(label));
 };
 
 const isBlank = (query: string): boolean => String.isEmpty(String.trim(query));
 
-/** The commands the query finds, under their groups in the order the groups first appear,
- *  authored titles after the commands. With no query, authored titles wait. */
 export const findCommands = (
-  commands: ReadonlyArray<Command>,
-  query: string,
-): ReadonlyArray<Command> => {
+  commands: readonly Command[],
+  query: string
+): readonly Command[] => {
   const hits = isBlank(query)
     ? Array.filter(commands, (command) => command.isAuthored !== true)
     : Array.filter(commands, (command) => matches(query, command.label));
+
   const ordered = [
     ...Array.filter(hits, (command) => command.isAuthored !== true),
     ...Array.filter(hits, (command) => command.isAuthored === true),
   ];
+
   const groups = Array.dedupe(Array.map(ordered, ({ group }) => group));
+
   const groupIndex = (command: Command): number =>
     Option.getOrElse(
       Array.findFirstIndex(groups, (group) => group === command.group),
-      () => groups.length,
+      () => groups.length
     );
+
   return Array.sort(ordered, Order.mapInput(Order.Number, groupIndex));
 };
 
 /** The choices a page's query finds. */
-export const findChoices = (page: Page, query: string): ReadonlyArray<Choice> =>
+export const findChoices = (page: Page, query: string): readonly Choice[] =>
   isBlank(query)
     ? page.choices
     : Array.filter(page.choices, (choice) => matches(query, choice.label));
 
-type Walk = Readonly<{ chain: ReadonlyArray<Choice>; keptIds: HashSet.HashSet<string> }>;
+type Walk = Readonly<{
+  chain: readonly Choice[];
+  keptIds: HashSet.HashSet<string>;
+}>;
 
 const WALK_START: Walk = { chain: [], keptIds: HashSet.empty() };
 
-/** What a page shows for its query: the choices it finds; the rows, which are those choices
- *  each with the choices it sits under in the page's tree, in the page's order; and the rows
- *  kept only for the choices under them. */
 export type PageChoices = Readonly<{
-  rows: ReadonlyArray<Choice>;
-  found: ReadonlyArray<Choice>;
+  rows: readonly Choice[];
+  found: readonly Choice[];
   contextIds: HashSet.HashSet<string>;
 }>;
 
@@ -108,15 +107,28 @@ const unfiltered = (page: Page): PageChoices => ({
 const treeChoices = (page: Page, query: string): PageChoices => {
   const found = findChoices(page, query);
   const foundIds = HashSet.fromIterable(Array.map(found, ({ id }) => id));
-  const { keptIds } = Array.reduce(page.choices, WALK_START, ({ chain, keptIds }, choice): Walk => {
-    const nextChain = Array.append(Array.take(chain, (choice.level ?? 1) - 1), choice);
-    return {
-      chain: nextChain,
-      keptIds: HashSet.has(foundIds, choice.id)
-        ? HashSet.union(keptIds, HashSet.fromIterable(Array.map(nextChain, ({ id }) => id)))
-        : keptIds,
-    };
-  });
+
+  const { keptIds } = Array.reduce(
+    page.choices,
+    WALK_START,
+    ({ chain, keptIds: keptSoFar }, choice): Walk => {
+      const nextChain = Array.append(
+        Array.take(chain, (choice.level ?? 1) - 1),
+        choice
+      );
+
+      return {
+        chain: nextChain,
+        keptIds: HashSet.has(foundIds, choice.id)
+          ? HashSet.union(
+              keptSoFar,
+              HashSet.fromIterable(Array.map(nextChain, ({ id }) => id))
+            )
+          : keptSoFar,
+      };
+    }
+  );
+
   return {
     rows: Array.filter(page.choices, ({ id }) => HashSet.has(keptIds, id)),
     found,

package/src/{commandPalette → command-palette}/message.ts

@@ -3,49 +3,41 @@ import { defineMessageUnion } from "foldkit/message";
 
 import * as Dialog from "../dialog/dialog.ts";
 
-// NOTE: every Message the reader's typing, arrows, Backspace and clicks on rows send carries
-// the page the view was showing (`maybeShownPage`, none for the commands). A page whose
-// command left `commands` while it was open is shown as the commands, and update follows what
-// was shown.
-// An arrow and an Enter also carry the list their render showed (`shownList`; why, in the
-// palette's `Model`).
 const ShownPage = Schema.Option(Schema.String);
 
-/** A row as a render showed it: its id, whether it is held (disabled, or the page's current
- *  choice), and whether it opens a page. On a page every row is a choice. What a click on a
- *  row, or Enter on the cursor's, does follows from these. */
 export const ShownRow = Schema.Struct({
   id: Schema.String,
   isHeld: Schema.Boolean,
   hasPage: Schema.Boolean,
 });
+
 export type ShownRow = typeof ShownRow.Type;
 
-const shownList = {
-  rows: Schema.Array(ShownRow),
-  maybeShownCursor: Schema.Option(Schema.String),
+const RenderSnapshot = Schema.Struct({
   maybeShownPage: ShownPage,
   shownQuery: Schema.String,
-  shownShift: Schema.Number,
-};
+  shownShift: Schema.Finite,
+  rows: Schema.Array(ShownRow),
+  maybeShownCursor: Schema.Option(Schema.String),
+});
+
+export type RenderSnapshot = typeof RenderSnapshot.Type;
 
-/** The keys that move the palette's cursor. */
 export const ArrowKey = Schema.Literals(["ArrowUp", "ArrowDown"]);
+
 export type ArrowKey = typeof ArrowKey.Type;
 
 /** Union of all Messages a command palette can produce. */
 export const Message = defineMessageUnion({
   GotDialogMessage: { message: Dialog.Message },
   UpdatedQuery: { value: Schema.String, maybeShownPage: ShownPage },
-  PressedArrowKey: { key: ArrowKey, ...shownList },
+  PressedArrowKey: { key: ArrowKey, snapshot: RenderSnapshot },
   PressedEarlyArrowKey: { key: ArrowKey },
   CompletedReportPendingKeys: {
-    maybeShownPage: ShownPage,
-    shownQuery: Schema.String,
-    shownShift: Schema.Number,
+    renderGeneration: Schema.Int,
     maybeRow: Schema.Option(ShownRow),
   },
-  PressedEnter: shownList,
+  PressedEnter: { snapshot: RenderSnapshot },
   PressedEarlyEnter: {},
   PressedBackspace: { maybeShownPage: ShownPage },
   ClickedRow: { row: ShownRow, maybeShownPage: ShownPage },
@@ -53,4 +45,5 @@ export const Message = defineMessageUnion({
   CompletedScrollToCursor: {},
   CompletedFocus: {},
 });
+
 export type Message = typeof Message.Type;

package/src/{confirmDialog/confirmDialog.ts → confirm-dialog/confirm-dialog.ts}

@@ -11,15 +11,12 @@ import * as Dialog from "../dialog/dialog.ts";
 import { foldDialog } from "../dialog/fold.ts";
 import * as Outcome from "../outcome/outcome.ts";
 
-// MODEL
-
 /** Schema for a confirm dialog: the pixel-paper Dialog it opens in. */
 export const Model = Schema.Struct({
   dialog: Dialog.Model,
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages a confirm dialog can produce. */
 export const Message = defineMessageUnion({
@@ -27,9 +24,8 @@ export const Message = defineMessageUnion({
   ClickedConfirm: {},
   ClickedCancel: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a confirm dialog reports. `Confirmed`: the reader pressed the action;
  *  the dialog stays open until the parent calls `close`. `Cancelled`: cancel, Escape or a click
@@ -39,9 +35,8 @@ export const OutMessage = defineMessageUnion({
   Confirmed: {},
   Cancelled: {},
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a confirm dialog with `init`. */
 export type InitConfig = Readonly<{ id: string }>;
@@ -51,8 +46,6 @@ export const init = (config: InitConfig): Model => ({
   dialog: Dialog.init({ id: config.id }),
 });
 
-// UPDATE
-
 const toCancelled = Dialog.OutMessage.match<OutMessage>({
   Closed: () => OutMessage.Cancelled(),
 });
@@ -61,7 +54,8 @@ const dialogFold = foldDialog(Dialog, {
   read: (model: Model) => model.dialog,
   write: (model: Model, nextDialog: Dialog.Model): Model =>
     modifyFields(model, { dialog: () => nextDialog }),
-  toParentMessage: (message: Dialog.Message) => Message.GotDialogMessage({ message }),
+  toParentMessage: (message: Dialog.Message) =>
+    Message.GotDialogMessage({ message }),
   toParentOutMessage: toCancelled,
 });
 
@@ -70,26 +64,32 @@ const dialogFold = foldDialog(Dialog, {
 export const update = (
   model: Model,
   message: Message,
-  context: Dialog.UpdateContext = Dialog.FREE,
+  context: Dialog.UpdateContext = Dialog.FREE
 ) =>
-  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    GotDialogMessage: ({ message: dialogMessage }) =>
-      dialogFold.updateWith(context)(model, dialogMessage),
-    ClickedConfirm: () => ({ model, outMessage: OutMessage.Confirmed() }),
-    ClickedCancel: () =>
-      context.isCloseHeld
-        ? { model }
-        : pipe(dialogFold.close(model), Update.withOutMessage(OutMessage.Cancelled())),
-  });
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(
+    message,
+    {
+      GotDialogMessage: ({ message: dialogMessage }) =>
+        dialogFold.updateWith(context)(model, dialogMessage),
+      ClickedConfirm: () => ({ model, outMessage: OutMessage.Confirmed() }),
+      ClickedCancel: () =>
+        context.isCloseHeld
+          ? { model }
+          : pipe(
+              dialogFold.close(model),
+              Update.withOutMessage(OutMessage.Cancelled())
+            ),
+    }
+  );
 
 /** Opens the confirm dialog: focus starts on the action, or on cancel when it is `isDanger`. */
-export const open = (model: Model): Update.Return<Model, Message> => dialogFold.open(model);
+export const open = (model: Model): Update.Return<Model, Message> =>
+  dialogFold.open(model);
 
 /** Closes the confirm dialog without reporting `Cancelled`: call it once confirmed work has
  *  landed. */
-export const close = (model: Model): Update.Return<Model, Message> => dialogFold.close(model);
-
-// ACCESSORS
+export const close = (model: Model): Update.Return<Model, Message> =>
+  dialogFold.close(model);
 
 /** The confirm dialog's id, unique in the document. */
 export const id = (model: Model): string => Dialog.id(model.dialog);
@@ -97,8 +97,6 @@ export const id = (model: Model): string => Dialog.id(model.dialog);
 /** Whether the confirm dialog is open. */
 export const isOpen = (model: Model): boolean => Dialog.isOpen(model.dialog);
 
-// VIEW
-
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   /** The title bar: the action's name (`"Delete"`). */
@@ -134,9 +132,14 @@ export type ViewInputs = Readonly<{
 const cardView = (
   viewInputs: ViewInputs,
   render: Dialog.RenderInfo,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
-  const { isDanger = false, isBusy = false, isDisabled = false, toDetailView } = viewInputs;
+  const {
+    isDanger = false,
+    isBusy = false,
+    isDisabled = false,
+    toDetailView,
+  } = viewInputs;
 
   const commit = Button.view(
     {
@@ -148,8 +151,9 @@ const cardView = (
       onClick: Message.ClickedConfirm(),
       attributes: isDanger ? [] : render.initialFocus,
     },
-    h,
+    h
   );
+
   const cancel = Button.view(
     {
       label: "cancel",
@@ -158,7 +162,7 @@ const cardView = (
       onClick: Message.ClickedCancel(),
       attributes: isDanger ? render.initialFocus : [],
     },
-    h,
+    h
   );
 
   return Card.view(
@@ -177,11 +181,11 @@ const cardView = (
             ...(toDetailView !== undefined && { detail: toDetailView() }),
             bodyAttributes: render.description,
           },
-          h,
+          h
         ),
       ],
     },
-    h,
+    h
   );
 };
 
@@ -198,17 +202,18 @@ const cardView = (
  * in `update`'s context), `close` once it has landed, and on failure keep it open with the
  * error in `toDetailView`.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html =>
-  h.submodel({
-    slotId: id(model),
-    model: model.dialog,
-    view: Dialog.view,
-    viewInputs: {
-      isAlert: viewInputs.isDanger ?? false,
-      hasDescription: true,
-      toLiveRegionView: viewInputs.toLiveRegionView,
-      toView: (render) => cardView(viewInputs, render, h),
-    },
-    toParentMessage: (message) => Message.GotDialogMessage({ message }),
-  }),
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html =>
+    h.submodel({
+      slotId: id(model),
+      model: model.dialog,
+      view: Dialog.view,
+      viewInputs: {
+        isAlert: viewInputs.isDanger ?? false,
+        hasDescription: true,
+        toLiveRegionView: viewInputs.toLiveRegionView,
+        toView: (render) => cardView(viewInputs, render, h),
+      },
+      toParentMessage: (message) => Message.GotDialogMessage({ message }),
+    })
 );

package/src/{confirmDialog → confirm-dialog}/index.ts

@@ -9,5 +9,6 @@ export {
   open,
   update,
   view,
-} from "./confirmDialog.ts";
-export type { InitConfig, ViewInputs } from "./confirmDialog.ts";
+} from "./confirm-dialog.ts";
+
+export type { InitConfig, ViewInputs } from "./confirm-dialog.ts";