51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T3eac,"use client" import * as React from "react" import { AnimatePresence, motion, useReducedMotion } from "motion/react" import { cva, type VariantProps } from "class-variance-authority" import { SnailIcon } from "lucide-react" import { cn } from "@/lib/utils" type IntegrationItem = { /** Name of the tool; the tile's accessible label and tooltip. */ title: string /** Mark shown in the tile. */ icon: React.ReactNode /** Idle items keep their route but drop the pulse and fade back. */ status?: "active" | "idle" /** In the `sides` layout, which column the item sits in. */ side?: "in" | "out" } /** An image or clip for the preview. Videos play muted on a loop. */ type IntegrationPreviewMedia = { src: string /** Describes the media. Leave empty for purely decorative clips. */ alt?: string /** Width over height, as a number or a CSS ratio. Defaults to `"16 / 9"`. */ aspectRatio?: number | string } type Point = { x: number; y: number } type Slot = Point & { path: string } // Drawing space. The plate keeps this aspect ratio, and every position below // is in these units. const W = 400 const H = 260 const CX = W / 2 const CY = H / 2 /* * The plate's lattice, centred on the hub. Corner and pipeline positions, * route legs and turns are all multiples of it, so routes run along grid * lines and tiles sit on dots instead of landing beside them. */ const PITCH = 12 // Routes leave the hub a little inside its edge so they read as attached. const HUB_EDGE = PITCH const TURN = PITCH /* * `corners` is the reference layout: four tools in the corners, each route * leaving the hub, turning once and running out to its tile. Positions are * fixed rather than computed so the routes stay tidy. */ function cornerSlots(count: number): Slot[] { const top = CY - 5 * PITCH const bottom = CY + 5 * PITCH const left = CX - 11 * PITCH const right = CX + 11 * PITCH const route = (dx: number, y: number, x: number) => { const dir = Math.sign(dx) const dy = Math.sign(y - CY) const hubX = CX + dir * HUB_EDGE return `M ${hubX} ${CY} V ${y - dy * TURN} Q ${hubX} ${y} ${hubX + dir * TURN} ${y} H ${x}` } const slots: Slot[] = [ { x: left, y: top, path: route(-1, top, left) }, { x: right, y: top, path: route(1, top, right) }, { x: left, y: bottom, path: route(-1, bottom, left) }, { x: right, y: bottom, path: route(1, bottom, right) }, ] return slots.slice(0, count) } /* `orbit` spaces any number of tools evenly on an ellipse, joined by spokes. */ function orbitSlots(count: number): Slot[] { const rx = 146 const ry = 92 return Array.from({ length: count }, (_, i) => { const angle = -Math.PI / 2 + (i / count) * Math.PI * 2 const x = CX + Math.cos(angle) * rx const y = CY + Math.sin(angle) * ry const start = { x: CX + Math.cos(angle) * 24, y: CY + Math.sin(angle) * 24, } return { x, y, path: `M ${start.x} ${start.y} L ${x} ${y}` } }) } /* * `sides` reads left to right: inputs in one column, outputs in the other, * each route bending once through a shared bus beside the hub. */ function sideSlots(items: IntegrationItem[]): Slot[] { const columns = { in: [] as number[], out: [] as number[] } items.forEach((item, i) => { const column = item.side ?? (i < Math.ceil(items.length / 2) ? "in" : "out") columns[column].push(i) }) const slots: Slot[] = new Array(items.length) // Rows are six pitches apart and centred on the hub, so both odd and even // counts land on the lattice. const place = (indices: number[], dir: -1 | 1) => { const x = CX + dir * 11 * PITCH const bus = CX + dir * 5 * PITCH indices.forEach((itemIndex, row) => { const y = CY + (row - (indices.length - 1) / 2) * 6 * PITCH const hubX = CX + dir * 2 * PITCH const bend = Math.min(TURN, Math.abs(y - CY) / 2) const dy = Math.sign(y - CY) const path = dy === 0 ? `M ${hubX} ${CY} H ${x}` : `M ${hubX} ${CY} H ${bus - dir * bend} Q ${bus} ${CY} ${bus} ${CY + dy * bend} V ${y - dy * bend} Q ${bus} ${y} ${bus + dir * bend} ${y} H ${x}` slots[itemIndex] = { x, y, path } }) } place(columns.in, -1) place(columns.out, 1) return slots } const MAX_ITEMS = { corners: 4, orbit: 8, sides: 8 } as const const tileVariants = cva( "flex items-center justify-center border border-border bg-card text-card-foreground shadow-xs [&_svg]:shrink-0", { variants: { size: { sm: "size-8 rounded-md [&_svg:not([class*='size-'])]:size-4", default: "size-10 rounded-lg [&_svg:not([class*='size-'])]:size-5", lg: "size-12 rounded-xl [&_svg:not([class*='size-'])]:size-6", }, }, defaultVariants: { size: "default" }, } ) const HUB = "relative rounded-xl border border-border bg-background p-1.5 shadow-md outline-none focus-visible:ring-[3px] focus-visible:ring-ring-subtle" // The face is square for an icon and widens for text, so a word or a count // never gets squeezed. const hubFaceVariants = cva( "flex items-center justify-center rounded-lg border border-border text-foreground", { variants: { size: { sm: "h-9 min-w-9 [&_svg:not([class*='size-'])]:size-4", default: "h-11 min-w-11 [&_svg:not([class*='size-'])]:size-5", lg: "h-14 min-w-14 [&_svg:not([class*='size-'])]:size-6", }, content: { icon: "", text: "px-2.5 font-semibold tracking-tight whitespace-nowrap tabular-nums", }, }, compoundVariants: [ { content: "text", size: "sm", class: "text-sm" }, { content: "text", size: "default", class: "text-base" }, { content: "text", size: "lg", class: "text-lg" }, ], defaultVariants: { size: "default", content: "icon" }, } ) function Track({ d, dashed, idle, }: { d: string dashed: boolean idle: boolean }) { return ( ) } function Pulse({ d, direction, delay, }: { d: string direction: "inward" | "outward" delay: number }) { return ( ) } function isMedia( preview: React.ReactNode | IntegrationPreviewMedia ): preview is IntegrationPreviewMedia { return ( typeof preview === "object" && preview !== null && !React.isValidElement(preview) && "src" in preview ) } function PreviewMedia({ src, alt = "", aspectRatio = "16 / 9", }: IntegrationPreviewMedia) { const className = "block w-full rounded-lg bg-muted object-cover" const style = { aspectRatio } return /\.(mp4|webm)(\?|#|$)/i.test(src) ? (