@ixfx/components 0.2.4 → 0.2.6

package/dist/hex/hex-editor.js

@@ -1,894 +0,0 @@
-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, state } from 'lit/decorators.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { createShadeMap, getAsciiClass } from './colour.js';
-import { applyDiff, clearChangeset, createHexStore, getChangeset, readByte, reverseDiff, length as storeLength, writeByte, writeBytes } from './data.js';
-import { createUndoRedoStack, push as pushDiff, redo as redoDiff, undo as undoDiff } from './diff.js';
-import { bytesPerRow, clampPos, extendContiguous, extendRectangular, getCursorPos, getSelectedPositions, moveSelection, selectionContains, selectionFromPointerRange } from './selection.js';
-import { isContiguousSelection, isRectangularSelection } from './types.js';
-let IxfxHexEditorElement = class IxfxHexEditorElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.columns = 4;
-        this.colourScheme = `ascii`;
-        this.showChangeset = true;
-        this.hideOffsetCol = false;
-        this.hideHexCol = false;
-        this.hideTextCol = false;
-        this._selection = null;
-        this._scrollTop = 0;
-        this._editState = null;
-        this._containerH = 0;
-        this._shadeMap = null;
-        this._focusSide = null;
-        this._store = createHexStore(new Uint8Array(0));
-        this._undoStack = createUndoRedoStack();
-        this._copyBuffer = null;
-        this._rowHeight = 24;
-        this._dragStart = null;
-        this._dragAnchor = null;
-        this._rectAnchorX = 0;
-        this._rectAnchorY = 0;
-        this._rectAnchorXFromKeyboard = 0;
-        this._rectAnchorYFromKeyboard = 0;
-        this._initialSelectionPoint = 0;
-        this._currentCursorPoint = 0;
-        this._pointerMode = null;
-        this._currentDragDiff = null;
-        this._shiftClickTarget = null;
-        this._onScroll = (e) => {
-            const target = e.target;
-            this._scrollTop = target.scrollTop;
-            this.requestUpdate();
-        };
-        this._onKeyDown = (e) => {
-            const isNavigationKey = [`ArrowLeft`, `ArrowRight`, `ArrowUp`, `ArrowDown`].includes(e.key);
-            if (isNavigationKey) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (this._editState) {
-                    this._editState = null;
-                }
-                const dir = e.key.replace(`Arrow`, ``).toLowerCase();
-                const dataLen = storeLength(this._store);
-                const bpr = bytesPerRow(this.columns);
-                if (e.metaKey || e.ctrlKey) {
-                    if (!this._selection || this._selection.kind !== `rectangular`) {
-                        let startPos = 0;
-                        if (this._selection?.kind === `single`) {
-                            startPos = this._selection.pos;
-                        }
-                        else if (this._selection?.kind === `contiguous`) {
-                            startPos = Math.min(this._selection.start, this._selection.end);
-                        }
-                        this._rectAnchorXFromKeyboard = startPos % bpr;
-                        this._rectAnchorYFromKeyboard = Math.floor(startPos / bpr);
-                        this._selection = { kind: `rectangular`, x: this._rectAnchorXFromKeyboard, y: this._rectAnchorYFromKeyboard, width: 1, height: 1 };
-                    }
-                    this._selection = extendRectangular(this._selection, dir, this.columns, dataLen, this._rectAnchorXFromKeyboard, this._rectAnchorYFromKeyboard);
-                }
-                else if (e.shiftKey) {
-                    if (!this._selection) {
-                        this._initialSelectionPoint = 0;
-                        this._currentCursorPoint = 0;
-                    }
-                    else if (this._selection.kind === `single`) {
-                        this._initialSelectionPoint = this._selection.pos;
-                        this._currentCursorPoint = this._selection.pos;
-                    }
-                    else if (this._selection.kind === `rectangular`) {
-                        const cursorPos = this._selection.y * bpr + this._selection.x;
-                        this._initialSelectionPoint = cursorPos;
-                        this._currentCursorPoint = cursorPos;
-                    }
-                    const newPos = getCursorPos(this._selection, dir, this.columns, dataLen);
-                    const start = Math.min(this._initialSelectionPoint, newPos);
-                    const end = Math.max(this._initialSelectionPoint, newPos);
-                    this._currentCursorPoint = newPos;
-                    this._selection = { kind: `contiguous`, start, end };
-                }
-                else {
-                    this._selection = moveSelection(this._selection, dir, this.columns, dataLen);
-                    const pos = getCursorPos(this._selection, dir, this.columns, dataLen);
-                    this._initialSelectionPoint = pos;
-                    this._currentCursorPoint = pos;
-                }
-                this._dispatchSelectEvent();
-                this.requestUpdate();
-                return;
-            }
-            if (e.key === `Tab`) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (this._editState) {
-                    this._advanceCursor();
-                }
-                else {
-                    const dataLen = storeLength(this._store);
-                    this._selection = moveSelection(this._selection, `right`, this.columns, dataLen);
-                    this._dispatchSelectEvent();
-                }
-                this.requestUpdate();
-                return;
-            }
-            if (e.key === `Escape`) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (this._editState) {
-                    this._editState = null;
-                }
-                else if (this._selection && this._selection.kind !== `single`) {
-                    const sel = this._selection;
-                    let firstPos = 0;
-                    if (sel.kind === `contiguous`) {
-                        const c = sel;
-                        firstPos = Math.min(c.start, c.end);
-                    }
-                    if (sel.kind === `rectangular`) {
-                        const r = sel;
-                        firstPos = r.y * bytesPerRow(this.columns) + r.x;
-                    }
-                    this._selection = { kind: `single`, pos: firstPos };
-                    this._dispatchSelectEvent();
-                }
-                this.requestUpdate();
-                return;
-            }
-            if (this._editState) {
-                e.stopPropagation();
-                if (e.key === `Backspace`) {
-                    this._handleBackspace();
-                    return;
-                }
-                if (e.key === `Enter`) {
-                    if (this._editState.side === `hex` && this._editState.partial.startsWith(`.`)) {
-                        this._commitDecimalValue();
-                    }
-                    return;
-                }
-                if (e.key.length === 1) {
-                    this._handleValueEntry(e.key);
-                }
-                return;
-            }
-            if (this._selection && this._selection.kind === `single` && e.key.length === 1) {
-                e.preventDefault();
-                e.stopPropagation();
-                const pos = this._selection.pos;
-                const side = this._focusSide ?? `hex`;
-                this._editState = { pos, side, partial: `` };
-                this._handleValueEntry(e.key);
-            }
-        };
-    }
-    static { this.styles = css `
-    :host {
-      --hex-row-height: 24px;
-      --hex-offset-width: 8ch;
-      --hex-font: monospace;
-      --hex-font-size: 0.85rem;
-      --hex-changed-weight: bold;
-
-      --ascii-null: #808080;
-      --ascii-printable: #4caf50;
-      --ascii-whitespace: #ffffff;
-      --ascii-control: #f48fb1;
-      --ascii-other: #ffeb3b;
-
-      --shade-null: #808080;
-      --shade-max: #ffffff;
-      --shade-step-start: #ff0000;
-      --shade-step-end: #0000ff;
-
-      display: block;
-      font-family: var(--hex-font);
-      font-size: var(--hex-font-size);
-    }
-
-    .hex-editor {
-      display: flex;
-      flex-direction: column;
-      height: 300px;
-      overflow: hidden;
-      background: #1e1e1e;
-      color: #e0e0e0;
-      border: 1px solid #333;
-      border-radius: 4px;
-    }
-
-    .scroll-container {
-      flex: 1;
-      overflow-y: auto;
-      position: relative;
-    }
-
-    .header {
-      display: flex;
-      background: #2d2d2d;
-      font-weight: bold;
-      border-bottom: 1px solid #444;
-      height: var(--hex-row-height);
-      flex-shrink: 0;
-      align-items: center;
-    }
-
-    .row {
-      display: flex;
-      height: var(--hex-row-height);
-      align-items: center;
-    }
-
-    .row:hover {
-      background: rgba(255, 255, 255, 0.05);
-    }
-
-    .offset-cell {
-      width: var(--hex-offset-width);
-      padding: 0 8px;
-      text-align: right;
-      color: #888;
-      flex-shrink: 0;
-      box-sizing: border-box;
-    }
-
-    .col-group {
-      display: inline-flex;
-      gap: 4px;
-      margin-right: 16px;
-    }
-
-    .col-header {
-      width: calc(8ch + 28px);
-      padding: 0 8px;
-      color: #555;
-      text-align: right;
-      flex-shrink: 0;
-      box-sizing: border-box;
-    }
-
-    .col-header.active {
-      color: #aaa;
-    }
-
-    .text-header {
-      padding: 4px 8px;
-      color: #555;
-      width: calc(var(--columns, 4) * 4 * 1ch);
-      box-sizing: border-box;
-      flex-shrink: 0;
-    }
-
-    .text-header.active {
-      color: #aaa;
-    }
-
-    .hex-cell, .text-char {
-      display: inline-block;
-      width: 2ch;
-      text-align: center;
-      cursor: pointer;
-      user-select: none;
-      padding: 2px 0;
-    }
-
-    .hex-cell.selected, .text-char.selected {
-      background: rgba(100, 149, 237, 0.4);
-    }
-
-    .hex-cell.changed, .text-char.changed {
-      font-weight: var(--hex-changed-weight);
-    }
-
-    .hex-cell.editing {
-      background: rgba(255, 215, 0, 0.3);
-    }
-
-
-    .text-area {
-      display: inline-flex;
-      gap: 0;
-    }
-
-    .text-char {
-      width: 1ch;
-      text-align: left;
-    }
-
-    .byte-null { color: var(--ascii-null); }
-    .byte-printable { color: var(--ascii-printable); }
-    .byte-whitespace { color: var(--ascii-whitespace); }
-    .byte-control { color: var(--ascii-control); }
-    .byte-other { color: var(--ascii-other); }
-  `; }
-    setData(data) {
-        this._store = createHexStore(data);
-        this._undoStack = createUndoRedoStack();
-        this._selection = null;
-        this._editState = null;
-        this._scrollTop = 0;
-        this.requestUpdate();
-    }
-    undo() {
-        const diff = undoDiff(this._undoStack);
-        if (!diff)
-            return;
-        const reverse = reverseDiff(diff);
-        applyDiff(this._store, reverse);
-        this.requestUpdate();
-    }
-    redo() {
-        const diff = redoDiff(this._undoStack);
-        if (!diff)
-            return;
-        applyDiff(this._store, diff);
-        this.requestUpdate();
-    }
-    recomputeColours() {
-        const style = getComputedStyle(this);
-        const nullC = style.getPropertyValue(`--shade-null`).trim() || `#808080`;
-        const maxC = style.getPropertyValue(`--shade-max`).trim() || `#ffffff`;
-        const stepStart = style.getPropertyValue(`--shade-step-start`).trim() || `#ff0000`;
-        const stepEnd = style.getPropertyValue(`--shade-step-end`).trim() || `#0000ff`;
-        this._shadeMap = createShadeMap(nullC, maxC, stepStart, stepEnd);
-        this.requestUpdate();
-    }
-    *selectedBytes() {
-        const positions = getSelectedPositions(this._selection, this.columns);
-        for (let i = 0; i < positions.length; i++) {
-            const pos = positions[i];
-            yield {
-                selection_index: i,
-                array_index: pos,
-                value: readByte(this._store, pos),
-            };
-        }
-    }
-    containsPosition(pos) {
-        return selectionContains(this._selection, pos, this.columns);
-    }
-    selectSingle(position) {
-        this._selection = { kind: `single`, pos: position };
-        this._dispatchSelectEvent();
-        this.requestUpdate();
-    }
-    selectContiguous(start, end) {
-        this._selection = {
-            kind: `contiguous`,
-            start: start,
-            end: end,
-        };
-        this._dispatchSelectEvent();
-        this.requestUpdate();
-    }
-    selectRectangular(x, y, width, height) {
-        this._selection = {
-            kind: `rectangular`,
-            x,
-            y,
-            width,
-            height,
-        };
-        this._dispatchSelectEvent();
-        this.requestUpdate();
-    }
-    clearSelection() {
-        this._selection = null;
-        this._dispatchSelectEvent();
-        this.requestUpdate();
-    }
-    getSelection() {
-        return this._selection;
-    }
-    firstUpdated() {
-        const container = this.shadowRoot?.querySelector(`.scroll-container`);
-        if (container) {
-            const ro = new ResizeObserver((entries) => {
-                this._containerH = entries[0].contentRect.height;
-                this.requestUpdate();
-            });
-            ro.observe(container);
-            this._containerH = container.clientHeight;
-        }
-        this.recomputeColours();
-    }
-    _onPointerDown(pos, side, e) {
-        e.preventDefault();
-        if (e.button !== 0)
-            return;
-        this.shadowRoot?.querySelector(`.hex-editor`)?.focus();
-        this._focusSide = side;
-        const target = e.target;
-        target.setPointerCapture(e.pointerId);
-        const bpr = bytesPerRow(this.columns);
-        const startX = pos % bpr;
-        const startY = Math.floor(pos / bpr);
-        if (e.metaKey || e.ctrlKey) {
-            this._pointerMode = `select-rect`;
-            this._dragAnchor = pos;
-            this._rectAnchorX = startX;
-            this._rectAnchorY = startY;
-        }
-        else if (e.shiftKey) {
-            this._pointerMode = `select-cont`;
-            if (!this._selection || this._selection.kind !== `single`) {
-                this._dragAnchor = pos;
-            }
-            else {
-                this._dragAnchor = this._selection.pos;
-                this._shiftClickTarget = pos;
-            }
-        }
-        else {
-            this._pointerMode = `pending`;
-            this._dragStart = { pos, startValue: readByte(this._store, pos), startY: e.clientY, startX: e.clientX };
-            this._dragAnchor = pos;
-            this._currentDragDiff = null;
-        }
-    }
-    _onPointerMove(pos, _side, e) {
-        if (!this._dragStart)
-            return;
-        const dy = Math.abs(e.clientY - this._dragStart.startY);
-        const dx = Math.abs(e.clientX - this._dragStart.startX);
-        if (this._pointerMode === `pending` && dy > 4 && dy > dx) {
-            this._pointerMode = `drag-value`;
-            this._editState = null;
-        }
-        if (this._pointerMode === `drag-value`) {
-            const delta = Math.round((e.clientY - this._dragStart.startY) / 4);
-            const newValue = Math.max(0, Math.min(255, this._dragStart.startValue - delta));
-            this._currentDragDiff = writeByte(this._store, pos, newValue);
-            this.requestUpdate();
-        }
-        if (this._pointerMode === `select-cont`) {
-            if (this._dragAnchor !== null) {
-                const mode = `contiguous`;
-                this._selection = selectionFromPointerRange(this._dragAnchor, pos, mode, this.columns);
-                this._dispatchSelectEvent();
-            }
-        }
-        if (this._pointerMode === `select-rect`) {
-            const bpr = bytesPerRow(this.columns);
-            const currentX = pos % bpr;
-            const currentY = Math.floor(pos / bpr);
-            const x = Math.min(this._rectAnchorX, currentX);
-            const y = Math.min(this._rectAnchorY, currentY);
-            const width = Math.abs(currentX - this._rectAnchorX) + 1;
-            const height = Math.abs(currentY - this._rectAnchorY) + 1;
-            this._selection = { kind: `rectangular`, x, y, width, height };
-            this._dispatchSelectEvent();
-        }
-    }
-    _onPointerUp(pos, side, e) {
-        const target = e.target;
-        target.releasePointerCapture(e.pointerId);
-        if (this._pointerMode === `pending`) {
-            this._selection = { kind: `single`, pos };
-            this._initialSelectionPoint = pos;
-            this._currentCursorPoint = pos;
-            this._editState = { pos, side, partial: `` };
-            this._dispatchSelectEvent();
-        }
-        if (this._pointerMode === `select-cont`) {
-            if (this._dragAnchor !== null && this._shiftClickTarget !== null) {
-                this._selection = {
-                    kind: `contiguous`,
-                    start: this._dragAnchor,
-                    end: this._shiftClickTarget,
-                };
-                this._initialSelectionPoint = Math.min(this._dragAnchor, this._shiftClickTarget);
-                this._currentCursorPoint = Math.max(this._dragAnchor, this._shiftClickTarget);
-                this._dispatchSelectEvent();
-            }
-            else if (this._dragAnchor !== null) {
-                const mode = `contiguous`;
-                this._selection = selectionFromPointerRange(this._dragAnchor, pos, mode, this.columns);
-                this._initialSelectionPoint = this._dragAnchor;
-                this._currentCursorPoint = pos;
-                this._dispatchSelectEvent();
-            }
-        }
-        if (this._pointerMode === `select-rect`) {
-            const bpr = bytesPerRow(this.columns);
-            const currentX = pos % bpr;
-            const currentY = Math.floor(pos / bpr);
-            const x = Math.min(this._rectAnchorX, currentX);
-            const y = Math.min(this._rectAnchorY, currentY);
-            const width = Math.abs(currentX - this._rectAnchorX) + 1;
-            const height = Math.abs(currentY - this._rectAnchorY) + 1;
-            this._selection = { kind: `rectangular`, x, y, width, height };
-            this._dispatchSelectEvent();
-        }
-        if (this._pointerMode === `drag-value` && this._currentDragDiff) {
-            pushDiff(this._undoStack, this._currentDragDiff);
-            this._dispatchChangeEvent(this._currentDragDiff);
-        }
-        this._pointerMode = null;
-        this._dragStart = null;
-        this._dragAnchor = null;
-        this._currentDragDiff = null;
-        this._shiftClickTarget = null;
-    }
-    _handleBackspace() {
-        if (!this._editState)
-            return;
-        this._editState = { ...this._editState, partial: `` };
-        this.requestUpdate();
-    }
-    _handleValueEntry(key) {
-        if (!this._editState)
-            return;
-        const { pos, side, partial } = this._editState;
-        if (side === `text`) {
-            if (key.length === 1 && key.charCodeAt(0) >= 0x20 && key.charCodeAt(0) <= 0x7E) {
-                const value = key.charCodeAt(0);
-                const diff = writeByte(this._store, pos, value);
-                pushDiff(this._undoStack, diff);
-                this._dispatchChangeEvent(diff);
-                this._advanceCursor();
-            }
-            return;
-        }
-        if (partial === `` && key === `.`) {
-            this._editState = { ...this._editState, partial: `.` };
-            this.requestUpdate();
-            return;
-        }
-        if (partial.startsWith(`.`)) {
-            if (/\d/.test(key)) {
-                let newPartial = partial + key;
-                if (Number(newPartial.slice(1)) > 255) {
-                    newPartial = `.255`;
-                }
-                this._editState = { ...this._editState, partial: newPartial };
-                this.requestUpdate();
-            }
-            return;
-        }
-        const hexChars = `0123456789ABCDEFabcdef`;
-        if (hexChars.includes(key)) {
-            const newPartial = (partial + key.toUpperCase()).slice(-2);
-            this._editState = { ...this._editState, partial: newPartial };
-            this.requestUpdate();
-            if (newPartial.length === 2) {
-                const value = Number.parseInt(newPartial, 16);
-                const diff = writeByte(this._store, pos, value);
-                pushDiff(this._undoStack, diff);
-                this._dispatchChangeEvent(diff);
-                this._advanceCursor();
-            }
-        }
-        else if (partial !== ``) {
-            this._editState = { ...this._editState, partial: `` };
-            this.requestUpdate();
-        }
-    }
-    _commitDecimalValue() {
-        if (!this._editState)
-            return;
-        const value = Number.parseInt(this._editState.partial.slice(1), 10);
-        if (!isNaN(value)) {
-            const diff = writeByte(this._store, this._editState.pos, value);
-            pushDiff(this._undoStack, diff);
-            this._dispatchChangeEvent(diff);
-            this._advanceCursor();
-        }
-    }
-    _advanceCursor() {
-        if (!this._editState)
-            return;
-        const dataLen = storeLength(this._store);
-        const newPos = clampPos(this._editState.pos + 1, dataLen);
-        this._editState = { pos: newPos, side: this._editState.side, partial: `` };
-        this._selection = { kind: `single`, pos: newPos };
-        this.requestUpdate();
-    }
-    _dispatchChangeEvent(diff) {
-        this.dispatchEvent(new CustomEvent(`hex-change`, {
-            detail: { diff },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _dispatchSelectEvent() {
-        const sel = this._selection;
-        let detail;
-        if (!sel) {
-            detail = { type: `none` };
-        }
-        else if (sel.kind === `single`) {
-            detail = { type: `single`, position: sel.pos };
-        }
-        else if (sel.kind === `contiguous`) {
-            detail = { type: `contiguous`, start: sel.start, end: sel.end };
-        }
-        else if (sel.kind === `rectangular`) {
-            detail = { type: `rectangular`, x: sel.x, y: sel.y, width: sel.width, height: sel.height };
-        }
-        else {
-            detail = { type: `none` };
-        }
-        this.dispatchEvent(new CustomEvent(`select`, {
-            detail,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _copy() {
-        const positions = getSelectedPositions(this._selection, this.columns);
-        if (positions.length === 0)
-            return;
-        const bytes = positions.map((p) => readByte(this._store, p));
-        this._copyBuffer = new Uint8Array(bytes);
-        const hexStr = bytes.map((b) => b.toString(16).padStart(2, `0`)).join(` `);
-        navigator.clipboard?.writeText(hexStr).catch(() => { });
-    }
-    async _paste() {
-        let bytes = null;
-        try {
-            const text = await navigator.clipboard?.readText();
-            if (text) {
-                bytes = this._parseHexString(text);
-            }
-        }
-        catch {
-            // ignore
-        }
-        if (!bytes && this._copyBuffer) {
-            bytes = Array.from(this._copyBuffer);
-        }
-        if (!bytes || bytes.length === 0)
-            return;
-        if (!this._selection)
-            return;
-        const entries = new Map();
-        if (this._selection.kind === `single`) {
-            const startPos = this._selection.pos;
-            const dataLen = storeLength(this._store);
-            for (let i = 0; i < bytes.length && startPos + i < dataLen; i++) {
-                entries.set(startPos + i, bytes[i]);
-            }
-        }
-        else if (this._selection.kind === `contiguous`) {
-            const startPos = Math.min(this._selection.start, this._selection.end);
-            const endPos = Math.max(this._selection.start, this._selection.end);
-            const available = endPos - startPos + 1;
-            for (let i = 0; i < Math.min(bytes.length, available); i++) {
-                entries.set(startPos + i, bytes[i]);
-            }
-        }
-        else if (this._selection.kind === `rectangular`) {
-            const { x, y, width, height } = this._selection;
-            const bpr = bytesPerRow(this.columns);
-            let byteIdx = 0;
-            for (let row = 0; row < height && byteIdx < bytes.length; row++) {
-                for (let col = 0; col < width && byteIdx < bytes.length; col++) {
-                    const pos = (y + row) * bpr + x + col;
-                    entries.set(pos, bytes[byteIdx++]);
-                }
-            }
-        }
-        if (entries.size > 0) {
-            const diff = writeBytes(this._store, entries);
-            pushDiff(this._undoStack, diff);
-            this._dispatchChangeEvent(diff);
-            this.requestUpdate();
-        }
-    }
-    _parseHexString(text) {
-        const bytes = [];
-        const cleaned = text.replace(/[^0-9A-F]/gi, ` `).trim();
-        if (!cleaned)
-            return bytes;
-        const parts = cleaned.split(/\s+/);
-        for (const part of parts) {
-            if (part.length === 1) {
-                bytes.push(Number.parseInt(part + part, 16));
-            }
-            else if (part.length === 2) {
-                bytes.push(Number.parseInt(part, 16));
-            }
-        }
-        return bytes;
-    }
-    _getColHeaders() {
-        const headers = [];
-        for (let i = 0; i < this.columns; i++) {
-            const offset = i * 4;
-            headers.push(`+${offset.toString(16).toUpperCase()}`);
-        }
-        return headers;
-    }
-    _isRowShaded(pos) {
-        const sel = this._selection;
-        if (!sel || sel.kind !== `single`)
-            return true;
-        const bpr = bytesPerRow(this.columns);
-        const row = Math.floor(pos / bpr);
-        const selRow = Math.floor(sel.pos / bpr);
-        return row === selRow;
-    }
-    _isHexShaded(pos) {
-        return this._isRowShaded(pos);
-    }
-    _isTextShaded(pos) {
-        return this._isRowShaded(pos);
-    }
-    render() {
-        const dataLen = storeLength(this._store);
-        const bpr = bytesPerRow(this.columns);
-        const totalRows = Math.ceil(dataLen / bpr);
-        const containerH = this._containerH > 0 ? this._containerH : 280;
-        const startRow = Math.floor(this._scrollTop / this._rowHeight);
-        const endRow = Math.min(startRow + Math.ceil(containerH / this._rowHeight) + 2, totalRows);
-        const topSpacerHeight = startRow * this._rowHeight;
-        const botSpacerHeight = (totalRows - endRow) * this._rowHeight;
-        const changeset = getChangeset(this._store);
-        const colHeaders = this._getColHeaders();
-        const hexActive = this._focusSide === `hex` || this._focusSide === null;
-        const textActive = this._focusSide === `text`;
-        return html `
-      <div class="hex-editor" tabindex="0" @keydown=${this._onKeyDown} @pointerleave=${() => { }}>
-        <div class="header">
-          ${this.hideOffsetCol ? null : html `<span class="offset-cell">Offset</span>`}
-          ${this.hideHexCol ? null : repeat(colHeaders, h => html `<span class="col-header ${hexActive ? `active` : ``}">${h}</span>`)}
-          ${this.hideTextCol ? null : html `<span class="text-header ${textActive ? `active` : ``}">Text</span>`}
-        </div>
-        <div class="scroll-container" @scroll=${this._onScroll}>
-          <div style="height: ${topSpacerHeight}px"></div>
-          ${repeat(Array.from({ length: endRow - startRow }, (_, i) => startRow + i), rowIndex => rowIndex, rowIndex => this._renderRow(rowIndex, changeset))}
-          <div style="height: ${botSpacerHeight}px"></div>
-        </div>
-      </div>
-    `;
-    }
-    _renderRow(rowIndex, changeset) {
-        const bpr = bytesPerRow(this.columns);
-        const offset = rowIndex * bpr;
-        return html `
-      <div class="row" data-row=${rowIndex}>
-        ${this.hideOffsetCol ? null : html `<span class="offset-cell">${offset.toString(16).toUpperCase().padStart(6, `0`)}</span>`}
-        ${this.hideHexCol
-            ? null
-            : repeat(Array.from({ length: this.columns }, (_, i) => i), colIndex => colIndex, colIndex => this._renderColumn(rowIndex, colIndex, changeset))}
-        ${this.hideTextCol
-            ? null
-            : html `
-          <span class="text-area">
-            ${repeat(Array.from({ length: bpr }, (_, i) => i), i => i, i => this._renderTextChar(offset + i, changeset))}
-          </span>
-        `}
-      </div>
-    `;
-    }
-    _renderColumn(rowIndex, colIndex, changeset) {
-        const bpr = bytesPerRow(this.columns);
-        const basePos = rowIndex * bpr + colIndex * 4;
-        return html `
-      <span class="col-group">
-        ${[0, 1, 2, 3].map(b => this._renderHexCell(basePos + b, changeset))}
-      </span>
-    `;
-    }
-    _renderHexCell(pos, changeset) {
-        const dataLen = storeLength(this._store);
-        if (pos >= dataLen) {
-            return html `<span class="hex-cell"></span>`;
-        }
-        const byte = readByte(this._store, pos);
-        const hexStr = byte.toString(16).toUpperCase().padStart(2, `0`);
-        const isSelected = selectionContains(this._selection, pos, this.columns);
-        const isChanged = this.showChangeset && changeset.has(pos);
-        const isEditing = this._editState?.pos === pos;
-        const classes = [`hex-cell`];
-        if (isSelected)
-            classes.push(`selected`);
-        if (isChanged)
-            classes.push(`changed`);
-        if (isEditing)
-            classes.push(`editing`);
-        if (this._isHexShaded(pos))
-            classes.push(`shaded`);
-        let displayText = hexStr;
-        let colourStyle;
-        if (isEditing && this._editState) {
-            displayText = this._editState.partial === `` ? hexStr : `${this._editState.partial}_`;
-        }
-        if (this.colourScheme === `shade` && this._shadeMap) {
-            colourStyle = { color: this._shadeMap.forByte(byte) };
-        }
-        else if (this.colourScheme === `ascii`) {
-            classes.push(getAsciiClass(byte));
-        }
-        return html `
-      <span
-        class=${classes.join(` `)}
-        style=${styleMap(colourStyle || {})}
-        @pointerdown=${(e) => this._onPointerDown(pos, `hex`, e)}
-        @pointerup=${(e) => this._onPointerUp(pos, `hex`, e)}
-        @pointermove=${(e) => this._onPointerMove(pos, `hex`, e)}
-      >${displayText}</span>
-    `;
-    }
-    _renderTextChar(pos, changeset) {
-        const dataLen = storeLength(this._store);
-        if (pos >= dataLen) {
-            return html `<span class="text-char"></span>`;
-        }
-        const byte = readByte(this._store, pos);
-        const char = byte >= 0x20 && byte <= 0x7E ? String.fromCharCode(byte) : `.`;
-        const isSelected = selectionContains(this._selection, pos, this.columns);
-        const isChanged = this.showChangeset && changeset.has(pos);
-        const classes = [`text-char`];
-        if (isSelected)
-            classes.push(`selected`);
-        if (isChanged)
-            classes.push(`changed`);
-        if (this._isTextShaded(pos))
-            classes.push(`shaded`);
-        let colourStyle;
-        if (this.colourScheme === `shade` && this._shadeMap) {
-            colourStyle = { color: this._shadeMap.forByte(byte) };
-        }
-        else if (this.colourScheme === `ascii`) {
-            classes.push(getAsciiClass(byte));
-        }
-        return html `
-      <span
-        class=${classes.join(` `)}
-        style=${styleMap(colourStyle || {})}
-        @pointerdown=${(e) => this._onPointerDown(pos, `text`, e)}
-        @pointerup=${(e) => this._onPointerUp(pos, `text`, e)}
-        @pointermove=${(e) => this._onPointerMove(pos, `text`, e)}
-      >${char}</span>
-    `;
-    }
-};
-__decorate([
-    property({ type: Number })
-], IxfxHexEditorElement.prototype, "columns", void 0);
-__decorate([
-    property({ type: String })
-], IxfxHexEditorElement.prototype, "colourScheme", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxfxHexEditorElement.prototype, "showChangeset", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `hide-offset-col` })
-], IxfxHexEditorElement.prototype, "hideOffsetCol", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `hide-hex-col` })
-], IxfxHexEditorElement.prototype, "hideHexCol", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `hide-text-col` })
-], IxfxHexEditorElement.prototype, "hideTextCol", void 0);
-__decorate([
-    state()
-], IxfxHexEditorElement.prototype, "_selection", void 0);
-__decorate([
-    state()
-], IxfxHexEditorElement.prototype, "_scrollTop", void 0);
-__decorate([
-    state()
-], IxfxHexEditorElement.prototype, "_editState", void 0);
-__decorate([
-    state()
-], IxfxHexEditorElement.prototype, "_containerH", void 0);
-__decorate([
-    state()
-], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
-__decorate([
-    state()
-], IxfxHexEditorElement.prototype, "_focusSide", void 0);
-IxfxHexEditorElement = __decorate([
-    customElement(`ixfx-hex-editor`)
-], IxfxHexEditorElement);
-export { IxfxHexEditorElement };
-//# sourceMappingURL=hex-editor.js.map