@cratis/cast 0.0.0-stage → 0.1.0

package/site/lib/career.ts

@@ -0,0 +1,148 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CareerEvent } from '../../config/CastConfig';
+
+/**
+ * The career projection. Every field is derived by folding career events in
+ * stream order; nothing here is hard-coded per position.
+ */
+export type Role = {
+    title: string;
+    org: string;
+    orgUrl?: string | undefined;
+    location?: string | undefined;
+    from: string;
+    to?: string | undefined;
+    summary: string;
+    skills: string[];
+};
+
+export type CareerProjection = {
+    /** Number of events applied (stream position). */
+    position: number;
+    lastEvent: CareerEvent | undefined;
+    /** Latest event date seen; monotonic, so year-only dates never move time backwards. */
+    clock: string | undefined;
+    /** Date of the first event that is not education. */
+    shippingSince: string | undefined;
+    currentRole: Role | undefined;
+    /** Every role still open, newest first. */
+    currentRoles: Role[];
+    roles: Role[];
+    affiliations: string[];
+    skills: string[];
+    /** Skills introduced by the last applied event. */
+    newSkills: string[];
+    eventTypes: Record<string, number>;
+};
+
+/** Event types that mean "joined an organization". Presentation rule only. */
+const AFFILIATION_EVENTS = new Set([
+    'StudiesStarted',
+    'VolunteerTeamJoined',
+    'PartTimeRoleStarted',
+    'ContractStarted',
+    'EmploymentStarted',
+    'CompanyCoFounded',
+]);
+
+const EDUCATION_EVENTS = new Set(['StudiesStarted', 'DegreeCompleted', 'CertificationsEarned']);
+
+export const initialProjection: CareerProjection = {
+    position: 0,
+    lastEvent: undefined,
+    clock: undefined,
+    shippingSince: undefined,
+    currentRole: undefined,
+    currentRoles: [],
+    roles: [],
+    affiliations: [],
+    skills: [],
+    newSkills: [],
+    eventTypes: {},
+};
+
+/** Normalizes 'YYYY' and 'YYYY-MM' to a sortable 'YYYY-MM'. */
+export const normalizeDate = (date: string): string => (date.length === 4 ? `${date}-01` : date);
+
+const later = (a: string | undefined, b: string): string => (!a || b > a ? b : a);
+
+/** Pure reducer: applies one event to a projection. */
+export function apply(state: CareerProjection, event: CareerEvent): CareerProjection {
+    const date = normalizeDate(event.date);
+
+    let roles = state.roles;
+    if (event.endsRole) {
+        roles = roles.map((r) => (r.org === event.endsRole && !r.to ? { ...r, to: event.date } : r));
+    }
+    if (event.role && event.org) {
+        roles = [
+            ...roles,
+            {
+                title: event.role,
+                org: event.org,
+                orgUrl: event.orgUrl,
+                location: event.location,
+                from: event.date,
+                summary: event.summary,
+                skills: event.skills ?? [],
+            },
+        ];
+    }
+
+    const currentRoles = [...roles].reverse().filter((r) => !r.to);
+    const currentRole = currentRoles[0];
+
+    const affiliations =
+        event.org && AFFILIATION_EVENTS.has(event.type) && !state.affiliations.includes(event.org)
+            ? [...state.affiliations, event.org]
+            : state.affiliations;
+
+    const newSkills = (event.skills ?? []).filter((s) => !state.skills.includes(s));
+
+    return {
+        position: state.position + 1,
+        lastEvent: event,
+        clock: later(state.clock, date),
+        shippingSince: state.shippingSince ?? (EDUCATION_EVENTS.has(event.type) ? undefined : date),
+        currentRole,
+        currentRoles,
+        roles,
+        affiliations,
+        skills: [...state.skills, ...newSkills],
+        newSkills,
+        eventTypes: { ...state.eventTypes, [event.type]: (state.eventTypes[event.type] ?? 0) + 1 },
+    };
+}
+
+/** Replays the first `position` events of a stream. */
+export const project = (events: readonly CareerEvent[], position = events.length): CareerProjection =>
+    events.slice(0, position).reduce(apply, initialProjection);
+
+const monthIndex = (date: string): number => {
+    const [y, m] = normalizeDate(date).split('-').map(Number);
+    return (y ?? 0) * 12 + ((m ?? 1) - 1);
+};
+
+/** Years between two YYYY-MM dates, one decimal. */
+export const yearsBetween = (from: string | undefined, to: string | undefined): number =>
+    from && to ? Math.max(0, Math.round(((monthIndex(to) - monthIndex(from)) / 12) * 10) / 10) : 0;
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+
+/** 'YYYY-MM' -> 'Jun 2025', 'YYYY' -> '2025'. */
+export function formatMonth(date: string): string {
+    if (date.length === 4) return date;
+    const [y, m] = date.split('-');
+    return `${MONTHS[Number(m) - 1] ?? ''} ${y}`;
+}
+
+/** "also Co-founder & Chief Architect · Cratis" for the open roles beyond the newest one. */
+export const alsoText = (state: CareerProjection): string =>
+    state.currentRoles.length > 1
+        ? `also ${state.currentRoles
+                .slice(1)
+                .map((r) => `${r.title} · ${r.org}`)
+                .join(', ')}`
+        : '';

package/site/lib/clipboard.ts

@@ -0,0 +1,12 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Copies text with the async Clipboard API. Returns false when the browser refuses. */
+export async function copyText(text: string): Promise<boolean> {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    } catch {
+        return false;
+    }
+}

package/site/lib/contributions.ts

@@ -0,0 +1,63 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Folds the contribution calendar from the GitHub snapshot into what the heatmap shows.
+import type { Week } from './github';
+
+export type Day = { date: string; count: number; level: 0 | 1 | 2 | 3 | 4; week: number; weekday: number };
+
+const DAY_MS = 86_400_000;
+const iso = (t: number) => new Date(t).toISOString().slice(0, 10);
+
+export function foldCalendar(weeks: Week[]) {
+    const days: Day[] = [];
+    weeks.forEach((w, wi) => {
+        const start = Date.parse(`${w.start}T00:00:00Z`);
+        const offset = new Date(start).getUTCDay();
+        w.counts.forEach((count, i) =>
+            days.push({ date: iso(start + i * DAY_MS), count, level: 0, week: wi, weekday: (offset + i) % 7 }),
+        );
+    });
+
+    // Intensity levels from quartiles of active days, so one huge day does not wash out the rest.
+    const active = days.map((d) => d.count).filter((n) => n > 0).sort((a, b) => a - b);
+    const q = (p: number) => active[Math.min(active.length - 1, Math.floor(active.length * p))] ?? 1;
+    const [q1, q2, q3] = [q(0.25), q(0.5), q(0.75)];
+    for (const d of days) d.level = d.count === 0 ? 0 : d.count <= q1 ? 1 : d.count <= q2 ? 2 : d.count <= q3 ? 3 : 4;
+
+    let longest = 0;
+    let run = 0;
+    for (const d of days) {
+        run = d.count > 0 ? run + 1 : 0;
+        longest = Math.max(longest, run);
+    }
+    // Current streak: today may not have contributions yet, so it does not break the streak.
+    let current = 0;
+    for (let i = days.length - 1; i >= 0; i--) {
+        const d = days[i]!;
+        if (d.count > 0) current++;
+        else if (i !== days.length - 1) break;
+    }
+    const busiest = days.reduce((best, d) => (d.count > best.count ? d : best), days[0] ?? { date: '', count: 0 } as Day);
+
+    const months = new Map<string, number>();
+    for (const d of days) months.set(d.date.slice(0, 7), (months.get(d.date.slice(0, 7)) ?? 0) + d.count);
+
+    return {
+        days,
+        weekCount: weeks.length,
+        activeDays: active.length,
+        longest,
+        current,
+        busiest,
+        months: [...months.entries()].map(([month, total]) => ({ month, total })),
+        first: days[0]?.date ?? '',
+        last: days[days.length - 1]?.date ?? '',
+    };
+}
+
+export const formatDay = (date: string): string =>
+    new Date(`${date}T00:00:00Z`).toLocaleDateString('en-US', { weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' });
+
+export const formatMonthLong = (month: string): string =>
+    new Date(`${month}-01T00:00:00Z`).toLocaleDateString('en-US', { month: 'long', year: 'numeric', timeZone: 'UTC' });

package/site/lib/github.ts

@@ -0,0 +1,55 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Typed access to the GitHub data captured at build time.
+import type { z } from 'zod';
+import type { cratisRepositorySchema, projectSchema } from '../../config/castSchema';
+import { config, cratis, github, projects } from '../data';
+
+export type { PullRequest, ContributionWeek as Week } from '../../github/GitHubSnapshot';
+export type CratisRepo = z.output<typeof cratisRepositorySchema> & { role: string };
+export type Project = z.output<typeof projectSchema>;
+
+export { github };
+
+/** Merged pull requests across the configured organizations, falling back to a stat written in cast.yaml. */
+export const mergedPrTotal: number = github.mergedPullRequests.total || (config.stats.find(stat => stat.live === 'mergedPullRequests')?.value ?? 0);
+
+/** Floors to hundreds for an honest "3,100+" style figure. */
+export const mergedPrFloor: number = mergedPrTotal >= 100 ? Math.floor(mergedPrTotal / 100) * 100 : mergedPrTotal;
+
+const roleFor = (repo: z.output<typeof cratisRepositorySchema>, rank: number): string =>
+    repo.founded
+        ? (rank === 1 ? 'Founder & lead' : 'Founder')
+        : rank === 1
+            ? (repo.role?.startsWith('#') ? '#1 committer' : 'Lead developer')
+            : rank === 2
+                ? (repo.group === 'client' ? '#2 contributor' : '#2 all-time')
+                : 'Contributor';
+
+/** Per-repository figures prefer the snapshot; values written in cast.yaml are fallbacks only. */
+export const cratisRepos: CratisRepo[] = (cratis?.repos ?? []).map(repo => {
+    const counts = repo.url ? github.repositories[`Cratis/${repo.name}`] : undefined;
+    if (!counts) return { ...repo, role: repo.role ?? roleFor(repo, repo.rank) };
+    return { ...repo, ...counts, role: roleFor(repo, counts.rank) };
+});
+
+/** owner/name of a github.com URL. */
+export const repositoryOf = (url: string): string | undefined => url.match(/^https:\/\/github\.com\/([^/]+\/[^/#?]+)/i)?.[1];
+
+/** Projects with versions taken from the latest GitHub release when one was captured. */
+export const liveProjects: Project[] = projects.map(project => {
+    const repository = repositoryOf(project.url);
+    const release = repository ? Object.entries(github.releases).find(([name]) => name.toLowerCase() === repository.toLowerCase())?.[1] : undefined;
+    return release ? { ...project, version: release.tag } : project;
+});
+
+/** Stars for an owner/name, if tracked. */
+export const starsFor = (repository: string): number | undefined =>
+    Object.entries(github.stars).find(([name]) => name.toLowerCase() === repository.toLowerCase())?.[1];
+
+export const snapshotDate = (date = github.fetchedAt): string =>
+    date ? new Date(date).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric', timeZone: 'UTC' }) : 'the last build';
+
+/** Repository names in the live feed, most recent first, without duplicates. */
+export const liveRepos: string[] = [...new Set(github.mergedPullRequests.latest.map(pullRequest => pullRequest.repository.split('/')[1] ?? pullRequest.repository))];

package/site/lib/inline.ts

@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+const escapeHtml = (value: string): string =>
+    value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+
+/**
+ * Renders the inline markup cast.yaml text may use, escaping everything else:
+ * `*emphasis*` (the italic serif accent), `**strong**`, `` `code` `` and `[links](https://…)`.
+ */
+export function renderInline(text: string, emphasisClass = 'serif'): string {
+    let html = escapeHtml(text);
+    html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+    html = html.replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+|\/[^)\s]*|#[^)\s]*|mailto:[^)\s]+)\)/g, (_, label: string, href: string) =>
+        `<a href="${href}" class="text-fg underline decoration-line-strong hover:decoration-fg"${href.startsWith('http') ? ' rel="noopener"' : ''}>${label}</a>`);
+    html = html.replace(/\*\*([^*]+)\*\*/g, '<strong class="text-fg font-semibold">$1</strong>');
+    html = html.replace(/\*([^*]+)\*/g, `<em class="${emphasisClass}">$1</em>`);
+    return html;
+}
+
+/** Removes inline markup, for meta tags, JSON and plain-text outputs. */
+export const plainText = (text: string): string =>
+    text.replace(/`([^`]+)`/g, '$1').replace(/\[([^\]]+)\]\([^)]+\)/g, '$1').replace(/\*\*([^*]+)\*\*/g, '$1').replace(/\*([^*]+)\*/g, '$1');

package/site/lib/lifecycle.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Page lifecycle that works with and without Astro's <ClientRouter />.
+//
+// With the router, module scripts run once per full load while the DOM is swapped on
+// every navigation. `onPageLoad` runs `init` for every page view (initial and after each
+// navigation) and runs the returned cleanup before the next swap, so nothing double-binds
+// and observers on detached elements are released.
+type Cleanup = (() => void) | void;
+
+const routerActive = () => !!document.querySelector('meta[name="astro-view-transitions-enabled"]');
+
+export function onPageLoad(init: () => Cleanup): void {
+    let cleanup: Cleanup;
+    const run = () => {
+        cleanup?.();
+        cleanup = init();
+    };
+    document.addEventListener('astro:page-load', run);
+    document.addEventListener('astro:before-swap', () => {
+        cleanup?.();
+        cleanup = undefined;
+    });
+    if (!routerActive()) run();
+}
+
+/** Collects teardown callbacks for one page view. */
+export function disposer() {
+    const fns: (() => void)[] = [];
+    return {
+        add<T extends () => void>(fn: T): T {
+            fns.push(fn);
+            return fn;
+        },
+        /** addEventListener that is removed on dispose. */
+        on<E extends Event = Event>(target: EventTarget, type: string, fn: (e: E) => void, opts?: AddEventListenerOptions): void {
+            const listener = fn as unknown as EventListener;
+            target.addEventListener(type, listener, opts);
+            fns.push(() => target.removeEventListener(type, listener, opts));
+        },
+        dispose: () => fns.splice(0).forEach((fn) => fn()),
+    };
+}

package/site/lib/motion.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+const KEY = 'cast:motion';
+const query = typeof window !== 'undefined' ? window.matchMedia('(prefers-reduced-motion: reduce)') : undefined;
+
+/** True when the OS asks for reduced motion or the visitor turned motion off. */
+export function motionReduced(): boolean {
+    if (typeof document === 'undefined') return true;
+    const pref = document.documentElement.dataset['motion'];
+    if (pref === 'reduced') return true;
+    if (pref === 'full') return false;
+    return query?.matches ?? false;
+}
+
+type Listener = (reduced: boolean) => void;
+const listeners = new Set<Listener>();
+
+export function onMotionChange(listener: Listener): () => void {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+
+const notify = () => {
+    const reduced = motionReduced();
+    document.documentElement.classList.toggle('js-motion', !reduced);
+    listeners.forEach((l) => l(reduced));
+};
+
+query?.addEventListener('change', notify);
+
+/** Toggles the visitor's motion preference and persists it. */
+export function toggleMotion(): boolean {
+    const next = motionReduced() ? 'full' : 'reduced';
+    document.documentElement.dataset['motion'] = next;
+    try {
+        localStorage.setItem(KEY, next);
+    } catch {
+        /* storage may be unavailable */
+    }
+    notify();
+    return next === 'reduced';
+}

package/site/lib/nav.ts

@@ -0,0 +1,38 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { motionReduced } from './motion';
+
+export const onHome = (): boolean => location.pathname === '/' || location.pathname === '/index.html';
+
+/** Navigates to another page, through the view-transition router when it is active. */
+export async function go(href: string): Promise<void> {
+    if (document.querySelector('meta[name="astro-view-transitions-enabled"]')) {
+        const { navigate } = await import('astro:transitions/client');
+        await navigate(href);
+    } else {
+        location.href = href;
+    }
+}
+
+/** Scrolls to a home-page section and moves focus to its heading. */
+export function goSection(id: string): void {
+    const el = document.getElementById(id);
+    if (onHome() && el) {
+        el.scrollIntoView({ behavior: motionReduced() ? 'auto' : 'smooth', block: 'start' });
+        history.replaceState(history.state, '', `#${id}`);
+        const focusTarget = el.querySelector<HTMLElement>('h2') ?? el;
+        focusTarget.setAttribute('tabindex', '-1');
+        focusTarget.focus({ preventScroll: true });
+    } else {
+        void go(`/#${id}`);
+    }
+}
+
+/** Scrolls to the career section and starts the replay, from any page. */
+export function startReplay(): void {
+    if (onHome() && document.querySelector('[data-replay]')) document.dispatchEvent(new CustomEvent('replay:start'));
+    else void go('/?replay#career');
+}
+
+export const openExternal = (url: string): void => void window.open(url, '_blank', 'noopener');

package/site/lib/reltime.ts

@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+const rtf = typeof Intl !== 'undefined' ? new Intl.RelativeTimeFormat('en', { numeric: 'auto' }) : undefined;
+const UNITS: [Intl.RelativeTimeFormatUnit, number][] = [
+    ['year', 31_536_000_000],
+    ['month', 2_592_000_000],
+    ['week', 604_800_000],
+    ['day', 86_400_000],
+    ['hour', 3_600_000],
+    ['minute', 60_000],
+];
+
+/** "3 days ago" style text for an ISO timestamp, relative to `now`. */
+export function relativeTime(iso: string, now = Date.now()): string {
+    const diff = Date.parse(iso) - now;
+    for (const [unit, ms] of UNITS) {
+        if (Math.abs(diff) >= ms || unit === 'minute') {
+            return rtf?.format(Math.round(diff / ms), unit) ?? new Date(iso).toDateString();
+        }
+    }
+    return iso;
+}
+
+/** Replaces the build-time text of every <time data-rel> with a live relative time. */
+export function hydrateRelativeTimes(root: ParentNode = document): void {
+    root.querySelectorAll<HTMLTimeElement>('time[data-rel]').forEach((el) => {
+        const iso = el.dateTime;
+        if (!iso) return;
+        el.title ||= new Date(iso).toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' });
+        el.textContent = relativeTime(iso);
+    });
+}

package/site/lib/safeJson.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/**
+ * JSON that is safe to place inside an HTML `<script>` element. `<`, `>` and `&` become Unicode escapes, so text
+ * such as `</script>` in cast.yaml cannot close the element, and U+2028/U+2029 are escaped for old parsers.
+ * The result parses back to the same value.
+ */
+export const safeJson = (value: unknown): string =>
+    JSON.stringify(value)
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')
+        .replace(/\u2028/g, '\\u2028')
+        .replace(/\u2029/g, '\\u2029');

package/site/lib/sections.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ResolvedSection } from '../../config/ResolvedSection';
+import { SectionId } from '../../config/SectionId';
+
+/** The DOM id each section renders with; kept stable so links like /#career keep working. */
+export const anchorFor: Record<SectionId, string> = {
+    [SectionId.Hero]: 'top',
+    [SectionId.Now]: 'about',
+    [SectionId.Stats]: 'stats',
+    [SectionId.Career]: 'career',
+    [SectionId.Model]: 'model',
+    [SectionId.Cratis]: 'cratis',
+    [SectionId.Activity]: 'activity',
+    [SectionId.Agentic]: 'agentic',
+    [SectionId.Projects]: 'projects',
+    [SectionId.Writing]: 'writing',
+    [SectionId.Talks]: 'talks',
+    [SectionId.Skills]: 'skills',
+    [SectionId.Contact]: 'contact',
+};
+
+const navLabels: Partial<Record<SectionId, string>> = {
+    [SectionId.Now]: 'Now',
+    [SectionId.Career]: 'Career',
+    [SectionId.Cratis]: 'Cratis',
+    [SectionId.Projects]: 'Projects',
+    [SectionId.Contact]: 'Contact',
+};
+
+/** Primary navigation: up to five of the sections that render, in page order. */
+export const navLinks = (sections: readonly ResolvedSection[]): { id: string; label: string }[] =>
+    sections
+        .filter(section => navLabels[section.id] !== undefined)
+        .slice(0, 5)
+        .map(section => ({ id: anchorFor[section.id], label: navLabels[section.id]! }));
+
+/** The resolved entry for a section, if it renders. */
+export const sectionFor = (sections: readonly ResolvedSection[], id: SectionId): ResolvedSection | undefined =>
+    sections.find(section => section.id === id);

package/site/lib/theme.ts

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Light/dark theme. The inline script in Base.astro applies the stored choice before first
+// paint; this module changes and persists it.
+export type Theme = 'light' | 'dark';
+const KEY = 'cast:theme';
+
+export const currentTheme = (): Theme => (document.documentElement.dataset['theme'] === 'light' ? 'light' : 'dark');
+
+export function setTheme(theme: Theme): Theme {
+    const root = document.documentElement;
+    root.classList.add('theme-flip');
+    window.setTimeout(() => root.classList.remove('theme-flip'), 450);
+    root.dataset['theme'] = theme;
+    root.style.colorScheme = theme;
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', theme === 'light' ? '#faf9f6' : '#08080e');
+    try {
+        localStorage.setItem(KEY, theme);
+    } catch {
+        /* storage may be unavailable */
+    }
+    document.dispatchEvent(new CustomEvent('theme:change', { detail: theme }));
+    document.querySelectorAll('[data-theme-toggle]').forEach((b) => b.setAttribute('aria-pressed', String(theme === 'light')));
+    return theme;
+}
+
+export const toggleTheme = (): Theme => setTheme(currentTheme() === 'light' ? 'dark' : 'light');

package/site/scripts/ambient.ts

@@ -0,0 +1,93 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Small page-wide behaviours: reveal on scroll, pointer glow, copy buttons, nav state.
+import { motionReduced, onMotionChange } from '../lib/motion';
+import { copyText } from '../lib/clipboard';
+import { onPageLoad, disposer } from '../lib/lifecycle';
+
+// --- Pointer-following glow ---------------------------------------------------
+document.addEventListener(
+    'pointermove',
+    (e) => {
+        const target = (e.target as Element | null)?.closest<HTMLElement>('.glow');
+        if (!target) return;
+        const r = target.getBoundingClientRect();
+        target.style.setProperty('--mx', `${e.clientX - r.left}px`);
+        target.style.setProperty('--my', `${e.clientY - r.top}px`);
+    },
+    { passive: true },
+);
+
+// --- Copy to clipboard --------------------------------------------------------
+document.addEventListener('click', async (e) => {
+    const btn = (e.target as Element | null)?.closest<HTMLButtonElement>('button[data-copy]');
+    if (!btn) return;
+    const text = btn.dataset['copy'] ?? '';
+    const ok = await copyText(text);
+    const label = btn.querySelector<HTMLElement>('[data-copy-label]');
+    const status = btn.parentElement?.querySelector<HTMLElement>('[data-copy-status]');
+    const original = label?.textContent ?? '';
+    btn.dataset['copied'] = ok ? 'true' : 'false';
+    if (label) label.textContent = ok ? 'Copied' : 'Press ⌘C';
+    if (status) status.textContent = ok ? `Copied ${text} to the clipboard` : 'Copy failed';
+    window.setTimeout(() => {
+        delete btn.dataset['copied'];
+        if (label) label.textContent = original;
+    }, 1600);
+});
+
+// --- Per page view: reveal on scroll and nav state ------------------------------
+onPageLoad(() => {
+    const d = disposer();
+
+    const revealables = document.querySelectorAll<HTMLElement>('[data-reveal]');
+    const revealAll = () => revealables.forEach((el) => el.classList.add('is-visible'));
+    if (motionReduced() || !('IntersectionObserver' in window)) {
+        revealAll();
+    } else {
+        const io = new IntersectionObserver(
+            (entries) => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('is-visible');
+                        io.unobserve(entry.target);
+                    }
+                }
+            },
+            { rootMargin: '0px 0px -8% 0px', threshold: 0.08 },
+        );
+        revealables.forEach((el) => io.observe(el));
+        d.add(() => io.disconnect());
+    }
+    d.add(onMotionChange((reduced) => reduced && revealAll()));
+
+    const nav = document.querySelector<HTMLElement>('[data-nav]');
+    if (nav) {
+        const update = () => nav.toggleAttribute('data-scrolled', window.scrollY > 8);
+        update();
+        d.on(window, 'scroll', update, { passive: true });
+
+        const links = nav.querySelectorAll<HTMLAnchorElement>('a[data-section]');
+        const sections = [...links]
+            .map((a) => document.getElementById(a.dataset['section'] ?? ''))
+            .filter((s): s is HTMLElement => !!s);
+        if (sections.length) {
+            const spy = new IntersectionObserver(
+                (entries) => {
+                    for (const entry of entries) {
+                        if (!entry.isIntersecting) continue;
+                        links.forEach((a) => {
+                            if (a.dataset['section'] === entry.target.id) a.setAttribute('aria-current', 'location');
+                            else a.removeAttribute('aria-current');
+                        });
+                    }
+                },
+                { rootMargin: '-45% 0px -50% 0px' },
+            );
+            sections.forEach((s) => spy.observe(s));
+            d.add(() => spy.disconnect());
+        }
+    }
+    return d.dispose;
+});