@ixfx/components 0.2.3 → 0.2.5

package/dist/xy-axis-CIFok7MF.d.ts

@@ -0,0 +1,141 @@
+import * as _$lit from "lit";
+import { LitElement, PropertyValues } from "lit";
+
+//#region src/plots/colour-map.d.ts
+type ColourMode = `fixed` | `opacity` | `hue` | `saturation` | `lightness` | `scale`;
+type ColourMapConfig = {
+  mode: ColourMode; /** Parsed colours for 'scale' mode. Must have ≥ 2 entries. */
+  palette: string[]; /** ixfx easing name — applied before the colour mode mapping. Takes precedence over valueMap. */
+  easingName: string; /** Custom value mapping fn (0..1 → 0..1). Used when easingName is empty. */
+  valueMap: ((v: number) => number) | null;
+};
+type ColourResult = {
+  fill: string;
+  opacity: number;
+};
+/** Read the resolved --plot-color CSS variable from an element. */
+declare function readBaseColour(el: Element): string;
+/** Parse a comma-separated colour string attribute into an array. Falls back to default palette. */
+declare function parseColourScaleAttr(attr: string): string[];
+/**
+ * Compute the fill colour and opacity for a single data point.
+ * @param scaledValue  Normalised value in 0..1 (data range for single-axis; age fraction for xy).
+ * @param baseColour   Resolved base colour string (from --plot-color).
+ * @param config       Colour map configuration.
+ */
+declare function computeColour(scaledValue: number, baseColour: string, config: ColourMapConfig): ColourResult;
+/**
+ * Apply xy-axis age-style modification on top of a base ColourResult.
+ * 'size' is not handled here — the caller adjusts the radius separately.
+ */
+declare function applyAgeModification(base: ColourResult, ageFraction: number, ageStyle: string): ColourResult;
+//#endregion
+//#region src/plots/data.d.ts
+type PlotDataSeriesOptions = {
+  /**
+   * Limit of how many data points to store.
+   * Default: 100
+   */
+  capacityLimit: number;
+  /**
+   * If _true_, it maintains the same scale over its lifetime.
+   * If _false_, scale adjusts based on items in its cache.
+   *
+   * Default: true
+   */
+  persistentScaling: boolean;
+};
+declare class PlotDataSeries {
+  #private;
+  values: number[];
+  range: {
+    min: number;
+    max: number;
+  };
+  constructor(options?: Partial<PlotDataSeriesOptions>);
+  add(value: number): void;
+  set(values: number[]): void;
+  clear(): void;
+}
+//#endregion
+//#region src/plots/single-axis.d.ts
+type SingleAxisDrawStyle = `line-sharp` | `line-round` | `circles` | `squares` | `vbar` | `hbar` | `hist-bottom` | `hist-top` | `hist-middle`;
+type SingleAxisAgeStyle = `none` | `opacity` | `desaturation` | `size`;
+declare class PlotSingleAxis extends LitElement {
+  #private;
+  drawStyle: SingleAxisDrawStyle;
+  ageStyle: SingleAxisAgeStyle;
+  title: string;
+  precise: boolean;
+  tooltips: boolean;
+  capacity: number;
+  persistentScale: boolean;
+  paused: boolean;
+  clickPauses: boolean;
+  shaded: boolean;
+  areaColor: string;
+  colorMode: ColourMode;
+  colorEasing: string;
+  colorScale: string;
+  /** Custom value-mapping function (0..1 → 0..1). Ignored when color-easing is set. */
+  colorValueMap: ((v: number) => number) | null;
+  private _width;
+  private _height;
+  /** Override to customize tooltip label. */
+  valueFormat: (v: number | undefined) => string;
+  add(v: number): void;
+  set(values: number[]): void;
+  clear(): void;
+  protected firstUpdated(_changed: PropertyValues): void;
+  protected updated(changed: PropertyValues): void;
+  render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-plot-single-axis': PlotSingleAxis;
+  }
+} //# sourceMappingURL=single-axis.d.ts.map
+//#endregion
+//#region src/plots/xy-axis.d.ts
+type XyDrawStyle = `circles` | `squares`;
+type XyAgeStyle = `none` | `opacity` | `desaturation` | `size`;
+declare class PlotXyAxis extends LitElement {
+  #private;
+  drawStyle: XyDrawStyle;
+  ageStyle: XyAgeStyle;
+  title: string;
+  precise: boolean;
+  tooltips: boolean;
+  capacity: number;
+  persistentScale: boolean;
+  paused: boolean;
+  clickPauses: boolean;
+  colorMode: ColourMode;
+  colorEasing: string;
+  colorScale: string;
+  /**
+   * Custom value-mapping fn (0..1 → 0..1). For xy-axis the input is the point's ageFraction
+   * (0 = oldest, 1 = newest). Ignored when color-easing is set.
+   */
+  colorValueMap: ((v: number) => number) | null;
+  private _width;
+  private _height;
+  /** Override to customize tooltip label. */
+  valueFormat: (x: number, y: number) => string;
+  add(x: number, y: number): void;
+  setXY(xs: number[], ys: number[]): void;
+  clear(): void;
+  protected firstUpdated(_changed: PropertyValues): void;
+  protected updated(changed: PropertyValues): void;
+  render(): _$lit.TemplateResult<1>;
+  static styles: _$lit.CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-plot-xy-axis': PlotXyAxis;
+  }
+} //# sourceMappingURL=xy-axis.d.ts.map
+//#endregion
+export { SingleAxisAgeStyle as a, PlotDataSeriesOptions as c, ColourResult as d, applyAgeModification as f, readBaseColour as h, PlotSingleAxis as i, ColourMapConfig as l, parseColourScaleAttr as m, XyAgeStyle as n, SingleAxisDrawStyle as o, computeColour as p, XyDrawStyle as r, PlotDataSeries as s, PlotXyAxis as t, ColourMode as u };
+//# sourceMappingURL=xy-axis-CIFok7MF.d.ts.map

package/dist/xy-axis-CIFok7MF.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xy-axis-CIFok7MF.d.ts","names":[],"sources":["../src/plots/colour-map.ts","../src/plots/data.ts","../src/plots/single-axis.ts","../src/plots/xy-axis.ts"],"mappings":";;;;KAeY,UAAA;AAAA,KAEA,eAAA;EACV,IAAA,EAAM,UAAA;EAEN,OAAA,YALoB;EAOpB,UAAA,UAPoB;EASpB,QAAA,IAAY,CAAA;AAAA;AAAA,KAGF,YAAA;EAAiB,IAAA;EAAc,OAAA;AAAA;;iBA2C3B,cAAA,CAAe,EAAA,EAAI,OAAA;;iBAMnB,oBAAA,CAAqB,IAAA;;;;AAjDrC;;;iBAwFgB,aAAA,CAAc,WAAA,UAAqB,UAAA,UAAoB,MAAA,EAAQ,eAAA,GAAkB,YAAA;;AA7CjG;;;iBA+FgB,oBAAA,CAAqB,IAAA,EAAM,YAAA,EAAc,WAAA,UAAqB,QAAA,WAAmB,YAAA;;;KCnKrF,qBAAA;;;;ADaZ;ECRE,aAAA;;;;ADUF;;;ECHE,iBAAA;AAAA;AAAA,cAGW,cAAA;EAAA;EACX,MAAA;EAEA,KAAA;IAAS,GAAA;IAAa,GAAA;EAAA;cAIV,OAAA,GAAS,OAAA,CAAQ,qBAAA;EAQ7B,GAAA,CAAI,KAAA;EAoBJ,GAAA,CAAI,MAAA;EAQJ,KAAA,CAAA;AAAA;;;KCpDU,mBAAA;AAAA,KAWA,kBAAA;AAAA,cAgHC,cAAA,SAAuB,UAAA;EAAA;EAElC,SAAA,EAAW,mBAAA;EAGX,QAAA,EAAU,kBAAA;EAEE,KAAA;EAEiB,OAAA;EACA,QAAA;EACD,QAAA;EAG5B,eAAA;EAE4C,MAAA;EACY,WAAA;EAGxD,MAAA;EAGA,SAAA;EAGuC,SAAA,EAAW,UAAA;EACT,WAAA;EACD,UAAA;EFpI9B;EEsIV,aAAA,IAAiB,CAAA;EAAA,QAEA,MAAA;EAAA,QACA,OAAA;EFzI+B;EEuJhD,WAAA,GAAc,CAAA;EAKd,GAAA,CAAI,CAAA;EASJ,GAAA,CAAI,MAAA;EASJ,KAAA,CAAA;EAAA,UAKmB,YAAA,CAAa,QAAA,EAAU,cAAA;EAAA,UAkBvB,OAAA,CAAQ,OAAA,EAAS,cAAA;EAmH3B,MAAA,CAAA,GAnHyC,KAAA,CAmHnC,cAAA;EAAA,OA8EC,MAAA,EA9ED,KAAA,CA8EO,SAAA;AAAA;AAAA,QAwBhB,MAAA;EAAA,UACI,qBAAA;IACR,uBAAA,EAAyB,cAAA;EAAA;AAAA;;;KCnbjB,WAAA;AAAA,KACA,UAAA;AAAA,cAOC,UAAA,SAAmB,UAAA;EAAA;EAE9B,SAAA,EAAW,WAAA;EAGX,QAAA,EAAU,UAAA;EAEE,KAAA;EACiB,OAAA;EACA,QAAA;EACD,QAAA;EAG5B,eAAA;EAE4C,MAAA;EACY,WAAA;EAGjB,SAAA,EAAW,UAAA;EACT,WAAA;EACD,UAAA;EHbnB;;AAGvB;;EGeE,aAAA,IAAiB,CAAA;EAAA,QAEA,MAAA;EAAA,QACA,OAAA;EHyBH;EGnBd,WAAA,GAAc,CAAA,UAAW,CAAA;EAEzB,GAAA,CAAI,CAAA,UAAW,CAAA;EASf,KAAA,CAAM,EAAA,YAAc,EAAA;EASpB,KAAA,CAAA;EAAA,UAMmB,YAAA,CAAa,QAAA,EAAU,cAAA;EAAA,UAWvB,OAAA,CAAQ,OAAA,EAAS,cAAA;EA8G3B,MAAA,CAAA,GA9GyC,KAAA,CA8GnC,cAAA;EAAA,OAkEC,MAAA,EAlED,KAAA,CAkEO,SAAA;AAAA;AAAA,QAuBhB,MAAA;EAAA,UACI,qBAAA;IACR,mBAAA,EAAqB,UAAA;EAAA;AAAA"}

package/dist/xy-pad.d.ts

@@ -0,0 +1,81 @@
+import * as _$lit from "lit";
+import { LitElement, PropertyValues, html } from "lit";
+
+//#region src/xy-pad.d.ts
+declare class XyPad extends LitElement {
+  static styles: _$lit.CSSResult[];
+  xMin: number;
+  xMax: number;
+  x: number;
+  yMin: number;
+  yMax: number;
+  y: number;
+  xScale: string;
+  yScale: string;
+  xSnapStep?: number;
+  ySnapStep?: number;
+  xLabel: string;
+  yLabel: string;
+  showCrosshairs: boolean;
+  showGrid: boolean;
+  hideCursor: boolean;
+  disabled: boolean;
+  /** Number of quantised stops for both axes. Overridden by stops-x/stops-y if set. */
+  stops?: number;
+  /** Number of quantised stops for X axis. If set, overrides the stops setting for X. */
+  stopsX?: number;
+  /** Number of quantised stops for Y axis. If set, overrides the stops setting for Y. */
+  stopsY?: number;
+  private _dragging;
+  private _dragStartX;
+  private _dragStartY;
+  private _pressedKeys;
+  private _onKeyDown;
+  private _onKeyUp;
+  private _handleKeyboardMove;
+  private _onPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _updateFromPointer;
+  private _setPctVars;
+  /**
+   * Returns X position as a 0–1 fraction.
+   */
+  getRelativeX(): number;
+  /**
+   * Returns Y position as a 0–1 fraction.
+   */
+  getRelativeY(): number;
+  /**
+   * Returns polar coordinates.
+   * - radius: 0–1 distance from center
+   * - angle: radians, 0 = right, clockwise (0 to 2π)
+   */
+  getPolar(): {
+    radius: number;
+    angle: number;
+  };
+  updated(_changed: PropertyValues): void;
+  disconnectedCallback(): void;
+  render(): ReturnType<typeof html>;
+}
+type XyPadInputDetail = {
+  readonly x: number;
+  readonly y: number;
+};
+type XyPadInputEvent = CustomEvent<XyPadInputDetail>;
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-xy-pad': XyPad;
+  }
+}
+interface XyPadEventMap {
+  input: XyPadInputEvent;
+  change: XyPadInputEvent;
+}
+interface XyPad {
+  addEventListener: (<K extends keyof XyPadEventMap>(type: K, listener: (this: XyPad, event: XyPadEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
+}
+//#endregion
+export { XyPad, XyPadEventMap, XyPadInputDetail, XyPadInputEvent };
+//# sourceMappingURL=xy-pad.d.ts.map

package/dist/xy-pad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xy-pad.d.ts","names":[],"sources":["../src/xy-pad.ts"],"mappings":";;;;cAuEa,KAAA,SAAc,UAAA;EAAA,OACT,MAAA,EADC,KAAA,CACK,SAAA;EAoHM,IAAA;EACA,IAAA;EACA,CAAA;EAEA,IAAA;EACA,IAAA;EACA,CAAA;EAEA,MAAA;EACA,MAAA;EAC0B,SAAA;EACA,SAAA;EAE1B,MAAA;EACA,MAAA;EAE8C,cAAA;EACN,QAAA;EACE,UAAA;EAC1B,QAAA;EAqNH;EAlNb,KAAA;EAmOlB;EAhOwC,MAAA;;EAGA,MAAA;EAAA,QAE1C,SAAA;EAAA,QACA,WAAA;EAAA,QACA,WAAA;EAAA,QACA,YAAA;EAAA,QAEA,UAAA;EAAA,QAuBA,QAAA;EAAA,QAIA,mBAAA;EAAA,QA2CA,cAAA;EAAA,QAeA,cAAA;EAAA,QAOA,YAAA;EAAA,QAeA,kBAAA;EAAA,QA+BA,WAAA;EAqFN;;;EAjEF,YAAA,CAAA;EAiEsB;AAIxB;;EA7DE,YAAA,CAAA;EA+DuB;;;;;EArDvB,QAAA,CAAA;IAAc,MAAA;IAAgB,KAAA;EAAA;EAUrB,OAAA,CAAQ,QAAA,EAAU,cAAA;EAKlB,oBAAA,CAAA;EAMA,MAAA,CAAA,GAAU,UAAA,QAAkB,IAAA;AAAA;AAAA,KAiB3B,gBAAA;EAAA,SACD,CAAA;EAAA,SACA,CAAA;AAAA;AAAA,KAGC,eAAA,GAAkB,WAAA,CAAY,gBAAA;AAAA,QAElC,MAAA;EAAA,UACI,qBAAA;IACR,aAAA,EAAe,KAAA;EAAA;AAAA;AAAA,UAIF,aAAA;EACf,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,eAAA;AAAA;AAAA,UAGO,KAAA;EACf,gBAAA,oBAAoC,aAAA,EAClC,IAAA,EAAM,CAAA,EACN,QAAA,GAAW,IAAA,EAAM,KAAA,EAAO,KAAA,EAAO,aAAA,CAAc,CAAA,YAC7C,OAAA,aAAoB,uBAAA,eAEpB,IAAA,UACA,QAAA,EAAU,kCAAA,EACV,OAAA,aAAoB,uBAAA;AAAA"}

package/dist/xy-pad.js

@@ -0,0 +1,435 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
+import { t as resolveStep } from "./keyboard-De_vOHLg.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/xy-pad.ts
+/**
+* <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.
+*
+* Generic pad that accepts min/max/value for both axes with configurable labels.
+* Each axis can independently use logarithmic or linear scaling.
+* Y axis is inverted (top = high value).
+*
+* Properties
+*   xMin, xMax, x      – horizontal range and current value
+*   yMin, yMax, y      – vertical range and current value
+*   xScale, yScale     – 'log' (default) or 'linear'
+*   xSnapStep, ySnapStep – snap granularity for pointer and keyboard moves (defaults: 1 / 0.01)
+*   xLabel, yLabel     – axis labels (displayed in corners)
+*   showCrosshairs      – show X/Y axis lines (default: false)
+*   showGrid            – show background grid (default: false)
+*
+* CSS variables:
+*   --marker-size         – size of the position marker (default: 10cqb)
+*   --crosshair-color     – colour of both crosshair lines (default: surface-hh)
+*   --crosshair-width     – thickness of both crosshair lines (default: 2px)
+*   --crosshair-x-color   – colour of the vertical (X) crosshair line; falls back to --crosshair-color
+*   --crosshair-x-width   – thickness of the vertical (X) crosshair line; falls back to --crosshair-width
+*   --crosshair-y-color   – colour of the horizontal (Y) crosshair line; falls back to --crosshair-color
+*   --crosshair-y-width   – thickness of the horizontal (Y) crosshair line; falls back to --crosshair-width
+*   --grid-color          – colour of grid lines (default: surface-hh)
+*   --grid-width          – thickness of grid lines (default: 1px)
+*   --x-pct               – current X position as unitless number (0–100), set on host so external styles can use it
+*   --y-pct               – current Y position as unitless number (0–100), set on host so external styles can use it
+*   --radius-pct          – distance from center as unitless number (0–100), set on host so external styles can use it
+*   hide-cursor           – boolean, hide cursor during drag and hover (default: false)
+*
+* Events
+*   input – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires continuously during drag
+*   change – CustomEvent { detail: { x: number, y: number } }, bubbles + composed, fires when drag ends
+*
+* Methods
+*   getRelativeX() – returns X position as 0–1 fraction
+*   getRelativeY() – returns Y position as 0–1 fraction
+*   getPolar() – returns { radius: number, angle: number } where radius is 0–1 and angle is in radians (0 to 2π, 0 = right, clockwise)
+*/
+function valueToFrac(value, min, max, scale) {
+	if (scale === `linear`) return (value - min) / (max - min);
+	return Math.log(value / min) / Math.log(max / min);
+}
+function fracToValue(frac, min, max, scale) {
+	if (scale === `linear`) return min + frac * (max - min);
+	return min * (max / min) ** frac;
+}
+function quantise(value, min, max, stops) {
+	if (!stops || stops <= 1) return value;
+	const step = (max - min) / stops;
+	return Math.round((value - min) / step) * step + min;
+}
+let XyPad = class XyPad extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.xMin = 1;
+		this.xMax = 100;
+		this.x = 50;
+		this.yMin = 1;
+		this.yMax = 100;
+		this.y = 50;
+		this.xScale = `linear`;
+		this.yScale = `linear`;
+		this.xLabel = `X`;
+		this.yLabel = `Y`;
+		this.showCrosshairs = false;
+		this.showGrid = false;
+		this.hideCursor = false;
+		this.disabled = false;
+		this._dragging = false;
+		this._dragStartX = 0;
+		this._dragStartY = 0;
+		this._pressedKeys = /* @__PURE__ */ new Set();
+		this._onKeyDown = (e) => {
+			if (this.disabled) return;
+			if ([
+				`ArrowLeft`,
+				`ArrowRight`,
+				`ArrowUp`,
+				`ArrowDown`
+			].includes(e.key)) {
+				e.preventDefault();
+				this._pressedKeys.add(e.key);
+				this._handleKeyboardMove(e.shiftKey);
+			} else if (e.key === `Home` || e.key === `End`) {
+				e.preventDefault();
+				const newX = e.key === `Home` ? this.xMin : this.xMax;
+				const newY = e.key === `Home` ? this.yMin : this.yMax;
+				if (newX !== this.x || newY !== this.y) {
+					this.x = newX;
+					this.y = newY;
+					this.dispatchEvent(new CustomEvent(`input`, {
+						detail: {
+							x: this.x,
+							y: this.y
+						},
+						bubbles: true,
+						composed: true
+					}));
+				}
+			}
+		};
+		this._onKeyUp = (e) => {
+			this._pressedKeys.delete(e.key);
+		};
+		this._handleKeyboardMove = (shiftKey) => {
+			const shiftDivisor = shiftKey ? 10 : 1;
+			const xRange = this.xMax - this.xMin;
+			const yRange = this.yMax - this.yMin;
+			const effectiveStopsX = this.stopsX ?? this.stops;
+			const effectiveStopsY = this.stopsY ?? this.stops;
+			const xStep = resolveStep(xRange, effectiveStopsX, void 0) / shiftDivisor;
+			const yStep = resolveStep(yRange, effectiveStopsY, void 0) / shiftDivisor;
+			let newX = this.x;
+			let newY = this.y;
+			if (this._pressedKeys.has(`ArrowLeft`)) newX = Math.max(this.xMin, this.x - xStep);
+			if (this._pressedKeys.has(`ArrowRight`)) newX = Math.min(this.xMax, this.x + xStep);
+			if (this._pressedKeys.has(`ArrowUp`)) newY = Math.min(this.yMax, this.y + yStep);
+			if (this._pressedKeys.has(`ArrowDown`)) newY = Math.max(this.yMin, this.y - yStep);
+			if (newX !== this.x || newY !== this.y) {
+				let finalX = this.xSnapStep && this.xSnapStep > 0 ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;
+				let finalY = this.ySnapStep && this.ySnapStep > 0 ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;
+				finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);
+				finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);
+				this.x = finalX;
+				this.y = finalY;
+				this.dispatchEvent(new CustomEvent(`input`, {
+					detail: {
+						x: this.x,
+						y: this.y
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+		this._onPointerDown = (e) => {
+			e.preventDefault();
+			const pad = this.renderRoot.querySelector(`.xy-pad-area`);
+			pad?.focus();
+			if (pad) pad.setPointerCapture(e.pointerId);
+			this._dragging = true;
+			this._dragStartX = this.x;
+			this._dragStartY = this.y;
+			this.setAttribute(`dragging`, ``);
+			this._updateFromPointer(e);
+			globalThis.addEventListener(`pointermove`, this._onPointerMove);
+			globalThis.addEventListener(`pointerup`, this._onPointerUp);
+		};
+		this._onPointerMove = (e) => {
+			if (!this._dragging) return;
+			e.preventDefault();
+			this._updateFromPointer(e);
+		};
+		this._onPointerUp = () => {
+			const hasChanged = this.x !== this._dragStartX || this.y !== this._dragStartY;
+			this._dragging = false;
+			this.removeAttribute(`dragging`);
+			globalThis.removeEventListener(`pointermove`, this._onPointerMove);
+			globalThis.removeEventListener(`pointerup`, this._onPointerUp);
+			if (hasChanged) this.dispatchEvent(new CustomEvent(`change`, {
+				detail: {
+					x: this.x,
+					y: this.y
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [prominenceStyles, css`
+    :host {
+      display: block;
+      width: 200px;
+      height: 200px;
+      touch-action: none;
+      user-select: none;
+      container-type: size;
+      --marker-size: 10cqb;
+      --crosshair-color: var(--surface-6);
+      --crosshair-width: 2px;
+      --crosshair-x-color: var(--crosshair-color);
+      --crosshair-x-width: var(--crosshair-width);
+      --crosshair-y-color: var(--crosshair-color);
+      --crosshair-y-width: var(--crosshair-width);
+      --grid-color: var(--surface-6);
+      --grid-width: 1px;
+      --_space-s: var(--space-s, 4px);
+      --_space-m: var(--space-m, 8px);
+    }
+    .xy-pad-area {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      background: var(--xy-pad-bg, var(--surface-3));
+      border: var(--border);
+      border-radius: var(--radius-m);
+      overflow: hidden;
+      box-shadow: var(--deboss-3);
+      cursor: var(--cursor-display, crosshair);
+    }
+    :host([dragging]) .xy-pad-area {
+      cursor: none;
+    }
+
+    .xy-pad-area:focus {
+      outline: none;
+    }
+
+    .xy-pad-area:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: 2px;
+    }
+    .xy-pad-area::before,
+    .xy-pad-area::after {
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      opacity: var(--show-crosshairs, 0);
+    }
+    :host([show-crosshairs]) {
+      --show-crosshairs: 1;
+    }
+    .xy-pad-area::before {
+      left: 0;
+      right: 0;
+      top: calc(100% - var(--y-pct, 50) * 1%);
+      height: var(--crosshair-y-width);
+      background: var(--crosshair-y-color);
+    }
+    .xy-pad-area::after {
+      top: 0;
+      bottom: 0;
+      left: calc(var(--x-pct, 50) * 1%);
+      width: var(--crosshair-x-width);
+      background: var(--crosshair-x-color);
+    }
+
+    .xy-pad-grid {
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(to right, var(--grid-color) var(--grid-width), transparent var(--grid-width)),
+        linear-gradient(to bottom, var(--grid-color) var(--grid-width), transparent var(--grid-width));
+      background-size: 10cqb 10cqb;
+      pointer-events: none;
+      opacity: var(--show-grid, 0);
+    }
+    :host([show-grid]) {
+      --show-grid: 1;
+    }
+    
+    .xy-pad-marker {
+      position: absolute;
+      width: var(--marker-size, 10cqb);
+      height: var(--marker-size, 10cqb);
+      border-radius: 50%;
+      background: var(--surface-2-accent, var(--accent));
+      top: calc(100% - var(--y-pct, 50) * 1%);
+      left: calc(var(--x-pct, 50) * 1%);
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+      z-index: 2;
+    }
+    .xy-pad-label-x {
+      position: absolute;
+      bottom: var(--_space-s);
+      color: var(--surface-muted-text);
+      font-size: var(--text-s, 12px);
+      pointer-events: none;
+      width: 100%;
+      text-align: center;
+    }
+    .xy-pad-label-y {
+      position: absolute;
+      top: var(--_space-s);
+      left: var(--_space-m);
+      color: var(--surface-muted-text);
+      font-size: var(--text-s, 12px);
+      pointer-events: none;
+      writing-mode: sideways-lr;
+      height:100%;
+      text-align:center;
+    }
+  `];
+	}
+	_updateFromPointer(e) {
+		const pad = this.renderRoot.querySelector(`.xy-pad-area`);
+		if (!pad) return;
+		const rect = pad.getBoundingClientRect();
+		const xFrac = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+		const yFrac = Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height));
+		const newX = fracToValue(xFrac, this.xMin, this.xMax, this.xScale);
+		const newY = fracToValue(yFrac, this.yMin, this.yMax, this.yScale);
+		let finalX = this.xSnapStep && this.xSnapStep > 0 ? Math.round(newX / this.xSnapStep) * this.xSnapStep : newX;
+		let finalY = this.ySnapStep && this.ySnapStep > 0 ? Math.round(newY / this.ySnapStep) * this.ySnapStep : newY;
+		const effectiveStopsX = this.stopsX ?? this.stops;
+		const effectiveStopsY = this.stopsY ?? this.stops;
+		finalX = quantise(finalX, this.xMin, this.xMax, effectiveStopsX);
+		finalY = quantise(finalY, this.yMin, this.yMax, effectiveStopsY);
+		this.x = finalX;
+		this.y = finalY;
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail: {
+				x: this.x,
+				y: this.y
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_setPctVars() {
+		const cx = Math.max(this.xMin, Math.min(this.xMax, this.x));
+		const cy = Math.max(this.yMin, Math.min(this.yMax, this.y));
+		const xPct = valueToFrac(cx, this.xMin, this.xMax, this.xScale) * 100;
+		const yPct = valueToFrac(cy, this.yMin, this.yMax, this.yScale) * 100;
+		this.style.setProperty(`--x-pct`, `${xPct}`);
+		this.style.setProperty(`--y-pct`, `${yPct}`);
+		const dx = xPct - 50;
+		const dy = yPct - 50;
+		const radiusPct = Math.sqrt(dx * dx + dy * dy);
+		this.style.setProperty(`--radius-pct`, `${radiusPct}`);
+	}
+	/**
+	* Returns X position as a 0–1 fraction.
+	*/
+	getRelativeX() {
+		return valueToFrac(Math.max(this.xMin, Math.min(this.xMax, this.x)), this.xMin, this.xMax, this.xScale);
+	}
+	/**
+	* Returns Y position as a 0–1 fraction.
+	*/
+	getRelativeY() {
+		return valueToFrac(Math.max(this.yMin, Math.min(this.yMax, this.y)), this.yMin, this.yMax, this.yScale);
+	}
+	/**
+	* Returns polar coordinates.
+	* - radius: 0–1 distance from center
+	* - angle: radians, 0 = right, clockwise (0 to 2π)
+	*/
+	getPolar() {
+		const xRel = this.getRelativeX() - .5;
+		const yRel = this.getRelativeY() - .5;
+		const radius = Math.sqrt(xRel * xRel + yRel * yRel) * 2;
+		let angle = Math.atan2(yRel, xRel);
+		if (angle < 0) angle += 2 * Math.PI;
+		return {
+			radius,
+			angle
+		};
+	}
+	updated(_changed) {
+		super.updated(_changed);
+		this._setPctVars();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._onPointerUp();
+		this._pressedKeys.clear();
+	}
+	render() {
+		return html`
+      <div class="xy-pad-area"
+           tabindex=${this.disabled ? -1 : 0}
+           @pointerdown=${this._onPointerDown}
+           @keydown=${this._onKeyDown}
+           @keyup=${this._onKeyUp}
+           @blur=${() => this._pressedKeys.clear()}>
+        ${this.showGrid ? html`<div class="xy-pad-grid"></div>` : ``}
+        <div class="xy-pad-marker"></div>
+        <div class="xy-pad-label-x">${this.xLabel}</div>
+        <div class="xy-pad-label-y">${this.yLabel}</div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Number })], XyPad.prototype, "xMin", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "xMax", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "x", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "yMin", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "yMax", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "y", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "xScale", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "yScale", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `x-snap-step`
+})], XyPad.prototype, "xSnapStep", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `y-snap-step`
+})], XyPad.prototype, "ySnapStep", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "xLabel", void 0);
+__decorate([property({ type: String })], XyPad.prototype, "yLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-crosshairs`
+})], XyPad.prototype, "showCrosshairs", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-grid`
+})], XyPad.prototype, "showGrid", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `hide-cursor`
+})], XyPad.prototype, "hideCursor", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], XyPad.prototype, "disabled", void 0);
+__decorate([property({ type: Number })], XyPad.prototype, "stops", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `stops-x`
+})], XyPad.prototype, "stopsX", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `stops-y`
+})], XyPad.prototype, "stopsY", void 0);
+XyPad = __decorate([customElement(`ixfx-xy-pad`)], XyPad);
+//#endregion
+export { XyPad };
+
+//# sourceMappingURL=xy-pad.js.map