@dreamlake/dockit 0.1.1

package/dist/components/TOC.js

@@ -0,0 +1,674 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { usePageContext } from "vike-react/usePageContext";
+import { pages } from "../lib/navigation.js";
+import { siteConfig } from "../site-config.js";
+const TOC_KEY_PREFIX = "toc-collapsed:";
+const X0 = 4;
+const X_INDENT_H3 = 12;
+const BEND = 8;
+const ACTIVATE_LINE = 110;
+const TWEEN_MS = 600;
+function easeOut(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function animateScrollTo(targetY) {
+  const startY = window.scrollY;
+  const distance = targetY - startY;
+  if (Math.abs(distance) < 1) return;
+  const duration = Math.min(700, Math.max(260, Math.abs(distance) * 0.35));
+  const start = performance.now();
+  let cancelled = false;
+  const cancel = () => {
+    cancelled = true;
+  };
+  window.addEventListener("wheel", cancel, { passive: true, once: true });
+  window.addEventListener("touchstart", cancel, { passive: true, once: true });
+  function step(now) {
+    if (cancelled) return;
+    const t = Math.min(1, (now - start) / duration);
+    const eased = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+    window.scrollTo(0, startY + distance * eased);
+    if (t < 1) {
+      requestAnimationFrame(step);
+    } else {
+      window.removeEventListener("wheel", cancel);
+      window.removeEventListener("touchstart", cancel);
+    }
+  }
+  requestAnimationFrame(step);
+}
+function scrollToHeading(e, id) {
+  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
+  const target = document.getElementById(id);
+  if (!target) return;
+  e.preventDefault();
+  const cs = window.getComputedStyle(target);
+  const marginTop = parseFloat(cs.scrollMarginTop) || 0;
+  const targetY = target.getBoundingClientRect().top + window.scrollY - marginTop;
+  animateScrollTo(targetY);
+  history.replaceState(null, "", `#${id}`);
+}
+function TOC() {
+  const { urlPathname } = usePageContext();
+  const mdHref = (() => {
+    const meta = pages.find((p) => p.path === urlPathname);
+    if (!meta || meta.noindex) return null;
+    return urlPathname === "/" ? "/index.md" : `${urlPathname}.md`;
+  })();
+  const editHref = (() => {
+    const meta = pages.find((p) => p.path === urlPathname);
+    if (!meta) return null;
+    const slug = urlPathname === "/" ? "index" : urlPathname.replace(/^\//, "");
+    const pagesPath = siteConfig.docsPagesPath ?? "docs/pages";
+    return `${siteConfig.docsRepoUrl}/edit/${siteConfig.docsBranch}/${pagesPath}/${slug}/+Page.mdx`;
+  })();
+  const issueHref = `${siteConfig.docsRepoUrl}/issues/new`;
+  const [headings, setHeadings] = useState([]);
+  const [endPos, setEndPos] = useState(null);
+  const [pathD, setPathD] = useState("");
+  const bodyRef = useRef(null);
+  const railBaseRef = useRef(null);
+  const activeStrokeRef = useRef(null);
+  const dotRef = useRef(null);
+  const gradientRef = useRef(null);
+  const railPointsRef = useRef([]);
+  const totalLenRef = useRef(0);
+  const currentLenRef = useRef(0);
+  const currentStartRef = useRef(0);
+  const animFromRef = useRef(0);
+  const animToRef = useRef(0);
+  const startAnimFromRef = useRef(0);
+  const startAnimToRef = useRef(0);
+  const animStartRef = useRef(0);
+  const animReqRef = useRef(null);
+  const activeIdRef = useRef(null);
+  const [collapsedH2s, setCollapsedH2s] = useState(() => {
+    if (typeof window === "undefined") return /* @__PURE__ */ new Set();
+    try {
+      return new Set(JSON.parse(localStorage.getItem(TOC_KEY_PREFIX + urlPathname) || "[]"));
+    } catch {
+      return /* @__PURE__ */ new Set();
+    }
+  });
+  const [foldVersion, setFoldVersion] = useState(0);
+  useEffect(() => {
+    try {
+      const stored = JSON.parse(localStorage.getItem(TOC_KEY_PREFIX + urlPathname) || "[]");
+      setCollapsedH2s(new Set(stored));
+    } catch {
+      setCollapsedH2s(/* @__PURE__ */ new Set());
+    }
+  }, [urlPathname]);
+  function toggleH2(id) {
+    setCollapsedH2s((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      localStorage.setItem(TOC_KEY_PREFIX + urlPathname, JSON.stringify([...next]));
+      return next;
+    });
+    setFoldVersion((v) => v + 1);
+  }
+  const h2HasChildren = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    let lastH2 = null;
+    for (const h of headings) {
+      if (h.level === 2) lastH2 = h.id;
+      else if (lastH2) set.add(lastH2);
+    }
+    return set;
+  }, [headings]);
+  const visibleHeadings = useMemo(() => {
+    const result = [];
+    let lastH2Id = null;
+    for (const h of headings) {
+      if (h.level === 2) {
+        lastH2Id = h.id;
+        result.push(h);
+      } else if (lastH2Id && !collapsedH2s.has(lastH2Id)) {
+        result.push(h);
+      }
+    }
+    return result;
+  }, [headings, collapsedH2s]);
+  useEffect(() => {
+    const main = document.querySelector("main.doc-content");
+    if (!main) {
+      setHeadings([]);
+      return;
+    }
+    const current = pages.find((p) => p.path === urlPathname);
+    const tocLevel = current?.tocLevel ?? 3;
+    const selector = tocLevel >= 3 ? "[data-toc-anchor], h3[id]" : "[data-toc-anchor]";
+    function collect() {
+      const nodes = Array.from(
+        main.querySelectorAll(selector)
+      );
+      setHeadings(
+        nodes.map((el) => {
+          const isAnchor = el.hasAttribute("data-toc-anchor");
+          const textSource = isAnchor ? el.nextElementSibling : el;
+          return {
+            id: el.id,
+            text: textSource?.textContent?.replace(/#$/, "").trim() ?? "",
+            level: isAnchor ? 2 : 3,
+            // `el` drives scroll-spy (rect.top vs ACTIVATE_LINE). Always
+            // pick a non-sticky element: the anchor span for H2, the
+            // h3 itself for H3 (h3 is not sticky).
+            el
+          };
+        })
+      );
+    }
+    collect();
+    const mo = new MutationObserver(collect);
+    mo.observe(main, { childList: true, subtree: true });
+    return () => mo.disconnect();
+  }, [urlPathname]);
+  useEffect(() => {
+    if (headings.length === 0 || !bodyRef.current) {
+      railPointsRef.current = [];
+      totalLenRef.current = 0;
+      currentLenRef.current = 0;
+      animFromRef.current = 0;
+      animToRef.current = 0;
+      setPathD("");
+      setEndPos(null);
+      applyRailDOM(0, 0);
+      return;
+    }
+    function buildRail() {
+      const body = bodyRef.current;
+      const base = railBaseRef.current;
+      if (!body || !base) return;
+      const links = Array.from(body.querySelectorAll("ul[data-toc-list] a"));
+      if (links.length === 0) return;
+      const bodyRect = body.getBoundingClientRect();
+      const rows = links.map((a) => {
+        const li = a.parentElement;
+        const r = a.getBoundingClientRect();
+        const indent = li.dataset.level === "3" ? X_INDENT_H3 : 0;
+        return {
+          id: a.getAttribute("href").slice(1),
+          top: r.top - bodyRect.top,
+          h: r.height,
+          indent
+        };
+      });
+      let d = "";
+      const startY = rows[0].top + 4;
+      const startX = X0 + rows[0].indent;
+      d += `M ${startX} ${startY}`;
+      for (let i = 1; i < rows.length; i++) {
+        const prev = rows[i - 1];
+        const cur = rows[i];
+        const prevX = X0 + prev.indent;
+        const curX = X0 + cur.indent;
+        const midY = cur.top + 4;
+        if (prevX === curX) {
+          d += ` L ${curX} ${midY}`;
+        } else {
+          const bendStart = midY - BEND;
+          const bendEnd = midY + 2;
+          d += ` L ${prevX} ${bendStart}`;
+          d += ` C ${prevX} ${bendStart + BEND * 0.6}, ${curX} ${bendStart + BEND * 0.4}, ${curX} ${bendEnd}`;
+        }
+      }
+      const lastRow = rows[rows.length - 1];
+      const endY = lastRow.top + lastRow.h / 2;
+      d += ` L ${X0 + lastRow.indent} ${endY}`;
+      setPathD(d);
+      base.setAttribute("d", d);
+      const pathLen = base.getTotalLength();
+      totalLenRef.current = pathLen;
+      const endPt = base.getPointAtLength(pathLen);
+      setEndPos({ x: endPt.x, y: endPt.y });
+      railPointsRef.current = rows.map((row) => {
+        const midY = row.top + row.h / 2;
+        let lo = 0;
+        let hi = pathLen;
+        for (let k = 0; k < 18; k++) {
+          const mid = (lo + hi) / 2;
+          const p = base.getPointAtLength(mid);
+          if (p.y < midY) lo = mid;
+          else hi = mid;
+        }
+        return { id: row.id, len: (lo + hi) / 2 };
+      });
+      const ai = activeIdRef.current;
+      if (ai) {
+        const match = railPointsRef.current.find((p) => p.id === ai);
+        if (match) {
+          snap(match.len, findParentH2Len(ai));
+        }
+      } else {
+        snap(0, 0);
+      }
+    }
+    function findParentH2Len(id) {
+      let parentH2Id = null;
+      for (const h of visibleHeadings) {
+        if (h.level === 2) parentH2Id = h.id;
+        if (h.id === id) break;
+      }
+      if (!parentH2Id) return 0;
+      const pt = railPointsRef.current.find((p) => p.id === parentH2Id);
+      return pt ? pt.len : 0;
+    }
+    function snap(len, start) {
+      currentLenRef.current = len;
+      currentStartRef.current = start;
+      animFromRef.current = len;
+      animToRef.current = len;
+      startAnimFromRef.current = start;
+      startAnimToRef.current = start;
+      applyRailDOM(start, len);
+    }
+    const raf = requestAnimationFrame(buildRail);
+    const onResize = () => buildRail();
+    window.addEventListener("resize", onResize);
+    if (document.fonts && document.fonts.ready) {
+      document.fonts.ready.then(() => buildRail());
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [headings, foldVersion]);
+  useEffect(() => {
+    if (headings.length === 0) return;
+    let scheduled = false;
+    function pick() {
+      scheduled = false;
+      let id = headings[0].id;
+      for (let i = 0; i < headings.length; i++) {
+        const top = headings[i].el.getBoundingClientRect().top;
+        if (top - ACTIVATE_LINE <= 0.5) id = headings[i].id;
+        else break;
+      }
+      if (id) {
+        const h = headings.find((h2) => h2.id === id);
+        if (h && h.level === 3) {
+          let parentH2 = null;
+          for (const hh of headings) {
+            if (hh.level === 2) parentH2 = hh.id;
+            if (hh.id === id) break;
+          }
+          if (parentH2 && collapsedH2s.has(parentH2)) {
+            setCollapsedH2s((prev) => {
+              const next = new Set(prev);
+              next.delete(parentH2);
+              localStorage.setItem(TOC_KEY_PREFIX + urlPathname, JSON.stringify([...next]));
+              return next;
+            });
+            setFoldVersion((v) => v + 1);
+          }
+        }
+      }
+      const body = bodyRef.current;
+      if (body) {
+        const prev = body.querySelector('a[aria-current="location"]');
+        if (prev) prev.removeAttribute("aria-current");
+        if (id) {
+          const next = body.querySelector(`a[href="#${CSS.escape(id)}"]`);
+          if (next) next.setAttribute("aria-current", "location");
+        }
+      }
+      if (id !== activeIdRef.current) {
+        activeIdRef.current = id;
+        tweenToActiveId(id);
+      }
+    }
+    function onScroll() {
+      if (scheduled) return;
+      scheduled = true;
+      requestAnimationFrame(pick);
+    }
+    pick();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [headings, collapsedH2s]);
+  useEffect(() => {
+    if (!foldVersion || !activeIdRef.current || !bodyRef.current) return;
+    const link = bodyRef.current.querySelector(`a[href="#${CSS.escape(activeIdRef.current)}"]`);
+    if (link) link.scrollIntoView({ block: "nearest", behavior: "auto" });
+  }, [foldVersion]);
+  function applyRailDOM(start, len) {
+    const base = railBaseRef.current;
+    const stroke = activeStrokeRef.current;
+    const dot = dotRef.current;
+    const grad = gradientRef.current;
+    currentStartRef.current = start;
+    currentLenRef.current = len;
+    if (stroke) {
+      const dashLen = Math.max(0, len - start);
+      stroke.style.strokeDasharray = `${dashLen} 99999`;
+      stroke.style.strokeDashoffset = `${-start}`;
+    }
+    if (base && dot) {
+      if (len > 0) {
+        const p = base.getPointAtLength(Math.max(0, len));
+        dot.setAttribute("cx", String(p.x));
+        dot.setAttribute("cy", String(p.y));
+        dot.style.opacity = "1";
+      } else {
+        dot.style.opacity = "0";
+      }
+    }
+    if (base && grad && len > start) {
+      const startPt = base.getPointAtLength(Math.max(0, start));
+      const endPt = base.getPointAtLength(Math.max(0, len));
+      const ah = visibleHeadings.find((h) => h.id === activeIdRef.current);
+      const isH3 = ah && ah.level === 3;
+      const fadeLen = isH3 ? Math.min(8, (endPt.y - startPt.y) * 0.12) : Math.min(40, (endPt.y - startPt.y) * 0.5);
+      grad.setAttribute("y1", String(startPt.y));
+      grad.setAttribute("y2", String(startPt.y + fadeLen));
+    }
+  }
+  function tweenTick(now) {
+    const t = Math.min(1, (now - animStartRef.current) / TWEEN_MS);
+    const k = easeOut(t);
+    const s = startAnimFromRef.current + (startAnimToRef.current - startAnimFromRef.current) * k;
+    const v = animFromRef.current + (animToRef.current - animFromRef.current) * k;
+    applyRailDOM(s, v);
+    if (t < 1) {
+      animReqRef.current = requestAnimationFrame(tweenTick);
+    } else {
+      animReqRef.current = null;
+    }
+  }
+  function tweenTo(targetStart, targetLen) {
+    animFromRef.current = currentLenRef.current;
+    animToRef.current = targetLen;
+    startAnimFromRef.current = currentStartRef.current;
+    startAnimToRef.current = targetStart;
+    animStartRef.current = performance.now();
+    if (animReqRef.current === null) {
+      animReqRef.current = requestAnimationFrame(tweenTick);
+    }
+  }
+  function tweenToActiveId(id) {
+    if (!id) {
+      tweenTo(0, 0);
+      return;
+    }
+    const match = railPointsRef.current.find((p) => p.id === id);
+    if (!match) return;
+    const activeH = visibleHeadings.find((h) => h.id === id);
+    let anchorId = null;
+    if (activeH && activeH.level === 3) {
+      for (const h of visibleHeadings) {
+        if (h.level === 2) anchorId = h.id;
+        if (h.id === id) break;
+      }
+    } else {
+      let prev = null;
+      for (const h of visibleHeadings) {
+        if (h.id === id) break;
+        if (h.level === 2) prev = h.id;
+      }
+      anchorId = prev;
+    }
+    const anchorPt = anchorId ? railPointsRef.current.find((p) => p.id === anchorId) : null;
+    const startLen = anchorPt ? Math.max(0, anchorPt.len - 20) : 0;
+    tweenTo(startLen, match.len);
+  }
+  if (headings.length === 0) return null;
+  const tocAside = /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      "aria-label": "On this page",
+      className: "hidden lg:block sticky overflow-y-auto",
+      style: { top: 40, height: "calc(100vh - 40px)", padding: "32px 22px 32px 18px" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "uppercase border-b border-doc-template-faint text-doc-template-muted",
+            style: {
+              fontFamily: "var(--font-doc-template-mono)",
+              fontSize: 9,
+              fontWeight: 600,
+              opacity: 0.7,
+              letterSpacing: "0.14em",
+              padding: "0 0 10px",
+              marginBottom: 6
+            },
+            children: "On this page"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ref: bodyRef, style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-hidden": true,
+              preserveAspectRatio: "none",
+              style: {
+                position: "absolute",
+                top: 0,
+                bottom: 0,
+                left: 0,
+                width: 28,
+                height: "100%",
+                pointerEvents: "none",
+                overflow: "visible"
+              },
+              children: [
+                /* @__PURE__ */ jsxs("defs", { children: [
+                  /* @__PURE__ */ jsxs("linearGradient", { id: "toc-rail-fade", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "white", stopOpacity: "0" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "0.08", stopColor: "white", stopOpacity: "1" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "1" })
+                  ] }),
+                  /* @__PURE__ */ jsx("mask", { id: "toc-rail-mask", maskUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "url(#toc-rail-fade)" }) }),
+                  /* @__PURE__ */ jsxs("linearGradient", { ref: gradientRef, id: "toc-accent-fade", gradientUnits: "userSpaceOnUse", x1: "0", y1: "0", x2: "0", y2: "0", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "var(--color-doc-template-accent)", stopOpacity: "0" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "var(--color-doc-template-accent)", stopOpacity: "1" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("g", { mask: "url(#toc-rail-mask)", children: [
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      ref: railBaseRef,
+                      d: pathD,
+                      style: {
+                        stroke: "var(--color-doc-template-rail-stroke)",
+                        strokeWidth: 1.5,
+                        fill: "none",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      ref: activeStrokeRef,
+                      d: pathD,
+                      style: {
+                        stroke: "url(#toc-accent-fade)",
+                        strokeWidth: 2,
+                        fill: "none",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeDasharray: "0 99999",
+                        strokeDashoffset: 0
+                      }
+                    }
+                  ),
+                  endPos && /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: endPos.x - 2.5,
+                      y: endPos.y - 2.5,
+                      width: 5,
+                      height: 5,
+                      style: { fill: "var(--color-doc-template-rail-stroke)" }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    ref: dotRef,
+                    cx: 0,
+                    cy: 0,
+                    r: 3.5,
+                    style: {
+                      fill: "var(--color-doc-template-accent)",
+                      opacity: 0
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              "data-toc-list": true,
+              className: "list-none m-0 p-0 flex flex-col",
+              style: { marginLeft: 14, gap: 1 },
+              children: visibleHeadings.map((h) => {
+                const hasFold = h.level === 2 && h2HasChildren.has(h.id);
+                const isFolded = hasFold && collapsedH2s.has(h.id);
+                return /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    "data-level": h.level,
+                    style: h.level === 3 ? { paddingLeft: 12 } : void 0,
+                    children: /* @__PURE__ */ jsxs(
+                      "a",
+                      {
+                        href: `#${h.id}`,
+                        onClick: (e) => scrollToHeading(e, h.id),
+                        "data-level": h.level,
+                        className: "toc-link",
+                        children: [
+                          /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: h.text }),
+                          hasFold && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              role: "button",
+                              tabIndex: 0,
+                              "aria-label": isFolded ? "Expand" : "Collapse",
+                              className: "toc-fold-toggle",
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                toggleH2(h.id);
+                              },
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  toggleH2(h.id);
+                                }
+                              },
+                              children: /* @__PURE__ */ jsx(
+                                "svg",
+                                {
+                                  width: "8",
+                                  height: "8",
+                                  viewBox: "0 0 24 24",
+                                  fill: "none",
+                                  stroke: "currentColor",
+                                  strokeWidth: "3",
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  "aria-hidden": true,
+                                  style: { transform: isFolded ? "rotate(0deg)" : "rotate(90deg)", transition: "transform 0.15s ease" },
+                                  children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+                                }
+                              )
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  },
+                  h.id
+                );
+              })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex flex-col border-t border-doc-template-faint",
+            style: { marginTop: 18, paddingTop: 14, gap: 6 },
+            children: [
+              mdHref && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: mdHref,
+                  rel: "external",
+                  className: "no-underline text-doc-template-muted hover:text-doc-template-ink uppercase",
+                  style: {
+                    padding: "4px 10px 4px 12px",
+                    fontFamily: "var(--font-doc-template-mono)",
+                    fontSize: 10,
+                    fontWeight: 500,
+                    borderLeft: "2px solid transparent",
+                    marginLeft: -2,
+                    letterSpacing: "0.04em"
+                  },
+                  children: "View as Markdown"
+                }
+              ),
+              editHref && /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: editHref,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: "no-underline text-doc-template-muted hover:text-doc-template-ink uppercase",
+                  style: {
+                    padding: "4px 10px 4px 12px",
+                    fontFamily: "var(--font-doc-template-mono)",
+                    fontSize: 10,
+                    fontWeight: 500,
+                    borderLeft: "2px solid transparent",
+                    marginLeft: -2,
+                    letterSpacing: "0.04em"
+                  },
+                  children: "Edit this page"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: issueHref,
+                  target: "_blank",
+                  rel: "noreferrer",
+                  className: "no-underline text-doc-template-muted hover:text-doc-template-ink uppercase",
+                  style: {
+                    padding: "4px 10px 4px 12px",
+                    fontFamily: "var(--font-doc-template-mono)",
+                    fontSize: 10,
+                    fontWeight: 500,
+                    borderLeft: "2px solid transparent",
+                    marginLeft: -2,
+                    letterSpacing: "0.04em"
+                  },
+                  children: "Report an issue"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return tocAside;
+}
+export {
+  TOC
+};

package/dist/components/TabStrip.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Compact tab cluster for the topbar's right side. Six tracked-uppercase
+ * mono labels with a moving 7px ink-colored underbar that slides between
+ * the active (or hovered) tab. Renders inline within the topbar — does
+ * NOT carry its own sticky / blur / background; the topbar wrapper
+ * supplies all that.
+ */
+export declare function TabStrip(): import("react").JSX.Element | null;