4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T2dc5,'use client'; import { motion } from 'framer-motion'; import { useId, useState, type CSSProperties } from 'react'; // --------------------------------------------------------------------------- // Props // --------------------------------------------------------------------------- // // hub Central brand node — name, optional logo URL, brand color // items Connected apps arranged in a pyramid under the hub // accentColor Stroke / pulse color for the connection lines // background Section background (transparent by default) // className Styles for the outer shell // type HubNode = { name: string; logo?: string; color?: string; }; type IntegrationItem = { name: string; logo?: string; color?: string; /** When false, the card renders but gets no connection line. Default true. */ connected?: boolean; }; type IntegrationHubProps = { hub?: HubNode; items?: IntegrationItem[]; accentColor?: string; background?: string; className?: string; }; // --------------------------------------------------------------------------- // Defaults // --------------------------------------------------------------------------- const ASSET = 'https://uniquel.io/images'; const DEFAULT_HUB: HubNode = { name: 'Uniquel', logo: `${ASSET}/uniquel-icon.png`, color: '#FFFFFF', }; const DEFAULT_ITEMS: IntegrationItem[] = [ { name: 'Cursor', logo: `${ASSET}/works-with/cursor.png`, color: '#000000' }, { name: 'Claude', logo: `${ASSET}/works-with/claude.png`, color: '#D97757' }, { name: 'Figma', logo: `${ASSET}/works-with/figma.png`, color: '#F24E1E' }, { name: 'v0', logo: `${ASSET}/works-with/v0.png`, color: '#000000' }, { name: 'Lovable', logo: `${ASSET}/works-with/lovable.png`, color: '#FF6B6B' }, { name: 'Replit', logo: `${ASSET}/works-with/replit.png`, color: '#F26207' }, { name: 'Codex', logo: `${ASSET}/works-with/codex.png`, color: '#000000' }, { name: 'Base44', logo: `${ASSET}/works-with/base44.png`, color: '#6366F1' }, { name: 'Windsurf', logo: `${ASSET}/works-with/windsurf.png`, color: '#0EA5E9' }, ]; const HUB_SIZE = 84; const ICON_SIZE = 52; const ICON_GAP = 22; const ROW_GAP = 70; const PAD = 22; const PAD_X = Math.round(PAD * 1.15); const PAD_TOP = Math.round(PAD * 0.9); const PAD_BOTTOM = Math.round(PAD * 1.75); const HUB_RENDER_LIFT = 20; const PULSE_MS = 2.4; type LayoutNode = { item: IntegrationItem; x: number; y: number; i: number; row: number }; function rowCounts(n: number): number[] { if (n <= 0) return []; if (n === 9) return [2, 3, 4]; const rows: number[] = []; let left = n; let size = Math.min(2, n); while (left > 0) { const take = Math.min(size, left); rows.push(take); left -= take; size += 1; } return rows; } function stageSize(itemCount: number) { const rows = rowCounts(itemCount); const widest = Math.max(1, ...rows); const contentW = widest * ICON_SIZE + Math.max(0, widest - 1) * ICON_GAP; const width = contentW + PAD_X * 2; const hubAnchorY = PAD_TOP + HUB_SIZE / 2; const hubRenderY = hubAnchorY - HUB_RENDER_LIFT; const rowStart = hubAnchorY + HUB_SIZE / 2 + 32; const lastY = rowStart + Math.max(0, rows.length - 1) * ROW_GAP; const contentHeight = lastY + ICON_SIZE / 2 + PAD_BOTTOM; const height = Math.max(contentHeight, hubRenderY + HUB_SIZE / 2 + PAD_TOP); return { width, height, hubX: width / 2, hubRenderY, rowStart }; } function layoutItems( items: IntegrationItem[], width: number, rowStart: number ): LayoutNode[] { const rows = rowCounts(items.length); const nodes: LayoutNode[] = []; let index = 0; rows.forEach((count, rowIndex) => { const y = rowStart + rowIndex * ROW_GAP; const span = count * ICON_SIZE + (count - 1) * ICON_GAP; const startX = (width - span) / 2 + ICON_SIZE / 2; for (let c = 0; c < count; c++) { nodes.push({ item: items[index], x: startX + c * (ICON_SIZE + ICON_GAP), y, i: index, row: rowIndex, }); index += 1; } }); return nodes; } function linkPath(fromX: number, fromY: number, toX: number, toY: number) { const midY = fromY + (toY - fromY) * 0.5; return `M ${fromX} ${fromY} C ${fromX} ${midY}, ${toX} ${midY}, ${toX} ${toY}`; } /** Parent→child edges between adjacent rows; x-order preserved so paths never cross. */ function buildEdges( nodes: LayoutNode[], hubX: number, hubRenderY: number ) { const byRow = new Map(); nodes.forEach((n) => { const list = byRow.get(n.row) ?? []; list.push(n); byRow.set(n.row, list); }); const edges: { fromX: number; fromY: number; toX: number; toY: number; key: string }[] = []; const rowIndexes = [...byRow.keys()].sort((a, b) => a - b); if (!rowIndexes.length) return edges; const wired = (n: LayoutNode) => n.item.connected !== false; const hubBottomY = hubRenderY + HUB_SIZE / 2 - 4; byRow.get(rowIndexes[0])!.filter(wired).forEach((child) => { edges.push({ fromX: hubX, fromY: hubBottomY, toX: child.x, toY: child.y - ICON_SIZE / 2, key: `hub-${child.i}`, }); }); for (let r = 0; r < rowIndexes.length - 1; r++) { const parents = byRow.get(rowIndexes[r])!.filter(wired); const children = byRow.get(rowIndexes[r + 1])!.filter(wired); if (!parents.length || !children.length) continue; children.forEach((child, ci) => { const pi = children.length === 1 ? Math.floor(parents.length / 2) : Math.round((ci * (parents.length - 1)) / (children.length - 1)); const parent = parents[pi]; edges.push({ fromX: parent.x, fromY: parent.y + ICON_SIZE / 2, toX: child.x, toY: child.y - ICON_SIZE / 2, key: `${parent.i}-${child.i}`, }); }); } return edges; } function NodeCard({ name, logo, color, size, }: { name: string; logo?: string; color?: string; size: number; }) { const [failed, setFailed] = useState(false); const initial = name.slice(0, 1).toUpperCase(); const showLogo = Boolean(logo) && !failed; return (

{showLogo ? (

setFailed(true)} className='h-[52%] w-[52%] object-contain' /> ) : ( {initial} )}

); } export default function IntegrationHub({ hub = DEFAULT_HUB, items = DEFAULT_ITEMS, accentColor = '#4BC4BE', background = 'transparent', className = '', }: IntegrationHubProps) { const uid = useId().replace(/:/g, ''); const deck = items.length ? items : DEFAULT_ITEMS; const { width, height, hubX, hubRenderY, rowStart } = stageSize(deck.length); const nodes = layoutItems(deck, width, rowStart); const edges = buildEdges(nodes, hubX, hubRenderY); const hubColor = hub.color || DEFAULT_HUB.color || '#FFFFFF'; const rootStyle: CSSProperties = { background, width: '100%', }; return (

d.name).join(', ')}`} >

{/* Hub */}

{hub.logo ? (

) : ( {hub.name.slice(0, 1)} )}

{/* Connected icons */} {nodes.map((node) => (

))}

); } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"framer-motion"}]]}]}]]}],["$","$L4b",null,{"namespace":"@uniquel","registryDependencies":[]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"components/integrations/IntegrationHub.tsx","content":"$4d","type":"registry:component","target":"@components/integrations/IntegrationHub.tsx"}],"className":"h-[70svh] min-h-80"}]]}]