@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/board/index.ts

@@ -15,5 +15,12 @@ export {
   update,
   view,
 } from "./board.ts";
+
 export { isHolding } from "../drag/drag.ts";
-export type { CardRender, CardViewConfig, InitConfig, ViewInputs } from "./board.ts";
+
+export type {
+  CardRender,
+  CardViewConfig,
+  InitConfig,
+  ViewInputs,
+} from "./board.ts";

package/src/button/button.ts

@@ -6,15 +6,14 @@ import type { Attribute, Html, HtmlBuilder } from "foldkit/html";
 import type { Attributes } from "../attributes/attributes.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
-import * as KeyHint from "../keyHint/keyHint.ts";
-import type { KeyPlatform } from "../keyHint/keyLabel.ts";
-
-// LOOK
+import * as KeyHint from "../key-hint/key-hint.ts";
+import type { KeyPlatform } from "../key-hint/key-label.ts";
 
 /** How a button prints. `Primary` is the one committing action. `Danger` is the commit inside a
  *  confirm, never at rest: a destructive action is a neutral button that opens a danger
  *  `ConfirmDialog`. */
 export const Variant = Schema.Literals(["Default", "Primary", "Danger"]);
+
 export type Variant = typeof Variant.Type;
 
 /** What `Button` and `LinkButton` share: the variant, the size, and the default ring. */
@@ -31,7 +30,6 @@ const VARIANT_CLASS: Readonly<Record<Variant, string>> = {
   Danger: "btn danger",
 };
 
-/** The class list of a printed button. Shared with `LinkButton`. */
 export const lookClassName = ({
   variant = "Default",
   isSmall = false,
@@ -39,8 +37,6 @@ export const lookClassName = ({
 }: Look): string =>
   `${VARIANT_CLASS[variant]}${isSmall ? " small" : ""}${isDefault ? " default-ring" : ""}`;
 
-// VIEW
-
 /** A button that can end done: it prints in ink, flat and unavailable, with the check in its
  *  glyph's place. Both words print in one cell, the other hidden, so the button is as wide as
  *  the longer word and never changes width. */
@@ -60,7 +56,7 @@ export type KeyHintConfig = Readonly<{
  *  both states. Shared by every pressable in the system. */
 export const pressedAttribute = <Message>(
   isPressed: boolean,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Attribute<Message> => h.AriaPressed(isPressed ? "true" : "false");
 
 /** Configuration for rendering a button with `view`. */
@@ -80,12 +76,15 @@ export type ViewConfig<Message> = Look &
     /** Further attributes for the `<button>`, such as an id or a Submodel's attribute group. */
     attributes?: Attributes<Message>;
   }> &
-  (Readonly<{ glyph?: GlyphName; done?: undefined }> | Readonly<{ glyph: GlyphName; done: Done }>);
+  (
+    | Readonly<{ glyph?: GlyphName; done?: undefined }>
+    | Readonly<{ glyph: GlyphName; done: Done }>
+  );
 
 const wordsView = <Message>(
   label: string,
   maybeDone: Option.Option<Done>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html | string =>
   Option.match(maybeDone, {
     onNone: () => label,
@@ -95,7 +94,7 @@ const wordsView = <Message>(
         [
           h.span(isDone ? [h.AriaHidden(true)] : [], [label]),
           h.span(isDone ? [] : [h.AriaHidden(true)], [doneLabel]),
-        ],
+        ]
       ),
   });
 
@@ -109,7 +108,10 @@ const wordsView = <Message>(
  * Enter in a field can still submit a form that has no live submit button, so the form's
  * own update must ignore a submit while its work is saving (see `Card.formView`).
  */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const {
     label,
     onClick,
@@ -119,6 +121,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
     attributes = [],
     glyph,
   } = config;
+
   const maybeDone = Option.fromNullishOr(config.done);
   const isDone = Option.exists(maybeDone, (done) => done.isDone);
   const isHeld = isBusy || isDone || isDisabled;
@@ -127,6 +130,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
   const lookClass = isDone
     ? `${lookClassName({ isSmall: config.isSmall ?? false })} done`
     : lookClassName(config);
+
   const glyphName = isDone ? "check" : glyph;
   const keyHint = isDone ? undefined : config.keyHint;
 
@@ -144,13 +148,17 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
             h.Class(lookClass),
           ],
           [
-            ...(glyphName === undefined ? [] : [Glyph.view({ name: glyphName }, h)]),
+            ...(glyphName === undefined
+              ? []
+              : [Glyph.view({ name: glyphName }, h)]),
             wordsView(label, maybeDone, h),
             ...(keyHint === undefined ? [] : [KeyHint.view(keyHint, h)]),
-            ...(isWorking ? [h.span([h.Class("cursor"), h.AriaHidden(true)])] : []),
-          ],
+            ...(isWorking
+              ? [h.span([h.Class("cursor"), h.AriaHidden(true)])]
+              : []),
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/button/index.ts

@@ -1,2 +1,9 @@
 export { pressedAttribute, view } from "./button.ts";
-export type { Done, KeyHintConfig, Look, Variant, ViewConfig } from "./button.ts";
+
+export type {
+  Done,
+  KeyHintConfig,
+  Look,
+  Variant,
+  ViewConfig,
+} from "./button.ts";

package/src/card/card.ts

@@ -4,11 +4,9 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 import type { Attributes } from "../attributes/attributes.ts";
 import * as Button from "../button/button.ts";
 import * as Fields from "../fields/fields.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
 import { slotView } from "../slot/slot.ts";
 
-// VIEW
-
 /** Configuration for rendering a card with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Pixel caps in the inverted title bar. */
@@ -31,14 +29,12 @@ export type ViewConfig<Message> = Readonly<{
   actionBarAttributes?: Attributes<Message>;
 }>;
 
-/** A card's parts; a form card holds its close glyph while it sends (`aria-disabled`, in the
- *  keyboard, its close attributes dropped). */
 type Parts<Message> = ViewConfig<Message> & Readonly<{ isCloseHeld?: boolean }>;
 
 const childrenView = <Message>(
   config: Parts<Message>,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> => {
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const {
     title,
     titleAttributes = [],
@@ -66,16 +62,21 @@ const childrenView = <Message>(
                 isDisabled: isCloseHeld,
                 attributes: isCloseHeld ? [] : closeAttributes,
               },
-              h,
+              h
             ),
           ]),
-    ],
+    ]
   );
 
-  const actionBar = Array.match([...lead, ...slotView("span", "card-acts", actions, h)], {
-    onEmpty: () => [],
-    onNonEmpty: (bar) => [h.div([...actionBarAttributes, h.Class("card-actions")], bar)],
-  });
+  const actionBar = Array.match(
+    [...lead, ...slotView("span", "card-acts", actions, h)],
+    {
+      onEmpty: () => [],
+      onNonEmpty: (bar) => [
+        h.div([...actionBarAttributes, h.Class("card-actions")], bar),
+      ],
+    }
+  );
 
   return [titleBar, h.div([h.Class("card-body")], body), ...actionBar];
 };
@@ -84,11 +85,12 @@ const className = (isNarrow: boolean | undefined): string =>
   isNarrow === true ? "card narrow" : "card";
 
 /** The raised surface: paper in a 2px ink box on the 8px print shadow, under a title bar. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html =>
   h.div([h.Class(className(config.isNarrow))], childrenView(config, h));
 
-// FORM
-
 /** Configuration for rendering a form card with `formView`: a card's, but for its body, its
  *  close attributes and its actions, which the form fills. `lead` stays the card's: what
  *  goes before the push, such as a form's own delete. */
@@ -137,7 +139,7 @@ export const submitId = (id: string): string => `${id}-submit`;
  *  one Fields group, then cancel and the primary submit button in the action bar. */
 export const formView = <Message>(
   config: FormViewConfig<Message>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const {
     id,
@@ -161,7 +163,7 @@ export const formView = <Message>(
               isDisabled: isBusy,
               attributes: isBusy ? [] : (closeAttributes ?? []),
             },
-            h,
+            h
           ),
         ];
 
@@ -175,7 +177,7 @@ export const formView = <Message>(
       type: "submit",
       attributes: [h.Id(submitId(id))],
     },
-    h,
+    h
   );
 
   return h.form(
@@ -192,7 +194,7 @@ export const formView = <Message>(
         isCloseHeld: isBusy,
         actions: [...cancelButton, submitButton],
       },
-      h,
-    ),
+      h
+    )
   );
 };

package/src/card/index.ts

@@ -1,2 +1,3 @@
 export { formView, submitId, view } from "./card.ts";
+
 export type { FormViewConfig, ViewConfig } from "./card.ts";

package/src/chart-table/chart-table.ts

@@ -0,0 +1,87 @@
+import { Array, Option } from "effect";
+import type { Html, HtmlBuilder } from "foldkit/html";
+
+import { LOCALE } from "../locale/locale.ts";
+
+const MAX_LABELS = 8;
+
+export const chartNumber = (value: number): string =>
+  value.toLocaleString(LOCALE);
+
+export const chartValue = (
+  maybeValue: Option.Option<number>
+): Option.Option<number> =>
+  Option.filter(maybeValue, globalThis.Number.isFinite);
+
+export const chartTop = (
+  values: ReadonlyArray<Option.Option<number>>,
+  maybeMax: Option.Option<number>
+): number =>
+  Math.max(
+    0,
+    Option.getOrElse(maybeMax, () =>
+      Math.max(
+        0,
+        ...Array.map(values, (maybeValue) =>
+          Option.getOrElse(chartValue(maybeValue), () => 0)
+        )
+      )
+    )
+  );
+
+export const labelStep = (count: number): number =>
+  Math.max(1, Math.ceil(count / MAX_LABELS));
+
+type ChartTableRow = Readonly<{
+  label: string;
+  readings: readonly string[];
+}>;
+
+type ViewConfig = Readonly<{
+  label: string;
+  heads: readonly string[];
+  rows: readonly ChartTableRow[];
+}>;
+
+/** A chart's data as a real table that only screen readers meet: the picture beside it is
+ *  hidden from them, and this says everything the picture does, in order, each point's label
+ *  a row header. A table grows to its cells whatever its width says, so the box that hides it
+ *  is a div around it. */
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
+  h.div(
+    [h.Class("sr-only")],
+    [
+      h.table(
+        [],
+        [
+          h.caption([], [config.label]),
+          h.thead(
+            [],
+            [
+              h.tr(
+                [],
+                Array.map(config.heads, (head) =>
+                  h.th([h.Scope("col")], [head])
+                )
+              ),
+            ]
+          ),
+          h.tbody(
+            [],
+            Array.map(config.rows, ({ label, readings }) =>
+              h.tr(
+                [],
+                [
+                  h.th([h.Scope("row")], [label]),
+                  ...Array.map(readings, (reading) => h.td([], [reading])),
+                ]
+              )
+            )
+          ),
+        ]
+      ),
+    ]
+  );

package/src/chip/chip.ts

@@ -1,14 +1,11 @@
 import { Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// TONE
-
 /** `Go`: active (green). `Warn`: a warning the row carries (amber). `Blocked`: a red outline.
  *  `Done`: tinted. Colour only ever means active, warning or urgent. */
 export const Tone = Schema.Literals(["Plain", "Go", "Warn", "Blocked", "Done"]);
-export type Tone = typeof Tone.Type;
 
-// VIEW
+export type Tone = typeof Tone.Type;
 
 /** Configuration for rendering a chip with `view`. */
 export type ViewConfig = Readonly<{
@@ -29,17 +26,21 @@ const TONE_CLASS: Readonly<Record<Tone, string>> = {
 };
 
 /** A state word in a 2px box. Its words are its meaning; the colour only repeats them. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { label, tone = "Plain", isBusy = false } = config;
 
   return h.span(
     [...(isBusy ? [h.AriaBusy(true)] : []), h.Class(`chip${TONE_CLASS[tone]}`)],
-    [label, ...(isBusy ? [h.span([h.Class("cursor"), h.AriaHidden(true)])] : [])],
+    [
+      label,
+      ...(isBusy ? [h.span([h.Class("cursor"), h.AriaHidden(true)])] : []),
+    ]
   );
 };
 
-// DOT
-
 /** Configuration for rendering a dot with `dotView`. */
 export type DotConfig = Readonly<{
   /** The state word: the dot's accessible name and its tip. */
@@ -50,7 +51,10 @@ export type DotConfig = Readonly<{
 /** A chip as a 10px cell in its tone, where a word would take the room a title needs (a task
  *  row's status, before its title). It is an image (`role="img"`) named by the word, which its
  *  tip shows, so the state never rests on its colour. */
-export const dotView = <Message>(config: DotConfig, h: HtmlBuilder<Message>): Html => {
+export const dotView = <Message>(
+  config: DotConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { label, tone = "Plain" } = config;
 
   return h.span([

package/src/chip/index.ts

@@ -1,2 +1,3 @@
 export { dotView, view } from "./chip.ts";
+
 export type { DotConfig, Tone, ViewConfig } from "./chip.ts";

package/src/choice/choice.ts

@@ -1,8 +1,6 @@
 import { Checkbox as UiCheckbox } from "@foldkit/ui";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a checkbox choice with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Unique in the document: the name's and the note's ids are made from it. */
@@ -18,7 +16,10 @@ export type ViewConfig<Message> = Readonly<{
 /** A checkbox with a pixel-caps name and an optional note, built on `@foldkit/ui`'s
  *  Checkbox: a `role="checkbox"` box (`aria-checked`) named by its name, described by its note
  *  (`aria-describedby`). Space and a click on the box or the name toggle it. */
-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, note, isChecked, onToggle } = config;
 
   return UiCheckbox.view(
@@ -38,12 +39,17 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
                 h.span([...groups.label, h.Class("choice-name")], [label]),
                 ...(note === undefined
                   ? []
-                  : [h.span([...groups.description, h.Class("choice-note")], [note])]),
-              ],
+                  : [
+                      h.span(
+                        [...groups.description, h.Class("choice-note")],
+                        [note]
+                      ),
+                    ]),
+              ]
             ),
-          ],
+          ]
         ),
     },
-    h,
+    h
   );
 };

package/src/choice/index.ts

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

package/src/choices/choices.ts

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a list of choices with `view`. */
 export type ViewConfig = Readonly<{
   /** Choices. */
@@ -12,7 +10,10 @@ export type ViewConfig = Readonly<{
 
 /** A stack of checkbox Choices; put it in a Fieldset, which names the group. A choice of one
  *  is a RadioChoices. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { body, isInline = false } = config;
 
   return h.div([h.Class(isInline ? "choices inline" : "choices")], body);

package/src/choices/index.ts

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

package/src/{codeEditor/codeEditor.ts → code-editor/code-editor.ts}

@@ -1,8 +1,6 @@
 import { Textarea as UiTextarea } from "@foldkit/ui";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a code editor with `view`. */
 export type ViewConfig<Message> = Readonly<{
   /** Unique in the document: the `<textarea>`'s id. */
@@ -17,7 +15,10 @@ export type ViewConfig<Message> = Readonly<{
 
 /** Code to edit, built on `@foldkit/ui`'s Textarea: the code surface as a textarea, 220px tall
  *  at least and growing to 60vh, with spelling, capitals and autocomplete off. */
-export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const { id, value, onInput, label } = config;
 
   return UiTextarea.view(
@@ -35,6 +36,6 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
           h.Class("code-surface"),
         ]),
     },
-    h,
+    h
   );
 };

package/src/code-editor/index.ts

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

package/src/{codeSurface/codeSurface.ts → code-surface/code-surface.ts}

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a code surface with `view`. */
 export type ViewConfig = Readonly<{
   /** Names the block for screen readers: a file name, `"Response body"`. */
@@ -13,8 +11,16 @@ export type ViewConfig = Readonly<{
 /** Code to read: a head-tinted block in the system monospace. It wraps rather than scrolls,
  *  and takes focus, so a keyboard reader can reach it and a screen reader names it: a `<pre>`
  *  may not be named, so it is a `role="group"`, which may. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.pre(
-    [h.Tabindex(0), h.Role("group"), h.AriaLabel(config.label), h.Class("code-surface")],
-    config.body,
+    [
+      h.Tabindex(0),
+      h.Role("group"),
+      h.AriaLabel(config.label),
+      h.Class("code-surface"),
+    ],
+    config.body
   );

package/src/code-surface/index.ts

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