/* global React, UI */
const { useState } = React;
// ====================================================================
// Shared mobile components
// ====================================================================
// Mobile screen scaffold — fits the 420×880 mobile artboard
function MScreen({ children, footer }) {
return (
{children}
{footer &&
{footer}
}
);
}
// Mobile top bar — back left, slot right
function MTopBar({ onBack = () => {}, right, label, sticky }) {
const { IconBack } = window.UI;
return (
);
}
// Tappable list row
function MRow({ children, onClick, last }) {
return (
{children}
);
}
// Member avatar — small initials block
function MiniAvatar({ initials, size = 40, self, accent }) {
return (
40 ? 13 : 11,
color: self || accent ? "var(--accent)" : "var(--text-2)",
}}>{initials}
);
}
// Sage progress bar
function SageBar({ value, total = 1, height = 4 }) {
const pct = Math.max(0, Math.min(100, (value / total) * 100));
return (
);
}
// Sticky bottom CTA wrapper
function MStickyCTA({ children, hint }) {
return (
{hint &&
{hint}
}
{children}
{children}
;
}
// Section header — serif italic accent
function MSectionH({ children, right, style }) {
return (
{children}
{right && {right}}
);
}
// Sparkline (mobile-sized)
function MiniSpark({ data, w = 80, h = 18, color = "var(--text-2)" }) {
const max = Math.max(...data), min = Math.min(...data);
const pts = data.map((v, i) => `${(i/(data.length-1))*w},${h - ((v-min)/(max-min||1))*h}`).join(" ");
return (
);
}
// Perforated divider
function Perf({ margin = "20px 0" }) {
return ;
}
// Sage pill-button
function SagePill({ children, onClick, ghost, fullWidth, height = 48, fontSize = 14 }) {
return (
);
}
// Glyph icons used in notifications + rhythm — drawn as SVG, never emoji
const Glyph = {
PaperPlane: ({ size = 16, color = "var(--text-2)" }) => (
),
Check: ({ size = 16, color = "var(--accent)" }) => (
),
Dot: ({ size = 16, color = "var(--text-3)" }) => (
),
ArrowRet: ({ size = 16, color = "var(--accent)" }) => (
),
Wave: ({ size = 16, color = "var(--accent)" }) => (
),
Pending: ({ size = 16, color = "var(--text-2)" }) => (
),
Share: ({ size = 18, color = "var(--text-2)" }) => (
),
Cog: ({ size = 18, color = "var(--text-2)" }) => (
),
Search: ({ size = 18, color = "var(--text-2)" }) => (
),
Bell: ({ size = 18, color = "var(--text-2)" }) => (
),
Filter: ({ size = 16, color = "var(--text-2)" }) => (
),
};
window.M = { MScreen, MTopBar, MRow, MiniAvatar, SageBar, MStickyCTA, Eyebrow, MSectionH, MiniSpark, Perf, SagePill, Glyph };