64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 66:T1e74,'use client'; import * as React from 'react'; import { cn } from '@/registry/localmode/lib/utils'; /** * A repeating checkerboard background that reveals image transparency (alpha), * used behind segmentation / background-removal results. Shipped inline so the * component is standalone after `shadcn add` — no global CSS required. */ const CHECKERBOARD_STYLE: React.CSSProperties = { backgroundImage: 'linear-gradient(45deg, hsl(0 0% 80% / 0.6) 25%, transparent 25%), linear-gradient(-45deg, hsl(0 0% 80% / 0.6) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, hsl(0 0% 80% / 0.6) 75%), linear-gradient(-45deg, transparent 75%, hsl(0 0% 80% / 0.6) 75%)', backgroundSize: '16px 16px', backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0', }; /** Props for {@link BeforeAfterImageViewer}. */ export interface BeforeAfterImageViewerProps { /** Source (data URL or URL) of the original image. */ originalSrc: string; /** * Source of the transformed result (upscaled, segmented, background-removed). * When omitted, only the original is shown. */ processedSrc?: string; /** * Layout. `"grid"` shows both panels side-by-side; `"toggle"` shows one image * with a segmented Original/Enhanced switch. * @default "grid" */ mode?: 'grid' | 'toggle'; /** Label for the original panel/toggle. @default "Original" */ originalLabel?: string; /** Label for the result panel/toggle. @default "Enhanced" */ processedLabel?: string; /** * Render the result panel on a checkerboard transparency background so alpha * shows through (segmentation / background removal). @default true */ checkerboard?: boolean; /** * Base alt text for the subject. Distinct alts are derived for the two images * so assistive tech never hears the same description for both — the original * becomes `"{originalLabel}: {alt}"` and the result `"{processedLabel}: * {alt}"`. Empty (the default) keeps both images decorative. Use * {@link originalAlt} / {@link resultAlt} to set them explicitly. * @default "" */ alt?: string; /** * Explicit alt for the original image. Overrides the value derived from * {@link alt}. */ originalAlt?: string; /** * Explicit alt for the processed/result image. Overrides the value derived * from {@link alt}. */ resultAlt?: string; /** Additional class names merged onto the root element. */ className?: string; } /** A single labeled image panel; optionally on the checkerboard + ring-highlighted. */ function Panel({ src, label, active, checkerboard, alt, }: { src: string; label: string; active: boolean; checkerboard: boolean; alt: string; }) { return (

{/* eslint-disable-next-line @next/next/no-img-element */} {alt}

{label}

); } /** * Compares an original image with a transformed result. Two modes: * * - `grid` — both panels side-by-side; the result panel sits on a checkerboard * so transparency (segmentation, background removal) shows through. * - `toggle` — a single image with a segmented Original/Enhanced switch that * swaps the source. * * Presentational: pass `originalSrc` + `processedSrc` produced by a vision hook * (`useImageToImage` / `useSegmentImage`). Owns only the toggle's local UI state. * * @example * ```tsx * * ``` */ export function BeforeAfterImageViewer({ originalSrc, processedSrc, mode = 'grid', originalLabel = 'Original', processedLabel = 'Enhanced', checkerboard = true, alt = '', originalAlt, resultAlt, className, }: BeforeAfterImageViewerProps) { const [showProcessed, setShowProcessed] = React.useState(true); const hasProcessed = Boolean(processedSrc); const panelId = React.useId(); // Derive distinct alts so the original and result are never announced // identically. Empty `alt` stays empty (both decorative). const resolvedOriginalAlt = originalAlt ?? (alt ? `${originalLabel}: ${alt}` : alt); const resolvedResultAlt = resultAlt ?? (alt ? `${processedLabel}: ${alt}` : alt); if (mode === 'toggle') { const showingResult = hasProcessed && showProcessed; const activeSrc = showingResult ? processedSrc! : originalSrc; // Two mutually exclusive views of one region: an ARIA tablist, not a pair of // aria-pressed toggle buttons. Assistive tech announces "selected, 1 of 2" // and the arrow keys move between views, which `aria-pressed` cannot express. const tabProps = (selected: boolean, onSelect: () => void) => ({ type: 'button' as const, role: 'tab', 'aria-selected': selected, 'aria-controls': panelId, tabIndex: selected ? 0 : -1, onClick: onSelect, onKeyDown: (event: React.KeyboardEvent) => { if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return; event.preventDefault(); setShowProcessed((current) => !current); }, className: cn( 'rounded-md px-3 py-1 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50', selected ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground', ), }); return (

{/* eslint-disable-next-line @next/next/no-img-element */} {showingResult

{hasProcessed && (

)}

); } return (

{hasProcessed && ( )}

); } export default BeforeAfterImageViewer; 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json"]}]]}],null]}],["$","$L65",null,{"files":[{"path":"registry/localmode/media-vision/before-after-image-viewer/before-after-image-viewer.tsx","content":"$66","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]