@astronox/core 0.2.4 → 0.3.0

package/src/ads/adsense.ts

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

package/src/ads/contracts.ts

@@ -0,0 +1,11 @@
+export type AdSlotState =
+  'idle' | 'loading' | 'filled' | 'blocked' | 'unavailable';
+
+export type AdConsentProvider = {
+  canLoadAds(): boolean | Promise<boolean>;
+};
+
+export interface AdProvider {
+  load(): Promise<void>;
+  request(slot: HTMLElement): Promise<void>;
+}

package/src/ads/index.ts

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

package/src/ads/slot.ts

@@ -0,0 +1,16 @@
+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/auth/contracts.ts

@@ -22,10 +22,7 @@ export interface IdentityProvider<TCredential = string> {
 }
 
 export interface SessionProvider<TCredential = string> {
-  create(
-    credential: TCredential,
-    actor: AuthActor,
-  ): Promise<AuthSessionGrant>;
+  create(credential: TCredential, actor: AuthActor): Promise<AuthSessionGrant>;
   get(token: string): Promise<AuthSession | null>;
   revoke(token: string): Promise<void>;
 }

package/src/auth/firebase/client.ts

@@ -5,9 +5,10 @@ import {
   GoogleAuthProvider,
   getAuth,
   initializeAuth,
-  onAuthStateChanged,
+  onIdTokenChanged,
   signInWithPopup,
   signOut,
+  getIdTokenResult,
   type Auth,
   type User,
 } from 'firebase/auth';
@@ -42,10 +43,11 @@ function initializeBrowserAuth(app: FirebaseApp): Auth {
   }
 }
 
-function toAuthActor(user: User): AuthActor {
+async function toAuthActor(user: User): Promise<AuthActor> {
+  const token = await getIdTokenResult(user);
   return {
     id: user.uid,
-    claims: {},
+    claims: { ...token.claims },
     displayName: user.displayName ?? undefined,
     email: user.email ?? undefined,
     imageUrl: user.photoURL ?? undefined,
@@ -64,17 +66,28 @@ export function createFirebaseGoogleAuthClient(
 
   return {
     observe(listener, onError) {
-      return onAuthStateChanged(
+      let revision = 0;
+      return onIdTokenChanged(
         auth,
         (user) => {
-          listener(user ? toAuthActor(user) : null);
+          const currentRevision = ++revision;
+          if (!user) {
+            listener(null);
+            return;
+          }
+          void toAuthActor(user).then(
+            (actor) => {
+              if (revision === currentRevision) listener(actor);
+            },
+            (reason) => onError?.(reason),
+          );
         },
         onError,
       );
     },
     async signIn() {
       const result = await signInWithPopup(auth, provider);
-      return toAuthActor(result.user);
+      return await toAuthActor(result.user);
     },
     async signOut() {
       await signOut(auth);

package/src/auth/firebase/index.ts

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

package/src/client/formSubmission.ts

@@ -140,7 +140,12 @@ function compareValues(
       left.getTime() === right.getTime()
     );
   }
-  if (!left || !right || typeof left !== 'object' || typeof right !== 'object') {
+  if (
+    !left ||
+    !right ||
+    typeof left !== 'object' ||
+    typeof right !== 'object'
+  ) {
     return false;
   }
 

package/src/client/preferences.ts

@@ -84,7 +84,9 @@ export function definePreference<T>(
 ): PreferenceDefinition<T> {
   assertDefinition(definition);
   if (!matchesPreferenceSchema(definition.defaultValue, definition.schema)) {
-    throw new TypeError(`Invalid default value for preference ${definition.id}`);
+    throw new TypeError(
+      `Invalid default value for preference ${definition.id}`,
+    );
   }
   return definition;
 }
@@ -221,7 +223,10 @@ export function createPreferenceRegistry({
       };
     },
     destroy(): void {
-      document.removeEventListener(preferenceChangeEvent, handlePreferenceChange);
+      document.removeEventListener(
+        preferenceChangeEvent,
+        handlePreferenceChange,
+      );
       window.removeEventListener('storage', handleStorage);
       listeners.clear();
     },
@@ -340,8 +345,7 @@ function applyMigration(
 
 function getGlobalSnapshot(): PreferenceSnapshot | undefined {
   return (globalThis as Record<string, unknown>)[snapshotGlobalKey] as
-    | PreferenceSnapshot
-    | undefined;
+    PreferenceSnapshot | undefined;
 }
 
 function setGlobalSnapshot(snapshot: PreferenceSnapshot): void {

package/src/components/actions/Button/Button.astro

@@ -57,21 +57,17 @@ const resolvedTone = tone ?? dataTone;
       rel={resolvedRel}
       target={target}
     >
-      {
-        hasLeading ? (
-          <span class="nox-button__affix">
-            <slot name="leading" />
-          </span>
-        ) : null
-      }
+      {hasLeading ? (
+        <span class="nox-button__affix">
+          <slot name="leading" />
+        </span>
+      ) : null}
       <slot />
-      {
-        hasTrailing ? (
-          <span class="nox-button__affix">
-            <slot name="trailing" />
-          </span>
-        ) : null
-      }
+      {hasTrailing ? (
+        <span class="nox-button__affix">
+          <slot name="trailing" />
+        </span>
+      ) : null}
     </a>
   ) : href ? (
     <span
@@ -86,21 +82,17 @@ const resolvedTone = tone ?? dataTone;
       data-button-size={size}
       data-tone={resolvedTone}
     >
-      {
-        hasLeading ? (
-          <span class="nox-button__affix">
-            <slot name="leading" />
-          </span>
-        ) : null
-      }
+      {hasLeading ? (
+        <span class="nox-button__affix">
+          <slot name="leading" />
+        </span>
+      ) : null}
       <slot />
-      {
-        hasTrailing ? (
-          <span class="nox-button__affix">
-            <slot name="trailing" />
-          </span>
-        ) : null
-      }
+      {hasTrailing ? (
+        <span class="nox-button__affix">
+          <slot name="trailing" />
+        </span>
+      ) : null}
     </span>
   ) : (
     <button
@@ -116,21 +108,17 @@ const resolvedTone = tone ?? dataTone;
       disabled={disabled}
       type={type}
     >
-      {
-        hasLeading ? (
-          <span class="nox-button__affix">
-            <slot name="leading" />
-          </span>
-        ) : null
-      }
+      {hasLeading ? (
+        <span class="nox-button__affix">
+          <slot name="leading" />
+        </span>
+      ) : null}
       <slot />
-      {
-        hasTrailing ? (
-          <span class="nox-button__affix">
-            <slot name="trailing" />
-          </span>
-        ) : null
-      }
+      {hasTrailing ? (
+        <span class="nox-button__affix">
+          <slot name="trailing" />
+        </span>
+      ) : null}
     </button>
   )
 }

package/src/components/actions/CardAction/CardAction.css

@@ -59,8 +59,7 @@
   color: var(--nox-tone-color);
 }
 
-.card-action[data-card-action-visual-position='end']
-  .card-action__visual {
+.card-action[data-card-action-visual-position='end'] .card-action__visual {
   grid-column: 2;
   border-inline-start: var(--surface-border-width) solid
     var(--surface-border-color);
@@ -98,8 +97,7 @@
   overflow-wrap: anywhere;
 }
 
-.card-action[data-card-action-label-treatment='heading']
-  .card-action__label {
+.card-action[data-card-action-label-treatment='heading'] .card-action__label {
   font-size: var(--nox-font-size-lg);
   letter-spacing: var(--nox-letter-spacing-wide);
   text-transform: uppercase;
@@ -110,8 +108,7 @@
   grid-row: 1;
 }
 
-.card-action[data-card-action-visual-position='end']
-  .card-action__label {
+.card-action[data-card-action-visual-position='end'] .card-action__label {
   grid-column: 1;
 }
 
@@ -172,13 +169,11 @@
 }
 
 @media (width < 48rem) {
-  .card-action[data-card-action-compact-label]
-    .card-action__label-full {
+  .card-action[data-card-action-compact-label] .card-action__label-full {
     display: none;
   }
 
-  .card-action[data-card-action-compact-label]
-    .card-action__label-compact {
+  .card-action[data-card-action-compact-label] .card-action__label-compact {
     display: block;
   }
 

package/src/components/actions/IdentityProviderAction/IdentityProviderAction.astro

@@ -3,18 +3,14 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import Button from '../Button/Button.astro';
 
-type Props = HTMLAttributes<'button'> & {
+type Props = Omit<HTMLAttributes<'button'>, 'disabled'> & {
+  disabled?: boolean;
   label: string;
   pendingLabel?: string;
   tone?: Tone;
 };
 
-const {
-  label,
-  pendingLabel = label,
-  tone,
-  ...attrs
-}: Props = Astro.props;
+const { label, pendingLabel = label, tone, ...attrs }: Props = Astro.props;
 ---
 
 <Button
@@ -28,7 +24,9 @@ const {
 >
   {
     Astro.slots.has('leading') ? (
-      <span slot="leading"><slot name="leading" /></span>
+      <span slot="leading">
+        <slot name="leading" />
+      </span>
     ) : null
   }
   <span data-auth-provider-action-label>{label}</span>

package/src/components/actions/MediaTrigger/MediaTrigger.astro

@@ -12,7 +12,7 @@ type SharedProps = {
 };
 
 type Props = SharedProps &
-  Omit<HTMLAttributes<'a'>, 'href' | 'type'> & {
+  Omit<HTMLAttributes<'a'>, 'href' | 'media' | 'type'> & {
     href?: string;
   };
 

package/src/components/actions/ScrollToTop/ScrollToTop.astro

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'astro/types';
 import Button from '../Button/Button.astro';
 import ArrowUpIcon from '../../icons/ArrowUpIcon.astro';
 
-type Props = Omit<HTMLAttributes<'button'>, 'type'> & {
+type Props = Omit<HTMLAttributes<'button'>, 'disabled' | 'type'> & {
+  disabled?: boolean;
   label: string;
 };
 

package/src/components/actions/ScrollToTop/ScrollToTop.css

@@ -1,12 +1,8 @@
 .scroll-to-top.nox-button {
   position: fixed;
   z-index: 45;
-  inset-inline-end: calc(
-    var(--nox-space-5) + env(safe-area-inset-right)
-  );
-  inset-block-end: calc(
-    var(--nox-space-5) + env(safe-area-inset-bottom)
-  );
+  inset-inline-end: calc(var(--nox-space-5) + env(safe-area-inset-right));
+  inset-block-end: calc(var(--nox-space-5) + env(safe-area-inset-bottom));
   inline-size: var(--nox-section-compact-block-size);
   block-size: var(--nox-section-compact-block-size);
   min-block-size: 0;

package/src/components/actions/ThemeToggle/ThemeToggle.astro

@@ -30,9 +30,9 @@ const {
   data-theme-toggle-dark-label={darkLabel}
   data-theme-toggle-light-label={lightLabel}
   data-navigation-control={appearance === 'circle' ? '' : undefined}
-  data-navigation-control-appearance={
-    appearance === 'circle' ? 'bar' : undefined
-  }
+  data-navigation-control-appearance={appearance === 'circle'
+    ? 'bar'
+    : undefined}
 >
   <span
     class="theme-toggle__icon"

package/src/components/actions/ThemeToggle/themeToggleController.ts

@@ -11,8 +11,7 @@ function isColorTheme(value: string | null): value is ColorTheme {
 
 function getStorageKey(): string {
   return (
-    document.documentElement.dataset.themeStorageKey ??
-    defaultThemeStorageKey
+    document.documentElement.dataset.themeStorageKey ?? defaultThemeStorageKey
   );
 }
 
@@ -31,7 +30,7 @@ function getSystemTheme(): ColorTheme {
 
 function getCurrentTheme(): ColorTheme {
   const value = document.documentElement.dataset.theme ?? null;
-  return isColorTheme(value) ? value : readStoredTheme() ?? getSystemTheme();
+  return isColorTheme(value) ? value : (readStoredTheme() ?? getSystemTheme());
 }
 
 function updateToggle(toggle: HTMLElement, theme: ColorTheme): void {

package/src/components/content/CardFooter/CardFooter.css

@@ -42,16 +42,14 @@
     var(--card-footer-size);
 }
 
-.card-footer[data-has-leading-action][data-has-action]
-  .card-footer__layout {
+.card-footer[data-has-leading-action][data-has-action] .card-footer__layout {
   grid-template-columns:
     var(--card-footer-size)
     minmax(0, 1fr)
     var(--card-footer-size);
 }
 
-.card-footer[data-has-leading-action][data-has-media]
-  .card-footer__layout {
+.card-footer[data-has-leading-action][data-has-media] .card-footer__layout {
   grid-template-columns:
     var(--card-footer-size)
     var(--card-footer-size)

package/src/components/content/CardHeader/CardHeader.astro

@@ -2,10 +2,7 @@
 import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import type { DisplayMedia, TextWeight } from '../../../display/contracts';
-import type {
-  AstroComponent,
-  HeadingLevel,
-} from '../../widgetTypes';
+import type { AstroComponent, HeadingLevel } from '../../widgetTypes';
 import Inline from '../../../composition/Inline/Inline.astro';
 import Media from '../../../primitives/media/Media/Media.astro';
 

package/src/components/content/CardLink/CardLink.astro

@@ -90,11 +90,7 @@ const resolvedTone = tone ?? dataTone;
           {Icon ? (
             <Icon class="card-link__icon" data-tone={iconTone} />
           ) : media ? (
-            <Media
-              media={media}
-              fit="contain"
-              size="intrinsic"
-            />
+            <Media media={media} fit="contain" size="intrinsic" />
           ) : null}
         </span>
       ) : null
@@ -104,11 +100,7 @@ const resolvedTone = tone ?? dataTone;
       {
         hasContentMedia && media ? (
           <span class="card-link__content-media" aria-hidden="true">
-            <Media
-              media={media}
-              fit="contain"
-              size="intrinsic"
-            />
+            <Media media={media} fit="contain" size="intrinsic" />
           </span>
         ) : null
       }
@@ -134,11 +126,7 @@ const resolvedTone = tone ?? dataTone;
           {Icon ? (
             <Icon class="card-link__icon" data-tone={iconTone} />
           ) : media ? (
-            <Media
-              media={media}
-              fit="contain"
-              size="intrinsic"
-            />
+            <Media media={media} fit="contain" size="intrinsic" />
           ) : null}
         </span>
       ) : null

package/src/components/content/CardLink/CardLink.css

@@ -154,26 +154,17 @@
   );
 }
 
-.card-link:is(
-    [data-media-size='compact'],
-    [data-media-size='small']
-  )
+.card-link:is([data-media-size='compact'], [data-media-size='small'])
   .card-link__layout {
   --card-link-artwork-max-size: var(--card-link-resolved-media-size);
 }
 
-.card-link:is(
-    [data-media-size='compact'],
-    [data-media-size='small']
-  )
+.card-link:is([data-media-size='compact'], [data-media-size='small'])
   .card-link__content {
   --card-link-content-media-size: var(--card-link-resolved-media-size);
 }
 
-.card-link:is(
-    [data-media-size='compact'],
-    [data-media-size='small']
-  )
+.card-link:is([data-media-size='compact'], [data-media-size='small'])
   :is(.card-link__media, .card-link__content-media)
   [data-widget='media'] {
   --media-object-inline-size: 100%;
@@ -203,9 +194,7 @@
 }
 
 .card-link[data-density='relaxed'] .card-link__layout {
-  --card-link-size: calc(
-    var(--nox-navigation-block-size) + var(--nox-space-5)
-  );
+  --card-link-size: calc(var(--nox-navigation-block-size) + var(--nox-space-5));
 }
 
 .card-link[data-density='relaxed'] .card-link__content {

package/src/components/content/CodeBlock/CodeBlock.astro

@@ -3,10 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 import Button from '../../actions/Button/Button.astro';
 import CopyIcon from '../../icons/CopyIcon.astro';
 import type { Tone } from '../../../theme/contracts';
-import type {
-  CodeBlockCopy,
-  CodeBlockPresentation,
-} from './contracts';
+import type { CodeBlockCopy, CodeBlockPresentation } from './contracts';
 
 type Props = HTMLAttributes<'pre'> & {
   copy?: CodeBlockCopy;
@@ -42,7 +39,9 @@ const resolvedTone = tone ?? dataTone;
         data-code-block-content
         data-code-block-presentation={presentation}
         data-wrap={wrap ? true : undefined}
-      >{text}</pre>
+      >
+        {text}
+      </pre>
       <Button
         class="code-block__copy"
         type="button"
@@ -75,7 +74,9 @@ const resolvedTone = tone ?? dataTone;
       data-code-block-presentation={presentation}
       data-tone={resolvedTone}
       data-wrap={wrap ? true : undefined}
-    >{text}</pre>
+    >
+      {text}
+    </pre>
   )
 }