4c: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"] 4d: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"] 4e: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"] 4f: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"] 50:T12cb,"use client"; import * as React from "react"; import { motion } from "motion/react"; import { cn } from "@/lib/utils"; import { reconcileSwapOrder,swapLayoutItems } from "@/lib/cojeev/reference-layouts"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; export type SwapyItem={id:string;label:string;content:React.ReactNode}; export type SwapyProps=Omit,"children"> & {items:readonly SwapyItem[];order?:readonly string[];defaultOrder?:readonly string[];onOrderChange?:(order:string[])=>void;variant?:"grid"|"list";disabled?:boolean}; /** React owns the order. Pointer capture is confined to explicit drag handles. */ export function Swapy({items,order,defaultOrder=[],onOrderChange,variant="grid",disabled=false,className,ref,...props}:SwapyProps){ const [localOrder,setLocalOrder]=React.useState(defaultOrder),[dragged,setDragged]=React.useState(null),[target,setTarget]=React.useState(null),[announcement,setAnnouncement]=React.useState(""); const host=React.useRef(null),drag=React.useRef<{id:string;pointer:number;target:string|null}|null>(null),{enabled,inView}=useMotionVisibility(host),instructions=React.useId(); const ids=reconcileSwapOrder(order??localOrder,items.map(item=>item.id)); const itemMap=new Map(items.map(item=>[item.id,item])); const hostRef=React.useCallback((node:HTMLDivElement|null)=>{host.current=node;return assignMotionRef(ref,node);},[ref]); const swap=(first:string,second:string)=>{if(disabled||first===second)return;const next=swapLayoutItems(ids,first,second);if(!next.includes(first)||!next.includes(second))return;if(order===undefined)setLocalOrder(next);onOrderChange?.(next);setAnnouncement(`${itemMap.get(first)?.label??first} moved to position ${next.indexOf(first)+1} of ${next.length}.`);}; const end=()=>{drag.current=null;setDragged(null);setTarget(null);}; const keyboard=(event:React.KeyboardEvent,id:string)=>{const index=ids.indexOf(id);let next=index;if(event.key==="ArrowLeft"||event.key==="ArrowUp")next=Math.max(0,index-1);else if(event.key==="ArrowRight"||event.key==="ArrowDown")next=Math.min(ids.length-1,index+1);else if(event.key==="Home")next=0;else if(event.key==="End")next=ids.length-1;else if(event.key==="Escape"){end();event.preventDefault();return;}else return;event.preventDefault();swap(id,ids[next]);}; return

Drag a handle onto another card, or use its arrow buttons to swap positions.

{item.label}

{item.content}

{!ids.length&&

No cards to arrange.

}

{announcement||`${ids.length} ${ids.length===1?"card":"cards"} ready to arrange.`}

; } 51:T6c9,@layer cojeev-states { .v-swapy{width:100%;min-width:0}.v-swapy__instructions,.v-swapy__status{margin:0 0 16px;color:var(--v-text-2);font-size:13px;line-height:1.5}.v-swapy__status{margin:16px 0 0;min-height:20px}.v-swapy__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}.v-swapy__item{position:relative;min-width:0;display:grid;align-content:start;gap:16px;background:var(--v-paper);color:var(--v-text);border:1px solid var(--v-edge);border-radius:20px;padding:18px;box-shadow:0 3px 0 var(--v-beige)}.v-swapy__item[data-dragged=true]{opacity:.55;outline:2px dashed var(--v-brand);pointer-events:none}.v-swapy__item[data-drop-target=true]{outline:3px solid var(--v-brand);outline-offset:2px;background:var(--v-pink-soft)}.v-swapy__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.v-swapy__header strong{font:20px/1.1 var(--font-display);overflow-wrap:anywhere}.v-swapy__handle{touch-action:none;cursor:grab;user-select:none}.v-swapy__handle:active{cursor:grabbing}.v-swapy__content{min-width:0;font-size:14px;line-height:1.5}.v-swapy__controls{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.v-swapy__controls span{font-size:12px;color:var(--v-text-2)}.v-swapy button{display:grid;place-items:center;min-width:44px;height:44px;border:1px solid var(--v-edge);border-radius:50%;background:var(--v-beige);color:var(--v-ink);font-size:19px}.v-swapy button:disabled{opacity:.35;cursor:default}.v-swapy button:focus-visible{outline:2px solid var(--v-brand);outline-offset:3px}.v-swapy[data-variant=list] .v-swapy__grid{grid-template-columns:1fr}@media(max-width:480px){.v-swapy__grid{grid-template-columns:1fr}} } 4b:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4d",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":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/swapy.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/swapy.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/swapy.css","content":"$51","type":"registry:file","target":"styles/cojeev/swapy.css"}],"className":"h-[70svh] min-h-80"}]]}]