,
vault: <>,
edit: <>,
};
return (
);
};
// ─────────────────────────────────────────────────────────────
// Status bar (in-app — slim, used inside iOS frame area)
// ─────────────────────────────────────────────────────────────
const WStatusBar = ({ time = '8:24', tone = 'light' }) => {
const c = tone === 'light' ? 'var(--ink)' : '#fff';
return (
);
};
// ─────────────────────────────────────────────────────────────
// Card — soft elevated surface
// ─────────────────────────────────────────────────────────────
const Card = ({ children, pad = 18, radius = 'var(--r-md)', tone = 'surface', style, ...rest }) => {
const bg = tone === 'sage' ? 'var(--sage-soft)' :
tone === 'clay' ? 'var(--clay-soft)' :
tone === 'plum' ? 'var(--plum-soft)' :
tone === 'amber' ? 'var(--amber-soft)' :
tone === 'soft' ? 'var(--surface-2)' :
'var(--surface)';
return (
{children}
);
};
// ─────────────────────────────────────────────────────────────
// Pill / Tag
// ─────────────────────────────────────────────────────────────
const Pill = ({ children, tone = 'sage', size = 'sm', icon, style }) => {
const map = {
sage: ['var(--sage-soft)', 'var(--sage-ink)'],
clay: ['var(--clay-soft)', 'oklch(0.42 0.10 40)'],
amber: ['var(--amber-soft)', 'oklch(0.45 0.08 70)'],
plum: ['var(--plum-soft)', 'oklch(0.38 0.08 320)'],
ink: ['var(--ink)', 'var(--bg)'],
muted: ['var(--bg-soft)', 'var(--ink-2)'],
};
const [bg, fg] = map[tone] || map.sage;
const isSm = size === 'sm';
return (
{icon}{children}
);
};
// ─────────────────────────────────────────────────────────────
// Avatar — initials, soft tinted bg
// ─────────────────────────────────────────────────────────────
const Avatar = ({ name = '', size = 36, tone = 'sage', style }) => {
const initials = name.split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase();
const tones = {
sage: ['var(--sage-soft)', 'var(--sage-ink)'],
clay: ['var(--clay-soft)', 'oklch(0.42 0.10 40)'],
plum: ['var(--plum-soft)', 'oklch(0.38 0.08 320)'],
amber:['var(--amber-soft)', 'oklch(0.45 0.08 70)'],
ink: ['var(--ink)', 'var(--bg)'],
};
const [bg, fg] = tones[tone] || tones.sage;
return (
{initials}
);
};
// ─────────────────────────────────────────────────────────────
// Patient avatar — persistent multi-patient context indicator.
// Always sits in the top-left of primary screens. Tappable —
// opens the patient detail view. Future-ready for a switcher
// (long-press or chevron) when multi-patient lands.
// ─────────────────────────────────────────────────────────────
const PatientAvatar = ({ name = 'Margaret Chen', tone = 'sage', size = 36, onTap }) => (
);
// ─────────────────────────────────────────────────────────────
// Bottom navigation bar
// ─────────────────────────────────────────────────────────────
const BottomNav = ({ active = 'home', onChange }) => {
const items = [
{ id: 'home', label: 'Home', icon: 'home' },
{ id: 'meds', label: 'Meds', icon: 'pill' },
{ id: 'visits', label: 'Visits', icon: 'note' },
{ id: 'providers', label: 'Providers', icon: 'stethoscope' },
{ id: 'vault', label: 'Vault', icon: 'vault' },
];
return (
{items.map(it => {
const isActive = active === it.id;
return (
);
})}
);
};
// ─────────────────────────────────────────────────────────────
// Top nav bar (in-app — large title or compact)
// ─────────────────────────────────────────────────────────────
const TopBar = ({ title, eyebrow, leading, trailing, dense = false, serif = false }) => (
{(title || eyebrow) && (
{eyebrow &&
{eyebrow}
}
{title &&
{title}
}
)}
);
const IconBtn = ({ name, onClick, tone = 'ghost' }) => {
const styles = {
ghost: { background: 'transparent', color: 'var(--ink-2)' },
soft: { background: 'var(--surface-2)', color: 'var(--ink)' },
};
return (
);
};
// ─────────────────────────────────────────────────────────────
// Screen — full iPhone-shaped surface (used inside DCArtboard)
// ─────────────────────────────────────────────────────────────
const PHONE_W = 390;
const PHONE_H = 844;
const Screen = ({ children, bg = 'var(--bg)', statusTone = 'light', time = '8:24', hideNav, navActive = 'home', onNav, hideStatus }) => (
{!hideStatus &&
}
{children}
{!hideNav &&
}
{/* home indicator */}
{children}
);
// ─────────────────────────────────────────────────────────────
// Image placeholder — striped, monospace label
// ─────────────────────────────────────────────────────────────
const ImgSlot = ({ label, w = '100%', h = 100, radius = 'var(--r-sm)', tone = 'sage', style }) => {
const colors = {
sage: ['oklch(0.88 0.025 150)', 'oklch(0.83 0.030 150)'],
warm: ['oklch(0.92 0.018 75)', 'oklch(0.88 0.022 75)'],
plum: ['oklch(0.88 0.022 320)', 'oklch(0.83 0.028 320)'],
};
const [c1, c2] = colors[tone] || colors.sage;
return (
{label && {label}}
);
};
// ─────────────────────────────────────────────────────────────
// Sparkline / Trend mini-chart
// ─────────────────────────────────────────────────────────────
const Sparkline = ({ data = [], w = 120, h = 32, color = 'var(--sage-deep)', fill = true }) => {
if (!data.length) return null;
const min = Math.min(...data), max = Math.max(...data);
const r = max - min || 1;
const pts = data.map((v, i) => [
(i / (data.length - 1)) * w,
h - 4 - ((v - min) / r) * (h - 8),
]);
const d = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
const area = `${d} L${w} ${h} L0 ${h} Z`;
return (
);
};
// ─────────────────────────────────────────────────────────────
// Corda wordmark / logomark — Triskele (three-lobed bond)
// ─────────────────────────────────────────────────────────────
const Wordmark = ({ size = 22, color = 'var(--ink)' }) => (
corda
);
// Corda mark — stroked triskele. Three balanced teardrop lobes rotating
// from a shared center. Single stroke weight; round caps/joins.
// Bare by default; pass container="sage" | "ink" | "cream" for an
// app-icon style rounded square.
const Logomark = ({ size = 32, color = 'var(--sage)', container = null }) => {
const inner = container ? size * 0.62 : size;
const strokeColor = container === 'sage' ? '#F4F1EA'
: container === 'ink' ? '#6E8B7B'
: container === 'cream' ? '#6E8B7B'
: color;
const mark = (
);
if (!container) return mark;
const bg = container === 'ink' ? 'var(--ink)'
: container === 'cream' ? 'var(--bg)'
: 'var(--sage)';
return (
{mark}
);
};
Object.assign(window, {
Icon, WStatusBar, Card, Pill, Avatar, PatientAvatar, BottomNav, TopBar, IconBtn,
Screen, Row, ImgSlot, Sparkline, Wordmark, Logomark,
PHONE_W, PHONE_H,
});