@astronox/core 0.2.4 → 0.3.1

package/src/patterns/Table/tableProgressiveController.ts

@@ -8,12 +8,7 @@ const initializedAttribute = 'data-table-progressive-initialized';
 
 type PaginationState = 'idle' | 'loading' | 'error' | 'complete';
 type TableLoadingState =
-  | 'pending'
-  | 'ready'
-  | 'refreshing'
-  | 'appending'
-  | 'empty'
-  | 'error';
+  'pending' | 'ready' | 'refreshing' | 'appending' | 'empty' | 'error';
 type SortDirection = 'ascending' | 'descending';
 type SortType = 'number' | 'text';
 type SortValue = string | number | null;
@@ -74,13 +69,16 @@ export function initTableProgressive(root: HTMLElement): () => void {
   if (!rowsRoot || !skeletonTemplate) {
     return () => undefined;
   }
+  const activeRowsRoot = rowsRoot;
+  const activeSkeletonTemplate = skeletonTemplate;
 
   if (!manifest) {
     if (root.dataset.tablePreparation !== 'controlled') {
-      revealServerRows(root, rowsRoot);
+      revealServerRows(root, activeRowsRoot);
     }
     return () => undefined;
   }
+  const activeManifest = manifest;
 
   const pagination = root.querySelector<HTMLElement>('[data-table-pagination]');
   const sentinel = pagination?.querySelector<HTMLElement>(
@@ -92,22 +90,25 @@ export function initTableProgressive(root: HTMLElement): () => void {
   if (!pagination || !sentinel || !status) {
     return () => undefined;
   }
+  const activePagination = pagination;
+  const activeSentinel = sentinel;
+  const activeStatus = status;
 
-  const fallbackLink = pagination.querySelector<HTMLAnchorElement>(
+  const fallbackLink = activePagination.querySelector<HTMLAnchorElement>(
     '[data-table-pagination-link]',
   );
   if (!('IntersectionObserver' in window)) {
     if (root.dataset.tablePreparation !== 'controlled') {
-      revealServerRows(root, rowsRoot);
+      revealServerRows(root, activeRowsRoot);
     }
-    showFallback(pagination, fallbackLink);
+    showFallback(activePagination, fallbackLink);
     return () => undefined;
   }
 
   root.setAttribute(initializedAttribute, 'true');
-  pagination.hidden = false;
-  pagination.setAttribute('data-table-progressive-enhanced', 'true');
-  pagination.removeAttribute('data-surface');
+  activePagination.hidden = false;
+  activePagination.setAttribute('data-table-progressive-enhanced', 'true');
+  activePagination.removeAttribute('data-surface');
 
   const locale = document.documentElement.lang || undefined;
   const normalize = (value: string): string =>
@@ -115,24 +116,22 @@ export function initTableProgressive(root: HTMLElement): () => void {
       .normalize('NFD')
       .replace(/\p{Diacritic}/gu, '')
       .toLocaleLowerCase(locale);
-  const entries = manifest.entries.map(
-    (entry, index): IndexedEntry => ({
-      ...entry,
-      index,
-      exclusions: new Set(),
-      normalizedSearch: (entry.filters?.search ?? []).map(normalize),
-      sortValues: entry.sortValues ?? {},
-    }),
-  );
+  const entries = activeManifest.entries.map((entry, index): IndexedEntry => ({
+    ...entry,
+    index,
+    exclusions: new Set(),
+    normalizedSearch: (entry.filters?.search ?? []).map(normalize),
+    sortValues: entry.sortValues ?? {},
+  }));
   const entriesByKey = new Map(entries.map((entry) => [entry.key, entry]));
   const rowsByKey = new Map<string, HTMLElement>();
   const loadedSources = new Set<string>();
   const batchSize = Math.max(
     1,
-    Math.floor(manifest.batchSize ?? tableProgressiveBatchSize),
+    Math.floor(activeManifest.batchSize ?? tableProgressiveBatchSize),
   );
   const initialOffset = Math.min(
-    Math.max(0, Math.floor(manifest.initialOffset ?? 0)),
+    Math.max(0, Math.floor(activeManifest.initialOffset ?? 0)),
     entries.length,
   );
   const empty = root.querySelector<HTMLElement>('[data-table-filter-empty]');
@@ -148,12 +147,12 @@ export function initTableProgressive(root: HTMLElement): () => void {
   let results = entries;
   let cursor = 0;
   let request: AbortController | null = null;
-  let skeletonRows = getSkeletonRows(rowsRoot);
+  let skeletonRows = getSkeletonRows(activeRowsRoot);
   let disposed = false;
   let generation = 0;
   let prepared = false;
 
-  registerRows(getRows(rowsRoot));
+  registerRows(getRows(activeRowsRoot));
 
   const observer = new IntersectionObserver(
     (observedEntries) => {
@@ -179,16 +178,16 @@ export function initTableProgressive(root: HTMLElement): () => void {
   function addSkeleton(count: number): void {
     removeSkeleton();
     const candidates = Array.from(
-      skeletonTemplate.content.querySelectorAll<HTMLElement>(
+      activeSkeletonTemplate.content.querySelectorAll<HTMLElement>(
         '[data-table-skeleton-row]',
       ),
     ).slice(0, count);
     skeletonRows = candidates.map((row) => document.importNode(row, true));
-    insertBeforeEmpty(rowsRoot, empty, skeletonRows);
+    insertBeforeEmpty(activeRowsRoot, empty, skeletonRows);
   }
 
   function detachRenderedRows(): HTMLElement[] {
-    const rendered = getRows(rowsRoot);
+    const rendered = getRows(activeRowsRoot);
     rendered.forEach((row) => row.remove());
     return rendered;
   }
@@ -196,7 +195,7 @@ export function initTableProgressive(root: HTMLElement): () => void {
   function appendRows(rows: readonly HTMLElement[]): void {
     if (rows.length === 0) return;
     for (const row of rows) row.hidden = false;
-    insertBeforeEmpty(rowsRoot, empty, rows);
+    insertBeforeEmpty(activeRowsRoot, empty, rows);
     root.dispatchEvent(
       new CustomEvent<TableRowsAppendedDetail>('table:rows-appended', {
         bubbles: true,
@@ -212,9 +211,13 @@ export function initTableProgressive(root: HTMLElement): () => void {
   function updatePagination(): void {
     observer.disconnect();
     const complete = cursor >= results.length;
-    pagination.hidden = complete;
-    setPaginationState(pagination, status, complete ? 'complete' : 'idle');
-    if (!complete) observer.observe(sentinel);
+    activePagination.hidden = complete;
+    setPaginationState(
+      activePagination,
+      activeStatus,
+      complete ? 'complete' : 'idle',
+    );
+    if (!complete) observer.observe(activeSentinel);
   }
 
   function updateTableState(state: TableLoadingState): void {
@@ -300,18 +303,19 @@ export function initTableProgressive(root: HTMLElement): () => void {
     if (missing.length > 0) {
       const activeRequest = new AbortController();
       request = activeRequest;
-      setPaginationState(pagination, status, 'loading');
+      setPaginationState(activePagination, activeStatus, 'loading');
       updateTableState(loadingState);
       addSkeleton(target.length);
 
       try {
         await loadSources(missing, activeRequest.signal);
       } catch (error) {
-        if (error instanceof DOMException && error.name === 'AbortError') return;
+        if (error instanceof DOMException && error.name === 'AbortError')
+          return;
         removeSkeleton();
-        setPaginationState(pagination, status, 'error');
+        setPaginationState(activePagination, activeStatus, 'error');
         updateTableState('error');
-        showFallback(pagination, fallbackLink);
+        showFallback(activePagination, fallbackLink);
         observer.disconnect();
         return;
       } finally {
@@ -325,9 +329,9 @@ export function initTableProgressive(root: HTMLElement): () => void {
     const rows = target.map((entry) => rowsByKey.get(entry.key));
     if (rows.some((row) => !row)) {
       removeSkeleton();
-      setPaginationState(pagination, status, 'error');
+      setPaginationState(activePagination, activeStatus, 'error');
       updateTableState('error');
-      showFallback(pagination, fallbackLink);
+      showFallback(activePagination, fallbackLink);
       observer.disconnect();
       return;
     }
@@ -343,17 +347,18 @@ export function initTableProgressive(root: HTMLElement): () => void {
     missingEntries: readonly IndexedEntry[],
     signal: AbortSignal,
   ): Promise<void> {
+    const sources = activeManifest.sources;
     const sourceIds = new Set(
       missingEntries.map((entry) => entry.source).filter(isString),
     );
-    if (sourceIds.size === 0 || !manifest.sources) {
+    if (sourceIds.size === 0 || !sources) {
       throw new Error('Missing progressive table row source');
     }
 
     await Promise.all(
       [...sourceIds].map(async (sourceId) => {
         if (loadedSources.has(sourceId)) return;
-        const href = manifest.sources?.[sourceId];
+        const href = sources[sourceId];
         if (!href) throw new Error(`Missing table source: ${sourceId}`);
 
         const url = new URL(href, window.location.href);
@@ -379,12 +384,13 @@ export function initTableProgressive(root: HTMLElement): () => void {
               documentNode.querySelectorAll<HTMLElement>('[data-table-key]'),
             ).find((table) => table.dataset.tableKey === tableKey)
           : null;
-        const sourceRowsRoot = sourceTable?.querySelector<HTMLElement>(
-          '[data-table-rows]',
-        );
+        const sourceRowsRoot =
+          sourceTable?.querySelector<HTMLElement>('[data-table-rows]');
         const sourceRows = sourceRowsRoot ? getRows(sourceRowsRoot) : [];
         if (sourceRows.length === 0) {
-          throw new Error(`Missing progressive table: ${tableKey ?? 'unknown'}`);
+          throw new Error(
+            `Missing progressive table: ${tableKey ?? 'unknown'}`,
+          );
         }
 
         registerRows(sourceRows.map((row) => document.importNode(row, true)));
@@ -430,12 +436,14 @@ export function initTableProgressive(root: HTMLElement): () => void {
       request?.abort();
       observer.disconnect();
       removeSkeleton();
-      pagination.hidden = !fallbackLink;
-      pagination.removeAttribute('data-table-progressive-enhanced');
-      pagination.removeAttribute('data-table-progressive-state');
-      if (!pagination.hidden) pagination.setAttribute('data-surface', '');
-      status.hidden = true;
-      status.textContent = '';
+      activePagination.hidden = !fallbackLink;
+      activePagination.removeAttribute('data-table-progressive-enhanced');
+      activePagination.removeAttribute('data-table-progressive-state');
+      if (!activePagination.hidden) {
+        activePagination.setAttribute('data-surface', '');
+      }
+      activeStatus.hidden = true;
+      activeStatus.textContent = '';
       root.removeAttribute('aria-busy');
       root.removeAttribute('data-table-loading-state');
       root.removeAttribute(initializedAttribute);
@@ -533,9 +541,7 @@ function getProgressiveContext(
 ): ProgressiveContext | undefined {
   const existing = contexts.get(root);
   if (existing) return existing;
-  if (
-    !root.querySelector(':scope > [data-table-progressive-manifest]')
-  ) {
+  if (!root.querySelector(':scope > [data-table-progressive-manifest]')) {
     return undefined;
   }
   initTableProgressive(root);
@@ -574,17 +580,13 @@ function getRows(root: ParentNode): HTMLElement[] {
 
 function getSkeletonRows(root: ParentNode): HTMLElement[] {
   return Array.from(
-    root.querySelectorAll<HTMLElement>(
-      ':scope > [data-table-skeleton-row]',
-    ),
+    root.querySelectorAll<HTMLElement>(':scope > [data-table-skeleton-row]'),
   );
 }
 
 function revealServerRows(root: HTMLElement, rowsRoot: HTMLElement): void {
   getSkeletonRows(rowsRoot).forEach((row) => row.remove());
-  root.dataset.tableLoadingState = getRows(rowsRoot).some(
-    (row) => !row.hidden,
-  )
+  root.dataset.tableLoadingState = getRows(rowsRoot).some((row) => !row.hidden)
     ? 'ready'
     : 'empty';
   root.removeAttribute('aria-busy');

package/src/patterns/Table/tableScrollController.ts

@@ -25,8 +25,9 @@ export function initTableScroll(root: HTMLElement): () => void {
 
   root.setAttribute(initializedAttribute, 'true');
 
-  const bodyColumnGrid =
-    bodyScrollport.querySelector<HTMLElement>(bodyColumnGridSelector);
+  const bodyColumnGrid = bodyScrollport.querySelector<HTMLElement>(
+    bodyColumnGridSelector,
+  );
   const hasStableColumns = root.dataset.tableLayout === 'index';
   let isActive = true;
   let layoutFrame: number | null = null;

package/src/primitives/text/TextBlock/TextBlock.astro

@@ -15,9 +15,7 @@ const {
   text,
   ...attrs
 }: Props = Astro.props;
-const paragraphs = preserveBreaks
-  ? text.split(/\r?\n(?:[ \t]*\r?\n)+/)
-  : [];
+const paragraphs = preserveBreaks ? text.split(/\r?\n(?:[ \t]*\r?\n)+/) : [];
 ---
 
 {

package/src/publication/contracts.ts

@@ -0,0 +1,11 @@
+export interface SnapshotReader<TSnapshot> {
+  read(): Promise<TSnapshot>;
+}
+
+export type SnapshotParser<TSnapshot> = (value: unknown) => TSnapshot;
+
+export type HttpSnapshotReaderOptions<TSnapshot> = {
+  parse: SnapshotParser<TSnapshot>;
+  timeoutMs: number;
+  url: string;
+};

package/src/publication/http.ts

@@ -0,0 +1,31 @@
+import type { HttpSnapshotReaderOptions, SnapshotReader } from './contracts';
+
+export class HttpSnapshotReader<
+  TSnapshot,
+> implements SnapshotReader<TSnapshot> {
+  readonly #parse: HttpSnapshotReaderOptions<TSnapshot>['parse'];
+  readonly #timeoutMs: number;
+  readonly #url: string;
+
+  constructor({ parse, timeoutMs, url }: HttpSnapshotReaderOptions<TSnapshot>) {
+    this.#parse = parse;
+    this.#timeoutMs = timeoutMs;
+    this.#url = url;
+  }
+
+  async read(): Promise<TSnapshot> {
+    const response = await fetch(this.#url, {
+      cache: 'no-store',
+      headers: { Accept: 'application/json' },
+      signal: AbortSignal.timeout(this.#timeoutMs),
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Snapshot source returned ${response.status}: ${this.#url}`,
+      );
+    }
+
+    return this.#parse(await response.json());
+  }
+}

package/src/publication/index.ts

@@ -0,0 +1,2 @@
+export * from './contracts';
+export * from './http';

package/src/routing/localized.ts

@@ -12,9 +12,7 @@ export type LocalizedRouter<TLocale extends string> = {
   normalizePath(path: string): string;
 };
 
-export function createLocalizedRouter<
-  TDefinition extends LocaleDefinition,
->({
+export function createLocalizedRouter<TDefinition extends LocaleDefinition>({
   localeConfig,
   localizedRoots = ['/'],
   technicalRoots = [],
@@ -39,9 +37,10 @@ export function createLocalizedRouter<
     }
 
     const prefix = `/${localeConfig.getDefinition(locale).urlCode}`;
-    const localizedPath = normalizedPath === '/'
-      ? prefix
-      : normalizePathname(`${prefix}${normalizedPath}`);
+    const localizedPath =
+      normalizedPath === '/'
+        ? prefix
+        : normalizePathname(`${prefix}${normalizedPath}`);
     return `${localizedPath}${suffix}`;
   };
 
@@ -76,9 +75,7 @@ export function createLocalizedRouter<
     const normalizedPath = normalizePathname(unprefixedPath);
 
     if (
-      normalizedTechnicalRoots.some((root) =>
-        matchesRoot(normalizedPath, root),
-      )
+      normalizedTechnicalRoots.some((root) => matchesRoot(normalizedPath, root))
     ) {
       return 'technical';
     }
@@ -114,9 +111,9 @@ export type LocalizedRouteParams = {
   locale: string;
 };
 
-export function createLocalizedRoutePaths<
-  TDefinition extends LocaleDefinition,
->(localeConfig: LocaleConfig<TDefinition>): readonly {
+export function createLocalizedRoutePaths<TDefinition extends LocaleDefinition>(
+  localeConfig: LocaleConfig<TDefinition>,
+): readonly {
   params: LocalizedRouteParams;
   props: { locale: TDefinition['id'] };
 }[] {

package/src/seo/localizedMeta.ts

@@ -14,9 +14,7 @@ export type LocalizedMetaInput = Omit<
   canonical: string;
 };
 
-export function createLocalizedPageMeta<
-  TDefinition extends LocaleDefinition,
->({
+export function createLocalizedPageMeta<TDefinition extends LocaleDefinition>({
   input,
   locale,
   localeConfig,
@@ -30,9 +28,7 @@ export function createLocalizedPageMeta<
   socialImageAlt?: string;
 }): PageMeta {
   const definition = localeConfig.getDefinition(locale);
-  const { path } = router.stripLocalePrefix(
-    normalizePathname(input.canonical),
-  );
+  const { path } = router.stripLocalePrefix(normalizePathname(input.canonical));
   const alternates = localeConfig.definitions.map((alternateLocale) => ({
     lang: alternateLocale.languageTag,
     href: router.localizePath(path, alternateLocale.id),

package/src/styles/interaction.css

@@ -1,3 +1,10 @@
+[data-theme-switching='true'],
+[data-theme-switching='true'] *,
+[data-theme-switching='true'] *::before,
+[data-theme-switching='true'] *::after {
+  transition: none !important;
+}
+
 [data-interaction-accent] {
   --nox-interaction-accent-hover-background: color-mix(
     in srgb,
@@ -31,13 +38,13 @@
 
 @media (hover: none) and (pointer: coarse) {
   :where(
-      a[href],
-      button,
-      summary,
-      [role='button'],
-      [role='link'],
-      [tabindex]:not(input, select, textarea)
-    ):focus-visible {
+    a[href],
+    button,
+    summary,
+    [role='button'],
+    [role='link'],
+    [tabindex]:not(input, select, textarea)
+  ):focus-visible {
     --nox-focus-ring: transparent;
     --nox-tone-focus-ring: transparent;
 

package/src/styles/style.css

@@ -18,12 +18,9 @@
   layer(components);
 @import '../components/actions/Button/Button.css' layer(components);
 @import '../components/actions/ThemeToggle/ThemeToggle.css' layer(components);
-@import '../components/actions/CardAction/CardAction.css'
-  layer(components);
-@import '../components/actions/ScrollToTop/ScrollToTop.css'
-  layer(components);
-@import '../components/actions/MediaTrigger/MediaTrigger.css'
-  layer(components);
+@import '../components/actions/CardAction/CardAction.css' layer(components);
+@import '../components/actions/ScrollToTop/ScrollToTop.css' layer(components);
+@import '../components/actions/MediaTrigger/MediaTrigger.css' layer(components);
 @import '../components/content/CodeBlock/CodeBlock.css' layer(components);
 @import '../components/content/CardBody/CardBody.css' layer(components);
 @import '../components/content/CardFooter/CardFooter.css' layer(components);
@@ -33,15 +30,11 @@
   layer(components);
 @import '../components/content/MarkdownContent/MarkdownContent.css'
   layer(components);
-@import '../components/data-display/BadgeList/BadgeList.css'
-  layer(components);
-@import '../components/data-display/IconList/IconList.css'
-  layer(components);
-@import '../components/data-display/MetricTile/MetricTile.css'
-  layer(components);
+@import '../components/data-display/BadgeList/BadgeList.css' layer(components);
+@import '../components/data-display/IconList/IconList.css' layer(components);
+@import '../components/data-display/MetricTile/MetricTile.css' layer(components);
 @import '../components/data-display/Tag/Tag.css' layer(components);
-@import '../components/data-display/TextPair/TextPair.css'
-  layer(components);
+@import '../components/data-display/TextPair/TextPair.css' layer(components);
 @import '../components/forms/Checkbox/Checkbox.css' layer(components);
 @import '../components/forms/ChoiceGroup/ChoiceGroup.css' layer(components);
 @import '../components/forms/FieldLabel/FieldLabel.css' layer(components);
@@ -53,13 +46,11 @@
 @import '../components/feedback/Spinner/Spinner.css' layer(components);
 @import '../components/icons/CurrencyIcon.css' layer(components);
 @import '../components/icons/CircleSymbolIcon.css' layer(components);
-@import '../components/media/CanvasFrame/CanvasFrame.css'
-  layer(components);
-@import '../components/media/EmbedFrame/EmbedFrame.css'
-  layer(components);
+@import '../components/media/CanvasFrame/CanvasFrame.css' layer(components);
+@import '../components/media/EmbedFrame/EmbedFrame.css' layer(components);
 @import '../components/media/MediaFrame/MediaFrame.css' layer(components);
-@import '../components/navigation/Breadcrumbs/Breadcrumbs.css'
-  layer(components);
+@import '../components/monetization/AdSlot/AdSlot.css' layer(components);
+@import '../components/navigation/Breadcrumbs/Breadcrumbs.css' layer(components);
 @import '../components/navigation/Header.css' layer(components);
 @import '../components/navigation/Footer/Footer.css' layer(components);
 @import '../components/navigation/NavigationBrand.css' layer(components);

package/src/theme/contracts.ts

@@ -1,9 +1,4 @@
 export type Tone =
-  | 'neutral'
-  | 'primary'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'danger';
+  'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
 
 export type ColorTheme = 'light' | 'dark';