@cratis/cast 0.0.1 → 0.2.0

package/site/components/EventModel.astro

@@ -0,0 +1,265 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import SectionHeader from './SectionHeader.astro';
+import { safeJson } from '../lib/safeJson';
+
+interface Props {
+  cast: CastView;
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { cast } = Astro.props;
+const { eventModel } = cast;
+const m = eventModel!;
+type ModelCard = (typeof m.cards)[number];
+const { index, title = m.title, label = m.label, intro = m.intro } = Astro.props;
+
+// Fixed board geometry (px). The board scrolls horizontally when it does not fit.
+const COL = 156;
+const W = 132;
+const H = 66;
+const GUTTER = 20;
+// The first two lanes (screens, commands and read models) are taller; stream lanes below them are compact.
+const laneBand: Record<string, [number, number]> = {};
+const laneY: Record<string, number> = {};
+let laneTop = 0;
+m.lanes.forEach((lane, laneIndex) => {
+  const laneHeight = laneIndex < 2 ? 116 : 104;
+  laneBand[lane.id] = [laneTop, laneTop + laneHeight];
+  laneY[lane.id] = laneTop + Math.round((laneHeight - H) / 2) + 9;
+  laneTop += laneHeight;
+});
+const width = GUTTER * 2 + m.columns * COL - (COL - W);
+const height = laneTop;
+
+const pos = (c: ModelCard) => ({ x: GUTTER + c.col * COL, y: laneY[c.lane] ?? 0 });
+const byId = new Map(m.cards.map((c) => [c.id, c]));
+
+const edges = m.edges.flatMap(([from, to]) => {
+  const a = byId.get(from);
+  const b = byId.get(to);
+  if (!a || !b) return [];
+  const pa = pos(a);
+  const pb = pos(b);
+  let d: string;
+  if (pa.y === pb.y) {
+    const y = pa.y + H / 2;
+    d = `M${pa.x + W},${y} C${pa.x + W + 14},${y} ${pb.x - 14},${y} ${pb.x - 4},${y}`;
+  } else {
+    const down = pb.y > pa.y;
+    const ax = pa.x + W / 2 + (pb.x > pa.x ? W * 0.18 : 0);
+    const ay = down ? pa.y + H : pa.y;
+    const bx = pb.x + W / 2 - (pb.x > pa.x ? W * 0.18 : 0);
+    const by = down ? pb.y - 4 : pb.y + H + 4;
+    const my = (ay + by) / 2;
+    d = `M${ax},${ay} C${ax},${my} ${bx},${my} ${bx},${by}`;
+  }
+  return [{ from, to, d }];
+});
+
+// Names never wrap mid-word: long ones get a smaller size that still fits the card.
+const nameSize = (name: string) => (name.length <= 14 ? 12 : name.length <= 17 ? 10.5 : 9.5);
+const kindLabel = { ui: 'Screen', command: 'Command', event: 'Event', view: 'Read model' } as const;
+const stepsFor = (id: string) => m.steps.flatMap((s, i) => (s.cards.includes(id) ? [i] : [])).join(' ');
+---
+
+<section id="model" class="relative py-24 md:py-36" aria-labelledby="model-title">
+  <div class="container-x">
+    <SectionHeader host={cast.host} index={index} kind="command" label={label} title={title} id="model-title">
+      <p class="mt-6 max-w-[62ch] text-lg leading-relaxed text-fg-muted">
+        {intro ? <Fragment><Inline text={intro} host={cast.host} /></Fragment> : <>Before code, I draw how information flows: screens send commands, commands append events, events feed read models, read models feed screens.
+        This is a real slice from <a href={m.repo} class="text-fg underline decoration-line-strong hover:decoration-fg" rel={cast.host.rel}>{m.name}</a>, and every name on it is a type in its source.</>}
+      </p>
+    </SectionHeader>
+
+    <div class="panel overflow-hidden" data-reveal data-model>
+      <div class="flex flex-wrap items-center justify-between gap-3 border-b border-line px-5 py-3 md:px-7">
+        <p class="font-mono text-sm"><span class="text-fg-faint">EventModel:</span> <span class="text-command">{m.name}</span></p>
+        <div class="flex items-center gap-2">
+          <button type="button" class="btn btn-sm" data-model-play aria-pressed="false">
+            <svg viewBox="0 0 16 16" class="size-3.5" fill="currentColor" aria-hidden="true" data-icon-play><path d="M4 2.8v10.4a.6.6 0 0 0 .9.5l8.4-5.2a.6.6 0 0 0 0-1L4.9 2.3a.6.6 0 0 0-.9.5Z"></path></svg>
+            <svg viewBox="0 0 16 16" class="hidden size-3.5" fill="currentColor" aria-hidden="true" data-icon-pause><rect x="3.5" y="2.5" width="3" height="11" rx=".8"></rect><rect x="9.5" y="2.5" width="3" height="11" rx=".8"></rect></svg>
+            <span data-model-play-label>Play the flow</span>
+          </button>
+          <button type="button" class="btn btn-sm" data-model-reset hidden>Show all</button>
+        </div>
+      </div>
+
+      <div class="board-scroll overflow-x-auto" data-model-scroll>
+        <div class="board relative" style={`width:${width}px;height:${height}px`}>
+          {
+            m.lanes.map((l) => (
+              <div class="lane absolute inset-x-0" style={`top:${laneBand[l.id]![0]}px;height:${laneBand[l.id]![1] - laneBand[l.id]![0]}px`} data-lane={l.id}>
+                <span class="absolute top-2 left-5 font-mono text-[0.625rem] tracking-[0.08em] text-fg-faint uppercase">{l.label}</span>
+              </div>
+            ))
+          }
+          <svg class="pointer-events-none absolute inset-0" width={width} height={height} viewBox={`0 0 ${width} ${height}`} aria-hidden="true">
+            <defs>
+              <marker id="model-arrow" viewBox="0 0 8 8" refX="6" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+                <path d="M0 0 8 4 0 8Z" fill="currentColor"></path>
+              </marker>
+            </defs>
+            {edges.map((e) => <path d={e.d} class="edge" data-from={e.from} data-to={e.to} marker-end="url(#model-arrow)"></path>)}
+          </svg>
+          <ol class="contents" aria-label={`Event model: ${m.name}`}>
+            {
+              m.cards.map((c) => {
+                const p = pos(c);
+                return (
+                  <li class="contents">
+                    <button
+                      type="button"
+                      class={`card card-${c.kind} absolute`}
+                      style={`left:${p.x}px;top:${p.y}px;width:${W}px;height:${H}px`}
+                      data-card={c.id}
+                      data-steps={stepsFor(c.id)}
+                      aria-describedby="model-detail"
+                    >
+                      <span class="block font-mono text-[0.5625rem] tracking-[0.06em] uppercase opacity-70">{kindLabel[c.kind]}</span>
+                      <span class="mt-1 block font-mono leading-tight font-medium whitespace-nowrap" style={`font-size:${nameSize(c.name)}px`}>{c.name}</span>
+                    </button>
+                  </li>
+                );
+              })
+            }
+          </ol>
+        </div>
+      </div>
+
+      <div class="grid gap-4 border-t border-line px-5 py-4 md:grid-cols-[1fr_auto] md:px-7">
+        <div id="model-detail" aria-live="polite" data-model-detail class="min-h-[4.5rem]">
+          <p class="font-mono text-xs text-fg-faint" data-model-detail-meta>Hover, focus or tap a card, or play the flow.</p>
+          <p class="mt-1 text-[0.95rem] leading-relaxed text-fg" data-model-detail-text>
+            {m.summary ?? `${m.steps.length} steps, ${m.cards.length} cards.`}
+          </p>
+        </div>
+        <ol class="flex flex-wrap items-start gap-2 md:max-w-[22rem] md:justify-end" aria-label="Steps">
+          {
+            m.steps.map((s, i) => (
+              <li>
+                <button type="button" class="step" data-step={i} aria-pressed="false">
+                  <span class="text-fg-faint">{String(i + 1).padStart(2, '0')}</span> {s.title}
+                </button>
+              </li>
+            ))
+          }
+        </ol>
+      </div>
+    </div>
+    <script type="application/json" data-model-json set:html={safeJson({ cards: m.cards.map(({ id, kind, name, source, note }) => ({ id, kind, name, source, note })), steps: m.steps, root: `${m.repo}/blob/${m.branch}/${m.sourceRoot}` })} />
+  </div>
+</section>
+
+<style>
+  .board-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-line-strong) transparent;
+    mask-image: linear-gradient(90deg, transparent, #000 1.25rem, #000 calc(100% - 1.25rem), transparent);
+  }
+  .board {
+    margin-inline: auto;
+  }
+  .lane + .lane {
+    border-top: 1px dashed var(--color-line);
+  }
+  .lane[data-lane='chore'],
+  .lane[data-lane='member'] {
+    background: color-mix(in oklab, var(--color-event) 3%, transparent);
+  }
+  .edge {
+    fill: none;
+    stroke: var(--color-line-strong);
+    stroke-width: 1.25;
+    color: var(--color-line-strong);
+    transition: stroke 300ms ease, opacity 300ms ease;
+  }
+  .card {
+    --c: var(--color-fg-muted);
+    border-radius: 0.6rem;
+    border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
+    background: color-mix(in oklab, var(--c) 12%, var(--color-ink-900));
+    color: color-mix(in oklab, var(--c) 80%, var(--color-fg));
+    padding: 0.55rem 0.7rem;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      opacity 300ms ease,
+      transform 300ms var(--ease-out-expo),
+      box-shadow 300ms ease,
+      border-color 300ms ease;
+  }
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0.5rem;
+    right: 0.6rem;
+    width: 0.6rem;
+    height: 3px;
+    border-radius: 2px;
+    background: var(--c);
+  }
+  .card-command { --c: var(--color-command); }
+  .card-event { --c: var(--color-event); }
+  .card-view { --c: var(--color-view); }
+  .card-ui {
+    --c: var(--color-fg-muted);
+    background: color-mix(in oklab, var(--color-fg) 4%, var(--color-ink-900));
+    border-style: dashed;
+  }
+  [data-focus] .card:not([data-lit]) {
+    opacity: 0.28;
+  }
+  [data-focus] .edge:not([data-lit]) {
+    opacity: 0.25;
+  }
+  .card[data-lit] {
+    border-color: var(--c);
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--c) 35%, transparent), 0 12px 32px -12px color-mix(in oklab, var(--c) 60%, transparent);
+    transform: translateY(-2px);
+  }
+  .edge[data-lit] {
+    stroke: var(--color-event);
+    color: var(--color-event);
+  }
+  :global(.js-motion) .edge[data-lit] {
+    stroke-dasharray: 5 5;
+    animation: flow 900ms linear infinite;
+  }
+  @keyframes flow {
+    to {
+      stroke-dashoffset: -20;
+    }
+  }
+  .step {
+    border-radius: 999px;
+    border: 1px solid var(--color-line);
+    padding: 0.25rem 0.7rem;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    color: var(--color-fg-muted);
+    cursor: pointer;
+    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
+  }
+  .step:hover {
+    color: var(--color-fg);
+    border-color: var(--color-line-strong);
+  }
+  .step[aria-pressed='true'] {
+    color: var(--color-fg);
+    border-color: color-mix(in oklab, var(--color-event) 55%, transparent);
+    background: color-mix(in oklab, var(--color-event) 10%, transparent);
+  }
+</style>
+
+<script>
+  import { initEventModel } from '../scripts/event-model';
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(initEventModel);
+</script>

package/site/components/Footer.astro

@@ -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.
+
+import type { CastView } from '../profile/CastView';
+import { castDirectoryUrl, verificationUrl } from '../../badges/constants';
+import CratisMark from './CratisMark.astro';
+interface Props {
+  cast: CastView;
+}
+const { cast } = Astro.props;
+const { config, person, tier } = cast;
+const year = new Date().getFullYear();
+const castUrl = tier.tier ? verificationUrl(person.handle) : castDirectoryUrl;
+---
+
+<footer class="border-t border-line print:hidden">
+  <div class="container-x flex flex-col gap-6 py-10 text-sm text-fg-muted md:flex-row md:items-center md:justify-between">
+    <a href={castUrl} class="cast-link group inline-flex items-center gap-3 rounded-lg" rel={cast.host.rel}>
+      <span class="grid size-9 place-items-center rounded-xl border border-line bg-ink-900 text-fg transition-colors group-hover:border-line-strong">
+        <CratisMark class="size-5" />
+      </span>
+      <span class="leading-tight">
+        <span class="block text-[0.9375rem] font-semibold text-fg">Part of the <span class="serif">Cratis Cast</span></span>
+        <span class="block font-mono text-[0.6875rem] text-fg-faint">The people behind the play · {castDirectoryUrl.replace('https://', '')}</span>
+      </span>
+    </a>
+    <p class="font-mono text-xs">
+      © {year} {person.name} · built with <a href="https://github.com/Cratis/Cast" class="underline decoration-line-strong hover:text-fg" rel={cast.host.rel}>Cast</a>
+      {config.site.source && <> · <a href={config.site.source} class="underline decoration-line-strong hover:text-fg" rel={cast.host.rel}>source</a></>}
+    </p>
+  </div>
+</footer>

package/site/components/Hero.astro

@@ -0,0 +1,211 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { CastView } from '../profile/CastView';
+import Inline from './Inline.astro';
+import CastBadge from './CastBadge.astro';
+import type { BoardLabels } from '../scripts/event-board';
+
+interface Props {
+  cast: CastView;
+}
+const { cast } = Astro.props;
+const { person, careerEvents, firstName, githubUrl, tier, sections, liveRepos } = cast;
+const position = careerEvents.length;
+const hasContact = sections.some((section) => section.id === 'contact');
+
+// Board cards use real names only: event types from the career stream, the merged-PR
+// events from the live feed, and read models this site actually projects.
+const commandFor: Record<string, string> = {
+  StudiesStarted: 'StartStudies', VolunteerTeamJoined: 'JoinVolunteerTeam', PartTimeRoleStarted: 'StartPartTimeRole',
+  ContractStarted: 'StartContract', DegreeCompleted: 'CompleteDegree', EmploymentStarted: 'StartEmployment',
+  CertificationsEarned: 'EarnCertifications', CompanyCoFounded: 'FoundCompany', SystemDeployed: 'DeploySystem',
+  TalkGiven: 'GiveTalk', LeadershipAssigned: 'AssignLeadership', ToolReleased: 'ReleaseTool',
+};
+const careerFlows = [...new Set(careerEvents.map((e) => e.type))]
+  .filter((t) => commandFor[t])
+  .map((t): [string, string] => [commandFor[t]!, t]);
+const labels: BoardLabels = {
+  // Merged PRs are by far the most common real event, so they show up most.
+  flows: [...careerFlows, ...Array.from({ length: Math.ceil(careerFlows.length / 2) }, (): [string, string] => ['MergePullRequest', 'PullRequestMerged'])],
+  views: [`${firstName}.Now`, 'CareerReplay', 'Contributions', ...liveRepos],
+};
+---
+
+<section id="top" data-hero class="relative isolate flex min-h-[min(100svh,64rem)] items-center overflow-hidden pt-[var(--nav-h)]">
+  <div class="pointer-events-none absolute inset-0 -z-10" aria-hidden="true">
+    <div class="spotlight absolute inset-0" data-spotlight></div>
+    <canvas data-board data-labels={JSON.stringify(labels)} class="board absolute inset-0 h-full w-full"></canvas>
+    <div class="absolute inset-0 bg-[radial-gradient(60rem_40rem_at_15%_45%,color-mix(in_srgb,var(--color-ink-950)_92%,transparent),transparent_70%)]"></div>
+    <div class="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-ink-950"></div>
+    <div class="absolute -top-40 left-1/2 h-80 w-[60rem] -translate-x-1/2 rounded-full bg-accent/10 blur-3xl"></div>
+  </div>
+
+  <div class="container-x relative py-20 md:py-28">
+    <div class="hero-in mb-8 flex flex-wrap items-center gap-3" style="--d:0ms">
+    <p class="inline-flex items-center gap-3 rounded-full border border-line bg-ink-900/70 py-1.5 pr-4 pl-2 font-mono text-xs text-fg-muted backdrop-blur">
+      <span class="inline-flex items-center gap-1.5 rounded-full bg-view/10 px-2 py-0.5 text-view">
+        <span class="size-1.5 animate-pulse-dot rounded-full bg-view"></span><span data-event-status>career</span>
+      </span>
+      stream <span class="text-fg">{person.handle}</span> · <span data-public-event>position <span class="text-event">{position}</span></span>
+    </p>
+    <CastBadge tier={tier.tier} handle={person.handle} claim={!cast.host.verified} />
+    </div>
+
+    <h1>
+      <span class="hero-in mb-5 block font-sans text-lg font-medium tracking-normal text-fg-muted md:text-xl" style="--d:60ms">
+        <span transition:name="person-name" class="inline-block">{person.name}</span> <span class="text-fg-faint">—</span> <span class="hidden sm:inline">{person.title}</span><span class="sm:hidden">{person.titleShort ?? person.title}</span>
+      </span>
+      <span
+        class="headline hero-in block max-w-[13ch] text-[clamp(2.85rem,7.4vw,6.5rem)] leading-[0.95] font-[800] tracking-[-0.04em]"
+        style="--d:120ms"><Inline text={person.tagline} emphasisClass='serif text-shine' host={cast.host} /></span>
+    </h1>
+
+    <p class="hero-in mt-8 max-w-[58ch] text-lg leading-relaxed text-fg-muted md:text-xl" style="--d:200ms"><Inline text={person.intro} host={cast.host} /></p>
+
+    <div class="hero-in mt-10 flex flex-wrap items-center gap-3" style="--d:280ms">
+      <a href={cast.href('cv')} class="btn btn-primary" data-magnetic>
+        View CV
+        <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+      </a>
+      <a href={githubUrl} class="btn" rel={cast.host.verified ? cast.host.rel : 'me noopener'}>
+        <svg viewBox="0 0 16 16" class="size-4" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+        GitHub
+      </a>
+      {hasContact && <a href="#contact" class="btn">Contact</a>}
+      <span class="ml-1 hidden font-mono text-xs text-fg-faint lg:inline">
+        or press <kbd class="kbd" data-mod-key>⌘</kbd> <kbd class="kbd">K</kbd> · <kbd class="kbd">`</kbd> for a terminal
+      </span>
+    </div>
+
+    <dl class="hero-in mt-16 grid max-w-xl grid-cols-3 gap-6 border-t border-line pt-6 font-mono text-xs" style="--d:360ms">
+      <div>
+        <dt class="note note-command mb-2">Command</dt>
+        <dd class="text-fg-muted">intent to change</dd>
+      </div>
+      <div>
+        <dt class="note mb-2">Event</dt>
+        <dd class="text-fg-muted">a fact that happened</dd>
+      </div>
+      <div>
+        <dt class="note note-view mb-2">Read model</dt>
+        <dd class="text-fg-muted">a projection of facts</dd>
+      </div>
+    </dl>
+  </div>
+</section>
+
+<style>
+  .board {
+    opacity: 0;
+    transition: opacity 1.6s ease;
+    mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.06) 0%, rgb(0 0 0 / 0.14) 38%, rgb(0 0 0 / 0.85) 58%, #000 72%);
+  }
+  [data-board-ready] .board {
+    opacity: 1;
+  }
+  @media (max-width: 767px) {
+    [data-board-ready] .board {
+      opacity: 0.45;
+    }
+  }
+  .spotlight {
+    --sx: 70%;
+    --sy: 40%;
+    background: radial-gradient(34rem circle at var(--sx) var(--sy), color-mix(in oklab, var(--color-accent) 10%, transparent), transparent 60%);
+    opacity: 0;
+    transition: opacity 600ms ease;
+  }
+  [data-hero]:hover .spotlight {
+    opacity: 1;
+  }
+  [data-magnetic] {
+    transform: translate(var(--tx, 0), var(--ty, 0));
+    transition: transform 380ms var(--ease-spring), background-color 180ms ease;
+  }
+  .headline :global(.serif) {
+    font-weight: 520;
+    letter-spacing: -0.025em;
+    padding-right: 0.06em;
+  }
+  .headline :global(.text-shine) {
+    background: linear-gradient(100deg, var(--color-accent-soft) 0%, var(--color-accent) 35%, #2dd4bf 70%, var(--color-accent-soft) 100%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-shadow: none;
+  }
+  :global(html[data-theme='light']) .headline :global(.text-shine) {
+    background-image: linear-gradient(100deg, var(--color-accent) 0%, var(--color-accent-soft) 45%, #0f766e 80%, var(--color-accent) 100%);
+  }
+  :global(.js-motion) .headline :global(.text-shine) {
+    animation: shine 9s ease-in-out infinite alternate;
+  }
+  @keyframes shine {
+    to {
+      background-position: 100% 0;
+    }
+  }
+  :global(.js-motion) .hero-in {
+    animation: hero-in 1.1s var(--ease-out-expo) both;
+    animation-delay: var(--d, 0ms);
+  }
+  @keyframes hero-in {
+    from {
+      opacity: 0;
+      transform: translateY(16px);
+      filter: blur(6px);
+    }
+  }
+</style>
+
+<script>
+  import '../scripts/live';
+  import { mountEventBoard, type BoardLabels } from '../scripts/event-board';
+  import { onPageLoad } from '../lib/lifecycle';
+  import { motionReduced } from '../lib/motion';
+  onPageLoad(() => {
+    const host = document.querySelector<HTMLElement>('[data-hero]');
+    const canvas = host?.querySelector<HTMLCanvasElement>('[data-board]');
+    if (!host || !canvas) return;
+    let labels: BoardLabels | undefined;
+    try {
+      labels = JSON.parse(canvas.dataset['labels'] ?? '') as BoardLabels;
+    } catch {
+      labels = undefined;
+    }
+    const stopBoard = mountEventBoard(canvas, host, labels);
+
+    // Pointer spotlight and a magnetic primary CTA (fine pointers, full motion only).
+    const spot = host.querySelector<HTMLElement>('[data-spotlight]');
+    const cta = host.querySelector<HTMLElement>('[data-magnetic]');
+    const fine = window.matchMedia('(pointer: fine)');
+    const onMove = (e: PointerEvent) => {
+      if (spot) {
+        const r = host.getBoundingClientRect();
+        spot.style.setProperty('--sx', `${e.clientX - r.left}px`);
+        spot.style.setProperty('--sy', `${e.clientY - r.top}px`);
+      }
+      if (!cta || !fine.matches || motionReduced()) return;
+      const b = cta.getBoundingClientRect();
+      const dx = e.clientX - (b.left + b.width / 2);
+      const dy = e.clientY - (b.top + b.height / 2);
+      const near = Math.hypot(dx, dy) < 110;
+      cta.style.setProperty('--tx', near ? `${dx * 0.18}px` : '0px');
+      cta.style.setProperty('--ty', near ? `${dy * 0.28}px` : '0px');
+    };
+    const reset = () => {
+      cta?.style.setProperty('--tx', '0px');
+      cta?.style.setProperty('--ty', '0px');
+    };
+    host.addEventListener('pointermove', onMove, { passive: true });
+    host.addEventListener('pointerleave', reset);
+    return () => {
+      stopBoard();
+      host.removeEventListener('pointermove', onMove);
+      host.removeEventListener('pointerleave', reset);
+    };
+  });
+</script>

package/site/components/Inline.astro

@@ -0,0 +1,45 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Inline markup from cast.yaml, rendered as elements with escaped text. Never set:html.
+import { parseInline, type InlineToken } from '../lib/inline';
+import type { CastHost } from '../profile/CastHost';
+
+interface Props {
+  text?: string;
+  tokens?: InlineToken[];
+  /** Class of `*emphasis*`, the italic serif accent by default. */
+  emphasisClass?: string;
+  /** Where the text is rendered; decides the rel of links and how relative links resolve. */
+  host?: CastHost;
+}
+const { text = '', tokens = parseInline(text), emphasisClass = 'serif', host } = Astro.props;
+const linkClass = 'text-fg underline decoration-line-strong hover:decoration-fg';
+
+const target = (href: string): string => {
+  if (!host?.linkOrigin || !href.startsWith('/')) return href;
+  try {
+    return new URL(href, host.linkOrigin).toString();
+  } catch {
+    return '#';
+  }
+};
+const relFor = (href: string): string | undefined => (/^https?:/i.test(href) ? (host?.rel ?? 'noopener') : undefined);
+---
+
+{
+  tokens.map((token) =>
+    token.kind === 'text' ? (
+      token.text
+    ) : token.kind === 'code' ? (
+      <code class="inline-code">{token.text}</code>
+    ) : token.kind === 'strong' ? (
+      <strong class="font-semibold text-fg"><Astro.self tokens={token.children} emphasisClass={emphasisClass} host={host} /></strong>
+    ) : token.kind === 'em' ? (
+      <em class={emphasisClass}><Astro.self tokens={token.children} emphasisClass={emphasisClass} host={host} /></em>
+    ) : (
+      <a href={target(token.href)} class={linkClass} rel={relFor(target(token.href))}><Astro.self tokens={token.children} emphasisClass={emphasisClass} host={host} /></a>
+    ),
+  )
+}

package/site/components/Monogram.astro

@@ -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.
+
+import type { CastView } from '../profile/CastView';
+// The person's monogram: their initial on their accent, the same shape as the favicon.
+
+interface Props {
+  cast: CastView;
+  class?: string;
+}
+const { class: className = 'size-7' } = Astro.props;
+const { cast } = Astro.props;
+const { person } = cast;
+const initial = (person.name.trim()[0] ?? person.handle[0] ?? 'C').toUpperCase();
+---
+
+<svg transition:name="monogram" viewBox="0 0 32 32" class={className} aria-hidden="true">
+  <defs>
+    <linearGradient id="monogram-sheen" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="0" stop-color="#fff" stop-opacity=".22"></stop>
+      <stop offset=".6" stop-color="#fff" stop-opacity="0"></stop>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="28" height="28" rx="7" fill="var(--color-accent)"></rect>
+  <rect x="2" y="2" width="28" height="28" rx="7" fill="url(#monogram-sheen)"></rect>
+  <text x="16" y="22.2" text-anchor="middle" font-family="var(--font-serif)" font-style="italic" font-weight="600" font-size="19" fill="var(--color-accent-ink)">{initial}</text>
+</svg>