/* OpenSyn homepage — Hero (dark opsroom shell + WebGL flow field) */ const { Button: OSButton, Badge: OSBadge, Symbol: OSSymbol } = window.OpenSynDesignSystem_a3458e; const { useRef, useEffect } = React; const GITHUB_URL = "https://github.com/a-lfre-do/OpenSyn"; /* ---- shared chrome: top navigation bar -------------------------------- */ function TopNav({ dark = true, theme = "light", onToggleTheme }) { const ink = dark ? "var(--c-cyber-white)" : "var(--text-body)"; const line = dark ? "rgba(255,255,255,0.12)" : "var(--border-soft)"; const mark = dark ? "assets/opensyn-mark-light.svg" : "assets/opensyn-mark.svg"; const links = [ ["The connection", "#connection"], ["Principles", "#principles"], ["Architecture", "#architecture"], ]; return ( ); } function GithubGlyph({ size = 15 }) { return ( ); } /* ---- canonical layer glyph: + / ○ / △ / ▢ / ⬠ ----------------------- */ /* L1 Tasks = plus, then a side is added progressively up the stack: L2 circle · L3 triangle · L4 square · L5 pentagon. The DS Symbol has no "plus", so we draw it to the same 24×24 / 2px geometric spec. */ function OSGlyph({ name = "circle", size = 20, color = "currentColor", filled = false, strokeWidth = 2, style = {} }) { if (name === "plus") { return ( ); } return ; } /* ---- the hero --------------------------------------------------------- */ function Hero({ treatment, theme = "light", onToggleTheme }) { const fieldRef = useRef(null); const ctrlRef = useRef(null); useEffect(() => { if (!fieldRef.current || !window.OpenSynFlow) return; ctrlRef.current = window.OpenSynFlow.mount(fieldRef.current, { treatment, theme }); return () => { ctrlRef.current && ctrlRef.current.destroy(); }; }, []); useEffect(() => { if (ctrlRef.current) ctrlRef.current.setTreatment(treatment); }, [treatment]); useEffect(() => { if (ctrlRef.current && ctrlRef.current.setTheme) ctrlRef.current.setTheme(theme); }, [theme]); return (
{/* WebGL field */}
); } const C2 = { blue: "#4f6be0", white: "#F6F4EF", yellow: "#F0C83D", green: "#4C9B63", orange: "#E95C2B", }; Object.assign(window, { Hero, TopNav, GithubGlyph, OSGlyph, GITHUB_URL });