@astronox/core 0.4.3 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
   "license": "MIT",
   "keywords": [

package/src/composition/Grid/Grid.css

@@ -103,6 +103,31 @@
   grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
 }
 
+.grid[data-layout='content-sidebar']:where(
+    :has(> [data-composition='grid-item'][data-position='sticky'])
+  ) {
+  --grid-sticky-viewport-block-size: calc(
+    100vh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+  );
+  --grid-sticky-viewport-block-size: calc(
+    100dvh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+  );
+  --grid-sticky-peer-position: sticky;
+  --grid-sticky-peer-inset-block-start: var(--nox-layout-gap);
+  --table-progressive-runway-block-size: var(--grid-sticky-viewport-block-size);
+
+  min-block-size: var(--grid-sticky-viewport-block-size);
+}
+
+.grid[data-layout='content-sidebar']:where(
+    :has(> [data-composition='grid-item'][data-position='sticky'])
+  )
+  > [data-composition='grid-item'][data-position='static']
+  > .grid-item__content {
+  position: var(--grid-sticky-peer-position);
+  inset-block-start: var(--grid-sticky-peer-inset-block-start);
+}
+
 .grid[data-rows] {
   grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
 }
@@ -112,6 +137,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='sm'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 
@@ -164,6 +192,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='md'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 
@@ -216,6 +247,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='lg'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 
@@ -268,6 +302,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='xl'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 

package/src/patterns/Table/Table.css

@@ -49,10 +49,7 @@
 
 .table[data-table-sticky-header]:has([data-sticky-surface])
   [data-table-header] {
-  top: var(
-    --surface-group-sticky-occlusion-size,
-    calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
-  );
+  top: calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size));
 }
 
 @container nox-table (width < 32rem) {
@@ -63,10 +60,7 @@
 
   .table[data-table-sticky-header]:has([data-sticky-surface])
     [data-table-header] {
-    top: var(
-      --surface-group-sticky-occlusion-size,
-      calc(var(--nox-layout-gap) + var(--nox-section-compact-block-size))
-    );
+    top: calc(var(--nox-layout-gap) + var(--nox-section-compact-block-size));
   }
 }
 

package/src/patterns/Table/TableBody.astro

@@ -55,23 +55,6 @@ const stateMessage =
   data-tooltip-boundary
   data-tone={dataTone}
 >
-  <div
-    class="table-body__initial-skeleton"
-    data-table-initial-skeleton
-    aria-hidden="true"
-  >
-    {
-      columns.map((column) => (
-        <div
-          class="table-skeleton__cell"
-          data-align={getTableColumnAlignment(column)}
-          data-table-column-role={column.role}
-        >
-          <span class="table-skeleton__placeholder" />
-        </div>
-      ))
-    }
-  </div>
   <table class="table-body__table">
     <caption class="table-body__visually-hidden">{caption}</caption>
     <thead class="table-body__visually-hidden">

package/src/patterns/Table/TablePagination.css

@@ -49,13 +49,19 @@
   position: relative;
   display: block;
   overflow: visible;
-  block-size: 0;
-  min-block-size: 0;
+  block-size: var(--table-progressive-runway-block-size, 0px);
+  min-block-size: var(--table-progressive-runway-block-size, 0px);
   border: 0;
   border-radius: 0;
   background: transparent;
 }
 
+.table-pagination[data-table-progressive-enhanced='true']
+  .table-pagination__sentinel {
+  inset-block-start: 0;
+  inset-block-end: auto;
+}
+
 .table-pagination[data-table-progressive-enhanced='true']
   .table-pagination__content {
   block-size: 0;
@@ -76,7 +82,8 @@
   .table-pagination__link:focus-visible {
   z-index: 1;
   inset-inline: 0;
-  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-block-end: auto;
   display: grid;
   overflow: visible;
   width: auto;

package/src/patterns/Table/TableSkeleton.css

@@ -7,23 +7,6 @@
   border-block-start: 0;
 }
 
-.table-body__initial-skeleton {
-  display: none;
-  min-width: 0;
-  min-height: var(--table-row-min-block-size);
-  grid-template-columns: var(--table-column-template);
-}
-
-[data-nox-table-enhanced]
-  .table:is(
-    [data-table-loading-state='pending'],
-    [data-table-loading-state='refreshing']
-  )
-  .table-body:not(:has(.table-skeleton__row))
-  > .table-body__initial-skeleton {
-  display: grid;
-}
-
 .table-skeleton__row + .table-skeleton__row,
 [data-nox-table-enhanced]
   .table[data-table-loading-state='appending']
@@ -34,6 +17,9 @@
 
 [data-nox-table-enhanced]
   .table[data-table-loading-state='pending']
+  .table-body__row[data-table-row],
+[data-nox-table-enhanced]
+  .table[data-table-loading-state='refreshing']
   .table-body__row[data-table-row] {
   display: none;
 }
@@ -97,11 +83,6 @@
   min-height: var(--table-index-row-block-size);
 }
 
-.table[data-table-layout='index'] .table-body__initial-skeleton {
-  block-size: var(--table-index-row-block-size);
-  min-height: var(--table-index-row-block-size);
-}
-
 @media (prefers-reduced-motion: no-preference) {
   .table-skeleton__placeholder {
     animation: table-skeleton-pulse 1.4s ease-in-out infinite;
@@ -119,8 +100,7 @@
 }
 
 @container (width < 36rem) {
-  .table-skeleton__row,
-  .table-body__initial-skeleton {
+  .table-skeleton__row {
     min-height: var(--table-row-narrow-min-block-size);
   }
 }

package/src/patterns/Table/tableProgressiveController.ts

@@ -3,7 +3,6 @@ import type {
   TableProgressiveModel,
 } from '../../display/contracts';
 import { tableProgressiveBatchSize } from '../../display/tableProgressive';
-import { mutateTablePreservingScroll } from './tableScrollPosition';
 
 const initializedAttribute = 'data-table-progressive-initialized';
 
@@ -152,8 +151,6 @@ export function initTableProgressive(root: HTMLElement): () => void {
   let disposed = false;
   let generation = 0;
   let prepared = false;
-  let retainedWindowSize = Math.max(batchSize, getRows(activeRowsRoot).length);
-  let scheduledRenderFrame: number | null = null;
 
   registerRows(getRows(activeRowsRoot));
 
@@ -184,11 +181,8 @@ export function initTableProgressive(root: HTMLElement): () => void {
       activeSkeletonTemplate.content.querySelectorAll<HTMLElement>(
         '[data-table-skeleton-row]',
       ),
-    );
-    if (candidates.length === 0) return;
-    skeletonRows = Array.from({ length: count }, (_, index) =>
-      document.importNode(candidates[index % candidates.length]!, true),
-    );
+    ).slice(0, count);
+    skeletonRows = candidates.map((row) => document.importNode(row, true));
     insertBeforeEmpty(activeRowsRoot, empty, skeletonRows);
   }
 
@@ -210,21 +204,6 @@ export function initTableProgressive(root: HTMLElement): () => void {
     );
   }
 
-  function replaceRows(rows: readonly HTMLElement[]): void {
-    for (const row of rows) row.hidden = false;
-    mutateTablePreservingScroll(root, () => {
-      removeSkeleton();
-      detachRenderedRows();
-      insertBeforeEmpty(activeRowsRoot, empty, rows);
-    });
-    root.dispatchEvent(
-      new CustomEvent<TableRowsAppendedDetail>('table:rows-appended', {
-        bubbles: true,
-        detail: { rows },
-      }),
-    );
-  }
-
   function updateEmptyState(): void {
     if (empty) empty.hidden = results.length > 0;
   }
@@ -307,12 +286,10 @@ export function initTableProgressive(root: HTMLElement): () => void {
       TableLoadingState,
       'pending' | 'refreshing' | 'appending'
     > = 'appending',
-    requestedCount = batchSize,
-    replace = false,
   ): Promise<void> {
     if (request || disposed || cursor >= results.length) return;
 
-    const target = results.slice(cursor, cursor + requestedCount);
+    const target = results.slice(cursor, cursor + batchSize);
     if (target.length === 0) {
       removeSkeleton();
       updatePagination();
@@ -328,9 +305,7 @@ export function initTableProgressive(root: HTMLElement): () => void {
       request = activeRequest;
       setPaginationState(activePagination, activeStatus, 'loading');
       updateTableState(loadingState);
-      if (loadingState === 'appending' || skeletonRows.length === 0) {
-        addSkeleton(target.length);
-      }
+      addSkeleton(target.length);
 
       try {
         await loadSources(missing, activeRequest.signal);
@@ -361,16 +336,9 @@ export function initTableProgressive(root: HTMLElement): () => void {
       return;
     }
 
-    if (replace) replaceRows(rows as HTMLElement[]);
-    else {
-      removeSkeleton();
-      appendRows(rows as HTMLElement[]);
-    }
+    removeSkeleton();
+    appendRows(rows as HTMLElement[]);
     cursor += target.length;
-    retainedWindowSize = Math.max(
-      retainedWindowSize,
-      getRows(activeRowsRoot).length,
-    );
     updatePagination();
     updateTableState('ready');
   }
@@ -435,48 +403,23 @@ export function initTableProgressive(root: HTMLElement): () => void {
     offset: number,
     state: Extract<TableLoadingState, 'pending' | 'refreshing'>,
   ): void {
-    retainedWindowSize = Math.max(
-      retainedWindowSize,
-      getRows(activeRowsRoot).length,
-    );
     generation += 1;
     request?.abort();
     request = null;
-    if (scheduledRenderFrame !== null) {
-      window.cancelAnimationFrame(scheduledRenderFrame);
-      scheduledRenderFrame = null;
-    }
-    observer.disconnect();
+    activePagination.hidden = false;
     updateTableState(state);
-    setPaginationState(activePagination, activeStatus, 'loading');
-    if (empty) empty.hidden = true;
-    mutateTablePreservingScroll(root, () => {
-      detachRenderedRows();
-      addSkeleton(retainedWindowSize);
-    });
-
+    addSkeleton(batchSize);
+    detachRenderedRows();
     applyQuery();
     cursor = Math.min(offset, results.length);
-    const activeGeneration = generation;
-    scheduledRenderFrame = window.requestAnimationFrame(() => {
-      scheduledRenderFrame = window.requestAnimationFrame(() => {
-        scheduledRenderFrame = null;
-        if (disposed || generation !== activeGeneration) return;
-
-        updateEmptyState();
-        if (results.length === 0) {
-          replaceRows([]);
-          updatePagination();
-          updateTableState('empty');
-          return;
-        }
-        void renderNextBatch(
-          state,
-          Math.min(retainedWindowSize, results.length - cursor),
-          true,
-        );
-      });
-    });
+    updateEmptyState();
+    if (results.length === 0) {
+      removeSkeleton();
+      updatePagination();
+      updateTableState('empty');
+      return;
+    }
+    void renderNextBatch(state);
   }
 
   function refresh(): void {
@@ -492,10 +435,6 @@ export function initTableProgressive(root: HTMLElement): () => void {
     destroy() {
       disposed = true;
       request?.abort();
-      if (scheduledRenderFrame !== null) {
-        window.cancelAnimationFrame(scheduledRenderFrame);
-        scheduledRenderFrame = null;
-      }
       observer.disconnect();
       removeSkeleton();
       activePagination.hidden = !fallbackLink;

package/src/patterns/Table/tableSortController.ts

@@ -4,7 +4,6 @@ import {
   setTableProgressiveSort,
   updateTableProgressiveEntry,
 } from './tableProgressiveController';
-import { mutateTablePreservingScroll } from './tableScrollPosition';
 
 type SortDirection = 'ascending' | 'descending';
 type SortType = 'number' | 'text';
@@ -97,11 +96,9 @@ export function initTableSort(root: HTMLElement): () => void {
     orderDirty = activeState !== null;
     if (rows.every((row, index) => row === sortedRows[index])) return;
 
-    mutateTablePreservingScroll(root, () => {
-      const fragment = document.createDocumentFragment();
-      for (const row of sortedRows) fragment.append(row);
-      rowsRoot.prepend(fragment);
-    });
+    const fragment = document.createDocumentFragment();
+    for (const row of sortedRows) fragment.append(row);
+    rowsRoot.prepend(fragment);
   };
 
   const scheduleSort = (): void => {

package/src/patterns/Table/tableScrollPosition.ts

@@ -1,41 +0,0 @@
-type ScrollRestoreState = {
-  frame: number;
-  originalOverflowAnchor: string;
-  scrollRoot: HTMLElement;
-  scrollTop: number;
-};
-
-const restoreStates = new WeakMap<HTMLElement, ScrollRestoreState>();
-
-export function mutateTablePreservingScroll(
-  root: HTMLElement,
-  mutation: () => void,
-): void {
-  const scrollRoot = root.closest<HTMLElement>('[data-site-viewport]');
-  if (!scrollRoot) {
-    mutation();
-    return;
-  }
-
-  const previous = restoreStates.get(root);
-  if (previous) window.cancelAnimationFrame(previous.frame);
-  const originalOverflowAnchor =
-    previous?.originalOverflowAnchor ?? root.style.overflowAnchor;
-  const scrollTop = scrollRoot.scrollTop;
-
-  root.style.overflowAnchor = 'none';
-  mutation();
-  scrollRoot.scrollTop = scrollTop;
-
-  const state: ScrollRestoreState = {
-    frame: window.requestAnimationFrame(() => {
-      scrollRoot.scrollTop = scrollTop;
-      root.style.overflowAnchor = originalOverflowAnchor;
-      restoreStates.delete(root);
-    }),
-    originalOverflowAnchor,
-    scrollRoot,
-    scrollTop,
-  };
-  restoreStates.set(root, state);
-}