4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52: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) : ""}

); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/integration-map.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/integration-map","itemId":"@motion-lexicon/integration-map"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/integration-map.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/integration-map.tsx"}]}]]}],"$L53"]}]

Integration Map

Installation

Files

components

Styles