50: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/1o6_421saitt-.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"] 51:I[544296,["/_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/1o6_421saitt-.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"],"ItemStyles"] 52:I[34002,["/_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/1o6_421saitt-.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"],"CodeEditor"] 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/1o6_421saitt-.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:T27e0,"use client" import { useCallback, useEffect, useRef, useState } from "react" import { Moon, Sun } from "lucide-react" import { flushSync } from "react-dom" import { cn } from "@/lib/utils" export type TransitionVariant = | "circle" | "square" | "triangle" | "diamond" | "hexagon" | "rectangle" | "star" interface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<"button"> { duration?: number variant?: TransitionVariant /** When true, the transition expands from the viewport center instead of the button center. */ fromCenter?: boolean /** * Controlled theme value. When provided, the parent owns persistence * (e.g. `next-themes`) and this component will not write to localStorage. */ theme?: "light" | "dark" /** Called on toggle. Pair with `theme` for controlled usage. */ onThemeChange?: (theme: "light" | "dark") => void } function polygonCollapsed(point: string, vertexCount: number): string { const pairs = Array.from({ length: vertexCount }, () => point).join(", ") return `polygon(${pairs})` } // All coordinates are percentages of the snapshot reference box: Chrome 150 // renders absolute px clip-path coordinates on ::view-transition-new(root) // unscaled on fractional display scales (e.g. Windows 150%) for the first // transition after load, so px values land at the wrong position (#989). function getThemeTransitionClipPaths( variant: TransitionVariant, cx: number, cy: number, maxRadius: number, viewportWidth: number, viewportHeight: number ): [string, string] { const toX = (x: number) => `${(x / viewportWidth) * 100}%` const toY = (y: number) => `${(y / viewportHeight) * 100}%` const point = (x: number, y: number) => `${toX(x)} ${toY(y)}` // circle() percentage radii resolve against hypot(w, h) / sqrt(2) of the reference box. const toRadius = (r: number) => `${(r / (Math.hypot(viewportWidth, viewportHeight) / Math.SQRT2)) * 100}%` switch (variant) { case "circle": return [ `circle(0% at ${point(cx, cy)})`, `circle(${toRadius(maxRadius)} at ${point(cx, cy)})`, ] case "square": { const halfW = Math.max(cx, viewportWidth - cx) const halfH = Math.max(cy, viewportHeight - cy) const halfSide = Math.max(halfW, halfH) * 1.05 const end = [ point(cx - halfSide, cy - halfSide), point(cx + halfSide, cy - halfSide), point(cx + halfSide, cy + halfSide), point(cx - halfSide, cy + halfSide), ].join(", ") return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`] } case "triangle": { const scale = maxRadius * 2.2 const dx = (Math.sqrt(3) / 2) * scale const verts = [ point(cx, cy - scale), point(cx + dx, cy + 0.5 * scale), point(cx - dx, cy + 0.5 * scale), ].join(", ") return [polygonCollapsed(point(cx, cy), 3), `polygon(${verts})`] } case "diamond": { // Slightly larger than the view-transition circle radius so axis-aligned coverage matches the circle reveal. const R = maxRadius * Math.SQRT2 const end = [ point(cx, cy - R), point(cx + R, cy), point(cx, cy + R), point(cx - R, cy), ].join(", ") return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`] } case "hexagon": { const R = maxRadius * Math.SQRT2 const verts: string[] = [] for (let i = 0; i < 6; i++) { const a = -Math.PI / 2 + (i * Math.PI) / 3 verts.push(point(cx + R * Math.cos(a), cy + R * Math.sin(a))) } return [ polygonCollapsed(point(cx, cy), 6), `polygon(${verts.join(", ")})`, ] } case "rectangle": { const halfW = Math.max(cx, viewportWidth - cx) const halfH = Math.max(cy, viewportHeight - cy) const end = [ point(cx - halfW, cy - halfH), point(cx + halfW, cy - halfH), point(cx + halfW, cy + halfH), point(cx - halfW, cy + halfH), ].join(", ") return [polygonCollapsed(point(cx, cy), 4), `polygon(${end})`] } case "star": { // Small overscan so the last frames never leave a 1px seam before the transition group ends. const R = maxRadius * Math.SQRT2 * 1.03 const innerRatio = 0.42 const starPolygon = (radius: number) => { const verts: string[] = [] for (let i = 0; i < 5; i++) { const outerA = -Math.PI / 2 + (i * 2 * Math.PI) / 5 verts.push( point( cx + radius * Math.cos(outerA), cy + radius * Math.sin(outerA) ) ) const innerA = outerA + Math.PI / 5 verts.push( point( cx + radius * innerRatio * Math.cos(innerA), cy + radius * innerRatio * Math.sin(innerA) ) ) } return `polygon(${verts.join(", ")})` } const startR = Math.max(2, R * 0.025) return [starPolygon(startR), starPolygon(R)] } default: return [ `circle(0% at ${point(cx, cy)})`, `circle(${toRadius(maxRadius)} at ${point(cx, cy)})`, ] } } export const AnimatedThemeToggler = ({ className, duration = 400, variant, fromCenter = false, theme, onThemeChange, ...props }: AnimatedThemeTogglerProps) => { const shape = variant ?? "circle" const isControlled = theme !== undefined const [internalIsDark, setInternalIsDark] = useState(false) const isDark = isControlled ? theme === "dark" : internalIsDark const buttonRef = useRef(null) const isTransitioningRef = useRef(false) const activeAnimRef = useRef(null) const cancelAnim = useCallback(() => { activeAnimRef.current?.cancel() activeAnimRef.current = null }, []) useEffect(() => { return () => { cancelAnim() const root = document.documentElement if (root.dataset.magicuiThemeVt !== "active") return delete root.dataset.magicuiThemeVt root.style.removeProperty("--magicui-theme-toggle-vt-duration") root.style.removeProperty("--magicui-theme-vt-clip-from") } }, [cancelAnim]) useEffect(() => { if (isControlled) return const updateTheme = () => { setInternalIsDark(document.documentElement.classList.contains("dark")) } updateTheme() const observer = new MutationObserver(updateTheme) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }) return () => observer.disconnect() }, [isControlled]) const toggleTheme = useCallback(() => { const button = buttonRef.current if ( !button || isTransitioningRef.current || document.documentElement.dataset.magicuiThemeVt === "active" ) return // innerWidth/innerHeight (not visualViewport): percentages must resolve // against the snapshot reference box, which includes classic scrollbars. const viewportWidth = window.innerWidth const viewportHeight = window.innerHeight let x: number let y: number if (fromCenter) { x = viewportWidth / 2 y = viewportHeight / 2 } else { const { top, left, width, height } = button.getBoundingClientRect() x = left + width / 2 y = top + height / 2 } const maxRadius = Math.hypot( Math.max(x, viewportWidth - x), Math.max(y, viewportHeight - y) ) const applyTheme = () => { const newTheme = !isDark // Always toggle the class synchronously so the View Transitions API // snapshots the new theme inside the startViewTransition callback. document.documentElement.classList.toggle("dark") if (isControlled) { onThemeChange?.(newTheme ? "dark" : "light") } else { setInternalIsDark(newTheme) localStorage.setItem("theme", newTheme ? "dark" : "light") } } if (typeof document.startViewTransition !== "function") { applyTheme() return } const clipPath = getThemeTransitionClipPaths( shape, x, y, maxRadius, viewportWidth, viewportHeight ) const root = document.documentElement root.dataset.magicuiThemeVt = "active" root.style.setProperty( "--magicui-theme-toggle-vt-duration", `${duration}ms` ) // Pin the collapsed clip-path via CSS so Firefox does not paint the new // theme unclipped between snapshot and the ready.then() JS animation. root.style.setProperty("--magicui-theme-vt-clip-from", clipPath[0]) const cleanup = () => { isTransitioningRef.current = false delete root.dataset.magicuiThemeVt root.style.removeProperty("--magicui-theme-toggle-vt-duration") root.style.removeProperty("--magicui-theme-vt-clip-from") cancelAnim() } isTransitioningRef.current = true const transition = document.startViewTransition(() => { flushSync(applyTheme) }) if (typeof transition?.finished?.finally === "function") { transition.finished.finally(cleanup).catch(() => {}) } else { cleanup() } const ready = transition?.ready if (ready && typeof ready.then === "function") { ready .then(() => { const anim = document.documentElement.animate( { clipPath, }, { duration, // Star: linear avoids easing overshoot that fights polygon interpolation at t→1; VT group duration is synced above. easing: shape === "star" ? "linear" : "ease-in-out", fill: "forwards", pseudoElement: "::view-transition-new(root)", } ) activeAnimRef.current = anim }) .catch(() => {}) } }, [ shape, fromCenter, duration, isDark, isControlled, onThemeChange, cancelAnim, ]) return ( ) } 4f:["$","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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":[]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"::view-transition-old(root), ::view-transition-new(root) {\n\tanimation: none;\n\tmix-blend-mode: normal;\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/magicui/animated-theme-toggler.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]