);
}
// Tappable select that cycles its options (no native dropdown needed in a mock)
function SelectField({ label, options, value, onChange, adornment }) {
const cycle = () => {
const i = options.indexOf(value);
onChange(options[(i + 1) % options.length]);
};
return (
);
}
function TextField({ label, value, onChange }) {
return (
);
}
function Stars({ filled = 3, total = 5, size = 13 }) {
return (
{Array.from({ length: total }, (_, i) => (
★
))}
);
}
function Lock({ size = 13 }) {
return (
);
}
function ProgressBar({ pct, color = 'var(--op-exodus-70)', h = 6 }) {
return (
);
}
function Accordion({ title, right, defaultOpen = false, children }) {
const [open, setOpen] = React.useState(defaultOpen);
return (
{open &&
{children}
}
);
}
// Sticky top bar with optional back button + title + right slot
function FlowTopBar({ title, onBack, backLabel, right, eyebrow, landscape }) {
return (
{onBack && (
)}
{eyebrow && {eyebrow}}
{title}
{right}
);
}
// Scrollable screen scaffold (sticky header + scroll body + optional sticky footer)
function ScreenShell({ header, footer, children, padBody = 16, landscape, sidebar }) {
// Landscape split view: fixed summary rail on the left, scrolling detail on the right.
if (landscape && sidebar) {
return (