@ixfx/components 0.2.4 → 0.2.6

package/dist/editable-label.js

@@ -0,0 +1,279 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { LitElement, css } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/editable-label/editable-label.ts
+let EditableLabel = class EditableLabel extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.mode = `label`;
+		this.entryMode = `free`;
+		this.value = ``;
+		this.disabled = false;
+		this.placeholder = ``;
+		this.displayTextLogic = `hidden`;
+		this.appearDelay = 50;
+		this.disappearDelay = 1e3;
+		this._editing = false;
+		this._prevValue = ``;
+		this._hovering = false;
+		this._transientShowingValue = false;
+		this._transientTimer = void 0;
+		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`) ?? void 0;
+	}
+	_clearTransientTimer() {
+		if (this._transientTimer !== void 0) {
+			clearTimeout(this._transientTimer);
+			this._transientTimer = void 0;
+		}
+	}
+	_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);
+	}
+	_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();
+		if ((this.validator ?? this._defaultValidator.bind(this))(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() {
+		if (this._shouldUseDisplayText() && this.displayText !== void 0 && 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;
+		}
+	}
+	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([safeCustomElement(`ixfx-editable-label`)], EditableLabel);
+//#endregion
+export { EditableLabel };
+
+//# sourceMappingURL=editable-label.js.map

package/dist/editable-label.js.map

@@ -0,0 +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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"}

package/dist/hex-editor-2_s0Ua5t.d.ts

@@ -0,0 +1,130 @@
+import { LitElement } from "lit";
+
+//#region src/hex/types.d.ts
+type BytePos = number;
+type SingleSelection = {
+  readonly kind: 'single';
+  readonly pos: BytePos;
+};
+type ContiguousSelection = {
+  readonly kind: 'contiguous';
+  readonly start: BytePos;
+  readonly end: BytePos;
+};
+type RectangularSelection = {
+  readonly kind: 'rectangular';
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+};
+type Selection = SingleSelection | ContiguousSelection | RectangularSelection | null;
+type DiffEntry = {
+  readonly before: number;
+  readonly after: number;
+};
+type Diff = ReadonlyMap<BytePos, DiffEntry>;
+type ColourScheme = 'ascii' | 'shade';
+//#endregion
+//#region src/hex/hex-editor.d.ts
+declare class IxfxHexEditorElement extends LitElement {
+  columns: number;
+  colourScheme: ColourScheme;
+  showChangeset: boolean;
+  hideOffsetCol: boolean;
+  hideHexCol: boolean;
+  hideTextCol: boolean;
+  private _selection;
+  private _scrollTop;
+  private _editState;
+  private _containerH;
+  private _shadeMap;
+  private _focusSide;
+  private _store;
+  private _undoStack;
+  private _copyBuffer;
+  private _rowHeight;
+  private _dragStart;
+  private _dragAnchor;
+  private _rectAnchorX;
+  private _rectAnchorY;
+  private _rectAnchorXFromKeyboard;
+  private _rectAnchorYFromKeyboard;
+  private _initialSelectionPoint;
+  private _currentCursorPoint;
+  private _pointerMode;
+  private _currentDragDiff;
+  private _shiftClickTarget;
+  static styles: import("lit").CSSResult;
+  setData(data: Uint8Array): void;
+  undo(): void;
+  redo(): void;
+  recomputeColours(): void;
+  selectedBytes(): Generator<{
+    selection_index: number;
+    array_index: number;
+    value: number;
+  }>;
+  containsPosition(pos: number): boolean;
+  selectSingle(position: number): void;
+  selectContiguous(start: number, end: number): void;
+  selectRectangular(x: number, y: number, width: number, height: number): void;
+  clearSelection(): void;
+  getSelection(): Selection;
+  protected firstUpdated(): void;
+  private _onScroll;
+  private _onPointerDown;
+  private _onPointerMove;
+  private _onPointerUp;
+  private _onKeyDown;
+  private _handleBackspace;
+  private _handleValueEntry;
+  private _commitDecimalValue;
+  private _advanceCursor;
+  private _dispatchChangeEvent;
+  private _dispatchSelectEvent;
+  private _copy;
+  private _paste;
+  private _parseHexString;
+  private _getColHeaders;
+  private _isRowShaded;
+  private _isHexShaded;
+  private _isTextShaded;
+  protected render(): import("lit").TemplateResult<1>;
+  private _renderRow;
+  private _renderColumn;
+  private _renderHexCell;
+  private _renderTextChar;
+}
+type HexChangeDetail = {
+  readonly diff: Diff;
+};
+type HexChangeEvent = CustomEvent<HexChangeDetail>;
+type SingleSelectEventDetail = {
+  readonly type: `single`;
+  readonly position: number;
+};
+type ContiguousSelectEventDetail = {
+  readonly type: `contiguous`;
+  readonly start: number;
+  readonly end: number;
+};
+type RectangularSelectEventDetail = {
+  readonly type: `rectangular`;
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+};
+type NoneSelectEventDetail = {
+  readonly type: `none`;
+};
+type SelectEventDetail = SingleSelectEventDetail | ContiguousSelectEventDetail | RectangularSelectEventDetail | NoneSelectEventDetail;
+declare global {
+  interface HTMLElementTagNameMap {
+    'ixfx-hex-editor': IxfxHexEditorElement;
+  }
+} //# sourceMappingURL=hex-editor.d.ts.map
+//#endregion
+export { NoneSelectEventDetail as a, SingleSelectEventDetail as c, IxfxHexEditorElement as i, HexChangeDetail as n, RectangularSelectEventDetail as o, HexChangeEvent as r, SelectEventDetail as s, ContiguousSelectEventDetail as t };
+//# sourceMappingURL=hex-editor-2_s0Ua5t.d.ts.map

package/dist/hex-editor-2_s0Ua5t.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hex-editor-2_s0Ua5t.d.ts","names":[],"sources":["../src/hex/types.ts","../src/hex/hex-editor.ts"],"mappings":"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"}