@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/status-bar/status-bar.js

@@ -0,0 +1,19 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { keyLabel } from "../key-hint/key-label.js";
+import { slotView } from "../slot/slot.js";
+import { measureAttributes } from "../top-bar/bar-height.js";
+import { Array, Predicate } from "effect";
+// src/status-bar/status-bar.ts
+const bindingKey = (keys) => __foldkitBrandViewResult((Predicate.isString(keys) ? keys : Array.join(keys, " ")), "@gjermundgaraba/pixel-paper/status-bar/status-bar.js#bindingKey");
+const keyNoteView = (platform, h) => __foldkitBrandViewResult((({ keys, does }) => __foldkitBrandViewResult((h.keyed("span")(bindingKey(keys), [], [h.kbd([h.Class("key-hint")], [keyLabel(keys, platform)]), ` ${does}`])), "@gjermundgaraba/pixel-paper/status-bar/status-bar.js#anonymous")), "@gjermundgaraba/pixel-paper/status-bar/status-bar.js#keyNoteView");
+/** The quiet line along the bottom of an interface: what state it is in, and the keys to
+*  know. One per page, after the rail and the deck and outside `main`, where it is the page's
+*  footer (`<footer>`, the contentinfo landmark). Its keys are content, so each `kbd` is read. */
+const view = (config, h) => {
+	const { body, keys = [], platform, toParentMessage } = config;
+	return __foldkitBrandViewResult((h.footer([...measureAttributes(toParentMessage, {
+		selector: ".statusbar",
+		property: "--statusbar-h"
+	}, h), h.Class("statusbar")], [h.div([h.Class("statusbar-state")], body), ...slotView("p", "statusbar-keys", Array.map(keys, keyNoteView(platform, h)), h)])), "@gjermundgaraba/pixel-paper/status-bar/status-bar.js#view");
+};
+export { view };

package/dist/subscription/prefix-keys.js

@@ -0,0 +1,12 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array, String } from "effect";
+// src/subscription/prefix-keys.ts
+/**
+* Re-keys a Subscriptions record behind `prefix`, so a component's record can be given once per
+* instance. Foldkit's `Subscription.aggregate` throws on a key two records share, and
+* `Subscription.lift` keeps a child's keys, so a component that may appear twice on a page
+* takes the prefix from its parent (`Board.subscriptions("queueBoard")`). The entries
+* themselves are unchanged.
+*/
+const prefixKeys = (prefix, entries) => __foldkitBrandViewResult((Object.fromEntries(Array.map(Object.entries(entries), ([key, entry]) => __foldkitBrandViewResult(([`${prefix}${String.capitalize(key)}`, entry]), "@gjermundgaraba/pixel-paper/subscription/prefix-keys.js#anonymous")))), "@gjermundgaraba/pixel-paper/subscription/prefix-keys.js#prefixKeys");
+export { prefixKeys };

package/dist/table/index.d.ts

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

package/dist/table/index.js

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

package/dist/table/table.d.ts

@@ -0,0 +1,26 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One column of a table. */
+export type Column<Row> = Readonly<{
+  /** Unique among the columns. */
+  key: string;
+  /** The column's head, in pixel caps; on a phone, each cell's label. */
+  header: string;
+  /** The cell for a row. A function because it receives the row. */
+  cell: (row: Row) => ReadonlyArray<Html | string>;
+}>;
+/** Configuration for rendering a table with `view`. */
+export type ViewConfig<Row> = Readonly<{
+  /** Names the table's scrolling region for screen readers. */
+  label: string;
+  columns: ReadonlyArray<Column<Row>>;
+  rows: readonly Row[];
+  /** The row's stable id. */
+  rowKey: (row: Row) => string;
+  /** The row's buttons, in a last column pinned right while the table scrolls under it. Its
+   *  head is named "Actions" for screen readers. A function because it receives the row. */
+  actions?: (row: Row) => ReadonlyArray<Html | string>;
+}>;
+/** A ruled table: head-tinted pixel-caps heads, 1px rules, and a tint under the row the
+ *  pointer is on. Every head is a column header (`scope="col"`); on a phone each row becomes a
+ *  block of lines, each labelled with its head. It scrolls sideways inside its wrapper. */
+export declare const view: <Row, Message>(config: ViewConfig<Row>, h: HtmlBuilder<Message>) => Html;

package/dist/table/table.js

@@ -0,0 +1,18 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array } from "effect";
+// src/table/table.ts
+/** A ruled table: head-tinted pixel-caps heads, 1px rules, and a tint under the row the
+*  pointer is on. Every head is a column header (`scope="col"`); on a phone each row becomes a
+*  block of lines, each labelled with its head. It scrolls sideways inside its wrapper. */
+const view = (config, h) => {
+	const { label, columns, rows, rowKey, actions } = config;
+	const headView = h.thead([], [h.tr([], [...Array.map(columns, (column) => __foldkitBrandViewResult((h.keyed("th")(column.key, [h.Scope("col")], [column.header])), "@gjermundgaraba/pixel-paper/table/table.js#anonymous")), ...actions === void 0 ? [] : [h.th([h.Scope("col")], [h.span([h.Class("sr-only")], ["Actions"])])]])]);
+	const rowView = (row) => __foldkitBrandViewResult((h.keyed("tr")(rowKey(row), [], [...Array.map(columns, (column) => __foldkitBrandViewResult((h.keyed("td")(column.key, [h.DataAttribute("label", column.header)], column.cell(row))), "@gjermundgaraba/pixel-paper/table/table.js#anonymous~2")), ...actions === void 0 ? [] : [h.td([h.Class("acts")], actions(row))]])), "@gjermundgaraba/pixel-paper/table/table.js#rowView");
+	return __foldkitBrandViewResult((h.div([
+		h.Role("region"),
+		h.AriaLabel(label),
+		h.Tabindex(0),
+		h.Class("table-wrap")
+	], [h.table([h.Class("table")], [headView, h.tbody([], Array.map(rows, rowView))])])), "@gjermundgaraba/pixel-paper/table/table.js#view");
+};
+export { view };

package/dist/tabs/index.d.ts

@@ -0,0 +1,5 @@
+import { InitConfig, Message, Model, OutMessage, ViewInputs, id, init, update, view } from "./tabs.js";
+declare namespace index_d_exports {
+  export { InitConfig, Message, Model, OutMessage, ViewInputs, id, init, update, view };
+}
+export { type InitConfig, Message, Model, OutMessage, type ViewInputs, id, index_d_exports, init, update, view };

package/dist/tabs/index.js

@@ -0,0 +1,14 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { Message, Model, OutMessage, id, init, update, view } from "./tabs.js";
+// src/tabs/index.ts
+var tabs_exports = /* @__PURE__ */ __exportAll({
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/tabs/index.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/tabs/index.js#Model"),
+	OutMessage: () => __foldkitBrandViewResult((OutMessage), "@gjermundgaraba/pixel-paper/tabs/index.js#OutMessage"),
+	id: () => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/tabs/index.js#id"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/tabs/index.js#init"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/tabs/index.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/tabs/index.js#view")
+});
+export { Message, Model, OutMessage, id, init, tabs_exports, update, view };

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,125 @@
+import { Option, Schema } from "effect";
+import { Html } from "foldkit/html";
+import * as Update from "foldkit/update";
+/** Schema for a tab strip: the `@foldkit/ui` Tabs it is built on, which keeps where the
+ *  keyboard is. Which tab is selected is the parent's: pass it in as `selectedValue`. */
+export declare const Model: Schema.Struct<{
+  readonly tabs: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly maybeFocusedIndex: Schema.Option<Schema.Number>;
+    readonly activationMode: Schema.Literals<readonly ["Automatic", "Manual"]>;
+  }>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages a tab strip can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly GotTabsMessage: {
+    message: import("foldkit/message").MessageUnion<{
+      readonly SelectedTab: {
+        index: Schema.Number;
+        value: Schema.String;
+      };
+      readonly FocusedTab: {
+        index: Schema.Number;
+      };
+      readonly CompletedFocusTab: {};
+    }>;
+  };
+}>;
+export type Message = typeof Message.Type;
+/** Union of OutMessages a tab strip reports: a tab was chosen by a press, an arrow, Home or
+ *  End. Store `value` and pass it back in as `selectedValue`. */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+  readonly Selected: {
+    value: Schema.String;
+  };
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a tab strip with `init`. The `id` must be unique in the
+ *  document; each tab's and panel's id derives from it. */
+export type InitConfig = Readonly<{
+  id: string;
+}>;
+/** Creates a tab strip. Arrows select as they move. */
+export declare const init: (config: InitConfig) => Model;
+/** The tab strip's id, unique in the document. */
+export declare const id: (model: Model) => string;
+/** Processes a tab strip Message and returns the next Model, Commands and OutMessage. */
+export declare const update: (model: Model, message: Message) => Readonly<{
+  model: {
+    readonly tabs: {
+      readonly id: string;
+      readonly maybeFocusedIndex: Option.Option<number>;
+      readonly activationMode: "Automatic" | "Manual";
+    };
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "GotTabsMessage";
+    readonly message: {
+      readonly _tag: "CompletedFocusTab";
+    } | {
+      readonly _tag: "FocusedTab";
+      readonly index: number;
+    } | {
+      readonly _tag: "SelectedTab";
+      readonly index: number;
+      readonly value: string;
+    };
+  }, never>;
+  outMessage?: {
+    readonly _tag: "Selected";
+    readonly value: string;
+  };
+}>;
+/** One tab: its value and its words. */
+export type Tab = Readonly<{
+  value: string;
+  label: string;
+}>;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
+export type ViewInputs = Readonly<{
+  /** Names the tab list for screen readers. */
+  label: string;
+  tabs: readonly Tab[];
+  /** The selected tab's value, from the parent's Model. */
+  selectedValue: string;
+  /** The selected tab's panel. A function because a Submodel's viewInputs may hold functions
+   *  only at the top level, and Foldkit runs this one in the parent's boundary, so the
+   *  handlers in what it returns dispatch the parent's Messages. */
+  toPanelView: () => readonly Html[];
+}>;
+/**
+ * The nav strip at tab size over the selected tab's panel, built on `@foldkit/ui`'s Tabs:
+ * `div.nav.tabs[role="tablist"]` of `button[role="tab"][aria-selected]`, then the
+ * `div[role="tabpanel"]` named by its tab. Arrows move and select (they wrap), Home and End
+ * go to the ends, and only the selected tab is in the keyboard's Tab order.
+ */
+export declare const view: import("foldkit/submodel").View<{
+  readonly tabs: {
+    readonly id: string;
+    readonly maybeFocusedIndex: Option.Option<number>;
+    readonly activationMode: "Automatic" | "Manual";
+  };
+}, {
+  readonly _tag: "GotTabsMessage";
+  readonly message: {
+    readonly _tag: "CompletedFocusTab";
+  } | {
+    readonly _tag: "FocusedTab";
+    readonly index: number;
+  } | {
+    readonly _tag: "SelectedTab";
+    readonly index: number;
+    readonly value: string;
+  };
+}, Readonly<{
+  /** Names the tab list for screen readers. */
+  label: string;
+  tabs: readonly Tab[];
+  /** The selected tab's value, from the parent's Model. */
+  selectedValue: string;
+  /** The selected tab's panel. A function because a Submodel's viewInputs may hold functions
+   *  only at the top level, and Foldkit runs this one in the parent's boundary, so the
+   *  handlers in what it returns dispatch the parent's Messages. */
+  toPanelView: () => readonly Html[];
+}>>;

package/dist/tabs/tabs.js

@@ -0,0 +1,57 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array, Option, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import { Tabs } from "@foldkit/ui";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Update from "foldkit/update";
+// src/tabs/tabs.ts
+/** Schema for a tab strip: the `@foldkit/ui` Tabs it is built on, which keeps where the
+*  keyboard is. Which tab is selected is the parent's: pass it in as `selectedValue`. */
+const Model = Schema.Struct({ tabs: Tabs.Model });
+/** Union of all Messages a tab strip can produce. */
+const Message = defineMessageUnion({ GotTabsMessage: { message: Tabs.Message } });
+/** Union of OutMessages a tab strip reports: a tab was chosen by a press, an arrow, Home or
+*  End. Store `value` and pass it back in as `selectedValue`. */
+const OutMessage = defineMessageUnion({ Selected: { value: Schema.String } });
+/** Creates a tab strip. Arrows select as they move. */
+const init = (config) => (__foldkitBrandViewResult(({ tabs: Tabs.init({
+	id: config.id,
+	activationMode: "Automatic"
+}) }), "@gjermundgaraba/pixel-paper/tabs/tabs.js#init"));
+/** The tab strip's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.tabs.id), "@gjermundgaraba/pixel-paper/tabs/tabs.js#id");
+const StringTabs = Tabs.create();
+const foldTabs = Update.foldChild({
+	update: StringTabs.update,
+	read: (model) => __foldkitBrandViewResult((Option.some(model.tabs)), "@gjermundgaraba/pixel-paper/tabs/tabs.js#read"),
+	write: (model, nextTabs) => __foldkitBrandViewResult((modifyFields(model, { tabs: () => __foldkitBrandViewResult((nextTabs), "@gjermundgaraba/pixel-paper/tabs/tabs.js#tabs") })), "@gjermundgaraba/pixel-paper/tabs/tabs.js#write"),
+	toParentMessage: (message) => __foldkitBrandViewResult((Message.GotTabsMessage({ message })), "@gjermundgaraba/pixel-paper/tabs/tabs.js#toParentMessage"),
+	toParentOutMessage: Tabs.OutMessage.match({ Selected: ({ value }) => __foldkitBrandViewResult((OutMessage.Selected({ value })), "@gjermundgaraba/pixel-paper/tabs/tabs.js#Selected") })
+});
+/** Processes a tab strip Message and returns the next Model, Commands and OutMessage. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, { GotTabsMessage: ({ message: tabsMessage }) => __foldkitBrandViewResult((foldTabs(model, tabsMessage)), "@gjermundgaraba/pixel-paper/tabs/tabs.js#GotTabsMessage") })), "@gjermundgaraba/pixel-paper/tabs/tabs.js#update");
+/**
+* The nav strip at tab size over the selected tab's panel, built on `@foldkit/ui`'s Tabs:
+* `div.nav.tabs[role="tablist"]` of `button[role="tab"][aria-selected]`, then the
+* `div[role="tabpanel"]` named by its tab. Arrows move and select (they wrap), Home and End
+* go to the ends, and only the selected tab is in the keyboard's Tab order.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { label, tabs, selectedValue, toPanelView } = viewInputs;
+	const toTabView = (tab, info) => __foldkitBrandViewResult((h.keyed("button")(tab.value, info.tab, [tab.label])), "@gjermundgaraba/pixel-paper/tabs/tabs.js#toTabView");
+	const toView = (render) => __foldkitBrandViewResult((h.div([h.Class("tabbed")], [h.div([...render.tablist, h.Class("nav tabs")], Array.zipWith(tabs, render.tabs, toTabView)), ...Option.toArray(Option.map(Array.findFirst(render.tabs, (info) => __foldkitBrandViewResult((info.isActive), "@gjermundgaraba/pixel-paper/tabs/tabs.js#anonymous~2")), (info) => __foldkitBrandViewResult((h.div([...info.panel, h.Class("tab-panel")], toPanelView())), "@gjermundgaraba/pixel-paper/tabs/tabs.js#anonymous~3")))])), "@gjermundgaraba/pixel-paper/tabs/tabs.js#toView");
+	return __foldkitBrandViewResult((h.submodel({
+		slotId: id(model),
+		model: model.tabs,
+		view: StringTabs.view,
+		viewInputs: {
+			tabs: Array.map(tabs, (tab) => __foldkitBrandViewResult((tab.value), "@gjermundgaraba/pixel-paper/tabs/tabs.js#anonymous~4")),
+			selectedValue,
+			ariaLabel: label,
+			toView
+		},
+		toParentMessage: (message) => __foldkitBrandViewResult((Message.GotTabsMessage({ message })), "@gjermundgaraba/pixel-paper/tabs/tabs.js#toParentMessage~2")
+	})), "@gjermundgaraba/pixel-paper/tabs/tabs.js#anonymous");
+});
+export { Message, Model, OutMessage, id, init, update, view };

package/dist/tag/index.d.ts

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

package/dist/tag/index.js

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

package/dist/tag/tag.d.ts

@@ -0,0 +1,16 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a tag with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** The tag as printed: a count, a group name, a scope. */
+  label: string;
+  /** The tag written out, when it is abbreviated or clipped ("3 in Operations" for "3"): its
+   *  name for screen readers and its tip for everyone else. */
+  full?: string;
+  /** Makes the tag a button. */
+  onClick?: Message;
+  /** The tag's stable id among its siblings, for tags mapped from a list that changes. */
+  key?: string;
+}>;
+/** A small muted label on a 1px rule. With `full`, screen readers hear the full words and
+ *  the eye gets them as a tip; with `onClick`, a button built on `@foldkit/ui`'s Button. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/tag/tag.js

@@ -0,0 +1,25 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Button } from "@foldkit/ui";
+// src/tag/tag.ts
+/** A small muted label on a 1px rule. With `full`, screen readers hear the full words and
+*  the eye gets them as a tip; with `onClick`, a button built on `@foldkit/ui`'s Button. */
+const view = (config, h) => {
+	const { label, full, onClick, key } = config;
+	const fullAttributes = full === void 0 ? [] : [h.DataAttribute("tip", full)];
+	const keyAttributes = key === void 0 ? [] : [h.Key(key)];
+	return __foldkitBrandViewResult((onClick === void 0 ? h.span([
+		...keyAttributes,
+		...fullAttributes,
+		h.Class("tag")
+	], full === void 0 ? [label] : [h.span([h.AriaHidden(true)], [label]), h.span([h.Class("sr-only")], [full])]) : Button.view({
+		onClick,
+		toView: (groups) => __foldkitBrandViewResult((h.button([
+			...groups.button,
+			...keyAttributes,
+			...fullAttributes,
+			...full === void 0 ? [] : [h.AriaLabel(full)],
+			h.Class("tag")
+		], [h.span([], [label])])), "@gjermundgaraba/pixel-paper/tag/tag.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/tag/tag.js#view");
+};
+export { view };

package/dist/text-button/index.d.ts

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

package/dist/text-button/index.js

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

package/dist/text-button/text-button.d.ts

@@ -0,0 +1,8 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a text button with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  label: string;
+  onClick?: Message;
+}>;
+/** A button that reads as a word in the top bar: pixel caps, a dotted rule on hover. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/text-button/text-button.js

@@ -0,0 +1,12 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Button } from "@foldkit/ui";
+// src/text-button/text-button.ts
+/** A button that reads as a word in the top bar: pixel caps, a dotted rule on hover. */
+const view = (config, h) => {
+	const { label, onClick } = config;
+	return __foldkitBrandViewResult((Button.view({
+		...onClick !== void 0 && { onClick },
+		toView: (groups) => __foldkitBrandViewResult((h.button([...groups.button, h.Class("textbtn")], [label])), "@gjermundgaraba/pixel-paper/text-button/text-button.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/text-button/text-button.js#view");
+};
+export { view };

package/dist/textarea-field/index.d.ts

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

package/dist/textarea-field/index.js

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

package/dist/textarea-field/textarea-field.d.ts

@@ -0,0 +1,28 @@
+import { ChildAttribute, Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
+/** Configuration for rendering a textarea field with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  id: string;
+  label: string;
+  value: string;
+  onInput: (value: string) => Message;
+  /** A sans sentence under the control. */
+  help?: string;
+  /** Why the value was refused: a red sentence under the control, which the control is
+   *  described by, with red on its rule and its label (`aria-invalid`). Say it again in an
+   *  ErrorSummary above the form. */
+  error?: string | undefined;
+  /** The form is not sent without it: screen readers hear "required" (`aria-required`). */
+  isRequired?: boolean;
+  /** Code and identifiers: the system monospace. */
+  isMono?: boolean;
+  /** The lines it opens at; it grows with its text from there. */
+  rows?: number;
+  /** Further attributes for the `<textarea>`, such as a placeholder or spelling off; never a
+   *  class, and never its text, which is `value`. */
+  textareaAttributes?: ReadonlyArray<TextareaAttribute<Message> | ChildAttribute>;
+}>;
+/** A labelled textarea with its help line, built on `@foldkit/ui`'s `Textarea`: the label
+ *  names the textarea, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  Boxless like a Field, on a dotted baseline, with an ink corner grip. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/textarea-field/textarea-field.js

@@ -0,0 +1,30 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { controlAttributes, errorView, helpView } from "../field/field.js";
+import { Textarea } from "@foldkit/ui";
+// src/textarea-field/textarea-field.ts
+/** A labelled textarea with its help line, built on `@foldkit/ui`'s `Textarea`: the label
+*  names the textarea, the help line describes it (`aria-describedby`), an `error` sets
+*  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+*  Boxless like a Field, on a dotted baseline, with an ink corner grip. */
+const view = (config, h) => {
+	const { id, label, value, onInput, help, error, isRequired = false, isMono = false, rows, textareaAttributes = [] } = config;
+	return __foldkitBrandViewResult((Textarea.view({
+		id,
+		value,
+		onInput,
+		isInvalid: error !== void 0,
+		hasDescription: help !== void 0,
+		...rows !== void 0 && { rows },
+		toView: (groups) => __foldkitBrandViewResult((h.div([h.Class(`field${isMono ? " mono" : ""}`)], [
+			h.label(groups.label, [label]),
+			h.textarea([
+				...textareaAttributes,
+				...groups.textarea,
+				...controlAttributes(id, error, help, isRequired, h)
+			]),
+			...errorView(id, error, h),
+			...helpView(help, groups.description, h)
+		])), "@gjermundgaraba/pixel-paper/textarea-field/textarea-field.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/textarea-field/textarea-field.js#view");
+};
+export { view };

package/dist/time/index.d.ts

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

package/dist/time/index.js

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

package/dist/time/time.d.ts

@@ -0,0 +1,38 @@
+import { Duration, Option, Schema } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+import { EntryWithoutKeepAlive } from "foldkit/subscription";
+/** How a moment is said. `Age`: `"19d"`, the age register. `Ago`: `"4m ago"`. `Until`:
+ *  `"in 1h 41m"`. `Date`: `"12 Mar 2026"`. `DateTime`: `"12 Mar 2026, 14:05"`, in the reader's
+ *  zone. */
+export declare const TimeFormat: Schema.Literals<readonly ["Age", "Ago", "Until", "Date", "DateTime"]>;
+export type TimeFormat = typeof TimeFormat.Type;
+/** Configuration for rendering a moment with `view`. */
+export type ViewConfig = Readonly<{
+  /** The moment, in epoch milliseconds. */
+  at: number;
+  format?: TimeFormat;
+  /** The current time from the caller's Model, kept by `clockEntry`. `None` until the clock
+   *  first ticks, as during a server render: the moment then prints in UTC, so the server and
+   *  the browser write the same text. */
+  maybeNow: Option.Option<number>;
+  /** `Until`: printed once the moment has gone (`"reset due"`, `"expired"`). */
+  passed?: string;
+  /** `Age` and `Ago`: older than this prints red, as a stale age. */
+  staleAfter?: Duration.Duration;
+}>;
+/** A moment, said relative to the caller's `maybeNow` or as a date, in a `<time>` whose
+ *  `datetime` is the moment in ISO form. Stale ages print red. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
+/** Configuration for the `clockEntry` Subscription helper. */
+export type ClockConfig<Model, Message> = Readonly<{
+  /** Whether anything on the page reads the clock; it stops while this is false. */
+  isActive: (model: Model) => boolean;
+  toMessage: (now: number) => Message;
+}>;
+/** A Subscription entry that emits the current time in epoch milliseconds at once and then
+ *  once a second while `isActive`. Keep the value in the Model and hand it to `view` as
+ *  `maybeNow`, so every Time on the page reads one clock. Pass it into `Subscription.make` as
+ *  an entry value. */
+export declare const clockEntry: <Model, Message>(config: ClockConfig<Model, Message>) => EntryWithoutKeepAlive<Model, Message, Readonly<{
+  isActive: boolean;
+}>, never>;

package/dist/time/time.js

@@ -0,0 +1,63 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { formatDate, formatDateTime, formatRemaining, formatSpan } from "../format/format.js";
+import { Clock, Duration, Match, Option, Schedule, Schema, Stream } from "effect";
+Schema.Literals([
+	"Age",
+	"Ago",
+	"Until",
+	"Date",
+	"DateTime"
+]);
+const JUST_NOW = Duration.toMillis(Duration.seconds(10));
+const UTC = Option.some("UTC");
+const utcLook = (at, format) => (__foldkitBrandViewResult(({
+	maybeClass: Option.none(),
+	text: format === "Date" ? formatDate(new Date(at), UTC) : `${formatDateTime(new Date(at), UTC)} UTC`
+}), "@gjermundgaraba/pixel-paper/time/time.js#utcLook"));
+const untilLook = (left, passed) => (__foldkitBrandViewResult(({
+	maybeClass: Option.some("due"),
+	text: left <= 0 ? passed : `in ${formatRemaining(left)}`
+}), "@gjermundgaraba/pixel-paper/time/time.js#untilLook"));
+const ageLook = (age, format, maybeStaleAfter) => {
+	const isStale = Option.exists(maybeStaleAfter, (staleAfter) => __foldkitBrandViewResult((age > Duration.toMillis(staleAfter)), "@gjermundgaraba/pixel-paper/time/time.js#anonymous"));
+	const maybeClass = Option.some(isStale ? "age stale" : "age");
+	if (age < JUST_NOW) return __foldkitBrandViewResult(({
+		maybeClass,
+		text: format === "Ago" ? "just now" : "now"
+	}), "@gjermundgaraba/pixel-paper/time/time.js#ageLook");
+	return __foldkitBrandViewResult(({
+		maybeClass,
+		text: format === "Ago" ? `${formatSpan(age)} ago` : formatSpan(age)
+	}), "@gjermundgaraba/pixel-paper/time/time.js#ageLook");
+};
+const localLook = (config, format, now) => {
+	const maybeStaleAfter = Option.fromNullishOr(config.staleAfter);
+	return __foldkitBrandViewResult((Match.value(format).pipe(Match.withReturnType(), Match.when("Date", () => (__foldkitBrandViewResult(({
+		maybeClass: Option.none(),
+		text: formatDate(new Date(config.at))
+	}), "@gjermundgaraba/pixel-paper/time/time.js#anonymous~2"))), Match.when("DateTime", () => (__foldkitBrandViewResult(({
+		maybeClass: Option.none(),
+		text: formatDateTime(new Date(config.at))
+	}), "@gjermundgaraba/pixel-paper/time/time.js#anonymous~3"))), Match.when("Until", () => __foldkitBrandViewResult((untilLook(config.at - now, config.passed ?? "now")), "@gjermundgaraba/pixel-paper/time/time.js#anonymous~4")), Match.when("Age", () => __foldkitBrandViewResult((ageLook(now - config.at, "Age", maybeStaleAfter)), "@gjermundgaraba/pixel-paper/time/time.js#anonymous~5")), Match.when("Ago", () => __foldkitBrandViewResult((ageLook(now - config.at, "Ago", maybeStaleAfter)), "@gjermundgaraba/pixel-paper/time/time.js#anonymous~6")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/time/time.js#localLook");
+};
+/** A moment, said relative to the caller's `maybeNow` or as a date, in a `<time>` whose
+*  `datetime` is the moment in ISO form. Stale ages print red. */
+const view = (config, h) => {
+	const format = config.format ?? "Age";
+	const { maybeClass, text } = Option.match(config.maybeNow, {
+		onNone: () => __foldkitBrandViewResult((utcLook(config.at, format)), "@gjermundgaraba/pixel-paper/time/time.js#onNone"),
+		onSome: (now) => __foldkitBrandViewResult((localLook(config, format, now)), "@gjermundgaraba/pixel-paper/time/time.js#onSome")
+	});
+	return __foldkitBrandViewResult((h.time([h.Datetime(new Date(config.at).toISOString()), ...Option.isSome(maybeClass) ? [h.Class(maybeClass.value)] : []], [text])), "@gjermundgaraba/pixel-paper/time/time.js#view");
+};
+const TICK = Duration.seconds(1);
+/** A Subscription entry that emits the current time in epoch milliseconds at once and then
+*  once a second while `isActive`. Keep the value in the Model and hand it to `view` as
+*  `maybeNow`, so every Time on the page reads one clock. Pass it into `Subscription.make` as
+*  an entry value. */
+const clockEntry = (config) => (__foldkitBrandViewResult(({
+	dependenciesSchema: Schema.Struct({ isActive: Schema.Boolean }),
+	modelToDependencies: (model) => (__foldkitBrandViewResult(({ isActive: config.isActive(model) }), "@gjermundgaraba/pixel-paper/time/time.js#modelToDependencies")),
+	dependenciesToStream: ({ isActive }) => __foldkitBrandViewResult((isActive ? Stream.fromEffectSchedule(Clock.currentTimeMillis, Schedule.spaced(TICK)).pipe(Stream.map(config.toMessage)) : Stream.empty), "@gjermundgaraba/pixel-paper/time/time.js#dependenciesToStream")
+}), "@gjermundgaraba/pixel-paper/time/time.js#clockEntry"));
+export { clockEntry, view };

package/dist/tips/index.d.ts

@@ -0,0 +1,5 @@
+import { InitConfig, Message, Model, id, init, subscriptions, update, view } from "./tips.js";
+declare namespace index_d_exports {
+  export { InitConfig, Message, Model, id, init, subscriptions, update, view };
+}
+export { type InitConfig, Message, Model, id, index_d_exports, init, subscriptions, update, view };

package/dist/tips/index.js

@@ -0,0 +1,14 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { Message, Model, id, init, subscriptions, update, view } from "./tips.js";
+// src/tips/index.ts
+var tips_exports = /* @__PURE__ */ __exportAll({
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/tips/index.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/tips/index.js#Model"),
+	id: () => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/tips/index.js#id"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/tips/index.js#init"),
+	subscriptions: () => __foldkitBrandViewResult((subscriptions), "@gjermundgaraba/pixel-paper/tips/index.js#subscriptions"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/tips/index.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/tips/index.js#view")
+});
+export { Message, Model, id, init, subscriptions, tips_exports, update, view };