@dxos/lit-grid 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@dxos/lit-grid",
-  "version": "0.8.4-main.fffef41",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "A grid Web Component using Lit",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": [
+    "*.css",
+    "*.pcss"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -23,23 +30,19 @@
   },
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "dist/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "src",
     "dist"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@dxos/random": "0.8.4-main.fffef41",
-    "@dxos/test-utils": "0.8.4-main.fffef41"
+    "@dxos/random": "0.8.4-staging.60fe92afc8",
+    "@dxos/test-utils": "0.8.4-staging.60fe92afc8"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/dx-grid-axis-resize-handle.pcss

@@ -7,24 +7,24 @@ dx-grid-axis-resize-handle {
   background: transparent;
   z-index: 2;
   &:hover {
-    background: var(--dx-grid-resizeHandleHover, var(--dx-hoverSurface));
+    background: var(--color-hover-surface);
   }
   &[data-dx-grid-axis='col'] {
     inset-block: 0;
     inset-inline-end: 0;
-    inline-size: .5rem;
+    inline-size: 0.5rem;
     cursor: col-resize;
   }
   &[data-dx-grid-axis='row'] {
     inset-inline: 0;
     inset-block-end: 0;
-    block-size: .5rem;
+    block-size: 0.5rem;
     cursor: row-resize;
   }
   &:focus {
     outline: none;
   }
   &:focus-visible {
-    background: var(--dx-grid-resizeHandleFocus, var(--dx-accentSurface));
+    background: var(--color-accent-bg);
   }
 }

package/src/dx-grid-multiselect-cell.pcss

@@ -1,8 +1,10 @@
+@reference "../../ui-theme/src/main.css";
+
 dx-grid-multiselect-cell {
   display: contents;
 }
 
-.dx-grid__cell__multiselect{
+.dx-grid__cell__multiselect {
   display: flex;
   flex-flow: row nowrap;
   gap: 2px;
@@ -14,19 +16,19 @@ dx-grid-multiselect-cell {
     white-space: nowrap;
     text-overflow: ellipsis;
     &.dx-grid__cell__multiselect__value {
-      @apply bs-full border border-separator text-xs font-semibold pli-2 plb-0.5 rounded cursor-default text-neutral-800 dark:text-neutral-150
+      @apply h-full border border-separator text-xs font-semibold px-2 py-0.5 rounded cursor-default text-neutral-800 dark:text-neutral-200;
     }
     &.dx-grid__cell__multiselect__placeholder {
       @apply text-description;
     }
   }
-  & > .dx-grid__cell__multiselect__separator{
+  & > .dx-grid__cell__multiselect__separator {
     flex: 1 0 0;
   }
   & > svg {
     flex: 0 0 auto;
-    margin-block: .25em;
+    margin-block: 0.25em;
     inline-size: 1em;
     block-size: 1em;
   }
-}
+}

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

@@ -3,15 +3,13 @@
 //
 
 import '@dxos-theme';
-
 import './dx-grid.ts';
 import './dx-grid.pcss';
-
 import './dx-grid-multiselect-cell.ts';
 
 import { html, nothing } from 'lit';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { defaultRowSize } from './defs.js';
 import { type DxGridFrozenPlane, type DxGridPlaneCells, type DxGridProps } from './types';
@@ -39,7 +37,7 @@ const initialLabels = {
     '0,0': { value: '', resizeHandle: 'col' },
   },
   frozenColsStart: [...Array(64)].reduce((acc, _, i) => {
-    acc[`0,${i}`] = { value: rowToA1Notation(i), className: 'text-end pie-1', resizeHandle: 'row' };
+    acc[`0,${i}`] = { value: rowToA1Notation(i), className: 'text-end pe-1', resizeHandle: 'row' };
     return acc;
   }, {}),
   frozenRowsStart: [...Array(12)].reduce((acc, _, i) => {
@@ -53,7 +51,7 @@ Basic.args = {
     grid: {
       '1,1': {
         // end: '8,1',
-        value: faker.lorem.paragraphs(5),
+        value: random.lorem.paragraphs(5),
       },
       '2,2': {
         value: '',

package/src/dx-grid.pcss

@@ -4,10 +4,14 @@
 @layer dx-tokens {
   :root {
     --dx-grid-cell-padding-block: 0.2rem;
-    --dx-grid-cell-content-padding-block: calc(var(--dx-grid-cell-padding-block) - var(--dx-gridFocusIndicatorWidth));
+    --dx-grid-cell-content-padding-block: calc(
+      var(--dx-grid-cell-padding-block) - var(--dx-grid-focus-indicator-width)
+    );
     --dx-grid-cell-editor-padding-block: var(--dx-grid-cell-content-padding-block);
     --dx-grid-cell-padding-inline: 0.25rem;
-    --dx-grid-cell-content-padding-inline: calc(var(--dx-grid-cell-padding-inline) - var(--dx-gridFocusIndicatorWidth));
+    --dx-grid-cell-content-padding-inline: calc(
+      var(--dx-grid-cell-padding-inline) - var(--dx-grid-focus-indicator-width)
+    );
     --dx-grid-cell-editor-padding-inline: var(--dx-grid-cell-content-padding-inline);
   }
 }
@@ -15,8 +19,13 @@
 @layer dx-components {
   dx-grid {
     display: contents;
-    --dx-grid-gap: 1px;
-    --dx-plane-gap: 1px;
+    /*
+     * Cells touch edge-to-edge; lines come from each cell's border-right /
+     * border-bottom. Setting either gap to a non-zero value re-introduces the
+     * doubled-line artifact at plane seams.
+     */
+    --dx-grid-gap: 0;
+    --dx-plane-gap: 0;
   }
 
   .dx-grid {
@@ -33,8 +42,6 @@
 
     touch-action: none;
     user-select: none;
-
-    background: var(--dx-grid-lines, var(--dx-gridLine));
   }
 
   .dx-grid__plane--frozen-row,
@@ -54,7 +61,7 @@
       position: absolute;
       inset: 0;
       pointer-events: none;
-      border: var(--dx-gridFocusIndicatorWidth) solid var(--dx-gridFocusIndicatorColor);
+      border: var(--dx-grid-focus-indicator-width) solid var(--color-focus-ring);
     }
   }
 
@@ -67,15 +74,28 @@
   }
 
   .dx-grid {
-    --dx-grid-cell-surface: var(--dx-grid-base, var(--dx-baseSurface));
+    --grid-cell-surface: var(--color-grid-surface);
+    --grid-cell-fg: var(--color-grid-fg);
 
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      background: var(--dx-grid-cell-surface);
+      background: var(--grid-cell-surface);
+      color: var(--grid-cell-fg);
       cursor: pointer;
       position: relative;
 
+      /*
+       * Paint grid lines via inset box-shadow rather than border so the cell's
+       * content-box equals its border-box. This lets `.dx-grid__cell__content`
+       * (with block-size/inline-size: 100%) fill the cell exactly — including
+       * the right/bottom edges. When focused, the cell-content's own border
+       * (focus ring) then aligns with the grid lines pixel-for-pixel.
+       */
+      box-shadow:
+        inset calc(-1 * var(--dx-grid-focus-indicator-width)) 0 0 var(--color-grid-line),
+        inset 0 calc(-1 * var(--dx-grid-focus-indicator-width)) 0 var(--color-grid-line);
+
       &[aria-readonly='true'] {
         cursor: default;
       }
@@ -98,10 +118,11 @@
         white-space: nowrap;
         block-size: 100%;
         position: relative;
-        border: var(--dx-gridFocusIndicatorWidth) solid transparent;
+        border: var(--dx-grid-focus-indicator-width) solid transparent;
         border-radius: 2px;
 
-        &:has(.dx-tag), &:has(dx-tag-picker-item) {
+        &:has(.dx-tag),
+        &:has(dx-tag-picker-item) {
           text-overflow: clip;
           line-height: 0;
           --dx-grid-cell-content-padding-inline: 1px;
@@ -110,7 +131,7 @@
       }
 
       &.dx-grid__cell--commented {
-        background: var(--dx-grid-commented, var(--dx-gridCommented));
+        background: var(--color-grid-comment);
       }
     }
 
@@ -119,10 +140,12 @@
       [role='columnheader'],
       [role='rowheader'] {
         &[aria-selected] {
-          --dx-grid-cell-surface: var(--dx-gridSelectionOverlay);
+          --grid-cell-surface: var(--color-grid-selection-surface);
+          --grid-cell-fg: var(--color-grid-selection-fg);
 
           &:focus:not([aria-readonly='true']),
-          &:focus-visible, &:focus-within {
+          &:focus-visible,
+          &:focus-within {
             & > .dx-grid__cell__content {
               background: transparent;
             }
@@ -140,7 +163,7 @@
     }
 
     &:has(.dx-grid__row--cta__cell:hover) .dx-grid__row--cta__cell {
-      background: var(--dx-hoverOverlay);
+      background: var(--color-grid-highlight);
     }
   }
 
@@ -149,14 +172,19 @@
     [role='gridcell'],
     [role='columnheader'],
     [role='rowheader'] {
-      &:not([data-focus-unfurl="false"]):not(.dx-grid__cell--no-focus-unfurl) {
+      &:not([data-focus-unfurl='false']):not(.dx-grid__cell--no-focus-unfurl) {
         &:focus,
         &:focus-within {
           & > .dx-grid__cell__content {
-            min-block-size: 100%;
-            block-size: min-content;
-            max-block-size: min(12em, 50vh);
-
+            /*
+             * Inline (horizontal) unfurl: cell-content can grow horizontally
+             * to show wider content. Block-size stays clamped to the cell
+             * height so the focus ring aligns with the bottom grid line —
+             * `block-size: min-content` would let cell-content overshoot the
+             * cell when the content's natural height (line-height + padding +
+             * border) exceeds the cell track size by even a fraction of a
+             * pixel, pushing the focus ring's bottom edge below the grid line.
+             */
             min-inline-size: 100%;
             inline-size: min-content;
             max-inline-size: min(60ch, 90vw);
@@ -165,23 +193,20 @@
             scrollbar-width: thin;
             overscroll-behavior: contain;
 
-            white-space: normal;
-            hyphens: auto;
-            overflow-wrap: break-word;
-
             z-index: 1;
 
-            background: var(--dx-grid-cell-surface);
+            background: var(--grid-cell-surface);
+            color: var(--grid-cell-fg);
           }
 
           &:not([aria-readonly='true']) > .dx-grid__cell__content {
-            border-color: var(--dx-gridFocusIndicatorColor);
+            border-color: var(--color-focus-ring);
           }
         }
       }
 
       &:focus-visible > .dx-grid__cell__content {
-        border-color: var(--dx-gridFocusIndicatorColor);
+        border-color: var(--color-focus-ring);
       }
     }
   }
@@ -192,8 +217,8 @@
     hyphens: auto;
     overflow-wrap: break-word;
 
-    background: var(--dx-grid-base, var(--dx-baseSurface));
-    border: var(--dx-gridFocusIndicatorWidth) solid var(--dx-gridFocusIndicatorColor);
+    background: var(--dx-grid-base, var(--color-base-surface));
+    border: var(--dx-grid-focus-indicator-width) solid var(--color-focus-ring);
     border-radius: 2px;
 
     --dx-grid-cell-editor-max-block-size: min(12em, 50vh);
@@ -204,7 +229,8 @@
     inline-size: min-content;
     max-inline-size: var(--dx-grid-cell-editor-max-inline-size);
 
-    &:has(.dx-tag), &:has(dx-tag-picker-item) {
+    &:has(.dx-tag),
+    &:has(dx-tag-picker-item) {
       text-overflow: clip;
       line-height: 0;
       --dx-grid-cell-editor-padding-inline: 1px;
@@ -218,7 +244,7 @@
     [role='columnheader'],
     [role='rowheader'] {
       &[data-dx-active]:not([aria-readonly='true']) > .dx-grid__cell__content {
-        border-color: var(--dx-gridFocusIndicatorColor);
+        border-color: var(--color-focus-ring);
       }
     }
   }
@@ -246,7 +272,7 @@
       inline-size: 0;
       block-size: 0;
       border-inline-start: 0.5em solid transparent;
-      border-block-start: 0.5em solid var(--dx-warningText);
+      border-block-start: 0.5em solid var(--color-warning-text);
       z-index: 1;
     }
   }

package/src/dx-grid.ts

@@ -2,6 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
+import './dx-grid-axis-resize-handle';
+
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { type Ref, createRef, ref } from 'lit/directives/ref.js';
@@ -9,7 +11,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { html as staticHtml, unsafeStatic } from 'lit/static-html.js';
 
 import { defaultColSize, defaultRowSize, focusUnfurlDefault } from './defs';
-import './dx-grid-axis-resize-handle';
 import {
   DxAxisResize,
   type DxAxisResizeInternal,
@@ -1476,9 +1477,7 @@ export class DxGrid extends LitElement {
           .split(' ')
           .filter((value) => value)
           .map(
-            // TODO(burdon): Consistent camelCase?
-            (activeRef) =>
-              `[data-refs~="${activeRef}"] { background: var(--dx-grid-commented-active, var(--dx-gridCommentedActive)) !important; }`,
+            (activeRef) => `[data-refs~="${activeRef}"] { background: var(--color-grid-comment-active) !important; }`,
           )
           .join('\n')}
       </style>

package/src/playwright/dx-grid.spec.ts

@@ -12,8 +12,9 @@ import { toPlaneCellIndex } from '../util';
 
 const gridPlaneCellSize = 31;
 const gap = 1;
-const nCols = 9;
-const nRows = 7;
+// The spec viewport fits one extra column/row beyond the nominal grid plane size.
+const nCols = 10;
+const nRows = 8;
 
 test.describe('dx-grid', () => {
   let page: Page;
@@ -23,8 +24,8 @@ test.describe('dx-grid', () => {
     const setup = await setupPage(browser, {
       url: storybookUrl('dx-grid--spec', 9002),
       viewportSize: {
-        width: (gridPlaneCellSize + gap) * (nCols + 1.5),
-        height: (gridPlaneCellSize + gap) * (nRows + 1.5),
+        width: (gridPlaneCellSize + gap) * (nCols + 0.5),
+        height: (gridPlaneCellSize + gap) * (nRows + 0.5),
       }, // 336 x 272
     });
     page = setup.page;
@@ -46,8 +47,8 @@ test.describe('dx-grid', () => {
     // Now pan by wheel to the center point of the cell one right and one down from the origin cell of the grid plane.
     await grid.panByWheel(gridPlaneCellSize * 1.5 + gap, gridPlaneCellSize * 1.5 + gap);
 
-    // Confirm that the grid plane is showing only the cells that would be visible.
-    await grid.expectVirtualizationResult(nCols + 1, nRows + 1, 1, 1);
+    // Pan shifts the viewport by one cell; visible cell counts stay the same.
+    await grid.expectVirtualizationResult(nCols, nRows, 1, 1);
   });
 
   test('mouse access', async () => {

package/src/playwright/playwright.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
   ...e2ePreset(import.meta.dirname),
   // TODO(wittjosiah): Avoid hard-coding ports.
   webServer: {
-    command: 'moon run lit-storybook:serve-e2e -- --port=9002',
+    command: 'pnpm storybook dev --ci --quiet --port=9002 --config-dir=.storybook',
     port: 9002,
     reuseExistingServer: false,
   },

package/src/util.ts

@@ -63,9 +63,11 @@ export const rowToA1Notation = (row: number): string => {
 };
 
 /**
- * The size in pixels of the gap between cells
+ * The size in pixels of the gap between cells.
+ * Must match `--dx-grid-gap` / `--dx-plane-gap` in `dx-grid.pcss`. Cells
+ * paint their own borders edge-to-edge, so this is 0.
  */
-export const gap = 1;
+export const gap = 0;
 
 /**
  * ResizeObserver notices even subpixel changes, only respond to changes of at least 1px.