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

package/src/components/embeds/claude-embed.tsx

@@ -19,7 +19,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';
 }
 
 const KIND_HEADING: Record<ClaudeEmbedKind, string> = {
@@ -51,7 +51,7 @@ const KIND_HEADING: Record<ClaudeEmbedKind, string> = {
  * a Claude Design url (no embed route), an artifact whose author has not
  * allow-listed this host, or an http host (mixed content).
  */
-export function ClaudeEmbed({ url, kind = 'artifact', title, height, loading = 'lazy' }: ClaudeEmbedProps) {
+export function ClaudeEmbed({ url, kind = 'artifact', title, height, iframeLoading = 'lazy' }: ClaudeEmbedProps) {
   // Mirror detection lives in `useClaudeMirrorSrc` (derive from
   // EndpointsRuntime + 1-byte ranged probe + background revalidation) — this
   // component stays presentational.
@@ -70,7 +70,7 @@ export function ClaudeEmbed({ url, kind = 'artifact', title, height, loading = '
       icon={<ClaudeIcon className="h-5 w-5 shrink-0" />}
       title={title?.trim() || KIND_HEADING[kind]}
       titleVariant="h6"
-      isLoading={isProbing}
+      resolving={isProbing}
       actions={
         <Button
           variant="outline"
@@ -89,7 +89,7 @@ export function ClaudeEmbed({ url, kind = 'artifact', title, height, loading = '
       // (unlike Figma's player) — the shell provides the toggle for both
       // the claude.ai `/embed` route and a mirror.
       fullscreenControl
-      loading={loading}
+      iframeLoading={iframeLoading}
       height={height}
       // Same frame contract Figma gets — an artifact is a real app: it copies
       // to the clipboard and can go fullscreen.

package/src/components/embeds/embed-iframe.tsx

@@ -43,8 +43,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;
   /**
@@ -74,7 +76,8 @@ export function EmbedIframe({
   height,
   allow,
   referrerPolicy,
-  loading,
+  iframeLoading,
+  loading = false,
   allowFullScreen,
   sandbox,
 }: EmbedIframeProps) {
@@ -87,7 +90,7 @@ export function EmbedIframe({
   const isLoaded = loadedSrc === src;
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const handleLoad = useCallback(() => setLoadedSrc(src), [src]);
-  const held = useLoadingScope();
+  const held = useLoadingScope() || loading;
 
   useEffect(() => {
     const iframe = iframeRef.current;
@@ -123,7 +126,7 @@ export function EmbedIframe({
           onLoad={handleLoad}
           allow={allow}
           referrerPolicy={referrerPolicy}
-          loading={loading}
+          loading={iframeLoading}
           allowFullScreen={allow?.includes('fullscreen') ? undefined : allowFullScreen}
           sandbox={sandbox}
         />

package/src/components/embeds/embed-viewer-frame.tsx

@@ -5,6 +5,7 @@ import type React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn';
 import { FullscreenSwitchController } from '../../utils/fullscreen-switch';
+import { InteractiveSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
 import { Button } from '../ui/button/button';
 import { useLoadingScope } from '../ui/loading-scope';
 import { EmbedIframe, EmbedLoadingSkeleton } from './embed-iframe';
@@ -40,21 +41,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`. */
@@ -66,6 +68,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 function EmbedViewerFrame({
@@ -74,19 +78,23 @@ export 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,
+  loadingActionCount = 1,
 }: EmbedViewerFrameProps) {
-  // ONE switch: a page's loading scope, or the viewer still resolving where its frame points.
-  const isLoading = useLoadingScope() || !!isLoadingGiven;
+  // ONE switch for the whole frame (header included): a page's loading scope, or the standard `loading` prop. The body
+  // alone also waits while the viewer resolves where its frame points.
+  const loadingForm = useLoadingScope() || loadingGiven;
+  const isLoading = loadingForm || resolving;
   const frameRef = useRef<HTMLDivElement>(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -127,7 +135,11 @@ export function EmbedViewerFrame({
       <div className="flex flex-col gap-3 content-sm:flex-row content-sm:items-center content-sm:justify-between">
         <div className="flex min-w-0 items-center gap-2">
           {icon}
-          {titleVariant === 'h3' ? (
+          {loadingForm ? (
+            // The document is being read: its name is not known yet. (A viewer still resolving its frame, with a
+            // known title, keeps it.)
+            <TextLineSkeleton type={titleVariant} className="w-48 max-w-full" />
+          ) : titleVariant === 'h3' ? (
             <h2 className="truncate text-ods-text-primary text-h3">{title}</h2>
           ) : (
             <span className="truncate font-semibold text-ods-text-primary text-h6">{title}</span>
@@ -140,7 +152,15 @@ export function EmbedViewerFrame({
             fullscreen toggle, `actions` renders EXACTLY as before — the
             wrapper exists only when the toggle joins it, so pre-existing
             viewers (figma/pdf/sheets) are byte-identical. */}
-        {fullscreenControl && src ? (
+        {loadingForm ? (
+          // The actions point at the document being read: each its button's loading form, in the actions' row.
+          <div className="flex w-full items-center gap-2 content-sm:w-auto">
+            {Array.from({ length: loadingActionCount }, (_, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: loading buttons never reorder
+              <InteractiveSkeleton.Button key={i} size="small-legacy" className="flex-1 content-sm:flex-initial" />
+            ))}
+          </div>
+        ) : fullscreenControl && src ? (
           <div className="flex flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center">
             {actions}
             <Button
@@ -169,7 +189,7 @@ export function EmbedViewerFrame({
           height={isFullscreen ? 'calc(100vh - 96px)' : height}
           allow={allow}
           allowFullScreen={allowFullScreen}
-          loading={loading}
+          iframeLoading={iframeLoading}
           sandbox={sandbox}
         />
       ) : isLoading ? (

package/src/components/embeds/figma-embed.tsx

@@ -19,7 +19,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;
 }
 
 type SlidesView = 'present' | 'browse';
@@ -42,7 +44,9 @@ function SlidesViewToggle({ view, onChange }: { view: SlidesView; onChange: (v:
         if (v && v !== view) onChange(v as SlidesView);
       }}
       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"
+      // The whole control is one button tall (40px, border and padding included), so the header row is the same height
+      // with or without it, loading and loaded alike.
+      className="flex h-10 shrink-0 items-center gap-0.5 rounded-lg border border-ods-border bg-ods-card p-0.5"
     >
       {options.map(({ key, label, Icon }) => {
         const active = view === key;
@@ -51,7 +55,7 @@ function SlidesViewToggle({ view, onChange }: { view: SlidesView; onChange: (v:
             key={key}
             value={key}
             aria-label={label}
-            className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 transition-colors text-h6 ${
+            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'
@@ -80,7 +84,7 @@ function SlidesViewToggle({ view, onChange }: { view: SlidesView; onChange: (v:
  * plain ReactNode) — flipping it recomputes `embedSrc`, and the frame's
  * `EmbedIframe` remounts on the new src exactly as before the extraction.
  */
-export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedProps) {
+export function FigmaEmbed({ url, title, height, iframeLoading = 'lazy', loading = false }: FigmaEmbedProps) {
   const [view, setView] = useState<SlidesView>('present');
   const isSlides = url ? isFigmaSlidesUrl(url) : false;
   const embedSrc = url ? toFigmaEmbedUrl(url, { slidesView: view }) : null;
@@ -124,6 +128,7 @@ export function FigmaEmbed({ url, title, height, loading = 'lazy' }: FigmaEmbedP
       }
       src={embedSrc}
       allow="clipboard-write; clipboard-read; fullscreen"
+      iframeLoading={iframeLoading}
       loading={loading}
       height={height}
       allowFullScreen

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/features/status-filter-component.tsx

@@ -43,6 +43,12 @@ export interface StatusFilterComponentProps {
   showAll?: boolean;
   /** The options are read on the client and have not arrived: the row draws its skeleton, as in a loading scope. */
   loading?: boolean;
+  /**
+   * The options' labels are known but their counts are not ("Active" now, "Active (33)" once read): while loading,
+   * each option is drawn as its real button with a bar where the count goes, so the row keeps its width and, on a
+   * narrow screen, wraps onto the same lines as the loaded row.
+   */
+  countsPending?: boolean;
 }
 
 /** The row's frame, label and controls, read by the row and by its skeleton, so the skeleton is the row's size. */
@@ -74,6 +80,7 @@ export function StatusFilterComponent({
   label = 'Status',
   showAll = true,
   loading = false,
+  countsPending = false,
 }: StatusFilterComponentProps) {
   // Filter out 'all' from options since we render it separately
   const filteredOptions = statusOptions.filter(option => option.value !== 'all');
@@ -84,6 +91,7 @@ export function StatusFilterComponent({
         label={label}
         // Options the page states itself are its own words: drawn for real. Read ones arrive empty: boxes.
         options={filteredOptions.length > 0 ? filteredOptions.map(option => option.label) : undefined}
+        countsPending={countsPending}
         showAll={showAll}
         showCount={showCount}
         className={className}
@@ -142,6 +150,7 @@ function StatusFilterComponentSkeleton({
   label = 'Status',
   options,
   pills = STATUS_FILTER_SKELETON_PILLS,
+  countsPending = false,
   showAll = true,
   showCount = false,
   className,
@@ -150,6 +159,8 @@ function StatusFilterComponentSkeleton({
   /** Option labels the page states itself: drawn as real buttons (in place of `pills` boxes). */
   options?: string[];
   pills?: number;
+  /** Each option's count is still being read: a bar the width of " (00)" follows its label. */
+  countsPending?: boolean;
   showAll?: boolean;
   showCount?: boolean;
   className?: string;
@@ -182,6 +193,10 @@ function StatusFilterComponentSkeleton({
               tabIndex={-1}
             >
               {option}
+              {/* With the button's gap before it, a 2ch bar is the width of the " (00)" the count adds. */}
+              {countsPending && (
+                <TextLineSkeleton type="inherit" as="span" className="inline-block w-[2ch] align-top" />
+              )}
             </Button>
           ))
         : Array.from({ length: pills }, (_, index) => (

package/src/components/layout/back-button.tsx

@@ -14,6 +14,28 @@ export interface BackButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
    * prefetch, right-click); without it, a button that runs `onClick`.
    */
   href?: string;
+  /**
+   * Go back the way the browser's own back button does: when this tab has an earlier page of the same site, the
+   * click returns to it (with the address it had: its filters, page and sort), and `href` is only where a visitor
+   * who arrived from outside (a shared link, a new tab) goes. Needs `href`.
+   */
+  historyBack?: boolean;
+}
+
+/** The earlier page of this tab, when it is a page of the same site (the Navigation API, else the referrer). */
+function hasSameSiteHistory(): boolean {
+  if (typeof window === 'undefined') return false;
+  const nav = (window as Window & { navigation?: { canGoBack?: boolean; currentEntry?: { index: number } | null } })
+    .navigation;
+  // The Navigation API lists only this tab's same-origin entries, so an earlier one is a page of this site.
+  if (nav && typeof nav.canGoBack === 'boolean') return nav.canGoBack && (nav.currentEntry?.index ?? 0) > 0;
+  try {
+    return (
+      window.history.length > 1 && !!document.referrer && new URL(document.referrer).origin === window.location.origin
+    );
+  } catch {
+    return false;
+  }
 }
 
 /** Its place in the page: the start of the column, above the title. The box is the `link` button's at `default` size. */
@@ -30,7 +52,14 @@ export const BACK_BUTTON_SKELETON_CLASS = 'h-11 w-40 rounded-md md:h-12';
  * Every detail page renders this one (through `PageLayout`'s `backButton` or
  * directly), never a hand-built link.
  */
-export function BackButton({ label = 'Back', className, type = 'button', href, ...props }: BackButtonProps) {
+export function BackButton({
+  label = 'Back',
+  className,
+  type = 'button',
+  href,
+  historyBack = false,
+  ...props
+}: BackButtonProps) {
   const content = (
     <>
       <Chevron02LeftIcon className="size-6 shrink-0" />
@@ -54,7 +83,30 @@ export function BackButton({ label = 'Back', className, type = 'button', href, .
     } = props;
     return (
       <Button asChild variant="link" noPaddingX className={cn(BACK_BUTTON_LAYOUT_CLASS, className)}>
-        <Link {...(shared as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)} href={href}>
+        <Link
+          {...(shared as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
+          href={href}
+          onClick={
+            historyBack
+              ? (event: React.MouseEvent<HTMLAnchorElement>) => {
+                  (shared.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined)?.(event);
+                  // A modified click (new tab, new window) keeps the link's own behaviour.
+                  if (
+                    event.defaultPrevented ||
+                    event.button !== 0 ||
+                    event.metaKey ||
+                    event.ctrlKey ||
+                    event.shiftKey ||
+                    event.altKey
+                  )
+                    return;
+                  if (!hasSameSiteHistory()) return;
+                  event.preventDefault();
+                  window.history.back();
+                }
+              : (shared.onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined)
+          }
+        >
           {content}
         </Link>
       </Button>

package/src/components/loading/unified-skeleton.tsx

@@ -179,11 +179,16 @@ export function TextLineSkeleton({ type, lines = 1, as = 'div', width, className
   );
 }
 
-/** The lines a text run takes per breakpoint: on a phone, from `content-md`, and from `content-lg`. */
+/**
+ * THE lines a text run takes per width: on a phone, from `content-md`, from `content-lg`, and from `content-xl` where
+ * a wide screen wraps it differently (`lg` when not given). Every loading text whose length changes with the width
+ * states its lines in this one shape.
+ */
 export interface TextLinesByBreakpoint {
   phone: number;
   md: number;
   lg: number;
+  xl?: number;
 }
 
 /**
@@ -215,8 +220,19 @@ export function TextLinesByBreakpointSkeleton({
         type={type}
         as={as}
         lines={lines.lg}
-        className={cn('hidden w-full content-lg:flex', className)}
+        className={cn(
+          lines.xl === undefined ? 'hidden w-full content-lg:flex' : 'hidden w-full content-lg:flex content-xl:hidden',
+          className,
+        )}
       />
+      {lines.xl === undefined ? null : (
+        <TextLineSkeleton
+          type={type}
+          as={as}
+          lines={lines.xl}
+          className={cn('hidden w-full content-xl:flex', className)}
+        />
+      )}
     </>
   );
 }

package/src/components/ui/file-manager/file-manager-table.tsx

@@ -57,10 +57,15 @@ export function FileManagerTable({
     // The height its parent gives it, both forms: the rows scroll inside, under the header. Not
     // the window's: whatever is below the parent (a docked composer, a page's padding) would
     // hide the last rows under it. A parent of no definite height lets the table grow with its rows.
-    <div className={cn('flex h-full flex-col rounded-lg border border-ods-border bg-ods-bg', className)}>
+    // `overflow-hidden` rounds the header and the rows at the border's inner curve: a child rounded
+    // to the frame's own radius sits 1px inside it and leaves a sliver of the frame's fill at each
+    // corner. Nothing floats out of the table (the row menu is portalled).
+    <div
+      className={cn('flex h-full flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-bg', className)}
+    >
       {/* ONE header in both forms: the column labels are copy, and while the folder is read the select-all box is the
           real checkbox, inert. */}
-      <div className="flex h-12 items-center rounded-t-lg border-b border-ods-border bg-ods-bg-surface px-4">
+      <div className="flex h-12 items-center border-b border-ods-border bg-ods-bg-surface px-4">
         {showCheckboxes && (
           <div
             className={FILE_MANAGER_CHECKBOX_CELL_CLASS}
@@ -84,7 +89,7 @@ export function FileManagerTable({
         <div className={FILE_MANAGER_ACTIONS_CELL_BOX_CLASS}>{/* Space for action buttons */}</div>
       </div>
 
-      <div className="flex-1 divide-y divide-ods-border overflow-auto rounded-b-lg">
+      <div className="flex-1 divide-y divide-ods-border overflow-auto">
         {loading ? (
           // A folder listing has no page size: a typical folder's rows, each the row's own loading form.
           <LoadingItems count={FILE_MANAGER_SKELETON_ROWS}>