@maple-kit/ui 0.1.0

package/dist/island/drag.d.ts

@@ -0,0 +1,10 @@
+import { DragHandlers } from "./context.js";
+import { Corner } from "@maple-kit/core/client";
+//#region src/island/drag.d.ts
+/** How far a pointer travels before it is a drag and not a slow click. */
+export declare const DRAG_THRESHOLD_PX = 4;
+/** Set on the island while it is under the pointer. */
+export declare const DRAGGING_ATTRIBUTE = "data-mk-dragging";
+/** Moves the island with the pointer, and hands the corner to the controller. */
+export declare function useDrag(container: HTMLElement, onSnap: (corner: Corner) => void): DragHandlers;
+//#endregion

package/dist/island/drag.js

@@ -0,0 +1,77 @@
+import { useMemo, useRef } from "react";
+import { nearestCorner } from "@maple-kit/core/client";
+//#region src/island/drag.ts
+const DRAG_THRESHOLD_PX = 4;
+const DRAGGING_ATTRIBUTE = "data-mk-dragging";
+function useDrag(container, onSnap) {
+	const gesture = useRef({
+		node: null,
+		x: 0,
+		y: 0,
+		pressed: false,
+		dragging: false,
+		moved: false
+	});
+	return useMemo(() => ({
+		attach: (node) => {
+			gesture.current.node = node;
+		},
+		moved: () => gesture.current.moved,
+		onPointerDown: (event) => start(gesture.current, event),
+		onPointerMove: (event) => move(gesture.current, event),
+		onPointerUp: (event) => end(gesture.current, event, container, onSnap)
+	}), [container, onSnap]);
+}
+function start(gesture, event) {
+	gesture.x = event.clientX;
+	gesture.y = event.clientY;
+	gesture.pressed = true;
+	gesture.dragging = false;
+	gesture.moved = false;
+	capture(event, true);
+}
+function capture(event, take) {
+	const element = handle(event);
+	try {
+		if (take) element?.setPointerCapture(event.pointerId);
+		else element?.releasePointerCapture(event.pointerId);
+	} catch {
+		return;
+	}
+}
+function move(gesture, event) {
+	const { node } = gesture;
+	if (!node || !gesture.pressed) return;
+	const dx = event.clientX - gesture.x;
+	const dy = event.clientY - gesture.y;
+	if (!gesture.dragging && Math.hypot(dx, dy) < 4) return;
+	gesture.dragging = true;
+	gesture.moved = true;
+	node.style.setProperty("--mk-x", `${String(Math.round(dx))}px`);
+	node.style.setProperty("--mk-y", `${String(Math.round(dy))}px`);
+	node.setAttribute(DRAGGING_ATTRIBUTE, "true");
+}
+function end(gesture, event, container, onSnap) {
+	const { node } = gesture;
+	capture(event, false);
+	gesture.pressed = false;
+	if (!node || !gesture.dragging) return;
+	gesture.dragging = false;
+	const box = node.getBoundingClientRect();
+	node.removeAttribute(DRAGGING_ATTRIBUTE);
+	node.style.removeProperty("--mk-x");
+	node.style.removeProperty("--mk-y");
+	onSnap(nearestCorner(middleOf(box), container.getBoundingClientRect()));
+}
+function middleOf(box) {
+	return {
+		x: box.x + box.width / 2,
+		y: box.y + box.height / 2
+	};
+}
+function handle(event) {
+	const target = event.currentTarget;
+	return target instanceof Element ? target : null;
+}
+//#endregion
+export { DRAGGING_ATTRIBUTE, DRAG_THRESHOLD_PX, useDrag };

package/dist/island/filters.d.ts

@@ -0,0 +1,10 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/filters.d.ts
+/** The filter row. Its own children replace the select and the tally. */
+export interface FiltersProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** Every filter in one select, with the per-status tally beside it. */
+export declare const Filters: import("react").ForwardRefExoticComponent<FiltersProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/island/filters.js

@@ -0,0 +1,63 @@
+import { cx, renderPart } from "../part.js";
+import { Tip } from "../tip.js";
+import { FILTERS_LABEL, FILTER_LABELS, FILTER_ORDER, TALLY_ORDER, tallyTitle } from "./language.js";
+import { countsFor } from "./comments.js";
+import { listId, useIsland } from "./context.js";
+import { createElement, forwardRef } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+//#region src/island/filters.ts
+const PART = "<Maple.Filters>";
+const Filters = forwardRef(function Filters(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const island = useIsland(PART);
+	const { comments, filter, showResolved } = useMaple();
+	const client = useMapleClient();
+	const counts = countsFor(comments, showResolved);
+	const onChange = (event) => {
+		client.setFilter(event.currentTarget.value);
+	};
+	const select = renderPart("span", false, {
+		key: "chip",
+		className: "mk-filter-chip"
+	}, renderPart("select", false, {
+		className: "mk-filter-pick",
+		"aria-controls": listId(island.contentId),
+		"aria-label": FILTERS_LABEL,
+		value: filter,
+		onChange
+	}, ALL_FILTERS.map((name) => renderPart("option", false, {
+		key: name,
+		value: name
+	}, `${FILTER_LABELS[name]} ${String(counts[name])}`))));
+	const tally = renderPart("div", false, {
+		key: "tally",
+		className: "mk-tally"
+	}, TALLY_ORDER.map((name) => createElement(Tip, {
+		key: name,
+		as: "button",
+		className: "mk-tally-one",
+		sentence: tallyTitle(name, counts[name]),
+		triggerProps: {
+			type: "button",
+			"data-tally": name,
+			"data-mk-zero": String(counts[name] === 0),
+			"aria-pressed": filter === name,
+			"aria-label": tallyTitle(name, counts[name]),
+			onClick: () => client.setFilter(filter === name ? "all" : name)
+		}
+	}, renderPart("span", false, {
+		key: "dot",
+		className: "mk-dot"
+	}), renderPart("span", false, {
+		key: "n",
+		className: "mk-num"
+	}, String(counts[name])))));
+	return renderPart("div", asChild, {
+		...rest,
+		className: cx("mk-filters", className),
+		ref
+	}, children ?? [select, tally]);
+});
+const ALL_FILTERS = [...FILTER_ORDER, "unpinned"];
+//#endregion
+export { Filters };

package/dist/island/header.d.ts

@@ -0,0 +1,32 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/header.d.ts
+/** The header row. Its children sit before the close control. */
+export interface HeaderProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** The wordmark, and the word. */
+export interface LogoProps extends PartProps {
+  /** Replaces the title beside the leaf. */
+  readonly children?: ReactNode;
+}
+/** Which branch these comments belong to. */
+export interface BranchProps extends PartProps {
+  /** The branch the island is pointed at, as the chip should read it. */
+  readonly branch?: string;
+  /** Shown instead of the branch, which stays on the chip as its title. */
+  readonly label?: string;
+  readonly children?: ReactNode;
+}
+/** The header, with the close control after whatever it was given. */
+export declare const Header: import("react").ForwardRefExoticComponent<HeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+/** The leaf and the word "Comments", which is what the island is. */
+export declare const Logo: import("react").ForwardRefExoticComponent<LogoProps & import("react").RefAttributes<HTMLHeadingElement>>;
+/**
+ * The branch chip. It takes the branch rather than reading it, because the
+ * controller keeps what it was pointed at and does not publish it back. A
+ * label reads in its place when there is one; the branch stays as the title,
+ * because a label is lossy and the exact name is what a person copies.
+ */
+export declare const Branch: import("react").ForwardRefExoticComponent<BranchProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion

package/dist/island/header.js

@@ -0,0 +1,47 @@
+import { cx, renderPart } from "../part.js";
+import { ISLAND_COPY } from "./language.js";
+import { useIsland } from "./context.js";
+import { Leaf } from "./leaf.js";
+import { forwardRef } from "react";
+//#region src/island/header.ts
+const HEADER_PART = "<Maple.Header>";
+const Header = forwardRef(function Header(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const island = useIsland(HEADER_PART);
+	return renderPart("div", asChild, {
+		...rest,
+		className: cx("mk-head", className),
+		ref
+	}, [children, renderPart("button", false, {
+		key: "close",
+		type: "button",
+		"aria-label": ISLAND_COPY.close,
+		className: "mk-iconbtn mk-hit",
+		onClick: () => island.setOpen(false)
+	}, ISLAND_COPY.closeGlyph)]);
+});
+const Logo = forwardRef(function Logo(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	return renderPart("h2", asChild, {
+		...rest,
+		className: cx("mk-head-title", className),
+		ref
+	}, [renderPart(Leaf, false, {
+		key: "leaf",
+		size: 17,
+		className: "mk-logo-leaf"
+	}), children ?? ISLAND_COPY.title]);
+});
+const Branch = forwardRef(function Branch(props, ref) {
+	const { asChild, branch, children, className, label, ...rest } = props;
+	const shown = children ?? label ?? branch;
+	if (shown === void 0) return null;
+	return renderPart("span", asChild, {
+		...rest,
+		className: cx("mk-branch", className),
+		title: branch,
+		ref
+	}, shown);
+});
+//#endregion
+export { Branch, Header, Logo };

package/dist/island/index.d.ts

@@ -0,0 +1,18 @@
+import { Account, AccountProps } from "./account.js";
+import { FilterCounts, countsFor, numbersFor, orphanReason, resolutionsFor } from "./comments.js";
+import { IslandContent, IslandContentProps } from "./content.js";
+import { DragHandlers, IslandContextError, IslandContextValue, IslandPhase, PointerEventLike, reasonOf, useIsland } from "./context.js";
+import { islandCss } from "./css.js";
+import { DRAGGING_ATTRIBUTE, DRAG_THRESHOLD_PX, useDrag } from "./drag.js";
+import { Filters, FiltersProps } from "./filters.js";
+import { Branch, BranchProps, Header, HeaderProps, Logo, LogoProps } from "./header.js";
+import { Island, IslandProps } from "./island.js";
+import { Item, ItemProps, TIME_DELAY_MS } from "./item.js";
+import { FILTER_LABELS, ISLAND_COPY, SETTINGS_COPY, kindPhrase, openLabel } from "./language.js";
+import { List, ListProps } from "./list.js";
+import { NewComment, NewCommentProps, PickButton, PickButtonProps } from "./new-comment.js";
+import { Settings, SettingsProps } from "./settings.js";
+import { STAGGER_ROWS } from "./stagger.js";
+import { absoluteTime, relativeTime } from "./time.js";
+import { IslandTrigger, IslandTriggerProps } from "./trigger.js";
+export { Account, type AccountProps, 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, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };

package/dist/island/index.js

@@ -0,0 +1,18 @@
+import { STAGGER_ROWS } from "./stagger.js";
+import { islandCss } from "./css.js";
+import { FILTER_LABELS, ISLAND_COPY, SETTINGS_COPY, kindPhrase, openLabel } from "./language.js";
+import { Account } from "./account.js";
+import { countsFor, numbersFor, orphanReason, resolutionsFor } from "./comments.js";
+import { IslandContextError, reasonOf, useIsland } from "./context.js";
+import { IslandContent } from "./content.js";
+import { DRAGGING_ATTRIBUTE, DRAG_THRESHOLD_PX, useDrag } from "./drag.js";
+import { Filters } from "./filters.js";
+import { Branch, Header, Logo } from "./header.js";
+import { Island } from "./island.js";
+import { absoluteTime, relativeTime } from "./time.js";
+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 { IslandTrigger } from "./trigger.js";
+export { Account, 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, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };

package/dist/island/island.d.ts

@@ -0,0 +1,12 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/island.d.ts
+/** How the island starts, and what goes inside it. */
+export interface IslandProps extends PartProps {
+  readonly children?: ReactNode;
+  /** Collapsed unless something already asked for it open. */
+  readonly defaultOpen?: boolean;
+}
+/** The island's own corner, and the state its parts share. */
+export declare const Island: import("react").ForwardRefExoticComponent<IslandProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/island/island.js

@@ -0,0 +1,111 @@
+import { useMapleUi } from "../context.js";
+import { composeRefs } from "../slot.js";
+import { cx, renderPart } from "../part.js";
+import { numbersFor, resolutionsFor } from "./comments.js";
+import { IslandContext } from "./context.js";
+import { useDrag } from "./drag.js";
+import { createElement, forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { watchEscape } from "@maple-kit/core/client";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+//#region src/island/island.ts
+const PART = "<Maple.Island>";
+const Island = forwardRef(function Island(props, ref) {
+	const { asChild, children, className, defaultOpen, ...rest } = props;
+	const { composer, hidden, position } = useMaple();
+	const value = useIslandState(defaultOpen === true);
+	if (hidden) return null;
+	const element = renderPart("div", asChild, {
+		...rest,
+		className: cx("mk-island", className),
+		"data-mk-open": String(value.phase !== "closed"),
+		"data-mk-corner": position,
+		"data-mk-inset": String(composer.open),
+		ref: composeRefs(ref, value.drag.attach)
+	}, children);
+	return createElement(IslandContext.Provider, { value }, element);
+});
+function useIslandState(defaultOpen) {
+	const { comments, composer, detail, selected } = useMaple();
+	const client = useMapleClient();
+	const { container } = useMapleUi(PART);
+	const [phase, setPhase] = useState(defaultOpen ? "open" : "closed");
+	const [settingsOpen, setSettingsOpen] = useState(false);
+	const contentId = useId();
+	const setOpen = useCallback((open) => {
+		if (!open) client.select(null);
+		setPhase((current) => open ? "open" : leaving(current));
+	}, [client]);
+	const settled = useCallback(() => {
+		setPhase((current) => current === "closing" ? "closed" : current);
+	}, []);
+	const setDeveloper = useCallback((on) => {
+		client.setDetail(on ? "developer" : "default");
+	}, [client]);
+	const developer = detail === "developer";
+	const numbers = useMemo(() => numbersFor(comments), [comments]);
+	const page = container.ownerDocument;
+	const resolutions = useMemo(() => resolutionsFor(comments, page, developer), [
+		comments,
+		page,
+		developer
+	]);
+	const snap = useCallback((corner) => client.setPosition(corner), [client]);
+	const drag = useDrag(container, snap);
+	useEscape({
+		composerOpen: composer.open,
+		settingsOpen,
+		setSettingsOpen,
+		setOpen,
+		client
+	});
+	return useMemo(() => ({
+		phase: selected === null ? phase : "open",
+		setOpen,
+		settled,
+		developer,
+		setDeveloper,
+		settingsOpen,
+		setSettingsOpen,
+		contentId,
+		numbers,
+		comments,
+		resolutions,
+		selected,
+		drag
+	}), [
+		comments,
+		contentId,
+		developer,
+		drag,
+		numbers,
+		phase,
+		resolutions,
+		selected,
+		setDeveloper,
+		setOpen,
+		settingsOpen,
+		settled
+	]);
+}
+function useEscape(order) {
+	const latest = useRef(order);
+	latest.current = order;
+	useEffect(() => {
+		const stop = new AbortController();
+		watchEscape({
+			signal: stop.signal,
+			onEscape: () => {
+				const now = latest.current;
+				if (now.composerOpen) return now.client.closeComposer();
+				if (now.settingsOpen) return now.setSettingsOpen(false);
+				now.setOpen(false);
+			}
+		});
+		return () => stop.abort();
+	}, []);
+}
+function leaving(phase) {
+	return phase === "open" ? "closing" : phase;
+}
+//#endregion
+export { Island };

package/dist/island/item.d.ts

@@ -0,0 +1,12 @@
+import { PartProps } from "../part.js";
+import { Comment } from "@maple-kit/core";
+//#region src/island/item.d.ts
+/** One comment. The row renders it; it takes no view of its own. */
+export interface ItemProps extends PartProps {
+  readonly comment: Comment;
+}
+/** A second of rest: nobody hovers a timestamp meaning to ask what it was. */
+export declare const TIME_DELAY_MS = 1000;
+/** A row: which comment, who and when, what they said, and what it is on. */
+export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion

package/dist/island/item.js

@@ -0,0 +1,158 @@
+import { dataAttributes, formFor } from "../data.js";
+import { PROVENANCE_SENTENCES, STATUS_LABELS, STATUS_SENTENCES } from "../language.js";
+import { composeRefs } from "../slot.js";
+import { applyReviewerSlot } from "../slots.js";
+import { cx, renderPart } from "../part.js";
+import { Tip } from "../tip.js";
+import { ISLAND_COPY, kindPhrase } from "./language.js";
+import { useIsland } from "./context.js";
+import { MapleLeaf } from "../marks/shape.js";
+import { absoluteTime, relativeTime } from "./time.js";
+import { createElement, forwardRef, useCallback, useRef, useState } from "react";
+import { useMapleClient } from "@maple-kit/react";
+import { kindOf, labelFor } from "@maple-kit/core/anchor";
+//#region src/island/item.ts
+const LONG_BODY = 150;
+const PART = "<Maple.Item>";
+const TIME_DELAY_MS = 1e3;
+const Item = forwardRef(function Item(props, ref) {
+	const { asChild, className, comment, ...rest } = props;
+	const island = useIsland(PART);
+	const client = useMapleClient();
+	const [expanded, setExpanded] = useState(false);
+	const long = comment.body.length > LONG_BODY;
+	const number = island.numbers.get(comment.id) ?? 0;
+	const selected = island.selected === comment.id;
+	return renderPart("article", asChild, {
+		...dataAttributes({ status: comment.status }),
+		...rest,
+		"data-mk-expanded": String(expanded),
+		"data-mk-selected": String(selected),
+		className: cx("mk-row", className),
+		onClick: () => client.viewComment(comment.id),
+		onPointerEnter: () => client.peek(comment.id),
+		onPointerLeave: () => client.peek(null),
+		onFocus: () => client.peek(comment.id),
+		onBlur: () => client.peek(null),
+		ref: composeRefs(ref, useReveal(selected))
+	}, [
+		top(comment, number),
+		renderPart("p", false, {
+			key: "body",
+			className: "mk-text mk-body"
+		}, comment.body),
+		long ? more(expanded, () => setExpanded(!expanded)) : null,
+		meta(comment)
+	]);
+});
+function useReveal(selected) {
+	const shown = useRef(false);
+	return useCallback((node) => {
+		if (!node || !selected) {
+			shown.current = shown.current && selected;
+			return;
+		}
+		if (shown.current) return;
+		shown.current = true;
+		node.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [selected]);
+}
+function more(expanded, onClick) {
+	const label = expanded ? ISLAND_COPY.showLess : ISLAND_COPY.showAll;
+	return renderPart("button", false, {
+		key: "more",
+		type: "button",
+		className: "mk-more",
+		onClick
+	}, label);
+}
+function top(comment, number) {
+	const chip = comment.status === "open" ? null : createElement(Tip, {
+		key: "status",
+		className: cx("mk-chip", chipTone(comment)),
+		sentence: STATUS_SENTENCES[comment.status]
+	}, STATUS_LABELS[comment.status]);
+	return renderPart("div", false, {
+		key: "top",
+		className: "mk-row-top"
+	}, [
+		pin(comment, number),
+		who(comment),
+		chip
+	]);
+}
+function chipTone(comment) {
+	if (comment.status === "resolved") return "mk-chip-ok";
+	return comment.status === "orphaned" ? "mk-chip-lost" : "mk-chip-warn";
+}
+function pin(comment, number) {
+	const form = formFor(comment.status);
+	const sentence = `${STATUS_LABELS[comment.status]} — ${STATUS_SENTENCES[comment.status]}`;
+	return createElement(Tip, {
+		key: "pin",
+		className: "mk-rowleaf",
+		sentence,
+		triggerProps: { ...dataAttributes({
+			status: comment.status,
+			form
+		}) }
+	}, createElement(MapleLeaf, {
+		key: "leaf",
+		form,
+		halo: false
+	}), createElement("span", {
+		key: "n",
+		className: "mk-mark-n mk-num",
+		"data-mk-digits": String(String(number).length)
+	}, number));
+}
+function who(comment) {
+	const { author } = comment;
+	return renderPart("span", false, {
+		key: "who",
+		className: "mk-who",
+		...dataAttributes({ provenance: author.provenance })
+	}, [name(author), createElement(Tip, {
+		key: "when",
+		className: "mk-when",
+		delayMs: TIME_DELAY_MS,
+		sentence: absoluteTime(comment.createdAt)
+	}, relativeTime(comment.createdAt, Date.now()))]);
+}
+function name(author) {
+	const slot = author.colorSlot ?? 0;
+	return createElement(Tip, {
+		key: "name",
+		className: "mk-name",
+		sentence: `${author.name} — ${PROVENANCE_SENTENCES[author.provenance]}`,
+		triggerProps: {
+			...dataAttributes({ provenance: author.provenance }),
+			ref: (node) => {
+				if (node) applyReviewerSlot(node, slot);
+			}
+		}
+	}, author.name);
+}
+function meta(comment) {
+	const attachments = comment.attachments?.length ?? 0;
+	return renderPart("div", false, {
+		key: "meta",
+		className: "mk-meta"
+	}, [comment.status === "orphaned" ? null : place(comment), attachments > 0 ? createElement(Tip, {
+		key: "shot",
+		className: "mk-chip",
+		sentence: ISLAND_COPY.attachmentSentence
+	}, ISLAND_COPY.attachment) : null]);
+}
+function place(comment) {
+	const phrase = kindPhrase(kindOf(comment.anchor), labelFor({ anchor: comment.anchor }));
+	return renderPart("span", false, {
+		key: "on",
+		className: "mk-when"
+	}, ["on ", renderPart("b", false, { key: "b" }, phrase)]);
+}
+//#endregion
+export { Item, TIME_DELAY_MS };

package/dist/island/language.d.ts

@@ -0,0 +1,55 @@
+import { CommentFilter, Corner, PickKind, ThemePreference } from "@maple-kit/core/client";
+//#region src/island/language.d.ts
+/** The five filters, in the words the pills show. `unpinned` is `orphaned`. */
+export declare const FILTER_LABELS: Readonly<Record<CommentFilter, string>>;
+/** One sentence per setting: what it does, not what it is called again. */
+export declare const SETTINGS_COPY: {
+  readonly theme: {
+    readonly name: "Theme";
+    readonly hint: "What the overlay itself is drawn in. A comment always records the page's own.";
+  };
+  readonly position: {
+    readonly name: "Corner";
+    readonly hint: "Where the island sits. Dragging it by its pill does the same thing.";
+  };
+  readonly hideResolved: {
+    readonly name: "Hide resolved";
+    readonly hint: "Done comments stay off the page and out of the list until you pick the Resolved filter.";
+  };
+  readonly developer: {
+    readonly name: "Developer mode";
+    readonly hint: "Shows how each comment is re-found after a deploy, its source line and its CSS path.";
+  };
+  readonly untagged: {
+    readonly name: "This build is not tagged";
+    readonly hint: string;
+  };
+  readonly hidden: {
+    readonly name: "Hide the island";
+    readonly hint: "It goes until you reload. A comment arriving, or a link to one, brings it straight back.";
+  };
+};
+/** Copy with no better home than a name. */
+export declare const ISLAND_COPY: {
+  readonly title: "Comments";
+  readonly settings: "Settings";
+  readonly close: "Close the inventory";
+  readonly closeGlyph: "✕";
+  readonly newComment: "New:";
+  readonly empty: "Nothing here under this filter.";
+  readonly loading: "Reading the comments on this branch…";
+  readonly unread: "The comments could not be read, so this list is not the whole story.";
+  readonly showAll: "Show all";
+  readonly showLess: "Show less";
+  readonly hide: "Hide";
+  readonly attachment: "shot";
+  readonly attachmentSentence: "A screenshot went with this comment. The panel shows it.";
+};
+/** The pill's own words. One number, and it is the open one. */
+export declare function openLabel(count: number): string;
+/**
+ * What a comment is on, in the words a reviewer would use. A passage is in
+ * something and a region is an area of it; an element is simply its own name.
+ */
+export declare function kindPhrase(kind: PickKind, human: string | undefined): string;
+//#endregion