@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/key-hint/index.ts

@@ -0,0 +1,5 @@
+export { view } from "./key-hint.ts";
+
+export type { ViewConfig } from "./key-hint.ts";
+
+export { KeyPlatform, detectKeyPlatform, keyLabel } from "./key-label.ts";

package/src/{keyHint/keyHint.ts → key-hint/key-hint.ts}

@@ -1,9 +1,8 @@
 import type { KeySequence } from "foldkit/dom";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import { type KeyPlatform, keyLabel } from "./keyLabel.ts";
-
-// VIEW
+import { keyLabel } from "./key-label.ts";
+import type { KeyPlatform } from "./key-label.ts";
 
 /** Configuration for rendering a key hint with `view`. */
 export type ViewConfig = Readonly<{
@@ -15,5 +14,11 @@ export type ViewConfig = Readonly<{
 
 /** A key printed small beside the words of a control, for the eye only: the control's
  *  accessible name stays its words. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
-  h.kbd([h.Class("key-hint"), h.AriaHidden(true)], [keyLabel(config.keys, config.platform)]);
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
+  h.kbd(
+    [h.Class("key-hint"), h.AriaHidden(true)],
+    [keyLabel(config.keys, config.platform)]
+  );

package/src/{keyHint/keyLabel.ts → key-hint/key-label.ts}

@@ -1,14 +1,23 @@
-import { Array, Effect, Match, Option, Predicate, Record, Schema, String, pipe } from "effect";
+import {
+  Array,
+  Effect,
+  Match,
+  Option,
+  Predicate,
+  Record,
+  Schema,
+  String,
+  pipe,
+} from "effect";
 import type { KeySequence } from "foldkit/dom";
 
-// PLATFORM
-
 /** Which keyboard a key prints for: Apple's symbols (`⌘K`) or the spelled-out modifiers
  *  everyone else reads (`Ctrl+K`). `Mod` in a binding is Meta on Apple, Control elsewhere. */
 export const KeyPlatform = Schema.Literals(["Apple", "Other"]);
+
 export type KeyPlatform = typeof KeyPlatform.Type;
 
-const APPLE_PLATFORM_PATTERN = /Mac|iPhone|iPad|iPod/;
+const APPLE_PLATFORM_PATTERN = /Mac|iPhone|iPad|iPod/u;
 
 /** The key platform a user agent string names, the way `Dom.streamFromKeyBindings` resolves
  *  `Mod`, so a hint names the key the binding answers to. */
@@ -18,16 +27,16 @@ export const keyPlatformOf = (userAgent: string): KeyPlatform =>
 /** The reader's key platform, from the browser's user agent (`keyPlatformOf`). `Other` where
  *  there is no navigator, as during a server render. */
 export const detectKeyPlatform: Effect.Effect<KeyPlatform> = Effect.sync(() =>
-  typeof navigator === "undefined" ? "Other" : keyPlatformOf(navigator.userAgent),
+  typeof navigator === "undefined"
+    ? "Other"
+    : keyPlatformOf(navigator.userAgent)
 );
 
-// LABEL
-
 type Modifier = "Control" | "Alt" | "Shift" | "Meta";
 
-type Press = Readonly<{ modifiers: ReadonlyArray<Modifier>; key: string }>;
+type Press = Readonly<{ modifiers: readonly Modifier[]; key: string }>;
 
-const MODIFIER_ORDER: ReadonlyArray<Modifier> = ["Control", "Alt", "Shift", "Meta"];
+const MODIFIER_ORDER: readonly Modifier[] = ["Control", "Alt", "Shift", "Meta"];
 
 const APPLE_SYMBOL: Record.ReadonlyRecord<Modifier, string> = {
   Control: "⌃",
@@ -57,19 +66,24 @@ const toModifier =
   (token: string): Option.Option<Modifier> =>
     Match.value(String.toLowerCase(token)).pipe(
       Match.withReturnType<Option.Option<Modifier>>(),
-      Match.when("mod", () => Option.some(platform === "Apple" ? "Meta" : "Control")),
+      Match.when("mod", () =>
+        Option.some(platform === "Apple" ? "Meta" : "Control")
+      ),
       Match.when("control", () => Option.some("Control")),
       Match.when("alt", () => Option.some("Alt")),
       Match.when("shift", () => Option.some("Shift")),
       Match.when("meta", () => Option.some("Meta")),
-      Match.orElse(() => Option.none()),
+      Match.orElse(() => Option.none())
     );
 
 const parsePress = (press: string, platform: KeyPlatform): Press => {
   const tokens = pipe(press, String.split("+"), Array.map(String.trim));
   const [modifierTokens, key] = Array.unappend(tokens);
 
-  return { modifiers: Array.getSomes(Array.map(modifierTokens, toModifier(platform))), key };
+  return {
+    modifiers: Array.getSomes(Array.map(modifierTokens, toModifier(platform))),
+    key,
+  };
 };
 
 const isCharacter = (key: string): boolean => key.length === 1;
@@ -82,36 +96,39 @@ const keyName = (key: string, hasModifier: boolean): string =>
         return key;
       } else if (hasModifier) {
         return String.toUpperCase(key);
-      } else {
-        return String.toLowerCase(key);
       }
+
+      return String.toLowerCase(key);
     },
   });
 
 const pressLabel = (press: string, platform: KeyPlatform): string => {
   const { modifiers, key } = parsePress(press, platform);
+
   const isShiftedCharacter =
-    isCharacter(key) && Array.contains(modifiers, "Shift") && Array.length(modifiers) === 1;
+    isCharacter(key) &&
+    Array.contains(modifiers, "Shift") &&
+    Array.length(modifiers) === 1;
 
   if (isShiftedCharacter) {
     return String.toUpperCase(key);
   }
 
   const orderedModifiers = Array.filter(MODIFIER_ORDER, (modifier) =>
-    Array.contains(modifiers, modifier),
+    Array.contains(modifiers, modifier)
   );
+
   const prefix = Array.join(
     Array.map(orderedModifiers, (modifier) =>
-      platform === "Apple" ? APPLE_SYMBOL[modifier] : OTHER_PREFIX[modifier],
+      platform === "Apple" ? APPLE_SYMBOL[modifier] : OTHER_PREFIX[modifier]
     ),
-    "",
+    ""
   );
 
   return `${prefix}${keyName(key, Array.isReadonlyArrayNonEmpty(orderedModifiers))}`;
 };
 
-/** The presses a binding's keys name: one, or a sequence. */
-export const pressesOf = (keys: KeySequence): ReadonlyArray<string> =>
+export const pressesOf = (keys: KeySequence): readonly string[] =>
   Predicate.isString(keys) ? [keys] : keys;
 
 /**
@@ -123,7 +140,11 @@ export const pressesOf = (keys: KeySequence): ReadonlyArray<string> =>
  * named key keeps its spaces.
  */
 export const keyLabel = (keys: KeySequence, platform: KeyPlatform): string => {
-  const labels = Array.map(pressesOf(keys), (press) => pressLabel(press, platform));
+  const labels = Array.map(pressesOf(keys), (press) =>
+    pressLabel(press, platform)
+  );
 
-  return Array.every(labels, isCharacter) ? Array.join(labels, "") : Array.join(labels, " ");
+  return Array.every(labels, isCharacter)
+    ? Array.join(labels, "")
+    : Array.join(labels, " ");
 };

package/src/keymap/index.ts

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

package/src/keymap/keymap.ts

@@ -1,17 +1,18 @@
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** One key and what it does, both as printed. */
 export type KeymapRow = Readonly<{ keys: string; does: string }>;
 
 /** A heading and the keys under it. */
-export type KeymapGroup = Readonly<{ title: string; rows: ReadonlyArray<KeymapRow> }>;
+export type KeymapGroup = Readonly<{
+  title: string;
+  rows: readonly KeymapRow[];
+}>;
 
 /** Configuration for rendering a keymap with `view`. */
 export type ViewConfig = Readonly<{
-  groups: ReadonlyArray<KeymapGroup>;
+  groups: readonly KeymapGroup[];
   /** A closing sans sentence: when the keys act. */
   note?: string;
 }>;
@@ -19,20 +20,33 @@ export type ViewConfig = Readonly<{
 const rowView =
   <Message>(h: HtmlBuilder<Message>) =>
   ({ keys, does }: KeymapRow): Html =>
-    h.keyed("div")(keys, [h.Class("keymap-row")], [h.kbd([], [keys]), h.span([], [does])]);
+    h.keyed("div")(
+      keys,
+      [h.Class("keymap-row")],
+      [h.kbd([], [keys]), h.span([], [does])]
+    );
 
 const groupView =
   <Message>(h: HtmlBuilder<Message>) =>
   ({ title, rows }: KeymapGroup): Html =>
-    h.keyed("div")(title, [], [h.h3([], [title]), ...Array.map(rows, rowView(h))]);
+    h.keyed("div")(
+      title,
+      [],
+      [h.h3([], [title]), ...Array.map(rows, rowView(h))]
+    );
 
 /** Keys and what they do, grouped under `h3` headings, each key in a `kbd`, in the pixel
  *  face. Sits in a narrow Card. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.div(
     [h.Class("keymap")],
     [
       ...Array.map(config.groups, groupView(h)),
-      ...(config.note === undefined ? [] : [h.p([h.Class("note-line")], [config.note])]),
-    ],
+      ...(config.note === undefined
+        ? []
+        : [h.p([h.Class("note-line")], [config.note])]),
+    ]
   );

package/src/keys/keys.ts

@@ -1,6 +1,4 @@
 import type { KeyboardModifiers } from "foldkit/html";
 
-/** A key pressed with no modifier: no Alt, Control, Meta or Shift. A handler that also acts
- *  on a shifted key (Shift+Tab) says so beside its own call. */
 export const isPlain = (event: KeyboardModifiers): boolean =>
   !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;

package/src/line-chart/index.ts

@@ -0,0 +1,3 @@
+export { view } from "./line-chart.ts";
+
+export type { LineSeries, ViewConfig } from "./line-chart.ts";

package/src/{lineChart/lineChart.ts → line-chart/line-chart.ts}

@@ -1,10 +1,8 @@
 import { Array, Option, pipe } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import * as ChartTable from "../chartTable/chartTable.ts";
-import * as EmptyState from "../emptyState/emptyState.ts";
-
-// VIEW
+import * as ChartTable from "../chart-table/chart-table.ts";
+import * as EmptyState from "../empty-state/empty-state.ts";
 
 /** One line of a chart. */
 export type LineSeries = Readonly<{
@@ -21,7 +19,7 @@ export type ViewConfig = Readonly<{
   label: string;
   /** One per point, in order: days, versions. Up to eight print under the plot (past that,
    *  every nth); the table has them all. */
-  labels: ReadonlyArray<string>;
+  labels: readonly string[];
   /** One series in ink, or two: the second prints in muted ink with smaller cells, never a
    *  hue, and a key names both. */
   series: readonly [LineSeries] | readonly [LineSeries, LineSeries];
@@ -31,9 +29,6 @@ export type ViewConfig = Readonly<{
   category?: string;
 }>;
 
-// NOTE: the plot's own units. The SVG stretches to its box, so these are proportions; its
-// lines and cells keep their pixel sizes at any width (non-scaling strokes), and crispedges
-// keeps them on whole pixels.
 const PLOT_WIDTH = 600;
 const PLOT_HEIGHT = 160;
 const PERCENT = 100;
@@ -48,25 +43,23 @@ const placeX = (index: number, count: number): number =>
 
 const placeY = (value: number, top: number): number =>
   top > 0
-    ? Math.round(PLOT_HEIGHT - (Math.min(Math.max(value, 0), top) / top) * PLOT_HEIGHT)
+    ? Math.round(
+        PLOT_HEIGHT - (Math.min(Math.max(value, 0), top) / top) * PLOT_HEIGHT
+      )
     : PLOT_HEIGHT;
 
-/** Where each label's value sits, in whole plot units, or `None` where there is no reading.
- *  One point sits in the middle. */
 const place = (
   values: ReadonlyArray<Option.Option<number>>,
   count: number,
-  top: number,
+  top: number
 ): ReadonlyArray<Option.Option<Point>> =>
   Array.makeBy(count, (index) =>
     Option.map(valueAt(values, index), (value) => ({
       x: placeX(index, count),
       y: placeY(value, top),
-    })),
+    }))
   );
 
-/** The line: level from each point to halfway, then straight up or down, never a diagonal. A
- *  missing reading breaks it, so each run of readings is its own line. */
 const steps = (points: ReadonlyArray<Option.Option<Point>>): string =>
   pipe(
     points,
@@ -76,54 +69,73 @@ const steps = (points: ReadonlyArray<Option.Option<Point>>): string =>
         onSome: (point) =>
           Option.match(Option.flatten(Array.get(points, index - 1)), {
             onNone: () => `M${point.x} ${point.y}`,
-            onSome: (before) => `H${Math.round((before.x + point.x) / 2)}V${point.y}H${point.x}`,
+            onSome: (before) =>
+              `H${Math.round((before.x + point.x) / 2)}V${point.y}H${point.x}`,
           }),
-      }),
+      })
     ),
-    Array.join(""),
+    Array.join("")
   );
 
-/** Every point a square cell: a zero-length stroke with square caps, its size in pixels. */
 const cells = (points: ReadonlyArray<Option.Option<Point>>): string =>
   pipe(
     points,
     Array.map((maybePoint) =>
-      Option.match(maybePoint, { onNone: () => "", onSome: ({ x, y }) => `M${x} ${y}h0` }),
+      Option.match(maybePoint, {
+        onNone: () => "",
+        onSome: ({ x, y }) => `M${x} ${y}h0`,
+      })
     ),
-    Array.join(""),
+    Array.join("")
   );
 
-/** A key names both series; one line needs none. */
-const keyView = <Message>(series: ViewConfig["series"], h: HtmlBuilder<Message>) =>
+const keyView = <Message>(
+  series: ViewConfig["series"],
+  h: HtmlBuilder<Message>
+) =>
   series.length === 2
     ? [
         h.ul(
           [h.Class("chart-key")],
           Array.map(series, ({ name }, index) =>
-            h.li(index > 0 ? [h.Class("second")] : [], [h.span([h.Class("key-cell")]), name]),
-          ),
+            h.li(index > 0 ? [h.Class("second")] : [], [
+              h.span([h.Class("key-cell")]),
+              name,
+            ])
+          )
         ),
       ]
     : [];
 
+const edgeClass = (count: number, index: number): string => {
+  if (count > 1 && index === 0) {
+    return "first";
+  }
+
+  if (count > 1 && index === count - 1) {
+    return "last";
+  }
+
+  return "";
+};
+
 const labelView =
   <Message>(count: number, h: HtmlBuilder<Message>) =>
   (label: string, index: number): Html =>
     h.span(
       [
-        h.Class(
-          count > 1 && index === 0 ? "first" : count > 1 && index === count - 1 ? "last" : "",
-        ),
-        h.Style({ left: `${count === 1 ? PERCENT / 2 : (index * PERCENT) / (count - 1)}%` }),
+        h.Class(edgeClass(count, index)),
+        h.Style({
+          left: `${count === 1 ? PERCENT / 2 : (index * PERCENT) / (count - 1)}%`,
+        }),
       ],
-      [label],
+      [label]
     );
 
-/** A reading as the table says it: the number and its unit, or "no reading". */
 const readingText = (
   values: ReadonlyArray<Option.Option<number>>,
   index: number,
-  unit: string | undefined,
+  unit: string | undefined
 ): string =>
   Option.match(valueAt(values, index), {
     onNone: () => "no reading",
@@ -138,7 +150,7 @@ const seriesView = <Message>(
   isSecond: boolean,
   count: number,
   top: number,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const points = place(line.values, count, top);
   const path = steps(points);
@@ -152,14 +164,16 @@ const seriesView = <Message>(
 const chartView = <Message>(
   config: ViewConfig,
   labels: Array.NonEmptyReadonlyArray<string>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const { label, series, unit, category = "Category" } = config;
   const count = labels.length;
+
   const top = ChartTable.chartTop(
     Array.flatMap(series, ({ values }) => Array.take(values, count)),
-    Option.none(),
+    Option.none()
   );
+
   const step = ChartTable.labelStep(count);
 
   return h.div(
@@ -171,10 +185,12 @@ const chartView = <Message>(
           heads: [category, ...Array.map(series, ({ name }) => name)],
           rows: Array.map(labels, (pointLabel, index) => ({
             label: pointLabel,
-            readings: Array.map(series, ({ values }) => readingText(values, index, unit)),
+            readings: Array.map(series, ({ values }) =>
+              readingText(values, index, unit)
+            ),
           })),
         },
-        h,
+        h
       ),
       h.div(
         [h.Class("line-chart"), h.AriaHidden(true)],
@@ -182,34 +198,36 @@ const chartView = <Message>(
           ...keyView(series, h),
           h.span(
             [h.Class("line-scale")],
-            [h.span([], [ChartTable.chartNumber(top)]), h.span([], ["0"])],
+            [h.span([], [ChartTable.chartNumber(top)]), h.span([], ["0"])]
           ),
           h.div(
             [h.Class("line-plot")],
             [
               h.svg(
-                [h.ViewBox(`0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}`), h.PreserveAspectRatio("none")],
-                // the second series first, so the first draws over it
+                [
+                  h.ViewBox(`0 0 ${PLOT_WIDTH} ${PLOT_HEIGHT}`),
+                  h.PreserveAspectRatio("none"),
+                ],
                 [
                   ...Array.map(Array.tailNonEmpty(series), (line) =>
-                    seriesView(line, true, count, top, h),
+                    seriesView(line, true, count, top, h)
                   ),
                   seriesView(Array.headNonEmpty(series), false, count, top, h),
-                ],
+                ]
               ),
-            ],
+            ]
           ),
           h.span(
             [h.Class("line-labels")],
             pipe(
               labels,
               Array.map(labelView(count, h)),
-              Array.filter((_, index) => index % step === 0),
-            ),
+              Array.filter((_, index) => index % step === 0)
+            )
           ),
-        ],
+        ]
       ),
-    ],
+    ]
   );
 };
 
@@ -219,8 +237,12 @@ const chartView = <Message>(
  * ink. The picture is hidden from screen readers, who read a table of the same numbers.
  * Renders on the server: a fixed viewBox, stretched to its container's width.
  */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   Array.match(config.labels, {
-    onEmpty: () => EmptyState.view({ title: "nothing to chart", headingLevel: "Strong" }, h),
+    onEmpty: () =>
+      EmptyState.view({ title: "nothing to chart", headingLevel: "Strong" }, h),
     onNonEmpty: (labels) => chartView(config, labels, h),
   });