/* ============================================================
TRELLIS — shared UI primitives
Exports to window: Icon, Avatar, Badge, MaskedValue, Sparkline,
BarRow, StatCard, Toasts, useToasts, EhcwLogo, PoweredBy
============================================================ */
// ---------- icon set (simple geometric strokes only) ----------
const ICON_PATHS = {
dashboard: ,
clients: ,
sprout: ,
database: ,
import: ,
report: ,
box: ,
sliders: ,
lock: ,
unlock: ,
eye: ,
search: ,
sun: ,
moon: ,
plus: ,
x: ,
check: ,
chevR: ,
chevL: ,
chevD: ,
mail: ,
calendar: ,
spark: ,
refresh: ,
menu: ,
logout: ,
shield: ,
table: ,
download: ,
filter: ,
bell: ,
clock: ,
alert: ,
users:
};
// Signature style: duotone strokes + a gold "node" notch on feature icons —
// the Unstoppables icon family, exclusive to this app.
const NODE_ICONS = new Set(['dashboard', 'sprout', 'clients', 'box', 'report', 'import', 'sliders', 'database', 'table', 'spark', 'mail', 'calendar', 'shield', 'bell']);
// Live signed-in user (null in demo mode). Re-renders the consumer when
// Firebase auth state arrives — kills every hardcoded "June Park".
function useEhcwUser() {
const [, setT] = React.useState(0);
React.useEffect(() => {
const b = () => setT(t => t + 1);
document.addEventListener('ehcw:user', b);
return () => document.removeEventListener('ehcw:user', b);
}, []);
return (window.EHCW_AUTH && window.EHCW_AUTH.getUser()) || null;
}
// Staff avatar: EHCW roster photo (ehcw.ca/contact) by default, then the
// Google account photo, then initials. Used wherever the signed-in person shows.
function PersonAvatar({ name, photo, size = 32, hue = 290 }) {
const [err, setErr] = React.useState(false);
const roster = window.TRELLIS_SCHEMA && window.TRELLIS_SCHEMA.photoFor ? window.TRELLIS_SCHEMA.photoFor(name) : null;
const src = roster || photo || null;
if (src && !err) {
return 
setErr(true)}
style={{ width: size, height: size, borderRadius: '50%', objectFit: 'cover', border: '1px solid var(--hairline)', flexShrink: 0, display: 'block' }} />;
}
return w[0]).join('').slice(0, 2).toUpperCase()} hue={hue} size={size} />;
}
function Icon({ name, size = 20, stroke = 1.7, style = {}, node }) {
const showNode = node !== undefined ? node : NODE_ICONS.has(name);
return (
);
}
// ---------- avatar ----------
function Avatar({ initials, hue = 310, size = 34 }) {
return (
{initials}
);
}
// ---------- badge ----------
function Badge({ children, tone = 'neutral' }) {
const tones = {
neutral: { bg: 'var(--hover)', c: 'var(--ink-soft)' },
plum: { bg: 'var(--accent-soft)', c: 'var(--accent)' },
blue: { bg: 'var(--blue-soft)', c: 'var(--blue)' },
gold: { bg: 'var(--gold-soft)', c: 'var(--gold-deep)' },
leaf: { bg: 'var(--leaf-soft)', c: 'var(--leaf)' },
coral: { bg: 'var(--coral-soft)', c: 'var(--coral)' }
};
const t = tones[tone] || tones.neutral;
return (
{children}
);
}
// ---------- masked PII value ----------
function MaskedValue({ value, revealed, mono = true }) {
if (revealed) {
return {value};
}
return (
••••••••
);
}
// ---------- sparkline ----------
function Sparkline({ data, w = 96, h = 30, hue = 330 }) {
const min = Math.min(...data), max = Math.max(...data);
const pts = data.map((v, i) => {
const x = (i / (data.length - 1)) * (w - 4) + 2;
const y = h - 3 - ((v - min) / (max - min || 1)) * (h - 8);
return `${x},${y}`;
});
const id = 'sg' + hue + w + data[0];
return (
);
}
// ---------- horizontal bar row ----------
function BarRow({ label, value, max, hue }) {
return (
);
}
// ---------- toasts ----------
function useToasts() {
const [toasts, setToasts] = React.useState([]);
const push = React.useCallback((msg, tone = 'plum') => {
const id = Date.now() + Math.random();
setToasts(t => [...t, { id, msg, tone }]);
setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), 3400);
}, []);
return [toasts, push];
}
function Toasts({ toasts }) {
return (
{toasts.map(t => (
{t.msg}
))}
;
if (!chip) return img;
return (
{img}
);
}
// ---------- Powered by Google Cloud + Claude ----------
function GoogleCloudMark({ h = 18 }) {
return (
);
}
function ClaudeMark({ h = 16 }) {
// radial starburst
const spokes = [];
for (let i = 0; i < 12; i++) {
const a = (i / 12) * Math.PI * 2;
const r1 = 3.4, r2 = i % 2 === 0 ? 14 : 11.5;
spokes.push();
}
return ;
}
function PoweredBy({ compact = false }) {
return (
Powered by
Google Cloud
Claude
);
}
Object.assign(window, { useEhcwUser, PersonAvatar, Icon, Avatar, Badge, MaskedValue, Sparkline, BarRow, useToasts, Toasts, EhcwLogo, PoweredBy });