@gjermundgaraba-designs/pixel-paper 0.11.0 → 0.13.0

package/dist/src/lineDiff/lineDiff.d.ts

@@ -9,8 +9,22 @@ export type ViewConfig = Readonly<{
      *  default. */
     context?: number;
 }>;
+/** Configuration for rendering a unified diff with `patchView`. */
+export type PatchViewConfig = Readonly<{
+    /** One file's unified diff, as `diff -u` or `git diff -- <path>` writes it. */
+    patch: string;
+    /** Names the two sides for screen readers: `"Version 3 against version 4"`. */
+    label: string;
+}>;
 /** A line diff as a ruled table: the old and new numbers, a sign, the line. Added lines sit on
  *  the head tint behind an ink +; removed lines go muted behind a red −, and each sign is
  *  named for screen readers. Two texts that are the same say so in a sentence. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
+/** A unified diff the caller already has (from a server, or `git diff -- <path>`) as `view`'s
+ *  table: its hunks' lines, numbered from their headers, and the unchanged lines between hunks
+ *  folded into a counted row. Lines past the last hunk are not in the patch, so nothing counts
+ *  them. An empty patch says there is no difference, as `view` does; anything but one file
+ *  with a hunk (text that is not a diff, a binary change, several files) says it cannot be
+ *  shown as lines. */
+export declare const patchView: <Message>(config: PatchViewConfig, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=lineDiff.d.ts.map

package/dist/src/lineDiff/lineDiff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lineDiff.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/lineDiff.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiBtD,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd;mBACe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AA0CH;;kFAEkF;AAClF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAsB3E,CAAC"}
+{"version":3,"file":"lineDiff.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/lineDiff.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiBtD,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd;mBACe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,mEAAmE;AACnE,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AA2EH;;kFAEkF;AAClF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAO3E,CAAC;AAEF;;;;;sBAKsB;AACtB,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,eAAe,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAWrF,CAAC"}

package/dist/src/lineDiff/lineDiff.js

@@ -1,7 +1,7 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Option } from "effect";
+import { Array, Option, String } from "effect";
 import { LOCALE } from "../locale/locale.js";
-import { DiffRow, diffLinesOf, foldUnchanged, hasChanges, } from "./diff.js";
+import { DiffRow, diffRowsOf, diffRowsOfPatch, foldUnchanged, hasChanges, } from "./diff.js";
 // VIEW
 const DEFAULT_CONTEXT = 2;
 const COLUMN_COUNT = 4;
@@ -10,34 +10,56 @@ const KIND = {
     Added: { className: "add", sign: "+", said: "added" },
     Removed: { className: "del", sign: "−", said: "removed" },
 };
-const numberText = (maybeNumber) => __foldkitBrandViewResult((Option.match(maybeNumber, { onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onNone"), onSome: (lineNumber) => __foldkitBrandViewResult((`${lineNumber}`), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onSome") })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#numberText");
-const lineKey = (line) => __foldkitBrandViewResult((`${numberText(line.maybeOldNumber)}:${numberText(line.maybeNewNumber)}`), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#lineKey");
-const lineView = (line, h) => {
-    const { className, sign, said } = KIND[line.kind];
-    return __foldkitBrandViewResult((h.keyed("tr")(lineKey(line), [h.Class(className)], [
-        h.td([h.Class("ln")], [numberText(line.maybeOldNumber)]),
-        h.td([h.Class("ln")], [numberText(line.maybeNewNumber)]),
+const lineView = (kind, numbers, text, h) => {
+    const { className, sign, said } = KIND[kind];
+    return __foldkitBrandViewResult((h.keyed("tr")(`${numbers.old}:${numbers.new}`, [h.Class(className)], [
+        h.td([h.Class("ln")], [numbers.old]),
+        h.td([h.Class("ln")], [numbers.new]),
         h.td([h.Class("sign"), h.AriaLabel(said)], [sign]),
-        h.td([h.Class("line")], [line.text === "" ? " " : line.text]),
+        h.td([h.Class("line")], [text === "" ? " " : text]),
     ])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#lineView");
 };
-const foldView = (count, firstLine, h) => __foldkitBrandViewResult((h.keyed("tr")(`fold-${lineKey(firstLine)}`, [h.Class("fold")], [h.td([h.Colspan(COLUMN_COUNT)], [`${count.toLocaleString(LOCALE)} unchanged lines`])])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#foldView");
+const foldView = (count, firstOldNumber, h) => __foldkitBrandViewResult((h.keyed("tr")(`fold-${firstOldNumber}`, [h.Class("fold")], [
+    h.td([h.Colspan(COLUMN_COUNT)], [`${count.toLocaleString(LOCALE)} unchanged ${count === 1 ? "line" : "lines"}`]),
+])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#foldView");
 const rowView = (row, h) => __foldkitBrandViewResult((DiffRow.match(row, {
-    Line: ({ line }) => __foldkitBrandViewResult((lineView(line, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#Line"),
-    Fold: ({ count, firstLine }) => __foldkitBrandViewResult((foldView(count, firstLine, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#Fold"),
+    Same: ({ text, oldNumber, newNumber }) => __foldkitBrandViewResult((lineView("Same", { old: `${oldNumber}`, new: `${newNumber}` }, text, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#Same"),
+    Added: ({ text, newNumber }) => __foldkitBrandViewResult((lineView("Added", { old: "", new: `${newNumber}` }, text, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#Added"),
+    Removed: ({ text, oldNumber }) => __foldkitBrandViewResult((lineView("Removed", { old: `${oldNumber}`, new: "" }, text, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#Removed"),
+    Fold: ({ count, firstOldNumber }) => __foldkitBrandViewResult((foldView(count, firstOldNumber, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#Fold"),
 })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#rowView");
+const noteView = (note, h) => __foldkitBrandViewResult((h.p([h.Class("note-line")], [note])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#noteView");
+const SAME_NOTE = "No difference: both sides hold the same text.";
+const tableView = (rows, label, h) => __foldkitBrandViewResult((h.div([h.Class("diff-wrap")], [
+    h.table([h.AriaLabel(label), h.Class("diff")], [
+        h.tbody([], Array.map(rows, (row) => __foldkitBrandViewResult((rowView(row, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#anonymous"))),
+    ]),
+])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#tableView");
 /** A line diff as a ruled table: the old and new numbers, a sign, the line. Added lines sit on
  *  the head tint behind an ink +; removed lines go muted behind a red −, and each sign is
  *  named for screen readers. Two texts that are the same say so in a sentence. */
 export const view = (config, h) => {
     const { before, after, label, context = DEFAULT_CONTEXT } = config;
-    const lines = diffLinesOf(before, after);
-    if (!hasChanges(lines)) {
-        return __foldkitBrandViewResult((h.p([h.Class("note-line")], ["No difference: both sides hold the same text."])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#view");
+    const rows = diffRowsOf(before, after);
+    return __foldkitBrandViewResult((hasChanges(rows)
+        ? tableView(foldUnchanged(rows, context), label, h)
+        : noteView(SAME_NOTE, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#view");
+};
+/** A unified diff the caller already has (from a server, or `git diff -- <path>`) as `view`'s
+ *  table: its hunks' lines, numbered from their headers, and the unchanged lines between hunks
+ *  folded into a counted row. Lines past the last hunk are not in the patch, so nothing counts
+ *  them. An empty patch says there is no difference, as `view` does; anything but one file
+ *  with a hunk (text that is not a diff, a binary change, several files) says it cannot be
+ *  shown as lines. */
+export const patchView = (config, h) => {
+    const { patch, label } = config;
+    if (String.isEmpty(String.trim(patch))) {
+        return __foldkitBrandViewResult((noteView(SAME_NOTE, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#patchView");
+    }
+    else {
+        return __foldkitBrandViewResult((Option.match(diffRowsOfPatch(patch), {
+            onNone: () => __foldkitBrandViewResult((noteView("This diff cannot be shown as lines.", h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onNone"),
+            onSome: (rows) => __foldkitBrandViewResult((tableView(rows, label, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onSome"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#patchView");
     }
-    return __foldkitBrandViewResult((h.div([h.Class("diff-wrap")], [
-        h.table([h.AriaLabel(label), h.Class("diff")], [
-            h.tbody([], Array.map(foldUnchanged(lines, context), (row) => __foldkitBrandViewResult((rowView(row, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#anonymous"))),
-        ]),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#view");
 };

package/dist/src/passwordField/passwordField.d.ts

@@ -17,8 +17,10 @@ export type ViewConfig<Message> = Readonly<{
     onToggleShown: Message;
     /** A sans sentence under the box. */
     help?: string;
-    /** Red on the box and on its label; say why in an ErrorSummary above the form. */
-    isInvalid?: boolean;
+    /** Why the value was refused: a red sentence under the control, which the control is
+     *  described by, with red on its box and its label (`aria-invalid`). Say it again in an
+     *  ErrorSummary above the form. */
+    error?: string | undefined;
     /** The form is not sent without it: screen readers hear "required" (`aria-required`). */
     isRequired?: boolean;
     /** For a new password: four short cells and a word under the box (an empty box is "too
@@ -26,11 +28,14 @@ export type ViewConfig<Message> = Readonly<{
     strength?: Strength;
     /** `current-password` to sign in, `new-password` to set one. */
     autocomplete?: "current-password" | "new-password";
+    /** The show toggle's name, "Show password" when not given: give each of two fields in a
+     *  form its own, such as "Show password again". */
+    toggleLabel?: string;
 }>;
 /** A boxed password field with a show toggle inside its box, built on `@foldkit/ui`'s Input:
- *  named by its label, described by its help line, `aria-invalid` when it failed and
- *  `aria-required` when the form is not sent without it. The toggle is a button named "Show
- *  password", `aria-pressed` while the password shows. For a new password, its strength is a
- *  meter. */
+ *  named by its label, described by its help line, `aria-invalid` and described by its
+ *  `error` when it failed, and `aria-required` when the form is not sent without it. The
+ *  toggle is a button named `toggleLabel` ("Show password"), `aria-pressed` while the
+ *  password shows. For a new password, its strength is a meter. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=passwordField.d.ts.map

package/dist/src/passwordField/passwordField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"passwordField.d.ts","sourceRoot":"","sources":["../../../src/passwordField/passwordField.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAQtD,wEAAwE;AACxE,eAAO,MAAM,QAAQ,2CAAmC,CAAC;AACzD,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAiB5C,gEAAgE;AAChE,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC;gDAC4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,aAAa,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;iDAC6C;IAC7C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,kBAAkB,GAAG,cAAc,CAAC;CACpD,CAAC,CAAC;AAEH;;;;aAIa;AACb,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA8EpF,CAAC"}
+{"version":3,"file":"passwordField.d.ts","sourceRoot":"","sources":["../../../src/passwordField/passwordField.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAStD,wEAAwE;AACxE,eAAO,MAAM,QAAQ,2CAAmC,CAAC;AACzD,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAiB5C,gEAAgE;AAChE,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC;gDAC4C;IAC5C,OAAO,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,aAAa,EAAE,OAAO,CAAC;IACvB,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;iDAC6C;IAC7C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,gEAAgE;IAChE,YAAY,CAAC,EAAE,kBAAkB,GAAG,cAAc,CAAC;IACnD;uDACmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC,CAAC;AAEH;;;;mEAImE;AACnE,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAiFpF,CAAC"}

package/dist/src/passwordField/passwordField.js

@@ -2,6 +2,7 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Input as UiInput } from "@foldkit/ui";
 import { Match, Schema } from "effect";
 import { pressedAttribute } from "../button/button.js";
+import { describedByError, errorView } from "../field/field.js";
 import * as IconButton from "../iconButton/iconButton.js";
 import * as Meter from "../meter/meter.js";
 // STRENGTH
@@ -10,17 +11,17 @@ export const Strength = Schema.Literals([0, 1, 2, 3, 4]);
 const STRENGTH_CELLS = 4;
 const strengthWord = (strength) => __foldkitBrandViewResult((Match.value(strength).pipe(Match.withReturnType(), Match.when(0, () => __foldkitBrandViewResult(("too short"), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#anonymous")), Match.when(1, () => __foldkitBrandViewResult(("weak"), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#anonymous~2")), Match.when(2, () => __foldkitBrandViewResult(("fair"), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#anonymous~3")), Match.when(3, () => __foldkitBrandViewResult(("good"), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#anonymous~4")), Match.when(4, () => __foldkitBrandViewResult(("strong"), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#anonymous~5")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/passwordField/passwordField.js#strengthWord");
 /** A boxed password field with a show toggle inside its box, built on `@foldkit/ui`'s Input:
- *  named by its label, described by its help line, `aria-invalid` when it failed and
- *  `aria-required` when the form is not sent without it. The toggle is a button named "Show
- *  password", `aria-pressed` while the password shows. For a new password, its strength is a
- *  meter. */
+ *  named by its label, described by its help line, `aria-invalid` and described by its
+ *  `error` when it failed, and `aria-required` when the form is not sent without it. The
+ *  toggle is a button named `toggleLabel` ("Show password"), `aria-pressed` while the
+ *  password shows. For a new password, its strength is a meter. */
 export const view = (config, h) => {
-    const { id, label, value, onInput, isShown, onToggleShown, help, isInvalid = false, isRequired = false, strength, autocomplete = "current-password", } = config;
+    const { id, label, value, onInput, isShown, onToggleShown, help, error, isRequired = false, strength, autocomplete = "current-password", toggleLabel = "Show password", } = config;
     return __foldkitBrandViewResult((UiInput.view({
         id,
         value,
         onInput,
-        isInvalid,
+        isInvalid: error !== undefined,
         type: isShown ? "text" : "password",
         hasDescription: help !== undefined,
         toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("field boxed")], [
@@ -30,16 +31,18 @@ export const view = (config, h) => {
                 h.input([
                     ...groups.input,
                     h.Autocomplete(autocomplete),
+                    ...describedByError(id, error, help !== undefined, h),
                     ...(isRequired ? [h.AriaRequired(true)] : []),
                 ]),
                 IconButton.view({
                     glyph: isShown ? "eye-off" : "eye",
-                    label: "Show password",
+                    label: toggleLabel,
                     isQuiet: true,
                     onClick: onToggleShown,
                     attributes: [pressedAttribute(isShown, h)],
                 }, h),
             ]),
+            ...errorView(id, error, h),
             ...(strength === undefined
                 ? []
                 : [

package/dist/src/places/places.d.ts

@@ -1,6 +1,8 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
-/** One place in Places: a button that shows it. */
-export type Place<Message> = Readonly<{
+/** One place in Places: a link to its address (`href`), or a button that shows it in the page
+ *  (`onSelect`). */
+export type Place<Message> = PlaceContent & PlaceTarget<Message>;
+type PlaceContent = Readonly<{
     /** Stable and unique among the places: the row's key, so two places that share a name stay
      *  apart. */
     id: string;
@@ -12,8 +14,15 @@ export type Place<Message> = Readonly<{
     count?: number;
     /** A quiet IconButton after it that acts on the place itself (remove a saved filter). */
     tools?: ReadonlyArray<Html>;
-    /** Shows the place. */
+}>;
+type PlaceTarget<Message> = Readonly<{
+    /** The place's address: the line is a link, so it opens in a new tab and reads as one. */
+    href: string;
+    onSelect?: never;
+}> | Readonly<{
+    /** Shows the place without leaving the page: the line is a button. */
     onSelect: Message;
+    href?: never;
 }>;
 /** Configuration for rendering places with `view`. */
 export type ViewConfig<Message> = Readonly<{
@@ -22,7 +31,8 @@ export type ViewConfig<Message> = Readonly<{
     places: ReadonlyArray<Place<Message>>;
 }>;
 /** A column of places to go (areas, collections, saved filters), flush in a rail panel: a
- *  navigation landmark named by its label, one line each a button built on `@foldkit/ui`'s
- *  Button, the one you are in `aria-current="page"` and printed inverted. */
+ *  navigation landmark named by its label, one line each a link to the place or a button built
+ *  on `@foldkit/ui`'s Button, the one you are in `aria-current="page"` and printed inverted. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
+export {};
 //# sourceMappingURL=places.d.ts.map

package/dist/src/places/places.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"places.d.ts","sourceRoot":"","sources":["../../../src/places/places.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAOtD,mDAAmD;AACnD,MAAM,MAAM,KAAK,CAAC,OAAO,IAAI,QAAQ,CAAC;IACpC;iBACa;IACb,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,uBAAuB;IACvB,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,sDAAsD;AACtD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC,CAAC;AAgCH;;6EAE6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAOpF,CAAC"}
+{"version":3,"file":"places.d.ts","sourceRoot":"","sources":["../../../src/places/places.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAOtD;oBACoB;AACpB,MAAM,MAAM,KAAK,CAAC,OAAO,IAAI,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AAEjE,KAAK,YAAY,GAAG,QAAQ,CAAC;IAC3B;iBACa;IACb,EAAE,EAAE,MAAM,CAAC;IACX,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yFAAyF;IACzF,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;CAC7B,CAAC,CAAC;AAEH,KAAK,WAAW,CAAC,OAAO,IACpB,QAAQ,CAAC;IACP,0FAA0F;IAC1F,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CAAC,GACF,QAAQ,CAAC;IACP,sEAAsE;IACtE,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC;CACd,CAAC,CAAC;AAEP,sDAAsD;AACtD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,yDAAyD;IACzD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC,CAAC;AAgCH;;gGAEgG;AAChG,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAOpF,CAAC"}

package/dist/src/places/places.js

@@ -3,24 +3,26 @@ import { Button as UiButton } from "@foldkit/ui";
 import { Array } from "effect";
 import { LOCALE } from "../locale/locale.js";
 import { slotView } from "../slot/slot.js";
-const placeView = (h) => __foldkitBrandViewResult(((place) => {
-    const { label, isCurrent = false, count, tools = [], onSelect } = place;
-    return __foldkitBrandViewResult((h.keyed("li")(place.id, [], [
-        UiButton.view({
-            onClick: onSelect,
-            toView: (groups) => __foldkitBrandViewResult((h.button([...groups.button, ...(isCurrent ? [h.AriaCurrent("page")] : [])], [
-                h.span([h.Class("place-name")], [label]),
-                ...(count === undefined
-                    ? []
-                    : [" ", h.span([h.Class("place-count")], [count.toLocaleString(LOCALE)])]),
-            ])), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#toView"),
-        }, h),
-        ...slotView("span", "place-tools", tools, h),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#anonymous");
-}), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#placeView");
+const lineView = (place, h) => {
+    const { label, isCurrent = false, count } = place;
+    const current = isCurrent ? [h.AriaCurrent("page")] : [];
+    const content = [
+        h.span([h.Class("place-name")], [label]),
+        ...(count === undefined
+            ? []
+            : [" ", h.span([h.Class("place-count")], [count.toLocaleString(LOCALE)])]),
+    ];
+    return __foldkitBrandViewResult((place.href === undefined
+        ? UiButton.view({
+            onClick: place.onSelect,
+            toView: (groups) => __foldkitBrandViewResult((h.button([...groups.button, ...current], content)), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#toView"),
+        }, h)
+        : h.a([h.Href(place.href), ...current], content)), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#lineView");
+};
+const placeView = (h) => __foldkitBrandViewResult(((place) => __foldkitBrandViewResult((h.keyed("li")(place.id, [], [lineView(place, h), ...slotView("span", "place-tools", place.tools ?? [], h)])), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#anonymous")), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#placeView");
 /** A column of places to go (areas, collections, saved filters), flush in a rail panel: a
- *  navigation landmark named by its label, one line each a button built on `@foldkit/ui`'s
- *  Button, the one you are in `aria-current="page"` and printed inverted. */
+ *  navigation landmark named by its label, one line each a link to the place or a button built
+ *  on `@foldkit/ui`'s Button, the one you are in `aria-current="page"` and printed inverted. */
 export const view = (config, h) => {
     const { label, places } = config;
     return __foldkitBrandViewResult((h.nav([h.AriaLabel(label), h.Class("places")], [h.ul([], Array.map(places, placeView(h)))])), "@gjermundgaraba-designs/pixel-paper/src/places/places.js#view");

package/dist/src/radioChoices/radioChoices.d.ts

@@ -83,8 +83,8 @@ export type ViewInputs = Readonly<{
     options: ReadonlyArray<RadioOption>;
     /** The parent's selection. */
     selectedValue: Option.Option<string>;
-    /** The group is `aria-invalid` and its marks and names turn red; say why in an
-     *  ErrorSummary above the form. */
+    /** The group is `aria-invalid` and its marks and names turn red; say why in its
+     *  Fieldset's `error` and in an ErrorSummary above the form. */
     isInvalid?: boolean;
 }>;
 /**
@@ -117,8 +117,8 @@ export declare const view: import("foldkit/submodel").View<{
     options: ReadonlyArray<RadioOption>;
     /** The parent's selection. */
     selectedValue: Option.Option<string>;
-    /** The group is `aria-invalid` and its marks and names turn red; say why in an
-     *  ErrorSummary above the form. */
+    /** The group is `aria-invalid` and its marks and names turn red; say why in its
+     *  Fieldset's `error` and in an ErrorSummary above the form. */
     isInvalid?: boolean;
 }>>;
 //# sourceMappingURL=radioChoices.d.ts.map

package/dist/src/radioChoices/radioChoices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radioChoices.d.ts","sourceRoot":"","sources":["../../../src/radioChoices/radioChoices.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAK/C,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAIzC;2FAC2F;AAC3F,eAAO,MAAM,KAAK;;;;;EAAoD,CAAC;AACvE,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,wDAAwD;AACxD,eAAO,MAAM,OAAO;;QACM,OAAO;;;;;;;;;;;EAC/B,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;+EAC+E;AAC/E,eAAO,MAAM,UAAU;;QAAoC,KAAK;;EAAoB,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC;AAIhD;gBACgB;AAChB,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,yEAAyE;AACzE,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAExC,CAAC;AAIH,qDAAqD;AACrD,eAAO,MAAM,EAAE,UAAW,KAAK,KAAG,MAA6B,CAAC;AAIhE,+FAA+F;AAC/F,eAAO,MAAM,aAAa,UAAW,KAAK,KAAG,MAAiC,CAAC;AAiB/E,4FAA4F;AAC5F,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;EAIjD,CAAC;AAIL,yFAAyF;AACzF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEpF,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,8BAA8B;IAC9B,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACrC;uCACmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;IAjBf,oFAAoF;WAC7E,MAAM;aACJ,aAAa,CAAC,WAAW,CAAC;IACnC,8BAA8B;mBACf,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC;IACpC;uCACmC;gBACvB,OAAO;GAkDnB,CAAC"}
+{"version":3,"file":"radioChoices.d.ts","sourceRoot":"","sources":["../../../src/radioChoices/radioChoices.ts"],"names":[],"mappings":"AACA,OAAO,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAK/C,OAAO,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAIzC;2FAC2F;AAC3F,eAAO,MAAM,KAAK;;;;;EAAoD,CAAC;AACvE,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC,wDAAwD;AACxD,eAAO,MAAM,OAAO;;QACM,OAAO;;;;;;;;;;;EAC/B,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;+EAC+E;AAC/E,eAAO,MAAM,UAAU;;QAAoC,KAAK;;EAAoB,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,OAAO,UAAU,CAAC,IAAI,CAAC;AAIhD;gBACgB;AAChB,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,yEAAyE;AACzE,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAExC,CAAC;AAIH,qDAAqD;AACrD,eAAO,MAAM,EAAE,UAAW,KAAK,KAAG,MAA6B,CAAC;AAIhE,+FAA+F;AAC/F,eAAO,MAAM,aAAa,UAAW,KAAK,KAAG,MAAiC,CAAC;AAiB/E,4FAA4F;AAC5F,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;;;EAIjD,CAAC;AAIL,yFAAyF;AACzF,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEpF,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,oFAAoF;IACpF,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,8BAA8B;IAC9B,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACrC;oEACgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;IAjBf,oFAAoF;WAC7E,MAAM;aACJ,aAAa,CAAC,WAAW,CAAC;IACnC,8BAA8B;mBACf,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC;IACpC;oEACgE;gBACpD,OAAO;GAkDnB,CAAC"}

package/dist/src/rail/rail.d.ts

@@ -113,8 +113,8 @@ export type ViewInputs = Readonly<{
 }>;
 /**
  * A column of panels beside the deck, fixed under the top bar and scrolling itself:
- * `div.railed > aside.rail[popover="auto"][aria-label]` and the deck. One element serves both
- * layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the
+ * `div.railed >` the deck, then `aside.rail[popover="auto"][aria-label]`. One element serves
+ * both layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the
  * page, and `span.rail-open > button.btn.small` at the top of the deck opens the same element as a
  * drawer over a veil, its head (the name and a close glyph) showing. Opening focuses its first
  * control; Escape, a press on the veil, the close glyph, focus leaving or the window growing

package/dist/src/rail/rail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rail.d.ts","sourceRoot":"","sources":["../../../src/rail/rail.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"rail.d.ts","sourceRoot":"","sources":["../../../src/rail/rail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAE,MAAM,EAAE,MAAM,EAAU,MAAM,QAAQ,CAAC;AACtE,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAIvC,OAAO,KAAK,KAAK,MAAM,MAAM,gBAAgB,CAAC;AAO9C;+CAC+C;AAC/C,eAAO,MAAM,KAAK;;;EAGhB,CAAC;AACH,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAItC;;0FAE0F;AAC1F,eAAO,MAAM,OAAO;;;;;;;;EAQlB,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;gBACgB;AAChB,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAElD,8BAA8B;AAC9B,eAAO,MAAM,IAAI,WAAY,UAAU,KAAG,KAA2C,CAAC;AAItF,6CAA6C;AAC7C,eAAO,MAAM,EAAE,UAAW,KAAK,KAAG,MAAkB,CAAC;AAErD,2FAA2F;AAC3F,eAAO,MAAM,MAAM,UAAW,KAAK,KAAG,OAAuB,CAAC;AAc9D;uEACuE;AACvE,eAAO,MAAM,YAAY,SAAU,OAAO,KAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAInE,CAAC;AAEJ;YACY;AACZ,eAAO,MAAM,cAAc;;;;iBAazB,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,cAAc;;;;;;iBAiBzB,CAAC;AAIH,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAkBlD,0DAA0D;AAC1D,eAAO,MAAM,KAAK,UAAW,KAAK,KAAG,YAAwC,CAAC;AAE9E,wEAAwE;AACxE,eAAO,MAAM,MAAM,UAAW,KAAK,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;EASjD,CAAC;AAIL,KAAK,aAAa,GACd,OAAO,OAAO,CAAC,YAAY,CAAC,IAAI,GAChC,OAAO,OAAO,CAAC,aAAa,CAAC,IAAI,GACjC,OAAO,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAK1C;4DAC4D;AAC5D,eAAO,MAAM,kBAAkB,kBACd,OAAO,gBACR,OAAO,KACpB,MAAM,CAAC,MAAM,CAAC,aAAa,CAC6D,CAAC;AAE5F;eACe;AACf,eAAO,MAAM,mBAAmB,UACvB,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,KACnC,MAAM,CAAC,MAAM,CAAC,aAAa,CACmD,CAAC;AAElF;6DAC6D;AAC7D,eAAO,MAAM,qBAAqB,SAC1B,OAAO,SACN,UAAU,gBACH,OAAO,KACpB,MAAM,CAAC,MAAM,CAAC,aAAa,CAK3B,CAAC;AAEJ;;8CAE8C;AAC9C,eAAO,MAAM,gBAAgB;;;;;;EA0B3B,CAAC;AAIH,8EAA8E;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd;;uFAEmF;IACnF,WAAW,EAAE,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;IACvC;;gDAE4C;IAC5C,UAAU,EAAE,CAAC,UAAU,EAAE,IAAI,KAAK,IAAI,CAAC;CACxC,CAAC,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;IAzBf,2FAA2F;WACpF,MAAM;IACb;;uFAEmF;iBACtE,MAAM,aAAa,CAAC,IAAI,CAAC;IACtC;;gDAE4C;gBAChC,CAAC,UAAU,EAAE,IAAI,KAAK,IAAI;GAqEtC,CAAC"}

package/dist/src/rail/rail.js

@@ -134,8 +134,8 @@ export const FollowRailDrawer = Mount.defineStream("FollowRailDrawer", {
 });
 /**
  * A column of panels beside the deck, fixed under the top bar and scrolling itself:
- * `div.railed > aside.rail[popover="auto"][aria-label]` and the deck. One element serves both
- * layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the
+ * `div.railed >` the deck, then `aside.rail[popover="auto"][aria-label]`. One element serves
+ * both layouts, so nothing in it renders twice or loses its state. At 900px and under it leaves the
  * page, and `span.rail-open > button.btn.small` at the top of the deck opens the same element as a
  * drawer over a veil, its head (the name and a close glyph) showing. Opening focuses its first
  * control; Escape, a press on the veil, the close glyph, focus leaving or the window growing
@@ -160,7 +160,10 @@ export const view = defineView((model, viewInputs, h) => {
             ],
         }, h),
     ]);
+    // NOTE: the deck comes first so the page's main content, and its h1, precede the rail's
+    // panels in reading order; the stylesheet places the rail, fixed, at the left.
     return __foldkitBrandViewResult((h.div([h.Class("railed")], [
+        toDeckView(openButton),
         h.aside([
             h.Id(model.id),
             h.Popover("auto"),
@@ -174,6 +177,5 @@ export const view = defineView((model, viewInputs, h) => {
             ]),
             ...toAsideView(),
         ]),
-        toDeckView(openButton),
     ])), "@gjermundgaraba-designs/pixel-paper/src/rail/rail.js#anonymous~10");
 });

package/dist/src/rows/index.d.ts

@@ -1,3 +1,3 @@
 export { glyphView, rowView, titleView, toggleView, view } from "./rows.ts";
-export type { GlyphConfig, RowConfig, RowSelect, TitleConfig, ToggleConfig, ViewConfig, } from "./rows.ts";
+export type { GlyphConfig, RowConfig, RowSelect, TitleConfig, ToggleConfig, TreegridPlace, ViewConfig, } from "./rows.ts";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/rows/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/rows/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5E,YAAY,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACT,WAAW,EACX,YAAY,EACZ,UAAU,GACX,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/rows/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5E,YAAY,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACT,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,GACX,MAAM,WAAW,CAAC"}

package/dist/src/rows/rows.d.ts

@@ -7,8 +7,12 @@ export type ViewConfig = Readonly<{
     rows: ReadonlyArray<Html>;
     /** An outline: nested rows indent 26px and hang on a 1px rule guide. */
     isOutline?: boolean;
-    /** Names the list for screen readers. */
+    /** Names the list for screen readers; a treegrid needs it. */
     label?: string;
+    /** A keyboard-driven list, whose cursor the application moves (see Keys in DESIGN.md): a
+     *  `role="treegrid"`, so a screen reader hands it the arrow and letter keys. Give every row
+     *  its `treegrid` place. */
+    isTreegrid?: boolean;
 }>;
 /** A list of 34px rows. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
@@ -26,6 +30,19 @@ export type RowSelect<Message> = Readonly<{
      *  toggles it wherever it is clicked, on the button or the link too. */
     label?: string;
 }>;
+/** A row's place in a treegrid (`view`'s `isTreegrid`): its line is a `role="row"` and each
+ *  of its parts a `role="gridcell"`, while the list items around them step aside
+ *  (`role="none"`). */
+export type TreegridPlace = Readonly<{
+    /** Its depth, from 1 at the list's roots: `aria-level`. */
+    level: number;
+    /** Its place among its siblings, from 1: `aria-posinset`. */
+    position: number;
+    /** How many siblings it has, itself included: `aria-setsize`. */
+    setSize: number;
+    /** Whether the rows under it show, for a row that folds: `aria-expanded`. */
+    isExpanded?: boolean;
+}>;
 /** Configuration for rendering a row with `rowView`. */
 export type RowConfig<Message> = Readonly<{
     /** The row's stable id among its siblings. */
@@ -36,6 +53,10 @@ export type RowConfig<Message> = Readonly<{
     body: ReadonlyArray<Html | string>;
     /** Right-aligned chips, marks, counts, due days. */
     slot?: ReadonlyArray<Html | string>;
+    /** Further attributes for the slot's `span.slot`, such as an id the row's line is described
+     *  by (`aria-describedby`); there is no span, and so nothing to point at, while `slot` is
+     *  empty. Never a class. */
+    slotAttributes?: Attributes<Message>;
     /** Controls that belong to the row's job, before the tools (an approve and reject pair). */
     actions?: ReadonlyArray<Html | string>;
     /** Icon buttons at the row's right end, dimmed until the row is hovered or focused (full
@@ -49,14 +70,18 @@ export type RowConfig<Message> = Readonly<{
     isContext?: boolean;
     /** Makes the row selectable: a box at its left edge. */
     select?: RowSelect<Message>;
+    /** The row's place in a treegrid; every row of a treegrid has one. */
+    treegrid?: TreegridPlace;
     /** Further attributes for the row's line, the `div.row`, not its `li`: a keyboard list's
      *  cursor (`aria-current="true"`, which the stylesheet outlines, and a roving `tabindex`),
-     *  `role="group"` and a name, data attributes, key and focus handlers. Never a class. */
+     *  its name (with `role="group"` outside a treegrid, whose row is already a named `row`), data
+     *  attributes, key and focus handlers. Never a class. */
     attributes?: Attributes<Message>;
 }>;
 /** 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. */
+ *  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 declare const rowView: <Message>(config: RowConfig<Message>, h: HtmlBuilder<Message>) => Html;
 /** Configuration for rendering a glyph slot with `glyphView`. */
 export type GlyphConfig = Readonly<{
@@ -67,12 +92,13 @@ export declare const glyphView: <Message>(config: GlyphConfig, h: HtmlBuilder<Me
 /** Configuration for rendering a fold toggle with `toggleView`. */
 export type ToggleConfig<Message> = Readonly<{
     isExpanded: boolean;
-    /** What folds: `"Fold Notes"` and `"Unfold Notes"` are built from it. */
+    /** What the nested rows hang under: the toggle is named `"Rows under Notes"` whether open
+     *  or not, and `aria-expanded` says which. */
     label: string;
     onToggle: Message;
 }>;
 /** The glyph slot as a fold toggle, built on `@foldkit/ui`'s Button: a ring, open or closed,
- *  `aria-expanded`, named for what it does next. */
+ *  `aria-expanded`, named for the rows it shows. */
 export declare const toggleView: <Message>(config: ToggleConfig<Message>, h: HtmlBuilder<Message>) => Html;
 /** Configuration for rendering a row's title with `titleView`. */
 export type TitleConfig<Message> = Readonly<{

package/dist/src/rows/rows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rows.d.ts","sourceRoot":"","sources":["../../../src/rows/rows.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"rows.d.ts","sourceRoot":"","sources":["../../../src/rows/rows.ts"],"names":[],"mappings":"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"}

package/dist/src/rows/rows.js

@@ -4,51 +4,80 @@ import * as Glyph from "../glyph/glyph.js";
 import { slotView } from "../slot/slot.js";
 /** A list of 34px rows. */
 export const view = (config, h) => __foldkitBrandViewResult((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)), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#view");
+const cellRole = (config, h) => (__foldkitBrandViewResult((config.treegrid === undefined ? [] : [h.Role("gridcell")]), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#cellRole"));
+const rowRole = (place, h) => __foldkitBrandViewResult((place === undefined
+    ? []
+    : [
+        h.Role("row"),
+        h.AriaLevel(place.level),
+        h.AriaPosinset(place.position),
+        h.AriaSetsize(place.setSize),
+        ...(place.isExpanded === undefined ? [] : [h.AriaExpanded(place.isExpanded)]),
+    ]), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#rowRole");
+/** A part the caller gives (a glyph, the actions) in its own cell, in a treegrid. */
+const cellView = (config, className, content, h) => __foldkitBrandViewResult((config.treegrid === undefined
+    ? content
+    : slotView("span", className, content, h, cellRole(config, h))), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#cellView");
 /** The row's text, with the words that say a context row is one. */
 const textOf = (config, h) => __foldkitBrandViewResult((config.isContext === true
     ? [...config.body, h.span([h.Class("sr-only")], [" (context)"])]
     : config.body), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#textOf");
-const lineView = (config, box, text, h) => __foldkitBrandViewResult((h.div([...(config.attributes ?? []), h.Class(config.isContext === true ? "row context" : "row")], [
+const lineView = (config, box, text, h) => __foldkitBrandViewResult((h.div([
+    ...(config.attributes ?? []),
+    ...rowRole(config.treegrid, h),
+    h.Class(config.isContext === true ? "row context" : "row"),
+], [
     ...box,
-    ...(config.glyph === undefined ? [] : [config.glyph]),
+    ...cellView(config, "cell", config.glyph === undefined ? [] : [config.glyph], h),
     text,
-    ...slotView("span", "slot", config.slot ?? [], h),
-    ...(config.actions ?? []),
-    ...slotView("span", "tools", config.tools ?? [], h),
+    ...slotView("span", "slot", config.slot ?? [], h, [
+        ...(config.slotAttributes ?? []),
+        ...cellRole(config, h),
+    ]),
+    ...cellView(config, "cell actions", config.actions ?? [], h),
+    ...slotView("span", "tools", config.tools ?? [], h, cellRole(config, h)),
 ])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#lineView");
 const selectableLineView = (config, select, h) => __foldkitBrandViewResult((UiCheckbox.view({
     id: select.id,
     isChecked: select.isChecked,
     onToggle: select.onToggle,
     toView: (groups) => {
-        const boxView = (name) => __foldkitBrandViewResult((h.span([h.Class("row-check")], [h.button(groups.checkbox), ...name])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#boxView");
+        const boxView = (name) => __foldkitBrandViewResult((h.span([...cellRole(config, h), h.Class("row-check")], [h.button(groups.checkbox), ...name])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#boxView");
+        const label = h.label([...groups.label, h.Class("grow")], textOf(config, h));
         return __foldkitBrandViewResult((select.label === undefined
-            ? lineView(config, [boxView([])], h.label([...groups.label, h.Class("grow")], textOf(config, h)), h)
-            : lineView(config, [boxView([h.span([...groups.label, h.Class("sr-only")], [select.label])])], h.div([h.Class("grow")], textOf(config, h)), h)), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#toView");
+            ? lineView(config, [boxView([])], config.treegrid === undefined
+                ? label
+                : 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)), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#toView");
     },
 }, h)), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#selectableLineView");
 /** 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. */
-export const rowView = (config, h) => __foldkitBrandViewResult((h.keyed("li")(config.key, [], [
-    config.select === undefined
-        ? lineView(config, [], h.div([h.Class("grow")], textOf(config, h)), h)
-        : selectableLineView(config, config.select, h),
-    ...slotView("ul", "rows", config.nested ?? [], h),
-])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#rowView");
+ *  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 = (config, h) => {
+    const listRole = config.treegrid === undefined ? [] : [h.Role("none")];
+    return __foldkitBrandViewResult((h.keyed("li")(config.key, listRole, [
+        config.select === undefined
+            ? 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),
+    ])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#rowView");
+};
 /** A glyph in the row's 18px slot. */
 export const glyphView = (config, h) => __foldkitBrandViewResult((h.span([h.Class("glyph")], [Glyph.view({ name: config.name }, h)])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#glyphView");
 /** The glyph slot as a fold toggle, built on `@foldkit/ui`'s Button: a ring, open or closed,
- *  `aria-expanded`, named for what it does next. */
+ *  `aria-expanded`, named for the rows it shows. */
 export const toggleView = (config, h) => __foldkitBrandViewResult((UiButton.view({
     onClick: config.onToggle,
     toView: (groups) => __foldkitBrandViewResult((h.button([
         ...groups.button,
         h.AriaExpanded(config.isExpanded),
-        h.AriaLabel(`${config.isExpanded ? "Fold" : "Unfold"} ${config.label}`),
+        h.AriaLabel(`Rows under ${config.label}`),
         h.Class("glyph"),
     ], [Glyph.view({ name: config.isExpanded ? "ring" : "ring-closed" }, h)])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#toView~2"),
 }, h)), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#toggleView");