@ixfx/components 0.3.1 → 0.4.0

package/dist/{xy-axis-D9uwpGTT.d.ts → xy-axis-McdUpcYr.d.ts}

@@ -57,6 +57,85 @@ declare class PlotDataSeries {
   clear(): void;
 }
 //#endregion
+//#region src/plots/multi-axis.d.ts
+type PlotMultiAxisLayout = `overlap` | `horizontal` | `vertical` | `grid`;
+type PlotMultiAxisDataPointClickDetail = {
+  readonly value: number;
+  readonly index: number;
+  readonly series: string;
+};
+type PlotMultiAxisDataPointClickEvent = CustomEvent<PlotMultiAxisDataPointClickDetail>;
+interface PlotMultiAxisElementEventMap {
+  'plot-datapoint-click': PlotMultiAxisDataPointClickEvent;
+}
+declare class PlotMultiAxis extends LitElement {
+  #private;
+  layout: PlotMultiAxisLayout;
+  gridMinWidth: number;
+  /** Override to customize tooltip value display. */
+  valueFormat: (v: number | undefined) => string;
+  addData(data: Record<string, number>): void;
+  addData(name: string, value: number): void;
+  styleSeries(name: string, styles: Record<string, string>): void;
+  clear(): void;
+  clearSeries(name: string): void;
+  get series(): string[];
+  protected render(): import("lit").TemplateResult<1>;
+  static styles: import("lit").CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-plot-multi-axis': PlotMultiAxis;
+  }
+}
+interface PlotMultiAxis {
+  addEventListener: {
+    <K extends keyof PlotMultiAxisElementEventMap>(type: K, listener: (this: PlotMultiAxis, event: PlotMultiAxisElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  };
+}
+//#endregion
+//#region src/plots/plot-histogram.d.ts
+type PlotHistogramOrientation = 'horizontal' | 'vertical';
+type PlotHistogramBucketClickDetail = {
+  readonly bucketIndex: number;
+  readonly valueMin: number;
+  readonly valueMax: number;
+  readonly relativeValue: number;
+};
+type PlotHistogramBucketClickEvent = CustomEvent<PlotHistogramBucketClickDetail>;
+interface PlotHistogramElementEventMap {
+  'plot-bucket-click': PlotHistogramBucketClickEvent;
+}
+declare class PlotHistogram extends LitElement {
+  #private;
+  orientation: PlotHistogramOrientation;
+  resolution: number;
+  min?: number;
+  max?: number;
+  capacity: number;
+  title: string;
+  paused: boolean;
+  private _width;
+  private _height;
+  add(v: number): void;
+  set(values: number[]): void;
+  clear(): void;
+  protected firstUpdated(_changed: PropertyValues): void;
+  protected updated(changed: PropertyValues): void;
+  render(): import("lit").TemplateResult<1>;
+  static styles: import("lit").CSSResult;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-plot-histogram': PlotHistogram;
+  }
+}
+interface PlotHistogram {
+  addEventListener<K extends keyof PlotHistogramElementEventMap>(type: K, listener: (this: PlotHistogram, event: PlotHistogramElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): 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`;
@@ -82,6 +161,10 @@ declare class PlotSingleAxis extends LitElement {
   private _height;
   /** Override to customize tooltip label. */
   valueFormat: (v: number | undefined) => string;
+  get values(): readonly number[];
+  get dataCount(): number;
+  getValueAt(index: number): number | undefined;
+  getIndexFromClientX(clientX: number): number;
   add(v: number): void;
   set(values: number[]): void;
   clear(): void;
@@ -90,11 +173,27 @@ declare class PlotSingleAxis extends LitElement {
   render(): import("lit").TemplateResult<1>;
   static styles: import("lit").CSSResult;
 }
+type PlotSingleAxisPointerMoveDetail = {
+  readonly clientX: number;
+  readonly clientY: number;
+  readonly index: number;
+};
+type PlotSingleAxisPointerMoveEvent = CustomEvent<PlotSingleAxisPointerMoveDetail>;
+interface PlotSingleAxisElementEventMap {
+  'plot-pointer-move': PlotSingleAxisPointerMoveEvent;
+  'plot-pointer-leave': Event;
+}
 declare global {
   interface HTMLElementTagNameMap {
     'ixfx-plot-single-axis': PlotSingleAxis;
   }
-} //# sourceMappingURL=single-axis.d.ts.map
+}
+interface PlotSingleAxis {
+  addEventListener: {
+    <K extends keyof PlotSingleAxisElementEventMap>(type: K, listener: (this: PlotSingleAxis, event: PlotSingleAxisElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+  };
+}
 //#endregion
 //#region src/plots/xy-axis.d.ts
 type XyDrawStyle = `circles` | `squares`;
@@ -136,5 +235,5 @@ declare global {
   }
 } //# 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-D9uwpGTT.d.ts.map
+export { ColourMode as C, parseColourScaleAttr as D, computeColour as E, readBaseColour as O, ColourMapConfig as S, applyAgeModification as T, PlotMultiAxisDataPointClickEvent as _, PlotSingleAxisElementEventMap as a, PlotDataSeries as b, SingleAxisAgeStyle as c, PlotHistogramBucketClickDetail as d, PlotHistogramBucketClickEvent as f, PlotMultiAxisDataPointClickDetail as g, PlotMultiAxis as h, PlotSingleAxis as i, SingleAxisDrawStyle as l, PlotHistogramOrientation as m, XyAgeStyle as n, PlotSingleAxisPointerMoveDetail as o, PlotHistogramElementEventMap as p, XyDrawStyle as r, PlotSingleAxisPointerMoveEvent as s, PlotXyAxis as t, PlotHistogram as u, PlotMultiAxisElementEventMap as v, ColourResult as w, PlotDataSeriesOptions as x, PlotMultiAxisLayout as y };
+//# sourceMappingURL=xy-axis-McdUpcYr.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xy-axis-McdUpcYr.d.ts","names":[],"sources":["../src/plots/colour-map.ts","../src/plots/data.ts","../src/plots/multi-axis.ts","../src/plots/plot-histogram.ts","../src/plots/single-axis.ts","../src/plots/xy-axis.ts"],"mappings":"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"}

package/dist/xy-pad.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues, html } from "lit";
 
-//#region src/xy-pad.d.ts
+//#region src/xy-pad/xy-pad.d.ts
 declare class XyPad extends LitElement {
   static styles: import("lit").CSSResult[];
   xMin: number;

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

@@ -1 +1 @@
-{"version":3,"file":"xy-pad.d.ts","names":[],"sources":["../src/xy-pad.ts"],"mappings":";;;cAwEa,KAAA,SAAc,UAAA;EAAA,OACT,MAAA,gBAAM,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;EAsOlC;EAnOkB,KAAA;;EAGsB,MAAA;EAkOxC;EA/NwC,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;EAqFc;;AAAA;EAjEtB,YAAA,CAAA;EAqE4B;;;EA7D5B,YAAA,CAAA;EA8DO;;;;AACgB;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,CAAC;AAAA;AAAA,KAGA,eAAA,GAAkB,WAAW,CAAC,gBAAA;AAAA,QAElC,MAAA;EAAA,UACI,qBAAA;IACR,aAAA,EAAe,KAAK;EAAA;AAAA;AAAA,UAIP,aAAA;EACf,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,eAAe;AAAA;AAAA,UAGR,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"}
+{"version":3,"file":"xy-pad.d.ts","names":[],"sources":["../src/xy-pad/xy-pad.ts"],"mappings":";;;cAyEa,KAAA,SAAc,UAAA;EAAA,OACT,MAAA,gBAAM,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;EAsOlC;EAnOkB,KAAA;;EAGsB,MAAA;EAkOxC;EA/NwC,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;EAqFc;;AAAA;EAjEtB,YAAA;EAqE4B;;;EA7D5B,YAAA;EA8DO;;;;AACgB;EArDvB,QAAA;IAAc,MAAA;IAAgB,KAAA;EAAA;EAUrB,OAAA,CAAQ,QAAA,EAAU,cAAA;EAKlB,oBAAA;EAMA,MAAA,IAAU,UAAA,QAAkB,IAAA;AAAA;AAAA,KAiB3B,gBAAA;EAAA,SACD,CAAA;EAAA,SACA,CAAC;AAAA;AAAA,KAGA,eAAA,GAAkB,WAAW,CAAC,gBAAA;AAAA,QAElC,MAAA;EAAA,UACI,qBAAA;IACR,aAAA,EAAe,KAAK;EAAA;AAAA;AAAA,UAIP,aAAA;EACf,KAAA,EAAO,eAAA;EACP,MAAA,EAAQ,eAAe;AAAA;AAAA,UAGR,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

@@ -1,9 +1,10 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
-import { t as prominenceStyles } from "./prominence--ic9uWBl.js";
-import { t as resolveStep } from "./keyboard-De_vOHLg.js";
+import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-DdjvVHS-.js";
+import { t as prominenceStyles } from "./prominence-DlFShic3.js";
+import { t as resolveStep } from "./keyboard-CimiEskD.js";
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
-//#region src/xy-pad.ts
+//#region src/xy-pad/xy-pad.ts
 /**
 * <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.
 *
@@ -176,7 +177,10 @@ let XyPad = class XyPad extends LitElement {
 		};
 	}
 	static {
-		this.styles = [prominenceStyles, css`
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			css`
     :host {
       display: block;
       width: 200px;
@@ -290,7 +294,8 @@ let XyPad = class XyPad extends LitElement {
       height:100%;
       text-align:center;
     }
-  `];
+  `
+		];
 	}
 	_updateFromPointer(e) {
 		const pad = this.renderRoot.querySelector(`.xy-pad-area`);

package/dist/xy-pad.js.map

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

package/docs-user/README.md

@@ -0,0 +1,45 @@
+# Component Documentation
+
+This directory contains documentation for each component and some architectural overviews. See [the catalog of components](./user-catalog.md) for a comprehensive list of all components.
+
+## Components
+
+- [ac-text](./ac-text.md)
+- [ac-token](./ac-token.md)
+- [button](./button.md)
+- [checkbox](./checkbox.md)
+- [colour-picker](./colour-picker.md)
+- [crumbs](./crumbs.md)
+- [data-display](./data-display.md)
+- [editable-label](./editable-label.md)
+- [grouped-item-lister](./grouped-item-lister.md)
+- [icons](./icons.md)
+- [incr-search](./incr-search.md)
+- [labelled-radial-input](./labelled-radial-input.md)
+- [labelled-range-input](./labelled-range-input.md)
+- [led](./led.md)
+- [menu](./menu.md)
+- [miller](./miller.md)
+- [narrowed-text](./narrowed-text.md)
+- [panel](./panel.md)
+- [plots](./plots.md)
+- [polar-pad](./polar-pad.md)
+- [radial-input](./radial-input.md)
+- [range](./range.md)
+- [range-input](./range-input.md)
+- [selecthorizontal](./selecthorizontal.md)
+- [snap-container](./snap-container.md)
+- [split-layout](./split-layout.md)
+- [swipe](./swipe.md)
+- [tabs](./tabs.md)
+- [timeline](./timeline.md)
+- [transitory-label](./transitory-label.md)
+- [tree](./tree.md)
+- [util](./util.md)
+- [vertical-list](./vertical-list.md)
+- [xy-pad](./xy-pad.md)
+
+## Architectural Overviews
+
+- [user-catalog.md](user-catalog.md)
+- [user-theming.md](user-theming.md)

package/docs-user/ac-text.md

@@ -0,0 +1,67 @@
+# `ixfx-ac-text`
+
+VS Code command-palette style autocomplete text input. Shows a popup with matching results as the user types.
+
+```html
+<ixfx-ac-text placeholder="Search commands…"></ixfx-ac-text>
+```
+
+```js
+const input = document.querySelector('ixfx-ac-text');
+
+input.completionProvider = async (query, signal) => {
+  const allCommands = await fetchCommands();
+  return allCommands
+    .filter(c => c.label.toLowerCase().includes(query.toLowerCase()))
+    .map(c => ({ label: c.label, icon: c.icon, key: c.id }));
+};
+
+input.addEventListener('change', e => {
+  console.log(e.detail.value, e.detail.source); // 'Save', 'autocomplete'
+});
+```
+
+### Properties / attributes
+
+| Attribute / Property | Type                        | Default  | Description                                      |
+|---------------------|-----------------------------|----------|--------------------------------------------------|
+| `completionProvider`| `AcTextCompletionProvider \| undefined` | `undefined` | Function returning completion results   |
+| `placeholder`       | `string`                    | `''`     | Placeholder text                                |
+| `value`             | `string`                    | `''`     | Current text value                              |
+| `tabSuffix`         | `string`                    | `''`     | Appended when Tab-accepts a non-leaf item        |
+| `cacheSize`         | `number`                    | `20`     | LRU cache size for query results                |
+| `debounceMs`        | `number`                    | `150`    | Debounce delay before invoking provider          |
+
+### Events
+
+| Event        | Detail                                                              | Description                              |
+|--------------|---------------------------------------------------------------------|------------------------------------------|
+| `ac-select`  | `{ item: AcTextItem, query: string }`                              | When an autocomplete item is selected    |
+| `change`     | `{ value, key, data?, source: 'text' \| 'autocomplete' }`          | When value is committed (Enter or select)|
+
+### Keyboard navigation
+
+| Key          | Action                                         |
+|--------------|------------------------------------------------|
+| `ArrowDown`  | Move highlight to next result                 |
+| `ArrowUp`    | Move highlight to previous result             |
+| `Enter`      | Commit highlighted item or typed text          |
+| `Tab`        | Accept highlight + append `tabSuffix` if not leaf |
+| `Escape`     | Close popup without committing                 |
+
+### CSS custom properties
+
+| Property                    | Default                              | Description                  |
+|-----------------------------|--------------------------------------|------------------------------|
+| `--ac-input-padding`        | `var(--space-m) var(--space-l)`       | Input padding                |
+| `--ac-input-background`     | `var(--surface-3)`                    | Input background             |
+| `--ac-input-border-radius`   | `var(--radius-m)`                    | Input border radius          |
+| `--ac-popup-font-size`       | `var(--text-s)`                      | Popup item font size         |
+| `--ac-highlight-background`  | `var(--accent)`                      | Text highlight background    |
+| `--ac-highlight-color`       | `var(--accent-text)`                 | Text highlight color         |
+
+### TypeScript types
+
+```ts
+import type { AcTextItem, AcTextCompletionProvider, AcTextChangeDetail } from 'ixfxfun-components';
+```

package/docs-user/ac-token.md

@@ -0,0 +1,187 @@
+# `ixfx-ac-token`
+
+Token/tag input with per-token autocomplete. Looks like a text box — committed tokens appear as inline chips, and a suggestion popup follows the typing cursor. Typical use cases are email To: fields and tag pickers.
+
+Tokens are delimited by space, comma, or semicolon by default. Typing a delimiter commits the current word as a chip. Pressing Enter commits the current text (non-strict mode) or the highlighted suggestion (strict mode).
+
+```html
+<!-- Static suggestion list from attribute -->
+<ixfx-ac-token
+  placeholder="Add tags…"
+  data-tokens="javascript typescript python rust go"
+></ixfx-ac-token>
+
+<!-- Dynamic async provider -->
+<ixfx-ac-token placeholder="Add recipients…"></ixfx-ac-token>
+```
+
+```js
+const el = document.querySelector('ixfx-ac-token');
+
+el.completionProvider = async (token, signal) => {
+  const results = await searchPeople(token);
+  return results.map(p => ({ label: p.name, subLabel: p.email }));
+};
+
+el.addEventListener('ac-token-change', e => {
+  console.log(e.detail.tokens.map(t => t.label)); // ['Alice', 'Bob']
+});
+```
+
+---
+
+### Properties / attributes
+
+| Attribute / Property  | Type                              | Default     | Description                                                         |
+|-----------------------|-----------------------------------|-------------|---------------------------------------------------------------------|
+| `completionProvider`  | `AcTokenCompletionProvider \| undefined` | `undefined` | Async or sync function returning suggestions for the current draft token. Takes precedence over `data-tokens`. |
+| `tokenizer`           | `AcTokenizerFn \| undefined`      | `undefined` | Custom function to split text into tokens. Default splits on space, comma, semicolon. |
+| `data-tokens`         | `string` (attribute only)         | `''`        | Space/comma/semicolon-separated list of static suggestion labels. Used when no `completionProvider` is set. |
+| `placeholder`         | `string`                          | `''`        | Placeholder shown when no tokens or draft text are present.         |
+| `strict`              | `boolean`                         | `false`     | When true, only suggestions from the popup can be committed. Free-form typed text is ignored. |
+| `cacheSize`           | `number`                          | `20`        | LRU cache size for provider results.                                |
+| `debounceMs`          | `number`                          | `150`       | Debounce delay in ms before invoking the provider after a keystroke.|
+| `tokens` (property)   | `readonly AcTokenItem[]`          | `[]`        | Get or set the full token list programmatically.                    |
+| `value` (property, read-only) | `string`                | —           | All committed token labels joined with `, `.                        |
+
+---
+
+### Events
+
+| Event             | Detail                                      | Description                        |
+|-------------------|---------------------------------------------|------------------------------------|
+| `ac-token-change` | `{ tokens: readonly AcTokenItem[] }`        | Fired on any change to the token list (add or remove). |
+| `ac-token-add`    | `{ item: AcTokenItem, index: number }`      | Fired when a single token is committed. |
+| `ac-token-remove` | `{ item: AcTokenItem, index: number }`      | Fired when a single token is removed. |
+
+---
+
+### Keyboard interactions
+
+| Key                     | Condition                      | Action                                                   |
+|-------------------------|--------------------------------|----------------------------------------------------------|
+| Space / `,` / `;`       | Typed in the draft input       | Commit the current draft as a token and start a new one. |
+| `Enter`                 | Suggestion highlighted         | Accept the highlighted suggestion.                       |
+| `Enter`                 | No suggestion, non-strict mode | Commit the current draft as a free-form token.           |
+| `ArrowDown` / `ArrowUp` | Popup open                     | Move the suggestion highlight.                           |
+| `ArrowLeft`             | Draft cursor at position 0     | Move selection to the previous chip (or last if none selected). |
+| `ArrowRight`            | A chip is selected             | Move selection to the next chip (or back to the draft input if at last). |
+| `Backspace`             | Draft empty, no chip selected  | Delete the last chip.                                    |
+| `Backspace`             | A chip is selected             | Delete the selected chip.                                |
+| Any printable key       | A chip is selected             | Remove the selected chip and pre-fill the draft with its label + the typed key. |
+| `Escape`                | Popup open                     | Close the popup without committing.                      |
+| `Cmd/Ctrl+A`            | —                              | Copy all token labels and current draft to the clipboard as plain text. |
+
+---
+
+### Touch / pointer interactions
+
+| Gesture                  | Action                  |
+|--------------------------|-------------------------|
+| Click a chip             | Select / deselect it (for keyboard editing or deletion). |
+| Drag a chip up or down   | Remove it (threshold: 28 px vertical movement).          |
+| Click outside any chip   | Focus the draft input.  |
+
+---
+
+### Paste
+
+Pasting plain text tokenizes it using the configured tokenizer. Complete tokens are committed immediately; any partial trailing text becomes the new draft.
+
+```
+Paste: "alice, bob, carol"  →  chips [alice] [bob], draft "carol"
+Paste: "alice, bob, carol " →  chips [alice] [bob] [carol], draft ""
+```
+
+---
+
+### Completion provider
+
+The provider receives the current draft token (not the full input value) and an `AbortSignal`. It can return a `Promise` or a plain array.
+
+```ts
+el.completionProvider = async (token: string, signal: AbortSignal) => {
+  const res = await fetch(`/api/tags?q=${token}`, { signal });
+  const data = await res.json();
+  return data.map((item: Tag) => ({
+    label: item.name,
+    subLabel: item.count + ' uses',
+    key: item.id,
+    data: item,
+  }));
+};
+```
+
+When `token` is an empty string the provider is still called — use this to show all available options when the user hasn't typed anything yet.
+
+---
+
+### Custom tokenizer
+
+The default tokenizer splits on whitespace, comma, and semicolon. Supply a custom function to change what counts as a token boundary:
+
+```js
+// Colon-separated path segments
+el.tokenizer = text => text.split(':');
+
+// Only comma-separated (spaces allowed inside tokens)
+el.tokenizer = text => text.split(',').map(s => s.trimStart());
+```
+
+The tokenizer is also used when pasting text to bulk-commit multiple tokens at once.
+
+---
+
+### `AcTokenItem` shape
+
+```ts
+type AcTokenItem = {
+  readonly label: string;       // displayed text and committed value
+  readonly subLabel?: string;   // right-aligned secondary text in popup
+  readonly icon?: string;       // icon registry name (shown in chip and popup)
+  readonly key?: string;        // stable identifier (defaults to label)
+  readonly data?: unknown;      // arbitrary payload, passed through in events
+};
+```
+
+---
+
+### CSS custom properties
+
+| Property                              | Default                  | Description                              |
+|---------------------------------------|--------------------------|------------------------------------------|
+| `--ac-token-input-background`         | `var(--surface-3)`       | Wrapper background.                      |
+| `--ac-token-input-border`             | `var(--border)`          | Wrapper border.                          |
+| `--ac-token-input-border-radius`      | `var(--radius-m)`        | Wrapper corner radius.                   |
+| `--ac-token-input-padding`            | `var(--space-xs) var(--space-m)` | Wrapper padding.               |
+| `--ac-token-chip-gap`                 | `var(--space-xs)`        | Gap between chips and the draft input.   |
+| `--ac-token-chip-background`          | `var(--surface-4)`       | Chip background.                         |
+| `--ac-token-chip-border`              | `var(--border)`          | Chip border.                             |
+| `--ac-token-chip-border-radius`       | `var(--radius-s)`        | Chip corner radius.                      |
+| `--ac-token-chip-selected-background` | `var(--accent)`          | Chip background when selected.           |
+| `--ac-token-chip-selected-color`      | `var(--accent-text)`     | Chip text color when selected.           |
+| `--ac-token-popup-font-size`          | `var(--text-s)`          | Suggestion popup font size.              |
+
+---
+
+### TypeScript types
+
+```ts
+import type {
+  AcTokenItem,
+  AcTokenCompletionProvider,
+  AcTokenizerFn,
+  AcTokensChangeDetail,
+  AcTokenAddDetail,
+  AcTokenRemoveDetail,
+  AcTokenElementEventMap,
+} from 'ixfxfun-components';
+```
+
+---
+
+### Popup positioning
+
+The suggestion popup uses CSS anchor positioning (`anchor-name` / `position-anchor` / `@position-try`) to stay anchored to the draft input. It opens below the input by default and automatically flips above when there is insufficient space below the viewport. No JavaScript resize or scroll listeners are involved.
+
+Browser support: Chrome 125+. In browsers without CSS anchor positioning support the popup still renders but will not auto-flip.