@astronox/core 0.5.13 → 0.5.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.5.13",
+  "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,17 +4,14 @@ 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;
@@ -22,12 +19,13 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
     const media = window.matchMedia?.('(prefers-color-scheme: dark)');
     let choices = ['light', 'dark'];
     let activeEventId = null;
+    let activeTheme = null;
     let boundaryTimeout;
 
-    const resolveSeason = (now) => {
-      if (!seasonalTheme) return { id: null, boundary: null };
-      const period = seasonalTheme.annualPeriod;
-      if (!period) return { id: seasonalTheme.id, boundary: null };
+    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 >
@@ -47,7 +45,7 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
         if (now < start) return { id: null, boundary: start.getTime() };
         if (now < end) {
           return {
-            id: `${seasonalTheme.id}-${startYear}`,
+            id: `${season.id}-${startYear}`,
             boundary: end.getTime(),
           };
         }
@@ -76,7 +74,12 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
     const readSeasonal = () => {
       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 === activeEventId &&
           (value.choice === 'seasonal' || value.choice === 'classic')
@@ -90,7 +93,10 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
     };
     const saveSeasonal = (choice) => {
       if (!activeEventId) return;
-      write(seasonalKey, JSON.stringify({ id: activeEventId, choice }));
+      write(
+        `${seasonalKey}:${activeEventId}`,
+        JSON.stringify({ id: activeEventId, choice }),
+      );
     };
 
     let classic = readClassic();
@@ -104,14 +110,14 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
     const next = () => choices[(choices.indexOf(current) + 1) % choices.length];
     const resolve = () =>
       activeEventId && seasonal === 'seasonal'
-        ? seasonalTheme.appearance
+        ? activeTheme.appearance
         : (classic ?? (media?.matches ? 'dark' : 'light'));
     const apply = () => {
       const appearance = resolve();
       const appearanceChanged = current !== appearance;
       const theme = appearance === 'light' ? 'light' : 'dark';
       const decorations = activeEventId
-        ? (seasonalTheme.decorations ?? 'none')
+        ? (activeTheme.decorations ?? 'none')
         : 'none';
       if (appearanceChanged) root.dataset.themeSwitching = 'true';
       root.dataset.theme = theme;
@@ -141,9 +147,17 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
     };
     const reconcile = () => {
       const now = new Date();
-      const season = resolveSeason(now);
-      if (activeEventId !== season.id) {
-        activeEventId = season.id;
+      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) {
@@ -151,15 +165,25 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
         saveSeasonal(seasonal);
       }
       choices = activeEventId
-        ? ['light', 'dark', seasonalTheme.appearance]
+        ? ['light', 'dark', activeTheme.appearance]
         : ['light', 'dark'];
       clearTimeout(boundaryTimeout);
-      if (season.boundary !== null) {
-        boundaryTimeout = setTimeout(
-          reconcile,
-          Math.min(season.boundary - now.getTime(), 2_147_483_647),
-        );
-      }
+      // 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 = () => {
@@ -179,7 +203,8 @@ const { storageKey = defaultThemeStorageKey, seasonalTheme }: Props =
       if (
         event.key !== null &&
         event.key !== storageKey &&
-        event.key !== seasonalKey
+        event.key !== seasonalKey &&
+        !event.key.startsWith(`${seasonalKey}:`)
       ) {
         return;
       }

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>

package/src/components/index.ts

@@ -95,6 +95,8 @@ export { default as MinusIcon } from './icons/MinusIcon.astro';
 export { default as MountainIcon } from './icons/MountainIcon.astro';
 export { default as NightIcon } from './icons/NightIcon.astro';
 export { default as PumpkinIcon } from './icons/PumpkinIcon.astro';
+export { default as FirTreeIcon } from './icons/FirTreeIcon.astro';
+export { default as GiftIcon } from './icons/GiftIcon.astro';
 export { default as PlayIcon } from './icons/PlayIcon.astro';
 export { default as PlusIcon } from './icons/PlusIcon.astro';
 export { default as PoisonIcon } from './icons/PoisonIcon.astro';

package/src/components/navigation/Header.css

@@ -19,7 +19,7 @@
   position: sticky;
 }
 
-:root[data-appearance='halloween']:is(
+:root:is([data-appearance='halloween'], [data-appearance='christmas']):is(
     [data-theme-decorations='static'],
     [data-theme-decorations='animated']
   )
@@ -30,7 +30,7 @@
   --dropdown-attached-border-top-width: var(--site-header-menu-border-width);
 }
 
-:root[data-appearance='halloween']:is(
+:root:is([data-appearance='halloween'], [data-appearance='christmas']):is(
     [data-theme-decorations='static'],
     [data-theme-decorations='animated']
   )
@@ -39,7 +39,26 @@
   inset-inline: 0;
   inset-block-start: 100%;
   block-size: var(--nox-seasonal-border-size);
-  background: var(--nox-seasonal-blood);
+  background: var(--nox-seasonal-header-border);
+  content: '';
+  pointer-events: none;
+}
+
+:root[data-appearance='christmas']:is(
+    [data-theme-decorations='static'],
+    [data-theme-decorations='animated']
+  )
+  .site-header::before {
+  position: absolute;
+  /* Decorations stay behind every navigation menu in the header context. */
+  z-index: -1;
+  inset-inline: 0;
+  inset-block-start: calc(100% + 1px);
+  block-size: var(--nox-seasonal-header-ornament-size);
+  background-image: var(--nox-seasonal-header-ornament);
+  /* Repeat whole motifs so neither edge cuts through a hanging bulb. */
+  background-repeat: round no-repeat;
+  background-size: 144px 100%;
   content: '';
   pointer-events: none;
 }