4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T825,"use client"; /* eslint-disable @next/next/no-img-element -- Installable React image component. */ import * as React from "react"; import { cn } from "@/lib/utils"; import { signatureShapePaths,type SignatureShapeName } from "@/lib/cojeev/signature-shapes"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; export type ImageMaskingProps=Omit,"children"> & {src:string;alt:string;shape?:SignatureShapeName;method?:"mask"|"clip";caption?:React.ReactNode;fit?:"cover"|"contain";imagePosition?:string}; export function ImageMasking({src,alt,shape="clover-soft",method="mask",caption,fit="cover",imagePosition="center",className,ref,...props}:ImageMaskingProps){ const host=React.useRef(null),id=`image-mask-${React.useId().replace(/[^a-zA-Z0-9_-]/g,"")}`;const {enabled,inView}=useMotionVisibility(host); const path=signatureShapePaths[shape];if(!path)throw new Error(`Unknown Cojeev image shape: ${shape}`); const mask=`url("data:image/svg+xml,${encodeURIComponent(``)}")`; const shapeStyle:React.CSSProperties=method==="mask"?{maskImage:mask,WebkitMaskImage:mask}:{clipPath:`url(#${id})`}; const hostRef=React.useCallback((node:HTMLElement|null)=>{host.current=node;return assignMotionRef(ref,node);},[ref]); return

; } 4c:["$","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,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",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":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/image-masking.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/image-masking.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/image-masking.css","content":"@layer cojeev-states {\n.v-image-masking{display:grid;gap:20px;justify-items:center;width:100%;min-width:0;margin:0}.v-image-masking__defs{position:absolute}.v-image-masking__frame{width:min(100%,420px);aspect-ratio:1;overflow:hidden;background:var(--v-beige);mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}.v-image-masking__image{display:block;width:100%;height:100%;transition:transform .55s cubic-bezier(.22,1,.36,1)}.v-image-masking figcaption{text-align:center;color:var(--v-text-2);font-size:14px;line-height:1.5;max-width:40ch}@media(hover:hover){.v-image-masking[data-motion=on]:hover .v-image-masking__image{transform:scale(1.045)}}.v-image-masking[data-motion=off] .v-image-masking__image{transition:none}@media(prefers-reduced-motion:reduce){.v-image-masking[data-motion=on]:hover .v-image-masking__image,.v-image-masking .v-image-masking__image{transition:none;transform:none}}\n\n}\n","type":"registry:file","target":"styles/cojeev/image-masking.css"}],"className":"h-[70svh] min-h-80"}]]}]