// Shared UI primitives for soko demo + app
const { motion, AnimatePresence } = window;
// --- Window size hook ---
function useWindowSize() {
const [sz, setSz] = React.useState({ w: window.innerWidth, h: window.innerHeight });
React.useEffect(() => {
const fn = () => {
const w = window.innerWidth, h = window.innerHeight;
setSz(prev => (prev.w === w && prev.h === h) ? prev : { w, h });
};
window.addEventListener("resize", fn);
return () => window.removeEventListener("resize", fn);
}, []);
return sz;
}
// --- Phone frame ---
// chromeH: estimated height of surrounding UI (topbar + padding + scrubber)
function PhoneFrame({ children, statusTime = "9:41", chromeH = 160 }) {
const { w: vw, h: vh } = useWindowSize();
const NW = 414, NH = 868;
const scaleW = (vw - 32) / NW;
const scaleH = (vh - chromeH) / NH;
const scale = Math.max(0.5, Math.min(1, scaleW, scaleH));
const W = Math.round(NW * scale);
const H = Math.round(NH * scale);
return (
);
}
function StatusBar({ time }) {
return (
{time}
{/* signal */}
{/* wifi */}
{/* battery */}
);
}
// --- Soko mark ---
function SokoMark({ size = 28, pulsing = false }) {
return (
);
}
function SokoWordmark({ size = 32, color = "#1c1917" }) {
return (
soko
);
}
// --- Language / currency / measure toggles ---
function LangToggle({ value = "EN" }) {
return (
EN
|
ES
);
}
function CurrencyToggle({ value = "USD" }) {
return (
USD $
MXN $
);
}
function UnitToggle({ value = "cm" }) {
return (
{["cm", "inch"].map(o => (
{o}
))}
);
}
// --- Striped product placeholder (per spec aesthetic default) ---
function ProductPlaceholder({ product, height = 140, label }) {
const a = product?.hueA || "oklch(0.78 0.04 50)";
const b = product?.hueB || "oklch(0.55 0.04 30)";
const tag = label || product?.tag || "PRODUCT";
const stripeId = `stripe-${product?.id || Math.random().toString(36).slice(2)}`;
return (
);
}
// --- Trust / vetted badge ---
function VettedBadge({ date, compact = false }) {
return (
Vetted · {date}
);
}
function TrustPassBadge({ kind = "TrustPass" }) {
const isAudit = kind.includes("Audit");
return (
{isAudit && (
)}
{kind}
);
}
// --- Title (single-line) ---
function BilingualTitle({ en, size = 14, weight = 600, primaryColor = "#1c1917" }) {
return (
);
}
// --- Tiny chips ---
function Chip({ children, tone = "neutral", icon }) {
const tones = {
neutral: { bg: "#f5f5f4", fg: "#57534e", bd: "#e7e5e4" },
primary: { bg: "oklch(0.96 0.04 50)", fg: "oklch(0.42 0.16 40)", bd: "oklch(0.88 0.06 50)" },
teal: { bg: "oklch(0.96 0.02 180)", fg: "oklch(0.42 0.08 180)", bd: "oklch(0.88 0.04 180)" },
navy: { bg: "oklch(0.96 0.01 250)", fg: "oklch(0.30 0.04 250)", bd: "oklch(0.88 0.02 250)" },
};
const t = tones[tone] || tones.neutral;
return (
{icon}
{children}
);
}
// --- Sentiment dot ---
function SentimentDot({ polarity }) {
const c = polarity === "positive" ? "oklch(0.55 0.12 150)"
: polarity === "neutral" ? "oklch(0.65 0.05 80)"
: "oklch(0.55 0.15 25)";
return ;
}
// --- Typewriter hook ---
function useTypewriter(text, charsPerSec = 30, start = true) {
const [i, setI] = React.useState(0);
React.useEffect(() => {
if (!start) { setI(0); return; }
setI(0);
if (!text) return;
const interval = 1000 / charsPerSec;
const id = setInterval(() => {
setI(prev => {
if (prev >= text.length) { clearInterval(id); return prev; }
return prev + 1;
});
}, interval);
return () => clearInterval(id);
}, [text, charsPerSec, start]);
return text ? text.slice(0, i) : "";
}
// --- Three-dot loader ---
function ThreeDots() {
return (
{[0, 1, 2].map(i => (
))}
);
}
// --- FadeUp wrapper ---
function FadeUp({ children, delay = 0, y = 12, duration = 0.4 }) {
return (
{children}
);
}
Object.assign(window, {
PhoneFrame, StatusBar, SokoMark, SokoWordmark,
LangToggle, CurrencyToggle, UnitToggle,
ProductPlaceholder, VettedBadge, TrustPassBadge,
BilingualTitle, Chip, SentimentDot,
useTypewriter, ThreeDots, FadeUp, useWindowSize,
});