50: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/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"],"RegistryDependencies"] 51: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"] 52:T7a22,"use client"; import { CodeBlocks } from "@/components/custom/ui/codeblocks"; import { cn } from "@/lib/utils"; import { ArrowUp, Bookmark, Check, ListFilter, Sparkles, X, } from "lucide-react"; import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react"; import { springLinear } from "./motion-curves"; // The active pill glides between rows on a spring (stiffness 350, damping 30), // as a CSS `linear()` curve generated from the same numbers. const PILL_SPRING = springLinear({ stiffness: 350, damping: 30 }); export interface TOCHeading { id: string; title: string; level: 1 | 2 | 3; } export interface TOCItem { id: string; title: string; level?: 1 | 2 | 3; /** One paragraph, or several rendered in order. */ description?: string | string[]; codeSnippet?: string; badge?: string; } export interface TableOfContentsProps extends React.HTMLAttributes { items?: TOCItem[]; headings?: TOCHeading[]; activeId?: string; onSelectHeading?: (id: string) => void; /** Custom theme accent color (hex, rgb, oklch, or var(--token)) */ color?: string; showProgress?: boolean; showSearch?: boolean; children?: React.ReactNode; sidebarTitle?: string; } /** * The nearest scrollable ancestor, or the window. The block is often mounted * inside a scroll container (docs previews, dashboard panes), and every scroll * action — spy, jump-to-heading, back to top — has to target the same box. */ const findScrollParent = (node: HTMLElement | null): HTMLElement | Window => { if (!node) return window; let parent = node.parentElement; while (parent) { const style = window.getComputedStyle(parent); if ( (style.overflowY === "auto" || style.overflowY === "scroll") && parent.scrollHeight > parent.clientHeight ) { return parent; } parent = parent.parentElement; } return window; }; const DEFAULT_ITEMS: TOCItem[] = [ { id: "overview", title: "Overview & Features", level: 1, description: [ "The Table of Contents component parses document structure and renders a sticky navigation panel with real-time active section indicators. The active indicator pill glides across items on a spring as you scroll, with no animation library behind it. Includes a top scroll progress bar and section search filter out of the box.", "Long-form pages — documentation, changelogs, legal text, knowledge-base articles — are hard to navigate once they pass a couple of screens. The reader loses track of where they are and how much is left. A persistent outline solves both: the highlighted entry answers \"where am I\", the progress bar answers \"how far to go\", and every entry is a one-click jump.", "The component is deliberately layout-agnostic. It works against the window scroll on a normal page, but it also detects the nearest scrollable ancestor, so it behaves identically inside a dashboard pane, a modal body, or a documentation preview with its own overflow container.", ], }, { id: "installation", title: "Installation & Setup", level: 1, description: [ "Integrate the component into your Next.js App Router or React application in seconds using the shadcn CLI registry command below. The one peer dependency, Lucide React, is handled automatically during installation.", "The CLI copies the source into your project rather than adding a package, so the block is yours to edit. Rename the sidebar title, swap the icons, or change the spacing scale — nothing is hidden behind an abstraction you cannot reach.", ], }, { id: "prerequisites", title: "Prerequisites", level: 2, description: [ "Requires Node.js 18+, React 18 or 19, Next.js 14+ (App Router), and Tailwind CSS v4. No animation library is needed.", "The block is a client component: it reads scroll position and element geometry, neither of which exists on the server. Keep it out of server-only files and give it a \"use client\" boundary — the shipped file already declares one.", ], }, { id: "package-install", title: "Package Installation", level: 2, description: [ "Run the official shadcn CLI command to add the Table of Contents component directly to your component registry.", "The command writes the block, its theme helper, and any missing utilities, then reports which files it touched so you can review them before committing.", ], codeSnippet: "npx shadcn@latest add @avara-ui/table-of-contents", }, { id: "configuration", title: "Configuration & Customization", level: 1, description: [ "Customize sidebar placement, scroll offsets, progress bar visibility, and search filter behavior via props. The component inherits your site's global CSS theme tokens and primary color variables seamlessly.", "Every visual choice is expressed through a single CSS variable, --toc-primary, which is derived from the color prop. Because the pill, the progress bar, the active row tint, and the section markers all read that one token, a theme change is a one-line change and the pieces can never drift out of sync.", "When the outline is driven by an external source of truth — a router, a scroll library, a CMS — pass activeId and onSelectHeading and the built-in scroll spy steps aside entirely.", ], }, { id: "tailwind-setup", title: "Tailwind CSS v4 Setup", level: 2, description: [ "Ensure headings include offset classes like scroll-m-24 to prevent fixed site headers from overlapping heading targets during anchor link navigation.", "The offset should match the height of whatever is pinned above the content. A 64px header wants roughly scroll-m-20; a two-row header with a tab bar wants scroll-m-32. The block's own click handler applies a matching offset, so keyboard users, deep links, and sidebar clicks all land in the same place.", ], }, { id: "theme-tokens", title: "Theme Tokens & Variables", level: 2, description: [ "Seamlessly binds to var(--primary) accent colors or custom color props for dynamic theme switching in light and dark modes.", "The color prop accepts a design-token name such as \"emerald\", any CSS color (hex, rgb, hsl, oklch), or a var(--token) reference. Tints are produced with color-mix(), so a single opaque color yields the 10–15% washes used for backgrounds without a second value being supplied.", ], }, { id: "scroll-behavior", title: "Scroll Spy & Progress", level: 2, description: [ "The active entry is the last heading whose top has crossed a reading line a little below the top edge of the scroll box. Reading the outline this way matches how people actually scan a page: the section you are in is the one whose heading you most recently passed.", "Two edge cases get special handling. At the very end of the scroll range the final heading becomes active, even though its top may never reach the reading line. And after a click-initiated jump the spy pauses until the smooth scroll settles, so a heading that the box cannot scroll far enough to reach still keeps the highlight the reader chose.", "Progress is the scroll offset expressed as a share of the total scrollable distance, so it reaches 100% precisely when the box hits its end rather than a screen early.", ], }, { id: "usage-examples", title: "Usage & Code Examples", level: 1, description: [ "Pass a structured items array containing section titles, descriptions, and code snippets to generate structured document layouts effortlessly.", "Each item carries an id, a title, and an optional level from 1 to 3. Level-two and level-three entries indent in the sidebar and render as subsections in the body, so a single flat array is enough to describe a nested outline — no tree structure to build or keep in sync.", ], }, { id: "custom-content", title: "Bringing Your Own Content", level: 2, description: [ "When the page already has its own markup, pass it as children and supply a headings array instead of items. The sidebar still spies, filters, and jumps; it simply stops rendering the body for you. The only contract is that each heading id exists on an element in the document.", "This is the mode to reach for with MDX, CMS output, or any content pipeline that produces HTML: generate the heading list from the same source and hand both to the block.", ], }, { id: "controlled-mode", title: "Controlled Active State", level: 2, description: [ "Supply activeId to take over the highlight entirely. The scroll spy is skipped while the prop is set, and onSelectHeading reports every click so the parent can update its own state, push a route, or record analytics before deciding what becomes active.", ], }, { id: "accessibility", title: "Accessibility & ARIA", level: 1, description: [ "Built with WCAG 2.1 compliance using semantic

landmarks, ARIA labels, full keyboard navigation focus states, and screen reader announcements.", "Every entry is a real button, so it is reachable with Tab and activated with Enter or Space without any custom key handling. The sidebar is wrapped in a labelled

landmark, which lets screen-reader users jump straight to it from the landmark list and skip past it just as easily.", "Motion is limited to the indicator pill and the progress bar. Both are decorative — the active state is also conveyed by weight and color — so the outline stays fully usable when animations are reduced or unavailable.", ], }, { id: "performance", title: "Performance & Bundle Size", level: 1, description: [ "The block adds a single scroll listener, registered as passive so it never blocks the compositor, and the listener does nothing more than a handful of getBoundingClientRect reads and one state update. Heading elements are looked up by id on each pass, which keeps the component correct when content is added or removed at runtime without requiring a resize observer.", "There is no animation library to ship. The indicator pill's glide is a single Web Animations API call per move, eased along a spring curve precomputed as CSS linear(), so the block costs nothing beyond its own code and Lucide's icons.", ], }, { id: "ssr-hydration", title: "Server Rendering & Hydration", level: 2, description: [ "On the server the block renders its full markup — sidebar, progress bar, body sections — with the first heading marked active and progress at 0%. Nothing depends on window at render time, so there is no hydration mismatch and the outline is present in the initial HTML for crawlers and for readers on slow connections.", "Once hydrated, the first scroll pass runs immediately and corrects the active heading if the page loaded part-way down, for example from a deep link with a hash fragment.", ], }, { id: "troubleshooting", title: "Troubleshooting", level: 1, description: [ "If the highlight never moves, the heading ids in the sidebar do not match ids in the document; open the inspector and compare them character for character. If jumps land a little too high or low, the scroll-margin on the headings and the offset in the click handler disagree. If Back to Top appears to do nothing, the block is inside a scroll container the parent page cannot see — the component resolves that container itself, so check that the container really is the element with overflow set.", ], }, { id: "faq", title: "Frequently Asked Questions", level: 1, description: [ "Can the sidebar sit on the right? Yes — the layout is a 12-column grid, so swapping the column order of the two children moves it. Can it collapse on desktop? Wrap the sidebar in your own disclosure; the block does not impose one. Does it work with hash links? A deep link scrolls the browser to the heading, and the first spy pass then highlights it.", "Does search filter the body too? No — the filter narrows the sidebar only, so the reader's place on the page is never disturbed while they look for a section. Clearing the field restores the full outline.", ], }, ]; export function TableOfContentsBlock({ items, headings: rawHeadings, activeId: externalActiveId, onSelectHeading, color = "var(--primary)", showProgress = true, showSearch = true, children, sidebarTitle = "On this page", className, ...props }: TableOfContentsProps) { // Normalize items array or fall back to default items const displayItems = useMemo(() => { if (items && items.length > 0) return items; if (rawHeadings && rawHeadings.length > 0) { return rawHeadings.map((h) => ({ id: h.id, title: h.title, level: h.level, })); } return DEFAULT_ITEMS; }, [items, rawHeadings]); const headings = useMemo(() => { return displayItems.map((item) => ({ id: item.id, title: item.title, level: item.level || 1, })); }, [displayItems]); const [spiedActiveId, setActiveId] = useState( headings[0]?.id || "" ); // A supplied `activeId` takes precedence; otherwise the scroll spy decides. const activeId = externalActiveId || spiedActiveId; const [scrollProgress, setScrollProgress] = useState(0); const [searchQuery, setSearchQuery] = useState(""); const [copiedId, setCopiedId] = useState(null); const contentRef = useRef(null); const navRef = useRef(null); // Set while a click-initiated smooth scroll is in flight. The spy stays // quiet until it lands, so a heading near the end of the page — where the // scroll can stop short of it — keeps the highlight the user just chose. const scrollLockRef = useRef | null>(null); // Auto scroll-spy & progress calculation (supports window scroll & container scroll) useEffect(() => { const scrollContainer = findScrollParent(contentRef.current); const handleScroll = () => { let scrollTop: number; let totalHeight: number; if (scrollContainer === window) { scrollTop = window.scrollY; totalHeight = document.documentElement.scrollHeight - window.innerHeight; } else { const containerEl = scrollContainer as HTMLElement; scrollTop = containerEl.scrollTop; totalHeight = containerEl.scrollHeight - containerEl.clientHeight; } if (totalHeight > 0) { const currentProgress = (scrollTop / totalHeight) * 100; setScrollProgress(Math.min(100, Math.max(0, currentProgress))); } // Scroll spy headings if (!externalActiveId && headings.length > 0 && !scrollLockRef.current) { const headingElements = headings .map((h) => document.getElementById(h.id)) .filter(Boolean) as HTMLElement[]; if (headingElements.length === 0) return; // Once the box is scrolled to the end, the remaining headings all sit // inside the last viewport and their tops can never cross the // activation line — so the highlight would stall a few items short // of the bottom. At the end, the last heading is the one being read. const atBottom = totalHeight > 0 && scrollTop >= totalHeight - 2; if (atBottom) { setActiveId(headingElements[headingElements.length - 1].id); return; } const scrollPosition = scrollTop + 120; let nextId = headingElements[0].id; for (let i = headingElements.length - 1; i >= 0; i--) { const el = headingElements[i]; const elementTop = scrollContainer === window ? el.offsetTop : el.getBoundingClientRect().top - (scrollContainer as HTMLElement).getBoundingClientRect().top + (scrollContainer as HTMLElement).scrollTop; if (elementTop <= scrollPosition) { nextId = el.id; break; } } setActiveId(nextId); } }; scrollContainer.addEventListener("scroll", handleScroll as EventListener, { passive: true, }); handleScroll(); return () => scrollContainer.removeEventListener( "scroll", handleScroll as EventListener ); }, [headings, externalActiveId]); // Smooth-scroll the box to `top`, holding the spy off until it lands. // `scrollend` releases the hold as soon as the scroll settles; the timeout // covers browsers without the event. When the box is already there (or the // target is past the end and it can't move) nothing is armed, so a manual // scroll right after the click is not ignored. const smoothScrollTo = (scrollContainer: HTMLElement | Window, top: number) => { const current = scrollContainer === window ? window.scrollY : (scrollContainer as HTMLElement).scrollTop; const max = scrollContainer === window ? document.documentElement.scrollHeight - window.innerHeight : (scrollContainer as HTMLElement).scrollHeight - (scrollContainer as HTMLElement).clientHeight; const target = Math.min(Math.max(top, 0), Math.max(max, 0)); if (scrollLockRef.current) clearTimeout(scrollLockRef.current); const release = () => { if (scrollLockRef.current) clearTimeout(scrollLockRef.current); scrollLockRef.current = null; scrollContainer.removeEventListener("scrollend", release); }; if (Math.abs(target - current) >= 1) { scrollContainer.addEventListener("scrollend", release, { once: true }); scrollLockRef.current = setTimeout(release, 1000); } scrollContainer.scrollTo({ top: target, behavior: "smooth" }); }; useEffect( () => () => { if (scrollLockRef.current) clearTimeout(scrollLockRef.current); }, [], ); // The sidebar list has its own scroll box. As the reader moves down the // page the highlight can drift out of that box; nudge the list so the active // entry stays in view. Only the list is scrolled — scrollIntoView would also // move every scrollable ancestor, including the page itself. useEffect(() => { const nav = navRef.current; if (!nav || !activeId) return; const item = nav.querySelector( `[data-toc-id="${CSS.escape(activeId)}"]`, ); if (!item) return; const navRect = nav.getBoundingClientRect(); const itemRect = item.getBoundingClientRect(); const itemTop = itemRect.top - navRect.top + nav.scrollTop; const itemBottom = itemTop + itemRect.height; const padding = 12; if (itemTop < nav.scrollTop + padding) { nav.scrollTo({ top: itemTop - padding, behavior: "smooth" }); } else if (itemBottom > nav.scrollTop + nav.clientHeight - padding) { nav.scrollTo({ top: itemBottom - nav.clientHeight + padding, behavior: "smooth", }); } }, [activeId]); // Filter headings by search query const filteredHeadings = useMemo(() => { if (!searchQuery.trim()) return headings; return headings.filter((h) => h.title.toLowerCase().includes(searchQuery.toLowerCase()) ); }, [headings, searchQuery]); // The pill lives in the active row, so it is always where it belongs; when // that row changes (or moves, as the filter adds and removes rows) it is // drawn from where it was and springs home. Positions are in px from the top // of the nav's scroll content, which scrolling never changes. const pillRef = useRef(null); // Where the pill last came to rest — the "from" of the next move. const pillRestRef = useRef(null); const pillMotionRef = useRef<{ animation: Animation; offset: number } | null>( null, ); useLayoutEffect(() => { const pill = pillRef.current; const row = pill?.parentElement; if (!pill || !row) { // Filtered out: the pill reappears in place, without a glide. pillRestRef.current = null; pillMotionRef.current = null; return; } const restingTop = () => row.offsetTop + pill.offsetTop; const rest = restingTop(); const before = pillRestRef.current; pillRestRef.current = rest; if (before !== null) { // Where the pill is on screen right now: its last resting place, // plus whatever is left of a glide still in flight. let shown = before; const inFlight = pillMotionRef.current; if (inFlight) { const progress = inFlight.animation.effect?.getComputedTiming().progress; if (progress != null) shown += inFlight.offset * (1 - progress); inFlight.animation.cancel(); } const offset = shown - rest; pillMotionRef.current = Math.abs(offset) < 0.5 ? null : { animation: pill.animate( [ { transform: `translateY(${offset}px)` }, { transform: "translateY(0px)" }, ], { duration: PILL_SPRING.duration, easing: PILL_SPRING.easing }, ), offset, }; } // Layout can also move without a render — the sidebar appearing at the // lg breakpoint, a web font swapping in. Keep the resting place current. const observer = new ResizeObserver(() => { pillRestRef.current = restingTop(); }); if (navRef.current) observer.observe(navRef.current); observer.observe(row); return () => observer.disconnect(); }, [activeId, filteredHeadings]); // Smooth scroll to heading (handles both Window & Container Scroll) const scrollToHeading = (id: string) => { setActiveId(id); onSelectHeading?.(id); const el = document.getElementById(id); if (!el) return; const scrollContainer = findScrollParent(contentRef.current); if (scrollContainer === window) { const yOffset = -90; const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset; smoothScrollTo(window, y); } else { const container = scrollContainer as HTMLElement; const containerRect = container.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const relativeTop = elRect.top - containerRect.top + container.scrollTop; smoothScrollTo(container, relativeTop - 20); } }; // Scroll whichever box actually scrolls — `window.scrollTo` is a no-op when // the block sits inside an overflow container. const scrollToTop = () => { smoothScrollTo(findScrollParent(contentRef.current), 0); setActiveId(headings[0]?.id || ""); if (headings[0]) onSelectHeading?.(headings[0].id); }; const copyHeadingLink = (id: string, e: React.MouseEvent) => { e.stopPropagation(); const url = `${window.location.origin}${window.location.pathname}#${id}`; navigator.clipboard.writeText(url); setCopiedId(id); setTimeout(() => setCopiedId(null), 2000); }; // Resolve accent color token or custom color string const resolvedColor = useMemo(() => { if (!color) return "var(--primary)"; if ( color === "primary" || color.startsWith("var(") || color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl") || color.startsWith("oklch") ) { return color === "primary" ? "var(--primary)" : color; } // If named color like "blue", "emerald", "violet" etc., resolve to hex or CSS variable const colorMap: Record = { blue: "#3b82f6", indigo: "#6366f1", violet: "#8b5cf6", purple: "#a855f7", pink: "#ec4899", rose: "#f43f5e", red: "#ef4444", orange: "#f97316", amber: "#f59e0b", yellow: "#eab308", emerald: "#10b981", green: "#22c55e", teal: "#14b8a6", cyan: "#06b6d4", sky: "#0ea5e9", }; return colorMap[color] || color; }, [color]); return (

{/* MOBILE TOP BAR (DYNAMIC ACTIVE HEADING TITLE ON SCROLL) */}

{sidebarTitle} {headings.find((h) => h.id === activeId)?.title || headings[0]?.title}

{Math.round(scrollProgress)}%

{/* STICKY LEFT-SIDE TABLE OF CONTENTS SIDEBAR */}

{/* Header Title & Progress Bar */}

{sidebarTitle} {Math.round(scrollProgress)}%

{showProgress && (

)}

{/* Optional Search Filter Input */} {showSearch && (

setSearchQuery(e.target.value)} className="w-full h-8 px-3 rounded-xl bg-muted/60 border border-border/60 text-xs text-foreground placeholder:text-muted-foreground outline-none transition-all focus:border-[var(--toc-primary)]" /> {searchQuery && ( )}

)} {/* Navigation List */}

{/* Vertical Track Line */}

{filteredHeadings.map((heading) => { const isActive = activeId === heading.id; return (

{/* Active Indicator Pill */} {isActive && (

)}

); })}

{/* Back to Top Quick Action */}

{filteredHeadings.length} Sections

{/* MAIN RIGHT CONTENT AREA */}

{children || (

{displayItems.map((item) => { const level = item.level || 1; return (

{level === 1 ? (

{item.title}

) : (

{item.title}

)} {item.description && (Array.isArray(item.description) ? item.description : [item.description] ).map((paragraph, i) => (

{paragraph}

))} {item.codeSnippet && (

)}

); })}

)}

); } export default TableOfContentsBlock; 53:T248f,/** * Motion curves with no animation library behind them. * * The components here ship as CSS, GSAP or Motion builds that must move * identically, so the curves are computed once, from the same numbers, and * handed to whichever engine runs them: * * - `cubicBezier(x1, y1, x2, y2)` → an easing function (GSAP accepts any * `(progress) => value` as `ease`), exact for Motion's `ease: [..]` arrays * and for CSS `cubic-bezier()`. * - `spring({ stiffness, damping, mass })` → the analytic solution Motion * Motion uses, as an easing function plus the time it takes to settle, or * as a CSS `linear()` string for a fixed start and end. * - `createSpringFollower` → a value that chases a moving target through the * same spring every frame, like Motion's `useSpring`, for pointer-driven * motion that no fixed curve can describe. */ // --------------------------------------------------------------------------- // Cubic bezier // --------------------------------------------------------------------------- /** * The CSS / Motion cubic-bezier as a function of progress. Newton-Raphson * with a bisection fallback, the same solver browsers use. */ export function cubicBezier(x1: number, y1: number, x2: number, y2: number) { if (x1 === y1 && x2 === y2) return (t: number) => t; const a = (p1: number, p2: number) => 1 - 3 * p2 + 3 * p1; const b = (p1: number, p2: number) => 3 * p2 - 6 * p1; const c = (p1: number) => 3 * p1; const at = (t: number, p1: number, p2: number) => ((a(p1, p2) * t + b(p1, p2)) * t + c(p1)) * t; const slope = (t: number, p1: number, p2: number) => 3 * a(p1, p2) * t * t + 2 * b(p1, p2) * t + c(p1); const solveX = (x: number) => { let t = x; for (let i = 0; i < 8; i++) { const s = slope(t, x1, x2); if (Math.abs(s) < 1e-6) break; const err = at(t, x1, x2) - x; if (Math.abs(err) < 1e-7) return t; t -= err / s; } let lo = 0; let hi = 1; t = x; for (let i = 0; i < 30 && hi - lo > 1e-7; i++) { const value = at(t, x1, x2); if (value < x) lo = t; else hi = t; t = (lo + hi) / 2; } return t; }; return (x: number) => (x <= 0 ? 0 : x >= 1 ? 1 : at(solveX(x), y1, y2)); } /** Motion's named eases, as the cubic-beziers they are. */ export const MOTION_EASE = { linear: [0, 0, 1, 1], easeIn: [0.42, 0, 1, 1], easeOut: [0, 0, 0.58, 1], easeInOut: [0.42, 0, 0.58, 1], circIn: [0.55, 0, 1, 0.45], circOut: [0.55, 0, 0.45, 1], circInOut: [0.85, 0, 0.15, 1], backIn: [0.31, 0.01, 0.66, -0.59], backOut: [0.33, 1.53, 0.69, 0.99], anticipate: [0.66, -0.56, 0.34, 1.35], } as const; /** * Motion's default layout transition (`layout` / `layoutId`): * `{ duration: 0.45, ease: [0.4, 0, 0.1, 1] }`. */ export const LAYOUT_TRANSITION = { duration: 0.45, ease: [0.4, 0, 0.1, 1] as const }; // --------------------------------------------------------------------------- // Spring // --------------------------------------------------------------------------- export interface SpringOptions { /** Motion default 100. */ stiffness?: number; /** Motion default 10. */ damping?: number; /** Motion default 1. */ mass?: number; /** Starting velocity, in units of the whole distance per second. */ velocity?: number; /** How close to the end counts as settled, as a fraction of the distance. */ restDelta?: number; } /** * Normalised position (0 → 1) of a spring released from 0 towards 1, at time * `t` seconds. The closed-form solution Motion's `spring()` generator * uses for the under-, critically and over-damped cases. */ export function springAt(options: SpringOptions = {}) { const { stiffness = 100, damping = 10, mass = 1, velocity = 0 } = options; const zeta = damping / (2 * Math.sqrt(stiffness * mass)); const omega0 = Math.sqrt(stiffness / mass); // Motion's convention: distance still to cover, velocity toward it negated. const delta = 1; const v0 = -velocity; if (zeta < 1) { const omegaD = omega0 * Math.sqrt(1 - zeta * zeta); return (t: number) => { const envelope = Math.exp(-zeta * omega0 * t); return ( 1 - envelope * (((v0 + zeta * omega0 * delta) / omegaD) * Math.sin(omegaD * t) + delta * Math.cos(omegaD * t)) ); }; } if (zeta === 1) { return (t: number) => 1 - Math.exp(-omega0 * t) * (delta + (v0 + omega0 * delta) * t); } const omegaD = omega0 * Math.sqrt(zeta * zeta - 1); return (t: number) => { const envelope = Math.exp(-zeta * omega0 * t); const freq = Math.min(omegaD * t, 300); return ( 1 - (envelope * ((v0 + zeta * omega0 * delta) * Math.sinh(freq) + omegaD * delta * Math.cosh(freq))) / omegaD ); }; } /** Seconds until the spring stays within `restDelta` of its end. */ export function springDuration(options: SpringOptions = {}) { const at = springAt(options); const restDelta = options.restDelta ?? 0.001; const step = 1 / 240; let lastOutside = 0; for (let t = 0; t <= 10; t += step) { if (Math.abs(1 - at(t)) > restDelta) lastOutside = t; else if (t - lastOutside > 0.1) break; } return Math.max(lastOutside + step, step); } /** * A spring as a duration and an easing function over it — what GSAP takes: * * const { duration, ease } = springEase({ stiffness: 300, damping: 20 }); * gsap.to(el, { y: 0, duration, ease }); * * Exact for a fixed start and end; a spring that has to react mid-flight to a * new target needs `createSpringFollower` instead. */ export function springEase(options: SpringOptions = {}) { const duration = springDuration(options); const at = springAt(options); return { duration, ease: (progress: number) => (progress >= 1 ? 1 : at(progress * duration)), }; } /** * A spring as a CSS `linear()` easing and its duration in ms, for * `transition` / `animation` with a fixed start and end. * * const { easing, duration } = springLinear({ stiffness: 400, damping: 30 }); * el.style.transition = `transform ${duration}ms ${easing}`; */ export function springLinear(options: SpringOptions = {}, pointsPerSecond = 60) { const duration = springDuration(options); const at = springAt(options); const count = Math.max(Math.ceil(duration * pointsPerSecond), 8); const points: string[] = []; for (let i = 0; i <= count; i++) { const t = (i / count) * duration; points.push(String(Math.round((i === count ? 1 : at(t)) * 10000) / 10000)); } return { easing: `linear(${points.join(", ")})`, duration: Math.round(duration * 1000) }; } // --------------------------------------------------------------------------- // Spring follower (useSpring equivalent) // --------------------------------------------------------------------------- /** Something that calls back once per frame with the time since the last, in ms. */ export interface FrameTicker { add: (callback: (deltaMs: number) => void) => () => void; } /** requestAnimationFrame as a ticker — the library-free default. */ export const rafTicker: FrameTicker = { add(callback) { let last = performance.now(); let frame = requestAnimationFrame(function tick(now) { callback(now - last); last = now; frame = requestAnimationFrame(tick); }); return () => cancelAnimationFrame(frame); }, }; export interface SpringFollower { /** Chase a new target from wherever the value is now, keeping its velocity. */ set: (target: number) => void; /** Move to a value instantly, with no motion. */ jump: (value: number) => void; get: () => number; destroy: () => void; } /** * A value that follows its target through a spring, integrating the same * equation of motion Motion's `useSpring` solves — so a pointer-driven spring * reads the same in every build. Runs only while moving; `onUpdate` receives * each new value. */ export function createSpringFollower( initial: number, onUpdate: (value: number) => void, options: SpringOptions & { restSpeed?: number; ticker?: FrameTicker } = {}, ): SpringFollower { const { stiffness = 100, damping = 10, mass = 1, ticker = rafTicker } = options; const restDelta = options.restDelta ?? 0.01; const restSpeed = options.restSpeed ?? 0.01; let value = initial; let target = initial; let velocity = 0; let stop: (() => void) | null = null; const step = (deltaMs: number) => { // Fixed 1ms sub-steps keep the integration stable for stiff springs and // independent of the frame rate. const steps = Math.min(Math.max(Math.round(deltaMs), 1), 250); for (let i = 0; i < steps; i++) { const force = -stiffness * (value - target) - damping * velocity; velocity += (force / mass) * 0.001; value += velocity * 0.001; } if (Math.abs(target - value) < restDelta && Math.abs(velocity) < restSpeed) { value = target; velocity = 0; stop?.(); stop = null; } onUpdate(value); }; return { set(next) { target = next; if (!stop && value !== target) stop = ticker.add(step); }, jump(next) { stop?.(); stop = null; value = target = next; velocity = 0; onUpdate(value); }, get: () => value, destroy() { stop?.(); stop = null; }, }; } 4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@avara-ui","registryDependencies":["https://avaraui.com/r/ui-codeblocks.json","utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/custom/blocks/TableOfContentsBlock.tsx","content":"$52","type":"registry:component","target":"components/custom/blocks/TableOfContentsBlock.tsx"},{"path":"src/components/custom/blocks/motion-curves.ts","content":"$53","type":"registry:component","target":"components/custom/blocks/motion-curves.ts"}],"className":"h-[70svh] min-h-80"}]]}]