@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.750

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

@@ -4,6 +4,9 @@ import { useState, useEffect, Component } from "react";
 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 { TruncateText } from "../ui/truncate-text.js";
 class OGLinkErrorBoundary extends Component {
   constructor(props) {
     super(props);
@@ -20,6 +23,11 @@ class OGLinkErrorBoundary extends Component {
     return this.props.children;
   }
 }
+const lineClamp = (lines) => ({
+  display: "-webkit-box",
+  WebkitLineClamp: lines,
+  WebkitBoxOrient: "vertical"
+});
 function getDomain(urlStr) {
   try {
     return new URL(urlStr).hostname.replace("www.", "");
@@ -65,18 +73,31 @@ const Favicon = ({ src, size = "w-6 h-6" }) => /* @__PURE__ */ jsx(
     }
   }
 );
+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: [
+      /* @__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(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" })
+  ] });
+}
 const OGLinkPreview = ({
   url,
   apiBaseUrl,
   ogEndpointPath = "/api/og-scraper",
-  buildPlaceholderUrl,
   curatedTitle,
   curatedDescription,
   curatedImage,
   publicationName,
   publicationLogo,
   variant = "default",
-  enablePlaceholder = true
+  enablePlaceholder = true,
+  meta,
+  kicker
 }) => {
   const [ogData, setOgData] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -96,8 +117,9 @@ const OGLinkPreview = ({
   } catch {
     isValidUrl = false;
   }
+  const isTile = variant === "tile";
   useEffect(() => {
-    if (!isValidUrl || isLocalhost) return void 0;
+    if (!isValidUrl || isLocalhost || isTile) return void 0;
     let cancelled = false;
     const fetchOGData = async () => {
       try {
@@ -136,10 +158,10 @@ const OGLinkPreview = ({
     return () => {
       cancelled = true;
     };
-  }, [url, isValidUrl, isLocalhost, apiBaseUrl, ogEndpointPath]);
+  }, [url, isValidUrl, isLocalhost, isTile, apiBaseUrl, ogEndpointPath]);
   const isCompact = variant === "compact";
   const domain = getDomain(url);
-  const effectiveData = ogData ?? (error ? {
+  const effectiveData = ogData ?? (error || loading && curatedTitle ? {
     title: curatedTitle || domainToTitle(domain),
     description: curatedDescription || domain,
     image: "",
@@ -148,7 +170,11 @@ const OGLinkPreview = ({
     type: "website",
     favicon: `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
   } : null);
-  const placeholderImageUrl = enablePlaceholder && buildPlaceholderUrl && effectiveData?.title ? buildPlaceholderUrl(effectiveData.title, effectiveData.siteName || domain) : null;
+  const placeholderImageUrl = useOgPlaceholderUrl({
+    title: effectiveData?.title,
+    siteName: effectiveData?.siteName || domain,
+    enabled: enablePlaceholder && !isTile
+  });
   const imageCandidates = [
     { source: "curated", url: curatedImage },
     { source: "og", url: effectiveData?.image },
@@ -162,45 +188,66 @@ const OGLinkPreview = ({
   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("div", { className: "h-full w-[200px] flex-shrink-0 animate-pulse bg-ods-border" }),
+    /* @__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("div", { className: "mb-2 h-4 w-3/4 animate-pulse rounded bg-ods-border" }),
-      /* @__PURE__ */ jsx("div", { className: "mb-1 h-3 w-full animate-pulse rounded bg-ods-border" }),
-      /* @__PURE__ */ jsx("div", { className: "mb-2 h-3 w-2/3 animate-pulse rounded bg-ods-border" }),
-      /* @__PURE__ */ jsx("div", { className: "h-3 w-1/3 animate-pulse rounded bg-ods-border" })
+      /* @__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("div", { className: "relative aspect-video w-full animate-pulse overflow-hidden bg-ods-border" }),
+    /* @__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("div", { className: "mt-0.5 h-6 w-6 flex-shrink-0 animate-pulse rounded bg-ods-border" }),
+      /* @__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: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-2 h-[2.5rem] overflow-hidden leading-[1.25rem]", children: [
-          /* @__PURE__ */ jsx(
+        [
+          ["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" })
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+  if (isTile) {
+    const name = publicationName || domainToTitle(domain);
+    return /* @__PURE__ */ jsxs(
+      Link,
+      {
+        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",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5 text-xs", 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 }),
+            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: "animate-pulse rounded bg-ods-border",
-              style: { height: "1.25rem", marginBottom: "0.25rem" }
+              className: "overflow-hidden font-sans text-xs font-bold uppercase tracking-wide text-ods-accent",
+              style: lineClamp(1),
+              children: kicker
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "w-3/4 animate-pulse rounded bg-ods-border", style: { height: "1.25rem" } })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "mb-2 h-[2.5rem] overflow-hidden leading-[1.25rem]", children: [
           /* @__PURE__ */ jsx(
-            "div",
+            TruncateText,
             {
-              className: "animate-pulse rounded bg-ods-border",
-              style: { height: "1.25rem", marginBottom: "0.25rem" }
+              lines: 2,
+              className: "font-sans text-[15px] font-semibold leading-snug transition-colors group-hover:text-ods-accent",
+              triggerClassName: "-mt-0.5",
+              children: curatedTitle || domainToTitle(domain)
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "w-5/6 animate-pulse rounded bg-ods-border", style: { height: "1.25rem" } })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "animate-pulse rounded bg-ods-border", style: { height: "0.75rem", width: "6rem" } }),
-          /* @__PURE__ */ jsx("div", { className: "animate-pulse rounded bg-ods-border", style: { height: "0.75rem", width: "5rem" } })
-        ] })
-      ] })
-    ] }) })
-  ] }) });
+          curatedDescription && /* @__PURE__ */ jsx(TruncateText, { lines: 2, tone: "secondary", className: "font-sans text-xs leading-normal", children: curatedDescription })
+        ]
+      }
+    );
+  }
   if (!url || typeof url !== "string" || !isValidUrl) return renderSkeleton();
   if (isLocalhost) {
     return /* @__PURE__ */ jsx("div", { className: "my-6", children: /* @__PURE__ */ jsxs(
@@ -217,7 +264,6 @@ const OGLinkPreview = ({
       }
     ) });
   }
-  if (loading) return renderSkeleton();
   if (!effectiveData) return renderSkeleton();
   const title = curatedTitle || effectiveData.title;
   const description = curatedDescription || effectiveData.description || "";
@@ -320,85 +366,94 @@ const OGLinkPreview = ({
     ) });
   }
   if (!hasImage) {
-    return /* @__PURE__ */ jsx("div", { className: "my-6", children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx("div", { className: "my-6 flex flex-1 flex-col", children: /* @__PURE__ */ jsxs(
       Link,
       {
         href: effectiveData.url,
         target: "_blank",
         rel: "noopener noreferrer",
-        className: "group flex 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: "group flex flex-1 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",
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-ods-bg-surface", children: /* @__PURE__ */ jsx(Favicon, { src: faviconSrc }) }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", 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 })
+            /* @__PURE__ */ jsx(TruncateText, { className: "font-semibold transition-colors group-hover:text-ods-accent", children: title }),
+            description && /* @__PURE__ */ jsx(TruncateText, { tone: "secondary", children: description })
           ] }),
           /* @__PURE__ */ jsx(ExternalLinkIcon, {})
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx("div", { className: "my-6", children: /* @__PURE__ */ jsxs(
-    Link,
-    {
-      href: effectiveData.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "group block overflow-hidden rounded-lg border border-ods-border bg-ods-card transition-colors hover:border-ods-accent",
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "relative flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg transition-colors duration-300",
-            style: { backgroundColor: bgColor },
-            children: renderImage()
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+  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(
+      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",
+        children: [
           /* @__PURE__ */ jsx(
-            Image,
+            "div",
             {
-              src: logoSrc,
-              alt: publicationName || "",
-              className: "mt-0.5 h-6 w-6 flex-shrink-0 rounded object-contain",
-              width: 24,
-              height: 24,
-              unoptimized: true,
-              onError: (e) => {
-                const img = e.target;
-                img.style.display = "none";
-              }
+              className: "relative flex aspect-video w-full flex-none items-center justify-center overflow-hidden rounded-lg transition-colors duration-300",
+              style: { backgroundColor: bgColor },
+              children: renderImage()
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex-1 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
             /* @__PURE__ */ jsx(
-              "h3",
+              Image,
               {
-                className: "mb-2 h-[2.5rem] overflow-hidden font-semibold text-ods-text-primary transition-colors text-h6 group-hover:text-ods-accent",
-                style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" },
-                children: title
+                src: logoSrc,
+                alt: publicationName || "",
+                className: "mt-0.5 h-6 w-6 flex-shrink-0 rounded object-contain",
+                width: 24,
+                height: 24,
+                unoptimized: true,
+                onError: (e) => {
+                  const img = e.target;
+                  img.style.display = "none";
+                }
               }
             ),
-            description && /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: "mb-2 h-[2.5rem] overflow-hidden text-ods-text-secondary text-h6",
-                style: { display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" },
-                children: description
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-ods-text-secondary text-h6", children: [
-              /* @__PURE__ */ jsx("span", { children: effectiveData.siteName }),
-              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: ogDomain })
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx(
+                TruncateText,
+                {
+                  lines: 2,
+                  className: "min-h-[calc(var(--font-line-space-h4-body)*2)] font-semibold transition-colors group-hover:text-ods-accent",
+                  triggerClassName: "mb-2",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TruncateText,
+                {
+                  lines: 2,
+                  tone: "secondary",
+                  className: "min-h-[calc(var(--font-line-space-h4-body)*2)]",
+                  triggerClassName: "mb-2",
+                  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__ */ jsx("span", { children: "\u2022" }),
+                /* @__PURE__ */ jsx(TruncateText, { as: "span", className: "text-xs text-current", children: ogDomain }),
+                meta
+              ] })
             ] })
-          ] })
-        ] }) })
-      ]
-    }
-  ) });
+          ] }) })
+        ]
+      }
+    ) })
+  );
 };
 export {
   OGLinkErrorBoundary,
-  OGLinkPreview
+  OGLinkPreview,
+  OGLinkTileSkeleton
 };

package/dist/components/embeds/reddit-embed-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reddit-embed-client.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/reddit-embed-client.tsx"],"names":[],"mappings":"AAgKA,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,0GAA0G;IAC1G,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,GAAG,EAAE,QAAc,EAAE,GAAG,EAAE,EAAE,gBAAgB,+BA2Z/E"}
+{"version":3,"file":"reddit-embed-client.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/reddit-embed-client.tsx"],"names":[],"mappings":"AAiKA,UAAU,gBAAgB;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,0GAA0G;IAC1G,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,GAAG,EAAE,QAAc,EAAE,GAAG,EAAE,EAAE,gBAAgB,+BA2Z/E"}

package/dist/components/embeds/reddit-embed-client.js

@@ -5,6 +5,7 @@ import Link from "../../embed-shims/next-link.js";
 import { formatLargeNumber } from "../../utils/format.js";
 import { renderedLinkRel } from "../../utils/markdown-link.js";
 import { socialCache } from "../../utils/social-embed-cache.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { MediaCarousel } from "../media-carousel.js";
 import { RedditContainer } from "./embed-container.js";
 import { useRichMarkdownRuntime } from "./rich-markdown-runtime.js";
@@ -86,22 +87,22 @@ function RedditEmbedClient({ url, maxWidth = 700, rel }) {
     });
   }, [url, redditProxyUrl]);
   if (loading) {
-    return /* @__PURE__ */ jsx(RedditContainer, { children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse rounded-lg border border-ods-border bg-ods-card p-6", children: [
+    return /* @__PURE__ */ jsx(RedditContainer, { children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center space-x-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-12 w-12 rounded-full bg-ods-border" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded-full" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-2 h-4 w-32 rounded bg-ods-border" }),
-          /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded bg-ods-border" })
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-32 rounded" }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-24 rounded" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-full rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded bg-ods-border" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-full rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-ods-border" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" })
       ] })
     ] }) });
   }

package/dist/components/embeds/twitter-embed-client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"twitter-embed-client.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/twitter-embed-client.tsx"],"names":[],"mappings":"AAwEA,UAAU,iBAAiB;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,0GAA0G;IAC1G,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAc,EAAE,GAAG,EAAE,EAAE,iBAAiB,+BA8P1F"}
+{"version":3,"file":"twitter-embed-client.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/twitter-embed-client.tsx"],"names":[],"mappings":"AAyEA,UAAU,iBAAiB;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,0GAA0G;IAC1G,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAc,EAAE,GAAG,EAAE,EAAE,iBAAiB,+BA8P1F"}

package/dist/components/embeds/twitter-embed-client.js

@@ -6,6 +6,7 @@ import Link from "../../embed-shims/next-link.js";
 import { renderedLinkRel } from "../../utils/markdown-link.js";
 import { socialCache } from "../../utils/social-embed-cache.js";
 import { XLogoIcon } from "../icons-v2-generated/brand-logos/x-logo-icon.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { TwitterContainer } from "./embed-container.js";
 import { useRichMarkdownRuntime } from "./rich-markdown-runtime.js";
 const MessageCircleIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" }) });
@@ -63,22 +64,22 @@ function TwitterEmbedClient({ url, tweetId, maxWidth = 700, rel }) {
     });
   }, [tweetUrl, twitterProxyUrl, extractedTweetId]);
   if (loading) {
-    return /* @__PURE__ */ jsx(TwitterContainer, { children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse rounded-lg border border-ods-border bg-ods-card p-6", children: [
+    return /* @__PURE__ */ jsx(TwitterContainer, { children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-border bg-ods-card p-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center space-x-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-12 w-12 rounded-full bg-ods-border" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded-full" }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "mb-2 h-4 w-32 rounded bg-ods-border" }),
-          /* @__PURE__ */ jsx("div", { className: "h-3 w-24 rounded bg-ods-border" })
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-32 rounded" }),
+          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-24 rounded" })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "mb-4 space-y-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-full rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 rounded bg-ods-border" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-full rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded" })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-ods-border" }),
-        /* @__PURE__ */ jsx("div", { className: "h-4 w-16 rounded bg-ods-border" })
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" }),
+        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-16 rounded" })
       ] })
     ] }) });
   }

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;AAQ3C,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;AAmUD;;;;;;;;;;;;;;;;;;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":"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"}

package/dist/components/faq/faq-section.js

@@ -12,6 +12,8 @@ import { navigateSamePageHash, STICKY_HEADER_OFFSET_PX } from "../../utils/same-
 import { buildSuggestionUrl } from "../../utils/suggestion-url.js";
 import { FaqAccordion } from "../faq-accordion.js";
 import { SECTION_HEADING_CLASS } from "../layout/page-heading.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { FaqAskCard, faqAskCardShown } from "./faq-ask-card.js";
 import { buildFaqJsonLdFromFaqs } from "./json-ld.js";
 const DEFAULT_HEADING_TEXT = "Frequently Asked Questions";
@@ -174,12 +176,14 @@ function GroupedFaqList({
     /* @__PURE__ */ jsx("div", { className: "content-lg:col-start-1 content-lg:row-start-2", children: aside })
   ] });
 }
-function FaqSkeleton() {
-  return /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-8", children: [
-    /* @__PURE__ */ jsx("div", { className: "h-12 w-2/3 rounded bg-ods-border content-md:h-14" }),
+function FaqSkeleton({
+  region = true
+} = {}) {
+  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading questions", announce: region, className: "space-y-8", children: [
+    /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-2/3 rounded content-md:h-14" }),
     /* @__PURE__ */ jsx("div", { className: "w-full divide-y divide-ods-border overflow-hidden rounded-md border border-ods-border bg-transparent", children: Array.from({ length: 8 }).map((_, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-6 px-6 py-4 content-md:gap-10", children: [
-      /* @__PURE__ */ jsx("div", { className: "h-6 w-5/6 rounded bg-ods-border" }),
-      /* @__PURE__ */ jsx("div", { className: "size-6 rounded bg-ods-border" })
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-5/6 rounded" }),
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "size-6 rounded" })
     ] }, idx)) })
   ] });
 }

package/dist/components/faq/index.cjs

@@ -1,17 +1,17 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _chunkD4XZL27Vcjs = require('../../chunk-D4XZL27V.cjs');
+var _chunkYL62VAHCcjs = require('../../chunk-YL62VAHC.cjs');
 
 
 
 
 
-var _chunk7Y3VMMJBcjs = require('../../chunk-7Y3VMMJB.cjs');
-require('../../chunk-6XP6RNFD.cjs');
-require('../../chunk-HNLI4OU5.cjs');
+var _chunk2J2OBP4Ncjs = require('../../chunk-2J2OBP4N.cjs');
+require('../../chunk-6KEJQR6L.cjs');
+require('../../chunk-C6LPOYDM.cjs');
 require('../../chunk-NTGIQP7O.cjs');
-require('../../chunk-U6XWGK53.cjs');
+require('../../chunk-ALPRQ3ZX.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
 require('../../chunk-4FWURR3W.cjs');
@@ -19,14 +19,14 @@ require('../../chunk-LU7TD6QS.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-BBM2ICOY.cjs');
+require('../../chunk-3TELPOVH.cjs');
 require('../../chunk-YUMFVQIN.cjs');
-require('../../chunk-ZNUSYMH7.cjs');
-require('../../chunk-BBTSJYTR.cjs');
-require('../../chunk-PSIKUDUV.cjs');
+require('../../chunk-WZX26ODJ.cjs');
+require('../../chunk-V3UJ6NDR.cjs');
+require('../../chunk-LVO7FALW.cjs');
 require('../../chunk-3RFQPQ7Z.cjs');
 require('../../chunk-YRULLK7N.cjs');
-require('../../chunk-B27QEHYR.cjs');
+require('../../chunk-P6F6PHVK.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1823,8 +1823,8 @@ require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-YIRX6C7V.cjs');
-require('../../chunk-P7KTAXXE.cjs');
+require('../../chunk-XJ3J4UIS.cjs');
+require('../../chunk-OFO75R2O.cjs');
 require('../../chunk-QYLIHZKZ.cjs');
 require('../../chunk-63N4FN5V.cjs');
 require('../../chunk-L2IQESTQ.cjs');
@@ -1847,16 +1847,18 @@ require('../../chunk-HOTM4UM6.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
 require('../../chunk-HTRILBJD.cjs');
 require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-L2RMTGOK.cjs');
+require('../../chunk-MGF3FUKD.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
+require('../../chunk-UGCRLRCT.cjs');
 require('../../chunk-2QMBXGMQ.cjs');
 require('../../chunk-V45KLJQP.cjs');
 require('../../chunk-G7SBHMRR.cjs');
-require('../../chunk-AKTPO2DN.cjs');
+require('../../chunk-L4UI63K6.cjs');
 require('../../chunk-OF336YWG.cjs');
 require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-5M5C6UV4.cjs');
+require('../../chunk-RB6BSE3O.cjs');
+require('../../chunk-2YXOD2KL.cjs');
 require('../../chunk-3ATAYP36.cjs');
 
 
@@ -1864,4 +1866,4 @@ require('../../chunk-3ATAYP36.cjs');
 
 
 
-exports.FaqAskCard = _chunk7Y3VMMJBcjs.FaqAskCard; exports.FaqDocumentPage = _chunkD4XZL27Vcjs.FaqDocumentPage; exports.FaqSection = _chunk7Y3VMMJBcjs.FaqSection; exports.PAGE_FAQ_SECTION_ID = _chunk7Y3VMMJBcjs.PAGE_FAQ_SECTION_ID; exports.pageFaqProps = _chunk7Y3VMMJBcjs.pageFaqProps;
+exports.FaqAskCard = _chunk2J2OBP4Ncjs.FaqAskCard; exports.FaqDocumentPage = _chunkYL62VAHCcjs.FaqDocumentPage; exports.FaqSection = _chunk2J2OBP4Ncjs.FaqSection; exports.PAGE_FAQ_SECTION_ID = _chunk2J2OBP4Ncjs.PAGE_FAQ_SECTION_ID; exports.pageFaqProps = _chunk2J2OBP4Ncjs.pageFaqProps;