@astronox/core 0.1.0

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

@@ -0,0 +1,104 @@
+const activateEvent = 'nox:canvas-frame:activate';
+
+const getCanvas = (root: HTMLElement): HTMLCanvasElement | null =>
+  root.querySelector<HTMLCanvasElement>('[data-canvas-frame-content]');
+
+export function activateCanvasFrame(
+  root: HTMLElement,
+): HTMLCanvasElement | null {
+  const canvas = getCanvas(root);
+  if (!canvas || root.dataset.canvasFrameActive === 'true') return canvas;
+
+  const activationLayer = root.querySelector<HTMLElement>(
+    '[data-canvas-frame-activation-layer]',
+  );
+  const loading = root.querySelector<HTMLElement>(
+    '[data-canvas-frame-loading]',
+  );
+
+  root.dataset.canvasFrameActive = 'true';
+  root.setAttribute('aria-busy', 'true');
+  if (activationLayer) activationLayer.hidden = true;
+  if (loading) loading.hidden = false;
+  root.dispatchEvent(new Event(activateEvent));
+
+  return canvas;
+}
+
+export function setCanvasFrameProgress(
+  root: HTMLElement,
+  progress: number,
+): void {
+  const indicator = root.querySelector<HTMLElement>(
+    '[data-canvas-frame-loading-indicator]',
+  );
+  if (!indicator) return;
+
+  const loadingLabel = root.dataset.canvasFrameLoadingLabel ?? '';
+  const percentage = Math.round(Math.min(Math.max(progress, 0), 1) * 100);
+  indicator.setAttribute('aria-label', `${loadingLabel} — ${percentage} %`);
+}
+
+export function markCanvasFrameReady(root: HTMLElement): void {
+  const loading = root.querySelector<HTMLElement>(
+    '[data-canvas-frame-loading]',
+  );
+  const feedback = root.querySelector<HTMLElement>(
+    '[data-canvas-frame-feedback]',
+  );
+
+  if (loading) loading.hidden = true;
+  if (feedback) feedback.hidden = true;
+  root.setAttribute('aria-busy', 'false');
+  root.dataset.canvasFrameReady = 'true';
+}
+
+export function markCanvasFrameError(
+  root: HTMLElement,
+  message: string,
+): void {
+  const loading = root.querySelector<HTMLElement>(
+    '[data-canvas-frame-loading]',
+  );
+  const feedback = root.querySelector<HTMLElement>(
+    '[data-canvas-frame-feedback]',
+  );
+
+  if (loading) loading.hidden = true;
+  if (feedback) {
+    feedback.textContent = message;
+    feedback.hidden = false;
+  }
+  root.setAttribute('aria-busy', 'false');
+  root.dataset.canvasFrameError = 'true';
+}
+
+export const initCanvasFrame = (root: HTMLElement): (() => void) => {
+  const activationControl = root.querySelector<HTMLButtonElement>(
+    '[data-canvas-frame-activate]',
+  );
+
+  const activate = (): void => {
+    const canvas = activateCanvasFrame(root);
+    requestAnimationFrame(() => canvas?.focus({ preventScroll: true }));
+  };
+
+  const preservePageWheel = (event: WheelEvent): void => {
+    const pageOwnsWheel = root.dataset.canvasFrameWheelInput === 'page';
+    const playerIsFullscreen = document.fullscreenElement === root;
+    if (pageOwnsWheel && !playerIsFullscreen) event.stopPropagation();
+  };
+
+  activationControl?.addEventListener('click', activate);
+  root.addEventListener('wheel', preservePageWheel, {
+    capture: true,
+    passive: true,
+  });
+
+  return () => {
+    activationControl?.removeEventListener('click', activate);
+    root.removeEventListener('wheel', preservePageWheel, { capture: true });
+  };
+};
+
+export { activateEvent as canvasFrameActivateEvent };

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

@@ -0,0 +1,147 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+import Button from '../../actions/Button/Button.astro';
+import Spinner from '../../feedback/Spinner/Spinner.astro';
+import FullscreenControl from '../../../patterns/Fullscreen/FullscreenControl.astro';
+
+type EmbedAspectRatio = '16/9' | '4/3';
+type EmbedActivation = 'immediate' | 'manual';
+type EmbedLoading = 'eager' | 'lazy';
+type EmbedLoadingIndicator = 'none' | 'spinner';
+
+type EmbedFullscreen = {
+  enterLabel: string;
+  exitLabel: string;
+  overlayOffset?: 'default' | 'native-controls';
+};
+
+type Props = Omit<
+  HTMLAttributes<'iframe'>,
+  'height' | 'loading' | 'src' | 'title' | 'width'
+> & {
+  activation?: EmbedActivation;
+  activationLabel?: string;
+  aspectRatio?: EmbedAspectRatio;
+  frameId?: string;
+  fullscreen?: EmbedFullscreen;
+  loading?: EmbedLoading;
+  loadingIndicator?: EmbedLoadingIndicator;
+  loadingLabel: string;
+  src: string;
+  title: string;
+  tone?: Tone;
+};
+
+const dimensionsByRatio: Record<
+  EmbedAspectRatio,
+  { height: number; width: number }
+> = {
+  '16/9': { height: 9, width: 16 },
+  '4/3': { height: 3, width: 4 },
+};
+
+const {
+  activation = 'immediate',
+  activationLabel,
+  aspectRatio = '16/9',
+  class: className,
+  'data-tone': dataTone,
+  frameId,
+  fullscreen,
+  loading = 'lazy',
+  loadingIndicator = 'spinner',
+  loadingLabel,
+  src,
+  title,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const { height, width } = dimensionsByRatio[aspectRatio];
+const resolvedTone = tone ?? dataTone;
+---
+
+<nox-embed-frame
+  id={frameId}
+  class="embed-frame"
+  data-embed-frame-activation={activation}
+  data-embed-frame-source={activation === 'manual' ? src : undefined}
+  data-aspect-ratio={aspectRatio}
+  data-fullscreen-region={fullscreen ? true : undefined}
+  data-widget="embed-frame"
+  data-tone={resolvedTone}
+  aria-busy={
+    activation === 'immediate' && loadingIndicator === 'spinner'
+      ? 'true'
+      : 'false'
+  }
+>
+  <iframe
+    {...attrs}
+    class:list={['embed-frame__content', className]}
+    data-embed-frame-content
+    src={activation === 'immediate' ? src : undefined}
+    title={title}
+    width={width}
+    height={height}
+    loading={loading}
+    allowfullscreen
+  ></iframe>
+  {
+    activation === 'manual' && activationLabel ? (
+      <span class="embed-frame__activation" data-embed-frame-activation-layer>
+        <Button
+          type="button"
+          prominent
+          data-embed-frame-activate
+        >
+          {activationLabel}
+        </Button>
+      </span>
+    ) : null
+  }
+  {
+    loadingIndicator === 'spinner' ? (
+      <span
+        class="embed-frame__loading"
+        data-embed-frame-loading
+        hidden={activation === 'manual'}
+      >
+        <Spinner label={loadingLabel} size="lg" />
+      </span>
+    ) : null
+  }
+  {
+    fullscreen ? (
+      <FullscreenControl
+        targetId={frameId ?? ''}
+        enterLabel={fullscreen.enterLabel}
+        exitLabel={fullscreen.exitLabel}
+        placement="overlay"
+        overlayOffset={fullscreen.overlayOffset}
+      />
+    ) : null
+  }
+</nox-embed-frame>
+
+<script>
+  import { initEmbedFrame } from './embedFrameController';
+
+  class NoxEmbedFrameElement extends HTMLElement {
+    cleanup?: () => void;
+
+    connectedCallback() {
+      this.cleanup?.();
+      this.cleanup = initEmbedFrame(this);
+    }
+
+    disconnectedCallback() {
+      this.cleanup?.();
+      this.cleanup = undefined;
+    }
+  }
+
+  if (!customElements.get('nox-embed-frame')) {
+    customElements.define('nox-embed-frame', NoxEmbedFrameElement);
+  }
+</script>

package/src/components/media/EmbedFrame/EmbedFrame.css

@@ -0,0 +1,51 @@
+.embed-frame {
+  --nox-fullscreen-native-controls-block-size: 2.5rem;
+
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  overflow: hidden;
+}
+
+.embed-frame[data-aspect-ratio='16/9'] {
+  aspect-ratio: 16 / 9;
+}
+
+.embed-frame[data-aspect-ratio='4/3'] {
+  aspect-ratio: 4 / 3;
+}
+
+.embed-frame__content {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+}
+
+.embed-frame__activation {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--nox-surface);
+}
+
+.embed-frame__activation[hidden] {
+  display: none;
+}
+
+.embed-frame__loading {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: var(--nox-surface);
+  pointer-events: none;
+}
+
+.embed-frame__loading[hidden] {
+  display: none;
+}

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

@@ -0,0 +1,66 @@
+const activateEvent = 'nox:embed-frame:activate';
+
+export function activateEmbedFrame(root: HTMLElement): HTMLIFrameElement | null {
+  const iframe = root.querySelector<HTMLIFrameElement>(
+    '[data-embed-frame-content]',
+  );
+  if (!iframe) return null;
+
+  root.dispatchEvent(new Event(activateEvent));
+  return iframe;
+}
+
+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 activationLayer = root.querySelector<HTMLElement>(
+    '[data-embed-frame-activation-layer]',
+  );
+  const activationControl = root.querySelector<HTMLButtonElement>(
+    '[data-embed-frame-activate]',
+  );
+  if (!iframe) return () => {};
+  let activated =
+    root.dataset.embedFrameActivation !== 'manual' ||
+    root.dataset.embedFrameActive === 'true';
+
+  const markLoaded = () => {
+    if (!activated) return;
+    if (loading) loading.hidden = true;
+    root.setAttribute('aria-busy', 'false');
+  };
+
+  const activate = () => {
+    if (activated) return;
+
+    const src = root.dataset.embedFrameSource;
+    if (!src) return;
+
+    activated = true;
+    if (activationLayer) activationLayer.hidden = true;
+    if (loading) loading.hidden = false;
+    root.setAttribute('aria-busy', loading ? 'true' : 'false');
+    root.setAttribute('data-embed-frame-active', 'true');
+    iframe.src = src;
+  };
+
+  const activateFromControl = () => {
+    activate();
+    requestAnimationFrame(() => iframe.focus({ preventScroll: true }));
+  };
+
+  if (activated && activationLayer) activationLayer.hidden = true;
+  iframe.addEventListener('load', markLoaded);
+  root.addEventListener(activateEvent, activate);
+  activationControl?.addEventListener('click', activateFromControl);
+
+  return () => {
+    iframe.removeEventListener('load', markLoaded);
+    root.removeEventListener(activateEvent, activate);
+    activationControl?.removeEventListener('click', activateFromControl);
+  };
+};

package/src/components/media/MediaFrame/MediaFrame.astro

@@ -0,0 +1,34 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type MediaFrameShape = 'circle' | 'rounded' | 'square';
+type MediaFrameSize = 'sm' | 'md' | 'lg' | 'fill';
+
+type Props = HTMLAttributes<'div'> & {
+  shape?: MediaFrameShape;
+  size?: MediaFrameSize;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  shape = 'rounded',
+  size = 'md',
+  tone,
+  ...attrs
+} = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<div
+  {...attrs}
+  class:list={['media-frame', className]}
+  data-widget="media-frame"
+  data-shape={shape}
+  data-size={size}
+  data-tone={resolvedTone}
+>
+  <slot />
+</div>

package/src/components/media/MediaFrame/MediaFrame.css

@@ -0,0 +1,66 @@
+.media-frame {
+  --media-frame-size-sm: 4rem;
+  --media-frame-size-md: 6.25rem;
+  --media-frame-size-lg: 16rem;
+  --media-frame-padding: var(--nox-space-3);
+
+  position: relative;
+  display: grid;
+  min-inline-size: 0;
+  min-block-size: 0;
+  place-items: center;
+  overflow: hidden;
+  border: 3px solid var(--nox-surface);
+  background:
+    radial-gradient(
+      circle at 50% 42%,
+      color-mix(in srgb, var(--nox-tone-color) 8%, transparent),
+      transparent 56%
+    ),
+    color-mix(in srgb, var(--nox-tone-color) 7%, var(--nox-surface));
+  box-shadow:
+    0 0 0 1px var(--nox-border),
+    0 0.35rem 0.75rem
+      color-mix(in srgb, var(--nox-tone-shadow) 16%, transparent);
+}
+
+.media-frame[data-shape='circle'] {
+  border-radius: var(--nox-radius-pill);
+}
+
+.media-frame[data-shape='rounded'] {
+  border-radius: var(--nox-radius-lg);
+}
+
+.media-frame[data-shape='square'] {
+  border-radius: var(--nox-radius-sm);
+}
+
+.media-frame[data-size='sm'] {
+  inline-size: var(--media-frame-size-sm);
+  block-size: var(--media-frame-size-sm);
+  padding: var(--nox-space-2);
+}
+
+.media-frame[data-size='md'] {
+  inline-size: var(--media-frame-size, var(--media-frame-size-md));
+  block-size: var(--media-frame-size, var(--media-frame-size-md));
+  padding: var(--media-frame-padding);
+}
+
+.media-frame[data-size='lg'] {
+  inline-size: min(100%, var(--media-frame-size-lg));
+  aspect-ratio: 1;
+  padding: var(--nox-space-5);
+}
+
+.media-frame[data-size='fill'] {
+  inline-size: 100%;
+  block-size: 100%;
+  padding: clamp(var(--nox-space-3), 5%, var(--nox-space-6));
+}
+
+.media-frame > [data-widget='media'] {
+  inline-size: 100%;
+  block-size: 100%;
+}

package/src/components/navigation/Breadcrumbs/Breadcrumbs.astro

@@ -0,0 +1,55 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { BreadcrumbItem } from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'nav'> & {
+  items: readonly BreadcrumbItem[];
+  label?: string;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  items,
+  label = "Fil d'Ariane",
+  tone,
+  ...attrs
+} = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+{
+  items.length > 0 ? (
+    <nav
+      {...attrs}
+      class:list={['breadcrumbs', className]}
+      aria-label={label}
+      data-widget="breadcrumbs"
+      data-tone={resolvedTone}
+    >
+      <ol class="breadcrumbs__list">
+        {items.map((item, index) => {
+          const href = item.href;
+          const isCurrent = index === items.length - 1;
+          const isNavigable = href.length > 0;
+
+          return (
+            <li class="breadcrumbs__item">
+              {isNavigable ? (
+                <a href={href} aria-current={isCurrent ? 'page' : undefined}>
+                  {item.label}
+                </a>
+              ) : (
+                <span aria-current={isCurrent ? 'page' : undefined}>
+                  {item.label}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  ) : null
+}

package/src/components/navigation/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,89 @@
+.breadcrumbs {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-medium);
+  line-height: 1.35;
+}
+
+.breadcrumbs__list {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  min-width: 0;
+  min-block-size: calc(
+    1.35em + var(--site-main-content-gap, var(--nox-space-5)) +
+      var(--site-main-content-gap, var(--nox-space-5))
+  );
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  list-style: none;
+}
+
+.breadcrumbs__item {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: stretch;
+  min-width: 0;
+}
+
+.breadcrumbs__item:last-child {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+
+.breadcrumbs__item > span {
+  display: inline-flex;
+  align-items: center;
+}
+
+.breadcrumbs__item + .breadcrumbs__item::before {
+  display: inline-flex;
+  align-items: center;
+  margin-inline: var(--nox-space-2);
+  color: color-mix(in srgb, var(--nox-tone-color) 55%, var(--nox-text-subtle));
+  content: '›';
+  font-size: var(--nox-font-size-md);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: 1;
+}
+
+.breadcrumbs a {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  align-self: stretch;
+  border-radius: var(--nox-radius-sm);
+  color: inherit;
+  margin-inline: -0.1875rem;
+  padding-inline: 0.1875rem;
+  text-decoration: none;
+  text-underline-offset: 0.2em;
+}
+
+.breadcrumbs__item:last-child > :is(a, span) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .breadcrumbs a:hover {
+    color: var(--nox-tone-text);
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+  }
+}
+
+.breadcrumbs a:focus-visible {
+  color: var(--nox-tone-text);
+  text-decoration-line: underline;
+  text-decoration-thickness: 0.125rem;
+}
+
+.breadcrumbs [aria-current='page'] {
+  color: var(--nox-tone-text);
+  font-weight: var(--nox-font-weight-strong);
+}

package/src/components/navigation/DesktopNavigation.astro

@@ -0,0 +1,92 @@
+---
+import type { SiteIdentity } from '../../config/siteConfig';
+import type { NavigationItem } from '../../display/contracts';
+import Dropdown from '../../patterns/Dropdown/Dropdown.astro';
+import NavigationBrand from './NavigationBrand.astro';
+import NavigationLink from './NavigationLink.astro';
+import NavigationLinks from './NavigationLinks.astro';
+import NavigationMenuList from './NavigationMenuList.astro';
+import {
+  isNavigationGroupItem,
+  isNavigationItemActive,
+} from './navigationState';
+
+type Props = {
+  homeHref: string;
+  homeLabel: string;
+  identity: SiteIdentity;
+  leftItems: readonly NavigationItem[];
+  rightItems: readonly NavigationItem[];
+  currentPath: string;
+};
+
+const { currentPath, homeHref, homeLabel, identity, leftItems, rightItems } =
+  Astro.props;
+---
+
+<div class="site-nav__desktop">
+  <div class="site-nav__side">
+    <div class="site-nav__action site-nav__action--start">
+      <slot name="leading-actions" />
+    </div>
+
+    <div class="site-nav__group site-nav__group--left">
+      <NavigationLinks
+        items={leftItems}
+        currentPath={currentPath}
+        appearance="bar"
+      />
+    </div>
+  </div>
+
+  <NavigationBrand
+    identity={identity}
+    href={homeHref}
+    label={homeLabel}
+    class="site-nav__brand--desktop"
+  />
+
+  <div class="site-nav__side">
+    <div class="site-nav__group site-nav__group--right">
+      {
+        rightItems.map((item) =>
+          isNavigationGroupItem(item) ? (
+            <Dropdown
+              id={`site-nav-dropdown-${item.id}`}
+              label={item.label}
+              align="center"
+              attached
+              active={item.items.some((child) =>
+                isNavigationItemActive(child, currentPath),
+              )}
+              indicator="chevron-down"
+              maxVisibleItems={5}
+              trigger="hover"
+              triggerAppearance="bar"
+              triggerLabel={item.media ? 'accessible' : 'visible'}
+              triggerMedia={item.media}
+              triggerMediaShape="circle"
+            >
+              <NavigationMenuList
+                items={item.items}
+                currentPath={currentPath}
+                listClass="site-nav__dropdown-list"
+                linkClass="site-nav__dropdown-link"
+              />
+            </Dropdown>
+          ) : (
+            <NavigationLink
+              item={item}
+              currentPath={currentPath}
+              appearance="bar"
+            />
+          ),
+        )
+      }
+    </div>
+
+    <div class="site-nav__action site-nav__action--end">
+      <slot name="actions" />
+    </div>
+  </div>
+</div>