@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/remote/index.d.ts

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

package/dist/remote/index.js

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

package/dist/remote/remote.d.ts

@@ -0,0 +1,28 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+import { AsyncData } from "foldkit";
+/** Configuration for rendering data that loads with `view`. */
+export type ViewConfig<Data, Error, Message> = Readonly<{
+  /** The loading line's id, unique in the document. Retry takes its button away with the
+   *  notice, so return `Focus.Focus({ id })` with the retry: focus lands on the line, which
+   *  says a first load and stays quiet over a refresh. */
+  id: string;
+  data: AsyncData.AsyncData<Data, Error>;
+  /** What loads, as a noun in the words around it: `"usage"` reads "loading usage", "Usage
+   *  not loaded" and "Usage not refreshed". */
+  label: string;
+  /** Why a load failed, in a sentence, under the notice's title. */
+  toErrorText: (error: Error) => string;
+  /** Loads it again: the notice's retry button, on a failure and on stale data alike. */
+  onRetry: Message;
+  /** The data, loaded or the last loaded (an EmptyState for none is the caller's). */
+  toDataView: (data: Data) => readonly Html[];
+}>;
+/**
+ * Data that loads, in each of Foldkit's `AsyncData` states, with the retry built in: a Loading
+ * line while it first loads (in place in every state, so its status is heard), an error
+ * Notice with retry when it failed with nothing to show, a warn Notice with retry above the
+ * last data when a refresh failed (stale), and the data itself once loaded or while it
+ * refreshes, quietly, so a page that polls is not heard each time. Spread it where the
+ * content goes.
+ */
+export declare const view: <Data, Error, Message>(config: ViewConfig<Data, Error, Message>, h: HtmlBuilder<Message>) => readonly Html[];

package/dist/remote/remote.js

@@ -0,0 +1,41 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../notice/notice.js";
+import { view as view$2 } from "../button/button.js";
+import { view as view$3 } from "../loading/loading.js";
+import { AsyncData } from "foldkit";
+// src/remote/remote.ts
+const capitalised = (label) => __foldkitBrandViewResult((`${label.charAt(0).toUpperCase()}${label.slice(1)}`), "@gjermundgaraba/pixel-paper/remote/remote.js#capitalised");
+/**
+* Data that loads, in each of Foldkit's `AsyncData` states, with the retry built in: a Loading
+* line while it first loads (in place in every state, so its status is heard), an error
+* Notice with retry when it failed with nothing to show, a warn Notice with retry above the
+* last data when a refresh failed (stale), and the data itself once loaded or while it
+* refreshes, quietly, so a page that polls is not heard each time. Spread it where the
+* content goes.
+*/
+const view = (config, h) => {
+	const { id, data, label, toErrorText, onRetry, toDataView } = config;
+	const noticeView = (tone, title, error) => __foldkitBrandViewResult((view$1({
+		tone,
+		title,
+		body: [toErrorText(error)],
+		actions: [view$2({
+			label: "retry",
+			isSmall: true,
+			onClick: onRetry
+		}, h)]
+	}, h)), "@gjermundgaraba/pixel-paper/remote/remote.js#noticeView");
+	return __foldkitBrandViewResult(([view$3({
+		isLoading: AsyncData.isLoading(data),
+		label: `loading ${label}`,
+		attributes: [h.Id(id), h.Tabindex(-1)]
+	}, h), ...AsyncData.match(data, {
+		onIdle: () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/remote/remote.js#onIdle"),
+		onLoading: () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/remote/remote.js#onLoading"),
+		onFailure: (error) => __foldkitBrandViewResult(([noticeView("Error", `${capitalised(label)} not loaded`, error)]), "@gjermundgaraba/pixel-paper/remote/remote.js#onFailure"),
+		onStale: ({ error, data: lastData }) => __foldkitBrandViewResult(([noticeView("Warn", `${capitalised(label)} not refreshed`, error), ...toDataView(lastData)]), "@gjermundgaraba/pixel-paper/remote/remote.js#onStale"),
+		onRefreshing: toDataView,
+		onSuccess: toDataView
+	})]), "@gjermundgaraba/pixel-paper/remote/remote.js#view");
+};
+export { view };

package/dist/rows/index.d.ts

@@ -0,0 +1,5 @@
+import { GlyphConfig, RowConfig, TitleConfig, ToggleConfig, ViewConfig, glyphView, rowView, titleView, toggleView, view } from "./rows.js";
+declare namespace index_d_exports {
+  export { GlyphConfig, RowConfig, TitleConfig, ToggleConfig, ViewConfig, glyphView, rowView, titleView, toggleView, view };
+}
+export { type GlyphConfig, type RowConfig, type TitleConfig, type ToggleConfig, type ViewConfig, glyphView, index_d_exports, rowView, titleView, toggleView, view };

package/dist/rows/index.js

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

package/dist/rows/rows.d.ts

@@ -0,0 +1,116 @@
+import { Attributes } from "../attributes/attributes.js";
+import { GlyphName } from "../glyph/glyphs.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a list of rows with `view`. */
+export type ViewConfig = Readonly<{
+  /** Each made with `rowView`. */
+  rows: readonly Html[];
+  /** An outline: nested rows indent 26px and hang on a 1px rule guide. */
+  isOutline?: boolean;
+  /** 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;
+/** A selectable row's checkbox, held in the caller's Model. Its cell inverts while checked; the
+ *  row's text is its label, so a click anywhere on the text toggles it. */
+export type RowSelect<Message> = Readonly<{
+  /** Unique in the document: the id of the box's name is made from it. The box itself has no
+   *  id. */
+  id: string;
+  isChecked: boolean;
+  /** The box's next state. */
+  onToggle: (isChecked: boolean) => Message;
+}>;
+/** 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. */
+  key: string;
+  /** The 18px glyph slot at the left: a `glyphView`, a `toggleView`, or a status as a
+   *  `Chip.dotView`. */
+  glyph?: Html;
+  /** The row's text; it takes the free width and ellipsises. */
+  body: ReadonlyArray<Html | string>;
+  /** Right-aligned chips, marks, counts, due days. */
+  slot?: ReadonlyArray<Html | string>;
+  /** Further attributes for the slot's `span.slot`, such as an id the row's line is described
+   *  by (`aria-describedby`); there is no span, and so nothing to point at, while `slot` is
+   *  empty. Never a class. */
+  slotAttributes?: Attributes<Message>;
+  /** Controls that belong to the row's job, before the tools (an approve and reject pair). */
+  actions?: ReadonlyArray<Html | string>;
+  /** Icon buttons at the row's right end, dimmed until the row is hovered or focused (full
+   *  on the cursor row) and hidden on a phone: `span.tools`. */
+  tools?: ReadonlyArray<Html | string>;
+  /** Rows under this one, in an outline, each made with `rowView`. */
+  nested?: readonly Html[];
+  /** Outside a filter, printed only to keep a match on its chain: muted, and "(context)"
+   *  after its text for screen readers, which the muting does not reach. In a selectable
+   *  row the text names the box, so the box's name says it too. */
+  isContext?: boolean;
+  /** The row's text holds one link (a task, a page), and the row's whole box is its target: a
+   *  press anywhere on the row follows it, while the row's own controls (the box, a toggle,
+   *  the actions and tools) and whatever has a tip stay their own targets. The row takes no
+   *  Tab stop of its own, and the link's ring is drawn round the row. A link that is
+   *  `aria-current` inverts the row. For a list no keyboard drives: a treegrid's row (with
+   *  `treegrid`) is already its own stop, and ignores it. */
+  isLink?: 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`),
+   *  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. 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<{
+  name: GlyphName;
+}>;
+/** A glyph in the row's 18px slot. */
+export declare const glyphView: <Message>(config: GlyphConfig, h: HtmlBuilder<Message>) => Html;
+/** Configuration for rendering a fold toggle with `toggleView`. */
+export type ToggleConfig<Message> = Readonly<{
+  isExpanded: boolean;
+  /** What the nested rows hang under: the toggle is named `"Rows under Notes"` whether open
+   *  or not, and `aria-expanded` says which. */
+  label: string;
+  onToggle: Message;
+}>;
+/** The glyph slot as a fold toggle, built on `@foldkit/ui`'s Button: a ring, open or closed,
+ *  `aria-expanded`, named for the rows it shows. */
+export declare const toggleView: <Message>(config: ToggleConfig<Message>, h: HtmlBuilder<Message>) => Html;
+/** Configuration for rendering a row's title with `titleView`. */
+export type TitleConfig<Message> = Readonly<{
+  label: string;
+  onOpen: Message;
+  /** Closed items print muted and struck through. */
+  isDone?: boolean;
+}>;
+/** The row's title as the button that opens it, built on `@foldkit/ui`'s Button; it
+ *  underlines on hover. */
+export declare const titleView: <Message>(config: TitleConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/rows/rows.js

@@ -0,0 +1,67 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../glyph/glyph.js";
+import { slotView } from "../slot/slot.js";
+import { Button, Checkbox } from "@foldkit/ui";
+// src/rows/rows.ts
+/** A list of 34px rows. */
+const view = (config, h) => __foldkitBrandViewResult((h.ul([
+	...config.isTreegrid === true ? [h.Role("treegrid")] : [],
+	...config.label === void 0 ? [] : [h.AriaLabel(config.label)],
+	h.Class(config.isOutline === true ? "rows tree" : "rows")
+], config.rows)), "@gjermundgaraba/pixel-paper/rows/rows.js#view");
+const cellRole = (config, h) => __foldkitBrandViewResult((config.treegrid === void 0 ? [] : [h.Role("gridcell")]), "@gjermundgaraba/pixel-paper/rows/rows.js#cellRole");
+const rowRole = (place, h) => __foldkitBrandViewResult((place === void 0 ? [] : [
+	h.Role("row"),
+	h.AriaLevel(place.level),
+	h.AriaPosinset(place.position),
+	h.AriaSetsize(place.setSize),
+	...place.isExpanded === void 0 ? [] : [h.AriaExpanded(place.isExpanded)]
+]), "@gjermundgaraba/pixel-paper/rows/rows.js#rowRole");
+const cellView = (config, className, content, h) => __foldkitBrandViewResult((config.treegrid === void 0 ? content : slotView("span", className, content, h, cellRole(config, h))), "@gjermundgaraba/pixel-paper/rows/rows.js#cellView");
+const textOf = (config, h) => __foldkitBrandViewResult((config.isContext === true ? [...config.body, h.span([h.Class("sr-only")], [" (context)"])] : config.body), "@gjermundgaraba/pixel-paper/rows/rows.js#textOf");
+const lineView = (config, box, text, h) => __foldkitBrandViewResult((h.div([
+	...config.attributes ?? [],
+	...rowRole(config.treegrid, h),
+	h.Class(`row${config.isContext === true ? " context" : ""}${config.isLink === true && config.treegrid === void 0 ? " linked" : ""}`)
+], [
+	...box,
+	...cellView(config, "cell", config.glyph === void 0 ? [] : [config.glyph], h),
+	text,
+	...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/pixel-paper/rows/rows.js#lineView");
+const selectableLineView = (config, select, h) => __foldkitBrandViewResult((Checkbox.view({
+	id: select.id,
+	isChecked: select.isChecked,
+	onToggle: select.onToggle,
+	toView: (groups) => __foldkitBrandViewResult((lineView(config, [h.span([...cellRole(config, h), h.Class("row-check")], [h.button(groups.checkbox)])], config.treegrid === void 0 ? h.label([...groups.label, h.Class("grow")], textOf(config, h)) : h.span([...cellRole(config, h), h.Class("cell grow-cell")], [h.label([...groups.label, h.Class("grow")], textOf(config, h))]), h)), "@gjermundgaraba/pixel-paper/rows/rows.js#toView")
+}, h)), "@gjermundgaraba/pixel-paper/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. In a treegrid
+*  the line is the `role="row"` and each part a `role="gridcell"`. */
+const rowView = (config, h) => {
+	const listRole = config.treegrid === void 0 ? [] : [h.Role("none")];
+	return __foldkitBrandViewResult((h.keyed("li")(config.key, listRole, [config.select === void 0 ? 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/pixel-paper/rows/rows.js#rowView");
+};
+/** A glyph in the row's 18px slot. */
+const glyphView = (config, h) => __foldkitBrandViewResult((h.span([h.Class("glyph")], [view$1({ name: config.name }, h)])), "@gjermundgaraba/pixel-paper/rows/rows.js#glyphView");
+/** The glyph slot as a fold toggle, built on `@foldkit/ui`'s Button: a ring, open or closed,
+*  `aria-expanded`, named for the rows it shows. */
+const toggleView = (config, h) => __foldkitBrandViewResult((Button.view({
+	onClick: config.onToggle,
+	toView: (groups) => __foldkitBrandViewResult((h.button([
+		...groups.button,
+		h.AriaExpanded(config.isExpanded),
+		h.AriaLabel(`Rows under ${config.label}`),
+		h.Class("glyph")
+	], [view$1({ name: config.isExpanded ? "ring" : "ring-closed" }, h)])), "@gjermundgaraba/pixel-paper/rows/rows.js#toView~2")
+}, h)), "@gjermundgaraba/pixel-paper/rows/rows.js#toggleView");
+/** The row's title as the button that opens it, built on `@foldkit/ui`'s Button; it
+*  underlines on hover. */
+const titleView = (config, h) => __foldkitBrandViewResult((Button.view({
+	onClick: config.onOpen,
+	toView: (groups) => __foldkitBrandViewResult((h.button([...groups.button, h.Class(config.isDone === true ? "title done-title" : "title")], [config.label])), "@gjermundgaraba/pixel-paper/rows/rows.js#toView~3")
+}, h)), "@gjermundgaraba/pixel-paper/rows/rows.js#titleView");
+export { glyphView, rowView, titleView, toggleView, view };

package/dist/scheme/index.d.ts

@@ -0,0 +1,6 @@
+import { Scheme } from "./scheme.js";
+import { scheme_switch_d_exports } from "./scheme-switch.js";
+declare namespace index_d_exports {
+  export { Scheme, scheme_switch_d_exports as SchemeSwitch };
+}
+export { Scheme, scheme_switch_d_exports as SchemeSwitch, index_d_exports };

package/dist/scheme/index.js

@@ -0,0 +1,10 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { Scheme } from "./scheme.js";
+import { scheme_switch_exports } from "./scheme-switch.js";
+// src/scheme/index.ts
+var scheme_exports = /* @__PURE__ */ __exportAll({
+	Scheme: () => __foldkitBrandViewResult((Scheme), "@gjermundgaraba/pixel-paper/scheme/index.js#Scheme"),
+	SchemeSwitch: () => __foldkitBrandViewResult((scheme_switch_exports), "@gjermundgaraba/pixel-paper/scheme/index.js#SchemeSwitch")
+});
+export { Scheme, scheme_switch_exports as SchemeSwitch, scheme_exports };

package/dist/scheme/scheme-switch.d.ts

@@ -0,0 +1,98 @@
+import { Scheme } from "./scheme.js";
+import { Effect, Schema } from "effect";
+import * as Command from "foldkit/command";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
+declare namespace scheme_switch_d_exports {
+  export { Message, Model, PinScheme, init, scheme, select, subscriptions, update, view };
+}
+/** Schema for the scheme switch: the scheme in force as far as the page has seen, and the
+ *  palette the reader's system prefers, which `System` prints in. */
+export declare const Model: Schema.Struct<{
+  readonly scheme: Schema.Literals<readonly ["System", "Paper", "Plum"]>;
+  readonly systemPalette: Schema.Literals<readonly ["Paper", "Plum"]>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages the scheme switch can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly SelectedScheme: {
+    scheme: Schema.Literals<readonly ["System", "Paper", "Plum"]>;
+  };
+  readonly CompletedPinScheme: {};
+  readonly CompletedReadScheme: {
+    scheme: Schema.Literals<readonly ["System", "Paper", "Plum"]>;
+  };
+  readonly UpdatedSystemPalette: {
+    palette: Schema.Literals<readonly ["Paper", "Plum"]>;
+  };
+}>;
+export type Message = typeof Message.Type;
+/** Pins a scheme on `<html data-scheme>` and remembers it on this device in `localStorage`
+ *  under the key `schemeScript` reads; `System` removes both. The attribute is written first,
+ *  so storage that refuses (blocked or full) still switches the page; the choice is just not
+ *  remembered. */
+export declare const PinScheme: Command.CommandDefinitionWithArgs<"PinScheme", {
+  scheme: Schema.Literals<readonly ["System", "Paper", "Plum"]>;
+}, Effect.Effect<{
+  readonly _tag: "CompletedPinScheme";
+}, never, never>>;
+/** Creates the switch on `System` in the paper palette, as the server renders it, with a
+ *  Command that reads `<html data-scheme>` once the client runs it after hydration: the scheme
+ *  `schemeScript` pinned before first paint (the server ignores it), or `System` without one. The `subscriptions` bring in the
+ *  system's palette. A change made in another tab is seen on the next load, not live. */
+export declare const init: () => Update.Return<Model, Message>;
+/** The scheme in force: the reader's choice, or `System`. */
+export declare const scheme: (model: Model) => Scheme;
+type UpdateReturn = Update.Return<Model, Message>;
+/** Processes a scheme switch Message and returns the next Model and Commands. */
+export declare const update: (model: Model, message: Message) => Readonly<{
+  model: {
+    readonly scheme: "Paper" | "Plum" | "System";
+    readonly systemPalette: "Paper" | "Plum";
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "CompletedPinScheme";
+  } | {
+    readonly _tag: "CompletedReadScheme";
+    readonly scheme: "Paper" | "Plum" | "System";
+  } | {
+    readonly _tag: "SelectedScheme";
+    readonly scheme: "Paper" | "Plum" | "System";
+  } | {
+    readonly _tag: "UpdatedSystemPalette";
+    readonly palette: "Paper" | "Plum";
+  }, never>;
+  outMessage?: never;
+}>;
+/** Pins a scheme from outside the switch, such as a command palette entry. */
+export declare const select: (model: Model, chosen: Scheme) => UpdateReturn;
+/** Keeps the switch in step with the palette the reader's system prefers, which `System`
+ *  prints in. Lift it into the application's Subscriptions. One switch per page: its key is
+ *  fixed, `schemeSwitchSystemPalette`. */
+export declare const subscriptions: {
+  readonly schemeSwitchSystemPalette: Subscription.EntryWithoutKeepAlive<unknown, {
+    readonly _tag: "UpdatedSystemPalette";
+    readonly palette: "Paper" | "Plum";
+  }, Record<string, never>, never> & {
+    readonly __subscription: never;
+  };
+};
+/** System, paper, plum: two palettes of one system, or whatever the reader's system prefers.
+ *  Put `schemeScript` in the page's `<head>` so a remembered choice applies before first
+ *  paint. */
+export declare const view: import("foldkit/submodel").View<{
+  readonly scheme: "Paper" | "Plum" | "System";
+  readonly systemPalette: "Paper" | "Plum";
+}, {
+  readonly _tag: "CompletedPinScheme";
+} | {
+  readonly _tag: "CompletedReadScheme";
+  readonly scheme: "Paper" | "Plum" | "System";
+} | {
+  readonly _tag: "SelectedScheme";
+  readonly scheme: "Paper" | "Plum" | "System";
+} | {
+  readonly _tag: "UpdatedSystemPalette";
+  readonly palette: "Paper" | "Plum";
+}, void>;
+export { scheme_switch_d_exports };

package/dist/scheme/scheme-switch.js

@@ -0,0 +1,118 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { Palette, Scheme, fromPinnedValue, toPinnedValue } from "./scheme.js";
+import { view as view$1 } from "../segmented/segmented.js";
+import { SCHEME_ATTRIBUTE, SCHEME_STORAGE_KEY } from "./script.js";
+import { Effect, Option, Schema } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
+import * as Dom from "foldkit/dom";
+// src/scheme/scheme-switch.ts
+var scheme_switch_exports = /* @__PURE__ */ __exportAll({
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#Model"),
+	PinScheme: () => __foldkitBrandViewResult((PinScheme), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#PinScheme"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#init"),
+	scheme: () => __foldkitBrandViewResult((scheme), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#scheme"),
+	select: () => __foldkitBrandViewResult((select), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#select"),
+	subscriptions: () => __foldkitBrandViewResult((subscriptions), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#subscriptions"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#view")
+});
+/** Schema for the scheme switch: the scheme in force as far as the page has seen, and the
+*  palette the reader's system prefers, which `System` prints in. */
+const Model = Schema.Struct({
+	scheme: Scheme,
+	systemPalette: Palette
+});
+/** Union of all Messages the scheme switch can produce. */
+const Message = defineMessageUnion({
+	SelectedScheme: { scheme: Scheme },
+	CompletedPinScheme: {},
+	CompletedReadScheme: { scheme: Scheme },
+	UpdatedSystemPalette: { palette: Palette }
+});
+/** Pins a scheme on `<html data-scheme>` and remembers it on this device in `localStorage`
+*  under the key `schemeScript` reads; `System` removes both. The attribute is written first,
+*  so storage that refuses (blocked or full) still switches the page; the choice is just not
+*  remembered. */
+const PinScheme = Command.define("PinScheme", {
+	args: { scheme: Scheme },
+	messages: [Message.CompletedPinScheme],
+	execute: ({ scheme }) => __foldkitBrandViewResult((Effect.try(() => {
+		Option.match(toPinnedValue(scheme), {
+			onNone: () => {
+				document.documentElement.removeAttribute(SCHEME_ATTRIBUTE);
+				localStorage.removeItem(SCHEME_STORAGE_KEY);
+			},
+			onSome: (value) => {
+				document.documentElement.setAttribute(SCHEME_ATTRIBUTE, value);
+				localStorage.setItem(SCHEME_STORAGE_KEY, value);
+			}
+		});
+	}).pipe(Effect.ignore, Effect.as(Message.CompletedPinScheme()))), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#execute")
+});
+const ReadScheme = Command.define("ReadScheme", {
+	messages: [Message.CompletedReadScheme],
+	execute: Effect.sync(() => __foldkitBrandViewResult((Message.CompletedReadScheme({ scheme: fromPinnedValue(document.documentElement.getAttribute(SCHEME_ATTRIBUTE)) })), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#anonymous~2"))
+});
+/** Creates the switch on `System` in the paper palette, as the server renders it, with a
+*  Command that reads `<html data-scheme>` once the client runs it after hydration: the scheme
+*  `schemeScript` pinned before first paint (the server ignores it), or `System` without one. The `subscriptions` bring in the
+*  system's palette. A change made in another tab is seen on the next load, not live. */
+const init = () => (__foldkitBrandViewResult(({
+	model: {
+		scheme: "System",
+		systemPalette: "Paper"
+	},
+	commands: [ReadScheme()]
+}), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#init~2"));
+/** The scheme in force: the reader's choice, or `System`. */
+const scheme = (model) => __foldkitBrandViewResult((model.scheme), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#scheme~2");
+/** Processes a scheme switch Message and returns the next Model and Commands. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
+	SelectedScheme: ({ scheme: chosen }) => (__foldkitBrandViewResult(({
+		model: modifyFields(model, { scheme: () => __foldkitBrandViewResult((chosen), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#scheme~3") }),
+		commands: [PinScheme({ scheme: chosen })]
+	}), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#SelectedScheme")),
+	CompletedPinScheme: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#CompletedPinScheme")),
+	CompletedReadScheme: ({ scheme: read }) => (__foldkitBrandViewResult(({ model: modifyFields(model, { scheme: () => __foldkitBrandViewResult((read), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#scheme~4") }) }), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#CompletedReadScheme")),
+	UpdatedSystemPalette: ({ palette: systemPalette }) => (__foldkitBrandViewResult(({ model: modifyFields(model, { systemPalette: () => __foldkitBrandViewResult((systemPalette), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#systemPalette") }) }), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#UpdatedSystemPalette"))
+})), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#update~2");
+/** Pins a scheme from outside the switch, such as a command palette entry. */
+const select = (model, chosen) => __foldkitBrandViewResult((update(model, Message.SelectedScheme({ scheme: chosen }))), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#select~2");
+const systemPaletteChanges = Dom.streamFromMediaQuery({
+	query: "(prefers-color-scheme: dark)",
+	mapMatches: (isDark) => __foldkitBrandViewResult((Message.UpdatedSystemPalette({ palette: isDark ? "Plum" : "Paper" })), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#mapMatches")
+});
+/** Keeps the switch in step with the palette the reader's system prefers, which `System`
+*  prints in. Lift it into the application's Subscriptions. One switch per page: its key is
+*  fixed, `schemeSwitchSystemPalette`. */
+const subscriptions = Subscription.make()(() => (__foldkitBrandViewResult(({ schemeSwitchSystemPalette: Subscription.persistentEntry(systemPaletteChanges) }), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#anonymous~3")));
+const SEGMENTS = [
+	{
+		value: "System",
+		label: "system"
+	},
+	{
+		value: "Paper",
+		label: "paper"
+	},
+	{
+		value: "Plum",
+		label: "plum"
+	}
+];
+/** System, paper, plum: two palettes of one system, or whatever the reader's system prefers.
+*  Put `schemeScript` in the page's `<head>` so a remembered choice applies before first
+*  paint. */
+const view = defineView((model, h) => __foldkitBrandViewResult((view$1({
+	label: "Palette",
+	options: SEGMENTS,
+	value: model.scheme,
+	onSelect: (chosen) => __foldkitBrandViewResult((Message.SelectedScheme({ scheme: chosen })), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#onSelect")
+}, h)), "@gjermundgaraba/pixel-paper/scheme/scheme-switch.js#anonymous~4"));
+export { Message, Model, PinScheme, init, scheme, scheme_switch_exports, select, subscriptions, update, view };

package/dist/scheme/scheme.d.ts

@@ -0,0 +1,5 @@
+import { Option, Schema } from "effect";
+/** The colour scheme: `Paper` (light) or `Plum` (dark) pinned on `<html data-scheme>`, as
+ *  `"light"` or `"dark"`, or `System`, which follows the reader's system in CSS alone. */
+export declare const Scheme: Schema.Literals<readonly ["System", "Paper", "Plum"]>;
+export type Scheme = typeof Scheme.Type;

package/dist/scheme/scheme.js

@@ -0,0 +1,16 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Match, Option, Schema } from "effect";
+// src/scheme/scheme.ts
+/** The colour scheme: `Paper` (light) or `Plum` (dark) pinned on `<html data-scheme>`, as
+*  `"light"` or `"dark"`, or `System`, which follows the reader's system in CSS alone. */
+const Scheme = Schema.Literals([
+	"System",
+	"Paper",
+	"Plum"
+]);
+/** The palette a page prints in: `Paper` (light) or `Plum` (dark). Under `System` it is the
+*  one the reader's system prefers. */
+const Palette = Schema.Literals(["Paper", "Plum"]);
+const toPinnedValue = (scheme) => __foldkitBrandViewResult((Match.value(scheme).pipe(Match.withReturnType(), Match.when("System", () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/scheme/scheme.js#anonymous")), Match.when("Paper", () => __foldkitBrandViewResult((Option.some("light")), "@gjermundgaraba/pixel-paper/scheme/scheme.js#anonymous~2")), Match.when("Plum", () => __foldkitBrandViewResult((Option.some("dark")), "@gjermundgaraba/pixel-paper/scheme/scheme.js#anonymous~3")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/scheme/scheme.js#toPinnedValue");
+const fromPinnedValue = (value) => __foldkitBrandViewResult((Match.value(value).pipe(Match.withReturnType(), Match.when("light", () => __foldkitBrandViewResult(("Paper"), "@gjermundgaraba/pixel-paper/scheme/scheme.js#anonymous~4")), Match.when("dark", () => __foldkitBrandViewResult(("Plum"), "@gjermundgaraba/pixel-paper/scheme/scheme.js#anonymous~5")), Match.orElse(() => __foldkitBrandViewResult(("System"), "@gjermundgaraba/pixel-paper/scheme/scheme.js#anonymous~6")))), "@gjermundgaraba/pixel-paper/scheme/scheme.js#fromPinnedValue");
+export { Palette, Scheme, fromPinnedValue, toPinnedValue };

package/dist/scheme/script.d.ts

@@ -0,0 +1,8 @@
+/** Where a pinned scheme is remembered on this device, in `localStorage`. */
+export declare const SCHEME_STORAGE_KEY = "pixel-paper-scheme";
+/** The attribute on `<html>` a pinned scheme is written to: `data-scheme="light"` or
+    `"dark"`. Without it the stylesheet follows the reader's system. */
+export declare const SCHEME_ATTRIBUTE = "data-scheme";
+/** Inline this in `<head>`, before the stylesheet paints, so a remembered scheme never
+    flashes the other one first. Blocked storage leaves the page on the system's scheme. */
+export declare const schemeScript = "try{var s=localStorage.getItem(\"pixel-paper-scheme\");if(s===\"light\"||s===\"dark\")document.documentElement.setAttribute(\"data-scheme\",s);}catch(e){}";

package/dist/scheme/script.js

@@ -0,0 +1,10 @@
+// src/scheme/script.ts
+/** Where a pinned scheme is remembered on this device, in `localStorage`. */
+const SCHEME_STORAGE_KEY = "pixel-paper-scheme";
+/** The attribute on `<html>` a pinned scheme is written to: `data-scheme="light"` or
+`"dark"`. Without it the stylesheet follows the reader's system. */
+const SCHEME_ATTRIBUTE = "data-scheme";
+/** Inline this in `<head>`, before the stylesheet paints, so a remembered scheme never
+flashes the other one first. Blocked storage leaves the page on the system's scheme. */
+const schemeScript = `try{var s=localStorage.getItem("${SCHEME_STORAGE_KEY}");if(s==="light"||s==="dark")document.documentElement.setAttribute("${SCHEME_ATTRIBUTE}",s);}catch(e){}`;
+export { SCHEME_ATTRIBUTE, SCHEME_STORAGE_KEY, schemeScript };

package/dist/secret/index.d.ts

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

package/dist/secret/index.js

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

package/dist/secret/secret.d.ts

@@ -0,0 +1,13 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a secret with `view`. */
+export type ViewConfig = Readonly<{
+  value: string;
+  /** What the value is ("API key"): the code's accessible name. A `<code>` may not be named,
+   *  so it is a `role="group"`, which may. */
+  label: string;
+  /** After the code: a CopyButton labelled "Copy" and the label. */
+  actions: ReadonlyArray<Html | string>;
+}>;
+/** A value shown once (a key, a token): code in a head-tinted box, named by its label, with
+ *  the button that copies it. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/secret/secret.js

@@ -0,0 +1,9 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/secret/secret.ts
+/** A value shown once (a key, a token): code in a head-tinted box, named by its label, with
+*  the button that copies it. */
+const view = (config, h) => {
+	const { value, label, actions } = config;
+	return __foldkitBrandViewResult((h.div([h.Class("secret")], [h.code([h.Role("group"), h.AriaLabel(label)], [value]), ...actions])), "@gjermundgaraba/pixel-paper/secret/secret.js#view");
+};
+export { view };

package/dist/segmented/index.d.ts

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

package/dist/segmented/index.js

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