@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.767

package/dist/components/embeds/og-link-preview.js

@@ -5,7 +5,10 @@ import Image from "../../embed-shims/next-image.js";
 import Link from "../../embed-shims/next-link.js";
 import { useImageEdgeColor } from "../../hooks/index.js";
 import { useOgPlaceholderUrl } from "../../hooks/use-og-placeholder-url.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { ICON_SIZE, MEDIA_ASPECT, TILE_SIZE } from "../../styles/component-sizes.js";
+import { cn } from "../../utils/cn.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { TruncateText } from "../ui/truncate-text.js";
 class OGLinkErrorBoundary extends Component {
   constructor(props) {
@@ -73,16 +76,71 @@ const Favicon = ({ src, size = "w-6 h-6" }) => /* @__PURE__ */ jsx(
     }
   }
 );
+const COMPACT_OUTER_CLASS = "my-4";
+const COMPACT_FRAME_CLASS = "flex h-[120px] flex-row overflow-hidden rounded-lg border border-ods-border bg-ods-card";
+const COMPACT_MEDIA_CLASS = "h-full w-[200px] flex-shrink-0";
+const COMPACT_BODY_CLASS = "flex min-w-0 flex-1 flex-col justify-center p-3";
+const COMPACT_ROW_CLASS = "flex flex-row items-center gap-3 overflow-hidden rounded-lg border border-ods-border bg-ods-card px-4 py-3";
+const COMPACT_ICON_BOX_CLASS = `flex ${TILE_SIZE.sm} flex-shrink-0 items-center justify-center rounded-lg bg-ods-bg-surface`;
+const COMPACT_FAVICON_CLASS = "w-5 h-5";
+const DEFAULT_LOGO_CLASS = `mt-0.5 ${ICON_SIZE.lg} flex-shrink-0 rounded`;
+const COMPACT_ROW_TEXT_CLASS = "min-w-0 flex-1";
+const COMPACT_ROW_LINE_CLASS = "truncate text-h6";
+const DEFAULT_OUTER_CLASS = "my-6 flex flex-1 flex-col";
+const DEFAULT_FRAME_CLASS = "flex flex-1 flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card";
+const DEFAULT_MEDIA_CLASS = `${MEDIA_ASPECT.video} w-full flex-none rounded-lg`;
+const DEFAULT_BODY_CLASS = "flex-1 p-4";
+const DEFAULT_ROW_CLASS = "flex items-start gap-3";
+function OGLinkPreviewSkeleton({
+  variant = "default",
+  image = true
+}) {
+  if (variant === "compact" && !image)
+    return /* @__PURE__ */ jsx("div", { className: COMPACT_OUTER_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { className: COMPACT_ROW_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { className: COMPACT_ICON_BOX_CLASS, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(COMPACT_FAVICON_CLASS, "rounded") }) }),
+      /* @__PURE__ */ jsxs("div", { className: COMPACT_ROW_TEXT_CLASS, children: [
+        /* @__PURE__ */ jsx("p", { className: COMPACT_ROW_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-2/3" }) }),
+        /* @__PURE__ */ jsx("p", { className: COMPACT_ROW_LINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/2" }) })
+      ] }),
+      /* @__PURE__ */ jsx(ExternalLinkIcon, { size: 14 })
+    ] }) });
+  if (variant === "compact")
+    return /* @__PURE__ */ jsx("div", { className: COMPACT_OUTER_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { className: COMPACT_FRAME_CLASS, children: [
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: cn(COMPACT_MEDIA_CLASS, "rounded-lg") }),
+      /* @__PURE__ */ jsxs("div", { className: COMPACT_BODY_CLASS, children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-3/4" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", lines: 2, className: "mt-1 w-full" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "mt-1 w-1/3" })
+      ] })
+    ] }) });
+  return /* @__PURE__ */ jsx("div", { className: DEFAULT_OUTER_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsxs("div", { className: DEFAULT_FRAME_CLASS, children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: DEFAULT_MEDIA_CLASS }),
+    /* @__PURE__ */ jsx("div", { className: DEFAULT_BODY_CLASS, children: /* @__PURE__ */ jsxs("div", { className: DEFAULT_ROW_CLASS, children: [
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: DEFAULT_LOGO_CLASS }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "mb-2 w-full" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", lines: 2, className: "mb-2 w-5/6" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[var(--font-line-space-h4-body)] items-center gap-2 text-h6", children: [
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }),
+          /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-20" })
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}
+const TILE_FRAME_CLASS = "flex min-w-0 flex-col gap-1.5 rounded-lg border border-ods-border bg-ods-card p-3";
+const TILE_SOURCE_ROW_CLASS = "flex min-w-0 items-center gap-1.5 text-h6";
+const TILE_HEADLINE_CLASS = "text-h3";
+const TILE_EXCERPT_CLASS = "text-h6";
 function OGLinkTileSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 rounded-lg border border-ods-border bg-ods-card p-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: TILE_FRAME_CLASS, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxs("div", { className: TILE_SOURCE_ROW_CLASS, children: [
       /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-4 flex-shrink-0 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-20 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "ml-auto h-3 w-9 rounded" })
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-20" }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "ml-auto w-9" })
     ] }),
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3.5 w-full rounded" }),
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3.5 w-3/4 rounded" }),
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-5/6 rounded" })
+    /* @__PURE__ */ jsx("div", { className: TILE_HEADLINE_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", lines: 2, className: "w-full" }) }),
+    /* @__PURE__ */ jsx("div", { className: TILE_EXCERPT_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", className: "w-5/6" }) })
   ] });
 }
 const OGLinkPreview = ({
@@ -118,8 +176,9 @@ const OGLinkPreview = ({
     isValidUrl = false;
   }
   const isTile = variant === "tile";
+  const held = useLoadingScope();
   useEffect(() => {
-    if (!isValidUrl || isLocalhost || isTile) return void 0;
+    if (!isValidUrl || isLocalhost || isTile || held) return void 0;
     let cancelled = false;
     const fetchOGData = async () => {
       try {
@@ -158,7 +217,7 @@ const OGLinkPreview = ({
     return () => {
       cancelled = true;
     };
-  }, [url, isValidUrl, isLocalhost, isTile, apiBaseUrl, ogEndpointPath]);
+  }, [url, isValidUrl, isLocalhost, isTile, held, apiBaseUrl, ogEndpointPath]);
   const isCompact = variant === "compact";
   const domain = getDomain(url);
   const effectiveData = ogData ?? (error || loading && curatedTitle ? {
@@ -187,30 +246,14 @@ const OGLinkPreview = ({
   const isCuratedImage = resolvedImage?.source === "curated";
   const isPlaceholder = resolvedImage?.source === "placeholder";
   const bgColor = useImageEdgeColor(resolvedImageUrl ?? null, "var(--color-bg-surface)");
-  const renderSkeleton = () => isCompact ? /* @__PURE__ */ jsx("div", { className: "my-4", children: /* @__PURE__ */ jsxs("div", { className: "flex h-[120px] flex-row overflow-hidden rounded-lg border border-ods-border bg-ods-card", children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-full w-[200px] flex-shrink-0" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col justify-center p-3", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-3/4 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-1 h-3 w-full rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-3 w-2/3 rounded" }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/3 rounded" })
-    ] })
-  ] }) }) : /* @__PURE__ */ jsx("div", { className: "my-6", children: /* @__PURE__ */ jsxs("div", { className: "block overflow-hidden rounded-lg border border-ods-border bg-ods-card", children: [
-    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "relative aspect-video w-full overflow-hidden rounded-none" }),
-    /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mt-0.5 h-6 w-6 flex-shrink-0 rounded" }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-        [
-          ["w-full", "w-3/4"],
-          ["w-full", "w-5/6"]
-        ].map((widths) => /* @__PURE__ */ jsx("div", { className: "mb-2", children: widths.map((width) => /* @__PURE__ */ jsx("div", { className: "flex h-[var(--font-line-space-h4-body)] items-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: `h-4 ${width} rounded` }) }, width)) }, widths[1])),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-[var(--font-line-space-h4-body)] items-center gap-2", children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { width: "6rem", height: "0.75rem", className: "rounded" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { width: "5rem", height: "0.75rem", className: "rounded" })
-        ] })
-      ] })
-    ] }) })
-  ] }) });
+  const renderSkeleton = () => /* @__PURE__ */ jsx(
+    OGLinkPreviewSkeleton,
+    {
+      variant: isCompact ? "compact" : "default",
+      image: !(curatedTitle && !curatedImage)
+    }
+  );
+  if (held) return isTile ? /* @__PURE__ */ jsx(OGLinkTileSkeleton, {}) : renderSkeleton();
   if (isTile) {
     const name = publicationName || domainToTitle(domain);
     return /* @__PURE__ */ jsxs(
@@ -219,31 +262,25 @@ const OGLinkPreview = ({
         href: url,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "group flex min-w-0 flex-col gap-1.5 rounded-lg border border-ods-border bg-ods-card p-3 transition-colors hover:border-ods-accent",
+        className: cn(TILE_FRAME_CLASS, "group transition-colors hover:border-ods-accent"),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsxs("div", { className: TILE_SOURCE_ROW_CLASS, children: [
             /* @__PURE__ */ jsx(Favicon, { src: `https://www.google.com/s2/favicons?domain=${domain}&sz=32`, size: "w-4 h-4" }),
-            /* @__PURE__ */ jsx(TruncateText, { as: "span", className: "font-sans text-xs font-medium", children: name }),
+            /* @__PURE__ */ jsx(TruncateText, { as: "span", variant: "h6", className: "text-current", children: name }),
             meta != null && /* @__PURE__ */ jsx("span", { className: "ml-auto flex flex-none items-center gap-1.5 text-ods-text-secondary", children: meta })
           ] }),
-          kicker != null && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "overflow-hidden font-sans text-xs font-bold uppercase tracking-wide text-ods-accent",
-              style: lineClamp(1),
-              children: kicker
-            }
-          ),
+          kicker != null && /* @__PURE__ */ jsx("div", { className: "overflow-hidden text-ods-accent text-h5", style: lineClamp(1), children: kicker }),
           /* @__PURE__ */ jsx(
             TruncateText,
             {
               lines: 2,
-              className: "font-sans text-[15px] font-semibold leading-snug transition-colors group-hover:text-ods-accent",
+              variant: "h3",
+              className: "transition-colors group-hover:text-ods-accent",
               triggerClassName: "-mt-0.5",
               children: curatedTitle || domainToTitle(domain)
             }
           ),
-          curatedDescription && /* @__PURE__ */ jsx(TruncateText, { lines: 2, tone: "secondary", className: "font-sans text-xs leading-normal", children: curatedDescription })
+          curatedDescription && /* @__PURE__ */ jsx(TruncateText, { lines: 2, variant: "h6", tone: "secondary", children: curatedDescription })
         ]
       }
     );
@@ -308,16 +345,16 @@ const OGLinkPreview = ({
   };
   if (isCompact) {
     if (!hasImage) {
-      return /* @__PURE__ */ jsx("div", { className: "my-4", children: /* @__PURE__ */ jsxs(
+      return /* @__PURE__ */ jsx("div", { className: COMPACT_OUTER_CLASS, children: /* @__PURE__ */ jsxs(
         Link,
         {
           href: effectiveData.url,
           target: "_blank",
           rel: "noopener noreferrer",
-          className: "group flex flex-row items-center gap-3 overflow-hidden rounded-lg border border-ods-border bg-ods-card px-4 py-3 transition-all duration-200 hover:border-ods-accent",
+          className: cn(COMPACT_ROW_CLASS, "group transition-all duration-200 hover:border-ods-accent"),
           children: [
-            /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-ods-bg-surface", children: /* @__PURE__ */ jsx(Favicon, { src: faviconSrc, size: "w-5 h-5" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: COMPACT_ICON_BOX_CLASS, children: /* @__PURE__ */ jsx(Favicon, { src: faviconSrc, size: COMPACT_FAVICON_CLASS }) }),
+            /* @__PURE__ */ jsxs("div", { className: COMPACT_ROW_TEXT_CLASS, children: [
               /* @__PURE__ */ jsx("h3", { className: "truncate font-semibold text-ods-text-primary transition-colors text-h6 group-hover:text-ods-accent", children: title }),
               description && /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-secondary text-h6", children: description })
             ] }),
@@ -332,17 +369,20 @@ const OGLinkPreview = ({
         href: effectiveData.url,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "group flex h-[120px] flex-row overflow-hidden rounded-lg border border-ods-border bg-ods-card transition-colors hover:border-ods-accent",
+        className: cn(COMPACT_FRAME_CLASS, "group transition-colors hover:border-ods-accent"),
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "relative flex h-full w-[200px] flex-shrink-0 items-center justify-center overflow-hidden rounded-lg transition-colors duration-300",
+              className: cn(
+                COMPACT_MEDIA_CLASS,
+                "relative flex items-center justify-center overflow-hidden rounded-lg transition-colors duration-300"
+              ),
               style: { backgroundColor: bgColor },
               children: renderImage()
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center p-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: COMPACT_BODY_CLASS, children: [
             /* @__PURE__ */ jsx(
               "h3",
               {
@@ -387,29 +427,32 @@ const OGLinkPreview = ({
   return (
     // `flex-1` lets the card stretch when the caller places it in a flex column
     // inside a stretching grid (equal row heights); inert in block flow.
-    /* @__PURE__ */ jsx("div", { className: "my-6 flex flex-1 flex-col", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: DEFAULT_OUTER_CLASS, children: /* @__PURE__ */ jsxs(
       Link,
       {
         href: effectiveData.url,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "group flex flex-1 flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card transition-colors hover:border-ods-accent",
+        className: cn(DEFAULT_FRAME_CLASS, "group transition-colors hover:border-ods-accent"),
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "relative flex aspect-video w-full flex-none items-center justify-center overflow-hidden rounded-lg transition-colors duration-300",
+              className: cn(
+                DEFAULT_MEDIA_CLASS,
+                "relative flex items-center justify-center overflow-hidden transition-colors duration-300"
+              ),
               style: { backgroundColor: bgColor },
               children: renderImage()
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: DEFAULT_BODY_CLASS, children: /* @__PURE__ */ jsxs("div", { className: DEFAULT_ROW_CLASS, children: [
             /* @__PURE__ */ jsx(
               Image,
               {
                 src: logoSrc,
                 alt: publicationName || "",
-                className: "mt-0.5 h-6 w-6 flex-shrink-0 rounded object-contain",
+                className: cn(DEFAULT_LOGO_CLASS, "object-contain"),
                 width: 24,
                 height: 24,
                 unoptimized: true,
@@ -439,10 +482,10 @@ const OGLinkPreview = ({
                   children: description
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 text-xs text-ods-text-secondary", children: [
-                /* @__PURE__ */ jsx(TruncateText, { as: "span", className: "text-xs font-medium text-current", children: effectiveData.siteName }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 text-ods-text-secondary text-h6", children: [
+                /* @__PURE__ */ jsx(TruncateText, { as: "span", variant: "h6", className: "text-current", children: effectiveData.siteName }),
                 /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-                /* @__PURE__ */ jsx(TruncateText, { as: "span", className: "text-xs text-current", children: ogDomain }),
+                /* @__PURE__ */ jsx(TruncateText, { as: "span", variant: "h6", className: "text-current", children: ogDomain }),
                 meta
               ] })
             ] })
@@ -455,5 +498,6 @@ const OGLinkPreview = ({
 export {
   OGLinkErrorBoundary,
   OGLinkPreview,
+  OGLinkPreviewSkeleton,
   OGLinkTileSkeleton
 };

package/dist/components/embeds/rich-markdown-runtime.d.ts

@@ -29,7 +29,10 @@ export interface RichMarkdownRuntime {
     }) => string | null;
 }
 /**
- * Provider that fills in defaults for any prop the caller didn't pass.
+ * Provider that fills in any prop the caller didn't pass from the provider ABOVE it (the host's, mounted once at the
+ * root), and from the defaults only where there is none. `RichMarkdownRenderer` mounts one of these around every
+ * document; filling from the defaults there replaced the host's runtime with `transformImageSrc: () => null`, so each
+ * in-article image's size probe downloaded the full original file on every markdown page (CU-17tkuw5xp4q).
  * Memoizes the resolved runtime so satellites don't re-render when an
  * unrelated parent state ticks.
  */

package/dist/components/embeds/rich-markdown-runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-markdown-runtime.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/rich-markdown-runtime.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB;2EACuE;IACvE,iBAAiB,EAAE,CACjB,GAAG,EAAE,MAAM,EACX,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;KAAE,KAC/E,MAAM,GAAG,IAAI,CAAC;CACpB;AAWD;;;;GAIG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,QAAQ,GACT,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAWxD;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAE5D"}
+{"version":3,"file":"rich-markdown-runtime.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/rich-markdown-runtime.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3E;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,mBAAmB;IAClC,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;IACrB;2EACuE;IACvE,iBAAiB,EAAE,CACjB,GAAG,EAAE,MAAM,EACX,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;KAAE,KAC/E,MAAM,GAAG,IAAI,CAAC;CACpB;AAWD;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,QAAQ,GACT,EAAE,OAAO,CAAC,mBAAmB,CAAC,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAYxD;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,IAAI,mBAAmB,CAE5D"}

package/dist/components/embeds/rich-markdown-runtime.js

@@ -15,14 +15,15 @@ function RichMarkdownRuntimeProvider({
   transformImageSrc,
   children
 }) {
+  const outer = useContext(RichMarkdownRuntimeContext);
   const value = useMemo(
     () => ({
-      redditProxyUrl: redditProxyUrl ?? DEFAULT_RUNTIME.redditProxyUrl,
-      twitterProxyUrl: twitterProxyUrl ?? DEFAULT_RUNTIME.twitterProxyUrl,
-      ogScraperUrl: ogScraperUrl ?? DEFAULT_RUNTIME.ogScraperUrl,
-      transformImageSrc: transformImageSrc ?? DEFAULT_RUNTIME.transformImageSrc
+      redditProxyUrl: redditProxyUrl ?? outer.redditProxyUrl,
+      twitterProxyUrl: twitterProxyUrl ?? outer.twitterProxyUrl,
+      ogScraperUrl: ogScraperUrl ?? outer.ogScraperUrl,
+      transformImageSrc: transformImageSrc ?? outer.transformImageSrc
     }),
-    [redditProxyUrl, twitterProxyUrl, ogScraperUrl, transformImageSrc]
+    [redditProxyUrl, twitterProxyUrl, ogScraperUrl, transformImageSrc, outer]
   );
   return /* @__PURE__ */ jsx(RichMarkdownRuntimeContext.Provider, { value, children });
 }

package/dist/components/faq/faq-document-page.d.ts

@@ -37,6 +37,10 @@ export interface FaqDocumentPageProps {
     /** The "ask the assistant" card beside the questions (forwarded to `FaqSection`): `false` switches it off, an
      *  object states its topic, wording and the chat it opens. */
     ask?: FaqSectionProps['ask'];
+    /** The FAQ's loading state, group by group (forwarded to `FaqSection`). */
+    skeletonShape?: FaqSectionProps['skeletonShape'];
+    /** The FAQ's loading state draws the category nav's row (forwarded to `FaqSection`): the host's list is categorised. */
+    skeletonNav?: boolean;
 }
-export declare function FaqDocumentPage({ title, subtitle, backButton, initialFaqs, emitJsonLd, jsonLd, apiBaseUrl, entityType, entityId, minResults, topic, ask, shell, }: FaqDocumentPageProps): import("react").JSX.Element;
+export declare function FaqDocumentPage({ title, subtitle, backButton, initialFaqs, emitJsonLd, jsonLd, apiBaseUrl, entityType, entityId, minResults, topic, ask, skeletonShape, skeletonNav, shell, }: FaqDocumentPageProps): import("react").JSX.Element;
 //# sourceMappingURL=faq-document-page.d.ts.map

package/dist/components/faq/faq-document-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"faq-document-page.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq-document-page.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;gFAC4E;IAC5E,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD;;;+CAG2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;4EACwE;IACxE,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB;yDACqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wHAAwH;IACxH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;kEAC8D;IAC9D,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;CAC9B;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAoC,EACpC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,KAAK,EACL,GAAG,EACH,KAAY,GACb,EAAE,oBAAoB,+BAgCtB"}
+{"version":3,"file":"faq-document-page.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq-document-page.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;gFAC4E;IAC5E,UAAU,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,KAAK,CAAC;IACvD;;;+CAG2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;4EACwE;IACxE,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB;yDACqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wHAAwH;IACxH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,gFAAgF;IAChF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;kEAC8D;IAC9D,GAAG,CAAC,EAAE,eAAe,CAAC,KAAK,CAAC,CAAC;IAC7B,2EAA2E;IAC3E,aAAa,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IACjD,wHAAwH;IACxH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAoC,EACpC,QAAQ,EACR,UAAU,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,EACV,KAAK,EACL,GAAG,EACH,aAAa,EACb,WAAW,EACX,KAAY,GACb,EAAE,oBAAoB,+BAkCtB"}

package/dist/components/faq/faq-document-page.js

@@ -16,6 +16,8 @@ function FaqDocumentPage({
   minResults,
   topic,
   ask,
+  skeletonShape,
+  skeletonNav,
   shell = true
 }) {
   const router = useRouter();
@@ -35,7 +37,9 @@ function FaqDocumentPage({
       entityId,
       minResults,
       topic,
-      ask
+      ask,
+      skeletonShape,
+      skeletonNav
     }
   ) });
   return shell ? /* @__PURE__ */ jsx(PageShell, { children: inner }) : /* @__PURE__ */ jsx("div", { className: "page-shell-content", children: inner });

package/dist/components/faq/faq-section.d.ts

@@ -70,7 +70,33 @@ export interface FaqSectionProps {
      * (`onOpen`). An `aside` takes the card's place.
      */
     ask?: false | FaqAskOptions;
+    /**
+     * The loading state's groups of questions, in order: THE one way to say what the skeleton draws (see
+     * `FaqSkeletonShape`). Absent: one group with no category heading, of `minResults` rows (else one screen of rows).
+     */
+    skeletonShape?: FaqSkeletonShape;
+    /**
+     * The host's FAQs fall into named categories, so the loaded block draws its category nav (the platform's full,
+     * categorised list): the loading state draws the nav's row too, so what follows it (the ask card) does not move.
+     * Default false (a nav only when `skeletonShape` names two or more categories).
+     */
+    skeletonNav?: boolean;
 }
+/** Questions the block's skeleton draws when the host states no count (`minResults`): one screen of the accordion's rows. */
+export declare const FAQ_SECTION_SKELETON_QUESTIONS = 12;
+/** One group of questions the FAQ's loading state draws. */
+export interface FaqSkeletonGroup {
+    /** The group is a named category: drawn with its heading bar (and counted for the category nav). Default false. */
+    heading?: boolean;
+    /** Question rows the group draws. Default `FAQ_SECTION_SKELETON_QUESTIONS`, one screen of rows. */
+    rows?: number;
+}
+/**
+ * What the FAQ's loading state draws, group by group in order: the one shape `FaqSection`, `FaqSectionSkeleton`,
+ * `FaqDocumentPage` and `TrustCenterPage` take. Stated by the host from what it knows before the read (its FAQs are
+ * filed in categories, the server's page size), never copied from today's FAQs.
+ */
+export type FaqSkeletonShape = readonly FaqSkeletonGroup[];
 /** The id of a page's own FAQ block: what a page's "FAQ" link or section nav points at. */
 export declare const PAGE_FAQ_SECTION_ID = "faq";
 /**
@@ -103,5 +129,12 @@ export declare function pageFaqProps(faq: PageFaqSlot): FaqSectionProps;
  * disfigured. The host always supplies the page shell — this renders a bare
  * <section>.
  */
-export declare function FaqSection({ initialFaqs, entityType, entityId, topic, heading, emitJsonLd, jsonLd, className, id, showTopic, minResults, apiBaseUrl, aside: asideProp, ask, }: FaqSectionProps): React.JSX.Element | null;
+export declare function FaqSection({ initialFaqs, entityType, entityId, topic, heading, emitJsonLd, jsonLd, className, id, showTopic, minResults, apiBaseUrl, aside: asideProp, ask, skeletonShape, skeletonNav, }: FaqSectionProps): React.JSX.Element | null;
+export interface FaqSectionSkeletonProps extends Pick<FaqSectionProps, 'heading' | 'topic' | 'showTopic' | 'aside' | 'className' | 'id'> {
+    /** The groups drawn, in order. Default one group with no heading, of one screen of rows. */
+    shape?: FaqSkeletonShape;
+    /** Draw the category nav's row (one line of pills) whatever `sections` is: the host's FAQs are categorised. */
+    navRow?: boolean;
+}
+export declare function FaqSectionSkeleton({ heading, topic, showTopic, aside, shape, navRow, className, id, }: FaqSectionSkeletonProps): React.JSX.Element;
 //# sourceMappingURL=faq-section.d.ts.map

package/dist/components/faq/faq-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"faq-section.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq-section.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAU3C,OAAO,EAA+B,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAA0B,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE1E,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,iFAAiF;IACjF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IACjC;uCACmC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,wDAAwD;IACxD,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kIAAkI;IAClI,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;6CACyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;uCACmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;;;;OAUG;IACH,GAAG,CAAC,EAAE,KAAK,GAAG,aAAa,CAAC;CAC7B;AAID,2FAA2F;AAC3F,eAAO,MAAM,mBAAmB,QAAQ,CAAC;AAKzC;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAC5B,eAAe,EACf,YAAY,GAAG,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,YAAY,GAAG,QAAQ,GAAG,WAAW,CACzF,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtB,8GAA8G;AAC9G,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,GAAG,eAAe,CAE9D;AAwUD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,UAAU,CAAC,EACzB,WAAW,EACX,UAAU,EACV,QAAQ,EACR,KAAK,EACL,OAAO,EACP,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,EAAE,EACF,SAAiB,EACjB,UAAU,EACV,UAAe,EACf,KAAK,EAAE,SAAS,EAChB,GAAG,GACJ,EAAE,eAAe,4BA8EjB"}
+{"version":3,"file":"faq-section.d.ts","sourceRoot":"","sources":["../../../src/components/faq/faq-section.tsx"],"names":[],"mappings":"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"}