// Demo shell — pick a screen from the sidebar, advance with arrows or keyboard.
const SCREENS = [
{ id: 'dash-bal', feature: 'Dashboard', flow: '00', label: 'Balanced', C: window.DashboardScreen },
{ id: 'dash-nut', feature: 'Dashboard', flow: '00', label: 'Nutrition focus', C: window.DashboardNutritionScreen },
{ id: 'dash-trn', feature: 'Dashboard', flow: '00', label: 'Training focus', C: window.DashboardTrainingScreen },
{ id: 'welcome', feature: 'Welcome', flow: '01', label: 'Begin', C: window.WelcomeScreen },
{ id: 'goal-a', feature: 'Goal Setting', flow: '02', label: 'Set the goal', C: window.GoalInputScreen },
{ id: 'goal-b', feature: 'Goal Setting', flow: '02', label: 'The brief', C: window.GoalContractScreen },
{ id: 'tdee-a', feature: 'TDEE Model', flow: '03', label: 'Today', C: window.TDEEScreen },
{ id: 'tdee-b', feature: 'TDEE Model', flow: '03', label: 'Trust over time', C: window.TDEECompareScreen },
{ id: 'plan-m', feature: 'Plan', flow: '04', label: 'Calendar · month', C: window.PlanCalendarMonthScreen },
{ id: 'plan-w', feature: 'Plan', flow: '04', label: 'Calendar · week', C: window.PlanCalendarWeekScreen },
{ id: 'plan-d', feature: 'Plan', flow: '04', label: 'Calendar · day', C: window.PlanCalendarDayScreen },
{ id: 'train-a', feature: 'Training', flow: '05', label: 'Session · timeline', C: window.TrainingSessionScreen },
{ id: 'macro-a', feature: 'Macros', flow: '06', label: 'Weekly targets', C: window.MacroTargetsScreen },
{ id: 'macro-b', feature: 'Macros', flow: '06', label: 'Meal queue', C: window.MacroMealsScreen },
{ id: 'batch-a', feature: 'Macros', flow: '06', label: 'Batch strategy', C: window.BatchPrepScreen },
{ id: 'macro-c', feature: 'Macros', flow: '06', label: 'Shopping', C: window.ShoppingListScreen },
{ id: 'fridge-a', feature: 'Fridge', flow: '07', label: 'Pantry · delta', C: window.FridgeScreen },
{ id: 'prep-a', feature: 'Meal Prep', flow: '08', label: 'Pre-cook merge', C: window.MealPrepMergeScreen },
{ id: 'morph', feature: 'Meal Prep', flow: '08', label: 'Card → cook morph', C: window.FeatureCardMorphScreen },
{ id: 'prep-b', feature: 'Meal Prep', flow: '08', label: 'Parallel timeline',C: window.MealPrepTimelineScreen },
{ id: 'prep-c', feature: 'Meal Prep', flow: '08', label: 'Active cook mode', C: window.MealPrepCookModeScreen },
{ id: 'profile', feature: 'Profile', flow: '09', label: 'Account hub', C: window.ProfileScreen },
];
const D = {
bg: '#0a0a0a',
panel: '#0f0f0f',
border: 'rgba(255,255,255,0.06)',
text: '#fafafa',
dim: '#a1a1a1',
mute: '#6b6b6b',
accent: '#FF6E50',
};
function Demo() {
const [idx, setIdx] = React.useState(0);
const [transition, setTransition] = React.useState(false);
const [direction, setDirection] = React.useState(1); // 1=forward, -1=back
const go = React.useCallback((next) => {
if (next < 0 || next >= SCREENS.length || next === idx) return;
setDirection(next > idx ? 1 : -1);
setTransition(true);
setTimeout(() => {
setIdx(next);
setTransition(false);
}, 180);
}, [idx]);
React.useEffect(() => {
const onKey = (e) => {
if (e.key === 'ArrowRight' || e.key === ' ') { e.preventDefault(); go(idx + 1); }
if (e.key === 'ArrowLeft') { e.preventDefault(); go(idx - 1); }
if (e.key === 'Home') { go(0); }
if (e.key === 'End') { go(SCREENS.length - 1); }
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [go, idx]);
const current = SCREENS[idx];
const Cmp = current.C;
// Group sidebar by feature
const groups = [];
SCREENS.forEach(s => {
const g = groups.find(x => x.feature === s.feature);
if (g) g.items.push(s); else groups.push({ feature: s.feature, flow: s.flow, items: [s] });
});
return (
go(SCREENS.findIndex(s => s.id === id))}/>
{/* Top meta */}
{/* Arrows */}
go(idx - 1)} style={{ position: 'absolute', left: 320, top: '50%', transform: 'translateY(-50%)', zIndex: 4 }}/>
go(idx + 1)} style={{ position: 'absolute', right: 60, top: '50%', transform: 'translateY(-50%)', zIndex: 4 }}/>
{/* Phone canvas — auto-scaled to fit viewport height */}
go(idx + 1)} idx={idx} maxIdx={SCREENS.length - 1}>
{/* Bottom progress */}
{SCREENS.map((s, i) => (
);
}
function Mono({ children, color = D.text }) {
return {children};
}
function PhoneScaler({ children, transition, direction, onAdvance, idx, maxIdx }) {
const [scale, setScale] = React.useState(1);
React.useEffect(() => {
const update = () => {
const avail = Math.max(420, window.innerHeight - 160);
const targetH = 874;
setScale(Math.min(1, avail / targetH));
};
update();
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, []);
return (
{
const btn = e.target.closest && e.target.closest('button');
if (!btn) return;
if (btn.dataset.stay === 'true') return;
const bg = getComputedStyle(btn).backgroundColor;
const isAccent = bg.match(/rgb\(255,\s*110,\s*80\)/) || bg.match(/rgb\(255,\s*90,\s*31\)/);
if (isAccent && idx < maxIdx) onAdvance();
}}
style={{
transform: `scale(${scale})`,
transformOrigin: 'center center',
opacity: transition ? 0 : 1,
transition: 'opacity .35s ease-in-out',
}}>
{children}
);
}
function Sidebar({ groups, currentId, onPick }) {
return (
);
}
function Row({ k, l }) {
return (
{l}
{k}
);
}
function Shortcuts() {
return (
← →
to navigate
);
}
function ArrowBtn({ dir, disabled, onClick, style }) {
const path = dir === 'left' ? 'M15 6l-6 6 6 6' : 'M9 6l6 6-6 6';
return (
);
}
ReactDOM.createRoot(document.getElementById('root')).render();