@maple-kit/ui 0.1.0

package/dist/data.d.ts

@@ -0,0 +1,52 @@
+import { CommentStatus } from "@maple-kit/core";
+//#region src/data.d.ts
+/**
+ * How a mark is drawn: fill says how far through a comment's life it is, so
+ * the leaf fills up rather than emptying out. Open is an outline, re-verify
+ * is half, resolved is full, and one never written is an outline too — in
+ * grey, which is what tells the two apart.
+ */
+export type PartForm = "outline" | "partial" | "solid";
+/** The confidence word a reviewer reads, and what the low fill keys off. */
+export type PartConfidence = "certain" | "fair" | "strong" | "weak";
+/** How sure Maple is that this author is who the comment says. */
+export type PartProvenance = "client" | "guest" | "server";
+/** Everything a part may say about itself. Every field is optional. */
+export interface PartState {
+  readonly status?: CommentStatus;
+  readonly form?: PartForm;
+  readonly confidence?: PartConfidence;
+  readonly provenance?: PartProvenance;
+  readonly armed?: boolean;
+  /** False for a comment still being written, which is drawn in grey. */
+  readonly sent?: boolean;
+}
+/** The rendered attributes, ready to spread. Absent state produces no attribute. */
+export type PartAttributes = Readonly<Record<string, string>>;
+/** Turns state into the six attributes. The only place their names appear. */
+export declare function dataAttributes(state: PartState): PartAttributes;
+/**
+ * What a pointer is doing to a part, rather than what its comment is.
+ *
+ * These are the overlay's own, so they carry the `mk` prefix the wire states
+ * do not: nothing here is recorded, sent, or true of the comment — a mark is
+ * peeked because a row is hovered, and nudged because someone moved it.
+ */
+export interface PointerState {
+  /** A row or the mark itself is under a pointer. Sticks to nothing. */
+  readonly peeked?: boolean;
+  /** Moved off what it was covering, and holding where it was put. */
+  readonly nudged?: boolean;
+  readonly dragging?: boolean;
+}
+/** The three attributes, ready to spread. Absent state produces no attribute. */
+export declare function pointerAttributes(state: PointerState): PartAttributes;
+/**
+ * Fill, edge and colour never compete: this decides fill alone. An unsent
+ * comment is an outline and so is an unpinned one, which never reached the
+ * page; their colour is what separates them from an open comment.
+ */
+export declare function formFor(status: CommentStatus | undefined, sent?: boolean): PartForm;
+/** The four confidence words, at the thresholds the tooltips quote. */
+export declare function confidenceFor(value: number): PartConfidence;
+//#endregion

package/dist/data.js

@@ -0,0 +1,30 @@
+//#region src/data.ts
+function dataAttributes(state) {
+	const attributes = {};
+	if (state.status) attributes["data-status"] = state.status;
+	if (state.form) attributes["data-form"] = state.form;
+	if (state.confidence) attributes["data-confidence"] = state.confidence;
+	if (state.provenance) attributes["data-provenance"] = state.provenance;
+	if (state.armed !== void 0) attributes["data-armed"] = String(state.armed);
+	if (state.sent !== void 0) attributes["data-sent"] = String(state.sent);
+	return attributes;
+}
+function pointerAttributes(state) {
+	const attributes = {};
+	if (state.peeked !== void 0) attributes["data-mk-peeked"] = String(state.peeked);
+	if (state.nudged !== void 0) attributes["data-mk-nudged"] = String(state.nudged);
+	if (state.dragging !== void 0) attributes["data-mk-dragging"] = String(state.dragging);
+	return attributes;
+}
+function formFor(status, sent = true) {
+	if (!sent) return "outline";
+	if (status === "resolved") return "solid";
+	return status === "needs_reverify" ? "partial" : "outline";
+}
+function confidenceFor(value) {
+	if (value >= .95) return "certain";
+	if (value >= .85) return "strong";
+	return value >= .65 ? "fair" : "weak";
+}
+//#endregion
+export { confidenceFor, dataAttributes, formFor, pointerAttributes };

package/dist/icons/branch.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/branch.d.ts
+export declare const BranchIcon: IconComponent;
+//#endregion

package/dist/icons/branch.js

@@ -0,0 +1,8 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/branch.ts
+const BranchIcon = createIcon({
+	d: "M5 3.4v9.2 M6.6 2.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 1 1 3.2 0 M6.6 13.4a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 1 1 3.2 0 M12.6 4.6a1.6 1.6 0 1 1-3.2 0 1.6 1.6 0 1 1 3.2 0 M11 6.2c0 2.6-6 1.8-6 5",
+	strokeWidth: 1.3
+});
+//#endregion
+export { BranchIcon };

package/dist/icons/cog.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/cog.d.ts
+export declare const CogIcon: IconComponent;
+//#endregion

package/dist/icons/cog.js

@@ -0,0 +1,8 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/cog.ts
+const CogIcon = createIcon({
+	d: "M2.5 5.5h2.7 M8.8 5.5h4.7 M2.5 10.5h4.7 M10.8 10.5h2.7 M8.8 5.5a1.8 1.8 0 1 1-3.6 0 1.8 1.8 0 1 1 3.6 0 M10.8 10.5a1.8 1.8 0 1 1-3.6 0 1.8 1.8 0 1 1 3.6 0",
+	strokeWidth: 1.3
+});
+//#endregion
+export { CogIcon };

package/dist/icons/commit.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/commit.d.ts
+export declare const CommitIcon: IconComponent;
+//#endregion

package/dist/icons/commit.js

@@ -0,0 +1,5 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/commit.ts
+const CommitIcon = createIcon({ d: "M2 8h3.4 M10.6 8H14 M10.6 8a2.6 2.6 0 1 1-5.2 0 2.6 2.6 0 1 1 5.2 0" });
+//#endregion
+export { CommitIcon };

package/dist/icons/crossfade.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement, ReactNode } from "react";
+//#region src/icons/crossfade.d.ts
+/** What a part hands the cross-fade: the icon, and what to call it. */
+export interface IconCrossfadeProps {
+  /** Changing this starts a swap. Two icons with one name never cross-fade. */
+  readonly name: string;
+  readonly children: ReactNode;
+  readonly className?: string;
+}
+/**
+ * Derived state, set during render rather than in an effect: an effect would
+ * paint the new icon once at full opacity before the transition began.
+ */
+export declare function IconCrossfade(props: IconCrossfadeProps): ReactElement;
+//#endregion

package/dist/icons/crossfade.js

@@ -0,0 +1,27 @@
+import { createElement, useState } from "react";
+//#region src/icons/crossfade.ts
+function IconCrossfade(props) {
+	const next = {
+		name: props.name,
+		node: props.children
+	};
+	const [swap, setSwap] = useState({ current: next });
+	if (swap.current.name !== props.name) setSwap({
+		current: next,
+		previous: swap.current
+	});
+	const className = props.className ? `mk-icon-swap ${props.className}` : "mk-icon-swap";
+	const shown = swap.current.name === props.name ? swap.current : next;
+	return createElement("span", {
+		className,
+		onTransitionEnd: () => setSwap({ current: shown })
+	}, swap.previous ? frame(swap.previous, "out") : null, frame(shown, "in"));
+}
+function frame(shown, direction) {
+	return createElement("span", {
+		key: shown.name,
+		"data-mk-icon": direction
+	}, shown.node);
+}
+//#endregion
+export { IconCrossfade };

package/dist/icons/element.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/element.d.ts
+export declare const ElementIcon: IconComponent;
+//#endregion

package/dist/icons/element.js

@@ -0,0 +1,5 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/element.ts
+const ElementIcon = createIcon({ d: "M2.5 2.5h11v11h-11z M2.5 6h11 M6 2.5v11" });
+//#endregion
+export { ElementIcon };

package/dist/icons/icon.d.ts

@@ -0,0 +1,24 @@
+import { ForwardRefExoticComponent, RefAttributes, SVGProps } from "react";
+//#region src/icons/icon.d.ts
+/** Icons are drawn at 13px unless a part asks for another size. */
+export declare const ICON_SIZE = 13;
+/** Anything an `<svg>` takes, plus the one size the parts vary. */
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+  readonly size?: number;
+}
+/** What `createIcon` returns: a forwarding component, ref and className included. */
+export type IconComponent = ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+/** The path, and the three things that vary between them. */
+export interface IconSpec {
+  readonly d: string;
+  readonly strokeWidth?: number;
+  readonly dashArray?: string;
+  /**
+   * Filled rather than stroked: a stroked glyph at 14px is three hairlines with
+   * gaps between them, and reads as an outline of nothing in particular.
+   */
+  readonly filled?: boolean;
+}
+/** Builds one icon. Called once per module, so a bundler can drop the unused. */
+export declare function createIcon(spec: IconSpec): IconComponent;
+//#endregion

package/dist/icons/icon.js

@@ -0,0 +1,27 @@
+import { createElement, forwardRef } from "react";
+//#region src/icons/icon.ts
+const ICON_SIZE = 13;
+function createIcon(spec) {
+	return forwardRef(function Icon(props, ref) {
+		const { size = 13, ...rest } = props;
+		return createElement("svg", {
+			"aria-hidden": true,
+			focusable: false,
+			...rest,
+			ref,
+			width: size,
+			height: size,
+			viewBox: "0 0 16 16",
+			fill: spec.filled === true ? "currentColor" : "none",
+			stroke: spec.filled === true ? "none" : "currentColor",
+			strokeWidth: spec.strokeWidth ?? 1.4,
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}, createElement("path", {
+			d: spec.d,
+			...spec.dashArray === void 0 ? {} : { strokeDasharray: spec.dashArray }
+		}));
+	});
+}
+//#endregion
+export { ICON_SIZE, createIcon };

package/dist/icons/index.d.ts

@@ -0,0 +1,13 @@
+import { ICON_SIZE, IconComponent, IconProps, IconSpec, createIcon } from "./icon.js";
+import { BranchIcon } from "./branch.js";
+import { CogIcon } from "./cog.js";
+import { CommitIcon } from "./commit.js";
+import { IconCrossfade, IconCrossfadeProps } from "./crossfade.js";
+import { ElementIcon } from "./element.js";
+import { NoPlaceIcon } from "./noplace.js";
+import { RegionIcon } from "./region.js";
+import { SmileyIcon } from "./smiley.js";
+import { SparkleIcon } from "./sparkle.js";
+import { TargetIcon } from "./target.js";
+import { TextIcon } from "./text.js";
+export { BranchIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, type IconComponent, IconCrossfade, type IconCrossfadeProps, type IconProps, type IconSpec, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };

package/dist/icons/index.js

@@ -0,0 +1,13 @@
+import { ICON_SIZE, createIcon } from "./icon.js";
+import { SparkleIcon } from "./sparkle.js";
+import { SmileyIcon } from "./smiley.js";
+import { IconCrossfade } from "./crossfade.js";
+import { ElementIcon } from "./element.js";
+import { RegionIcon } from "./region.js";
+import { TextIcon } from "./text.js";
+import { CogIcon } from "./cog.js";
+import { BranchIcon } from "./branch.js";
+import { CommitIcon } from "./commit.js";
+import { NoPlaceIcon } from "./noplace.js";
+import { TargetIcon } from "./target.js";
+export { BranchIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, IconCrossfade, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };

package/dist/icons/noplace.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/noplace.d.ts
+export declare const NoPlaceIcon: IconComponent;
+//#endregion

package/dist/icons/noplace.js

@@ -0,0 +1,5 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/noplace.ts
+const NoPlaceIcon = createIcon({ d: "M8 14.2c3.1-3.3 4.7-5.7 4.7-7.9A4.7 4.7 0 0 0 3.3 6.3c0 2.2 1.6 4.6 4.7 7.9Z M2.4 2.4 13.6 13.6" });
+//#endregion
+export { NoPlaceIcon };

package/dist/icons/region.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/region.d.ts
+export declare const RegionIcon: IconComponent;
+//#endregion

package/dist/icons/region.js

@@ -0,0 +1,8 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/region.ts
+const RegionIcon = createIcon({
+	d: "M2 4.5h12v7H2z",
+	dashArray: "3 2.4"
+});
+//#endregion
+export { RegionIcon };

package/dist/icons/smiley.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/smiley.d.ts
+export declare const SmileyIcon: IconComponent;
+//#endregion

package/dist/icons/smiley.js

@@ -0,0 +1,8 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/smiley.ts
+const SmileyIcon = createIcon({
+	d: "M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm0 1.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11ZM5.9 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm4.2 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2ZM4.9 9.4a.75.75 0 0 1 1 .3 2.45 2.45 0 0 0 4.2 0 .75.75 0 1 1 1.3.75 3.95 3.95 0 0 1-6.8 0 .75.75 0 0 1 .3-1.05Z",
+	filled: true
+});
+//#endregion
+export { SmileyIcon };

package/dist/icons/sparkle.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/sparkle.d.ts
+export declare const SparkleIcon: IconComponent;
+//#endregion

package/dist/icons/sparkle.js

@@ -0,0 +1,8 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/sparkle.ts
+const SparkleIcon = createIcon({
+	d: "M6.4 2.2 7.5 5.4 10.7 6.5 7.5 7.6 6.4 10.8 5.3 7.6 2.1 6.5 5.3 5.4Z M11.6 9.4 12.2 11 13.8 11.6 12.2 12.2 11.6 13.8 11 12.2 9.4 11.6 11 11Z",
+	strokeWidth: 1.1
+});
+//#endregion
+export { SparkleIcon };

package/dist/icons/target.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/target.d.ts
+export declare const TargetIcon: IconComponent;
+//#endregion

package/dist/icons/target.js

@@ -0,0 +1,5 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/target.ts
+const TargetIcon = createIcon({ d: "M8 2.6v10.8 M2.6 8h10.8 M11.4 8a3.4 3.4 0 1 1-6.8 0 3.4 3.4 0 1 1 6.8 0" });
+//#endregion
+export { TargetIcon };

package/dist/icons/text.d.ts

@@ -0,0 +1,4 @@
+import { IconComponent } from "./icon.js";
+//#region src/icons/text.d.ts
+export declare const TextIcon: IconComponent;
+//#endregion

package/dist/icons/text.js

@@ -0,0 +1,5 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/text.ts
+const TextIcon = createIcon({ d: "M3 3.5h10 M8 3.5v9 M6 12.5h4" });
+//#endregion
+export { TextIcon };

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { MOTION_TOKENS, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, RUNTIME_TOKENS, SHEET_BREAKPOINT_PX } from "./tokens.js";
+import { AsChildError, AsChildProps, Slot, SlotProps, composeRefs, mergeProps } from "./slot.js";
+import { MapleUiContextError, MapleUiContextValue, useMapleUi } from "./context.js";
+import { PartAttributes, PartConfidence, PartForm, PartProvenance, PartState, PointerState, confidenceFor, dataAttributes, formFor, pointerAttributes } from "./data.js";
+import { DETAIL_COPY, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, PROVENANCE_SENTENCES, RUNG_LABELS, STATUS_LABELS, STATUS_SENTENCES, orphanTitle, rungLabel } from "./language.js";
+import { MapleRoot, MapleRootProps, ThemePreference } from "./root.js";
+import { REVIEWER_SLOT_COUNT, SLOT_INK_PROPERTY, SLOT_PROPERTY, applyReviewerSlot, slotColor, slotInk } from "./slots.js";
+import { OVERLAY_CSS, SCHEME_ATTRIBUTE } from "./stylesheet.js";
+import { OverlayTheme, useOverlayScheme } from "./theme.js";
+import { Tip, TipProps, tipSpot } from "./tip.js";
+export { AsChildError, type AsChildProps, DETAIL_COPY, MOTION_TOKENS, MapleRoot, type MapleRootProps, MapleUiContextError, type MapleUiContextValue, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, OVERLAY_CSS, type OverlayTheme, PROVENANCE_SENTENCES, type PartAttributes, type PartConfidence, type PartForm, type PartProvenance, type PartState, type PointerState, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, REVIEWER_SLOT_COUNT, RUNG_LABELS, RUNTIME_TOKENS, MapleRoot as Root, SCHEME_ATTRIBUTE, SHEET_BREAKPOINT_PX, SLOT_INK_PROPERTY, SLOT_PROPERTY, STATUS_LABELS, STATUS_SENTENCES, Slot, type SlotProps, type ThemePreference, Tip, type TipProps, applyReviewerSlot, composeRefs, confidenceFor, dataAttributes, formFor, mergeProps, orphanTitle, pointerAttributes, rungLabel, slotColor, slotInk, tipSpot, useMapleUi, useOverlayScheme };

package/dist/index.js

@@ -0,0 +1,11 @@
+import { MapleUiContextError, useMapleUi } from "./context.js";
+import { confidenceFor, dataAttributes, formFor, pointerAttributes } from "./data.js";
+import { DETAIL_COPY, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, PROVENANCE_SENTENCES, RUNG_LABELS, STATUS_LABELS, STATUS_SENTENCES, orphanTitle, rungLabel } from "./language.js";
+import { MOTION_TOKENS, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, RUNTIME_TOKENS, SHEET_BREAKPOINT_PX } from "./tokens.js";
+import { OVERLAY_CSS, SCHEME_ATTRIBUTE } from "./stylesheet.js";
+import { useOverlayScheme } from "./theme.js";
+import { MapleRoot } from "./root.js";
+import { AsChildError, Slot, composeRefs, mergeProps } from "./slot.js";
+import { REVIEWER_SLOT_COUNT, SLOT_INK_PROPERTY, SLOT_PROPERTY, applyReviewerSlot, slotColor, slotInk } from "./slots.js";
+import { Tip, tipSpot } from "./tip.js";
+export { AsChildError, DETAIL_COPY, MOTION_TOKENS, MapleRoot, MapleUiContextError, ORPHAN_LABELS, ORPHAN_ORDER, ORPHAN_SENTENCES, OVERLAY_CSS, PROVENANCE_SENTENCES, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, REVIEWER_SLOT_COUNT, RUNG_LABELS, RUNTIME_TOKENS, MapleRoot as Root, SCHEME_ATTRIBUTE, SHEET_BREAKPOINT_PX, SLOT_INK_PROPERTY, SLOT_PROPERTY, STATUS_LABELS, STATUS_SENTENCES, Slot, Tip, applyReviewerSlot, composeRefs, confidenceFor, dataAttributes, formFor, mergeProps, orphanTitle, pointerAttributes, rungLabel, slotColor, slotInk, tipSpot, useMapleUi, useOverlayScheme };

package/dist/island/account.d.ts

@@ -0,0 +1,10 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/account.d.ts
+/** The row. Its children replace everything inside it. */
+export interface AccountProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** The GitHub link, as one row of the settings panel. */
+export declare const Account: import("react").ForwardRefExoticComponent<AccountProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/island/account.js

@@ -0,0 +1,52 @@
+import { cx, renderPart } from "../part.js";
+import { ACCOUNT_COPY } from "./language.js";
+import { createElement, forwardRef } from "react";
+import { useGitHubLink, useMapleClient } from "@maple-kit/react";
+//#region src/island/account.ts
+const Account = forwardRef(function Account(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const link = useGitHubLink();
+	const client = useMapleClient();
+	if (link.state === "unsupported") return null;
+	return renderPart("div", asChild, {
+		...rest,
+		className: cx("mk-setting", className),
+		"data-mk-link": link.state,
+		ref
+	}, children ?? [createElement("span", { key: "said" }, createElement("span", { className: "mk-setting-name" }, ACCOUNT_COPY.name), createElement("span", { className: "mk-setting-hint" }, said(link)), code(link)), action(link, client)]);
+});
+function said(link) {
+	if (link.state === "linked") return ACCOUNT_COPY.linkedAs(login(link.login));
+	if (link.state === "linking") return ACCOUNT_COPY.linking;
+	if (link.state === "failed") return link.reason;
+	return ACCOUNT_COPY.unlinked;
+}
+function login(name) {
+	return name === void 0 ? void 0 : `@${name}`;
+}
+function code(link) {
+	if (link.state !== "linking") return null;
+	return createElement("span", {
+		key: "code",
+		className: "mk-acct-code"
+	}, createElement("code", null, link.userCode), createElement("a", {
+		href: link.verificationUri,
+		target: "_blank",
+		rel: "noreferrer noopener"
+	}, ACCOUNT_COPY.open));
+}
+function action(link, client) {
+	if (link.state === "linking") return null;
+	const linked = link.state === "linked";
+	const offer = link.state === "failed" ? ACCOUNT_COPY.retry : ACCOUNT_COPY.link;
+	const label = linked ? ACCOUNT_COPY.unlink : offer;
+	return createElement("button", {
+		key: "act",
+		type: "button",
+		className: "mk-acct-do",
+		...linked ? { title: ACCOUNT_COPY.unlinkHint } : {},
+		onClick: () => void (linked ? client.unlinkGitHub() : client.linkGitHub())
+	}, label);
+}
+//#endregion
+export { Account };

package/dist/island/comments.d.ts

@@ -0,0 +1,24 @@
+import { CommentFilter } from "@maple-kit/core/client";
+import { Anchor, OrphanReason, Resolution } from "@maple-kit/core/anchor";
+import { Comment } from "@maple-kit/core";
+//#region src/island/comments.d.ts
+/** The count beside one filter's pill. */
+export type FilterCounts = Readonly<Record<CommentFilter, number>>;
+/** Each comment's place on the branch, oldest first, keyed by id. */
+export declare function numbersFor(comments: readonly Comment[]): ReadonlyMap<string, number>;
+/**
+ * The live count beside every pill. `All` subtracts the resolved ones while
+ * they are hidden, because the list under it does too.
+ */
+export declare function countsFor(comments: readonly Comment[], showResolved: boolean): FilterCounts;
+/**
+ * Why this comment has no place on the page, asked of the page itself. An
+ * anchor that resolves again has no reason, and the row says nothing.
+ */
+export declare function orphanReason(anchor: Anchor, root: ParentNode): OrphanReason | undefined;
+/**
+ * What the cascade says about every anchor, in one pass. In default detail
+ * only the unpinned are asked: nothing else on the row depends on the answer.
+ */
+export declare function resolutionsFor(comments: readonly Comment[], root: ParentNode, developer: boolean): ReadonlyMap<string, Resolution>;
+//#endregion

package/dist/island/comments.js

@@ -0,0 +1,40 @@
+import { ORPHAN_ORDER } from "../language.js";
+import { matchesFilter } from "@maple-kit/core/client";
+import { resolveAnchor } from "@maple-kit/core/anchor";
+//#region src/island/comments.ts
+function numbersFor(comments) {
+	const ordered = [...comments].sort((a, b) => a.createdAt.localeCompare(b.createdAt));
+	return new Map(ordered.map((comment, index) => [comment.id, index + 1]));
+}
+function countsFor(comments, showResolved) {
+	const count = (filter) => comments.filter((comment) => matchesFilter(comment, filter)).length;
+	const resolved = count("resolved");
+	return {
+		all: showResolved ? comments.length : comments.length - resolved,
+		open: count("open"),
+		needs_reverify: count("needs_reverify"),
+		resolved,
+		unpinned: count("unpinned")
+	};
+}
+function orphanReason(anchor, root) {
+	const resolution = resolveAnchor(anchor, { root });
+	return resolution.status === "orphaned" ? resolution.reason : void 0;
+}
+function resolutionsFor(comments, root, developer) {
+	const found = /* @__PURE__ */ new Map();
+	for (const comment of comments) {
+		if (!developer && comment.status !== "orphaned") continue;
+		found.set(comment.id, resolveAnchor(comment.anchor, { root }));
+	}
+	return found;
+}
+function byReason(comments, reasonOf) {
+	const rank = (comment) => {
+		const reason = reasonOf(comment);
+		return reason === void 0 ? ORPHAN_ORDER.length : ORPHAN_ORDER.indexOf(reason);
+	};
+	return [...comments].sort((a, b) => rank(a) - rank(b));
+}
+//#endregion
+export { byReason, countsFor, numbersFor, orphanReason, resolutionsFor };

package/dist/island/content.d.ts

@@ -0,0 +1,10 @@
+import { PartProps } from "../part.js";
+import { ReactNode } from "react";
+//#region src/island/content.d.ts
+/** The card. Everything the island shows when it is open goes inside it. */
+export interface IslandContentProps extends PartProps {
+  readonly children?: ReactNode;
+}
+/** Mounted while the island is open, and through its exit. */
+export declare const IslandContent: import("react").ForwardRefExoticComponent<IslandContentProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/island/content.js

@@ -0,0 +1,26 @@
+import { cx, renderPart } from "../part.js";
+import { ISLAND_COPY } from "./language.js";
+import { useIsland } from "./context.js";
+import { forwardRef } from "react";
+//#region src/island/content.ts
+const PART = "<Maple.IslandContent>";
+const IslandContent = forwardRef(function IslandContent(props, ref) {
+	const { asChild, children, className, ...rest } = props;
+	const island = useIsland(PART);
+	if (island.phase === "closed") return null;
+	const onAnimationEnd = (event) => {
+		if (island.phase === "closing" && event.target === event.currentTarget) island.settled();
+	};
+	return renderPart("div", asChild, {
+		role: "region",
+		...rest,
+		id: island.contentId,
+		"aria-label": ISLAND_COPY.title,
+		"data-mk-phase": island.phase,
+		className: cx("mk-card mk-surface", className),
+		onAnimationEnd,
+		ref
+	}, children);
+});
+//#endregion
+export { IslandContent };

package/dist/island/context.d.ts

@@ -0,0 +1,58 @@
+import { OrphanReason, Resolution } from "@maple-kit/core/anchor";
+import { Comment } from "@maple-kit/core";
+//#region src/island/context.d.ts
+/** Open, shut, or on its way out: a close animates before it unmounts. */
+export type IslandPhase = "closed" | "closing" | "open";
+/** What every part below `Maple.Island` reads. */
+export interface IslandContextValue {
+  readonly phase: IslandPhase;
+  /** Opening is immediate; closing runs the exit and then unmounts. */
+  readonly setOpen: (open: boolean) => void;
+  /** Called by the card once its exit animation has finished. */
+  readonly settled: () => void;
+  /** Off by default. What it reveals is the developer detail, not the switch. */
+  readonly developer: boolean;
+  readonly setDeveloper: (on: boolean) => void;
+  /** The settings panel's, held here so Escape can shut the newest surface. */
+  readonly settingsOpen: boolean;
+  readonly setSettingsOpen: (open: boolean) => void;
+  /** Ties the pill to the card for assistive technology. */
+  readonly contentId: string;
+  /** Each comment's place on the branch, oldest first. */
+  readonly numbers: ReadonlyMap<string, number>;
+  /** Everything on the branch, whatever the filter says. */
+  readonly comments: readonly Comment[];
+  /** What the cascade says about each anchor, asked of the page as it is now. */
+  readonly resolutions: ReadonlyMap<string, Resolution>;
+  /** The comment a link or a mark asked to be looked at, for the row to mark. */
+  readonly selected: string | null;
+  /** Drag state, so the pill moves the island and the card stays where it is. */
+  readonly drag: DragHandlers;
+}
+/** What the pill spreads to become the island's handle. */
+export interface DragHandlers {
+  /** A ref callback for the island itself, which is the thing that moves. */
+  readonly attach: (node: HTMLElement | null) => void;
+  readonly onPointerDown: (event: PointerEventLike) => void;
+  readonly onPointerMove: (event: PointerEventLike) => void;
+  readonly onPointerUp: (event: PointerEventLike) => void;
+  /** True once the pointer travelled far enough to be a drag, not a click. */
+  readonly moved: () => boolean;
+}
+/** The parts of a pointer event a drag needs. Structural, so it tests flat. */
+export interface PointerEventLike {
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly pointerId: number;
+  readonly currentTarget: EventTarget | null;
+}
+/** Why this comment has no place, out of what the cascade answered. */
+export declare function reasonOf(resolutions: ReadonlyMap<string, Resolution>, id: string): OrphanReason | undefined;
+/** Thrown by an island part rendered outside `<Maple.Island>`. */
+export declare class IslandContextError extends Error {
+  readonly name = "IslandContextError";
+  constructor(part: string);
+}
+/** The island's state, or a readable error rather than a null. */
+export declare function useIsland(part: string): IslandContextValue;
+//#endregion

package/dist/island/context.js

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+//#region src/island/context.ts
+function reasonOf(resolutions, id) {
+	const resolution = resolutions.get(id);
+	return resolution?.status === "orphaned" ? resolution.reason : void 0;
+}
+const IslandContext = createContext(null);
+function listId(contentId) {
+	return `${contentId}-list`;
+}
+var IslandContextError = class extends Error {
+	name = "IslandContextError";
+	constructor(part) {
+		super(`${part} was rendered outside <Maple.Island>. Every island part needs one above it.`);
+	}
+};
+function useIsland(part) {
+	const value = useContext(IslandContext);
+	if (value === null) throw new IslandContextError(part);
+	return value;
+}
+//#endregion
+export { IslandContext, IslandContextError, listId, reasonOf, useIsland };