@weasel-js/ui 1.2.0 → 1.3.0-pre.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"PatternPicker-B63SlDoF.js","names":[],"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: 6px;\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 type { FillStyle, TilePatternSpec } from '@weasel-js/core';\nimport { tilePreviewCssUrl } from '@weasel-js/svg';\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\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 and a size change are\n   *  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, each swatch previewing the real\n * tile at the current color.\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    onChange(seedPattern(tile, color, size));\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    </div>\n  );\n}\n"],"mappings":";;;;;;;;GCUM,IAA4C;CAAC;CAAS;CAAc;CAAQ;CAAS,EAIrF,IAA0D;CAC9D;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAG,OAAO;EAAK;CACxB;EAAE,OAAO;EAAI,OAAO;EAAK;CACzB;EAAE,OAAO;EAAI,OAAO;EAAM;CAC3B,EAEK,IAAoB,GAGpB,IAAe;AAKrB,SAAS,EAAO,GAA2C;AACzD,QAAO,UAAU,EAAK,UAAU,EAAK,UAAU;;AAOjD,SAAgB,EACd,GACA,GACA,IAAe,GACF;CACb,IAAM,IAAwB;EAAE;EAAM,OAAO;EAAM;EAAM;AAIzD,QADI,MAAS,aAAU,EAAK,KAAK,cAC1B;EAAE,MAAM;EAAW,SAAS;EAAM,OAAO;EAAU;;AAsB5D,SAAgB,EAAc,GAAyC;CACrE,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAc,GACxC,IAAO,EAAO,EAAM,EACpB,IAAO,GAAM,QAAQ,GAErB,KAAQ,MAAwC;AACpD,IAAS,EAAY,GAAM,GAAO,EAAK,CAAC;IAGpC,KAAU,MAA2B;AACpC,OACL,EAAS;GAAE,GAAG;GAAO,SAAS;IAAE,GAAG;IAAM,MAAM;IAAU;GAAE,CAAC;;AAG9D,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7D,CACE,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,EAAM,KAAK,MAAS;IACnB,IAAM,IAA2B;KAAE;KAAM;KAAO,MAAM;KAAc;AACpE,IAAI,MAAS,aAAU,EAAQ,KAAK;IACpC,IAAM,IAAW,GAAM,SAAS;AAChC,WACE,kBAAC,UAAD;KAEE,MAAK;KACL,WAAW,CAAC,EAAE,QAAQ,KAAY,EAAE,aAAa,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KAC3E,OAAO,EAAG,kBAA6B,EAAkB,EAAQ,EAAE;KACnE,OAAO;KACP,cAAY;KACZ,gBAAc;KACd,eAAe,EAAK,EAAK;KACzB,EARK,EAQL;KAEJ;GACE,CAAA,EACN,kBAAC,GAAD;GACE,OAAO;GACP,OAAO;GACP,MAAK;GACL,WAAU;GACV,WAAW,MAAM,KAAK,QAAQ,EAAO,EAAE;GACvC,CAAA,CACE"}

package/dist/chunks/{Plot2D-CEnhzodm.js → Plot2D-sPXTw_-l.js}

@@ -1,5 +1,5 @@
-import { forwardRef as e, useCallback as t, useEffect as n, useImperativeHandle as r, useMemo as i, useRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as n, useCallback as r, useEffect as i, useImperativeHandle as a, useMemo as o, useRef as s } from "react";
 //#region src/dlog.ts
 var c = ["weasel.debug", "weaseldraw.debug"], l = null;
 function u() {
@@ -54,26 +54,26 @@ var g = {
 	root: "_root_1djm7_1",
 	grid: "_grid_1djm7_28",
 	axis: "_axis_1djm7_34"
-}, _ = e(function(e, c) {
-	let { width: l, height: u, xRange: d = [0, 1], yRange: f = [0, 1], grid: _, axes: v, tabIndex: y, className: b, style: x, onPointerDown: S, onKeyDown: C, children: w } = e, T = a(null), E = i(() => ({
+}, _ = n(function(n, c) {
+	let { width: l, height: u, xRange: d = [0, 1], yRange: f = [0, 1], grid: _, axes: v, tabIndex: y, className: b, style: x, onPointerDown: S, onKeyDown: C, children: w } = n, T = s(null), E = o(() => ({
 		xMin: d[0],
 		xMax: d[1],
 		yMin: f[0],
 		yMax: f[1]
-	}), [d, f]), D = i(() => ({
+	}), [d, f]), D = o(() => ({
 		width: l,
 		height: u
-	}), [l, u]), O = t((e) => {
+	}), [l, u]), O = r((e) => {
 		let t = T.current?.getBoundingClientRect(), n = t?.left ?? 0, r = t?.top ?? 0;
 		return {
 			x: e.clientX - n,
 			y: e.clientY - r
 		};
 	}, []);
-	n(() => (p("plot2d", "mount", {
+	i(() => (p("plot2d", "mount", {
 		width: l,
 		height: u
-	}), () => p("plot2d", "unmount")), []), r(c, () => ({
+	}), () => p("plot2d", "unmount")), []), a(c, () => ({
 		get svg() {
 			return T.current;
 		},
@@ -92,7 +92,7 @@ var g = {
 		D,
 		O
 	]);
-	let k = t((e) => {
+	let k = r((e) => {
 		if (!S) return;
 		let t = O(e);
 		S(e, {
@@ -105,7 +105,7 @@ var g = {
 		E,
 		D
 	]);
-	return /* @__PURE__ */ s("svg", {
+	return /* @__PURE__ */ t("svg", {
 		ref: T,
 		className: [g.root, b].filter(Boolean).join(" "),
 		style: x,
@@ -118,40 +118,40 @@ var g = {
 		onKeyDown: C,
 		children: [
 			_ && (() => {
-				let e = _.divisions ?? 3, t = _.color, n = [];
-				for (let t = 1; t <= e; t++) n.push(t / (e + 1));
-				return /* @__PURE__ */ s("g", { children: [n.map((e) => /* @__PURE__ */ o("line", {
+				let n = _.divisions ?? 3, r = _.color, i = [];
+				for (let e = 1; e <= n; e++) i.push(e / (n + 1));
+				return /* @__PURE__ */ t("g", { children: [i.map((t) => /* @__PURE__ */ e("line", {
 					"data-plot-element": "grid",
 					className: g.grid,
-					stroke: t,
-					x1: e * l,
-					x2: e * l,
+					stroke: r,
+					x1: t * l,
+					x2: t * l,
 					y1: 0,
 					y2: u
-				}, `gx-${e}`)), n.map((e) => /* @__PURE__ */ o("line", {
+				}, `gx-${t}`)), i.map((t) => /* @__PURE__ */ e("line", {
 					"data-plot-element": "grid",
 					className: g.grid,
-					stroke: t,
+					stroke: r,
 					x1: 0,
 					x2: l,
-					y1: e * u,
-					y2: e * u
-				}, `gy-${e}`))] });
+					y1: t * u,
+					y2: t * u
+				}, `gy-${t}`))] });
 			})(),
 			v !== !1 && v !== null && (() => {
-				let e = v?.color;
-				return /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("line", {
+				let n = v?.color;
+				return /* @__PURE__ */ t("g", { children: [/* @__PURE__ */ e("line", {
 					"data-plot-element": "axis",
 					className: g.axis,
-					stroke: e,
+					stroke: n,
 					x1: 0,
 					x2: l,
 					y1: u,
 					y2: u
-				}), /* @__PURE__ */ o("line", {
+				}), /* @__PURE__ */ e("line", {
 					"data-plot-element": "axis",
 					className: g.axis,
-					stroke: e,
+					stroke: n,
 					x1: 0,
 					x2: 0,
 					y1: 0,
@@ -165,4 +165,4 @@ var g = {
 //#endregion
 export { f as a, p as i, m as n, h as r, _ as t };
 
-//# sourceMappingURL=Plot2D-CEnhzodm.js.map
+//# sourceMappingURL=Plot2D-sPXTw_-l.js.map

package/dist/chunks/{Plot2D-CEnhzodm.js.map → Plot2D-sPXTw_-l.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Plot2D-CEnhzodm.js","names":[],"sources":["../../src/dlog.ts","../../src/components/Plot2D/geometry.ts","../../src/components/Plot2D/Plot2D.module.css","../../src/components/Plot2D/Plot2D.tsx"],"sourcesContent":["/**\n * Namespaced, opt-in console tracing. Off by default; production builds\n * may strip the calls entirely depending on the bundler.\n *\n * Enable in the browser:\n *\n *   localStorage.setItem('weasel.debug', '*')               // all namespaces\n *   localStorage.setItem('weasel.debug', 'curve-editor')    // just curve editor\n *   localStorage.setItem('weasel.debug', 'curve-editor,layer-stack')\n *\n * Each component picks a stable namespace and calls `dlog(namespace, ...)`.\n * Useful for tracing pointer/event flows that are hard to capture\n * post-hoc (drag handlers, gesture sequences, selection mutations).\n *\n * The flag is read once and cached for the page session — reload to\n * pick up changes. Cheap hot-path checks (one nullish-coalesce + Set\n * lookup) so leaving calls in place is fine.\n *\n * Mirrors `src/debug/flag.ts` in the kit. Two impls live here because\n * weasel-ui doesn't depend on the kit, but both read the same\n * localStorage keys so behavior is uniform. See the kit copy for the\n * canonical list of kit-level namespaces.\n *\n * Known weasel-ui namespaces:\n *   - plot2d        — Plot2D mount / unmount\n *   - curve-editor  — CurveEditor pointer flow\n */\n\nconst KEYS = ['weasel.debug', 'weaseldraw.debug'] as const;\n\ninterface Cached {\n  all: boolean;\n  set: Set<string>;\n}\n\nlet cached: Cached | null = null;\n\nfunction read(): Cached {\n  const empty: Cached = { all: false, set: new Set() };\n  if (typeof localStorage === 'undefined') return empty;\n  try {\n    for (const k of KEYS) {\n      const v = localStorage.getItem(k);\n      if (v == null || v === '') continue;\n      if (v === '1' || v === 'true' || v === '*') return { all: true, set: new Set() };\n      return { all: false, set: new Set(v.split(/[\\s,]+/).filter(Boolean)) };\n    }\n    return empty;\n  } catch {\n    return empty;\n  }\n}\n\nfunction get(): Cached {\n  if (cached === null) cached = read();\n  return cached;\n}\n\n/** True when `namespace` (or `*`) is enabled. */\nexport function isDebugEnabled(namespace: string): boolean {\n  const c = get();\n  return c.all || c.set.has(namespace);\n}\n\n/** Conditional `console.debug` — no-op unless `namespace` (or `*`) is enabled.\n *  Each call is prefixed with `[namespace]` so the source is searchable. */\nexport function dlog(namespace: string, ...args: unknown[]): void {\n  if (!isDebugEnabled(namespace)) return;\n  // eslint-disable-next-line no-console\n  console.debug(`[${namespace}]`, ...args);\n}\n","/**\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",".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\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","import {\n  forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef,\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 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/** 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  /** Forwarded to the underlying svg. Consumer opts into focus this way. */\n  tabIndex?: number;\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\n/**\n * An SVG plotting surface with an optional grid and axes. It draws the frame\n * 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    tabIndex,\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 cls = [s.root, className].filter(Boolean).join(' ');\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=\"img\"\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      {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      {children}\n    </svg>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"Plot2D-sPXTw_-l.js","names":[],"sources":["../../src/dlog.ts","../../src/components/Plot2D/geometry.ts","../../src/components/Plot2D/Plot2D.module.css","../../src/components/Plot2D/Plot2D.tsx"],"sourcesContent":["/**\n * Namespaced, opt-in console tracing. Off by default; production builds\n * may strip the calls entirely depending on the bundler.\n *\n * Enable in the browser:\n *\n *   localStorage.setItem('weasel.debug', '*')               // all namespaces\n *   localStorage.setItem('weasel.debug', 'curve-editor')    // just curve editor\n *   localStorage.setItem('weasel.debug', 'curve-editor,layer-stack')\n *\n * Each component picks a stable namespace and calls `dlog(namespace, ...)`.\n * Useful for tracing pointer/event flows that are hard to capture\n * post-hoc (drag handlers, gesture sequences, selection mutations).\n *\n * The flag is read once and cached for the page session — reload to\n * pick up changes. Cheap hot-path checks (one nullish-coalesce + Set\n * lookup) so leaving calls in place is fine.\n *\n * Mirrors `src/debug/flag.ts` in the kit. Two impls live here because\n * weasel-ui doesn't depend on the kit, but both read the same\n * localStorage keys so behavior is uniform. See the kit copy for the\n * canonical list of kit-level namespaces.\n *\n * Known weasel-ui namespaces:\n *   - plot2d        — Plot2D mount / unmount\n *   - curve-editor  — CurveEditor pointer flow\n */\n\nconst KEYS = ['weasel.debug', 'weaseldraw.debug'] as const;\n\ninterface Cached {\n  all: boolean;\n  set: Set<string>;\n}\n\nlet cached: Cached | null = null;\n\nfunction read(): Cached {\n  const empty: Cached = { all: false, set: new Set() };\n  if (typeof localStorage === 'undefined') return empty;\n  try {\n    for (const k of KEYS) {\n      const v = localStorage.getItem(k);\n      if (v == null || v === '') continue;\n      if (v === '1' || v === 'true' || v === '*') return { all: true, set: new Set() };\n      return { all: false, set: new Set(v.split(/[\\s,]+/).filter(Boolean)) };\n    }\n    return empty;\n  } catch {\n    return empty;\n  }\n}\n\nfunction get(): Cached {\n  if (cached === null) cached = read();\n  return cached;\n}\n\n/** True when `namespace` (or `*`) is enabled. */\nexport function isDebugEnabled(namespace: string): boolean {\n  const c = get();\n  return c.all || c.set.has(namespace);\n}\n\n/** Conditional `console.debug` — no-op unless `namespace` (or `*`) is enabled.\n *  Each call is prefixed with `[namespace]` so the source is searchable. */\nexport function dlog(namespace: string, ...args: unknown[]): void {\n  if (!isDebugEnabled(namespace)) return;\n  // eslint-disable-next-line no-console\n  console.debug(`[${namespace}]`, ...args);\n}\n","/**\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",".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\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","import {\n  forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef,\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 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/** 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  /** Forwarded to the underlying svg. Consumer opts into focus this way. */\n  tabIndex?: number;\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\n/**\n * An SVG plotting surface with an optional grid and axes. It draws the frame\n * 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    tabIndex,\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 cls = [s.root, className].filter(Boolean).join(' ');\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=\"img\"\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      {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      {children}\n    </svg>\n  );\n});\n"],"mappings":"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"}

package/dist/chunks/{PointPlotter-BUIse9c4.js → PointPlotter-CLd9u5Bq.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./CurveEditor-SmwwvrsA.js";
+import { n as e } from "./CurveEditor-BaA-PabB.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/PointPlotter/PointPlotter.tsx
 function n(n) {
@@ -13,4 +13,4 @@ function n(n) {
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=PointPlotter-BUIse9c4.js.map
+//# sourceMappingURL=PointPlotter-CLd9u5Bq.js.map

package/dist/chunks/{PointPlotter-BUIse9c4.js.map → PointPlotter-CLd9u5Bq.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PointPlotter-BUIse9c4.js","names":[],"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 } 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  /** 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":";;;AAyDA,SAAgB,EAAa,GAA0B;AAQrD,QAAO,kBAAC,GAAD;EANL,GAAG;EACH,cAAc,EAAM,gBAAgB;EACpC,OAAO;EACP,MAAM;EACN,WAAW;EAEyB,CAAA"}
+{"version":3,"file":"PointPlotter-CLd9u5Bq.js","names":[],"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 } 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  /** 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":";;;AAyDA,SAAgB,EAAa,GAA0B;AAQrD,QAAO,kBAAC,GAAD;EANL,GAAG;EACH,cAAc,EAAM,gBAAgB;EACpC,OAAO;EACP,MAAM;EACN,WAAW;EAEyB,CAAA"}

package/dist/chunks/{Powerline-BYWdK8QH.js → Powerline-DhQJYaUg.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./Badge-dQzbkk-C.js";
+import { t as e } from "./Badge-9dPfvYOk.js";
 import { jsx as t } from "react/jsx-runtime";
 var n = {
 	row: "_row_q3wun_1",
@@ -33,4 +33,4 @@ function r({ segments: r, startCap: i = "flat", size: a, variant: o, depth: s, g
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=Powerline-BYWdK8QH.js.map
+//# sourceMappingURL=Powerline-DhQJYaUg.js.map

package/dist/chunks/{Powerline-BYWdK8QH.js.map → Powerline-DhQJYaUg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Powerline-BYWdK8QH.js","names":[],"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: 12px;\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, BadgeTone, BadgeVariant } from '../Badge/types';\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 {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  tone?: BadgeTone;\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            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":";;;;;;;;;ACgDA,SAAgB,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAG,KACc;AAKjB,QACE,kBAAC,QAAD;EAAM,WALI,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAKjC;EAAY,OAJU,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAO,KAAQ,WAAW,GAAG,EAAI,MAAM,GAAK;EAG1C,cAAY,EAAK;YAClD,EAAS,KAAK,GAAK,MAIhB,kBAAC,GAAD;GAEE,MAAK;GACL,YAAY;IAAE,UANQ,MAAM,IAAI,IAAY,EAAS,IAAI,GAAG,UAAU;IAM9C,WALD,EAAI,UAAU;IAKF,GAAI,MAAU,KAAA,KAAa,EAAE,UAAO;IAAG;GAC1E,MAAM,EAAI;GACV,SAAS,EAAI,WAAW;GACxB,MAAM,EAAI,QAAQ;GAClB,SAAS,EAAI;GACb,MAAM,EAAI;GACV,cAAY,EAAI;GAChB,WAAW,EAAE;aAEZ,EAAI;GACC,EAZD,EAYC,CAEV;EACG,CAAA"}
+{"version":3,"file":"Powerline-DhQJYaUg.js","names":[],"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: 12px;\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, BadgeTone, BadgeVariant } from '../Badge/types';\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 {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  tone?: BadgeTone;\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            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":";;;;;;;;;ACgDA,SAAgB,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAG,KACc;AAKjB,QACE,kBAAC,QAAD;EAAM,WALI,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAKjC;EAAY,OAJU,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAO,KAAQ,WAAW,GAAG,EAAI,MAAM,GAAK;EAG1C,cAAY,EAAK;YAClD,EAAS,KAAK,GAAK,MAIhB,kBAAC,GAAD;GAEE,MAAK;GACL,YAAY;IAAE,UANQ,MAAM,IAAI,IAAY,EAAS,IAAI,GAAG,UAAU;IAM9C,WALD,EAAI,UAAU;IAKF,GAAI,MAAU,KAAA,KAAa,EAAE,UAAO;IAAG;GAC1E,MAAM,EAAI;GACV,SAAS,EAAI,WAAW;GACxB,MAAM,EAAI,QAAQ;GAClB,SAAS,EAAI;GACb,MAAM,EAAI;GACV,cAAY,EAAI;GAChB,WAAW,EAAE;aAEZ,EAAI;GACC,EAZD,EAYC,CAEV;EACG,CAAA"}

package/dist/chunks/Prefs-BSJ0lMmJ.js

@@ -0,0 +1,300 @@
+import { n as e, t } from "./Tooltip-Di7vxbFa.js";
+import { t as n } from "./ColorField-D1t-BdSa.js";
+import { t as r } from "./Checkbox-BLEw-wEb.js";
+import { t as i } from "./Input-DhWBgpRx.js";
+import { t as a } from "./NumberField-ZdVa4bpJ.js";
+import { n as o, t as s } from "./RadioGroup-vtwjRiUm.js";
+import { t as c } from "./RangeSlider-B-n_7AgJ.js";
+import { t as l } from "./Select--BVTi-j0.js";
+import { t as u } from "./Switch-CtZwp5zm.js";
+import { t as d } from "./Dialog-DC1x46Sq.js";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { isBuiltinToolPref as h } from "@weasel-js/core";
+import { useMemo as g } from "react";
+import { Focusable as _ } from "react-aria-components";
+//#region src/components/paintValue.ts
+function v(e) {
+	if (typeof e != "object" || !e) return;
+	let t = e;
+	if (!(t.fill !== void 0 && t.fill !== "solid")) return typeof t.color == "string" ? t.color : void 0;
+}
+function y(e) {
+	if (!(typeof e != "object" || !e || !("paint" in e))) return v(e.paint);
+}
+//#endregion
+//#region src/components/Prefs/schema.ts
+function b(e) {
+	return "kind" in e;
+}
+function x(e, t) {
+	let n = e;
+	for (let e of t.split(".")) {
+		if (typeof n != "object" || !n) return;
+		n = n[e];
+	}
+	return n;
+}
+function S(e, t) {
+	if (b(e)) return e.hidden && !t ? null : e;
+	let n = e, r = {};
+	for (let [e, i] of Object.entries(n.children)) {
+		let n = S(i, t);
+		n && (r[e] = n);
+	}
+	return Object.keys(r).length === 0 ? null : {
+		...e,
+		children: r
+	};
+}
+var C = {
+	columns: "_columns_i4hcs_5",
+	column: "_column_i4hcs_5",
+	panel: "_panel_i4hcs_23",
+	subpanel: "_subpanel_i4hcs_33",
+	groupHeader: "_groupHeader_i4hcs_44",
+	groupTitle: "_groupTitle_i4hcs_57",
+	groupDesc: "_groupDesc_i4hcs_72",
+	rows: "_rows_i4hcs_79",
+	row: "_row_i4hcs_79",
+	rowLabel: "_rowLabel_i4hcs_95",
+	help: "_help_i4hcs_104",
+	rowControl: "_rowControl_i4hcs_128",
+	textarea: "_textarea_i4hcs_135",
+	unrenderable: "_unrenderable_i4hcs_147",
+	titleRow: "_titleRow_i4hcs_154",
+	objectLeaf: "_objectLeaf_i4hcs_168",
+	objectRow: "_objectRow_i4hcs_175",
+	objectLabel: "_objectLabel_i4hcs_182",
+	objectGroup: "_objectGroup_i4hcs_187"
+};
+//#endregion
+//#region src/components/Prefs/PrefsForm.tsx
+function w(e) {
+	let { schema: t, values: n, onChange: r, renderers: i, showHidden: a = !1, className: o } = e, s = g(() => S(t, a), [t, a]), c = {
+		values: n,
+		onChange: r,
+		renderers: i
+	};
+	return /* @__PURE__ */ p("div", {
+		className: [C.columns, o].filter(Boolean).join(" "),
+		children: Object.entries(s?.children ?? {}).map(([e, t]) => /* @__PURE__ */ p("div", {
+			className: C.column,
+			children: b(t) ? /* @__PURE__ */ p(E, {
+				ctx: c,
+				path: e,
+				pref: t
+			}) : /* @__PURE__ */ p(T, {
+				ctx: c,
+				group: t,
+				path: e,
+				depth: 0
+			})
+		}, e))
+	});
+}
+function T({ ctx: e, group: t, path: n, depth: r }) {
+	return /* @__PURE__ */ m("div", {
+		className: r === 0 ? C.panel : C.subpanel,
+		children: [/* @__PURE__ */ m("div", {
+			className: C.groupHeader,
+			children: [/* @__PURE__ */ p("h3", {
+				className: C.groupTitle,
+				children: t.name
+			}), t.description !== void 0 && /* @__PURE__ */ p("p", {
+				className: C.groupDesc,
+				children: t.description
+			})]
+		}), /* @__PURE__ */ p("div", {
+			className: C.rows,
+			children: Object.entries(t.children).map(([t, i]) => {
+				let a = `${n}.${t}`;
+				return b(i) ? /* @__PURE__ */ p(E, {
+					ctx: e,
+					path: a,
+					pref: i
+				}, t) : /* @__PURE__ */ p(T, {
+					ctx: e,
+					group: i,
+					path: a,
+					depth: r + 1
+				}, t);
+			})
+		})]
+	});
+}
+function E({ ctx: n, path: r, pref: i }) {
+	let a = x(n.values, r), o = {
+		path: r,
+		pref: i,
+		value: a === void 0 ? i.default : a,
+		setValue: (e) => n.onChange(r, e)
+	}, s = n.renderers?.[i.kind], c = s ? s(o) : D(o);
+	return s && c === null ? null : i.block ? /* @__PURE__ */ p(f, { children: c }) : /* @__PURE__ */ m("label", {
+		className: C.row,
+		children: [/* @__PURE__ */ m("span", {
+			className: C.rowLabel,
+			children: [i.name, i.description ? /* @__PURE__ */ m(e, { children: [/* @__PURE__ */ p(_, { children: /* @__PURE__ */ p("button", {
+				type: "button",
+				className: C.help,
+				"aria-label": `About ${i.name}`,
+				children: "ⓘ"
+			}) }), /* @__PURE__ */ p(t, { children: i.description })] }) : null]
+		}), /* @__PURE__ */ p("span", {
+			className: C.rowControl,
+			children: c
+		})]
+	});
+}
+function D(e, t) {
+	let { pref: d, value: f, setValue: g } = e;
+	if (!h(d)) return /* @__PURE__ */ m("span", {
+		className: C.unrenderable,
+		children: [
+			"(",
+			d.kind,
+			": no renderer)"
+		]
+	});
+	switch (d.kind) {
+		case "boolean": {
+			let e = !!f;
+			return d.control === "switch" ? /* @__PURE__ */ p(u, {
+				isSelected: e,
+				onChange: g,
+				"aria-label": d.name
+			}) : /* @__PURE__ */ p(r, {
+				isSelected: e,
+				onChange: g,
+				"aria-label": d.name
+			});
+		}
+		case "number": {
+			let e = typeof f == "number" && Number.isFinite(f) ? f : 0;
+			return d.control === "slider" ? /* @__PURE__ */ p(c, {
+				value: e,
+				onChange: (e) => g(typeof e == "number" ? e : e[0]),
+				minValue: d.min,
+				maxValue: d.max,
+				step: d.step ?? 1,
+				"aria-label": d.name
+			}) : /* @__PURE__ */ p(a, {
+				value: e,
+				onChange: g,
+				minValue: d.min,
+				maxValue: d.max,
+				step: d.step ?? 1,
+				"aria-label": d.name
+			});
+		}
+		case "string": {
+			let e = typeof f == "string" ? f : "";
+			return d.control === "textarea" ? /* @__PURE__ */ p("textarea", {
+				className: C.textarea,
+				value: e,
+				onChange: (e) => g(e.target.value),
+				"aria-label": d.name,
+				rows: 3
+			}) : /* @__PURE__ */ p(i, {
+				value: e,
+				onChange: g,
+				"aria-label": d.name
+			});
+		}
+		case "enum": {
+			let e = d.encoding, n = e ? e.read(f, t) : typeof f == "string" ? f : d.default, r = (n) => g(e ? e.write(n, t) : n);
+			return d.control === "radio" ? /* @__PURE__ */ p(o, {
+				value: n ?? null,
+				onChange: r,
+				"aria-label": d.name,
+				children: d.options.map((e) => /* @__PURE__ */ p(s, {
+					value: e.value,
+					isDisabled: e.disabled,
+					children: e.label
+				}, e.value))
+			}) : /* @__PURE__ */ p(l, {
+				options: d.options.map((e) => ({
+					value: e.value,
+					label: e.label,
+					isDisabled: e.disabled
+				})),
+				selectedKey: n ?? null,
+				onSelectionChange: r,
+				"aria-label": d.name
+			});
+		}
+		case "color": return /* @__PURE__ */ p(n, {
+			value: typeof f == "string" ? f : d.default,
+			alpha: d.alpha,
+			onChange: g,
+			"aria-label": d.name
+		});
+		case "paint": return /* @__PURE__ */ p(n, {
+			value: v(f) ?? v(d.default),
+			alpha: d.alpha,
+			onChange: (e) => g({
+				fill: "solid",
+				color: e
+			}),
+			"aria-label": d.name
+		});
+		case "object": {
+			let t = d, n = typeof f == "object" && f ? f : void 0, r = (i) => {
+				let a = [];
+				for (let [o, s] of Object.entries(i)) {
+					if (!b(s)) {
+						let e = r(s.children);
+						if (e.length === 0) continue;
+						a.push(/* @__PURE__ */ p("h4", {
+							className: C.objectGroup,
+							children: s.name
+						}, `group:${o}`), ...e);
+						continue;
+					}
+					a.push(/* @__PURE__ */ m("label", {
+						className: C.objectRow,
+						children: [/* @__PURE__ */ p("span", {
+							className: C.objectLabel,
+							children: s.name
+						}), D({
+							path: `${e.path}.${o}`,
+							pref: s,
+							value: n?.[o],
+							setValue: (e) => {
+								g({
+									...n ?? t.fromScalar?.(f) ?? {},
+									[o]: e
+								});
+							}
+						}, n)]
+					}, o));
+				}
+				return a;
+			};
+			return /* @__PURE__ */ p("div", {
+				className: C.objectLeaf,
+				children: r(t.children)
+			});
+		}
+		default: throw Error(`PrefsForm: no control for built-in pref kind "${d.kind}"`);
+	}
+}
+//#endregion
+//#region src/components/Prefs/PrefsDialog.tsx
+function O(e) {
+	let { isOpen: t, onOpenChange: n, title: r, headerExtra: i, dialogClassName: a, ...o } = e;
+	return /* @__PURE__ */ p(d, {
+		isOpen: t,
+		onOpenChange: n,
+		"aria-label": typeof r == "string" ? r : o.schema.name,
+		className: a,
+		title: i === void 0 ? r ?? o.schema.name : /* @__PURE__ */ m("span", {
+			className: C.titleRow,
+			children: [/* @__PURE__ */ p("span", { children: r ?? o.schema.name }), i]
+		}),
+		children: /* @__PURE__ */ p(w, { ...o })
+	});
+}
+//#endregion
+export { S as a, x as i, w as n, v as o, b as r, y as s, O as t };
+
+//# sourceMappingURL=Prefs-BSJ0lMmJ.js.map