/* eslint-disable */ const { useState, useEffect, useMemo, useRef } = React; // ---------- Atoms ---------- function Kicker({ children }) { return
{children}
; } function StepNumber({ n }) { return ; } function Code({ children }) { return {children}; } /* i18n prose may carry [label](/root/absolute) links; everything else is text. Never call it inside an element that is itself a link: nested anchors. */ function rich(text) { if (typeof text !== "string" || text.indexOf("](") === -1) return text; const re = /\[([^\]]+)\]\(([^)\s]+)\)/g; const out = []; let last = 0, m; while ((m = re.exec(text))) { if (m.index > last) out.push(text.slice(last, m.index)); out.push({m[1]}); last = m.index + m[0].length; } if (last < text.length) out.push(text.slice(last)); return out; } function Cmd({ lines, t }) { return ( 
      {lines.map((l, i) => (
        
          {String(i+1).padStart(2,"0")}
          $
          {l}
        
      ))}
); } function Callout({ kind, title, children }) { return (
{title}
{children}
); } function ScreenshotSlot({ id, label, caption, t, aspect = "16/10", src, fit }) { return (
{src ? "SCREENSHOT" : "PLACEHOLDER"} {label} {caption && {caption}}
); } /* Pairs stack by default so each image gets the full column width. `split` puts them side by side, with `cols` for the unequal split a tall-plus-wide pair needs. */ function ScreenshotPair({ children, split, cols }) { return (
{children}
); } // ---------- Diagram ---------- function ArchitectureDiagram({ t }) { const d = t.diagram; return (
{d.title}
{/* Left: the only thing on your own machine */} {d.laptopZone} {d.browserTitle} {d.browserSub} {d.arrow1} {/* Middle: the door */} {d.doorTitle} {d.doorSub} {d.arrow2} {/* Right: the machine that is theirs */} {d.cloudZone} {d.claudeTitle} {d.claudeSub} {d.filesTitle} {d.filesSub} {/* The hop the old drawing never showed: the screen comes back */} {d.returnLabel}
{d.notes.map((n, i) => (

{n.h}

{n.p}

))}
); } // ---------- Step block ---------- function StepBlock({ id, n, data, t, heading, screenshotSlot, children }) { return (
{data.kicker && {data.kicker}} {data.time}

{heading || data.title}

{data.why}

    {data.items.map((it, i) => (
  1. {i+1}

    {it.h}

    {it.b}

    2. ))}
{children} {screenshotSlot}
); } // ---------- TOC ---------- function TOC({ t, items, ordered, active, onJump }) { const List = ordered ? "ol" : "ul"; return ( ); } /* The site's tracks, rendered from GUIDE_I18N.tracks so the app and the static pages cannot drift. A pending track links to / with its real destination parked in data-pending-href, which is what the fact check compares. */ function TrackNav({ tracks, lang, mode, t }) { const here = mode === "tips" ? "/tips" : "/setup"; return ( ); } // ---------- Header ---------- function Header({ lang, setLang, t, mode }) { return (
Milton Coder
{mode === "tips" ? t.tipsHead.eyebrow : t.hero.eyebrow}
); } function LangToggle({ lang, setLang, t }) { const opts = [ { id: "en", label: "EN", sub: "English" }, { id: "zhCN", label: "简体", sub: "简体中文" }, { id: "zhTW", label: "繁體", sub: "繁體中文" }, ]; return (
{t.ui.languageLabel}
{opts.map(o => ( ))}
); } // ---------- Hero ---------- function Hero({ t, items }) { return (
{t.hero.eyebrow} ⏱ {t.ui.time} · {t.ui.audience}

{t.hero.title}

{t.hero.lede}

{items.map(([id, label], i) => ( {String(i+1).padStart(2,"0")} {label} ))}
); } function TipsHead({ t }) { const d = t.tipsHead; return (
{d.eyebrow}

{d.title}

{d.lede}

); } // ───────────────────────────────────────────────────────────── // HOW WE BUILD: Tools / Saving / GitHub / Workflow / Quality / Rules / Claude rules // ───────────────────────────────────────────────────────────── function SectionHeader({ kicker, title, lede }) { return (
{kicker}

{title}

{lede &&

{lede}

}
); } function ToolsBlock({ t }) { const d = t.tools; return (
{d.groups.map((g, gi) => (
{g.name}
{g.items.map((it, i) => (
{it.name}
{it.role}
{rich(it.desc)}
))}
))}

{d.claudeWaysTitle}

{d.claudeWays.map((w, i) => (
{w.name}
{w.desc}
))}
); } function SavingBlock({ t }) { const d = t.saving; return (
{d.twoKinds.map((k, i) => (
{k.tag}
{k.trigger}

{k.desc}

))}
↪

{d.analogy}

{d.flowTitle}

{d.flow.map((s, i) => (
{String(i+1).padStart(2,"0")}
{s.tag}
{s.note}
{i < d.flow.length - 1 &&
→
} ))}
{d.warning} {d.tip}
); } function GhBlock({ t }) { const d = t.gh; return (

{d.vsTitle}

{d.vs.map((v, i) => (
{v.tag}

{v.desc}

{i === 0 &&
{d.vsDivider}
} ))}

{d.branchesTitle}

{/* main — the only long-lived branch, and production */} main {d.diagramProduction} {d.diagramMergeLive} {/* your branch — off main, back into main through one PR */} your/MILTON-123-thing PR → main
⌥

{d.branchesAnalogy}

{d.flow3dTitle && (
{d.flow3dTitle}

{d.flow3dDesc}

{d.flow3dCta} )} {d.ruleTitle && ( <>

{d.ruleTitle}

{d.rule} )}
); } function WorkflowBlock({ t }) { const d = t.workflow; let stepIdx = 0; return (
{d.groups.map((g, gi) => (
{g.steps.map((s, si) => { stepIdx += 1; return (
{String(stepIdx).padStart(2,"0")}

{s.h}

{s.b}

); })}
))}
{d.stripTitle}
{d.strip.map((s, i) => (
{s}
{i < d.strip.length - 1 &&
→
} ))}
); } function QualityBlock({ t }) { const d = t.quality; return (
{d.meiCardTitle && (
{d.meiCardTitle}

{d.meiCardDesc}

{d.meiCardCta} )}

{d.whenTitle}

{d.whenRows.map((r, i) => ( ))}
{d.whenHeading[0]} {d.whenHeading[1]}
{r[0]} {r[1]}

{d.askTitle}

{d.tip}
); } function RulesBlock({ t }) { const d = t.rules; return (
{d.items.map((it, i) => (
{it.glyph}

{it.h}

{rich(it.b)}

))}
); } function CmdBlock({ lines, t }) { // accept arbitrary lines: lines starting with "#" are comments, // lines starting with ">" are interactive prompts, others are shell. return ( 
      {lines.map((l, i) => {
        const isComment = l.trimStart().startsWith("#");
        const isPrompt  = l.trimStart().startsWith(">");
        return (
          
            {String(i+1).padStart(2,"0")}
            
              {isComment ? "#" : isPrompt ? ">" : "$"}
            
            {isComment ? l.replace(/^\s*#\s?/, "") : isPrompt ? l.replace(/^\s*>\s?/, "") : l}
          
        );
      })}
); } function CheatsheetBlock({ t }) { const d = t.cheatsheet; return (
{d.groups.map((g, i) => (
{g.name}
))}
); } function SetupBlock({ t }) { const d = t.setup; return (
≡

{d.analogy}

{d.coderNote}

{d.twoTypesTitle}

{d.twoTypes.map((r, i) => (
{r.tag}
{r.path}

{r.desc}

))}

{d.addTitle}

{d.addLede}

{d.addTip}

{d.doesTitle}

{d.does.map((it, i) => (
{it.tag}

{it.b}

))}
); } // ---------- Daily / stop / trouble / donts ---------- function DailyBlock({ t }) { const d = t.daily; return (
{d.kicker}

{d.title}

{d.lede}

{d.ways.map((w, i) => (
{String(i+1).padStart(2,"0")}
{w.name}
{w.role}
{rich(w.desc)}
))}
); } function GitIdentityBlock({ t, heading }) { const d = t.gitidentity; return (
); } function LaptopBlock({ t, heading }) { const d = t.laptop; if (!d) return null; return (
{d.items.map((it, i) => { const offsite = /^https?:/.test(it.href); return (
{it.name}
{it.role}
{it.desc}
 ); })}
); } function StopBlock({ t }) { const s = t.stop; return (
{s.kicker}

{s.title}

{s.lede}

{s.flowLabels.map((l, i) => (
{String(i+1).padStart(2,"0")} {l}
{i < s.flowLabels.length - 1 &&
→
} ))}
); } function TroubleBlock({ t }) { const tb = t.trouble; return (
{tb.kicker}

{tb.title}

{tb.rows.map((r, i) => ( ))}
{t.ui.tableHeading_symptom} {t.ui.tableHeading_fix}
{r[0]} {rich(r[1])}
); } function DontsBlock({ t }) { const d = t.donts; return (
{d.kicker}

{d.title}

{d.items.map((it, i) => (
✕

{it.h}

{rich(it.b)}

))}
); } function ConnectorsBlock({ t }) { const d = t.connectors; if (!d) return null; return (
{d.items.map((it, i) => (
{it.name}
{it.role}
{it.desc}
 ))}
); } // ---------- App ---------- /* In setup mode a block's own title is prefixed with its position, as heading TEXT: a badge alone leaves a screen reader with no idea how far in it is. A section with no title of its own falls back to its table-of-contents label rather than throwing the page down. */ const setupTitle = (t, id, fallback) => { const s = t.steps[id] || t[id]; return (s && s.title) || fallback || id; }; function App() { /* The entry page declares the mode. A tree that carries only one mode's sections falls back to that one, so a tips-only tree cannot take the setup branch and read a `hero` it does not have. */ const declared = window.GUIDE_MODE === "tips" ? "tips" : "setup"; const present = window.GUIDE_I18N.sections.map(s => s.mode); const mode = present.indexOf(declared) === -1 ? (present[0] || declared) : declared; // Reading or writing storage throws outright in some contexts, which would // take the whole page down over a remembered language. const [lang, setLang] = useState(() => { try { return localStorage.getItem("guide-lang") || "en"; } catch (e) { return "en"; } }); useEffect(() => { try { localStorage.setItem("guide-lang", lang); } catch (e) {} }, [lang]); /* Every non-structural key in GUIDE_I18N resolves to the reader's language, with English as the fallback, and `steps` the same way one level down. The runtime names no key: a new section needs a block and a string, not an edit here, and a missing key is null rather than a throw. */ const t = useMemo(() => { const STRUCTURAL = ["sections", "tracks", "sectionLabels", "steps"]; const pick = (obj) => (obj ? (obj[lang] || obj.en || null) : null); const out = {}; Object.keys(window.GUIDE_I18N).forEach((k) => { if (STRUCTURAL.indexOf(k) !== -1) return; out[k] = pick(window.GUIDE_I18N[k]); }); const steps = window.GUIDE_I18N.steps || {}; out.steps = {}; Object.keys(steps).forEach((k) => { out.steps[k] = pick(steps[k]); }); return out; }, [lang]); const ids = useMemo( () => window.GUIDE_I18N.sections.filter(s => s.mode === mode).map(s => s.id), [mode] ); const toc = useMemo(() => ids.map((id) => { const l = window.GUIDE_I18N.sectionLabels[id]; return [id, (l && (l[lang] || l.en)) || id]; }), [ids, lang]); useEffect(() => { document.title = t.meta.title[mode]; document.documentElement.lang = t.meta.lang; }, [t, mode]); // Active section tracker via IntersectionObserver const [active, setActive] = useState(ids[0]); useEffect(() => { const els = ids.map(id => document.getElementById(id)).filter(Boolean); if (!els.length) return; /* One callback can carry several records for the same section: a smooth scroll through a short section produces its enter and its leave in one frame. Filtering records by isIntersecting keeps the stale enter, and being higher on the page it wins the sort. So the set of sections in the band is kept across callbacks, last record per target winning, and the active one is the topmost of that set. */ const inBand = new Set(); const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) inBand.add(e.target); else inBand.delete(e.target); }); const visible = Array.from(inBand) .sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top); if (visible[0]) setActive(visible[0].id); }, { rootMargin: "-25% 0px -55% 0px", threshold: [0, 0.2, 0.6] }); els.forEach(el => obs.observe(el)); return () => obs.disconnect(); }, [ids, t]); /* Scrolling alone leaves a keyboard or screen-reader user where they were, so the heading takes focus too. It is not in the tab order, hence the -1. */ const goTo = (id) => { const el = document.getElementById(id); if (!el) return; const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; // Measured, not a constant: the sticky header wraps on a narrow viewport. const head = document.querySelector(".page-head"); const offset = (head ? head.offsetHeight : 92) + 12; const top = el.getBoundingClientRect().top + window.scrollY - offset; window.scrollTo({ top: Math.max(0, top), behavior: reduce ? "auto" : "smooth" }); const heading = el.querySelector("h2"); if (heading) heading.focus({ preventScroll: true }); }; // A fragment aimed at this mode is honoured on load; one aimed at the other // mode never arrives, because the hub forwards it before this page loads. useEffect(() => { let hash = ""; try { hash = decodeURIComponent((window.location.hash || "").slice(1)); } catch (e) { hash = ""; } if (!hash || ids.indexOf(hash) === -1) return; const raf = window.requestAnimationFrame(() => goTo(hash)); return () => window.cancelAnimationFrame(raf); }, [ids]); const total = ids.length; return ( <>
{mode === "setup" ? : }
{ids.map((id, i) => { const render = (window.GUIDE_BLOCKS || {})[id]; if (!render) return null; const heading = mode === "setup" ? `${t.ui.stepOf.replace("{n}", i + 1).replace("{total}", total)}: ${setupTitle(t, id, toc[i] && toc[i][1])}` : null; return ( {render({ t, n: i + 1, heading })} ); })}
); }