4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[544296,["/_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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"ItemStyles"] 4f:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"CodeEditor"] 50: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T3a8e,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { createMotionLane, useChoreography } from "@/lib/cojeev-motion/choreography"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { Button } from "@/components/ui/button"; import { Icon } from "@/components/ui/icon"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; export type ReadingTrailItem = { id: string; label: React.ReactNode; description?: React.ReactNode; }; export type ReadingTrailPresentation = "spine" | "bookmark" | "overview"; export type ReadingTrailState = { activeId: string | null; progress: number }; export type ReadingTrailProps = Omit< React.ComponentProps<"nav">, "children" > & { /** IDs of sections in this document. Labels and links render on the server. */ items: readonly ReadingTrailItem[]; label?: string; /** Omit to track the document; pass a mounted scroll container for a panel. */ scrollRoot?: HTMLElement | null; /** Activation line below the scroll viewport's top, in pixels. */ offset?: number; /** Optional compositions; omission preserves the original document TOC. */ presentation?: ReadingTrailPresentation; }; /** Reading progress runs from the first section to the scroll viewport's end. */ export function getReadingTrailState( sections: readonly { id: string; top: number }[], scrollTop: number, viewportHeight: number, scrollHeight: number, offset = 24, ): ReadingTrailState { const ordered = sections .filter((section) => Number.isFinite(section.top)) .toSorted((a, b) => a.top - b.top); if (!ordered.length) return { activeId: null, progress: 0 }; const safe = (value: number) => Number.isFinite(value) ? Math.max(0, value) : 0; const end = Math.max(0, safe(scrollHeight) - safe(viewportHeight)); const position = Math.min(end, safe(scrollTop)); const start = Math.min(end, Math.max(0, ordered[0].top - safe(offset))); let activeId = ordered[0].id; for (const section of ordered) if (section.top <= position + safe(offset) + 1) activeId = section.id; if (end > 0 && position >= end - 1) activeId = ordered[ordered.length - 1].id; const progress = end <= start ? 1 : Math.max(0, Math.min(1, (position - start) / (end - start))); return { activeId, progress }; } export function ReadingTrail({ items, label = "On this page", scrollRoot, offset = 24, className, ref, presentation, ...props }: ReadingTrailProps) { const host = React.useRef(null); const list = React.useRef(null); const marker = React.useRef(null); const restoreFocusTarget = React.useRef<() => void>(() => {}); const lane = React.useRef | null>(null); const { quiet, transition } = useChoreography(); const { enabled, inView } = useMotionVisibility(host); // Duplicate/empty IDs cannot represent distinct fragment destinations. const idsKey = JSON.stringify( items .map((item) => item.id) .filter((id, index, all) => id && all.indexOf(id) === index), ); const ids = React.useMemo(() => JSON.parse(idsKey), [idsKey]); const [state, setState] = React.useState({ activeId: null, progress: 0, }); const [markerY, setMarkerY] = React.useState(16); const [measured, setMeasured] = React.useState(false); const [contentsOpen, setContentsOpen] = React.useState(false); const contentsTrigger = React.useRef(null); const bookmark = presentation === "bookmark"; const activeId = measured ? state.activeId : (ids[0] ?? null); const labelId = React.useId(); const bindRef = React.useCallback( (element: HTMLElement | null) => { host.current = element; if (typeof ref === "function") return ref(element); if (ref) ref.current = element; }, [ref], ); React.useEffect(() => { let frame = 0; let disposed = false; const targets = () => ids .map((id) => document.getElementById(id)) .filter( (element): element is HTMLElement => !!element && (!scrollRoot || scrollRoot.contains(element)), ); const measure = () => { frame = 0; if (disposed || document.hidden) return; const viewportTop = scrollRoot ? scrollRoot.getBoundingClientRect().top + scrollRoot.clientTop : 0; const position = scrollRoot ? scrollRoot.scrollTop : window.scrollY; const viewportHeight = scrollRoot ? scrollRoot.clientHeight : window.innerHeight; const scrollHeight = scrollRoot ? scrollRoot.scrollHeight : document.documentElement.scrollHeight; const next = getReadingTrailState( targets().map((element) => ({ id: element.id, top: element.getBoundingClientRect().top - viewportTop + position, })), position, viewportHeight, scrollHeight, offset, ); // Limit semantic updates while retaining a smooth native progress value. next.progress = Math.round(next.progress * 1000) / 1000; setState((previous) => previous.activeId === next.activeId && previous.progress === next.progress ? previous : next, ); setMeasured(true); const link = list.current?.querySelector( `[data-trail-index="${ids.indexOf(next.activeId ?? "")}"]`, ); if (link && list.current) setMarkerY( link.getBoundingClientRect().top - list.current.getBoundingClientRect().top + link.getBoundingClientRect().height / 2 - 6, ); }; const schedule = () => { if (!frame && !disposed) frame = window.requestAnimationFrame(measure); }; const resize = new ResizeObserver(schedule); const observeTargets = () => { resize.disconnect(); resize.observe(scrollRoot ?? document.documentElement); if (!scrollRoot) resize.observe(document.body); if (host.current) resize.observe(host.current); for (const element of targets()) resize.observe(element); }; observeTargets(); const mutations = new MutationObserver((records) => { // Our progress text and marker paint must not recursively invalidate geometry. if (records.every((record) => host.current?.contains(record.target))) return; observeTargets(); schedule(); }); mutations.observe(scrollRoot ?? document.body, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["id", "hidden"], }); const scroller = scrollRoot ?? window; scroller.addEventListener("scroll", schedule, { passive: true }); window.addEventListener("resize", schedule); window.addEventListener("hashchange", schedule); document.addEventListener("visibilitychange", schedule); void document.fonts?.ready.then(schedule); measure(); return () => { disposed = true; cancelAnimationFrame(frame); resize.disconnect(); mutations.disconnect(); scroller.removeEventListener("scroll", schedule); window.removeEventListener("resize", schedule); window.removeEventListener("hashchange", schedule); document.removeEventListener("visibilitychange", schedule); }; }, [ids, offset, scrollRoot, presentation, contentsOpen]); React.useEffect(() => { const element = marker.current; if (!element) return; const painter = createMotionLane(markerY, (value) => element.style.setProperty("--trail-marker-y", `${value}px`), ); lane.current = painter; painter.jump(markerY); return () => { painter.dispose(); lane.current = null; }; // The painter owns one mounted marker; subsequent geometry retargets it below. // eslint-disable-next-line react-hooks/exhaustive-deps }, [bookmark, contentsOpen]); React.useEffect(() => { if (quiet || !enabled || !inView) lane.current?.jump(markerY); else lane.current?.to(markerY, transition); }, [markerY, quiet, enabled, inView, transition]); React.useEffect(() => () => restoreFocusTarget.current(), []); const follow = (event: React.MouseEvent, id: string) => { if ( event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ) return; const target = document.getElementById(id); if (!target || (scrollRoot && !scrollRoot.contains(target))) return; event.preventDefault(); // Keep a genuine same-document URL and back/forward entry without a second jump. const fragment = `#${encodeURIComponent(id)}`; if (window.location.hash !== fragment) window.history.pushState(window.history.state, "", fragment); const behavior = quiet ? "instant" : "smooth"; if (scrollRoot) { // scrollIntoView would also move every scrollable ancestor, including the page. const padding = getComputedStyle(scrollRoot).scrollPaddingTop; const paddingTop = (Number.parseFloat(padding) || 0) * (padding.endsWith("%") ? scrollRoot.clientHeight / 100 : 1); const marginTop = Number.parseFloat(getComputedStyle(target).scrollMarginTop) || 0; const top = target.getBoundingClientRect().top - scrollRoot.getBoundingClientRect().top - scrollRoot.clientTop + scrollRoot.scrollTop - paddingTop - marginTop; scrollRoot.scrollTo({ top, behavior }); } else { target.scrollIntoView({ behavior, block: "start", inline: "nearest" }); } restoreFocusTarget.current(); if (!target.hasAttribute("tabindex")) { target.setAttribute("tabindex", "-1"); const restore = () => { target.removeEventListener("blur", restore); if (target.getAttribute("tabindex") === "-1") target.removeAttribute("tabindex"); restoreFocusTarget.current = () => {}; }; restoreFocusTarget.current = restore; target.addEventListener("blur", restore, { once: true }); } target.focus({ preventScroll: true }); }; const activeIndex = ids.indexOf(activeId ?? ""); const current = items.find((item) => item.id === activeId); const track = (

follow(event, id)} > {items.find((item) => item.id === id)?.label} {presentation && items.find((item) => item.id === id)?.description && ( {items.find((item) => item.id === id)?.description} )}

); const jump = (index: number, direction: "previous" | "next") => { const id = ids[index], title = direction === "previous" ? "Previous chapter" : "Next chapter"; const icon = ( ); return id && activeIndex >= 0 ? ( ) : ( ); }; return (

{label}

{bookmark ? ( { if (event.key === "Escape" && contentsOpen) { event.preventDefault(); setContentsOpen(false); contentsTrigger.current?.focus(); } }} >

Currently reading {current?.label ?? "Choose a chapter"}

{jump(activeIndex - 1, "previous")} {jump(activeIndex + 1, "next")}

{track} ) : ( track )} {!ids.length && (

No sections to follow.

)}

); } 52:T2a73,@layer cojeev-states { .v-reading-trail__track { position: relative; } .v-reading-trail { min-inline-size: 0; inline-size: 100%; color: var(--v-text); font-family: var(--font-text); font-size: var(--fs-control); } .v-reading-trail__heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-end: var(--s-3); font-weight: var(--fw-title); } .v-reading-trail__heading > span:last-child { flex: none; color: var(--v-text-2); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } .v-reading-trail__progress { display: block; appearance: none; border: 0; inline-size: 100%; block-size: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--v-beige-2); color: var(--v-pink); margin-block-end: var(--s-4); } .v-reading-trail__progress::-webkit-progress-bar { background: var(--v-beige-2); border-radius: inherit; } .v-reading-trail__progress::-webkit-progress-value { background: var(--v-pink); border-radius: inherit; } .v-reading-trail__progress::-moz-progress-bar { background: var(--v-pink); border-radius: inherit; } .v-reading-trail__list { position: relative; display: grid; gap: var(--s-1); padding: 0; list-style: none; margin: 0; } .v-reading-trail__list::before { position: absolute; content: ""; inset-block: 20px; inset-inline-start: 7px; inline-size: 1px; background: var(--v-border); pointer-events: none; } .v-reading-trail__list > li { position: relative; min-inline-size: 0; } .v-reading-trail__list a { position: relative; display: flex; align-items: baseline; gap: var(--s-2); min-block-size: 44px; padding: var(--s-3) var(--s-2) var(--s-3) var(--s-8); border-radius: var(--r-sm); background: transparent; color: var(--v-text-2); text-decoration: none; line-height: 1.4; overflow-wrap: anywhere; transition: color 0.28s cubic-bezier(0.2, 0.65, 0.25, 1), translate 0.32s cubic-bezier(0.2, 0.65, 0.25, 1); } .v-reading-trail__list a::after { position: absolute; content: ""; inset-inline-start: var(--s-8); inset-block-end: 8px; inline-size: 0; block-size: 2px; border-radius: var(--r-pill); background: var(--v-pink); opacity: 0.8; transition: inline-size 0.32s cubic-bezier(0.2, 0.65, 0.25, 1); } .v-reading-trail__list a:hover { background: transparent; color: var(--v-text); } .v-reading-trail__list a:hover::after { inline-size: 18px; } .v-reading-trail__list a:focus-visible { background: transparent; color: var(--v-text); translate: none; } .v-reading-trail__list a[aria-current="location"] { color: var(--v-text); font-weight: var(--fw-title); } .v-reading-trail__list a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .v-reading-trail__number { flex: none; white-space: nowrap; min-inline-size: 2ch; font-size: var(--fs-meta); color: var(--v-text-3); font-variant-numeric: tabular-nums; font-weight: var(--fw-body); } .v-reading-trail__marker { position: absolute; z-index: 1; pointer-events: none; inset-inline-start: 0; inset-block-start: 0; inline-size: 15px; block-size: 12px; transform: translateY(var(--trail-marker-y, 16px)); color: var(--v-ink); } .v-reading-trail__marker svg { inline-size: 100%; block-size: 100%; fill: currentColor; } .v-reading-trail__empty { margin: 0; color: var(--v-text-2); font-size: var(--fs-meta); } @media (forced-colors: active) { .v-reading-trail__list::before { background: CanvasText; } .v-reading-trail__marker { color: CanvasText; } .v-reading-trail__list a[aria-current="location"] { outline: 1px solid Highlight; } .v-reading-trail__progress { forced-color-adjust: auto; } } @media (prefers-reduced-motion: reduce) { .v-reading-trail__list a, .v-reading-trail__list a::after { transition: none; } .v-reading-trail__list a:hover { translate: none; } } .v-reading-trail__chapter { display: grid; gap: 6px; min-width: 0; } .v-reading-trail__description { font-size: 12px; line-height: 1.55; color: var(--v-text-2); font-weight: var(--fw-body); } .v-reading-trail[data-presentation] { container-type: inline-size; } .v-reading-trail[data-presentation] .v-reading-trail__heading { font-size: 12px; letter-spacing: 0.02em; } .v-reading-trail[data-presentation] .v-reading-trail__list a { align-items: start; padding-block: 16px; } .v-reading-trail[data-presentation="spine"] { padding: 20px 16px; border-block-start: 2px solid var(--v-ink); } .v-reading-trail[data-presentation="spine"] .v-reading-trail__list a[aria-current] { background: color-mix(in srgb, var(--v-pink) 14%, transparent); border-radius: 4px 16px 16px 4px; } .v-reading-trail[data-presentation="spine"] .v-reading-trail__marker { color: var(--v-pink); } .v-reading-trail[data-presentation="bookmark"] { padding: 18px 20px 8px; border: 1px solid var(--v-border); border-radius: 22px 22px 8px 8px; background: var(--v-canvas); } .v-reading-trail__bookmark { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; } .v-reading-trail__folio { display: grid; place-items: center; width: 44px; height: 58px; padding-bottom: 8px; background: var(--v-yellow); color: var(--v-on-accent); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%); font-family: var(--font-mono); font-size: 19px; } .v-reading-trail__current { display: grid; gap: 4px; min-width: 0; } .v-reading-trail__current > span { font-size: 11px; color: var(--v-text-2); } .v-reading-trail__current strong { font-size: 16px; font-family: var(--font-display); font-weight: var(--fw-title); line-height: 1.35; } .v-reading-trail__arrows { display: flex; gap: 4px; } .v-reading-trail__jump { width: 44px; height: 44px; min-width: 44px; padding: 0; } .v-reading-trail__contents { margin-top: 8px; width: 100%; justify-content: space-between; padding: 0 4px; min-height: 44px; font-size: 12px; border-top: 1px dashed var(--v-border); border-radius: 0; } .v-reading-trail[data-presentation="overview"] { padding-top: 16px; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__marker, .v-reading-trail[data-presentation="overview"] .v-reading-trail__list::before { display: none; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list li { display: flex; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list a { flex: 1; display: grid; align-content: start; gap: 14px; padding: 18px; border: 1px solid var(--v-border); border-radius: 16px; background: var(--v-canvas); } .v-reading-trail[data-presentation="overview"] .v-reading-trail__number { font-size: 20px; color: var(--v-text-2); } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list a[aria-current] { border-color: var(--v-text-2); background: color-mix(in srgb, var(--v-blue) 12%, var(--v-canvas)); } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list a::after { inset-inline-start: 18px; top: 45px; bottom: auto; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list a[aria-current]::after { inline-size: 24px; } .v-reading-trail[data-quiet="true"] .v-reading-trail__list a, .v-reading-trail[data-quiet="true"] .v-reading-trail__list a::after { transition: none; } @container (max-width:380px) { .v-reading-trail__bookmark { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; } .v-reading-trail__folio { width: 36px; } .v-reading-trail__arrows { grid-column: 2; justify-self: end; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list { grid-template-columns: 1fr; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list a { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; } .v-reading-trail[data-presentation="overview"] .v-reading-trail__list a::after { top: 47px; } } .v-reading-example { display: grid; gap: 20px; width: 100%; min-width: 0; container-type: inline-size; } .v-reading-example__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--v-border); } .v-reading-example__heading h3 { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.3; } .v-reading-example__heading span { color: var(--v-text-2); font-size: 11px; white-space: nowrap; } .v-reading-example__layout { display: grid; grid-template-columns: minmax(150px, 0.75fr) minmax(0, 1.5fr); gap: 20px; align-items: start; } .v-reading-example:not([data-presentation="spine"]) .v-reading-example__layout { grid-template-columns: minmax(0, 1fr); } .v-reading-example[data-presentation="overview"] .v-reading-trail { order: 2; } .v-reading-example .v-reading-example__reader[data-slot] { --h: 400px; border: 1px solid var(--v-border); border-radius: 20px; background: var(--v-canvas); } .v-reading-example__reader[data-slot] > .v-reading-example__article[data-slot] { height: 400px; padding: 0; scroll-padding-block-start: 24px; } .v-reading-example__section { min-height: 440px; padding: 24px 28px 36px; border-bottom: 1px dashed var(--v-border); } .v-reading-example__section:last-child { border-bottom: 0; } .v-reading-example__edition { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--v-text-2); font-size: 10px; letter-spacing: 0.04em; } .v-reading-example__edition > span:last-child { font-size: 22px; font-family: var(--font-mono); color: var(--v-text-2); } .v-reading-example__section h4 { font-family: var(--font-display); font-size: 27px; line-height: 1.2; font-weight: var(--fw-title); max-width: 18ch; margin: 0 0 22px; } .v-reading-example__section p { font-size: 14px; line-height: 1.7; margin: 0 0 18px; max-width: 54ch; } .v-reading-example__section p:last-child { color: var(--v-text-2); border-inline-start: 2px solid var(--v-blue); padding-inline-start: 14px; } .v-reading-example__hint { margin: 0; font-size: 11px; color: var(--v-text-2); line-height: 1.55; } @container (max-width:460px) { .v-reading-example__layout { grid-template-columns: minmax(0, 1fr); } .v-reading-example__heading { align-items: start; flex-direction: column; gap: 6px; } .v-reading-example__section { padding-inline: 20px; } .v-reading-example__section h4 { font-size: 24px; } } } 4c:["$","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,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json","https://000h.cojeev.com/r/button.json","https://000h.cojeev.com/r/icon.json","https://000h.cojeev.com/r/collapsible.json"]}]]}],["$","$L4e",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/reading-trail.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/reading-trail.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/reading-trail.css","content":"$52","type":"registry:file","target":"styles/cojeev/reading-trail.css"}],"className":"h-[70svh] min-h-80"}]]}]