// Shared primitives: Reveal, Placeholder, Icons, Buttons, Badge
const { useEffect, useRef, useState, useCallback } = React;
/* ---------- Reveal on scroll (IntersectionObserver) ---------- */
function Reveal({ children, as = "div", delay = 0, className = "", style = {}, ...rest }) {
const ref = useRef(null);
// Default to VISIBLE so content is never stuck hidden if observers are
// throttled/paused (e.g. background tabs, capture iframes, reduced motion).
const [shown, setShown] = useState(true);
useEffect(() => {
const el = ref.current;
if (!el) return;
const vh = window.innerHeight || document.documentElement.clientHeight;
const r = el.getBoundingClientRect();
// Already in view on mount → leave it visible (no entrance needed).
if (r.top < vh && r.bottom > 0) return;
// Below the fold → hide it (off-screen, no visible flash) then animate in.
setShown(false);
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setShown(true);
io.unobserve(el);
}
});
},
{ threshold: 0.1, rootMargin: "0px 0px -6% 0px" }
);
io.observe(el);
// Safety net: never leave content hidden for more than ~2.5s.
const t = setTimeout(() => setShown(true), 2500);
return () => {io.disconnect();clearTimeout(t);};
}, []);
const Tag = as;
return (
{children}
);
}
/* ---------- Striped placeholder image block ---------- */
function Placeholder({ label, accent = "#2a2a2e", h = "100%", radius = 0, style = {}, dark = false, children }) {
const stripe = dark ? "rgba(255,255,255,0.035)" : "rgba(255,255,255,0.05)";
return (
{children}
{label &&
{label}
}
);
}
/* ---------- Icons (minimal stroke) ---------- */
const I = {
home: (p) =>
,
work: (p) =>
,
user: (p) =>
,
bolt: (p) =>
,
linkedin: (p) =>
,
doc: (p) =>
,
arrow: (p) =>
,
copy: (p) =>
,
check: (p) =>
,
whatsapp: (p) =>
,
github: (p) =>
,
mail: (p) =>
,
phone: (p) =>
,
wechat: (p) =>
,
xiaohongshu: (p) =>
,
handshake: (p) =>
,
heart: (p) =>
};
/* ---------- Buttons ---------- */
function Btn({ children, variant = "solid", icon, dot, onClick, href, style = {} }) {
const [hover, setHover] = useState(false);
const base = {
display: "inline-flex",
alignItems: "center",
gap: 9,
fontFamily: "var(--font-body)",
fontSize: 14.5,
fontWeight: 600,
letterSpacing: "-0.01em",
padding: "13px 20px",
borderRadius: 12,
transition: "transform .25s cubic-bezier(.16,.84,.44,1), background .25s, border-color .25s, color .2s",
transform: hover ? "translateY(-2px)" : "none",
whiteSpace: "nowrap",
...style
};
const variants = {
solid: {
background: hover ? "#fff" : "var(--panel-2)",
color: hover ? "#0a0a0b" : "var(--text)",
border: "1px solid var(--line-2)"
},
outline: {
background: hover ? "rgba(255,255,255,0.06)" : "transparent",
color: "var(--text)",
border: "1px solid var(--line-2)"
},
green: {
background: hover ? "#52ef8c" : "var(--green)",
color: "#04130a",
border: "1px solid transparent"
}
};
const cls = { ...base, ...variants[variant] };
const inner =
<>
{dot && }
{icon === "github" && {I.github()}}
{children}
{icon === "arrow" && }
;
const handlers = { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick, style: cls };
return href ? {inner} : ;
}
/* ---------- Pill badge with live dot ---------- */
function Badge({ children }) {
return (
{children}
);
}
/* keyframes injected once */
(function injectKf() {
if (document.getElementById("__kf")) return;
const s = document.createElement("style");
s.id = "__kf";
s.textContent = `
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(3);opacity:0}100%{opacity:0}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
`;
document.head.appendChild(s);
})();
/* ---------- User-fillable image slot (drag & drop, persists) ---------- */
function Slot({ id, placeholder, radius = 0, shape = "rect", mask, fit = "cover", style = {} }) {
const props = {
id,
shape,
fit,
placeholder: placeholder || "Drop an image",
style: { display: "block", width: "100%", height: "100%", ...style }
};
if (radius) props.radius = String(radius);
if (mask) props.mask = mask;
return React.createElement("image-slot", props);
}
Object.assign(window, { Reveal, Placeholder, Slot, I, Btn, Badge });