@maple-kit/ui 0.1.0

package/dist/island/language.js

@@ -0,0 +1,125 @@
+//#region src/island/language.ts
+const FILTER_LABELS = {
+	all: "All",
+	open: "Open",
+	needs_reverify: "Re-verify",
+	resolved: "Resolved",
+	unpinned: "Unpinned"
+};
+const FILTER_ORDER = [
+	"all",
+	"open",
+	"needs_reverify",
+	"resolved"
+];
+const TALLY_ORDER = [
+	"open",
+	"needs_reverify",
+	"resolved",
+	"unpinned"
+];
+const FILTERS_LABEL = "Show";
+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",
+	text: "Text"
+};
+const THEME_LABELS = {
+	auto: "Auto",
+	light: "Light",
+	dark: "Dark"
+};
+const THEME_TITLES = {
+	auto: "The opposite of this page, so the overlay reads as a guest on it.",
+	light: "Always light, whatever this page is in.",
+	dark: "Always dark, whatever this page is in."
+};
+const CORNER_LABELS = {
+	"top-left": "Top left",
+	"top-right": "Top right",
+	"bottom-left": "Bottom left",
+	"bottom-right": "Bottom right"
+};
+const CORNER_ORDER = [
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
+];
+const SETTINGS_COPY = {
+	theme: {
+		name: "Theme",
+		hint: "What the overlay itself is drawn in. A comment always records the page's own."
+	},
+	position: {
+		name: "Corner",
+		hint: "Where the island sits. Dragging it by its pill does the same thing."
+	},
+	hideResolved: {
+		name: "Hide resolved",
+		hint: "Done comments stay off the page and out of the list until you pick the Resolved filter."
+	},
+	developer: {
+		name: "Developer mode",
+		hint: "Shows how each comment is re-found after a deploy, its source line and its CSS path."
+	},
+	untagged: {
+		name: "This build is not tagged",
+		hint: "Comments still work, but none of them can name a component or the file it is written in. Wrap the Next config in withMaple from @maple-kit/core/next, or the Vite config in the maple plugin with tagger on."
+	},
+	hidden: {
+		name: "Hide the island",
+		hint: "It goes until you reload. A comment arriving, or a link to one, brings it straight back."
+	}
+};
+const ACCOUNT_COPY = {
+	name: "GitHub",
+	unlinked: "Link your account and comments are posted on the pull request as you.",
+	linking: "Enter this code on GitHub. This stays open while you do.",
+	open: "Open github.com",
+	link: "Link",
+	retry: "Try again",
+	unlink: "Unlink",
+	linkedAs: (login) => login === void 0 ? "Linked." : `Linked as ${login}.`,
+	unlinkHint: "Forgets the token here. GitHub keeps the authorisation until you revoke it."
+};
+const ISLAND_COPY = {
+	title: "Comments",
+	settings: "Settings",
+	close: "Close the inventory",
+	closeGlyph: "✕",
+	newComment: "New:",
+	empty: "Nothing here under this filter.",
+	loading: "Reading the comments on this branch…",
+	unread: "The comments could not be read, so this list is not the whole story.",
+	showAll: "Show all",
+	showLess: "Show less",
+	hide: "Hide",
+	attachment: "shot",
+	attachmentSentence: "A screenshot went with this comment. The panel shows it."
+};
+function openLabel(count) {
+	return `${String(count)} open`;
+}
+function triggerLabel(count) {
+	return `Open Maple: ${openLabel(count)}`;
+}
+function pickTitle(kind) {
+	return `Comment on ${kind} — press t while picking to cycle`;
+}
+function kindPhrase(kind, human) {
+	if (human === void 0) return "somewhere on this page";
+	if (kind === "text") return `a passage in ${human}`;
+	return kind === "region" ? `an area of ${human}` : human;
+}
+//#endregion
+export { ACCOUNT_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, kindPhrase, openLabel, pickTitle, tallyTitle, triggerLabel };

package/dist/island/leaf.js

@@ -0,0 +1,17 @@
+import { LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX } from "../marks/leaf.js";
+import { createElement, forwardRef } from "react";
+//#region src/island/leaf.ts
+const Leaf = forwardRef(function Leaf(props, ref) {
+	const { size = 15, ...rest } = props;
+	return createElement("svg", {
+		"aria-hidden": true,
+		focusable: false,
+		...rest,
+		ref,
+		width: size,
+		height: size,
+		viewBox: LEAF_VIEW_BOX
+	}, createElement("g", { transform: LEAF_ROTATION }, createElement("path", { d: LEAF_SOLID })));
+});
+//#endregion
+export { Leaf };

package/dist/island/list.d.ts

@@ -0,0 +1,12 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+import { Comment } from "@maple-kit/core";
+//#region src/island/list.d.ts
+/** The list, and how one comment is rendered into a row. */
+export interface ListProps extends PartProps {
+  /** Called for each comment the filter shows, in render order. */
+  readonly children?: (comment: Comment) => ReactNode;
+}
+/** Every comment under the current filter, or the one line that says there are none. */
+export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/island/list.js

@@ -0,0 +1,31 @@
+import { cx, 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 { Fragment, createElement, forwardRef } from "react";
+import { useComments, useMaple } from "@maple-kit/react";
+//#region src/island/list.ts
+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 comments = useComments();
+	const failed = error?.during === "load";
+	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, {
+		role: "tabpanel",
+		...rest,
+		id: listId(island.contentId),
+		"aria-label": FILTER_LABELS[filter],
+		className: cx("mk-list", className),
+		ref
+	}, body);
+});
+function nothing(phase, failed) {
+	if (failed) return ISLAND_COPY.unread;
+	return phase === "loading" ? ISLAND_COPY.loading : ISLAND_COPY.empty;
+}
+//#endregion
+export { List };

package/dist/island/new-comment.d.ts

@@ -0,0 +1,18 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+import { PickKind } from "@maple-kit/core/client";
+//#region src/island/new-comment.d.ts
+/** The bar. Its children are the pick buttons. */
+export interface NewCommentProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** One pick. There is no fourth kind and no variant of these three. */
+export interface PickButtonProps extends PartProps {
+  readonly kind: PickKind;
+  readonly children?: ReactNode;
+}
+/** `NEW COMMENT`, and the three ways to start one. */
+export declare const NewComment: import("react").ForwardRefExoticComponent<NewCommentProps & import("react").RefAttributes<HTMLDivElement>>;
+/** Arming one collapses the island; clicking the armed one disarms it. */
+export declare const PickButton: import("react").ForwardRefExoticComponent<PickButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion

package/dist/island/new-comment.js

@@ -0,0 +1,56 @@
+import { dataAttributes } from "../data.js";
+import { cx, renderPart } from "../part.js";
+import { ElementIcon } from "../icons/element.js";
+import { RegionIcon } from "../icons/region.js";
+import { TextIcon } from "../icons/text.js";
+import { ISLAND_COPY, PICK_LABELS, pickTitle } from "./language.js";
+import { useIsland } from "./context.js";
+import { createElement, forwardRef } from "react";
+import { useMapleClient, usePicker } from "@maple-kit/react";
+//#region src/island/new-comment.ts
+const PART = "<Maple.PickButton>";
+const NewComment = forwardRef(function NewComment(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	return renderPart("div", asChild, {
+		...rest,
+		className: cx("mk-new", className),
+		ref
+	}, [renderPart("span", false, {
+		key: "label",
+		className: "mk-new-label"
+	}, ISLAND_COPY.newComment), renderPart("div", false, {
+		key: "picks",
+		className: "mk-picks"
+	}, children)]);
+});
+const PickButton = forwardRef(function PickButton(props, ref) {
+	const { asChild, children, className, kind, ...rest } = props;
+	const island = useIsland(PART);
+	const client = useMapleClient();
+	const pick = usePicker();
+	const armed = pick.armed && pick.kind === kind;
+	const onClick = () => {
+		if (armed) {
+			client.disarm();
+			return;
+		}
+		client.arm(kind);
+		island.setOpen(false);
+	};
+	return renderPart("button", asChild, {
+		type: "button",
+		...dataAttributes({ armed }),
+		...rest,
+		"aria-pressed": armed,
+		className: cx("mk-pick mk-hit", className),
+		title: pickTitle(kind),
+		onClick,
+		ref
+	}, children ?? [createElement(icon(kind), { key: "icon" }), PICK_LABELS[kind]]);
+});
+function icon(kind) {
+	if (kind === "text") return TextIcon;
+	return kind === "region" ? RegionIcon : ElementIcon;
+}
+//#endregion
+export { NewComment, PickButton };

package/dist/island/settings.d.ts

@@ -0,0 +1,10 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/settings.d.ts
+/** The control. Its children replace the icon inside it. */
+export interface SettingsProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** The sliders control, and the panel it opens under the header. */
+export declare const Settings: import("react").ForwardRefExoticComponent<SettingsProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion

package/dist/island/settings.js

@@ -0,0 +1,134 @@
+import { cx, renderPart } from "../part.js";
+import { CORNER_LABELS, CORNER_ORDER, ISLAND_COPY, SETTINGS_COPY, THEME_LABELS, THEME_TITLES } from "./language.js";
+import { Account } from "./account.js";
+import { useIsland } from "./context.js";
+import { CogIcon } from "../icons/cog.js";
+import { createElement, forwardRef, useId } from "react";
+import { THEME_PREFERENCES } from "@maple-kit/core/client";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+//#region src/island/settings.ts
+const PART = "<Maple.Settings>";
+const Settings = forwardRef(function Settings(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const { settingsOpen: open, setSettingsOpen: setOpen } = useIsland(PART);
+	const panelId = useId();
+	const button = renderPart("button", asChild, {
+		type: "button",
+		...rest,
+		"aria-controls": panelId,
+		"aria-expanded": open,
+		"aria-label": ISLAND_COPY.settings,
+		className: cx("mk-iconbtn mk-hit", className),
+		onClick: () => setOpen(!open),
+		ref
+	}, children ?? createElement(CogIcon));
+	return createElement("span", { className: "mk-settings-anchor" }, button, open ? createElement(Panel, {
+		id: panelId,
+		onClose: () => setOpen(false)
+	}) : null);
+});
+function Panel(props) {
+	const client = useMapleClient();
+	const { position, showResolved, tagged, themePreference } = useMaple();
+	const island = useIsland(PART);
+	const onKeyDown = (event) => {
+		if (event.key === "Escape") props.onClose();
+	};
+	const onBlur = (event) => {
+		if (!event.currentTarget.contains(event.relatedTarget)) props.onClose();
+	};
+	return createElement("div", {
+		id: props.id,
+		className: "mk-settings",
+		role: "group",
+		onBlur,
+		onKeyDown
+	}, createElement(Account, null), tagged ? null : createElement(Untagged, null), createElement(Theme, {
+		value: themePreference,
+		onPick: (theme) => client.setTheme(theme)
+	}), createElement(Corners, {
+		value: position,
+		onPick: (corner) => client.setPosition(corner)
+	}), createElement(Setting, {
+		checked: !showResolved,
+		copy: SETTINGS_COPY.hideResolved,
+		onChange: (on) => client.setShowResolved(!on)
+	}), createElement(Setting, {
+		checked: island.developer,
+		copy: SETTINGS_COPY.developer,
+		onChange: island.setDeveloper
+	}), createElement(Dismiss, { onHide: () => client.setHidden(true) }));
+}
+function Untagged() {
+	const copy = SETTINGS_COPY.untagged;
+	return createElement("div", {
+		className: "mk-setting",
+		"data-mk-maple": "true"
+	}, createElement("span", null, createElement("span", { className: "mk-setting-name" }, copy.name), createElement("span", { className: "mk-setting-hint" }, copy.hint)));
+}
+function Theme(props) {
+	const labelId = useId();
+	const copy = SETTINGS_COPY.theme;
+	return createElement("div", { className: "mk-setting" }, createElement("span", null, createElement("span", {
+		className: "mk-setting-name",
+		id: labelId
+	}, copy.name), createElement("span", { className: "mk-setting-hint" }, copy.hint)), createElement("span", {
+		className: "mk-seg",
+		role: "radiogroup",
+		"aria-labelledby": labelId
+	}, ...THEME_PREFERENCES.map((theme) => createElement("button", {
+		key: theme,
+		type: "button",
+		role: "radio",
+		"aria-checked": theme === props.value,
+		className: "mk-seg-one",
+		title: THEME_TITLES[theme],
+		onClick: () => props.onPick(theme)
+	}, THEME_LABELS[theme]))));
+}
+function Corners(props) {
+	const labelId = useId();
+	const copy = SETTINGS_COPY.position;
+	return createElement("div", { className: "mk-setting" }, createElement("span", null, createElement("span", {
+		className: "mk-setting-name",
+		id: labelId
+	}, copy.name), createElement("span", { className: "mk-setting-hint" }, copy.hint)), createElement("span", {
+		className: "mk-corners",
+		role: "radiogroup",
+		"aria-labelledby": labelId
+	}, ...CORNER_ORDER.map((corner) => createElement("button", {
+		key: corner,
+		type: "button",
+		role: "radio",
+		"aria-checked": corner === props.value,
+		"aria-label": CORNER_LABELS[corner],
+		title: CORNER_LABELS[corner],
+		className: "mk-corner",
+		"data-mk-corner": corner,
+		onClick: () => props.onPick(corner)
+	}))));
+}
+function Dismiss(props) {
+	const copy = SETTINGS_COPY.hidden;
+	return createElement("div", { className: "mk-setting" }, createElement("span", null, createElement("span", { className: "mk-setting-name" }, copy.name), createElement("span", { className: "mk-setting-hint" }, copy.hint)), createElement("button", {
+		type: "button",
+		className: "mk-more",
+		onClick: props.onHide
+	}, ISLAND_COPY.hide));
+}
+function Setting(props) {
+	const labelId = useId();
+	return createElement("div", { className: "mk-setting" }, createElement("span", null, createElement("span", {
+		className: "mk-setting-name",
+		id: labelId
+	}, props.copy.name), createElement("span", { className: "mk-setting-hint" }, props.copy.hint)), createElement("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": props.checked,
+		"aria-labelledby": labelId,
+		className: "mk-switch",
+		onClick: () => props.onChange(!props.checked)
+	}));
+}
+//#endregion
+export { Settings };

package/dist/island/stagger.d.ts

@@ -0,0 +1,12 @@
+//#region src/island/stagger.d.ts
+/**
+ * How many rows stagger before the rest arrive together.
+ *
+ * The step and the cap are `--mk-stagger-step` and `--mk-stagger-cap`; this is
+ * the cap divided by the step, so a list of thirty comments does not take a
+ * second to appear. It is a count rather than a duration, which is why it is
+ * here and not in the token table.
+ */
+/** Six rows at a 40ms step, which is the 240ms cap. */
+export declare const STAGGER_ROWS = 6;
+//#endregion

package/dist/island/stagger.js

@@ -0,0 +1,4 @@
+//#region src/island/stagger.ts
+const STAGGER_ROWS = 6;
+//#endregion
+export { STAGGER_ROWS };

package/dist/island/time.d.ts

@@ -0,0 +1,17 @@
+//#region src/island/time.d.ts
+/**
+ * How long ago a comment was written, in the shortest true form.
+ *
+ * `Intl.RelativeTimeFormat` is in every browser the overlay supports and costs
+ * the bundle nothing, so this is a unit choice and a rounding rule rather than
+ * a date library.
+ */
+/**
+ * The same instant in the reader's own zone, for the tooltip behind the
+ * relative one. "3h ago" is what a row is scanned for; which afternoon it was
+ * is what someone asks a minute later, and the row should not have to say it.
+ */
+export declare function absoluteTime(iso: string): string;
+/** "3h ago", or "now" for anything inside the last minute. */
+export declare function relativeTime(iso: string, now: number): string;
+//#endregion

package/dist/island/time.js

@@ -0,0 +1,29 @@
+//#region src/island/time.ts
+const UNITS = [
+	["year", 31536e3],
+	["month", 2592e3],
+	["week", 604800],
+	["day", 86400],
+	["hour", 3600],
+	["minute", 60]
+];
+const FORMAT = new Intl.RelativeTimeFormat(void 0, { style: "narrow" });
+const EXACT = new Intl.DateTimeFormat(void 0, {
+	dateStyle: "medium",
+	timeStyle: "short"
+});
+function absoluteTime(iso) {
+	const at = Date.parse(iso);
+	return Number.isFinite(at) ? EXACT.format(at) : "";
+}
+function relativeTime(iso, now) {
+	const seconds = (Date.parse(iso) - now) / 1e3;
+	if (!Number.isFinite(seconds)) return "";
+	for (const [unit, size] of UNITS) {
+		const value = seconds / size;
+		if (Math.abs(value) >= 1) return FORMAT.format(Math.round(value), unit);
+	}
+	return "now";
+}
+//#endregion
+export { absoluteTime, relativeTime };

package/dist/island/trigger.d.ts

@@ -0,0 +1,10 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/trigger.d.ts
+/** The pill. Its own children replace the leaf and the count. */
+export interface IslandTriggerProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** `8 open`, and the hit area a thumb needs around it. */
+export declare const IslandTrigger: import("react").ForwardRefExoticComponent<IslandTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+//#endregion

package/dist/island/trigger.js

@@ -0,0 +1,39 @@
+import { dataAttributes } from "../data.js";
+import { cx, renderPart } from "../part.js";
+import { openLabel, triggerLabel } from "./language.js";
+import { useIsland } from "./context.js";
+import { Leaf } from "./leaf.js";
+import { forwardRef } from "react";
+import { useMaple } from "@maple-kit/react";
+//#region src/island/trigger.ts
+const PART = "<Maple.IslandTrigger>";
+const IslandTrigger = forwardRef(function IslandTrigger(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const island = useIsland(PART);
+	const { openCount, pick } = useMaple();
+	return renderPart("button", asChild, {
+		type: "button",
+		...dataAttributes({ armed: pick.armed }),
+		...rest,
+		"aria-controls": island.contentId,
+		"aria-expanded": island.phase !== "closed",
+		"aria-label": triggerLabel(openCount),
+		className: cx("mk-pill mk-hit", className),
+		onClick: () => {
+			if (!island.drag.moved()) island.setOpen(island.phase === "closed");
+		},
+		onPointerDown: island.drag.onPointerDown,
+		onPointerMove: island.drag.onPointerMove,
+		onPointerUp: island.drag.onPointerUp,
+		ref
+	}, children ?? [renderPart(Leaf, false, {
+		key: "leaf",
+		size: 15,
+		className: "mk-logo-leaf"
+	}), renderPart("span", false, {
+		key: "count",
+		className: "mk-num"
+	}, openLabel(openCount))]);
+});
+//#endregion
+export { IslandTrigger };

package/dist/language.d.ts

@@ -0,0 +1,45 @@
+import { OrphanReason, Rung } from "@maple-kit/core/anchor";
+import { CommentStatus, IdentityProvenance } from "@maple-kit/core";
+//#region src/language.d.ts
+/** The four statuses, in the words the island, the mark and the composer use. */
+export declare const STATUS_LABELS: Readonly<Record<CommentStatus, string>>;
+/**
+ * What each status means. The chip carries two words and the panel carries
+ * this: a reviewer who has not read the docs is looking at a word, not at a
+ * state machine.
+ */
+export declare const STATUS_SENTENCES: Readonly<Record<CommentStatus, string>>;
+/**
+ * How much an author's name is worth, said as the dot that draws it. The fill
+ * is the whole of this signal and no word beside it repeats it, so the sentence
+ * names the shape a reader is looking at.
+ */
+export declare const PROVENANCE_SENTENCES: Readonly<Record<IdentityProvenance, string>>;
+/**
+ * How a rung reads inside a sentence. It is never shown as a field name: the
+ * number is the value and this says what the number is about.
+ */
+export declare const RUNG_LABELS: Readonly<Record<Rung, string>>;
+/** What a percentage reads as, for anyone not looking at it. */
+export declare function rungLabel(percent: number): string;
+/** Two words each. The sentence underneath belongs in the tooltip, not the row. */
+export declare const ORPHAN_LABELS: Readonly<Record<OrphanReason, string>>;
+/** What the chip's tooltip says after its two words. */
+export declare const ORPHAN_SENTENCES: Readonly<Record<OrphanReason, string>>;
+/** The order the unpinned tab groups its rows in. */
+export declare const ORPHAN_ORDER: readonly OrphanReason[];
+/** The chip's full tooltip: the two words, then the sentence. */
+export declare function orphanTitle(reason: OrphanReason, tried?: readonly Rung[]): string;
+/** The panel's labels, and the sentence under each of the ones worth one. */
+export declare const DETAIL_COPY: {
+  readonly author: "Written by";
+  readonly status: "Status";
+  readonly rung: "Found again by";
+  readonly rungNote: "after a redeploy Maple re-finds it that way, and a lower rung is worth less";
+  readonly lost: "Nothing to pin to";
+  readonly area: "Area";
+  readonly areaNote: "of the box it was drawn in, which is what moves it when the layout does";
+  readonly source: "Source";
+  readonly selector: "CSS path";
+};
+//#endregion

package/dist/language.js

@@ -0,0 +1,66 @@
+//#region src/language.ts
+const STATUS_LABELS = {
+	open: "Open",
+	resolved: "Resolved",
+	needs_reverify: "Needs re-verify",
+	orphaned: "Unpinned"
+};
+const STATUS_SENTENCES = {
+	open: "nobody has claimed to have addressed this yet",
+	resolved: "an agent claimed a commit for it; re-check it and say whether it is done",
+	needs_reverify: "it was resolved, and the page has changed under it since",
+	orphaned: "the page has nowhere left to put it; the comment is kept, only its place is lost"
+};
+const PROVENANCE_SENTENCES = {
+	server: "a filled dot: the application's own session verified who this is",
+	client: "a half-filled dot: the application said who this is, and nothing checked it",
+	guest: "a hollow dot: nobody verified this, they typed a name into Maple"
+};
+const RUNG_LABELS = {
+	key: "the app's own key",
+	source: "the source line",
+	component: "the component name",
+	quote: "the quoted text",
+	selector: "a CSS path"
+};
+function rungLabel(percent) {
+	return `${String(percent)}%`;
+}
+const ORPHAN_LABELS = {
+	empty: "No anchor",
+	missing: "Nothing matches",
+	ambiguous: "Several matches",
+	changed: "Text changed"
+};
+const ORPHAN_SENTENCES = {
+	empty: "Written before the build tagged anything, so there was never anything to search for.",
+	missing: "Every rung was tried. The element is gone, or this is a different route.",
+	ambiguous: "More than one element answers to what was recorded, and nothing tells them apart.",
+	changed: "The passage is still on the page, but edited past the point where the match can be trusted."
+};
+const ORPHAN_ORDER = [
+	"missing",
+	"changed",
+	"ambiguous",
+	"empty"
+];
+function orphanTitle(reason, tried = []) {
+	const ladder = tried.length === 0 ? "" : ` Tried: ${tried.map(rungWord).join(" → ")}.`;
+	return `${ORPHAN_LABELS[reason]}. ${ORPHAN_SENTENCES[reason]}${ladder}`;
+}
+function rungWord(rung) {
+	return RUNG_LABELS[rung];
+}
+const DETAIL_COPY = {
+	author: "Written by",
+	status: "Status",
+	rung: "Found again by",
+	rungNote: "after a redeploy Maple re-finds it that way, and a lower rung is worth less",
+	lost: "Nothing to pin to",
+	area: "Area",
+	areaNote: "of the box it was drawn in, which is what moves it when the layout does",
+	source: "Source",
+	selector: "CSS path"
+};
+//#endregion
+export { DETAIL_COPY, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, PROVENANCE_SENTENCES, RUNG_LABELS, STATUS_LABELS, STATUS_SENTENCES, orphanTitle, rungLabel };

package/dist/maple.d.ts

@@ -0,0 +1,25 @@
+import { MapleAttachmentsProps } from "./composer/attachments.js";
+import { LeaveAsk } from "./composer/leave.js";
+import "./composer/index.js";
+import { MapleRootProps } from "./root.js";
+//#region src/maple.d.ts
+/** Everything the root takes, plus the few choices the composition itself has. */
+export interface MapleProps extends MapleRootProps {
+  /** Start with the inventory open. Collapsed to its pill unless set. */
+  readonly defaultOpen?: boolean;
+  /** The bar naming the gesture while a pick is armed. On unless set false. */
+  readonly hint?: boolean;
+  /** Asked before a link takes the page away from an unsent comment. */
+  readonly leave?: LeaveAsk;
+  /**
+   * Where images go and are read back from. Seams, not options: core has no
+   * blob route, and without `resolve` a kept shot is a sentence about one.
+   */
+  readonly attachments?: Pick<MapleAttachmentsProps, "resolve" | "upload">;
+}
+/**
+ * The whole reviewer interface: the marks on the page, the picker, the
+ * inventory and the composer, over one shadow root and one controller.
+ */
+export declare const Maple: import("react").ForwardRefExoticComponent<MapleProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion