@maple-kit/ui 0.8.0 → 0.10.0

package/dist/mock/css.js

@@ -0,0 +1,427 @@
+import "../tokens.js";
+//#region src/mock/css.ts
+function mockCss() {
+	return [
+		box(),
+		suggest(),
+		calls(),
+		states(),
+		menu(),
+		foot(),
+		banner()
+	].join("\n\n");
+}
+function box() {
+	return `
+.mk-mock {
+  position: absolute;
+  top: 12vh;
+  left: 50%;
+  width: min(560px, calc(100vw - 24px));
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  translate: -50% 0;
+  animation: mk-mock-in var(--mk-dur-island-open) var(--mk-ease-surface);
+}
+
+@keyframes mk-mock-in {
+  from {
+    opacity: 0;
+    translate: -50% calc(-1 * var(--mk-rise-card));
+  }
+}
+
+.mk-mock-head {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--mk-line);
+}
+
+.mk-mock-field {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: var(--mk-fg);
+  font: inherit;
+  font-size: 14px;
+}
+
+.mk-mock-field:focus-visible {
+  outline: none;
+}
+
+.mk-mock-field::placeholder {
+  color: var(--mk-faint);
+}
+
+.mk-mock-key-hint {
+  flex: none;
+  padding: 1px 5px;
+  border: 1px solid var(--mk-line-firm);
+  border-radius: var(--mk-r-xs);
+  color: var(--mk-faint);
+  font-size: 10.5px;
+}
+
+.mk-mock-body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.mk-mock-route {
+  flex: none;
+  margin: 0;
+  padding: 10px 12px 4px;
+  color: var(--mk-muted);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.mk-mock-route .mk-mono {
+  color: var(--mk-fg);
+  font-weight: 400;
+}
+
+.mk-mock-fold {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.mk-mock-fold[aria-expanded="true"] svg {
+  rotate: 180deg;
+}
+
+.mk-mock-empty {
+  margin: 0;
+  padding: 14px 12px 16px;
+  color: var(--mk-muted);
+  text-wrap: pretty;
+}
+`.trim();
+}
+function suggest() {
+	return `
+.mk-mock-head {
+  position: relative;
+}
+
+.mk-mock-head[data-mk-thinking="true"]::after {
+  content: "";
+  position: absolute;
+  inset: auto 0 -1px;
+  height: 2px;
+  background: radial-gradient(closest-side, var(--mk-accent), transparent);
+  animation: mk-mock-sweep var(--mk-dur-shimmer) var(--mk-ease-swap) infinite;
+}
+
+@keyframes mk-mock-sweep {
+  from {
+    translate: calc(-1 * var(--mk-shimmer-sweep)) 0;
+  }
+  to {
+    translate: var(--mk-shimmer-sweep) 0;
+  }
+}
+
+.mk-mock-unnamed {
+  flex: none;
+  margin: 0;
+  padding: 8px 12px 0;
+  color: var(--mk-muted);
+  font-size: 12px;
+}
+`.trim();
+}
+function calls() {
+	return `
+.mk-mock-calls {
+  margin: 0;
+  padding: 4px 6px 6px;
+  list-style: none;
+}
+
+.mk-mock-call {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+  padding: 6px;
+  border-radius: var(--mk-r-sm);
+}
+
+.mk-mock-call[data-mk-mocked="true"] {
+  background: var(--mk-warn-sub);
+}
+
+.mk-mock-name {
+  flex: 1 1 160px;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  overflow: hidden;
+  color: var(--mk-muted);
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mk-mock-codec {
+  flex: none;
+  color: var(--mk-faint);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.mk-mock-rung {
+  flex: none;
+  padding: 0 6px;
+  border: 1px solid var(--mk-line);
+  border-radius: 999px;
+  color: var(--mk-faint);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.mk-mock-call[data-mk-mocked="true"] .mk-mock-name {
+  color: var(--mk-fg);
+}
+
+.mk-mock-call[data-mk-seen="false"] .mk-mock-name {
+  color: var(--mk-faint);
+}
+`.trim();
+}
+function states() {
+	return `
+.mk-mock-states {
+  flex: 0 1 auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 1px;
+  margin-left: auto;
+  padding: 2px;
+  border-radius: var(--mk-r-sm);
+  background: var(--mk-sunk);
+}
+
+.mk-mock-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 7px;
+  border: 0;
+  border-radius: var(--mk-r-xs);
+  background: transparent;
+  color: var(--mk-muted);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+  transition:
+    background-color var(--mk-dur-fade) var(--mk-ease-surface),
+    color var(--mk-dur-fade) var(--mk-ease-surface);
+}
+
+.mk-mock-state:hover {
+  color: var(--mk-fg);
+}
+
+.mk-mock-state[aria-checked="true"] {
+  background: var(--mk-fg);
+  color: var(--mk-bg);
+  font-weight: 600;
+}
+`.trim();
+}
+function menu() {
+	return `
+.mk-mock-pick,
+.mk-mock-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  background: transparent;
+  color: var(--mk-fg);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.mk-mock-pick {
+  flex: none;
+  gap: 4px;
+  min-width: 80px;
+  margin-left: auto;
+  padding: 1px 4px 1px 8px;
+  border-radius: 999px;
+  background: var(--mk-fg);
+  color: var(--mk-bg);
+  font-size: 11px;
+  line-height: 15px;
+  font-weight: 600;
+}
+
+.mk-mock-chevron {
+  margin-left: auto;
+  opacity: 0.6;
+}
+
+.mk-mock-menu {
+  position: fixed;
+  inset: 0 auto auto 0;
+  margin: 0;
+  translate: var(--mk-x) var(--mk-y);
+  min-width: 132px;
+  padding: 3px;
+  border: 1px solid var(--mk-line-firm);
+  border-radius: var(--mk-r);
+  background: var(--mk-bg);
+  box-shadow: var(--mk-sh2);
+}
+
+.mk-mock-item {
+  width: 100%;
+  padding: 5px 8px;
+  border-radius: var(--mk-r-sm);
+}
+
+.mk-mock-item:hover,
+.mk-mock-item:focus-visible {
+  outline: none;
+  background: var(--mk-sunk);
+}
+
+.mk-mock-item[aria-checked="true"] {
+  font-weight: 600;
+}
+
+.mk-mock-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--mk-ok);
+}
+`.trim();
+}
+function foot() {
+	return `
+.mk-mock-foot {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--mk-line);
+}
+
+.mk-mock-spacer {
+  flex: 1 1 auto;
+}
+
+.mk-mock-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 11px;
+  border: 1px solid var(--mk-line-firm);
+  border-radius: 999px;
+  background: var(--mk-bg);
+  color: var(--mk-fg);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.mk-mock-button[data-mk-quiet="true"] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--mk-muted);
+}
+
+.mk-mock-button[data-mk-quiet="true"]:hover:not(:disabled) {
+  color: var(--mk-fg);
+}
+
+.mk-mock-button:disabled {
+  color: var(--mk-faint);
+  cursor: default;
+}
+
+.mk-mock-button[data-mk-primary="true"] {
+  border-color: var(--mk-accent);
+  background: var(--mk-accent);
+  color: var(--mk-accent-ink);
+  font-weight: 600;
+}
+
+.mk-mock-button[data-mk-primary="true"]:disabled {
+  opacity: 0.4;
+}
+`.trim();
+}
+function banner() {
+	return `
+.mk-mock-banner {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: max-content;
+  max-width: calc(100vw - 160px);
+  padding: 4px 4px 4px 12px;
+  border: 1px solid var(--mk-warn);
+  border-radius: 999px;
+  background: var(--mk-warn-sub);
+  box-shadow: var(--mk-sh1);
+  color: var(--mk-fg);
+  font-size: 12px;
+}
+
+.mk-mock-banner-said {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.mk-mock-banner-as {
+  white-space: normal;
+}
+
+.mk-mock-banner .mk-mock-button {
+  flex: none;
+  padding: 3px 10px;
+  font-size: 11.5px;
+}
+
+@media (max-width: ${String(639)}px) {
+  .mk-mock-banner {
+    bottom: 56px;
+    left: 50%;
+    translate: -50% 0;
+    flex-wrap: wrap;
+    max-width: calc(100vw - 24px);
+    border-radius: var(--mk-r);
+  }
+}
+`.trim();
+}
+//#endregion
+export { mockCss };

package/dist/mock/index.d.ts

@@ -0,0 +1,4 @@
+import { MOCK_COPY, SHAPE_LABELS, STATE_LABELS, STATE_SENTENCES, bannerSentence, callName, codecOf } from "./language.js";
+import { MapleMock, MapleMockProps } from "./mock.js";
+import { MOCK_CSS } from "./sheet.js";
+export { MOCK_COPY, MOCK_CSS, MapleMock, type MapleMockProps, MapleMock as Mock, SHAPE_LABELS, STATE_LABELS, STATE_SENTENCES, bannerSentence, callName, codecOf };

package/dist/mock/index.js

@@ -0,0 +1,4 @@
+import { MOCK_COPY, SHAPE_LABELS, STATE_LABELS, STATE_SENTENCES, bannerSentence, callName, codecOf } from "./language.js";
+import { MOCK_CSS } from "./sheet.js";
+import { MapleMock } from "./mock.js";
+export { MOCK_COPY, MOCK_CSS, MapleMock, MapleMock as Mock, SHAPE_LABELS, STATE_LABELS, STATE_SENTENCES, bannerSentence, callName, codecOf };

package/dist/mock/language.d.ts

@@ -0,0 +1,39 @@
+import { MockState, ShapeSource } from "@maple-kit/core/mock";
+//#region src/mock/language.d.ts
+/** What each state is called on its button. */
+export declare const STATE_LABELS: Readonly<Record<MockState, string>>;
+/** What the banner says a call now does, in a state's own grammar. */
+export declare const STATE_SENTENCES: Readonly<Record<MockState, string>>;
+/** Where a call's shape came from, as the row's tag says it. */
+export declare const SHAPE_LABELS: Readonly<Record<ShapeSource, string>>;
+/** The box's fixed words. */
+export declare const MOCK_COPY: {
+  readonly label: "Mock this page";
+  readonly field: "Find a call";
+  readonly sentence: "Say a state, like “no items yet”";
+  readonly unnamed: "That doesn't name a state this page's data can be in.";
+  readonly real: "Real";
+  readonly escape: "Esc";
+  readonly routePrefix: "Calls on";
+  readonly nothingRecorded: "Nothing recorded on this page yet. Use the page, then open this again.";
+  readonly nothingMatches: "No recorded call matches that.";
+  readonly notSeen: "Named by the mock, not recorded on this page";
+  readonly shapeFrom: "Shape from";
+  readonly copyLink: "Copy link";
+  readonly copyRecipe: "Copy recipe";
+  readonly copied: "Copied";
+  readonly copyFailed: "Could not copy";
+  readonly apply: "Apply and reload";
+  readonly turnOff: "Turn off";
+  readonly edit: "Edit";
+};
+/** The banner's sentence, which names the first call and counts the rest. */
+export declare function bannerSentence(calls: readonly {
+  key: string;
+  state: MockState;
+}[]): string;
+/** A key without its codec prefix, which the row shows on its own. */
+export declare function callName(key: string): string;
+/** The codec a key belongs to: `rest`, `trpc`. */
+export declare function codecOf(key: string): string;
+//#endregion

package/dist/mock/language.js

@@ -0,0 +1,66 @@
+//#region src/mock/language.ts
+const STATE_LABELS = {
+	empty: "Empty",
+	error: "Error",
+	forbidden: "Forbidden",
+	loading: "Loading",
+	one: "One",
+	many: "Many",
+	long: "Long",
+	sparse: "Sparse",
+	mixed: "Mixed"
+};
+const STATE_SENTENCES = {
+	empty: "is empty",
+	error: "fails",
+	forbidden: "is forbidden",
+	loading: "never answers",
+	one: "has one item",
+	many: "has many items",
+	long: "has long text",
+	sparse: "has fields missing",
+	mixed: "has a mix of items"
+};
+const SHAPE_LABELS = {
+	supplied: "OpenAPI",
+	router: "Router types",
+	validator: "Validator",
+	introspection: "Introspection",
+	sample: "Recorded"
+};
+const MOCK_COPY = {
+	label: "Mock this page",
+	field: "Find a call",
+	sentence: "Say a state, like “no items yet”",
+	unnamed: "That doesn't name a state this page's data can be in.",
+	real: "Real",
+	escape: "Esc",
+	routePrefix: "Calls on",
+	nothingRecorded: "Nothing recorded on this page yet. Use the page, then open this again.",
+	nothingMatches: "No recorded call matches that.",
+	notSeen: "Named by the mock, not recorded on this page",
+	shapeFrom: "Shape from",
+	copyLink: "Copy link",
+	copyRecipe: "Copy recipe",
+	copied: "Copied",
+	copyFailed: "Could not copy",
+	apply: "Apply and reload",
+	turnOff: "Turn off",
+	edit: "Edit"
+};
+function bannerSentence(calls) {
+	const [first, ...rest] = calls;
+	if (first === void 0) return "Mock on";
+	const more = rest.length === 0 ? "" : ` and ${String(rest.length)} more`;
+	return `Mock on: ${callName(first.key)} ${STATE_SENTENCES[first.state]}${more}`;
+}
+function callName(key) {
+	const colon = key.indexOf(":");
+	return colon === -1 ? key : key.slice(colon + 1);
+}
+function codecOf(key) {
+	const colon = key.indexOf(":");
+	return colon === -1 ? "" : key.slice(0, colon);
+}
+//#endregion
+export { MOCK_COPY, SHAPE_LABELS, STATE_LABELS, STATE_SENTENCES, bannerSentence, callName, codecOf };

package/dist/mock/layers.js

@@ -0,0 +1,168 @@
+import { ChevronIcon } from "../icons/chevron.js";
+import { createElement, useEffect, useRef, useState } from "react";
+import { describeIdentity } from "@maple-kit/core/mock";
+//#region src/mock/layers.ts
+const LAYER_COPY = {
+	shownAs: "Shown as",
+	role: "Role",
+	granted: "Granted",
+	takenAway: "Taken away",
+	flags: "Flags",
+	permissions: "Permissions",
+	on: "On",
+	off: "Off",
+	realValue: "Real value",
+	notEvaluated: "Named by the mock, not evaluated on this page",
+	serverActs: "The server still acts as you."
+};
+function Layers(props) {
+	const { client, state } = props;
+	const { identity } = state;
+	const panel = useRef(null);
+	useShowTaken(panel, state.request);
+	const rows = [];
+	const grants = [];
+	const real = state.realAs;
+	const roles = identity?.role?.values ?? [];
+	if (roles.length > 0) {
+		const role = state.draftAs?.role;
+		rows.push(row({
+			key: "role",
+			name: LAYER_COPY.role,
+			set: role !== void 0,
+			prose: true
+		}, choices(LAYER_COPY.role, roles, {
+			set: role,
+			real: real?.role
+		}, (next) => client.setRole(next))));
+	}
+	for (const name of identity?.permissions?.values ?? []) {
+		const granted = state.draftAs?.permissions?.[name];
+		const pick = (next) => client.setPermission(name, next === void 0 ? void 0 : next === LAYER_COPY.granted);
+		const current = granted === void 0 ? void 0 : grantedLabel(granted);
+		const held = real === void 0 ? void 0 : grantedLabel(real.permissions.includes(name));
+		grants.push({
+			set: current !== void 0,
+			node: row({
+				key: `p:${name}`,
+				name,
+				set: current !== void 0
+			}, choices(name, [LAYER_COPY.granted, LAYER_COPY.takenAway], {
+				set: current,
+				real: held
+			}, pick))
+		});
+	}
+	const flags = state.flags.map((flag) => ({
+		set: flag.set !== void 0,
+		node: flagRow(flag, client)
+	}));
+	return createElement("div", {
+		className: "mk-mock-layers",
+		ref: panel
+	}, rows.length === 0 ? null : section(LAYER_COPY.shownAs, rows), grants.length === 0 ? null : createElement(Fold, {
+		title: LAYER_COPY.permissions,
+		rows: grants
+	}), flags.length === 0 ? null : createElement(Fold, {
+		title: LAYER_COPY.flags,
+		rows: flags
+	}));
+}
+function Fold(props) {
+	const [open, setOpen] = useState(false);
+	const { rows, title } = props;
+	const shown = open ? rows : rows.filter((folded) => folded.set);
+	return createElement("section", { "aria-label": title }, createElement("button", {
+		type: "button",
+		className: "mk-mock-route mk-mock-fold",
+		"aria-expanded": open,
+		onClick: () => setOpen(!open)
+	}, `${title} · ${String(rows.length)}`, createElement(ChevronIcon, { size: 11 })), shown.length === 0 ? null : createElement("ul", { className: "mk-mock-calls" }, shown.map((folded) => folded.node)));
+}
+function useShowTaken(ref, request) {
+	useEffect(() => {
+		const panel = ref.current;
+		if (request === void 0 || panel === null) return;
+		const set = panel.querySelectorAll("[data-mk-mocked=\"true\"]");
+		const still = panel.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)");
+		set[set.length - 1]?.scrollIntoView({
+			block: "nearest",
+			behavior: still?.matches ? "instant" : "smooth"
+		});
+	}, [ref, request]);
+}
+function LayerBanner(props) {
+	const { active, writes } = props.state;
+	const who = describeIdentity(active?.as);
+	const flags = Object.keys(active?.flags ?? {}).length;
+	const said = [
+		who === void 0 ? "" : `Showing as ${who}. ${LAYER_COPY.serverActs}`,
+		flags === 0 ? "" : `${plural(flags, "flag")} set.`,
+		who === void 0 || writes === 0 ? "" : `${plural(writes, "write")} reached the server as you.`
+	].filter(Boolean);
+	return said.length === 0 ? null : createElement("span", { className: "mk-mock-banner-as" }, said.join(" "));
+}
+function flagRow(flag, client) {
+	const pick = (next) => client.setFlag(flag.key, next);
+	const values = flag.type === "boolean" ? [true, false] : flag.variants ?? [];
+	const title = flag.seen ? `${LAYER_COPY.realValue}: ${JSON.stringify(flag.value)}` : `${flag.key}: ${LAYER_COPY.notEvaluated}`;
+	const labels = values.map(valueLabel);
+	const current = flag.set === void 0 ? void 0 : valueLabel(flag.set);
+	const real = flag.seen && flag.value !== void 0 ? valueLabel(flag.value) : void 0;
+	const control = values.length === 0 ? createElement("span", { className: "mk-mock-rung" }, current ?? valueLabel(flag.value ?? null)) : choices(flag.key, labels, {
+		set: current,
+		real
+	}, (label) => pick(values[labels.indexOf(label ?? "")] ?? void 0));
+	return row({
+		key: `f:${flag.key}`,
+		name: flag.key,
+		set: current !== void 0,
+		title
+	}, control);
+}
+function valueLabel(value) {
+	if (value === true) return LAYER_COPY.on;
+	if (value === false) return LAYER_COPY.off;
+	return typeof value === "string" ? value : JSON.stringify(value);
+}
+function grantedLabel(granted) {
+	return granted ? LAYER_COPY.granted : LAYER_COPY.takenAway;
+}
+function plural(count, word) {
+	return `${String(count)} ${word}${count === 1 ? "" : "s"}`;
+}
+function section(title, rows) {
+	return createElement("section", {
+		key: title,
+		"aria-label": title
+	}, createElement("p", { className: "mk-mock-route" }, title), createElement("ul", { className: "mk-mock-calls" }, rows));
+}
+function row(label, control) {
+	const { key, name, prose, set, title } = label;
+	return createElement("li", {
+		key,
+		className: "mk-mock-call",
+		"data-mk-mocked": String(set),
+		title: title ?? name
+	}, createElement("span", { className: prose ? "mk-mock-name" : "mk-mock-name mk-mono" }, name), control);
+}
+function choices(label, options, choice, pick) {
+	const shown = choice.set ?? choice.real;
+	return createElement("div", {
+		className: "mk-mock-states",
+		role: "radiogroup",
+		"aria-label": label
+	}, options.map((option) => createElement("button", {
+		key: option,
+		type: "button",
+		role: "radio",
+		className: "mk-mock-state mk-press",
+		"aria-checked": option === shown,
+		onClick: () => pick(option === choice.set || option === choice.real ? void 0 : option)
+	}, option === choice.real ? createElement("span", {
+		className: "mk-mock-dot",
+		"aria-hidden": true
+	}) : null, option)));
+}
+//#endregion
+export { LAYER_COPY, LayerBanner, Layers };