@astronox/core 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "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/SurfaceGroup/SurfaceGroup.css

@@ -17,28 +17,19 @@
 }
 
 .surface-group:has(> [data-sticky-surface])::before {
+  --surface-group-sticky-occlusion-size: calc(
+    var(--nox-layout-gap) + var(--nox-section-responsive-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 +60,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 +69,11 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
+
+@container nox-surface-group (width < 32rem) {
+  .surface-group:has(> [data-sticky-surface])::before {
+    --surface-group-sticky-occlusion-size: calc(
+      var(--nox-layout-gap) + var(--nox-section-compact-block-size)
+    );
+  }
+}

package/src/composition/SurfaceGroup/stickySurfaceGroupController.ts

@@ -42,14 +42,9 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
   const observe = () => {
     resizeFrame = 0;
     observer?.disconnect();
-    root.removeAttribute('data-sticky-measured');
 
     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 +54,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,14 +72,10 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
   root.setAttribute('data-sticky-initialized', 'true');
   window.addEventListener('resize', scheduleObserve, { passive: true });
-  const resizeObserver =
-    'ResizeObserver' in window ? new ResizeObserver(scheduleObserve) : null;
-  resizeObserver?.observe(stickySurface);
   observe();
 
   return () => {
     window.removeEventListener('resize', scheduleObserve);
-    resizeObserver?.disconnect();
     observer?.disconnect();
     sentinel.remove();
 
@@ -95,7 +85,5 @@ 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');
   };
 };

package/src/pages/.gitkeep

@@ -0,0 +1 @@
+

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/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 {
@@ -517,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,42 @@
+type TableStartScrollInput = {
+  currentScrollTop: number;
+  layoutGap: number;
+  tableTop: number;
+  viewportTop: number;
+};
+
+export function resolveTableStartScrollTop({
+  currentScrollTop,
+  layoutGap,
+  tableTop,
+  viewportTop,
+}: TableStartScrollInput): number {
+  const targetTop = viewportTop + layoutGap;
+  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]');
+}
+
+export function revealTableStart(root: HTMLElement): void {
+  const scrollRoot = resolveTableScrollRoot(root);
+  if (!scrollRoot) return;
+
+  const nextScrollTop = resolveTableStartScrollTop({
+    currentScrollTop: scrollRoot.scrollTop,
+    layoutGap:
+      Number.parseFloat(
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue('--nox-layout-gap'),
+      ) || 0,
+    tableTop: root.getBoundingClientRect().top,
+    viewportTop: scrollRoot.getBoundingClientRect().top,
+  });
+  if (nextScrollTop !== scrollRoot.scrollTop) {
+    scrollRoot.scrollTop = nextScrollTop;
+  }
+}