@gjermundgaraba-designs/pixel-paper 0.11.0 → 0.13.0

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.13.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,
     ],

package/src/field/field.ts

@@ -1,8 +1,33 @@
 import { Input as UiInput } from "@foldkit/ui";
-import type { Html, HtmlBuilder } from "foldkit/html";
+import type { Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
 
 import type { Attributes } from "../attributes/attributes.ts";
 
+// ERROR
+
+const errorId = (id: string): string => `${id}-error`;
+
+/** The red sentence under a field's control that says why it failed, given an error. */
+export const errorView = <Message>(
+  id: string,
+  error: string | undefined,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Html> =>
+  error === undefined ? [] : [h.p([h.Id(errorId(id)), h.Class("field-error")], [error])];
+
+/** Points the control at its error, then at its help line when it has one. After the
+ *  `@foldkit/ui` attributes, whose `aria-describedby` names the help line alone; every
+ *  `@foldkit/ui` control names that line `<id>-description`, as Input does. */
+export const describedByError = <Message>(
+  id: string,
+  error: string | undefined,
+  hasHelp: boolean,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<TextareaAttribute<Message>> =>
+  error === undefined
+    ? []
+    : [h.AriaDescribedBy(hasHelp ? `${errorId(id)} ${UiInput.descriptionId(id)}` : errorId(id))];
+
 // VIEW
 
 /** Configuration for rendering a text field with `view`. */
@@ -13,8 +38,10 @@ 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 a Notice 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;
   /** A 2px ink box: the field that is the whole job of its form. A date is always boxed. */
@@ -30,9 +57,9 @@ export type ViewConfig<Message> = Readonly<{
 }>;
 
 /** A labelled text input with its help line, built on `@foldkit/ui`'s `Input`: the label
- *  names the input, the help line describes it (`aria-describedby`), `isInvalid` sets
- *  `aria-invalid` and `isRequired` sets `aria-required`. The input is boxless, a dotted
- *  baseline that turns solid ink on focus. */
+ *  names the input, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  The input is boxless, a dotted baseline that turns solid ink on focus. */
 export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
   const {
     id,
@@ -40,7 +67,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
     value,
     onInput,
     help,
-    isInvalid = false,
+    error,
     isRequired = false,
     isBoxed = false,
     isMono = false,
@@ -53,7 +80,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
       id,
       value,
       onInput,
-      isInvalid,
+      isInvalid: error !== undefined,
       ...(type !== undefined && { type }),
       hasDescription: help !== undefined,
       toView: (groups) =>
@@ -65,8 +92,10 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
             h.input([
               ...inputAttributes,
               ...groups.input,
+              ...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/src/fieldset/fieldset.ts

@@ -1,6 +1,8 @@
 import { Fieldset as UiFieldset } from "@foldkit/ui";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
+import { describedByError, errorView } from "../field/field.ts";
+
 // VIEW
 
 /** Configuration for rendering a fieldset with `view`. */
@@ -11,15 +13,20 @@ export type ViewConfig = Readonly<{
   label: string;
   /** A sans sentence under the controls; it describes the group. */
   help?: string;
+  /** Why the choice was refused: a red sentence under the controls, which the group is
+   *  described by, before its help. Mark the control itself invalid too (RadioChoices'
+   *  `isInvalid`), which turns the legend red. Say it again in an ErrorSummary above the
+   *  form. */
+  error?: string | undefined;
   /** The controls: Choices, a Segmented. */
   body: ReadonlyArray<Html | string>;
 }>;
 
 /** A group of controls under one name, built on `@foldkit/ui`'s Fieldset: a `<fieldset>`
- *  named by its `<legend>` and described by its help line (`aria-describedby`). The legend
- *  turns red while a control in it is invalid. */
+ *  named by its `<legend>` and described by its error and its help line
+ *  (`aria-describedby`). The legend turns red while a control in it is invalid. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { id, label, help, body } = config;
+  const { id, label, help, error, body } = config;
 
   return UiFieldset.view(
     {
@@ -27,10 +34,15 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
       hasDescription: help !== undefined,
       toView: (groups) =>
         h.fieldset(
-          [...groups.fieldset, h.Class("field")],
+          [
+            ...groups.fieldset,
+            ...describedByError(id, error, help !== undefined, h),
+            h.Class("field"),
+          ],
           [
             h.legend([...groups.legend, h.Class("field-label")], [label]),
             ...body,
+            ...errorView(id, error, h),
             ...(help === undefined
               ? []
               : [h.p([...groups.description, h.Class("field-help")], [help])]),

package/src/lineDiff/diff.ts

@@ -1,30 +1,24 @@
-import { diffLines } from "diff";
+import { type StructuredPatchHunk, diffLines, parsePatch } from "diff";
 import { Array, Match, Option, Schema, pipe } from "effect";
 import { defineTaggedUnion } from "foldkit/schema";
 
-// LINES
+// ROWS
 
-/** What a line did between the two sides. */
-export const LineKind = Schema.Literals(["Same", "Added", "Removed"]);
-export type LineKind = typeof LineKind.Type;
-
-/** One line of a diff, numbered on the side or sides it is on. */
-export const DiffLine = Schema.Struct({
-  kind: LineKind,
-  text: Schema.String,
-  maybeOldNumber: Schema.Option(Schema.Number),
-  maybeNewNumber: Schema.Option(Schema.Number),
-});
-export type DiffLine = typeof DiffLine.Type;
-
-/** A row of a folded diff: a line, or a run of two or more unchanged lines folded into a
- *  count, with the run's first line. */
+/** A row of a diff: a line, numbered on the side or sides it is on, or a run of unchanged
+ *  lines folded into a count, known by its first line's old number. */
 export const DiffRow = defineTaggedUnion({
-  Line: { line: DiffLine },
-  Fold: { count: Schema.Number, firstLine: DiffLine },
+  Same: { text: Schema.String, oldNumber: Schema.Number, newNumber: Schema.Number },
+  Added: { text: Schema.String, newNumber: Schema.Number },
+  Removed: { text: Schema.String, oldNumber: Schema.Number },
+  Fold: { count: Schema.Number, firstOldNumber: Schema.Number },
 });
 export type DiffRow = typeof DiffRow.Type;
 
+type SameRow = Extract<DiffRow, Readonly<{ _tag: "Same" }>>;
+
+/** What a line did between the two sides. */
+export type LineKind = "Same" | "Added" | "Removed";
+
 type Numbers = Readonly<{ old: number; new: number }>;
 
 const withFinalNewline = (text: string): string => (text.endsWith("\n") ? text : `${text}\n`);
@@ -37,24 +31,27 @@ const changeKind = (change: Readonly<{ added: boolean; removed: boolean }>): Lin
     Match.orElse(() => "Same"),
   );
 
-const numberLine = (numbers: Numbers, kind: LineKind, text: string): [Numbers, DiffLine] => {
-  const hasOld = kind !== "Added";
-  const hasNew = kind !== "Removed";
-
-  return [
-    { old: hasOld ? numbers.old + 1 : numbers.old, new: hasNew ? numbers.new + 1 : numbers.new },
-    {
-      kind,
-      text,
-      maybeOldNumber: Option.liftPredicate(numbers.old, () => hasOld),
-      maybeNewNumber: Option.liftPredicate(numbers.new, () => hasNew),
-    },
-  ];
-};
+const numberLine = (numbers: Numbers, kind: LineKind, text: string): [Numbers, DiffRow] =>
+  Match.value(kind).pipe(
+    Match.withReturnType<[Numbers, DiffRow]>(),
+    Match.when("Same", () => [
+      { old: numbers.old + 1, new: numbers.new + 1 },
+      DiffRow.Same({ text, oldNumber: numbers.old, newNumber: numbers.new }),
+    ]),
+    Match.when("Added", () => [
+      { old: numbers.old, new: numbers.new + 1 },
+      DiffRow.Added({ text, newNumber: numbers.new }),
+    ]),
+    Match.when("Removed", () => [
+      { old: numbers.old + 1, new: numbers.new },
+      DiffRow.Removed({ text, oldNumber: numbers.old }),
+    ]),
+    Match.exhaustive,
+  );
 
 /** The line diff of two texts (Myers, through jsdiff), each line numbered on its side. A
  *  missing final newline is not a change. */
-export const diffLinesOf = (before: string, after: string): ReadonlyArray<DiffLine> =>
+export const diffRowsOf = (before: string, after: string): ReadonlyArray<DiffRow> =>
   pipe(
     diffLines(withFinalNewline(before), withFinalNewline(after)),
     Array.flatMap((change) =>
@@ -67,23 +64,82 @@ export const diffLinesOf = (before: string, after: string): ReadonlyArray<DiffLi
       Array.mapAccum(lines, { old: 1, new: 1 }, (numbers, { kind, text }) =>
         numberLine(numbers, kind, text),
       ),
-    ([, numbered]) => numbered,
+    ([, rows]) => rows,
+  );
+
+/** Whether a line was added or removed. */
+export const hasChanges = (rows: ReadonlyArray<DiffRow>): boolean =>
+  Array.some(rows, (row) => row._tag === "Added" || row._tag === "Removed");
+
+// PATCH
+
+type PatchState = Readonly<{ rows: ReadonlyArray<DiffRow>; numbers: Numbers }>;
+
+const LINE_KIND_BY_PREFIX: Readonly<Record<string, LineKind>> = {
+  " ": "Same",
+  "+": "Added",
+  "-": "Removed",
+};
+
+// a blank context line that lost its leading space on the way (a trimming editor, a mail) is
+// still a context line
+const kindOf = (line: string): Option.Option<LineKind> =>
+  line === "" ? Option.some("Same") : Option.fromUndefinedOr(LINE_KIND_BY_PREFIX[line.charAt(0)]);
+
+const readHunk = ({ rows, numbers }: PatchState, hunk: StructuredPatchHunk): PatchState => {
+  const gap = hunk.oldStart - numbers.old;
+  const gapRows = gap > 0 ? [DiffRow.Fold({ count: gap, firstOldNumber: numbers.old })] : [];
+
+  return Array.reduce(
+    hunk.lines,
+    { rows: [...rows, ...gapRows], numbers: { old: hunk.oldStart, new: hunk.newStart } },
+    (state: PatchState, line): PatchState =>
+      // "" starts with a "\", a prefix that draws no row
+      Option.match(kindOf(line), {
+        onNone: () => state,
+        onSome: (kind) => {
+          const [nextNumbers, row] = numberLine(state.numbers, kind, line.slice(1));
+          return { rows: [...state.rows, row], numbers: nextNumbers };
+        },
+      }),
+  );
+};
+
+const onlyHunksOf = <File extends Readonly<{ hunks: Array<StructuredPatchHunk> }>>(
+  files: ReadonlyArray<File>,
+): Option.Option<Array.NonEmptyReadonlyArray<StructuredPatchHunk>> =>
+  Array.match(files, {
+    onEmpty: () => Option.none(),
+    onNonEmpty: ([file, ...others]) =>
+      Array.isArrayEmpty(others) && Array.isArrayNonEmpty(file.hunks)
+        ? Option.some(file.hunks)
+        : Option.none(),
+  });
+
+/** The rows of one file's unified diff, numbered from its hunks' headers, with the unchanged
+ *  lines between hunks folded into a count. `None` unless it is one file with a hunk: text that
+ *  is not a diff, a binary change and several files have no lines to show. */
+export const diffRowsOfPatch = (patch: string): Option.Option<ReadonlyArray<DiffRow>> =>
+  pipe(
+    Option.liftThrowable(parsePatch)(patch.replaceAll("\r\n", "\n")),
+    Option.flatMap(onlyHunksOf),
+    Option.map(
+      (hunks) => Array.reduce(hunks, { rows: [], numbers: { old: 1, new: 1 } }, readHunk).rows,
+    ),
   );
 
-/** Whether anything changed. */
-export const hasChanges = (lines: ReadonlyArray<DiffLine>): boolean =>
-  Array.some(lines, ({ kind }) => kind !== "Same");
+// FOLD
 
 type FoldState = Readonly<{
   rows: ReadonlyArray<DiffRow>;
-  folded: ReadonlyArray<DiffLine>;
+  folded: ReadonlyArray<SameRow>;
 }>;
 
 // a run of one stays a line: a row that says "1 unchanged line" takes the same room as the line
-const foldRow = (run: Array.NonEmptyReadonlyArray<DiffLine>): DiffRow =>
+const foldRow = (run: Array.NonEmptyReadonlyArray<SameRow>): DiffRow =>
   run.length === 1
-    ? DiffRow.Line({ line: Array.headNonEmpty(run) })
-    : DiffRow.Fold({ count: run.length, firstLine: Array.headNonEmpty(run) });
+    ? Array.headNonEmpty(run)
+    : DiffRow.Fold({ count: run.length, firstOldNumber: Array.headNonEmpty(run).oldNumber });
 
 const flushFold = ({ rows, folded }: FoldState): ReadonlyArray<DiffRow> =>
   Array.match(folded, {
@@ -94,17 +150,17 @@ const flushFold = ({ rows, folded }: FoldState): ReadonlyArray<DiffRow> =>
 /** The diff's rows: every change with `context` unchanged lines around it, and each longer
  *  run of unchanged lines folded into one row that counts them (a run of one stays a line). */
 export const foldUnchanged = (
-  lines: ReadonlyArray<DiffLine>,
+  rows: ReadonlyArray<DiffRow>,
   context: number,
 ): ReadonlyArray<DiffRow> => {
   const isKept = (index: number): boolean =>
-    hasChanges(lines.slice(Math.max(0, index - context), index + context + 1));
+    hasChanges(rows.slice(Math.max(0, index - context), index + context + 1));
 
   return flushFold(
-    Array.reduce(lines, { rows: [], folded: [] }, (state: FoldState, line, index): FoldState =>
-      isKept(index)
-        ? { rows: [...flushFold(state), DiffRow.Line({ line })], folded: [] }
-        : { rows: state.rows, folded: [...state.folded, line] },
+    Array.reduce(rows, { rows: [], folded: [] }, (state: FoldState, row, index): FoldState =>
+      row._tag === "Same" && !isKept(index)
+        ? { rows: state.rows, folded: [...state.folded, row] }
+        : { rows: [...flushFold(state), row], folded: [] },
     ),
   );
 };

package/src/lineDiff/index.ts

@@ -1,2 +1,2 @@
-export { view } from "./lineDiff.ts";
-export type { ViewConfig } from "./lineDiff.ts";
+export { patchView, view } from "./lineDiff.ts";
+export type { PatchViewConfig, ViewConfig } from "./lineDiff.ts";