@dxos/lit-grid 0.6.10-main.3cfcc89

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @dxos/lit-grid
+
+A grid webcomponent using Lit

package/dist/lib/browser/index.mjs

@@ -0,0 +1,429 @@
+// packages/ui/lit-grid/src/dx-grid.ts
+import { LitElement, html } from "lit";
+import { customElement, state, property } from "lit/decorators.js";
+import { ref, createRef } from "lit/directives/ref.js";
+function _ts_decorate(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;
+}
+var gap = 1;
+var resizeTolerance = 8;
+var overscanCol = 1;
+var overscanRow = 1;
+var sizeColMin = 32;
+var sizeColMax = 1024;
+var sizeRowMin = 16;
+var sizeRowMax = 1024;
+var separator = ",";
+var colToA1Notation = (col) => {
+  return (col >= 26 ? String.fromCharCode("A".charCodeAt(0) + Math.floor(col / 26) - 1) : "") + String.fromCharCode("A".charCodeAt(0) + col % 26);
+};
+var rowToA1Notation = (row) => {
+  return `${row + 1}`;
+};
+var localChId = (c0) => `ch--${c0}`;
+var localRhId = (r0) => `rh--${r0}`;
+var getPage = (axis, event) => axis === "col" ? event.pageX : event.pageY;
+var DxGrid = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.rowDefault = {
+      size: 32
+    };
+    this.columnDefault = {
+      size: 180
+    };
+    this.rows = {};
+    this.columns = {};
+    this.cells = {};
+    //
+    // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
+    //
+    this.posInline = 0;
+    this.posBlock = 0;
+    //
+    // `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.
+    //
+    this.sizeInline = 0;
+    this.sizeBlock = 0;
+    //
+    // `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.
+    //
+    this.overscanInline = 0;
+    this.overscanBlock = 0;
+    //
+    // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.
+    //
+    this.binInlineMin = 0;
+    this.binInlineMax = this.colSize(0);
+    this.binBlockMin = 0;
+    this.binBlockMax = this.rowSize(0);
+    //
+    // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
+    // the viewport. These start with naïve values that are updated before first contentful render.
+    //
+    this.visColMin = 0;
+    this.visColMax = 1;
+    this.visRowMin = 0;
+    this.visRowMax = 1;
+    //
+    // `template` is the rendered value of `grid-{axis}-template`.
+    //
+    this.templateColumns = `${this.colSize(0)}px`;
+    this.templateRows = `${this.rowSize(0)}px`;
+    //
+    // Resize state and handlers
+    //
+    this.colSizes = {};
+    this.rowSizes = {};
+    this.resizing = null;
+    this.handlePointerDown = (event) => {
+      const actionEl = event.target?.closest("[data-dx-grid-action]");
+      const action = actionEl?.getAttribute("data-dx-grid-action");
+      if (action) {
+        if (action.startsWith("resize")) {
+          const [resize, index] = action.split(",");
+          const [_, axis] = resize.split("-");
+          this.resizing = {
+            axis,
+            size: axis === "col" ? this.colSize(index) : this.rowSize(index),
+            page: getPage(axis, event),
+            index
+          };
+        }
+      }
+    };
+    this.handlePointerUp = (_event) => {
+      this.resizing = null;
+    };
+    this.handlePointerMove = (event) => {
+      if (this.resizing) {
+        const delta = getPage(this.resizing.axis, event) - this.resizing.page;
+        if (this.resizing.axis === "col") {
+          const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));
+          this.colSizes = {
+            ...this.colSizes,
+            [this.resizing.index]: nextSize
+          };
+          this.updateVisInline();
+        } else {
+          const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));
+          this.rowSizes = {
+            ...this.rowSizes,
+            [this.resizing.index]: nextSize
+          };
+          this.updateVisBlock();
+        }
+      }
+    };
+    //
+    // Resize & reposition handlers, observer, ref
+    //
+    this.observer = new ResizeObserver((entries) => {
+      const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
+        inlineSize: 0,
+        blockSize: 0
+      };
+      if (Math.abs(inlineSize - this.sizeInline) > resizeTolerance || Math.abs(blockSize - this.sizeBlock) > resizeTolerance) {
+        this.sizeInline = inlineSize;
+        this.sizeBlock = blockSize;
+        this.updateVis();
+      }
+    });
+    this.viewportRef = createRef();
+    this.handleWheel = ({ deltaX, deltaY }) => {
+      this.posInline = Math.max(0, this.posInline + deltaX);
+      this.posBlock = Math.max(0, this.posBlock + deltaY);
+      if (this.posInline >= this.binInlineMin && this.posInline < this.binInlineMax && this.posBlock >= this.binBlockMin && this.posBlock < this.binBlockMax) {
+      } else {
+        this.updateVis();
+      }
+    };
+  }
+  //
+  // Accessors
+  //
+  colSize(c) {
+    return this.colSizes?.[c] ?? this.columnDefault.size;
+  }
+  rowSize(r) {
+    return this.rowSizes?.[r] ?? this.rowDefault.size;
+  }
+  getCell(c, r) {
+    return this.cells[`${c}${separator}${r}`];
+  }
+  updateVisInline() {
+    let colIndex = 0;
+    let pxInline = this.colSize(colIndex);
+    while (pxInline < this.posInline) {
+      colIndex += 1;
+      pxInline += this.colSize(colIndex) + gap;
+    }
+    this.visColMin = colIndex - overscanCol;
+    this.binInlineMin = pxInline - this.colSize(colIndex) - gap;
+    this.binInlineMax = pxInline + gap;
+    this.overscanInline = [
+      ...Array(overscanCol)
+    ].reduce((acc, _, c0) => {
+      acc += this.colSize(this.visColMin + c0);
+      return acc;
+    }, 0) + gap * (overscanCol - 1);
+    while (pxInline < this.binInlineMax + this.sizeInline) {
+      colIndex += 1;
+      pxInline += this.colSize(colIndex) + gap;
+    }
+    this.visColMax = colIndex + overscanCol + 1;
+    this.templateColumns = [
+      ...Array(this.visColMax - this.visColMin)
+    ].map((_, c0) => `${this.colSize(this.visColMin + c0)}px`).join(" ");
+  }
+  updateVisBlock() {
+    let rowIndex = 0;
+    let pxBlock = this.rowSize(rowIndex);
+    while (pxBlock < this.posBlock) {
+      rowIndex += 1;
+      pxBlock += this.rowSize(rowIndex) + gap;
+    }
+    this.visRowMin = rowIndex - overscanRow;
+    this.binBlockMin = pxBlock - this.rowSize(rowIndex) - gap;
+    this.binBlockMax = pxBlock + gap;
+    this.overscanBlock = [
+      ...Array(overscanRow)
+    ].reduce((acc, _, r0) => {
+      acc += this.rowSize(this.visRowMin + r0);
+      return acc;
+    }, 0) + gap * (overscanRow - 1);
+    while (pxBlock < this.binBlockMax + this.sizeBlock) {
+      rowIndex += 1;
+      pxBlock += this.rowSize(rowIndex) + gap;
+    }
+    this.visRowMax = rowIndex + overscanRow + 1;
+    this.templateRows = [
+      ...Array(this.visRowMax - this.visRowMin)
+    ].map((_, r0) => `${this.rowSize(this.visRowMin + r0)}px`).join(" ");
+  }
+  updateVis() {
+    this.updateVisInline();
+    this.updateVisBlock();
+  }
+  //
+  // Render and other lifecycle methods
+  //
+  render() {
+    const visibleCols = this.visColMax - this.visColMin;
+    const visibleRows = this.visRowMax - this.visRowMin;
+    const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;
+    const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
+    return html`<div
+      role="none"
+      class="dx-grid"
+      @pointerdown=${this.handlePointerDown}
+      @pointerup=${this.handlePointerUp}
+      @pointermove=${this.handlePointerMove}
+    >
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__columnheader">
+        <div
+          role="none"
+          class="dx-grid__columnheader__content"
+          style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateColumns};"
+        >
+          ${[
+      ...Array(visibleCols)
+    ].map((_, c0) => {
+      const c = this.visColMin + c0;
+      return html`<div
+              role="columnheader"
+              ?inert=${c < 0}
+              style="inline-size:${this.colSize(c)}px;block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 + 2};"
+            >
+              <span id=${localChId(c0)}>${colToA1Notation(c)}</span>
+              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-col,${c}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
+            </div>`;
+    })}
+        </div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__rowheader">
+        <div role="none" class="dx-grid__rowheader__content" style="transform:translate3d(0,${offsetBlock}px,0);">
+          ${[
+      ...Array(visibleRows)
+    ].map((_, r0) => {
+      const r = this.visRowMin + r0;
+      return html`<div
+              role="rowheader"
+              ?inert=${r < 0}
+              style="block-size:${this.rowSize(r)}px;grid-row:${r0 + 1}/${r0 + 2}"
+            >
+              <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>
+              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) && html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-row,${r}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
+            </div>`;
+    })}
+        </div>
+      </div>
+      <div role="none" class="dx-grid__viewport" @wheel="${this.handleWheel}" ${ref(this.viewportRef)}>
+        <div
+          role="grid"
+          class="dx-grid__content"
+          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this.templateColumns};grid-template-rows:${this.templateRows};"
+        >
+          ${[
+      ...Array(visibleCols)
+    ].map((_, c0) => {
+      return [
+        ...Array(visibleRows)
+      ].map((_2, r0) => {
+        const c = c0 + this.visColMin;
+        const r = r0 + this.visRowMin;
+        const cell = this.getCell(c, r);
+        return html`<div
+                role="gridcell"
+                ?inert=${c < 0 || r < 0}
+                aria-rowindex=${r}
+                aria-colindex=${c}
+                data-dx-grid-action="cell"
+                style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
+              >
+                ${cell?.value}
+              </div>`;
+      });
+    })}
+        </div>
+      </div>
+      <div role="none" class="dx-grid__scrollbar" aria-orientation="vertical">
+        <div role="none" class="dx-grid__scrollbar__thumb"></div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__scrollbar" aria-orientation="horizontal">
+        <div role="none" class="dx-grid__scrollbar__thumb"></div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+    </div>`;
+  }
+  firstUpdated() {
+    this.observer.observe(this.viewportRef.value);
+    this.colSizes = Object.entries(this.columns).reduce((acc, [colId, colMeta]) => {
+      if (colMeta?.size) {
+        acc[colId] = colMeta.size;
+      }
+      return acc;
+    }, {});
+    this.rowSizes = Object.entries(this.rows).reduce((acc, [rowId, rowMeta]) => {
+      if (rowMeta?.size) {
+        acc[rowId] = rowMeta.size;
+      }
+      return acc;
+    }, {});
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.viewportRef.value) {
+      this.observer.unobserve(this.viewportRef.value);
+    }
+  }
+  createRenderRoot() {
+    return this;
+  }
+};
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "rowDefault", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "columnDefault", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "rows", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "columns", void 0);
+_ts_decorate([
+  property({
+    type: Object
+  })
+], DxGrid.prototype, "cells", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "posInline", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "posBlock", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "sizeInline", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "sizeBlock", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "overscanInline", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "overscanBlock", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binInlineMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binInlineMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binBlockMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "binBlockMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visColMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visColMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visRowMin", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "visRowMax", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "templateColumns", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "templateRows", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "colSizes", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "rowSizes", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "resizing", void 0);
+_ts_decorate([
+  state()
+], DxGrid.prototype, "observer", void 0);
+DxGrid = _ts_decorate([
+  customElement("dx-grid")
+], DxGrid);
+export {
+  DxGrid
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/dx-grid.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { LitElement, html } from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { ref, createRef, type Ref } from 'lit/directives/ref.js';\n\n/**\n * The size in pixels of the gap between cells\n */\nconst gap = 1;\n\n/**\n * This should be about the width of the `1` numeral so resize is triggered as the row header column’s intrinsic size\n * changes when scrolling vertically.\n */\nconst resizeTolerance = 8;\n\n//\n// `overscan` is the number of columns or rows to render outside of the viewport\n//\nconst overscanCol = 1;\nconst overscanRow = 1;\n\n//\n// `size`, when suffixed with ‘row’ or ‘col’, are limits on size applied when resizing\n//\nconst sizeColMin = 32;\nconst sizeColMax = 1024;\nconst sizeRowMin = 16;\nconst sizeRowMax = 1024;\n\n/**\n * Separator for serializing cell position vectors\n */\nconst separator = ',';\n\n//\n// A1 notation is the fallback for numbering columns and rows.\n//\n\nconst colToA1Notation = (col: number): string => {\n  return (\n    (col >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(col / 26) - 1) : '') +\n    String.fromCharCode('A'.charCodeAt(0) + (col % 26))\n  );\n};\n\nconst rowToA1Notation = (row: number): string => {\n  return `${row + 1}`;\n};\n\nexport type CellValue = {\n  /**\n   * The content value\n   */\n  value: string;\n  /**\n   * If this is a merged cell, the bottomright-most of the range in numeric notation, otherwise undefined.\n   */\n  end?: string;\n  /**\n   * CSS inline styles to apply to the gridcell element\n   */\n  style?: string;\n};\n\ntype AxisMeta = {\n  size: number;\n  description?: string;\n  resizeable?: boolean;\n};\n\nexport type DxGridProps = Pick<DxGrid, 'cells' | 'rows' | 'columns' | 'rowDefault' | 'columnDefault'>;\n\nconst localChId = (c0: number) => `ch--${c0}`;\nconst localRhId = (r0: number) => `rh--${r0}`;\n\nconst getPage = (axis: string, event: PointerEvent) => (axis === 'col' ? event.pageX : event.pageY);\n\n@customElement('dx-grid')\nexport class DxGrid extends LitElement {\n  @property({ type: Object })\n  rowDefault: AxisMeta = { size: 32 };\n\n  @property({ type: Object })\n  columnDefault: AxisMeta = { size: 180 };\n\n  @property({ type: Object })\n  rows: Record<string, AxisMeta> = {};\n\n  @property({ type: Object })\n  columns: Record<string, AxisMeta> = {};\n\n  @property({ type: Object })\n  cells: Record<string, CellValue> = {};\n\n  //\n  // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.\n  //\n\n  @state()\n  posInline = 0;\n\n  @state()\n  posBlock = 0;\n\n  //\n  // `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.\n  //\n\n  @state()\n  sizeInline = 0;\n\n  @state()\n  sizeBlock = 0;\n\n  //\n  // `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.\n  //\n\n  @state()\n  overscanInline = 0;\n\n  @state()\n  overscanBlock = 0;\n\n  //\n  // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.\n  //\n\n  @state()\n  binInlineMin = 0;\n\n  @state()\n  binInlineMax = this.colSize(0);\n\n  @state()\n  binBlockMin = 0;\n\n  @state()\n  binBlockMax = this.rowSize(0);\n\n  //\n  // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within\n  // the viewport. These start with naïve values that are updated before first contentful render.\n  //\n\n  @state()\n  visColMin = 0;\n\n  @state()\n  visColMax = 1;\n\n  @state()\n  visRowMin = 0;\n\n  @state()\n  visRowMax = 1;\n\n  //\n  // `template` is the rendered value of `grid-{axis}-template`.\n  //\n  @state()\n  templateColumns = `${this.colSize(0)}px`;\n\n  @state()\n  templateRows = `${this.rowSize(0)}px`;\n\n  //\n  // Resize state and handlers\n  //\n\n  @state()\n  colSizes: Record<string, number> = {};\n\n  @state()\n  rowSizes: Record<string, number> = {};\n\n  @state()\n  resizing: null | { axis: 'col' | 'row'; page: number; size: number; index: string } = null;\n\n  handlePointerDown = (event: PointerEvent) => {\n    const actionEl = (event.target as HTMLElement)?.closest('[data-dx-grid-action]');\n    const action = actionEl?.getAttribute('data-dx-grid-action');\n    if (action) {\n      if (action.startsWith('resize')) {\n        const [resize, index] = action.split(',');\n        const [_, axis] = resize.split('-');\n        this.resizing = {\n          axis: axis as 'col' | 'row',\n          size: axis === 'col' ? this.colSize(index) : this.rowSize(index),\n          page: getPage(axis, event),\n          index,\n        };\n      }\n    }\n  };\n\n  handlePointerUp = (_event: PointerEvent) => {\n    this.resizing = null;\n  };\n\n  handlePointerMove = (event: PointerEvent) => {\n    if (this.resizing) {\n      const delta = getPage(this.resizing.axis, event) - this.resizing.page;\n      if (this.resizing.axis === 'col') {\n        const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));\n        this.colSizes = { ...this.colSizes, [this.resizing.index]: nextSize };\n        this.updateVisInline();\n      } else {\n        const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));\n        this.rowSizes = { ...this.rowSizes, [this.resizing.index]: nextSize };\n        this.updateVisBlock();\n      }\n    }\n  };\n\n  //\n  // Accessors\n  //\n\n  private colSize(c: number | string) {\n    return this.colSizes?.[c] ?? this.columnDefault.size;\n  }\n\n  private rowSize(r: number | string) {\n    return this.rowSizes?.[r] ?? this.rowDefault.size;\n  }\n\n  private getCell(c: number | string, r: number | string) {\n    return this.cells[`${c}${separator}${r}`];\n  }\n\n  //\n  // Resize & reposition handlers, observer, ref\n  //\n\n  @state()\n  observer = new ResizeObserver((entries) => {\n    const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {\n      inlineSize: 0,\n      blockSize: 0,\n    };\n    if (\n      Math.abs(inlineSize - this.sizeInline) > resizeTolerance ||\n      Math.abs(blockSize - this.sizeBlock) > resizeTolerance\n    ) {\n      // console.info('[updating bounds]', 'resize', [inlineSize - this.sizeInline, blockSize - this.sizeBlock]);\n      this.sizeInline = inlineSize;\n      this.sizeBlock = blockSize;\n      this.updateVis();\n    }\n  });\n\n  viewportRef: Ref<HTMLDivElement> = createRef();\n\n  handleWheel = ({ deltaX, deltaY }: WheelEvent) => {\n    this.posInline = Math.max(0, this.posInline + deltaX);\n    this.posBlock = Math.max(0, this.posBlock + deltaY);\n    if (\n      this.posInline >= this.binInlineMin &&\n      this.posInline < this.binInlineMax &&\n      this.posBlock >= this.binBlockMin &&\n      this.posBlock < this.binBlockMax\n    ) {\n      // do nothing\n    } else {\n      // console.info(\n      //   '[updating bounds]',\n      //   'wheel',\n      //   [this.binInlineMin, this.posInline, this.binInlineMax],\n      //   [this.binBlockMin, this.posBlock, this.binBlockMax],\n      // );\n      this.updateVis();\n    }\n  };\n\n  private updateVisInline() {\n    // todo: avoid starting from zero\n    let colIndex = 0;\n    let pxInline = this.colSize(colIndex);\n\n    while (pxInline < this.posInline) {\n      colIndex += 1;\n      pxInline += this.colSize(colIndex) + gap;\n    }\n\n    this.visColMin = colIndex - overscanCol;\n\n    this.binInlineMin = pxInline - this.colSize(colIndex) - gap;\n    this.binInlineMax = pxInline + gap;\n\n    this.overscanInline =\n      [...Array(overscanCol)].reduce((acc, _, c0) => {\n        acc += this.colSize(this.visColMin + c0);\n        return acc;\n      }, 0) +\n      gap * (overscanCol - 1);\n\n    while (pxInline < this.binInlineMax + this.sizeInline) {\n      colIndex += 1;\n      pxInline += this.colSize(colIndex) + gap;\n    }\n\n    this.visColMax = colIndex + overscanCol + 1;\n\n    this.templateColumns = [...Array(this.visColMax - this.visColMin)]\n      .map((_, c0) => `${this.colSize(this.visColMin + c0)}px`)\n      .join(' ');\n  }\n\n  private updateVisBlock() {\n    // todo: avoid starting from zero\n    let rowIndex = 0;\n    let pxBlock = this.rowSize(rowIndex);\n\n    while (pxBlock < this.posBlock) {\n      rowIndex += 1;\n      pxBlock += this.rowSize(rowIndex) + gap;\n    }\n\n    this.visRowMin = rowIndex - overscanRow;\n\n    this.binBlockMin = pxBlock - this.rowSize(rowIndex) - gap;\n    this.binBlockMax = pxBlock + gap;\n\n    this.overscanBlock =\n      [...Array(overscanRow)].reduce((acc, _, r0) => {\n        acc += this.rowSize(this.visRowMin + r0);\n        return acc;\n      }, 0) +\n      gap * (overscanRow - 1);\n\n    while (pxBlock < this.binBlockMax + this.sizeBlock) {\n      rowIndex += 1;\n      pxBlock += this.rowSize(rowIndex) + gap;\n    }\n\n    this.visRowMax = rowIndex + overscanRow + 1;\n\n    this.templateRows = [...Array(this.visRowMax - this.visRowMin)]\n      .map((_, r0) => `${this.rowSize(this.visRowMin + r0)}px`)\n      .join(' ');\n  }\n\n  private updateVis() {\n    this.updateVisInline();\n    this.updateVisBlock();\n  }\n\n  //\n  // Render and other lifecycle methods\n  //\n\n  override render() {\n    const visibleCols = this.visColMax - this.visColMin;\n    const visibleRows = this.visRowMax - this.visRowMin;\n    // TODO NEXT -> ensure offset is using the right components\n    const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;\n    const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;\n\n    return html`<div\n      role=\"none\"\n      class=\"dx-grid\"\n      @pointerdown=${this.handlePointerDown}\n      @pointerup=${this.handlePointerUp}\n      @pointermove=${this.handlePointerMove}\n    >\n      <div role=\"none\" class=\"dx-grid__corner\"></div>\n      <div role=\"none\" class=\"dx-grid__columnheader\">\n        <div\n          role=\"none\"\n          class=\"dx-grid__columnheader__content\"\n          style=\"transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateColumns};\"\n        >\n          ${[...Array(visibleCols)].map((_, c0) => {\n            const c = this.visColMin + c0;\n            return html`<div\n              role=\"columnheader\"\n              ?inert=${c < 0}\n              style=\"inline-size:${this.colSize(c)}px;block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 +\n              2};\"\n            >\n              <span id=${localChId(c0)}>${colToA1Notation(c)}</span>\n              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) &&\n              html`<button class=\"dx-grid__resize-handle\" data-dx-grid-action=${`resize-col,${c}`}>\n                <span class=\"sr-only\">Resize</span>\n              </button>`}\n            </div>`;\n          })}\n        </div>\n      </div>\n      <div role=\"none\" class=\"dx-grid__corner\"></div>\n      <div role=\"none\" class=\"dx-grid__rowheader\">\n        <div role=\"none\" class=\"dx-grid__rowheader__content\" style=\"transform:translate3d(0,${offsetBlock}px,0);\">\n          ${[...Array(visibleRows)].map((_, r0) => {\n            const r = this.visRowMin + r0;\n            return html`<div\n              role=\"rowheader\"\n              ?inert=${r < 0}\n              style=\"block-size:${this.rowSize(r)}px;grid-row:${r0 + 1}/${r0 + 2}\"\n            >\n              <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>\n              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) &&\n              html`<button class=\"dx-grid__resize-handle\" data-dx-grid-action=${`resize-row,${r}`}>\n                <span class=\"sr-only\">Resize</span>\n              </button>`}\n            </div>`;\n          })}\n        </div>\n      </div>\n      <div role=\"none\" class=\"dx-grid__viewport\" @wheel=\"${this.handleWheel}\" ${ref(this.viewportRef)}>\n        <div\n          role=\"grid\"\n          class=\"dx-grid__content\"\n          style=\"transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this\n            .templateColumns};grid-template-rows:${this.templateRows};\"\n        >\n          ${[...Array(visibleCols)].map((_, c0) => {\n            return [...Array(visibleRows)].map((_, r0) => {\n              const c = c0 + this.visColMin;\n              const r = r0 + this.visRowMin;\n              const cell = this.getCell(c, r);\n              return html`<div\n                role=\"gridcell\"\n                ?inert=${c < 0 || r < 0}\n                aria-rowindex=${r}\n                aria-colindex=${c}\n                data-dx-grid-action=\"cell\"\n                style=\"grid-column:${c0 + 1};grid-row:${r0 + 1}\"\n              >\n                ${cell?.value}\n              </div>`;\n            });\n          })}\n        </div>\n      </div>\n      <div role=\"none\" class=\"dx-grid__scrollbar\" aria-orientation=\"vertical\">\n        <div role=\"none\" class=\"dx-grid__scrollbar__thumb\"></div>\n      </div>\n      <div role=\"none\" class=\"dx-grid__corner\"></div>\n      <div role=\"none\" class=\"dx-grid__scrollbar\" aria-orientation=\"horizontal\">\n        <div role=\"none\" class=\"dx-grid__scrollbar__thumb\"></div>\n      </div>\n      <div role=\"none\" class=\"dx-grid__corner\"></div>\n    </div>`;\n  }\n\n  override firstUpdated() {\n    this.observer.observe(this.viewportRef.value!);\n    this.colSizes = Object.entries(this.columns).reduce((acc: Record<string, number>, [colId, colMeta]) => {\n      if (colMeta?.size) {\n        acc[colId] = colMeta.size;\n      }\n      return acc;\n    }, {});\n    this.rowSizes = Object.entries(this.rows).reduce((acc: Record<string, number>, [rowId, rowMeta]) => {\n      if (rowMeta?.size) {\n        acc[rowId] = rowMeta.size;\n      }\n      return acc;\n    }, {});\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // console.log('[disconnected]', this.viewportRef.value);\n    // TODO(thure): Will this even work?\n    if (this.viewportRef.value) {\n      this.observer.unobserve(this.viewportRef.value);\n    }\n  }\n\n  override createRenderRoot() {\n    return this;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["LitElement", "html", "customElement", "state", "property", "ref", "createRef", "gap", "resizeTolerance", "overscanCol", "overscanRow", "sizeColMin", "sizeColMax", "sizeRowMin", "sizeRowMax", "separator", "colToA1Notation", "col", "String", "fromCharCode", "charCodeAt", "Math", "floor", "rowToA1Notation", "row", "localChId", "c0", "localRhId", "r0", "getPage", "axis", "event", "pageX", "pageY", "DxGrid", "LitElement", "rowDefault", "size", "columnDefault", "rows", "columns", "cells", "posInline", "posBlock", "sizeInline", "sizeBlock", "overscanInline", "overscanBlock", "binInlineMin", "binInlineMax", "colSize", "binBlockMin", "binBlockMax", "rowSize", "visColMin", "visColMax", "visRowMin", "visRowMax", "templateColumns", "templateRows", "colSizes", "rowSizes", "resizing", "handlePointerDown", "actionEl", "target", "closest", "action", "getAttribute", "startsWith", "resize", "index", "split", "_", "page", "handlePointerUp", "_event", "handlePointerMove", "delta", "nextSize", "max", "min", "updateVisInline", "updateVisBlock", "observer", "ResizeObserver", "entries", "inlineSize", "blockSize", "contentBoxSize", "abs", "updateVis", "viewportRef", "createRef", "handleWheel", "deltaX", "deltaY", "c", "r", "getCell", "colIndex", "pxInline", "Array", "reduce", "acc", "map", "join", "rowIndex", "pxBlock", "render", "visibleCols", "visibleRows", "offsetInline", "offsetBlock", "html", "resizeable", "ref", "cell", "value", "firstUpdated", "observe", "Object", "colId", "colMeta", "rowId", "rowMeta", "disconnectedCallback", "unobserve", "createRenderRoot", "property", "type", "state", "customElement"]
+}

package/dist/lib/browser/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/ui/lit-grid/src/dx-grid.ts":{"bytes":50156,"imports":[{"path":"lit","kind":"import-statement","external":true},{"path":"lit/decorators.js","kind":"import-statement","external":true},{"path":"lit/directives/ref.js","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/lit-grid/src/index.ts":{"bytes":560,"imports":[{"path":"packages/ui/lit-grid/src/dx-grid.ts","kind":"import-statement","original":"./dx-grid"}],"format":"esm"}},"outputs":{"packages/ui/lit-grid/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":23985},"packages/ui/lit-grid/dist/lib/browser/index.mjs":{"imports":[{"path":"lit","kind":"import-statement","external":true},{"path":"lit/decorators.js","kind":"import-statement","external":true},{"path":"lit/directives/ref.js","kind":"import-statement","external":true}],"exports":["DxGrid"],"entryPoint":"packages/ui/lit-grid/src/index.ts","inputs":{"packages/ui/lit-grid/src/dx-grid.ts":{"bytesInOutput":13730},"packages/ui/lit-grid/src/index.ts":{"bytesInOutput":0}},"bytes":13825}}}

package/dist/types/src/dx-grid.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+import { type Ref } from 'lit/directives/ref.js';
+export type CellValue = {
+    /**
+     * The content value
+     */
+    value: string;
+    /**
+     * If this is a merged cell, the bottomright-most of the range in numeric notation, otherwise undefined.
+     */
+    end?: string;
+    /**
+     * CSS inline styles to apply to the gridcell element
+     */
+    style?: string;
+};
+type AxisMeta = {
+    size: number;
+    description?: string;
+    resizeable?: boolean;
+};
+export type DxGridProps = Pick<DxGrid, 'cells' | 'rows' | 'columns' | 'rowDefault' | 'columnDefault'>;
+export declare class DxGrid extends LitElement {
+    rowDefault: AxisMeta;
+    columnDefault: AxisMeta;
+    rows: Record<string, AxisMeta>;
+    columns: Record<string, AxisMeta>;
+    cells: Record<string, CellValue>;
+    posInline: number;
+    posBlock: number;
+    sizeInline: number;
+    sizeBlock: number;
+    overscanInline: number;
+    overscanBlock: number;
+    binInlineMin: number;
+    binInlineMax: number;
+    binBlockMin: number;
+    binBlockMax: number;
+    visColMin: number;
+    visColMax: number;
+    visRowMin: number;
+    visRowMax: number;
+    templateColumns: string;
+    templateRows: string;
+    colSizes: Record<string, number>;
+    rowSizes: Record<string, number>;
+    resizing: null | {
+        axis: 'col' | 'row';
+        page: number;
+        size: number;
+        index: string;
+    };
+    handlePointerDown: (event: PointerEvent) => void;
+    handlePointerUp: (_event: PointerEvent) => void;
+    handlePointerMove: (event: PointerEvent) => void;
+    private colSize;
+    private rowSize;
+    private getCell;
+    observer: ResizeObserver;
+    viewportRef: Ref<HTMLDivElement>;
+    handleWheel: ({ deltaX, deltaY }: WheelEvent) => void;
+    private updateVisInline;
+    private updateVisBlock;
+    private updateVis;
+    render(): import("lit").TemplateResult<1>;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    createRenderRoot(): this;
+}
+export {};
+//# sourceMappingURL=dx-grid.d.ts.map

package/dist/types/src/dx-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-grid.d.ts","sourceRoot":"","sources":["../../../src/dx-grid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAkB,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AA+CjE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,QAAQ,GAAG;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,eAAe,CAAC,CAAC;AAOtG,qBACa,MAAO,SAAQ,UAAU;IAEpC,UAAU,EAAE,QAAQ,CAAgB;IAGpC,aAAa,EAAE,QAAQ,CAAiB;IAGxC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAM;IAGpC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAM;IAGvC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAM;IAOtC,SAAS,SAAK;IAGd,QAAQ,SAAK;IAOb,UAAU,SAAK;IAGf,SAAS,SAAK;IAOd,cAAc,SAAK;IAGnB,aAAa,SAAK;IAOlB,YAAY,SAAK;IAGjB,YAAY,SAAmB;IAG/B,WAAW,SAAK;IAGhB,WAAW,SAAmB;IAQ9B,SAAS,SAAK;IAGd,SAAS,SAAK;IAGd,SAAS,SAAK;IAGd,SAAS,SAAK;IAMd,eAAe,SAA0B;IAGzC,YAAY,SAA0B;IAOtC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAGtC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAGtC,QAAQ,EAAE,IAAI,GAAG;QAAE,IAAI,EAAE,KAAK,GAAG,KAAK,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAQ;IAE3F,iBAAiB,UAAW,YAAY,UAetC;IAEF,eAAe,WAAY,YAAY,UAErC;IAEF,iBAAiB,UAAW,YAAY,UAatC;IAMF,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,OAAO;IASf,QAAQ,iBAcL;IAEH,WAAW,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAE/C,WAAW,uBAAwB,UAAU,UAmB3C;IAEF,OAAO,CAAC,eAAe;IAkCvB,OAAO,CAAC,cAAc;IAkCtB,OAAO,CAAC,SAAS;IASR,MAAM;IA8FN,YAAY;IAgBZ,oBAAoB;IASpB,gBAAgB;CAG1B"}

package/dist/types/src/dx-grid.lit-stories.d.ts

@@ -0,0 +1,17 @@
+import './dx-grid.ts';
+import './dx-grid.pcss';
+import { type DxGridProps } from './dx-grid';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Basic: {
+    (props: DxGridProps): import("lit").TemplateResult<1>;
+    args: {
+        cells: string;
+        columnDefault: string;
+        rowDefault: string;
+        columns: string;
+    };
+};
+//# sourceMappingURL=dx-grid.lit-stories.d.ts.map

package/dist/types/src/dx-grid.lit-stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dx-grid.lit-stories.d.ts","sourceRoot":"","sources":["../../../src/dx-grid.lit-stories.ts"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AAIxB,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC;;;;AAE7C,wBAEE;AAEF,eAAO,MAAM,KAAK;YAAW,WAAW;;;;;;;CAOvC,CAAC"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,2 @@
+export { DxGrid, type DxGridProps } from './dx-grid';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@dxos/lit-grid",
+  "version": "0.6.10-main.3cfcc89",
+  "description": "A grid webcomponent using Lit",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./dx-grid.pcss": "./src/dx-grid.pcss"
+  },
+  "main": "src/index.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "lit": "^3.2.0"
+  }
+}

package/src/dx-grid.lit-stories.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import './dx-grid.ts';
+import './dx-grid.pcss';
+
+import { html, nothing } from 'lit';
+
+import { type DxGridProps } from './dx-grid';
+
+export default {
+  title: 'dx-grid',
+};
+
+export const Basic = (props: DxGridProps) => {
+  return html`<dx-grid
+    cells=${props.cells ?? nothing}
+    columnDefault=${props.columnDefault ?? nothing}
+    rowDefault=${props.rowDefault ?? nothing}
+    columns=${props.columns ?? nothing}
+  ></dx-grid>`;
+};
+
+Basic.args = {
+  cells: JSON.stringify({
+    '1,1': {
+      // end: '8,1',
+      value: 'Weekly sales report',
+    },
+  } satisfies DxGridProps['cells']),
+  columnDefault: JSON.stringify({
+    size: 180,
+    resizeable: true,
+  } satisfies DxGridProps['columnDefault']),
+  rowDefault: JSON.stringify({
+    size: 32,
+    resizeable: true,
+  } satisfies DxGridProps['rowDefault']),
+  columns: JSON.stringify({
+    0: { size: 200 },
+    1: { size: 210 },
+    2: { size: 230 },
+    3: { size: 250 },
+    4: { size: 270 },
+  } satisfies DxGridProps['columns']),
+};

package/src/dx-grid.pcss

@@ -0,0 +1,101 @@
+dx-grid {
+  display: contents;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.dx-grid {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-rows: min-content 1fr min-content;
+  font-variant-numeric: tabular-nums;
+}
+
+.dx-grid__scrollbar__thumb {
+  height: 1rem;
+  width: 1rem;
+  background: var(--dx-grid-thumb, var(--dx-separator));
+}
+
+.dx-grid__corner,
+.dx-grid__scrollbar {
+  background: var(--dx-grid-corner, var(--dx-hoverSurface));
+}
+
+.dx-grid__columnheader__content,
+.dx-grid__rowheader__content,
+.dx-grid__content {
+  display: grid;
+  gap: 1px;
+  background: var(--dx-separator);
+  inline-size: min-content;
+  block-size: min-content;
+}
+
+.dx-grid__columnheader,
+.dx-grid__rowheader,
+.dx-grid__viewport {
+  overflow: hidden;
+}
+
+.dx-grid__columnheader__content {
+  border-block-end: 2px solid var(--dx-separator);
+  grid-template-columns: repeat(99, 64px);
+}
+
+.dx-grid__rowheader__content {
+  border-inline-end: 2px solid var(--dx-separator);
+  grid-template-columns: min-content;
+  text-align: end;
+}
+
+.dx-grid {
+  [role='gridcell'], [role='columnheader'], [role='rowheader'] {
+    background: var(--dx-base);
+    padding: 2px;
+    box-sizing: border-box;
+    &[inert] {
+      visibility: hidden;
+    }
+  }
+}
+
+.dx-grid__columnheader__content,
+.dx-grid__rowheader__content {
+  & > [role='columnheader'], &> [role='rowheader'] {
+    position: relative;
+    & > button.dx-grid__resize-handle {
+      position: absolute;
+      background: transparent;
+      &:hover {
+        background: var(--dx-hoverSurface)
+      }
+    }
+  }
+}
+
+.dx-grid__columnheader__content > [role='columnheader'] > button.dx-grid__resize-handle {
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: .5rem;
+  cursor: col-resize;
+}
+
+.dx-grid__rowheader__content > [role='rowheader'] > button.dx-grid__resize-handle {
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: .5rem;
+  cursor: row-resize;
+}

package/src/dx-grid.ts

@@ -0,0 +1,479 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { LitElement, html } from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { ref, createRef, type Ref } from 'lit/directives/ref.js';
+
+/**
+ * The size in pixels of the gap between cells
+ */
+const gap = 1;
+
+/**
+ * This should be about the width of the `1` numeral so resize is triggered as the row header column’s intrinsic size
+ * changes when scrolling vertically.
+ */
+const resizeTolerance = 8;
+
+//
+// `overscan` is the number of columns or rows to render outside of the viewport
+//
+const overscanCol = 1;
+const overscanRow = 1;
+
+//
+// `size`, when suffixed with ‘row’ or ‘col’, are limits on size applied when resizing
+//
+const sizeColMin = 32;
+const sizeColMax = 1024;
+const sizeRowMin = 16;
+const sizeRowMax = 1024;
+
+/**
+ * Separator for serializing cell position vectors
+ */
+const separator = ',';
+
+//
+// A1 notation is the fallback for numbering columns and rows.
+//
+
+const colToA1Notation = (col: number): string => {
+  return (
+    (col >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(col / 26) - 1) : '') +
+    String.fromCharCode('A'.charCodeAt(0) + (col % 26))
+  );
+};
+
+const rowToA1Notation = (row: number): string => {
+  return `${row + 1}`;
+};
+
+export type CellValue = {
+  /**
+   * The content value
+   */
+  value: string;
+  /**
+   * If this is a merged cell, the bottomright-most of the range in numeric notation, otherwise undefined.
+   */
+  end?: string;
+  /**
+   * CSS inline styles to apply to the gridcell element
+   */
+  style?: string;
+};
+
+type AxisMeta = {
+  size: number;
+  description?: string;
+  resizeable?: boolean;
+};
+
+export type DxGridProps = Pick<DxGrid, 'cells' | 'rows' | 'columns' | 'rowDefault' | 'columnDefault'>;
+
+const localChId = (c0: number) => `ch--${c0}`;
+const localRhId = (r0: number) => `rh--${r0}`;
+
+const getPage = (axis: string, event: PointerEvent) => (axis === 'col' ? event.pageX : event.pageY);
+
+@customElement('dx-grid')
+export class DxGrid extends LitElement {
+  @property({ type: Object })
+  rowDefault: AxisMeta = { size: 32 };
+
+  @property({ type: Object })
+  columnDefault: AxisMeta = { size: 180 };
+
+  @property({ type: Object })
+  rows: Record<string, AxisMeta> = {};
+
+  @property({ type: Object })
+  columns: Record<string, AxisMeta> = {};
+
+  @property({ type: Object })
+  cells: Record<string, CellValue> = {};
+
+  //
+  // `pos`, short for ‘position’, is the position in pixels of the viewport from the origin.
+  //
+
+  @state()
+  posInline = 0;
+
+  @state()
+  posBlock = 0;
+
+  //
+  // `size` (when not suffixed with ‘row’ or ‘col’, see above) is the size in pixels of the viewport.
+  //
+
+  @state()
+  sizeInline = 0;
+
+  @state()
+  sizeBlock = 0;
+
+  //
+  // `overscan` is the amount in pixels to offset the grid content due to the number of overscanned columns or rows.
+  //
+
+  @state()
+  overscanInline = 0;
+
+  @state()
+  overscanBlock = 0;
+
+  //
+  // `bin`, not short for anything, is the range in pixels within which virtualization does not need to reassess.
+  //
+
+  @state()
+  binInlineMin = 0;
+
+  @state()
+  binInlineMax = this.colSize(0);
+
+  @state()
+  binBlockMin = 0;
+
+  @state()
+  binBlockMax = this.rowSize(0);
+
+  //
+  // `vis`, short for ‘visible’, is the range in numeric index of the columns or rows which should be rendered within
+  // the viewport. These start with naïve values that are updated before first contentful render.
+  //
+
+  @state()
+  visColMin = 0;
+
+  @state()
+  visColMax = 1;
+
+  @state()
+  visRowMin = 0;
+
+  @state()
+  visRowMax = 1;
+
+  //
+  // `template` is the rendered value of `grid-{axis}-template`.
+  //
+  @state()
+  templateColumns = `${this.colSize(0)}px`;
+
+  @state()
+  templateRows = `${this.rowSize(0)}px`;
+
+  //
+  // Resize state and handlers
+  //
+
+  @state()
+  colSizes: Record<string, number> = {};
+
+  @state()
+  rowSizes: Record<string, number> = {};
+
+  @state()
+  resizing: null | { axis: 'col' | 'row'; page: number; size: number; index: string } = null;
+
+  handlePointerDown = (event: PointerEvent) => {
+    const actionEl = (event.target as HTMLElement)?.closest('[data-dx-grid-action]');
+    const action = actionEl?.getAttribute('data-dx-grid-action');
+    if (action) {
+      if (action.startsWith('resize')) {
+        const [resize, index] = action.split(',');
+        const [_, axis] = resize.split('-');
+        this.resizing = {
+          axis: axis as 'col' | 'row',
+          size: axis === 'col' ? this.colSize(index) : this.rowSize(index),
+          page: getPage(axis, event),
+          index,
+        };
+      }
+    }
+  };
+
+  handlePointerUp = (_event: PointerEvent) => {
+    this.resizing = null;
+  };
+
+  handlePointerMove = (event: PointerEvent) => {
+    if (this.resizing) {
+      const delta = getPage(this.resizing.axis, event) - this.resizing.page;
+      if (this.resizing.axis === 'col') {
+        const nextSize = Math.max(sizeColMin, Math.min(sizeColMax, this.resizing.size + delta));
+        this.colSizes = { ...this.colSizes, [this.resizing.index]: nextSize };
+        this.updateVisInline();
+      } else {
+        const nextSize = Math.max(sizeRowMin, Math.min(sizeRowMax, this.resizing.size + delta));
+        this.rowSizes = { ...this.rowSizes, [this.resizing.index]: nextSize };
+        this.updateVisBlock();
+      }
+    }
+  };
+
+  //
+  // Accessors
+  //
+
+  private colSize(c: number | string) {
+    return this.colSizes?.[c] ?? this.columnDefault.size;
+  }
+
+  private rowSize(r: number | string) {
+    return this.rowSizes?.[r] ?? this.rowDefault.size;
+  }
+
+  private getCell(c: number | string, r: number | string) {
+    return this.cells[`${c}${separator}${r}`];
+  }
+
+  //
+  // Resize & reposition handlers, observer, ref
+  //
+
+  @state()
+  observer = new ResizeObserver((entries) => {
+    const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {
+      inlineSize: 0,
+      blockSize: 0,
+    };
+    if (
+      Math.abs(inlineSize - this.sizeInline) > resizeTolerance ||
+      Math.abs(blockSize - this.sizeBlock) > resizeTolerance
+    ) {
+      // console.info('[updating bounds]', 'resize', [inlineSize - this.sizeInline, blockSize - this.sizeBlock]);
+      this.sizeInline = inlineSize;
+      this.sizeBlock = blockSize;
+      this.updateVis();
+    }
+  });
+
+  viewportRef: Ref<HTMLDivElement> = createRef();
+
+  handleWheel = ({ deltaX, deltaY }: WheelEvent) => {
+    this.posInline = Math.max(0, this.posInline + deltaX);
+    this.posBlock = Math.max(0, this.posBlock + deltaY);
+    if (
+      this.posInline >= this.binInlineMin &&
+      this.posInline < this.binInlineMax &&
+      this.posBlock >= this.binBlockMin &&
+      this.posBlock < this.binBlockMax
+    ) {
+      // do nothing
+    } else {
+      // console.info(
+      //   '[updating bounds]',
+      //   'wheel',
+      //   [this.binInlineMin, this.posInline, this.binInlineMax],
+      //   [this.binBlockMin, this.posBlock, this.binBlockMax],
+      // );
+      this.updateVis();
+    }
+  };
+
+  private updateVisInline() {
+    // todo: avoid starting from zero
+    let colIndex = 0;
+    let pxInline = this.colSize(colIndex);
+
+    while (pxInline < this.posInline) {
+      colIndex += 1;
+      pxInline += this.colSize(colIndex) + gap;
+    }
+
+    this.visColMin = colIndex - overscanCol;
+
+    this.binInlineMin = pxInline - this.colSize(colIndex) - gap;
+    this.binInlineMax = pxInline + gap;
+
+    this.overscanInline =
+      [...Array(overscanCol)].reduce((acc, _, c0) => {
+        acc += this.colSize(this.visColMin + c0);
+        return acc;
+      }, 0) +
+      gap * (overscanCol - 1);
+
+    while (pxInline < this.binInlineMax + this.sizeInline) {
+      colIndex += 1;
+      pxInline += this.colSize(colIndex) + gap;
+    }
+
+    this.visColMax = colIndex + overscanCol + 1;
+
+    this.templateColumns = [...Array(this.visColMax - this.visColMin)]
+      .map((_, c0) => `${this.colSize(this.visColMin + c0)}px`)
+      .join(' ');
+  }
+
+  private updateVisBlock() {
+    // todo: avoid starting from zero
+    let rowIndex = 0;
+    let pxBlock = this.rowSize(rowIndex);
+
+    while (pxBlock < this.posBlock) {
+      rowIndex += 1;
+      pxBlock += this.rowSize(rowIndex) + gap;
+    }
+
+    this.visRowMin = rowIndex - overscanRow;
+
+    this.binBlockMin = pxBlock - this.rowSize(rowIndex) - gap;
+    this.binBlockMax = pxBlock + gap;
+
+    this.overscanBlock =
+      [...Array(overscanRow)].reduce((acc, _, r0) => {
+        acc += this.rowSize(this.visRowMin + r0);
+        return acc;
+      }, 0) +
+      gap * (overscanRow - 1);
+
+    while (pxBlock < this.binBlockMax + this.sizeBlock) {
+      rowIndex += 1;
+      pxBlock += this.rowSize(rowIndex) + gap;
+    }
+
+    this.visRowMax = rowIndex + overscanRow + 1;
+
+    this.templateRows = [...Array(this.visRowMax - this.visRowMin)]
+      .map((_, r0) => `${this.rowSize(this.visRowMin + r0)}px`)
+      .join(' ');
+  }
+
+  private updateVis() {
+    this.updateVisInline();
+    this.updateVisBlock();
+  }
+
+  //
+  // Render and other lifecycle methods
+  //
+
+  override render() {
+    const visibleCols = this.visColMax - this.visColMin;
+    const visibleRows = this.visRowMax - this.visRowMin;
+    // TODO NEXT -> ensure offset is using the right components
+    const offsetInline = this.binInlineMin - this.posInline - this.overscanInline;
+    const offsetBlock = this.binBlockMin - this.posBlock - this.overscanBlock;
+
+    return html`<div
+      role="none"
+      class="dx-grid"
+      @pointerdown=${this.handlePointerDown}
+      @pointerup=${this.handlePointerUp}
+      @pointermove=${this.handlePointerMove}
+    >
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__columnheader">
+        <div
+          role="none"
+          class="dx-grid__columnheader__content"
+          style="transform:translate3d(${offsetInline}px,0,0);grid-template-columns:${this.templateColumns};"
+        >
+          ${[...Array(visibleCols)].map((_, c0) => {
+            const c = this.visColMin + c0;
+            return html`<div
+              role="columnheader"
+              ?inert=${c < 0}
+              style="inline-size:${this.colSize(c)}px;block-size:${this.rowDefault.size}px;grid-column:${c0 + 1}/${c0 +
+              2};"
+            >
+              <span id=${localChId(c0)}>${colToA1Notation(c)}</span>
+              ${(this.columns[c]?.resizeable ?? this.columnDefault.resizeable) &&
+              html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-col,${c}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
+            </div>`;
+          })}
+        </div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__rowheader">
+        <div role="none" class="dx-grid__rowheader__content" style="transform:translate3d(0,${offsetBlock}px,0);">
+          ${[...Array(visibleRows)].map((_, r0) => {
+            const r = this.visRowMin + r0;
+            return html`<div
+              role="rowheader"
+              ?inert=${r < 0}
+              style="block-size:${this.rowSize(r)}px;grid-row:${r0 + 1}/${r0 + 2}"
+            >
+              <span id=${localRhId(r0)}>${rowToA1Notation(r)}</span>
+              ${(this.rows[r]?.resizeable ?? this.rowDefault.resizeable) &&
+              html`<button class="dx-grid__resize-handle" data-dx-grid-action=${`resize-row,${r}`}>
+                <span class="sr-only">Resize</span>
+              </button>`}
+            </div>`;
+          })}
+        </div>
+      </div>
+      <div role="none" class="dx-grid__viewport" @wheel="${this.handleWheel}" ${ref(this.viewportRef)}>
+        <div
+          role="grid"
+          class="dx-grid__content"
+          style="transform:translate3d(${offsetInline}px,${offsetBlock}px,0);grid-template-columns:${this
+            .templateColumns};grid-template-rows:${this.templateRows};"
+        >
+          ${[...Array(visibleCols)].map((_, c0) => {
+            return [...Array(visibleRows)].map((_, r0) => {
+              const c = c0 + this.visColMin;
+              const r = r0 + this.visRowMin;
+              const cell = this.getCell(c, r);
+              return html`<div
+                role="gridcell"
+                ?inert=${c < 0 || r < 0}
+                aria-rowindex=${r}
+                aria-colindex=${c}
+                data-dx-grid-action="cell"
+                style="grid-column:${c0 + 1};grid-row:${r0 + 1}"
+              >
+                ${cell?.value}
+              </div>`;
+            });
+          })}
+        </div>
+      </div>
+      <div role="none" class="dx-grid__scrollbar" aria-orientation="vertical">
+        <div role="none" class="dx-grid__scrollbar__thumb"></div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+      <div role="none" class="dx-grid__scrollbar" aria-orientation="horizontal">
+        <div role="none" class="dx-grid__scrollbar__thumb"></div>
+      </div>
+      <div role="none" class="dx-grid__corner"></div>
+    </div>`;
+  }
+
+  override firstUpdated() {
+    this.observer.observe(this.viewportRef.value!);
+    this.colSizes = Object.entries(this.columns).reduce((acc: Record<string, number>, [colId, colMeta]) => {
+      if (colMeta?.size) {
+        acc[colId] = colMeta.size;
+      }
+      return acc;
+    }, {});
+    this.rowSizes = Object.entries(this.rows).reduce((acc: Record<string, number>, [rowId, rowMeta]) => {
+      if (rowMeta?.size) {
+        acc[rowId] = rowMeta.size;
+      }
+      return acc;
+    }, {});
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    // console.log('[disconnected]', this.viewportRef.value);
+    // TODO(thure): Will this even work?
+    if (this.viewportRef.value) {
+      this.observer.unobserve(this.viewportRef.value);
+    }
+  }
+
+  override createRenderRoot() {
+    return this;
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export { DxGrid, type DxGridProps } from './dx-grid';