{leftLabel} {rightLabel}

{ticks && Array.from({ length: ticks }).map((_, i) => ( ))} onChange(Number(e.target.value))} style={{ position: "absolute", left: 0, right: 0, top: 0, height: 22, opacity: 0, margin: 0, cursor: "pointer", width: "100%", }} />

); }; // ---- Toast ---------------------------------------------------- const ToastContext = React.createContext({ push: () => {} }); const ToastProvider = ({ children }) => { const [toasts, setToasts] = useState([]); const push = useCallback((msg, kind = "info") => { const id = Math.random().toString(36).slice(2); setToasts((ts) => [...ts, { id, msg, kind }]); setTimeout(() => setToasts((ts) => ts.filter((t) => t.id !== id)), 2400); }, []); const value = useMemo(() => ({ push }), [push]); return ( {children}

{toasts.map((t) => (

{t.msg}

))}

); }; const useToast = () => React.useContext(ToastContext); // ---- Modal & BottomSheet -------------------------------------- const Modal = ({ open, onClose, title, children, footer, width = 480 }) => { if (!open) return null; return (

e.stopPropagation()} style={{ background: "var(--card)", borderRadius: 18, width: "100%", maxWidth: width, boxShadow: "var(--shadow-lg)", animation: "pk-fade-up 220ms var(--ease)", overflow: "hidden", }} > {title && (

{title}

)}

{children}

{footer && (

{footer}

)}

); }; // ---- Tooltip -------------------------------------------------- // 修漂移：用 flex 居中浮层不依赖 transform: translateX(-50%) // （旧版 inline transform 被 pk-fade-up keyframes 的 transform: translateY 覆盖） // 移动端：touch 设备 mouseEnter 触发但无 mouseLeave → tooltip 卡住。 // className="pk-tooltip" + CSS @media (hover: none) display:none 隐藏。 const Tooltip = ({ children, content, side = "top", variant = "dark" }) => { const [show, setShow] = useState(false); const colors = variant === "dark" ? { bg: "#2B2826", color: "#fff", border: "transparent" } : { bg: "#fff", color: "var(--text)", border: "1px solid var(--border)" }; const isTop = side === "top"; return ( setShow(true)} onMouseLeave={() => setShow(false)} onFocus={() => setShow(true)} onBlur={() => setShow(false)} > {children} {show && ( // 外层 wrapper 横跨整个父宽并 flex 居中（不用 transform） {content} )} ); }; // ---- HeartButton (with pulse + particles) -------------------- const HeartButton = ({ active, onChange, size = 22, label }) => { const [bursting, setBursting] = useState(0); const handle = () => { if (!active) setBursting((n) => n + 1); onChange?.(!active); }; return ( ); }; // ---- NamePopover (anchored mini-input) ----------------------- const NamePopover = ({ open, onClose, onSave, anchor = "bottom", title, placeholder, initial = "" }) => { const i18n = (typeof window !== 'undefined' && window.useI18n) ? window.useI18n() : null; const tt = i18n?.t || ((k) => k); const [v, setV] = useState(initial); const ref = useRef(null); useEffect(() => { if (open) setV(initial); }, [open, initial]); useEffect(() => { if (!open) return; const onDoc = (e) => { if (!ref.current?.contains(e.target)) onClose?.(); }; const onKey = (e) => { if (e.key === "Escape") onClose?.(); if (e.key === "Enter") { onSave?.(v.trim()); } }; document.addEventListener("mousedown", onDoc); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); }; }, [open, v, onSave, onClose]); if (!open) return null; const isBottom = anchor === "bottom"; // 修漂移：原 transform: translateX(-50%) 被 pk-pop-in keyframes 的 transform: scale() 完全覆盖 // → 弹出瞬间 popover 偏右出现再跳回正中。改用 marginLeft: -130（popover 半宽）替代 return (

{/* arrow */} {title &&

{title}

} setV(e.target.value)} placeholder={placeholder} size="sm" autoFocus />

); }; const PolaroidFrame = ({ tilt = 0, width = 200, caption, children, selected, onClick, onSelectToggle, hoverLift = true }) => { const [hover, setHover] = useState(false); const lift = hover && hoverLift; return (

setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: "relative", width, background: "#FFFFFF", padding: "12px 12px 14px 12px", borderRadius: 6, boxShadow: lift ? "0 12px 28px rgba(40,34,28,0.18)" : "0 2px 6px rgba(40,34,28,0.10)", transform: `rotate(${lift ? 0 : tilt}deg) ${lift ? "scale(1.04) translateY(-4px)" : "scale(1)"}`, transition: "transform 280ms var(--ease), box-shadow 280ms var(--ease)", cursor: onClick ? "pointer" : "default", outline: selected ? "2px solid var(--primary)" : "none", outlineOffset: 2, }} >

{children}

{caption}

{onSelectToggle && ( )}

); }; // ---- StepCard (for export guide) ------------------------------ const StepCard = ({ n, title, body, image }) => (

{n}

{title}

{body}

{image !== false && (

示意图 · {n}

)}

); // ---- EmptyState ----------------------------------------------- const EmptyState = ({ title, body, action, illustration }) => (

{illustration || }

{title}

{body &&

{body}

} {action &&

{action}

}

); // ---- Skeleton ------------------------------------------------- const Skeleton = ({ width = "100%", height = 16, rounded = 8, style }) => (

); // ---- Section header ------------------------------------------- const SectionHeader = ({ title, subtitle, right }) => (

{title}

{subtitle &&

{subtitle}

}

{right}

); // ---- Keyboard tip strip -------------------------------------- // className 让 mobile CSS 隐藏（之前 attribute selector 因 inline style 是 bottom:72 不是 24 没 match 上） const KbdTip = ({ items }) => (

{items.map((it, i) => ( {it.k} {it.label} ))}

); const Kbd = ({ children }) => ( {children} ); // ---- Section transition wrapper ------------------------------- const SectionSwap = ({ k, direction = "right", children }) => (

{children}

); // ---- export --------------------------------------------------- Object.assign(window, { Button, IconButton, Spinner, Input, ChoiceCard, Tabs, Dropdown, Slider, ToastProvider, useToast, Modal, Tooltip, HeartButton, PolaroidFrame, StepCard, EmptyState, Skeleton, SectionHeader, KbdTip, Kbd, SectionSwap, NamePopover, });