@astronox/core 0.1.0

package/src/patterns/Modal/Modal.css

@@ -0,0 +1,87 @@
+html:has(.modal[open]) {
+  overflow: hidden;
+}
+
+html:has(.modal[open]) [data-site-viewport] {
+  overflow-y: hidden;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: none;
+  max-block-size: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  overscroll-behavior: contain;
+  border: 0;
+  background: transparent;
+  color: var(--nox-text);
+}
+
+.modal[open] {
+  display: grid;
+  place-items: center;
+}
+
+.modal::backdrop {
+  background: color-mix(in srgb, var(--nox-mix-dark) 58%, transparent);
+}
+
+.modal__content {
+  position: relative;
+  display: grid;
+  inline-size: var(--nox-page-width);
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding: var(--nox-page-surface-padding);
+}
+
+.modal[data-sizing='content'] .modal__content {
+  block-size: auto;
+  max-block-size: 100%;
+  align-self: center;
+  overflow: auto;
+}
+
+.modal__default-close {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: var(--nox-space-3);
+  inset-inline-end: var(--nox-space-3);
+  display: grid;
+  inline-size: var(--nox-section-compact-block-size);
+  block-size: var(--nox-section-compact-block-size);
+  overflow: hidden;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface);
+  box-shadow: var(--nox-shadow-surface);
+}
+
+[data-modal-source-placeholder] {
+  inline-size: min(100%, var(--modal-source-placeholder-inline-size));
+  block-size: var(--modal-source-placeholder-block-size);
+  min-inline-size: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.modal-close.nox-button {
+  --nox-button-background: transparent;
+}
+
+@media (width < 48rem) {
+  .modal__content {
+    inline-size: 100%;
+    padding-inline: 0;
+  }
+
+  .modal__content [data-surface] {
+    border-radius: 0;
+  }
+}

package/src/patterns/Modal/ModalClose.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import Button from '../../components/actions/Button/Button.astro';
+import CloseIcon from '../../components/icons/CloseIcon.astro';
+
+type Props = Omit<HTMLAttributes<'button'>, 'disabled' | 'type'> & {
+  disabled?: boolean;
+  label: string;
+  tone?: Tone;
+  type?: 'button' | 'reset' | 'submit';
+};
+
+const {
+  class: className,
+  label,
+  tone = 'danger',
+  type = 'button',
+  ...attrs
+}: Props = Astro.props;
+const resolvedClass = ['modal-close', className].filter(Boolean).join(' ');
+---
+
+<Button
+  {...attrs}
+  class={resolvedClass}
+  type={type}
+  data-modal-close
+  aria-label={label}
+  title={label}
+  tone={tone}
+  borderless
+  full
+  iconOnly
+>
+  <CloseIcon />
+</Button>

package/src/patterns/Modal/ModalOpen.astro

@@ -0,0 +1,36 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import Button from '../../components/actions/Button/Button.astro';
+
+type Props = Omit<HTMLAttributes<'button'>, 'aria-controls' | 'type'> & {
+  label: string;
+  targetId: string;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  label,
+  targetId,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<Button
+  {...attrs}
+  class={className}
+  type="button"
+  borderless
+  full
+  iconOnly
+  tone={tone}
+  aria-controls={targetId}
+  aria-haspopup="dialog"
+  aria-label={label}
+  title={label}
+  data-modal-open={targetId}
+>
+  <slot />
+</Button>

package/src/patterns/Modal/modalController.ts

@@ -0,0 +1,118 @@
+const initializedAttribute = 'data-modal-initialized';
+const portaledAttribute = 'data-modal-portaled';
+const noop = (): void => undefined;
+
+type PortalState = {
+  placeholder: HTMLElement;
+  source: HTMLElement;
+};
+
+const getModalSelector = (id: string): string =>
+  `[data-modal-open="${CSS.escape(id)}"]`;
+
+const getSourceSelector = (id: string): string =>
+  `[data-modal-source="${CSS.escape(id)}"]`;
+
+export function initModal(root: HTMLDialogElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true' || !root.id) {
+    return noop;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+  let activeTrigger: HTMLElement | null = null;
+  let portalState: PortalState | null = null;
+
+  const moveSourceIntoModal = (): void => {
+    const portal = root.querySelector<HTMLElement>('[data-modal-portal]');
+    const source = document.querySelector<HTMLElement>(
+      getSourceSelector(root.id),
+    );
+    if (!portal || !source || root.contains(source)) return;
+
+    const sourceBounds = source.getBoundingClientRect();
+    const placeholder = document.createElement('div');
+    placeholder.dataset.modalSourcePlaceholder = '';
+    placeholder.setAttribute('aria-hidden', 'true');
+    placeholder.style.setProperty(
+      '--modal-source-placeholder-block-size',
+      `${sourceBounds.height}px`,
+    );
+    placeholder.style.setProperty(
+      '--modal-source-placeholder-inline-size',
+      `${sourceBounds.width}px`,
+    );
+    source.before(placeholder);
+    portal.append(source);
+    source.setAttribute(portaledAttribute, 'true');
+    portalState = { placeholder, source };
+  };
+
+  const restoreSource = (): void => {
+    if (!portalState) return;
+
+    const { placeholder, source } = portalState;
+    placeholder.parentNode?.insertBefore(source, placeholder);
+    placeholder.remove();
+    source.removeAttribute(portaledAttribute);
+    portalState = null;
+    source.dispatchEvent(new CustomEvent('modal:restore'));
+  };
+
+  const open = (trigger: HTMLElement): void => {
+    if (root.open) return;
+
+    activeTrigger = trigger;
+    moveSourceIntoModal();
+    root.showModal();
+    portalState?.source.dispatchEvent(new CustomEvent('modal:open'));
+
+    window.requestAnimationFrame(() => {
+      root.querySelector<HTMLElement>('[data-modal-close]')?.focus();
+    });
+  };
+
+  const close = (): void => {
+    if (root.open) root.close();
+  };
+
+  const handleDocumentClick = (event: MouseEvent): void => {
+    const trigger =
+      event.target instanceof Element
+        ? event.target.closest<HTMLElement>(getModalSelector(root.id))
+        : null;
+    if (trigger) {
+      event.preventDefault();
+      open(trigger);
+    }
+  };
+
+  const handleRootClick = (event: MouseEvent): void => {
+    if (
+      event.target === root ||
+      (event.target instanceof Element &&
+        (event.target.matches('[data-modal-content]') ||
+          event.target.closest('[data-modal-close]')))
+    ) {
+      close();
+    }
+  };
+
+  const handleClose = (): void => {
+    restoreSource();
+    activeTrigger?.focus();
+    activeTrigger = null;
+  };
+
+  document.addEventListener('click', handleDocumentClick);
+  root.addEventListener('click', handleRootClick);
+  root.addEventListener('close', handleClose);
+
+  return () => {
+    document.removeEventListener('click', handleDocumentClick);
+    root.removeEventListener('click', handleRootClick);
+    root.removeEventListener('close', handleClose);
+    if (root.open) root.close();
+    restoreSource();
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/patterns/PuzzleGrid/PuzzleGrid.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = Omit<HTMLAttributes<'div'>, 'aria-label' | 'role' | 'style'> & {
+  label: string;
+  rows: number;
+  columns: number;
+};
+
+const { class: className, label, rows, columns, ...attrs }: Props = Astro.props;
+---
+
+<div
+  {...attrs}
+  class:list={['puzzle-grid', className]}
+  role="group"
+  aria-label={label}
+  data-puzzle-grid
+  style={`--puzzle-columns: ${columns}; --puzzle-rows: ${rows};`}
+>
+  <slot />
+</div>

package/src/patterns/PuzzleGrid/PuzzleGrid.css

@@ -0,0 +1,149 @@
+.puzzle-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--puzzle-columns), minmax(0, 1fr));
+  grid-template-rows: repeat(var(--puzzle-rows), minmax(0, 1fr));
+  overflow: hidden;
+  inline-size: min(100%, 36rem);
+  aspect-ratio: var(--puzzle-columns) / var(--puzzle-rows);
+  justify-self: center;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background:
+    linear-gradient(var(--nox-border-muted) 1px, transparent 1px),
+    linear-gradient(90deg, var(--nox-border-muted) 1px, transparent 1px),
+    var(--nox-surface-muted);
+  background-size: calc(100% / var(--puzzle-columns))
+    calc(100% / var(--puzzle-rows));
+}
+
+.puzzle-grid[data-puzzle-grid-state='valid'] {
+  border-color: var(--nox-source-tone-success);
+}
+
+.puzzle-grid__cell {
+  --puzzle-cell-base-background: var(--nox-surface);
+  --puzzle-cell-base-border: var(--nox-border);
+  --puzzle-cell-base-color: var(--nox-text-muted);
+  --puzzle-cell-state-background: var(--puzzle-cell-base-background);
+  --puzzle-cell-state-border: var(--puzzle-cell-base-border);
+  --puzzle-cell-state-color: var(--puzzle-cell-base-color);
+  --puzzle-cell-interaction-overlay: transparent;
+  --puzzle-cell-ring-width: 0px;
+  --puzzle-cell-ring-color: transparent;
+
+  position: relative;
+  display: grid;
+  grid-row: var(--cell-row);
+  grid-column: var(--cell-column);
+  min-inline-size: 0;
+  min-block-size: 0;
+  margin: var(--nox-space-1);
+  padding: 0;
+  place-items: center;
+  overflow: hidden;
+  border: var(--nox-border-width) solid var(--puzzle-cell-state-border);
+  border-radius: var(--nox-radius-sm);
+  background:
+    linear-gradient(
+      var(--puzzle-cell-interaction-overlay),
+      var(--puzzle-cell-interaction-overlay)
+    ),
+    var(--puzzle-cell-state-background);
+  box-shadow: 0 0 0 var(--puzzle-cell-ring-width) var(--puzzle-cell-ring-color);
+  color: var(--puzzle-cell-state-color);
+  font: inherit;
+}
+
+.puzzle-grid__cell[data-puzzle-cell-interactive] {
+  cursor: pointer;
+}
+
+.puzzle-grid__cell[data-puzzle-cell-state='available'] {
+  --puzzle-cell-state-background: color-mix(
+    in srgb,
+    var(--nox-source-tone-info) 10%,
+    var(--nox-surface)
+  );
+  --puzzle-cell-state-border: var(--nox-source-tone-info);
+  --puzzle-cell-state-color: var(--nox-source-tone-info);
+}
+
+.puzzle-grid__cell[data-puzzle-cell-state='valid'] {
+  --puzzle-cell-state-background: color-mix(
+    in srgb,
+    var(--nox-source-tone-success) 14%,
+    var(--nox-surface)
+  );
+  --puzzle-cell-state-border: var(--nox-source-tone-success);
+  --puzzle-cell-state-color: var(--nox-source-tone-success);
+}
+
+.puzzle-grid__cell[data-puzzle-cell-state='invalid'] {
+  --puzzle-cell-state-background: color-mix(
+    in srgb,
+    var(--nox-source-tone-danger) 12%,
+    var(--nox-surface)
+  );
+  --puzzle-cell-state-border: var(--nox-source-tone-danger);
+  --puzzle-cell-state-color: var(--nox-source-tone-danger);
+}
+
+.puzzle-grid__cell[data-puzzle-cell][data-puzzle-cell-disabled] {
+  --puzzle-cell-base-background: var(--nox-surface-strong);
+  --puzzle-cell-base-border: var(--nox-border);
+  --puzzle-cell-base-color: var(--nox-text-disabled);
+
+  cursor: not-allowed;
+}
+
+.puzzle-grid__cell[data-puzzle-cell][data-puzzle-cell-selected] {
+  --puzzle-cell-ring-width: var(--nox-focus-ring-width);
+  --puzzle-cell-ring-color: var(--nox-source-tone-info);
+
+  z-index: 1;
+}
+
+.puzzle-grid__cell:focus-visible {
+  --puzzle-cell-ring-width: var(--nox-focus-ring-width);
+  --puzzle-cell-ring-color: var(--nox-source-tone-info);
+
+  z-index: 1;
+  outline: none;
+}
+
+@media (hover: hover) {
+  .puzzle-grid__cell[data-puzzle-cell][data-puzzle-cell-interactive]:hover {
+    --puzzle-cell-interaction-overlay: color-mix(
+      in srgb,
+      var(--nox-tone-color) 10%,
+      transparent
+    );
+  }
+}
+
+.puzzle-grid__cell[data-puzzle-cell][data-puzzle-cell-interactive]:active {
+  --puzzle-cell-interaction-overlay: color-mix(
+    in srgb,
+    var(--nox-tone-color) 16%,
+    transparent
+  );
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .puzzle-grid[data-puzzle-grid-state='valid'] {
+    animation: puzzle-grid-complete 700ms var(--nox-motion-easing-standard);
+  }
+}
+
+@keyframes puzzle-grid-complete {
+  50% {
+    box-shadow: 0 0 0 var(--nox-space-2)
+      color-mix(in srgb, var(--nox-source-tone-success) 24%, transparent);
+  }
+}
+
+@media (width < 34rem) {
+  .puzzle-grid__cell {
+    margin: 2px;
+  }
+}

package/src/patterns/PuzzleGrid/contracts.ts

@@ -0,0 +1,2 @@
+export type PuzzleGridCellState = 'available' | 'valid' | 'invalid';
+export type PuzzleGridState = 'valid';

package/src/patterns/PuzzleGrid/selectionDismissal.ts

@@ -0,0 +1,27 @@
+type PuzzleSelectionDismissalOptions = {
+  dismiss: () => void;
+  isSelectionTarget: (target: Element) => boolean;
+};
+
+export function initPuzzleSelectionDismissal(
+  root: HTMLElement,
+  { dismiss, isSelectionTarget }: PuzzleSelectionDismissalOptions,
+): void {
+  document.addEventListener(
+    'pointerdown',
+    (event) => {
+      if (!event.isPrimary || event.button !== 0) return;
+      const target = event.target;
+      if (!(target instanceof Node)) return;
+      const element = target instanceof Element ? target : target.parentElement;
+      if (element && isSelectionTarget(element)) return;
+
+      dismiss();
+      const focused = document.activeElement;
+      if (focused instanceof HTMLElement && root.contains(focused)) {
+        focused.blur();
+      }
+    },
+    true,
+  );
+}

package/src/patterns/PuzzleGrid/state.ts

@@ -0,0 +1,25 @@
+import type { PuzzleGridCellState, PuzzleGridState } from './contracts';
+
+export function setPuzzleGridCellState(
+  element: HTMLElement,
+  state: PuzzleGridCellState | null,
+): void {
+  if (state) {
+    element.dataset.puzzleCellState = state;
+    return;
+  }
+
+  delete element.dataset.puzzleCellState;
+}
+
+export function setPuzzleGridState(
+  element: HTMLElement,
+  state: PuzzleGridState | null,
+): void {
+  if (state) {
+    element.dataset.puzzleGridState = state;
+    return;
+  }
+
+  delete element.dataset.puzzleGridState;
+}

package/src/patterns/SpriteProjectilePreview/SpriteProjectilePreview.astro

@@ -0,0 +1,65 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import type { SpriteProjectilePreviewModel } from './contracts';
+
+type SpriteProjectilePreviewFraming = 'embedded' | 'standalone';
+
+type Props = HTMLAttributes<'div'> & {
+  framing?: SpriteProjectilePreviewFraming;
+  model: SpriteProjectilePreviewModel;
+  sizing?: 'auto' | 'fill';
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  framing = 'standalone',
+  model,
+  sizing = 'auto',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+const serializedModel = JSON.stringify(model).replaceAll('<', '\\u003c');
+---
+
+<div
+  {...attrs}
+  class:list={['sprite-projectile-preview', className]}
+  data-pattern="sprite-projectile-preview"
+  data-sprite-projectile-preview
+  data-framing={framing}
+  data-sizing={sizing}
+  data-tone={resolvedTone}
+>
+  <canvas
+    class="sprite-projectile-preview__canvas"
+    width="1"
+    height="1"
+    role="img"
+    aria-label={model.label}
+    data-sprite-projectile-preview-canvas
+  >
+    {model.label}
+  </canvas>
+  <script
+    is:inline
+    type="application/json"
+    data-sprite-projectile-preview-config
+    set:html={serializedModel}
+  />
+</div>
+
+<script>
+  import { initSpriteProjectilePreview } from './spriteProjectilePreviewController';
+
+  for (const root of document.querySelectorAll(
+    '[data-sprite-projectile-preview]',
+  )) {
+    if (root instanceof HTMLElement) {
+      initSpriteProjectilePreview(root);
+    }
+  }
+</script>

package/src/patterns/SpriteProjectilePreview/SpriteProjectilePreview.css

@@ -0,0 +1,35 @@
+.sprite-projectile-preview {
+  --sprite-projectile-preview-block-size: clamp(14rem, 34cqi, 22rem);
+
+  position: relative;
+  container-type: inline-size;
+  display: grid;
+  inline-size: 100%;
+  block-size: var(--sprite-projectile-preview-block-size);
+  min-inline-size: 0;
+  overflow: hidden;
+  border: var(--nox-border-width) solid var(--nox-data-surface-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-data-surface-background);
+}
+
+.sprite-projectile-preview[data-framing='embedded'] {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.sprite-projectile-preview[data-sizing='fill'] {
+  block-size: 100%;
+  min-block-size: var(--sprite-projectile-preview-block-size);
+}
+
+.sprite-projectile-preview__canvas {
+  position: absolute;
+  inset: 0;
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+}

package/src/patterns/SpriteProjectilePreview/contracts.ts

@@ -0,0 +1,33 @@
+export type SpriteContentBounds = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SpriteSheetAnimation = {
+  src: string;
+  width: number;
+  height: number;
+  baseScale: number;
+  frames: number;
+  rows: number;
+  row: number;
+  frameDurationMs: number;
+  contentBounds: SpriteContentBounds;
+};
+
+export type SpriteScaleReference = {
+  width: number;
+  height: number;
+};
+
+export type SpriteProjectilePreviewModel = {
+  label: string;
+  scaleReference: SpriteScaleReference;
+  actor: SpriteSheetAnimation;
+  projectile?: SpriteSheetAnimation & {
+    intervalMs: number;
+    travelDurationMs: number;
+  };
+};