@astronox/core 0.4.7 → 0.4.9

package/package.json

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

package/src/ads/adsense/AdsenseHead.astro

@@ -1,55 +1,21 @@
 ---
 import type { AdsenseAdsConfig } from '../contracts';
-import {
-  renderAdsenseControlledMessagingScript,
-  renderAdsenseErrorProtectionScript,
-  toAdsenseClientId,
-} from './provider';
+import { toAdsenseClientId } from './provider';
 
 type Props = {
   config: AdsenseAdsConfig;
-  offerwallEligible: boolean;
 };
 
-const { config, offerwallEligible }: Props = Astro.props;
+const { config }: Props = Astro.props;
 const clientId = toAdsenseClientId(config.publisherId);
-const runtimeConfig = JSON.stringify({
-  allowedHosts: config.allowedHosts,
-  clientId,
-  messaging: {
-    adBlockingRecovery: config.messaging.adBlockingRecovery,
-    offerwall: config.messaging.offerwall,
-    offerwallEligible,
-  },
-  publisherId: config.publisherId,
-}).replaceAll('<', '\\u003c');
-const errorProtectionScript = config.messaging.errorProtectionCode
-  ? renderAdsenseErrorProtectionScript({
-      allowedHosts: config.allowedHosts,
-      code: config.messaging.errorProtectionCode,
-    })
-  : undefined;
-const controlledMessagingScript = renderAdsenseControlledMessagingScript(
-  config.messaging.offerwall && offerwallEligible,
-);
+const scriptSource = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${encodeURIComponent(clientId)}`;
 ---
 
 <meta name="google-adsense-account" content={clientId} />
-<script
-  is:inline
-  type="application/json"
-  data-astronox-adsense-config
-  set:html={runtimeConfig}
-/>
-<script is:inline set:html={controlledMessagingScript} />
-{
-  errorProtectionScript ? (
-    <script is:inline set:html={errorProtectionScript} />
-  ) : null
-}
+<script is:inline async crossorigin="anonymous" src={scriptSource}></script>
 
 <script>
-  import { initAdsenseFromDocument } from './runtime';
+  import { initAdAnnotationProtection } from './runtime';
 
-  initAdsenseFromDocument();
+  initAdAnnotationProtection();
 </script>

package/src/ads/adsense/index.ts

@@ -1,3 +1,2 @@
 export { default as AdsenseHead } from './AdsenseHead.astro';
-export { default as AdsenseUnit } from './AdsenseUnit.astro';
 export * from './provider';

package/src/ads/adsense/provider.ts

@@ -7,35 +7,3 @@ export function toAdsenseClientId(publisherId: string): string {
 export function renderAdsenseAdsTxt(publisherId: string): string {
   return `google.com, ${publisherId}, DIRECT, ${adsenseSellerId}\n`;
 }
-
-export function renderAdsenseErrorProtectionScript({
-  allowedHosts,
-  code,
-}: {
-  allowedHosts: readonly string[];
-  code: string;
-}): string {
-  const hosts = JSON.stringify(
-    allowedHosts.map((host) => host.toLowerCase()),
-  ).replaceAll('<', '\\u003c');
-
-  return `if (${hosts}.includes(window.location.hostname.toLowerCase())) {\n${code}\n}`;
-}
-
-export function renderAdsenseControlledMessagingScript(
-  offerwallAllowed: boolean,
-): string {
-  return `window.googlefc = window.googlefc || {};
-window.googlefc.controlledMessagingFunction = function (message) {
-  if (${String(offerwallAllowed)}) {
-    message.proceed(true);
-    return;
-  }
-  var offerwall = window.googlefc.MessageTypeEnum && window.googlefc.MessageTypeEnum.OFFERWALL;
-  if (typeof offerwall === 'number') {
-    message.proceed(false, [offerwall]);
-    return;
-  }
-  message.proceed(true);
-};`;
-}

package/src/ads/adsense/runtime.ts

@@ -1,89 +1,5 @@
-import { setAdSlotState } from '../slot';
-
-const adsenseScriptTimeoutMs = 12_000;
-const adsenseUnitTimeoutMs = 30_000;
-
-type ControlledMessage = {
-  proceed(allowed: boolean, messageTypes?: readonly number[]): void;
-};
-
-type GoogleFundingChoicesCallback =
-  (() => void) | { CONSENT_API_READY: () => void };
-
-type GoogleFundingChoices = {
-  callbackQueue?: {
-    push(callback: GoogleFundingChoicesCallback): number;
-  };
-  controlledMessagingFunction?: (message: ControlledMessage) => void;
-  MessageTypeEnum?: {
-    OFFERWALL: number;
-  };
-  showRevocationMessage?: () => void;
-};
-
-type AdsenseRuntimeConfig = {
-  allowedHosts: readonly string[];
-  clientId: string;
-  messaging: {
-    adBlockingRecovery: boolean;
-    offerwall: boolean;
-    offerwallEligible: boolean;
-  };
-  publisherId: string;
-};
-
-declare global {
-  interface Window {
-    adsbygoogle?: Record<string, unknown>[];
-    googlefc?: GoogleFundingChoices;
-  }
-}
-
-let adsenseScript: Promise<void> | undefined;
-
-export function initAdsenseFromDocument(): void {
-  const config = readRuntimeConfig();
-  if (!config || !isAllowedHost(config.allowedHosts)) {
-    setAllAdUnitsState('unavailable');
-    return;
-  }
-
+export function initAdAnnotationProtection(): void {
   protectAdAnnotations();
-  configureControlledMessaging(config);
-  initPrivacySettingsControls();
-  if (config.messaging.adBlockingRecovery) {
-    loadAdBlockingRecovery(config.publisherId);
-  }
-
-  void loadAdsenseScript(config.clientId)
-    .then(initAdUnits)
-    .catch(() => setAllAdUnitsState('blocked'));
-}
-
-function readRuntimeConfig(): AdsenseRuntimeConfig | undefined {
-  const element = document.querySelector<HTMLScriptElement>(
-    'script[data-astronox-adsense-config]',
-  );
-  if (!element?.textContent) return undefined;
-
-  try {
-    return JSON.parse(element.textContent) as AdsenseRuntimeConfig;
-  } catch {
-    return undefined;
-  }
-}
-
-function isAllowedHost(allowedHosts: readonly string[]): boolean {
-  const hostname = window.location.hostname.toLowerCase();
-  if (
-    hostname === 'localhost' ||
-    hostname.endsWith('.localhost') ||
-    hostname === '127.0.0.1' ||
-    hostname === '::1'
-  ) {
-    return false;
-  }
-  return allowedHosts.some((host) => host.toLowerCase() === hostname);
 }
 
 function protectAdAnnotations(): void {
@@ -110,175 +26,3 @@ function protectAdAnnotations(): void {
     }
   }).observe(document.documentElement, { childList: true, subtree: true });
 }
-
-function configureControlledMessaging(config: AdsenseRuntimeConfig): void {
-  const googlefc = (window.googlefc ??= {});
-  googlefc.controlledMessagingFunction = (message) => {
-    const allowOfferwall =
-      config.messaging.offerwall && config.messaging.offerwallEligible;
-    if (allowOfferwall) {
-      message.proceed(true);
-      return;
-    }
-
-    const offerwallType = window.googlefc?.MessageTypeEnum?.OFFERWALL;
-    if (typeof offerwallType === 'number') {
-      message.proceed(false, [offerwallType]);
-      return;
-    }
-
-    message.proceed(true);
-  };
-}
-
-function initPrivacySettingsControls(): void {
-  const googlefc = (window.googlefc ??= {});
-  googlefc.callbackQueue ??= [];
-  googlefc.callbackQueue.push({
-    CONSENT_API_READY: () => {
-      for (const control of document.querySelectorAll<HTMLButtonElement>(
-        '[data-ads-consent-settings]:not([data-ads-consent-initialized])',
-      )) {
-        control.dataset.adsConsentInitialized = 'true';
-        control.hidden = false;
-        control.addEventListener('click', () => {
-          const showRevocationMessage = window.googlefc?.showRevocationMessage;
-          if (showRevocationMessage) {
-            window.googlefc?.callbackQueue?.push(showRevocationMessage);
-          }
-        });
-      }
-    },
-  });
-}
-
-function loadAdBlockingRecovery(publisherId: string): void {
-  if (document.querySelector('script[data-astronox-ad-recovery]')) return;
-
-  const script = document.createElement('script');
-  script.async = true;
-  script.dataset.astronoxAdRecovery = '';
-  script.src = `https://fundingchoicesmessages.google.com/i/${encodeURIComponent(publisherId)}?ers=1`;
-  document.head.append(script);
-  signalFundingChoicesPresence();
-}
-
-function signalFundingChoicesPresence(): void {
-  if (document.querySelector('iframe[name="googlefcPresent"]')) return;
-  if (!document.body) {
-    window.setTimeout(signalFundingChoicesPresence, 0);
-    return;
-  }
-
-  const frame = document.createElement('iframe');
-  frame.name = 'googlefcPresent';
-  frame.hidden = true;
-  frame.style.display = 'none';
-  document.body.append(frame);
-}
-
-function loadAdsenseScript(clientId: string): Promise<void> {
-  if (adsenseScript) return adsenseScript;
-
-  const loading = new Promise<void>((resolve, reject) => {
-    const existing = document.querySelector<HTMLScriptElement>(
-      'script[data-astronox-adsense]',
-    );
-    if (existing?.dataset.loaded === 'true') {
-      resolve();
-      return;
-    }
-
-    const script = existing ?? document.createElement('script');
-    const timeout = window.setTimeout(() => {
-      reject(new Error('AdSense loading timed out'));
-    }, adsenseScriptTimeoutMs);
-    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) {
-      script.async = true;
-      script.crossOrigin = 'anonymous';
-      script.dataset.astronoxAdsense = '';
-      script.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${encodeURIComponent(clientId)}`;
-      document.head.append(script);
-    }
-  });
-  adsenseScript = loading;
-  void loading.catch(() => {
-    if (adsenseScript === loading) adsenseScript = undefined;
-  });
-
-  return loading;
-}
-
-function initAdUnits(): void {
-  for (const slot of document.querySelectorAll<HTMLElement>(
-    '[data-adsense-unit]:not([data-adsense-initialized])',
-  )) {
-    initAdUnit(slot);
-  }
-}
-
-function initAdUnit(slot: HTMLElement): void {
-  slot.dataset.adsenseInitialized = 'true';
-  setAdSlotState(slot, 'loading');
-  const advertisement = slot.querySelector<HTMLElement>('.adsbygoogle');
-  if (!advertisement) {
-    setAdSlotState(slot, 'unavailable');
-    return;
-  }
-
-  const timeout = window.setTimeout(() => {
-    setAdSlotState(slot, 'unavailable');
-  }, adsenseUnitTimeoutMs);
-  const sync = (): void => {
-    if (advertisement.dataset.adStatus === 'filled') {
-      window.clearTimeout(timeout);
-      observer.disconnect();
-      setAdSlotState(slot, 'filled');
-    } else if (advertisement.dataset.adStatus === 'unfilled') {
-      window.clearTimeout(timeout);
-      observer.disconnect();
-      setAdSlotState(slot, 'unavailable');
-    }
-  };
-  const observer = new MutationObserver(sync);
-  observer.observe(advertisement, {
-    attributes: true,
-    attributeFilter: ['data-ad-status'],
-  });
-
-  try {
-    window.adsbygoogle ??= [];
-    window.adsbygoogle.push({});
-    sync();
-  } catch {
-    window.clearTimeout(timeout);
-    observer.disconnect();
-    setAdSlotState(slot, 'unavailable');
-  }
-}
-
-function setAllAdUnitsState(state: 'blocked' | 'unavailable'): void {
-  for (const slot of document.querySelectorAll<HTMLElement>(
-    '[data-adsense-unit]',
-  )) {
-    setAdSlotState(slot, state);
-  }
-}

package/src/ads/contracts.ts

@@ -1,6 +1,3 @@
-export type AdSlotState =
-  'idle' | 'loading' | 'filled' | 'blocked' | 'unavailable';
-
 export type DisabledAdsConfig = {
   enabled: false;
 };
@@ -8,16 +5,7 @@ export type DisabledAdsConfig = {
 export type AdsenseAdsConfig = {
   enabled: true;
   provider: 'adsense';
-  allowedHosts: readonly string[];
   publisherId: string;
-  units: {
-    pageEnd: string;
-  };
-  messaging: {
-    adBlockingRecovery: boolean;
-    offerwall: boolean;
-    errorProtectionCode?: string;
-  };
 };
 
 export type AdsConfig = DisabledAdsConfig | AdsenseAdsConfig;
@@ -31,43 +19,8 @@ export function defineAdsConfig<const TConfig extends AdsConfig>(
 ): TConfig {
   if (!config.enabled) return config;
 
-  if (config.allowedHosts.length === 0) {
-    throw new Error('Ad configuration requires at least one allowed hostname');
-  }
-  for (const host of config.allowedHosts) {
-    if (!isValidHostname(host)) {
-      throw new Error(`Invalid advertising hostname: ${host}`);
-    }
-  }
   if (!/^pub-\d+$/.test(config.publisherId)) {
     throw new Error('Invalid AdSense publisher id');
   }
-  if (!/^\d+$/.test(config.units.pageEnd)) {
-    throw new Error('Invalid AdSense page-end slot id');
-  }
-  if (/<\/script/i.test(config.messaging.errorProtectionCode ?? '')) {
-    throw new Error(
-      'AdSense error protection must contain the script body only',
-    );
-  }
-
   return config;
 }
-
-function isValidHostname(host: string): boolean {
-  if (!host || host !== host.trim() || host.includes('/')) return false;
-  if (
-    host.toLowerCase() === 'localhost' ||
-    host.toLowerCase().endsWith('.localhost') ||
-    host === '127.0.0.1' ||
-    host === '::1'
-  ) {
-    return false;
-  }
-
-  try {
-    return new URL(`https://${host}`).hostname === host.toLowerCase();
-  } catch {
-    return false;
-  }
-}

package/src/ads/index.ts

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

package/src/components/index.ts

@@ -40,7 +40,6 @@ export { default as Tooltip } from './feedback/Tooltip/Tooltip.astro';
 export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
 export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';
 export { default as MediaFrame } from './media/MediaFrame/MediaFrame.astro';
-export { default as AdSlot } from './monetization/AdSlot/AdSlot.astro';
 export { default as Breadcrumbs } from './navigation/Breadcrumbs/Breadcrumbs.astro';
 export { default as DesktopNavigation } from './navigation/DesktopNavigation.astro';
 export { default as Header } from './navigation/Header.astro';

package/src/layouts/BaseLayout.astro

@@ -62,30 +62,32 @@ const resolvedTone = tone ?? dataTone;
     <slot name="head" />
   </head>
   <body>
-    <slot name="skip-link" />
-    <slot name="header" />
-    <div class="site-viewport" data-site-viewport>
-      <main id="content" class="site-main" tabindex="-1">
-        <div class="site-main__content">
-          {
-            breadcrumbs?.length ? (
-              <Breadcrumbs
-                {...adAnnotationExclusionAttributes}
-                items={breadcrumbs}
-                label={breadcrumbLabel}
-                tone={breadcrumbTone}
-              />
-            ) : null
-          }
+    <div class="site-shell">
+      <slot name="skip-link" />
+      <slot name="header" />
+      <div class="site-viewport" data-site-viewport>
+        <main id="content" class="site-main" tabindex="-1">
+          <div class="site-main__content">
+            {
+              breadcrumbs?.length ? (
+                <Breadcrumbs
+                  {...adAnnotationExclusionAttributes}
+                  items={breadcrumbs}
+                  label={breadcrumbLabel}
+                  tone={breadcrumbTone}
+                />
+              ) : null
+            }
 
-          <PageSurface {...pageSurfaceAttributes}>
-            <slot />
-            <slot name="page-end" />
-          </PageSurface>
-        </div>
-      </main>
-      <slot name="footer" />
+            <PageSurface {...pageSurfaceAttributes}>
+              <slot />
+              <slot name="page-end" />
+            </PageSurface>
+          </div>
+        </main>
+        <slot name="footer" />
+      </div>
+      {scrollToTopLabel ? <ScrollToTop label={scrollToTopLabel} /> : null}
     </div>
-    {scrollToTopLabel ? <ScrollToTop label={scrollToTopLabel} /> : null}
   </body>
 </html>

package/src/patterns/MapViewport/MapViewport.css

@@ -155,12 +155,12 @@
   --map-viewport-cell-surface: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 38%,
-    var(--nox-theme-surface-base)
+    var(--nox-mix-light)
   );
   --map-viewport-cell-surface-hover: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 52%,
-    var(--nox-theme-surface-base)
+    var(--nox-mix-light)
   );
   --map-viewport-cell-background: color-mix(
     in srgb,
@@ -175,7 +175,7 @@
   --map-viewport-cell-border: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 74%,
-    var(--nox-theme-text-base)
+    var(--nox-mix-dark)
   );
 
   fill: var(--map-viewport-cell-background);

package/src/styles/base.css

@@ -53,17 +53,23 @@ html {
 }
 
 body {
+  margin: 0;
+  overflow: hidden;
+  background: var(--nox-page-background);
+}
+
+.site-shell {
   display: grid;
+  width: 100vw;
   height: 100vh;
   min-height: 100vh;
   grid-template-rows: auto minmax(0, 1fr);
-  margin: 0;
   overflow: hidden;
   background: var(--nox-page-background);
 }
 
 @supports (height: 100dvh) {
-  body {
+  .site-shell {
     height: 100dvh;
     min-height: 100dvh;
   }

package/src/styles/style.css

@@ -49,7 +49,6 @@
 @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/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);

package/src/styles/tokens.css

@@ -14,7 +14,7 @@
   --nox-content-link-font-weight: var(--nox-font-weight-regular);
   --nox-content-link-emphasis-font-weight: var(--nox-font-weight-medium);
 
-  /* Public map seeds. Component states derive their full treatment from these. */
+  /* Public map palette. It stays stable across UI color themes. */
   --nox-source-map-available: #00b86b;
   --nox-source-map-unavailable: #f43f5e;
   --nox-source-map-field: #f59e0b;
@@ -48,14 +48,6 @@
   --nox-source-tone-warning: #f0ad55;
   --nox-source-tone-danger: #f47777;
 
-  --nox-source-map-available: #42d392;
-  --nox-source-map-unavailable: #fb7185;
-  --nox-source-map-field: #fbbf24;
-  --nox-source-map-grass: #84cc16;
-  --nox-source-map-mountain: #94a3b8;
-  --nox-source-map-water: #38bdf8;
-  --nox-source-map-range: #60a5fa;
-
   --nox-theme-page-base: #0f1218;
   --nox-theme-surface-base: #171b23;
   --nox-theme-text-base: #f8fafc;

package/src/ads/adsense/AdsenseUnit.astro

@@ -1,45 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-import AdSlot from '../../components/monetization/AdSlot/AdSlot.astro';
-import { toAdsenseClientId } from './provider';
-
-type Props = Omit<HTMLAttributes<'aside'>, 'aria-label'> & {
-  format: 'display' | 'multiplex';
-  label: string;
-  publisherId: string;
-  size?: 'compact' | 'standard' | 'tall';
-  slotId: string;
-};
-
-const {
-  format,
-  label,
-  publisherId,
-  size = 'standard',
-  slotId,
-  ...attrs
-}: Props = Astro.props;
-const unitAttributes =
-  format === 'multiplex'
-    ? { 'data-ad-format': 'autorelaxed' }
-    : {
-        'data-ad-format': 'auto',
-        'data-full-width-responsive': 'true',
-      };
----
-
-<AdSlot
-  {...attrs}
-  data-adsense-format={format}
-  data-adsense-unit
-  label={label}
-  size={size}
-  state="loading"
->
-  <ins
-    {...unitAttributes}
-    class="adsbygoogle"
-    style="display:block"
-    data-ad-client={toAdsenseClientId(publisherId)}
-    data-ad-slot={slotId}></ins>
-</AdSlot>

package/src/ads/slot.ts

@@ -1,16 +0,0 @@
-import type { AdSlotState } from './contracts';
-
-export function setAdSlotState(slot: HTMLElement, state: AdSlotState): void {
-  slot.dataset.adState = state;
-  slot.setAttribute('aria-busy', state === 'loading' ? 'true' : 'false');
-}
-
-export function getAdSlotState(slot: HTMLElement): AdSlotState {
-  const state = slot.dataset.adState;
-  return state === 'loading' ||
-    state === 'filled' ||
-    state === 'blocked' ||
-    state === 'unavailable'
-    ? state
-    : 'idle';
-}

package/src/components/monetization/AdSlot/AdSlot.astro

@@ -1,30 +0,0 @@
----
-import type { HTMLAttributes } from 'astro/types';
-import type { AdSlotState } from '../../../ads/contracts';
-
-type Props = Omit<HTMLAttributes<'aside'>, 'aria-label'> & {
-  label: string;
-  size?: 'compact' | 'standard' | 'tall';
-  state?: AdSlotState;
-};
-
-const {
-  class: className,
-  label,
-  size = 'standard',
-  state = 'idle',
-  ...attrs
-}: Props = Astro.props;
----
-
-<aside
-  {...attrs}
-  class:list={['ad-slot', className]}
-  data-ad-size={size}
-  data-ad-state={state}
-  data-widget="ad-slot"
-  aria-label={label}
-  aria-busy={state === 'loading' ? 'true' : 'false'}
->
-  <div class="ad-slot__content"><slot /></div>
-</aside>

package/src/components/monetization/AdSlot/AdSlot.css

@@ -1,30 +0,0 @@
-.ad-slot {
-  --ad-slot-min-block-size: 6rem;
-
-  display: grid;
-  inline-size: 100%;
-  min-block-size: var(--ad-slot-min-block-size);
-  overflow: hidden;
-  place-items: center;
-}
-
-.ad-slot[data-ad-size='compact'] {
-  --ad-slot-min-block-size: 4rem;
-}
-
-.ad-slot[data-ad-size='tall'] {
-  --ad-slot-min-block-size: 15rem;
-}
-
-.ad-slot__content {
-  inline-size: 100%;
-}
-
-.ad-slot[data-ad-state='filled'] {
-  min-block-size: 0;
-}
-
-.ad-slot[data-ad-state='blocked'],
-.ad-slot[data-ad-state='unavailable'] {
-  display: none;
-}