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

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

@@ -1,7 +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"]
+  "sources": ["../../../src/dx-grid.ts", "../../../src/position.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, state, property } from 'lit/decorators.js';\nimport { ref, createRef, type Ref } from 'lit/directives/ref.js';\n\nimport { colToA1Notation, posFromNumericNotation, rowToA1Notation } from './position';\n\nconst colSize = 64;\n\nconst rowSize = 20;\n\nconst gap = 0;\n\nexport type CellValue = {\n  /**\n   * The position (or topleft-most of the range) in numeric notation\n   */\n  pos: string;\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\n@customElement('dx-grid')\nexport class DxGrid extends LitElement {\n  @property({ type: Object })\n  values: Record<string, CellValue> = {};\n\n  @state()\n  posInline = 0;\n\n  @state()\n  posBlock = 0;\n\n  @state()\n  sizeInline = 0;\n\n  @state()\n  sizeBlock = 0;\n\n  @state()\n  cellByPosition: Record<string, string> = {};\n\n  @state()\n  observer = new ResizeObserver((entries) => {\n    const { inlineSize, blockSize } = entries?.[0]?.contentBoxSize?.[0] ?? {\n      inlineSize: 0,\n      blockSize: 0,\n    };\n    this.sizeInline = inlineSize;\n    this.sizeBlock = blockSize;\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  };\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('values')) {\n      // console.log('[computing cellByPosition]');\n      this.cellByPosition = Object.entries(this.values).reduce((acc: Record<string, string>, [id, { pos, end }]) => {\n        const { i: i1, j: j1 } = posFromNumericNotation(pos);\n        if (end) {\n          const { i: i2, j: j2 } = posFromNumericNotation(end);\n          for (let ci = i1; ci <= i2; ci += 1) {\n            for (let cj = j1; cj <= j2; cj += 1) {\n              acc[`${ci},${cj}`] = id;\n            }\n          }\n        } else {\n          acc[`${i1},${j1}`] = id;\n        }\n        return acc;\n      }, {});\n    }\n  }\n\n  private getCell(i: number, j: number) {\n    const pos = `${i},${j}`;\n    const cellId = this.cellByPosition[pos];\n    return cellId ? this.values[cellId] : undefined;\n  }\n\n  private computeExtrema() {\n    const colVisMin = Math.floor(this.posInline / (colSize + gap));\n    const colVisMax = Math.ceil((this.sizeInline + this.posInline) / (colSize + gap));\n\n    const rowVisMin = Math.floor(this.posBlock / (rowSize + gap));\n    const rowVisMax = Math.ceil((this.sizeBlock + this.posBlock) / (rowSize + gap));\n\n    const { colExtMin, colExtMax } = [...Array(rowVisMax - rowVisMin)].reduce(\n      (acc, _, j) => {\n        const colVisMinCell = this.getCell(colVisMin, j + rowVisMin);\n        if (colVisMinCell?.end) {\n          const { i: iStart } = posFromNumericNotation(colVisMinCell.pos);\n          acc.colExtMin = Math.min(acc.colExtMin, iStart);\n        }\n        const colVisMaxCell = this.getCell(colVisMax, j + rowVisMin);\n        if (colVisMaxCell?.end) {\n          const { i: iEnd } = posFromNumericNotation(colVisMaxCell.end);\n          acc.colExtMax = Math.max(acc.colExtMax, iEnd);\n        }\n        return acc;\n      },\n      { colExtMin: colVisMin, colExtMax: colVisMax },\n    );\n\n    const { rowExtMin, rowExtMax } = [...Array(colVisMax - colVisMin)].reduce(\n      (acc, _, i) => {\n        const rowVisMinCell = this.getCell(i + colVisMin, rowVisMin);\n        if (rowVisMinCell?.end) {\n          const { j: jStart } = posFromNumericNotation(rowVisMinCell.pos);\n          acc.rowExtMin = Math.min(acc.rowExtMin, jStart);\n        }\n        const rowVisMaxCell = this.getCell(i + colVisMin, rowVisMax);\n        if (rowVisMaxCell?.end) {\n          const { j: jEnd } = posFromNumericNotation(rowVisMaxCell.end);\n          acc.rowExtMax = Math.max(acc.rowExtMax, jEnd);\n        }\n        return acc;\n      },\n      { rowExtMin: rowVisMin, rowExtMax: rowVisMax },\n    );\n\n    return {\n      colVisMin,\n      colExtMin,\n      colVisMax,\n      colExtMax,\n      rowVisMin,\n      rowExtMin,\n      rowVisMax,\n      rowExtMax,\n    };\n  }\n\n  override render() {\n    const { colVisMin, colVisMax, rowVisMin, rowVisMax } = this.computeExtrema();\n\n    const visibleCols = colVisMax - colVisMin;\n    const visibleRows = rowVisMax - rowVisMin;\n\n    // TODO(thure): now compute the offset based on the extrema.\n    const offsetInline = colVisMin * colSize - this.posInline;\n    const offsetBlock = rowVisMin * rowSize - this.posBlock;\n\n    return html`<div role=\"none\" class=\"dx-grid\">\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:repeat(${visibleCols},${colSize}px);\"\n        >\n          ${[...Array(visibleCols)].map((_, i) => {\n            return html`<div\n              role=\"gridcell\"\n              style=\"inline-size:${colSize}px;block-size:${rowSize}px;grid-column:${i + 1}/${i + 2};\"\n            >\n              ${colToA1Notation(colVisMin + i)}\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((_, j) => {\n            return html`<div role=\"gridcell\" style=\"block-size:${rowSize}px;grid-row:${j + 1}/${j + 2}\">\n              ${rowToA1Notation(rowVisMin + j)}\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:repeat(${visibleCols},${colSize}px);grid-template-rows:repeat(${visibleRows},${rowSize}px);\"\n        >\n          ${[...Array(visibleCols)].map((_, i) => {\n            return [...Array(visibleRows)].map((_, j) => {\n              const posAbs = `${i + colVisMin},${j + rowVisMin}`;\n              const cellId = this.cellByPosition[posAbs];\n              const cell = cellId ? this.values[cellId] : undefined;\n              if (cell?.end) {\n                // This is a merged cell\n                if (posAbs !== cell?.pos) {\n                  // Don’t render subcells within the merge if not at the start (probably)\n                  return null;\n                } else {\n                  // Render the full merged cell\n                  const { i: iEndAbs, j: jEndAbs } = posFromNumericNotation(cell.end);\n                  return html`<div\n                    role=\"gridcell\"\n                    style=\"grid-column:${i + 1} / ${iEndAbs - colVisMin + 2};grid-row:${j + 1} / ${jEndAbs -\n                    rowVisMin +\n                    2}\"\n                  >\n                    ${cell?.value}\n                  </div>`;\n                }\n              } else {\n                return html`<div role=\"gridcell\" style=\"grid-column:${i + 1};grid-row:${j + 1}\">${cell?.value}</div>`;\n              }\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  }\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", "//\n// Copyright 2024 DXOS.org\n//\n\nexport type CellPosition = { i: number; j: number };\n\nexport type CellRange = { from: CellPosition; to?: CellPosition };\n\nexport const posEquals = (a: CellPosition | undefined, b: CellPosition | undefined) => a?.i === b?.i && a?.j === b?.j;\n\nexport const colToA1Notation = (column: number): string => {\n  return (\n    (column >= 26 ? String.fromCharCode('A'.charCodeAt(0) + Math.floor(column / 26) - 1) : '') +\n    String.fromCharCode('A'.charCodeAt(0) + (column % 26))\n  );\n};\n\nexport const rowToA1Notation = (row: number): string => {\n  return `${row + 1}`;\n};\n\nexport const posToA1Notation = (column: number, row: number): string => {\n  const columnA1 = colToA1Notation(column);\n  const rowA1 = rowToA1Notation(row);\n  return `${columnA1}${rowA1}`;\n};\n\nexport const posFromA1Notation = (notation: string): CellPosition => {\n  const match = notation.match(/([A-Z]+)(\\d+)/);\n  if (!match) {\n    throw Error('[posFromA1Notation] No match.');\n  }\n  const column = match[1].split('').reduce((acc, c) => acc * 26 + c.charCodeAt(0) - 'A'.charCodeAt(0) + 1, 0) - 1;\n  const row = parseInt(match[2], 10) - 1;\n  return { i: column, j: row };\n};\n\nexport const posFromNumericNotation = (notation: string): CellPosition => {\n  const [iStr, jStr] = notation.split(',');\n  if (!iStr || !jStr) {\n    throw Error('[posFromNumericNotation] Bad input');\n  }\n  return { i: parseInt(iStr), j: parseInt(jStr) };\n};\n\nexport const rangeToA1Notation = (range: CellRange) =>\n  [range?.from && posToA1Notation(range?.from.i, range?.from.j), range?.to && posToA1Notation(range?.to.i, range.to.j)]\n    .filter(Boolean)\n    .join(':');\n\nexport const rangeFromA1Notation = (notation: string): CellRange => {\n  const [from, to] = notation.split(':').map(posFromA1Notation);\n  return { from, to };\n};\n\nexport const inRange = (range: CellRange | undefined, pos: CellPosition): boolean => {\n  if (!range) {\n    return false;\n  }\n\n  const { from, to } = range;\n  if ((from && posEquals(from, pos)) || (to && posEquals(to, pos))) {\n    return true;\n  }\n\n  if (!from || !to) {\n    return false;\n  }\n\n  const { i, j } = pos;\n\n  const { i: c1, j: r1 } = from;\n  const { i: c2, j: r2 } = to;\n  const cMin = Math.min(c1, c2);\n  const cMax = Math.max(c1, c2);\n  const rMin = Math.min(r1, r2);\n  const rMax = Math.max(r1, r2);\n\n  return i >= cMin && i <= cMax && j >= rMin && j <= rMax;\n};\n"],
+  "mappings": "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",
+  "names": ["LitElement", "html", "customElement", "state", "property", "ref", "createRef", "colToA1Notation", "column", "String", "fromCharCode", "charCodeAt", "Math", "floor", "rowToA1Notation", "row", "posFromNumericNotation", "notation", "iStr", "jStr", "split", "Error", "i", "parseInt", "j", "colSize", "rowSize", "gap", "DxGrid", "LitElement", "values", "posInline", "posBlock", "sizeInline", "sizeBlock", "cellByPosition", "observer", "ResizeObserver", "entries", "inlineSize", "blockSize", "contentBoxSize", "viewportRef", "createRef", "handleWheel", "deltaX", "deltaY", "Math", "max", "willUpdate", "changed", "has", "Object", "reduce", "acc", "id", "pos", "end", "i", "i1", "j", "j1", "posFromNumericNotation", "i2", "j2", "ci", "cj", "getCell", "cellId", "undefined", "computeExtrema", "colVisMin", "floor", "colVisMax", "ceil", "rowVisMin", "rowVisMax", "colExtMin", "colExtMax", "Array", "_", "colVisMinCell", "iStart", "min", "colVisMaxCell", "iEnd", "rowExtMin", "rowExtMax", "rowVisMinCell", "jStart", "rowVisMaxCell", "jEnd", "render", "visibleCols", "visibleRows", "offsetInline", "offsetBlock", "html", "map", "colToA1Notation", "rowToA1Notation", "ref", "posAbs", "cell", "iEndAbs", "jEndAbs", "value", "firstUpdated", "observe", "disconnectedCallback", "unobserve", "createRenderRoot", "property", "type", "state", "customElement"]
 }

package/dist/lib/browser/meta.json

@@ -1 +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}}}
+{"inputs":{"packages/ui/lit-grid/src/position.ts":{"bytes":9203,"imports":[],"format":"esm"},"packages/ui/lit-grid/src/dx-grid.ts":{"bytes":30216,"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},{"path":"packages/ui/lit-grid/src/position.ts","kind":"import-statement","original":"./position"}],"format":"esm"},"packages/ui/lit-grid/src/index.ts":{"bytes":536,"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":17859},"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":8155},"packages/ui/lit-grid/src/position.ts":{"bytesInOutput":490},"packages/ui/lit-grid/src/index.ts":{"bytesInOutput":0}},"bytes":8821}}}

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

@@ -1,6 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import { type Ref } from 'lit/directives/ref.js';
 export type CellValue = {
+    /**
+     * The position (or topleft-most of the range) in numeric notation
+     */
+    pos: string;
     /**
      * The content value
      */
@@ -14,58 +18,22 @@ export type CellValue = {
      */
     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>;
+    values: 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;
+    cellByPosition: Record<string, string>;
     observer: ResizeObserver;
     viewportRef: Ref<HTMLDivElement>;
     handleWheel: ({ deltaX, deltaY }: WheelEvent) => void;
-    private updateVisInline;
-    private updateVisBlock;
-    private updateVis;
+    willUpdate(changed: PropertyValues<this>): void;
+    private getCell;
+    private computeExtrema;
     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

@@ -1 +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"}
+{"version":3,"file":"dx-grid.d.ts","sourceRoot":"","sources":["../../../src/dx-grid.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAkB,KAAK,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAUjE,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;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,qBACa,MAAO,SAAQ,UAAU;IAEpC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAM;IAGvC,SAAS,SAAK;IAGd,QAAQ,SAAK;IAGb,UAAU,SAAK;IAGf,SAAS,SAAK;IAGd,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAG5C,QAAQ,iBAOL;IAEH,WAAW,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAE/C,WAAW,uBAAwB,UAAU,UAG3C;IAEO,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAoBjD,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,cAAc;IAqDb,MAAM;IAoFN,YAAY;IAIZ,oBAAoB;IASpB,gBAAgB;CAG1B"}

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

@@ -1,17 +1,15 @@
 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>;
+    ({ values }: {
+        values: string;
+    }): import("lit").TemplateResult<1>;
     args: {
-        cells: string;
-        columnDefault: string;
-        rowDefault: string;
-        columns: string;
+        values: string;
     };
 };
 //# sourceMappingURL=dx-grid.lit-stories.d.ts.map

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

@@ -1 +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"}
+{"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,wBAEE;AAEF,eAAO,MAAM,KAAK;iBAAgB;QAAE,MAAM,EAAE,MAAM,CAAA;KAAE;;;;CAAiD,CAAC"}

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC"}

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

@@ -0,0 +1,18 @@
+export type CellPosition = {
+    i: number;
+    j: number;
+};
+export type CellRange = {
+    from: CellPosition;
+    to?: CellPosition;
+};
+export declare const posEquals: (a: CellPosition | undefined, b: CellPosition | undefined) => boolean;
+export declare const colToA1Notation: (column: number) => string;
+export declare const rowToA1Notation: (row: number) => string;
+export declare const posToA1Notation: (column: number, row: number) => string;
+export declare const posFromA1Notation: (notation: string) => CellPosition;
+export declare const posFromNumericNotation: (notation: string) => CellPosition;
+export declare const rangeToA1Notation: (range: CellRange) => string;
+export declare const rangeFromA1Notation: (notation: string) => CellRange;
+export declare const inRange: (range: CellRange | undefined, pos: CellPosition) => boolean;
+//# sourceMappingURL=position.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/position.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEpD,MAAM,MAAM,SAAS,GAAG;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,EAAE,CAAC,EAAE,YAAY,CAAA;CAAE,CAAC;AAElE,eAAO,MAAM,SAAS,MAAO,YAAY,GAAG,SAAS,KAAK,YAAY,GAAG,SAAS,YAAmC,CAAC;AAEtH,eAAO,MAAM,eAAe,WAAY,MAAM,KAAG,MAKhD,CAAC;AAEF,eAAO,MAAM,eAAe,QAAS,MAAM,KAAG,MAE7C,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,MAAM,OAAO,MAAM,KAAG,MAI7D,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,MAAM,KAAG,YAQpD,CAAC;AAEF,eAAO,MAAM,sBAAsB,aAAc,MAAM,KAAG,YAMzD,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAW,SAAS,WAGpC,CAAC;AAEf,eAAO,MAAM,mBAAmB,aAAc,MAAM,KAAG,SAGtD,CAAC;AAEF,eAAO,MAAM,OAAO,UAAW,SAAS,GAAG,SAAS,OAAO,YAAY,KAAG,OAwBzE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.6.10-main.3cfcc89",
+  "version": "0.6.10-main.bbdfaa4",
   "description": "A grid webcomponent using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,10 +8,10 @@
   "author": "DXOS.org",
   "exports": {
     ".": {
-      "browser": "./dist/lib/browser/index.mjs",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.cjs",
       "types": "./dist/types/src/index.d.ts"
-    },
-    "./dx-grid.pcss": "./src/dx-grid.pcss"
+    }
   },
   "main": "src/index.ts",
   "files": [

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

@@ -5,43 +5,20 @@
 import './dx-grid.ts';
 import './dx-grid.pcss';
 
-import { html, nothing } from 'lit';
-
-import { type DxGridProps } from './dx-grid';
+import { html } from 'lit';
 
 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>`;
-};
+export const Basic = ({ values }: { values: string }) => html`<dx-grid values="${values}"></dx-grid>`;
 
 Basic.args = {
-  cells: JSON.stringify({
-    '1,1': {
-      // end: '8,1',
+  values: JSON.stringify({
+    ':g1': {
+      pos: '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

@@ -2,25 +2,12 @@ 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 {
@@ -51,51 +38,24 @@ dx-grid {
 }
 
 .dx-grid__columnheader__content {
-  border-block-end: 2px solid var(--dx-separator);
+  padding-inline: 1px;
   grid-template-columns: repeat(99, 64px);
 }
 
 .dx-grid__rowheader__content {
-  border-inline-end: 2px solid var(--dx-separator);
+  padding-block: 1px;
   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__content {
+  padding: 1px;
+  grid-template-columns: repeat(99, 64px);
+  grid-template-rows: repeat(99, 20px);
 }
 
-.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 [role='gridcell'] {
+  background: var(--dx-base);
+  padding: 1px;
+  box-sizing: border-box;
 }
-
-.dx-grid__rowheader__content > [role='rowheader'] > button.dx-grid__resize-handle {
-  inset-inline: 0;
-  inset-block-end: 0;
-  block-size: .5rem;
-  cursor: row-resize;
-}