@astronox/core 0.2.4 → 0.3.0

package/src/components/forms/DateTimeInput/DateTimeInput.astro

@@ -3,7 +3,8 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import TextInput from '../TextInput/TextInput.astro';
 
-type Props = Omit<HTMLAttributes<'input'>, 'type'> & {
+type Props = Omit<HTMLAttributes<'input'>, 'autofocus' | 'type'> & {
+  autofocus?: boolean | 'desktop';
   invalid?: boolean;
   tone?: Tone;
 };

package/src/components/forms/PreparedFormBootstrap/PreparedFormBootstrap.astro

@@ -34,8 +34,9 @@ const { formId, stateKey }: Props = Astro.props;
       return item ? [item] : [];
     };
     const getComboboxRoot = (form, key) =>
-      [...form.querySelectorAll('[data-prepared-form-combobox]')]
-        .find((candidate) => candidate.dataset.preparedFormCombobox === key);
+      [...form.querySelectorAll('[data-prepared-form-combobox]')].find(
+        (candidate) => candidate.dataset.preparedFormCombobox === key,
+      );
     const isComboboxReady = (root) =>
       root instanceof HTMLElement &&
       root.querySelector('[data-combobox-options]') instanceof HTMLElement &&
@@ -110,7 +111,10 @@ const { formId, stateKey }: Props = Astro.props;
         button.type = 'button';
         button.role = 'option';
         button.tabIndex = -1;
-        button.setAttribute('aria-selected', String(selected.has(option.value)));
+        button.setAttribute(
+          'aria-selected',
+          String(selected.has(option.value)),
+        );
         button.dataset.comboboxOption = option.value;
         button.dataset.comboboxSearchText = option.label;
         button.dataset.interactionAccent = 'start';
@@ -194,10 +198,8 @@ const { formId, stateKey }: Props = Astro.props;
       childList: true,
       subtree: true,
     });
-    document.addEventListener(
-      'DOMContentLoaded',
-      () => observer.disconnect(),
-      { once: true },
-    );
+    document.addEventListener('DOMContentLoaded', () => observer.disconnect(), {
+      once: true,
+    });
   })();
 </script>

package/src/components/forms/PreparedFormBootstrap/parsePreparedFormState.ts

@@ -0,0 +1,48 @@
+import type { PreparedFormState } from './contracts';
+
+export function parsePreparedFormState(
+  value: unknown,
+): PreparedFormState | null {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null;
+  const state = value as PreparedFormState;
+
+  for (const record of [state.values, state.choices]) {
+    if (
+      record !== undefined &&
+      (!record ||
+        typeof record !== 'object' ||
+        Array.isArray(record) ||
+        Object.values(record).some((item) => typeof item !== 'string'))
+    ) {
+      return null;
+    }
+  }
+
+  if (state.comboboxes === undefined) return state;
+  if (
+    !state.comboboxes ||
+    typeof state.comboboxes !== 'object' ||
+    Array.isArray(state.comboboxes)
+  ) {
+    return null;
+  }
+  for (const combobox of Object.values(state.comboboxes)) {
+    if (
+      !combobox ||
+      typeof combobox !== 'object' ||
+      !Array.isArray(combobox.options) ||
+      !Array.isArray(combobox.values) ||
+      combobox.values.some((item) => typeof item !== 'string') ||
+      combobox.options.some(
+        (option) =>
+          !option ||
+          typeof option !== 'object' ||
+          typeof option.label !== 'string' ||
+          typeof option.value !== 'string',
+      )
+    ) {
+      return null;
+    }
+  }
+  return state;
+}

package/src/components/forms/Textarea/Textarea.astro

@@ -31,5 +31,5 @@ const resolvedTone = tone ?? dataTone;
   data-invalid={resolvedInvalid ? true : undefined}
   data-size={size}
   data-tone={resolvedTone}
-  aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}
->{value}</textarea>
+  aria-invalid={resolvedInvalid ? 'true' : ariaInvalid}>{value}</textarea
+>

package/src/components/icons/BurnIcon.astro

@@ -20,5 +20,6 @@ const {
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
   <path
     class="circle-symbol-icon__fill"
-    d="M17 7c1 5-3 6-3 10 0 1.5.8 2.7 2 3.4-.3-2.4 1.3-3.4 2.2-5.4 2.3 2 3.8 4.1 3.8 6.4 0 3.2-2.7 5.6-6 5.6s-6-2.4-6-5.8C10 15.7 15.7 13 17 7Z"></path>
+    d="M17 7c1 5-3 6-3 10 0 1.5.8 2.7 2 3.4-.3-2.4 1.3-3.4 2.2-5.4 2.3 2 3.8 4.1 3.8 6.4 0 3.2-2.7 5.6-6 5.6s-6-2.4-6-5.8C10 15.7 15.7 13 17 7Z"
+  ></path>
 </svg>

package/src/components/icons/FieldIcon.astro

@@ -21,8 +21,14 @@ const {
   focusable={focusable}
 >
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
-  <rect class="circle-symbol-icon__mark" x="9" y="9" width="14" height="14" rx="1"
-  ></rect>
-  <path class="circle-symbol-icon__mark" d="M13.7 9v14m4.6-14v14M9 13.7h14M9 18.3h14"
-  ></path>
+  <rect
+    class="circle-symbol-icon__mark"
+    x="9"
+    y="9"
+    width="14"
+    height="14"
+    rx="1"></rect>
+  <path
+    class="circle-symbol-icon__mark"
+    d="M13.7 9v14m4.6-14v14M9 13.7h14M9 18.3h14"></path>
 </svg>

package/src/components/icons/GrassIcon.astro

@@ -24,6 +24,7 @@ const {
   <path
     class="circle-symbol-icon__fill"
     d="M23.5 8.5c.2 8.4-3.7 14-11.7 15.2-3.1-6.8.2-13.5 11.7-15.2Z"></path>
-  <path class="circle-symbol-icon__highlight" d="M10.4 23.5c2.2-5.3 5.4-8.7 10.2-11.6"
-  ></path>
+  <path
+    class="circle-symbol-icon__highlight"
+    d="M10.4 23.5c2.2-5.3 5.4-8.7 10.2-11.6"></path>
 </svg>

package/src/components/icons/SlowIcon.astro

@@ -20,6 +20,5 @@ const {
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
   <path
     class="circle-symbol-icon__mark"
-    d="M16 8v16M9 12l14 8M9 20l14-8M13 10l3 3 3-3M13 22l3-3 3 3"
-  ></path>
+    d="M16 8v16M9 12l14 8M9 20l14-8M13 10l3 3 3-3M13 22l3-3 3 3"></path>
 </svg>

package/src/components/icons/StunIcon.astro

@@ -18,5 +18,6 @@ const {
   focusable={focusable}
 >
   <circle class="circle-symbol-icon__surface" cx="16" cy="16" r="13"></circle>
-  <path class="circle-symbol-icon__fill" d="m18 7-8 11h5l-1 7 8-11h-5l1-7Z"></path>
+  <path class="circle-symbol-icon__fill" d="m18 7-8 11h5l-1 7 8-11h-5l1-7Z"
+  ></path>
 </svg>

package/src/components/icons/WaterIcon.astro

@@ -25,6 +25,7 @@ const {
     class="circle-symbol-icon__fill"
     d="M16 5.5c3.1 4.2 7.5 9 7.5 13.3A7.5 7.5 0 1 1 8.5 18.8C8.5 14.5 12.9 9.7 16 5.5Z"
   ></path>
-  <path class="circle-symbol-icon__highlight" d="M12.2 19.2a4.5 4.5 0 0 0 4.5 4.1"
-  ></path>
+  <path
+    class="circle-symbol-icon__highlight"
+    d="M12.2 19.2a4.5 4.5 0 0 0 4.5 4.1"></path>
 </svg>

package/src/components/index.ts

@@ -30,6 +30,7 @@ export type {
   PreparedFormOption,
   PreparedFormState,
 } from './forms/PreparedFormBootstrap/contracts';
+export { parsePreparedFormState } from './forms/PreparedFormBootstrap/parsePreparedFormState';
 export { default as TextInput } from './forms/TextInput/TextInput.astro';
 export { default as Textarea } from './forms/Textarea/Textarea.astro';
 export { default as Spinner } from './feedback/Spinner/Spinner.astro';
@@ -39,6 +40,7 @@ export { default as Tooltip } from './feedback/Tooltip/Tooltip.astro';
 export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
 export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';
 export { default as MediaFrame } from './media/MediaFrame/MediaFrame.astro';
+export { default as AdSlot } from './monetization/AdSlot/AdSlot.astro';
 export { default as Breadcrumbs } from './navigation/Breadcrumbs/Breadcrumbs.astro';
 export { default as DesktopNavigation } from './navigation/DesktopNavigation.astro';
 export { default as Header } from './navigation/Header.astro';

package/src/components/media/CanvasFrame/CanvasFrame.astro

@@ -87,8 +87,7 @@ const resolvedCanvasId = canvasId ?? `${frameId}-canvas`;
     class="canvas-frame__feedback"
     data-canvas-frame-feedback
     role="alert"
-    hidden
-  ></span>
+    hidden></span>
 </nox-canvas-frame>
 
 <script>

package/src/components/media/CanvasFrame/canvasFrameController.ts

@@ -53,10 +53,7 @@ export function markCanvasFrameReady(root: HTMLElement): void {
   root.dataset.canvasFrameReady = 'true';
 }
 
-export function markCanvasFrameError(
-  root: HTMLElement,
-  message: string,
-): void {
+export function markCanvasFrameError(root: HTMLElement, message: string): void {
   const loading = root.querySelector<HTMLElement>(
     '[data-canvas-frame-loading]',
   );

package/src/components/media/EmbedFrame/EmbedFrame.astro

@@ -63,11 +63,9 @@ const resolvedTone = tone ?? dataTone;
   data-fullscreen-region={fullscreen ? true : undefined}
   data-widget="embed-frame"
   data-tone={resolvedTone}
-  aria-busy={
-    activation === 'immediate' && loadingIndicator === 'spinner'
-      ? 'true'
-      : 'false'
-  }
+  aria-busy={activation === 'immediate' && loadingIndicator === 'spinner'
+    ? 'true'
+    : 'false'}
 >
   <iframe
     {...attrs}
@@ -78,16 +76,11 @@ const resolvedTone = tone ?? dataTone;
     width={width}
     height={height}
     loading={loading}
-    allowfullscreen
-  ></iframe>
+    allowfullscreen></iframe>
   {
     activation === 'manual' && activationLabel ? (
       <span class="embed-frame__activation" data-embed-frame-activation-layer>
-        <Button
-          type="button"
-          prominent
-          data-embed-frame-activate
-        >
+        <Button type="button" prominent data-embed-frame-activate>
           {activationLabel}
         </Button>
       </span>

package/src/components/media/EmbedFrame/embedFrameController.ts

@@ -1,6 +1,8 @@
 const activateEvent = 'nox:embed-frame:activate';
 
-export function activateEmbedFrame(root: HTMLElement): HTMLIFrameElement | null {
+export function activateEmbedFrame(
+  root: HTMLElement,
+): HTMLIFrameElement | null {
   const iframe = root.querySelector<HTMLIFrameElement>(
     '[data-embed-frame-content]',
   );
@@ -14,9 +16,7 @@ export const initEmbedFrame = (root: HTMLElement): (() => void) => {
   const iframe = root.querySelector<HTMLIFrameElement>(
     '[data-embed-frame-content]',
   );
-  const loading = root.querySelector<HTMLElement>(
-    '[data-embed-frame-loading]',
-  );
+  const loading = root.querySelector<HTMLElement>('[data-embed-frame-loading]');
   const activationLayer = root.querySelector<HTMLElement>(
     '[data-embed-frame-activation-layer]',
   );

package/src/components/monetization/AdSlot/AdSlot.astro

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { AdSlotState } from '../../../ads/contracts';
+
+type Props = Omit<HTMLAttributes<'aside'>, 'aria-label'> & {
+  label: string;
+  size?: 'compact' | 'standard' | 'tall';
+  state?: AdSlotState;
+};
+
+const {
+  class: className,
+  label,
+  size = 'standard',
+  state = 'idle',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<aside
+  {...attrs}
+  class:list={['ad-slot', className]}
+  data-ad-size={size}
+  data-ad-state={state}
+  data-widget="ad-slot"
+  aria-label={label}
+  aria-busy={state === 'loading' ? 'true' : 'false'}
+>
+  <div class="ad-slot__content"><slot /></div>
+  <div class="ad-slot__fallback">
+    <slot name="fallback"><div class="ad-slot__fallback-canvas"></div></slot>
+  </div>
+</aside>

package/src/components/monetization/AdSlot/AdSlot.css

@@ -0,0 +1,53 @@
+.ad-slot {
+  --ad-slot-min-block-size: 6rem;
+
+  display: grid;
+  inline-size: 100%;
+  min-block-size: var(--ad-slot-min-block-size);
+  overflow: hidden;
+  place-items: center;
+}
+
+.ad-slot[data-ad-size='compact'] {
+  --ad-slot-min-block-size: 4rem;
+}
+
+.ad-slot[data-ad-size='tall'] {
+  --ad-slot-min-block-size: 15rem;
+}
+
+.ad-slot__content,
+.ad-slot__fallback {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+}
+
+.ad-slot__fallback {
+  display: none;
+  block-size: 100%;
+}
+
+.ad-slot__fallback-canvas {
+  block-size: 100%;
+  min-block-size: var(--ad-slot-min-block-size);
+  background:
+    linear-gradient(
+      135deg,
+      transparent 0 46%,
+      color-mix(in srgb, var(--nox-theme-border-base) 55%, transparent) 46% 54%,
+      transparent 54% 100%
+    ),
+    var(--nox-surface-muted);
+  border: 1px solid var(--nox-theme-border-base);
+  inline-size: 100%;
+}
+
+.ad-slot[data-ad-state='blocked'] .ad-slot__content,
+.ad-slot[data-ad-state='unavailable'] .ad-slot__content {
+  display: none;
+}
+
+.ad-slot[data-ad-state='blocked'] .ad-slot__fallback,
+.ad-slot[data-ad-state='unavailable'] .ad-slot__fallback {
+  display: block;
+}

package/src/components/navigation/DesktopNavigation.css

@@ -87,8 +87,7 @@
     min-width: 4.75rem;
   }
 
-  .site-nav__action
-    > .dropdown[data-dropdown-trigger-appearance='bar'] {
+  .site-nav__action > .dropdown[data-dropdown-trigger-appearance='bar'] {
     min-width: 0;
     block-size: 100%;
     border-radius: 0;

package/src/components/navigation/Footer/Footer.css

@@ -33,15 +33,11 @@
   column-gap: var(--nox-space-4);
 }
 
-.site-footer__content[data-footer-columns='2'][
-  data-footer-column-separator='divider'
-] {
+.site-footer__content[data-footer-columns='2'][data-footer-column-separator='divider'] {
   column-gap: 0;
 }
 
-.site-footer__content[data-footer-columns='2'][
-  data-footer-column-separator='divider'
-]
+.site-footer__content[data-footer-columns='2'][data-footer-column-separator='divider']
   > .site-footer__group:nth-child(even)::before {
   display: inline-grid;
   width: calc(
@@ -146,9 +142,7 @@
     grid-column: auto;
   }
 
-  .site-footer__content[data-footer-columns='2'][
-    data-footer-column-separator='divider'
-  ]
+  .site-footer__content[data-footer-columns='2'][data-footer-column-separator='divider']
     > .site-footer__group:nth-child(even)::before {
     content: none;
   }

package/src/components/navigation/MobileNavigation.css

@@ -94,8 +94,7 @@
   border-radius: var(--nox-radius-md);
 }
 
-.site-nav__mobile-action
-  > .dropdown[data-dropdown-trigger-appearance='bar'] {
+.site-nav__mobile-action > .dropdown[data-dropdown-trigger-appearance='bar'] {
   min-width: 0;
   block-size: var(--nox-site-header-compact-height);
   border-radius: 0;
@@ -239,16 +238,8 @@ html[data-mobile-navigation-open] body {
   }
 
   .site-nav__mobile-footer-link[data-mobile-navigation-accent]:hover {
-    border-color: color-mix(
-      in srgb,
-      var(--mobile-navigation-accent) 88%,
-      #000
-    );
-    background: color-mix(
-      in srgb,
-      var(--mobile-navigation-accent) 88%,
-      #000
-    );
+    border-color: color-mix(in srgb, var(--mobile-navigation-accent) 88%, #000);
+    background: color-mix(in srgb, var(--mobile-navigation-accent) 88%, #000);
     color: #fff;
   }
 }

package/src/components/navigation/navigationTypes.ts

@@ -1,8 +1,5 @@
 import type { AstroComponent } from '../widgetTypes';
-import type {
-  DisplayMedia,
-  NavigationLinkItem,
-} from '../../display/contracts';
+import type { DisplayMedia, NavigationLinkItem } from '../../display/contracts';
 
 export type MobileNavigationLabels = {
   closeLabel?: string;

package/src/components/seo/SeoHead.astro

@@ -72,12 +72,7 @@ const jsonLdNodes = [
 <title>{seo.documentTitle}</title>
 {
   site.seo.icons?.map((icon) => (
-    <link
-      rel="icon"
-      href={icon.href}
-      type={icon.type}
-      sizes={icon.sizes}
-    />
+    <link rel="icon" href={icon.href} type={icon.type} sizes={icon.sizes} />
   ))
 }
 {

package/src/composition/SurfaceGroup/SurfaceGroup.css

@@ -34,9 +34,7 @@
   content: '';
 }
 
-.surface-group:has(> [data-sticky-surface]):not(
-    [data-sticky-measured]
-  )::before,
+.surface-group:has(> [data-sticky-surface]):not([data-sticky-measured])::before,
 .surface-group[data-sticky-active]::before {
   visibility: visible;
 }
@@ -52,16 +50,10 @@
     [data-surface-sizing='content']
   ),
 .surface-group
-  > [data-surface]:not([hidden]):not(
-    [data-surface-sizing='content']
-  ):has(
+  > [data-surface]:not([hidden]):not([data-surface-sizing='content']):has(
     ~ [data-surface]:not([hidden])[data-surface-sizing='content']
   ):not(
-    :has(
-      ~ [data-surface]:not([hidden]):not(
-          [data-surface-sizing='content']
-        )
-    )
+    :has(~ [data-surface]:not([hidden]):not([data-surface-sizing='content']))
   ) {
   flex: 1 1 auto;
   min-height: 0;
@@ -73,9 +65,7 @@
   border-end-end-radius: 0;
 }
 
-.surface-group
-  > [data-surface]:not([hidden])
-  ~ [data-surface]:not([hidden]) {
+.surface-group > [data-surface]:not([hidden]) ~ [data-surface]:not([hidden]) {
   border-block-start-width: 0;
   border-start-start-radius: 0;
   border-start-end-radius: 0;

package/src/config/environment.ts

@@ -0,0 +1,52 @@
+export function readRequiredEnvironmentValue(
+  name: string,
+  value: string | undefined,
+): string {
+  const resolved = value?.trim();
+  if (!resolved) throw new Error(`Missing environment variable: ${name}`);
+  return resolved;
+}
+
+export function readOptionalEnvironmentValue(
+  value: string | undefined,
+): string | undefined {
+  const resolved = value?.trim();
+  return resolved || undefined;
+}
+
+export function readRequiredEnvironmentUrl(
+  name: string,
+  value: string | undefined,
+): string {
+  const resolved = readRequiredEnvironmentValue(name, value);
+
+  try {
+    const url = new URL(resolved);
+    if (url.protocol !== 'http:' && url.protocol !== 'https:')
+      throw new Error();
+    return url.toString();
+  } catch {
+    throw new Error(`Invalid environment URL: ${name}`);
+  }
+}
+
+export function readEnvironmentRecord(
+  name: string,
+  value: string | undefined,
+): Readonly<Record<string, string>> {
+  const resolved = readRequiredEnvironmentValue(name, value);
+
+  try {
+    const parsed: unknown = JSON.parse(resolved);
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      throw new Error();
+    }
+
+    const entries = Object.entries(parsed);
+    if (entries.some(([, entry]) => typeof entry !== 'string'))
+      throw new Error();
+    return Object.fromEntries(entries) as Readonly<Record<string, string>>;
+  } catch {
+    throw new Error(`Invalid environment record: ${name}`);
+  }
+}

package/src/config/index.ts

@@ -1,2 +1,5 @@
+export * from './environment';
+export * from './integrations';
 export * from './pageMeta';
 export * from './siteConfig';
+export * from './storage';

package/src/config/integrations.ts

@@ -0,0 +1,9 @@
+export type IntegrationConfig = Readonly<
+  Record<string, Readonly<Record<string, boolean>>>
+>;
+
+export function defineIntegrationConfig<
+  const TConfig extends IntegrationConfig,
+>(config: TConfig): TConfig {
+  return config;
+}

package/src/config/siteConfig.ts

@@ -13,6 +13,7 @@ export type SiteLocaleConfig = {
 };
 
 export type SiteIdentity = {
+  id: string;
   name: string;
   shortName?: string;
   logo?: {
@@ -68,6 +69,10 @@ export type SiteConfig = {
 export function defineSiteConfig<const TConfig extends SiteConfig>(
   config: TConfig,
 ): TConfig {
+  if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(config.identity.id)) {
+    throw new Error(`Invalid site identity: ${config.identity.id}`);
+  }
+
   const localeIds = new Set<string>();
   const urlCodes = new Set<string>();
 

package/src/config/storage.ts

@@ -0,0 +1,16 @@
+const storageSegmentPattern = /^[a-z0-9][a-z0-9-]*$/;
+
+export function createSiteStorageKey(
+  siteId: string,
+  ...segments: readonly string[]
+): string {
+  const values = [siteId, ...segments];
+  if (
+    segments.length === 0 ||
+    values.some((segment) => !storageSegmentPattern.test(segment))
+  ) {
+    throw new Error('Invalid site storage key');
+  }
+
+  return values.join(':');
+}