@wenathlan/cobaia 2.0.164 → 2.0.166

package/sol/Sol.tsx

@@ -9,15 +9,15 @@
  * this file follows the new name and App.tsx keeps importing the anchor by
  * the folder path.
  *
- * The cobaia is a CONTENT site (the monetization surface of the family): no
- * onboarding, no entry gate — every content route is a page of the site, and
- * the home renders directly on the bare root. The intro (/intro) is the one
- * public presentation page of the family grammar (every app carries one) and
- * mounts BARE — outside the window chrome, like the sibling sites mount
- * theirs; the shell's close-caption door relaunches the site at it. Every
- * content route renders as the page body of the ONE shared shell (the header
- * and the footer); every page is freely reachable, and the catch-all lands
- * on the 404 anchor.
+ * The cobaia is a CONTENT site (the monetization surface of the family)
+ * riding the standardized family entry flow: the intro (/intro) is the
+ * presentation splash and the onboarding (/onboarding) the first-run
+ * frames — both mount BARE, outside the site chrome, like the sibling apps
+ * mount theirs — and the home renders behind the entry gate (the entrada:
+ * the flow decides, a finished visitor sees the content). Every other
+ * content route renders as the page body of the ONE shared shell (the
+ * header and the footer); every page stays freely reachable, and the
+ * catch-all lands on the 404 anchor.
  */
 import type { ReactNode } from "react";
 import { Route, Switch } from "wouter";
@@ -25,9 +25,11 @@ import AppsAnchor from "./apps/apps";
 import BlogAnchor from "./blog/blog";
 import HomeAnchor from "./home/home";
 import IntroAnchor from "./intro/intro";
+import OnboardingAnchor from "./onboarding/onboarding";
 import LegalAnchor from "./legal/legal";
 import NotFoundAnchor from "./notfound/notfound";
 import PricingAnchor from "./pricing/pricing";
+import { EntryGate } from "./wingets";
 import { Shell } from "./shell/Shell";
 import SupportAnchor from "./support/support";
 
@@ -46,18 +48,21 @@ function Unrouted() {
   );
 }
 
-/** Mounts the theme surface through the page anchors: the bare intro first
- * (the public presentation, outside the chrome, like the siblings mount
- * theirs), then the content pages of the site — the home on the bare root,
- * the five public sections, and the catch-all last. No entry flow: the site
- * is content end to end. */
+/** Mounts the theme surface through the page anchors: the entry flow first
+ * (the bare intro splash, then the bare onboarding frames — the family
+ * law), then the content pages of the site — the home gated behind the
+ * entrada on the bare root, the five public sections, and the catch-all
+ * last. */
 export default function Sol() {
   return (
     <Switch>
       <Route path="/intro" component={IntroAnchor} />
+      <Route path="/onboarding" component={OnboardingAnchor} />
       <Route path="/">
         <Content>
-          <HomeAnchor />
+          <EntryGate>
+            <HomeAnchor />
+          </EntryGate>
         </Content>
       </Route>
       <Route path="/apps">

package/sol/home/home.tsx

@@ -11,8 +11,9 @@
  * three how-it-works steps on hairline seams (01 engine · 02 static · 03
  * honest), a four-card preview of the directory leading to /apps, the
  * support strip, and the one reserved ad slot at the end of the content.
- * No entry gate and no first-run flow: cobaia is a content site — the home
- * renders directly, every page is public.
+ * The home rides the entrada: the entry gate consults the first-run flow
+ * (intro → onboarding) before the landing shows — the family law every
+ * sibling app already answers.
  * Styled entirely by sol/sol.css.
  */
 import type { CSSProperties } from "react";
@@ -21,7 +22,7 @@ import { useContent } from "../../content.ts";
 import { familyurl } from "../../familyurl";
 import { type LabelKey, label, labelfill } from "../../labels";
 import { roster } from "../../roster.ts";
-import { AdSlot, BrandMark } from "../wingets";
+import { AdSlot, BrandMark, EntryGate } from "../wingets";
 
 /** the featured deploy units of the landing preview (the full directory
  * lives on /apps): the OS, the engine, the store and one studio — read
@@ -41,6 +42,15 @@ const STEPS: readonly { n: LabelKey; title: LabelKey; text: LabelKey }[] = [
 ];
 
 export function Home() {
+  return (
+    <EntryGate>
+      <HomeSurface />
+    </EntryGate>
+  );
+}
+
+/** the home surface the gate reveals: the landing itself. */
+function HomeSurface() {
   useContent();
   return (
     <div className="cb-page">

package/sol/intro/intro.tsx

@@ -15,9 +15,13 @@
  * zone renders the real offer from the one checkoutlinks table (the not
  * configured state stays honest), the doors panes open the app directory
  * and the legal page, and the footer carries the doors (the site row, the
- * family row, the legal line). The entrance rides the cb-in stagger under
- * the second, the layers ride the surface-ladder bands, the door panes ride
- * the silk law. Public-site rules: zero network calls from the page itself,
+ * family row, the legal line). The visit marks the intro stage seen
+ * through the shared onboardingstate accessor (the family entry-flow
+ * contract: intro → onboarding → entrada — the stage flag rides the
+ * platform db with the localStorage cache as the offline mirror). The
+ * entrance rides the cb-in stagger under the second, the layers ride the
+ * surface-ladder bands, the door panes ride the silk law. Public-site
+ * rules: zero network calls from the page itself beyond the stage flag,
  * React state only; zero decorative dots; zero invented numbers and zero
  * fake testimonials — the real offer, read from the data modules.
  */
@@ -26,6 +30,7 @@ import type { CSSProperties } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { Link } from "wouter";
 import { label } from "../../labels";
+import { markOnboardingStage } from "../../onboardingstate.ts";
 import { BrandMark, IntroFooter, IntroPlans, IntroSplash } from "../wingets";
 
 /** the lifecycle of the opening act: resolving (the motion preference
@@ -59,9 +64,12 @@ function DoorGlyph() {
 export function Intro() {
   const [splash, setSplash] = useState<SplashPhase>("resolving");
 
-  // the splash decision rides the motion preference alone — nothing is read
-  // from the visitor machine and nothing is written back (the no storage law)
+  // the splash decision rides the motion preference, and the visit marks
+  // the intro stage seen through the shared accessor (the family flow
+  // contract: the db holds the flag, the cache mirrors it offline — the
+  // splash never replays for a visitor that finished the flow)
   useEffect(() => {
+    void markOnboardingStage("intro");
     if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
       setSplash("done");
       return;

package/sol/onboarding/onboarding.tsx

@@ -0,0 +1,146 @@
+/**
+ * onboarding.tsx — the first-run steps of the ENTRY FLOW (the flow contract
+ * of the reform the family rides: intro → onboarding → entrada). Three
+ * short frames on the site voice over the deep canvas — what the site IS
+ * (the honest role: the family's monetization face, kept apart so the apps
+ * stay clean), what it DOES (the real offer read from the one content
+ * lane: the plans, the support rails, the honest ad slots) and the ENTER
+ * frame with the hand-over button. The finish AND the skip mark the
+ * onboarding stage seen through the shared onboardingstate accessor
+ * (DB-backed, cache-mirrored — seeing once is enough; the flow never
+ * replays) and navigate to "/", where the entry gate now lets the site
+ * take over. The copy rides the label store; no icon dependency (the site
+ * grammar draws its own glyphs); reduced motion rides the stylesheet hard
+ * stop. No opt-in switches here: the site holds no account and no visitor
+ * storage beyond the first-run stage itself.
+ */
+
+import { useState } from "react";
+import { useLocation } from "wouter";
+import { type LabelKey, label } from "../../labels";
+import { markOnboardingStage } from "../../onboardingstate.ts";
+import { BrandMark } from "../wingets";
+
+/** the three frames of the first run, in order — the copy rides the store
+ * (the id keeps the ladder segments keyed, the key answers the eyebrow). */
+const STEPS: readonly { id: string; eyebrowKey: LabelKey }[] = [
+  { id: "is", eyebrowKey: "onboarding.steps.is.eyebrow" },
+  { id: "does", eyebrowKey: "onboarding.steps.does.eyebrow" },
+  { id: "enter", eyebrowKey: "onboarding.steps.enter.eyebrow" },
+];
+
+/** the does-frame rows: the real offer the site carries, one label each
+ * (the plans, the support rails, the honest ad slots — nothing invented). */
+const FACTS: readonly LabelKey[] = ["onboarding.facts.plans", "onboarding.facts.support", "onboarding.facts.ads"];
+
+/** the chevron glyph of the pager actions: the inline 10×10 chevron the
+ * site grammar draws (no icon dependency rides the content site). */
+function StepGlyph({ back }: { back?: boolean }) {
+  return (
+    <svg
+      className="cb-onboard__glyph"
+      width={10}
+      height={10}
+      viewBox="0 0 10 10"
+      aria-hidden="true"
+      focusable="false"
+      style={back ? { transform: "rotate(180deg)" } : undefined}
+    >
+      <path d="M3 0l5 5-5 5" fill="none" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+/**
+ * The onboarding page: a three-step first-run dialog that hands the
+ * surface to the home of the site. Finish and skip both mark the
+ * onboarding stage seen and navigate to the gated home.
+ *
+ * @returns the onboarding element.
+ */
+export default function Onboarding() {
+  const [, navigate] = useLocation();
+  const [step, setStep] = useState(0);
+  const last = step === STEPS.length - 1;
+
+  /** marks the stage seen and hands the surface to the home (the entry gate lets it through). */
+  const finish = (): void => {
+    void markOnboardingStage("onboarding").then(() => navigate("/"));
+  };
+
+  return (
+    <div className="cb-onboard" data-page="onboarding">
+      <section className="cb-onboard__card" aria-label={label("onboarding.aria")}>
+        <header className="cb-onboard__head">
+          <BrandMark size={18} />
+          <span className="cb-onboard__title">{label("onboarding.title")}</span>
+        </header>
+
+        <div className="cb-onboard__body">
+          {step === 0 && (
+            <article className="cb-onboard__step" key="is">
+              <p className="cb-eyebrow">{label(STEPS[0].eyebrowKey)}</p>
+              <h2 className="cb-onboard__lead">{label("onboarding.steps.is.title")}</h2>
+              <p className="cb-onboard__lede">{label("onboarding.steps.is.text")}</p>
+            </article>
+          )}
+          {step === 1 && (
+            <article className="cb-onboard__step" key="does">
+              <p className="cb-eyebrow">{label(STEPS[1].eyebrowKey)}</p>
+              <h2 className="cb-onboard__lead">{label("onboarding.steps.does.title")}</h2>
+              <p className="cb-onboard__lede">{label("onboarding.steps.does.text")}</p>
+              <ul className="cb-onboard__facts">
+                {FACTS.map((key) => (
+                  <li key={key} className="cb-onboard__fact">
+                    {label(key)}
+                  </li>
+                ))}
+              </ul>
+            </article>
+          )}
+          {step === 2 && (
+            <article className="cb-onboard__step" key="enter">
+              <p className="cb-eyebrow">{label(STEPS[2].eyebrowKey)}</p>
+              <h2 className="cb-onboard__lead">{label("onboarding.steps.enter.title")}</h2>
+              <p className="cb-onboard__lede">{label("onboarding.steps.enter.text")}</p>
+            </article>
+          )}
+        </div>
+
+        <footer className="cb-onboard__foot">
+          <div className="cb-onboard__ladder" aria-hidden="true">
+            {STEPS.map((frame) => (
+              <span
+                key={frame.id}
+                className="cb-onboard__segrun"
+                data-active={STEPS[step].id === frame.id ? "true" : undefined}
+              />
+            ))}
+          </div>
+          <div className="cb-onboard__actions">
+            <button type="button" className="cb-onboard__skip" onClick={finish}>
+              {label("onboarding.skip")}
+            </button>
+            {step > 0 && (
+              <button type="button" className="cb-btn cb-btn--ghost" onClick={() => setStep((value) => value - 1)}>
+                <StepGlyph back />
+                {label("onboarding.back")}
+              </button>
+            )}
+            {last ? (
+              <button type="button" className="cb-btn" onClick={finish}>
+                {label("onboarding.enterCta")}
+                <StepGlyph />
+              </button>
+            ) : (
+              <button type="button" className="cb-btn" onClick={() => setStep((value) => value + 1)}>
+                {label("onboarding.next")}
+                <StepGlyph />
+              </button>
+            )}
+          </div>
+        </footer>
+      </section>
+    </div>
+  );
+}

package/sol/sol.css

@@ -125,6 +125,9 @@
   --color-win: #4cc2ff;
   --color-win-ink: #0a0a0a;
   --color-focus: var(--color-win);
+  /* the ice-vault accent of the family spec (PR9): the #a3d7e6 lane the
+     vault surfaces borrow — focus stays the windows #4cc2ff */
+  --accent-ice-vault: #a3d7e6;
 
   /* the canvas + the 8 surface rungs (elevation by color, never by border) */
   --sol-canvas: var(--color-canvas);
@@ -1949,3 +1952,153 @@ code {
 html {
   touch-action: pan-x pan-y;
 }
+
+/* ---------- 21. THE ONBOARDING — the first-run frames of the entry flow
+   (intro → onboarding → entrada; the family law). the three frames ride
+   one centered card on the deep canvas — the site voice, no window chrome,
+   responsive from the phone to the tv (the card caps its width and the
+   feet stack under the narrow gate). ---------- */
+.cb-onboard {
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background:
+    radial-gradient(120% 90% at 50% -10%, rgb(255 255 255 / 4%), transparent 60%),
+    var(--sol-canvas-deep);
+}
+.cb-onboard__card {
+  width: min(560px, 100%);
+  background: var(--sol-surface-2);
+  border: 1px solid var(--sol-hairline);
+  border-radius: 10px;
+  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 60%);
+  overflow: hidden;
+}
+.cb-onboard__head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px;
+  border-bottom: 1px solid var(--sol-hairline);
+  background: var(--sol-surface-1);
+}
+.cb-onboard__title {
+  font-size: 12px;
+  font-weight: 550;
+  letter-spacing: 0.08em;
+  text-transform: lowercase;
+  color: var(--sol-muted);
+}
+.cb-onboard__body {
+  padding: 26px 24px 8px;
+  min-height: 220px;
+}
+.cb-onboard__step {
+  animation: cbOnboardIn 250ms var(--sol-ease, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+}
+@keyframes cbOnboardIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+.cb-onboard__lead {
+  margin: 6px 0 10px;
+  font-size: 22px;
+  line-height: 1.2;
+  font-weight: 600;
+  color: var(--sol-ink);
+}
+.cb-onboard__lede {
+  margin: 0;
+  max-width: 46ch;
+  color: var(--sol-muted);
+}
+.cb-onboard__facts {
+  list-style: none;
+  margin: 14px 0 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+.cb-onboard__fact {
+  padding: 10px 12px;
+  border: 1px solid var(--sol-hairline);
+  border-radius: 8px;
+  background: var(--sol-surface-1);
+  color: var(--sol-muted);
+}
+.cb-onboard__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 16px 18px;
+  border-top: 1px solid var(--sol-hairline);
+  background: var(--sol-surface-1);
+}
+.cb-onboard__ladder {
+  display: flex;
+  gap: 6px;
+}
+.cb-onboard__segrun {
+  width: 18px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--sol-hairline-strong);
+}
+.cb-onboard__segrun[data-active="true"] {
+  background: var(--sol-ink);
+}
+.cb-onboard__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.cb-onboard__skip {
+  margin-right: auto;
+  font: inherit;
+  font-size: 12px;
+  color: var(--sol-faint);
+  background: none;
+  border: none;
+  padding: 8px 6px;
+  cursor: pointer;
+}
+.cb-onboard__skip:hover {
+  color: var(--sol-ink);
+}
+.cb-onboard__skip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+.cb-onboard__actions .cb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  padding: 9px 16px;
+}
+.cb-onboard__glyph {
+  flex: none;
+}
+@media (max-width: 480px) {
+  .cb-onboard {
+    padding: 12px;
+    align-items: end;
+  }
+  .cb-onboard__body {
+    padding: 20px 16px 4px;
+  }
+  .cb-onboard__lead {
+    font-size: 19px;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .cb-onboard__step {
+    animation: none;
+  }
+}

package/sol/wingets/HomeEntrygate.tsx

@@ -0,0 +1,64 @@
+/**
+ * entrygate of cobaia — the entry gate of the SITE (the flow contract of
+ * the reform the family rides: intro → onboarding → entrada): the home
+ * anchor consults this component before rendering anything. On mount it
+ * reads the first-run state from onboardingstate (the DB-backed accessor —
+ * the offline cache answers the fast path, the platform gateway reconciles
+ * in the background); while the state is still unknown it renders null (no
+ * flash of the home), when the intro is unseen it replaces the route with
+ * /intro, when only the onboarding is unseen it replaces with /onboarding,
+ * and only a visitor that finished the flow ever sees the home. The gate
+ * never writes: marking the stages belongs to the intro and the onboarding
+ * pages.
+ */
+import { type ReactNode, useEffect, useState } from "react";
+import { useLocation } from "wouter";
+import { type VisitorOnboarding, readOnboardingState } from "../../onboardingstate.ts";
+
+/** the verdict of the gate: still resolving, or the route the visitor belongs to */
+type GateVerdict = "resolving" | "intro" | "onboarding" | "home";
+
+/**
+ * Resolves the gate verdict from a seen-state snapshot (the flow order:
+ * intro first, then onboarding, then the home).
+ *
+ * @param state the resolved snapshot.
+ * @returns the verdict the gate acts on.
+ */
+export function verdictOf(state: VisitorOnboarding): GateVerdict {
+  if (!state.introseen) return "intro";
+  if (!state.onboardingseen) return "onboarding";
+  return "home";
+}
+
+/**
+ * The entry gate wrapping the home: null while resolving, a replace-navigation
+ * to the missing first-run stage, the home content once the flow is done.
+ *
+ * @param props the home children rendered behind the gate.
+ * @returns the gated home element.
+ */
+export function EntryGate({ children }: { children: ReactNode }) {
+  const [, navigate] = useLocation();
+  const [verdict, setVerdict] = useState<GateVerdict>("resolving");
+
+  useEffect(() => {
+    let live = true;
+    void readOnboardingState().then((state) => {
+      if (live) setVerdict((current) => (current === "home" ? current : verdictOf(state)));
+    });
+    return () => {
+      live = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (verdict === "intro") navigate("/intro", { replace: true });
+    else if (verdict === "onboarding") navigate("/onboarding", { replace: true });
+  }, [navigate, verdict]);
+
+  if (verdict !== "home") return null;
+  return <>{children}</>;
+}
+
+export default EntryGate;

package/sol/wingets/index.ts

@@ -6,6 +6,8 @@
  * the components stay complete independent files beside this surface.
  */
 export * from "../../roster.ts";
+export * from "./HomeEntrygate.tsx";
+export { default as EntryGate } from "./HomeEntrygate.tsx";
 export * from "./IntroFooter.tsx";
 export { default as IntroFooter } from "./IntroFooter.tsx";
 export * from "./IntroPlans.tsx";

package/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Cobaia",
-  "version": "2.0.163",
+  "version": "2.0.166",
   "identifier": "com.wenathlan.cobaia",
   "build": {
     "beforeDevCommand": "pnpm dev",

package/tests/entryflow.test.ts

@@ -0,0 +1,124 @@
+// # entryflow.test — the construction-flow contract of the cobaia: the
+// standardized family law (intro → onboarding → entrada) the owner ordered
+// and the db-backed content law behind it. Run: pnpm vitest run
+// tests/entryflow.test.ts
+//
+// The suite watches three promises:
+// 1. the flow — the intro mounts before the onboarding, the onboarding
+//    before the gated home (the entrada), and the onboarding page marks
+//    its stage through the shared onboardingstate accessor, never a local
+//    flag of its own;
+// 2. the db — the content_rows table exists in the runtime schema, the
+//    boot seed ingests the manifest, and the rows read back carry the
+//    kinds the pages render (posts, roster, plans — no hardcoded row
+//    lives in a face);
+// 3. the copy — every onboarding key the frames cite answers from the
+//    label manifest (a hardcoded string inside a widget is a defect).
+import { readFileSync } from "node:fs";
+import assert from "node:assert/strict";
+import { describe, expect, it } from "vitest";
+import { LABEL_MANIFEST, type LabelKey } from "../labels.ts";
+import { CONTENTKINDS, seedPosts, seedRoster, seedPlans } from "../content.ts";
+
+function read(path: string): string {
+  return readFileSync(new URL(path, import.meta.url), "utf8");
+}
+
+const SOL = read("../sol/Sol.tsx");
+const HOME = read("../sol/home/home.tsx");
+const INTRO = read("../sol/intro/intro.tsx");
+const ONBOARDING = read("../sol/onboarding/onboarding.tsx");
+const GATE = read("../sol/wingets/HomeEntrygate.tsx");
+const STATE = read("../onboardingstate.ts");
+const DB = read("../db.ts");
+const CSS = read("../sol/sol.css");
+
+describe("the entry flow contract (intro → onboarding → entrada)", () => {
+  it("mounts the flow before the fundamentals — intro first, onboarding second, the gated home third", () => {
+    expect(SOL).toMatch(/path="\/intro"/);
+    expect(SOL).toMatch(/path="\/onboarding"/);
+    expect(SOL.indexOf('"/intro"')).toBeLessThan(SOL.indexOf('"/onboarding"'));
+    expect(SOL.indexOf('"/onboarding"')).toBeLessThan(SOL.indexOf('"/"'));
+  });
+
+  it("rides the entrada behind the entry gate — the home renders only through the gate", () => {
+    expect(HOME).toMatch(/EntryGate/);
+    expect(HOME).toMatch(/<HomeSurface \/>/);
+    expect(GATE).toMatch(/navigate\("\/intro"/);
+    expect(GATE).toMatch(/navigate\("\/onboarding"/);
+  });
+
+  it("marks the stages through the shared db-backed accessor, never a local flag", () => {
+    expect(INTRO).toMatch(/markOnboardingStage\("intro"\)/);
+    expect(ONBOARDING).toMatch(/markOnboardingStage\("onboarding"\)/);
+    expect(STATE).toMatch(/cobaia\.onboarding\.seen/);
+    expect(STATE).toMatch(/\/api\/v1\/onboarding/);
+    expect(ONBOARDING).not.toMatch(/localStorage/);
+  });
+
+  it("answers every onboarding key the frames cite from the label manifest", () => {
+    const keys = [
+      "onboarding.aria",
+      "onboarding.title",
+      "onboarding.skip",
+      "onboarding.back",
+      "onboarding.next",
+      "onboarding.enterCta",
+      "onboarding.steps.is.eyebrow",
+      "onboarding.steps.is.title",
+      "onboarding.steps.is.text",
+      "onboarding.steps.does.eyebrow",
+      "onboarding.steps.does.title",
+      "onboarding.steps.does.text",
+      "onboarding.steps.enter.eyebrow",
+      "onboarding.steps.enter.title",
+      "onboarding.steps.enter.text",
+      "onboarding.facts.plans",
+      "onboarding.facts.support",
+      "onboarding.facts.ads",
+    ] as const satisfies readonly LabelKey[];
+    for (const key of keys) {
+      assert.ok(
+        typeof LABEL_MANIFEST[key] === "string" && LABEL_MANIFEST[key].length > 0,
+        `${key} must answer from the manifest`,
+      );
+    }
+  });
+
+  it("styles the frames responsively with the reduced-motion stop", () => {
+    expect(CSS).toMatch(/\.cb-onboard \{/);
+    expect(CSS).toMatch(/@media \(max-width: 480px\)/);
+    expect(CSS).toMatch(/prefers-reduced-motion: reduce/);
+  });
+});
+
+describe("the content law (the rows live in the db, the manifest is the seed)", () => {
+  it("carries the content_rows table in the runtime schema and the seed ingestion", () => {
+    expect(DB).toMatch(/CREATE TABLE IF NOT EXISTS content_rows/);
+    expect(DB).toMatch(/seedContentTable/);
+    expect(DB).toMatch(/readContentRows/);
+  });
+
+  it("seeds every kind the pages render — no face answers a fixed table of its own", () => {
+    assert.deepEqual([...CONTENTKINDS], [
+      "posts",
+      "roster",
+      "plans",
+      "supportlinks",
+      "ads.slots",
+      "ads.label",
+      "ads.empty",
+    ]);
+    assert.ok(seedPosts.length >= 3, "the blog seed carries the family posts");
+    assert.ok(seedRoster.length === 10, "the roster seed carries the ten family members");
+    assert.ok(seedPlans.length === 3, "the plans seed carries the three honest plans");
+  });
+
+  it("keeps the faces reading through the typed doors — no hardcoded row in a page", () => {
+    expect(HOME).toMatch(/from "\.\.\/\.\.\/roster\.ts"/);
+    expect(HOME).not.toMatch(/const ROSTER/);
+    expect(read("../sol/apps/apps.tsx")).not.toMatch(/const ROSTER/);
+    expect(read("../sol/pricing/pricing.tsx")).not.toMatch(/const PLANS/);
+    expect(read("../sol/blog/blog.tsx")).not.toMatch(/const POSTS/);
+  });
+});