@astronox/core 0.5.5 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
   "license": "MIT",
   "keywords": [

package/src/patterns/MagneticFieldPuzzle/MagneticFieldPuzzle.css

@@ -148,57 +148,6 @@
   overflow: visible;
 }
 
-.magnetic-field-puzzle__path-stream {
-  --field-path-rotation: 0deg;
-
-  position: relative;
-  z-index: 3;
-  grid-row: var(--field-path-row);
-  grid-column: var(--field-path-column);
-  min-inline-size: 0;
-  min-block-size: 0;
-  overflow: visible;
-  pointer-events: none;
-}
-
-.magnetic-field-puzzle__path-chevron {
-  --field-path-chevron-opacity: 0.38;
-
-  position: absolute;
-  display: grid;
-  inset-block-start: var(--field-path-static-block);
-  inset-inline-start: var(--field-path-static-inline);
-  inline-size: 1em;
-  block-size: 1em;
-  place-items: center;
-  color: var(--nox-source-tone-success);
-  font-size: var(--nox-font-size-xl);
-  opacity: var(--field-path-chevron-opacity);
-  pointer-events: none;
-  transform: translate(-50%, -50%) rotate(var(--field-path-rotation));
-}
-
-.magnetic-field-puzzle__path-chevron::before {
-  content: '';
-  inline-size: 0.46em;
-  block-size: 0.46em;
-  border-block-start: calc(var(--nox-border-width) * 2) solid currentColor;
-  border-inline-end: calc(var(--nox-border-width) * 2) solid currentColor;
-  transform: rotate(45deg);
-}
-
-.magnetic-field-puzzle__path-stream[data-field-path-direction='north'] {
-  --field-path-rotation: -90deg;
-}
-
-.magnetic-field-puzzle__path-stream[data-field-path-direction='south'] {
-  --field-path-rotation: 90deg;
-}
-
-.magnetic-field-puzzle__path-stream[data-field-path-direction='west'] {
-  --field-path-rotation: 180deg;
-}
-
 .magnetic-field-puzzle__piece {
   --piece-pupil-block-position: 35%;
   --piece-pupil-inline-position: 68%;
@@ -342,12 +291,6 @@
   .magnetic-field-puzzle__piece[data-piece-moved] {
     animation: magnetic-field-slide 260ms var(--nox-motion-easing-standard);
   }
-
-  .magnetic-field-puzzle__path-chevron {
-    animation: magnetic-field-path var(--field-path-duration) linear infinite
-      both;
-    animation-delay: calc(var(--field-path-chevron-index) * -700ms);
-  }
 }
 
 @keyframes magnetic-field-slide {
@@ -359,25 +302,3 @@
     );
   }
 }
-
-@keyframes magnetic-field-path {
-  0% {
-    inset-block-start: 50%;
-    inset-inline-start: 50%;
-    opacity: 0;
-    transform: translate(-50%, -50%) rotate(var(--field-path-rotation))
-      scale(0.9);
-  }
-
-  12%,
-  82% {
-    opacity: var(--field-path-chevron-opacity);
-  }
-
-  100% {
-    inset-block-start: var(--field-path-target-block);
-    inset-inline-start: var(--field-path-target-inline);
-    opacity: 0;
-    transform: translate(-50%, -50%) rotate(var(--field-path-rotation)) scale(1);
-  }
-}

package/src/patterns/MagneticFieldPuzzle/magneticFieldPuzzleController.ts

@@ -1,3 +1,12 @@
+import {
+  animatePieceMovement,
+  cancelDragFrame,
+  findDirectionalDropDestination,
+  hasLeftOriginCell,
+  renderPathStream,
+  scheduleDragFrame,
+  type PuzzleDrag,
+} from '../PuzzleGrid/movement';
 import {
   setPuzzleGridCellState,
   setPuzzleGridState,
@@ -5,7 +14,6 @@ import {
 import { initPuzzleSelectionDismissal } from '../PuzzleGrid/selectionDismissal';
 import type {
   MagneticFieldDirection,
-  MagneticFieldMovement,
   MagneticFieldPolarity,
   MagneticFieldPupilPosition,
   MagneticFieldPuzzleChangeDetail,
@@ -20,32 +28,14 @@ import {
   simulateMagneticFieldMove,
 } from './simulation';
 
-type MagneticFieldDrag = {
-  pointerId: number;
-  pieceId: string;
-  startX: number;
-  startY: number;
-  currentX: number;
-  currentY: number;
-  frameId: number | null;
-  element: HTMLButtonElement;
-  originCellBounds: DOMRect;
-  originCenterX: number;
-  originCenterY: number;
-  destinations: readonly HTMLButtonElement[] | null;
-  moved: boolean;
-};
-
 type MagneticFieldInstance = {
   activeIndex: number;
   selectedPieceId: string | null;
-  drag: MagneticFieldDrag | null;
+  drag: PuzzleDrag | null;
   ignoreNextClick: boolean;
 };
 
 const dragThreshold = 12;
-const pathChevronsPerCell = 3;
-const pathDurationPerCellMs = 2100;
 const instances = new WeakMap<HTMLElement, MagneticFieldInstance>();
 
 export function initMagneticFieldPuzzle(root: HTMLElement): void {
@@ -155,7 +145,7 @@ export function initMagneticFieldPuzzle(root: HTMLElement): void {
     drag.destinations ??= getDropDestinations(root);
     drag.currentX = event.clientX;
     drag.currentY = event.clientY;
-    scheduleDragFrame(root, drag);
+    scheduleDragFrame(drag, () => instances.get(root)?.drag === drag);
   });
 
   root.addEventListener('pointerup', (event) => {
@@ -295,7 +285,8 @@ function updateDestinations(root: HTMLElement): void {
 
   for (const movement of getMagneticFieldMoves(puzzle, state, pieceId)) {
     const directionLabel = readDirectionLabel(labels, movement.direction);
-    renderPathStream(panel, movement);
+    const board = panel.querySelector<HTMLElement>('[data-field-board]');
+    if (board) renderPathStream(board, movement);
 
     const destination = findCell(panel, movement.to);
     if (!destination) continue;
@@ -452,22 +443,6 @@ function renderState(
   }
 }
 
-function animatePieceMovement(
-  element: HTMLButtonElement,
-  initialBounds: DOMRect,
-): void {
-  const finalBounds = element.getBoundingClientRect();
-  element.style.setProperty(
-    '--piece-move-inline-distance',
-    `${initialBounds.left - finalBounds.left}px`,
-  );
-  element.style.setProperty(
-    '--piece-move-block-distance',
-    `${initialBounds.top - finalBounds.top}px`,
-  );
-  element.setAttribute('data-piece-moved', '');
-}
-
 function finishDrag(
   root: HTMLElement,
   event: PointerEvent,
@@ -508,41 +483,6 @@ function finishDrag(
   if (drag.moved) selectPiece(root, null);
 }
 
-function hasLeftOriginCell(
-  drag: MagneticFieldDrag,
-  deltaX: number,
-  deltaY: number,
-): boolean {
-  const centerX = drag.originCenterX + deltaX;
-  const centerY = drag.originCenterY + deltaY;
-  const { bottom, left, right, top } = drag.originCellBounds;
-
-  return centerX < left || centerX > right || centerY < top || centerY > bottom;
-}
-
-function scheduleDragFrame(root: HTMLElement, drag: MagneticFieldDrag): void {
-  if (drag.frameId !== null) return;
-  drag.frameId = window.requestAnimationFrame(() => {
-    drag.frameId = null;
-    if (instances.get(root)?.drag !== drag) return;
-
-    drag.element.style.setProperty(
-      '--piece-drag-x',
-      `${drag.currentX - drag.startX}px`,
-    );
-    drag.element.style.setProperty(
-      '--piece-drag-y',
-      `${drag.currentY - drag.startY}px`,
-    );
-  });
-}
-
-function cancelDragFrame(drag: MagneticFieldDrag): void {
-  if (drag.frameId === null) return;
-  window.cancelAnimationFrame(drag.frameId);
-  drag.frameId = null;
-}
-
 function getDropDestinations(root: HTMLElement): HTMLButtonElement[] {
   const panel = getActivePanel(root);
   if (!panel) return [];
@@ -552,30 +492,9 @@ function getDropDestinations(root: HTMLElement): HTMLButtonElement[] {
   ];
 }
 
-function findDirectionalDropDestination(
-  drag: MagneticFieldDrag,
-  deltaX: number,
-  deltaY: number,
-): HTMLButtonElement | null {
-  let direction: MagneticFieldDirection;
-  if (Math.abs(deltaX) >= Math.abs(deltaY)) {
-    direction = deltaX >= 0 ? 'east' : 'west';
-  } else {
-    direction = deltaY >= 0 ? 'south' : 'north';
-  }
-
-  return (
-    (drag.destinations ?? []).find(
-      (destination) =>
-        destination.dataset.destinationDirection === direction &&
-        destination.dataset.destinationPiece === drag.pieceId,
-    ) ?? null
-  );
-}
-
 function hideMovePreviews(panel: HTMLElement): void {
   for (const stream of panel.querySelectorAll<HTMLElement>(
-    '[data-field-path-stream]',
+    '[data-puzzle-path-stream]',
   )) {
     stream.remove();
   }
@@ -597,59 +516,6 @@ function hideMovePreviews(panel: HTMLElement): void {
   }
 }
 
-function renderPathStream(
-  panel: HTMLElement,
-  movement: MagneticFieldMovement,
-): void {
-  const board = panel.querySelector<HTMLElement>('[data-field-board]');
-  if (!board) return;
-
-  const rowDistance = movement.to.row - movement.from.row;
-  const columnDistance = movement.to.column - movement.from.column;
-  const cellDistance = Math.abs(rowDistance) + Math.abs(columnDistance);
-  const chevronCount = pathChevronsPerCell * cellDistance;
-  const stream = document.createElement('span');
-  stream.className = 'magnetic-field-puzzle__path-stream';
-  stream.dataset.fieldPathStream = '';
-  stream.dataset.fieldPathDirection = movement.direction;
-  stream.setAttribute('aria-hidden', 'true');
-  stream.style.setProperty('--field-path-row', String(movement.from.row + 1));
-  stream.style.setProperty(
-    '--field-path-column',
-    String(movement.from.column + 1),
-  );
-  stream.style.setProperty(
-    '--field-path-target-inline',
-    `${50 + columnDistance * 100}%`,
-  );
-  stream.style.setProperty(
-    '--field-path-target-block',
-    `${50 + rowDistance * 100}%`,
-  );
-  stream.style.setProperty(
-    '--field-path-duration',
-    `${pathDurationPerCellMs * cellDistance}ms`,
-  );
-
-  for (let index = 0; index < chevronCount; index += 1) {
-    const progress = (index + 0.5) / chevronCount;
-    const chevron = document.createElement('span');
-    chevron.className = 'magnetic-field-puzzle__path-chevron';
-    chevron.style.setProperty('--field-path-chevron-index', String(index));
-    chevron.style.setProperty(
-      '--field-path-static-inline',
-      `${50 + columnDistance * progress * 100}%`,
-    );
-    chevron.style.setProperty(
-      '--field-path-static-block',
-      `${50 + rowDistance * progress * 100}%`,
-    );
-    stream.append(chevron);
-  }
-
-  board.append(stream);
-}
-
 function findCell(
   panel: HTMLElement,
   position: { row: number; column: number },

package/src/patterns/PuzzleGrid/movement.css

@@ -0,0 +1,80 @@
+.puzzle-grid__path-stream {
+  --puzzle-path-rotation: 0deg;
+
+  position: relative;
+  z-index: 3;
+  grid-row: var(--puzzle-path-row);
+  grid-column: var(--puzzle-path-column);
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.puzzle-grid__path-chevron {
+  --puzzle-path-chevron-opacity: 0.38;
+
+  position: absolute;
+  display: grid;
+  inset-block-start: var(--puzzle-path-static-block);
+  inset-inline-start: var(--puzzle-path-static-inline);
+  inline-size: 1em;
+  block-size: 1em;
+  place-items: center;
+  color: var(--nox-source-tone-success);
+  font-size: var(--nox-font-size-xl);
+  opacity: var(--puzzle-path-chevron-opacity);
+  pointer-events: none;
+  transform: translate(-50%, -50%) rotate(var(--puzzle-path-rotation));
+}
+
+.puzzle-grid__path-chevron::before {
+  content: '';
+  inline-size: 0.46em;
+  block-size: 0.46em;
+  border-block-start: calc(var(--nox-border-width) * 2) solid currentColor;
+  border-inline-end: calc(var(--nox-border-width) * 2) solid currentColor;
+  transform: rotate(45deg);
+}
+
+.puzzle-grid__path-stream[data-puzzle-path-direction='north'] {
+  --puzzle-path-rotation: -90deg;
+}
+
+.puzzle-grid__path-stream[data-puzzle-path-direction='south'] {
+  --puzzle-path-rotation: 90deg;
+}
+
+.puzzle-grid__path-stream[data-puzzle-path-direction='west'] {
+  --puzzle-path-rotation: 180deg;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .puzzle-grid__path-chevron {
+    animation: puzzle-grid-path var(--puzzle-path-duration) linear infinite both;
+    animation-delay: calc(var(--puzzle-path-chevron-index) * -700ms);
+  }
+}
+
+@keyframes puzzle-grid-path {
+  0% {
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(var(--puzzle-path-rotation))
+      scale(0.9);
+  }
+
+  12%,
+  82% {
+    opacity: var(--puzzle-path-chevron-opacity);
+  }
+
+  100% {
+    inset-block-start: var(--puzzle-path-target-block);
+    inset-inline-start: var(--puzzle-path-target-inline);
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(var(--puzzle-path-rotation))
+      scale(1);
+  }
+}

package/src/patterns/PuzzleGrid/movement.ts

@@ -0,0 +1,149 @@
+export type PuzzleDrag = {
+  pointerId: number;
+  pieceId: string;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  frameId: number | null;
+  element: HTMLButtonElement;
+  originCellBounds: DOMRect;
+  originCenterX: number;
+  originCenterY: number;
+  destinations: readonly HTMLButtonElement[] | null;
+  moved: boolean;
+};
+
+type Direction = 'north' | 'east' | 'south' | 'west';
+
+const pathChevronsPerCell = 3;
+const pathDurationPerCellMs = 2100;
+
+export function animatePieceMovement(
+  element: HTMLButtonElement,
+  initialBounds: DOMRect,
+): void {
+  const finalBounds = element.getBoundingClientRect();
+  element.style.setProperty(
+    '--piece-move-inline-distance',
+    `${initialBounds.left - finalBounds.left}px`,
+  );
+  element.style.setProperty(
+    '--piece-move-block-distance',
+    `${initialBounds.top - finalBounds.top}px`,
+  );
+  element.setAttribute('data-piece-moved', '');
+}
+
+export function hasLeftOriginCell(
+  drag: PuzzleDrag,
+  deltaX: number,
+  deltaY: number,
+): boolean {
+  const centerX = drag.originCenterX + deltaX;
+  const centerY = drag.originCenterY + deltaY;
+  const { bottom, left, right, top } = drag.originCellBounds;
+
+  return centerX < left || centerX > right || centerY < top || centerY > bottom;
+}
+
+export function scheduleDragFrame(
+  drag: PuzzleDrag,
+  isCurrent: () => boolean,
+): void {
+  if (drag.frameId !== null) return;
+  drag.frameId = window.requestAnimationFrame(() => {
+    drag.frameId = null;
+    if (!isCurrent()) return;
+
+    drag.element.style.setProperty(
+      '--piece-drag-x',
+      `${drag.currentX - drag.startX}px`,
+    );
+    drag.element.style.setProperty(
+      '--piece-drag-y',
+      `${drag.currentY - drag.startY}px`,
+    );
+  });
+}
+
+export function cancelDragFrame(drag: PuzzleDrag): void {
+  if (drag.frameId === null) return;
+  window.cancelAnimationFrame(drag.frameId);
+  drag.frameId = null;
+}
+
+export function findDirectionalDropDestination(
+  drag: PuzzleDrag,
+  deltaX: number,
+  deltaY: number,
+): HTMLButtonElement | null {
+  let direction: Direction;
+  if (Math.abs(deltaX) >= Math.abs(deltaY)) {
+    direction = deltaX >= 0 ? 'east' : 'west';
+  } else {
+    direction = deltaY >= 0 ? 'south' : 'north';
+  }
+
+  return (
+    (drag.destinations ?? []).find(
+      (destination) =>
+        destination.dataset.destinationDirection === direction &&
+        destination.dataset.destinationPiece === drag.pieceId,
+    ) ?? null
+  );
+}
+
+export function renderPathStream(
+  board: HTMLElement,
+  movement: {
+    from: { row: number; column: number };
+    to: { row: number; column: number };
+    direction: Direction;
+  },
+): void {
+  const rowDistance = movement.to.row - movement.from.row;
+  const columnDistance = movement.to.column - movement.from.column;
+  const cellDistance = Math.abs(rowDistance) + Math.abs(columnDistance);
+  const chevronCount = pathChevronsPerCell * cellDistance;
+  const stream = document.createElement('span');
+  stream.className = 'puzzle-grid__path-stream';
+  stream.dataset.puzzlePathStream = '';
+  stream.dataset.puzzlePathDirection = movement.direction;
+  stream.setAttribute('aria-hidden', 'true');
+  stream.style.setProperty('--puzzle-path-row', String(movement.from.row + 1));
+  stream.style.setProperty(
+    '--puzzle-path-column',
+    String(movement.from.column + 1),
+  );
+  stream.style.setProperty(
+    '--puzzle-path-target-inline',
+    `${50 + columnDistance * 100}%`,
+  );
+  stream.style.setProperty(
+    '--puzzle-path-target-block',
+    `${50 + rowDistance * 100}%`,
+  );
+  stream.style.setProperty(
+    '--puzzle-path-duration',
+    `${pathDurationPerCellMs * cellDistance}ms`,
+  );
+
+  for (let index = 0; index < chevronCount; index += 1) {
+    const progress = (index + 0.5) / chevronCount;
+    const chevron = document.createElement('span');
+    chevron.className = 'puzzle-grid__path-chevron';
+    chevron.style.setProperty('--puzzle-path-chevron-index', String(index));
+    chevron.style.setProperty(
+      '--puzzle-path-static-inline',
+      `${50 + columnDistance * progress * 100}%`,
+    );
+    chevron.style.setProperty(
+      '--puzzle-path-static-block',
+      `${50 + rowDistance * progress * 100}%`,
+    );
+    stream.append(chevron);
+  }
+
+  board.append(stream);
+}

package/src/patterns/PuzzleGrid/selectionDismissal.ts

@@ -6,7 +6,8 @@ type PuzzleSelectionDismissalOptions = {
 export function initPuzzleSelectionDismissal(
   root: HTMLElement,
   { dismiss, isSelectionTarget }: PuzzleSelectionDismissalOptions,
-): void {
+): () => void {
+  const controller = new AbortController();
   document.addEventListener(
     'pointerdown',
     (event) => {
@@ -22,6 +23,7 @@ export function initPuzzleSelectionDismissal(
         focused.blur();
       }
     },
-    true,
+    { capture: true, signal: controller.signal },
   );
+  return () => controller.abort();
 }