@weasel-js/ui 1.6.0 → 1.7.0

package/dist/chunks/BandEditor-Dd0egAgE.js

@@ -0,0 +1,292 @@
+import { t as e } from "./snap-DRjbOiG9.js";
+import { openPointerSession as t } from "@weasel-js/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Fragment as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { amount as l, decimal as u, qty as d, retag as f } from "@weasel-js/quantity";
+var p = {
+	root: "_root_1muzo_1",
+	label: "_label_1muzo_11",
+	ruler: "_ruler_1muzo_19",
+	tick: "_tick_1muzo_25",
+	tickLabel: "_tickLabel_1muzo_35",
+	bands: "_bands_1muzo_45",
+	band: "_band_1muzo_45",
+	selected: "_selected_1muzo_92",
+	bandContent: "_bandContent_1muzo_99",
+	bandGhost: "_bandGhost_1muzo_107",
+	seamGhost: "_seamGhost_1muzo_118",
+	seam: "_seam_1muzo_118"
+};
+//#endregion
+//#region src/components/BandEditor/scale.ts
+function m(e) {
+	return e < 0 ? 0 : e > 1 ? 1 : e;
+}
+var h = {
+	toUnit: (e, t, n) => n === t ? 0 : (e - t) / (n - t),
+	fromUnit: (e, t, n) => t + e * (n - t)
+}, g = {
+	toUnit: (e, t, n) => {
+		let r = Math.log(t), i = Math.log(n);
+		return i === r ? 0 : (Math.log(e) - r) / (i - r);
+	},
+	fromUnit: (e, t, n) => {
+		let r = Math.log(t);
+		return Math.exp(r + e * (Math.log(n) - r));
+	}
+}, _ = !1;
+function v() {
+	return typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
+}
+function y(e, t) {
+	let n = e === void 0 || e === "log" ? g : e === "linear" ? h : e;
+	return n !== g || t > 0 ? n : (v() && !_ && (_ = !0, console.warn(`BandEditor: a log scale needs min > 0, but min is ${t}. Falling back to a linear scale. Pass scale="linear" to silence this.`)), h);
+}
+//#endregion
+//#region src/components/BandEditor/bands.ts
+function b(e, t) {
+	let n = e.map((e) => ({ ...e }));
+	return n.length > 0 && (n[0].from = t), n;
+}
+function x(e, t, n, r) {
+	return [t === 0 ? n : e[t].from, t === e.length - 1 ? r : e[t + 1].from];
+}
+function S(e, t, n, r) {
+	return [t === 0 ? n : e[t].from, t + 2 <= e.length - 1 ? e[t + 2].from : r];
+}
+function C(e, t, n, r, i) {
+	let [a, o] = S(e, t, r, i);
+	return Math.max(a, Math.min(o, n));
+}
+function w(e, t, n) {
+	if (e[t + 1] === void 0 || e[t + 1].from === n) return e;
+	let r = e.map((e) => ({ ...e }));
+	return r[t + 1].from = n, r;
+}
+function ee(e, t, n, r) {
+	let i = e.map((e, i) => i === 0 ? 0 : m(t.toUnit(e.from, n, r)));
+	return i.push(1), i;
+}
+function te(e, t, n) {
+	let r = t === 0, i = t === e.length - 2;
+	if (r || i) return 0;
+	let a = e[t - 1] - e[t], o = e[t + 2] - e[t + 1];
+	return Math.max(a, Math.min(o, n));
+}
+function ne(e, t, n, r) {
+	let i = e.map((e) => ({ ...e }));
+	return i[t].from = n, i[t + 1] !== void 0 && (i[t + 1].from = r), i;
+}
+function re(e, t, n, r, i) {
+	if (e.length === 0 || t <= n || t >= r) return e;
+	let a = -1;
+	for (let i = 0; i < e.length; i++) {
+		let [o, s] = x(e, i, n, r);
+		if (t > o && t < s) {
+			a = i;
+			break;
+		}
+	}
+	if (a < 0) return e;
+	let o = e.map((e) => ({ ...e }));
+	return o.splice(a + 1, 0, {
+		from: t,
+		data: i(t, e[a].data)
+	}), o;
+}
+function ie(e, t) {
+	return t <= 0 || t >= e.length ? e : e.filter((e, n) => n !== t).map((e) => ({ ...e }));
+}
+//#endregion
+//#region src/components/BandEditor/BandEditor.tsx
+var T = u();
+function E(e) {
+	return typeof e.from == "number" ? e : {
+		from: l(e.from),
+		data: e.data
+	};
+}
+function D(e, t) {
+	let n = e.find((e) => typeof e.from != "number");
+	return n ? t.map((r, i) => {
+		let a = (t.length === e.length ? e[i] : e.find((e) => e.data === r.data)) ?? n;
+		return {
+			from: f(a.from, r.from),
+			data: r.data
+		};
+	}) : t;
+}
+var O = .01;
+function k(e) {
+	return `${m(e) * 100}%`;
+}
+function A(e, t) {
+	return t;
+}
+function ae(e) {
+	if (!(e instanceof HTMLElement)) return !1;
+	if (e.isContentEditable) return !0;
+	let t = e.tagName;
+	return t === "INPUT" || t === "TEXTAREA" || t === "SELECT";
+}
+function j(l) {
+	let { value: u, display: f = T, min: h, max: g, scale: _, ticks: v, renderBand: j, selectedIndex: M, onSelect: N, label: P, className: F } = l, I = l.snap ?? !0, oe = l.splitBand ?? A, L = s(null), R = s(null);
+	a(() => () => {
+		R.current?.cancel();
+	}, []);
+	let z = o(), [B, V] = c(null), H = u.map(E), U = (e) => D(u, e), W = l.onInput && ((e) => l.onInput?.(U(e))), G = (e) => l.onChange(U(e)), K = b(H, h), q = B?.bands ?? K, J = U(q), Y = y(_, h), X = (e) => m(Y.toUnit(e, h, g)), Z = (e) => Y.fromUnit(m(e), h, g), se = () => L.current?.getBoundingClientRect().width ?? 0, Q = (e) => {
+		let t = L.current?.getBoundingClientRect();
+		return !t || t.width === 0 ? 0 : m((e - t.left) / t.width);
+	}, ce = (t, n) => {
+		if (!I || n || !v || v.length === 0) return t;
+		let r = se();
+		return r === 0 ? t : e(t, v.map((e) => X(e.at)), 6 / r);
+	}, $ = (e, n, r) => {
+		R.current?.cancel(), R.current = t(e.currentTarget, e, {
+			onMove: n,
+			onEnd: () => {
+				R.current = null, V(null), r();
+			},
+			onCancel: () => {
+				R.current = null, V(null);
+			}
+		}, { capture: !1 });
+	}, le = (e) => (t) => {
+		if (typeof t.button == "number" && t.button > 0) return;
+		t.preventDefault(), t.stopPropagation();
+		let n = K, r = null;
+		$(t, (t) => {
+			let i = C(n, e, Z(ce(Q(t.clientX), t.altKey)), h, g);
+			r = w(n, e, i), V({
+				bands: r,
+				ghost: { seam: e }
+			}), W?.(r);
+		}, () => {
+			r && G(r);
+		});
+	}, ue = (e) => (t) => {
+		let [n, r] = S(K, e, h, g), i;
+		if (t.key === "Home") i = n;
+		else if (t.key === "End") i = r;
+		else {
+			let n = 0;
+			if (t.key === "ArrowRight" || t.key === "ArrowUp") n = t.shiftKey ? O * 10 : O;
+			else if (t.key === "ArrowLeft" || t.key === "ArrowDown") n = t.shiftKey ? -.1 : -.01;
+			else return;
+			i = Z(X(K[e + 1].from) + n);
+		}
+		t.preventDefault();
+		let a = w(K, e, C(K, e, i, h, g));
+		a !== K && G(a);
+	}, de = (e) => (t) => {
+		if (typeof t.button == "number" && t.button > 0 || (e !== M && N?.(e), e === 0 || e === K.length - 1)) return;
+		let n = K, r = ee(n, Y, h, g), i = Q(t.clientX), a = null;
+		$(t, (t) => {
+			let o = te(r, e, Q(t.clientX) - i);
+			a = ne(n, e, Z(r[e] + o), Z(r[e + 1] + o)), V({
+				bands: a,
+				ghost: { band: e }
+			}), W?.(a);
+		}, () => {
+			a && G(a);
+		});
+	}, fe = (e) => () => {
+		e !== M && N?.(e);
+	};
+	return /* @__PURE__ */ r("div", {
+		className: [p.root, F].filter(Boolean).join(" "),
+		role: "group",
+		"aria-label": typeof P == "string" ? P : void 0,
+		"aria-labelledby": P !== void 0 && typeof P != "string" ? z : void 0,
+		onKeyDown: (e) => {
+			if (e.key !== "x" && e.key !== "Delete" || e.metaKey || e.ctrlKey || e.altKey || ae(e.target) || M == null) return;
+			let t = ie(K, M);
+			t !== K && (e.preventDefault(), G(t), N?.(M - 1));
+		},
+		children: [
+			P !== void 0 && /* @__PURE__ */ n("div", {
+				id: z,
+				className: p.label,
+				children: P
+			}),
+			/* @__PURE__ */ n("div", {
+				className: p.ruler,
+				ref: L,
+				"data-band-ruler": "",
+				onPointerDown: (e) => {
+					if (typeof e.button == "number" && e.button > 0) return;
+					e.preventDefault();
+					let t = re(K, Z(Q(e.clientX)), h, g, oe);
+					t !== K && G(t);
+				},
+				children: v?.map((e, t) => /* @__PURE__ */ n("span", {
+					className: p.tick,
+					"data-tick-at": e.at,
+					style: { "--be-at": k(X(e.at)) },
+					children: (e.label !== void 0 || l.display !== void 0) && /* @__PURE__ */ n("span", {
+						className: p.tickLabel,
+						children: e.label ?? d(e.at, l.display).text
+					})
+				}, t))
+			}),
+			/* @__PURE__ */ r("div", {
+				className: p.bands,
+				children: [
+					q.map((e, t) => {
+						let [a, o] = x(q, t, h, g), s = M === t;
+						return /* @__PURE__ */ r(i, { children: [/* @__PURE__ */ n("button", {
+							type: "button",
+							className: [p.band, s ? p.selected : null].filter(Boolean).join(" "),
+							style: {
+								"--be-from": k(X(a)),
+								"--be-to": k(X(o))
+							},
+							"aria-label": `Band ${t + 1}`,
+							"aria-pressed": s,
+							"data-band-index": t,
+							onPointerDown: de(t),
+							onFocus: fe(t),
+							children: /* @__PURE__ */ n("span", {
+								className: p.bandContent,
+								children: j?.(J[t], t)
+							})
+						}), t < q.length - 1 && /* @__PURE__ */ n("div", {
+							role: "slider",
+							tabIndex: 0,
+							className: p.seam,
+							style: { "--be-at": k(X(q[t + 1].from)) },
+							"aria-label": `Seam ${t + 1}`,
+							"aria-orientation": "horizontal",
+							"aria-valuemin": S(q, t, h, g)[0],
+							"aria-valuemax": S(q, t, h, g)[1],
+							"aria-valuenow": q[t + 1].from,
+							"aria-valuetext": d(J[t + 1].from, f).spoken,
+							"data-seam-index": t,
+							onPointerDown: le(t),
+							onKeyDown: ue(t)
+						})] }, t);
+					}),
+					B && "band" in B.ghost && /* @__PURE__ */ n("div", {
+						className: p.bandGhost,
+						"data-band-ghost": "",
+						"aria-hidden": "true",
+						style: {
+							"--be-from": k(X(x(K, B.ghost.band, h, g)[0])),
+							"--be-to": k(X(x(K, B.ghost.band, h, g)[1]))
+						}
+					}),
+					B && "seam" in B.ghost && /* @__PURE__ */ n("div", {
+						className: p.seamGhost,
+						"data-band-ghost": "",
+						"aria-hidden": "true",
+						style: { "--be-at": k(X(K[B.ghost.seam + 1].from)) }
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { h as n, g as r, j as t };
+
+//# sourceMappingURL=BandEditor-Dd0egAgE.js.map

package/dist/chunks/BandEditor-Dd0egAgE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BandEditor-Dd0egAgE.js","names":["s","Fragment","snapToNearest","Fragment$1","BandEditor_module_default","clamp01","u","linearScale","max","min","value","unit","logScale","lo","hi","warnedNonPositiveMin","isDev","resolveScale","requested","scale","normalizeBands","bands","b","bandBounds","index","seamBounds","clampSeamTo","to","setSeam","next","unitEdges","edges","clampBandShift","isFirst","isLast","shift","moveBandEdges","from","splitBands","at","makeData","mergeBand","i","SEAM_DISPLAY","decimal","untag","band","amount","retagBands","firstTagged","input","source","retag","KEY_STEP","pct","keepData","isTextEntry","target","tag","BandEditor","tagged","props","snap","splitBand","trackRef","useRef","sessionRef","labelId","useId","draft","setDraft","useState","retagged","onInput","onChange","committed","shown","sc","toUnit","v","fromUnit","trackWidth","unitAt","rect","clientX","snapped","altKey","ticks","width","tick","drag","openPointerSession","down","onEnd","onSeamPointerDown","e","base","latest","ev","onSeamKeyDown","delta","onBandPointerDown","selectedIndex","onSelect","startUnit","onBandFocus","className","label","qty","isSelected","renderBand","display"],"sources":["../../src/components/BandEditor/BandEditor.module.css","../../src/components/BandEditor/scale.ts","../../src/components/BandEditor/bands.ts","../../src/components/BandEditor/BandEditor.tsx"],"sourcesContent":[".root {\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n}\n\n.label {\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui);\n  color: var(--wzl-fg-muted);\n}\n\n/* The ruler carries the ticks and is the split affordance: a click anywhere\n * on it divides the band underneath. The band strip below owns selection and\n * body drags, so neither gesture has to guess which the pointer meant. */\n.ruler {\n  position: relative;\n  height: var(--be-ruler-height, 20px);\n  cursor: crosshair;\n}\n\n.tick {\n  position: absolute;\n  left: var(--be-at);\n  bottom: 0;\n  width: 1px;\n  height: 6px;\n  background: var(--wzl-fg-subtle);\n  pointer-events: none;\n}\n\n.tickLabel {\n  position: absolute;\n  bottom: 7px;\n  left: 0;\n  transform: translateX(-50%);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs) / var(--wzl-leading-tight) var(--wzl-font-mono);\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.bands {\n  position: relative;\n  height: var(--be-band-height, 34px);\n}\n\n.band {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--be-from);\n  width: calc(var(--be-to) - var(--be-from));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 var(--wzl-space-2);\n  margin: 0;\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui);\n  cursor: grab;\n}\n\n.band:hover {\n  background: var(--wzl-surface-hover);\n}\n\n.band:active {\n  cursor: grabbing;\n}\n\n.band:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n/* First and last bands are pinned to `min` / `max`, so their bodies do not\n * translate — the cursor should not promise otherwise. */\n.band:first-of-type,\n.band:last-of-type {\n  cursor: default;\n}\n\n/* Accent mixed toward transparent rather than a flat token, so the tint\n   reads over whatever surface the consumer's theme puts behind it. */\n.selected {\n  background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n  border-color: var(--wzl-accent);\n  box-shadow: inset 0 0 0 1px var(--wzl-accent);\n  color: var(--wzl-fg);\n}\n\n.bandContent {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n/* Where a dragged band or seam started, held until the drag ends. */\n.bandGhost {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--be-from);\n  width: calc(var(--be-to) - var(--be-from));\n  border: 1px dashed var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  pointer-events: none;\n}\n\n.seamGhost {\n  position: absolute;\n  left: var(--be-at);\n  top: -3px;\n  bottom: -3px;\n  width: 0;\n  border-left: 1px dashed var(--wzl-border-strong);\n  pointer-events: none;\n}\n\n/* Wider than the line it draws: a 1px seam is unhittable. */\n.seam {\n  position: absolute;\n  left: var(--be-at);\n  top: -3px;\n  bottom: -3px;\n  width: 11px;\n  margin-left: -5px;\n  z-index: 1;\n  cursor: ew-resize;\n  background: none;\n  border: none;\n}\n\n.seam::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 5px;\n  width: 1px;\n  background: var(--wzl-border-strong);\n}\n\n.seam:hover::before,\n.seam:focus-visible::before {\n  background: var(--wzl-accent);\n  width: 2px;\n}\n\n.seam:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 0;\n  border-radius: var(--wzl-radius-sm);\n}\n","/** Maps a domain value onto its position along the track, and back. */\nexport interface BandScale {\n  /** Domain → position in [0,1]. Must be monotonic increasing. */\n  toUnit(value: number, min: number, max: number): number;\n  /** Inverse of `toUnit`. */\n  fromUnit(unit: number, min: number, max: number): number;\n}\n\nexport function clamp01(u: number): number {\n  return u < 0 ? 0 : u > 1 ? 1 : u;\n}\n\n/** Even domain steps take even track steps. */\nexport const linearScale: BandScale = {\n  toUnit: (value, min, max) => (max === min ? 0 : (value - min) / (max - min)),\n  fromUnit: (unit, min, max) => min + unit * (max - min),\n};\n\n/** Even *ratios* take even track steps. Requires `min > 0`. */\nexport const logScale: BandScale = {\n  toUnit: (value, min, max) => {\n    const lo = Math.log(min);\n    const hi = Math.log(max);\n    return hi === lo ? 0 : (Math.log(value) - lo) / (hi - lo);\n  },\n  fromUnit: (unit, min, max) => {\n    const lo = Math.log(min);\n    return Math.exp(lo + unit * (Math.log(max) - lo));\n  },\n};\n\nlet warnedNonPositiveMin = false;\n\nfunction isDev(): boolean {\n  return typeof process !== 'undefined' ? process.env.NODE_ENV !== 'production' : true;\n}\n\n/**\n * Resolves the `scale` prop, substituting `linearScale` for a `logScale`\n * that `min` would send to `NaN`.\n */\nexport function resolveScale(\n  scale: 'linear' | 'log' | BandScale | undefined,\n  min: number,\n): BandScale {\n  const requested =\n    scale === undefined || scale === 'log'\n      ? logScale\n      : scale === 'linear'\n        ? linearScale\n        : scale;\n\n  if (requested !== logScale || min > 0) return requested;\n\n  if (isDev() && !warnedNonPositiveMin) {\n    warnedNonPositiveMin = true;\n    console.warn(\n      `BandEditor: a log scale needs min > 0, but min is ${min}. Falling back to a linear scale. ` +\n        `Pass scale=\"linear\" to silence this.`,\n    );\n  }\n  return linearScale;\n}\n","import type { Quantity } from '@weasel-js/quantity';\nimport type { BandScale } from './scale';\nimport { clamp01 } from './scale';\n\n/** One band. `from` may be a tagged quantity, which keeps its display and\n *  unit through every edit: see `BandEditor`. */\nexport interface Band<T, F extends Quantity = number> {\n  /** Domain value where this band starts. The first band's is normalized to `min`. */\n  from: F;\n  data: T;\n}\n\n/**\n * A band list covers `[min, max]` exactly: N bands, N−1 interior seams, no\n * gaps and no overlaps. Seam *k* is `bands[k + 1].from`, and lives between\n * `bands[k].from` and the start of the band after next (or `max`).\n *\n * Every function here preserves that. Each returns the array it was given\n * when the edit would be a no-op, so callers can skip a callback with `===`.\n */\n\n/** Pins the first band's start to `min`; leaves the rest alone. */\nexport function normalizeBands<T>(value: readonly Band<T>[], min: number): Band<T>[] {\n  const bands = value.map((b) => ({ ...b }));\n  if (bands.length > 0) bands[0].from = min;\n  return bands;\n}\n\n/** `[from, to]` of band `index` in domain space. */\nexport function bandBounds<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  min: number,\n  max: number,\n): [number, number] {\n  const from = index === 0 ? min : bands[index].from;\n  const to = index === bands.length - 1 ? max : bands[index + 1].from;\n  return [from, to];\n}\n\n/** How far seam `index` can travel before it would cross a neighbour. */\nexport function seamBounds<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  min: number,\n  max: number,\n): [number, number] {\n  const lo = index === 0 ? min : bands[index].from;\n  const hi = index + 2 <= bands.length - 1 ? bands[index + 2].from : max;\n  return [lo, hi];\n}\n\n/** Clamps a target position for seam `index` to its neighbours, inclusive. */\nexport function clampSeamTo<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  to: number,\n  min: number,\n  max: number,\n): number {\n  const [lo, hi] = seamBounds(bands, index, min, max);\n  return Math.max(lo, Math.min(hi, to));\n}\n\nexport function setSeam<T>(bands: readonly Band<T>[], index: number, to: number): Band<T>[] {\n  if (bands[index + 1] === undefined || bands[index + 1].from === to) return bands as Band<T>[];\n  const next = bands.map((b) => ({ ...b }));\n  next[index + 1].from = to;\n  return next;\n}\n\n/** Band edges as track positions: `length + 1` values from 0 to 1. */\nexport function unitEdges<T>(\n  bands: readonly Band<T>[],\n  scale: BandScale,\n  min: number,\n  max: number,\n): number[] {\n  const edges = bands.map((b, i) => (i === 0 ? 0 : clamp01(scale.toUnit(b.from, min, max))));\n  edges.push(1);\n  return edges;\n}\n\n/**\n * Largest part of `shift` band `index` can take without pushing a neighbour's\n * far edge past it. Zero for the first and last band, whose outer edges are\n * `min` and `max` and do not move.\n */\nexport function clampBandShift(edges: readonly number[], index: number, shift: number): number {\n  const isFirst = index === 0;\n  const isLast = index === edges.length - 2;\n  if (isFirst || isLast) return 0;\n  const lo = edges[index - 1] - edges[index];\n  const hi = edges[index + 2] - edges[index + 1];\n  return Math.max(lo, Math.min(hi, shift));\n}\n\n/** Moves both edges of band `index`, which is the same as moving two seams. */\nexport function moveBandEdges<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  from: number,\n  to: number,\n): Band<T>[] {\n  const next = bands.map((b) => ({ ...b }));\n  next[index].from = from;\n  if (next[index + 1] !== undefined) next[index + 1].from = to;\n  return next;\n}\n\n/**\n * Splits the band containing `at` in two, the new band starting there.\n * A position already on a seam or on `min` / `max` splits nothing.\n */\nexport function splitBands<T>(\n  bands: readonly Band<T>[],\n  at: number,\n  min: number,\n  max: number,\n  makeData: (at: number, from: T) => T,\n): Band<T>[] {\n  if (bands.length === 0 || at <= min || at >= max) return bands as Band<T>[];\n  let index = -1;\n  for (let i = 0; i < bands.length; i++) {\n    const [from, to] = bandBounds(bands, i, min, max);\n    if (at > from && at < to) {\n      index = i;\n      break;\n    }\n  }\n  if (index < 0) return bands as Band<T>[];\n  const next = bands.map((b) => ({ ...b }));\n  next.splice(index + 1, 0, { from: at, data: makeData(at, bands[index].data) });\n  return next;\n}\n\n/**\n * Merges band `index` into its left neighbour, which keeps its payload and\n * absorbs the span. The first band has no left neighbour and cannot be\n * merged away — a partition always has at least one part.\n */\nexport function mergeBand<T>(bands: readonly Band<T>[], index: number): Band<T>[] {\n  if (index <= 0 || index >= bands.length) return bands as Band<T>[];\n  return bands.filter((_, i) => i !== index).map((b) => ({ ...b }));\n}\n","import {\n  Fragment,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport { amount, decimal, qty, retag, type Display, type Quantity } from '@weasel-js/quantity';\nimport s from './BandEditor.module.css';\nimport { SNAP_RADIUS_PX, snapToNearest } from '../../snap';\nimport { clamp01, resolveScale, type BandScale } from './scale';\nimport {\n  bandBounds,\n  clampBandShift,\n  clampSeamTo,\n  mergeBand,\n  moveBandEdges,\n  normalizeBands,\n  seamBounds,\n  setSeam,\n  splitBands,\n  unitEdges,\n  type Band,\n} from './bands';\n\nexport type { Band, BandScale };\n\nexport interface BandEditorProps<T, F extends Quantity = number> {\n  /** Ascending by `from`. `value[0].from` is normalized to `min` on read. A\n   *  tagged `from` stays tagged through every edit, with its display and unit. */\n  value: Band<T, F>[];\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: Band<T, F>[]) => void;\n  /** Committed at gesture end: one call per gesture. */\n  onChange: (next: Band<T, F>[]) => void;\n  min: number;\n  max: number;\n  /** Default `'log'`. */\n  scale?: 'linear' | 'log' | BandScale;\n  /** A tick with no `label` of its own is labeled through `display`, when given. */\n  ticks?: { at: number; label?: ReactNode }[];\n  /**\n   * How a seam's value shows and is spoken — `fraction()` makes a seam at\n   * 1/12 announce `1 over 12` rather than `0.08333333333333333`. A tagged\n   * `from` uses its own display instead. Default: three decimals.\n   */\n  display?: Display;\n  /** Snap a dragged seam to a tick within ~6px. Default true; `alt` defeats it per-drag. */\n  snap?: boolean;\n  renderBand?: (band: Band<T, F>, index: number) => ReactNode;\n  selectedIndex?: number | null;\n  onSelect?: (index: number) => void;\n  /** Payload for a band split off an existing one. Default duplicates `from`. */\n  splitBand?: (at: number, from: T) => T;\n  label?: ReactNode;\n  className?: string;\n}\n\n/** A drag under way: the bands as the pointer has them, and which edges it took from where. */\ntype Draft<T> = { bands: Band<T>[]; ghost: { seam: number } | { band: number } };\n\nconst SEAM_DISPLAY = decimal();\n\nfunction untag<T, F extends Quantity>(band: Band<T, F>): Band<T> {\n  return typeof band.from === 'number' ? (band as Band<T>) : { from: amount(band.from), data: band.data };\n}\n\n/**\n * `next` with each `from` in the shape the consumer gave it. A band keeps the\n * tag of the band at its index when the count is unchanged; after a split or\n * a merge it takes the tag of the input band carrying the same payload, else\n * the first tagged one — a split band inherits its parent's presentation.\n */\nfunction retagBands<T, F extends Quantity>(input: readonly Band<T, F>[], next: readonly Band<T>[]): Band<T, F>[] {\n  const firstTagged = input.find((b) => typeof b.from !== 'number');\n  if (!firstTagged) return next as Band<T, F>[];\n  return next.map((band, i) => {\n    const source =\n      (next.length === input.length ? input[i] : input.find((b) => b.data === band.data)) ?? firstTagged;\n    return { from: retag(source.from, band.from), data: band.data };\n  });\n}\n\n/** One arrow-key step, as a fraction of the track. */\nconst KEY_STEP = 0.01;\n\nfunction pct(unit: number): string {\n  return `${clamp01(unit) * 100}%`;\n}\n\nfunction keepData<T>(_at: number, from: T): T {\n  return from;\n}\n\nfunction isTextEntry(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n  const tag = target.tagName;\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';\n}\n\n/**\n * Divides a numeric axis into contiguous bands and lets you drag the seams\n * between them. Each band carries a payload the consumer supplies and\n * renders through `renderBand`; the control itself knows nothing about what\n * a band means.\n *\n * The axis is always fully covered — N bands, N−1 interior seams, no gaps and\n * no overlaps — so editing is editing a sorted list of seam positions. Seams\n * clamp at their neighbours rather than crossing, which means a drag can\n * never destroy a band: removal is only ever the explicit `x` / `Delete`\n * merge. The first band is doubly exceptional, its left edge pinned to `min`\n * and its body immovable, and it has no left neighbour to merge into.\n *\n * | Gesture | Effect |\n * |---|---|\n * | drag a seam | resize the two bands either side |\n * | drag a band body | move both its seams, preserving its span |\n * | click the ruler | split the band under the pointer |\n * | `x` / `Delete` | merge the selected band into its left neighbour |\n * | click a band | select it |\n * | `←` `→` on a focused seam | move it by one step; `shift` for ten |\n *\n * `scale` defaults to `'log'`, because the interesting part of a width axis\n * is usually its narrow end.\n */\nexport function BandEditor<T, F extends Quantity = number>(props: BandEditorProps<T, F>): ReactElement {\n  const {\n    value: tagged,\n    display = SEAM_DISPLAY,\n    min,\n    max,\n    scale,\n    ticks,\n    renderBand,\n    selectedIndex,\n    onSelect,\n    label,\n    className,\n  } = props;\n  const snap = props.snap ?? true;\n  const splitBand = props.splitBand ?? keepData;\n\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const sessionRef = useRef<PointerSession | null>(null);\n  useEffect(() => () => { sessionRef.current?.cancel(); }, []);\n  const labelId = useId();\n  const [draft, setDraft] = useState<Draft<T> | null>(null);\n  const value = tagged.map(untag);\n  const retagged = (next: Band<T>[]): Band<T, F>[] => retagBands(tagged, next);\n  const onInput = props.onInput && ((next: Band<T>[]) => props.onInput?.(retagged(next)));\n  const onChange = (next: Band<T>[]) => props.onChange(retagged(next));\n  const committed = normalizeBands(value, min);\n  // Drawn from the drag while one is under way, so the control moves with the pointer whether or not the consumer\n  // wires `onInput`. Every edit reads `committed`.\n  const bands = draft?.bands ?? committed;\n  const shown = retagged(bands);\n  const sc = resolveScale(scale, min);\n  const toUnit = (v: number): number => clamp01(sc.toUnit(v, min, max));\n  const fromUnit = (u: number): number => sc.fromUnit(clamp01(u), min, max);\n\n  const trackWidth = (): number => trackRef.current?.getBoundingClientRect().width ?? 0;\n\n  const unitAt = (clientX: number): number => {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect || rect.width === 0) return 0;\n    return clamp01((clientX - rect.left) / rect.width);\n  };\n\n  const snapped = (unit: number, altKey: boolean): number => {\n    if (!snap || altKey || !ticks || ticks.length === 0) return unit;\n    const width = trackWidth();\n    if (width === 0) return unit;\n    return snapToNearest(unit, ticks.map((tick) => toUnit(tick.at)), SNAP_RADIUS_PX / width);\n  };\n\n  // No pointer capture: a band body is a `<button>` whose content the consumer\n  // renders, and capture would retarget pointerup and kill the click on it.\n  // A drag that ends without a release commits nothing.\n  const drag = (\n    down: ReactPointerEvent<HTMLElement>,\n    onMove: (ev: PointerEvent) => void,\n    onEnd: () => void,\n  ): void => {\n    sessionRef.current?.cancel();\n    sessionRef.current = openPointerSession(down.currentTarget, down, {\n      onMove,\n      onEnd: () => { sessionRef.current = null; setDraft(null); onEnd(); },\n      onCancel: () => { sessionRef.current = null; setDraft(null); },\n    }, { capture: false });\n  };\n\n  const onSeamPointerDown = (index: number) => (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    const base = committed;\n    let latest: Band<T>[] | null = null;\n    drag(\n      e,\n      (ev) => {\n        const to = clampSeamTo(base, index, fromUnit(snapped(unitAt(ev.clientX), ev.altKey)), min, max);\n        latest = setSeam(base, index, to);\n        setDraft({ bands: latest, ghost: { seam: index } });\n        onInput?.(latest);\n      },\n      () => {\n        if (latest) onChange(latest);\n      },\n    );\n  };\n\n  const onSeamKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    const [lo, hi] = seamBounds(committed, index, min, max);\n    let target: number;\n    if (e.key === 'Home') target = lo;\n    else if (e.key === 'End') target = hi;\n    else {\n      let delta = 0;\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n      else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = e.shiftKey ? -KEY_STEP * 10 : -KEY_STEP;\n      else return;\n      target = fromUnit(toUnit(committed[index + 1].from) + delta);\n    }\n    e.preventDefault();\n    const next = setSeam(committed, index, clampSeamTo(committed, index, target, min, max));\n    if (next !== committed) onChange(next);\n  };\n\n  const onBandPointerDown = (index: number) => (e: ReactPointerEvent<HTMLButtonElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    if (index !== selectedIndex) onSelect?.(index);\n    // The first and last bands' outer edges are `min` and `max`, which do not\n    // move, so their bodies have nothing to translate.\n    if (index === 0 || index === committed.length - 1) return;\n    const base = committed;\n    const edges = unitEdges(base, sc, min, max);\n    const startUnit = unitAt(e.clientX);\n    let latest: Band<T>[] | null = null;\n    drag(\n      e,\n      (ev) => {\n        const shift = clampBandShift(edges, index, unitAt(ev.clientX) - startUnit);\n        latest = moveBandEdges(\n          base,\n          index,\n          fromUnit(edges[index] + shift),\n          fromUnit(edges[index + 1] + shift),\n        );\n        setDraft({ bands: latest, ghost: { band: index } });\n        onInput?.(latest);\n      },\n      () => {\n        if (latest) onChange(latest);\n      },\n    );\n  };\n\n  const onBandFocus = (index: number) => (): void => {\n    if (index !== selectedIndex) onSelect?.(index);\n  };\n\n  const onTrackPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    e.preventDefault();\n    const next = splitBands(committed, fromUnit(unitAt(e.clientX)), min, max, splitBand);\n    if (next !== committed) onChange(next);\n  };\n\n  const onRootKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    if (e.key !== 'x' && e.key !== 'Delete') return;\n    // `x` is a bare letter and Cmd/Ctrl+X is cut: neither may be swallowed\n    // when the keystroke belongs to something a consumer put in a band.\n    if (e.metaKey || e.ctrlKey || e.altKey) return;\n    if (isTextEntry(e.target)) return;\n    if (selectedIndex === null || selectedIndex === undefined) return;\n    const next = mergeBand(committed, selectedIndex);\n    if (next === committed) return;\n    e.preventDefault();\n    onChange(next);\n    onSelect?.(selectedIndex - 1);\n  };\n\n  return (\n    <div\n      className={[s.root, className].filter(Boolean).join(' ')}\n      role=\"group\"\n      aria-label={typeof label === 'string' ? label : undefined}\n      aria-labelledby={label !== undefined && typeof label !== 'string' ? labelId : undefined}\n      onKeyDown={onRootKeyDown}\n    >\n      {label !== undefined && <div id={labelId} className={s.label}>{label}</div>}\n      <div className={s.ruler} ref={trackRef} data-band-ruler=\"\" onPointerDown={onTrackPointerDown}>\n        {ticks?.map((tick, i) => (\n          <span\n            key={i}\n            className={s.tick}\n            data-tick-at={tick.at}\n            style={{ '--be-at': pct(toUnit(tick.at)) } as CSSProperties}\n          >\n            {(tick.label !== undefined || props.display !== undefined) && (\n              <span className={s.tickLabel}>{tick.label ?? qty(tick.at, props.display).text}</span>\n            )}\n          </span>\n        ))}\n      </div>\n      <div className={s.bands}>\n        {bands.map((_, i) => {\n          const [from, to] = bandBounds(bands, i, min, max);\n          const isSelected = selectedIndex === i;\n          return (\n            <Fragment key={i}>\n              <button\n                type=\"button\"\n                className={[s.band, isSelected ? s.selected : null].filter(Boolean).join(' ')}\n                style={{ '--be-from': pct(toUnit(from)), '--be-to': pct(toUnit(to)) } as CSSProperties}\n                aria-label={`Band ${i + 1}`}\n                aria-pressed={isSelected}\n                data-band-index={i}\n                onPointerDown={onBandPointerDown(i)}\n                onFocus={onBandFocus(i)}\n              >\n                <span className={s.bandContent}>{renderBand?.(shown[i]!, i)}</span>\n              </button>\n              {i < bands.length - 1 && (\n                <div\n                  role=\"slider\"\n                  tabIndex={0}\n                  className={s.seam}\n                  style={{ '--be-at': pct(toUnit(bands[i + 1].from)) } as CSSProperties}\n                  aria-label={`Seam ${i + 1}`}\n                  aria-orientation=\"horizontal\"\n                  aria-valuemin={seamBounds(bands, i, min, max)[0]}\n                  aria-valuemax={seamBounds(bands, i, min, max)[1]}\n                  aria-valuenow={bands[i + 1].from}\n                  aria-valuetext={qty(shown[i + 1]!.from, display).spoken}\n                  data-seam-index={i}\n                  onPointerDown={onSeamPointerDown(i)}\n                  onKeyDown={onSeamKeyDown(i)}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n        {draft && 'band' in draft.ghost && (\n          <div\n            className={s.bandGhost}\n            data-band-ghost=\"\"\n            aria-hidden=\"true\"\n            style={{\n              '--be-from': pct(toUnit(bandBounds(committed, draft.ghost.band, min, max)[0])),\n              '--be-to': pct(toUnit(bandBounds(committed, draft.ghost.band, min, max)[1])),\n            } as CSSProperties}\n          />\n        )}\n        {draft && 'seam' in draft.ghost && (\n          <div\n            className={s.seamGhost}\n            data-band-ghost=\"\"\n            aria-hidden=\"true\"\n            style={{ '--be-at': pct(toUnit(committed[draft.ghost.seam + 1].from)) } as CSSProperties}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Button-Dyp31jMt.js → Button-BIdXHQOx.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./stance-CarrcbbP.js";
-import { r as t, t as n } from "./segmentTooltip-CAkZlW-t.js";
+import { t as e } from "./stance-BFQpS_fL.js";
+import { r as t, t as n } from "./segmentTooltip-CStYHKzd.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { forwardRef as a } from "react";
 var o = {
@@ -108,4 +108,4 @@ var c = a(function(a, c) {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=Button-Dyp31jMt.js.map
+//# sourceMappingURL=Button-BIdXHQOx.js.map

package/dist/chunks/Button-BIdXHQOx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-BIdXHQOx.js","names":["s","useStance","segmentTooltipContent","SegmentTooltip","Button_module_default","Spinner","Button","forwardRef","props","cls","variant","size","fullWidth","pressed","iconOnly","loading","className","showLeading","leadingIcon","stanced","children","style","status","ariaLabel","trailingIcon"],"sources":["../../src/components/Button/Button.module.css","../../src/components/Button/Button.tsx"],"sourcesContent":["/* Aqua-glass button. Every visual parameter is exposed as a CSS custom\n   property so the Button Lab can override per-instance via inline style. */\n.button {\n  /* ---- Tunables (with Aqua-biased defaults) ---- */\n  /* Corner radius = 10% of the button's height (the shorter axis on every\n     realistic button shape). Using calc against --btn-height keeps the\n     corners circular rather than elliptical, which a % value would\n     otherwise produce on a wide-but-short pill. */\n  --btn-radius:       calc(var(--btn-height) * 0.1);\n  --btn-fontweight:   var(--wzl-font-weight-medium);\n  --btn-fontsize:     var(--wzl-font-size);\n  --btn-height:       var(--wzl-control-h);\n  --btn-padx:         var(--wzl-space-6);\n\n  /* Body gradient — alpha-laced top, opaque bottom. Percentages are\n     \"color-mix accent ratio\" so 45% = 45% accent + 55% transparent. */\n  --btn-top-alpha:     45%;\n  --btn-upper-alpha:   70%;\n  --btn-equator:       52%;   /* vertical position of the bright-to-deep transition */\n  --btn-equator-spread: 12%;  /* half-width of the equator transition band */\n  --btn-equator-tint:  95%;   /* accent vs white at equator */\n  --btn-base-tint:     70%;   /* accent vs black at base */\n  --btn-blur:          6px;\n  --btn-saturate:      1.3;\n\n  /* Specular gloss (::before) */\n  --btn-gloss-top:     0.42;\n  --btn-gloss-mid:     0.12;\n  --btn-gloss-bottom:  50%;   /* inset from bottom — 50% = upper hemisphere */\n\n  /* 3D shadows */\n  --btn-rim:          0.22;\n  --btn-drop-near:    0.30;\n  --btn-drop-far:     0.18;\n  --btn-inset-hi:     0.42;\n  --btn-inset-lo:     0.3;\n\n  /* Text — main shadow + a second engraving shadow you can angle.\n     `inset-x` / `inset-y` are pre-projected offsets from `inset-angle` so\n     the lab can drive them with a single slider. */\n  --btn-text-shadow:    0.35;\n  --btn-text-inset:     0.55;\n  --btn-text-inset-x:   0px;\n  --btn-text-inset-y:   1px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--wzl-space-3);\n  border: none;\n  border-radius: var(--btn-radius);\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--btn-fontweight);\n  font-style: normal;\n  font-size: var(--btn-fontsize);\n  height: var(--btn-height);\n  padding: 0 var(--btn-padx);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  isolation: isolate;\n  overflow: hidden;\n  transition: filter var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast), transform 80ms;\n}\n\n/* Specular gloss — covers the upper hemisphere of the pill with a bright\n   white sheen that fades to nothing by the equator. The single detail that\n   sells the glass-cylinder illusion. */\n.button::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom) 1px;\n  /* Top corners hug the button's outline; bottom corners are flat so the\n     gloss terminates in a straight line at the equator rather than two\n     little arcs that read as `)(` brackets at smaller radii. */\n  border-top-left-radius: var(--btn-radius);\n  border-top-right-radius: var(--btn-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.button > * {\n  position: relative;\n  z-index: 2;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---------- Sizes — set defaults for the custom props ---------- */\n\n.size_sm { --btn-height: var(--wzl-control-h-sm); --btn-padx: var(--wzl-space-4); --btn-fontsize: var(--wzl-font-size-sm); }\n.size_md { --btn-height: var(--wzl-control-h); --btn-padx: var(--wzl-space-6); --btn-fontsize: var(--wzl-font-size); }\n\n.iconOnly.size_sm { width: var(--wzl-control-h-sm); --btn-padx: 0; }\n.iconOnly.size_md { width: var(--wzl-control-h); --btn-padx: 0; }\n\n/* ---------- Variants ---------- */\n\n/* Primary: tinted aqua glass — body uses --wzl-accent. The upper / equator\n   / lower stops are positioned around --btn-equator so dragging the equator\n   shifts the entire transition zone as one block. */\n.variant_primary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha), transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint), white) var(--btn-equator),\n    var(--wzl-accent) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg-on-accent);\n  /* Main shadow below for legibility, then a second engraving shadow at a\n     configurable angle (defaults below) — a near-black, lower-alpha stamp\n     that sits underneath the glyphs and reads as recessed type. */\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, var(--btn-text-inset)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near)),\n    0 3px 6px rgba(0, 0, 0, var(--btn-drop-far));\n}\n\n.variant_primary:hover:not(:disabled) {\n  filter: brightness(1.08) saturate(1.06);\n}\n\n.variant_primary:active:not(:disabled) {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) 80%, black) 0%,\n    color-mix(in srgb, var(--wzl-accent) 95%, black) 50%,\n    color-mix(in srgb, var(--wzl-accent) 60%, white) 100%\n  );\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.35),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.06));\n  transform: translateY(0.5px);\n}\n.variant_primary:active::before { opacity: 0.3; }\n\n/* Secondary: neutral glass — drained of color. */\n.variant_secondary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-fg) 25%, transparent) 0%,\n    color-mix(in srgb, var(--wzl-fg) 10%, transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-surface-raised) 90%, white) var(--btn-equator),\n    var(--wzl-surface-raised) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-surface-sunken) 80%, black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.7)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, calc(var(--btn-text-inset) * 0.7));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, calc(var(--btn-inset-hi) * 0.5)),\n    inset 0 -1px 2px rgba(0, 0, 0, calc(var(--btn-inset-lo) * 0.83)),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.03)),\n    0 1px 2px rgba(0, 0, 0, calc(var(--btn-drop-near) * 0.93)),\n    0 3px 6px rgba(0, 0, 0, calc(var(--btn-drop-far) * 0.89));\n}\n\n.variant_secondary:hover:not(:disabled) { filter: brightness(1.1); }\n\n.variant_secondary:active:not(:disabled) {\n  background: linear-gradient(180deg, var(--wzl-surface-sunken) 0%, var(--wzl-surface-raised) 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.4),\n    0 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateY(0.5px);\n}\n.variant_secondary:active::before { opacity: 0.2; }\n\n/* Ghost: silhouette only — no glass body, no gloss. */\n.variant_ghost {\n  background: transparent;\n  color: var(--wzl-fg);\n  box-shadow: none;\n}\n.variant_ghost::before { display: none; }\n\n.variant_ghost:hover:not(:disabled):not(.pressed) {\n  background: var(--wzl-surface-hover);\n}\n\n.variant_ghost:active:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n}\n\n/* Link: text only, sized by the surrounding text rather than the control scale. */\n.variant_link {\n  display: inline;\n  height: auto;\n  padding: 0;\n  border-radius: var(--wzl-radius-sm);\n  background: transparent;\n  box-shadow: none;\n  text-shadow: none;\n  font: inherit;\n  line-height: inherit;\n  text-align: start;\n  overflow: visible;\n  /* A peer tone or a stance's accent paints over the status. */\n  color: var(--_s-accent, var(--btn-link-fg, var(--wzl-accent-fg)));\n  text-decoration: underline;\n  text-underline-offset: 0.15em;\n}\n.variant_link[data-status='neutral'] { --btn-link-fg: var(--wzl-fg); }\n.variant_link[data-status='muted']   { --btn-link-fg: var(--wzl-fg-muted); }\n.variant_link[data-status='accent']  { --btn-link-fg: var(--wzl-accent-fg); }\n.variant_link[data-status='success'] { --btn-link-fg: var(--wzl-success); }\n.variant_link[data-status='warn']    { --btn-link-fg: var(--wzl-warning); }\n.variant_link[data-status='danger']  { --btn-link-fg: var(--wzl-danger); }\n\n.variant_link::before { display: none; }\n.variant_link .label { display: inline; }\n\n.variant_link:hover:not(:disabled) {\n  text-decoration-thickness: 2px;\n}\n\n/* ---------- Modifiers ---------- */\n\n.pressed:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 18%);\n}\n\n.variant_primary.pressed:not(:disabled) { filter: brightness(0.92); }\n\n.fullWidth { width: 100%; }\n.loading .label { opacity: 0.7; }\n\n/* ---------- Slots ---------- */\n\n.iconSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.size_sm .iconSlot > svg { width: 12px; height: 12px; }\n.size_md .iconSlot > svg { width: 14px; height: 14px; }\n\n.label { display: inline-block; }\n\n/* ---------- Spinner ---------- */\n\n.spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  animation: wzl-btn-spin 0.7s linear infinite;\n}\n\n@keyframes wzl-btn-spin {\n  to { transform: rotate(360deg); }\n}\n\n/* BEGIN GENERATED stance rules: button — `npm run gen:stances`, do not edit. */\n\n.button {\n  --wzl-tone: initial;\n}\n\n.button {\n  --_s-accent: var(--wzl-tone);\n}\n\n.button[data-stance='scope'] {\n  --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n}\n\n.button[data-stance='aside'] {\n  --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n}\n\n.button[data-stance='advanced'] {\n  --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n}\n\n.button[data-stance='debug'] {\n  --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n}\n\n.button[data-stance='danger'] {\n  --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n}\n\n.button[data-stance='notice'] {\n  --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n}\n\n.button[data-stance='important'] {\n  --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n}\n\n.button[data-stance='preview'] {\n  --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n}\n\n.button[data-tone] {\n  --wzl-accent: var(--_s-accent);\n  --wzl-accent-base: var(--_s-accent);\n  --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));\n  --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));\n  --wzl-accent-hover: var(--wzl-accent-strong);\n  --wzl-accent-fg: var(--wzl-accent-strong);\n  --wzl-focus-ring: var(--wzl-accent-strong);\n}\n\n/* END GENERATED stance rules: button */\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './Button.module.css';\nimport { SegmentTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\nimport { type StanceProps, useStance } from '../stance';\n\n/** Visual weight of a button. Defaults to `secondary`. `link` drops the\n *  control box entirely and reads as a hyperlink in running text -- for an\n *  in-page navigation that is still a button, not an `<a href>`. */\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'link';\n/** Text color of a `link` button — the same set as `Code`'s statuses. */\nexport type ButtonStatus = 'neutral' | 'muted' | 'accent' | 'success' | 'warn' | 'danger';\n/** Button height and type scale. */\nexport type ButtonSize = 'sm' | 'md';\n\ntype ButtonBase = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** Text color of the `link` variant, which is `accent` unless told\n   *  otherwise. The boxed variants carry their weight in their fill and\n   *  ignore it. A peer `tone`, or a stance's accent, paints over it. */\n  status?: ButtonStatus;\n  /** A button that stays down: renders `aria-pressed` and holds the active\n   *  treatment while it is on. For a control that reports a state rather than\n   *  firing an action -- a panel toggle, a mode switch. Left off, the button\n   *  announces no pressed state at all, which is what an action button wants. */\n  pressed?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  fullWidth?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n  style?: ButtonHTMLAttributes<HTMLButtonElement>['style'];\n  children?: ReactNode;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n} & StanceProps & SegmentTooltipFields;\n\ntype ButtonRegular = ButtonBase & {\n  iconOnly?: false;\n  ariaLabel?: string;\n};\n\ntype ButtonIconOnly = ButtonBase & {\n  iconOnly: true;\n  ariaLabel: string;\n};\n\n/**\n * Props for {@link Button}. Setting `iconOnly` makes `ariaLabel` required,\n * since an icon-only button has no text for a screen reader to announce.\n */\nexport type ButtonProps = ButtonRegular | ButtonIconOnly;\n\nfunction Spinner(): ReactNode {\n  return (\n    <span className={s.spinner} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\">\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeOpacity=\"0.25\"\n        />\n        <path\n          d=\"M 8 2 A 6 6 0 0 1 14 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </span>\n  );\n}\n\n/**\n * Standard button. `loading` swaps the leading icon for a spinner, marks the\n * button `aria-busy`, and leaves the label in place; it does not disable the\n * button, so pass `disabled` too if the click should be blocked.\n *\n * `shortcut` adds a kit tooltip reading `Name (⌘S)`, named by `ariaLabel` or\n * string children, the way `ToolButton` and `ButtonBar` items show theirs;\n * `tooltip` replaces that text with any content.\n *\n * `ref` forwards to the underlying `<button>`.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {\n    variant = 'secondary',\n    size = 'md',\n    status,\n    stance,\n    tone,\n    pressed,\n    disabled,\n    loading,\n    leadingIcon,\n    trailingIcon,\n    fullWidth,\n    iconOnly,\n    ariaLabel,\n    type = 'button',\n    className,\n    style,\n    children,\n    onClick,\n    shortcut,\n    tooltip,\n  } = props;\n\n  const cls = [\n    s.button,\n    s[`variant_${variant}`],\n    s[`size_${size}`],\n    fullWidth && s.fullWidth,\n    pressed && s.pressed,\n    iconOnly && s.iconOnly,\n    loading && s.loading,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showLeading = !iconOnly && (loading || leadingIcon);\n  const stanced = useStance({ stance, tone });\n\n  return (\n    <SegmentTooltip\n      content={segmentTooltipContent({ tooltip, shortcut, ariaLabel, label: children })}\n      disabled={disabled}\n    >\n      <button\n        ref={ref}\n        type={type}\n        className={cls}\n        data-stance={stanced['data-stance']}\n        data-tone={stanced['data-tone']}\n        style={stanced.style || style ? { ...stanced.style, ...style } : undefined}\n        disabled={disabled}\n        aria-busy={loading ? true : undefined}\n        aria-pressed={pressed}\n        data-status={status}\n        aria-label={ariaLabel}\n        onClick={onClick}\n      >\n        {showLeading && (\n          <span className={s.iconSlot}>{loading ? <Spinner /> : leadingIcon}</span>\n        )}\n        {iconOnly ? (\n          loading ? <Spinner /> : <span className={s.iconSlot}>{children}</span>\n        ) : (\n          children !== undefined && <span className={s.label}>{children}</span>\n        )}\n        {!iconOnly && trailingIcon && (\n          <span className={s.iconSlot}>{trailingIcon}</span>\n        )}\n      </button>\n    </SegmentTooltip>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;ACsDA,SAASK,IAAqB;CAC5B,OACE,kBAAC,QAAD;EAAM,WAAWL,EAAE;EAAS,eAAY;EACtC,UAAA,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;GAA3C,UAAA,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;GACf,CAAA,GACD,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;GACf,CAAA,CACE;;CACD,CAAA;AAEV;AAaA,IAAaM,IAASC,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EACJ,aAAU,aACV,UAAO,MACP,WACA,WACA,SACA,YACA,aACA,YACA,gBACA,iBACA,cACA,aACA,cACA,UAAO,UACP,cACA,UACA,aACA,YACA,aACA,eACEC,GAEEC,IAAM;EACVT,EAAE;EACFA,EAAE,WAAWU;EACbV,EAAE,QAAQW;EACVC,KAAaZ,EAAE;EACfa,KAAWb,EAAE;EACbc,KAAYd,EAAE;EACde,KAAWf,EAAE;EACbgB;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAELC,IAAc,CAACH,MAAaC,KAAWG,IACvCC,IAAUlB,EAAU;EAAE;EAAQ;CAAK,CAAC;CAE1C,OACE,kBAACE,GAAD;EACE,SAASD,EAAsB;GAAE;GAAS;GAAU;GAAW,OAAOkB;EAAS,CAAC;EACtE;EAEV,UAAA,kBAAC,UAAD;GACO;GACC;GACN,WAAWX;GACX,eAAaU,EAAQ;GACrB,aAAWA,EAAQ;GACnB,OAAOA,EAAQ,SAASE,IAAQ;IAAE,GAAGF,EAAQ;IAAO,GAAGE;GAAM,IAAI,KAAA;GACvD;GACV,aAAWN,IAAU,KAAO,KAAA;GAC5B,gBAAcF;GACd,eAAaS;GACb,cAAYC;GACH;GAZX,UAAA;IAcGN,KACC,kBAAC,QAAD;KAAM,WAAWjB,EAAE;KAAW,UAAAe,IAAU,kBAACV,GAAD,CAAU,CAAA,IAAIa;IAAkB,CAAA;IAEzEJ,IACCC,IAAU,kBAACV,GAAD,CAAU,CAAA,IAAI,kBAAC,QAAD;KAAM,WAAWL,EAAE;KAAW;IAAe,CAAA,IAErEoB,MAAa,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAWpB,EAAE;KAAQ;IAAe,CAAA;IAErE,CAACc,KAAYU,KACZ,kBAAC,QAAD;KAAM,WAAWxB,EAAE;KAAW,UAAAwB;IAAmB,CAAA;GAE7C;;CACM,CAAA;AAEpB,CAAC"}

package/dist/chunks/{ButtonBar-smZzFuEo.js → ButtonBar-DIQTe5GQ.js}

@@ -1,6 +1,6 @@
-import { r as e, t } from "./segmentTooltip-CAkZlW-t.js";
-import { t as n } from "./useRovingTabIndex-B4uJqiKP.js";
-import { t as r } from "./segmentedControl.module-D2nw68Yo.js";
+import { r as e, t } from "./segmentTooltip-CStYHKzd.js";
+import { t as n } from "./useRovingTabIndex-Bp_hYm_h.js";
+import { t as r } from "./segmentedControl.module-D6SzYJD7.js";
 import { jsx as i } from "react/jsx-runtime";
 import "react";
 //#region src/components/ButtonBar/ButtonBar.tsx
@@ -43,4 +43,4 @@ function a(a) {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=ButtonBar-smZzFuEo.js.map
+//# sourceMappingURL=ButtonBar-DIQTe5GQ.js.map

package/dist/chunks/ButtonBar-DIQTe5GQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBar-DIQTe5GQ.js","names":["s","segmentTooltipContent","useRovingTabIndex","segmentedControl_module_default","ButtonBar","props","fire","item","items","index","roving","style","height","rootCls","size","variant","className","ariaLabel","SegmentTooltip","i"],"sources":["../../src/components/ButtonBar/ButtonBar.tsx"],"sourcesContent":["import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from '../segmentedControl.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport { SegmentTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\n\n/**\n * One button in an {@link ButtonBar}. `value` is only a React key; the item\n * carries no selected state.\n */\nexport type ButtonBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n  onAction: () => void;\n} & SegmentTooltipFields;\n\n/** Segment height and type scale for an {@link ButtonBar}. */\nexport type ButtonBarSize = 'sm' | 'md';\n/** Visual treatment of an {@link ButtonBar}. */\nexport type ButtonBarVariant = 'default' | 'minimal';\n\n/** Props for {@link ButtonBar}. */\nexport type ButtonBarProps<V extends string | number = string> = {\n  items: readonly ButtonBarItem<V>[];\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  size?: ButtonBarSize;\n  variant?: ButtonBarVariant;\n};\n\n/**\n * Segmented strip of momentary buttons — each press fires and nothing stays\n * selected. Shares the look and the arrow-key navigation of `ToggleBar` and\n * `OptionsBar`.\n *\n * This is a plain callback bar. For buttons driven by the kit's actions\n * registry, use `ActionBar` instead.\n */\nexport function ButtonBar<V extends string | number = string>(props: ButtonBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n\n  const fire = (index: number) => {\n    const item = items[index];\n    if (item.disabled) return;\n    item.onAction();\n  };\n\n  const roving = useRovingTabIndex({ items, itemClassName: s.segment, onActivate: fire });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--wzl-tb-height' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={rootCls}\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => (\n        <SegmentTooltip key={item.value} content={segmentTooltipContent(item)} disabled={item.disabled}>\n          <button\n            type=\"button\"\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            tabIndex={roving.tabIndexFor(i)}\n            className={s.segment}\n            onClick={() => fire(i)}\n            onKeyDown={roving.onKeyDown(i)}\n          >\n            {item.label}\n          </button>\n        </SegmentTooltip>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAwCA,SAAgBI,EAA8C,GAAwC;CACpG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAYC,GAEzDC,KAAQ,MAAkB;EAC9B,IAAMC,IAAOC,EAAMC;EACnB,AAAIF,EAAK,YACTA,EAAK,SAAS;CAChB,GAEMG,IAASR,EAAkB;EAAE;EAAO,eAAeF,EAAE;EAAS,YAAYM;CAAK,CAAC,GAEhFK,IAAmCC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAGA,EAAO,IAAI,GAG9CC,IAAU;EACdb,EAAE;EACFc,KAAQd,EAAE,QAAQc;EAClBC,KAAWf,EAAE,WAAWe;EACxBC;CACF,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE1B,OACE,kBAAC,OAAD;EACE,KAAKN,EAAO;EACZ,WAAWG;EACX,MAAK;EACL,cAAYI;EACL;EAEN,UAAAT,EAAM,KAAK,GAAM,MAChB,kBAACU,GAAD;GAAiC,SAASjB,EAAsBM,CAAI;GAAG,UAAUA,EAAK;GACpF,UAAA,kBAAC,UAAD;IACE,MAAK;IACL,cAAYA,EAAK;IACjB,UAAUA,EAAK;IACf,UAAUG,EAAO,YAAYS,CAAC;IAC9B,WAAWnB,EAAE;IACb,eAAeM,EAAKa,CAAC;IACrB,WAAWT,EAAO,UAAUS,CAAC;IAE5B,UAAAZ,EAAK;GACA,CAAA;EACM,GAZKA,EAAK,KAYV,CACjB;CACE,CAAA;AAET"}

package/dist/chunks/Callout-ndW5_Bqx.js

@@ -0,0 +1,116 @@
+import { r as e } from "./portalHost-yTOVuCej.js";
+import { t } from "./stance-BFQpS_fL.js";
+import { t as n } from "./CloseButton-C2J7wVfo.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useEffect as s, useId as c, useRef as l } from "react";
+import { Dialog as u, DialogTrigger as d, Heading as f, OverlayArrow as p, Popover as m } from "react-aria-components";
+import { createPortal as h } from "react-dom";
+var g = {
+	anchor: "_anchor_w6dfg_1",
+	popover: "_popover_w6dfg_6",
+	arrow: "_arrow_w6dfg_204",
+	dialog: "_dialog_w6dfg_223",
+	header: "_header_w6dfg_230",
+	title: "_title_w6dfg_237",
+	body: "_body_w6dfg_248",
+	footer: "_footer_w6dfg_255"
+};
+//#endregion
+//#region src/components/Callout/Callout.tsx
+function _(d) {
+	let { children: _, className: v, title: y, footer: b, stance: x = "notice", tone: S, modal: C = !1, showCloseButton: w, onDismiss: T, triggerRef: E, anchorRect: D, placement: O = "top", offset: k = 12, maxHeight: A = 400, onOpenChange: j, shouldCloseOnInteractOutside: M, "aria-label": N, "aria-labelledby": P, portalContainer: F, ...I } = d, L = l(null), R = t({
+		stance: x,
+		tone: S
+	}), { anchor: z, portalProps: B } = e(F), V = w ?? !C, H = l(T);
+	H.current = T;
+	let U = l((e) => {
+		e.key === "Escape" && H.current?.();
+	}), W = l(null), G = o((e) => {
+		W.current?.removeEventListener("keydown", U.current), W.current = e, e?.addEventListener("keydown", U.current);
+	}, []), K = c(), q = D !== void 0;
+	s(() => {
+		q && typeof window < "u" && window.dispatchEvent(new Event("resize"));
+	}, [
+		q,
+		D?.x,
+		D?.y,
+		D?.width,
+		D?.height
+	]);
+	let J = C && y !== void 0 ? K : P, Y = C ? N : void 0;
+	return /* @__PURE__ */ a(r, { children: [
+		z,
+		D !== void 0 && h(/* @__PURE__ */ i("span", {
+			ref: L,
+			"data-callout-anchor": "",
+			className: g.anchor,
+			"aria-hidden": "true",
+			style: {
+				left: D.x,
+				top: D.y,
+				width: D.width,
+				height: D.height
+			}
+		}), document.body),
+		/* @__PURE__ */ a(m, {
+			...I,
+			triggerRef: D === void 0 ? E : L,
+			isNonModal: !C,
+			placement: O,
+			offset: k,
+			maxHeight: A,
+			onOpenChange: j,
+			shouldCloseOnInteractOutside: M ?? (C ? () => !1 : void 0),
+			"aria-label": Y,
+			"aria-labelledby": J,
+			className: [g.popover, v].filter(Boolean).join(" "),
+			...R,
+			"data-weasel-overlay": "",
+			...B,
+			children: [/* @__PURE__ */ i(p, {
+				className: g.arrow,
+				children: /* @__PURE__ */ i("svg", {
+					width: 12,
+					height: 12,
+					viewBox: "0 0 12 12",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ i("path", { d: "M0 0 L6 6 L12 0" })
+				})
+			}), /* @__PURE__ */ i(u, {
+				role: C ? "alertdialog" : "dialog",
+				className: g.dialog,
+				"aria-label": N,
+				"aria-labelledby": P,
+				ref: G,
+				children: ({ close: e }) => /* @__PURE__ */ a(r, { children: [
+					(y !== void 0 || V) && /* @__PURE__ */ a("header", {
+						className: g.header,
+						children: [y !== void 0 && /* @__PURE__ */ i(f, {
+							id: K,
+							slot: "title",
+							className: g.title,
+							children: y
+						}), V && /* @__PURE__ */ i(n, {
+							ariaLabel: "Close callout",
+							onClick: () => {
+								e(), j?.(!1), T?.();
+							}
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: g.body,
+						children: _
+					}),
+					b !== void 0 && /* @__PURE__ */ i("footer", {
+						className: g.footer,
+						children: b
+					})
+				] })
+			})]
+		})
+	] });
+}
+//#endregion
+export { d as n, _ as t };
+
+//# sourceMappingURL=Callout-ndW5_Bqx.js.map

package/dist/chunks/Callout-ndW5_Bqx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout-ndW5_Bqx.js","names":["_Fragment","s","RACPopover","RACDialog","useOverlayPortal","CloseButton","DialogTrigger$1","Callout_module_default","Callout","ariaLabel","ariaLabelledby","rest","props","anchorRef","useRef","stanced","useStance","portalAnchor","portalContainer","showClose","showCloseButton","modal","onDismissRef","onDismiss","escapeListener","listeningTo","dialogRef","useCallback","node","titleId","useId","hasAnchorRect","anchorRect","popoverAriaLabelledby","title","popoverAriaLabel","Fragment","createPortal","Popover","triggerRef","shouldCloseOnInteractOutside","className","portalProps","OverlayArrow","Dialog","Heading","close","onOpenChange","footer"],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n  position: fixed;\n  pointer-events: none;\n}\n\n.popover {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  background: var(--_s-fill);\n  border: var(--_s-border-width) var(--_s-border-style) var(--_s-border-color);\n  border-radius: var(--_s-radius);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: 320px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n  opacity: 0;\n}\n\n/* BEGIN GENERATED stance rules: callout — `npm run gen:stances`, do not edit. */\n\n.popover {\n  --wzl-tone: initial;\n}\n\n.popover {\n  --_s-surface: var(--wzl-surface);\n  --_s-border-color: var(--wzl-accent-strong);\n  --_s-border-style: solid;\n  --_s-border-width: 1px;\n  --_s-radius: var(--wzl-radius-md);\n  --_s-tone-mix: var(--wzl-panel-tone-mix);\n  --_s-tone: var(--wzl-tone, var(--_s-surface));\n  --_s-accent: var(--wzl-tone);\n  --_s-title-font: var(--wzl-font-ui);\n  --_s-title-weight: var(--wzl-font-weight-bold);\n  --_s-title-size: var(--wzl-font-size);\n  --_s-title-case: none;\n  --_s-title-tracking: normal;\n  --_s-title-color: var(--wzl-fg);\n}\n\n.popover[data-stance='scope'] {\n  --_s-surface: var(--wzl-stance-scope-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-scope-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-scope-border-style, solid);\n  --_s-border-width: var(--wzl-stance-scope-border-width, 1px);\n  --_s-radius: var(--wzl-stance-scope-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-scope-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-scope-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-scope-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-scope-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-scope-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-scope-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-scope-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-scope-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='aside'] {\n  --_s-surface: var(--wzl-stance-aside-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-aside-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-aside-border-style, solid);\n  --_s-border-width: var(--wzl-stance-aside-border-width, 1px);\n  --_s-radius: var(--wzl-stance-aside-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-aside-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-aside-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-aside-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-aside-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-aside-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-aside-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-aside-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-aside-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='advanced'] {\n  --_s-surface: var(--wzl-stance-advanced-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-advanced-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-advanced-border-style, solid);\n  --_s-border-width: var(--wzl-stance-advanced-border-width, 1px);\n  --_s-radius: var(--wzl-stance-advanced-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-advanced-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-advanced-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-advanced-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-advanced-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-advanced-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-advanced-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-advanced-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-advanced-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='debug'] {\n  --_s-surface: var(--wzl-stance-debug-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-debug-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-debug-border-style, solid);\n  --_s-border-width: var(--wzl-stance-debug-border-width, 1px);\n  --_s-radius: var(--wzl-stance-debug-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-debug-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-debug-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-debug-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-debug-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-debug-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-debug-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-debug-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-debug-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='danger'] {\n  --_s-surface: var(--wzl-stance-danger-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-danger-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-danger-border-style, solid);\n  --_s-border-width: var(--wzl-stance-danger-border-width, 1px);\n  --_s-radius: var(--wzl-stance-danger-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-danger-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-danger-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-danger-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-danger-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-danger-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-danger-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-danger-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-danger-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='notice'] {\n  --_s-surface: var(--wzl-stance-notice-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-notice-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-notice-border-style, solid);\n  --_s-border-width: var(--wzl-stance-notice-border-width, 1px);\n  --_s-radius: var(--wzl-stance-notice-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-notice-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-notice-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-notice-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-notice-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-notice-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-notice-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-notice-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-notice-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='important'] {\n  --_s-surface: var(--wzl-stance-important-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-important-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-important-border-style, solid);\n  --_s-border-width: var(--wzl-stance-important-border-width, 1px);\n  --_s-radius: var(--wzl-stance-important-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-important-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-important-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-important-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-important-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-important-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-important-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-important-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-important-title-color, var(--wzl-fg));\n}\n\n.popover[data-stance='preview'] {\n  --_s-surface: var(--wzl-stance-preview-surface, var(--wzl-surface));\n  --_s-border-color: var(--wzl-stance-preview-border-color, var(--wzl-accent-strong));\n  --_s-border-style: var(--wzl-stance-preview-border-style, solid);\n  --_s-border-width: var(--wzl-stance-preview-border-width, 1px);\n  --_s-radius: var(--wzl-stance-preview-radius, var(--wzl-radius-md));\n  --_s-tone-mix: var(--wzl-stance-preview-tone-mix, var(--wzl-panel-tone-mix));\n  --_s-tone: var(--wzl-tone, var(--wzl-stance-preview-tone, var(--_s-surface)));\n  --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n  --_s-title-font: var(--wzl-stance-preview-title-font, var(--wzl-font-ui));\n  --_s-title-weight: var(--wzl-stance-preview-title-weight, var(--wzl-font-weight-bold));\n  --_s-title-size: var(--wzl-stance-preview-title-size, var(--wzl-font-size));\n  --_s-title-case: var(--wzl-stance-preview-title-case, none);\n  --_s-title-tracking: var(--wzl-stance-preview-title-tracking, normal);\n  --_s-title-color: var(--wzl-stance-preview-title-color, var(--wzl-fg));\n}\n\n.popover {\n  --_s-fill: var(--_s-surface);\n}\n\n.popover[data-tone],\n.popover[data-stance] {\n  --_s-fill: color-mix(in oklab, var(--_s-tone) var(--_s-tone-mix), var(--_s-surface));\n}\n\n.popover[data-tone] {\n  --wzl-accent: var(--_s-accent);\n  --wzl-accent-base: var(--_s-accent);\n  --wzl-accent-strong: color-mix(in oklab, var(--_s-accent) 70%, var(--wzl-fg));\n  --wzl-accent-soft: color-mix(in oklab, var(--_s-accent) 45%, var(--wzl-surface));\n  --wzl-accent-hover: var(--wzl-accent-strong);\n  --wzl-accent-fg: var(--wzl-accent-strong);\n  --wzl-focus-ring: var(--wzl-accent-strong);\n}\n\n/* END GENERATED stance rules: callout */\n\n.arrow svg {\n  display: block;\n  fill: var(--_s-fill);\n  stroke: var(--_s-border-color);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n\n.dialog {\n  outline: none;\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-5) var(--wzl-space-6) 0;\n}\n\n.title {\n  margin: 0;\n  flex: 1;\n  font-family: var(--_s-title-font);\n  font-size: var(--_s-title-size);\n  font-weight: var(--_s-title-weight);\n  text-transform: var(--_s-title-case);\n  letter-spacing: var(--_s-title-tracking);\n  color: var(--_s-title-color);\n}\n\n.body {\n  padding: var(--wzl-space-4) var(--wzl-space-6) var(--wzl-space-5);\n  font-size: var(--wzl-font-size);\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--wzl-space-4);\n  padding: 0 var(--wzl-space-6) var(--wzl-space-5);\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DialogTrigger,\n  Popover as RACPopover,\n  OverlayArrow,\n  Dialog as RACDialog,\n  Heading,\n  type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport { CloseButton } from '../CloseButton';\nimport { type StanceProps, useStance } from '../stance';\nimport s from './Callout.module.css';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\n/** Props for {@link Callout}, on top of React Aria's `Popover` props. */\nexport type CalloutProps = Omit<\n  WithoutPortalTarget<RACPopoverProps>,\n  'children' | 'className' | 'isNonModal' | 'triggerRef'\n> &\n  OverlayPortalProps &\n  StanceProps & {\n  children?: ReactNode;\n  className?: string;\n  /** Optional heading rendered above the body. */\n  title?: ReactNode;\n  /** Footer slot — typically action buttons. */\n  footer?: ReactNode;\n  /**\n   * `true` — blocks interaction with the rest of the app until dismissed;\n   * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n   * the app stays interactive; Esc / outside click / close button dismiss.\n   */\n  modal?: boolean;\n  /**\n   * Show the close button. Defaults to `!modal`. In programmatic\n   * `triggerRef`/`anchorRect` modes the close button needs controlled open\n   * (`isOpen` + `onOpenChange`); with only `defaultOpen` it has no open-state\n   * setter to call and cannot close.\n   */\n  showCloseButton?: boolean;\n  /**\n   * The user asked for this callout to go away — the close button or Escape.\n   *\n   * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n   * interaction or focus merely leaves it. On a canvas that's every click on\n   * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n   * as dismissal retires messages nobody read. Use this instead: it fires\n   * only on a deliberate act, and never on incidental focus loss.\n   */\n  onDismiss?: () => void;\n  /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n   * The callout re-anchors whenever this rect changes, so a consumer that\n   * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n   * Takes precedence over `triggerRef`.\n   */\n    anchorRect?: { x: number; y: number; width: number; height: number };\n  };\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n  const {\n    children,\n    className,\n    title,\n    footer,\n    stance = 'notice',\n    tone,\n    modal = false,\n    showCloseButton,\n    onDismiss,\n    triggerRef,\n    anchorRect,\n    placement = 'top',\n    offset = 12,\n    maxHeight = 400,\n    onOpenChange,\n    shouldCloseOnInteractOutside,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    portalContainer,\n    ...rest\n  } = props;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const stanced = useStance({ stance, tone });\n  const { anchor: portalAnchor, portalProps } = useOverlayPortal(portalContainer);\n  const showClose = showCloseButton ?? !modal;\n  // Escape is a dismissal like the close button is. It can't ride on a React `onKeyDown`:\n  // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n  // it doesn't know, so the listener goes on the section itself. RAC's own\n  // Escape handling is untouched — this only adds the signal.\n  const onDismissRef = useRef(onDismiss);\n  onDismissRef.current = onDismiss;\n  const escapeListener = useRef((e: KeyboardEvent) => {\n    if (e.key === 'Escape') onDismissRef.current?.();\n  });\n  const listeningTo = useRef<HTMLElement | null>(null);\n  const dialogRef = useCallback((node: HTMLElement | null) => {\n    listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n    listeningTo.current = node;\n    node?.addEventListener('keydown', escapeListener.current);\n  }, []);\n  const titleId = useId();\n  // RAC positions on open and recomputes on scroll, resize, and a\n  // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n  // merely *translated*, as it is when a consumer tracks a scene node across a\n  // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n  // Nudging RAC's own resize listener is the supported way to make it\n  // recompute; there's no public updatePosition on Popover.\n  const hasAnchorRect = anchorRect !== undefined;\n  useEffect(() => {\n    if (!hasAnchorRect || typeof window === 'undefined') return;\n    window.dispatchEvent(new Event('resize'));\n  }, [hasAnchorRect, anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n  // RAC's popover role-heuristic misses alertdialog; label the outer role\n  // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n  const popoverAriaLabelledby =\n    modal && title !== undefined ? titleId : ariaLabelledby;\n  const popoverAriaLabel = modal ? ariaLabel : undefined;\n  return (\n    <>\n      {portalAnchor}\n      {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n      {anchorRect !== undefined &&\n        createPortal(\n          <span\n            ref={anchorRef}\n            data-callout-anchor=\"\"\n            className={s.anchor}\n            aria-hidden=\"true\"\n            // Dynamic geometry — inline style is the mechanism here, not styling.\n            style={{\n              left: anchorRect.x,\n              top: anchorRect.y,\n              width: anchorRect.width,\n              height: anchorRect.height,\n            }}\n          />,\n          document.body,\n        )}\n      <RACPopover\n        {...rest}\n        triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n        isNonModal={!modal}\n        placement={placement}\n        offset={offset}\n        maxHeight={maxHeight}\n        onOpenChange={onOpenChange}\n        shouldCloseOnInteractOutside={\n          shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n        }\n        aria-label={popoverAriaLabel}\n        aria-labelledby={popoverAriaLabelledby}\n        className={[s.popover, className].filter(Boolean).join(' ')}\n        {...stanced}\n        data-weasel-overlay=\"\"\n        {...portalProps}\n      >\n        <OverlayArrow className={s.arrow}>\n          <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n        <RACDialog\n          role={modal ? 'alertdialog' : 'dialog'}\n          className={s.dialog}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={dialogRef}\n        >\n          {({ close }) => (\n            <>\n              {(title !== undefined || showClose) && (\n                <header className={s.header}>\n                  {title !== undefined && (\n                    <Heading id={titleId} slot=\"title\" className={s.title}>\n                      {title}\n                    </Heading>\n                  )}\n                  {showClose && (\n                    <CloseButton\n                      ariaLabel=\"Close callout\"\n                      onClick={() => {\n                        // `close()` resolves OverlayTriggerStateContext, only\n                        // provided by DialogTrigger (composed mode). In\n                        // triggerRef/anchorRect modes there is no such\n                        // context, so `close()` is a no-op there — the\n                        // controlled-open fallback below does the work.\n                        close();\n                        onOpenChange?.(false);\n                        onDismiss?.();\n                      }}\n                    />\n                  )}\n                </header>\n              )}\n              <div className={s.body}>{children}</div>\n              {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n            </>\n          )}\n        </RACDialog>\n      </RACPopover>\n    </>\n  );\n}\n"],"mappings":"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"}