@asteroidcms/core-utils 0.1.4 → 0.1.6

package/README.md

@@ -11,6 +11,7 @@
 - **Provider-driven** - configure `cmsUrl`, `apiKey`, and Apollo behavior in one place
 - **API-key auth only** - sends `x-api-key` on every request, nothing else
 - **Typed hooks** - `useCmsContent` / `useCmsMutate` build GraphQL on the fly from a declarative selection
+- **Server helpers** - `fetchCmsContent` / `cmsMutate` for Next.js Server Components, Route Handlers, and scripts
 - **Tree-shakeable** - ESM + CJS + types, `@apollo/client`/`react` as peer deps
 
 ---
@@ -34,7 +35,7 @@ npm install @apollo/client-integration-nextjs # for nextjs (optional)
 Wrap your app once:
 
 ```tsx
-import { AsteroidCMSProvider } from "@asteroidcms/core-utils";
+import { AsteroidCMSProvider } from "@asteroidcms/core-utils/client";
 
 export function Root() {
   return (
@@ -51,7 +52,7 @@ export function Root() {
 Then use the hooks anywhere:
 
 ```tsx
-import { useCmsContent, useCmsImage } from "@asteroidcms/core-utils";
+import { useCmsContent, useCmsImage } from "@asteroidcms/core-utils/client";
 
 function NewsList() {
   const cmsImage = useCmsImage();
@@ -197,9 +198,7 @@ const { data: topStories } = useCmsContent({
 
 ## `fetchCmsContent` (Next.js / RSC)
 
-Server-side counterpart to `useCmsContent`. Use it in Next.js Server Components, route handlers, or any other server context. Accepts a server-side Apollo client plus the same options object as `useCmsContent`, and returns the resolved data directly.
-
-Pass a `getClient` function that returns a server-side Apollo client. The shape matches what `registerApolloClient` from `@apollo/client-integration-nextjs` already returns, so you can hand it through directly.
+Server-side counterpart to `useCmsContent`. Use it in Next.js Server Components, Route Handlers, or any other server context. Accepts a `getClient` function plus the same options object as `useCmsContent`, and returns the resolved data directly.
 
 ```ts
 // app/lib/cms-server.ts
@@ -242,28 +241,6 @@ const articles = await fetchCmsContent<Article[]>(getClient, {
 
 Outside Next.js you can pass any `() => ApolloClient` - e.g. `() => createApolloClient({ cmsUrl, apiKey })`.
 
-Add `import "server-only"` in the file that calls it if you want Next.js to fail the build when it leaks into a client component.
-
----
-
-## `buildCmsQuery`
-
-Lower-level helper that turns a declarative selection into a GraphQL `DocumentNode` plus variables. Used internally by `useCmsContent` and `fetchCmsContent`; exported so you can drive your own Apollo calls (cache reads, prefetching, batching, etc.).
-
-```ts
-import { buildCmsQuery } from "@asteroidcms/core-utils";
-
-const { query, variables, isSingle } = buildCmsQuery({
-  schema_slug: "news",
-  limit: 10,
-  status: "PUBLISHED",
-  select: ["title", "slug"],
-});
-
-const { data } = await apolloClient.query({ query, variables });
-const entries = isSingle ? data.entry : data.entries;
-```
-
 ---
 
 ## `useCmsMutate`
@@ -310,6 +287,69 @@ removeComment();
 
 ---
 
+## `cmsMutate` (Next.js / RSC)
+
+Server-side counterpart to `useCmsMutate`. Use it in Route Handlers, webhooks, cron jobs, or build scripts.
+
+```ts
+import { cmsMutate } from "@asteroidcms/core-utils";
+import { getClient } from "@/app/lib/cms-server";
+
+// Create
+const entry = await cmsMutate<{ id: string }>(getClient, {
+  schema_slug: "newsletter_subscribers",
+  mutationType: "create",
+  variables: { data: { email: "user@example.com", name: "Alice" } },
+});
+
+// Update
+await cmsMutate(getClient, {
+  schema_slug: "news",
+  mutationType: "update",
+  entryId: "abc123",
+  variables: { data: { title: "Updated title" } },
+});
+
+// Delete
+await cmsMutate(getClient, {
+  schema_slug: "comments",
+  mutationType: "delete",
+  entryId: "xyz789",
+});
+```
+
+---
+
+## `buildCmsQuery` / `buildCmsMutation`
+
+Lower-level helpers that turn a declarative selection into GraphQL `DocumentNode` plus variables. Used internally by the hooks and server helpers; exported so you can drive your own Apollo calls.
+
+```ts
+import { buildCmsQuery, buildCmsMutation } from "@asteroidcms/core-utils";
+
+// Query
+const { query, variables, isSingle } = buildCmsQuery({
+  schema_slug: "news",
+  limit: 10,
+  status: "PUBLISHED",
+  select: ["title", "slug"],
+});
+
+const { data } = await apolloClient.query({ query, variables });
+const entries = isSingle ? data.entry : data.entries;
+
+// Mutation
+const { mutation, variables: mutVars } = buildCmsMutation({
+  schema_slug: "news",
+  mutationType: "create",
+  variables: { data: { title: "Hello" } },
+});
+
+const { data: mutData } = await apolloClient.mutate({ mutation, variables: mutVars });
+```
+
+---
+
 ## `cmsImage` / `useCmsImage`
 
 Build a canonical media URL for an asset id.
@@ -356,19 +396,24 @@ getContentReadTime(article.body, {
 
 ## `<RichTextContent>`
 
-Render Asteroid CMS rich-text HTML with syntax-highlighted code blocks (via `highlight.js`), self-healing enhancements (copy buttons, blockquote decorations), and slugified heading IDs out of the box.
+Render Asteroid CMS rich-text HTML with syntax-highlighted code blocks (via `highlight.js`), self-healing enhancements (copy buttons, blockquote decorations, callout chips), terminal/diff code-block variants, and slugified heading IDs out of the box.
 
 ```tsx
 import { RichTextContent } from "@asteroidcms/core-utils/client";
+import { Info } from "lucide-react";
 
 <RichTextContent
   html={article.body}
   as="article"
   className="prose"
   classMap={{ p: "my-2 leading-relaxed", h2: "text-2xl font-bold" }}
+  onReady={(root) => console.log("hydrated", root.querySelectorAll("h2").length)}
+  calloutIcons={{ info: <Info size={14} strokeWidth={2.4} /> }}
 />;
 ```
 
+Additional props: `contentRef` (forwards the wrapper element, useful for scroll observers or ToC hooks), `onReady` (fires once enhancements have run), and `calloutIcons` (per-variant icon override for `<aside data-callout data-icon>` blocks).
+
 Or use the parser directly (server-safe, no `highlight.js`):
 
 ```ts
@@ -383,56 +428,24 @@ const html = parseRichText(article.body, {
 
 ### Table of contents
 
-Build a live, scroll-tracked ToC from rendered content with `useTableOfContents`. Pair it with `RichTextContent`'s `contentRef` prop:
+Build a static ToC from HTML with `extractHeadingsFromHtml`, or extract headings from live DOM with `extractHeadingsFromElement`:
 
-```tsx
-import { useRef } from "react";
-import {
-  RichTextContent,
-  useTableOfContents,
-} from "@asteroidcms/core-utils/client";
-
-function Article({ slug, html }: { slug: string; html: string }) {
-  const contentRef = useRef<HTMLElement | null>(null);
-  const { items, activeId } = useTableOfContents(contentRef, {
-    levels: [2, 3],
-    contentKey: slug,           // re-collect when content swaps
-    activationOffset: 96,       // px from viewport top
-  });
+```ts
+import { extractHeadingsFromHtml } from "@asteroidcms/core-utils";
 
-  return (
-    <div className="flex gap-8">
-      <RichTextContent
-        html={html}
-        as="article"
-        className="prose"
-        contentRef={contentRef}
-      />
-      <nav>
-        {items.map((it) => (
-          <a
-            key={it.id}
-            href={`#${it.id}`}
-            className={it.id === activeId ? "font-semibold" : ""}
-          >
-            {it.text}
-          </a>
-        ))}
-      </nav>
-    </div>
-  );
-}
+const toc = extractHeadingsFromHtml(article.body, { levels: [2, 3] });
+// → [{ id: "intro", text: "Intro", level: 2 }, ...]
 ```
 
-For a static, server-side outline (RSC layouts, sitemaps, RSS), use `extractHeadingsFromHtml`:
-
 ```ts
-import { extractHeadingsFromHtml } from "@asteroidcms/core-utils";
+import { extractHeadingsFromElement } from "@asteroidcms/core-utils/client";
 
-const toc = extractHeadingsFromHtml(article.body, { levels: [2, 3] });
+const toc = extractHeadingsFromElement(contentRef.current, { levels: [2, 3] });
 ```
 
-See the [full rich-text docs](./docs/web-sdk-react/10-rich-text.md) for `classMap` variants, parser options, and `useTableOfContents` tuning.
+Pair with `RichTextContent`'s `contentRef` prop and a scroll listener to build live active-heading tracking.
+
+See the [full rich-text docs](./docs/web-sdk-react/10-rich-text.md) for `classMap` variants, parser options, and code block features.
 
 ---
 

package/dist/client.cjs

@@ -7,8 +7,8 @@ var client = require('@apollo/client');
 var context = require('@apollo/client/link/context');
 var error = require('@apollo/client/link/error');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var hljs = require('highlight.js/lib/common');
-require('highlight.js/styles/tokyo-night-dark.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -371,7 +371,9 @@ var DEFAULT_ALLOWLIST = [
   "section",
   "article",
   "div",
-  "span"
+  "span",
+  "details",
+  "summary"
 ];
 var ALLOWED_ATTRS = {
   a: ["href", "title", "target", "rel"],
@@ -381,7 +383,8 @@ var ALLOWED_ATTRS = {
   col: ["span", "width"],
   colgroup: ["span"],
   table: ["border", "cellpadding", "cellspacing"],
-  span: ["style"]
+  span: ["style"],
+  details: ["open"]
 };
 var ALLOWED_STYLE_PROPS = {
   span: ["font-size"]
@@ -415,7 +418,8 @@ var GLOBAL_ALLOWED_ATTRS = [
   "data-title",
   "data-callout-title",
   "data-language",
-  "data-filename"
+  "data-filename",
+  "data-icon"
 ];
 var URL_ATTRS = /* @__PURE__ */ new Set(["href", "src"]);
 function parseRichText(html, options = {}) {
@@ -829,6 +833,8 @@ function classKeyForTag(tag, attrs, openStack) {
   if (tag === "p" && "data-callout-title" in attrs) return "calloutTitle";
   if (tag === "code" && openStack[openStack.length - 1] !== "pre")
     return "inlineCode";
+  if (tag === "details") return "collapsible";
+  if (tag === "summary") return "collapsibleTitle";
   const known = [
     "p",
     "br",
@@ -995,8 +1001,6 @@ function sanitizeAndStyle(html, options) {
   }
   return out.join("");
 }
-
-// src/components/RichTextContent.tsx
 var DEFAULT_CLASS_MAP = {
   variants: {
     "figure:pullquote": "relative my-8",
@@ -1031,6 +1035,46 @@ function findQuoteBody(bq) {
   if (lastIdx < 0) return { first: null, last: null };
   return { first: children[0], last: children[lastIdx] };
 }
+var CALLOUT_ICON_SVG = {
+  info: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 16v-5"/><path d="M12 8h.01"/></svg>`,
+  warning: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>`,
+  success: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>`,
+  danger: `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`,
+  default: `<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true"><path d="M12 2.5l1.6 5.4a4 4 0 0 0 2.5 2.5L21.5 12l-5.4 1.6a4 4 0 0 0-2.5 2.5L12 21.5l-1.6-5.4a4 4 0 0 0-2.5-2.5L2.5 12l5.4-1.6a4 4 0 0 0 2.5-2.5z"/></svg>`
+};
+function calloutVariantOf(el) {
+  return el.getAttribute("data-variant") ?? "default";
+}
+function isIconEnabled(el) {
+  const v = el.getAttribute("data-icon");
+  if (v === null) return false;
+  return v !== "false" && v !== "0";
+}
+function enhanceCallouts(root) {
+  const callouts = root.querySelectorAll("aside[data-callout]");
+  callouts.forEach((el) => {
+    if (el.dataset.rtCalloutEnhanced === "1") return;
+    el.dataset.rtCalloutEnhanced = "1";
+    if (!isIconEnabled(el)) return;
+    if (el.querySelector(":scope > .rt-callout-icon")) return;
+    const variant = calloutVariantOf(el);
+    const icon = document.createElement("span");
+    icon.className = "rt-callout-icon";
+    icon.dataset.variant = variant;
+    icon.setAttribute("aria-hidden", "true");
+    el.prepend(icon);
+  });
+  const chips = [];
+  root.querySelectorAll(
+    "aside[data-callout] > .rt-callout-icon"
+  ).forEach((chip) => {
+    chips.push({
+      el: chip,
+      variant: chip.dataset.variant || (chip.parentElement?.getAttribute("data-variant") ?? "default")
+    });
+  });
+  return chips;
+}
 function enhanceBlockquotes(root) {
   const quotes = root.querySelectorAll("blockquote");
   quotes.forEach((bq) => {
@@ -1260,6 +1304,28 @@ function enhanceCodeBlocks(root) {
     highlightCodeBlock(pre);
   });
 }
+var HLJS_THEME = `
+pre code.hljs { display: block; overflow-x: auto; padding: 1em; }
+code.hljs { padding: 3px 5px; }
+.hljs-meta, .hljs-comment { color: #565f89; }
+.hljs-tag, .hljs-doctag, .hljs-selector-id, .hljs-selector-class,
+.hljs-regexp, .hljs-template-tag, .hljs-selector-pseudo,
+.hljs-selector-attr, .hljs-variable.language_, .hljs-deletion { color: #f7768e; }
+.hljs-variable, .hljs-template-variable, .hljs-number, .hljs-literal,
+.hljs-type, .hljs-params, .hljs-link { color: #ff9e64; }
+.hljs-built_in, .hljs-attribute { color: #e0af68; }
+.hljs-selector-tag { color: #73daca; }
+.hljs-keyword, .hljs-title.function_, .hljs-title, .hljs-title.class_,
+.hljs-title.class_.inherited__, .hljs-subst, .hljs-property { color: #7dcfff; }
+.hljs-quote, .hljs-string, .hljs-symbol, .hljs-bullet,
+.hljs-addition { color: #9ece6a; }
+.hljs-code, .hljs-formula, .hljs-section { color: #7aa2f7; }
+.hljs-name, .hljs-operator, .hljs-char.escape_, .hljs-attr { color: #bb9af7; }
+.hljs-punctuation { color: #c0caf5; }
+.hljs { background: #1a1b26; color: #9aa5ce; }
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: bold; }
+`;
 var CODEBLOCK_STYLE = `
 .rt-codeblock { position: relative; }
 .rt-codeblock[data-filename]:not([data-filename=""]) { padding-top: 2rem; }
@@ -1311,6 +1377,64 @@ var CODEBLOCK_STYLE = `
 }
 .rt-quote-open { margin-right: 0.15em; }
 .rt-quote-close { margin-left: 0.15em; }
+
+/* Callout chip ----------------------------------------------------------- */
+/* Layout: when a callout opts into an icon, use a 2-column grid so the chip
+   sits left of the title + body. Consumers can override via classMap. */
+aside[data-callout][data-icon]:not([data-icon="false"]):not([data-icon="0"]) {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 0.85rem;
+  align-items: start;
+}
+aside[data-callout][data-icon]:not([data-icon="false"]):not([data-icon="0"]) > .rt-callout-icon {
+  grid-row: 1 / span 99;
+  margin-top: 0.05rem;
+}
+.rt-callout-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 0.4rem;
+  color: #fff;
+  background: #475569;
+  flex-shrink: 0;
+}
+.rt-callout-icon[data-variant="info"]    { background: #2563eb; }
+.rt-callout-icon[data-variant="warning"] { background: #d97706; }
+.rt-callout-icon[data-variant="success"] { background: #16a34a; }
+.rt-callout-icon[data-variant="danger"]  { background: #dc2626; }
+.rt-callout-icon[data-variant="default"] { background: #475569; }
+
+/* Collapsible (FAQ accordion) ------------------------------------------ */
+/* Native <details>/<summary> with a rotating chevron. Only structural
+   styling lives here \u2014 colors, padding, and typography belong to
+   consumers via the \`collapsible\` and \`collapsibleTitle\` classMap keys. */
+details[data-collapsible] > summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+details[data-collapsible] > summary::-webkit-details-marker { display: none; }
+details[data-collapsible] > summary::after {
+  content: "";
+  width: 0.55rem;
+  height: 0.55rem;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg) translate(-0.1rem, 0.05rem);
+  transition: transform 0.18s ease;
+  opacity: 0.55;
+  flex-shrink: 0;
+}
+details[data-collapsible][open] > summary::after {
+  transform: rotate(45deg) translate(-0.05rem, -0.05rem);
+}
 /* highlight.js theme handles .hljs-* color classes; we only override the
    default .hljs background so the per-block chrome (dark bg, terminal,
    diff red/green rows) wins. */
@@ -1452,17 +1576,29 @@ function ensureCodeBlockStyles() {
   }
   const tag = document.createElement("style");
   tag.id = "rt-codeblock-style";
-  tag.textContent = CODEBLOCK_STYLE;
+  tag.textContent = HLJS_THEME + "\n" + CODEBLOCK_STYLE;
   document.head.appendChild(tag);
   styleInjected = true;
 }
+function calloutChipsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].el !== b[i].el || a[i].variant !== b[i].variant) return false;
+  }
+  return true;
+}
+function BuiltinCalloutIcon({ variant }) {
+  const html = CALLOUT_ICON_SVG[variant] ?? CALLOUT_ICON_SVG.default;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: html } });
+}
 function RichTextContent({
   html,
   classMap,
   as = "div",
   className,
   onReady,
-  contentRef
+  contentRef,
+  calloutIcons
 }) {
   const merged = react.useMemo(
     () => mergeClassMap(DEFAULT_CLASS_MAP, classMap),
@@ -1473,6 +1609,7 @@ function RichTextContent({
     [html, merged]
   );
   const ref = react.useRef(null);
+  const [chips, setChips] = react.useState([]);
   react.useEffect(() => {
     ensureCodeBlockStyles();
     const root = ref.current;
@@ -1482,6 +1619,8 @@ function RichTextContent({
       mo.disconnect();
       enhanceCodeBlocks(root);
       enhanceBlockquotes(root);
+      const nextChips = enhanceCallouts(root);
+      setChips((prev) => calloutChipsEqual(prev, nextChips) ? prev : nextChips);
       onReady?.(root);
       mo.observe(root, { childList: true, subtree: true });
     };
@@ -1499,11 +1638,20 @@ function RichTextContent({
       if (raf) cancelAnimationFrame(raf);
     };
   }, [safe, onReady, contentRef]);
-  return react.createElement(as, {
-    ref,
-    className,
-    dangerouslySetInnerHTML: { __html: safe }
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    react.createElement(as, {
+      ref,
+      className,
+      dangerouslySetInnerHTML: { __html: safe }
+    }),
+    chips.map(
+      (chip, i) => reactDom.createPortal(
+        calloutIcons && chip.variant in calloutIcons ? calloutIcons[chip.variant] : /* @__PURE__ */ jsxRuntime.jsx(BuiltinCalloutIcon, { variant: chip.variant }),
+        chip.el,
+        `${chip.variant}:${i}`
+      )
+    )
+  ] });
 }
 
 // src/utils/extractHeadings.ts
@@ -1579,97 +1727,6 @@ function extractHeadingsFromElement(root, options = {}) {
   return out;
 }
 
-// src/hooks/useTableOfContents.tsx
-function useTableOfContents(ref, options = {}) {
-  const {
-    levels,
-    contentKey = null,
-    scrollMarginTop = 24,
-    activationOffset = 96
-  } = options;
-  const [items, setItems] = react.useState([]);
-  const [activeId, setActiveId] = react.useState("");
-  react.useEffect(() => {
-    const root = ref.current;
-    if (!root) {
-      setItems([]);
-      setActiveId("");
-      return;
-    }
-    let raf = 0;
-    const collect = () => {
-      const next = extractHeadingsFromElement(root, {
-        levels,
-        scrollMarginTop
-      });
-      setItems(next);
-      setActiveId(
-        (prev) => next.some((h) => h.id === prev) ? prev : next[0]?.id ?? ""
-      );
-    };
-    raf = requestAnimationFrame(collect);
-    const mo = new MutationObserver(() => {
-      if (raf) cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(collect);
-    });
-    mo.observe(root, { childList: true, subtree: true, characterData: true });
-    return () => {
-      mo.disconnect();
-      if (raf) cancelAnimationFrame(raf);
-    };
-  }, [ref, contentKey, levels, scrollMarginTop]);
-  react.useEffect(() => {
-    if (items.length === 0) return;
-    const targets = items.map((it) => document.getElementById(it.id)).filter((el) => el !== null);
-    if (targets.length === 0) return;
-    let raf = 0;
-    const compute = () => {
-      raf = 0;
-      let activeIdx = 0;
-      for (let i = 0; i < items.length; i++) {
-        const el = document.getElementById(items[i].id);
-        if (!el) continue;
-        if (el.getBoundingClientRect().top - activationOffset <= 0) {
-          activeIdx = i;
-        } else {
-          break;
-        }
-      }
-      const scroller = document.scrollingElement || document.documentElement;
-      const scrollY = window.scrollY;
-      const viewportH = window.innerHeight;
-      const atBottom = scrollY + viewportH >= scroller.scrollHeight - 2;
-      if (atBottom) {
-        for (let i = items.length - 1; i > activeIdx; i--) {
-          const el = document.getElementById(items[i].id);
-          if (el && el.getBoundingClientRect().top < viewportH) {
-            activeIdx = i;
-            break;
-          }
-        }
-      }
-      setActiveId(items[activeIdx].id);
-    };
-    const schedule = () => {
-      if (raf) return;
-      raf = requestAnimationFrame(compute);
-    };
-    const io = new IntersectionObserver(schedule, {
-      rootMargin: `-${activationOffset}px 0px -${Math.max(0, window.innerHeight - activationOffset - 1)}px 0px`,
-      threshold: 0
-    });
-    targets.forEach((t) => io.observe(t));
-    window.addEventListener("resize", schedule, { passive: true });
-    compute();
-    return () => {
-      io.disconnect();
-      window.removeEventListener("resize", schedule);
-      if (raf) cancelAnimationFrame(raf);
-    };
-  }, [items, activationOffset]);
-  return { items, activeId };
-}
-
 exports.AsteroidCMSProvider = AsteroidCMSProvider;
 exports.RichTextContent = RichTextContent;
 exports.extractHeadingsFromElement = extractHeadingsFromElement;
@@ -1679,6 +1736,5 @@ exports.useAsteroidCMSConfig = useAsteroidCMSConfig;
 exports.useCmsContent = useCmsContent;
 exports.useCmsImage = useCmsImage;
 exports.useCmsMutate = useCmsMutate;
-exports.useTableOfContents = useTableOfContents;
 //# sourceMappingURL=client.cjs.map
 //# sourceMappingURL=client.cjs.map