// app.jsx — root + page router + tweaks
const { useState: useStateA, useEffect: useEffectA } = React;
const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
"palette": "linear",
"mode": "dark",
"hero": "dynamic",
"font": "inter",
"colorMode": "domain",
"onboarding": true
}/*EDITMODE-END*/;
function App() {
const [page, setPage] = useStateA("landing");
const [tweaks, setTweak] = window.useTweaks(DEFAULT_TWEAKS);
// apply tweaks to
useEffectA(() => {
document.documentElement.dataset.palette = tweaks.palette;
document.documentElement.dataset.mode = tweaks.mode;
document.documentElement.dataset.font = tweaks.font;
}, [tweaks.palette, tweaks.mode, tweaks.font]);
return (
{page !== "landing" && page !== "login" &&
}
{page === "landing" && (
<>
)}
{page === "graph" && }
{page === "private" && }
{page === "playground" && }
{page === "history" && }
{page === "pricing" && }
{page === "faq" && }
{page === "settings" && }
{page === "login" && }
);
}
function StubPage({ page }) {
const titles = {
history: ["历史", "本周访问 N 个节点 / 提了 M 个问题 / 还有 K 个 prereq 缺口"],
pricing: ["定价", "从匿名试用开始,按你的节奏升级。Pro · Studio · Token-pack"],
faq: ["FAQ", "Public Graph 和 Playground 有什么区别?数据会被训练吗?…"],
settings: ["设置", "账户 / 外观 / 图谱 / Playground / 通知 / Labs / 快捷键"],
};
const [title, sub] = titles[page];
return (
本轮范围之外
{title}
{sub}
这一轮设计聚焦在 Landing · Public Graph · 我的 · Playground 四个主页面的 Linear 风格落地。
其它页面框架已搭好,内容补完后接入。
);
}
/* —— Tweaks panel —— */
function TweaksPanelHost({ tweaks, setTweak }) {
return (
setTweak("palette", v)} />
setTweak("mode", v)}
options={[{ value: "dark", label: "深色" }, { value: "light", label: "浅色" }]}
/>
setTweak("font", v)}
options={[{ value: "inter", label: "Inter" }, { value: "sfpro", label: "SF Pro" }, { value: "serif", label: "Serif" }]}
/>
setTweak("hero", v)}
options={[{ value: "dynamic", label: "动" }, { value: "static", label: "静" }, { value: "minimal-text", label: "极简" }]}
/>
setTweak("colorMode", v)}
options={[{ value: "domain", label: "Domain" }, { value: "layer", label: "Layer" }, { value: "mastery", label: "Mastery" }]}
/>
setTweak("onboarding", v)}
/>
);
}
/* TweakColor — custom swatch chooser (panel starter has TweakColor for single hex; we need palette-grid form) */
function PalettePicker({ value, onChange }) {
const opts = [
{ id: "linear", name: "Linear Purple", colors: ["#5E6AD2", "#7C8CFF"] },
{ id: "velvet", name: "Velvet Iris", colors: ["#6E73E6", "#8F98FF"] },
{ id: "mint", name: "Mint Teal", colors: ["#2FAE8F", "#6BC9B1"] },
{ id: "coral", name: "Soft Coral", colors: ["#E5536E", "#FF7A90"] },
{ id: "amber", name: "Amber Mist", colors: ["#C68A28", "#F2B45A"] },
{ id: "electric", name: "Electric Blue", colors: ["#2D88E0", "#4EA7FC"] },
];
return (
{opts.map(o => {
const sel = o.id === value;
return (
);
})}
);
}
const root = ReactDOM.createRoot(document.getElementById("app"));
root.render();