@astronox/core 0.1.0

package/src/patterns/Table/tableSortController.ts

@@ -0,0 +1,272 @@
+type SortDirection = 'ascending' | 'descending';
+type SortType = 'number' | 'text';
+type SortValue = string | number | null;
+type SortValues = Readonly<Record<string, SortValue>>;
+
+type SortColumn = {
+  id: string;
+  type: SortType;
+  tieBreaker?: string;
+};
+
+type SortState = SortColumn & {
+  direction: SortDirection;
+};
+
+const initializedAttribute = 'data-table-sort-initialized';
+const noop = (): void => undefined;
+const sortValuesCache = new WeakMap<HTMLElement, SortValues>();
+
+export function initTableSort(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const rowsRoot = root.querySelector<HTMLElement>('[data-table-rows]');
+  const buttons = Array.from(
+    root.querySelectorAll<HTMLButtonElement>('[data-table-sort-column]'),
+  );
+  if (!rowsRoot || buttons.length === 0) return noop;
+
+  root.setAttribute(initializedAttribute, 'true');
+  const collator = new Intl.Collator(
+    document.documentElement.lang || undefined,
+    { numeric: true, sensitivity: 'base' },
+  );
+  const originalOrder = new WeakMap<HTMLElement, number>();
+  let state: SortState | null = null;
+  let nextOriginalOrder = 0;
+  let orderDirty = false;
+  let scheduledFrame: number | null = null;
+
+  const registerRows = (rows: readonly HTMLElement[]): void => {
+    for (const row of rows) {
+      if (!originalOrder.has(row)) {
+        originalOrder.set(row, nextOriginalOrder);
+        nextOriginalOrder += 1;
+      }
+      getSortValues(row);
+    }
+  };
+
+  const getRows = (): HTMLElement[] =>
+    Array.from(
+      rowsRoot.querySelectorAll<HTMLElement>(':scope > [data-table-row]'),
+    );
+
+  const applySort = (): void => {
+    const rows = getRows();
+    registerRows(rows);
+    const activeState = state;
+    const sortedRows = [...rows].sort((left, right) => {
+      const leftValues = getSortValues(left);
+      const rightValues = getSortValues(right);
+
+      if (activeState) {
+        const comparison = compareValues(
+          leftValues[activeState.id],
+          rightValues[activeState.id],
+          activeState.type,
+          activeState.direction,
+          collator,
+        );
+        if (comparison !== 0) return comparison;
+      }
+
+      if (activeState?.tieBreaker) {
+        const id = activeState.tieBreaker;
+        const tieComparison = compareValues(
+          leftValues[id],
+          rightValues[id],
+          inferSortType(leftValues[id], rightValues[id]),
+          'ascending',
+          collator,
+        );
+        if (tieComparison !== 0) return tieComparison;
+      }
+
+      return (originalOrder.get(left) ?? 0) - (originalOrder.get(right) ?? 0);
+    });
+
+    orderDirty = activeState !== null;
+    if (rows.every((row, index) => row === sortedRows[index])) return;
+
+    const fragment = document.createDocumentFragment();
+    for (const row of sortedRows) fragment.append(row);
+    rowsRoot.prepend(fragment);
+  };
+
+  const scheduleSort = (): void => {
+    if (scheduledFrame !== null) return;
+    if (!state && !orderDirty) return;
+
+    scheduledFrame = window.requestAnimationFrame(() => {
+      scheduledFrame = null;
+      applySort();
+    });
+  };
+
+  const updateButtons = (): void => {
+    for (const button of buttons) {
+      const id = button.dataset.tableSortColumn;
+      const activeState = state?.id === id ? state : null;
+      const direction = activeState?.direction ?? 'none';
+      const label = button.dataset.tableSortLabel ?? id ?? '';
+      const directionLabel =
+        direction === 'ascending'
+          ? button.dataset.tableSortAscendingLabel
+          : direction === 'descending'
+            ? button.dataset.tableSortDescendingLabel
+            : button.dataset.tableSortNoneLabel;
+
+      button.dataset.tableSortDirection = direction;
+      button.setAttribute('aria-pressed', String(Boolean(activeState)));
+      button.setAttribute('aria-label', `${label}: ${directionLabel ?? ''}`);
+    }
+  };
+
+  const handleClick = (event: MouseEvent): void => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const button = target.closest<HTMLButtonElement>(
+      '[data-table-sort-column]',
+    );
+    if (!button || !root.contains(button)) return;
+
+    const id = button.dataset.tableSortColumn;
+    const type = button.dataset.tableSortType;
+    if (!id || (type !== 'number' && type !== 'text')) return;
+
+    if (state?.id !== id) {
+      state = {
+        id,
+        type,
+        direction: 'descending',
+        tieBreaker: button.dataset.tableSortTieBreaker,
+      };
+      root.dispatchEvent(new CustomEvent('table:load-all', { bubbles: true }));
+    } else if (state.direction === 'descending') {
+      state = { ...state, direction: 'ascending' };
+    } else {
+      state = null;
+    }
+
+    updateButtons();
+    scheduleSort();
+  };
+
+  const handleRowsAppended = (event: Event): void => {
+    const detail = (event as CustomEvent<{ rows?: readonly HTMLElement[] }>)
+      .detail;
+    registerRows(detail?.rows ?? []);
+    scheduleSort();
+  };
+
+  const handleSortValuesChanged = (): void => {
+    scheduleSort();
+  };
+
+  const handleSortReset = (): void => {
+    if (!state && !orderDirty) return;
+
+    state = null;
+    updateButtons();
+    scheduleSort();
+  };
+
+  registerRows(getRows());
+  updateButtons();
+  root.addEventListener('click', handleClick);
+  root.addEventListener('table:rows-appended', handleRowsAppended);
+  root.addEventListener('table:sort-values-changed', handleSortValuesChanged);
+  root.addEventListener('table:sort-reset', handleSortReset);
+
+  return () => {
+    if (scheduledFrame !== null) {
+      window.cancelAnimationFrame(scheduledFrame);
+      scheduledFrame = null;
+    }
+    state = null;
+    updateButtons();
+    if (orderDirty) applySort();
+    root.removeEventListener('click', handleClick);
+    root.removeEventListener('table:rows-appended', handleRowsAppended);
+    root.removeEventListener(
+      'table:sort-values-changed',
+      handleSortValuesChanged,
+    );
+    root.removeEventListener('table:sort-reset', handleSortReset);
+    root.removeAttribute(initializedAttribute);
+  };
+}
+
+export function setTableSortValues(
+  row: HTMLElement,
+  values: Readonly<Record<string, SortValue>>,
+): void {
+  const nextValues = {
+    ...getSortValues(row),
+    ...values,
+  };
+  sortValuesCache.set(row, nextValues);
+  row.dataset.tableSortValues = JSON.stringify(nextValues);
+}
+
+export function refreshTableSort(root: HTMLElement): void {
+  root.dispatchEvent(
+    new CustomEvent('table:sort-values-changed', { bubbles: true }),
+  );
+}
+
+export function resetTableSort(root: HTMLElement): void {
+  root.dispatchEvent(new Event('table:sort-reset'));
+}
+
+function compareValues(
+  left: SortValue | undefined,
+  right: SortValue | undefined,
+  type: SortType,
+  direction: SortDirection,
+  collator: Intl.Collator,
+): number {
+  const leftMissing = left === null || left === undefined;
+  const rightMissing = right === null || right === undefined;
+  if (leftMissing || rightMissing) {
+    if (leftMissing && rightMissing) return 0;
+    return leftMissing ? 1 : -1;
+  }
+
+  const comparison =
+    type === 'number'
+      ? Number(left) - Number(right)
+      : collator.compare(String(left), String(right));
+
+  return direction === 'ascending' ? comparison : -comparison;
+}
+
+function inferSortType(
+  left: SortValue | undefined,
+  right: SortValue | undefined,
+): SortType {
+  return typeof left === 'number' || typeof right === 'number'
+    ? 'number'
+    : 'text';
+}
+
+function getSortValues(row: HTMLElement): SortValues {
+  const cached = sortValuesCache.get(row);
+  if (cached) return cached;
+
+  const values = parseSortValues(row.dataset.tableSortValues);
+  sortValuesCache.set(row, values);
+  return values;
+}
+
+function parseSortValues(value: string | undefined): SortValues {
+  if (!value) return {};
+
+  try {
+    const parsed: unknown = JSON.parse(value);
+    return parsed && typeof parsed === 'object' ? (parsed as SortValues) : {};
+  } catch {
+    return {};
+  }
+}

package/src/patterns/index.ts

@@ -0,0 +1,46 @@
+export { default as CircuitPuzzle } from './CircuitPuzzle/CircuitPuzzle.astro';
+export { default as Combobox } from './Combobox/Combobox.astro';
+export { default as Dropdown } from './Dropdown/Dropdown.astro';
+export { default as FullscreenControl } from './Fullscreen/FullscreenControl.astro';
+export { default as GlitchOverlay } from './GlitchOverlay/GlitchOverlay.astro';
+export { default as GuidedFlow } from './GuidedFlow/GuidedFlow.astro';
+export { default as MagneticFieldPuzzle } from './MagneticFieldPuzzle/MagneticFieldPuzzle.astro';
+export { default as MapViewport } from './MapViewport/MapViewport.astro';
+export { default as Modal } from './Modal/Modal.astro';
+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 SpriteProjectilePreview } from './SpriteProjectilePreview/SpriteProjectilePreview.astro';
+export { default as StageFlow } from './StageFlow/StageFlow.astro';
+export { default as Table } from './Table/Table.astro';
+export { default as TableBody } from './Table/TableBody.astro';
+export { default as TableFooter } from './Table/TableFooter.astro';
+export { default as TableHeader } from './Table/TableHeader.astro';
+export { default as TablePagination } from './Table/TablePagination.astro';
+export { default as TableSkeleton } from './Table/TableSkeleton.astro';
+export * from './CircuitPuzzle/circuitPuzzleController';
+export * from './CircuitPuzzle/contracts';
+export * from './Combobox/comboboxController';
+export * from './Combobox/contracts';
+export * from './Dropdown/dropdownController';
+export * from './Fullscreen/fullscreenController';
+export * from './GlitchOverlay/glitchOverlayController';
+export * from './GuidedFlow/contracts';
+export * from './GuidedFlow/guidedFlowController';
+export * from './MagneticFieldPuzzle/contracts';
+export * from './MagneticFieldPuzzle/magneticFieldPuzzleController';
+export * from './MagneticFieldPuzzle/simulation';
+export * from './MapViewport/contracts';
+export * from './MapViewport/geometry';
+export * from './MapViewport/mapViewportController';
+export * from './Modal/modalController';
+export * from './PuzzleGrid/contracts';
+export * from './PuzzleGrid/selectionDismissal';
+export * from './PuzzleGrid/state';
+export * from './SpriteProjectilePreview/contracts';
+export * from './SpriteProjectilePreview/spriteProjectilePreviewController';
+export * from './Table/tableCellController';
+export * from './Table/tableFilterController';
+export * from './Table/tableLayout';
+export * from './Table/tableProgressiveController';
+export * from './Table/tableSortController';

package/src/primitives/index.ts

@@ -0,0 +1,4 @@
+export { default as Separator } from './layout/Separator/Separator.astro';
+export { default as AmbientAudio } from './media/AmbientAudio/AmbientAudio.astro';
+export { default as Media } from './media/Media/Media.astro';
+export { default as TextBlock } from './text/TextBlock/TextBlock.astro';

package/src/primitives/layout/Separator/Separator.astro

@@ -0,0 +1,29 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+type Props = HTMLAttributes<'hr'> & {
+  bleed?: boolean;
+  emphasis?: 'default' | 'muted';
+  tone?: Tone;
+};
+
+const {
+  bleed = false,
+  class: className,
+  'data-tone': dataTone,
+  emphasis = 'muted',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<hr
+  {...attrs}
+  class:list={['separator', className]}
+  data-separator-bleed={bleed ? true : undefined}
+  data-separator-emphasis={emphasis}
+  data-tone={resolvedTone}
+  data-widget="separator"
+/>

package/src/primitives/layout/Separator/Separator.css

@@ -0,0 +1,20 @@
+.separator {
+  inline-size: 100%;
+  block-size: 0;
+  margin: 0;
+  border: 0;
+  border-block-start: var(--nox-border-width) solid var(--nox-border-muted);
+}
+
+.separator[data-separator-emphasis='default'] {
+  border-block-start-color: var(--nox-border);
+}
+
+.separator[data-separator-bleed] {
+  position: relative;
+  inset-inline-start: calc(-1 * var(--nox-content-inline-inset, 0px));
+  inline-size: calc(
+    100% + var(--nox-content-inline-inset, 0px) +
+      var(--nox-content-inline-inset, 0px)
+  );
+}

package/src/primitives/media/AmbientAudio/AmbientAudio.astro

@@ -0,0 +1,28 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = Omit<HTMLAttributes<'audio'>, 'src'> & {
+  src: string;
+  type?: string;
+};
+
+const {
+  class: className,
+  loop = false,
+  preload = 'auto',
+  src,
+  type,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<audio
+  {...attrs}
+  class:list={[className]}
+  aria-hidden="true"
+  data-widget="ambient-audio"
+  loop={loop}
+  preload={preload}
+>
+  <source src={src} type={type} />
+</audio>

package/src/primitives/media/Media/Media.astro

@@ -0,0 +1,122 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type {
+  DisplayMedia,
+  DisplayMediaFit,
+  DisplayMediaFraming,
+  DisplayMediaRendering,
+  DisplayMediaShape,
+  DisplayMediaUpscale,
+  DisplayMediaVisualSize,
+} from '../../../display/contracts';
+import type { Tone } from '../../../theme/contracts';
+
+type MediaSize = 'intrinsic' | 'fill';
+
+type Props = Omit<HTMLAttributes<'figure'>, 'style'> & {
+  class?: string;
+  'data-tone'?: Tone;
+  fit?: DisplayMediaFit;
+  framing?: DisplayMediaFraming;
+  media: DisplayMedia;
+  rendering?: DisplayMediaRendering;
+  shape?: DisplayMediaShape;
+  size?: MediaSize;
+  upscale?: DisplayMediaUpscale;
+  visualSize?: DisplayMediaVisualSize;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  fit: fitOverride,
+  framing: framingOverride,
+  media,
+  rendering: renderingOverride,
+  shape: shapeOverride,
+  size = 'intrinsic',
+  upscale: upscaleOverride,
+  visualSize: visualSizeOverride,
+  ...attrs
+}: Props = Astro.props;
+const fit = fitOverride ?? media.fit ?? 'contain';
+const requestedFraming = framingOverride ?? media.framing ?? 'asset';
+const rendering = renderingOverride ?? media.rendering ?? 'auto';
+const shape = shapeOverride ?? media.shape ?? 'default';
+const upscale = upscaleOverride ?? media.upscale ?? 'allow';
+const visualSize = visualSizeOverride ?? media.visualSize ?? 'default';
+const contentBounds =
+  requestedFraming === 'content' &&
+  media.contentBounds &&
+  media.contentBounds.width > 0 &&
+  media.contentBounds.height > 0 &&
+  media.contentBounds.x >= 0 &&
+  media.contentBounds.y >= 0 &&
+  media.contentBounds.x + media.contentBounds.width <= media.width &&
+  media.contentBounds.y + media.contentBounds.height <= media.height
+    ? media.contentBounds
+    : null;
+const framing = contentBounds ? 'content' : 'asset';
+const aspectRatio = contentBounds
+  ? `${contentBounds.width} / ${contentBounds.height}`
+  : `${media.width} / ${media.height}`;
+const contentExtent = contentBounds
+  ? Math.max(contentBounds.width, contentBounds.height)
+  : 1;
+const contentStyle = contentBounds
+  ? [
+      `--media-content-image-inline-size: ${
+        (media.width / contentExtent) * 100
+      }%`,
+      `--media-content-image-block-size: ${
+        (media.height / contentExtent) * 100
+      }%`,
+      `--media-content-image-inline-start: ${
+        (0.5 - (contentBounds.x + contentBounds.width / 2) / contentExtent) *
+        100
+      }%`,
+      `--media-content-image-block-start: ${
+        (0.5 - (contentBounds.y + contentBounds.height / 2) / contentExtent) *
+        100
+      }%`,
+    ]
+  : [];
+const srcset = media.sources
+  ?.map((source) => `${source.src} ${source.width}w`)
+  .join(', ');
+---
+
+<figure
+  {...attrs}
+  class:list={['media', className]}
+  data-widget="media"
+  data-media-fit={fit}
+  data-media-framing={framing}
+  data-media-rendering={rendering}
+  data-media-shape={shape}
+  data-media-size={size}
+  data-media-upscale={upscale}
+  data-media-visual-size={visualSize}
+  data-tone={dataTone}
+  style={[
+    `--media-aspect-ratio: ${aspectRatio}`,
+    `--media-source-inline-size: ${media.width}px`,
+    `--media-source-block-size: ${media.height}px`,
+    ...contentStyle,
+  ].join('; ')}
+>
+  <div class="media__frame">
+    <img
+      src={media.src}
+      srcset={srcset}
+      sizes={media.sizes}
+      alt={media.alt}
+      width={media.width}
+      height={media.height}
+      loading={media.loading ?? 'lazy'}
+      decoding={media.decoding ?? 'async'}
+      fetchpriority={media.fetchPriority}
+    />
+  </div>
+  {media.caption ? <figcaption>{media.caption}</figcaption> : null}
+</figure>

package/src/primitives/media/Media/Media.css

@@ -0,0 +1,161 @@
+.media {
+  --media-fit: contain;
+  --media-object-inline-size: auto;
+  --media-object-block-size: auto;
+  --media-object-max-inline-size: 100%;
+  --media-object-max-block-size: 100%;
+  --media-object-radius: 0;
+  --media-visual-max-size: 100%;
+
+  display: grid;
+  overflow: visible;
+  margin: 0;
+  justify-items: center;
+  align-items: center;
+  gap: 0;
+}
+
+.media[data-media-fit='contain'] {
+  --media-fit: contain;
+}
+
+.media[data-media-fit='cover'] {
+  --media-fit: cover;
+}
+
+.media[data-media-fit='fill'] {
+  --media-fit: fill;
+}
+
+.media[data-media-fit='none'] {
+  --media-fit: none;
+}
+
+.media[data-media-fit='scale-down'] {
+  --media-fit: scale-down;
+}
+
+.media[data-media-rendering='pixelated'] .media__frame img {
+  image-rendering: pixelated;
+}
+
+.media[data-media-shape='circle'] {
+  --media-object-radius: var(--nox-radius-pill);
+}
+
+.media[data-media-visual-size='compact'] {
+  --media-visual-max-size: calc(
+    var(--nox-compact-media-responsive-size) - var(--nox-space-2)
+  );
+}
+
+.media__frame {
+  display: grid;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  place-items: center;
+}
+
+.media__frame img {
+  display: block;
+  inline-size: var(--media-object-inline-size);
+  block-size: var(--media-object-block-size);
+  max-inline-size: min(
+    var(--media-object-max-inline-size),
+    var(--media-visual-max-size)
+  );
+  max-block-size: min(
+    var(--media-object-max-block-size),
+    var(--media-visual-max-size)
+  );
+  border-radius: var(--media-object-radius);
+  object-fit: var(--media-fit);
+  object-position: center;
+}
+
+.media figcaption {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: 0 var(--nox-space-3) var(--nox-space-3);
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-sm);
+  overflow-wrap: anywhere;
+  text-align: center;
+}
+
+.media[data-media-size='fill'] {
+  --media-object-inline-size: 100%;
+  --media-object-block-size: 100%;
+
+  grid-template-rows: minmax(0, 1fr) auto;
+  align-items: stretch;
+  width: 100%;
+  inline-size: 100%;
+  block-size: 100%;
+  min-width: 0;
+  min-height: 0;
+  min-inline-size: 0;
+  min-block-size: 0;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+
+.media[data-media-size='fill'] .media__frame {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  min-width: 0;
+  min-height: 0;
+  min-inline-size: 0;
+  min-block-size: 0;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  aspect-ratio: var(--media-aspect-ratio);
+  overflow: hidden;
+}
+
+.media[data-media-size='fill'] .media__frame img {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.media[data-media-framing='content'] .media__frame {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+}
+
+.media[data-media-framing='content'] .media__frame img {
+  position: absolute;
+  inset-block-start: var(--media-content-image-block-start);
+  inset-inline-start: var(--media-content-image-inline-start);
+  inline-size: var(--media-content-image-inline-size);
+  block-size: var(--media-content-image-block-size);
+  max-inline-size: none;
+  max-block-size: none;
+}
+
+.media[data-media-upscale='prevent'] .media__frame img {
+  max-inline-size: min(
+    var(--media-object-max-inline-size),
+    var(--media-visual-max-size),
+    var(--media-source-inline-size)
+  );
+  max-block-size: min(
+    var(--media-object-max-block-size),
+    var(--media-visual-max-size),
+    var(--media-source-block-size)
+  );
+}
+
+.media[data-media-upscale='prevent'][data-media-size='fill'][data-media-framing='asset']
+  .media__frame
+  img {
+  margin: auto;
+}