@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/dialog/dialog.ts

@@ -1,7 +1,9 @@
 import { Dialog as UiDialog } from "@foldkit/ui";
 import { Array, Match, Option, Schema, pipe } from "effect";
+import { constUndefined } from "effect/Function";
 import * as Dom from "foldkit/dom";
-import { type ChildAttribute, type Html, childAttributes } from "foldkit/html";
+import { childAttributes } from "foldkit/html";
+import type { ChildAttribute, Html } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
 import { modifyFields } from "foldkit/struct";
@@ -11,23 +13,21 @@ import type * as Update from "foldkit/update";
 import { isPlain } from "../keys/keys.ts";
 import { foldDialog } from "./fold.ts";
 
-// MODEL
-
 /** Schema for a pixel-paper dialog: the `@foldkit/ui` Dialog it is built on. */
 export const Model = Schema.Struct({
   dialog: UiDialog.Model,
 });
+
 export type Model = typeof Model.Type;
 
-/** Which way h, l and the side arrows move focus in a dialog's action bar. */
 const ActionDirection = Schema.Literals(["Previous", "Next"]);
+
 type ActionDirection = typeof ActionDirection.Type;
 
 /** Where the card hangs: `Center`, or `Top`, 18% down, for a command palette. */
 export const Placement = Schema.Literals(["Center", "Top"]);
-export type Placement = typeof Placement.Type;
 
-// MESSAGE
+export type Placement = typeof Placement.Type;
 
 /** Union of all Messages a dialog can produce. `PressedActionKey` is a key in the action bar
  *  that moved focus there (the Mount already moved it); nothing in the Model follows it. */
@@ -35,18 +35,16 @@ export const Message = defineMessageUnion({
   GotDialogMessage: { message: UiDialog.Message },
   PressedActionKey: { direction: ActionDirection },
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a dialog reports to its parent: the reader closed it (Escape, a click
  *  on the veil, a close button). `open` and `close`, which the parent calls, report nothing. */
 export const OutMessage = defineMessageUnion({
   Closed: {},
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a dialog with `init`. The `id` must be unique in the document. */
 export type InitConfig = Readonly<{ id: string }>;
@@ -56,18 +54,14 @@ export const init = (config: InitConfig): Model => ({
   dialog: UiDialog.init({ id: config.id }),
 });
 
-// ACCESSORS
-
 /** The dialog's id, unique in the document. */
 export const id = (model: Model): string => model.dialog.id;
 
 /** Whether the dialog is open. */
 export const isOpen = (model: Model): boolean => model.dialog.isOpen;
 
-// UPDATE
-
 const toOutMessage = UiDialog.OutMessage.match<OutMessage | undefined>({
-  Opened: () => undefined,
+  Opened: constUndefined,
   Closed: () => OutMessage.Closed(),
 });
 
@@ -75,7 +69,8 @@ const dialogFold = foldDialog(UiDialog, {
   read: (model: Model) => model.dialog,
   write: (model: Model, nextDialog: UiDialog.Model) =>
     modifyFields(model, { dialog: () => nextDialog }),
-  toParentMessage: (message: UiDialog.Message) => Message.GotDialogMessage({ message }),
+  toParentMessage: (message: UiDialog.Message) =>
+    Message.GotDialogMessage({ message }),
   toParentOutMessage: toOutMessage,
 });
 
@@ -89,42 +84,71 @@ export type UpdateContext = Readonly<{
   isCloseHeld: boolean;
 }>;
 
-/** The context of a dialog whose close is not held, the default. */
 export const FREE: UpdateContext = { isCloseHeld: false };
 
-// NOTE: @foldkit/ui gap: Dialog has no way to hold a close. Escape, a press on the veil and a
-// control given the `closeButton` group all send `RequestedClose`, so a held dialog reads it
-// by its tag and leaves it out.
-const isHeldClose = (context: UpdateContext, message: UiDialog.Message): boolean =>
-  context.isCloseHeld && message._tag === "RequestedClose";
+const isHeldClose = (
+  context: UpdateContext,
+  message: UiDialog.Message
+): boolean => context.isCloseHeld && message._tag === "RequestedClose";
 
 /** Processes a dialog Message and returns the next Model, Commands and OutMessage. */
-export const update = (model: Model, message: Message, context: UpdateContext = FREE) =>
-  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    GotDialogMessage: ({ message: dialogMessage }) =>
-      isHeldClose(context, dialogMessage) ? { model } : dialogFold.update(model, dialogMessage),
-    PressedActionKey: () => ({ model }),
-  });
+export const update = (
+  model: Model,
+  message: Message,
+  context: UpdateContext = FREE
+) =>
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(
+    message,
+    {
+      GotDialogMessage: ({ message: dialogMessage }) =>
+        isHeldClose(context, dialogMessage)
+          ? { model }
+          : dialogFold.update(model, dialogMessage),
+      PressedActionKey: () => ({ model }),
+    }
+  );
 
 /** Opens the dialog: focus moves to the element given the `initialFocus` group, else to the
  *  first control, and returns to where it was when the dialog closes. */
-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 dialog without reporting `Closed`. */
-export const close = (model: Model): Update.Return<Model, Message> => dialogFold.close(model);
-
-// ACTION BAR KEYS
+export const close = (model: Model): Update.Return<Model, Message> =>
+  dialogFold.close(model);
 
 const ACTION_BAR_ATTRIBUTE = "data-pixel-paper-action-bar";
 const ACTION_SELECTOR = "button:not(:disabled), a[href]";
 
-const ownedActions = (bar: Element): ReadonlyArray<HTMLElement> =>
+const isInBarItself = (bar: Element, action: HTMLElement): boolean =>
+  action.closest(`[${ACTION_BAR_ATTRIBUTE}]`) === bar;
+
+const isInBarsDialog = (bar: Element, action: HTMLElement): boolean =>
+  action.closest("dialog") === bar.closest("dialog");
+
+const isOutsidePopover = (action: HTMLElement): boolean =>
+  action.closest("[popover]") === null;
+
+const ownedActions = (bar: Element): readonly HTMLElement[] =>
   Array.filter(
     Array.fromIterable(bar.querySelectorAll<HTMLElement>(ACTION_SELECTOR)),
     (action) =>
-      action.closest(`[${ACTION_BAR_ATTRIBUTE}]`) === bar &&
-      action.closest("dialog") === bar.closest("dialog") &&
-      action.closest("[popover]") === null,
+      isInBarItself(bar, action) &&
+      isInBarsDialog(bar, action) &&
+      isOutsidePopover(action)
+  );
+
+const isUnhandledPlainKey = (event: KeyboardEvent): boolean =>
+  !event.isComposing && !event.defaultPrevented && isPlain(event);
+
+const actionBeside = (
+  actions: readonly HTMLElement[],
+  target: EventTarget | null,
+  direction: ActionDirection
+): Option.Option<HTMLElement> =>
+  Option.flatMap(
+    Array.findFirstIndex(actions, (action) => action === target),
+    (index) => Array.get(actions, index + (direction === "Previous" ? -1 : 1))
   );
 
 const toActionDirection = (key: string): Option.Option<ActionDirection> =>
@@ -132,37 +156,30 @@ const toActionDirection = (key: string): Option.Option<ActionDirection> =>
     Match.withReturnType<Option.Option<ActionDirection>>(),
     Match.whenOr("h", "ArrowLeft", () => Option.some("Previous")),
     Match.whenOr("l", "ArrowRight", () => Option.some("Next")),
-    Match.orElse(() => Option.none()),
+    Match.orElse(() => Option.none())
   );
 
-/** Moves focus for one keydown in an action bar, and says which way it moved. It moves only
- *  when the key's target is one of the bar's own actions and there is an action that way:
- *  a key typed in a field, a menu's item or a nested dialog inside the bar, a key an IME is
- *  composing, a key someone already handled and a key at the end of the bar are all left
- *  alone, default and all. A disabled action is passed over; an `aria-disabled` one is a
- *  stop, as it is for Tab. */
 export const moveActionFocus = (
   bar: Element,
-  event: KeyboardEvent,
+  event: KeyboardEvent
 ): Option.Option<ActionDirection> => {
-  if (event.isComposing || event.defaultPrevented || !isPlain(event)) {
+  if (!isUnhandledPlainKey(event)) {
     return Option.none();
   }
 
   return pipe(
     toActionDirection(event.key),
-    Option.flatMap((direction) => {
-      const actions = ownedActions(bar);
-      return pipe(
-        Array.findFirstIndex(actions, (action) => action === event.target),
-        Option.flatMap((index) => Array.get(actions, index + (direction === "Previous" ? -1 : 1))),
-        Option.map((next) => {
+    Option.flatMap((direction) =>
+      Option.map(
+        actionBeside(ownedActions(bar), event.target, direction),
+        (next) => {
           event.preventDefault();
           next.focus();
+
           return direction;
-        }),
-      );
-    }),
+        }
+      )
+    )
   );
 };
 
@@ -177,7 +194,7 @@ export const BindActionKeys = Mount.defineStream("BindActionKeys", {
       type: "keydown",
       filterMapEvent: (event) =>
         Option.map(moveActionFocus(element, event), (direction) =>
-          Message.PressedActionKey({ direction }),
+          Message.PressedActionKey({ direction })
         ),
     }),
 });
@@ -187,28 +204,24 @@ export const BindActionKeys = Mount.defineStream("BindActionKeys", {
  *  `Scene.Mount.resolveAll(...Dialog.sceneMounts)`. It serves every dialog built on this one
  *  (ConfirmDialog, KeyHelp, CommandPalette), since a Scene lifts the Messages for it. */
 export const sceneMounts = [
-  // NOTE: @foldkit/ui gap: its Dialog ships no Scene resolution for its resources Mount, so
-  // this test helper builds the child Message the Mount would report
   // oxlint-disable-next-line foldkit/no-child-message-construction-in-root
   [UiDialog.AcquireResources, UiDialog.Message.SucceededAcquireResources()],
   [BindActionKeys, Message.PressedActionKey({ direction: "Next" })],
 ] as const;
 
-// VIEW
-
 /** Attribute groups a dialog hands its content. Spread each onto the element it names; a Card
  *  takes `title` and `actionBar` directly. None of them carries a class. */
 export type RenderInfo = Readonly<{
   /** The heading that names the dialog. Leave it unspread when the dialog has a `label`. */
-  title: ReadonlyArray<ChildAttribute>;
+  title: readonly ChildAttribute[];
   /** The text that says what the dialog asks; set `hasDescription` when it is rendered. */
-  description: ReadonlyArray<ChildAttribute>;
+  description: readonly ChildAttribute[];
   /** The control that takes focus when the dialog opens. */
-  initialFocus: ReadonlyArray<ChildAttribute>;
+  initialFocus: readonly ChildAttribute[];
   /** A control that closes the dialog: a close glyph, a cancel button. */
-  closeButton: ReadonlyArray<ChildAttribute>;
+  closeButton: readonly ChildAttribute[];
   /** The card's action bar: h or ←, and l or →, move focus between its actions. */
-  actionBar: ReadonlyArray<ChildAttribute>;
+  actionBar: readonly ChildAttribute[];
 }>;
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
@@ -238,52 +251,61 @@ export type ViewInputs = Readonly<{
  * card), and returns focus on close. The content comes from `toView`, usually one Card given
  * the `title` and `actionBar` groups.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const {
-    toView,
-    label,
-    isAlert = false,
-    placement = "Center",
-    hasDescription = false,
-    toLiveRegionView,
-  } = viewInputs;
-
-  const actionBar = childAttributes([
-    h.Attribute(ACTION_BAR_ATTRIBUTE, ""),
-    h.OnMount(BindActionKeys()),
-  ]);
-
-  const veilView = (render: UiDialog.RenderInfo): Html =>
-    h.dialog(
-      [...render.dialog, ...(isAlert ? [h.Role("alertdialog")] : []), h.Class("veil")],
-      render.isVisible
-        ? [
-            h.div([...render.backdrop, h.Class("veil-backdrop")]),
-            ...(label === undefined
-              ? []
-              : [h.span([...render.title, h.Class("sr-only")], [label])]),
-            h.div(
-              [...render.panel, h.Class(placement === "Top" ? "veil-pad top" : "veil-pad")],
-              [
-                toView({
-                  title: render.title,
-                  description: render.description,
-                  initialFocus: render.initialFocus,
-                  closeButton: render.closeButton,
-                  actionBar,
-                }),
-              ],
-            ),
-            ...(toLiveRegionView === undefined ? [] : [toLiveRegionView()]),
-          ]
-        : [],
-    );
-
-  return h.submodel({
-    slotId: id(model),
-    model: model.dialog,
-    view: UiDialog.view,
-    viewInputs: { hasDescription, toView: veilView },
-    toParentMessage: (message) => Message.GotDialogMessage({ message }),
-  });
-});
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const {
+      toView,
+      label,
+      isAlert = false,
+      placement = "Center",
+      hasDescription = false,
+      toLiveRegionView,
+    } = viewInputs;
+
+    const actionBar = childAttributes([
+      h.Attribute(ACTION_BAR_ATTRIBUTE, ""),
+      h.OnMount(BindActionKeys()),
+    ]);
+
+    const veilView = (render: UiDialog.RenderInfo): Html =>
+      h.dialog(
+        [
+          ...render.dialog,
+          ...(isAlert ? [h.Role("alertdialog")] : []),
+          h.Class("veil"),
+        ],
+        render.isVisible
+          ? [
+              h.div([...render.backdrop, h.Class("veil-backdrop")]),
+              ...(label === undefined
+                ? []
+                : [h.span([...render.title, h.Class("sr-only")], [label])]),
+              h.div(
+                [
+                  ...render.panel,
+                  h.Class(placement === "Top" ? "veil-pad top" : "veil-pad"),
+                ],
+                [
+                  toView({
+                    title: render.title,
+                    description: render.description,
+                    initialFocus: render.initialFocus,
+                    closeButton: render.closeButton,
+                    actionBar,
+                  }),
+                ]
+              ),
+              ...(toLiveRegionView === undefined ? [] : [toLiveRegionView()]),
+            ]
+          : []
+      );
+
+    return h.submodel({
+      slotId: id(model),
+      model: model.dialog,
+      view: UiDialog.view,
+      viewInputs: { hasDescription, toView: veilView },
+      toParentMessage: (message) => Message.GotDialogMessage({ message }),
+    });
+  }
+);

package/src/dialog/fold.ts

@@ -3,28 +3,27 @@ import * as Update from "foldkit/update";
 
 import type { UpdateContext } from "./dialog.ts";
 
-// FOLD
-
-type ChildReturn<ChildModel, ChildMessage, ChildOutMessage> = Update.ReturnWithOutMessage<
-  ChildModel,
-  ChildMessage,
-  ChildOutMessage
->;
+type ChildReturn<ChildModel, ChildMessage, ChildOutMessage> =
+  Update.ReturnWithOutMessage<ChildModel, ChildMessage, ChildOutMessage>;
 
 /** A dialog a parent holds: its update, and the steps that open and close it (`@foldkit/ui`'s
  *  Dialog, or pixel-paper's). */
-type DialogChild<ChildModel, ChildMessage, ChildOutMessage> = Readonly<{
+export type DialogChild<ChildModel, ChildMessage, ChildOutMessage> = Readonly<{
   update: (
     model: ChildModel,
     message: ChildMessage,
-    context: UpdateContext,
+    context: UpdateContext
+  ) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
+  open: (
+    model: ChildModel
+  ) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
+  close: (
+    model: ChildModel
   ) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
-  open: (model: ChildModel) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
-  close: (model: ChildModel) => ChildReturn<ChildModel, ChildMessage, ChildOutMessage>;
 }>;
 
 /** Where the parent keeps its dialog, and what the dialog's Messages and OutMessages become. */
-type DialogFoldConfig<
+export type DialogFoldConfig<
   ParentModel,
   ParentMessage,
   ParentOutMessage,
@@ -38,7 +37,9 @@ type DialogFoldConfig<
   /** The parent's OutMessage for one the dialog reports from its own update (Escape, the
    *  veil, a close button). Without it the dialog's OutMessages report nothing: a parent
    *  that reads `isOpen` when it needs to. */
-  toParentOutMessage?: (outMessage: ChildOutMessage) => ParentOutMessage | undefined;
+  toParentOutMessage?: (
+    outMessage: ChildOutMessage
+  ) => ParentOutMessage | undefined;
   /** Whether the dialog's ways out are held, read from the parent's own state as each
    *  Message arrives (`(model) => model.isSaving`). Free when not given. See
    *  `Dialog.UpdateContext`. */
@@ -46,19 +47,32 @@ type DialogFoldConfig<
 }>;
 
 /** The dialog folded into its parent: a dialog Message, and opening and closing it. */
-type DialogFold<ParentModel, ParentMessage, ParentOutMessage, ChildMessage> = Readonly<{
+export type DialogFold<
+  ParentModel,
+  ParentMessage,
+  ParentOutMessage,
+  ChildMessage,
+> = Readonly<{
   update: (
     model: ParentModel,
-    message: ChildMessage,
-  ) => Update.ReturnWithOutMessage<ParentModel, ParentMessage, ParentOutMessage>;
+    message: ChildMessage
+  ) => Update.ReturnWithOutMessage<
+    ParentModel,
+    ParentMessage,
+    ParentOutMessage
+  >;
   /** The update a parent that is itself a dialog (ConfirmDialog) runs with the hold its own
    *  parent gave it. */
   updateWith: (
-    context: UpdateContext,
+    context: UpdateContext
   ) => (
     model: ParentModel,
-    message: ChildMessage,
-  ) => Update.ReturnWithOutMessage<ParentModel, ParentMessage, ParentOutMessage>;
+    message: ChildMessage
+  ) => Update.ReturnWithOutMessage<
+    ParentModel,
+    ParentMessage,
+    ParentOutMessage
+  >;
   open: (model: ParentModel) => Update.Return<ParentModel, ParentMessage>;
   close: (model: ParentModel) => Update.Return<ParentModel, ParentMessage>;
 }>;
@@ -102,30 +116,35 @@ export const foldDialog = <
     ChildModel,
     ChildMessage,
     ChildOutMessage
-  >,
+  >
 ): DialogFold<ParentModel, ParentMessage, ParentOutMessage, ChildMessage> => {
   const lift = {
     read: (model: ParentModel) => Option.some(config.read(model)),
     write: config.write,
     toParentMessage: config.toParentMessage,
   };
-  // The child's steps can report (`@foldkit/ui`'s Dialog's `open` is its update on
-  // `RequestedOpen`, which reports `Opened`), and so can its update, so each fold needs a
-  // step for an OutMessage. This one keeps the parent's Model: a step reports nothing.
+
   const foldOutMessage = () => (model: ParentModel) => ({ model });
   const { toParentOutMessage, isCloseHeld = () => false } = config;
+
   const updateWith = (context: UpdateContext) => {
     const childUpdate = (model: ChildModel, message: ChildMessage) =>
       child.update(model, message, context);
+
     return toParentOutMessage === undefined
       ? Update.foldChild({ update: childUpdate, ...lift, foldOutMessage })
       : Update.foldChild({ update: childUpdate, ...lift, toParentOutMessage });
   };
 
   return {
-    update: (model, message) => updateWith({ isCloseHeld: isCloseHeld(model) })(model, message),
+    update: (model, message) =>
+      updateWith({ isCloseHeld: isCloseHeld(model) })(model, message),
     updateWith,
     open: Update.foldChildStep({ update: child.open, ...lift, foldOutMessage }),
-    close: Update.foldChildStep({ update: child.close, ...lift, foldOutMessage }),
+    close: Update.foldChildStep({
+      update: child.close,
+      ...lift,
+      foldOutMessage,
+    }),
   };
 };

package/src/dialog/index.ts

@@ -12,5 +12,13 @@ export {
   update,
   view,
 } from "./dialog.ts";
-export type { InitConfig, Placement, RenderInfo, UpdateContext, ViewInputs } from "./dialog.ts";
+
+export type {
+  InitConfig,
+  Placement,
+  RenderInfo,
+  UpdateContext,
+  ViewInputs,
+} from "./dialog.ts";
+
 export { foldDialog } from "./fold.ts";

package/src/disclosure/disclosure.ts

@@ -3,8 +3,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 
 import * as Glyph from "../glyph/glyph.ts";
 
-// VIEW
-
 /** Configuration for rendering a disclosure with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Unique in the document; the button's and the body's ids derive from it. */
@@ -30,7 +28,10 @@ export type ViewConfig<Message> = Readonly<{
  * rule guide. Open, the caret turns a quarter in one step. For what a reader opens on purpose
  * (grants to edit, details, a danger zone), never to hide the one thing the screen is for.
  */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { id, label, meta, isOpen, onToggle, body } = config;
 
   return UiDisclosure.view(
@@ -47,13 +48,18 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
               [
                 Glyph.view({ name: "caret-right" }, h),
                 h.span([h.Class("disclosure-label")], [label]),
-                ...(meta === undefined ? [] : [" ", h.span([h.Class("meta")], [meta])]),
-              ],
+                ...(meta === undefined
+                  ? []
+                  : [" ", h.span([h.Class("meta")], [meta])]),
+              ]
+            ),
+            h.div(
+              [...groups.panel, h.Hidden(!isOpen), h.Class("disclosure-body")],
+              body
             ),
-            h.div([...groups.panel, h.Hidden(!isOpen), h.Class("disclosure-body")], body),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/disclosure/index.ts

@@ -1,2 +1,3 @@
 export { view } from "./disclosure.ts";
+
 export type { ViewConfig } from "./disclosure.ts";

package/src/dom/html-element.ts

@@ -0,0 +1,10 @@
+import { Option } from "effect";
+
+export const htmlElement = (
+  selector: string,
+  root: ParentNode = document
+): Option.Option<HTMLElement> => {
+  const element = root.querySelector(selector);
+
+  return element instanceof HTMLElement ? Option.some(element) : Option.none();
+};