@flamingo-stack/openframe-frontend-core 0.0.748 → 0.0.749

package/src/components/loading/device-card-skeleton.tsx

@@ -1,68 +1,66 @@
 import { cn } from '../../utils/cn';
-import { OrganizationIconSkeleton } from './organization-icon-skeleton';
+import { LoadingRegion } from './loading-region';
+import { UnifiedSkeleton } from './unified-skeleton';
 
 export interface DeviceCardSkeletonProps {
   /**
    * Additional CSS classes
    */
   className?: string;
+  /** Hold `DeviceCard`'s "more" button (its `actions.moreButton`). Default `true`. */
+  moreButton?: boolean;
+  /**
+   * Hold the box of `DeviceCard`'s `actions.detailsButton.component` with these size classes
+   * (e.g. `'h-12 w-[88px]'`). Omit when the card has no details button.
+   */
+  detailsButtonClassName?: string;
 }
 
 /**
- * DeviceCardSkeleton - Loading skeleton matching DeviceCard exact layout
+ * DeviceCardSkeleton: the loading box of `DeviceCard` (`ui/device-card.tsx`), box for box:
+ * the same container classes, then
+ * - Row 1: the bordered device-icon box, the OS icon and name line (`text-h4`) over the
+ *   organization line (`text-h6`), the bordered "more" button (`moreButton`) and/or the details
+ *   button's box (`detailsButtonClassName`);
+ * - Row 2: the status tag (`Tag`'s `h-8`) and the "Last seen" line (`text-h6`).
  *
- * Matches the structure of DeviceCard:
- * - Row 1: Device icon + Device name + More button
- * - Row 2: OS badge + Organization icon + Organization name
- * - Row 3: Status badge + Last seen
- *
- * Prevents layout jumps by matching exact dimensions.
+ * The loaded card replaces it with no movement.
  */
-export function DeviceCardSkeleton({ className }: DeviceCardSkeletonProps) {
+export function DeviceCardSkeleton({ className, moreButton = true, detailsButtonClassName }: DeviceCardSkeletonProps) {
   return (
     <div
-      className={cn('h-full rounded-[6px] border border-ods-border bg-ods-card', className)}
-      role="status"
-      aria-label="Loading device card"
+      className={cn(
+        'overflow-clip rounded-[6px] border border-ods-border bg-ods-card',
+        'flex flex-col gap-4 p-4',
+        className,
+      )}
     >
-      {/* Row 1: Device icon + Device name + More button */}
-      <div className="flex items-center gap-4 px-4 py-3">
-        {/* Device type icon (8x8 container) */}
-        <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] border border-ods-border bg-ods-bg">
-          <div className="h-4 w-4 animate-pulse rounded bg-ods-border" />
+      {/* Row 1: device icon | name over organization | more button */}
+      <div className="flex w-full items-center gap-4">
+        <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-2">
+          <UnifiedSkeleton className="size-4 rounded" />
         </div>
-
-        {/* Device name */}
-        <div className="min-w-0 flex-1">
-          <div className="h-6 w-3/4 animate-pulse rounded bg-ods-border" />
-        </div>
-
-        {/* More button */}
-        <div className="h-12 w-12 flex-shrink-0 animate-pulse rounded-[6px] bg-ods-border" />
-      </div>
-
-      {/* Row 2: OS badge + Organization */}
-      <div className="flex items-center gap-4 px-4 py-2">
-        {/* OS badge */}
-        <div className="h-6 w-24 flex-shrink-0 animate-pulse rounded bg-ods-border" />
-
-        {/* Organization icon */}
-        <OrganizationIconSkeleton size="sm" />
-
-        {/* Organization name */}
-        <div className="min-w-0 flex-1">
-          <div className="h-5 w-1/2 animate-pulse rounded bg-ods-border" />
+        <div className="flex min-w-0 flex-1 flex-col justify-center">
+          {/* OS icon (16px) + name, one `text-h4` line */}
+          <div className="flex items-center gap-1 text-h4">
+            <UnifiedSkeleton className="size-4 shrink-0 rounded" />
+            <UnifiedSkeleton className="h-[1lh] w-3/4 rounded" />
+          </div>
+          <UnifiedSkeleton className="h-[1lh] w-1/2 rounded text-h6" />
         </div>
+        {moreButton && (
+          <div className="flex shrink-0 items-center justify-center rounded-[6px] border border-ods-border p-3">
+            <UnifiedSkeleton className="size-6 rounded" />
+          </div>
+        )}
+        {detailsButtonClassName && <UnifiedSkeleton className={cn('shrink-0 rounded-[6px]', detailsButtonClassName)} />}
       </div>
 
-      {/* Row 3: Status badge + Last seen */}
-      <div className="flex items-center gap-4 px-4 py-2">
-        {/* Status badge */}
-        <div className="h-6 w-20 flex-shrink-0 animate-pulse rounded-full bg-ods-border" />
-
-        {/* Last seen */}
-        <div className="flex-1">
-          <div className="h-5 w-40 animate-pulse rounded bg-ods-border" />
+      {/* Row 2: status tag | last seen */}
+      <div className="flex w-full items-center gap-2">
+        <UnifiedSkeleton className="h-8 w-20 shrink-0 rounded-md" />
+        <div className="min-w-0 flex-1 text-h6">
+          <UnifiedSkeleton className="h-[1lh] w-40 max-w-full rounded" />
         </div>
       </div>
     </div>
@@ -78,16 +76,25 @@ export function DeviceCardSkeleton({ className }: DeviceCardSkeletonProps) {
  * - Desktop (lg): 3 columns
  * - Large (xl): 4 columns
  */
-export function DeviceCardSkeletonGrid({ count = 12, className }: { count?: number; className?: string }) {
+export function DeviceCardSkeletonGrid({
+  region = true,
+  count = 12,
+  className,
+}: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
+  count?: number;
+  className?: string;
+}) {
   return (
-    <div
+    <LoadingRegion
+      label="Loading devices"
+      announce={region}
       className={cn('grid grid-cols-1 gap-4 content-md:grid-cols-2 content-lg:grid-cols-4', className)}
-      role="status"
-      aria-label={`Loading ${count} device cards`}
     >
       {Array.from({ length: count }, (_, index) => (
         <DeviceCardSkeleton key={index} />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/loading/index.ts

@@ -7,6 +7,7 @@ export {
   SearchContainerSkeleton,
   CategorySidebarSkeleton,
   BreadcrumbSkeleton,
+  BreadcrumbLinkSkeleton,
   ResultsHeaderSkeleton,
   TwoColumnLayoutSkeleton,
   ArticleLayoutSkeleton,
@@ -26,25 +27,13 @@ export { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } fro
 // New unified loading components
 export { ContentLoadingContainer, useContentLoading } from '../content-loading-container';
 
-// Content skeleton components
-export {
-  ParagraphSkeleton,
-  ListSkeleton,
-  TableSkeleton,
-  FormSkeleton,
-  NavigationSkeleton,
-  ProfileSkeleton,
-  CommentSkeleton,
-  FeatureListSkeleton,
-  TimelineSkeleton,
-  PricingSkeleton,
-} from './content-skeleton';
-
 // Profile system loading skeleton
 export { ProfileLoadingSkeleton } from '../profile/ProfileLoadingSkeleton';
 
 export { MspProfileFormSkeleton } from './msp-profile-form-skeleton';
 
+export { SettingsFormSkeleton, type SettingsFormSkeletonProps } from './settings-form-skeleton';
+
 export { CategoryCardSkeleton } from './category-card-skeleton';
 
 export { CategoryVendorSelectorSkeleton } from './category-vendor-selector-skeleton';
@@ -56,12 +45,9 @@ export { WizardLayoutSkeleton } from './wizard-layout-skeleton';
 // export it here, otherwise server components that import this index will
 // break due to client-only code.
 
-export { MarginReportSkeleton } from './margin-report-skeleton';
-
-export { UsersGridSkeleton } from './users-grid-skeleton';
+export { LoadingRegion, type LoadingRegionProps } from './loading-region';
 
-// Dynamic ODS-aware skeleton components
-export { DynamicSkeleton, SkeletonPresets, PlatformSkeletonContainer, ProgressiveSkeleton } from '../dynamic-skeleton';
+export { MarginReportSkeleton } from './margin-report-skeleton';
 
 // Organization & Device skeleton components
 export { OrganizationIconSkeleton } from './organization-icon-skeleton';

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

@@ -0,0 +1,60 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * THE container of a loading state: the one thing a screen reader hears while it loads.
+ *
+ * Skeleton bars (`UnifiedSkeleton`, `TextHold`) are decoration and are hidden from assistive technology;
+ * a page with forty bars must not announce "loading" forty times. The region around them says it ONCE:
+ * `aria-busy` on the container, and one polite status with the label. Few screen readers honour
+ * `aria-busy` alone, so the status is what is actually read. When the content replaces the region, the
+ * status goes with it.
+ *
+ * Put it on the top of a loading state (a page's skeleton, a card grid's, a Suspense fallback), never on
+ * every card inside it: nested regions would announce again.
+ */
+export interface LoadingRegionProps extends HTMLAttributes<HTMLElement> {
+  /** What is loading, read once by a screen reader. */
+  label?: string;
+  /** The container element, so the region keeps the layout element it replaces (a `section`, a `li`, a `span` in text). */
+  as?: ElementType;
+  /**
+   * `false`: only the container is drawn (no `aria-busy`, no status), for a loading state rendered inside
+   * another region, which announces for both. Components expose it as their `region` / `loadingRegion` prop.
+   * Default `true`.
+   */
+  announce?: boolean;
+  /**
+   * `false`: `aria-busy` without a status of its own, for a container whose loading is already announced by a
+   * status elsewhere (a table footer's "Loading more results"). Default `true`.
+   */
+  status?: boolean;
+  children?: ReactNode;
+}
+
+export function LoadingRegion({
+  label = 'Loading',
+  as: Tag = 'div',
+  announce = true,
+  status = true,
+  className,
+  children,
+  ...props
+}: LoadingRegionProps) {
+  if (!announce) {
+    return (
+      <Tag className={className} {...props}>
+        {children}
+      </Tag>
+    );
+  }
+  return (
+    <Tag aria-busy="true" className={className} {...props}>
+      {status && (
+        <span role="status" aria-live="polite" className="sr-only">
+          {label}
+        </span>
+      )}
+      {children}
+    </Tag>
+  );
+}

package/src/components/loading/margin-report-skeleton.tsx

@@ -1,6 +1,10 @@
 import type React from 'react';
+import { LoadingRegion } from './loading-region';
+import { UnifiedSkeleton } from './unified-skeleton';
 
 interface MarginReportSkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   /** Enable pulse animation (default: true) */
   animate?: boolean;
   /** Optional explanation text shown above overlay content */
@@ -9,63 +13,70 @@ interface MarginReportSkeletonProps {
   overlayContent?: React.ReactNode;
 }
 
-export function MarginReportSkeleton({ animate = true, description, overlayContent }: MarginReportSkeletonProps) {
+export function MarginReportSkeleton({
+  region = true,
+  animate = true,
+  description,
+  overlayContent,
+}: MarginReportSkeletonProps) {
   return (
-    <main className={`bg-ods-bg ${animate ? 'animate-pulse' : ''} relative min-h-screen`}>
+    <LoadingRegion
+      label="Loading the report"
+      as="main"
+      announce={region && !overlayContent}
+      className="relative min-h-screen bg-ods-bg"
+    >
       <div className="mx-auto max-w-[1920px] space-y-10 px-6 py-6 content-md:px-20 content-md:py-10">
         {/* Header */}
         <div className="space-y-3">
-          <div className="h-10 w-72 rounded bg-ods-skeleton" />
-          <div className="h-4 w-80 rounded bg-ods-skeleton" />
+          <UnifiedSkeleton className="h-10 w-72 rounded" animate={animate} />
+          <UnifiedSkeleton className="h-4 w-80 rounded" animate={animate} />
         </div>
 
         {/* Summary cards */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-3">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-32 rounded border border-ods-border bg-ods-card" />
+            <UnifiedSkeleton key={i} className="h-32 rounded border border-ods-border" animate={animate} />
           ))}
         </div>
 
         {/* MSP Profile & Report Info cards */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2">
           {/* MSP profile skeleton */}
-          <div className="flex animate-pulse items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
-            <div className="h-14 w-14 rounded-lg bg-ods-skeleton" />
+          <div className="flex items-center gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
+            <UnifiedSkeleton className="h-14 w-14 rounded-lg" animate={animate} />
             <div className="flex-1 space-y-2">
-              <div className="h-4 w-3/4 rounded bg-ods-skeleton" />
-              <div className="h-3 w-1/2 rounded bg-ods-skeleton" />
+              <UnifiedSkeleton className="h-4 w-3/4 rounded" animate={animate} />
+              <UnifiedSkeleton className="h-3 w-1/2 rounded" animate={animate} />
             </div>
           </div>
 
           {/* Report info skeleton */}
-          <div className="flex animate-pulse flex-col gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
+          <div className="flex flex-col gap-4 rounded-lg border border-ods-border bg-ods-card p-6">
             <div className="flex items-center justify-between gap-4">
               <div className="flex items-center gap-2">
-                <div className="h-10 w-10 rounded-lg bg-ods-skeleton" />
+                <UnifiedSkeleton className="h-10 w-10 rounded-lg" animate={animate} />
                 <div className="space-y-1">
-                  <div className="h-4 w-32 rounded bg-ods-skeleton" />
-                  <div className="h-3 w-20 rounded bg-ods-skeleton" />
+                  <UnifiedSkeleton className="h-4 w-32 rounded" animate={animate} />
+                  <UnifiedSkeleton className="h-3 w-20 rounded" animate={animate} />
                 </div>
               </div>
-              <div className="h-6 w-36 rounded bg-ods-skeleton" />
+              <UnifiedSkeleton className="h-6 w-36 rounded" animate={animate} />
             </div>
-            <div className="mt-4 h-4 w-40 rounded bg-ods-skeleton" />
+            <UnifiedSkeleton className="mt-4 h-4 w-40 rounded" animate={animate} />
           </div>
         </div>
 
         {/* Vendor solution lists (Commercial & Open-Source) */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2">
           {['Commercial Stack', 'Open-Source Stack'].map((label, idx) => (
-            <div
-              key={idx}
-              className="flex animate-pulse flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card"
-            >
+            <div key={idx} className="flex flex-col overflow-hidden rounded-lg border border-ods-border bg-ods-card">
               {/* list header */}
               <div className="flex items-center justify-between px-6 py-4">
-                <div className="h-6 w-40 rounded bg-ods-skeleton" />
+                <UnifiedSkeleton className="h-6 w-40 rounded" animate={animate} />
                 <div className="flex items-center gap-2">
-                  <div className="h-5 w-20 rounded bg-ods-skeleton" />
-                  <div className="h-4 w-10 rounded bg-ods-skeleton" />
+                  <UnifiedSkeleton className="h-5 w-20 rounded" animate={animate} />
+                  <UnifiedSkeleton className="h-4 w-10 rounded" animate={animate} />
                 </div>
               </div>
 
@@ -78,16 +89,16 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
                   >
                     {/* left section: icon + text */}
                     <div className="flex min-w-0 items-center gap-3">
-                      <div className="h-12 w-12 flex-shrink-0 rounded-lg bg-ods-skeleton" />
+                      <UnifiedSkeleton className="h-12 w-12 flex-shrink-0 rounded-lg" animate={animate} />
                       <div className="flex min-w-0 flex-col">
-                        <div className="h-4 w-32 rounded bg-ods-skeleton" />
-                        <div className="mt-1 hidden h-3 w-24 rounded bg-ods-skeleton content-md:block" />
+                        <UnifiedSkeleton className="h-4 w-32 rounded" animate={animate} />
+                        <UnifiedSkeleton className="mt-1 hidden h-3 w-24 rounded content-md:block" animate={animate} />
                       </div>
                     </div>
                     {/* right addon: cost text */}
                     <div className="flex flex-shrink-0 items-center gap-1">
-                      <div className="h-4 w-16 rounded bg-ods-skeleton" />
-                      <div className="h-3 w-8 rounded bg-ods-skeleton" />
+                      <UnifiedSkeleton className="h-4 w-16 rounded" animate={animate} />
+                      <UnifiedSkeleton className="h-3 w-8 rounded" animate={animate} />
                     </div>
                   </div>
                 ))}
@@ -97,12 +108,12 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
         </div>
 
         {/* Strategic Recommendations header placeholder */}
-        <div className="h-6 w-60 rounded bg-ods-skeleton" />
+        <UnifiedSkeleton className="h-6 w-60 rounded" animate={animate} />
 
         {/* Recommendations grid */}
         <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3">
           {Array.from({ length: 3 }).map((_, i) => (
-            <div key={i} className="h-48 rounded border border-ods-border bg-ods-card" />
+            <UnifiedSkeleton key={i} className="h-48 rounded border border-ods-border" animate={animate} />
           ))}
         </div>
 
@@ -111,17 +122,17 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           {/* Section header */}
           <div className="flex items-start gap-6">
             <div className="min-w-0 flex-1 space-y-2">
-              <div className="h-8 w-72 rounded bg-ods-skeleton" />
-              <div className="h-4 w-3/4 rounded bg-ods-skeleton" />
+              <UnifiedSkeleton className="h-8 w-72 rounded" animate={animate} />
+              <UnifiedSkeleton className="h-4 w-3/4 rounded" animate={animate} />
             </div>
             {/* Logo placeholder */}
-            <div className="h-12 w-12 shrink-0 rounded-md bg-ods-skeleton" />
+            <UnifiedSkeleton className="h-12 w-12 shrink-0 rounded-md" animate={animate} />
           </div>
 
           {/* Value cards grid */}
           <div className="grid grid-cols-1 gap-6 content-md:grid-cols-2 content-lg:grid-cols-3">
             {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="h-32 rounded border border-ods-border bg-ods-card" />
+              <UnifiedSkeleton key={i} className="h-32 rounded border border-ods-border" animate={animate} />
             ))}
           </div>
         </div>
@@ -137,6 +148,6 @@ export function MarginReportSkeleton({ animate = true, description, overlayConte
           </div>
         </div>
       )}
-    </main>
+    </LoadingRegion>
   );
 }

package/src/components/loading/msp-profile-form-skeleton.tsx

@@ -1,7 +1,10 @@
 import { cn } from '../../utils/cn';
+import { LoadingRegion } from './loading-region';
 import { UnifiedSkeleton, TextSkeleton, InteractiveSkeleton } from './unified-skeleton';
 
 interface SkeletonProps {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   className?: string;
   /**
    * Number of input fields to render on the right column (defaults to 4).
@@ -23,19 +26,19 @@ interface SkeletonProps {
  * – Mobile (<768px) collapses to one column via grid existing classes.
  * – Uses UnifiedSkeleton system to stay consistent with global loading design.
  */
-export function MspProfileFormSkeleton({ className, fields = 4 }: SkeletonProps) {
+export function MspProfileFormSkeleton({ region = true, className, fields = 4 }: SkeletonProps) {
   return (
-    <div
+    <LoadingRegion
+      label="Loading the MSP profile"
+      announce={region}
       className={cn('grid grid-cols-1 items-stretch gap-6 content-md:grid-cols-2', className)}
-      role="status"
-      aria-label="Loading MSP profile form"
     >
       {/* Left – Logo uploader placeholder */}
       <div className="flex h-full flex-col space-y-2">
         {/* Label skeleton */}
         <TextSkeleton.Body className="w-28" />
         <div className="min-h-[180px] flex-1 content-md:min-h-full">
-          <UnifiedSkeleton className="h-full w-full rounded-lg" aria-label="Loading company logo" />
+          <UnifiedSkeleton className="h-full w-full rounded-lg" />
         </div>
       </div>
 
@@ -48,6 +51,6 @@ export function MspProfileFormSkeleton({ className, fields = 4 }: SkeletonProps)
           </div>
         ))}
       </div>
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/loading/organization-card-skeleton.tsx

@@ -1,4 +1,5 @@
 import { cn } from '../../utils/cn';
+import { LoadingRegion } from './loading-region';
 import { OrganizationIconSkeleton } from './organization-icon-skeleton';
 import { TextSkeleton, MediaSkeleton } from './unified-skeleton';
 
@@ -47,8 +48,6 @@ export function OrganizationCardSkeleton({
         'flex h-full flex-col overflow-hidden rounded-lg',
         className,
       )}
-      role="status"
-      aria-label="Loading organization card"
     >
       <div className="flex flex-col gap-3 p-4">
         {/* Header Section - Row layout matching OrganizationCard/VendorCard */}
@@ -123,12 +122,15 @@ export function OrganizationCardSkeleton({
  * - Desktop (xl): 3 columns
  */
 export function OrganizationCardSkeletonGrid({
+  region = true,
   count = 12,
   className,
   containerClassName,
   showFooter = true,
   showDescription = true,
 }: {
+  /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+  region?: boolean;
   count?: number;
   className?: string;
   containerClassName?: string;
@@ -136,10 +138,10 @@ export function OrganizationCardSkeletonGrid({
   showDescription?: boolean;
 }) {
   return (
-    <div
+    <LoadingRegion
+      label="Loading organizations"
+      announce={region}
       className={cn('grid grid-cols-1 gap-4 content-md:grid-cols-2 content-md:gap-6 content-lg:grid-cols-3', className)}
-      role="status"
-      aria-label={`Loading ${count} organization cards`}
     >
       {Array.from({ length: count }, (_, index) => (
         <OrganizationCardSkeleton
@@ -149,6 +151,6 @@ export function OrganizationCardSkeletonGrid({
           showDescription={showDescription}
         />
       ))}
-    </div>
+    </LoadingRegion>
   );
 }

package/src/components/loading/organization-icon-skeleton.tsx

@@ -1,4 +1,5 @@
 import { cn } from '../../utils/cn';
+import { UnifiedSkeleton } from './unified-skeleton';
 
 export interface OrganizationIconSkeletonProps {
   /**
@@ -87,8 +88,8 @@ export function OrganizationIconSkeleton({
   );
 
   return (
-    <div className={containerClasses} role="status" aria-label="Loading organization icon">
-      <div className="h-1/2 w-1/2 animate-pulse rounded-sm bg-ods-border" />
+    <div className={containerClasses}>
+      <UnifiedSkeleton className="h-1/2 w-1/2 rounded-sm" />
     </div>
   );
 }