2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T28b2,"use client"; import { useCallback, useEffect, useMemo, useRef, useState, type ComponentProps } from "react"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; export type FloatingTocHeading = { id: string; title: string; level: 1 | 2 | 3 }; const ROW = 32; const MAX_LIST = 288; const VIRTUALIZE_AFTER = 80; const BAR_WIDTH = { 1: "w-6", 2: "w-4", 3: "w-2.5" } as const; const POSITION = { fixed: "fixed top-1/2 z-30 -translate-y-1/2", absolute: "absolute top-1/2 z-30 -translate-y-1/2", sticky: "sticky top-24 self-start", } as const; export type FloatingTocProps = Omit, "defaultValue" | "onChange"> & { headings: FloatingTocHeading[]; placement?: "left" | "right"; /** `fixed` to the viewport edge, `absolute` inside a relative frame, or `sticky` in flow beside an article. */ position?: keyof typeof POSITION; /** `hover` opens the list on pointer hover (and on press or Enter); `press` only on press. */ triggerMode?: "hover" | "press"; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; /** Active heading id (controlled). */ value?: string; defaultValue?: string; onValueChange?: (id: string) => void; /** The scrolling element the headings live in. Omit for the page. */ scrollRoot?: HTMLElement | null; /** Distance from the top of the scroll area at which a heading becomes active. */ offset?: number; /** Window the list. Defaults to on above 80 headings. */ virtualize?: boolean; /** Most bars drawn in the collapsed rail; long documents are sampled. */ maxBars?: number; label?: string; }; export function FloatingToc({ headings, placement = "right", position = "fixed", triggerMode = "hover", open, defaultOpen, onOpenChange, value, defaultValue, onValueChange, scrollRoot, offset = 96, virtualize, maxBars = 22, label = "On this page", className, ...props }: FloatingTocProps) { const [inner, setInner] = useState(defaultValue ?? headings[0]?.id ?? ""); const active = value ?? inner; const setActive = useCallback( (id: string) => { setInner(id); onValueChange?.(id); }, [onValueChange], ); const activeRef = useRef(active); useEffect(() => { activeRef.current = active; }); // Track the heading nearest the top of the scroll area with an IntersectionObserver. useEffect(() => { if (!headings.length) return; const els = headings.map((h) => document.getElementById(h.id)); const visible = new Set(); const lineTop = () => (scrollRoot ? scrollRoot.getBoundingClientRect().top : 0) + offset; const io = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) visible.add(e.target.id); else visible.delete(e.target.id); } let next = headings.find((h) => visible.has(h.id))?.id; if (!next) { // Nothing in the band: the last heading above the line is current, else the first. const line = lineTop(); next = headings[0].id; for (let i = 0; i < els.length; i++) { const el = els[i]; if (el && el.getBoundingClientRect().top <= line) next = headings[i].id; else if (el) break; } } if (next !== activeRef.current) setActive(next); }, { root: scrollRoot ?? null, rootMargin: `${-offset}px 0px -62% 0px`, threshold: 0, }, ); els.forEach((el) => el && io.observe(el)); return () => io.disconnect(); }, [headings, scrollRoot, offset, setActive]); const go = useCallback( (id: string) => { const el = document.getElementById(id); if (!el) return; const smooth = !window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (scrollRoot) { const top = el.getBoundingClientRect().top - scrollRoot.getBoundingClientRect().top + scrollRoot.scrollTop - offset + 8; scrollRoot.scrollTo({ top, behavior: smooth ? "smooth" : "auto" }); } else { const top = el.getBoundingClientRect().top + window.scrollY - offset + 8; window.scrollTo({ top, behavior: smooth ? "smooth" : "auto" }); } setActive(id); }, [scrollRoot, offset, setActive], ); const windowed = virtualize ?? headings.length > VIRTUALIZE_AFTER; const activeIndex = Math.max(0, headings.findIndex((h) => h.id === active)); const side = placement === "left" ? "right" : "left"; // Rail bars: one per heading, or an even sample of them for long documents. const bars = useMemo(() => { if (headings.length <= maxBars) return headings.map((h, i) => ({ level: h.level, from: i, to: i })); const size = headings.length / maxBars; return Array.from({ length: maxBars }, (_, b) => { const from = Math.floor(b * size); const to = Math.min(headings.length - 1, Math.floor((b + 1) * size) - 1); const level = Math.min(...headings.slice(from, to + 1).map((h) => h.level)) as 1 | 2 | 3; return { level, from, to }; }); }, [headings, maxBars]); if (!headings.length) return null; return (

onOpenChange?.(o)}> {bars.map((b, i) => ( = b.from && activeIndex <= b.to ? "" : undefined} className={cn( "h-0.5 rounded-full bg-foreground/25 transition-[background-color,width] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/toc:bg-foreground/35 data-[active]:bg-foreground group-hover/toc:data-[active]:bg-foreground motion-reduce:transition-none", BAR_WIDTH[b.level], )} /> ))}

{label}

); } function TocList({ headings, active, onSelect, windowed, activeIndex, }: { headings: FloatingTocHeading[]; active: string; onSelect: (id: string) => void; windowed: boolean; activeIndex: number; }) { const wrap = useRef(null); const [top, setTop] = useState(0); const height = Math.min(headings.length * ROW, MAX_LIST); const viewport = () => wrap.current?.querySelector("[data-slot=scroll-area-viewport]") ?? null; useEffect(() => { const vp = viewport(); if (!vp) return; let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setTop(vp.scrollTop)); }; vp.addEventListener("scroll", onScroll, { passive: true }); // Open on the active row; the scroll event this fires seeds `top`. vp.scrollTop = Math.max(0, activeIndex * ROW - height / 2 + ROW / 2); onScroll(); return () => { cancelAnimationFrame(raf); vp.removeEventListener("scroll", onScroll); }; // Only on mount: later active changes are handled below without recentering on every scroll. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Keep the active row visible while the panel is open and the page scrolls. useEffect(() => { const vp = viewport(); if (!vp) return; const rowTop = activeIndex * ROW; if (rowTop < vp.scrollTop) vp.scrollTop = rowTop; else if (rowTop + ROW > vp.scrollTop + height) vp.scrollTop = rowTop + ROW - height; }, [activeIndex, height]); const start = windowed ? Math.max(0, Math.floor(top / ROW) - 4) : 0; const end = windowed ? Math.min(headings.length, Math.ceil((top + height) / ROW) + 4) : headings.length; return (

); } 31:T1207,"use client"; import { useMemo, useState } from "react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { DemoPage, DemoSection } from "../../_shared/variant-frame"; import { articleSections, longHeadings, type ArticleSection } from "../_fixtures-c"; import { FloatingToc, type FloatingTocHeading, type FloatingTocProps } from "./floating-toc"; const HEADING_TAG = { 1: "h2", 2: "h3", 3: "h4" } as const; const HEADING_CLASS = { 1: "text-lg font-medium", 2: "text-base font-medium", 3: "font-medium text-muted-foreground" } as const; function Article({ sections, prefix, className }: { sections: ArticleSection[]; prefix: string; className?: string }) { return (

{sections.map((s) => { const Tag = HEADING_TAG[s.level]; return (

{s.title} {s.paragraphs.map((p, i) => (

{p}

))}

); })}

); } const tocFor = (prefix: string): FloatingTocHeading[] => articleSections.map((s) => ({ id: `${prefix}-${s.id}`, title: s.title, level: s.level })); /** A framed scroller holding a document, with the TOC laid over its edge. */ function Frame({ prefix, headings, children, className, ...toc }: { prefix: string; headings: FloatingTocHeading[]; children: React.ReactNode; className?: string } & Partial) { const [root, setRoot] = useState(null); return (

{children}

); } export function FloatingTocDemo() { const [open, setOpen] = useState(true); const [active, setActive] = useState(`c-${articleSections[0].id}`); const longDoc = useMemo(() => longHeadings.map((h) => ({ ...h, id: `long-${h.id}` })), []); return (

Active: {active}

{longDoc.map((h) => (

{h.title}

Reference text for {h.title.toLowerCase()}.

))}

); } export default FloatingTocDemo; 32:T769,import type { BlockMeta } from "../../../lib/block-meta"; export const floatingTocMeta: BlockMeta = { slug: "floating-toc", title: "Floating TOC", description: "Scroll-tracked table of contents: a rail of collapsed bars that opens a hierarchical list on hover or press, with left or right placement, controlled open and a windowed list for very long documents.", group: "data", kobraDeps: ["popover", "scroll-area"], files: ["blocks/data/floating-toc/floating-toc.tsx"], props: [ { name: "headings", type: "{ id: string; title: string; level: 1 | 2 | 3 }[]", description: "Headings in document order. Each id must exist in the page." }, { name: "placement", type: "'left' | 'right'", default: "'right'", description: "Which edge the rail sits on; the list opens inward." }, { name: "position", type: "'fixed' | 'absolute' | 'sticky'", default: "'fixed'", description: "Fixed to the viewport, absolute in a relative frame, or sticky in flow." }, { name: "triggerMode", type: "'hover' | 'press'", default: "'hover'", description: "Hover opens on pointer hover as well as press and Enter; press opens on click only." }, { name: "open / defaultOpen / onOpenChange", type: "boolean", description: "Controlled list visibility." }, { name: "value / defaultValue / onValueChange", type: "string", description: "Active heading id." }, { name: "scrollRoot", type: "HTMLElement | null", description: "The scrolling element; omit for the page." }, { name: "offset", type: "number", default: "96", description: "Distance from the top at which a heading becomes active." }, { name: "virtualize", type: "boolean", default: "auto above 80", description: "Window the list." }, { name: "maxBars", type: "number", default: "22", description: "Bars in the rail; long documents are sampled." }, ], tags: ["navigation", "toc", "scroll"], status: "ready", }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#data","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Data display"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Floating TOC"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Floating TOC"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Scroll-tracked table of contents: a rail of collapsed bars that opens a hierarchical list on hover or press, with left or right placement, controlled open and a windowed list for very long documents."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"floating-toc","group":"data","minHeight":640,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/data/floating-toc/floating-toc.tsx","code":"$30"},{"path":"blocks/data/floating-toc/demo.tsx","code":"$31"},{"path":"blocks/data/floating-toc/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]