@maple-kit/ui 0.9.0 → 0.10.0

package/dist/mock/menu.js

@@ -0,0 +1,85 @@
+import { ChevronIcon } from "../icons/chevron.js";
+import { Fragment, createElement, useRef } from "react";
+//#region src/mock/menu.ts
+const EDGE_PX = 8;
+function Menu(props) {
+	const { label, onPick, options, value } = props;
+	const trigger = useRef(null);
+	const menu = useRef(null);
+	const chosen = options.find((option) => option.value === value) ?? options[0];
+	const toggle = () => {
+		const node = menu.current;
+		const from = trigger.current;
+		if (!node || !from) return;
+		node.togglePopover();
+		if (!node.matches(":popover-open")) return;
+		place(node, from.getBoundingClientRect());
+		node.querySelector("[aria-checked=\"true\"]")?.focus();
+		from.getRootNode().addEventListener("scroll", () => close(node), {
+			capture: true,
+			once: true
+		});
+	};
+	const pick = (next) => {
+		close(menu.current);
+		trigger.current?.focus();
+		onPick(next);
+	};
+	return createElement(Fragment, null, createElement("button", {
+		type: "button",
+		className: "mk-mock-pick mk-press",
+		"aria-haspopup": "menu",
+		"aria-label": `${label}: ${chosen?.label ?? ""}`,
+		"data-mk-real": String(chosen?.real === true),
+		ref: trigger,
+		onClick: toggle
+	}, chosen && optionText(chosen), createElement(ChevronIcon, {
+		key: "chevron",
+		className: "mk-mock-chevron",
+		size: 11
+	})), createElement("div", {
+		className: "mk-mock-menu",
+		popover: "auto",
+		role: "menu",
+		"aria-label": label,
+		ref: menu,
+		onKeyDown: move
+	}, options.map((option) => createElement("button", {
+		key: option.label,
+		type: "button",
+		role: "menuitemradio",
+		className: "mk-mock-item",
+		"aria-checked": option.value === value,
+		onClick: () => pick(option.value)
+	}, optionText(option)))));
+}
+function optionText(option) {
+	return [...option.real === true ? [createElement("span", {
+		key: "dot",
+		className: "mk-mock-dot",
+		"aria-hidden": true
+	})] : [], createElement("span", { key: "text" }, option.label)];
+}
+function move(event) {
+	const step = {
+		ArrowDown: 1,
+		ArrowUp: -1
+	}[event.key];
+	if (step === void 0) return;
+	event.preventDefault();
+	const items = [...event.currentTarget.querySelectorAll("[role=\"menuitemradio\"]")];
+	items[(items.indexOf(event.target) + step + items.length) % items.length]?.focus();
+}
+function close(node) {
+	if (node?.matches(":popover-open") === true) node.hidePopover();
+}
+function place(node, anchor) {
+	const box = node.getBoundingClientRect();
+	const below = anchor.bottom + 4;
+	const y = below + box.height <= window.innerHeight - EDGE_PX ? below : anchor.top - 4 - box.height;
+	const x = Math.max(EDGE_PX, anchor.right - box.width);
+	node.style.setProperty("--mk-x", `${String(Math.round(x))}px`);
+	node.style.setProperty("--mk-y", `${String(Math.round(Math.max(EDGE_PX, y)))}px`);
+}
+//#endregion
+export { Menu };

package/dist/mock/mock.d.ts

@@ -0,0 +1,18 @@
+import { MockClient } from "@maple-kit/mock/client";
+//#region src/mock/mock.d.ts
+/** How the box is mounted. */
+export interface MapleMockProps {
+  /** A controller the caller built and owns, started and destroyed by them. */
+  readonly client?: MockClient;
+  /** Start with the box open. `m` opens and closes it either way. */
+  readonly defaultOpen?: boolean;
+  /** Added to the box. */
+  readonly className?: string;
+  /** For a host that mounts Maple with a script tag rather than a bundle. */
+  readonly nonce?: string;
+  /** Where its own host is appended. Defaults to `document.body`. */
+  readonly parent?: Element;
+}
+/** The box, the banner, and a shadow host of their own when nothing gives one. */
+export declare const MapleMock: import("react").ForwardRefExoticComponent<MapleMockProps & import("react").RefAttributes<HTMLDivElement>>;
+//#endregion

package/dist/mock/mock.js

@@ -0,0 +1,200 @@
+import { MapleUiContext } from "../context.js";
+import { SCHEME_ATTRIBUTE } from "../sheet-base.js";
+import { cx } from "../cx.js";
+import { MOCK_COPY, SHAPE_LABELS, STATE_LABELS, bannerSentence, callName, codecOf } from "./language.js";
+import { CodeIcon } from "../icons/code.js";
+import { LinkIcon } from "../icons/link.js";
+import { Menu } from "./menu.js";
+import { MOCK_CSS } from "./sheet.js";
+import { createElement, forwardRef, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createOverlayHost } from "@maple-kit/core/overlay";
+import { createPortal } from "react-dom";
+import { MOCK_STATES } from "@maple-kit/core/mock";
+import { useMock } from "@maple-kit/react/mock";
+//#region src/mock/mock.ts
+const MapleMock = forwardRef(function MapleMock(props, ref) {
+	const { className, client, defaultOpen, nonce, parent } = props;
+	const binding = useMock({
+		...client === void 0 ? {} : { client },
+		...defaultOpen === void 0 ? {} : { defaultOpen }
+	});
+	const inside = useContext(MapleUiContext);
+	if (!binding.state.installed) return null;
+	const surface = createElement(MockSurface, {
+		...binding,
+		className,
+		forwarded: ref
+	});
+	if (inside !== null) return surface;
+	return createElement(OwnHost, {
+		scheme: binding.state.scheme,
+		nonce,
+		parent
+	}, surface);
+});
+function OwnHost(props) {
+	const { nonce, parent, scheme } = props;
+	const [host, setHost] = useState();
+	useEffect(() => {
+		const mounted = createOverlayHost({
+			...nonce === void 0 ? {} : { nonce },
+			...parent === void 0 ? {} : { parent }
+		});
+		mounted.addStyles(MOCK_CSS);
+		setHost(mounted);
+		return () => mounted.destroy();
+	}, [nonce, parent]);
+	useLayoutEffect(() => {
+		host?.container.setAttribute(SCHEME_ATTRIBUTE, scheme);
+	}, [host, scheme]);
+	if (host === void 0) return null;
+	return createPortal(createElement("div", { className: "mk-layer" }, props.children), host.root);
+}
+function MockSurface(props) {
+	const { client, state } = props;
+	const layers = useLayers(state);
+	return createElement("div", { className: "mk-mock-surface" }, state.active === void 0 ? null : createElement(Banner, {
+		key: "banner",
+		client,
+		state,
+		layers
+	}), state.open ? createElement(Box, {
+		key: "box",
+		...props,
+		layers
+	}) : null);
+}
+function useLayers(state) {
+	const [chunk, setChunk] = useState();
+	const { active } = state;
+	const needed = !!(state.identity ?? state.flags[0] ?? active?.as ?? active?.flags);
+	useEffect(() => {
+		if (needed) import("./layers.js").then(setChunk, () => void 0);
+	}, [needed]);
+	return chunk;
+}
+function Banner(props) {
+	const { client, layers, state } = props;
+	return createElement("div", {
+		className: "mk-mock-banner mk-live",
+		role: "status"
+	}, createElement("span", { className: "mk-mock-banner-said" }, bannerSentence(state.active.calls)), layers && createElement(layers.LayerBanner, { state }), state.open ? null : button(MOCK_COPY.edit, () => client.setOpen(true)), button(MOCK_COPY.turnOff, () => client.turnOff()));
+}
+function Box(props) {
+	const { className, client, forwarded, layers, state } = props;
+	const field = useRef(null);
+	useEffect(() => field.current?.focus(), []);
+	return createElement("div", {
+		className: cx("mk-mock mk-surface mk-live", className),
+		role: "dialog",
+		"aria-label": MOCK_COPY.label,
+		ref: forwarded
+	}, createElement("div", {
+		className: "mk-mock-head",
+		"data-mk-thinking": String(state.thinking),
+		"aria-busy": state.thinking
+	}, createElement("input", {
+		className: "mk-mock-field",
+		type: "text",
+		placeholder: state.planning ? MOCK_COPY.sentence : MOCK_COPY.field,
+		"aria-label": state.planning ? MOCK_COPY.sentence : MOCK_COPY.field,
+		value: state.query,
+		ref: field,
+		onChange: (event) => client.setQuery(event.currentTarget.value)
+	}), createElement("kbd", { className: "mk-mock-key-hint" }, MOCK_COPY.escape)), state.unnamed ? createElement("p", { className: "mk-mock-unnamed" }, MOCK_COPY.unnamed) : null, createElement("div", { className: "mk-mock-body" }, createElement("p", { className: "mk-mock-route" }, `${MOCK_COPY.routePrefix} `, createElement("span", { className: "mk-mono" }, state.route)), calls(state, client), layers && createElement(layers.Layers, {
+		state,
+		client
+	})), createElement(Foot, {
+		client,
+		state
+	}));
+}
+function calls(state, client) {
+	if (state.calls.length === 0) {
+		const said = state.query === "" ? MOCK_COPY.nothingRecorded : MOCK_COPY.nothingMatches;
+		return createElement("p", { className: "mk-mock-empty" }, said);
+	}
+	return createElement("ul", { className: "mk-mock-calls" }, state.calls.map((row) => createElement(CallRow, {
+		key: row.key,
+		row,
+		client
+	})));
+}
+function CallRow(props) {
+	const { client, row } = props;
+	return createElement("li", {
+		className: "mk-mock-call",
+		"data-mk-mocked": String(row.state !== void 0),
+		"data-mk-seen": String(row.seen),
+		title: row.seen ? row.key : `${row.key}: ${MOCK_COPY.notSeen}`
+	}, createElement("span", { className: "mk-mock-name mk-mono" }, createElement("span", { className: "mk-mock-codec" }, codecOf(row.key)), callName(row.key)), row.source === void 0 ? null : createElement("span", {
+		className: "mk-mock-rung",
+		title: `${MOCK_COPY.shapeFrom} ${SHAPE_LABELS[row.source]}`
+	}, SHAPE_LABELS[row.source]), createElement(Menu, {
+		label: callName(row.key),
+		options: STATE_OPTIONS,
+		value: row.state,
+		onPick: (state) => client.choose(row.key, state)
+	}));
+}
+const STATE_OPTIONS = [{
+	value: void 0,
+	label: MOCK_COPY.real,
+	real: true
+}, ...MOCK_STATES.map((state) => ({
+	value: state,
+	label: STATE_LABELS[state]
+}))];
+function Foot(props) {
+	const { client, state } = props;
+	const [copied, setCopied] = useState();
+	const empty = client.recipe() === void 0;
+	useEffect(() => {
+		if (copied === void 0) return;
+		const timer = setTimeout(() => setCopied(void 0), 1600);
+		return () => clearTimeout(timer);
+	}, [copied]);
+	const copy = (what) => () => {
+		(what === "link" ? client.copyLink() : client.copyRecipe()).then(() => setCopied({
+			what,
+			ok: true
+		}), () => setCopied({
+			what,
+			ok: false
+		}));
+	};
+	return createElement("div", { className: "mk-mock-foot" }, button(label(copied, "link", MOCK_COPY.copyLink), copy("link"), {
+		key: "link",
+		disabled: empty,
+		icon: LinkIcon
+	}), button(label(copied, "recipe", MOCK_COPY.copyRecipe), copy("recipe"), {
+		key: "recipe",
+		disabled: empty,
+		icon: CodeIcon,
+		quiet: true
+	}), createElement("span", {
+		key: "spacer",
+		className: "mk-mock-spacer"
+	}), button(MOCK_COPY.apply, () => client.apply(), {
+		key: "apply",
+		disabled: !state.changed,
+		primary: true
+	}));
+}
+function label(copied, what, idle) {
+	if (copied?.what !== what) return idle;
+	return copied.ok ? MOCK_COPY.copied : MOCK_COPY.copyFailed;
+}
+function button(text, onClick, flags = {}) {
+	return createElement("button", {
+		key: flags.key ?? text,
+		type: "button",
+		className: "mk-mock-button mk-press",
+		disabled: flags.disabled === true,
+		"data-mk-primary": flags.primary === true ? "true" : void 0,
+		"data-mk-quiet": flags.quiet === true ? "true" : void 0,
+		onClick
+	}, flags.icon && createElement(flags.icon, { key: "icon" }), text);
+}
+//#endregion
+export { MapleMock };

package/dist/mock/sheet.d.ts

@@ -0,0 +1,8 @@
+//#region src/mock/sheet.d.ts
+/**
+ * The sheet `MapleMock` adopts when it mounts on its own: the tokens, the base
+ * rules and the box's rules, and none of the island's, composer's or marks'.
+ */
+/** The box's own styles, for a page with no `<Maple />`. */
+export declare const MOCK_CSS: string;
+//#endregion

package/dist/mock/sheet.js

@@ -0,0 +1,9 @@
+import { mockCss } from "./css.js";
+import { baseCss, tokenCss } from "../sheet-base.js";
+//#region src/mock/sheet.ts
+function buildMockCss() {
+	return `${tokenCss()}\n\n${baseCss()}\n\n${mockCss()}\n`;
+}
+const MOCK_CSS = buildMockCss();
+//#endregion
+export { MOCK_CSS };

package/dist/notice/notice.js

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

package/dist/part.js

@@ -1,11 +1,8 @@
 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 };
+export { renderPart };

package/dist/root.js

@@ -1,6 +1,7 @@
 import { MapleUiContext } from "./context.js";
 import { ShotContext, createShotStore } from "./shots.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 { createElement, forwardRef, useEffect, useLayoutEffect, useMemo, useState } from "react";
 import { readMapleConfig } from "@maple-kit/core/client";

package/dist/sheet-base.d.ts

@@ -0,0 +1,11 @@
+//#region src/sheet-base.d.ts
+/**
+ * The tokens and the base rules: what every sheet in this package starts from.
+ *
+ * `Maple.Root` adopts them with every part's rules, and `MapleMock` on its own
+ * adopts them with the box's alone, so a page that only mocks never carries the
+ * island's or the composer's styles. Building a string reaches nothing.
+ */
+/** The attribute the root writes the overlay's resolved scheme to. */
+export declare const SCHEME_ATTRIBUTE = "data-mk-scheme";
+//#endregion

package/dist/sheet-base.js

@@ -0,0 +1,173 @@
+import { COLOR_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, SHADOW_TOKENS, SIZE_TOKENS, TYPE_TOKENS } from "./tokens.js";
+//#region src/sheet-base.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 baseCss() {
+	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;
+  }
+}
+`.trim();
+}
+//#endregion
+export { SCHEME_ATTRIBUTE, baseCss, tokenCss };

package/dist/stylesheet.d.ts

@@ -1,15 +1,6 @@
+import { SCHEME_ATTRIBUTE } from "./sheet-base.js";
 //#region src/stylesheet.d.ts
-/**
- * The overlay's stylesheet: one string, built from the token table.
- *
- * It is a constant rather than a CSS file behind a loader, so it needs no
- * bundler plugin, stays tree-shakeable, and leaves the CSP claim in
- * docs/overlay-csp.md checkable by reading `buildOverlayCss` and
- * `createOverlayStyleSheet`. Nothing here constructs a `CSSStyleSheet`, reaches
- * `document` or reads storage; building a string does none of those.
- */
-/** The attribute the root writes the overlay's resolved scheme to. */
-export declare const SCHEME_ATTRIBUTE = "data-mk-scheme";
 /** The overlay's styles. The only thing `Maple.Root` adopts. */
 export declare const OVERLAY_CSS: string;
-//#endregion
+//#endregion
+export { SCHEME_ATTRIBUTE };