@weasel-js/ui 1.7.0 → 1.7.1

package/dist/chunks/PaintField-C0hoXc0Y.js

@@ -0,0 +1,63 @@
+import { i as e } from "./portalHost-CE70wLzo.js";
+import { t } from "./listbox.module-BcdVJMbm.js";
+import { t as n } from "./paintPreview-CuSZiHpR.js";
+import { t as r } from "./PaintInput-jQRxM95Y.js";
+import { usePaintKind as i } from "@weasel-js/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import "react";
+import { Button as s, Dialog as c, DialogTrigger as l, Popover as u } from "react-aria-components";
+var d = {
+	trigger: "_trigger_1uw1i_1",
+	swatch: "_swatch_1uw1i_27",
+	label: "_label_1uw1i_48",
+	popover: "_popover_1uw1i_57",
+	body: "_body_1uw1i_61"
+};
+//#endregion
+//#region src/components/PaintField/PaintField.tsx
+function f(e, t, n) {
+	return t ? "Mixed" : e === null ? "None" : e === void 0 ? "—" : n ?? e.fill ?? "solid";
+}
+function p(p) {
+	let { value: m, mixed: h = !1, unset: g = !1, kinds: _, allowNone: v = !0, onInput: y, onChange: b, className: x, portalContainer: S } = p, C = p["aria-label"], { anchor: w, portalProps: T } = e(S), E = h ? void 0 : n(m), D = i(m?.fill)?.label;
+	return /* @__PURE__ */ o(l, { children: [
+		w,
+		/* @__PURE__ */ o(s, {
+			className: [d.trigger, x].filter(Boolean).join(" "),
+			"aria-label": C,
+			...g ? { "data-unset": "" } : {},
+			...h ? { "data-mixed": "" } : {},
+			children: [/* @__PURE__ */ a("span", {
+				className: d.swatch,
+				"aria-hidden": "true",
+				...E ? { style: { background: E } } : { "data-empty": "" }
+			}), /* @__PURE__ */ a("span", {
+				className: d.label,
+				children: f(m, h, D)
+			})]
+		}),
+		/* @__PURE__ */ a(u, {
+			className: d.popover,
+			"data-weasel-overlay": "",
+			...T,
+			children: /* @__PURE__ */ a(c, {
+				className: `${t.surface} ${d.body}`,
+				"aria-label": C ? `${C} editor` : "Paint editor",
+				children: /* @__PURE__ */ a(r, {
+					value: m,
+					mixed: h,
+					unset: g,
+					kinds: _,
+					allowNone: v,
+					onInput: y,
+					onChange: b,
+					"aria-label": C
+				})
+			})
+		})
+	] });
+}
+//#endregion
+export { p as t };
+
+//# sourceMappingURL=PaintField-C0hoXc0Y.js.map

package/dist/chunks/PaintField-C0hoXc0Y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintField-C0hoXc0Y.js","names":["RACButton","s","RACPopover","RACDialog","listbox","useOverlayPortal","paintPreviewCss","PaintInput","PaintField_module_default","kindLabel","mixed","paint","label","PaintField","props","ariaLabel","portalContainer","preview","value","usePaintKind","DialogTrigger","anchor","Button","className","unset","Popover","portalProps","Dialog","listbox_module_default"],"sources":["../../src/components/PaintField/PaintField.module.css","../../src/components/PaintField/PaintField.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  padding: 1px var(--wzl-space-3) 1px 1px;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n}\n\n.trigger[data-unset] {\n  opacity: 0.6;\n}\n\n.trigger[data-focus-visible] {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.swatch {\n  /* A paint preview at a fixed 26:18 aspect, not a control box. */\n  inline-size: 26px;\n  block-size: 18px; /* not-a-control */\n  flex: 0 0 auto;\n  border-radius: calc(var(--wzl-radius-sm) - var(--wzl-border-w));\n  /* Checker under the paint, so a translucent one reads as translucent. */\n  background-color: var(--wzl-surface-raised);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n/* No paint to show: the checker stands in rather than an invented color. */\n.swatch[data-empty],\n.trigger[data-mixed] .swatch {\n  background: repeating-conic-gradient(\n      var(--wzl-checker-a) 0% 25%,\n      var(--wzl-checker-b) 0% 50%\n    )\n    50% / var(--wzl-checker-size) var(--wzl-checker-size);\n}\n\n.label {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: start;\n}\n\n.popover {\n  outline: none;\n}\n\n.body {\n  inline-size: 240px;\n  padding: var(--wzl-space-4);\n}\n","import { type ReactElement } from 'react';\nimport {\n  Button as RACButton,\n  Dialog as RACDialog,\n  DialogTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { usePaintKind, type FillStyle, type PaintKind } from '@weasel-js/core';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport { paintPreviewCss } from '../../paintPreview';\nimport { PaintInput } from '../PaintInput';\nimport listbox from '../listbox.module.css';\nimport s from './PaintField.module.css';\n\n/** Props for {@link PaintField}. `onInput` fires throughout a gesture inside\n *  the popover and `onChange` once at its end. */\nexport interface PaintFieldProps extends OverlayPortalProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined` is\n   *  no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: the trigger says \"Mixed\" and the editor\n   *  lights no kind. */\n  mixed?: boolean;\n  /** Dim the trigger — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the editor's kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\" in the editor. Default `true`. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this field edits — `Fill`, `Color`. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** What the trigger says it is holding. */\nfunction kindLabel(paint: FillStyle | null | undefined, mixed: boolean, label: string | undefined): string {\n  if (mixed) return 'Mixed';\n  if (paint === null) return 'None';\n  if (paint === undefined) return '—';\n  return label ?? (paint.fill ?? 'solid');\n}\n\n/**\n * A whole `FillStyle` in one control slot: a swatch that says which kind it\n * holds, and a popover holding {@link PaintInput}.\n *\n * `PaintInput` itself is a kind bar over a body — six segments and a stop\n * editor — which a property row's control column cannot hold. This is the\n * shape for a narrow slot, and the difference that matters is fidelity: a\n * `ColorField` in that slot reads a gradient's first stop and writes a solid\n * back, so touching the control loses the paint.\n */\nexport function PaintField(props: PaintFieldProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className, portalContainer,\n  } = props;\n  const ariaLabel = props['aria-label'];\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  const preview = mixed ? undefined : paintPreviewCss(value);\n  const label = usePaintKind(value?.fill)?.label;\n\n  return (\n    <DialogTrigger>\n      {anchor}\n      <RACButton\n        className={[s.trigger, className].filter(Boolean).join(' ')}\n        aria-label={ariaLabel}\n        {...(unset ? { 'data-unset': '' } : {})}\n        {...(mixed ? { 'data-mixed': '' } : {})}\n      >\n        <span\n          className={s.swatch}\n          aria-hidden=\"true\"\n          {...(preview ? { style: { background: preview } } : { 'data-empty': '' })}\n        />\n        <span className={s.label}>{kindLabel(value, mixed, label)}</span>\n      </RACButton>\n      {/* `data-weasel-overlay`: see Select — the popover renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACDialog className={`${listbox.surface} ${s.body}`} aria-label={ariaLabel ? `${ariaLabel} editor` : 'Paint editor'}>\n          <PaintInput\n            value={value}\n            mixed={mixed}\n            unset={unset}\n            kinds={kinds}\n            allowNone={allowNone}\n            onInput={onInput}\n            onChange={onChange}\n            aria-label={ariaLabel}\n          />\n        </RACDialog>\n      </RACPopover>\n    </DialogTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;ACqCA,SAASS,EAAU,GAAqC,GAAgB,GAAmC;CAIzG,OAHIC,IAAc,UACdC,MAAU,OAAa,SACvBA,MAAU,KAAA,IAAkB,MACzBC,KAAUD,EAAM,QAAQ;AACjC;AAYA,SAAgBE,EAAW,GAAsC;CAC/D,IAAM,EACJ,UAAO,WAAQ,IAAO,WAAQ,IAAO,UAAO,eAAY,IACxD,YAAS,aAAU,cAAW,uBAC5BC,GACEC,IAAYD,EAAM,eAClB,EAAE,WAAQ,mBAAgBT,EAAiBW,CAAe,GAC1DC,IAAUP,IAAQ,KAAA,IAAYJ,EAAgBY,CAAK,GACnDN,IAAQO,EAAaD,GAAO,IAAI,CAAC,EAAE;CAEzC,OACE,kBAACE,GAAD,EAAA,UAAA;EACGC;EACD,kBAACrB,GAAD;GACE,WAAW,CAACC,EAAE,SAASsB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAC1D,cAAYR;GACZ,GAAKS,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GACrC,GAAKd,IAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;GAJvC,UAAA,CAME,kBAAC,QAAD;IACE,WAAWT,EAAE;IACb,eAAY;IACZ,GAAKgB,IAAU,EAAE,OAAO,EAAE,YAAYA,EAAQ,EAAE,IAAI,EAAE,cAAc,GAAG;GACxE,CAAA,GACD,kBAAC,QAAD;IAAM,WAAWhB,EAAE;IAAQ,UAAAQ,EAAUS,GAAOR,GAAOE,CAAK;GAAQ,CAAA,CACvD;;EAGX,kBAACV,GAAD;GAAY,WAAWD,EAAE;GAAS,uBAAoB;GAAG,GAAIyB;GAC3D,UAAA,kBAACvB,GAAD;IAAW,WAAW,GAAGC,EAAQ,QAAQ,GAAGH,EAAE;IAAQ,cAAYc,IAAY,GAAGA,EAAU,WAAW;IACpG,UAAA,kBAACR,GAAD;KACS;KACA;KACA;KACA;KACI;KACF;KACC;KACV,cAAYQ;IACb,CAAA;GACQ,CAAA;EACD,CAAA;CACC,EAAA,CAAA;AAEnB"}

package/dist/chunks/PaintInput-jQRxM95Y.js

@@ -0,0 +1,132 @@
+import { a as e, t } from "./Icon--B1ME-6c.js";
+import { n, t as r } from "./ColorField-BLs9fbeq.js";
+import { t as i } from "./ToggleBar-Z2jZiguF.js";
+import { r as a } from "./GradientEditor-DypXzMc-.js";
+import { t as o } from "./PatternPicker-CaMYXzhF.js";
+import { getAlpha01 as s, getPaintKind as c, paintAlpha as l, paintWithAlpha as u, solid as d, switchGradientKind as f, toHex8 as p, usePaintKind as m, usePaintKinds as h, withAlpha01 as g } from "@weasel-js/core";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useCallback as b, useRef as x } from "react";
+var S = {
+	root: "_root_4cn6i_2",
+	unset: "_unset_4cn6i_10",
+	noEditor: "_noEditor_4cn6i_15",
+	opacity: "_opacity_4cn6i_22"
+}, C = "#000000ff", w = "none";
+function T(e) {
+	let t = p(e.color);
+	return g(t.slice(0, 7), s(t) * l(e));
+}
+function E(e) {
+	let t = d(e);
+	return t.opacity === void 0 ? t : {
+		...t,
+		opacity: Math.round(t.opacity * 100) / 100
+	};
+}
+function D(e) {
+	return e?.fill === "pattern";
+}
+function O(e) {
+	return e === null ? w : e === void 0 ? null : e.fill ?? "solid";
+}
+function k(s) {
+	let { value: d, mixed: p = !1, unset: g = !1, kinds: k, allowNone: A = !0, onInput: j, onChange: M, className: N } = s, P = s["aria-label"], F = x(/* @__PURE__ */ new Map()), I = p ? null : O(d);
+	d != null && I !== null && F.current.set(I, d);
+	let L = m(d?.fill), R = h().filter((e) => k === void 0 || k.includes(e.id)), z = (n, r, i) => i && i in e ? {
+		value: n,
+		label: /* @__PURE__ */ v(t, {
+			name: i,
+			size: 14
+		}),
+		ariaLabel: r
+	} : {
+		value: n,
+		label: r
+	}, B = [...A ? [z(w, "None", "paintNone")] : [], ...R.map((e) => z(e.id, e.label, e.icon))], V = b(() => d == null ? C : L?.colorOf(d) ?? C, [d, L]), H = (e) => {
+		if (e === I) return;
+		if (e === w) {
+			M(null);
+			return;
+		}
+		let t = F.current.get(e);
+		if (t !== void 0) {
+			M(t);
+			return;
+		}
+		let n = d == null ? void 0 : f(d, e);
+		if (n !== void 0) {
+			M(n);
+			return;
+		}
+		let r = c(e);
+		r && M(r.seed(V()));
+	};
+	return /* @__PURE__ */ y("div", {
+		className: [
+			S.root,
+			g && S.unset,
+			N
+		].filter(Boolean).join(" "),
+		title: g ? "Not set" : void 0,
+		children: [/* @__PURE__ */ v(i, {
+			items: B,
+			value: I,
+			size: "sm",
+			ariaLabel: "Paint kind",
+			onChange: (e) => e && H(e)
+		}), W()]
+	});
+	function U(e, t) {
+		return /* @__PURE__ */ y(_, { children: [t, /* @__PURE__ */ v("div", {
+			className: S.opacity,
+			children: /* @__PURE__ */ v(n, {
+				value: l(e),
+				"aria-label": P,
+				onInput: (t) => j?.(u(e, t)),
+				onChange: (t) => M(u(e, t))
+			})
+		})] });
+	}
+	function W() {
+		if (p || d === void 0) return /* @__PURE__ */ v(r, {
+			mixed: !0,
+			"aria-label": P,
+			onChange: (e) => M(E(e))
+		});
+		if (d === null) return null;
+		if (L?.Editor) {
+			let e = L.Editor;
+			return U(d, /* @__PURE__ */ v(e, {
+				value: d,
+				onInput: j,
+				onChange: M
+			}));
+		}
+		if (L?.stopsOf) return U(d, /* @__PURE__ */ v(a, {
+			value: d,
+			kindSwitch: !1,
+			onInput: j,
+			onChange: M
+		}));
+		if (D(d)) return U(d, /* @__PURE__ */ v(o, {
+			value: d,
+			color: V(),
+			onChange: M
+		}));
+		let e = O(d);
+		return e === "solid" ? /* @__PURE__ */ v(r, {
+			value: T(d),
+			alpha: !0,
+			"aria-label": P,
+			onInput: (e) => j?.(E(e)),
+			onChange: (e) => M(E(e))
+		}) : /* @__PURE__ */ y("div", {
+			className: S.noEditor,
+			children: [L?.label ?? e, ": no editor"]
+		});
+	}
+}
+//#endregion
+export { k as t };
+
+//# sourceMappingURL=PaintInput-jQRxM95Y.js.map

package/dist/chunks/PaintInput-jQRxM95Y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaintInput-jQRxM95Y.js","names":["s","_Fragment","ICON_PATHS","ColorField","ToggleBar","GradientEditor","PatternPicker","PaintInput_module_default","FALLBACK_COLOR","NONE","solidHex8","hex8","toHex8","paint","withAlpha01","getAlpha01","paintAlpha","solidFromField","solid","color","isPattern","kindOf","PaintInput","props","ariaLabel","remembered","useRef","active","mixed","value","valueKind","usePaintKind","entries","usePaintKinds","kinds","entry","segment","icon","id","Icon","label","items","allowNone","currentColor","useCallback","switchKind","kind","seen","converted","switchGradientKind","getPaintKind","onChange","unset","className","renderBody","withOpacity","Fragment","body","OpacityRange","onInput","paintWithAlpha","a01","Editor"],"sources":["../../src/components/PaintInput/PaintInput.module.css","../../src/components/PaintInput/PaintInput.tsx"],"sourcesContent":["/* Kind switch stacked over whichever paint body it selects. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n/* A value is in effect but nobody chose it. Never louder than mixed. */\n.unset {\n  opacity: 0.55;\n}\n\n/* A kind with no editor: named, not editable. */\n.noEditor {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n}\n\n/* The opacity slider under a paint with no single color, laid out as the\n * solid's sits beside its swatch. */\n.opacity {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n}\n","import { useCallback, useRef, type ReactElement } from 'react';\nimport {\n  getAlpha01,\n  getPaintKind,\n  paintAlpha,\n  paintWithAlpha,\n  solid,\n  switchGradientKind,\n  toHex8,\n  usePaintKind,\n  usePaintKinds,\n  withAlpha01,\n  type FillStyle,\n  type PaintKind,\n} from '@weasel-js/core';\nimport { Icon } from '../../icons/Icon';\nimport { ICON_PATHS, type IconName } from '../../icons/paths';\nimport { ColorField } from '../ColorField';\nimport { OpacityRange } from '../ColorField/OpacityRange';\nimport { GradientEditor } from '../GradientEditor';\nimport { PatternPicker, type PatternFill } from '../PatternPicker';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport s from './PaintInput.module.css';\n\n/** What a kind with no color of its own seeds from. */\nconst FALLBACK_COLOR = '#000000ff';\n\n/** The bar's answer for \"no paint at all\". Not a registered kind — absence\n *  has no seed, no color and nothing to render — so it is this control's own\n *  segment rather than a registry entry. */\nconst NONE = 'none';\n\n/** A solid paint as the one `#rrggbbaa` a color field edits. Its alpha lives\n *  in `opacity`; a hex alpha left in `color` multiplies with it when painted,\n *  so both fold in. */\nfunction solidHex8(paint: FillStyle): string {\n  const hex8 = toHex8((paint as { color: string }).color);\n  return withAlpha01(hex8.slice(0, 7), getAlpha01(hex8) * paintAlpha(paint));\n}\n\n/** `solid(color)` at the slider's own 1% resolution: the alpha arrives\n *  through a hex channel, which would turn 70% into 0.70196. */\nfunction solidFromField(color: string): FillStyle {\n  const paint = solid(color);\n  return paint.opacity === undefined\n    ? paint\n    : { ...paint, opacity: Math.round(paint.opacity * 100) / 100 };\n}\n\nfunction isPattern(paint: FillStyle | undefined): paint is PatternFill {\n  return paint?.fill === 'pattern';\n}\n\n/** A paint's own discriminant. The solid member leaves `fill` off, and an\n *  explicit `null` is the absence of paint rather than an unknown one. */\nfunction kindOf(paint: FillStyle | null | undefined): PaintKind | null {\n  if (paint === null) return NONE;\n  if (paint === undefined) return null;\n  return paint.fill ?? 'solid';\n}\n\n/** Props for {@link PaintInput}. `onInput` fires throughout a gesture and\n *  `onChange` once at its end. */\nexport interface PaintInputProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined`\n   *  is no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: no kind lit, and the body withheld because\n   *  there is no single paint to show. */\n  mixed?: boolean;\n  /** Dim the control — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\". Default `true` — the bar answers \"what kind of paint is\n   *  this?\" and no-paint is one of the answers. Turn it off where the slot\n   *  cannot express absence. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this control edits — `Fill`, `Color`. Carried by the\n   *  solid body's swatch, which is the part with a value to announce. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/**\n * Editor for a whole `FillStyle` — a kind bar over whichever body that kind\n * wants.\n *\n * The bar is driven by the paint-kind registry rather than a fixed list, so a\n * consumer's registered kind appears in it and renders that entry's `Editor`.\n * The five built-in kinds keep their branch here: their editors live in this\n * package and `@weasel-js/core`, which owns the registry, cannot import it.\n *\n * Geometry is deliberately absent — on a canvas it belongs on the artwork,\n * via `<SceneGradientHandles>`.\n */\nexport function PaintInput(props: PaintInputProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className,\n  } = props;\n  const ariaLabel = props['aria-label'];\n\n  // Per-kind memory, so linear → solid → linear comes back with its stops.\n  // A ref, not state: it must not survive the control being pointed at a\n  // different selection, and nothing renders off it directly.\n  const remembered = useRef(new Map<PaintKind, FillStyle>());\n\n  const active = mixed ? null : kindOf(value);\n  if (value != null && active !== null) remembered.current.set(active, value);\n\n  const valueKind = usePaintKind(value?.fill);\n  const entries = usePaintKinds().filter(\n    (entry) => kinds === undefined || kinds.includes(entry.id),\n  );\n  const segment = (id: string, label: string, icon: string | undefined): ToggleBarItem<PaintKind> =>\n    icon && icon in ICON_PATHS\n      // Icon-only: six labelled segments do not fit a property row, and the\n      // full label stays the accessible name.\n      // 14 to match the panel's other glyph segments. A `sm` bar is 17px tall\n      // over 1px of padding, so 15 fills the segment box edge to edge.\n      ? { value: id, label: <Icon name={icon as IconName} size={14} />, ariaLabel: label }\n      : { value: id, label };\n\n  const items: readonly ToggleBarItem<PaintKind>[] = [\n    ...(allowNone ? [segment(NONE, 'None', 'paintNone')] : []),\n    ...entries.map((entry) => segment(entry.id, entry.label, entry.icon)),\n  ];\n\n  /** The color a switch seeds from: whatever the current paint shows. */\n  const currentColor = useCallback((): string => {\n    if (value == null) return FALLBACK_COLOR;\n    return valueKind?.colorOf(value) ?? FALLBACK_COLOR;\n  }, [value, valueKind]);\n\n  const switchKind = (kind: PaintKind): void => {\n    if (kind === active) return;\n    if (kind === NONE) {\n      onChange(null);\n      return;\n    }\n    const seen = remembered.current.get(kind);\n    if (seen !== undefined) {\n      onChange(seen);\n      return;\n    }\n    const converted = value != null ? switchGradientKind(value, kind) : undefined;\n    if (converted !== undefined) {\n      onChange(converted);\n      return;\n    }\n    const entry = getPaintKind(kind);\n    if (entry) onChange(entry.seed(currentColor()));\n  };\n\n  return (\n    <div\n      className={[s.root, unset && s.unset, className].filter(Boolean).join(' ')}\n      title={unset ? 'Not set' : undefined}\n    >\n      <ToggleBar<PaintKind>\n        items={items}\n        value={active}\n        size=\"sm\"\n        ariaLabel=\"Paint kind\"\n        onChange={(kind) => kind && switchKind(kind)}\n      />\n      {renderBody()}\n    </div>\n  );\n\n  /** A solid's alpha rides its swatch; every other kind has no one color to\n   *  carry it, so its `opacity` gets the same slider under the body. */\n  function withOpacity(paint: FillStyle, body: ReactElement): ReactElement {\n    return (\n      <>\n        {body}\n        <div className={s.opacity}>\n          <OpacityRange\n            value={paintAlpha(paint)}\n            aria-label={ariaLabel}\n            onInput={(a01) => onInput?.(paintWithAlpha(paint, a01))}\n            onChange={(a01) => onChange(paintWithAlpha(paint, a01))}\n          />\n        </div>\n      </>\n    );\n  }\n\n  function renderBody(): ReactElement | null {\n    if (mixed || value === undefined) {\n      return (\n        <ColorField\n          mixed\n          aria-label={ariaLabel}\n          onChange={(color) => onChange(solidFromField(color))}\n        />\n      );\n    }\n    // Absence has nothing to edit. The lit segment is the whole statement.\n    if (value === null) return null;\n    // A registered `Editor` wins even for a built-in id: re-registering one is\n    // how a consumer replaces a kit control, and the built-in branches below\n    // are the fallback for the ids that ship without an entry editor.\n    if (valueKind?.Editor) {\n      const Editor = valueKind.Editor;\n      return withOpacity(value, <Editor value={value} onInput={onInput} onChange={onChange} />);\n    }\n    if (valueKind?.stopsOf) {\n      return withOpacity(value, (\n        <GradientEditor\n          value={value}\n          kindSwitch={false}\n          onInput={onInput}\n          onChange={onChange}\n        />\n      ));\n    }\n    if (isPattern(value)) {\n      return withOpacity(\n        value,\n        <PatternPicker value={value} color={currentColor()} onChange={onChange} />,\n      );\n    }\n    const kind = kindOf(value);\n    if (kind !== 'solid') {\n      // Editing a paint this control cannot represent would overwrite it, so\n      // a kind with no editor is shown and left alone.\n      return <div className={s.noEditor}>{valueKind?.label ?? kind}: no editor</div>;\n    }\n    return (\n      <ColorField\n        value={solidHex8(value)}\n        alpha\n        aria-label={ariaLabel}\n        onInput={(color) => onInput?.(solidFromField(color))}\n        onChange={(color) => onChange(solidFromField(color))}\n      />\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/chunks/PatternPicker-CaMYXzhF.js

@@ -0,0 +1,135 @@
+import { r as e } from "./NumberField-DLXXgh48.js";
+import { t } from "./ToggleBar-Z2jZiguF.js";
+import { composePatternTransform as n, decomposePatternTransform as r } from "@weasel-js/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { tilePreviewCssUrl as o } from "@weasel-js/svg";
+var s = {
+	root: "_root_dgwqj_2",
+	grid: "_grid_dgwqj_9",
+	swatch: "_swatch_dgwqj_17",
+	swatchActive: "_swatchActive_dgwqj_36"
+}, c = [
+	"hatch",
+	"crosshatch",
+	"dots",
+	"chunks"
+], l = [
+	{
+		value: 4,
+		label: "S"
+	},
+	{
+		value: 8,
+		label: "M"
+	},
+	{
+		value: 16,
+		label: "L"
+	},
+	{
+		value: 32,
+		label: "XL"
+	}
+], u = 8, d = 16, f = {
+	style: "unit",
+	unit: "degree",
+	unitDisplay: "narrow",
+	maximumFractionDigits: 1
+};
+function p(e) {
+	let t = ((e * 180 / Math.PI + 180) % 360 + 360) % 360 - 180;
+	return t === -180 ? 180 : t;
+}
+function m(e, t) {
+	let i = r(e.transform), [a, o, s, c] = n({
+		...i,
+		rotation: t * Math.PI / 180
+	}), { transform: l, ...u } = e;
+	return Math.abs(a - 1) < 1e-9 && Math.abs(o) < 1e-9 && Math.abs(s) < 1e-9 && Math.abs(c - 1) < 1e-9 ? u : {
+		...u,
+		transform: [
+			a,
+			o,
+			s,
+			c
+		]
+	};
+}
+function h(e) {
+	return "tile" in e.pattern ? e.pattern : null;
+}
+function g(e, t, n = u) {
+	let r = {
+		tile: e,
+		color: t,
+		size: n
+	};
+	return e === "chunks" && (r.bg = "#00000000"), {
+		fill: "pattern",
+		pattern: r,
+		units: "bounds"
+	};
+}
+function _(n) {
+	let { value: _, color: v, onChange: y, className: b } = n, x = h(_), S = x?.size ?? u, C = (e) => {
+		let t = g(e, v, S);
+		y(_.transform ? {
+			...t,
+			transform: _.transform
+		} : t);
+	}, w = (e) => {
+		x && y({
+			..._,
+			pattern: {
+				...x,
+				size: e
+			}
+		});
+	};
+	return /* @__PURE__ */ a("div", {
+		className: [s.root, b].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ i("div", {
+				className: s.grid,
+				children: c.map((e) => {
+					let t = {
+						tile: e,
+						color: v,
+						size: d
+					};
+					e === "chunks" && (t.bg = "#00000000");
+					let n = x?.tile === e;
+					return /* @__PURE__ */ i("button", {
+						type: "button",
+						className: [s.swatch, n && s.swatchActive].filter(Boolean).join(" "),
+						style: { "--tile-preview": o(t) },
+						title: e,
+						"aria-label": e,
+						"aria-pressed": n,
+						onClick: () => C(e)
+					}, e);
+				})
+			}),
+			/* @__PURE__ */ i(t, {
+				items: l,
+				value: S,
+				size: "sm",
+				ariaLabel: "Tile size",
+				onChange: (e) => e != null && w(e)
+			}),
+			/* @__PURE__ */ i(e, {
+				label: "Rotation",
+				orientation: "row",
+				width: "fit",
+				value: p(r(_.transform).rotation),
+				step: 15,
+				formatOptions: f,
+				onChange: (e) => Number.isFinite(e) && y(m(_, e))
+			})
+		]
+	});
+}
+//#endregion
+export { g as n, _ as t };
+
+//# sourceMappingURL=PatternPicker-CaMYXzhF.js.map

package/dist/chunks/PatternPicker-CaMYXzhF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PatternPicker-CaMYXzhF.js","names":["s","NumberField","PatternPicker_module_default","TILES","TILE_SIZES","DEFAULT_TILE_SIZE","PREVIEW_SIZE","DEGREES","toDegrees","folded","rad","withRotation","parts","decomposePatternTransform","value","b","c","d","composePatternTransform","degrees","_drop","rest","specOf","fill","seedPattern","spec","from","tile","PatternPicker","props","size","pick","seeded","color","resize","onChange","nextSize","className","preview","selected","tilePreviewCssUrl","ToggleBar","v","deg"],"sources":["../../src/components/PatternPicker/PatternPicker.module.css","../../src/components/PatternPicker/PatternPicker.tsx"],"sourcesContent":["/* Tile grid over the size switch. */\n.root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(var(--wzl-swatch-size, 28px), 1fr));\n  gap: 0;\n}\n\n/* The swatch's whole face is its own tile, so it must not carry a flat\n   background — and the tile repeats at its own scale, not the swatch's. */\n.swatch {\n  width: 100%;\n  aspect-ratio: 1 / 1;\n  min-width: 0;\n  padding: 0;\n  border: 0.5px solid var(--wzl-border);\n  border-radius: 0;\n  cursor: pointer;\n  background-color: var(--wzl-surface-sunken);\n  background-image: var(--tile-preview);\n  background-repeat: repeat;\n  background-size: 16px 16px;\n  background-clip: padding-box;\n}\n\n.swatch:hover {\n  border-color: var(--wzl-fg-muted);\n}\n\n.swatchActive {\n  border-color: var(--wzl-accent);\n  box-shadow: 0 0 0 1px var(--wzl-accent);\n}\n","import type { ReactElement } from 'react';\nimport type { CSSProperties } from 'react';\nimport {\n  composePatternTransform,\n  decomposePatternTransform,\n  type FillStyle,\n  type TilePatternSpec,\n} from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\nimport { NumberField } from '../NumberField';\nimport { ToggleBar } from '../ToggleBar';\nimport s from './PatternPicker.module.css';\n\n/** The `pattern` member of the paint union. */\nexport type PatternFill = Extract<FillStyle, { fill: 'pattern' }>;\n\nconst TILES: readonly TilePatternSpec['tile'][] = ['hatch', 'crosshatch', 'dots', 'chunks'];\n\n/** Tile sizes the picker offers, coarse enough that each reads as a\n *  distinct texture rather than a nudge. */\nconst TILE_SIZES: readonly { value: number; label: string }[] = [\n  { value: 4, label: 'S' },\n  { value: 8, label: 'M' },\n  { value: 16, label: 'L' },\n  { value: 32, label: 'XL' },\n];\n\nconst DEFAULT_TILE_SIZE = 8;\n\n/** Every swatch previews at one size so the grid compares tiles, not scales. */\nconst PREVIEW_SIZE = 16;\n\nconst DEGREES: Intl.NumberFormatOptions = { style: 'unit', unit: 'degree', unitDisplay: 'narrow', maximumFractionDigits: 1 };\n\n/** Rotation in degrees, folded into (-180, 180]. */\nfunction toDegrees(rad: number): number {\n  const deg = (rad * 180) / Math.PI;\n  const folded = ((((deg + 180) % 360) + 360) % 360) - 180;\n  return folded === -180 ? 180 : folded;\n}\n\n/** `value` with its transform's rotation replaced, the transform dropped when\n *  nothing is left of it. */\nfunction withRotation(value: PatternFill, degrees: number): PatternFill {\n  const parts = decomposePatternTransform(value.transform);\n  const [a, b, c, d] = composePatternTransform({ ...parts, rotation: (degrees * Math.PI) / 180 });\n  const { transform: _drop, ...rest } = value;\n  const identity = Math.abs(a - 1) < 1e-9 && Math.abs(b) < 1e-9 && Math.abs(c) < 1e-9 && Math.abs(d - 1) < 1e-9;\n  return identity ? rest : { ...rest, transform: [a, b, c, d] };\n}\n\n/** The spec a pattern paint carries, if it carries one. A consumer-built\n *  `TextureHandle` has no spec, so the picker shows no tile selected and\n *  replaces it wholesale on the next click. */\nfunction specOf(fill: PatternFill): TilePatternSpec | null {\n  return 'tile' in fill.pattern ? fill.pattern : null;\n}\n\n/**\n * A pattern seeded from a color. `units: 'bounds'` anchors the tile to the\n * node's box, so the texture travels with the shape.\n */\nexport function seedPattern(\n  tile: TilePatternSpec['tile'],\n  from: string,\n  size: number = DEFAULT_TILE_SIZE,\n): PatternFill {\n  const spec: TilePatternSpec = { tile, color: from, size };\n  // `chunks` is a scatter over a ground rather than a line texture; without a\n  // background it reads as loose specks on whatever sits beneath.\n  if (tile === 'chunks') spec.bg = '#00000000';\n  return { fill: 'pattern', pattern: spec, units: 'bounds' };\n}\n\n/** Props for {@link PatternPicker}. */\nexport interface PatternPickerProps {\n  /** The pattern paint being edited. */\n  value: PatternFill;\n  /** The color new tiles are seeded with — the paint's own, normally. */\n  color: string;\n  /** Committed value: one call per click. A tile pick, a size change and a\n   *  committed rotation are each a complete gesture, so there is no `onInput`. */\n  onChange: (next: PatternFill) => void;\n  className?: string;\n}\n\n/**\n * Grid of tile swatches over a size switch and a rotation field, each swatch\n * previewing the real tile at the current color. Rotation edits only the\n * rotation part of the paint's `transform`; scale and skew survive it.\n *\n * The preview shares its shape mapper with what the renderer paints, so a\n * swatch cannot drift from the texture it selects.\n */\nexport function PatternPicker(props: PatternPickerProps): ReactElement {\n  const { value, color, onChange, className } = props;\n  const spec = specOf(value);\n  const size = spec?.size ?? DEFAULT_TILE_SIZE;\n\n  const pick = (tile: TilePatternSpec['tile']): void => {\n    const seeded = seedPattern(tile, color, size);\n    onChange(value.transform ? { ...seeded, transform: value.transform } : seeded);\n  };\n\n  const resize = (nextSize: number): void => {\n    if (!spec) return;\n    onChange({ ...value, pattern: { ...spec, size: nextSize } });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <div className={s.grid}>\n        {TILES.map((tile) => {\n          const preview: TilePatternSpec = { tile, color, size: PREVIEW_SIZE };\n          if (tile === 'chunks') preview.bg = '#00000000';\n          const selected = spec?.tile === tile;\n          return (\n            <button\n              key={tile}\n              type=\"button\"\n              className={[s.swatch, selected && s.swatchActive].filter(Boolean).join(' ')}\n              style={{ ['--tile-preview' as string]: tilePreviewCssUrl(preview) } as CSSProperties}\n              title={tile}\n              aria-label={tile}\n              aria-pressed={selected}\n              onClick={() => pick(tile)}\n            />\n          );\n        })}\n      </div>\n      <ToggleBar<number>\n        items={TILE_SIZES}\n        value={size}\n        size=\"sm\"\n        ariaLabel=\"Tile size\"\n        onChange={(v) => v != null && resize(v)}\n      />\n      <NumberField\n        label=\"Rotation\"\n        orientation=\"row\"\n        width=\"fit\"\n        value={toDegrees(decomposePatternTransform(value.transform).rotation)}\n        step={15}\n        formatOptions={DEGREES}\n        onChange={(deg) => Number.isFinite(deg) && onChange(withRotation(value, deg))}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Plot2D-CTXHkL5p.js → Plot2D-BHNbgCAl.js}

@@ -56,12 +56,12 @@ function v(e, t) {
 	return /^-0(\.0*)?$/.test(n) ? n.slice(1) : n;
 }
 var y = {
-	root: "_root_4yjln_1",
-	grid: "_grid_4yjln_32",
-	axis: "_axis_4yjln_38",
-	tick: "_tick_4yjln_44",
-	tickLabels: "_tickLabels_4yjln_50",
-	tickLabel: "_tickLabel_4yjln_50"
+	root: "_root_1arba_1",
+	grid: "_grid_1arba_32",
+	axis: "_axis_1arba_38",
+	tick: "_tick_1arba_44",
+	tickLabels: "_tickLabels_1arba_50",
+	tickLabel: "_tickLabel_1arba_50"
 }, b = {
 	x: 64,
 	y: 24
@@ -289,4 +289,4 @@ var w = r(function(r, p) {
 //#endregion
 export { h as a, f as c, _ as i, v as n, g as o, m as r, d as s, w as t };
 
-//# sourceMappingURL=Plot2D-CTXHkL5p.js.map
+//# sourceMappingURL=Plot2D-BHNbgCAl.js.map

package/dist/chunks/Plot2D-BHNbgCAl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plot2D-BHNbgCAl.js","names":["s","dlog","modelToPlot","xFrac","p","m","yFrac","plot","plotToModel","MAX_DECIMALS","niceStep","mag","rough","norm","stepDecimals","step","tickDecimals","most","v","values","d","niceTicks","none","lo","range","hi","span","options","pixels","minSpacing","unitsPerPx","decimals","from","inset","to","first","last","i","formatTick","text","value","ctx","Plot2D_module_default","TICK_SPACING_PX","TICK_INSET_PX","LABEL_GAP_PX","resolveTicks","settings","eps","gaps","even","g","set","axis","format","toPlot","Plot2D","forwardRef","props","svgRef","useRef","modelRange","useMemo","xRange","yRange","plotSize","width","height","clientToPlot","useCallback","rect","left","top","useEffect","useImperativeHandle","ref","pt","handlePointerDown","onPointerDown","model","xTickList","xTicks","yTickList","yTicks","yInside","yLabelsRef","yLabelWidth","setYLabelWidth","useState","yLabelKey","t","measure","widest","el","prev","live","cls","className","renderTickLines","list","renderTickLabels","placement","outside","gap","place","grid","divisions","stroke","fractions","f","axes","children"],"sources":["../../src/components/Plot2D/geometry.ts","../../src/components/Plot2D/ticks.ts","../../src/components/Plot2D/Plot2D.module.css","../../src/components/Plot2D/Plot2D.tsx"],"sourcesContent":["/**\n * Coordinate transforms (model ↔ plot) for Plot2D. Pure / deterministic —\n * no DOM, no React, no state.\n *\n * Model space: caller-defined xRange × yRange. Y axis goes UP.\n * Plot space: 0..width × 0..height in CSS pixels. Y axis goes DOWN (SVG).\n */\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\n/**\n * The caller-defined extent of model space, the coordinate system a plot's\n * data lives in.\n */\nexport interface ModelRange {\n  xMin: number;\n  xMax: number;\n  yMin: number;\n  yMax: number;\n}\n\n/** The plot's drawing area in CSS pixels. */\nexport interface PlotSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Maps a model-space point into plot space, flipping the y axis so model y\n * grows upward while SVG y grows downward.\n */\nexport function modelToPlot(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = (p.x - m.xMin) / (m.xMax - m.xMin);\n  const yFrac = (p.y - m.yMin) / (m.yMax - m.yMin);\n  return {\n    x: xFrac * plot.width,\n    // Invert y so model y=0 sits at plot bottom (SVG y grows downward).\n    y: (1 - yFrac) * plot.height,\n  };\n}\n\n/** The inverse of {@link modelToPlot}. */\nexport function plotToModel(p: Point, m: ModelRange, plot: PlotSize): Point {\n  const xFrac = p.x / plot.width;\n  const yFrac = 1 - p.y / plot.height;\n  return {\n    x: m.xMin + xFrac * (m.xMax - m.xMin),\n    y: m.yMin + yFrac * (m.yMax - m.yMin),\n  };\n}\n","/**\n * Tick placement for a numeric axis. Pure — no DOM, no React.\n */\n\n/** What a tick label formatter knows about the column it is part of. */\nexport interface TickFormatCtx {\n  /** Places after the point that every label in the column shares. */\n  decimals: number;\n  /** Distance between neighboring ticks, or 0 when the ticks were given\n   *  explicitly and are not evenly spaced. */\n  step: number;\n}\n\n/** Turns a tick value into its label. */\nexport type TickFormatter = (value: number, ctx: TickFormatCtx) => string;\n\n/** A column of ticks and the facts its labels share. */\nexport interface TickSet {\n  values: number[];\n  step: number;\n  decimals: number;\n}\n\n/** Options for {@link niceTicks}. */\nexport interface NiceTickOptions {\n  /** Smallest gap between neighboring ticks, in px. */\n  minSpacing: number;\n  /** Ticks closer than this to either end of the axis are dropped, in px.\n   *  Default 0. */\n  inset?: number;\n}\n\nconst MAX_DECIMALS = 20;\n\n/** The smallest of 1, 2 or 5 times a power of ten that is at least `rough`. */\nexport function niceStep(rough: number): number {\n  const mag = Math.pow(10, Math.floor(Math.log10(rough)));\n  const norm = rough / mag;\n  const step = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;\n  return step * mag;\n}\n\n/** Places after the point a multiple of `step` needs, for a 1/2/5 step. */\nexport function stepDecimals(step: number): number {\n  if (!(step > 0) || !Number.isFinite(step)) return 0;\n  return Math.min(MAX_DECIMALS, Math.max(0, -Math.floor(Math.log10(step) + 1e-9)));\n}\n\n/** The most places after the point any of `values` needs. */\nexport function tickDecimals(values: readonly number[]): number {\n  let most = 0;\n  for (const v of values) {\n    if (!Number.isFinite(v)) continue;\n    let d = 0;\n    while (d < MAX_DECIMALS && Math.abs(Number(v.toFixed(d)) - v) > 1e-9 * Math.max(1, Math.abs(v))) d++;\n    most = Math.max(most, d);\n  }\n  return most;\n}\n\n/**\n * Ticks at round values across `range`, drawn `pixels` long: the finest\n * 1/2/5 step that keeps neighbors `minSpacing` px apart, so a taller plot\n * gets more of them.\n */\nexport function niceTicks(\n  range: readonly [number, number],\n  pixels: number,\n  options: NiceTickOptions,\n): TickSet {\n  const none: TickSet = { values: [], step: 0, decimals: 0 };\n  const lo = Math.min(range[0], range[1]);\n  const hi = Math.max(range[0], range[1]);\n  const span = hi - lo;\n  const { minSpacing, inset = 0 } = options;\n  if (!(span > 0) || !Number.isFinite(span) || !(pixels > 0) || !(minSpacing > 0)) return none;\n\n  const unitsPerPx = span / pixels;\n  const step = niceStep(minSpacing * unitsPerPx);\n  const decimals = stepDecimals(step);\n  const from = lo + inset * unitsPerPx;\n  const to = hi - inset * unitsPerPx;\n  // A tolerance in step units, so a tick sitting exactly on a bound survives\n  // the float error in `from / step`.\n  const first = Math.ceil(from / step - 1e-9);\n  const last = Math.floor(to / step + 1e-9);\n  const values: number[] = [];\n  for (let i = first; i <= last; i++) values.push(Number((i * step).toFixed(decimals)) + 0);\n  return { values, step, decimals };\n}\n\n/** The default label: `value` fixed to the column's shared decimals, with\n *  no negative zero. */\nexport function formatTick(value: number, ctx: TickFormatCtx): string {\n  const text = value.toFixed(ctx.decimals);\n  return /^-0(\\.0*)?$/.test(text) ? text.slice(1) : text;\n}\n",".root {\n  /* Component-local vars layered over theme tokens. Consumers override\n   * either the plot-* var (component scope) or the wzl-* token (app\n   * scope). */\n  --plot-bg: var(--wzl-surface-sunken);\n  --plot-grid: var(--wzl-line);\n  /* Axes get full foreground contrast — they're the plot frame, the\n   * most prominent structural element after caller-rendered content. */\n  --plot-axis: var(--wzl-fg);\n  --plot-tick: var(--wzl-line-subtle);\n  --plot-tick-label: var(--wzl-fg-muted);\n  /* Knocks the tick line out from behind an inside label. */\n  --plot-tick-label-halo: var(--plot-bg);\n\n  display: block;\n  /* Caller-rendered marks at the very edge (e.g. CurveEditor anchors)\n   * extend past the SVG box by their radius — let them paint over the\n   * host page instead of being half-clipped. */\n  overflow: visible;\n  background: var(--plot-bg);\n  user-select: none;\n  touch-action: none;\n  outline: none;\n}\n\n/* Keyboard-only focus ring. Caller opts in via `tabIndex`. */\n.root:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.grid {\n  stroke: var(--plot-grid);\n  stroke-width: 1;\n  fill: none;\n}\n\n.axis {\n  stroke: var(--plot-axis);\n  stroke-width: var(--wzl-line-width);\n  fill: none;\n}\n\n.tick {\n  stroke: var(--plot-tick);\n  stroke-width: 1;\n  fill: none;\n}\n\n.tickLabels { pointer-events: none; }\n\n.tickLabel {\n  fill: var(--plot-tick-label);\n  font-size: var(--wzl-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  font-family: var(--wzl-font-numeric);\n}\n\n.tickLabel[data-placement='inside'] {\n  stroke: var(--plot-tick-label-halo);\n  stroke-width: 3px;\n  stroke-linejoin: round;\n  paint-order: stroke;\n}\n","import {\n  forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\nimport {\n  modelToPlot, plotToModel,\n  type ModelRange, type Point,\n} from './geometry';\nimport {\n  formatTick, niceTicks, tickDecimals,\n  type TickFormatCtx, type TickFormatter,\n} from './ticks';\nimport s from './Plot2D.module.css';\nimport { dlog } from '../../dlog';\n\n/** Background grid configuration for a {@link Plot2D}. */\nexport interface GridSettings {\n  /** Number of evenly-spaced internal grid lines per axis (excluding\n   *  the edges). Applied to both x and y. Default 3. */\n  divisions?: number;\n  /** Stroke color override. When omitted, uses `var(--plot-grid)`. */\n  color?: string;\n}\n\n/** Axis-line configuration for a {@link Plot2D}. */\nexport interface AxesSettings {\n  /** Stroke color override. When omitted, uses `var(--plot-axis)`. */\n  color?: string;\n}\n\n/**\n * Ticks along one axis of a {@link Plot2D}: a line across the plot at each\n * tick value, and a label naming it. Every label in a column is formatted\n * to the same number of decimal places.\n */\nexport interface TickSettings {\n  /** Tick values in model space; any outside the range are skipped.\n   *  Omitted = round 1/2/5 steps, as many as `minSpacing` allows at the\n   *  plot's current size. */\n  values?: readonly number[];\n  /** Smallest gap between generated ticks, in px. Default 24 on y, 64 on x. */\n  minSpacing?: number;\n  /** A generated tick nearer either end of the axis than this is dropped,\n   *  so its label stays on the plot, in px. Default 4 on y, 16 on x. */\n  inset?: number;\n  /** Draw a line across the plot at each tick. Default true. */\n  lines?: boolean;\n  /** Where labels sit: `'inside'` the plot along its left (y) or bottom (x)\n   *  edge, `'outside'` it past that edge in space the caller leaves free,\n   *  or `false` for none. Default `'inside'`. */\n  labels?: 'inside' | 'outside' | false;\n  /** Space between a label and the plot edge it sits against, in px.\n   *  Default 4. */\n  gap?: number;\n  /** Label text for a tick. Default {@link formatTick}. */\n  format?: TickFormatter;\n}\n\n/** A pointer position given in both of the plot's coordinate systems. */\nexport interface Plot2DCoords {\n  plot: Point;\n  model: Point;\n}\n\n/** Props for {@link Plot2D}. */\nexport interface Plot2DProps {\n  width: number;\n  height: number;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  /** Background grid. `false` / `null` / omitted = no grid. Pass `{}`\n   *  for default (3 divisions per axis) or populated GridSettings. */\n  grid?: GridSettings | false | null;\n  /** Axis lines. `false` / `null` = no axes. Omitted = default-styled\n   *  axes (on). Pass AxesSettings to customize. */\n  axes?: AxesSettings | false | null;\n  /** Ticks at x values. `false` / `null` / omitted = none; `{}` = defaults. */\n  xTicks?: TickSettings | false | null;\n  /** Ticks at y values. `false` / `null` / omitted = none; `{}` = defaults. */\n  yTicks?: TickSettings | false | null;\n  /** Forwarded to the underlying svg. Consumer opts into focus this way. */\n  tabIndex?: number;\n  /** Default `'img'`. A plot holding focusable marks must not be an image,\n   *  whose children are presentational to assistive technology. */\n  role?: string;\n  'aria-label'?: string;\n  className?: string;\n  style?: CSSProperties;\n  /** Pointer down on the SVG. Receives both plot- and model-space coords\n   *  pre-computed so consumers don't repeat the rect/transform dance. */\n  onPointerDown?: (e: ReactPointerEvent<SVGSVGElement>, coords: Plot2DCoords) => void;\n  onKeyDown?: (e: ReactKeyboardEvent<SVGSVGElement>) => void;\n  children?: ReactNode;\n}\n\n/**\n * Imperative handle on a {@link Plot2D}: the SVG element, its size, and the\n * coordinate conversions, including ones that start from a raw DOM event so a\n * drag tracked on `window` can still map back into the plot.\n */\nexport interface Plot2DHandle {\n  readonly svg: SVGSVGElement | null;\n  plotToModel(pt: Point): Point;\n  modelToPlot(pt: Point): Point;\n  /** Convert a DOM event's clientX/clientY (e.g. from a window-attached\n   *  pointermove during drag) to plot-space. */\n  clientToPlot(e: { clientX: number; clientY: number }): Point;\n  /** Convenience: clientToPlot → plotToModel. */\n  clientToModel(e: { clientX: number; clientY: number }): Point;\n  readonly width: number;\n  readonly height: number;\n}\n\ntype Axis = 'x' | 'y';\n\nconst TICK_SPACING_PX: Record<Axis, number> = { x: 64, y: 24 };\nconst TICK_INSET_PX: Record<Axis, number> = { x: 16, y: 4 };\nconst LABEL_GAP_PX = 4;\n\ninterface ResolvedTick {\n  value: number;\n  /** Plot-space position along the axis. */\n  at: number;\n  label: string;\n}\n\nfunction resolveTicks(\n  settings: TickSettings,\n  axis: Axis,\n  range: readonly [number, number],\n  pixels: number,\n  toPlot: (v: number) => number,\n): ResolvedTick[] {\n  let values: number[];\n  let ctx: TickFormatCtx;\n  if (settings.values) {\n    const lo = Math.min(range[0], range[1]);\n    const hi = Math.max(range[0], range[1]);\n    const eps = (hi - lo) * 1e-9;\n    values = settings.values.filter((v) => v >= lo - eps && v <= hi + eps);\n    const gaps = values.slice(1).map((v, i) => v - values[i]);\n    const even = gaps.length > 0 && gaps.every((g) => Math.abs(g - gaps[0]) <= Math.abs(gaps[0]) * 1e-9);\n    ctx = { decimals: tickDecimals(values), step: even ? gaps[0] : 0 };\n  } else {\n    const set = niceTicks(range, pixels, {\n      minSpacing: settings.minSpacing ?? TICK_SPACING_PX[axis],\n      inset: settings.inset ?? TICK_INSET_PX[axis],\n    });\n    values = set.values;\n    ctx = { decimals: set.decimals, step: set.step };\n  }\n  const format = settings.format ?? formatTick;\n  return values.map((value) => ({ value, at: toPlot(value), label: format(value, ctx) }));\n}\n\n/**\n * An SVG plotting surface with an optional grid, axes and ticks. It draws the\n * frame and owns the model-space to plot-space mapping; the plotted content is\n * whatever children are passed, positioned in plot space.\n */\nexport const Plot2D = forwardRef<Plot2DHandle, Plot2DProps>(function Plot2D(props, ref) {\n  const {\n    width, height,\n    xRange = [0, 1],\n    yRange = [0, 1],\n    grid,\n    axes,\n    xTicks,\n    yTicks,\n    tabIndex,\n    role = 'img',\n    className,\n    style,\n    onPointerDown,\n    onKeyDown,\n    children,\n  } = props;\n\n  const svgRef = useRef<SVGSVGElement | null>(null);\n\n  const modelRange: ModelRange = useMemo(\n    () => ({ xMin: xRange[0], xMax: xRange[1], yMin: yRange[0], yMax: yRange[1] }),\n    [xRange, yRange],\n  );\n\n  const plotSize = useMemo(() => ({ width, height }), [width, height]);\n\n  const clientToPlot = useCallback((e: { clientX: number; clientY: number }): Point => {\n    const rect = svgRef.current?.getBoundingClientRect();\n    const left = rect?.left ?? 0;\n    const top = rect?.top ?? 0;\n    return { x: e.clientX - left, y: e.clientY - top };\n  }, []);\n\n  useEffect(() => {\n    dlog('plot2d', 'mount', { width, height });\n    return () => dlog('plot2d', 'unmount');\n    // Mount/unmount trace: re-running on a resize would log a spurious mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  useImperativeHandle(ref, () => ({\n    get svg() { return svgRef.current; },\n    plotToModel: (pt: Point) => plotToModel(pt, modelRange, plotSize),\n    modelToPlot: (pt: Point) => modelToPlot(pt, modelRange, plotSize),\n    clientToPlot,\n    clientToModel: (e) => plotToModel(clientToPlot(e), modelRange, plotSize),\n    get width() { return plotSize.width; },\n    get height() { return plotSize.height; },\n  }), [modelRange, plotSize, clientToPlot]);\n\n  const handlePointerDown = useCallback((e: ReactPointerEvent<SVGSVGElement>) => {\n    if (!onPointerDown) return;\n    const plot = clientToPlot(e);\n    const model = plotToModel(plot, modelRange, plotSize);\n    onPointerDown(e, { plot, model });\n  }, [onPointerDown, clientToPlot, modelRange, plotSize]);\n\n  const xTickList = xTicks\n    ? resolveTicks(xTicks, 'x', xRange, width, (v) => modelToPlot({ x: v, y: yRange[0] }, modelRange, plotSize).x)\n    : [];\n  const yTickList = yTicks\n    ? resolveTicks(yTicks, 'y', yRange, height, (v) => modelToPlot({ x: xRange[0], y: v }, modelRange, plotSize).y)\n    : [];\n\n  // An inside y column is right-aligned against its widest label, which only\n  // the rendered text can say.\n  const yInside = !!yTicks && (yTicks.labels ?? 'inside') === 'inside';\n  const yLabelsRef = useRef<SVGGElement | null>(null);\n  const [yLabelWidth, setYLabelWidth] = useState(0);\n  const yLabelKey = yInside ? yTickList.map((t) => t.label).join('\\n') : '';\n  useLayoutEffect(() => {\n    if (!yInside) return;\n    const measure = (): void => {\n      let widest = 0;\n      for (const el of yLabelsRef.current?.querySelectorAll('text') ?? []) {\n        if (typeof el.getComputedTextLength === 'function') widest = Math.max(widest, el.getComputedTextLength());\n      }\n      setYLabelWidth((prev) => (prev === widest ? prev : widest));\n    };\n    measure();\n    let live = true;\n    // A web font landing after the first measure changes every width.\n    document.fonts?.ready.then(() => { if (live) measure(); });\n    return () => { live = false; };\n  }, [yInside, yLabelKey]);\n\n  const cls = [s.root, className].filter(Boolean).join(' ');\n\n  const renderTickLines = (axis: Axis, list: ResolvedTick[], settings: TickSettings | false | null | undefined) => {\n    if (!settings || settings.lines === false || list.length === 0) return null;\n    return (\n      <g>\n        {list.map((t) => (\n          <line\n            key={`t${axis}-${t.value}`}\n            data-plot-element=\"tick\"\n            data-axis={axis}\n            className={s.tick}\n            {...(axis === 'x'\n              ? { x1: t.at, x2: t.at, y1: 0, y2: height }\n              : { x1: 0, x2: width, y1: t.at, y2: t.at })}\n          />\n        ))}\n      </g>\n    );\n  };\n\n  const renderTickLabels = (axis: Axis, list: ResolvedTick[], settings: TickSettings | false | null | undefined) => {\n    if (!settings || list.length === 0) return null;\n    const placement = settings.labels ?? 'inside';\n    if (placement === false) return null;\n    const outside = placement === 'outside';\n    const gap = settings.gap ?? LABEL_GAP_PX;\n    let place: { x?: number; y?: number; textAnchor: 'start' | 'middle' | 'end'; dominantBaseline?: 'central' | 'hanging' };\n    if (axis === 'y') {\n      place = outside\n        ? { x: -gap, textAnchor: 'end', dominantBaseline: 'central' }\n        : yLabelWidth > 0\n          ? { x: gap + yLabelWidth, textAnchor: 'end', dominantBaseline: 'central' }\n          : { x: gap, textAnchor: 'start', dominantBaseline: 'central' };\n    } else {\n      place = outside\n        ? { y: height + gap, textAnchor: 'middle', dominantBaseline: 'hanging' }\n        : { y: height - gap, textAnchor: 'middle' };\n    }\n    return (\n      <g ref={axis === 'y' ? yLabelsRef : undefined} className={s.tickLabels} aria-hidden=\"true\">\n        {list.map((t) => (\n          <text\n            key={`l${axis}-${t.value}`}\n            data-plot-element=\"tick-label\"\n            data-axis={axis}\n            data-placement={placement}\n            className={s.tickLabel}\n            x={axis === 'x' ? t.at : place.x}\n            y={axis === 'y' ? t.at : place.y}\n            textAnchor={place.textAnchor}\n            dominantBaseline={place.dominantBaseline}\n          >\n            {t.label}\n          </text>\n        ))}\n      </g>\n    );\n  };\n\n  return (\n    <svg\n      ref={svgRef}\n      className={cls}\n      style={style}\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      role={role}\n      aria-label={props['aria-label']}\n      tabIndex={tabIndex}\n      onPointerDown={onPointerDown ? handlePointerDown : undefined}\n      onKeyDown={onKeyDown}\n    >\n      {grid && (() => {\n        const divisions = grid.divisions ?? 3;\n        const stroke = grid.color;\n        // Evenly-spaced internal divisions, excluding the edges (which\n        // belong to the axes). For divisions=3, fractions are 1/4, 2/4, 3/4.\n        const fractions: number[] = [];\n        for (let i = 1; i <= divisions; i++) fractions.push(i / (divisions + 1));\n        return (\n          <g>\n            {fractions.map((f) => (\n              <line\n                key={`gx-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={f * width} x2={f * width}\n                y1={0} y2={height}\n              />\n            ))}\n            {fractions.map((f) => (\n              <line\n                key={`gy-${f}`}\n                data-plot-element=\"grid\"\n                className={s.grid}\n                stroke={stroke}\n                x1={0} x2={width}\n                y1={f * height} y2={f * height}\n              />\n            ))}\n          </g>\n        );\n      })()}\n      {renderTickLines('x', xTickList, xTicks)}\n      {renderTickLines('y', yTickList, yTicks)}\n      {axes !== false && axes !== null && (() => {\n        const stroke = axes?.color;\n        return (\n          <g>\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={width}\n              y1={height} y2={height}\n            />\n            <line\n              data-plot-element=\"axis\"\n              className={s.axis}\n              stroke={stroke}\n              x1={0} x2={0}\n              y1={0} y2={height}\n            />\n          </g>\n        );\n      })()}\n      {renderTickLabels('x', xTickList, xTicks)}\n      {renderTickLabels('y', yTickList, yTicks)}\n      {children}\n    </svg>\n  );\n});\n"],"mappings":"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"}

package/dist/chunks/{PointPlotter-ldI4RrU1.js → PointPlotter-BZ_vk6gV.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./CurveEditor-DUVjd25R.js";
+import { n as e } from "./CurveEditor-jVBEqqdv.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/PointPlotter/PointPlotter.tsx
 function n(n) {
@@ -14,4 +14,4 @@ function n(n) {
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=PointPlotter-ldI4RrU1.js.map
+//# sourceMappingURL=PointPlotter-BZ_vk6gV.js.map

package/dist/chunks/{PointPlotter-ldI4RrU1.js.map → PointPlotter-BZ_vk6gV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PointPlotter-ldI4RrU1.js","names":["CurveEditor","PointPlotter","curveProps","props"],"sources":["../../src/components/PointPlotter/PointPlotter.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport {\n  CurveEditor,\n  type AnchorRenderProps,\n  type ControlPoint,\n  type CurveEditorProps,\n} from '../CurveEditor';\nimport type { GridSettings, AxesSettings, TickSettings } from '../Plot2D';\n\n/** Props for {@link PointPlotter}. */\nexport interface PointPlotterProps {\n  /** Plotted points; caller-owned. */\n  value: readonly ControlPoint[];\n  /** Fires every frame during drag with the live in-flight value. */\n  onInput: (next: ControlPoint[]) => void;\n  /** Fires once per discrete user action (drag-end, add, delete) with\n   *  the new value and the value at gesture start. Wire history here. */\n  onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  width: number;\n  height: number;\n  grid?: GridSettings | false | null;\n  axes?: AxesSettings | false | null;\n  xTicks?: TickSettings | false | null;\n  yTicks?: TickSettings | false | null;\n  /** Minimum allowed point count. User-initiated deletion is refused\n   *  while `value.length <= minPoints`. */\n  minPoints?: number;\n  /** Maximum allowed point count. User-initiated insertion is refused\n   *  while `value.length >= maxPoints`. */\n  maxPoints?: number;\n  /** How new points are added. Default `'click-empty'`. Set to `'never'`\n   *  to disable insertion entirely. */\n  addPointMode?: 'click-empty' | 'never';\n  /** Built-in undo/redo via keyboard when the component has focus.\n   *  Default `true`. See `CurveEditor.history` for details. */\n  history?: boolean;\n  /** Custom per-anchor renderer. See `CurveEditor.renderAnchor`. */\n  renderAnchor?: (info: AnchorRenderProps) => ReactNode;\n  /** Extra SVG content beneath the anchors. See `CurveEditor.decorations`. */\n  decorations?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * 2D point plotter — a CurveEditor with the curve hidden. Anchors,\n * drag, shift+click delete, right-click delete, and click-empty insert\n * are inherited from CurveEditor verbatim, so the two components share\n * gesture semantics and stay in sync as CurveEditor evolves.\n *\n * Differences from CurveEditor: no curve `<path>` drawn, no fill, no\n * endpoint pinning, no interpolation, default `addPointMode` is\n * `'click-empty'` (CurveEditor defaults to `'click-curve'`, which\n * doesn't make sense without a curve to hit-test against).\n */\nexport function PointPlotter(props: PointPlotterProps) {\n  const curveProps: CurveEditorProps = {\n    ...props,\n    addPointMode: props.addPointMode ?? 'click-empty',\n    curve: false,\n    fill: false,\n    endpoints: 'free',\n  };\n  return <CurveEditor {...curveProps} />;\n}\n"],"mappings":";;;AA2DA,SAAgBC,EAAa,GAA0B;CACrD,IAAMC,IAA+B;EACnC,GAAGC;EACH,cAAcA,EAAM,gBAAgB;EACpC,OAAO;EACP,MAAM;EACN,WAAW;CACb;CACA,OAAO,kBAACH,GAAD,EAAa,GAAIE,EAAa,CAAA;AACvC"}
+{"version":3,"file":"PointPlotter-BZ_vk6gV.js","names":["CurveEditor","PointPlotter","curveProps","props"],"sources":["../../src/components/PointPlotter/PointPlotter.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport {\n  CurveEditor,\n  type AnchorRenderProps,\n  type ControlPoint,\n  type CurveEditorProps,\n} from '../CurveEditor';\nimport type { GridSettings, AxesSettings, TickSettings } from '../Plot2D';\n\n/** Props for {@link PointPlotter}. */\nexport interface PointPlotterProps {\n  /** Plotted points; caller-owned. */\n  value: readonly ControlPoint[];\n  /** Fires every frame during drag with the live in-flight value. */\n  onInput: (next: ControlPoint[]) => void;\n  /** Fires once per discrete user action (drag-end, add, delete) with\n   *  the new value and the value at gesture start. Wire history here. */\n  onChange?: (next: ControlPoint[], prev: readonly ControlPoint[]) => void;\n  /** Model-space x range. Default [0, 1]. */\n  xRange?: readonly [number, number];\n  /** Model-space y range. Default [0, 1]. */\n  yRange?: readonly [number, number];\n  width: number;\n  height: number;\n  grid?: GridSettings | false | null;\n  axes?: AxesSettings | false | null;\n  xTicks?: TickSettings | false | null;\n  yTicks?: TickSettings | false | null;\n  /** Minimum allowed point count. User-initiated deletion is refused\n   *  while `value.length <= minPoints`. */\n  minPoints?: number;\n  /** Maximum allowed point count. User-initiated insertion is refused\n   *  while `value.length >= maxPoints`. */\n  maxPoints?: number;\n  /** How new points are added. Default `'click-empty'`. Set to `'never'`\n   *  to disable insertion entirely. */\n  addPointMode?: 'click-empty' | 'never';\n  /** Built-in undo/redo via keyboard when the component has focus.\n   *  Default `true`. See `CurveEditor.history` for details. */\n  history?: boolean;\n  /** Custom per-anchor renderer. See `CurveEditor.renderAnchor`. */\n  renderAnchor?: (info: AnchorRenderProps) => ReactNode;\n  /** Extra SVG content beneath the anchors. See `CurveEditor.decorations`. */\n  decorations?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * 2D point plotter — a CurveEditor with the curve hidden. Anchors,\n * drag, shift+click delete, right-click delete, and click-empty insert\n * are inherited from CurveEditor verbatim, so the two components share\n * gesture semantics and stay in sync as CurveEditor evolves.\n *\n * Differences from CurveEditor: no curve `<path>` drawn, no fill, no\n * endpoint pinning, no interpolation, default `addPointMode` is\n * `'click-empty'` (CurveEditor defaults to `'click-curve'`, which\n * doesn't make sense without a curve to hit-test against).\n */\nexport function PointPlotter(props: PointPlotterProps) {\n  const curveProps: CurveEditorProps = {\n    ...props,\n    addPointMode: props.addPointMode ?? 'click-empty',\n    curve: false,\n    fill: false,\n    endpoints: 'free',\n  };\n  return <CurveEditor {...curveProps} />;\n}\n"],"mappings":";;;AA2DA,SAAgBC,EAAa,GAA0B;CACrD,IAAMC,IAA+B;EACnC,GAAGC;EACH,cAAcA,EAAM,gBAAgB;EACpC,OAAO;EACP,MAAM;EACN,WAAW;CACb;CACA,OAAO,kBAACH,GAAD,EAAa,GAAIE,EAAa,CAAA;AACvC"}

package/dist/chunks/{Powerline-DNyH885r.js → Powerline-6wIFmDik.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Badge-D2aD7xVL.js";
+import { t as e } from "./Badge-jYQjrTKc.js";
 import { jsx as t } from "react/jsx-runtime";
 var n = {
 	row: "_row_1a09e_1",
@@ -39,4 +39,4 @@ function r({ segments: r, startCap: i = "flat", size: a, variant: o, depth: s, g
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=Powerline-DNyH885r.js.map
+//# sourceMappingURL=Powerline-6wIFmDik.js.map

package/dist/chunks/{Powerline-DNyH885r.js.map → Powerline-6wIFmDik.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Powerline-DNyH885r.js","names":["s","Badge","Powerline_module_default","Powerline","rest","cls","className","style","gap","segments","leftEdge","i","startCap","rightEdge","seg","depth","variant","size"],"sources":["../../src/components/Powerline/Powerline.module.css","../../src/components/Powerline/Powerline.tsx"],"sourcesContent":[".row {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--powerline-gap, 0.2em);\n}\n\n.matrix {\n  display: grid;\n  gap: var(--wzl-space-6);\n}\n\n/* Reset Badge's opinionated text defaults — Powerline segments should pick up\n * the surrounding text style instead of forcing uppercase / 10px / extra\n * tracking. Consumers can still override via className on Powerline. */\n.segment {\n  font-size: inherit;\n  text-transform: none;\n  letter-spacing: normal;\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeSize, BadgeStatus, BadgeVariant } from '../Badge/types';\nimport type { StanceProps } from '../stance';\nimport type { EdgeCap } from '../Badge/bases/edgeProfiles';\nimport s from './Powerline.module.css';\n\n/**\n * One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it\n * interactive, the same way it does on a `Badge`.\n */\nexport interface PowerlineSegment extends StanceProps {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  status?: BadgeStatus;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  onClick?: () => void;\n  href?: string;\n  'aria-label'?: string;\n}\n\n/** Props for {@link Powerline}. */\nexport interface PowerlineProps {\n  segments: PowerlineSegment[];\n  /** Left edge of the first segment. Defaults to 'flat'. */\n  startCap?: EdgeCap;\n  /** Default size for every segment (per-segment `size` wins). */\n  size?: BadgeSize;\n  /** Default variant for every segment (per-segment `variant` wins). */\n  variant?: BadgeVariant;\n  /** Protrusion depth in CSS px, passed through to every segment's base. */\n  depth?: number;\n  /** Visible gap between adjacent segments. Number → px; string → literal CSS length.\n   *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */\n  gap?: number | string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A row of chevron-linked badge segments, in the style of a shell powerline\n * prompt. Each segment's `endCap` shapes both its own right edge and the next\n * segment's left edge, so the run reads as one continuous chain.\n *\n * Built for showing a path through a sequence of steps — the inspector uses\n * it to display how input routes from tool to gesture to action to target.\n */\nexport function Powerline({\n  segments,\n  startCap = 'flat',\n  size,\n  variant,\n  depth,\n  gap,\n  className,\n  ...rest\n}: PowerlineProps) {\n  const cls = [s.row, className].filter(Boolean).join(' ');\n  const style: CSSProperties | undefined = gap !== undefined\n    ? { ['--powerline-gap' as never]: typeof gap === 'number' ? `${gap}px` : gap }\n    : undefined;\n  return (\n    <span className={cls} style={style} aria-label={rest['aria-label']}>\n      {segments.map((seg, i) => {\n        const leftEdge: EdgeCap = i === 0 ? startCap : (segments[i - 1].endCap ?? 'flat');\n        const rightEdge: EdgeCap = seg.endCap ?? 'flat';\n        return (\n          <Badge\n            key={i}\n            base=\"powerline\"\n            baseParams={{ leftEdge, rightEdge, ...(depth !== undefined && { depth }) }}\n            status={seg.status}\n            stance={seg.stance}\n            tone={seg.tone}\n            variant={seg.variant ?? variant}\n            size={seg.size ?? size}\n            onClick={seg.onClick}\n            href={seg.href}\n            aria-label={seg['aria-label']}\n            className={s.segment}\n          >\n            {seg.text}\n          </Badge>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;ACiDA,SAAgBG,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAGC,KACc;CACjB,IAAMC,IAAM,CAACL,EAAE,KAAKM,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GACjDC,IAAmCC,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAOA,KAAQ,WAAW,GAAGA,EAAI,MAAMA,EAAI;CAE/E,OACE,kBAAC,QAAD;EAAM,WAAWH;EAAY;EAAO,cAAYD,EAAK;EAClD,UAAAK,EAAS,KAAK,GAAK,MAAM;GACxB,IAAMC,IAAoBC,MAAM,IAAIC,IAAYH,EAASE,IAAI,EAAE,CAAC,UAAU,QACpEE,IAAqBC,EAAI,UAAU;GACzC,OACE,kBAACb,GAAD;IAEE,MAAK;IACL,YAAY;KAAE;KAAU;KAAW,GAAIc,MAAU,KAAA,KAAa,EAAE,SAAM;IAAG;IACzE,QAAQD,EAAI;IACZ,QAAQA,EAAI;IACZ,MAAMA,EAAI;IACV,SAASA,EAAI,WAAWE;IACxB,MAAMF,EAAI,QAAQG;IAClB,SAASH,EAAI;IACb,MAAMA,EAAI;IACV,cAAYA,EAAI;IAChB,WAAWd,EAAE;IAEZ,UAAAc,EAAI;GACA,GAdAH,CAcA;EAEX,CAAC;CACG,CAAA;AAEV"}
+{"version":3,"file":"Powerline-6wIFmDik.js","names":["s","Badge","Powerline_module_default","Powerline","rest","cls","className","style","gap","segments","leftEdge","i","startCap","rightEdge","seg","depth","variant","size"],"sources":["../../src/components/Powerline/Powerline.module.css","../../src/components/Powerline/Powerline.tsx"],"sourcesContent":[".row {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--powerline-gap, 0.2em);\n}\n\n.matrix {\n  display: grid;\n  gap: var(--wzl-space-6);\n}\n\n/* Reset Badge's opinionated text defaults — Powerline segments should pick up\n * the surrounding text style instead of forcing uppercase / 10px / extra\n * tracking. Consumers can still override via className on Powerline. */\n.segment {\n  font-size: inherit;\n  text-transform: none;\n  letter-spacing: normal;\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeSize, BadgeStatus, BadgeVariant } from '../Badge/types';\nimport type { StanceProps } from '../stance';\nimport type { EdgeCap } from '../Badge/bases/edgeProfiles';\nimport s from './Powerline.module.css';\n\n/**\n * One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it\n * interactive, the same way it does on a `Badge`.\n */\nexport interface PowerlineSegment extends StanceProps {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  status?: BadgeStatus;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  onClick?: () => void;\n  href?: string;\n  'aria-label'?: string;\n}\n\n/** Props for {@link Powerline}. */\nexport interface PowerlineProps {\n  segments: PowerlineSegment[];\n  /** Left edge of the first segment. Defaults to 'flat'. */\n  startCap?: EdgeCap;\n  /** Default size for every segment (per-segment `size` wins). */\n  size?: BadgeSize;\n  /** Default variant for every segment (per-segment `variant` wins). */\n  variant?: BadgeVariant;\n  /** Protrusion depth in CSS px, passed through to every segment's base. */\n  depth?: number;\n  /** Visible gap between adjacent segments. Number → px; string → literal CSS length.\n   *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */\n  gap?: number | string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A row of chevron-linked badge segments, in the style of a shell powerline\n * prompt. Each segment's `endCap` shapes both its own right edge and the next\n * segment's left edge, so the run reads as one continuous chain.\n *\n * Built for showing a path through a sequence of steps — the inspector uses\n * it to display how input routes from tool to gesture to action to target.\n */\nexport function Powerline({\n  segments,\n  startCap = 'flat',\n  size,\n  variant,\n  depth,\n  gap,\n  className,\n  ...rest\n}: PowerlineProps) {\n  const cls = [s.row, className].filter(Boolean).join(' ');\n  const style: CSSProperties | undefined = gap !== undefined\n    ? { ['--powerline-gap' as never]: typeof gap === 'number' ? `${gap}px` : gap }\n    : undefined;\n  return (\n    <span className={cls} style={style} aria-label={rest['aria-label']}>\n      {segments.map((seg, i) => {\n        const leftEdge: EdgeCap = i === 0 ? startCap : (segments[i - 1].endCap ?? 'flat');\n        const rightEdge: EdgeCap = seg.endCap ?? 'flat';\n        return (\n          <Badge\n            key={i}\n            base=\"powerline\"\n            baseParams={{ leftEdge, rightEdge, ...(depth !== undefined && { depth }) }}\n            status={seg.status}\n            stance={seg.stance}\n            tone={seg.tone}\n            variant={seg.variant ?? variant}\n            size={seg.size ?? size}\n            onClick={seg.onClick}\n            href={seg.href}\n            aria-label={seg['aria-label']}\n            className={s.segment}\n          >\n            {seg.text}\n          </Badge>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;ACiDA,SAAgBG,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAGC,KACc;CACjB,IAAMC,IAAM,CAACL,EAAE,KAAKM,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GACjDC,IAAmCC,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAOA,KAAQ,WAAW,GAAGA,EAAI,MAAMA,EAAI;CAE/E,OACE,kBAAC,QAAD;EAAM,WAAWH;EAAY;EAAO,cAAYD,EAAK;EAClD,UAAAK,EAAS,KAAK,GAAK,MAAM;GACxB,IAAMC,IAAoBC,MAAM,IAAIC,IAAYH,EAASE,IAAI,EAAE,CAAC,UAAU,QACpEE,IAAqBC,EAAI,UAAU;GACzC,OACE,kBAACb,GAAD;IAEE,MAAK;IACL,YAAY;KAAE;KAAU;KAAW,GAAIc,MAAU,KAAA,KAAa,EAAE,SAAM;IAAG;IACzE,QAAQD,EAAI;IACZ,QAAQA,EAAI;IACZ,MAAMA,EAAI;IACV,SAASA,EAAI,WAAWE;IACxB,MAAMF,EAAI,QAAQG;IAClB,SAASH,EAAI;IACb,MAAMA,EAAI;IACV,cAAYA,EAAI;IAChB,WAAWd,EAAE;IAEZ,UAAAc,EAAI;GACA,GAdAH,CAcA;EAEX,CAAC;CACG,CAAA;AAEV"}