);
}
// --- Tiny pill chip used in plan-trip / config selectors ---
function Pill({ children, on, onClick, kind }) {
const cls = `chip ${on?'on':''}`;
return {children};
}
// --- Back row (used at top of detail screens) ---
function BackRow({ to, label, go }) {
return (
{label}
);
}
// --- Plain divider with caption ---
function LabelRule({ children, more }) {
return (
{children}
{more &&
{more} →
}
);
}
// --- CollapsingHero: scrolls naturally at top; a thin sticky data bar
// glues to top:44px (below the topbar) so once the hero scrolls away,
// the user still sees a quick summary of the section state.
// Pillar pages (Gear / Supply / Maintain / Record / Protect) use this.
// v3.2: `right` slot lets each page drop a per-section action (e.g., a
// '?' tour button) into the empty top-right corner of the hero. ---
function CollapsingHero({ eyebrow, headline, sub, summary, right }) {
return (
<>
{right &&
{right}
}
{eyebrow &&
{eyebrow}
}
{headline}
{sub &&
{sub}
}
{summary && (
{summary}
)}
);
}
// --- QuickActionButton: small red "+ Label" button for the CollapsingHero
// right slot. Saves the user from scrolling to the bottom of a page for
// a primary add action. Pattern is reused across Gear / Supply / etc. ---
function QuickActionButton({ onClick, label, title }) {
return (
);
}
// --- Tour button: standard "?" in a circle — universal help imagery.
// Drops into the top-right of any CollapsingHero. The walkthrough
// overlay is deferred to next pass; this is the entry point. ---
function TourButton({ onClick }) {
return (
);
}
// --- ReorderableSections: generic helper for letting the user reorder
// page sections. v4.7 refactor: now CONTROLLED — the page owns the
// editMode state and renders the trigger button wherever it wants
// (typically the CollapsingHero's right slot, next to TourButton).
// A compact instruction strip appears only when editMode is on. ---
function ReorderableSections({ defaultOrder, renderers, sectionLabels, editMode, onExit }) {
const [order, setOrder] = React.useState(defaultOrder);
const move = (id, dir) => {
const idx = order.indexOf(id);
if (idx < 0) return;
const target = dir === 'up' ? idx - 1 : idx + 1;
if (target < 0 || target >= order.length) return;
const next = [...order];
[next[idx], next[target]] = [next[target], next[idx]];
setOrder(next);
};
const reset = () => setOrder(defaultOrder);
const customized = JSON.stringify(order) !== JSON.stringify(defaultOrder);
return (
<>
{editMode && (
)}
{order.map((id, idx) => {
const Render = renderers[id];
if (!Render) return null;
return (
);
})}
{/* Bottom Customize entry (alternate path per user request) */}
{!editMode && (
onExit && onExit('open')} compact/>
)}
);
}
// --- ReorderButton: drop into CollapsingHero's right slot. Single icon,
// same visual weight as TourButton. Tap toggles editMode. ---
function ReorderButton({ on, onToggle, compact }) {
if (compact) {
return (
);
}
return (
);
}
function ReorderInstructionStrip({ onExit, onReset, customized }) {
return (