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

package/src/components/embeds/file-download-card.tsx

@@ -1,14 +1,23 @@
 import { FileText, Download } from 'lucide-react';
 import { formatFileSize } from '../../utils';
+import { InteractiveSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui';
+import { useLoadingScope } from '../ui/loading-scope';
 
 export interface FileDownloadCardProps {
   fileName?: string;
   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;
 }
 
+/** The card's boxes, shared by the card and its loading form. */
+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';
+
 /**
  * Generic downloadable-file card for the `file` document type. Used by
  * `<DocsHubPage>`'s default `documentTypeRenderers.file`. Embedders can
@@ -18,11 +27,26 @@ export interface FileDownloadCardProps {
  * renders the filename + type + size so the user knows what they were
  * about to download).
  */
-export function FileDownloadCard({ fileName, mimeType, fileSize, fileUrl }: FileDownloadCardProps) {
+export function FileDownloadCard({ fileName, mimeType, fileSize, fileUrl, loading = false }: FileDownloadCardProps) {
+  // In a loading scope the file is being read: the card draws its own loading form, in its own boxes.
+  if (useLoadingScope() || loading) {
+    return (
+      <div className={FILE_CARD_OUTER_CLASS}>
+        <div className={FILE_CARD_CLASS}>
+          <FileText className={FILE_ICON_CLASS} />
+          <div>
+            <TextLineSkeleton type="h3" className="mx-auto w-2/3" />
+            <TextLineSkeleton type="h6" className="mx-auto mt-2 w-1/2" />
+          </div>
+          <InteractiveSkeleton.Button className="mx-auto" />
+        </div>
+      </div>
+    );
+  }
   return (
-    <div className="flex flex-col items-center justify-center py-16">
-      <div className="w-full max-w-md space-y-4 rounded-xl border border-ods-border bg-ods-card p-8 text-center">
-        <FileText className="mx-auto h-16 w-16 text-ods-text-secondary" />
+    <div className={FILE_CARD_OUTER_CLASS}>
+      <div className={FILE_CARD_CLASS}>
+        <FileText className={FILE_ICON_CLASS} />
         <div>
           <h3 className="text-ods-text-primary text-h3">{fileName || 'File'}</h3>
           <div className="mt-2 flex items-center justify-center gap-3 text-ods-text-secondary text-h6">

package/src/components/embeds/google-sheets-viewer.tsx

@@ -4,20 +4,25 @@ import { ExternalLink } from 'lucide-react';
 import { toGoogleSheetsEmbedUrl, toGoogleSheetsOriginalUrl } from '../../utils/embed-url-converters';
 import { GoogleSheetsIcon } from '../icons-v2-generated';
 import { Button } from '../ui';
+import { useLoadingScope } from '../ui/loading-scope';
 import { EmbedViewerFrame } from './embed-viewer-frame';
 
 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 function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleSheetsViewerProps) {
+export function GoogleSheetsViewer({ externalUrl, fileName, height, loading = false }: GoogleSheetsViewerProps) {
   const displayName = fileName || 'Google Sheet';
+  // In a loading scope the document is being read: the frame draws its loading form, never "not configured".
+  const isLoading = useLoadingScope() || loading;
 
   // Historical shape: no URL at all → standalone empty state with NO header
   // (the frame's empty body keeps the header — that's the figma behavior).
-  if (!externalUrl) {
+  if (!externalUrl && !isLoading) {
     return (
       <div className="flex flex-col items-center justify-center py-16 text-center">
         <GoogleSheetsIcon className="mb-4 h-16 w-16 text-ods-text-secondary" />
@@ -43,8 +48,9 @@ export function GoogleSheetsViewer({ externalUrl, fileName, height }: GoogleShee
           Open in Google Sheets
         </Button>
       }
-      src={toGoogleSheetsEmbedUrl(externalUrl)}
+      src={externalUrl ? toGoogleSheetsEmbedUrl(externalUrl) : null}
       height={height}
+      loading={loading}
     />
   );
 }

package/src/components/embeds/pdf-viewer.tsx

@@ -3,6 +3,7 @@
 import { Download, Eye } from 'lucide-react';
 import { AdobePdfIcon } from '../icons-v2-generated';
 import { Button } from '../ui';
+import { useLoadingScope } from '../ui/loading-scope';
 import { EmbedViewerFrame } from './embed-viewer-frame';
 
 export interface PdfViewerProps {
@@ -11,13 +12,17 @@ export interface PdfViewerProps {
   onPreview?: () => void;
   onDownload?: () => void;
   height?: string;
+  /** The document is being read: the viewer draws its loading form. A loading scope does the same. */
+  loading?: boolean;
 }
 
-export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfViewerProps) {
+export function PdfViewer({ src, fileName, onPreview, onDownload, height, loading = false }: PdfViewerProps) {
   const displayName = fileName || 'PDF Document';
+  // In a loading scope the document is being read: the frame draws its loading form, never "not available".
+  const isLoading = useLoadingScope() || loading;
 
   // Historical shape: no src at all → standalone empty state with NO header.
-  if (!src) {
+  if (!src && !isLoading) {
     return (
       <div className="flex flex-col items-center justify-center py-16 text-center">
         <AdobePdfIcon className="mb-4 h-16 w-16 text-ods-text-secondary" />
@@ -57,6 +62,8 @@ export function PdfViewer({ src, fileName, onPreview, onDownload, height }: PdfV
         </div>
       }
       src={src}
+      loadingActionCount={2}
+      loading={loading}
       height={height}
     />
   );

package/src/components/ui/markdown/rich/rich-markdown-renderer.tsx

@@ -101,6 +101,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
   demoteMarkdownH1ToH2,
   skeletonSections,
   skeletonLines,
+  skeletonTitle,
 }) => {
   const { ogScraperUrl } = useRichMarkdownRuntime();
 
@@ -158,6 +159,7 @@ const RichMarkdownInner: React.FC<InnerProps> = ({
       allowRemoteMedia
       skeletonSections={skeletonSections}
       skeletonLines={skeletonLines}
+      skeletonTitle={skeletonTitle}
     />
   );
 };
@@ -174,6 +176,7 @@ const RichMarkdownRendererImpl: React.FC<RichMarkdownRendererProps> = ({
   demoteMarkdownH1ToH2 = false,
   skeletonSections,
   skeletonLines,
+  skeletonTitle,
   // Runtime overrides; provider fills the defaults
   redditProxyUrl,
   twitterProxyUrl,
@@ -199,6 +202,7 @@ const RichMarkdownRendererImpl: React.FC<RichMarkdownRendererProps> = ({
         demoteMarkdownH1ToH2={demoteMarkdownH1ToH2}
         skeletonSections={skeletonSections}
         skeletonLines={skeletonLines}
+        skeletonTitle={skeletonTitle}
       />
     </RichMarkdownRuntimeProvider>
   );

package/src/types/doc-source.ts

@@ -75,12 +75,12 @@ export interface DocSourceDal<Client = unknown> {
  * Doc-source registry id. The lib's `<DocViewer>` is generic over this union
  * — the hub's `DOC_SOURCES` registry defines the actual ids. Listed here as a
  * type-only union so the lib can flow the id into `DocRenderHandlers.sourceId`
- * without callers having to cast `string` → `'openframe-docs' | 'data-room-docs'`.
+ * without callers having to cast `string` to the union.
  *
  * Adding a new source = add the id here AND register it in the hub. The lib
  * never reaches into the registry — this is purely a type-narrowing handle.
  */
-export type DocSourceId = 'openframe-docs' | 'data-room-docs';
+export type DocSourceId = 'openframe-docs' | 'data-room-docs' | 'company-policies';
 
 /**
  * Result returned by the resolve-link endpoint. Discriminator-style: `success`

package/src/utils/doc-tree-nav.ts

@@ -102,3 +102,30 @@ export function getDocSourceDefaultPath(
   const firstFolderWithReadme = structure.find(node => node.type === 'folder' && node.hasReadme && !!node.path);
   return firstFolderWithReadme?.path ?? null;
 }
+
+/** The first document under a folder (its own files first, then each subfolder's, in order), never a diagram source. */
+export function findFirstDocPath(folder: DocNode): string | null {
+  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;
+}
+
+/**
+ * The document a source's root shows: its folder index when the tree has one, else its first document (the rule a
+ * folder with no README follows), else null (a tree with no document at all).
+ */
+export function rootDocumentPath(
+  structure: DocNode[],
+  folderIndexFile: string = DEFAULT_FOLDER_INDEX_FILE,
+): string | null {
+  if (structure.some(node => node.type === 'file' && node.path === folderIndexFile)) return folderIndexFile;
+  return findFirstDocPath({ id: '', name: '', slug: '', path: '', type: 'folder', children: structure });
+}

package/src/utils/list-url.ts

@@ -99,7 +99,8 @@ const BUILDERS: Record<string, (ids: string[], base: string) => string> = {
   slack_message: (ids, b) => `${b}/api/slack-community/messages?ids=${ids.join(',')}`,
   hubspot_ticket: (ids, b) => `${b}/api/tickets/internal?ids=${ids.join(',')}`,
   hubspot_ticket_anon: (ids, b) => `${b}/api/tickets/known-issues?ids=${ids.join(',')}`,
-  data_room_doc: (ids, b) => `${b}/api/data-room/documents?ids=${ids.join(',')}`,
+  data_room_doc: (ids, b) => `${b}/api/libraries/data-room/documents?ids=${ids.join(',')}`,
+  policy_doc: (ids, b) => `${b}/api/libraries/company-policies/documents?ids=${ids.join(',')}`,
   markdown: (ids, b) => `${b}/api/docs/pages?ids=${ids.join(',')}`,
   financial_kpi: (ids, b) => `${b}/api/financials/kpis?ids=${ids.join(',')}`,
   cap_table: (ids, b) => `${b}/api/financials/cap-table?ids=${ids.join(',')}`,

package/src/utils/source-grouping.ts

@@ -27,13 +27,13 @@ import { defaultDocumentTypeForTableId, getSourceLabel } from './source-icons';
 
 /**
  * Doc-table documentTypes: whole documents with their own viewer (markdown =
- * product docs, data_room_doc = data room). They carry an in-app `path` (handed
+ * product docs, data_room_doc = data room, policy_doc = company policies). They carry an in-app `path` (handed
  * to the host's composer as the slug), and a server never folds them
  * into one citation (`groupsByTable`); the strip still draws them as one chip
  * per table. The hub's per-source contract test pins this list to its
  * doc-table configs.
  */
-export const DOC_TABLE_TYPES = ['markdown', 'data_room_doc'] as const;
+export const DOC_TABLE_TYPES = ['markdown', 'data_room_doc', 'policy_doc'] as const;
 
 /**
  * Which tables a SERVER folds into one citation: rows of a knowledge table

package/src/utils/source-icons.ts

@@ -29,6 +29,7 @@ export const SOURCE_ICON_NAMES: Record<string, string> = {
   // Doc tables
   'openframe-docs': 'openframe',
   'data-room-docs': 'shield',
+  'company-policies': 'book-open',
 
   // CMS / programs
   'blog-posts': 'newspaper',
@@ -136,6 +137,7 @@ export const SOURCE_LABELS_BY_TABLE: Record<string, string> = {
   // Doc tables
   'openframe-docs': 'OpenFrame Docs',
   'data-room-docs': 'Data Room',
+  'company-policies': 'Company Policies',
 
   // CMS / programs
   'blog-posts': 'Blog Posts',
@@ -242,6 +244,7 @@ export const DEFAULT_DOCUMENT_TYPE_TO_TABLE_ID: Record<string, string> = {
   // Doc tables
   markdown: 'openframe-docs',
   data_room_doc: 'data-room-docs',
+  policy_doc: 'company-policies',
 
   // CMS / programs
   blog_post: 'blog-posts',

package/dist/components/docs/skeletons.d.ts

@@ -1,25 +0,0 @@
-export declare function MarkdownSkeleton({ region, }?: {
-    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-}): import("react").JSX.Element;
-/**
- * Embed-style skeleton — matches the iframe loading state for `pdf`,
- * `google_sheet`, `figma`, and `file` document types. Used by
- * `<DocsHubPage>` as the default for non-markdown documentTypes.
- *
- * The skeleton is documentType-aware so its layout matches the actual
- * viewer that will replace it:
- *   - `pdf`                  → header with title + TWO buttons (Preview, Download)
- *   - `google_sheet`/`figma` → header with title + ONE button/toggle
- *   - `file`                 → centered FileDownloadCard-style box
- *   - undefined / others     → generic (1-button header)
- */
-export interface EmbedSkeletonProps {
-    /** When provided, the header layout matches the eventual viewer's
-     *  button count + arrangement, so the layout doesn't shift on load. */
-    documentType?: 'pdf' | 'google_sheet' | 'figma' | 'file' | string;
-    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-}
-export declare function EmbedSkeleton({ documentType, region }?: EmbedSkeletonProps): import("react").JSX.Element;
-//# sourceMappingURL=skeletons.d.ts.map

package/dist/components/docs/skeletons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"skeletons.d.ts","sourceRoot":"","sources":["../../../src/components/docs/skeletons.tsx"],"names":[],"mappings":"AA2BA,wBAAgB,gBAAgB,CAAC,EAC/B,MAAa,GACd,GAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CACb,+BA2BL;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,kBAAkB;IACjC;2EACuE;IACvE,YAAY,CAAC,EAAE,KAAK,GAAG,cAAc,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAClE,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,MAAa,EAAE,GAAE,kBAAuB,+BAiDrF"}

package/dist/components/docs/skeletons.js

@@ -1,83 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
-import { EmbedLoadingSkeleton } from "../embeds/embed-iframe.js";
-import { LoadingRegion } from "../loading/loading-region.js";
-import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
-import { MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from "../ui/markdown/base-components.js";
-import { MARKDOWN_RENDERER_CLASS } from "../ui/markdown/engine.js";
-import { TEXT_SIZE_PRESETS } from "../ui/markdown/text-size.js";
-const MARKDOWN_SKELETON_BLOCKS = [
-  { kind: "p", lines: 4 },
-  { kind: "p", lines: 4 },
-  { kind: "p", lines: 5 },
-  { kind: "h2" },
-  { kind: "p", lines: 4 },
-  { kind: "p", lines: 5 },
-  { kind: "h2" },
-  { kind: "p", lines: 3 },
-  { kind: "p", lines: 4 }
-];
-const MARKDOWN_SKELETON_H2_CLASS = cn(MARKDOWN_H2_CLASS, TEXT_SIZE_PRESETS.default.h2);
-const MARKDOWN_SKELETON_P_CLASS = cn(MARKDOWN_PARAGRAPH_CLASS, TEXT_SIZE_PRESETS.default.p);
-function MarkdownSkeleton({
-  region = true
-} = {}) {
-  return (
-    // The renderer's root class, and its box (no margin of its own, like the rendered body): the document's first fold.
-    /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the document", announce: region, className: MARKDOWN_RENDERER_CLASS, children: MARKDOWN_SKELETON_BLOCKS.map(
-      (block, i) => block.kind === "h2" ? (
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton blocks never reorder
-        /* @__PURE__ */ jsx("h2", { className: MARKDOWN_SKELETON_H2_CLASS, "aria-hidden": true, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/3" }) }, i)
-      ) : (
-        // The last block ends the body with no margin, like the rendered one. Its own `last:mb-0` does not apply here:
-        // the region's status line follows the blocks, so the paragraph is not the last child.
-        // biome-ignore lint/suspicious/noArrayIndexKey: skeleton blocks never reorder
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            className: cn(MARKDOWN_SKELETON_P_CLASS, i === MARKDOWN_SKELETON_BLOCKS.length - 1 && "mb-0"),
-            "aria-hidden": true,
-            children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", lines: block.lines, className: "w-full" })
-          },
-          i
-        )
-      )
-    ) })
-  );
-}
-function EmbedSkeleton({ documentType, region = true } = {}) {
-  if (documentType === "file") {
-    return /* @__PURE__ */ jsx(
-      LoadingRegion,
-      {
-        label: "Loading the document",
-        announce: region,
-        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(UnifiedSkeleton, { className: "mx-auto h-16 w-16 rounded" }),
-          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mx-auto h-5 w-2/3 rounded" }),
-            /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mx-auto h-4 w-1/2 rounded" })
-          ] }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-full rounded" })
-        ] })
-      }
-    );
-  }
-  const buttonCount = documentType === "pdf" ? 2 : 1;
-  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading the document", announce: region, className: "space-y-4", children: [
-    /* @__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 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-5 shrink-0 rounded" }),
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-2/3 rounded" })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex w-full items-center gap-2 content-sm:w-auto", children: Array.from({ length: buttonCount }).map((_, i) => /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-10 w-full flex-1 rounded content-sm:w-32 content-sm:flex-initial" }, i)) })
-    ] }),
-    /* @__PURE__ */ jsx(EmbedLoadingSkeleton, { region: false })
-  ] });
-}
-export {
-  EmbedSkeleton,
-  MarkdownSkeleton
-};

package/src/components/docs/skeletons.tsx

@@ -1,131 +0,0 @@
-import { cn } from '../../utils/cn';
-import { EmbedLoadingSkeleton } from '../embeds/embed-iframe';
-import { LoadingRegion } from '../loading/loading-region';
-import { TextLineSkeleton, UnifiedSkeleton } from '../loading/unified-skeleton';
-import { MARKDOWN_H2_CLASS, MARKDOWN_PARAGRAPH_CLASS } from '../ui/markdown/base-components';
-import { MARKDOWN_RENDERER_CLASS } from '../ui/markdown/engine';
-import { TEXT_SIZE_PRESETS } from '../ui/markdown/text-size';
-/**
- * Text-style skeleton — matches a rendered markdown article layout.
- * Used by `<DocsHubPage>` as the default for `markdown` (and unknown
- * document types). Embedders can override via `renderSkeleton`.
- */
-/** Paragraphs and headings the markdown skeleton draws (a document's first fold), with each paragraph's lines. */
-const MARKDOWN_SKELETON_BLOCKS = [
-  { kind: 'p', lines: 4 },
-  { kind: 'p', lines: 4 },
-  { kind: 'p', lines: 5 },
-  { kind: 'h2' },
-  { kind: 'p', lines: 4 },
-  { kind: 'p', lines: 5 },
-  { kind: 'h2' },
-  { kind: 'p', lines: 3 },
-  { kind: 'p', lines: 4 },
-] as const;
-const MARKDOWN_SKELETON_H2_CLASS = cn(MARKDOWN_H2_CLASS, TEXT_SIZE_PRESETS.default.h2);
-const MARKDOWN_SKELETON_P_CLASS = cn(MARKDOWN_PARAGRAPH_CLASS, TEXT_SIZE_PRESETS.default.p);
-
-export function MarkdownSkeleton({
-  region = true,
-}: {
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-} = {}) {
-  // The rendered document's own heading and paragraph elements (the markdown renderer's default preset), each line a
-  // bar of the element's line box.
-  return (
-    // The renderer's root class, and its box (no margin of its own, like the rendered body): the document's first fold.
-    <LoadingRegion label="Loading the document" announce={region} className={MARKDOWN_RENDERER_CLASS}>
-      {MARKDOWN_SKELETON_BLOCKS.map((block, i) =>
-        block.kind === 'h2' ? (
-          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton blocks never reorder
-          <h2 key={i} className={MARKDOWN_SKELETON_H2_CLASS} aria-hidden>
-            <TextLineSkeleton type="inherit" as="span" className="w-1/3" />
-          </h2>
-        ) : (
-          // The last block ends the body with no margin, like the rendered one. Its own `last:mb-0` does not apply here:
-          // the region's status line follows the blocks, so the paragraph is not the last child.
-          // biome-ignore lint/suspicious/noArrayIndexKey: skeleton blocks never reorder
-          <p
-            key={i}
-            className={cn(MARKDOWN_SKELETON_P_CLASS, i === MARKDOWN_SKELETON_BLOCKS.length - 1 && 'mb-0')}
-            aria-hidden
-          >
-            <TextLineSkeleton type="inherit" as="span" lines={block.lines} className="w-full" />
-          </p>
-        ),
-      )}
-    </LoadingRegion>
-  );
-}
-
-/**
- * Embed-style skeleton — matches the iframe loading state for `pdf`,
- * `google_sheet`, `figma`, and `file` document types. Used by
- * `<DocsHubPage>` as the default for non-markdown documentTypes.
- *
- * The skeleton is documentType-aware so its layout matches the actual
- * viewer that will replace it:
- *   - `pdf`                  → header with title + TWO buttons (Preview, Download)
- *   - `google_sheet`/`figma` → header with title + ONE button/toggle
- *   - `file`                 → centered FileDownloadCard-style box
- *   - undefined / others     → generic (1-button header)
- */
-export interface EmbedSkeletonProps {
-  /** When provided, the header layout matches the eventual viewer's
-   *  button count + arrangement, so the layout doesn't shift on load. */
-  documentType?: 'pdf' | 'google_sheet' | 'figma' | 'file' | string;
-  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-  region?: boolean;
-}
-
-export function EmbedSkeleton({ documentType, region = true }: EmbedSkeletonProps = {}) {
-  // Centered card shape for the `file` documentType — matches
-  // `<FileDownloadCard>`'s `flex flex-col items-center justify-center py-16`
-  // + bordered card with icon, name, type/size row, Download button.
-  if (documentType === 'file') {
-    return (
-      <LoadingRegion
-        label="Loading the document"
-        announce={region}
-        className="flex flex-col items-center justify-center py-16"
-      >
-        <div className="w-full max-w-md space-y-4 rounded-xl border border-ods-border bg-ods-card p-8 text-center">
-          <UnifiedSkeleton className="mx-auto h-16 w-16 rounded" />
-          <div className="space-y-2">
-            <UnifiedSkeleton className="mx-auto h-5 w-2/3 rounded" />
-            <UnifiedSkeleton className="mx-auto h-4 w-1/2 rounded" />
-          </div>
-          <UnifiedSkeleton className="h-10 w-full rounded" />
-        </div>
-      </LoadingRegion>
-    );
-  }
-
-  // PDF viewer has TWO buttons (Preview + Download); Sheets / Figma
-  // render ONE (Open / view-toggle). Default to one for unknown types.
-  const buttonCount = documentType === 'pdf' ? 2 : 1;
-
-  return (
-    <LoadingRegion label="Loading the document" announce={region} className="space-y-4">
-      {/* Header — matches the actual viewer's
-       *  `flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between`
-       *  (mobile-stacked, desktop-row). */}
-      <div className="flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between">
-        {/* Left: icon + title */}
-        <div className="flex min-w-0 flex-1 items-center gap-2">
-          <UnifiedSkeleton className="h-5 w-5 shrink-0 rounded" />
-          <UnifiedSkeleton className="h-6 w-2/3 rounded" />
-        </div>
-        {/* Right: 1 or 2 buttons. Mobile = full-width; desktop = auto. */}
-        <div className="flex w-full items-center gap-2 content-sm:w-auto">
-          {Array.from({ length: buttonCount }).map((_, i) => (
-            <UnifiedSkeleton key={i} className="h-10 w-full flex-1 rounded content-sm:w-32 content-sm:flex-initial" />
-          ))}
-        </div>
-      </div>
-      {/* Body: the iframe viewer's own loading box (its default `calc(100vh - 250px)` height). */}
-      <EmbedLoadingSkeleton region={false} />
-    </LoadingRegion>
-  );
-}