@astronox/core 0.5.12 → 0.5.14

package/package.json

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

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

@@ -3,12 +3,14 @@ import type { HTMLAttributes } from 'astro/types';
 import DayIcon from '../../icons/DayIcon.astro';
 import NightIcon from '../../icons/NightIcon.astro';
 import PumpkinIcon from '../../icons/PumpkinIcon.astro';
+import FirTreeIcon from '../../icons/FirTreeIcon.astro';
 
 type Props = HTMLAttributes<'button'> & {
   appearance?: 'circle' | 'utility';
   darkLabel: string;
   lightLabel: string;
   halloweenLabel?: string;
+  christmasLabel?: string;
 };
 
 const {
@@ -17,6 +19,7 @@ const {
   darkLabel,
   lightLabel,
   halloweenLabel,
+  christmasLabel,
   type = 'button',
   ...attrs
 }: Props = Astro.props;
@@ -33,6 +36,7 @@ const {
   data-theme-toggle-dark-label={darkLabel}
   data-theme-toggle-light-label={lightLabel}
   data-theme-toggle-halloween-label={halloweenLabel}
+  data-theme-toggle-christmas-label={christmasLabel}
   data-navigation-control={appearance === 'circle' ? '' : undefined}
   data-navigation-control-appearance={appearance === 'circle'
     ? 'bar'
@@ -59,6 +63,13 @@ const {
   >
     <PumpkinIcon />
   </span>
+  <span
+    class="theme-toggle__icon"
+    data-theme-toggle-target="christmas"
+    aria-hidden="true"
+  >
+    <FirTreeIcon />
+  </span>
 </button>
 
 <script>

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

@@ -58,7 +58,10 @@
 :root[data-next-theme='light'] .theme-toggle [data-theme-toggle-target='light'],
 :root[data-next-theme='halloween']
   .theme-toggle
-  [data-theme-toggle-target='halloween'] {
+  [data-theme-toggle-target='halloween'],
+:root[data-next-theme='christmas']
+  .theme-toggle
+  [data-theme-toggle-target='christmas'] {
   display: grid;
 }
 

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

@@ -13,6 +13,7 @@ export function initThemeToggle(toggle: HTMLElement): () => void {
       light: toggle.dataset.themeToggleLightLabel,
       dark: toggle.dataset.themeToggleDarkLabel,
       halloween: toggle.dataset.themeToggleHalloweenLabel,
+      christmas: toggle.dataset.themeToggleChristmasLabel,
     };
     const label = labels[runtime.next()];
     if (!label) return;

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

@@ -31,6 +31,7 @@ const {
   media,
   mediaPosition = 'start',
   mediaSize = 'default',
+  mediaTreatment = 'panel',
   meta,
   mode = 'link',
   textLayout = 'inline',
@@ -79,6 +80,7 @@ const resolvedTone = tone ?? dataTone;
   data-has-visual={hasVisual ? 'true' : 'false'}
   data-media-position={hasVisual ? mediaPosition : undefined}
   data-media-size={hasVisual ? mediaSize : undefined}
+  data-media-treatment={hasVisual ? mediaTreatment : undefined}
   data-mode={mode}
   data-text-treatment={textTreatment}
   data-tone={resolvedTone}

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

@@ -10,6 +10,8 @@
   --card-link-border-color: var(--surface-border-color);
   --card-link-hover-background: var(--nox-surface-strong);
   --card-link-active-background: var(--nox-border-muted);
+  --card-link-padding-block: var(--nox-space-2);
+  --card-link-padding-inline: var(--nox-space-4);
 
   container-type: inline-size;
   display: block;
@@ -94,7 +96,7 @@
   grid-template-rows: minmax(0, 1fr);
   align-items: center;
   box-sizing: border-box;
-  padding: var(--nox-space-2) var(--nox-space-4);
+  padding: var(--card-link-padding-block) var(--card-link-padding-inline);
   overflow-wrap: anywhere;
 }
 
@@ -154,6 +156,11 @@
   );
 }
 
+.card-link[data-media-size='large'] .card-link__layout {
+  --card-link-size: clamp(5rem, 8vw, 6rem);
+  --card-link-media-size: clamp(3rem, 5vw, 4rem);
+}
+
 .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);
@@ -197,14 +204,51 @@
   --card-link-size: calc(var(--nox-navigation-block-size) + var(--nox-space-5));
 }
 
-.card-link[data-density='relaxed'] .card-link__content {
-  padding: var(--nox-space-5) var(--nox-space-6);
+.card-link[data-density='relaxed'] {
+  --card-link-padding-block: var(--nox-space-5);
+  --card-link-padding-inline: var(--nox-space-6);
 }
 
 .card-link[data-density='relaxed'] .card-link__text {
   gap: var(--nox-space-3);
 }
 
+.card-link[data-media-treatment='inline'] .card-link__layout {
+  align-items: center;
+  column-gap: var(--nox-space-4);
+  padding: var(--card-link-padding-block) var(--card-link-padding-inline);
+}
+
+.card-link[data-media-treatment='inline'][data-media-position='start']
+  .card-link__layout {
+  grid-template-columns: var(--card-link-media-size) minmax(0, 1fr);
+}
+
+.card-link[data-media-treatment='inline'][data-media-position='end']
+  .card-link__layout {
+  grid-template-columns: minmax(0, 1fr) var(--card-link-media-size);
+}
+
+.card-link[data-media-treatment='inline'] .card-link__media {
+  min-height: 0;
+  border-inline: 0;
+  background: transparent;
+}
+
+.card-link[data-media-treatment='inline']
+  .card-link__media
+  [data-widget='media'] {
+  inline-size: var(--card-link-media-size);
+  block-size: var(--card-link-media-size);
+  --media-object-max-inline-size: 100%;
+  --media-object-max-block-size: 100%;
+}
+
+.card-link[data-media-treatment='inline'] .card-link__content {
+  min-block-size: 0;
+  padding: 0;
+}
+
 .card-link__compact-text {
   display: none;
   min-width: 0;
@@ -304,8 +348,9 @@
     );
   }
 
-  .card-link[data-density='relaxed'] .card-link__content {
-    padding: var(--nox-space-4) var(--nox-space-5);
+  .card-link[data-density='relaxed'] {
+    --card-link-padding-block: var(--nox-space-4);
+    --card-link-padding-inline: var(--nox-space-5);
   }
 
   .card-link[data-compact-content] .card-link__layout {

package/src/components/feedback/SeasonalDecorations/SeasonalDecorations.astro

@@ -1,4 +1,7 @@
 ---
+import { createSnowfallStyles } from './snowfall';
+
+const snowflakes = createSnowfallStyles(() => 0.5);
 const drips = [
   {
     x: 'calc(var(--nox-page-gutter) / 2)',
@@ -20,7 +23,12 @@ const drips = [
 ];
 ---
 
-<div class="seasonal-decorations" aria-hidden="true" inert>
+<div
+  class="seasonal-decorations"
+  data-seasonal-decoration="halloween"
+  aria-hidden="true"
+  inert
+>
   {
     drips.map(({ x, length, delay, edge }) => (
       <div
@@ -58,3 +66,40 @@ const drips = [
     ))
   }
 </div>
+
+<div
+  class="seasonal-decorations"
+  data-seasonal-decoration="christmas"
+  aria-hidden="true"
+  inert
+>
+  {
+    snowflakes.map((style) => (
+      <span class="seasonal-decorations__snow" style={style} />
+    ))
+  }
+</div>
+
+<script>
+  import { createSnowfallStyles } from './snowfall';
+
+  const initialized = new WeakSet<HTMLElement>();
+
+  const initializeSnowfall = (): void => {
+    for (const decoration of document.querySelectorAll<HTMLElement>(
+      '[data-seasonal-decoration="christmas"]',
+    )) {
+      if (initialized.has(decoration)) continue;
+      initialized.add(decoration);
+      const styles = createSnowfallStyles();
+      decoration
+        .querySelectorAll<HTMLElement>('.seasonal-decorations__snow')
+        .forEach((flake, index) => {
+          flake.style.cssText = styles[index];
+        });
+    }
+  };
+
+  initializeSnowfall();
+  document.addEventListener('astro:page-load', initializeSnowfall);
+</script>

package/src/components/feedback/SeasonalDecorations/SeasonalDecorations.css

@@ -18,7 +18,12 @@
     [data-theme-decorations='static'],
     [data-theme-decorations='animated']
   )
-  .seasonal-decorations {
+  .seasonal-decorations[data-seasonal-decoration='halloween'],
+:root[data-appearance='christmas']:is(
+    [data-theme-decorations='static'],
+    [data-theme-decorations='animated']
+  )
+  .seasonal-decorations[data-seasonal-decoration='christmas'] {
   display: block;
 }
 
@@ -132,3 +137,48 @@
     transform: translateY(min(65vh, 30rem)) scale(0.75, 1.4);
   }
 }
+
+.seasonal-decorations__snow {
+  position: absolute;
+  inset-inline-start: var(--snow-x);
+  inset-block-start: var(--snow-y);
+  inline-size: var(--snow-size);
+  block-size: var(--snow-size);
+  border-radius: 50%;
+  background: var(--nox-seasonal-snow);
+  opacity: 0.65;
+}
+
+@media (width < 48rem) {
+  .seasonal-decorations__snow:nth-child(even) {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  :root[data-appearance='christmas'][data-theme-decorations='animated']
+    .seasonal-decorations__snow {
+    inset-block-start: -1rem;
+    animation: seasonal-snow-fall var(--snow-duration) linear var(--snow-delay)
+      infinite;
+    animation-play-state: var(--seasonal-animation-state, running);
+  }
+}
+
+@keyframes seasonal-snow-fall {
+  0% {
+    opacity: 0;
+    transform: translate(0, 0);
+  }
+  3%,
+  97% {
+    opacity: 0.8;
+  }
+  100% {
+    opacity: 0;
+    transform: translate(
+      var(--snow-drift),
+      calc(100vh - var(--seasonal-decoration-top) + 2rem)
+    );
+  }
+}

package/src/components/feedback/SeasonalDecorations/snowfall.ts

@@ -0,0 +1,38 @@
+const columns = 8;
+const flakesPerColumn = 8;
+
+export function createSnowfallStyles(
+  random: () => number = Math.random,
+): string[] {
+  const lanes = Array.from({ length: columns }, () => ({
+    duration: 8 + random() * 6,
+    offset: random(),
+    horizontalOffset: Math.floor(random() * (flakesPerColumn / 2)) * 2,
+  }));
+
+  return Array.from({ length: columns * flakesPerColumn }, (_, index) => {
+    const pair = Math.floor(index / 2);
+    const column = pair % columns;
+    // Interleaving two layers keeps all columns covered when mobile hides one.
+    const row = Math.floor(pair / columns) * 2 + (index % 2);
+    const lane = lanes[column];
+    const phase =
+      (lane.offset + (row + 0.2 + random() * 0.6) / flakesPerColumn) % 1;
+    const slot = (row * 3 + lane.horizontalOffset) % flakesPerColumn;
+    const localX = (slot + 0.2 + random() * 0.6) / flakesPerColumn;
+    // Mirror alternating lanes so mobile also keeps flakes near both edges.
+    const x = ((column + (column % 2 ? 1 - localX : localX)) / columns) * 100;
+    const driftLimit = Math.min(10 / columns, x / 2, (100 - x) / 2);
+    const drift = (random() * 2 - 1) * driftLimit;
+
+    // Shared speed within each lane preserves the spacing across every loop.
+    return [
+      `--snow-x: ${x.toFixed(3)}%`,
+      `--snow-y: ${(phase * 100).toFixed(3)}%`,
+      `--snow-size: ${2 + Math.floor(random() * 4)}px`,
+      `--snow-duration: ${lane.duration.toFixed(3)}s`,
+      `--snow-delay: ${(-phase * lane.duration).toFixed(3)}s`,
+      `--snow-drift: ${drift.toFixed(3)}vw`,
+    ].join('; ');
+  });
+}

package/src/components/feedback/ThemeBootstrap/ThemeBootstrap.astro

@@ -4,25 +4,55 @@ import type { SeasonalThemeConfig } from '../../../theme/contracts';
 
 type Props = {
   storageKey?: string;
-  seasonalTheme?: SeasonalThemeConfig;
+  seasonalThemes?: readonly SeasonalThemeConfig[];
 };
 
-const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
+const { storageKey = defaultThemeStorageKey, seasonalThemes = [] }: Props =
   Astro.props;
 ---
 
-<script
-  is:inline
-  define:vars={{ storageKey, seasonalTheme: seasonalTheme ?? null }}
->
+<script is:inline define:vars={{ storageKey, seasonalThemes }}>
   (() => {
     window.__astronoxTheme?.destroy();
     const root = document.documentElement;
     const seasonalKey = `${storageKey}:seasonal`;
     const media = window.matchMedia?.('(prefers-color-scheme: dark)');
-    const choices = seasonalTheme
-      ? ['light', 'dark', seasonalTheme.appearance]
-      : ['light', 'dark'];
+    let choices = ['light', 'dark'];
+    let activeEventId = null;
+    let activeTheme = null;
+    let boundaryTimeout;
+
+    const resolveSeason = (season, now) => {
+      if (season.mode === 'disabled') return { id: null, boundary: null };
+      if (season.mode === 'always') return { id: season.id, boundary: null };
+      const { period } = season;
+
+      const spansNewYear =
+        period.start.month * 100 + period.start.day >
+        period.end.month * 100 + period.end.day;
+      const year = now.getFullYear();
+      for (const startYear of [year - 1, year, year + 1]) {
+        const start = new Date(
+          startYear,
+          period.start.month - 1,
+          period.start.day,
+        );
+        const end = new Date(
+          startYear + Number(spansNewYear),
+          period.end.month - 1,
+          period.end.day,
+        );
+        if (now < start) return { id: null, boundary: start.getTime() };
+        if (now < end) {
+          return {
+            id: `${season.id}-${startYear}`,
+            boundary: end.getTime(),
+          };
+        }
+      }
+      return { id: null, boundary: null };
+    };
+
     const read = (key) => {
       try {
         return window.localStorage.getItem(key);
@@ -42,11 +72,16 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
       return value === 'light' || value === 'dark' ? value : null;
     };
     const readSeasonal = () => {
-      if (!seasonalTheme) return null;
+      if (!activeEventId) return null;
       try {
-        const value = JSON.parse(read(seasonalKey) ?? 'null');
+        // Migrate the original single-season preference without resetting Halloween.
+        const value = JSON.parse(
+          read(`${seasonalKey}:${activeEventId}`) ??
+            read(seasonalKey) ??
+            'null',
+        );
         if (
-          value?.id === seasonalTheme.id &&
+          value?.id === activeEventId &&
           (value.choice === 'seasonal' || value.choice === 'classic')
         ) {
           return value.choice;
@@ -57,44 +92,102 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
       return null;
     };
     const saveSeasonal = (choice) => {
-      if (!seasonalTheme) return;
-      write(seasonalKey, JSON.stringify({ id: seasonalTheme.id, choice }));
+      if (!activeEventId) return;
+      write(
+        `${seasonalKey}:${activeEventId}`,
+        JSON.stringify({ id: activeEventId, choice }),
+      );
     };
 
     let classic = readClassic();
-    let seasonal = readSeasonal();
+    let seasonal = null;
     let current;
-    if (seasonalTheme && seasonal === null) {
-      seasonal = 'seasonal';
-      saveSeasonal(seasonal);
-    }
 
     const handleVisibility = () => {
       root.toggleAttribute('data-theme-animation-paused', document.hidden);
+      if (!document.hidden) reconcile();
     };
     const next = () => choices[(choices.indexOf(current) + 1) % choices.length];
     const resolve = () =>
-      seasonalTheme && seasonal === 'seasonal'
-        ? seasonalTheme.appearance
+      activeEventId && seasonal === 'seasonal'
+        ? activeTheme.appearance
         : (classic ?? (media?.matches ? 'dark' : 'light'));
     const apply = () => {
       const appearance = resolve();
-      if (current === appearance) return;
+      const appearanceChanged = current !== appearance;
       const theme = appearance === 'light' ? 'light' : 'dark';
-      root.dataset.themeSwitching = 'true';
+      const decorations = activeEventId
+        ? (activeTheme.decorations ?? 'none')
+        : 'none';
+      if (appearanceChanged) root.dataset.themeSwitching = 'true';
       root.dataset.theme = theme;
       root.dataset.appearance = appearance;
       current = appearance;
-      root.dataset.nextTheme = next();
-      void root.offsetWidth;
-      delete root.dataset.themeSwitching;
-      document.dispatchEvent(
-        new CustomEvent('astronox:theme-change', {
-          detail: { theme, appearance },
-        }),
+      const nextTheme = next();
+      const controlsChanged =
+        root.dataset.nextTheme !== nextTheme ||
+        root.dataset.themeDecorations !== decorations;
+      root.dataset.nextTheme = nextTheme;
+      root.dataset.themeDecorations = decorations;
+      root.toggleAttribute(
+        'data-theme-animation-paused',
+        document.hidden && decorations === 'animated',
       );
+      if (appearanceChanged) {
+        void root.offsetWidth;
+        delete root.dataset.themeSwitching;
+      }
+      if (appearanceChanged || controlsChanged) {
+        document.dispatchEvent(
+          new CustomEvent('astronox:theme-change', {
+            detail: { theme, appearance },
+          }),
+        );
+      }
+    };
+    const reconcile = () => {
+      const now = new Date();
+      const seasons = seasonalThemes.map((theme) => ({
+        ...resolveSeason(theme, now),
+        theme,
+      }));
+      const season = seasons
+        .filter((candidate) => candidate.id !== null)
+        .sort((left, right) => right.theme.priority - left.theme.priority)[0];
+      const eventId = season?.id ?? null;
+      activeTheme = season?.theme ?? null;
+      if (activeEventId !== eventId) {
+        activeEventId = eventId;
+        seasonal = readSeasonal();
+      }
+      if (activeEventId && seasonal === null) {
+        seasonal = 'seasonal';
+        saveSeasonal(seasonal);
+      }
+      choices = activeEventId
+        ? ['light', 'dark', activeTheme.appearance]
+        : ['light', 'dark'];
+      clearTimeout(boundaryTimeout);
+      // A daily reconciliation also catches a timezone change on an open page.
+      const midnight = new Date(
+        now.getFullYear(),
+        now.getMonth(),
+        now.getDate() + 1,
+      );
+      const boundary = Math.min(
+        midnight.getTime(),
+        ...seasons.flatMap((candidate) =>
+          candidate.boundary === null ? [] : [candidate.boundary],
+        ),
+      );
+      boundaryTimeout = setTimeout(
+        reconcile,
+        Math.max(1, boundary - now.getTime()),
+      );
+      apply();
     };
     const cycle = () => {
+      reconcile();
       const appearance = next();
       if (appearance === 'light' || appearance === 'dark') {
         classic = appearance;
@@ -106,42 +199,39 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
       saveSeasonal(seasonal);
       apply();
     };
-    const handleSystem = () => apply();
     const handleStorage = (event) => {
       if (
         event.key !== null &&
         event.key !== storageKey &&
-        event.key !== seasonalKey
+        event.key !== seasonalKey &&
+        !event.key.startsWith(`${seasonalKey}:`)
       ) {
         return;
       }
       classic = readClassic();
       seasonal = readSeasonal();
-      if (seasonalTheme && seasonal === null) {
-        seasonal = 'seasonal';
-        saveSeasonal(seasonal);
-      }
-      apply();
+      reconcile();
     };
 
     root.dataset.themeStorageKey = storageKey;
-    root.dataset.themeDecorations = seasonalTheme?.decorations ?? 'none';
     window.__astronoxTheme = {
       next,
       cycle,
       destroy: () => {
-        media?.removeEventListener('change', handleSystem);
+        clearTimeout(boundaryTimeout);
+        media?.removeEventListener('change', reconcile);
         document.removeEventListener('visibilitychange', handleVisibility);
         delete root.dataset.themeAnimationPaused;
         window.removeEventListener('storage', handleStorage);
+        window.removeEventListener('focus', reconcile);
+        window.removeEventListener('pageshow', reconcile);
       },
     };
-    media?.addEventListener('change', handleSystem);
-    if (seasonalTheme?.decorations === 'animated') {
-      document.addEventListener('visibilitychange', handleVisibility);
-      handleVisibility();
-    }
+    media?.addEventListener('change', reconcile);
+    document.addEventListener('visibilitychange', handleVisibility);
     window.addEventListener('storage', handleStorage);
-    apply();
+    window.addEventListener('focus', reconcile);
+    window.addEventListener('pageshow', reconcile);
+    reconcile();
   })();
 </script>

package/src/components/icons/CurrencyIcon.css

@@ -1,9 +1,9 @@
 .dollar-icon {
   display: block;
-  color: var(--nox-source-tone-success);
+  color: var(--nox-currency-icon-color, var(--nox-source-tone-success));
 }
 
 .ribbon-icon {
   display: block;
-  color: var(--nox-source-tone-warning);
+  color: var(--nox-currency-icon-color, var(--nox-source-tone-warning));
 }

package/src/components/icons/FirTreeIcon.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+const {
+  width = 32,
+  height = 32,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  width={width}
+  height={height}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <g
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M16 6L10 13H13L8 19H12L6.5 24H25.5L20 19H24L19 13H22Z"></path>
+    <path d="M16 24V27"></path>
+  </g>
+</svg>

package/src/components/icons/GiftIcon.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'svg'>;
+const {
+  width = 32,
+  height = 32,
+  'aria-hidden': ariaHidden = 'true',
+  focusable = 'false',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<svg
+  {...attrs}
+  width={width}
+  height={height}
+  viewBox="0 0 32 32"
+  fill="none"
+  aria-hidden={ariaHidden}
+  focusable={focusable}
+>
+  <g
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M5 12H27V17H5ZM7 17V27H25V17M16 12V27"></path>
+    <path
+      d="M16 12C10 12 7 10 9 7C11 4 16 8 16 12ZM16 12C22 12 25 10 23 7C21 4 16 8 16 12Z"
+    ></path>
+  </g>
+</svg>