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:T3192,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useChoreography } from "@/lib/cojeev-motion/choreography"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; export type DockVariant = "glass" | "shelf" | "rail"; export type DockItem = { value: string; label: string; icon: React.ReactNode; disabled?: boolean; badge?: React.ReactNode; onSelect?: (value: string) => void; }; export type DockProps = Omit< React.ComponentProps<"nav">, "children" | "defaultValue" | "onChange" > & { items: DockItem[]; variant?: DockVariant; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Base icon-button size, clamped to 32–72 CSS pixels. */ itemSize?: number; /** Interaction strength, clamped to 1–2. Glass and shelf use the full scale; rail maps it to a restrained 1–1.12 response. */ magnification?: number; }; const bounded = ( value: number | undefined, fallback: number, low: number, high: number, ) => Number.isFinite(value) ? Math.max(low, Math.min(high, value as number)) : fallback; const firstEnabledValue = (items: DockItem[]) => items.find((item) => !item.disabled)?.value; /** * A labelled action launcher with macOS-inspired proximity response. * It changes local application state through callbacks; it never launches native apps. */ export function Dock({ items, variant = "glass", value, defaultValue, onValueChange, itemSize: requestedItemSize = 52, magnification: requestedMagnification = 1.65, className, style, ref, dir, onPointerMove, onPointerLeave, onPointerDownCapture, onPointerUpCapture, onPointerCancelCapture, onFocusCapture, onBlurCapture, onKeyDown, ...props }: DockProps) { const itemSize = bounded(requestedItemSize, 52, 32, 72); const magnification = bounded(requestedMagnification, 1.65, 1, 2); const [uncontrolledValue, setUncontrolledValue] = React.useState( defaultValue ?? firstEnabledValue(items), ); const activeValue = value ?? uncontrolledValue; const [focusIndex, setFocusIndex] = React.useState(null); const [pointerIndex, setPointerIndex] = React.useState(null); const [scales, setScales] = React.useState(() => items.map(() => 1), ); const buttons = React.useRef>([]); const root = React.useRef(null); const [inheritedDirection, setInheritedDirection] = React.useState< "ltr" | "rtl" >("ltr"); const scrollDirection = dir === "rtl" || dir === "ltr" ? dir : inheritedDirection; React.useLayoutEffect(() => { if (dir === "rtl" || dir === "ltr" || !root.current) return; const read = () => setInheritedDirection( getComputedStyle(root.current!).direction === "rtl" ? "rtl" : "ltr", ); read(); const observer = new MutationObserver(read); for ( let node: HTMLElement | null = root.current; node; node = node.parentElement ) observer.observe(node, { attributes: true, attributeFilter: ["dir"] }); return () => observer.disconnect(); }, [dir]); const pointerPress = React.useRef(false); const { quiet } = useChoreography(); const attach = React.useCallback( (node: HTMLElement | null) => { root.current = node; return assignMotionRef(ref, node); }, [ref], ); const scaleForDistance = React.useCallback( (distance: number, reach: number) => { if (quiet || distance >= reach) return 1; const influence = (Math.cos((Math.PI * distance) / reach) + 1) / 2; return 1 + (magnification - 1) * influence; }, [magnification, quiet], ); const focusScales = React.useCallback( (index: number | null) => { if (index === null || quiet) return items.map(() => 1); return items.map((_, candidate) => { const distance = Math.abs(candidate - index); if (distance === 0) return magnification; if (distance === 1) return 1 + (magnification - 1) * 0.34; return 1; }); }, [items, magnification, quiet], ); const select = (item: DockItem) => { if (item.disabled) return; if (value === undefined) setUncontrolledValue(item.value); onValueChange?.(item.value); item.onSelect?.(item.value); }; const moveFocus = (from: number, direction: 1 | -1) => { if (!items.some((item) => !item.disabled)) return; let candidate = from; for (let count = 0; count < items.length; count += 1) { candidate = (candidate + direction + items.length) % items.length; if (!items[candidate]?.disabled) { buttons.current[candidate]?.focus(); return; } } }; const handleKeyDown = (event: React.KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented) return; const target = event.target instanceof Element ? event.target.closest("button[data-dock-index]") : null; if (!target) return; const index = Number(target.dataset.dockIndex); const direction = getComputedStyle(event.currentTarget).direction; let movement: 1 | -1 | undefined; if (variant === "rail") { if (event.key === "ArrowDown") movement = 1; if (event.key === "ArrowUp") movement = -1; } else { if (event.key === "ArrowRight") movement = direction === "rtl" ? -1 : 1; if (event.key === "ArrowLeft") movement = direction === "rtl" ? 1 : -1; } if (movement) { event.preventDefault(); moveFocus(index, movement); return; } if (event.key === "Home" || event.key === "End") { event.preventDefault(); const indices = items .map((item, itemIndex) => (item.disabled ? -1 : itemIndex)) .filter((indexValue) => indexValue >= 0); buttons.current[ event.key === "Home" ? indices[0] : indices.at(-1)! ]?.focus(); } }; const handlePointerMove = (event: React.PointerEvent) => { onPointerMove?.(event); if (event.defaultPrevented || quiet || event.pointerType === "touch") return; const axis = variant === "rail" ? "y" : "x"; const pointer = axis === "x" ? event.clientX : event.clientY; const reach = itemSize * 1.7; let closest = { index: -1, distance: Number.POSITIVE_INFINITY }; const next = items.map((item, index) => { if (item.disabled) return 1; const bounds = buttons.current[index]?.getBoundingClientRect(); const center = bounds ? axis === "x" ? bounds.left + bounds.width / 2 : bounds.top + bounds.height / 2 : Number.POSITIVE_INFINITY; const distance = Math.abs(pointer - center); if (distance < closest.distance) closest = { index, distance }; return scaleForDistance(distance, reach); }); setPointerIndex(closest.distance <= reach ? closest.index : null); setScales(next); }; const handlePointerLeave = (event: React.PointerEvent) => { onPointerLeave?.(event); pointerPress.current = false; setPointerIndex(null); setScales(focusScales(focusIndex)); }; const handleFocusCapture = (event: React.FocusEvent) => { onFocusCapture?.(event); const target = event.target instanceof Element ? event.target.closest("button[data-dock-index]") : null; if (!target) return; const index = Number(target.dataset.dockIndex); setFocusIndex(index); setScales(focusScales(index)); if (!pointerPress.current) target.scrollIntoView({ block: "nearest", inline: variant === "rail" ? "nearest" : "center", behavior: "auto", }); }; const handleBlurCapture = (event: React.FocusEvent) => { onBlurCapture?.(event); if (event.currentTarget.contains(event.relatedTarget as Node | null)) return; pointerPress.current = false; setFocusIndex(null); setScales(items.map(() => 1)); }; const tabValue = items.some( (item) => item.value === activeValue && !item.disabled, ) ? activeValue : firstEnabledValue(items); const customStyle = { ...style, "--dock-item-size": `${itemSize}px`, "--dock-magnification": magnification, "--dock-reserved-lift": `${Math.round((magnification - 1) * itemSize * 1.42)}px`, } as React.CSSProperties; return (

{ onPointerDownCapture?.(event); pointerPress.current = !event.defaultPrevented; }} onPointerUpCapture={(event) => { onPointerUpCapture?.(event); pointerPress.current = false; }} onPointerCancelCapture={(event) => { onPointerCancelCapture?.(event); pointerPress.current = false; }} onFocusCapture={handleFocusCapture} onBlurCapture={handleBlurCapture} onKeyDown={handleKeyDown} > ( <> {viewport} )} >

{variant === "glass" && ( )} {variant === "shelf" && ( <> )} {variant === "rail" && ( )}

); } 51:T32ae,@layer cojeev-states { .v-dock { --dock-gap: 8px; position: relative; display: block; inline-size: fit-content; max-inline-size: 100%; min-inline-size: 0; color: var(--v-text); font: 500 13px/1.2 var(--font-body); isolation: isolate; } .v-dock [data-part="viewport"] { position: relative; max-inline-size: 100%; min-inline-size: 0; overscroll-behavior: contain; } .v-dock:not([data-variant="rail"]) [data-part="viewport"] { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .v-dock:not([data-variant="rail"]) [data-part="viewport"]::-webkit-scrollbar { display: none; } .v-dock [data-part="stage"] { position: relative; inline-size: max-content; min-inline-size: 100%; box-sizing: border-box; } .v-dock:not([data-variant="rail"]) [data-part="stage"] { padding: calc(var(--dock-reserved-lift) + 78px) calc(var(--dock-reserved-lift) + 13px) 18px; } .v-dock [data-part="items"] { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: var(--dock-gap); inline-size: max-content; margin: auto; } .v-dock [data-part="lane"] { position: relative; display: grid; justify-items: center; align-items: end; inline-size: var(--dock-item-size); block-size: calc(var(--dock-item-size) + 8px); flex: 0 0 var(--dock-item-size); } .v-dock [data-part="item"] { position: relative; display: grid; place-items: center; inline-size: var(--dock-item-size); block-size: var(--dock-item-size); margin: 0; padding: 0; border: 0; border-radius: 14px; background: transparent; color: var(--v-text); font: inherit; cursor: pointer; outline: none; isolation: isolate; -webkit-tap-highlight-color: transparent; } .v-dock [data-part="visual"] { position: relative; display: grid; place-items: center; inline-size: var(--dock-item-size); block-size: var(--dock-item-size); border-radius: 14px; background: var(--v-pink); color: var(--v-on-accent); box-shadow: 0 7px 14px -8px rgba(17, 17, 17, 0.48), inset 0 1px rgba(255, 255, 255, 0.46); transform: translateY(calc(-1 * var(--dock-item-lift))) scale(var(--dock-item-scale)); transform-origin: 50% 100%; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease-out, filter 0.18s ease-out; will-change: transform; } .v-dock [data-part="lane"]:nth-child(4n + 2) [data-part="visual"] { background: var(--v-blue); } .v-dock [data-part="lane"]:nth-child(4n + 3) [data-part="visual"] { background: var(--v-yellow); } .v-dock [data-part="lane"]:nth-child(4n + 4) [data-part="visual"] { background: var(--v-olive); } .v-dock [data-part="icon"] { display: grid; place-items: center; inline-size: 58%; block-size: 58%; } .v-dock [data-part="icon"] :where(svg, img) { display: block; inline-size: 100%; block-size: 100%; max-inline-size: 100%; max-block-size: 100%; object-fit: contain; } .v-dock [data-part="badge"] { position: absolute; inset-block-start: -5px; inset-inline-end: -5px; display: grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 5px; border: 2px solid color-mix(in srgb, var(--v-paper) 88%, transparent); border-radius: 999px; background: var(--v-ink); color: var(--v-on-ink); font-size: 10px; font-weight: 700; line-height: 1; box-sizing: border-box; } .v-dock [data-part="label"] { position: absolute; z-index: 3; inset-block-end: calc(100% + var(--dock-reserved-lift) + 7px); inset-inline-start: 50%; inline-size: max-content; max-inline-size: min(22ch, calc(100vw - 32px)); padding: 6px 9px; border-radius: 8px; background: var(--v-ink); color: var(--v-on-ink); box-shadow: 0 8px 18px -9px rgba(17, 17, 17, 0.5); opacity: 0; overflow-wrap: anywhere; text-align: center; transform: translate(-50%, 5px); transition: opacity 0.14s ease-out, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } .v-dock [data-part="lane"][data-engaged="true"] [data-part="label"], .v-dock [data-part="item"]:focus-visible [data-part="label"] { opacity: 1; transform: translate(-50%, 0); } .v-dock:not([data-variant="rail"]) [data-part="lane"]:first-child [data-part="label"] { inset-inline-start: 0; transform: translateY(5px); } .v-dock:not([data-variant="rail"]) [data-part="lane"]:first-child:is( [data-engaged="true"], :has([data-part="item"]:focus-visible) ) [data-part="label"] { transform: none; } .v-dock:not([data-variant="rail"]) [data-part="lane"]:last-child [data-part="label"] { inset-inline-start: auto; inset-inline-end: 0; transform: translateY(5px); } .v-dock:not([data-variant="rail"]) [data-part="lane"]:last-child:is( [data-engaged="true"], :has([data-part="item"]:focus-visible) ) [data-part="label"] { transform: none; } .v-dock [data-part="item"]:focus-visible::after { content: ""; position: absolute; inset: -4px; border: 2px solid var(--v-brand); border-radius: 18px; transform: translateY(calc(-1 * var(--dock-item-lift))) scale(var(--dock-item-scale)); transform-origin: 50% 100%; pointer-events: none; } .v-dock [data-part="item"]:active [data-part="visual"] { filter: saturate(0.84) brightness(0.94); } .v-dock [data-part="item"]:disabled { cursor: not-allowed; color: var(--v-disabled-ink); } .v-dock [data-part="item"]:disabled [data-part="visual"] { background: var(--v-disabled-face); color: var(--v-disabled-ink); box-shadow: inset 0 0 0 1px var(--v-disabled-edge); filter: none; transform: none; } .v-dock [data-part="active-indicator"] { display: block; inline-size: 5px; block-size: 5px; margin-block-start: 3px; border-radius: 50%; background: transparent; transition: background-color 0.16s ease-out, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); transform: scale(0.65); } .v-dock [data-part="lane"][data-active="true"] [data-part="active-indicator"] { background: var(--v-accent-ink); transform: scale(1); } .v-dock [data-part="glass-lens"] { position: absolute; z-index: 0; inset-inline: 0; inset-block-end: 8px; block-size: calc(var(--dock-item-size) + 28px); border: 1px solid color-mix(in srgb, var(--v-edge) 52%, transparent); border-radius: 20px; background: color-mix(in srgb, var(--v-paper) 74%, transparent); box-shadow: 0 16px 36px -25px rgba(17, 17, 17, 0.72), inset 0 1px rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); } .v-dock[data-variant="shelf"] { perspective: 520px; } .v-dock[data-variant="shelf"] [data-part="stage"] { padding-inline: 24px; padding-block-end: 20px; } .v-dock [data-part="shelf-plane"] { position: absolute; z-index: 0; inset-inline: 5px; inset-block-end: 17px; block-size: calc(var(--dock-item-size) * 0.72); border-radius: 14px 14px 5px 5px; background: linear-gradient(180deg, var(--v-beige-2), var(--v-beige)); box-shadow: 0 18px 26px -20px rgba(17, 17, 17, 0.75); transform: rotateX(57deg); transform-origin: 50% 100%; } .v-dock [data-part="shelf-edge"] { position: absolute; z-index: 1; inset-inline: 10px; inset-block-end: 9px; block-size: 12px; border-radius: 2px 2px 8px 8px; background: color-mix(in srgb, var(--v-edge) 35%, var(--v-beige)); box-shadow: 0 8px 14px -9px rgba(17, 17, 17, 0.65); } .v-dock[data-variant="shelf"] [data-part="visual"] { border-radius: 12px; box-shadow: 0 9px 14px -9px rgba(17, 17, 17, 0.58), inset 0 1px rgba(255, 255, 255, 0.42); } .v-dock[data-variant="rail"] { inline-size: min(100%, 248px); padding: 8px; border: 1px solid var(--v-border); border-radius: 18px; background: var(--v-paper); box-shadow: 0 14px 30px -24px rgba(17, 17, 17, 0.58); } .v-dock[data-variant="rail"] [data-part="viewport"] { max-block-size: min(70dvh, 520px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; } .v-dock[data-variant="rail"] [data-part="stage"], .v-dock[data-variant="rail"] [data-part="items"] { inline-size: 100%; min-inline-size: 0; } .v-dock[data-variant="rail"] [data-part="stage"] { padding: 4px; } .v-dock[data-variant="rail"] [data-part="items"] { display: grid; align-items: stretch; gap: 5px; } .v-dock[data-variant="rail"] [data-part="rail-spine"] { position: absolute; inset-block: 10px; inset-inline-start: calc(var(--dock-item-size) / 2 + 3px); inline-size: 1px; background: var(--v-border); } .v-dock[data-variant="rail"] [data-part="lane"] { display: grid; grid-template-columns: 1fr 4px; align-items: center; justify-items: stretch; inline-size: 100%; block-size: auto; min-inline-size: 0; padding-block: 4px; } .v-dock[data-variant="rail"] [data-part="item"] { grid-template-columns: var(--dock-item-size) minmax(0, 1fr); gap: 10px; inline-size: 100%; block-size: auto; min-block-size: var(--dock-item-size); padding-inline-end: 10px; text-align: start; } .v-dock[data-variant="rail"] [data-part="visual"] { grid-column: 1; grid-row: 1; justify-self: start; border-radius: 12px; transform: translateX(var(--dock-item-lift)) scale(var(--dock-item-scale)); transform-origin: 0 50%; } .v-dock[data-variant="rail"]:dir(rtl) [data-part="visual"] { transform: translateX(calc(-1 * var(--dock-item-lift))) scale(var(--dock-item-scale)); transform-origin: 100% 50%; } .v-dock[data-variant="rail"] [data-part="label"] { position: static; grid-column: 2; grid-row: 1; align-self: center; max-inline-size: 100%; padding: 0; background: transparent; color: var(--v-text); box-shadow: none; opacity: 1; overflow-wrap: anywhere; text-align: start; transform: none; transition: color 0.16s ease-out; } .v-dock[data-variant="rail"] [data-part="active-indicator"] { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; margin: 0; } .v-dock[data-variant="rail"] [data-part="lane"][data-active="true"] [data-part="item"] { background: var(--sel-bg); } .v-dock[data-variant="rail"] [data-part="item"]:focus-visible::after { inset: 2px; transform: none; border-radius: 12px; } .v-dock[data-motion="off"] [data-part="visual"], .v-dock[data-motion="off"] [data-part="label"], .v-dock[data-motion="off"] [data-part="active-indicator"], :root[data-flow="off"] .v-dock [data-part="visual"], :root[data-flow="off"] .v-dock [data-part="label"], :root[data-flow="off"] .v-dock [data-part="active-indicator"], [data-flow="off"] .v-dock [data-part="visual"], [data-flow="off"] .v-dock [data-part="label"], [data-flow="off"] .v-dock [data-part="active-indicator"] { transition: none; } .v-dock[data-motion="off"] [data-part="visual"], :root[data-flow="off"] .v-dock [data-part="visual"], [data-flow="off"] .v-dock [data-part="visual"] { transform: none; } @media (prefers-reduced-motion: reduce) { .v-dock [data-part="visual"], .v-dock [data-part="label"], .v-dock [data-part="active-indicator"] { transition: none; } .v-dock [data-part="visual"] { transform: none; } } @media (hover: none), (pointer: coarse) { .v-dock:not([data-variant="rail"]) [data-part="stage"] { padding-block-start: 12px; } .v-dock:not([data-variant="rail"]) [data-part="lane"] { block-size: calc(var(--dock-item-size) + 35px); } .v-dock:not([data-variant="rail"]) [data-part="item"] { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; block-size: calc(var(--dock-item-size) + 27px); } .v-dock:not([data-variant="rail"]) [data-part="visual"] { flex: 0 0 var(--dock-item-size); transform: none; } .v-dock:not([data-variant="rail"]) [data-part="label"] { position: static; display: -webkit-box; max-inline-size: var(--dock-item-size); padding: 0; background: transparent; color: var(--v-text); box-shadow: none; font-size: 10px; line-height: 1.15; opacity: 1; overflow: hidden; text-align: center; transform: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .v-dock [data-part="glass-lens"] { block-size: 100%; } .v-dock[data-variant="shelf"] [data-part="shelf-plane"] { block-size: calc(var(--dock-item-size) + 12px); } } .v-dock .v-dock__scroll[data-slot="scroll-area"] { --h: none; box-sizing: border-box; padding: 0; max-height: none; width: 100%; border-radius: inherit; } .v-dock .v-dock__scroll > [data-slot="scroll-area-viewport"] { height: auto; max-height: none; padding: 0 0 18px; } .v-dock[data-variant="rail"] .v-dock__scroll > [data-slot="scroll-area-viewport"] { max-height: min(70dvh, 520px); padding: 0 22px 0 0; } .v-dock .v-dock__scroll > [data-slot="scroll-area-viewport"] > div { width: max-content; min-width: 100%; } .v-dock[data-variant="rail"] .v-dock__scroll > [data-slot="scroll-area-viewport"] > div { width: 100%; } } 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":[null,["$","$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/dock.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/dock.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/dock.css","content":"$51","type":"registry:file","target":"styles/cojeev/dock.css"}],"className":"h-[70svh] min-h-80"}]]}]