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:Ta4b,"use client"; /* eslint-disable @next/next/no-img-element -- Installable React image gallery. */ import * as React from "react"; import { cn } from "@/lib/utils"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { useGalleryRef, useGallerySelection } from "@/lib/cojeev/reference-gallery-motion"; export type AccordionGalleryItem={id:string;src:string;alt:string;title:string;description?:string;href?:string}; export type AccordionGalleryProps=Omit,"onChange"> & {items:readonly AccordionGalleryItem[];defaultIndex?:number;selectedIndex?:number;onSelectionChange?:(index:number)=>void;orientation?:"horizontal"|"vertical"}; export function AccordionGallery({items,defaultIndex=0,selectedIndex,onSelectionChange,orientation="horizontal",className,ref,...props}:AccordionGalleryProps){ const host=React.useRef(null),buttons=React.useRef<(HTMLButtonElement|null)[]>([]),id=React.useId(); const {enabled,inView}=useMotionVisibility(host); const {selected,select}=useGallerySelection(items.length,defaultIndex,selectedIndex,onSelectionChange); const key=(event:React.KeyboardEvent,index:number)=>{let next=index;if(event.key==="ArrowRight"||event.key==="ArrowDown")next=(index+1)%items.length;else if(event.key==="ArrowLeft"||event.key==="ArrowUp")next=(index-1+items.length)%items.length;else if(event.key==="Home")next=0;else if(event.key==="End")next=items.length-1;else return;event.preventDefault();select(next);buttons.current[next]?.focus();}; return

{items.length===0 ?

No gallery items.

: items.map((item,index)=>

)}

; } 52:T8f9,@layer cojeev-states { .v-accordion-gallery{display:flex;gap:10px;width:100%;min-width:0;min-height:380px;isolation:isolate}.v-accordion-gallery__panel{position:relative;overflow:hidden;flex:1 1 0;min-width:64px;border:1px solid var(--v-border);border-radius:20px;background:var(--v-paper);transition:flex-grow .55s cubic-bezier(.22,1,.36,1)}.v-accordion-gallery__panel[data-selected=true]{flex-grow:4}.v-accordion-gallery__image{position:absolute;width:100%;height:100%;object-fit:cover;inset:0;filter:grayscale(.7);opacity:.55;transition:filter .5s,opacity .5s,transform .5s}.v-accordion-gallery__panel[data-selected=true] .v-accordion-gallery__image{filter:none;opacity:1;transform:scale(1.025)}.v-accordion-gallery__heading{position:relative;z-index:1;margin:0}.v-accordion-gallery__heading button{appearance:none;width:100%;border:0;border-bottom:1px solid var(--v-border);background:var(--v-paper);color:var(--v-ink);padding:16px 12px;font:inherit;font-family:var(--font-display);font-size:18px;display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer;min-height:56px;overflow-wrap:anywhere}.v-accordion-gallery__number{font-size:12px;flex-shrink:0}.v-accordion-gallery__story{position:absolute;inset:auto 12px 12px;background:var(--v-paper);color:var(--v-ink);padding:16px;border-radius:12px;max-height:60%;overflow:auto;font-size:14px}.v-accordion-gallery__story p{margin:0 0 12px;line-height:1.5}.v-accordion-gallery__story a{color:inherit;font-weight:600;text-underline-offset:4px}.v-accordion-gallery button:focus-visible,.v-accordion-gallery a:focus-visible{outline:2px solid var(--v-ink);outline-offset:-4px}.v-accordion-gallery[data-motion=off] *{transition:none}.v-accordion-gallery[data-orientation=vertical]{flex-direction:column;height:570px}.v-accordion-gallery[data-orientation=vertical] .v-accordion-gallery__panel{min-height:56px}.v-accordion-gallery[data-orientation=vertical] .v-accordion-gallery__panel[data-selected=true]{flex-grow:6}@media(max-width:600px){.v-accordion-gallery{flex-direction:column;height:570px}.v-accordion-gallery__panel{min-height:56px}.v-accordion-gallery__panel[data-selected=true]{flex-grow:6}.v-accordion-gallery__heading button{padding:12px 16px}}@media(prefers-reduced-motion:reduce){.v-accordion-gallery *{transition:none}} } 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/accordion-gallery.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/accordion-gallery.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/accordion-gallery.css","content":"$52","type":"registry:file","target":"styles/cojeev/accordion-gallery.css"}],"className":"h-[70svh] min-h-80"}]]}]

{buttons.current[index]=node;}} aria-expanded={selected===index} aria-controls={`${id}-${index}`} onClick={()=>select(index)} onKeyDown={event=>key(event,index)}>{String(index+1).padStart(2,"0")}{item.title}