// Vanta App — home screen: interactive cards, checkable moves, habits sheet,
// plant-a-thought composer, horizon pills. Navigation is handled by the shell.
// Canonical card order. 'habits' places the habits tile on desktop; the
// mobile stack filters it out (it has its own dedicated card there).
const V_DEFAULT_ORDER = ['learning', 'work', 'habits', 'home', 'hobbies', 'sleep', 'thoughts', 'professional', 'finance', 'health'];
// Resolve the user's saved order, folding in any keys added since it was saved.
function vantaCardOrder(saved) {
const stored = Array.isArray(saved) ? saved.filter(k => V_DEFAULT_ORDER.includes(k)) : [];
return [...stored, ...V_DEFAULT_ORDER.filter(k => !stored.includes(k))];
}
// Arrange mode — mission-control style. Name-only chips jiggle; drag a chip
// up or down to reorder; done commits the order.
function VArrange({ P, order, labels, onDone, onCancel }) {
const S = vStyles(P);
const [items, setItems] = React.useState(order);
const [dragKey, setDragKey] = React.useState(null);
const drag = React.useRef(null);
const ROW = 50;
const down = (i) => (e) => {
drag.current = { from: i, cur: i, startY: e.clientY, base: items };
setDragKey(items[i]);
e.currentTarget.setPointerCapture(e.pointerId);
};
const move = (e) => {
const d = drag.current;
if (!d) return;
const delta = Math.round((e.clientY - d.startY) / ROW);
const to = Math.max(0, Math.min(d.base.length - 1, d.from + delta));
if (to !== d.cur) {
d.cur = to;
const next = [...d.base];
const [m] = next.splice(d.from, 1);
next.splice(to, 0, m);
setItems(next);
}
};
const up = () => { drag.current = null; setDragKey(null); };
return (
Arrange the gardendrag to reorder
{items.map((k, i) => (
{labels[k] || k}
))}
);
}
function VHomeHeader({ P, palette, onCyclePalette, onSources, onArrange }) {
const S = vStyles(P);
return (
vanta
);
}
// Level 0 — the day in one honest line, with a tone dot (attention/good/calm).
// Reads the server-computed glance and re-renders when anything changes.
function VGlance({ P, style }) {
const [, bump] = React.useReducer(x => x + 1, 0);
React.useEffect(() => {
const on = () => bump();
window.addEventListener('vanta:changed', on);
return () => window.removeEventListener('vanta:changed', on);
}, []);
const g = (window.VANTA_LIVE && window.VANTA_LIVE.glance) || null;
if (!g || !g.line) return null;
const tone = g.tone === 'attention' ? P.rust : g.tone === 'good' ? P.accent : P.ink3;
return (
{g.line}
);
}
// Client mirror of gardenAreaNotable (src/vanta-glance.js, unit-tested) — an
// area opens on its own when a metric is materially behind or it was touched in
// the last 6h; otherwise it rests. Kept in sync with the pure version.
function vGardenAreaNotable(area, lastTouchMs) {
if (!area || area.connect) return false;
const details = Array.isArray(area.details) ? area.details : [];
const behind = details.some(d => typeof d.pct === 'number' && d.pct < 0.7);
const touched = lastTouchMs > 0 && (Date.now() - lastTouchMs) < 6 * 3600 * 1000;
return behind || touched;
}
// Split area keys into the ones that stay full (the first `bigCount`, plus
// anything notable today) and the quiet rest. Shared by both shells so the
// smart-open behavior is identical. depth='open' keeps everything full.
function vPartitionAreas(keys, areaFor, lastTouchOf, depth, bigCount = 2) {
if (depth === 'open') return { notable: keys.slice(), resting: [] };
const notable = keys.filter((k, i) => i < bigCount || vGardenAreaNotable(areaFor(k), lastTouchOf(k) || 0));
return { notable, resting: keys.filter(k => !notable.includes(k)) };
}
function VReflection({ data, P }) {
const S = vStyles(P);
return (