@maple-kit/ui 0.1.0

package/dist/marks/ring.js

@@ -0,0 +1,85 @@
+import { useMapleUi } from "../context.js";
+import { composeRefs } from "../slot.js";
+import { culled, ringBox, runBox } from "./geometry.js";
+import { useFrameLoop, viewportHeight } from "./frame.js";
+import { MOVING_ATTRIBUTE, OFF_ATTRIBUTE, flag, place } from "./paint.js";
+import { createElement, forwardRef, useCallback, useRef, useState } from "react";
+import { regionBox } from "@maple-kit/core/anchor";
+//#region src/marks/ring.ts
+const BELOW_ATTRIBUTE = "data-mk-below";
+const LABEL_ROOM_PX = 26;
+const NOTE_ROOM_PX = 40;
+const PART = "Maple.TargetRing";
+function linesOf(target) {
+	return "startContainer" in target ? [...target.getClientRects()] : [];
+}
+function empty(rect) {
+	return rect.width === 0 && rect.height === 0;
+}
+const MapleTargetRing = forwardRef(function MapleTargetRing(props, ref) {
+	const { className, label, note, region, state = "composing", target } = props;
+	const room = note === void 0 ? LABEL_ROOM_PX : NOTE_ROOM_PX;
+	const { container } = useMapleUi(PART);
+	const ring = useRef(null);
+	const cap = useRef(null);
+	const runs = useRef([]);
+	const [lines, setLines] = useState(0);
+	const paint = useCallback((moving) => {
+		const node = ring.current;
+		if (!node || !target) return;
+		const box = target.getBoundingClientRect();
+		const rect = region === void 0 ? box : regionBox(box, region);
+		const away = empty(rect) || culled(rect, viewportHeight(container));
+		flag(node, OFF_ATTRIBUTE, away);
+		flag(node, MOVING_ATTRIBUTE, moving);
+		if (away) return;
+		place(node, ringBox(rect));
+		if (cap.current) flag(cap.current, BELOW_ATTRIBUTE, rect.y < room);
+		const boxes = region === void 0 ? linesOf(target) : [];
+		if (boxes.length !== lines) setLines(boxes.length);
+		boxes.forEach((box, index) => {
+			const run = runs.current[index];
+			if (run) place(run, runBox(box, rect));
+		});
+	}, [
+		container,
+		lines,
+		region,
+		room,
+		target
+	]);
+	useFrameLoop(PART, paint);
+	if (!target) return null;
+	return createElement("div", {
+		className: className ? `mk-ring ${className}` : "mk-ring",
+		"data-mk-state": state,
+		"data-mk-passage": String(region === void 0 && "startContainer" in target),
+		"data-mk-region": String(region !== void 0),
+		ref: composeRefs(ref, (node) => {
+			ring.current = node;
+		})
+	}, label === void 0 ? null : caption(label, note, cap), ...run(lines, runs));
+});
+function caption(label, note, ref) {
+	return createElement("span", {
+		className: "mk-ring-label",
+		ref
+	}, createElement("span", {
+		key: "name",
+		className: "mk-ring-name mk-mono"
+	}, label), note === void 0 ? null : createElement("span", {
+		key: "note",
+		className: "mk-ring-note mk-mono"
+	}, note));
+}
+function run(lines, runs) {
+	return Array.from({ length: lines }, (_, index) => createElement("div", {
+		key: index,
+		className: "mk-ring-run",
+		ref: (node) => {
+			runs.current[index] = node;
+		}
+	}));
+}
+//#endregion
+export { BELOW_ATTRIBUTE, MapleTargetRing };

package/dist/marks/shape.d.ts

@@ -0,0 +1,21 @@
+import { PartForm } from "../data.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/marks/shape.d.ts
+/** Half, which is what a waterline means when nothing says otherwise. */
+export declare const HALF = 0.5;
+/** A fresh clip id. Called once per instance, never once per render. */
+export declare function nextClipId(): string;
+/** How one leaf is drawn. Fill says the life, the edge says the confidence. */
+export interface LeafProps {
+  readonly form?: PartForm;
+  /** How much of the leaf the waterline leaves filled. */
+  readonly fraction?: number;
+  /** The halo behind it. Off wherever the leaf already sits on one of ours. */
+  readonly halo?: boolean;
+  /** The clip id, when a caller renders many and wants them stable. */
+  readonly clipId?: string;
+  readonly className?: string;
+}
+/** One leaf, drawn in the form its comment's life is at. */
+export declare function MapleLeaf(props: LeafProps): ReactElement;
+//#endregion

package/dist/marks/shape.js

@@ -0,0 +1,51 @@
+import { LEAF_OUTLINE, LEAF_ROTATION, LEAF_SOLID, LEAF_VIEW_BOX } from "./leaf.js";
+import { waterline } from "./geometry.js";
+import { cloneElement, createElement, isValidElement, useState } from "react";
+//#region src/marks/shape.ts
+const HALF = .5;
+let sequence = 0;
+function nextClipId() {
+	sequence += 1;
+	return `mk-leaf-${sequence}`;
+}
+function inside(asChild, children, face) {
+	if (!asChild) return face;
+	return isValidElement(children) ? [cloneElement(children, {}, ...face)] : [children];
+}
+function tilted(key, child) {
+	return createElement("g", {
+		key,
+		transform: LEAF_ROTATION
+	}, child);
+}
+function path(className, d) {
+	return createElement("path", {
+		className,
+		d
+	});
+}
+function clipped(id, fraction) {
+	return [createElement("defs", { key: "defs" }, createElement("clipPath", { id }, createElement("rect", waterline(fraction)))), createElement("g", {
+		key: "fill",
+		clipPath: `url(#${id})`
+	}, tilted("tilt", path("mk-leaf-body", LEAF_SOLID)))];
+}
+function body(form, id, fraction) {
+	const edge = tilted("edge", path("mk-leaf-edge", LEAF_OUTLINE));
+	if (form === "outline") return [edge];
+	if (form === "partial") return [...clipped(id, fraction), edge];
+	return [tilted("body", path("mk-leaf-body", LEAF_SOLID))];
+}
+function MapleLeaf(props) {
+	const { className, clipId, form = "solid", fraction = HALF, halo = true } = props;
+	const [generated] = useState(nextClipId);
+	const id = clipId ?? generated;
+	return createElement("svg", {
+		className: className ? `mk-leaf ${className}` : "mk-leaf",
+		viewBox: LEAF_VIEW_BOX,
+		"aria-hidden": true,
+		focusable: false
+	}, halo ? tilted("halo", path("mk-leaf-halo", LEAF_SOLID)) : null, ...body(form, id, fraction));
+}
+//#endregion
+export { HALF, MapleLeaf, inside, nextClipId };

package/dist/notice/css.d.ts

@@ -0,0 +1,11 @@
+//#region src/notice/css.d.ts
+/**
+ * The notice's half of the adopted stylesheet.
+ *
+ * One band, tinted by the kind. It sits in the flow rather than over anything:
+ * a failure covered by a toast that leaves after four seconds is a failure a
+ * reviewer has to catch, and nothing here is in a hurry.
+ */
+/** The notice's rules. Composed by `src/stylesheet.ts`, never imported alone. */
+export declare function noticeCss(): string;
+//#endregion

package/dist/notice/css.js

@@ -0,0 +1,74 @@
+//#region src/notice/css.ts
+function noticeCss() {
+	return `
+.mk-notice {
+  flex: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 9px 8px 11px;
+  border-bottom: 1px solid var(--mk-line);
+  background: var(--mk-warn-sub);
+  color: var(--mk-fg);
+  font-size: 11.5px;
+  line-height: 1.4;
+  animation: mk-notice-in var(--mk-dur-swap) var(--mk-ease-surface);
+}
+
+@keyframes mk-notice-in {
+  from {
+    opacity: 0;
+    translate: 0 calc(-1 * var(--mk-rise-row));
+  }
+}
+
+/* A 401 is a door, not a fault: the reviewer signs in and it is gone. The
+   warm tint is for the ones nobody on this page can do anything about. */
+.mk-notice[data-mk-kind="unauthorized"] {
+  background: var(--mk-info-sub);
+}
+
+.mk-notice-said {
+  flex: 1 1 auto;
+  text-wrap: pretty;
+}
+
+.mk-notice-do {
+  flex: none;
+  padding: 3px 9px;
+  border: 1px solid var(--mk-line-firm);
+  border-radius: 999px;
+  background: var(--mk-bg);
+  color: var(--mk-fg);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.mk-notice-off {
+  flex: none;
+  padding: 0 2px;
+  border: 0;
+  background: transparent;
+  color: var(--mk-faint);
+  font: inherit;
+  font-size: 11px;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.mk-notice-off:hover {
+  color: var(--mk-fg);
+}
+
+/* In the composer it is the last thing above the buttons, so it closes the
+   panel's bottom edge rather than cutting a line across it. */
+.mk-composer .mk-notice {
+  border-bottom: 0;
+  border-top: 1px solid var(--mk-line);
+}
+`.trim();
+}
+//#endregion
+export { noticeCss };

package/dist/notice/index.d.ts

@@ -0,0 +1,4 @@
+import { noticeCss } from "./css.js";
+import { NOTICE_COPY, offersSignIn } from "./language.js";
+import { MapleNotice, MapleNoticeProps } from "./notice.js";
+export { MapleNotice, type MapleNoticeProps, NOTICE_COPY, MapleNotice as Notice, noticeCss, offersSignIn };

package/dist/notice/index.js

@@ -0,0 +1,4 @@
+import { noticeCss } from "./css.js";
+import { NOTICE_COPY, offersSignIn } from "./language.js";
+import { MapleNotice } from "./notice.js";
+export { MapleNotice, NOTICE_COPY, MapleNotice as Notice, noticeCss, offersSignIn };

package/dist/notice/language.d.ts

@@ -0,0 +1,15 @@
+import { FailureKind } from "@maple-kit/core/client";
+//#region src/notice/language.d.ts
+/** The notice's own words. */
+export declare const NOTICE_COPY: {
+  readonly label: "Something went wrong";
+  readonly retry: "Try again";
+  readonly signIn: "Sign in";
+  readonly dismiss: "Dismiss";
+  readonly dismissGlyph: "✕";
+  /** Said under a 401 on a deployment that offers no sign-in at all. */
+  readonly noSignIn: "This deployment has nowhere to put your comments yet.";
+};
+/** Whether the offer is a sign-in or a retry. A 401 is nobody's to retry. */
+export declare function offersSignIn(kind: FailureKind, linkable: boolean): boolean;
+//#endregion

package/dist/notice/language.js

@@ -0,0 +1,14 @@
+//#region src/notice/language.ts
+const NOTICE_COPY = {
+	label: "Something went wrong",
+	retry: "Try again",
+	signIn: "Sign in",
+	dismiss: "Dismiss",
+	dismissGlyph: "✕",
+	noSignIn: "This deployment has nowhere to put your comments yet."
+};
+function offersSignIn(kind, linkable) {
+	return kind === "unauthorized" && linkable;
+}
+//#endregion
+export { NOTICE_COPY, offersSignIn };

package/dist/notice/notice.d.ts

@@ -0,0 +1,14 @@
+import { PartProps } from "../part.js";
+import { FailedCall } from "@maple-kit/core/client";
+//#region src/notice/notice.d.ts
+/** Which failures this notice answers for. */
+export interface MapleNoticeProps extends PartProps {
+  /**
+   * The calls this notice speaks for. A notice beside the send button should
+   * not also announce a failed load behind it. Every call unless given.
+   */
+  readonly during?: readonly FailedCall[];
+}
+/** The failure, in a line, with the one thing that would fix it. */
+export declare const MapleNotice: import("react").ForwardRefExoticComponent<MapleNoticeProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion

package/dist/notice/notice.js

@@ -0,0 +1,49 @@
+import { cx, renderPart } from "../part.js";
+import { NOTICE_COPY, offersSignIn } from "./language.js";
+import { createElement, forwardRef } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+//#region src/notice/notice.ts
+const MapleNotice = forwardRef(function MapleNotice(props, ref) {
+	const { asChild, className, during, ...rest } = props;
+	const { error, github } = useMaple();
+	const client = useMapleClient();
+	if (!error || during && !during.includes(error.during)) return null;
+	return renderPart("div", asChild, {
+		...rest,
+		role: "alert",
+		"data-mk-kind": error.kind,
+		className: cx("mk-notice", className),
+		ref
+	}, [
+		createElement("span", {
+			key: "said",
+			className: "mk-notice-said"
+		}, said(error, github)),
+		offer(error, github, client),
+		createElement("button", {
+			key: "off",
+			type: "button",
+			className: "mk-notice-off mk-hit",
+			"aria-label": NOTICE_COPY.dismiss,
+			onClick: () => client.clearError()
+		}, NOTICE_COPY.dismissGlyph)
+	]);
+});
+function said(error, github) {
+	return error.kind === "unauthorized" && github.state === "unsupported" ? NOTICE_COPY.noSignIn : error.message;
+}
+function offer(error, github, client) {
+	if (offersSignIn(error.kind, github.state === "failed" || github.state === "unlinked")) return button(NOTICE_COPY.signIn, () => void client.linkGitHub());
+	if (error.kind === "unauthorized") return null;
+	return error.during === "load" ? button(NOTICE_COPY.retry, () => void client.load()) : null;
+}
+function button(label, onClick) {
+	return createElement("button", {
+		key: "do",
+		type: "button",
+		className: "mk-notice-do mk-press",
+		onClick
+	}, label);
+}
+//#endregion
+export { MapleNotice };

package/dist/part.d.ts

@@ -0,0 +1,9 @@
+import { ElementType, ReactNode } from "react";
+//#region src/part.d.ts
+/** The two props every part has beyond its own element's. */
+export interface PartProps {
+  /** Render the single child instead of the part's own element. */
+  readonly asChild?: boolean;
+  readonly className?: string;
+}
+//#endregion

package/dist/part.js

@@ -0,0 +1,11 @@
+import { Slot } from "./slot.js";
+import { createElement } from "react";
+//#region src/part.ts
+function cx(...names) {
+	return names.filter(Boolean).join(" ");
+}
+function renderPart(tag, asChild, props, children) {
+	return createElement(asChild ? Slot : tag, props, children);
+}
+//#endregion
+export { cx, renderPart };

package/dist/picker/css.d.ts

@@ -0,0 +1,13 @@
+//#region src/picker/css.d.ts
+/**
+ * The picker's half of the adopted stylesheet.
+ *
+ * Two surfaces and a band. The shield is what gives element and region their
+ * cursor and keeps a click off the island, so it exists for those two and not
+ * for a passage: text under an overlay cannot be selected, whatever the
+ * cursor over it says. Every value is a token, so reduced motion is honoured
+ * by redefining the tokens rather than by switching these rules off.
+ */
+/** The picker's rules. Composed by `src/stylesheet.ts`, never imported alone. */
+export declare function pickerCss(): string;
+//#endregion

package/dist/picker/css.js

@@ -0,0 +1,141 @@
+//#region src/picker/css.ts
+function pickerCss() {
+	return `
+${shield()}
+
+${band()}
+
+${bar()}
+`.trim();
+}
+function shield() {
+	return `
+.mk-shield {
+  position: fixed;
+  inset: 0;
+  z-index: 3;
+  pointer-events: auto;
+  cursor: crosshair;
+}
+
+.mk-shield-drag {
+  cursor: cell;
+}
+`.trim();
+}
+function band() {
+	return `
+.mk-band {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 4;
+  translate: var(--mk-x) var(--mk-y);
+  width: var(--mk-w);
+  height: var(--mk-h);
+  border: 1.5px solid var(--mk-accent);
+  border-radius: var(--mk-r-xs);
+  background: color-mix(in oklab, var(--mk-accent) 12%, transparent);
+  pointer-events: none;
+}
+`.trim();
+}
+function bar() {
+	return `
+.mk-pick-bar {
+  position: fixed;
+  top: 12px;
+  left: 50%;
+  translate: -50% 0;
+  z-index: 5;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  max-width: calc(100vw - 24px);
+  padding: 6px 6px 6px 12px;
+  border: 1px solid var(--mk-line-firm);
+  border-radius: 999px;
+  background: var(--mk-bg);
+  box-shadow: var(--mk-sh2);
+  color: var(--mk-fg);
+  font: inherit;
+  font-size: 12px;
+  pointer-events: auto;
+  animation: mk-pick-in var(--mk-dur-island-open) var(--mk-ease-entrance);
+}
+
+@keyframes mk-pick-in {
+  from {
+    opacity: 0;
+    translate: -50% calc(-1 * var(--mk-rise-row));
+  }
+}
+
+.mk-pick-say {
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.mk-pick-kinds {
+  display: flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 999px;
+  background: var(--mk-sunk);
+}
+
+.mk-pick-kind {
+  padding: 2px 9px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: capitalize;
+  cursor: pointer;
+  transition:
+    background-color var(--mk-dur-swap) var(--mk-ease-swap),
+    color var(--mk-dur-swap) var(--mk-ease-swap);
+}
+
+.mk-pick-kind[aria-pressed="true"] {
+  background: var(--mk-bg);
+  box-shadow: var(--mk-sh1);
+  color: var(--mk-fg);
+}
+
+.mk-pick-stop {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border: 1px solid var(--mk-line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.mk-pick-stop:hover {
+  border-color: var(--mk-line-firm);
+  color: var(--mk-fg);
+}
+
+.mk-kbd {
+  padding: 0 4px;
+  border: 1px solid var(--mk-line);
+  border-radius: var(--mk-r-xs);
+  background: var(--mk-sunk);
+  font-family: var(--mk-mono);
+  font-size: 10px;
+  line-height: 15px;
+}
+`.trim();
+}
+//#endregion
+export { pickerCss };

package/dist/picker/index.d.ts

@@ -0,0 +1,6 @@
+import { pickerCss } from "./css.js";
+import { PICKER_COPY, PICK_HINTS, pickerLabel } from "./language.js";
+import { MaplePicker, MaplePickerProps, onOwnControl } from "./picker.js";
+import { SessionHandlers, startSession } from "./session.js";
+import { TargetOptions, elementOf, targetFor } from "./target.js";
+export { MaplePicker, type MaplePickerProps, PICKER_COPY, PICK_HINTS, MaplePicker as Picker, type SessionHandlers, type TargetOptions, elementOf, onOwnControl, pickerCss, pickerLabel, startSession, targetFor };

package/dist/picker/index.js

@@ -0,0 +1,6 @@
+import { pickerCss } from "./css.js";
+import { PICKER_COPY, PICK_HINTS, pickerLabel } from "./language.js";
+import { startSession } from "./session.js";
+import { elementOf, targetFor } from "./target.js";
+import { MaplePicker, onOwnControl } from "./picker.js";
+export { MaplePicker, PICKER_COPY, PICK_HINTS, MaplePicker as Picker, elementOf, onOwnControl, pickerCss, pickerLabel, startSession, targetFor };

package/dist/picker/language.d.ts

@@ -0,0 +1,14 @@
+import { PickKind } from "@maple-kit/core/client";
+//#region src/picker/language.d.ts
+/** The instruction for each pick, which is the gesture and nothing else. */
+export declare const PICK_HINTS: Readonly<Record<PickKind, string>>;
+/** The picker's own words. */
+export declare const PICKER_COPY: {
+  readonly cancel: "Cancel";
+  readonly cancelHint: "Esc";
+  readonly bar: "Choosing what to comment on";
+  readonly cycle: "Press t to cycle";
+};
+/** What a screen reader hears on the bar while a pick is armed. */
+export declare function pickerLabel(kind: PickKind): string;
+//#endregion

package/dist/picker/language.js

@@ -0,0 +1,17 @@
+//#region src/picker/language.ts
+const PICK_HINTS = {
+	element: "Click anything on the page",
+	region: "Drag a box around the area",
+	text: "Select the passage"
+};
+const PICKER_COPY = {
+	cancel: "Cancel",
+	cancelHint: "Esc",
+	bar: "Choosing what to comment on",
+	cycle: "Press t to cycle"
+};
+function pickerLabel(kind) {
+	return `${PICKER_COPY.bar}: ${PICK_HINTS[kind]}.`;
+}
+//#endregion
+export { PICKER_COPY, PICK_HINTS, pickerLabel };

package/dist/picker/picker.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/picker/picker.d.ts
+/** How the picker behaves. Everything it needs beyond this is the controller's. */
+export interface MaplePickerProps {
+  /** The bar naming the gesture. On unless an application draws its own. */
+  readonly hint?: boolean;
+  readonly className?: string;
+}
+/** Runs the armed pick, and closes it into the composer. */
+export declare function MaplePicker(props: MaplePickerProps): ReactNode;
+/**
+ * True when the event's real target is one of the overlay's own controls. The
+ * shield is the exception: it exists to be clicked through. Everything else in
+ * the shadow root is a control, and a control that also picked the page behind
+ * it would be unusable.
+ */
+export declare function onOwnControl(event: Event, root: ShadowRoot): boolean;
+//#endregion