{colors.map((c) => (
);
}
/* ---- Centralized household members (single source of truth: the Income page) ----
Every screen that shows or selects a person reads from this one store, so a
rename on Income instantly flows to the Dashboard, Transactions, Reports, etc. */
const MEMBERS_KEY = "driftwood.v1.income.people";
function defaultMembers() {
const inc = (window.FP && window.FP.income && window.FP.income.people) || [];
return [
{ name: "Maya", role: "Parent", amount: String(inc[0] ? inc[0].biweekly : 2400), freq: "biweekly", tax: 22 },
{ name: "Devin", role: "Parent", amount: String(inc[1] ? inc[1].biweekly : 3100), freq: "biweekly", tax: 24 },
];
}
const memberStore = (() => {
const listeners = new Set();
const K = MEMBERS_KEY;
const read = () => {
try { const raw = localStorage.getItem(_localKey(K)); if (raw != null) return JSON.parse(raw); } catch (e) {}
return defaultMembers();
};
let state = read();
const emit = () => listeners.forEach((l) => l());
// Load from API on startup — overwrites local if present
_apiGet(K).then((remote) => {
if (remote !== null && remote !== undefined) {
state = remote;
try { localStorage.setItem(_localKey(K), JSON.stringify(remote)); } catch (e) {}
emit();
}
});
return {
get: () => state,
set: (next) => {
state = typeof next === "function" ? next(state) : next;
try { localStorage.setItem(_localKey(K), JSON.stringify(state)); } catch (e) {}
_apiPut(K, state);
emit();
},
subscribe: (l) => { listeners.add(l); return () => listeners.delete(l); },
refresh: () => { state = read(); emit(); },
};
})();
// Cross-tab storage sync removed — it caused households in different tabs to bleed into each other.
// Member data now syncs via the API (namespaced by household code) on page load.
/* Shared state hook — all consumers stay in sync. Same API as useState. */
function useMembers() {
const [, force] = React.useReducer((x) => x + 1, 0);
React.useEffect(() => memberStore.subscribe(force), []);
return [memberStore.get(), memberStore.set];
}
/* Just the (trimmed, non-empty) names — for selects, filters & labels. */
function useMemberNames() {
const [people] = useMembers();
const names = people.map((p) => (p.name || "").trim()).filter(Boolean);
return names.length ? names : ["Me"];
}
function householdLabel(names) {
const list = (names || []).filter(Boolean);
if (list.length === 0) return "My household";
if (list.length <= 2) return list.join(" & ");
return list.slice(0, -1).join(", ") + " & " + list[list.length - 1];
}
function initialsOf(name) {
return ((name || "").trim()[0] || "?").toUpperCase();
}
/* ---- API sync helpers ─────────────────────────────────────────────────────
All reads/writes mirror localStorage AND the Cloudflare Worker (if configured).
Set window.DRIFTWOOD_API in the HTML config block to enable shared sync.
Falls back gracefully to localStorage-only if the API is not configured. */
function _apiHeaders() {
const h = { "Content-Type": "application/json" };
const tok = sessionStorage.getItem("driftwood.household") || window.DRIFTWOOD_TOKEN || "";
if (tok) h["X-App-Token"] = tok;
return h;
}
async function _apiGet(K) {
const base = window.DRIFTWOOD_API;
if (!base) return undefined;
try {
const r = await fetch(`${base}/store/${encodeURIComponent(K)}`, { headers: _apiHeaders() });
if (!r.ok) return undefined;
const { value } = await r.json();
return value; // null means key exists but is null; undefined means request failed
} catch (e) { return undefined; }
}
function _apiPut(K, value) {
const base = window.DRIFTWOOD_API;
if (!base) return;
fetch(`${base}/store/${encodeURIComponent(K)}`, {
method: "PUT",
headers: _apiHeaders(),
body: JSON.stringify({ value }),
}).catch(() => {});
}
function _apiClear() {
const base = window.DRIFTWOOD_API;
if (!base) return;
fetch(`${base}/store`, { method: "DELETE", headers: _apiHeaders() }).catch(() => {});
}
function _localKey(K) {
const hh = sessionStorage.getItem("driftwood.household") || "";
return hh ? hh + ":" + K : K;
}
/* ---- Persistence: localStorage (instant) + API sync (shared) ---- */
function usePersist(key, initial) {
const K = "driftwood.v1." + key;
// Read from localStorage immediately so the UI renders without a flash
const [val, setValInner] = React.useState(() => {
try {
const raw = localStorage.getItem(_localKey(K));
if (raw != null) return JSON.parse(raw);
} catch (e) {}
return typeof initial === "function" ? initial() : initial;
});
// On mount, fetch from the shared API — overwrites local if a newer value exists
React.useEffect(() => {
_apiGet(K).then((remote) => {
if (remote !== null && remote !== undefined) {
setValInner(remote);
try { localStorage.setItem(_localKey(K), JSON.stringify(remote)); } catch (e) {}
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [K]);
const setVal = React.useCallback((next) => {
setValInner((prev) => {
const newVal = typeof next === "function" ? next(prev) : next;
// Write to localStorage for instant reactivity
try { localStorage.setItem(_localKey(K), JSON.stringify(newVal)); } catch (e) {}
// Write to shared API (fire-and-forget)
_apiPut(K, newVal);
return newVal;
});
}, [K]);
return [val, setVal];
}
function clearStored() {
const hh = sessionStorage.getItem("driftwood.household") || "";
const prefix = hh ? hh + ":driftwood.v1." : "driftwood.v1.";
Object.keys(localStorage).filter((k) => k.startsWith(prefix)).forEach((k) => localStorage.removeItem(k));
_apiClear();
}
Object.assign(window, { Icon, Donut, Spark, AreaChart, PALETTE, SWATCHES, Modal, TextField, MoneyField, SelectField, ColorPicker, usePersist, clearStored, useMembers, useMemberNames, householdLabel, initialsOf });