@astronox/core 0.5.8 → 0.5.10

package/src/patterns/PuzzleGrid/keyboard.ts

@@ -0,0 +1,220 @@
+import {
+  getPuzzleMoveTarget,
+  puzzleArrowDirections,
+  type PuzzleDirection,
+} from './movement';
+
+type PuzzleKeyboardOptions = {
+  getPanel: () => HTMLElement | undefined;
+  getSelected: () => HTMLButtonElement | null;
+  select: (control: HTMLButtonElement | null) => void;
+  move: (control: HTMLButtonElement, direction: PuzzleDirection) => void;
+  isLocked?: () => boolean;
+};
+
+export type PuzzleKeyboard = {
+  reset: () => void;
+  destroy: () => void;
+};
+
+export function initPuzzleKeyboard(
+  root: HTMLElement,
+  {
+    getPanel,
+    getSelected,
+    select,
+    move,
+    isLocked = () => false,
+  }: PuzzleKeyboardOptions,
+): PuzzleKeyboard {
+  const controller = new AbortController();
+  const options = { signal: controller.signal };
+  let engaged = false;
+  let released = false;
+  let pointerFocus = false;
+  let focusing = false;
+  let entry: HTMLButtonElement | null = null;
+  const getBoard = (): HTMLElement | null =>
+    getPanel()?.querySelector<HTMLElement>('[data-puzzle-grid]') ?? null;
+  const isComplete = (): boolean =>
+    getPanel()?.dataset.puzzleStatus === 'valid';
+  const getControls = (): HTMLButtonElement[] => [
+    ...(getBoard()?.querySelectorAll<HTMLButtonElement>(
+      '[data-puzzle-control]:not(:disabled)',
+    ) ?? []),
+  ];
+
+  const sync = (): void => {
+    const controls = getControls();
+    const selected = getSelected();
+    entry =
+      (selected && controls.includes(selected) ? selected : null) ??
+      (entry && controls.includes(entry) ? entry : null) ??
+      controls[0] ??
+      null;
+    if (!selected || isComplete()) engaged = false;
+    const board = getBoard();
+    if (board) board.tabIndex = released && !isComplete() ? 0 : -1;
+    for (const control of controls) {
+      control.tabIndex =
+        !released && !isComplete() && control === entry ? 0 : -1;
+      control.setAttribute(
+        'aria-keyshortcuts',
+        'ArrowUp ArrowRight ArrowDown ArrowLeft Tab Shift+Tab Escape Enter Space',
+      );
+    }
+  };
+
+  const focus = (control: HTMLElement): void => {
+    focusing = true;
+    control.focus({ preventScroll: true });
+    focusing = false;
+  };
+
+  const activate = (control: HTMLButtonElement): void => {
+    released = false;
+    entry = control;
+    if (getSelected() !== control) select(control);
+    sync();
+    engaged = true;
+    focus(control);
+  };
+
+  root.addEventListener(
+    'pointerdown',
+    () => {
+      pointerFocus = true;
+    },
+    { ...options, capture: true },
+  );
+  root.addEventListener(
+    'pointercancel',
+    () => {
+      pointerFocus = false;
+    },
+    options,
+  );
+  root.addEventListener(
+    'focusin',
+    (event) => {
+      if (focusing || pointerFocus || isLocked() || isComplete()) return;
+      if (!(event.target instanceof HTMLButtonElement)) return;
+      if (getControls().includes(event.target)) activate(event.target);
+    },
+    options,
+  );
+  root.addEventListener(
+    'focusout',
+    (event) => {
+      if (
+        event.relatedTarget instanceof Node &&
+        getBoard()?.contains(event.relatedTarget)
+      )
+        return;
+      engaged = false;
+      released = false;
+      pointerFocus = false;
+      select(null);
+      sync();
+    },
+    options,
+  );
+  root.addEventListener(
+    'click',
+    (event) => {
+      if (!(event.target instanceof Element) || isLocked()) return;
+      const selected = getSelected();
+      if (selected && getPuzzleMoveTarget(getPanel(), event)) focus(selected);
+    },
+    { ...options, capture: true },
+  );
+  root.addEventListener(
+    'click',
+    (event) => {
+      pointerFocus = false;
+      if (
+        !(event.target instanceof Node) ||
+        !getBoard()?.contains(event.target)
+      )
+        return;
+      const selected = getSelected();
+      if (selected && !isComplete()) {
+        released = false;
+        engaged = true;
+        sync();
+        focus(selected);
+      } else if (getBoard()?.contains(document.activeElement)) {
+        released = true;
+        sync();
+        const board = getBoard();
+        if (board) focus(board);
+      } else sync();
+    },
+    options,
+  );
+  root.addEventListener(
+    'keydown',
+    (event) => {
+      pointerFocus = false;
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const board = getBoard();
+      if (!(event.target instanceof Node) || !board?.contains(event.target))
+        return;
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        engaged = false;
+        released = true;
+        select(null);
+        sync();
+        focus(board);
+        return;
+      }
+      if (isComplete()) return;
+      const direction = puzzleArrowDirections[event.key];
+      if (event.key === 'Tab') {
+        if (!engaged) return;
+        event.preventDefault();
+        if (isLocked()) return;
+        const controls = getControls();
+        if (!controls.length) return;
+        const index = controls.indexOf(getSelected() ?? entry ?? controls[0]);
+        const next =
+          (index + (event.shiftKey ? -1 : 1) + controls.length) %
+          controls.length;
+        activate(controls[next]);
+      } else if (isLocked()) {
+        if (direction || event.key === 'Enter' || event.key === ' ')
+          event.preventDefault();
+      } else if (direction) {
+        event.preventDefault();
+        const selected = getSelected() ?? entry ?? getControls()[0];
+        if (!selected) return;
+        activate(selected);
+        move(selected, direction);
+        sync();
+      } else if (
+        event.target === board &&
+        (event.key === 'Enter' || event.key === ' ')
+      ) {
+        event.preventDefault();
+        const selected = entry ?? getControls()[0];
+        if (selected) activate(selected);
+      }
+    },
+    options,
+  );
+  root.addEventListener('puzzle:change', sync, options);
+  root.addEventListener('puzzle:complete', sync, options);
+  sync();
+  return {
+    reset: () => {
+      engaged = false;
+      released = false;
+      entry = null;
+      pointerFocus = false;
+      sync();
+    },
+    destroy: () => controller.abort(),
+  };
+}

package/src/patterns/PuzzleGrid/movement.css

@@ -1,3 +1,7 @@
+.puzzle-grid__cell[data-puzzle-move-direction]:not(:disabled) {
+  cursor: pointer;
+}
+
 .puzzle-grid__path-stream {
   --puzzle-path-rotation: 0deg;
 

package/src/patterns/PuzzleGrid/movement.ts

@@ -14,7 +14,60 @@ export type PuzzleDrag = {
   moved: boolean;
 };
 
-type Direction = 'north' | 'east' | 'south' | 'west';
+export type PuzzleDirection = 'north' | 'east' | 'south' | 'west';
+
+export const puzzleArrowDirections: Readonly<
+  Partial<Record<string, PuzzleDirection>>
+> = {
+  ArrowUp: 'north',
+  ArrowRight: 'east',
+  ArrowDown: 'south',
+  ArrowLeft: 'west',
+};
+
+export function getPuzzleMoveTarget(
+  panel: HTMLElement | undefined,
+  event: MouseEvent,
+): { pieceId: string; direction: PuzzleDirection } | null {
+  const target = event.target;
+  if (!(target instanceof Element) || !panel?.contains(target)) return null;
+  let cell = target.closest<HTMLButtonElement>('[data-puzzle-move-direction]');
+  if (
+    !cell &&
+    target instanceof HTMLElement &&
+    target.matches('[data-puzzle-grid]')
+  ) {
+    const bounds = target.getBoundingClientRect();
+    const x = event.clientX - bounds.left - target.clientLeft;
+    const y = event.clientY - bounds.top - target.clientTop;
+    if (x < 0 || y < 0 || x >= target.clientWidth || y >= target.clientHeight)
+      return null;
+    const column = Math.floor(
+      (x * Number(target.dataset.puzzleColumns)) / target.clientWidth,
+    );
+    const row = Math.floor(
+      (y * Number(target.dataset.puzzleRows)) / target.clientHeight,
+    );
+    cell = target.querySelector<HTMLButtonElement>(
+      `[data-puzzle-move-direction][data-cell-row="${row}"][data-cell-column="${column}"]`,
+    );
+  }
+  if (!cell || cell.disabled) return null;
+  const pieceId = cell.dataset.puzzleMovePiece;
+  const direction = cell.dataset.puzzleMoveDirection as PuzzleDirection;
+  return pieceId ? { pieceId, direction } : null;
+}
+
+export function clearPuzzleMovementPreview(panel: HTMLElement): void {
+  for (const stream of panel.querySelectorAll('[data-puzzle-path-stream]'))
+    stream.remove();
+  for (const cell of panel.querySelectorAll<HTMLElement>(
+    '[data-puzzle-move-direction]',
+  )) {
+    delete cell.dataset.puzzleMoveDirection;
+    delete cell.dataset.puzzleMovePiece;
+  }
+}
 
 const pathChevronsPerCell = 3;
 const pathDurationPerCellMs = 2100;
@@ -78,7 +131,7 @@ export function findDirectionalDropDestination(
   deltaX: number,
   deltaY: number,
 ): HTMLButtonElement | null {
-  let direction: Direction;
+  let direction: PuzzleDirection;
   if (Math.abs(deltaX) >= Math.abs(deltaY)) {
     direction = deltaX >= 0 ? 'east' : 'west';
   } else {
@@ -99,12 +152,23 @@ export function renderPathStream(
   movement: {
     from: { row: number; column: number };
     to: { row: number; column: number };
-    direction: Direction;
+    direction: PuzzleDirection;
   },
+  pieceId: string,
 ): 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);
+  for (let step = 1; step <= cellDistance; step += 1) {
+    const row = movement.from.row + Math.sign(rowDistance) * step;
+    const column = movement.from.column + Math.sign(columnDistance) * step;
+    const cell = board.querySelector<HTMLButtonElement>(
+      `[data-puzzle-cell][data-cell-row="${row}"][data-cell-column="${column}"]`,
+    );
+    if (!cell || cell.disabled) continue;
+    cell.dataset.puzzleMoveDirection = movement.direction;
+    cell.dataset.puzzleMovePiece = pieceId;
+  }
   const chevronCount = pathChevronsPerCell * cellDistance;
   const stream = document.createElement('span');
   stream.className = 'puzzle-grid__path-stream';

package/src/patterns/PuzzleGrid/selectionDismissal.ts

@@ -1,6 +1,6 @@
 type PuzzleSelectionDismissalOptions = {
   dismiss: () => void;
-  isSelectionTarget: (target: Element) => boolean;
+  isSelectionTarget: (target: Element, event: PointerEvent) => boolean;
 };
 
 export function initPuzzleSelectionDismissal(
@@ -15,7 +15,7 @@ export function initPuzzleSelectionDismissal(
       const target = event.target;
       if (!(target instanceof Node)) return;
       const element = target instanceof Element ? target : target.parentElement;
-      if (element && isSelectionTarget(element)) return;
+      if (element && isSelectionTarget(element, event)) return;
 
       dismiss();
       const focused = document.activeElement;

package/src/patterns/SlidingPuzzle/SlidingPuzzle.astro

@@ -147,7 +147,14 @@ const {
                     </svg>
                   )}
                   {hole && (
-                    <span class="sliding-puzzle__hole" aria-hidden="true" />
+                    <svg
+                      class="sliding-puzzle__hole"
+                      viewBox="0 0 100 100"
+                      aria-hidden="true"
+                      focusable="false"
+                    >
+                      <circle cx="50" cy="50" r="46.5" />
+                    </svg>
                   )}
                   {target && (
                     <span class="sliding-puzzle__target" aria-hidden="true">
@@ -163,6 +170,7 @@ const {
             type="button"
             aria-label={labels.piece}
             aria-pressed="false"
+            data-puzzle-control
             data-sliding-piece
             style={`--piece-row: ${puzzle.start.row + 1}; --piece-column: ${puzzle.start.column + 1};`}
           >

package/src/patterns/SlidingPuzzle/SlidingPuzzle.css

@@ -69,11 +69,11 @@
 
 .sliding-puzzle__hole {
   display: none;
-  inline-size: 72%;
+  inline-size: 84%;
   aspect-ratio: 1;
-  border: calc(var(--nox-border-width) * 2) solid var(--sliding-transfer-color);
-  border-radius: var(--nox-radius-pill);
-  background: color-mix(
+  stroke: var(--sliding-transfer-color);
+  stroke-width: 2.5;
+  fill: color-mix(
     in srgb,
     var(--nox-source-tone-neutral) 20%,
     var(--nox-mix-dark)
@@ -99,7 +99,7 @@
 
 .sliding-puzzle__target {
   display: grid;
-  inline-size: 90%;
+  inline-size: 84%;
   aspect-ratio: 1;
   pointer-events: none;
 }
@@ -115,7 +115,7 @@
   margin: var(--nox-space-1);
   padding: 0;
   place-items: center;
-  border: 0;
+  border: var(--nox-border-width) solid transparent;
   border-radius: var(--nox-radius-sm);
   background: transparent;
   cursor: grab;
@@ -125,7 +125,7 @@
 
 .sliding-puzzle__piece-media {
   display: grid;
-  inline-size: 80%;
+  inline-size: 84%;
   aspect-ratio: 1;
   pointer-events: none;
 }
@@ -169,6 +169,12 @@
   cursor: default;
 }
 
+@media (width < 34rem) {
+  .sliding-puzzle__piece {
+    margin: 2px;
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .sliding-puzzle__piece[data-piece-moved] {
     animation: sliding-puzzle-move 260ms var(--nox-motion-easing-standard);

package/src/patterns/SlidingPuzzle/slidingPuzzleController.ts

@@ -3,10 +3,16 @@ import {
   setPuzzleGridState,
 } from '../PuzzleGrid/state';
 import { initPuzzleSelectionDismissal } from '../PuzzleGrid/selectionDismissal';
+import {
+  initPuzzleKeyboard,
+  type PuzzleKeyboard,
+} from '../PuzzleGrid/keyboard';
 import {
   animatePieceMovement,
   cancelDragFrame,
+  clearPuzzleMovementPreview,
   findDirectionalDropDestination,
+  getPuzzleMoveTarget,
   hasLeftOriginCell,
   renderPathStream,
   scheduleDragFrame,
@@ -35,19 +41,17 @@ type Instance = {
   selected: boolean;
   drag: PuzzleDrag | null;
   terrainFrame: number | null;
-  motion: AbortController | null;
+  motion: {
+    controller: AbortController;
+    blocking: boolean;
+  } | null;
   ignoreNextClick: boolean;
   abort: AbortController;
   dismiss: () => void;
+  keyboard?: PuzzleKeyboard;
 };
 
 const instances = new WeakMap<HTMLElement, Instance>();
-const directions: Readonly<Partial<Record<string, SlidingDirection>>> = {
-  ArrowUp: 'north',
-  ArrowRight: 'east',
-  ArrowDown: 'south',
-  ArrowLeft: 'west',
-};
 
 export function initSlidingPuzzle(root: HTMLElement): void {
   if (instances.has(root)) return;
@@ -68,13 +72,14 @@ export function initSlidingPuzzle(root: HTMLElement): void {
   const options = { signal: instance.abort.signal };
   instance.dismiss = initPuzzleSelectionDismissal(root, {
     dismiss: () => select(root, false),
-    isSelectionTarget: (target) => {
+    isSelectionTarget: (target, event) => {
       const panel = activePanel(root);
       return Boolean(
         panel &&
         panel.dataset.puzzleStatus !== 'valid' &&
         panel.contains(target) &&
-        target.closest('[data-sliding-piece], [data-sliding-destination]'),
+        (target.closest('[data-sliding-piece]') ||
+          getPuzzleMoveTarget(panel, event)),
       );
     },
   });
@@ -82,7 +87,8 @@ export function initSlidingPuzzle(root: HTMLElement): void {
   root.addEventListener(
     'click',
     (event) => {
-      if (!(event.target instanceof Element)) return;
+      if (!(event.target instanceof Element) || instance.motion?.blocking)
+        return;
       if (instance.ignoreNextClick) {
         instance.ignoreNextClick = false;
         return;
@@ -91,37 +97,13 @@ export function initSlidingPuzzle(root: HTMLElement): void {
         select(root, !instance.selected);
         return;
       }
-      const destination = event.target.closest<HTMLButtonElement>(
-        '[data-sliding-destination]',
-      );
-      const direction = destination?.dataset.destinationDirection as
-        SlidingDirection | undefined;
-      if (destination && !destination.disabled && direction)
-        void move(root, direction);
+      const movement = getPuzzleMoveTarget(activePanel(root), event);
+      if (movement) void move(root, movement.direction);
       else select(root, false);
     },
     options,
   );
 
-  root.addEventListener(
-    'keydown',
-    (event) => {
-      if (event.altKey || event.ctrlKey || event.metaKey) return;
-      if (event.key === 'Escape') {
-        cancelDrag(instance);
-        select(root, false);
-        return;
-      }
-      const direction = directions[event.key];
-      if (!direction || !(event.target instanceof Element)) return;
-      if (!instance.selected && !event.target.closest('[data-sliding-piece]'))
-        return;
-      event.preventDefault();
-      void move(root, direction);
-    },
-    options,
-  );
-
   root.addEventListener(
     'dragstart',
     (event) => event.preventDefault(),
@@ -231,6 +213,24 @@ export function initSlidingPuzzle(root: HTMLElement): void {
     () => cancelDrag(instance),
     options,
   );
+  instance.keyboard = initPuzzleKeyboard(root, {
+    getPanel: () => activePanel(root),
+    getSelected: () =>
+      instance.selected
+        ? (activePanel(root)?.querySelector<HTMLButtonElement>(
+            '[data-sliding-piece]',
+          ) ?? null)
+        : null,
+    select: (piece) => {
+      if (!piece) cancelDrag(instance);
+      select(root, piece !== null);
+    },
+    move: (_piece, direction) => {
+      void move(root, direction);
+    },
+    isLocked: () =>
+      instance.motion?.blocking === true || instance.drag !== null,
+  });
 }
 
 export function destroySlidingPuzzle(root: HTMLElement): void {
@@ -240,6 +240,7 @@ export function destroySlidingPuzzle(root: HTMLElement): void {
   cancelMotion(instance);
   cancelTerrainFrame(instance);
   instance.dismiss();
+  instance.keyboard?.destroy();
   instance.abort.abort();
   instances.delete(root);
 }
@@ -270,6 +271,7 @@ export function resetSlidingPuzzle(root: HTMLElement): void {
   setSlidingPuzzleStatus(root, panel.dataset.puzzleId ?? '', 'incomplete');
   render(root);
   previews(root);
+  instance.keyboard?.reset();
   emitChange(root);
 }
 
@@ -311,7 +313,7 @@ function select(root: HTMLElement, selected: boolean): void {
   if (
     !instance ||
     !panel ||
-    instance.motion ||
+    (instance.motion?.blocking && selected) ||
     panel.dataset.puzzleStatus === 'valid'
   )
     return;
@@ -332,63 +334,58 @@ async function move(
     !panel ||
     !piece ||
     instance.drag ||
-    instance.motion ||
-    isMoving(piece) ||
+    instance.motion?.blocking ||
     panel.dataset.puzzleStatus === 'valid'
   )
     return;
   const puzzle = model(panel);
   const movement = simulateSlidingMove(puzzle, instance.state, direction);
   if (!movement) return;
-  const motion = new AbortController();
+  const bounds = piece.getBoundingClientRect();
+  cancelMotion(instance);
+  const complete = isSlidingPuzzleComplete(puzzle, movement.state);
+  const motion = {
+    controller: new AbortController(),
+    blocking: movement.teleported || complete,
+  };
+  const { signal } = motion.controller;
   instance.motion = motion;
   piece.setAttribute('aria-busy', 'true');
   const clearBusy = (): void => piece.removeAttribute('aria-busy');
-  motion.signal.addEventListener('abort', clearBusy, { once: true });
+  signal.addEventListener('abort', clearBusy, { once: true });
   cancelTerrainFrame(instance);
   const previousState = instance.state;
   renderTerrain(panel, previousState);
-  const bounds = piece.getBoundingClientRect();
   instance.state = movement.state;
-  instance.selected =
-    retainSelection && !isSlidingPuzzleComplete(puzzle, movement.state);
+  instance.selected = retainSelection && !complete;
   render(root, false, movement.slideTo);
   if (!movement.teleported || !instance.selected) previews(root);
   try {
-    if (
-      !(await animateSlide(
-        panel,
-        piece,
-        instance,
-        movement,
-        previousState,
-        bounds,
-        motion.signal,
-      ))
-    )
-      return;
+    const animation = animateSlide(
+      panel,
+      piece,
+      instance,
+      movement,
+      previousState,
+      bounds,
+      signal,
+    );
+    if (!motion.blocking) emitChange(root);
+    if (!(await animation)) return;
     if (movement.teleported) {
       clearPreviews(panel);
-      if (
-        !(await animateHoleTransfer(
-          root,
-          piece,
-          puzzle,
-          movement,
-          motion.signal,
-        ))
-      )
+      if (!(await animateHoleTransfer(root, piece, puzzle, movement, signal)))
         return;
     }
-    if (motion.signal.aborted) return;
+    if (signal.aborted) return;
     instance.motion = null;
     render(root);
     if (movement.teleported) previews(root);
-    emitChange(root);
+    if (motion.blocking) emitChange(root);
   } finally {
-    motion.signal.removeEventListener('abort', clearBusy);
+    signal.removeEventListener('abort', clearBusy);
     if (instance.motion === motion) instance.motion = null;
-    if (!motion.signal.aborted) clearBusy();
+    if (!signal.aborted) clearBusy();
   }
 }
 
@@ -693,10 +690,11 @@ function previews(root: HTMLElement): void {
   ) as SlidingPuzzleLabels;
   const previewPuzzle = { ...model(panel), holes: [] };
   for (const movement of getSlidingMoves(previewPuzzle, instance.state)) {
-    if (board) renderPathStream(board, { ...movement, to: movement.slideTo });
+    if (board)
+      renderPathStream(board, { ...movement, to: movement.slideTo }, 'piece');
     const destination = cell(panel, movement.slideTo);
     if (!destination) continue;
-    destination.removeAttribute('tabindex');
+    destination.tabIndex = -1;
     destination.setAttribute('data-sliding-destination', '');
     destination.setAttribute('data-puzzle-cell-interactive', '');
     destination.dataset.destinationPiece = 'piece';
@@ -711,8 +709,7 @@ function previews(root: HTMLElement): void {
 }
 
 function clearPreviews(panel: HTMLElement): void {
-  for (const stream of panel.querySelectorAll('[data-puzzle-path-stream]'))
-    stream.remove();
+  clearPuzzleMovementPreview(panel);
   for (const destination of panel.querySelectorAll<HTMLButtonElement>(
     '[data-sliding-destination]',
   )) {
@@ -746,7 +743,7 @@ function cancelTerrainFrame(instance: Instance): void {
 }
 
 function cancelMotion(instance: Instance): void {
-  instance.motion?.abort();
+  instance.motion?.controller.abort();
   instance.motion = null;
 }