/* global React */
const { useState, useEffect, useRef } = React;
window.KitChrome = {};
// ============================================================================
// HCR Ticker — live-feeling micro chip in the status strip.
// Fakes a smooth random-walk price; consistent seed per session.
// ============================================================================
window.KitChrome.HCRTicker = function HCRTicker() {
const [price, setPrice] = useState(0.1842);
const [delta, setDelta] = useState(0.024);
useEffect(() => {
const id = setInterval(() => {
setPrice(p => {
const drift = (Math.random() - 0.48) * 0.0008;
return Math.max(0.10, Math.min(0.40, p + drift));
});
setDelta(d => Math.max(-0.06, Math.min(0.08, d + (Math.random() - 0.5) * 0.004)));
}, 2200);
return () => clearInterval(id);
}, []);
const up = delta >= 0;
return (
HCR/HCC
${price.toFixed(4)}
{up ? "▲" : "▼"} {(Math.abs(delta) * 100).toFixed(2)}%
);
};
// ============================================================================
// AppSwitcher — 9-dot launcher in the top-right of every nav bar.
// Reveals all 11 ecosystem properties grouped by role.
// ============================================================================
window.KitChrome.AppSwitcher = function AppSwitcher({ currentId, hideRoles = [] }) {
const [open, setOpen] = useState(false);
const ref = useRef(null);
useEffect(() => {
if (!open) return;
const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
const onEsc = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", onClick);
document.addEventListener("keydown", onEsc);
return () => { document.removeEventListener("mousedown", onClick); document.removeEventListener("keydown", onEsc); };
}, [open]);
const groups = {};
window.CHBrand.ecosystem.forEach(p => {
(groups[p.role] = groups[p.role] || []).push(p);
});
const allRoles = [];
const order = hideRoles.length ? allRoles.filter(r => !hideRoles.includes(r)) : allRoles;
return (
setOpen(o => !o)}
aria-label="App launcher" title="All Conceptual Health® properties">
{[2,8,14].flatMap((y,i) => [2,8,14].map((x,j) =>
))}
{open && (
The Conceptual Health® ecosystem
{window.CHBrand.position}
{window.CHBrand.equation}
{window.CHBrand.compliance.patent}
)}
);
};
// ============================================================================
// StatusStrip — top-of-page brand chrome
// ============================================================================
window.KitChrome.StatusStrip = function StatusStrip({ right }) {
const B = window.CHBrand;
return (
“{B.tagline}”
— {B.legal}
·
{right || <>
{B.compliance.hipaa}
·
{B.compliance.soc2}
·
{B.compliance.cap}
>}
);
};
// ============================================================================
// Nav — primary navigation. Now hosts AppSwitcher on the right edge.
// ============================================================================
window.KitChrome.Nav = function Nav({ brand, sub, links, tab, setTab, primary, secondary, currentId }) {
return (
{(links || []).map(l => {
// Each link can be a string (tab) or {label, href}.
const item = (typeof l === "string") ? { label: l } : l;
const label = item.label;
const isActive = tab === label;
if (item.href) {
return
{label} ;
}
return (
setTab && setTab(label)}>{label}
);
})}
{secondary && {secondary} }
{primary && {primary} }
);
};
// ============================================================================
// MasterEquationArtifact — persistent footer signature.
// Drop this above on every kit.
// ============================================================================
window.KitChrome.MasterEquationArtifact = function MasterEquationArtifact() {
const B = window.CHBrand;
return (
The Master Equation
{B.equation}
{B.compliance.patent}
·
The mathematical foundation of {B.brand}
);
};
// ============================================================================
// Footer — closes the page. References the equation explicitly.
// ============================================================================
window.KitChrome.Footer = function Footer({ name, currentId }) {
const B = window.CHBrand;
const trustHref = `../_shared/trust-template.html${currentId ? `?from=${currentId}` : ""}`;
return (
);
};
// ============================================================================
// Eyebrow — axis-sigil prefix pill + label
// ============================================================================
window.KitChrome.Eyebrow = function Eyebrow({ axis, children }) {
return (
{axis && {axis} }
{children}
);
};
// ============================================================================
// Loader — brand-voice replacement for "Loading..."
// ============================================================================
window.KitChrome.Loader = function Loader({ message }) {
const [msg, setMsg] = useState(message || window.CHBrand.loaders[0]);
useEffect(() => {
if (message) return;
const id = setInterval(() => {
const L = window.CHBrand.loaders;
setMsg(L[Math.floor(Math.random() * L.length)]);
}, 2400);
return () => clearInterval(id);
}, [message]);
return (
);
};
// ============================================================================
// AxisSigil — per-axis SVG mark. The eight axes each get a distinct geometric
// glyph so the brand reads consistently when an axis appears anywhere.
// PO (physiological) — pulse waveform
// NM (nutritional) — leaf
// ER (environmental) — orbit (sun + ring)
// SC (spiritual) — star/compass rose
// RS (relational) — twin nodes connected
// ES (emotional) — wave loop
// TA (therapeutic) — pill capsule
// PV (preventive) — shield with notch
// ============================================================================
window.KitChrome.AxisSigil = function AxisSigil({ axis, size = 22, label }) {
const a = (axis || "").toUpperCase();
const color = `var(--axis-${a.toLowerCase()})`;
const glyphs = {
PO: ,
NM: <>
>,
ER: <>
>,
SC: <>
>,
RS: <>
>,
ES: ,
TA: <>
>,
PV: ,
CH: <>
>,
HC: <>
HC
>,
};
return (
{glyphs[a] || glyphs.CH}
{label && {label} }
);
};
// ============================================================================
// CrossLinkStrip — a row of related-site pills. Drop above the footer on
// any kit; pass the current site id and a list of other ids to show.
// ============================================================================
window.KitChrome.CrossLinkStrip = function CrossLinkStrip({ currentId, ids, title }) {
const B = window.CHBrand;
const list = (ids || B.ecosystem.map(e => e.id))
.filter(id => id !== currentId)
.map(id => B.ecosystem.find(e => e.id === id))
.filter(Boolean);
return (
{title || "Continue across the ecosystem"}
);
};
// ============================================================================
// Stat — single-source-of-truth metric tile.
//
//
//
// Reads from window.CHBrand.metrics[section][key]. Re-renders when
// `__ch_metrics_changed` fires on window so the tweaks panel (or any future
// admin tool) can mutate the ledger and see every kit update at once.
//
// Integrity guarantee: every Stat carries an unobtrusive title attr with the
// "as of" date the figure was reconciled, so reviewers can hover any number
// and see when it was last verified against the books.
// ============================================================================
window.KitChrome.Stat = function Stat({ path, accent, label, sub, valueOverride, style }) {
const [, setTick] = useState(0);
useEffect(() => {
const onChange = () => setTick(t => t + 1);
window.addEventListener("__ch_metrics_changed", onChange);
return () => window.removeEventListener("__ch_metrics_changed", onChange);
}, []);
const m = window.CHBrand.metric(path);
const showLabel = label || m.label || "";
const showSub = sub != null ? sub : (m.sub || "");
const showVal = valueOverride != null ? valueOverride : m.value;
const tone = m.tone;
const acc = accent || m.accent;
const valColor = acc === "guardian" ? "var(--accent-guardian)"
: acc === "halo" ? "var(--accent-halo)"
: acc === "coral" ? "var(--accent-coral)"
: undefined;
const asOf = m.asOf || window.CHBrand.metrics.asOfLabel || "";
return (
{showLabel}
{showVal}
{showSub}
);
};
// ============================================================================
// StatGrid — wraps a row of Stats and prints the integrity footnote.
// Pass `paths={["corp.arr","corp.activePatients",…]}` for the simple case;
// pass `children` directly for one-off grids.
// ============================================================================
window.KitChrome.StatGrid = function StatGrid({ paths, children, asOf, style, hideAsOf }) {
const date = asOf || window.CHBrand.metrics.asOfLabel;
return (
{paths
? paths.map(p => )
: children}
{!hideAsOf && (
)}
);
};
// ============================================================================
// EmptyState — uniform empty/zero/no-data scaffold
// ============================================================================
window.KitChrome.EmptyState = function EmptyState({ axis, title, body, action }) {
return (
{title}
{body &&
{body}
}
{action}
);
};