foldkit-primitives 0.15.4 → 0.16.0

package/dist/dom/editable-text.js

@@ -0,0 +1,232 @@
+import { Effect, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/editable-text.ts
+const TextEdited = Schema.TaggedStruct("TextEdited", {
+	/** The field, by its marking attribute's value. */
+	field: Schema.String,
+	text: Schema.String
+});
+const TextCommitted = Schema.TaggedStruct("TextCommitted", {
+	field: Schema.String,
+	text: Schema.String
+});
+const TextCancelled = Schema.TaggedStruct("TextCancelled", {
+	field: Schema.String,
+	/** The text the field had when editing began, which the DOM shows again. */
+	initial: Schema.String
+});
+const EditAsked = Schema.TaggedStruct("EditAsked", { 
+/** A marked field, not editable yet, that was double-clicked. */
+field: Schema.String });
+/** Whether a field takes more than one line. */
+const multiline = (element) => element.getAttribute("aria-multiline") === "true";
+/**
+* A field's text. A browser ends an edited element with a line break it adds
+* itself, which is not the author's; in one line, the author's breaks are spaces.
+*/
+const textOf = (element) => {
+	const text = element.innerText.replace(/\r\n?/g, "\n").replace(/\n$/, "");
+	return multiline(element) ? text : text.replace(/\n+/g, " ");
+};
+/** Puts the caret at the end of a field, which focuses it too. */
+const caretAtEnd = (field) => {
+	field.focus();
+	const caret = document.createRange();
+	caret.selectNodeContents(field);
+	caret.collapse(false);
+	const selection = window.getSelection();
+	selection?.removeAllRanges();
+	selection?.addRange(caret);
+};
+/** Whether a key press belongs to an input method still composing, not to the field. */
+const composing = (event) => event.isComposing || event.keyCode === 229;
+/**
+* Text typed into an editable descendant of an element, as a Mount: one set of
+* listeners on the container, like `Targets`. A field is a descendant marked
+* by an attribute whose value names it, while it is `contenteditable`. The
+* view decides which one is; the Mount focuses it as it becomes so (made
+* editable, or drawn editable), with the caret at its end, and at no other
+* time. When Enter or Escape ends an edit and the view then removes the field
+* or makes it no longer editable, focus, left on nothing, comes back to the
+* container, so the next key reaches it; give the container a `tabindex`. A double-click on a marked field that is not editable yet asks for it
+* to be (`EditAsked`).
+*
+* It reads `innerText`, never `innerHTML`, so what arrives is text. A field is
+* one line unless it carries `aria-multiline="true"`: in one line, a line
+* break becomes a space. Nothing is reported while an input method composes;
+* the composed text arrives once, when it is done.
+*
+* Enter commits (Shift+Enter breaks a line in a multiline field), and so does
+* leaving the field. Escape cancels, and puts the text the field had when
+* editing began back in the DOM, since a view that stopped redrawing the field
+* while it was edited will not. Where the browser lacks `plaintext-only`, a
+* paste is inserted as text. What an edit means is the parent's `update`.
+*/
+const EditableText = Mount.defineStream("EditableText", {
+	messages: [
+		TextEdited,
+		TextCommitted,
+		TextCancelled,
+		EditAsked
+	],
+	args: { 
+	/** The attribute that marks a field, holding its name. */
+attribute: Schema.String },
+	execute: ({ element, attribute }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		/** The field being edited: its name, its text when editing began, and the last reported. */
+		let current;
+		let composingText = false;
+		let ending;
+		/** The marked field at or above an event's target, inside the container. */
+		const markedOf = (target) => {
+			if (!(target instanceof Element)) return void 0;
+			const field = target.closest(`[${attribute}]`);
+			return field instanceof HTMLElement && element.contains(field) ? field : void 0;
+		};
+		/** The same, while it is editable. */
+		const fieldOf = (target) => {
+			const field = markedOf(target);
+			return field?.isContentEditable === true ? field : void 0;
+		};
+		/** Begins an edit of `field`, unless one of it is under way: on focus, or typing. */
+		const begin = (field) => {
+			if (current?.field === field && !current.ended) return current;
+			const text = textOf(field);
+			current = {
+				field,
+				name: field.getAttribute(attribute) ?? "",
+				initial: text,
+				reported: text,
+				ended: false
+			};
+			return current;
+		};
+		/**
+		* The edit of `field`: the one under way or just ended, else one begun
+		* now, for a field focused before these listeners came. An ended edit
+		* reports nothing more, so the blur that follows a commit or a cancel
+		* does not commit again.
+		*/
+		const editOf = (field) => current?.field === field ? current : begin(field);
+		const report = (field) => {
+			const edit = editOf(field);
+			if (edit.ended) return;
+			const text = textOf(field);
+			if (text === edit.reported) return;
+			edit.reported = text;
+			Queue.offerUnsafe(queue, TextEdited.make({
+				field: edit.name,
+				text
+			}));
+		};
+		const commit = (field) => {
+			const edit = editOf(field);
+			if (edit.ended) return;
+			edit.ended = true;
+			Queue.offerUnsafe(queue, TextCommitted.make({
+				field: edit.name,
+				text: textOf(field)
+			}));
+		};
+		const cancel = (field) => {
+			const edit = editOf(field);
+			if (edit.ended) return;
+			edit.ended = true;
+			field.innerText = edit.initial;
+			caretAtEnd(field);
+			Queue.offerUnsafe(queue, TextCancelled.make({
+				field: edit.name,
+				initial: edit.initial
+			}));
+		};
+		const listeners = [
+			["dblclick", (event) => {
+				const field = markedOf(event.target);
+				if (field === void 0 || field.isContentEditable) return;
+				Queue.offerUnsafe(queue, EditAsked.make({ field: field.getAttribute(attribute) ?? "" }));
+			}],
+			["focusin", (event) => {
+				composingText = false;
+				const field = fieldOf(event.target);
+				if (field !== void 0) begin(field);
+			}],
+			["beforeinput", (event) => {
+				const field = fieldOf(event.target);
+				if (field !== void 0) begin(field);
+			}],
+			["compositionstart", () => composingText = true],
+			["compositionend", (event) => {
+				composingText = false;
+				const field = fieldOf(event.target);
+				if (field !== void 0) report(field);
+			}],
+			["input", (event) => {
+				const field = fieldOf(event.target);
+				if (field !== void 0 && !composingText) report(field);
+			}],
+			["keydown", (event) => {
+				const field = fieldOf(event.target);
+				const key = event;
+				if (field === void 0 || composing(key)) return;
+				if (key.key === "Escape") {
+					event.preventDefault();
+					ending = field;
+					cancel(field);
+				} else if (key.key === "Enter" && !(key.shiftKey && multiline(field))) {
+					event.preventDefault();
+					ending = field;
+					commit(field);
+				}
+			}],
+			["focusout", (event) => {
+				const field = fieldOf(event.target);
+				if (field === void 0) return;
+				queueMicrotask(() => {
+					if (field === ending && field.isConnected && field.isContentEditable) ending = void 0;
+				});
+				commit(field);
+			}],
+			["paste", (event) => {
+				const field = fieldOf(event.target);
+				if (field === void 0 || field.contentEditable === "plaintext-only") return;
+				const pasted = event.clipboardData?.getData("text/plain") ?? "";
+				event.preventDefault();
+				begin(field);
+				document.execCommand("insertText", false, pasted);
+			}]
+		];
+		const editable = `[${attribute}][contenteditable]:not([contenteditable="false"])`;
+		const becoming = new MutationObserver((records) => {
+			if (ending !== void 0 && !(ending.isConnected && ending.isContentEditable)) {
+				ending = void 0;
+				const focused = document.activeElement;
+				if ((focused === null || focused === document.body) && element instanceof HTMLElement) element.focus({ preventScroll: true });
+			}
+			for (const record of records) {
+				const changed = record.type === "attributes" ? [record.target] : Array.from(record.addedNodes);
+				for (const node of changed) {
+					if (!(node instanceof HTMLElement)) continue;
+					const field = node.matches(editable) ? node : node.querySelector(editable);
+					if (field instanceof HTMLElement) return caretAtEnd(field);
+				}
+			}
+		});
+		for (const [type, listener] of listeners) element.addEventListener(type, listener);
+		becoming.observe(element, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: ["contenteditable"]
+		});
+		return {
+			listeners,
+			becoming
+		};
+	}), ({ listeners, becoming }) => Effect.sync(() => {
+		becoming.disconnect();
+		for (const [type, listener] of listeners) element.removeEventListener(type, listener);
+	})))
+});
+export { EditAsked, EditableText, TextCancelled, TextCommitted, TextEdited, textOf };
+
+//# sourceMappingURL=editable-text.js.map

package/dist/dom/editable-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.js","names":[],"sources":["../../src/dom/editable-text.ts"],"sourcesContent":["import { Effect, Queue, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\nexport const TextEdited = Schema.TaggedStruct('TextEdited', {\n  /** The field, by its marking attribute's value. */\n  field: Schema.String,\n  text: Schema.String,\n})\nexport type TextEdited = typeof TextEdited.Type\n\nexport const TextCommitted = Schema.TaggedStruct('TextCommitted', {\n  field: Schema.String,\n  text: Schema.String,\n})\nexport type TextCommitted = typeof TextCommitted.Type\n\nexport const TextCancelled = Schema.TaggedStruct('TextCancelled', {\n  field: Schema.String,\n  /** The text the field had when editing began, which the DOM shows again. */\n  initial: Schema.String,\n})\nexport type TextCancelled = typeof TextCancelled.Type\n\nexport const EditAsked = Schema.TaggedStruct('EditAsked', {\n  /** A marked field, not editable yet, that was double-clicked. */\n  field: Schema.String,\n})\nexport type EditAsked = typeof EditAsked.Type\n\nexport type TextFact = TextEdited | TextCommitted | TextCancelled | EditAsked\n\n/** Whether a field takes more than one line. */\nconst multiline = (element: HTMLElement) => element.getAttribute('aria-multiline') === 'true'\n\n/**\n * A field's text. A browser ends an edited element with a line break it adds\n * itself, which is not the author's; in one line, the author's breaks are spaces.\n */\nexport const textOf = (element: HTMLElement): string => {\n  const text = element.innerText.replace(/\\r\\n?/g, '\\n').replace(/\\n$/, '')\n  return multiline(element) ? text : text.replace(/\\n+/g, ' ')\n}\n\n/** Puts the caret at the end of a field, which focuses it too. */\nconst caretAtEnd = (field: HTMLElement) => {\n  // Chromium also focuses on the selection below; no standard says a browser must.\n  field.focus()\n  const caret = document.createRange()\n  caret.selectNodeContents(field)\n  caret.collapse(false)\n  const selection = window.getSelection()\n  selection?.removeAllRanges()\n  selection?.addRange(caret)\n}\n\n/** Whether a key press belongs to an input method still composing, not to the field. */\nconst composing = (event: KeyboardEvent) => event.isComposing || event.keyCode === 229\n\n/**\n * Text typed into an editable descendant of an element, as a Mount: one set of\n * listeners on the container, like `Targets`. A field is a descendant marked\n * by an attribute whose value names it, while it is `contenteditable`. The\n * view decides which one is; the Mount focuses it as it becomes so (made\n * editable, or drawn editable), with the caret at its end, and at no other\n * time. When Enter or Escape ends an edit and the view then removes the field\n * or makes it no longer editable, focus, left on nothing, comes back to the\n * container, so the next key reaches it; give the container a `tabindex`. A double-click on a marked field that is not editable yet asks for it\n * to be (`EditAsked`).\n *\n * It reads `innerText`, never `innerHTML`, so what arrives is text. A field is\n * one line unless it carries `aria-multiline=\"true\"`: in one line, a line\n * break becomes a space. Nothing is reported while an input method composes;\n * the composed text arrives once, when it is done.\n *\n * Enter commits (Shift+Enter breaks a line in a multiline field), and so does\n * leaving the field. Escape cancels, and puts the text the field had when\n * editing began back in the DOM, since a view that stopped redrawing the field\n * while it was edited will not. Where the browser lacks `plaintext-only`, a\n * paste is inserted as text. What an edit means is the parent's `update`.\n */\nexport const EditableText = Mount.defineStream('EditableText', {\n  messages: [TextEdited, TextCommitted, TextCancelled, EditAsked],\n  args: {\n    /** The attribute that marks a field, holding its name. */\n    attribute: Schema.String,\n  },\n  execute: ({ element, attribute }) =>\n    Stream.callback<TextFact>(queue =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          /** The field being edited: its name, its text when editing began, and the last reported. */\n          let current:\n            | {\n                readonly field: HTMLElement\n                readonly name: string\n                readonly initial: string\n                reported: string\n                ended: boolean\n              }\n            | undefined\n          let composingText = false\n          // A field whose edit a key ended: when it leaves with focus on nothing, focus\n          // comes back to the container, where the keys that began the edit are.\n          let ending: HTMLElement | undefined\n\n          /** The marked field at or above an event's target, inside the container. */\n          const markedOf = (target: EventTarget | null): HTMLElement | undefined => {\n            if (!(target instanceof Element)) return undefined\n            const field = target.closest(`[${attribute}]`)\n            return field instanceof HTMLElement && element.contains(field) ? field : undefined\n          }\n          /** The same, while it is editable. */\n          const fieldOf = (target: EventTarget | null): HTMLElement | undefined => {\n            const field = markedOf(target)\n            return field?.isContentEditable === true ? field : undefined\n          }\n          /** Begins an edit of `field`, unless one of it is under way: on focus, or typing. */\n          const begin = (field: HTMLElement) => {\n            if (current?.field === field && !current.ended) return current\n            const text = textOf(field)\n            current = {\n              field,\n              name: field.getAttribute(attribute) ?? '',\n              initial: text,\n              reported: text,\n              ended: false,\n            }\n            return current\n          }\n          /**\n           * The edit of `field`: the one under way or just ended, else one begun\n           * now, for a field focused before these listeners came. An ended edit\n           * reports nothing more, so the blur that follows a commit or a cancel\n           * does not commit again.\n           */\n          const editOf = (field: HTMLElement) => (current?.field === field ? current : begin(field))\n          const report = (field: HTMLElement) => {\n            const edit = editOf(field)\n            if (edit.ended) return\n            const text = textOf(field)\n            // A browser may follow a composition with an input of the same text.\n            if (text === edit.reported) return\n            edit.reported = text\n            Queue.offerUnsafe(queue, TextEdited.make({ field: edit.name, text }))\n          }\n          const commit = (field: HTMLElement) => {\n            const edit = editOf(field)\n            if (edit.ended) return\n            edit.ended = true\n            Queue.offerUnsafe(queue, TextCommitted.make({ field: edit.name, text: textOf(field) }))\n          }\n          const cancel = (field: HTMLElement) => {\n            const edit = editOf(field)\n            if (edit.ended) return\n            edit.ended = true\n            field.innerText = edit.initial\n            // Writing the text moved the caret to its start; typing on goes after it.\n            caretAtEnd(field)\n            Queue.offerUnsafe(\n              queue,\n              TextCancelled.make({ field: edit.name, initial: edit.initial }),\n            )\n          }\n\n          const listeners: ReadonlyArray<readonly [string, (event: Event) => void]> = [\n            [\n              'dblclick',\n              event => {\n                const field = markedOf(event.target)\n                // In an editable field, a double-click selects a word.\n                if (field === undefined || field.isContentEditable) return\n                Queue.offerUnsafe(\n                  queue,\n                  EditAsked.make({ field: field.getAttribute(attribute) ?? '' }),\n                )\n              },\n            ],\n            [\n              'focusin',\n              event => {\n                // A composition that never ended, in a field left, holds no other field silent.\n                composingText = false\n                const field = fieldOf(event.target)\n                if (field !== undefined) begin(field)\n              },\n            ],\n            // Before the change: a field focused before these listeners came is begun here.\n            [\n              'beforeinput',\n              event => {\n                const field = fieldOf(event.target)\n                if (field !== undefined) begin(field)\n              },\n            ],\n            ['compositionstart', () => (composingText = true)],\n            [\n              'compositionend',\n              event => {\n                composingText = false\n                const field = fieldOf(event.target)\n                if (field !== undefined) report(field)\n              },\n            ],\n            [\n              'input',\n              event => {\n                const field = fieldOf(event.target)\n                if (field !== undefined && !composingText) report(field)\n              },\n            ],\n            [\n              'keydown',\n              event => {\n                const field = fieldOf(event.target)\n                const key = event as KeyboardEvent\n                if (field === undefined || composing(key)) return\n                if (key.key === 'Escape') {\n                  event.preventDefault()\n                  ending = field\n                  cancel(field)\n                } else if (key.key === 'Enter' && !(key.shiftKey && multiline(field))) {\n                  event.preventDefault()\n                  ending = field\n                  commit(field)\n                }\n              },\n            ],\n            [\n              'focusout',\n              event => {\n                const field = fieldOf(event.target)\n                if (field === undefined) return\n                // Left while still there and editable, asked once the change that may have\n                // taken it away is done: the author went elsewhere, and focus is theirs.\n                queueMicrotask(() => {\n                  if (field === ending && field.isConnected && field.isContentEditable)\n                    ending = undefined\n                })\n                commit(field)\n              },\n            ],\n            [\n              'paste',\n              event => {\n                const field = fieldOf(event.target)\n                // `plaintext-only` pastes text itself; elsewhere, markup would arrive.\n                if (field === undefined || field.contentEditable === 'plaintext-only') return\n                const pasted = (event as ClipboardEvent).clipboardData?.getData('text/plain') ?? ''\n                event.preventDefault()\n                // `insertText` fires no `beforeinput`: begun here, a paste after Enter is an edit.\n                begin(field)\n                // As typing is, so the browser's undo takes it back; `textOf` makes one line of it.\n                document.execCommand('insertText', false, pasted)\n              },\n            ],\n          ]\n          // Focuses a field as it becomes editable, and only then: made so, or drawn so.\n          // A field editable all along, or another going away, moves no focus.\n          const editable = `[${attribute}][contenteditable]:not([contenteditable=\"false\"])`\n          const becoming = new MutationObserver(records => {\n            if (ending !== undefined && !(ending.isConnected && ending.isContentEditable)) {\n              ending = undefined\n              const focused = document.activeElement\n              if ((focused === null || focused === document.body) && element instanceof HTMLElement)\n                element.focus({ preventScroll: true })\n            }\n            for (const record of records) {\n              const changed =\n                record.type === 'attributes' ? [record.target] : Array.from(record.addedNodes)\n              for (const node of changed) {\n                if (!(node instanceof HTMLElement)) continue\n                const field = node.matches(editable) ? node : node.querySelector(editable)\n                if (field instanceof HTMLElement) return caretAtEnd(field)\n              }\n            }\n          })\n\n          for (const [type, listener] of listeners) element.addEventListener(type, listener)\n          // A field made editable, drawn editable, or leaving.\n          becoming.observe(element, {\n            subtree: true,\n            childList: true,\n            attributes: true,\n            attributeFilter: ['contenteditable'],\n          })\n          return { listeners, becoming }\n        }),\n        ({ listeners, becoming }) =>\n          Effect.sync(() => {\n            becoming.disconnect()\n            for (const [type, listener] of listeners) element.removeEventListener(type, listener)\n          }),\n      ),\n    ),\n})\n"],"mappings":"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"}

package/dist/dom/fluid-hover.d.ts

@@ -0,0 +1,93 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+/** The custom properties `FluidHover` writes on its container for a highlight named `name`. */
+export declare const fluidHovered: (name: string) => {
+  readonly x: `--fk-${string}-x`;
+  readonly y: `--fk-${string}-y`;
+  readonly w: `--fk-${string}-w`;
+  readonly h: `--fk-${string}-h`;
+  /** `1` while an item is highlighted, `0` once the pointer and focus have left. */
+  readonly shown: `--fk-${string}-shown`;
+  /**
+   * `0` for the frame the highlight appears in, then `1`: a highlight's
+   * movement scales its duration by it, so it appears on its item rather
+   * than sliding in from where it last was.
+   */
+  readonly moving: `--fk-${string}-moving`;
+};
+/**
+ * The attribute `FluidHover` sets on its container, to the highlight's name,
+ * while it runs: a stylist draws the highlight, and drops each item's own
+ * hover, only under it.
+ */
+export declare const FLUID_HOVER_ATTRIBUTE = "data-fluid-hover";
+/** The attribute that names, inside an item, the control a press in a gap reaches. */
+export declare const FLUID_PRESS_ATTRIBUTE = "data-fluid-press";
+/** The attribute on the item the highlight is shown on, for what CSS draws beside it. */
+export declare const FLUID_LIT_ATTRIBUTE = "data-fluid-lit";
+/**
+ * The attribute `FluidHover` sets on its container, to the highlight's name,
+ * while the item that highlight is on is held. A stylist draws the press on
+ * the highlight (`data-fluid-held`) rather than on the item, whose own press
+ * is hidden under it; a press in a gap marks it too where `gapClick` sends
+ * that press to the lit item.
+ */
+export declare const FLUID_HELD_ATTRIBUTE = "data-fluid-held";
+declare const Axis: Schema.Literals<readonly ["x", "y", "xy"]>;
+export type FluidAxis = typeof Axis.Type;
+/**
+ * One highlight that follows the pointer across a container's items, as a
+ * Mount, with no Message and no Model: which item the pointer is nearest is
+ * presentation, known to the DOM and to no transition.
+ *
+ * The item nearest the pointer is the one highlighted, so the pointer in a gap
+ * between two items still points at one, and the highlight moves from item to
+ * item instead of blinking off between them. On the `y` axis nearness is read
+ * vertically (a list), on `x` horizontally (a strip), on `xy` both (a grid). A
+ * disabled item (`aria-disabled="true"`, `data-disabled`, `:disabled`) is never
+ * highlighted. An item reached by the keyboard (`:focus-visible`) is
+ * highlighted too, and with `focused`, the item that selector finds from a
+ * focused element that is no item (a tree's row, from its focused
+ * `treeitem`, which also holds the rows beneath it); a touch highlights
+ * nothing, since there is no pointer to
+ * follow before the press.
+ *
+ * The container gets `--fk-<name>-x`, `-y`, `-w` and `-h` in pixels, relative
+ * to its scroll box like `Measure`'s, and `-shown` and `-moving` (see
+ * `fluidHovered`); a view draws the highlight as an absolutely placed child
+ * that reads them. With `gapClick`, a click in a gap presses the highlighted
+ * item: its descendant marked `data-fluid-press`, or the item itself; with
+ * `gapReach` too, only a click within that many pixels of it, as a grid of
+ * cards with wide gutters wants (Fluid Functionalism's uses 16). A popup
+ * measured before it has a layout box keeps its last complete place, and
+ * tries again for three frames, rather than drawing the highlight at zero.
+ * The item the highlight is shown on carries `data-fluid-lit`, so a style
+ * can change what sits beside it (a table hides the lines around the lit
+ * row); its container carries `data-fluid-held` while that item is pressed.
+ *
+ * `follows` names the item the highlight sits on while the pointer is not
+ * moving it: a menu marks the row its keys reach (`[data-active]`), and the
+ * highlight goes there whenever that mark moves, so the keys and the pointer
+ * light the same one. `from` names the item a fresh highlight grows out of,
+ * as a tab's hover leaves the chosen tab. A highlight always fades where it
+ * is: once the pointer leaves, nothing should move. It stays only for an item
+ * the keyboard reached (`:focus-visible`), not one a click focused.
+ */
+export declare const FluidHover: Mount.MountDefinitionWithArgs<"FluidHover", {
+  /** The highlight's name, which names the custom properties. */
+  name: Schema.String;
+  /** The selector of an item within the container. */
+  item: Schema.String;
+  axis: Schema.Literals<readonly ["x", "y", "xy"]>;
+  gapClick: Schema.Boolean;
+  /** How far from the highlighted item, in pixels, a click in a gap still presses it. */
+  gapReach: Schema.optional<Schema.Number>;
+  /** The selector of the item the highlight sits on while the pointer is not moving it. */
+  follows: Schema.optional<Schema.String>;
+  /** The selector of the item a fresh highlight grows out of. */
+  from: Schema.optional<Schema.String>;
+  /** The selector, run from a focused element outside any item, of the item it lights. */
+  focused: Schema.optional<Schema.String>;
+}, never>;
+export {};
+//# sourceMappingURL=fluid-hover.d.ts.map

package/dist/dom/fluid-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluid-hover.d.ts","names":[],"sources":["../../src/dom/fluid-hover.ts"],"mappings":";;;qBAIa,eAAY;WAErB;WACA;WACA;WACA;;WAEA;;;;;;WAMA;;;;;;;qBAQS;;qBAGA;;qBAGA;;;;;;;;qBASA;cAEP,MAAI,OAAA;YACE,mBAAmB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAyDvB,YAAU,MAAA"}

package/dist/dom/fluid-hover.js

@@ -0,0 +1,294 @@
+import { Effect, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/dom/fluid-hover.ts
+/** The custom properties `FluidHover` writes on its container for a highlight named `name`. */
+const fluidHovered = (name) => ({
+	x: `--fk-${name}-x`,
+	y: `--fk-${name}-y`,
+	w: `--fk-${name}-w`,
+	h: `--fk-${name}-h`,
+	/** `1` while an item is highlighted, `0` once the pointer and focus have left. */
+	shown: `--fk-${name}-shown`,
+	/**
+	* `0` for the frame the highlight appears in, then `1`: a highlight's
+	* movement scales its duration by it, so it appears on its item rather
+	* than sliding in from where it last was.
+	*/
+	moving: `--fk-${name}-moving`
+});
+/**
+* The attribute `FluidHover` sets on its container, to the highlight's name,
+* while it runs: a stylist draws the highlight, and drops each item's own
+* hover, only under it.
+*/
+const FLUID_HOVER_ATTRIBUTE = "data-fluid-hover";
+/** The attribute that names, inside an item, the control a press in a gap reaches. */
+const FLUID_PRESS_ATTRIBUTE = "data-fluid-press";
+/** The attribute on the item the highlight is shown on, for what CSS draws beside it. */
+const FLUID_LIT_ATTRIBUTE = "data-fluid-lit";
+/**
+* The attribute `FluidHover` sets on its container, to the highlight's name,
+* while the item that highlight is on is held. A stylist draws the press on
+* the highlight (`data-fluid-held`) rather than on the item, whose own press
+* is hidden under it; a press in a gap marks it too where `gapClick` sends
+* that press to the lit item.
+*/
+const FLUID_HELD_ATTRIBUTE = "data-fluid-held";
+const Axis = Schema.Literals([
+	"x",
+	"y",
+	"xy"
+]);
+/** How far a point is from a rectangle along each axis: zero inside it. */
+const gap = (low, high, at) => Math.max(low - at, 0, at - high);
+const away = {
+	x: (dx, dy) => dx * 1e6 + dy,
+	y: (dx, dy) => dy * 1e6 + dx,
+	xy: Math.hypot
+};
+const distance = (rect, x, y, axis) => away[axis](gap(rect.left, rect.right, x), gap(rect.top, rect.bottom, y));
+const isDisabled = (item) => item.matches("[aria-disabled=\"true\"], [data-disabled]:not([data-disabled=\"false\"]), :disabled");
+/**
+* One highlight that follows the pointer across a container's items, as a
+* Mount, with no Message and no Model: which item the pointer is nearest is
+* presentation, known to the DOM and to no transition.
+*
+* The item nearest the pointer is the one highlighted, so the pointer in a gap
+* between two items still points at one, and the highlight moves from item to
+* item instead of blinking off between them. On the `y` axis nearness is read
+* vertically (a list), on `x` horizontally (a strip), on `xy` both (a grid). A
+* disabled item (`aria-disabled="true"`, `data-disabled`, `:disabled`) is never
+* highlighted. An item reached by the keyboard (`:focus-visible`) is
+* highlighted too, and with `focused`, the item that selector finds from a
+* focused element that is no item (a tree's row, from its focused
+* `treeitem`, which also holds the rows beneath it); a touch highlights
+* nothing, since there is no pointer to
+* follow before the press.
+*
+* The container gets `--fk-<name>-x`, `-y`, `-w` and `-h` in pixels, relative
+* to its scroll box like `Measure`'s, and `-shown` and `-moving` (see
+* `fluidHovered`); a view draws the highlight as an absolutely placed child
+* that reads them. With `gapClick`, a click in a gap presses the highlighted
+* item: its descendant marked `data-fluid-press`, or the item itself; with
+* `gapReach` too, only a click within that many pixels of it, as a grid of
+* cards with wide gutters wants (Fluid Functionalism's uses 16). A popup
+* measured before it has a layout box keeps its last complete place, and
+* tries again for three frames, rather than drawing the highlight at zero.
+* The item the highlight is shown on carries `data-fluid-lit`, so a style
+* can change what sits beside it (a table hides the lines around the lit
+* row); its container carries `data-fluid-held` while that item is pressed.
+*
+* `follows` names the item the highlight sits on while the pointer is not
+* moving it: a menu marks the row its keys reach (`[data-active]`), and the
+* highlight goes there whenever that mark moves, so the keys and the pointer
+* light the same one. `from` names the item a fresh highlight grows out of,
+* as a tab's hover leaves the chosen tab. A highlight always fades where it
+* is: once the pointer leaves, nothing should move. It stays only for an item
+* the keyboard reached (`:focus-visible`), not one a click focused.
+*/
+const FluidHover = Mount.defineStream("FluidHover", {
+	messages: [Schema.Never],
+	args: {
+		/** The highlight's name, which names the custom properties. */
+		name: Schema.String,
+		/** The selector of an item within the container. */
+		item: Schema.String,
+		axis: Axis,
+		gapClick: Schema.Boolean,
+		/** How far from the highlighted item, in pixels, a click in a gap still presses it. */
+		gapReach: Schema.optional(Schema.Number),
+		/** The selector of the item the highlight sits on while the pointer is not moving it. */
+		follows: Schema.optional(Schema.String),
+		/** The selector of the item a fresh highlight grows out of. */
+		from: Schema.optional(Schema.String),
+		/** The selector, run from a focused element outside any item, of the item it lights. */
+		focused: Schema.optional(Schema.String)
+	},
+	execute: ({ element, name, item: selector, axis, gapClick, gapReach, follows, from, focused }) => Stream.callback(() => Effect.acquireRelease(Effect.sync(() => {
+		const container = element;
+		const property = fluidHovered(name);
+		let active = null;
+		let followed = null;
+		let pointer = null;
+		let frame;
+		const origin = () => from === void 0 ? null : container.querySelector(from);
+		let retries = 0;
+		const place = (at = active) => {
+			if (at === null) return;
+			const box = container.getBoundingClientRect();
+			const rect = at.getBoundingClientRect();
+			if (rect.width === 0 && rect.height === 0) {
+				if (retries < 3) {
+					retries += 1;
+					requestAnimationFrame(() => place(at));
+				}
+				return;
+			}
+			retries = 0;
+			const x = rect.left - box.left - container.clientLeft + container.scrollLeft;
+			const y = rect.top - box.top - container.clientTop + container.scrollTop;
+			container.style.setProperty(property.x, `${x}px`);
+			container.style.setProperty(property.y, `${y}px`);
+			container.style.setProperty(property.w, `${rect.width}px`);
+			container.style.setProperty(property.h, `${rect.height}px`);
+		};
+		/** Marks `item` as the lit one, and nothing else. */
+		const light = (item) => {
+			container.querySelectorAll(`[${FLUID_LIT_ATTRIBUTE}]`).forEach((each) => each !== item && each.removeAttribute("data-fluid-lit"));
+			item?.setAttribute(FLUID_LIT_ATTRIBUTE, "");
+		};
+		const show = (next) => {
+			const appearing = container.style.getPropertyValue(property.shown) !== "1";
+			active = next;
+			light(next);
+			const grows = appearing ? origin() : null;
+			if (appearing) container.style.setProperty(property.moving, "0");
+			if (grows === null) {
+				place();
+				container.style.setProperty(property.shown, "1");
+			} else {
+				place(grows);
+				requestAnimationFrame(() => {
+					if (active !== next) return;
+					place();
+					container.style.setProperty(property.shown, "1");
+				});
+			}
+			if (appearing) requestAnimationFrame(() => container.style.setProperty(property.moving, "1"));
+		};
+		const hide = () => {
+			container.style.setProperty(property.shown, "0");
+			container.removeAttribute(FLUID_HELD_ATTRIBUTE);
+			light(null);
+		};
+		/** Whether the keyboard has an item focused, which the highlight then stays on. */
+		const keyed = () => {
+			const focused = document.activeElement;
+			return focused !== null && container.contains(focused) && focused.matches(":focus-visible");
+		};
+		const nearest = (x, y) => {
+			let best = null;
+			let bestDistance = Infinity;
+			for (const each of Array.from(container.querySelectorAll(selector))) {
+				if (isDisabled(each)) continue;
+				const far = distance(each.getBoundingClientRect(), x, y, axis);
+				if (far < bestDistance) {
+					best = each;
+					bestDistance = far;
+				}
+			}
+			return best;
+		};
+		const follow = () => {
+			frame = void 0;
+			if (pointer === null) return;
+			const next = nearest(pointer.x, pointer.y);
+			if (next === null) hide();
+			else if (next !== active || container.style.getPropertyValue(property.shown) !== "1") show(next);
+		};
+		const move = (event) => {
+			if (event.pointerType === "touch") return;
+			pointer = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			if (frame === void 0) frame = requestAnimationFrame(follow);
+		};
+		const leave = () => {
+			pointer = null;
+			release();
+			if (!keyed()) hide();
+		};
+		const focus = (event) => {
+			if (!(event.target instanceof Element) || !event.target.matches(":focus-visible")) return;
+			const owner = event.target.closest(selector) ?? (focused === void 0 ? null : event.target.querySelector(focused));
+			if (owner !== null && container.contains(owner) && !isDisabled(owner)) show(owner);
+		};
+		const blur = (event) => {
+			const to = event.relatedTarget;
+			if (pointer === null && !(to instanceof Node && container.contains(to))) hide();
+		};
+		const reachOf = (item, event) => gapReach === void 0 || distance(item.getBoundingClientRect(), event.clientX, event.clientY, "xy") <= gapReach;
+		/** Whether a click in a gap presses the lit item, within `gapReach` of it. */
+		const reaches = (item, event) => gapClick && reachOf(item, event);
+		const click = (event) => {
+			if (active === null) return;
+			if (container.style.getPropertyValue(property.shown) !== "1") return;
+			const target = event.target;
+			if (!(target instanceof Element) || target.closest(selector) !== null) return;
+			if (!reaches(active, event)) return;
+			const press = active.querySelector(`[data-fluid-press]`) ?? active;
+			if (press instanceof HTMLElement) press.click();
+		};
+		const soon = () => {
+			if (active !== null) requestAnimationFrame(() => place());
+		};
+		/**
+		* Marks the container as held where the press is the lit item's: the
+		* item itself, or a gap a click there reaches through (`gapClick`). A
+		* press on another item is that item's, once the pointer has lit it.
+		*/
+		const press = (event) => {
+			if (event.button !== 0 || active === null) return;
+			if (container.style.getPropertyValue(property.shown) !== "1") return;
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			const inItem = target.closest(selector) !== null;
+			if (inItem && !active.contains(target)) return;
+			if (!inItem && !reaches(active, event)) return;
+			container.setAttribute(FLUID_HELD_ATTRIBUTE, name);
+		};
+		const release = () => container.removeAttribute(FLUID_HELD_ATTRIBUTE);
+		/** The marked item moved: the highlight goes with it, or fades if it is gone. */
+		const marked = () => {
+			if (follows === void 0) return;
+			const next = container.querySelector(follows);
+			if (next === followed) return;
+			followed = next;
+			if (next !== null && !isDisabled(next)) show(next);
+			else if (pointer === null && !keyed()) hide();
+		};
+		const sizes = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(soon);
+		const marks = follows === void 0 ? void 0 : new MutationObserver(marked);
+		sizes?.observe(container);
+		marks?.observe(container, {
+			subtree: true,
+			childList: true,
+			attributes: true
+		});
+		container.addEventListener("pointermove", move, { passive: true });
+		container.addEventListener("pointerdown", press);
+		container.addEventListener("pointerleave", leave);
+		window.addEventListener("pointerup", release);
+		window.addEventListener("pointercancel", release);
+		container.addEventListener("focusin", focus);
+		container.addEventListener("focusout", blur);
+		container.addEventListener("click", click);
+		container.addEventListener("scroll", soon, { passive: true });
+		window.addEventListener("resize", soon);
+		container.style.setProperty(property.shown, "0");
+		container.setAttribute(FLUID_HOVER_ATTRIBUTE, name);
+		marked();
+		return () => {
+			if (frame !== void 0) cancelAnimationFrame(frame);
+			sizes?.disconnect();
+			marks?.disconnect();
+			container.removeAttribute(FLUID_HOVER_ATTRIBUTE);
+			container.removeAttribute(FLUID_HELD_ATTRIBUTE);
+			light(null);
+			container.removeEventListener("pointermove", move);
+			container.removeEventListener("pointerdown", press);
+			container.removeEventListener("pointerleave", leave);
+			window.removeEventListener("pointerup", release);
+			window.removeEventListener("pointercancel", release);
+			container.removeEventListener("focusin", focus);
+			container.removeEventListener("focusout", blur);
+			container.removeEventListener("click", click);
+			container.removeEventListener("scroll", soon);
+			window.removeEventListener("resize", soon);
+		};
+	}), (stop) => Effect.sync(stop)))
+});
+export { FLUID_HELD_ATTRIBUTE, FLUID_HOVER_ATTRIBUTE, FLUID_LIT_ATTRIBUTE, FLUID_PRESS_ATTRIBUTE, FluidHover, fluidHovered };
+
+//# sourceMappingURL=fluid-hover.js.map