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

package/dist/components/docs/doc-viewer.js

@@ -2,15 +2,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useRouter } from "../../embed-shims/next-navigation.js";
-import { findDocNodeByPath } from "../../utils/doc-tree-nav.js";
+import { findDocNodeByPath, rootDocumentPath } from "../../utils/doc-tree-nav.js";
 import { PageShell } from "../layout/article-detail-layout.js";
 import { PageLayout } from "../layout/page-layout.js";
-import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { MultiLevelNavigation, MobileNavigationDropdown } from "../navigation/multi-level-navigation.js";
 import { StickySectionNav } from "../navigation/sticky-section-nav.js";
 import { PersistentSidebar, PersistentMobileDropdown } from "../persistent-filter-controls.js";
 import { DocSearchBar, useDocSearch } from "../shared/doc-search/index.js";
 import { DataSyncLine } from "../ui/data-attribution.js";
+import { LoadingScope } from "../ui/loading-scope.js";
 import { useDocNavigation } from "./doc-navigation-context.js";
 import { useDocsResolveLink } from "./use-docs-resolve-link.js";
 import { useDocumentTree } from "./use-document-tree.js";
@@ -29,11 +29,12 @@ function DocViewer(props) {
   return /* @__PURE__ */ jsx(DocViewerContent, { ...props });
 }
 const ON_THIS_PAGE_LABEL = "ON THIS PAGE";
+const NO_SECTION_CLICK = () => {
+};
 const ON_THIS_PAGE_HEADING_CLASS = "mb-4 font-semibold text-ods-text-secondary text-h5";
 function DocViewerContent({
   sourceId,
   renderContent,
-  renderSkeleton,
   chatSource,
   title,
   subtitle,
@@ -41,6 +42,7 @@ function DocViewerContent({
   className = "",
   shell = true,
   docPath,
+  initialDocumentType,
   sidebarLabel = "DOCUMENTATION",
   structureEndpoint,
   contentEndpoint,
@@ -107,8 +109,14 @@ function DocViewerContent({
       onResolveLink: resolveLink
     });
   }, [content, renderContent, navigateToDoc, sourceId, resolveLink]);
-  const selectedNodeDocType = selectedPath && structure.length > 0 ? findDocNodeByPath(selectedPath, structure)?.documentType : void 0;
-  const activeDocType = content?.documentType ?? selectedNodeDocType;
+  const selectedNodePath = structure.length > 0 && !selectedPath ? rootDocumentPath(structure, folderIndexFile) : selectedPath;
+  const selectedNodeDocType = structure.length > 0 ? selectedNodePath ? findDocNodeByPath(selectedNodePath, structure)?.documentType : void 0 : initialDocumentType;
+  const isLoadingDocument = isLoadingContent || isLoadingStructure;
+  const loadingContent = isLoadingDocument ? renderContent(
+    { content: "", sections: [], path: selectedPath ?? "", documentType: selectedNodeDocType },
+    { onInternalLinkClick: navigateToDoc, currentPath: selectedPath ?? "", sourceId }
+  ) : null;
+  const activeDocType = isLoadingDocument ? selectedNodeDocType : content?.documentType ?? selectedNodeDocType;
   const isMarkdownContent = !activeDocType || activeDocType === "markdown";
   const showStickyNav = isMarkdownContent;
   const stickyNavSections = content?.sections?.map((s) => ({ id: s.id, label: s.title })) ?? [];
@@ -116,8 +124,7 @@ function DocViewerContent({
   const bgStyle = isColorValue ? { backgroundColor: colorPalette.background } : {};
   const bgClass = !isColorValue ? colorPalette.background : "";
   const containerBgStyle = colorPalette.containerBackground !== "transparent" ? { backgroundColor: colorPalette.containerBackground } : {};
-  const defaultEmptyText = structure.length > 0 ? "Select a document from the sidebar to view" : "No documents yet. Add content from the admin panel.";
-  const resolvedEmptyText = emptyStateText || defaultEmptyText;
+  const resolvedEmptyText = structure.length > 0 ? "Select a document from the sidebar to view" : emptyStateText || "No documents yet.";
   const inner = /* @__PURE__ */ jsx("div", { style: { ...bgStyle, ...containerBgStyle }, children: /* @__PURE__ */ jsx(PageLayout, { title, subtitle, titleSize: "h1", titleWrap: true, backButton: backCfg ?? void 0, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-10", children: [
     synced && /* @__PURE__ */ jsx(DataSyncLine, { sync: content?.sync, loading: !content && (isLoadingContent || isLoadingStructure) }),
     showAIChat && /* @__PURE__ */ jsx(
@@ -180,17 +187,23 @@ function DocViewerContent({
           // shouldn't be on file pages" bug.
           isMarkdownContent && (showStickyNav && stickyNavSections.length > 0 || isLoadingContent || isLoadingStructure) ? "content-lg:grid-cols-[1fr_280px]" : ""} gap-8`,
           children: [
-            /* @__PURE__ */ jsx("div", { className: `w-full min-w-0 ${isMarkdownContent ? "mx-auto max-w-4xl" : ""}`, children: /* @__PURE__ */ jsx("article", { className: "space-y-2", children: isLoadingContent || isLoadingStructure ? renderSkeleton(selectedNodeDocType) : !content ? /* @__PURE__ */ jsx("div", { className: "py-16 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h4", children: resolvedEmptyText }) }) : renderedContent }) }),
-            isMarkdownContent && (isLoadingContent || isLoadingStructure) && /* @__PURE__ */ jsx("div", { className: "hidden content-lg:block", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24", children: [
+            /* @__PURE__ */ jsx("div", { className: `w-full min-w-0 ${isMarkdownContent ? "mx-auto max-w-4xl" : ""}`, children: /* @__PURE__ */ jsx("article", { className: "space-y-2", children: isLoadingDocument ? (
+              // The document being opened draws its own loading form: its renderer, in a loading scope,
+              // with an empty document of its type (no words, no address), never a skeleton picked here.
+              /* @__PURE__ */ jsx(LoadingScope, { children: loadingContent })
+            ) : !content ? /* @__PURE__ */ jsx("div", { className: "py-16 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-ods-text-secondary text-h4", children: resolvedEmptyText }) }) : renderedContent }) }),
+            isMarkdownContent && isLoadingDocument && /* @__PURE__ */ jsx("div", { className: "hidden content-lg:block", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24", children: [
               /* @__PURE__ */ jsx("h3", { className: ON_THIS_PAGE_HEADING_CLASS, children: ON_THIS_PAGE_LABEL }),
-              /* @__PURE__ */ jsx("div", { className: "space-y-0", children: [130, 170, 190, 220, 110, 200, 80, 100, 120, 140, 90].map((w, i) => /* @__PURE__ */ jsx(
-                "div",
+              /* @__PURE__ */ jsx(LoadingScope, { children: /* @__PURE__ */ jsx(
+                StickySectionNav,
                 {
-                  className: `border-l-2 py-[13px] pl-3 ${i === 0 ? "border-ods-accent" : "border-transparent"}`,
-                  children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-[13px] rounded", width: w })
-                },
-                i
-              )) })
+                  sections: [],
+                  activeSection: "",
+                  onSectionClick: NO_SECTION_CLICK,
+                  ribbonPosition: "left",
+                  ribbonColor: "var(--ods-accent)"
+                }
+              ) })
             ] }) }),
             showStickyNav && content && stickyNavSections.length > 0 && !isLoadingContent && /* @__PURE__ */ jsx("div", { className: "hidden content-lg:block", children: /* @__PURE__ */ jsxs("div", { className: "sticky top-24", children: [
               /* @__PURE__ */ jsx("h3", { className: ON_THIS_PAGE_HEADING_CLASS, children: ON_THIS_PAGE_LABEL }),

package/dist/components/docs/docs-hub-page.d.ts

@@ -14,7 +14,7 @@ type DocRenderer = (content: DocContent, handlers: DocRenderHandlers) => React.R
 export type DocumentTypeRenderers = {
     markdown: DocRenderer;
 } & Partial<Record<DocumentType, DocRenderer>>;
-export interface DocsHubPageProps extends Omit<DocViewerProps, 'renderContent' | 'renderSkeleton' | 'showAIChat'> {
+export interface DocsHubPageProps extends Omit<DocViewerProps, 'renderContent' | 'showAIChat'> {
     /** Per-document-type renderer map. `markdown` is REQUIRED. */
     documentTypeRenderers: DocumentTypeRenderers;
     /** Renderer for unknown / future document types. Defaults to a lib-styled

package/dist/components/docs/docs-hub-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"docs-hub-page.d.ts","sourceRoot":"","sources":["../../../src/components/docs/docs-hub-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAK1F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG9D,KAAK,WAAW,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEzF;;;;;;;;GAQG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAAE,QAAQ,EAAE,WAAW,CAAA;CAAE,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;AAE3G,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,GAAG,gBAAgB,GAAG,YAAY,CAAC;IAC/G,8DAA8D;IAC9D,qBAAqB,EAAE,qBAAqB,CAAC;IAE7C;+CAC2C;IAC3C,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B;;sEAEkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAwDD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAqB,EACrB,qBAAqB,EACrB,gBAA0C,EAC1C,UAAiB,EACjB,SAA0B,EAC1B,YAA8B,EAC9B,GAAG,cAAc,EAClB,EAAE,gBAAgB,qBA0BlB"}
+{"version":3,"file":"docs-hub-page.d.ts","sourceRoot":"","sources":["../../../src/components/docs/docs-hub-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAK1F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,WAAW,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEzF;;;;;;;;GAQG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAAE,QAAQ,EAAE,WAAW,CAAA;CAAE,GAAG,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC,CAAC;AAE3G,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,EAAE,eAAe,GAAG,YAAY,CAAC;IAC5F,8DAA8D;IAC9D,qBAAqB,EAAE,qBAAqB,CAAC;IAE7C;+CAC2C;IAC3C,gBAAgB,CAAC,EAAE,WAAW,CAAC;IAE/B;;sEAEkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAqB,EACrB,qBAAqB,EACrB,gBAA0C,EAC1C,UAAiB,EACjB,SAA0B,EAC1B,YAA8B,EAC9B,GAAG,cAAc,EAClB,EAAE,gBAAgB,qBAyBlB"}

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 _chunkJWIITCVBcjs = require('../../chunk-JWIITCVB.cjs');
+require('../../chunk-ZDSC3GFX.cjs');
 
 
-var _chunkO4BXHCMKcjs = require('../../chunk-O4BXHCMK.cjs');
-require('../../chunk-5HOWR4TG.cjs');
-require('../../chunk-2V6FCVUL.cjs');
-require('../../chunk-IKOL6NJY.cjs');
+var _chunkFRG724DUcjs = require('../../chunk-FRG724DU.cjs');
+require('../../chunk-5CBI2ZYV.cjs');
+require('../../chunk-XKOL5CNU.cjs');
+require('../../chunk-CAGNWDVJ.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 = _chunkJWIITCVBcjs.DocNavigationProvider; exports.DocViewer = _chunkJWIITCVBcjs.DocViewer; exports.DocsHubPage = _chunkJWIITCVBcjs.DocsHubPage; exports.useDocNavigation = _chunkJWIITCVBcjs.useDocNavigation; exports.useDocumentTree = _chunkJWIITCVBcjs.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,10 @@ 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;
+/** The header's loading form draws one button by default: most viewers have one action (the PDF viewer passes two). */
+export declare const EMBED_VIEWER_SKELETON_ACTIONS = 1;
+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,uHAAuH;AACvH,eAAO,MAAM,6BAA6B,IAAI,CAAC;AAE/C,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,kBAAkD,GACnD,EAAE,qBAAqB,qBAmIvB"}

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

@@ -4,27 +4,32 @@ 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";
+const EMBED_VIEWER_SKELETON_ACTIONS = 1;
 function EmbedViewerFrame({
   icon,
   title,
   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 = EMBED_VIEWER_SKELETON_ACTIONS
 }) {
-  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 +62,27 @@ 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,
+                {
+                  "data-loading-item": true,
+                  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 +106,7 @@ function EmbedViewerFrame({
             height: isFullscreen ? "calc(100vh - 96px)" : height,
             allow,
             allowFullScreen,
-            loading,
+            iframeLoading,
             sandbox
           }
         ) : isLoading ? (
@@ -117,5 +140,6 @@ function EmbedViewerFrame({
   );
 }
 export {
+  EMBED_VIEWER_SKELETON_ACTIONS,
   EmbedViewerFrame
 };

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,