@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{filterChip/filterChip.ts → filter-chip/filter-chip.ts}

@@ -4,8 +4,6 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import type { Attributes } from "../attributes/attributes.ts";
 import { pressedAttribute } from "../button/button.ts";
 
-// VIEW
-
 /** Configuration for rendering a filter chip with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** The value, the chip's words: "open", "this week". */
@@ -28,25 +26,46 @@ export type ViewConfig<Message> = Readonly<{
 /** A filter as a chip. With `onToggle` it is a toggle button built on `@foldkit/ui`'s Button,
  *  `aria-pressed` while in force; without, a label, inverted while pinned. With `full`, screen
  *  readers hear the full words and the eye gets them as a tip. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
-  const { label, name, full, isPressed = false, onToggle, isReset = false, key } = config;
-  const fullAttributes = full === undefined ? [] : [h.DataAttribute("tip", full)];
-  // the space keeps the name and the value two words in the accessible name ("status open");
-  // the chip's flex gap swallows it on screen
-  const nameView = (attributes: Attributes<Message>): ReadonlyArray<Html | string> =>
-    name === undefined ? [] : [h.span([...attributes, h.Class("fchip-name")], [name]), " "];
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
+  const {
+    label,
+    name,
+    full,
+    isPressed = false,
+    onToggle,
+    isReset = false,
+    key,
+  } = config;
+
+  const fullAttributes =
+    full === undefined ? [] : [h.DataAttribute("tip", full)];
+
+  const nameView = (
+    attributes: Attributes<Message>
+  ): ReadonlyArray<Html | string> =>
+    name === undefined
+      ? []
+      : [h.span([...attributes, h.Class("fchip-name")], [name]), " "];
+
   const keyAttributes = key === undefined ? [] : [h.Key(key)];
 
   return onToggle === undefined
     ? h.span(
-        [...keyAttributes, ...fullAttributes, h.Class(isPressed ? "fchip pinned" : "fchip")],
+        [
+          ...keyAttributes,
+          ...fullAttributes,
+          h.Class(isPressed ? "fchip pinned" : "fchip"),
+        ],
         full === undefined
           ? [...nameView([]), label]
           : [
               ...nameView([h.AriaHidden(true)]),
               h.span([h.AriaHidden(true)], [label]),
               h.span([h.Class("sr-only")], [full]),
-            ],
+            ]
       )
     : UiButton.view(
         {
@@ -61,9 +80,9 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
                 ...(isReset ? [] : [pressedAttribute(isPressed, h)]),
                 h.Class(isReset ? "fchip reset" : "fchip"),
               ],
-              [...nameView([]), label],
+              [...nameView([]), label]
             ),
         },
-        h,
+        h
       );
 };

package/src/filter-chip/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./filter-chip.ts";
+
+export type { ViewConfig } from "./filter-chip.ts";

package/src/{filterStrip/filterStrip.ts → filter-strip/filter-strip.ts}

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a filter strip with `view`. */
 export type ViewConfig = Readonly<{
   /** FilterChips, a QueryChip, a glyph Segmented; `h.span([h.Class("spacer")])` pushes what
@@ -13,7 +11,10 @@ export type ViewConfig = Readonly<{
 
 /** A printed strip of filters above a list, on a 3px shadow: a `role="group"` named by its
  *  label. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body, label = "Filters" } = config;
 
   return h.div([h.Role("group"), h.AriaLabel(label), h.Class("strip")], body);

package/src/filter-strip/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./filter-strip.ts";
+
+export type { ViewConfig } from "./filter-strip.ts";

package/src/{flashWord/flashWord.ts → flash-word/flash-word.ts}

@@ -1,13 +1,9 @@
 import { Duration, Option } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// HOLD
-
 /** How long a flash word stays before the caller takes it back. */
 export const HOLD = Duration.millis(1800);
 
-// VIEW
-
 /** Configuration for rendering a flash word with `view`. */
 export type ViewConfig = Readonly<{
   /** The word from the caller's Model (`"saved"`), or `None` once it is taken back. */
@@ -26,7 +22,7 @@ export type ViewConfig = Readonly<{
  *
  * ```ts
  * const WaitBeforeClearFlashWord = Command.define("WaitBeforeClearFlashWord", {
- *   args: { count: Schema.Number },
+ *   args: { count: Schema.Finite },
  *   messages: [Message.CompletedWaitBeforeClearFlashWord],
  *   execute: ({ count }) =>
  *     Effect.sleep(FlashWord.HOLD).pipe(
@@ -35,8 +31,14 @@ export type ViewConfig = Readonly<{
  * });
  * ```
  */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { maybeWord } = config;
 
-  return h.span([h.Role("status"), h.Class("flash-word")], Option.toArray(maybeWord));
+  return h.span(
+    [h.Role("status"), h.Class("flash-word")],
+    Option.toArray(maybeWord)
+  );
 };

package/src/flash-word/index.ts

@@ -0,0 +1,3 @@
+export { HOLD, view } from "./flash-word.ts";
+
+export type { ViewConfig } from "./flash-word.ts";

package/src/focus/focus.ts

@@ -3,22 +3,22 @@ import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import { defineMessageUnion } from "foldkit/message";
 
-// MESSAGE
-
 /** What `Focus` reports. A component that runs `Focus` puts `CompletedFocus: {}` in its own
  *  Message union, which this tag matches; code that returns `Focus` with no union of its own
  *  (a helper shared by several forms) types its Commands with this one. */
 export const Message = defineMessageUnion({
   CompletedFocus: {},
 });
-export type Message = typeof Message.Type;
 
-// COMMAND
+export type Message = typeof Message.Type;
 
 /** Focuses the element with this id, once it is in the page; nothing when it is not. */
 export const Focus = Command.define("Focus", {
   args: { id: Schema.String },
   messages: [Message.CompletedFocus],
   execute: ({ id }) =>
-    Dom.focus(`#${CSS.escape(id)}`).pipe(Effect.ignore, Effect.as(Message.CompletedFocus())),
+    Dom.focus(`#${CSS.escape(id)}`).pipe(
+      Effect.ignore,
+      Effect.as(Message.CompletedFocus())
+    ),
 });

package/src/format/format.ts

@@ -2,18 +2,14 @@ import { Duration, Match, Option, pipe } from "effect";
 
 import { LOCALE } from "../locale/locale.ts";
 
-// CONSTANT
-
 const SECOND = Duration.toMillis(Duration.seconds(1));
 const MINUTE = Duration.toMillis(Duration.minutes(1));
 const HOUR = Duration.toMillis(Duration.hours(1));
 const DAY = Duration.toMillis(Duration.days(1));
 const SECONDS_PER_MINUTE = 60;
 const SECONDS_PER_HOUR = 3600;
-/** How a clock prints when the time is not known. */
-export const UNKNOWN_CLOCK = "-:--";
 
-// DATES
+export const UNKNOWN_CLOCK = "-:--";
 
 const dateFormat = (timeZone: Option.Option<string>) =>
   new Intl.DateTimeFormat(LOCALE, {
@@ -36,76 +32,86 @@ const dateTimeFormat = (timeZone: Option.Option<string>) =>
 
 /** A day as `"12 Mar 2026"`, in the reader's zone unless `timeZone` names another. Always
  *  English, so the server and every browser write the same words. */
-export const formatDate = (at: Date, timeZone: Option.Option<string> = Option.none()): string =>
-  dateFormat(timeZone).format(at);
+export const formatDate = (
+  at: Date,
+  timeZone: Option.Option<string> = Option.none()
+): string => dateFormat(timeZone).format(at);
 
-/** A moment as `"12 Mar 2026, 14:05"`, in the reader's zone unless `timeZone` names another. */
-export const formatDateTime = (at: Date, timeZone: Option.Option<string> = Option.none()): string =>
-  dateTimeFormat(timeZone).format(at);
+export const formatDateTime = (
+  at: Date,
+  timeZone: Option.Option<string> = Option.none()
+): string => dateTimeFormat(timeZone).format(at);
 
-// SPANS
-
-/** How long, in the fewest words that still say it: `"45s"`, `"12m"`, `"3h"`, `"19d"`. Below
- *  two days a span counts hours. The sign of `milliseconds` is ignored. */
 export const formatSpan = (milliseconds: number): string => {
   const span = Math.abs(milliseconds);
 
   return Match.value(span).pipe(
     Match.when(
       (value) => value < MINUTE,
-      (value) => `${Math.floor(value / SECOND)}s`,
+      (value) => `${Math.floor(value / SECOND)}s`
     ),
     Match.when(
       (value) => value < HOUR,
-      (value) => `${Math.floor(value / MINUTE)}m`,
+      (value) => `${Math.floor(value / MINUTE)}m`
     ),
     Match.when(
       (value) => value < 2 * DAY,
-      (value) => `${Math.floor(value / HOUR)}h`,
+      (value) => `${Math.floor(value / HOUR)}h`
     ),
-    Match.orElse((value) => `${Math.floor(value / DAY)}d`),
+    Match.orElse((value) => `${Math.floor(value / DAY)}d`)
   );
 };
 
 const twoUnits = (
   milliseconds: number,
-  [large, small, largeUnit, smallUnit]: readonly [number, number, string, string],
+  [large, small, largeUnit, smallUnit]: readonly [
+    number,
+    number,
+    string,
+    string,
+  ]
 ): string => {
   const whole = Math.floor(milliseconds / large);
   const rest = Math.floor((milliseconds % large) / small);
 
-  return rest === 0 ? `${whole}${largeUnit}` : `${whole}${largeUnit} ${rest}${smallUnit}`;
+  return rest === 0
+    ? `${whole}${largeUnit}`
+    : `${whole}${largeUnit} ${rest}${smallUnit}`;
 };
 
-/** Time left, one unit finer than a span: `"45s"`, `"12m"`, `"1h 41m"`, `"3d 4h"`. */
 export const formatRemaining = (milliseconds: number): string => {
   if (milliseconds < HOUR) {
     return formatSpan(milliseconds);
   } else if (milliseconds < 2 * DAY) {
     return twoUnits(milliseconds, [HOUR, MINUTE, "h", "m"]);
-  } else {
-    return twoUnits(milliseconds, [DAY, HOUR, "d", "h"]);
   }
-};
 
-// CLOCK
+  return twoUnits(milliseconds, [DAY, HOUR, "d", "h"]);
+};
 
 const twoDigits = (value: number): string => `${value}`.padStart(2, "0");
 
-/** A place in something that plays, as a clock: `"0:07"`, `"12:40"`, `"1:02:09"`. A place not
- *  known yet (no duration, or a stream) prints `"-:--"`. */
 export const formatClock = (seconds: number): string =>
   pipe(
-    Option.liftPredicate(seconds, (value) => Number.isFinite(value) && value >= 0),
+    Option.liftPredicate(
+      seconds,
+      (value) => Number.isFinite(value) && value >= 0
+    ),
     Option.map(Math.floor),
     Option.match({
       onNone: () => UNKNOWN_CLOCK,
       onSome: (whole) => {
         const hours = Math.floor(whole / SECONDS_PER_HOUR);
-        const minutes = Math.floor((whole % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE);
+
+        const minutes = Math.floor(
+          (whole % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE
+        );
+
         const rest = twoDigits(whole % SECONDS_PER_MINUTE);
 
-        return hours > 0 ? `${hours}:${twoDigits(minutes)}:${rest}` : `${minutes}:${rest}`;
+        return hours > 0
+          ? `${hours}:${twoDigits(minutes)}:${rest}`
+          : `${minutes}:${rest}`;
       },
-    }),
+    })
   );

package/src/format/index.ts

@@ -1,2 +1,3 @@
 export { LOCALE } from "../locale/locale.ts";
+
 export { formatDate } from "./format.ts";

package/src/glyph/glyph.ts

@@ -1,9 +1,8 @@
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import { type Cell, type GlyphName, glyphs } from "./glyphs.ts";
-
-// VIEW
+import { glyphs } from "./glyphs.ts";
+import type { Cell, GlyphName } from "./glyphs.ts";
 
 const DRAWN_SIZE = 12;
 
@@ -14,7 +13,6 @@ export type ViewConfig = Readonly<{
   size?: number;
 }>;
 
-/** One inked rectangle of a drawing, in `currentColor`. */
 export const cellView =
   <Message>(h: HtmlBuilder<Message>) =>
   ([x, y, width, height]: Cell): Html =>
@@ -28,7 +26,10 @@ export const cellView =
 
 /** One glyph from the inventory, in `currentColor`. Decorative: label the control that holds
  *  it. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { name, size = DRAWN_SIZE } = config;
 
   return h.svg(
@@ -39,6 +40,6 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
       h.AriaHidden(true),
       h.Class("px-icon"),
     ],
-    Array.map(glyphs[name], cellView(h)),
+    Array.map(glyphs[name], cellView(h))
   );
 };