etherpad-webcomponents 0.0.1

package/dist/EpColorPicker.js

@@ -0,0 +1,188 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+const isLightColor = (color) => {
+    try {
+        const ctx = document.createElement('canvas').getContext('2d');
+        if (!ctx)
+            return false;
+        ctx.fillStyle = color;
+        const resolved = ctx.fillStyle;
+        let r = 0, g = 0, b = 0;
+        if (resolved.startsWith('#')) {
+            const hex = resolved.slice(1);
+            r = parseInt(hex.slice(0, 2), 16);
+            g = parseInt(hex.slice(2, 4), 16);
+            b = parseInt(hex.slice(4, 6), 16);
+        }
+        else {
+            const match = resolved.match(/\d+/g);
+            if (match) {
+                r = parseInt(match[0], 10);
+                g = parseInt(match[1], 10);
+                b = parseInt(match[2], 10);
+            }
+        }
+        return (0.299 * r + 0.587 * g + 0.114 * b) / 255 > 0.6;
+    }
+    catch {
+        return false;
+    }
+};
+const DEFAULT_COLORS = [
+    'black', 'red', 'green', 'blue', 'yellow', 'orange',
+    'purple', 'pink', 'brown', 'gray', 'white', 'cyan',
+];
+let EpColorPicker = class EpColorPicker extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.colors = DEFAULT_COLORS;
+        this.value = '';
+    }
+    render() {
+        return html `
+      <div class="grid" role="listbox" aria-label="Color picker">
+        ${this.colors.map((color, i) => this._renderSwatch(color, i))}
+      </div>
+    `;
+    }
+    _renderSwatch(color, index) {
+        const isSelected = this.value === color;
+        const light = isLightColor(color);
+        const checkColor = light ? '#000' : '#fff';
+        return html `
+      <button class="swatch"
+              role="option"
+              aria-selected="${isSelected}"
+              aria-label="${color}"
+              tabindex="${index === 0 ? '0' : '-1'}"
+              @click="${() => this._selectColor(color, index)}"
+              @keydown="${(e) => this._handleKeydown(e)}">
+        <div class="swatch-inner" style="background:${color}">
+          <svg class="check" viewBox="0 0 14 14" fill="${checkColor}">
+            <path d="M11.5 3.5L5.5 10.5L2.5 7.5" stroke="${checkColor}" stroke-width="2"
+                  fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+      </button>
+    `;
+    }
+    _selectColor(color, index) {
+        this.value = color;
+        this.dispatchEvent(new CustomEvent('ep-color-select', {
+            bubbles: true, composed: true,
+            detail: { color, index },
+        }));
+    }
+    _handleKeydown(e) {
+        const swatches = Array.from(this.renderRoot.querySelectorAll('.swatch'));
+        const current = e.currentTarget;
+        const idx = swatches.indexOf(current);
+        let nextIdx = -1;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                nextIdx = (idx + 1) % swatches.length;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                nextIdx = (idx - 1 + swatches.length) % swatches.length;
+                break;
+            case 'Home':
+                nextIdx = 0;
+                break;
+            case 'End':
+                nextIdx = swatches.length - 1;
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                current.click();
+                return;
+            default:
+                return;
+        }
+        e.preventDefault();
+        swatches[idx].setAttribute('tabindex', '-1');
+        swatches[nextIdx].setAttribute('tabindex', '0');
+        swatches[nextIdx].focus();
+    }
+};
+EpColorPicker.styles = css `
+    :host {
+      --ep-font: var(--main-font-family, Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);
+      display: inline-block;
+      font-family: var(--ep-font);
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, 32px);
+      gap: 6px;
+      padding: 8px;
+      background: var(--bg-color, white);
+      border: 1px solid var(--middle-color, #d2d2d2);
+      border-radius: 5px;
+      box-shadow: 0 0 0 1px rgba(99, 114, 130, 0.16), 0 8px 16px rgba(27, 39, 51, 0.08);
+    }
+
+    .swatch {
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      border: 2px solid transparent;
+      cursor: pointer;
+      position: relative;
+      transition: border-color 0.15s ease, transform 0.1s ease;
+      padding: 0;
+      background: none;
+      outline: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .swatch:hover { transform: scale(1.1); }
+
+    .swatch:focus-visible {
+      outline: 2px solid var(--dark-color, #576273);
+      outline-offset: 2px;
+    }
+
+    .swatch[aria-selected="true"] {
+      border-color: var(--text-color, #485365);
+    }
+
+    .swatch-inner {
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .check {
+      display: none;
+      width: 14px;
+      height: 14px;
+    }
+
+    .swatch[aria-selected="true"] .check { display: block; }
+  `;
+__decorate([
+    property({ type: Array })
+], EpColorPicker.prototype, "colors", void 0);
+__decorate([
+    property()
+], EpColorPicker.prototype, "value", void 0);
+EpColorPicker = __decorate([
+    customElement('ep-color-picker')
+], EpColorPicker);
+export { EpColorPicker };
+//# sourceMappingURL=EpColorPicker.js.map

package/dist/EpColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpColorPicker.js","sourceRoot":"","sources":["../src/EpColorPicker.ts"],"names":[],"mappings":"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"}

package/dist/EpColorWheel.d.ts

@@ -0,0 +1,61 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class EpColorWheel extends LitElement {
+    static properties: {
+        size: {
+            type: NumberConstructor;
+        };
+        value: {
+            type: StringConstructor;
+        };
+        showInput: {
+            type: BooleanConstructor;
+            attribute: string;
+        };
+        _hsl: {
+            state: boolean;
+        };
+    };
+    static styles: import("lit").CSSResult;
+    size: number;
+    value: string;
+    showInput: boolean;
+    _hsl: [number, number, number];
+    private _dragging;
+    private _wheelWidth;
+    private _squareHalf;
+    private _mid;
+    private _maskDrawn;
+    private _ready;
+    private _boundMove;
+    private _boundUp;
+    constructor();
+    connectedCallback(): void;
+    protected firstUpdated(_changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private _paint;
+    protected render(): import("lit").TemplateResult<1>;
+    private _computeGeometry;
+    private _syncFromValue;
+    private _emitColor;
+    private _drawWheel;
+    private _drawOverlay;
+    /** Ring marker for the hue wheel — white ring with shadow */
+    private _drawRingMarker;
+    /** Dot marker for the square — filled circle with border */
+    private _drawDotMarker;
+    private _updateSolid;
+    private _handleDown;
+    private _handleMove;
+    private _handleUp;
+    private _applyPos;
+    private _onHexChange;
+    private _onHexKeydown;
+    setHSL(h: number, s: number, l: number): void;
+    getHSL(): [number, number, number];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ep-color-wheel': EpColorWheel;
+    }
+}
+//# sourceMappingURL=EpColorWheel.d.ts.map

package/dist/EpColorWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EpColorWheel.d.ts","sourceRoot":"","sources":["../src/EpColorWheel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAuD5D,qBAAa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,UAAU;;;;;;;;;;;;;;MAKxB;IAEF,OAAgB,MAAM,0BA8DpB;IAEF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAE/B,OAAO,CAAC,SAAS,CAAmC;IACpD,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,QAAQ,CAAa;;IAYpB,iBAAiB;cAKP,YAAY,CAAC,QAAQ,EAAE,cAAc;cAKrC,OAAO,CAAC,OAAO,EAAE,cAAc;IAOlD,OAAO,CAAC,MAAM;cAOK,MAAM;IA2BzB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,UAAU;IAuDlB,OAAO,CAAC,YAAY;IAkCpB,6DAA6D;IAC7D,OAAO,CAAC,eAAe;IAoBvB,4DAA4D;IAC5D,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,YAAY;IAcpB,OAAO,CAAC,aAAa;IAMrB,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM;IAMtC,MAAM,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC;CAGnC;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/EpColorWheel.js

@@ -0,0 +1,428 @@
+import { LitElement, html, css } from 'lit';
+// ---------------------------------------------------------------------------
+// Color math (HSL ↔ RGB, all values 0..1)
+// ---------------------------------------------------------------------------
+function hueToRGB(m1, m2, h) {
+    if (h < 0)
+        h++;
+    if (h > 1)
+        h--;
+    if (h * 6 < 1)
+        return m1 + (m2 - m1) * h * 6;
+    if (h * 2 < 1)
+        return m2;
+    if (h * 3 < 2)
+        return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+    return m1;
+}
+function hslToRgb(h, s, l) {
+    const m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
+    const m1 = l * 2 - m2;
+    return [hueToRGB(m1, m2, h + 1 / 3), hueToRGB(m1, m2, h), hueToRGB(m1, m2, h - 1 / 3)];
+}
+function rgbToHsl(r, g, b) {
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    const l = (max + min) / 2, d = max - min;
+    if (d === 0)
+        return [0, 0, l];
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h;
+    if (max === r)
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g)
+        h = ((b - r) / d + 2) / 6;
+    else
+        h = ((r - g) / d + 4) / 6;
+    return [h, s, l];
+}
+function rgbToHex(r, g, b) {
+    const x = (v) => Math.round(v * 255).toString(16).padStart(2, '0');
+    return `#${x(r)}${x(g)}${x(b)}`;
+}
+function hexToRgb(hex) {
+    let h = hex.replace('#', '');
+    if (h.length === 3)
+        h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+    return [parseInt(h.slice(0, 2), 16) / 255, parseInt(h.slice(2, 4), 16) / 255, parseInt(h.slice(4, 6), 16) / 255];
+}
+function luminance(r, g, b) {
+    return r * 0.3 + g * 0.59 + b * 0.11;
+}
+// Angle offset: hue 0 (red) at 12 o'clock
+const ANGLE_OFFSET = -Math.PI / 2;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export class EpColorWheel extends LitElement {
+    constructor() {
+        super();
+        this._dragging = null;
+        this._wheelWidth = 0;
+        this._squareHalf = 0;
+        this._mid = 0;
+        this._maskDrawn = false;
+        this._ready = false;
+        this.size = 200;
+        this.value = '#485365';
+        this.showInput = true;
+        this._hsl = [0, 0, 0.3];
+        this._boundMove = this._handleMove.bind(this);
+        this._boundUp = this._handleUp.bind(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._syncFromValue();
+    }
+    firstUpdated(_changed) {
+        this._ready = true;
+        this._paint();
+    }
+    updated(changed) {
+        if (!this._ready)
+            return;
+        if (changed.has('size'))
+            this._maskDrawn = false;
+        if (changed.has('value') && !this._dragging)
+            this._syncFromValue();
+        this._paint();
+    }
+    _paint() {
+        this._computeGeometry();
+        if (!this._maskDrawn) {
+            this._drawWheel();
+            this._maskDrawn = true;
+        }
+        this._drawOverlay();
+        this._updateSolid();
+    }
+    render() {
+        const s = this.size;
+        return html `
+      <div class="wrapper">
+        <div class="container" style="width:${s}px;height:${s}px;"
+             @mousedown="${this._handleDown}">
+          <div class="solid"></div>
+          <canvas class="mask" width="${s}" height="${s}"></canvas>
+          <canvas class="overlay" width="${s}" height="${s}"></canvas>
+        </div>
+        ${this.showInput ? html `
+          <div class="preview-row">
+            <div class="swatch-preview" style="background:${this.value}"></div>
+            <input class="hex-input"
+                   .value="${this.value}"
+                   @change="${this._onHexChange}"
+                   @keydown="${this._onHexKeydown}"
+                   maxlength="7" spellcheck="false"
+                   aria-label="Hex color value" />
+          </div>
+        ` : ''}
+      </div>
+    `;
+    }
+    // ── Geometry ─────────────────────────────────────────────
+    _computeGeometry() {
+        this._mid = this.size / 2;
+        this._wheelWidth = Math.round(this.size / 10);
+        const innerR = this._mid - this._wheelWidth - 4; // 4px gap
+        this._squareHalf = Math.floor(innerR * 0.7);
+    }
+    // ── Sync ─────────────────────────────────────────────────
+    _syncFromValue() {
+        try {
+            const [r, g, b] = hexToRgb(this.value);
+            this._hsl = rgbToHsl(r, g, b);
+        }
+        catch {
+            this._hsl = [0, 0, 0.3];
+        }
+    }
+    _emitColor() {
+        const [r, g, b] = hslToRgb(this._hsl[0], this._hsl[1], this._hsl[2]);
+        this.value = rgbToHex(r, g, b);
+        this.dispatchEvent(new CustomEvent('ep-color-change', {
+            bubbles: true, composed: true,
+            detail: { color: this.value, hsl: [this._hsl[0], this._hsl[1], this._hsl[2]] },
+        }));
+    }
+    // ── Draw: Hue wheel + sat/lum mask ──────────────────────
+    _drawWheel() {
+        const canvas = this.renderRoot?.querySelector('.mask');
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const size = this.size;
+        const mid = this._mid;
+        const ww = this._wheelWidth;
+        const sq = this._squareHalf;
+        ctx.clearRect(0, 0, size, size);
+        ctx.save();
+        ctx.translate(mid, mid);
+        // ── Hue ring (720 segments for smoothness) ──
+        const outerR = mid - 1;
+        const innerR = outerR - ww;
+        const steps = 720;
+        for (let i = 0; i < steps; i++) {
+            const hue = i / steps;
+            const a0 = hue * Math.PI * 2 + ANGLE_OFFSET - 0.01;
+            const a1 = (i + 1.5) / steps * Math.PI * 2 + ANGLE_OFFSET;
+            const [r, g, b] = hslToRgb(hue, 1, 0.5);
+            ctx.beginPath();
+            ctx.arc(0, 0, outerR, a0, a1);
+            ctx.arc(0, 0, innerR, a1, a0, true);
+            ctx.closePath();
+            ctx.fillStyle = rgbToHex(r, g, b);
+            ctx.fill();
+        }
+        ctx.restore();
+        // ── Sat/lum mask (absolute coords — putImageData ignores transform) ──
+        const sqSize = sq * 2;
+        if (sqSize <= 0)
+            return;
+        const imgData = ctx.createImageData(sqSize, sqSize);
+        const data = imgData.data;
+        for (let y = 0; y < sqSize; y++) {
+            const lum = 1 - y / sqSize;
+            for (let x = 0; x < sqSize; x++) {
+                const sat = 1 - x / sqSize;
+                const a = 1 - 2 * Math.min(lum * sat, (1 - lum) * sat);
+                const c = a > 0 ? ((2 * lum - 1 + a) * 0.5 / a) : 0;
+                const idx = (y * sqSize + x) * 4;
+                data[idx] = data[idx + 1] = data[idx + 2] = Math.round(c * 255);
+                data[idx + 3] = Math.round(a * 255);
+            }
+        }
+        ctx.putImageData(imgData, mid - sq, mid - sq);
+    }
+    // ── Draw: Overlay (markers) ──────────────────────────────
+    _drawOverlay() {
+        const canvas = this.renderRoot?.querySelector('.overlay');
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const size = this.size;
+        const mid = this._mid;
+        const ww = this._wheelWidth;
+        const sq = this._squareHalf;
+        const [h, s, l] = this._hsl;
+        ctx.clearRect(0, 0, size, size);
+        ctx.save();
+        ctx.translate(mid, mid);
+        const [cr, cg, cb] = hslToRgb(h, s, l);
+        const lum = luminance(cr, cg, cb);
+        // ── Hue marker on wheel ──
+        const hueAngle = h * Math.PI * 2 + ANGLE_OFFSET;
+        const wheelMidR = mid - 1 - ww / 2;
+        const hx = Math.cos(hueAngle) * wheelMidR;
+        const hy = Math.sin(hueAngle) * wheelMidR;
+        this._drawRingMarker(ctx, hx, hy, ww / 2 - 1);
+        // ── Square marker ──
+        const sx = -(s - 0.5) * sq * 2;
+        const sy = -(l - 0.5) * sq * 2;
+        this._drawDotMarker(ctx, sx, sy, lum > 0.55);
+        ctx.restore();
+    }
+    /** Ring marker for the hue wheel — white ring with shadow */
+    _drawRingMarker(ctx, x, y, r) {
+        // Shadow
+        ctx.save();
+        ctx.shadowColor = 'rgba(0,0,0,0.25)';
+        ctx.shadowBlur = 4;
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI * 2);
+        ctx.strokeStyle = 'white';
+        ctx.lineWidth = 2.5;
+        ctx.stroke();
+        ctx.restore();
+        // Inner ring
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI * 2);
+        ctx.strokeStyle = 'white';
+        ctx.lineWidth = 2.5;
+        ctx.stroke();
+    }
+    /** Dot marker for the square — filled circle with border */
+    _drawDotMarker(ctx, x, y, dark) {
+        const r = 7;
+        const border = dark ? 'rgba(0,0,0,0.6)' : 'white';
+        const inner = dark ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.25)';
+        // Shadow
+        ctx.save();
+        ctx.shadowColor = 'rgba(0,0,0,0.3)';
+        ctx.shadowBlur = 5;
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI * 2);
+        ctx.fillStyle = inner;
+        ctx.fill();
+        ctx.restore();
+        // Border ring
+        ctx.beginPath();
+        ctx.arc(x, y, r, 0, Math.PI * 2);
+        ctx.strokeStyle = border;
+        ctx.lineWidth = 2;
+        ctx.stroke();
+    }
+    // ── Update solid hue div ─────────────────────────────────
+    _updateSolid() {
+        const el = this.renderRoot?.querySelector('.solid');
+        if (!el)
+            return;
+        const sq = this._squareHalf;
+        const mid = this._mid;
+        const [r, g, b] = hslToRgb(this._hsl[0], 1, 0.5);
+        el.style.left = `${mid - sq}px`;
+        el.style.top = `${mid - sq}px`;
+        el.style.width = `${sq * 2}px`;
+        el.style.height = `${sq * 2}px`;
+        el.style.background = rgbToHex(r, g, b);
+    }
+    // ── Interaction ──────────────────────────────────────────
+    _handleDown(e) {
+        e.preventDefault();
+        const canvas = this.renderRoot?.querySelector('.overlay');
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        const pos = { x: e.clientX - rect.left - this._mid, y: e.clientY - rect.top - this._mid };
+        const sq = this._squareHalf;
+        // Chebyshev distance: inside square or on the wheel?
+        this._dragging = Math.max(Math.abs(pos.x), Math.abs(pos.y)) <= sq + 2 ? 'square' : 'wheel';
+        this._applyPos(pos);
+        document.addEventListener('mousemove', this._boundMove);
+        document.addEventListener('mouseup', this._boundUp);
+    }
+    _handleMove(e) {
+        if (!this._dragging)
+            return;
+        e.preventDefault();
+        const canvas = this.renderRoot?.querySelector('.overlay');
+        if (!canvas)
+            return;
+        const rect = canvas.getBoundingClientRect();
+        this._applyPos({ x: e.clientX - rect.left - this._mid, y: e.clientY - rect.top - this._mid });
+    }
+    _handleUp() {
+        this._dragging = null;
+        document.removeEventListener('mousemove', this._boundMove);
+        document.removeEventListener('mouseup', this._boundUp);
+    }
+    _applyPos(pos) {
+        const sq = this._squareHalf;
+        const [h, s, l] = this._hsl;
+        const clamp = (v) => Math.max(0, Math.min(1, v));
+        if (this._dragging === 'wheel') {
+            // atan2 gives angle from positive X axis; subtract offset to align with our wheel
+            const angle = Math.atan2(pos.y, pos.x) - ANGLE_OFFSET;
+            this._hsl = [(angle / (Math.PI * 2) + 1) % 1, s, l];
+        }
+        else {
+            this._hsl = [h, clamp(0.5 - pos.x / (sq * 2)), clamp(0.5 - pos.y / (sq * 2))];
+        }
+        this._emitColor();
+        this.requestUpdate();
+    }
+    // ── Hex input ────────────────────────────────────────────
+    _onHexChange(e) {
+        let val = e.target.value.trim();
+        if (!val.startsWith('#'))
+            val = '#' + val;
+        if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(val)) {
+            this.value = val;
+            this._syncFromValue();
+            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent('ep-color-change', {
+                bubbles: true, composed: true,
+                detail: { color: this.value, hsl: [this._hsl[0], this._hsl[1], this._hsl[2]] },
+            }));
+        }
+    }
+    _onHexKeydown(e) {
+        if (e.key === 'Enter')
+            e.target.blur();
+    }
+    // ── Public API ───────────────────────────────────────────
+    setHSL(h, s, l) {
+        this._hsl = [h, s, l];
+        this._emitColor();
+        this.requestUpdate();
+    }
+    getHSL() {
+        return [this._hsl[0], this._hsl[1], this._hsl[2]];
+    }
+}
+EpColorWheel.properties = {
+    size: { type: Number },
+    value: { type: String },
+    showInput: { type: Boolean, attribute: 'show-input' },
+    _hsl: { state: true },
+};
+EpColorWheel.styles = css `
+    :host {
+      --ep-font: var(--main-font-family, Quicksand, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);
+      display: inline-block;
+      font-family: var(--ep-font);
+      user-select: none;
+      -webkit-user-select: none;
+    }
+    .wrapper {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 14px;
+    }
+    .container {
+      position: relative;
+      border-radius: 50%;
+      box-shadow:
+        0 0 0 1px rgba(99, 114, 130, 0.08),
+        0 4px 20px rgba(27, 39, 51, 0.10);
+      cursor: crosshair;
+    }
+    canvas { position: absolute; top: 0; left: 0; pointer-events: none; }
+    canvas.overlay { pointer-events: none; }
+    .solid { position: absolute; border-radius: 3px; }
+    .preview-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      background: var(--bg-color, white);
+      border: 1px solid var(--middle-color, #d2d2d2);
+      border-radius: 8px;
+      box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+    }
+    .swatch-preview {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      border: 2px solid var(--middle-color, #d2d2d2);
+      flex-shrink: 0;
+      transition: background 0.15s ease;
+    }
+    .hex-input {
+      font-family: var(--ep-font);
+      font-size: 14px;
+      font-weight: 600;
+      padding: 4px 8px;
+      border: 1px solid transparent;
+      border-radius: 4px;
+      background: var(--bg-soft-color, #f2f3f4);
+      color: var(--text-color, #485365);
+      width: 78px;
+      outline: none;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      transition: border-color 0.15s ease, background 0.15s ease;
+    }
+    .hex-input:focus {
+      border-color: var(--dark-color, #576273);
+      background: var(--bg-color, white);
+    }
+  `;
+if (!customElements.get('ep-color-wheel')) {
+    customElements.define('ep-color-wheel', EpColorWheel);
+}
+//# sourceMappingURL=EpColorWheel.js.map