@weasel-js/ui 1.6.0 → 1.7.0

package/dist/chunks/BandEditor-D-nVrVO4.js

@@ -1,247 +0,0 @@
-import { t as e } from "./snap-DC4Km8xG.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 } from "react";
-var c = {
-	root: "_root_15dzr_1",
-	label: "_label_15dzr_11",
-	ruler: "_ruler_15dzr_19",
-	tick: "_tick_15dzr_25",
-	tickLabel: "_tickLabel_15dzr_35",
-	bands: "_bands_15dzr_45",
-	band: "_band_15dzr_45",
-	selected: "_selected_15dzr_92",
-	bandContent: "_bandContent_15dzr_99",
-	seam: "_seam_15dzr_107"
-};
-//#endregion
-//#region src/components/BandEditor/scale.ts
-function l(e) {
-	return e < 0 ? 0 : e > 1 ? 1 : e;
-}
-var u = {
-	toUnit: (e, t, n) => n === t ? 0 : (e - t) / (n - t),
-	fromUnit: (e, t, n) => t + e * (n - t)
-}, d = {
-	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));
-	}
-}, f = !1;
-function p() {
-	return typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
-}
-function m(e, t) {
-	let n = e === void 0 || e === "log" ? d : e === "linear" ? u : e;
-	return n !== d || t > 0 ? n : (p() && !f && (f = !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.`)), u);
-}
-//#endregion
-//#region src/components/BandEditor/bands.ts
-function h(e, t) {
-	let n = e.map((e) => ({ ...e }));
-	return n.length > 0 && (n[0].from = t), n;
-}
-function g(e, t, n, r) {
-	return [t === 0 ? n : e[t].from, t === e.length - 1 ? r : e[t + 1].from];
-}
-function _(e, t, n, r) {
-	return [t === 0 ? n : e[t].from, t + 2 <= e.length - 1 ? e[t + 2].from : r];
-}
-function v(e, t, n, r, i) {
-	let [a, o] = _(e, t, r, i);
-	return Math.max(a, Math.min(o, n));
-}
-function y(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 b(e, t, n, r) {
-	let i = e.map((e, i) => i === 0 ? 0 : l(t.toUnit(e.from, n, r)));
-	return i.push(1), i;
-}
-function x(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 S(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 C(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] = g(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 w(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 = .01;
-function E(e) {
-	return `${l(e) * 100}%`;
-}
-function D(e, t) {
-	return t;
-}
-function O(e) {
-	if (!(e instanceof HTMLElement)) return !1;
-	if (e.isContentEditable) return !0;
-	let t = e.tagName;
-	return t === "INPUT" || t === "TEXTAREA" || t === "SELECT";
-}
-function k(u) {
-	let { value: d, onInput: f, onChange: p, min: k, max: A, scale: j, ticks: M, renderBand: N, selectedIndex: P, onSelect: F, label: I, className: L } = u, R = u.snap ?? !0, z = u.splitBand ?? D, B = s(null), V = s(null);
-	a(() => () => {
-		V.current?.cancel();
-	}, []);
-	let H = o(), U = h(d, k), W = m(j, k), G = (e) => l(W.toUnit(e, k, A)), K = (e) => W.fromUnit(l(e), k, A), q = () => B.current?.getBoundingClientRect().width ?? 0, J = (e) => {
-		let t = B.current?.getBoundingClientRect();
-		return !t || t.width === 0 ? 0 : l((e - t.left) / t.width);
-	}, Y = (t, n) => {
-		if (!R || n || !M || M.length === 0) return t;
-		let r = q();
-		return r === 0 ? t : e(t, M.map((e) => G(e.at)), 6 / r);
-	}, X = (e, n, r) => {
-		V.current?.cancel(), V.current = t(e.currentTarget, e, {
-			onMove: n,
-			onEnd: () => {
-				V.current = null, r();
-			},
-			onCancel: () => {
-				V.current = null;
-			}
-		}, { capture: !1 });
-	}, Z = (e) => (t) => {
-		if (typeof t.button == "number" && t.button > 0) return;
-		t.preventDefault(), t.stopPropagation();
-		let n = U, r = null;
-		X(t, (t) => {
-			r = y(n, e, v(n, e, K(Y(J(t.clientX), t.altKey)), k, A)), f?.(r);
-		}, () => {
-			r && p(r);
-		});
-	}, Q = (e) => (t) => {
-		let [n, r] = _(U, e, k, A), 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 ? T * 10 : T;
-			else if (t.key === "ArrowLeft" || t.key === "ArrowDown") n = t.shiftKey ? -T * 10 : -T;
-			else return;
-			i = K(G(U[e + 1].from) + n);
-		}
-		t.preventDefault();
-		let a = y(U, e, v(U, e, i, k, A));
-		a !== U && p(a);
-	}, $ = (e) => (t) => {
-		if (typeof t.button == "number" && t.button > 0 || (e !== P && F?.(e), e === 0 || e === U.length - 1)) return;
-		let n = U, r = b(n, W, k, A), i = J(t.clientX), a = null;
-		X(t, (t) => {
-			let o = x(r, e, J(t.clientX) - i);
-			a = S(n, e, K(r[e] + o), K(r[e + 1] + o)), f?.(a);
-		}, () => {
-			a && p(a);
-		});
-	}, ee = (e) => () => {
-		e !== P && F?.(e);
-	};
-	return /* @__PURE__ */ r("div", {
-		className: [c.root, L].filter(Boolean).join(" "),
-		role: "group",
-		"aria-label": typeof I == "string" ? I : void 0,
-		"aria-labelledby": I !== void 0 && typeof I != "string" ? H : void 0,
-		onKeyDown: (e) => {
-			if (e.key !== "x" && e.key !== "Delete" || e.metaKey || e.ctrlKey || e.altKey || O(e.target) || P == null) return;
-			let t = w(U, P);
-			t !== U && (e.preventDefault(), p(t), F?.(P - 1));
-		},
-		children: [
-			I !== void 0 && /* @__PURE__ */ n("div", {
-				id: H,
-				className: c.label,
-				children: I
-			}),
-			/* @__PURE__ */ n("div", {
-				className: c.ruler,
-				ref: B,
-				"data-band-ruler": "",
-				onPointerDown: (e) => {
-					if (typeof e.button == "number" && e.button > 0) return;
-					e.preventDefault();
-					let t = C(U, K(J(e.clientX)), k, A, z);
-					t !== U && p(t);
-				},
-				children: M?.map((e, t) => /* @__PURE__ */ n("span", {
-					className: c.tick,
-					"data-tick-at": e.at,
-					style: { "--be-at": E(G(e.at)) },
-					children: e.label !== void 0 && /* @__PURE__ */ n("span", {
-						className: c.tickLabel,
-						children: e.label
-					})
-				}, t))
-			}),
-			/* @__PURE__ */ n("div", {
-				className: c.bands,
-				children: U.map((e, t) => {
-					let [a, o] = g(U, t, k, A), s = P === t;
-					return /* @__PURE__ */ r(i, { children: [/* @__PURE__ */ n("button", {
-						type: "button",
-						className: [c.band, s ? c.selected : null].filter(Boolean).join(" "),
-						style: {
-							"--be-from": E(G(a)),
-							"--be-to": E(G(o))
-						},
-						"aria-label": `Band ${t + 1}`,
-						"aria-pressed": s,
-						"data-band-index": t,
-						onPointerDown: $(t),
-						onFocus: ee(t),
-						children: /* @__PURE__ */ n("span", {
-							className: c.bandContent,
-							children: N?.(e, t)
-						})
-					}), t < U.length - 1 && /* @__PURE__ */ n("div", {
-						role: "slider",
-						tabIndex: 0,
-						className: c.seam,
-						style: { "--be-at": E(G(U[t + 1].from)) },
-						"aria-label": `Seam ${t + 1}`,
-						"aria-orientation": "horizontal",
-						"aria-valuemin": _(U, t, k, A)[0],
-						"aria-valuemax": _(U, t, k, A)[1],
-						"aria-valuenow": U[t + 1].from,
-						"data-seam-index": t,
-						onPointerDown: Z(t),
-						onKeyDown: Q(t)
-					})] }, t);
-				})
-			})
-		]
-	});
-}
-//#endregion
-export { u as n, d as r, k as t };
-
-//# sourceMappingURL=BandEditor-D-nVrVO4.js.map

package/dist/chunks/BandEditor-D-nVrVO4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BandEditor-D-nVrVO4.js","names":[],"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, ui-monospace, SFMono-Regular, Menlo, monospace);\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, ui-sans-serif, system-ui, sans-serif);\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/* 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 { BandScale } from './scale';\nimport { clamp01 } from './scale';\n\nexport interface Band<T> {\n  /** Domain value where this band starts. The first band's is normalized to `min`. */\n  from: number;\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  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 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> {\n  /** Ascending by `from`. `value[0].from` is normalized to `min` on read. */\n  value: Band<T>[];\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: Band<T>[]) => void;\n  /** Committed at gesture end: one call per gesture. */\n  onChange: (next: Band<T>[]) => void;\n  min: number;\n  max: number;\n  /** Default `'log'`. */\n  scale?: 'linear' | 'log' | BandScale;\n  ticks?: { at: number; label?: ReactNode }[];\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>, 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/** 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>(props: BandEditorProps<T>): ReactElement {\n  const {\n    value,\n    onInput,\n    onChange,\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 bands = normalizeBands(value, min);\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; onEnd(); },\n      onCancel: () => { sessionRef.current = 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 = bands;\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        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(bands, 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(bands[index + 1].from) + delta);\n    }\n    e.preventDefault();\n    const next = setSeam(bands, index, clampSeamTo(bands, index, target, min, max));\n    if (next !== bands) 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 === bands.length - 1) return;\n    const base = bands;\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        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(bands, fromUnit(unitAt(e.clientX)), min, max, splitBand);\n    if (next !== bands) 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(bands, selectedIndex);\n    if (next === bands) 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 && <span className={s.tickLabel}>{tick.label}</span>}\n          </span>\n        ))}\n      </div>\n      <div className={s.bands}>\n        {bands.map((band, 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?.(band, 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                  data-seam-index={i}\n                  onPointerDown={onSeamPointerDown(i)}\n                  onKeyDown={onSeamKeyDown(i)}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button-Dyp31jMt.js","names":[],"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,SAAS,IAAqB;AAC5B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAE;EAAS,eAAY;YACtC,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;aAA3C,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,EACF,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,CACE;;EACD,CAAA;;AAeX,IAAa,IAAS,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,eACE,GAEE,IAAM;EACV,EAAE;EACF,EAAE,WAAW;EACb,EAAE,QAAQ;EACV,KAAa,EAAE;EACf,KAAW,EAAE;EACb,KAAY,EAAE;EACd,KAAW,EAAE;EACb;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,EAEN,IAAc,CAAC,MAAa,KAAW,IACvC,IAAU,EAAU;EAAE;EAAQ;EAAM,CAAC;AAE3C,QACE,kBAAC,GAAD;EACE,SAAS,EAAsB;GAAE;GAAS;GAAU;GAAW,OAAO;GAAU,CAAC;EACvE;YAEV,kBAAC,UAAD;GACO;GACC;GACN,WAAW;GACX,eAAa,EAAQ;GACrB,aAAW,EAAQ;GACnB,OAAO,EAAQ,SAAS,IAAQ;IAAE,GAAG,EAAQ;IAAO,GAAG;IAAO,GAAG,KAAA;GACvD;GACV,aAAW,IAAU,KAAO,KAAA;GAC5B,gBAAc;GACd,eAAa;GACb,cAAY;GACH;aAZX;IAcG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAW,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG;KAAmB,CAAA;IAE1E,IACC,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG,kBAAC,QAAD;KAAM,WAAW,EAAE;KAAW;KAAgB,CAAA,GAEtE,MAAa,KAAA,KAAa,kBAAC,QAAD;KAAM,WAAW,EAAE;KAAQ;KAAgB,CAAA;IAEtE,CAAC,KAAY,KACZ,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAW;KAAoB,CAAA;IAE7C;;EACM,CAAA;EAEnB"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonBar-smZzFuEo.js","names":[],"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,SAAgB,EAA8C,GAAwC;CACpG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GAEzD,KAAQ,MAAkB;EAC9B,IAAM,IAAO,EAAM;AACf,IAAK,YACT,EAAK,UAAU;IAGX,IAAS,EAAkB;EAAE;EAAO,eAAe,EAAE;EAAS,YAAY;EAAM,CAAC,EAEjF,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,mBAA8B,GAAG,EAAO,KAAK,EAG/C,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD;GAAiC,SAAS,EAAsB,EAAK;GAAE,UAAU,EAAK;aACpF,kBAAC,UAAD;IACE,MAAK;IACL,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW,EAAE;IACb,eAAe,EAAK,EAAE;IACtB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,CAAA;GACM,EAZI,EAAK,MAYT,CACjB;EACE,CAAA"}

package/dist/chunks/Callout-xLjnx7Mp.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Callout-xLjnx7Mp.js","names":[],"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.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\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 { 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 × 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 × 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 × 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                    <button\n                      type=\"button\"\n                      className={s.close}\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                      aria-label=\"Close callout\"\n                    >\n                      ×\n                    </button>\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":";;;;;;;;;;;;;;;;;;;AC6EA,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EACJ,aACA,cACA,UACA,WACA,YAAS,UACT,SACA,WAAQ,IACR,oBACA,cACA,eACA,eACA,eAAY,OACZ,YAAS,IACT,eAAY,KACZ,iBACA,iCACA,cAAc,GACd,mBAAmB,GACnB,oBACA,GAAG,MACD,GACE,IAAY,EAAwB,KAAK,EACzC,IAAU,EAAU;EAAE;EAAQ;EAAM,CAAC,EACrC,EAAE,QAAQ,GAAc,mBAAgB,EAAiB,EAAgB,EACzE,IAAY,KAAmB,CAAC,GAKhC,IAAe,EAAO,EAAU;AACtC,GAAa,UAAU;CACvB,IAAM,IAAiB,GAAQ,MAAqB;AAClD,EAAI,EAAE,QAAQ,YAAU,EAAa,WAAW;GAChD,EACI,IAAc,EAA2B,KAAK,EAC9C,IAAY,GAAa,MAA6B;AAG1D,EAFA,EAAY,SAAS,oBAAoB,WAAW,EAAe,QAAQ,EAC3E,EAAY,UAAU,GACtB,GAAM,iBAAiB,WAAW,EAAe,QAAQ;IACxD,EAAE,CAAC,EACA,IAAU,GAAO,EAOjB,IAAgB,MAAe,KAAA;AACrC,SAAgB;AACV,GAAC,KAAiB,OAAO,SAAW,OACxC,OAAO,cAAc,IAAI,MAAM,SAAS,CAAC;IACxC;EAAC;EAAe,GAAY;EAAG,GAAY;EAAG,GAAY;EAAO,GAAY;EAAO,CAAC;CAGxF,IAAM,IACJ,KAAS,MAAU,KAAA,IAAY,IAAU,GACrC,IAAmB,IAAQ,IAAY,KAAA;AAC7C,QACE,kBAAA,GAAA,EAAA,UAAA;EACG;EAEA,MAAe,KAAA,KACd,EACE,kBAAC,QAAD;GACE,KAAK;GACL,uBAAoB;GACpB,WAAW,EAAE;GACb,eAAY;GAEZ,OAAO;IACL,MAAM,EAAW;IACjB,KAAK,EAAW;IAChB,OAAO,EAAW;IAClB,QAAQ,EAAW;IACpB;GACD,CAAA,EACF,SAAS,KACV;EACH,kBAAC,GAAD;GACE,GAAI;GACJ,YAAY,MAAe,KAAA,IAAwB,IAAZ;GACvC,YAAY,CAAC;GACF;GACH;GACG;GACG;GACd,8BACE,MAAiC,UAAc,KAAQ,KAAA;GAEzD,cAAY;GACZ,mBAAiB;GACjB,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3D,GAAI;GACJ,uBAAoB;GACpB,GAAI;aAhBN,CAkBE,kBAAC,GAAD;IAAc,WAAW,EAAE;cACzB,kBAAC,OAAD;KAAK,OAAO;KAAI,QAAQ;KAAI,SAAQ;KAAY,eAAY;eAC1D,kBAAC,QAAD,EAAM,GAAE,mBAAoB,CAAA;KACxB,CAAA;IACO,CAAA,EACf,kBAAC,GAAD;IACE,MAAM,IAAQ,gBAAgB;IAC9B,WAAW,EAAE;IACb,cAAY;IACZ,mBAAiB;IACjB,KAAK;eAEH,EAAE,eACF,kBAAA,GAAA,EAAA,UAAA;MACI,MAAU,KAAA,KAAa,MACvB,kBAAC,UAAD;MAAQ,WAAW,EAAE;gBAArB,CACG,MAAU,KAAA,KACT,kBAAC,GAAD;OAAS,IAAI;OAAS,MAAK;OAAQ,WAAW,EAAE;iBAC7C;OACO,CAAA,EAEX,KACC,kBAAC,UAAD;OACE,MAAK;OACL,WAAW,EAAE;OACb,eAAe;AAQb,QAFA,GAAO,EACP,IAAe,GAAM,EACrB,KAAa;;OAEf,cAAW;iBACZ;OAEQ,CAAA,CAEJ;;KAEX,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAO;MAAe,CAAA;KACvC,MAAW,KAAA,KAAa,kBAAC,UAAD;MAAQ,WAAW,EAAE;gBAAS;MAAgB,CAAA;KACtE,EAAA,CAAA;IAEK,CAAA,CACD;;EACZ,EAAA,CAAA"}

package/dist/chunks/Checkbox-ChZz30Ds.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox-ChZz30Ds.js","names":[],"sources":["../../src/components/Checkbox/Checkbox.module.css","../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  cursor: pointer;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.checkbox[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.box {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.checkbox[data-focus-visible] .box {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.checkbox[data-hovered]:not([data-disabled]) .box {\n  border-color: var(--wzl-fg-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n  background: var(--wzl-accent-strong);\n  border-color: var(--wzl-accent-strong);\n}\n\n.checkbox[data-invalid] .box {\n  border-color: var(--wzl-danger);\n}\n\n.checkmark {\n  position: absolute;\n  inset: 0;\n  color: var(--wzl-fg-on-accent);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox[data-selected] .checkmark,\n.checkbox[data-indeterminate] .checkmark {\n  opacity: 1;\n}\n\n.label {\n  line-height: 1.2;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  Checkbox as RACCheckbox,\n  type CheckboxProps as RACCheckboxProps,\n} from 'react-aria-components';\nimport s from './Checkbox.module.css';\n\n/**\n * Props for {@link Checkbox}, on top of React Aria's `Checkbox` props. The\n * label is passed as children.\n */\nexport type CheckboxProps = Omit<RACCheckboxProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single checkbox wrapping React Aria's Checkbox. Supports indeterminate\n * via `isIndeterminate`. The label is supplied as children.\n */\nexport const Checkbox = forwardRef(function Checkbox(\n  props: CheckboxProps,\n  ref: Ref<HTMLLabelElement>,\n) {\n  const { children, className, ...rest } = props;\n  return (\n    <RACCheckbox\n      {...rest}\n      ref={ref}\n      className={[s.checkbox, className].filter(Boolean).join(' ')}\n    >\n      {({ isIndeterminate }) => (\n        <>\n          <span className={s.box}>\n            <svg className={s.checkmark} viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n              {isIndeterminate ? (\n                <line x1=\"3\" y1=\"7\" x2=\"11\" y2=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n              ) : (\n                <polyline\n                  points=\"3,7.5 6,10.5 11,4.5\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n            </svg>\n          </span>\n          {children !== undefined && <span className={s.label}>{children}</span>}\n        </>\n      )}\n    </RACCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;GCoBa,IAAW,EAAW,SACjC,GACA,GACA;CACA,IAAM,EAAE,aAAU,cAAW,GAAG,MAAS;AACzC,QACE,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW,CAAC,EAAE,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aAE1D,EAAE,yBACF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAW,SAAQ;IAAY,eAAY;cAC1D,IACC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,QAAO;KAAe,aAAY;KAAI,eAAc;KAAU,CAAA,GAEjG,kBAAC,YAAD;KACE,QAAO;KACP,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,CAAA;IAEA,CAAA;GACD,CAAA,EACN,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAQ;GAAgB,CAAA,CACrE,EAAA,CAAA;EAEO,CAAA;EAEhB"}

package/dist/chunks/Code-v4tDWuuN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Code-v4tDWuuN.js","names":[],"sources":["../../src/components/Code/Code.module.css","../../src/components/Code/Code.tsx"],"sourcesContent":[".code {\n  --code-status-fg: var(--wzl-fg);\n  /* A peer tone or a stance's accent paints over the status. */\n  --code-fg: var(--_s-accent, var(--code-status-fg));\n  display: inline;\n  padding: 0 var(--wzl-space-2);\n  border-radius: var(--wzl-radius-sm);\n  background: color-mix(in oklab, var(--code-fg) 12%, transparent);\n  color: var(--code-fg);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--code-font-size, 0.9em);\n  line-height: inherit;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n}\n\n.code[data-status='muted']   { --code-status-fg: var(--wzl-fg-muted); }\n.code[data-status='accent']  { --code-status-fg: var(--wzl-accent-fg); }\n.code[data-status='success'] { --code-status-fg: var(--wzl-success); }\n.code[data-status='warn']    { --code-status-fg: var(--wzl-warning); }\n.code[data-status='danger']  { --code-status-fg: var(--wzl-danger); }\n\n.code[data-variant='plain'] {\n  padding: 0;\n  background: transparent;\n}\n\n.code[data-size='xs'] { --code-font-size: var(--wzl-font-size-xs); }\n.code[data-size='sm'] { --code-font-size: var(--wzl-font-size-sm); }\n.code[data-size='md'] { --code-font-size: var(--wzl-font-size); }\n\n/* BEGIN GENERATED stance rules: code — `npm run gen:stances`, do not edit. */\n\n.code {\n  --wzl-tone: initial;\n}\n\n.code {\n  --_s-accent: var(--wzl-tone);\n}\n\n.code[data-stance='scope'] {\n  --_s-accent: var(--wzl-stance-scope-accent, var(--wzl-tone));\n}\n\n.code[data-stance='aside'] {\n  --_s-accent: var(--wzl-stance-aside-accent, var(--wzl-tone));\n}\n\n.code[data-stance='advanced'] {\n  --_s-accent: var(--wzl-stance-advanced-accent, var(--wzl-tone));\n}\n\n.code[data-stance='debug'] {\n  --_s-accent: var(--wzl-stance-debug-accent, var(--wzl-tone));\n}\n\n.code[data-stance='danger'] {\n  --_s-accent: var(--wzl-stance-danger-accent, var(--wzl-tone));\n}\n\n.code[data-stance='notice'] {\n  --_s-accent: var(--wzl-stance-notice-accent, var(--wzl-tone));\n}\n\n.code[data-stance='important'] {\n  --_s-accent: var(--wzl-stance-important-accent, var(--wzl-tone));\n}\n\n.code[data-stance='preview'] {\n  --_s-accent: var(--wzl-stance-preview-accent, var(--wzl-tone));\n}\n\n.code[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: code */\n","import type { ReactNode } from 'react';\nimport s from './Code.module.css';\nimport { type StanceProps, useStance } from '../stance';\n\n/** Status color of a {@link Code} span. `success` and `danger` double as the\n *  added and removed sides of a diff. */\nexport type CodeStatus = 'neutral' | 'muted' | 'accent' | 'success' | 'warn' | 'danger';\n/** `subtle` sets the text on a tinted chip; `plain` is colored monospace text alone. */\nexport type CodeVariant = 'subtle' | 'plain';\n/** Pins the type to a theme step. Left unset, the span sizes itself from the\n *  surrounding text. */\nexport type CodeSize = 'xs' | 'sm' | 'md';\n\n/** Props for {@link Code}. */\nexport interface CodeProps extends StanceProps {\n  children: ReactNode;\n  /** The status the text reports. A peer `tone`, or a stance's accent, paints over it. */\n  status?: CodeStatus;\n  variant?: CodeVariant;\n  size?: CodeSize;\n  className?: string;\n  title?: string;\n}\n\n/**\n * An inline run of literal text — an identifier, a type, a key path — set in\n * the monospace face inside a `<code>` element. Unlike {@link Badge}, which\n * labels, it quotes: the text keeps its case and wraps anywhere, so a long\n * type signature breaks across lines with the chip following each fragment.\n */\nexport function Code({\n  children,\n  status = 'neutral',\n  stance,\n  tone,\n  variant = 'subtle',\n  size,\n  className,\n  title,\n}: CodeProps) {\n  const stanced = useStance({ stance, tone });\n  return (\n    <code\n      className={className ? `${s.code} ${className}` : s.code}\n      {...stanced}\n      data-status={status}\n      data-variant={variant}\n      data-size={size}\n      title={title}\n    >\n      {children}\n    </code>\n  );\n}\n"],"mappings":";;;;;AC8BA,SAAgB,EAAK,EACnB,aACA,YAAS,WACT,WACA,SACA,aAAU,UACV,SACA,cACA,YACY;CACZ,IAAM,IAAU,EAAU;EAAE;EAAQ;EAAM,CAAC;AAC3C,QACE,kBAAC,QAAD;EACE,WAAW,IAAY,GAAG,EAAE,KAAK,GAAG,MAAc,EAAE;EACpD,GAAI;EACJ,eAAa;EACb,gBAAc;EACd,aAAW;EACJ;EAEN;EACI,CAAA"}

package/dist/chunks/ColorField-DJSCuSJv.js

@@ -1,60 +0,0 @@
-import { t as e } from "./InlineRange-BwGFDhpT.js";
-import { getAlpha01 as t, toHex8 as n, withAlpha01 as r } from "@weasel-js/core";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useState as s } from "react";
-var c = {
-	root: "_root_1m1zl_1",
-	chip: "_chip_1m1zl_7",
-	color: "_color_1m1zl_14",
-	alphaRange: "_alphaRange_1m1zl_46",
-	alphaReadout: "_alphaReadout_1m1zl_50"
-};
-//#endregion
-//#region src/components/ColorField/ColorField.tsx
-function l(l) {
-	let { value: u, mixed: d = !1, alpha: f = !1, onInput: p, onChange: m, className: h } = l, g = n(u ?? "#000000"), _ = g.slice(0, 7), v = t(g), y = Math.round(v * 100), [b, x] = s(null), [S, C] = s(null), w = b ?? _, T = S ?? y, E = (e, t) => f ? r(e, t) : e, D = d && b === null, O = (e, t) => {
-		b === null && S === null || (m(E(e, t)), x(null), C(null));
-	};
-	return /* @__PURE__ */ o("span", {
-		className: [c.root, h].filter(Boolean).join(" "),
-		...d && b === null ? { "data-mixed": "" } : {},
-		children: [/* @__PURE__ */ a("span", {
-			className: c.chip,
-			children: /* @__PURE__ */ a("input", {
-				className: c.color,
-				type: "color",
-				value: w,
-				"aria-label": l["aria-label"] ?? "Color",
-				onInput: (e) => {
-					let t = e.target.value;
-					x(t), p?.(E(t, T / 100));
-				},
-				onBlur: () => O(w, T / 100)
-			})
-		}), f && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(e, {
-			className: c.alphaRange,
-			min: 0,
-			max: 100,
-			step: 1,
-			value: T,
-			disabled: D,
-			"aria-label": l["aria-label"] ? `${l["aria-label"]} opacity` : "Opacity",
-			onInput: (e) => {
-				let t = Number(e.target.value);
-				C(t), p?.(E(w, t / 100));
-			},
-			onPointerUp: () => O(w, T / 100),
-			onPointerCancel: () => O(w, T / 100),
-			onKeyUp: () => O(w, T / 100),
-			onBlur: () => O(w, T / 100)
-		}), /* @__PURE__ */ o("span", {
-			className: c.alphaReadout,
-			"aria-hidden": "true",
-			children: [T, "%"]
-		})] })]
-	});
-}
-//#endregion
-export { l as t };
-
-//# sourceMappingURL=ColorField-DJSCuSJv.js.map