@astronox/core 0.2.4 → 0.3.1

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.astro

@@ -7,6 +7,7 @@ import Media from '../../../primitives/media/Media/Media.astro';
 
 type Props = Omit<HTMLAttributes<'button'>, 'type'> &
   Omit<HTMLAttributes<'a'>, 'href'> & {
+    collapse?: 'none' | 'icon';
     compactLabel?: string;
     disabled?: boolean;
     href?: string;
@@ -24,6 +25,8 @@ type Props = Omit<HTMLAttributes<'button'>, 'type'> &
 const {
   class: className,
   'data-tone': dataTone,
+  'aria-label': ariaLabel,
+  collapse = 'none',
   compactLabel,
   disabled = false,
   href,
@@ -44,6 +47,8 @@ const resolvedRel =
   rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined);
 const resolvedTone = tone ?? dataTone;
 const hasVisual = Boolean(Icon || media);
+const resolvedAriaLabel =
+  ariaLabel ?? (collapse === 'icon' && hasVisual ? label : undefined);
 const isLink = Boolean(href);
 const isDisabledLink = isLink && disabled;
 const Root = isLink ? (isDisabledLink ? 'span' : 'a') : 'button';
@@ -51,8 +56,10 @@ const Root = isLink ? (isDisabledLink ? 'span' : 'a') : 'button';
 
 <Root
   {...attrs}
+  aria-label={resolvedAriaLabel}
   aria-disabled={isDisabledLink ? 'true' : undefined}
   class:list={['card-action', className]}
+  data-card-action-collapse={hasVisual ? collapse : undefined}
   data-card-action-compact-label={compactLabel ? true : undefined}
   data-card-action-hover-tone={hoverTone}
   data-card-action-label-treatment={labelTreatment}

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

@@ -7,6 +7,7 @@
   --card-action-icon-size: var(--nox-compact-media-responsive-size);
   --card-action-hover-seed: var(--nox-tone-seed);
 
+  position: relative;
   display: grid;
   min-width: 0;
   min-height: var(--card-action-size);
@@ -59,8 +60,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 +98,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 +109,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 +170,36 @@
 }
 
 @media (width < 48rem) {
-  .card-action[data-card-action-compact-label]
-    .card-action__label-full {
+  .card-action[data-card-action-collapse='icon'][data-has-visual] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .card-action[data-card-action-collapse='icon'][data-has-visual]
+    .card-action__visual {
+    grid-column: 1;
+    inline-size: 100%;
+    border-inline: 0;
+  }
+
+  .card-action[data-card-action-collapse='icon'][data-has-visual]
+    .card-action__label {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    min-height: 0;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .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 {
@@ -55,7 +54,11 @@ function updateToggles(theme: ColorTheme): void {
 }
 
 function applyTheme(theme: ColorTheme, persist: boolean): void {
-  document.documentElement.dataset.theme = theme;
+  const root = document.documentElement;
+  root.dataset.themeSwitching = 'true';
+  root.dataset.theme = theme;
+  void root.offsetWidth;
+  delete root.dataset.themeSwitching;
 
   if (persist) {
     try {

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