@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{contextMenu/contextMenu.ts → context-menu/context-menu.ts}

@@ -9,11 +9,14 @@ import * as Update from "foldkit/update";
 
 import { Focus } from "../focus/focus.ts";
 import type { Item } from "../menu/item.ts";
-import { ChoiceKind, Point, placeAt, rowsView, slipStream } from "../menu/slip.ts";
+import {
+  ChoiceKind,
+  Point,
+  placeAt,
+  rowsView,
+  slipStream,
+} from "../menu/slip.ts";
 
-// MODEL
-
-/** An open context slip: where it opened, which target asked, and where focus goes back. */
 const Opening = Schema.Struct({
   point: Point,
   targetId: Schema.String,
@@ -26,9 +29,8 @@ export const Model = Schema.Struct({
   id: Schema.String,
   maybeOpening: Schema.Option(Opening),
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages a context menu can produce. */
 export const Message = defineMessageUnion({
@@ -45,9 +47,8 @@ export const Message = defineMessageUnion({
   CompletedPlaceSlip: {},
   CompletedFocus: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a context menu reports, each with the target it opened for.
  *  `Selected`: an action, a radio item or a link was chosen and the slip has closed.
@@ -56,9 +57,8 @@ export const OutMessage = defineMessageUnion({
   Selected: { id: Schema.String, targetId: Schema.String },
   Toggled: { id: Schema.String, targetId: Schema.String },
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a context menu with `init`. The `id` must be unique in the
  *  document. */
@@ -70,8 +70,6 @@ export const init = (config: InitConfig): Model => ({
   maybeOpening: Option.none(),
 });
 
-// ACCESSORS
-
 /** The context menu's id, unique in the document. */
 export const id = (model: Model): string => model.id;
 
@@ -79,23 +77,20 @@ export const id = (model: Model): string => model.id;
 export const targetId = (model: Model): Option.Option<string> =>
   Option.map(model.maybeOpening, (opening) => opening.targetId);
 
-/** The slip's DOM id (`role="menu"`). */
 const slipId = (model: Model): string => `${model.id}-slip`;
 
-// UPDATE
-
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 
-const closed = (model: Model): Model => modifyFields(model, { maybeOpening: () => Option.none() });
+const closed = (model: Model): Model =>
+  modifyFields(model, { maybeOpening: () => Option.none() });
 
-// focus goes back where it was when the slip opened (the element with that id)
 const closedWithFocus = (model: Model): Update.Return<Model, Message> => ({
   model: closed(model),
   commands: pipe(
     model.maybeOpening,
     Option.flatMap((opening) => opening.maybeReturnFocusId),
     Option.map((returnId) => Focus({ id: returnId })),
-    Array.fromOption,
+    Array.fromOption
   ),
 });
 
@@ -104,10 +99,15 @@ const chosen = (model: Model, itemId: string, kind: ChoiceKind): UpdateReturn =>
     onNone: () => ({ model }),
     onSome: (target) =>
       kind === "Check"
-        ? { model, outMessage: OutMessage.Toggled({ id: itemId, targetId: target }) }
+        ? {
+            model,
+            outMessage: OutMessage.Toggled({ id: itemId, targetId: target }),
+          }
         : pipe(
             closedWithFocus(model),
-            Update.withOutMessage(OutMessage.Selected({ id: itemId, targetId: target })),
+            Update.withOutMessage(
+              OutMessage.Selected({ id: itemId, targetId: target })
+            )
           ),
   });
 
@@ -116,7 +116,8 @@ export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
     RequestedMenu: ({ point, targetId: target, maybeReturnFocusId }) => ({
       model: modifyFields(model, {
-        maybeOpening: () => Option.some({ point, targetId: target, maybeReturnFocusId }),
+        maybeOpening: () =>
+          Option.some({ point, targetId: target, maybeReturnFocusId }),
       }),
     }),
     SelectedItem: ({ id: itemId, kind }) => chosen(model, itemId, kind),
@@ -127,7 +128,9 @@ export const update = (model: Model, message: Message) =>
       Option.exists(
         model.maybeOpening,
         (opening) =>
-          opening.targetId === target && opening.point.x === point.x && opening.point.y === point.y,
+          opening.targetId === target &&
+          opening.point.x === point.x &&
+          opening.point.y === point.y
       )
         ? { model: closed(model) }
         : { model },
@@ -135,40 +138,40 @@ export const update = (model: Model, message: Message) =>
     CompletedFocus: () => ({ model }),
   });
 
-// TARGET
-
 const isFromKeyboard = (event: MouseEvent): boolean => event.button !== 2;
 
 const pointOf = (event: MouseEvent, element: Element): Point => {
   if (isFromKeyboard(event)) {
     const rect = element.getBoundingClientRect();
+
     return { x: rect.left, y: rect.bottom };
   }
+
   return { x: event.clientX, y: event.clientY };
 };
 
 const activeId = (): Option.Option<string> =>
   Option.filter(
-    Option.map(Option.fromNullishOr(document.activeElement), (element) => element.id),
-    (elementId) => elementId !== "",
+    Option.map(
+      Option.fromNullishOr(document.activeElement),
+      (element) => element.id
+    ),
+    (elementId) => elementId !== ""
   );
 
-/** What one `contextmenu` event on the target asks for (see `OpenOnContextMenu`): the slip
- *  at the pointer, or under the target when the keyboard asked, noting the focused element.
- *  An event someone already handled is left alone. */
 export const menuRequest = (
   element: Element,
-  targetId: string,
-  event: MouseEvent,
+  requestingId: string,
+  event: MouseEvent
 ): Option.Option<typeof Message.RequestedMenu.Type> =>
   event.defaultPrevented
     ? Option.none()
     : Option.some(
         Message.RequestedMenu({
           point: pointOf(event, element),
-          targetId,
+          targetId: requestingId,
           maybeReturnFocusId: activeId(),
-        }),
+        })
       );
 
 /** Listens on a target for the context menu (a right click, the context menu key, Shift+F10)
@@ -200,10 +203,13 @@ export type TargetConfig<ParentMessage> = Readonly<{
  *  this slip for it. Give the focusable target an id, so focus returns to it. */
 export const target = <ParentMessage>(
   config: TargetConfig<ParentMessage>,
-  h: HtmlBuilder<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>
 ): Attribute<ParentMessage> =>
   h.OnMount(
-    Mount.mapMessage(OpenOnContextMenu({ targetId: config.targetId }), config.toParentMessage),
+    Mount.mapMessage(
+      OpenOnContextMenu({ targetId: config.targetId }),
+      config.toParentMessage
+    )
   );
 
 type SlipMessage =
@@ -236,14 +242,12 @@ export const BindPointSlip = Mount.defineStream("BindPointSlip", {
     }),
 });
 
-// VIEW
-
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   /** Names the menu for screen readers (`"Item actions"`). */
   label: string;
   /** The same items as the target's visible Menu; read the open target with `targetId`. */
-  items: ReadonlyArray<Item>;
+  items: readonly Item[];
 }>;
 
 /**
@@ -254,36 +258,33 @@ export type ViewInputs = Readonly<{
  * opens), and spread `target` on each thing it serves. Escape, Tab or a choice put focus back
  * where it was; a slip that leaves the page while open closes.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { label, items } = viewInputs;
-
-  return Option.match(model.maybeOpening, {
-    onNone: () => h.empty,
-    onSome: ({ point, targetId: target }) =>
-      h.keyed("div")(
-        `${target}@${point.x},${point.y}`,
-        [
-          h.Id(slipId(model)),
-          // NOTE: @foldkit/ui gap: Menu opens only under its button, never at a point, and
-          // its rows take no role or attributes of their own (see menu/menu.ts), so this
-          // slip is a hand-built ARIA menu.
-          h.Role("menu"),
-          h.AriaLabel(label),
-          h.OnMount(BindPointSlip({ point })),
-          // NOTE: the slip's Mount ends after the patch that removes it, too late to report,
-          // so a slip that leaves the page while open says so here. A slip opened anew (another
-          // target, another point) replaces it, so the Message names the opening it was for.
-          h.OnUnmount(Message.UnmountedSlip({ targetId: target, point })),
-          h.Class("menu at-point"),
-        ],
-        rowsView(
-          {
-            slipId: slipId(model),
-            items,
-            toChoose: (itemId, kind) => Message.SelectedItem({ id: itemId, kind }),
-          },
-          h,
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { label, items } = viewInputs;
+
+    return Option.match(model.maybeOpening, {
+      onNone: () => h.empty,
+      onSome: ({ point, targetId: openedFor }) =>
+        h.keyed("div")(
+          `${openedFor}@${point.x},${point.y}`,
+          [
+            h.Id(slipId(model)),
+            h.Role("menu"),
+            h.AriaLabel(label),
+            h.OnMount(BindPointSlip({ point })),
+            h.OnUnmount(Message.UnmountedSlip({ targetId: openedFor, point })),
+            h.Class("menu at-point"),
+          ],
+          rowsView(
+            {
+              slipId: slipId(model),
+              items,
+              toChoose: (itemId, kind) =>
+                Message.SelectedItem({ id: itemId, kind }),
+            },
+            h
+          )
         ),
-      ),
-  });
-});
+    });
+  }
+);

package/src/{contextMenu → context-menu}/index.ts

@@ -10,6 +10,8 @@ export {
   targetId,
   update,
   view,
-} from "./contextMenu.ts";
-export type { InitConfig, TargetConfig, ViewInputs } from "./contextMenu.ts";
+} from "./context-menu.ts";
+
+export type { InitConfig, TargetConfig, ViewInputs } from "./context-menu.ts";
+
 export { Focus } from "../focus/focus.ts";

package/src/{copyButton/copyButton.ts → copy-button/copy-button.ts}

@@ -10,17 +10,14 @@ import type * as Update from "foldkit/update";
 
 import * as Announcer from "../announcer/announcer.ts";
 import * as Button from "../button/button.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
 
-// MODEL
-
-/** Where a copy is: nothing yet, writing to the clipboard, or just copied (the word or the
- *  check shows for a beat). A click counts only from `Idle`, so one beat ends at a time. */
 export const CopyState = defineTaggedUnion({
   Idle: {},
   Copying: {},
   Copied: {},
 });
+
 export type CopyState = typeof CopyState.Type;
 
 /** Schema for a copy button: whether it just copied. */
@@ -28,9 +25,8 @@ export const Model = Schema.Struct({
   id: Schema.String,
   state: CopyState,
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages a copy button can produce. */
 export const Message = defineMessageUnion({
@@ -40,9 +36,8 @@ export const Message = defineMessageUnion({
   CompletedWaitBeforeResettingWord: {},
   CompletedAnnounceCopy: {},
 });
-export type Message = typeof Message.Type;
 
-// INIT
+export type Message = typeof Message.Type;
 
 /** Configuration for creating a copy button with `init`. The `id` is the button's, unique in
  *  the document. */
@@ -54,17 +49,13 @@ export const init = (config: InitConfig): Model => ({
   state: CopyState.Idle(),
 });
 
-// ACCESSORS
-
 /** The button's id, unique in the document. */
 export const id = (model: Model): string => model.id;
 
 /** Whether the button shows that it just copied. */
-export const isCopied = (model: Model): boolean => CopyState.guards.Copied(model.state);
-
-// COMMAND
+export const isCopied = (model: Model): boolean =>
+  CopyState.guards.Copied(model.state);
 
-/** How long the word or the check says it copied. */
 const WORD_BEAT = Duration.millis(1800);
 
 const FAILED = "Copy failed: the clipboard is not available here.";
@@ -79,25 +70,30 @@ export const CopyText = Command.define("CopyText", {
     Effect.gen(function* () {
       const clipboard = yield* Clipboard.Clipboard;
       yield* clipboard.writeString(text);
+
       return Message.SucceededCopyText();
-    }).pipe(Effect.catch(() => Effect.succeed(Message.FailedCopyText()))),
+    }).pipe(Effect.orElseSucceed(() => Message.FailedCopyText())),
 });
 
 /** Waits out the beat the word or the check shows for. */
-export const WaitBeforeResettingWord = Command.define("WaitBeforeResettingWord", {
-  messages: [Message.CompletedWaitBeforeResettingWord],
-  execute: Effect.sleep(WORD_BEAT).pipe(Effect.as(Message.CompletedWaitBeforeResettingWord())),
-});
+export const WaitBeforeResettingWord = Command.define(
+  "WaitBeforeResettingWord",
+  {
+    messages: [Message.CompletedWaitBeforeResettingWord],
+    execute: Effect.sleep(WORD_BEAT).pipe(
+      Effect.as(Message.CompletedWaitBeforeResettingWord())
+    ),
+  }
+);
 
 /** Says how the copy went through the page's live region. */
 export const AnnounceCopy = Command.define("AnnounceCopy", {
   args: { text: Schema.String },
   messages: [Message.CompletedAnnounceCopy],
-  execute: ({ text }) => Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceCopy())),
+  execute: ({ text }) =>
+    Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceCopy())),
 });
 
-// UPDATE
-
 /** Processes a copy button Message and returns the next Model and Commands. Its copy needs
  *  the `Clipboard` service. A parent that follows the copy reads `isCopied`. */
 export const update = (model: Model, message: Message) =>
@@ -123,11 +119,10 @@ export const update = (model: Model, message: Message) =>
     CompletedAnnounceCopy: () => ({ model }),
   });
 
-// VIEW
-
 /** How the button prints: the quiet copy glyph (a check once copied), or a small button
  *  whose word turns to "copied". */
 export const Variant = Schema.Literals(["Icon", "Button"]);
+
 export type Variant = typeof Variant.Type;
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
@@ -147,32 +142,34 @@ export type ViewInputs = Readonly<{
  * copy is said too. Its `CopyText` Command needs `Clipboard.layer` in the application's
  * resources.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { text, label, variant = "Icon" } = viewInputs;
-  const isDone = isCopied(model);
-  const buttonAttributes = [h.Id(id(model))];
-  const onClick = Message.ClickedCopy({ text });
-
-  return variant === "Icon"
-    ? IconButton.view(
-        {
-          glyph: isDone ? "check" : "copy",
-          label,
-          onClick,
-          isQuiet: true,
-          attributes: buttonAttributes,
-        },
-        h,
-      )
-    : Button.view(
-        {
-          label,
-          glyph: "copy",
-          done: { isDone, label: "copied" },
-          isSmall: true,
-          onClick,
-          attributes: buttonAttributes,
-        },
-        h,
-      );
-});
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { text, label, variant = "Icon" } = viewInputs;
+    const isDone = isCopied(model);
+    const buttonAttributes = [h.Id(id(model))];
+    const onClick = Message.ClickedCopy({ text });
+
+    return variant === "Icon"
+      ? IconButton.view(
+          {
+            glyph: isDone ? "check" : "copy",
+            label,
+            onClick,
+            isQuiet: true,
+            attributes: buttonAttributes,
+          },
+          h
+        )
+      : Button.view(
+          {
+            label,
+            glyph: "copy",
+            done: { isDone, label: "copied" },
+            isSmall: true,
+            onClick,
+            attributes: buttonAttributes,
+          },
+          h
+        );
+  }
+);

package/src/{copyButton → copy-button}/index.ts

@@ -9,5 +9,6 @@ export {
   isCopied,
   update,
   view,
-} from "./copyButton.ts";
-export type { InitConfig, Variant, ViewInputs } from "./copyButton.ts";
+} from "./copy-button.ts";
+
+export type { InitConfig, Variant, ViewInputs } from "./copy-button.ts";

package/src/crumbs/crumbs.ts

@@ -1,8 +1,6 @@
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** One step of the path: its words, and where it links. */
 export type Crumb = Readonly<{
   label: string;
@@ -13,7 +11,7 @@ export type Crumb = Readonly<{
 
 /** Configuration for rendering crumbs with `view`. */
 export type ViewConfig = Readonly<{
-  crumbs: ReadonlyArray<Crumb>;
+  crumbs: readonly Crumb[];
 }>;
 
 const crumbView =
@@ -26,16 +24,19 @@ const crumbView =
         href === undefined || index === lastIndex
           ? h.span(index === lastIndex ? [h.AriaCurrent("page")] : [], [label])
           : h.a([h.Href(href)], [label]),
-      ],
+      ]
     );
 
 /** The path to where you are, in the pixel face, split by muted slashes: a navigation
  *  landmark named "Breadcrumb", its steps an ordered list, the last `aria-current="page"`. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { crumbs } = config;
 
   return h.nav(
     [h.AriaLabel("Breadcrumb"), h.Class("crumbs")],
-    [h.ol([], Array.map(crumbs, crumbView(crumbs.length - 1, h)))],
+    [h.ol([], Array.map(crumbs, crumbView(crumbs.length - 1, h)))]
   );
 };

package/src/crumbs/index.ts

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

package/src/deck/deck.ts

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a deck with `view`. */
 export type ViewConfig = Readonly<{
   /** The panels, a PageHead first. */
@@ -10,7 +8,10 @@ export type ViewConfig = Readonly<{
 
 /** The page body: a centred column of panels, 24px apart. It is the main landmark
  *  (`<main id="main">`), the skip link's target. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body } = config;
 
   return h.main([h.Id("main"), h.Class("deck")], body);

package/src/deck/index.ts

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