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[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",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(1 0 0 / 55%)"}}] 56:["$","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:null 74:T381d,"use client" import * as React from "react" import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue } from "motion/react" import { buildTrack, lengthAt, useRailRows, type RailTrack } from "@/components/ui/rail-path" import { cn } from "@/lib/utils" type ReadingRailItem = { /** matches the `id` of the heading it points to */ id: string label: string /** Optional destination when the rail is used for page navigation. */ href?: string /** indents the row, and bends the rail sideways to reach it; 0 is a top level heading */ depth?: number } type ReadingRailProps = Omit, "children"> & { items: ReadingRailItem[] /** the element that scrolls; leave it out to follow the page */ container?: HTMLElement | null /** how far below the top of the view a heading counts as reached, in px */ offset?: number title?: string /** Controls the active item for route-based navigation instead of scroll tracking. */ activeId?: string /** Called when a controlled item is selected. */ onActiveIdChange?: (id: string) => void /** Enlarges the rail for a standalone contents view. */ size?: "default" | "large" } const RAIL_X = 7 const STEP = 14 function RailDot({ x, y, at, reached, current, index, large }: { x: number y: number at: number reached: MotionValue current: number index: number large: boolean }) { // Let the travelling arrow cover a dot as it arrives, rather than hiding the destination early. const opacity = useTransform(reached, (length) => large && current >= 0 ? Math.min(1, Math.max(0, (Math.abs(length - at) - 9) / 10)) : 1 ) const passed = useTransform(reached, (length) => length + 0.5 >= at ? 1 : 0) if (large) { return ( ) } return ( ) } // a table of contents on a dashed rail that bends in where a heading is indented. a solid line fills // the rail as you read, and a small endpoint bead follows the path function ReadingRail({ items, container = null, offset = 24, title = "On this page", activeId, onActiveIdChange, size = "default", className, ...props }: ReadingRailProps) { const reduceMotion = useReducedMotion() const stemId = React.useId() const large = size === "large" const railX = large ? 12 : RAIL_X const step = large ? 30 : STEP const list = React.useRef(null) const base = React.useRef(null) const trackRef = React.useRef(null) const [current, setCurrent] = React.useState(0) const position = useMotionValue(0) const direction = useMotionValue(0) const previousTarget = React.useRef(null) const rows = useRailRows(list, railX, step, items) const track = React.useMemo(() => buildTrack(rows ?? [], 7, large ? "diagonal" : "rounded"), [large, rows]) // the fill, in px along the path. one spring drives the line and endpoint bead together const reached = useSpring(0, reduceMotion ? { duration: 0 } : { stiffness: 240, damping: 31, mass: 1 }) const rotation = useSpring(direction, reduceMotion ? { duration: 0 } : { stiffness: 260, damping: 28, mass: 0.7 }) const fill = useMotionValue(0) const x = useMotionValue(railX) const y = useMotionValue(0) const moveTo = React.useCallback((target: number) => { if (large && previousTarget.current !== null && Math.abs(target - previousTarget.current) > 0.5) { const angle = target < previousTarget.current ? 180 : 0 if (reduceMotion) { direction.jump(angle) rotation.jump(angle) } else { direction.set(angle) } } if (previousTarget.current === null || Math.abs(target - previousTarget.current) > 0.5) previousTarget.current = target if (reduceMotion) reached.jump(target) else reached.set(target) }, [direction, large, reached, reduceMotion, rotation]) React.useEffect(() => { trackRef.current = track const target = lengthAt(track, position.get()) moveTo(target) }, [moveTo, position, track]) // keep the line and the ember on the path const place = React.useCallback( (length: number) => { const path = base.current const total = trackRef.current?.total ?? 0 if (!path || !total) return const clamped = Math.max(0, Math.min(length, total)) fill.set(clamped / total) const here = path.getPointAtLength(clamped) x.set(here.x) y.set(here.y) }, [fill, x, y] ) React.useEffect(() => reached.on("change", place), [place, reached]) // when the rows are measured or move, put the ember back where the rail now is React.useEffect(() => place(reached.get()), [place, reached, track]) // keep the active row visible when the rail itself sits inside a scrollable sidebar React.useEffect(() => { if (current < 0) return const row = list.current?.children.item(current)?.querySelector("button, a") if (!row) return let viewport = list.current?.parentElement ?? null while (viewport && viewport !== document.body && viewport !== document.documentElement) { const style = window.getComputedStyle(viewport) const canScroll = /auto|scroll/.test(style.overflowY) && viewport.scrollHeight > viewport.clientHeight + 1 if (canScroll) { const rowBounds = row.getBoundingClientRect() const viewportBounds = viewport.getBoundingClientRect() const top = viewportBounds.top + viewport.clientTop const bottom = top + viewport.clientHeight const margin = 12 if (rowBounds.top < top + margin) { viewport.scrollTo({ top: viewport.scrollTop + rowBounds.top - top - margin, behavior: reduceMotion ? "auto" : "smooth" }) } else if (rowBounds.bottom > bottom - margin) { viewport.scrollTo({ top: viewport.scrollTop + rowBounds.bottom - bottom + margin, behavior: reduceMotion ? "auto" : "smooth" }) } return } viewport = viewport.parentElement } }, [current, reduceMotion]) React.useEffect(() => { let frame = 0 const measure = () => { frame = 0 if (activeId !== undefined) { const index = items.findIndex((item) => item.id === activeId) if (index < 0) { position.set(0); moveTo(0); reached.jump(0); setCurrent(-1); return } position.set(index) const length = lengthAt(trackRef.current ?? track, index) moveTo(length) setCurrent(index) return } const top = container ? container.getBoundingClientRect().top : 0 const line = top + offset const tops = items.map((item) => document.getElementById(item.id)?.getBoundingClientRect().top ?? Infinity) let index = -1 tops.forEach((value, i) => { if (value <= line + 1) index = i }) const scrollable = container ? container.scrollHeight - container.clientHeight : document.documentElement.scrollHeight - window.innerHeight const scrolled = container ? container.scrollTop : window.scrollY // scroll snapping can settle a few pixels before the exact scroll limit const atEnd = scrollable > 0 && scrolled >= scrollable - Math.max(24, offset) let next: number if (atEnd) next = items.length - 1 else if (index < 0) next = 0 else if (index >= items.length - 1) next = items.length - 1 else { const span = tops[index + 1] - tops[index] next = index + (span > 0 ? Math.min(Math.max((line - tops[index]) / span, 0), 1) : 0) } position.set(next) const length = lengthAt(trackRef.current ?? track, next) moveTo(length) setCurrent(atEnd ? items.length - 1 : Math.max(index, 0)) } const schedule = () => { if (!frame) frame = requestAnimationFrame(measure) } schedule() const scroller: HTMLElement | Window = container ?? window scroller.addEventListener("scroll", schedule, { passive: true }) window.addEventListener("resize", schedule) return () => { cancelAnimationFrame(frame) scroller.removeEventListener("scroll", schedule) window.removeEventListener("resize", schedule) } }, [activeId, container, items, moveTo, offset, position, reached, track]) function go(id: string) { if (activeId !== undefined) { onActiveIdChange?.(id) return } const target = document.getElementById(id) if (!target) return const behavior = reduceMotion ? "auto" : "smooth" if (container) { const delta = target.getBoundingClientRect().top - (container.getBoundingClientRect().top + offset) container.scrollTo({ top: container.scrollTop + delta, behavior }) } else { window.scrollTo({ top: window.scrollY + target.getBoundingClientRect().top - offset, behavior }) } } return (

{large && ( )}

{title}

go(item.id)} aria-current={index === current ? "location" : undefined} className={cn( cn("group flex min-h-8 w-full cursor-pointer items-center rounded-lg py-1.5 pr-2 text-left text-[13px] leading-snug outline-none transition-colors duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring motion-reduce:transition-none", large && "min-h-[56px] rounded-none py-1.5 text-[22px] font-medium sm:min-h-[68px] sm:text-[26px]"), index === current ? (large ? "font-semibold text-foreground" : "font-medium text-foreground") : large ? "text-foreground/60 hover:text-foreground/90 focus-visible:text-foreground" : index < current ? "text-foreground/70 hover:text-foreground" : "text-foreground/45 hover:text-foreground" )} style={{ paddingLeft: (large ? 40 : 28) + (item.depth ?? 0) * step }} > {item.label}

) } export { ReadingRail, type ReadingRailItem, type ReadingRailProps } 75:Tde6,"use client" import * as React from "react" // the geometry that the rail components share: a path drawn through the centre of every row, // stepping sideways with rounded elbows where a row is indented, and a short curved hook that // turns off the rail into a row type RailRow = { x: number; y: number } type RailTrack = { /** the full path, from the first row to the last */ d: string /** how far along the path each row sits, in px */ at: number[] total: number } /** a path through every row. rows that sit at a different x get a rounded jog halfway between them */ function buildTrack(rows: RailRow[], radius = 7, bend: "rounded" | "diagonal" = "rounded"): RailTrack { if (!rows.length) return { d: "", at: [], total: 0 } let d = `M ${rows[0].x} ${rows[0].y}` let length = 0 const at = [0] for (let i = 1; i < rows.length; i++) { const a = rows[i - 1] const b = rows[i] if (a.x === b.x) { d += ` V ${b.y}` length += b.y - a.y } else { if (bend === "diagonal") { const mid = (a.y + b.y) / 2 const half = Math.min(Math.abs(b.x - a.x) / 2, (b.y - a.y) / 4) d += ` V ${mid - half} L ${b.x} ${mid + half} V ${b.y}` length += b.y - a.y - 2 * half + Math.hypot(b.x - a.x, 2 * half) at.push(length) continue } const dir = b.x > a.x ? 1 : -1 const dx = Math.abs(b.x - a.x) const r = Math.min(radius, dx / 2, (b.y - a.y) / 4) const mid = (a.y + b.y) / 2 d += ` V ${mid - r} A ${r} ${r} 0 0 ${dir === 1 ? 0 : 1} ${a.x + dir * r} ${mid} H ${b.x - dir * r}` d += ` A ${r} ${r} 0 0 ${dir === 1 ? 1 : 0} ${b.x} ${mid + r} V ${b.y}` length += mid - r - a.y + (Math.PI * r) / 2 + (dx - 2 * r) + (Math.PI * r) / 2 + (b.y - mid - r) } at.push(length) } return { d, at, total: length } } /** how far along the track a position is, where 1.5 means halfway between the second and third row */ function lengthAt(track: RailTrack, position: number) { if (!track.at.length) return 0 const clamped = Math.min(Math.max(position, 0), track.at.length - 1) const index = Math.min(Math.floor(clamped), track.at.length - 2) if (index < 0) return 0 const t = clamped - index return track.at[index] + (track.at[index + 1] - track.at[index]) * t } /** * measures the centre of each `[data-rail-row]` inside the list. a row's `data-depth` shifts it * sideways by `step` px. returns null until the first measure, so nothing is drawn on the server */ function useRailRows(list: React.RefObject, x: number, step: number, watch: unknown) { const [rows, setRows] = React.useState(null) React.useEffect(() => { const node = list.current if (!node) return let frame = 0 const measure = () => { frame = 0 const found = Array.from(node.querySelectorAll("[data-rail-row]")) setRows( found.map((row) => ({ x: x + Number(row.dataset.depth ?? 0) * step, y: row.offsetTop + row.offsetHeight / 2, })) ) } const schedule = () => { if (!frame) frame = requestAnimationFrame(measure) } schedule() const observer = new ResizeObserver(schedule) observer.observe(node) node.querySelectorAll("[data-rail-row]").forEach((row) => observer.observe(row)) return () => { cancelAnimationFrame(frame) observer.disconnect() } }, [list, x, step, watch]) return rows } export { buildTrack, lengthAt, useRailRows, type RailRow, type RailTrack } 76: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:["$","$L73",null,{"files":[{"path":"components/ui/reading-rail.tsx","content":"$74","type":"registry:ui"},{"path":"components/ui/rail-path.tsx","content":"$75","type":"registry:ui"},{"path":"lib/afterglow.ts","content":"$76","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]