@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/segmented/segmented.d.ts

@@ -0,0 +1,17 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One segment: its value and its words. */
+export type Segment<Value extends string> = Readonly<{
+  value: Value;
+  label: string;
+}>;
+/** Configuration for rendering a segmented choice with `view`. */
+export type ViewConfig<Value extends string, Message> = Readonly<{
+  /** Names the group for screen readers. */
+  label: string;
+  options: ReadonlyArray<Segment<Value>>;
+  value: Value;
+  onSelect: (value: Value) => Message;
+}>;
+/** A choice of one: the pressed segment inverts and is `aria-pressed="true"`, the others
+ *  `"false"`, in a `role="group"` named by the label, printed as the nav strip. */
+export declare const view: <Value extends string, Message>(config: ViewConfig<Value, Message>, h: HtmlBuilder<Message>) => Html;

package/dist/segmented/segmented.js

@@ -0,0 +1,17 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { pressedAttribute } from "../button/button.js";
+import { Array } from "effect";
+import { Button } from "@foldkit/ui";
+// src/segmented/segmented.ts
+const segmentView = (config, option, h) => __foldkitBrandViewResult((Button.view({
+	onClick: config.onSelect(option.value),
+	toView: (groups) => __foldkitBrandViewResult((h.keyed("button")(option.value, [...groups.button, pressedAttribute(option.value === config.value, h)], [option.label])), "@gjermundgaraba/pixel-paper/segmented/segmented.js#toView")
+}, h)), "@gjermundgaraba/pixel-paper/segmented/segmented.js#segmentView");
+/** A choice of one: the pressed segment inverts and is `aria-pressed="true"`, the others
+*  `"false"`, in a `role="group"` named by the label, printed as the nav strip. */
+const view = (config, h) => __foldkitBrandViewResult((h.div([
+	h.Role("group"),
+	h.AriaLabel(config.label),
+	h.Class("nav")
+], Array.map(config.options, (option) => __foldkitBrandViewResult((segmentView(config, option, h)), "@gjermundgaraba/pixel-paper/segmented/segmented.js#anonymous")))), "@gjermundgaraba/pixel-paper/segmented/segmented.js#view");
+export { view };

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

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

package/dist/select-field/index.js

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

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

@@ -0,0 +1,38 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One choice in a `SelectField`. */
+export type SelectOption = Readonly<{
+  value: string;
+  label: string;
+  /** Listed but not choosable, such as a place that is gone. */
+  isDisabled?: boolean;
+}>;
+/** Choices listed under a heading (`optgroup`). */
+export type SelectGroup = Readonly<{
+  /** Tells groups apart when two share a label. */
+  key: string;
+  label: string;
+  options: readonly SelectOption[];
+}>;
+/** Configuration for rendering a select field with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  id: string;
+  label: string;
+  /** The chosen option's value. */
+  value: string;
+  onChange: (value: string) => Message;
+  /** The choices, in order; a group lists its own under its heading. */
+  options: ReadonlyArray<SelectOption | SelectGroup>;
+  /** 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 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;
+}>;
+/** A labelled select with its help line, built on `@foldkit/ui`'s `Select`: the label names
+ *  the select, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  The stylesheet draws the box, the caret and the picker. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/select-field/select-field.js

@@ -0,0 +1,29 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { controlAttributes, errorView, helpView } from "../field/field.js";
+import { Array } from "effect";
+import { Select } from "@foldkit/ui";
+// src/select-field/select-field.ts
+const isGroup = (entry) => __foldkitBrandViewResult(("options" in entry), "@gjermundgaraba/pixel-paper/select-field/select-field.js#isGroup");
+const optionView = (h) => __foldkitBrandViewResult((({ value, label, isDisabled = false }) => __foldkitBrandViewResult((h.keyed("option")(value, [h.Value(value), h.Disabled(isDisabled)], [label])), "@gjermundgaraba/pixel-paper/select-field/select-field.js#anonymous")), "@gjermundgaraba/pixel-paper/select-field/select-field.js#optionView");
+const entryView = (h) => __foldkitBrandViewResult(((entry) => __foldkitBrandViewResult((isGroup(entry) ? h.keyed("optgroup")(entry.key, [h.Attribute("label", entry.label)], Array.map(entry.options, optionView(h))) : optionView(h)(entry)), "@gjermundgaraba/pixel-paper/select-field/select-field.js#anonymous~2")), "@gjermundgaraba/pixel-paper/select-field/select-field.js#entryView");
+/** A labelled select with its help line, built on `@foldkit/ui`'s `Select`: the label names
+*  the select, the help line describes it (`aria-describedby`), an `error` sets
+*  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+*  The stylesheet draws the box, the caret and the picker. */
+const view = (config, h) => {
+	const { id, label, value, onChange, options, help, error, isRequired = false } = config;
+	return __foldkitBrandViewResult((Select.view({
+		id,
+		value,
+		onChange,
+		isInvalid: error !== void 0,
+		hasDescription: help !== void 0,
+		toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("field")], [
+			h.label(groups.label, [label]),
+			h.select([...groups.select, ...controlAttributes(id, error, help, isRequired, h)], Array.map(options, entryView(h))),
+			...errorView(id, error, h),
+			...helpView(help, groups.description, h)
+		])), "@gjermundgaraba/pixel-paper/select-field/select-field.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/select-field/select-field.js#view");
+};
+export { view };

package/dist/sheet/index.d.ts

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

package/dist/sheet/index.js

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

package/dist/sheet/sheet.d.ts

@@ -0,0 +1,16 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a sheet with `view`. */
+export type ViewConfig = Readonly<{
+  /** The page's `h1`, in sans at the reading scale. */
+  title: string;
+  /** Pixel face, muted, over a 1px rule: who changed it and when. */
+  byline?: ReadonlyArray<Html | string>;
+  /** Buttons at the title's right: edit, history. */
+  actions?: ReadonlyArray<Html | string>;
+  /** A Prose, and anything under it. */
+  body: ReadonlyArray<Html | string>;
+}>;
+/** An authored page, an `<article>` under its `h1` on its own sheet of paper, framed as a
+ *  panel is: the one place the system slows to reading pace. It stands in a panel's place,
+ *  never inside one, so its `h1` opens the page instead of following a panel's `h2`. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/sheet/sheet.js

@@ -0,0 +1,15 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { slotView } from "../slot/slot.js";
+// src/sheet/sheet.ts
+/** An authored page, an `<article>` under its `h1` on its own sheet of paper, framed as a
+*  panel is: the one place the system slows to reading pace. It stands in a panel's place,
+*  never inside one, so its `h1` opens the page instead of following a panel's `h2`. */
+const view = (config, h) => {
+	const { title, byline = [], actions = [], body } = config;
+	return __foldkitBrandViewResult((h.article([h.Class("sheet")], [
+		h.div([h.Class("sheet-head")], [h.h1([h.Class("sheet-title")], [title]), ...slotView("div", "sheet-acts", actions, h)]),
+		...slotView("p", "byline", byline, h),
+		...body
+	])), "@gjermundgaraba/pixel-paper/sheet/sheet.js#view");
+};
+export { view };

package/dist/skip-link/index.d.ts

@@ -0,0 +1,5 @@
+import { ScrollToFragment, view } from "./skip-link.js";
+declare namespace index_d_exports {
+  export { ScrollToFragment, view };
+}
+export { ScrollToFragment, index_d_exports, view };

package/dist/skip-link/index.js

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

package/dist/skip-link/skip-link.d.ts

@@ -0,0 +1,23 @@
+import { Effect, Schema } from "effect";
+import * as Command from "foldkit/command";
+import { Html, HtmlBuilder } from "foldkit/html";
+/**
+ * The first thing in the page: a link to the main landmark (`#main`, as Deck, Stage and Wall render it), hidden until it holds the
+ * keyboard. A Foldkit application routes every link click through its own update, so its
+ * fragment handler must move focus to the target as the browser would: return
+ * `ScrollToFragment` for a changed URL.
+ */
+export declare const view: <Message>(h: HtmlBuilder<Message>) => Html;
+/**
+ * What a followed link does without an application in the way, for the application's URL
+ * handler to return when the URL changes: with a fragment, scrolls to the element it names and
+ * moves focus to it, making it focusable (`tabindex="-1"`) when it is not, so the next Tab
+ * continues from there (nothing when no element has that id); without one, scrolls to the
+ * top, since Foldkit reports a link followed and a step through history as the same change, so
+ * a new page opens at its top either way. Reports `CompletedScrollToFragment`.
+ */
+export declare const ScrollToFragment: Command.CommandDefinitionWithArgs<"ScrollToFragment", {
+  maybeFragment: Schema.Option<Schema.String>;
+}, Effect.Effect<{
+  readonly _tag: "CompletedScrollToFragment";
+}, never, never>>;

package/dist/skip-link/skip-link.js

@@ -0,0 +1,36 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Effect, Option, Schema } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import * as Dom from "foldkit/dom";
+// src/skip-link/skip-link.ts
+/** What `ScrollToFragment` reports. An application that runs it puts
+*  `CompletedScrollToFragment: {}` in its own Message union, which this tag matches. */
+const Message = defineMessageUnion({ CompletedScrollToFragment: {} });
+/**
+* The first thing in the page: a link to the main landmark (`#main`, as Deck, Stage and Wall render it), hidden until it holds the
+* keyboard. A Foldkit application routes every link click through its own update, so its
+* fragment handler must move focus to the target as the browser would: return
+* `ScrollToFragment` for a changed URL.
+*/
+const view = (h) => __foldkitBrandViewResult((h.a([h.Href("#main"), h.Class("skip")], ["Skip to content"])), "@gjermundgaraba/pixel-paper/skip-link/skip-link.js#view");
+const focusFragment = (fragment) => __foldkitBrandViewResult((Effect.suspend(() => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(fragment)}`, { makeFocusable: true })), "@gjermundgaraba/pixel-paper/skip-link/skip-link.js#anonymous")).pipe(Effect.ignore)), "@gjermundgaraba/pixel-paper/skip-link/skip-link.js#focusFragment");
+/**
+* What a followed link does without an application in the way, for the application's URL
+* handler to return when the URL changes: with a fragment, scrolls to the element it names and
+* moves focus to it, making it focusable (`tabindex="-1"`) when it is not, so the next Tab
+* continues from there (nothing when no element has that id); without one, scrolls to the
+* top, since Foldkit reports a link followed and a step through history as the same change, so
+* a new page opens at its top either way. Reports `CompletedScrollToFragment`.
+*/
+const ScrollToFragment = Command.define("ScrollToFragment", {
+	args: { maybeFragment: Schema.Option(Schema.String) },
+	messages: [Message.CompletedScrollToFragment],
+	execute: ({ maybeFragment }) => __foldkitBrandViewResult((Option.match(maybeFragment, {
+		onNone: () => __foldkitBrandViewResult((Effect.sync(() => {
+			window.scrollTo(0, 0);
+		})), "@gjermundgaraba/pixel-paper/skip-link/skip-link.js#onNone"),
+		onSome: (fragment) => __foldkitBrandViewResult((Dom.scrollIntoView(`#${CSS.escape(fragment)}`).pipe(Effect.ignore, Effect.andThen(focusFragment(fragment)))), "@gjermundgaraba/pixel-paper/skip-link/skip-link.js#onSome")
+	}).pipe(Effect.as(Message.CompletedScrollToFragment()))), "@gjermundgaraba/pixel-paper/skip-link/skip-link.js#execute")
+});
+export { Message, ScrollToFragment, focusFragment, view };

package/dist/slot/slot.js

@@ -0,0 +1,8 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array } from "effect";
+// src/slot/slot.ts
+const slotView = (tag, slotClass, slot, h, attributes = []) => __foldkitBrandViewResult((Array.match(slot, {
+	onEmpty: () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/slot/slot.js#onEmpty"),
+	onNonEmpty: (content) => __foldkitBrandViewResult(([h[tag]([...attributes, h.Class(slotClass)], content)]), "@gjermundgaraba/pixel-paper/slot/slot.js#onNonEmpty")
+})), "@gjermundgaraba/pixel-paper/slot/slot.js#slotView");
+export { slotView };

package/dist/sortable/index.d.ts

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

package/dist/sortable/index.js

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