@svgrid/grid 1.1.0 → 1.1.2

package/dist/test-setup.js

@@ -1,8 +1,14 @@
 // Vitest setup. jsdom doesn't ship ResizeObserver, IntersectionObserver,
 // or the layout APIs SvGrid touches inside its mount effects. Provide
 // minimal no-op stubs so component mounting completes without crashing.
+//
+// These assign to globals/prototypes the jsdom env doesn't fully type, so
+// the targets are cast to `any`. We deliberately avoid expect-error
+// suppression directives: when a stub happens to line up with the lib types,
+// such a directive becomes "unused" and svelte-check fails the build (an
+// unused expect-error directive is itself an error).
 if (typeof globalThis.ResizeObserver === 'undefined') {
-    // @ts-expect-error - assigning to a globalThis property the env doesn't ship
+    ;
     globalThis.ResizeObserver = class {
         observe() { }
         unobserve() { }
@@ -10,7 +16,7 @@ if (typeof globalThis.ResizeObserver === 'undefined') {
     };
 }
 if (typeof globalThis.IntersectionObserver === 'undefined') {
-    // @ts-expect-error - same
+    ;
     globalThis.IntersectionObserver = class {
         observe() { }
         unobserve() { }
@@ -23,7 +29,7 @@ if (typeof globalThis.IntersectionObserver === 'undefined') {
 // jsdom's HTMLElement.scrollIntoView is a no-op; some grid code calls it
 // during the first effect. Make sure the method exists on every element.
 if (typeof Element !== 'undefined' && !Element.prototype.scrollIntoView) {
-    // @ts-expect-error - patching a missing DOM method
+    ;
     Element.prototype.scrollIntoView = function () { };
 }
 export {};

package/dist/virtualization/scroll-scaling.d.ts

@@ -8,6 +8,23 @@ export type RowScrollScaling = {
     /** Map a virtualizer logical offset back into a DOM scrollTop. */
     logicalToDom(logical: number): number;
 };
+/**
+ * Resolve the usable max element height from the two raw DOM signals.
+ *
+ * `layoutCap` is a tall probe's clamped `offsetHeight` - the height layout
+ * assigns the element. `scrollCap` is the `scrollHeight` a real `overflow:auto`
+ * container exposes for that same probe - the height the user can actually
+ * scroll through. They differ on mobile / high-DPR engines, which report a
+ * generous `offsetHeight` but then expose a SMALLER scrollable range (the
+ * physical limit is in device px, so a 3x-DPR phone has ~1/3 the CSS-px scroll
+ * cap). Trusting `offsetHeight` alone is exactly what strands the last rows of
+ * a huge grid on a phone, so we take the smaller of the two.
+ *
+ * A junk reading (<= the sanity floor, or so large the browser clearly didn't
+ * clamp) is dropped; if neither signal survives, the caller's conservative
+ * `fallback` is returned unchanged.
+ */
+export declare function resolveMaxDomHeight(layoutCap: number, scrollCap: number, fallback: number): number;
 /**
  * Build the scaling mapping for one axis.
  *

package/dist/virtualization/scroll-scaling.js

@@ -21,6 +21,41 @@ function clamp01(value) {
         return 1;
     return value;
 }
+/** Below this a reading is junk (0 from jsdom, a sub-cap layout quirk, etc). */
+const MAX_DOM_HEIGHT_SANITY_FLOOR = 100000;
+/** At/above this the browser didn't clamp (returned ~the 1e9 we asked for). */
+const MAX_DOM_HEIGHT_SANITY_CEIL = 900000000;
+/**
+ * Shave a hair off the detected cap so the spacer never sits at the exact
+ * physical edge, where sub-pixel rounding could leave the final row a touch
+ * out of reach. 0.5% is invisible at desktop caps (~33.5M -> ~33.3M) yet
+ * keeps a safety gap proportional to the cap.
+ */
+const MAX_DOM_HEIGHT_SAFETY = 0.995;
+/**
+ * Resolve the usable max element height from the two raw DOM signals.
+ *
+ * `layoutCap` is a tall probe's clamped `offsetHeight` - the height layout
+ * assigns the element. `scrollCap` is the `scrollHeight` a real `overflow:auto`
+ * container exposes for that same probe - the height the user can actually
+ * scroll through. They differ on mobile / high-DPR engines, which report a
+ * generous `offsetHeight` but then expose a SMALLER scrollable range (the
+ * physical limit is in device px, so a 3x-DPR phone has ~1/3 the CSS-px scroll
+ * cap). Trusting `offsetHeight` alone is exactly what strands the last rows of
+ * a huge grid on a phone, so we take the smaller of the two.
+ *
+ * A junk reading (<= the sanity floor, or so large the browser clearly didn't
+ * clamp) is dropped; if neither signal survives, the caller's conservative
+ * `fallback` is returned unchanged.
+ */
+export function resolveMaxDomHeight(layoutCap, scrollCap, fallback) {
+    const usable = [layoutCap, scrollCap].filter((v) => Number.isFinite(v) &&
+        v > MAX_DOM_HEIGHT_SANITY_FLOOR &&
+        v < MAX_DOM_HEIGHT_SANITY_CEIL);
+    if (usable.length === 0)
+        return fallback;
+    return Math.floor(Math.min(...usable) * MAX_DOM_HEIGHT_SAFETY);
+}
 /**
  * Build the scaling mapping for one axis.
  *

package/dist/virtualization/scroll-scaling.test.js

@@ -1,6 +1,7 @@
 import { describe, it, expect } from 'vitest';
-import { createRowScrollScaling } from './scroll-scaling';
+import { createRowScrollScaling, resolveMaxDomHeight } from './scroll-scaling';
 const VIEWPORT = 600;
+const FALLBACK = 8000000;
 describe('createRowScrollScaling - inert (content fits under the cap)', () => {
     // 1M rows * 18px = 18M, under a 33.5M (Chrome) cap -> no scaling.
     const s = createRowScrollScaling(18000000, 33554400, VIEWPORT);
@@ -62,6 +63,46 @@ describe('createRowScrollScaling - active (content exceeds the cap)', () => {
         }
     });
 });
+describe('resolveMaxDomHeight - picks the smaller, real scrollable cap', () => {
+    it('keeps the desktop cap when both signals agree', () => {
+        // Chrome ~33.5M; offsetHeight and scrollHeight match. 0.5% safety shave.
+        const cap = resolveMaxDomHeight(33554400, 33554400, FALLBACK);
+        expect(cap).toBeLessThan(33554400);
+        expect(cap).toBeGreaterThan(33000000);
+    });
+    it('uses the SCROLL cap when a phone over-reports offsetHeight', () => {
+        // High-DPR mobile: layout says 24M, but the container only scrolls ~6M.
+        // Trusting offsetHeight is exactly what stranded the last rows.
+        const cap = resolveMaxDomHeight(24000000, 6000000, FALLBACK);
+        expect(cap).toBeLessThanOrEqual(6000000);
+        expect(cap).toBeGreaterThan(5900000);
+    });
+    it('shaves a safety margin so the spacer never sits at the exact edge', () => {
+        const cap = resolveMaxDomHeight(10000000, 10000000, FALLBACK);
+        expect(cap).toBeLessThan(10000000);
+    });
+    it('falls back when both readings are junk (jsdom returns 0)', () => {
+        expect(resolveMaxDomHeight(0, 0, FALLBACK)).toBe(FALLBACK);
+    });
+    it('falls back when the browser did not clamp (returned ~1e9)', () => {
+        expect(resolveMaxDomHeight(1000000000, 1000000000, FALLBACK)).toBe(FALLBACK);
+    });
+    it('ignores a junk signal but trusts the valid one', () => {
+        // offsetHeight unclamped/garbage, scrollHeight is the real cap.
+        const cap = resolveMaxDomHeight(1000000000, 5000000, FALLBACK);
+        expect(cap).toBeLessThanOrEqual(5000000);
+        expect(cap).toBeGreaterThan(4900000);
+    });
+    it('feeds straight into the scaler so the last row stays reachable', () => {
+        const maxDom = resolveMaxDomHeight(24000000, 6000000, FALLBACK);
+        const trueTotal = 500000 * 32; // 16M px of rows, over the phone cap
+        const s = createRowScrollScaling(trueTotal, maxDom, VIEWPORT);
+        expect(s.active).toBe(true);
+        expect(s.domTotal).toBeLessThanOrEqual(maxDom);
+        const domMax = s.domTotal - VIEWPORT;
+        expect(s.domToLogical(domMax)).toBeCloseTo(trueTotal - VIEWPORT, 0);
+    });
+});
 describe('createRowScrollScaling - edge cases', () => {
     it('handles an empty grid without dividing by zero', () => {
         const s = createRowScrollScaling(0, 17895697, VIEWPORT);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -60,6 +60,7 @@
     "@vitest/coverage-v8": "^4.1.5",
     "eslint-plugin-svelte": "^3.17.1",
     "jsdom": "^29.1.1",
+    "publint": "^0.3.21",
     "svelte": "^5.55.5",
     "svelte-check": "^4.4.6"
   },

package/src/FlexRender.svelte

@@ -1,96 +1,96 @@
-<script
-  lang="ts"
-  generics="TData extends RowData"
->
-  import { isFunction } from './core'
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from './render-component'
-  import type {
-    Cell,
-    CellContext,
-    ColumnDefTemplate,
-    Header,
-    HeaderContext,
-    RowData,
-  } from './core'
-
-  type Props =
-    | {
-        content?: ColumnDefTemplate<
-          | HeaderContext<TData>
-          | CellContext<TData>
-        >
-        context:
-          | HeaderContext<TData>
-          | CellContext<TData>
-        cell?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        cell: Cell<TData>
-        content?: never
-        context?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        header: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        footer?: never
-      }
-    | {
-        footer: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        header?: never
-      }
-
-  let props: Props = $props()
-
-  const resolved = $derived.by(() => {
-    if ('cell' in props && props.cell) {
-      return {
-        content: props.cell.column.columnDef.cell,
-        context: props.cell.getContext(),
-      }
-    }
-    if ('header' in props && props.header) {
-      return {
-        content: props.header.column.columnDef.header,
-        context: props.header.getContext(),
-      }
-    }
-    if ('footer' in props && props.footer) {
-      return {
-        content: props.footer.column.columnDef.footer,
-        context: props.footer.getContext(),
-      }
-    }
-    return {
-      content: props.content,
-      context: props.context,
-    }
-  })
-
-  const result = $derived(
-    isFunction(resolved.content)
-      ? resolved.content(resolved.context as any)
-      : undefined,
-  )
-</script>
-
-{#if typeof resolved.content === 'string'}
-  {resolved.content}
-{:else if result instanceof RenderComponentConfig}
-  <result.component {...result.props} />
-{:else if result instanceof RenderSnippetConfig}
-  {@render result.snippet(result.params)}
-{:else if result !== undefined}
-  {result}
-{/if}
+<script
+  lang="ts"
+  generics="TData extends RowData"
+>
+  import { isFunction } from './core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+  } from './core'
+
+  type Props =
+    | {
+        content?: ColumnDefTemplate<
+          | HeaderContext<TData>
+          | CellContext<TData>
+        >
+        context:
+          | HeaderContext<TData>
+          | CellContext<TData>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TData>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}