@maple-kit/ui 0.2.0 → 0.4.0

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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maple-kit/ui",
-  "version": "0.2.0",
+  "version": "0.4.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.2.0",
-    "@maple-kit/core": "0.2.0"
+    "@maple-kit/core": "0.4.0",
+    "@maple-kit/react": "0.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",