@flamingo-stack/openframe-frontend-core 0.0.848 → 0.0.849

package/dist/components/docs/docs-hub-page.js

@@ -5,12 +5,11 @@ import { FileDownloadCard } from "../embeds/file-download-card.js";
 import { GoogleSheetsViewer } from "../embeds/google-sheets-viewer.js";
 import { PdfViewer } from "../embeds/pdf-viewer.js";
 import { DocViewer } from "./doc-viewer.js";
-import { MarkdownSkeleton, EmbedSkeleton } from "./skeletons.js";
 const DEFAULT_TITLE = "Documents";
 const defaultFallbackRenderer = () => /* @__PURE__ */ jsx("div", { className: "py-16 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary", children: "Unsupported document type" }) });
-const defaultPdfRenderer = (content, handlers) => content.fileUrl ? /* @__PURE__ */ jsx(PdfViewer, { src: content.fileUrl, fileName: content.fileName }) : defaultFallbackRenderer(content, handlers);
-const defaultGoogleSheetRenderer = (content, handlers) => content.externalUrl ? /* @__PURE__ */ jsx(GoogleSheetsViewer, { externalUrl: content.externalUrl, fileName: content.fileName }) : defaultFallbackRenderer(content, handlers);
-const defaultFigmaRenderer = (content, handlers) => content.externalUrl ? /* @__PURE__ */ jsx(FigmaEmbed, { url: content.externalUrl, title: content.fileName, loading: "eager" }) : defaultFallbackRenderer(content, handlers);
+const defaultPdfRenderer = (content) => /* @__PURE__ */ jsx(PdfViewer, { src: content.fileUrl ?? "", fileName: content.fileName });
+const defaultGoogleSheetRenderer = (content) => /* @__PURE__ */ jsx(GoogleSheetsViewer, { externalUrl: content.externalUrl ?? "", fileName: content.fileName });
+const defaultFigmaRenderer = (content) => /* @__PURE__ */ jsx(FigmaEmbed, { url: content.externalUrl ?? "", title: content.fileName, iframeLoading: "eager" });
 const defaultFileRenderer = (content) => /* @__PURE__ */ jsx(
   FileDownloadCard,
   {
@@ -20,11 +19,6 @@ const defaultFileRenderer = (content) => /* @__PURE__ */ jsx(
     fileUrl: content.fileUrl
   }
 );
-const documentLoadingForm = (documentType) => !documentType || documentType === "markdown" ? /* @__PURE__ */ jsx(MarkdownSkeleton, {}) : (
-  // Forward the documentType so the embed skeleton renders the right
-  // shape (PDF=2 buttons, sheets/figma=1 button, file=centered card).
-  /* @__PURE__ */ jsx(EmbedSkeleton, { documentType })
-);
 function DocsHubPage({
   title = DEFAULT_TITLE,
   documentTypeRenderers,
@@ -54,8 +48,7 @@ function DocsHubPage({
       showAIChat,
       className,
       sidebarLabel,
-      renderContent,
-      renderSkeleton: documentLoadingForm
+      renderContent
     }
   );
 }

package/dist/components/docs/index.cjs

@@ -6,16 +6,16 @@
 
 
 
-var _chunk7DW3LZ52cjs = require('../../chunk-7DW3LZ52.cjs');
-require('../../chunk-I3YRYS23.cjs');
+var _chunkPV2XQJ2Rcjs = require('../../chunk-PV2XQJ2R.cjs');
+require('../../chunk-C3P7IUTU.cjs');
 
 
-var _chunkO4BXHCMKcjs = require('../../chunk-O4BXHCMK.cjs');
-require('../../chunk-5HOWR4TG.cjs');
-require('../../chunk-2V6FCVUL.cjs');
+var _chunkFRG724DUcjs = require('../../chunk-FRG724DU.cjs');
+require('../../chunk-5CBI2ZYV.cjs');
+require('../../chunk-YLETC7LP.cjs');
 require('../../chunk-IKOL6NJY.cjs');
 require('../../chunk-SA2NNWIJ.cjs');
-require('../../chunk-INA2FX2N.cjs');
+require('../../chunk-IHY7E4EX.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
 require('../../chunk-FNQWL4W4.cjs');
@@ -23,9 +23,9 @@ require('../../chunk-IUDBG3HJ.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
 require('../../chunk-ZZDFMUEU.cjs');
-require('../../chunk-QUSCSYHJ.cjs');
+require('../../chunk-TX4NTH22.cjs');
 require('../../chunk-OT6P57ZS.cjs');
-require('../../chunk-YAW7CHLV.cjs');
+require('../../chunk-FXLROQUT.cjs');
 require('../../chunk-3W4ASAXN.cjs');
 require('../../chunk-4YBS4HIO.cjs');
 require('../../chunk-YJZ7R3W5.cjs');
@@ -1829,8 +1829,8 @@ require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
 require('../../chunk-IX2E3AN7.cjs');
 require('../../chunk-7DNL734S.cjs');
-require('../../chunk-U7UBYJEZ.cjs');
-require('../../chunk-YXKAHQYS.cjs');
+require('../../chunk-BU2PSRAS.cjs');
+require('../../chunk-533QK4R6.cjs');
 require('../../chunk-HTYJUMFB.cjs');
 require('../../chunk-W7OFAROY.cjs');
 require('../../chunk-MDLT6D46.cjs');
@@ -1872,4 +1872,4 @@ require('../../chunk-QDB2JO55.cjs');
 
 
 
-exports.DocNavigationProvider = _chunk7DW3LZ52cjs.DocNavigationProvider; exports.DocViewer = _chunk7DW3LZ52cjs.DocViewer; exports.DocsHubPage = _chunk7DW3LZ52cjs.DocsHubPage; exports.useDocNavigation = _chunk7DW3LZ52cjs.useDocNavigation; exports.useDocumentTree = _chunk7DW3LZ52cjs.useDocumentTree; exports.useScrollSpy = _chunkO4BXHCMKcjs.useScrollSpy;
+exports.DocNavigationProvider = _chunkPV2XQJ2Rcjs.DocNavigationProvider; exports.DocViewer = _chunkPV2XQJ2Rcjs.DocViewer; exports.DocsHubPage = _chunkPV2XQJ2Rcjs.DocsHubPage; exports.useDocNavigation = _chunkPV2XQJ2Rcjs.useDocNavigation; exports.useDocumentTree = _chunkPV2XQJ2Rcjs.useDocumentTree; exports.useScrollSpy = _chunkFRG724DUcjs.useScrollSpy;

package/dist/components/docs/use-document-tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-document-tree.d.ts","sourceRoot":"","sources":["../../../src/components/docs/use-document-tree.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAgB,MAAM,wBAAwB,CAAC;AA8LhF,MAAM,WAAW,qBAAqB;IACpC,4DAA4D;IAC5D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,iFAAiF;IACjF,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,qBAAqB,EAAE,WAAW,CAAC,EAAE,MAAM;;;;;;;;;yBAqVzC,MAAM;uBAiBrC,IAAI,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC;0BAgCnD,MAAM,YAAY;QAAE,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;;;EAoJlF"}
+{"version":3,"file":"use-document-tree.d.ts","sourceRoot":"","sources":["../../../src/components/docs/use-document-tree.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAgB,MAAM,wBAAwB,CAAC;AAiLhF,MAAM,WAAW,qBAAqB;IACpC,4DAA4D;IAC5D,iBAAiB,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,eAAe,EAAE,MAAM,CAAC;IACxB,iFAAiF;IACjF,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,qBAAqB,EAAE,WAAW,CAAC,EAAE,MAAM;;;;;;;;;yBAsWzC,MAAM;uBAiBrC,IAAI,CAAC,OAAO,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC;0BAgCnD,MAAM,YAAY;QAAE,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,gBAAgB,CAAC,EAAE,OAAO,CAAA;KAAE;;;EA0JlF"}

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

@@ -6,7 +6,9 @@ import {
   stripFolderIndexFromPath,
   findDocNodeByPath,
   getDocAncestorNodeIds,
-  DEFAULT_FOLDER_INDEX_FILE
+  DEFAULT_FOLDER_INDEX_FILE,
+  findFirstDocPath,
+  rootDocumentPath
 } from "../../utils/doc-tree-nav.js";
 import { contentFetch } from "../../utils/embed-content-fetch.js";
 import { navigateSamePageHash, HUB_HEADER_OFFSET_PX } from "../../utils/same-page-hash-nav.js";
@@ -21,21 +23,6 @@ function scrollToContent() {
     scrollElementIntoView(document.documentElement);
   }
 }
-function findFirstDocPath(folder) {
-  const children = folder.children ?? [];
-  for (const child of children) {
-    if (child.type === "file" && !child.path.toLowerCase().endsWith(".mmd")) {
-      return child.path;
-    }
-  }
-  for (const child of children) {
-    if (child.type === "folder") {
-      const nested = findFirstDocPath(child);
-      if (nested) return nested;
-    }
-  }
-  return null;
-}
 function isRecord(value) {
   return typeof value === "object" && value !== null;
 }
@@ -127,6 +114,10 @@ function useDocumentTree(config, initialPath) {
   const folderIndexFile = config.folderIndexFile ?? DEFAULT_FOLDER_INDEX_FILE;
   const cleanInitialPath = stripFolderIndexFromPath(initialPath?.replace(/\/$/, "") || "", folderIndexFile);
   const [structure, setStructure] = useState([]);
+  const structureRef = useRef(structure);
+  useEffect(() => {
+    structureRef.current = structure;
+  }, [structure]);
   const [selectedPath, setSelectedPath] = useState(cleanInitialPath);
   const [content, setContent] = useState(null);
   const [isLoadingStructure, setIsLoadingStructure] = useState(true);
@@ -239,9 +230,10 @@ function useDocumentTree(config, initialPath) {
             setContent(null);
             return;
           }
-          const probe = findDocNodeByPath(stripFolderIndexFromPath(path, folderIndexFile), structure);
+          const latestStructure = structureRef.current;
+          const probe = findDocNodeByPath(stripFolderIndexFromPath(path, folderIndexFile), latestStructure);
           const probeIsNoReadmeFolder = !!probe && probe.type === "folder" && !probe.hasReadme;
-          const preStructureFolderLike = structure.length === 0 && !path.endsWith(".md");
+          const preStructureFolderLike = latestStructure.length === 0 && !path.endsWith(".md");
           if (probeIsNoReadmeFolder || preStructureFolderLike) {
             lastFetchedPath.current = null;
             setError(null);
@@ -296,7 +288,12 @@ function useDocumentTree(config, initialPath) {
     if (!structure || structure.length === 0) return;
     let pathToFetch = null;
     if (selectedPath === "") {
-      pathToFetch = folderIndexFile;
+      const rootPath = rootDocumentPath(structure, folderIndexFile);
+      if (!rootPath) {
+        lastFetchedPath.current = null;
+        return;
+      }
+      pathToFetch = rootPath;
     } else {
       const node = findDocNodeByPath(selectedPath, structure);
       if (node && node.type === "folder" && !node.hasReadme) {
@@ -434,18 +431,21 @@ function useDocumentTree(config, initialPath) {
     });
   }, [docNavigation, normalizedBaseRoute, structure, selectNode, folderIndexFile]);
   const isEmptyFolder = useMemo(() => {
-    if (!selectedPath || structure.length === 0) return false;
+    if (structure.length === 0) return false;
+    if (!selectedPath) return !rootDocumentPath(structure, folderIndexFile);
     const node = findDocNodeByPath(selectedPath, structure);
     return !!node && node.type === "folder" && !node.hasReadme && !findFirstDocPath(node);
-  }, [selectedPath, structure]);
+  }, [selectedPath, structure, folderIndexFile]);
+  const isEmptySource = !isLoadingStructure && structure.length === 0;
+  const settled = isEmptyFolder || isEmptySource;
   return {
     structure,
     selectedPath,
     setSelectedPath,
-    content: isEmptyFolder ? null : content,
+    content: settled ? null : content,
     isLoadingStructure,
-    isLoadingContent: isEmptyFolder ? false : isLoadingContent,
-    error: isEmptyFolder ? null : error,
+    isLoadingContent: settled ? false : isLoadingContent,
+    error: settled ? null : error,
     expandedNodes,
     toggleNode,
     selectNode,

package/dist/components/embeds/claude-embed.d.ts

@@ -9,7 +9,7 @@ export interface ClaudeEmbedProps {
     /** iframe height (CSS value), matching `FigmaEmbed`'s prop. */
     height?: string;
     /** iframe loading strategy. Defaults to `lazy`, as `FigmaEmbed` does. */
-    loading?: 'eager' | 'lazy';
+    iframeLoading?: 'eager' | 'lazy';
 }
 /**
  * A Claude artifact, in the SAME chrome as every other embed viewer
@@ -35,5 +35,5 @@ export interface ClaudeEmbedProps {
  * a Claude Design url (no embed route), an artifact whose author has not
  * allow-listed this host, or an http host (mixed content).
  */
-export declare function ClaudeEmbed({ url, kind, title, height, loading }: ClaudeEmbedProps): import("react").JSX.Element;
+export declare function ClaudeEmbed({ url, kind, title, height, iframeLoading }: ClaudeEmbedProps): import("react").JSX.Element;
 //# sourceMappingURL=claude-embed.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"claude-embed.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/claude-embed.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAOD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,IAAiB,EAAE,KAAK,EAAE,MAAM,EAAE,OAAgB,EAAE,EAAE,gBAAgB,+BAkExG"}
+{"version":3,"file":"claude-embed.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/claude-embed.tsx"],"names":[],"mappings":"AASA,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,mEAAmE;IACnE,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yEAAyE;IACzE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAClC;AAOD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,WAAW,CAAC,EAAE,GAAG,EAAE,IAAiB,EAAE,KAAK,EAAE,MAAM,EAAE,aAAsB,EAAE,EAAE,gBAAgB,+BAkE9G"}

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

@@ -10,7 +10,7 @@ const KIND_HEADING = {
   artifact: "Claude Artifact",
   design: "Claude Design"
 };
-function ClaudeEmbed({ url, kind = "artifact", title, height, loading = "lazy" }) {
+function ClaudeEmbed({ url, kind = "artifact", title, height, iframeLoading = "lazy" }) {
   const { src: mirrorSrc, status } = useClaudeMirrorSrc(url);
   const isProbing = status === "probing";
   const embedUrl = isProbing ? null : mirrorSrc ?? toClaudeEmbedUrl(url);
@@ -21,7 +21,7 @@ function ClaudeEmbed({ url, kind = "artifact", title, height, loading = "lazy" }
       icon: /* @__PURE__ */ jsx(ClaudeIcon, { className: "h-5 w-5 shrink-0" }),
       title: title?.trim() || KIND_HEADING[kind],
       titleVariant: "h6",
-      isLoading: isProbing,
+      resolving: isProbing,
       actions: /* @__PURE__ */ jsx(
         Button,
         {
@@ -37,7 +37,7 @@ function ClaudeEmbed({ url, kind = "artifact", title, height, loading = "lazy" }
       ),
       src: embedUrl,
       fullscreenControl: true,
-      loading,
+      iframeLoading,
       height,
       allow: "clipboard-write; clipboard-read; fullscreen",
       sandbox: mirrorSrc ? "allow-scripts allow-popups allow-forms" : "allow-scripts allow-same-origin allow-popups allow-forms",

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

@@ -25,8 +25,10 @@ export interface EmbedIframeProps {
     allow?: string;
     /** iframe `referrerPolicy` attribute */
     referrerPolicy?: React.IframeHTMLAttributes<HTMLIFrameElement>['referrerPolicy'];
-    /** iframe `loading` attribute */
-    loading?: 'eager' | 'lazy';
+    /** iframe `loading` attribute (eager or lazy). */
+    iframeLoading?: 'eager' | 'lazy';
+    /** The frame's source is not known yet: the frame draws its loading form. A loading scope does the same. */
+    loading?: boolean;
     /** iframe `allowFullScreen` attribute */
     allowFullScreen?: boolean;
     /**
@@ -48,5 +50,5 @@ export interface EmbedIframeProps {
  * - Setting iframe src to about:blank on unmount to release the embedded document
  * - Resetting loaded state when src changes
  */
-export declare function EmbedIframe({ src, title, className, height, allow, referrerPolicy, loading, allowFullScreen, sandbox, }: EmbedIframeProps): React.JSX.Element;
+export declare function EmbedIframe({ src, title, className, height, allow, referrerPolicy, iframeLoading, loading, allowFullScreen, sandbox, }: EmbedIframeProps): React.JSX.Element;
 //# sourceMappingURL=embed-iframe.d.ts.map

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;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"}
+{"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,kDAAkD;IAClD,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,4GAA4G;IAC5G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,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,aAAa,EACb,OAAe,EACf,eAAe,EACf,OAAO,GACR,EAAE,gBAAgB,qBAqDlB"}

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

@@ -23,7 +23,8 @@ function EmbedIframe({
   height,
   allow,
   referrerPolicy,
-  loading,
+  iframeLoading,
+  loading = false,
   allowFullScreen,
   sandbox
 }) {
@@ -31,7 +32,7 @@ function EmbedIframe({
   const isLoaded = loadedSrc === src;
   const iframeRef = useRef(null);
   const handleLoad = useCallback(() => setLoadedSrc(src), [src]);
-  const held = useLoadingScope();
+  const held = useLoadingScope() || loading;
   useEffect(() => {
     const iframe = iframeRef.current;
     return () => {
@@ -62,7 +63,7 @@ function EmbedIframe({
             onLoad: handleLoad,
             allow,
             referrerPolicy,
-            loading,
+            loading: iframeLoading,
             allowFullScreen: allow?.includes("fullscreen") ? void 0 : allowFullScreen,
             sandbox
           },

package/dist/components/embeds/embed-viewer-frame.d.ts

@@ -30,21 +30,22 @@ export interface EmbedViewerFrameProps {
     /** Rendered verbatim in the header row — the caller owns its own container/state. */
     actions?: React.ReactNode;
     /** Iframe source; falsy renders the inline empty state (or the loading
-     *  state when `isLoading`) under the header. */
+     *  state when `loading` or `resolving`) under the header. */
     src: string | null | undefined;
-    /** While true AND there is no `src` yet, the body shows the shared embed
-     *  loading skeleton (`EmbedLoadingSkeleton`) instead of the empty state —
-     *  for a viewer that is still resolving where its frame points (e.g.
-     *  ClaudeEmbed probing for a self-hosted mirror), so a cold first view
-     *  reads as "loading" (identical to every other embed), not "nothing here". */
-    isLoading?: boolean;
+    /** The document is being read (the standard `loading` prop; a loading scope does the same): the whole frame is its
+     *  loading form, a skeleton title, its buttons' loading forms and the frame's loading box. */
+    loading?: boolean;
+    /** The document is known (its title shows) but the viewer is still finding where its frame points (ClaudeEmbed
+     *  probing for a self-hosted mirror): only the body is its loading box. */
+    resolving?: boolean;
     /** Large icon for the inline empty state (the viewers pass `w-16 h-16`). */
     emptyIcon?: React.ReactNode;
     emptyMessage?: string;
     height?: string;
     allow?: string;
     allowFullScreen?: boolean;
-    loading?: 'eager' | 'lazy';
+    /** iframe loading strategy (eager or lazy). */
+    iframeLoading?: 'eager' | 'lazy';
     /** iframe `sandbox` — see `EmbedIframe`. Set it for user-authored contents. */
     sandbox?: string;
     /** Wrapper classes; defaults to the sheets/pdf `space-y-4`. */
@@ -56,6 +57,8 @@ export interface EmbedViewerFrameProps {
      *  button (the Figma player) and some cannot (a self-hosted Claude
      *  artifact mirror) — the shell provides the affordance uniformly. */
     fullscreenControl?: boolean;
+    /** How many buttons `actions` draws (PDF: Preview and Download): the header's loading form draws as many. Default 1. */
+    loadingActionCount?: number;
 }
-export declare function EmbedViewerFrame({ icon, title, titleVariant, actions, src, isLoading: isLoadingGiven, emptyIcon, emptyMessage, height, allow, allowFullScreen, loading, sandbox, className, fullscreenControl, }: EmbedViewerFrameProps): React.JSX.Element;
+export declare function EmbedViewerFrame({ icon, title, titleVariant, actions, src, loading: loadingGiven, resolving, emptyIcon, emptyMessage, height, allow, allowFullScreen, iframeLoading, sandbox, className, fullscreenControl, loadingActionCount, }: EmbedViewerFrameProps): React.JSX.Element;
 //# sourceMappingURL=embed-viewer-frame.d.ts.map

package/dist/components/embeds/embed-viewer-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"embed-viewer-frame.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/embed-viewer-frame.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,qBAAqB;IACpC,6EAA6E;IAC7E,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;oDACgD;IAChD,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/B;;;;mFAI+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;0EAKsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,YAAmB,EACnB,OAAO,EACP,GAAG,EACH,SAAS,EAAE,cAAc,EACzB,SAAS,EACT,YAAsC,EACtC,MAAM,EACN,KAAK,EACL,eAAe,EACf,OAAO,EACP,OAAO,EACP,SAAS,EACT,iBAAiB,GAClB,EAAE,qBAAqB,qBAgHvB"}
+{"version":3,"file":"embed-viewer-frame.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/embed-viewer-frame.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,qBAAqB;IACpC,6EAA6E;IAC7E,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,qFAAqF;IACrF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;iEAC6D;IAC7D,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC/B;kGAC8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;+EAC2E;IAC3E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;0EAKsE;IACtE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wHAAwH;IACxH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,YAAmB,EACnB,OAAO,EACP,GAAG,EACH,OAAO,EAAE,YAAoB,EAC7B,SAAiB,EACjB,SAAS,EACT,YAAsC,EACtC,MAAM,EACN,KAAK,EACL,eAAe,EACf,aAAa,EACb,OAAO,EACP,SAAS,EACT,iBAAiB,EACjB,kBAAsB,GACvB,EAAE,qBAAqB,qBA8HvB"}

package/dist/components/embeds/embed-viewer-frame.js

@@ -4,6 +4,7 @@ import { Maximize2, Minimize2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { FullscreenSwitchController } from "../../utils/fullscreen-switch.js";
+import { InteractiveSkeleton, TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/button/button.js";
 import { useLoadingScope } from "../ui/loading-scope.js";
 import { EmbedIframe, EmbedLoadingSkeleton } from "./embed-iframe.js";
@@ -13,18 +14,21 @@ function EmbedViewerFrame({
   titleVariant = "h3",
   actions,
   src,
-  isLoading: isLoadingGiven,
+  loading: loadingGiven = false,
+  resolving = false,
   emptyIcon,
   emptyMessage = "Content not available",
   height,
   allow,
   allowFullScreen,
-  loading,
+  iframeLoading,
   sandbox,
   className,
-  fullscreenControl
+  fullscreenControl,
+  loadingActionCount = 1
 }) {
-  const isLoading = useLoadingScope() || !!isLoadingGiven;
+  const loadingForm = useLoadingScope() || loadingGiven;
+  const isLoading = loadingForm || resolving;
   const frameRef = useRef(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const controllerRef = useRef(null);
@@ -57,9 +61,19 @@ function EmbedViewerFrame({
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
             icon,
-            titleVariant === "h3" ? /* @__PURE__ */ jsx("h2", { className: "truncate text-ods-text-primary text-h3", children: title }) : /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-ods-text-primary text-h6", children: title })
+            loadingForm ? (
+              // The document is being read: its name is not known yet. (A viewer still resolving its frame, with a
+              // known title, keeps it.)
+              /* @__PURE__ */ jsx(TextLineSkeleton, { type: titleVariant, className: "w-48 max-w-full" })
+            ) : titleVariant === "h3" ? /* @__PURE__ */ jsx("h2", { className: "truncate text-ods-text-primary text-h3", children: title }) : /* @__PURE__ */ jsx("span", { className: "truncate font-semibold text-ods-text-primary text-h6", children: title })
           ] }),
-          fullscreenControl && src ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center", children: [
+          loadingForm ? (
+            // The actions point at the document being read: each its button's loading form, in the actions' row.
+            /* @__PURE__ */ jsx("div", { className: "flex w-full items-center gap-2 content-sm:w-auto", children: Array.from({ length: loadingActionCount }, (_, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: loading buttons never reorder
+              /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { size: "small-legacy", className: "flex-1 content-sm:flex-initial" }, i)
+            )) })
+          ) : fullscreenControl && src ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center", children: [
             actions,
             /* @__PURE__ */ jsx(
               Button,
@@ -83,7 +97,7 @@ function EmbedViewerFrame({
             height: isFullscreen ? "calc(100vh - 96px)" : height,
             allow,
             allowFullScreen,
-            loading,
+            iframeLoading,
             sandbox
           }
         ) : isLoading ? (

package/dist/components/embeds/figma-embed.d.ts

@@ -10,7 +10,9 @@ export interface FigmaEmbedProps {
      */
     height?: string;
     /** iframe loading strategy. Defaults to `"lazy"`; the data-room viewer passes `"eager"`. */
-    loading?: 'eager' | 'lazy';
+    iframeLoading?: 'eager' | 'lazy';
+    /** The document is being read: the embed draws its loading form. A loading scope does the same. */
+    loading?: boolean;
 }
 /**
  * Single source of truth for every Figma surface — the data-room document viewer
@@ -26,5 +28,5 @@ export interface FigmaEmbedProps {
  * plain ReactNode) — flipping it recomputes `embedSrc`, and the frame's
  * `EmbedIframe` remounts on the new src exactly as before the extraction.
  */
-export declare function FigmaEmbed({ url, title, height, loading }: FigmaEmbedProps): import("react").JSX.Element;
+export declare function FigmaEmbed({ url, title, height, iframeLoading, loading }: FigmaEmbedProps): import("react").JSX.Element;
 //# sourceMappingURL=figma-embed.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"figma-embed.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/figma-embed.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC9B,4FAA4F;IAC5F,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AA8CD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,OAAgB,EAAE,EAAE,eAAe,+BAmDnF"}
+{"version":3,"file":"figma-embed.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/figma-embed.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC9B,4FAA4F;IAC5F,GAAG,EAAE,MAAM,CAAC;IACZ,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,mGAAmG;IACnG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAgDD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,aAAsB,EAAE,OAAe,EAAE,EAAE,eAAe,+BAoD1G"}

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

@@ -20,7 +20,7 @@ function SlidesViewToggle({ view, onChange }) {
         if (v && v !== view) onChange(v);
       },
       "aria-label": "Figma slides view mode",
-      className: "flex shrink-0 items-center gap-0.5 rounded-lg border border-ods-border bg-ods-card p-0.5",
+      className: "flex h-10 shrink-0 items-center gap-0.5 rounded-lg border border-ods-border bg-ods-card p-0.5",
       children: options.map(({ key, label, Icon }) => {
         const active = view === key;
         return /* @__PURE__ */ jsxs(
@@ -28,7 +28,7 @@ function SlidesViewToggle({ view, onChange }) {
           {
             value: key,
             "aria-label": label,
-            className: `flex items-center gap-1.5 rounded-md px-2.5 py-1 transition-colors text-h6 ${active ? "bg-ods-accent text-ods-text-on-accent" : "text-ods-text-secondary hover:bg-ods-bg-hover hover:text-ods-text-primary"}`,
+            className: `flex h-full items-center gap-1.5 rounded-md px-2.5 py-1 transition-colors text-h6 ${active ? "bg-ods-accent text-ods-text-on-accent" : "text-ods-text-secondary hover:bg-ods-bg-hover hover:text-ods-text-primary"}`,
             children: [
               /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 shrink-0" }),
               label
@@ -40,7 +40,7 @@ function SlidesViewToggle({ view, onChange }) {
     }
   );
 }
-function FigmaEmbed({ url, title, height, loading = "lazy" }) {
+function FigmaEmbed({ url, title, height, iframeLoading = "lazy", loading = false }) {
   const [view, setView] = useState("present");
   const isSlides = url ? isFigmaSlidesUrl(url) : false;
   const embedSrc = url ? toFigmaEmbedUrl(url, { slidesView: view }) : null;
@@ -82,6 +82,7 @@ function FigmaEmbed({ url, title, height, loading = "lazy" }) {
       ] }),
       src: embedSrc,
       allow: "clipboard-write; clipboard-read; fullscreen",
+      iframeLoading,
       loading,
       height,
       allowFullScreen: true,

package/dist/components/embeds/file-download-card.d.ts

@@ -3,6 +3,8 @@ export interface FileDownloadCardProps {
     mimeType?: string;
     fileSize?: number;
     fileUrl?: string;
+    /** The file is being read: the card draws its loading form. A loading scope does the same. */
+    loading?: boolean;
 }
 /**
  * Generic downloadable-file card for the `file` document type. Used by
@@ -13,5 +15,5 @@ export interface FileDownloadCardProps {
  * renders the filename + type + size so the user knows what they were
  * about to download).
  */
-export declare function FileDownloadCard({ fileName, mimeType, fileSize, fileUrl }: FileDownloadCardProps): import("react").JSX.Element;
+export declare function FileDownloadCard({ fileName, mimeType, fileSize, fileUrl, loading }: FileDownloadCardProps): import("react").JSX.Element;
 //# sourceMappingURL=file-download-card.d.ts.map

package/dist/components/embeds/file-download-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-download-card.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/file-download-card.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,qBAAqB,+BAoBhG"}
+{"version":3,"file":"file-download-card.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/file-download-card.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8FAA8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAOD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAe,EAAE,EAAE,qBAAqB,+BAmCjH"}

package/dist/components/embeds/file-download-card.js

@@ -2,10 +2,25 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FileText, Download } from "lucide-react";
 import { formatFileSize } from "../../utils/index.js";
+import { InteractiveSkeleton, TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { Button } from "../ui/index.js";
-function FileDownloadCard({ fileName, mimeType, fileSize, fileUrl }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center py-16", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-md space-y-4 rounded-xl border border-ods-border bg-ods-card p-8 text-center", children: [
-    /* @__PURE__ */ jsx(FileText, { className: "mx-auto h-16 w-16 text-ods-text-secondary" }),
+import { useLoadingScope } from "../ui/loading-scope.js";
+const FILE_CARD_OUTER_CLASS = "flex flex-col items-center justify-center py-16";
+const FILE_CARD_CLASS = "w-full max-w-md space-y-4 rounded-xl border border-ods-border bg-ods-card p-8 text-center";
+const FILE_ICON_CLASS = "mx-auto h-16 w-16 text-ods-text-secondary";
+function FileDownloadCard({ fileName, mimeType, fileSize, fileUrl, loading = false }) {
+  if (useLoadingScope() || loading) {
+    return /* @__PURE__ */ jsx("div", { className: FILE_CARD_OUTER_CLASS, children: /* @__PURE__ */ jsxs("div", { className: FILE_CARD_CLASS, children: [
+      /* @__PURE__ */ jsx(FileText, { className: FILE_ICON_CLASS }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h3", className: "mx-auto w-2/3" }),
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "mx-auto mt-2 w-1/2" })
+      ] }),
+      /* @__PURE__ */ jsx(InteractiveSkeleton.Button, { className: "mx-auto" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: FILE_CARD_OUTER_CLASS, children: /* @__PURE__ */ jsxs("div", { className: FILE_CARD_CLASS, children: [
+    /* @__PURE__ */ jsx(FileText, { className: FILE_ICON_CLASS }),
     /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("h3", { className: "text-ods-text-primary text-h3", children: fileName || "File" }),
       /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-center gap-3 text-ods-text-secondary text-h6", children: [

package/dist/components/embeds/google-sheets-viewer.d.ts

@@ -2,6 +2,8 @@ export interface GoogleSheetsViewerProps {
     externalUrl: string;
     fileName?: string;
     height?: string;
+    /** The document is being read: the viewer draws its loading form. A loading scope does the same. */
+    loading?: boolean;
 }
-export declare function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleSheetsViewerProps): import("react").JSX.Element;
+export declare function GoogleSheetsViewer({ externalUrl, fileName, height, loading }: GoogleSheetsViewerProps): import("react").JSX.Element;
 //# sourceMappingURL=google-sheets-viewer.d.ts.map

package/dist/components/embeds/google-sheets-viewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"google-sheets-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/google-sheets-viewer.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,uBAAuB,+BAmC5F"}
+{"version":3,"file":"google-sheets-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/embeds/google-sheets-viewer.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,uBAAuB;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oGAAoG;IACpG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAe,EAAE,EAAE,uBAAuB,+BAsC7G"}

package/dist/components/embeds/google-sheets-viewer.js

@@ -4,10 +4,12 @@ import { ExternalLink } from "lucide-react";
 import { toGoogleSheetsEmbedUrl, toGoogleSheetsOriginalUrl } from "../../utils/embed-url-converters.js";
 import { GoogleSheetsIcon } from "../icons-v2-generated/index.js";
 import { Button } from "../ui/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { EmbedViewerFrame } from "./embed-viewer-frame.js";
-function GoogleSheetsViewer({ externalUrl, fileName, height }) {
+function GoogleSheetsViewer({ externalUrl, fileName, height, loading = false }) {
   const displayName = fileName || "Google Sheet";
-  if (!externalUrl) {
+  const isLoading = useLoadingScope() || loading;
+  if (!externalUrl && !isLoading) {
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-16 text-center", children: [
       /* @__PURE__ */ jsx(GoogleSheetsIcon, { className: "mb-4 h-16 w-16 text-ods-text-secondary" }),
       /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary", children: "Google Sheet URL not configured" })
@@ -31,8 +33,9 @@ function GoogleSheetsViewer({ externalUrl, fileName, height }) {
           children: "Open in Google Sheets"
         }
       ),
-      src: toGoogleSheetsEmbedUrl(externalUrl),
-      height
+      src: externalUrl ? toGoogleSheetsEmbedUrl(externalUrl) : null,
+      height,
+      loading
     }
   );
 }