67:I[8513,["/_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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"],"ScrollBar"] 73:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"],"CodeEditor"] 74: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 55:["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.56 0.21 300)"}}],["$","p",null,{"children":"oklch(0.56 0.21 300)"}]]}]}]]}] 56:["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 57:["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 58:["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.3 0.03 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.3 0.03 285 / 10%)"}]]}]}]]}] 59:["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-depth",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.32 0.03 285 / 20%)"}}],["$","p",null,{"children":"oklch(0.32 0.03 285 / 20%)"}]]}]}]]}] 5a:["$","div","gloss-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 10%)"}]]}]}]]}] 5b:["$","div","liquid-tint",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-tint",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 18%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 18%)"}]]}]}]]}] 5c:["$","div","liquid-fallback",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-fallback",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 5d:["$","div","liquid-rim",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-rim",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 95%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 95%)"}]]}]}]]}] 5e:["$","div","liquid-edge",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-edge",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.2 0.02 285 / 10%)"}}],["$","p",null,{"children":"oklch(0.2 0.02 285 / 10%)"}]]}]}]]}] 5f:["$","div","liquid-shadow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shadow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.02 285 / 26%)"}}],["$","p",null,{"children":"oklch(0.22 0.02 285 / 26%)"}]]}]}]]}] 60:["$","div","liquid-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 55%)"}]]}]}]]}] 61:["$","div","liquid-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","liquid-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.25 0.03 285 / 14%)"}}],["$","p",null,{"children":"oklch(0.25 0.03 285 / 14%)"}]]}]}]]}] 62:["$","$L67",null,{"orientation":"horizontal"}] 63:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L54",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.8 0.16 55)"}}],["$","p",null,{"children":"oklch(0.8 0.16 55)"}]]}]}]]}],["$","div","glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.22 0.05 40)"}}],["$","p",null,{"children":"oklch(0.22 0.05 40)"}]]}]}]]}],["$","div","glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.7 0.2 15)"}}],["$","p",null,{"children":"oklch(0.7 0.2 15)"}]]}]}]]}],["$","div","glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.65 0.2 300)"}}],["$","p",null,{"children":"oklch(0.65 0.2 300)"}]]}]}]]}],["$","div","glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.19 0 0 / 55%)"}}],["$","p",null,{"children":"oklch(0.19 0 0 / 55%)"}]]}]}]]}],["$","div","gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 16%)"}}],["$","p",null,{"children":"oklch(1 0 0 / 16%)"}]]}]}]]}],["$","div","gloss-shade",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","gloss-shade",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0 0 0 / 30%)"}}],["$","p",null,{"children":"oklch(0 0 0 / 30%)"}]]}]}]]}],["$","div","gloss-depth",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":"$L68"}],"$L69"]}],"$L6a","$L6b","$L6c","$L6d","$L6e","$L6f","$L70","$L71"]}],"$L72"]}]}]]}] 64:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L54",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-glow",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow)"}]]}],["$","div","color-glow-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-foreground)"}]]}],["$","div","color-glow-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-2)"}]]}],["$","div","color-glow-3",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glow-3",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glow-3)"}]]}],["$","div","color-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--glass)"}]]}],["$","div","color-gloss-highlight",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-gloss-highlight",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--gloss-highlight)"}]]}],["$","div","shadow-gloss",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-gloss",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -1px 0 0 var(--gloss-shade), 0 0 0 1px var(--gloss-edge), 0 1px 2px 0 var(--gloss-depth), 0 4px 12px -4px var(--gloss-depth)"}]]}],["$","div","shadow-glass",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-glass",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 0 0 var(--gloss-highlight), inset 0 -10px 24px -18px var(--gloss-shade), inset 0 0 0 1px var(--gloss-edge), 0 2px 6px -1px var(--gloss-depth), 0 18px 40px -12px var(--gloss-depth)"}]]}],["$","div","shadow-well",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","shadow-well",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"inset 0 1px 3px 0 var(--gloss-depth), inset 0 0 0 1px var(--gloss-edge), 0 1px 0 0 var(--gloss-highlight)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}] 65:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L73",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"tailwindcss-concentric\" {\n\n}"}]}]]}] 75:T311e,"use client" import * as React from "react" import { AnimateIcon } from "@/components/animate-ui/icons/icon" import { ChevronRight } from "@/components/animate-ui/icons/chevron-right" import { motion, useMotionValue, useSpring, useTransform } from "motion/react" import { cn } from "@/lib/utils" import { LiquidSearch } from "@/components/ui/liquid-search" type GlassSidebarItem = { id: string label: string icon?: React.ReactNode badge?: string href?: string /** Additional terms matched by the local search. */ keywords?: string } type GlassSidebarHeading = { heading: string } type GlassSidebarProps = Omit, "children" | "defaultValue" | "onChange"> & { items: (GlassSidebarItem | GlassSidebarHeading)[] value?: string defaultValue?: string onValueChange?: (id: string) => void /** Replaces the brand row above search. */ header?: React.ReactNode /** Account details or other content anchored below navigation. */ footer?: React.ReactNode /** Shows a local filter for the navigation rows. */ searchable?: boolean searchPlaceholder?: string } const reducedMotionQuery = "(prefers-reduced-motion: reduce)" function subscribeReducedMotion(onChange: () => void) { const media = window.matchMedia(reducedMotionQuery) media.addEventListener("change", onChange) return () => media.removeEventListener("change", onChange) } const readReducedMotion = () => window.matchMedia(reducedMotionQuery).matches const serverReducedMotion = () => true function GlassSidebar({ items, value, defaultValue, onValueChange, header, footer, searchable = true, searchPlaceholder = "Find a page", className, "aria-label": label = "Sidebar", ...props }: GlassSidebarProps) { const [query, setQuery] = React.useState("") const [internal, setInternal] = React.useState(defaultValue ?? items.find(item => "id" in item)?.id) const [hovered, setHovered] = React.useState(null) const [focused, setFocused] = React.useState(null) const uid = React.useId() const reduceMotion = React.useSyncExternalStore(subscribeReducedMotion, readReducedMotion, serverReducedMotion) const active = value ?? internal const nav = React.useRef(null) const [track, setTrack] = React.useState<{ top: number; bottom: number; width: number; rows: Record; heights: Record } | null>(null) const lineStart = useMotionValue(0) const lineEnd = useMotionValue(0) const lineWidth = useMotionValue(240) const rowHeight = useMotionValue(36) const lineY = useSpring(0, { stiffness: 400, damping: 40, mass: 0.8 }) const ready = React.useRef(false) // Keep the active outline square and open on the rail side, so the rail joins // the row cleanly with a compact, squarish corner radius. const contour = useTransform([lineY, lineWidth, rowHeight], ([y, width, height]: number[]) => { const top = y - height / 2 const bottom = y + height / 2 const radius = Math.min(8, height / 3) const right = Math.max(32, width - 6) return `M 9 ${top - radius} Q 9 ${top} ${9 + radius} ${top} H ${right - radius} Q ${right} ${top} ${right} ${top + radius} V ${bottom - radius} Q ${right} ${bottom} ${right - radius} ${bottom} H ${9 + radius} Q 9 ${bottom} 9 ${bottom + radius}` }) const seam = useTransform([lineStart, lineEnd, lineY, rowHeight], ([start, end, y, height]: number[]) => { const top = y - height / 2 const bottom = y + height / 2 const radius = Math.min(8, height / 3) return `M 9 ${start} V ${top - radius} M 9 ${bottom + radius} V ${end}` }) function choose(id: string) { if (value === undefined) setInternal(id) onValueChange?.(id) } function onKeyDown(event: React.KeyboardEvent) { const rows = [...(nav.current?.querySelectorAll("[data-sidebar-item]") ?? [])] const index = rows.indexOf(event.target as HTMLElement) if (index < 0) return const target = event.key === "ArrowDown" ? Math.min(index + 1, rows.length - 1) : event.key === "ArrowUp" ? Math.max(index - 1, 0) : event.key === "Home" ? 0 : event.key === "End" ? rows.length - 1 : null if (target === null) return event.preventDefault() setHovered(null) rows[target]?.focus() } const visible = React.useMemo(() => { const q = query.trim().toLowerCase() if (!q) return items const result: (GlassSidebarItem | GlassSidebarHeading)[] = [] let heading: GlassSidebarHeading | undefined for (const item of items) { if ("heading" in item) heading = item else if (`${item.label} ${item.keywords ?? ""}`.toLowerCase().includes(q)) { if (heading) { result.push(heading); heading = undefined } result.push(item) } } return result }, [items, query]) // A search can remove the hovered, focused, or selected row. Ignore stale // targets so the seam stays visible until a matching row is highlighted. const highlighted = [hovered, focused, active].find(id => id != null && visible.some(item => "id" in item && item.id === id) ) const target = track?.rows[highlighted ?? ""] // Measure only on layout changes; spring values move the SVG without React renders. React.useLayoutEffect(() => { const root = nav.current if (!root) { ready.current = false; return } const measure = () => { const bounds = root.getBoundingClientRect() const rows: Record = {} const heights: Record = {} root.querySelectorAll("[data-sidebar-item]").forEach(row => { const rect = row.getBoundingClientRect() rows[row.dataset.sidebarItem!] = rect.top - bounds.top + rect.height / 2 heights[row.dataset.sidebarItem!] = rect.height }) const positions = Object.values(rows) if (!positions.length) { setTrack(null); return } setTrack({ top: 0, bottom: bounds.height, width: bounds.width, rows, heights }) } measure() const observer = new ResizeObserver(measure) observer.observe(root) root.querySelectorAll("[data-sidebar-item]").forEach(row => observer.observe(row)) return () => observer.disconnect() }, [visible]) React.useLayoutEffect(() => { if (!track) return lineStart.set(track.top) lineEnd.set(track.bottom) lineWidth.set(track.width) rowHeight.set(track.heights[highlighted ?? ""] ?? 36) if (target === undefined) return if (!ready.current || reduceMotion) lineY.jump(target) else lineY.set(target) ready.current = true }, [highlighted, lineEnd, lineStart, lineWidth, lineY, reduceMotion, rowHeight, target, track]) return

{header ??

Afterglow

Workspace

1.0

} {searchable && }

{visible.length ?

setHovered(null)} onBlur={event => { if (!event.currentTarget.contains(event.relatedTarget)) setFocused(null) }}> {track && }

{item.heading}

svg]:size-[15px] [&>svg]:stroke-[1.65]", selected || highlighted === item.id ? "text-glow" : "text-foreground/50 group-hover:text-foreground/80")}>{item.icon}

{item.label}

{item.badge}

} const common = { "data-sidebar-item": item.id, "aria-current": selected ? "page" as const : undefined, className: cn("group relative flex min-h-9 scroll-my-3 w-full cursor-pointer items-center gap-2.5 rounded-[12px] px-2.5 py-1 text-left text-[13px] outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-glow/60 motion-reduce:transition-none", selected ? "font-medium text-foreground" : "text-foreground/60 hover:text-foreground focus-visible:text-foreground"), onPointerEnter: (event: React.PointerEvent) => { if (event.pointerType !== "touch") setHovered(item.id) }, onFocus: () => setFocused(item.id), onClick: (event: React.MouseEvent) => { if (event.defaultPrevented || (item.href && (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey))) return choose(item.id) }, } return

{item.href ? {contents} : }

})}

No matching pages.

}

{footer &&

{footer}

}

} export { GlassSidebar, type GlassSidebarProps, type GlassSidebarItem, type GlassSidebarHeading } 76:Td64,"use client" import * as React from "react" import { AnimateIcon } from "@/components/animate-ui/icons/icon" import { Search } from "@/components/animate-ui/icons/search" import { X } from "@/components/animate-ui/icons/x" import { LiquidGlass } from "@/components/ui/liquid-glass" import { cn } from "@/lib/utils" type LiquidSearchProps = Omit, "type" | "size" | "value" | "defaultValue" | "onChange"> & { value?: string defaultValue?: string onValueChange?: (value: string) => void /** Styles the input text separately from the glass capsule. */ inputClassName?: string } function LiquidSearch({ value, defaultValue = "", onValueChange, placeholder = "Search anything", className, inputClassName, disabled, readOnly, ref, onKeyDown, "aria-label": label, ...props }: LiquidSearchProps) { const [internal, setInternal] = React.useState(defaultValue) const input = React.useRef(null) React.useImperativeHandle(ref, () => input.current!, []) const text = value ?? internal function update(next: string) { if (value === undefined) setInternal(next) onValueChange?.(next) } function clear() { update("") input.current?.focus() } return

update(event.target.value)} onKeyDown={event => { onKeyDown?.(event) if (!event.defaultPrevented && !event.nativeEvent.isComposing && event.key === "Escape" && text && !readOnly) { event.preventDefault() clear() } }} className={cn("relative h-full min-w-0 flex-1 appearance-none bg-transparent text-xs outline-none placeholder:text-foreground/40 [&::-webkit-search-cancel-button]:appearance-none", inputClassName)} />

} export { LiquidSearch, type LiquidSearchProps } 77:T310d,"use client" import * as React from "react" import { isMotionValue, motion, useMotionValue, useTransform, type MotionValue, } from "motion/react" import { ringMask } from "@/lib/afterglow" import { cn } from "@/lib/utils" /* * Liquid glass: a pane that bends whatever sits behind it, like Apple's * Liquid Glass. The rim is a curved lens, so content near the edges is * pulled inward, while the flat middle stays clear. * * Refraction is an SVG displacement map used as a backdrop-filter, which only * Chromium supports. Other browsers get a frosted fallback with the same rim. */ const SAMPLES = 128 const INDEX_OF_REFRACTION = 1.5 // convex squircle: flat in the middle, rounding off toward the rim const surface = (x: number) => Math.pow(1 - Math.pow(1 - x, 4), 0.25) // how far a straight-down ray is bent sideways at each point across the rim function rimProfile(bezel: number) { const profile = new Float32Array(SAMPLES) for (let i = 0; i < SAMPLES; i++) { const x = i / (SAMPLES - 1) const a = Math.max(x - 0.001, 0) const b = Math.min(x + 0.001, 1) const slope = (surface(b) - surface(a)) / (b - a) const incident = Math.atan(slope) const refracted = Math.asin(Math.sin(incident) / INDEX_OF_REFRACTION) const thickness = bezel * (0.25 + surface(x)) profile[i] = thickness * Math.tan(incident - refracted) } return profile } type DisplacementMap = { url: string; scale: number } const maps = new Map() function displacementMap( width: number, height: number, radius: number, bezel: number, magnify: number ): DisplacementMap { const key = [width, height, radius, bezel, magnify].join(":") const cached = maps.get(key) if (cached) return cached const profile = rimProfile(bezel) const dx = new Float32Array(width * height) const dy = new Float32Array(width * height) let max = 0 for (let j = 0; j < height; j++) { for (let i = 0; i < width; i++) { // signed distance to a rounded rectangle, and the outward normal const px = i + 0.5 - width / 2 const py = j + 0.5 - height / 2 const qx = Math.abs(px) - width / 2 + radius const qy = Math.abs(py) - height / 2 + radius const inside = -(Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - radius) let nx = 0 let ny = 0 if (qx > 0 && qy > 0) { const length = Math.hypot(qx, qy) || 1 nx = (qx / length) * Math.sign(px) ny = (qy / length) * Math.sign(py) } else if (qx > qy) nx = Math.sign(px) else ny = Math.sign(py) let x = -px * magnify let y = -py * magnify if (inside >= 0 && inside < bezel) { // sample inward, so the rim shows what's just inside the edge const shift = profile[Math.round((inside / bezel) * (SAMPLES - 1))] x -= nx * shift y -= ny * shift } const k = j * width + i dx[k] = x dy[k] = y max = Math.max(max, Math.abs(x), Math.abs(y)) } } const canvas = document.createElement("canvas") canvas.width = width canvas.height = height const context = canvas.getContext("2d") if (!context) return { url: "", scale: 0 } const image = context.createImageData(width, height) for (let k = 0; k < width * height; k++) { // 128 is "no shift"; red moves along x, green along y image.data[k * 4] = 128 + (dx[k] / (max || 1)) * 127 image.data[k * 4 + 1] = 128 + (dy[k] / (max || 1)) * 127 image.data[k * 4 + 2] = 128 image.data[k * 4 + 3] = 255 } context.putImageData(image, 0, 0) const map = { url: canvas.toDataURL(), scale: max * 2 } if (maps.size > 48) maps.delete(maps.keys().next().value!) maps.set(key, map) return map } // only Chromium can use an SVG filter as a backdrop-filter function canRefract() { const nav = navigator as Navigator & { userAgentData?: { brands: { brand: string }[] } } if (nav.userAgentData) { return nav.userAgentData.brands.some((b) => b.brand === "Chromium") } return /Chrome\/\d+/.test(nav.userAgent) && !/Firefox|FxiOS/.test(nav.userAgent) } const noopSubscribe = () => () => {} function useCanRefract() { return React.useSyncExternalStore(noopSubscribe, canRefract, () => false) } type LiquidGlassProps = React.ComponentProps<"div"> & { /** width of the curved rim in px, defaults to the corner radius (max 24) */ bezel?: number /** 0 is flat glass, 1 is the full lens; pass a motion value to animate it */ refraction?: number | MotionValue /** zooms the middle like a magnifier, 0 to 0.3 */ magnify?: number /** blur behind the glass in px */ frost?: number /** a color mixed over the glass, e.g. for a tinted primary button */ tint?: string /** * fades the whole pane in and out. Never fade a parent of liquid glass * instead: an ancestor with opacity cuts the glass off from what's behind it. */ presence?: number | MotionValue } function LiquidGlass({ bezel, refraction = 1, magnify = 0, frost = 1, tint, presence = 1, className, children, ...props }: LiquidGlassProps) { const ref = React.useRef(null) const displaceRef = React.useRef(null) const id = `liquid-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}` const canRefractHere = useCanRefract() // A fixed zero opts out of SVG backdrop sampling entirely. Native frosting avoids // clipped-backdrop seams when flat panes overlap and change stacking order. // Motion values still keep the map ready so they can animate away from zero. const refract = canRefractHere && (typeof refraction !== "number" || refraction > 0) const [shape, setShape] = React.useState<{ w: number; h: number; r: number }>() // the scale last written to the filter, so a no-op resize can put it back const applied = React.useRef(0) React.useEffect(() => { const node = ref.current if (!node || !refract) return const measure = () => { const w = Math.round(node.offsetWidth) const h = Math.round(node.offsetHeight) const raw = getComputedStyle(node).borderTopLeftRadius const value = parseFloat(raw) || 0 const r = Math.round( Math.min(raw.endsWith("%") ? (value / 100) * Math.min(w, h) : value, w / 2, h / 2) ) setShape((prev) => { if (prev?.w === w && prev.h === h && prev.r === r) { displaceRef.current?.setAttribute("scale", String(applied.current)) return prev } return { w, h, r } }) } // measure right away, then wait for resizing to settle before rebuilding the map let first = true let frame = 0 let timer = 0 const observer = new ResizeObserver(() => { if (first) { first = false measure() return } // until the new map is ready, the old one would bend the wrong pixels displaceRef.current?.setAttribute("scale", "0") window.clearTimeout(timer) timer = window.setTimeout(() => { frame = requestAnimationFrame(measure) }, 100) }) observer.observe(node) return () => { observer.disconnect() window.clearTimeout(timer) cancelAnimationFrame(frame) } }, [refract]) const map = React.useMemo(() => { if (!refract || !shape || shape.w < 2 || shape.h < 2) return undefined const rim = Math.max(1, Math.min(bezel ?? Math.min(shape.r, 24), shape.w / 2, shape.h / 2)) return displacementMap(shape.w, shape.h, shape.r, Math.round(rim), magnify) }, [bezel, magnify, refract, shape]) // animate refraction by scaling the filter, without rebuilding the map React.useEffect(() => { if (!map) return const apply = (v: number) => { applied.current = map.scale * v displaceRef.current?.setAttribute("scale", String(applied.current)) } if (typeof refraction === "number") { apply(refraction) return } apply(refraction.get()) return refraction.on("change", apply) }, [map, refraction]) const ownPresence = useMotionValue(isMotionValue(presence) ? 1 : presence) const visible = isMotionValue(presence) ? presence : ownPresence React.useEffect(() => { if (!isMotionValue(presence)) ownPresence.set(presence) }, [ownPresence, presence]) const rimOpacity = useTransform(visible, (v) => v * 0.95) const strength = isMotionValue(refraction) ? refraction.get() : refraction const backdrop = map ? `url(#${id})` : `blur(${Math.max(frost, 10)}px) saturate(1.6)` return (

:where(:not([data-glass-layer]))]:relative", className)} {...props} > {map && ( )} {/* tint, heavier when there's no refraction so text stays legible */} {/* volume: light gathers inside the top edge, shade settles along the bottom */} {/* rim light: bright where the light comes from (top left), softer opposite */} {children}

) } export { LiquidGlass, useCanRefract, type LiquidGlassProps } 78:T705,import type { CSSProperties } from "react" import type { TargetAndTransition, Transition } from "motion/react" // shared spring presets, every component picks from these export const springs = { snappy: { stiffness: 520, damping: 34, mass: 0.6 }, soft: { stiffness: 260, damping: 26, mass: 0.8 }, glide: { stiffness: 120, damping: 20, mass: 1 }, } as const export type SpringName = keyof typeof springs export function spring(name: SpringName): Transition { return { type: "spring", ...springs[name] } } // how a glow fades once its source moves away: slow, with a long tail export const afterglow = { linger: 0.9, ease: [0.22, 1, 0.36, 1], } as const satisfies { linger: number; ease: Transition["ease"] } // paints only the padding ring of an element, used for glowing borders export const ringMask: CSSProperties = { WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", WebkitMaskComposite: "xor", mask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", maskComposite: "exclude", } // small icon gestures, played when a control is pressed or selected export const iconGestures = { pop: { scale: [1, 1.2, 1] }, ring: { rotate: [0, -18, 14, -9, 4, 0], scale: [1, 1.12, 1] }, // a gear looks the same after half a turn, so it can rest there and snap back unseen turn: { rotate: [0, 180], scale: [1, 1.12, 1] }, hop: { y: [0, -3, 0], scale: [1, 1.1, 1] }, nudge: { x: [0, 2.5, 0], scale: [1, 1.1, 1] }, } satisfies Record export type IconGesture = keyof typeof iconGestures // leaving a gesture is instant: every gesture already ends at, or looks like, its resting pose export const iconRest: TargetAndTransition = { scale: 1, rotate: 0, x: 0, y: 0, transition: { duration: 0 } } 66:["$","$L74",null,{"files":[{"path":"components/ui/glass-sidebar.tsx","content":"$75","type":"registry:ui"},{"path":"components/ui/liquid-search.tsx","content":"$76","type":"registry:ui"},{"path":"components/ui/liquid-glass.tsx","content":"$77","type":"registry:ui"},{"path":"lib/afterglow.ts","content":"$78","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]