/* HTD Shared UI + Navigation context (JSX) */
(function () {
const { useContext } = React;
const Icon = window.HTDIcon;
const { StatusBar, AppBar } = window.HTDShell;
const NavCtx = React.createContext({ push(){}, pop(){}, go(){}, setPhase(){}, popToRoot(){} });
const useNav = () => useContext(NavCtx);
// Full-screen pushed view: status bar + back header + scroll body + optional sticky footer
function PushView({ title, right, onBack, children, footer, noPad, accent }) {
const nav = useNav();
const ref = React.useRef(null);
const footRef = React.useRef(null);
const [footH, setFootH] = React.useState(110);
// settle: if the CSS animation clock is throttled (frozen mid-frame), force the
// end state once the animation should have finished (same pattern as motion.jsx)
React.useEffect(() => {
const t = setTimeout(() => { if (ref.current) { ref.current.style.animation = 'none'; ref.current.style.transform = 'none'; } }, 320);
return () => clearTimeout(t);
}, []);
// measure the real footer height so tall (multi-row) footers never occlude
// the bottom of the scroll content
React.useLayoutEffect(() => {
if (footer && footRef.current) {
const h = footRef.current.getBoundingClientRect().height;
if (h > 0) setFootH(Math.ceil(h) + 12);
}
}, [footer]);
return (
nav.pop())} />
{children}
{footer && (
)}
);
}
function SectionLabel({ children, style }) {
return {children}
;
}
function Panel({ children, glow, pad=true, style, onClick, className }) {
return {children}
;
}
// segmented pill tabs (ALL / FOLLOWING / ...)
function Segmented({ items, value, onChange, style }) {
return (
{items.map(it => (
))}
);
}
// underline tabs (ANALYZE / INSIGHTS / COACH)
function UTabs({ items, value, onChange, style }) {
return (
{items.map(it => (
))}
);
}
function Avatar({ color, label, size=38 }) {
return {label}
;
}
// 3-up metric row (feed cards, share)
function MetricRow({ items, big }) {
return (
{items.map(([v,l],i)=>(
))}