@astronox/core 0.1.0

package/src/patterns/GlitchOverlay/GlitchOverlay.css

@@ -0,0 +1,234 @@
+.glitch-overlay {
+  position: fixed;
+  z-index: 90;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.glitch-overlay[hidden] {
+  display: none;
+}
+
+.glitch-overlay__scanlines,
+.glitch-overlay__pixels {
+  position: absolute;
+  inset: 0;
+}
+
+.glitch-overlay__scanlines {
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent 3px,
+    color-mix(in srgb, var(--nox-text) 8%, transparent) 3px,
+    color-mix(in srgb, var(--nox-text) 8%, transparent) 4px
+  );
+}
+
+.glitch-overlay__pixel {
+  position: absolute;
+  inset-block-start: var(--glitch-y);
+  inset-inline-start: var(--glitch-x);
+  inline-size: var(--glitch-width);
+  block-size: var(--glitch-height);
+  background: var(--nox-tone-color);
+  opacity: 0.28;
+}
+
+html[data-visual-effect='glitch'] [data-site-viewport] {
+  background:
+    repeating-linear-gradient(
+      90deg,
+      transparent 0,
+      transparent 7rem,
+      color-mix(in srgb, var(--nox-tone-color) 3%, transparent) 7rem,
+      color-mix(in srgb, var(--nox-tone-color) 3%, transparent) 7.125rem
+    ),
+    var(--nox-page-background);
+}
+
+html[data-visual-effect='glitch'] body {
+  text-shadow:
+    0.045em 0 color-mix(in srgb, var(--nox-source-tone-info) 44%, transparent),
+    -0.045em 0
+      color-mix(in srgb, var(--nox-source-tone-danger) 36%, transparent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .glitch-overlay__scanlines {
+    animation: glitch-scanlines 4.5s linear infinite;
+  }
+
+  .glitch-overlay__pixel {
+    animation: glitch-pixel var(--glitch-duration) steps(2, end) infinite;
+    animation-delay: var(--glitch-delay);
+  }
+
+  html[data-visual-effect='glitch'] [data-site-header],
+  html[data-visual-effect='glitch'] [data-site-viewport] {
+    transform-origin: 50% 20%;
+    animation: glitch-drift 9s ease-in-out infinite;
+  }
+
+  html[data-visual-effect='glitch'] [data-glitch-pulse='shift'] {
+    animation: glitch-pulse-shift 180ms steps(2, end);
+  }
+
+  html[data-visual-effect='glitch'] [data-glitch-pulse='slice'] {
+    animation: glitch-pulse-slice 200ms steps(2, end);
+  }
+
+  html[data-visual-effect='glitch'] [data-glitch-pulse='text'] {
+    animation: glitch-pulse-text 220ms steps(2, end);
+  }
+
+  html[data-visual-effect='glitch'] [data-glitch-pulse='media'] {
+    animation: glitch-pulse-media 240ms steps(2, end);
+  }
+}
+
+@keyframes glitch-scanlines {
+  to {
+    translate: 0 4px;
+  }
+}
+
+@keyframes glitch-pixel {
+  0%,
+  78%,
+  100% {
+    opacity: 0;
+    scale: 0.4 1;
+  }
+
+  80%,
+  88% {
+    opacity: 0.38;
+    scale: 1 1;
+  }
+
+  90% {
+    opacity: 0.16;
+    scale: 1.8 1;
+  }
+}
+
+@keyframes glitch-drift {
+  0%,
+  100% {
+    rotate: 0deg;
+    translate: 0 0;
+  }
+
+  18% {
+    rotate: 0.12deg;
+    translate: 1px -2px;
+  }
+
+  43% {
+    rotate: -0.16deg;
+    translate: -2px 1px;
+  }
+
+  67% {
+    rotate: 0.1deg;
+    translate: 2px 2px;
+  }
+
+  84% {
+    rotate: -0.08deg;
+    translate: -1px -1px;
+  }
+}
+
+@keyframes glitch-pulse-shift {
+  0%,
+  100% {
+    filter: none;
+    translate: 0;
+  }
+
+  34% {
+    filter: saturate(1.3);
+    translate: 3px -1px;
+  }
+
+  68% {
+    filter: saturate(0.75);
+    translate: -2px 1px;
+  }
+}
+
+@keyframes glitch-pulse-slice {
+  0%,
+  100% {
+    clip-path: inset(0);
+    translate: 0;
+  }
+
+  32% {
+    clip-path: inset(0 0 47% 0);
+    translate: 2px 0;
+  }
+
+  66% {
+    clip-path: inset(45% 0 0 0);
+    translate: -2px 0;
+  }
+}
+
+@keyframes glitch-pulse-text {
+  0%,
+  100% {
+    filter: none;
+    opacity: 1;
+    scale: 1 1;
+    translate: 0;
+  }
+
+  16% {
+    opacity: 0.2;
+    scale: -1 1;
+    translate: 1px -1px;
+  }
+
+  34% {
+    filter: contrast(1.35);
+    opacity: 0.9;
+    scale: 1 1;
+    translate: -1px 1px;
+  }
+
+  52% {
+    opacity: 0.1;
+    translate: 2px 0;
+  }
+
+  72% {
+    filter: hue-rotate(12deg);
+    opacity: 0.75;
+    translate: -2px 0;
+  }
+}
+
+@keyframes glitch-pulse-media {
+  0%,
+  100% {
+    filter: none;
+    scale: 1;
+    translate: 0;
+  }
+
+  28% {
+    filter: contrast(1.4) saturate(1.25);
+    scale: 1.04 0.98;
+    translate: 2px -1px;
+  }
+
+  64% {
+    filter: hue-rotate(-14deg) contrast(0.85);
+    scale: 0.98 1.03;
+    translate: -2px 1px;
+  }
+}

package/src/patterns/GlitchOverlay/glitchOverlayController.ts

@@ -0,0 +1,152 @@
+const initializedAttribute = 'data-glitch-overlay-initialized';
+const pulseAttribute = 'data-glitch-pulse';
+const textSelector = [
+  'a',
+  'button',
+  'dd',
+  'dt',
+  'h1',
+  'h2',
+  'h3',
+  'label',
+  'p',
+  '[data-text-weight]',
+].join(',');
+const componentSelector = [
+  '[data-button-size]',
+  '[data-composition]',
+  '[data-layout]',
+  '[data-navigation-control]',
+  '[data-site-header]',
+  '[data-site-viewport]',
+  '[data-widget]',
+].join(',');
+const mediaSelector = 'img,svg';
+const noop = (): void => undefined;
+
+function isVisible(element: HTMLElement): boolean {
+  return !element.closest('[hidden]') && element.getClientRects().length > 0;
+}
+
+function pickRandom<T>(items: readonly T[]): T | undefined {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+export function initGlitchOverlay(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const documentRoot = root.ownerDocument.documentElement;
+  const viewport = root.ownerDocument.querySelector<HTMLElement>(
+    '[data-site-viewport]',
+  );
+  if (!viewport) return noop;
+
+  root.setAttribute(initializedAttribute, 'true');
+  const timers = new Set<number>();
+  let stopped = false;
+
+  const schedule = (callback: () => void, delay: number): number => {
+    const timer = window.setTimeout(() => {
+      timers.delete(timer);
+      callback();
+    }, delay);
+    timers.add(timer);
+    return timer;
+  };
+
+  const pulseText = (): void => {
+    const candidates = Array.from(
+      root.ownerDocument.querySelectorAll<HTMLElement>(textSelector),
+    ).filter(
+      (element) =>
+        isVisible(element) &&
+        !element.closest('[data-widget="code-block"]') &&
+        !element.hasAttribute(pulseAttribute) &&
+        Boolean(element.textContent?.trim()),
+    );
+    const target = pickRandom(candidates);
+    if (!target) return;
+
+    target.setAttribute(pulseAttribute, 'text');
+    schedule(
+      () => target.removeAttribute(pulseAttribute),
+      170 + Math.random() * 120,
+    );
+  };
+
+  const pulseComponent = (): void => {
+    const candidates = Array.from(
+      root.ownerDocument.querySelectorAll<HTMLElement>(componentSelector),
+    ).filter(
+      (element) =>
+        isVisible(element) &&
+        element !== root &&
+        !element.closest('[data-widget="code-block"]') &&
+        !element.hasAttribute(pulseAttribute),
+    );
+    const target = pickRandom(candidates);
+    if (!target) return;
+
+    target.setAttribute(
+      pulseAttribute,
+      Math.random() > 0.45 ? 'shift' : 'slice',
+    );
+    schedule(
+      () => target.removeAttribute(pulseAttribute),
+      150 + Math.random() * 130,
+    );
+  };
+
+  const pulseMedia = (): void => {
+    const candidates = Array.from(
+      root.ownerDocument.querySelectorAll<HTMLElement>(mediaSelector),
+    ).filter(
+      (element) =>
+        isVisible(element) &&
+        !element.closest('[data-widget="code-block"]') &&
+        !element.hasAttribute(pulseAttribute),
+    );
+    const target = pickRandom(candidates);
+    if (!target) return;
+
+    target.setAttribute(pulseAttribute, 'media');
+    schedule(
+      () => target.removeAttribute(pulseAttribute),
+      180 + Math.random() * 150,
+    );
+  };
+
+  const queuePulse = (
+    pulse: () => void,
+    minimumDelay: number,
+    delayVariance: number,
+  ): void => {
+    if (stopped) return;
+
+    schedule(
+      () => {
+        if (documentRoot.getAttribute('data-visual-effect') === 'glitch') {
+          pulse();
+        }
+        queuePulse(pulse, minimumDelay, delayVariance);
+      },
+      minimumDelay + Math.random() * delayVariance,
+    );
+  };
+
+  queuePulse(pulseComponent, 500, 1000);
+  queuePulse(pulseText, 700, 1100);
+  queuePulse(pulseMedia, 900, 1500);
+
+  return () => {
+    stopped = true;
+    for (const timer of timers) window.clearTimeout(timer);
+    timers.clear();
+    for (const element of root.ownerDocument.querySelectorAll<HTMLElement>(
+      `[${pulseAttribute}]`,
+    )) {
+      element.removeAttribute(pulseAttribute);
+    }
+    root.removeAttribute(initializedAttribute);
+  };
+}

package/src/patterns/GuidedFlow/GuidedFlow.astro

@@ -0,0 +1,60 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { GuidedFlowStep, GuidedFlowSteps } from './contracts';
+
+type Props = HTMLAttributes<'section'> & {
+  label: string;
+  steps: GuidedFlowSteps;
+};
+
+const { class: className, label, steps, ...attrs }: Props = Astro.props;
+const stepEntries = Object.entries(steps) as [GuidedFlowStep, string][];
+---
+
+<section
+  {...attrs}
+  class:list={['guided-flow', className]}
+  aria-label={label}
+  data-guided-flow
+>
+  <ol class="guided-flow__progress" aria-label={label}>
+    {
+      stepEntries.map(([id, stepLabel], index) => (
+        <li
+          class="guided-flow__progress-item"
+          data-guided-flow-progress={id}
+          data-step-state={index === 0 ? 'current' : 'upcoming'}
+          aria-current={index === 0 ? 'step' : undefined}
+        >
+          <span aria-hidden="true">{index + 1}</span>
+          <span>{stepLabel}</span>
+        </li>
+      ))
+    }
+  </ol>
+
+  <slot name="feedback" />
+
+  <div class="guided-flow__panels">
+    <section data-guided-flow-panel="intro">
+      <slot name="intro" />
+    </section>
+    <section data-guided-flow-panel="tutorial" hidden>
+      <slot name="tutorial" />
+    </section>
+    <section data-guided-flow-panel="challenge" hidden>
+      <slot name="challenge" />
+    </section>
+    <section data-guided-flow-panel="result" hidden>
+      <slot name="result" />
+    </section>
+  </div>
+</section>
+
+<script>
+  import { initGuidedFlow } from './guidedFlowController';
+
+  for (const root of document.querySelectorAll('[data-guided-flow]')) {
+    if (root instanceof HTMLElement) initGuidedFlow(root);
+  }
+</script>

package/src/patterns/GuidedFlow/GuidedFlow.css

@@ -0,0 +1,82 @@
+.guided-flow {
+  container-type: inline-size;
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--nox-space-4);
+}
+
+.guided-flow__progress {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface);
+  list-style: none;
+}
+
+.guided-flow__progress-item {
+  display: flex;
+  min-inline-size: 0;
+  block-size: var(--nox-navigation-block-size);
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  gap: var(--nox-space-2);
+  padding-inline: var(--nox-space-3);
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-medium);
+  text-align: center;
+}
+
+.guided-flow__progress-item + .guided-flow__progress-item {
+  border-inline-start: var(--nox-border-width) solid var(--nox-border);
+}
+
+.guided-flow__progress-item > span:first-child {
+  display: grid;
+  flex: 0 0 auto;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  place-items: center;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-pill);
+  background: var(--nox-surface-muted);
+  color: var(--nox-text);
+}
+
+.guided-flow__progress-item[data-step-state='current'] {
+  background: var(--nox-tone-hover-background);
+  color: var(--nox-tone-text);
+}
+
+.guided-flow__progress-item[data-step-state='complete'] {
+  color: var(--nox-tone-color);
+}
+
+.guided-flow__panels,
+.guided-flow__panels > section {
+  min-inline-size: 0;
+}
+
+@container (width < 45rem) {
+  .guided-flow__progress-item {
+    block-size: var(--nox-navigation-compact-block-size);
+    padding-inline: var(--nox-space-2);
+  }
+}
+
+@container (width < 40rem) {
+  .guided-flow__progress-item > span:last-child {
+    position: absolute;
+    overflow: hidden;
+    inline-size: 1px;
+    block-size: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}

package/src/patterns/GuidedFlow/contracts.ts

@@ -0,0 +1,3 @@
+export type GuidedFlowStep = 'intro' | 'tutorial' | 'challenge' | 'result';
+
+export type GuidedFlowSteps = Readonly<Record<GuidedFlowStep, string>>;

package/src/patterns/GuidedFlow/guidedFlowController.ts

@@ -0,0 +1,49 @@
+import type { GuidedFlowStep } from './contracts';
+
+const initialized = new WeakSet<HTMLElement>();
+const steps: readonly GuidedFlowStep[] = [
+  'intro',
+  'tutorial',
+  'challenge',
+  'result',
+];
+
+export function initGuidedFlow(root: HTMLElement): void {
+  if (initialized.has(root)) return;
+  initialized.add(root);
+  showGuidedFlowStep(root, 'intro');
+}
+
+export function showGuidedFlowStep(
+  root: HTMLElement,
+  activeStep: GuidedFlowStep,
+): void {
+  if (!initialized.has(root)) initialized.add(root);
+  const activeIndex = steps.indexOf(activeStep);
+  if (activeIndex < 0) return;
+
+  for (const panel of root.querySelectorAll<HTMLElement>(
+    '[data-guided-flow-panel]',
+  )) {
+    panel.hidden = panel.dataset.guidedFlowPanel !== activeStep;
+  }
+
+  for (const marker of root.querySelectorAll<HTMLElement>(
+    '[data-guided-flow-progress]',
+  )) {
+    const markerStep = marker.dataset.guidedFlowProgress as GuidedFlowStep;
+    const markerIndex = steps.indexOf(markerStep);
+    const state =
+      markerIndex < activeIndex
+        ? 'complete'
+        : markerIndex === activeIndex
+          ? 'current'
+          : 'upcoming';
+
+    marker.dataset.stepState = state;
+    if (state === 'current') marker.setAttribute('aria-current', 'step');
+    else marker.removeAttribute('aria-current');
+  }
+
+  root.dataset.guidedFlowStep = activeStep;
+}