@astronox/core 0.5.12 → 0.5.14

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;
 }

package/src/components/navigation/NavigationBrand.astro

@@ -38,26 +38,10 @@ const logoAspectRatio = logo ? `${logo.width} / ${logo.height}` : undefined;
         style={`--site-nav-brand-logo-aspect-ratio: ${logoAspectRatio};`}
         data-brand-variants={Object.keys(logo.variants ?? {}).join(' ')}
       >
-        <Media
-          class="site-nav__brand-logo"
-          data-brand-appearance="default"
-          media={{
-            src: logo.src,
-            alt: logo.alt,
-            width: logo.width,
-            height: logo.height,
-            loading: 'eager',
-            decoding: 'sync',
-            fetchPriority: 'high',
-          }}
-          fit="contain"
-        />
-        {Object.entries(logo.variants ?? {}).map(([appearance, src]) => (
+        <span class="site-nav__brand-logo" data-brand-appearance="default">
           <Media
-            class="site-nav__brand-logo"
-            data-brand-appearance={appearance}
             media={{
-              src,
+              src: logo.src,
               alt: logo.alt,
               width: logo.width,
               height: logo.height,
@@ -67,7 +51,42 @@ const logoAspectRatio = logo ? `${logo.width} / ${logo.height}` : undefined;
             }}
             fit="contain"
           />
-        ))}
+        </span>
+        {Object.entries(logo.variants ?? {}).map(([appearance, variant]) => {
+          const {
+            top = 0,
+            right = 0,
+            bottom = 0,
+            left = 0,
+          } = variant.outset ?? {};
+          const width = logo.width + left + right;
+          const height = logo.height + top + bottom;
+          return (
+            <span
+              class="site-nav__brand-logo"
+              data-brand-appearance={appearance}
+              style={[
+                `--brand-artwork-width: ${(width / logo.width) * 100}%`,
+                `--brand-artwork-height: ${(height / logo.height) * 100}%`,
+                `--brand-artwork-left: ${(-left / logo.width) * 100}%`,
+                `--brand-artwork-top: ${(-top / logo.height) * 100}%`,
+              ].join('; ')}
+            >
+              <Media
+                media={{
+                  src: variant.src,
+                  alt: logo.alt,
+                  width,
+                  height,
+                  loading: 'eager',
+                  decoding: 'sync',
+                  fetchPriority: 'high',
+                }}
+                fit="contain"
+              />
+            </span>
+          );
+        })}
       </div>
     ) : (
       <>

package/src/components/navigation/NavigationBrand.css

@@ -15,6 +15,7 @@
 }
 
 .site-nav__brand-logo-frame {
+  position: relative;
   display: grid;
   block-size: var(--site-nav-brand-image-scale);
   max-inline-size: 100%;
@@ -22,7 +23,11 @@
 }
 
 .site-nav__brand-logo[data-brand-appearance] {
-  grid-area: 1 / 1;
+  position: absolute;
+  left: var(--brand-artwork-left, 0);
+  top: var(--brand-artwork-top, 0);
+  inline-size: var(--brand-artwork-width, 100%);
+  block-size: var(--brand-artwork-height, 100%);
 }
 
 .site-nav__brand-logo[data-brand-appearance]:not(
@@ -36,7 +41,9 @@
 :root[data-appearance='dark']
   .site-nav__brand-logo[data-brand-appearance='dark'],
 :root[data-appearance='halloween']
-  .site-nav__brand-logo[data-brand-appearance='halloween'] {
+  .site-nav__brand-logo[data-brand-appearance='halloween'],
+:root[data-appearance='christmas']
+  .site-nav__brand-logo[data-brand-appearance='christmas'] {
   display: grid;
 }
 
@@ -48,6 +55,9 @@
   [data-brand-appearance='default'],
 :root[data-appearance='halloween']
   .site-nav__brand-logo-frame[data-brand-variants~='halloween']
+  [data-brand-appearance='default'],
+:root[data-appearance='christmas']
+  .site-nav__brand-logo-frame[data-brand-variants~='christmas']
   [data-brand-appearance='default'] {
   display: none;
 }

package/src/config/siteConfig.ts

@@ -13,6 +13,12 @@ export type SiteLocaleConfig = {
   direction: SiteTextDirection;
 };
 
+export type SiteLogoVariant = {
+  src: string;
+  /** Extra artwork outside the base logo, in its original image coordinates. */
+  outset?: { top?: number; right?: number; bottom?: number; left?: number };
+};
+
 export type SiteIdentity = {
   id: string;
   name: string;
@@ -22,7 +28,7 @@ export type SiteIdentity = {
     alt: string;
     width: number;
     height: number;
-    variants?: Partial<Record<ThemeAppearance, string>>;
+    variants?: Partial<Record<ThemeAppearance, SiteLogoVariant>>;
   };
 };
 
@@ -57,7 +63,7 @@ export type SiteSeoConfig = {
 
 export type SiteConfig = {
   identity: SiteIdentity;
-  seasonalTheme?: SeasonalThemeConfig;
+  seasonalThemes?: readonly SeasonalThemeConfig[];
   defaultLocale: string;
   locales: readonly [SiteLocaleConfig, ...SiteLocaleConfig[]];
   routing: {
@@ -77,8 +83,42 @@ export function defineSiteConfig<const TConfig extends SiteConfig>(
     throw new Error(`Invalid site identity: ${config.identity.id}`);
   }
 
-  if (config.seasonalTheme && !config.seasonalTheme.id.trim()) {
-    throw new Error('A seasonal theme requires a non-empty event id.');
+  const seasonIds = new Set<string>();
+  const seasonPriorities = new Set<number>();
+  for (const season of config.seasonalThemes ?? []) {
+    if (!season.id.trim() || seasonIds.has(season.id)) {
+      throw new Error('Seasonal themes require unique, non-empty event ids.');
+    }
+    if (
+      !Number.isFinite(season.priority) ||
+      seasonPriorities.has(season.priority)
+    ) {
+      throw new Error('Seasonal themes require distinct, finite priorities.');
+    }
+    seasonIds.add(season.id);
+    seasonPriorities.add(season.priority);
+    if (season.mode !== 'annual') continue;
+    const { period } = season;
+    for (const { month, day } of [period.start, period.end]) {
+      const date = new Date(Date.UTC(2001, month - 1, day));
+      if (
+        !Number.isInteger(month) ||
+        !Number.isInteger(day) ||
+        date.getUTCFullYear() !== 2001 ||
+        date.getUTCMonth() !== month - 1 ||
+        date.getUTCDate() !== day
+      ) {
+        throw new Error(
+          'Annual theme periods require month/day dates valid every year.',
+        );
+      }
+    }
+    if (
+      period.start.month === period.end.month &&
+      period.start.day === period.end.day
+    ) {
+      throw new Error('An annual theme period requires distinct boundaries.');
+    }
   }
 
   const localeIds = new Set<string>();

package/src/display/contracts.ts

@@ -115,7 +115,8 @@ type DisplayCardLinkContent = {
   textTreatment?: 'default' | 'heading';
   media?: DisplayMedia;
   mediaPosition?: 'start' | 'end';
-  mediaSize?: 'default' | 'compact' | 'small';
+  mediaSize?: 'default' | 'compact' | 'small' | 'large';
+  mediaTreatment?: 'panel' | 'inline';
   direction?: 'previous' | 'next';
   full?: boolean;
   tone?: Tone;

package/src/layouts/BaseLayout.astro

@@ -54,7 +54,7 @@ const resolvedTone = tone ?? dataTone;
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <ThemeBootstrap
       storageKey={themeStorageKey}
-      seasonalTheme={site.seasonalTheme}
+      seasonalThemes={site.seasonalThemes}
     />
     <SeoHead
       breadcrumbs={breadcrumbs}
@@ -69,7 +69,11 @@ const resolvedTone = tone ?? dataTone;
     <div class="site-shell" data-site-scroll-root>
       <slot name="skip-link" />
       <slot name="header" />
-      {site.seasonalTheme?.decorations ? <SeasonalDecorations /> : null}
+      {
+        site.seasonalThemes?.some((season) => season.decorations) ? (
+          <SeasonalDecorations />
+        ) : null
+      }
       <div class="site-viewport" data-site-viewport>
         <main id="content" class="site-main" tabindex="-1">
           <div class="site-main__content">

package/src/patterns/Modal/modalController.ts

@@ -2,6 +2,14 @@ const initializedAttribute = 'data-modal-initialized';
 const portaledAttribute = 'data-modal-portaled';
 const noop = (): void => undefined;
 
+/** Open through the shared controller, preserving its focus and portal lifecycle. */
+export function openModal(root: HTMLDialogElement, trigger: HTMLElement): void {
+  initModal(root);
+  root.dispatchEvent(
+    new CustomEvent('modal:request-open', { detail: trigger }),
+  );
+}
+
 type PortalState = {
   placeholder: HTMLElement;
   source: HTMLElement;
@@ -103,14 +111,22 @@ export function initModal(root: HTMLDialogElement): () => void {
     activeTrigger = null;
   };
 
+  const handleOpenRequest = (event: Event): void => {
+    if (event instanceof CustomEvent && event.detail instanceof HTMLElement) {
+      open(event.detail);
+    }
+  };
+
   document.addEventListener('click', handleDocumentClick);
   root.addEventListener('click', handleRootClick);
   root.addEventListener('close', handleClose);
+  root.addEventListener('modal:request-open', handleOpenRequest);
 
   return () => {
     document.removeEventListener('click', handleDocumentClick);
     root.removeEventListener('click', handleRootClick);
     root.removeEventListener('close', handleClose);
+    root.removeEventListener('modal:request-open', handleOpenRequest);
     if (root.open) root.close();
     restoreSource();
     root.removeAttribute(initializedAttribute);

package/src/patterns/RewardCalendar/RewardCalendar.astro

@@ -0,0 +1,174 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import type { RewardCalendarEntry, RewardCalendarLabels } from './contracts';
+import Modal from '../Modal/Modal.astro';
+import ModalClose from '../Modal/ModalClose.astro';
+import Stack from '../../composition/Stack/Stack.astro';
+import SurfaceGroup from '../../composition/SurfaceGroup/SurfaceGroup.astro';
+import CardHeader from '../../components/content/CardHeader/CardHeader.astro';
+import CardBody from '../../components/content/CardBody/CardBody.astro';
+import Button from '../../components/actions/Button/Button.astro';
+import FieldLabel from '../../components/forms/FieldLabel/FieldLabel.astro';
+import TextInput from '../../components/forms/TextInput/TextInput.astro';
+import FieldError from '../../components/forms/FieldError/FieldError.astro';
+import CodeBlock from '../../components/content/CodeBlock/CodeBlock.astro';
+import RewardPreview from './RewardPreview.astro';
+
+type Props = HTMLAttributes<'section'> & {
+  id: string;
+  entries: readonly RewardCalendarEntry[];
+  labels: RewardCalendarLabels;
+  tone?: Tone;
+};
+
+const {
+  id,
+  entries,
+  labels,
+  tone,
+  'data-tone': dataTone,
+  class: className,
+  ...attrs
+} = Astro.props;
+const dialogId = `${id}-reward`;
+const inputId = `${id}-identity`;
+const openingDuration = 2400;
+const clientEntries = entries.map(({ id, label, title }) => ({
+  id,
+  label,
+  title,
+}));
+---
+
+<section
+  {...attrs}
+  id={id}
+  class:list={['reward-calendar', className]}
+  data-pattern="reward-calendar"
+  data-tone={tone ?? dataTone}
+  aria-label={labels.calendar}
+  style={`--reward-opening-duration: ${openingDuration}ms;`}
+>
+  <script
+    is:inline
+    type="application/json"
+    data-reward-calendar-config
+    set:html={JSON.stringify({
+      entries: clientEntries,
+      labels,
+      openingDuration,
+    }).replace(/</g, '\\u003c')}
+  />
+  <p class="reward-calendar__status" role="status" data-calendar-status hidden>
+  </p>
+  <ol class="reward-calendar__days">
+    {
+      entries.map((entry) => (
+        <li>
+          <button
+            type="button"
+            class="reward-calendar__door"
+            data-calendar-entry={entry.id}
+            data-reward-color={entry.color ?? 'green'}
+            data-state="locked"
+            aria-label={`${entry.label} — ${labels.states.locked}`}
+            disabled
+          >
+            <span class="reward-calendar__contents" aria-hidden="true">
+              <RewardPreview visual={entry.visual} />
+              <span class="reward-calendar__reward-name">{entry.title}</span>
+            </span>
+            <span
+              class="reward-calendar__paper reward-calendar__paper--left"
+              aria-hidden="true"
+            />
+            <span
+              class="reward-calendar__paper reward-calendar__paper--right"
+              aria-hidden="true"
+            />
+            <span
+              class="reward-calendar__ribbon reward-calendar__ribbon--vertical"
+              aria-hidden="true"
+            />
+            <span
+              class="reward-calendar__ribbon reward-calendar__ribbon--horizontal"
+              aria-hidden="true"
+            />
+            <span class="reward-calendar__bow" aria-hidden="true" />
+            <span class="reward-calendar__glow" aria-hidden="true" />
+            <span class="reward-calendar__number" aria-hidden="true">
+              <span>{entry.number}</span>
+            </span>
+          </button>
+        </li>
+      ))
+    }
+  </ol>
+  <Modal
+    id={dialogId}
+    label={labels.calendar}
+    closeLabel={labels.close}
+    closeControl="delegated"
+    sizing="confirmation"
+    data-calendar-dialog
+  >
+    <SurfaceGroup>
+      <CardHeader title={labels.calendar}>
+        <ModalClose slot="action" label={labels.close} />
+      </CardHeader>
+      <CardBody>
+        <Stack gap="md">
+          {
+            entries.map((entry) => (
+              <div
+                class="reward-calendar__reward"
+                data-calendar-reward={entry.id}
+                data-reward-color={entry.color ?? 'green'}
+                hidden
+              >
+                <RewardPreview visual={entry.visual} />
+                <h3>{entry.title}</h3>
+              </div>
+            ))
+          }
+          <Stack as="form" gap="md" data-calendar-form novalidate>
+            <FieldLabel for={inputId}>{labels.identity}</FieldLabel>
+            <TextInput
+              id={inputId}
+              name="identity"
+              autocomplete="off"
+              spellcheck={false}
+              autocapitalize="characters"
+              inputmode="text"
+              maxlength={64}
+              placeholder={labels.identityPlaceholder}
+              aria-describedby={`${inputId}-error`}
+              data-calendar-identity
+            />
+            <FieldError id={`${inputId}-error`} data-calendar-error />
+            <Button type="submit" full prominent data-calendar-generate>
+              {labels.generate}
+            </Button>
+          </Stack>
+          <Stack gap="sm" data-calendar-result hidden>
+            <CodeBlock
+              text=""
+              wrap
+              role="status"
+              aria-live="polite"
+              data-calendar-code
+            />
+            <Button full prominent data-calendar-copy>{labels.copy}</Button>
+          </Stack>
+          <p
+            role="status"
+            class="reward-calendar__feedback"
+            data-calendar-feedback
+          >
+          </p>
+        </Stack>
+      </CardBody>
+    </SurfaceGroup>
+  </Modal>
+</section>