@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.1

package/dist/dom/html-element.js

@@ -0,0 +1,8 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Option } from "effect";
+// src/dom/html-element.ts
+const htmlElement = (selector, root = document) => {
+	const element = root.querySelector(selector);
+	return __foldkitBrandViewResult((element instanceof HTMLElement ? Option.some(element) : Option.none()), "@gjermundgaraba/pixel-paper/dom/html-element.js#htmlElement");
+};
+export { htmlElement };

package/dist/drag/drag.d.ts

@@ -0,0 +1,15 @@
+import { Option, Stream } from "effect";
+import "foldkit/command";
+import { DragAndDrop } from "@foldkit/ui";
+import { Attribute, HtmlBuilder } from "foldkit/html";
+import "foldkit/subscription";
+import "foldkit/update";
+type Holder = Readonly<{
+  dragAndDrop: DragAndDrop.Model;
+  maybeHeld: Option.Option<unknown>;
+}>;
+/** Whether an item is pressed or held. While it is, the arrow keys, Space and Escape belong to
+ *  the list: pause the page's own bindings for them. The list takes Escape before anything
+ *  else sees it. */
+export declare const isHolding: (model: Holder) => boolean;
+export {};

package/dist/drag/drag.js

@@ -0,0 +1,123 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { isPlain } from "../keys/keys.js";
+import { Array, Effect, Option, Order, Schema, Stream, pipe } from "effect";
+import { DragAndDrop } from "@foldkit/ui";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
+import * as Dom from "foldkit/dom";
+// src/drag/drag.ts
+const phaseOf = (dragAndDrop) => {
+	if (Option.isNone(DragAndDrop.maybeDraggedItemId(dragAndDrop))) return __foldkitBrandViewResult(("Idle"), "@gjermundgaraba/pixel-paper/drag/drag.js#phaseOf");
+	else if (!DragAndDrop.isDragging(dragAndDrop)) return __foldkitBrandViewResult(("Pressed"), "@gjermundgaraba/pixel-paper/drag/drag.js#phaseOf");
+	else if (Option.isSome(DragAndDrop.ghostStyle(dragAndDrop))) return __foldkitBrandViewResult(("PointerDragging"), "@gjermundgaraba/pixel-paper/drag/drag.js#phaseOf");
+	return __foldkitBrandViewResult(("KeyboardDragging"), "@gjermundgaraba/pixel-paper/drag/drag.js#phaseOf");
+};
+const isCarrying = (phase) => __foldkitBrandViewResult((phase === "PointerDragging" || phase === "KeyboardDragging"), "@gjermundgaraba/pixel-paper/drag/drag.js#isCarrying");
+/** Whether an item is pressed or held. While it is, the arrow keys, Space and Escape belong to
+*  the list: pause the page's own bindings for them. The list takes Escape before anything
+*  else sees it. */
+const isHolding = (model) => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) !== "Idle"), "@gjermundgaraba/pixel-paper/drag/drag.js#isHolding");
+const canLift = (model) => __foldkitBrandViewResult((!isHolding(model)), "@gjermundgaraba/pixel-paper/drag/drag.js#canLift");
+const settle = (step, maybeAnnouncement) => __foldkitBrandViewResult((Update.withOutMessage({
+	model: isHolding(step.model) ? step.model : {
+		...step.model,
+		maybeHeld: Option.none()
+	},
+	commands: [...step.commands ?? [], ...Array.fromOption(maybeAnnouncement)]
+}, step.outMessage)), "@gjermundgaraba/pixel-paper/drag/drag.js#settle");
+const pressedDraggable = (fields) => __foldkitBrandViewResult((DragAndDrop.Message.PressedDraggable(fields)), "@gjermundgaraba/pixel-paper/drag/drag.js#pressedDraggable");
+const activatedKeyboardDrag = (fields) => __foldkitBrandViewResult((DragAndDrop.Message.ActivatedKeyboardDrag(fields)), "@gjermundgaraba/pixel-paper/drag/drag.js#activatedKeyboardDrag");
+const movedPointer = (fields) => __foldkitBrandViewResult((DragAndDrop.Message.MovedPointer(fields)), "@gjermundgaraba/pixel-paper/drag/drag.js#movedPointer");
+const releasedPointer = () => __foldkitBrandViewResult((DragAndDrop.Message.ReleasedPointer()), "@gjermundgaraba/pixel-paper/drag/drag.js#releasedPointer");
+const cancelledDrag = () => __foldkitBrandViewResult((DragAndDrop.Message.CancelledDrag()), "@gjermundgaraba/pixel-paper/drag/drag.js#cancelledDrag");
+const innerControls = (liftingButtons) => __foldkitBrandViewResult(([
+	"input",
+	"textarea",
+	"select",
+	"a[href]",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	`button:not(${liftingButtons})`,
+	"[data-no-lift]"
+].join(", ")), "@gjermundgaraba/pixel-paper/drag/drag.js#innerControls");
+const takeEscape = (event, message) => {
+	if (event.key !== "Escape" || event.isComposing) return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/drag/drag.js#takeEscape");
+	event.preventDefault();
+	event.stopPropagation();
+	return __foldkitBrandViewResult((Option.some(message)), "@gjermundgaraba/pixel-paper/drag/drag.js#takeEscape");
+};
+const escapeKeys = (message) => __foldkitBrandViewResult((Dom.streamFromEventFilterMap({
+	target: () => __foldkitBrandViewResult((window), "@gjermundgaraba/pixel-paper/drag/drag.js#target"),
+	type: "keydown",
+	filterMapEvent: (event) => __foldkitBrandViewResult((takeEscape(event, message)), "@gjermundgaraba/pixel-paper/drag/drag.js#filterMapEvent"),
+	options: { capture: true }
+})), "@gjermundgaraba/pixel-paper/drag/drag.js#escapeKeys");
+const escapeSubscriptions = (message) => __foldkitBrandViewResult((Subscription.make()((entry) => (__foldkitBrandViewResult(({ escape: entry({ isHolding: Schema.Boolean }, {
+	modelToDependencies: (model) => (__foldkitBrandViewResult(({ isHolding: isHolding(model) }), "@gjermundgaraba/pixel-paper/drag/drag.js#modelToDependencies")),
+	dependenciesToStream: ({ isHolding: isHoldingNow }) => __foldkitBrandViewResult((isHoldingNow ? escapeKeys(message) : Stream.empty), "@gjermundgaraba/pixel-paper/drag/drag.js#dependenciesToStream")
+}) }), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous")))), "@gjermundgaraba/pixel-paper/drag/drag.js#escapeSubscriptions");
+const pressingPointer = (pointerId) => __foldkitBrandViewResult((Stream.filter(Stream.mergeAll(Array.map([
+	"pointermove",
+	"pointerup",
+	"pointercancel"
+], (type) => __foldkitBrandViewResult((Stream.fromEventListener(document, type)), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~2")), { concurrency: "unbounded" }), (event) => __foldkitBrandViewResult((event.pointerId === pointerId), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~3"))), "@gjermundgaraba/pixel-paper/drag/drag.js#pressingPointer");
+const pointerMessages = (pointerId, toMessage) => __foldkitBrandViewResult((Stream.map(pressingPointer(pointerId), (event) => {
+	if (event.type === "pointermove") return __foldkitBrandViewResult((toMessage.moved(event)), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~4");
+	else if (event.type === "pointerup") return __foldkitBrandViewResult((toMessage.released(event)), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~4");
+	return __foldkitBrandViewResult((toMessage.cancelled()), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~4");
+})), "@gjermundgaraba/pixel-paper/drag/drag.js#pointerMessages");
+const splitterAttributes = (config, h) => {
+	const [less, more] = config.orientation === "vertical" ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+	return __foldkitBrandViewResult(([
+		h.AriaOrientation(config.orientation),
+		h.OnPointerDown((_pointerType, button, _screenX, _screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(config.onPress(pointerId, clientX, clientY), () => __foldkitBrandViewResult((button === 0 && config.isIdle), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~6"))), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~5")),
+		h.OnKeyDownPreventDefault((key, modifiers) => __foldkitBrandViewResult((Option.liftPredicate(config.onStep(key === more ? 1 : -1), () => __foldkitBrandViewResult((isPlain(modifiers) && (key === less || key === more)), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~8"))), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~7"))
+	]), "@gjermundgaraba/pixel-paper/drag/drag.js#splitterAttributes");
+};
+const measureLift = (element, sourceSelector, pressX, pressY) => {
+	const maybeSource = Option.fromNullishOr(document.querySelector(sourceSelector));
+	if (Option.isSome(maybeSource) && element instanceof HTMLElement) {
+		const rect = maybeSource.value.getBoundingClientRect();
+		element.style.setProperty("--lift-width", `${rect.width}px`);
+		element.style.setProperty("--lift-x", `${rect.left - pressX}px`);
+		element.style.setProperty("--lift-y", `${rect.top - pressY}px`);
+	}
+};
+const ROW_TOLERANCE = 1;
+const boxOf = (element) => {
+	const rect = element.getBoundingClientRect();
+	return __foldkitBrandViewResult(({
+		top: rect.top,
+		centreX: rect.left + rect.width / 2,
+		centreY: rect.top + rect.height / 2
+	}), "@gjermundgaraba/pixel-paper/drag/drag.js#boxOf");
+};
+const isOnSameRow = (box, other) => __foldkitBrandViewResult((Math.abs(other.top - box.top) < ROW_TOLERANCE), "@gjermundgaraba/pixel-paper/drag/drag.js#isOnSameRow");
+const readAxis = (boxesWithHeld) => __foldkitBrandViewResult((Array.some(boxesWithHeld, (box, index) => __foldkitBrandViewResult((Option.exists(Array.get(boxesWithHeld, index + 1), (next) => __foldkitBrandViewResult((isOnSameRow(box, next)), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~10"))), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~9")) ? "Across" : "Down"), "@gjermundgaraba/pixel-paper/drag/drag.js#readAxis");
+const isPastCentre = (axis, box, clientX, clientY) => __foldkitBrandViewResult((axis === "Across" ? clientX > box.centreX : clientY > box.centreY), "@gjermundgaraba/pixel-paper/drag/drag.js#isPastCentre");
+const insertionIndex = (container, heldId, clientX, clientY) => {
+	const items = Array.map(Array.fromIterable(container.querySelectorAll("[data-sortable-id]")), (item) => (__foldkitBrandViewResult(({
+		id: item.dataset["sortableId"],
+		box: boxOf(item)
+	}), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~11")));
+	const axis = readAxis(Array.map(items, ({ box }) => __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~12")));
+	const boxes = pipe(Array.filter(items, (item) => __foldkitBrandViewResult((item.id !== heldId), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~13")), Array.map(({ box }) => __foldkitBrandViewResult((box), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~14")));
+	const distance = (box) => __foldkitBrandViewResult((Math.hypot(box.centreX - clientX, box.centreY - clientY)), "@gjermundgaraba/pixel-paper/drag/drag.js#distance");
+	const byDistance = Order.mapInput(Order.Number, ({ box }) => __foldkitBrandViewResult((distance(box)), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~15"));
+	return __foldkitBrandViewResult((Array.match(Array.map(boxes, (box, index) => (__foldkitBrandViewResult(({
+		box,
+		index
+	}), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~16"))), {
+		onEmpty: () => __foldkitBrandViewResult((0), "@gjermundgaraba/pixel-paper/drag/drag.js#onEmpty"),
+		onNonEmpty: (candidates) => {
+			const { box, index } = Array.min(candidates, byDistance);
+			return __foldkitBrandViewResult((isPastCentre(axis, box, clientX, clientY) ? index + 1 : index), "@gjermundgaraba/pixel-paper/drag/drag.js#onNonEmpty");
+		}
+	})), "@gjermundgaraba/pixel-paper/drag/drag.js#insertionIndex");
+};
+const DRAGGING_ATTRIBUTE = "data-pixel-paper-dragging";
+const markDragging = Stream.callback(() => __foldkitBrandViewResult((Effect.acquireRelease(Effect.sync(() => {
+	document.documentElement.setAttribute(DRAGGING_ATTRIBUTE, "");
+}), () => __foldkitBrandViewResult((Effect.sync(() => {
+	document.documentElement.removeAttribute(DRAGGING_ATTRIBUTE);
+})), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~19")).pipe(Effect.flatMap(() => __foldkitBrandViewResult((Effect.never), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~21")))), "@gjermundgaraba/pixel-paper/drag/drag.js#anonymous~17"));
+export { activatedKeyboardDrag, canLift, cancelledDrag, escapeKeys, escapeSubscriptions, innerControls, insertionIndex, isCarrying, isHolding, markDragging, measureLift, movedPointer, phaseOf, pointerMessages, pressedDraggable, releasedPointer, settle, splitterAttributes, takeEscape };

package/dist/drop-zone/drop-zone.d.ts

@@ -0,0 +1,119 @@
+import { Schema } from "effect";
+import { Html } from "foldkit/html";
+import * as Update from "foldkit/update";
+/** Schema for a drop zone: the `@foldkit/ui` FileDrop it is built on, which knows whether a
+ *  file hovers it. */
+export declare const Model: Schema.Struct<{
+  readonly fileDrop: Schema.Struct<{
+    readonly id: Schema.String;
+    readonly isDragOver: Schema.Boolean;
+  }>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages a drop zone can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly GotFileDropMessage: {
+    message: import("foldkit/message").MessageUnion<{
+      readonly EnteredDragZone: {};
+      readonly LeftDragZone: {};
+      readonly DroppedFiles: {
+        files: Schema.NonEmptyArray<Schema.Schema<File>>;
+      };
+      readonly DroppedNonFiles: {};
+    }>;
+  };
+}>;
+export type Message = typeof Message.Type;
+/** Union of OutMessages a drop zone reports: files dropped on it or chosen with its button,
+ *  or a drop that held no files (text, a link). */
+export declare const OutMessage: import("foldkit/message").MessageUnion<{
+  readonly ReceivedFiles: {
+    files: Schema.NonEmptyArray<Schema.Schema<File>>;
+  };
+  readonly RejectedNonFiles: {};
+}>;
+export type OutMessage = typeof OutMessage.Type;
+/** Configuration for creating a drop zone with `init`. The `id` must be unique in the
+ *  document: it is the file input's id. */
+export type InitConfig = Readonly<{
+  id: string;
+}>;
+/** Creates a drop zone with nothing over it. */
+export declare const init: (config: InitConfig) => Model;
+/** The drop zone's id, unique in the document: its file input's id. */
+export declare const id: (model: Model) => string;
+/** Processes a drop zone Message and returns the next Model, Commands and OutMessage. */
+export declare const update: (model: Model, message: Message) => Readonly<{
+  model: {
+    readonly fileDrop: {
+      readonly id: string;
+      readonly isDragOver: boolean;
+    };
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "GotFileDropMessage";
+    readonly message: {
+      readonly _tag: "DroppedFiles";
+      readonly files: readonly [File, ...File[]];
+    } | {
+      readonly _tag: "DroppedNonFiles";
+    } | {
+      readonly _tag: "EnteredDragZone";
+    } | {
+      readonly _tag: "LeftDragZone";
+    };
+  }, never>;
+  outMessage?: {
+    readonly _tag: "ReceivedFiles";
+    readonly files: readonly [File, ...File[]];
+  } | {
+    readonly _tag: "RejectedNonFiles";
+  };
+}>;
+/** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
+export type ViewInputs = Readonly<{
+  /** Pixel caps: `"Drop files here"`. */
+  title: string;
+  /** One sentence: what happens to what is dropped. Markup here carries no handlers: a
+   *  Submodel's viewInputs may hold functions only at the top level. */
+  body?: ReadonlyArray<Html | string>;
+  /** Under the sentence: a word that says what the last drop did. 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 a handler in it (an undo) dispatches the parent's Message. */
+  toStatusView?: () => readonly Html[];
+}>;
+/**
+ * A dashed box that goes solid and tinted while a file hovers it, with a button to choose
+ * files for those who cannot drag, built on `@foldkit/ui`'s FileDrop: `div.drop-zone`
+ * (FileDrop sets `data-drag-over` on it while a file hovers) holding a glyph box, the title
+ * and a sentence, and `label.btn.small` around a visually hidden file input, so the button's
+ * word is the input's name.
+ */
+export declare const view: import("foldkit/submodel").View<{
+  readonly fileDrop: {
+    readonly id: string;
+    readonly isDragOver: boolean;
+  };
+}, {
+  readonly _tag: "GotFileDropMessage";
+  readonly message: {
+    readonly _tag: "DroppedFiles";
+    readonly files: readonly [File, ...File[]];
+  } | {
+    readonly _tag: "DroppedNonFiles";
+  } | {
+    readonly _tag: "EnteredDragZone";
+  } | {
+    readonly _tag: "LeftDragZone";
+  };
+}, Readonly<{
+  /** Pixel caps: `"Drop files here"`. */
+  title: string;
+  /** One sentence: what happens to what is dropped. Markup here carries no handlers: a
+   *  Submodel's viewInputs may hold functions only at the top level. */
+  body?: ReadonlyArray<Html | string>;
+  /** Under the sentence: a word that says what the last drop did. 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 a handler in it (an undo) dispatches the parent's Message. */
+  toStatusView?: () => readonly Html[];
+}>>;

package/dist/drop-zone/drop-zone.js

@@ -0,0 +1,64 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../glyph/glyph.js";
+import { Option, Schema } from "effect";
+import { defineMessageUnion } from "foldkit/message";
+import { FileDrop } from "@foldkit/ui";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Update from "foldkit/update";
+import * as File from "foldkit/file";
+// src/drop-zone/drop-zone.ts
+/** Schema for a drop zone: the `@foldkit/ui` FileDrop it is built on, which knows whether a
+*  file hovers it. */
+const Model = Schema.Struct({ fileDrop: FileDrop.Model });
+/** Union of all Messages a drop zone can produce. */
+const Message = defineMessageUnion({ GotFileDropMessage: { message: FileDrop.Message } });
+/** Union of OutMessages a drop zone reports: files dropped on it or chosen with its button,
+*  or a drop that held no files (text, a link). */
+const OutMessage = defineMessageUnion({
+	ReceivedFiles: { files: Schema.NonEmptyArray(File.File) },
+	RejectedNonFiles: {}
+});
+/** Creates a drop zone with nothing over it. */
+const init = (config) => (__foldkitBrandViewResult(({ fileDrop: FileDrop.init({ id: config.id }) }), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#init"));
+/** The drop zone's id, unique in the document: its file input's id. */
+const id = (model) => __foldkitBrandViewResult((model.fileDrop.id), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#id");
+const foldFileDrop = Update.foldChild({
+	update: FileDrop.update,
+	read: (model) => __foldkitBrandViewResult((Option.some(model.fileDrop)), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#read"),
+	write: (model, nextFileDrop) => __foldkitBrandViewResult((modifyFields(model, { fileDrop: () => __foldkitBrandViewResult((nextFileDrop), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#fileDrop") })), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#write"),
+	toParentMessage: (message) => __foldkitBrandViewResult((Message.GotFileDropMessage({ message })), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#toParentMessage"),
+	toParentOutMessage: FileDrop.OutMessage.match({
+		ReceivedFiles: ({ files }) => __foldkitBrandViewResult((OutMessage.ReceivedFiles({ files })), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#ReceivedFiles"),
+		RejectedNonFiles: () => __foldkitBrandViewResult((OutMessage.RejectedNonFiles()), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#RejectedNonFiles")
+	})
+});
+/** Processes a drop zone Message and returns the next Model, Commands and OutMessage. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, { GotFileDropMessage: ({ message: fileDropMessage }) => __foldkitBrandViewResult((foldFileDrop(model, fileDropMessage)), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#GotFileDropMessage") })), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#update");
+/**
+* A dashed box that goes solid and tinted while a file hovers it, with a button to choose
+* files for those who cannot drag, built on `@foldkit/ui`'s FileDrop: `div.drop-zone`
+* (FileDrop sets `data-drag-over` on it while a file hovers) holding a glyph box, the title
+* and a sentence, and `label.btn.small` around a visually hidden file input, so the button's
+* word is the input's name.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { title, body = [], toStatusView = () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#anonymous~2") } = viewInputs;
+	const toView = (groups) => __foldkitBrandViewResult((h.div([...groups.root, h.Class("drop-zone")], [
+		h.span([h.Class("drop-zone-glyph")], [view$1({ name: "upload" }, h)]),
+		h.p([], [h.strong([], [title]), ...body]),
+		...toStatusView(),
+		h.label([h.Class("btn small")], ["choose files", h.input(groups.input)])
+	])), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#toView");
+	return __foldkitBrandViewResult((h.submodel({
+		slotId: id(model),
+		model: model.fileDrop,
+		view: FileDrop.view,
+		viewInputs: {
+			toView,
+			multiple: true
+		},
+		toParentMessage: (message) => __foldkitBrandViewResult((Message.GotFileDropMessage({ message })), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#toParentMessage~2")
+	})), "@gjermundgaraba/pixel-paper/drop-zone/drop-zone.js#anonymous");
+});
+export { Message, Model, OutMessage, id, init, update, view };

package/dist/drop-zone/index.d.ts

@@ -0,0 +1,5 @@
+import { InitConfig, Message, Model, OutMessage, ViewInputs, id, init, update, view } from "./drop-zone.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/drop-zone/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 "./drop-zone.js";
+// src/drop-zone/index.ts
+var drop_zone_exports = /* @__PURE__ */ __exportAll({
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/drop-zone/index.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/drop-zone/index.js#Model"),
+	OutMessage: () => __foldkitBrandViewResult((OutMessage), "@gjermundgaraba/pixel-paper/drop-zone/index.js#OutMessage"),
+	id: () => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/drop-zone/index.js#id"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/drop-zone/index.js#init"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/drop-zone/index.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/drop-zone/index.js#view")
+});
+export { Message, Model, OutMessage, drop_zone_exports, id, init, update, view };

package/dist/empty-state/empty-state.d.ts

@@ -0,0 +1,18 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering an empty state with `view`. */
+export type ViewConfig = Readonly<{
+  /** Pixel caps: what is missing (`"Nothing queued"`). */
+  title: string;
+  /** The title's element, which looks the same either way. A heading at this level where the
+   *  empty state is the page's or a section's main content: `3` inside a Panel, whose title is
+   *  an `h2`; `1` for a gate or a missing page. `"Strong"` where it is not (a chart with no
+   *  data, a picture of the state). Required, because the two look alike and only the outline
+   *  tells them apart. */
+  headingLevel: 1 | 2 | 3 | 4 | 5 | 6 | "Strong";
+  /** One sentence: how it gets filled. */
+  body?: ReadonlyArray<Html | string>;
+  /** What fills it: a button under the sentence. */
+  actions?: ReadonlyArray<Html | string>;
+}>;
+/** What a panel says when it has nothing to show, centred where its content would be. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/empty-state/empty-state.js

@@ -0,0 +1,16 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array } from "effect";
+// src/empty-state/empty-state.ts
+/** What a panel says when it has nothing to show, centred where its content would be. */
+const view = (config, h) => {
+	const { title, headingLevel, body = [], actions = [] } = config;
+	return __foldkitBrandViewResult((h.div([h.Class("empty")], [
+		headingLevel === "Strong" ? h.strong([h.Class("empty-title")], [title]) : h[`h${headingLevel}`]([h.Class("empty-title")], [title]),
+		...Array.match(body, {
+			onEmpty: () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/empty-state/empty-state.js#onEmpty"),
+			onNonEmpty: (sentence) => __foldkitBrandViewResult(([h.p([], sentence)]), "@gjermundgaraba/pixel-paper/empty-state/empty-state.js#onNonEmpty")
+		}),
+		...actions
+	])), "@gjermundgaraba/pixel-paper/empty-state/empty-state.js#view");
+};
+export { view };

package/dist/empty-state/index.d.ts

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

package/dist/empty-state/index.js

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

package/dist/error-summary/error-summary.d.ts

@@ -0,0 +1,34 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One field that failed: its control's id and what to do about it. One entry per control:
+ *  the summary counts entries as fields and keys each by its `id`, so a caller with several
+ *  messages for one control joins them into one entry. */
+export type FieldError = Readonly<{
+  /** The control's id (a Field's, a Choice's box): the link goes there. */
+  id: string;
+  /** What is wrong and how to put it right: "Enter the owner name." */
+  message: string;
+}>;
+/** Configuration for rendering an error summary with `view`. */
+export type ViewConfig = Readonly<{
+  /** Unique in the document: the form's failed submit focuses it by this id. */
+  id: string;
+  /** The fields that failed, one entry per control, in the order of the form. With none,
+   *  nothing renders. */
+  errors: readonly FieldError[];
+}>;
+/**
+ * Why a form was not sent, above its fields: the error Notice with a headline that counts the
+ * failed fields and a link to each, one entry per control. Render it inside the form when a
+ * submit fails, from the errors found at that submit, not live state, and mark the same fields
+ * invalid; it holds still while they are put right, until the next submit.
+ *
+ * It is no live region, since one inserted with its words in it is not reliably read: the
+ * form's update, at every failed submit, returns `Focus` with the summary's `id`, which moves
+ * focus to it once it has rendered and so reads it, also when it was already showing. A
+ * refusal that arrives after the submit (a server that turns a field down while the save is
+ * busy) is a failed submit like any other: render the summary from it and focus it.
+ *
+ * Each link is a fragment link to its field; a Foldkit application's fragment handler moves
+ * focus there (`SkipLink.ScrollToFragment`).
+ */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/error-summary/error-summary.js

@@ -0,0 +1,33 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { toneGlyphView } from "../notice/notice.js";
+import { LOCALE } from "../locale/locale.js";
+import { Array } from "effect";
+// src/error-summary/error-summary.ts
+const headline = (count) => __foldkitBrandViewResult((count === 1 ? "1 field needs attention" : `${count.toLocaleString(LOCALE)} fields need attention`), "@gjermundgaraba/pixel-paper/error-summary/error-summary.js#headline");
+/**
+* Why a form was not sent, above its fields: the error Notice with a headline that counts the
+* failed fields and a link to each, one entry per control. Render it inside the form when a
+* submit fails, from the errors found at that submit, not live state, and mark the same fields
+* invalid; it holds still while they are put right, until the next submit.
+*
+* It is no live region, since one inserted with its words in it is not reliably read: the
+* form's update, at every failed submit, returns `Focus` with the summary's `id`, which moves
+* focus to it once it has rendered and so reads it, also when it was already showing. A
+* refusal that arrives after the submit (a server that turns a field down while the save is
+* busy) is a failed submit like any other: render the summary from it and focus it.
+*
+* Each link is a fragment link to its field; a Foldkit application's fragment handler moves
+* focus there (`SkipLink.ScrollToFragment`).
+*/
+const view = (config, h) => {
+	const { id, errors } = config;
+	return __foldkitBrandViewResult((Array.match(errors, {
+		onEmpty: () => __foldkitBrandViewResult((h.empty), "@gjermundgaraba/pixel-paper/error-summary/error-summary.js#onEmpty"),
+		onNonEmpty: (failed) => __foldkitBrandViewResult((h.div([
+			h.Id(id),
+			h.Tabindex(-1),
+			h.Class("notice error error-summary")
+		], [toneGlyphView({ tone: "Error" }, h), h.div([], [h.strong([], [headline(failed.length)]), h.ul([], Array.map(failed, ({ id: fieldId, message }) => __foldkitBrandViewResult((h.keyed("li")(fieldId, [], [h.a([h.Href(`#${fieldId}`)], [message])])), "@gjermundgaraba/pixel-paper/error-summary/error-summary.js#anonymous")))])])), "@gjermundgaraba/pixel-paper/error-summary/error-summary.js#onNonEmpty")
+	})), "@gjermundgaraba/pixel-paper/error-summary/error-summary.js#view");
+};
+export { view };

package/dist/error-summary/index.d.ts

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

package/dist/error-summary/index.js

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

package/dist/field/field.d.ts

@@ -0,0 +1,35 @@
+import { Attributes } from "../attributes/attributes.js";
+import { Attribute, Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
+/** Configuration for rendering a text 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;
+  /** A 2px ink box: the field that is the whole job of its form. A date is always boxed. */
+  isBoxed?: boolean;
+  /** Code and identifiers: the system monospace. */
+  isMono?: boolean;
+  /** The label is for screen readers only (`.sr-only`): a field whose place says what it is,
+   *  such as a browser's address bar. It still names the input. */
+  isLabelHidden?: boolean;
+  /** The input's type (`"date"` for the browser's date control, always boxed); text when not
+   *  given. */
+  type?: string;
+  /** Further attributes for the `<input>`, such as a Dialog's `initialFocus` group; never a
+   *  class. */
+  inputAttributes?: Attributes<Message>;
+}>;
+/** A labelled text input with its help line, built on `@foldkit/ui`'s `Input`: the label
+ *  names the input, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  The input is boxless, a dotted baseline that turns solid ink on focus. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/field/field.js

@@ -0,0 +1,34 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Input } from "@foldkit/ui";
+// src/field/field.ts
+const errorId = (id) => __foldkitBrandViewResult((`${id}-error`), "@gjermundgaraba/pixel-paper/field/field.js#errorId");
+const errorView = (id, error, h) => __foldkitBrandViewResult((error === void 0 ? [] : [h.p([h.Id(errorId(id)), h.Class("field-error")], [error])]), "@gjermundgaraba/pixel-paper/field/field.js#errorView");
+const describedByError = (id, error, hasHelp, h) => __foldkitBrandViewResult((error === void 0 ? [] : [h.AriaDescribedBy(hasHelp ? `${errorId(id)} ${Input.descriptionId(id)}` : errorId(id))]), "@gjermundgaraba/pixel-paper/field/field.js#describedByError");
+const controlAttributes = (id, error, help, isRequired, h) => __foldkitBrandViewResult(([...describedByError(id, error, help !== void 0, h), ...isRequired ? [h.AriaRequired(true)] : []]), "@gjermundgaraba/pixel-paper/field/field.js#controlAttributes");
+const helpView = (help, description, h) => __foldkitBrandViewResult((help === void 0 ? [] : [h.p([...description, h.Class("field-help")], [help])]), "@gjermundgaraba/pixel-paper/field/field.js#helpView");
+/** A labelled text input with its help line, built on `@foldkit/ui`'s `Input`: the label
+*  names the input, the help line describes it (`aria-describedby`), an `error` sets
+*  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+*  The input is boxless, a dotted baseline that turns solid ink on focus. */
+const view = (config, h) => {
+	const { id, label, value, onInput, help, error, isRequired = false, isBoxed = false, isMono = false, isLabelHidden = false, type, inputAttributes = [] } = config;
+	return __foldkitBrandViewResult((Input.view({
+		id,
+		value,
+		onInput,
+		isInvalid: error !== void 0,
+		...type !== void 0 && { type },
+		hasDescription: help !== void 0,
+		toView: (groups) => __foldkitBrandViewResult((h.div([h.Class(`field${isBoxed || type === "date" ? " boxed" : ""}${isMono ? " mono" : ""}`)], [
+			h.label([...groups.label, ...isLabelHidden ? [h.Class("sr-only")] : []], [label]),
+			h.input([
+				...inputAttributes,
+				...groups.input,
+				...controlAttributes(id, error, help, isRequired, h)
+			]),
+			...errorView(id, error, h),
+			...helpView(help, groups.description, h)
+		])), "@gjermundgaraba/pixel-paper/field/field.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/field/field.js#view");
+};
+export { controlAttributes, errorView, helpView, view };

package/dist/field/index.d.ts

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

package/dist/field/index.js

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

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

@@ -0,0 +1,8 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a field grid with `view`. */
+export type ViewConfig = Readonly<{
+  /** Fields. */
+  body: ReadonlyArray<Html | string>;
+}>;
+/** Fields side by side while they fit, 160px at least each. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/field-grid/field-grid.js

@@ -0,0 +1,8 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/field-grid/field-grid.ts
+/** Fields side by side while they fit, 160px at least each. */
+const view = (config, h) => {
+	const { body } = config;
+	return __foldkitBrandViewResult((h.div([h.Class("field-grid")], body)), "@gjermundgaraba/pixel-paper/field-grid/field-grid.js#view");
+};
+export { view };

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

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

package/dist/field-grid/index.js

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

package/dist/fields/fields.js

@@ -0,0 +1,9 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/fields/fields.ts
+/** A form's fields, a column 14px apart (a body's gap), in one unnamed `<fieldset>` that
+*  `isBusy` disables. */
+const view = (config, h) => {
+	const { body, isBusy = false } = config;
+	return __foldkitBrandViewResult((h.fieldset([...isBusy ? [h.Disabled(true), h.AriaBusy(true)] : [], h.Class("stack gap-m")], body)), "@gjermundgaraba/pixel-paper/fields/fields.js#view");
+};
+export { view };