@maple-kit/ui 0.10.0 → 0.12.0

package/README.md

@@ -5,6 +5,13 @@ composer. The surface a person actually touches on a preview deployment.
 
 **Pre-release.** Every package here is 0.x and makes no compatibility promise.
 
+<table>
+<tr>
+<td width="50%" valign="top"><img src="https://raw.githubusercontent.com/maple-kit/maple/main/docs/assets/features/three-types.gif" alt="Three picks in a row: a metric card, a box dragged over part of a chart, and a sentence selected under it." width="100%"><br><b>An element, an area, or a passage.</b> Pick a component, drag a box over part of the page, or select the words that are wrong.</td>
+<td width="50%" valign="top"><img src="https://raw.githubusercontent.com/maple-kit/maple/main/docs/assets/features/overlay.gif" alt="A reviewer clicks a comment on a metric card, and the sheet opens with the comment, its author, its status, and the width and theme it was written at." width="100%"><br><b>Every comment carries its context.</b> The width, the colour scheme, a screenshot taken at the pick, and who wrote it.</td>
+</tr>
+</table>
+
 ## Install
 
 ```sh
@@ -14,14 +21,37 @@ npm install @maple-kit/ui
 `react` and `react-dom` are peer dependencies. `@maple-kit/core` and
 `@maple-kit/react` come with it.
 
+## Use
+
+```tsx
+import { Maple } from "@maple-kit/ui/maple";
+
+<Maple branch={import.meta.env.VITE_MAPLE_BRANCH} />;
+```
+
+It talks to the route [`@maple-kit/core`](../core) mounts at `/api/maple`.
+Render it on preview builds only; `?maple=off` turns it off without a rebuild.
+
 ## What is in it
 
 `@maple-kit/ui/maple` is the whole overlay as one component. The parts are also
-exported on their own: `/marks`, `/island`, `/composer`, `/picker`, `/notice`,
-`/mock` and `/icons`.
+exported on their own, for a host that wants to compose them differently:
+
+| Entry                    | What it is                                                          |
+| ------------------------ | ------------------------------------------------------------------- |
+| `@maple-kit/ui/maple`    | `<Maple />`: everything below, composed.                            |
+| `@maple-kit/ui/marks`    | The leaf on each commented element, and the ring around its target. |
+| `@maple-kit/ui/island`   | The corner pill that opens into the list of comments.               |
+| `@maple-kit/ui/composer` | The sheet a comment is written in, with its screenshot and score.   |
+| `@maple-kit/ui/picker`   | Element, text and region picks.                                     |
+| `@maple-kit/ui/notice`   | Failures the overlay reports in its own voice.                      |
+| `@maple-kit/ui/mock`     | `<MapleMock />`, Maple Mock's box, for a page that mocks alone.     |
+| `@maple-kit/ui/icons`    | The thirteen icons, one module each.                                |
 
-`@maple-kit/ui/mock` is Maple Mock's box, `<MapleMock />`, for a page that
-mocks without the review overlay. Inside `<Maple />` it is already mounted.
+Inside `<Maple />` the mock box is already mounted. [`@maple-kit/mock`](../mock)
+shows what it does.
+
+## Mounting under a strict CSP
 
 Everything renders inside one shadow root, styled only through
 `new CSSStyleSheet()` and `adoptedStyleSheets`, with positions set by
@@ -32,9 +62,15 @@ it stays checkable by reading one function.
 Every part carries a size budget, held in CI by `scripts/size.js`. Raising one
 is a decision recorded in a commit, not a number that drifts.
 
+An application that would rather draw review comments in its own design
+system uses the hooks in [`@maple-kit/react`](../react) and none of this
+package.
+
 ## Documentation
 
 - [The overlay and CSP](https://github.com/maple-kit/maple/blob/main/docs/overlay-csp.md)
+- [Drafts and publishing](https://github.com/maple-kit/maple/blob/main/docs/drafts.md)
+- [Screenshots](https://github.com/maple-kit/maple/blob/main/docs/screenshots.md)
 - [UI conventions](https://github.com/maple-kit/maple/blob/main/docs/ui-conventions.md)
 
 ## Licence

package/dist/composer/actions.d.ts

@@ -7,7 +7,7 @@ export interface MapleActionsProps extends AsChildProps {
   readonly children?: ReactNode;
 }
 /** Closes the composer and keeps what was written, unsent. */
-export declare const KEEP_LABEL = "Keep";
+export declare const SAVE_DRAFT_LABEL = "Save as draft";
 /** The verb, because publishing is the act and the comment already exists. */
 export declare const PUBLISH_LABEL = "Publish";
 /** The two controls, and room beside them for a later one. */

package/dist/composer/actions.js

@@ -3,7 +3,7 @@ import { useComposerScope } from "./scope.js";
 import { createElement, forwardRef } from "react";
 import { useMaple, useMapleClient } from "@maple-kit/react";
 //#region src/composer/actions.ts
-const KEEP_LABEL = "Keep";
+const SAVE_DRAFT_LABEL = "Save as draft";
 const PUBLISH_LABEL = "Publish";
 const VIEW_LABELS = {
 	close: "Close",
@@ -13,11 +13,8 @@ const VIEW_LABELS = {
 const MapleActions = forwardRef(function MapleActions(props, ref) {
 	const { composer, publishing } = useMaple();
 	const client = useMapleClient();
-	const scope = useComposerScope("Maple.Actions");
 	const Element = props.asChild ? Slot : "footer";
-	const publish = () => {
-		client.publish().then(() => scope.clear(), () => void 0);
-	};
+	const publish = usePublish();
 	const className = props.className ? `mk-composer-foot ${props.className}` : "mk-composer-foot";
 	if (composer.viewing !== void 0) return createElement(Element, {
 		ref,
@@ -31,13 +28,20 @@ const MapleActions = forwardRef(function MapleActions(props, ref) {
 		className: "mk-btn mk-btn-quiet mk-press",
 		disabled: composer.body.trim() === "",
 		onClick: () => client.keepDraft()
-	}, KEEP_LABEL), createElement("button", {
+	}, SAVE_DRAFT_LABEL), createElement("button", {
 		type: "button",
 		className: "mk-btn mk-btn-primary mk-press",
 		disabled: composer.body.trim() === "" || publishing,
 		onClick: publish
 	}, PUBLISH_LABEL));
 });
+function usePublish() {
+	const client = useMapleClient();
+	const scope = useComposerScope("Maple.Actions");
+	return () => {
+		client.publish().then(() => scope.clear(), () => void 0);
+	};
+}
 function reading(id, client) {
 	const status = client.getState().comments.find((one) => one.id === id)?.status;
 	const done = status === "resolved";
@@ -57,4 +61,4 @@ function moveOn(id, done, client) {
 	}, done ? VIEW_LABELS.reopen : VIEW_LABELS.resolve);
 }
 //#endregion
-export { KEEP_LABEL, MapleActions, PUBLISH_LABEL, VIEW_LABELS };
+export { MapleActions, PUBLISH_LABEL, SAVE_DRAFT_LABEL, VIEW_LABELS, usePublish };

package/dist/composer/body.js

@@ -1,4 +1,5 @@
 import { Slot, composeRefs } from "../slot.js";
+import { usePublish } from "./actions.js";
 import { searchEmoji, shortcodeAt, writeAt } from "./emoji.js";
 import { EmojiGrid, MapleEmoji } from "./picker-emoji.js";
 import { createElement, forwardRef, useEffect, useRef, useState } from "react";
@@ -6,8 +7,9 @@ import { useMaple, useMapleClient } from "@maple-kit/react";
 //#region src/composer/body.ts
 const COMPOSER_PLACEHOLDER = "What is wrong with this?";
 const MapleBody = forwardRef(function MapleBody(props, ref) {
-	const { composer } = useMaple();
+	const { composer, publishing } = useMaple();
 	const client = useMapleClient();
+	const publish = usePublish();
 	const field = useRef(null);
 	const [open, setOpen] = useState(false);
 	const suggest = useSuggestions(composer.body);
@@ -45,7 +47,11 @@ const MapleBody = forwardRef(function MapleBody(props, ref) {
 			client.setBody(event.target.value);
 			suggest.read(event.target.value, event.target.selectionStart);
 		},
-		onKeyDown: (event) => suggest.onKeyDown(event, write),
+		onKeyDown: (event) => {
+			if (!isSend(event)) return suggest.onKeyDown(event, write);
+			event.preventDefault();
+			if (composer.body.trim() !== "" && !publishing) publish();
+		},
 		onBlur: () => suggest.clear()
 	});
 	return createElement("div", { className: "mk-composer-row mk-field-wrap" }, area, props.emoji === false ? null : createElement(MapleEmoji, {
@@ -103,6 +109,10 @@ function useSuggestions(body) {
 		onKeyDown
 	};
 }
+function isSend(event) {
+	if (event.key !== "Enter" || event.shiftKey || event.altKey) return false;
+	return event.metaKey || event.ctrlKey;
+}
 function stepFor(key) {
 	if (key === "ArrowDown" || key === "ArrowRight") return 1;
 	return key === "ArrowUp" || key === "ArrowLeft" ? -1 : 0;

package/dist/composer/index.d.ts

@@ -1,5 +1,5 @@
 import { SHEET_BREAKPOINT_PX } from "../tokens.js";
-import { KEEP_LABEL, MapleActions, MapleActionsProps, PUBLISH_LABEL } from "./actions.js";
+import { MapleActions, MapleActionsProps, PUBLISH_LABEL, SAVE_DRAFT_LABEL } from "./actions.js";
 import { ATTACH_WORDS, MapleAttachments, MapleAttachmentsProps } from "./attachments.js";
 import { CONTEXT_LABELS, MapleContextBadge, MapleContextProps } from "./badge.js";
 import { COMPOSER_PLACEHOLDER, MapleBody, MapleBodyProps } from "./body.js";
@@ -13,4 +13,4 @@ import { KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, QUOTE_LIMIT, TARGET_PREFIX, UNNA
 import { EMOJI_COPY, EMOJI_ICON_PX, EmojiGrid, EmojiGridProps, MapleEmoji, MapleEmojiProps } from "./picker-emoji.js";
 import { KIND_AUTO, KIND_LABEL, MapleScoreCard, MapleScoreProps, SCORE_LABEL } from "./score.js";
 import { CLOSE_LABEL, DETAIL_ATTRIBUTE, MapleTarget, MapleTargetProps } from "./target.js";
-export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, type EmojiChoice, EmojiGrid, type EmojiGridProps, KEEP_LABEL, KIND_AUTO, KIND_LABEL, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, type LeaveAsk, MapleActions, type MapleActionsProps, MapleAttachments, type MapleAttachmentsProps, MapleBody, type MapleBodyProps, MapleComposer, type MapleComposerProps, MapleContextBadge, type MapleContextProps, MapleDetail, type MapleDetailProps, MapleEmoji, type MapleEmojiProps, MapleScoreCard, type MapleScoreProps, MapleTarget, type MapleTargetProps, PUBLISH_LABEL, QUOTE_LIMIT, REVIEW_EMOJI, SCORE_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, type SheetDetent, type Shortcode, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, type Written, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, type EmojiChoice, EmojiGrid, type EmojiGridProps, KIND_AUTO, KIND_LABEL, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, type LeaveAsk, MapleActions, type MapleActionsProps, MapleAttachments, type MapleAttachmentsProps, MapleBody, type MapleBodyProps, MapleComposer, type MapleComposerProps, MapleContextBadge, type MapleContextProps, MapleDetail, type MapleDetailProps, MapleEmoji, type MapleEmojiProps, MapleScoreCard, type MapleScoreProps, MapleTarget, type MapleTargetProps, PUBLISH_LABEL, QUOTE_LIMIT, REVIEW_EMOJI, SAVE_DRAFT_LABEL, SCORE_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, type SheetDetent, type Shortcode, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, type Written, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };

package/dist/composer/index.js

@@ -1,6 +1,6 @@
 import { SHEET_BREAKPOINT_PX } from "../tokens.js";
 import { ComposerScopeError } from "./scope.js";
-import { KEEP_LABEL, MapleActions, PUBLISH_LABEL } from "./actions.js";
+import { MapleActions, PUBLISH_LABEL, SAVE_DRAFT_LABEL } from "./actions.js";
 import { ATTACH_WORDS, MapleAttachments } from "./attachments.js";
 import { CONTEXT_LABELS, MapleContextBadge } from "./badge.js";
 import { REVIEW_EMOJI, SHORTCODE_LIMIT, appended, searchEmoji, shortcodeAt, writeAt } from "./emoji.js";
@@ -13,4 +13,4 @@ import { MapleDetail, detailRows } from "./detail.js";
 import { createLeaveAsk } from "./leave.js";
 import { KIND_AUTO, KIND_LABEL, MapleScoreCard, SCORE_LABEL } from "./score.js";
 import { CLOSE_LABEL, DETAIL_ATTRIBUTE, MapleTarget } from "./target.js";
-export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, EmojiGrid, KEEP_LABEL, KIND_AUTO, KIND_LABEL, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, MapleActions, MapleAttachments, MapleBody, MapleComposer, MapleContextBadge, MapleDetail, MapleEmoji, MapleScoreCard, MapleTarget, PUBLISH_LABEL, QUOTE_LIMIT, REVIEW_EMOJI, SCORE_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, EmojiGrid, KIND_AUTO, KIND_LABEL, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, MapleActions, MapleAttachments, MapleBody, MapleComposer, MapleContextBadge, MapleDetail, MapleEmoji, MapleScoreCard, MapleTarget, PUBLISH_LABEL, QUOTE_LIMIT, REVIEW_EMOJI, SAVE_DRAFT_LABEL, SCORE_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };

package/dist/hover.js

@@ -0,0 +1,17 @@
+//#region src/hover.ts
+function within(event) {
+	const other = event.relatedTarget;
+	return other instanceof Node && event.currentTarget.contains(other);
+}
+function hoverHandlers(enter, leave) {
+	return {
+		onPointerOver: (event) => {
+			if (!within(event)) enter();
+		},
+		onPointerOut: (event) => {
+			if (!within(event)) leave();
+		}
+	};
+}
+//#endregion
+export { hoverHandlers };

package/dist/island/item.js

@@ -7,6 +7,7 @@ import { Tip } from "../tip.js";
 import { renderPart } from "../part.js";
 import { ISLAND_COPY, kindPhrase } from "./language.js";
 import { useIsland } from "./context.js";
+import { hoverHandlers } from "../hover.js";
 import { MapleLeaf } from "../marks/shape.js";
 import { absoluteTime, relativeTime } from "./time.js";
 import { createElement, forwardRef, useCallback, useRef, useState } from "react";
@@ -31,8 +32,7 @@ const Item = forwardRef(function Item(props, ref) {
 		"data-mk-selected": String(selected),
 		className: cx("mk-row", className),
 		onClick: () => client.viewComment(comment.id),
-		onPointerEnter: () => client.peek(comment.id),
-		onPointerLeave: () => client.peek(null),
+		...hoverHandlers(() => client.peek(comment.id), () => client.peek(null)),
 		onFocus: () => client.peek(comment.id),
 		onBlur: () => client.peek(null),
 		ref: composeRefs(ref, useReveal(selected))

package/dist/island/language.js

@@ -1,3 +1,4 @@
+import { COMMENT_SHORTCUT } from "@maple-kit/core/client";
 //#region src/island/language.ts
 const FILTER_LABELS = {
 	all: "All",
@@ -23,11 +24,6 @@ function tallyTitle(filter, count) {
 	const many = count === 1 ? "comment" : "comments";
 	return `${String(count)} ${FILTER_LABELS[filter].toLowerCase()} ${many} — click to show only these`;
 }
-const PICK_ORDER = [
-	"element",
-	"text",
-	"region"
-];
 const PICK_LABELS = {
 	element: "Element",
 	region: "Region",
@@ -135,8 +131,8 @@ function openLabel(count) {
 function triggerLabel(count) {
 	return `Open Maple: ${openLabel(count)}`;
 }
-function pickTitle(kind) {
-	return `Comment on ${kind} — press t while picking to cycle`;
+function pickTitle(kind, key = COMMENT_SHORTCUT) {
+	return `Comment on ${kind} — press ${key} again while picking to cycle`;
 }
 function kindPhrase(kind, human) {
 	if (human === void 0) return "somewhere on this page";
@@ -144,4 +140,4 @@ function kindPhrase(kind, human) {
 	return kind === "region" ? `an area of ${human}` : human;
 }
 //#endregion
-export { ACCOUNT_COPY, APPROVE_COPY, CORNER_LABELS, CORNER_ORDER, FILTERS_LABEL, FILTER_LABELS, FILTER_ORDER, ISLAND_COPY, PICK_LABELS, PICK_ORDER, SETTINGS_COPY, TALLY_ORDER, THEME_LABELS, THEME_TITLES, UNSENT_COPY, kindPhrase, openLabel, pickTitle, tallyTitle, triggerLabel };
+export { ACCOUNT_COPY, APPROVE_COPY, CORNER_LABELS, CORNER_ORDER, FILTERS_LABEL, FILTER_LABELS, FILTER_ORDER, ISLAND_COPY, PICK_LABELS, SETTINGS_COPY, TALLY_ORDER, THEME_LABELS, THEME_TITLES, UNSENT_COPY, kindPhrase, openLabel, pickTitle, tallyTitle, triggerLabel };

package/dist/maple.js

@@ -7,7 +7,6 @@ import { MapleComposer } from "./composer/composer.js";
 import { MapleDetail } from "./composer/detail.js";
 import { MapleScoreCard } from "./composer/score.js";
 import { MapleTarget } from "./composer/target.js";
-import { PICK_ORDER } from "./island/language.js";
 import { Approve } from "./island/approve.js";
 import { IslandContent } from "./island/content.js";
 import { Filters } from "./island/filters.js";
@@ -24,6 +23,7 @@ import { MapleMock } from "./mock/mock.js";
 import { MapleNotice } from "./notice/notice.js";
 import { MaplePicker } from "./picker/picker.js";
 import { createElement, forwardRef } from "react";
+import { PICK_ORDER } from "@maple-kit/core/client";
 //#region src/maple.ts
 const LOAD_CALLS = [
 	"load",

package/dist/marks/clearance.d.ts

@@ -0,0 +1,32 @@
+import { Box } from "./geometry.js";
+//#region src/marks/clearance.d.ts
+/** One of the four corners, as the two flips that reach it. */
+export interface LabelSpot {
+  readonly below: boolean;
+  readonly end: boolean;
+}
+/**
+ * In the order they are tried. Above-left is where a reader looks for the name
+ * of the thing under it; staying on the anchor's own edge is worth more than
+ * staying above it, so the far end of the ring is tried only after both sides.
+ */
+export declare const LABEL_SPOTS: readonly LabelSpot[];
+/** The ring and the label as it is currently drawn. */
+export interface LabelPlacement {
+  readonly ring: Box;
+  /** Measured, so the size and the gaps are the ones the stylesheet gives it. */
+  readonly label: Box;
+  /** The corner it is measured at, which is what makes those gaps readable. */
+  readonly drawn: LabelSpot;
+}
+/** The box the label would take at one corner, keeping the gaps it is drawn with. */
+export declare function labelBox(at: LabelPlacement, spot: LabelSpot): Box;
+/** True when the page paints a line of its own text anywhere inside the box. */
+export declare function pageTextIn(box: Box, overlay: Element): boolean;
+/**
+ * The first corner the window holds and the page has not written in. When
+ * every corner has text in it there is nowhere better to go, so it takes the
+ * first the window holds and carries a shadow to say it is floating.
+ */
+export declare function labelSpotFor(at: LabelPlacement, overlay: Element): LabelSpot;
+//#endregion

package/dist/marks/clearance.js

@@ -0,0 +1,72 @@
+//#region src/marks/clearance.ts
+const COLUMNS = [
+	.04,
+	.36,
+	.68,
+	.96
+];
+const ROWS = [
+	.15,
+	.5,
+	.85
+];
+const LABEL_SPOTS = [
+	{
+		below: false,
+		end: false
+	},
+	{
+		below: true,
+		end: false
+	},
+	{
+		below: false,
+		end: true
+	},
+	{
+		below: true,
+		end: true
+	}
+];
+function labelBox(at, spot) {
+	const { drawn, label, ring } = at;
+	const far = ring.x + ring.width - label.width;
+	const gap = drawn.below ? label.y - (ring.y + ring.height) : ring.y - (label.y + label.height);
+	const edge = drawn.end ? far - label.x : label.x - ring.x;
+	return {
+		x: spot.end ? far - edge : ring.x + edge,
+		y: spot.below ? ring.y + ring.height + gap : ring.y - gap - label.height,
+		width: label.width,
+		height: label.height
+	};
+}
+function pageTextIn(box, overlay) {
+	return ROWS.some((down) => COLUMNS.some((along) => glyphAt(overlay, box.x + box.width * along, box.y + box.height * down)));
+}
+function pageElementAt(overlay, x, y) {
+	return overlay.ownerDocument.elementsFromPoint(x, y).find((one) => !overlay.contains(one));
+}
+function glyphAt(overlay, x, y) {
+	const found = pageElementAt(overlay, x, y);
+	if (!found) return false;
+	const line = overlay.ownerDocument.createRange();
+	return [...found.childNodes].some((node) => {
+		if (node.nodeType !== Node.TEXT_NODE || (node.textContent ?? "").trim() === "") return false;
+		line.selectNodeContents(node);
+		return [...line.getClientRects()].some((rect) => inside(rect, x, y));
+	});
+}
+function inside(rect, x, y) {
+	return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+function labelSpotFor(at, overlay) {
+	const view = overlay.ownerDocument.defaultView?.innerHeight ?? 0;
+	const tried = LABEL_SPOTS.map((spot) => ({
+		spot,
+		box: labelBox(at, spot)
+	}));
+	const held = tried.filter(({ box }) => box.y >= 0 && box.y + box.height <= view);
+	return (held.find(({ box }) => !pageTextIn(box, overlay)) ?? held[0] ?? tried[0]).spot;
+}
+//#endregion
+export { LABEL_SPOTS, labelBox, labelSpotFor, pageTextIn };

package/dist/marks/css.js

@@ -232,9 +232,8 @@ function ringCss() {
   will-change: transform;
 }
 
-.mk-ring[data-mk-state="hovered"] {
-  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--mk-accent) 60%, transparent);
-}
+/* No quieter hovered ring: pointing at a mark or tabbing onto it is asking
+   "which one", and a hairline answered it too faintly to be seen. */
 
 /* A passage is its own lines and nothing else: the box around them is the
    paragraph, and outlining that says the comment is on the paragraph. */
@@ -254,7 +253,9 @@ function ringCss() {
 
 
 /* Anchored to the ring's edge rather than offset by a number: the label is two
-   lines in developer detail and one line the rest of the time. */
+   lines in developer detail and one line the rest of the time. The shadow is
+   for the anchor with text in all four of its corners, where the label has to
+   cover something and has to read as floating over it rather than part of it. */
 .mk-ring-label {
   position: absolute;
   bottom: 100%;
@@ -266,6 +267,7 @@ function ringCss() {
   padding: 1px 7px 2px;
   border-radius: var(--mk-r-xs) var(--mk-r-xs) var(--mk-r-xs) 0;
   background: var(--mk-accent);
+  box-shadow: var(--mk-sh2);
   color: var(--mk-accent-ink);
   font-size: 10px;
   font-weight: 600;
@@ -278,6 +280,18 @@ function ringCss() {
   border-radius: 0 var(--mk-r-xs) var(--mk-r-xs) var(--mk-r-xs);
 }
 
+/* The square corner is the one against the ring, so the label always points
+   back at what it names, from whichever of the four corners it took. */
+.mk-ring-label[data-mk-end] {
+  right: -2px;
+  left: auto;
+  border-radius: var(--mk-r-xs) var(--mk-r-xs) 0 var(--mk-r-xs);
+}
+
+.mk-ring-label[data-mk-below][data-mk-end] {
+  border-radius: var(--mk-r-xs) 0 var(--mk-r-xs) var(--mk-r-xs);
+}
+
 .mk-ring-name,
 .mk-ring-note {
   display: block;

package/dist/marks/index.d.ts

@@ -1,7 +1,8 @@
 import { AvatarProps, MapleAvatar, initialsOf } from "./avatar.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 { LABEL_SPOTS, LabelPlacement, LabelSpot, labelBox, labelSpotFor, pageTextIn } from "./clearance.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";
@@ -9,7 +10,7 @@ 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 { PIXEL_LEAF_SHADES, PIXEL_LEAF_VIEW_BOX } from "./pixel-leaf.js";
-import { Placement, addresses, placements } from "./placement.js";
-import { BELOW_ATTRIBUTE, MapleTargetRing, RingState, TargetRingProps } from "./ring.js";
+import { DraftPlacement, Located, Placement, addresses, placements } from "./placement.js";
+import { BELOW_ATTRIBUTE, END_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, PIXEL_LEAF_SHADES, PIXEL_LEAF_VIEW_BOX, 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 };
+export { MapleAvatar as Avatar, type AvatarProps, BELOW_ATTRIBUTE, type Box, COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, type DraftPlacement, END_ATTRIBUTE, HALF, LABEL_SPOTS, LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX, type LabelPlacement, type LabelSpot, MapleLeaf as Leaf, type LeafProps, type Located, 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, PIXEL_LEAF_SHADES, PIXEL_LEAF_VIEW_BOX, type Paint, type Placement, type RingLabel, type RingState, MapleTargetRing as TargetRing, type TargetRingProps, type Waterline, addresses, clampNudge, culled, dragged, flag, initialsOf, kindPhrase, labelBox, labelSpotFor, markLabel, markSpot, markTitle, marksCss, nextClipId, pageTextIn, place, placeMark, placements, ringBox, ringLabel, runBox, startFrameLoop, useFrameLoop, useNudges, viewportHeight, waterline };

package/dist/marks/index.js

@@ -4,12 +4,13 @@ import { COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, MARK_HIT_PX,
 import { LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX } from "./leaf.js";
 import { HALF, MapleLeaf, nextClipId } from "./shape.js";
 import { MapleAvatar, initialsOf } from "./avatar.js";
+import { LABEL_SPOTS, labelBox, labelSpotFor, pageTextIn } from "./clearance.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 { BELOW_ATTRIBUTE, END_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, PIXEL_LEAF_SHADES, PIXEL_LEAF_VIEW_BOX, 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 };
+export { MapleAvatar as Avatar, BELOW_ATTRIBUTE, COLLISION_GAP_PX, COLLISION_MAX_TRIES, COLLISION_STEP_PX, END_ATTRIBUTE, HALF, LABEL_SPOTS, 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, PIXEL_LEAF_SHADES, PIXEL_LEAF_VIEW_BOX, MapleTargetRing as TargetRing, addresses, clampNudge, culled, dragged, flag, initialsOf, kindPhrase, labelBox, labelSpotFor, markLabel, markSpot, markTitle, marksCss, nextClipId, pageTextIn, place, placeMark, placements, ringBox, ringLabel, runBox, startFrameLoop, useFrameLoop, useNudges, viewportHeight, waterline };

package/dist/marks/label.d.ts

@@ -17,7 +17,10 @@ export declare function kindPhrase(kind: PickKind | undefined, human: string | u
 /** 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;
+export declare function markTitle(author: string | undefined, status: CommentStatus | "draft", on?: string): string;
+/**
+ * The mark's accessible name. The address comes first, because it is the
+ * address; a draft has none yet, and says it is one instead.
+ */
+export declare function markLabel(address: number | undefined, author: string | undefined, status: CommentStatus): string;
 //#endregion

package/dist/marks/label.js

@@ -17,15 +17,18 @@ function ringLabel(label) {
 function joined(parts) {
 	return parts.filter(Boolean).join(" · ");
 }
+const DRAFT_LABEL = "Draft";
 function markTitle(author, status, on) {
 	return joined([
 		author,
-		STATUS_LABELS[status],
+		status === "draft" ? DRAFT_LABEL : STATUS_LABELS[status],
 		on
 	]);
 }
 function markLabel(address, author, status) {
-	return `Comment ${address}${author ? ` by ${author}` : ""}, ${STATUS_LABELS[status]}`;
+	const who = author ? ` by ${author}` : "";
+	if (address === void 0) return `${DRAFT_LABEL} comment${who}`;
+	return `Comment ${address}${who}, ${STATUS_LABELS[status]}`;
 }
 //#endregion
-export { NOTHING_NAMED, kindPhrase, markLabel, markTitle, ringLabel };
+export { DRAFT_LABEL, NOTHING_NAMED, kindPhrase, markLabel, markTitle, ringLabel };

package/dist/marks/layer.js

@@ -1,11 +1,12 @@
 import { useMapleUi } from "../context.js";
+import { hoverHandlers } from "../hover.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 { addresses, draftPlacements, 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";
@@ -32,15 +33,17 @@ const MapleMarkLayer = forwardRef(function MapleMarkLayer(props, ref) {
 		address,
 		container
 	]);
+	const drafts = useWaiting(state);
+	const drafted = useMemo(() => draftPlacements(drafts, container.ownerDocument), [drafts, 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, {
+		for (const [id, located] of everything(placed, drafted)) {
+			const node = nodes.current.get(id);
+			const moved = nudges.of(id);
+			if (node) taken.push(step(node, located, {
 				height,
 				taken,
 				...moved ? { moved } : {}
@@ -48,6 +51,7 @@ const MapleMarkLayer = forwardRef(function MapleMarkLayer(props, ref) {
 		}
 	}, [
 		container,
+		drafted,
 		nudges,
 		placed
 	]);
@@ -63,10 +67,7 @@ const MapleMarkLayer = forwardRef(function MapleMarkLayer(props, ref) {
 		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)
+		...pointing(client, placement.comment.id)
 	})), [
 		client,
 		nudges,
@@ -75,12 +76,29 @@ const MapleMarkLayer = forwardRef(function MapleMarkLayer(props, ref) {
 		placed,
 		selectedId
 	]);
+	const unsent = useMemo(() => drafted.map((placement) => createElement(MapleMark, {
+		...draftProps(placement, {
+			peeked,
+			nudges
+		}),
+		...nudges.handlersFor(placement.draft.id),
+		key: placement.draft.id,
+		ref: keep(nodes.current, placement.draft.id),
+		onClick: () => client.resumeDraft(placement.draft.id),
+		...pointing(client, placement.draft.id)
+	})), [
+		client,
+		drafted,
+		nudges,
+		peeked
+	]);
 	return createElement("div", {
 		className: className ? `mk-marks ${className}` : "mk-marks",
 		ref
-	}, ...marks, createElement(MapleTargetRing, ringFor({
+	}, ...unsent, ...marks, createElement(MapleTargetRing, ringFor({
 		client: state,
 		placed,
+		drafted,
 		pointing: {
 			peeked,
 			selected: selectedId
@@ -98,6 +116,21 @@ function useScrollTo(placed, selectedId) {
 		});
 	}, [target]);
 }
+function useWaiting(state) {
+	const { composer, drafts } = state;
+	const writing = composer.open ? composer.draftId : void 0;
+	return useMemo(() => writing === void 0 ? drafts : drafts.filter((draft) => draft.id !== writing), [drafts, writing]);
+}
+function everything(placed, drafted) {
+	return [...placed.map((one) => [one.comment.id, one]), ...drafted.map((one) => [one.draft.id, one])];
+}
+function pointing(client, id) {
+	return {
+		...hoverHandlers(() => client.peek(id), () => client.peek(null)),
+		onFocus: () => client.peek(id),
+		onBlur: () => client.peek(null)
+	};
+}
 function boxOf(placement) {
 	const box = placement.range?.getBoundingClientRect() ?? placement.element.getBoundingClientRect();
 	return placement.region === void 0 ? box : regionBox(box, placement.region);
@@ -139,6 +172,20 @@ function markProps(placement, view) {
 		...comment.author.colorSlot === void 0 ? {} : { colorSlot: comment.author.colorSlot }
 	};
 }
+function draftProps(placement, view) {
+	const { draft } = placement;
+	return {
+		sent: false,
+		confidence: placement.confidence,
+		on: ringLabel({
+			kind: kindOf(draft.anchor),
+			element: placement.element
+		}),
+		peeked: draft.id === view.peeked,
+		nudged: view.nudges.of(draft.id) !== void 0,
+		dragging: view.nudges.dragging === draft.id
+	};
+}
 function ringFor(input) {
 	const peeked = marked(input, input.pointing.peeked, "hovered");
 	if (peeked) return peeked;
@@ -147,22 +194,35 @@ function ringFor(input) {
 	return marked(input, input.pointing.selected, "selected") ?? {};
 }
 function marked(input, id, state) {
-	const hit = input.placed.find((placement) => placement.comment.id === id);
+	const hit = drawn(input, 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),
+			kind: kindOf(hit.anchor),
 			element: hit.element
 		}),
 		...noteFor({
-			anchor: hit.comment.anchor,
+			anchor: hit.anchor,
 			element: hit.element
 		}, input.client.detail),
 		state
 	};
 }
+function drawn(input, id) {
+	if (id === void 0) return void 0;
+	const comment = input.placed.find((placement) => placement.comment.id === id);
+	if (comment) return {
+		...comment,
+		anchor: comment.comment.anchor
+	};
+	const draft = input.drafted.find((placement) => placement.draft.id === id);
+	return draft ? {
+		...draft,
+		anchor: draft.draft.anchor
+	} : void 0;
+}
 function composing(target, input) {
 	const found = resolveAnchor(target.anchor, {
 		root: input.root,

package/dist/marks/mark.d.ts

@@ -4,8 +4,8 @@ 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;
+  /** The address: the number the list and the export table also show. A draft has none. */
+  readonly address?: number;
   readonly status?: CommentStatus;
   /** False for a comment still being written, which is the dashed form. */
   readonly sent?: boolean;

package/dist/marks/mark.js

@@ -27,13 +27,13 @@ const MapleMark = forwardRef(function MapleMark(props, ref) {
 		}),
 		"aria-label": markLabel(address, author, status),
 		"aria-pressed": selected ?? false,
-		title: markTitle(author, status, on),
+		title: markTitle(author, sent === false ? "draft" : 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", {
+	}), address === void 0 ? null : createElement("span", {
 		key: "n",
 		className: "mk-mark-n mk-num",
 		"data-mk-digits": String(String(address).length)

package/dist/marks/placement.d.ts

@@ -1,11 +1,9 @@
+import { Draft } from "@maple-kit/core/overlay";
 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;
+/** Where on the page something is, whether it was published or not. */
+export interface Located {
   readonly element: Element;
   /** The passage itself, when a text rung placed it. */
   readonly range?: Range;
@@ -13,6 +11,16 @@ export interface Placement {
   readonly region?: AnchorRegion;
   readonly confidence: number;
 }
+/** A comment the page still has somewhere to put. */
+export interface Placement extends Located {
+  readonly comment: Comment;
+  /** The address: its place in the branch's own order, counted from one. */
+  readonly address: number;
+}
+/** A draft the page still has somewhere to put. No address until it is sent. */
+export interface DraftPlacement extends Located {
+  readonly draft: Draft;
+}
 /** The address of every comment, which the list and the export share. */
 export declare function addresses(comments: readonly Comment[]): ReadonlyMap<string, number>;
 /**

package/dist/marks/placement.js

@@ -7,22 +7,37 @@ 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({
+		const found = locate(comment.anchor, root);
+		if (found) placed.push({
+			...found,
 			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
+			address: address.get(comment.id) ?? 0
 		});
 	}
 	return placed;
 }
+function draftPlacements(drafts, root) {
+	return drafts.flatMap((draft) => {
+		const found = locate(draft.anchor, root);
+		return found ? [{
+			...found,
+			draft
+		}] : [];
+	});
+}
+function locate(anchor, root) {
+	const passage = kindOf(anchor) === "text";
+	const found = resolveAnchor(anchor, {
+		root,
+		passage
+	});
+	if (found.status !== "resolved") return void 0;
+	return {
+		element: found.element,
+		...found.range === void 0 ? {} : { range: found.range },
+		...anchor.region === void 0 ? {} : { region: anchor.region },
+		confidence: found.confidence
+	};
+}
 //#endregion
-export { addresses, placements };
+export { addresses, draftPlacements, placements };

package/dist/marks/ring.d.ts

@@ -1,7 +1,9 @@
 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. */
+/** Set on the label when it was moved under the anchor to clear page text. */
 export declare const BELOW_ATTRIBUTE = "data-mk-below";
+/** The same, for the move to the anchor's far end. The two combine. */
+export declare const END_ATTRIBUTE = "data-mk-end";
 /**
  * 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.

package/dist/marks/ring.js

@@ -1,14 +1,14 @@
 import { useMapleUi } from "../context.js";
 import { composeRefs } from "../slot.js";
 import { culled, ringBox, runBox } from "./geometry.js";
+import { labelSpotFor } from "./clearance.js";
 import { useFrameLoop, viewportHeight } from "./frame.js";
 import { MOVING_ATTRIBUTE, OFF_ATTRIBUTE, flag, place } from "./paint.js";
 import { createElement, forwardRef, useCallback, useRef, useState } from "react";
 import { regionBox } from "@maple-kit/core/anchor";
 //#region src/marks/ring.ts
 const BELOW_ATTRIBUTE = "data-mk-below";
-const LABEL_ROOM_PX = 26;
-const NOTE_ROOM_PX = 40;
+const END_ATTRIBUTE = "data-mk-end";
 const PART = "Maple.TargetRing";
 function linesOf(target) {
 	return "startContainer" in target ? [...target.getClientRects()] : [];
@@ -18,7 +18,6 @@ function empty(rect) {
 }
 const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
 	const { className, label, note, region, state = "composing", target } = props;
-	const room = note === void 0 ? LABEL_ROOM_PX : NOTE_ROOM_PX;
 	const { container } = useMapleUi(PART);
 	const ring = useRef(null);
 	const cap = useRef(null);
@@ -33,8 +32,9 @@ const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
 		flag(node, OFF_ATTRIBUTE, away);
 		flag(node, MOVING_ATTRIBUTE, moving);
 		if (away) return;
-		place(node, ringBox(rect));
-		if (cap.current) flag(cap.current, BELOW_ATTRIBUTE, rect.y < room);
+		const drawn = ringBox(rect);
+		place(node, drawn);
+		if (cap.current && !moving) corner(cap.current, drawn, container);
 		const boxes = region === void 0 ? linesOf(target) : [];
 		if (boxes.length !== lines) setLines(boxes.length);
 		boxes.forEach((box, index) => {
@@ -45,7 +45,6 @@ const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
 		container,
 		lines,
 		region,
-		room,
 		target
 	]);
 	useFrameLoop(PART, paint);
@@ -60,6 +59,19 @@ const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
 		})
 	}, label === void 0 ? null : caption(label, note, cap), ...run(lines, runs));
 });
+function corner(cap, ring, overlay) {
+	const drawn = {
+		below: cap.hasAttribute(BELOW_ATTRIBUTE),
+		end: cap.hasAttribute(END_ATTRIBUTE)
+	};
+	const spot = labelSpotFor({
+		ring,
+		label: cap.getBoundingClientRect(),
+		drawn
+	}, overlay);
+	flag(cap, BELOW_ATTRIBUTE, spot.below);
+	flag(cap, END_ATTRIBUTE, spot.end);
+}
 function caption(label, note, ref) {
 	return createElement("span", {
 		className: "mk-ring-label",
@@ -82,4 +94,4 @@ function run(lines, runs) {
 	}));
 }
 //#endregion
-export { BELOW_ATTRIBUTE, MapleTargetRing };
+export { BELOW_ATTRIBUTE, END_ATTRIBUTE, MapleTargetRing };

package/dist/picker/language.d.ts

@@ -7,7 +7,7 @@ export declare const PICKER_COPY: {
   readonly cancel: "Cancel";
   readonly cancelHint: "Esc";
   readonly bar: "Choosing what to comment on";
-  readonly cycle: "Press t to cycle";
+  readonly cycle: "Press c again to cycle";
 };
 /** What a screen reader hears on the bar while a pick is armed. */
 export declare function pickerLabel(kind: PickKind): string;

package/dist/picker/language.js

@@ -8,7 +8,7 @@ const PICKER_COPY = {
 	cancel: "Cancel",
 	cancelHint: "Esc",
 	bar: "Choosing what to comment on",
-	cycle: "Press t to cycle"
+	cycle: "Press c again to cycle"
 };
 function pickerLabel(kind) {
 	return `${PICKER_COPY.bar}: ${PICK_HINTS[kind]}.`;

package/dist/picker/picker.js

@@ -1,12 +1,12 @@
 import { useMapleUi } from "../context.js";
 import { useShots } from "../shots.js";
-import { PICK_ORDER } from "../island/language.js";
 import { ringLabel } from "../marks/label.js";
 import { MapleTargetRing } from "../marks/ring.js";
 import { PICKER_COPY, PICK_HINTS, pickerLabel } from "./language.js";
 import { startSession } from "./session.js";
 import { elementOf, targetFor } from "./target.js";
-import { Fragment, createElement, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, createElement, useCallback, useEffect, useState } from "react";
+import { PICK_ORDER } from "@maple-kit/core/client";
 import { captureContext, watchPickKeys } from "@maple-kit/core/overlay";
 import { useMaple, useMapleClient } from "@maple-kit/react";
 import { captureElement } from "@maple-kit/core/screenshot";
@@ -41,7 +41,7 @@ function MaplePicker(props) {
 		pick.armed,
 		root
 	]);
-	useKeys(pick.armed, kind, client);
+	useKeys(pick.armed, client);
 	if (!pick.armed || !kind) return null;
 	return createElement(Fragment, null, kind === "text" ? null : createElement("div", { className: shieldClass(props, kind) }), band ? createElement("div", {
 		className: "mk-band",
@@ -78,16 +78,13 @@ function capture(element, shots) {
 function reasonOf(error) {
 	return error instanceof Error ? error.message : String(error);
 }
-function useKeys(armed, kind, client) {
-	const latest = useRef(kind);
-	latest.current = kind;
+function useKeys(armed, client) {
 	useEffect(() => {
 		if (!armed) return;
 		const stop = new AbortController();
 		watchPickKeys({
 			signal: stop.signal,
-			onCancel: () => client.disarm(),
-			onCycle: () => client.arm(next(latest.current))
+			onCancel: () => client.disarm()
 		});
 		return () => stop.abort();
 	}, [armed, client]);
@@ -97,10 +94,6 @@ function onOwnControl(event, root) {
 	if (!(target instanceof Element) || target.getRootNode() !== root) return false;
 	return !target.classList.contains("mk-shield");
 }
-function next(kind) {
-	const at = kind === void 0 ? -1 : PICK_ORDER.indexOf(kind);
-	return PICK_ORDER[(at + 1) % PICK_ORDER.length] ?? "element";
-}
 function Hint(props) {
 	const client = useMapleClient();
 	return createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maple-kit/ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Maple's composed reviewer parts: the marks, the island and the composer",
   "license": "Apache-2.0",
   "type": "module",
@@ -33,9 +33,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@maple-kit/core": "0.10.0",
-    "@maple-kit/mock": "0.10.0",
-    "@maple-kit/react": "0.10.0"
+    "@maple-kit/core": "0.12.0",
+    "@maple-kit/mock": "0.12.0",
+    "@maple-kit/react": "0.12.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",