@astronox/core 0.2.4 → 0.3.1

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'

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,