@adia-ai/web-components 0.4.5 → 0.4.7

package/components/color-picker/color-picker.js

@@ -1,540 +1,17 @@
 /**
- * <color-picker-ui value="#3b82f6" format="hex"></color-picker-ui>
+ * `<color-picker-ui>` — auto-registers the tag on import.
  *
- * OKLCH-native color picker with 2D area + H/C/L sliders.
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Layout:
- *   [═══════════ color area (chroma x lightness) ═══════════]
- *   H [────────────── slider ──────────────] 260
- *   C [────────────── slider ──────────────] 0.188
- *   L [────────────── slider ──────────────] 0.623
- *   [───────────────── hue track ──────────────────]
- *   oklch(0.62 0.188 260)                        [copy]
- *   #3b82f6                                      [copy]
+ *   import { UIColorPicker } from '@adia-ai/web-components/components/color-picker/class';
  *
- * Dogfoods: slider-ui (H/C/L channels)
- * Form-associated via UIFormElement + ElementInternals.
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIFormElement } from '../../core/form.js';
+import { defineIfFree } from '../../core/register.js';
+import { UIColorPicker } from './class.js';
 
-// ── OKLCH ↔ sRGB conversion ──────────────────────────────
+defineIfFree('color-picker-ui', UIColorPicker);
 
-const MAX_CHROMA = 0.4;
-
-function oklchToOklab(L, C, H) {
-  const hRad = H * Math.PI / 180;
-  return { L, a: C * Math.cos(hRad), b: C * Math.sin(hRad) };
-}
-
-function oklabToLinearSrgb(L, a, b) {
-  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
-  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
-  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
-  const l = l_ * l_ * l_;
-  const m = m_ * m_ * m_;
-  const s = s_ * s_ * s_;
-  return [
-    +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-    -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s,
-  ];
-}
-
-function linearToSrgb(c) {
-  return c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
-}
-
-function srgbToLinear(c) {
-  return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-}
-
-function oklchToRgb(L, C, H) {
-  const { a, b } = oklchToOklab(L, C, H);
-  const [lr, lg, lb] = oklabToLinearSrgb(L, a, b);
-  return [
-    Math.max(0, Math.min(1, linearToSrgb(lr))),
-    Math.max(0, Math.min(1, linearToSrgb(lg))),
-    Math.max(0, Math.min(1, linearToSrgb(lb))),
-  ];
-}
-
-function rgbToHex(r, g, b) {
-  const h = c => Math.round(c * 255).toString(16).padStart(2, '0');
-  return `#${h(r)}${h(g)}${h(b)}`;
-}
-
-function oklchToHex(L, C, H) {
-  const [r, g, b] = oklchToRgb(L, C, H);
-  return rgbToHex(r, g, b);
-}
-
-function hexToOklch(hex) {
-  hex = hex.replace('#', '');
-  if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
-  const r = srgbToLinear(parseInt(hex.slice(0,2),16)/255);
-  const g = srgbToLinear(parseInt(hex.slice(2,4),16)/255);
-  const b = srgbToLinear(parseInt(hex.slice(4,6),16)/255);
-  const l_ = Math.cbrt(0.4122214708*r + 0.5363325363*g + 0.0514459929*b);
-  const m_ = Math.cbrt(0.2119034982*r + 0.6806995451*g + 0.1073969566*b);
-  const s_ = Math.cbrt(0.0883024619*r + 0.2817188376*g + 0.6299787005*b);
-  const L = 0.2104542553*l_ + 0.7936177850*m_ - 0.0040720468*s_;
-  const a = 1.9779984951*l_ - 2.4285922050*m_ + 0.4505937099*s_;
-  const bv = 0.0259040371*l_ + 0.7827717662*m_ - 0.8086757660*s_;
-  const C = Math.sqrt(a*a + bv*bv);
-  let H = Math.atan2(bv, a) * 180 / Math.PI;
-  if (H < 0) H += 360;
-  return { L, C, H };
-}
-
-function isInGamut(r, g, b) {
-  const e = 0.001;
-  return r >= -e && r <= 1+e && g >= -e && g <= 1+e && b >= -e && b <= 1+e;
-}
-
-function gamutMapChroma(L, C, H) {
-  const { a, b } = oklchToOklab(L, C, H);
-  const [lr, lg, lb] = oklabToLinearSrgb(L, a, b);
-  if (isInGamut(linearToSrgb(lr), linearToSrgb(lg), linearToSrgb(lb))) return C;
-  let lo = 0, hi = C;
-  for (let i = 0; i < 8; i++) {
-    const mid = (lo + hi) / 2;
-    const { a: ma, b: mb } = oklchToOklab(L, mid, H);
-    const [mr, mg, mbb] = oklabToLinearSrgb(L, ma, mb);
-    if (isInGamut(linearToSrgb(mr), linearToSrgb(mg), linearToSrgb(mbb))) lo = mid;
-    else hi = mid;
-  }
-  return lo;
-}
-
-// ── Component ────────────────────────────────────────────
-
-class UIColorPicker extends UIFormElement {
-  static properties = {
-    ...UIFormElement.properties,
-    value:    { type: String,  default: '#3b82f6', reflect: true },
-    format:   { type: String,  default: 'hex',     reflect: true },
-    disabled: { type: Boolean, default: false,      reflect: true },
-  };
-
-  #L = 0.6; #C = 0.15; #H = 230;
-  #bound = false;
-  #dragging = null; // 'area' | 'hue' | null
-  #internalUpdate = false;
-
-  // DOM refs
-  #canvas = null;
-  #ctx = null;
-  #areaEl = null;
-  #areaThumb = null;
-  #hueTrack = null;
-  #hueThumb = null;
-  #oklchVal = null;
-  #hexVal = null;
-  #areaResizeObs = null;
-  #hueSlider = null;
-  #chromaSlider = null;
-  #lightnessSlider = null;
-  #copyButtons = []; // [{ el, handler }]
-  #copyTimer = null;
-
-  static template = () => null;
-
-  // ── Stable listeners ──
-
-  #onSliderInput = (e) => {
-    const slider = e.currentTarget;
-    const channel = slider.getAttribute('data-channel');
-    if (channel === 'hue') this.#H = +slider.value;
-    else if (channel === 'chroma') this.#C = +slider.value;
-    else if (channel === 'lightness') this.#L = +slider.value;
-    this.#commit('input');
-  };
-
-  #onAreaPointerDown = (e) => {
-    if (this.disabled) return;
-    this.#dragging = 'area';
-    this.#areaEl.setPointerCapture(e.pointerId);
-    this.#updateAreaFromPointer(e);
-  };
-
-  #onAreaPointerMove = (e) => {
-    if (this.#dragging === 'area') this.#updateAreaFromPointer(e);
-  };
-
-  #onAreaPointerUp = () => {
-    if (this.#dragging === 'area') { this.#dragging = null; this.#commit('change'); }
-  };
-
-  #onHuePointerDown = (e) => {
-    if (this.disabled) return;
-    this.#dragging = 'hue';
-    this.#hueTrack.setPointerCapture(e.pointerId);
-    this.#updateHueFromPointer(e);
-  };
-
-  #onHuePointerMove = (e) => {
-    if (this.#dragging === 'hue') this.#updateHueFromPointer(e);
-  };
-
-  #onHuePointerUp = () => {
-    if (this.#dragging === 'hue') { this.#dragging = null; this.#commit('change'); }
-  };
-
-  #onAreaKeydown = (e) => {
-    if (this.disabled) return;
-    const step = e.shiftKey ? 0.05 : 0.01;
-    const cStep = e.shiftKey ? 0.04 : 0.004;
-    switch (e.key) {
-      case 'ArrowRight': e.preventDefault(); this.#C = Math.min(MAX_CHROMA, this.#C + cStep); break;
-      case 'ArrowLeft':  e.preventDefault(); this.#C = Math.max(0, this.#C - cStep); break;
-      case 'ArrowUp':    e.preventDefault(); this.#L = Math.min(1, this.#L + step); break;
-      case 'ArrowDown':  e.preventDefault(); this.#L = Math.max(0, this.#L - step); break;
-      default: return;
-    }
-    this.#commit('change');
-  };
-
-  #onHueKeydown = (e) => {
-    if (this.disabled) return;
-    const step = e.shiftKey ? 10 : 1;
-    switch (e.key) {
-      case 'ArrowRight': case 'ArrowUp':   e.preventDefault(); this.#H = (this.#H + step) % 360; break;
-      case 'ArrowLeft':  case 'ArrowDown':  e.preventDefault(); this.#H = (this.#H - step + 360) % 360; break;
-      default: return;
-    }
-    this.#commit('change');
-  };
-
-  connected() {
-    super.connected();
-    this.#parseValue(this.value);
-
-    if (this.#bound) return;
-    this.#bound = true;
-
-    // ── Build DOM ──
-
-    // Color area
-    this.#areaEl = document.createElement('div');
-    this.#areaEl.setAttribute('data-area', '');
-    this.#areaEl.setAttribute('tabindex', '0');
-    this.#areaEl.setAttribute('role', 'slider');
-    this.#areaEl.setAttribute('aria-label', 'Color area: chroma and lightness');
-
-    this.#canvas = document.createElement('canvas');
-    this.#canvas.style.cssText = 'width:100%;height:100%;display:block;border-radius:inherit;';
-    this.#areaEl.appendChild(this.#canvas);
-    this.#ctx = this.#canvas.getContext('2d', { willReadFrequently: true });
-
-    this.#areaThumb = document.createElement('div');
-    this.#areaThumb.setAttribute('data-area-thumb', '');
-    this.#areaEl.appendChild(this.#areaThumb);
-
-    this.appendChild(this.#areaEl);
-
-    // Slider rows
-    const sliders = document.createElement('div');
-    sliders.setAttribute('data-sliders', '');
-
-    const makeSlider = (label, channel, min, max, step) => {
-      const slider = document.createElement('slider-ui');
-      slider.setAttribute('data-channel', channel);
-      slider.setAttribute('label', label);
-      slider.setAttribute('min', min);
-      slider.setAttribute('max', max);
-      slider.setAttribute('step', step);
-
-      slider.addEventListener('input', this.#onSliderInput);
-
-      sliders.appendChild(slider);
-      return slider;
-    };
-
-    this.#hueSlider = makeSlider('H', 'hue', 0, 360, 1);
-    this.#chromaSlider = makeSlider('C', 'chroma', 0, MAX_CHROMA, 0.001);
-    this.#lightnessSlider = makeSlider('L', 'lightness', 0, 1, 0.001);
-    this.appendChild(sliders);
-
-    // Hue gradient track
-    this.#hueTrack = document.createElement('div');
-    this.#hueTrack.setAttribute('data-hue-track', '');
-    this.#hueTrack.setAttribute('tabindex', '0');
-    this.#hueTrack.setAttribute('role', 'slider');
-    this.#hueTrack.setAttribute('aria-label', 'Hue');
-    this.#hueThumb = document.createElement('div');
-    this.#hueThumb.setAttribute('data-hue-thumb', '');
-    this.#hueTrack.appendChild(this.#hueThumb);
-    this.appendChild(this.#hueTrack);
-
-    // Output rows
-    const output = document.createElement('div');
-    output.setAttribute('data-output', '');
-
-    const makeOutput = (format) => {
-      const group = document.createElement('div');
-      group.setAttribute('data-output-group', '');
-
-      const val = document.createElement('span');
-      val.setAttribute('data-output-value', '');
-      val.setAttribute('data-format', format);
-
-      const btn = document.createElement('div');
-      btn.setAttribute('role', 'button');
-      btn.setAttribute('tabindex', '0');
-      btn.setAttribute('data-copy', format);
-      btn.setAttribute('aria-label', `Copy ${format}`);
-      btn.innerHTML = '<icon-ui name="copy"></icon-ui>';
-      const handler = () => this.#copy(format, btn);
-      btn.addEventListener('click', handler);
-      this.#copyButtons.push({ el: btn, handler });
-
-      group.appendChild(val);
-      group.appendChild(btn);
-      output.appendChild(group);
-      return val;
-    };
-
-    this.#oklchVal = makeOutput('oklch');
-    this.#hexVal = makeOutput('hex');
-    this.appendChild(output);
-
-    // ── Area drag ──
-
-    this.#areaEl.addEventListener('pointerdown', this.#onAreaPointerDown);
-    this.#areaEl.addEventListener('pointermove', this.#onAreaPointerMove);
-    this.#areaEl.addEventListener('pointerup', this.#onAreaPointerUp);
-
-    // ── Hue track drag ──
-
-    this.#hueTrack.addEventListener('pointerdown', this.#onHuePointerDown);
-    this.#hueTrack.addEventListener('pointermove', this.#onHuePointerMove);
-    this.#hueTrack.addEventListener('pointerup', this.#onHuePointerUp);
-
-    // ── Keyboard on area ──
-
-    this.#areaEl.addEventListener('keydown', this.#onAreaKeydown);
-
-    // ── Keyboard on hue ──
-
-    this.#hueTrack.addEventListener('keydown', this.#onHueKeydown);
-
-    // Observe area resize to redraw canvas
-    this.#areaResizeObs = new ResizeObserver(() => this.#drawArea());
-    this.#areaResizeObs.observe(this.#areaEl);
-  }
-
-  disconnected() {
-    super.disconnected();
-    if (this.#copyTimer != null) {
-      clearTimeout(this.#copyTimer);
-      this.#copyTimer = null;
-    }
-    if (this.#areaResizeObs) {
-      this.#areaResizeObs.disconnect();
-      this.#areaResizeObs = null;
-    }
-    if (this.#areaEl) {
-      this.#areaEl.removeEventListener('pointerdown', this.#onAreaPointerDown);
-      this.#areaEl.removeEventListener('pointermove', this.#onAreaPointerMove);
-      this.#areaEl.removeEventListener('pointerup', this.#onAreaPointerUp);
-      this.#areaEl.removeEventListener('keydown', this.#onAreaKeydown);
-    }
-    if (this.#hueTrack) {
-      this.#hueTrack.removeEventListener('pointerdown', this.#onHuePointerDown);
-      this.#hueTrack.removeEventListener('pointermove', this.#onHuePointerMove);
-      this.#hueTrack.removeEventListener('pointerup', this.#onHuePointerUp);
-      this.#hueTrack.removeEventListener('keydown', this.#onHueKeydown);
-    }
-    this.#hueSlider?.removeEventListener('input', this.#onSliderInput);
-    this.#chromaSlider?.removeEventListener('input', this.#onSliderInput);
-    this.#lightnessSlider?.removeEventListener('input', this.#onSliderInput);
-    for (const { el, handler } of this.#copyButtons) {
-      el.removeEventListener('click', handler);
-    }
-    this.#copyButtons = [];
-    this.#bound = false;
-  }
-
-  // ── Pointer helpers ──
-
-  #updateAreaFromPointer(e) {
-    const rect = this.#areaEl.getBoundingClientRect();
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-    this.#C = x * MAX_CHROMA;
-    this.#L = 1 - y;
-    this.#commit('input');
-  }
-
-  #updateHueFromPointer(e) {
-    const rect = this.#hueTrack.getBoundingClientRect();
-    const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    this.#H = x * 360;
-    this.#commit('input');
-  }
-
-  // ── Value parsing ──
-
-  #parseValue(val) {
-    if (!val) return;
-    if (val.startsWith('#')) {
-      const o = hexToOklch(val);
-      this.#L = o.L; this.#C = o.C; this.#H = o.H;
-    } else if (val.startsWith('oklch(')) {
-      const m = val.match(/oklch\(\s*([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
-      if (m) { this.#L = +m[1]; this.#C = +m[2]; this.#H = +m[3]; }
-    }
-  }
-
-  // ── Commit: update value + fire events ──
-
-  #commit(eventType) {
-    const clampedC = gamutMapChroma(this.#L, this.#C, this.#H);
-    const hexVal = oklchToHex(this.#L, clampedC, this.#H);
-    const oklchStr = this.#oklchStr();
-
-    this.#internalUpdate = true;
-    this.value = this.format === 'oklch' ? oklchStr : hexVal;
-    this.syncValue();
-
-    const detail = { value: this.value, l: this.#L, c: this.#C, h: this.#H, hex: hexVal, oklch: oklchStr };
-    this.dispatchEvent(new CustomEvent(eventType, { bubbles: true, detail }));
-  }
-
-  #oklchStr() {
-    return `oklch(${this.#L.toFixed(2)} ${this.#C.toFixed(3)} ${Math.round(this.#H)})`;
-  }
-
-  // ── Copy ──
-
-  #copy(fmt, btn) {
-    const text = fmt === 'oklch'
-      ? this.#oklchStr()
-      : oklchToHex(this.#L, gamutMapChroma(this.#L, this.#C, this.#H), this.#H);
-
-    const iconEl = btn.querySelector('icon-ui');
-    const onDone = (ok) => {
-      if (iconEl) {
-        iconEl.setAttribute('name', ok ? 'check' : 'warning');
-        if (this.#copyTimer != null) clearTimeout(this.#copyTimer);
-        this.#copyTimer = setTimeout(() => {
-          this.#copyTimer = null;
-          iconEl.setAttribute('name', 'copy');
-        }, 1500);
-      }
-    };
-
-    if (navigator.clipboard?.writeText) {
-      navigator.clipboard.writeText(text).then(
-        () => { if (!this.isConnected) return; onDone(true); },
-        () => { if (!this.isConnected) return; onDone(false); },
-      );
-    } else {
-      const ta = Object.assign(document.createElement('textarea'), { value: text });
-      ta.style.cssText = 'position:fixed;opacity:0';
-      document.body.appendChild(ta);
-      ta.select();
-      onDone(document.execCommand('copy'));
-      ta.remove();
-    }
-  }
-
-  // ── Canvas rendering ──
-
-  #drawArea() {
-    if (!this.#canvas || !this.#ctx || !this.#areaEl) return;
-
-    const dpr = Math.min(window.devicePixelRatio || 1, 2) * 0.5;
-    const w = Math.round(this.#areaEl.clientWidth * dpr);
-    const h = Math.round(this.#areaEl.clientHeight * dpr);
-    if (w <= 0 || h <= 0) return;
-
-    this.#canvas.width = w;
-    this.#canvas.height = h;
-
-    const img = this.#ctx.createImageData(w, h);
-    const data = img.data;
-    const hue = this.#H;
-
-    for (let y = 0; y < h; y++) {
-      const L = 1 - y / (h - 1);
-      for (let x = 0; x < w; x++) {
-        const C = (x / (w - 1)) * MAX_CHROMA;
-        const clampedC = gamutMapChroma(L, C, hue);
-        const [r, g, b] = oklchToRgb(L, clampedC, hue);
-        const i = (y * w + x) * 4;
-        data[i]     = Math.round(r * 255);
-        data[i + 1] = Math.round(g * 255);
-        data[i + 2] = Math.round(b * 255);
-        data[i + 3] = 255;
-      }
-    }
-
-    this.#ctx.putImageData(img, 0, 0);
-  }
-
-  // ── Render ──
-
-  render() {
-    if (this.#internalUpdate) {
-      this.#internalUpdate = false;
-    } else {
-      this.#parseValue(this.value);
-    }
-
-    this.#drawArea();
-
-    // Area thumb
-    if (this.#areaThumb) {
-      const xPct = (this.#C / MAX_CHROMA) * 100;
-      const yPct = (1 - this.#L) * 100;
-      this.#areaThumb.style.left = `${xPct}%`;
-      this.#areaThumb.style.top = `${yPct}%`;
-      this.#areaThumb.style.background = oklchToHex(this.#L, gamutMapChroma(this.#L, this.#C, this.#H), this.#H);
-    }
-
-    // Hue track gradient
-    if (this.#hueTrack) {
-      const stops = [];
-      for (let h = 0; h <= 360; h += 30) stops.push(oklchToHex(0.7, 0.15, h));
-      this.#hueTrack.style.background = `linear-gradient(to right, ${stops.join(', ')})`;
-      this.#hueTrack.setAttribute('aria-valuenow', String(Math.round(this.#H)));
-    }
-
-    // Hue thumb
-    if (this.#hueThumb) {
-      this.#hueThumb.style.left = `${(this.#H / 360) * 100}%`;
-      this.#hueThumb.style.background = oklchToHex(0.7, 0.15, this.#H);
-    }
-
-    // ARIA
-    if (this.#areaEl) {
-      this.#areaEl.setAttribute('aria-valuetext', this.#oklchStr());
-    }
-
-    // Slider values
-    const hueSlider = this.querySelector('slider-ui[data-channel="hue"]');
-    const chromaSlider = this.querySelector('slider-ui[data-channel="chroma"]');
-    const lightnessSlider = this.querySelector('slider-ui[data-channel="lightness"]');
-    if (hueSlider) hueSlider.value = Math.round(this.#H);
-    if (chromaSlider) chromaSlider.value = +this.#C.toFixed(3);
-    if (lightnessSlider) lightnessSlider.value = +this.#L.toFixed(3);
-
-    // Disabled
-    if (this.disabled) this.setAttribute('aria-disabled', 'true');
-    else this.removeAttribute('aria-disabled');
-
-    // Output values
-    const hex = oklchToHex(this.#L, gamutMapChroma(this.#L, this.#C, this.#H), this.#H);
-    if (this.#oklchVal) this.#oklchVal.textContent = this.#oklchStr();
-    if (this.#hexVal) this.#hexVal.textContent = hex;
-  }
-
-  onFormReset() {
-    this.value = '#3b82f6';
-  }
-}
-
-customElements.define('color-picker-ui', UIColorPicker);
 export { UIColorPicker };