@astronox/core 0.1.0

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,74 @@
+---
+import SeoHead from '../components/seo/SeoHead.astro';
+import type { HTMLAttributes } from 'astro/types';
+import type { BreadcrumbItem } from '../display/contracts';
+import type { PageMeta } from '../config/pageMeta';
+import type { SiteConfig } from '../config/siteConfig';
+import type { JsonLdNode } from '../seo/structuredData';
+import type { Tone } from '../theme/contracts';
+import PageSurface from './PageSurface.astro';
+import Breadcrumbs from '../components/navigation/Breadcrumbs/Breadcrumbs.astro';
+import ScrollToTop from '../components/actions/ScrollToTop/ScrollToTop.astro';
+
+type Props = HTMLAttributes<'html'> & {
+  meta: PageMeta;
+  site: SiteConfig;
+  currentPath?: string;
+  breadcrumbs?: readonly BreadcrumbItem[];
+  breadcrumbLabel: string;
+  scrollToTopLabel?: string;
+  structuredData?: readonly JsonLdNode[];
+  tone?: Tone;
+};
+
+const {
+  breadcrumbLabel,
+  breadcrumbs,
+  currentPath = Astro.url.pathname,
+  'data-tone': dataTone,
+  meta,
+  scrollToTopLabel,
+  site,
+  structuredData,
+  tone,
+  ...htmlAttrs
+} = Astro.props;
+const lang = meta.lang ?? site.defaultMeta.lang;
+const resolvedTone = tone ?? dataTone;
+---
+
+<!doctype html>
+<html {...htmlAttrs} lang={lang} data-tone={resolvedTone}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <SeoHead
+      breadcrumbs={breadcrumbs}
+      meta={meta}
+      pathname={currentPath}
+      site={site}
+      structuredData={structuredData}
+    />
+    <slot name="head" />
+  </head>
+  <body>
+    <slot name="skip-link" />
+    <slot name="header" />
+    <div class="site-viewport" data-site-viewport>
+      <main id="content" class="site-main" tabindex="-1">
+        <div class="site-main__content">
+          {
+            breadcrumbs?.length ? (
+              <Breadcrumbs items={breadcrumbs} label={breadcrumbLabel} />
+            ) : null
+          }
+
+          <PageSurface>
+            <slot />
+          </PageSurface>
+        </div>
+      </main>
+    </div>
+    {scrollToTopLabel ? <ScrollToTop label={scrollToTopLabel} /> : null}
+  </body>
+</html>

package/src/layouts/PageSurface.astro

@@ -0,0 +1,15 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'>;
+
+const { class: className, ...attrs }: Props = Astro.props;
+---
+
+<div
+  {...attrs}
+  class:list={['page-surface', className]}
+  data-layout="page-surface"
+>
+  <slot />
+</div>

package/src/layouts/PageSurface.css

@@ -0,0 +1,24 @@
+.page-surface {
+  display: grid;
+  align-content: start;
+  width: 100%;
+  min-width: 0;
+  padding: var(--nox-page-surface-padding);
+  gap: var(--nox-space-5);
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-lg);
+  background: transparent;
+  box-shadow: 0 1rem 2.5rem
+    color-mix(in srgb, var(--nox-tone-shadow) 4.5%, transparent);
+}
+
+@media (width < 48rem) {
+  .page-surface {
+    width: calc(100% + var(--nox-page-gutter) + var(--nox-page-gutter));
+    margin-inline: calc(0px - var(--nox-page-gutter));
+    border-inline-width: 0;
+    border-block-end-width: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+}

package/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export { default as BaseLayout } from './BaseLayout.astro';
+export { default as PageSurface } from './PageSurface.astro';

package/src/patterns/CircuitPuzzle/CircuitPuzzle.astro

@@ -0,0 +1,93 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import PuzzleGrid from '../PuzzleGrid/PuzzleGrid.astro';
+import type { CircuitPuzzleLabels, CircuitPuzzleModel } from './contracts';
+
+type Props = HTMLAttributes<'section'> & {
+  label: string;
+  labels: CircuitPuzzleLabels;
+  puzzles: readonly CircuitPuzzleModel[];
+};
+
+const {
+  class: className,
+  label,
+  labels,
+  puzzles,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<section
+  {...attrs}
+  class:list={['circuit-puzzle', className]}
+  aria-label={label}
+  data-circuit-puzzle
+>
+  {
+    puzzles.map((puzzle, puzzleIndex) => (
+      <div
+        class="circuit-puzzle__instance"
+        data-puzzle-id={puzzle.id}
+        data-puzzle-status="incomplete"
+        hidden={puzzleIndex !== 0}
+      >
+        <PuzzleGrid
+          class="circuit-puzzle__board"
+          label={puzzle.label}
+          rows={puzzle.rows}
+          columns={puzzle.columns}
+        >
+          {puzzle.cells.map((cell, cellIndex) => {
+            const cellLabel = [
+              labels.cellKinds[cell.kind],
+              `${labels.row} ${cell.row + 1}`,
+              `${labels.column} ${cell.column + 1}`,
+            ].join(', ');
+
+            return (
+              <button
+                class="puzzle-grid__cell circuit-puzzle__cell"
+                type="button"
+                aria-label={`${cellLabel} — ${labels.orientation} ${cell.initialRotation}°`}
+                data-puzzle-cell
+                data-puzzle-cell-interactive={cell.fixed ? undefined : ''}
+                data-puzzle-cell-disabled={cell.fixed ? '' : undefined}
+                data-circuit-cell={cell.id}
+                data-cell-kind={cell.kind}
+                data-cell-label={cellLabel}
+                data-orientation-label={labels.orientation}
+                data-cell-rotation={cell.initialRotation}
+                data-cell-visual-rotation={cell.initialRotation}
+                data-initial-rotation={cell.initialRotation}
+                data-cell-fixed={cell.fixed ? '' : undefined}
+                disabled={cell.fixed ? true : undefined}
+                style={`--cell-row: ${cell.row + 1}; --cell-column: ${cell.column + 1}; --cell-rotation: ${cell.initialRotation}deg; --cell-index: ${cellIndex};`}
+              >
+                <span class="circuit-puzzle__piece" aria-hidden="true">
+                  {cell.connections.map((direction) => (
+                    <span
+                      class:list={[
+                        'circuit-puzzle__trace',
+                        `circuit-puzzle__trace--${direction}`,
+                      ]}
+                    />
+                  ))}
+                  <span class="circuit-puzzle__node" />
+                </span>
+              </button>
+            );
+          })}
+        </PuzzleGrid>
+      </div>
+    ))
+  }
+</section>
+
+<script>
+  import { initCircuitPuzzle } from './circuitPuzzleController';
+
+  for (const root of document.querySelectorAll('[data-circuit-puzzle]')) {
+    if (root instanceof HTMLElement) initCircuitPuzzle(root);
+  }
+</script>

package/src/patterns/CircuitPuzzle/CircuitPuzzle.css

@@ -0,0 +1,118 @@
+.circuit-puzzle,
+.circuit-puzzle__instance {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.circuit-puzzle__instance[hidden] {
+  display: none;
+}
+
+.circuit-puzzle__cell {
+  --circuit-puzzle-symbol-color: var(--puzzle-cell-base-color);
+
+  appearance: none;
+}
+
+.circuit-puzzle__cell[data-cell-kind='core'] {
+  --puzzle-cell-base-border: var(--nox-source-tone-success);
+  --circuit-puzzle-symbol-color: var(--nox-source-tone-success);
+
+  border-style: dashed;
+}
+
+.circuit-puzzle__cell[data-puzzle-cell-state='valid'],
+.circuit-puzzle__cell[data-puzzle-cell-state='invalid'] {
+  --puzzle-cell-state-background: var(--puzzle-cell-base-background);
+  --puzzle-cell-state-border: var(--puzzle-cell-base-border);
+  --puzzle-cell-state-color: var(--puzzle-cell-base-color);
+}
+
+.circuit-puzzle__cell[data-puzzle-cell-state='valid'] {
+  --circuit-puzzle-symbol-color: var(--nox-source-tone-success);
+}
+
+.circuit-puzzle__cell[data-puzzle-cell-state='invalid'] {
+  --circuit-puzzle-symbol-color: var(--nox-source-tone-danger);
+}
+
+.circuit-puzzle__piece {
+  position: relative;
+  display: grid;
+  inline-size: 72%;
+  block-size: 72%;
+  place-items: center;
+  transform: rotate(var(--cell-rotation));
+  color: var(--circuit-puzzle-symbol-color);
+}
+
+.circuit-puzzle__node {
+  z-index: 1;
+  inline-size: 32%;
+  block-size: 32%;
+  border: var(--nox-border-width) solid currentColor;
+  border-radius: var(--nox-radius-pill);
+  background: var(--nox-surface);
+}
+
+.circuit-puzzle__trace {
+  position: absolute;
+  background: currentColor;
+}
+
+.circuit-puzzle__trace--north,
+.circuit-puzzle__trace--south {
+  inset-inline-start: 50%;
+  inline-size: 12%;
+  block-size: 50%;
+  transform: translateX(-50%);
+}
+
+.circuit-puzzle__trace--north {
+  inset-block-start: 0;
+}
+
+.circuit-puzzle__trace--south {
+  inset-block-end: 0;
+}
+
+.circuit-puzzle__trace--east,
+.circuit-puzzle__trace--west {
+  inset-block-start: 50%;
+  inline-size: 50%;
+  block-size: 12%;
+  transform: translateY(-50%);
+}
+
+.circuit-puzzle__trace--east {
+  inset-inline-end: 0;
+}
+
+.circuit-puzzle__trace--west {
+  inset-inline-start: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .circuit-puzzle__piece {
+    transition: transform var(--nox-motion-duration-sm)
+      var(--nox-motion-easing-standard);
+  }
+
+  .circuit-puzzle__instance[data-puzzle-resetting] .circuit-puzzle__piece {
+    transition: none;
+  }
+
+  .circuit-puzzle__instance[data-puzzle-status='valid']
+    .circuit-puzzle__cell[data-puzzle-cell-state='valid']
+    .circuit-puzzle__piece {
+    animation: circuit-puzzle-power 600ms var(--nox-motion-easing-standard);
+    animation-delay: calc(var(--cell-index) * 24ms);
+  }
+}
+
+@keyframes circuit-puzzle-power {
+  50% {
+    filter: drop-shadow(0 0 var(--nox-space-2) var(--nox-source-tone-success));
+    transform: rotate(var(--cell-rotation)) scale(1.08);
+  }
+}

package/src/patterns/CircuitPuzzle/circuitPuzzleController.ts

@@ -0,0 +1,205 @@
+import {
+  setPuzzleGridCellState,
+  setPuzzleGridState,
+} from '../PuzzleGrid/state';
+import { initPuzzleSelectionDismissal } from '../PuzzleGrid/selectionDismissal';
+import type {
+  CircuitPuzzleChangeDetail,
+  CircuitPuzzleEvaluation,
+  CircuitRotation,
+} from './contracts';
+
+type CircuitInstance = {
+  activeIndex: number;
+};
+
+const rotations: readonly CircuitRotation[] = [0, 90, 180, 270];
+const instances = new WeakMap<HTMLElement, CircuitInstance>();
+
+export function initCircuitPuzzle(root: HTMLElement): void {
+  if (instances.has(root)) return;
+  instances.set(root, { activeIndex: 0 });
+  initPuzzleSelectionDismissal(root, {
+    dismiss: () => {
+      const panel = getActivePanel(root);
+      if (panel) selectCell(panel, null);
+    },
+    isSelectionTarget: (target) => {
+      const panel = getActivePanel(root);
+      const cell = target.closest<HTMLElement>('[data-circuit-cell]');
+      return Boolean(
+        panel &&
+        panel.dataset.puzzleStatus !== 'valid' &&
+        cell &&
+        panel.contains(cell) &&
+        !cell.hasAttribute('data-cell-fixed'),
+      );
+    },
+  });
+
+  root.addEventListener('click', (event) => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+
+    const cell = target.closest<HTMLButtonElement>('[data-circuit-cell]');
+    const panel = getActivePanel(root);
+    if (
+      !cell ||
+      !panel ||
+      panel.dataset.puzzleStatus === 'valid' ||
+      cell.hasAttribute('data-cell-fixed')
+    ) {
+      return;
+    }
+
+    const current = Number(cell.dataset.cellRotation) as CircuitRotation;
+    const currentIndex = rotations.indexOf(current);
+    const nextIndex = (currentIndex + 1) % rotations.length;
+    const visualRotation = Number(cell.dataset.cellVisualRotation ?? current);
+    selectCell(panel, cell);
+    setRotation(cell, rotations[nextIndex], visualRotation + 90);
+    emitChange(root);
+  });
+}
+
+export function selectCircuitPuzzle(root: HTMLElement, index: number): void {
+  initCircuitPuzzle(root);
+  const panels = getPanels(root);
+  const selectedIndex = Math.max(0, Math.min(index, panels.length - 1));
+  const instance = instances.get(root);
+  if (instance) instance.activeIndex = selectedIndex;
+
+  panels.forEach((panel, panelIndex) => {
+    panel.hidden = panelIndex !== selectedIndex;
+  });
+  resetCircuitPuzzle(root);
+}
+
+export function resetCircuitPuzzle(root: HTMLElement): void {
+  initCircuitPuzzle(root);
+  const panel = getActivePanel(root);
+  if (!panel) return;
+
+  panel.dataset.puzzleStatus = 'incomplete';
+  const grid = panel.querySelector<HTMLElement>('[data-puzzle-grid]');
+  if (grid) setPuzzleGridState(grid, null);
+
+  panel.setAttribute('data-puzzle-resetting', '');
+  for (const cell of panel.querySelectorAll<HTMLButtonElement>(
+    '[data-circuit-cell]',
+  )) {
+    const initialRotation = Number(
+      cell.dataset.initialRotation,
+    ) as CircuitRotation;
+    setRotation(cell, initialRotation, initialRotation);
+    setPuzzleGridCellState(cell, null);
+    cell.removeAttribute('data-puzzle-cell-selected');
+  }
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      panel.removeAttribute('data-puzzle-resetting');
+    });
+  });
+  emitChange(root);
+}
+
+export function setCircuitPuzzleEvaluation(
+  root: HTMLElement,
+  puzzleId: string,
+  evaluation: CircuitPuzzleEvaluation,
+): void {
+  const panel = getPanels(root).find(
+    (candidate) => candidate.dataset.puzzleId === puzzleId,
+  );
+  if (!panel) return;
+
+  const previous = panel.dataset.puzzleStatus;
+  panel.dataset.puzzleStatus = evaluation.status;
+  const energized = new Set(evaluation.energizedCellIds);
+  const invalid = new Set(evaluation.invalidCellIds);
+
+  for (const cell of panel.querySelectorAll<HTMLElement>(
+    '[data-circuit-cell]',
+  )) {
+    const cellId = cell.dataset.circuitCell ?? '';
+    setPuzzleGridCellState(
+      cell,
+      invalid.has(cellId) ? 'invalid' : energized.has(cellId) ? 'valid' : null,
+    );
+  }
+
+  const grid = panel.querySelector<HTMLElement>('[data-puzzle-grid]');
+  if (grid) {
+    setPuzzleGridState(grid, evaluation.status === 'valid' ? 'valid' : null);
+  }
+
+  if (evaluation.status === 'valid' && previous !== 'valid') {
+    root.dispatchEvent(
+      new CustomEvent('puzzle:complete', {
+        bubbles: true,
+        detail: { kind: 'circuit', puzzleId },
+      }),
+    );
+  }
+}
+
+function setRotation(
+  cell: HTMLButtonElement,
+  rotation: CircuitRotation,
+  visualRotation: number,
+): void {
+  cell.dataset.cellRotation = String(rotation);
+  cell.dataset.cellVisualRotation = String(visualRotation);
+  cell.style.setProperty('--cell-rotation', `${visualRotation}deg`);
+  const cellLabel = cell.dataset.cellLabel ?? '';
+  const orientationLabel = cell.dataset.orientationLabel ?? '';
+  cell.setAttribute(
+    'aria-label',
+    `${cellLabel} — ${orientationLabel} ${rotation}°`,
+  );
+}
+
+function selectCell(
+  panel: HTMLElement,
+  selectedCell: HTMLButtonElement | null,
+): void {
+  for (const cell of panel.querySelectorAll<HTMLElement>(
+    '[data-circuit-cell]',
+  )) {
+    cell.toggleAttribute('data-puzzle-cell-selected', cell === selectedCell);
+  }
+}
+
+function emitChange(root: HTMLElement): void {
+  const panel = getActivePanel(root);
+  if (!panel?.dataset.puzzleId) return;
+
+  const rotationsByCell = Object.fromEntries(
+    [...panel.querySelectorAll<HTMLButtonElement>('[data-circuit-cell]')].map(
+      (cell) => [
+        cell.dataset.circuitCell ?? '',
+        Number(cell.dataset.cellRotation) as CircuitRotation,
+      ],
+    ),
+  );
+  const detail: CircuitPuzzleChangeDetail = {
+    kind: 'circuit',
+    puzzleId: panel.dataset.puzzleId,
+    rotations: rotationsByCell,
+  };
+  root.dispatchEvent(
+    new CustomEvent<CircuitPuzzleChangeDetail>('puzzle:change', {
+      bubbles: true,
+      detail,
+    }),
+  );
+}
+
+function getPanels(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(':scope > [data-puzzle-id]')];
+}
+
+function getActivePanel(root: HTMLElement): HTMLElement | undefined {
+  const index = instances.get(root)?.activeIndex ?? 0;
+  return getPanels(root)[index];
+}

package/src/patterns/CircuitPuzzle/contracts.ts

@@ -0,0 +1,42 @@
+export type CircuitDirection = 'north' | 'east' | 'south' | 'west';
+export type CircuitRotation = 0 | 90 | 180 | 270;
+export type CircuitPuzzleStatus = 'incomplete' | 'contradictory' | 'valid';
+
+export type CircuitCellKind = 'core' | 'wire' | 'module' | 'defense';
+
+export type CircuitPuzzleCell = {
+  id: string;
+  row: number;
+  column: number;
+  kind: CircuitCellKind;
+  connections: readonly CircuitDirection[];
+  initialRotation: CircuitRotation;
+  fixed?: boolean;
+};
+
+export type CircuitPuzzleModel = {
+  id: string;
+  label: string;
+  rows: number;
+  columns: number;
+  cells: readonly CircuitPuzzleCell[];
+};
+
+export type CircuitPuzzleLabels = {
+  cellKinds: Readonly<Record<CircuitCellKind, string>>;
+  column: string;
+  orientation: string;
+  row: string;
+};
+
+export type CircuitPuzzleChangeDetail = {
+  kind: 'circuit';
+  puzzleId: string;
+  rotations: Readonly<Record<string, CircuitRotation>>;
+};
+
+export type CircuitPuzzleEvaluation = {
+  status: CircuitPuzzleStatus;
+  energizedCellIds: readonly string[];
+  invalidCellIds: readonly string[];
+};