63: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 64: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 65:Tb51,import type { VelvetAccent } from "./types"; /** hi → base → lo: the bar's gradient runs top to bottom through these. */ export const ACCENT_PRESETS = { crimson: ["#F2202B", "#E00616", "#C8040F"], ember: ["#EE6A22", "#CC4708", "#AE3A04"], violet: ["#9B6BFF", "#7C4DFF", "#6236E0"], emerald: ["#22C58B", "#0FA972", "#0B8E60"], ice: ["#5CCBFF", "#2FB2F2", "#1795D6"], } as const satisfies Record; export type ResolvedAccent = { hi: string; base: string; lo: string; /** Text and glyphs on the bar: white when it reads at 4.5:1 or better, near-black otherwise. */ ink: string; /** "r g b" of the base, for the bloom and the tinted capsules. */ rgb: string; }; const INK_DARK = "#0b0b0d"; type Rgb = [number, number, number]; export function parseHex(hex: string): Rgb | null { const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim()); if (!m) return null; let h = m[1]; if (h.length === 3) h = h.replace(/./g, (c) => c + c); const n = parseInt(h, 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; } function toHex([r, g, b]: Rgb): string { return `#${[r, g, b].map((v) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, "0")).join("")}`.toUpperCase(); } function mix(a: Rgb, b: Rgb, t: number): Rgb { return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t]; } /** WCAG relative luminance. */ export function luminance([r, g, b]: Rgb): number { const ch = (v: number) => { const s = v / 255; return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; }; return 0.2126 * ch(r) + 0.7152 * ch(g) + 0.0722 * ch(b); } export function contrast(a: Rgb, b: Rgb): number { const la = luminance(a); const lb = luminance(b); return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05); } export function resolveAccent(accent: VelvetAccent = "crimson"): ResolvedAccent { const preset = (ACCENT_PRESETS as Record)[accent]; let hi: Rgb, base: Rgb, lo: Rgb; if (preset) { [hi, base, lo] = preset.map((c) => parseHex(c)!) as [Rgb, Rgb, Rgb]; } else { const parsed = parseHex(accent) ?? parseHex(ACCENT_PRESETS.crimson[1])!; base = parsed; hi = mix(parsed, [255, 255, 255], 0.12); lo = mix(parsed, [0, 0, 0], 0.1); } const ink = contrast(base, [255, 255, 255]) >= 4.5 ? "#FFFFFF" : INK_DARK; return { hi: toHex(hi), base: toHex(base), lo: toHex(lo), ink, rgb: base.map((v) => Math.round(v)).join(" "), }; } /** The CSS variables the stylesheet reads. */ export function accentVars(accent: VelvetAccent = "crimson"): Record { const a = resolveAccent(accent); return { "--vs-accent-hi": a.hi, "--vs-accent": a.base, "--vs-accent-lo": a.lo, "--vs-accent-ink": a.ink, "--vs-accent-rgb": a.rgb, }; } 66:T27f6,"use client"; import { ArrowLeftRight, Check, ChevronRight, Lock } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useVelvet } from "./context"; import { anchorFor, Popover, type ElementSource } from "./popover"; import type { VelvetProfile } from "./types"; function initials(name: string) { return name .split(/\s+/) .map((p) => p.charAt(0)) .join("") .slice(0, 2) .toUpperCase(); } /** A round photo with an initials fallback that only shows if the photo fails. */ export function Avatar({ profile, size, className }: { profile: VelvetProfile; size: number; className?: string }) { const [failed, setFailed] = React.useState(false); return ( {failed || !profile.avatar ? ( {initials(profile.name)} ) : ( // eslint-disable-next-line @next/next/no-img-element

setFailed(true)} /> )} ); } /** The card's photo: a new profile wipes in as a circle growing from the middle, over the old one. */ function WipeAvatar({ profile, reduced }: { profile: VelvetProfile; reduced: boolean }) { const [layers, setLayers] = React.useState([profile]); if (layers[layers.length - 1]?.id !== profile.id) setLayers([...layers.slice(-1), profile]); return ( {layers.map((p, i) => ( { if (i === layers.length - 1 && layers.length > 1) setLayers([p]); }} > ))} {profile.kids ? KIDS : null} ); } export function AccountCard({ profile, open, onOpen, buttonRef, controls, }: { profile: VelvetProfile; open: boolean; onOpen: () => void; buttonRef: React.RefObject; controls: string; }) { const { labels, collapsed, reduced, dir } = useVelvet(); return ( ); } function PinPad({ profile, onDone, onBack }: { profile: VelvetProfile; onDone: (pin: string) => Promise; onBack: () => void }) { const { labels } = useVelvet(); const [digits, setDigits] = React.useState(["", "", "", ""]); const [error, setError] = React.useState(false); const refs = React.useRef<(HTMLInputElement | null)[]>([]); React.useEffect(() => { refs.current[0]?.focus(); }, []); const set = (i: number, v: string) => { const d = v.replace(/\D/g, "").slice(-1); const next = [...digits]; next[i] = d; setDigits(next); setError(false); if (d && i < 3) refs.current[i + 1]?.focus(); if (next.every(Boolean)) { void onDone(next.join("")).then((ok) => { if (!ok) { setError(true); setDigits(["", "", "", ""]); refs.current[0]?.focus(); } }); } }; return (

{labels.enterPin(profile.name)}

{digits.map((d, i) => ( { refs.current[i] = el; }} className="vs-pin__box" inputMode="numeric" autoComplete="off" maxLength={1} value={d} aria-label={`${labels.enterPin(profile.name)}, ${i + 1} / 4`} onChange={(e) => set(i, e.target.value)} onKeyDown={(e) => { if (e.key === "Backspace" && !digits[i] && i > 0) refs.current[i - 1]?.focus(); }} /> ))}

{error ? labels.wrongPin : ""}

); } export function ProfileSwitcher({ open, anchorEl, profiles, current, onPick, onClose, onManage, verifyPin, returnFocus, id, }: { open: boolean; anchorEl: ElementSource; profiles: VelvetProfile[]; current: string; onPick: (id: string) => void; onClose: () => void; onManage?: () => void; verifyPin?: (id: string, pin: string) => boolean | Promise; returnFocus: React.RefObject; id: string; }) { const ctx = useVelvet(); const { labels } = ctx; const [locked, setLocked] = React.useState(null); const titleId = React.useId(); const [prevOpen, setPrevOpen] = React.useState(open); if (prevOpen !== open) { setPrevOpen(open); if (!open) setLocked(null); } return (

{labels.whoIsWatching}

{locked ? ( setLocked(null)} onDone={async (pin) => { const ok = verifyPin ? await verifyPin(locked.id, pin) : true; if (ok) onPick(locked.id); return ok; }} /> ) : (

{onManage ? ( ) : null} )} ); } 67:Tc22,"use client"; import { AnimatePresence, motion, useAnimate } from "motion/react"; import * as React from "react"; const ROLL = { type: "spring", stiffness: 520, damping: 38, mass: 0.7 } as const; const rollVariants = { enter: (dir: number) => ({ y: dir > 0 ? "105%" : "-105%", opacity: 0 }), center: { y: "0%", opacity: 1 }, exit: (dir: number) => ({ y: dir > 0 ? "-105%" : "105%", opacity: 0 }), }; export function formatCount(value: number, max = 99): string { return value > max ? `${max}+` : String(Math.max(0, Math.round(value))); } /** Digits that roll: each column keeps its place counted from the right, so only the digits that change move. */ export function RollingNumber({ value, max = 99 }: { value: number; max?: number }) { const text = formatCount(value, max); const [prev, setPrev] = React.useState(value); const [dir, setDir] = React.useState(1); if (prev !== value) { setPrev(value); setDir(value > prev ? 1 : -1); } const chars = text.split(""); return ( ); } function badgeWidth(text: string, size: "sm" | "md"): number { const unit = size === "sm" ? 6.1 : 6.8; const min = size === "sm" ? 16 : 18; return text.length <= 1 ? min : Math.round(text.length * unit + (size === "sm" ? 8 : 10)); } /** * A red count that pops when it goes up and rolls its digits. Width follows the digits with a spring, * so 9 → 10 widens the pill instead of jumping. */ export function CountBadge({ value, size = "md", className, reduced, }: { value: number; size?: "sm" | "md"; className?: string; reduced?: boolean; }) { const [scope, animateEl] = useAnimate(); const prev = React.useRef(value); React.useEffect(() => { if (value > prev.current && scope.current && !reduced) { animateEl(scope.current, { scale: [0.6, 1.14, 1] }, { duration: 0.46, ease: [0.2, 0.9, 0.3, 1.2], times: [0, 0.55, 1] }); } prev.current = value; }, [value, reduced, animateEl, scope]); const text = formatCount(value); return ( ); } 68:T504,"use client"; import * as React from "react"; import type { VelvetLabels } from "./types"; export type PopoverId = "profiles" | "notifications" | "search" | "logout"; export type VelvetContextValue = { labels: VelvetLabels; brandName: string; /** The rail is showing (collapsed and not peeking, never in the drawer). */ collapsed: boolean; mode: "frame" | "drawer"; /** The physical edge facing the page: popovers, flyouts and tooltips open past it. */ edge: "left" | "right"; dir: "ltr" | "rtl"; reduced: boolean; shellRef: React.RefObject; /** The glass element, read when a layer is placed (never while rendering). */ getShell: () => HTMLElement | null; /** Theme + accent for anything rendered outside the sidebar (popovers live in a portal). */ portal: { theme: "light" | "dark" | "auto"; style: React.CSSProperties }; announce: (message: string) => void; popover: PopoverId | null; setPopover: (id: PopoverId | null) => void; }; export const VelvetContext = React.createContext(null); export function useVelvet(): VelvetContextValue { const ctx = React.useContext(VelvetContext); if (!ctx) throw new Error("Velvet Sidebar parts must be rendered inside ."); return ctx; } 69:Tf5c,"use client"; import { ChevronLeft, Pin } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useVelvet } from "./context"; /** * The round control on the panel's free edge, half outside the glass. Its "Collapse" pill shows on hover and * focus (and once, briefly, on first visit), with the `[` hotkey beside it. */ export function EdgeToggle({ collapsed, peeking, hint, controls, onToggle, onPin, unread, }: { collapsed: boolean; peeking: boolean; hint: boolean; controls: string; onToggle: () => void; onPin: () => void; unread: number; }) { const { labels, edge, reduced } = useVelvet(); const [hover, setHover] = React.useState(false); const [focus, setFocus] = React.useState(false); const show = hover || focus || hint; // The chevron points the way the panel will move: toward the page edge to collapse, away from it to expand. const towardEdge = edge === "right" ? 0 : 180; const rotate = collapsed && !peeking ? towardEdge + 180 : towardEdge; const label = peeking ? labels.keepOpen : collapsed ? labels.expand : labels.collapse; const aria = peeking ? labels.keepOpen : collapsed ? unread > 0 ? `${labels.expandSidebar}, ${labels.notifications.toLowerCase()}: ${labels.unread(unread)}` : labels.expandSidebar : labels.collapseSidebar; return (

setHover(true)} onPointerLeave={() => setHover(false)} onFocus={(e) => { try { setFocus(e.currentTarget.matches(":focus-visible")); } catch { setFocus(true); } }} onBlur={() => setFocus(false)} whileHover={reduced ? undefined : { scale: 1.06 }} whileTap={reduced ? undefined : { scale: 0.94 }} transition={{ type: "spring", stiffness: 500, damping: 30 }} > {peeking ? ( ) : ( )} {collapsed && !peeking && unread > 0 ? {show ? ( ) : null}

); } 6a:T1658,"use client"; import { Play } from "lucide-react"; import { motion, useSpring } from "motion/react"; import * as React from "react"; import { CountBadge } from "./badge"; import { useVelvet } from "./context"; import { edgeAnchor, Floating, sidePlacement } from "./popover"; import type { VelvetItem } from "./types"; /** The collapsed rail's labels: a glass pill past the edge with the badge and the shortcut. Purely visual. */ export function RailTooltip({ open, item, getRow, }: { open: boolean; item: VelvetItem | undefined; getRow: (id: string) => HTMLElement | undefined; }) { const { edge, getShell } = useVelvet(); const id = item?.id; const anchor = React.useMemo(() => (id ? edgeAnchor(getShell, () => getRow(id), edge) : null), [id, getShell, getRow, edge]); const count = typeof item?.badge === "number" ? item.badge : 0; return ( {item ? ( <> {item.label} {count > 0 ? : null} {item.fresh ? {item.fresh === true ? "NEW" : `${item.fresh} NEW`} : null} {item.shortcut ? {item.shortcut} : null} ) : null} ); } function FadeImage({ src, className, alt = "" }: { src: string; className?: string; alt?: string }) { const [loaded, setLoaded] = React.useState(false); return ( // eslint-disable-next-line @next/next/no-img-element {alt}

setLoaded(true)} ref={(el) => { if (el?.complete && el.naturalWidth > 0 && !loaded) setLoaded(true); }} /> ); } /** Preview flyouts: what a row leads to, on pointer rest. Never the only way to reach anything (aria-hidden). */ export function Flyout({ open, item, getRow, onPointerEnter, onPointerLeave, }: { open: boolean; item: VelvetItem | undefined; getRow: (id: string) => HTMLElement | undefined; onPointerEnter: () => void; onPointerLeave: () => void; }) { const { edge, labels, getShell } = useVelvet(); const id = item?.id; const anchor = React.useMemo(() => (id ? edgeAnchor(getShell, () => getRow(id), edge) : null), [id, getShell, getRow, edge]); const rx = useSpring(0, { stiffness: 260, damping: 26 }); const ry = useSpring(0, { stiffness: 260, damping: 26 }); const preview = item?.preview; const onMove = (e: React.PointerEvent) => { const r = e.currentTarget.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width - 0.5; const py = (e.clientY - r.top) / r.height - 0.5; ry.set(px * 2.4); rx.set(-py * 2.4); }; const onLeave = () => { rx.set(0); ry.set(0); onPointerLeave(); }; return ( {item && preview ? ( <> {preview.kind !== "custom" && preview.title === item.label ? null : {item.label}} {preview.kind === "resume" ? ( <>

{preview.title} {preview.meta}

!preview.href && e.preventDefault()}> ) : preview.kind === "stack" ? ( <>

{preview.images.slice(0, 3).map((src, i) => ( ))}

{preview.title} {preview.meta}

) : ( preview.render() )} ) : null} ); } 6b:Te64,"use client"; import { animate, motion, useMotionValue, type MotionValue } from "motion/react"; import * as React from "react"; /** * The material, bottom to top: smoked glass (the only backdrop blur), grain against banding, a soft highlight that * follows the pointer, and a 1px gradient border drawn as an SVG stroke so it never thins round the corners. * The shadow lives outside the shell (see .vs-shadow) so nothing blurs or clips it. */ export function GlassLayers({ sheen }: { sheen: Sheen }) { const raw = React.useId(); const id = `vs-border-${raw.replace(/[^a-zA-Z0-9_-]/g, "")}`; return ( <>

); } export type Sheen = { x: MotionValue; y: MotionValue; opacity: MotionValue }; /** Pointer sheen: eased toward the pointer in one rAF loop, driven by motion values (no React renders). */ export function useSheen(target: React.RefObject, enabled: boolean): Sheen { const x = useMotionValue(140); const y = useMotionValue(-200); const opacity = useMotionValue(0); React.useEffect(() => { const el = target.current; if (!el || !enabled) return; let raf = 0; let tx = x.get(); let ty = y.get(); let fade: { stop(): void } | undefined; let first = true; const tick = () => { const cx = x.get(); const cy = y.get(); const nx = cx + (tx - cx) * 0.12; const ny = cy + (ty - cy) * 0.12; x.set(nx); y.set(ny); raf = Math.abs(tx - nx) + Math.abs(ty - ny) > 0.3 ? requestAnimationFrame(tick) : 0; }; const onMove = (e: PointerEvent) => { if (e.pointerType !== "mouse" && e.pointerType !== "pen") return; const r = el.getBoundingClientRect(); tx = e.clientX - r.left; ty = e.clientY - r.top; if (first) { // Enter where the pointer is, then follow: no glide in from the last place it left. x.set(tx); y.set(ty); first = false; fade?.stop(); fade = animate(opacity, 1, { duration: 0.3, ease: "easeOut" }); } if (!raf) raf = requestAnimationFrame(tick); }; const onLeave = () => { first = true; fade?.stop(); fade = animate(opacity, 0, { duration: 0.3, ease: "easeOut" }); }; el.addEventListener("pointermove", onMove, { passive: true }); el.addEventListener("pointerleave", onLeave); return () => { cancelAnimationFrame(raf); fade?.stop(); el.removeEventListener("pointermove", onMove); el.removeEventListener("pointerleave", onLeave); }; }, [target, enabled, x, y, opacity]); return { x, y, opacity }; } /** The 1px divider that is brightest in its middle and fades to nothing at both ends. */ export function GlowDivider({ className }: { className?: string }) { return

; } 6c:T15c0,"use client"; import { Bell } from "lucide-react"; import { motion, useAnimate } from "motion/react"; import * as React from "react"; import { CountBadge } from "./badge"; import { useVelvet } from "./context"; type Lights = { close?: () => void; minimize?: () => void; zoom?: () => void }; /** macOS window dots. A dot is a button only when it does something; then hovering the group shows its glyph. */ export function TrafficLights({ actions }: { actions: Lights }) { const { labels } = useVelvet(); const dots: { key: keyof Lights; label: string; glyph: React.ReactNode }[] = [ { key: "close", label: labels.windowClose, glyph: , }, { key: "minimize", label: labels.windowMinimize, glyph: }, { key: "zoom", label: labels.windowZoom, glyph: , }, ]; return (

{dots.map((d) => { const fn = actions[d.key]; const cls = `vs-light vs-light--${d.key}`; const svg = ( ); return fn ? ( ) : (

); } /** * The title folds into its first letter: the letter stays put and grows, the rest fades out behind a mask. * Offsets are measured, so any wordmark lands centred on the rail. */ export function Wordmark({ name, monogram, logo }: { name: string; monogram?: string; logo?: React.ReactNode }) { const { collapsed, dir } = useVelvet(); const letterRef = React.useRef(null); const [shift, setShift] = React.useState(0); const mono = monogram ?? name.charAt(0); // "Kinora" with monogram "K" splits into K + inora; a monogram that isn't the first letter swaps in instead. const splits = name.toLowerCase().startsWith(mono.toLowerCase()); const first = splits ? name.slice(0, mono.length) : mono; const rest = splits ? name.slice(mono.length) : name; React.useLayoutEffect(() => { const el = letterRef.current; if (!el) return; // The rail is 84px wide with its centre at 42px; the wordmark starts at 20px. const w = el.offsetWidth; const centre = 42 - 20 - w / 2; setShift(dir === "rtl" ? -centre : centre); }, [name, monogram, dir]); if (logo) { return ( {logo} ); } return ( {rest ? ( ) : null} ); } /** The bell swings when the count goes up; its badge pops and rolls. */ export const BellButton = React.forwardRef< HTMLButtonElement, { count: number; expanded: boolean; onClick: () => void; controls?: string } >(function BellButton({ count, expanded, onClick, controls }, ref) { const { labels, collapsed, reduced } = useVelvet(); const [scope, animateEl] = useAnimate(); const prev = React.useRef(count); React.useEffect(() => { if (count > prev.current && scope.current && !reduced) { animateEl( scope.current, { rotate: [0, 14, -11, 8, -5, 2, 0] }, { duration: 0.62, ease: "easeOut", times: [0, 0.15, 0.32, 0.5, 0.68, 0.84, 1] }, ); } prev.current = count; }, [count, reduced, animateEl, scope]); return ( 0 ? `${labels.notifications}, ${labels.unread(count)}` : labels.notifications} aria-haspopup="dialog" aria-expanded={expanded} aria-controls={expanded ? controls : undefined} onClick={onClick} tabIndex={collapsed ? -1 : 0} initial={false} animate={{ opacity: collapsed ? 0 : 1, scale: collapsed ? 0.8 : 1 }} transition={collapsed ? { duration: 0.12 } : { duration: 0.24, delay: 0.18 }} style={{ pointerEvents: collapsed ? "none" : undefined }} > {count > 0 ? : null} ); }); 6d:T15b9,"use client"; import * as React from "react"; import type { VelvetTheme } from "./types"; export const useIsoLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect; /** Controlled when `value` is given, uncontrolled otherwise, like a native input. */ export function useControllable(value: T | undefined, defaultValue: T, onChange?: (v: T) => void) { const [inner, setInner] = React.useState(defaultValue); const controlled = value !== undefined; const current = controlled ? (value as T) : inner; const onChangeRef = React.useRef(onChange); useIsoLayoutEffect(() => { onChangeRef.current = onChange; }); const set = React.useCallback( (next: T) => { if (!controlled) setInner(next); onChangeRef.current?.(next); }, [controlled], ); return [current, set, setInner] as const; } export function useMediaQuery(query: string): boolean { const subscribe = React.useCallback( (cb: () => void) => { const mq = window.matchMedia(query); mq.addEventListener("change", cb); return () => mq.removeEventListener("change", cb); }, [query], ); return React.useSyncExternalStore( subscribe, () => window.matchMedia(query).matches, () => false, ); } const noopSubscribe = () => () => {}; /** False on the server and during hydration, true afterwards. */ export function useIsClient(): boolean { return React.useSyncExternalStore( noopSubscribe, () => true, () => false, ); } /** Calls back when a class, data-theme or dir attribute changes anywhere in the document, or the system scheme does. */ function subscribeDocument(cb: () => void) { const mq = window.matchMedia("(prefers-color-scheme: dark)"); mq.addEventListener("change", cb); const mo = new MutationObserver(cb); mo.observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ["class", "data-theme", "dir"] }); return () => { mq.removeEventListener("change", cb); mo.disconnect(); }; } /** "auto" → the nearest .dark/.light or [data-theme] ancestor, then the system. Server render: null (CSS decides). */ export function useResolvedTheme(theme: VelvetTheme, rootRef: React.RefObject): "light" | "dark" | null { const auto = React.useSyncExternalStore( subscribeDocument, () => { const marked = rootRef.current?.parentElement?.closest(".dark, .light, [data-theme='dark'], [data-theme='light']"); if (marked) return marked.classList.contains("dark") || marked.getAttribute("data-theme") === "dark" ? "dark" : "light"; return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; }, () => null, ); return theme === "auto" ? auto : theme; } /** The writing direction the sidebar sits in, from the nearest [dir]. */ export function useDirection(rootRef: React.RefObject): "ltr" | "rtl" { return React.useSyncExternalStore( subscribeDocument, () => (rootRef.current?.closest("[dir]")?.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr"), () => "ltr", ); } const storeListeners = new Set<() => void>(); function subscribeStore(cb: () => void) { storeListeners.add(cb); window.addEventListener("storage", cb); return () => { storeListeners.delete(cb); window.removeEventListener("storage", cb); }; } /** A persisted value: null on the server and wherever storage is missing or blocked. */ export function useStored(key: string | undefined, field: string): string | null { return React.useSyncExternalStore( subscribeStore, () => readStore(key, field), () => null, ); } export function readStore(key: string | undefined, field: string): string | null { if (!key) return null; try { return window.localStorage.getItem(`${key}:${field}`); } catch { return null; } } export function writeStore(key: string | undefined, field: string, value: string) { if (!key) return; try { window.localStorage.setItem(`${key}:${field}`, value); } catch { /* private mode, blocked storage: the sidebar just forgets */ } storeListeners.forEach((cb) => cb()); } /** True while the user is typing somewhere a hotkey must not fire. */ export function isTypingTarget(target: EventTarget | null): boolean { if (!(target instanceof HTMLElement)) return false; if (target.isContentEditable) return true; const tag = target.tagName; if (tag === "TEXTAREA" || tag === "SELECT") return true; if (tag === "INPUT") { const type = (target as HTMLInputElement).type; return !["button", "checkbox", "radio", "range", "submit", "reset", "color", "file"].includes(type); } return false; } export function useLatest(value: T) { const ref = React.useRef(value); useIsoLayoutEffect(() => { ref.current = value; }); return ref; } /** Pointer-hover intent: fires after `delay` ms of rest, cancels on leave. */ export function useHoverIntent(delay: number) { const timer = React.useRef(undefined); React.useEffect(() => () => window.clearTimeout(timer.current), []); return React.useMemo( () => ({ start(fn: () => void, ms = delay) { window.clearTimeout(timer.current); timer.current = window.setTimeout(fn, ms); }, cancel() { window.clearTimeout(timer.current); }, }), [delay], ); } export function finePointer(): boolean { return typeof window !== "undefined" && window.matchMedia("(hover: hover) and (pointer: fine)").matches; } 6e:T64b,import type { VelvetLabels } from "./types"; export const defaultLabels: VelvetLabels = { nav: "Main", collapse: "Collapse", expand: "Expand", collapseSidebar: "Collapse sidebar", expandSidebar: "Expand sidebar", keepOpen: "Keep open", search: "Search", searchPlaceholder: "Search…", clearSearch: "Clear search", recent: "Recent", trending: "Trending", removeRecent: (q) => `Remove “${q}” from recent searches`, pages: "Go to", titles: "Titles", noResults: (q) => `Nothing matches “${q}”. Press Enter to search everywhere.`, switchAccount: "Switch account", whoIsWatching: "Who’s watching?", manageProfiles: "Manage profiles", kids: "Kids", enterPin: (name) => `Enter ${name}’s PIN`, wrongPin: "That PIN didn’t work", notifications: "Notifications", unread: (n) => (n === 1 ? "1 unread" : `${n} unread`), markAllRead: "Mark all as read", allCaughtUp: "You’re all caught up", allCaughtUpBody: "New episodes and reminders land here.", signOutQuestion: (brand) => `Sign out of ${brand} on this device?`, signOut: "Sign out", signedOut: "Signed out", cancel: "Cancel", resume: "Resume", newCount: (n) => `${n} new`, isNew: "New", badgeCount: (label, n) => `${label}, ${n} new`, openMenu: "Open menu", closeMenu: "Close menu", windowClose: "Close", windowMinimize: "Collapse", windowZoom: "Expand", collapsed: "Sidebar collapsed", expanded: "Sidebar expanded", switchedTo: (name) => `Switched to ${name}`, markedRead: (n) => (n === 1 ? "1 notification marked as read" : `${n} notifications marked as read`), }; 6f:Taf3,"use client"; import { Check, LoaderCircle, LogOut } from "lucide-react"; import * as React from "react"; import { useVelvet } from "./context"; import { anchorFor, Popover } from "./popover"; type State = "idle" | "busy" | "done"; export function LogoutConfirm({ open, rowId, getRow, returnFocus, onClose, onLogout, }: { open: boolean; rowId: string | null; getRow: (id: string) => HTMLElement | undefined; returnFocus: React.RefObject; onClose: () => void; onLogout?: () => void | Promise; }) { const ctx = useVelvet(); const { labels, brandName, announce } = ctx; const [state, setState] = React.useState("idle"); const cancelRef = React.useRef(null); const titleId = React.useId(); const { mode, edge, getShell } = ctx; const anchor = React.useMemo( () => anchorFor({ mode, edge, getShell }, () => (rowId ? getRow(rowId) : null)), [mode, edge, getShell, rowId, getRow], ); const [prevOpen, setPrevOpen] = React.useState(open); if (prevOpen !== open) { setPrevOpen(open); if (open) setState("idle"); } const confirm = async () => { if (state !== "idle") return; try { const result = onLogout?.(); if (result && typeof (result as Promise).then === "function") { setState("busy"); await result; } setState("done"); announce(labels.signedOut); window.setTimeout(onClose, 700); } catch { setState("idle"); } }; return ( state !== "busy" && onClose()} dialog labelledBy={titleId} initialFocus={cancelRef} returnFocus={returnFocus} className="vs-pop vs-confirm" >

{labels.signOutQuestion(brandName)}

); } 70:T1624,"use client"; import { animate, motion, useMotionValue, useTransform, type PanInfo } from "motion/react"; import * as React from "react"; import { useVelvet } from "./context"; import { VelvetPortal } from "./popover"; const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'; /** The phone trigger: three lines that fold into an ×. */ export const MenuTrigger = React.forwardRef void; controls: string }>( function MenuTrigger({ open, onClick, controls }, ref) { const { labels, edge } = useVelvet(); const t = { type: "spring", stiffness: 420, damping: 30 } as const; return ( ); }, ); /** * The off-canvas drawer: slides in on a spring over a scrim, follows the finger when swiped closed, traps focus, * locks the page's scroll and closes on Esc. */ export function Drawer({ open, onClose, returnFocus, children, id, }: { open: boolean; onClose: () => void; returnFocus: React.RefObject; children: React.ReactNode; id: string; }) { const { edge, reduced, labels } = useVelvet(); // The drawer sits on the side opposite its free edge. const fromLeft = edge === "right"; const panelRef = React.useRef(null); const width = React.useRef(320); const x = useMotionValue(fromLeft ? -400 : 400); const scrim = useTransform(() => { const w = width.current || 320; return Math.max(0, 1 - Math.abs(x.get()) / w); }); const [mounted, setMounted] = React.useState(open); if (open && !mounted) setMounted(true); React.useEffect(() => { if (!mounted) return; const w = panelRef.current?.offsetWidth ?? 320; width.current = w; const target = open ? 0 : fromLeft ? -w - 24 : w + 24; if (open && Math.abs(x.get()) < 1) x.jump(fromLeft ? -w - 24 : w + 24); const a = animate(x, target, reduced ? { duration: 0.16 } : { type: "spring", stiffness: 340, damping: 34 }); if (!open) a.then(() => setMounted(false)); return () => a.stop(); }, [open, mounted, fromLeft, reduced, x]); React.useEffect(() => { if (!open) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; const ret = returnFocus.current; const raf = requestAnimationFrame(() => { const first = panelRef.current?.querySelector('[aria-current="page"]') ?? panelRef.current?.querySelector(FOCUSABLE); first?.focus({ preventScroll: true }); }); const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); onClose(); } }; document.addEventListener("keydown", onKey); return () => { cancelAnimationFrame(raf); document.body.style.overflow = prev; document.removeEventListener("keydown", onKey); ret?.focus({ preventScroll: true }); }; }, [open, onClose, returnFocus]); const onKeyDown = (e: React.KeyboardEvent) => { if (e.key !== "Tab" || !panelRef.current) return; const items = [...panelRef.current.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null); if (!items.length) return; const first = items[0]; const last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; const onDragEnd = (_: unknown, info: PanInfo) => { const w = width.current; const dist = fromLeft ? -info.offset.x : info.offset.x; const vel = fromLeft ? -info.velocity.x : info.velocity.x; if (dist > w * 0.4 || vel > 500) onClose(); else animate(x, 0, { type: "spring", stiffness: 420, damping: 36 }); }; if (!mounted) return null; return ( ); } 71:T43be,"use client"; import { animate, motion, useMotionValue, useSpring, useTransform } from "motion/react"; import * as React from "react"; import { CountBadge } from "./badge"; import { useVelvet } from "./context"; import { Flyout, RailTooltip } from "./flyout"; import { finePointer, useIsoLayoutEffect } from "./hooks"; import { LogoutConfirm } from "./logout-confirm"; import type { VelvetItem, VelvetLinkProps, VelvetSection } from "./types"; type Pos = { t: number; b: number }; const LEAD = { type: "spring", stiffness: 620, damping: 44, mass: 1 } as const; const TRAIL = { type: "spring", stiffness: 380, damping: 36, mass: 1 } as const; const GHOST = { stiffness: 380, damping: 36, mass: 1 }; const BLOOM_H = 124; type NavListProps = { sections: VelvetSection[]; value: string; onSelect: (item: VelvetItem) => void; onLogout?: () => void | Promise; renderLink?: (props: VelvetLinkProps) => React.ReactNode; }; export function NavList({ sections, value, onSelect, onLogout, renderLink }: NavListProps) { const ctx = useVelvet(); const { collapsed, reduced } = ctx; const listRef = React.useRef(null); const pos = React.useRef(new Map()); const rowEls = React.useRef(new Map()); const items = React.useMemo(() => sections.flatMap((s) => s.items), [sections]); const enabled = React.useMemo(() => items.filter((i) => !i.disabled), [items]); // ── The bar: two edges on two springs, so it stretches toward where it's going and the tail catches up. ── const top = useMotionValue(0); const bottom = useMotionValue(0); const barOpacity = useMotionValue(0); const height = useTransform(() => bottom.get() - top.get()); const bloomY = useTransform(() => (top.get() + bottom.get()) / 2 - BLOOM_H / 2); const placed = React.useRef(false); const valueRef = React.useRef(value); // ── The hover glow: a softer spring, full-bleed like the bar. ── const ghostY = useSpring(0, GHOST); const ghostH = useSpring(46, GHOST); const ghostO = useMotionValue(0); const ghostOn = React.useRef(null); const measure = React.useCallback(() => { const list = listRef.current; if (!list) return; const base = list.getBoundingClientRect().top; pos.current.clear(); rowEls.current.clear(); list.querySelectorAll("[data-row-id]").forEach((el) => { const r = el.getBoundingClientRect(); const id = el.dataset.rowId!; pos.current.set(id, { t: r.top - base, b: r.bottom - base }); rowEls.current.set(id, el); }); }, []); const light = React.useCallback(() => { // The row the bar's middle is in turns white; timed to the bar, not to the click. const c = (top.get() + bottom.get()) / 2; const visible = barOpacity.get() > 0.01; rowEls.current.forEach((el, id) => { const p = pos.current.get(id); const lit = visible && !!p && c >= p.t && c < p.b; if (lit !== el.hasAttribute("data-lit")) el.toggleAttribute("data-lit", lit); }); }, [top, bottom, barOpacity]); const place = React.useCallback( (animated: boolean) => { const p = pos.current.get(valueRef.current); if (!p) { animate(barOpacity, 0, { duration: 0.15 }); light(); return; } if (!animated || !placed.current) { top.jump(p.t); bottom.jump(p.b); barOpacity.jump(1); placed.current = true; light(); return; } if (barOpacity.get() < 1) animate(barOpacity, 1, { duration: 0.15 }); if (reduced) { top.jump(p.t); bottom.jump(p.b); animate(barOpacity, [0.35, 1], { duration: 0.12 }); light(); return; } const down = p.t > top.get(); animate(top, p.t, down ? TRAIL : LEAD); animate(bottom, p.b, down ? LEAD : TRAIL); }, [top, bottom, barOpacity, reduced, light], ); useIsoLayoutEffect(() => { measure(); place(false); }, [measure, place, sections]); useIsoLayoutEffect(() => { if (valueRef.current === value) return; valueRef.current = value; place(true); }, [value, place]); React.useEffect(() => { const list = listRef.current; if (!list) return; const ro = new ResizeObserver(() => { measure(); place(false); }); ro.observe(list); const unsubT = top.on("change", light); const unsubB = bottom.on("change", light); return () => { ro.disconnect(); unsubT(); unsubB(); }; }, [measure, place, light, top, bottom]); const moveGhost = React.useCallback( (id: string | null) => { if (!id) { ghostOn.current = null; animate(ghostO, 0, { duration: 0.18 }); return; } const p = pos.current.get(id); if (!p) return; const wasHidden = ghostOn.current === null || ghostO.get() < 0.05; if (wasHidden || reduced) { ghostY.jump(p.t); ghostH.jump(p.b - p.t); } else { ghostY.set(p.t); ghostH.set(p.b - p.t); } ghostOn.current = id; animate(ghostO, id === valueRef.current ? 0 : 1, { duration: 0.12 }); }, [ghostO, ghostY, ghostH, reduced], ); // ── Rail tooltips and preview flyouts (pointer only). ── const [tip, setTip] = React.useState<{ id: string; via: "pointer" | "focus" } | null>(null); const [fly, setFly] = React.useState(null); const tipTimer = React.useRef(undefined); const flyTimer = React.useRef(undefined); const flyClose = React.useRef(undefined); const warm = React.useRef(false); const warmTimer = React.useRef(undefined); React.useEffect( () => () => { window.clearTimeout(tipTimer.current); window.clearTimeout(flyTimer.current); window.clearTimeout(flyClose.current); window.clearTimeout(warmTimer.current); }, [], ); const [prevCollapsed, setPrevCollapsed] = React.useState(collapsed); if (prevCollapsed !== collapsed) { setPrevCollapsed(collapsed); setTip(null); setFly(null); } const rowFromEvent = (e: React.SyntheticEvent) => (e.target as HTMLElement).closest("[data-row-id]")?.dataset.rowId ?? null; const onPointerOver = (e: React.PointerEvent) => { if (e.pointerType === "touch") return; const id = rowFromEvent(e); if (!id || ghostOn.current === id) return; const item = items.find((i) => i.id === id); if (!item || item.disabled) return; moveGhost(id); window.clearTimeout(flyClose.current); window.clearTimeout(tipTimer.current); window.clearTimeout(flyTimer.current); if (item.preview && finePointer()) { if (fly && fly !== id) setFly(null); flyTimer.current = window.setTimeout(() => setFly(id), 280); setTip(null); } else { if (fly) flyClose.current = window.setTimeout(() => setFly(null), 120); if (collapsed) { if (warm.current) setTip({ id, via: "pointer" }); else tipTimer.current = window.setTimeout(() => setTip({ id, via: "pointer" }), 300); } } }; const onPointerLeave = () => { moveGhost(null); window.clearTimeout(tipTimer.current); window.clearTimeout(flyTimer.current); flyClose.current = window.setTimeout(() => setFly(null), 160); if (tip?.via === "pointer") { warm.current = true; setTip(null); window.clearTimeout(warmTimer.current); warmTimer.current = window.setTimeout(() => (warm.current = false), 600); } }; React.useEffect(() => { if (tip) warm.current = true; }, [tip]); const onFocus = (e: React.FocusEvent) => { const id = rowFromEvent(e); if (!id) return; const el = e.target as HTMLElement; let visible = false; try { visible = el.matches(":focus-visible"); } catch { visible = false; } if (visible) { moveGhost(id); if (collapsed) setTip({ id, via: "focus" }); } }; const onBlur = (e: React.FocusEvent) => { if (listRef.current?.contains(e.relatedTarget as Node)) return; moveGhost(null); if (tip?.via === "focus") setTip(null); }; // ── Roving focus: the list is one tab stop; arrows, Home and End move inside it. ── const [focusId, setFocusId] = React.useState(null); const tabStop = focusId && enabled.some((i) => i.id === focusId) ? focusId : (enabled.find((i) => i.id === value) ?? enabled[0])?.id; const onKeyDown = (e: React.KeyboardEvent) => { const id = rowFromEvent(e); if (!id) return; const idx = enabled.findIndex((i) => i.id === id); let next = -1; if (e.key === "ArrowDown") next = (idx + 1) % enabled.length; else if (e.key === "ArrowUp") next = (idx - 1 + enabled.length) % enabled.length; else if (e.key === "Home") next = 0; else if (e.key === "End") next = enabled.length - 1; else if (e.key === "Escape" && tip) { setTip(null); return; } else return; e.preventDefault(); const target = enabled[next]; setFocusId(target.id); rowEls.current.get(target.id)?.focus(); }; const getRow = React.useCallback((id: string) => rowEls.current.get(id), []); // ── Log out confirm. ── const [logoutRow, setLogoutRow] = React.useState(null); const logoutReturn = React.useRef(null); const select = (item: VelvetItem, el: HTMLElement) => (e: React.MouseEvent) => { if (item.disabled) { e.preventDefault(); return; } setFocusId(item.id); setTip(null); setFly(null); if (item.action === "logout") { e.preventDefault(); logoutReturn.current = el; setLogoutRow(item.id); ctx.setPopover("logout"); return; } onSelect(item); }; let index = 0; const tipItem = tip ? items.find((i) => i.id === tip.id) : undefined; const flyItem = fly ? items.find((i) => i.id === fly) : undefined; return (

{sections.map((section, si) => { const headingId = `vs-sec-${section.id}`; return (

{si > 0 ?

: null}

{section.label} {si === 0 ? ( // Later sections already have a divider above them; only the first gets a dash in the rail.

); })} window.clearTimeout(flyClose.current)} onPointerLeave={() => (flyClose.current = window.setTimeout(() => setFly(null), 160))} /> ctx.setPopover(null)} onLogout={onLogout} />

); } function ProgressChip({ progress, icon: Icon }: { progress: number; icon: VelvetItem["icon"] }) { const r = 14; return ( ); } type RowProps = { item: VelvetItem; active: boolean; index: number; tabIndex: number; onSelect: (item: VelvetItem, el: HTMLElement) => (e: React.MouseEvent) => void; renderLink?: (props: VelvetLinkProps) => React.ReactNode; }; const Row = React.memo(function Row({ item, active, index, tabIndex, onSelect, renderLink }: RowProps) { const { collapsed, labels, dir } = useVelvet(); const Icon = item.icon; const count = typeof item.badge === "number" ? item.badge : 0; const away = dir === "rtl" ? 6 : -6; const icon = item.chip ? ( typeof item.progress === "number" ? ( ) : ( ) ) : ( ); const content = ( <> {icon} {item.badge !== undefined && (count > 0 || item.badge === "dot") ? ( {item.label} {item.fresh ? ( {item.fresh === true ? labels.isNew : labels.newCount(item.fresh)} ) : null} {item.badge === "dot" ? {count > 0 ? {labels.badgeCount(item.label, count)} : null} ); const common = { className: "vs-row", "data-row-id": item.id, "data-active": active ? "" : undefined, "data-chip": item.chip ? "" : undefined, tabIndex, "aria-current": active ? ("page" as const) : undefined, "aria-disabled": item.disabled ? ("true" as const) : undefined, }; const ref = React.useRef(null); const handle = (e: React.MouseEvent) => onSelect(item, e.currentTarget)(e); if (item.href && !item.action) { if (renderLink) { return <>{renderLink({ ...common, href: item.href, onClick: handle, children: content })}; } return ( }> {content} ); } return ( ); }); 72:T12d0,"use client"; import { motion } from "motion/react"; import * as React from "react"; import { useVelvet } from "./context"; import { anchorFor, Popover, type ElementSource } from "./popover"; import type { VelvetNotification } from "./types"; function EmptyBell() { const raw = React.useId(); const id = raw.replace(/[^a-zA-Z0-9_-]/g, ""); return ( ); } export function NotificationsPopover({ open, anchorEl, items, readIds, onRead, onReadAll, onClose, returnFocus, id, }: { open: boolean; anchorEl: ElementSource; items: VelvetNotification[]; readIds: Set; onRead: (id: string) => void; onReadAll: () => void; onClose: () => void; returnFocus: React.RefObject; id: string; }) { const ctx = useVelvet(); const { labels } = ctx; const titleId = React.useId(); const anyUnread = items.some((n) => n.unread && !readIds.has(n.id)); return (

{labels.notifications}

{items.length > 0 ? ( ) : null}

{items.length === 0 ? (

{labels.allCaughtUp}

{labels.allCaughtUpBody}

) : (

)} {n.title} {n.body ? {n.body} : null} {n.time} {unread ? : null} ); return ( {n.href ? ( onRead(n.id)}> {inner} ) : ( )} ); })}

)} ); } 73:T2317,"use client"; import { autoUpdate, flip, offset as offsetMw, shift, useFloating, type Placement, type VirtualElement } from "@floating-ui/react-dom"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { createPortal } from "react-dom"; import { useVelvet } from "./context"; import { useIsClient, useLatest } from "./hooks"; /** Popovers, flyouts and tooltips render here, outside the sidebar, with its theme, accent and direction. */ export function VelvetPortal({ children }: { children: React.ReactNode }) { const { portal, dir } = useVelvet(); const client = useIsClient(); if (!client) return null; return createPortal(

{children}

, document.body, ); } /** Where an anchor's element comes from: read only when the layer is placed, never while rendering. */ export type ElementSource = () => HTMLElement | null | undefined; const EMPTY = { x: 0, y: 0, top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 }; /** A zero-width anchor on the sidebar's free edge, level with the element: things open just past the glass. */ export function edgeAnchor(shell: ElementSource, el: ElementSource, edge: "left" | "right"): VirtualElement { return { get contextElement() { return el() ?? undefined; }, getBoundingClientRect() { const s = shell(); const node = el(); if (!s || !node) return EMPTY; const sr = s.getBoundingClientRect(); const r = node.getBoundingClientRect(); const x = edge === "right" ? sr.right : sr.left; return { x, y: r.top, top: r.top, bottom: r.bottom, left: x, right: x, width: 0, height: r.height }; }, }; } /** The element itself, read lazily. */ export function elementAnchor(el: ElementSource): VirtualElement { return { get contextElement() { return el() ?? undefined; }, getBoundingClientRect() { return el()?.getBoundingClientRect() ?? EMPTY; }, }; } /** Desktop: just past the glass on the free edge. Drawer (phones): under the trigger, kept on screen. */ export function anchorFor( ctx: { mode: "frame" | "drawer"; edge: "left" | "right"; getShell: ElementSource }, el: ElementSource, align?: "start" | "end", ): { anchor: VirtualElement; placement: Placement; offset: number } { if (ctx.mode === "drawer") return { anchor: elementAnchor(el), placement: "bottom", offset: 8 }; return { anchor: edgeAnchor(ctx.getShell, el, ctx.edge), placement: sidePlacement(ctx.edge, align), offset: 14 }; } export function sidePlacement(edge: "left" | "right", align?: "start" | "end"): Placement { return (align ? `${edge}-${align}` : edge) as Placement; } const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'; type FloatingProps = { anchor: VirtualElement | null; placement: Placement; offset?: number; className?: string; style?: React.CSSProperties; children: React.ReactNode; /** Motion for the glass itself (opacity and transform on the same element as its blur, never on a parent). */ enter?: "slide" | "drop"; /** A callback ref for the positioned wrapper. */ boxRef?: (node: HTMLDivElement | null) => void; wrapperProps?: React.HTMLAttributes & { [key: `data-${string}`]: string | undefined }; }; function FloatingBox({ anchor, placement, offset = 12, className, style, children, enter = "slide", boxRef, wrapperProps }: FloatingProps) { const { refs, floatingStyles, placement: finalPlacement } = useFloating({ placement, strategy: "fixed", elements: { reference: anchor }, middleware: [offsetMw(offset), flip({ padding: 12 }), shift({ padding: 12 })], whileElementsMounted: autoUpdate, }); const setFloating = refs.setFloating; const setRef = React.useCallback( (node: HTMLDivElement | null) => { setFloating(node); boxRef?.(node); }, [setFloating, boxRef], ); const side = finalPlacement.split("-")[0]; const dx = side === "right" ? -8 : side === "left" ? 8 : 0; const dy = side === "bottom" ? -6 : side === "top" ? 6 : 0; const origin = side === "right" ? "left center" : side === "left" ? "right center" : side === "bottom" ? "top center" : "bottom center"; return (

{children}

); } /** A floating layer with no behaviour: tooltips and flyouts. */ export function Floating(props: FloatingProps & { open: boolean }) { const { open, ...rest } = props; return ( {open && rest.anchor ? : null} ); } type PopoverProps = Omit & { open: boolean; onClose: (reason: "escape" | "outside") => void; /** Elements whose clicks don't count as "outside" (the trigger). */ ignore?: React.RefObject[]; /** Dialog semantics: focus moves in, Tab stays inside, focus returns to `returnFocus` on close. */ dialog?: boolean; label?: string; labelledBy?: string; initialFocus?: React.RefObject; returnFocus?: React.RefObject; id?: string; children: React.ReactNode; }; function PopoverInner({ onClose, ignore, dialog, label, labelledBy, initialFocus, returnFocus, id, children, ...floating }: Omit) { const boxRef = React.useRef(null); const setBox = React.useCallback((node: HTMLDivElement | null) => { boxRef.current = node; }, []); const onCloseRef = useLatest(onClose); const ignoreRef = useLatest(ignore); React.useEffect(() => { const onPointer = (e: PointerEvent) => { const t = e.target as Node; if (boxRef.current?.contains(t)) return; if (ignoreRef.current?.some((r) => r.current?.contains(t))) return; onCloseRef.current("outside"); }; const onKey = (e: KeyboardEvent) => { if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); e.stopPropagation(); onCloseRef.current("escape"); } }; document.addEventListener("pointerdown", onPointer, true); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("pointerdown", onPointer, true); document.removeEventListener("keydown", onKey); }; }, [onCloseRef, ignoreRef]); React.useEffect(() => { if (!dialog) return; const box = boxRef.current; const ret = returnFocus?.current ?? (document.activeElement as HTMLElement | null); const raf = requestAnimationFrame(() => { const target = initialFocus?.current ?? box?.querySelector(FOCUSABLE) ?? box; target?.focus({ preventScroll: true }); }); return () => { cancelAnimationFrame(raf); const active = document.activeElement; // Only take focus back if it was inside the popover (or got lost): never steal it from where the user went. if (!active || active === document.body || box?.contains(active)) ret?.focus({ preventScroll: true }); }; }, [dialog, initialFocus, returnFocus]); const onKeyDown = (e: React.KeyboardEvent) => { if (!dialog || e.key !== "Tab" || !boxRef.current) return; const items = [...boxRef.current.querySelectorAll(FOCUSABLE)].filter((el) => el.offsetParent !== null); if (items.length === 0) return; const first = items[0]; const last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; return ( {children} ); } export function Popover({ open, ...rest }: PopoverProps) { return ( {open && rest.anchor ? : null} ); } 74:T2e3b,"use client"; import type { VirtualElement } from "@floating-ui/react-dom"; import { ArrowUpRight, Clock, Ticket, TrendingUp, X } from "lucide-react"; import { AnimatePresence, motion } from "motion/react"; import * as React from "react"; import { useVelvet } from "./context"; import { Popover } from "./popover"; import type { VelvetItem, VelvetSearch } from "./types"; export type SearchHandle = { focus(): void }; type Option = | { kind: "recent"; id: string; text: string } | { kind: "trending"; id: string; text: string } | { kind: "page"; id: string; text: string; item: VelvetItem } | { kind: "title"; id: string; text: string }; function Highlight({ text, query }: { text: string; query: string }) { const q = query.trim(); if (!q) return <>{text}; const i = text.toLowerCase().indexOf(q.toLowerCase()); if (i < 0) return <>{text}; return ( <> {text.slice(0, i)} {text.slice(i, i + q.length)} {text.slice(i + q.length)} ); } export const SearchRow = React.forwardRef< SearchHandle, { search: VelvetSearch; items: VelvetItem[]; onNavigate: (item: VelvetItem) => void; onExpand: () => void } >(function SearchRow({ search, items, onNavigate, onExpand }, ref) { const { labels, collapsed, shellRef, dir } = useVelvet(); const inputRef = React.useRef(null); const fieldRef = React.useRef(null); const [query, setQuery] = React.useState(""); const [open, setOpen] = React.useState(false); const [active, setActive] = React.useState(0); const [recent, setRecent] = React.useState(() => (search.recent ?? []).slice(0, 3)); const listId = React.useId(); const focusField = React.useCallback(() => { if (collapsed) { onExpand(); // The field fades in with the expand; focus it at once so typing starts right away. requestAnimationFrame(() => inputRef.current?.focus()); } else inputRef.current?.focus(); }, [collapsed, onExpand]); React.useImperativeHandle(ref, () => ({ focus: focusField }), [focusField]); const [prevCollapsed, setPrevCollapsed] = React.useState(collapsed); if (prevCollapsed !== collapsed) { setPrevCollapsed(collapsed); if (collapsed) setOpen(false); } const q = query.trim().toLowerCase(); const options: Option[] = React.useMemo(() => { if (!q) { return [ ...recent.map((text, i) => ({ kind: "recent" as const, id: `r${i}`, text })), ...(search.trending ?? []).slice(0, 4).map((text, i) => ({ kind: "trending" as const, id: `t${i}`, text })), ]; } const pages = items .filter((i) => !i.disabled && !i.action && i.label.toLowerCase().includes(q)) .slice(0, 4) .map((item) => ({ kind: "page" as const, id: `p-${item.id}`, text: item.label, item })); const titles = (search.titles ?? []) .filter((t) => t.toLowerCase().includes(q)) .slice(0, 5) .map((text, i) => ({ kind: "title" as const, id: `ti${i}`, text })); return [...pages, ...titles]; }, [q, recent, search.trending, search.titles, items]); const [prevQ, setPrevQ] = React.useState(q); if (prevQ !== q) { setPrevQ(q); setActive(0); } const submit = (text: string) => { const t = text.trim(); if (!t) return; setRecent((prev) => [t, ...prev.filter((p) => p.toLowerCase() !== t.toLowerCase())].slice(0, 3)); search.onSubmit?.(t); setOpen(false); }; const choose = (o: Option) => { if (o.kind === "page") { onNavigate(o.item); setQuery(""); setOpen(false); inputRef.current?.blur(); return; } setQuery(o.text); submit(o.text); }; // One handler for the whole list: an option knows its index. const onListClick = (e: React.MouseEvent) => { const el = (e.target as HTMLElement).closest("[data-idx]"); const o = el ? options[Number(el.dataset.idx)] : undefined; if (o) choose(o); }; const removeRecent = (text: string) => setRecent((prev) => prev.filter((p) => p !== text)); const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); if (!open) setOpen(true); const n = options.length; if (n) setActive((a) => (e.key === "ArrowDown" ? (a + 1) % n : (a - 1 + n) % n)); } else if (e.key === "Enter") { e.preventDefault(); const o = open ? options[active] : undefined; if (o && (q === "" || o.kind === "page" || o.kind === "title")) choose(o); else submit(query); } else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); if (open) setOpen(false); else if (query) setQuery(""); else inputRef.current?.blur(); } else if (e.key === "Delete" && open && options[active]?.kind === "recent") { e.preventDefault(); removeRecent(options[active].text); } }; const anchor: VirtualElement = React.useMemo(() => { return { get contextElement() { return fieldRef.current ?? undefined; }, getBoundingClientRect() { const s = shellRef.current?.getBoundingClientRect(); const f = fieldRef.current?.getBoundingClientRect(); if (!s || !f) return new DOMRect(); // Under the field, as wide as the panel's inside: the list overlays the rows below. const left = s.left + 12; const width = Math.min(s.width, 288) - 24; return { x: left, y: f.top, left, top: f.top, right: left + width, bottom: f.bottom, width, height: f.height }; }, }; }, [shellRef]); const activeId = open && options[active] ? `${listId}-${options[active].id}` : undefined; const groups: { title: string; kind: Option["kind"][] }[] = q ? [ { title: labels.pages, kind: ["page"] }, { title: labels.titles, kind: ["title"] }, ] : [ { title: labels.recent, kind: ["recent"] }, { title: labels.trending, kind: ["trending"] }, ]; return (

{ setQuery(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onBlur={(e) => { // Leaving the field for anything but the list closes it (the list's own clicks keep focus here). if (!(e.relatedTarget as HTMLElement | null)?.closest?.(".vs-results")) setOpen(false); }} onKeyDown={onKeyDown} /> {query ? ( { setQuery(""); inputRef.current?.focus(); }} initial={{ opacity: 0, scale: 0.7 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.7 }} tabIndex={-1} > ) : ( )} 0 || !!q)} anchor={anchor} placement="bottom-start" offset={8} onClose={() => setOpen(false)} ignore={[fieldRef]} className="vs-pop vs-results" enter="drop" label={labels.search} >

); }); 75:T1742,import type * as React from "react"; /** Any icon component: lucide-react's, or your own SVG that takes a className. */ export type VelvetIcon = React.ComponentType<{ className?: string; strokeWidth?: number; fill?: string; "aria-hidden"?: boolean | "true" | "false"; }>; /** What a row shows when the pointer rests on it (fine pointers only; never the only way to reach anything). */ export type VelvetPreview = | { kind: "resume"; title: string; meta: string; image: string; progress: number; href?: string } | { kind: "stack"; title: string; meta: string; images: string[]; href?: string } | { kind: "custom"; render: () => React.ReactNode }; export type VelvetItem = { id: string; label: string; icon: VelvetIcon; /** A link row. Without it the row is a button and only reports the choice through `onValueChange`. */ href?: string; /** The icon sits in a round chip: chips mark actions on your own things (resume, add, rate), bare glyphs mark places. */ chip?: boolean; /** A red count (capped at 99+) or a dot. */ badge?: number | "dot"; /** 0..1: a progress ring round the chip (Continue watching). */ progress?: number; /** A "3 NEW" capsule, or "NEW" with `true`. */ fresh?: number | true; preview?: VelvetPreview; /** Shown in the collapsed rail's tooltips, e.g. "G H". */ shortcut?: string; /** The Log out row: opens a confirm instead of navigating. */ action?: "logout"; disabled?: boolean; }; export type VelvetSection = { id: string; label: string; items: VelvetItem[] }; export type VelvetProfile = { id: string; name: string; avatar: string; kids?: boolean; locked?: boolean }; export type VelvetNotification = { id: string; title: string; body?: string; image?: string; time: string; unread?: boolean; href?: string; }; export type VelvetSearch = { placeholder?: string; recent?: string[]; trending?: string[]; /** Titles to match while typing, beside the sidebar's own items. */ titles?: string[]; onSubmit?: (query: string) => void; }; export type VelvetAccent = "crimson" | "ember" | "violet" | "emerald" | "ice" | (string & {}); export type VelvetTheme = "dark" | "light" | "auto"; export type VelvetLinkProps = { href: string; className: string; children: React.ReactNode; "aria-current"?: "page"; onClick: React.MouseEventHandler; onKeyDown?: React.KeyboardEventHandler; tabIndex: number; "data-row-id": string; [key: `data-${string}`]: string | undefined; [key: `aria-${string}`]: string | undefined; }; export type VelvetLabels = { nav: string; collapse: string; expand: string; collapseSidebar: string; expandSidebar: string; keepOpen: string; search: string; searchPlaceholder: string; clearSearch: string; recent: string; trending: string; removeRecent: (query: string) => string; pages: string; titles: string; noResults: (query: string) => string; switchAccount: string; whoIsWatching: string; manageProfiles: string; kids: string; enterPin: (name: string) => string; wrongPin: string; notifications: string; unread: (count: number) => string; markAllRead: string; allCaughtUp: string; allCaughtUpBody: string; signOutQuestion: (brand: string) => string; signOut: string; signedOut: string; cancel: string; resume: string; newCount: (count: number) => string; isNew: string; badgeCount: (label: string, count: number) => string; openMenu: string; closeMenu: string; windowClose: string; windowMinimize: string; windowZoom: string; collapsed: string; expanded: string; switchedTo: (name: string) => string; markedRead: (count: number) => string; }; export type VelvetSidebarProps = { brand: { name: string; monogram?: string; logo?: React.ReactNode }; sections: VelvetSection[]; value?: string; defaultValue?: string; onValueChange?: (id: string) => void; collapsed?: boolean; defaultCollapsed?: boolean; onCollapsedChange?: (collapsed: boolean) => void; profiles?: VelvetProfile[]; profileId?: string; defaultProfileId?: string; onProfileChange?: (id: string) => void; onManageProfiles?: () => void; /** Checks a locked profile's 4-digit PIN. Without it any PIN opens the profile (demo behaviour). */ verifyPin?: (id: string, pin: string) => boolean | Promise; notifications?: VelvetNotification[]; onNotificationsSeen?: () => void; search?: false | VelvetSearch; onLogout?: () => void | Promise; /** The window dots. Default true. */ chrome?: boolean; /** What the dots do. By default yellow collapses, green expands and red does nothing. */ onChrome?: { close?: () => void; minimize?: () => void; zoom?: () => void }; /** A preset or any hex colour. Default "crimson". */ accent?: VelvetAccent; /** "auto" follows a .dark / [data-theme] ancestor, then the system. Default "auto". */ theme?: VelvetTheme; /** "floating" is a card with its own corners; "docked" fills the height and attaches to the page edge. */ placement?: "floating" | "docked"; /** Which side of the page the sidebar sits on ("left" is the start side; RTL mirrors it). */ side?: "left" | "right"; /** The collapsed rail opens over the page after a short hover. */ peekOnHover?: boolean; /** Remembers the collapsed state and the profile in localStorage under this key. */ persistKey?: string; /** Below 768px the sidebar becomes an off-canvas drawer with a menu button. Default "drawer". */ mobile?: "drawer" | "none"; /** Anything under the last section. */ footer?: React.ReactNode; /** Plug in your router's link (next/link, react-router…). */ renderLink?: (props: VelvetLinkProps) => React.ReactNode; labels?: Partial; className?: string; style?: React.CSSProperties; id?: string; }; export type VelvetSidebarHandle = { collapse(): void; expand(): void; toggle(): void; focusSearch(): void; }; 76:Tb1ca,/* * Velvet Sidebar — plain CSS, no Tailwind needed. Every colour is a token below, written once with light-dark(): * the theme only flips `color-scheme`, so light and dark can never drift apart. * * theme="dark" | "light" → fixed * theme="auto" → a .dark / .light / [data-theme] ancestor wins, then the system setting * * Override any --vs-* token on .vs-root (or set --vs-font on :root) to re-skin it. */ .vs-root, .vs-portal { /* type */ --vs-text: light-dark(#34353b, #d5d6db); --vs-text-strong: light-dark(#141418, #ffffff); --vs-muted: light-dark(#55565c, #d2d3d8); --vs-label: light-dark(#56575d, #cdced3); /* glass */ --vs-glass-top: light-dark(rgb(255 255 255 / 0.76), rgb(116 118 126 / 0.32)); --vs-glass-mid: light-dark(rgb(250 250 252 / 0.64), rgb(34 34 40 / 0.5)); --vs-glass-bottom: light-dark(rgb(242 242 246 / 0.6), rgb(72 74 82 / 0.34)); --vs-border-hi: light-dark(rgb(255 255 255 / 0.98), rgb(255 255 255 / 0.32)); --vs-border-mid: light-dark(rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.13)); --vs-border-lo: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.06)); --vs-shadow-1: light-dark(rgb(28 28 40 / 0.26), rgb(0 0 0 / 0.62)); --vs-shadow-2: light-dark(rgb(28 28 40 / 0.14), rgb(0 0 0 / 0.42)); --vs-shadow-ring: light-dark(rgb(20 20 30 / 0.06), rgb(0 0 0 / 0.25)); --vs-sheen: light-dark(rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.075)); --vs-grain-opacity: 0.2; /* surfaces */ --vs-ghost: light-dark(rgb(20 20 34 / 0.05), rgb(255 255 255 / 0.06)); --vs-chip: light-dark(rgb(0 0 0 / 0.065), rgb(255 255 255 / 0.13)); --vs-chip-hover: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.19)); --vs-field: light-dark(rgb(255 255 255 / 0.6), rgb(0 0 0 / 0.22)); --vs-field-border: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.14)); --vs-field-border-focus: light-dark(rgb(0 0 0 / 0.24), rgb(255 255 255 / 0.32)); --vs-divider-peak: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.42)); --vs-divider-side: light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.18)); --vs-dot-ring: light-dark(#f3f3f6, #2b2b31); --vs-pop: light-dark(rgb(255 255 255 / 0.82), rgb(30 30 35 / 0.8)); --vs-pop-border: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.12)); --vs-pop-hi: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.1)); --vs-pop-shadow-1: light-dark(rgb(28 28 40 / 0.22), rgb(0 0 0 / 0.55)); --vs-pop-shadow-2: light-dark(rgb(28 28 40 / 0.1), rgb(0 0 0 / 0.35)); --vs-hover: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.07)); --vs-kbd: light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.08)); --vs-kbd-border: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.12)); /* accent (set inline from the `accent` prop) */ --vs-accent-hi: #f2202b; --vs-accent: #e00616; --vs-accent-lo: #c8040f; --vs-accent-ink: #ffffff; --vs-accent-rgb: 224 6 22; --vs-accent-text: light-dark(color-mix(in oklab, var(--vs-accent) 86%, black), color-mix(in oklab, var(--vs-accent) 58%, white)); --vs-focus: light-dark(var(--vs-accent), color-mix(in oklab, var(--vs-accent) 62%, white)); --vs-bloom-strength: 0.34; --vs-radius: 28px; --vs-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); color-scheme: light; font-family: var(--vs-font, "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .vs-root[data-vs-theme="dark"], .vs-portal[data-vs-theme="dark"] { color-scheme: dark; } .vs-root[data-vs-theme="light"], .vs-portal[data-vs-theme="light"] { color-scheme: light; } .vs-root[data-vs-theme="auto"], .vs-portal[data-vs-theme="auto"] { color-scheme: light dark; } :where(.dark, [data-theme="dark"]) .vs-root[data-vs-theme="auto"], :where(.dark, [data-theme="dark"]) > .vs-portal[data-vs-theme="auto"] { color-scheme: dark; } :where(.light, [data-theme="light"]) .vs-root[data-vs-theme="auto"], :where(.light, [data-theme="light"]) > .vs-portal[data-vs-theme="auto"] { color-scheme: light; } .vs-root *, .vs-portal * { box-sizing: border-box; } .vs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ── Root, slot, frame ─────────────────────────────────────────────────────────────── */ .vs-root { position: relative; z-index: 30; display: flex; flex: none; justify-content: flex-start; align-items: flex-start; min-width: 0; } .vs-root[data-side="right"] { justify-content: flex-end; } .vs-frame { position: relative; flex: none; max-height: calc(100dvh - 40px); display: flex; } .vs-root[data-placement="docked"] { position: sticky; top: 0; height: 100dvh; align-items: stretch; --vs-radius: 0px; } .vs-root[data-placement="docked"] .vs-frame { max-height: none; height: 100%; } .vs-shadow { position: absolute; inset: 0; border-radius: var(--vs-radius); pointer-events: none; box-shadow: 0 32px 64px -24px var(--vs-shadow-1), 0 12px 24px -12px var(--vs-shadow-2), 0 0 0 0.5px var(--vs-shadow-ring); transition: box-shadow 0.3s var(--vs-ease-out); } .vs-root[data-placement="docked"] .vs-shadow { box-shadow: 18px 0 40px -28px var(--vs-shadow-1); } .vs-root[data-placement="docked"][data-edge="left"] .vs-shadow { box-shadow: -18px 0 40px -28px var(--vs-shadow-1); } .vs-root[data-peek] .vs-shadow { box-shadow: 0 40px 80px -24px var(--vs-shadow-1), 0 16px 32px -12px var(--vs-shadow-2), 24px 0 60px -30px var(--vs-shadow-1), 0 0 0 0.5px var(--vs-shadow-ring); } .vs-shell { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; min-height: 0; overflow: hidden; border-radius: var(--vs-radius); color: var(--vs-text); font-size: 14px; line-height: 1.25; } /* ── Material ──────────────────────────────────────────────────────────────────────── */ .vs-glass { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--vs-glass-top) 0%, var(--vs-glass-mid) 46%, var(--vs-glass-bottom) 100%); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); } .vs-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Normal blending on purpose: Chrome blends mix-blend-mode layers against the un-blurred page behind backdrop-filter, which shows the background through the glass as sharp lines. */ opacity: var(--vs-grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .9 .9 .9 0 -1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size: 160px 160px; } .vs-sheen { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .vs-sheen__spot { position: absolute; top: 0; left: 0; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: radial-gradient(closest-side, var(--vs-sheen), transparent); will-change: transform, opacity; } .vs-border { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .vs-border__rect { x: 0.5px; y: 0.5px; width: calc(100% - 1px); height: calc(100% - 1px); rx: calc(var(--vs-radius) - 0.5px); ry: calc(var(--vs-radius) - 0.5px); fill: none; stroke-width: 1px; } /* Docked: only the free side keeps a line; the rest of the rect runs off the box. */ .vs-root[data-placement="docked"][data-edge="right"] .vs-border__rect { x: -4px; y: -4px; width: calc(100% + 3.5px); height: calc(100% + 8px); } .vs-root[data-placement="docked"][data-edge="left"] .vs-border__rect { x: 0.5px; y: -4px; width: calc(100% + 3.5px); height: calc(100% + 8px); } .vs-divider { position: relative; flex: none; height: 1px; width: calc(var(--vs-shell-w, 288px) - 40px); margin: 12px 20px; background: linear-gradient(90deg, transparent, var(--vs-divider-side) 24%, var(--vs-divider-peak) 50%, var(--vs-divider-side) 76%, transparent); } .vs-divider::after { content: ""; position: absolute; inset: -1px 10%; background: radial-gradient(closest-side, var(--vs-divider-side), transparent); opacity: 0.5; } /* ── Layout inside the glass ───────────────────────────────────────────────────────── */ .vs-content { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1 1 auto; width: 288px; min-height: 0; } .vs-top { flex: none; padding-top: 18px; } .vs-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; } .vs-scroll:hover { scrollbar-color: var(--vs-chip-hover) transparent; } .vs-scroll::-webkit-scrollbar { width: 4px; } .vs-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; } .vs-scroll:hover::-webkit-scrollbar-thumb { background: var(--vs-chip-hover); } .vs-scroll[data-fade-top] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.6) 8px, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.6) 8px, #000 22px); } .vs-scroll[data-fade-bottom] { -webkit-mask-image: linear-gradient(to top, transparent 0, rgb(0 0 0 / 0.6) 8px, #000 26px); mask-image: linear-gradient(to top, transparent 0, rgb(0 0 0 / 0.6) 8px, #000 26px); } .vs-scroll[data-fade-top][data-fade-bottom] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.6) 8px, #000 22px, #000 calc(100% - 26px), rgb(0 0 0 / 0.6) calc(100% - 8px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / 0.6) 8px, #000 22px, #000 calc(100% - 26px), rgb(0 0 0 / 0.6) calc(100% - 8px), transparent 100%); } .vs-footer { padding: 4px 20px 18px; } /* * What fades when the panel folds sits on its own layer from the start: built on demand, the first fold * stuttered for ~250ms on an Intel laptop GPU; pre-promoted, it runs at 60fps from the first time. */ .vs-frame :is(.vs-row__label, .vs-row__end, .vs-row__dot, .vs-card__text, .vs-card__chev, .vs-search__field, .vs-wordmark__rest, .vs-section__label, .vs-section__dash, .vs-bell) { will-change: opacity, transform; } /* ── Window dots ───────────────────────────────────────────────────────────────────── */ .vs-lights { display: flex; gap: 7px; height: 11px; margin-inline-start: 18.5px; } .vs-light { position: relative; display: grid; place-items: center; width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.22); cursor: default; } .vs-light::before { content: ""; position: absolute; inset: -6px -3px; } button.vs-light { cursor: pointer; } .vs-light--close { background: #ff5f57; } .vs-light--minimize { background: #febc2e; } .vs-light--zoom { background: #28c840; } .vs-light__glyph { width: 9px; height: 9px; fill: none; stroke: rgb(60 10 0 / 0.72); stroke-width: 1.4; stroke-linecap: round; opacity: 0; transition: opacity 0.12s; } .vs-light--minimize .vs-light__glyph { stroke: rgb(110 60 0 / 0.75); } .vs-light--zoom .vs-light__glyph { stroke: rgb(0 70 10 / 0.7); } .vs-lights:hover button.vs-light .vs-light__glyph, .vs-lights:focus-within button.vs-light .vs-light__glyph { opacity: 1; } .vs-light:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: 2px; } /* ── Header ────────────────────────────────────────────────────────────────────────── */ .vs-header { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-top: 15px; padding-inline: 20px 24px; } .vs-wordmark { position: relative; display: inline-flex; align-items: baseline; color: var(--vs-text-strong); font-size: 20px; font-weight: 700; letter-spacing: -0.012em; white-space: nowrap; line-height: 1; } .vs-wordmark__first { display: inline-block; transform-origin: 50% 60%; } .vs-wordmark__first--swap { position: absolute; inset-inline-start: 0; top: 0; } .vs-wordmark__rest { display: inline-block; } .vs-wordmark--logo { display: inline-flex; align-items: center; height: 24px; } .vs-bell { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--vs-text-strong); cursor: pointer; } .vs-bell__glyph { display: grid; place-items: center; transform-origin: 50% 8%; } .vs-bell__glyph svg { width: 18px; height: 18px; } .vs-bell__badge { position: absolute; top: 1px; inset-inline-end: 0; box-shadow: 0 0 0 1.5px var(--vs-dot-ring); } .vs-bell:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vs-focus); } @media (hover: hover) and (pointer: fine) { .vs-bell:hover { background: var(--vs-hover); } } /* ── Edge toggle ───────────────────────────────────────────────────────────────────── */ .vs-toggle-wrap { position: absolute; top: 47px; z-index: 6; display: flex; align-items: center; height: 26px; } /* The circle's centre sits on the border; the pill grows outward from it. */ .vs-toggle-wrap[data-edge="right"] { left: calc(100% - 13px); } .vs-toggle-wrap[data-edge="left"] { right: calc(100% - 13px); flex-direction: row-reverse; } .vs-toggle { position: relative; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #ffffff; color: #1a1a1e; box-shadow: 0 4px 12px rgb(0 0 0 / 0.35), 0 0 0 0.5px rgb(0 0 0 / 0.12); cursor: pointer; } .vs-toggle::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; } .vs-toggle__glyph { display: grid; place-items: center; } .vs-toggle__glyph svg { width: 14px; height: 14px; } .vs-toggle__dot { position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--vs-accent); box-shadow: 0 0 0 1.5px #ffffff; } .vs-toggle:focus-visible { outline: none; box-shadow: 0 4px 12px rgb(0 0 0 / 0.35), 0 0 0 2px #ffffff, 0 0 0 4px var(--vs-focus); } .vs-toggle-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-inline: 6px; padding: 0 4px 0 10px; border-radius: 999px; background: #ffffff; color: color-mix(in oklab, var(--vs-accent) 88%, black); font-size: 12px; font-weight: 650; white-space: nowrap; box-shadow: 0 4px 14px rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.1); pointer-events: none; } .vs-toggle-wrap[data-edge="left"] .vs-toggle-pill { padding: 0 10px 0 4px; flex-direction: row-reverse; } .vs-toggle-pill__kbd { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #f0f0f3; color: #6b6c72; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── Account card ──────────────────────────────────────────────────────────────────── */ .vs-card { position: relative; display: flex; align-items: center; gap: 12px; width: calc(var(--vs-shell-w, 288px) - 24px); height: 60px; margin: 0 12px; padding: 0 10px 0 8px; overflow: hidden; border: 0; border-radius: 14px; background: none; color: inherit; font: inherit; text-align: start; white-space: nowrap; cursor: pointer; transition: background-color 0.18s; } .vs-card__avatar-wrap { flex: none; display: grid; } .vs-card__avatar { position: relative; display: grid; width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 0 0 2px light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.55)), 0 6px 14px light-dark(rgb(20 20 30 / 0.22), rgb(0 0 0 / 0.45)); } .vs-card__avatar-layer { grid-area: 1 / 1; display: grid; border-radius: 50%; overflow: hidden; } .vs-card__kids { position: absolute; bottom: -5px; left: 50%; translate: -50% 0; padding: 1px 5px; border-radius: 999px; background: #ffd23f; color: #2a1d00; font-size: 7.5px; font-weight: 800; letter-spacing: 0.06em; box-shadow: 0 0 0 1.5px var(--vs-dot-ring); } .vs-card__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; } .vs-card__name { position: relative; display: block; height: 19px; overflow: hidden; color: var(--vs-text-strong); font-size: 15px; font-weight: 600; line-height: 19px; letter-spacing: -0.005em; } .vs-card__name-text { display: block; } .vs-card__sub { display: inline-flex; align-items: center; gap: 5px; color: var(--vs-muted); font-size: 11.5px; font-weight: 500; } .vs-card__sub-glyph { width: 12px; height: 12px; } .vs-card__chev { display: grid; flex: none; color: var(--vs-muted); transition: translate 0.2s var(--vs-ease-out); } .vs-card__chev svg { width: 16px; height: 16px; } [dir="rtl"] .vs-card__chev svg, .vs-root[data-edge="left"] .vs-card__chev svg { transform: scaleX(-1); } .vs-card:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--vs-focus); } @media (hover: hover) and (pointer: fine) { .vs-card:hover { background: var(--vs-ghost); } .vs-card:hover .vs-card__chev { translate: 2px 0; } } .vs-avatar { position: relative; display: grid; place-items: center; flex: none; overflow: hidden; border-radius: 50%; background: light-dark(#e4e4ea, #3a3a42); } .vs-avatar img { width: 100%; height: 100%; object-fit: cover; } .vs-avatar__initials { color: var(--vs-text-strong); font-weight: 650; } /* ── Search ────────────────────────────────────────────────────────────────────────── */ .vs-search { position: relative; height: 36px; margin-top: 2px; } .vs-search__ticket { position: absolute; top: 2px; inset-inline-start: 26px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--vs-muted); cursor: pointer; transition: color 0.18s; } .vs-search__ticket svg { width: 17px; height: 17px; rotate: -20deg; transition: rotate 0.35s cubic-bezier(0.3, 1.6, 0.4, 1); } .vs-search__ticket:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vs-focus); } @media (hover: hover) and (pointer: fine) { .vs-search__ticket:hover { color: var(--vs-text-strong); } .vs-search__ticket:hover svg { rotate: -8deg; } } .vs-search__field { position: absolute; top: 1px; inset-inline-start: 64px; display: flex; align-items: center; gap: 6px; width: 204px; height: 34px; padding-inline: 14px 6px; border-radius: 999px; background: var(--vs-field); box-shadow: inset 0 0 0 1px var(--vs-field-border); transition: box-shadow 0.2s var(--vs-ease-out); } .vs-search__field:focus-within { box-shadow: inset 0 0 0 1px var(--vs-field-border-focus), 0 0 0 3px rgb(var(--vs-accent-rgb) / 0.22); } .vs-search__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: none; color: var(--vs-text-strong); font: inherit; font-size: 13px; -webkit-appearance: none; appearance: none; } .vs-search__input::-webkit-search-cancel-button, .vs-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .vs-search__input::placeholder { color: var(--vs-muted); opacity: 0.85; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 0.2s, translate 0.25s var(--vs-ease-out); } .vs-search__input:focus::placeholder { opacity: 0.45; translate: 4px 0; } .vs-search__input:focus-visible { outline: none; } .vs-search__clear { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--vs-chip); color: var(--vs-text-strong); cursor: pointer; } .vs-search__clear svg { width: 12px; height: 12px; } .vs-search__kbd { margin-inline-end: 4px; } .vs-kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--vs-kbd); box-shadow: inset 0 0 0 1px var(--vs-kbd-border); color: var(--vs-muted); font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ── Sections and rows ─────────────────────────────────────────────────────────────── */ .vs-list { position: relative; padding-bottom: 14px; } .vs-section__head { position: relative; height: 32px; } .vs-section:first-of-type .vs-section__head { height: 30px; } .vs-section__label { position: absolute; bottom: 8px; inset-inline-start: 20px; color: var(--vs-label); font-size: 10px; font-weight: 650; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .vs-section__dash { position: absolute; bottom: 12px; inset-inline-start: 32px; width: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--vs-divider-peak), transparent); } .vs-divider--section { margin: 8px 20px 2px; } .vs-section__list { margin: 0; padding: 0; list-style: none; } .vs-section__item { display: block; } .vs-bar, .vs-ghost, .vs-bloom { position: absolute; top: 0; inset-inline-start: 0; width: var(--vs-shell-w, 100%); pointer-events: none; } .vs-bloom { z-index: 0; background: radial-gradient(closest-side, rgb(var(--vs-accent-rgb) / var(--vs-bloom-strength)), rgb(var(--vs-accent-rgb) / 0.1) 58%, transparent 100%); } .vs-ghost { z-index: 0; background: var(--vs-ghost); } .vs-bar { z-index: 0; background: linear-gradient(180deg, var(--vs-accent-hi) 0%, var(--vs-accent) 55%, var(--vs-accent-lo) 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -1px 0 rgb(0 0 0 / 0.22); will-change: transform; } /* The border glows red where the bar meets it: the bar reads as lit from inside the glass. */ .vs-bar::before, .vs-bar::after { content: ""; position: absolute; top: -16px; bottom: -16px; width: 1.5px; background: linear-gradient( 180deg, transparent 0%, color-mix(in oklab, var(--vs-accent-hi) 55%, white) 30%, color-mix(in oklab, var(--vs-accent-hi) 70%, white) 50%, color-mix(in oklab, var(--vs-accent-hi) 55%, white) 70%, transparent 100% ); opacity: 0.85; } .vs-bar::before { inset-inline-start: 0; } .vs-bar::after { inset-inline-end: 0; } .vs-root[data-placement="docked"] .vs-bar::before { display: none; } .vs-row { position: relative; z-index: 1; display: block; width: 100%; height: 46px; margin: 0; padding: 0; border: 0; background: none; color: var(--vs-text); font: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -0.003em; text-align: start; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.14s var(--vs-ease-out), font-weight 0.14s var(--vs-ease-out); } .vs-row[aria-disabled="true"] { cursor: default; opacity: 0.45; } .vs-row[data-lit] { color: var(--vs-accent-ink); font-weight: 600; } .vs-row__icon { position: absolute; top: 10px; inset-inline-start: 29px; display: grid; place-items: center; width: 26px; height: 26px; transition: translate 0.22s var(--vs-ease-out); } .vs-row__glyph { width: 19px; height: 19px; } .vs-row:not([data-lit]) .vs-row__glyph { color: light-dark(#2a2b30, #e2e3e8); } .vs-row__label { position: absolute; top: 0; bottom: 0; inset-inline-start: 64px; display: flex; align-items: center; } .vs-row__end { position: absolute; top: 0; bottom: 0; inset-inline-end: 20px; display: flex; align-items: center; gap: 6px; } .vs-row__dot { position: absolute; top: 0; inset-inline-end: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--vs-accent); box-shadow: 0 0 0 1.5px var(--vs-dot-ring); } .vs-row[data-lit] .vs-row__dot { background: #ffffff; box-shadow: none; } .vs-chip { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--vs-chip); color: var(--vs-text-strong); transition: background-color 0.14s, color 0.14s; } .vs-chip__glyph { width: 11px; height: 11px; } .vs-row[data-lit] .vs-chip { background: #ffffff; color: var(--vs-accent); } .vs-ring { position: absolute; inset: -3px; width: 32px; height: 32px; rotate: -90deg; overflow: visible; } [dir="rtl"] .vs-ring { scale: -1 1; rotate: 90deg; } .vs-ring__track { fill: none; stroke: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.13)); stroke-width: 2; } .vs-ring__value { fill: none; stroke: var(--vs-accent); stroke-width: 2; stroke-linecap: round; } .vs-row[data-lit] .vs-ring__track { stroke: rgb(255 255 255 / 0.3); } .vs-row[data-lit] .vs-ring__value { stroke: #ffffff; } .vs-chip--ring { background: var(--vs-chip); } .vs-badge { display: inline-flex; justify-content: center; align-items: center; height: 18px; min-width: 18px; padding: 0 1px; overflow: hidden; border-radius: 999px; background: var(--vs-accent); color: var(--vs-accent-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; box-shadow: 0 2px 8px rgb(var(--vs-accent-rgb) / 0.35); } .vs-badge--sm { height: 16px; min-width: 16px; font-size: 10px; } .vs-row[data-lit] .vs-badge { background: #ffffff; color: var(--vs-accent); box-shadow: none; } .vs-roll { display: inline-flex; } .vs-roll__col { position: relative; display: inline-block; height: 1.2em; overflow: hidden; line-height: 1.2em; } .vs-roll__digit { display: inline-block; } .vs-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vs-accent); } .vs-fresh { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: rgb(var(--vs-accent-rgb) / 0.14); color: var(--vs-accent-text); font-size: 9.5px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .vs-fresh--sm { height: 16px; padding: 0 6px; font-size: 9px; } .vs-row[data-lit] .vs-fresh { background: rgb(255 255 255 / 0.22); color: #ffffff; } .vs-row:focus-visible { outline: none; } .vs-row:focus-visible::after { content: ""; position: absolute; inset: 4px 8px; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--vs-focus); pointer-events: none; } .vs-row[data-lit]:focus-visible::after { box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.9); } .vs-root[data-collapsed] .vs-row:focus-visible::after { inset-inline: 10px calc(100% - var(--vs-shell-w, 84px) + 10px); } @media (hover: hover) and (pointer: fine) { .vs-row:not([aria-disabled="true"]):hover .vs-row__icon { translate: 2px 0; } [dir="rtl"] .vs-row:not([aria-disabled="true"]):hover .vs-row__icon { translate: -2px 0; } .vs-row:not([data-lit]):hover .vs-chip { background: var(--vs-chip-hover); } } .vs-row:active:not([aria-disabled="true"]) .vs-row__icon, .vs-row:active:not([aria-disabled="true"]) .vs-row__label { scale: 0.97; } /* ── Floating layers (portal) ──────────────────────────────────────────────────────── */ .vs-portal { position: relative; z-index: 80; color: var(--vs-text); font-size: 14px; line-height: 1.3; } .vs-pop, .vs-tip, .vs-fly { position: relative; border-radius: 18px; background: var(--vs-pop); color: var(--vs-text); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); box-shadow: inset 0 1px 0 var(--vs-pop-hi), inset 0 0 0 1px var(--vs-pop-border), 0 24px 48px -18px var(--vs-pop-shadow-1), 0 8px 20px -10px var(--vs-pop-shadow-2); } .vs-pop { padding: 14px; } .vs-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding: 2px 4px 0; } .vs-pop__title { margin: 0; color: var(--vs-text-strong); font-size: 14px; font-weight: 650; letter-spacing: -0.01em; } .vs-pop__title--center { margin-bottom: 14px; text-align: center; } .vs-pop__action, .vs-pop__link { padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--vs-accent-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .vs-pop__action:disabled { color: var(--vs-muted); cursor: default; opacity: 0.6; } .vs-pop__link { display: block; width: 100%; margin-top: 12px; padding: 9px; border-radius: 12px; background: var(--vs-hover); color: var(--vs-text-strong); text-align: center; } .vs-pop__action:focus-visible, .vs-pop__link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vs-focus); } @media (hover: hover) and (pointer: fine) { .vs-pop__action:not(:disabled):hover { background: var(--vs-hover); } .vs-pop__link:hover { background: var(--vs-chip); } } /* Tooltip */ .vs-tip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 13px; border-radius: 999px; color: var(--vs-text-strong); font-size: 13px; font-weight: 600; white-space: nowrap; } .vs-tip:not(:has(.vs-kbd, .vs-badge, .vs-fresh)) { padding-inline-end: 13px; } /* Flyout */ .vs-fly-wrap::before, .vs-fly-wrap::after { content: ""; position: absolute; top: -8px; bottom: -8px; width: 22px; } .vs-fly-wrap::before { right: 100%; } .vs-fly-wrap::after { left: 100%; } .vs-fly { width: 264px; padding: 12px; border-radius: 20px; } .vs-fly__eyebrow { display: block; margin: 2px 4px 10px; color: var(--vs-label); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .vs-fly__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: light-dark(#e6e6ec, #26262c); } .vs-fly__img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s var(--vs-ease-out); } .vs-fly__img[data-loaded] { opacity: 1; } .vs-fly__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(0 0 0 / 0.55)); } .vs-fly__progress { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 3px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / 0.28); } .vs-fly__progress > span { display: block; height: 100%; border-radius: 3px; background: var(--vs-accent); } .vs-fly__body { display: flex; flex-direction: column; gap: 3px; margin: 11px 4px 0; } .vs-fly__title { color: var(--vs-text-strong); font-size: 14px; font-weight: 650; letter-spacing: -0.01em; } .vs-fly__meta { color: var(--vs-muted); font-size: 12px; } .vs-fly__cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 34px; margin-top: 12px; border-radius: 999px; background: light-dark(#141418, #ffffff); color: light-dark(#ffffff, #141418); font-size: 13px; font-weight: 650; text-decoration: none; } .vs-fly__cta-glyph { width: 11px; height: 11px; } .vs-fly__stack { position: relative; height: 132px; display: grid; place-items: center; } .vs-fly__poster { position: absolute; width: 84px; height: 120px; overflow: hidden; border-radius: 10px; background: light-dark(#e6e6ec, #26262c); box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.5), 0 0 0 1px light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08)); } /* Profiles */ .vs-profiles { width: 272px; padding: 16px 14px 14px; } .vs-profiles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; } .vs-profile { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 12px 6px 10px; border: 0; border-radius: 14px; background: none; color: var(--vs-text); font: inherit; cursor: pointer; transition: background-color 0.16s; } .vs-profile__ring { position: relative; display: grid; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow 0.2s, scale 0.25s var(--vs-ease-out); } .vs-profile[aria-current="true"] .vs-profile__ring { box-shadow: 0 0 0 2px light-dark(#ffffff, #1e1e23), 0 0 0 4px var(--vs-accent); } .vs-profile__check, .vs-profile__lock { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--vs-accent); color: var(--vs-accent-ink); box-shadow: 0 0 0 2px light-dark(#ffffff, #1e1e23); } .vs-profile__lock { background: light-dark(#141418, #f2f2f4); color: light-dark(#ffffff, #141418); } .vs-profile__check svg, .vs-profile__lock svg { width: 11px; height: 11px; } .vs-profile__name { display: inline-flex; align-items: center; gap: 5px; color: var(--vs-text-strong); font-size: 13px; font-weight: 600; } .vs-profile__tag { padding: 1px 5px; border-radius: 999px; background: #ffd23f; color: #2a1d00; font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .vs-profile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--vs-focus); } @media (hover: hover) and (pointer: fine) { .vs-profile:hover { background: var(--vs-hover); } .vs-profile:hover .vs-profile__ring { scale: 1.04; } } .vs-pin { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0 2px; } .vs-pin__title { margin: 0; color: var(--vs-text-strong); font-size: 13px; font-weight: 600; } .vs-pin__boxes { display: flex; gap: 8px; } .vs-pin__box { width: 40px; height: 46px; border: 0; border-radius: 12px; background: var(--vs-field); box-shadow: inset 0 0 0 1px var(--vs-field-border); color: var(--vs-text-strong); font: inherit; font-size: 20px; font-weight: 650; text-align: center; -webkit-text-security: disc; } .vs-pin__box:focus { outline: none; box-shadow: inset 0 0 0 1px var(--vs-field-border-focus), 0 0 0 3px rgb(var(--vs-accent-rgb) / 0.25); } .vs-pin__error { min-height: 16px; margin: 0; color: var(--vs-accent-text); font-size: 12px; font-weight: 600; } /* Notifications */ .vs-notes { width: 328px; padding: 12px 8px 8px; } .vs-notes .vs-pop__head { padding-inline: 8px 4px; } .vs-notes__list { margin: 0; padding: 0; list-style: none; } .vs-note { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 26px 10px 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: start; text-decoration: none; cursor: pointer; transition: background-color 0.16s; } .vs-note__thumb { flex: none; width: 56px; height: 32px; margin-top: 2px; border-radius: 6px; object-fit: cover; background: light-dark(#e6e6ec, #2a2a30); box-shadow: 0 0 0 1px light-dark(rgb(0 0 0 / 0.05), rgb(255 255 255 / 0.06)); } .vs-note__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .vs-note__title { color: var(--vs-text-strong); font-size: 13px; font-weight: 600; line-height: 1.3; } .vs-note:not([data-unread]) .vs-note__title { font-weight: 500; color: var(--vs-text); } .vs-note__body { color: var(--vs-muted); font-size: 12px; line-height: 1.35; } .vs-note__time { color: var(--vs-muted); font-size: 11px; opacity: 0.85; } .vs-note__dot { position: absolute; top: 16px; inset-inline-end: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--vs-accent); box-shadow: 0 0 0 3px rgb(var(--vs-accent-rgb) / 0.18); } .vs-note:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--vs-focus); } @media (hover: hover) and (pointer: fine) { .vs-note:hover { background: var(--vs-hover); } } .vs-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px 22px; text-align: center; } .vs-empty__art { width: 84px; height: 84px; margin-bottom: 6px; } .vs-empty__title { margin: 0; color: var(--vs-text-strong); font-size: 14px; font-weight: 650; } .vs-empty__body { margin: 0; color: var(--vs-muted); font-size: 12px; } /* Search results: they sit over the rows (and the red bar), so this glass is denser than the others. */ .vs-results { width: 264px; padding: 8px; border-radius: 16px; background: light-dark(rgb(255 255 255 / 0.92), rgb(28 28 33 / 0.93)); } .vs-results__group + .vs-results__group { margin-top: 6px; } .vs-results__title { margin: 4px 8px 4px; color: var(--vs-label); font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .vs-results__empty { margin: 0; padding: 10px 10px 12px; color: var(--vs-muted); font-size: 12.5px; line-height: 1.45; } .vs-option { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 10px; border-radius: 10px; color: var(--vs-text); font-size: 13px; cursor: pointer; } .vs-option[data-active] { background: var(--vs-hover); color: var(--vs-text-strong); } .vs-option__glyph { flex: none; width: 15px; height: 15px; color: var(--vs-muted); } .vs-option__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vs-mark { background: none; color: var(--vs-text-strong); font-weight: 700; } .vs-option__remove { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--vs-muted); opacity: 0; cursor: pointer; } .vs-option__remove svg { width: 12px; height: 12px; } .vs-option[data-active] .vs-option__remove { opacity: 1; } @media (hover: hover) and (pointer: fine) { .vs-option__remove:hover { background: var(--vs-chip); color: var(--vs-text-strong); } } /* Confirm + buttons */ .vs-confirm { width: 260px; padding: 16px; } .vs-confirm__icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 10px; border-radius: 12px; background: rgb(var(--vs-accent-rgb) / 0.14); color: var(--vs-accent-text); } .vs-confirm__icon svg { width: 17px; height: 17px; } .vs-confirm__title { margin: 0 0 14px; color: var(--vs-text-strong); font-size: 14px; font-weight: 600; line-height: 1.4; } .vs-confirm__actions { display: flex; gap: 8px; } .vs-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background-color 0.16s, scale 0.12s; } .vs-btn:active { scale: 0.97; } .vs-btn--ghost { background: var(--vs-hover); color: var(--vs-text-strong); } .vs-btn--sm { flex: none; height: 30px; font-size: 12px; } .vs-btn--accent { background: linear-gradient(180deg, var(--vs-accent-hi), var(--vs-accent)); color: var(--vs-accent-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 6px 16px -6px rgb(var(--vs-accent-rgb) / 0.6); } .vs-btn__swap { transition: opacity 0.15s; } .vs-btn[data-state="busy"] .vs-btn__swap, .vs-btn[data-state="done"] .vs-btn__swap { opacity: 0; } .vs-btn__icon { position: absolute; width: 16px; height: 16px; } .vs-spin { animation: vs-spin 0.8s linear infinite; } @keyframes vs-spin { to { rotate: 360deg; } } .vs-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vs-focus); } @media (hover: hover) and (pointer: fine) { .vs-btn--ghost:hover { background: var(--vs-chip); } } /* ── Phones: the drawer ────────────────────────────────────────────────────────────── */ .vs-trigger { display: none; } @media (max-width: 767px) { .vs-root[data-mobile="drawer"] { width: 0 !important; } .vs-root[data-mobile="drawer"] .vs-frame { display: none; } .vs-root[data-mobile="drawer"] .vs-trigger { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 70; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 14px; background: var(--vs-pop); color: var(--vs-text-strong); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 var(--vs-pop-hi), inset 0 0 0 1px var(--vs-pop-border), 0 10px 24px -10px var(--vs-pop-shadow-1); cursor: pointer; } .vs-root[data-mobile="drawer"] .vs-trigger[data-edge="left"] { left: auto; right: 14px; } } .vs-trigger__glyph { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; overflow: visible; } .vs-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--vs-focus); } .vs-scrim { position: fixed; inset: 0; z-index: 90; background: rgb(0 0 0 / 0.42); } .vs-drawer { position: fixed; top: max(10px, env(safe-area-inset-top)); bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; z-index: 91; display: flex; width: min(86vw, 320px); touch-action: pan-y; } .vs-drawer[data-from="right"] { left: auto; right: 10px; } .vs-drawer__frame { position: relative; display: flex; width: 100%; --vs-shell-w: 100%; --vs-radius: 24px; } .vs-drawer__frame .vs-shell { border-radius: 24px; } .vs-drawer__frame .vs-shadow { border-radius: 24px; } .vs-drawer__frame .vs-content { width: 100%; } .vs-drawer__frame .vs-search__field { width: calc(100% - 84px); } .vs-drawer__frame .vs-search__input { font-size: 16px; } .vs-drawer__frame .vs-card { width: calc(100% - 24px); } .vs-drawer__frame .vs-divider { width: calc(100% - 40px); } /* ── Right to left ─────────────────────────────────────────────────────────────────── */ /* Tracking breaks the joins of Arabic-script letters: RTL labels keep their natural spacing and size. */ .vs-root[dir="rtl"] .vs-section__label, [dir="rtl"] .vs-root .vs-section__label, [dir="rtl"] .vs-search__input::placeholder, [dir="rtl"] .vs-fresh, [dir="rtl"] .vs-fly__eyebrow, [dir="rtl"] .vs-results__title, .vs-portal[dir="rtl"] .vs-fly__eyebrow, .vs-portal[dir="rtl"] .vs-results__title, .vs-portal[dir="rtl"] .vs-fresh { letter-spacing: 0; text-transform: none; } [dir="rtl"] .vs-section__label { font-size: 11px; } [dir="rtl"] .vs-search__input::placeholder { font-size: 12.5px; font-weight: 500; } /* ── Reduced motion ────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .vs-root *, .vs-portal * { transition-duration: 0.01ms !important; } .vs-sheen { display: none; } .vs-search__ticket svg { transition: none; } } 77:T4c25,"use client"; import { animate, motion, MotionConfig, useMotionTemplate, useMotionValue, useReducedMotion } from "motion/react"; import * as React from "react"; import { AccountCard, ProfileSwitcher } from "./account"; import { accentVars } from "./accents"; import { VelvetContext, type PopoverId, type VelvetContextValue } from "./context"; import { EdgeToggle } from "./edge-toggle"; import { GlassLayers, GlowDivider, useSheen } from "./glass"; import { BellButton, TrafficLights, Wordmark } from "./header"; import { finePointer, isTypingTarget, readStore, useControllable, useDirection, useIsoLayoutEffect, useLatest, useMediaQuery, useResolvedTheme, useStored, writeStore, } from "./hooks"; import { defaultLabels } from "./labels"; import { Drawer, MenuTrigger } from "./mobile"; import { NavList } from "./nav"; import { NotificationsPopover } from "./notifications"; import { SearchRow, type SearchHandle } from "./search"; import type { VelvetItem, VelvetProfile, VelvetSidebarHandle, VelvetSidebarProps } from "./types"; import "./velvet-sidebar.css"; export const EXPANDED_WIDTH = 288; export const COLLAPSED_WIDTH = 84; const SHELL_SPRING = { type: "spring", stiffness: 300, damping: 34, mass: 1 } as const; const FALLBACK_PROFILE: VelvetProfile = { id: "you", name: "You", avatar: "" }; /** The rows scroll on short screens: masked fades appear only on the sides that have more to show. */ function ScrollArea({ children }: { children: React.ReactNode }) { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current; if (!el) return; const update = () => { const top = el.scrollTop > 2; const bottom = el.scrollTop + el.clientHeight < el.scrollHeight - 2; el.toggleAttribute("data-fade-top", top); el.toggleAttribute("data-fade-bottom", bottom); }; update(); el.addEventListener("scroll", update, { passive: true }); const ro = new ResizeObserver(update); ro.observe(el); if (el.firstElementChild) ro.observe(el.firstElementChild); return () => { el.removeEventListener("scroll", update); ro.disconnect(); }; }, []); return (

{children}

); } export const VelvetSidebar = React.forwardRef( function VelvetSidebar(props, ref) { const { brand, sections, theme = "auto", accent = "crimson", placement = "floating", side = "left", chrome = true, mobile = "drawer", peekOnHover = false, persistKey, search, notifications = [], profiles = [], footer, renderLink, onChrome, onLogout, onManageProfiles, verifyPin, className, style, } = props; const labels = React.useMemo(() => ({ ...defaultLabels, ...props.labels }), [props.labels]); const rootRef = React.useRef(null); const shellRef = React.useRef(null); const drawerShellRef = React.useRef(null); const reduced = useReducedMotion() ?? false; const resolved = useResolvedTheme(theme, rootRef); const dir = useDirection(rootRef); const phone = useMediaQuery("(max-width: 767px)"); const isMobile = mobile === "drawer" && phone; const autoId = React.useId(); const navId = props.id ?? `vs-${autoId.replace(/[^a-zA-Z0-9_-]/g, "")}`; // "left" is the start side: in RTL it mirrors. The free edge is the one facing the page. const startSide = side === "left"; const edge: "left" | "right" = startSide === (dir === "ltr") ? "right" : "left"; // ── Value ── const allItems = React.useMemo(() => sections.flatMap((s) => s.items), [sections]); const firstId = allItems.find((i) => !i.disabled && !i.action)?.id ?? ""; const [value, setValue] = useControllable(props.value, props.defaultValue ?? firstId, props.onValueChange); // ── Collapsed: controlled, else the user's last choice (persisted), else the default (tablets start as a rail) ── const storedCollapsed = useStored(persistKey, "collapsed"); const tablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)"); const [chosenCollapsed, setChosenCollapsed] = React.useState(null); const collapsed = props.collapsed ?? chosenCollapsed ?? (storedCollapsed !== null ? storedCollapsed === "1" : (props.defaultCollapsed ?? tablet)); const onCollapsedChangeRef = useLatest(props.onCollapsedChange); const setCollapsedPersist = React.useCallback( (next: boolean) => { setChosenCollapsed(next); writeStore(persistKey, "collapsed", next ? "1" : "0"); onCollapsedChangeRef.current?.(next); }, [persistKey, onCollapsedChangeRef], ); // ── Peek (the collapsed rail opens over the page on hover intent) ── const [peeking, setPeeking] = React.useState(false); const peekTimer = React.useRef(undefined); React.useEffect(() => () => window.clearTimeout(peekTimer.current), []); const [prevCollapsed, setPrevCollapsed] = React.useState(collapsed); if (prevCollapsed !== collapsed) { setPrevCollapsed(collapsed); if (!collapsed) setPeeking(false); } const rail = !isMobile && collapsed && !peeking; // ── Widths: the slot (space the page gives up) and the frame (what you see; wider than the slot while peeking) ── const instant = React.useRef(true); const slotW = useMotionValue(collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH); const frameW = useMotionValue(collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH); const frameWpx = useMotionTemplate`${frameW}px`; useIsoLayoutEffect(() => { const slot = collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH; const frame = rail ? COLLAPSED_WIDTH : EXPANDED_WIDTH; if (instant.current || reduced) { slotW.jump(slot); frameW.jump(frame); return; } const a = animate(slotW, slot, SHELL_SPRING); const b = animate(frameW, frame, SHELL_SPRING); return () => { a.stop(); b.stop(); }; }, [collapsed, rail, reduced, slotW, frameW]); React.useEffect(() => { // Everything after the first paint (and the restored state) animates. const raf = requestAnimationFrame(() => { instant.current = false; }); return () => cancelAnimationFrame(raf); }, []); // ── Profiles: controlled, else the last pick (persisted), else the default ── const storedProfile = useStored(persistKey, "profile"); const [chosenProfile, setChosenProfile] = React.useState(null); const profileId = props.profileId ?? chosenProfile ?? (storedProfile && profiles.some((p) => p.id === storedProfile) ? storedProfile : (props.defaultProfileId ?? profiles[0]?.id ?? FALLBACK_PROFILE.id)); const profile = profiles.find((p) => p.id === profileId) ?? profiles[0] ?? FALLBACK_PROFILE; const onProfileChangeRef = useLatest(props.onProfileChange); // ── Notifications: "seen" clears the bell's count, "read" clears each row's dot ── const [seen, setSeen] = React.useState>(() => new Set()); const [read, setRead] = React.useState>(() => new Set()); const unseen = notifications.filter((n) => n.unread && !read.has(n.id) && !seen.has(n.id)).length; // ── Popovers ── const [popover, setPopover] = React.useState(null); const bellRef = React.useRef(null); const cardRef = React.useRef(null); const drawerBellRef = React.useRef(null); const drawerCardRef = React.useRef(null); const [prevRail, setPrevRail] = React.useState(rail); if (prevRail !== rail) { setPrevRail(rail); // The bell isn't on the rail: its popover closes with it. if (rail && popover === "notifications") setPopover(null); } const onNotesSeenRef = useLatest(props.onNotificationsSeen); React.useEffect(() => { if (popover !== "notifications") return; const ids = notifications.filter((n) => n.unread).map((n) => n.id); const t = window.setTimeout(() => { setSeen((prev) => new Set([...prev, ...ids])); onNotesSeenRef.current?.(); }, 1200); return () => window.clearTimeout(t); }, [popover, notifications, onNotesSeenRef]); // ── Live region ── const [message, setMessage] = React.useState(""); const announce = React.useCallback((m: string) => { setMessage(""); window.setTimeout(() => setMessage(m), 40); }, []); // ── Drawer (phones) ── const [drawerWanted, setDrawerOpen] = React.useState(false); const drawerOpen = isMobile && drawerWanted; const triggerRef = React.useRef(null); // ── First-visit hint on the edge toggle ── const [hint, setHint] = React.useState(false); React.useEffect(() => { if (readStore(persistKey, "hinted")) return; const show = window.setTimeout(() => setHint(true), 700); const hide = window.setTimeout(() => { setHint(false); writeStore(persistKey, "hinted", "1"); }, 3100); return () => { window.clearTimeout(show); window.clearTimeout(hide); }; }, [persistKey]); // ── Actions ── const searchRef = React.useRef(null); const drawerSearchRef = React.useRef(null); const toggle = React.useCallback(() => { setHint(false); setPeeking(false); const next = !collapsed; setCollapsedPersist(next); announce(next ? labels.collapsed : labels.expanded); }, [collapsed, setCollapsedPersist, announce, labels]); const expand = React.useCallback(() => { if (collapsed) toggle(); }, [collapsed, toggle]); const collapse = React.useCallback(() => { if (!collapsed) toggle(); }, [collapsed, toggle]); const focusSearch = React.useCallback(() => { if (isMobile) { setDrawerOpen(true); requestAnimationFrame(() => requestAnimationFrame(() => drawerSearchRef.current?.focus())); return; } searchRef.current?.focus(); }, [isMobile]); React.useImperativeHandle(ref, () => ({ collapse, expand, toggle, focusSearch }), [collapse, expand, toggle, focusSearch]); const keys = useLatest({ toggle, focusSearch, isMobile, hasSearch: !!search }); React.useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.defaultPrevented) return; const k = keys.current; const mod = e.metaKey || e.ctrlKey; if (mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "b") { if (k.isMobile) return; e.preventDefault(); k.toggle(); return; } if (mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "k" && k.hasSearch) { e.preventDefault(); k.focusSearch(); return; } if (mod || e.altKey || isTypingTarget(e.target)) return; if (e.key === "[" && !k.isMobile) { e.preventDefault(); k.toggle(); } else if (e.key === "/" && k.hasSearch) { e.preventDefault(); k.focusSearch(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [keys]); const onSelect = React.useCallback( (item: VelvetItem) => { setValue(item.id); if (isMobile) window.setTimeout(() => setDrawerOpen(false), 180); }, [setValue, isMobile], ); const pickProfile = (id: string) => { setChosenProfile(id); onProfileChangeRef.current?.(id); writeStore(persistKey, "profile", id); setPopover(null); const p = profiles.find((x) => x.id === id); if (p) announce(labels.switchedTo(p.name)); }; // ── Peek handlers ── const onFrameEnter = () => { if (!peekOnHover || !collapsed || isMobile || !finePointer()) return; window.clearTimeout(peekTimer.current); peekTimer.current = window.setTimeout(() => setPeeking(true), 350); }; const onFrameLeave = () => { window.clearTimeout(peekTimer.current); if (!peeking) return; peekTimer.current = window.setTimeout(() => { // Stay open while a popover from the peeked panel is up. setPeeking(false); }, 250); }; const sheen = useSheen(shellRef, !reduced && !isMobile); const portalTheme = resolved ?? (theme === "auto" ? "auto" : theme); const accentStyle = React.useMemo(() => accentVars(accent) as React.CSSProperties, [accent]); const getShell = React.useCallback(() => shellRef.current, []); const getDrawerShell = React.useCallback(() => drawerShellRef.current, []); const ctx: VelvetContextValue = { labels, brandName: brand.name, collapsed: rail, mode: "frame", edge, dir, reduced, shellRef, getShell, portal: { theme: portalTheme, style: accentStyle }, announce, popover, setPopover, }; const drawerCtx: VelvetContextValue = { ...ctx, collapsed: false, mode: "drawer", shellRef: drawerShellRef, getShell: getDrawerShell }; const lights = { close: onChrome?.close, minimize: onChrome?.minimize ?? (rail ? undefined : collapse), zoom: onChrome?.zoom ?? (rail ? expand : undefined), }; const panel = (where: "frame" | "drawer") => { const inDrawer = where === "drawer"; const bRef = inDrawer ? drawerBellRef : bellRef; const cRef = inDrawer ? drawerCardRef : cardRef; return (

{chrome ? setDrawerOpen(false) } : lights} /> : null}

setPopover((p) => (p === "notifications" ? null : "notifications"))} />

{profiles.length > 0 ? ( <> setPopover((p) => (p === "profiles" ? null : "profiles"))} buttonRef={cRef} controls={`${navId}-profiles`} /> ) : null} {search ? ( ) : null}

{footer ?

{footer}

: null} cRef.current} profiles={profiles} current={profile.id} onPick={pickProfile} onClose={() => setPopover(null)} onManage={onManageProfiles} verifyPin={verifyPin} returnFocus={cRef} id={`${navId}-profiles`} /> bRef.current} items={notifications} readIds={read} onRead={(id) => setRead((prev) => new Set([...prev, id]))} onReadAll={() => { const ids = notifications.filter((n) => n.unread).map((n) => n.id); setRead((prev) => new Set([...prev, ...ids])); announce(labels.markedRead(ids.length)); }} onClose={() => setPopover(null)} returnFocus={bRef} id={`${navId}-notes`} />

); }; return (

{ setPeeking(false); setCollapsedPersist(false); }} /> {mobile === "drawer" ? ( setDrawerOpen(!drawerOpen)} controls={`${navId}-drawer`} /> ) : null} {message} {isMobile ? ( setDrawerOpen(false)} returnFocus={triggerRef} id={`${navId}-drawer`}>

) : null} ); }, ); 62:["$","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","@floating-ui/react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40floating-ui%2Freact-dom","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":"@floating-ui/react-dom"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L63",null,{"namespace":"@upfork","registryDependencies":[]}]]}],null]}],["$","$L64",null,{"files":[{"path":"components/velvet-sidebar/accents.ts","content":"$65","type":"registry:component","target":"@components/velvet-sidebar/accents.ts"},{"path":"components/velvet-sidebar/account.tsx","content":"$66","type":"registry:component","target":"@components/velvet-sidebar/account.tsx"},{"path":"components/velvet-sidebar/badge.tsx","content":"$67","type":"registry:component","target":"@components/velvet-sidebar/badge.tsx"},{"path":"components/velvet-sidebar/context.ts","content":"$68","type":"registry:component","target":"@components/velvet-sidebar/context.ts"},{"path":"components/velvet-sidebar/edge-toggle.tsx","content":"$69","type":"registry:component","target":"@components/velvet-sidebar/edge-toggle.tsx"},{"path":"components/velvet-sidebar/flyout.tsx","content":"$6a","type":"registry:component","target":"@components/velvet-sidebar/flyout.tsx"},{"path":"components/velvet-sidebar/glass.tsx","content":"$6b","type":"registry:component","target":"@components/velvet-sidebar/glass.tsx"},{"path":"components/velvet-sidebar/header.tsx","content":"$6c","type":"registry:component","target":"@components/velvet-sidebar/header.tsx"},{"path":"components/velvet-sidebar/hooks.ts","content":"$6d","type":"registry:component","target":"@components/velvet-sidebar/hooks.ts"},{"path":"components/velvet-sidebar/index.ts","content":"export { VelvetSidebar, EXPANDED_WIDTH, COLLAPSED_WIDTH } from \"./velvet-sidebar\";\nexport { ACCENT_PRESETS, accentVars, resolveAccent } from \"./accents\";\nexport { defaultLabels } from \"./labels\";\nexport type {\n VelvetAccent,\n VelvetIcon,\n VelvetItem,\n VelvetLabels,\n VelvetLinkProps,\n VelvetNotification,\n VelvetPreview,\n VelvetProfile,\n VelvetSearch,\n VelvetSection,\n VelvetSidebarHandle,\n VelvetSidebarProps,\n VelvetTheme,\n} from \"./types\";\n","type":"registry:component","target":"@components/velvet-sidebar/index.ts"},{"path":"components/velvet-sidebar/labels.ts","content":"$6e","type":"registry:component","target":"@components/velvet-sidebar/labels.ts"},{"path":"components/velvet-sidebar/logout-confirm.tsx","content":"$6f","type":"registry:component","target":"@components/velvet-sidebar/logout-confirm.tsx"},{"path":"components/velvet-sidebar/mobile.tsx","content":"$70","type":"registry:component","target":"@components/velvet-sidebar/mobile.tsx"},{"path":"components/velvet-sidebar/nav.tsx","content":"$71","type":"registry:component","target":"@components/velvet-sidebar/nav.tsx"},{"path":"components/velvet-sidebar/notifications.tsx","content":"$72","type":"registry:component","target":"@components/velvet-sidebar/notifications.tsx"},{"path":"components/velvet-sidebar/popover.tsx","content":"$73","type":"registry:component","target":"@components/velvet-sidebar/popover.tsx"},{"path":"components/velvet-sidebar/search.tsx","content":"$74","type":"registry:component","target":"@components/velvet-sidebar/search.tsx"},{"path":"components/velvet-sidebar/types.ts","content":"$75","type":"registry:component","target":"@components/velvet-sidebar/types.ts"},{"path":"components/velvet-sidebar/velvet-sidebar.css","content":"$76","type":"registry:file","target":"@components/velvet-sidebar/velvet-sidebar.css"},{"path":"components/velvet-sidebar/velvet-sidebar.tsx","content":"$77","type":"registry:component","target":"@components/velvet-sidebar/velvet-sidebar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]