@maple-kit/ui 0.1.0

package/dist/composer/emoji.d.ts

@@ -0,0 +1,54 @@
+//#region src/composer/emoji.d.ts
+/**
+ * The small set a review comment actually uses, and the `:` that finds it.
+ *
+ * Not a picker over every emoji there is: a reviewer reaching for one is
+ * softening a criticism or flagging a blocker, and a search over 3,600 glyphs
+ * is a worse way to do either than twelve buttons. Not a rich-text editor
+ * either — the body is a plain string on the wire, so Tiptap would buy a
+ * document model nothing here uses, and a textarea knows its own caret.
+ */
+/** One glyph and the words that find it. */
+export interface EmojiChoice {
+  readonly glyph: string;
+  /** The first is the shortcode shown; the rest are aliases that also match. */
+  readonly names: readonly string[];
+}
+/**
+ * Twelve, chosen for a review: agreement, doubt, a blocker, a nit, a thing
+ * that made someone laugh, and the three that stand in for "ship it".
+ */
+export declare const REVIEW_EMOJI: readonly EmojiChoice[];
+/** How many the shortcode menu offers at once. More is a list, not a hint. */
+export declare const SHORTCODE_LIMIT = 6;
+/** A `:word` being typed, and where in the body it starts. */
+export interface Shortcode {
+  readonly query: string;
+  /** Index of the colon itself, so the replacement knows what to cut. */
+  readonly start: number;
+}
+/**
+ * The shortcode the caret is sitting at the end of, if any. It has to follow
+ * a space or the start of the body, or every URL with a colon in it opens a
+ * menu halfway through being typed.
+ */
+export declare function shortcodeAt(body: string, caret: number): Shortcode | undefined;
+/** The emoji a shortcode names, best prefix first, at most six. */
+export declare function searchEmoji(query: string): readonly EmojiChoice[];
+/** A body with `glyph` written over `[start, end)`, and where the caret lands. */
+export interface Written {
+  readonly body: string;
+  readonly caret: number;
+}
+/**
+ * Writes the glyph over `[start, end)`, spaced on both sides. A glyph jammed
+ * against the word before it is a typo, and one with nothing after it leaves
+ * nowhere to keep typing.
+ */
+export declare function writeAt(body: string, start: number, end: number, glyph: string): Written;
+/**
+ * Appended, not inserted at the caret: used where the caller has no field to
+ * ask, which is any composition that draws the control outside the body.
+ */
+export declare function appended(body: string, glyph: string): string;
+//#endregion

package/dist/composer/emoji.js

@@ -0,0 +1,131 @@
+//#region src/composer/emoji.ts
+const REVIEW_EMOJI = [
+	{
+		glyph: "👍",
+		names: [
+			"+1",
+			"yes",
+			"agree",
+			"thumbsup"
+		]
+	},
+	{
+		glyph: "🎉",
+		names: [
+			"tada",
+			"nice",
+			"party"
+		]
+	},
+	{
+		glyph: "🙏",
+		names: [
+			"please",
+			"thanks",
+			"pray"
+		]
+	},
+	{
+		glyph: "🤔",
+		names: [
+			"thinking",
+			"hmm",
+			"unsure"
+		]
+	},
+	{
+		glyph: "😅",
+		names: [
+			"sweat",
+			"oops",
+			"awkward"
+		]
+	},
+	{
+		glyph: "🙈",
+		names: [
+			"hide",
+			"yikes",
+			"monkey"
+		]
+	},
+	{
+		glyph: "🐛",
+		names: ["bug", "broken"]
+	},
+	{
+		glyph: "🔥",
+		names: [
+			"fire",
+			"hot",
+			"great"
+		]
+	},
+	{
+		glyph: "⚠️",
+		names: [
+			"warning",
+			"careful",
+			"risk"
+		]
+	},
+	{
+		glyph: "🚀",
+		names: [
+			"ship",
+			"rocket",
+			"launch"
+		]
+	},
+	{
+		glyph: "✨",
+		names: [
+			"sparkles",
+			"polish",
+			"neat"
+		]
+	},
+	{
+		glyph: "💡",
+		names: [
+			"idea",
+			"suggestion",
+			"tip"
+		]
+	}
+];
+const SHORTCODE_LIMIT = 6;
+const COLON_WORD = /(?:^|\s):([a-z\d+_-]*)$/i;
+function shortcodeAt(body, caret) {
+	const before = body.slice(0, caret);
+	const found = COLON_WORD.exec(before);
+	if (!found) return void 0;
+	const query = found[1] ?? "";
+	return {
+		query,
+		start: caret - query.length - 1
+	};
+}
+function searchEmoji(query) {
+	const needle = query.toLowerCase();
+	if (needle === "") return REVIEW_EMOJI.slice(0, 6);
+	const starts = REVIEW_EMOJI.filter((one) => one.names.some((name) => name.startsWith(needle)));
+	const rest = REVIEW_EMOJI.filter((one) => !starts.includes(one) && one.names.some((name) => name.includes(needle)));
+	return [...starts, ...rest].slice(0, 6);
+}
+function writeAt(body, start, end, glyph) {
+	const head = body.slice(0, start);
+	const tail = body.slice(end);
+	const before = head === "" || /\s$/.test(head) ? "" : " ";
+	const after = tail.startsWith(" ") ? "" : " ";
+	return {
+		body: `${head}${before}${glyph}${after}${tail}`,
+		caret: start + before.length + glyph.length + after.length
+	};
+}
+function appended(body, glyph) {
+	if (body === "") return glyph;
+	return body.endsWith(" ") ? `${body}${glyph}` : `${body} ${glyph}`;
+}
+//#endregion
+export { REVIEW_EMOJI, SHORTCODE_LIMIT, appended, searchEmoji, shortcodeAt, writeAt };

package/dist/composer/index.d.ts

@@ -0,0 +1,15 @@
+import { SHEET_BREAKPOINT_PX } from "../tokens.js";
+import { CANCEL_LABEL, MapleActions, MapleActionsProps, SEND_LABEL } from "./actions.js";
+import { ATTACH_WORDS, MapleAttachments, MapleAttachmentsProps } from "./attachments.js";
+import { MapleContextBadge, MapleContextProps } from "./badge.js";
+import { COMPOSER_PLACEHOLDER, MapleBody, MapleBodyProps } from "./body.js";
+import { LeaveAsk, createLeaveAsk } from "./leave.js";
+import { ComposerScopeError, SheetDetent } from "./scope.js";
+import { COMPOSER_LABEL, DETENT_LABELS, MapleComposer, MapleComposerProps } from "./composer.js";
+import { MapleDetail, MapleDetailProps, detailRows } from "./detail.js";
+import { EmojiChoice, REVIEW_EMOJI, SHORTCODE_LIMIT, Shortcode, Written, appended, searchEmoji, shortcodeAt, writeAt } from "./emoji.js";
+import { peeks } from "./peek.js";
+import { KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, QUOTE_LIMIT, TARGET_PREFIX, UNNAMED_TARGET, leaveMessage, quotedText, targetName, targetPhrase } from "./phrase.js";
+import { EMOJI_COPY, EMOJI_ICON_PX, EmojiGrid, EmojiGridProps, MapleEmoji, MapleEmojiProps } from "./picker-emoji.js";
+import { CLOSE_LABEL, DETAIL_ATTRIBUTE, MapleTarget, MapleTargetProps } from "./target.js";
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, type EmojiChoice, EmojiGrid, type EmojiGridProps, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, type LeaveAsk, MapleActions, type MapleActionsProps, MapleAttachments, type MapleAttachmentsProps, MapleBody, type MapleBodyProps, MapleComposer, type MapleComposerProps, MapleContextBadge, type MapleContextProps, MapleDetail, type MapleDetailProps, MapleEmoji, type MapleEmojiProps, MapleTarget, type MapleTargetProps, QUOTE_LIMIT, REVIEW_EMOJI, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, type SheetDetent, type Shortcode, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, type Written, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };

package/dist/composer/index.js

@@ -0,0 +1,15 @@
+import { SHEET_BREAKPOINT_PX } from "../tokens.js";
+import { ComposerScopeError } from "./scope.js";
+import { CANCEL_LABEL, MapleActions, SEND_LABEL } from "./actions.js";
+import { ATTACH_WORDS, MapleAttachments } from "./attachments.js";
+import { MapleContextBadge } from "./badge.js";
+import { REVIEW_EMOJI, SHORTCODE_LIMIT, appended, searchEmoji, shortcodeAt, writeAt } from "./emoji.js";
+import { EMOJI_COPY, EMOJI_ICON_PX, EmojiGrid, MapleEmoji } from "./picker-emoji.js";
+import { COMPOSER_PLACEHOLDER, MapleBody } from "./body.js";
+import { peeks } from "./peek.js";
+import { KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, QUOTE_LIMIT, TARGET_PREFIX, UNNAMED_TARGET, leaveMessage, quotedText, targetName, targetPhrase } from "./phrase.js";
+import { COMPOSER_LABEL, DETENT_LABELS, MapleComposer } from "./composer.js";
+import { MapleDetail, detailRows } from "./detail.js";
+import { createLeaveAsk } from "./leave.js";
+import { CLOSE_LABEL, DETAIL_ATTRIBUTE, MapleTarget } from "./target.js";
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, EmojiGrid, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, MapleActions, MapleAttachments, MapleBody, MapleComposer, MapleContextBadge, MapleDetail, MapleEmoji, MapleTarget, QUOTE_LIMIT, REVIEW_EMOJI, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };

package/dist/composer/inset.js

@@ -0,0 +1,20 @@
+import "../tokens.js";
+import { useEffect } from "react";
+//#region src/composer/inset.ts
+const PADDING = "padding-inline-end";
+function useInset(frame, panel, view) {
+	useEffect(() => {
+		if (!frame || !panel || !view) return;
+		if (!view.matchMedia(`(min-width: 640px)`).matches) return;
+		frame.style.setProperty(PADDING, `${panel.getBoundingClientRect().width}px`);
+		return () => {
+			frame.style.removeProperty(PADDING);
+		};
+	}, [
+		frame,
+		panel,
+		view
+	]);
+}
+//#endregion
+export { useInset };

package/dist/composer/leave.d.ts

@@ -0,0 +1,19 @@
+import { LeaveAnswer, LeaveQuestion } from "@maple-kit/core/client";
+//#region src/composer/leave.d.ts
+/** The prompt, from both sides: the controller asks, the composer answers. */
+export interface LeaveAsk {
+  /** Pass to `MapleClientOptions.askToLeave`. Resolves when the reviewer picks. */
+  readonly askToLeave: (question: LeaveQuestion) => Promise<LeaveAnswer>;
+  /** For `useSyncExternalStore`; returns the unsubscribe. */
+  readonly subscribe: (listener: () => void) => () => void;
+  /** The question on screen, or undefined when nothing is being asked. */
+  readonly pending: () => LeaveQuestion | undefined;
+  /** Answers the question on screen. A second call does nothing. */
+  readonly answer: (answer: LeaveAnswer) => void;
+}
+/**
+ * Builds the prompt's store. Nothing here touches the DOM or React, so the
+ * copy and the answering are testable without rendering anything.
+ */
+export declare function createLeaveAsk(): LeaveAsk;
+//#endregion

package/dist/composer/leave.js

@@ -0,0 +1,34 @@
+//#region src/composer/leave.ts
+function createLeaveAsk() {
+	const listeners = /* @__PURE__ */ new Set();
+	let asked;
+	const announce = () => {
+		for (const listener of listeners) listener();
+	};
+	return {
+		askToLeave: (question) => {
+			if (asked) return Promise.resolve("keep");
+			return new Promise((resolve) => {
+				asked = {
+					question,
+					settle: resolve
+				};
+				announce();
+			});
+		},
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => listeners.delete(listener);
+		},
+		pending: () => asked?.question,
+		answer: (answer) => {
+			const current = asked;
+			if (!current) return;
+			asked = void 0;
+			announce();
+			current.settle(answer);
+		}
+	};
+}
+//#endregion
+export { createLeaveAsk };

package/dist/composer/peek.d.ts

@@ -0,0 +1,21 @@
+//#region src/composer/peek.d.ts
+/**
+ * Hold Space to see the layout the comment is about.
+ *
+ * Where Maple is mounted inside someone else's application it cannot move the
+ * layout, so the panel gets out of the way instead. A bare key checks its
+ * modifiers and where it landed for the same reason `c` does: Space in a
+ * textarea is a space.
+ */
+interface Held {
+  readonly key: string;
+  readonly code?: string;
+  readonly metaKey?: boolean;
+  readonly ctrlKey?: boolean;
+  readonly altKey?: boolean;
+  readonly shiftKey?: boolean;
+  readonly target?: unknown;
+}
+/** True while Space means "show me the page" and not "type a space". */
+export declare function peeks(event: Held): boolean;
+//#endregion

package/dist/composer/peek.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { isEditable } from "@maple-kit/core/client";
+//#region src/composer/peek.ts
+const PEEK_CODE = "Space";
+function peeks(event) {
+	if (event.code !== PEEK_CODE && event.key !== " ") return false;
+	if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return false;
+	return !isEditable(event.target);
+}
+function useHoldToPeek(view, enabled) {
+	const [peeking, setPeeking] = useState(false);
+	useEffect(() => {
+		if (!view || !enabled) return;
+		const controller = new AbortController();
+		const options = { signal: controller.signal };
+		const down = (event) => {
+			if (!peeks(event)) return;
+			event.preventDefault();
+			setPeeking(true);
+		};
+		view.addEventListener("keydown", down, options);
+		view.addEventListener("keyup", () => setPeeking(false), options);
+		view.addEventListener("blur", () => setPeeking(false), options);
+		return () => controller.abort();
+	}, [view, enabled]);
+	return enabled && peeking;
+}
+//#endregion
+export { peeks, useHoldToPeek };

package/dist/composer/phrase.d.ts

@@ -0,0 +1,27 @@
+import { ComposerTarget, LeaveSubject, PickKind } from "@maple-kit/core/client";
+//#region src/composer/phrase.d.ts
+/** The word on the kind chip: a text pick is a passage to everyone but the code. */
+export declare const KIND_WORDS: Readonly<Record<PickKind, string>>;
+/** What a pick is called when nothing on the page names it. */
+export declare const UNNAMED_TARGET = "this page";
+/** The preposition the phrase is rendered behind. */
+export declare const TARGET_PREFIX = "on ";
+/** The label the controller resolved, the one `labelFor` reads, or the page. */
+export declare function targetName(target: ComposerTarget): string;
+/** Longer than this and the quote is trimmed, because the field is 336px. */
+export declare const QUOTE_LIMIT = 64;
+/** After "on": an element is its own name; a passage and a region are held. */
+export declare function targetPhrase(kind: PickKind, name: string): string;
+/**
+ * The words a passage pick actually selected, trimmed to fit the header. A
+ * reviewer who selected six words has to read those six words back, or the
+ * composer is asking them to remember what they highlighted.
+ */
+export declare function quotedText(target: ComposerTarget): string | undefined;
+/** What is about to be lost, named. "Are you sure?" answers nothing. */
+export declare function leaveMessage(subject: LeaveSubject): string;
+/** The safe answer, and the one focused when the prompt opens. */
+export declare const LEAVE_KEEP = "Keep writing";
+/** The only way a draft is thrown away on the way out. */
+export declare const LEAVE_DISCARD = "Discard";
+//#endregion

package/dist/composer/phrase.js

@@ -0,0 +1,30 @@
+import { labelFor } from "@maple-kit/core/anchor";
+//#region src/composer/phrase.ts
+const KIND_WORDS = {
+	element: "element",
+	region: "region",
+	text: "passage"
+};
+const UNNAMED_TARGET = "this page";
+const TARGET_PREFIX = "on ";
+function targetName(target) {
+	return target.label ?? labelFor({ anchor: target.anchor }) ?? "this page";
+}
+const QUOTE_LIMIT = 64;
+function targetPhrase(kind, name) {
+	if (kind === "text") return `a passage in ${name}`;
+	return kind === "region" ? `an area of ${name}` : name;
+}
+function quotedText(target) {
+	if (target.kind !== "text") return void 0;
+	const exact = target.anchor.quote?.exact?.trim();
+	if (!exact) return void 0;
+	return exact.length > 64 ? `${exact.slice(0, 64).trimEnd()}…` : exact;
+}
+function leaveMessage(subject) {
+	return `You have an unsent comment on ${subject.label ?? "this page"}.`;
+}
+const LEAVE_KEEP = "Keep writing";
+const LEAVE_DISCARD = "Discard";
+//#endregion
+export { KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, QUOTE_LIMIT, TARGET_PREFIX, UNNAMED_TARGET, leaveMessage, quotedText, targetName, targetPhrase };

package/dist/composer/picker-emoji.d.ts

@@ -0,0 +1,34 @@
+import { AsChildProps } from "../slot.js";
+import { EmojiChoice } from "./emoji.js";
+import { ReactElement } from "react";
+//#region src/composer/picker-emoji.d.ts
+/** The control. Takes `asChild` and nothing that changes its look. */
+export interface MapleEmojiProps extends AsChildProps {
+  readonly className?: string;
+  readonly open?: boolean;
+  readonly onToggle?: (open: boolean) => void;
+  /** Called with the glyph. The caller owns the caret, so it does the writing. */
+  readonly onPick?: (glyph: string) => void;
+  /** Replaces the default set, in the order they are shown. */
+  readonly emoji?: readonly EmojiChoice[];
+}
+/** Bigger than the 13px the icons default to: it is a control, not a footnote. */
+export declare const EMOJI_ICON_PX = 16;
+/** Every word this part shows. */
+export declare const EMOJI_COPY: {
+  readonly open: "Add an emoji";
+  readonly close: "Close the emoji list";
+  readonly hint: "Type : to search them";
+};
+/** The button, and the grid it opens above itself. */
+export declare const MapleEmoji: import("react").ForwardRefExoticComponent<MapleEmojiProps & import("react").RefAttributes<HTMLButtonElement>>;
+/** What both surfaces draw: a row of glyphs, each its own button. */
+export interface EmojiGridProps {
+  readonly emoji: readonly EmojiChoice[];
+  readonly onPick: (glyph: string) => void;
+  readonly active?: number;
+  readonly className?: string;
+}
+/** The grid. Labelled by shortcode, so a screen reader hears a word. */
+export declare function EmojiGrid(props: EmojiGridProps): ReactElement;
+//#endregion

package/dist/composer/picker-emoji.js

@@ -0,0 +1,48 @@
+import { Slot } from "../slot.js";
+import { REVIEW_EMOJI } from "./emoji.js";
+import { SmileyIcon } from "../icons/smiley.js";
+import { createElement, forwardRef } from "react";
+//#region src/composer/picker-emoji.ts
+const EMOJI_ICON_PX = 16;
+const EMOJI_COPY = {
+	open: "Add an emoji",
+	close: "Close the emoji list",
+	hint: "Type : to search them"
+};
+const MapleEmoji = forwardRef(function MapleEmoji(props, ref) {
+	const open = props.open ?? false;
+	const Element = props.asChild ? Slot : "button";
+	const button = createElement(Element, {
+		ref,
+		type: "button",
+		className: ["mk-emoji-open", props.className].filter(Boolean).join(" "),
+		"aria-expanded": open,
+		"aria-label": open ? EMOJI_COPY.close : EMOJI_COPY.open,
+		title: `${EMOJI_COPY.open} — ${EMOJI_COPY.hint}`,
+		onClick: () => props.onToggle?.(!open)
+	}, createElement(SmileyIcon, { size: 16 }));
+	const grid = createElement(EmojiGrid, {
+		emoji: props.emoji ?? REVIEW_EMOJI,
+		onPick: (glyph) => props.onPick?.(glyph)
+	});
+	return createElement("span", { className: "mk-emoji" }, button, open ? grid : null);
+});
+function EmojiGrid(props) {
+	return createElement("span", {
+		className: ["mk-emoji-grid", props.className].filter(Boolean).join(" "),
+		role: "listbox",
+		"aria-label": EMOJI_COPY.open
+	}, ...props.emoji.map((one, index) => createElement("button", {
+		key: one.glyph,
+		type: "button",
+		role: "option",
+		"aria-selected": index === props.active,
+		"aria-label": one.names[0] ?? one.glyph,
+		title: `:${one.names[0] ?? ""}`,
+		className: "mk-emoji-one",
+		onMouseDown: (event) => event.preventDefault(),
+		onClick: () => props.onPick(one.glyph)
+	}, one.glyph)));
+}
+//#endregion
+export { EMOJI_COPY, EMOJI_ICON_PX, EmojiGrid, MapleEmoji };

package/dist/composer/prompt.js

@@ -0,0 +1,31 @@
+import { LEAVE_DISCARD, LEAVE_KEEP, leaveMessage } from "./phrase.js";
+import { createElement, useEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/composer/prompt.ts
+function LeavePrompt(props) {
+	const { ask } = props;
+	const question = useSyncExternalStore(ask.subscribe, ask.pending, ask.pending);
+	const [shown, setShown] = useState(question);
+	const keep = useRef(null);
+	if (question !== void 0 && question !== shown) setShown(question);
+	useEffect(() => {
+		if (question) keep.current?.focus();
+	}, [question]);
+	if (!shown) return null;
+	return createElement("div", {
+		className: "mk-leave",
+		"data-mk-open": String(question !== void 0),
+		role: "alertdialog",
+		"aria-label": leaveMessage(shown.subject)
+	}, createElement("p", { className: "mk-leave-say mk-body" }, leaveMessage(shown.subject)), createElement("div", { className: "mk-leave-ask" }, createElement("button", {
+		type: "button",
+		className: "mk-btn mk-btn-quiet mk-press",
+		onClick: () => ask.answer("discard")
+	}, LEAVE_DISCARD), createElement("button", {
+		type: "button",
+		ref: keep,
+		className: "mk-btn mk-btn-primary mk-press",
+		onClick: () => ask.answer("keep")
+	}, LEAVE_KEEP)));
+}
+//#endregion
+export { LeavePrompt };

package/dist/composer/scope.d.ts

@@ -0,0 +1,11 @@
+import { PastedImage } from "@maple-kit/core/screenshot";
+import "@maple-kit/core";
+//#region src/composer/scope.d.ts
+/** How much of the sheet is showing. Two, and no third. */
+export type SheetDetent = "full" | "half";
+/** Thrown by a composer part rendered outside `<Maple.Composer>`. */
+export declare class ComposerScopeError extends Error {
+  readonly name = "ComposerScopeError";
+  constructor(part: string);
+}
+//#endregion

package/dist/composer/scope.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+//#region src/composer/scope.ts
+const ComposerScope = createContext(null);
+var ComposerScopeError = class extends Error {
+	name = "ComposerScopeError";
+	constructor(part) {
+		super(`${part} was rendered outside <Maple.Composer>. Every part needs one above it.`);
+	}
+};
+function useComposerScope(part) {
+	const value = useContext(ComposerScope);
+	if (value === null) throw new ComposerScopeError(part);
+	return value;
+}
+//#endregion
+export { ComposerScope, ComposerScopeError, useComposerScope };

package/dist/composer/target.d.ts

@@ -0,0 +1,13 @@
+import { AsChildProps } from "../slot.js";
+//#region src/composer/target.d.ts
+/** The header. Takes `asChild` and nothing that changes its look. */
+export interface MapleTargetProps extends AsChildProps {
+  readonly className?: string;
+}
+/** Closing leaves the draft where it is. */
+export declare const CLOSE_LABEL = "Close the composer";
+/** Where developer detail lands next. Default until then. */
+export declare const DETAIL_ATTRIBUTE = "data-mk-detail";
+/** Names the target and carries the close control. */
+export declare const MapleTarget: import("react").ForwardRefExoticComponent<MapleTargetProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion

package/dist/composer/target.js

@@ -0,0 +1,45 @@
+import { Slot } from "../slot.js";
+import { KIND_WORDS, quotedText, targetName, targetPhrase } from "./phrase.js";
+import { IconCrossfade } from "../icons/crossfade.js";
+import { ElementIcon } from "../icons/element.js";
+import { RegionIcon } from "../icons/region.js";
+import { TextIcon } from "../icons/text.js";
+import { createElement, forwardRef } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+//#region src/composer/target.ts
+const CLOSE_LABEL = "Close the composer";
+const DETAIL_ATTRIBUTE = "data-mk-detail";
+function iconFor(kind) {
+	if (kind === "text") return createElement(TextIcon, null);
+	return kind === "region" ? createElement(RegionIcon, null) : createElement(ElementIcon, null);
+}
+const MapleTarget = forwardRef(function MapleTarget(props, ref) {
+	const { composer } = useMaple();
+	const client = useMapleClient();
+	const Element = props.asChild ? Slot : "header";
+	return createElement(Element, {
+		ref,
+		className: props.className ? `mk-composer-head ${props.className}` : "mk-composer-head",
+		"data-mk-detail": "default"
+	}, composer.target ? createElement(TargetLine, { target: composer.target }) : null, createElement("span", { className: "mk-composer-fill" }), createElement("button", {
+		type: "button",
+		className: "mk-btn mk-btn-quiet mk-shut mk-hit mk-press",
+		"aria-label": CLOSE_LABEL,
+		onClick: () => client.closeComposer()
+	}, "✕"));
+});
+function TargetLine(props) {
+	const { kind } = props.target;
+	const quoted = quotedText(props.target);
+	const phrase = quoted ?? targetPhrase(kind, targetName(props.target));
+	return createElement("span", { className: "mk-target" }, createElement("span", {
+		className: "mk-target-kind",
+		role: "img",
+		"aria-label": KIND_WORDS[kind]
+	}, createElement(IconCrossfade, {
+		name: kind,
+		children: iconFor(kind)
+	})), createElement("span", { className: "mk-target-on" }, "on ", quoted === void 0 ? createElement("b", null, phrase) : createElement("q", { className: "mk-target-quote" }, quoted)));
+}
+//#endregion
+export { CLOSE_LABEL, DETAIL_ATTRIBUTE, MapleTarget };

package/dist/context.d.ts

@@ -0,0 +1,21 @@
+import { Scheme } from "@maple-kit/core/client";
+//#region src/context.d.ts
+/** The shadow root, and the two schemes, for the parts inside it. */
+export interface MapleUiContextValue {
+  /** Where every part renders. One per `Maple.Root`, styled only by adoption. */
+  readonly root: ShadowRoot;
+  /** The element carrying the shadow root; `:host` in the stylesheet. */
+  readonly container: HTMLElement;
+  /** The overlay's scheme: the opposite of the host's. */
+  readonly scheme: Scheme;
+  /** The host page's scheme. This is the one a comment records. */
+  readonly hostScheme: Scheme;
+}
+/** Thrown by a part rendered outside `<Maple.Root>`. */
+export declare class MapleUiContextError extends Error {
+  readonly name = "MapleUiContextError";
+  constructor(part: string);
+}
+/** The shadow root and the schemes, or a readable error rather than a null. */
+export declare function useMapleUi(part: string): MapleUiContextValue;
+//#endregion

package/dist/context.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+//#region src/context.ts
+const MapleUiContext = createContext(null);
+var MapleUiContextError = class extends Error {
+	name = "MapleUiContextError";
+	constructor(part) {
+		super(`${part} was rendered outside <Maple.Root>. Every part needs one above it.`);
+	}
+};
+function useMapleUi(part) {
+	const value = useContext(MapleUiContext);
+	if (value === null) throw new MapleUiContextError(part);
+	return value;
+}
+//#endregion
+export { MapleUiContext, MapleUiContextError, useMapleUi };