52: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"] 53: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"] 54:T15ea,'use client'; import * as React from 'react'; import { focusRing } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { useLabels } from '@/components/ui/labels-context'; export interface TableOfContentsItem { // Id of the heading element in the page. id: string; label: React.ReactNode; // Heading depth for the indent. Default 1. level?: 1 | 2 | 3; } export interface TableOfContentsProps extends Omit, 'onChange'> { items: TableOfContentsItem[]; // Controlled active id. Without it the active heading is tracked while scrolling. activeId?: string; onActiveChange?: (id: string) => void; // Accessible name of the navigation landmark. Defaults to the provider text. label?: string; // Root margin of the observer. The default activates a heading once it reaches the upper third of the viewport. rootMargin?: string; // Scroll container when the page does not scroll the window. scrollRoot?: Element | null; // Space kept above a heading after a jump, so a sticky header does not cover it. `topbar` and `topbar-lg` follow the // topbar size tokens (default `topbar`), a number is a pixel offset for custom headers, `none` disables it. scrollOffset?: 'topbar' | 'topbar-lg' | 'none' | number; // `brand` also colours the active entry with the brand text role. The marker and weight stay, so colour is never the only cue. activeTone?: 'default' | 'brand'; } const offsetValue = (offset: NonNullable) => { if (offset === 'none') return ''; if (offset === 'topbar') return 'var(--size-topbar)'; if (offset === 'topbar-lg') return 'var(--size-topbar-lg)'; return `${offset}px`; }; const indent = { 1: 'pl-3', 2: 'pl-6', 3: 'pl-9' } as const; // Table of contents with scroll tracking. The active link carries aria-current="location" and a bold weight plus a marker, not color alone. const TableOfContents = React.forwardRef( ({ className, items, activeId: activeIdProp, onActiveChange, label: labelProp, rootMargin = '0px 0px -66% 0px', scrollRoot, scrollOffset = 'topbar', activeTone = 'default', ...props }, ref) => { const l = useLabels(labelProp ? { tableOfContents: labelProp } : undefined); const [tracked, setTracked] = React.useState(items[0]?.id); const active = activeIdProp ?? tracked; const onChangeRef = React.useRef(onActiveChange); onChangeRef.current = onActiveChange; const idsKey = items.map((item) => item.id).join('|'); React.useEffect(() => { if (activeIdProp !== undefined || typeof IntersectionObserver === 'undefined') return undefined; const ids = idsKey ? idsKey.split('|') : []; const visible = new Set(); const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) visible.add(entry.target.id); else visible.delete(entry.target.id); }); const next = ids.find((id) => visible.has(id)); if (next) { setTracked(next); onChangeRef.current?.(next); } }, { root: scrollRoot ?? null, rootMargin }, ); ids.forEach((id) => { const el = document.getElementById(id); if (el) observer.observe(el); }); return () => observer.disconnect(); }, [idsKey, activeIdProp, rootMargin, scrollRoot]); // The native anchor jump honours scroll-margin, so the offset also applies to deep links and keyboard activation. React.useEffect(() => { const value = offsetValue(scrollOffset); if (!value) return undefined; const targets = (idsKey ? idsKey.split('|') : []).map((id) => document.getElementById(id)).filter((el): el is HTMLElement => el !== null); const previous = targets.map((el) => el.style.scrollMarginTop); targets.forEach((el) => { el.style.scrollMarginTop = value; }); return () => { targets.forEach((el, index) => { el.style.scrollMarginTop = previous[index]; }); }; }, [idsKey, scrollOffset]); return ( ); }, ); TableOfContents.displayName = 'TableOfContents'; export { TableOfContents }; 51:["$","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":[null,["$","$L52",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/table-of-contents.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]