@astronox/core 0.5.6 → 0.5.8

package/src/patterns/LightMazePuzzle/presentation.ts

@@ -0,0 +1,55 @@
+import type {
+  LightMazeMechanism,
+  LightMazePosition,
+  LightMazePuzzleLabels,
+  LightMazePuzzleModel,
+} from './contracts';
+
+export function presentLightMazeCell(
+  puzzle: LightMazePuzzleModel,
+  mechanism: LightMazeMechanism,
+  labels: LightMazePuzzleLabels,
+  position: LightMazePosition,
+) {
+  const matches = (cell: LightMazePosition): boolean =>
+    cell.row === position.row && cell.column === position.column;
+  const activator =
+    puzzle.activators?.some((entry) => matches(entry.position)) ?? false;
+  const consumed = mechanism.activatedCells.some(matches);
+  const disabled = mechanism.blockedCells.some(matches);
+  const removableWall =
+    puzzle.activators?.some((entry) => entry.walls.some(matches)) ?? false;
+  const releasedWall = removableWall && !disabled;
+  const target = matches(puzzle.target);
+  const lit = mechanism.illuminatedCells.some(matches);
+  if ((activator || removableWall) && !labels.mechanism)
+    throw new Error('Light maze mechanisms require accessible labels.');
+  let activationLabel = '';
+  if (activator) {
+    activationLabel = consumed
+      ? labels.mechanism!.activatorConsumed
+      : labels.mechanism!.activatorAvailable;
+  }
+  const label = disabled
+    ? removableWall
+      ? labels.mechanism!.removableWall
+      : labels.blockedCell
+    : [
+        target ? labels.target : '',
+        activationLabel,
+        releasedWall ? labels.mechanism!.releasedWall : '',
+        lit ? labels.litCell : labels.darkCell,
+      ]
+        .filter(Boolean)
+        .join(' — ');
+  return {
+    disabled,
+    target,
+    lit,
+    activator,
+    consumed,
+    removableWall,
+    releasedWall,
+    label,
+  };
+}

package/src/patterns/LightMazePuzzle/simulation.ts

@@ -0,0 +1,164 @@
+import type {
+  LightMazeAction,
+  LightMazeDirection,
+  LightMazeMovement,
+  LightMazeMechanism,
+  LightMazePosition,
+  LightMazePuzzleModel,
+  LightMazePuzzleState,
+} from './contracts';
+
+const deltas = {
+  north: [-1, 0],
+  east: [0, 1],
+  south: [1, 0],
+  west: [0, -1],
+} as const;
+
+function same(a: LightMazePosition, b: LightMazePosition): boolean {
+  return a.row === b.row && a.column === b.column;
+}
+
+function free(
+  puzzle: LightMazePuzzleModel,
+  position: LightMazePosition,
+  blockedCells: readonly LightMazePosition[],
+): boolean {
+  return (
+    position.row >= 0 &&
+    position.row < puzzle.rows &&
+    position.column >= 0 &&
+    position.column < puzzle.columns &&
+    !blockedCells.some((cell) => same(cell, position))
+  );
+}
+
+export function createLightMazePuzzleState(
+  puzzle: LightMazePuzzleModel,
+): LightMazePuzzleState {
+  return {
+    walker: { ...puzzle.start },
+    light: { ...puzzle.light },
+    activated: [],
+  };
+}
+
+function blockedCells(
+  puzzle: LightMazePuzzleModel,
+  state: LightMazePuzzleState,
+): LightMazePosition[] {
+  return [
+    ...puzzle.blockedCells,
+    ...(puzzle.activators ?? []).flatMap((activator, index) =>
+      state.activated.includes(index) ? [] : activator.walls,
+    ),
+  ];
+}
+
+export function isLightMazePuzzleComplete(
+  puzzle: LightMazePuzzleModel,
+  state: LightMazePuzzleState,
+): boolean {
+  return same(state.walker, puzzle.target);
+}
+
+export function getLightMazeIllumination(
+  puzzle: LightMazePuzzleModel,
+  state: LightMazePuzzleState,
+): LightMazePosition[] {
+  const cells = [{ ...state.light }];
+  const blocked = blockedCells(puzzle, state);
+  for (const [dr, dc] of Object.values(deltas)) {
+    for (let distance = 1; distance <= 2; distance += 1) {
+      const cell = {
+        row: state.light.row + dr * distance,
+        column: state.light.column + dc * distance,
+      };
+      if (!free(puzzle, cell, blocked)) break;
+      cells.push(cell);
+    }
+  }
+  return cells;
+}
+
+export function evaluateLightMazeMechanism(
+  puzzle: LightMazePuzzleModel,
+  state: LightMazePuzzleState,
+): LightMazeMechanism {
+  const illuminatedCells = getLightMazeIllumination(puzzle, state);
+  return {
+    illuminatedCells,
+    blockedCells: blockedCells(puzzle, state),
+    activatedCells: (puzzle.activators ?? []).flatMap((activator, index) =>
+      state.activated.includes(index) ? [activator.position] : [],
+    ),
+  };
+}
+
+export function simulateLightMazeMove(
+  puzzle: LightMazePuzzleModel,
+  state: LightMazePuzzleState,
+  action: LightMazeAction,
+): LightMazeMovement | null {
+  if (isLightMazePuzzleComplete(puzzle, state)) return null;
+  const mechanism = evaluateLightMazeMechanism(puzzle, state);
+  const traversable = (position: LightMazePosition): boolean =>
+    free(puzzle, position, mechanism.blockedCells);
+  const [dr, dc] = deltas[action.direction];
+  const from = state[action.piece];
+  let to = { ...from };
+  let stoppedByWalker = false;
+  const crossed: LightMazePosition[] = [];
+  if (action.piece === 'walker') {
+    to = { row: from.row + dr, column: from.column + dc };
+    if (
+      !traversable(to) ||
+      same(to, state.light) ||
+      puzzle.activators?.some((activator) => same(activator.position, to)) ||
+      !mechanism.illuminatedCells.some((cell) => same(cell, to))
+    )
+      return null;
+  } else {
+    while (true) {
+      const next = { row: to.row + dr, column: to.column + dc };
+      if (!traversable(next)) break;
+      if (same(next, state.walker)) {
+        stoppedByWalker = true;
+        break;
+      }
+      to = next;
+      crossed.push(next);
+    }
+    if (same(from, to)) return null;
+  }
+  const activated = (puzzle.activators ?? []).flatMap((activator, index) =>
+    state.activated.includes(index) ||
+    crossed.some((position) => same(activator.position, position))
+      ? [index]
+      : [],
+  );
+  return {
+    ...action,
+    from: { ...from },
+    to,
+    stoppedByWalker,
+    state: {
+      walker: { ...state.walker },
+      light: { ...state.light },
+      [action.piece]: to,
+      activated,
+    },
+  };
+}
+
+export function getLightMazeMoves(
+  puzzle: LightMazePuzzleModel,
+  state: LightMazePuzzleState,
+): LightMazeMovement[] {
+  return (['walker', 'light'] as const).flatMap((piece) =>
+    (Object.keys(deltas) as LightMazeDirection[]).flatMap((direction) => {
+      const move = simulateLightMazeMove(puzzle, state, { piece, direction });
+      return move ? [move] : [];
+    }),
+  );
+}

package/src/patterns/SlidingPuzzle/SlidingPuzzle.astro

@@ -98,12 +98,16 @@ const {
               );
               const target =
                 puzzle.target.row === row && puzzle.target.column === column;
-              const hole = puzzle.holes.some(
+              const hole = puzzle.holes.find(
                 ({ position }) =>
                   position.row === row && position.column === column,
               );
+              const exit = puzzle.holes.find(
+                ({ exit }) => exit.row === row && exit.column === column,
+              );
+              const transferTone = (hole ?? exit)?.tone ?? 'neutral';
               const fragile =
-                hole ||
+                Boolean(hole) ||
                 puzzle.fragileCells.some(
                   (cell) => cell.row === row && cell.column === column,
                 );
@@ -130,7 +134,7 @@ const {
                   data-cell-row={row}
                   data-cell-column={column}
                   data-cell-label={cellLabel}
-                  style={`--cell-row: ${row + 1}; --cell-column: ${column + 1};`}
+                  style={`--cell-row: ${row + 1}; --cell-column: ${column + 1}; --sliding-transfer-color: var(--nox-source-tone-${transferTone});`}
                 >
                   {fragile && (
                     <svg

package/src/patterns/SlidingPuzzle/SlidingPuzzle.css

@@ -32,6 +32,12 @@
   appearance: none;
 }
 
+.sliding-puzzle__cell[data-sliding-exit-discovered] {
+  --puzzle-cell-base-border: var(--sliding-transfer-color);
+
+  border-style: dashed;
+}
+
 .sliding-puzzle__cell[data-sliding-target] {
   --puzzle-cell-base-border: var(--nox-source-tone-success);
 
@@ -41,7 +47,7 @@
 .sliding-puzzle__cell[data-sliding-fragile]:not([data-sliding-collapsed]):not(
     [data-sliding-hole-open]
   ) {
-  --puzzle-cell-base-border: var(--nox-source-tone-info);
+  --puzzle-cell-base-border: var(--nox-source-tone-neutral);
 
   border-style: dashed;
 }
@@ -52,20 +58,20 @@
   inline-size: 100%;
   block-size: 100%;
   fill: none;
-  stroke: var(--nox-source-tone-info);
+  stroke: var(--nox-source-tone-neutral);
   stroke-width: 3;
   pointer-events: none;
 }
 
 .sliding-puzzle__cell[data-sliding-collapsed] .sliding-puzzle__crack {
-  stroke: var(--nox-text-disabled);
+  display: none;
 }
 
 .sliding-puzzle__hole {
   display: none;
   inline-size: 72%;
   aspect-ratio: 1;
-  border: calc(var(--nox-border-width) * 2) solid var(--nox-source-tone-info);
+  border: calc(var(--nox-border-width) * 2) solid var(--sliding-transfer-color);
   border-radius: var(--nox-radius-pill);
   background: color-mix(
     in srgb,
@@ -128,8 +134,10 @@
   outline: none;
 }
 
-.sliding-puzzle__piece[data-piece-selected] .sliding-puzzle__piece-media,
-.sliding-puzzle__piece:focus-visible .sliding-puzzle__piece-media {
+.sliding-puzzle__piece:is([data-piece-selected], :focus-visible):not(
+    [data-piece-transferring]
+  )
+  .sliding-puzzle__piece-media {
   filter: var(--piece-selection-filter);
 }
 
@@ -138,9 +146,10 @@
     filter: var(--piece-hover-filter);
   }
 
-  .sliding-puzzle__piece[data-piece-selected]:hover
-    .sliding-puzzle__piece-media,
-  .sliding-puzzle__piece:focus-visible:hover .sliding-puzzle__piece-media {
+  .sliding-puzzle__piece:is([data-piece-selected], :focus-visible):hover:not(
+      [data-piece-transferring]
+    )
+    .sliding-puzzle__piece-media {
     filter: var(--piece-hover-filter) var(--piece-selection-filter);
   }
 }

package/src/patterns/SlidingPuzzle/contracts.ts

@@ -1,4 +1,5 @@
 import type { DisplayMedia } from '../../display/contracts';
+import type { Tone } from '../../theme/contracts';
 
 export type SlidingDirection = 'north' | 'east' | 'south' | 'west';
 export type SlidingPosition = { row: number; column: number };
@@ -15,7 +16,11 @@ export type SlidingPuzzleModel = {
   fragileCells: readonly SlidingPosition[];
   // Entry direction selects the adjacent landing cell around each exit.
   // A transfer ends the move; its landing never triggers another tile.
-  holes: readonly { position: SlidingPosition; exit: SlidingPosition }[];
+  holes: readonly {
+    position: SlidingPosition;
+    exit: SlidingPosition;
+    tone?: Tone;
+  }[];
 };
 
 export type SlidingPuzzleState = {

package/src/patterns/SlidingPuzzle/slidingPuzzleController.ts

@@ -353,9 +353,6 @@ async function move(
   instance.selected =
     retainSelection && !isSlidingPuzzleComplete(puzzle, movement.state);
   render(root, false, movement.slideTo);
-  // Ordinary slides expose the next moves immediately, like the magnetic
-  // puzzle. A transfer keeps the current preview until the piece reappears,
-  // so outgoing paths do not disclose its hidden landing position early.
   if (!movement.teleported || !instance.selected) previews(root);
   try {
     if (
@@ -371,14 +368,22 @@ async function move(
     )
       return;
     if (movement.teleported) {
-      if (!(await animateTransfer(piece, 'fall', motion.signal))) return;
-      render(root, false);
-      previews(root);
-      if (!(await animateTransfer(piece, 'arrive', motion.signal))) return;
+      clearPreviews(panel);
+      if (
+        !(await animateHoleTransfer(
+          root,
+          piece,
+          puzzle,
+          movement,
+          motion.signal,
+        ))
+      )
+        return;
     }
     if (motion.signal.aborted) return;
     instance.motion = null;
     render(root);
+    if (movement.teleported) previews(root);
     emitChange(root);
   } finally {
     motion.signal.removeEventListener('abort', clearBusy);
@@ -387,6 +392,51 @@ async function move(
   }
 }
 
+async function animateHoleTransfer(
+  root: HTMLElement,
+  piece: HTMLButtonElement,
+  puzzle: SlidingPuzzleModel,
+  movement: SlidingMovement,
+  signal: AbortSignal,
+): Promise<boolean> {
+  if (signal.aborted) return false;
+  const clear = (): void => piece.removeAttribute('data-piece-transferring');
+  piece.setAttribute('data-piece-transferring', '');
+  signal.addEventListener('abort', clear, { once: true });
+  try {
+    if (!(await animateTransferPhase(piece, 'fall', signal))) return false;
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+      return true;
+    const hole = puzzle.holes.find(
+      ({ position }) =>
+        position.row === movement.slideTo.row &&
+        position.column === movement.slideTo.column,
+    )!;
+    render(root, false, hole.exit);
+    const panel = activePanel(root);
+    if (panel) renderExitMarkers(panel, movement.state);
+    if (!(await animateTransferPhase(piece, 'arrive', signal))) return false;
+    if (!(await animateLanding(piece, signal))) return false;
+    const exitBounds = piece.getBoundingClientRect();
+    render(root, false);
+    const landingBounds = piece.getBoundingClientRect();
+    return await animatePieceTransition(
+      piece,
+      [
+        {
+          transform: `translate3d(${exitBounds.left - landingBounds.left}px, ${exitBounds.top - landingBounds.top}px, 0)`,
+        },
+        { transform: 'translate3d(0, 0, 0)' },
+      ],
+      120,
+      signal,
+    );
+  } finally {
+    signal.removeEventListener('abort', clear);
+    clear();
+  }
+}
+
 function animateSlide(
   panel: HTMLElement,
   piece: HTMLButtonElement,
@@ -398,8 +448,6 @@ function animateSlide(
 ): Promise<boolean> {
   const finalBounds = piece.getBoundingClientRect();
   animatePieceMovement(piece, bounds);
-  // Follow the actual slide so each tile changes as the piece enters it,
-  // including the tile where it stops. No delayed collapse on departure.
   const horizontal = movement.from.column !== movement.slideTo.column;
   const start = horizontal ? bounds.left : bounds.top;
   const travel = (horizontal ? finalBounds.left : finalBounds.top) - start;
@@ -473,24 +521,57 @@ function animateSlide(
   });
 }
 
-function animateTransfer(
+function animateTransferPhase(
   piece: HTMLButtonElement,
   phase: 'fall' | 'arrive',
   signal: AbortSignal,
 ): Promise<boolean> {
-  if (signal.aborted) return Promise.resolve(false);
-  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
-    return Promise.resolve(true);
   const hidden = { opacity: 0, transform: 'scale(0.15)' };
   const visible = { opacity: 1, transform: 'scale(1)' };
-  const animation = piece.animate(
+  return animatePieceTransition(
+    piece,
     phase === 'fall' ? [visible, hidden] : [hidden, visible],
-    {
-      duration: 160,
-      easing: 'ease-out',
-      fill: 'forwards',
-    },
+    160,
+    signal,
+    phase === 'fall' ? 'ease-out' : 'ease-in',
+  );
+}
+
+function animateLanding(
+  piece: HTMLButtonElement,
+  signal: AbortSignal,
+): Promise<boolean> {
+  return animatePieceTransition(
+    piece,
+    [
+      { transform: 'scale(1)', transformOrigin: '50% 90%' },
+      {
+        transform: 'scale(1.04, 0.94)',
+        transformOrigin: '50% 90%',
+        offset: 0.35,
+      },
+      { transform: 'scale(1)', transformOrigin: '50% 90%' },
+    ],
+    150,
+    signal,
   );
+}
+
+function animatePieceTransition(
+  piece: HTMLButtonElement,
+  keyframes: Keyframe[],
+  duration: number,
+  signal: AbortSignal,
+  easing: 'ease-out' | 'ease-in' = 'ease-out',
+): Promise<boolean> {
+  if (signal.aborted) return Promise.resolve(false);
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+    return Promise.resolve(true);
+  const animation = piece.animate(keyframes, {
+    duration,
+    easing,
+    fill: 'forwards',
+  });
   const cancel = (): void => animation.cancel();
   signal.addEventListener('abort', cancel, { once: true });
   return animation.finished
@@ -523,7 +604,10 @@ function render(
     '--piece-column',
     String((position ?? instance.state.position).column + 1),
   );
-  if (updateTerrain) renderTerrain(panel, instance.state);
+  if (updateTerrain) {
+    renderTerrain(panel, instance.state);
+    renderExitMarkers(panel, instance.state);
+  }
   const target = panel.querySelector<HTMLElement>('[data-sliding-target]');
   if (target && updateTerrain)
     setPuzzleGridCellState(
@@ -532,11 +616,38 @@ function render(
     );
 }
 
+function renderExitMarkers(
+  panel: HTMLElement,
+  state: SlidingPuzzleState,
+): void {
+  const holes = model(panel).holes;
+  const discoveredExits = holes
+    .filter((hole) =>
+      state.openHoles.some(
+        (position) =>
+          position.row === hole.position.row &&
+          position.column === hole.position.column,
+      ),
+    )
+    .map((hole) => hole.exit);
+  for (const { exit } of holes) {
+    const discovered = discoveredExits.some(
+      (position) =>
+        position.row === exit.row && position.column === exit.column,
+    );
+    cell(panel, exit)?.toggleAttribute(
+      'data-sliding-exit-discovered',
+      discovered,
+    );
+  }
+}
+
 function renderTerrain(panel: HTMLElement, state: SlidingPuzzleState): void {
+  const puzzle = model(panel);
   const labels = JSON.parse(
     panel.dataset.slidingLabels ?? '{}',
   ) as SlidingPuzzleLabels;
-  for (const fragile of model(panel).fragileCells) {
+  for (const fragile of puzzle.fragileCells) {
     const element = cell(panel, fragile);
     if (!element) continue;
     const collapsed = state.collapsedCells.some(
@@ -552,7 +663,7 @@ function renderTerrain(panel: HTMLElement, state: SlidingPuzzleState): void {
     if (!element.hasAttribute('data-sliding-destination'))
       element.setAttribute('aria-label', element.dataset.cellLabel);
   }
-  for (const hole of model(panel).holes) {
+  for (const hole of puzzle.holes) {
     const element = cell(panel, hole.position);
     if (!element) continue;
     const open = state.openHoles.some(
@@ -580,19 +691,7 @@ function previews(root: HTMLElement): void {
   const labels = JSON.parse(
     panel.dataset.slidingLabels ?? '{}',
   ) as SlidingPuzzleLabels;
-  // Before discovery, preview ordinary ice. Do not expose the hidden hole
-  // through path lengths, destination markers or accessible move labels.
-  const puzzle = model(panel);
-  const previewPuzzle = {
-    ...puzzle,
-    holes: puzzle.holes.filter((hole) =>
-      instance.state.openHoles.some(
-        (position) =>
-          position.row === hole.position.row &&
-          position.column === hole.position.column,
-      ),
-    ),
-  };
+  const previewPuzzle = { ...model(panel), holes: [] };
   for (const movement of getSlidingMoves(previewPuzzle, instance.state)) {
     if (board) renderPathStream(board, { ...movement, to: movement.slideTo });
     const destination = cell(panel, movement.slideTo);

package/src/patterns/index.ts

@@ -11,6 +11,10 @@ export { default as ModalClose } from './Modal/ModalClose.astro';
 export { default as ModalOpen } from './Modal/ModalOpen.astro';
 export { default as PuzzleGrid } from './PuzzleGrid/PuzzleGrid.astro';
 export { default as SlidingPuzzle } from './SlidingPuzzle/SlidingPuzzle.astro';
+export { default as LightMazePuzzle } from './LightMazePuzzle/LightMazePuzzle.astro';
+export * from './LightMazePuzzle/contracts';
+export * from './LightMazePuzzle/simulation';
+export * from './LightMazePuzzle/lightMazePuzzleController';
 export * from './SlidingPuzzle/contracts';
 export * from './SlidingPuzzle/simulation';
 export * from './SlidingPuzzle/slidingPuzzleController';

package/src/styles/style.css

@@ -65,6 +65,7 @@
 @import '../patterns/PuzzleGrid/PuzzleGrid.css' layer(patterns);
 @import '../patterns/PuzzleGrid/movement.css' layer(patterns);
 @import '../patterns/SlidingPuzzle/SlidingPuzzle.css' layer(patterns);
+@import '../patterns/LightMazePuzzle/LightMazePuzzle.css' layer(patterns);
 @import '../patterns/CircuitPuzzle/CircuitPuzzle.css' layer(patterns);
 @import '../patterns/Combobox/Combobox.css' layer(patterns);
 @import '../patterns/Dropdown/Dropdown.css' layer(patterns);