@maple-kit/ui 0.3.0 → 0.5.0

package/dist/composer/badge.d.ts

@@ -7,7 +7,17 @@ export interface MapleContextProps extends AsChildProps {
   readonly className?: string;
   /** A captured page, or a stored comment's context. Both render identically. */
   readonly context?: CommentContext | PageContext;
+  /**
+   * Whether it can be folded away. Off keeps it open and draws no control,
+   * which is what a stored comment wants: nothing is being typed beside it.
+   */
+  readonly collapsible?: boolean;
 }
-/** Labels muted, values aligned, two columns. */
+/** What the disclosure is called, in both states. */
+export declare const CONTEXT_LABELS: {
+  closed: string;
+  open: string;
+};
+/** Labels muted, values aligned, two columns — folded to its first row. */
 export declare const MapleContextBadge: import("react").ForwardRefExoticComponent<MapleContextProps & import("react").RefAttributes<HTMLElement>>;
 //#endregion

package/dist/composer/badge.js

@@ -1,25 +1,46 @@
 import { Slot } from "../slot.js";
 import { Fragment, createElement, forwardRef } from "react";
 import { contextRows } from "@maple-kit/core/overlay";
-import { useMaple } from "@maple-kit/react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
 //#region src/composer/badge.ts
+const CONTEXT_LABELS = {
+	closed: "Show what was captured",
+	open: "Hide what was captured"
+};
 const MapleContextBadge = forwardRef(function MapleContextBadge(props, ref) {
 	const { composer, detail } = useMaple();
+	const client = useMapleClient();
 	const context = props.context ?? composer.target?.context;
-	const Element = props.asChild ? Slot : "dl";
+	const Element = props.asChild ? Slot : "section";
 	if (!context) return null;
-	const className = [
-		"mk-composer-row",
-		"mk-ctx",
-		props.className
-	].filter(Boolean).join(" ");
+	const rows = contextRows(context, detail);
+	const collapsible = props.collapsible !== false && composer.viewing === void 0;
+	const open = !collapsible || composer.contextOpen;
 	return createElement(Element, {
 		ref,
-		className
-	}, ...contextRows(context, detail).map(row));
+		className: [
+			"mk-composer-row",
+			"mk-ctx-card",
+			props.className
+		].filter(Boolean).join(" "),
+		"data-mk-open": String(open)
+	}, collapsible ? head(rows, open, () => client.setContextOpen(!open)) : null, createElement("dl", { className: "mk-ctx" }, ...rows.map(row)));
 });
+function head(rows, open, toggle) {
+	const first = rows[0];
+	return createElement("button", {
+		type: "button",
+		className: "mk-ctx-head mk-press",
+		"aria-expanded": open,
+		"aria-label": open ? CONTEXT_LABELS.open : CONTEXT_LABELS.closed,
+		onClick: toggle
+	}, createElement("span", { className: "mk-ctx-sum" }, first === void 0 ? "Page" : first.value), createElement("span", {
+		className: "mk-ctx-caret",
+		"aria-hidden": "true"
+	}));
+}
 function row(one) {
 	return createElement(Fragment, { key: one.label }, createElement("dt", null, one.label), createElement("dd", one.mono === true ? { className: "mk-mono" } : null, one.value, one.note === void 0 ? null : createElement("em", null, ` · ${one.note}`)));
 }
 //#endregion
-export { MapleContextBadge };
+export { CONTEXT_LABELS, MapleContextBadge };

package/dist/composer/css.js

@@ -184,22 +184,107 @@ function emojiCss() {
 }
 `.trim();
 }
-function contextAndShots() {
+function scoreCard() {
 	return `
-/* Two pairs to a row: seven facts one per line ran the card down half the
-   panel. Labels keep their own column, so every value still lines up. */
-.mk-ctx {
+/* The judgement, in the slot the context card folded out of. Rows are laid out
+   first and filled second, so nothing below moves as they land. */
+.mk-score {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
-  gap: 7px 10px;
+  grid-template-columns: auto 68px minmax(0, 1fr);
+  align-items: center;
+  gap: 6px 9px;
   margin: 2px 16px 4px;
-  padding: 11px 13px;
+  padding: 10px 11px;
   border: 1px solid var(--mk-line);
   border-radius: var(--mk-r-sm);
   background: var(--mk-sunk);
 }
 
-.mk-ctx dt {
+/* The same line box empty as full: the rung arrives after the bar, and a row
+   that grows when its words land moves the field somebody is typing in. */
+.mk-score-rung {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--mk-fg);
+  font-size: 11px;
+  line-height: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* One slot per rung, each filled by the probability it took. Equal widths keep
+   *which* rung readable and the fill carries how sure it was, which is why the
+   bar needs no key beside it: three pale slots are visibly a shrug. */
+.mk-score-bar {
+  display: flex;
+  gap: 2px;
+  height: 5px;
+  margin: 5px 0;
+}
+
+.mk-score-bar i {
+  flex: 1;
+  border-radius: 999px;
+  background: color-mix(
+    in oklab,
+    var(--mk-accent) calc(var(--mk-p, 0) * 100%),
+    var(--mk-line-firm)
+  );
+  transition: background-color var(--mk-dur-swap) var(--mk-ease-swap);
+}
+
+/* Judging is the rows present and empty: a spinner per pillar is five things
+   moving beside a field somebody is typing in. */
+.mk-score[data-mk-status="judging"] .mk-score-bar i {
+  background: var(--mk-line);
+}
+
+`.trim();
+}
+function kindChip() {
+	return `
+/* The select covers the pill, so the whole chip is the hit area. */
+.mk-kind {
+  position: relative;
+  grid-column: 1 / -1;
+  justify-self: start;
+  margin-bottom: 3px;
+  border-radius: var(--mk-r-xs);
+  background: var(--mk-accent-sub);
+  color: var(--mk-accent);
+}
+
+.mk-kind-word {
+  display: block;
+  padding: 2px 7px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.mk-kind[data-mk-chosen="true"] {
+  background: var(--mk-accent);
+  color: var(--mk-accent-ink);
+}
+
+.mk-kind-pick {
+  position: absolute;
+  inset: -6px -4px;
+  width: calc(100% + 8px);
+  border: 0;
+  opacity: 0;
+  font: inherit;
+  cursor: pointer;
+  appearance: none;
+}
+
+.mk-kind:has(.mk-kind-pick:focus-visible) {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-ctx dt,
+.mk-score-name {
   align-self: baseline;
   color: var(--mk-faint);
   font-size: 9px;
@@ -293,6 +378,72 @@ function contextAndShots() {
   color: color-mix(in oklab, var(--mk-maple) 78%, var(--mk-muted));
   font-weight: 450;
 }
+`.trim();
+}
+function contextAndShots() {
+	return `
+/* It folds rather than vanishes: the width is the one fact read off it, so
+   the summary keeps that line in both states. */
+.mk-ctx-card {
+  margin: 2px 16px 4px;
+  border: 1px solid var(--mk-line);
+  border-radius: var(--mk-r-sm);
+  background: var(--mk-sunk);
+  overflow: hidden;
+}
+
+.mk-ctx-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  min-height: 28px;
+  padding: 0 11px;
+  border: 0;
+  background: none;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.mk-ctx-head:hover {
+  color: var(--mk-fg);
+}
+
+/* Two borders rather than an icon: one control does not earn a second svg. */
+.mk-ctx-caret {
+  width: 6px;
+  height: 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: translateY(1px) rotate(-135deg);
+  transition: transform var(--mk-dur-swap) var(--mk-ease-surface);
+}
+
+.mk-ctx-card[data-mk-open="false"] .mk-ctx-caret {
+  transform: translateY(-1px) rotate(45deg);
+}
+
+.mk-ctx-card[data-mk-open="false"] .mk-ctx {
+  display: none;
+}
+
+/* Two pairs to a row: seven facts one per line ran the card down half the
+   panel. Labels keep their own column, so every value still lines up. */
+.mk-ctx {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
+  gap: 7px 10px;
+  padding: 11px;
+}
+
+.mk-ctx-head + .mk-ctx {
+  padding-top: 3px;
+}
+
 `.trim();
 }
 function partsCss() {
@@ -406,6 +557,10 @@ ${emojiCss()}
 
 ${contextAndShots()}
 
+${scoreCard()}
+
+${kindChip()}
+
 .mk-leave {
   position: absolute;
   top: 12px;

package/dist/composer/index.d.ts

@@ -1,7 +1,7 @@
 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 { CONTEXT_LABELS, 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";
@@ -11,5 +11,6 @@ import { EmojiChoice, REVIEW_EMOJI, SHORTCODE_LIMIT, Shortcode, Written, appende
 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 { KIND_AUTO, KIND_LABEL, MapleScoreCard, MapleScoreProps, SCORE_LABEL } from "./score.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 };
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, 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_AUTO, KIND_LABEL, 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, MapleScoreCard, type MapleScoreProps, MapleTarget, type MapleTargetProps, QUOTE_LIMIT, REVIEW_EMOJI, SCORE_LABEL, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, 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

@@ -2,7 +2,7 @@ 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 { CONTEXT_LABELS, 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";
@@ -11,5 +11,6 @@ import { KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, QUOTE_LIMIT, TARGET_PREFIX, UNNA
 import { COMPOSER_LABEL, DETENT_LABELS, MapleComposer } from "./composer.js";
 import { MapleDetail, detailRows } from "./detail.js";
 import { createLeaveAsk } from "./leave.js";
+import { KIND_AUTO, KIND_LABEL, MapleScoreCard, SCORE_LABEL } from "./score.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 };
+export { ATTACH_WORDS, MapleActions as Actions, MapleAttachments as Attachments, MapleBody as Body, CANCEL_LABEL, CLOSE_LABEL, COMPOSER_LABEL, COMPOSER_PLACEHOLDER, CONTEXT_LABELS, MapleComposer as Composer, ComposerScopeError, MapleContextBadge as Context, DETAIL_ATTRIBUTE, DETENT_LABELS, MapleDetail as Detail, EMOJI_COPY, EMOJI_ICON_PX, MapleEmoji as Emoji, EmojiGrid, KIND_AUTO, KIND_LABEL, KIND_WORDS, LEAVE_DISCARD, LEAVE_KEEP, MapleActions, MapleAttachments, MapleBody, MapleComposer, MapleContextBadge, MapleDetail, MapleEmoji, MapleScoreCard, MapleTarget, QUOTE_LIMIT, REVIEW_EMOJI, SCORE_LABEL, SEND_LABEL, SHEET_BREAKPOINT_PX, SHORTCODE_LIMIT, MapleScoreCard as Score, TARGET_PREFIX, MapleTarget as Target, UNNAMED_TARGET, appended, createLeaveAsk, detailRows, leaveMessage, peeks, quotedText, searchEmoji, shortcodeAt, targetName, targetPhrase, writeAt };

package/dist/composer/peek.d.ts

@@ -15,6 +15,7 @@ interface Held {
   readonly altKey?: boolean;
   readonly shiftKey?: boolean;
   readonly target?: unknown;
+  readonly composedPath?: () => readonly unknown[];
 }
 /** True while Space means "show me the page" and not "type a space". */
 export declare function peeks(event: Held): boolean;

package/dist/composer/peek.js

@@ -2,10 +2,14 @@ import { useEffect, useState } from "react";
 import { isEditable } from "@maple-kit/core/client";
 //#region src/composer/peek.ts
 const PEEK_CODE = "Space";
+function origin(event) {
+	const path = event.composedPath?.();
+	return path !== void 0 && path.length > 0 ? path[0] : event.target;
+}
 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);
+	return !isEditable(origin(event));
 }
 function useHoldToPeek(view, enabled) {
 	const [peeking, setPeeking] = useState(false);

package/dist/composer/score.d.ts

@@ -0,0 +1,16 @@
+import { AsChildProps } from "../slot.js";
+//#region src/composer/score.d.ts
+/** The card. It draws nothing at all until something has been judged. */
+export interface MapleScoreProps extends AsChildProps {
+  readonly className?: string;
+  /** The chip that lets a reviewer overrule the guess. On unless asked otherwise. */
+  readonly kind?: boolean;
+}
+/** What the card calls itself, and what the kind control is called. */
+export declare const SCORE_LABEL = "How this comment reads";
+export declare const KIND_LABEL = "What kind of comment this is";
+/** The option that hands the kind back to the classifier. */
+export declare const KIND_AUTO = "auto";
+/** The card. Renders from `ComposerState` and holds nothing of its own. */
+export declare const MapleScoreCard: import("react").ForwardRefExoticComponent<MapleScoreProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion

package/dist/composer/score.js

@@ -0,0 +1,87 @@
+import { Slot } from "../slot.js";
+import { Fragment, createElement, forwardRef } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+import { COMMENT_KINDS, FALLBACK_KIND } from "@maple-kit/core/connectors";
+//#region src/composer/score.ts
+const SCORE_LABEL = "How this comment reads";
+const KIND_LABEL = "What kind of comment this is";
+const KIND_AUTO = "auto";
+const RUNNER_UP = .5;
+const MapleScoreCard = forwardRef(function MapleScoreCard(props, ref) {
+	const { assist, composer } = useMaple();
+	const { scores, status } = composer.assist;
+	const Element = props.asChild ? Slot : "section";
+	if (!assist || status === "idle" || composer.viewing !== void 0) return null;
+	return createElement(Element, {
+		ref,
+		className: [
+			"mk-composer-row",
+			"mk-score",
+			props.className
+		].filter(Boolean).join(" "),
+		"data-mk-status": status,
+		"aria-label": SCORE_LABEL,
+		"aria-busy": status === "judging"
+	}, props.kind === false ? null : createElement(KindChip), ...assist.pillars.map((pillar) => pillarRow(pillar, find(scores, pillar.id))));
+});
+function pillarRow(pillar, score) {
+	const level = score?.level;
+	const reached = level === void 0 ? void 0 : pillar.levels[level];
+	return createElement(Fragment, { key: pillar.id }, createElement("span", { className: "mk-score-name" }, pillar.id), createElement("span", {
+		className: "mk-score-bar",
+		role: "img",
+		"aria-label": legend(pillar, score)
+	}, ...pillar.levels.map((_, index) => segment(index, score?.distribution[index]))), createElement("span", {
+		className: "mk-score-rung",
+		title: reached?.description
+	}, reached?.label ?? ""));
+}
+function segment(index, share) {
+	const fill = Math.round((share ?? 0) * 1e3) / 1e3;
+	return createElement("i", {
+		key: index,
+		style: { "--mk-p": fill }
+	});
+}
+function legend(pillar, score) {
+	if (score === void 0) return `${pillar.id}: not judged yet`;
+	const sure = Math.round(score.confidence * 100);
+	return `${pillar.id}: ${pillar.levels[score.level]?.label ?? ""}, ${String(sure)}% confident`;
+}
+function KindChip() {
+	const { composer } = useMaple();
+	const client = useMapleClient();
+	const { chosenKind, kind } = composer.assist;
+	return createElement("span", {
+		className: "mk-kind",
+		"data-mk-chosen": String(chosenKind !== void 0)
+	}, createElement("span", {
+		className: "mk-kind-word",
+		"aria-hidden": "true"
+	}, word(kind, chosenKind)), createElement("select", {
+		className: "mk-kind-pick",
+		"aria-label": KIND_LABEL,
+		value: chosenKind ?? "auto",
+		onChange: (event) => client.setKind(event.target.value === "auto" ? void 0 : event.target.value)
+	}, createElement("option", {
+		key: KIND_AUTO,
+		value: KIND_AUTO
+	}, guessed(kind)), ...COMMENT_KINDS.map((one) => createElement("option", {
+		key: one,
+		value: one
+	}, one))));
+}
+function word(kind, chosen) {
+	if (chosen !== void 0) return chosen;
+	if (kind === null) return "…";
+	const [next, share] = COMMENT_KINDS.filter((one) => one !== kind.kind).map((one) => [one, kind.distribution[one] ?? 0]).reduce((best, one) => one[1] > best[1] ? one : best, [FALLBACK_KIND, 0]);
+	return share >= (kind.distribution[kind.kind] ?? 1) * RUNNER_UP ? `${kind.kind} or ${next}` : kind.kind;
+}
+function guessed(kind) {
+	return kind === null ? "auto" : `auto (${kind.kind})`;
+}
+function find(scores, id) {
+	return scores.find((score) => score.pillar === id);
+}
+//#endregion
+export { KIND_AUTO, KIND_LABEL, MapleScoreCard, SCORE_LABEL };

package/dist/island/css.js

@@ -96,6 +96,41 @@ function shell() {
   stroke-linejoin: round;
 }
 
+/* The lockup. Both halves are their own ink box, so centring them centres the
+   drawing rather than two boxes of whitespace. The gap is zero: the leaf's
+   own tips carry the air, and a gap on top of them reads as a gap. */
+.mk-wordmark {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+}
+
+.mk-wordmark-leaf {
+  flex: none;
+  display: block;
+  color: var(--mk-accent);
+  filter: saturate(0.9);
+}
+
+.mk-wordmark-leaf path {
+  fill: currentColor;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  stroke-linejoin: round;
+}
+
+/* The leaf's mass is below its box centre — the stem is the long end — so the
+   word rides up by the same ratio the mark's number rides down: one part in
+   38 of the leaf's edge. A percentage resolves against the word's own height,
+   which is 0.86 of that edge, so 1 / (38 * 0.86) holds at every size. */
+.mk-wordmark-word {
+  flex: none;
+  display: block;
+  fill: var(--mk-fg);
+  transform: translateY(-3.06%);
+}
+
 .mk-card {
   position: absolute;
   right: 0;
@@ -202,6 +237,12 @@ function header() {
   letter-spacing: -0.01em;
 }
 
+/* An application that replaces the wordmark with its own text gets the type
+   back; the drawing sets its own size and ignores this. */
+.mk-head-title:has(.mk-wordmark) {
+  font-size: 0;
+}
+
 .mk-spacer {
   flex: 1 1 auto;
 }

package/dist/island/header.d.ts

@@ -5,9 +5,9 @@ import { ReactNode } from "react";
 export interface HeaderProps extends PartProps {
   readonly children?: ReactNode;
 }
-/** The wordmark, and the word. */
+/** The wordmark. */
 export interface LogoProps extends PartProps {
-  /** Replaces the title beside the leaf. */
+  /** Replaces the wordmark, for an application that brands the island. */
   readonly children?: ReactNode;
 }
 /** Which branch these comments belong to. */
@@ -20,7 +20,11 @@ export interface BranchProps extends PartProps {
 }
 /** 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. */
+/**
+ * The lockup, which is what the island is. It said "Comments" beside the leaf
+ * and now says the product's name: the island is the one Maple object on the
+ * page, and what it holds is already the only thing in it.
+ */
 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

package/dist/island/header.js

@@ -1,7 +1,7 @@
 import { cx, renderPart } from "../part.js";
 import { ISLAND_COPY } from "./language.js";
 import { useIsland } from "./context.js";
-import { Leaf } from "./leaf.js";
+import { Wordmark } from "./wordmark.js";
 import { forwardRef } from "react";
 //#region src/island/header.ts
 const HEADER_PART = "<Maple.Header>";
@@ -26,11 +26,7 @@ const Logo = forwardRef(function Logo(props, ref) {
 		...rest,
 		className: cx("mk-head-title", className),
 		ref
-	}, [renderPart(Leaf, false, {
-		key: "leaf",
-		size: 17,
-		className: "mk-logo-leaf"
-	}), children ?? ISLAND_COPY.title]);
+	}, children ?? renderPart(Wordmark, false, { key: "wordmark" }));
 });
 const Branch = forwardRef(function Branch(props, ref) {
 	const { asChild, branch, children, className, label, ...rest } = props;

package/dist/island/index.d.ts

@@ -15,4 +15,5 @@ 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 };
+import { WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, WordmarkProps } from "./wordmark.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, WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, type WordmarkProps, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };

package/dist/island/index.js

@@ -7,6 +7,7 @@ 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 { WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark } from "./wordmark.js";
 import { Branch, Header, Logo } from "./header.js";
 import { Island } from "./island.js";
 import { absoluteTime, relativeTime } from "./time.js";
@@ -15,4 +16,4 @@ 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 };
+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, WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark, absoluteTime, countsFor, islandCss, kindPhrase, numbersFor, openLabel, orphanReason, reasonOf, relativeTime, resolutionsFor, useDrag, useIsland };

package/dist/island/language.d.ts

@@ -32,6 +32,7 @@ export declare const SETTINGS_COPY: {
 /** Copy with no better home than a name. */
 export declare const ISLAND_COPY: {
   readonly title: "Comments";
+  readonly wordmark: "Maple";
   readonly settings: "Settings";
   readonly close: "Close the inventory";
   readonly closeGlyph: "✕";

package/dist/island/language.js

@@ -94,6 +94,7 @@ const ACCOUNT_COPY = {
 };
 const ISLAND_COPY = {
 	title: "Comments",
+	wordmark: "Maple",
 	settings: "Settings",
 	close: "Close the inventory",
 	closeGlyph: "✕",

package/dist/island/wordmark.d.ts

@@ -0,0 +1,20 @@
+import { PartProps } from "../part.js";
+//#region src/island/wordmark.d.ts
+/** The leaf's edge, in pixels, when nothing says otherwise. */
+export declare const WORDMARK_SIZE_PX = 17;
+/**
+ * The word is 0.86 of the leaf's edge. At parity the leaf overpowers a
+ * lowercase word whose x-height is half its own box; this is where the two
+ * read as one weight.
+ */
+export declare const WORDMARK_WORD_SCALE = 0.86;
+/** The lockup. `size` is the leaf's edge; everything else follows it. */
+export interface WordmarkProps extends PartProps {
+  /** The leaf's edge in pixels. The word is scaled from it. */
+  readonly size?: number;
+  /** Overrides the accessible name, which is otherwise the product's. */
+  readonly label?: string;
+}
+/** The leaf and the word, drawn together and named once. */
+export declare const Wordmark: import("react").ForwardRefExoticComponent<WordmarkProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion

package/dist/island/wordmark.js

@@ -0,0 +1,43 @@
+import { cx, renderPart } from "../part.js";
+import { ISLAND_COPY } from "./language.js";
+import { LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX } from "../marks/leaf.js";
+import { WORDMARK_PATH, WORDMARK_RATIO, WORDMARK_VIEW_BOX } from "../marks/wordmark.js";
+import { createElement, forwardRef } from "react";
+//#region src/island/wordmark.ts
+const WORDMARK_SIZE_PX = 17;
+const WORDMARK_WORD_SCALE = .86;
+function leaf(size) {
+	return createElement("svg", {
+		key: "leaf",
+		"aria-hidden": true,
+		focusable: false,
+		className: "mk-wordmark-leaf",
+		width: size,
+		height: size,
+		viewBox: LEAF_VIEW_BOX
+	}, createElement("g", { transform: LEAF_ROTATION }, createElement("path", { d: LEAF_SOLID })));
+}
+function word(size) {
+	const height = size * WORDMARK_WORD_SCALE;
+	return createElement("svg", {
+		key: "word",
+		"aria-hidden": true,
+		focusable: false,
+		className: "mk-wordmark-word",
+		width: height * WORDMARK_RATIO,
+		height,
+		viewBox: WORDMARK_VIEW_BOX
+	}, createElement("path", { d: WORDMARK_PATH }));
+}
+const Wordmark = forwardRef(function Wordmark(props, ref) {
+	const { asChild, className, label, size = 17, ...rest } = props;
+	return renderPart("span", asChild, {
+		...rest,
+		className: cx("mk-wordmark", className),
+		role: "img",
+		"aria-label": label ?? ISLAND_COPY.wordmark,
+		ref
+	}, [leaf(size), word(size)]);
+});
+//#endregion
+export { WORDMARK_SIZE_PX, WORDMARK_WORD_SCALE, Wordmark };

package/dist/maple.js

@@ -5,6 +5,7 @@ import { MapleContextBadge } from "./composer/badge.js";
 import { MapleBody } from "./composer/body.js";
 import { MapleComposer } from "./composer/composer.js";
 import { MapleDetail } from "./composer/detail.js";
+import { MapleScoreCard } from "./composer/score.js";
 import { MapleTarget } from "./composer/target.js";
 import { PICK_ORDER } from "./island/language.js";
 import { IslandContent } from "./island/content.js";
@@ -53,7 +54,7 @@ function composer(leave, shots) {
 	return createElement(MapleComposer, {
 		key: "composer",
 		...leave === void 0 ? {} : { leave }
-	}, createElement(MapleTarget, { key: "target" }), createElement(MapleBody, { key: "body" }), createElement(MapleDetail, { key: "detail" }), createElement(MapleContextBadge, { key: "context" }), createElement(MapleAttachments, {
+	}, createElement(MapleTarget, { key: "target" }), createElement(MapleBody, { key: "body" }), createElement(MapleDetail, { key: "detail" }), createElement(MapleScoreCard, { key: "score" }), createElement(MapleContextBadge, { key: "context" }), createElement(MapleAttachments, {
 		key: "attachments",
 		...shots
 	}), createElement(MapleNotice, {

package/dist/marks/wordmark.js

@@ -0,0 +1,6 @@
+//#region src/marks/wordmark.ts
+const WORDMARK_VIEW_BOX = "0 0 200.2 94.22";
+const WORDMARK_RATIO = 2.1248;
+const WORDMARK_PATH = "m4.2,27.1h0.2q1.3-0.4,4.2,0.3,1,0.3,1.2,5.7,0.4,4.1,0.4,5.7,0,1.5,0.1,1.8v6.7l0.5,0.1q0-0.1,0.2-1.2,0.5-2.8,1.1-4.3,0.4-0.4,0.5-1,0-0.6,0.5-1.3,0.6-2.8,3-7.3,0.8-1.9,1.6-2.8,0.7-1,2.2-0.7,1.6,0.3,2.6,1.1,0.8,0.1,1.9,0.3l2.9,0.6q0.4,0.1,1.1,0.7,0.7,0.5,0.6,1.3-0.1,0.8-0.2,4.7v1.6l-0.4,3.9q0,1.6,0.2,1.9l0.4,0.3,0.8-4.6q0-0.7,0.6-1.3l1.2-2.9q0-0.3,0.6-1.3,0.2-0.7,1-2,0.7-1.3,1.9-2.5,0-0.8,1.8-1.1,1.4-1.5,4.6-0.1,0.6,0,1.1,0.2,0,0.2,0.8,0.3,0.7,0.1,1.8,1.3v1.1q0,1,0.1,1.5-0.1,0.7,0.1,1.8v1.2q0.1,0.8,0.5,5v1.1q0.3,0.6,0.3,1.3-0.1,0.6-0.1,1.3,0.3,0.3,0.5,1.7,0.2,1.3-0.2,2.6l0.2,0.9v2.8q0.5,0.4,0.5,1.2l0.3,1.7q0,1.8,0.5,3.6v1.1l0.5,2.6v0.6l-0.1,1q0,1.1-1.2,1.6-0.2,0.1-0.6,0.3-0.3,0.2-1.1,0.2l-2.1-0.7-1-0.7q-0.8,0.2-2.1-0.7,0-0.9-0.7-1.6-1.2-0.4-0.9-1.6,0.1-0.1-0.5-1.1,0.2-0.2-0.3-2.2,0-0.9-0.1-1.7-0.2-0.9-0.2-1.8-0.1-0.9-0.4-1.6,0.1,0,0.1-0.7,0-0.7-0.2-1.3v-2.3l-0.5-4-1.5,4.6q-1.5,3.9-1.5,4.2l-3.2,10q-0.3,0.6-1.1,1.4-0.9,0.7-1.5,0.7-0.2-0.3-1-0.3-0.9,0-2.1,0.5-3.4,0.4-3.9-2.1l-0.2-2.3,0.1-2.3q-0.2-0.3-0.2-1.4l-0.1-1.4v-4.3l-0.2-5.1v-4.9q-2.9,7.9-3.6,10.3l-3.7,11.9q-1.1,2.9-4,3.1l-1.1,0.2q-2.2,0.5-2.9-0.7l-1-1.7q-0.4-2.2-0.8-2.5-0.2-1.4-1-2.9l-0.5-2.4q0-0.3-0.2-0.9v-1.8q-0.3-0.8-0.5-3.2-0.2-2.5-0.1-4-0.4-1.2-0.2-3v-1.8q-0.5-2.3-0.5-7v-1.4q0.5-3,0.5-4,0-1.1,0.5-1.6,0.5-0.6,3.2-2.2zm73.4,12.6q-0.1-2.2-1-3.3-0.9-1.2-3.3-1.4-0.7,0.5-1.8,3.4-1.2,2.8-1.5,6-1,4.8-1,9.6,0.1,4.9,1.6,7.2,0.2,0.4,0.4,0.3,0.5,0,1.6-2,5.3-9.6,5-19.8zm3.1,19.1l-1.5,3.9q0,0.2-2.9,4.3-0.9,1.9-3.3,2.1-2.5,0.2-4.8-0.5-3.1-1.1-4.7-2.6-1.6-1.5-3.1-5-1.6-3.6-1.7-5.9-0.5-3.3-0.5-4.2v-2.4q0-3.6,0.3-4.2,0.1-0.4,0.5-2.1,0.5-4.2,2.4-8,3.7-7.3,7.6-7.5h0.5q0.2,0.1,0.6,0.1h1.3q3.5,0.3,4.3,0.6,1.5,0.4,2.6,0.4l2.6,0.5q1.2-0.1,3.1,0.5,2,0.6,2.2,0.9,0.1,0.3,0.5,2.2,0.4,1.9,0.6,2.8,0.1,0.8,0.2,1.7,0.8,7.3,2.6,13.6,0.1,0.3,0.2,0.9,0.1,0.6,0.7,2.4,0.6,1.7,0.9,2.9,0.3,1.2,1.1,3.2,0.6,1.5,1.8,3.5,2.2,3.1-2.3,4.8-0.6,0.2-2.1,0.2-0.3,0-1.9-1-1,0-1.9-1.1l-0.8-0.2q-0.7-0.7-1.2-0.7-0.2-0.2-3.6-8.1-0.3,1.1-0.3,2zm45.5-18.6v-1.2q0.5-3.9,0.3-4.2-0.5,0.2-1.2,1.1l-3.3,3.7q-5.2,6.5-5.2,7.7,0,0.2-0.7,1.6l0.1,1.6-0.2,4.3v1.1q0,4.3,0.3,6.2,0.1-0.3,1.7-1.3l1.7-2.3q2.6-3.2,3.3-4.6,2.2-6.7,2.2-7.6,0-1.4,0.8-4,0-0.9,0.2-2.1zm-21.4-2.8l0.4-4.6q0.3-0.8,0.1-2.1l0.7-4.1q0-0.9-0.1-1.9-0.1-1.1,0.1-1.5,0.4-0.8,2.1-1.4h-0.4q1-0.6,2.8-0.1,1.8,0.5,3,0.9,0.7,0.9,1.8,2l0.1,3.2q0,2.5,0.3,5.2-0.1,1.1,0,1.4l1.7-1.8q0.1-0.2,2.3-2.2,2.1-2,2.7-2.5,0-0.5,1.2-0.8,2.6-0.6,4.4,0,1.8,0.5,2,0.5l3.7,1.6q0,0.4,1,0.7l0.9,0.5q0.5,0,1.3,0.7,1.2,0.2,0.9,1.7,0,0.4,0.3,0.8v2.4q0,1.6-1,5.7-0.9,4-1.2,4.7-0.2,0.7-0.6,1.8-0.3,1.1-0.7,2.1-0.5,1.7-2,4.7-1.5,2.9-3,4.6-3.5,4.9-7.8,7.8-4.7,1.8-5.9,2.1-0.3,0,0,3.6v7.2l0.3,4.4,0.1,4.5q0.2,3.3-0.2,3.7l-1.2,1q-1.3,0.5-2.3,0.1-2-0.6-2.4-0.9-0.4,0-1.3-0.8l-1.1-0.4q-1.4,0.2-1.7-0.7-1-0.8-1-1.4l-1.5-2.2q-0.6-1.5-0.6-2.8-0.6-2.2-0.4-3.4l-0.2-3.8v-5.3q0-2.7-0.2-3.5-0.2-0.6,0.2-10.6,0.3-2,0.3-2.5l1.5-12.3,0.3-3.4v-0.8q0.3-1.2,0.3-1.8zm44.1-22.5l0.7-5.9,0.1-3.1q0-1.3,0.5-2l1-1.4q2.7-2.1,3.5-2.4,0.8-0.3,2.3,0.1,1.6,0.3,1.9,0.6l1.1,0.9q0.9,0.5,0.9,1.6,0.5,0.6,0.3,0.9-0.6,0.7-2,11.8l-0.8,13.6-0.5,2.7q0,1.3,0.1,1.5v1.8q-0.2,2-0.4,2.5,0,0.5-0.2,1.1,0.2,0.2,0.2,1.6,0,1.3-0.3,1.6-0.2,1.6-0.2,3.1,0,1.4,0.2,3,0.3,1.5,0.2,3l0.4,3.8v1.5q0.2,1.8,0.2,2.9l0.5,5.2,0.4,2.7q0.3,1.7-0.2,3.3-0.6,1.6-1.7,2-3.1,1.3-6.8-1.7h-0.8q-0.7-0.8-1.1-2.2-0.8-0.4-0.7-1.4,0.1-1-0.4-1.8-0.5-0.8-0.5-1.4,0-1.3-0.2-2.3l0.1-0.8q-0.3-0.3-0.3-0.9l-0.2-1.8v-0.8q0-0.8,0-1.1-0.1-0.3,0.2-1-0.3-0.4-0.1-2.9,0.6-7.7,0.6-10.6l0.1-2.4v-2.9q0.1-2.4,0.2-6.1,0-3.7,0.3-4l-0.1-0.9q0-2.4,0.8-6.5,0.7-4.2,0.7-4.5zm41.2,21.5q0.4-1.5-0.1-3.8-0.7-0.6-1.9-0.6-1.5,0-2.7,2.8-1.6,2.4-2.4,5.3h-0.1q-1.1,4.2-1.1,4.5,1.6,0.4,2.6,0.4,1-0.1,2.3-1.1,2.3-2.2,3.4-7.5zm-0.3,14.4l-3.7,0.3q-3.1,0-4.9-0.6l0.3,1.9q0.3,8.3,4.6,10.9,1.2,0.5,2,0.5,0.8,0,2.1-0.8,0.4-0.4,0.7-1.1,0.1-0.9,1-0.8,4.1-5.2,6.2-4.1,2.1,1.4,2.1,2.2,0,0.4-0.5,0.9v0.6q0,1-1.2,3.6-1.3,2.6-2.7,4.4-0.7,1.5-1.8,2.1-3.2,2-6.8,1.6-0.8-0.1-1.1-0.4-0.8-0.2-1.2-0.1l-0.8-0.1q-0.9,0-1.5-0.4-1-0.6-1.4-0.6-2.6-1-3.1-1.5-0.6-0.5-1-0.7-0.4-0.2-1.9-2.1-1.3-1.1-1.5-1.4-0.6-0.9-1-1.3-0.5-0.4-0.6-1.8-0.4-0.5-0.4-1.3l-0.4-0.8q0-0.7-0.6-1.1-0.6-0.6-0.6-1.5v-0.8q-0.4-0.2-0.2-1.2v-2.6l-0.1-0.9v-0.7q-0.1-0.4,0.2-1.7l-0.1-0.9q0.1-0.1,0.3-1.6,0.4-2.1,0.9-2.6v-0.9q0.1-0.3,0.1-0.8,0-0.5,0.3-1.1,0.2-0.6,1.5-4.5l1.6-3.5q0.7-1.5,2.2-3.3,0.1-0.5,0.8-1.8l1.3-1.2q0.6-0.9,1.8-1.3,1.4-0.7,2.1-0.7l2.8-0.4q0.5,0.1,0.7,0.1h1.3q2.2,0.2,3.6,0.9,3,0.9,4.4,2.3,3.1,3.5,3.1,6.7,0,3.2-1,5.5-2.5,5.7-3.6,7.2-1.8,3.3-4.3,3.3z";
+//#endregion
+export { WORDMARK_PATH, WORDMARK_RATIO, WORDMARK_VIEW_BOX };

package/dist/tokens.js

@@ -166,6 +166,7 @@ const REDUCED_MOTION_TOKENS = {
 	"--mk-icon-blur": "0px"
 };
 const RUNTIME_TOKENS = [
+	"--mk-p",
 	"--mk-slot",
 	"--mk-slot-ink",
 	"--mk-pin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maple-kit/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Maple's composed reviewer parts: the marks, the island and the composer",
   "license": "Apache-2.0",
   "type": "module",
@@ -32,8 +32,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@maple-kit/react": "0.3.0",
-    "@maple-kit/core": "0.3.0"
+    "@maple-kit/core": "0.5.0",
+    "@maple-kit/react": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",