@astronox/core 0.3.1 → 0.4.1

package/src/patterns/Table/tableFilterPanelController.ts

@@ -0,0 +1,91 @@
+const initializedAttribute = 'data-table-filter-panel-initialized';
+const compactAttribute = 'data-table-filter-panel-compact';
+const openAttribute = 'data-table-filter-panel-open';
+const noop = (): void => undefined;
+
+const collapseWidths = {
+  sm: 24,
+  md: 36,
+  lg: 44,
+  xl: 54,
+} as const;
+
+export function initTableFilterPanel(root: HTMLElement): () => void {
+  if (root.hasAttribute(initializedAttribute)) return noop;
+
+  const trigger = root.querySelector<HTMLButtonElement>(
+    ':scope > [data-widget="card-header"] [data-card-header-trigger]',
+  );
+  const content = root.querySelector<HTMLElement>(
+    ':scope > [data-table-filter-panel-content]',
+  );
+  if (!trigger || !content) return noop;
+
+  const collapseAt = root.dataset.tableFilterPanelCollapseAt;
+  const collapseWidth =
+    collapseAt && collapseAt in collapseWidths
+      ? collapseWidths[collapseAt as keyof typeof collapseWidths]
+      : collapseWidths.lg;
+  const boundary =
+    root.closest<HTMLElement>('.grid-container') ?? root.parentElement ?? root;
+  const grid = boundary.querySelector<HTMLElement>(
+    ':scope > [data-composition="grid"]',
+  );
+  let compact = false;
+  let open = true;
+
+  const sync = (): void => {
+    root.toggleAttribute(compactAttribute, compact);
+    root.toggleAttribute(openAttribute, open);
+    trigger.hidden = !compact;
+    trigger.tabIndex = compact ? 0 : -1;
+    trigger.setAttribute('aria-expanded', String(open));
+    content.hidden = !open;
+  };
+
+  const updateMode = (): void => {
+    const rootFontSize = Number.parseFloat(
+      window.getComputedStyle(document.documentElement).fontSize,
+    );
+    const renderedColumns = grid
+      ? window
+          .getComputedStyle(grid)
+          .gridTemplateColumns.split(/\s+/)
+          .filter(Boolean).length
+      : 0;
+    const nextCompact = grid
+      ? renderedColumns === 1
+      : boundary.getBoundingClientRect().width < collapseWidth * rootFontSize;
+    if (nextCompact === compact) return;
+
+    compact = nextCompact;
+    open = !compact;
+    sync();
+  };
+
+  const handleClick = (): void => {
+    if (!compact) return;
+    open = !open;
+    sync();
+  };
+
+  root.setAttribute(initializedAttribute, '');
+  trigger.addEventListener('click', handleClick);
+  const resizeObserver =
+    'ResizeObserver' in window ? new ResizeObserver(updateMode) : null;
+  resizeObserver?.observe(boundary);
+  updateMode();
+  sync();
+
+  return () => {
+    resizeObserver?.disconnect();
+    trigger.removeEventListener('click', handleClick);
+    trigger.hidden = true;
+    trigger.tabIndex = -1;
+    trigger.setAttribute('aria-expanded', 'true');
+    content.hidden = false;
+    root.removeAttribute(initializedAttribute);
+    root.removeAttribute(compactAttribute);
+    root.removeAttribute(openAttribute);
+  };
+}

package/src/patterns/Table/tableProgressiveController.ts

@@ -3,6 +3,7 @@ import type {
   TableProgressiveModel,
 } from '../../display/contracts';
 import { tableProgressiveBatchSize } from '../../display/tableProgressive';
+import { mutateTablePreservingScroll } from './tableScrollPosition';
 
 const initializedAttribute = 'data-table-progressive-initialized';
 
@@ -151,6 +152,8 @@ 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));
 
@@ -181,8 +184,11 @@ export function initTableProgressive(root: HTMLElement): () => void {
       activeSkeletonTemplate.content.querySelectorAll<HTMLElement>(
         '[data-table-skeleton-row]',
       ),
-    ).slice(0, count);
-    skeletonRows = candidates.map((row) => document.importNode(row, true));
+    );
+    if (candidates.length === 0) return;
+    skeletonRows = Array.from({ length: count }, (_, index) =>
+      document.importNode(candidates[index % candidates.length]!, true),
+    );
     insertBeforeEmpty(activeRowsRoot, empty, skeletonRows);
   }
 
@@ -204,6 +210,21 @@ 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;
   }
@@ -286,10 +307,12 @@ 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 + batchSize);
+    const target = results.slice(cursor, cursor + requestedCount);
     if (target.length === 0) {
       removeSkeleton();
       updatePagination();
@@ -305,7 +328,9 @@ export function initTableProgressive(root: HTMLElement): () => void {
       request = activeRequest;
       setPaginationState(activePagination, activeStatus, 'loading');
       updateTableState(loadingState);
-      addSkeleton(target.length);
+      if (loadingState === 'appending' || skeletonRows.length === 0) {
+        addSkeleton(target.length);
+      }
 
       try {
         await loadSources(missing, activeRequest.signal);
@@ -336,9 +361,16 @@ export function initTableProgressive(root: HTMLElement): () => void {
       return;
     }
 
-    removeSkeleton();
-    appendRows(rows as HTMLElement[]);
+    if (replace) replaceRows(rows as HTMLElement[]);
+    else {
+      removeSkeleton();
+      appendRows(rows as HTMLElement[]);
+    }
     cursor += target.length;
+    retainedWindowSize = Math.max(
+      retainedWindowSize,
+      getRows(activeRowsRoot).length,
+    );
     updatePagination();
     updateTableState('ready');
   }
@@ -403,22 +435,48 @@ 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();
     updateTableState(state);
-    addSkeleton(batchSize);
-    detachRenderedRows();
+    setPaginationState(activePagination, activeStatus, 'loading');
+    if (empty) empty.hidden = true;
+    mutateTablePreservingScroll(root, () => {
+      detachRenderedRows();
+      addSkeleton(retainedWindowSize);
+    });
+
     applyQuery();
     cursor = Math.min(offset, results.length);
-    updateEmptyState();
-    if (results.length === 0) {
-      removeSkeleton();
-      updatePagination();
-      updateTableState('empty');
-      return;
-    }
-    void renderNextBatch(state);
+    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,
+        );
+      });
+    });
   }
 
   function refresh(): void {
@@ -434,6 +492,10 @@ 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/tableScrollPosition.ts

@@ -0,0 +1,41 @@
+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);
+}

package/src/patterns/Table/tableSortController.ts

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

package/src/patterns/index.ts

@@ -15,6 +15,7 @@ export { default as StageFlow } from './StageFlow/StageFlow.astro';
 export { default as Table } from './Table/Table.astro';
 export { default as TableBody } from './Table/TableBody.astro';
 export { default as TableFooter } from './Table/TableFooter.astro';
+export { default as TableFilterPanel } from './Table/TableFilterPanel.astro';
 export { default as TableHeader } from './Table/TableHeader.astro';
 export { default as TablePagination } from './Table/TablePagination.astro';
 export { default as TableSkeleton } from './Table/TableSkeleton.astro';
@@ -41,6 +42,7 @@ export * from './SpriteProjectilePreview/contracts';
 export * from './SpriteProjectilePreview/spriteProjectilePreviewController';
 export * from './Table/tableCellController';
 export * from './Table/tableFilterController';
+export * from './Table/tableFilterPanelController';
 export * from './Table/tableLayout';
 export * from './Table/tableProgressiveController';
 export * from './Table/tableSortController';

package/src/styles/style.css

@@ -83,6 +83,7 @@
 @import '../patterns/Table/TableBody.css' layer(patterns);
 @import '../patterns/Table/TableCell.css' layer(patterns);
 @import '../patterns/Table/TableFooter.css' layer(patterns);
+@import '../patterns/Table/TableFilterPanel.css' layer(patterns);
 @import '../patterns/Table/TableHeader.css' layer(patterns);
 @import '../patterns/Table/TablePagination.css' layer(patterns);
 @import '../patterns/Table/TableSkeleton.css' layer(patterns);

package/src/ads/adsense.ts

@@ -1,112 +0,0 @@
-import type { AdConsentProvider, AdProvider } from './contracts';
-import { setAdSlotState } from './slot';
-
-declare global {
-  interface Window {
-    adsbygoogle?: Record<string, unknown>[];
-  }
-}
-
-export function createAdsenseProvider({
-  clientId,
-  consent,
-  loadTimeoutMs,
-}: {
-  clientId: string;
-  consent: AdConsentProvider;
-  loadTimeoutMs: number;
-}): AdProvider {
-  let loading: Promise<void> | null = null;
-
-  const load = async (): Promise<void> => {
-    if (!(await consent.canLoadAds())) {
-      throw new Error('Advertising consent was not granted');
-    }
-    loading ??= loadAdsenseScript(clientId, loadTimeoutMs).catch((reason) => {
-      loading = null;
-      throw reason;
-    });
-    return loading;
-  };
-
-  return {
-    load,
-    async request(slot) {
-      setAdSlotState(slot, 'loading');
-      try {
-        await load();
-        window.adsbygoogle ??= [];
-        window.adsbygoogle.push({});
-        observeAdsenseSlot(slot);
-      } catch (reason) {
-        setAdSlotState(slot, 'blocked');
-        throw reason;
-      }
-    },
-  };
-}
-
-function loadAdsenseScript(
-  clientId: string,
-  loadTimeoutMs: number,
-): Promise<void> {
-  const existing = document.querySelector<HTMLScriptElement>(
-    'script[data-astronox-adsense]',
-  );
-  if (existing?.dataset.loaded === 'true') return Promise.resolve();
-
-  return new Promise((resolve, reject) => {
-    const script = existing ?? document.createElement('script');
-    script.async = true;
-    script.crossOrigin = 'anonymous';
-    script.dataset.astronoxAdsense = '';
-    script.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${encodeURIComponent(clientId)}`;
-    const timeout = window.setTimeout(
-      () => reject(new Error('AdSense loading timed out')),
-      loadTimeoutMs,
-    );
-    script.addEventListener(
-      'load',
-      () => {
-        window.clearTimeout(timeout);
-        script.dataset.loaded = 'true';
-        resolve();
-      },
-      { once: true },
-    );
-    script.addEventListener(
-      'error',
-      () => {
-        window.clearTimeout(timeout);
-        reject(new Error('AdSense failed to load'));
-      },
-      { once: true },
-    );
-    if (!existing) document.head.append(script);
-  });
-}
-
-function observeAdsenseSlot(slot: HTMLElement): void {
-  const advertisement = slot.querySelector<HTMLElement>('.adsbygoogle');
-  if (!advertisement) {
-    setAdSlotState(slot, 'unavailable');
-    return;
-  }
-
-  const sync = (): void => {
-    const status = advertisement.dataset.adStatus;
-    if (status === 'filled') setAdSlotState(slot, 'filled');
-    if (status === 'unfilled') setAdSlotState(slot, 'unavailable');
-  };
-  sync();
-  if (advertisement.dataset.adStatus) return;
-
-  const observer = new MutationObserver(() => {
-    sync();
-    if (advertisement.dataset.adStatus) observer.disconnect();
-  });
-  observer.observe(advertisement, {
-    attributeFilter: ['data-ad-status'],
-    attributes: true,
-  });
-}