@cratis/cast 0.0.0-stage → 0.1.0

package/site/components/CareerReplay.astro

@@ -0,0 +1,412 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { careerEvents, firstName } from '../data';
+import { renderInline } from '../lib/inline';
+
+interface Props {
+  index: string;
+  title?: string;
+  label?: string;
+  intro?: string;
+}
+const { index, title = 'Career, replayed from the *event log.*', label = 'Event stream', intro } = Astro.props;
+import { project, formatMonth, yearsBetween, alsoText } from '../lib/career';
+import SectionHeader from './SectionHeader.astro';
+
+const total = careerEvents.length;
+const final = project(careerEvents);
+const pad = (n: number) => String(n).padStart(2, '0');
+const years = yearsBetween(final.shippingSince, final.clock);
+const icon = {
+  prev: 'M10 3 5 8l5 5',
+  next: 'M6 3l5 5-5 5',
+};
+---
+
+<section id="career" class="relative py-24 md:py-36" aria-labelledby="career-title" data-replay data-total={total}>
+  <div class="container-x">
+    <SectionHeader index={index} label={label} title={title} id="career-title">
+      <p class="mt-6 max-w-[60ch] text-lg text-fg-muted" data-reveal>
+        {intro ? <Fragment set:html={renderInline(intro)} /> : <>Every role, skill and organization below is a projection, computed by folding these {total} events in order.
+        Scroll, scrub or press play to watch the state rebuild itself.</>}
+      </p>
+    </SectionHeader>
+
+    <div class="grid grid-cols-1 gap-8 lg:grid-cols-12 lg:gap-12">
+      <!-- Projection -->
+      <div class="lg:order-2 lg:col-span-5">
+        <div class="lg:sticky lg:top-[calc(var(--nav-h)+1.5rem)]">
+          <div class="panel flex flex-col overflow-hidden lg:max-h-[calc(100svh-var(--nav-h)-5rem)]" data-reveal>
+            <div class="flex items-center justify-between gap-3 border-b border-line px-5 py-3.5">
+              <p class="font-mono text-sm">
+                <span class="text-fg-faint">Projection:</span> <span class="text-view">{firstName}.Career</span>
+              </p>
+              <p class="font-mono text-xs text-fg-muted">
+                position <span class="text-fg tabular-nums" data-out="position">{pad(total)}</span><span class="text-fg-faint"> / {pad(total)}</span>
+              </p>
+            </div>
+            <div class="h-px bg-line" aria-hidden="true">
+              <div class="h-px origin-left bg-gradient-to-r from-event/40 to-event transition-transform duration-500 ease-[var(--ease-out-expo)]" data-out="progress" style="transform:scaleX(1)"></div>
+            </div>
+
+            <div class="flex min-h-0 flex-1 flex-col gap-6 p-5 md:p-6">
+              <div>
+                <p class="mb-2 font-mono text-[0.6875rem] tracking-wider text-fg-faint uppercase">Last applied</p>
+                <p class="flex flex-wrap items-baseline gap-x-2 font-mono text-sm">
+                  <span class="text-fg-faint" data-out="lastSeq">#{pad(total)}</span>
+                  <span class="text-event" data-out="lastType">{final.lastEvent?.type}</span>
+                  <span class="text-fg-faint" data-out="lastDate">{final.lastEvent && formatMonth(final.lastEvent.date)}</span>
+                </p>
+              </div>
+
+              <div>
+                <p class="mb-2 font-mono text-[0.6875rem] tracking-wider text-fg-faint uppercase">Current role</p>
+                <p class="font-display text-2xl leading-tight font-[620] tracking-[-0.02em]" data-out="role">{final.currentRole?.title ?? '—'}</p>
+                <p class="mt-1 text-sm text-fg-muted" data-out="roleOrg">
+                  {final.currentRole ? `${final.currentRole.org} · since ${formatMonth(final.currentRole.from)}` : 'No role yet'}
+                </p>
+                <p class="mt-1 text-sm text-fg-faint" data-out="roleAlso">{alsoText(final)}</p>
+              </div>
+
+              <div class="grid grid-cols-3 gap-px overflow-hidden rounded-xl border border-line bg-line">
+                <div class="bg-ink-900 p-3.5">
+                  <p class="font-display text-2xl font-[650] tabular-nums" data-out="years">{years.toFixed(1)}</p>
+                  <p class="mt-0.5 text-xs text-fg-muted">years in the field</p>
+                </div>
+                <div class="bg-ink-900 p-3.5">
+                  <p class="font-display text-2xl font-[650] tabular-nums text-command" data-out="affCount">{final.affiliations.length}</p>
+                  <p class="mt-0.5 text-xs text-fg-muted">organizations</p>
+                </div>
+                <div class="bg-ink-900 p-3.5">
+                  <p class="font-display text-2xl font-[650] tabular-nums text-view" data-out="skillCount">{final.skills.length}</p>
+                  <p class="mt-0.5 text-xs text-fg-muted">skills</p>
+                </div>
+              </div>
+
+              <div>
+                <p class="mb-2.5 font-mono text-[0.6875rem] tracking-wider text-fg-faint uppercase">Organizations</p>
+                <ul class="flex flex-wrap gap-1.5" data-out="affiliations">
+                  {final.affiliations.map((a) => <li class="chip chip-org" data-key={a}>{a}</li>)}
+                </ul>
+              </div>
+
+              <div class="flex min-h-0 flex-1 flex-col">
+                <p class="mb-2.5 font-mono text-[0.6875rem] tracking-wider text-fg-faint uppercase">Skill cloud</p>
+                <ul class="skills flex max-h-[13.5rem] min-h-[4rem] flex-wrap content-start gap-1.5 overflow-y-auto pr-1 lg:max-h-none lg:flex-1" data-out="skills">
+                  {final.skills.map((s) => <li class="chip" data-key={s}>{s}</li>)}
+                </ul>
+              </div>
+            </div>
+
+            <!-- Controls -->
+            <div class="flex items-center gap-2 border-t border-line bg-ink-950/40 px-4 py-3" role="group" aria-label="Replay controls" data-controls hidden>
+              <button type="button" class="ctl" data-action="prev" aria-label="Step back one event">
+                <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d={icon.prev} stroke-linecap="round" stroke-linejoin="round"></path></svg>
+              </button>
+              <button type="button" class="ctl ctl-play" data-action="play" aria-label="Play replay" aria-pressed="false">
+                <svg viewBox="0 0 16 16" class="icon-play size-4" fill="currentColor" aria-hidden="true"><path d="M4.5 2.8v10.4a.6.6 0 0 0 .9.5l8.2-5.2a.6.6 0 0 0 0-1L5.4 2.3a.6.6 0 0 0-.9.5Z"></path></svg>
+                <svg viewBox="0 0 16 16" class="icon-pause size-4" fill="currentColor" aria-hidden="true"><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>
+              </button>
+              <button type="button" class="ctl" data-action="next" aria-label="Step forward one event">
+                <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d={icon.next} stroke-linecap="round" stroke-linejoin="round"></path></svg>
+              </button>
+              <label class="ml-2 flex min-w-0 flex-1 items-center">
+                <span class="sr-only">Stream position</span>
+                <input type="range" min="0" max={total} step="1" value={total} class="scrubber w-full" data-scrubber />
+              </label>
+              <span class="w-12 text-right font-mono text-xs text-fg-muted tabular-nums" data-out="positionShort" aria-hidden="true">{total}/{total}</span>
+            </div>
+          </div>
+          <p class="mt-3 hidden font-mono text-xs text-fg-faint lg:block" data-controls-hint hidden>
+            Tip: focus the replay and use <kbd class="kbd">←</kbd> <kbd class="kbd">→</kbd> to step.
+          </p>
+        </div>
+      </div>
+
+      <!-- Stream -->
+      <div class="lg:order-1 lg:col-span-7">
+        <!-- Compact HUD keeps the projection visible on small screens -->
+        <div class="hud sticky top-[calc(var(--nav-h)+0.5rem)] z-20 mb-6 lg:hidden" data-hud hidden>
+          <div class="panel flex items-center gap-2 overflow-hidden !bg-ink-900/95 px-3 py-2.5 shadow-2xl shadow-black/60">
+            <button type="button" class="ctl" data-action="prev" aria-label="Step back one event">
+              <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d={icon.prev} stroke-linecap="round" stroke-linejoin="round"></path></svg>
+            </button>
+            <button type="button" class="ctl ctl-play" data-action="play" aria-label="Play replay" aria-pressed="false">
+              <svg viewBox="0 0 16 16" class="icon-play size-4" fill="currentColor" aria-hidden="true"><path d="M4.5 2.8v10.4a.6.6 0 0 0 .9.5l8.2-5.2a.6.6 0 0 0 0-1L5.4 2.3a.6.6 0 0 0-.9.5Z"></path></svg>
+              <svg viewBox="0 0 16 16" class="icon-pause size-4" fill="currentColor" aria-hidden="true"><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>
+            </button>
+            <button type="button" class="ctl" data-action="next" aria-label="Step forward one event">
+              <svg viewBox="0 0 16 16" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d={icon.next} stroke-linecap="round" stroke-linejoin="round"></path></svg>
+            </button>
+            <div class="ml-1 min-w-0 flex-1 font-mono text-[0.6875rem] leading-4">
+              <p class="truncate"><span class="text-fg-faint" data-out="hudPos"></span> <span class="text-event" data-out="hudType"></span></p>
+              <p class="truncate text-fg-muted" data-out="hudRole"></p>
+            </div>
+            <div class="absolute inset-x-0 bottom-0 h-0.5 bg-line" aria-hidden="true">
+              <div class="h-full origin-left bg-event transition-transform duration-500" data-out="hudProgress"></div>
+            </div>
+          </div>
+        </div>
+
+        <ol class="stream relative" data-stream aria-label="Career events">
+          {
+            careerEvents.map((e) => (
+              <li class="event relative pb-3 pl-9 md:pl-12" data-seq={e.seq} data-state="applied">
+                <span class="rail" aria-hidden="true" />
+                <span class="node" aria-hidden="true" />
+                <article class="card glow relative rounded-2xl border border-transparent p-4 md:p-5">
+                  <h3 class="flex flex-wrap items-baseline gap-x-3 gap-y-1 font-mono text-xs">
+                    <button type="button" class="jump text-left" data-jump={e.seq} aria-label={`Replay to event ${e.seq}: ${e.type}, ${e.title}`}>
+                      <span class="text-fg-faint">#{pad(e.seq)}</span>
+                      <span class="ml-2 font-medium text-event">{e.type}</span>
+                    </button>
+                    <span class="text-fg-faint">
+                      <time datetime={e.date}>{formatMonth(e.date)}</time>
+                      {e.endDate && (
+                        <>
+                          {' – '}
+                          <time datetime={e.endDate}>{formatMonth(e.endDate)}</time>
+                        </>
+                      )}
+                    </span>
+                  </h3>
+                  <p class="mt-2.5 font-display text-xl leading-snug font-[620] tracking-[-0.015em] text-fg md:text-[1.4rem]">{e.title}</p>
+                  {e.org && (
+                    <p class="mt-1 text-sm text-fg-muted">
+                      {e.orgUrl ? (
+                        <a href={e.orgUrl} class="underline decoration-line-strong hover:text-fg hover:decoration-event" rel="noopener">
+                          {e.org}
+                        </a>
+                      ) : (
+                        e.org
+                      )}
+                      {e.location && <span class="text-fg-faint"> · {e.location}</span>}
+                    </p>
+                  )}
+                  <p class="mt-3 text-[0.95rem] leading-relaxed text-fg-muted" set:html={renderInline(e.summary)} />
+                  {e.skills && (
+                    <ul class="mt-4 flex flex-wrap gap-1.5" aria-label="Skills">
+                      {e.skills.map((s) => (
+                        <li class="rounded-md border border-line px-2 py-0.5 font-mono text-[0.6875rem] text-fg-muted">+ {s}</li>
+                      ))}
+                    </ul>
+                  )}
+                </article>
+              </li>
+            ))
+          }
+        </ol>
+      </div>
+    </div>
+  </div>
+
+  <p class="sr-only" aria-live="polite" aria-atomic="true" data-live></p>
+</section>
+
+<style>
+  .rail {
+    position: absolute;
+    left: 0.6875rem;
+    top: 0;
+    bottom: 0;
+    width: 1px;
+    background: var(--color-line-strong);
+  }
+  .event:first-child .rail {
+    top: 1.75rem;
+  }
+  .event:last-child .rail {
+    bottom: auto;
+    height: 1.75rem;
+  }
+  @media (min-width: 768px) {
+    .rail {
+      left: 0.9375rem;
+    }
+  }
+  .node {
+    position: absolute;
+    left: calc(0.6875rem - 5px);
+    top: 1.5rem;
+    width: 11px;
+    height: 11px;
+    border-radius: 3px;
+    background: var(--color-ink-950);
+    border: 1px solid var(--color-line-strong);
+    transition: all 400ms var(--ease-out-expo);
+  }
+  @media (min-width: 768px) {
+    .node {
+      left: calc(0.9375rem - 5px);
+      top: 1.75rem;
+    }
+  }
+  .event[data-state='applied'] .node,
+  .event[data-state='current'] .node {
+    background: var(--color-event);
+    border-color: var(--color-event);
+  }
+  .event[data-state='current'] .node {
+    box-shadow: 0 0 0 4px rgb(242 153 74 / 0.18), 0 0 18px rgb(242 153 74 / 0.7);
+    transform: scale(1.15);
+  }
+  .event[data-state='applied'] .rail,
+  .event[data-state='current'] .rail {
+    background: linear-gradient(to bottom, rgb(242 153 74 / 0.55), rgb(242 153 74 / 0.25));
+  }
+  .event[data-state='current'] .rail {
+    background: linear-gradient(to bottom, rgb(242 153 74 / 0.55), var(--color-line-strong) 60%);
+  }
+  .card {
+    transition:
+      opacity 500ms var(--ease-out-expo),
+      background-color 400ms ease,
+      border-color 400ms ease;
+  }
+  .event[data-state='future'] .card {
+    opacity: 0.6;
+  }
+  .event[data-state='future'] .card:hover {
+    opacity: 0.85;
+  }
+  .event[data-state='current'] .card {
+    background: linear-gradient(180deg, rgb(242 153 74 / 0.07), rgb(242 153 74 / 0.015));
+    border-color: rgb(242 153 74 / 0.28);
+  }
+  :global(.js) .event .card {
+    cursor: pointer;
+  }
+  .jump::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 1rem;
+  }
+  .jump:focus-visible {
+    outline: none;
+  }
+  .jump:focus-visible::after {
+    outline: 2px solid var(--color-command);
+    outline-offset: 2px;
+  }
+  .card :global(a) {
+    position: relative;
+    z-index: 1;
+  }
+
+  .skills {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--color-fg) 15%, transparent) transparent;
+  }
+  :global(.chip) {
+    display: inline-flex;
+    align-items: center;
+    border-radius: 0.45rem;
+    border: 1px solid var(--color-line);
+    background: color-mix(in srgb, var(--color-fg) 2%, transparent);
+    padding: 0.2rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1.1rem;
+    color: var(--color-fg-muted);
+    transition:
+      background-color 1.4s ease,
+      border-color 1.4s ease,
+      color 1.4s ease;
+  }
+  :global(.chip-org) {
+    color: var(--color-command-soft);
+    border-color: rgb(91 134 242 / 0.22);
+    background: rgb(91 134 242 / 0.05);
+  }
+  :global(.chip.is-new) {
+    animation: var(--animate-pop-in);
+    color: #fff;
+    border-color: rgb(242 153 74 / 0.6);
+    background: rgb(242 153 74 / 0.18);
+    transition: none;
+  }
+
+  .ctl {
+    display: inline-grid;
+    place-items: center;
+    width: 2.25rem;
+    height: 2.25rem;
+    flex-shrink: 0;
+    border-radius: 0.6rem;
+    border: 1px solid var(--color-line);
+    color: var(--color-fg-muted);
+    transition: all 160ms ease;
+    cursor: pointer;
+  }
+  .ctl:hover {
+    color: var(--color-fg);
+    border-color: var(--color-line-strong);
+    background: color-mix(in srgb, var(--color-fg) 5%, transparent);
+  }
+  .ctl-play {
+    background: var(--color-event);
+    border-color: transparent;
+    color: #1a0d03;
+  }
+  .ctl-play:hover {
+    background: var(--color-event-soft);
+    color: #1a0d03;
+  }
+  .ctl-play .icon-pause,
+  .ctl-play[aria-pressed='true'] .icon-play {
+    display: none;
+  }
+  .ctl-play[aria-pressed='true'] .icon-pause {
+    display: block;
+  }
+
+  .scrubber {
+    appearance: none;
+    height: 1.5rem;
+    background: transparent;
+    cursor: pointer;
+    --fill: 100%;
+  }
+  .scrubber::-webkit-slider-runnable-track {
+    height: 4px;
+    border-radius: 99px;
+    background: linear-gradient(to right, var(--color-event) var(--fill), color-mix(in srgb, var(--color-fg) 10%, transparent) var(--fill));
+  }
+  .scrubber::-moz-range-track {
+    height: 4px;
+    border-radius: 99px;
+    background: linear-gradient(to right, var(--color-event) var(--fill), color-mix(in srgb, var(--color-fg) 10%, transparent) var(--fill));
+  }
+  .scrubber::-webkit-slider-thumb {
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    margin-top: -5px;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 0 0 4px rgb(242 153 74 / 0.25);
+  }
+  .scrubber::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border: 0;
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0 0 0 4px rgb(242 153 74 / 0.25);
+  }
+  :global(html[data-theme='light']) .ctl-play,
+  :global(html[data-theme='light']) .ctl-play:hover {
+    color: #fff;
+  }
+</style>
+
+<script>
+  import { mountReplay } from '../scripts/replay';
+  import { onPageLoad } from '../lib/lifecycle';
+  onPageLoad(() => {
+    const root = document.querySelector<HTMLElement>('[data-replay]');
+    return root ? mountReplay(root) : undefined;
+  });
+</script>

package/site/components/CastBadge.astro

@@ -0,0 +1,132 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// The Cast badge. On a member's site it is a claim that links to the directory, which is the authority.
+import type { Tier } from '../../badges/Tier';
+import { tierStyles } from '../../badges/badgeSvg';
+import { verificationUrl } from '../../badges/constants';
+import CratisMark from './CratisMark.astro';
+
+interface Props {
+  tier: Tier | undefined;
+  handle: string;
+  size?: 'compact' | 'full';
+  class?: string;
+  /**
+   * True on a member's own site: the tier is what that site's build resolved, a claim. The directory, which
+   * Cratis builds from the registry and live GitHub data, passes false.
+   */
+  claim?: boolean;
+}
+const { tier, handle, size = 'full', class: className = '', claim = true } = Astro.props;
+const style = tier ? tierStyles[tier] : undefined;
+const href = verificationUrl(handle);
+---
+
+{
+  style && (
+    <a
+      href={href}
+      rel="noopener"
+      class:list={['cast-badge group', `cast-${tier}`, size === 'compact' ? 'is-compact' : 'is-full', className]}
+      style={`--tier-from:${style.from};--tier-to:${style.to};--tier-ink:${style.ink}`}
+      aria-label={claim ? `Cratis Cast ${style.label}, as claimed by this site. Verify at cast.cratis.io` : `Cratis Cast ${style.label}: ${style.description}. Verified by the Cast directory`}
+      title={claim ? `Cratis Cast ${style.label} · verify at cast.cratis.io` : `Cratis Cast ${style.label} · verified by the directory`}
+    >
+      <span class="cast-badge-left">
+        <CratisMark class="cast-badge-mark" />
+        <span>Cast</span>
+      </span>
+      <span class="cast-badge-tier">
+        {style.label}
+        {size === 'full' && claim && (
+          <svg viewBox="0 0 16 16" class="cast-badge-check" aria-hidden="true">
+            <path d="M5.5 10.5 10.5 5.5M6.5 5.5h4v4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        )}
+        {size === 'full' && !claim && (
+          <svg viewBox="0 0 16 16" class="cast-badge-check" aria-hidden="true">
+            <path d="M8 1.2 9.6 2.6l2.1-.2.6 2 1.8 1.1-.7 2 .7 2-1.8 1.1-.6 2-2.1-.2L8 14.8l-1.6-1.4-2.1.2-.6-2-1.8-1.1.7-2-.7-2 1.8-1.1.6-2 2.1.2Z" fill="currentColor" opacity=".9" />
+            <path d="m5.4 8.2 1.8 1.8 3.5-3.6" fill="none" stroke="var(--tier-from)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        )}
+      </span>
+    </a>
+  )
+}
+
+<style>
+  .cast-badge {
+    position: relative;
+    display: inline-flex;
+    align-items: stretch;
+    border-radius: 0.55rem;
+    overflow: hidden;
+    font-family: var(--font-sans);
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    box-shadow:
+      0 0 0 1px rgb(255 255 255 / 0.1) inset,
+      0 8px 24px -12px color-mix(in srgb, var(--tier-from) 70%, transparent);
+    transition: transform 200ms var(--ease-out-expo), box-shadow 200ms ease;
+    isolation: isolate;
+  }
+  .cast-badge::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent 55%);
+    pointer-events: none;
+  }
+  .cast-badge:hover {
+    transform: translateY(-1px);
+    box-shadow:
+      0 0 0 1px rgb(255 255 255 / 0.16) inset,
+      0 12px 30px -10px color-mix(in srgb, var(--tier-from) 85%, transparent);
+  }
+  .cast-badge-left {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding-inline: 0.5rem 0.45rem;
+    background: #0c0c15;
+    color: #f5f3f0;
+  }
+  .cast-badge-tier {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding-inline: 0.5rem;
+    background: linear-gradient(100deg, var(--tier-from), var(--tier-to));
+    color: var(--tier-ink);
+  }
+  .is-compact {
+    height: 1.375rem;
+    font-size: 0.6875rem;
+  }
+  .is-full {
+    height: 1.75rem;
+    font-size: 0.8125rem;
+  }
+  :global(.cast-badge-mark) {
+    width: 0.85rem;
+    height: 0.85rem;
+  }
+  .is-full :global(.cast-badge-mark) {
+    width: 1rem;
+    height: 1rem;
+  }
+  .cast-badge-check {
+    width: 0.95rem;
+    height: 0.95rem;
+    color: var(--tier-ink);
+  }
+  @media print {
+    .cast-badge {
+      box-shadow: none;
+      border: 1px solid #ccc;
+    }
+  }
+</style>

package/site/components/CommandPalette.astro

@@ -0,0 +1,116 @@
+---
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { config } from '../data';
+const host = new URL(config.site.url).host;
+---
+
+<dialog class="palette" data-palette aria-label="Command palette" transition:persist="palette">
+  <div class="sheet panel overflow-hidden">
+    <div class="flex items-center gap-3 border-b border-line px-4">
+      <svg viewBox="0 0 20 20" class="size-4 shrink-0 text-fg-faint" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
+        <circle cx="9" cy="9" r="5.5"></circle><path d="m13.2 13.2 3.3 3.3" stroke-linecap="round"></path>
+      </svg>
+      <input
+        type="text"
+        class="h-14 min-w-0 flex-1 bg-transparent text-base text-fg placeholder:text-fg-faint focus:outline-none"
+        placeholder="Type a command or search…"
+        role="combobox"
+        aria-expanded="true"
+        aria-controls="palette-list"
+        aria-autocomplete="list"
+        aria-label="Search commands"
+        autocomplete="off"
+        spellcheck="false"
+        data-palette-input
+      />
+      <button type="button" class="kbd cursor-pointer" data-palette-close aria-label="Close command palette">esc</button>
+    </div>
+    <ul id="palette-list" role="listbox" aria-label="Commands" class="max-h-[min(60vh,26rem)] overflow-y-auto p-2" data-palette-list></ul>
+    <div class="flex items-center justify-between gap-4 border-t border-line px-4 py-2.5 font-mono text-[0.6875rem] text-fg-faint">
+      <span class="flex items-center gap-1.5"><kbd class="kbd">↑</kbd><kbd class="kbd">↓</kbd> navigate <kbd class="kbd ml-2">↵</kbd> run</span>
+      <span class="hidden sm:inline">{host}</span>
+    </div>
+  </div>
+</dialog>
+
+<style>
+  .palette {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 12vh 1rem 1rem;
+    width: 100%;
+    max-width: none;
+    height: 100%;
+    max-height: none;
+    background: transparent;
+    color: inherit;
+    border: 0;
+  }
+  .palette:not([open]) {
+    display: none;
+  }
+  .palette::backdrop {
+    background: rgb(4 4 8 / 0.6);
+    backdrop-filter: blur(6px);
+  }
+  .sheet {
+    margin-inline: auto;
+    max-width: 38rem;
+    background: color-mix(in srgb, var(--color-ink-900) 92%, transparent);
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--color-fg) 6%, transparent),
+      0 50px 120px -20px rgb(0 0 0 / 0.8),
+      0 0 0 1px color-mix(in srgb, var(--color-fg) 4%, transparent);
+  }
+  :global(.js-motion) .palette[open] .sheet {
+    animation: sheet-in 260ms var(--ease-out-expo);
+  }
+  @keyframes sheet-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px) scale(0.98);
+    }
+  }
+  .palette :global([role='option']) {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 0.75rem;
+    border-radius: 0.65rem;
+    cursor: pointer;
+    font-size: 0.9375rem;
+    color: var(--color-fg-muted);
+  }
+  .palette :global([role='option'][aria-selected='true']) {
+    background: color-mix(in srgb, var(--color-fg) 6%, transparent);
+    color: var(--color-fg);
+  }
+  .palette :global(.grp) {
+    padding: 0.75rem 0.75rem 0.35rem;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--color-fg-faint);
+  }
+  .palette :global(.sw) {
+    width: 0.55rem;
+    height: 0.55rem;
+    border-radius: 2px;
+    flex-shrink: 0;
+  }
+  .palette :global(.hint) {
+    margin-left: auto;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    color: var(--color-fg-faint);
+  }
+</style>
+
+<script>
+  import { mountPalette } from '../scripts/palette';
+  mountPalette();
+</script>