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:T14ec,"use client"; import * as React from "react"; import { OrganismComposition, type OrganismCompositionProps, type OrganismKind } from "@/components/ui/organism-composition"; import { Button } from "@/components/ui/button"; import { Icon, IconButton } from "@/components/ui/icon"; import { organismChoices } from "@/lib/cojeev/assembly-geometry"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { useFlowGroup } from "@/lib/cojeev-motion/use-flow"; import { cn } from "@/lib/utils"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; export type OrganismAssemblyProps=Omit,"onChange">&{ value?:OrganismKind; defaultValue?:OrganismKind; onValueChange?:(value:OrganismKind)=>void; defaultAssembled?:boolean; /** Gather once when the measured studio first becomes visible. User choices take priority. */ autoAssemble?:boolean; /** An optional curated subset; the default studio still exposes all six compositions. */ compositions?:OrganismKind[]; compositionProps?:Omit; }; /** A specimen studio. The moving parts are the native components you can use after arrival. */ export function OrganismAssembly({value,defaultValue="profile",onValueChange,defaultAssembled=false,autoAssemble=false,compositions,compositionProps,className,...props}:OrganismAssemblyProps){ const [local,setLocal]=React.useState(defaultValue); const host=React.useRef(null),autoStarted=React.useRef(false); const {inView,enabled}=useMotionVisibility(host); const choices=compositions?.length?organismChoices.filter(choice=>compositions.includes(choice.value)):organismChoices; const kind=value??local,choiceKind=kind==="dashboard"?"side-panel":kind; const [assembled,setAssembled]=React.useState(defaultAssembled); const [settled,setSettled]=React.useState(defaultAssembled); const {quiet}=useChoreography(); const choicesRef=useFlowGroup(undefined,{itemSelector:"[data-assembly-choice]",activeSelector:'[aria-pressed="true"]'}); const timer=React.useRef|null>(null); const id=React.useId(); const clear=()=>{if(timer.current){clearTimeout(timer.current);timer.current=null}}; React.useEffect(()=>()=>{if(timer.current)clearTimeout(timer.current)},[]); React.useEffect(()=>{if(quiet&&timer.current){clearTimeout(timer.current);timer.current=null;setAssembled(true)}},[quiet]); React.useEffect(()=>{ if(!autoAssemble||autoStarted.current||!inView||!enabled||quiet)return; const autoTimer=setTimeout(()=>{autoStarted.current=true;setAssembled(true);if(timer.current===autoTimer)timer.current=null},550); timer.current=autoTimer; // Visibility cleanup only owns this gather, never a later visitor-triggered replay. return()=>{clearTimeout(autoTimer);if(timer.current===autoTimer)timer.current=null}; },[autoAssemble,inView,enabled,quiet]); const choose=(next:OrganismKind)=>{autoStarted.current=true;clear();if(value===undefined)setLocal(next);onValueChange?.(next);setAssembled(true)}; const title=organismChoices.find(choice=>choice.value===choiceKind)?.label??"Panel"; function replay(){autoStarted.current=true;clear();setAssembled(false);timer.current=setTimeout(()=>{setAssembled(true);timer.current=null},1550)} function moveChoice(event:React.KeyboardEvent){ const count=choices.length,index=choices.findIndex(choice=>choice.value===choiceKind); const next=event.key==="ArrowRight"||event.key==="ArrowDown"?(index+1)%count:event.key==="ArrowLeft"||event.key==="ArrowUp"?(index+count-1)%count:event.key==="Home"?0:event.key==="End"?count-1:-1; if(next<0)return;event.preventDefault();choose(choices[next].value);event.currentTarget.querySelectorAll("button")[next]?.focus(); } return

{choices.map(choice=>)}

{quiet||assembled&&settled?`${title} ready`:assembled?`Assembling ${title.toLowerCase()}`:"Ready to assemble"}

; } 52:T4a4,@layer cojeev-states { .v-organism-assembly {width:100%;min-width:0;container-type:inline-size;} .v-organism-assembly__toolbar {display:flex;justify-content:center;align-items:center;gap:10px;} .v-organism-assembly__choices {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--card);min-width:0;} .v-organism-assembly__choices.v-glide {--glide-bg:var(--v-pink);--glide-fg:var(--v-on-accent);} .v-organism-assembly__choices.v-glide > [data-assembly-choice] {--mfill:transparent;background:transparent;box-shadow:none;} .v-organism-assembly__choices.v-glide > [data-assembly-choice] > .v-morph [data-morph-body] {fill:transparent;} .v-organism-assembly__transport {display:flex;justify-content:center;} @container(max-width:340px){.v-organism-assembly__toolbar{gap:6px}.v-organism-assembly__choices{gap:0;padding:2px}.v-organism-assembly__choices .v-btn{padding-inline:10px}} @container(max-width:480px){.v-organism-assembly__choices:has(>button:nth-of-type(5)){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-card-sm)}.v-organism-assembly__toolbar{align-items:center}} } 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","https://000h.cojeev.com/r/organism-composition.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.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/organism-assembly.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/organism-assembly.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/organism-assembly.css","content":"$52","type":"registry:file","target":"styles/cojeev/organism-assembly.css"}],"className":"h-[70svh] min-h-80"}]]}]