@asteroidcms/core-utils 0.1.5 → 0.1.7

package/dist/client.d.cts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PropsWithChildren, ReactNode, RefObject } from 'react';
+import * as react from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import * as _apollo_client from '@apollo/client';
 import { InMemoryCacheConfig, ApolloClientOptions, ApolloClient } from '@apollo/client';
 import { useMutation } from '@apollo/client/react';
@@ -224,8 +225,8 @@ interface RichTextContentProps {
      */
     onReady?: (root: HTMLElement) => void;
     /**
-     * Optional ref to the wrapper element. Useful for hooks like
-     * `useTableOfContents` that need a stable reference to the rendered tree.
+     * Optional ref to the wrapper element. Useful for consumers that need a
+     * stable reference to the rendered tree (e.g. scroll observers, ToC hooks).
      */
     contentRef?: React.MutableRefObject<HTMLElement | null>;
     /**
@@ -254,7 +255,7 @@ interface RichTextContentProps {
      */
     calloutIcons?: Partial<Record<string, ReactNode>>;
 }
-declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, calloutIcons, }: RichTextContentProps): react_jsx_runtime.JSX.Element;
+declare const RichTextContent: react.NamedExoticComponent<RichTextContentProps>;
 
 /**
  * Heading extraction helpers used to build tables of contents (ToC) from
@@ -293,42 +294,4 @@ declare function extractHeadingsFromElement(root: HTMLElement, options?: Extract
     scrollMarginTop?: number;
 }): ExtractedHeading[];
 
-interface UseTableOfContentsOptions {
-    /** Heading levels to include. Defaults to `[2, 3]`. */
-    levels?: ReadonlyArray<HeadingLevel>;
-    /**
-     * Re-collect headings whenever this value changes. Pass the article slug
-     * (or any stable identifier) so swapping content rebuilds the ToC.
-     */
-    contentKey?: string | number | null;
-    /** Pixels to subtract from heading scroll-into-view target. Default 24. */
-    scrollMarginTop?: number;
-    /**
-     * Distance from the top of the viewport (in px) at which a heading becomes
-     * "active". A heading is considered active once its top edge has scrolled
-     * past this line. Default `96` — works well with a sticky header that
-     * stands ~60–80px tall.
-     */
-    activationOffset?: number;
-}
-interface UseTableOfContentsResult {
-    items: ExtractedHeading[];
-    activeId: string;
-}
-/**
- * Build a table of contents from a rendered element and track which
- * heading is currently in view via IntersectionObserver. Resilient to
- * content swaps when `contentKey` is provided.
- *
- * Usage:
- * ```tsx
- * const ref = useRef<HTMLDivElement>(null);
- * const { items, activeId } = useTableOfContents(ref, {
- *   contentKey: article.slug,
- *   levels: [2, 3],
- * });
- * ```
- */
-declare function useTableOfContents(ref: RefObject<HTMLElement | null>, options?: UseTableOfContentsOptions): UseTableOfContentsResult;
-
-export { AsteroidCMSProvider, type AsteroidCMSProviderProps, type ExtractHeadingsOptions, type ExtractedHeading, type HeadingLevel, RichTextContent, type UseCmsContentOptions, type UseCmsMutateOptions, type UseTableOfContentsOptions, type UseTableOfContentsResult, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate, useTableOfContents };
+export { AsteroidCMSProvider, type AsteroidCMSProviderProps, type ExtractHeadingsOptions, type ExtractedHeading, type HeadingLevel, RichTextContent, type UseCmsContentOptions, type UseCmsMutateOptions, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };

package/dist/client.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { PropsWithChildren, ReactNode, RefObject } from 'react';
+import * as react from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
 import * as _apollo_client from '@apollo/client';
 import { InMemoryCacheConfig, ApolloClientOptions, ApolloClient } from '@apollo/client';
 import { useMutation } from '@apollo/client/react';
@@ -224,8 +225,8 @@ interface RichTextContentProps {
      */
     onReady?: (root: HTMLElement) => void;
     /**
-     * Optional ref to the wrapper element. Useful for hooks like
-     * `useTableOfContents` that need a stable reference to the rendered tree.
+     * Optional ref to the wrapper element. Useful for consumers that need a
+     * stable reference to the rendered tree (e.g. scroll observers, ToC hooks).
      */
     contentRef?: React.MutableRefObject<HTMLElement | null>;
     /**
@@ -254,7 +255,7 @@ interface RichTextContentProps {
      */
     calloutIcons?: Partial<Record<string, ReactNode>>;
 }
-declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, calloutIcons, }: RichTextContentProps): react_jsx_runtime.JSX.Element;
+declare const RichTextContent: react.NamedExoticComponent<RichTextContentProps>;
 
 /**
  * Heading extraction helpers used to build tables of contents (ToC) from
@@ -293,42 +294,4 @@ declare function extractHeadingsFromElement(root: HTMLElement, options?: Extract
     scrollMarginTop?: number;
 }): ExtractedHeading[];
 
-interface UseTableOfContentsOptions {
-    /** Heading levels to include. Defaults to `[2, 3]`. */
-    levels?: ReadonlyArray<HeadingLevel>;
-    /**
-     * Re-collect headings whenever this value changes. Pass the article slug
-     * (or any stable identifier) so swapping content rebuilds the ToC.
-     */
-    contentKey?: string | number | null;
-    /** Pixels to subtract from heading scroll-into-view target. Default 24. */
-    scrollMarginTop?: number;
-    /**
-     * Distance from the top of the viewport (in px) at which a heading becomes
-     * "active". A heading is considered active once its top edge has scrolled
-     * past this line. Default `96` — works well with a sticky header that
-     * stands ~60–80px tall.
-     */
-    activationOffset?: number;
-}
-interface UseTableOfContentsResult {
-    items: ExtractedHeading[];
-    activeId: string;
-}
-/**
- * Build a table of contents from a rendered element and track which
- * heading is currently in view via IntersectionObserver. Resilient to
- * content swaps when `contentKey` is provided.
- *
- * Usage:
- * ```tsx
- * const ref = useRef<HTMLDivElement>(null);
- * const { items, activeId } = useTableOfContents(ref, {
- *   contentKey: article.slug,
- *   levels: [2, 3],
- * });
- * ```
- */
-declare function useTableOfContents(ref: RefObject<HTMLElement | null>, options?: UseTableOfContentsOptions): UseTableOfContentsResult;
-
-export { AsteroidCMSProvider, type AsteroidCMSProviderProps, type ExtractHeadingsOptions, type ExtractedHeading, type HeadingLevel, RichTextContent, type UseCmsContentOptions, type UseCmsMutateOptions, type UseTableOfContentsOptions, type UseTableOfContentsResult, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate, useTableOfContents };
+export { AsteroidCMSProvider, type AsteroidCMSProviderProps, type ExtractHeadingsOptions, type ExtractedHeading, type HeadingLevel, RichTextContent, type UseCmsContentOptions, type UseCmsMutateOptions, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };

package/dist/client.js

@@ -1,10 +1,10 @@
 "use client";
-import { createContext, useContext, useMemo, useRef, useState, useEffect, Fragment, createElement } from 'react';
+import { createContext, memo, useMemo, useRef, useState, useLayoutEffect, Fragment, createElement, useContext } from 'react';
 import { ApolloProvider, useQuery, useMutation } from '@apollo/client/react';
 import { gql, HttpLink, ApolloClient, InMemoryCache, ApolloLink, CombinedGraphQLErrors, CombinedProtocolErrors } from '@apollo/client';
 import { SetContextLink } from '@apollo/client/link/context';
 import { ErrorLink } from '@apollo/client/link/error';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import hljs from 'highlight.js/lib/common';
 
@@ -1044,37 +1044,38 @@ function isIconEnabled(el) {
   if (v === null) return false;
   return v !== "false" && v !== "0";
 }
-function enhanceCallouts(root) {
+function enhanceCallouts(root, calloutIcons) {
   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;
+    if (!isIconEnabled(el)) return;
     const variant = calloutVariantOf(el);
     const icon = document.createElement("span");
     icon.className = "rt-callout-icon";
     icon.dataset.variant = variant;
     icon.setAttribute("aria-hidden", "true");
+    if (!calloutIcons || !(variant in calloutIcons)) {
+      icon.innerHTML = CALLOUT_ICON_SVG[variant] ?? CALLOUT_ICON_SVG.default;
+    }
     el.prepend(icon);
   });
+  if (!calloutIcons) return [];
   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")
-    });
+    const variant = chip.dataset.variant || (chip.parentElement?.getAttribute("data-variant") ?? "default");
+    if (variant in calloutIcons) {
+      chips.push({ el: chip, variant });
+    }
   });
   return chips;
 }
 function enhanceBlockquotes(root) {
   const quotes = root.querySelectorAll("blockquote");
   quotes.forEach((bq) => {
-    if (bq.dataset.rtQuoted === "1") return;
+    if (bq.querySelector(":scope > .rt-quote-open")) return;
     if (bq.closest('figure[data-variant="pullquote"]')) return;
-    bq.dataset.rtQuoted = "1";
     const { first, last } = findQuoteBody(bq);
     if (!first || !last) return;
     const open = document.createElement("span");
@@ -1113,11 +1114,10 @@ function highlightCodeBlock(pre) {
   if (!lang) return;
   const code = pre.querySelector("code");
   if (!code) return;
-  if (code.dataset.rtHighlighted === "1") return;
+  if (code.classList.contains("hljs")) return;
   const source = code.textContent ?? "";
   code.innerHTML = highlightSource(source, lang);
   code.classList.add("hljs");
-  code.dataset.rtHighlighted = "1";
 }
 var DIFF_SEPARATOR_RE = /\n?@@---@@\n?/;
 function diffLines(a, b) {
@@ -1240,8 +1240,7 @@ function buildCodeBlockLabel(pre) {
 function enhanceCodeBlocks(root) {
   const blocks = root.querySelectorAll("pre");
   blocks.forEach((pre) => {
-    if (pre.dataset.rtEnhanced === "1") return;
-    pre.dataset.rtEnhanced = "1";
+    if (pre.classList.contains("rt-codeblock")) return;
     pre.classList.add("rt-codeblock");
     const variant = pre.dataset.variant;
     if (variant === "diff") {
@@ -1585,7 +1584,7 @@ function BuiltinCalloutIcon({ variant }) {
   const html = CALLOUT_ICON_SVG[variant] ?? CALLOUT_ICON_SVG.default;
   return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } });
 }
-function RichTextContent({
+var RichTextContent = memo(function RichTextContent2({
   html,
   classMap,
   as = "div",
@@ -1603,49 +1602,58 @@ function RichTextContent({
     [html, merged]
   );
   const ref = useRef(null);
-  const [chips, setChips] = useState([]);
-  useEffect(() => {
+  const prevSafe = useRef("");
+  const chipsRef = useRef([]);
+  const onReadyRef = useRef(onReady);
+  onReadyRef.current = onReady;
+  const contentRefStable = useRef(contentRef);
+  contentRefStable.current = contentRef;
+  const calloutIconsRef = useRef(calloutIcons);
+  calloutIconsRef.current = calloutIcons;
+  const [renderKey, setRenderKey] = useState(0);
+  useLayoutEffect(() => {
     ensureCodeBlockStyles();
     const root = ref.current;
     if (!root) return;
-    if (contentRef) contentRef.current = root;
-    const apply = () => {
-      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 });
-    };
-    let raf = 0;
-    const mo = new MutationObserver(() => {
-      if (raf) return;
-      raf = requestAnimationFrame(() => {
-        raf = 0;
-        apply();
-      });
-    });
-    apply();
-    return () => {
-      mo.disconnect();
-      if (raf) cancelAnimationFrame(raf);
-    };
-  }, [safe, onReady, contentRef]);
+    if (contentRefStable.current) contentRefStable.current.current = root;
+    if (prevSafe.current === safe) return;
+    prevSafe.current = safe;
+    root.innerHTML = safe;
+    enhanceCodeBlocks(root);
+    enhanceBlockquotes(root);
+    const nextChips = enhanceCallouts(root, calloutIconsRef.current);
+    if (!calloutChipsEqual(chipsRef.current, nextChips)) {
+      chipsRef.current = nextChips;
+      if (nextChips.length > 0) setRenderKey((n) => n + 1);
+    }
+    onReadyRef.current?.(root);
+  }, [safe]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     createElement(as, {
       ref,
-      className,
-      dangerouslySetInnerHTML: { __html: safe }
+      className
     }),
-    chips.map(
+    chipsRef.current.map(
       (chip, i) => createPortal(
-        calloutIcons && chip.variant in calloutIcons ? calloutIcons[chip.variant] : /* @__PURE__ */ jsx(BuiltinCalloutIcon, { variant: chip.variant }),
+        calloutIconsRef.current && chip.variant in calloutIconsRef.current ? calloutIconsRef.current[chip.variant] : /* @__PURE__ */ jsx(BuiltinCalloutIcon, { variant: chip.variant }),
         chip.el,
         `${chip.variant}:${i}`
       )
     )
   ] });
+}, richTextPropsEqual);
+function richTextPropsEqual(prev, next) {
+  if (prev.html !== next.html) return false;
+  if (prev.classMap !== next.classMap) return false;
+  if (prev.as !== next.as) return false;
+  if (prev.className !== next.className) return false;
+  const prevKeys = prev.calloutIcons ? Object.keys(prev.calloutIcons) : [];
+  const nextKeys = next.calloutIcons ? Object.keys(next.calloutIcons) : [];
+  if (prevKeys.length !== nextKeys.length) return false;
+  for (const k of nextKeys) {
+    if (!prevKeys.includes(k)) return false;
+  }
+  return true;
 }
 
 // src/utils/extractHeadings.ts
@@ -1721,97 +1729,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] = useState([]);
-  const [activeId, setActiveId] = useState("");
-  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]);
-  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 };
-}
-
-export { AsteroidCMSProvider, RichTextContent, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate, useTableOfContents };
+export { AsteroidCMSProvider, RichTextContent, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };
 //# sourceMappingURL=client.js.map
 //# sourceMappingURL=client.js.map