@asteroidcms/core-utils 0.1.3 → 0.1.5

package/dist/client.js

@@ -1,12 +1,12 @@
 "use client";
-import { createContext, useContext, useMemo, useRef, useEffect, createElement } 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 = {}) {
@@ -419,7 +423,36 @@ function parseRichText(html, options = {}) {
   working = upgradeStandaloneImages(working);
   working = upgradeAuthoredBlockquotes(working);
   working = flattenTableCellParagraphs(working);
-  return sanitizeAndStyle(working, options);
+  working = sanitizeAndStyle(working, options);
+  if (options.autoHeadingIds !== false) {
+    working = injectHeadingIds(working);
+  }
+  return working;
+}
+function injectHeadingIds(html) {
+  const used = /* @__PURE__ */ new Map();
+  const existingRe = /<h[1-6]\b[^>]*\bid\s*=\s*("([^"]*)"|'([^']*)'|(\S+))/gi;
+  let em;
+  while ((em = existingRe.exec(html)) !== null) {
+    const id = em[2] ?? em[3] ?? em[4] ?? "";
+    if (id) used.set(id, (used.get(id) ?? 0) + 1);
+  }
+  return html.replace(
+    /<(h[1-6])\b([^>]*)>([\s\S]*?)<\/\1>/gi,
+    (full, tag, attrs, inner) => {
+      if (/\bid\s*=/i.test(attrs)) return full;
+      const text = inner.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/\s+/g, " ").trim();
+      if (!text) return full;
+      const base = slugifyHeading(text) || tag;
+      const n = used.get(base) ?? 0;
+      used.set(base, n + 1);
+      const id = n === 0 ? base : `${base}-${n}`;
+      return `<${tag}${attrs} id="${id}">${inner}</${tag}>`;
+    }
+  );
+}
+function slugifyHeading(text) {
+  return text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
 }
 function flattenTableCellParagraphs(html) {
   return html.replace(
@@ -794,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",
@@ -960,8 +995,6 @@ function sanitizeAndStyle(html, options) {
   }
   return out.join("");
 }
-
-// src/components/RichTextContent.tsx
 var DEFAULT_CLASS_MAP = {
   variants: {
     "figure:pullquote": "relative my-8",
@@ -996,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) => {
@@ -1225,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; }
@@ -1276,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. */
@@ -1417,15 +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
+  className,
+  onReady,
+  contentRef,
+  calloutIcons
 }) {
   const merged = useMemo(
     () => mergeClassMap(DEFAULT_CLASS_MAP, classMap),
@@ -1436,20 +1603,215 @@ function RichTextContent({
     [html, merged]
   );
   const ref = useRef(null);
+  const [chips, setChips] = useState([]);
   useEffect(() => {
     ensureCodeBlockStyles();
-    if (ref.current) {
-      enhanceCodeBlocks(ref.current);
-      enhanceBlockquotes(ref.current);
+    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]);
+  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
+var DEFAULT_LEVELS = [2, 3];
+function slugify(text) {
+  return text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().trim().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function decodeBasicEntities(s) {
+  return s.replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'");
+}
+function stripTags(s) {
+  return decodeBasicEntities(s.replace(/<[^>]+>/g, " ")).replace(/\s+/g, " ").trim();
+}
+function uniqueId(base, used) {
+  const seed = base || "section";
+  const n = used.get(seed) ?? 0;
+  used.set(seed, n + 1);
+  return n === 0 ? seed : `${seed}-${n}`;
+}
+function extractHeadingsFromHtml(html, options = {}) {
+  if (!html) return [];
+  const levels = options.levels ?? DEFAULT_LEVELS;
+  const slug = options.slugify ?? slugify;
+  const used = /* @__PURE__ */ new Map();
+  const out = [];
+  const re = /<h([1-6])\b([^>]*)>([\s\S]*?)<\/h\1>/gi;
+  let m;
+  let i = 0;
+  while ((m = re.exec(html)) !== null) {
+    const level = Number(m[1]);
+    if (!levels.includes(level)) continue;
+    const attrs = m[2] ?? "";
+    const inner = m[3] ?? "";
+    const text = stripTags(inner);
+    if (!text) continue;
+    const explicitIdMatch = attrs.match(/\bid\s*=\s*("([^"]*)"|'([^']*)'|(\S+))/i);
+    let id;
+    if (explicitIdMatch) {
+      id = explicitIdMatch[2] ?? explicitIdMatch[3] ?? explicitIdMatch[4] ?? "";
+      if (id) used.set(id, (used.get(id) ?? 0) + 1);
+    } else {
+      id = uniqueId(slug(text, i), used);
     }
-  }, [safe]);
-  return createElement(as, {
-    ref,
-    className,
-    dangerouslySetInnerHTML: { __html: safe }
+    out.push({ id, text, level });
+    i++;
+  }
+  return out;
+}
+function extractHeadingsFromElement(root, options = {}) {
+  const levels = options.levels ?? DEFAULT_LEVELS;
+  const slug = options.slugify ?? slugify;
+  const selector = levels.map((l) => `h${l}`).join(",");
+  const nodes = root.querySelectorAll(selector);
+  const used = /* @__PURE__ */ new Map();
+  nodes.forEach((n) => {
+    if (n.id) used.set(n.id, (used.get(n.id) ?? 0) + 1);
   });
+  const out = [];
+  let i = 0;
+  nodes.forEach((node) => {
+    const level = Number(node.tagName.slice(1));
+    const text = (node.textContent ?? "").replace(/\s+/g, " ").trim();
+    if (!text) return;
+    if (!node.id) {
+      node.id = uniqueId(slug(text, i), used);
+    }
+    if (options.scrollMarginTop != null) {
+      node.style.scrollMarginTop = `${options.scrollMarginTop}px`;
+    }
+    out.push({ id: node.id, text, level });
+    i++;
+  });
+  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, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };
+export { AsteroidCMSProvider, RichTextContent, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate, useTableOfContents };
 //# sourceMappingURL=client.js.map
 //# sourceMappingURL=client.js.map