// V2/src/chrome.jsx
// Top nav + sidebar + mobile bottom-bar + module router.
// Renders panel shells (#panel-strategy / #panel-compete / #panel-opp);
// modules (Tier 4) mount their content INTO them.
// No import statements. Reads icons + primitives from window.
// Exposes Chrome, switchModule, MODULES, MODULE_KEYS, DEFAULT_MODULE, STATE on window.
// ── Module registry (source of truth for keys, labels, icons, atmosphere) ──
const MODULES = {
strategy: {
key: 'strategy',
label: 'PartnerIQ',
short: 'PartnerIQ',
desc: 'Strategic partnership intelligence engine.',
get Icon() { return window.HandshakeIcon; },
iconClass: 'piq-shake',
accent: '#0d9488',
accentGlow: 'rgba(13,148,136,0.10)',
title: 'CollabIQ — PartnerIQ',
},
compete: {
key: 'compete',
label: 'CompeteIQ',
short: 'CompeteIQ',
desc: 'Competitive landscape and drug profile intelligence.',
get Icon() { return window.TargetIcon; },
iconClass: '',
accent: '#d97706',
accentGlow: 'rgba(217,119,6,0.10)',
title: 'CollabIQ — CompeteIQ',
},
opp: {
key: 'opp',
label: 'WhitespaceIQ',
short: 'WhitespaceIQ',
desc: "The opportunity your competitors can't see is already on your map.",
get Icon() { return window.MapIcon; },
iconClass: '',
accent: '#3b82f6',
accentGlow: 'rgba(59,130,246,0.10)',
title: 'CollabIQ — WhitespaceIQ',
},
// ExploreIQ — knowledge-graph schema explorer (iframe-mounted, React-rendered).
// Distinct from the other 3: no imperative window.renderXxx function — the
// panel is populated by mounting directly (see Chrome()'s
// panel map). Excluded from MODULE_KEYS so the sidebar/bottom-bar tab
// mappings keep their 3-module layout; the sidebar entry is hand-rolled
// below the divider (see Sidebar() L727-746).
exploreiq: {
key: 'exploreiq',
label: 'ExploreIQ',
short: 'ExploreIQ',
desc: 'Knowledge graph schema explorer.',
get Icon() { return null; },
iconClass: '',
accent: '#8b5cf6',
accentGlow: 'rgba(139,92,246,0.10)',
title: 'CollabIQ — ExploreIQ',
},
};
// MODULE_KEYS drives the sidebar / bottom-bar tab mapping + panel containers.
// ExploreIQ is intentionally excluded — it has its own hand-rolled sidebar
// entry (see Sidebar L727-746) and its panel is mounted via
// rather than an imperative window.renderXxx function.
const MODULE_KEYS = Object.keys(MODULES).filter(k => k !== 'exploreiq');
const DEFAULT_MODULE = 'strategy';
// ── Shared module-level state bag ──
// Modules read STATE.activeModule; they extend this with their own keys.
// _mountedModules tracks which panels have already rendered (first-mount guard).
const STATE = window.STATE || {
activeModule: DEFAULT_MODULE,
_mountedModules: new Set(),
comp_view: 'landscape',
strat_subview: 'partners',
strat_anchor_org: 'Sanofi',
opp_matrix: 'target-disease',
};
// Ensure _mountedModules is always a Set even if STATE was pre-seeded without it.
if (!(STATE._mountedModules instanceof Set)) {
STATE._mountedModules = new Set();
}
// ── Theme toggle: two-segment Light/Dark pill (Stripe/Linear style) ──
// Reads/writes `document.documentElement.dataset.theme` and persists to
// localStorage under `dashiq.theme`. Mirrors the existing token system —
// tokens.css already defines [data-theme="dark"] (L52) and
// [data-theme="light"] (L103) variants for every color token.
function ThemeToggle() {
const [theme, setTheme] = React.useState(() => {
if (typeof document === 'undefined') return 'dark';
return document.documentElement.dataset.theme || 'dark';
});
// On mount: re-hydrate from localStorage and apply to
React.useEffect(() => {
try {
const stored = window.localStorage.getItem('dashiq.theme');
if (stored === 'light' || stored === 'dark') {
document.documentElement.dataset.theme = stored;
setTheme(stored);
} else {
// No stored pref — sync state to whatever currently has
const current = document.documentElement.dataset.theme || 'dark';
setTheme(current);
}
} catch (e) {
// localStorage may be blocked (private mode etc.) — fail silent
}
}, []);
const setThemeMode = React.useCallback((next) => {
if (next !== 'light' && next !== 'dark') return;
document.documentElement.dataset.theme = next;
setTheme(next);
try {
window.localStorage.setItem('dashiq.theme', next);
} catch (e) {
// localStorage may be blocked — fail silent
}
// Tell theme-aware modules (e.g. sonar SVG) to rebuild their inline
// light/dark-baked color attributes against the new tokens.
window.dispatchEvent(new CustomEvent('theme:change', { detail: { theme: next } }));
}, []);
const isLight = theme === 'light';
// Sun icon (inline SVG) — used in Light segment
const sunIcon = (
);
// Moon icon (inline SVG) — used in Dark segment
const moonIcon = (
);
return (
{/* Sliding active indicator */}
{/* Light segment */}
{/* Dark segment */}
);
}
// ── FaviconMark + FaviconMarkGlassOrb ──
// Now extracted to /logos/FaviconMark.jsx as a reusable, drop-in component.
// That file exposes window.FaviconMark (bare glyph), window.FaviconMarkGlassOrb
// (glass capsule home button), and window.FaviconMarkSVG (raw markup string).
// We reference window.FaviconMarkGlassOrb directly below.
// ── FloatingChrome: V1-style floating icons (no header bar) ──
// V1 reference: NO topbar, only floating elements anchored to viewport.
// - Top-left: glass capsule home button — clicking returns to default module (PartnerIQ)
// - Top-right: theme toggle (Light/Dark segmented pill)
//
// UR-016 fix: previously the home orb was a marketing-site link
// (https://www.collabiqcore.com), which navigated AWAY from the dashboard
// rather than acting as an in-app home. Reworked as an in-app button that
// resets activeModule to DEFAULT_MODULE and clears any drawer/overlay state.
// Also adds an explicit FaviconMark glyph fallback so the button always
// renders (previously the orb was conditionally null when GlassOrb was
// missing — leaving the user with NO visible home button).
function FloatingChrome() {
const FaviconMark = window.FaviconMark;
const onHomeClick = React.useCallback((e) => {
e.preventDefault();
// Close drawers/overlays so the user returns to a clean default state.
const evDrw = document.getElementById('ev-drawer');
if (evDrw) evDrw.classList.remove('open');
const ptDrw = document.getElementById('part-drawer');
if (ptDrw) ptDrw.classList.remove('open');
const bd = document.getElementById('drawer-backdrop');
if (bd) bd.classList.remove('visible');
if (typeof window._hideMobileBackdrop === 'function') {
window._hideMobileBackdrop();
}
// Return to default module with forceRender so it re-paints from
// a clean state (e.g. resets PartnerIQ to its default Sanofi anchor view).
if (typeof window.switchModule === 'function') {
window.switchModule(DEFAULT_MODULE, true);
} else {
// Fallback — fire the event the chrome listener handles directly.
window.dispatchEvent(new CustomEvent('chrome:switch', {
detail: { key: DEFAULT_MODULE, forceRender: true },
}));
}
}, []);
return (
{/* Top-left home button — glass capsule with the CollabIQ favicon glyph.
Clicking returns to the default module (PartnerIQ landscape view). */}
{/* Top-right theme toggle */}
);
}
// ── Top Nav: home orb + tab bar + search trigger + theme toggle + avatar ──
function TopNav({ activeModule, onSwitchModule, onOpenSearch }) {
return (
);
}
// ── Module-specific animated SVG glyphs (PIQ handshake / CIQ radar / WS scan / EIQ graph) ──
// 100x100 viewBox; CSS in styles/sidebar.css drives state colors + animations.
// Verbatim from sidebar-standalone_updated.html reference.
function PIQGlyph() {
return (
);
}
// CompeteIQ glyph — target with offset competitor blips. Read-at-22px.
// Three concentric rings (visible, not opacity-faded), a centered "you"
// dot, three competitor blips at varying threat distances. No animated
// sweep — sidebar is always-on, motion is a distraction. The blips ARE
// the meaning of CompeteIQ: who else is in the space, where they sit
// relative to you.
function CIQGlyph() {
return (
);
}
function WSGlyph() {
return (
);
}
// ── ExploreIQ glyph — knowledge graph (two clusters bridged) ──
// Verbatim from sidebar-standalone_updated.html reference.
function EIQGlyph() {
return (
);
}
const MODULE_GLYPHS = { strategy: PIQGlyph, compete: CIQGlyph, opp: WSGlyph };
// ── Sidebar: standalone vertical floating glass capsule ──
// Class names match sidebar-standalone_updated.html reference exactly.
// Features:
// - 54px collapsed → 172px on hover/pinned
// - sidebar-active-pill: absolutely positioned morphing highlight
// - Pin button in footer toggles .pinned class (persists localStorage)
// - Section title "Module" above the 3 module items + ExploreIQ link
// - Per-module animated SVG glyphs matching reference
// - sb-ctx-* containers preserved for module context injection
function Sidebar({ activeModule, onSwitchModule, onOpenSearch }) {
const [pinned, setPinned] = React.useState(() => {
try { return window.localStorage.getItem('dashiq.sidebar.pinned') === '1'; }
catch (e) { return false; }
});
const navRef = React.useRef(null);
const pillRef = React.useRef(null);
const togglePin = React.useCallback(() => {
setPinned(prev => {
const next = !prev;
try { window.localStorage.setItem('dashiq.sidebar.pinned', next ? '1' : '0'); } catch (e) {}
return next;
});
}, []);
// Position the active pill to track the active sidebar item.
//
// V1 PARITY + LAYOUT-RESPONSIVE: V1 sets only top + height; CSS handles
// full width via `left:1px; right:1px`. Use offsetTop/offsetHeight (CSS
// layout metrics) so transforms (sb-icon-pop entrance) don't confuse
// measurement.
//
// CRITICAL: when the user HOVERS or PINS the sidebar, buttons reflow
// from column to row layout — height drops from ~37px collapsed to
// ~28px expanded. Previously the pill only re-positioned on
// [activeModule, pinned] changes, so on hover the buttons would shrink
// but the pill would stay at collapsed height — visibly misaligned
// (pill 9-36px taller than button, offset by 9-36px from button top
// as items above also shrank). Add ResizeObserver on the nav so any
// layout-affecting change (hover, font load, pin toggle, etc.)
// re-positions the pill in lockstep.
React.useEffect(() => {
const pill = pillRef.current;
const nav = navRef.current;
if (!pill || !nav) return;
const apply = () => {
const activeBtn = nav.querySelector('.sidebar-item.active');
if (!activeBtn) { pill.style.height = '0'; return; }
pill.style.top = activeBtn.offsetTop + 'px';
pill.style.height = activeBtn.offsetHeight + 'px';
};
apply();
const raf = requestAnimationFrame(apply);
// ResizeObserver fires whenever the nav (or any descendant) changes
// size — including hover expansion, pin toggle, viewport changes.
// Use a small RO-on-nav approach (one observer, fires on any child
// resize). Browsers debounce RO callbacks to the next frame so this
// is cheap.
let ro = null;
if (typeof ResizeObserver !== 'undefined') {
ro = new ResizeObserver(apply);
ro.observe(nav);
// Also observe each sidebar-item so reflowing items trigger updates.
nav.querySelectorAll('.sidebar-item').forEach(b => ro.observe(b));
}
// Belt-and-suspenders: explicit hover handlers in case RO is throttled
// during the CSS transition.
const onHoverChange = () => requestAnimationFrame(apply);
nav.addEventListener('mouseenter', onHoverChange);
nav.addEventListener('mouseleave', onHoverChange);
// The hover transition is ~0.35s; reapply at 100ms and 400ms to catch
// the start and end of the layout shift.
const t1 = setTimeout(apply, 100);
const t2 = setTimeout(apply, 400);
return () => {
cancelAnimationFrame(raf);
if (ro) ro.disconnect();
nav.removeEventListener('mouseenter', onHoverChange);
nav.removeEventListener('mouseleave', onHoverChange);
clearTimeout(t1);
clearTimeout(t2);
};
}, [activeModule, pinned]);
return (
);
}
// ── Mobile bottom bar (≤768px): Partner / Compete / WhiteSpace tabs ──
// Matches V1 #sidebar-bottom-bar with bottom-tab-item buttons.
// Fixed bottom, 3 tabs, icons + short labels. 44px hit-target.
function BottomBar({ activeModule, onSwitchModule }) {
return (