@astronox/core 0.5.6 → 0.5.8

package/package.json

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

package/src/patterns/LightMazePuzzle/LightMazePuzzle.astro

@@ -0,0 +1,210 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Media from '../../primitives/media/Media/Media.astro';
+import PuzzleGrid from '../PuzzleGrid/PuzzleGrid.astro';
+import { presentLightMazeCell } from './presentation';
+import type {
+  LightMazePuzzleLabels,
+  LightMazePuzzleMedia,
+  LightMazePuzzleModel,
+} from './contracts';
+import {
+  createLightMazePuzzleState,
+  evaluateLightMazeMechanism,
+} from './simulation';
+
+type Props = HTMLAttributes<'section'> & {
+  label: string;
+  labels: LightMazePuzzleLabels;
+  media: LightMazePuzzleMedia;
+  puzzles: readonly LightMazePuzzleModel[];
+};
+
+const {
+  class: className,
+  label,
+  labels,
+  media,
+  puzzles,
+  ...attrs
+} = Astro.props;
+
+if (puzzles.some((puzzle) => puzzle.activators?.length) && !media.mechanism)
+  throw new Error('Light maze mechanisms require display media.');
+---
+
+<section
+  {...attrs}
+  class:list={['light-maze-puzzle', className]}
+  aria-label={label}
+  data-light-maze-puzzle
+>
+  {
+    puzzles.map((puzzle, index) => {
+      const initial = createLightMazePuzzleState(puzzle);
+      const mechanism = evaluateLightMazeMechanism(puzzle, initial);
+      return (
+        <div
+          class="light-maze-puzzle__instance"
+          data-puzzle-id={puzzle.id}
+          data-puzzle-status="incomplete"
+          data-light-maze-model={JSON.stringify(puzzle)}
+          data-light-maze-labels={JSON.stringify(labels)}
+          hidden={index !== 0}
+          style={`--piece-selection-filter: url(#light-maze-outline-${encodeURIComponent(puzzle.id)}); --piece-hover-filter: url(#light-maze-hover-${encodeURIComponent(puzzle.id)});`}
+        >
+          <svg
+            class="light-maze-puzzle__filters"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <defs>
+              <filter
+                id={`light-maze-hover-${encodeURIComponent(puzzle.id)}`}
+                color-interpolation-filters="sRGB"
+              >
+                <feFlood
+                  class="light-maze-puzzle__hover-color"
+                  flood-opacity="0.1"
+                />
+                <feComposite operator="in" in2="SourceAlpha" />
+                <feMerge>
+                  <feMergeNode in="SourceGraphic" />
+                  <feMergeNode />
+                </feMerge>
+              </filter>
+              <filter
+                id={`light-maze-outline-${encodeURIComponent(puzzle.id)}`}
+                x="-25%"
+                y="-25%"
+                width="150%"
+                height="150%"
+                color-interpolation-filters="sRGB"
+              >
+                <feMorphology in="SourceAlpha" operator="dilate" radius="2" />
+                <feGaussianBlur stdDeviation="0.5" result="outline" />
+                <feFlood class="light-maze-puzzle__ring-color" />
+                <feComposite operator="in" in2="outline" />
+                <feMerge>
+                  <feMergeNode />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+            </defs>
+          </svg>
+          <PuzzleGrid
+            class="light-maze-puzzle__board"
+            label={puzzle.label}
+            rows={puzzle.rows}
+            columns={puzzle.columns}
+          >
+            {Array.from(
+              { length: puzzle.rows * puzzle.columns },
+              (_, cellIndex) => {
+                const row = Math.floor(cellIndex / puzzle.columns);
+                const column = cellIndex % puzzle.columns;
+                const {
+                  disabled: blocked,
+                  target,
+                  lit,
+                  activator,
+                  consumed,
+                  removableWall,
+                  releasedWall,
+                  label: cellLabel,
+                } = presentLightMazeCell(puzzle, mechanism, labels, {
+                  row,
+                  column,
+                });
+                return (
+                  <button
+                    type="button"
+                    class="puzzle-grid__cell light-maze-puzzle__cell"
+                    disabled={blocked}
+                    tabindex={-1}
+                    aria-label={cellLabel}
+                    data-puzzle-cell
+                    data-puzzle-cell-disabled={blocked ? '' : undefined}
+                    data-light-maze-cell
+                    data-light-maze-lit={lit ? '' : undefined}
+                    data-light-maze-target={target ? '' : undefined}
+                    data-light-maze-wall={removableWall ? '' : undefined}
+                    data-light-maze-wall-released={
+                      releasedWall ? '' : undefined
+                    }
+                    data-light-maze-activator={activator ? '' : undefined}
+                    data-light-maze-activator-consumed={
+                      consumed ? '' : undefined
+                    }
+                    data-cell-row={row}
+                    data-cell-column={column}
+                    data-cell-label={cellLabel}
+                    style={`--cell-row: ${row + 1}; --cell-column: ${column + 1};`}
+                  >
+                    {activator && media.mechanism && (
+                      <span
+                        class="light-maze-puzzle__activator"
+                        aria-hidden="true"
+                      >
+                        <span data-activator-inactive>
+                          <Media
+                            media={media.mechanism.activatorInactive}
+                            size="fill"
+                          />
+                        </span>
+                        <span data-activator-active>
+                          <Media
+                            media={media.mechanism.activatorActive}
+                            size="fill"
+                          />
+                        </span>
+                      </span>
+                    )}
+                    {removableWall && (
+                      <span
+                        class="light-maze-puzzle__wall-fill"
+                        data-wall-fill
+                        aria-hidden="true"
+                      >
+                        <svg
+                          class="light-maze-puzzle__wall-cracks"
+                          viewBox="0 0 100 100"
+                          focusable="false"
+                        >
+                          <path d="M29 0L34 17L27 29L40 39L37 56M27 29L15 34L9 46" />
+                          <path d="M100 31L82 37L78 49L63 55L58 69M78 49L85 59L83 70" />
+                          <path d="M24 100L32 84L29 75L43 67M32 84L47 89" />
+                        </svg>
+                      </span>
+                    )}
+                  </button>
+                );
+              },
+            )}
+            {(['walker', 'light'] as const).map((piece) => (
+              <button
+                type="button"
+                class="light-maze-puzzle__piece"
+                aria-label={labels[piece]}
+                aria-pressed="false"
+                data-light-maze-piece={piece}
+                style={`--piece-row: ${initial[piece].row + 1}; --piece-column: ${initial[piece].column + 1};`}
+              >
+                <span class="light-maze-puzzle__piece-media" aria-hidden="true">
+                  <Media media={media[piece]} size="fill" />
+                </span>
+              </button>
+            ))}
+          </PuzzleGrid>
+        </div>
+      );
+    })
+  }
+</section>
+
+<script>
+  import { initLightMazePuzzle } from './lightMazePuzzleController';
+  for (const root of document.querySelectorAll('[data-light-maze-puzzle]')) {
+    if (root instanceof HTMLElement) initLightMazePuzzle(root);
+  }
+</script>

package/src/patterns/LightMazePuzzle/LightMazePuzzle.css

@@ -0,0 +1,189 @@
+.light-maze-puzzle,
+.light-maze-puzzle__instance {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.light-maze-puzzle__instance[hidden] {
+  display: none;
+}
+
+.light-maze-puzzle__filters {
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  pointer-events: none;
+}
+
+.light-maze-puzzle__ring-color {
+  flood-color: var(--nox-source-tone-info);
+}
+.light-maze-puzzle__hover-color {
+  flood-color: var(--nox-tone-color);
+}
+
+.light-maze-puzzle__board {
+  isolation: isolate;
+  touch-action: manipulation;
+}
+
+.light-maze-puzzle__cell {
+  appearance: none;
+}
+
+.light-maze-puzzle__activator {
+  position: absolute;
+  inset: 18%;
+  display: grid;
+  pointer-events: none;
+}
+
+.light-maze-puzzle__activator > span {
+  display: grid;
+  grid-area: 1 / 1;
+}
+
+.light-maze-puzzle__cell:not([data-light-maze-activator-consumed])
+  [data-activator-active],
+.light-maze-puzzle__cell[data-light-maze-activator-consumed]
+  [data-activator-inactive] {
+  display: none;
+}
+
+.light-maze-puzzle__wall-fill {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  border-radius: inherit;
+  overflow: hidden;
+  background: var(--nox-surface-strong);
+  pointer-events: none;
+}
+
+.light-maze-puzzle__wall-cracks {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  fill: none;
+  stroke: var(--nox-text-muted);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.light-maze-puzzle__cell[data-light-maze-wall-released]:not(
+    [data-wall-removing]
+  )
+  .light-maze-puzzle__wall-fill {
+  display: none;
+}
+
+.light-maze-puzzle__cell[data-light-maze-lit]:not([data-puzzle-cell-disabled]) {
+  --puzzle-cell-base-background: color-mix(
+    in srgb,
+    var(--nox-source-tone-warning) 12%,
+    var(--nox-surface)
+  );
+}
+
+.light-maze-puzzle__cell[data-light-maze-target] {
+  --puzzle-cell-base-border: var(--nox-source-tone-success);
+  border-style: dashed;
+}
+
+.light-maze-puzzle__cell[data-light-maze-destination] {
+  --puzzle-cell-ring-width: var(--nox-focus-ring-width);
+  --puzzle-cell-ring-color: var(--nox-source-tone-info);
+  z-index: 3;
+  overflow: visible;
+}
+
+.light-maze-puzzle__piece {
+  position: relative;
+  z-index: 4;
+  display: grid;
+  grid-row: var(--piece-row);
+  grid-column: var(--piece-column);
+  min-inline-size: 0;
+  min-block-size: 0;
+  margin: var(--nox-space-1);
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: var(--nox-radius-sm);
+  background: transparent;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.light-maze-puzzle__piece-media {
+  display: grid;
+  inline-size: 80%;
+  aspect-ratio: 1;
+  pointer-events: none;
+}
+
+.light-maze-puzzle__piece:focus-visible {
+  outline: none;
+}
+.light-maze-puzzle__piece:is([data-piece-selected], :focus-visible)
+  .light-maze-puzzle__piece-media {
+  filter: var(--piece-selection-filter);
+}
+
+@media (hover: hover) {
+  .light-maze-puzzle__piece:hover .light-maze-puzzle__piece-media {
+    filter: var(--piece-hover-filter);
+  }
+  .light-maze-puzzle__piece:is([data-piece-selected], :focus-visible):hover
+    .light-maze-puzzle__piece-media {
+    filter: var(--piece-hover-filter) var(--piece-selection-filter);
+  }
+}
+
+.light-maze-puzzle__piece[data-piece-dragging] {
+  z-index: 6;
+  cursor: grabbing;
+}
+.light-maze-puzzle__piece[data-piece-dragging] .light-maze-puzzle__piece-media {
+  transform: translate3d(var(--piece-drag-x, 0px), var(--piece-drag-y, 0px), 0)
+    scale(1.04);
+  will-change: transform;
+}
+.light-maze-puzzle__instance[data-puzzle-status='valid']
+  .light-maze-puzzle__piece {
+  cursor: default;
+}
+
+.light-maze-puzzle__instance[data-light-maze-transitioning]
+  .light-maze-puzzle__piece {
+  cursor: default;
+}
+
+.light-maze-puzzle__instance[data-light-maze-transitioning]
+  .light-maze-puzzle__piece
+  .light-maze-puzzle__piece-media {
+  filter: none;
+}
+
+.light-maze-puzzle__instance[data-light-maze-transitioning]
+  .light-maze-puzzle__cell[data-puzzle-cell] {
+  --puzzle-cell-ring-width: 0px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .light-maze-puzzle__piece[data-piece-moved] {
+    animation: light-maze-puzzle-move 260ms var(--nox-motion-easing-standard);
+  }
+}
+@keyframes light-maze-puzzle-move {
+  from {
+    transform: translate3d(
+      var(--piece-move-inline-distance),
+      var(--piece-move-block-distance),
+      0
+    );
+  }
+}

package/src/patterns/LightMazePuzzle/contracts.ts

@@ -0,0 +1,75 @@
+import type { DisplayMedia } from '../../display/contracts';
+
+export type LightMazePosition = { row: number; column: number };
+export type LightMazeDirection = 'north' | 'east' | 'south' | 'west';
+export type LightMazePiece = 'walker' | 'light';
+export type LightMazePuzzleStatus = 'incomplete' | 'valid';
+
+export type LightMazePuzzleModel = {
+  id: string;
+  label: string;
+  rows: number;
+  columns: number;
+  start: LightMazePosition;
+  light: LightMazePosition;
+  target: LightMazePosition;
+  blockedCells: readonly LightMazePosition[];
+  activators?: readonly {
+    position: LightMazePosition;
+    walls: readonly LightMazePosition[];
+  }[];
+};
+
+export type LightMazeMechanism = {
+  illuminatedCells: readonly LightMazePosition[];
+  blockedCells: readonly LightMazePosition[];
+  activatedCells: readonly LightMazePosition[];
+};
+
+export type LightMazePuzzleState = {
+  walker: LightMazePosition;
+  light: LightMazePosition;
+  activated: readonly number[];
+};
+
+export type LightMazeAction = {
+  piece: LightMazePiece;
+  direction: LightMazeDirection;
+};
+
+export type LightMazeMovement = LightMazeAction & {
+  from: LightMazePosition;
+  to: LightMazePosition;
+  stoppedByWalker: boolean;
+  state: LightMazePuzzleState;
+};
+
+export type LightMazePuzzleLabels = {
+  walker: string;
+  light: string;
+  target: string;
+  blockedCell: string;
+  litCell: string;
+  darkCell: string;
+  directions: Readonly<Record<LightMazeDirection, string>>;
+  moveTemplate: string;
+  mechanism?: {
+    activatorAvailable: string;
+    activatorConsumed: string;
+    removableWall: string;
+    releasedWall: string;
+  };
+};
+
+export type LightMazePuzzleMedia = Record<LightMazePiece, DisplayMedia> & {
+  mechanism?: {
+    activatorInactive: DisplayMedia;
+    activatorActive: DisplayMedia;
+  };
+};
+
+export type LightMazePuzzleChangeDetail = {
+  kind: 'light-maze';
+  puzzleId: string;
+  state: LightMazePuzzleState;
+};