@gjermundgaraba-designs/pixel-paper 0.12.0 → 0.14.0

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/dist/src/skipLink/index.d.ts

@@ -1,2 +1,2 @@
-export { focusFragment, view } from "./skipLink.ts";
+export { ScrollToFragment, view } from "./skipLink.ts";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/skipLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/skipLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/skipLink/index.js

@@ -1 +1 @@
-export { focusFragment, view } from "./skipLink.js";
+export { ScrollToFragment, view } from "./skipLink.js";

package/dist/src/skipLink/skipLink.d.ts

@@ -1,17 +1,33 @@
-import { Effect } from "effect";
+import { Effect, Schema } from "effect";
+import * as Command from "foldkit/command";
 import type { Html, HtmlBuilder } from "foldkit/html";
+/** What `ScrollToFragment` reports. An application that runs it puts
+ *  `CompletedScrollToFragment: {}` in its own Message union, which this tag matches. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+    readonly CompletedScrollToFragment: {};
+}>;
+export type Message = typeof Message.Type;
 /**
  * The first thing in the page: a link to the main landmark (`#main`, as Deck, Stage and Wall render it), hidden until it holds the
  * keyboard. A Foldkit application routes every link click through its own update, so its
- * fragment handler must move focus to the target as the browser would: run `focusFragment`
- * from the Command that handles a changed URL's fragment.
+ * fragment handler must move focus to the target as the browser would: return
+ * `ScrollToFragment` for a changed URL.
  */
 export declare const view: <Message>(h: HtmlBuilder<Message>) => Html;
+/** Moves focus to the element a fragment names, making it focusable when it is not;
+ *  `ScrollToFragment` runs it. */
+export declare const focusFragment: (fragment: string) => Effect.Effect<void>;
 /**
- * Scrolls to the element a fragment names and moves focus to it, making it focusable
- * (`tabindex="-1"`) when it is not, so the next Tab continues from there: what a fragment
- * link does without an application in the way. Does nothing when no element has that id.
- * Run it from the application's own Command, as Foldkit's `Dom` Effects are run.
+ * What a followed link does without an application in the way, for the application's URL
+ * handler to return when the URL changes: with a fragment, scrolls to the element it names and
+ * moves focus to it, making it focusable (`tabindex="-1"`) when it is not, so the next Tab
+ * continues from there (nothing when no element has that id); without one, scrolls to the
+ * top, since Foldkit reports a link followed and a step through history as the same change, so
+ * a new page opens at its top either way. Reports `CompletedScrollToFragment`.
  */
-export declare const focusFragment: (fragment: string) => Effect.Effect<void>;
+export declare const ScrollToFragment: Command.CommandDefinitionWithArgs<"ScrollToFragment", {
+    maybeFragment: Schema.Option<Schema.String>;
+}, Effect.Effect<{
+    readonly _tag: "CompletedScrollToFragment";
+}, never, never>>;
 //# sourceMappingURL=skipLink.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"skipLink.d.ts","sourceRoot":"","sources":["../../../src/skipLink/skipLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD;;;;;GAKG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IACM,CAAC;AAI/D;;;;;GAKG;AACH,eAAO,MAAM,aAAa,aAAc,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAGhE,CAAC"}
+{"version":3,"file":"skipLink.d.ts","sourceRoot":"","sources":["../../../src/skipLink/skipLink.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAU,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAKtD;wFACwF;AACxF,eAAO,MAAM,OAAO;;EAAwD,CAAC;AAC7E,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C;;;;;GAKG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IACM,CAAC;AAI/D;kCACkC;AAClC,eAAO,MAAM,aAAa,aAAc,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAGhE,CAAC;AAIJ;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB;;;;iBAY3B,CAAC"}

package/dist/src/skipLink/skipLink.js

@@ -1,19 +1,38 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Effect } from "effect";
+import { Effect, Option, Schema } from "effect";
+import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
+import { defineMessageUnion } from "foldkit/message";
+// MESSAGE
+/** What `ScrollToFragment` reports. An application that runs it puts
+ *  `CompletedScrollToFragment: {}` in its own Message union, which this tag matches. */
+export const Message = defineMessageUnion({ CompletedScrollToFragment: {} });
 // VIEW
 /**
  * The first thing in the page: a link to the main landmark (`#main`, as Deck, Stage and Wall render it), hidden until it holds the
  * keyboard. A Foldkit application routes every link click through its own update, so its
- * fragment handler must move focus to the target as the browser would: run `focusFragment`
- * from the Command that handles a changed URL's fragment.
+ * fragment handler must move focus to the target as the browser would: return
+ * `ScrollToFragment` for a changed URL.
  */
 export const view = (h) => __foldkitBrandViewResult((h.a([h.Href("#main"), h.Class("skip")], ["Skip to content"])), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#view");
 // FOCUS
+/** Moves focus to the element a fragment names, making it focusable when it is not;
+ *  `ScrollToFragment` runs it. */
+export const focusFragment = (fragment) => __foldkitBrandViewResult((Effect.suspend(() => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(fragment)}`, { makeFocusable: true })), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#anonymous")).pipe(Effect.ignore)), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#focusFragment");
+// COMMAND
 /**
- * Scrolls to the element a fragment names and moves focus to it, making it focusable
- * (`tabindex="-1"`) when it is not, so the next Tab continues from there: what a fragment
- * link does without an application in the way. Does nothing when no element has that id.
- * Run it from the application's own Command, as Foldkit's `Dom` Effects are run.
+ * What a followed link does without an application in the way, for the application's URL
+ * handler to return when the URL changes: with a fragment, scrolls to the element it names and
+ * moves focus to it, making it focusable (`tabindex="-1"`) when it is not, so the next Tab
+ * continues from there (nothing when no element has that id); without one, scrolls to the
+ * top, since Foldkit reports a link followed and a step through history as the same change, so
+ * a new page opens at its top either way. Reports `CompletedScrollToFragment`.
  */
-export const focusFragment = (fragment) => __foldkitBrandViewResult((Effect.suspend(() => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(fragment)}`, { makeFocusable: true })), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#anonymous")).pipe(Effect.ignore)), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#focusFragment");
+export const ScrollToFragment = Command.define("ScrollToFragment", {
+    args: { maybeFragment: Schema.Option(Schema.String) },
+    messages: [Message.CompletedScrollToFragment],
+    execute: ({ maybeFragment }) => __foldkitBrandViewResult((Option.match(maybeFragment, {
+        onNone: () => __foldkitBrandViewResult((Effect.sync(() => __foldkitBrandViewResult((window.scrollTo(0, 0)), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#onNone"),
+        onSome: (fragment) => __foldkitBrandViewResult((Dom.scrollIntoView(`#${CSS.escape(fragment)}`).pipe(Effect.ignore, Effect.andThen(focusFragment(fragment)))), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#onSome"),
+    }).pipe(Effect.as(Message.CompletedScrollToFragment()))), "@gjermundgaraba-designs/pixel-paper/src/skipLink/skipLink.js#execute"),
+});

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

@@ -0,0 +1,3 @@
+export { AnnounceReorder, Item, Message, Model, OutMessage, SizeLiftedItem, init, setMovable, subscriptions, update, view, } from "./sortable.ts";
+export type { InitConfig, ItemRender, Layout, ViewInputs } from "./sortable.ts";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sortable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,IAAI,EACJ,OAAO,EACP,KAAK,EACL,UAAU,EACV,cAAc,EACd,IAAI,EACJ,UAAU,EACV,aAAa,EACb,MAAM,EACN,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/sortable/index.js

@@ -0,0 +1 @@
+export { AnnounceReorder, Item, Message, Model, OutMessage, SizeLiftedItem, init, setMovable, subscriptions, update, view, } from "./sortable.js";