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:Tfa9,"use client"; import { useRef, useState, type KeyboardEvent, type PointerEvent, type ReactNode } from "react"; import { cn } from "./lib/cn"; import "./image-compare.css"; export function ImageCompare({ label, before, after, beforeLabel = "Before", afterLabel = "After", defaultValue = 50, value, onValueChange, aspectRatio = "4 / 3", className, }: { label: string; /** Any visual content, usually an that fills its box. */ before: ReactNode; after: ReactNode; beforeLabel?: string; afterLabel?: string; /** Percentage of the width that shows `before`. */ defaultValue?: number; value?: number; onValueChange?: (value: number) => void; aspectRatio?: string; className?: string; }) { const [own, setOwn] = useState(defaultValue), [dragging, setDragging] = useState(false); const frame = useRef(null); const split = Math.max(0, Math.min(100, value ?? own)); const set = (next: number) => { const clamped = Math.max(0, Math.min(100, next)); if (value === undefined) setOwn(clamped); onValueChange?.(clamped); }; const at = (event: PointerEvent) => { const box = frame.current!.getBoundingClientRect(); set(((event.clientX - box.left) / box.width) * 100); }; const keys = (event: KeyboardEvent) => { const step = event.shiftKey ? 10 : 2; const next = event.key === "ArrowRight" || event.key === "ArrowUp" ? split + step : event.key === "ArrowLeft" || event.key === "ArrowDown" ? split - step : event.key === "Home" ? 0 : event.key === "End" ? 100 : event.key === "PageUp" ? split + 10 : event.key === "PageDown" ? split - 10 : undefined; if (next === undefined) return; event.preventDefault(); set(next); }; return (

{ if (event.button !== 0) return; event.currentTarget.setPointerCapture(event.pointerId); setDragging(true); at(event); }} onPointerMove={(event) => { if (event.currentTarget.hasPointerCapture(event.pointerId)) at(event); }} onPointerUp={(event) => { event.currentTarget.releasePointerCapture(event.pointerId); setDragging(false); }} onPointerCancel={() => setDragging(false)} >

99.5 || undefined}> {after}

{before}

); } 54:T8bc,/* image-compare.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="image-compare"] { cursor: ew-resize; background: var(--muted); transition: --split var(--duration-fast) var(--ease-out); } [data-slot="image-compare"][data-dragging="true"] { transition: none; } [data-slot="compare-before"] { clip-path: inset(0 calc(100% - var(--split)) 0 0); } [data-slot="compare-handle"] { position: absolute; top: 0; bottom: 0; left: var(--split); display: grid; place-items: center; width: 2.75rem; translate: -50% 0; outline: none; cursor: ew-resize; } [data-slot="compare-handle"]::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 2px; translate: -50% 0; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.28); } [data-slot="compare-knob"] { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--elevated); color: var(--foreground); transition: scale var(--duration-fast) var(--ease-out); } [data-slot="image-compare"][data-dragging="true"] [data-slot="compare-knob"] { scale: 1.08; } [data-slot="compare-handle"]:focus-visible [data-slot="compare-knob"] { outline: 2px solid var(--ring); outline-offset: 2px; } [data-slot="compare-chip"] { position: absolute; top: 0.75rem; padding: 0.125rem 0.5rem; border-radius: var(--radius-control); background: color-mix(in srgb, var(--background) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.75rem; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out); } [data-slot="compare-chip"][data-side="start"] { left: 0.75rem; } [data-slot="compare-chip"][data-side="end"] { right: 0.75rem; } @media (prefers-reduced-motion: reduce) { [data-slot="image-compare"], [data-slot="compare-knob"] { transition: none !important; animation: none !important; } } } 50:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L51",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"ui/image-compare.tsx","content":"$53","type":"registry:ui","target":"components/ui/image-compare.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/image-compare.css","content":"$54","type":"registry:file","target":"components/ui/image-compare.css"}],"className":"h-[70svh] min-h-80"}]]}]