);
}
// ---- a full ritual card -----------------------------------------------------
// ---- a full ritual card -----------------------------------------------------
// `seq.habits` is the template (which habits exist). `doneMap` is { habitId: true } for the selected day.
function SequenceCard({ seq, doneMap, onToggle, onAdd, onRemove, onTrackChange, onAttachTrack, atLimit, maxRituals, onNavigate }) {
const [picking, setPicking] = React.useState(false);
const [editingId, setEditingId] = React.useState(null);
const habits = seq.habits.map((h) => ({ ...h, done: !!doneMap[h.id] }));
const done = habits.filter((h) => h.done).length;
return (
{seq.time}
{habits.length ? `${done} of ${habits.length}` : "Empty"}
{seq.name}
{habits.length === 0 && (
A blank ritual. Add the first habit that belongs in your {seq.name.toLowerCase()}.
)}
{habits.map((h, i) => (
onToggle(seq.id, h.id)}
onRemove={() => onRemove(seq.id, h.id)}
onOpenEditor={() => setEditingId(h.id)}
onCloseEditor={() => setEditingId(null)}
onAttachTrack={() => { onAttachTrack(seq.id, h.id, h.trackType); setEditingId(h.id); }}
onTrackChange={(t) => onTrackChange(seq.id, h.id, t)}
/>
))}
{atLimit ? (
// The wall, stated where the add button was. It names the limit, what
// lifting it costs nothing to ask about, and leaves what they already
// have untouched — removing a ritual frees the slot back up.
Your free plan holds {maxRituals} rituals.
Premium lifts the limit. You can also remove one to make room — nothing you've built goes away.
);
}
// ---- date helpers -------------------------------------------------------------
function rtToISODate(d) { return window.velourDateISO(d); }
function rtTodayISO() {
const d = new Date();
const off = Number(window.VELOUR_DAY_OFFSET) || 0;
if (off) d.setDate(d.getDate() + off);
return rtToISODate(d);
}
// The member's own clock, "HH:MM", 24-hour and zero-padded — the shape migration
// 019 stores and the only thing the chain needs to order one day's steps against
// each other. Deliberately NOT a timestamp: ordering is a within-day question, and
// a UTC instant would put a 10pm ritual on tomorrow, the same trap the day key
// avoids by being local.
function rtNowHM() {
const d = new Date();
return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
}
function rtFormatDateLabel(iso) {
const today = rtTodayISO();
const d = new Date(iso + "T00:00:00");
// Neighbours derive from the same "today" so the labels can't disagree with it.
if (iso === today) return "Today";
if (iso === rtAddDays(today, -1)) return "Yesterday";
if (iso === rtAddDays(today, 1)) return "Tomorrow";
return d.toLocaleDateString(undefined, { weekday: "short", month: "short", day: "numeric" });
}
function rtAddDays(iso, n) {
const d = new Date(iso + "T00:00:00");
d.setDate(d.getDate() + n);
return rtToISODate(d);
}
// ---- page -------------------------------------------------------------------
const SEQ_STORAGE_KEY = FRESH ? "velour_fresh_rituals_sequences" : "velour_rituals_sequences";
const LOG_STORAGE_KEY = FRESH ? "velour_fresh_rituals_log" : "velour_rituals_log";
function loadSequences() {
try {
const saved = localStorage.getItem(SEQ_STORAGE_KEY);
if (saved) return JSON.parse(saved);
} catch (e) {}
return STARTER_SEQUENCES;
}
function loadLog() {
try {
const saved = localStorage.getItem(LOG_STORAGE_KEY);
if (saved) return JSON.parse(saved);
} catch (e) {}
return {}; // { "2026-06-16": { "h-bed": true, ... } }
}
function saveSequences(seqs) {
try { localStorage.setItem(SEQ_STORAGE_KEY, JSON.stringify(seqs)); } catch (e) {}
}
// THE CHAIN LATCH, 13 Sep 2026. A chain is proven the first time every ritual in
// a sequence is held on the same day — but the log records no date a ritual was
// ADDED, so re-checking the current list against history meant adding one new
// step to a proven sequence sent the card straight back to "Example, not yours
// yet". A member was being told they had lost something for building on it.
// Once proven, the chain stays; the ritual ids held that day are kept so steps
// added since can be marked as not yet held with the rest.
//
// LOCAL ONLY, on purpose. Sync's reconcile writes the server's sequence objects
// over the local ones, so a field hung on a sequence would be wiped on the next
// pull — and the server has no column for it. Losing this key costs nothing
// false: the card falls back to checking the log, as it did before.
//
// STAMPED WITH ITS OWNER, because sequence ids ("morning") and seeded ritual ids
// ("h-bed") are the same on every account. Sign-out clears the key (the rituals
// purge in _ds_bundle.js), but a session abandoned without signing out does not
// run that purge — see the owner note there. A latch owned by somebody else is
// ignored. An unowned one was written before an account existed and is carried
// in, the same rule reconcile applies to anonymous ritual data.
const CHAIN_STORAGE_KEY = FRESH ? "velour_fresh_rituals_chains_v1" : "velour_rituals_chains_v1";
function rtCurrentUid() {
try {
const s = window.velourAuth && window.velourAuth.session();
return (s && s.user && s.user.id) || null;
} catch (e) { return null; }
}
function loadChainLatch() {
try {
const doc = JSON.parse(localStorage.getItem(CHAIN_STORAGE_KEY) || "null");
if (!doc || typeof doc !== "object" || !doc.chains || typeof doc.chains !== "object") return {};
if (doc.owner && doc.owner !== rtCurrentUid()) return {};
return doc.chains;
} catch (e) { return {}; }
}
function saveChainLatch(chains) {
try { localStorage.setItem(CHAIN_STORAGE_KEY, JSON.stringify({ owner: rtCurrentUid(), chains })); } catch (e) {}
}
// The latest day every ritual currently in the sequence was held, or null.
function rtLastFullDay(seq, log) {
const habits = seq.habits || [];
if (habits.length < 2) return null;
const days = Object.keys(log).filter((d) => habits.every((h) => (log[d] || {})[h.id])).sort();
return days.length ? days[days.length - 1] : null;
}
function saveLog(log) {
try { localStorage.setItem(LOG_STORAGE_KEY, JSON.stringify(log)); } catch (e) {}
}
// The longest run of consecutive days this habit was ever held, anywhere in the
// log — independent of whether that run is still alive today.
function longestRun(log, habitId) {
const days = Object.keys(log).filter((d) => log[d] && log[d][habitId]).sort();
let best = 0;
let run = 0;
let prev = null;
for (const d of days) {
run = prev && rtAddDays(prev, 1) === d ? run + 1 : 1;
if (run > best) best = run;
prev = d;
}
return best;
}
// Compute a per-habit streak: consecutive days (ending at `untilISO`) the habit was marked done.
function computeStreak(log, habitId, untilISO) {
let streak = 0;
let cursor = untilISO;
while (log[cursor] && log[cursor][habitId]) {
streak += 1;
cursor = rtAddDays(cursor, -1);
}
return streak;
}
// Headline and support used to gate on two unrelated conditions — the hold length
// and the count of full mornings — so the pair could openly contradict itself:
// "Nothing held yet" sitting above "You've held 1 of the last 7 mornings in full",
// and a named two-day hold sitting above the never-logged-anything empty state.
// Both now read from one assessment of the same history.
function RitualsInsight({ hold, morningsHeld, totalHabits }) {
const hasHold = hold.streak >= 2;
const hasHistory = hasHold || morningsHeld > 0;
const headline = hasHold
? `${hold.label} — ${hold.streak} days running. Quietly compounding.`
: morningsHeld > 0
? "A morning held in full. That is where the pattern starts."
: "Nothing held yet — that's expected. The first check-in starts the hold.";
const support = morningsHeld > 0
? `You've held ${morningsHeld} of the last 7 mornings in full. A quiet day in between doesn't undo any of it.`
: hasHistory
? "No full morning this week. What compounds is the hold above, not the perfect day."
: totalHabits > 0
? "Check off what you complete and the pattern shows here after a few days."
: "Add one small ritual to a sequence — VELOUR starts noticing from the first check-in.";
return ;
}
function DashRituals({ onNavigate }) {
const [sequences, setSequences] = React.useState(loadSequences);
const [log, setLog] = React.useState(loadLog);
const [selectedDate, setSelectedDate] = React.useState(rtTodayISO());
const [justSaved, setJustSaved] = React.useState(false);
const plan = window.useVelourPlan ? window.useVelourPlan() : { maxRituals: null };
// Sync writes localStorage; this screen read it once, at mount. On a second
// device the pull lands after first paint, so without this the member sees an
// empty account until they reload.
const [chainLatch, setChainLatch] = React.useState(loadChainLatch);
if (window.useVelourSynced) window.useVelourSynced("rituals", () => {
setSequences(loadSequences());
setLog(loadLog());
setChainLatch(loadChainLatch());
});
const today = rtTodayISO();
const isToday = selectedDate === today;
const isFuture = selectedDate > today;
const persistSequences = (next) => { setSequences(next); saveSequences(next); };
const persistLog = (next) => { setLog(next); saveLog(next); };
// Toggle a habit's done state for the SELECTED day only.
const toggleHabit = (seqId, habitId) => {
setJustSaved(false);
const dayMap = { ...(log[selectedDate] || {}) };
// Checking a ritual records WHEN, so the chain can show the order a day was
// actually held in rather than the order it was arranged in. Truthy either
// way, so every other reader is untouched (see migration 019).
//
// ONLY FOR TODAY. Ticking a box on Sunday for something held on Friday knows
// nothing about Friday's clock, and stamping it with now would be a confident
// invention — exactly what this feature exists to replace. Backfilled days stay
// `true`, which reads as "held, time unknown", and the chain falls back.
//
// An already-held ritual keeps its original time: unchecking clears it, and
// re-checking stamps afresh, but a re-save must never overwrite the first one.
dayMap[habitId] = dayMap[habitId] ? false : (selectedDate === rtTodayISO() ? rtNowHM() : true);
persistLog({ ...log, [selectedDate]: dayMap });
};
// The free plan's ritual limit counts every habit across both sequences, not
// per-sequence — "three rituals" means three things you do, wherever they sit.
// Counted here rather than from `totalHabits` below, which is derived further
// down the component than addHabit needs it.
const maxRituals = plan.maxRituals;
const atRitualLimit = maxRituals != null && sequences.reduce((n, sq) => n + sq.habits.length, 0) >= maxRituals;
// Habit list edits (add/remove/track) affect the template — same across all days.
const addHabit = (seqId, s) => {
if (atRitualLimit) return;
const id = "h-" + Math.random().toString(36).slice(2, 8);
const next = sequences.map((sq) => sq.id === seqId
? { ...sq, habits: [...sq.habits, { id, libId: s.id, label: s.label, icon: s.icon || "circle", streak: 0, trackType: s.track || null, track: null, isNew: true }] }
: sq);
persistSequences(next);
};
const removeHabit = (seqId, habitId) => {
const next = sequences.map((sq) => sq.id === seqId ? { ...sq, habits: sq.habits.filter((h) => h.id !== habitId) } : sq);
persistSequences(next);
// Clean up any logged completions for the removed habit across all days.
const nextLog = {};
Object.keys(log).forEach((d) => { const dm = { ...log[d] }; delete dm[habitId]; nextLog[d] = dm; });
persistLog(nextLog);
};
const attachTrack = (seqId, habitId, type) => {
const next = sequences.map((sq) => sq.id === seqId ? { ...sq, habits: sq.habits.map((h) => h.id === habitId ? { ...h, track: { ...DEFAULT_TRACK[type] } } : h) } : sq);
persistSequences(next);
};
const changeTrack = (seqId, habitId, t) => {
const next = sequences.map((sq) => sq.id === seqId ? { ...sq, habits: sq.habits.map((h) => h.id === habitId ? { ...h, track: t } : h) } : sq);
persistSequences(next);
};
const handleSaveDay = () => {
saveLog(log); // already persisted on every toggle, but this gives an explicit confirm
setJustSaved(true);
setTimeout(() => setJustSaved(false), 2200);
};
const dayMap = log[selectedDate] || {};
const allHabits = sequences.flatMap((s) => s.habits);
const totalHabits = allHabits.length;
// Two different questions, and they were previously answered by one number.
//
// "Longest held" is the longest run in the member's history. It used to be
// computeStreak(..., today), which is the run ending TODAY — so the morning
// after a two-day hold the tile read "— Just getting started", as though the
// history had been erased. A record you can lose by waking up is not a record.
const longest = allHabits.reduce((best, h) => {
const s = longestRun(log, h.id);
return s > best.streak ? { streak: s, label: h.label } : best;
}, { streak: 0, label: "—" });
// The live run, still anchored to today — this is the one the insight can call
// "days running", because that phrasing is only true of a hold that is alive.
const current = allHabits.reduce((best, h) => {
const s = computeStreak(log, h.id, today);
return s > best.streak ? { streak: s, label: h.label } : best;
}, { streak: 0, label: "—" });
const last7 = Array.from({ length: 7 }, (_, i) => rtAddDays(today, -i));
const morningsHeld = last7.filter((d) => {
const dm = log[d] || {};
const morningHabits = sequences.find((s) => s.id === "morning")?.habits || [];
return morningHabits.length > 0 && morningHabits.every((h) => dm[h.id]);
}).length;
// The insight prefers the live computed hold; the demo's seeded per-habit
// streak values stand in until the log has real history.
const seedBest = allHabits.reduce((b, h) => ((h.streak || 0) > b.streak ? { streak: h.streak, label: h.label } : b), { streak: 0, label: "—" });
const insightHold = current.streak >= seedBest.streak ? current : seedBest;
// The tile prefers the seed for the same reason the insight does. Without this
// the demo showed "Longest held — Just getting started" directly beside an
// insight reading "41 days running", because the tile only ever counted the log
// and Jennifer's showcase carries seeded holds rather than a year of check-ins.
// On a real account seeded holds are 0, so this changes nothing there.
const longestShown = longest.streak >= seedBest.streak ? longest : seedBest;
const stats = [
{ label: "Longest held", value: longestShown.streak > 0 ? `${longestShown.streak} day${longestShown.streak === 1 ? "" : "s"}` : "—", sub: longestShown.streak > 0 ? longestShown.label : "Just getting started" },
{ label: "This week", value: `${morningsHeld} of 7`, sub: "Mornings held" },
{ label: "Rituals forming", value: String(totalHabits), sub: `Across ${sequences.length} sequence${sequences.length === 1 ? "" : "s"}` },
];
// THE REAL CHAIN, 12 Sep 2026. "Ritual chains" used to be permanent fiction —
// three hardcoded example habits ("Morning walk", "Cold water + vitamins"),
// shown to every member forever, describing a mechanism ("VELOUR starts
// chaining them") that never actually engaged. A member asked whether the
// arrows between the steps were supposed to be clickable — which is the tell:
// it read as more built than it was.
//
// The log has no per-check timestamp — a day only records which habits were
// checked, not when — so "the order they're actually completed in" cannot be
// computed and must not be faked. What CAN be shown honestly is the member's
// own configured order for a sequence they have proven out: same predicate as
// "a morning held in full" everywhere else in the product (8ac035c) — every
// habit in the sequence checked on at least one real day — generalized to
// any sequence, not only the morning one. Multi-habit and proven at least
// once is "settled in"; the milestone is the reveal, not a rolling window.
//
// Latched since 13 Sep (see CHAIN_STORAGE_KEY): a sequence proven once keeps
// its chain while at least two of the rituals held that day are still in it.
// Rituals added since are listed in place and marked, never hidden and never
// passed off as already held with the rest.
const chainFor = (s) => {
const habits = s.habits || [];
if (habits.length < 2) return null;
if (rtLastFullDay(s, log)) return { seq: s, added: [] };
const latch = chainLatch[s.id];
if (!latch || !Array.isArray(latch.ids)) return null;
const heldIds = new Set(latch.ids);
if (habits.filter((h) => heldIds.has(h.id)).length < 2) return null;
return { seq: s, added: habits.filter((h) => !heldIds.has(h.id)).map((h) => h.id) };
};
const chain = sequences.reduce((found, s) => found || chainFor(s), null);
const chainSequence = chain ? chain.seq : null;
const chainAdded = new Set(chain ? chain.added : []);
// THE ORDER IT WAS ACTUALLY HELD IN, 16 Sep 2026 — the member's own idea, after
// she read the old card as claiming this and asked what happens when the
// assumption is wrong. It was assuming; now it either knows or says it doesn't.
//
// WEB ONLY, AND THAT IS A DECISION RATHER THAN AN OMISSION (owner, 16 Sep 2026).
// Mobile RECORDS the times — app.jsx writes the same "HH:MM" and it syncs — but
// it deliberately grows no chain card of its own: looking back over how a week
// actually went is a sit-down thing, and the two surfaces are allowed to differ
// where the surface suits the moment. So this is NOT a parity gap to be closed;
// check with the owner before "fixing" it. The recording half IS parity, and has
// to stay: most rituals are held on the phone, so without it this card would have
// almost nothing to read.
//
// Needs a day where EVERY step carries a time (migration 019 records "HH:MM" as
// the log value from the moment a ritual is checked). Any step still holding the
// legacy `true` means that day predates the times, or was backfilled, and a
// partial order is worse than none: it would silently mix real evidence with the
// arranged order and present the result as observed. So it is all or nothing.
//
// The most recent qualifying day wins rather than an average across days. People
// genuinely vary, and "here is how you did it on Tuesday" is a true sentence,
// where "here is the order you tend to use" would need more days than anyone has
// yet and a rule for what counts as tending. That generalisation can come later,
// from the same data — which is the point of recording it now.
const heldOrder = React.useMemo(() => {
if (!chainSequence) return null;
const ids = (chainSequence.habits || []).map((h) => h.id);
if (ids.length < 2) return null;
const days = Object.keys(log).sort().reverse();
for (const day of days) {
const dm = log[day] || {};
const times = ids.map((id) => dm[id]);
if (!times.every((t) => typeof t === "string" && /^\d{2}:\d{2}$/.test(t))) continue;
const ordered = ids.slice().sort((a, b) => (dm[a] < dm[b] ? -1 : dm[a] > dm[b] ? 1 : 0));
// An order identical to the arranged one is not worth a different sentence:
// the card would claim a discovery while showing exactly what it showed
// before. Say it plainly only when the day actually differed.
const differs = ordered.some((id, i) => id !== ids[i]);
return { day, ids: ordered, differs, at: dm };
}
return null;
}, [chainSequence, log]);
const chainSteps = heldOrder
? heldOrder.ids.map((id) => (chainSequence.habits || []).find((h) => h.id === id)).filter(Boolean)
: (chainSequence ? chainSequence.habits : []);
// Record a latch the moment a full day exists, and move it forward when a
// later full day covers a different set of rituals — that is what clears the
// "added since" marks once a new step has been held with the rest.
React.useEffect(() => {
let changed = false;
const next = { ...chainLatch };
sequences.forEach((s) => {
const day = rtLastFullDay(s, log);
if (!day) return;
const ids = s.habits.map((h) => h.id);
const prev = next[s.id];
if (prev && prev.on === day && JSON.stringify(prev.ids) === JSON.stringify(ids)) return;
next[s.id] = { on: day, ids };
changed = true;
});
if (changed) { setChainLatch(next); saveChainLatch(next); }
}, [sequences, log]);
return (
{/* Header */}
Rituals
Make these rituals your own.
Two sequences to start you off — keep what fits, remove what doesn't, and add the rituals that are actually yours. A few can quietly track the details: distance on a walk, your supplements, hydration from a smart bottle.
{isToday
? "Each day starts fresh — check off what you complete, and it's saved automatically as you go."
: `Editing ${rtFormatDateLabel(selectedDate).toLowerCase()}. Changes here only affect that day's log.`}
{/* Sequences */}
{sequences.map((seq) => (
))}
{/* Reflection — the real chain once a sequence has proven itself, an
honestly-labeled example until then. Never both read as the same
thing: a member should never wonder which one they're looking at. */}
{chainSequence ? (
Your ritual chain
{/* "has settled into an order" was read by a member on 16 Sep as the
product claiming it had WATCHED the order — "it's taking the order
of the rituals and assuming they're being done in order". It has
not, and it cannot: the log records which rituals were held on a
day, never when (see THE REAL CHAIN above). The paragraph below
always said "in the order you built them", but the headline led
and the headline overclaimed. It now says whose order this is. */}
{heldOrder
? `Your ${chainSequence.name.toLowerCase()}, in the order you held it ${rtFormatDateLabel(heldOrder.day).toLowerCase()}.`
: `Your ${chainSequence.name.toLowerCase()} is settled in — here it is, in the order you arranged it.`}
{/* No word implying VELOUR pushes or nudges between steps: nothing in
the product runs in the background to do that (see "How VELOUR
runs"), and promising a mechanism that doesn't exist is the exact
mistake this card is being rebuilt to stop making. */}
{heldOrder
? (heldOrder.differs
? "This is the order you actually held them in, which is not the order they are listed in — and that is fine. VELOUR follows you rather than the other way round."
: "This is the order you actually held them in, taken from the times each one was checked rather than from how they are listed.")
: "These are your own steps, in the order you built them — not an example. Doing them one after another is what tends to make each one easier than starting cold."}
{chainAdded.size > 0 && (
Steps marked new were added after this chain settled. Hold them alongside the rest on one day and they join it.
{i + 1}
{h.label}
{isAdded && New}
{/* The evidence, shown rather than described. A member who is told
this is the order she held them in should be able to check. */}
{heldTime && !isAdded && {heldTime}}
{i < arr.length - 1 && }
);
})}
) : (
Ritual chains
Once a sequence settles in, this becomes your own chain.
Build a sequence of two or more rituals and hold every one of them on the same day once — the panel on the right will swap to your own steps, in the order you set them. Until then, here's what that looks like.
{/* Marked as an example on the panel itself, not only in the paragraph
beside it — the paragraph is easy to skip past, and a member who
only sees the numbered list is the one who asked whether the
arrows were supposed to do something. */}
Example, not yours yet
{["Morning walk", "Cold water + vitamins", "Set the day's intention"].map((t, i, arr) => (