@ixfx/components 0.2.3 → 0.2.5

package/dist/polar-pad.js

@@ -0,0 +1,537 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { LitElement, css, html, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/polar-pad/polar-pad.ts
+/**
+* <ixfx-polar-pad> — circular pad for setting polar coordinates (angle + radius).
+*
+* The user clicks or drags within a circle to position a marker. The marker's
+* position encodes an angle (degrees, 0 = right, clockwise) and a radius (0–1).
+*
+* Properties / attributes
+*   angle          – current angle in degrees (0 = right, clockwise). Default: 0
+*   radius         – current radius 0–1 where 1 = edge. Default: 0.5
+*   rings          – number of concentric rings to draw (0 = none). Default: 0
+*   rays           – number of evenly-spaced radial spokes to draw (0 = none). Default: 0
+*   show-ray       – draw a line from the origin to the marker
+*   show-origin    – draw a dot at the centre
+*   hide-cursor    – hide cursor during drag and hover (default: false)
+*   snap-value     – when set, marker snaps to nearest ring/spoke depending on what's displayed
+*   disabled       – disable all interaction (default: false)
+*
+* Customisable CSS variables:
+*
+*   Pad background
+*   --pad-background        – CSS `background` of the circular pad. Accepts any CSS background
+*                             value: solid colour, conic-gradient(), radial-gradient(), etc.
+*                             Dynamic CSS vars like --angle-deg / --radius-pct are available
+*                             so the gradient can track the current marker position.
+*                             Default: var(--surface-4)
+*   --pad-border-color      – stroke of the outer circle (default: --surface-6)
+*   --pad-border-width      – thickness of outer border (default: 1px)
+*
+*   Marker
+*   --marker-size           – diameter of the draggable marker (default: 10cqb)
+*   --marker-color          – fill colour of the marker (default: --accent)
+*   --marker-opacity        – opacity of the marker (default: 1)
+*   --marker-stroke         – stroke colour of the marker (default: none)
+*   --marker-stroke-width   – stroke thickness of the marker (default: 0)
+*
+*   Origin dot (show-origin)
+*   --origin-size           – diameter of the origin dot (default: 6cqb)
+*   --origin-color          – fill colour of the origin dot (default: --accent)
+*   --origin-opacity        – opacity of the origin dot (default: 1)
+*
+*   Ray line (show-ray)
+*   --ray-color             – stroke colour (default: --surface-6)
+*   --ray-width             – thickness (default: 2px)
+*   --ray-opacity           – opacity (default: 1)
+*   --ray-dash              – stroke-dasharray value e.g. "4 2" (default: none)
+*
+*   Concentric rings (rings > 0)
+*   --ring-color            – stroke colour (default: --surface-6)
+*   --ring-width            – thickness (default: 1px)
+*   --ring-opacity          – opacity (default: 1)
+*   --ring-dash             – stroke-dasharray e.g. "4 2" (default: none)
+*
+*   Radial spokes (rays > 0)
+*   --spoke-color           – stroke colour (default: --surface-6)
+*   --spoke-width           – thickness (default: 1px)
+*   --spoke-opacity         – opacity (default: 1)
+*   --spoke-dash            – stroke-dasharray e.g. "4 2" (default: none)
+*
+* CSS variables set on host for external dynamic styling:
+*   --angle-deg             – current angle as unitless number in degrees
+*   --angle-rad             – current angle as unitless number in radians
+*   --radius-pct            – current radius as unitless number 0–100
+*
+* Events
+*   input – CustomEvent<PolarPadInputDetail> { angle: number (deg), radius: number (0–1) }
+*           bubbles + composed, fires continuously during drag
+*   change – CustomEvent<PolarPadInputDetail> { angle: number (deg), radius: number (0–1) }
+*           bubbles + composed, fires when drag ends
+*/
+const DEG_TO_RAD = Math.PI / 180;
+const RAD_TO_DEG = 180 / Math.PI;
+/**
+* Convert polar (angle in radians, radius 0-1) to SVG coordinates.
+* SVG viewBox 0 0 100 100; origin at (50,50); full radius = 50.
+* Convention: 0 rad = right (+x), increases CLOCKWISE (+y = downward in SVG).
+*/
+function polarToSvg(angleRad, radius) {
+	const r = radius * 50;
+	return {
+		x: 50 + Math.cos(angleRad) * r,
+		y: 50 + Math.sin(angleRad) * r
+	};
+}
+/**
+* Convert SVG coordinates back to polar (angle in radians 0..2π, radius 0-1).
+* SVG: Y increases downward. Convention: 0=right, CW positive.
+*/
+function svgToPolar(svgX, svgY) {
+	const dx = svgX - 50;
+	const dy = svgY - 50;
+	const dist = Math.sqrt(dx * dx + dy * dy);
+	const radius = Math.min(1, dist / 50);
+	return {
+		angleRad: (Math.atan2(dy, dx) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI),
+		radius
+	};
+}
+const clamp01 = (v) => Math.max(0, Math.min(1, v));
+function snapAngle(angleDeg, prevAngleDeg, rays, snapEnabled) {
+	if (rays <= 0 || !snapEnabled) return angleDeg;
+	const spokeDeg = 360 / rays;
+	const normalized = (angleDeg % 360 + 360) % 360;
+	const nearest = Math.round(normalized / spokeDeg) * spokeDeg;
+	const remainder = normalized % spokeDeg;
+	if (Math.abs(remainder) < 1e-4 || Math.abs(spokeDeg - remainder) < 1e-4) {
+		let delta = angleDeg - prevAngleDeg;
+		if (delta > 180) delta -= 360;
+		if (delta < -180) delta += 360;
+		return (nearest + (delta >= 0 ? 1 : -1) * spokeDeg + 360) % 360;
+	}
+	return nearest;
+}
+function snapRadius(radius, prevRadius, rings, snapEnabled) {
+	if (rings <= 0 || !snapEnabled) return radius;
+	const ringStep = 1 / rings;
+	const nearest = Math.round(radius / ringStep) * ringStep;
+	const remainder = radius % ringStep;
+	if (Math.abs(remainder) < 1e-4 || Math.abs(ringStep - remainder) < 1e-4) return Math.max(0, Math.min(1, nearest + (radius >= prevRadius ? 1 : -1) * ringStep));
+	return nearest;
+}
+function quantiseAngle(angleDeg, stops) {
+	if (!stops || stops <= 1) return angleDeg;
+	const stepDeg = 360 / stops;
+	const normalized = (angleDeg % 360 + 360) % 360;
+	return Math.round(normalized / stepDeg) * stepDeg;
+}
+function quantiseRadius(radius, stops) {
+	if (!stops || stops <= 1) return radius;
+	const step = 1 / stops;
+	return Math.round(radius / step) * step;
+}
+let PolarPad = class PolarPad extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.angle = 0;
+		this.radius = .5;
+		this.rings = 0;
+		this.rays = 0;
+		this.showRay = false;
+		this.showOrigin = false;
+		this.hideCursor = false;
+		this.snapValue = false;
+		this.disabled = false;
+		this._dragging = false;
+		this._dragStartAngle = 0;
+		this._dragStartRadius = 0;
+		this._pressedKeys = /* @__PURE__ */ new Set();
+		this._prevAngle = 0;
+		this._prevRadius = 0;
+		this._onPointerDown = (e) => {
+			e.preventDefault();
+			this.renderRoot.querySelector(`svg`)?.focus();
+			const area = this.renderRoot.querySelector(`.polar-pad-area`);
+			if (area) area.setPointerCapture(e.pointerId);
+			this._dragging = true;
+			this._dragStartAngle = this.angle;
+			this._dragStartRadius = this.radius;
+			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.angle !== this._dragStartAngle || this.radius !== this._dragStartRadius;
+			this._dragging = false;
+			this.removeAttribute(`dragging`);
+			globalThis.removeEventListener(`pointermove`, this._onPointerMove);
+			globalThis.removeEventListener(`pointerup`, this._onPointerUp);
+			if (hasChanged) this.dispatchEvent(new CustomEvent(`change`, {
+				detail: {
+					angle: this.angle,
+					radius: this.radius
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+		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);
+			}
+		};
+		this._onKeyUp = (e) => {
+			this._pressedKeys.delete(e.key);
+		};
+		this._handleKeyboardMove = (shiftKey) => {
+			const shiftDivisor = shiftKey ? 10 : 1;
+			const effectiveStopsAngle = this.stopsAngle ?? this.stops;
+			const effectiveStopsRadius = this.stopsRadius ?? this.stops;
+			let angleStep;
+			if (effectiveStopsAngle && effectiveStopsAngle > 1) angleStep = 360 / effectiveStopsAngle;
+			else angleStep = 360 / (this.rays > 0 && this.snapValue ? this.rays : 20);
+			let radiusStep;
+			if (effectiveStopsRadius && effectiveStopsRadius > 1) radiusStep = 1 / effectiveStopsRadius;
+			else radiusStep = 1 / 20;
+			angleStep /= shiftDivisor;
+			radiusStep /= shiftDivisor;
+			this._prevAngle = this.angle;
+			this._prevRadius = this.radius;
+			let newAngle = this.angle;
+			let newRadius = this.radius;
+			if (this._pressedKeys.has(`ArrowLeft`)) newAngle -= angleStep;
+			if (this._pressedKeys.has(`ArrowRight`)) newAngle += angleStep;
+			if (this._pressedKeys.has(`ArrowUp`)) newRadius = Math.min(1, newRadius + radiusStep);
+			if (this._pressedKeys.has(`ArrowDown`)) newRadius = Math.max(0, newRadius - radiusStep);
+			newAngle = (newAngle % 360 + 360) % 360;
+			let finalAngle = snapAngle(newAngle, this._prevAngle, this.rays, this.snapValue);
+			let finalRadius = snapRadius(newRadius, this._prevRadius, this.rings, this.snapValue);
+			finalAngle = quantiseAngle(finalAngle, effectiveStopsAngle);
+			finalRadius = quantiseRadius(finalRadius, effectiveStopsRadius);
+			if (finalAngle !== this.angle || finalRadius !== this.radius) {
+				this.angle = finalAngle;
+				this.radius = finalRadius;
+				this.dispatchEvent(new CustomEvent(`input`, {
+					detail: {
+						angle: this.angle,
+						radius: this.radius
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+		this._uid = Math.random().toString(36).slice(2, 8);
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      width: 200px;
+      height: 200px;
+      touch-action: none;
+      user-select: none;
+      container-type: size;
+
+      /* Pad background */
+      --pad-background: var(--surface-4, oklch(22% 0.02 240));
+      --pad-border-color: var(--surface-6, oklch(35% 0.02 240));
+      --pad-border-width: 1px;
+
+      /* Marker */
+      --marker-size: 10cqb;
+      --marker-color: var(--accent, oklch(60% 0.15 140));
+      --marker-opacity: 1;
+      --marker-stroke: none;
+      --marker-stroke-width: 0;
+
+      /* Origin dot */
+      --origin-size: 6cqb;
+      --origin-color: var(--accent, oklch(60% 0.15 140));
+      --origin-opacity: 1;
+
+      /* Ray line */
+      --ray-color: var(--surface-6, oklch(35% 0.02 240));
+      --ray-width: 2px;
+      --ray-opacity: 1;
+      --ray-dash: none;
+
+      /* Concentric rings */
+      --ring-color: var(--surface-6, oklch(35% 0.02 240));
+      --ring-width: 1px;
+      --ring-opacity: 1;
+      --ring-dash: none;
+
+      /* Radial spokes */
+      --spoke-color: var(--surface-6, oklch(35% 0.02 240));
+      --spoke-width: 1px;
+      --spoke-opacity: 1;
+      --spoke-dash: none;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .polar-pad-area {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      cursor: var(--cursor-display, crosshair);
+    }
+
+    :host([dragging]) .polar-pad-area {
+      cursor: none;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    .pad-background {
+      /* Used on the foreignObject div — accepts any CSS background value */
+      width: 100%;
+      height: 100%;
+      background: var(--pad-background);
+    }
+
+    .pad-border {
+      fill: none;
+      stroke: var(--pad-border-color);
+      stroke-width: var(--pad-border-width);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .ring {
+      fill: none;
+      stroke: var(--ring-color);
+      stroke-width: var(--ring-width);
+      stroke-dasharray: var(--ring-dash);
+      opacity: var(--ring-opacity);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .spoke {
+      fill: none;
+      stroke: var(--spoke-color);
+      stroke-width: var(--spoke-width);
+      stroke-dasharray: var(--spoke-dash);
+      opacity: var(--spoke-opacity);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .ray {
+      fill: none;
+      stroke: var(--ray-color);
+      stroke-width: var(--ray-width);
+      stroke-dasharray: var(--ray-dash);
+      opacity: var(--ray-opacity);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .origin-dot {
+      fill: var(--origin-color);
+      opacity: var(--origin-opacity);
+    }
+
+    .marker {
+      fill: var(--marker-color);
+      opacity: var(--marker-opacity);
+      stroke: var(--marker-stroke);
+      stroke-width: var(--marker-stroke-width);
+      cursor: grab;
+    }
+
+    .marker:active {
+      cursor: grabbing;
+    }
+
+    svg:focus {
+      outline: none;
+    }
+
+    svg:focus-visible .pad-border {
+      stroke: var(--accent);
+      stroke-width: 3;
+    }
+  `;
+	}
+	_updateFromPointer(e) {
+		const area = this.renderRoot.querySelector(`.polar-pad-area`);
+		if (!area) return;
+		const rect = area.getBoundingClientRect();
+		const size = Math.min(rect.width, rect.height);
+		const { angleRad, radius } = svgToPolar((e.clientX - rect.left) / size * 100, (e.clientY - rect.top) / size * 100);
+		const newAngleDeg = angleRad * RAD_TO_DEG;
+		const newRadius = clamp01(radius);
+		this._prevAngle = this.angle;
+		this._prevRadius = this.radius;
+		const snappedAngle = snapAngle(newAngleDeg, this._prevAngle, this.rays, this.snapValue);
+		const snappedRadius = snapRadius(newRadius, this._prevRadius, this.rings, this.snapValue);
+		const effectiveStopsAngle = this.stopsAngle ?? this.stops;
+		const effectiveStopsRadius = this.stopsRadius ?? this.stops;
+		this.angle = quantiseAngle(snappedAngle, effectiveStopsAngle);
+		this.radius = quantiseRadius(snappedRadius, effectiveStopsRadius);
+		this._prevAngle = newAngleDeg;
+		this._prevRadius = newRadius;
+		this.dispatchEvent(new CustomEvent(`input`, {
+			detail: {
+				angle: this.angle,
+				radius: this.radius
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_setCssVars() {
+		this.style.setProperty(`--angle-deg`, `${this.angle}`);
+		this.style.setProperty(`--angle-rad`, `${this.angle * DEG_TO_RAD}`);
+		this.style.setProperty(`--radius-pct`, `${clamp01(this.radius) * 100}`);
+	}
+	updated(_changed) {
+		super.updated(_changed);
+		this._setCssVars();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._onPointerUp();
+		this._pressedKeys.clear();
+	}
+	_renderRings() {
+		if (this.rings <= 0) return ``;
+		const items = [];
+		for (let i = 1; i <= this.rings; i++) {
+			const r = i / this.rings * 50;
+			items.push(svg`<circle class="ring" cx="50" cy="50" r="${r}" />`);
+		}
+		return items;
+	}
+	_renderSpokes() {
+		if (this.rays <= 0) return ``;
+		const items = [];
+		for (let i = 0; i < this.rays; i++) {
+			const angleRad = i / this.rays * 2 * Math.PI;
+			const cos = Math.cos(angleRad);
+			const sin = Math.sin(angleRad);
+			const x1 = 50 + cos * 50;
+			const y1 = 50 + sin * 50;
+			const x2 = 50 - cos * 50;
+			const y2 = 50 - sin * 50;
+			items.push(svg`<line class="spoke" x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" />`);
+		}
+		return items;
+	}
+	_renderRay(markerX, markerY) {
+		if (!this.showRay) return ``;
+		return svg`<line class="ray" x1="50" y1="50" x2="${markerX}" y2="${markerY}" />`;
+	}
+	_renderOrigin() {
+		if (!this.showOrigin) return ``;
+		return svg`<circle class="origin-dot" cx="50" cy="50" r="3" style="r: calc(var(--origin-size) / 2)" />`;
+	}
+	render() {
+		const { x: markerX, y: markerY } = polarToSvg(this.angle * DEG_TO_RAD, clamp01(this.radius));
+		return html`
+      <div class="polar-pad-area"
+           @pointerdown=${this._onPointerDown}
+           @keydown=${this._onKeyDown}
+           @keyup=${this._onKeyUp}
+           @blur=${() => this._pressedKeys.clear()}>
+        <svg viewBox="0 0 100 100"
+             preserveAspectRatio="xMidYMid meet"
+             tabindex=${this.disabled ? -1 : 0}>
+          <defs>
+            <clipPath id="circle-clip-${this._uid}">
+              <circle cx="50" cy="50" r="50" />
+            </clipPath>
+          </defs>
+
+          <!-- clipped group: background + rings + spokes -->
+          <g clip-path="url(#circle-clip-${this._uid})">
+            <foreignObject x="0" y="0" width="100" height="100">
+              <div class="pad-background" xmlns="http://www.w3.org/1999/xhtml"></div>
+            </foreignObject>
+            ${this._renderRings()}
+            ${this._renderSpokes()}
+          </g>
+
+          <!-- border circle (on top of clip, non-scaling stroke) -->
+          <circle class="pad-border" cx="50" cy="50" r="49.75" />
+
+          <!-- ray + origin + marker -->
+          ${this._renderRay(markerX, markerY)}
+          ${this._renderOrigin()}
+          <circle
+            class="marker"
+            cx="${markerX}"
+            cy="${markerY}"
+            r="5"
+            style="r: calc(var(--marker-size) / 2)"
+          />
+        </svg>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Number })], PolarPad.prototype, "angle", void 0);
+__decorate([property({ type: Number })], PolarPad.prototype, "radius", void 0);
+__decorate([property({ type: Number })], PolarPad.prototype, "rings", void 0);
+__decorate([property({ type: Number })], PolarPad.prototype, "rays", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-ray`
+})], PolarPad.prototype, "showRay", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `show-origin`
+})], PolarPad.prototype, "showOrigin", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: `hide-cursor`
+})], PolarPad.prototype, "hideCursor", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `snap-value`,
+	reflect: true
+})], PolarPad.prototype, "snapValue", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PolarPad.prototype, "disabled", void 0);
+__decorate([property({ type: Number })], PolarPad.prototype, "stops", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `stops-angle`
+})], PolarPad.prototype, "stopsAngle", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `stops-radius`
+})], PolarPad.prototype, "stopsRadius", void 0);
+PolarPad = __decorate([customElement(`ixfx-polar-pad`)], PolarPad);
+//#endregion
+export { PolarPad };
+
+//# sourceMappingURL=polar-pad.js.map

package/dist/polar-pad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polar-pad.js","names":[],"sources":["../src/polar-pad/polar-pad.ts"],"sourcesContent":["import type { PropertyValues } from 'lit';\n/**\n * <ixfx-polar-pad> — circular pad for setting polar coordinates (angle + radius).\n *\n * The user clicks or drags within a circle to position a marker. The marker's\n * position encodes an angle (degrees, 0 = right, clockwise) and a radius (0–1).\n *\n * Properties / attributes\n *   angle          – current angle in degrees (0 = right, clockwise). Default: 0\n *   radius         – current radius 0–1 where 1 = edge. Default: 0.5\n *   rings          – number of concentric rings to draw (0 = none). Default: 0\n *   rays           – number of evenly-spaced radial spokes to draw (0 = none). Default: 0\n *   show-ray       – draw a line from the origin to the marker\n *   show-origin    – draw a dot at the centre\n *   hide-cursor    – hide cursor during drag and hover (default: false)\n *   snap-value     – when set, marker snaps to nearest ring/spoke depending on what's displayed\n *   disabled       – disable all interaction (default: false)\n *\n * Customisable CSS variables:\n *\n *   Pad background\n *   --pad-background        – CSS `background` of the circular pad. Accepts any CSS background\n *                             value: solid colour, conic-gradient(), radial-gradient(), etc.\n *                             Dynamic CSS vars like --angle-deg / --radius-pct are available\n *                             so the gradient can track the current marker position.\n *                             Default: var(--surface-4)\n *   --pad-border-color      – stroke of the outer circle (default: --surface-6)\n *   --pad-border-width      – thickness of outer border (default: 1px)\n *\n *   Marker\n *   --marker-size           – diameter of the draggable marker (default: 10cqb)\n *   --marker-color          – fill colour of the marker (default: --accent)\n *   --marker-opacity        – opacity of the marker (default: 1)\n *   --marker-stroke         – stroke colour of the marker (default: none)\n *   --marker-stroke-width   – stroke thickness of the marker (default: 0)\n *\n *   Origin dot (show-origin)\n *   --origin-size           – diameter of the origin dot (default: 6cqb)\n *   --origin-color          – fill colour of the origin dot (default: --accent)\n *   --origin-opacity        – opacity of the origin dot (default: 1)\n *\n *   Ray line (show-ray)\n *   --ray-color             – stroke colour (default: --surface-6)\n *   --ray-width             – thickness (default: 2px)\n *   --ray-opacity           – opacity (default: 1)\n *   --ray-dash              – stroke-dasharray value e.g. \"4 2\" (default: none)\n *\n *   Concentric rings (rings > 0)\n *   --ring-color            – stroke colour (default: --surface-6)\n *   --ring-width            – thickness (default: 1px)\n *   --ring-opacity          – opacity (default: 1)\n *   --ring-dash             – stroke-dasharray e.g. \"4 2\" (default: none)\n *\n *   Radial spokes (rays > 0)\n *   --spoke-color           – stroke colour (default: --surface-6)\n *   --spoke-width           – thickness (default: 1px)\n *   --spoke-opacity         – opacity (default: 1)\n *   --spoke-dash            – stroke-dasharray e.g. \"4 2\" (default: none)\n *\n * CSS variables set on host for external dynamic styling:\n *   --angle-deg             – current angle as unitless number in degrees\n *   --angle-rad             – current angle as unitless number in radians\n *   --radius-pct            – current radius as unitless number 0–100\n *\n * Events\n *   input – CustomEvent<PolarPadInputDetail> { angle: number (deg), radius: number (0–1) }\n *           bubbles + composed, fires continuously during drag\n *   change – CustomEvent<PolarPadInputDetail> { angle: number (deg), radius: number (0–1) }\n *           bubbles + composed, fires when drag ends\n */\nimport { css, html, LitElement, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { KEY_STEP_DIVISOR } from '../keyboard.js';\n\n// ---------------------------------------------------------------------------\n// Geometry helpers\n// ---------------------------------------------------------------------------\n\nconst DEG_TO_RAD = Math.PI / 180;\nconst RAD_TO_DEG = 180 / Math.PI;\n\n/**\n * Convert polar (angle in radians, radius 0-1) to SVG coordinates.\n * SVG viewBox 0 0 100 100; origin at (50,50); full radius = 50.\n * Convention: 0 rad = right (+x), increases CLOCKWISE (+y = downward in SVG).\n */\nfunction polarToSvg(angleRad: number, radius: number): { x: number; y: number } {\n  const r = radius * 50;\n  return { x: 50 + Math.cos(angleRad) * r, y: 50 + Math.sin(angleRad) * r };\n}\n\n/**\n * Convert SVG coordinates back to polar (angle in radians 0..2π, radius 0-1).\n * SVG: Y increases downward. Convention: 0=right, CW positive.\n */\nfunction svgToPolar(svgX: number, svgY: number): { angleRad: number; radius: number } {\n  const dx = svgX - 50;\n  const dy = svgY - 50; // +dy = downward = clockwise\n  const dist = Math.sqrt(dx * dx + dy * dy);\n  const radius = Math.min(1, dist / 50);\n  const raw = Math.atan2(dy, dx);\n  const angleRad = ((raw % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);\n  return { angleRad, radius };\n}\n\nconst clamp01 = (v: number): number => Math.max(0, Math.min(1, v));\n\n// ---------------------------------------------------------------------------\n// Direction-aware snapping helpers\n// ---------------------------------------------------------------------------\n\nfunction snapAngle(angleDeg: number, prevAngleDeg: number, rays: number, snapEnabled: boolean): number {\n  if (rays <= 0 || !snapEnabled) return angleDeg;\n  const spokeDeg = 360 / rays;\n  const normalized = ((angleDeg % 360) + 360) % 360;\n  const nearest = Math.round(normalized / spokeDeg) * spokeDeg;\n  const remainder = normalized % spokeDeg;\n  const tie = Math.abs(remainder) < 0.0001 || Math.abs(spokeDeg - remainder) < 0.0001;\n  if (tie) {\n    let delta = angleDeg - prevAngleDeg;\n    if (delta > 180) delta -= 360;\n    if (delta < -180) delta += 360;\n    const direction = delta >= 0 ? 1 : -1;\n    return (nearest + direction * spokeDeg + 360) % 360;\n  }\n  return nearest;\n}\n\nfunction snapRadius(radius: number, prevRadius: number, rings: number, snapEnabled: boolean): number {\n  if (rings <= 0 || !snapEnabled) return radius;\n  const ringStep = 1 / rings;\n  const nearest = Math.round(radius / ringStep) * ringStep;\n  const remainder = radius % ringStep;\n  const tie = Math.abs(remainder) < 0.0001 || Math.abs(ringStep - remainder) < 0.0001;\n  if (tie) {\n    const direction = radius >= prevRadius ? 1 : -1;\n    return Math.max(0, Math.min(1, nearest + direction * ringStep));\n  }\n  return nearest;\n}\n\nfunction quantiseAngle(angleDeg: number, stops?: number): number {\n  if (!stops || stops <= 1) return angleDeg;\n  const stepDeg = 360 / stops;\n  const normalized = ((angleDeg % 360) + 360) % 360;\n  return Math.round(normalized / stepDeg) * stepDeg;\n}\n\nfunction quantiseRadius(radius: number, stops?: number): number {\n  if (!stops || stops <= 1) return radius;\n  const step = 1 / stops;\n  return Math.round(radius / step) * step;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n@customElement(`ixfx-polar-pad`)\nexport class PolarPad extends LitElement {\n  static override styles = 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\n      /* Pad background */\n      --pad-background: var(--surface-4, oklch(22% 0.02 240));\n      --pad-border-color: var(--surface-6, oklch(35% 0.02 240));\n      --pad-border-width: 1px;\n\n      /* Marker */\n      --marker-size: 10cqb;\n      --marker-color: var(--accent, oklch(60% 0.15 140));\n      --marker-opacity: 1;\n      --marker-stroke: none;\n      --marker-stroke-width: 0;\n\n      /* Origin dot */\n      --origin-size: 6cqb;\n      --origin-color: var(--accent, oklch(60% 0.15 140));\n      --origin-opacity: 1;\n\n      /* Ray line */\n      --ray-color: var(--surface-6, oklch(35% 0.02 240));\n      --ray-width: 2px;\n      --ray-opacity: 1;\n      --ray-dash: none;\n\n      /* Concentric rings */\n      --ring-color: var(--surface-6, oklch(35% 0.02 240));\n      --ring-width: 1px;\n      --ring-opacity: 1;\n      --ring-dash: none;\n\n      /* Radial spokes */\n      --spoke-color: var(--surface-6, oklch(35% 0.02 240));\n      --spoke-width: 1px;\n      --spoke-opacity: 1;\n      --spoke-dash: none;\n    }\n\n    :host([disabled]) {\n      opacity: 0.5;\n      pointer-events: none;\n    }\n\n    .polar-pad-area {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      cursor: var(--cursor-display, crosshair);\n    }\n\n    :host([dragging]) .polar-pad-area {\n      cursor: none;\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n    }\n\n    .pad-background {\n      /* Used on the foreignObject div — accepts any CSS background value */\n      width: 100%;\n      height: 100%;\n      background: var(--pad-background);\n    }\n\n    .pad-border {\n      fill: none;\n      stroke: var(--pad-border-color);\n      stroke-width: var(--pad-border-width);\n      vector-effect: non-scaling-stroke;\n    }\n\n    .ring {\n      fill: none;\n      stroke: var(--ring-color);\n      stroke-width: var(--ring-width);\n      stroke-dasharray: var(--ring-dash);\n      opacity: var(--ring-opacity);\n      vector-effect: non-scaling-stroke;\n    }\n\n    .spoke {\n      fill: none;\n      stroke: var(--spoke-color);\n      stroke-width: var(--spoke-width);\n      stroke-dasharray: var(--spoke-dash);\n      opacity: var(--spoke-opacity);\n      vector-effect: non-scaling-stroke;\n    }\n\n    .ray {\n      fill: none;\n      stroke: var(--ray-color);\n      stroke-width: var(--ray-width);\n      stroke-dasharray: var(--ray-dash);\n      opacity: var(--ray-opacity);\n      vector-effect: non-scaling-stroke;\n    }\n\n    .origin-dot {\n      fill: var(--origin-color);\n      opacity: var(--origin-opacity);\n    }\n\n    .marker {\n      fill: var(--marker-color);\n      opacity: var(--marker-opacity);\n      stroke: var(--marker-stroke);\n      stroke-width: var(--marker-stroke-width);\n      cursor: grab;\n    }\n\n    .marker:active {\n      cursor: grabbing;\n    }\n\n    svg:focus {\n      outline: none;\n    }\n\n    svg:focus-visible .pad-border {\n      stroke: var(--accent);\n      stroke-width: 3;\n    }\n  `;\n\n  /** Current angle in degrees. 0 = right, increases clockwise. */\n  @property({ type: Number }) angle = 0;\n\n  /** Current radius 0–1. 0 = origin, 1 = edge. */\n  @property({ type: Number }) radius = 0.5;\n\n  /** Number of concentric rings to display. 0 = none. */\n  @property({ type: Number }) rings = 0;\n\n  /** Number of evenly-spaced radial spoke lines to display. 0 = none. */\n  @property({ type: Number }) rays = 0;\n\n  /** Show a line from origin to the marker. */\n  @property({ type: Boolean, reflect: true, attribute: `show-ray` }) showRay = false;\n\n  /** Show a dot at the origin (centre). */\n  @property({ type: Boolean, reflect: true, attribute: `show-origin` }) showOrigin = false;\n\n  /** Hide cursor during drag and hover. */\n  @property({ type: Boolean, reflect: true, attribute: `hide-cursor` }) hideCursor = false;\n\n  /** When set, marker snaps to nearest ring/spoke depending on what's displayed. */\n  @property({ type: Boolean, attribute: `snap-value`, reflect: true }) snapValue = false;\n\n  /** Disable all interaction (pointer and keyboard). */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Number of quantised stops for both angle and radius. Overridden by stops-angle/stops-radius if set. */\n  @property({ type: Number }) stops?: number;\n\n  /** Number of quantised stops for angle. If set, overrides the stops setting for angle. */\n  @property({ type: Number, attribute: `stops-angle` }) stopsAngle?: number;\n\n  /** Number of quantised stops for radius. If set, overrides the stops setting for radius. */\n  @property({ type: Number, attribute: `stops-radius` }) stopsRadius?: number;\n\n  private _dragging = false;\n  private _dragStartAngle = 0;\n  private _dragStartRadius = 0;\n  private _pressedKeys = new Set<string>();\n  private _prevAngle = 0;\n  private _prevRadius = 0;\n\n  // -------------------------------------------------------------------------\n  // Pointer handling\n  // -------------------------------------------------------------------------\n\n  private _onPointerDown = (e: PointerEvent): void => {\n    e.preventDefault();\n    const svg = this.renderRoot.querySelector(`svg`) as SVGSVGElement | undefined;\n    (svg as HTMLElement | undefined)?.focus();\n    const area = this.renderRoot.querySelector(`.polar-pad-area`) as HTMLElement | undefined;\n    if (area)\n      area.setPointerCapture(e.pointerId);\n    this._dragging = true;\n    this._dragStartAngle = this.angle;\n    this._dragStartRadius = this.radius;\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.angle !== this._dragStartAngle || this.radius !== this._dragStartRadius;\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<PolarPadInputDetail>(`change`, {\n        detail: { angle: this.angle, radius: this.radius },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  private _updateFromPointer(e: PointerEvent): void {\n    const area = this.renderRoot.querySelector(`.polar-pad-area`);\n    if (!area)\n      return;\n\n    const rect = area.getBoundingClientRect();\n    const size = Math.min(rect.width, rect.height);\n    const svgX = ((e.clientX - rect.left) / size) * 100;\n    const svgY = ((e.clientY - rect.top) / size) * 100;\n\n    const { angleRad, radius } = svgToPolar(svgX, svgY);\n    const newAngleDeg = angleRad * RAD_TO_DEG;\n    const newRadius = clamp01(radius);\n\n    this._prevAngle = this.angle;\n    this._prevRadius = this.radius;\n\n    const snappedAngle = snapAngle(newAngleDeg, this._prevAngle, this.rays, this.snapValue);\n    const snappedRadius = snapRadius(newRadius, this._prevRadius, this.rings, this.snapValue);\n\n    const effectiveStopsAngle = this.stopsAngle ?? this.stops;\n    const effectiveStopsRadius = this.stopsRadius ?? this.stops;\n\n    this.angle = quantiseAngle(snappedAngle, effectiveStopsAngle);\n    this.radius = quantiseRadius(snappedRadius, effectiveStopsRadius);\n    this._prevAngle = newAngleDeg;\n    this._prevRadius = newRadius;\n\n    this.dispatchEvent(new CustomEvent<PolarPadInputDetail>(`input`, {\n      detail: { angle: this.angle, radius: this.radius },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  // -------------------------------------------------------------------------\n  // Keyboard handling\n  // -------------------------------------------------------------------------\n\n  private _onKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled) 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    }\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 effectiveStopsAngle = this.stopsAngle ?? this.stops;\n    const effectiveStopsRadius = this.stopsRadius ?? this.stops;\n\n    let angleStep: number;\n    if (effectiveStopsAngle && effectiveStopsAngle > 1) {\n      angleStep = 360 / effectiveStopsAngle;\n    } else {\n      const angleRange = this.rays > 0 && this.snapValue ? this.rays : 20;\n      angleStep = 360 / angleRange;\n    }\n\n    let radiusStep: number;\n    if (effectiveStopsRadius && effectiveStopsRadius > 1) {\n      radiusStep = 1 / effectiveStopsRadius;\n    } else {\n      radiusStep = 1 / 20;\n    }\n\n    angleStep /= shiftDivisor;\n    radiusStep /= shiftDivisor;\n\n    this._prevAngle = this.angle;\n    this._prevRadius = this.radius;\n\n    let newAngle = this.angle;\n    let newRadius = this.radius;\n\n    if (this._pressedKeys.has(`ArrowLeft`)) {\n      newAngle -= angleStep;\n    }\n    if (this._pressedKeys.has(`ArrowRight`)) {\n      newAngle += angleStep;\n    }\n    if (this._pressedKeys.has(`ArrowUp`)) {\n      newRadius = Math.min(1, newRadius + radiusStep);\n    }\n    if (this._pressedKeys.has(`ArrowDown`)) {\n      newRadius = Math.max(0, newRadius - radiusStep);\n    }\n\n    newAngle = ((newAngle % 360) + 360) % 360;\n\n    let finalAngle = snapAngle(newAngle, this._prevAngle, this.rays, this.snapValue);\n    let finalRadius = snapRadius(newRadius, this._prevRadius, this.rings, this.snapValue);\n\n    finalAngle = quantiseAngle(finalAngle, effectiveStopsAngle);\n    finalRadius = quantiseRadius(finalRadius, effectiveStopsRadius);\n\n    if (finalAngle !== this.angle || finalRadius !== this.radius) {\n      this.angle = finalAngle;\n      this.radius = finalRadius;\n      this.dispatchEvent(new CustomEvent<PolarPadInputDetail>(`input`, {\n        detail: { angle: this.angle, radius: this.radius },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  };\n\n  // -------------------------------------------------------------------------\n  // CSS variable sync\n  // -------------------------------------------------------------------------\n\n  private _setCssVars(): void {\n    this.style.setProperty(`--angle-deg`, `${this.angle}`);\n    this.style.setProperty(`--angle-rad`, `${this.angle * DEG_TO_RAD}`);\n    this.style.setProperty(`--radius-pct`, `${clamp01(this.radius) * 100}`);\n  }\n\n  override updated(_changed: PropertyValues): void {\n    super.updated(_changed);\n    this._setCssVars();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._onPointerUp();\n    this._pressedKeys.clear();\n  }\n\n  // -------------------------------------------------------------------------\n  // SVG helpers\n  // -------------------------------------------------------------------------\n\n  private _renderRings() {\n    if (this.rings <= 0)\n      return ``;\n    const items = [];\n    for (let i = 1; i <= this.rings; i++) {\n      const r = (i / this.rings) * 50;\n      items.push(svg`<circle class=\"ring\" cx=\"50\" cy=\"50\" r=\"${r}\" />`);\n    }\n    return items;\n  }\n\n  private _renderSpokes() {\n    if (this.rays <= 0)\n      return ``;\n    const items = [];\n    for (let i = 0; i < this.rays; i++) {\n      const angleRad = (i / this.rays) * 2 * Math.PI;\n      const cos = Math.cos(angleRad);\n      const sin = Math.sin(angleRad); // SVG +y downward matches CW convention directly\n      const x1 = 50 + cos * 50;\n      const y1 = 50 + sin * 50;\n      const x2 = 50 - cos * 50;\n      const y2 = 50 - sin * 50;\n      items.push(svg`<line class=\"spoke\" x1=\"${x1}\" y1=\"${y1}\" x2=\"${x2}\" y2=\"${y2}\" />`);\n    }\n    return items;\n  }\n\n  private _renderRay(markerX: number, markerY: number) {\n    if (!this.showRay)\n      return ``;\n    return svg`<line class=\"ray\" x1=\"50\" y1=\"50\" x2=\"${markerX}\" y2=\"${markerY}\" />`;\n  }\n\n  private _renderOrigin() {\n    if (!this.showOrigin)\n      return ``;\n    return svg`<circle class=\"origin-dot\" cx=\"50\" cy=\"50\" r=\"3\" style=\"r: calc(var(--origin-size) / 2)\" />`;\n  }\n\n  // -------------------------------------------------------------------------\n  // Render\n  // -------------------------------------------------------------------------\n\n  override render(): ReturnType<typeof html> {\n    const angleRad = this.angle * DEG_TO_RAD;\n    const { x: markerX, y: markerY } = polarToSvg(angleRad, clamp01(this.radius));\n\n    return html`\n      <div class=\"polar-pad-area\"\n           @pointerdown=${this._onPointerDown}\n           @keydown=${this._onKeyDown}\n           @keyup=${this._onKeyUp}\n           @blur=${() => this._pressedKeys.clear()}>\n        <svg viewBox=\"0 0 100 100\"\n             preserveAspectRatio=\"xMidYMid meet\"\n             tabindex=${this.disabled ? -1 : 0}>\n          <defs>\n            <clipPath id=\"circle-clip-${this._uid}\">\n              <circle cx=\"50\" cy=\"50\" r=\"50\" />\n            </clipPath>\n          </defs>\n\n          <!-- clipped group: background + rings + spokes -->\n          <g clip-path=\"url(#circle-clip-${this._uid})\">\n            <foreignObject x=\"0\" y=\"0\" width=\"100\" height=\"100\">\n              <div class=\"pad-background\" xmlns=\"http://www.w3.org/1999/xhtml\"></div>\n            </foreignObject>\n            ${this._renderRings()}\n            ${this._renderSpokes()}\n          </g>\n\n          <!-- border circle (on top of clip, non-scaling stroke) -->\n          <circle class=\"pad-border\" cx=\"50\" cy=\"50\" r=\"49.75\" />\n\n          <!-- ray + origin + marker -->\n          ${this._renderRay(markerX, markerY)}\n          ${this._renderOrigin()}\n          <circle\n            class=\"marker\"\n            cx=\"${markerX}\"\n            cy=\"${markerY}\"\n            r=\"5\"\n            style=\"r: calc(var(--marker-size) / 2)\"\n          />\n        </svg>\n      </div>\n    `;\n  }\n\n  /** Stable per-instance uid for SVG clipPath IDs. */\n  private readonly _uid = Math.random().toString(36).slice(2, 8);\n}\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type PolarPadInputDetail = {\n  readonly angle: number; // degrees, 0 = right, clockwise\n  readonly radius: number; // 0–1\n};\n\nexport type PolarPadInputEvent = CustomEvent<PolarPadInputDetail>;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-polar-pad': PolarPad;\n  }\n}\n"],"mappings":"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"}

package/dist/popup-Ddx9LCzY.js

@@ -0,0 +1,24 @@
+import { css } from "lit";
+//#region src/styles/popup.ts
+/**
+* Canonical surface styles for floating popup elements (menus, dropdowns,
+* colour picker, tooltips). Apply by adding `popupSurfaceStyles` to a
+* component's `static styles` array and the class `popup-surface` to the
+* popup container element.
+*
+* Intentionally omitted (remain per-component): positioning, padding,
+* dimensions, z-index, and open/close animations.
+*/
+const popupSurfaceStyles = css`
+  .popup-surface {
+    background: var(--surface-5);
+    border: 1px solid var(--surface-6);
+    border-radius: var(--radius-l);
+    box-shadow: var(--shadow-m);
+    color: var(--surface-5-text);
+  }
+`;
+//#endregion
+export { popupSurfaceStyles as t };
+
+//# sourceMappingURL=popup-Ddx9LCzY.js.map

package/dist/popup-Ddx9LCzY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-Ddx9LCzY.js","names":[],"sources":["../src/styles/popup.ts"],"sourcesContent":["import { css } from \"lit\";\n\n/**\n * Canonical surface styles for floating popup elements (menus, dropdowns,\n * colour picker, tooltips). Apply by adding `popupSurfaceStyles` to a\n * component's `static styles` array and the class `popup-surface` to the\n * popup container element.\n *\n * Intentionally omitted (remain per-component): positioning, padding,\n * dimensions, z-index, and open/close animations.\n */\nexport const popupSurfaceStyles = css`\n  .popup-surface {\n    background: var(--surface-5);\n    border: 1px solid var(--surface-6);\n    border-radius: var(--radius-l);\n    box-shadow: var(--shadow-m);\n    color: var(--surface-5-text);\n  }\n`;\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,qBAAqB,GAAG"}