@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/card/card.d.ts

@@ -0,0 +1,66 @@
+import { Attributes } from "../attributes/attributes.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a card with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Pixel caps in the inverted title bar. */
+  title: string;
+  /** Attributes for the title, such as a Dialog's `title` group, which names the dialog. */
+  titleAttributes?: Attributes<Message>;
+  meta?: string;
+  body: ReadonlyArray<Html | string>;
+  /** Attributes for the close glyph, such as a Dialog's `closeButton` group, which closes it.
+   *  The glyph prints when they are given. */
+  closeAttributes?: Attributes<Message>;
+  /** 440px instead of 680px: confirms, settings, sign-in. */
+  isNarrow?: boolean;
+  /** The action bar: a 2px ink rule, then these pushed right. Give the default `isDefault`. */
+  actions?: ReadonlyArray<Html | string>;
+  /** In the action bar before the push: a flash word, a quiet button. */
+  lead?: ReadonlyArray<Html | string>;
+  /** Attributes for the action bar, such as a Dialog's `actionBar` group, which moves focus
+   *  between the actions with h, l and the side arrows. */
+  actionBarAttributes?: Attributes<Message>;
+}>;
+/** The raised surface: paper in a 2px ink box on the 8px print shadow, under a title bar. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
+/** Configuration for rendering a form card with `formView`: a card's, but for its body, its
+ *  close attributes and its actions, which the form fills. `lead` stays the card's: what
+ *  goes before the push, such as a form's own delete. */
+export type FormViewConfig<Message> = Omit<ViewConfig<Message>, "body" | "closeAttributes" | "actions"> & Readonly<{
+  /** Unique in the document: the submit button's id is `submitId(id)`. */
+  id: string;
+  /** The form's content, fields and all, in one Fields group that `isBusy` holds. A link in
+   *  it (an ErrorSummary's) stays live. */
+  body: ReadonlyArray<Html | string>;
+  /** Above the fields, outside the group `isBusy` holds: what the page says about the form
+   *  while it is open (a lost connection with its retry), whose controls stay live while it
+   *  sends. */
+  notices?: ReadonlyArray<Html | string>;
+  /** The submit button's words. It prints primary, the card's default. */
+  submit: string;
+  /** The cancel button's words, before the submit. It closes through `closeAttributes`. */
+  cancel?: string;
+  /** Attributes for the close glyph and the cancel button, such as a Dialog's `closeButton`
+   *  group, which closes it. The glyph prints when they are given. */
+  closeAttributes?: Attributes<Message>;
+  /** The form's work is running (it sends): the submit button is busy, the close glyph and
+   *  cancel are held without `closeAttributes`, and the body is natively disabled, so
+   *  nothing changes under the send and nothing sends twice. In a Dialog, pass the same state
+   *  as `isCloseHeld` to its update, so Escape and the veil are held too. Enter in a field
+   *  can submit before the fields are held, so the update still ignores `onSubmit` while
+   *  busy. */
+  isBusy?: boolean;
+  /** The form cannot be sent yet (nothing to send): the submit button is held as a Button
+   *  is, and the fields and cancel stay live. Enter in a field can still submit, so the
+   *  update ignores `onSubmit` while it cannot be sent. */
+  isSubmitDisabled?: boolean;
+  /** Sent when the form submits, by its button or by Enter in a field. */
+  onSubmit: Message;
+}>;
+/** The id of a form card's submit button. A send disables the fields, so focus in one falls
+ *  to the page: the form's update moves it here as it sends, with
+ *  `Focus.Focus({ id: Card.submitId(id) })`. */
+export declare const submitId: (id: string) => string;
+/** A card that is a form, named by its title, so a form landmark: its notices, its body in
+ *  one Fields group, then cancel and the primary submit button in the action bar. */
+export declare const formView: <Message>(config: FormViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/card/card.js

@@ -0,0 +1,70 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../button/button.js";
+import { view as view$2 } from "../icon-button/icon-button.js";
+import { slotView } from "../slot/slot.js";
+import { view as view$3 } from "../fields/fields.js";
+import { Array } from "effect";
+// src/card/card.ts
+const childrenView = (config, h) => {
+	const { title, titleAttributes = [], meta, body, closeAttributes, isCloseHeld = false, actions = [], lead = [], actionBarAttributes = [] } = config;
+	const titleBar = h.header([h.Class("card-tb")], [
+		h.h2(titleAttributes, [title]),
+		...meta === void 0 ? [] : [h.span([h.Class("meta")], [meta])],
+		...closeAttributes === void 0 ? [] : [view$2({
+			glyph: "cross",
+			label: "Close",
+			isDisabled: isCloseHeld,
+			attributes: isCloseHeld ? [] : closeAttributes
+		}, h)]
+	]);
+	const actionBar = Array.match([...lead, ...slotView("span", "card-acts", actions, h)], {
+		onEmpty: () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/card/card.js#onEmpty"),
+		onNonEmpty: (bar) => __foldkitBrandViewResult(([h.div([...actionBarAttributes, h.Class("card-actions")], bar)]), "@gjermundgaraba/pixel-paper/card/card.js#onNonEmpty")
+	});
+	return __foldkitBrandViewResult(([
+		titleBar,
+		h.div([h.Class("card-body")], body),
+		...actionBar
+	]), "@gjermundgaraba/pixel-paper/card/card.js#childrenView");
+};
+const className = (isNarrow) => __foldkitBrandViewResult((isNarrow === true ? "card narrow" : "card"), "@gjermundgaraba/pixel-paper/card/card.js#className");
+/** The raised surface: paper in a 2px ink box on the 8px print shadow, under a title bar. */
+const view = (config, h) => __foldkitBrandViewResult((h.div([h.Class(className(config.isNarrow))], childrenView(config, h))), "@gjermundgaraba/pixel-paper/card/card.js#view");
+/** The id of a form card's submit button. A send disables the fields, so focus in one falls
+*  to the page: the form's update moves it here as it sends, with
+*  `Focus.Focus({ id: Card.submitId(id) })`. */
+const submitId = (id) => __foldkitBrandViewResult((`${id}-submit`), "@gjermundgaraba/pixel-paper/card/card.js#submitId");
+/** A card that is a form, named by its title, so a form landmark: its notices, its body in
+*  one Fields group, then cancel and the primary submit button in the action bar. */
+const formView = (config, h) => {
+	const { id, title, submit, cancel, closeAttributes, notices = [], isBusy = false, isSubmitDisabled = false, onSubmit } = config;
+	const cancelButton = cancel === void 0 ? [] : [view$1({
+		label: cancel,
+		isDisabled: isBusy,
+		attributes: isBusy ? [] : closeAttributes ?? []
+	}, h)];
+	const submitButton = view$1({
+		label: submit,
+		variant: "Primary",
+		isDefault: true,
+		isBusy,
+		isDisabled: isSubmitDisabled,
+		type: "submit",
+		attributes: [h.Id(submitId(id))]
+	}, h);
+	return __foldkitBrandViewResult((h.form([
+		h.Class(className(config.isNarrow)),
+		h.AriaLabel(title),
+		h.Novalidate(true),
+		h.OnSubmit(onSubmit)
+	], childrenView({
+		...config,
+		body: [...notices, view$3({
+			body: config.body,
+			isBusy
+		}, h)],
+		isCloseHeld: isBusy,
+		actions: [...cancelButton, submitButton]
+	}, h))), "@gjermundgaraba/pixel-paper/card/card.js#formView");
+};
+export { formView, submitId, view };

package/dist/card/index.d.ts

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

package/dist/card/index.js

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

package/dist/chip/chip.d.ts

@@ -0,0 +1,27 @@
+import { Schema } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** `Go`: active (green). `Warn`: a warning the row carries (amber). `Blocked`: a red outline.
+ *  `Done`: tinted. Colour only ever means active, warning or urgent. */
+export declare const Tone: Schema.Literals<readonly ["Plain", "Go", "Warn", "Blocked", "Done"]>;
+export type Tone = typeof Tone.Type;
+/** Configuration for rendering a chip with `view`. */
+export type ViewConfig = Readonly<{
+  /** The state word. */
+  label: string;
+  tone?: Tone;
+  /** Working on it (polling, building, starting): the word gains the blinking block cursor,
+   *  and the chip says so (`aria-busy`). */
+  isBusy?: boolean;
+}>;
+/** A state word in a 2px box. Its words are its meaning; the colour only repeats them. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
+/** Configuration for rendering a dot with `dotView`. */
+export type DotConfig = Readonly<{
+  /** The state word: the dot's accessible name and its tip. */
+  label: string;
+  tone?: Tone;
+}>;
+/** A chip as a 10px cell in its tone, where a word would take the room a title needs (a task
+ *  row's status, before its title). It is an image (`role="img"`) named by the word, which its
+ *  tip shows, so the state never rests on its colour. */
+export declare const dotView: <Message>(config: DotConfig, h: HtmlBuilder<Message>) => Html;

package/dist/chip/chip.js

@@ -0,0 +1,34 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Schema } from "effect";
+Schema.Literals([
+	"Plain",
+	"Go",
+	"Warn",
+	"Blocked",
+	"Done"
+]);
+const TONE_CLASS = {
+	Plain: "",
+	Go: " go",
+	Warn: " warn",
+	Blocked: " blocked",
+	Done: " done"
+};
+/** A state word in a 2px box. Its words are its meaning; the colour only repeats them. */
+const view = (config, h) => {
+	const { label, tone = "Plain", isBusy = false } = config;
+	return __foldkitBrandViewResult((h.span([...isBusy ? [h.AriaBusy(true)] : [], h.Class(`chip${TONE_CLASS[tone]}`)], [label, ...isBusy ? [h.span([h.Class("cursor"), h.AriaHidden(true)])] : []])), "@gjermundgaraba/pixel-paper/chip/chip.js#view");
+};
+/** A chip as a 10px cell in its tone, where a word would take the room a title needs (a task
+*  row's status, before its title). It is an image (`role="img"`) named by the word, which its
+*  tip shows, so the state never rests on its colour. */
+const dotView = (config, h) => {
+	const { label, tone = "Plain" } = config;
+	return __foldkitBrandViewResult((h.span([
+		h.Role("img"),
+		h.AriaLabel(label),
+		h.DataAttribute("tip", label),
+		h.Class(`chip-dot${TONE_CLASS[tone]}`)
+	])), "@gjermundgaraba/pixel-paper/chip/chip.js#dotView");
+};
+export { dotView, view };

package/dist/chip/index.d.ts

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

package/dist/chip/index.js

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

package/dist/choice/choice.d.ts

@@ -0,0 +1,16 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a checkbox choice with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Unique in the document: the name's and the note's ids are made from it. */
+  id: string;
+  /** The choice's name, in pixel caps. A click on it toggles the box. */
+  label: string;
+  /** A sans sentence under the name; it describes the box. */
+  note?: string;
+  isChecked: boolean;
+  onToggle: (isChecked: boolean) => Message;
+}>;
+/** A checkbox with a pixel-caps name and an optional note, built on `@foldkit/ui`'s
+ *  Checkbox: a `role="checkbox"` box (`aria-checked`) named by its name, described by its note
+ *  (`aria-describedby`). Space and a click on the box or the name toggle it. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/choice/choice.js

@@ -0,0 +1,17 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Checkbox } from "@foldkit/ui";
+// src/choice/choice.ts
+/** A checkbox with a pixel-caps name and an optional note, built on `@foldkit/ui`'s
+*  Checkbox: a `role="checkbox"` box (`aria-checked`) named by its name, described by its note
+*  (`aria-describedby`). Space and a click on the box or the name toggle it. */
+const view = (config, h) => {
+	const { id, label, note, isChecked, onToggle } = config;
+	return __foldkitBrandViewResult((Checkbox.view({
+		id,
+		isChecked,
+		onToggle,
+		hasDescription: note !== void 0,
+		toView: (groups) => __foldkitBrandViewResult((h.div([h.Class("choice")], [h.button([...groups.checkbox, h.Class("choice-box")]), h.span([], [h.span([...groups.label, h.Class("choice-name")], [label]), ...note === void 0 ? [] : [h.span([...groups.description, h.Class("choice-note")], [note])]])])), "@gjermundgaraba/pixel-paper/choice/choice.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/choice/choice.js#view");
+};
+export { view };

package/dist/choice/index.d.ts

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

package/dist/choice/index.js

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

package/dist/code-editor/code-editor.d.ts

@@ -0,0 +1,15 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a code editor with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** Unique in the document: the `<textarea>`'s id. */
+  id: string;
+  /** The code. The caller keeps it, and sets it again for a reset or a loaded file. */
+  value: string;
+  /** Every keystroke's whole code; the caller stores it as `value`. */
+  onInput: (value: string) => Message;
+  /** Names the editor for screen readers: a file name, `"Request body"`. */
+  label: string;
+}>;
+/** Code to edit, built on `@foldkit/ui`'s Textarea: the code surface as a textarea, 220px tall
+ *  at least and growing to 60vh, with spelling, capitals and autocomplete off. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/code-editor/code-editor.js

@@ -0,0 +1,22 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Textarea } from "@foldkit/ui";
+// src/code-editor/code-editor.ts
+/** Code to edit, built on `@foldkit/ui`'s Textarea: the code surface as a textarea, 220px tall
+*  at least and growing to 60vh, with spelling, capitals and autocomplete off. */
+const view = (config, h) => {
+	const { id, value, onInput, label } = config;
+	return __foldkitBrandViewResult((Textarea.view({
+		id,
+		value,
+		onInput,
+		toView: (groups) => __foldkitBrandViewResult((h.textarea([
+			...groups.textarea,
+			h.Spellcheck(false),
+			h.Autocapitalize("off"),
+			h.Autocomplete("off"),
+			h.AriaLabel(label),
+			h.Class("code-surface")
+		])), "@gjermundgaraba/pixel-paper/code-editor/code-editor.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/code-editor/code-editor.js#view");
+};
+export { view };

package/dist/code-editor/index.d.ts

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

package/dist/code-editor/index.js

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

package/dist/code-surface/code-surface.d.ts

@@ -0,0 +1,12 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a code surface with `view`. */
+export type ViewConfig = Readonly<{
+  /** Names the block for screen readers: a file name, `"Response body"`. */
+  label: string;
+  /** The code: a string, or a highlighter's spans (`tok-*` classes take the content inks). */
+  body: ReadonlyArray<Html | string>;
+}>;
+/** Code to read: a head-tinted block in the system monospace. It wraps rather than scrolls,
+ *  and takes focus, so a keyboard reader can reach it and a screen reader names it: a `<pre>`
+ *  may not be named, so it is a `role="group"`, which may. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/code-surface/code-surface.js

@@ -0,0 +1,12 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/code-surface/code-surface.ts
+/** Code to read: a head-tinted block in the system monospace. It wraps rather than scrolls,
+*  and takes focus, so a keyboard reader can reach it and a screen reader names it: a `<pre>`
+*  may not be named, so it is a `role="group"`, which may. */
+const view = (config, h) => __foldkitBrandViewResult((h.pre([
+	h.Tabindex(0),
+	h.Role("group"),
+	h.AriaLabel(config.label),
+	h.Class("code-surface")
+], config.body)), "@gjermundgaraba/pixel-paper/code-surface/code-surface.js#view");
+export { view };

package/dist/code-surface/index.d.ts

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

package/dist/code-surface/index.js

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