// app/ui.jsx — shared primitives + theme context for fyzio
// Exports to window: TweakCtx, useT, VideoMedia, Tag, StatBadge, BottomNav,
// PrimaryButton, Segmented, Sheet, ProgressRing
const TweakCtx = React.createContext({});
const useT = () => React.useContext(TweakCtx);
// ── Exercise media placeholder ───────────────────────────────
function VideoMedia({ style, label = "video cviku", rounded = 20, playing = false, big = false }) {
const t = useT();
const mode = t.imagery || "striped";
const r = rounded;
if (mode === "abstract") {
return (
);
}
// striped
return (
);
}
// ── Exercise metric model (series · time/reps · weight · rest) ──
function exMetrics(ex, { seriesDone = 0, done = false, includeRest = true } = {}) {
const m = [];
m.push({ key: "sets", label: "Série", value: done ? `${ex.sets}/${ex.sets}` : `${seriesDone}/${ex.sets}` });
if (ex.kind === "time") m.push({ key: "time", label: "Výdrž", value: `${ex.hold} s` });
if (ex.reps) m.push({ key: "reps", label: "Opakovania", value: `${ex.reps}×` });
if (ex.weight) m.push({ key: "weight", label: "Záťaž", value: `${String(ex.weight).replace(".", ",")} kg` });
if (includeRest) m.push({ key: "rest", label: "Pauza", value: `${ex.rest} s` });
return m;
}
// ── Marquee (scrolls long text right→left, loops; static if it fits) ──
function Marquee({ text, style }) {
const wrapRef = React.useRef(null);
const txtRef = React.useRef(null);
const [dist, setDist] = React.useState(0);
React.useLayoutEffect(() => {
const measure = () => {
const w = wrapRef.current, t = txtRef.current;
if (!w || !t) return;
const over = t.scrollWidth - w.clientWidth;
setDist(over > 2 ? over : 0);
};
measure();
const t1 = setTimeout(measure, 350);
const t2 = setTimeout(measure, 1200);
window.addEventListener("resize", measure);
return () => { clearTimeout(t1); clearTimeout(t2); window.removeEventListener("resize", measure); };
}, [text]);
const dur = Math.max(5, (dist + 64) / 26);
return (
{text}
);
}
// ── Small tag (Sets 0 of 2, Time 30s) ────────────────────────
function Tag({ label, value, tone = "default" }) {
const tones = {
default: { bg: "var(--chip)", fg: "var(--text)", lab: "var(--ink)" },
accent: { bg: "var(--accent-wash)", fg: "var(--accent-ink)", lab: "var(--accent)" },
done: { bg: "var(--ok-wash)", fg: "var(--ok-ink)", lab: "var(--ok)" },
};
const c = tones[tone] || tones.default;
return (
{label && {label}}
{value}
);
}
// ── Primary CTA ──────────────────────────────────────────────
function PrimaryButton({ children, onClick, disabled, style, icon }) {
return (
);
}
// ── Segmented control (timeframe filters) ────────────────────
function Segmented({ options, value, onChange }) {
return (
{options.map((o) => {
const active = o.value === value;
return (
);
})}
);
}
// ── Progress ring ────────────────────────────────────────────
function ProgressRing({ value, size = 56, sw = 6, children, color = "var(--accent)", track = "var(--ring-track)" }) {
const r = (size - sw) / 2;
const c = 2 * Math.PI * r;
return (
);
}
// ── Bottom navigation ────────────────────────────────────────
function BottomNav({ tab, onTab }) {
const items = [
{ id: "home", label: "Domov", icon: "home" },
{ id: "progress", label: "Pokrok", icon: "chart" },
{ id: "settings", label: "Nastavenia", icon: "gear" },
];
return (
{items.map((it) => {
const active = tab === it.id;
return (
);
})}
);
}
// ── Bottom sheet wrapper ─────────────────────────────────────
function Sheet({ open, onClose, children, height = "auto" }) {
return (
);
}
// ── Series progress color helpers ────────────────────────────
const srBg = (n, sets) => {
if (n >= sets) return "var(--ok)";
if (n === 0) return "#fff";
const t = (n - 1) / Math.max(sets - 1, 1);
return `color-mix(in oklch, var(--accent) ${Math.round(20 + t * 80)}%, white)`;
};
const srIcon = (n, sets) => {
if (n === 0) return "var(--faint)";
if (n >= sets) return "#fff";
const t = (n - 1) / Math.max(sets - 1, 1);
return t < 0.35 ? "var(--accent)" : "#fff";
};
Object.assign(window, { TweakCtx, useT, VideoMedia, Tag, StatBadge: Tag, BottomNav, PrimaryButton, Segmented, Sheet, ProgressRing, Marquee, exMetrics, srBg, srIcon });