@astronox/core 0.4.5 → 0.4.7

package/package.json

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

package/src/components/feedback/PreferenceBootstrap/PreferenceBootstrap.astro

@@ -16,9 +16,20 @@ const payload = definitions.map((definition) => ({
 }));
 ---
 
-<script is:inline define:vars={{ definitions: payload }}>
+<script is:inline data-preference-definitions={JSON.stringify(payload)}>
   (() => {
-    if (definitions.length === 0) return;
+    const bootstrapScript = document.currentScript;
+    if (!(bootstrapScript instanceof HTMLScriptElement)) return;
+
+    let definitions;
+    try {
+      definitions = JSON.parse(
+        bootstrapScript.dataset.preferenceDefinitions ?? '[]',
+      );
+    } catch {
+      return;
+    }
+    if (!Array.isArray(definitions) || definitions.length === 0) return;
 
     const globalKey = '__astronoxPreferenceSnapshot';
     const changeEvent = 'astronox:preference-change';

package/src/components/forms/PreparedFormBootstrap/PreparedFormBootstrap.astro

@@ -7,8 +7,14 @@ type Props = {
 const { formId, stateKey }: Props = Astro.props;
 ---
 
-<script is:inline define:vars={{ formId, stateKey }}>
+<script is:inline data-form-id={formId} data-state-key={stateKey}>
   (() => {
+    const bootstrapScript = document.currentScript;
+    if (!(bootstrapScript instanceof HTMLScriptElement)) return;
+    const formId = bootstrapScript.dataset.formId;
+    const stateKey = bootstrapScript.dataset.stateKey;
+    if (!formId || !stateKey) return;
+
     const isRecord = (value) =>
       typeof value === 'object' && value !== null && !Array.isArray(value);
     const readState = () => {

package/src/composition/Grid/Grid.css

@@ -103,31 +103,6 @@
   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));
 }
@@ -137,9 +112,6 @@
       [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;
   }
 
@@ -192,9 +164,6 @@
       [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;
   }
 
@@ -247,9 +216,6 @@
       [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;
   }
 
@@ -302,9 +268,6 @@
       [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/composition/Stack/Stack.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../theme/contracts';
 
 type StackElement = 'div' | 'form' | 'section' | 'nav';
-type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'layout';
 type StackAttributes = HTMLAttributes<'div'> &
   HTMLAttributes<'form'> &
   HTMLAttributes<'section'> &

package/src/composition/Stack/Stack.css

@@ -29,3 +29,7 @@
 .stack[data-gap='xl'] {
   --stack-gap: var(--nox-space-6);
 }
+
+.stack[data-gap='layout'] {
+  --stack-gap: var(--nox-layout-gap);
+}

package/src/composition/SurfaceGroup/SurfaceGroup.css

@@ -16,29 +16,26 @@
   pointer-events: none;
 }
 
+.surface-group:has(> [data-sticky-surface]) {
+  --surface-group-sticky-surface-block-size: var(
+    --nox-section-responsive-block-size
+  );
+}
+
 .surface-group:has(> [data-sticky-surface])::before {
+  --surface-group-sticky-occlusion-size: calc(
+    var(--nox-layout-gap) + var(--surface-group-sticky-surface-block-size)
+  );
+
   position: sticky;
   z-index: 39;
   top: 0;
   display: block;
   min-width: 0;
-  min-height: var(
-    --surface-group-sticky-occlusion-size,
-    calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
-  );
+  min-height: var(--surface-group-sticky-occlusion-size);
   visibility: hidden;
-  flex: 0 0
-    var(
-      --surface-group-sticky-occlusion-size,
-      calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
-    );
-  margin-block-end: calc(
-    -1 *
-      var(
-        --surface-group-sticky-occlusion-size,
-        calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
-      )
-  );
+  flex: 0 0 var(--surface-group-sticky-occlusion-size);
+  margin-block-end: calc(-1 * var(--surface-group-sticky-occlusion-size));
   background: var(--nox-page-background);
   content: '';
 }
@@ -69,8 +66,8 @@
 
 .surface-group
   > [data-surface]:not([hidden]):has(~ [data-surface]:not([hidden])) {
-  border-end-start-radius: var(--surface-group-connected-border-end-radius, 0);
-  border-end-end-radius: var(--surface-group-connected-border-end-radius, 0);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .surface-group > [data-surface]:not([hidden]) ~ [data-surface]:not([hidden]) {
@@ -78,3 +75,11 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
+
+@container nox-surface-group (width < 32rem) {
+  .surface-group:has(> [data-sticky-surface]) {
+    --surface-group-sticky-surface-block-size: var(
+      --nox-section-compact-block-size
+    );
+  }
+}

package/src/composition/SurfaceGroup/stickySurfaceGroupController.ts

@@ -1,4 +1,6 @@
 const noop = () => {};
+const stickySurfaceBlockSizeProperty =
+  '--surface-group-sticky-surface-block-size';
 
 const getScrollParent = (element: HTMLElement): HTMLElement | Window => {
   let parent = element.parentElement;
@@ -37,19 +39,23 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
   stickySurface.before(sentinel);
 
   let observer: IntersectionObserver | null = null;
+  let surfaceResizeObserver: ResizeObserver | null = null;
   let resizeFrame = 0;
 
   const observe = () => {
     resizeFrame = 0;
     observer?.disconnect();
-    root.removeAttribute('data-sticky-measured');
+
+    const stickySurfaceBlockSize = stickySurface.getBoundingClientRect().height;
+    if (stickySurfaceBlockSize > 0) {
+      root.style.setProperty(
+        stickySurfaceBlockSizeProperty,
+        `${stickySurfaceBlockSize}px`,
+      );
+    }
 
     const stickyOffset =
       Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
-    root.style.setProperty(
-      '--surface-group-sticky-occlusion-size',
-      `${stickyOffset + stickySurface.getBoundingClientRect().height}px`,
-    );
     observer = new IntersectionObserver(
       ([entry]) => {
         if (!entry) return;
@@ -59,7 +65,6 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
           'data-sticky-active',
           entry.boundingClientRect.top <= activationBoundary + 0.5,
         );
-        root.setAttribute('data-sticky-measured', 'true');
       },
       {
         root: scrollParent instanceof Window ? null : scrollParent,
@@ -78,15 +83,15 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
   root.setAttribute('data-sticky-initialized', 'true');
   window.addEventListener('resize', scheduleObserve, { passive: true });
-  const resizeObserver =
+  surfaceResizeObserver =
     'ResizeObserver' in window ? new ResizeObserver(scheduleObserve) : null;
-  resizeObserver?.observe(stickySurface);
+  surfaceResizeObserver?.observe(stickySurface);
   observe();
 
   return () => {
     window.removeEventListener('resize', scheduleObserve);
-    resizeObserver?.disconnect();
     observer?.disconnect();
+    surfaceResizeObserver?.disconnect();
     sentinel.remove();
 
     if (resizeFrame !== 0) {
@@ -95,7 +100,6 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
     root.removeAttribute('data-sticky-active');
     root.removeAttribute('data-sticky-initialized');
-    root.removeAttribute('data-sticky-measured');
-    root.style.removeProperty('--surface-group-sticky-occlusion-size');
+    root.style.removeProperty(stickySurfaceBlockSizeProperty);
   };
 };

package/src/pages/.gitkeep

@@ -0,0 +1 @@
+

package/src/patterns/Table/Table.css

@@ -49,7 +49,9 @@
 
 .table[data-table-sticky-header]:has([data-sticky-surface])
   [data-table-header] {
-  top: calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size));
+  top: calc(
+    var(--nox-layout-gap) + var(--surface-group-sticky-surface-block-size)
+  );
 }
 
 @container nox-table (width < 32rem) {
@@ -57,11 +59,6 @@
     --table-cell-padding-inline: var(--nox-space-1);
     --table-edge-padding-inline: var(--nox-space-2);
   }
-
-  .table[data-table-sticky-header]:has([data-sticky-surface])
-    [data-table-header] {
-    top: calc(var(--nox-layout-gap) + var(--nox-section-compact-block-size));
-  }
 }
 
 @container nox-table (width < 36rem) {

package/src/patterns/Table/TableFilterPanel.css

@@ -28,8 +28,10 @@
 
 .table-filter-panel[data-table-filter-panel-compact]:not(
     [data-table-filter-panel-open]
-  ) {
-  --surface-group-connected-border-end-radius: var(--nox-radius-md);
+  )
+  > .card-header {
+  border-end-start-radius: var(--nox-radius-md);
+  border-end-end-radius: var(--nox-radius-md);
 }
 
 .table-filter-panel[data-table-filter-panel-compact]:not(
@@ -47,8 +49,10 @@
 @container nox-grid (width < 24rem) {
   .table-filter-panel[data-table-filter-panel-collapse-at='sm']:not(
       [data-table-filter-panel-open]
-    ) {
-    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+    )
+    > .card-header {
+    border-end-start-radius: var(--nox-radius-md);
+    border-end-end-radius: var(--nox-radius-md);
   }
 
   .table-filter-panel[data-table-filter-panel-collapse-at='sm']
@@ -69,8 +73,10 @@
 @container nox-grid (width < 36rem) {
   .table-filter-panel[data-table-filter-panel-collapse-at='md']:not(
       [data-table-filter-panel-open]
-    ) {
-    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+    )
+    > .card-header {
+    border-end-start-radius: var(--nox-radius-md);
+    border-end-end-radius: var(--nox-radius-md);
   }
 
   .table-filter-panel[data-table-filter-panel-collapse-at='md']
@@ -91,8 +97,10 @@
 @container nox-grid (width < 44rem) {
   .table-filter-panel[data-table-filter-panel-collapse-at='lg']:not(
       [data-table-filter-panel-open]
-    ) {
-    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+    )
+    > .card-header {
+    border-end-start-radius: var(--nox-radius-md);
+    border-end-end-radius: var(--nox-radius-md);
   }
 
   .table-filter-panel[data-table-filter-panel-collapse-at='lg']
@@ -113,8 +121,10 @@
 @container nox-grid (width < 54rem) {
   .table-filter-panel[data-table-filter-panel-collapse-at='xl']:not(
       [data-table-filter-panel-open]
-    ) {
-    --surface-group-connected-border-end-radius: var(--nox-radius-md);
+    )
+    > .card-header {
+    border-end-start-radius: var(--nox-radius-md);
+    border-end-end-radius: var(--nox-radius-md);
   }
 
   .table-filter-panel[data-table-filter-panel-collapse-at='xl']

package/src/patterns/Table/TablePagination.css

@@ -49,19 +49,13 @@
   position: relative;
   display: block;
   overflow: visible;
-  block-size: var(--table-progressive-runway-block-size, 0px);
-  min-block-size: var(--table-progressive-runway-block-size, 0px);
+  block-size: 0;
+  min-block-size: 0;
   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;
@@ -82,8 +76,7 @@
   .table-pagination__link:focus-visible {
   z-index: 1;
   inset-inline: 0;
-  inset-block-start: 0;
-  inset-block-end: auto;
+  inset-block-end: 0;
   display: grid;
   overflow: visible;
   width: auto;

package/src/patterns/Table/tableClientController.ts

@@ -1,3 +1,5 @@
+import { resolveTableScrollRoot } from './tableViewport';
+
 export type ClientTableState = 'ready' | 'empty' | 'error';
 
 export type ClientTablePage<TItem> = {
@@ -90,6 +92,7 @@ export function createClientTablePagination<TItem>({
     '[data-table-skeleton-template]',
   );
   const keys = new Set<string>();
+  const scrollRoot = resolveTableScrollRoot(root);
   let nextCursor: string | undefined;
   let loading = false;
   let disposed = false;
@@ -190,7 +193,9 @@ export function createClientTablePagination<TItem>({
       shouldContinue = Boolean(
         nextCursor &&
         sentinel &&
-        sentinel.getBoundingClientRect().top <= window.innerHeight + 512,
+        sentinel.getBoundingClientRect().top <=
+          (scrollRoot?.getBoundingClientRect().bottom ?? window.innerHeight) +
+            512,
       );
     } catch (error) {
       if (disposed) return;
@@ -221,7 +226,7 @@ export function createClientTablePagination<TItem>({
           (entries) => {
             if (entries.some((entry) => entry.isIntersecting)) void load(true);
           },
-          { rootMargin: '512px 0px' },
+          { root: scrollRoot, rootMargin: '512px 0px' },
         )
       : null;
 

package/src/patterns/Table/tableFilterController.ts

@@ -8,6 +8,7 @@ import {
   hasTableProgressive,
   setTableProgressiveFilters,
 } from './tableProgressiveController';
+import { revealTableStart } from './tableViewport';
 
 type FilterValues = Readonly<Record<string, readonly string[]>>;
 
@@ -63,6 +64,8 @@ function setTokenAttribute(
 }
 
 export function refreshTableFilters(root: HTMLElement): void {
+  const table = root.querySelector<HTMLElement>('[data-table-filter-table]');
+  if (table) revealTableStart(table);
   root.dispatchEvent(new Event(refreshEvent));
 }
 
@@ -171,6 +174,7 @@ export function initTableFilters(root: HTMLElement): () => void {
   };
 
   const handleSearch = (): void => {
+    revealTableStart(table);
     scheduleFilters();
   };
 
@@ -187,6 +191,7 @@ export function initTableFilters(root: HTMLElement): () => void {
     const field = target.dataset.tableFilterField;
     if (!field) return;
     selections.set(field, customEvent.detail.values[0] ?? '');
+    revealTableStart(table);
     scheduleFilters();
   };
 
@@ -198,6 +203,7 @@ export function initTableFilters(root: HTMLElement): () => void {
   };
 
   const handleReset = (): void => {
+    revealTableStart(table);
     if (search) search.value = '';
     for (const field of fields) {
       clearCombobox(field, { emit: false });

package/src/patterns/Table/tableProgressiveController.ts

@@ -3,6 +3,7 @@ import type {
   TableProgressiveModel,
 } from '../../display/contracts';
 import { tableProgressiveBatchSize } from '../../display/tableProgressive';
+import { resolveTableScrollRoot, revealTableStart } from './tableViewport';
 
 const initializedAttribute = 'data-table-progressive-initialized';
 
@@ -154,13 +155,15 @@ export function initTableProgressive(root: HTMLElement): () => void {
 
   registerRows(getRows(activeRowsRoot));
 
+  const scrollRoot = resolveTableScrollRoot(root);
+
   const observer = new IntersectionObserver(
     (observedEntries) => {
       if (observedEntries.some((entry) => entry.isIntersecting)) {
         void renderNextBatch();
       }
     },
-    { rootMargin: '600px 0px' },
+    { root: scrollRoot, rootMargin: '600px 0px' },
   );
 
   function registerRows(rows: readonly HTMLElement[]): void {
@@ -406,7 +409,6 @@ export function initTableProgressive(root: HTMLElement): () => void {
     generation += 1;
     request?.abort();
     request = null;
-    activePagination.hidden = false;
     updateTableState(state);
     addSkeleton(batchSize);
     detachRenderedRows();
@@ -518,6 +520,7 @@ export function updateTableProgressiveEntry(
 export function refreshTableProgressive(root: HTMLElement): boolean {
   const context = getProgressiveContext(root);
   if (!context) return false;
+  revealTableStart(root);
   context.refresh();
   return true;
 }

package/src/patterns/Table/tableSortController.ts

@@ -4,6 +4,7 @@ import {
   setTableProgressiveSort,
   updateTableProgressiveEntry,
 } from './tableProgressiveController';
+import { revealTableStart } from './tableViewport';
 
 type SortDirection = 'ascending' | 'descending';
 type SortType = 'number' | 'text';
@@ -161,6 +162,7 @@ export function initTableSort(root: HTMLElement): () => void {
       state = null;
     }
 
+    revealTableStart(root);
     updateButtons();
     if (!setTableProgressiveSort(root, state)) scheduleSort();
   };

package/src/patterns/Table/tableViewport.ts

@@ -0,0 +1,46 @@
+type TableStartScrollInput = {
+  currentScrollTop: number;
+  stickyOffset: number;
+  tableTop: number;
+  viewportTop: number;
+};
+
+export function resolveTableStartScrollTop({
+  currentScrollTop,
+  stickyOffset,
+  tableTop,
+  viewportTop,
+}: TableStartScrollInput): number {
+  const targetTop = viewportTop + stickyOffset;
+  if (tableTop >= targetTop) return currentScrollTop;
+
+  return Math.max(0, currentScrollTop + tableTop - targetTop);
+}
+
+export function resolveTableScrollRoot(root: HTMLElement): HTMLElement | null {
+  return root.closest<HTMLElement>('[data-site-viewport]');
+}
+
+function resolveTableStickyOffset(root: HTMLElement): number {
+  const stickySurface = root.querySelector<HTMLElement>(
+    '[data-sticky-surface]',
+  );
+  if (!stickySurface) return 0;
+
+  return Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
+}
+
+export function revealTableStart(root: HTMLElement): void {
+  const scrollRoot = resolveTableScrollRoot(root);
+  if (!scrollRoot) return;
+
+  const nextScrollTop = resolveTableStartScrollTop({
+    currentScrollTop: scrollRoot.scrollTop,
+    stickyOffset: resolveTableStickyOffset(root),
+    tableTop: root.getBoundingClientRect().top,
+    viewportTop: scrollRoot.getBoundingClientRect().top,
+  });
+  if (nextScrollTop !== scrollRoot.scrollTop) {
+    scrollRoot.scrollTop = nextScrollTop;
+  }
+}