@astronox/core 0.5.9 → 0.5.10

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;
 }
 

package/src/patterns/Table/TableCell.astro

@@ -31,7 +31,7 @@ const rootAttributes = cell
     tooltip ? (
       <Tooltip
         activation="hover"
-        alignTo="boundary"
+        alignTo="trigger"
         content={tooltip}
         triggerScope="ancestor"
       >

package/src/patterns/Table/TableCellValue.astro

@@ -81,7 +81,12 @@ const formatValue = (value: DisplayTextValue): string => String(value);
 
 {
   cell.kind === 'icons' ? (
-    <IconList items={cell.items} label={cell.label} size={cell.size} />
+    <IconList
+      items={cell.items}
+      label={cell.label}
+      size={cell.size}
+      tooltips={interactive}
+    />
   ) : null
 }