52: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"] 53: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"] 54:T2b68,"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const DRAW = { duration: 0.38, ease: [0.23, 1, 0.32, 1] } as const; const CELL = { type: "spring", stiffness: 520, damping: 38, mass: 0.5 } as const; const INSTANT = { duration: 0 } as const; export type IntegrationNodeTone = "blue" | "clay" | "moss" | "neutral"; export type IntegrationNode = { id: string; label: string; meta?: string; x: number; y: number; tone?: IntegrationNodeTone; }; export type IntegrationEdge = { id?: string; from: string; to: string; }; export type IntegrationMapProps = { nodes: readonly IntegrationNode[]; edges: readonly IntegrationEdge[]; label?: string; width?: number; height?: number; emptyLabel?: string; formatStatus?: (label: string) => string; className?: string; }; const tone: Record = { blue: { node: "fill-[#e5efff] stroke-[#477ae8] dark:fill-[#16316b] dark:stroke-[#7da7ff]", text: "fill-[#1c3e91] dark:fill-[#dbe8ff]" }, clay: { node: "fill-[#fff0e3] stroke-[#d98545] dark:fill-[#5b2f17] dark:stroke-[#f0ad70]", text: "fill-[#8a4513] dark:fill-[#ffe4c8]" }, moss: { node: "fill-[#e3f2e8] stroke-[#4c9b6a] dark:fill-[#163d2a] dark:stroke-[#80c69a]", text: "fill-[#1d613d] dark:fill-[#d9f5e2]" }, neutral: { node: "fill-[#fff] stroke-[#d4d4d4] dark:fill-[#202020] dark:stroke-[#525252]", text: "fill-[#525252] dark:fill-[#d4d4d4]" }, }; function useFinePointer() { const [fine, setFine] = useState(false); useEffect(() => { if (typeof window === "undefined" || typeof window.matchMedia !== "function") return; const query = window.matchMedia("(hover: hover) and (pointer: fine)"); const update = () => setFine(query.matches); update(); query.addEventListener("change", update); return () => query.removeEventListener("change", update); }, []); return fine; } function useAnimationActivity() { const ref = useRef(null); const [active, setActive] = useState(true); useEffect(() => { const node = ref.current; if (!node || typeof IntersectionObserver === "undefined") return; let intersecting = true; let visible = !document.hidden; const update = () => setActive(intersecting && visible); const observer = new IntersectionObserver(([entry]) => { intersecting = entry.isIntersecting; update(); }); const onVisibility = () => { visible = !document.hidden; update(); }; observer.observe(node); document.addEventListener("visibilitychange", onVisibility); return () => { observer.disconnect(); document.removeEventListener("visibilitychange", onVisibility); }; }, []); return { ref, active }; } function edgePath(from: IntegrationNode, to: IntegrationNode) { const middle = (from.x + to.x) / 2; return `M ${from.x} ${from.y} C ${middle} ${from.y}, ${middle} ${to.y}, ${to.x} ${to.y}`; } function fitNodeText(value: string, maxUnits: number) { const characters = Array.from(value); let units = 0; let result = ""; for (const character of characters) { const next = (character.codePointAt(0) ?? 0) <= 0xff ? 0.55 : 1; if (units + next > maxUnits) return `${result.trimEnd()}…`; result += character; units += next; } return result; } export function IntegrationMap({ nodes, edges, label = "Integration map", width = 440, height = 230, emptyLabel = "No integrations available", formatStatus = (name) => `${name} connections highlighted`, className = "", }: IntegrationMapProps) { const resolvedWidth = Number.isFinite(width) && width > 0 ? width : 440; const resolvedHeight = Number.isFinite(height) && height > 0 ? height : 230; const reduced = useReducedMotion() === true; const finePointer = useFinePointer(); const { ref, active } = useAnimationActivity(); const [keyboardFocused, setKeyboardFocused] = useState(null); const [hovered, setHovered] = useState(null); const [selected, setSelected] = useState(null); const nodeById = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]); const validKeyboardFocused = keyboardFocused && nodeById.has(keyboardFocused) ? keyboardFocused : null; const validHovered = hovered && nodeById.has(hovered) ? hovered : null; const validSelected = selected && nodeById.has(selected) ? selected : null; const activeNode = validHovered ?? validKeyboardFocused ?? validSelected; useEffect(() => { if (keyboardFocused && !nodeById.has(keyboardFocused)) setKeyboardFocused(null); if (hovered && !nodeById.has(hovered)) setHovered(null); if (selected && !nodeById.has(selected)) setSelected(null); }, [hovered, keyboardFocused, nodeById, selected]); const related = useMemo(() => { if (!activeNode) return new Set(nodes.map((node) => node.id)); const ids = new Set([activeNode]); for (const edge of edges) { if (edge.from === activeNode) ids.add(edge.to); if (edge.to === activeNode) ids.add(edge.from); } return ids; }, [activeNode, edges, nodes]); if (nodes.length === 0) { return (

{emptyLabel}

); } return (

setSelected(null)} > {nodes.map((node) => (

{activeNode ? formatStatus(nodeById.get(activeNode)?.label ?? activeNode) : ""}

); } 51:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/integration-map.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/integration-map.tsx"}],"className":"h-[70svh] min-h-80"}]]}]