Context Vigilance
Search/

← Corpus / dididecks-ai / sitemap

dididecks-ai shipped

ScrollDeckPage — THE single shell overlay for a scroll-deck variant page; one-import wiring

Collapses the three shell imports a variant page used to need — pagination, rating pill, mode toggle — into one component and mount site.

Path
sitemap/components/ScrollDeckPage.md
Authors
Michael Staton

ScrollDeckPage

The before / after that motivated this component

Before — three shell imports + three mount sites per variant page:

---
import ModeToggle from "@dididecks/shell/components/ModeToggle.astro";
import PageAsDeckWrapper from "@dididecks/shell/components/PageAsDeckWrapper.astro";
import DeckOverlayScrollUI from "@dididecks/shell/components/DeckOverlay--Scroll-UI.astro";
---
<body>
  <ModeToggle client="humain-vc-decks" defaultMode="light" />
  <PageAsDeckWrapper>
    <section data-slot="01" data-variant="proto" ...>…</section>
    …
  </PageAsDeckWrapper>
  <DeckOverlayScrollUI deckSlug="pitch" variantSlug="proto" />
</body>

After — one import, one mount site:

---
import ScrollDeckPage from "@dididecks/shell/components/ScrollDeckPage.astro";
---
<body>
  <ScrollDeckPage deckSlug="pitch" variantSlug="proto">
    <section data-slot="01" data-variant="proto" ...>…</section>
    …
  </ScrollDeckPage>
</body>

Client-value auto-resolution

The client value (per-deployment localStorage namespace for ModeToggle) is read from globalThis.__dididecksShellOptions (resolved by the dididecksShell({...}) integration at astro:config:done). Consumers don’t need to pass it.

Escape hatches (the prop set)

Default behaviors match the canonical scroll-deck contract. Props exist for the rare cases:

  • hideClassifier={true} — disable the rating pill (e.g. a public-tier embed where reviewers shouldn’t see ranks)
  • hideModeToggle={true} — don’t mount ModeToggle (when a parent layout already does)
  • defaultMode="dark" — light-canon clients can override; ditto for vibrant-first clients
  • respectSystemPreference={true} — opt into prefers-color-scheme: dark honoring (off by default; brand canon usually beats OS preference)

Status

  • ✅ Shipped this session (commit 84e9c93)
  • ✅ All three humain variants consume
  • [[ModeToggle]]
  • [[PageAsDeckWrapper]]
  • [[DeckOverlay—Scroll-UI]]
  • [[../../plans/Lift-Chroma-Decks-Generic-Code-into-Shared-Shell]] — the lift pass that surfaced the consolidation need