@maple-kit/ui 0.1.0

package/dist/marks/index.d.ts

@@ -0,0 +1,14 @@
+import { AvatarProps, MapleAvatar, initialsOf } from "./avatar.js";
+import { marksCss } from "./css.js";
+import { Paint, startFrameLoop, useFrameLoop, viewportHeight } from "./frame.js";
+import { Box, COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, MARK_HIT_PX, MARK_OFFSET_PX, MARK_SIZE_PX, Waterline, culled, markSpot, placeMark, ringBox, runBox, waterline } from "./geometry.js";
+import { NOTHING_NAMED, RingLabel, kindPhrase, markLabel, markTitle, ringLabel } from "./label.js";
+import { MapleMarkLayer, MarkLayerProps } from "./layer.js";
+import { LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX } from "./leaf.js";
+import { MapleMark, MarkProps } from "./mark.js";
+import { NUDGE_LIMIT_PX, NUDGE_THRESHOLD_PX, Nudge, NudgeHandlers, NudgePointer, Nudges, clampNudge, dragged, useNudges } from "./nudge.js";
+import { MOVING_ATTRIBUTE, OFF_ATTRIBUTE, flag, place } from "./paint.js";
+import { Placement, addresses, placements } from "./placement.js";
+import { BELOW_ATTRIBUTE, MapleTargetRing, RingState, TargetRingProps } from "./ring.js";
+import { HALF, LeafProps, MapleLeaf, nextClipId } from "./shape.js";
+export { MapleAvatar as Avatar, type AvatarProps, BELOW_ATTRIBUTE, type Box, COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, HALF, LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX, MapleLeaf as Leaf, type LeafProps, MARK_HIT_PX, MARK_OFFSET_PX, MARK_SIZE_PX, MOVING_ATTRIBUTE, MapleAvatar, MapleLeaf, MapleMark, MapleMarkLayer, MapleTargetRing, MapleMark as Mark, MapleMarkLayer as MarkLayer, type MarkLayerProps, type MarkProps, NOTHING_NAMED, NUDGE_LIMIT_PX, NUDGE_THRESHOLD_PX, type Nudge, type NudgeHandlers, type NudgePointer, type Nudges, OFF_ATTRIBUTE, type Paint, type Placement, type RingLabel, type RingState, MapleTargetRing as TargetRing, type TargetRingProps, type Waterline, addresses, clampNudge, culled, dragged, flag, initialsOf, kindPhrase, markLabel, markSpot, markTitle, marksCss, nextClipId, place, placeMark, placements, ringBox, ringLabel, runBox, startFrameLoop, useFrameLoop, useNudges, viewportHeight, waterline };

package/dist/marks/index.js

@@ -0,0 +1,14 @@
+import { marksCss } from "./css.js";
+import { LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX } from "./leaf.js";
+import { COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, MARK_HIT_PX, MARK_OFFSET_PX, MARK_SIZE_PX, culled, markSpot, placeMark, ringBox, runBox, waterline } from "./geometry.js";
+import { HALF, MapleLeaf, nextClipId } from "./shape.js";
+import { MapleAvatar, initialsOf } from "./avatar.js";
+import { startFrameLoop, useFrameLoop, viewportHeight } from "./frame.js";
+import { NOTHING_NAMED, kindPhrase, markLabel, markTitle, ringLabel } from "./label.js";
+import { MapleMark } from "./mark.js";
+import { NUDGE_LIMIT_PX, NUDGE_THRESHOLD_PX, clampNudge, dragged, useNudges } from "./nudge.js";
+import { MOVING_ATTRIBUTE, OFF_ATTRIBUTE, flag, place } from "./paint.js";
+import { addresses, placements } from "./placement.js";
+import { BELOW_ATTRIBUTE, MapleTargetRing } from "./ring.js";
+import { MapleMarkLayer } from "./layer.js";
+export { MapleAvatar as Avatar, BELOW_ATTRIBUTE, COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, HALF, LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX, MapleLeaf as Leaf, MARK_HIT_PX, MARK_OFFSET_PX, MARK_SIZE_PX, MOVING_ATTRIBUTE, MapleAvatar, MapleLeaf, MapleMark, MapleMarkLayer, MapleTargetRing, MapleMark as Mark, MapleMarkLayer as MarkLayer, NOTHING_NAMED, NUDGE_LIMIT_PX, NUDGE_THRESHOLD_PX, OFF_ATTRIBUTE, MapleTargetRing as TargetRing, addresses, clampNudge, culled, dragged, flag, initialsOf, kindPhrase, markLabel, markSpot, markTitle, marksCss, nextClipId, place, placeMark, placements, ringBox, ringLabel, runBox, startFrameLoop, useFrameLoop, useNudges, viewportHeight, waterline };

package/dist/marks/label.d.ts

@@ -0,0 +1,23 @@
+import { PickKind } from "@maple-kit/core/client";
+import { Anchor } from "@maple-kit/core/anchor";
+import { CommentStatus } from "@maple-kit/core";
+//#region src/marks/label.d.ts
+/** What a comment is on, when nothing on the page names it. */
+export declare const NOTHING_NAMED = "this page";
+/** Everything the ring's label is built from. Each field may be missing. */
+export interface RingLabel {
+  readonly kind?: PickKind;
+  readonly element?: Element | null;
+  readonly anchor?: Anchor;
+  /** What the composer already named it, which wins over re-reading the page. */
+  readonly named?: string;
+}
+/** The phrase for one kind of target: an element is simply its own name. */
+export declare function kindPhrase(kind: PickKind | undefined, human: string | undefined): string;
+/** The ring's words: the application's name for the thing, in a phrase. */
+export declare function ringLabel(label: RingLabel): string;
+/** The mark's tooltip: who, where in its life, and what it is on. */
+export declare function markTitle(author: string | undefined, status: CommentStatus, on?: string): string;
+/** The mark's accessible name. The address comes first, because it is the address. */
+export declare function markLabel(address: number, author: string | undefined, status: CommentStatus): string;
+//#endregion

package/dist/marks/label.js

@@ -0,0 +1,31 @@
+import { STATUS_LABELS } from "../language.js";
+import { labelFor } from "@maple-kit/core/anchor";
+//#region src/marks/label.ts
+const NOTHING_NAMED = "this page";
+function kindPhrase(kind, human) {
+	if (!human) return NOTHING_NAMED;
+	if (kind === "text") return `a passage in ${human}`;
+	return kind === "region" ? `an area of ${human}` : human;
+}
+function ringLabel(label) {
+	const human = label.named ?? labelFor({
+		...label.element === void 0 ? {} : { element: label.element },
+		...label.anchor === void 0 ? {} : { anchor: label.anchor }
+	});
+	return kindPhrase(label.kind, human);
+}
+function joined(parts) {
+	return parts.filter(Boolean).join(" · ");
+}
+function markTitle(author, status, on) {
+	return joined([
+		author,
+		STATUS_LABELS[status],
+		on
+	]);
+}
+function markLabel(address, author, status) {
+	return `Comment ${address}${author ? ` by ${author}` : ""}, ${STATUS_LABELS[status]}`;
+}
+//#endregion
+export { NOTHING_NAMED, kindPhrase, markLabel, markTitle, ringLabel };

package/dist/marks/layer.d.ts

@@ -0,0 +1,16 @@
+import { Comment } from "@maple-kit/core";
+//#region src/marks/layer.d.ts
+/** What the layer draws. Both lists default to the controller's own. */
+export interface MarkLayerProps {
+  /** Everything on the branch: what the addresses are counted from. */
+  readonly comments?: readonly Comment[];
+  /** The ones to draw. Defaults to what the current filter shows. */
+  readonly visible?: readonly Comment[];
+  readonly selectedId?: string;
+  /** What a click does. Defaults to opening the comment, which is the point. */
+  readonly onSelect?: (comment: Comment) => void;
+  readonly className?: string;
+}
+/** The marks, and the one ring they share. */
+export declare const MapleMarkLayer: import("react").ForwardRefExoticComponent<MarkLayerProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/marks/layer.js

@@ -0,0 +1,194 @@
+import { useMapleUi } from "../context.js";
+import { culled, markSpot, placeMark } from "./geometry.js";
+import { useFrameLoop, viewportHeight } from "./frame.js";
+import { ringLabel } from "./label.js";
+import { MapleMark } from "./mark.js";
+import { useNudges } from "./nudge.js";
+import { OFF_ATTRIBUTE, flag, place } from "./paint.js";
+import { addresses, placements } from "./placement.js";
+import { MapleTargetRing } from "./ring.js";
+import { createElement, forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+import { kindOf, regionBox, resolveAnchor, sourceFor } from "@maple-kit/core/anchor";
+//#region src/marks/layer.ts
+const PART = "Maple.MarkLayer";
+const MapleMarkLayer = forwardRef(function MapleMarkLayer(props, ref) {
+	const { className } = props;
+	const { container } = useMapleUi(PART);
+	const state = useMaple();
+	const client = useMapleClient();
+	const chosen = props.onSelect;
+	const onSelect = useCallback((comment) => {
+		if (chosen) return chosen(comment);
+		client.viewComment(comment.id);
+	}, [chosen, client]);
+	const comments = props.comments ?? state.comments;
+	const visible = props.visible ?? state.visible;
+	const selectedId = props.selectedId ?? state.selected ?? void 0;
+	const peeked = state.peeked ?? void 0;
+	const address = useMemo(() => addresses(comments), [comments]);
+	const placed = useMemo(() => placements(visible, address, container.ownerDocument), [
+		visible,
+		address,
+		container
+	]);
+	const nudges = useNudges();
+	const nodes = useRef(/* @__PURE__ */ new Map());
+	const paint = useCallback(() => {
+		const height = viewportHeight(container);
+		const taken = [];
+		for (const placement of placed) {
+			const node = nodes.current.get(placement.comment.id);
+			const moved = nudges.of(placement.comment.id);
+			if (node) taken.push(step(node, placement, {
+				height,
+				taken,
+				...moved ? { moved } : {}
+			}));
+		}
+	}, [
+		container,
+		nudges,
+		placed
+	]);
+	useFrameLoop(PART, paint);
+	useScrollTo(placed, selectedId);
+	const marks = useMemo(() => placed.map((placement) => createElement(MapleMark, {
+		...markProps(placement, {
+			selectedId,
+			peeked,
+			nudges
+		}),
+		...nudges.handlersFor(placement.comment.id),
+		key: placement.comment.id,
+		ref: keep(nodes.current, placement.comment.id),
+		onClick: () => onSelect(placement.comment),
+		onPointerEnter: () => client.peek(placement.comment.id),
+		onPointerLeave: () => client.peek(null),
+		onFocus: () => client.peek(placement.comment.id),
+		onBlur: () => client.peek(null)
+	})), [
+		client,
+		nudges,
+		onSelect,
+		peeked,
+		placed,
+		selectedId
+	]);
+	return createElement("div", {
+		className: className ? `mk-marks ${className}` : "mk-marks",
+		ref
+	}, ...marks, createElement(MapleTargetRing, ringFor({
+		client: state,
+		placed,
+		pointing: {
+			peeked,
+			selected: selectedId
+		},
+		root: container.ownerDocument
+	})));
+});
+function useScrollTo(placed, selectedId) {
+	const target = placed.find((placement) => placement.comment.id === selectedId)?.element;
+	useEffect(() => {
+		target?.scrollIntoView({
+			block: "center",
+			inline: "nearest",
+			behavior: "smooth"
+		});
+	}, [target]);
+}
+function boxOf(placement) {
+	const box = placement.range?.getBoundingClientRect() ?? placement.element.getBoundingClientRect();
+	return placement.region === void 0 ? box : regionBox(box, placement.region);
+}
+function step(node, placement, frame) {
+	const rect = boxOf(placement);
+	const away = culled(rect, frame.height);
+	flag(node, OFF_ATTRIBUTE, away);
+	const wanted = markSpot(rect);
+	const spot = frame.moved ? {
+		...wanted,
+		x: wanted.x + frame.moved.dx,
+		y: wanted.y + frame.moved.dy
+	} : placeMark(wanted, frame.taken);
+	if (!away) place(node, spot);
+	return spot;
+}
+function keep(nodes, id) {
+	return (node) => {
+		if (node) nodes.set(id, node);
+		else nodes.delete(id);
+	};
+}
+function markProps(placement, view) {
+	const { comment } = placement;
+	return {
+		address: placement.address,
+		status: comment.status,
+		confidence: placement.confidence,
+		author: comment.author.name,
+		on: ringLabel({
+			kind: kindOf(comment.anchor),
+			element: placement.element
+		}),
+		selected: comment.id === view.selectedId,
+		peeked: comment.id === view.peeked,
+		nudged: view.nudges.of(comment.id) !== void 0,
+		dragging: view.nudges.dragging === comment.id,
+		...comment.author.colorSlot === void 0 ? {} : { colorSlot: comment.author.colorSlot }
+	};
+}
+function ringFor(input) {
+	const peeked = marked(input, input.pointing.peeked, "hovered");
+	if (peeked) return peeked;
+	const { composer } = input.client;
+	if (composer.open && composer.target) return composing(composer.target, input);
+	return marked(input, input.pointing.selected, "selected") ?? {};
+}
+function marked(input, id, state) {
+	const hit = input.placed.find((placement) => placement.comment.id === id);
+	if (!hit) return void 0;
+	return {
+		target: hit.range ?? hit.element,
+		...hit.region === void 0 ? {} : { region: hit.region },
+		label: ringLabel({
+			kind: kindOf(hit.comment.anchor),
+			element: hit.element
+		}),
+		...noteFor({
+			anchor: hit.comment.anchor,
+			element: hit.element
+		}, input.client.detail),
+		state
+	};
+}
+function composing(target, input) {
+	const found = resolveAnchor(target.anchor, {
+		root: input.root,
+		passage: target.kind === "text"
+	});
+	const label = ringLabel({
+		kind: target.kind,
+		anchor: target.anchor,
+		...target.label === void 0 ? {} : { named: target.label },
+		...found.status === "resolved" ? { element: found.element } : {}
+	});
+	if (found.status !== "resolved") return {};
+	return {
+		target: found.range ?? found.element,
+		...target.anchor.region === void 0 ? {} : { region: target.anchor.region },
+		label,
+		...noteFor({
+			anchor: target.anchor,
+			element: found.element
+		}, input.client.detail),
+		state: input.client.composer.viewing === void 0 ? "composing" : "selected"
+	};
+}
+function noteFor(source, detail) {
+	const note = detail === "developer" ? sourceFor(source) : void 0;
+	return note === void 0 ? {} : { note };
+}
+//#endregion
+export { MapleMarkLayer };

package/dist/marks/leaf.d.ts

@@ -0,0 +1,18 @@
+//#region src/marks/leaf.d.ts
+/**
+ * The leaf, as path data. Assets, not code.
+ *
+ * `LEAF_OUTLINE` is two subpaths — the silhouette and its inner counter — so
+ * the outline form needs no stroke and recolours with one `fill`. The view box
+ * is the rotated bounding box: the unrotated 64-unit box clips the tips at 20
+ * degrees, which is the one thing that looks broken rather than merely wrong.
+ */
+/** The rotated bounding box. Anything smaller clips the tips. */
+export declare const LEAF_VIEW_BOX = "-7 -7 78 78";
+/** Every path is wrapped in this, about the centre of the unrotated box. */
+export declare const LEAF_ROTATION = "rotate(20 32 32)";
+/** The filled silhouette. */
+export declare const LEAF_SOLID = "m56.97 32.46c-1.32-0.74-2.03-1.54-2.03-2.85 0-2.32 2.43-5.26 2.23-6.55-0.09-0.83-1.03-1.48-2.24-1.48-1.33 0-2.76 0.42-4.02 0.42-1.25 0-1.84-0.44-2.52-0.44-1.84 0-3.19 2.52-4.74 2.52-1.13 0-1.72-0.95-1.72-2.42 0-1.92 0.8-4.43 0.8-6.43 0-2.43-1.02-3.33-2.77-3.82-1.89-0.52-2.99-1.31-4.37-4.07-0.99-2.04-2.1-3.34-3.3-3.34-1.1 0-2.2 1.55-3.08 3.34-1.31 2.65-2.53 3.62-4.57 4.18-1.83 0.5-2.7 1.54-2.7 3.73 0 2.16 0.8 4.6 0.8 6.49 0 1.59-0.75 2.44-1.77 2.44-1.56 0-3.36-2.6-5.07-2.6-0.81 0-1.59 0.42-2.69 0.42-1.19 0-2.61-0.41-3.86-0.41-1.28 0-2.19 0.68-2.19 1.62 0 1.68 2.17 4.06 2.17 6.36 0 1.49-0.92 2.25-2.25 2.97-0.66 0.36-0.96 0.68-0.96 1.21 0 0.74 1.4 1.93 4 3.74 3.44 2.42 5.37 2.72 6.31 3.58 0.29 0.27 0.42 0.58 0.42 1.11 0 1.65-3.42 4.11-3.42 5.6 0 1.13 1.5 1.5 3.88 1.57 2.14 0.05 3.64 0.2 4.42 0.88 0.53 0.45 1.08 0.7 1.71 0.7 2.38 0 5.9-2.9 7.08-2.9 0.42 0 0.54 0.3 0.54 1.09 0 3.68-0.92 7.36-0.92 8.84 0 1.37 0.78 2.04 1.73 2.04 0.98 0 1.78-0.89 1.78-2.29 0-2.08-0.55-5.02-0.55-8.11 0-1.24 0.16-1.57 0.7-1.57 1.12 0 4.93 2.9 7.01 2.9 0.6 0 1.15-0.24 1.63-0.66 0.82-0.69 2.38-0.85 4.48-0.89 2.57-0.05 3.82-0.51 3.82-1.58 0-1.34-3.1-3.7-3.1-5.44 0-0.89 0.65-1.56 1.93-2.09 1.79-0.76 4.26-2.35 6.27-3.89 1.63-1.25 2.39-1.96 2.39-2.62 0-0.51-0.48-0.88-1.26-1.3z";
+/** The ring: silhouette plus counter, filled rather than stroked. */
+export declare const LEAF_OUTLINE = "m56.99 32.75c-1.36-0.576-2.44-1.416-2.44-2.584 0-1.304 2.472-4.976 2.472-6.064 0-0.88-1-1.208-1.952-1.208-1.936 0-4.496 1.472-6.04 1.472-1.648 0-1.536-1.8-2.728-1.8-1.144 0-3.512 2.8-4.944 2.8-0.8 0-1.072-0.728-1.072-1.712 0-2.128 1.744-6.76 1.744-8.424 0-1.816-1.32-2.192-2.936-2.416-4.264-0.608-5.072-7.64-7.272-7.64-1.432 0-2.544 2.6-3.576 4.656-0.952 1.888-2.096 2.928-4.096 3.272-1.632 0.28-2.36 1.008-2.36 2.488 0 1.88 1.632 6.12 1.632 8.56 0 0.944-0.352 1.48-0.992 1.48-1.688 0-3.736-2.952-5.032-2.952-1.16 0-1.064 1.84-2.72 1.84-1.488 0-4.104-1.336-5.728-1.336-1.28 0-2.088 0.464-2.088 1.264 0 1.032 2.512 4.52 2.512 5.976 0 1.504-1.656 2.224-2.72 2.632-0.456 0.176-0.656 0.512-0.656 0.904 0 0.808 1.504 1.84 3.752 3.744 3.36 2.88 6.456 3.672 6.456 5 0 1.928-3.888 4.752-3.888 5.744 0 0.656 0.768 0.808 1.832 0.928 2.136 0.24 4.496 0.376 6.08 1.712 0.616 0.512 1.272 0.912 1.952 0.912 2.192 0 6.832-3.088 7.592-3.088 0.48 0 0.584 0.624 0.584 2.088 0 2.576-0.392 5.168-0.392 6.184 0 1.504 1.088 2.04 2.072 2.04s1.912-0.616 1.912-1.92c0-1.36-0.432-3.528-0.432-5.528 0-2.136 0.168-2.856 0.64-2.856 0.88 0 5.352 3.072 7.368 3.072 0.704 0 1.336-0.424 1.984-0.928 2.08-1.68 7.288-1.384 7.84-2.32 0.184-0.312 0.096-0.696-0.264-1.208-1.04-1.504-3.408-3.4-3.408-4.792 0-1.248 1.944-2.056 4.52-3.928 1.52-1.104 2.728-2.232 4.112-3.2 1.056-0.744 1.664-1.272 1.664-1.888 0.016-0.464-0.432-0.752-0.984-0.976zm-1.28 2.2c-1.576 1.128-3.528 2.928-6.784 5-1.296 0.824-2.176 1.56-2.176 2.696 0 1.696 3.352 4.928 3.352 5.432 0 0.28-0.408 0.416-1.168 0.464-2.288 0.168-4.984 0.512-6.472 1.776-0.432 0.344-0.784 0.512-1.192 0.512-2.192 0-6.592-3-7.72-3-0.744 0-0.88 0.688-0.88 2.44 0 2.68 0.168 5.48 0.168 6.68 0 0.848-0.4 1.184-0.888 1.184-0.56 0-0.888-0.392-0.888-1.264 0-1.056 0.224-3.744 0.224-6.576 0-1.744-0.168-2.448-1.04-2.448-1.032 0-5.76 3.064-7.704 3.064-0.568 0-1.072-0.288-1.68-0.656-1.936-1.224-4.56-1.376-6.6-1.656-0.448-0.064-0.608-0.184-0.608-0.4 0-0.688 3.704-3.936 3.704-5.736 0-1.176-1.72-1.928-3.36-2.928-1.624-0.992-2.696-2.192-4.248-3.304-1.496-0.984-2.544-1.584-2.544-2.12 0-0.304 0.384-0.512 0.944-0.784 1.216-0.592 2.432-1.384 2.432-2.768 0-1.68-2.344-5.04-2.344-5.8 0-0.408 0.416-0.552 1.024-0.552 1.512 0 4.536 1.224 5.656 1.224 1.68 0 2.144-1.456 2.84-1.456 0.952 0 3.232 2.904 4.976 2.904 1.224 0 1.776-1.04 1.776-2.36 0-2.392-1.592-6.24-1.592-8.384 0-1.376 0.52-1.864 2.032-2.208 1.856-0.432 2.968-1.56 4.016-3.496 1.024-1.968 2.096-3.768 2.856-3.768 0.848 0 1.824 2.44 3.04 4.6 0.968 1.688 2.08 2.4 3.92 2.584 1.52 0.152 2.032 0.64 2.032 1.888 0 2.208-1.568 6.152-1.568 8.216 0 1.728 0.84 2.608 1.912 2.608 1.792 0 3.984-2.76 4.936-2.76 0.84 0 1.072 1.416 2.896 1.416 1.656 0 4.576-1.28 5.968-1.28 0.44 0 0.64 0.2 0.64 0.536 0 0.976-1.488 3.52-2.144 4.816-0.168 0.36-0.216 0.68-0.216 0.992 0 1.328 1.64 2.368 2.944 3.016 0.352 0.176 0.52 0.344 0.52 0.552-0.016 0.32-0.424 0.704-0.992 1.104z";
+//#endregion

package/dist/marks/leaf.js

@@ -0,0 +1,7 @@
+//#region src/marks/leaf.ts
+const LEAF_VIEW_BOX = "-7 -7 78 78";
+const LEAF_ROTATION = "rotate(20 32 32)";
+const LEAF_SOLID = "m56.97 32.46c-1.32-0.74-2.03-1.54-2.03-2.85 0-2.32 2.43-5.26 2.23-6.55-0.09-0.83-1.03-1.48-2.24-1.48-1.33 0-2.76 0.42-4.02 0.42-1.25 0-1.84-0.44-2.52-0.44-1.84 0-3.19 2.52-4.74 2.52-1.13 0-1.72-0.95-1.72-2.42 0-1.92 0.8-4.43 0.8-6.43 0-2.43-1.02-3.33-2.77-3.82-1.89-0.52-2.99-1.31-4.37-4.07-0.99-2.04-2.1-3.34-3.3-3.34-1.1 0-2.2 1.55-3.08 3.34-1.31 2.65-2.53 3.62-4.57 4.18-1.83 0.5-2.7 1.54-2.7 3.73 0 2.16 0.8 4.6 0.8 6.49 0 1.59-0.75 2.44-1.77 2.44-1.56 0-3.36-2.6-5.07-2.6-0.81 0-1.59 0.42-2.69 0.42-1.19 0-2.61-0.41-3.86-0.41-1.28 0-2.19 0.68-2.19 1.62 0 1.68 2.17 4.06 2.17 6.36 0 1.49-0.92 2.25-2.25 2.97-0.66 0.36-0.96 0.68-0.96 1.21 0 0.74 1.4 1.93 4 3.74 3.44 2.42 5.37 2.72 6.31 3.58 0.29 0.27 0.42 0.58 0.42 1.11 0 1.65-3.42 4.11-3.42 5.6 0 1.13 1.5 1.5 3.88 1.57 2.14 0.05 3.64 0.2 4.42 0.88 0.53 0.45 1.08 0.7 1.71 0.7 2.38 0 5.9-2.9 7.08-2.9 0.42 0 0.54 0.3 0.54 1.09 0 3.68-0.92 7.36-0.92 8.84 0 1.37 0.78 2.04 1.73 2.04 0.98 0 1.78-0.89 1.78-2.29 0-2.08-0.55-5.02-0.55-8.11 0-1.24 0.16-1.57 0.7-1.57 1.12 0 4.93 2.9 7.01 2.9 0.6 0 1.15-0.24 1.63-0.66 0.82-0.69 2.38-0.85 4.48-0.89 2.57-0.05 3.82-0.51 3.82-1.58 0-1.34-3.1-3.7-3.1-5.44 0-0.89 0.65-1.56 1.93-2.09 1.79-0.76 4.26-2.35 6.27-3.89 1.63-1.25 2.39-1.96 2.39-2.62 0-0.51-0.48-0.88-1.26-1.3z";
+const LEAF_OUTLINE = "m56.99 32.75c-1.36-0.576-2.44-1.416-2.44-2.584 0-1.304 2.472-4.976 2.472-6.064 0-0.88-1-1.208-1.952-1.208-1.936 0-4.496 1.472-6.04 1.472-1.648 0-1.536-1.8-2.728-1.8-1.144 0-3.512 2.8-4.944 2.8-0.8 0-1.072-0.728-1.072-1.712 0-2.128 1.744-6.76 1.744-8.424 0-1.816-1.32-2.192-2.936-2.416-4.264-0.608-5.072-7.64-7.272-7.64-1.432 0-2.544 2.6-3.576 4.656-0.952 1.888-2.096 2.928-4.096 3.272-1.632 0.28-2.36 1.008-2.36 2.488 0 1.88 1.632 6.12 1.632 8.56 0 0.944-0.352 1.48-0.992 1.48-1.688 0-3.736-2.952-5.032-2.952-1.16 0-1.064 1.84-2.72 1.84-1.488 0-4.104-1.336-5.728-1.336-1.28 0-2.088 0.464-2.088 1.264 0 1.032 2.512 4.52 2.512 5.976 0 1.504-1.656 2.224-2.72 2.632-0.456 0.176-0.656 0.512-0.656 0.904 0 0.808 1.504 1.84 3.752 3.744 3.36 2.88 6.456 3.672 6.456 5 0 1.928-3.888 4.752-3.888 5.744 0 0.656 0.768 0.808 1.832 0.928 2.136 0.24 4.496 0.376 6.08 1.712 0.616 0.512 1.272 0.912 1.952 0.912 2.192 0 6.832-3.088 7.592-3.088 0.48 0 0.584 0.624 0.584 2.088 0 2.576-0.392 5.168-0.392 6.184 0 1.504 1.088 2.04 2.072 2.04s1.912-0.616 1.912-1.92c0-1.36-0.432-3.528-0.432-5.528 0-2.136 0.168-2.856 0.64-2.856 0.88 0 5.352 3.072 7.368 3.072 0.704 0 1.336-0.424 1.984-0.928 2.08-1.68 7.288-1.384 7.84-2.32 0.184-0.312 0.096-0.696-0.264-1.208-1.04-1.504-3.408-3.4-3.408-4.792 0-1.248 1.944-2.056 4.52-3.928 1.52-1.104 2.728-2.232 4.112-3.2 1.056-0.744 1.664-1.272 1.664-1.888 0.016-0.464-0.432-0.752-0.984-0.976zm-1.28 2.2c-1.576 1.128-3.528 2.928-6.784 5-1.296 0.824-2.176 1.56-2.176 2.696 0 1.696 3.352 4.928 3.352 5.432 0 0.28-0.408 0.416-1.168 0.464-2.288 0.168-4.984 0.512-6.472 1.776-0.432 0.344-0.784 0.512-1.192 0.512-2.192 0-6.592-3-7.72-3-0.744 0-0.88 0.688-0.88 2.44 0 2.68 0.168 5.48 0.168 6.68 0 0.848-0.4 1.184-0.888 1.184-0.56 0-0.888-0.392-0.888-1.264 0-1.056 0.224-3.744 0.224-6.576 0-1.744-0.168-2.448-1.04-2.448-1.032 0-5.76 3.064-7.704 3.064-0.568 0-1.072-0.288-1.68-0.656-1.936-1.224-4.56-1.376-6.6-1.656-0.448-0.064-0.608-0.184-0.608-0.4 0-0.688 3.704-3.936 3.704-5.736 0-1.176-1.72-1.928-3.36-2.928-1.624-0.992-2.696-2.192-4.248-3.304-1.496-0.984-2.544-1.584-2.544-2.12 0-0.304 0.384-0.512 0.944-0.784 1.216-0.592 2.432-1.384 2.432-2.768 0-1.68-2.344-5.04-2.344-5.8 0-0.408 0.416-0.552 1.024-0.552 1.512 0 4.536 1.224 5.656 1.224 1.68 0 2.144-1.456 2.84-1.456 0.952 0 3.232 2.904 4.976 2.904 1.224 0 1.776-1.04 1.776-2.36 0-2.392-1.592-6.24-1.592-8.384 0-1.376 0.52-1.864 2.032-2.208 1.856-0.432 2.968-1.56 4.016-3.496 1.024-1.968 2.096-3.768 2.856-3.768 0.848 0 1.824 2.44 3.04 4.6 0.968 1.688 2.08 2.4 3.92 2.584 1.52 0.152 2.032 0.64 2.032 1.888 0 2.208-1.568 6.152-1.568 8.216 0 1.728 0.84 2.608 1.912 2.608 1.792 0 3.984-2.76 4.936-2.76 0.84 0 1.072 1.416 2.896 1.416 1.656 0 4.576-1.28 5.968-1.28 0.44 0 0.64 0.2 0.64 0.536 0 0.976-1.488 3.52-2.144 4.816-0.168 0.36-0.216 0.68-0.216 0.992 0 1.328 1.64 2.368 2.944 3.016 0.352 0.176 0.52 0.344 0.52 0.552-0.016 0.32-0.424 0.704-0.992 1.104z";
+//#endregion
+export { LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX };

package/dist/marks/mark.d.ts

@@ -0,0 +1,28 @@
+import { AsChildProps } from "../slot.js";
+import { ButtonHTMLAttributes } from "react";
+import { CommentStatus } from "@maple-kit/core";
+//#region src/marks/mark.d.ts
+/** Everything the mark says, and nothing about how it should look. */
+export interface MarkProps extends AsChildProps, ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The address: the number the list and the export table also show. */
+  readonly address: number;
+  readonly status?: CommentStatus;
+  /** False for a comment still being written, which is the dashed form. */
+  readonly sent?: boolean;
+  /** How sure the anchor is, 0 to 1. A weak one draws a translucent fill. */
+  readonly confidence?: number;
+  /** The author's reviewer colour, 0 to 9. Absent leaves the status colour. */
+  readonly colorSlot?: number;
+  readonly author?: string;
+  /** What it is on, for the tooltip: "the Yield card". */
+  readonly on?: string;
+  readonly selected?: boolean;
+  /** A row or the mark itself is being pointed at. Sticks to nothing. */
+  readonly peeked?: boolean;
+  /** Someone moved it off what it was covering, and it holds where they put it. */
+  readonly nudged?: boolean;
+  readonly dragging?: boolean;
+}
+/** A mark a reviewer can click, drawn from state that arrives as `data-*`. */
+export declare const MapleMark: import("react").ForwardRefExoticComponent<MarkProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion

package/dist/marks/mark.js

@@ -0,0 +1,43 @@
+import { confidenceFor, dataAttributes, formFor, pointerAttributes } from "../data.js";
+import { Slot, composeRefs } from "../slot.js";
+import { applyReviewerSlot } from "../slots.js";
+import { MapleLeaf, inside } from "./shape.js";
+import { markLabel, markTitle } from "./label.js";
+import { createElement, forwardRef, useCallback } from "react";
+//#region src/marks/mark.ts
+const MapleMark = forwardRef(function MapleMark(props, ref) {
+	const { address, asChild, author, children, className, colorSlot, confidence, dragging, nudged, on, peeked, selected, sent, status = "open", ...rest } = props;
+	const form = formFor(status, sent ?? true);
+	const paint = useCallback((node) => {
+		if (node && colorSlot !== void 0) applyReviewerSlot(node, colorSlot);
+	}, [colorSlot]);
+	return createElement(asChild ? Slot : "button", {
+		type: "button",
+		...rest,
+		...dataAttributes({
+			status,
+			form,
+			sent: sent ?? true,
+			...confidence === void 0 ? {} : { confidence: confidenceFor(confidence) }
+		}),
+		...pointerAttributes({
+			peeked: peeked ?? false,
+			nudged: nudged ?? false,
+			dragging: dragging ?? false
+		}),
+		"aria-label": markLabel(address, author, status),
+		"aria-pressed": selected ?? false,
+		title: markTitle(author, status, on),
+		className: className ? `mk-mark mk-hit ${className}` : "mk-mark mk-hit",
+		ref: composeRefs(ref, paint)
+	}, ...inside(asChild, children, [createElement(MapleLeaf, {
+		key: "leaf",
+		form
+	}), createElement("span", {
+		key: "n",
+		className: "mk-mark-n mk-num",
+		"data-mk-digits": String(String(address).length)
+	}, address)]));
+});
+//#endregion
+export { MapleMark };

package/dist/marks/nudge.d.ts

@@ -0,0 +1,50 @@
+//#region src/marks/nudge.d.ts
+/**
+ * Moving a mark off what it is covering, without moving what it is about.
+ *
+ * A mark stands just outside its anchor's corner, and sometimes that corner is
+ * the one thing on the page worth reading. The offset is the reviewer's, not
+ * the comment's: it is held for the session, never recorded, and never sent —
+ * where a mark was dragged to says nothing about where the comment belongs.
+ * The collision resolver stands down for a nudged mark, because a mark that
+ * was put somewhere on purpose is not one to be stepped sideways.
+ */
+/** Under this, a pointer went down and up on a mark, which is a click. */
+export declare const NUDGE_THRESHOLD_PX = 4;
+/** As far as a mark goes. Past this it names something it is not beside. */
+export declare const NUDGE_LIMIT_PX = 160;
+/** How far a mark has been moved from where its anchor puts it. */
+export interface Nudge {
+  readonly dx: number;
+  readonly dy: number;
+}
+/** Kept inside the limit on both axes, so a mark stays near its anchor. */
+export declare function clampNudge(nudge: Nudge): Nudge;
+/** True once the pointer has travelled far enough to be a drag, not a click. */
+export declare function dragged(from: Nudge): boolean;
+/** The parts of a pointer event a nudge needs. Structural, so it tests flat. */
+export interface NudgePointer {
+  readonly clientX: number;
+  readonly clientY: number;
+  /** Absent on the click that ends a drag, which is a mouse event. */
+  readonly pointerId?: number;
+  readonly currentTarget: EventTarget | null;
+  preventDefault?(): void;
+  stopPropagation?(): void;
+}
+/** What one mark spreads to become draggable. */
+export interface NudgeHandlers {
+  readonly onPointerDown: (event: NudgePointer) => void;
+  readonly onPointerMove: (event: NudgePointer) => void;
+  readonly onPointerUp: (event: NudgePointer) => void;
+  readonly onClickCapture: (event: NudgePointer) => void;
+}
+/** Every mark's offset, and the handlers that change one. */
+export interface Nudges {
+  readonly of: (id: string) => Nudge | undefined;
+  readonly dragging: string | undefined;
+  readonly handlersFor: (id: string) => NudgeHandlers;
+}
+/** The session's offsets. Nothing here reaches storage or the controller. */
+export declare function useNudges(): Nudges;
+//#endregion

package/dist/marks/nudge.js

@@ -0,0 +1,76 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+//#region src/marks/nudge.ts
+const NUDGE_THRESHOLD_PX = 4;
+const NUDGE_LIMIT_PX = 160;
+function clampNudge(nudge) {
+	const hold = (value) => Math.max(-160, Math.min(160, value));
+	return {
+		dx: hold(nudge.dx),
+		dy: hold(nudge.dy)
+	};
+}
+function dragged(from) {
+	return Math.abs(from.dx) >= 4 || Math.abs(from.dy) >= 4;
+}
+function useNudges() {
+	const [offsets, setOffsets] = useState(/* @__PURE__ */ new Map());
+	const [dragging, setDragging] = useState();
+	const drag = useRef(void 0);
+	const move = useCallback((id, next) => {
+		setOffsets((was) => new Map(was).set(id, clampNudge(next)));
+	}, []);
+	const handlersFor = useCallback((id) => ({
+		onPointerDown: (event) => {
+			const node = event.currentTarget;
+			if (node instanceof Element && event.pointerId !== void 0) node.setPointerCapture(event.pointerId);
+			drag.current = {
+				id,
+				from: {
+					x: event.clientX,
+					y: event.clientY
+				},
+				base: offsets.get(id) ?? {
+					dx: 0,
+					dy: 0
+				},
+				moved: false
+			};
+		},
+		onPointerMove: (event) => {
+			const held = drag.current;
+			if (held?.id !== id) return;
+			const travelled = {
+				dx: event.clientX - held.from.x,
+				dy: event.clientY - held.from.y
+			};
+			if (!held.moved && !dragged(travelled)) return;
+			held.moved = true;
+			setDragging(id);
+			move(id, {
+				dx: held.base.dx + travelled.dx,
+				dy: held.base.dy + travelled.dy
+			});
+		},
+		onPointerUp: () => {
+			setDragging(void 0);
+			if (drag.current?.id === id && !drag.current.moved) drag.current = void 0;
+		},
+		onClickCapture: (event) => {
+			if (drag.current?.id !== id || !drag.current.moved) return;
+			drag.current = void 0;
+			event.preventDefault?.();
+			event.stopPropagation?.();
+		}
+	}), [move, offsets]);
+	return useMemo(() => ({
+		of: (id) => offsets.get(id),
+		dragging,
+		handlersFor
+	}), [
+		dragging,
+		handlersFor,
+		offsets
+	]);
+}
+//#endregion
+export { NUDGE_LIMIT_PX, NUDGE_THRESHOLD_PX, clampNudge, dragged, useNudges };

package/dist/marks/paint.d.ts

@@ -0,0 +1,11 @@
+import { Box } from "./geometry.js";
+//#region src/marks/paint.d.ts
+/** Set while something is being repositioned, and only then. */
+export declare const MOVING_ATTRIBUTE = "data-mk-moving";
+/** Set on anything scrolled far enough off-screen to stop drawing. */
+export declare const OFF_ATTRIBUTE = "data-mk-off";
+/** Moves one node. Rounding is the caller's, so a box is measured once. */
+export declare function place(node: ElementCSSInlineStyle, box: Box): void;
+/** Writes an attribute only when it would change, so a frame costs nothing. */
+export declare function flag(node: Element, attribute: string, on: boolean): void;
+//#endregion

package/dist/marks/paint.js

@@ -0,0 +1,19 @@
+//#region src/marks/paint.ts
+const X_PROPERTY = "--mk-x";
+const Y_PROPERTY = "--mk-y";
+const W_PROPERTY = "--mk-w";
+const H_PROPERTY = "--mk-h";
+const MOVING_ATTRIBUTE = "data-mk-moving";
+const OFF_ATTRIBUTE = "data-mk-off";
+function place(node, box) {
+	const { style } = node;
+	style.setProperty(X_PROPERTY, `${box.x}px`);
+	style.setProperty(Y_PROPERTY, `${box.y}px`);
+	style.setProperty(W_PROPERTY, `${box.width}px`);
+	style.setProperty(H_PROPERTY, `${box.height}px`);
+}
+function flag(node, attribute, on) {
+	if (node.hasAttribute(attribute) !== on) node.toggleAttribute(attribute, on);
+}
+//#endregion
+export { H_PROPERTY, MOVING_ATTRIBUTE, OFF_ATTRIBUTE, W_PROPERTY, X_PROPERTY, Y_PROPERTY, flag, place };

package/dist/marks/placement.d.ts

@@ -0,0 +1,24 @@
+import { AnchorRegion } from "@maple-kit/core/anchor";
+import { Comment } from "@maple-kit/core";
+//#region src/marks/placement.d.ts
+/** A comment the page still has somewhere to put. */
+export interface Placement {
+  readonly comment: Comment;
+  /** The address: its place in the branch's own order, counted from one. */
+  readonly address: number;
+  readonly element: Element;
+  /** The passage itself, when a text rung placed it. */
+  readonly range?: Range;
+  /** The rectangle, when the comment is on a region rather than an element. */
+  readonly region?: AnchorRegion;
+  readonly confidence: number;
+}
+/** The address of every comment, which the list and the export share. */
+export declare function addresses(comments: readonly Comment[]): ReadonlyMap<string, number>;
+/**
+ * Everything drawable, in the order it was given, with nothing guessed. A text
+ * anchor is narrowed to its passage, so the ring a mark draws highlights the
+ * words the comment is on rather than the paragraph they sit in.
+ */
+export declare function placements(comments: readonly Comment[], address: ReadonlyMap<string, number>, root: ParentNode): readonly Placement[];
+//#endregion

package/dist/marks/placement.js

@@ -0,0 +1,28 @@
+import { kindOf, resolveAnchor } from "@maple-kit/core/anchor";
+//#region src/marks/placement.ts
+function addresses(comments) {
+	return new Map(comments.map((comment, index) => [comment.id, index + 1]));
+}
+function placements(comments, address, root) {
+	const placed = [];
+	for (const comment of comments) {
+		if (comment.status === "orphaned") continue;
+		const passage = kindOf(comment.anchor) === "text";
+		const found = resolveAnchor(comment.anchor, {
+			root,
+			passage
+		});
+		if (found.status !== "resolved") continue;
+		placed.push({
+			comment,
+			address: address.get(comment.id) ?? 0,
+			element: found.element,
+			...found.range === void 0 ? {} : { range: found.range },
+			...comment.anchor.region === void 0 ? {} : { region: comment.anchor.region },
+			confidence: found.confidence
+		});
+	}
+	return placed;
+}
+//#endregion
+export { addresses, placements };

package/dist/marks/ring.d.ts

@@ -0,0 +1,28 @@
+import { AnchorRegion } from "@maple-kit/core/anchor";
+//#region src/marks/ring.d.ts
+/** Set on the label when the anchor is too near the top to sit above it. */
+export declare const BELOW_ATTRIBUTE = "data-mk-below";
+/**
+ * Why the ring is showing. `selected` is the one that outlives the pointer:
+ * a click holds the ring on the page after the hand has moved away.
+ */
+export type RingState = "composing" | "hovered" | "selected";
+/** What the ring names, and the words it names it with. */
+export interface TargetRingProps {
+  /** The anchored element, or the passage itself when it is a text anchor. */
+  readonly target?: Element | Range | null;
+  /**
+   * The rectangle a region pick drew, in fractions of the target's box. The
+   * ring is that rectangle rather than the element it was measured in.
+   */
+  readonly region?: AnchorRegion;
+  /** The label's words. `ringLabel` builds them; the ring never invents them. */
+  readonly label?: string;
+  /** A second line under the label. Developer detail: where this is written. */
+  readonly note?: string;
+  readonly state?: RingState;
+  readonly className?: string;
+}
+/** The ring around one target, repositioned per scrolled frame. */
+export declare const MapleTargetRing: import("react").ForwardRefExoticComponent<TargetRingProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion