@wenathlan/cobaia 0.0.0-stage → 2.0.155

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;