// ui.jsx — shared building blocks: placeholders, cards, chips, primitives
const { useMemo } = React;
// Photographic placeholder — tinted iconographic frame with subtle texture + label
function SaintPlaceholder({ tone = 'rose', label = 'Saint of the day', size = 'md', dark = false, halo = false }) {
const t = window.TOKENS;
const palette = {
rose: { a: '#E8C0BA', b: '#C99A98', c: '#A87878' },
blush: { a: '#F0D5CE', b: '#D9A6A0', c: '#B07A7A' },
cream: { a: '#EDE0CC', b: '#D6BFA0', c: '#A8896A' },
sage: { a: '#D2DCC2', b: '#A8B89A', c: '#7A8A6E' },
gold: { a: '#E8D4A8', b: '#C9A878', c: '#9A7C50' },
violet:{ a: '#D8CCDF', b: '#9D8AA8', c: '#6E5C7E' },
}[tone] || { a:'#E8C0BA', b:'#C99A98', c:'#A87878' };
const sizing = { sm: 64, md: 96, lg: 132, xl: 200, hero: 240 }[size];
const radius = size === 'sm' ? 14 : size === 'md' ? 18 : 24;
// Iconographic placeholder: arched window + halo silhouette + monospace tag
return (
{/* arched window frame */}
{/* halo */}
{halo && (
)}
{/* silhouette: simple bust shape */}
{/* fine grain */}
{/* label tag */}
{label}
{items.map(it => {
const isActive = active === it.id;
const fg = isActive
? (dark ? '#fff' : t.roseDeep)
: (dark ? t.inkMute.dark : t.inkMute.light);
return (
);
})}
);
}
function TabIcon({ name, active }) {
const stroke = 'currentColor';
const fill = active ? 'currentColor' : 'none';
const sw = 1.8;
if (name === 'home') return (
);
if (name === 'journey') return (
);
if (name === 'saints') return (
);
if (name === 'me') return (
);
return null;
}
// Subtle decorative cross (small, used sparingly)
function CrossGlyph({ size = 12, color = 'currentColor', opacity = 0.5 }) {
return (
);
}
window.SaintPlaceholder = SaintPlaceholder;
window.LiturgicalDot = LiturgicalDot;
window.Chip = Chip;
window.TabBar = TabBar;
window.CrossGlyph = CrossGlyph;
// ─────────────── SIZE GLYPH ───────────────
// Tiny soft SVG illustrations for each weekly size comparison.
// All glyphs sit in a 24×24 box, centered, with stroke-based outlines so they read
// as quiet line drawings rather than emoji. The `palette` prop tints them.
function SizeGlyph({ glyph = 'poppy', size = 28, palette }) {
const t = window.TOKENS;
const c = palette || { stem: t.sage, body: t.rose, deep: t.roseDeep, gold: t.gold };
const G = {
// Seeds & tiny things — round/oval with a single stem mark
poppy: ,
sesame: ,
mustard: ,
appleseed: ,
pea: ,
// Berries / small fruit
blueberry: ,
raspberry: ,
cherry: ,
olive: ,
fig: ,
lime: ,
lemon: ,
peach: ,
apple: ,
avocado: ,
pomegranate:,
pepper: ,
mango: ,
banana: ,
carrot: ,
squash: ,
corn: ,
rutabaga: ,
scallion: ,
cauliflower:,
aubergine: ,
butternut: ,
cabbage: ,
coconut: ,
jicama: ,
pineapple: ,
cantaloupe: ,
honeydew: ,
romaine: ,
chard: ,
leek: ,
pumpkin: ,
watermelon: ,
};
return (
);
}
// Format size as a short label, e.g. "13 mm" or "1.6 kg"
function formatSize(size) {
if (!size) return '';
const parts = [];
if (size.mm != null) {
parts.push(size.mm < 10 ? `${size.mm} mm` : size.mm < 100 ? `${size.mm} mm` : `${(size.mm / 10).toFixed(1)} cm`);
}
if (size.g != null) {
parts.push(size.g < 1000 ? `${size.g} g` : `${(size.g / 1000).toFixed(2)} kg`);
}
return parts.join(' · ');
}
window.SizeGlyph = SizeGlyph;
window.formatSize = formatSize;