@astronox/core 0.2.3 → 0.3.0

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

@@ -0,0 +1,110 @@
+import type { ColorTheme } from '../../../theme/contracts';
+import { defaultThemeStorageKey } from '../../../theme/storage';
+
+const initializedToggles = new WeakSet<HTMLElement>();
+const systemThemeQuery = '(prefers-color-scheme: dark)';
+let globalListenersInitialized = false;
+
+function isColorTheme(value: string | null): value is ColorTheme {
+  return value === 'light' || value === 'dark';
+}
+
+function getStorageKey(): string {
+  return (
+    document.documentElement.dataset.themeStorageKey ?? defaultThemeStorageKey
+  );
+}
+
+function readStoredTheme(): ColorTheme | null {
+  try {
+    const value = window.localStorage.getItem(getStorageKey());
+    return isColorTheme(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function getSystemTheme(): ColorTheme {
+  return window.matchMedia(systemThemeQuery).matches ? 'dark' : 'light';
+}
+
+function getCurrentTheme(): ColorTheme {
+  const value = document.documentElement.dataset.theme ?? null;
+  return isColorTheme(value) ? value : (readStoredTheme() ?? getSystemTheme());
+}
+
+function updateToggle(toggle: HTMLElement, theme: ColorTheme): void {
+  const label =
+    theme === 'light'
+      ? toggle.dataset.themeToggleDarkLabel
+      : toggle.dataset.themeToggleLightLabel;
+
+  if (label) {
+    toggle.setAttribute('aria-label', label);
+    toggle.setAttribute('title', label);
+  }
+}
+
+function updateToggles(theme: ColorTheme): void {
+  for (const toggle of document.querySelectorAll<HTMLElement>(
+    '[data-theme-toggle]',
+  )) {
+    updateToggle(toggle, theme);
+  }
+}
+
+function applyTheme(theme: ColorTheme, persist: boolean): void {
+  document.documentElement.dataset.theme = theme;
+
+  if (persist) {
+    try {
+      window.localStorage.setItem(getStorageKey(), theme);
+    } catch {
+      // The selected theme remains active for the current document.
+    }
+  }
+
+  updateToggles(theme);
+  document.dispatchEvent(
+    new CustomEvent('astronox:theme-change', { detail: { theme } }),
+  );
+}
+
+function initializeGlobalListeners(): void {
+  if (globalListenersInitialized) return;
+  globalListenersInitialized = true;
+
+  const media = window.matchMedia(systemThemeQuery);
+  media.addEventListener('change', (event) => {
+    if (readStoredTheme() === null) {
+      applyTheme(event.matches ? 'dark' : 'light', false);
+    }
+  });
+
+  window.addEventListener('storage', (event) => {
+    if (event.key !== getStorageKey()) return;
+
+    const theme = isColorTheme(event.newValue)
+      ? event.newValue
+      : getSystemTheme();
+    applyTheme(theme, false);
+  });
+}
+
+export function initThemeToggle(toggle: HTMLElement): () => void {
+  if (initializedToggles.has(toggle)) return () => {};
+  initializedToggles.add(toggle);
+  initializeGlobalListeners();
+  updateToggle(toggle, getCurrentTheme());
+
+  const handleClick = (): void => {
+    applyTheme(getCurrentTheme() === 'light' ? 'dark' : 'light', true);
+  };
+
+  toggle.addEventListener('click', handleClick);
+
+  return () => {
+    toggle.removeEventListener('click', handleClick);
+    initializedToggles.delete(toggle);
+  };
+}

package/src/components/content/CardFooter/CardFooter.css

@@ -42,16 +42,14 @@
     var(--card-footer-size);
 }
 
-.card-footer[data-has-leading-action][data-has-action]
-  .card-footer__layout {
+.card-footer[data-has-leading-action][data-has-action] .card-footer__layout {
   grid-template-columns:
     var(--card-footer-size)
     minmax(0, 1fr)
     var(--card-footer-size);
 }
 
-.card-footer[data-has-leading-action][data-has-media]
-  .card-footer__layout {
+.card-footer[data-has-leading-action][data-has-media] .card-footer__layout {
   grid-template-columns:
     var(--card-footer-size)
     var(--card-footer-size)

package/src/components/content/CardHeader/CardHeader.astro

@@ -2,10 +2,7 @@
 import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 import type { DisplayMedia, TextWeight } from '../../../display/contracts';
-import type {
-  AstroComponent,
-  HeadingLevel,
-} from '../../widgetTypes';
+import type { AstroComponent, HeadingLevel } from '../../widgetTypes';
 import Inline from '../../../composition/Inline/Inline.astro';
 import Media from '../../../primitives/media/Media/Media.astro';
 

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

@@ -90,11 +90,7 @@ const resolvedTone = tone ?? dataTone;
           {Icon ? (
             <Icon class="card-link__icon" data-tone={iconTone} />
           ) : media ? (
-            <Media
-              media={media}
-              fit="contain"
-              size="intrinsic"
-            />
+            <Media media={media} fit="contain" size="intrinsic" />
           ) : null}
         </span>
       ) : null
@@ -104,11 +100,7 @@ const resolvedTone = tone ?? dataTone;
       {
         hasContentMedia && media ? (
           <span class="card-link__content-media" aria-hidden="true">
-            <Media
-              media={media}
-              fit="contain"
-              size="intrinsic"
-            />
+            <Media media={media} fit="contain" size="intrinsic" />
           </span>
         ) : null
       }
@@ -134,11 +126,7 @@ const resolvedTone = tone ?? dataTone;
           {Icon ? (
             <Icon class="card-link__icon" data-tone={iconTone} />
           ) : media ? (
-            <Media
-              media={media}
-              fit="contain"
-              size="intrinsic"
-            />
+            <Media media={media} fit="contain" size="intrinsic" />
           ) : null}
         </span>
       ) : null

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

@@ -154,26 +154,17 @@
   );
 }
 
-.card-link:is(
-    [data-media-size='compact'],
-    [data-media-size='small']
-  )
+.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);
 }
 
-.card-link:is(
-    [data-media-size='compact'],
-    [data-media-size='small']
-  )
+.card-link:is([data-media-size='compact'], [data-media-size='small'])
   .card-link__content {
   --card-link-content-media-size: var(--card-link-resolved-media-size);
 }
 
-.card-link:is(
-    [data-media-size='compact'],
-    [data-media-size='small']
-  )
+.card-link:is([data-media-size='compact'], [data-media-size='small'])
   :is(.card-link__media, .card-link__content-media)
   [data-widget='media'] {
   --media-object-inline-size: 100%;
@@ -203,9 +194,7 @@
 }
 
 .card-link[data-density='relaxed'] .card-link__layout {
-  --card-link-size: calc(
-    var(--nox-navigation-block-size) + var(--nox-space-5)
-  );
+  --card-link-size: calc(var(--nox-navigation-block-size) + var(--nox-space-5));
 }
 
 .card-link[data-density='relaxed'] .card-link__content {

package/src/components/content/CodeBlock/CodeBlock.astro

@@ -3,10 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 import Button from '../../actions/Button/Button.astro';
 import CopyIcon from '../../icons/CopyIcon.astro';
 import type { Tone } from '../../../theme/contracts';
-import type {
-  CodeBlockCopy,
-  CodeBlockPresentation,
-} from './contracts';
+import type { CodeBlockCopy, CodeBlockPresentation } from './contracts';
 
 type Props = HTMLAttributes<'pre'> & {
   copy?: CodeBlockCopy;
@@ -42,7 +39,9 @@ const resolvedTone = tone ?? dataTone;
         data-code-block-content
         data-code-block-presentation={presentation}
         data-wrap={wrap ? true : undefined}
-      >{text}</pre>
+      >
+        {text}
+      </pre>
       <Button
         class="code-block__copy"
         type="button"
@@ -75,7 +74,9 @@ const resolvedTone = tone ?? dataTone;
       data-code-block-presentation={presentation}
       data-tone={resolvedTone}
       data-wrap={wrap ? true : undefined}
-    >{text}</pre>
+    >
+      {text}
+    </pre>
   )
 }
 

package/src/components/content/CodeBlock/CodeBlock.css

@@ -18,8 +18,7 @@
   --code-block-light-line-height: 1.125rem;
   --code-block-copy-size: calc(
     var(--code-block-light-line-height) + var(--nox-space-3) +
-      var(--nox-space-3) + var(--nox-border-width) +
-      var(--nox-border-width)
+      var(--nox-space-3) + var(--nox-border-width) + var(--nox-border-width)
   );
 
   position: relative;
@@ -30,9 +29,7 @@
 .code-block-shell .code-block {
   box-sizing: border-box;
   inline-size: 100%;
-  padding-inline-end: calc(
-    var(--code-block-copy-size) + var(--nox-space-3)
-  );
+  padding-inline-end: calc(var(--code-block-copy-size) + var(--nox-space-3));
 }
 
 .code-block[data-code-block-presentation='light'] {

package/src/components/content/CodeBlock/codeBlockController.ts

@@ -17,8 +17,7 @@ export function initCodeBlock(root: HTMLElement): () => void {
   root.setAttribute(initializedAttribute, 'true');
   const copyLabel = copyButton.dataset.copyLabel ?? '';
   const copiedLabel = copyButton.dataset.copiedLabel ?? copyLabel;
-  const unavailableLabel =
-    copyButton.dataset.copyUnavailableLabel ?? copyLabel;
+  const unavailableLabel = copyButton.dataset.copyUnavailableLabel ?? copyLabel;
   let feedbackTimeout: number | undefined;
 
   const setButtonLabel = (label: string): void => {

package/src/components/content/MarkdownContent/MarkdownContent.astro

@@ -1,8 +1,6 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
-import type {
-  CodeBlockCopy,
-} from '../CodeBlock/contracts';
+import type { CodeBlockCopy } from '../CodeBlock/contracts';
 import MarkdownNode from './MarkdownNode.astro';
 import type { MarkdownDocument } from './contracts';
 

package/src/components/content/MarkdownContent/MarkdownContent.css

@@ -163,8 +163,7 @@
   gap: 0;
 }
 
-.markdown-content__list-item[data-markdown-resource]
-  .markdown-content__list {
+.markdown-content__list-item[data-markdown-resource] .markdown-content__list {
   padding-inline-start: 0;
   list-style: none;
 }
@@ -268,6 +267,12 @@
   block-size: 1em;
 }
 
+.markdown-content__symbol-media {
+  block-size: 1.5em;
+  inline-size: 1.5em;
+  object-fit: contain;
+}
+
 .markdown-content__symbol[data-markdown-symbol^='terrain-']
   .markdown-content__symbol-icon {
   inline-size: 1.25em;

package/src/components/content/MarkdownContent/MarkdownInline.astro

@@ -20,10 +20,16 @@ const { node }: Props = Astro.props;
     <MarkdownSymbol node={node} />
   ) : node.type === 'strong' ? (
     <strong class="markdown-content__strong">
-      {node.children.map((child) => <Astro.self node={child} />)}
+      {node.children.map((child) => (
+        <Astro.self node={child} />
+      ))}
     </strong>
   ) : node.type === 'emphasis' ? (
-    <em>{node.children.map((child) => <Astro.self node={child} />)}</em>
+    <em>
+      {node.children.map((child) => (
+        <Astro.self node={child} />
+      ))}
+    </em>
   ) : node.type === 'code' ? (
     <code class="markdown-content__inline-code">{node.value}</code>
   ) : node.type === 'link' ? (
@@ -36,7 +42,9 @@ const { node }: Props = Astro.props;
       rel={node.external ? 'noopener noreferrer' : undefined}
       target={node.external ? '_blank' : undefined}
     >
-      {node.children.map((child) => <Astro.self node={child} />)}
+      {node.children.map((child) => (
+        <Astro.self node={child} />
+      ))}
     </a>
   ) : (
     <br />

package/src/components/content/MarkdownContent/MarkdownNode.astro

@@ -1,8 +1,6 @@
 ---
 import CodeBlock from '../CodeBlock/CodeBlock.astro';
-import type {
-  CodeBlockCopy,
-} from '../CodeBlock/contracts';
+import type { CodeBlockCopy } from '../CodeBlock/contracts';
 import Media from '../../../primitives/media/Media/Media.astro';
 import Separator from '../../../primitives/layout/Separator/Separator.astro';
 import type { Tone } from '../../../theme/contracts';
@@ -26,14 +24,14 @@ function toHeadingTag(
   return `h${level}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
-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;
+};
 
 const codeBlockTones = new Set<Tone>([
   'neutral',
@@ -77,10 +75,7 @@ const listItems =
 
 {
   node.type === 'section' ? (
-    <section
-      class="markdown-content__section"
-      aria-labelledby={node.id}
-    >
+    <section class="markdown-content__section" aria-labelledby={node.id}>
       <HeadingTag
         class="markdown-content__section-title"
         data-markdown-heading-level={node.level}
@@ -89,16 +84,16 @@ const listItems =
         {node.title}
       </HeadingTag>
       <div class="markdown-content__section-body">
-        {
-          node.blocks.map((block) => (
-            <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
-          ))
-        }
+        {node.blocks.map((block) => (
+          <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
+        ))}
       </div>
     </section>
   ) : node.type === 'paragraph' ? (
     <p class="markdown-content__paragraph">
-      {node.children.map((child) => <MarkdownInline node={child} />)}
+      {node.children.map((child) => (
+        <MarkdownInline node={child} />
+      ))}
     </p>
   ) : node.type === 'heading' ? (
     <HeadingTag
@@ -106,17 +101,23 @@ const listItems =
       data-markdown-heading-level={node.level}
       id={node.id}
     >
-      {node.children.map((child) => <MarkdownInline node={child} />)}
+      {node.children.map((child) => (
+        <MarkdownInline node={child} />
+      ))}
     </HeadingTag>
   ) : node.type === 'change' ? (
     <div class="markdown-content__change">
       <span class="markdown-content__change-label">
-        {node.label.map((child) => <MarkdownInline node={child} />)}
+        {node.label.map((child) => (
+          <MarkdownInline node={child} />
+        ))}
         <span>:</span>
       </span>
       {node.presentation === 'statement' ? (
         <span class="markdown-content__change-values">
-          {node.value.map((child) => <MarkdownInline node={child} />)}
+          {node.value.map((child) => (
+            <MarkdownInline node={child} />
+          ))}
         </span>
       ) : (
         <span class="markdown-content__change-values" lang={node.valueLang}>
@@ -187,9 +188,7 @@ const listItems =
               media={item.resource.media}
               size="fill"
               upscale={
-                item.resource.mediaScale === 'compact'
-                  ? 'prevent'
-                  : undefined
+                item.resource.mediaScale === 'compact' ? 'prevent' : undefined
               }
             />
           ) : null}
@@ -242,11 +241,9 @@ const listItems =
                 )}
               </div>
             ) : null}
-            {
-              item.children.map((block) => (
-                <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
-              ))
-            }
+            {item.children.map((block) => (
+              <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
+            ))}
           </div>
         </li>
       ))}
@@ -256,11 +253,9 @@ const listItems =
       class="markdown-content__quote"
       data-tone={node.tone ?? 'neutral'}
     >
-      {
-        node.children.map((block) => (
-          <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
-        ))
-      }
+      {node.children.map((block) => (
+        <Astro.self node={block} codeBlockCopy={codeBlockCopy} />
+      ))}
     </blockquote>
   ) : node.type === 'separator' ? (
     <Separator bleed emphasis={node.emphasis} />

package/src/components/content/MarkdownContent/MarkdownSymbol.astro

@@ -5,29 +5,24 @@ import ArrowRightIcon from '../../icons/ArrowRightIcon.astro';
 import ArrowUpIcon from '../../icons/ArrowUpIcon.astro';
 import BulletIcon from '../../icons/BulletIcon.astro';
 import EqualIcon from '../../icons/EqualIcon.astro';
-import FieldIcon from '../../icons/FieldIcon.astro';
-import GrassIcon from '../../icons/GrassIcon.astro';
-import MountainIcon from '../../icons/MountainIcon.astro';
-import WaterIcon from '../../icons/WaterIcon.astro';
-import type { MarkdownSymbol } from './contracts';
+import type { MarkdownBuiltinSymbolName, MarkdownSymbol } from './contracts';
 
 type Props = {
   node: MarkdownSymbol;
 };
 
 const { node }: Props = Astro.props;
-const Icon = {
+const icons = {
   adjustment: ArrowUpDownIcon,
   'arrow-right': ArrowRightIcon,
   bullet: BulletIcon,
   decrease: ArrowDownIcon,
   increase: ArrowUpIcon,
   neutral: EqualIcon,
-  'terrain-field': FieldIcon,
-  'terrain-grass': GrassIcon,
-  'terrain-mountain': MountainIcon,
-  'terrain-water': WaterIcon,
-}[node.name];
+} satisfies Record<MarkdownBuiltinSymbolName, typeof ArrowUpDownIcon>;
+const Icon = node.media ? null : icons[node.name as MarkdownBuiltinSymbolName];
+if (!node.media && !Icon)
+  throw new Error(`Unknown Markdown symbol: ${node.name}`);
 ---
 
 <span
@@ -36,12 +31,28 @@ const Icon = {
   data-tone={node.tone}
   lang={node.lang}
 >
-  <Icon class="markdown-content__symbol-icon" />
-  {node.label ? (
-    <span class="markdown-content__symbol-label">{node.label}</span>
-  ) : node.accessibleLabel ? (
-    <span class="markdown-content__visually-hidden">
-      {node.accessibleLabel}
-    </span>
-  ) : null}
+  {
+    node.media ? (
+      <img
+        class="markdown-content__symbol-media"
+        src={node.media.src}
+        alt={node.media.alt}
+        width={node.media.width}
+        height={node.media.height}
+        loading={node.media.loading ?? 'lazy'}
+        decoding={node.media.decoding ?? 'async'}
+      />
+    ) : Icon ? (
+      <Icon class="markdown-content__symbol-icon" />
+    ) : null
+  }
+  {
+    node.label ? (
+      <span class="markdown-content__symbol-label">{node.label}</span>
+    ) : node.accessibleLabel ? (
+      <span class="markdown-content__visually-hidden">
+        {node.accessibleLabel}
+      </span>
+    ) : null
+  }
 </span>

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

@@ -7,27 +7,27 @@ export type MarkdownText = {
   value: string;
 };
 
-export type MarkdownSymbolName =
-  | 'adjustment'
-  | 'arrow-right'
-  | 'bullet'
-  | 'decrease'
-  | 'increase'
-  | 'neutral'
-  | 'terrain-field'
-  | 'terrain-grass'
-  | 'terrain-mountain'
-  | 'terrain-water';
-
-export type MarkdownSymbol = {
+export type MarkdownBuiltinSymbolName =
+  'adjustment' | 'arrow-right' | 'bullet' | 'decrease' | 'increase' | 'neutral';
+
+type MarkdownSymbolBase = {
   type: 'symbol';
   accessibleLabel?: string;
   lang?: string;
   label?: string;
-  name: MarkdownSymbolName;
   tone?: Tone;
 };
 
+export type MarkdownSymbol =
+  | (MarkdownSymbolBase & {
+      media?: never;
+      name: MarkdownBuiltinSymbolName;
+    })
+  | (MarkdownSymbolBase & {
+      media: DisplayMedia;
+      name: string;
+    });
+
 export type MarkdownStrong = {
   type: 'strong';
   children: readonly MarkdownInline[];
@@ -91,7 +91,7 @@ export type MarkdownListMarker = {
   lang?: string;
   label?: string;
   symbol: Extract<
-    MarkdownSymbolName,
+    MarkdownBuiltinSymbolName,
     | 'adjustment'
     | 'arrow-right'
     | 'bullet'