@ixfx/components 0.2.6 → 0.3.0

package/dist/editable-label.d.ts

@@ -1,4 +1,4 @@
-import { CSSResult, LitElement } from "lit";
+import { CSSResult, LitElement, PropertyValues } from "lit";
 
 //#region src/editable-label/editable-label.d.ts
 type EditableMode = `label` | `editor`;
@@ -36,6 +36,8 @@ declare class EditableLabel extends LitElement {
   protected get _contentEl(): HTMLElement | undefined;
   /** Snapshot of value taken when editing begins; restored on cancel. */
   protected _prevValue: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   protected _hovering: boolean;
   protected _transientShowingValue: boolean;
   protected _transientTimer: number | undefined;
@@ -47,6 +49,7 @@ declare class EditableLabel extends LitElement {
   protected _requestDisplayUpdate(): void;
   /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */
   protected _onUserInteraction(): void;
+  protected _handleClick: () => void;
   protected _handleFocus: () => void;
   protected _handleBlur: () => void;
   protected _handleKeydown: (e: KeyboardEvent) => void;
@@ -59,6 +62,8 @@ declare class EditableLabel extends LitElement {
   protected _shouldUseDisplayText(): boolean;
   protected _isAllowedInput(char: string): boolean;
   private _defaultValidator;
+  render(): import("lit").TemplateResult<1>;
+  updated(changed: PropertyValues): void;
   static styles: CSSResult[];
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"editable-label.d.ts","names":[],"sources":["../src/editable-label/editable-label.ts"],"mappings":";;;KAmCY,YAAA;AAAA,KACA,SAAA;AAAA,KACA,gBAAA;AAAA,KAEA,yBAAA;EAAA,SACD,KAAK;AAAA;AAAA,KAEJ,wBAAA,GAA2B,WAAW,CAAC,yBAAA;AAAA,cAGtC,aAAA,SAAsB,UAAA;EACJ,IAAA,EAAM,YAAA;EACmB,SAAA,EAAW,SAAA;EACpC,KAAA;EACe,QAAA;EAChC,WAAA;EAHqD;EAMxB,WAAA;EAJG;;;;;;;EAaG,gBAAA,EAAkB,gBAAA;EASpB;EANU,WAAA;EASV;EANa,cAAA;EAU5C;EAPkB,SAAA,IAAa,KAAA;EAYnC;EATsB,SAAA,IAAa,KAAA;EAAA,UAE1B,QAAA;EAAA,cAEL,UAAA,CAAA,GAAc,WAAA;EAWlB;EAAA,UANA,UAAA;EAAA,UAGA,SAAA;EAAA,UACA,sBAAA;EAAA,UACA,eAAA;EAAA,UACA,sBAAA;EAAA,UAEA,oBAAA,CAAA;EAAA,QAOF,aAAA;EAAA,QAWA,aAAA;EAAA,UAOE,0BAAA,CAAA;EAAA,UAUA,qBAAA,CAAA;EAgCkB;EAAA,UAtBlB,kBAAA,CAAA;EAAA,UAWA,YAAA;EAAA,UAMA,WAAA;EAAA,UAKA,cAAA,GAAkB,CAAA,EAAG,aAAA;EAAA,UAgBrB,kBAAA,GAAsB,CAAA,EAAG,UAAA;EAAA,UAQzB,YAAA;EAAA,UAeA,UAAA,CAAA;EAAA,UAMA,UAAA,CAAA;EAAA,UAsBA,WAAA,CAAA;EAAA,UAMA,eAAA,CAAA;EAAA,UAcA,qBAAA,CAAA;EAAA,UAoBA,eAAA,CAAgB,IAAA;EAAA,QASlB,iBAAA;EAAA,OAWQ,MAAA,EAAQ,SAAA;AAAA;AAAA,QA8FlB,MAAA;EAAA,UACI,qBAAA;IACR,qBAAA,EAAuB,aAAa;EAAA;AAAA"}
+{"version":3,"file":"editable-label.d.ts","names":[],"sources":["../src/editable-label/editable-label.ts"],"mappings":";;;KAmCY,YAAA;AAAA,KACA,SAAA;AAAA,KACA,gBAAA;AAAA,KAEA,yBAAA;EAAA,SACD,KAAK;AAAA;AAAA,KAEJ,wBAAA,GAA2B,WAAW,CAAC,yBAAA;AAAA,cAGtC,aAAA,SAAsB,UAAA;EACJ,IAAA,EAAM,YAAA;EACmB,SAAA,EAAW,SAAA;EACpC,KAAA;EACe,QAAA;EAChC,WAAA;EAH0C;EAMb,WAAA;EALZ;;;;;;;EAckB,gBAAA,EAAkB,gBAAA;EASjC;EANuB,WAAA;EASvB;EAN0B,cAAA;EAQvC;EALa,SAAA,IAAa,KAAA;EAOjB;EAJI,SAAA,IAAa,KAAA;EAAA,UAE1B,QAAA;EAAA,cAEL,UAAA,CAAA,GAAc,WAAA;EAqBlB;EAAA,UAhBA,UAAA;EAED,iBAAA,CAAA;EAMA,oBAAA,CAAA;EAAA,UAQC,SAAA;EAAA,UACA,sBAAA;EAAA,UACA,eAAA;EAAA,UACA,sBAAA;EAAA,UAEA,oBAAA,CAAA;EAAA,QAOF,aAAA;EAAA,QAWA,aAAA;EAAA,UAOE,0BAAA,CAAA;EAAA,UAUA,qBAAA,CAAA;EAsCA;EAAA,UA5BA,kBAAA,CAAA;EAAA,UAWA,YAAA;EAAA,UAMA,YAAA;EAAA,UAMA,WAAA;EAAA,UAKA,cAAA,GAAkB,CAAA,EAAG,aAAA;EAAA,UAgBrB,kBAAA,GAAsB,CAAA,EAAG,UAAA;EAAA,UAQzB,YAAA;EAAA,UAeA,UAAA,CAAA;EAAA,UAMA,UAAA,CAAA;EAAA,UAsBA,WAAA,CAAA;EAAA,UAMA,eAAA,CAAA;EAAA,UAcA,qBAAA,CAAA;EAAA,UAoBA,eAAA,CAAgB,IAAA;EAAA,QASlB,iBAAA;EAWC,MAAA,CAAA,iBAAM,cAAA;EAgBN,OAAA,CAAQ,OAAA,EAAS,cAAA;EAAA,OAcV,MAAA,EAAQ,SAAA;AAAA;AAAA,QA8FlB,MAAA;EAAA,UACI,qBAAA;IACR,qBAAA,EAAuB,aAAa;EAAA;AAAA"}

package/dist/editable-label.js

@@ -1,5 +1,5 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
-import { LitElement, css } from "lit";
+import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
+import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/editable-label/editable-label.ts
 let EditableLabel = class EditableLabel extends LitElement {
@@ -33,6 +33,9 @@ let EditableLabel = class EditableLabel extends LitElement {
 			this._hovering = false;
 			this._startTransientRevertTimer();
 		};
+		this._handleClick = () => {
+			if (this.mode === `label` && !this.disabled && !this._editing) this._beginEdit();
+		};
 		this._handleFocus = () => {
 			if (this.mode === `editor` && !this.disabled && !this._editing) this._beginEdit();
 		};
@@ -68,6 +71,17 @@ let EditableLabel = class EditableLabel extends LitElement {
 	get _contentEl() {
 		return this.renderRoot?.querySelector(`.content`) ?? void 0;
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+		this._clearTransientTimer();
+	}
 	_clearTransientTimer() {
 		if (this._transientTimer !== void 0) {
 			clearTimeout(this._transientTimer);
@@ -161,6 +175,32 @@ let EditableLabel = class EditableLabel extends LitElement {
 			default: return true;
 		}
 	}
+	render() {
+		const isEditor = this.mode === `editor`;
+		return html`<div
+      class="content"
+      contenteditable=${this._editing ? `plaintext-only` : `false`}
+      data-placeholder=${this.placeholder}
+      tabindex=${isEditor && !this._editing ? `0` : nothing}
+      @click=${this._handleClick}
+      @focus=${this._handleFocus}
+      @blur=${this._handleBlur}
+      @keydown=${this._handleKeydown}
+      @beforeinput=${this._handleBeforeInput}
+      @input=${this._handleInput}
+    >${this._editing ? nothing : this._getDisplayText()}</div>`;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`_editing`) && this._editing) {
+			const el = this._contentEl;
+			if (el) {
+				el.textContent = this.value;
+				el.focus();
+				_selectAll(el);
+			}
+		}
+	}
 	static {
 		this.styles = [css`
     :host {
@@ -273,6 +313,13 @@ __decorate([property({ attribute: false })], EditableLabel.prototype, "validator
 __decorate([property({ attribute: false })], EditableLabel.prototype, "formatter", void 0);
 __decorate([state()], EditableLabel.prototype, "_editing", void 0);
 EditableLabel = __decorate([safeCustomElement(`ixfx-editable-label`)], EditableLabel);
+function _selectAll(el) {
+	const range = document.createRange();
+	range.selectNodeContents(el);
+	const sel = window.getSelection();
+	sel?.removeAllRanges();
+	sel?.addRange(range);
+}
 //#endregion
 export { EditableLabel };
 

package/dist/editable-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"editable-label.js","names":["customElement"],"sources":["../src/editable-label/editable-label.ts"],"sourcesContent":["/**\n * <ixfx-editable-label> — inline editable text label.\n *\n * Two display modes:\n *   label  (default) — renders as plain text until clicked, then becomes an editable box.\n *   editor           — always renders as an editable box; becomes active on focus/click.\n *\n * Entry modes (filter characters as typed):\n *   free    (default) — no restrictions\n *   text              — alphabetical characters and spaces only\n *   number            — digits, decimal point, minus sign\n *   percent           — digits, decimal point, percent sign\n *\n * Properties (not attributes):\n *   validator  (value: string) => boolean   — override commit validation; default uses entry-mode rules\n *   formatter  (value: string) => string    — transform committed value for display\n *\n * Events:\n *   input  — CustomEvent<{ value: string }>, bubbles + composed; fired as value changes during editing\n *   change — CustomEvent<{ value: string }>, bubbles + composed; fired when value is committed\n *\n * CSS variables:\n *   --label-font-size    defaults to var(--text-m, 12px)\n *   --label-font-family  defaults to var(--font-family, system-ui, sans-serif)\n *   --label-color        defaults to var(--surface-2-text)\n *   --label-muted-color  placeholder colour, defaults to var(--surface-muted-text)\n *   --label-padding      defaults to var(--space-xs, 3px) var(--space-s, 4px)\n *   --label-radius       defaults to var(--radius-s, 3px)\n *   --label-align        text alignment: left | center (default) | right\n */\nimport type { CSSResult } from 'lit';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type EditableMode = `label` | `editor`;\nexport type EntryMode = `free` | `text` | `number` | `percent`;\nexport type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;\n\nexport type EditableLabelChangeDetail = {\n  readonly value: string;\n};\nexport type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;\n\n@customElement(`ixfx-editable-label`)\nexport class EditableLabel extends LitElement {\n  @property({ reflect: true }) mode: EditableMode = `label`;\n  @property({ attribute: `entry-mode`, reflect: true }) entryMode: EntryMode = `free`;\n  @property({ reflect: true }) value = ``;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property() placeholder = ``;\n\n  /** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */\n  @property({ attribute: `display-text` }) displayText?: string;\n\n  /**\n   * Controls when displayText is shown:\n   *  - 'hidden' (default): never use displayText\n   *  - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay\n   *  - 'override': always show displayText, even when editing\n   *  - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay\n   */\n  @property({ attribute: `display-text-logic` }) displayTextLogic: DisplayTextLogic = `hidden`;\n\n  /** Delay before showing value in transient mode (ms). Default: 50 */\n  @property({ type: Number, attribute: `appear-delay` }) appearDelay = 50;\n\n  /** Delay before reverting to displayText after editing ends (ms). Default: 1000 */\n  @property({ type: Number, attribute: `disappear-delay` }) disappearDelay = 1000;\n\n  /** Override commit validation. Return true to accept, false to reject (reverts). */\n  @property({ attribute: false }) validator?: (value: string) => boolean;\n\n  /** Transform the committed value for display. Does not affect the stored value. */\n  @property({ attribute: false }) formatter?: (value: string) => string;\n\n  @state() protected _editing = false;\n\n  protected get _contentEl(): HTMLElement | undefined {\n    return this.renderRoot?.querySelector<HTMLElement>(`.content`) ?? undefined;\n  }\n\n  /** Snapshot of value taken when editing begins; restored on cancel. */\n  protected _prevValue = ``;\n\n  // ── Transient display state ─────────────────────────────────────────────────\n  protected _hovering = false;\n  protected _transientShowingValue = false;\n  protected _transientTimer: number | undefined = undefined;\n  protected _showModeWaitingToHide = false;\n\n  protected _clearTransientTimer(): void {\n    if (this._transientTimer !== undefined) {\n      clearTimeout(this._transientTimer);\n      this._transientTimer = undefined;\n    }\n  }\n\n  private _onMouseEnter = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = true;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  private _onMouseLeave = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = false;\n    this._startTransientRevertTimer();\n  };\n\n  protected _startTransientRevertTimer(): void {\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      if (!this._hovering && this.displayTextLogic === `transient`) {\n        this._transientShowingValue = false;\n        this._requestDisplayUpdate();\n      }\n    }, this.disappearDelay);\n  }\n\n  protected _requestDisplayUpdate(): void {\n    if (!this._editing) {\n      const el = this._contentEl;\n      if (el) {\n        el.textContent = this._getDisplayText();\n      }\n    }\n  }\n\n  /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */\n  protected _onUserInteraction(): void {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._startTransientRevertTimer();\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  protected _handleFocus = (): void => {\n    if (this.mode === `editor` && !this.disabled && !this._editing) {\n      this._beginEdit();\n    }\n  };\n\n  protected _handleBlur = (): void => {\n    if (this._editing)\n      this._tryCommit();\n  };\n\n  protected _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._editing)\n      return;\n    if (e.key === `Enter`) {\n      e.preventDefault();\n      this._tryCommit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    } else if (e.key === `Escape`) {\n      e.preventDefault();\n      this._cancelEdit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    }\n  };\n\n  protected _handleBeforeInput = (e: InputEvent): void => {\n    if (e.inputType !== `insertText` || !e.data)\n      return;\n    if (!this._isAllowedInput(e.data)) {\n      e.preventDefault();\n    }\n  };\n\n  protected _handleInput = (): void => {\n    if (!this._editing)\n      return;\n\n    const raw = this._contentEl?.textContent?.trim() ?? ``;\n\n    this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`input`, {\n      detail: { value: raw },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  // ── Core logic ───────────────────────────────────────────────────────────\n\n  protected _beginEdit(): void {\n    this._prevValue = this.value;\n    this._editing = true;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _tryCommit(): void {\n    let raw = this._contentEl?.textContent?.trim() ?? ``;\n    if (this.entryMode === `percent`)\n      raw = raw.replaceAll(`%`, ``).trim();\n    const validate = this.validator ?? this._defaultValidator.bind(this);\n    if (validate(raw)) {\n      this.removeAttribute(`invalid`);\n      const prev = this.value;\n      this.value = raw;\n      this._editing = false;\n      if (raw !== prev) {\n        this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n          detail: { value: raw },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    } else {\n      this._cancelEdit();\n    }\n  }\n\n  protected _cancelEdit(): void {\n    this.value = this._prevValue;\n    this._editing = false;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _getDisplayText(): string {\n    const useDisplayText = this._shouldUseDisplayText();\n    if (useDisplayText && this.displayText !== undefined && this.displayText !== ``) {\n      return this.displayText;\n    }\n    if (!this.value)\n      return ``;\n    if (this.formatter)\n      return this.formatter(this.value);\n    if (this.entryMode === `percent`)\n      return `${this.value}%`;\n    return this.value;\n  }\n\n  protected _shouldUseDisplayText(): boolean {\n    if (this.displayTextLogic === `hidden`)\n      return false;\n    if (this.displayTextLogic === `override`)\n      return true;\n    if (this.displayTextLogic === `show`) {\n      if (this._editing)\n        return false;\n      return this._showModeWaitingToHide;\n    }\n    if (this.displayTextLogic === `transient`) {\n      if (this._editing)\n        return false;\n      if (this._transientShowingValue)\n        return false;\n      return true;\n    }\n    return false;\n  }\n\n  protected _isAllowedInput(char: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]$/i.test(char);\n      case `number`: return /^[\\d.\\-]$/.test(char);\n      case `percent`: return /^[\\d.%]$/.test(char);\n      default: return true;\n    }\n  }\n\n  private _defaultValidator(value: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]*$/i.test(value);\n      case `number`: return value === `` || /^-?\\d*(?:\\.\\d*)?$/.test(value);\n      case `percent`: return value === `` || /^\\d*(?:\\.\\d*)?$/.test(value);\n      default: return true;\n    } // asdf\n  }\n\n  // ── Styles ───────────────────────────────────────────────────────────────\n\n  static override styles: CSSResult[] = [css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n\n      --_font-size:   var(--label-font-size,   var(--text-m,        12px));\n      --_font-family: var(--label-font-family, var(--font-family,   system-ui, sans-serif));\n      --_color:       var(--label-color,       var(--surface-2-text));\n      --_muted:       var(--label-muted-color, var(--surface-muted-text, oklch(55% 0.02 240)));\n      --_padding:     var(--label-padding,     var(--space-xs, 3px) var(--space-s, 4px));\n      --_radius:      var(--label-radius,      var(--radius-s, 3px));\n      --_align:       var(--label-align,       center);\n      --_min-width:   var(--label-min-width,   1ch);\n    }\n\n    .content {\n      box-sizing: border-box;\n      width: 100%;\n      text-align: var(--_align);\n      outline: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: var(--_min-width);\n      font-family: var(--_font-family);\n      font-size: var(--_font-size);\n      color: var(--_color);\n      padding: var(--_padding);\n      border: 1px solid transparent;\n      border-radius: var(--_radius);\n      cursor: pointer;\n      transition:\n        background var(--transition, 0.15s ease-out),\n        border-color var(--transition, 0.15s ease-out);\n    }\n\n    /* Remove overflow clipping while editing so the cursor is never hidden */\n    .content[contenteditable=\"plaintext-only\"] {\n      overflow: visible;\n      text-overflow: clip;\n    }\n\n    /* ── Label mode ── */\n    :host([mode=\"label\"]) .content {\n      background: transparent;\n    }\n\n    :host([mode=\"label\"]) .content[contenteditable=\"plaintext-only\"] {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n      cursor: text;\n    }\n\n    /* ── Editor mode — always shows box ── */\n    :host([mode=\"editor\"]) .content {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n    }\n\n    :host([mode=\"editor\"]) .content[contenteditable=\"plaintext-only\"] {\n      border-color: var(--accent, oklch(60% 0.15 140));\n      cursor: text;\n    }\n\n    /* ── Placeholder ── */\n    .content:empty::before {\n      content: attr(data-placeholder);\n      color: var(--_muted);\n      pointer-events: none;\n    }\n\n    /* ── Invalid ── */\n    :host([invalid]) .content {\n      border-color: var(--error, oklch(60% 0.15 20));\n    }\n\n    /* ── Disabled ── */\n    :host([disabled]) .content {\n      opacity: var(--disabled-opacity, 0.5);\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `];\n}\n\nfunction _selectAll(el: HTMLElement): void {\n  const range = document.createRange();\n  range.selectNodeContents(el);\n  const sel = window.getSelection();\n  sel?.removeAllRanges();\n  sel?.addRange(range);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-editable-label': EditableLabel;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"editable-label.js","names":["customElement"],"sources":["../src/editable-label/editable-label.ts"],"sourcesContent":["/**\n * <ixfx-editable-label> — inline editable text label.\n *\n * Two display modes:\n *   label  (default) — renders as plain text until clicked, then becomes an editable box.\n *   editor           — always renders as an editable box; becomes active on focus/click.\n *\n * Entry modes (filter characters as typed):\n *   free    (default) — no restrictions\n *   text              — alphabetical characters and spaces only\n *   number            — digits, decimal point, minus sign\n *   percent           — digits, decimal point, percent sign\n *\n * Properties (not attributes):\n *   validator  (value: string) => boolean   — override commit validation; default uses entry-mode rules\n *   formatter  (value: string) => string    — transform committed value for display\n *\n * Events:\n *   input  — CustomEvent<{ value: string }>, bubbles + composed; fired as value changes during editing\n *   change — CustomEvent<{ value: string }>, bubbles + composed; fired when value is committed\n *\n * CSS variables:\n *   --label-font-size    defaults to var(--text-m, 12px)\n *   --label-font-family  defaults to var(--font-family, system-ui, sans-serif)\n *   --label-color        defaults to var(--surface-2-text)\n *   --label-muted-color  placeholder colour, defaults to var(--surface-muted-text)\n *   --label-padding      defaults to var(--space-xs, 3px) var(--space-s, 4px)\n *   --label-radius       defaults to var(--radius-s, 3px)\n *   --label-align        text alignment: left | center (default) | right\n */\nimport type { CSSResult, PropertyValues } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { safeCustomElement as customElement } from '../util/custom-elements.js';\n\nexport type EditableMode = `label` | `editor`;\nexport type EntryMode = `free` | `text` | `number` | `percent`;\nexport type DisplayTextLogic = `hidden` | `show` | `override` | `transient`;\n\nexport type EditableLabelChangeDetail = {\n  readonly value: string;\n};\nexport type EditableLabelChangeEvent = CustomEvent<EditableLabelChangeDetail>;\n\n@customElement(`ixfx-editable-label`)\nexport class EditableLabel extends LitElement {\n  @property({ reflect: true }) mode: EditableMode = `label`;\n  @property({ attribute: `entry-mode`, reflect: true }) entryMode: EntryMode = `free`;\n  @property({ reflect: true }) value = ``;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n  @property() placeholder = ``;\n\n  /** Override displayed text. Bypasses formatter and value. When editing, shows raw value. */\n  @property({ attribute: `display-text` }) displayText?: string;\n\n  /**\n   * Controls when displayText is shown:\n   *  - 'hidden' (default): never use displayText\n   *  - 'show': show displayText instead of formatted value, but hide while editing; revert after disappearDelay\n   *  - 'override': always show displayText, even when editing\n   *  - 'transient': show displayText by default, switch to formatted value after appearDelay on hover/interaction; revert after disappearDelay\n   */\n  @property({ attribute: `display-text-logic` }) displayTextLogic: DisplayTextLogic = `hidden`;\n\n  /** Delay before showing value in transient mode (ms). Default: 50 */\n  @property({ type: Number, attribute: `appear-delay` }) appearDelay = 50;\n\n  /** Delay before reverting to displayText after editing ends (ms). Default: 1000 */\n  @property({ type: Number, attribute: `disappear-delay` }) disappearDelay = 1000;\n\n  /** Override commit validation. Return true to accept, false to reject (reverts). */\n  @property({ attribute: false }) validator?: (value: string) => boolean;\n\n  /** Transform the committed value for display. Does not affect the stored value. */\n  @property({ attribute: false }) formatter?: (value: string) => string;\n\n  @state() protected _editing = false;\n\n  protected get _contentEl(): HTMLElement | undefined {\n    return this.renderRoot?.querySelector<HTMLElement>(`.content`) ?? undefined;\n  }\n\n  /** Snapshot of value taken when editing begins; restored on cancel. */\n  protected _prevValue = ``;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(`mouseenter`, this._onMouseEnter);\n    this.addEventListener(`mouseleave`, this._onMouseLeave);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(`mouseenter`, this._onMouseEnter);\n    this.removeEventListener(`mouseleave`, this._onMouseLeave);\n    this._clearTransientTimer();\n  }\n\n  // ── Transient display state ─────────────────────────────────────────────────\n  protected _hovering = false;\n  protected _transientShowingValue = false;\n  protected _transientTimer: number | undefined = undefined;\n  protected _showModeWaitingToHide = false;\n\n  protected _clearTransientTimer(): void {\n    if (this._transientTimer !== undefined) {\n      clearTimeout(this._transientTimer);\n      this._transientTimer = undefined;\n    }\n  }\n\n  private _onMouseEnter = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = true;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  private _onMouseLeave = (): void => {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._hovering = false;\n    this._startTransientRevertTimer();\n  };\n\n  protected _startTransientRevertTimer(): void {\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      if (!this._hovering && this.displayTextLogic === `transient`) {\n        this._transientShowingValue = false;\n        this._requestDisplayUpdate();\n      }\n    }, this.disappearDelay);\n  }\n\n  protected _requestDisplayUpdate(): void {\n    if (!this._editing) {\n      const el = this._contentEl;\n      if (el) {\n        el.textContent = this._getDisplayText();\n      }\n    }\n  }\n\n  /** Called by subclasses when user interacts (drag, keyboard, etc) to temporarily show value in transient mode */\n  protected _onUserInteraction(): void {\n    if (this.displayTextLogic !== `transient`)\n      return;\n    this._clearTransientTimer();\n    this._transientTimer = window.setTimeout(() => {\n      this._transientShowingValue = true;\n      this._startTransientRevertTimer();\n      this._requestDisplayUpdate();\n    }, this.appearDelay);\n  };\n\n  protected _handleClick = (): void => {\n    if (this.mode === `label` && !this.disabled && !this._editing) {\n      this._beginEdit();\n    }\n  };\n\n  protected _handleFocus = (): void => {\n    if (this.mode === `editor` && !this.disabled && !this._editing) {\n      this._beginEdit();\n    }\n  };\n\n  protected _handleBlur = (): void => {\n    if (this._editing)\n      this._tryCommit();\n  };\n\n  protected _handleKeydown = (e: KeyboardEvent): void => {\n    if (!this._editing)\n      return;\n    if (e.key === `Enter`) {\n      e.preventDefault();\n      this._tryCommit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    } else if (e.key === `Escape`) {\n      e.preventDefault();\n      this._cancelEdit();\n      if (this.mode === `editor`)\n        this._contentEl?.blur();\n    }\n  };\n\n  protected _handleBeforeInput = (e: InputEvent): void => {\n    if (e.inputType !== `insertText` || !e.data)\n      return;\n    if (!this._isAllowedInput(e.data)) {\n      e.preventDefault();\n    }\n  };\n\n  protected _handleInput = (): void => {\n    if (!this._editing)\n      return;\n\n    const raw = this._contentEl?.textContent?.trim() ?? ``;\n\n    this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`input`, {\n      detail: { value: raw },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  // ── Core logic ───────────────────────────────────────────────────────────\n\n  protected _beginEdit(): void {\n    this._prevValue = this.value;\n    this._editing = true;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _tryCommit(): void {\n    let raw = this._contentEl?.textContent?.trim() ?? ``;\n    if (this.entryMode === `percent`)\n      raw = raw.replaceAll(`%`, ``).trim();\n    const validate = this.validator ?? this._defaultValidator.bind(this);\n    if (validate(raw)) {\n      this.removeAttribute(`invalid`);\n      const prev = this.value;\n      this.value = raw;\n      this._editing = false;\n      if (raw !== prev) {\n        this.dispatchEvent(new CustomEvent<EditableLabelChangeDetail>(`change`, {\n          detail: { value: raw },\n          bubbles: true,\n          composed: true,\n        }));\n      }\n    } else {\n      this._cancelEdit();\n    }\n  }\n\n  protected _cancelEdit(): void {\n    this.value = this._prevValue;\n    this._editing = false;\n    this.removeAttribute(`invalid`);\n  }\n\n  protected _getDisplayText(): string {\n    const useDisplayText = this._shouldUseDisplayText();\n    if (useDisplayText && this.displayText !== undefined && this.displayText !== ``) {\n      return this.displayText;\n    }\n    if (!this.value)\n      return ``;\n    if (this.formatter)\n      return this.formatter(this.value);\n    if (this.entryMode === `percent`)\n      return `${this.value}%`;\n    return this.value;\n  }\n\n  protected _shouldUseDisplayText(): boolean {\n    if (this.displayTextLogic === `hidden`)\n      return false;\n    if (this.displayTextLogic === `override`)\n      return true;\n    if (this.displayTextLogic === `show`) {\n      if (this._editing)\n        return false;\n      return this._showModeWaitingToHide;\n    }\n    if (this.displayTextLogic === `transient`) {\n      if (this._editing)\n        return false;\n      if (this._transientShowingValue)\n        return false;\n      return true;\n    }\n    return false;\n  }\n\n  protected _isAllowedInput(char: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]$/i.test(char);\n      case `number`: return /^[\\d.\\-]$/.test(char);\n      case `percent`: return /^[\\d.%]$/.test(char);\n      default: return true;\n    }\n  }\n\n  private _defaultValidator(value: string): boolean {\n    switch (this.entryMode) {\n      case `text`: return /^[a-z\\s]*$/i.test(value);\n      case `number`: return value === `` || /^-?\\d*(?:\\.\\d*)?$/.test(value);\n      case `percent`: return value === `` || /^\\d*(?:\\.\\d*)?$/.test(value);\n      default: return true;\n    } // asdf\n  }\n\n  // ── Render ───────────────────────────────────────────────────────────────\n\n  override render() {\n    const isEditor = this.mode === `editor`;\n    return html`<div\n      class=\"content\"\n      contenteditable=${this._editing ? `plaintext-only` : `false`}\n      data-placeholder=${this.placeholder}\n      tabindex=${isEditor && !this._editing ? `0` : nothing}\n      @click=${this._handleClick}\n      @focus=${this._handleFocus}\n      @blur=${this._handleBlur}\n      @keydown=${this._handleKeydown}\n      @beforeinput=${this._handleBeforeInput}\n      @input=${this._handleInput}\n    >${this._editing ? nothing : this._getDisplayText()}</div>`;\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    if (changed.has(`_editing`) && this._editing) {\n      const el = this._contentEl;\n      if (el) {\n        el.textContent = this.value;\n        el.focus();\n        _selectAll(el);\n      }\n    }\n  }\n\n  // ── Styles ───────────────────────────────────────────────────────────────\n\n  static override styles: CSSResult[] = [css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n\n      --_font-size:   var(--label-font-size,   var(--text-m,        12px));\n      --_font-family: var(--label-font-family, var(--font-family,   system-ui, sans-serif));\n      --_color:       var(--label-color,       var(--surface-2-text));\n      --_muted:       var(--label-muted-color, var(--surface-muted-text, oklch(55% 0.02 240)));\n      --_padding:     var(--label-padding,     var(--space-xs, 3px) var(--space-s, 4px));\n      --_radius:      var(--label-radius,      var(--radius-s, 3px));\n      --_align:       var(--label-align,       center);\n      --_min-width:   var(--label-min-width,   1ch);\n    }\n\n    .content {\n      box-sizing: border-box;\n      width: 100%;\n      text-align: var(--_align);\n      outline: none;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: var(--_min-width);\n      font-family: var(--_font-family);\n      font-size: var(--_font-size);\n      color: var(--_color);\n      padding: var(--_padding);\n      border: 1px solid transparent;\n      border-radius: var(--_radius);\n      cursor: pointer;\n      transition:\n        background var(--transition, 0.15s ease-out),\n        border-color var(--transition, 0.15s ease-out);\n    }\n\n    /* Remove overflow clipping while editing so the cursor is never hidden */\n    .content[contenteditable=\"plaintext-only\"] {\n      overflow: visible;\n      text-overflow: clip;\n    }\n\n    /* ── Label mode ── */\n    :host([mode=\"label\"]) .content {\n      background: transparent;\n    }\n\n    :host([mode=\"label\"]) .content[contenteditable=\"plaintext-only\"] {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n      cursor: text;\n    }\n\n    /* ── Editor mode — always shows box ── */\n    :host([mode=\"editor\"]) .content {\n      background: var(--surface-4, oklch(22% 0.02 240));\n      border: var(--border, 1px solid oklch(25% 0.02 240));\n    }\n\n    :host([mode=\"editor\"]) .content[contenteditable=\"plaintext-only\"] {\n      border-color: var(--accent, oklch(60% 0.15 140));\n      cursor: text;\n    }\n\n    /* ── Placeholder ── */\n    .content:empty::before {\n      content: attr(data-placeholder);\n      color: var(--_muted);\n      pointer-events: none;\n    }\n\n    /* ── Invalid ── */\n    :host([invalid]) .content {\n      border-color: var(--error, oklch(60% 0.15 20));\n    }\n\n    /* ── Disabled ── */\n    :host([disabled]) .content {\n      opacity: var(--disabled-opacity, 0.5);\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `];\n}\n\nfunction _selectAll(el: HTMLElement): void {\n  const range = document.createRange();\n  range.selectNodeContents(el);\n  const sel = window.getSelection();\n  sel?.removeAllRanges();\n  sel?.addRange(range);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ixfx-editable-label': EditableLabel;\n  }\n}\n"],"mappings":"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"}

package/dist/{hex-editor-gH3mteMr.js → hex-editor-CsN_ySkH.js}

@@ -1,9 +1,9 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
-import { t as colour_exports } from "./colour-C3MQIjFJ-BJV-QC-3.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
+import { t as colour_exports } from "./colour-C3MQIjFJ-BLXg8W3U.js";
 import { LitElement, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { repeat } from "lit/directives/repeat.js";
+import { styleMap } from "lit/directives/style-map.js";
 //#region src/hex/colour.ts
 const WHITESPACE_BYTES = new Set([
 	9,
@@ -13,45 +13,45 @@ const WHITESPACE_BYTES = new Set([
 	13,
 	32
 ]);
-const isControlByte = (byte) => {
+function isControlByte(byte) {
 	return byte < 32 && byte !== 9 && byte !== 10 && byte !== 11 && byte !== 12 && byte !== 13;
-};
-const isPrintableAscii = (byte) => {
+}
+function isPrintableAscii(byte) {
 	return byte >= 32 && byte <= 126;
-};
-const getAsciiClass = (byte) => {
-	if (byte === 0) return "byte-null";
-	if (WHITESPACE_BYTES.has(byte)) return "byte-whitespace";
-	if (isControlByte(byte)) return "byte-control";
-	if (isPrintableAscii(byte)) return "byte-printable";
-	return "byte-other";
-};
-const createShadeMap = (nullColour, maxColour, stepStart, stepEnd) => {
+}
+function getAsciiClass(byte) {
+	if (byte === 0) return `byte-null`;
+	if (WHITESPACE_BYTES.has(byte)) return `byte-whitespace`;
+	if (isControlByte(byte)) return `byte-control`;
+	if (isPrintableAscii(byte)) return `byte-printable`;
+	return `byte-other`;
+}
+function createShadeMap(nullColour, maxColour, stepStart, stepEnd) {
 	const cssSteps = colour_exports.createSteps(stepStart, stepEnd, { steps: 16 }).map(colour_exports.toCssColour);
 	return { forByte: (byte) => {
 		if (byte === 0) return nullColour;
 		if (byte === 255) return maxColour;
 		return cssSteps[byte >> 4];
 	} };
-};
+}
 //#endregion
 //#region src/hex/data.ts
-const createHexStore = (data) => {
+function createHexStore(data) {
 	return {
 		data: new Uint8Array(data),
 		changeset: /* @__PURE__ */ new Set()
 	};
-};
-const readByte = (store, pos) => {
+}
+function readByte(store, pos) {
 	return store.data[pos] ?? 0;
-};
-const length = (store) => {
+}
+function length(store) {
 	return store.data.length;
-};
-const clamp = (value) => {
+}
+function clamp(value) {
 	return Math.max(0, Math.min(255, value));
-};
-const writeByte = (store, pos, value) => {
+}
+function writeByte(store, pos, value) {
 	const clampedValue = clamp(value);
 	const before = store.data[pos];
 	const diff = new Map([[pos, {
@@ -61,8 +61,8 @@ const writeByte = (store, pos, value) => {
 	store.data[pos] = clampedValue;
 	store.changeset.add(pos);
 	return diff;
-};
-const writeBytes = (store, entries) => {
+}
+function writeBytes(store, entries) {
 	const diff = /* @__PURE__ */ new Map();
 	entries.forEach((value, pos) => {
 		const clampedValue = clamp(value);
@@ -75,8 +75,8 @@ const writeBytes = (store, entries) => {
 		store.changeset.add(pos);
 	});
 	return diff;
-};
-const applyDiff = (store, diff) => {
+}
+function applyDiff(store, diff) {
 	const reverse = /* @__PURE__ */ new Map();
 	diff.forEach((entry, pos) => {
 		const before = store.data[pos];
@@ -88,8 +88,8 @@ const applyDiff = (store, diff) => {
 		store.changeset.add(pos);
 	});
 	return reverse;
-};
-const reverseDiff = (diff) => {
+}
+function reverseDiff(diff) {
 	const reversed = /* @__PURE__ */ new Map();
 	diff.forEach((entry, pos) => {
 		reversed.set(pos, {
@@ -98,52 +98,52 @@ const reverseDiff = (diff) => {
 		});
 	});
 	return reversed;
-};
-const getChangeset = (store) => {
+}
+function getChangeset(store) {
 	return store.changeset;
-};
+}
 //#endregion
 //#region src/hex/diff.ts
-const createUndoRedoStack = () => {
+function createUndoRedoStack() {
 	return {
 		undos: [],
 		redos: []
 	};
-};
-const push = (stack, diff) => {
+}
+function push(stack, diff) {
 	stack.undos.push(diff);
 	stack.redos = [];
-};
-const undo = (stack) => {
+}
+function undo(stack) {
 	const diff = stack.undos.pop();
 	if (diff) stack.redos.push(diff);
 	return diff;
-};
-const redo = (stack) => {
+}
+function redo(stack) {
 	const diff = stack.redos.pop();
 	if (diff) stack.undos.push(diff);
 	return diff;
-};
+}
 //#endregion
 //#region src/hex/selection.ts
 const bytesPerRow = (columns) => columns * 4;
 const min = (a, b) => a < b ? a : b;
 const max = (a, b) => a > b ? a : b;
-const clampPos = (pos, dataLength) => {
+function clampPos(pos, dataLength) {
 	return Math.max(0, Math.min(pos, dataLength - 1));
-};
-const getSelectedPositions = (sel, columns) => {
+}
+function getSelectedPositions(sel, columns) {
 	if (!sel) return [];
 	const bpr = bytesPerRow(columns);
-	if (sel.kind === "single") return [sel.pos];
-	if (sel.kind === "contiguous") {
+	if (sel.kind === `single`) return [sel.pos];
+	if (sel.kind === `contiguous`) {
 		const start = min(sel.start, sel.end);
 		const end = max(sel.start, sel.end);
 		const positions = [];
 		for (let i = start; i <= end; i++) positions.push(i);
 		return positions;
 	}
-	if (sel.kind === "rectangular") {
+	if (sel.kind === `rectangular`) {
 		const positions = [];
 		for (let row = 0; row < sel.height; row++) for (let col = 0; col < sel.width; col++) {
 			const y = sel.y + row;
@@ -154,17 +154,17 @@ const getSelectedPositions = (sel, columns) => {
 		return positions;
 	}
 	return [];
-};
-const selectionContains = (sel, pos, columns) => {
+}
+function selectionContains(sel, pos, columns) {
 	if (!sel) return false;
 	const bpr = bytesPerRow(columns);
-	if (sel.kind === "single") return pos === sel.pos;
-	if (sel.kind === "contiguous") {
+	if (sel.kind === `single`) return pos === sel.pos;
+	if (sel.kind === `contiguous`) {
 		const start = min(sel.start, sel.end);
 		const end = max(sel.start, sel.end);
 		return pos >= start && pos <= end;
 	}
-	if (sel.kind === "rectangular") {
+	if (sel.kind === `rectangular`) {
 		const row = Math.floor(pos / bpr);
 		const col = pos % bpr;
 		const x = sel.x;
@@ -174,59 +174,59 @@ const selectionContains = (sel, pos, columns) => {
 		return row >= y && row < y + height && col >= x && col < x + width;
 	}
 	return false;
-};
-const getCursorPos = (sel, dir, columns, dataLength) => {
+}
+function getCursorPos(sel, dir, columns, dataLength) {
 	let currentPos;
 	if (!sel) currentPos = 0;
-	else if (sel.kind === "single") currentPos = sel.pos;
-	else if (sel.kind === "contiguous") currentPos = max(sel.start, sel.end);
-	else if (sel.kind === "rectangular") currentPos = sel.y * bytesPerRow(columns) + sel.x + sel.width - 1;
+	else if (sel.kind === `single`) currentPos = sel.pos;
+	else if (sel.kind === `contiguous`) currentPos = max(sel.start, sel.end);
+	else if (sel.kind === `rectangular`) currentPos = sel.y * bytesPerRow(columns) + sel.x + sel.width - 1;
 	else currentPos = 0;
 	const bpr = bytesPerRow(columns);
 	let newPos;
 	switch (dir) {
-		case "left":
+		case `left`:
 			newPos = currentPos - 1;
 			break;
-		case "right":
+		case `right`:
 			newPos = currentPos + 1;
 			break;
-		case "up":
+		case `up`:
 			newPos = currentPos - bpr;
 			break;
-		case "down":
+		case `down`:
 			newPos = currentPos + bpr;
 			break;
 		default: newPos = currentPos;
 	}
 	return clampPos(newPos, dataLength);
-};
-const moveSelection = (sel, dir, columns, dataLength) => {
+}
+function moveSelection(sel, dir, columns, dataLength) {
 	return {
-		kind: "single",
+		kind: `single`,
 		pos: getCursorPos(sel, dir, columns, dataLength)
 	};
-};
-const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY = 0) => {
+}
+function extendRectangular(sel, dir, columns, _dataLength, anchorX = 0, anchorY = 0) {
 	const bpr = bytesPerRow(columns);
 	let x;
 	let y;
 	let width;
 	let height;
-	if (!sel || sel.kind === "single") {
-		const pos = sel?.kind === "single" ? sel.pos : 0;
+	if (!sel || sel.kind === `single`) {
+		const pos = sel?.kind === `single` ? sel.pos : 0;
 		x = pos % bpr;
 		y = Math.floor(pos / bpr);
 		width = 1;
 		height = 1;
-	} else if (sel.kind === "contiguous") {
+	} else if (sel.kind === `contiguous`) {
 		const start = min(sel.start, sel.end);
 		const end = max(sel.start, sel.end);
 		x = start % bpr;
 		y = Math.floor(start / bpr);
 		width = end - start + 1;
 		height = 1;
-	} else if (sel.kind === "rectangular") {
+	} else if (sel.kind === `rectangular`) {
 		x = sel.x;
 		y = sel.y;
 		width = sel.width;
@@ -237,10 +237,10 @@ const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY
 		width = 1;
 		height = 1;
 	}
-	const effectiveAnchorX = anchorX > 0 || sel?.kind === "rectangular" ? anchorX : x;
-	const effectiveAnchorY = anchorY > 0 || sel?.kind === "rectangular" ? anchorY : y;
+	const effectiveAnchorX = anchorX > 0 || sel?.kind === `rectangular` ? anchorX : x;
+	const effectiveAnchorY = anchorY > 0 || sel?.kind === `rectangular` ? anchorY : y;
 	switch (dir) {
-		case "left":
+		case `left`:
 			if (x > effectiveAnchorX) width -= 1;
 			else if (x === effectiveAnchorX && width > 1) {
 				x -= 1;
@@ -250,10 +250,10 @@ const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY
 				width += 1;
 			}
 			break;
-		case "right":
+		case `right`:
 			if (x + width < bpr) width += 1;
 			break;
-		case "up":
+		case `up`:
 			if (y > effectiveAnchorY) height -= 1;
 			else if (y === effectiveAnchorY && height > 1) {
 				y -= 1;
@@ -263,22 +263,22 @@ const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY
 				height += 1;
 			}
 			break;
-		case "down":
+		case `down`:
 			height += 1;
 			break;
 	}
 	return {
-		kind: "rectangular",
+		kind: `rectangular`,
 		x,
 		y,
 		width,
 		height
 	};
-};
-const selectionFromPointerRange = (start, end, mode, columns) => {
+}
+function selectionFromPointerRange(start, end, mode, columns) {
 	const bpr = bytesPerRow(columns);
-	if (mode === "contiguous") return {
-		kind: "contiguous",
+	if (mode === `contiguous`) return {
+		kind: `contiguous`,
 		start: min(start, end),
 		end: max(start, end)
 	};
@@ -287,13 +287,13 @@ const selectionFromPointerRange = (start, end, mode, columns) => {
 	const endX = end % bpr;
 	const endY = Math.floor(end / bpr);
 	return {
-		kind: "rectangular",
+		kind: `rectangular`,
 		x: min(startX, endX),
 		y: min(startY, endY),
 		width: Math.abs(endX - startX) + 1,
 		height: Math.abs(endY - startY) + 1
 	};
-};
+}
 //#endregion
 //#region src/hex/hex-editor.ts
 let IxfxHexEditorElement = class IxfxHexEditorElement extends LitElement {
@@ -1144,4 +1144,4 @@ IxfxHexEditorElement = __decorate([safeCustomElement(`ixfx-hex-editor`)], IxfxHe
 //#endregion
 export { IxfxHexEditorElement as t };
 
-//# sourceMappingURL=hex-editor-gH3mteMr.js.map
+//# sourceMappingURL=hex-editor-CsN_ySkH.js.map