fromsrc 0.0.0 → 0.0.2

package/dist/components/textarea.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, forwardRef, useId, useRef, useState, useCallback, useEffect } from 'react';
+import { ErrorMessage } from './errormessage';
+import { FormLabel } from './formlabel';
+
+const variants = {
+  default: "border-line bg-surface text-fg placeholder:text-muted focus:border-accent",
+  error: "border-red-500/50 bg-red-500/5 text-fg placeholder:text-muted focus:border-red-500"
+};
+const sizes = {
+  sm: "px-2.5 py-1.5 text-xs min-h-[60px]",
+  md: "px-3 py-2 text-sm min-h-[80px]",
+  lg: "px-4 py-3 text-base min-h-[100px]"
+};
+const Textarea = memo(forwardRef(function Textarea2({
+  variant = "default",
+  size = "md",
+  label,
+  error,
+  hint,
+  autoresize = false,
+  showCount = false,
+  tooltip,
+  maxLength,
+  className = "",
+  id,
+  value,
+  defaultValue,
+  onChange,
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const textareaId = id || generatedId;
+  const errorId = error ? `${textareaId}-error` : void 0;
+  const hintId = hint && !error ? `${textareaId}-hint` : void 0;
+  const countId = showCount ? `${textareaId}-count` : void 0;
+  const describedBy = [errorId, hintId, countId].filter(Boolean).join(" ") || void 0;
+  const actualVariant = error ? "error" : variant;
+  const internalRef = useRef(null);
+  const [charCount, setCharCount] = useState(() => {
+    const initial = value ?? defaultValue ?? "";
+    return typeof initial === "string" ? initial.length : 0;
+  });
+  const resize = useCallback(() => {
+    const textarea = internalRef.current;
+    if (!textarea || !autoresize) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [autoresize]);
+  useEffect(() => {
+    resize();
+  }, [resize, value]);
+  const handleChange = (e) => {
+    setCharCount(e.target.value.length);
+    if (autoresize) resize();
+    onChange?.(e);
+  };
+  const setRefs = useCallback(
+    (node) => {
+      internalRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsx(FormLabel, { label, tooltip, htmlFor: textareaId }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: setRefs,
+        id: textareaId,
+        "aria-invalid": actualVariant === "error" ? true : void 0,
+        "aria-describedby": describedBy,
+        maxLength,
+        value,
+        defaultValue,
+        onChange: handleChange,
+        className: `rounded-md border outline-none transition-colors resize-vertical ${variants[actualVariant]} ${sizes[size]} ${autoresize ? "resize-none overflow-hidden" : ""} ${className}`.trim(),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        error && /* @__PURE__ */ jsx(ErrorMessage, { id: errorId, children: error }),
+        hint && !error && /* @__PURE__ */ jsx("span", { id: hintId, className: "text-xs text-muted", children: hint })
+      ] }),
+      showCount && /* @__PURE__ */ jsxs("span", { id: countId, className: "text-xs text-muted", "aria-live": "polite", children: [
+        charCount,
+        maxLength ? `/${maxLength}` : ""
+      ] })
+    ] })
+  ] });
+}));
+
+export { Textarea };

package/dist/components/theme.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+type Theme = "light" | "dark" | "system";
+interface ThemeToggleProps {
+    defaultTheme?: Theme;
+}
+declare function ThemeToggleBase({ defaultTheme }: ThemeToggleProps): JSX.Element;
+declare const ThemeToggle: react.MemoExoticComponent<typeof ThemeToggleBase>;
+
+export { type Theme, ThemeToggle, type ThemeToggleProps };

package/dist/components/theme.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect, useCallback } from 'react';
+
+function istheme(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+function resolves(theme) {
+  if (theme === "system") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return theme;
+}
+function ThemeToggleBase({ defaultTheme = "dark" }) {
+  const [theme, setTheme] = useState(null);
+  const [resolved, setResolved] = useState(null);
+  useEffect(() => {
+    const raw = localStorage.getItem("theme");
+    const initial = istheme(raw) ? raw : defaultTheme;
+    setTheme(initial);
+    setResolved(resolves(initial));
+  }, [defaultTheme]);
+  useEffect(() => {
+    if (!theme) return;
+    const apply = () => {
+      const r = resolves(theme);
+      setResolved(r);
+      document.documentElement.classList.toggle("dark", r === "dark");
+    };
+    apply();
+    localStorage.setItem("theme", theme);
+    if (theme === "system") {
+      const media = window.matchMedia("(prefers-color-scheme: dark)");
+      media.addEventListener("change", apply);
+      return () => media.removeEventListener("change", apply);
+    }
+  }, [theme]);
+  const toggle = useCallback(() => {
+    setTheme((t) => t === "dark" ? "light" : "dark");
+  }, []);
+  if (!resolved) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "p-2 text-muted hover:text-fg transition-colors",
+        "aria-label": "toggle theme",
+        disabled: true,
+        children: /* @__PURE__ */ jsx("span", { className: "size-4 block" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      className: "p-2 text-muted hover:text-fg transition-colors",
+      "aria-label": `switch to ${resolved === "dark" ? "light" : "dark"} theme`,
+      children: resolved === "dark" ? /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsx("path", { d: "M8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zM3.05 2.343a.75.75 0 011.06 0l1.061 1.061a.75.75 0 01-1.06 1.06L3.05 3.404a.75.75 0 010-1.06zm8.84 8.84a.75.75 0 011.06 0l1.06 1.06a.75.75 0 01-1.06 1.061l-1.06-1.06a.75.75 0 010-1.06zM16 8a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm10.657-4.95a.75.75 0 010 1.061l-1.06 1.06a.75.75 0 11-1.061-1.06l1.06-1.06a.75.75 0 011.06 0zm-8.84 8.84a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 11-1.061-1.06l1.06-1.06a.75.75 0 011.06 0z" }) }) : /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsx("path", { d: "M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z" }) })
+    }
+  );
+}
+const ThemeToggle = memo(ThemeToggleBase);
+
+export { ThemeToggle };

package/dist/components/themeprovider.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type ThemeMode = "light" | "dark" | "system";
+type ThemeContextValue = {
+    theme: ThemeMode;
+    resolved: "light" | "dark";
+    setTheme: (theme: ThemeMode) => void;
+};
+type ThemeProviderProps = {
+    children: ReactNode;
+    defaultTheme?: ThemeMode;
+    storageKey?: string;
+    attribute?: string;
+};
+declare function ThemeProvider({ children, defaultTheme, storageKey, attribute, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, useTheme };

package/dist/components/themeprovider.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useMemo, useContext } from 'react';
+
+const ThemeContext = createContext(null);
+function istheme(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+function resolve(theme) {
+  if (theme === "system") {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return theme;
+}
+function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "fromsrc-theme",
+  attribute = "data-theme"
+}) {
+  const [theme, setTheme] = useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    const stored = localStorage.getItem(storageKey);
+    return istheme(stored) ? stored : defaultTheme;
+  });
+  const [resolved, setResolved] = useState(() => {
+    if (typeof window === "undefined") return "light";
+    return resolve(theme);
+  });
+  useEffect(() => {
+    const r = resolve(theme);
+    setResolved(r);
+    document.documentElement.setAttribute(attribute, r);
+    document.documentElement.classList.toggle("dark", r === "dark");
+    localStorage.setItem(storageKey, theme);
+  }, [theme, attribute, storageKey]);
+  useEffect(() => {
+    if (theme !== "system") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const r = resolve(theme);
+      setResolved(r);
+      document.documentElement.setAttribute(attribute, r);
+      document.documentElement.classList.toggle("dark", r === "dark");
+    };
+    media.addEventListener("change", handler);
+    return () => media.removeEventListener("change", handler);
+  }, [theme, attribute]);
+  const value = useMemo(() => ({ theme, resolved, setTheme }), [theme, resolved]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error("useTheme must be used within ThemeProvider");
+  return context;
+}
+
+export { ThemeProvider, useTheme };

package/dist/components/toast.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Represents a single toast notification.
+ */
+interface Toast {
+    id: string;
+    message: string;
+    type: "info" | "success" | "warning" | "error";
+    duration?: number;
+}
+/**
+ * Context value for managing toasts.
+ */
+interface ToastContextValue {
+    toasts: Toast[];
+    add: (toast: Omit<Toast, "id">) => void;
+    remove: (id: string) => void;
+}
+/**
+ * Provider component for toast notifications.
+ */
+declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+/**
+ * Hook to access toast context.
+ */
+declare function useToast(): ToastContextValue;
+
+export { type Toast, ToastProvider, useToast };

package/dist/components/toast.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useRef, useCallback, useEffect, useContext } from 'react';
+import { IconXCircle, IconAlertCircle, IconCheckCircle, IconInfo, IconX } from './icons';
+
+const ToastContext = createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([]);
+  const timers = useRef(/* @__PURE__ */ new Map());
+  const counter = useRef(0);
+  const remove = useCallback((id) => {
+    const timer = timers.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timers.current.delete(id);
+    }
+    setToasts((t) => t.filter((x) => x.id !== id));
+  }, []);
+  const add = useCallback((toast) => {
+    counter.current += 1;
+    const id = `toast-${counter.current}`;
+    setToasts((t) => [...t, { ...toast, id }]);
+    const duration = toast.duration ?? 5e3;
+    const timer = setTimeout(() => {
+      timers.current.delete(id);
+      setToasts((t) => t.filter((x) => x.id !== id));
+    }, duration);
+    timers.current.set(id, timer);
+  }, []);
+  useEffect(() => {
+    return () => {
+      for (const timer of timers.current.values()) clearTimeout(timer);
+      timers.current.clear();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { toasts, add, remove }, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastContainer, {})
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+}
+const icons = {
+  info: IconInfo,
+  success: IconCheckCircle,
+  warning: IconAlertCircle,
+  error: IconXCircle
+};
+const styles = {
+  info: "border-blue-500/30 bg-blue-500/10",
+  success: "border-green-500/30 bg-green-500/10",
+  warning: "border-yellow-500/30 bg-yellow-500/10",
+  error: "border-red-500/30 bg-red-500/10"
+};
+function ToastContainer() {
+  const { toasts, remove } = useToast();
+  const handleDismiss = useCallback(
+    (id) => () => {
+      remove(id);
+    },
+    [remove]
+  );
+  if (toasts.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "region",
+      "aria-label": "notifications",
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      "aria-relevant": "additions removals",
+      className: "fixed bottom-4 right-4 z-50 flex flex-col gap-2",
+      children: toasts.map((toast) => {
+        const Icon = icons[toast.type];
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex items-center gap-3 rounded-lg border px-4 py-3 shadow-lg ${styles[toast.type]}`,
+            role: "alert",
+            "aria-live": toast.type === "error" ? "assertive" : "polite",
+            "aria-atomic": "true",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { size: 20, className: "shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "text-sm", children: toast.message }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleDismiss(toast.id),
+                  className: "ml-2 rounded p-1 hover:bg-white/10",
+                  "aria-label": "dismiss notification",
+                  children: /* @__PURE__ */ jsx(IconX, { size: 16, "aria-hidden": "true" })
+                }
+              )
+            ]
+          },
+          toast.id
+        );
+      })
+    }
+  );
+}
+
+export { ToastProvider, useToast };

package/dist/components/toc/default.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { JSX } from 'react';
+import { Heading } from './hook.js';
+
+/**
+ * Props for the table of contents component
+ */
+interface Props {
+    /** Array of heading objects to display */
+    headings: Heading[];
+    /** Currently active heading id */
+    active: string;
+    /** Array of heading ids in the active range */
+    activeRange: string[];
+    /** Enable zigzag line decoration */
+    zigzag?: boolean;
+}
+declare function TocDefaultBase({ headings, active, activeRange, zigzag }: Props): JSX.Element;
+declare const TocDefault: react.MemoExoticComponent<typeof TocDefaultBase>;
+
+export { TocDefault };

package/dist/components/toc/default.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useRef, useState, useEffect } from 'react';
+import { ZigzagLine, getItemOffset, buildZigzagPath } from './zigzag';
+
+function TocDefaultBase({ headings, active, activeRange, zigzag }) {
+  const containerRef = useRef(null);
+  const [svg, setSvg] = useState(null);
+  const [thumb, setThumb] = useState({ top: 0, height: 0 });
+  const range = activeRange.length > 0 ? activeRange : active ? [active] : [];
+  const isActive = (id) => range.includes(id);
+  useEffect(() => {
+    if (!zigzag || !containerRef.current || headings.length === 0) return;
+    const container = containerRef.current;
+    function update() {
+      const result = buildZigzagPath(headings, container);
+      if (result) setSvg(result);
+    }
+    const observer = new ResizeObserver(update);
+    update();
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [headings, zigzag]);
+  useEffect(() => {
+    if (!zigzag || !containerRef.current || range.length === 0) return;
+    const container = containerRef.current;
+    let upper = Infinity;
+    let lower = 0;
+    for (const id of range) {
+      const element = container.querySelector(`a[href="#${id}"]`);
+      if (!element) continue;
+      const styles = getComputedStyle(element);
+      const top = element.offsetTop + parseFloat(styles.paddingTop);
+      const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+      upper = Math.min(upper, top);
+      lower = Math.max(lower, bottom);
+    }
+    if (upper !== Infinity) {
+      setThumb({ top: upper, height: lower - upper });
+    }
+  }, [range, zigzag]);
+  if (zigzag) {
+    return /* @__PURE__ */ jsxs("nav", { "aria-label": "Table of contents", className: "relative", children: [
+      svg && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute left-0 top-0 pointer-events-none z-10",
+          style: {
+            width: svg.width,
+            height: svg.height,
+            maskImage: `url("data:image/svg+xml,${encodeURIComponent(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`
+            )}")`
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute w-full bg-fg transition-[top,height] duration-150",
+              style: { top: thumb.top, height: thumb.height }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex flex-col relative", children: headings.map((heading, i) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `#${heading.id}`,
+          "aria-current": isActive(heading.id) ? "location" : void 0,
+          className: `relative py-1.5 text-sm transition-colors ${isActive(heading.id) ? "text-fg" : "text-muted hover:text-fg"}`,
+          style: { paddingLeft: getItemOffset(heading.level) },
+          children: [
+            /* @__PURE__ */ jsx(
+              ZigzagLine,
+              {
+                heading,
+                upper: headings[i - 1]?.level,
+                lower: headings[i + 1]?.level
+              }
+            ),
+            heading.text
+          ]
+        },
+        heading.id
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Table of contents", className: "border-l border-line", children: /* @__PURE__ */ jsx("ul", { role: "list", className: "space-y-1", children: headings.map((heading) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: `#${heading.id}`,
+      "aria-current": isActive(heading.id) ? "location" : void 0,
+      className: `block text-xs py-1 transition-colors border-l-2 -ml-px ${heading.level === 3 ? "pl-6" : "pl-4"} ${isActive(heading.id) ? "text-fg border-fg" : "text-muted hover:text-fg border-transparent"}`,
+      children: heading.text
+    }
+  ) }, heading.id)) }) });
+}
+const TocDefault = memo(TocDefaultBase);
+
+export { TocDefault };

package/dist/components/toc/hook.d.ts

@@ -0,0 +1,13 @@
+interface Heading {
+    id: string;
+    text: string;
+    level: number;
+}
+interface TocState {
+    headings: Heading[];
+    active: string;
+    activeRange: string[];
+}
+declare function useToc(multi?: boolean): TocState;
+
+export { type Heading, type TocState, useToc };

package/dist/components/toc/hook.js

@@ -0,0 +1,125 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+function cleanheading(text) {
+  return text.replace(/\s*#+\s*$/, "").trim();
+}
+function useToc(multi = false) {
+  const [headings, setHeadings] = useState([]);
+  const [active, setActive] = useState("");
+  const [activeRange, setActiveRange] = useState([]);
+  useEffect(() => {
+    function scan() {
+      const elements = document.querySelectorAll("article h2, article h3, article h4, article h5, article h6");
+      const items = [];
+      elements.forEach((el) => {
+        if (el.id) {
+          const level = Number(el.tagName.replace("H", ""));
+          items.push({
+            id: el.id,
+            text: cleanheading(el.textContent || ""),
+            level: Number.isFinite(level) ? level : 2
+          });
+        }
+      });
+      if (items.length > 0) {
+        setHeadings(items);
+      }
+    }
+    scan();
+    const observer = new MutationObserver(() => {
+      scan();
+    });
+    const article = document.querySelector("article");
+    if (article) {
+      observer.observe(article, { childList: true, subtree: true });
+    }
+    return () => observer.disconnect();
+  }, []);
+  useEffect(() => {
+    if (headings.length === 0) return;
+    function findClosest() {
+      let closest = headings[0]?.id || "";
+      let minDistance = Infinity;
+      for (const { id } of headings) {
+        const el = document.getElementById(id);
+        if (!el) continue;
+        const rect = el.getBoundingClientRect();
+        const distance = Math.abs(rect.top);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closest = id;
+        }
+      }
+      return closest;
+    }
+    if (multi) {
+      const visible = /* @__PURE__ */ new Set();
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              visible.add(entry.target.id);
+            } else {
+              visible.delete(entry.target.id);
+            }
+          }
+          if (visible.size === 0) {
+            const closest = findClosest();
+            setActive(closest);
+            setActiveRange(closest ? [closest] : []);
+          } else {
+            const ordered = headings.filter((h) => visible.has(h.id));
+            setActive(ordered[0]?.id || "");
+            setActiveRange(ordered.map((h) => h.id));
+          }
+        },
+        { rootMargin: "0px", threshold: 0.9 }
+      );
+      for (const { id } of headings) {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el);
+      }
+      return () => observer.disconnect();
+    }
+    let ticking = false;
+    function update() {
+      const atBottom = window.innerHeight + Math.ceil(window.scrollY) >= document.documentElement.scrollHeight;
+      if (atBottom && headings.length > 0) {
+        const last = headings[headings.length - 1];
+        if (last) setActive(last.id);
+        return;
+      }
+      const offset = 100;
+      let current = "";
+      const items = headings.slice(0, -1);
+      for (const { id } of items) {
+        const el = document.getElementById(id);
+        if (!el) continue;
+        if (el.getBoundingClientRect().top <= offset) {
+          current = id;
+        }
+      }
+      if (!current && headings.length > 0) {
+        const first = headings[0];
+        if (first) current = first.id;
+      }
+      setActive(current);
+    }
+    function onScroll() {
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          update();
+          ticking = false;
+        });
+        ticking = true;
+      }
+    }
+    update();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [headings, multi]);
+  return { headings, active, activeRange };
+}
+
+export { useToc };

package/dist/components/toc/index.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { Heading, TocState, useToc } from './hook.js';
+
+type TocVariant = "default" | "minimal" | "inline";
+interface TocProps {
+    variant?: TocVariant;
+    zigzag?: boolean;
+    multi?: boolean;
+    title?: string;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+}
+declare function Toc({ variant, zigzag, multi, title, collapsible, defaultOpen, }: TocProps): react_jsx_runtime.JSX.Element | null;
+
+export { Toc, type TocProps, type TocVariant };