@ixfx/components 0.2.2 → 0.2.4

package/dist/editable-label/editable-label.js

@@ -0,0 +1,348 @@
+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 { css, html, LitElement } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+let EditableLabel = class EditableLabel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.mode = `label`;
+        this.entryMode = `free`;
+        this.value = ``;
+        this.disabled = false;
+        this.placeholder = ``;
+        /**
+         * Controls when displayText is shown:
+         *  - 'hidden' (default): never use displayText
+         *  - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay
+         *  - 'override': always show displayText, even when editing
+         *  - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay
+         */
+        this.displayTextLogic = `hidden`;
+        /** Delay before showing value in transient mode (ms). Default: 50 */
+        this.appearDelay = 50;
+        /** Delay before reverting to displayText after editing ends (ms). Default: 1000 */
+        this.disappearDelay = 1000;
+        this._editing = false;
+        /** Snapshot of value taken when editing begins; restored on cancel. */
+        this._prevValue = ``;
+        // ── Transient display state ─────────────────────────────────────────────────
+        this._hovering = false;
+        this._transientShowingValue = false;
+        this._transientTimer = undefined;
+        this._showModeWaitingToHide = false;
+        this._onMouseEnter = () => {
+            if (this.displayTextLogic !== `transient`)
+                return;
+            this._hovering = true;
+            this._clearTransientTimer();
+            this._transientTimer = window.setTimeout(() => {
+                this._transientShowingValue = true;
+                this._requestDisplayUpdate();
+            }, this.appearDelay);
+        };
+        this._onMouseLeave = () => {
+            if (this.displayTextLogic !== `transient`)
+                return;
+            this._hovering = false;
+            this._startTransientRevertTimer();
+        };
+        this._handleFocus = () => {
+            if (this.mode === `editor` && !this.disabled && !this._editing) {
+                this._beginEdit();
+            }
+        };
+        this._handleBlur = () => {
+            if (this._editing)
+                this._tryCommit();
+        };
+        this._handleKeydown = (e) => {
+            if (!this._editing)
+                return;
+            if (e.key === `Enter`) {
+                e.preventDefault();
+                this._tryCommit();
+                if (this.mode === `editor`)
+                    this._contentEl?.blur();
+            }
+            else if (e.key === `Escape`) {
+                e.preventDefault();
+                this._cancelEdit();
+                if (this.mode === `editor`)
+                    this._contentEl?.blur();
+            }
+        };
+        this._handleBeforeInput = (e) => {
+            if (e.inputType !== `insertText` || !e.data)
+                return;
+            if (!this._isAllowedInput(e.data)) {
+                e.preventDefault();
+            }
+        };
+        this._handleInput = () => {
+            if (!this._editing)
+                return;
+            const raw = this._contentEl?.textContent?.trim() ?? ``;
+            this.dispatchEvent(new CustomEvent(`input`, {
+                detail: { value: raw },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    get _contentEl() {
+        return this.renderRoot?.querySelector(`.content`) ?? undefined;
+    }
+    _clearTransientTimer() {
+        if (this._transientTimer !== undefined) {
+            clearTimeout(this._transientTimer);
+            this._transientTimer = undefined;
+        }
+    }
+    _startTransientRevertTimer() {
+        this._clearTransientTimer();
+        this._transientTimer = window.setTimeout(() => {
+            if (!this._hovering && this.displayTextLogic === `transient`) {
+                this._transientShowingValue = false;
+                this._requestDisplayUpdate();
+            }
+        }, this.disappearDelay);
+    }
+    _requestDisplayUpdate() {
+        if (!this._editing) {
+            const el = this._contentEl;
+            if (el) {
+                el.textContent = this._getDisplayText();
+            }
+        }
+    }
+    /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */
+    _onUserInteraction() {
+        if (this.displayTextLogic !== `transient`)
+            return;
+        this._clearTransientTimer();
+        this._transientTimer = window.setTimeout(() => {
+            this._transientShowingValue = true;
+            this._startTransientRevertTimer();
+            this._requestDisplayUpdate();
+        }, this.appearDelay);
+    }
+    ;
+    // ── Core logic ───────────────────────────────────────────────────────────
+    _beginEdit() {
+        this._prevValue = this.value;
+        this._editing = true;
+        this.removeAttribute(`invalid`);
+    }
+    _tryCommit() {
+        let raw = this._contentEl?.textContent?.trim() ?? ``;
+        if (this.entryMode === `percent`)
+            raw = raw.replaceAll(`%`, ``).trim();
+        const validate = this.validator ?? this._defaultValidator.bind(this);
+        if (validate(raw)) {
+            this.removeAttribute(`invalid`);
+            const prev = this.value;
+            this.value = raw;
+            this._editing = false;
+            if (raw !== prev) {
+                this.dispatchEvent(new CustomEvent(`change`, {
+                    detail: { value: raw },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+        else {
+            this._cancelEdit();
+        }
+    }
+    _cancelEdit() {
+        this.value = this._prevValue;
+        this._editing = false;
+        this.removeAttribute(`invalid`);
+    }
+    _getDisplayText() {
+        const useDisplayText = this._shouldUseDisplayText();
+        if (useDisplayText && this.displayText !== undefined && this.displayText !== ``) {
+            return this.displayText;
+        }
+        if (!this.value)
+            return ``;
+        if (this.formatter)
+            return this.formatter(this.value);
+        if (this.entryMode === `percent`)
+            return `${this.value}%`;
+        return this.value;
+    }
+    _shouldUseDisplayText() {
+        if (this.displayTextLogic === `hidden`)
+            return false;
+        if (this.displayTextLogic === `override`)
+            return true;
+        if (this.displayTextLogic === `show`) {
+            if (this._editing)
+                return false;
+            return this._showModeWaitingToHide;
+        }
+        if (this.displayTextLogic === `transient`) {
+            if (this._editing)
+                return false;
+            if (this._transientShowingValue)
+                return false;
+            return true;
+        }
+        return false;
+    }
+    _isAllowedInput(char) {
+        switch (this.entryMode) {
+            case `text`: return /^[a-z\s]$/i.test(char);
+            case `number`: return /^[\d.\-]$/.test(char);
+            case `percent`: return /^[\d.%]$/.test(char);
+            default: return true;
+        }
+    }
+    _defaultValidator(value) {
+        switch (this.entryMode) {
+            case `text`: return /^[a-z\s]*$/i.test(value);
+            case `number`: return value === `` || /^-?\d*(?:\.\d*)?$/.test(value);
+            case `percent`: return value === `` || /^\d*(?:\.\d*)?$/.test(value);
+            default: return true;
+        } // asdf
+    }
+    // ── Styles ───────────────────────────────────────────────────────────────
+    static { this.styles = [css `
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      --_font-size:   var(--label-font-size,   var(--text-m,        12px));
+      --_font-family: var(--label-font-family, var(--font-family,   system-ui, sans-serif));
+      --_color:       var(--label-color,       var(--surface-2-text));
+      --_muted:       var(--label-muted-color, var(--surface-muted-text, oklch(55% 0.02 240)));
+      --_padding:     var(--label-padding,     var(--space-xs, 3px) var(--space-s, 4px));
+      --_radius:      var(--label-radius,      var(--radius-s, 3px));
+      --_align:       var(--label-align,       center);
+      --_min-width:   var(--label-min-width,   1ch);
+    }
+
+    .content {
+      box-sizing: border-box;
+      width: 100%;
+      text-align: var(--_align);
+      outline: none;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: var(--_min-width);
+      font-family: var(--_font-family);
+      font-size: var(--_font-size);
+      color: var(--_color);
+      padding: var(--_padding);
+      border: 1px solid transparent;
+      border-radius: var(--_radius);
+      cursor: pointer;
+      transition:
+        background var(--transition, 0.15s ease-out),
+        border-color var(--transition, 0.15s ease-out);
+    }
+
+    /* Remove overflow clipping while editing so the cursor is never hidden */
+    .content[contenteditable="plaintext-only"] {
+      overflow: visible;
+      text-overflow: clip;
+    }
+
+    /* ── Label mode ── */
+    :host([mode="label"]) .content {
+      background: transparent;
+    }
+
+    :host([mode="label"]) .content[contenteditable="plaintext-only"] {
+      background: var(--surface-4, oklch(22% 0.02 240));
+      border: var(--border, 1px solid oklch(25% 0.02 240));
+      cursor: text;
+    }
+
+    /* ── Editor mode — always shows box ── */
+    :host([mode="editor"]) .content {
+      background: var(--surface-4, oklch(22% 0.02 240));
+      border: var(--border, 1px solid oklch(25% 0.02 240));
+    }
+
+    :host([mode="editor"]) .content[contenteditable="plaintext-only"] {
+      border-color: var(--accent, oklch(60% 0.15 140));
+      cursor: text;
+    }
+
+    /* ── Placeholder ── */
+    .content:empty::before {
+      content: attr(data-placeholder);
+      color: var(--_muted);
+      pointer-events: none;
+    }
+
+    /* ── Invalid ── */
+    :host([invalid]) .content {
+      border-color: var(--error, oklch(60% 0.15 20));
+    }
+
+    /* ── Disabled ── */
+    :host([disabled]) .content {
+      opacity: var(--disabled-opacity, 0.5);
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `]; }
+};
+__decorate([
+    property({ reflect: true })
+], EditableLabel.prototype, "mode", void 0);
+__decorate([
+    property({ attribute: `entry-mode`, reflect: true })
+], EditableLabel.prototype, "entryMode", void 0);
+__decorate([
+    property({ reflect: true })
+], EditableLabel.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], EditableLabel.prototype, "disabled", void 0);
+__decorate([
+    property()
+], EditableLabel.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: `display-text` })
+], EditableLabel.prototype, "displayText", void 0);
+__decorate([
+    property({ attribute: `display-text-logic` })
+], EditableLabel.prototype, "displayTextLogic", void 0);
+__decorate([
+    property({ type: Number, attribute: `appear-delay` })
+], EditableLabel.prototype, "appearDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: `disappear-delay` })
+], EditableLabel.prototype, "disappearDelay", void 0);
+__decorate([
+    property({ attribute: false })
+], EditableLabel.prototype, "validator", void 0);
+__decorate([
+    property({ attribute: false })
+], EditableLabel.prototype, "formatter", void 0);
+__decorate([
+    state()
+], EditableLabel.prototype, "_editing", void 0);
+EditableLabel = __decorate([
+    customElement(`ixfx-editable-label`)
+], EditableLabel);
+export { EditableLabel };
+function _selectAll(el) {
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const sel = window.getSelection();
+    sel?.removeAllRanges();
+    sel?.addRange(range);
+}
+//# sourceMappingURL=editable-label.js.map

package/dist/editable-label/editable-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-label.js","sourceRoot":"","sources":["../../src/editable-label/editable-label.ts"],"names":[],"mappings":";;;;;;AA+BA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAYnE,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACwB,SAAI,GAAiB,OAAO,CAAC;QACJ,cAAS,GAAc,MAAM,CAAC;QACvD,UAAK,GAAG,EAAE,CAAC;QACI,aAAQ,GAAG,KAAK,CAAC;QACjD,gBAAW,GAAG,EAAE,CAAC;QAK7B;;;;;;WAMG;QAC4C,qBAAgB,GAAqB,QAAQ,CAAC;QAE7F,qEAAqE;QACd,gBAAW,GAAG,EAAE,CAAC;QAExE,mFAAmF;QACzB,mBAAc,GAAG,IAAI,CAAC;QAQ7D,aAAQ,GAAG,KAAK,CAAC;QAMpC,uEAAuE;QAC7D,eAAU,GAAG,EAAE,CAAC;QAE1B,+EAA+E;QACrE,cAAS,GAAG,KAAK,CAAC;QAClB,2BAAsB,GAAG,KAAK,CAAC;QAC/B,oBAAe,GAAuB,SAAS,CAAC;QAChD,2BAAsB,GAAG,KAAK,CAAC;QASjC,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,IAAI,CAAC,gBAAgB,KAAK,WAAW;gBACvC,OAAO;YACT,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC5C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;gBACnC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACvB,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,IAAI,CAAC,gBAAgB,KAAK,WAAW;gBACvC,OAAO;YACT,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,0BAA0B,EAAE,CAAC;QACpC,CAAC,CAAC;QAiCQ,iBAAY,GAAG,GAAS,EAAE;YAClC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAC/D,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEQ,gBAAW,GAAG,GAAS,EAAE;YACjC,IAAI,IAAI,CAAC,QAAQ;gBACf,IAAI,CAAC,UAAU,EAAE,CAAC;QACtB,CAAC,CAAC;QAEQ,mBAAc,GAAG,CAAC,CAAgB,EAAQ,EAAE;YACpD,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAChB,OAAO;YACT,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,UAAU,EAAE,CAAC;gBAClB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;oBACxB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;YAC5B,CAAC;iBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;oBACxB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;YAC5B,CAAC;QACH,CAAC,CAAC;QAEQ,uBAAkB,GAAG,CAAC,CAAa,EAAQ,EAAE;YACrD,IAAI,CAAC,CAAC,SAAS,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,IAAI;gBACzC,OAAO;YACT,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;gBAClC,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;QACH,CAAC,CAAC;QAEQ,iBAAY,GAAG,GAAS,EAAE;YAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAChB,OAAO;YAET,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YAEvD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAA4B,OAAO,EAAE;gBACrE,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;gBACtB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;QACN,CAAC,CAAC;IAgLJ,CAAC;IAnSC,IAAc,UAAU;QACtB,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAc,UAAU,CAAC,IAAI,SAAS,CAAC;IAC9E,CAAC;IAWS,oBAAoB;QAC5B,IAAI,IAAI,CAAC,eAAe,KAAK,SAAS,EAAE,CAAC;YACvC,YAAY,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACnC,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACnC,CAAC;IACH,CAAC;IAoBS,0BAA0B;QAClC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,gBAAgB,KAAK,WAAW,EAAE,CAAC;gBAC7D,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;gBACpC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC/B,CAAC;QACH,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1B,CAAC;IAES,qBAAqB;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;YAC3B,IAAI,EAAE,EAAE,CAAC;gBACP,EAAE,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1C,CAAC;QACH,CAAC;IACH,CAAC;IAED,iHAAiH;IACvG,kBAAkB;QAC1B,IAAI,IAAI,CAAC,gBAAgB,KAAK,WAAW;YACvC,OAAO;QACT,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YAC5C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;YACnC,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC/B,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACvB,CAAC;IAAA,CAAC;IAkDF,4EAA4E;IAElE,UAAU;QAClB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;IAES,UAAU;QAClB,IAAI,GAAG,GAAG,IAAI,CAAC,UAAU,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;QACrD,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAC9B,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrE,IAAI,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;YAChC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;YACjB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;gBACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAA4B,QAAQ,EAAE;oBACtE,MAAM,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;oBACtB,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAC,CAAC;YACN,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;IAES,WAAW;QACnB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC;IAES,eAAe;QACvB,MAAM,cAAc,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QACpD,IAAI,cAAc,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,IAAI,CAAC,WAAW,KAAK,EAAE,EAAE,CAAC;YAChF,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,KAAK;YACb,OAAO,EAAE,CAAC;QACZ,IAAI,IAAI,CAAC,SAAS;YAChB,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,SAAS,KAAK,SAAS;YAC9B,OAAO,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAES,qBAAqB;QAC7B,IAAI,IAAI,CAAC,gBAAgB,KAAK,QAAQ;YACpC,OAAO,KAAK,CAAC;QACf,IAAI,IAAI,CAAC,gBAAgB,KAAK,UAAU;YACtC,OAAO,IAAI,CAAC;QACd,IAAI,IAAI,CAAC,gBAAgB,KAAK,MAAM,EAAE,CAAC;YACrC,IAAI,IAAI,CAAC,QAAQ;gBACf,OAAO,KAAK,CAAC;YACf,OAAO,IAAI,CAAC,sBAAsB,CAAC;QACrC,CAAC;QACD,IAAI,IAAI,CAAC,gBAAgB,KAAK,WAAW,EAAE,CAAC;YAC1C,IAAI,IAAI,CAAC,QAAQ;gBACf,OAAO,KAAK,CAAC;YACf,IAAI,IAAI,CAAC,sBAAsB;gBAC7B,OAAO,KAAK,CAAC;YACf,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAES,eAAe,CAAC,IAAY;QACpC,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;YACvB,KAAK,MAAM,CAAC,CAAC,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5C,KAAK,QAAQ,CAAC,CAAC,OAAO,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC7C,KAAK,SAAS,CAAC,CAAC,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC7C,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC;QACvB,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,KAAa;QACrC,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;YACvB,KAAK,MAAM,CAAC,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC9C,KAAK,QAAQ,CAAC,CAAC,OAAO,KAAK,KAAK,EAAE,IAAI,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtE,KAAK,SAAS,CAAC,CAAC,OAAO,KAAK,KAAK,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrE,OAAO,CAAC,CAAC,OAAO,IAAI,CAAC;QACvB,CAAC,CAAC,OAAO;IACX,CAAC;IAED,4EAA4E;aAE5D,WAAM,GAAgB,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmFzC,CAAC,AAnFoB,CAmFnB;;AAlU0B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA8B;AACJ;IAArD,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAA+B;AACvD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAY;AACI;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AACjD;IAAX,QAAQ,EAAE;kDAAkB;AAGY;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kDAAsB;AASf;IAA9C,QAAQ,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;uDAA+C;AAGtC;IAAtD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;kDAAkB;AAGd;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDAAuB;AAGhD;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gDAAwC;AAGvC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;gDAAuC;AAEnD;IAAlB,KAAK,EAAE;+CAA4B;AA/BzB,aAAa;IADzB,aAAa,CAAC,qBAAqB,CAAC;GACxB,aAAa,CAoUzB;;AAED,SAAS,UAAU,CAAC,EAAe;IACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACrC,KAAK,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC;IAC7B,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IAClC,GAAG,EAAE,eAAe,EAAE,CAAC;IACvB,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC"}

package/dist/editable-label/editable-number.d.ts

@@ -0,0 +1,96 @@
+/**
+ * <ixfx-editable-number> — inline editable number label with Ableton-style drag.
+ *
+ * Extends <ixfx-editable-label> with:
+ *   • Pointer drag to adjust value — drag up to increase, down to decrease,
+ *     without entering full text-edit mode.
+ *   • Click gives focus; pressing any key while focused enters text-edit mode.
+ *   • Optional min/max clamping and step snapping.
+ *   • Optional fill-bar visualization behind the label text.
+ *
+ * Attributes:
+ *   min               Minimum value (no clamping if unset)
+ *   max               Maximum value (no clamping if unset)
+ *   step              Snap increment, also informs decimal-place display (unset = no snapping)
+ *   drag-sensitivity  Steps changed per pixel of drag (default: 1); multiply by step to get units/px
+ *   precision         Decimal places applied when rounding drag-produced values (default: 0 = integers).
+ *                     Has no effect when step is set (step implies its own precision).
+ *                     Typed values are never precision-rounded — the user can always enter finer values.
+ *   fill-style        'linear' (default) or 'circular' — shape of the fill visualization
+ *   linear-style      'range' (default), 'bipolar', or 'unipolar' — how value maps to fill (linear mode only)
+ *   circular-style    'grow' (default), 'offset', or 'dot' — how value maps to fill (circular mode only)
+ *   no-drag           Boolean — disables drag interaction; text editing still works
+ *
+ * CSS variables:
+ *   --fill-color      Fill bar color (default: var(--accent))
+ *   --fill-opacity    Fill bar opacity as 0..1 (default: 0.25)
+ *   --value           Current normalized value (0..1)
+ *
+ * All CSS variables from <ixfx-editable-label> are also inherited.
+ *
+ * Events:
+ *   change — CustomEvent<{ value: string }>, bubbles + composed
+ *            Fired on text-edit commit AND on drag-end (if value changed).
+ */
+import type { CSSResult } from 'lit';
+import { EditableLabel } from './editable-label.js';
+export declare class EditableNumber extends EditableLabel {
+    #private;
+    min?: number;
+    max?: number;
+    step?: number;
+    dragSensitivity: number;
+    fillStyle?: `linear` | `circular`;
+    linearStyle?: `range` | `bipolar` | `unipolar`;
+    circularStyle?: `grow` | `offset` | `dot`;
+    noDrag: boolean;
+    precision: number;
+    constructor();
+    render(): import("lit").TemplateResult<1>;
+    private _stopNativeInput;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    /** Click just focuses; edit mode is entered by pressing a key while focused. */
+    protected _handleClick: () => void;
+    /** Suppress auto-edit-on-focus from editor mode; keydown handles it instead. */
+    protected _handleFocus: () => void;
+    /** Override to use .number instead of .content for text display */
+    protected get _contentEl(): HTMLElement | undefined;
+    firstUpdated(changedProperties: Map<string, unknown>): void;
+    protected _onUserInteraction(): void;
+    private _onValueChange;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _updateValueCss;
+    protected _getDisplayText(): string;
+    protected _tryCommit(): void;
+    protected _handleBeforeInput: (e: InputEvent) => void;
+    protected _handleKeydown: (e: KeyboardEvent) => void;
+    private _onKeyDown;
+    private _handleArrowKey;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _interceptClick;
+    private _parseValue;
+    /**
+     * Formats the stored value for display, inferring decimal places from the value
+     * string itself. This preserves typed precision (e.g. "0.1234" stays "0.1234")
+     * and also respects trailing zeros written by drag storage (e.g. "5.0" stays "5.0").
+     */
+    private _formatDisplay;
+    private _clamp;
+    private _snap;
+    private _inferDecimals;
+    private _formatNumber;
+    /** Returns a 0..1 fraction for the given value within [min, max]. */
+    private _normalizedValue;
+    static styles: CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-editable-number': EditableNumber;
+    }
+}
+//# sourceMappingURL=editable-number.d.ts.map

package/dist/editable-label/editable-number.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-number.d.ts","sourceRoot":"","sources":["../../src/editable-label/editable-number.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAMrC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,qBACa,cAAe,SAAQ,aAAa;;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACiB,eAAe,SAAK;IACxC,SAAS,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAC7C,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;IAClC,MAAM,UAAS;IACtC,SAAS,SAAK;;IAqBjC,MAAM;IAoBf,OAAO,CAAC,gBAAgB,CAEtB;IAIO,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAWrC,OAAO,CAAC,iBAAiB,CASvB;IAEF,OAAO,CAAC,iBAAiB,CAavB;IAIF,gFAAgF;IAChF,SAAS,CAAC,YAAY,QAAO,IAAI,CAI/B;IAEF,gFAAgF;IAChF,UAAmB,YAAY,QAAO,IAAI,CAAgC;IAE1E,mEAAmE;IACnE,SAAS,KAAK,UAAU,IAAI,WAAW,GAAG,SAAS,CAGlD;IAEQ,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAUpE,SAAS,CAAC,kBAAkB,IAAI,IAAI;IA0BpC,OAAO,CAAC,cAAc;IAab,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW/D,OAAO,CAAC,eAAe;cAyCJ,eAAe,IAAI,MAAM;cAuBzB,UAAU,IAAI,IAAI;IAarC,UAAmB,kBAAkB,GAAI,GAAG,UAAU,KAAG,IAAI,CA2B3D;IAEF,UAAmB,cAAc,GAAI,GAAG,aAAa,KAAG,IAAI,CA0B1D;IAIF,OAAO,CAAC,UAAU,CAehB;IAEF,OAAO,CAAC,eAAe;IAuEvB,OAAO,CAAC,cAAc,CAgBpB;IAEF,OAAO,CAAC,cAAc,CAyCpB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,OAAO,CAAC,eAAe,CAKrB;IAIF,OAAO,CAAC,WAAW;IAInB;;;;OAIG;IACH,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IAIrB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;IAUxB,OAAgB,MAAM,EAAE,SAAS,EAAE,CAgKjC;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,cAAc,CAAC;KACxC;CACF"}