/* eslint-disable */
/* =============================================================
App Shell — Brand mark (Quantum Logo), Sidebar, Topbar
-------------------------------------------------------------
Icons are unified against the brand reference icon-pack
(assets/icons/ + reference/17-icon-pack). Stroke-only, 24×24,
round caps/joins. Navigation glyphs use the canonical paths;
"genes" uses the animated premium DNA mark (DnaMark); "labs"
uses the brand spade. The brand orb is the living Quantum Logo.
============================================================= */
const { useState: useStateS, useEffect: useEffectS } = React;
// ─── Icons (SVG line, unified from the brand reference set) ───
// 24×24 grid, fill:none, stroke:currentColor, 1.9 weight, round.
function svgIcon(paths, vb) {
return (p) => {
const size = p && p.size ? p.size : 20;
const sw = p && p.sw ? p.sw : 1.9;
return (
);
};
}
const Icon = window.Icon = {
// ── navigation (canonical reference paths) ──
home: svgIcon(<>),
overview: svgIcon(<>),
guide: svgIcon(<>),
centers: svgIcon(<>),
planets: svgIcon(<>),
compare: svgIcon(<>),
// brand spade — for Spade Labs only (drawn, never the unicode glyph)
spade: svgIcon(<>),
// ── static DNA (fallback / large headers); animated version is ──
dna: svgIcon(<>),
// ── system / utility ──
crown: svgIcon(<>),
premium: svgIcon(<>),
bell: svgIcon(<>),
settings: svgIcon(<>),
support: svgIcon(<>),
logout: svgIcon(<>),
profile: svgIcon(<>),
account: svgIcon(<>),
search: svgIcon(<>),
// ── aliases (keep older page references working) ──
// gates → genes/DNA surface; labs → brand spade
gates: svgIcon(<>),
labs: svgIcon(<>),
// ── content / inline icons (kept; same stroke-only language) ──
chevDown: svgIcon(),
chevLeft: svgIcon(),
chevRight: svgIcon(),
help: svgIcon(<>),
star: (p) => (),
starOutline: svgIcon(),
sparkle: svgIcon(),
share: svgIcon(<>),
heart: svgIcon(),
download: svgIcon(<>),
bookOpen: svgIcon(<>),
compass: svgIcon(<>),
beaker: svgIcon(<>),
sun: svgIcon(<>),
moon: svgIcon(),
diamond: svgIcon(),
eye: svgIcon(<>),
leaf: svgIcon(<>),
flash: svgIcon(),
globe: svgIcon(<>),
check: svgIcon(),
brain: svgIcon(<>),
// ── people / group (profile summary: "البروفايل") ──
users: svgIcon(<>),
// ── definition (connected centers: "التعريف") ──
definition: svgIcon(<>),
// ── activity / pulse (not-self theme: "موضوع الذات") ──
activity: svgIcon(),
strengths: svgIcon(<>),
attention: svgIcon(<>),
lock: svgIcon(<>),
clock: svgIcon(<>),
plus: svgIcon(<>),
trash: svgIcon(<>),
edit: svgIcon(<>),
calendar: svgIcon(<>),
pin: svgIcon(<>),
mail: svgIcon(<>),
google: (p) => (),
};
// ─── DnaMark — premium ANIMATED double-helix (canvas) ─────────
// Used for the "genes" surface. Subtle continuous rotation at rest;
// brighter + faster when active, with a travelling gold highlight.
window.DnaMark = function DnaMark({ size = 22, active = false, energy }) {
const cref = React.useRef(null);
const stateRef = React.useRef({ phase: 0, lvl: 0 });
const activeRef = React.useRef(active);
activeRef.current = active;
const en = energy != null ? energy : 1;
React.useEffect(() => {
const canvas = cref.current;
if (!canvas) return;
const ctx = canvas.getContext("2d");
const dpr = Math.min(window.devicePixelRatio || 1, 2.5);
canvas.width = Math.round(size * dpr);
canvas.height = Math.round(size * dpr);
canvas.style.width = size + "px";
canvas.style.height = size + "px";
const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const CY = "#62DDFF", VI = "#C084FF", GO = "#F8C648";
const W = size, cx = W / 2;
const top = W * 0.14, bot = W * 0.86, H = bot - top;
const amp = W * 0.30, turns = 1.6;
const rgba = (hex, a) => {
const h = hex.replace("#", "");
return `rgba(${parseInt(h.slice(0,2),16)},${parseInt(h.slice(2,4),16)},${parseInt(h.slice(4,6),16)},${a})`;
};
let raf, last = performance.now();
const loop = (now) => {
const dt = Math.min((now - last) / 1000, 0.05); last = now;
const st = stateRef.current;
const tgt = activeRef.current ? 1 : 0;
st.lvl += (tgt - st.lvl) * Math.min(1, 6 * dt);
const spd = (0.55 + st.lvl * 1.25) * en;
st.phase += (reduce ? 0 : spd) * dt;
ctx.save();
ctx.scale(dpr, dpr);
ctx.clearRect(0, 0, W, W);
ctx.lineCap = "round";
const SAMPLES = 26;
const strand = (off, col) => {
ctx.save();
ctx.shadowBlur = 5 + st.lvl * 5; ctx.shadowColor = rgba(col, 0.7);
ctx.strokeStyle = rgba(col, 0.92);
ctx.lineWidth = 1.5 + st.lvl * 0.4;
ctx.beginPath();
for (let i = 0; i <= SAMPLES; i++) {
const t = i / SAMPLES;
const y = top + t * H;
const ang = st.phase + t * turns * Math.PI * 2 + off;
const x = cx + amp * Math.sin(ang);
i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
};
// rungs (behind strands) + travelling gold highlight
const RUNGS = 6;
const goldIdx = Math.floor((st.phase * 0.5 % 1 + 1) % 1 * RUNGS);
for (let r = 0; r < RUNGS; r++) {
const t = (r + 0.5) / RUNGS;
const y = top + t * H;
const ang = st.phase + t * turns * Math.PI * 2;
const x1 = cx + amp * Math.sin(ang);
const x2 = cx + amp * Math.sin(ang + Math.PI);
const depth = Math.abs(Math.cos(ang)); // 1 = facing us
const isGold = active && r === goldIdx;
ctx.save();
ctx.shadowBlur = isGold ? 7 : 2;
ctx.shadowColor = rgba(isGold ? GO : VI, 0.7);
ctx.strokeStyle = rgba(isGold ? GO : "#9D8BFF", (0.30 + 0.5 * depth) * (0.6 + 0.4 * st.lvl));
ctx.lineWidth = isGold ? 1.8 : 1.2;
ctx.beginPath(); ctx.moveTo(x1, y); ctx.lineTo(x2, y); ctx.stroke();
ctx.restore();
}
strand(0, CY);
strand(Math.PI, VI);
// base-pair nodes
for (let r = 0; r < RUNGS; r++) {
const t = (r + 0.5) / RUNGS;
const y = top + t * H;
const ang = st.phase + t * turns * Math.PI * 2;
[[cx + amp * Math.sin(ang), CY], [cx + amp * Math.sin(ang + Math.PI), VI]].forEach(([x, c]) => {
ctx.save(); ctx.shadowBlur = 4; ctx.shadowColor = rgba(c, 0.8);
ctx.fillStyle = rgba(c, 0.95);
ctx.beginPath(); ctx.arc(x, y, 1.05 + st.lvl * 0.4, 0, Math.PI * 2); ctx.fill();
ctx.restore();
});
}
ctx.restore();
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [size, en]);
return ;
};
// ─── Brand orb — the living Quantum Logo (canvas) ─────────────
// At rest: master sacred-geometry sigil. On hover: morphs into a
// quantum atom in motion, then eases smoothly back on leave.
window.BrandOrb = function BrandOrb({ size = 50, variant = "quantum", energy = 1.6 }) {
const cref = React.useRef(null);
const wrapRef = React.useRef(null);
const [hover, setHover] = useStateS(false);
React.useEffect(() => {
if (!window.QuantumLogo || !cref.current) return;
const logo = new window.QuantumLogo(cref.current, {
variant, size, energy, hoverTarget: wrapRef.current,
});
logo.start();
return () => logo.destroy();
}, [size, variant, energy]);
return (
setHover(true)}
onPointerLeave={() => setHover(false)}
title="HUMAN DESIGN"
>
);
};
// ─── Sidebar ──────────────────────────────────────────────────
// Animated nav item — icon comes alive on hover (DNA spins faster;
// the SVG icons play a CSS keyframe keyed by data-icon).
window.NavItem = function NavItem({ it, active, lang, onRoute }) {
const L = I18N[lang];
const [hover, setHover] = useStateS(false);
const I = Icon[it.icon];
return (
{ e.preventDefault(); onRoute(it.id); }}
onPointerEnter={() => setHover(true)}
onPointerLeave={() => setHover(false)}
href="#"
>
{it.icon === "dna" ? : }
{L.nav[it.id]}
{it.badge && {it.badge}}
);
};
window.Sigil = function Sigil({ children, size = 34, idle = false }) {
return (
{children}
);
};
window.Sidebar = function Sidebar({ lang, route, onRoute }) {
const L = I18N[lang];
const items = [
{ id: "home", icon: "home" },
{ id: "overview", icon: "overview" },
{ id: "guide", icon: "guide" },
{ id: "centers", icon: "centers" },
{ id: "planets", icon: "planets" },
{ id: "gates", icon: "dna" }, // genes → animated DNA mark
{ id: "compare", icon: "compare" },
{ id: "labs", icon: "spade" }, // Spade Labs → brand spade
{ id: "dream", icon: "moon" }, // مصفوفة الحلم — داخلي حتى الطور 5
].filter((it) => !window.SpadeAccess || SpadeAccess.canSee(it.id));
return (
);
};
// ─── ChartSearch box — always present in the top panel ────────
// Scoped to YOUR chart only (see src/data/chart-search.js): typing
// «قلق» returns your own activated gates/lines/centers, not the whole
// database. Results are grouped by section because the whole point is
// that you don't know which section the thing lives in.
window.SearchBox = function SearchBox({ lang, onRoute }) {
const { useState, useRef, useEffect } = React;
const ar = lang === "ar";
const S = I18N[lang].search || {};
const [q, setQ] = useState("");
const [open, setOpen] = useState(false);
const [hits, setHits] = useState([]);
const box = useRef(null);
useEffect(() => {
const t = setTimeout(() => {
const r = (window.ChartSearch ? ChartSearch.query(q, lang) : []);
setHits(r);
}, 120);
return () => clearTimeout(t);
}, [q, lang]);
useEffect(() => {
const away = (e) => { if (box.current && !box.current.contains(e.target)) setOpen(false); };
const esc = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", away);
document.addEventListener("keydown", esc);
return () => { document.removeEventListener("mousedown", away); document.removeEventListener("keydown", esc); };
}, []);
// group by section, preserving score order
const groups = [];
hits.forEach((h) => {
let g = groups.find((x) => x.section === h.section);
if (!g) { g = { section: h.section, items: [] }; groups.push(g); }
g.items.push(h);
});
const go = (h) => { setOpen(false); setQ(""); onRoute && onRoute(h.route); };
return (
{ setQ(e.target.value); setOpen(true); }}
onFocus={() => setOpen(true)}
/>
{q &&
}
{open && q.trim().length >= 2 && (
{hits.length === 0 ? (
{S.empty || (ar ? "لا شيء في خريطتك يطابق هذا." : "Nothing in your chart matches that.")}
) : (
{(S.count || (ar ? "{n} نتيجة في خريطتك" : "{n} results in your chart")).replace("{n}", hits.length)}
{groups.map((g, i) => (
{g.section}
{g.items.map((h, j) => (
))}
))}
)}
)}
);
};
// ─── Topbar ───────────────────────────────────────────────────
window.Topbar = function Topbar({ lang, onLangToggle, user, onRoute }) {
const L = I18N[lang];
const initial = (lang === "ar" ? "ع" : "A");
return (
);
};
// ─── HelpButton — "How to read this screen?" trigger + modal ────
// Reusable: PageHeader uses it, and custom-header pages drop it in too.
window.HelpButton = function HelpButton({ lang, label, route, className }) {
const { useState, useEffect } = React;
const [open, setOpen] = useState(false);
const ar = lang === "ar";
const btnLabel = label || (ar ? "كيف تقرأ هذه الشاشة؟" : "How to read this screen?");
const rt = route || (window.location.hash || "").replace(/^#\/?/, "").split("/")[0] || "home";
const content = (window.helpFor && window.helpFor(lang, rt)) ||
{ title: btnLabel, intro: "", sections: [], tip: "" };
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [open]);
return (
{open && (
setOpen(false)} role="dialog" aria-modal="true">
e.stopPropagation()}>
{content.title}
{content.intro &&
{content.intro}
}
{(content.sections || []).map((s, i) => (
))}
{content.tip && (
{content.tip}
)}