5f: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"] 60: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"] 61:T142a,"use client"; import { type ReactNode, type RefObject, useEffect, useLayoutEffect, useState } from "react"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup, } from "@/components/ui/resizable"; import { cn } from "@/lib/utils"; export interface ImageEditorLayoutProps { children?: ReactNode; sidebar?: ReactNode; toolbar?: ReactNode; resizableSidebar?: boolean; sidebarDefaultSize?: number | string; sidebarMinSize?: number | string; sidebarMaxSize?: number | string; canvasMinSize?: number | string; className?: string; contentClassName?: string; canvasClassName?: string; sidebarClassName?: string; toolbarClassName?: string; } export function ImageEditorLayout({ children, sidebar, toolbar, resizableSidebar = true, sidebarDefaultSize = "22rem", sidebarMinSize = "18rem", sidebarMaxSize = "34rem", canvasMinSize = "24rem", className, contentClassName, canvasClassName, sidebarClassName, toolbarClassName, }: ImageEditorLayoutProps) { const main = (

{children}

); const sidebarPanel = sidebar ? ( ) : null; return (

{toolbar ? (

{toolbar}

) : null} {sidebarPanel && resizableSidebar ? ( {main} {sidebarPanel} ) : (

{main} {sidebarPanel}

)}

); } /** Width of an element, tracked with a ResizeObserver (0 until measured). */ /** * The element's width, measured before the first paint (`null` until then), * so a layout can be chosen without rendering the wrong one first. */ export function useElementWidth(ref: RefObject): number | null { const [width, setWidth] = useState(null); useIsomorphicLayoutEffect(() => { const element = ref.current; if (!element) return; setWidth(element.getBoundingClientRect().width); const observer = new ResizeObserver(([entry]) => setWidth(entry.contentRect.width)); observer.observe(element); return () => observer.disconnect(); }, [ref]); return width; } const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; /** The element's height, kept in sync (`null` until measured). */ export function useElementHeight(ref: RefObject): number | null { const [height, setHeight] = useState(null); useIsomorphicLayoutEffect(() => { const element = ref.current; if (!element) return; setHeight(element.getBoundingClientRect().height); const observer = new ResizeObserver(([entry]) => setHeight(entry.contentRect.height)); observer.observe(element); return () => observer.disconnect(); }, [ref]); return height; } /** `window.matchMedia(query).matches`, kept in sync (false during SSR). */ export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(false); useEffect(() => { const list = window.matchMedia(query); setMatches(list.matches); const onChange = () => setMatches(list.matches); list.addEventListener("change", onChange); return () => list.removeEventListener("change", onChange); }, [query]); return matches; } /** Phones and small tablets: panels go in a bottom drawer. */ export const MOBILE_QUERY = "(max-width: 767px)"; /** Below this editor width the compact (mobile) layout is used. */ export const COMPACT_WIDTH = 640; 5e:["$","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,["$","$L5f",null,{"namespace":"@photocn","registryDependencies":["resizable"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"src/registry/image-editor/layout.tsx","content":"$61","type":"registry:component","target":"components/image-editor/layout.tsx"}],"className":"h-[70svh] min-h-80"}]]}]