@astronox/core 0.2.3 → 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/Button/Button.css

@@ -150,7 +150,7 @@
     background: color-mix(
       in srgb,
       var(--nox-button-hover-tone-seed) 12%,
-      var(--nox-mix-light)
+      var(--nox-theme-surface-base)
     );
     color: var(--nox-button-hover-tone-seed);
   }

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;
 }
 
@@ -130,7 +127,7 @@
   background: color-mix(
     in srgb,
     var(--card-action-hover-seed) 12%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
 }
 
@@ -145,7 +142,7 @@
     background: color-mix(
       in srgb,
       var(--card-action-hover-seed) 12%,
-      var(--nox-mix-light)
+      var(--nox-theme-surface-base)
     );
   }
 }
@@ -154,7 +151,7 @@
   background: color-mix(
     in srgb,
     var(--card-action-hover-seed) 18%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
 }
 
@@ -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

@@ -0,0 +1,59 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import DayIcon from '../../icons/DayIcon.astro';
+import NightIcon from '../../icons/NightIcon.astro';
+
+type Props = HTMLAttributes<'button'> & {
+  appearance?: 'circle' | 'utility';
+  darkLabel: string;
+  lightLabel: string;
+};
+
+const {
+  appearance = 'circle',
+  class: className,
+  darkLabel,
+  lightLabel,
+  type = 'button',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<button
+  {...attrs}
+  class:list={['theme-toggle', className]}
+  type={type}
+  aria-label={darkLabel}
+  title={darkLabel}
+  data-theme-toggle
+  data-theme-toggle-appearance={appearance}
+  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}
+>
+  <span
+    class="theme-toggle__icon"
+    data-theme-toggle-target="dark"
+    aria-hidden="true"
+  >
+    <NightIcon />
+  </span>
+  <span
+    class="theme-toggle__icon"
+    data-theme-toggle-target="light"
+    aria-hidden="true"
+  >
+    <DayIcon />
+  </span>
+</button>
+
+<script>
+  import { initThemeToggle } from './themeToggleController';
+
+  for (const toggle of document.querySelectorAll('[data-theme-toggle]')) {
+    if (toggle instanceof HTMLElement) initThemeToggle(toggle);
+  }
+</script>

package/src/components/actions/ThemeToggle/ThemeToggle.css

@@ -0,0 +1,83 @@
+.theme-toggle {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  padding: 0;
+  border: var(--nox-border-width) solid var(--nox-border);
+  background: var(--nox-surface);
+  color: var(--nox-text-muted);
+  cursor: pointer;
+}
+
+.theme-toggle[data-theme-toggle-appearance='circle'] {
+  min-inline-size: 4.75rem;
+  block-size: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.theme-toggle[data-theme-toggle-appearance='utility'] {
+  inline-size: 100%;
+  min-block-size: var(--nox-navigation-block-size);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface-muted);
+}
+
+.theme-toggle__icon {
+  display: grid;
+  inline-size: 2rem;
+  block-size: 2rem;
+  grid-area: 1 / 1;
+  place-items: center;
+}
+
+.theme-toggle[data-theme-toggle-appearance='utility'] .theme-toggle__icon {
+  inline-size: 2.125rem;
+  block-size: 2.125rem;
+}
+
+.theme-toggle[data-theme-toggle-appearance='circle'] .theme-toggle__icon {
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: 50%;
+  background: var(--nox-surface);
+}
+
+.theme-toggle__icon > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.theme-toggle [data-theme-toggle-target='light'] {
+  display: none;
+}
+
+:root[data-theme='dark'] .theme-toggle [data-theme-toggle-target='dark'] {
+  display: none;
+}
+
+:root[data-theme='dark'] .theme-toggle [data-theme-toggle-target='light'] {
+  display: grid;
+}
+
+.theme-toggle:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+@media (hover: hover) {
+  .theme-toggle:hover {
+    background: var(--nox-surface-strong);
+    color: var(--nox-link-hover);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .theme-toggle {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+}