@astronox/core 0.2.3 → 0.3.0

package/src/components/content/MarkdownContent/markdownContentRenderer.ts

@@ -24,14 +24,14 @@ const codeBlockTones = new Set<Tone>([
   'warning',
   'danger',
 ]);
-const defaultListMarker = {
+const defaultListMarker: MarkdownListMarker = {
   symbol: 'bullet',
   tone: 'neutral',
-} as const satisfies MarkdownListMarker;
-const nestedListMarker = {
+};
+const nestedListMarker: MarkdownListMarker = {
   symbol: 'arrow-right',
   tone: 'neutral',
-} as const satisfies MarkdownListMarker;
+};
 
 export function renderMarkdownDocument(
   root: HTMLElement,
@@ -103,10 +103,7 @@ function renderNode(
         document.createTextNode(node.after),
       );
       if (node.delta) {
-        const delta = createElement(
-          'span',
-          'markdown-content__change-delta',
-        );
+        const delta = createElement('span', 'markdown-content__change-delta');
         delta.dataset.tone = node.delta.tone;
         delta.append('(');
         if (node.delta.sign !== 'neutral') {
@@ -125,10 +122,7 @@ function renderNode(
       }
       values.append(transition);
       if (node.suffix?.length) {
-        const suffix = createElement(
-          'span',
-          'markdown-content__change-suffix',
-        );
+        const suffix = createElement('span', 'markdown-content__change-suffix');
         appendInline(suffix, node.suffix);
         values.append(suffix);
       }
@@ -216,10 +210,7 @@ function renderListItem(
     appendInline(heading, item.heading);
     body.append(heading);
   } else if (item.resource) {
-    const heading = createElement(
-      'div',
-      'markdown-content__resource-heading',
-    );
+    const heading = createElement('div', 'markdown-content__resource-heading');
     if (item.resource.mediaPlacement === 'inline') {
       heading.append(
         renderMedia(
@@ -295,24 +286,35 @@ function renderSymbol(node: MarkdownSymbol): HTMLSpanElement {
   symbol.dataset.markdownSymbol = node.name;
   if (node.tone) symbol.dataset.tone = node.tone;
   if (node.lang) symbol.lang = node.lang;
-  symbol.append(createSymbolIcon(node.name));
+  symbol.append(createSymbolIcon(node));
 
   if (node.label) {
     const label = createElement('span', 'markdown-content__symbol-label');
     label.textContent = node.label;
     symbol.append(label);
   } else if (node.accessibleLabel) {
-    const label = createElement(
-      'span',
-      'markdown-content__visually-hidden',
-    );
+    const label = createElement('span', 'markdown-content__visually-hidden');
     label.textContent = node.accessibleLabel;
     symbol.append(label);
   }
   return symbol;
 }
 
-function createSymbolIcon(name: MarkdownSymbol['name']): SVGSVGElement {
+function createSymbolIcon(
+  node: MarkdownSymbol,
+): SVGSVGElement | HTMLImageElement {
+  if (node.media) {
+    const image = document.createElement('img');
+    image.classList.add('markdown-content__symbol-media');
+    image.src = node.media.src;
+    image.alt = node.media.alt;
+    image.width = node.media.width;
+    image.height = node.media.height;
+    image.loading = node.media.loading ?? 'lazy';
+    image.decoding = node.media.decoding ?? 'async';
+    return image;
+  }
+  const name = node.name;
   const svg = document.createElementNS(svgNamespace, 'svg');
   svg.setAttribute('viewBox', '0 0 32 32');
   svg.setAttribute('fill', 'none');
@@ -320,13 +322,6 @@ function createSymbolIcon(name: MarkdownSymbol['name']): SVGSVGElement {
   svg.setAttribute('focusable', 'false');
   svg.classList.add('markdown-content__symbol-icon');
 
-  if (name.startsWith('terrain-')) {
-    svg.classList.add('circle-symbol-icon');
-    svg.dataset.terrainIcon = name.slice('terrain-'.length);
-    appendTerrainIcon(svg, name);
-    return svg;
-  }
-
   if (name === 'bullet') {
     const circle = document.createElementNS(svgNamespace, 'circle');
     circle.setAttribute('cx', '16');
@@ -358,55 +353,6 @@ function createSymbolIcon(name: MarkdownSymbol['name']): SVGSVGElement {
   return svg;
 }
 
-function appendTerrainIcon(
-  svg: SVGSVGElement,
-  name: Extract<MarkdownSymbol['name'], `terrain-${string}`>,
-): void {
-  const surface = document.createElementNS(svgNamespace, 'circle');
-  surface.setAttribute('cx', '16');
-  surface.setAttribute('cy', '16');
-  surface.setAttribute('r', '13');
-  surface.classList.add('circle-symbol-icon__surface');
-  svg.append(surface);
-
-  if (name === 'terrain-field') {
-    const rectangle = document.createElementNS(svgNamespace, 'rect');
-    rectangle.setAttribute('x', '9');
-    rectangle.setAttribute('y', '9');
-    rectangle.setAttribute('width', '14');
-    rectangle.setAttribute('height', '14');
-    rectangle.setAttribute('rx', '1');
-    rectangle.classList.add('circle-symbol-icon__mark');
-    const grid = document.createElementNS(svgNamespace, 'path');
-    grid.setAttribute('d', 'M13.7 9v14m4.6-14v14M9 13.7h14M9 18.3h14');
-    grid.classList.add('circle-symbol-icon__mark');
-    svg.append(rectangle, grid);
-    return;
-  }
-
-  const fill = document.createElementNS(svgNamespace, 'path');
-  fill.classList.add('circle-symbol-icon__fill');
-  fill.setAttribute(
-    'd',
-    name === 'terrain-grass'
-      ? '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'
-      : name === 'terrain-water'
-        ? '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'
-        : 'm5.5 24 7.3-13 3.1 5.1 3.4-7.1 7.2 15H5.5Z',
-  );
-  const highlight = document.createElementNS(svgNamespace, 'path');
-  highlight.classList.add('circle-symbol-icon__highlight');
-  highlight.setAttribute(
-    'd',
-    name === 'terrain-grass'
-      ? 'M10.4 23.5c2.2-5.3 5.4-8.7 10.2-11.6'
-      : name === 'terrain-water'
-        ? 'M12.2 19.2a4.5 4.5 0 0 0 4.5 4.1'
-        : 'm10.8 14.6 2-3.6 3.1 5.1 1.4-2.9 2.4 3.6-3.5-1.1-2.5 2.1-2.9-3.2Z',
-  );
-  svg.append(fill, highlight);
-}
-
 function renderMedia(
   media: DisplayMedia,
   className: string,
@@ -476,7 +422,8 @@ function renderCodeBlock(
     return content;
   }
 
-  const shell = createElement('nox-code-block', 'code-block-shell');
+  const shell = document.createElement('nox-code-block');
+  shell.className = 'code-block-shell';
   shell.dataset.widget = 'code-block';
   shell.dataset.tone = tone;
   content.dataset.codeBlockContent = '';
@@ -530,10 +477,7 @@ function createCopyIcon(): SVGSVGElement {
   return svg;
 }
 
-function createHeading(
-  level: number,
-  className: string,
-): HTMLHeadingElement {
+function createHeading(level: number, className: string): HTMLHeadingElement {
   const heading = createElement(
     `h${Math.min(6, Math.max(2, level))}` as keyof HTMLElementTagNameMap,
     className,

package/src/components/feedback/PreferenceBootstrap/PreferenceBootstrap.astro

@@ -100,9 +100,7 @@ const payload = definitions.map((definition) => ({
         if (from in next && !(to in next)) next[to] = next[from];
         delete next[from];
       }
-      for (const [key, fallback] of Object.entries(
-        migration.defaults ?? {},
-      )) {
+      for (const [key, fallback] of Object.entries(migration.defaults ?? {})) {
         if (!(key in next)) next[key] = fallback;
       }
       return next;
@@ -117,11 +115,7 @@ const payload = definitions.map((definition) => ({
       for (const migration of migrations) {
         const previous = parse(
           read(
-            storageKey(
-              definition,
-              migration.fromVersion,
-              migration.fromKey,
-            ),
+            storageKey(definition, migration.fromVersion, migration.fromKey),
           ),
         );
         const migrated = migrate(previous, migration);
@@ -138,9 +132,7 @@ const payload = definitions.map((definition) => ({
 
     const previousSnapshot = window[globalKey];
     const snapshot = {
-      values: isRecord(previousSnapshot?.values)
-        ? previousSnapshot.values
-        : {},
+      values: isRecord(previousSnapshot?.values) ? previousSnapshot.values : {},
       rawValues: isRecord(previousSnapshot?.rawValues)
         ? previousSnapshot.rawValues
         : {},
@@ -190,7 +182,9 @@ const payload = definitions.map((definition) => ({
       const options = [...root.querySelectorAll('[data-combobox-option]')];
       const available = options
         .map((option) => Number(option.dataset.comboboxOption))
-        .filter((value) => Number.isFinite(value) && value >= min && value <= max)
+        .filter(
+          (value) => Number.isFinite(value) && value >= min && value <= max,
+        )
         .sort((left, right) => left - right);
       const bounded = Math.min(max, Math.max(min, Number(requestedValue)));
       const value =
@@ -202,10 +196,7 @@ const payload = definitions.map((definition) => ({
             )
           : Math.min(
               max,
-              Math.max(
-                min,
-                min + Math.round((bounded - min) / step) * step,
-              ),
+              Math.max(min, min + Math.round((bounded - min) / step) * step),
             );
 
       root.dataset.comboboxNumberMin = String(min);
@@ -228,8 +219,10 @@ const payload = definitions.map((definition) => ({
       const increment = root.querySelector(
         '[data-combobox-number-step="increment"]',
       );
-      if (decrement instanceof HTMLButtonElement) decrement.disabled = value <= min;
-      if (increment instanceof HTMLButtonElement) increment.disabled = value >= max;
+      if (decrement instanceof HTMLButtonElement)
+        decrement.disabled = value <= min;
+      if (increment instanceof HTMLButtonElement)
+        increment.disabled = value >= max;
     };
     const applyOptions = (root, requestedValue) => {
       const requested = Array.isArray(requestedValue)
@@ -291,7 +284,8 @@ const payload = definitions.map((definition) => ({
       if (root instanceof HTMLElement && root.matches('[data-preference-id]')) {
         applyBinding(root);
       }
-      for (const element of root.querySelectorAll?.('[data-preference-id]') ?? []) {
+      for (const element of root.querySelectorAll?.('[data-preference-id]') ??
+        []) {
         applyBinding(element);
       }
     };
@@ -350,8 +344,8 @@ const payload = definitions.map((definition) => ({
         detail?.mode === 'number'
           ? detail.value
           : root.dataset.comboboxSelectionMode === 'multiple'
-            ? detail?.values ?? []
-            : detail?.values?.[0] ?? '',
+            ? (detail?.values ?? [])
+            : (detail?.values?.[0] ?? ''),
       );
     };
     const handlePreferenceChange = (event) => {
@@ -385,7 +379,10 @@ const payload = definitions.map((definition) => ({
         for (const node of record.addedNodes) applyBindings(node);
       }
     });
-    observer.observe(document.documentElement, { childList: true, subtree: true });
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+    });
     document.addEventListener('change', handleChange, true);
     document.addEventListener('combobox:change', handleComboboxChange);
     document.addEventListener(changeEvent, handlePreferenceChange);

package/src/components/feedback/Spinner/Spinner.astro

@@ -28,5 +28,4 @@ const resolvedTone = tone ?? dataTone;
   data-tone={resolvedTone}
   data-widget="spinner"
   role="status"
-  aria-label={label}
-></span>
+  aria-label={label}></span>

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

@@ -0,0 +1,31 @@
+---
+import { defaultThemeStorageKey } from '../../../theme/storage';
+
+type Props = {
+  storageKey?: string;
+};
+
+const { storageKey = defaultThemeStorageKey }: Props = Astro.props;
+---
+
+<script is:inline define:vars={{ storageKey }}>
+  (() => {
+    const root = document.documentElement;
+    let storedTheme = null;
+
+    try {
+      const value = window.localStorage.getItem(storageKey);
+      if (value === 'light' || value === 'dark') storedTheme = value;
+    } catch {
+      // The system preference remains available without local storage.
+    }
+
+    const systemTheme = window.matchMedia?.('(prefers-color-scheme: dark)')
+      .matches
+      ? 'dark'
+      : 'light';
+
+    root.dataset.theme = storedTheme ?? systemTheme;
+    root.dataset.themeStorageKey = storageKey;
+  })();
+</script>

package/src/components/feedback/Tooltip/tooltipController.ts

@@ -135,10 +135,7 @@ export function initTooltip(root: HTMLElement): () => void {
       viewport.right - viewportGap,
       boundaryRect?.right ?? viewport.right - viewportGap,
     );
-    const maximumInlineSize = Math.max(
-      0,
-      horizontalRight - horizontalLeft,
-    );
+    const maximumInlineSize = Math.max(0, horizontalRight - horizontalLeft);
     const maximumBlockSize = Math.max(
       0,
       viewport.bottom - viewport.top - viewportGap * 2,

package/src/components/forms/ChoiceGroup/ChoiceGroup.css

@@ -19,10 +19,7 @@
 .choice-group__options {
   display: grid;
   min-inline-size: 0;
-  grid-template-columns: repeat(
-    var(--choice-group-columns),
-    minmax(0, 1fr)
-  );
+  grid-template-columns: repeat(var(--choice-group-columns), minmax(0, 1fr));
   gap: var(--nox-space-2);
 }
 
@@ -81,7 +78,7 @@
   background: color-mix(
     in srgb,
     var(--nox-tone-seed) 12%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   color: var(--nox-tone-text);
 }

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/CircleSymbolIcon.css

@@ -3,17 +3,17 @@
   --circle-symbol-icon-surface: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 32%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --circle-symbol-icon-border: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 74%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --circle-symbol-icon-mark: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 82%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
 
   color: var(--circle-symbol-icon-mark);

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

@@ -1,5 +1,6 @@
 export { default as ActionListItem } from './actions/ActionListItem/ActionListItem.astro';
 export { default as Button } from './actions/Button/Button.astro';
+export { default as ThemeToggle } from './actions/ThemeToggle/ThemeToggle.astro';
 export { default as CardAction } from './actions/CardAction/CardAction.astro';
 export { default as IdentityProviderAction } from './actions/IdentityProviderAction/IdentityProviderAction.astro';
 export { default as MediaTrigger } from './actions/MediaTrigger/MediaTrigger.astro';
@@ -29,14 +30,17 @@ 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';
 export { default as PreferenceBootstrap } from './feedback/PreferenceBootstrap/PreferenceBootstrap.astro';
+export { default as ThemeBootstrap } from './feedback/ThemeBootstrap/ThemeBootstrap.astro';
 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]',
   );