// VELOUR dashboard — Wellness pillar page. A state you TEND: measured dials, trends, no checkboxes.
const { Card, Badge } = window.VelourDesignSystem_380ed4;
const FRESH = !!window.VELOUR_FRESH;
const STORAGE_KEY = FRESH ? "velour_fresh_wellness_log" : "velour_wellness_log";
// A broad set of common supplements to choose from. Anything not here can be
// added as a custom entry, so the list stays a starting point — not a limit.
const SUPP_PRESETS = [
"Vitamin D", "Vitamin C", "Vitamin B12", "Multivitamin",
"Magnesium", "Omega-3", "Probiotic", "Zinc",
"Iron", "Calcium", "Creatine", "Collagen",
"Ashwagandha", "Melatonin", "Turmeric", "Electrolytes",
];
// ---- date helpers -----------------------------------------------------------
function wlToISODate(d) { return window.velourDateISO(d); }
function wlTodayISO() {
const d = new Date();
const off = Number(window.VELOUR_DAY_OFFSET) || 0;
if (off) d.setDate(d.getDate() + off);
return wlToISODate(d);
}
function wlFormatDateLabel(iso) {
const today = wlTodayISO();
const d = new Date(iso + "T00:00:00");
// Yesterday derives from the same "today" so the labels can't disagree with it.
if (iso === today) return "Today";
if (iso === wlAddDays(today, -1)) return "Yesterday";
return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
}
function wlAddDays(iso, n) {
const d = new Date(iso + "T00:00:00");
d.setDate(d.getDate() + n);
return wlToISODate(d);
}
// Stored entries can miss fields the dashboard reads (hand-edited or older
// storage); default them so metric math never yields NaN and formatting never throws.
function normalizeEntry(e) {
const num = (v) => (Number.isFinite(+v) ? +v : 0);
return {
sleepH: num(e.sleepH), sleepM: num(e.sleepM), hydration: num(e.hydration),
steps: num(e.steps), daylight: num(e.daylight), stillness: num(e.stillness),
// Movement, in minutes (migration 017). Defaulted like the rest: every day
// written before it existed genuinely holds no movement, so 0 is the truth
// rather than a gap.
exercise: num(e.exercise),
supps: Array.isArray(e.supps) ? e.supps : [],
// Preserved rather than defaulted — see the note above wlStampManual.
...(e.sources && typeof e.sources === "object" ? { sources: e.sources } : {}),
};
}
// ---- provenance -------------------------------------------------------------
//
// Where each number came from. Absent means manual: every entry written before
// this existed was typed by a member, because nothing else could write one.
//
// It exists BEFORE any import does, because withdrawing consent to a health
// source does not mean "stop importing" — it means "delete what came from there",
// and a step count from Apple Health is indistinguishable from a typed one
// without this. That is the same lesson as the photo purge endpoint: an off
// switch that cannot actually erase is a promise the product must not make.
//
// Only fields the member actually CHANGED are stamped manual, so a value that
// arrived from a source keeps its provenance when the member edits the day around
// it. Values live in a small allowlist: "manual", or a source id when import lands.
const WL_METRICS = ["sleepH", "sleepM", "hydration", "steps", "daylight", "stillness", "exercise", "supps"];
function wlStampManual(prev, next) {
const sources = Object.assign({}, (prev && prev.sources) || {});
WL_METRICS.forEach(function (k) {
var before = prev ? JSON.stringify(prev[k]) : undefined;
if (before !== JSON.stringify(next[k])) sources[k] = "manual";
});
return Object.assign({}, next, { sources: sources });
}
function loadWellnessLog() {
try {
const saved = localStorage.getItem(STORAGE_KEY);
if (saved) {
const log = JSON.parse(saved);
for (const day of Object.keys(log)) log[day] = normalizeEntry(log[day]);
return log;
}
} catch (e) {}
return {}; // { "2026-06-16": { sleepH, sleepM, hydration, steps, daylight, stillness, exercise, supps } }
}
function saveWellnessLog(log) {
try { localStorage.setItem(STORAGE_KEY, JSON.stringify(log)); } catch (e) {}
}
// ---- Manual entry form shown on fresh / no-data state ----------------------
function WellnessOnboard({ onSave, selectedDate, onDateChange, existingData }) {
const [step, setStep] = React.useState(existingData ? 1 : 0); // 0=intro, 1=form
const today = wlTodayISO();
const [form, setForm] = React.useState(existingData || {
sleepH: 7, sleepM: 0,
hydration: 1.0,
steps: 5000,
daylight: 20,
stillness: 10,
// Movement starts at 0, unlike every other default here, and that is
// deliberate: the others are a plausible ordinary day, and an ordinary day
// has no exercise in it. A non-zero default would put minutes a member never
// did into their record the moment they opened the form.
exercise: 0,
supps: [],
});
// If the selected date or its existing data changes, refresh the form to match.
React.useEffect(() => {
setForm(existingData || {
sleepH: 7, sleepM: 0, hydration: 1.0, steps: 5000, daylight: 20, stillness: 10, exercise: 0, supps: [],
});
setStep(existingData ? 1 : 0);
}, [selectedDate]);
const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
const [suppInput, setSuppInput] = React.useState("");
const addSupp = (name) => {
const v = (name || "").trim();
if (!v) return;
setForm((f) => (f.supps.includes(v) ? f : { ...f, supps: [...f.supps, v] }));
setSuppInput("");
};
const removeSupp = (name) => setForm((f) => ({ ...f, supps: f.supps.filter((x) => x !== name) }));
const handleSave = () => {
onSave(selectedDate, form);
};
const DateBar = () => (
Wellness is a state, not a to-do list. Log a day and VELOUR begins reflecting the broad strokes back — gently, with no goals to chase.
{/* NO "CONNECT HEALTH DATA" ON THIS SURFACE, AND THE COPY NO LONGER OFFERS IT.
The button here never had an onClick — it was a picture of a door. And
it could not have had one: Apple Health has no web equivalent, so a
browser can never read it. The import belongs on the phone, where
HealthKit exists; the web's job is to display whatever the app has
already synced through /api/wellness. The equivalent button on
src/ui_kits/app/WellnessScreen.jsx is deliberately kept, because that
is the surface where it can one day be true. Removed 4 Sep 2026. */}
Your rhythm will appear here.
Log {window.velourDayPhrase(wlFormatDateLabel(selectedDate))} and your sleep, movement, and daylight start to fill in.
),
},
// THIS FIELD WAS CALLED "MOVEMENT" AND IS NOW CALLED "STEPS". The rename is
// not cosmetic: movement now means minutes of effort, and steps cannot
// measure that — an hour of swimming, a spin class and a heavy lift are all
// roughly zero steps. Two tiles both called Movement would have been the
// ambiguity that made the closet count disagree with the closet grid.
// "Steps" is also simply what this number is; the tile already said so.
{
id: "steps", icon: "footprints", label: "Steps", color: "var(--teal)",
body: (
),
},
// MOVEMENT — minutes of effort, and typeable HERE as well as importable on
// the phone. Not everyone owns a watch, and a field one surface can fill and
// the other cannot is how this codebase drifts. Apple Health can supply the
// same number; nothing about this field assumes it did.
{
id: "exercise", icon: "person-simple-run", label: "Movement", color: "var(--teal)",
body: (
set("exercise", Math.max(0, form.exercise - 5))} />
{form.exercise} min set("exercise", form.exercise + 5)} />
at effort — a swim, a class, a lift
How did your body feel {(() => { const d = window.velourDayPhrase(wlFormatDateLabel(selectedDate)); return /^(today|yesterday)$/.test(d) ? d : `on ${d}`; })()}?
Log what you remember — VELOUR will find the pattern. Switch days to backfill earlier in the month.
{fields.map((f) => (
{f.label}
{f.body}
))}
);
}
function StepBtn({ icon, onClick }) {
return (
);
}
// ---- WlRing progress indicator ------------------------------------------------
function WlRing({ pct, size = 60, stroke = 6, children }) {
const safePct = Number.isFinite(pct) ? Math.min(100, Math.max(0, pct)) : 0;
const R = (size - stroke) / 2, C = 2 * Math.PI * R, off = C * (1 - safePct / 100);
return (
{children}
);
}
// Provenance, in the small text migration 011 was built to make possible. Absent
// means typed, which is what every entry written before the import existed was —
// so this stays silent rather than labelling six of seven tiles "you typed this".
function WlSourceNote({ source }) {
if (source !== "apple-health") return null;
return (
from Apple Health
);
}
// `m.quantity` draws the tile WITHOUT a ring, a percentage or a trend badge.
//
// THAT IS THE WHOLE POINT OF THE VARIANT, so do not "finish" it later by giving
// Movement a goal. A ring is a target you either close or fail, which is Apple
// Fitness's framing and precisely what this product is defined against — the
// lede on this page says wellness is "a state, not a to-do list… with no goals to
// chase". Import Apple's numbers; never import Apple's framing. The other tiles
// keep their rings because they had them before this rule was written down, and
// changing them is a separate decision from adding this one.
function MetricCard({ m }) {
return (
{m.quantity ? (
) : (
)}
{m.label}
{!m.quantity && {m.trend}}
{m.value}
{m.goal}
);
}
function SleepInsight({ data }) {
const sleepLabel = `${data.sleepH}h ${String(data.sleepM).padStart(2, "0")}m`;
return (
{data.supps.length > 0 && (
{data.supps.join(" · ")}
)}
Patterns emerge after a few days of entries.
);
}
function DashWellnessFilled({ data, selectedDate, onDateChange, onEdit, entriesThisMonth }) {
const today = wlTodayISO();
const sleepTotalMins = data.sleepH * 60 + data.sleepM;
const sleepPct = Math.min(100, Math.round((sleepTotalMins / 450) * 100)); // goal: 7h30m
const hydraPct = Math.min(100, Math.round((data.hydration / 2.0) * 100));
const stepsPct = Math.min(100, Math.round((data.steps / 8000) * 100));
const daylightPct = Math.min(100, Math.round((data.daylight / 45) * 100));
const stillPct = Math.min(100, Math.round((data.stillness / 10) * 100));
const suppPct = data.supps.length > 0 ? Math.min(100, Math.round((data.supps.length / 3) * 100)) : 0;
// Where each number came from, so the tiles can say so. Absent means typed —
// 011's rule — and sleep is keyed under sleepH because the hours and the
// minutes are one reading with one origin.
const src = (data.sources && typeof data.sources === "object") ? data.sources : {};
const metrics = [
{ id: "sleep", icon: "moon", label: "Sleep", value: `${data.sleepH}h ${String(data.sleepM).padStart(2, "0")}m`, goal: "7h 30m goal", pct: sleepPct, trend: sleepPct >= 90 ? "On target" : sleepPct >= 70 ? "Close" : "Low", source: src.sleepH },
{ id: "hydra", icon: "drop", label: "Hydration", value: `${window.velourLitres(data.hydration)} L`, goal: "2.0 L goal", pct: hydraPct, trend: hydraPct >= 100 ? "Hit it" : "On pace", source: src.hydration },
{ id: "steps", icon: "footprints", label: "Steps", value: data.steps.toLocaleString(), goal: "8,000 steps goal", pct: stepsPct, trend: stepsPct >= 100 ? "Goal met" : `${stepsPct}%`, source: src.steps },
// A QUANTITY, NEVER A TARGET — see the note on MetricCard. No goal line, no
// ring, no percentage: what steps cannot see, said as a number and left alone.
{ id: "move", icon: "person-simple-run", label: "Movement", value: `${data.exercise} min`, goal: "at effort", quantity: true, source: src.exercise },
{ id: "out", icon: "sun-horizon", label: "Daylight", value: `${data.daylight} min`, goal: "45 min outdoors", pct: daylightPct, trend: daylightPct >= 100 ? "Goal met" : daylightPct >= 50 ? "Halfway" : "Low", source: src.daylight },
{ id: "still", icon: "wind", label: "Stillness", value: `${data.stillness} min`, goal: "10 min breathwork", pct: stillPct, trend: stillPct >= 100 ? "Done" : "Steady", source: src.stillness },
{ id: "supp", icon: "pill", label: "Supplements", value: data.supps.length ? `${data.supps.length} taken` : "None logged", goal: data.supps.length ? data.supps.join(" · ") : "Tap to add", pct: suppPct, trend: data.supps.length ? (data.supps.length >= 3 ? "Goal met" : `${data.supps.length} of 3`) : "—", source: src.supps },
];
const nudges = [];
if (hydraPct < 100) nudges.push({ icon: "drop", t: `${window.velourLitres(2.0 - data.hydration)} L more water`, s: "You tend to dip after 3pm." });
if (daylightPct < 100) nudges.push({ icon: "sun-horizon", t: `${45 - data.daylight} more minutes outdoors`, s: "A short walk closes the gap." });
if (data.supps.length === 0) nudges.push({ icon: "pill", t: "Log your supplements", s: "Tap Edit to add what you took." });
if (nudges.length === 0) nudges.push({ icon: "check-circle", t: `You hit every goal ${wlFormatDateLabel(selectedDate).toLowerCase() === "today" ? "today" : "that day"}`, s: "A genuinely good day. Rest well." });
return (
Wellness
Your body, in rhythm.
Nothing to check off — wellness is a state, not a to-do list. VELOUR watches the broad strokes and reflects the rhythm back, gently.