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:Tbc3,"use client"; import * as React from "react"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import * as Primitive from "react-resizable-panels"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; export const resizableVariants = cva( "v-resizable [height:var(--h,240px)] [background:var(--card)] [border-radius:22px] [overflow:hidden] [box-shadow:inset_0_0_0_1px_var(--v-border)] [isolation:isolate] flex", { variants: { variant: { default: "", v: "-v" } }, defaultVariants: { variant: "default" }, }, ); export type ResizablePanelGroupProps = React.ComponentProps< typeof Primitive.Group > & VariantProps & { direction?: "horizontal" | "vertical"; }; export function ResizablePanelGroup({ className, variant, direction, orientation, elementRef, style, ...props }: ResizablePanelGroupProps) { const morphRef = useMorph("cards", elementRef); const resolved = orientation ?? direction ?? (variant === "v" ? "vertical" : "horizontal"); return ( ); } export type ResizablePanelProps = React.ComponentProps; export function ResizablePanel({ className, children, minSize = "15%", maxSize = "85%", ...props }: ResizablePanelProps) { return ( ( <> {viewport} )} > {children} ); } export type ResizableHandleProps = React.ComponentProps< typeof Primitive.Separator > & { withHandle?: boolean }; export function ResizableHandle({ className, withHandle = true, children, ...props }: ResizableHandleProps) { return ( {children} ); } 51:T1cc5,@layer cojeev-states { /* Cojeev authored subparts, state precedence, and irreducible shapes; scoped to this registry item. */ .v-resizable__pane:where([data-slot="resizable-panel"] > *) { padding: var(--s-4); overflow: auto; min-width: 0; } .v-resizable__handle:where([data-slot="resizable"], [data-slot^="resizable-"]) { background: transparent; cursor: col-resize; place-items: center; touch-action: none; } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle { cursor: row-resize; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] )::before { content: ""; width: 2px; height: 28px; border-radius: 1px; background: var(--v-border); } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle::before { width: 28px; height: 2px; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):hover::before, .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):focus-visible::before { background: var(--v-pink); } .v-resizable__pane:where([data-slot="resizable-panel"] > *) { padding: 18px 20px; gap: 6px; align-content: start; background: var(--v-canvas); } :where([data-slot="resizable-panel"]:last-child) > .v-resizable__pane { background: var(--surface-work); } .v-resizable__pane:where([data-slot="resizable-panel"] > *) > b { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; } .v-resizable__pane:where([data-slot="resizable-panel"] > *) .v-caps { margin-bottom: 4px; } .v-resizable__handle:where([data-slot="resizable"], [data-slot^="resizable-"]) { position: relative; background: var(--card); cursor: col-resize; place-items: center; touch-action: none; transition: background var(--t-micro); } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] )::before { content: ""; width: 6px; height: 44px; border-radius: 999px; background: var(--v-edge); opacity: 0.6; transition: all var(--t-micro) var(--enter); } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] )::after { content: ""; position: absolute; width: 2px; height: 14px; background: var(--v-canvas); border-radius: 1px; opacity: 0; transition: opacity var(--t-micro); } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):hover::before, .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):focus-visible::before { background: var(--v-pink); opacity: 1; height: 56px; width: 8px; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):hover::after, .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):focus-visible::after { opacity: 1; background: var(--ink-fixed); } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):active::before, .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-dragging .v-resizable__handle::before { background: var(--v-ink); opacity: 1; width: 8px; height: 64px; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):active::after, .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-dragging .v-resizable__handle::after { background: var(--v-canvas); opacity: 1; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):focus-visible { outline: none; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):focus-visible::before { box-shadow: 0 0 0 2px var(--v-canvas), 0 0 0 4px var(--ring); } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle { cursor: row-resize; } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle::before { width: 44px; height: 6px; } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle::after { width: 14px; height: 2px; } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle:hover::before { width: 56px; height: 8px; } .v-resizable__handle:where([data-slot="resizable"], [data-slot^="resizable-"]) { position: relative; width: 14px; cursor: col-resize; background: transparent; place-items: center; flex: none; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] )::before { content: ""; width: 4px; height: 36px; border-radius: 999px; background: var(--v-edge); transition: background var(--t-micro), height var(--t-element) var(--enter); } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):hover::before, .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):focus-visible::before, .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):active::before, .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-dragging .v-resizable__handle::before { background: var(--v-pink-deep); height: 52px; } .v-resizable__handle:where( [data-slot="resizable"], [data-slot^="resizable-"] ):focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: 8px; } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle { width: auto; height: 14px; cursor: row-resize; } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle::before { width: 36px; height: 4px; } .v-resizable:where([data-slot="resizable"], [data-slot^="resizable-"]).-v .v-resizable__handle:hover::before { width: 52px; height: 4px; } .v-resizable__pane:where([data-slot="resizable-panel"] > *) { border-radius: 16px; } :root[data-mode="dark"] .v-resizable__pane:where([data-slot="resizable-panel"] > *) { background: var(--v-beige); } @media (prefers-reduced-motion: reduce) { [data-slot="resizable"], [data-slot^="resizable-"], [data-slot="resizable"]::before, [data-slot="resizable"]::after, [data-slot^="resizable-"]::before, [data-slot^="resizable-"]::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; } } [data-slot="resizable-panel"] > .v-resizable__pane { display: grid; /* The panel owns scrolling; its composed content owns spacing. */ padding: 0; } [data-slot="resizable-handle"] { display: grid; flex-basis: 14px; } [data-slot="resizable-handle"]:not([data-with-handle])::before, [data-slot="resizable-handle"]:not([data-with-handle])::after { display: none; } .v-resizable__pane:where([data-slot="resizable-panel"] > *) { overflow: hidden; padding: 0; } .v-resizable .v-resizable__scroll[data-slot="scroll-area"] { --h: 100%; height: 100%; max-height: 100%; border-radius: 0; } .v-resizable .v-resizable__scroll > [data-slot="scroll-area-viewport"] { height: 100%; max-height: 100%; padding: 18px 24px 22px 20px; } } 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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","li","react-resizable-panels",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-resizable-panels","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":"react-resizable-panels"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/scroll-area.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/resizable.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/resizable.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/resizable.css","content":"$51","type":"registry:file","target":"styles/cojeev/resizable.css"}],"className":"h-[70svh] min-h-80"}]]}]