@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/remote/index.ts

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

package/src/remote/remote.ts

@@ -5,8 +5,6 @@ import * as Button from "../button/button.ts";
 import * as Loading from "../loading/loading.ts";
 import * as Notice from "../notice/notice.ts";
 
-// VIEW
-
 /** Configuration for rendering data that loads with `view`. */
 export type ViewConfig<Data, Error, Message> = Readonly<{
   /** The loading line's id, unique in the document. Retry takes its button away with the
@@ -22,10 +20,11 @@ export type ViewConfig<Data, Error, Message> = Readonly<{
   /** Loads it again: the notice's retry button, on a failure and on stale data alike. */
   onRetry: Message;
   /** The data, loaded or the last loaded (an EmptyState for none is the caller's). */
-  toDataView: (data: Data) => ReadonlyArray<Html>;
+  toDataView: (data: Data) => readonly Html[];
 }>;
 
-const capitalised = (label: string): string => `${label.charAt(0).toUpperCase()}${label.slice(1)}`;
+const capitalised = (label: string): string =>
+  `${label.charAt(0).toUpperCase()}${label.slice(1)}`;
 
 /**
  * Data that loads, in each of Foldkit's `AsyncData` states, with the retry built in: a Loading
@@ -37,19 +36,25 @@ const capitalised = (label: string): string => `${label.charAt(0).toUpperCase()}
  */
 export const view = <Data, Error, Message>(
   config: ViewConfig<Data, Error, Message>,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> => {
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const { id, data, label, toErrorText, onRetry, toDataView } = config;
 
-  const noticeView = (tone: "Error" | "Warn", title: string, error: Error): Html =>
+  const noticeView = (
+    tone: "Error" | "Warn",
+    title: string,
+    error: Error
+  ): Html =>
     Notice.view(
       {
         tone,
         title,
         body: [toErrorText(error)],
-        actions: [Button.view({ label: "retry", isSmall: true, onClick: onRetry }, h)],
+        actions: [
+          Button.view({ label: "retry", isSmall: true, onClick: onRetry }, h),
+        ],
       },
-      h,
+      h
     );
 
   return [
@@ -59,12 +64,14 @@ export const view = <Data, Error, Message>(
         label: `loading ${label}`,
         attributes: [h.Id(id), h.Tabindex(-1)],
       },
-      h,
+      h
     ),
     ...AsyncData.match(data, {
       onIdle: () => [],
       onLoading: () => [],
-      onFailure: (error) => [noticeView("Error", `${capitalised(label)} not loaded`, error)],
+      onFailure: (error) => [
+        noticeView("Error", `${capitalised(label)} not loaded`, error),
+      ],
       onStale: ({ error, data: lastData }) => [
         noticeView("Warn", `${capitalised(label)} not refreshed`, error),
         ...toDataView(lastData),

package/src/rows/index.ts

@@ -1,4 +1,5 @@
 export { glyphView, rowView, titleView, toggleView, view } from "./rows.ts";
+
 export type {
   GlyphConfig,
   RowConfig,

package/src/rows/rows.ts

@@ -6,12 +6,10 @@ import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
 import { slotView } from "../slot/slot.ts";
 
-// ROWS
-
 /** Configuration for rendering a list of rows with `view`. */
 export type ViewConfig = Readonly<{
   /** Each made with `rowView`. */
-  rows: ReadonlyArray<Html>;
+  rows: readonly Html[];
   /** An outline: nested rows indent 26px and hang on a 1px rule guide. */
   isOutline?: boolean;
   /** Names the list for screen readers; a treegrid needs it. */
@@ -23,18 +21,19 @@ export type ViewConfig = Readonly<{
 }>;
 
 /** A list of 34px rows. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html =>
   h.ul(
     [
       ...(config.isTreegrid === true ? [h.Role("treegrid")] : []),
       ...(config.label === undefined ? [] : [h.AriaLabel(config.label)]),
       h.Class(config.isOutline === true ? "rows tree" : "rows"),
     ],
-    config.rows,
+    config.rows
   );
 
-// ROW
-
 /** A selectable row's checkbox, held in the caller's Model. Its cell inverts while checked; the
  *  row's text is its label, so a click anywhere on the text toggles it, unless the text holds
  *  a button or a link (a `titleView`): then give `label`, and the box's cell is the target. */
@@ -85,7 +84,7 @@ export type RowConfig<Message> = Readonly<{
    *  on the cursor row) and hidden on a phone: `span.tools`. */
   tools?: ReadonlyArray<Html | string>;
   /** Rows under this one, in an outline, each made with `rowView`. */
-  nested?: ReadonlyArray<Html>;
+  nested?: readonly Html[];
   /** Outside a filter, printed only to keep a match on its chain: muted, and "(context)"
    *  after its text for screen readers, which the muting does not reach. In a selectable
    *  row the text names the box, so the box's name says it too. */
@@ -110,12 +109,13 @@ export type RowConfig<Message> = Readonly<{
 
 const cellRole = <Message>(
   config: RowConfig<Message>,
-  h: HtmlBuilder<Message>,
-): Attributes<Message> => (config.treegrid === undefined ? [] : [h.Role("gridcell")]);
+  h: HtmlBuilder<Message>
+): Attributes<Message> =>
+  config.treegrid === undefined ? [] : [h.Role("gridcell")];
 
 const rowRole = <Message>(
   place: TreegridPlace | undefined,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Attributes<Message> =>
   place === undefined
     ? []
@@ -124,24 +124,24 @@ const rowRole = <Message>(
         h.AriaLevel(place.level),
         h.AriaPosinset(place.position),
         h.AriaSetsize(place.setSize),
-        ...(place.isExpanded === undefined ? [] : [h.AriaExpanded(place.isExpanded)]),
+        ...(place.isExpanded === undefined
+          ? []
+          : [h.AriaExpanded(place.isExpanded)]),
       ];
 
-/** A part the caller gives (a glyph, the actions) in its own cell, in a treegrid. */
 const cellView = <Message>(
   config: RowConfig<Message>,
   className: string,
   content: ReadonlyArray<Html | string>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): ReadonlyArray<Html | string> =>
   config.treegrid === undefined
     ? content
     : slotView("span", className, content, h, cellRole(config, h));
 
-/** The row's text, with the words that say a context row is one. */
 const textOf = <Message>(
   config: RowConfig<Message>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): ReadonlyArray<Html | string> =>
   config.isContext === true
     ? [...config.body, h.span([h.Class("sr-only")], [" (context)"])]
@@ -149,9 +149,9 @@ const textOf = <Message>(
 
 const lineView = <Message>(
   config: RowConfig<Message>,
-  box: ReadonlyArray<Html>,
+  box: readonly Html[],
   text: Html,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html =>
   h.div(
     [
@@ -159,13 +159,20 @@ const lineView = <Message>(
       ...rowRole(config.treegrid, h),
       h.Class(
         `row${config.isContext === true ? " context" : ""}${
-          config.isLink === true && config.treegrid === undefined ? " linked" : ""
-        }`,
+          config.isLink === true && config.treegrid === undefined
+            ? " linked"
+            : ""
+        }`
       ),
     ],
     [
       ...box,
-      ...cellView(config, "cell", config.glyph === undefined ? [] : [config.glyph], h),
+      ...cellView(
+        config,
+        "cell",
+        config.glyph === undefined ? [] : [config.glyph],
+        h
+      ),
       text,
       ...slotView("span", "slot", config.slot ?? [], h, [
         ...(config.slotAttributes ?? []),
@@ -173,13 +180,13 @@ const lineView = <Message>(
       ]),
       ...cellView(config, "cell actions", config.actions ?? [], h),
       ...slotView("span", "tools", config.tools ?? [], h, cellRole(config, h)),
-    ],
+    ]
   );
 
 const selectableLineView = <Message>(
   config: RowConfig<Message>,
   select: RowSelect<Message>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html =>
   UiCheckbox.view(
     {
@@ -187,12 +194,16 @@ const selectableLineView = <Message>(
       isChecked: select.isChecked,
       onToggle: select.onToggle,
       toView: (groups) => {
-        const boxView = (name: ReadonlyArray<Html>): Html =>
+        const boxView = (name: readonly Html[]): Html =>
           h.span(
             [...cellRole(config, h), h.Class("row-check")],
-            [h.button(groups.checkbox), ...name],
+            [h.button(groups.checkbox), ...name]
           );
-        const label = h.label([...groups.label, h.Class("grow")], textOf(config, h));
+
+        const label = h.label(
+          [...groups.label, h.Class("grow")],
+          textOf(config, h)
+        );
 
         return select.label === undefined
           ? lineView(
@@ -200,45 +211,63 @@ const selectableLineView = <Message>(
               [boxView([])],
               config.treegrid === undefined
                 ? label
-                : h.span([...cellRole(config, h), h.Class("cell grow-cell")], [label]),
-              h,
+                : h.span(
+                    [...cellRole(config, h), h.Class("cell grow-cell")],
+                    [label]
+                  ),
+              h
             )
           : lineView(
               config,
-              [boxView([h.span([...groups.label, h.Class("sr-only")], [select.label])])],
-              h.div([...cellRole(config, h), h.Class("grow")], textOf(config, h)),
-              h,
+              [
+                boxView([
+                  h.span([...groups.label, h.Class("sr-only")], [select.label]),
+                ]),
+              ],
+              h.div(
+                [...cellRole(config, h), h.Class("grow")],
+                textOf(config, h)
+              ),
+              h
             );
       },
     },
-    h,
+    h
   );
 
 /** One 34px row: box, glyph, text, slot, actions, tools, and the rows nested under it. Hover
  *  and focus tint it head. The box of a selectable row is built on `@foldkit/ui`'s Checkbox:
  *  a `role="checkbox"` button (`aria-checked`) whose whole cell is its target. In a treegrid
  *  the line is the `role="row"` and each part a `role="gridcell"`. */
-export const rowView = <Message>(config: RowConfig<Message>, h: HtmlBuilder<Message>): Html => {
+export const rowView = <Message>(
+  config: RowConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html => {
   const listRole = config.treegrid === undefined ? [] : [h.Role("none")];
 
   return h.keyed("li")(config.key, listRole, [
     config.select === undefined
-      ? lineView(config, [], h.div([...cellRole(config, h), h.Class("grow")], textOf(config, h)), h)
+      ? lineView(
+          config,
+          [],
+          h.div([...cellRole(config, h), h.Class("grow")], textOf(config, h)),
+          h
+        )
       : selectableLineView(config, config.select, h),
     ...slotView("ul", "rows", config.nested ?? [], h, listRole),
   ]);
 };
 
-// GLYPH SLOT
-
 /** Configuration for rendering a glyph slot with `glyphView`. */
 export type GlyphConfig = Readonly<{
   name: GlyphName;
 }>;
 
 /** A glyph in the row's 18px slot. */
-export const glyphView = <Message>(config: GlyphConfig, h: HtmlBuilder<Message>): Html =>
-  h.span([h.Class("glyph")], [Glyph.view({ name: config.name }, h)]);
+export const glyphView = <Message>(
+  config: GlyphConfig,
+  h: HtmlBuilder<Message>
+): Html => h.span([h.Class("glyph")], [Glyph.view({ name: config.name }, h)]);
 
 /** Configuration for rendering a fold toggle with `toggleView`. */
 export type ToggleConfig<Message> = Readonly<{
@@ -251,7 +280,10 @@ export type ToggleConfig<Message> = Readonly<{
 
 /** The glyph slot as a fold toggle, built on `@foldkit/ui`'s Button: a ring, open or closed,
  *  `aria-expanded`, named for the rows it shows. */
-export const toggleView = <Message>(config: ToggleConfig<Message>, h: HtmlBuilder<Message>): Html =>
+export const toggleView = <Message>(
+  config: ToggleConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html =>
   UiButton.view(
     {
       onClick: config.onToggle,
@@ -263,14 +295,12 @@ export const toggleView = <Message>(config: ToggleConfig<Message>, h: HtmlBuilde
             h.AriaLabel(`Rows under ${config.label}`),
             h.Class("glyph"),
           ],
-          [Glyph.view({ name: config.isExpanded ? "ring" : "ring-closed" }, h)],
+          [Glyph.view({ name: config.isExpanded ? "ring" : "ring-closed" }, h)]
         ),
     },
-    h,
+    h
   );
 
-// TITLE
-
 /** Configuration for rendering a row's title with `titleView`. */
 export type TitleConfig<Message> = Readonly<{
   label: string;
@@ -281,15 +311,21 @@ export type TitleConfig<Message> = Readonly<{
 
 /** The row's title as the button that opens it, built on `@foldkit/ui`'s Button; it
  *  underlines on hover. */
-export const titleView = <Message>(config: TitleConfig<Message>, h: HtmlBuilder<Message>): Html =>
+export const titleView = <Message>(
+  config: TitleConfig<Message>,
+  h: HtmlBuilder<Message>
+): Html =>
   UiButton.view(
     {
       onClick: config.onOpen,
       toView: (groups) =>
         h.button(
-          [...groups.button, h.Class(config.isDone === true ? "title done-title" : "title")],
-          [config.label],
+          [
+            ...groups.button,
+            h.Class(config.isDone === true ? "title done-title" : "title"),
+          ],
+          [config.label]
         ),
     },
-    h,
+    h
   );

package/src/scheme/index.ts

@@ -1,3 +1,5 @@
 export { Palette, Scheme } from "./scheme.ts";
+
 export { schemeScript } from "./script.ts";
-export * as SchemeSwitch from "./schemeSwitch.ts";
+
+export * as SchemeSwitch from "./scheme-switch.ts";

package/src/scheme/{schemeSwitch.ts → scheme-switch.ts}

@@ -12,17 +12,14 @@ import * as Segmented from "../segmented/segmented.ts";
 import { Palette, Scheme, fromPinnedValue, toPinnedValue } from "./scheme.ts";
 import { SCHEME_ATTRIBUTE, SCHEME_STORAGE_KEY } from "./script.ts";
 
-// MODEL
-
 /** Schema for the scheme switch: the scheme in force as far as the page has seen, and the
  *  palette the reader's system prefers, which `System` prints in. */
 export const Model = Schema.Struct({
   scheme: Scheme,
   systemPalette: Palette,
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages the scheme switch can produce. */
 export const Message = defineMessageUnion({
@@ -31,9 +28,8 @@ export const Message = defineMessageUnion({
   CompletedReadScheme: { scheme: Scheme },
   UpdatedSystemPalette: { palette: Palette },
 });
-export type Message = typeof Message.Type;
 
-// COMMAND
+export type Message = typeof Message.Type;
 
 /** Pins a scheme on `<html data-scheme>` and remembers it on this device in `localStorage`
  *  under the key `schemeScript` reads; `System` removes both. The attribute is written first,
@@ -43,7 +39,7 @@ export const PinScheme = Command.define("PinScheme", {
   args: { scheme: Scheme },
   messages: [Message.CompletedPinScheme],
   execute: ({ scheme }) =>
-    Effect.try(() =>
+    Effect.try(() => {
       Option.match(toPinnedValue(scheme), {
         onNone: () => {
           document.documentElement.removeAttribute(SCHEME_ATTRIBUTE);
@@ -53,8 +49,8 @@ export const PinScheme = Command.define("PinScheme", {
           document.documentElement.setAttribute(SCHEME_ATTRIBUTE, value);
           localStorage.setItem(SCHEME_STORAGE_KEY, value);
         },
-      }),
-    ).pipe(Effect.ignore, Effect.as(Message.CompletedPinScheme())),
+      });
+    }).pipe(Effect.ignore, Effect.as(Message.CompletedPinScheme())),
 });
 
 /** Reads the scheme in force from `<html data-scheme>`: what `schemeScript` pinned before the
@@ -63,13 +59,13 @@ export const ReadScheme = Command.define("ReadScheme", {
   messages: [Message.CompletedReadScheme],
   execute: Effect.sync(() =>
     Message.CompletedReadScheme({
-      scheme: fromPinnedValue(document.documentElement.getAttribute(SCHEME_ATTRIBUTE)),
-    }),
+      scheme: fromPinnedValue(
+        document.documentElement.getAttribute(SCHEME_ATTRIBUTE)
+      ),
+    })
   ),
 });
 
-// INIT
-
 /** Creates the switch on `System` in the paper palette, as the server renders it, with
  *  `ReadScheme`, which the client runs after hydration to pick up the scheme `schemeScript`
  *  pinned before first paint (the server ignores it). The `subscriptions` bring in the
@@ -79,8 +75,6 @@ export const init = (): Update.Return<Model, Message> => ({
   commands: [ReadScheme()],
 });
 
-// ACCESSORS
-
 /** The scheme in force: the reader's choice, or `System`. */
 export const scheme = (model: Model): Scheme => model.scheme;
 
@@ -92,38 +86,35 @@ export const palette = (model: Model): Palette =>
     Match.when("System", () => model.systemPalette),
     Match.when("Paper", () => "Paper"),
     Match.when("Plum", () => "Plum"),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
-// UPDATE
-
 type UpdateReturn = Update.Return<Model, Message>;
 
 /** Processes a scheme switch Message and returns the next Model and Commands. */
 export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
-    SelectedScheme: ({ scheme }) => ({
-      model: modifyFields(model, { scheme: () => scheme }),
-      commands: [PinScheme({ scheme })],
+    SelectedScheme: ({ scheme: chosen }) => ({
+      model: modifyFields(model, { scheme: () => chosen }),
+      commands: [PinScheme({ scheme: chosen })],
     }),
     CompletedPinScheme: () => ({ model }),
-    CompletedReadScheme: ({ scheme }) => ({
-      model: modifyFields(model, { scheme: () => scheme }),
+    CompletedReadScheme: ({ scheme: read }) => ({
+      model: modifyFields(model, { scheme: () => read }),
     }),
-    UpdatedSystemPalette: ({ palette }) => ({
-      model: modifyFields(model, { systemPalette: () => palette }),
+    UpdatedSystemPalette: ({ palette: systemPalette }) => ({
+      model: modifyFields(model, { systemPalette: () => systemPalette }),
     }),
   });
 
 /** Pins a scheme from outside the switch, such as a command palette entry. */
-export const select = (model: Model, scheme: Scheme): UpdateReturn =>
-  update(model, Message.SelectedScheme({ scheme }));
-
-// SUBSCRIPTION
+export const select = (model: Model, chosen: Scheme): UpdateReturn =>
+  update(model, Message.SelectedScheme({ scheme: chosen }));
 
 const systemPaletteChanges = Dom.streamFromMediaQuery({
   query: "(prefers-color-scheme: dark)",
-  mapMatches: (isDark) => Message.UpdatedSystemPalette({ palette: isDark ? "Plum" : "Paper" }),
+  mapMatches: (isDark) =>
+    Message.UpdatedSystemPalette({ palette: isDark ? "Plum" : "Paper" }),
 });
 
 /** Keeps the switch in step with the palette the reader's system prefers, which `System`
@@ -133,8 +124,6 @@ export const subscriptions = Subscription.make<Model, Message>()(() => ({
   schemeSwitchSystemPalette: Subscription.persistentEntry(systemPaletteChanges),
 }));
 
-// VIEW
-
 const SEGMENTS: ReadonlyArray<Segmented.Segment<Scheme>> = [
   { value: "System", label: "system" },
   { value: "Paper", label: "paper" },
@@ -150,8 +139,8 @@ export const view = defineView<Model, Message>((model, h): Html =>
       label: "Palette",
       options: SEGMENTS,
       value: model.scheme,
-      onSelect: (scheme) => Message.SelectedScheme({ scheme }),
+      onSelect: (chosen) => Message.SelectedScheme({ scheme: chosen }),
     },
-    h,
-  ),
+    h
+  )
 );

package/src/scheme/scheme.ts

@@ -3,28 +3,28 @@ import { Match, Option, Schema } from "effect";
 /** The colour scheme: `Paper` (light) or `Plum` (dark) pinned on `<html data-scheme>`, as
  *  `"light"` or `"dark"`, or `System`, which follows the reader's system in CSS alone. */
 export const Scheme = Schema.Literals(["System", "Paper", "Plum"]);
+
 export type Scheme = typeof Scheme.Type;
 
 /** The palette a page prints in: `Paper` (light) or `Plum` (dark). Under `System` it is the
  *  one the reader's system prefers. */
 export const Palette = Schema.Literals(["Paper", "Plum"]);
+
 export type Palette = typeof Palette.Type;
 
-/** The `data-scheme` value a scheme pins, or none for `System`. */
 export const toPinnedValue = (scheme: Scheme): Option.Option<string> =>
   Match.value(scheme).pipe(
     Match.withReturnType<Option.Option<string>>(),
     Match.when("System", () => Option.none()),
     Match.when("Paper", () => Option.some("light")),
     Match.when("Plum", () => Option.some("dark")),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
-/** The scheme a `data-scheme` value pins. Anything else, or nothing, is `System`. */
 export const fromPinnedValue = (value: string | null): Scheme =>
   Match.value(value).pipe(
     Match.withReturnType<Scheme>(),
     Match.when("light", () => "Paper"),
     Match.when("dark", () => "Plum"),
-    Match.orElse(() => "System"),
+    Match.orElse(() => "System")
   );

package/src/secret/index.ts

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

package/src/secret/secret.ts

@@ -1,7 +1,5 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-// VIEW
-
 /** Configuration for rendering a secret with `view`. */
 export type ViewConfig = Readonly<{
   value: string;
@@ -14,11 +12,14 @@ export type ViewConfig = Readonly<{
 
 /** A value shown once (a key, a token): code in a head-tinted box, named by its label, with
  *  the button that copies it. */
-export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
+export const view = <Message>(
+  config: ViewConfig,
+  h: HtmlBuilder<Message>
+): Html => {
   const { value, label, actions } = config;
 
   return h.div(
     [h.Class("secret")],
-    [h.code([h.Role("group"), h.AriaLabel(label)], [value]), ...actions],
+    [h.code([h.Role("group"), h.AriaLabel(label)], [value]), ...actions]
   );
 };

package/src/segmented/index.ts

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

package/src/segmented/segmented.ts

@@ -6,8 +6,6 @@ import { pressedAttribute } from "../button/button.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
 
-// VIEW
-
 /** One segment: its value, its words, and optionally a glyph printed instead of the words. */
 export type Segment<Value extends string> = Readonly<{
   value: Value;
@@ -28,7 +26,7 @@ export type ViewConfig<Value extends string, Message> = Readonly<{
 const segmentView = <Value extends string, Message>(
   config: ViewConfig<Value, Message>,
   option: Segment<Value>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html =>
   UiButton.view(
     {
@@ -41,12 +39,19 @@ const segmentView = <Value extends string, Message>(
             pressedAttribute(option.value === config.value, h),
             ...(option.glyph === undefined
               ? []
-              : [h.AriaLabel(option.label), h.DataAttribute("tip", option.label)]),
+              : [
+                  h.AriaLabel(option.label),
+                  h.DataAttribute("tip", option.label),
+                ]),
           ],
-          [option.glyph === undefined ? option.label : Glyph.view({ name: option.glyph }, h)],
+          [
+            option.glyph === undefined
+              ? option.label
+              : Glyph.view({ name: option.glyph }, h),
+          ]
         ),
     },
-    h,
+    h
   );
 
 /** A choice of one: the pressed segment inverts and is `aria-pressed="true"`, the others
@@ -54,12 +59,19 @@ const segmentView = <Value extends string, Message>(
  *  a compact switch of 26px cells (a layout, a density). */
 export const view = <Value extends string, Message>(
   config: ViewConfig<Value, Message>,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
-  const isGlyphs = Array.every(config.options, (option) => option.glyph !== undefined);
+  const isGlyphs = Array.every(
+    config.options,
+    (option) => option.glyph !== undefined
+  );
 
   return h.div(
-    [h.Role("group"), h.AriaLabel(config.label), h.Class(isGlyphs ? "switch" : "nav")],
-    Array.map(config.options, (option) => segmentView(config, option, h)),
+    [
+      h.Role("group"),
+      h.AriaLabel(config.label),
+      h.Class(isGlyphs ? "switch" : "nav"),
+    ],
+    Array.map(config.options, (option) => segmentView(config, option, h))
   );
 };

package/src/select-all/index.ts

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