@asteroidcms/core-utils 0.1.4 → 0.1.6

package/dist/client.d.cts

@@ -1,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { PropsWithChildren, RefObject } 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';
@@ -205,7 +204,7 @@ declare function useCmsImage(): (id?: string) => string;
  *
  * Idempotent: parseRichText(parseRichText(x, opts), opts) === parseRichText(x, opts).
  */
-type RichTextClassKey = "p" | "br" | "hr" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "ul" | "ol" | "li" | "blockquote" | "pre" | "code" | "inlineCode" | "a" | "strong" | "em" | "u" | "s" | "kbd" | "table" | "tableWrapper" | "thead" | "tbody" | "tr" | "th" | "td" | "figure" | "figcaption" | "img" | "span" | "callout" | "calloutTitle";
+type RichTextClassKey = "p" | "br" | "hr" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "ul" | "ol" | "li" | "blockquote" | "pre" | "code" | "inlineCode" | "a" | "strong" | "em" | "u" | "s" | "kbd" | "table" | "tableWrapper" | "thead" | "tbody" | "tr" | "th" | "td" | "figure" | "figcaption" | "img" | "span" | "callout" | "calloutTitle" | "collapsible" | "collapsibleTitle";
 type RichTextClassMap = Partial<Record<RichTextClassKey, string>> & {
     /** Variant overrides keyed as `${matchKey}:${variant}`, e.g. "callout:warning". */
     variants?: Record<string, string>;
@@ -225,18 +224,37 @@ 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>;
+    /**
+     * Per-variant icon override for callouts that opt into icons via
+     * `data-icon`. Provide a React element for any variant key — these
+     * elements are rendered into the chip via a portal, so they live in
+     * React land (refs, event handlers, theme context all work). Variants
+     * you don't provide fall back to the built-in SVG glyph.
+     *
+     * Common variants: `"info" | "warning" | "success" | "danger" | "default"`.
+     * Custom variant names work too — anything you set via
+     * `data-variant` on an `<aside data-callout>`.
+     *
+     * Example:
+     * ```tsx
+     * import { Info, AlertTriangle } from "lucide-react";
+     *
+     * <RichTextContent
+     *   html={article.doc}
+     *   calloutIcons={{
+     *     info: <Info size={14} strokeWidth={2.4} />,
+     *     warning: <AlertTriangle size={14} strokeWidth={2.4} />,
+     *   }}
+     * />
+     * ```
+     */
+    calloutIcons?: Partial<Record<string, ReactNode>>;
 }
-declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, }: RichTextContentProps): react.DOMElement<{
-    ref: react.MutableRefObject<HTMLElement | null>;
-    className: string | undefined;
-    dangerouslySetInnerHTML: {
-        __html: string;
-    };
-}, HTMLElement>;
+declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, calloutIcons, }: RichTextContentProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Heading extraction helpers used to build tables of contents (ToC) from
@@ -275,42 +293,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,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { PropsWithChildren, RefObject } 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';
@@ -205,7 +204,7 @@ declare function useCmsImage(): (id?: string) => string;
  *
  * Idempotent: parseRichText(parseRichText(x, opts), opts) === parseRichText(x, opts).
  */
-type RichTextClassKey = "p" | "br" | "hr" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "ul" | "ol" | "li" | "blockquote" | "pre" | "code" | "inlineCode" | "a" | "strong" | "em" | "u" | "s" | "kbd" | "table" | "tableWrapper" | "thead" | "tbody" | "tr" | "th" | "td" | "figure" | "figcaption" | "img" | "span" | "callout" | "calloutTitle";
+type RichTextClassKey = "p" | "br" | "hr" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "ul" | "ol" | "li" | "blockquote" | "pre" | "code" | "inlineCode" | "a" | "strong" | "em" | "u" | "s" | "kbd" | "table" | "tableWrapper" | "thead" | "tbody" | "tr" | "th" | "td" | "figure" | "figcaption" | "img" | "span" | "callout" | "calloutTitle" | "collapsible" | "collapsibleTitle";
 type RichTextClassMap = Partial<Record<RichTextClassKey, string>> & {
     /** Variant overrides keyed as `${matchKey}:${variant}`, e.g. "callout:warning". */
     variants?: Record<string, string>;
@@ -225,18 +224,37 @@ 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>;
+    /**
+     * Per-variant icon override for callouts that opt into icons via
+     * `data-icon`. Provide a React element for any variant key — these
+     * elements are rendered into the chip via a portal, so they live in
+     * React land (refs, event handlers, theme context all work). Variants
+     * you don't provide fall back to the built-in SVG glyph.
+     *
+     * Common variants: `"info" | "warning" | "success" | "danger" | "default"`.
+     * Custom variant names work too — anything you set via
+     * `data-variant` on an `<aside data-callout>`.
+     *
+     * Example:
+     * ```tsx
+     * import { Info, AlertTriangle } from "lucide-react";
+     *
+     * <RichTextContent
+     *   html={article.doc}
+     *   calloutIcons={{
+     *     info: <Info size={14} strokeWidth={2.4} />,
+     *     warning: <AlertTriangle size={14} strokeWidth={2.4} />,
+     *   }}
+     * />
+     * ```
+     */
+    calloutIcons?: Partial<Record<string, ReactNode>>;
 }
-declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, }: RichTextContentProps): react.DOMElement<{
-    ref: react.MutableRefObject<HTMLElement | null>;
-    className: string | undefined;
-    dangerouslySetInnerHTML: {
-        __html: string;
-    };
-}, HTMLElement>;
+declare function RichTextContent({ html, classMap, as, className, onReady, contentRef, calloutIcons, }: RichTextContentProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Heading extraction helpers used to build tables of contents (ToC) from
@@ -275,42 +293,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,12 +1,12 @@
 "use client";
-import { createContext, useContext, useMemo, useRef, useEffect, createElement, useState } from 'react';
+import { createContext, useContext, useMemo, useRef, useState, useEffect, Fragment, createElement } 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 } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 import hljs from 'highlight.js/lib/common';
-import 'highlight.js/styles/tokyo-night-dark.css';
 
 var AsteroidCMSContext = createContext(null);
 function useAsteroidCMSConfig() {
@@ -365,7 +365,9 @@ var DEFAULT_ALLOWLIST = [
   "section",
   "article",
   "div",
-  "span"
+  "span",
+  "details",
+  "summary"
 ];
 var ALLOWED_ATTRS = {
   a: ["href", "title", "target", "rel"],
@@ -375,7 +377,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"]
@@ -409,7 +412,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 = {}) {
@@ -823,6 +827,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",
@@ -989,8 +995,6 @@ function sanitizeAndStyle(html, options) {
   }
   return out.join("");
 }
-
-// src/components/RichTextContent.tsx
 var DEFAULT_CLASS_MAP = {
   variants: {
     "figure:pullquote": "relative my-8",
@@ -1025,6 +1029,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) => {
@@ -1254,6 +1298,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; }
@@ -1305,6 +1371,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. */
@@ -1446,17 +1570,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__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } });
+}
 function RichTextContent({
   html,
   classMap,
   as = "div",
   className,
   onReady,
-  contentRef
+  contentRef,
+  calloutIcons
 }) {
   const merged = useMemo(
     () => mergeClassMap(DEFAULT_CLASS_MAP, classMap),
@@ -1467,6 +1603,7 @@ function RichTextContent({
     [html, merged]
   );
   const ref = useRef(null);
+  const [chips, setChips] = useState([]);
   useEffect(() => {
     ensureCodeBlockStyles();
     const root = ref.current;
@@ -1476,6 +1613,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 });
     };
@@ -1493,11 +1632,20 @@ function RichTextContent({
       if (raf) cancelAnimationFrame(raf);
     };
   }, [safe, onReady, contentRef]);
-  return createElement(as, {
-    ref,
-    className,
-    dangerouslySetInnerHTML: { __html: safe }
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    createElement(as, {
+      ref,
+      className,
+      dangerouslySetInnerHTML: { __html: safe }
+    }),
+    chips.map(
+      (chip, i) => createPortal(
+        calloutIcons && chip.variant in calloutIcons ? calloutIcons[chip.variant] : /* @__PURE__ */ jsx(BuiltinCalloutIcon, { variant: chip.variant }),
+        chip.el,
+        `${chip.variant}:${i}`
+      )
+    )
+  ] });
 }
 
 // src/utils/extractHeadings.ts
@@ -1573,97 +1721,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