@wenathlan/cobaia 0.0.0-stage → 2.0.158

package/sol/intro/intro.tsx

@@ -0,0 +1,187 @@
+/**
+ * intro 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 PRESENTATION page of cobaia — the family grammar's last seat (every
+ * app of the family carries one): the page mounts BARE at /intro, no window
+ * chrome, riding the site voice, not the frame. The akash splash opens over
+ * the landing (the mark spring on the overshoot curve, the name rise, the
+ * role fade; click/tap/key skip; reduced motion never plays; the no storage
+ * law holds — no seen flag, the splash plays per visit and writes nothing),
+ * then the landing answers: the hero says what the surface is (the
+ * monetization face kept apart so the main sites stay clean), the plans
+ * 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,
+ * React state only; zero decorative dots; zero invented numbers and zero
+ * fake testimonials — the real offer, read from the data modules.
+ */
+
+import type { CSSProperties } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { Link } from "wouter";
+import { label } from "../../labels";
+import { BrandMark, IntroFooter, IntroPlans, IntroSplash } from "../wingets";
+
+/** the lifecycle of the opening act: resolving (the motion preference
+ * decides) → playing (the akash floor over the landing) → done (the
+ * landing alone). No seen state is consulted — the no storage law. */
+type SplashPhase = "resolving" | "playing" | "done";
+
+/** the door glyph of the panes: the inline 10×10 chevron the chrome's
+ * caption grammar draws (the app carries no icon dependency). */
+function DoorGlyph() {
+  return (
+    <svg
+      className="cb-intropane__glyph"
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M3 0l5 5-5 5" fill="none" stroke="currentColor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+/**
+ * The intro page: the splash plays over the landing, then the bare
+ * presentation answers — hero, plans, doors, footer.
+ *
+ * @returns the intro element (null while the motion preference decides).
+ */
+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)
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      setSplash("done");
+      return;
+    }
+    setSplash("playing");
+  }, []);
+
+  /** the slide completed: the splash unmounts, the landing owns the page. */
+  const onSplashDone = useCallback(() => {
+    setSplash("done");
+  }, []);
+
+  /** the quiet cue: walks the page to the plans band. */
+  const cuePlans = useCallback(() => {
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    document.getElementById("intro-plans")?.scrollIntoView({ behavior: reduced ? "auto" : "smooth", block: "start" });
+  }, []);
+
+  // the phase decision holds the paint: nothing renders while it resolves —
+  // no flash of the landing under a splash that will never play
+  if (splash === "resolving") return null;
+
+  return (
+    <div className="cb-intro" data-page="intro">
+      {/* the skip link rides outside no frame — the bare page answers the
+       * viewport directly; the splash sits above it while it plays */}
+      <a className="cb-skip" href="#intro-content">
+        {label("shell.skip")}
+      </a>
+
+      {/* the akash floor: the opening act rides over the landing until its
+       * slide completes; reduced motion never mounts it */}
+      {splash === "playing" && <IntroSplash onDone={onSplashDone} />}
+
+      {/* the intro bar: the wordmark and the two quiet doors — the ONE
+       * primary cta lives in the hero */}
+      <header className="cb-introbar">
+        <div className="cb-introbar__in">
+          <span className="cb-introbar__brand">
+            <BrandMark size={20} />
+            <span className="cb-introbar__word">{label("shell.name")}</span>
+          </span>
+          <span className="cb-introbar__spacer" />
+          <nav className="cb-introbar__nav" aria-label={label("intro.bar.aria")}>
+            <Link className="cb-introdoor" href="/apps">
+              {label("shell.foot.apps")}
+            </Link>
+            <Link className="cb-introdoor" href="/pricing">
+              {label("shell.foot.pricing")}
+            </Link>
+          </nav>
+        </div>
+      </header>
+
+      <main id="intro-content">
+        {/* the hero: what the surface is, said directly */}
+        <section className="cb-introhero" aria-label={label("intro.aria.page")}>
+          <div className="cb-introwrap">
+            <span className="cb-introhero__mark cb-in" style={{ "--cb-d": 0 } as CSSProperties} aria-hidden="true">
+              <BrandMark size={64} />
+            </span>
+            <p className="cb-eyebrow cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+              {label("intro.hero.eyebrow")}
+            </p>
+            <h1 className="cb-title cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+              {label("intro.hero.title")}
+            </h1>
+            <p className="cb-lede cb-in" style={{ "--cb-d": 3 } as CSSProperties}>
+              {label("intro.hero.lede")}
+            </p>
+            <div className="cb-btnrow cb-in" style={{ "--cb-d": 4 } as CSSProperties}>
+              <Link className="cb-btn" href="/">
+                {label("intro.hero.cta")}
+              </Link>
+              <button type="button" className="cb-btn cb-btn--ghost" onClick={cuePlans}>
+                {label("intro.hero.cue")}
+              </button>
+            </div>
+            <p className="cb-note cb-in" style={{ "--cb-d": 5 } as CSSProperties}>
+              {label("intro.hero.note")}
+            </p>
+          </div>
+        </section>
+
+        {/* the plans as they really are (the one checkoutlinks table) */}
+        <IntroPlans />
+
+        {/* the doors: the app directory and the legal page, on silk panes */}
+        <section className="cb-introband cb-introband--deep" aria-label={label("intro.doors.aria")}>
+          <div className="cb-introwrap">
+            <div className="cb-secthead cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+              <p className="cb-eyebrow">{label("intro.doors.eyebrow")}</p>
+              <h2 className="cb-secttitle">{label("intro.doors.title")}</h2>
+            </div>
+            <div className="cb-introdoorgrid">
+              <article className="cb-intropane cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+                <p className="cb-cardmeta">{label("intro.doors.apps")}</p>
+                <p className="cb-intropane__text">{label("intro.doors.appsText")}</p>
+                <Link className="cb-intropane__door" href="/apps">
+                  {label("intro.doors.appsCta")}
+                  <DoorGlyph />
+                </Link>
+              </article>
+              <article className="cb-intropane cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+                <p className="cb-cardmeta">{label("intro.doors.legal")}</p>
+                <p className="cb-intropane__text">{label("intro.doors.legalText")}</p>
+                <Link className="cb-intropane__door" href="/legal">
+                  {label("intro.doors.legalCta")}
+                  <DoorGlyph />
+                </Link>
+              </article>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* the footer carries the doors: the site row, the family row, the line */}
+      <IntroFooter />
+    </div>
+  );
+}
+
+export default Intro;

package/sol/legal/legal.tsx

@@ -0,0 +1,76 @@
+/**
+ * legal 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 legal page of the cobaia content site: the privacy policy
+ * and the terms, written seriously and directly. The page discloses the
+ * advertising plan (labeled, reserved slots, third-party cookies only once
+ * the network is approved and live) and the analytics rule (none by default,
+ * opt-in and disclosed here first if that ever changes). No ad slot lives on
+ * this page: it is the compliance and health-check surface of the site.
+ * every paragraph rides the label accessor — the store keeps the sentence,
+ * the anchor keeps the rendering.
+ */
+import type { CSSProperties } from "react";
+import { label } from "../../labels";
+
+/** one legal paragraph: the strong lead and its body, both from the store. */
+function Clause({ head, text }: { head: string; text: string }) {
+  return (
+    <p>
+      <strong>{head}</strong> {text}
+    </p>
+  );
+}
+
+export function Legal() {
+  return (
+    <div className="cb-page">
+      <section className="cb-hero" aria-label={label("legal.aria.hero")}>
+        <p className="cb-eyebrow cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          {label("legal.eyebrow")}
+        </p>
+        <h1 className="cb-title cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+          {label("legal.title")}
+        </h1>
+        <p className="cb-lede cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+          {label("legal.lede")}
+        </p>
+      </section>
+
+      <article
+        className="cb-article cb-in"
+        style={{ "--cb-d": 1 } as CSSProperties}
+        aria-label={label("legal.privacy.aria")}
+      >
+        <h2 className="cb-secttitle">{label("legal.privacy.title")}</h2>
+        <div className="cb-articlebody">
+          <Clause head={label("legal.privacy.collect.head")} text={label("legal.privacy.collect.text")} />
+          <Clause head={label("legal.privacy.logs.head")} text={label("legal.privacy.logs.text")} />
+          <Clause head={label("legal.privacy.ads.head")} text={label("legal.privacy.ads.text")} />
+          <Clause head={label("legal.privacy.analytics.head")} text={label("legal.privacy.analytics.text")} />
+          <Clause head={label("legal.privacy.payments.head")} text={label("legal.privacy.payments.text")} />
+          <Clause head={label("legal.privacy.contact.head")} text={label("legal.privacy.contact.text")} />
+        </div>
+      </article>
+
+      <article
+        className="cb-article cb-in"
+        style={{ "--cb-d": 2 } as CSSProperties}
+        aria-label={label("legal.terms.aria")}
+      >
+        <h2 className="cb-secttitle">{label("legal.terms.title")}</h2>
+        <div className="cb-articlebody">
+          <Clause head={label("legal.terms.service.head")} text={label("legal.terms.service.text")} />
+          <Clause head={label("legal.terms.use.head")} text={label("legal.terms.use.text")} />
+          <Clause head={label("legal.terms.data.head")} text={label("legal.terms.data.text")} />
+          <Clause head={label("legal.terms.ip.head")} text={label("legal.terms.ip.text")} />
+          <Clause head={label("legal.terms.changes.head")} text={label("legal.terms.changes.text")} />
+        </div>
+      </article>
+    </div>
+  );
+}
+
+export default Legal;

package/sol/notfound/notfound.tsx

@@ -0,0 +1,32 @@
+/**
+ * notfound 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 cobaia copy answers for the family site: the address is not
+ * part of the family — the way out is the home and the directory.
+ */
+
+import { Link } from "wouter";
+
+import { label } from "../../labels";
+
+export function NotFound() {
+  return (
+    <div className="cb-page cb-missing">
+      <p className="cb-eyebrow">{label("notfound.eyebrow")}</p>
+      <h1 className="cb-title">{label("notfound.title")}</h1>
+      <p className="cb-lede">{label("notfound.lede")}</p>
+      <div className="cb-btnrow">
+        <Link className="cb-btn" href="/">
+          {label("notfound.action.home")}
+        </Link>
+        <Link className="cb-btn cb-btn--ghost" href="/apps">
+          {label("notfound.action.apps")}
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export default NotFound;

package/sol/pricing/pricing.tsx

@@ -0,0 +1,98 @@
+/**
+ * pricing 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 pricing table of the cobaia content site: three honest plans (free,
+ * pro, studio — us$0 / 5 / 19 a month, placeholders until billing lands).
+ * The billing values answer from the pure config at the app root
+ * (checkoutlinks.ts — ids, prices, checkout hrefs) and every plan sentence
+ * (name, blurb, features) rides the label store: a configured link renders
+ * a real anchor, an empty one renders the disabled button with the honest
+ * note "checkout not configured yet". No checkout page carries an ad — the
+ * ad slots live only on the content pages. Zero network calls: the links
+ * are plain hrefs the visitor chooses to follow.
+ */
+import type { CSSProperties } from "react";
+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("pricing.action.choose", { name: label(plan.nameKey) })}
+      </a>
+    );
+  }
+  return (
+    <>
+      <button className="cb-btn" type="button" disabled>
+        {labelfill("pricing.action.choose", { name: label(plan.nameKey) })}
+      </button>
+      <p className="cb-note">{label("pricing.action.notConfigured")}</p>
+    </>
+  );
+}
+
+export function Pricing() {
+  useContent();
+  return (
+    <div className="cb-page">
+      <section className="cb-hero" aria-label={label("pricing.aria.hero")}>
+        <p className="cb-eyebrow cb-in" style={{ "--cb-d": 0 } as CSSProperties}>
+          {label("pricing.eyebrow")}
+        </p>
+        <h1 className="cb-title cb-in" style={{ "--cb-d": 1 } as CSSProperties}>
+          {label("pricing.title")}
+        </h1>
+        <p className="cb-lede cb-in" style={{ "--cb-d": 2 } as CSSProperties}>
+          {label("pricing.lede")}
+        </p>
+      </section>
+
+      <section className="cb-section" aria-label={label("pricing.section.plansAria")}>
+        <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>
+      </section>
+
+      <section className="cb-section" aria-label={label("pricing.section.moneyAria")}>
+        <div className="cb-secthead">
+          <h2 className="cb-secttitle">{label("pricing.section.moneyTitle")}</h2>
+          <p className="cb-sectlede">{label("pricing.section.moneyLede")}</p>
+        </div>
+        <p className="cb-note is-live">{label("pricing.section.moneyNote")}</p>
+      </section>
+    </div>
+  );
+}
+
+export default Pricing;

package/sol/shell/Shell.tsx

@@ -0,0 +1,161 @@
+/**
+ * shell.tsx — the ONE chrome of the cobaia content site under the family
+ * fullscreen law: the direct url owns the whole viewport (no floating
+ * window, no title bar, no captions — the window chrome exists only inside
+ * the DevThink OS power clip, and the OS draws that window itself), so the
+ * site renders full-bleed with its own voice — the sticky section bar (the
+ * acrylic nav pins over the drawn home mark), the page surface and the
+ * worked footer carrying the family row: every deploy unit of the family
+ * linked through familyurl(), because the family redirects both ways. The
+ * bar rides the trylle canvas with the Windows hands: the section links
+ * are the pins — the acrylic bar, the hover wash, the press bounce (scale
+ * 0.7, 100ms), the dtPopIntro mount pop and the 3px ladder indicator that
+ * grows under the active section; the focus underline and the active pin
+ * answer the Windows accent — the identity amber lives only in the brand
+ * mark. The active section link reads the location so the visitor always
+ * knows where they stand. Inside the OS power clip the embedded contract
+ * renders the SAME site surface under the shell--embedded seat: the
+ * sticky section bar, the page surface and the worked footer answer in
+ * both seats so the design is IDENTICAL at the direct url and inside the
+ * os window (the window-era law) — the host window owns the chrome
+ * there. Styled entirely by sol/sol.css (the fullscreen law
+ * block carries the two contracts).
+ */
+import type { CSSProperties, ReactNode } from "react";
+import { Link, useLocation } from "wouter";
+import { useContent } from "../../content.ts";
+import { familyurl } from "../../familyurl";
+import { type LabelKey, label } from "../../labels";
+import { roster } from "../../roster.ts";
+import { BrandMark } from "../wingets";
+
+/** the section links of the top bar, in reading order (home is the mark).
+ * the href rides the route table, the text rides the label accessor. */
+const NAVLINKS: readonly { href: string; key: LabelKey }[] = [
+  { href: "/apps", key: "shell.nav.apps" },
+  { href: "/pricing", key: "shell.nav.pricing" },
+  { href: "/blog", key: "shell.nav.blog" },
+  { href: "/support", key: "shell.nav.support" },
+];
+
+/** the shared chrome: the full-bleed site surface — the sticky section bar
+ * (with the ONE logo slot as the home mark), the page surface and the
+ * footer row; the embedded pass renders the SAME site surface inside the
+ * os power clip (the window-era law: one design in both seats). */
+export function Shell({ children }: { children: ReactNode }) {
+  useContent();
+  const [location] = useLocation();
+
+  // the embedded contract of the family fullscreen law: inside the os
+  // power clip the app rides the host window chrome — the seat class
+  // answers the mount, the tree never changes between the two doors
+  // (the window-era law: one design in both seats)
+  const framed = (() => {
+    try {
+      return window.self !== window.top;
+    } catch {
+      return true;
+    }
+  })();
+
+  const isActive = (href: string): boolean =>
+    href === "/" ? location === "/" : location === href || location.startsWith(`${href}/`);
+
+  // the embedded seat: inside the os power clip the app rides the host
+  // window chrome, but the SURFACE stays the same — the seat class answers
+  // the mount so differential styles (if any) can find it, the tree never
+  // changes between the two doors (the window-era law: one design)
+  const seat = framed ? "shell--embedded" : "shell--standalone";
+
+  // the surface pass: the direct url answers full-bleed — the window
+  // chrome exists only inside the os power clip, so the site owns the whole
+  // viewport; the sticky section bar stays as the site's own navigation,
+  // the page surface fills the middle and the worked footer closes it
+  return (
+    <div className={`shell ${seat}`}>
+      {/* the skip link answers the viewport: the surface owns the whole
+       * document, the skip jumps straight to the content anchor */}
+      <a className="cb-skip" href="#content">
+        {label("shell.skip")}
+      </a>
+      <div className="cb-root">
+        <header className="cb-top">
+          <nav className="cb-nav" aria-label={label("shell.nav.aria")}>
+            <Link
+              className="cb-brand"
+              href="/"
+              aria-label={label("shell.brand.aria")}
+              aria-current={isActive("/") ? "page" : undefined}
+            >
+              <BrandMark size={18} />
+              <strong>{label("shell.name")}</strong>
+              <span className="cb-brandtag">{label("shell.role")}</span>
+            </Link>
+            {NAVLINKS.map((link) => (
+              <Link
+                key={link.href}
+                className="cb-navlink"
+                href={link.href}
+                aria-current={isActive(link.href) ? "page" : undefined}
+              >
+                {label(link.key)}
+              </Link>
+            ))}
+          </nav>
+        </header>
+
+        <main id="content" className="cb-main">
+          {children}
+        </main>
+
+        <footer className="cb-foot">
+          <div className="cb-footgrid">
+            <div className="cb-footcol cb-footabout">
+              <p className="cb-foothead">{label("shell.foot.aboutHead")}</p>
+              <p className="cb-foottext">{label("shell.foot.aboutText")}</p>
+            </div>
+            <div className="cb-footcol">
+              <p className="cb-foothead">{label("shell.foot.siteHead")}</p>
+              <Link className="cb-footlink" href="/apps">
+                {label("shell.foot.apps")}
+              </Link>
+              <Link className="cb-footlink" href="/pricing">
+                {label("shell.foot.pricing")}
+              </Link>
+              <Link className="cb-footlink" href="/blog">
+                {label("shell.foot.blog")}
+              </Link>
+              <Link className="cb-footlink" href="/support">
+                {label("shell.foot.support")}
+              </Link>
+              <Link className="cb-footlink" href="/legal">
+                {label("shell.foot.legal")}
+              </Link>
+            </div>
+            <div className="cb-footcol cb-footfamily">
+              <p className="cb-foothead">{label("shell.foot.familyHead")}</p>
+              <div className="cb-famgrid">
+                {roster().map((member) => (
+                  <a
+                    key={member.slug}
+                    className="cb-famlink"
+                    href={familyurl(member.slug)}
+                    target="_blank"
+                    rel="noreferrer"
+                    style={{ "--cb-dot": member.accent } as CSSProperties}
+                  >
+                    <span className="cb-famdot" aria-hidden="true" />
+                    {member.slug}
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+          <p className="cb-colophon">{label("shell.colophon")}</p>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+export default Shell;