zudoku 0.0.0-e614aaa → 0.0.0-e6d1d34

package/lib/Toc-YBsgI72s.js

@@ -0,0 +1,92 @@
+import { j as e } from "./jsx-runtime-CYK1ROHF.js";
+import { ListTreeIcon as x } from "lucide-react";
+import { useRef as l, useState as h, useEffect as f } from "react";
+import { c } from "./cn-qaFjX9_3.js";
+import { u as v, A as g } from "./Markdown-aF5FdsNi.js";
+const d = "data-active", p = ({
+  item: s,
+  children: r,
+  className: n,
+  isActive: o
+}) => /* @__PURE__ */ e.jsxs("li", { className: c("truncate", n), title: s.value, children: [
+  /* @__PURE__ */ e.jsx(
+    g,
+    {
+      to: `#${s.id}`,
+      [d]: s.id,
+      className: c(
+        o ? "text-primary" : "hover:text-accent-foreground text-muted-foreground"
+      ),
+      children: s.value
+    }
+  ),
+  r
+] }), R = ({ entries: s }) => {
+  const { activeAnchor: r } = v(), n = l(null), o = l(!1), [u, i] = h({
+    top: 0,
+    opacity: 0
+  });
+  return f(() => {
+    if (!n.current) return;
+    const t = n.current.querySelector(
+      `[${d}='${r}']`
+    );
+    if (!t) {
+      i({ top: 0, opacity: 0 });
+      return;
+    }
+    const a = n.current.getBoundingClientRect().top, m = t.getBoundingClientRect().top;
+    i({
+      opacity: 1,
+      top: `${m - a}px`
+    }), !o.current && requestIdleCallback(() => {
+      o.current = !0;
+    });
+  }, [r]), /* @__PURE__ */ e.jsxs("aside", { className: "sticky scrollbar top-8 lg:top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 font-medium mb-2", children: [
+      /* @__PURE__ */ e.jsx(x, { size: 16 }),
+      "On this page"
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "relative ms-2 ps-4", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 right-auto bg-border w-[2px]" }),
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: c(
+            "absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary",
+            o.current && "ease-out [transition:top_150ms,opacity_325ms]"
+          ),
+          style: u
+        }
+      ),
+      /* @__PURE__ */ e.jsx(
+        "ul",
+        {
+          ref: n,
+          className: "relative font-medium list-none space-y-2",
+          children: s.map((t) => /* @__PURE__ */ e.jsx(
+            p,
+            {
+              isActive: t.id === r,
+              item: t,
+              className: "pl-0",
+              children: t.children && /* @__PURE__ */ e.jsx("ul", { className: "list-none pl-4 pt-2 space-y-2", children: t.children.map((a) => /* @__PURE__ */ e.jsx(
+                p,
+                {
+                  item: a,
+                  isActive: a.id === r
+                },
+                a.id
+              )) })
+            },
+            t.id
+          ))
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  R as T
+};
+//# sourceMappingURL=Toc-YBsgI72s.js.map

package/lib/Toc-YBsgI72s.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toc-YBsgI72s.js","sources":["../src/lib/components/navigation/Toc.tsx"],"sourcesContent":["import type { TocEntry } from \"@stefanprobst/rehype-extract-toc\";\nimport { ListTreeIcon } from \"lucide-react\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type PropsWithChildren,\n} from \"react\";\nimport { cn } from \"../../util/cn.js\";\nimport { AnchorLink } from \"../AnchorLink.js\";\nimport { useViewportAnchor } from \"../context/ViewportAnchorContext.js\";\n\nconst DATA_ANCHOR_ATTR = \"data-active\";\n\nconst TocItem = ({\n  item,\n  children,\n  className,\n  isActive,\n}: PropsWithChildren<{\n  item: TocEntry;\n  isActive: boolean;\n  className?: string;\n}>) => {\n  return (\n    <li className={cn(\"truncate\", className)} title={item.value}>\n      <AnchorLink\n        to={`#${item.id}`}\n        {...{ [DATA_ANCHOR_ATTR]: item.id }}\n        className={cn(\n          isActive\n            ? \"text-primary\"\n            : \"hover:text-accent-foreground text-muted-foreground\",\n        )}\n      >\n        {item.value}\n      </AnchorLink>\n      {children}\n    </li>\n  );\n};\n\nexport const Toc = ({ entries }: { entries: TocEntry[] }) => {\n  const { activeAnchor } = useViewportAnchor();\n  const listWrapperRef = useRef<HTMLUListElement>(null);\n  const paintedOnce = useRef(false);\n  const [indicatorStyle, setIndicatorStyles] = useState<CSSProperties>({\n    top: 0,\n    opacity: 0,\n  });\n\n  // synchronize active anchor indicator with the scroll position\n  useEffect(() => {\n    if (!listWrapperRef.current) return;\n\n    const activeElement = listWrapperRef.current.querySelector(\n      `[${DATA_ANCHOR_ATTR}='${activeAnchor}']`,\n    );\n\n    if (!activeElement) {\n      setIndicatorStyles({ top: 0, opacity: 0 });\n      return;\n    }\n\n    const topParent = listWrapperRef.current.getBoundingClientRect().top;\n    const topElement = activeElement.getBoundingClientRect().top;\n\n    setIndicatorStyles({\n      opacity: 1,\n      top: `${topElement - topParent}px`,\n    });\n\n    if (paintedOnce.current) return;\n\n    // after all is painted, the indicator should animate\n    requestIdleCallback(() => {\n      paintedOnce.current = true;\n    });\n  }, [activeAnchor]);\n\n  return (\n    <aside className=\"sticky scrollbar top-8 lg:top-[--header-height] h-[calc(100vh-var(--header-height))] pt-[--padding-content-top] pb-[--padding-content-bottom] overflow-y-auto ps-1 text-sm\">\n      <div className=\"flex items-center gap-2 font-medium mb-2\">\n        <ListTreeIcon size={16} />\n        On this page\n      </div>\n      <div className=\"relative ms-2 ps-4\">\n        <div className=\"absolute inset-0 right-auto bg-border w-[2px]\" />\n        <div\n          className={cn(\n            \"absolute -left-px -translate-y-1 h-6 w-[4px] rounded bg-primary\",\n            paintedOnce.current &&\n              \"ease-out [transition:top_150ms,opacity_325ms]\",\n          )}\n          style={indicatorStyle}\n        />\n        <ul\n          ref={listWrapperRef}\n          className=\"relative font-medium list-none space-y-2\"\n        >\n          {entries.map((item) => (\n            <TocItem\n              isActive={item.id === activeAnchor}\n              key={item.id}\n              item={item}\n              className=\"pl-0\"\n            >\n              {item.children && (\n                <ul className=\"list-none pl-4 pt-2 space-y-2\">\n                  {item.children.map((child) => (\n                    <TocItem\n                      item={child}\n                      isActive={child.id === activeAnchor}\n                      key={child.id}\n                    />\n                  ))}\n                </ul>\n              )}\n            </TocItem>\n          ))}\n        </ul>\n      </div>\n    </aside>\n  );\n};\n"],"names":["DATA_ANCHOR_ATTR","TocItem","item","children","className","isActive","jsxs","cn","jsx","AnchorLink","Toc","entries","activeAnchor","useViewportAnchor","listWrapperRef","useRef","paintedOnce","indicatorStyle","setIndicatorStyles","useState","useEffect","activeElement","topParent","topElement","ListTreeIcon","child"],"mappings":"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"}