@bettercms-ai/ui 0.22.0 → 0.23.1

package/dist/index.js

@@ -626,6 +626,14 @@ var PT_TYPES = {
   gallery: "gallery",
   /** A table of contents built from the headings — see `PortableTextTableOfContents`. The V2 kit's `<nav data-rt="toc">`. */
   tableOfContents: "tableOfContents",
+  /** A footnote, an INLINE object in body text — see `PortableTextFootnote`. The V2 kit's `<sup data-rt="fn">`. */
+  footnote: "footnote",
+  /** Columns of text — see `PortableTextColumns`. The V2 kit's `<div data-rt="columns">`; the legacy `builtin:columns` reads the same way. */
+  columns: "columns",
+  /** An author bio — see `PortableTextAuthorBio`. The V2 kit's `<aside data-rt="author">`. */
+  authorBio: "authorBio",
+  /** Related posts — see `PortableTextRelatedPosts`. The V2 kit's `<aside data-rt="related">`. */
+  relatedPosts: "relatedPosts",
   /**
    * A table. Spelled `table`, unprefixed, because that is what every other Portable Text
    * producer calls one — the Sanity-shaped `{_type:"table", rows}` this platform used to refuse
@@ -655,7 +663,10 @@ var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
   PT_TYPES.keyTakeaways,
   PT_TYPES.embed,
   PT_TYPES.gallery,
-  PT_TYPES.tableOfContents
+  PT_TYPES.tableOfContents,
+  PT_TYPES.columns,
+  PT_TYPES.authorBio,
+  PT_TYPES.relatedPosts
 ]);
 var EMBEDDED_COMPONENT_KEY = "component";
 
@@ -1130,6 +1141,28 @@ function keyTakeawaysView(value) {
   return { title, points };
 }
 
+// ../richtext/src/image-layout.ts
+import {
+  focalInCrop,
+  formatImageRect,
+  imageValueUrl,
+  normalizeImageCrop,
+  normalizeImageFocal,
+  objectPosition,
+  parseImageRect
+} from "@bettercms-ai/image-url";
+function richTextImageFrame(src, crop, focal) {
+  const c = normalizeImageCrop(crop);
+  const f = normalizeImageFocal(focal);
+  if (!c && !f) return { src, crop: null, focal: null, position: null, data: [] };
+  const drawn = imageValueUrl({ url: src, crop: c, focal: f }) ?? src;
+  const data = [];
+  if (drawn !== src) data.push(["data-src", src]);
+  if (c) data.push(["data-crop", formatImageRect(c)]);
+  if (f) data.push(["data-focal", `${f.x},${f.y}`]);
+  return { src: drawn, crop: c, focal: f, position: f ? objectPosition(focalInCrop(f, c)) : null, data };
+}
+
 // ../richtext/src/gallery.ts
 var isRecord3 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
 var galleryMediaSrc = (raw) => safeHref(raw) ?? (raw !== "" && !raw.startsWith("//") && !/[:\s]/.test(raw) ? raw : null);
@@ -1155,9 +1188,12 @@ function galleryView(value) {
     if (!isRecord3(item) || !isRecord3(item.image)) return;
     const src = galleryMediaSrc(typeof item.image.src === "string" ? item.image.src.trim() : "");
     if (!src) return;
+    const frame = richTextImageFrame(src, item.image.crop, item.image.focal);
     images.push({
       key: typeof item._key === "string" && item._key ? item._key : `i${i}`,
-      src,
+      src: frame.src,
+      position: frame.position,
+      data: frame.data,
       alt: typeof item.image.alt === "string" ? item.image.alt : "",
       caption: typeof item.caption === "string" ? item.caption.trim() : ""
     });
@@ -1165,16 +1201,49 @@ function galleryView(value) {
   return { layout, images };
 }
 
-// ../richtext/src/component-copy.ts
+// ../richtext/src/columns.ts
+var PT_COLUMNS_LIMITS = { min: 2, max: 4 };
+var BUILTIN_COLUMNS_KEY = "builtin:columns";
 var isRecord4 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
-var fieldsOf = (value) => isRecord4(value) && value.schemaKey === EMBEDDED_COMPONENT_KEY && isRecord4(value.fields) ? value.fields : null;
+var COLUMNS_STYLES = {
+  s: { row: "display:flex;flex-wrap:wrap;gap:0.75rem", col: "flex:1 1 14rem;min-width:0" },
+  m: { row: "display:flex;flex-wrap:wrap;gap:1.25rem", col: "flex:1 1 14rem;min-width:0" },
+  l: { row: "display:flex;flex-wrap:wrap;gap:2rem", col: "flex:1 1 14rem;min-width:0" }
+};
+var legacyContent = (text, key) => text.split(/\n{2,}/).filter((p) => p.trim() !== "").map((p, i) => ({ _type: "block", _key: `${key}p${i}`, style: "normal", markDefs: [], children: [{ _type: "span", _key: `${key}s${i}`, text: p, marks: [] }] }));
+function columnsView(node) {
+  if (!isRecord4(node)) return null;
+  if (node._type === PT_TYPES.columns) {
+    const gap = node.gap === "s" || node.gap === "l" ? node.gap : "m";
+    const columns = (Array.isArray(node.columns) ? node.columns : []).map((c, i) => ({
+      key: isRecord4(c) && typeof c._key === "string" && c._key ? c._key : `c${i}`,
+      content: isRecord4(c) && Array.isArray(c.content) ? c.content : []
+    }));
+    return { gap, columns };
+  }
+  if (node._type === PT_TYPES.block && node.schemaKey === BUILTIN_COLUMNS_KEY) {
+    const f = isRecord4(node.fields) ? node.fields : {};
+    if (!Array.isArray(f.columns) || !f.columns.every((c) => typeof c === "string")) return null;
+    const gap = f.gap === "small" ? "s" : f.gap === "large" ? "l" : "m";
+    const columns = (Array.isArray(f.columns) ? f.columns : []).slice(0, PT_COLUMNS_LIMITS.max).map((c, i) => ({
+      key: `c${i}`,
+      content: legacyContent(typeof c === "string" ? c : "", `c${i}`)
+    }));
+    return { gap, columns };
+  }
+  return null;
+}
+
+// ../richtext/src/component-copy.ts
+var isRecord5 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var fieldsOf = (value) => isRecord5(value) && value.schemaKey === EMBEDDED_COMPONENT_KEY && isRecord5(value.fields) ? value.fields : null;
 function detachedComponentCopy(value) {
   const f = fieldsOf(value);
   if (!f || f.detached !== true || !Array.isArray(f.blocks)) return null;
   return {
-    id: isRecord4(value) && typeof value._key === "string" ? value._key : "",
+    id: isRecord5(value) && typeof value._key === "string" ? value._key : "",
     componentId: typeof f.componentId === "string" ? f.componentId : "",
-    props: isRecord4(f.props) ? f.props : {},
+    props: isRecord5(f.props) ? f.props : {},
     blocks: f.blocks,
     ...typeof f.sourcePublishedAt === "string" ? { sourcePublishedAt: f.sourcePublishedAt } : {},
     ...typeof f.variant === "string" ? { variant: f.variant } : {}
@@ -1187,7 +1256,7 @@ function componentCopyLines(copy) {
       const t = v.replace(/<[^>]+>/g, " ").replace(/&nbsp;/g, " ").replace(/\s+/g, " ").trim();
       return t || null;
     }
-    if (isRecord4(v)) return line(v.label ?? v.text ?? v.title);
+    if (isRecord5(v)) return line(v.label ?? v.text ?? v.title);
     return null;
   };
   return Object.values(copy.props).map(line).filter((s) => !!s);
@@ -1218,6 +1287,14 @@ function portableTextToPlainText(value) {
       lines.push(...galleryView(node).images.map((x) => x.caption).filter(Boolean));
       continue;
     }
+    const cols = columnsView(node);
+    if (cols) {
+      for (const c of cols.columns) {
+        const text = portableTextToPlainText(c.content);
+        if (text) lines.push(text);
+      }
+      continue;
+    }
     const table = migrateTable(node);
     if (table) {
       lines.push(...tableLines(table));
@@ -1258,20 +1335,30 @@ var pullQuoteLines = (v) => {
 
 // ../richtext/src/toc.ts
 import { slugify } from "@bettercms-ai/types";
-var isRecord5 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
-var headingText = (node) => (Array.isArray(node.children) ? node.children : []).map((c) => isRecord5(c) && typeof c.text === "string" ? c.text : "").join("").replace(/​/g, "").trim();
+var isRecord6 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var isHeadingAnchor = (v) => typeof v === "string" && /^[A-Za-z0-9][A-Za-z0-9_:.-]{0,127}$/.test(v);
+var headingText = (node) => (Array.isArray(node.children) ? node.children : []).map((c) => isRecord6(c) && typeof c.text === "string" ? c.text : "").join("").replace(/​/g, "").trim();
 function outlineOf(value) {
-  const items = [];
-  const nodes = /* @__PURE__ */ new WeakMap();
+  const heads = [];
   const used = /* @__PURE__ */ new Set();
   for (const node of Array.isArray(value) ? value : []) {
-    if (!isRecord5(node) || node._type !== "block" || node.listItem || node.style !== "h2" && node.style !== "h3") continue;
+    if (!isRecord6(node) || node._type !== "block" || node.listItem || node.style !== "h2" && node.style !== "h3") continue;
     const text = headingText(node);
     if (!text) continue;
-    const base = slugify(text);
-    let id = base;
-    for (let n = 2; used.has(id); n++) id = `${base}-${n}`;
-    used.add(id);
+    const anchor = isHeadingAnchor(node.anchor) && !used.has(node.anchor) ? node.anchor : null;
+    if (anchor) used.add(anchor);
+    heads.push({ node, text, anchor });
+  }
+  const items = [];
+  const nodes = /* @__PURE__ */ new WeakMap();
+  for (const { node, text, anchor } of heads) {
+    let id = anchor;
+    if (!id) {
+      const base = slugify(text);
+      id = base;
+      for (let n = 2; used.has(id); n++) id = `${base}-${n}`;
+      used.add(id);
+    }
     nodes.set(node, id);
     items.push({ id, text, depth: node.style === "h2" ? 2 : 3 });
   }
@@ -1288,25 +1375,79 @@ function tocTree(items, depth) {
   return out;
 }
 function tocView(value) {
-  const v = isRecord5(value) ? value : {};
+  const v = isRecord6(value) ? value : {};
   const title = typeof v.title === "string" ? v.title.trim() : "";
   return { title, label: title || "Table of contents", depth: v.depth === "2" ? "2" : "3" };
 }
 
+// ../richtext/src/footnote.ts
+var isRecord7 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+function footnoteOrder(value) {
+  const notes = [];
+  const nodes = /* @__PURE__ */ new WeakMap();
+  for (const node of Array.isArray(value) ? value : []) {
+    if (!isRecord7(node) || node._type !== "block" || !Array.isArray(node.children)) continue;
+    for (const child of node.children) {
+      if (!isRecord7(child) || child._type !== PT_TYPES.footnote) continue;
+      nodes.set(child, notes.push(typeof child.note === "string" ? child.note : ""));
+    }
+  }
+  return { notes, nodes };
+}
+
+// ../richtext/src/references.ts
+var PT_RELATED_LIMITS = { titleChars: 40, minCount: 1, maxCount: 6, posts: 6 };
+var isRecord8 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var refOf = (v) => isRecord8(v) && typeof v._ref === "string" ? v._ref : "";
+var imageSrc = (raw) => safeHref(raw) ?? (raw !== "" && !raw.startsWith("//") && !/[:\s]/.test(raw) ? raw : null);
+function relatedPostsView(value, resolved = {}) {
+  const v = isRecord8(value) ? value : {};
+  const title = typeof v.title === "string" ? v.title.trim() : "";
+  const mode = v.mode === "manual" || v.mode === "newest" ? v.mode : "topic";
+  const n = typeof v.count === "number" && Number.isInteger(v.count) ? v.count : 3;
+  const count = Math.min(PT_RELATED_LIMITS.maxCount, Math.max(PT_RELATED_LIMITS.minCount, n));
+  const picked = (Array.isArray(v.posts) ? v.posts : []).map(refOf).filter(Boolean);
+  const key = typeof v._key === "string" ? v._key : "";
+  const ids = mode === "manual" ? picked : (resolved.related?.[key] ?? []).slice(0, count);
+  const items = [];
+  for (const id of ids) {
+    const post = resolved.posts?.[id];
+    const url = post && typeof post.url === "string" ? safeHref(post.url) : null;
+    if (post && typeof post.title === "string" && url) items.push({ ...post, id, url });
+  }
+  return { key, title, mode, count, picked, items };
+}
+function authorBioView(value, resolved = {}) {
+  const key = isRecord8(value) && typeof value._key === "string" ? value._key : "";
+  const id = refOf(isRecord8(value) ? value.author : void 0);
+  const a = id ? resolved.authors?.[id] : void 0;
+  if (!a || typeof a.name !== "string") return { key, id, author: null };
+  const avatar = typeof a.avatar === "string" ? imageSrc(a.avatar.trim()) : null;
+  return {
+    key,
+    id,
+    author: {
+      name: a.name,
+      ...avatar ? { avatar } : {},
+      ...typeof a.bio === "string" && a.bio.trim() ? { bio: a.bio.trim() } : {}
+    }
+  };
+}
+
 // ../richtext/src/read.ts
-var isRecord6 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
+var isRecord9 = (v) => !!v && typeof v === "object" && !Array.isArray(v);
 function normalizePortableText(value, key = randomKey) {
   if (!Array.isArray(value)) return [];
   return value.flatMap((raw) => {
-    if (!isRecord6(raw) || typeof raw._type !== "string") return [];
+    if (!isRecord9(raw) || typeof raw._type !== "string") return [];
     const table = migrateTable(raw, key, (v, cellKey) => normalizePortableText(v, cellKey));
     if (table) return [table];
-    const node = { ...raw, _key: isRecord6(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
+    const node = { ...raw, _key: isRecord9(raw) && typeof raw._key === "string" && raw._key ? raw._key : key() };
     if (node._type === "block") {
       if (!Array.isArray(node.markDefs)) node.markDefs = [];
       if (typeof node.style !== "string") node.style = "normal";
       node.children = (Array.isArray(node.children) ? node.children : []).map((c) => {
-        if (!isRecord6(c)) return c;
+        if (!isRecord9(c)) return c;
         const child = { ...c, _key: typeof c._key === "string" && c._key ? c._key : key() };
         if (child._type === "span" && !Array.isArray(child.marks)) child.marks = [];
         return child;
@@ -1316,9 +1457,9 @@ function normalizePortableText(value, key = randomKey) {
   });
 }
 function readStructuredContent(props) {
-  if (!isRecord6(props)) return null;
+  if (!isRecord9(props)) return null;
   const candidate = props.content ?? props.value;
-  const arr = Array.isArray(candidate) ? candidate : isRecord6(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
+  const arr = Array.isArray(candidate) ? candidate : isRecord9(candidate) ? Array.isArray(candidate.content) ? candidate.content : Array.isArray(candidate.value) ? candidate.value : null : null;
   return arr && arr.length > 0 ? arr : null;
 }
 
@@ -1675,6 +1816,47 @@ function XCard({ url, card }) {
     /* @__PURE__ */ jsx14("a", { href: url, children: card.date || "View on X" })
   ] });
 }
+function RelatedPosts({ value, resolved }) {
+  const { key, title, mode, count, picked, items } = relatedPostsView(value, resolved);
+  if (!resolved) {
+    return /* @__PURE__ */ jsx14("aside", { "data-rt": "related", "data-key": key, "data-mode": mode, "data-count": count, "data-posts": picked.join(","), "data-title": title || void 0 });
+  }
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsxs11("aside", { "data-rt": "related", "data-mode": mode, "data-count": count, "data-posts": picked.join(","), children: [
+    title ? /* @__PURE__ */ jsx14("p", { "data-title": "", children: title }) : null,
+    items.length ? /* @__PURE__ */ jsx14("ul", { children: items.map((p) => /* @__PURE__ */ jsx14("li", { children: /* @__PURE__ */ jsx14("a", { href: p.url, children: p.title }) }, p.id)) }) : null
+  ] });
+}
+function AuthorBio({ value, resolved }) {
+  const { key, id, author } = authorBioView(value, resolved);
+  if (!resolved) return /* @__PURE__ */ jsx14("aside", { "data-rt": "author", "data-key": key, "data-author": id });
+  if (!author) return null;
+  return /* @__PURE__ */ jsxs11("aside", { "data-rt": "author", "data-author": id, children: [
+    author?.avatar ? /* @__PURE__ */ jsx14("img", { src: author.avatar, alt: "" }) : null,
+    author ? /* @__PURE__ */ jsx14("p", { "data-name": "", children: author.name }) : null,
+    author?.bio ? /* @__PURE__ */ jsx14("p", { "data-bio": "", children: author.bio }) : null
+  ] });
+}
+function Columns2({ value, components }) {
+  const view = columnsView(value);
+  if (!view) return null;
+  const s = COLUMNS_STYLES[view.gap];
+  return /* @__PURE__ */ jsx14("div", { "data-rt": "columns", "data-gap": view.gap, "data-cols": view.columns.length, style: styleObject(s.row), children: view.columns.map((c) => /* @__PURE__ */ jsx14("div", { "data-col": "true", style: styleObject(s.col), children: c.content.length ? /* @__PURE__ */ jsx14(PT, { value: c.content, components }) : null }, c.key)) });
+}
+function FootnoteMark({ value, footnotes }) {
+  const note = typeof value.note === "string" ? value.note : "";
+  const n = footnotes.nodes.get(value);
+  if (!n) return /* @__PURE__ */ jsx14("sup", { "data-rt": "fn", "data-note": note });
+  return /* @__PURE__ */ jsx14("sup", { "data-rt": "fn", id: `fnref-${n}`, "data-note": note, children: /* @__PURE__ */ jsx14("a", { href: `#fn-${n}`, "aria-label": `Footnote ${n}`, children: n }) });
+}
+function FootnoteList({ notes }) {
+  if (!notes.length) return null;
+  return /* @__PURE__ */ jsx14("ol", { className: "cs-footnotes", "data-rt": "footnotes", "aria-label": "Footnotes", children: notes.map((note, i) => /* @__PURE__ */ jsxs11("li", { id: `fn-${i + 1}`, children: [
+    note,
+    " ",
+    /* @__PURE__ */ jsx14("a", { href: `#fnref-${i + 1}`, "aria-label": `Back to reference ${i + 1}`, children: "\u21A9" })
+  ] }, i)) });
+}
 function Toc({ value, outline }) {
   const { title, label, depth } = tocView(value);
   const link = (o) => /* @__PURE__ */ jsx14("a", { href: `#${o.id}`, children: o.text });
@@ -1690,7 +1872,16 @@ function Gallery({ value }) {
   const { layout, images } = galleryView(value);
   const s = GALLERY_STYLES[layout];
   return /* @__PURE__ */ jsx14("figure", { "data-rt": "gallery", "data-layout": layout, children: /* @__PURE__ */ jsx14("ul", { style: styleObject(s.ul), tabIndex: layout === "carousel" ? 0 : void 0, children: images.map((x) => /* @__PURE__ */ jsx14("li", { style: styleObject(s.li), children: /* @__PURE__ */ jsxs11("figure", { style: styleObject(s.figure), children: [
-    /* @__PURE__ */ jsx14("img", { src: x.src, alt: x.alt, style: styleObject(s.img), loading: "lazy" }),
+    /* @__PURE__ */ jsx14(
+      "img",
+      {
+        alt: x.alt,
+        style: styleObject(x.position ? `${s.img};object-position:${x.position}` : s.img),
+        loading: "lazy",
+        ...Object.fromEntries(x.data),
+        src: x.src
+      }
+    ),
     x.caption ? /* @__PURE__ */ jsx14("figcaption", { children: x.caption }) : null
   ] }) }, x.key)) }) });
 }
@@ -1714,8 +1905,8 @@ function Embed({ value, embeds }) {
   }
   return /* @__PURE__ */ jsx14("figure", { "data-rt": "embed", "data-url": url, "data-provider": r.provider, "data-aspect": aspect, "aria-label": title, children: body });
 }
-function buildComponents(renderBlock, embeds = {}, outline = { items: [], nodes: /* @__PURE__ */ new WeakMap() }) {
-  return {
+function buildComponents(renderBlock, embeds = {}, outline = { items: [], nodes: /* @__PURE__ */ new WeakMap() }, footnotes = { notes: [], nodes: /* @__PURE__ */ new WeakMap() }, resolved) {
+  const components = {
     // RT5: every top-level h2 and h3 carries its outline id, as html.ts writes it.
     block: {
       h2: ({ value, children }) => /* @__PURE__ */ jsx14("h2", { id: outline.nodes.get(value), children }),
@@ -1743,6 +1934,7 @@ function buildComponents(renderBlock, embeds = {}, outline = { items: [], nodes:
         if (rendered !== void 0) return /* @__PURE__ */ jsx14(Fragment2, { children: rendered });
         const builtIn = calloutOrToggle(value);
         if (builtIn) return builtIn;
+        if (columnsView(value)) return /* @__PURE__ */ jsx14(Columns2, { value, components });
         const copy = detachedComponentCopy(value);
         if (copy) {
           return /* @__PURE__ */ jsx14("div", { className: "bcms-block bcms-block--component", "data-bcms-component-copy": copy.componentId, "data-bcms-instance": copy.id, children: /* @__PURE__ */ jsx14(BlocksRenderer, { blocks: copy.blocks }) });
@@ -1775,6 +1967,9 @@ function buildComponents(renderBlock, embeds = {}, outline = { items: [], nodes:
       [PT_TYPES.embed]: ({ value }) => /* @__PURE__ */ jsx14(Embed, { value, embeds }),
       [PT_TYPES.gallery]: ({ value }) => /* @__PURE__ */ jsx14(Gallery, { value }),
       [PT_TYPES.tableOfContents]: ({ value }) => /* @__PURE__ */ jsx14(Toc, { value, outline }),
+      [PT_TYPES.columns]: ({ value }) => /* @__PURE__ */ jsx14(Columns2, { value, components }),
+      [PT_TYPES.relatedPosts]: ({ value }) => /* @__PURE__ */ jsx14(RelatedPosts, { value, resolved }),
+      [PT_TYPES.authorBio]: ({ value }) => /* @__PURE__ */ jsx14(AuthorBio, { value, resolved }),
       /**
        * Key takeaways — the React half of `portableTextToHtml`'s, and the same DOM: the V2 kit's
        * `<aside data-rt="takeaways">`, read through the one `keyTakeawaysView` both renderers share.
@@ -1787,6 +1982,7 @@ function buildComponents(renderBlock, embeds = {}, outline = { items: [], nodes:
           /* @__PURE__ */ jsx14("ul", { children: points.map((p, i) => /* @__PURE__ */ jsx14("li", { children: p }, i)) })
         ] });
       },
+      [PT_TYPES.footnote]: ({ value }) => /* @__PURE__ */ jsx14(FootnoteMark, { value, footnotes }),
       [PT_TYPES.mention]: ({ value }) => {
         const v = value;
         return /* @__PURE__ */ jsx14("span", { className: "bcms-mention", children: typeof v.label === "string" ? v.label : "" });
@@ -1851,6 +2047,7 @@ function buildComponents(renderBlock, embeds = {}, outline = { items: [], nodes:
     unknownType: ({ children }) => /* @__PURE__ */ jsx14(Fragment2, { children: children ?? null }),
     unknownBlockStyle: ({ children }) => /* @__PURE__ */ jsx14("p", { children })
   };
+  return components;
 }
 var isListItem = (node) => node._type === "block" && typeof node.listItem === "string" && !!node.listItem;
 function runsOf(blocks) {
@@ -1891,10 +2088,14 @@ function calloutOrToggle(value) {
   }
   return null;
 }
-function PortableText({ value, bindingBase, renderBlock, embeds }) {
+function PortableText({ value, bindingBase, renderBlock, embeds, resolved }) {
   const blocks = React6.useMemo(() => normalizePortableText(readValue(value)), [value]);
   const outline = React6.useMemo(() => outlineOf(blocks), [blocks]);
-  const components = React6.useMemo(() => buildComponents(renderBlock, embeds, outline), [renderBlock, embeds, outline]);
+  const footnotes = React6.useMemo(() => footnoteOrder(blocks), [blocks]);
+  const components = React6.useMemo(
+    () => buildComponents(renderBlock, embeds, outline, footnotes, resolved),
+    [renderBlock, embeds, outline, footnotes, resolved]
+  );
   const listComponents = React6.useMemo(() => {
     if (!bindingBase) return null;
     const keys = new Set(blocks.map((b) => b._key));
@@ -1910,10 +2111,19 @@ function PortableText({ value, bindingBase, renderBlock, embeds }) {
     };
   }, [bindingBase, blocks, components]);
   if (blocks.length === 0) return null;
-  if (!bindingBase || !listComponents) return /* @__PURE__ */ jsx14(PT, { value: blocks, components });
-  return /* @__PURE__ */ jsx14(Fragment2, { children: runsOf(blocks).map(
-    (run) => isListItem(run[0]) ? /* @__PURE__ */ jsx14(PT, { value: run, components: listComponents }, run[0]._key) : /* @__PURE__ */ jsx14(Bound, { base: bindingBase, nodeKey: run[0]._key, children: /* @__PURE__ */ jsx14(PT, { value: run, components }) }, run[0]._key)
-  ) });
+  const notes = /* @__PURE__ */ jsx14(FootnoteList, { notes: footnotes.notes });
+  if (!bindingBase || !listComponents) {
+    return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+      /* @__PURE__ */ jsx14(PT, { value: blocks, components }),
+      notes
+    ] });
+  }
+  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    runsOf(blocks).map(
+      (run) => isListItem(run[0]) ? /* @__PURE__ */ jsx14(PT, { value: run, components: listComponents }, run[0]._key) : /* @__PURE__ */ jsx14(Bound, { base: bindingBase, nodeKey: run[0]._key, children: /* @__PURE__ */ jsx14(PT, { value: run, components }) }, run[0]._key)
+    ),
+    notes
+  ] });
 }
 function readValue(value) {
   if (Array.isArray(value)) return value;