@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/toast/toast.js

@@ -0,0 +1,269 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { announce } from "../announcer/announcer.js";
+import { TONE_CLASS, toneGlyphView } from "../notice/notice.js";
+import { isPlain } from "../keys/keys.js";
+import { view as view$1 } from "../icon-button/icon-button.js";
+import { Focus } from "../focus/focus.js";
+import { htmlElement } from "../dom/html-element.js";
+import { Message as Message$1, Model as Model$1, OutMessage, dismiss as dismiss$1, hold, init as init$1, newestId, release, show as show$1, showing, update as update$1, view as view$2 } from "./stack.js";
+import { Array, Duration, Effect, Match, Option, Schema, Stream } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import * as Render from "foldkit/render";
+import * as Mount from "foldkit/mount";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Update from "foldkit/update";
+import * as Dom from "foldkit/dom";
+// src/toast/toast.ts
+/** Schema for the page's toast stack: the `@foldkit/ui` Toast stack it is built on, which
+*  holds the slips, what holds them on screen (the pointer on a slip, the keyboard in the
+*  stack), and where focus came into the stack from. */
+const Model = Schema.Struct({
+	stack: Model$1,
+	isPointerIn: Schema.Boolean,
+	isFocusIn: Schema.Boolean,
+	maybeReturnFocusId: Schema.Option(Schema.String)
+});
+/** Union of all Messages the toast stack can produce. */
+const Message = defineMessageUnion({
+	GotStackMessage: { message: Message$1 },
+	FocusedStack: { maybeFromId: Schema.Option(Schema.String) },
+	BlurredStack: {},
+	PressedEscape: {},
+	MovedHost: {},
+	ClickedDismiss: { entryId: Schema.String },
+	CompletedFocusSlip: {},
+	CompletedFocus: {},
+	CompletedAnnounceSlip: {}
+});
+const TOAST_HOLD = Duration.seconds(5);
+const MOST_SHOWING = 3;
+/** Creates an empty toast stack. */
+const init = (config) => (__foldkitBrandViewResult(({
+	stack: init$1({
+		id: config.id,
+		defaultDuration: TOAST_HOLD
+	}),
+	isPointerIn: false,
+	isFocusIn: false,
+	maybeReturnFocusId: Option.none()
+}), "@gjermundgaraba/pixel-paper/toast/toast.js#init"));
+/** The stack's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.stack.id), "@gjermundgaraba/pixel-paper/toast/toast.js#id");
+const isHeld = (model) => __foldkitBrandViewResult((model.isPointerIn || model.isFocusIn), "@gjermundgaraba/pixel-paper/toast/toast.js#isHeld");
+const slips = (model) => __foldkitBrandViewResult((showing(model.stack)), "@gjermundgaraba/pixel-paper/toast/toast.js#slips");
+const foldConfig = {
+	foldOutMessage: OutMessage.match({ DismissedToast: () => __foldkitBrandViewResult(((model) => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous"))), "@gjermundgaraba/pixel-paper/toast/toast.js#DismissedToast") }),
+	read: (model) => __foldkitBrandViewResult((Option.some(model.stack)), "@gjermundgaraba/pixel-paper/toast/toast.js#read"),
+	write: (model, nextStack) => __foldkitBrandViewResult((modifyFields(model, { stack: () => __foldkitBrandViewResult((nextStack), "@gjermundgaraba/pixel-paper/toast/toast.js#stack") })), "@gjermundgaraba/pixel-paper/toast/toast.js#write"),
+	toParentMessage: (message) => __foldkitBrandViewResult((Message.GotStackMessage({ message })), "@gjermundgaraba/pixel-paper/toast/toast.js#toParentMessage")
+};
+const foldStack = Update.foldChild({
+	update: update$1,
+	...foldConfig
+});
+const stackStep = (apply, entryId) => __foldkitBrandViewResult((Update.foldChildStep({
+	update: (stack) => __foldkitBrandViewResult((apply(stack, entryId)), "@gjermundgaraba/pixel-paper/toast/toast.js#update"),
+	...foldConfig
+})), "@gjermundgaraba/pixel-paper/toast/toast.js#stackStep");
+const dismissStep = (entryId) => __foldkitBrandViewResult((stackStep(dismiss$1, entryId)), "@gjermundgaraba/pixel-paper/toast/toast.js#dismissStep");
+const eachSlip = (model, apply, maybeExceptId) => __foldkitBrandViewResult((Update.combine(model, Array.map(Array.filter(slips(model), (slip) => __foldkitBrandViewResult((!Option.contains(maybeExceptId, slip.id)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~2")), (slip) => __foldkitBrandViewResult((stackStep(apply, slip.id)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~3")))), "@gjermundgaraba/pixel-paper/toast/toast.js#eachSlip");
+const holdAll = (model) => __foldkitBrandViewResult((eachSlip(model, hold, Option.none())), "@gjermundgaraba/pixel-paper/toast/toast.js#holdAll");
+const releaseUnlessHeld = (model, maybeExceptId) => __foldkitBrandViewResult((isHeld(model) ? holdAll(model) : eachSlip(model, release, maybeExceptId)), "@gjermundgaraba/pixel-paper/toast/toast.js#releaseUnlessHeld");
+const pointerMoved = (stackMessage) => __foldkitBrandViewResult((Match.value(stackMessage).pipe(Match.withReturnType(), Match.tag("HoveredEntry", ({ entryId }) => __foldkitBrandViewResult((Option.some({
+	isPointerIn: true,
+	entryId
+})), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~4")), Match.tag("LeftEntry", ({ entryId }) => __foldkitBrandViewResult((Option.some({
+	isPointerIn: false,
+	entryId
+})), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~5")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~6")))), "@gjermundgaraba/pixel-paper/toast/toast.js#pointerMoved");
+const holdIfHeld = (entryId) => __foldkitBrandViewResult(((model) => __foldkitBrandViewResult((isHeld(model) ? stackStep(hold, entryId)(model) : { model }), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~7")), "@gjermundgaraba/pixel-paper/toast/toast.js#holdIfHeld");
+const updateStack = (model, stackMessage) => __foldkitBrandViewResult((Option.match(pointerMoved(stackMessage), {
+	onNone: () => __foldkitBrandViewResult((foldStack(model, stackMessage)), "@gjermundgaraba/pixel-paper/toast/toast.js#onNone"),
+	onSome: ({ isPointerIn, entryId }) => __foldkitBrandViewResult((Update.combine(modifyFields(model, { isPointerIn: () => __foldkitBrandViewResult((isPointerIn), "@gjermundgaraba/pixel-paper/toast/toast.js#isPointerIn") }), [foldStack(stackMessage), (moved) => __foldkitBrandViewResult((releaseUnlessHeld(moved, Option.some(entryId))), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~8")])), "@gjermundgaraba/pixel-paper/toast/toast.js#onSome")
+})), "@gjermundgaraba/pixel-paper/toast/toast.js#updateStack");
+/** Moves focus, after the keyboard dismissed a slip, to the dismiss button of the slip now in
+*  its place, or the one before it. */
+const FocusSlip = Command.define("FocusSlip", {
+	args: { entryId: Schema.String },
+	messages: [Message.CompletedFocusSlip],
+	execute: ({ entryId }) => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(entryId)} .toast > .iconbtn`).pipe(Effect.ignore, Effect.as(Message.CompletedFocusSlip()))), "@gjermundgaraba/pixel-paper/toast/toast.js#execute")
+});
+const stackElement = (stackId) => __foldkitBrandViewResult((htmlElement(`#${CSS.escape(stackId)}`)), "@gjermundgaraba/pixel-paper/toast/toast.js#stackElement");
+/**
+* Says a raised slip exactly once. `@foldkit/ui`'s stack is always a polite live region, so a
+* slip added to a stack already on the page is read from there, and this says nothing more. A
+* stack mounted in the same render (it moved to another host, a Dialog opening or closing in
+* the same update) is a live region that arrives already holding the slip, which goes
+* unheard: then the slip is said through the page's live region (as `Announcer.Announce` does),
+* which follows the same host. It compares the stack element before and after the render.
+*/
+const AnnounceSlip = Command.define("AnnounceSlip", {
+	args: {
+		stackId: Schema.String,
+		text: Schema.String
+	},
+	messages: [Message.CompletedAnnounceSlip],
+	execute: ({ stackId, text }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		const maybeBefore = yield* Effect.sync(() => __foldkitBrandViewResult((stackElement(stackId)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~10"));
+		yield* Render.afterCommit;
+		const maybeAfter = yield* Effect.sync(() => __foldkitBrandViewResult((stackElement(stackId)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~11"));
+		if (!(Option.isSome(maybeBefore) && Option.isSome(maybeAfter) && maybeBefore.value === maybeAfter.value)) yield* announce(text);
+		return __foldkitBrandViewResult((Message.CompletedAnnounceSlip()), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~9");
+	})), "@gjermundgaraba/pixel-paper/toast/toast.js#execute~2")
+});
+const focusAfter = (model, entryId) => {
+	const index = Option.getOrElse(Array.findFirstIndex(slips(model), (slip) => __foldkitBrandViewResult((slip.id === entryId), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~12")), () => __foldkitBrandViewResult((0), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~13"));
+	const remaining = Array.filter(slips(model), (slip) => __foldkitBrandViewResult((slip.id !== entryId), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~14"));
+	return __foldkitBrandViewResult((Option.match(Array.get(remaining, Math.min(index, remaining.length - 1)), {
+		onSome: (slip) => __foldkitBrandViewResult((Option.some(FocusSlip({ entryId: slip.id }))), "@gjermundgaraba/pixel-paper/toast/toast.js#onSome~2"),
+		onNone: () => __foldkitBrandViewResult((Option.map(model.maybeReturnFocusId, (elementId) => __foldkitBrandViewResult((Focus({ id: elementId })), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~15"))), "@gjermundgaraba/pixel-paper/toast/toast.js#onNone~2")
+	})), "@gjermundgaraba/pixel-paper/toast/toast.js#focusAfter");
+};
+const dismissKeepingFocus = (model, entryId) => __foldkitBrandViewResult((Update.combine(model, [dismissStep(entryId), (stepModel) => __foldkitBrandViewResult((model.isFocusIn ? {
+	model: modifyFields(stepModel, { isFocusIn: () => __foldkitBrandViewResult((!Array.isReadonlyArrayEmpty(slips(stepModel))), "@gjermundgaraba/pixel-paper/toast/toast.js#isFocusIn") }),
+	commands: Option.toArray(focusAfter(model, entryId))
+} : { model: stepModel }), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~16")])), "@gjermundgaraba/pixel-paper/toast/toast.js#dismissKeepingFocus");
+/** Processes a toast stack Message and returns the next Model and Commands. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
+	GotStackMessage: ({ message: stackMessage }) => __foldkitBrandViewResult((updateStack(model, stackMessage)), "@gjermundgaraba/pixel-paper/toast/toast.js#GotStackMessage"),
+	FocusedStack: ({ maybeFromId }) => __foldkitBrandViewResult((holdAll(modifyFields(model, {
+		isFocusIn: () => __foldkitBrandViewResult((true), "@gjermundgaraba/pixel-paper/toast/toast.js#isFocusIn~2"),
+		maybeReturnFocusId: (returnId) => __foldkitBrandViewResult((model.isFocusIn ? returnId : maybeFromId), "@gjermundgaraba/pixel-paper/toast/toast.js#maybeReturnFocusId")
+	}))), "@gjermundgaraba/pixel-paper/toast/toast.js#FocusedStack"),
+	BlurredStack: () => __foldkitBrandViewResult((model.isFocusIn ? releaseUnlessHeld(modifyFields(model, { isFocusIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/toast/toast.js#isFocusIn~3") }), Option.none()) : { model }), "@gjermundgaraba/pixel-paper/toast/toast.js#BlurredStack"),
+	PressedEscape: () => __foldkitBrandViewResult((Option.match(Array.last(slips(model)), {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/toast/toast.js#onNone~3")),
+		onSome: (newest) => __foldkitBrandViewResult((dismissKeepingFocus(model, newest.id)), "@gjermundgaraba/pixel-paper/toast/toast.js#onSome~3")
+	})), "@gjermundgaraba/pixel-paper/toast/toast.js#PressedEscape"),
+	MovedHost: () => __foldkitBrandViewResult((releaseUnlessHeld(modifyFields(model, {
+		isFocusIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/toast/toast.js#isFocusIn~4"),
+		isPointerIn: () => __foldkitBrandViewResult((false), "@gjermundgaraba/pixel-paper/toast/toast.js#isPointerIn~2")
+	}), Option.none())), "@gjermundgaraba/pixel-paper/toast/toast.js#MovedHost"),
+	ClickedDismiss: ({ entryId }) => __foldkitBrandViewResult((dismissKeepingFocus(model, entryId)), "@gjermundgaraba/pixel-paper/toast/toast.js#ClickedDismiss"),
+	CompletedFocusSlip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/toast/toast.js#CompletedFocusSlip")),
+	CompletedFocus: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/toast/toast.js#CompletedFocus")),
+	CompletedAnnounceSlip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/toast/toast.js#CompletedAnnounceSlip"))
+})), "@gjermundgaraba/pixel-paper/toast/toast.js#update~2");
+const oldestCalm = (model) => {
+	const calm = Array.filter(slips(model), (slip) => __foldkitBrandViewResult((slip.payload.tone !== "Error"), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~17"));
+	return __foldkitBrandViewResult((Option.filter(Array.head(calm), () => __foldkitBrandViewResult((calm.length >= MOST_SHOWING), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~18"))), "@gjermundgaraba/pixel-paper/toast/toast.js#oldestCalm");
+};
+const spoken = (config) => __foldkitBrandViewResult((config.body === void 0 ? `${config.title}.` : `${config.title}. ${config.body}`), "@gjermundgaraba/pixel-paper/toast/toast.js#spoken");
+/**
+* Raises a slip and says it once (see `AnnounceSlip`). At most `MOST_SHOWING` slips that are
+* not errors show: one more takes the place of the oldest of them. Errors stack without limit,
+* take nothing's place, and stay until the reader dismisses them or the application takes
+* them back with `dismiss` and the returned `entryId`. Every tone, an error included, is said
+* politely, never as an alert. A slip raised while the stack is held waits with the others.
+*/
+const show = (model, config) => {
+	const payload = {
+		tone: config.tone,
+		title: config.title,
+		maybeBody: Option.fromNullishOr(config.body)
+	};
+	const maybeReplaced = Option.filter(oldestCalm(model), () => __foldkitBrandViewResult((config.tone !== "Error"), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~19"));
+	const raised = Update.combine(model, [...Array.fromOption(Option.map(maybeReplaced, (slip) => __foldkitBrandViewResult((dismissStep(slip.id)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~20"))), Update.foldChildStep({
+		update: (stack) => __foldkitBrandViewResult((show$1(stack, {
+			payload,
+			variant: "Info",
+			sticky: config.tone === "Error"
+		})), "@gjermundgaraba/pixel-paper/toast/toast.js#update~3"),
+		...foldConfig
+	})]);
+	const entryId = Option.getOrThrowWith(newestId(raised.model.stack), () => /* @__PURE__ */ __foldkitBrandViewResult((new Error("The toast stack raised no entry.")), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~21"));
+	const shown = Update.combine(raised.model, [holdIfHeld(entryId), (stepModel) => (__foldkitBrandViewResult(({
+		model: stepModel,
+		commands: [AnnounceSlip({
+			stackId: id(stepModel),
+			text: spoken(config)
+		})]
+	}), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~22"))]);
+	return __foldkitBrandViewResult(({
+		model: shown.model,
+		commands: [...raised.commands ?? [], ...shown.commands ?? []],
+		entryId
+	}), "@gjermundgaraba/pixel-paper/toast/toast.js#show");
+};
+/** Takes a slip back by its id: what it reported has recovered. */
+const dismiss = (model, entryId) => __foldkitBrandViewResult((dismissKeepingFocus(model, entryId)), "@gjermundgaraba/pixel-paper/toast/toast.js#dismiss");
+const slipView = (entry, h) => {
+	const { tone, title, maybeBody } = entry.payload;
+	return __foldkitBrandViewResult((h.div([h.Class(`notice toast${TONE_CLASS[tone]}`)], [
+		toneGlyphView({ tone }, h),
+		h.div([], [h.strong([], [title]), ...Option.toArray(maybeBody)]),
+		view$1({
+			glyph: "cross",
+			label: `Dismiss: ${title}`,
+			onClick: Message.ClickedDismiss({ entryId: entry.id })
+		}, h)
+	])), "@gjermundgaraba/pixel-paper/toast/toast.js#slipView");
+};
+const isOutside = (stack, target) => __foldkitBrandViewResult((!(target instanceof Node && stack.contains(target))), "@gjermundgaraba/pixel-paper/toast/toast.js#isOutside");
+const elementId = (target) => __foldkitBrandViewResult((target instanceof Element && target.id !== "" ? Option.some(target.id) : Option.none()), "@gjermundgaraba/pixel-paper/toast/toast.js#elementId");
+const isEscape = (event) => __foldkitBrandViewResult((event.key === "Escape" && !event.isComposing && !event.defaultPrevented && isPlain(event)), "@gjermundgaraba/pixel-paper/toast/toast.js#isEscape");
+const stackFocusIn = (stack, event) => __foldkitBrandViewResult((Option.liftPredicate(Message.FocusedStack({ maybeFromId: elementId(event.relatedTarget) }), () => __foldkitBrandViewResult((isOutside(stack, event.relatedTarget)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~23"))), "@gjermundgaraba/pixel-paper/toast/toast.js#stackFocusIn");
+const stackFocusOut = (stack, event) => __foldkitBrandViewResult((Option.liftPredicate(Message.BlurredStack(), () => __foldkitBrandViewResult((isOutside(stack, event.relatedTarget)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~24"))), "@gjermundgaraba/pixel-paper/toast/toast.js#stackFocusOut");
+const stackKey = (event) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedEscape(), () => __foldkitBrandViewResult((isEscape(event)), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~25"))), "@gjermundgaraba/pixel-paper/toast/toast.js#stackKey");
+/** The stack's focus and keys: focus coming in (and from where) and going out, and Escape
+*  on a slip, which takes the newest and keeps a Dialog the stack sits in open (its default is
+*  prevented). In a Scene, resolve it with `sceneMounts`. */
+const BindStack = Mount.defineStream("BindStack", {
+	messages: [
+		Message.FocusedStack,
+		Message.BlurredStack,
+		Message.PressedEscape
+	],
+	execute: ({ element }) => __foldkitBrandViewResult((Stream.mergeAll([
+		Dom.streamFromEventFilterMap({
+			target: element,
+			type: "focusin",
+			filterMapEvent: (event) => __foldkitBrandViewResult((stackFocusIn(element, event)), "@gjermundgaraba/pixel-paper/toast/toast.js#filterMapEvent")
+		}),
+		Dom.streamFromEventFilterMap({
+			target: element,
+			type: "focusout",
+			filterMapEvent: (event) => __foldkitBrandViewResult((stackFocusOut(element, event)), "@gjermundgaraba/pixel-paper/toast/toast.js#filterMapEvent~2")
+		}),
+		Dom.streamFromEventFilterMapPreventDefault({
+			target: element,
+			type: "keydown",
+			filterMapEvent: stackKey
+		})
+	], { concurrency: "unbounded" })), "@gjermundgaraba/pixel-paper/toast/toast.js#execute~3")
+});
+/**
+* The page's toasts: printed slips at the bottom right (across the bottom on a phone), the
+* newest lowest, built on `@foldkit/ui`'s Toast, in a polite live region named
+* "Notifications". Each slip is said once as it is raised: by the stack, or through the
+* page's live region when the stack moved host in the same render (see `AnnounceSlip`). Ok
+* and quiet slips leave after the hold, which waits while the pointer is on any slip or the
+* keyboard is in the stack; Escape in the stack dismisses the newest, and focus moves to the
+* slip now in its place, or back where it came from once none is left.
+*
+* Render it once, placed by the rule the Announcer follows: while a Dialog is open, inside the
+* topmost one (in its `toLiveRegionView`, beside the Announcer), so a toast raised from a card
+* shows above it and can be reached; otherwise in the body. Moving it lets go of its holds.
+*/
+const view = defineView((model, h) => __foldkitBrandViewResult((h.div([
+	h.OnMount(BindStack()),
+	h.OnUnmount(Message.MovedHost()),
+	h.Class("toasts")
+], [h.submodel({
+	slotId: `${id(model)}-entries`,
+	model: model.stack,
+	view: view$2,
+	viewInputs: {
+		position: "BottomRight",
+		ariaLabel: "Notifications",
+		containerClassName: "toast-stack",
+		entryToView: (entry) => __foldkitBrandViewResult((slipView(entry, h)), "@gjermundgaraba/pixel-paper/toast/toast.js#entryToView")
+	},
+	toParentMessage: (message) => __foldkitBrandViewResult((Message.GotStackMessage({ message })), "@gjermundgaraba/pixel-paper/toast/toast.js#toParentMessage~2")
+})])), "@gjermundgaraba/pixel-paper/toast/toast.js#anonymous~26"));
+/** What a parent's Scene resolves the stack's Mounts with, each with a Message that changes
+*  nothing: `Scene.Mount.resolveAll(...Toast.sceneMounts)`. */
+const sceneMounts = [[BindStack, Message.BlurredStack()]];
+export { AnnounceSlip, BindStack, FocusSlip, Message, Model, dismiss, id, init, sceneMounts, show, stackFocusIn, stackFocusOut, stackKey, update, view };

package/dist/toc/index.d.ts

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

package/dist/toc/index.js

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

package/dist/toc/toc.d.ts

@@ -0,0 +1,42 @@
+import { Option, Schema } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+import { EntryWithoutKeepAlive } from "foldkit/subscription";
+/** A heading's level: `2` at the margin, `3` indented under it. */
+export declare const Level: Schema.Literals<readonly [2, 3]>;
+export type Level = typeof Level.Type;
+/** One heading in the contents. */
+export type Entry = Readonly<{
+  /** The heading's id in the page. */
+  id: string;
+  /** The heading's words, the link's name. */
+  label: string;
+  level: Level;
+}>;
+/** Configuration for rendering a table of contents with `view`. */
+export type ViewConfig = Readonly<{
+  entries: readonly Entry[];
+  /** The heading being read, from the caller's Model, kept by `readingPositionEntry`. `None`
+   *  until it first reports, as during a server render: the first heading is marked. */
+  maybeCurrentId: Option.Option<string>;
+}>;
+/** The page's headings as plain links in a `<nav>` named "On this page". One ink cell marks the
+ *  heading being read, which is also `aria-current`. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
+/** Configuration for the `readingPositionEntry` Subscription helper. */
+export type ReadingPositionConfig<Model, Message> = Readonly<{
+  /** The ids of the headings the contents list, in page order; nothing is read while empty. */
+  headingIds: (model: Model) => readonly string[];
+  toMessage: (id: string) => Message;
+}>;
+/**
+ * A Subscription entry that reports the heading being read: the last of `headingIds` that has
+ * passed the upper fifth of the view, else the first. It reports once at the start and then
+ * on each scroll that moves it to another heading. Keep the id in the Model and hand it to
+ * `view` as `maybeCurrentId`. Pass it into `Subscription.make` as an entry value.
+ *
+ * A Subscription, not a Mount: what it reads is the window's scroll and headings elsewhere on
+ * the page, not the contents element, and its answer is Model state the view renders.
+ */
+export declare const readingPositionEntry: <Model, Message>(config: ReadingPositionConfig<Model, Message>) => EntryWithoutKeepAlive<Model, Message, Readonly<{
+  headingIds: readonly string[];
+}>, never>;

package/dist/toc/toc.js

@@ -0,0 +1,35 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array, Option, Schema, Stream, pipe } from "effect";
+Schema.Literals([2, 3]);
+const currentId = (entries, maybeCurrentId) => __foldkitBrandViewResult((Option.orElse(maybeCurrentId, () => __foldkitBrandViewResult((Option.map(Array.head(entries), ({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~2"))), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous"))), "@gjermundgaraba/pixel-paper/toc/toc.js#currentId");
+/** The page's headings as plain links in a `<nav>` named "On this page". One ink cell marks the
+*  heading being read, which is also `aria-current`. */
+const view = (config, h) => {
+	const { entries } = config;
+	const maybeCurrent = currentId(entries, config.maybeCurrentId);
+	return __foldkitBrandViewResult((h.nav([h.AriaLabel("On this page")], [h.ul([h.Class("toc")], Array.map(entries, ({ id, label, level }) => __foldkitBrandViewResult((h.keyed("li")(id, level === 3 ? [h.Class("l3")] : [], [h.a([h.Href(`#${id}`), ...Option.contains(maybeCurrent, id) ? [h.AriaCurrent("true")] : []], [label])])), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~3")))])), "@gjermundgaraba/pixel-paper/toc/toc.js#view");
+};
+const READING_LINE = .2;
+const readingPosition = (headingIds) => {
+	const headings = Array.getSomes(Array.map(headingIds, (id) => __foldkitBrandViewResult((Option.fromNullishOr(document.querySelector(`#${CSS.escape(id)}`))), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~4")));
+	const line = window.innerHeight * READING_LINE;
+	return __foldkitBrandViewResult((pipe(Array.findLast(headings, (heading) => __foldkitBrandViewResult((heading.getBoundingClientRect().top <= line), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~5")), Option.orElse(() => __foldkitBrandViewResult((Array.head(headings)), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~6")), Option.map(({ id }) => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~7")))), "@gjermundgaraba/pixel-paper/toc/toc.js#readingPosition");
+};
+/**
+* A Subscription entry that reports the heading being read: the last of `headingIds` that has
+* passed the upper fifth of the view, else the first. It reports once at the start and then
+* on each scroll that moves it to another heading. Keep the id in the Model and hand it to
+* `view` as `maybeCurrentId`. Pass it into `Subscription.make` as an entry value.
+*
+* A Subscription, not a Mount: what it reads is the window's scroll and headings elsewhere on
+* the page, not the contents element, and its answer is Model state the view renders.
+*/
+const readingPositionEntry = (config) => (__foldkitBrandViewResult(({
+	dependenciesSchema: Schema.Struct({ headingIds: Schema.Array(Schema.String) }),
+	modelToDependencies: (model) => (__foldkitBrandViewResult(({ headingIds: config.headingIds(model) }), "@gjermundgaraba/pixel-paper/toc/toc.js#modelToDependencies")),
+	dependenciesToStream: ({ headingIds }) => __foldkitBrandViewResult((Array.match(headingIds, {
+		onEmpty: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba/pixel-paper/toc/toc.js#onEmpty"),
+		onNonEmpty: (ids) => __foldkitBrandViewResult((Stream.suspend(() => __foldkitBrandViewResult((Stream.concat(Stream.make(void 0), Stream.fromEventListener(window, "scroll", { passive: true }))), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~8")).pipe(Stream.map(() => __foldkitBrandViewResult((readingPosition(ids)), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~9")), Stream.filter(Option.isSome), Stream.map(({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba/pixel-paper/toc/toc.js#anonymous~10")), Stream.changes, Stream.map(config.toMessage))), "@gjermundgaraba/pixel-paper/toc/toc.js#onNonEmpty")
+	})), "@gjermundgaraba/pixel-paper/toc/toc.js#dependenciesToStream")
+}), "@gjermundgaraba/pixel-paper/toc/toc.js#readingPositionEntry"));
+export { readingPositionEntry, view };

package/dist/top-bar/bar-height.d.ts

@@ -0,0 +1,26 @@
+import "../attributes/attributes.js";
+import { Schema } from "effect";
+import { HtmlBuilder } from "foldkit/html";
+import * as Mount from "foldkit/mount";
+/** What a bar's height Mount reports: it started keeping the page's custom property at the
+ *  bar's height. Nothing in a Model follows it. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly CompletedMeasureHeight: {};
+}>;
+export type Message = typeof Message.Type;
+/** Keeps `property` on the page's root at the bar's height, however it wraps, from the moment
+ *  the bar mounts until it leaves, so what is placed around it clears it. Only the page's
+ *  first bar of its kind (`selector`) does: one shown inside the page, a specimen of one,
+ *  leaves it alone. */
+export declare const MeasureHeight: Mount.MountDefinitionWithArgs<"MeasureHeight", {
+  selector: Schema.String;
+  property: Schema.String;
+}, {
+  readonly _tag: "CompletedMeasureHeight";
+}>;
+/** What a parent's Scene resolves the bar's Mount with, the Message lifted as the bar's
+ *  `toParentMessage` lifts it: `Scene.Mount.resolveAll(...TopBar.sceneMounts(toParentMessage))`.
+ *  It matches by name, since the Mount the parent holds reports the parent's Message. */
+export declare const sceneMounts: <ParentMessage>(toParentMessage: (message: Message) => ParentMessage) => readonly [readonly [{
+  readonly name: "MeasureHeight";
+}, ParentMessage]];

package/dist/top-bar/bar-height.js

@@ -0,0 +1,43 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Effect, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import * as Mount from "foldkit/mount";
+// src/top-bar/bar-height.ts
+/** What a bar's height Mount reports: it started keeping the page's custom property at the
+*  bar's height. Nothing in a Model follows it. */
+const Message = defineMessageUnion({ CompletedMeasureHeight: {} });
+const isFirstOfKind = (element, selector) => __foldkitBrandViewResult((document.querySelector(selector) === element), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#isFirstOfKind");
+/** Keeps `property` on the page's root at the bar's height, however it wraps, from the moment
+*  the bar mounts until it leaves, so what is placed around it clears it. Only the page's
+*  first bar of its kind (`selector`) does: one shown inside the page, a specimen of one,
+*  leaves it alone. */
+const MeasureHeight = Mount.define("MeasureHeight", {
+	args: {
+		selector: Schema.String,
+		property: Schema.String
+	},
+	messages: [Message.CompletedMeasureHeight],
+	execute: ({ element, selector, property }) => __foldkitBrandViewResult((Effect.gen(function* () {
+		if (!(element instanceof HTMLElement) || !isFirstOfKind(element, selector)) return __foldkitBrandViewResult((Message.CompletedMeasureHeight()), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#anonymous");
+		const root = document.documentElement.style;
+		yield* Effect.acquireRelease(Effect.sync(() => {
+			const measure = () => {
+				root.setProperty(property, `${element.offsetHeight}px`);
+			};
+			const observer = new ResizeObserver(measure);
+			observer.observe(element);
+			measure();
+			return __foldkitBrandViewResult((observer), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#anonymous~2");
+		}), (observer) => __foldkitBrandViewResult((Effect.sync(() => {
+			observer.disconnect();
+			root.removeProperty(property);
+		})), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#anonymous~3"));
+		return __foldkitBrandViewResult((Message.CompletedMeasureHeight()), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#anonymous");
+	})), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#execute")
+});
+/** What a parent's Scene resolves the bar's Mount with, the Message lifted as the bar's
+*  `toParentMessage` lifts it: `Scene.Mount.resolveAll(...TopBar.sceneMounts(toParentMessage))`.
+*  It matches by name, since the Mount the parent holds reports the parent's Message. */
+const sceneMounts = (toParentMessage) => __foldkitBrandViewResult(([[{ name: MeasureHeight.name }, toParentMessage(Message.CompletedMeasureHeight())]]), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#sceneMounts");
+const measureAttributes = (toParentMessage, args, h) => __foldkitBrandViewResult(([h.OnMount(Mount.mapMessage(MeasureHeight(args), toParentMessage))]), "@gjermundgaraba/pixel-paper/top-bar/bar-height.js#measureAttributes");
+export { MeasureHeight, Message, measureAttributes, sceneMounts };

package/dist/top-bar/index.d.ts

@@ -0,0 +1,6 @@
+import { MeasureHeight, Message, sceneMounts } from "./bar-height.js";
+import { ViewConfig, view } from "./top-bar.js";
+declare namespace index_d_exports {
+  export { MeasureHeight, Message, ViewConfig, sceneMounts, view };
+}
+export { MeasureHeight, Message, type ViewConfig, index_d_exports, sceneMounts, view };

package/dist/top-bar/index.js

@@ -0,0 +1,12 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { MeasureHeight, Message, sceneMounts } from "./bar-height.js";
+import { view } from "./top-bar.js";
+// src/top-bar/index.ts
+var top_bar_exports = /* @__PURE__ */ __exportAll({
+	MeasureHeight: () => __foldkitBrandViewResult((MeasureHeight), "@gjermundgaraba/pixel-paper/top-bar/index.js#MeasureHeight"),
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/top-bar/index.js#Message"),
+	sceneMounts: () => __foldkitBrandViewResult((sceneMounts), "@gjermundgaraba/pixel-paper/top-bar/index.js#sceneMounts"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/top-bar/index.js#view")
+});
+export { MeasureHeight, Message, sceneMounts, top_bar_exports, view };

package/dist/top-bar/top-bar.d.ts

@@ -0,0 +1,19 @@
+import { Message } from "./bar-height.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a top bar with `view`. */
+export type ViewConfig<Message$1> = Readonly<{
+  /** The wordmark, at the left. */
+  brand: ReadonlyArray<Html | string>;
+  /** A NavStrip; on a phone it drops to a full-width strip under the brand. */
+  nav?: readonly Html[];
+  /** The right-hand tools; they wrap as one group. */
+  tools?: ReadonlyArray<Html | string>;
+  /** Lifts the bar's lifecycle Message (`MeasureHeight` started: the page's first top bar
+   *  keeps `--topbar-h` at its height however it wraps, so anchors land clear of it) into the
+   *  parent's Message, which the parent's update takes and changes nothing for. In a Scene,
+   *  resolve it with `TopBar.sceneMounts(toParentMessage)`. */
+  toParentMessage: (message: Message) => Message$1;
+}>;
+/** The sticky paper bar across the top of an interface, closed by a 2px ink rule: the page's
+ *  banner landmark (`<header>`), with the brand, the navigation and the tools. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/top-bar/top-bar.js

@@ -0,0 +1,18 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { slotView } from "../slot/slot.js";
+import { measureAttributes } from "./bar-height.js";
+// src/top-bar/top-bar.ts
+/** The sticky paper bar across the top of an interface, closed by a 2px ink rule: the page's
+*  banner landmark (`<header>`), with the brand, the navigation and the tools. */
+const view = (config, h) => {
+	const { brand, nav = [], tools = [], toParentMessage } = config;
+	return __foldkitBrandViewResult((h.header([...measureAttributes(toParentMessage, {
+		selector: ".topbar",
+		property: "--topbar-h"
+	}, h), h.Class("topbar")], [
+		...brand,
+		...nav,
+		...slotView("div", "topbar-tools", tools, h)
+	])), "@gjermundgaraba/pixel-paper/top-bar/top-bar.js#view");
+};
+export { view };

package/dist/wall/index.d.ts

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

package/dist/wall/index.js

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

package/dist/wall/wall.d.ts

@@ -0,0 +1,16 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a wall with `view`. */
+export type ViewConfig = Readonly<{
+  /** One Card, alone on the ground: sign-in, first-run setup. */
+  body: ReadonlyArray<Html | string>;
+}>;
+/** The whole viewport as dithered ground with one card centred on it: the main landmark
+ *  (`<main id="main">`). */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
+/** Configuration for rendering a wall's mark with `markView`. */
+export type MarkConfig = Readonly<{
+  /** The wordmark, which the mark prints at wall size. */
+  brand: ReadonlyArray<Html | string>;
+}>;
+/** The wordmark at wall size beside the lock in a box: the top of a wall's card. */
+export declare const markView: <Message>(config: MarkConfig, h: HtmlBuilder<Message>) => Html;

package/dist/wall/wall.js

@@ -0,0 +1,15 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../glyph/glyph.js";
+// src/wall/wall.ts
+/** The whole viewport as dithered ground with one card centred on it: the main landmark
+*  (`<main id="main">`). */
+const view = (config, h) => {
+	const { body } = config;
+	return __foldkitBrandViewResult((h.main([h.Id("main"), h.Class("wall")], body)), "@gjermundgaraba/pixel-paper/wall/wall.js#view");
+};
+/** The wordmark at wall size beside the lock in a box: the top of a wall's card. */
+const markView = (config, h) => {
+	const { brand } = config;
+	return __foldkitBrandViewResult((h.div([h.Class("wall-mark")], [h.span([h.Class("glyph")], [view$1({ name: "lock" }, h)]), ...brand])), "@gjermundgaraba/pixel-paper/wall/wall.js#markView");
+};
+export { markView, view };

package/dist/window/index.d.ts

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

package/dist/window/index.js

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

package/dist/window/window.d.ts

@@ -0,0 +1,28 @@
+import { GlyphName } from "../glyph/glyphs.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a window with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Unique in the document: the title's id is made from it, and names the window. */
+  id: string;
+  /** Pixel caps in the inverted title bar. */
+  title: string;
+  /** A quiet IconButton before the kind glyph: a Reel's grip. */
+  lead?: readonly Html[];
+  /** What kind of thing it is: a terminal, a note, a machine. */
+  glyph?: GlyphName;
+  /** A chip in the title bar: its state. */
+  status?: ReadonlyArray<Html | string>;
+  /** IconButtons in the title bar, before the close. A child Submodel, whose view is one
+   *  `Html`, hands back several in a `span.window-tools`: it is no box of its own
+   *  (`display: contents`), so its buttons sit in the bar as the others do. */
+  tools?: readonly Html[];
+  /** The close glyph's Message; the glyph prints when it is given. */
+  onClose?: Message;
+  body: ReadonlyArray<Html | string>;
+  /** The body meets the border: a terminal, an editor, rows. */
+  isFlush?: boolean;
+}>;
+/** A panel that lives on a stage, sized by whatever places it (and moved by it, if it moves):
+ *  its body scrolls inside, and its title bar carries its kind, its state and its tools. A
+ *  region landmark (`<section>`) named by its `h2` title. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;