/* atoms.jsx, shared building blocks for every screen.
Theme context, logo, schematic icons (1.5px stroke), money/delta type,
the seam, nav bar, buttons, segmented control, and the reusable chart. */
const ThemeCtx = React.createContext("graphite");
const useTheme = () => React.useContext(ThemeCtx);
/* Platform: "mobile" (phone bezel) or "web" (centered/full-screen).
Web suppresses mobile-only patterns like bottom-sheet drawers. */
const PlatformCtx = React.createContext("mobile");
const usePlatform = () => React.useContext(PlatformCtx);
/* ---------- logo ----------------------------------------------------------- */
const Logo = ({ size = 18, color }) => {
const p = useTheme();
const id = p === "bone" ? "logoBlack" : "logoWhite";
const fallback = p === "bone" ? "assets/logo-mark-black.png" : "assets/logo-mark-white.png";
const src = (typeof window !== "undefined" && window.__resources && window.__resources[id]) || fallback;
// CSS-mask render keeps edges crisp at every size by using the alpha as a stencil
// and painting solid color through it — avoids the soft halo the PNG renders with.
const ink = color || (p === "bone" ? "#14130f" : "#f0ece2");
return ;
};
/* ---------- icons (schematic · 1.5px · square caps) ------------------------ */
const Icon = ({ name, size = 24, stroke = 1.5, color = "currentColor", style }) => {
const s = { fill: "none", stroke: color, strokeWidth: stroke, strokeLinecap: "square", strokeLinejoin: "miter" };
const P = {
home: ,
inbox: ,
chat: ,
accounts: ,
profile: ,
menu: ,
back: ,
close: ,
external: ,
eye: ,
plus: ,
arrow: ,
up: ,
down: ,
send: ,
swap: ,
check: ,
bolt: ,
shield: ,
trade: ,
receipt: ,
whatsapp: ,
mail: ,
message: ,
bell: ,
bulb: ,
dot: ,
gear: ,
doc: ,
lifebuoy: ,
phone: ,
clock: ,
trash: ,
search: ,
filter: ,
download: ,
card: ,
bank: ,
connect: ,
lock: ,
terminal: ,
copy: ,
robot: ,
display: ,
easel: ,
studio: ,
route: ,
}[name];
return ;
};
/* ---------- type atoms ----------------------------------------------------- */
const Eyebrow = ({ children, color = "var(--ink-3)", style }) => (
{children}
);
// Mono money with greyed decimals. `size` is px.
const Money = ({ value, size = 16, weight = 500, dp = 2, color = "var(--ink)", dim = "var(--ink-3)", prefix = "$", sign = false, style }) => {
const m = money(value, dp);
const lead = sign ? (m.neg ? "−" : "+") : (m.neg ? "−" : "");
return (
{lead}{prefix}{m.whole}{m.dec && .{m.dec}}
);
};
const Delta = ({ abs, pct: p, size = 12, showAbs = true }) => {
const pos = (abs != null ? abs : p) >= 0;
const c = pos ? "var(--accent-pos)" : "var(--signal-neg)";
return (
{showAbs && abs != null && p != null ? perf(abs, p) : <>{showAbs && abs != null && signed(abs)}{p != null && pct(p)}}
);
};
const LiveDot = ({ size = 5, color = "var(--accent)" }) => (
);
/* ---------- the seam · the signature 1px accent line ----------------------- */
const Seam = ({ draw = false, style }) => (
);
/* ---------- nav bar -------------------------------------------------------- */
const NavBar = ({ title, onBack, right, left, sub, border = true }) => (
{onBack && (
)}
{left}
{right}
{options.map((o, i) => {
const v = typeof o === "string" ? o : o.value;
const label = typeof o === "string" ? o : o.label;
const on = v === value;
return (
);
})}
);
};
/* ---------- channel glyph -------------------------------------------------- */
const ChannelTag = ({ channel }) => {
const map = { "in-app": ["message", "In-app"], whatsapp: ["whatsapp", "WhatsApp"], email: ["mail", "Email"], imessage: ["message", "iMessage"] };
const [icon, label] = map[channel] || ["message", channel];
return (
{label}
);
};
/* ============================================================
Chart · reusable line/area with optional markers + scrubber.
Renders at a fixed coordinate space, scales to container width.
============================================================ */
const Chart = ({ data, height = 150, accent = "var(--accent)", fillColor, fill = true, markers = [], activeMarker = null, onPickMarker, scrub = false, onScrub, baseline = true, padY = 10 }) => {
const fillC = fillColor || accent;
const W = 350, H = height;
const svgRef = useRef(null);
const min = Math.min(...data), max = Math.max(...data);
const range = max - min || 1;
const x = (i) => (i / (data.length - 1)) * W;
const y = (v) => padY + (1 - (v - min) / range) * (H - padY * 2);
const path = data.map((v, i) => `${i === 0 ? "M" : "L"}${x(i).toFixed(2)},${y(v).toFixed(2)}`).join(" ");
const lastX = x(data.length - 1), lastY = y(data[data.length - 1]);
const [hover, setHover] = useState(null);
const gesture = useRef({ down: false, moved: false, startX: 0 });
const interactive = scrub || markers.length > 0;
const idxFromClient = (clientX) => {
const rect = svgRef.current.getBoundingClientRect();
const rel = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
return Math.round(rel * (data.length - 1));
};
const onDown = (clientX) => { gesture.current = { down: true, moved: false, startX: clientX }; };
const onMove = (clientX) => {
const g = gesture.current;
if (!g.down) return;
if (!g.moved && Math.abs(clientX - g.startX) < 5) return;
g.moved = true;
if (scrub) { const idx = idxFromClient(clientX); setHover(idx); onScrub && onScrub(idx, data[idx]); }
};
const onUp = (clientX) => {
const g = gesture.current;
gesture.current = { down: false, moved: false, startX: 0 };
if (g.moved) { setHover(null); onScrub && onScrub(null); return; }
// a tap (not a drag) → toggle the nearest marker
if (markers.length && onPickMarker) {
const tapped = idxFromClient(clientX);
let best = -1, bestD = 3;
markers.forEach((m, i) => { const d = Math.abs(m.idx - tapped); if (d <= bestD) { bestD = d; best = i; } });
onPickMarker(best === -1 ? null : (activeMarker === best ? null : best));
}
};
const cancel = () => { if (gesture.current.moved) { setHover(null); onScrub && onScrub(null); } gesture.current = { down: false, moved: false, startX: 0 }; };
return (
);
};
/* ---------- AI news brief · synthesized summary + cited, clickable sources ---
`data` = { when, brief:[{t, s, tkr?}], sources:[{pub, head, when, url}] }
Each clause carries an inline citation that opens its source; a Sources list
below repeats them as tappable rows that click out to the article. ---------- */
const NewsBrief = ({ data, onAsk, askLabel = "Ask a follow-up", hideSources, hideByline }) => {
const cite = {
fontFamily: "var(--f-mono)", fontSize: 9.5, fontWeight: 600, lineHeight: 1,
verticalAlign: "0.45em", color: "var(--accent)", textDecoration: "none",
padding: "1px 3px", margin: "0 1px", borderRadius: 4,
background: "color-mix(in srgb, var(--accent) 12%, transparent)", cursor: "pointer",
};
return (
{/* attribution header */}
{!hideByline && (
Synthesized by Yoshi
{data.when}
)}
{/* the synthesis · prose with inline citations */}
{data.brief.map((b, i) => (
{b.tkr && {b.tkr}}
{b.t}.
{b.s != null && e.stopPropagation()}>{b.s + 1}}
{i < data.brief.length - 1 ? " " : ""}
))}
{/* sources · each row clicks out to the article */}
{!hideSources && (
<>
Sources · {data.sources.length}
{data.sources.map((src, i) => (
{i + 1}
{src.pub}
{src.when}
{src.head}
))}
)}
{/* follow-up affordance */}
{onAsk && (
)}