@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/panel/panel.js

@@ -0,0 +1,25 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { slotView } from "../slot/slot.js";
+// src/panel/panel.ts
+const titleId = (id) => __foldkitBrandViewResult((`${id}-title`), "@gjermundgaraba/pixel-paper/panel/panel.js#titleId");
+/** The unit of the system: paper in a 2px ink box on a 5px print shadow, under a title bar. A
+*  region landmark (`<section>`) named by its `h2` title, or by `name`, keyed by its `id`. */
+const view = (config, h) => {
+	const { id, title, name, lead = [], meta, actions = [], shelf = [], body, foot = [], isFlush = false } = config;
+	return __foldkitBrandViewResult((h.keyed("section")(id, [
+		h.Id(id),
+		name === void 0 ? h.AriaLabelledBy(titleId(id)) : h.AriaLabel(name),
+		h.Class("panel")
+	], [
+		h.header([h.Class("panel-tb")], [
+			...slotView("span", "panel-lead", lead, h),
+			h.h2([h.Id(titleId(id))], [title]),
+			...meta === void 0 ? [] : [h.span([h.Class("meta")], [meta])],
+			...slotView("span", "panel-acts", actions, h)
+		]),
+		...slotView("div", "panel-shelf", shelf, h),
+		...isFlush ? body : [h.div([h.Class("panel-body")], body)],
+		...slotView("div", "panel-foot", foot, h)
+	])), "@gjermundgaraba/pixel-paper/panel/panel.js#view");
+};
+export { titleId, view };

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

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

package/dist/password-field/index.js

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

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

@@ -0,0 +1,33 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a password field with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Unique in the document: the input's id. */
+  id: string;
+  label: string;
+  value: string;
+  onInput: (value: string) => Message;
+  /** Whether the password prints in the clear. The caller keeps it, as it keeps `value`, and
+   *  hides it again when the form is sent. */
+  isShown: boolean;
+  /** The show toggle's Message: flip `isShown`. */
+  onToggleShown: Message;
+  /** A sans sentence under the box. */
+  help?: string;
+  /** Why the value was refused: a red sentence under the control, which the control is
+   *  described by, with red on its box 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;
+  /** `current-password` to sign in, `new-password` to set one. */
+  autocomplete?: "current-password" | "new-password";
+  /** The show toggle's name, "Show password" when not given: give each of two fields in a
+   *  form its own, such as "Show password again". */
+  toggleLabel?: string;
+}>;
+/** A boxed password field with a show toggle inside its box, built on `@foldkit/ui`'s Input:
+ *  named by its label, described by its help line, `aria-invalid` and described by its
+ *  `error` when it failed, and `aria-required` when the form is not sent without it. The
+ *  toggle is a button named `toggleLabel` ("Show password"), `aria-pressed` while the
+ *  password shows. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/password-field/password-field.js

@@ -0,0 +1,39 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { pressedAttribute } from "../button/button.js";
+import { view as view$1 } from "../icon-button/icon-button.js";
+import { controlAttributes, errorView, helpView } from "../field/field.js";
+import { Input } from "@foldkit/ui";
+// src/password-field/password-field.ts
+/** A boxed password field with a show toggle inside its box, built on `@foldkit/ui`'s Input:
+*  named by its label, described by its help line, `aria-invalid` and described by its
+*  `error` when it failed, and `aria-required` when the form is not sent without it. The
+*  toggle is a button named `toggleLabel` ("Show password"), `aria-pressed` while the
+*  password shows. */
+const view = (config, h) => {
+	const { id, label, value, onInput, isShown, onToggleShown, help, error, isRequired = false, autocomplete = "current-password", toggleLabel = "Show password" } = config;
+	return __foldkitBrandViewResult((Input.view({
+		id,
+		value,
+		onInput,
+		isInvalid: error !== void 0,
+		type: isShown ? "text" : "password",
+		hasDescription: help !== void 0,
+		toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("field boxed")], [
+			h.label(groups.label, [label]),
+			h.span([h.Class("password")], [h.input([
+				...groups.input,
+				h.Autocomplete(autocomplete),
+				...controlAttributes(id, error, help, isRequired, h)
+			]), view$1({
+				glyph: isShown ? "eye-off" : "eye",
+				label: toggleLabel,
+				isQuiet: true,
+				onClick: onToggleShown,
+				attributes: [pressedAttribute(isShown, h)]
+			}, h)]),
+			...errorView(id, error, h),
+			...helpView(help, groups.description, h)
+		])), "@gjermundgaraba/pixel-paper/password-field/password-field.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/password-field/password-field.js#view");
+};
+export { view };

package/dist/places/index.d.ts

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

package/dist/places/index.js

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

package/dist/places/places.d.ts

@@ -0,0 +1,32 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One place in Places: a link to its address (`href`), or a button that shows it in the page
+ *  (`onSelect`). */
+export type Place<Message> = PlaceContent & PlaceTarget<Message>;
+export type PlaceContent = Readonly<{
+  /** Stable and unique among the places: the row's key, so two places that share a name stay
+   *  apart. */
+  id: string;
+  /** The place's name, in sans: it is authored. It wraps rather than clipping. */
+  label: string;
+  /** The place you are in: `aria-current="page"`, printed inverted. */
+  isCurrent?: boolean;
+}>;
+export type PlaceTarget<Message> = Readonly<{
+  /** The place's address: the line is a link, so it opens in a new tab and reads as one. */
+  href: string;
+  onSelect?: never;
+}> | Readonly<{
+  /** Shows the place without leaving the page: the line is a button. */
+  onSelect: Message;
+  href?: never;
+}>;
+/** Configuration for rendering places with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Names the navigation for screen readers ("Areas"). */
+  label: string;
+  places: ReadonlyArray<Place<Message>>;
+}>;
+/** A column of places to go (areas, collections, saved filters), flush in a rail panel: a
+ *  navigation landmark named by its label, one line each a link to the place or a button built
+ *  on `@foldkit/ui`'s Button, the one you are in `aria-current="page"` and printed inverted. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/places/places.js

@@ -0,0 +1,22 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array } from "effect";
+import { Button } from "@foldkit/ui";
+// src/places/places.ts
+const lineView = (place, h) => {
+	const { label, isCurrent = false } = place;
+	const current = isCurrent ? [h.AriaCurrent("page")] : [];
+	const content = [h.span([h.Class("place-name")], [label])];
+	return __foldkitBrandViewResult((place.href === void 0 ? Button.view({
+		onClick: place.onSelect,
+		toView: (groups) => __foldkitBrandViewResult((h.button([...groups.button, ...current], content)), "@gjermundgaraba/pixel-paper/places/places.js#toView")
+	}, h) : h.a([h.Href(place.href), ...current], content)), "@gjermundgaraba/pixel-paper/places/places.js#lineView");
+};
+const placeView = (h) => __foldkitBrandViewResult(((place) => __foldkitBrandViewResult((h.keyed("li")(place.id, [], [lineView(place, h)])), "@gjermundgaraba/pixel-paper/places/places.js#anonymous")), "@gjermundgaraba/pixel-paper/places/places.js#placeView");
+/** A column of places to go (areas, collections, saved filters), flush in a rail panel: a
+*  navigation landmark named by its label, one line each a link to the place or a button built
+*  on `@foldkit/ui`'s Button, the one you are in `aria-current="page"` and printed inverted. */
+const view = (config, h) => {
+	const { label, places } = config;
+	return __foldkitBrandViewResult((h.nav([h.AriaLabel(label), h.Class("places")], [h.ul([], Array.map(places, placeView(h)))])), "@gjermundgaraba/pixel-paper/places/places.js#view");
+};
+export { view };

package/dist/props-list/index.d.ts

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

package/dist/props-list/index.js

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

package/dist/props-list/props-list.d.ts

@@ -0,0 +1,18 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One property: its label, its value and its controls. */
+export type Prop = Readonly<{
+  /** Pixel caps; unique in the list. */
+  label: string;
+  value: ReadonlyArray<Html | string>;
+  /** Prints the value as code: a key, an id, a path. */
+  isCode?: boolean;
+  /** Controls for the row, at the right: a copy button, an edit. */
+  actions?: ReadonlyArray<Html | string>;
+}>;
+/** Configuration for rendering a props list with `view`. */
+export type ViewConfig = Readonly<{
+  items: readonly Prop[];
+}>;
+/** A description list: a pixel-caps label, the value, and an action column, one 34px row
+ *  each. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/props-list/props-list.js

@@ -0,0 +1,12 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array } from "effect";
+// src/props-list/props-list.ts
+const propView = (h) => __foldkitBrandViewResult((({ label, value, isCode = false, actions = [] }) => __foldkitBrandViewResult((h.keyed("div")(label, [], [
+	h.dt([], [label]),
+	h.dd([], isCode ? [h.code([], value)] : value),
+	h.dd([h.Class("acts")], actions)
+])), "@gjermundgaraba/pixel-paper/props-list/props-list.js#anonymous")), "@gjermundgaraba/pixel-paper/props-list/props-list.js#propView");
+/** A description list: a pixel-caps label, the value, and an action column, one 34px row
+*  each. */
+const view = (config, h) => __foldkitBrandViewResult((h.dl([h.Class("props")], Array.map(config.items, propView(h)))), "@gjermundgaraba/pixel-paper/props-list/props-list.js#view");
+export { view };

package/dist/prose/index.d.ts

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

package/dist/prose/index.js

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

package/dist/prose/prose.d.ts

@@ -0,0 +1,14 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering prose with `view`. */
+export type ViewConfig = Readonly<{
+  /** Authored elements: `p`, headings, lists, `blockquote`, `code`, tables, a Notice, or the
+   *  view a Markdown renderer makes of a document. Headings are styled at every level: `h1`
+   *  as `h2` (a section under the page's own title), `h3` at the body's size, `h4` in pixel caps,
+   *  `h5` in bold 13px type and `h6` as a muted pixel label, so no two neighbouring levels
+   *  look alike. Inside a titled container (a Sheet's `h1`, a Dialog's `h2`), shift a
+   *  document's headings so its top level sits under the container's title. */
+  body: ReadonlyArray<Html | string>;
+}>;
+/** Authored text at 15/1.65 sans within a 68ch measure; code and tables may run wider. It
+ *  styles the plain elements it holds, so rendered Markdown needs no classes. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/prose/prose.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/prose/prose.ts
+/** Authored text at 15/1.65 sans within a 68ch measure; code and tables may run wider. It
+*  styles the plain elements it holds, so rendered Markdown needs no classes. */
+const view = (config, h) => __foldkitBrandViewResult((h.div([h.Class("prose")], config.body)), "@gjermundgaraba/pixel-paper/prose/prose.js#view");
+export { view };

package/dist/query-chip/index.d.ts

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

package/dist/query-chip/index.js

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

package/dist/query-chip/query-chip.d.ts

@@ -0,0 +1,18 @@
+import { Attributes } from "../attributes/attributes.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a query chip with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Unique in the document: the search field's id. */
+  id: string;
+  /** The chip's name, which names the field: "find". */
+  label: string;
+  value: string;
+  onInput: (value: string) => Message;
+  placeholder?: string;
+  /** Further attributes for the search field, the `<input>`, not the chip: its key handlers
+   *  (a Mount that hears Escape), a description. Never a class. */
+  inputAttributes?: Attributes<Message>;
+}>;
+/** A search field shaped as a chip, built on `@foldkit/ui`'s Input: a `type="search"` field
+ *  named by the chip's name, tinted while it holds a query. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/query-chip/query-chip.js

@@ -0,0 +1,17 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Input } from "@foldkit/ui";
+// src/query-chip/query-chip.ts
+/** A search field shaped as a chip, built on `@foldkit/ui`'s Input: a `type="search"` field
+*  named by the chip's name, tinted while it holds a query. */
+const view = (config, h) => {
+	const { id, label, value, onInput, placeholder, inputAttributes = [] } = config;
+	return __foldkitBrandViewResult((Input.view({
+		id,
+		value,
+		onInput,
+		type: "search",
+		...placeholder !== void 0 && { placeholder },
+		toView: (groups) => __foldkitBrandViewResult((h.label([...groups.label, h.Class(value === "" ? "fchip query" : "fchip query live")], [h.span([h.Class("fchip-name")], [label]), h.input([...inputAttributes, ...groups.input])])), "@gjermundgaraba/pixel-paper/query-chip/query-chip.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/query-chip/query-chip.js#view");
+};
+export { view };

package/dist/radio-choices/index.d.ts

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

package/dist/radio-choices/index.js

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

package/dist/radio-choices/radio-choices.d.ts

@@ -0,0 +1,105 @@
+import { Option, Schema } from "effect";
+import * as Update from "foldkit/update";
+/** Schema for a radio choice: the `@foldkit/ui` RadioGroup it is built on, which keeps where
+ *  keyboard focus is. The selected value is the parent's, passed in as `selectedValue`. */
+export declare const Model: Schema.Struct<{
+  readonly radioGroup: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly maybeFocusedIndex: Schema.Option<Schema.Number>;
+  }>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages a radio choice can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly GotRadioGroupMessage: {
+    message: import("foldkit/message").MessageUnion<{
+      readonly SelectedOption: {
+        index: Schema.Number;
+        value: Schema.String;
+      };
+      readonly FocusedOption: {
+        index: Schema.Number;
+      };
+      readonly CompletedFocusOption: {};
+    }>;
+  };
+}>;
+export type Message = typeof Message.Type;
+/** Configuration for creating a radio choice with `init`. The `id` must be unique in the
+ *  document. */
+export type InitConfig = Readonly<{
+  id: string;
+}>;
+/** Creates a radio choice whose keyboard focus follows its selection. */
+export declare const init: (config: InitConfig) => Model;
+/** Processes a radio choice Message and returns the next Model, Commands and OutMessage. */
+export declare const update: (model: Model, message: Message) => Readonly<{
+  model: {
+    readonly radioGroup: {
+      readonly id: string;
+      readonly maybeFocusedIndex: Option.Option<number>;
+    };
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "GotRadioGroupMessage";
+    readonly message: {
+      readonly _tag: "CompletedFocusOption";
+    } | {
+      readonly _tag: "FocusedOption";
+      readonly index: number;
+    } | {
+      readonly _tag: "SelectedOption";
+      readonly index: number;
+      readonly value: string;
+    };
+  }, never>;
+  outMessage?: {
+    readonly _tag: "Selected";
+    readonly value: string;
+  };
+}>;
+/** One option: its value, its name in pixel caps, and an optional sans note under it. */
+export type RadioOption = Readonly<{
+  value: string;
+  label: string;
+  note?: string;
+}>;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
+export type ViewInputs = Readonly<{
+  /** Names the group for screen readers; a Fieldset around it says it on the page. */
+  label: string;
+  options: readonly RadioOption[];
+  /** The parent's selection. */
+  selectedValue: Option.Option<string>;
+}>;
+/**
+ * A choice of one, built on `@foldkit/ui`'s RadioGroup: a `role="radiogroup"` of
+ * `role="radio"` options (`aria-checked`), each a button holding its mark, its name and its
+ * note, named by the name and described by the note, so a click anywhere on it chooses it.
+ * One stop for Tab, and the arrows move the selection. Its mark is a diamond, so a single
+ * choice reads apart from a checkbox.
+ */
+export declare const view: import("foldkit/submodel").View<{
+  readonly radioGroup: {
+    readonly id: string;
+    readonly maybeFocusedIndex: Option.Option<number>;
+  };
+}, {
+  readonly _tag: "GotRadioGroupMessage";
+  readonly message: {
+    readonly _tag: "CompletedFocusOption";
+  } | {
+    readonly _tag: "FocusedOption";
+    readonly index: number;
+  } | {
+    readonly _tag: "SelectedOption";
+    readonly index: number;
+    readonly value: string;
+  };
+}, Readonly<{
+  /** Names the group for screen readers; a Fieldset around it says it on the page. */
+  label: string;
+  options: readonly RadioOption[];
+  /** The parent's selection. */
+  selectedValue: Option.Option<string>;
+}>>;

package/dist/radio-choices/radio-choices.js

@@ -0,0 +1,56 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array, Option, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import { RadioGroup } from "@foldkit/ui";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Update from "foldkit/update";
+// src/radio-choices/radio-choices.ts
+/** Schema for a radio choice: the `@foldkit/ui` RadioGroup it is built on, which keeps where
+*  keyboard focus is. The selected value is the parent's, passed in as `selectedValue`. */
+const Model = Schema.Struct({ radioGroup: RadioGroup.Model });
+/** Union of all Messages a radio choice can produce. */
+const Message = defineMessageUnion({ GotRadioGroupMessage: { message: RadioGroup.Message } });
+/** Union of OutMessages a radio choice reports to its parent: an option was chosen, by a
+*  click anywhere on it, Space, or an arrow key. The parent stores `value`. */
+const OutMessage = defineMessageUnion({ Selected: { value: Schema.String } });
+/** Creates a radio choice whose keyboard focus follows its selection. */
+const init = (config) => (__foldkitBrandViewResult(({ radioGroup: RadioGroup.init({ id: config.id }) }), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#init"));
+/** The radio choice's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.radioGroup.id), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#id");
+const RadioGroup$1 = RadioGroup.create();
+const foldRadioGroup = Update.foldChild({
+	update: RadioGroup$1.update,
+	read: (model) => __foldkitBrandViewResult((Option.some(model.radioGroup)), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#read"),
+	write: (model, nextRadioGroup) => __foldkitBrandViewResult((modifyFields(model, { radioGroup: () => __foldkitBrandViewResult((nextRadioGroup), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#radioGroup") })), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#write"),
+	toParentMessage: (message) => __foldkitBrandViewResult((Message.GotRadioGroupMessage({ message })), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#toParentMessage"),
+	toParentOutMessage: RadioGroup.OutMessage.match({ Selected: ({ value }) => __foldkitBrandViewResult((OutMessage.Selected({ value })), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#Selected") })
+});
+/** Processes a radio choice Message and returns the next Model, Commands and OutMessage. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, { GotRadioGroupMessage: ({ message: radioGroupMessage }) => __foldkitBrandViewResult((foldRadioGroup(model, radioGroupMessage)), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#GotRadioGroupMessage") })), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#update");
+/**
+* A choice of one, built on `@foldkit/ui`'s RadioGroup: a `role="radiogroup"` of
+* `role="radio"` options (`aria-checked`), each a button holding its mark, its name and its
+* note, named by the name and described by the note, so a click anywhere on it chooses it.
+* One stop for Tab, and the arrows move the selection. Its mark is a diamond, so a single
+* choice reads apart from a checkbox.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { label, options, selectedValue } = viewInputs;
+	const optionView = (option, info) => __foldkitBrandViewResult((h.keyed("button")(info.value, [...info.option, h.Class("choice")], [h.span([h.Class("choice-box")]), h.span([], [h.span([...info.label, h.Class("choice-name")], [option.label]), ...option.note === void 0 ? [] : [h.span([...info.description, h.Class("choice-note")], [option.note])]])])), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#optionView");
+	return __foldkitBrandViewResult((h.submodel({
+		slotId: id(model),
+		model: model.radioGroup,
+		view: RadioGroup$1.view,
+		viewInputs: {
+			options: Array.map(options, ({ value }) => __foldkitBrandViewResult((value), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#anonymous~2")),
+			selectedValue,
+			ariaLabel: label,
+			orientation: "Vertical",
+			hasOptionDescription: (value) => __foldkitBrandViewResult((Array.some(options, (option) => __foldkitBrandViewResult((option.value === value && option.note !== void 0), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#anonymous~3"))), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#hasOptionDescription"),
+			toView: (render) => __foldkitBrandViewResult((h.div([...render.group, h.Class("choices")], Array.zipWith(options, render.options, optionView))), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#toView")
+		},
+		toParentMessage: (message) => __foldkitBrandViewResult((Message.GotRadioGroupMessage({ message })), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#toParentMessage~2")
+	})), "@gjermundgaraba/pixel-paper/radio-choices/radio-choices.js#anonymous");
+});
+export { Message, Model, OutMessage, id, init, update, view };

package/dist/rail/index.d.ts

@@ -0,0 +1,5 @@
+import { FocusRailToggle, FollowRailDrawer, HideRailDrawer, InitConfig, Message, Model, OutMessage, ShowRailDrawer, ViewInputs, close, id, init, isOpen, subscriptions, toggle, update, view } from "./rail.js";
+declare namespace index_d_exports {
+  export { FocusRailToggle, FollowRailDrawer, HideRailDrawer, InitConfig, Message, Model, OutMessage, ShowRailDrawer, ViewInputs, close, id, init, isOpen, subscriptions, toggle, update, view };
+}
+export { FocusRailToggle, FollowRailDrawer, HideRailDrawer, type InitConfig, Message, Model, OutMessage, ShowRailDrawer, type ViewInputs, close, id, index_d_exports, init, isOpen, subscriptions, toggle, update, view };

package/dist/rail/index.js

@@ -0,0 +1,22 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { FocusRailToggle, FollowRailDrawer, HideRailDrawer, Message, Model, OutMessage, ShowRailDrawer, close, id, init, isOpen, subscriptions, toggle, update, view } from "./rail.js";
+// src/rail/index.ts
+var rail_exports = /* @__PURE__ */ __exportAll({
+	FocusRailToggle: () => __foldkitBrandViewResult((FocusRailToggle), "@gjermundgaraba/pixel-paper/rail/index.js#FocusRailToggle"),
+	FollowRailDrawer: () => __foldkitBrandViewResult((FollowRailDrawer), "@gjermundgaraba/pixel-paper/rail/index.js#FollowRailDrawer"),
+	HideRailDrawer: () => __foldkitBrandViewResult((HideRailDrawer), "@gjermundgaraba/pixel-paper/rail/index.js#HideRailDrawer"),
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/rail/index.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/rail/index.js#Model"),
+	OutMessage: () => __foldkitBrandViewResult((OutMessage), "@gjermundgaraba/pixel-paper/rail/index.js#OutMessage"),
+	ShowRailDrawer: () => __foldkitBrandViewResult((ShowRailDrawer), "@gjermundgaraba/pixel-paper/rail/index.js#ShowRailDrawer"),
+	close: () => __foldkitBrandViewResult((close), "@gjermundgaraba/pixel-paper/rail/index.js#close"),
+	id: () => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/rail/index.js#id"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/rail/index.js#init"),
+	isOpen: () => __foldkitBrandViewResult((isOpen), "@gjermundgaraba/pixel-paper/rail/index.js#isOpen"),
+	subscriptions: () => __foldkitBrandViewResult((subscriptions), "@gjermundgaraba/pixel-paper/rail/index.js#subscriptions"),
+	toggle: () => __foldkitBrandViewResult((toggle), "@gjermundgaraba/pixel-paper/rail/index.js#toggle"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/rail/index.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/rail/index.js#view")
+});
+export { FocusRailToggle, FollowRailDrawer, HideRailDrawer, Message, Model, OutMessage, ShowRailDrawer, close, id, init, isOpen, rail_exports, subscriptions, toggle, update, view };