`<amp-nav>` — Shared portfolio navigation

A single Web Component that renders the Ampersand Box Design portfolio top nav on every property — graphonomous.com, runefort.com, opensentience.org, and the rest of the [&] ecosystem.

Why a Web Component

One nav, multiple stacks:

Static HTML (graphonomous.com, deliberatic.com, ...)
Elixir/Phoenix (agentelic.com, specprompt.com, ...)
SvelteKit (bendscript.com, runefort.com)

A custom element works identically in all three. Shadow DOM isolates styling so host-site CSS can't break it and the nav can't leak styles into the host. No build step, no framework dependency, no iframe pathology.

Source of truth

ampersand-nav/
├── src/amp-nav.js        ← edit this
├── dist/amp-nav.js       ← built artifact (copied to each site)
├── sync-nav.sh           ← deployment script
└── README.md

To change the nav — add a category, swap the CTA, update a link — edit src/amp-nav.js and run ./sync-nav.sh. Every property picks it up.

Nav structure

Top-level categories:

Category	Items
Products	Code, Graphonomous, BendScript, RuneFort
Protocols	[&] Protocol, PULSE, PRISM, SCOPE, TRVM
Research	mega-menu — Protocols & Census / Proven Invariants (κ, π, ⊘, ⊆, ⊥, ⊕) / The Arithmetic Ladder / The Execution Substrate / The Eight Rungs
Academy	Workbench, Supervisor
Docs	mega-menu — Start here / The protocol stack / Engines & capabilities / Execution substrate
Company	c-u-l8er.link, Ampersand Box Design, TRAAVIIS, Talk to us
Compose	mega-menu — full ecosystem catalog across Cognitive Primitives / Agent Platform / Runtime

Academy houses the institutional loop — the systems that teach and prove cognition rather than perform it. Workbench (the skill workshop + 6-gate proof harness, deploying to workbench.opensentience.org) is the live entry; Supervisor (the teacher loop that turns an invariant into a curriculum) is spec-stage. This is the nav home for the "proof, not vibes" / dark-factory story.

Research is a five-column mega-menu. Protocols & Census links OpenSentience and the Periodic Table of Agent Invariants (opensentience.org/invariants.html) — the full 43-invariant census. Proven Invariants links the six invariants with real machine-checked / property-tested proof pages (opensentience.org/proofs/*.html): κ Cyclicity, π Phase Ordering, and the four Delegatic governance invariants ⊘ No-cycles, ⊆ Monotonic, ⊥ Deny-default, ⊕ Append-only. Only invariants with an actual proof are surfaced as proof pages; the periodic table shows the honest status of the rest. The Arithmetic Ladder is the box-and-box kernel entry point (package, conformance, playground), and The Eight Rungs lists the rungs as individual living-paper pages.

The Execution Substrate — the fourth Research column — lists WallRiderLang, TRVM, WRLM and TRAAVIIS in the order a world moves through them: WRLM proposes → WRL seals → TRVM reduces → TRAAVIIS admits. WRLM is the only statistical layer; the other three are total and deterministic. TRVM also appears under Protocols (it is the runtime spec, not only a research artifact) and TRAAVIIS also appears under Company; both highlight against their primary home, the same way Graphonomous resolves to Products despite also appearing under Compose.

Because the mega-menus now carry different column counts (Research five, Docs four, Compose three), each dropdown is sized from its own --cols value, set inline at render, and centered on the bar rather than on its trigger — a wide menu centered on an edge-adjacent trigger falls off-screen.

Invariant Arithmetic, which leads The Eight Rungs, is the algebra under the proofs (opensentience.org/invariant-arithmetic.html) — the 15 fast-check laws (L1–L15) that back the proof pages' gate verdicts.

Right-aligned CTA: "Talk to us →" (design-partner inquiries).

Q4 2026 swap: when the Dark Factory demo ships, change CTA in src/amp-nav.js to { label: "Run the factory →", href: "https://runefort.com/factory" }. Single line, then ./sync-nav.sh.

Taxonomy discipline

The nav deliberately shows only the five hero products from the Dark Factory strategy doc. The other portfolio properties (Agentelic, FleetPrompt, BendScript, Delegatic, Deliberatic, GeoFleetic, TickTickClock, SpecPrompt, AgenTroMatic) do not appear as top-level items. They stay reachable via deep links from spec pages and through the "Docs" surface, but the public nav never surfaces them. This enforces the "do not pitch 15 products" constraint.

Integration

Static HTML site

<head>
  ...
  <script type="module" src="/amp-nav.js"></script>
</head>
<body>
  <amp-nav property="graphonomous"></amp-nav>
  ...
</body>

SvelteKit site

<!-- src/app.html -->
<head>
  %sveltekit.head%
  <script type="module" src="/amp-nav.js"></script>
</head>

<!-- src/routes/+layout.svelte -->
<amp-nav property="runefort"></amp-nav>
<slot />   <!-- or {@render children()} in Svelte 5 -->

The file lives in static/amp-nav.js.

Elixir / Phoenix

Same as static HTML. The file is copied to both <site>/amp-nav.js and <site>/priv/static/amp-nav.js so it's served regardless of whether index.html is a static file or rendered through Phoenix.

Attributes

Attribute	Values	Default	Purpose
`property`	`code`, `graphonomous`, `runefort`, `opensentience`, `kappa`, `prism`, `pulse`, `ampersand`, `trvm`, `wrl`, `wrlm`, `traaviis`, `culler`, `docs`, `invariant_arithmetic`, `invariants`, `proof_kappa`, `proof_phase`, `proof_nocycles`, `proof_monotonic`, `proof_deny`, `proof_append`, plus non-hero property ids	`""`	"You are here" highlight. Non-hero ids are accepted but never highlight.
`theme`	`dark`, `light`, `auto`	`dark`	Switches the baseline color scheme.

Theming

Override any CSS custom property on the host element:

amp-nav {
  --amp-nav-accent: #4af5c6;
  --amp-nav-bg: rgba(8, 9, 12, 0.78);
  --amp-nav-fg: #e2e0db;
  --amp-nav-font: "JetBrains Mono", monospace;
  --amp-nav-height: 56px;
}

Full list: --amp-nav-bg, --amp-nav-fg, --amp-nav-muted, --amp-nav-accent, --amp-nav-border, --amp-nav-hover, --amp-nav-cta-bg, --amp-nav-cta-fg, --amp-nav-font, --amp-nav-height, --amp-nav-z.

Accessibility

Dropdowns open on click, not hover (works on touch, keyboard-friendly).
aria-haspopup, aria-expanded, aria-current set correctly.
ESC closes all menus and the mobile sheet.
Mobile hamburger sheet is a full-height role="dialog".
prefers-reduced-motion disables transitions.

Deployment

./ampersand-nav/sync-nav.sh

This copies dist/amp-nav.js to:

<site>/amp-nav.js (static HTML, Elixir)
<site>/static/amp-nav.js (SvelteKit)
<site>/priv/static/amp-nav.js (Elixir + Phoenix where applicable)

Idempotent — re-run after every edit to src/amp-nav.js.

Future: CDN delivery

Today each site ships its own copy of amp-nav.js. Once there's a CDN (cdn.ampersandboxdesign.com), change every site's script tag to point at the versioned CDN URL:

<script type="module" src="https://cdn.ampersandboxdesign.com/nav/v1.js"></script>

Then sync-nav.sh is only needed for local development and CDN publishes. Until then, the local-copy approach is fine and avoids adding a CDN dependency to any property's critical render path.

Versioning

The component exposes window.__ampNavVersion for diagnostics. Bump the VERSION constant in src/amp-nav.js on any material change, then re-sync.

<amp-nav> — Shared portfolio navigation