@gjermundgaraba-designs/pixel-paper 0.11.0 → 0.12.0

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/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/rows.d.ts

@@ -36,6 +36,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
@@ -67,12 +71,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

@@ -15,7 +15,7 @@ const lineView = (config, box, text, h) => __foldkitBrandViewResult((h.div([...(
     ...box,
     ...(config.glyph === undefined ? [] : [config.glyph]),
     text,
-    ...slotView("span", "slot", config.slot ?? [], h),
+    ...slotView("span", "slot", config.slot ?? [], h, config.slotAttributes),
     ...(config.actions ?? []),
     ...slotView("span", "tools", config.tools ?? [], h),
 ])), "@gjermundgaraba-designs/pixel-paper/src/rows/rows.js#lineView");
@@ -42,13 +42,13 @@ export const rowView = (config, h) => __foldkitBrandViewResult((h.keyed("li")(co
 /** 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");

package/dist/src/selectField/selectField.d.ts

@@ -24,14 +24,16 @@ export type ViewConfig<Message> = Readonly<{
     options: ReadonlyArray<SelectOption | SelectGroup>;
     /** A sans sentence under the control. */
     help?: string;
-    /** Red on the control's 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;
 }>;
 /** A labelled select with its help line, built on `@foldkit/ui`'s `Select`: the label names
- *  the select, the help line describes it (`aria-describedby`), `isInvalid` sets
- *  `aria-invalid` and `isRequired` sets `aria-required`. The stylesheet draws the box, the
- *  caret and the picker. */
+ *  the select, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  The stylesheet draws the box, the caret and the picker. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=selectField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"selectField.d.ts","sourceRoot":"","sources":["../../../src/selectField/selectField.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,qCAAqC;AACrC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,iDAAiD;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACtC,CAAC,CAAC;AAEH,8DAA8D;AAC9D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACrC,sEAAsE;IACtE,OAAO,EAAE,aAAa,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;IACnD,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4FAA4F;IAC5F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAoBH;;;4BAG4B;AAC5B,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAqCpF,CAAC"}
+{"version":3,"file":"selectField.d.ts","sourceRoot":"","sources":["../../../src/selectField/selectField.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,qCAAqC;AACrC,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAEH,mDAAmD;AACnD,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IACjC,iDAAiD;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACtC,CAAC,CAAC;AAEH,8DAA8D;AAC9D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACrC,sEAAsE;IACtE,OAAO,EAAE,aAAa,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC;IACnD,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC,CAAC;AAoBH;;;8DAG8D;AAC9D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAiCpF,CAAC"}

package/dist/src/selectField/selectField.js

@@ -1,27 +1,33 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Select as UiSelect } from "@foldkit/ui";
 import { Array } from "effect";
+import { describedByError, errorView } from "../field/field.js";
 const isGroup = (entry) => __foldkitBrandViewResult(("options" in entry), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#isGroup");
 const optionView = (h) => __foldkitBrandViewResult((({ value, label, isDisabled = false }) => __foldkitBrandViewResult((h.keyed("option")(value, [h.Value(value), h.Disabled(isDisabled)], [label])), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#anonymous")), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#optionView");
 const entryView = (h) => __foldkitBrandViewResult(((entry) => __foldkitBrandViewResult((isGroup(entry)
     ? h.keyed("optgroup")(entry.key, [h.Attribute("label", entry.label)], Array.map(entry.options, optionView(h)))
     : optionView(h)(entry)), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#anonymous~2")), "@gjermundgaraba-designs/pixel-paper/src/selectField/selectField.js#entryView");
 /** A labelled select with its help line, built on `@foldkit/ui`'s `Select`: the label names
- *  the select, the help line describes it (`aria-describedby`), `isInvalid` sets
- *  `aria-invalid` and `isRequired` sets `aria-required`. The stylesheet draws the box, the
- *  caret and the picker. */
+ *  the select, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  The stylesheet draws the box, the caret and the picker. */
 export const view = (config, h) => {
-    const { id, label, value, onChange, options, help, isInvalid = false, isRequired = false, } = config;
+    const { id, label, value, onChange, options, help, error, isRequired = false } = config;
     return __foldkitBrandViewResult((UiSelect.view({
         id,
         value,
         onChange,
-        isInvalid,
+        isInvalid: error !== undefined,
         hasDescription: help !== undefined,
         toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("field")], [
             h.label(groups.label, [label]),
             // NOTE: @foldkit/ui gap: Select has no required option, so the wrapper says it.
-            h.select([...groups.select, ...(isRequired ? [h.AriaRequired(true)] : [])], Array.map(options, entryView(h))),
+            h.select([
+                ...groups.select,
+                ...describedByError(id, error, help !== undefined, h),
+                ...(isRequired ? [h.AriaRequired(true)] : []),
+            ], Array.map(options, entryView(h))),
+            ...errorView(id, error, h),
             ...(help === undefined
                 ? []
                 : [h.p([...groups.description, h.Class("field-help")], [help])]),

package/dist/src/sheet/sheet.d.ts

@@ -10,7 +10,8 @@ export type ViewConfig = Readonly<{
     /** A Prose, and anything under it. */
     body: ReadonlyArray<Html | string>;
 }>;
-/** An authored page inside a panel, in an `<article>` under its `h1`: the one place the
- *  system slows to reading pace. */
+/** An authored page, an `<article>` under its `h1` on its own sheet of paper, framed as a
+ *  panel is: the one place the system slows to reading pace. It stands in a panel's place,
+ *  never inside one, so its `h1` opens the page instead of following a panel's `h2`. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=sheet.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/sheet/sheet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,mDAAmD;IACnD,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,sCAAsC;IACtC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;oCACoC;AACpC,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAc3E,CAAC"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/sheet/sheet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,mDAAmD;IACnD,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACvC,sCAAsC;IACtC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;;wFAEwF;AACxF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAc3E,CAAC"}

package/dist/src/sheet/sheet.js

@@ -1,7 +1,8 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { slotView } from "../slot/slot.js";
-/** An authored page inside a panel, in an `<article>` under its `h1`: the one place the
- *  system slows to reading pace. */
+/** An authored page, an `<article>` under its `h1` on its own sheet of paper, framed as a
+ *  panel is: the one place the system slows to reading pace. It stands in a panel's place,
+ *  never inside one, so its `h1` opens the page instead of following a panel's `h2`. */
 export const view = (config, h) => {
     const { title, byline = [], actions = [], body } = config;
     return __foldkitBrandViewResult((h.article([h.Class("sheet")], [

package/dist/src/slot/slot.d.ts

@@ -1,8 +1,9 @@
 import type { Html, HtmlBuilder } from "foldkit/html";
+import type { Attributes } from "../attributes/attributes.ts";
 /** The elements a slot is wrapped in. */
 type SlotTag = "div" | "span" | "p" | "dd" | "ul";
 /** An optional slot in its one element, `tag.slotClass`, to spread among its siblings: nothing
  *  while the slot is empty, so an unused slot leaves no box, gap or rule behind. */
-export declare const slotView: <Message>(tag: SlotTag, slotClass: string, slot: ReadonlyArray<Html | string>, h: HtmlBuilder<Message>) => ReadonlyArray<Html>;
+export declare const slotView: <Message>(tag: SlotTag, slotClass: string, slot: ReadonlyArray<Html | string>, h: HtmlBuilder<Message>, attributes?: Attributes<Message>) => ReadonlyArray<Html>;
 export {};
 //# sourceMappingURL=slot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/slot/slot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,yCAAyC;AACzC,KAAK,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;oFACoF;AACpF,eAAO,MAAM,QAAQ,GAAI,OAAO,OACzB,OAAO,aACD,MAAM,QACX,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,KAC/B,WAAW,CAAC,OAAO,CAAC,KACtB,aAAa,CAAC,IAAI,CAIjB,CAAC"}
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/slot/slot.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAE9D,yCAAyC;AACzC,KAAK,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;oFACoF;AACpF,eAAO,MAAM,QAAQ,GAAI,OAAO,OACzB,OAAO,aACD,MAAM,QACX,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,KAC/B,WAAW,CAAC,OAAO,CAAC,eACX,UAAU,CAAC,OAAO,CAAC,KAC9B,aAAa,CAAC,IAAI,CAIjB,CAAC"}

package/dist/src/slot/slot.js

@@ -2,7 +2,7 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Array } from "effect";
 /** An optional slot in its one element, `tag.slotClass`, to spread among its siblings: nothing
  *  while the slot is empty, so an unused slot leaves no box, gap or rule behind. */
-export const slotView = (tag, slotClass, slot, h) => __foldkitBrandViewResult((Array.match(slot, {
+export const slotView = (tag, slotClass, slot, h, attributes = []) => __foldkitBrandViewResult((Array.match(slot, {
     onEmpty: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/slot/slot.js#onEmpty"),
-    onNonEmpty: (content) => __foldkitBrandViewResult(([h[tag]([h.Class(slotClass)], content)]), "@gjermundgaraba-designs/pixel-paper/src/slot/slot.js#onNonEmpty"),
+    onNonEmpty: (content) => __foldkitBrandViewResult(([h[tag]([...attributes, h.Class(slotClass)], content)]), "@gjermundgaraba-designs/pixel-paper/src/slot/slot.js#onNonEmpty"),
 })), "@gjermundgaraba-designs/pixel-paper/src/slot/slot.js#slotView");

package/dist/src/textareaField/textareaField.d.ts

@@ -1,4 +1,4 @@
-import type { Html, HtmlBuilder } from "foldkit/html";
+import type { ChildAttribute, Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
 /** Configuration for rendering a textarea field with `view`. */
 export type ViewConfig<Message> = Readonly<{
     id: string;
@@ -7,13 +7,23 @@ export type ViewConfig<Message> = Readonly<{
     onInput: (value: string) => Message;
     /** A sans sentence under the control. */
     help?: string;
-    /** Red on the control's rule 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 rule 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;
+    /** Code and identifiers: the system monospace. */
+    isMono?: boolean;
     /** The lines it opens at; it grows with its text from there. */
     rows?: number;
+    /** Further attributes for the `<textarea>`, such as a placeholder or spelling off; never a
+     *  class, and never its text, which is `value`. */
+    textareaAttributes?: ReadonlyArray<TextareaAttribute<Message> | ChildAttribute>;
 }>;
 /** A labelled textarea with its help line, built on `@foldkit/ui`'s `Textarea`: the label
- *  names the textarea, the help line describes it (`aria-describedby`) and `isInvalid` sets
- *  `aria-invalid`. Boxless like a Field, on a dotted baseline, with an ink corner grip. */
+ *  names the textarea, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  Boxless like a Field, on a dotted baseline, with an ink corner grip. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=textareaField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textareaField.d.ts","sourceRoot":"","sources":["../../../src/textareaField/textareaField.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,gEAAgE;AAChE,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,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,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH;;2FAE2F;AAC3F,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAyBpF,CAAC"}
+{"version":3,"file":"textareaField.d.ts","sourceRoot":"","sources":["../../../src/textareaField/textareaField.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMzF,gEAAgE;AAChE,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,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,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;uDACmD;IACnD,kBAAkB,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG,cAAc,CAAC,CAAC;CACjF,CAAC,CAAC;AAEH;;;2EAG2E;AAC3E,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA2CpF,CAAC"}

package/dist/src/textareaField/textareaField.js

@@ -1,20 +1,29 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Textarea as UiTextarea } from "@foldkit/ui";
+import { describedByError, errorView } from "../field/field.js";
 /** A labelled textarea with its help line, built on `@foldkit/ui`'s `Textarea`: the label
- *  names the textarea, the help line describes it (`aria-describedby`) and `isInvalid` sets
- *  `aria-invalid`. Boxless like a Field, on a dotted baseline, with an ink corner grip. */
+ *  names the textarea, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  Boxless like a Field, on a dotted baseline, with an ink corner grip. */
 export const view = (config, h) => {
-    const { id, label, value, onInput, help, isInvalid = false, rows } = config;
+    const { id, label, value, onInput, help, error, isRequired = false, isMono = false, rows, textareaAttributes = [], } = config;
     return __foldkitBrandViewResult((UiTextarea.view({
         id,
         value,
         onInput,
-        isInvalid,
+        isInvalid: error !== undefined,
         hasDescription: help !== undefined,
         ...(rows !== undefined && { rows }),
-        toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("field")], [
+        toView: (groups) => __foldkitBrandViewResult((h.div([h.Class(`field${isMono ? " mono" : ""}`)], [
             h.label(groups.label, [label]),
-            h.textarea(groups.textarea),
+            // NOTE: @foldkit/ui gap: Textarea has no required option, so the wrapper says it.
+            h.textarea([
+                ...textareaAttributes,
+                ...groups.textarea,
+                ...describedByError(id, error, help !== undefined, h),
+                ...(isRequired ? [h.AriaRequired(true)] : []),
+            ]),
+            ...errorView(id, error, h),
             ...(help === undefined
                 ? []
                 : [h.p([...groups.description, h.Class("field-help")], [help])]),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/emptyState/emptyState.ts

@@ -7,6 +7,10 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 export type ViewConfig = Readonly<{
   /** Pixel caps: what is missing (`"Nothing queued"`). */
   title: string;
+  /** Makes the title a heading at this level, for an empty state that is the page's or the
+   *  section's main content (a gate, a missing page); a `strong` when not given. It looks the
+   *  same either way. */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
   /** One sentence: how it gets filled. */
   body?: ReadonlyArray<Html | string>;
   /** What fills it: a button under the sentence. */
@@ -15,12 +19,14 @@ export type ViewConfig = Readonly<{
 
 /** What a panel says when it has nothing to show, centred where its content would be. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { title, body = [], actions = [] } = config;
+  const { title, headingLevel, body = [], actions = [] } = config;
 
   return h.div(
     [h.Class("empty")],
     [
-      h.strong([], [title]),
+      headingLevel === undefined
+        ? h.strong([h.Class("empty-title")], [title])
+        : h[`h${headingLevel}`]([h.Class("empty-title")], [title]),
       ...Array.match(body, { onEmpty: () => [], onNonEmpty: (sentence) => [h.p([], sentence)] }),
       ...actions,
     ],