@wenathlan/cobaia 0.0.0-stage → 2.0.158

package/sol/support/support.tsx

@@ -0,0 +1,102 @@
+/**
+ * support page anchor — layer 3 of the anchor architecture.
+ * The file carrying the folder's own name is the path manager of the page:
+ * it imports the loose components beside it, mounts the page and re-exports
+ * the public component surface. Only the theme anchor (sol/Sol.tsx) consumes
+ * this file.
+ *
+ * The support page of the cobaia content site: the two configured channels
+ * (github sponsors and ko-fi, both zero platform fee) and the honest text of
+ * why the family takes support at all. The channel links read from the pure
+ * config at the app root (checkoutlinks.ts) — an unconfigured channel renders
+ * its honest empty state, never a fake link. No ad slot lives on this page:
+ * nothing that asks for support ever sits beside an advertisement.
+ */
+import type { CSSProperties } from "react";
+import { isconfigured, supportlinks } from "../../checkoutlinks";
+import { useContent } from "../../content.ts";
+import { label } from "../../labels";
+
+/** one support channel: the card, the promise and its config link. */
+function Channel({
+  name,
+  promise,
+  href,
+  cta,
+  index,
+}: {
+  name: string;
+  promise: string;
+  href: string;
+  cta: string;
+  index: number;
+}) {
+  const live = isconfigured(href);
+  return (
+    <article className="cb-card cb-in" style={{ "--cb-d": index } as CSSProperties} aria-label={name}>
+      <h3 className="cb-cardtitle">{name}</h3>
+      <p className="cb-channeltext">{promise}</p>
+      {live ? (
+        <a className="cb-btn" href={href} target="_blank" rel="noreferrer">
+          {cta}
+        </a>
+      ) : (
+        <>
+          <button className="cb-btn" type="button" disabled>
+            {cta}
+          </button>
+          <p className="cb-note">{label("support.action.notConfigured")}</p>
+        </>
+      )}
+    </article>
+  );
+}
+
+export function Support() {
+  useContent();
+  const channels = supportlinks();
+  return (
+    <div className="cb-page">
+      <section className="cb-hero" aria-label={label("support.aria.hero")}>
+        <p className="cb-eyebrow cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          {label("support.eyebrow")}
+        </p>
+        <h1 className="cb-title cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+          {label("support.title")}
+        </h1>
+        <p className="cb-lede cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+          {label("support.lede")}
+        </p>
+      </section>
+
+      <section className="cb-section" aria-label={label("support.section.channelsAria")}>
+        <div className="cb-grid cb-grid--2">
+          <Channel
+            index={1}
+            name={label("support.channel.sponsors.name")}
+            promise={label("support.channel.sponsors.promise")}
+            href={channels.sponsors}
+            cta={label("support.channel.sponsors.cta")}
+          />
+          <Channel
+            index={2}
+            name={label("support.channel.kofi.name")}
+            promise={label("support.channel.kofi.promise")}
+            href={channels.kofi}
+            cta={label("support.channel.kofi.cta")}
+          />
+        </div>
+      </section>
+
+      <section className="cb-section" aria-label={label("support.section.otherAria")}>
+        <div className="cb-secthead">
+          <h2 className="cb-secttitle">{label("support.section.otherTitle")}</h2>
+          <p className="cb-sectlede">{label("support.section.otherLede")}</p>
+        </div>
+        <p className="cb-note is-live">{label("support.section.otherNote")}</p>
+      </section>
+    </div>
+  );
+}
+
+export default Support;

package/sol/wingets/IntroFooter.tsx

@@ -0,0 +1,69 @@
+/**
+ * intro.footer.tsx — the footer strip of the intro: the doors. The site row
+ * (the public sections of the content site, the labels riding the shell's
+ * own foot keys so the doors can never drift from the chrome), the family
+ * row (every deploy unit beside the cobaia, resolved through the relative
+ * familyurl contract so the doors survive any mount point, each carrying
+ * the one accent the spec table gives it) and the legal line (the shared
+ * colophon). Plain anchors, no decorative dots, zero storage, zero network —
+ * it works on a static deploy.
+ */
+
+import type { CSSProperties } from "react";
+import { useContent } from "../../content.ts";
+import { familyurl } from "../../familyurl";
+import { type LabelKey, label } from "../../labels";
+import { roster } from "../../roster.ts";
+
+/** the site doors of the footer row, in reading order (the labels ride the
+ * shell foot keys — the same words the chrome's footer carries). */
+const SITEDOORS: readonly { href: string; key: LabelKey }[] = [
+  { href: "/apps", key: "shell.foot.apps" },
+  { href: "/pricing", key: "shell.foot.pricing" },
+  { href: "/blog", key: "shell.foot.blog" },
+  { href: "/support", key: "shell.foot.support" },
+  { href: "/legal", key: "shell.foot.legal" },
+];
+
+/**
+ * The footer strip: the site doors, the family row and the legal line.
+ *
+ * @returns the footer element.
+ */
+export function IntroFooter() {
+  useContent();
+  return (
+    <footer className="cb-introfoot">
+      <div className="cb-introwrap">
+        <nav className="cb-introfoot__row" aria-label={label("intro.footer.siteAria")}>
+          <span className="cb-eyebrow">{label("shell.foot.siteHead")}</span>
+          {SITEDOORS.map((door) => (
+            <a key={door.href} className="cb-introfoot__door" href={door.href}>
+              {label(door.key)}
+            </a>
+          ))}
+        </nav>
+        <nav className="cb-introfoot__row" aria-label={label("intro.footer.familyAria")}>
+          <span className="cb-eyebrow">{label("intro.footer.family")}</span>
+          {roster().map((member) => (
+            <a
+              key={member.slug}
+              className="cb-introfoot__fam"
+              href={familyurl(member.slug)}
+              target="_blank"
+              rel="noreferrer"
+              style={{ "--cb-dot": member.accent } as CSSProperties}
+              data-tip={label("intro.footer.memberTip").replaceAll("{slug}", member.slug)}
+            >
+              <span className="cb-introfoot__dot" aria-hidden="true" />
+              {member.slug}
+            </a>
+          ))}
+        </nav>
+        <p className="cb-introfoot__legal">{label("shell.colophon")}</p>
+      </div>
+    </footer>
+  );
+}
+
+export default IntroFooter;

package/sol/wingets/IntroPlans.tsx

@@ -0,0 +1,93 @@
+/**
+ * intro.plans.tsx — the plans zone of the intro: the real offer, read from
+ * the one checkoutlinks table the pricing page reads — never restated, never
+ * rounded, never invented. The billing values (ids, prices, links) answer
+ * from checkoutlinks and every plan sentence (name, blurb, features) rides
+ * the label store — zero hardcoded copy in the winget. A configured
+ * checkout href renders a live anchor; an empty one renders the disabled
+ * button with the honest note "checkout not configured yet" — the
+ * not-configured state stays honest, exactly like /pricing. The studio plan
+ * leads raised, the same lead law the pricing page carries. The section
+ * rides a ladder band (the surface rung s0) and the cb-in stagger under the
+ * second; zero network calls — the links are plain hrefs the visitor
+ * chooses to follow.
+ */
+
+import type { CSSProperties } from "react";
+import { Link } from "wouter";
+import { checkoutlinks, type checkoutplan, isconfigured } from "../../checkoutlinks";
+import { useContent } from "../../content.ts";
+import { label, labelfill } from "../../labels";
+
+/** renders one plan's checkout control: a live anchor when the owner
+ * configured the link, the honest disabled state until then. */
+function PlanAction({ plan }: { plan: checkoutplan }) {
+  if (isconfigured(plan.href)) {
+    return (
+      <a className="cb-btn" href={plan.href} rel="noreferrer">
+        {labelfill("intro.plans.choose", { name: label(plan.nameKey) })}
+      </a>
+    );
+  }
+  return (
+    <>
+      <button className="cb-btn" type="button" disabled>
+        {labelfill("intro.plans.choose", { name: label(plan.nameKey) })}
+      </button>
+      <p className="cb-note">{label("intro.plans.notConfigured")}</p>
+    </>
+  );
+}
+
+/**
+ * The plans zone: the section head, the three honest plans and the door to
+ * the full pricing page.
+ *
+ * @returns the plans section element.
+ */
+export function IntroPlans() {
+  useContent();
+  return (
+    <section className="cb-introband cb-introband--s1" id="intro-plans" aria-label={label("intro.plans.aria")}>
+      <div className="cb-introwrap">
+        <div className="cb-secthead cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          <p className="cb-eyebrow">{label("intro.plans.eyebrow")}</p>
+          <h2 className="cb-secttitle">{label("intro.plans.title")}</h2>
+          <p className="cb-sectlede">{label("intro.plans.lede")}</p>
+        </div>
+        <div className="cb-plans">
+          {checkoutlinks().map((plan, index) => (
+            <article
+              key={plan.id}
+              className={plan.id === "studio" ? "cb-plan cb-plan--lead cb-in" : "cb-plan cb-in"}
+              style={{ "--cb-d": index + 1 } as CSSProperties}
+              aria-label={labelfill("pricing.card.planAria", { name: label(plan.nameKey) })}
+            >
+              <p className="cb-planname">{label(plan.nameKey)}</p>
+              <p className="cb-planprice">
+                ${plan.priceusd}
+                <span className="cb-planper"> / {label(plan.perKey)}</span>
+              </p>
+              <p className="cb-planblurb">{label(plan.blurbKey)}</p>
+              <ul className="cb-planfeats">
+                {plan.featureKeys.map((featureKey) => (
+                  <li key={featureKey} className="cb-planfeat">
+                    {label(featureKey)}
+                  </li>
+                ))}
+              </ul>
+              <PlanAction plan={plan} />
+            </article>
+          ))}
+        </div>
+        <p className="cb-introdoorline cb-in" style={{ "--cb-d": 4 } as CSSProperties}>
+          <Link className="cb-link" href="/pricing">
+            {label("intro.plans.door")}
+          </Link>
+        </p>
+      </div>
+    </section>
+  );
+}
+
+export default IntroPlans;

package/sol/wingets/IntroSplash.tsx

@@ -0,0 +1,105 @@
+/**
+ * intro.splash.tsx — the opening act of the cobaia intro: the akash floor of
+ * the family. The drawn mark springs onto the deep canvas on the overshoot
+ * curve cubic-bezier(.34,1.56,.64,1), the name rises with the same backOut
+ * spring, the role line fades in late; the exit slides the whole overlay up
+ * in exactly 0.8s on the leave curve cubic-bezier(0.76,0,0.24,1) and reveals
+ * the landing beneath. No loading dots, no spinner — the mark speaks. One
+ * click, one tap or any key skips straight to the leave; prefers-reduced-
+ * motion hands over instantly. The cobaia no storage law holds: the splash
+ * writes nothing to the visitor machine — no seen flag, no cache row — it
+ * plays per visit to /intro and leaves nothing behind, so the leave marks
+ * nothing and the done callback is the only hand-over.
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { label } from "../../labels";
+import { BrandMark } from "./ShellBrand.tsx";
+
+/** the beat plan of the splash (ms): mark 0 → name 140 → role 400 → leave 1250. */
+const BEATS = { name: 140, role: 400, leave: 1250 } as const;
+
+/** the exit slide rides exactly 0.8s (the akash leave law). */
+const LEAVE_MS = 800;
+
+type SplashProps = {
+  /** fired after the slide completes (the caller unmounts the splash) */
+  onDone: () => void;
+};
+
+/**
+ * The akash-floor splash over the intro landing.
+ *
+ * @param props the done hand-over callback.
+ * @returns the splash element.
+ */
+export function IntroSplash({ onDone }: SplashProps) {
+  const [leaving, setLeaving] = useState(false);
+  const doneRef = useRef(onDone);
+  doneRef.current = onDone;
+  const left = useRef(false);
+  const timerRef = useRef<number | null>(null);
+
+  /** the single guarded leave: the stage slides once, the done lands after
+   * the slide — the leave marks nothing (the no storage law). */
+  const leave = useCallback(() => {
+    if (left.current) return;
+    left.current = true;
+    setLeaving(true);
+    timerRef.current = window.setTimeout(() => doneRef.current(), LEAVE_MS);
+  }, []);
+
+  // the slide timer never outlives the splash
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) window.clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+  // reduced motion hands over instantly — the splash never plays
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      left.current = true;
+      doneRef.current();
+      return;
+    }
+    const timer = window.setTimeout(leave, BEATS.leave);
+    return () => window.clearTimeout(timer);
+  }, [leave]);
+
+  // one click, one tap or any key skips straight to the leave
+  useEffect(() => {
+    const skip = (event: MouseEvent | KeyboardEvent): void => {
+      if (event.type === "keydown" || (event as MouseEvent).button === 0) leave();
+    };
+    window.addEventListener("keydown", skip);
+    window.addEventListener("pointerdown", skip);
+    return () => {
+      window.removeEventListener("keydown", skip);
+      window.removeEventListener("pointerdown", skip);
+    };
+  }, [leave]);
+
+  return (
+    <div
+      className="cb-splash"
+      data-leaving={leaving ? "true" : undefined}
+      role="status"
+      aria-label={label("intro.aria.splash")}
+    >
+      <div className="cb-splash__stage" aria-hidden="true">
+        <span className="cb-splash__mark">
+          <BrandMark size={96} />
+        </span>
+        <p className="cb-splash__name">{label("intro.splash.name")}</p>
+        <p className="cb-splash__role">{label("intro.splash.role")}</p>
+      </div>
+      <span className="cb-splash__skip" aria-hidden="true">
+        {label("intro.splash.skip")}
+      </span>
+    </div>
+  );
+}
+
+export default IntroSplash;

package/sol/wingets/ShellAdsslot.tsx

@@ -0,0 +1,47 @@
+/**
+ * adsslot.tsx — the honest ad container of the content pages. The component
+ * renders a RESERVED box only: a fixed aspect-ratio container on a hairline
+ * well, a visible mono label reading "advertisement", and an honest empty
+ * state — a hairline box breathing on the opacity-only skeleton shimmer —
+ * while no slot id is configured. The container never shifts the page
+ * and never sits beside a call to action.
+ *
+ * THE SCRIPT RULE: no ad network script lives in this repository. The
+ * AdSense (or equivalent) loader enters ONLY after the network approves the
+ * site, injected through the deploy environment (an env-bound snippet
+ * mounted inside the reserved box) — it is never committed here, and this
+ * component makes zero network calls by design. While the slot id in
+ * adsconfig.ts stays empty, the visitor sees the honest placeholder. No
+ * automated traffic ever touches an ad surface.
+ */
+import type { CSSProperties } from "react";
+import { ADS_EMPTY, ADS_LABEL, adsslotfor, adsslotlive } from "../../adsconfig.ts";
+import { labelfill } from "../../labels";
+
+type AdSlotProps = {
+  /** the content page the slot belongs to (home, apps, blog) */
+  page: string;
+};
+
+/** The reserved ad slot of one content page: honest container, zero scripts. */
+export function AdSlot({ page }: AdSlotProps) {
+  const slot = adsslotfor(page);
+  if (!slot) return null;
+  const live = adsslotlive(slot);
+  return (
+    <aside className="cb-ads" aria-label={ADS_LABEL} style={{ "--cb-ads-ratio": slot.ratio } as CSSProperties}>
+      <span className="cb-adslabel">{ADS_LABEL}</span>
+      <div className="cb-adsbox">
+        {live ? (
+          // the reserved container: the network script mounts here after
+          // approval, injected by the deploy environment — never committed
+          <span className="cb-adsnote">{labelfill("ads.slot.reserved", { format: slot.format })}</span>
+        ) : (
+          <span className="cb-empty cb-skel">{ADS_EMPTY}</span>
+        )}
+      </div>
+    </aside>
+  );
+}
+
+export default AdSlot;

package/sol/wingets/ShellBrand.tsx

@@ -0,0 +1,86 @@
+/**
+ * brand.tsx — the drawn brand mark of the cobaia theme, one hand-drawn SVG
+ * icon in the house finishing: a gradient squircle face over the DARK AMBER
+ * story (#d97706 → #92400e — the identity of the site, carried by the mark
+ * ALONE: focus, CTA and every interactive voice answer the Windows accent),
+ * a soft top gloss, a discrete film grain and the glyph itself — a beaker,
+ * the mark of the experiment the site runs — in thick ivory strokes with a
+ * translucent backing. On hover the face tilts gently in perspective (plain
+ * CSS on transform only, riding the house cubic-bezier; the stylesheet owns
+ * the motion and the prefers-reduced-motion guard). No decorative dots and
+ * no loops: the mark speaks for itself. The name "cobaia" is provisional —
+ * the mark is deliberately abstract so it survives a rename.
+ */
+import type { CSSProperties } from "react";
+
+/** the warm ivory of the glyph stroke */
+const IVORY = "#fbf5ea";
+
+/** the backing translucency of the outlined glyph shapes */
+const BACKING = "rgba(255,255,255,.16)";
+
+/** the dark amber story of the mark: the cobaia identity and its deeper
+ * amber floor — the one place the identity color is allowed to live */
+const SUN = "#d97706";
+const RUST = "#92400e";
+
+/** the asymmetric squircle of the mark face: tighter shoulders, heavier base */
+const SQUIRCLE = "M22 0 L74 0 Q96 0 96 22 L96 66 Q96 96 66 96 L30 96 Q0 96 0 66 L0 22 Q0 0 22 0 Z";
+
+type BrandMarkProps = {
+  /** rendered square size in px; omitted, the mark fills its box */
+  size?: number;
+};
+
+/** The drawn brand mark of cobaia. */
+export function BrandMark({ size }: BrandMarkProps) {
+  const vars: CSSProperties = size !== undefined ? { width: size, height: size } : {};
+  return (
+    <span className="cbMark" style={vars} aria-hidden="true">
+      <svg className="cbMarkSvg" viewBox="0 0 96 96" aria-hidden="true" focusable="false">
+        <defs>
+          <linearGradient id="cbm-bg" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stopColor={SUN} />
+            <stop offset=".62" stopColor={SUN} />
+            <stop offset="1" stopColor={RUST} />
+          </linearGradient>
+          <linearGradient id="cbm-gloss" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0" stopColor="#ffffff" stopOpacity=".3" />
+            <stop offset="1" stopColor="#ffffff" stopOpacity="0" />
+          </linearGradient>
+          <filter id="cbm-soft" x="-40%" y="-40%" width="180%" height="180%">
+            <feGaussianBlur stdDeviation="2.5" />
+          </filter>
+          <filter id="cbm-grain" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch" result="n" />
+            <feColorMatrix in="n" type="saturate" values="0" />
+            <feComposite operator="in" in2="SourceGraphic" />
+          </filter>
+          <clipPath id="cbm-clip">
+            <path d={SQUIRCLE} />
+          </clipPath>
+        </defs>
+
+        {/* the face: gradient squircle with a soft top gloss */}
+        <path d={SQUIRCLE} fill="url(#cbm-bg)" />
+        <path d={SQUIRCLE} fill="url(#cbm-gloss)" opacity=".55" />
+
+        <g clipPath="url(#cbm-clip)">
+          {/* the liquid line of the beaker, a quiet inner seam */}
+          <ellipse cx="48" cy="94" rx="34" ry="9" fill={RUST} opacity=".45" filter="url(#cbm-soft)" />
+          {/* the discrete film grain */}
+          <path d={SQUIRCLE} fill="#ffffff" filter="url(#cbm-grain)" opacity=".08" />
+        </g>
+
+        {/* the glyph: the beaker, thick ivory strokes */}
+        <g fill="none" stroke={IVORY} strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M39 25 H57" />
+          <path d="M43 25 V44 L31.5 64 A5 5 0 0 0 35.8 72 H60.2 A5 5 0 0 0 64.5 64 L53 44 V25" fill={BACKING} />
+          <path d="M37 56 H59" />
+        </g>
+      </svg>
+    </span>
+  );
+}
+
+export default BrandMark;

package/sol/wingets/index.ts

@@ -0,0 +1,18 @@
+/**
+ * index.ts — the universal winget surface of cobaia: every winget of the
+ * sol/wingets folder answers from this one module, so the pages import
+ * their components from a single place and the dotted winget file name
+ * lives exactly once (here) instead of repeating across every page —
+ * the components stay complete independent files beside this surface.
+ */
+export * from "../../roster.ts";
+export * from "./IntroFooter.tsx";
+export { default as IntroFooter } from "./IntroFooter.tsx";
+export * from "./IntroPlans.tsx";
+export { default as IntroPlans } from "./IntroPlans.tsx";
+export * from "./IntroSplash.tsx";
+export { default as IntroSplash } from "./IntroSplash.tsx";
+export * from "./ShellAdsslot.tsx";
+export { default as ShellAdsslot } from "./ShellAdsslot.tsx";
+export * from "./ShellBrand.tsx";
+export { default as ShellBrand } from "./ShellBrand.tsx";

package/tests/adsconfig.test.ts

@@ -0,0 +1,51 @@
+// # adsconfig.test — the honest ad slot registry of the family site.
+// Run: pnpm vitest run tests/adsconfig.test.ts
+// The suite watches the promise the ad slot makes: one reserved slot per
+// content page (home, apps, blog), every slot id shipping EMPTY (no ad
+// network script, no id, no key is ever committed — the loader enters after
+// approval through the deploy environment), the fixed visible label, and the
+// aspect-ratio shapes the containers reserve so the page never shifts.
+import assert from "node:assert/strict";
+import { describe, expect, it } from "vitest";
+import { ADS_EMPTY, ADS_LABEL, ADSSLOTS, adsslotfor, adsslotlive } from "../adsconfig.ts";
+
+describe("the ad slot registry", () => {
+  it("reserves one slot per content page and nothing else", () => {
+    assert.deepEqual(Object.keys(ADSSLOTS), ["home", "apps", "blog"]);
+    assert.deepEqual(
+      Object.values(ADSSLOTS).map((slot) => slot.format),
+      ["display", "in-feed", "in-article"],
+    );
+  });
+
+  it("ships every slot id empty — the honest placeholder", () => {
+    for (const [page, slot] of Object.entries(ADSSLOTS)) {
+      assert.equal(slot.slotid, "", `${page} must not carry a committed ad network id`);
+      assert.equal(adsslotlive(slot), false, `${page} must read as not configured`);
+    }
+  });
+
+  it("labels the container advertisement, visibly and always", () => {
+    assert.equal(ADS_LABEL, "advertisement");
+    assert.ok(ADS_EMPTY.length > 0);
+  });
+
+  it("reserves fixed aspect ratios so the page never shifts", () => {
+    for (const slot of Object.values(ADSSLOTS)) {
+      assert.match(slot.ratio, /^\d+ \/ \d+$/);
+    }
+  });
+
+  it("answers the live contract on real slot ids only", () => {
+    assert.equal(adsslotlive(undefined), false);
+    assert.equal(adsslotlive({ slotid: "  ", format: "display", ratio: "728 / 90" }), false);
+    assert.equal(adsslotlive({ slotid: "ca-pub-0000000000000000", format: "display", ratio: "728 / 90" }), true);
+  });
+
+  it("returns nothing for pages without a slot", () => {
+    expect(adsslotfor("pricing")).toBeUndefined();
+    expect(adsslotfor("support")).toBeUndefined();
+    expect(adsslotfor("legal")).toBeUndefined();
+    expect(adsslotfor("notfound")).toBeUndefined();
+  });
+});

package/tests/checkoutlinks.test.ts

@@ -0,0 +1,73 @@
+// # checkoutlinks.test — the billing configuration of the family site.
+// Run: pnpm vitest run tests/checkoutlinks.test.ts
+// The suite watches the promise the pricing page makes: the three plans
+// exist with the placeholder prices (US$0 / 5 / 19 a month), every checkout
+// href ships EMPTY so the interface renders the honest empty state instead
+// of a dead link, the support channels obey the same rule, and the
+// configured/not-configured contract answers only on real values. The plan
+// prose (names, billing period, blurbs, features) lives in the label
+// manifest — the suite pins that the store carries a sentence for every key
+// the billing table cites, so a card never renders a bare key.
+import assert from "node:assert/strict";
+import { describe, expect, it } from "vitest";
+import { checkoutlinks, isconfigured, planbyid, supportlinks } from "../checkoutlinks.ts";
+import { LABEL_MANIFEST } from "../labels.ts";
+
+describe("checkout links", () => {
+  it("carries the three honest plans in display order", () => {
+    assert.deepEqual(
+      checkoutlinks().map((plan) => plan.id),
+      ["free", "pro", "studio"],
+    );
+  });
+
+  it("prices the plans at the placeholder us$0 / 5 / 19 a month", () => {
+    const prices = new Map(checkoutlinks().map((plan) => [plan.id, plan.priceusd]));
+    expect(prices.get("free")).toBe(0);
+    expect(prices.get("pro")).toBe(5);
+    expect(prices.get("studio")).toBe(19);
+    for (const plan of checkoutlinks()) {
+      assert.ok(plan.featureKeys.length >= 3, `${plan.id} must list at least three honest features`);
+    }
+  });
+
+  it("answers every plan sentence from the label manifest — zero hardcoded prose", () => {
+    const prose = (key: string): string => (LABEL_MANIFEST as Record<string, string>)[key];
+    for (const plan of checkoutlinks()) {
+      assert.ok(prose(plan.nameKey), `${plan.id} name key must answer from the manifest`);
+      assert.ok(prose(plan.perKey), `${plan.id} period key must answer from the manifest`);
+      assert.ok(prose(plan.blurbKey), `${plan.id} blurb key must answer from the manifest`);
+      for (const featureKey of plan.featureKeys) {
+        assert.ok(prose(featureKey), `${plan.id} feature key must answer from the manifest`);
+      }
+    }
+    assert.equal(prose("pricing.plan.free.name"), "Free");
+    assert.equal(prose("pricing.plan.pro.name"), "Pro");
+    assert.equal(prose("pricing.plan.studio.name"), "Studio");
+    assert.equal(prose("pricing.plan.free.per"), "month");
+  });
+
+  it("ships every checkout href empty — the honest empty state", () => {
+    for (const plan of checkoutlinks()) {
+      assert.equal(plan.href, "", `${plan.id} must not carry a fake checkout link`);
+      assert.equal(isconfigured(plan.href), false, `${plan.id} must read as not configured`);
+    }
+  });
+
+  it("keeps the support channels unconfigured until the owner sets them", () => {
+    assert.equal(supportlinks().sponsors, "");
+    assert.equal(supportlinks().kofi, "");
+    assert.equal(isconfigured(supportlinks().sponsors), false);
+  });
+
+  it("answers the configured contract on real values only", () => {
+    assert.equal(isconfigured(""), false);
+    assert.equal(isconfigured("   "), false);
+    assert.equal(isconfigured("https://buy.stripe.com/example"), true);
+  });
+
+  it("resolves plans by id and nothing else", () => {
+    assert.equal(planbyid("pro")?.id, "pro");
+    assert.equal(planbyid("enterprise"), undefined);
+  });
+});