@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/tips/tips.d.ts

@@ -0,0 +1,339 @@
+import { Effect, Option, Schema } from "effect";
+import "foldkit/command";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
+/** Schema for the page's one tip layer. `version` counts its waits, and tells the current one
+ *  from an earlier one whose Command is still out. */
+export declare const Model: Schema.Struct<{
+  readonly id: Schema.String;
+  readonly version: Schema.Finite;
+  readonly state: import("foldkit/schema").TaggedUnion<{
+    readonly Cold: {};
+    readonly Waiting: {
+      text: Schema.String;
+      maybeKey: Schema.Option<Schema.String>;
+      side: Schema.Literals<readonly ["Top", "Right"]>;
+    };
+    readonly Shown: {
+      text: Schema.String;
+      maybeKey: Schema.Option<Schema.String>;
+      side: Schema.Literals<readonly ["Top", "Right"]>;
+      trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
+    };
+    readonly Leaving: {
+      text: Schema.String;
+      maybeKey: Schema.Option<Schema.String>;
+      side: Schema.Literals<readonly ["Top", "Right"]>;
+      trigger: Schema.Literals<readonly ["Pointer", "Focus"]>;
+    };
+    readonly Warm: {};
+  }>;
+}>;
+export type Model = typeof Model.Type;
+/** Union of all Messages the tip layer can produce. */
+export declare const Message: import("foldkit/message").MessageUnion<{
+  readonly EnteredTipTarget: {
+    text: Schema.String;
+    maybeKey: Schema.Option<Schema.String>;
+    side: Schema.Literals<readonly ["Top", "Right"]>;
+  };
+  readonly LeftTipTarget: {};
+  readonly EnteredTip: {};
+  readonly FocusedTipTarget: {
+    text: Schema.String;
+    maybeKey: Schema.Option<Schema.String>;
+    side: Schema.Literals<readonly ["Top", "Right"]>;
+  };
+  readonly BlurredTipTarget: {};
+  readonly PressedPointer: {};
+  readonly PressedKey: {};
+  readonly CompletedWaitBeforeShowing: {
+    version: Schema.Finite;
+  };
+  readonly CompletedWaitBeforeHiding: {
+    version: Schema.Finite;
+  };
+  readonly CompletedWaitBeforeCooling: {
+    version: Schema.Finite;
+  };
+  readonly CompletedShowTip: {};
+  readonly CompletedHideTip: {};
+}>;
+export type Message = typeof Message.Type;
+/** Configuration for creating the tip layer with `init`. The `id` is the tip element's. */
+export type InitConfig = Readonly<{
+  id: string;
+}>;
+/** Creates the tip layer with no tip. */
+export declare const init: (config: InitConfig) => Model;
+/** The tip element's id, unique in the document. */
+export declare const id: (model: Model) => string;
+/** Processes a tip layer Message and returns the next Model and Commands. */
+export declare const update: (model: Model, message: Message) => Readonly<{
+  model: {
+    readonly id: string;
+    readonly version: number;
+    readonly state: {
+      readonly _tag: "Cold";
+    } | {
+      readonly _tag: "Leaving";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+      readonly trigger: "Focus" | "Pointer";
+    } | {
+      readonly _tag: "Shown";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+      readonly trigger: "Focus" | "Pointer";
+    } | {
+      readonly _tag: "Waiting";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+    } | {
+      readonly _tag: "Warm";
+    };
+  };
+  commands?: Update.Commands<{
+    readonly _tag: "CompletedShowTip";
+  } | {
+    readonly _tag: "CompletedHideTip";
+  } | {
+    readonly _tag: "CompletedWaitBeforeShowing";
+    readonly version: number;
+  } | {
+    readonly _tag: "CompletedWaitBeforeHiding";
+    readonly version: number;
+  } | {
+    readonly _tag: "CompletedWaitBeforeCooling";
+    readonly version: number;
+  } | {
+    readonly _tag: "BlurredTipTarget";
+  } | {
+    readonly _tag: "EnteredTip";
+  } | {
+    readonly _tag: "EnteredTipTarget";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+  } | {
+    readonly _tag: "FocusedTipTarget";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+  } | {
+    readonly _tag: "LeftTipTarget";
+  } | {
+    readonly _tag: "PressedKey";
+  } | {
+    readonly _tag: "PressedPointer";
+  }, never>;
+  outMessage?: never;
+}>;
+/** The page's pointer, focus and keys, read for the tip: lift it into the application's
+ *  Subscriptions with a key prefix of the parent's that no other record on the page uses
+ *  (`subscriptions("tip")` is keyed `tipPointerAndFocus` and `tipKeys`). Keys are listened to
+ *  only while a tip shows. */
+export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) => {
+  readonly pointerAndFocus: Subscription.EntryWithoutKeepAlive<{
+    readonly id: string;
+    readonly version: number;
+    readonly state: {
+      readonly _tag: "Cold";
+    } | {
+      readonly _tag: "Leaving";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+      readonly trigger: "Focus" | "Pointer";
+    } | {
+      readonly _tag: "Shown";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+      readonly trigger: "Focus" | "Pointer";
+    } | {
+      readonly _tag: "Waiting";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+    } | {
+      readonly _tag: "Warm";
+    };
+  }, {
+    readonly _tag: "CompletedShowTip";
+  } | {
+    readonly _tag: "CompletedHideTip";
+  } | {
+    readonly _tag: "CompletedWaitBeforeShowing";
+    readonly version: number;
+  } | {
+    readonly _tag: "CompletedWaitBeforeHiding";
+    readonly version: number;
+  } | {
+    readonly _tag: "CompletedWaitBeforeCooling";
+    readonly version: number;
+  } | {
+    readonly _tag: "BlurredTipTarget";
+  } | {
+    readonly _tag: "EnteredTip";
+  } | {
+    readonly _tag: "EnteredTipTarget";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+  } | {
+    readonly _tag: "FocusedTipTarget";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+  } | {
+    readonly _tag: "LeftTipTarget";
+  } | {
+    readonly _tag: "PressedKey";
+  } | {
+    readonly _tag: "PressedPointer";
+  }, {
+    readonly tipId: string;
+  }, never> & {
+    readonly __subscription: never;
+  };
+  readonly keys: Subscription.EntryWithoutKeepAlive<{
+    readonly id: string;
+    readonly version: number;
+    readonly state: {
+      readonly _tag: "Cold";
+    } | {
+      readonly _tag: "Leaving";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+      readonly trigger: "Focus" | "Pointer";
+    } | {
+      readonly _tag: "Shown";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+      readonly trigger: "Focus" | "Pointer";
+    } | {
+      readonly _tag: "Waiting";
+      readonly text: string;
+      readonly maybeKey: Option.Option<string>;
+      readonly side: "Right" | "Top";
+    } | {
+      readonly _tag: "Warm";
+    };
+  }, {
+    readonly _tag: "CompletedShowTip";
+  } | {
+    readonly _tag: "CompletedHideTip";
+  } | {
+    readonly _tag: "CompletedWaitBeforeShowing";
+    readonly version: number;
+  } | {
+    readonly _tag: "CompletedWaitBeforeHiding";
+    readonly version: number;
+  } | {
+    readonly _tag: "CompletedWaitBeforeCooling";
+    readonly version: number;
+  } | {
+    readonly _tag: "BlurredTipTarget";
+  } | {
+    readonly _tag: "EnteredTip";
+  } | {
+    readonly _tag: "EnteredTipTarget";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+  } | {
+    readonly _tag: "FocusedTipTarget";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+  } | {
+    readonly _tag: "LeftTipTarget";
+  } | {
+    readonly _tag: "PressedKey";
+  } | {
+    readonly _tag: "PressedPointer";
+  }, {
+    readonly maybeTrigger: Option.Option<"Focus" | "Pointer">;
+  }, never> & {
+    readonly __subscription: never;
+  };
+} extends (infer T) ? { readonly [Key in keyof T as `${Prefix}${Capitalize<Key>}`]: T[Key]; } : never;
+/**
+ * The page's one tip: `div.tip[popover="manual"][aria-hidden="true"]`, which shows the words
+ * of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip), then the
+ * key in its `data-tip-key` where it has one (an IconButton's `keyHint`). Render it
+ * once, beside the Announcer, and lift `subscriptions(keyPrefix)`. It opens on a resting
+ * pointer after a moment (at once while another has just closed), never on touch, and on
+ * keyboard focus; it can be hovered; leaving, blur, a press or any key closes it, and Escape
+ * closes a tip keyboard focus brought up and nothing else.
+ *
+ * Built as a page-level Submodel rather than over `@foldkit/ui`'s Tooltip, which is one
+ * Submodel per control and describes its control (`aria-describedby`). The Tip Rule is the
+ * opposite: a tip says its control's accessible name and nothing else, so it stays out of the
+ * accessibility tree, and any control takes one by carrying `data-tip`.
+ */
+export declare const view: import("foldkit/submodel").View<{
+  readonly id: string;
+  readonly version: number;
+  readonly state: {
+    readonly _tag: "Cold";
+  } | {
+    readonly _tag: "Leaving";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+    readonly trigger: "Focus" | "Pointer";
+  } | {
+    readonly _tag: "Shown";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+    readonly trigger: "Focus" | "Pointer";
+  } | {
+    readonly _tag: "Waiting";
+    readonly text: string;
+    readonly maybeKey: Option.Option<string>;
+    readonly side: "Right" | "Top";
+  } | {
+    readonly _tag: "Warm";
+  };
+}, {
+  readonly _tag: "CompletedShowTip";
+} | {
+  readonly _tag: "CompletedHideTip";
+} | {
+  readonly _tag: "CompletedWaitBeforeShowing";
+  readonly version: number;
+} | {
+  readonly _tag: "CompletedWaitBeforeHiding";
+  readonly version: number;
+} | {
+  readonly _tag: "CompletedWaitBeforeCooling";
+  readonly version: number;
+} | {
+  readonly _tag: "BlurredTipTarget";
+} | {
+  readonly _tag: "EnteredTip";
+} | {
+  readonly _tag: "EnteredTipTarget";
+  readonly text: string;
+  readonly maybeKey: Option.Option<string>;
+  readonly side: "Right" | "Top";
+} | {
+  readonly _tag: "FocusedTipTarget";
+  readonly text: string;
+  readonly maybeKey: Option.Option<string>;
+  readonly side: "Right" | "Top";
+} | {
+  readonly _tag: "LeftTipTarget";
+} | {
+  readonly _tag: "PressedKey";
+} | {
+  readonly _tag: "PressedPointer";
+}, void>;

package/dist/tips/tips.js

@@ -0,0 +1,308 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { prefixKeys } from "../subscription/prefix-keys.js";
+import { htmlElement } from "../dom/html-element.js";
+import { Array, Duration, Effect, Equal, Match, Number, Option, Schema, Stream, pipe } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import * as Render from "foldkit/render";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
+import * as Dom from "foldkit/dom";
+import { defineTaggedUnion } from "foldkit/schema";
+// src/tips/tips.ts
+const Side = Schema.Literals(["Top", "Right"]);
+/** What brought the tip: a resting pointer or keyboard focus. */
+const Trigger = Schema.Literals(["Pointer", "Focus"]);
+const Words = {
+	text: Schema.String,
+	maybeKey: Schema.Option(Schema.String),
+	side: Side
+};
+const ShownWords = {
+	...Words,
+	trigger: Trigger
+};
+const TipState = defineTaggedUnion({
+	Cold: {},
+	Waiting: Words,
+	Shown: ShownWords,
+	Leaving: ShownWords,
+	Warm: {}
+});
+/** Schema for the page's one tip layer. `version` counts its waits, and tells the current one
+*  from an earlier one whose Command is still out. */
+const Model = Schema.Struct({
+	id: Schema.String,
+	version: Schema.Finite,
+	state: TipState
+});
+/** Union of all Messages the tip layer can produce. */
+const Message = defineMessageUnion({
+	EnteredTipTarget: Words,
+	LeftTipTarget: {},
+	EnteredTip: {},
+	FocusedTipTarget: Words,
+	BlurredTipTarget: {},
+	PressedPointer: {},
+	PressedKey: {},
+	CompletedWaitBeforeShowing: { version: Schema.Finite },
+	CompletedWaitBeforeHiding: { version: Schema.Finite },
+	CompletedWaitBeforeCooling: { version: Schema.Finite },
+	CompletedShowTip: {},
+	CompletedHideTip: {}
+});
+/** Creates the tip layer with no tip. */
+const init = (config) => (__foldkitBrandViewResult(({
+	id: config.id,
+	version: 0,
+	state: TipState.Cold()
+}), "@gjermundgaraba/pixel-paper/tips/tips.js#init"));
+/** The tip element's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.id), "@gjermundgaraba/pixel-paper/tips/tips.js#id");
+const maybeShownTrigger = (model) => __foldkitBrandViewResult((Match.value(model.state).pipe(Match.withReturnType(), Match.tag("Shown", "Leaving", ({ trigger }) => __foldkitBrandViewResult((Option.some(trigger)), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~2")))), "@gjermundgaraba/pixel-paper/tips/tips.js#maybeShownTrigger");
+const REST = Duration.millis(400);
+const GRACE = Duration.millis(120);
+const WARMTH = Duration.millis(400);
+const TIP_ATTRIBUTE = "data-tip";
+const TIP_KEY_ATTRIBUTE = "data-tip-key";
+const TIP_SELECTOR = `[${TIP_ATTRIBUTE}]`;
+const hasText = (element, text) => __foldkitBrandViewResult((element.isConnected && element.getAttribute(TIP_ATTRIBUTE) === text), "@gjermundgaraba/pixel-paper/tips/tips.js#hasText");
+const findTipTarget = (trigger, text) => __foldkitBrandViewResult((Match.value(trigger).pipe(Match.withReturnType(), Match.when("Pointer", () => __foldkitBrandViewResult((Array.findLast(Array.fromIterable(document.querySelectorAll(`${TIP_SELECTOR}:hover`)), (element) => __foldkitBrandViewResult((hasText(element, text)), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~4"))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~3")), Match.when("Focus", () => __foldkitBrandViewResult((pipe(Option.fromNullishOr(document.activeElement), Option.flatMap((element) => __foldkitBrandViewResult((Option.fromNullishOr(element.closest(TIP_SELECTOR))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~6")), Option.filter((element) => __foldkitBrandViewResult((element.matches(":focus-visible") && hasText(element, text)), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~7")))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~5")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/tips/tips.js#findTipTarget");
+const tipElement = (tipId) => __foldkitBrandViewResult((htmlElement(`#${CSS.escape(tipId)}`)), "@gjermundgaraba/pixel-paper/tips/tips.js#tipElement");
+const hidePopover = (tip) => {
+	if (tip.matches(":popover-open")) tip.hidePopover();
+};
+/** Opens the tip on its control once the update that asked has rendered: focus that a closing
+*  dialog or menu hands back arrives while the top layer is still changing, and the control
+*  must still be on the page, and still the keyboard's or the pointer's, by then. The control
+*  is the tip's source, so its anchor. */
+const ShowTip = Command.define("ShowTip", {
+	args: {
+		tipId: Schema.String,
+		text: Schema.String,
+		trigger: Trigger
+	},
+	messages: [Message.CompletedShowTip],
+	execute: ({ tipId, text, trigger }) => __foldkitBrandViewResult((Render.afterCommit.pipe(Effect.andThen(Effect.try(() => __foldkitBrandViewResult((Option.map(Option.all({
+		tip: tipElement(tipId),
+		source: findTipTarget(trigger, text)
+	}), ({ tip, source }) => {
+		hidePopover(tip);
+		tip.showPopover({ source });
+	})), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~8"))), Effect.ignore, Effect.as(Message.CompletedShowTip()))), "@gjermundgaraba/pixel-paper/tips/tips.js#execute")
+});
+/** Closes the tip. */
+const HideTip = Command.define("HideTip", {
+	args: { tipId: Schema.String },
+	messages: [Message.CompletedHideTip],
+	execute: ({ tipId }) => __foldkitBrandViewResult((Effect.try(() => __foldkitBrandViewResult((Option.map(tipElement(tipId), hidePopover)), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~10")).pipe(Effect.ignore, Effect.as(Message.CompletedHideTip()))), "@gjermundgaraba/pixel-paper/tips/tips.js#execute~2")
+});
+/** Waits for a resting pointer. */
+const WaitBeforeShowing = Command.define("WaitBeforeShowing", {
+	args: { version: Schema.Finite },
+	messages: [Message.CompletedWaitBeforeShowing],
+	execute: ({ version }) => __foldkitBrandViewResult((Effect.sleep(REST).pipe(Effect.as(Message.CompletedWaitBeforeShowing({ version })))), "@gjermundgaraba/pixel-paper/tips/tips.js#execute~3")
+});
+/** Waits for a pointer crossing onto the tip. */
+const WaitBeforeHiding = Command.define("WaitBeforeHiding", {
+	args: { version: Schema.Finite },
+	messages: [Message.CompletedWaitBeforeHiding],
+	execute: ({ version }) => __foldkitBrandViewResult((Effect.sleep(GRACE).pipe(Effect.as(Message.CompletedWaitBeforeHiding({ version })))), "@gjermundgaraba/pixel-paper/tips/tips.js#execute~4")
+});
+/** Waits out the moment after a tip closes in which the next opens at once. */
+const WaitBeforeCooling = Command.define("WaitBeforeCooling", {
+	args: { version: Schema.Finite },
+	messages: [Message.CompletedWaitBeforeCooling],
+	execute: ({ version }) => __foldkitBrandViewResult((Effect.sleep(WARMTH).pipe(Effect.as(Message.CompletedWaitBeforeCooling({ version })))), "@gjermundgaraba/pixel-paper/tips/tips.js#execute~5")
+});
+const wordsOf = ({ text, maybeKey, side }) => (__foldkitBrandViewResult(({
+	text,
+	maybeKey,
+	side
+}), "@gjermundgaraba/pixel-paper/tips/tips.js#wordsOf"));
+const show = (model, words, trigger) => (__foldkitBrandViewResult(({
+	model: modifyFields(model, { state: () => __foldkitBrandViewResult((TipState.Shown({
+		...wordsOf(words),
+		trigger
+	})), "@gjermundgaraba/pixel-paper/tips/tips.js#state") }),
+	commands: [ShowTip({
+		tipId: model.id,
+		text: words.text,
+		trigger
+	})]
+}), "@gjermundgaraba/pixel-paper/tips/tips.js#show"));
+const hide = (model) => {
+	const nextVersion = Number.increment(model.version);
+	return __foldkitBrandViewResult(({
+		model: modifyFields(model, {
+			version: () => __foldkitBrandViewResult((nextVersion), "@gjermundgaraba/pixel-paper/tips/tips.js#version"),
+			state: () => __foldkitBrandViewResult((TipState.Warm()), "@gjermundgaraba/pixel-paper/tips/tips.js#state~2")
+		}),
+		commands: [HideTip({ tipId: model.id }), WaitBeforeCooling({ version: nextVersion })]
+	}), "@gjermundgaraba/pixel-paper/tips/tips.js#hide");
+};
+const wait = (model, words) => {
+	const nextVersion = Number.increment(model.version);
+	return __foldkitBrandViewResult(({
+		model: modifyFields(model, {
+			version: () => __foldkitBrandViewResult((nextVersion), "@gjermundgaraba/pixel-paper/tips/tips.js#version~2"),
+			state: () => __foldkitBrandViewResult((TipState.Waiting(wordsOf(words))), "@gjermundgaraba/pixel-paper/tips/tips.js#state~3")
+		}),
+		commands: [WaitBeforeShowing({ version: nextVersion })]
+	}), "@gjermundgaraba/pixel-paper/tips/tips.js#wait");
+};
+const leave = (model, shown) => {
+	const nextVersion = Number.increment(model.version);
+	return __foldkitBrandViewResult(({
+		model: modifyFields(model, {
+			version: () => __foldkitBrandViewResult((nextVersion), "@gjermundgaraba/pixel-paper/tips/tips.js#version~3"),
+			state: () => __foldkitBrandViewResult((TipState.Leaving({
+				...wordsOf(shown),
+				trigger: shown.trigger
+			})), "@gjermundgaraba/pixel-paper/tips/tips.js#state~4")
+		}),
+		commands: [WaitBeforeHiding({ version: nextVersion })]
+	}), "@gjermundgaraba/pixel-paper/tips/tips.js#leave");
+};
+const cool = (model) => (__foldkitBrandViewResult(({ model: modifyFields(model, { state: () => __foldkitBrandViewResult((TipState.Cold()), "@gjermundgaraba/pixel-paper/tips/tips.js#state~5") }) }), "@gjermundgaraba/pixel-paper/tips/tips.js#cool"));
+const dismiss = (model) => __foldkitBrandViewResult((TipState.match(model.state, {
+	Cold: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#Cold")),
+	Waiting: () => __foldkitBrandViewResult((cool(model)), "@gjermundgaraba/pixel-paper/tips/tips.js#Waiting"),
+	Shown: () => __foldkitBrandViewResult((hide(model)), "@gjermundgaraba/pixel-paper/tips/tips.js#Shown"),
+	Leaving: () => __foldkitBrandViewResult((hide(model)), "@gjermundgaraba/pixel-paper/tips/tips.js#Leaving"),
+	Warm: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#Warm"))
+})), "@gjermundgaraba/pixel-paper/tips/tips.js#dismiss");
+const entered = (model, words) => __foldkitBrandViewResult((TipState.match(model.state, {
+	Cold: () => __foldkitBrandViewResult((wait(model, words)), "@gjermundgaraba/pixel-paper/tips/tips.js#Cold~2"),
+	Waiting: (waiting) => __foldkitBrandViewResult((waiting.text === words.text ? { model } : wait(model, words)), "@gjermundgaraba/pixel-paper/tips/tips.js#Waiting~2"),
+	Shown: (shown) => __foldkitBrandViewResult((shown.text === words.text ? { model } : show(model, words, "Pointer")), "@gjermundgaraba/pixel-paper/tips/tips.js#Shown~2"),
+	Leaving: (leaving) => __foldkitBrandViewResult((leaving.text === words.text ? { model: modifyFields(model, { state: () => __foldkitBrandViewResult((TipState.Shown({
+		...wordsOf(words),
+		trigger: leaving.trigger
+	})), "@gjermundgaraba/pixel-paper/tips/tips.js#state~6") }) } : show(model, words, "Pointer")), "@gjermundgaraba/pixel-paper/tips/tips.js#Leaving~2"),
+	Warm: () => __foldkitBrandViewResult((show(model, words, "Pointer")), "@gjermundgaraba/pixel-paper/tips/tips.js#Warm~2")
+})), "@gjermundgaraba/pixel-paper/tips/tips.js#entered");
+/** Processes a tip layer Message and returns the next Model and Commands. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
+	EnteredTipTarget: (words) => __foldkitBrandViewResult((entered(model, wordsOf(words))), "@gjermundgaraba/pixel-paper/tips/tips.js#EnteredTipTarget"),
+	LeftTipTarget: () => __foldkitBrandViewResult((TipState.matchOrElse(model.state, {
+		Waiting: () => __foldkitBrandViewResult((cool(model)), "@gjermundgaraba/pixel-paper/tips/tips.js#Waiting~3"),
+		Shown: (shown) => __foldkitBrandViewResult((shown.trigger === "Pointer" ? leave(model, shown) : { model }), "@gjermundgaraba/pixel-paper/tips/tips.js#Shown~3")
+	}, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~11")))), "@gjermundgaraba/pixel-paper/tips/tips.js#LeftTipTarget"),
+	EnteredTip: () => __foldkitBrandViewResult((TipState.matchOrElse(model.state, { Leaving: (leaving) => (__foldkitBrandViewResult(({ model: modifyFields(model, { state: () => __foldkitBrandViewResult((TipState.Shown({
+		...wordsOf(leaving),
+		trigger: leaving.trigger
+	})), "@gjermundgaraba/pixel-paper/tips/tips.js#state~7") }) }), "@gjermundgaraba/pixel-paper/tips/tips.js#Leaving~3")) }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~12")))), "@gjermundgaraba/pixel-paper/tips/tips.js#EnteredTip"),
+	FocusedTipTarget: (words) => __foldkitBrandViewResult((show(model, wordsOf(words), "Focus")), "@gjermundgaraba/pixel-paper/tips/tips.js#FocusedTipTarget"),
+	BlurredTipTarget: () => __foldkitBrandViewResult((dismiss(model)), "@gjermundgaraba/pixel-paper/tips/tips.js#BlurredTipTarget"),
+	PressedPointer: () => __foldkitBrandViewResult((dismiss(model)), "@gjermundgaraba/pixel-paper/tips/tips.js#PressedPointer"),
+	PressedKey: () => __foldkitBrandViewResult((dismiss(model)), "@gjermundgaraba/pixel-paper/tips/tips.js#PressedKey"),
+	CompletedWaitBeforeShowing: ({ version }) => __foldkitBrandViewResult((TipState.matchOrElse(model.state, { Waiting: (waiting) => __foldkitBrandViewResult((model.version === version ? show(model, wordsOf(waiting), "Pointer") : { model }), "@gjermundgaraba/pixel-paper/tips/tips.js#Waiting~4") }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~13")))), "@gjermundgaraba/pixel-paper/tips/tips.js#CompletedWaitBeforeShowing"),
+	CompletedWaitBeforeHiding: ({ version }) => __foldkitBrandViewResult((TipState.matchOrElse(model.state, { Leaving: () => __foldkitBrandViewResult((model.version === version ? hide(model) : { model }), "@gjermundgaraba/pixel-paper/tips/tips.js#Leaving~4") }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~14")))), "@gjermundgaraba/pixel-paper/tips/tips.js#CompletedWaitBeforeHiding"),
+	CompletedWaitBeforeCooling: ({ version }) => __foldkitBrandViewResult((TipState.matchOrElse(model.state, { Warm: () => __foldkitBrandViewResult((model.version === version ? cool(model) : { model }), "@gjermundgaraba/pixel-paper/tips/tips.js#Warm~3") }, () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~15")))), "@gjermundgaraba/pixel-paper/tips/tips.js#CompletedWaitBeforeCooling"),
+	CompletedShowTip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#CompletedShowTip")),
+	CompletedHideTip: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/tips/tips.js#CompletedHideTip"))
+})), "@gjermundgaraba/pixel-paper/tips/tips.js#update");
+const sideOf = (element) => __foldkitBrandViewResult((element.closest("[aria-orientation=\"vertical\"]") === null && !getComputedStyle(element).writingMode.startsWith("vertical") ? "Top" : "Right"), "@gjermundgaraba/pixel-paper/tips/tips.js#sideOf");
+const tipTargetOf = (target) => __foldkitBrandViewResult((pipe(Option.liftPredicate(target, (node) => __foldkitBrandViewResult((node instanceof Element), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~16")), Option.flatMap((element) => __foldkitBrandViewResult((Option.fromNullishOr(element.closest(TIP_SELECTOR))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~17")), Option.flatMap((element) => __foldkitBrandViewResult((Option.map(Option.fromNullishOr(element.getAttribute(TIP_ATTRIBUTE)), (text) => (__foldkitBrandViewResult(({
+	element,
+	text,
+	maybeKey: Option.fromNullishOr(element.getAttribute(TIP_KEY_ATTRIBUTE)),
+	side: sideOf(element)
+}), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~19")))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~18")))), "@gjermundgaraba/pixel-paper/tips/tips.js#tipTargetOf");
+const pointerOverMessage = (tipId, event) => {
+	if (event.pointerType === "touch") return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/tips/tips.js#pointerOverMessage");
+	if (event.target instanceof Element && event.target.closest(`#${CSS.escape(tipId)}`) !== null) return __foldkitBrandViewResult((Option.some(Message.EnteredTip())), "@gjermundgaraba/pixel-paper/tips/tips.js#pointerOverMessage");
+	return __foldkitBrandViewResult((Option.some(Option.match(tipTargetOf(event.target), {
+		onNone: () => __foldkitBrandViewResult((Message.LeftTipTarget()), "@gjermundgaraba/pixel-paper/tips/tips.js#onNone"),
+		onSome: (target) => __foldkitBrandViewResult((Message.EnteredTipTarget(wordsOf(target))), "@gjermundgaraba/pixel-paper/tips/tips.js#onSome")
+	}))), "@gjermundgaraba/pixel-paper/tips/tips.js#pointerOverMessage");
+};
+const focusInMessage = (event) => __foldkitBrandViewResult((Option.map(Option.filter(tipTargetOf(event.target), ({ element }) => __foldkitBrandViewResult((element.matches(":focus-visible")), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~20")), (target) => __foldkitBrandViewResult((Message.FocusedTipTarget(wordsOf(target))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~21"))), "@gjermundgaraba/pixel-paper/tips/tips.js#focusInMessage");
+const focusOutMessage = (event) => __foldkitBrandViewResult((Option.map(Option.filter(tipTargetOf(event.target), ({ element }) => __foldkitBrandViewResult((!(event.relatedTarget instanceof Node && element.contains(event.relatedTarget))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~22")), () => __foldkitBrandViewResult((Message.BlurredTipTarget()), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~23"))), "@gjermundgaraba/pixel-paper/tips/tips.js#focusOutMessage");
+const isEscapeOnFocusTip = (event, trigger) => __foldkitBrandViewResult((event.key === "Escape" && trigger === "Focus"), "@gjermundgaraba/pixel-paper/tips/tips.js#isEscapeOnFocusTip");
+const keepFromMenusAndDialogs = (event) => {
+	event.preventDefault();
+	event.stopPropagation();
+};
+const keyMessage = (event, trigger) => {
+	if (event.isComposing) return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/tips/tips.js#keyMessage");
+	if (isEscapeOnFocusTip(event, trigger)) keepFromMenusAndDialogs(event);
+	return __foldkitBrandViewResult((Option.some(Message.PressedKey())), "@gjermundgaraba/pixel-paper/tips/tips.js#keyMessage");
+};
+const sameWords = (previous, next) => __foldkitBrandViewResult((previous._tag !== "EnteredTipTarget" || next._tag !== "EnteredTipTarget" || previous.text === next.text && previous.side === next.side && Equal.equals(previous.maybeKey, next.maybeKey)), "@gjermundgaraba/pixel-paper/tips/tips.js#sameWords");
+const pointerOverChanges = (tipId) => __foldkitBrandViewResult((Dom.streamFromEventFilterMap({
+	target: document,
+	type: "pointerover",
+	filterMapEvent: (event) => __foldkitBrandViewResult((pointerOverMessage(tipId, event)), "@gjermundgaraba/pixel-paper/tips/tips.js#filterMapEvent")
+}).pipe(Stream.changesWith((previous, next) => __foldkitBrandViewResult((previous._tag === next._tag && sameWords(previous, next)), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~24")))), "@gjermundgaraba/pixel-paper/tips/tips.js#pointerOverChanges");
+const tipSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({
+	pointerAndFocus: entry({ tipId: Schema.String }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ tipId: model.id }), "@gjermundgaraba/pixel-paper/tips/tips.js#modelToDependencies")),
+		dependenciesToStream: ({ tipId }) => __foldkitBrandViewResult((Stream.mergeAll([
+			pointerOverChanges(tipId),
+			Dom.streamFromEvent({
+				target: document,
+				type: "pointerdown",
+				mapEvent: () => __foldkitBrandViewResult((Message.PressedPointer()), "@gjermundgaraba/pixel-paper/tips/tips.js#mapEvent")
+			}),
+			Dom.streamFromEventFilterMap({
+				target: document,
+				type: "focusin",
+				filterMapEvent: focusInMessage
+			}),
+			Dom.streamFromEventFilterMap({
+				target: document,
+				type: "focusout",
+				filterMapEvent: focusOutMessage
+			})
+		], { concurrency: "unbounded" })), "@gjermundgaraba/pixel-paper/tips/tips.js#dependenciesToStream")
+	}),
+	keys: entry({ maybeTrigger: Schema.Option(Trigger) }, {
+		modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeTrigger: maybeShownTrigger(model) }), "@gjermundgaraba/pixel-paper/tips/tips.js#modelToDependencies~2")),
+		dependenciesToStream: ({ maybeTrigger }) => __foldkitBrandViewResult((Option.match(maybeTrigger, {
+			onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba/pixel-paper/tips/tips.js#onNone~2"),
+			onSome: (trigger) => __foldkitBrandViewResult((Dom.streamFromEventFilterMap({
+				target: document,
+				type: "keydown",
+				filterMapEvent: (event) => __foldkitBrandViewResult((keyMessage(event, trigger)), "@gjermundgaraba/pixel-paper/tips/tips.js#filterMapEvent~2"),
+				options: { capture: true }
+			})), "@gjermundgaraba/pixel-paper/tips/tips.js#onSome~2")
+		})), "@gjermundgaraba/pixel-paper/tips/tips.js#dependenciesToStream~2")
+	})
+}), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~25")));
+/** The page's pointer, focus and keys, read for the tip: lift it into the application's
+*  Subscriptions with a key prefix of the parent's that no other record on the page uses
+*  (`subscriptions("tip")` is keyed `tipPointerAndFocus` and `tipKeys`). Keys are listened to
+*  only while a tip shows. */
+const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, tipSubscriptions)), "@gjermundgaraba/pixel-paper/tips/tips.js#subscriptions");
+const maybeWordsOf = (model) => __foldkitBrandViewResult((Match.value(model.state).pipe(Match.withReturnType(), Match.tag("Waiting", "Shown", "Leaving", (words) => __foldkitBrandViewResult((Option.some(wordsOf(words))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~26")), Match.orElse(() => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~27")))), "@gjermundgaraba/pixel-paper/tips/tips.js#maybeWordsOf");
+/**
+* The page's one tip: `div.tip[popover="manual"][aria-hidden="true"]`, which shows the words
+* of any control carrying `data-tip` (IconButton, the glyph switch, a board's grip), then the
+* key in its `data-tip-key` where it has one (an IconButton's `keyHint`). Render it
+* once, beside the Announcer, and lift `subscriptions(keyPrefix)`. It opens on a resting
+* pointer after a moment (at once while another has just closed), never on touch, and on
+* keyboard focus; it can be hovered; leaving, blur, a press or any key closes it, and Escape
+* closes a tip keyboard focus brought up and nothing else.
+*
+* Built as a page-level Submodel rather than over `@foldkit/ui`'s Tooltip, which is one
+* Submodel per control and describes its control (`aria-describedby`). The Tip Rule is the
+* opposite: a tip says its control's accessible name and nothing else, so it stays out of the
+* accessibility tree, and any control takes one by carrying `data-tip`.
+*/
+const view = defineView((model, h) => {
+	const maybeWords = maybeWordsOf(model);
+	return __foldkitBrandViewResult((h.div([
+		h.Id(model.id),
+		h.Popover("manual"),
+		h.AriaHidden(true),
+		h.Class("tip"),
+		...Option.exists(maybeWords, ({ side }) => __foldkitBrandViewResult((side === "Right"), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~29")) ? [h.DataAttribute("side", "right")] : []
+	], Option.match(maybeWords, {
+		onNone: () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/tips/tips.js#onNone~3"),
+		onSome: ({ text, maybeKey }) => __foldkitBrandViewResult(([text, ...Array.fromOption(Option.map(maybeKey, (key) => __foldkitBrandViewResult((h.kbd([h.Class("key-hint")], [key])), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~30")))]), "@gjermundgaraba/pixel-paper/tips/tips.js#onSome~3")
+	}))), "@gjermundgaraba/pixel-paper/tips/tips.js#anonymous~28");
+});
+export { HideTip, Message, Model, ShowTip, TipState, Trigger, WaitBeforeCooling, WaitBeforeHiding, WaitBeforeShowing, focusOutMessage, id, init, keyMessage, pointerOverMessage, subscriptions, update, view };

package/dist/toast/index.d.ts

@@ -0,0 +1,5 @@
+import { AnnounceSlip, InitConfig, Message, Model, ShowConfig, dismiss, id, init, sceneMounts, show, update, view } from "./toast.js";
+declare namespace index_d_exports {
+  export { AnnounceSlip, InitConfig, Message, Model, ShowConfig, dismiss, id, init, sceneMounts, show, update, view };
+}
+export { AnnounceSlip, type InitConfig, Message, Model, type ShowConfig, dismiss, id, index_d_exports, init, sceneMounts, show, update, view };