plutonium 0.51.0 → 0.52.0

data/docs/.vitepress/config.ts

@@ -32,8 +32,7 @@ export default defineConfig(withMermaid({
       { text: "Home", link: "/" },
       { text: "Getting Started", link: "/getting-started/" },
       { text: "Guides", link: "/guides/" },
-      { text: "Reference", link: "/reference/" },
-      { text: "Demo", link: "https://github.com/radioactive-labs/plutonium-core/tree/master/test/dummy" }
+      { text: "Reference", link: "/reference/" }
     ],
     sidebar: {
       '/getting-started/': [

data/docs/.vitepress/theme/components/HomeAudienceSplit.vue

@@ -0,0 +1,53 @@
+<template>
+  <section class="pu-section pu-section--band">
+    <div class="pu-section-inner">
+      <h2 class="pu-section-title">Plutonium fits two kinds of teams.</h2>
+      <div class="ha-grid">
+        <div class="ha-col">
+          <div class="ha-head">For Rails developers</div>
+          <p class="ha-lede">The missing layer between Rails and the apps you keep building.</p>
+          <ul class="ha-list">
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>Convention extended to CRUD, policies, and portals</span></li>
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>Generated code lives in your repo — edit anything</span></li>
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>Mountable Rails engines for packages and portals</span></li>
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>ActionPolicy authorization, baked in</span></li>
+          </ul>
+        </div>
+        <div class="ha-col ha-col--right">
+          <div class="ha-head">For founders &amp; teams</div>
+          <p class="ha-lede">Skip the SaaS template debate. Plutonium turns Rails into a SaaS toolkit.</p>
+          <ul class="ha-list">
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>Admin panel, signup, and invites on day one</span></li>
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>Multi-tenant scoping when you need it</span></li>
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>No template lock-in — it's just your Rails app</span></li>
+            <li><IconArrowRight class="ha-arr" :size="16" :stroke-width="2.25" /><span>Ship faster with AI tools that understand your code</span></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { IconArrowRight } from "@tabler/icons-vue"
+</script>
+
+<style scoped>
+.ha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
+.ha-col--right { border-left: 1px solid var(--pu-border); padding-left: 32px; }
+.ha-head {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--pu-accent); font-weight: 600; margin-bottom: 8px;
+}
+.ha-lede {
+  font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--pu-text);
+  margin: 0 0 14px; letter-spacing: -0.01em;
+}
+.ha-list { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.6; color: var(--pu-text-muted); }
+.ha-list li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; }
+.ha-arr { color: var(--pu-accent); flex-shrink: 0; margin-top: 3px; }
+@media (max-width: 768px) {
+  .ha-grid { grid-template-columns: 1fr; }
+  .ha-col--right { border-left: none; padding-left: 0; border-top: 1px solid var(--pu-border); padding-top: 24px; }
+}
+</style>

data/docs/.vitepress/theme/components/HomeCta.vue

@@ -0,0 +1,108 @@
+<template>
+  <section class="pu-section pu-section--band hc-section">
+    <div class="hc-inner">
+      <p class="hc-quote">
+        “Stop writing the parts of every Rails app you've already written.
+        Plutonium is what should have been there all along.”
+      </p>
+
+      <div class="hc-pills" role="tablist">
+        <button
+          v-for="opt in options"
+          :key="opt.id"
+          :class="['hc-pill', { 'hc-pill--active': selected === opt.id }]"
+          role="tab"
+          :aria-selected="selected === opt.id"
+          @click="selected = opt.id"
+        >
+          <span class="hc-pill-name">{{ opt.name }}</span>
+          <small class="hc-pill-sub">{{ opt.sub }}</small>
+        </button>
+      </div>
+
+      <div class="hc-term-wrap">
+        <pre class="pu-term hc-term"><span class="prompt">$</span> rails new my_app -m {{ activeUrl }}<span class="pu-term-cursor"></span></pre>
+        <button class="hc-copy" :class="{ 'hc-copy--ok': copied }" @click="copy" :title="copied ? 'Copied' : 'Copy command'" :aria-label="copied ? 'Copied' : 'Copy command'">
+          <component :is="copied ? IconCheck : IconCopy" :size="16" :stroke-width="2" />
+        </button>
+      </div>
+
+      <div class="hc-ctas">
+        <a class="pu-btn pu-btn-primary" href="/plutonium-core/getting-started/">Get started <IconArrowRight :size="16" :stroke-width="2.25" /></a>
+        <a class="pu-btn pu-btn-ghost" href="https://github.com/radioactive-labs/plutonium-core" target="_blank" rel="noopener">
+          <IconBrandGithub :size="16" :stroke-width="2" /> GitHub
+        </a>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from "vue"
+import { IconArrowRight, IconBrandGithub, IconCopy, IconCheck } from "@tabler/icons-vue"
+
+const options = [
+  { id: "plutonium", name: "plutonium", sub: "core + portals",
+    url: "https://radioactive-labs.github.io/plutonium-core/templates/plutonium.rb" },
+  { id: "pluton8", name: "pluton8", sub: "+ SaaS lite stack",
+    url: "https://radioactive-labs.github.io/plutonium-core/templates/pluton8.rb" },
+]
+const selected = ref("plutonium")
+const activeUrl = computed(() => options.find(o => o.id === selected.value).url)
+const activeCommand = computed(() => `rails new my_app -m ${activeUrl.value}`)
+const copied = ref(false)
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(activeCommand.value)
+    copied.value = true
+    setTimeout(() => { copied.value = false }, 1600)
+  } catch (e) {
+    // clipboard API unavailable; do nothing
+  }
+}
+</script>
+
+<style scoped>
+.hc-section { padding: 96px 24px; }
+.hc-inner {
+  max-width: 760px; margin: 0 auto; text-align: center;
+  background: linear-gradient(180deg, var(--pu-bg-band), var(--pu-bg-light));
+  border: 1px solid var(--pu-border); border-radius: 12px; padding: 56px 32px;
+}
+.hc-quote {
+  font-size: 28px; letter-spacing: -0.02em; line-height: 1.25;
+  color: var(--pu-text); font-weight: 500;
+  margin: 0 auto 28px; max-width: 600px;
+}
+.hc-pills {
+  display: inline-flex; background: rgba(0,0,0,0.05); border-radius: 999px;
+  padding: 4px; gap: 2px; margin-bottom: 14px;
+}
+.hc-pill {
+  background: transparent; border: 0; padding: 8px 16px; border-radius: 999px;
+  font-size: 12.5px; color: var(--pu-text-muted); cursor: pointer;
+  display: flex; flex-direction: column; align-items: center; line-height: 1.1;
+  font-family: inherit;
+}
+.hc-pill-sub { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pu-text-faint); margin-top: 2px; }
+.hc-pill--active {
+  background: var(--pu-bg-light); color: var(--pu-text); font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.hc-term-wrap { position: relative; max-width: 640px; margin: 0 auto 24px; }
+.hc-term { margin: 0; text-align: left; white-space: pre-wrap; word-break: break-all; padding-right: 48px; }
+.hc-copy {
+  position: absolute; top: 8px; right: 8px;
+  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
+  color: var(--pu-term-text); border-radius: 6px;
+  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
+  cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
+  padding: 0;
+}
+.hc-copy:hover { background: rgba(255,255,255,0.16); }
+.hc-copy--ok { background: var(--pu-success-bg); color: var(--pu-success-fg); border-color: transparent; }
+.hc-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
+.hc-ctas .pu-btn { display: inline-flex; align-items: center; gap: 6px; }
+@media (max-width: 600px) { .hc-quote { font-size: 22px; } }
+</style>

data/docs/.vitepress/theme/components/HomeHero.vue

@@ -0,0 +1,70 @@
+<template>
+  <section class="pu-section pu-section--dark home-hero">
+    <div class="pu-section-inner home-hero-grid">
+      <div class="home-hero-text">
+        <div class="pu-eyebrow">Plutonium · The Rails RAD framework</div>
+        <h1 class="home-hero-headline">
+          The Rails framework for things you should never write again.
+        </h1>
+        <p class="home-hero-lede">
+          Convention over configuration, extended to everything you keep rebuilding.
+        </p>
+        <p class="home-hero-pillars">
+          <b>CRUD.</b> <b>Auth.</b> <b>Authorization.</b> <b>Multi-tenancy.</b>
+          <b>Admin portals.</b> <b>Search, filters, bulk actions.</b>
+          All generated. All customizable. All Rails.
+        </p>
+        <div class="home-hero-ctas">
+          <a class="pu-btn pu-btn-primary" href="/plutonium-core/getting-started/">Get started →</a>
+          <a class="pu-btn pu-btn-ghost on-dark" href="/plutonium-core/getting-started/tutorial/">Tutorial</a>
+        </div>
+      </div>
+      <pre class="pu-term home-hero-term"><span class="prompt">$</span> rails g pu:pkg:portal admin
+<span class="dim">      create  packages/admin_portal/...</span>
+<span class="prompt">$</span> rails g pu:res:scaffold Post title:string body:text published_at:datetime --dest=main_app
+<span class="dim">      create  app/models/post.rb</span>
+<span class="dim">      create  app/resource_registries/post_definition.rb</span>
+<span class="prompt">$</span> rails g pu:res:conn Post --dest=admin_portal
+<span class="dim">      ✓ Connected Post to AdminPortal</span>
+<span class="prompt">$</span> <span class="pu-term-cursor"></span></pre>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.home-hero { padding: 96px 24px; }
+.home-hero-grid {
+  display: grid;
+  grid-template-columns: 1.05fr 1fr;
+  gap: 48px;
+  align-items: center;
+}
+.home-hero-headline {
+  font-size: 48px;
+  line-height: 1.05;
+  letter-spacing: -0.025em;
+  margin: 0 0 18px;
+  font-weight: 700;
+}
+.home-hero-lede {
+  font-size: 18px;
+  line-height: 1.5;
+  opacity: 0.78;
+  margin: 0 0 14px;
+  max-width: 540px;
+}
+.home-hero-pillars {
+  font-size: 14.5px;
+  line-height: 1.6;
+  opacity: 0.65;
+  margin: 0 0 28px;
+  max-width: 540px;
+}
+.home-hero-pillars b { color: var(--pu-term-text); font-weight: 600; opacity: 1; }
+.home-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
+.home-hero-term { margin: 0; white-space: pre; }
+@media (max-width: 768px) {
+  .home-hero-grid { grid-template-columns: 1fr; gap: 28px; }
+  .home-hero-headline { font-size: 36px; }
+}
+</style>

data/docs/.vitepress/theme/components/HomeInTheBox.vue

@@ -0,0 +1,74 @@
+<template>
+  <section class="pu-section">
+    <div class="pu-section-inner">
+      <h2 class="pu-section-title">Organized the way you'll use it.</h2>
+      <div v-for="cat in cats" :key="cat.name" class="hb-cat">
+        <div class="hb-cat-name">{{ cat.name }}</div>
+        <div class="hb-row">
+          <a v-for="item in cat.items" :key="item.name" :href="item.link" class="hb-item">
+            <span class="hb-item-body">
+              <b>{{ item.name }}</b>
+              <small>{{ item.desc }}</small>
+            </span>
+            <IconArrowUpRight class="hb-arrow" :size="16" :stroke-width="2" />
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { IconArrowUpRight } from "@tabler/icons-vue"
+
+const cats = [
+  { name: "Resources", items: [
+    { name: "Scaffolds", desc: "Model, definition, policy, routes",
+      link: "/plutonium-core/reference/app/generators" },
+    { name: "Search & filters", desc: "Declarative on the definition",
+      link: "/plutonium-core/guides/search-filtering" },
+    { name: "Custom & bulk actions", desc: "Resource-scoped interactions",
+      link: "/plutonium-core/guides/custom-actions" },
+  ]},
+  { name: "App structure", items: [
+    { name: "Portals", desc: "Themed, mountable engines",
+      link: "/plutonium-core/reference/app/portals" },
+    { name: "Packages", desc: "Feature engines under your app",
+      link: "/plutonium-core/guides/creating-packages" },
+    { name: "Multi-tenancy", desc: "Path or domain scoping",
+      link: "/plutonium-core/guides/multi-tenancy" },
+  ]},
+  { name: "People & access", items: [
+    { name: "Auth (Rodauth)", desc: "Login, signup, password reset",
+      link: "/plutonium-core/guides/authentication" },
+    { name: "Authorization", desc: "ActionPolicy per resource",
+      link: "/plutonium-core/guides/authorization" },
+    { name: "Invites & memberships", desc: "Token lifecycle, mailers, onboarding",
+      link: "/plutonium-core/guides/user-invites" },
+  ]},
+]
+</script>
+
+<style scoped>
+.hb-cat { margin-bottom: 28px; }
+.hb-cat:last-child { margin-bottom: 0; }
+.hb-cat-name {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--pu-accent); font-weight: 600; margin-bottom: 12px;
+}
+.hb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
+.hb-item {
+  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
+  padding: 14px 16px; border: 1px solid var(--pu-border-soft); border-radius: 8px;
+  background: var(--pu-bg-light); color: inherit; text-decoration: none;
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+.hb-item:hover { border-color: var(--pu-accent); }
+.hb-item:hover b { color: var(--pu-accent); }
+.hb-item:hover .hb-arrow { color: var(--pu-accent); transform: translate(2px, -2px); }
+.hb-item-body { display: flex; flex-direction: column; min-width: 0; }
+.hb-item b { display: block; color: var(--pu-text); font-weight: 600; margin-bottom: 2px; font-size: 14px; transition: color 0.15s ease; }
+.hb-item small { font-size: 12px; color: var(--pu-text-faint); }
+.hb-arrow { color: var(--pu-text-faint); flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; margin-top: 2px; }
+@media (max-width: 768px) { .hb-row { grid-template-columns: 1fr; } }
+</style>

data/docs/.vitepress/theme/components/HomePillars.vue

@@ -0,0 +1,42 @@
+<template>
+  <section class="pu-section pu-section--band">
+    <div class="pu-section-inner">
+      <h2 class="pu-section-title">Built on Rails. Wired for shipping.</h2>
+      <div class="hp-grid">
+        <div class="hp-card" v-for="p in pillars" :key="p.name">
+          <component :is="p.icon" class="hp-icon" :size="22" :stroke-width="1.75" />
+          <div class="hp-name">{{ p.name }}</div>
+          <div class="hp-desc">{{ p.desc }}</div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { IconRoute, IconCode, IconBuildingSkyscraper, IconRobot } from "@tabler/icons-vue"
+
+const pillars = [
+  { icon: IconRoute, name: "Convention over configuration",
+    desc: "Extended to resources, policies, portals, and tenancy — not just routes and views." },
+  { icon: IconCode, name: "It's just Rails",
+    desc: 'Generated code lives in your repo. Edit it, override it, delete it. The “magic” is regular Ruby mixins you can read.' },
+  { icon: IconBuildingSkyscraper, name: "Multi-tenant ready",
+    desc: "Path or domain tenancy. Scoped relations. Invites and memberships out of the box." },
+  { icon: IconRobot, name: "AI-readable",
+    desc: "Predictable file layout and naming. Built-in skills teach AI assistants the patterns." },
+]
+</script>
+
+<style scoped>
+.hp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
+.hp-card {
+  padding: 18px; border: 1px solid var(--pu-border-soft); border-radius: 8px;
+  background: var(--pu-bg-light);
+}
+.hp-icon { color: var(--pu-accent); margin-bottom: 10px; display: block; }
+.hp-name { font-weight: 600; font-size: 15px; color: var(--pu-text); margin-bottom: 6px; line-height: 1.25; }
+.hp-desc { font-size: 13px; color: var(--pu-text-muted); line-height: 1.5; }
+@media (max-width: 900px) { .hp-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 480px) { .hp-grid { grid-template-columns: 1fr; } }
+</style>

data/docs/.vitepress/theme/components/HomeStopWriting.vue

@@ -0,0 +1,49 @@
+<template>
+  <section class="pu-section home-stop-writing">
+    <div class="pu-section-inner">
+      <h2 class="pu-section-title">What you stop writing.</h2>
+      <p class="hsw-sub">Same scaffold command. Two starting points. Very different surface area.</p>
+
+      <div class="hsw-grid">
+        <div>
+          <span class="hsw-label hsw-label--bad">Rails scaffold</span>
+          <pre class="pu-term pu-term--inline hsw-term"><span class="prompt">$</span> rails g scaffold Post title:string body:text published_at:datetime</pre>
+          <div class="hsw-stats">
+            <span>Just <b>CRUD</b></span>
+          </div>
+        </div>
+        <div>
+          <span class="hsw-label hsw-label--good">Plutonium</span>
+          <pre class="pu-term pu-term--inline hsw-term"><span class="prompt">$</span> rails g pu:res:scaffold Post title:string body:text published_at:datetime --dest=main_app</pre>
+          <div class="hsw-stats hsw-stats--win">
+            <span><b>Full CRUD</b></span>
+            <span><b>+ Search</b></span>
+            <span><b>+ Filters</b></span>
+            <span><b>+ Bulk actions</b></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.hsw-sub { color: var(--pu-text-muted); font-size: 15px; margin: -16px 0 32px; }
+.hsw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
+.hsw-grid > div { display: flex; flex-direction: column; min-width: 0; }
+.hsw-stats { margin-top: auto; }
+.hsw-label {
+  display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 4px;
+  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
+}
+.hsw-label--bad { background: #fff0f0; color: var(--pu-accent); }
+.hsw-label--good { background: var(--pu-success-bg); color: var(--pu-success-fg); }
+.hsw-term { margin-top: 10px; }
+.hsw-stats {
+  padding-top: 14px; display: flex; gap: 14px; flex-wrap: wrap;
+  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pu-text-faint);
+}
+.hsw-stats b { color: var(--pu-text); font-weight: 600; }
+.hsw-stats--win b { color: var(--pu-success-fg); }
+@media (max-width: 768px) { .hsw-grid { grid-template-columns: 1fr; } }
+</style>

data/docs/.vitepress/theme/components/HomeWalkthrough.vue

@@ -0,0 +1,111 @@
+<template>
+  <section class="pu-section">
+    <div class="pu-section-inner">
+      <h2 class="pu-section-title">Scaffold a portal in minutes.</h2>
+
+      <div class="hw-cast">
+        <div class="hw-browser-bar hw-browser-bar--term">
+          <span></span><span></span><span></span>
+          <code>asciinema · scaffold a blog</code>
+        </div>
+        <div ref="castEl" class="hw-cast-player"></div>
+      </div>
+
+      <div class="hw-strip">
+        <figure v-for="shot in shots" :key="shot.label">
+          <div class="hw-label">{{ shot.label }}</div>
+          <div class="hw-browser">
+            <div class="hw-browser-bar"><span></span><span></span><code>{{ shot.url }}</code></div>
+            <img :src="shot.src" :alt="shot.alt" class="hw-shot pu-zoomable" />
+          </div>
+        </figure>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from "vue"
+import { withBase } from "vitepress"
+
+const shots = [
+  { label: "Index", url: "/admin/posts",     src: withBase("/images/home-index.png"), alt: "Posts index" },
+  { label: "New",   url: "/admin/posts/new", src: withBase("/images/home-new.png"),   alt: "New post form" },
+  { label: "Show",  url: "/admin/posts/1",   src: withBase("/images/home-show.png"),  alt: "Post show page" },
+]
+const castUrl = withBase("/asciinema/home-scaffold.cast")
+
+const castEl = ref(null)
+let player = null
+
+onMounted(async () => {
+  if (typeof window === "undefined" || !castEl.value) return
+
+  const [{ create }] = await Promise.all([
+    import("asciinema-player"),
+    import("asciinema-player/dist/bundle/asciinema-player.css"),
+  ])
+
+  player = create(castUrl, castEl.value, {
+    autoPlay: true,
+    loop: true,
+    controls: true,
+    fit: "width",
+    rows: 14,
+    terminalFontSize: "small",
+    idleTimeLimit: 1.5,
+  })
+})
+
+onBeforeUnmount(() => {
+  player?.dispose?.()
+})
+</script>
+
+<style scoped>
+.hw-cast {
+  border: 1px solid var(--pu-border); border-radius: 10px; overflow: hidden;
+  background: var(--pu-bg-dark); margin-bottom: 18px;
+}
+.hw-cast-player { padding: 8px; background: var(--pu-bg-dark); }
+.hw-cast-player :deep(.ap-player) { background: var(--pu-bg-dark); }
+
+.hw-browser-bar {
+  background: var(--pu-bg-band); padding: 8px 12px; display: flex; align-items: center; gap: 5px;
+  border-bottom: 1px solid var(--pu-border-soft);
+}
+.hw-browser-bar--term { background: #161b22; border-bottom-color: #30363d; }
+.hw-browser-bar span {
+  width: 10px; height: 10px; border-radius: 50%; background: var(--pu-border);
+}
+.hw-browser-bar--term span { background: #30363d; }
+.hw-browser-bar code {
+  margin-left: 12px; background: var(--pu-bg-light); padding: 3px 8px; border-radius: 4px;
+  font-size: 11px; color: var(--pu-text-faint);
+}
+.hw-browser-bar--term code { background: #21262d; color: #8b949e; }
+
+.hw-strip {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch;
+}
+.hw-strip figure { margin: 0; display: flex; flex-direction: column; }
+.hw-label {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
+  color: var(--pu-text-faint); margin-bottom: 8px;
+}
+.hw-browser {
+  display: block; width: 100%;
+  border: 1px solid var(--pu-border-soft); border-radius: 8px; overflow: hidden;
+  background: var(--pu-bg-light);
+  transition: border-color 0.15s ease;
+}
+.hw-browser:hover { border-color: var(--pu-accent); }
+.hw-browser .hw-browser-bar { padding: 5px 8px; }
+.hw-browser .hw-browser-bar span { width: 8px; height: 8px; }
+.hw-browser .hw-browser-bar code { margin-left: 6px; font-size: 10px; }
+.hw-shot { display: block; width: 100%; height: auto; }
+
+@media (max-width: 768px) {
+  .hw-strip { grid-template-columns: 1fr; }
+}
+</style>

data/docs/.vitepress/theme/components/SectionLanding.vue

@@ -0,0 +1,115 @@
+<template>
+  <section class="pu-section sl-section">
+    <div class="pu-section-inner">
+      <div class="pu-eyebrow">{{ eyebrow }}</div>
+      <h1 class="sl-h1">{{ title }}</h1>
+      <p class="sl-lede">{{ lede }}</p>
+
+      <div class="sl-grid">
+        <div class="sl-rail">
+          <template v-if="mode === 'numbered'">
+            <a
+              v-for="(step, i) in rail"
+              :key="i"
+              :href="step.link"
+              :class="['sl-step', { 'sl-step--link': step.link }]"
+            >
+              <span class="sl-num">{{ i + 1 }}</span>
+              <span class="sl-step-body">
+                <span class="sl-step-name">{{ step.name }}</span>
+                <span v-if="step.desc" class="sl-step-desc">{{ step.desc }}</span>
+              </span>
+            </a>
+          </template>
+          <template v-else>
+            <div v-for="grp in rail" :key="grp.group" class="sl-group">
+              <div class="sl-group-name">{{ grp.group }}</div>
+              <a
+                v-for="item in grp.items"
+                :key="item.name"
+                :href="item.link"
+                class="sl-step sl-step--link sl-step--cat"
+              >
+                <span class="sl-step-body">
+                  <span class="sl-step-name">{{ item.name }}</span>
+                  <span v-if="item.desc" class="sl-step-desc">{{ item.desc }}</span>
+                </span>
+                <IconArrowRight class="sl-step-arrow" :size="16" :stroke-width="2" />
+              </a>
+            </div>
+          </template>
+        </div>
+
+        <aside class="sl-aside">
+          <div v-for="block in sidebar" :key="block.heading" class="sl-aside-block">
+            <h4 class="sl-aside-heading">{{ block.heading }}</h4>
+            <ul>
+              <li v-for="item in block.items" :key="item.label">
+                <a :href="item.href">{{ item.label }}</a>
+                <span v-if="item.note" class="sl-aside-note"> — {{ item.note }}</span>
+              </li>
+            </ul>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { IconArrowRight } from "@tabler/icons-vue"
+
+defineProps({
+  eyebrow: { type: String, required: true },
+  title: { type: String, required: true },
+  lede: { type: String, required: true },
+  rail: { type: Array, required: true },
+  mode: { type: String, default: "numbered", validator: v => ["numbered", "categorized"].includes(v) },
+  sidebar: { type: Array, default: () => [] },
+})
+</script>
+
+<style scoped>
+.sl-section { padding: 64px 24px 96px; }
+.sl-h1 { font-size: 36px; letter-spacing: -0.025em; margin: 0 0 12px; color: var(--pu-text); }
+.sl-lede { font-size: 16px; color: var(--pu-text-muted); max-width: 640px; margin: 0 0 40px; line-height: 1.55; }
+.sl-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; }
+.sl-rail { border-left: 2px solid var(--pu-accent); padding-left: 24px; }
+.sl-group + .sl-group { margin-top: 22px; }
+.sl-group-name {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--pu-accent); font-weight: 600; margin-bottom: 8px;
+}
+.sl-step {
+  display: flex; gap: 12px; align-items: flex-start;
+  padding: 12px 0; border-bottom: 1px solid var(--pu-border-soft);
+  color: var(--pu-text); text-decoration: none;
+}
+.sl-step:last-child { border-bottom: none; }
+.sl-step--cat { justify-content: space-between; align-items: center; }
+.sl-step--link:hover .sl-step-name { color: var(--pu-accent); }
+.sl-step--link:hover .sl-step-arrow { transform: translateX(2px); color: var(--pu-accent); }
+.sl-num {
+  flex-shrink: 0; width: 24px; height: 24px; line-height: 24px; text-align: center;
+  background: var(--pu-accent); color: #fff; border-radius: 50%;
+  font-size: 11px; font-weight: 600;
+}
+.sl-step-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
+.sl-step-name { font-weight: 600; font-size: 14px; }
+.sl-step-desc { font-size: 12.5px; color: var(--pu-text-muted); }
+.sl-step-arrow { color: var(--pu-text-faint); transition: transform 0.15s ease, color 0.15s ease; flex-shrink: 0; }
+
+.sl-aside-block + .sl-aside-block { margin-top: 28px; }
+.sl-aside-heading {
+  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
+  color: var(--pu-text-faint); margin: 0 0 10px; font-weight: 600;
+}
+.sl-aside ul { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.85; }
+.sl-aside a { color: var(--pu-accent); text-decoration: none; font-weight: 500; }
+.sl-aside a:hover { text-decoration: underline; }
+.sl-aside-note { color: var(--pu-text-muted); font-weight: 400; }
+
+@media (max-width: 900px) {
+  .sl-grid { grid-template-columns: 1fr; gap: 32px; }
+}
+</style>