@maple-kit/ui 0.9.0 → 0.11.0

package/README.md

@@ -17,8 +17,11 @@ npm install @maple-kit/ui
 ## What is in it
 
 `@maple-kit/ui/maple` is the whole overlay as one component. The parts are also
-exported on their own: `/marks`, `/island`, `/composer`, `/picker`, `/notice`
-and `/icons`.
+exported on their own: `/marks`, `/island`, `/composer`, `/picker`, `/notice`,
+`/mock` and `/icons`.
+
+`@maple-kit/ui/mock` is Maple Mock's box, `<MapleMock />`, for a page that
+mocks without the review overlay. Inside `<Maple />` it is already mounted.
 
 Everything renders inside one shadow root, styled only through
 `new CSSStyleSheet()` and `adoptedStyleSheets`, with positions set by

package/dist/cx.js

@@ -0,0 +1,6 @@
+//#region src/cx.ts
+function cx(...names) {
+	return names.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };

package/dist/icons/chevron.d.ts

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

package/dist/icons/chevron.js

@@ -0,0 +1,8 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/chevron.ts
+const ChevronIcon = createIcon({
+	d: "M4.5 6.2 8 9.8l3.5-3.6",
+	strokeWidth: 1.5
+});
+//#endregion
+export { ChevronIcon };

package/dist/icons/code.d.ts

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

package/dist/icons/code.js

@@ -0,0 +1,5 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/code.ts
+const CodeIcon = createIcon({ d: "M5.4 4.4 2 8l3.4 3.6 M10.6 4.4 14 8l-3.4 3.6" });
+//#endregion
+export { CodeIcon };

package/dist/icons/index.d.ts

@@ -1,13 +1,16 @@
 import { ICON_SIZE, IconComponent, IconProps, IconSpec, createIcon } from "./icon.js";
 import { BranchIcon } from "./branch.js";
+import { ChevronIcon } from "./chevron.js";
+import { CodeIcon } from "./code.js";
 import { CogIcon } from "./cog.js";
 import { CommitIcon } from "./commit.js";
 import { IconCrossfade, IconCrossfadeProps } from "./crossfade.js";
 import { ElementIcon } from "./element.js";
+import { LinkIcon } from "./link.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 };
+export { BranchIcon, ChevronIcon, CodeIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, type IconComponent, IconCrossfade, type IconCrossfadeProps, type IconProps, type IconSpec, LinkIcon, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };

package/dist/icons/index.js

@@ -6,8 +6,11 @@ import { ElementIcon } from "./element.js";
 import { RegionIcon } from "./region.js";
 import { TextIcon } from "./text.js";
 import { CogIcon } from "./cog.js";
+import { CodeIcon } from "./code.js";
+import { LinkIcon } from "./link.js";
+import { ChevronIcon } from "./chevron.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 };
+export { BranchIcon, ChevronIcon, CodeIcon, CogIcon, CommitIcon, ElementIcon, ICON_SIZE, IconCrossfade, LinkIcon, NoPlaceIcon, RegionIcon, SmileyIcon, SparkleIcon, TargetIcon, TextIcon, createIcon };

package/dist/icons/link.d.ts

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

package/dist/icons/link.js

@@ -0,0 +1,5 @@
+import { createIcon } from "./icon.js";
+//#region src/icons/link.ts
+const LinkIcon = createIcon({ d: "M7 9a2.8 2.8 0 0 0 4 0l2-2a2.8 2.8 0 0 0-4-4l-.6.6 M9 7a2.8 2.8 0 0 0-4 0L3 9a2.8 2.8 0 0 0 4 4l.6-.6" });
+//#endregion
+export { LinkIcon };

package/dist/index.d.ts

@@ -5,7 +5,8 @@ import { PartAttributes, PartConfidence, PartForm, PartProvenance, PartState, Po
 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 { SCHEME_ATTRIBUTE } from "./sheet-base.js";
+import { OVERLAY_CSS } 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

@@ -2,7 +2,8 @@ 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 { SCHEME_ATTRIBUTE } from "./sheet-base.js";
+import { OVERLAY_CSS } from "./stylesheet.js";
 import { useOverlayScheme } from "./theme.js";
 import { MapleRoot } from "./root.js";
 import { AsChildError, Slot, composeRefs, mergeProps } from "./slot.js";

package/dist/island/account.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { ACCOUNT_COPY } from "./language.js";
 import { createElement, forwardRef } from "react";
 import { useGitHubLink, useMapleClient } from "@maple-kit/react";

package/dist/island/approve.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { APPROVE_COPY } from "./language.js";
 import { createElement, forwardRef } from "react";
 import { useMaple, useMapleClient } from "@maple-kit/react";

package/dist/island/content.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { ISLAND_COPY } from "./language.js";
 import { useIsland } from "./context.js";
 import { forwardRef } from "react";

package/dist/island/filters.js

@@ -1,5 +1,6 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
 import { Tip } from "../tip.js";
+import { renderPart } from "../part.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";

package/dist/island/header.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { ISLAND_COPY } from "./language.js";
 import { useIsland } from "./context.js";
 import { Wordmark } from "./wordmark.js";

package/dist/island/island.js

@@ -1,6 +1,7 @@
 import { useMapleUi } from "../context.js";
 import { composeRefs } from "../slot.js";
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { numbersFor, resolutionsFor } from "./comments.js";
 import { IslandContext } from "./context.js";
 import { useDrag } from "./drag.js";

package/dist/island/item.js

@@ -2,8 +2,9 @@ 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 { cx } from "../cx.js";
 import { Tip } from "../tip.js";
+import { renderPart } from "../part.js";
 import { ISLAND_COPY, kindPhrase } from "./language.js";
 import { useIsland } from "./context.js";
 import { MapleLeaf } from "../marks/shape.js";

package/dist/island/language.js

@@ -1,3 +1,4 @@
+import { COMMENT_SHORTCUT } from "@maple-kit/core/client";
 //#region src/island/language.ts
 const FILTER_LABELS = {
 	all: "All",
@@ -23,11 +24,6 @@ function tallyTitle(filter, count) {
 	const many = count === 1 ? "comment" : "comments";
 	return `${String(count)} ${FILTER_LABELS[filter].toLowerCase()} ${many} — click to show only these`;
 }
-const PICK_ORDER = [
-	"element",
-	"text",
-	"region"
-];
 const PICK_LABELS = {
 	element: "Element",
 	region: "Region",
@@ -135,8 +131,8 @@ function openLabel(count) {
 function triggerLabel(count) {
 	return `Open Maple: ${openLabel(count)}`;
 }
-function pickTitle(kind) {
-	return `Comment on ${kind} — press t while picking to cycle`;
+function pickTitle(kind, key = COMMENT_SHORTCUT) {
+	return `Comment on ${kind} — press ${key} again while picking to cycle`;
 }
 function kindPhrase(kind, human) {
 	if (human === void 0) return "somewhere on this page";
@@ -144,4 +140,4 @@ function kindPhrase(kind, human) {
 	return kind === "region" ? `an area of ${human}` : human;
 }
 //#endregion
-export { ACCOUNT_COPY, APPROVE_COPY, CORNER_LABELS, CORNER_ORDER, FILTERS_LABEL, FILTER_LABELS, FILTER_ORDER, ISLAND_COPY, PICK_LABELS, PICK_ORDER, SETTINGS_COPY, TALLY_ORDER, THEME_LABELS, THEME_TITLES, UNSENT_COPY, kindPhrase, openLabel, pickTitle, tallyTitle, triggerLabel };
+export { ACCOUNT_COPY, APPROVE_COPY, CORNER_LABELS, CORNER_ORDER, FILTERS_LABEL, FILTER_LABELS, FILTER_ORDER, ISLAND_COPY, PICK_LABELS, SETTINGS_COPY, TALLY_ORDER, THEME_LABELS, THEME_TITLES, UNSENT_COPY, kindPhrase, openLabel, pickTitle, tallyTitle, triggerLabel };

package/dist/island/list.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { FILTER_LABELS, ISLAND_COPY } from "./language.js";
 import { byReason } from "./comments.js";
 import { listId, reasonOf, useIsland } from "./context.js";

package/dist/island/new-comment.js

@@ -1,8 +1,9 @@
 import { dataAttributes } from "../data.js";
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
 import { ElementIcon } from "../icons/element.js";
 import { RegionIcon } from "../icons/region.js";
 import { TextIcon } from "../icons/text.js";
+import { renderPart } from "../part.js";
 import { ISLAND_COPY, PICK_LABELS, pickTitle } from "./language.js";
 import { useIsland } from "./context.js";
 import { createElement, forwardRef } from "react";

package/dist/island/settings.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { CORNER_LABELS, CORNER_ORDER, ISLAND_COPY, SETTINGS_COPY, THEME_LABELS, THEME_TITLES } from "./language.js";
 import { Account } from "./account.js";
 import { useIsland } from "./context.js";

package/dist/island/trigger.js

@@ -1,5 +1,6 @@
 import { dataAttributes } from "../data.js";
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { openLabel, triggerLabel } from "./language.js";
 import { useIsland } from "./context.js";
 import { Leaf } from "./leaf.js";

package/dist/island/unsent.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { UNSENT_COPY } from "./language.js";
 import { createElement, forwardRef, useState } from "react";
 import { useMaple, useMapleClient } from "@maple-kit/react";

package/dist/island/wordmark.js

@@ -1,4 +1,5 @@
-import { cx, renderPart } from "../part.js";
+import { cx } from "../cx.js";
+import { renderPart } from "../part.js";
 import { ISLAND_COPY } from "./language.js";
 import { PIXEL_LEAF_SHADES, PIXEL_LEAF_VIEW_BOX } from "../marks/pixel-leaf.js";
 import { WORDMARK_PATH, WORDMARK_RATIO, WORDMARK_VIEW_BOX } from "../marks/wordmark.js";

package/dist/maple.d.ts

@@ -19,7 +19,8 @@ export interface MapleProps extends MapleRootProps {
 }
 /**
  * The whole reviewer interface: the marks on the page, the picker, the
- * inventory and the composer, over one shadow root and one controller.
+ * inventory and the composer, over one shadow root and one controller, and the
+ * mock box on a page where Maple Mock's transport is installed.
  */
 export declare const Maple: import("react").ForwardRefExoticComponent<MapleProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/maple.js

@@ -7,7 +7,6 @@ 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 { Approve } from "./island/approve.js";
 import { IslandContent } from "./island/content.js";
 import { Filters } from "./island/filters.js";
@@ -20,9 +19,11 @@ import { Settings } from "./island/settings.js";
 import { IslandTrigger } from "./island/trigger.js";
 import { Unsent } from "./island/unsent.js";
 import { MapleMarkLayer } from "./marks/layer.js";
+import { MapleMock } from "./mock/mock.js";
 import { MapleNotice } from "./notice/notice.js";
 import { MaplePicker } from "./picker/picker.js";
 import { createElement, forwardRef } from "react";
+import { PICK_ORDER } from "@maple-kit/core/client";
 //#region src/maple.ts
 const LOAD_CALLS = [
 	"load",
@@ -38,7 +39,7 @@ const Maple = forwardRef(function Maple(props, ref) {
 	}, createElement(MapleMarkLayer, { key: "marks" }), createElement(MaplePicker, {
 		key: "picker",
 		...hint === void 0 ? {} : { hint }
-	}), inventory(root.branch, root.label, defaultOpen === true), composer(leave, attachments), children);
+	}), inventory(root.branch, root.label, defaultOpen === true), composer(leave, attachments), createElement(MapleMock, { key: "mock" }), children);
 });
 function inventory(branch, label, defaultOpen) {
 	return createElement(Island, {

package/dist/marks/css.js

@@ -232,9 +232,8 @@ function ringCss() {
   will-change: transform;
 }
 
-.mk-ring[data-mk-state="hovered"] {
-  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--mk-accent) 60%, transparent);
-}
+/* No quieter hovered ring: pointing at a mark or tabbing onto it is asking
+   "which one", and a hairline answered it too faintly to be seen. */
 
 /* A passage is its own lines and nothing else: the box around them is the
    paragraph, and outlining that says the comment is on the paragraph. */