@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/fieldset/fieldset.d.ts

@@ -0,0 +1,13 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a fieldset with `view`. */
+export type ViewConfig = Readonly<{
+  /** Unique in the document: the legend's id is made from it. */
+  id: string;
+  /** The group's name, in the legend. */
+  label: string;
+  /** The controls: Choices, a Segmented. */
+  body: ReadonlyArray<Html | string>;
+}>;
+/** A group of controls under one name, built on `@foldkit/ui`'s Fieldset: a `<fieldset>`
+ *  named by its `<legend>`. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/fieldset/fieldset.js

@@ -0,0 +1,13 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Fieldset } from "@foldkit/ui";
+// src/fieldset/fieldset.ts
+/** A group of controls under one name, built on `@foldkit/ui`'s Fieldset: a `<fieldset>`
+*  named by its `<legend>`. */
+const view = (config, h) => {
+	const { id, label, body } = config;
+	return __foldkitBrandViewResult((Fieldset.view({
+		id,
+		toView: (groups) => __foldkitBrandViewResult((h.fieldset([...groups.fieldset, h.Class("field")], [h.legend([...groups.legend, h.Class("field-label")], [label]), ...body])), "@gjermundgaraba/pixel-paper/fieldset/fieldset.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/fieldset/fieldset.js#view");
+};
+export { view };

package/dist/fieldset/index.d.ts

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

package/dist/fieldset/index.js

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

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

@@ -0,0 +1,21 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a filter chip with `view`. */
+export type ViewConfig<Message> = Readonly<{
+  /** The value, the chip's words: "open", "this week". */
+  label: string;
+  /** The chip written out, when its words alone do not say it ("Clear scope: Operations" for
+   *  "Operations ×"): its name for screen readers and its tip for everyone else. */
+  full?: string;
+  /** In force: printed inverted. */
+  isPressed?: boolean;
+  /** Makes the chip a toggle button (`aria-pressed`); without it, a pinned label. */
+  onToggle?: Message;
+  /** The quiet chip that clears the filters: a plain button, never pressed. */
+  isReset?: boolean;
+  /** The chip's stable id among its siblings, for chips mapped from a list that changes. */
+  key?: string;
+}>;
+/** A filter as a chip. With `onToggle` it is a toggle button built on `@foldkit/ui`'s Button,
+ *  `aria-pressed` while in force; without, a label, inverted while pinned. With `full`, screen
+ *  readers hear the full words and the eye gets them as a tip. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/filter-chip/filter-chip.js

@@ -0,0 +1,28 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { pressedAttribute } from "../button/button.js";
+import { Button } from "@foldkit/ui";
+// src/filter-chip/filter-chip.ts
+/** A filter as a chip. With `onToggle` it is a toggle button built on `@foldkit/ui`'s Button,
+*  `aria-pressed` while in force; without, a label, inverted while pinned. With `full`, screen
+*  readers hear the full words and the eye gets them as a tip. */
+const view = (config, h) => {
+	const { label, full, isPressed = false, onToggle, isReset = false, key } = config;
+	const fullAttributes = full === void 0 ? [] : [h.DataAttribute("tip", full)];
+	const keyAttributes = key === void 0 ? [] : [h.Key(key)];
+	return __foldkitBrandViewResult((onToggle === void 0 ? h.span([
+		...keyAttributes,
+		...fullAttributes,
+		h.Class(isPressed ? "fchip pinned" : "fchip")
+	], full === void 0 ? [label] : [h.span([h.AriaHidden(true)], [label]), h.span([h.Class("sr-only")], [full])]) : Button.view({
+		onClick: onToggle,
+		toView: (groups) => __foldkitBrandViewResult((h.button([
+			...groups.button,
+			...keyAttributes,
+			...fullAttributes,
+			...full === void 0 ? [] : [h.AriaLabel(full)],
+			...isReset ? [] : [pressedAttribute(isPressed, h)],
+			h.Class(isReset ? "fchip reset" : "fchip")
+		], [label])), "@gjermundgaraba/pixel-paper/filter-chip/filter-chip.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/filter-chip/filter-chip.js#view");
+};
+export { view };

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

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

package/dist/filter-chip/index.js

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

package/dist/filter-strip/filter-strip.d.ts

@@ -0,0 +1,12 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a filter strip with `view`. */
+export type ViewConfig = Readonly<{
+  /** FilterChips, a QueryChip, a Segmented; `h.span([h.Class("spacer")])` pushes what
+   *  follows right. */
+  body: ReadonlyArray<Html | string>;
+  /** Names the group for screen readers. */
+  label?: string;
+}>;
+/** A printed strip of filters above a list, on a 3px shadow: a `role="group"` named by its
+ *  label. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/filter-strip/filter-strip.js

@@ -0,0 +1,13 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/filter-strip/filter-strip.ts
+/** A printed strip of filters above a list, on a 3px shadow: a `role="group"` named by its
+*  label. */
+const view = (config, h) => {
+	const { body, label = "Filters" } = config;
+	return __foldkitBrandViewResult((h.div([
+		h.Role("group"),
+		h.AriaLabel(label),
+		h.Class("strip")
+	], body)), "@gjermundgaraba/pixel-paper/filter-strip/filter-strip.js#view");
+};
+export { view };

package/dist/filter-strip/index.d.ts

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

package/dist/filter-strip/index.js

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

package/dist/flash-word/flash-word.d.ts

@@ -0,0 +1,31 @@
+import { Duration, Option } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** How long a flash word stays before the caller takes it back. */
+export declare const HOLD: Duration.Duration;
+/** Configuration for rendering a flash word with `view`. */
+export type ViewConfig = Readonly<{
+  /** The word from the caller's Model (`"saved"`), or `None` once it is taken back. */
+  maybeWord: Option.Option<string>;
+}>;
+/**
+ * Where a word printed beside an action for a moment (`"copied"`, `"saved"`) goes. It is a
+ * polite status, always on the page so the word is heard when it arrives; empty, it takes no
+ * room. For the outcome of the control the reader just used, beside it: an outcome they may
+ * not be looking at is a toast, and a state the whole interface is in is a Banner.
+ *
+ * The word and its clearing live in the caller's Model: set it to `Option.some(word)`
+ * together with a Command that waits `HOLD` and reports back, and clear it when that Message
+ * arrives, unless a newer word has replaced it since (keep a count, and drop a stale wait):
+ *
+ * ```ts
+ * const WaitBeforeClearFlashWord = Command.define("WaitBeforeClearFlashWord", {
+ *   args: { count: Schema.Finite },
+ *   messages: [Message.CompletedWaitBeforeClearFlashWord],
+ *   execute: ({ count }) =>
+ *     Effect.sleep(FlashWord.HOLD).pipe(
+ *       Effect.as(Message.CompletedWaitBeforeClearFlashWord({ count })),
+ *     ),
+ * });
+ * ```
+ */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/flash-word/flash-word.js

@@ -0,0 +1,31 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Duration, Option } from "effect";
+// src/flash-word/flash-word.ts
+/** How long a flash word stays before the caller takes it back. */
+const HOLD = Duration.millis(1800);
+/**
+* Where a word printed beside an action for a moment (`"copied"`, `"saved"`) goes. It is a
+* polite status, always on the page so the word is heard when it arrives; empty, it takes no
+* room. For the outcome of the control the reader just used, beside it: an outcome they may
+* not be looking at is a toast, and a state the whole interface is in is a Banner.
+*
+* The word and its clearing live in the caller's Model: set it to `Option.some(word)`
+* together with a Command that waits `HOLD` and reports back, and clear it when that Message
+* arrives, unless a newer word has replaced it since (keep a count, and drop a stale wait):
+*
+* ```ts
+* const WaitBeforeClearFlashWord = Command.define("WaitBeforeClearFlashWord", {
+*   args: { count: Schema.Finite },
+*   messages: [Message.CompletedWaitBeforeClearFlashWord],
+*   execute: ({ count }) =>
+*     Effect.sleep(FlashWord.HOLD).pipe(
+*       Effect.as(Message.CompletedWaitBeforeClearFlashWord({ count })),
+*     ),
+* });
+* ```
+*/
+const view = (config, h) => {
+	const { maybeWord } = config;
+	return __foldkitBrandViewResult((h.span([h.Role("status"), h.Class("flash-word")], Option.toArray(maybeWord))), "@gjermundgaraba/pixel-paper/flash-word/flash-word.js#view");
+};
+export { HOLD, view };

package/dist/flash-word/index.d.ts

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

package/dist/flash-word/index.js

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

package/dist/focus/focus.d.ts

@@ -0,0 +1,15 @@
+import { Effect, Schema } from "effect";
+import * as Command from "foldkit/command";
+/** What `Focus` reports. A component that runs `Focus` puts `CompletedFocus: {}` in its own
+ *  Message union, which this tag matches; code that returns `Focus` with no union of its own
+ *  (a helper shared by several forms) types its Commands with this one. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly CompletedFocus: {};
+}>;
+export type Message = typeof Message.Type;
+/** Focuses the element with this id, once it is in the page; nothing when it is not. */
+export declare const Focus: Command.CommandDefinitionWithArgs<"Focus", {
+  id: Schema.String;
+}, Effect.Effect<{
+  readonly _tag: "CompletedFocus";
+}, never, never>>;

package/dist/focus/focus.js

@@ -0,0 +1,17 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Effect, Schema } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import * as Dom from "foldkit/dom";
+// src/focus/focus.ts
+/** What `Focus` reports. A component that runs `Focus` puts `CompletedFocus: {}` in its own
+*  Message union, which this tag matches; code that returns `Focus` with no union of its own
+*  (a helper shared by several forms) types its Commands with this one. */
+const Message = defineMessageUnion({ CompletedFocus: {} });
+/** Focuses the element with this id, once it is in the page; nothing when it is not. */
+const Focus = Command.define("Focus", {
+	args: { id: Schema.String },
+	messages: [Message.CompletedFocus],
+	execute: ({ id }) => __foldkitBrandViewResult((Dom.focus(`#${CSS.escape(id)}`).pipe(Effect.ignore, Effect.as(Message.CompletedFocus()))), "@gjermundgaraba/pixel-paper/focus/focus.js#execute")
+});
+export { Focus, Message };

package/dist/focus/index.d.ts

@@ -0,0 +1,5 @@
+import { Focus, Message } from "./focus.js";
+declare namespace index_d_exports {
+  export { Focus, Message };
+}
+export { Focus, Message, index_d_exports };

package/dist/focus/index.js

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

package/dist/format/format.js

@@ -0,0 +1,52 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { LOCALE } from "../locale/locale.js";
+import { Duration, Match, Option } from "effect";
+// src/format/format.ts
+const SECOND = Duration.toMillis(Duration.seconds(1));
+const MINUTE = Duration.toMillis(Duration.minutes(1));
+const HOUR = Duration.toMillis(Duration.hours(1));
+const DAY = Duration.toMillis(Duration.days(1));
+const dateFormat = (timeZone) => __foldkitBrandViewResult((new Intl.DateTimeFormat(LOCALE, {
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	timeZone: Option.getOrUndefined(timeZone)
+})), "@gjermundgaraba/pixel-paper/format/format.js#dateFormat");
+const dateTimeFormat = (timeZone) => __foldkitBrandViewResult((new Intl.DateTimeFormat(LOCALE, {
+	day: "numeric",
+	month: "short",
+	year: "numeric",
+	hour: "2-digit",
+	minute: "2-digit",
+	hourCycle: "h23",
+	timeZone: Option.getOrUndefined(timeZone)
+})), "@gjermundgaraba/pixel-paper/format/format.js#dateTimeFormat");
+/** A day as `"12 Mar 2026"`, in the reader's zone unless `timeZone` names another. Always
+*  English, so the server and every browser write the same words. */
+const formatDate = (at, timeZone = Option.none()) => __foldkitBrandViewResult((dateFormat(timeZone).format(at)), "@gjermundgaraba/pixel-paper/format/format.js#formatDate");
+const formatDateTime = (at, timeZone = Option.none()) => __foldkitBrandViewResult((dateTimeFormat(timeZone).format(at)), "@gjermundgaraba/pixel-paper/format/format.js#formatDateTime");
+const formatSpan = (milliseconds) => {
+	const span = Math.abs(milliseconds);
+	return __foldkitBrandViewResult((Match.value(span).pipe(Match.when((value) => __foldkitBrandViewResult((value < MINUTE), "@gjermundgaraba/pixel-paper/format/format.js#anonymous"), (value) => __foldkitBrandViewResult((`${Math.floor(value / SECOND)}s`), "@gjermundgaraba/pixel-paper/format/format.js#anonymous~2")), Match.when((value) => __foldkitBrandViewResult((value < HOUR), "@gjermundgaraba/pixel-paper/format/format.js#anonymous~3"), (value) => __foldkitBrandViewResult((`${Math.floor(value / MINUTE)}m`), "@gjermundgaraba/pixel-paper/format/format.js#anonymous~4")), Match.when((value) => __foldkitBrandViewResult((value < 2 * DAY), "@gjermundgaraba/pixel-paper/format/format.js#anonymous~5"), (value) => __foldkitBrandViewResult((`${Math.floor(value / HOUR)}h`), "@gjermundgaraba/pixel-paper/format/format.js#anonymous~6")), Match.orElse((value) => __foldkitBrandViewResult((`${Math.floor(value / DAY)}d`), "@gjermundgaraba/pixel-paper/format/format.js#anonymous~7")))), "@gjermundgaraba/pixel-paper/format/format.js#formatSpan");
+};
+const twoUnits = (milliseconds, [large, small, largeUnit, smallUnit]) => {
+	const whole = Math.floor(milliseconds / large);
+	const rest = Math.floor(milliseconds % large / small);
+	return __foldkitBrandViewResult((rest === 0 ? `${whole}${largeUnit}` : `${whole}${largeUnit} ${rest}${smallUnit}`), "@gjermundgaraba/pixel-paper/format/format.js#twoUnits");
+};
+const formatRemaining = (milliseconds) => {
+	if (milliseconds < HOUR) return __foldkitBrandViewResult((formatSpan(milliseconds)), "@gjermundgaraba/pixel-paper/format/format.js#formatRemaining");
+	else if (milliseconds < 2 * DAY) return __foldkitBrandViewResult((twoUnits(milliseconds, [
+		HOUR,
+		MINUTE,
+		"h",
+		"m"
+	])), "@gjermundgaraba/pixel-paper/format/format.js#formatRemaining");
+	return __foldkitBrandViewResult((twoUnits(milliseconds, [
+		DAY,
+		HOUR,
+		"d",
+		"h"
+	])), "@gjermundgaraba/pixel-paper/format/format.js#formatRemaining");
+};
+export { formatDate, formatDateTime, formatRemaining, formatSpan };

package/dist/format/index.d.ts

@@ -0,0 +1,5 @@
+import { LOCALE } from "../locale/locale.js";
+declare namespace index_d_exports {
+  export { LOCALE };
+}
+export { LOCALE, index_d_exports };

package/dist/format/index.js

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

package/dist/glyph/glyph.d.ts

@@ -0,0 +1,9 @@
+import { GlyphName } from "./glyphs.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a glyph with `view`. */
+export type ViewConfig = Readonly<{
+  name: GlyphName;
+}>;
+/** One glyph from the inventory, in `currentColor`, at the 12px it was drawn for. Decorative:
+ *  label the control that holds it. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/glyph/glyph.js

@@ -0,0 +1,25 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { glyphs } from "./glyphs.js";
+import { Array } from "effect";
+// src/glyph/glyph.ts
+const DRAWN_SIZE = 12;
+const cellView = (h) => __foldkitBrandViewResult((([x, y, width, height]) => __foldkitBrandViewResult((h.rect([
+	h.X(`${x}`),
+	h.Y(`${y}`),
+	h.Width(`${width}`),
+	h.Height(`${height}`),
+	h.Fill("currentColor")
+])), "@gjermundgaraba/pixel-paper/glyph/glyph.js#anonymous")), "@gjermundgaraba/pixel-paper/glyph/glyph.js#cellView");
+/** One glyph from the inventory, in `currentColor`, at the 12px it was drawn for. Decorative:
+*  label the control that holds it. */
+const view = (config, h) => {
+	const { name } = config;
+	return __foldkitBrandViewResult((h.svg([
+		h.ViewBox(`0 0 ${DRAWN_SIZE} ${DRAWN_SIZE}`),
+		h.Width(`${DRAWN_SIZE}`),
+		h.Height(`${DRAWN_SIZE}`),
+		h.AriaHidden(true),
+		h.Class("px-icon")
+	], Array.map(glyphs[name], cellView(h)))), "@gjermundgaraba/pixel-paper/glyph/glyph.js#view");
+};
+export { cellView, view };