@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/menu/slip.js

@@ -0,0 +1,163 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view } from "../key-hint/key-hint.js";
+import { isPlain } from "../keys/keys.js";
+import { Item } from "./item.js";
+import { Array, Effect, Match, Option, Queue, Schema, Stream, String, pipe } from "effect";
+import { Anchor, Button } from "@foldkit/ui";
+// src/menu/slip.ts
+const ChoiceKind = Schema.Literals([
+	"Action",
+	"Radio",
+	"Check",
+	"Link"
+]);
+const ITEM_SELECTOR = "[role^=\"menuitem\"]";
+const FIRST_ATTRIBUTE = "data-pixel-paper-slip-first";
+const LAST_ATTRIBUTE = "data-pixel-paper-slip-last";
+/** Where focus lands as the slip opens: its first row, or (↑ on the toggle) its last. */
+const Edge = Schema.Literals(["First", "Last"]);
+const edgeSelector = (edge) => __foldkitBrandViewResult((edge === "First" ? `[${FIRST_ATTRIBUTE}]` : `[${LAST_ATTRIBUTE}]`), "@gjermundgaraba/pixel-paper/menu/slip.js#edgeSelector");
+const isGroup = Item.$is("Group");
+const entriesOf = (items) => __foldkitBrandViewResult((Array.flatMap(items, (item) => __foldkitBrandViewResult((isGroup(item) ? item.items : [item]), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous"))), "@gjermundgaraba/pixel-paper/menu/slip.js#entriesOf");
+const entryIds = (items) => __foldkitBrandViewResult((Array.map(entriesOf(items), (entry) => __foldkitBrandViewResult((entry.id), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~2"))), "@gjermundgaraba/pixel-paper/menu/slip.js#entryIds");
+const edgeAttributes = (context, id, h) => __foldkitBrandViewResult(([...Option.contains(context.firstId, id) ? [h.Attribute(FIRST_ATTRIBUTE, "")] : [], ...Option.contains(context.lastId, id) ? [h.Attribute(LAST_ATTRIBUTE, "")] : []]), "@gjermundgaraba/pixel-paper/menu/slip.js#edgeAttributes");
+const wordsView = (entry, h) => __foldkitBrandViewResult(([h.span([h.Class("menu-label")], [entry.label]), ...entry.keyHint === void 0 ? [] : [view(entry.keyHint, h)]]), "@gjermundgaraba/pixel-paper/menu/slip.js#wordsView");
+const buttonRowView = (config, context, h) => {
+	const { entry, isDisabled, attributes, children } = config;
+	return __foldkitBrandViewResult((Button.view({
+		onClick: context.toChoose(entry.id, entry._tag),
+		isDisabled,
+		toView: (groups) => __foldkitBrandViewResult((h.keyed("button")(entry.id, [
+			...groups.button,
+			...attributes,
+			h.Tabindex(-1),
+			...edgeAttributes(context, entry.id, h)
+		], children)), "@gjermundgaraba/pixel-paper/menu/slip.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/menu/slip.js#buttonRowView");
+};
+const entryView = (entry, context, h) => __foldkitBrandViewResult((Match.value(entry).pipe(Match.withReturnType(), Match.tag("Action", (action) => __foldkitBrandViewResult((buttonRowView({
+	entry: action,
+	isDisabled: action.isDisabled === true,
+	attributes: [h.Role("menuitem")],
+	children: wordsView(action, h)
+}, context, h)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~3")), Match.tag("Radio", (radio) => __foldkitBrandViewResult((buttonRowView({
+	entry: radio,
+	isDisabled: false,
+	attributes: [h.Role("menuitemradio"), h.AriaChecked(radio.isChecked)],
+	children: wordsView(radio, h)
+}, context, h)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~4")), Match.tag("Check", (check) => __foldkitBrandViewResult((buttonRowView({
+	entry: check,
+	isDisabled: false,
+	attributes: [h.Role("menuitemcheckbox"), h.AriaChecked(check.isChecked)],
+	children: [h.span([h.Class("menu-check"), h.AriaHidden(true)]), h.span([h.Class("menu-label")], [check.label])]
+}, context, h)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~5")), Match.tag("Link", (link) => __foldkitBrandViewResult((h.keyed("a")(link.id, [
+	h.Role("menuitem"),
+	h.Href(link.href),
+	h.Tabindex(-1),
+	h.OnClick(context.toChoose(link.id, link._tag)),
+	...edgeAttributes(context, link.id, h)
+], wordsView(link, h))), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~6")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/menu/slip.js#entryView");
+const rowsView = (config, h) => {
+	const ids = entryIds(config.items);
+	const context = {
+		firstId: Array.head(ids),
+		lastId: Array.last(ids),
+		toChoose: config.toChoose
+	};
+	return __foldkitBrandViewResult((Array.map(config.items, (item, index) => {
+		if (!isGroup(item)) return __foldkitBrandViewResult((entryView(item, context, h)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~7");
+		const headingId = `${config.slipId}-group-${index}`;
+		return __foldkitBrandViewResult((h.keyed("div")(`group:${item.label}`, [h.Role("group"), h.AriaLabelledBy(headingId)], [h.span([
+			h.Id(headingId),
+			h.Class("menu-note"),
+			h.Role("none")
+		], [item.label]), ...Array.map(item.items, (entry) => __foldkitBrandViewResult((entryView(entry, context, h)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~8"))])), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~7");
+	})), "@gjermundgaraba/pixel-paper/menu/slip.js#rowsView");
+};
+const itemsOf = (slip) => __foldkitBrandViewResult((Array.fromIterable(slip.querySelectorAll(ITEM_SELECTOR))), "@gjermundgaraba/pixel-paper/menu/slip.js#itemsOf");
+const focusedIndex = (items) => __foldkitBrandViewResult((Array.findFirstIndex(items, (item) => __foldkitBrandViewResult((item === document.activeElement), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~9"))), "@gjermundgaraba/pixel-paper/menu/slip.js#focusedIndex");
+const focusAt = (items, index) => __foldkitBrandViewResult((Option.match(Array.get(items, index), {
+	onNone: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/menu/slip.js#onNone"),
+	onSome: (item) => {
+		item.focus();
+		return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/menu/slip.js#onSome");
+	}
+})), "@gjermundgaraba/pixel-paper/menu/slip.js#focusAt");
+const wrap = (index, length) => __foldkitBrandViewResult(((index + length) % length), "@gjermundgaraba/pixel-paper/menu/slip.js#wrap");
+const startsWith = (item, key) => __foldkitBrandViewResult((pipe(item.textContent ?? "", String.trim, String.toLowerCase, String.startsWith(String.toLowerCase(key)))), "@gjermundgaraba/pixel-paper/menu/slip.js#startsWith");
+const typeahead = (items, key) => {
+	const from = Option.getOrElse(focusedIndex(items), () => __foldkitBrandViewResult((-1), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~10"));
+	const ordered = [...Array.drop(items, from + 1), ...Array.take(items, from + 1)];
+	return __foldkitBrandViewResult((Option.match(Array.findFirst(ordered, (item) => __foldkitBrandViewResult((startsWith(item, key)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~11")), {
+		onNone: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/menu/slip.js#onNone~2"),
+		onSome: (item) => {
+			item.focus();
+			return __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/menu/slip.js#onSome~2");
+		}
+	})), "@gjermundgaraba/pixel-paper/menu/slip.js#typeahead");
+};
+const isShiftTab = (event) => __foldkitBrandViewResult((event.key === "Tab" && event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey), "@gjermundgaraba/pixel-paper/menu/slip.js#isShiftTab");
+const handleSlipKey = (slip, event, events) => {
+	if (event.isComposing || event.defaultPrevented || !(isPlain(event) || isShiftTab(event))) return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/menu/slip.js#handleSlipKey");
+	const items = itemsOf(slip);
+	const { length } = items;
+	const current = Option.getOrElse(focusedIndex(items), () => __foldkitBrandViewResult((-1), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~12"));
+	const moved = (didMove) => {
+		if (didMove) event.preventDefault();
+		return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/menu/slip.js#moved");
+	};
+	const reported = (message) => {
+		event.preventDefault();
+		return __foldkitBrandViewResult((Option.some(message)), "@gjermundgaraba/pixel-paper/menu/slip.js#reported");
+	};
+	return __foldkitBrandViewResult((Match.value(event.key).pipe(Match.withReturnType(), Match.when("ArrowDown", () => __foldkitBrandViewResult((moved(length > 0 && focusAt(items, wrap(current + 1, length)))), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~13")), Match.when("ArrowUp", () => __foldkitBrandViewResult((moved(length > 0 && focusAt(items, wrap(Math.max(current, 0) - 1, length)))), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~14")), Match.when("Home", () => __foldkitBrandViewResult((moved(focusAt(items, 0))), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~15")), Match.when("End", () => __foldkitBrandViewResult((moved(focusAt(items, length - 1))), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~16")), Match.when("Escape", () => __foldkitBrandViewResult((reported(events.escape)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~17")), Match.when("Tab", () => __foldkitBrandViewResult((reported(events.tab)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~18")), Match.when((key) => __foldkitBrandViewResult((key.length === 1 && key !== " "), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~19"), (key) => __foldkitBrandViewResult((moved(typeahead(items, key))), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~20")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~21")))), "@gjermundgaraba/pixel-paper/menu/slip.js#handleSlipKey");
+};
+const isLeaving = (slip, next, keepId) => __foldkitBrandViewResult((!(next instanceof Node && slip.contains(next)) && !(next instanceof Element && Option.contains(keepId, next.id))), "@gjermundgaraba/pixel-paper/menu/slip.js#isLeaving");
+const preventMouseDown = (event) => {
+	event.preventDefault();
+};
+/** The slip's keys and focus as a stream of its owner's Messages, set up by `setup` (anchoring,
+*  portaling) and torn down with the element. A press inside the slip keeps focus where it
+*  is, so a click on a row reaches it in every browser. */
+const slipStream = (element, config) => __foldkitBrandViewResult((Stream.callback((queue) => __foldkitBrandViewResult((Effect.gen(function* () {
+	yield* Effect.acquireRelease(Effect.sync(() => {
+		const cleanup = config.setup(element);
+		const onKeyDown = (event) => {
+			if (!(event instanceof KeyboardEvent)) return;
+			const maybeMessage = handleSlipKey(element, event, config.events);
+			if (Option.isSome(maybeMessage)) Queue.offerUnsafe(queue, maybeMessage.value);
+		};
+		const onFocusOut = (event) => {
+			if (event instanceof FocusEvent && isLeaving(element, event.relatedTarget, config.keepId)) Queue.offerUnsafe(queue, config.events.left);
+		};
+		element.addEventListener("keydown", onKeyDown);
+		element.addEventListener("focusout", onFocusOut);
+		element.addEventListener("mousedown", preventMouseDown);
+		return __foldkitBrandViewResult((() => {
+			element.removeEventListener("keydown", onKeyDown);
+			element.removeEventListener("focusout", onFocusOut);
+			element.removeEventListener("mousedown", preventMouseDown);
+			cleanup();
+		}), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~24");
+	}), (teardown) => __foldkitBrandViewResult((Effect.sync(teardown)), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~26"));
+	Queue.offerUnsafe(queue, config.placed);
+	return __foldkitBrandViewResult((yield* Effect.never), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~23");
+})), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~22"))), "@gjermundgaraba/pixel-paper/menu/slip.js#slipStream");
+const GAP = 6;
+const WINDOW_PADDING = 12;
+const anchorUnder = (config) => __foldkitBrandViewResult(((element) => __foldkitBrandViewResult((Anchor.anchorSetup(element, {
+	buttonId: config.toggleId,
+	anchor: {
+		placement: config.isEnd ? "bottom-end" : "bottom-start",
+		gap: GAP,
+		padding: WINDOW_PADDING
+	},
+	interceptTab: false,
+	focusAfterPosition: true,
+	focusSelector: edgeSelector(config.edge)
+})), "@gjermundgaraba/pixel-paper/menu/slip.js#anonymous~27")), "@gjermundgaraba/pixel-paper/menu/slip.js#anchorUnder");
+Schema.Struct({
+	x: Schema.Finite,
+	y: Schema.Finite
+});
+export { ChoiceKind, Edge, anchorUnder, edgeSelector, rowsView, slipStream };

package/dist/meter/index.d.ts

@@ -0,0 +1,5 @@
+import { ListViewConfig, MeterConfig, listView } from "./meter.js";
+declare namespace index_d_exports {
+  export { ListViewConfig, MeterConfig, listView };
+}
+export { type ListViewConfig, type MeterConfig, index_d_exports, listView };

package/dist/meter/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { listView } from "./meter.js";
+// src/meter/index.ts
+var meter_exports = /* @__PURE__ */ __exportAll({ listView: () => __foldkitBrandViewResult((listView), "@gjermundgaraba/pixel-paper/meter/index.js#listView") });
+export { listView, meter_exports };

package/dist/meter/meter.d.ts

@@ -0,0 +1,38 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One meter in a `listView`. */
+export type MeterConfig = Readonly<{
+  /** Unique in the document; names the meter's parts. */
+  id: string;
+  /** What is measured; it names the meter. */
+  label: string;
+  value: number;
+  max: number;
+  /** Replaces the printed numbers and what screen readers hear:
+   *  `"41,200 of 50,000 requests"`. */
+  valueText?: string;
+  /** Prints the numbers line (the default). Leave it out where it would repeat the
+   *  percentage (`valueText: "62% used"`); screen readers still hear `valueText`. */
+  hasNumbers?: boolean;
+  /** The lit cells take the reading's tone as well: amber from 80%, red at `max`. For a page
+   *  of readings scanned for their level, such as a wall of limits; the reading beside the
+   *  cells still says it in a mark or a chip. */
+  isToned?: boolean;
+  /** The last reading failed: the cells print muted, the numbers are the last known, and
+   *  screen readers hear "(stale)" after the name. Say why, and when it was last read, in
+   *  `foot`. */
+  isStale?: boolean;
+  /** The foot line: when it resets, when it was read. */
+  foot?: ReadonlyArray<Html | string>;
+}>;
+/** Configuration for rendering a list of meters with `listView`. */
+export type ListViewConfig = Readonly<{
+  meters: readonly MeterConfig[];
+}>;
+/**
+ * A ruled list of meters, edge to edge in a flush panel. Each is a named reading against a
+ * maximum, in the vocabulary of `<meter>`, built on `@foldkit/ui`'s Meter: 20 cells, the
+ * percentage (amber from 80%, a red chip at `max`, and neither 100% nor every cell before it),
+ * the numbers in English, a foot line. The cells print ink unless the meter `isToned`. The cells are the `meter`, named by the printed label,
+ * with the value, the maximum and the numbers in words for screen readers.
+ */
+export declare const listView: <Message>(config: ListViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/meter/meter.js

@@ -0,0 +1,69 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { LOCALE } from "../locale/locale.js";
+import { slotView } from "../slot/slot.js";
+import { view } from "../chip/chip.js";
+import { readingView } from "../mark/mark.js";
+import { Array } from "effect";
+import { Meter } from "@foldkit/ui";
+// src/meter/meter.ts
+const METER_CELLS = 20;
+const HIGH_SHARE = .8;
+const PERCENT = 100;
+const cellRowView = (count, on, h) => __foldkitBrandViewResult((Array.makeBy(count, (index) => __foldkitBrandViewResult((h.span([h.Class(index < on ? "cell on" : "cell")])), "@gjermundgaraba/pixel-paper/meter/meter.js#anonymous"))), "@gjermundgaraba/pixel-paper/meter/meter.js#cellRowView");
+const scaled = (share, whole, isFull) => {
+	const rounded = Math.round(share * whole);
+	return __foldkitBrandViewResult((isFull ? rounded : Math.min(whole - 1, rounded)), "@gjermundgaraba/pixel-paper/meter/meter.js#scaled");
+};
+const numbersText = (value, max) => __foldkitBrandViewResult((`${value.toLocaleString(LOCALE)} / ${max.toLocaleString(LOCALE)}`), "@gjermundgaraba/pixel-paper/meter/meter.js#numbersText");
+const levelOf = (value, max) => {
+	if (value >= max) return __foldkitBrandViewResult(("Full"), "@gjermundgaraba/pixel-paper/meter/meter.js#levelOf");
+	else if (value >= max * HIGH_SHARE) return __foldkitBrandViewResult(("High"), "@gjermundgaraba/pixel-paper/meter/meter.js#levelOf");
+	return __foldkitBrandViewResult(("Calm"), "@gjermundgaraba/pixel-paper/meter/meter.js#levelOf");
+};
+const percentView = (percent, level, h) => {
+	const percentText = `${percent}%`;
+	if (level === "Full") return __foldkitBrandViewResult((view({
+		label: percentText,
+		tone: "Blocked"
+	}, h)), "@gjermundgaraba/pixel-paper/meter/meter.js#percentView");
+	else if (level === "High") return __foldkitBrandViewResult((readingView({ label: percentText }, h)), "@gjermundgaraba/pixel-paper/meter/meter.js#percentView");
+	return __foldkitBrandViewResult((h.span([h.Class("pct")], [percentText])), "@gjermundgaraba/pixel-paper/meter/meter.js#percentView");
+};
+const TONE_CLASS = {
+	Full: " toned full",
+	High: " toned high",
+	Calm: " toned"
+};
+const meterView = (config, h) => {
+	const { id, label, value, max, foot = [], isStale = false, hasNumbers = true, isToned = false } = config;
+	const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
+	const level = levelOf(value, max);
+	const isFull = level === "Full";
+	const numbers = config.valueText ?? numbersText(value, max);
+	const rowClass = `meter-row${isStale ? " stale" : ""}${isToned ? TONE_CLASS[level] : ""}`;
+	return __foldkitBrandViewResult((Meter.view({
+		id,
+		value,
+		min: 0,
+		max,
+		valueText: numbers,
+		toView: (groups) => __foldkitBrandViewResult((h.keyed("li")(id, [h.Class(rowClass)], [
+			h.div([h.Class("meter-head")], [h.span([...groups.label, h.Class("meter-name")], [label, ...isStale ? [h.span([h.Class("sr-only")], [" (stale)"])] : []])]),
+			h.div([h.Class("meter-line")], [
+				h.span([...groups.meter, h.Class("cells")], cellRowView(METER_CELLS, scaled(share, METER_CELLS, isFull), h)),
+				percentView(scaled(share, PERCENT, isFull), level, h),
+				...hasNumbers ? [h.span([h.Class("meter-num tnum")], [numbers])] : []
+			]),
+			...slotView("div", "meter-foot", foot, h)
+		])), "@gjermundgaraba/pixel-paper/meter/meter.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/meter/meter.js#meterView");
+};
+/**
+* A ruled list of meters, edge to edge in a flush panel. Each is a named reading against a
+* maximum, in the vocabulary of `<meter>`, built on `@foldkit/ui`'s Meter: 20 cells, the
+* percentage (amber from 80%, a red chip at `max`, and neither 100% nor every cell before it),
+* the numbers in English, a foot line. The cells print ink unless the meter `isToned`. The cells are the `meter`, named by the printed label,
+* with the value, the maximum and the numbers in words for screen readers.
+*/
+const listView = (config, h) => __foldkitBrandViewResult((h.ul([h.Role("list"), h.Class("meters")], Array.map(config.meters, (meter) => __foldkitBrandViewResult((meterView(meter, h)), "@gjermundgaraba/pixel-paper/meter/meter.js#anonymous~2")))), "@gjermundgaraba/pixel-paper/meter/meter.js#listView");
+export { listView };

package/dist/monogram/monogram.js

@@ -0,0 +1,33 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { artRows, toCells } from "../glyph/glyphs.js";
+import { cellView } from "../glyph/glyph.js";
+import { Array, Number, String, pipe } from "effect";
+// src/monogram/monogram.ts
+const WORD_BREAK = /[\s._-]+/u;
+const LETTER_COUNT = 2;
+const initials = (name) => __foldkitBrandViewResult((pipe(name.split(WORD_BREAK), Array.filter(String.isNonEmpty), Array.match({
+	onEmpty: () => __foldkitBrandViewResult((""), "@gjermundgaraba/pixel-paper/monogram/monogram.js#onEmpty"),
+	onNonEmpty: (words) => __foldkitBrandViewResult((words.length > 1 ? pipe(Array.take(words, LETTER_COUNT), Array.map((word) => __foldkitBrandViewResult((word.slice(0, 1)), "@gjermundgaraba/pixel-paper/monogram/monogram.js#anonymous")), Array.join("")) : Array.headNonEmpty(words).slice(0, LETTER_COUNT)), "@gjermundgaraba/pixel-paper/monogram/monogram.js#onNonEmpty")
+}))), "@gjermundgaraba/pixel-paper/monogram/monogram.js#initials");
+const DRAWN_CELL = 1;
+const LARGE_DRAWN_CELL = 2;
+const drawingView = (art, isLarge, h) => {
+	const rows = artRows(art);
+	const columns = Array.reduce(rows, 0, (widest, row) => __foldkitBrandViewResult((Number.max(widest, row.length)), "@gjermundgaraba/pixel-paper/monogram/monogram.js#anonymous~2"));
+	const cell = isLarge ? LARGE_DRAWN_CELL : DRAWN_CELL;
+	return __foldkitBrandViewResult((h.svg([
+		h.ViewBox(`0 0 ${columns} ${rows.length}`),
+		h.Width(`${columns * cell}`),
+		h.Height(`${rows.length * cell}`),
+		h.AriaHidden(true),
+		h.Class("px-icon")
+	], Array.map(toCells(art, columns), cellView(h)))), "@gjermundgaraba/pixel-paper/monogram/monogram.js#drawingView");
+};
+/** Letters in an ink square, or a mark the product draws in cells: the identity of a person,
+*  a provider or a source. It sits beside the same name in words (as in Identity), so it is
+*  hidden from screen readers, which read the name once, from the words. */
+const view = (config, h) => {
+	const { label, drawing, isLarge = false } = config;
+	return __foldkitBrandViewResult((h.span([h.AriaHidden(true), h.Class(`monogram${drawing === void 0 ? "" : " drawn"}${isLarge ? " large" : ""}`)], [drawing === void 0 ? initials(label) : drawingView(drawing, isLarge, h)])), "@gjermundgaraba/pixel-paper/monogram/monogram.js#view");
+};
+export { view };

package/dist/nav-strip/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewConfig, view } from "./nav-strip.js";
+declare namespace index_d_exports {
+  export { ViewConfig, view };
+}
+export { type ViewConfig, index_d_exports, view };

package/dist/nav-strip/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./nav-strip.js";
+// src/nav-strip/index.ts
+var nav_strip_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/nav-strip/index.js#view") });
+export { nav_strip_exports, view };

package/dist/nav-strip/nav-strip.d.ts

@@ -0,0 +1,19 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One segment of the strip: a link. */
+export type NavItem = Readonly<{
+  href: string;
+  label: string;
+  /** A count on the head tint after the label. */
+  count?: number;
+  isCurrent?: boolean;
+}>;
+/** Configuration for rendering a nav strip with `view`. */
+export type ViewConfig = Readonly<{
+  /** Names the navigation for screen readers. */
+  label: string;
+  items: readonly NavItem[];
+}>;
+/** One ink-bordered strip of link segments, built on `@foldkit/ui`'s Nav: a navigation
+ *  landmark named by its label, the current page `aria-current="page"` and printed inverted.
+ *  Its links route through the application as every link does. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/nav-strip/nav-strip.js

@@ -0,0 +1,21 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { LOCALE } from "../locale/locale.js";
+import { Array, Option } from "effect";
+import { Nav } from "@foldkit/ui";
+// src/nav-strip/nav-strip.ts
+const countView = (count, h) => __foldkitBrandViewResult(([h.span([h.Class("sr-only")], [" "]), h.span([h.Class("navnum")], [count.toLocaleString(LOCALE)])]), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#countView");
+const linkView = (info, { label, count }, h) => __foldkitBrandViewResult((h.keyed("a")(info.value, info.link, [label, ...count === void 0 ? [] : countView(count, h)])), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#linkView");
+/** One ink-bordered strip of link segments, built on `@foldkit/ui`'s Nav: a navigation
+*  landmark named by its label, the current page `aria-current="page"` and printed inverted.
+*  Its links route through the application as every link does. */
+const view = (config, h) => {
+	const { label, items } = config;
+	return __foldkitBrandViewResult((Nav.view({
+		items: Array.map(items, ({ href }) => __foldkitBrandViewResult((href), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#anonymous")),
+		ariaLabel: label,
+		toHref: (href) => __foldkitBrandViewResult((href), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#toHref"),
+		isItemCurrent: (_href, index) => __foldkitBrandViewResult((Option.exists(Array.get(items, index), ({ isCurrent = false }) => __foldkitBrandViewResult((isCurrent), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#anonymous~2"))), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#isItemCurrent"),
+		toView: (render) => __foldkitBrandViewResult((h.nav([...render.nav, h.Class("nav")], Array.zipWith(render.items, items, (info, item) => __foldkitBrandViewResult((linkView(info, item, h)), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#anonymous~3")))), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#toView")
+	})), "@gjermundgaraba/pixel-paper/nav-strip/nav-strip.js#view");
+};
+export { view };

package/dist/notice/index.d.ts

@@ -0,0 +1,5 @@
+import { Tone, ViewConfig, view } from "./notice.js";
+declare namespace index_d_exports {
+  export { Tone, ViewConfig, view };
+}
+export { type Tone, type ViewConfig, index_d_exports, view };

package/dist/notice/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./notice.js";
+// src/notice/index.ts
+var notice_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/notice/index.js#view") });
+export { notice_exports, view };

package/dist/notice/notice.d.ts

@@ -0,0 +1,23 @@
+import { Attributes } from "../attributes/attributes.js";
+import { GlyphName } from "../glyph/glyphs.js";
+import { Schema } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** `Warn`: amber, a question or a stop. `Error`: red, refused or failed. `Ok`: a committed
+ *  change, in ink. `Quiet`: tinted, nothing wrong. */
+export declare const Tone: Schema.Literals<readonly ["Warn", "Error", "Ok", "Quiet"]>;
+export type Tone = typeof Tone.Type;
+/** Configuration for rendering a notice with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  tone?: Tone;
+  /** Pixel caps, on its own line. */
+  title?: string;
+  body: ReadonlyArray<Html | string>;
+  glyph?: GlyphName;
+  /** Controls at the right: retry, reconnect. */
+  actions?: ReadonlyArray<Html | string>;
+  /** Further attributes for the notice, never a class. */
+  attributes?: Attributes<Message>;
+}>;
+/** One line in the product's own words, beside a glyph in a box. An `Error` notice is an
+ *  alert (`role="alert"`), so a screen reader says it when it appears; the others are quiet. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/notice/notice.js

@@ -0,0 +1,35 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../glyph/glyph.js";
+import { Match, Schema } from "effect";
+Schema.Literals([
+	"Warn",
+	"Error",
+	"Ok",
+	"Quiet"
+]);
+const toneGlyph = (tone) => __foldkitBrandViewResult((Match.value(tone).pipe(Match.withReturnType(), Match.whenOr("Warn", "Error", () => __foldkitBrandViewResult(("bang"), "@gjermundgaraba/pixel-paper/notice/notice.js#anonymous")), Match.when("Ok", () => __foldkitBrandViewResult(("check"), "@gjermundgaraba/pixel-paper/notice/notice.js#anonymous~2")), Match.when("Quiet", () => __foldkitBrandViewResult(("info"), "@gjermundgaraba/pixel-paper/notice/notice.js#anonymous~3")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/notice/notice.js#toneGlyph");
+const TONE_CLASS = {
+	Warn: "",
+	Error: " error",
+	Ok: " ok",
+	Quiet: " quiet"
+};
+const toneGlyphView = (config, h) => __foldkitBrandViewResult((h.span([h.Class(`glyph${TONE_CLASS[config.tone]}`)], [view$1({ name: config.glyph ?? toneGlyph(config.tone) }, h)])), "@gjermundgaraba/pixel-paper/notice/notice.js#toneGlyphView");
+/** One line in the product's own words, beside a glyph in a box. An `Error` notice is an
+*  alert (`role="alert"`), so a screen reader says it when it appears; the others are quiet. */
+const view = (config, h) => {
+	const { tone = "Warn", title, body, glyph, actions = [], attributes = [] } = config;
+	return __foldkitBrandViewResult((h.div([
+		...attributes,
+		...tone === "Error" ? [h.Role("alert")] : [],
+		h.Class(`notice${TONE_CLASS[tone]}`)
+	], [
+		toneGlyphView({
+			tone,
+			...glyph !== void 0 && { glyph }
+		}, h),
+		h.div([], [...title === void 0 ? [] : [h.strong([], [title])], ...body]),
+		...actions
+	])), "@gjermundgaraba/pixel-paper/notice/notice.js#view");
+};
+export { TONE_CLASS, toneGlyphView, view };

package/dist/outcome/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewConfig, view } from "./outcome.js";
+declare namespace index_d_exports {
+  export { ViewConfig, view };
+}
+export { type ViewConfig, index_d_exports, view };

package/dist/outcome/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./outcome.js";
+// src/outcome/index.ts
+var outcome_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/outcome/index.js#view") });
+export { outcome_exports, view };

package/dist/outcome/outcome.d.ts

@@ -0,0 +1,19 @@
+import { Attributes } from "../attributes/attributes.js";
+import { Tone } from "../notice/notice.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering an outcome with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Pixel caps: what happened, or what is asked (`"Session ended"`). */
+  title: string;
+  /** One sans sentence: why, and what to do next. */
+  body: ReadonlyArray<Html | string>;
+  tone?: Tone;
+  /** What follows the sentence: a code, the details, a list of what was asked. */
+  detail?: ReadonlyArray<Html | string>;
+  /** Attributes for the title and sentence together, such as the `description` group of the
+   *  dialog they describe; never a class. */
+  bodyAttributes?: Attributes<Message>;
+}>;
+/** A state said in full: a 34px glyph box, a title, a sentence. The body of a confirm, and of
+ *  a wall that stops the reader (session ended, access refused, service away). */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/outcome/outcome.js

@@ -0,0 +1,14 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { toneGlyphView } from "../notice/notice.js";
+// src/outcome/outcome.ts
+/** A state said in full: a 34px glyph box, a title, a sentence. The body of a confirm, and of
+*  a wall that stops the reader (session ended, access refused, service away). */
+const view = (config, h) => {
+	const { title, body, tone = "Warn", detail = [], bodyAttributes = [] } = config;
+	return __foldkitBrandViewResult((h.div([h.Class("outcome")], [toneGlyphView({ tone }, h), h.div([...bodyAttributes, h.Class("outcome-body")], [
+		h.strong([], [title]),
+		h.p([], body),
+		...detail
+	])])), "@gjermundgaraba/pixel-paper/outcome/outcome.js#view");
+};
+export { view };

package/dist/page-head/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewConfig, view } from "./page-head.js";
+declare namespace index_d_exports {
+  export { ViewConfig, view };
+}
+export { type ViewConfig, index_d_exports, view };

package/dist/page-head/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./page-head.js";
+// src/page-head/index.ts
+var page_head_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/page-head/index.js#view") });
+export { page_head_exports, view };

package/dist/page-head/page-head.d.ts

@@ -0,0 +1,13 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a page head with `view`. */
+export type ViewConfig = Readonly<{
+  /** The screen's name: its `h1`, in sans. A long one wraps; nothing is cut. */
+  title: string;
+  /** A count or state after the title, in the pixel face ("12 items"). */
+  meta?: string;
+  /** The screen's own Buttons at the right; under the title on a phone. */
+  actions?: ReadonlyArray<Html | string>;
+}>;
+/** The heading of a working screen, above its panels: its name as the page's `h1`, a count
+ *  beside it, and what the screen does. One per screen; the panels below it title in `h2`. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/page-head/page-head.js

@@ -0,0 +1,10 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { slotView } from "../slot/slot.js";
+// src/page-head/page-head.ts
+/** The heading of a working screen, above its panels: its name as the page's `h1`, a count
+*  beside it, and what the screen does. One per screen; the panels below it title in `h2`. */
+const view = (config, h) => {
+	const { title, meta, actions = [] } = config;
+	return __foldkitBrandViewResult((h.div([h.Class("page-head")], [h.div([h.Class("page-name")], [h.h1([h.Class("page-title")], [title]), ...meta === void 0 ? [] : [h.span([h.Class("meta")], [meta])]]), ...slotView("div", "page-acts", actions, h)])), "@gjermundgaraba/pixel-paper/page-head/page-head.js#view");
+};
+export { view };

package/dist/panel/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewConfig, view } from "./panel.js";
+declare namespace index_d_exports {
+  export { ViewConfig, view };
+}
+export { type ViewConfig, index_d_exports, view };

package/dist/panel/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./panel.js";
+// src/panel/index.ts
+var panel_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/panel/index.js#view") });
+export { panel_exports, view };

package/dist/panel/panel.d.ts

@@ -0,0 +1,35 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a panel with `view`. */
+export type ViewConfig = Readonly<{
+  /** Unique in the document: the title's id is made from it, and names the panel. It is the
+   *  panel's key too, so a panel among siblings that come and go keeps its own element, and
+   *  a panel with a different id is a different element: one that replaces another in the
+   *  same place is built anew, live regions and all. To keep an element across states, render
+   *  one panel under one id. */
+  id: string;
+  /** Pixel caps in the inverted title bar. */
+  title: string;
+  /** What screen readers call the panel where its title repeats among its siblings (panels
+   *  titled by a kind, one per account): the title and what tells this one apart. The
+   *  title names it otherwise. */
+  name?: string;
+  /** A quiet IconButton before the title, such as the grip a Sortable of panels hands each
+   *  panel. On the ink bar it prints as `actions` do. */
+  lead?: ReadonlyArray<Html | string>;
+  /** A count or state at the title bar's right. */
+  meta?: string;
+  /** Small Buttons and IconButtons at the title bar's right end, after the meta. On the ink
+   *  bar they print in paper, flat, and ring in their own colour inside their edge. */
+  actions?: ReadonlyArray<Html | string>;
+  /** A strip on the head tint between the title bar and the body, for a field that picks what
+   *  the body shows (an area over its tasks). Its labels print in on-head. */
+  shelf?: ReadonlyArray<Html | string>;
+  body: ReadonlyArray<Html | string>;
+  /** A ruled foot under the body: a note line, then actions pushed right. */
+  foot?: ReadonlyArray<Html | string>;
+  /** The body sits edge to edge (rows, tables, meters) instead of in the padded body. */
+  isFlush?: boolean;
+}>;
+/** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
+ *  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;