@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/src/components/help-center-pages/download-apps-page.tsx

@@ -54,7 +54,7 @@ import { cn } from '../../utils/cn';
 import { formatUrlForDisplay } from '../../utils/format';
 import { DESKTOP_OSES, type DesktopOs } from '../../utils/visitor-os';
 import { FaqSection, pageFaqProps, type PageFaqSlot } from '../faq/faq-section';
-import { CommandBox, CommandBoxSkeleton } from '../features/command-box';
+import { CommandBox } from '../features/command-box';
 import { AppleLogoIcon } from '../icons-v2-generated/brand-logos/apple-logo-icon';
 import { WindowsLogoGreyIcon } from '../icons-v2-generated/brand-logos/windows-logo-grey-icon';
 import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
@@ -114,6 +114,11 @@ const cardsGridClass = (cards: number) => (cards > 1 ? CARDS_GRID_CLASS : 'grid
 const CARD_CLASS =
   'flex flex-col gap-[var(--spacing-system-lf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]';
 const CARD_HEADER_CLASS = 'flex items-center gap-[var(--spacing-system-sf)]';
+/** A card header's logo and name, a card's one line of copy and the scan card's text column: loaded and loading. */
+const CARD_ICON_CLASS = 'h-6 w-6 shrink-0 text-ods-text-secondary';
+const CARD_TITLE_CLASS = 'm-0 text-ods-text-primary text-h3';
+const CARD_LINE_CLASS = 'm-0 text-ods-text-secondary text-h4';
+const SCAN_TEXT_CLASS = 'flex flex-col gap-[var(--spacing-system-sf)]';
 const BUTTONS_CLASS = 'flex flex-wrap gap-[var(--spacing-system-sf)]';
 const COMMANDS_CLASS = 'flex flex-col gap-[var(--spacing-system-mf)]';
 const SCAN_CARD_CLASS = 'content-md:flex-row content-md:items-center content-md:justify-between';
@@ -141,8 +146,8 @@ function CardHeader({
 }) {
   return (
     <div className={CARD_HEADER_CLASS}>
-      {Icon && <Icon className="h-6 w-6 shrink-0 text-ods-text-secondary" />}
-      <h3 className="m-0 text-ods-text-primary text-h3">{title}</h3>
+      {Icon && <Icon className={CARD_ICON_CLASS} />}
+      <h3 className={CARD_TITLE_CLASS}>{title}</h3>
       {detail && <p className="m-0 ml-auto text-right text-ods-text-secondary text-h6">{detail}</p>}
     </div>
   );
@@ -245,10 +250,10 @@ function WebCard({ web }: { web: DownloadAppsWebOption }) {
       className={cn(CARD_CLASS, 'content-md:flex-row content-md:items-center content-md:justify-between')}
     >
       <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
-        <h2 id="download-web" className="m-0 text-ods-text-primary text-h3">
+        <h2 id="download-web" className={CARD_TITLE_CLASS}>
           {web.title}
         </h2>
-        <p className="m-0 text-ods-text-secondary text-h4">{web.description}</p>
+        <p className={CARD_LINE_CLASS}>{web.description}</p>
       </div>
       <div className="shrink-0">{web.action}</div>
     </section>
@@ -260,6 +265,9 @@ function WebCard({ web }: { web: DownloadAppsWebOption }) {
  * loaded grid's own rule), each with its real logo and name, the requirement line as a bar, the installer button's
  * own skeleton and one install command's box (a system the deployment does not offer drops out when it lands).
  */
+/** A loading command box's copy button: the button is drawn, there is nothing to copy yet. */
+const NO_COMMAND_TO_COPY = () => {};
+
 function SystemCardsSkeleton() {
   return (
     <div className={cardsGridClass(DESKTOP_OSES.length)}>
@@ -268,15 +276,15 @@ function SystemCardsSkeleton() {
         return (
           <div key={os} className={CARD_CLASS}>
             <div className={CARD_HEADER_CLASS}>
-              {Icon && <Icon className="h-6 w-6 shrink-0 text-ods-text-secondary" />}
-              <h3 className="m-0 text-ods-text-primary text-h3">{DESKTOP_OS_LABELS[os]}</h3>
+              {Icon && <Icon className={CARD_ICON_CLASS} />}
+              <h3 className={CARD_TITLE_CLASS}>{DESKTOP_OS_LABELS[os]}</h3>
               <TextLineSkeleton type="h6" className="ml-auto w-32" />
             </div>
             <div className={BUTTONS_CLASS}>
               <InteractiveSkeleton.Button size="default" className="w-56" />
             </div>
             <div className={COMMANDS_CLASS}>
-              <CommandBoxSkeleton lines={1} showCopy />
+              <CommandBox loading command="" maxLines={1} onCopy={NO_COMMAND_TO_COPY} />
             </div>
           </div>
         );
@@ -296,14 +304,14 @@ function MobileCardsSkeleton() {
         <div className={CARD_HEADER_CLASS}>
           <TextLineSkeleton type="h3" className="w-48" />
         </div>
-        <p className="m-0 text-ods-text-secondary text-h4">{MOBILE_STORE_CARD_LINE}</p>
+        <p className={CARD_LINE_CLASS}>{MOBILE_STORE_CARD_LINE}</p>
         <div className={STORE_BADGES_CLASS} inert aria-hidden>
           <AppStoreBadge className={STORE_BADGE_CLASS} />
           <GooglePlayBadge className={STORE_BADGE_CLASS} />
         </div>
       </div>
       <div className={cn(CARD_CLASS, SCAN_CARD_CLASS)}>
-        <div className="flex flex-col gap-[var(--spacing-system-sf)]">
+        <div className={SCAN_TEXT_CLASS}>
           <CardHeader title={MOBILE_SCAN_TITLE} />
           <TextLineSkeleton type="h4" lines={2} className="w-full" />
         </div>
@@ -389,7 +397,7 @@ export function DownloadAppsPage({
             <div className={cardsGridClass(mobile.install ? 2 : 1)}>
               <div className={CARD_CLASS}>
                 <CardHeader title={storeCardTitle(mobile)} />
-                <p className="m-0 text-ods-text-secondary text-h4">{MOBILE_STORE_CARD_LINE}</p>
+                <p className={CARD_LINE_CLASS}>{MOBILE_STORE_CARD_LINE}</p>
                 <StoreBadgeLinks
                   appStoreUrl={mobile.appStoreUrl}
                   googlePlayUrl={mobile.googlePlayUrl}
@@ -398,9 +406,9 @@ export function DownloadAppsPage({
               </div>
               {mobile.install && (
                 <div className={cn(CARD_CLASS, SCAN_CARD_CLASS)}>
-                  <div className="flex flex-col gap-[var(--spacing-system-sf)]">
+                  <div className={SCAN_TEXT_CLASS}>
                     <CardHeader title={MOBILE_SCAN_TITLE} />
-                    <p className="m-0 text-ods-text-secondary text-h4">
+                    <p className={CARD_LINE_CLASS}>
                       Point your camera at the code, or open {formatUrlForDisplay(mobile.install.url)} on your phone.
                     </p>
                   </div>

package/src/components/help-center-pages/index.ts

@@ -21,7 +21,7 @@ export { RoadmapPage, type RoadmapPageProps } from './roadmap-page';
 export { ProductReleasesListPage, type ProductReleasesListPageProps } from './product-releases-list-page';
 export { DeliveryPage, type DeliveryPageProps } from './delivery-page';
 export { OnboardingGuidesCatalogPage, type OnboardingGuidesCatalogPageProps } from './onboarding-guides-catalog-page';
-export { TrustCenterPage, TrustCenterPageSkeleton, type TrustCenterPageProps } from './trust-center-page';
+export { TrustCenterPage, type TrustCenterPageProps } from './trust-center-page';
 export { DownloadAppsPage, type DownloadAppsPageProps, type DownloadAppsWebOption } from './download-apps-page';
 
 // Existing full-pages re-exported for a single Help Center import site.

package/src/components/help-center-pages/trust-center-page.tsx

@@ -54,13 +54,13 @@ import { useScrollSpy } from '../docs/use-scroll-spy';
 import { FaqSection, type FaqSectionProps, type FaqSkeletonShape } from '../faq/faq-section';
 import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
-import { LoadingRegion } from '../loading/loading-region';
+import { LoadingFallback } from '../loading/loading-fallback';
 import { StickySectionNav } from '../navigation/sticky-section-nav';
 import { DataAttribution } from '../ui/data-attribution';
 import { DownloadButton } from '../ui/download-button';
 import { EntityImage } from '../ui/entity-image';
 import { LoadError } from '../ui/error-state';
-import { LoadingScope, useLoadingScope } from '../ui/loading-scope';
+import { useLoadingScope } from '../ui/loading-scope';
 import { StatusIndicator } from '../ui/status-indicator';
 import {
   AiSection,
@@ -305,9 +305,9 @@ export function TrustCenterPage({
   // layout: `contents`), announced once unless a host's scope already did.
   const inLoadingScope = (node: ReactNode, label: string): ReactNode =>
     loading ? (
-      <LoadingRegion label={label} announce={!scoped} className="contents">
-        <LoadingScope className="contents">{node}</LoadingScope>
-      </LoadingRegion>
+      <LoadingFallback label={label} className="contents">
+        {node}
+      </LoadingFallback>
     ) : (
       node
     );
@@ -404,26 +404,6 @@ export function TrustCenterPage({
   );
 }
 
-/**
- * @deprecated Render `<TrustCenterPage>` inside a `LoadingScope`: the page draws its own loading state (this is what
- * it does). Kept so hosts on an older release keep compiling; nothing in the lib uses it. `region` is ignored: the
- * page announces its own loading state.
- */
-// loading-standard-ok: deprecated re-export kept for external consumers
-export function TrustCenterPageSkeleton({
-  region: _region,
-  ...chrome
-}: Pick<TrustCenterPageProps, 'shell' | 'backButton' | 'title' | 'subtitle'> & {
-  /** Ignored: the page announces its own loading state. */
-  region?: boolean;
-}) {
-  return (
-    <LoadingScope>
-      <TrustCenterPage {...chrome} />
-    </LoadingScope>
-  );
-}
-
 /**
  * The page's chrome, ONE copy for the page and its skeleton: the standalone
  * `PageShell` or the host's padded box (`shell`), and the frozen `PageLayout`

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -58,8 +58,8 @@ import { ModalV2, ModalV2Content, ModalV2Header, ModalV2Title } from '../ui/moda
 import { ScrollShadow } from '../ui/scroll-fade';
 import { SearchInput } from '../ui/search-input';
 import { StackedRowsPanel, type PanelRow } from '../ui/stacked-rows-panel';
-import { StatusBadge, StatusBadgeSkeleton } from '../ui/status-badge';
-import { TabNavigation, TabNavigationSkeleton, type TabItem } from '../ui/tab-navigation';
+import { StatusBadge } from '../ui/status-badge';
+import { TabNavigation, type TabItem } from '../ui/tab-navigation';
 
 /** Monitoring `icon` vocabulary (owned by `TRUST_FRAMEWORK_MONITORING`) → icon component, ONE lookup. */
 const FRAMEWORK_ICONS: Record<TrustFrameworkMonitoringEntry['icon'], typeof ShieldCheckIcon> = {
@@ -665,19 +665,22 @@ const TRUST_PANEL_SHAPES: Record<
   ai: { mark: 'glyph', action: 'none', lines: { phone: 6, wide: 2 } },
 };
 
-function panelRowCount(rows: TrustPanelRows | undefined): number {
-  if (rows === undefined) return TRUST_PANEL_SKELETON_ROWS;
-  return typeof rows === 'number' ? rows : Math.max(rows.phone, rows.wide);
-}
-
 /**
  * A panel section while it is read: rows of the REAL `StackedRowsPanel` (its own row heights and borders, each row a
  * read list item) whose cells hold bars: the panel's mark, a value over its typical description, and the right-hand
  * badge or button in the page's `ACTION_COLUMN`.
  */
-function TrustPanelSkeleton({ panel, rows }: { panel: TrustCenterPanelId; rows?: TrustPanelRows }) {
+function TrustPanelSkeleton({
+  panel,
+  rows = TRUST_PANEL_SKELETON_ROWS,
+}: {
+  panel: TrustCenterPanelId;
+  rows?: TrustPanelRows;
+}) {
   const shape = TRUST_PANEL_SHAPES[panel];
-  const panelRows: PanelRow[] = Array.from({ length: panelRowCount(rows) }, (_, index) => ({
+  // The rows the host reads, or a typical panel; a count per width draws the larger, so neither width is short.
+  const length = typeof rows === 'number' ? rows : Math.max(rows.phone, rows.wide);
+  const panelRows: PanelRow[] = Array.from({ length }, (_, index) => ({
     id: `skeleton-${index}`,
     columns: [
       {
@@ -716,7 +719,7 @@ function TrustPanelSkeleton({ panel, rows }: { panel: TrustCenterPanelId; rows?:
               align: 'right' as const,
               content:
                 shape.action === 'badge' ? (
-                  <StatusBadgeSkeleton />
+                  <StatusBadge loading text="" />
                 ) : (
                   // The rows' action is a `size="small"` Button: its own size classes.
                   <InteractiveSkeleton.Button size="small" className="w-16" />
@@ -737,7 +740,7 @@ function ControlsSummarySkeleton() {
 function ControlsSectionSkeleton() {
   return (
     <div className={CONTROLS_SECTION_CLASS} style={controlsSectionStyle}>
-      <TabNavigationSkeleton count={CONTROLS_SKELETON_TABS} />
+      <TabNavigation loading tabs={[]} skeletonCount={CONTROLS_SKELETON_TABS} />
       <div className={CONTROLS_TOOLBAR_CLASS}>
         <p className={BODY_TEXT}>
           <ControlsSummarySkeleton />

package/src/components/index.ts

@@ -93,24 +93,16 @@ export * from './shared/delivery';
 // Legal-document shared component (privacy policy, terms of service)
 export * from './shared/legal-document';
 
-// Detail Page Skeleton (deprecated: kept for hosts on an older release)
-export { DetailPageSkeleton, type DetailPageSkeletonProps } from './shared/detail-page-skeleton';
-
 // Author byline card (end-of-article author description) — embeddable via
 // embed-shims + optional-runtime avatar proxying; hosts pass their own
 // fallbackBio copy (the hub uses defaultAuthorFallbackBio()).
-export {
-  ArticleAuthorByline,
-  ArticleAuthorBylineSkeleton,
-  type ArticleAuthorBylineProps,
-} from './shared/article-author-byline';
+export { ArticleAuthorByline, type ArticleAuthorBylineProps } from './shared/article-author-byline';
 
 // Read-only media gallery strip (horizontal scroll; images → lightbox, clips →
 // inline Video). Single source of truth for the detail-page media gallery —
 // used by product-release + What I Shipped detail pages.
 export {
   MediaGalleryStrip,
-  MediaGalleryStripSkeleton,
   MEDIA_GALLERY_STRIP_SKELETON_COUNT,
   type MediaGalleryStripItem,
   type MediaGalleryStripProps,

package/src/components/interactive-wrapper.tsx

@@ -237,26 +237,6 @@ export const InteractivePresets = {
     />
   )),
 
-  /**
-   * Button-like interactive element
-   */
-  Button: forwardRef<HTMLButtonElement, Omit<InteractiveWrapperProps, 'interactive' | 'as'>>((props, ref) => (
-    <InteractiveWrapper
-      ref={ref}
-      as="button"
-      interactive={{
-        enableAnimations: true,
-        enableColorShifts: true,
-        enableAccessibilityEnhancements: true,
-        enableHapticFeedback: true,
-        animations: true,
-      }}
-      className={cn('rounded-md bg-ods-accent px-4 py-2 font-medium text-ods-text-on-accent', props.className)}
-      role="button"
-      {...props}
-    />
-  )),
-
   /**
    * Navigation item with subtle interactions
    */
@@ -338,7 +318,6 @@ export const InteractivePresets = {
 
 // Export individual preset components with display names
 InteractivePresets.Card.displayName = 'InteractiveCard';
-InteractivePresets.Button.displayName = 'InteractiveButton';
 InteractivePresets.NavItem.displayName = 'InteractiveNavItem';
 InteractivePresets.Input.displayName = 'InteractiveInput';
 InteractivePresets.Toggle.displayName = 'InteractiveToggle';

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

@@ -4,6 +4,7 @@ import type React from 'react';
 import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils/cn';
 import { Chevron02LeftIcon } from '../icons-v2-generated/arrows/chevron-02-left-icon';
+import { Button } from '../ui/button';
 
 export interface BackButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   label?: string;
@@ -15,16 +16,14 @@ export interface BackButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
   href?: string;
 }
 
-const BACK_BUTTON_CLASS = cn(
-  'group inline-flex items-center justify-center self-start rounded-md',
-  'gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)]',
-  'text-ods-text-secondary hover:text-ods-text-primary',
-  'transition-colors duration-200',
-  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-);
+/** Its place in the page: the start of the column, above the title. The box is the `link` button's at `default` size. */
+const BACK_BUTTON_LAYOUT_CLASS = 'self-start';
 
-/** The footprint of a `BackButton`, for a loading skeleton that must not move the page. */
-export const BACK_BUTTON_SKELETON_CLASS = 'h-12 w-40 rounded-md';
+/**
+ * The footprint of a `BackButton`, for a loading skeleton that must not move the page: the `default` button's height
+ * (44px, 48px from md), and a typical label's width.
+ */
+export const BACK_BUTTON_SKELETON_CLASS = 'h-11 w-40 rounded-md md:h-12';
 
 /**
  * THE back navigation of a page: the chevron and its label, above the title.
@@ -54,19 +53,17 @@ export function BackButton({ label = 'Back', className, type = 'button', href, .
       ...shared
     } = props;
     return (
-      <Link
-        {...(shared as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
-        href={href}
-        className={cn(BACK_BUTTON_CLASS, className)}
-      >
-        {content}
-      </Link>
+      <Button asChild variant="link" noPaddingX className={cn(BACK_BUTTON_LAYOUT_CLASS, className)}>
+        <Link {...(shared as unknown as React.AnchorHTMLAttributes<HTMLAnchorElement>)} href={href}>
+          {content}
+        </Link>
+      </Button>
     );
   }
   return (
-    <button type={type} className={cn(BACK_BUTTON_CLASS, className)} {...props}>
+    <Button variant="link" noPaddingX type={type} className={cn(BACK_BUTTON_LAYOUT_CLASS, className)} {...props}>
       {content}
-    </button>
+    </Button>
   );
 }
 

package/src/components/layout/list-page-layout.tsx

@@ -6,12 +6,12 @@ import { useDebounce } from '../../hooks/ui/use-debounce';
 import { cn } from '../../utils/cn';
 import { Filter02Icon, SearchIcon } from '../icons-v2-generated';
 import { Button } from '../ui/button';
+import type { DataTableFilters } from '../ui/data-table/types';
 import { PageError } from '../ui/error-state';
 import { FilterModal, type FilterGroup } from '../ui/filter-modal';
 import { Input } from '../ui/input';
 import type { PageActionButton } from '../ui/page-actions';
 import type { SortConfig, SortDirection } from '../ui/sort-column-item';
-import type { TableFilters } from '../ui/table/types';
 import { ListPageContainer } from './page-container';
 
 export interface ListPageLayoutProps {
@@ -27,8 +27,8 @@ export interface ListPageLayoutProps {
   padding?: 'none' | 'sm' | 'md' | 'lg';
   background?: 'default' | 'card' | 'transparent';
   mobileFilterGroups?: FilterGroup[];
-  onMobileFilterChange?: (filters: TableFilters) => void;
-  currentMobileFilters?: TableFilters;
+  onMobileFilterChange?: (filters: DataTableFilters) => void;
+  currentMobileFilters?: DataTableFilters;
   mobileSortConfig?: SortConfig;
   onMobileSort?: (column: string, direction: SortDirection) => void;
   mobileFilterTitle?: string;
@@ -163,6 +163,7 @@ export function ListPageLayout({
           )}
         >
           <Input
+            userValue
             placeholder={searchPlaceholder}
             onChange={e => setLocalSearchValue(e.target.value)}
             value={localSearchValue}

package/src/components/layout/page-container.tsx

@@ -183,12 +183,12 @@ const PAGE_CONTAINER_TITLE_CLASS = 'text-ods-text-primary text-h2';
 const PAGE_CONTAINER_SUBTITLE_CLASS = 'text-ods-text-secondary text-h6';
 
 /** A page title that is read, while it is: one bar of the title's line, at its type step. */
-export function PageContainerTitleSkeleton({ className }: { className?: string }) {
+function PageContainerTitleSkeleton({ className }: { className?: string }) {
   return <TextLineSkeleton type="h2" className={cn('w-64 max-w-full', className)} />;
 }
 
 /** A page subtitle that is read, while it is: one bar of the subtitle's line. */
-export function PageContainerSubtitleSkeleton({ className }: { className?: string }) {
+function PageContainerSubtitleSkeleton({ className }: { className?: string }) {
   return <TextLineSkeleton type="h6" className={cn('w-80 max-w-full', className)} />;
 }
 

package/src/components/layout/page-heading.tsx

@@ -230,6 +230,13 @@ export interface SectionHeadingProps {
   tone?: HeadingAccentTone;
   /** Extra classes on the outer row. */
   className?: string;
+  /**
+   * The title and intro are read data still being read: the heading draws its own loading form (the eyebrow and the
+   * action for real, a bar at the heading's type step, `intro` lines at the intro's). `true` draws the title alone;
+   * an object also says how many intro lines the loaded heading has and the title bar's width. The heading renders on
+   * the server and cannot read a loading scope: a host passes its own switch (`useLoadingScope() || loading`).
+   */
+  loading?: boolean | { intro?: boolean | 1 | 2 | 3; titleWidth?: string };
 }
 
 /**
@@ -272,7 +279,24 @@ export function SectionHeading({
   platform,
   tone = 'accent',
   className,
+  loading,
 }: SectionHeadingProps) {
+  // loading-standard-ok(PROP_ONLY_SWITCH): a server component cannot read the scope; the host passes its own switch
+  if (loading) {
+    const shape = loading === true ? {} : loading;
+    return (
+      <SectionHeadingSkeleton
+        level={level}
+        eyebrow={eyebrow}
+        titleWidth={shape.titleWidth}
+        intro={shape.intro}
+        action={action}
+        platform={platform}
+        tone={tone}
+        className={className}
+      />
+    );
+  }
   const accentClassName = headingAccentClass(platform, tone);
   const layout = SECTION_HEADING_LAYOUT[level];
   const Tag = presentational ? 'div' : level === 'page' ? 'h1' : 'h2';
@@ -324,7 +348,7 @@ export function SectionHeading({
   );
 }
 
-export interface SectionHeadingSkeletonProps {
+interface SectionHeadingSkeletonProps {
   level?: 'page' | 'section';
   /** The eyebrow: static copy, drawn as it is. */
   eyebrow?: ReactNode;
@@ -344,7 +368,7 @@ export interface SectionHeadingSkeletonProps {
  * stack, the eyebrow for real, a one-line bar at the heading's type step and a bar per intro line at the intro's.
  * No heading element is drawn: the loaded heading is the page's one.
  */
-export function SectionHeadingSkeleton({
+function SectionHeadingSkeleton({
   level = 'section',
   eyebrow,
   titleWidth = 'w-2/3',

package/src/components/loading/index.ts

@@ -1,19 +1,7 @@
 'use client';
 
-// Page layout skeletons
-export {
-  SearchContainerSkeleton,
-  CategorySidebarSkeleton,
-  BreadcrumbSkeleton,
-  BreadcrumbLinkSkeleton,
-  ResultsHeaderSkeleton,
-  VendorGridSkeleton,
-} from './page-layout-skeleton';
-
-// Card skeleton components
-export { CardSkeleton, CardSkeletonGrid } from './card-skeleton';
-
-// Unified skeleton components
+// The skeleton PARTS a component draws its own loading form from (a component switches itself; nothing here is a
+// whole component's or a whole view's skeleton).
 export {
   UnifiedSkeleton,
   TextSkeleton,
@@ -25,29 +13,11 @@ export {
 // New unified loading components
 export { ContentLoadingContainer, useContentLoading } from '../content-loading-container';
 
-// Profile system loading skeleton
-export { ProfileLoadingSkeleton } from '../profile/ProfileLoadingSkeleton';
-
-export { CategoryCardSkeleton } from './category-card-skeleton';
-
-// Deprecated (kept for hosts on an older release; a component draws its own skeleton now)
-export { MspProfileFormSkeleton } from './msp-profile-form-skeleton';
-export { SettingsFormSkeleton, type SettingsFormSkeletonProps } from './settings-form-skeleton';
-export { CategoryVendorSelectorSkeleton } from './category-vendor-selector-skeleton';
-export { BlogCardGridSkeleton, SlackCommunitySkeleton } from './deprecated-layout-skeletons';
-
-export { WizardLayoutSkeleton } from './wizard-layout-skeleton';
-
 // Note: OpenmspHeartbeatLoader is a client-only component and should be
 // imported directly from "./openmsp-heartbeat" in client components. Do NOT
 // export it here, otherwise server components that import this index will
 // break due to client-only code.
 
 export { LoadingRegion, type LoadingRegionProps } from './loading-region';
-
-export { MarginReportSkeleton } from './margin-report-skeleton';
-
-// Organization & Device skeleton components
-export { OrganizationIconSkeleton } from './organization-icon-skeleton';
-export { OrganizationCardSkeleton, OrganizationCardSkeletonGrid } from './organization-card-skeleton';
-export { DeviceCardSkeleton, DeviceCardSkeletonGrid } from './device-card-skeleton';
+export { LoadingStatus } from '../ui/loading-scope';
+export { LoadingFallback, LoadingSuspense } from './loading-fallback';

package/src/components/loading/loading-fallback.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { type ElementType, type ReactNode, Suspense } from 'react';
+import { AnnouncedLoadingScope } from '../ui/loading-scope';
+
+/**
+ * A Suspense fallback drawn by the components themselves: the SAME component the boundary waits on, rendered in a
+ * `LoadingScope`, where it draws its own skeleton and reads nothing. A page never picks a component's
+ * `<Name>Skeleton`:
+ *
+ *   <Suspense fallback={<LoadingFallback><Dashboard /></LoadingFallback>}><Dashboard /></Suspense>
+ *
+ * ONE element: the scope's own (`LoadingScope` with `as`, `className`): busy, inert and hidden from assistive
+ * technology, adding no wrapper a flex parent would lay out. The status that announces it once sits beside it
+ * (visually hidden, outside the hidden region, so it is still read), and is left out inside an outer scope, which has
+ * already said it. `status={false}` leaves the status out: an inline part (a chip, a mention in a sentence) whose
+ * loading the surrounding region already announces, or that is too small to announce.
+ */
+export function LoadingFallback({
+  label = 'Loading the page',
+  status = true,
+  as,
+  className,
+  children,
+}: {
+  label?: string;
+  /** Announce the loading state (default). `false`: an inline part, announced by its region or not at all. */
+  status?: boolean;
+  /** The region's element (a `contents` box keeps a flex parent's layout, e.g. inside a modal). */
+  as?: ElementType;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <AnnouncedLoadingScope label={label} status={status} as={as} className={className}>
+      {children}
+    </AnnouncedLoadingScope>
+  );
+}
+
+/**
+ * The one Suspense boundary whose fallback is its own children in a loading scope: what every screen wrote out as
+ * `<Suspense fallback={<LoadingFallback label={…}>{x}</LoadingFallback>}>{x}</Suspense>`, with the child twice.
+ *
+ *   <LoadingSuspense label="Loading the tenants"><TenantList /></LoadingSuspense>
+ *   <LoadingSuspense label="Loading the script" fallback={<ScriptView script={null} />}><ScriptReader /></LoadingSuspense>
+ *   <LoadingSuspense status={false} as="span"><MentionChip id={id} /></LoadingSuspense>
+ */
+export function LoadingSuspense({
+  label,
+  status,
+  as,
+  className,
+  fallback,
+  children,
+}: {
+  label?: string;
+  /** `false`: no announcement (an inline part); see `LoadingFallback`. */
+  status?: boolean;
+  as?: ElementType;
+  className?: string;
+  /**
+   * What the boundary draws while its children suspend, when that is not the children themselves (a reader whose view
+   * is a separate component: `fallback={<ThingView thing={null} />}`). Drawn in the same loading scope. Default: the
+   * children.
+   */
+  fallback?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <LoadingFallback label={label} status={status} as={as} className={className}>
+          {fallback ?? children}
+        </LoadingFallback>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}

package/src/components/loading/loading-region.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { useLoadingScope } from '../ui/loading-scope';
+import { LoadingStatus, useLoadingScope } from '../ui/loading-scope';
 
 /**
  * THE container of a loading state: the one thing a screen reader hears while it loads.
@@ -49,14 +49,13 @@ export function LoadingRegion({
   const announce = announceGiven && !inScope;
   // One tree for both states: `children` keeps its slot whether or not the status is drawn, so an
   // `announce` that flips at runtime does not remount the content (and drop its state and focus).
+  // The status comes AFTER the content: it takes no space (visually hidden, absolutely positioned), but placed first
+  // in a `space-y-*` stack it made the content the second child, which takes the stack's top margin, so a region
+  // that announced stood a gap taller than the same region inside a loading scope (a jump at hydration).
   return (
     <Tag aria-busy={announce ? 'true' : undefined} className={className} {...props}>
-      {announce && status && (
-        <span role="status" aria-live="polite" className="sr-only">
-          {label}
-        </span>
-      )}
       {children}
+      {announce && status && <LoadingStatus label={label} />}
     </Tag>
   );
 }