@gjermundgaraba-designs/pixel-paper 0.12.0 → 0.13.0

package/DESIGN.md

@@ -1009,7 +1009,7 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 - **Segmented** → `div.nav[role="group"] > button[aria-pressed]`: a choice of one printed as the same strip. When every option carries a `glyph` it prints as `div.switch > button[aria-pressed][aria-label]`, the strip holding 26×22px glyph cells (a layout, a density), each option's label its name and its tip. **Scheme.SchemeSwitch** is a Submodel printing a Segmented of system, paper and plum that remembers the choice (see Palette below).
 - **Tabs** (Submodel over `@foldkit/ui`'s Tabs; the caller keeps the tab on show) → `div.tabbed > div.nav.tabs[role="tablist"] > button[role="tab"][aria-selected]` plus `div.tab-panel[role="tabpanel"]`: the strip at 11px with `4px 12px` segments, a count spaced as NavStrip's; arrows, Home and End move and select. At the top of a flush panel the strip sits inside the panel's padding.
 - **Crumbs** → `nav.crumbs > ol > li`: the path in the 11px pixel face, muted slashes between, the last crumb ink with `aria-current="page"`, the others muted with a dotted underline on hover.
-- **Places** (a View over `@foldkit/ui`'s Button) → `nav.places[aria-label] > ul > li`, each place (keyed by an `id` that is stable and unique among the places, so two places that share a name stay apart) → `li > button` holding `span.place-name` and `span.place-count`, then `span.place-tools`: a column of places to go (areas, collections, saved filters), flush in a rail panel. Each line is at least 34px (`--row`), `8px 12px`, over a 1px rule; the name in the sans, sentence case, wrapping anywhere rather than clipping; the count in the 11px pixel face, muted, at the right; a quiet IconButton after it acts on the place itself (remove a saved filter). Hover tints head. The place you are in carries `aria-current="page"` and its whole `li` prints inverted, the count and a quiet tool in paper at 0.75, never tinted by hover; the ring sits 4px inside the line, in paper on the current one.
+- **Places** (a View over `@foldkit/ui`'s Button) → `nav.places[aria-label] > ul > li`, each place (keyed by an `id` that is stable and unique among the places, so two places that share a name stay apart) → `li > a[href]` when the place has an address (an area, a saved view: it opens in a new tab and reads as a link) or `li > button` when choosing it only changes the page, holding `span.place-name` and `span.place-count`, then `span.place-tools`: a column of places to go (areas, collections, saved filters), flush in a rail panel. Each line is at least 34px (`--row`), `8px 12px`, over a 1px rule; the name in the sans, sentence case, wrapping anywhere rather than clipping; the count in the 11px pixel face, muted, at the right; a quiet IconButton after it acts on the place itself (remove a saved filter). Hover tints head. The place you are in carries `aria-current="page"` and its whole `li` prints inverted, the count and a quiet tool in paper at 0.75, never tinted by hover; the ring sits 4px inside the line, in paper on the current one.
 - **PageHead** → `header.page-head > div.page-name > h1.page-title + span.meta`, then `div.page-acts`: the heading of a working screen, one per screen, above its panels (which title in h2). The name in the page-title register with a count or state beside it in the 11px pixel face; the screen's own Buttons at the right, 8px apart, wrapping under the name when the line runs out (`14px × 24px` gaps), aligned to the name's foot. No surface of its own: it stands on the ground. There is no label above the heading; the name says where you are.
 - **TopBar** (a Mount measures it, reporting through `toParentMessage`) → `header.topbar` (brand, nav, `div.topbar-tools`), **Wordmark** → `.wordmark` with `span.cursor`, **LinkState** → `span.link-state[role="status"]`: online prints plain; `.connecting` (the first reach) prints muted with the working cursor; `.reconnecting` (the link dropped and is coming back) fills amber with `on-status` and the cursor; `.offline` (given up) fills red with `on-red`. Reconnecting and offline stay in a phone's top bar; the other two hide there.
 - **StatusBar** (a Mount measures it, reporting through `toParentMessage`) → `footer.statusbar > div.statusbar-state + p.statusbar-keys`: the quiet line along the bottom of an interface, the page's footer (one per page, after the rail and the deck, outside `main`). Fixed to the bottom edge on paper over a 1px rule, in the pixel face at the state size in Muted Ink: the status at the left (a LinkState, a sync word), the keys at the right, each a `kbd.key-hint` in ink (printed as the help prints it, ⌘K or Ctrl+K by platform) and its word, plain text and not pressable. Narrow, the keys wrap under the status; nothing hides. It keeps `--statusbar-h` on the page at its height (25px, one line, until it is measured), like the top bar's `--topbar-h`: the page pads its end by it, a scrolled-to anchor stays clear of it, and the rail, the stage, a Banner and the toast stack all stop above it.
@@ -1068,7 +1068,7 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 - **KeyHelp** (Submodel; `KeyHelp.subscriptions` bind `?`) → a Dialog holding a narrow Card titled "Keys": the application's own words when it gives `toIntroView` (what the covered page would say that the reader still needs, a sync notice and its retry), a text Field ("Find a key", focused on open) that finds a key by its key or its words, then a Keymap of every binding given, under its group, each key listed once under the command it gives, and a note saying that keys wait while you type in a field and, when sequences exist, that a sequence's keys are typed one straight after the other and any other key lets go of the first. That is what Foldkit's key bindings do; any other pause (while a card is held, while a menu is open) is the application's to make, so the note does not claim it. `?` opens it and so does `KeyHelp.open` from the parent's update (a button, a palette entry). Render it once per page, with the bindings in force on that page. `Closed` reports the reader closing it (Escape, the veil, a close button); opening it reports nothing, by `?` or by `open`, so read `KeyHelp.isOpen` to keep another dialog from opening over the help.
 - **KeyHint** → `kbd.key-hint[aria-hidden="true"]` (Button's and a menu item's `keyHint`), a key sequence printed as the help prints it: arrows as arrows, a sequence of characters as one word (`["G", "G"]` prints gg; named keys keep their space), `Mod+K` as ⌘K or Ctrl+K, Shift as ⇧ or Shift+. The platform lives in the application's Model as `KeyHint.KeyPlatform`, `"Other"` until `KeyHint.detectKeyPlatform` runs once from `init`, so a server render prints Ctrl. The same notation is exported as `KeyHint.keyLabel(keys, platform)`, for anything else that names a key (a command palette's hint).
-- **A list's cursor** is the application's: it keeps the current item in its Model, sets `aria-current="true"` and a roving `tabindex` (0 on the current item, -1 elsewhere) on that row's `div.row` or on that board card (`Board.cardView`'s `attributes`), and binds j and k (and ↓ ↑) to move it, `g g` and G (Home and End) to go to the ends, in an outline h and l to fold and unfold or step to the parent and the first child, on a board h and l to cross columns, and Enter to open, with the commands on the current item (`d d` removes it) beside them. A move focuses the item and scrolls it into view by the least distance; when the current item leaves (filtered, removed, folded away) the cursor takes its place. While a Board holds a card, the arrows and Space are the move's: turn the page's own bindings for them off. Give a Row `role="group"` and a label.
+- **A list's cursor** is the application's: it keeps the current item in its Model, sets `aria-current="true"` and a roving `tabindex` (0 on the current item, -1 elsewhere) on that row's `div.row` or on that board card (`Board.cardView`'s `attributes`), and binds j and k (and ↓ ↑) to move it, `g g` and G (Home and End) to go to the ends, in an outline h and l to fold and unfold or step to the parent and the first child, on a board h and l to cross columns, and Enter to open, with the commands on the current item (`d d` removes it) beside them. A move focuses the item and scrolls it into view by the least distance; when the current item leaves (filtered, removed, folded away) the cursor takes its place. While a Board holds a card, the arrows and Space are the move's: turn the page's own bindings for them off. A keyboard-driven list of Rows is a treegrid (`Rows.view`'s `isTreegrid`, named by its `label`), so a screen reader hands the list its arrows and letters instead of taking them for browsing: each row carries its place (`treegrid`: its level, its position among its siblings, how many there are, and whether it is expanded when it folds) and a name in its `attributes`.
 
 ### Tips and toolbars
 
@@ -1084,7 +1084,7 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 ### Rows and the outline
 
-**Rows** → `ul.rows` (`.tree` for an outline); each row, `Rows.rowView` → `li > div.row` (`.context`) with an optional nested `ul.rows`. A context row (outside a filter, printed only to keep a match on its chain) is muted and carries no chips, and since muting is colour alone it ends its text with `span.sr-only` " (context)", which a selectable row's box takes into its name. A 34px flex row (`5px 12px`, 8px gap): an 18px glyph cell (`Rows.glyphView` → `span.glyph`, or `Rows.toggleView` → `button.glyph[aria-expanded]` with the ring glyph open or closed, named "Rows under" its label whether open or not), `div.grow` holding the text (a `label.grow` when it is the label of the row's box; `Rows.titleView` → `button.title`, underlined on hover, `.done-title` when done), `span.slot` for chips, marks and due days, the row's actions, and `span.tools` (`tools`, icon buttons) resting at 55% opacity until hover or focus-within (hidden on phones). Hover and focus-within tint the row head with `background-color` only, so the indent guides survive; the cursor row takes neither. A keyboard-driven list puts its cursor on `div.row` (`aria-current="true"`, a roving `tabindex`), which the stylesheet outlines (see "The cursor" below), through `Rows.rowView`'s `attributes`, which go on `div.row` rather than its `li` and also carry the row's `role="group"`, its name and its key handlers (never a class). Nested lists indent 26px on a 1px rule guide. **InlineInput** (Submodel; its `init` focuses and selects the field, so fold it in with `Update.foldChildInit`) → `input.inline-input` swaps in for text at exactly `1lh + 1px` so the row never moves. Enter or leaving the field reports new, non-empty text, trimmed, as `Committed`; an untouched field reports nothing, so a remote edit is never written back. The field then holds `readonly` and `aria-busy` (muted, still focused) until the parent answers with `InlineInput.succeeded` or `InlineInput.failed`: a failure keeps the field and its text for another try and, when it is a refusal with a reason, says why through `InlineInput.errorView`, which the field points at (`aria-invalid`, a red rule, and `aria-describedby`); the parent reads the held reason with `InlineInput.maybeError`. The parent's own `error` (the item's parent was deleted while editing) marks the field the same way, given to the view and to `errorView` alike, and shows before a refused save's reason. `Ended` says the edit is over (`"Enter"`, `"Blur"` or `"Escape"`, and `"Blur"` when focus left while the save was out) with the id the edit's last save returned (`maybeLastSavedId`, the item a repeat added last); the parent moves focus on `"Enter"` and `"Escape"` only, so a clicked destination keeps it. `isRepeating` (adding several) empties the field after each saved Enter instead of ending; Enter on an empty one ends. The text lives in the Submodel's Model, so it outlives a render. Escape is stopped from closing a dialog around it; an IME's Enter and Escape stay with the IME; removing the field writes nothing. **EditableTitle** (Submodel; it reports `Committed`, which the parent answers with `EditableTitle.succeeded` or `failed`) → `button.title-display` ⇄ `input.inline-input.title-edit` at 16px/600; Enter and Escape put focus back on the title.
+**Rows** → `ul.rows` (`.tree` for an outline); each row, `Rows.rowView` → `li > div.row` (`.context`) with an optional nested `ul.rows`. A context row (outside a filter, printed only to keep a match on its chain) is muted and carries no chips, and since muting is colour alone it ends its text with `span.sr-only` " (context)", which a selectable row's box takes into its name. A 34px flex row (`5px 12px`, 8px gap): an 18px glyph cell (`Rows.glyphView` → `span.glyph`, or `Rows.toggleView` → `button.glyph[aria-expanded]` with the ring glyph open or closed, named "Rows under" its label whether open or not), `div.grow` holding the text (a `label.grow` when it is the label of the row's box; `Rows.titleView` → `button.title`, underlined on hover, `.done-title` when done), `span.slot` for chips, marks and due days, the row's actions, and `span.tools` (`tools`, icon buttons) resting at 55% opacity until hover or focus-within (hidden on phones). Hover and focus-within tint the row head with `background-color` only, so the indent guides survive; the cursor row takes neither. A keyboard-driven list is a treegrid: `ul.rows[role="treegrid"]` named by its label, each `li` and nested `ul` stepping aside (`role="none"`), each `div.row[role="row"]` carrying `aria-level`, `aria-posinset`, `aria-setsize` and, on a row that folds, `aria-expanded`, and each of its parts a `role="gridcell"` (the box's `span.row-check`, the text, `span.slot`, `span.tools`, and `span.cell` around the glyph and around the actions, laid out as the row lays them out). It puts its cursor on `div.row` (`aria-current="true"`, a roving `tabindex`), which the stylesheet outlines (see "The cursor" below), through `Rows.rowView`'s `attributes`, which go on `div.row` rather than its `li` and also carry the row's name and its key handlers (never a class). A list no keyboard drives stays `ul > li`; a row there named for a screen reader takes `role="group"` with its name. Nested lists indent 26px on a 1px rule guide. **InlineInput** (Submodel; its `init` focuses and selects the field, so fold it in with `Update.foldChildInit`) → `input.inline-input` swaps in for text at exactly `1lh + 1px` so the row never moves. Enter or leaving the field reports new, non-empty text, trimmed, as `Committed`; an untouched field reports nothing, so a remote edit is never written back. The field then holds `readonly` and `aria-busy` (muted, still focused) until the parent answers with `InlineInput.succeeded` or `InlineInput.failed`: a failure keeps the field and its text for another try and, when it is a refusal with a reason, says why through `InlineInput.errorView`, which the field points at (`aria-invalid`, a red rule, and `aria-describedby`); the parent reads the held reason with `InlineInput.maybeError`. The parent's own `error` (the item's parent was deleted while editing) marks the field the same way, given to the view and to `errorView` alike, and shows before a refused save's reason. `Ended` says the edit is over (`"Enter"`, `"Blur"` or `"Escape"`, and `"Blur"` when focus left while the save was out) with the id the edit's last save returned (`maybeLastSavedId`, the item a repeat added last); the parent moves focus on `"Enter"` and `"Escape"` only, so a clicked destination keeps it. `isRepeating` (adding several) empties the field after each saved Enter instead of ending; Enter on an empty one ends. The text lives in the Submodel's Model, so it outlives a render. Escape is stopped from closing a dialog around it; an IME's Enter and Escape stay with the IME; removing the field writes nothing. **EditableTitle** (Submodel; it reports `Committed`, which the parent answers with `EditableTitle.succeeded` or `failed`) → `button.title-display` ⇄ `input.inline-input.title-edit` at 16px/600; Enter and Escape put focus back on the title.
 
 **The cursor:** `div.row[aria-current="true"]`, set on the row by the application, the one row the keyboard's commands act on. It is drawn, not filled: a 1px Muted Ink outline 4px inside the row (`outline-offset: -4px`), so a nested row's follows its indent and none leaves the panel. It takes no fill at all, not even the hover or focus tint other rows take, and its text, chips and tools keep their own colours (the tools at full opacity). Focus on the row itself thickens the same line to 2px (`--line`): one line inside the row, never a second ring outside it, for any focused row. It is neither focus nor selection (the check cell), it stays put when focus leaves, and moving it is the application's (see Keys). Controls in it keep their own ring: the text cell (`.grow`) clips, but with 4px of room inside the clip, so a title's ring prints whole; an InlineInput in a row shows its focus as its caret and its rule doubled to 2px (drawn inside its box, so the row keeps its height; red while refused), not a ring. A board's cursor card is inverted instead (see Board).
 

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/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. */
@@ -53,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<{

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,41 +4,70 @@ 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.slotAttributes),
-    ...(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,

package/package.json

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

package/src/pixel-paper.css

@@ -1401,6 +1401,20 @@ button.glyph {
   opacity: 1;
 }
 
+/* a treegrid's own cells around the parts the caller gives (the glyph, the actions): they hold
+   their parts as the row would, so a row lays out the same in a treegrid or out of one */
+.row > .cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
+
+.row > .grow-cell {
+  flex: 1;
+  min-width: 0;
+}
+
 .row .slot {
   min-width: 58px;
   flex: none;
@@ -1529,7 +1543,7 @@ button.glyph {
   inset: 0;
 }
 
-.row > label.grow {
+.row label.grow {
   cursor: pointer;
 }
 

package/src/places/places.ts

@@ -7,8 +7,11 @@ import { slotView } from "../slot/slot.ts";
 
 // VIEW
 
-/** 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;
@@ -20,10 +23,20 @@ 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. */
-  onSelect: Message;
 }>;
 
+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<{
   /** Names the navigation for screen readers ("Areas"). */
@@ -31,39 +44,39 @@ export type ViewConfig<Message> = Readonly<{
   places: ReadonlyArray<Place<Message>>;
 }>;
 
+const lineView = <Message>(place: Place<Message>, h: HtmlBuilder<Message>): Html => {
+  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 place.href === undefined
+    ? UiButton.view(
+        {
+          onClick: place.onSelect,
+          toView: (groups) => h.button([...groups.button, ...current], content),
+        },
+        h,
+      )
+    : h.a([h.Href(place.href), ...current], content);
+};
+
 const placeView =
   <Message>(h: HtmlBuilder<Message>) =>
-  (place: Place<Message>): Html => {
-    const { label, isCurrent = false, count, tools = [], onSelect } = place;
-
-    return h.keyed("li")(
+  (place: Place<Message>): Html =>
+    h.keyed("li")(
       place.id,
       [],
-      [
-        UiButton.view(
-          {
-            onClick: onSelect,
-            toView: (groups) =>
-              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)])]),
-                ],
-              ),
-          },
-          h,
-        ),
-        ...slotView("span", "place-tools", tools, h),
-      ],
+      [lineView(place, h), ...slotView("span", "place-tools", place.tools ?? [], h)],
     );
-  };
 
 /** 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 = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
   const { label, places } = config;
 

package/src/rows/index.ts

@@ -5,5 +5,6 @@ export type {
   RowSelect,
   TitleConfig,
   ToggleConfig,
+  TreegridPlace,
   ViewConfig,
 } from "./rows.ts";

package/src/rows/rows.ts

@@ -14,14 +14,19 @@ 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 const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html =>
   h.ul(
     [
+      ...(config.isTreegrid === true ? [h.Role("treegrid")] : []),
       ...(config.label === undefined ? [] : [h.AriaLabel(config.label)]),
       h.Class(config.isOutline === true ? "rows tree" : "rows"),
     ],
@@ -45,6 +50,20 @@ export type RowSelect<Message> = Readonly<{
   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. */
@@ -72,12 +91,45 @@ 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>;
 }>;
 
+const cellRole = <Message>(
+  config: RowConfig<Message>,
+  h: HtmlBuilder<Message>,
+): Attributes<Message> => (config.treegrid === undefined ? [] : [h.Role("gridcell")]);
+
+const rowRole = <Message>(
+  place: TreegridPlace | undefined,
+  h: HtmlBuilder<Message>,
+): Attributes<Message> =>
+  place === undefined
+    ? []
+    : [
+        h.Role("row"),
+        h.AriaLevel(place.level),
+        h.AriaPosinset(place.position),
+        h.AriaSetsize(place.setSize),
+        ...(place.isExpanded === undefined ? [] : [h.AriaExpanded(place.isExpanded)]),
+      ];
+
+/** A part the caller gives (a glyph, the actions) in its own cell, in a treegrid. */
+const cellView = <Message>(
+  config: RowConfig<Message>,
+  className: string,
+  content: ReadonlyArray<Html | string>,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Html | string> =>
+  config.treegrid === undefined
+    ? content
+    : slotView("span", className, content, h, cellRole(config, h));
+
 /** The row's text, with the words that say a context row is one. */
 const textOf = <Message>(
   config: RowConfig<Message>,
@@ -94,14 +146,21 @@ const lineView = <Message>(
   h: HtmlBuilder<Message>,
 ): Html =>
   h.div(
-    [...(config.attributes ?? []), h.Class(config.isContext === true ? "row context" : "row")],
+    [
+      ...(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.slotAttributes),
-      ...(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)),
     ],
   );
 
@@ -117,19 +176,25 @@ const selectableLineView = <Message>(
       onToggle: select.onToggle,
       toView: (groups) => {
         const boxView = (name: ReadonlyArray<Html>): Html =>
-          h.span([h.Class("row-check")], [h.button(groups.checkbox), ...name]);
+          h.span(
+            [...cellRole(config, h), h.Class("row-check")],
+            [h.button(groups.checkbox), ...name],
+          );
+        const label = h.label([...groups.label, h.Class("grow")], textOf(config, h));
 
         return select.label === undefined
           ? lineView(
               config,
               [boxView([])],
-              h.label([...groups.label, h.Class("grow")], textOf(config, h)),
+              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([h.Class("grow")], textOf(config, h)),
+              h.div([...cellRole(config, h), h.Class("grow")], textOf(config, h)),
               h,
             );
       },
@@ -139,18 +204,18 @@ const selectableLineView = <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. */
-export const rowView = <Message>(config: RowConfig<Message>, h: HtmlBuilder<Message>): Html =>
-  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),
-    ],
-  );
+ *  a `role="checkbox"` button (`aria-checked`) whose whole cell is its target. In a treegrid
+ *  the line is the `role="row"` and each part a `role="gridcell"`. */
+export const rowView = <Message>(config: RowConfig<Message>, h: HtmlBuilder<Message>): Html => {
+  const listRole = config.treegrid === undefined ? [] : [h.Role("none")];
+
+  return h.keyed("li")(config.key, listRole, [
+    config.select === undefined
+      ? lineView(config, [], h.div([...cellRole(config, h), h.Class("grow")], textOf(config, h)), h)
+      : selectableLineView(config, config.select, h),
+    ...slotView("ul", "rows", config.nested ?? [], h, listRole),
+  ]);
+};
 
 // GLYPH SLOT