@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/components/finance-tearsheet/strategy-sheet-model.ts

@@ -0,0 +1,238 @@
+/**
+ * Strategy tear sheet model shared by the marketing band, the strategy page,
+ * and the quant TUI. Figures come only from the payload. A missing number
+ * stays null (the renderer draws an em dash). A chart series is omitted
+ * until it holds two finite values.
+ */
+
+export type StrategySheetMetric = {
+  label: string;
+  /** Preformatted figure. Null is unpublished. */
+  value: string | null;
+  tone?: "pos" | "neg";
+};
+
+export type StrategySheetPoint = { t: string; v: number };
+
+export type StrategySheetBar = { t: string; o: number; h: number; l: number; c: number };
+
+export type StrategySheetModel = {
+  title: string;
+  symbol: string;
+  metrics: StrategySheetMetric[];
+  position: StrategySheetMetric[];
+  equity: StrategySheetPoint[] | null;
+  drawdown: StrategySheetPoint[] | null;
+  price: StrategySheetBar[] | null;
+  trades: { columns: string[]; rows: string[][] } | null;
+};
+
+const TRADE_COLUMNS = ["Direction", "Entry date", "Entry", "Exit date", "Exit", "Return"];
+const BARS = "▁▂▃▄▅▆▇█";
+
+function rec(value: unknown): Record<string, unknown> | null {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : null;
+}
+
+function finite(value: unknown): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
+
+function text(value: unknown): string | null {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+
+function toneOf(value: number | null): "pos" | "neg" | undefined {
+  if (value === null || value === 0) return undefined;
+  return value > 0 ? "pos" : "neg";
+}
+
+function pct(value: number | null): string | null {
+  if (value === null) return null;
+  return `${value.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}%`;
+}
+
+function num(value: number | null, digits: number): string | null {
+  if (value === null) return null;
+  return value.toLocaleString("en-US", { minimumFractionDigits: digits, maximumFractionDigits: digits });
+}
+
+function metric(label: string, value: number | null, format: "pct" | "num" | "count"): StrategySheetMetric {
+  if (format === "pct") return { label, value: pct(value), tone: toneOf(value) };
+  if (format === "count") return { label, value: value === null ? null : String(Math.trunc(value)) };
+  return { label, value: num(value, 2), tone: toneOf(value) };
+}
+
+function yearsBetween(start: string, end: string): number | null {
+  const a = Date.parse(start);
+  const b = Date.parse(end);
+  if (!Number.isFinite(a) || !Number.isFinite(b) || b <= a) return null;
+  return (b - a) / (365.25 * 24 * 3600 * 1000);
+}
+
+/** CAGR from real capital and dates. Missing inputs stay unpublished. */
+export function sheetCagr(initial: number | null, final: number | null, start: string | null, end: string | null): number | null {
+  if (initial === null || final === null || initial <= 0 || final <= 0 || !start || !end) return null;
+  const years = yearsBetween(start, end);
+  if (years === null) return null;
+  return (Math.pow(final / initial, 1 / years) - 1) * 100;
+}
+
+/** Dated numeric series. Fewer than two finite points is not a chart. */
+export function seriesOrNull(value: unknown): StrategySheetPoint[] | null {
+  if (!Array.isArray(value)) return null;
+  const points: StrategySheetPoint[] = [];
+  for (const item of value) {
+    const row = rec(item);
+    const t = text(row?.t);
+    const v = finite(row?.v);
+    if (!t || v === null) continue;
+    points.push({ t, v });
+  }
+  return points.length >= 2 ? points : null;
+}
+
+function priceOrNull(value: unknown): StrategySheetBar[] | null {
+  if (!Array.isArray(value)) return null;
+  const bars: StrategySheetBar[] = [];
+  for (const item of value) {
+    const row = rec(item);
+    const t = text(row?.t);
+    const o = finite(row?.o);
+    const h = finite(row?.h);
+    const l = finite(row?.l);
+    const c = finite(row?.c);
+    if (!t || o === null || h === null || l === null || c === null) continue;
+    bars.push({ t, o, h, l, c });
+  }
+  return bars.length >= 2 ? bars : null;
+}
+
+function isDca(row: Record<string, unknown> | null): boolean {
+  if (!row) return false;
+  if (rec(row.dca)) return true;
+  if (row.kind === "dca") return true;
+  const strategy = text(row.strategy);
+  return strategy !== null && strategy.includes("sdca");
+}
+
+function dashCell(value: string | null): string {
+  return value ?? "—";
+}
+
+function tradeRows(value: unknown): string[][] | null {
+  if (!Array.isArray(value)) return null;
+  const rows: string[][] = [];
+  for (const item of value) {
+    const row = rec(item);
+    if (!row) continue;
+    const entryDate = text(row.entry_date);
+    const entry = finite(row.entry_price);
+    const exitDate = text(row.exit_date);
+    const exit = finite(row.exit_price);
+    const ret = finite(row.pnl_pct);
+    const direction = text(row.direction);
+    if (!entryDate && entry === null && !exitDate && exit === null) continue;
+    rows.push([
+      dashCell(direction),
+      dashCell(entryDate),
+      dashCell(num(entry, 2)),
+      dashCell(exitDate),
+      dashCell(num(exit, 2)),
+      dashCell(pct(ret)),
+    ]);
+  }
+  return rows.length > 0 ? rows : null;
+}
+
+function positionOf(row: Record<string, unknown> | null): StrategySheetMetric[] {
+  const signal = rec(row?.current_signal);
+  const place = text(signal?.position);
+  const entry = text(signal?.entry_label);
+  const mark = finite(signal?.last_price);
+  const asOf = text(signal?.last_signal_date);
+  return [
+    { label: "Position", value: place },
+    { label: "Entry", value: entry },
+    { label: "Mark", value: num(mark, 2) },
+    { label: "As of", value: asOf },
+  ];
+}
+
+function metricsOf(row: Record<string, unknown> | null): StrategySheetMetric[] {
+  const dca = rec(row?.dca);
+  if (isDca(row)) {
+    const total = finite(row?.net_profit_pct);
+    const dd = finite(row?.max_drawdown_pct);
+    const vs = finite(dca?.vs_lump_pct) ?? finite(row?.vs_lump_pct);
+    const allocated = finite(dca?.allocated_pct) ?? finite(row?.allocated_pct);
+    return [
+      metric("Total return", total, "pct"),
+      metric("Max DD", dd, "pct"),
+      metric("Vs lump", vs, "pct"),
+      metric("Allocated", allocated, "pct"),
+    ];
+  }
+  const cagr = sheetCagr(
+    finite(row?.initial_capital),
+    finite(row?.final_equity),
+    text(row?.period_start),
+    text(row?.period_end),
+  );
+  return [
+    metric("CAGR", cagr, "pct"),
+    metric("Max DD", finite(row?.max_drawdown_pct), "pct"),
+    metric("Profit factor", finite(row?.profit_factor), "num"),
+    metric("Win rate", finite(row?.win_rate_pct), "pct"),
+    metric("Avg trade", finite(row?.avg_trade_pct), "pct"),
+    metric("Trades", finite(row?.total_trades), "count"),
+  ];
+}
+
+/** One strategy sheet. `data` null, or a payload that is not a tearsheet, publishes nothing. */
+export function buildStrategyTearsheet(
+  data: unknown,
+  fallback: { title: string; symbol: string },
+): StrategySheetModel {
+  const row = rec(data);
+  const trades = tradeRows(row?.trades);
+  return {
+    title: text(row?.label) ?? fallback.title,
+    symbol: text(row?.symbol) ?? fallback.symbol,
+    metrics: metricsOf(row),
+    position: positionOf(row),
+    equity: seriesOrNull(row?.equity_curve),
+    drawdown: seriesOrNull(row?.drawdown_curve),
+    price: priceOrNull(row?.ohlc_bars),
+    trades: trades ? { columns: TRADE_COLUMNS, rows: trades } : null,
+  };
+}
+
+/** Block-character chart. One value, or a non-finite value, is not a chart. */
+export function seriesSparkline(values: readonly number[], width = 24): string | null {
+  const finiteValues = values.filter((value) => Number.isFinite(value));
+  if (finiteValues.length < 2) return null;
+  const sampled = finiteValues.length <= width ? finiteValues : sample(finiteValues, width);
+  const lo = Math.min(...sampled);
+  const hi = Math.max(...sampled);
+  const span = hi - lo;
+  return sampled
+    .map((n) => {
+      if (span === 0) return BARS[3] ?? BARS[0];
+      const index = Math.round(((n - lo) / span) * (BARS.length - 1));
+      return BARS[Math.min(BARS.length - 1, Math.max(0, index))] ?? BARS[0];
+    })
+    .join("");
+}
+
+function sample(values: number[], width: number): number[] {
+  const last = values.length - 1;
+  const out: number[] = [];
+  for (let i = 0; i < width; i += 1) {
+    const value = values[Math.round((i * last) / (width - 1))];
+    if (value !== undefined) out.push(value);
+  }
+  return out;
+}

package/src/components/finance-tearsheet/types.ts

@@ -0,0 +1,58 @@
+/**
+ * finance-tearsheet data shapes (#1463) — the chart-facing subset of the
+ * unified TearsheetData schema, promoted from
+ * apps/digiquant-web/components/tearsheet/{types,trades}.ts. Only what
+ * the family's render surfaces consume lives here; full tearsheet payload
+ * types and their derivation pipelines (series clipping, pivot stats, trade
+ * sorting) stay app-owned data wiring.
+ */
+
+/** One point of a dated series (equity, drawdown, cumulative P&L …). */
+export interface TearsheetSeriesPoint {
+  t: string;
+  v: number;
+}
+
+/** One daily OHLC bar for the price candlestick chart. */
+export interface TearsheetOhlcBar {
+  t: string;
+  o: number;
+  h: number;
+  l: number;
+  c: number;
+}
+
+/** One round-trip trade — drives markers, hover cards, and trade-log rows. */
+export interface TearsheetTrade {
+  n: number;
+  direction: "long" | "short";
+  entry_label: string;
+  entry_date: string;
+  entry_price: number;
+  exit_date: string;
+  exit_price: number;
+  qty: number;
+  pnl: number;
+  pnl_pct: number;
+  equity_after: number;
+  exit_reason: string;
+  max_runup_pct: number;
+  max_drawdown_pct: number;
+}
+
+/** Open round-trip still marked to market (no realized P&L yet). */
+export function isOpenTrade(t: TearsheetTrade): boolean {
+  return !t.exit_date || t.exit_reason === "open";
+}
+
+/** One bar on the per-trade return chart. */
+export interface TradeReturnBar {
+  /** X-axis date (exit for closed; period end for the open leg). */
+  t: string;
+  /** Realized or unrealized return (%). */
+  pct: number;
+  /** Unrealized open position — rendered highlighted at the end. */
+  open: boolean;
+  /** Source trade for hover tooltips. */
+  trade: TearsheetTrade;
+}

package/src/components/footer/FooterCells.tsx

@@ -0,0 +1,109 @@
+/**
+ * The footer as a hairline table, not a link cloud (D1, #4429). Every top-level
+ * destination gets one cell of equal weight, separated by the same 1px hairline
+ * the rest of the site is drawn with, and the legal strip sits underneath.
+ * This is the opencode.ai footer: one closed rectangle of centred cells, no
+ * column headings, no nested groups, no background change. The legal line
+ * (copyright, privacy, sibling site, profiles) sits outside the rectangle.
+ * The row is two cells wide until the viewport can hold five across.
+ */
+
+import type { ReactNode } from "react";
+
+export interface FooterCell {
+  /** Sentence-case destination name. */
+  label: string;
+  href: string;
+  external?: boolean;
+  /** Optional muted footnote beside the label, e.g. a release tag or a count. */
+  note?: string;
+}
+
+export interface FooterMetaLink {
+  label: string;
+  href: string;
+  external?: boolean;
+}
+
+export interface FooterCellsProps {
+  cells: FooterCell[];
+  /** One line of meta, e.g. "© 2026 digithings · open core". */
+  meta?: string;
+  /** Legal-strip links rendered after the meta line. */
+  metaLinks?: FooterMetaLink[];
+  /** Quiet profile row (typically <SocialRow/>) on the legal strip. */
+  profiles?: ReactNode;
+  /** How many equal cells sit on one row once the viewport is wide enough. */
+  columns?: 3 | 4 | 5;
+  /** Block between the boxes and the legal strip — the columnar sitemap. */
+  below?: ReactNode;
+  className?: string;
+}
+
+const NAV_CLASS = {
+  3: "grid grid-cols-1 border-t border-l border-hair sm:grid-cols-3",
+  4: "grid grid-cols-2 border-t border-l border-hair sm:grid-cols-4",
+  5: "grid grid-cols-2 border-t border-l border-hair lg:grid-cols-5",
+} as const;
+
+const CELL =
+  "flex min-h-[4.5rem] items-center justify-center gap-[0.55rem] border-r border-b border-hair px-[0.75rem] py-[1.15rem] text-center font-mono text-[1rem] leading-[1.4] text-ink no-underline transition-colors duration-150 ease-brand hover:bg-surface-2 focus-visible:bg-surface-2 focus-visible:ring-[3px] focus-visible:ring-accent/30 focus-visible:outline-none lg:min-h-[5.5rem]";
+
+export function FooterCells({
+  cells,
+  meta,
+  metaLinks,
+  profiles,
+  columns = 5,
+  below,
+  className,
+}: FooterCellsProps) {
+  const legal = Boolean(meta || metaLinks?.length || profiles);
+  return (
+    <footer
+      className={[
+        "mx-auto w-full max-w-[calc(var(--frame-w)+2*var(--page-pad))]",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
+      <nav aria-label="Footer" className={NAV_CLASS[columns]}>
+        {cells.map((cell) => (
+          <a
+            key={cell.href + cell.label}
+            href={cell.href}
+            target={cell.external ? "_blank" : undefined}
+            rel={cell.external ? "noopener noreferrer" : undefined}
+            className={CELL}
+          >
+            <span>{cell.label}</span>
+            {cell.note ? (
+              <span className="text-[var(--type-meta)] tracking-[0.02em] text-ink-mute">
+                [{cell.note}]
+              </span>
+            ) : null}
+          </a>
+        ))}
+      </nav>
+      {below}
+      {legal ? (
+        <div className="footer-legal flex flex-wrap items-center justify-center gap-x-[1.25rem] gap-y-[0.75rem] px-[var(--page-pad)] py-[1.35rem] font-mono text-[var(--type-meta)] tracking-[0.02em] text-ink-mute">
+          {meta ? <span>{meta}</span> : null}
+          {metaLinks?.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              target={link.external ? "_blank" : undefined}
+              rel={link.external ? "noopener noreferrer" : undefined}
+              className="underline-offset-[3px] hover:text-ink hover:underline"
+            >
+              {link.label}
+            </a>
+          ))}
+          {profiles}
+        </div>
+      ) : null}
+    </footer>
+  );
+}

package/src/components/footer/index.ts

@@ -0,0 +1,6 @@
+export {
+  FooterCells,
+  type FooterCell,
+  type FooterCellsProps,
+  type FooterMetaLink,
+} from "./FooterCells";

package/src/components/graph.tsx

@@ -0,0 +1,158 @@
+"use client";
+/**
+ * Scrollytelling module graph. Desktop: a pinned graph whose focus advances
+ * node-by-node with scroll, a side panel describing the focused module. Mobile
+ * or reduced-motion: a static vertical stepper of module cards. Reuses the
+ * v1 graph geometry + activation logic (active node + incident edges + neighbours).
+ */
+import { useEffect, useRef, useState } from "react";
+import { useScroll, useMotionValueEvent } from "motion/react";
+import { modules, edges, type ModuleNode } from "../data/modules";
+import { Emblem } from "./emblems";
+import { StackRow } from "./StackLogo";
+
+const ordered = [...modules].sort((a, b) => a.graphOrder - b.graphOrder);
+
+function neighboursOf(id: string): Set<string> {
+  const near = new Set<string>([id]);
+  for (const e of edges) {
+    if (e.a === id) near.add(e.b);
+    if (e.b === id) near.add(e.a);
+  }
+  return near;
+}
+
+export function GraphSVG({ activeId, onPick }: { activeId: string | null; onPick: (id: string) => void }) {
+  const near = activeId ? neighboursOf(activeId) : null;
+  return (
+    <svg className="dg-graph" viewBox="0 0 920 560" role="img" aria-label="digithings module graph" preserveAspectRatio="xMidYMid meet">
+      <g>
+        {edges.map((e, i) => {
+          const a = modules.find((m) => m.id === e.a)!.graph;
+          const b = modules.find((m) => m.id === e.b)!.graph;
+          const active = activeId != null && (e.a === activeId || e.b === activeId);
+          return (
+            <line key={i} className={`dg-edge${active ? " on" : ""}${near ? " has-active" : ""}`}
+              x1={a.x} y1={a.y} x2={b.x} y2={b.y} />
+          );
+        })}
+      </g>
+      <g>
+        {modules.map((m) => {
+          const dim = near != null && !near.has(m.id);
+          const on = m.id === activeId;
+          return (
+            <g key={m.id} className={`dg-node${m.graph.hub ? " hub" : ""}${on ? " on" : ""}${dim ? " dim" : ""}`}
+              transform={`translate(${m.graph.x} ${m.graph.y})`} tabIndex={0} role="button"
+              aria-label={m.name} onClick={() => onPick(m.id)}
+              onKeyDown={(ev) => { if (ev.key === "Enter" || ev.key === " ") { ev.preventDefault(); onPick(m.id); } }}>
+              <circle className="halo" r={m.graph.r + 12} />
+              <circle className="node" r={m.graph.r} />
+              <text className="label" y={m.graph.r + 18}>{m.name}</text>
+            </g>
+          );
+        })}
+      </g>
+    </svg>
+  );
+}
+
+function ModulePanel({
+  m,
+  hrefForModule,
+}: {
+  m: ModuleNode;
+  hrefForModule: (id: string) => string;
+}) {
+  return (
+    <div className="dg-panel" key={m.id}>
+      <div className="dg-panel-head">
+        <Emblem id={m.emblem} size={40} />
+        <div>
+          <span className={`dg-tier t-${m.tier}`}>{m.tier}</span>
+          <h3>{m.name}</h3>
+        </div>
+      </div>
+      <p className="dg-tag">{m.tagline}</p>
+      <StackRow items={m.stack} />
+      {m.dockerCmd && (
+        <div className="dg-docker"><span className="prompt">$</span> {m.dockerCmd}</div>
+      )}
+      <a className="dg-more" href={hrefForModule(m.id)}>man {m.id} →</a>
+    </div>
+  );
+}
+
+export function ScrollyGraph({
+  hrefForModule = (id: string) => `/modules/${id}`,
+}: {
+  /** Host-owned module URL. Defaults to the `/modules/[id]` host contract. */
+  hrefForModule?: (id: string) => string;
+}) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [idx, setIdx] = useState(0);
+  const [hover, setHover] = useState<string | null>(null);
+  const [stepper, setStepper] = useState(false);
+
+  useEffect(() => {
+    const mq = matchMedia("(max-width: 860px), (prefers-reduced-motion: reduce)");
+    const apply = () => setStepper(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+
+  const { scrollYProgress } = useScroll({ target: trackRef, offset: ["start start", "end end"] });
+  useMotionValueEvent(scrollYProgress, "change", (p) => {
+    const n = ordered.length;
+    setIdx(Math.max(0, Math.min(n - 1, Math.floor(p * n))));
+  });
+
+  if (stepper) {
+    return (
+      <div className="dg-stepper">
+        {ordered.map((m) => (
+          <article className="dg-step" key={m.id}>
+            <GraphMini activeId={m.id} />
+            <ModulePanel m={m} hrefForModule={hrefForModule} />
+          </article>
+        ))}
+      </div>
+    );
+  }
+
+  const activeId = hover ?? ordered[idx].id;
+  const activeMod = modules.find((m) => m.id === activeId)!;
+  return (
+    <div ref={trackRef} className="dg-track" style={{ height: `${ordered.length * 90}vh` }}>
+      <div className="dg-stage">
+        <div className="dg-stage-grid">
+          <div className="dg-graph-wrap"
+            onMouseLeave={() => setHover(null)}
+            onMouseOver={(e) => {
+              const g = (e.target as Element).closest?.(".dg-node") as SVGGElement | null;
+              const lbl = g?.getAttribute("aria-label");
+              if (lbl) setHover(modules.find((m) => m.name === lbl)?.id ?? null);
+            }}>
+            <GraphSVG activeId={activeId} onPick={(id) => { location.href = hrefForModule(id); }} />
+          </div>
+            <ModulePanel m={activeMod} hrefForModule={hrefForModule} />
+        </div>
+        <div className="dg-rail" aria-hidden="true">
+          {ordered.map((m, i) => (
+            <span key={m.id} className={`dg-tick${i === idx ? " on" : ""}`} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** Small static graph used in the mobile stepper (one node highlighted). */
+function GraphMini({ activeId }: { activeId: string }) {
+  return (
+    <div className="dg-graph-mini">
+      <GraphSVG activeId={activeId} onPick={() => {}} />
+    </div>
+  );
+}

package/src/components/icons.tsx

@@ -0,0 +1,98 @@
+/**
+ * Brand/interface icon primitives shared across the marketing sites and the
+ * reference. Each is a pure className-passthrough SVG: it applies NO Tailwind
+ * utilities of its own, so it needs no `@source` line — the call-site
+ * className is scanned by the consuming app. Colours come from `currentColor`,
+ * so an icon inherits ink in chrome and accent inside a livery scope.
+ */
+import { type SVGProps } from "react";
+
+/**
+ * GitHubGlyph — the simplified GitHub octocat mark. Inlined byte-identically
+ * (viewBox 0 0 24 24, the same `d`) in digithings.ai's DtNav, digiquant.io's
+ * SiteNav and CloneRepoButton, and the nav-shell reference specimen until
+ * #1436 promoted it here. Defaults to 18×18 in `currentColor`; pass a
+ * `className` (or any svg attr — width/height override the defaults) at the
+ * call site. Distinct from the symbols catalog's `Glyph name="github"`, which
+ * draws the fuller official Simple Icons path.
+ */
+export function GitHubGlyph({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="18"
+      height="18"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.2.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .4.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z" />
+    </svg>
+  );
+}
+
+/** Google “G” — four brand fills so the mark reads at 18px. Decorative. */
+export function GoogleGlyph({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="18"
+      height="18"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path
+        fill="#4285F4" // canon-allow: Google brand blue (official G mark)
+        d="M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.4h6.5c-.3 1.5-1.1 2.7-2.4 3.5v2.9h3.8c2.3-2.1 3.6-5.2 3.6-8.5z"
+      />
+      <path
+        fill="#34A853" // canon-allow: Google brand green (official G mark)
+        d="M12 24c3.2 0 5.9-1.1 7.9-2.9l-3.8-2.9c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.3v3c2 4 6.1 6.6 10.7 6.6z"
+      />
+      <path
+        fill="#FBBC05" // canon-allow: Google brand yellow (official G mark)
+        d="M5.3 14.4c-.2-.7-.4-1.5-.4-2.4s.1-1.7.4-2.4V6.6H1.3C.5 8.2 0 10 0 12s.5 3.8 1.3 5.4l4-3z"
+      />
+      <path
+        fill="#EA4335" // canon-allow: Google brand red (official G mark)
+        d="M12 4.8c1.8 0 3.3.6 4.6 1.8l3.4-3.4C17.9 1.2 15.2 0 12 0 7.4 0 3.3 2.6 1.3 6.6l4 3c.9-2.9 3.6-4.8 6.7-4.8z"
+      />
+    </svg>
+  );
+}
+
+/** LinkedIn “in” mark. currentColor so it tracks ink. Decorative. */
+export function LinkedInGlyph({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="18"
+      height="18"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+    </svg>
+  );
+}
+
+/** X mark. currentColor so it tracks ink. Decorative. */
+export function XGlyph({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width="16"
+      height="16"
+      fill="currentColor"
+      aria-hidden="true"
+      className={className}
+      {...props}
+    >
+      <path d="M18.2 2.3h3.3l-7.2 8.3 8.5 11.2h-6.6l-4.7-6.2-5.4 6.2H2.7l7.8-8.8L1.3 2.3h6.8l4.3 5.6 5.8-5.6zm-1.2 17.5h1.8L7.1 4.1H5.1l11.9 15.7z" />
+    </svg>
+  );
+}