@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/src/components/features/video.tsx

@@ -136,65 +136,7 @@ function FilePlayerFallback({
   return <PosterBox poster={poster} className={className} priority={priority} fill />;
 }
 
-/**
- * A video nobody has asked to play yet starts as its poster and a play button, the way a YouTube video does
- * (`YouTubeFacade`): the player and hls.js are the largest script a page can load, and on a page whose video waits for
- * a click (a session, an episode, a release) loading them up front cost every visitor a long main-thread task before
- * anyone pressed play (CU-17tkuw5xp4q). A pointer, focus or touch on the button starts the download, so the player is
- * usually there by the click, and the click plays it with sound. A video that plays by itself (autoplay, hover
- * playback, a resumed position, chrome-less) or whose host drives it through a handle mounts its player as before.
- */
-function waitsForPlay(props: FilePlayerProps): boolean {
-  return (
-    !props.autoPlay &&
-    !props.autoPlayUnmuted &&
-    !props.playOnHover &&
-    props.playWhenHovered === undefined &&
-    props.startTime === undefined &&
-    !props.playerHandleRef &&
-    !props.chromeless
-  );
-}
-
-function FilePlayer({
-  title,
-  priority,
-  ...props
-}: FilePlayerProps & { title?: string; priority?: boolean }): React.ReactElement {
-  // Decided once: a video that started as a facade stays the player once pressed, whatever its props do later.
-  const [facade] = useState(() => waitsForPlay(props));
-  const [pressed, setPressed] = useState(false);
-  if (facade && !pressed) {
-    return (
-      <div className={cn('relative', props.className)} style={{ width: '100%', height: '100%' }}>
-        <FilePlayerFallback poster={props.poster} className="absolute inset-0" priority={priority} />
-        <Button
-          type="button"
-          variant="glyph"
-          size="wrap"
-          aria-label={title ? `Play: ${title}` : 'Play video'}
-          onPointerEnter={loadFilePlayer}
-          onFocus={loadFilePlayer}
-          onTouchStart={loadFilePlayer}
-          onClick={() => {
-            loadFilePlayer();
-            setPressed(true);
-          }}
-          className="group absolute inset-0 rounded-none"
-        >
-          <VideoPlayBadge
-            size="lg"
-            className="transition-transform duration-200 group-hover:scale-110 group-hover:text-ods-accent"
-          />
-        </Button>
-      </div>
-    );
-  }
-  // Pressed: the click is the visitor's gesture, so the player starts with sound (muted if the browser refuses).
-  return <LoadedFilePlayer {...props} priority={priority} {...(facade ? { autoPlayUnmuted: true } : {})} />;
-}
-
-function LoadedFilePlayer({ priority, ...props }: FilePlayerProps & { priority?: boolean }): React.ReactElement {
+function FilePlayer({ priority, ...props }: FilePlayerProps & { priority?: boolean }): React.ReactElement {
   // The player's component when its module has arrived (a loaded module, drawn through `createElement`).
   const arrived = useSyncExternalStore(subscribeToFilePlayer, loadedFilePlayer, noFilePlayer);
   if (arrived) return createElement(arrived, props);
@@ -284,7 +226,7 @@ export function Video(props: VideoProps): React.ReactElement | null {
   const layout = props.layout ?? 'native';
   // ONE switch: in a loading scope with no url yet (it is read) the video is its skeleton and no player is mounted;
   // a url it is given there is the page's own and plays as it is.
-  if (loading && !url) return <VideoSkeleton layout={layout} className={props.className} />;
+  if ((loading && !url) || props.loading) return <VideoSkeleton layout={layout} className={props.className} />;
   if (!url) return null;
 
   const effectiveKind = resolveKind(props, url);
@@ -327,7 +269,6 @@ export function Video(props: VideoProps): React.ReactElement | null {
       <FilePlayer
         url={url}
         poster={props.poster}
-        title={props.title}
         priority={props.priority}
         muted={props.muted}
         {...pickFilePlayback(props)}
@@ -365,7 +306,7 @@ function resolveKind(props: VideoProps, url: string): 'youtube' | 'file' {
  * A video while it is read: the player's box in the player's own layout wrapper (so its size and frame are the
  * player's), drawn as the skeleton's surface. `Video` draws it in a loading scope.
  */
-export function VideoSkeleton({ layout = 'native', className }: { layout?: VideoLayout; className?: string }) {
+function VideoSkeleton({ layout = 'native', className }: { layout?: VideoLayout; className?: string }) {
   return wrapWithLayout(<UnifiedSkeleton variant="rectangular" className={cn('h-full w-full', className)} />, layout);
 }
 
@@ -790,11 +731,12 @@ function YouTubeFacadeInner({
 
   return (
     <div className={wrapperClass} style={wrapperStyle}>
-      <button
+      <Button
+        variant="card"
         type="button"
         aria-label={`Play: ${title}`}
         onClick={() => setActivated(true)}
-        className="group absolute inset-0 m-0 cursor-pointer overflow-hidden rounded-lg border border-ods-border bg-ods-card p-0"
+        className="group absolute inset-0 h-full overflow-hidden"
       >
         <picture>
           <source type="image/webp" srcSet={posterWebp} />
@@ -824,7 +766,7 @@ function YouTubeFacadeInner({
             className="transition-transform duration-200 group-hover:scale-110 group-hover:text-ods-accent"
           />
         </div>
-      </button>
+      </Button>
     </div>
   );
 }

package/src/components/features/walkthrough-video.tsx

@@ -1342,6 +1342,6 @@ export function InlineWalkthroughVideo(props: InlineWalkthroughVideoProps): Reac
  * The inline video's loading state: the shared skeleton in the card's own box. The inline card draws it itself
  * until its player mounts; a host whose video data is still loading draws it in the same slot.
  */
-export function InlineWalkthroughVideoSkeleton({ className }: { className?: string }): React.ReactElement {
+function InlineWalkthroughVideoSkeleton({ className }: { className?: string }): React.ReactElement {
   return <UnifiedSkeleton className={cn(INLINE_CARD_BOX_CLASS, className)} />;
 }

package/src/components/filter-chip.tsx

@@ -2,6 +2,7 @@
 
 import { X } from 'lucide-react';
 import { cn } from '../utils/cn';
+import { Button } from './ui/button';
 
 // Unified FilterChip component for consistent styling across the application
 interface FilterChipProps {
@@ -83,7 +84,9 @@ export function FilterChip({
         {label}
       </span>
       {removable && onRemove && (
-        <button
+        <Button
+          variant="transparent"
+          size="icon-inline"
           type="button"
           onClick={e => {
             e.preventDefault();
@@ -91,24 +94,11 @@ export function FilterChip({
             if (!disabled) onRemove();
           }}
           disabled={disabled}
-          className={cn(
-            'flex h-4 w-4 items-center justify-center rounded-full md:h-4 md:w-4',
-            'shrink-0 transition-all duration-200',
-            'focus:outline-none focus:ring-2 focus:ring-offset-1 group-hover:scale-110',
-            variant === 'category'
-              ? 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface'
-              : variant === 'subcategory'
-                ? 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface'
-                : variant === 'tag'
-                  ? 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface'
-                  : 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface',
-            disabled && 'cursor-not-allowed opacity-50 hover:scale-100',
-          )}
           aria-label={`Remove ${label} filter`}
           tabIndex={disabled ? -1 : 0}
         >
-          <X className="h-2 w-2 md:h-2 md:w-2" />
-        </button>
+          <X />
+        </Button>
       )}
     </div>
   );

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',