{ e.preventDefault(); e.stopPropagation(); }} style={{ position: "relative", width: "100%", height, overflow: "hidden", cursor: "ew-resize", userSelect: "none", WebkitUserSelect: "none" }}> {}

{}

{}

{} {}

{}

{beforeLabel}

{afterLabel}

; }; export const FluxImageGrid = ({images, cols = 2, gap = 8, radius = "0.5rem", objectFit = "cover"}) => { return

{images.map((src, idx) =>

)}

; }; export const FluxChatCard = ({prompt, status, children, title}) => { return

{}

{prompt}

{}

{} {status &&

{status}

} {}

{children}

; }; export const MCPShowcase = ({slides, children, height = "560px", maxWidth = "960px", marginTop = "0", interval = 4500, fadeMs = 700}) => { const [activeIdx, setActiveIdx] = useState(0); const [paused, setPaused] = useState(false); const [timerId, setTimerId] = useState(null); const childArray = !children ? [] : Array.isArray(children) ? children.filter(Boolean) : [children]; const useChildren = childArray.length > 0; const items = useChildren ? childArray : slides || []; if (!paused && !timerId && items.length > 1) { const id = setInterval(() => { setActiveIdx(p => (p + 1) % items.length); }, interval); setTimerId(id); } const pause = () => { if (timerId) clearInterval(timerId); setTimerId(null); setPaused(true); }; const resume = () => setPaused(false); const goTo = idx => { pause(); setActiveIdx((idx + items.length) % items.length); }; const prev = () => goTo(activeIdx - 1); const next = () => goTo(activeIdx + 1); const captionFor = item => { if (useChildren) return item?.props?.title || ""; return item?.title || ""; }; const arrowBase = { width: "26px", height: "26px", borderRadius: "999px", border: "1px solid rgba(255,255,255,0.18)", background: "rgba(255,255,255,0.08)", color: "rgba(255,255,255,0.9)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", padding: 0, transition: "background 200ms ease, border-color 200ms ease" }; return

{items.map((item, idx) =>

{useChildren ?

{item}

}

)}

{captionFor(items[activeIdx])}

{items.length > 1 && }

{items.map((_, idx) =>

{items.length > 1 && }

; }; export const SetupSteps = ({tabs, queryParam = 'client'}) => { const [activeId, setActiveId] = useState(tabs[0].id); const [copiedKey, setCopiedKey] = useState(null); const active = tabs.find(t => t.id === activeId) ?? tabs[0]; useEffect(() => { if (typeof window === 'undefined') return; const params = new URLSearchParams(window.location.search); const fromUrl = params.get(queryParam); if (fromUrl && tabs.some(t => t.id === fromUrl)) { setActiveId(fromUrl); } }, [queryParam, tabs]); const selectTab = id => { setActiveId(id); if (typeof window !== 'undefined') { const params = new URLSearchParams(window.location.search); params.set(queryParam, id); const newUrl = `${window.location.pathname}?${params.toString()}${window.location.hash}`; window.history.replaceState(null, '', newUrl); } }; const copy = (key, value) => { if (typeof navigator !== 'undefined' && navigator.clipboard) { navigator.clipboard.writeText(value); setCopiedKey(key); setTimeout(() => setCopiedKey(curr => curr === key ? null : curr), 1500); } }; return

{tabs.map(tab => { const selected = activeId === tab.id; return ; })}

s.wide) ? 'md:grid-cols-4' : 'md:grid-cols-3'} gap-4`}> {active.steps.map((step, i) => { const key = `${active.id}-${i}`; return

{step.number}

{step.title}

{step.button && {step.button.label} } {step.code &&

{step.code}

} {step.codes && step.codes.map((c, ci) => { const codeKey = `${key}-c${ci}`; return

{c.label && {c.label} } {c.value}

; })}

{active.configCode &&

{active.configCaption &&

{active.configCaption}

}

              {active.configCode}

}