// app.jsx — v2 top-level composition. // // New shape, same content. The page now reads (top→bottom): // // slim, one sentence // sticky · type your branch once // who started the work? (DIY vs. Claude) // 6 tiles by "what just happened" // / to focus · indexes every errorTable row // {LaneCard × 3} same content as v1, with live variables // demoted — matrix + flowchart for the curious // (in right rail) // +

// // data.jsx and parts.jsx are untouched. Variable substitution is wired by // wrapping every CodeBlock in a tiny that runs the raw string through // useTemplate(), so existing snippets like `git switch -c ` light up. const { useState: vS, useEffect: vE, useMemo: vM, useCallback: vCb, useRef: vR } = React; // ----- tiny adapter: CodeBlock + variable interpolation ---------------------- function TCode({ code, ...rest }) { const resolved = window.useTemplate(code); return ; } // ============================================================================ // Hero // ============================================================================ function Hero() { return (

Expo + Claude Code Workflow Cheatsheet v2

Pick the right lane before you start typing.

Type your branch name once ↓ · pick the situation that matches yours · copy and run. The full lane reference lives below.

); } // ============================================================================ // LaneCard — same as v1 but mode is externally controllable and CodeBlock // usages go through so variables interpolate. // ============================================================================ function LaneCard({ lane, externalMode, onSeen }) { const hasModes = Array.isArray(lane.modes) && lane.modes.length > 0; const [modeId, setMode] = vS(hasModes ? lane.modes[0].id : null); const [tab, setTab] = vS("steps"); // Honour externally requested mode (from situation picker / error search) vE(() => { if (hasModes && externalMode && externalMode !== modeId) { setMode(externalMode); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [externalMode]); const tabs = [ { id: "steps", label: "Steps" }, { id: "diagram", label: "Diagram" }, { id: "gotchas", label: "Gotchas" }, { id: "commands", label: "Commands" }, ]; const mode = hasModes ? lane.modes.find((m) => m.id === modeId) : null; const view = hasModes ? { ...lane, ...mode } : lane; const accent = lane.accent; return (

Lane {lane.n} · {lane.short} · {view.tag}

{view.title}

Use when: {view.when}

{view.whyNot && (

Why not a PR? {view.whyNot}

)}

{hasModes && (

)}

{tab === "steps" && } {tab === "diagram" && } {tab === "gotchas" && } {tab === "commands" && }

); } function StepsView({ lane }) { return (

{lane.painPoint && (

{lane.painPoint.h}

{lane.painPoint.b}

{lane.painPoint.table.map((r, i) => ( ))}

Approach	One-time setup	Per-worktree cost	Notes
{r.approach}	{r.setup}	{r.cost}	{r.note}

)}

{i + 1}

{s.h}

{lane.stuck && (

{lane.stuck.h}

{lane.stuck.b}

)}

); } function DiagramView({ lane }) { const D = lane.diagram === "timeline-l1" ? : lane.diagram === "parallel-l2" ? : lane.diagram === "review-l2" ? : lane.diagram === "lifecycle-l3" ? : null; const caption = lane.diagram === "timeline-l1" ? "Branch born off dev, one commit, merged fast-forward, branch deleted." : lane.diagram === "parallel-l2" ? "Main repo and each worktree work in parallel. PRs are the one true path back to dev." : lane.diagram === "review-l2" ? "Cloud agent path — your main repo briefly diverts to the agent's branch in place, verifies, then returns to dev. Local agent path is shorter: the branch is already in .claude/worktrees/, so you cd in instead of checking out." : "active → (agent) locked → unlock → active → remove. The dashed path is the trap — rm -rf leaves an orphan only prune can fix."; return (

{D}

{caption}

); } function GotchasView({ lane }) { return (

{lane.errorTable && (

Error → cause → fix

{lane.errorTable.map((r, i) => ( ))}

Symptom	Cause	Fix
{r.sym}	{r.cause}	{r.fix}

)}

{lane.gotchas.map((g, i) => (

{g.h}

{g.b &&

{g.b}

} {g.code &&

}

))}

); } function CommandsView({ lane }) { return (

Quick reference — placeholders update from the toolbar above.

); } // ============================================================================ // Decision matrix + flowchart — demoted to "More references" // ============================================================================ function MoreReferences({ goto }) { const { MATRIX } = window.CHEAT; const [open, setOpen] = vS(false); return (

{open && (

Pick by change size {MATRIX.map((r, i) => { const L = window.CHEAT.LANES[r.lane - 1]; return ( goto({ laneId: L.id })} style={{ cursor: "pointer" }} onMouseEnter={(e) => e.currentTarget.style.background = L.accentBg} onMouseLeave={(e) => e.currentTarget.style.background = ""} > ); })}

Change size	Parallel agent?	Go to
{r.size}	{r.parallel}	goto({ laneId: id })} />

Or follow the questions goto({ laneId: id })} />

)}

); } function Eyebrow({ children }) { return

{children}

; } function Th({ children, style }) { return {children}; } function Td({ children, style }) { return {children}; } // ============================================================================ // ConceptsPanel — unchanged from v1 // ============================================================================ function ConceptsPanel() { const [openId, setOpenId] = vS(null); const { CONCEPTS } = window.CHEAT; return ( ); } function AntiPatterns() { const { ANTI } = window.CHEAT; return (

Don't

Anti-patterns

×

{a.h} — {a.b}

); } function Footer() { return ( ); } // ============================================================================ // App // ============================================================================ function App() { const { LANES } = window.CHEAT; const errorRef = vR(null); // pending external mode per lane id (set by situation picker / error search) const [pendingModes, setPendingModes] = vS({}); const goto = vCb((arg) => { // arg can be a string id (legacy) or { laneId, modeId, action } const target = typeof arg === "string" ? { laneId: arg } : (arg || {}); if (target.action === "focus-error") { errorRef.current && errorRef.current.focus(); const el = document.getElementById("error-search"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); return; } if (target.action === "scroll-flowchart") { const el = document.getElementById("more-refs"); if (el) { el.scrollIntoView({ behavior: "smooth", block: "start" }); // auto-open const btn = el.querySelector("button"); if (btn && btn.getAttribute("aria-expanded") !== "true") btn.click(); } return; } if (target.modeId) { setPendingModes((m) => ({ ...m, [target.laneId]: target.modeId })); } const el = document.getElementById(target.laneId); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }, []); // active-lane highlight in floating rail const [active, setActive] = vS(null); vE(() => { const ids = LANES.map((l) => l.id); const obs = new IntersectionObserver( (entries) => entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id); }), { rootMargin: "-30% 0px -60% 0px", threshold: 0 } ); ids.forEach((id) => { const el = document.getElementById(id); if (el) obs.observe(el); }); return () => obs.disconnect(); }, []); return (

goto({ action: a })} />

{LANES.map((l) => ( ))}

); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();