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

package/dist/components/docs/use-document-tree.js

@@ -11,6 +11,7 @@ import {
 import { contentFetch } from "../../utils/embed-content-fetch.js";
 import { navigateSamePageHash, HUB_HEADER_OFFSET_PX } from "../../utils/same-page-hash-nav.js";
 import { scrollElementIntoView } from "../../utils/scroll-into-view.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { useDocNavigation } from "./doc-navigation-context.js";
 function scrollToContent() {
   const article = document.querySelector("article");
@@ -133,6 +134,8 @@ function useDocumentTree(config, initialPath) {
   const [error, setError] = useState(null);
   const [expandedNodes, setExpandedNodes] = useState(/* @__PURE__ */ new Set());
   const lastFetchedPath = useRef(null);
+  const held = useLoadingScope();
+  const startedRef = useRef(false);
   const normalizedBaseRoute = baseRoute.replace(/\/$/, "");
   const selectedPathRef = useRef(selectedPath);
   useEffect(() => {
@@ -280,12 +283,14 @@ function useDocumentTree(config, initialPath) {
     latestRef.current = { fetchContent, fetchStructure, cleanInitialPath, folderIndexFile };
   });
   useEffect(() => {
+    if (held || startedRef.current) return;
+    startedRef.current = true;
     const latest = latestRef.current;
     const speculativeContentPath = latest.cleanInitialPath || latest.folderIndexFile;
     lastFetchedPath.current = speculativeContentPath;
     void latest.fetchContent(speculativeContentPath);
     void latest.fetchStructure();
-  }, []);
+  }, [held]);
   useEffect(() => {
     if (selectedPath === null || selectedPath === void 0) return;
     if (!structure || structure.length === 0) return;

package/dist/components/embeds/embed-iframe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"embed-iframe.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/embed-iframe.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;yEAOyE;AACzE,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAa,GACd,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0GAA0G;IAC1G,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,qBAQA;AAED,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACjF,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,SAAS,EACT,MAAM,EACN,KAAK,EACL,cAAc,EACd,OAAO,EACP,eAAe,EACf,OAAO,GACR,EAAE,gBAAgB,qBAiDlB"}
+{"version":3,"file":"embed-iframe.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/embed-iframe.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;yEAOyE;AACzE,wBAAgB,oBAAoB,CAAC,EACnC,MAAM,EACN,MAAa,GACd,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0GAA0G;IAC1G,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,qBAQA;AAED,MAAM,WAAW,gBAAgB;IAC/B,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sEAAsE;IACtE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,cAAc,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,gBAAgB,CAAC,CAAC;IACjF,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,KAAK,EACL,SAAS,EACT,MAAM,EACN,KAAK,EACL,cAAc,EACd,OAAO,EACP,eAAe,EACf,OAAO,GACR,EAAE,gBAAgB,qBAqDlB"}

package/dist/components/embeds/embed-iframe.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from "react";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 function EmbedLoadingSkeleton({
   height,
   region = true
@@ -30,6 +31,7 @@ function EmbedIframe({
   const isLoaded = loadedSrc === src;
   const iframeRef = useRef(null);
   const handleLoad = useCallback(() => setLoadedSrc(src), [src]);
+  const held = useLoadingScope();
   useEffect(() => {
     const iframe = iframeRef.current;
     return () => {
@@ -42,6 +44,7 @@ function EmbedIframe({
     };
   }, [src]);
   const resolvedHeight = height || "calc(100vh - 250px)";
+  if (held) return /* @__PURE__ */ jsx(EmbedLoadingSkeleton, { height: resolvedHeight });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !isLoaded && /* @__PURE__ */ jsx(EmbedLoadingSkeleton, { height: resolvedHeight }),
     /* @__PURE__ */ jsx(

package/dist/components/embeds/index.cjs

@@ -4,7 +4,7 @@ require('../../chunk-7SEARXQW.cjs');
 
 
 
-var _chunkQQ7LKNNPcjs = require('../../chunk-QQ7LKNNP.cjs');
+var _chunkWO3XO27Ccjs = require('../../chunk-WO3XO27C.cjs');
 
 
 
@@ -26,25 +26,26 @@ var _chunkQQ7LKNNPcjs = require('../../chunk-QQ7LKNNP.cjs');
 
 
 
-var _chunkFMH2DYBCcjs = require('../../chunk-FMH2DYBC.cjs');
-require('../../chunk-ZCU2PYCW.cjs');
-require('../../chunk-GY2JESOC.cjs');
-require('../../chunk-WA4X55XY.cjs');
+
+var _chunkVRDHAR3Xcjs = require('../../chunk-VRDHAR3X.cjs');
+require('../../chunk-MPTMT773.cjs');
+require('../../chunk-RB7VLVMD.cjs');
+require('../../chunk-ZV45VS6K.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
-require('../../chunk-XCH7SPGI.cjs');
-require('../../chunk-FQSXZC2K.cjs');
+require('../../chunk-XVFM6SJA.cjs');
+require('../../chunk-2JRSYWFP.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-RO72PRQI.cjs');
-require('../../chunk-YUMFVQIN.cjs');
-require('../../chunk-T5FRANE6.cjs');
-require('../../chunk-74ALTXXC.cjs');
-require('../../chunk-BIA77I6B.cjs');
-require('../../chunk-3RFQPQ7Z.cjs');
-require('../../chunk-GZKWF6NH.cjs');
-require('../../chunk-EFTUFJS2.cjs');
+require('../../chunk-ZRDMGMY7.cjs');
+require('../../chunk-C42WIUH6.cjs');
+require('../../chunk-7VI7TOGI.cjs');
+require('../../chunk-YL6ZB2SR.cjs');
+require('../../chunk-GTONIRJU.cjs');
+require('../../chunk-RNLRS4ID.cjs');
+require('../../chunk-XZ6DKGT4.cjs');
+require('../../chunk-LELS4XMX.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1833,20 +1834,20 @@ require('../../chunk-LMBYZITR.cjs');
 require('../../chunk-TMVC7S2R.cjs');
 require('../../chunk-IYHH5EIO.cjs');
 require('../../chunk-XIBCMGBW.cjs');
-require('../../chunk-NET74KSQ.cjs');
-require('../../chunk-3RYIF4OW.cjs');
-require('../../chunk-SVP6DJFL.cjs');
+require('../../chunk-TZ4GKUO2.cjs');
+require('../../chunk-XXJL5GY3.cjs');
+require('../../chunk-57B5RUYD.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 require('../../chunk-7DNL734S.cjs');
 require('../../chunk-WWUSFOJ7.cjs');
 require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
-require('../../chunk-NS64LMVE.cjs');
-require('../../chunk-22XAPV6N.cjs');
-require('../../chunk-OJJ4RL2T.cjs');
-require('../../chunk-63N4FN5V.cjs');
-require('../../chunk-M7YZGRAV.cjs');
-require('../../chunk-EQZXJUYV.cjs');
+require('../../chunk-FZB4RMRK.cjs');
+require('../../chunk-DGNBXZXT.cjs');
+require('../../chunk-R3JX4MXD.cjs');
+require('../../chunk-SETFUCZA.cjs');
+require('../../chunk-AAECWUNV.cjs');
+require('../../chunk-JTSUAHDL.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1855,29 +1856,25 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-I5MSCD57.cjs');
+require('../../chunk-3LW5TD54.cjs');
 require('../../chunk-ASMNNSUQ.cjs');
 require('../../chunk-CW3ML76U.cjs');
-require('../../chunk-MWLD6NXV.cjs');
-require('../../chunk-R3TWQ3ZJ.cjs');
+require('../../chunk-VFZFCRAL.cjs');
+require('../../chunk-5P4TDV7V.cjs');
 require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-HOTM4UM6.cjs');
+require('../../chunk-E76ONBKF.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-HTRILBJD.cjs');
-require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-AKK3EO37.cjs');
+require('../../chunk-YXDHVHB2.cjs');
+require('../../chunk-FL2RMEDX.cjs');
+require('../../chunk-XIFEZ2JT.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
-require('../../chunk-NO5UJLLQ.cjs');
-require('../../chunk-2QMBXGMQ.cjs');
+require('../../chunk-WEANWBJH.cjs');
+require('../../chunk-XFRBEXQN.cjs');
+require('../../chunk-TF5D5MNO.cjs');
 require('../../chunk-V45KLJQP.cjs');
+require('../../chunk-65VVJSQZ.cjs');
 require('../../chunk-KHKPLOU4.cjs');
-require('../../chunk-L4UI63K6.cjs');
-require('../../chunk-OF336YWG.cjs');
-require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-RB6BSE3O.cjs');
-require('../../chunk-H3RYUTND.cjs');
-require('../../chunk-3ATAYP36.cjs');
 
 
 
@@ -1902,4 +1899,5 @@ require('../../chunk-3ATAYP36.cjs');
 
 
 
-exports.ClaudeEmbed = _chunkFMH2DYBCcjs.ClaudeEmbed; exports.EMBED_SIZES = _chunkFMH2DYBCcjs.EMBED_SIZES; exports.EmbedContainer = _chunkFMH2DYBCcjs.EmbedContainer; exports.EmbedIframe = _chunkFMH2DYBCcjs.EmbedIframe; exports.EmbedViewerFrame = _chunkFMH2DYBCcjs.EmbedViewerFrame; exports.FigmaEmbed = _chunkFMH2DYBCcjs.FigmaEmbed; exports.FileDownloadCard = _chunkQQ7LKNNPcjs.FileDownloadCard; exports.GoogleSheetsViewer = _chunkQQ7LKNNPcjs.GoogleSheetsViewer; exports.LinkPreviewContainer = _chunkFMH2DYBCcjs.LinkPreviewContainer; exports.LinkedInContainer = _chunkFMH2DYBCcjs.LinkedInContainer; exports.LinkedInEmbedClient = _chunkFMH2DYBCcjs.LinkedInEmbedClient; exports.MarkdownImage = _chunkFMH2DYBCcjs.MarkdownImage; exports.OGLinkErrorBoundary = _chunkFMH2DYBCcjs.OGLinkErrorBoundary; exports.OGLinkPreview = _chunkFMH2DYBCcjs.OGLinkPreview; exports.OGLinkTileSkeleton = _chunkFMH2DYBCcjs.OGLinkTileSkeleton; exports.PdfViewer = _chunkQQ7LKNNPcjs.PdfViewer; exports.RedditContainer = _chunkFMH2DYBCcjs.RedditContainer; exports.RedditEmbedClient = _chunkFMH2DYBCcjs.RedditEmbedClient; exports.RichMarkdownRuntimeProvider = _chunkFMH2DYBCcjs.RichMarkdownRuntimeProvider; exports.TwitterContainer = _chunkFMH2DYBCcjs.TwitterContainer; exports.TwitterEmbedClient = _chunkFMH2DYBCcjs.TwitterEmbedClient; exports.YouTubeContainer = _chunkFMH2DYBCcjs.YouTubeContainer; exports.useRichMarkdownRuntime = _chunkFMH2DYBCcjs.useRichMarkdownRuntime;
+
+exports.ClaudeEmbed = _chunkVRDHAR3Xcjs.ClaudeEmbed; exports.EMBED_SIZES = _chunkVRDHAR3Xcjs.EMBED_SIZES; exports.EmbedContainer = _chunkVRDHAR3Xcjs.EmbedContainer; exports.EmbedIframe = _chunkVRDHAR3Xcjs.EmbedIframe; exports.EmbedViewerFrame = _chunkVRDHAR3Xcjs.EmbedViewerFrame; exports.FigmaEmbed = _chunkVRDHAR3Xcjs.FigmaEmbed; exports.FileDownloadCard = _chunkWO3XO27Ccjs.FileDownloadCard; exports.GoogleSheetsViewer = _chunkWO3XO27Ccjs.GoogleSheetsViewer; exports.LinkPreviewContainer = _chunkVRDHAR3Xcjs.LinkPreviewContainer; exports.LinkedInContainer = _chunkVRDHAR3Xcjs.LinkedInContainer; exports.LinkedInEmbedClient = _chunkVRDHAR3Xcjs.LinkedInEmbedClient; exports.MarkdownImage = _chunkVRDHAR3Xcjs.MarkdownImage; exports.OGLinkErrorBoundary = _chunkVRDHAR3Xcjs.OGLinkErrorBoundary; exports.OGLinkPreview = _chunkVRDHAR3Xcjs.OGLinkPreview; exports.OGLinkPreviewSkeleton = _chunkVRDHAR3Xcjs.OGLinkPreviewSkeleton; exports.OGLinkTileSkeleton = _chunkVRDHAR3Xcjs.OGLinkTileSkeleton; exports.PdfViewer = _chunkWO3XO27Ccjs.PdfViewer; exports.RedditContainer = _chunkVRDHAR3Xcjs.RedditContainer; exports.RedditEmbedClient = _chunkVRDHAR3Xcjs.RedditEmbedClient; exports.RichMarkdownRuntimeProvider = _chunkVRDHAR3Xcjs.RichMarkdownRuntimeProvider; exports.TwitterContainer = _chunkVRDHAR3Xcjs.TwitterContainer; exports.TwitterEmbedClient = _chunkVRDHAR3Xcjs.TwitterEmbedClient; exports.YouTubeContainer = _chunkVRDHAR3Xcjs.YouTubeContainer; exports.useRichMarkdownRuntime = _chunkVRDHAR3Xcjs.useRichMarkdownRuntime;

package/dist/components/embeds/index.d.ts

@@ -10,7 +10,7 @@ export { FigmaEmbed } from './figma-embed';
 export type { FigmaEmbedProps } from './figma-embed';
 export { ClaudeEmbed } from './claude-embed';
 export type { ClaudeEmbedProps, ClaudeEmbedKind } from './claude-embed';
-export { OGLinkPreview, OGLinkErrorBoundary, OGLinkTileSkeleton } from './og-link-preview';
+export { OGLinkPreview, OGLinkErrorBoundary, OGLinkPreviewSkeleton, OGLinkTileSkeleton } from './og-link-preview';
 export type { OGLinkPreviewProps, OGData } from './og-link-preview';
 export { FileDownloadCard } from './file-download-card';
 export type { FileDownloadCardProps } from './file-download-card';

package/dist/components/embeds/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC3F,YAAY,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AASlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,EACX,KAAK,SAAS,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,2BAA2B,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,YAAY,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAExE,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAClH,YAAY,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAEpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AASlE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,oBAAoB,EACpB,iBAAiB,EACjB,WAAW,EACX,KAAK,SAAS,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,2BAA2B,EAAE,sBAAsB,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/embeds/index.js

@@ -4,7 +4,7 @@ import { PdfViewer } from "./pdf-viewer.js";
 import { GoogleSheetsViewer } from "./google-sheets-viewer.js";
 import { FigmaEmbed } from "./figma-embed.js";
 import { ClaudeEmbed } from "./claude-embed.js";
-import { OGLinkPreview, OGLinkErrorBoundary, OGLinkTileSkeleton } from "./og-link-preview.js";
+import { OGLinkPreview, OGLinkErrorBoundary, OGLinkPreviewSkeleton, OGLinkTileSkeleton } from "./og-link-preview.js";
 import { FileDownloadCard } from "./file-download-card.js";
 import { RedditEmbedClient } from "./reddit-embed-client.js";
 import { TwitterEmbedClient } from "./twitter-embed-client.js";
@@ -35,6 +35,7 @@ export {
   MarkdownImage,
   OGLinkErrorBoundary,
   OGLinkPreview,
+  OGLinkPreviewSkeleton,
   OGLinkTileSkeleton,
   PdfViewer,
   RedditContainer,

package/dist/components/embeds/markdown-image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown-image.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/markdown-image.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4DxE"}
+{"version":3,"file":"markdown-image.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/markdown-image.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,+BA+DxE"}

package/dist/components/embeds/markdown-image.js

@@ -3,14 +3,17 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import Image from "../../embed-shims/next-image.js";
 import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { useRichMarkdownRuntime } from "./rich-markdown-runtime.js";
 const MAX_H_REM = 32;
 const DISPLAY_W = 768;
 function MarkdownImage({ src, alt }) {
   const { transformImageSrc } = useRichMarkdownRuntime();
+  const held = useLoadingScope();
   const [probed, setProbed] = useState(null);
   const ratio = probed?.src === src ? probed.ratio : null;
   useEffect(() => {
+    if (held) return void 0;
     let cancelled = false;
     const probeSrc = transformImageSrc(src, { width: 48, resize: "contain", quality: 20 }) ?? src;
     const probe = new window.Image();
@@ -26,8 +29,8 @@ function MarkdownImage({ src, alt }) {
     return () => {
       cancelled = true;
     };
-  }, [src, transformImageSrc]);
-  if (!ratio) {
+  }, [src, transformImageSrc, held]);
+  if (!ratio || held) {
     return /* @__PURE__ */ jsx(
       UnifiedSkeleton,
       {

package/dist/components/embeds/og-link-preview.d.ts

@@ -89,10 +89,14 @@ export interface OGLinkPreviewProps {
     kicker?: ReactNode;
 }
 /**
- * The `tile` card while its list loads: the tile's exact geometry (the `p-3`
- * card, the source row with a favicon dot, two headline lines, the excerpt
- * line), owned here so the tile and its loading state cannot drift apart.
+ * A link preview while its page is scraped (or drawn in a loading scope): the `compact` (120px row) or `default`
+ * (16:9 hero) card's frame, the media box, and bars for the title, description and source line.
  */
+export declare function OGLinkPreviewSkeleton({ variant, image, }: {
+    variant?: 'compact' | 'default';
+    /** `false`: the compact card's no-image row (a curated title with no curated image). */
+    image?: boolean;
+}): React.JSX.Element;
 export declare function OGLinkTileSkeleton(): React.JSX.Element;
 /**
  * Rich Open-Graph link preview card with skeleton, fallback, and image-edge

package/dist/components/embeds/og-link-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"og-link-preview.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/og-link-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvE;;;;;;;GAOG;AACH,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,qBAAa,mBAAoB,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAC5E,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,IAAI,kBAAkB;IAIrD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAI1D,MAAM;CAIP;AAED,MAAM,WAAW,kBAAkB;IACjC,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;;;kCAO8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;yEAEqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;gFAC4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;8BAE0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;iFAI6E;IAC7E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACzC;;yBAEqB;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;iFAC6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;+BAC2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAwDD;;;;GAIG;AACH,wBAAgB,kBAAkB,sBAajC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4ctD,CAAC"}
+{"version":3,"file":"og-link-preview.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/og-link-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvE;;;;;;;GAOG;AACH,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,qBAAa,mBAAoB,SAAQ,SAAS,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;gBAC5E,KAAK,EAAE,kBAAkB;IAKrC,MAAM,CAAC,wBAAwB,IAAI,kBAAkB;IAIrD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS;IAI1D,MAAM;CAIP;AAED,MAAM,WAAW,kBAAkB;IACjC,mCAAmC;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ;;;;;;;kCAO8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;yEAEqE;IACrE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;gFAC4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;8BAE0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;iFAI6E;IAC7E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IACzC;;yBAEqB;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;iFAC6E;IAC7E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;+BAC2B;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AA6ED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,OAAmB,EACnB,KAAY,GACb,EAAE;IACD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,wFAAwF;IACxF,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,qBAwDA;AAcD,wBAAgB,kBAAkB,sBAgBjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+atD,CAAC"}

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/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"}