@maple-kit/ui 0.14.0 → 0.15.0

package/dist/composer/attachments.js

@@ -83,28 +83,33 @@ function filled(scope, held) {
 			src: scope.pending?.preview.url,
 			alt: ATTACH_WORDS.alt
 		}),
-		said(taking(held), captured && keeps, "said"),
+		createElement("span", {
+			key: "body",
+			className: "mk-shot-body"
+		}, said(taking(held), captured && keeps, "said", "mk-shot-said mk-shot-line"), failed ? createElement("span", {
+			key: "bad",
+			className: "mk-chip"
+		}, ATTACH_WORDS.failed) : null),
 		createElement("button", {
 			key: "off",
 			type: "button",
 			className: "mk-btn mk-btn-quiet mk-press",
 			onClick: scope.clear
-		}, ATTACH_WORDS.remove),
-		failed ? createElement("span", {
-			key: "bad",
-			className: "mk-chip"
-		}, ATTACH_WORDS.failed) : null
+		}, ATTACH_WORDS.remove)
 	];
 }
-function said(words, byMaple, key) {
+function said(words, byMaple, key, className = "mk-shot-said") {
 	return createElement("span", {
 		key,
-		className: "mk-shot-said",
+		className,
 		...byMaple ? { "data-mk-maple": "true" } : {}
 	}, byMaple ? createElement(SparkleIcon, {
 		key: "spark",
 		size: 12
-	}) : null, words);
+	}) : null, createElement("span", {
+		key: "words",
+		className: "mk-shot-words"
+	}, words));
 }
 function taking(held) {
 	if (!held.keeps) return ATTACH_WORDS.notKept;

package/dist/composer/badge.js

@@ -8,12 +8,12 @@ const CONTEXT_LABELS = {
 	open: "Hide what was captured"
 };
 const MapleContextBadge = forwardRef(function MapleContextBadge(props, ref) {
-	const { composer, detail } = useMaple();
+	const { composer } = useMaple();
 	const client = useMapleClient();
 	const context = props.context ?? composer.target?.context;
 	const Element = props.asChild ? Slot : "section";
 	if (!context) return null;
-	const rows = contextRows(context, detail);
+	const rows = contextRows(context);
 	const collapsible = props.collapsible !== false && composer.viewing === void 0;
 	const open = !collapsible || composer.contextOpen;
 	return createElement(Element, {

package/dist/composer/css.js

@@ -239,6 +239,42 @@ function scoreCard() {
   background: var(--mk-line);
 }
 
+`.trim();
+}
+function shotBodyCss() {
+	return `
+/* The held image's caption and its failure share one column between the
+   thumbnail and Remove, so a failure adds a line rather than a layout. */
+.mk-shot-body {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+.mk-shot-body .mk-shot-said {
+  flex: none;
+  max-width: 100%;
+}
+
+.mk-shot-line .mk-shot-words {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mk-shot-body .mk-chip {
+  max-width: 100%;
+  white-space: normal;
+  border-radius: var(--mk-r-xs);
+}
+
+.mk-shots > .mk-btn {
+  flex: none;
+}
 `.trim();
 }
 function kindChip() {
@@ -561,6 +597,8 @@ ${scoreCard()}
 
 ${kindChip()}
 
+${shotBodyCss()}
+
 .mk-leave {
   position: absolute;
   top: 12px;

package/dist/island/css.js

@@ -12,6 +12,7 @@ function islandCss() {
 		rowDetail(),
 		developer(),
 		ledger(),
+		transfer(),
 		newComment(),
 		keyframes(),
 		sheet()
@@ -936,6 +937,78 @@ function developer() {
 
 `.trim();
 }
+function transfer() {
+	return `
+.mk-transfer,
+.mk-transfer-other {
+  flex: none;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 8px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--mk-line);
+  background: var(--mk-sunk);
+  color: var(--mk-faint);
+  font-size: 11px;
+}
+
+.mk-transfer-said {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.mk-transfer-said code {
+  color: var(--mk-muted);
+  font-family: inherit;
+  font-weight: 600;
+}
+
+.mk-transfer-panel,
+.mk-transfer-note {
+  flex: 1 1 100%;
+  margin: 0;
+}
+
+.mk-transfer-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mk-transfer-box {
+  box-sizing: border-box;
+  width: 100%;
+  resize: vertical;
+  padding: 6px 8px;
+  border: 1px solid var(--mk-line);
+  border-radius: 6px;
+  background: var(--mk-bg);
+  color: var(--mk-fg);
+  font: inherit;
+  font-size: 11px;
+}
+
+.mk-transfer-row,
+.mk-transfer-ask {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.mk-transfer-file {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--mk-muted);
+  font-size: 11px;
+}
+
+.mk-unsent-copy:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+`;
+}
 function ledger() {
 	return `
 .mk-unsent {
@@ -1017,6 +1090,22 @@ function ledger() {
   cursor: pointer;
 }
 
+.mk-unsent-where {
+  flex: none;
+  max-width: 45%;
+  color: var(--mk-faint);
+  font-size: 11px;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mk-unsent-where:hover {
+  color: var(--mk-fg);
+}
+
 .mk-unsent-drop {
   flex: none;
   padding: 2px 7px;

package/dist/island/index.d.ts

@@ -15,7 +15,8 @@ import { NewComment, NewCommentProps, PickButton, PickButtonProps } from "./new-
 import { Settings, SettingsProps } from "./settings.js";
 import { STAGGER_ROWS } from "./stagger.js";
 import { absoluteTime, relativeTime } from "./time.js";
+import { ImportDrafts, ImportDraftsProps, OtherDrafts, OtherDraftsProps } from "./transfer.js";
 import { IslandTrigger, IslandTriggerProps } from "./trigger.js";
 import { Unsent, UnsentProps } from "./unsent.js";
 import { WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, WordmarkProps } from "./wordmark.js";
-export { APPROVE_COPY, Account, type AccountProps, Approve, type ApproveProps, Branch, type BranchProps, DRAGGING_ATTRIBUTE, DRAG_THRESHOLD_PX, type DragHandlers, FILTER_LABELS, type FilterCounts, Filters, type FiltersProps, Header, type HeaderProps, ISLAND_COPY, Island, IslandContent, type IslandContentProps, IslandContextError, type IslandContextValue, type IslandPhase, type IslandProps, IslandTrigger, type IslandTriggerProps, Item, type ItemProps, List, type ListProps, Logo, type LogoProps, NewComment, type NewCommentProps, PickButton, type PickButtonProps, type PointerEventLike, SETTINGS_COPY, STAGGER_ROWS, Settings, type SettingsProps, TIME_DELAY_MS, UNSENT_COPY, Unsent, type UnsentProps, WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, type WordmarkProps, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };
+export { APPROVE_COPY, Account, type AccountProps, Approve, type ApproveProps, Branch, type BranchProps, DRAGGING_ATTRIBUTE, DRAG_THRESHOLD_PX, type DragHandlers, FILTER_LABELS, type FilterCounts, Filters, type FiltersProps, Header, type HeaderProps, ISLAND_COPY, ImportDrafts, type ImportDraftsProps, Island, IslandContent, type IslandContentProps, IslandContextError, type IslandContextValue, type IslandPhase, type IslandProps, IslandTrigger, type IslandTriggerProps, Item, type ItemProps, List, type ListProps, Logo, type LogoProps, NewComment, type NewCommentProps, OtherDrafts, type OtherDraftsProps, PickButton, type PickButtonProps, type PointerEventLike, SETTINGS_COPY, STAGGER_ROWS, Settings, type SettingsProps, TIME_DELAY_MS, UNSENT_COPY, Unsent, type UnsentProps, WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, type WordmarkProps, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };

package/dist/island/index.js

@@ -16,6 +16,7 @@ import { Item, TIME_DELAY_MS } from "./item.js";
 import { List } from "./list.js";
 import { NewComment, PickButton } from "./new-comment.js";
 import { Settings } from "./settings.js";
+import { ImportDrafts, OtherDrafts } from "./transfer.js";
 import { IslandTrigger } from "./trigger.js";
 import { Unsent } from "./unsent.js";
-export { APPROVE_COPY, Account, Approve, Branch, DRAGGING_ATTRIBUTE, DRAG_THRESHOLD_PX, FILTER_LABELS, Filters, Header, ISLAND_COPY, Island, IslandContent, IslandContextError, IslandTrigger, Item, List, Logo, NewComment, PickButton, SETTINGS_COPY, STAGGER_ROWS, Settings, TIME_DELAY_MS, UNSENT_COPY, Unsent, WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };
+export { APPROVE_COPY, Account, Approve, Branch, DRAGGING_ATTRIBUTE, DRAG_THRESHOLD_PX, FILTER_LABELS, Filters, Header, ISLAND_COPY, ImportDrafts, Island, IslandContent, IslandContextError, IslandTrigger, Item, List, Logo, NewComment, OtherDrafts, PickButton, SETTINGS_COPY, STAGGER_ROWS, Settings, TIME_DELAY_MS, UNSENT_COPY, Unsent, WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };

package/dist/island/language.d.ts

@@ -53,10 +53,13 @@ export declare const UNSENT_COPY: {
   readonly copy: "Copy";
   readonly copied: "Copied";
   readonly copyHint: "Every unsent comment as markdown, to paste into an agent or a ticket.";
+  readonly export: "Export";
+  readonly exportHint: "Every unsent comment as a file another browser can import.";
   readonly resumeHint: "Open it again";
   readonly discard: "Throw this one away";
   readonly discardGlyph: "✕";
   readonly blank: "(nothing written yet)";
+  readonly elsewhere: (path: string) => string;
 };
 /** Copy with no better home than a name. */
 export declare const ISLAND_COPY: {

package/dist/island/language.js

@@ -104,10 +104,35 @@ const UNSENT_COPY = {
 	copy: "Copy",
 	copied: "Copied",
 	copyHint: "Every unsent comment as markdown, to paste into an agent or a ticket.",
+	export: "Export",
+	exportHint: "Every unsent comment as a file another browser can import.",
 	resumeHint: "Open it again",
 	discard: "Throw this one away",
 	discardGlyph: "✕",
-	blank: "(nothing written yet)"
+	blank: "(nothing written yet)",
+	elsewhere: (path) => `On another page · ${path}`
+};
+const TRANSFER_COPY = {
+	open: "Import drafts",
+	close: "Close import",
+	boxLabel: "An exported drafts file",
+	boxHint: "Paste an export here, or drop its file",
+	fileLabel: "Choose an exported drafts file",
+	add: "Add",
+	addHere: "Add here",
+	cancel: "Cancel",
+	unreadable: "That is not a Maple drafts export.",
+	unsupported: "That export is from a newer Maple than this page.",
+	ask: (branch, count) => `${String(count)} ${count === 1 ? "draft was" : "drafts were"} written on ${branch}. Add ${count === 1 ? "it" : "them"} here?`,
+	result: (result) => [
+		`Added ${String(result.added)}`,
+		result.skipped > 0 ? `${String(result.skipped)} already here` : "",
+		result.expired > 0 ? `${String(result.expired)} too old` : "",
+		result.invalid > 0 ? `${String(result.invalid)} not drafts` : ""
+	].filter(Boolean).join(" · "),
+	found: (count) => `${String(count)} ${count === 1 ? "draft" : "drafts"} saved under`,
+	move: "Move here",
+	dismiss: "Dismiss"
 };
 const ISLAND_COPY = {
 	title: "Comments",
@@ -140,4 +165,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, 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, TRANSFER_COPY, UNSENT_COPY, kindPhrase, openLabel, pickTitle, tallyTitle, triggerLabel };

package/dist/island/list.js

@@ -3,6 +3,7 @@ import { renderPart } from "../part.js";
 import { FILTER_LABELS, ISLAND_COPY } from "./language.js";
 import { byReason } from "./comments.js";
 import { listId, reasonOf, useIsland } from "./context.js";
+import { isSetupGap } from "../notice/language.js";
 import { Fragment, createElement, forwardRef } from "react";
 import { useComments, useMaple } from "@maple-kit/react";
 //#region src/island/list.ts
@@ -10,9 +11,9 @@ const PART = "<Maple.List>";
 const List = forwardRef(function List(props, ref) {
 	const { asChild, children, className, ...rest } = props;
 	const island = useIsland(PART);
-	const { error, filter, phase } = useMaple();
+	const { error, filter, github, phase } = useMaple();
 	const comments = useComments();
-	const failed = error?.during === "load";
+	const failed = error?.during === "load" && !isSetupGap(error.kind, github);
 	const rows = filter === "unpinned" ? byReason(comments, (comment) => reasonOf(island.resolutions, comment.id)) : comments;
 	const body = rows.length === 0 ? renderPart("p", false, { className: "mk-empty" }, nothing(phase, failed)) : rows.map((comment) => createElement(Fragment, { key: comment.id }, children?.(comment)));
 	return renderPart("div", asChild, {

package/dist/island/transfer.d.ts

@@ -0,0 +1,16 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/transfer.d.ts
+/** The section. Its children replace everything inside it. */
+export interface ImportDraftsProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** The row. Its children replace everything inside it. */
+export interface OtherDraftsProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** Import from a paste or a file, drawn as one quiet button until it is used. */
+export declare const ImportDrafts: import("react").ForwardRefExoticComponent<ImportDraftsProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A row that says drafts exist under another branch here, and offers to bring them. */
+export declare const OtherDrafts: import("react").ForwardRefExoticComponent<OtherDraftsProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/island/transfer.js

@@ -0,0 +1,116 @@
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
+import { TRANSFER_COPY } from "./language.js";
+import { createElement, forwardRef, useState } from "react";
+import { useMapleClient } from "@maple-kit/react";
+//#region src/island/transfer.ts
+function said(result) {
+	return TRANSFER_COPY.result(result);
+}
+const ImportDrafts = forwardRef(function ImportDrafts(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const client = useMapleClient();
+	const [open, setOpen] = useState(false);
+	const [text, setText] = useState("");
+	const [note, setNote] = useState();
+	const [asking, setAsking] = useState();
+	const settle = (outcome) => {
+		setNote(outcome.ok ? said(outcome) : TRANSFER_COPY[outcome.reason]);
+		if (outcome.ok) setText("");
+		setAsking(void 0);
+	};
+	const add = () => {
+		const preview = client.previewDraftImport(text);
+		if (!preview.ok) return settle(preview);
+		if (preview.sameBranch) return settle(client.importDrafts(text));
+		setNote(void 0);
+		setAsking(preview);
+	};
+	const load = (file) => {
+		file?.text().then(setText, () => setNote(TRANSFER_COPY.unreadable));
+	};
+	const body = asking ? createElement("div", {
+		key: "ask",
+		className: "mk-transfer-ask",
+		role: "alert"
+	}, createElement("span", null, TRANSFER_COPY.ask(asking.branch, asking.count)), button(TRANSFER_COPY.addHere, () => settle(client.importDrafts(text))), button(TRANSFER_COPY.cancel, () => setAsking(void 0))) : [createElement("textarea", {
+		key: "box",
+		className: "mk-transfer-box",
+		"aria-label": TRANSFER_COPY.boxLabel,
+		placeholder: TRANSFER_COPY.boxHint,
+		value: text,
+		rows: 3,
+		onChange: (event) => setText(event.target.value),
+		onDragOver: (event) => event.preventDefault(),
+		onDrop: (event) => {
+			event.preventDefault();
+			load(event.dataTransfer.files[0]);
+		}
+	}), createElement("div", {
+		key: "row",
+		className: "mk-transfer-row"
+	}, createElement("input", {
+		type: "file",
+		accept: "application/json,.json",
+		className: "mk-transfer-file",
+		"aria-label": TRANSFER_COPY.fileLabel,
+		onChange: (event) => load(event.target.files?.[0])
+	}), button(TRANSFER_COPY.add, add, text.trim() === ""))];
+	return renderPart("div", asChild, {
+		...rest,
+		className: cx("mk-transfer", className),
+		ref
+	}, children ?? [
+		button(open ? TRANSFER_COPY.close : TRANSFER_COPY.open, () => setOpen(!open), false, {
+			key: "toggle",
+			"aria-expanded": open
+		}),
+		open ? createElement("div", {
+			key: "panel",
+			className: "mk-transfer-panel"
+		}, body) : null,
+		note === void 0 ? null : createElement("p", {
+			key: "note",
+			className: "mk-transfer-note",
+			role: "status"
+		}, note)
+	]);
+});
+const OtherDrafts = forwardRef(function OtherDrafts(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const client = useMapleClient();
+	const [found, setFound] = useState(() => client.foreignDrafts());
+	const [first] = found;
+	if (first === void 0) return null;
+	const refresh = () => setFound(client.foreignDrafts());
+	return renderPart("div", asChild, {
+		...rest,
+		className: cx("mk-transfer-other", className),
+		ref
+	}, children ?? [
+		createElement("span", {
+			key: "said",
+			className: "mk-transfer-said"
+		}, `${TRANSFER_COPY.found(first.count)} `, createElement("code", null, first.branch)),
+		button(TRANSFER_COPY.move, () => {
+			client.moveDrafts(first.branch);
+			refresh();
+		}),
+		button(TRANSFER_COPY.dismiss, () => {
+			client.dismissDrafts(first.branch);
+			refresh();
+		})
+	]);
+});
+function button(label, onClick, disabled = false, more = {}) {
+	return createElement("button", {
+		type: "button",
+		className: "mk-unsent-copy",
+		key: label,
+		onClick,
+		disabled,
+		...more
+	}, label);
+}
+//#endregion
+export { ImportDrafts, OtherDrafts };

package/dist/island/unsent.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { renderPart } from "../part.js";
 import { UNSENT_COPY } from "./language.js";
+import { draftRoute, isOnPage, pathOf, usePathname } from "../marks/route.js";
 import { createElement, forwardRef, useState } from "react";
 import { useMaple, useMapleClient } from "@maple-kit/react";
 //#region src/island/unsent.ts
@@ -10,6 +11,7 @@ const Unsent = forwardRef(function Unsent(props, ref) {
 	const { drafts, publishing } = useMaple();
 	const client = useMapleClient();
 	const [copied, setCopied] = useState(false);
+	const pathname = usePathname(typeof window === "undefined" ? void 0 : window);
 	if (drafts.length === 0) return null;
 	const copy = () => {
 		navigator.clipboard.writeText(client.draftsAsMarkdown()).then(() => {
@@ -17,6 +19,7 @@ const Unsent = forwardRef(function Unsent(props, ref) {
 			setTimeout(() => setCopied(false), COPIED_MS);
 		}, () => void 0);
 	};
+	const save = (event) => download(event.currentTarget.ownerDocument, "maple-drafts.json", client.draftsAsJson());
 	return renderPart("div", asChild, {
 		...rest,
 		className: cx("mk-unsent", className),
@@ -30,6 +33,11 @@ const Unsent = forwardRef(function Unsent(props, ref) {
 		title: UNSENT_COPY.copyHint,
 		onClick: copy
 	}, copied ? UNSENT_COPY.copied : UNSENT_COPY.copy), createElement("button", {
+		type: "button",
+		className: "mk-unsent-copy",
+		title: UNSENT_COPY.exportHint,
+		onClick: save
+	}, UNSENT_COPY.export), createElement("button", {
 		type: "button",
 		className: "mk-btn mk-btn-primary mk-press mk-unsent-publish",
 		disabled: publishing,
@@ -37,9 +45,18 @@ const Unsent = forwardRef(function Unsent(props, ref) {
 	}, publishing ? UNSENT_COPY.publishing : UNSENT_COPY.publish(drafts.length))), createElement("ul", {
 		key: "rows",
 		className: "mk-unsent-rows"
-	}, ...drafts.map((draft) => row(draft, client)))]);
+	}, ...drafts.map((draft) => row(draft, client, pathname)))]);
 });
-function row(draft, client) {
+function download(page, name, text) {
+	const url = URL.createObjectURL(new Blob([text], { type: "application/json" }));
+	const link = page.createElement("a");
+	link.href = url;
+	link.download = name;
+	link.click();
+	URL.revokeObjectURL(url);
+}
+function row(draft, client, pathname) {
+	const route = draftRoute(draft);
 	return createElement("li", {
 		key: draft.id,
 		className: "mk-unsent-row"
@@ -48,7 +65,10 @@ function row(draft, client) {
 		className: "mk-unsent-body",
 		title: UNSENT_COPY.resumeHint,
 		onClick: () => client.resumeDraft(draft.id)
-	}, draft.body.trim() === "" ? UNSENT_COPY.blank : draft.body), createElement("button", {
+	}, draft.body.trim() === "" ? UNSENT_COPY.blank : draft.body), route === void 0 || isOnPage(draft, pathname) ? null : createElement("a", {
+		className: "mk-unsent-where",
+		href: route
+	}, UNSENT_COPY.elsewhere(pathOf(route) ?? route)), createElement("button", {
 		type: "button",
 		className: "mk-unsent-drop",
 		"aria-label": UNSENT_COPY.discard,

package/dist/maple.js

@@ -16,6 +16,7 @@ import { Item } from "./island/item.js";
 import { List } from "./island/list.js";
 import { NewComment, PickButton } from "./island/new-comment.js";
 import { Settings } from "./island/settings.js";
+import { ImportDrafts, OtherDrafts } from "./island/transfer.js";
 import { IslandTrigger } from "./island/trigger.js";
 import { Unsent } from "./island/unsent.js";
 import { MapleMarkLayer } from "./marks/layer.js";
@@ -48,7 +49,7 @@ function inventory(branch, label, defaultOpen) {
 	}, createElement(IslandTrigger), createElement(IslandContent, null, createElement(Header, null, createElement(Logo), createElement(Branch, {
 		branch,
 		...label === void 0 ? {} : { label }
-	}), createElement(Settings)), createElement(MapleNotice, { during: LOAD_CALLS }), createElement(Filters), createElement(List, { children: (comment) => createElement(Item, { comment }) }), createElement(Unsent), createElement(Approve), createElement(NewComment, null, ...PICK_ORDER.map((kind) => createElement(PickButton, {
+	}), createElement(Settings)), createElement(MapleNotice, { during: LOAD_CALLS }), createElement(Filters), createElement(List, { children: (comment) => createElement(Item, { comment }) }), createElement(OtherDrafts), createElement(Unsent), createElement(ImportDrafts), createElement(Approve), createElement(NewComment, null, ...PICK_ORDER.map((kind) => createElement(PickButton, {
 		key: kind,
 		kind
 	})))));

package/dist/marks/layer.js

@@ -1,16 +1,17 @@
 import { useMapleUi } from "../context.js";
 import { hoverHandlers } from "../hover.js";
 import { culled, markSpot, placeMark } from "./geometry.js";
+import { usePathname } from "./route.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, draftPlacements, placements } from "./placement.js";
+import { addresses, draftPlacements, placements, rectangleOf } 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";
+import { kindOf, membersBox, regionBox, resolveAnchor, sourceFor } from "@maple-kit/core/anchor";
 //#region src/marks/layer.ts
 const PART = "Maple.MarkLayer";
 const MapleMarkLayer = forwardRef(function MapleMarkLayer(props, ref) {
@@ -34,7 +35,12 @@ const MapleMarkLayer = forwardRef(function MapleMarkLayer(props, ref) {
 		container
 	]);
 	const drafts = useWaiting(state);
-	const drafted = useMemo(() => draftPlacements(drafts, container.ownerDocument), [drafts, container]);
+	const pathname = usePathname(container.ownerDocument.defaultView);
+	const drafted = useMemo(() => draftPlacements(drafts, container.ownerDocument, pathname), [
+		drafts,
+		container,
+		pathname
+	]);
 	const nudges = useNudges();
 	const nodes = useRef(/* @__PURE__ */ new Map());
 	const paint = useCallback(() => {
@@ -132,6 +138,7 @@ function pointing(client, id) {
 	};
 }
 function boxOf(placement) {
+	if (placement.members) return membersBox(placement.members);
 	const box = placement.range?.getBoundingClientRect() ?? placement.element.getBoundingClientRect();
 	return placement.region === void 0 ? box : regionBox(box, placement.region);
 }
@@ -163,6 +170,7 @@ function markProps(placement, view) {
 		author: comment.author.name,
 		on: ringLabel({
 			kind: kindOf(comment.anchor),
+			anchor: comment.anchor,
 			element: placement.element
 		}),
 		selected: comment.id === view.selectedId,
@@ -179,6 +187,7 @@ function draftProps(placement, view) {
 		confidence: placement.confidence,
 		on: ringLabel({
 			kind: kindOf(draft.anchor),
+			anchor: draft.anchor,
 			element: placement.element
 		}),
 		peeked: draft.id === view.peeked,
@@ -199,8 +208,10 @@ function marked(input, id, state) {
 	return {
 		target: hit.range ?? hit.element,
 		...hit.region === void 0 ? {} : { region: hit.region },
+		...hit.members === void 0 ? {} : { members: hit.members },
 		label: ringLabel({
 			kind: kindOf(hit.anchor),
+			anchor: hit.anchor,
 			element: hit.element
 		}),
 		...noteFor({
@@ -237,7 +248,7 @@ function composing(target, input) {
 	if (found.status !== "resolved") return {};
 	return {
 		target: found.range ?? found.element,
-		...target.anchor.region === void 0 ? {} : { region: target.anchor.region },
+		...rectangleOf(target.anchor, found),
 		label,
 		...noteFor({
 			anchor: target.anchor,

package/dist/marks/placement.d.ts

@@ -1,5 +1,5 @@
 import { Draft } from "@maple-kit/core/overlay";
-import { AnchorRegion } from "@maple-kit/core/anchor";
+import { Anchor, AnchorRegion, PlacedMember } from "@maple-kit/core/anchor";
 import { Comment } from "@maple-kit/core";
 //#region src/marks/placement.d.ts
 /** Where on the page something is, whether it was published or not. */
@@ -9,6 +9,8 @@ export interface Located {
   readonly range?: Range;
   /** The rectangle, when the comment is on a region rather than an element. */
   readonly region?: AnchorRegion;
+  /** The elements a region covers, when they placed it: the rectangle follows them. */
+  readonly members?: readonly PlacedMember[];
   readonly confidence: number;
 }
 /** A comment the page still has somewhere to put. */

package/dist/marks/placement.js

@@ -1,3 +1,4 @@
+import { isOnPage } from "./route.js";
 import { kindOf, resolveAnchor } from "@maple-kit/core/anchor";
 //#region src/marks/placement.ts
 function addresses(comments) {
@@ -16,8 +17,9 @@ function placements(comments, address, root) {
 	}
 	return placed;
 }
-function draftPlacements(drafts, root) {
+function draftPlacements(drafts, root, pathname) {
 	return drafts.flatMap((draft) => {
+		if (!isOnPage(draft, pathname)) return [];
 		const found = locate(draft.anchor, root);
 		return found ? [{
 			...found,
@@ -35,9 +37,13 @@ function locate(anchor, root) {
 	return {
 		element: found.element,
 		...found.range === void 0 ? {} : { range: found.range },
-		...anchor.region === void 0 ? {} : { region: anchor.region },
+		...rectangleOf(anchor, found),
 		confidence: found.confidence
 	};
 }
+function rectangleOf(anchor, found) {
+	if (found.members) return { members: found.members };
+	return anchor.region === void 0 ? {} : { region: anchor.region };
+}
 //#endregion
-export { addresses, draftPlacements, placements };
+export { addresses, draftPlacements, placements, rectangleOf };

package/dist/marks/ring.d.ts

@@ -1,4 +1,4 @@
-import { AnchorRegion } from "@maple-kit/core/anchor";
+import { AnchorRegion, PlacedMember } from "@maple-kit/core/anchor";
 //#region src/marks/ring.d.ts
 /** Set on the label when it was moved under the anchor to clear page text. */
 export declare const BELOW_ATTRIBUTE = "data-mk-below";
@@ -18,6 +18,11 @@ export interface TargetRingProps {
    * ring is that rectangle rather than the element it was measured in.
    */
   readonly region?: AnchorRegion;
+  /**
+   * The elements a region covers. When they are known the ring is the
+   * rectangle they grow into, and `region` is not used.
+   */
+  readonly members?: readonly PlacedMember[];
   /** 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. */

package/dist/marks/ring.js

@@ -5,7 +5,7 @@ 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";
+import { membersBox, regionBox } from "@maple-kit/core/anchor";
 //#region src/marks/ring.ts
 const BELOW_ATTRIBUTE = "data-mk-below";
 const END_ATTRIBUTE = "data-mk-end";
@@ -16,18 +16,23 @@ function linesOf(target) {
 function empty(rect) {
 	return rect.width === 0 && rect.height === 0;
 }
+function rectOf(target, region, members) {
+	if (members) return membersBox(members);
+	const box = target.getBoundingClientRect();
+	return region === void 0 ? box : regionBox(box, region);
+}
 const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
-	const { className, label, note, region, state = "composing", target } = props;
+	const { className, label, members, note, region, state = "composing", target } = props;
 	const { container } = useMapleUi(PART);
 	const ring = useRef(null);
 	const cap = useRef(null);
 	const runs = useRef([]);
 	const [lines, setLines] = useState(0);
+	const drawsRegion = region !== void 0 || members !== void 0;
 	const paint = useCallback((moving) => {
 		const node = ring.current;
 		if (!node || !target) return;
-		const box = target.getBoundingClientRect();
-		const rect = region === void 0 ? box : regionBox(box, region);
+		const rect = rectOf(target, region, members);
 		const away = empty(rect) || culled(rect, viewportHeight(container));
 		flag(node, OFF_ATTRIBUTE, away);
 		flag(node, MOVING_ATTRIBUTE, moving);
@@ -35,7 +40,7 @@ const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
 		const drawn = ringBox(rect);
 		place(node, drawn);
 		if (cap.current && !moving) corner(cap.current, drawn, container);
-		const boxes = region === void 0 ? linesOf(target) : [];
+		const boxes = drawsRegion ? [] : linesOf(target);
 		if (boxes.length !== lines) setLines(boxes.length);
 		boxes.forEach((box, index) => {
 			const run = runs.current[index];
@@ -43,7 +48,9 @@ const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
 		});
 	}, [
 		container,
+		drawsRegion,
 		lines,
+		members,
 		region,
 		target
 	]);
@@ -52,8 +59,8 @@ const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
 	return createElement("div", {
 		className: className ? `mk-ring ${className}` : "mk-ring",
 		"data-mk-state": state,
-		"data-mk-passage": String(region === void 0 && "startContainer" in target),
-		"data-mk-region": String(region !== void 0),
+		"data-mk-passage": String(!drawsRegion && "startContainer" in target),
+		"data-mk-region": String(drawsRegion),
 		ref: composeRefs(ref, (node) => {
 			ring.current = node;
 		})

package/dist/marks/route.js

@@ -0,0 +1,37 @@
+import { useSyncExternalStore } from "react";
+//#region src/marks/route.ts
+const ROUTE_POLL_MS = 400;
+function pathOf(url) {
+	if (url === void 0 || url === "") return void 0;
+	try {
+		const { pathname } = new URL(url, "https://route.invalid");
+		return trimmed(pathname);
+	} catch {
+		return;
+	}
+}
+function trimmed(pathname) {
+	let end = pathname.length;
+	while (end > 1 && pathname[end - 1] === "/") end -= 1;
+	return pathname.slice(0, end);
+}
+function draftRoute(draft) {
+	const url = draft.context?.url;
+	return pathOf(url) === void 0 ? void 0 : url?.replace(/^\w+:\/\/[^/]*/, "");
+}
+function isOnPage(draft, pathname) {
+	const path = pathOf(draft.context?.url);
+	return path === void 0 || path === pathOf(pathname);
+}
+function usePathname(view) {
+	return useSyncExternalStore((notify) => {
+		view?.addEventListener("popstate", notify);
+		const timer = setInterval(notify, ROUTE_POLL_MS);
+		return () => {
+			view?.removeEventListener("popstate", notify);
+			clearInterval(timer);
+		};
+	}, () => view?.location.pathname ?? "/", () => "/");
+}
+//#endregion
+export { draftRoute, isOnPage, pathOf, usePathname };

package/dist/mock/language.d.ts

@@ -11,6 +11,8 @@ export declare const MOCK_COPY: {
   readonly label: "Mock this page";
   readonly field: "Find a call";
   readonly sentence: "Say a state, like “no items yet”";
+  readonly failed: "Couldn't read that. Try again, or set calls below.";
+  readonly refused: "The server refused that. Set calls below.";
   readonly unnamed: "That doesn't name a state this page's data can be in.";
   readonly real: "Real";
   readonly escape: "Esc";

package/dist/mock/language.js

@@ -32,6 +32,8 @@ const MOCK_COPY = {
 	label: "Mock this page",
 	field: "Find a call",
 	sentence: "Say a state, like “no items yet”",
+	failed: "Couldn't read that. Try again, or set calls below.",
+	refused: "The server refused that. Set calls below.",
 	unnamed: "That doesn't name a state this page's data can be in.",
 	real: "Real",
 	escape: "Esc",

package/dist/mock/layers.js

@@ -13,7 +13,8 @@ const LAYER_COPY = {
 	off: "Off",
 	realValue: "Real value",
 	notEvaluated: "Named by the mock, not evaluated on this page",
-	serverActs: "The server still acts as you."
+	serverActs: "The server still acts as you.",
+	reloads: "reloads the page"
 };
 function Layers(props) {
 	const { client, state } = props;
@@ -24,6 +25,8 @@ function Layers(props) {
 	const grants = [];
 	const real = state.realAs;
 	const roles = identity?.role?.values ?? [];
+	const reloading = identity?.server !== void 0;
+	const titled = (title) => reloading ? `${title} · ${LAYER_COPY.reloads}` : title;
 	if (roles.length > 0) {
 		const role = state.draftAs?.role;
 		rows.push(row({
@@ -60,8 +63,8 @@ function Layers(props) {
 	return createElement("div", {
 		className: "mk-mock-layers",
 		ref: panel
-	}, rows.length === 0 ? null : section(LAYER_COPY.shownAs, rows), grants.length === 0 ? null : createElement(Fold, {
-		title: LAYER_COPY.permissions,
+	}, rows.length === 0 ? null : section(titled(LAYER_COPY.shownAs), rows), grants.length === 0 ? null : createElement(Fold, {
+		title: titled(LAYER_COPY.permissions),
 		rows: grants
 	}), flags.length === 0 ? null : createElement(Fold, {
 		title: LAYER_COPY.flags,

package/dist/mock/mock.js

@@ -101,7 +101,7 @@ function Box(props) {
 		value: state.query,
 		ref: field,
 		onChange: (event) => client.setQuery(event.currentTarget.value)
-	}), createElement("kbd", { className: "mk-mock-key-hint" }, MOCK_COPY.escape)), state.unnamed ? createElement("p", { className: "mk-mock-unnamed" }, MOCK_COPY.unnamed) : null, createElement("div", { className: "mk-mock-body" }, createElement("p", { className: "mk-mock-route" }, `${MOCK_COPY.routePrefix} `, createElement("span", { className: "mk-mono" }, state.route)), calls(state, client), layers && createElement(layers.Layers, {
+	}), createElement("kbd", { className: "mk-mock-key-hint" }, MOCK_COPY.escape)), aside(state) && createElement("p", { className: "mk-mock-unnamed" }, aside(state)), createElement("div", { className: "mk-mock-body" }, createElement("p", { className: "mk-mock-route" }, `${MOCK_COPY.routePrefix} `, createElement("span", { className: "mk-mono" }, state.route)), calls(state, client), layers && createElement(layers.Layers, {
 		state,
 		client
 	})), createElement(Foot, {
@@ -109,6 +109,10 @@ function Box(props) {
 		state
 	}));
 }
+function aside({ planFailure, unnamed }) {
+	if (planFailure !== void 0) return MOCK_COPY[planFailure];
+	return unnamed ? MOCK_COPY.unnamed : void 0;
+}
 function calls(state, client) {
 	if (state.calls.length === 0) {
 		const said = state.query === "" ? MOCK_COPY.nothingRecorded : MOCK_COPY.nothingMatches;

package/dist/notice/index.d.ts

@@ -1,4 +1,4 @@
 import { noticeCss } from "./css.js";
-import { NOTICE_COPY, offersSignIn } from "./language.js";
+import { NOTICE_COPY, isSetupGap, offersSignIn } from "./language.js";
 import { MapleNotice, MapleNoticeProps } from "./notice.js";
-export { MapleNotice, type MapleNoticeProps, NOTICE_COPY, MapleNotice as Notice, noticeCss, offersSignIn };
+export { MapleNotice, type MapleNoticeProps, NOTICE_COPY, MapleNotice as Notice, isSetupGap, noticeCss, offersSignIn };

package/dist/notice/index.js

@@ -1,4 +1,4 @@
 import { noticeCss } from "./css.js";
-import { NOTICE_COPY, offersSignIn } from "./language.js";
+import { NOTICE_COPY, isSetupGap, offersSignIn } from "./language.js";
 import { MapleNotice } from "./notice.js";
-export { MapleNotice, NOTICE_COPY, MapleNotice as Notice, noticeCss, offersSignIn };
+export { MapleNotice, NOTICE_COPY, MapleNotice as Notice, isSetupGap, noticeCss, offersSignIn };

package/dist/notice/language.d.ts

@@ -1,4 +1,4 @@
-import { FailureKind } from "@maple-kit/core/client";
+import { FailureKind, GitHubLink } from "@maple-kit/core/client";
 //#region src/notice/language.d.ts
 /** The notice's own words. */
 export declare const NOTICE_COPY: {
@@ -12,4 +12,7 @@ export declare const NOTICE_COPY: {
 };
 /** Whether the offer is a sign-in or a retry. A 401 is nobody's to retry. */
 export declare function offersSignIn(kind: FailureKind, linkable: boolean): boolean;
+/** A 401 with no sign-in on offer is a setup gap, not the reviewer's doing:
+ * "sign in" would point at a door that is not there. */
+export declare function isSetupGap(kind: FailureKind, github: GitHubLink): boolean;
 //#endregion

package/dist/notice/language.js

@@ -10,5 +10,8 @@ const NOTICE_COPY = {
 function offersSignIn(kind, linkable) {
 	return kind === "unauthorized" && linkable;
 }
+function isSetupGap(kind, github) {
+	return kind === "unauthorized" && github.state === "unsupported";
+}
 //#endregion
-export { NOTICE_COPY, offersSignIn };
+export { NOTICE_COPY, isSetupGap, offersSignIn };

package/dist/notice/notice.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
 import { renderPart } from "../part.js";
-import { NOTICE_COPY, offersSignIn } from "./language.js";
+import { NOTICE_COPY, isSetupGap, offersSignIn } from "./language.js";
 import { createElement, forwardRef } from "react";
 import { useMaple, useMapleClient } from "@maple-kit/react";
 //#region src/notice/notice.ts
@@ -31,7 +31,7 @@ const MapleNotice = forwardRef(function MapleNotice(props, ref) {
 	]);
 });
 function said(error, github) {
-	return error.kind === "unauthorized" && github.state === "unsupported" ? NOTICE_COPY.noSignIn : error.message;
+	return isSetupGap(error.kind, github) ? NOTICE_COPY.noSignIn : error.message;
 }
 function offer(error, github, client) {
 	if (offersSignIn(error.kind, github.state === "failed" || github.state === "unlinked")) return button(NOTICE_COPY.signIn, () => void client.linkGitHub());

package/dist/picker/target.js

@@ -1,5 +1,5 @@
 import { toCommentContext } from "@maple-kit/core/overlay";
-import { describeElement, describeRange, labelFor, regionOf } from "@maple-kit/core/anchor";
+import { captureMembers, describeElement, describeRange, labelFor, regionOf } from "@maple-kit/core/anchor";
 //#region src/picker/target.ts
 function elementOf(pick) {
 	return pick.kind === "text" ? rangeElement(pick.range) : pick.element;
@@ -24,9 +24,11 @@ function anchorFor(pick, element, root) {
 	if (pick.kind === "text") return describeRange(pick.range, options);
 	const described = describeElement(element, options);
 	if (pick.kind !== "region") return described;
+	const members = captureMembers(pick.rect, options);
 	return {
 		...described,
-		region: regionOf(pick.rect, element.getBoundingClientRect())
+		region: regionOf(pick.rect, element.getBoundingClientRect()),
+		...members.length === 0 ? {} : { members }
 	};
 }
 function rangeElement(range) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maple-kit/ui",
-  "version": "0.14.0",
+  "version": "0.15.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/react": "0.14.0",
-    "@maple-kit/core": "0.14.0",
-    "@maple-kit/mock": "0.14.0"
+    "@maple-kit/core": "0.15.0",
+    "@maple-kit/mock": "0.15.0",
+    "@maple-kit/react": "0.15.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",