@maple-kit/ui 0.1.0

package/dist/stylesheet.js

@@ -0,0 +1,188 @@
+import { COLOR_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, SHADOW_TOKENS, SIZE_TOKENS, TYPE_TOKENS } from "./tokens.js";
+import { composerCss } from "./composer/css.js";
+import { islandCss } from "./island/css.js";
+import { marksCss } from "./marks/css.js";
+import { noticeCss } from "./notice/css.js";
+import { pickerCss } from "./picker/css.js";
+//#region src/stylesheet.ts
+const SCHEME_ATTRIBUTE = "data-mk-scheme";
+const DARK_HOST = `:host([${SCHEME_ATTRIBUTE}="dark"])`;
+function declare(tokens) {
+	return Object.entries(tokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
+}
+function declareThemed(tokens, scheme) {
+	return Object.entries(tokens).map(([name, value]) => `  ${name}: ${value[scheme]};`).join("\n");
+}
+function tokenCss() {
+	return [
+		`:host {`,
+		declareThemed(COLOR_TOKENS, "light"),
+		declareThemed(SHADOW_TOKENS, "light"),
+		declare(RADIUS_TOKENS),
+		declare(TYPE_TOKENS),
+		declare(SIZE_TOKENS),
+		declare(MOTION_TOKENS),
+		`  color-scheme: light;`,
+		`}`,
+		``,
+		`${DARK_HOST} {`,
+		declareThemed(COLOR_TOKENS, "dark"),
+		declareThemed(SHADOW_TOKENS, "dark"),
+		`  color-scheme: dark;`,
+		`}`,
+		``,
+		`@media (prefers-reduced-motion: reduce) {`,
+		`  :host {`,
+		declare(REDUCED_MOTION_TOKENS).split("\n").map((line) => `  ${line}`).join("\n"),
+		`  }`,
+		`}`
+	].join("\n");
+}
+function ruleCss() {
+	return `
+:host {
+  display: block;
+  font-family: var(--mk-font);
+  font-size: 13px;
+  font-weight: 400;
+  font-style: normal;
+  font-variant: normal;
+  letter-spacing: normal;
+  line-height: 1.45;
+  text-align: left;
+  color: var(--mk-fg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.mk-layer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.mk-live {
+  pointer-events: auto;
+}
+
+.mk-surface {
+  background: var(--mk-bg);
+  border: 1px solid var(--mk-line-firm);
+  border-radius: var(--mk-r);
+  box-shadow: var(--mk-sh2);
+}
+
+${DARK_HOST} .mk-surface {
+  box-shadow: var(--mk-sh2), inset 0 1px 0 oklch(1 0 0 / 0.045);
+}
+
+.mk-num {
+  font-variant-numeric: tabular-nums;
+}
+
+.mk-mono {
+  font-family: var(--mk-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.mk-body {
+  text-wrap: pretty;
+}
+
+.mk-title,
+h1,
+h2,
+h3 {
+  text-wrap: balance;
+}
+
+.mk-shot {
+  outline: 1px solid var(--mk-shot-edge);
+  outline-offset: -1px;
+}
+
+/* No radius here: an outline already follows the control's own corners, and
+   forcing one squared off every pill in the overlay the moment it took focus.
+   The two controls that carry no radius of their own are given one below. */
+:where(a, button, input, textarea, [role="button"], [tabindex]):focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+.mk-press {
+  transition: transform var(--mk-dur-fade) var(--mk-ease-surface);
+}
+
+.mk-press:active {
+  transform: scale(var(--mk-press));
+}
+
+.mk-hit {
+  position: relative;
+}
+
+.mk-hit::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max(100%, var(--mk-hit));
+  height: max(100%, var(--mk-hit));
+  transform: translate(-50%, -50%);
+}
+
+.mk-track {
+  transition: opacity var(--mk-dur-fade) var(--mk-ease-surface);
+}
+
+.mk-icon-swap {
+  display: inline-grid;
+  place-items: center;
+}
+
+.mk-icon-swap > * {
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--mk-dur-swap) var(--mk-ease-swap),
+    transform var(--mk-dur-swap) var(--mk-ease-swap),
+    filter var(--mk-dur-swap) var(--mk-ease-swap);
+}
+
+.mk-icon-swap > [data-mk-icon="out"] {
+  opacity: 0;
+  transform: scale(var(--mk-icon-scale));
+  filter: blur(var(--mk-icon-blur));
+}
+
+.mk-icon-swap > [data-mk-icon="in"] {
+  opacity: 1;
+  transform: scale(1);
+  filter: blur(0);
+}
+
+@media (max-width: 639px) {
+  :host {
+    --mk-composer-w: 100%;
+    --mk-composer-r: var(--mk-r) var(--mk-r) 0 0;
+  }
+}
+
+${islandCss()}
+${composerCss()}
+${marksCss()}
+${noticeCss()}
+${pickerCss()}
+`.trim();
+}
+function buildOverlayCss() {
+	return `${tokenCss()}\n\n${ruleCss()}\n`;
+}
+const OVERLAY_CSS = buildOverlayCss();
+//#endregion
+export { OVERLAY_CSS, SCHEME_ATTRIBUTE, ruleCss, tokenCss };

package/dist/theme.d.ts

@@ -0,0 +1,20 @@
+import { Scheme } from "@maple-kit/core/client";
+//#region src/theme.d.ts
+/** The overlay's scheme and the host's, which are not the same scheme. */
+export interface OverlayTheme {
+  /** What the overlay is drawn in. */
+  readonly scheme: Scheme;
+  /** What the host page is in, which is what a comment records. */
+  readonly hostScheme: Scheme;
+}
+/**
+ * The overlay's scheme, as the viewer last asked for it.
+ *
+ * The preference is the controller's, not this component's: it is remembered
+ * per origin and settable from the island, so a prop here would be a second
+ * source for the same fact and would win on every remount. An application
+ * still chooses the default by passing `theme` to `Maple.Root`, which is read
+ * once into the config the controller starts from.
+ */
+export declare function useOverlayScheme(): OverlayTheme;
+//#endregion

package/dist/theme.js

@@ -0,0 +1,13 @@
+import { useMemo } from "react";
+import { overlaySchemeFor } from "@maple-kit/core/client";
+import { useMaple } from "@maple-kit/react";
+//#region src/theme.ts
+function useOverlayScheme() {
+	const { theme, themePreference } = useMaple();
+	return useMemo(() => ({
+		scheme: overlaySchemeFor(themePreference, theme),
+		hostScheme: theme.host
+	}), [themePreference, theme]);
+}
+//#endregion
+export { useOverlayScheme };

package/dist/tip.d.ts

@@ -0,0 +1,40 @@
+import { ElementType, ReactNode } from "react";
+//#region src/tip.d.ts
+/** A chip, its sentence, and whatever the chip is drawn as. */
+export interface TipProps {
+  /** The sentence. Never rendered in the row itself. */
+  readonly sentence: string;
+  /** What the chip shows: a number, a percentage, a path. */
+  readonly children?: ReactNode;
+  readonly className?: string;
+  /** The element the chip is drawn as. A `button` when it also does something. */
+  readonly as?: ElementType;
+  /**
+   * How long the pointer has to rest before it opens. The default is the
+   * stylesheet's intent delay; a fact nobody came looking for takes longer.
+   */
+  readonly delayMs?: number;
+  /** Spread onto the trigger, for a chip that is also a control. */
+  readonly triggerProps?: Record<string, unknown>;
+}
+/**
+ * Reachable by keyboard as well as by pointer, because a fact only a mouse
+ * can read is a fact half the reviewers do not have.
+ */
+export declare const Tip: import("react").ForwardRefExoticComponent<TipProps & import("react").RefAttributes<HTMLElement>>;
+/**
+ * Below the chip, or above it when there is no room — measured against the
+ * viewport, because the top layer is positioned against the viewport and not
+ * against whatever the chip happened to be inside.
+ */
+export declare function tipSpot(anchor: DOMRect, tip: {
+  readonly width: number;
+  readonly height: number;
+}, view: {
+  readonly width: number;
+  readonly height: number;
+}): {
+  readonly x: number;
+  readonly y: number;
+};
+//#endregion

package/dist/tip.js

@@ -0,0 +1,82 @@
+import { cx } from "./part.js";
+import { createElement, forwardRef, useCallback, useId, useRef } from "react";
+//#region src/tip.ts
+const GAP_PX = 6;
+const EDGE_PX = 8;
+const BELOW = "data-mk-below";
+const Tip = forwardRef(function Tip(props, ref) {
+	const id = useId();
+	const trigger = useRef(null);
+	const tip = useRef(null);
+	const waiting = useRef(void 0);
+	const { delayMs = 0 } = props;
+	const reveal = useCallback(() => {
+		const node = tip.current;
+		const from = trigger.current;
+		if (!node || !from) return;
+		open(node);
+		place(node, from.getBoundingClientRect());
+	}, []);
+	const show = useCallback(() => {
+		if (delayMs <= 0) return reveal();
+		waiting.current = window.setTimeout(reveal, delayMs);
+	}, [delayMs, reveal]);
+	const hide = useCallback(() => {
+		if (waiting.current !== void 0) window.clearTimeout(waiting.current);
+		waiting.current = void 0;
+		close(tip.current);
+	}, []);
+	const Element = props.as ?? "span";
+	return createElement(Element, {
+		...props.triggerProps,
+		className: cx("mk-tipped", props.className),
+		tabIndex: 0,
+		"aria-describedby": id,
+		ref: keep(ref, trigger),
+		onPointerEnter: show,
+		onPointerLeave: hide,
+		onFocus: show,
+		onBlur: hide
+	}, props.children, createElement("span", {
+		id,
+		popover: "manual",
+		role: "tooltip",
+		className: "mk-tip",
+		ref: tip,
+		children: props.sentence
+	}));
+});
+function open(node) {
+	if (!node.matches(":popover-open")) node.showPopover();
+}
+function close(node) {
+	if (node?.matches(":popover-open") === true) node.hidePopover();
+}
+function tipSpot(anchor, tip, view) {
+	const below = anchor.bottom + GAP_PX;
+	const y = below + tip.height <= view.height - EDGE_PX ? below : Math.max(EDGE_PX, anchor.top - GAP_PX - tip.height);
+	const wanted = anchor.left + anchor.width / 2 - tip.width / 2;
+	const last = view.width - EDGE_PX - tip.width;
+	return {
+		x: Math.min(Math.max(EDGE_PX, wanted), Math.max(EDGE_PX, last)),
+		y
+	};
+}
+function place(node, anchor) {
+	const spot = tipSpot(anchor, node.getBoundingClientRect(), {
+		width: window.innerWidth,
+		height: window.innerHeight
+	});
+	node.toggleAttribute(BELOW, spot.y >= anchor.bottom);
+	node.style.setProperty("--mk-x", `${String(Math.round(spot.x))}px`);
+	node.style.setProperty("--mk-y", `${String(Math.round(spot.y))}px`);
+}
+function keep(ref, own) {
+	return (node) => {
+		own.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+}
+//#endregion
+export { Tip, tipSpot };

package/dist/tokens.d.ts

@@ -0,0 +1,28 @@
+//#region src/tokens.d.ts
+/** Concentric: outer = inner + padding. 5 + 2 = 7, 7 + 3 = 10. */
+export declare const RADIUS_TOKENS: Readonly<Record<string, string>>;
+/**
+ * The directive's motion table, and the only durations and easings in the
+ * package. Overshoot appears on entrance easing alone; every surface — open,
+ * close, slide, resize, reposition — uses `--mk-ease-surface`. There is no
+ * close duration longer than its open and no delay token for a close.
+ */
+export declare const MOTION_TOKENS: Readonly<Record<string, string>>;
+/**
+ * Reduced motion reduces the motion; it never removes the feedback. Distance,
+ * pre-scale and stagger collapse to nothing and every duration lands at or
+ * under 100ms, so what is left of a transition is its opacity. Every entrance
+ * distance is a token for that reason: a keyframe spelling `12px` keeps moving.
+ */
+export declare const REDUCED_MOTION_TOKENS: Readonly<Record<string, string>>;
+/**
+ * Set with `setProperty` on one element, never declared and never written as a
+ * generated rule: a rule per reviewer is a stylesheet that grows with the team.
+ */
+export declare const RUNTIME_TOKENS: readonly string[];
+/**
+ * The composer is a panel above this and a sheet below it. It is a width, not a
+ * variant prop, so it lives here rather than in a `variant="sheet"`.
+ */
+export declare const SHEET_BREAKPOINT_PX = 640;
+//#endregion

package/dist/tokens.js

@@ -0,0 +1,180 @@
+//#region src/tokens.ts
+const COLOR_TOKENS = {
+	"--mk-bg": {
+		light: "oklch(1 0 0)",
+		dark: "oklch(0.238 0.011 265)"
+	},
+	"--mk-sunk": {
+		light: "oklch(0.968 0.003 265)",
+		dark: "oklch(0.193 0.010 265)"
+	},
+	"--mk-fg": {
+		light: "oklch(0.23 0.012 265)",
+		dark: "oklch(0.975 0.003 265)"
+	},
+	"--mk-muted": {
+		light: "oklch(0.53 0.014 265)",
+		dark: "oklch(0.79 0.011 265)"
+	},
+	"--mk-faint": {
+		light: "oklch(0.66 0.012 265)",
+		dark: "oklch(0.665 0.012 265)"
+	},
+	"--mk-line": {
+		light: "oklch(0.915 0.005 265)",
+		dark: "oklch(0.365 0.012 265)"
+	},
+	"--mk-line-firm": {
+		light: "oklch(0.86 0.007 265)",
+		dark: "oklch(0.47 0.015 265)"
+	},
+	"--mk-accent": {
+		light: "oklch(0.44 0.075 128)",
+		dark: "oklch(0.76 0.1 122)"
+	},
+	"--mk-accent-ink": {
+		light: "oklch(0.981 0.034 100)",
+		dark: "oklch(0.22 0.040 128)"
+	},
+	"--mk-accent-sub": {
+		light: "oklch(0.958 0.028 122)",
+		dark: "oklch(0.30 0.040 124)"
+	},
+	"--mk-ok": {
+		light: "oklch(0.52 0.11 155)",
+		dark: "oklch(0.74 0.12 155)"
+	},
+	"--mk-ok-sub": {
+		light: "oklch(0.955 0.03 155)",
+		dark: "oklch(0.29 0.05 155)"
+	},
+	"--mk-warn": {
+		light: "oklch(0.60 0.13 82)",
+		dark: "oklch(0.82 0.13 82)"
+	},
+	"--mk-warn-sub": {
+		light: "oklch(0.962 0.05 82)",
+		dark: "oklch(0.31 0.06 82)"
+	},
+	"--mk-lost": {
+		light: "oklch(0.52 0.11 305)",
+		dark: "oklch(0.76 0.11 305)"
+	},
+	"--mk-lost-sub": {
+		light: "oklch(0.958 0.028 305)",
+		dark: "oklch(0.29 0.05 305)"
+	},
+	"--mk-info": {
+		light: "oklch(0.53 0.12 248)",
+		dark: "oklch(0.74 0.12 248)"
+	},
+	"--mk-info-sub": {
+		light: "oklch(0.958 0.032 248)",
+		dark: "oklch(0.28 0.05 248)"
+	},
+	"--mk-maple": {
+		light: "oklch(0.56 0.12 60)",
+		dark: "oklch(0.72 0.125 62)"
+	},
+	"--mk-maple-sub": {
+		light: "oklch(0.965 0.030 62)",
+		dark: "oklch(0.30 0.050 58)"
+	},
+	"--mk-shot-edge": {
+		light: "oklch(0 0 0 / 0.1)",
+		dark: "oklch(1 0 0 / 0.1)"
+	}
+};
+const SHADOW_TOKENS = {
+	"--mk-sh1": {
+		light: "0 1px 2px oklch(0.2 0.02 265 / 0.08)",
+		dark: "0 1px 2px oklch(0 0 0 / 0.45)"
+	},
+	"--mk-sh2": {
+		light: "0 6px 18px oklch(0.2 0.02 265 / 0.12), 0 1px 3px oklch(0.2 0.02 265 / 0.08)",
+		dark: "0 6px 18px oklch(0 0 0 / 0.5), 0 1px 3px oklch(0 0 0 / 0.35)"
+	},
+	"--mk-sh3": {
+		light: "0 20px 48px oklch(0.2 0.02 265 / 0.20), 0 2px 8px oklch(0.2 0.02 265 / 0.10)",
+		dark: "0 20px 48px oklch(0 0 0 / 0.6), 0 2px 8px oklch(0 0 0 / 0.4)"
+	}
+};
+const RADIUS_TOKENS = {
+	"--mk-r": "10px",
+	"--mk-r-sm": "7px",
+	"--mk-r-xs": "5px"
+};
+const TYPE_TOKENS = {
+	"--mk-font": "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+	"--mk-mono": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace"
+};
+const SIZE_TOKENS = {
+	"--mk-hit": "40px",
+	"--mk-head-h": "44px",
+	"--mk-press": "0.96",
+	"--mk-composer-w": "360px",
+	"--mk-composer-r": "0"
+};
+const MOTION_TOKENS = {
+	"--mk-ease-surface": "cubic-bezier(0.22, 1, 0.36, 1)",
+	"--mk-ease-entrance": "cubic-bezier(0.34, 1.36, 0.64, 1)",
+	"--mk-ease-swap": "ease-in-out",
+	"--mk-ease-tooltip": "ease-out",
+	"--mk-dur-island-open": "250ms",
+	"--mk-dur-island-close": "150ms",
+	"--mk-dur-composer-open": "400ms",
+	"--mk-dur-composer-close": "350ms",
+	"--mk-dur-tooltip": "150ms",
+	"--mk-dur-swap": "150ms",
+	"--mk-dur-mark-in": "500ms",
+	"--mk-dur-fade": "150ms",
+	"--mk-delay-tooltip": "80ms",
+	"--mk-stagger-step": "40ms",
+	"--mk-stagger-cap": "240ms",
+	"--mk-scale-island": "0.97",
+	"--mk-scale-tooltip": "0.98",
+	"--mk-rise-mark": "8px",
+	"--mk-rise-card": "12px",
+	"--mk-rise-row": "6px",
+	"--mk-shift-composer": "100%",
+	"--mk-icon-scale": "0.25",
+	"--mk-icon-blur": "4px"
+};
+const REDUCED_MOTION_TOKENS = {
+	"--mk-ease-surface": "ease-out",
+	"--mk-ease-entrance": "ease-out",
+	"--mk-ease-swap": "ease-out",
+	"--mk-ease-tooltip": "ease-out",
+	"--mk-dur-island-open": "100ms",
+	"--mk-dur-island-close": "100ms",
+	"--mk-dur-composer-open": "100ms",
+	"--mk-dur-composer-close": "100ms",
+	"--mk-dur-tooltip": "100ms",
+	"--mk-dur-swap": "100ms",
+	"--mk-dur-mark-in": "100ms",
+	"--mk-dur-fade": "100ms",
+	"--mk-delay-tooltip": "0ms",
+	"--mk-stagger-step": "0ms",
+	"--mk-stagger-cap": "0ms",
+	"--mk-scale-island": "1",
+	"--mk-scale-tooltip": "1",
+	"--mk-rise-mark": "0px",
+	"--mk-rise-card": "0px",
+	"--mk-rise-row": "0px",
+	"--mk-shift-composer": "0%",
+	"--mk-icon-scale": "1",
+	"--mk-icon-blur": "0px"
+};
+const RUNTIME_TOKENS = [
+	"--mk-slot",
+	"--mk-slot-ink",
+	"--mk-pin",
+	"--mk-pin-ink",
+	"--mk-x",
+	"--mk-y",
+	"--mk-w",
+	"--mk-h"
+];
+const SHEET_BREAKPOINT_PX = 640;
+//#endregion
+export { COLOR_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, RUNTIME_TOKENS, SHADOW_TOKENS, SHEET_BREAKPOINT_PX, SIZE_TOKENS, TYPE_TOKENS };

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@maple-kit/ui",
+  "version": "0.1.0",
+  "description": "Maple's composed reviewer parts: the marks, the island and the composer",
+  "license": "Apache-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maple-kit/maple.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/maple-kit/maple/tree/main/packages/ui",
+  "engines": {
+    "node": ">=24.0.0"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "NOTICE",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./maple": "./dist/maple.js",
+    "./composer": "./dist/composer/index.js",
+    "./icons": "./dist/icons/index.js",
+    "./island": "./dist/island/index.js",
+    "./marks": "./dist/marks/index.js",
+    "./notice": "./dist/notice/index.js",
+    "./picker": "./dist/picker/index.js",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@maple-kit/core": "0.1.0",
+    "@maple-kit/react": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown && node ./scripts/size.js",
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "size": "node ./scripts/size.js"
+  }
+}