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

package/dist/components/ui/photo-wall.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Image, { resizedImageUrl } from "../../embed-shims/next-image.js";
 import { cn } from "../../utils/cn.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { MarqueeWall } from "./marquee-wall.js";
 const PHOTO_WALL_FRAME = {
   tall: 4 / 5,
@@ -186,24 +187,16 @@ function PhotoWall({ images, columns = 2, speed = 24, fadeColor, className, load
       ))
     },
     index
-  )) : Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex h-full animate-pulse flex-col overflow-hidden",
-      style: { gap: COLUMN_GAP_PX },
-      children: (index % 2 === 0 ? ["tall", "wide", "square"] : ["wide", "tall", "wide"]).map(
-        (orientation, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "w-full shrink-0 rounded-lg bg-ods-card",
-            style: { aspectRatio: PHOTO_WALL_FRAME[orientation] }
-          },
-          i
-        )
-      )
-    },
-    index
-  )) });
+  )) : Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col overflow-hidden", style: { gap: COLUMN_GAP_PX }, children: (index % 2 === 0 ? ["tall", "wide", "square"] : ["wide", "tall", "wide"]).map(
+    (orientation, i) => /* @__PURE__ */ jsx(
+      UnifiedSkeleton,
+      {
+        className: "h-auto w-full shrink-0 rounded-lg",
+        style: { aspectRatio: PHOTO_WALL_FRAME[orientation] }
+      },
+      i
+    )
+  ) }, index)) });
 }
 export {
   PHOTO_WALL_FRAME,

package/dist/components/ui/query-report-table/query-report-table-skeleton.d.ts

@@ -1,3 +1,3 @@
 import type { QueryReportTableSkeletonProps } from './types';
-export declare function QueryReportTableSkeleton({ rows, columns, columnWidth, variant, className, }: QueryReportTableSkeletonProps): import("react").JSX.Element;
+export declare function QueryReportTableSkeleton({ region, rows, columns, columnWidth, variant, className, }: QueryReportTableSkeletonProps): import("react").JSX.Element;
 //# sourceMappingURL=query-report-table-skeleton.d.ts.map

package/dist/components/ui/query-report-table/query-report-table-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-report-table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAE7D,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,GACV,EAAE,6BAA6B,+BAuC/B"}
+{"version":3,"file":"query-report-table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table-skeleton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAC;AAE7D,wBAAgB,wBAAwB,CAAC,EACvC,MAAa,EACb,IAAI,EACJ,OAAO,EACP,WAAW,EACX,OAAmB,EACnB,SAAS,GACV,EAAE,6BAA6B,+BA0C/B"}

package/dist/components/ui/query-report-table/query-report-table-skeleton.js

@@ -1,7 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
+import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 function QueryReportTableSkeleton({
+  region = true,
   rows,
   columns,
   columnWidth,
@@ -9,26 +12,33 @@ function QueryReportTableSkeleton({
   className
 }) {
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", isCompact ? "gap-0" : "gap-[var(--spacing-system-xs)]", className), children: [
-    /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "border-b border-ods-border py-2" : ""), children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", style: { width: columnWidth, height: 48 }, children: /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 animate-pulse rounded bg-ods-bg-surface" }) }, `header-${i}`)) }),
-    Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "animate-pulse",
-          isCompact ? "border-b border-ods-border" : "relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card"
-        ),
-        children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "h-[56px]" : "h-[80px]"), children: Array.from({ length: columns }).map((_cell, colIndex) => /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: columnWidth }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    LoadingRegion,
+    {
+      label: "Loading results",
+      announce: region,
+      className: cn("flex flex-col", isCompact ? "gap-0" : "gap-[var(--spacing-system-xs)]", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "border-b border-ods-border py-2" : ""), children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", style: { width: columnWidth, height: 48 }, children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded" }) }, `header-${i}`)) }),
+        Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn("rounded bg-ods-bg-surface", isCompact ? "h-4" : "h-5"),
-            style: { width: `${55 + rowIndex * colIndex * 7 % 35}%` }
-          }
-        ) }, `cell-${rowIndex}-${colIndex}`)) })
-      },
-      `row-${rowIndex}`
-    ))
-  ] });
+            className: cn(
+              isCompact ? "border-b border-ods-border" : "relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card"
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-4 px-4", isCompact ? "h-[56px]" : "h-[80px]"), children: Array.from({ length: columns }).map((_cell, colIndex) => /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: columnWidth }, children: /* @__PURE__ */ jsx(
+              UnifiedSkeleton,
+              {
+                className: cn("rounded", isCompact ? "h-4" : "h-5"),
+                width: `${55 + rowIndex * colIndex * 7 % 35}%`
+              }
+            ) }, `cell-${rowIndex}-${colIndex}`)) })
+          },
+          `row-${rowIndex}`
+        ))
+      ]
+    }
+  );
 }
 export {
   QueryReportTableSkeleton

package/dist/components/ui/query-report-table/query-report-table.d.ts

@@ -1,3 +1,3 @@
 import type { QueryReportTableProps } from './types';
-export declare function QueryReportTable({ title, data, loading, skeletonRows, skeletonColumns, emptyMessage, columnWidth, columnOrder, showExport, exportFilename, onExport, headerActions, variant, className, tableClassName, }: QueryReportTableProps): import("react").JSX.Element;
+export declare function QueryReportTable({ title, data, loading, loadingRegion, skeletonRows, skeletonColumns, emptyMessage, columnWidth, columnOrder, showExport, exportFilename, onExport, headerActions, variant, className, tableClassName, }: QueryReportTableProps): import("react").JSX.Element;
 //# sourceMappingURL=query-report-table.d.ts.map

package/dist/components/ui/query-report-table/query-report-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-report-table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,OAAe,EACf,YAAgB,EAChB,eAAmB,EACnB,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAiB,EACjB,cAAgC,EAChC,QAAQ,EACR,aAAa,EACb,OAAmB,EACnB,SAAS,EACT,cAAc,GACf,EAAE,qBAAqB,+BAwHvB"}
+{"version":3,"file":"query-report-table.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/query-report-table.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGrD,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,OAAe,EACf,aAAoB,EACpB,YAAgB,EAChB,eAAmB,EACnB,YAAY,EACZ,WAAiB,EACjB,WAAW,EACX,UAAiB,EACjB,cAAgC,EAChC,QAAQ,EACR,aAAa,EACb,OAAmB,EACnB,SAAS,EACT,cAAc,GACf,EAAE,qBAAqB,+BAyHvB"}

package/dist/components/ui/query-report-table/query-report-table.js

@@ -14,6 +14,7 @@ function QueryReportTable({
   title,
   data,
   loading = false,
+  loadingRegion = true,
   skeletonRows = 8,
   skeletonColumns = 6,
   emptyMessage,
@@ -72,7 +73,8 @@ function QueryReportTable({
         rows: skeletonRows,
         columns: skeletonColumns,
         columnWidth,
-        variant
+        variant,
+        region: loadingRegion
       }
     ),
     !loading && data.length === 0 && /* @__PURE__ */ jsx(TableEmptyState, { message: emptyMessage }),

package/dist/components/ui/query-report-table/types.d.ts

@@ -8,6 +8,8 @@ export interface QueryReportTableProps {
     data: QueryResultRow[];
     /** Show skeleton loading state */
     loading?: boolean;
+    /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
+    loadingRegion?: boolean;
     /** Number of skeleton rows to display (default: 8) */
     skeletonRows?: number;
     /** Number of skeleton columns to display (default: 6) */
@@ -50,5 +52,7 @@ export interface QueryReportTableSkeletonProps {
     columnWidth: number;
     variant?: QueryReportTableVariant;
     className?: string;
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ui/query-report-table/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/query-report-table/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,CAAC;AAEpE,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,MAAM,WAAW,qBAAqB;IACpC,+GAA+G;IAC/G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qHAAqH;IACrH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,yDAAyD;IACzD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4FAA4F;IAC5F,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB"}

package/dist/components/ui/skeleton-surface.d.ts

@@ -0,0 +1,7 @@
+/**
+ * What a skeleton looks like: the pulsing surface every loading stand-in draws
+ * (`UnifiedSkeleton` and its presets, `TextHold`'s bars). A plain module, with
+ * no client directive, so a server component can read the string itself.
+ */
+export declare const SKELETON_SURFACE_CLASS = "animate-pulse motion-reduce:animate-none bg-ods-skeleton";
+//# sourceMappingURL=skeleton-surface.d.ts.map

package/dist/components/ui/skeleton-surface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-surface.d.ts","sourceRoot":"","sources":["../../../src/components/ui/skeleton-surface.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,6DAA6D,CAAC"}

package/dist/components/ui/skeleton-surface.js

@@ -0,0 +1,5 @@
+"use client";
+const SKELETON_SURFACE_CLASS = "animate-pulse motion-reduce:animate-none bg-ods-skeleton";
+export {
+  SKELETON_SURFACE_CLASS
+};

package/dist/components/ui/table/table-skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table-skeleton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD,QAAA,MAAM,kBAAkB,iCAAiC,CAAC;AAC1D;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,iBAAiB,CAAC;AAC9C,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,qEAAqE;AACrE,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAS,EACT,OAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,GACb,EAAE,sBAAsB,+BA8ExB;AAED,kBAAkB;AAClB,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"table-skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/table/table-skeleton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAItD,QAAA,MAAM,kBAAkB,iCAAiC,CAAC;AAC1D;;;;;;;GAOG;AACH,QAAA,MAAM,sBAAsB,iBAAiB,CAAC;AAC9C,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,qEAAqE;AACrE,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,IAAS,EACT,OAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,SAAS,EACT,YAAY,GACb,EAAE,sBAAsB,+BA2ExB;AAED,kBAAkB;AAClB,OAAO,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/ui/table/table-skeleton.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
+import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 const ROW_HEIGHT_DESKTOP = "h-[66px] content-md:h-[78px]";
 const COMPACT_ROW_MIN_HEIGHT = "min-h-[56px]";
 const ROW_HEIGHT_MOBILE = "h-[66px]";
@@ -17,10 +18,7 @@ function TableCardSkeleton({
   return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(
-        "relative animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card",
-        className
-      ),
+      className: cn("relative overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", className),
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -32,14 +30,14 @@ function TableCardSkeleton({
             ),
             children: [
               columns.map((column) => /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 flex-col justify-center", column.width || "flex-1"), children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-1 h-5 w-3/4 rounded bg-ods-bg-surface" }),
-                index % 2 === 0 && column.key === primaryKey && /* @__PURE__ */ jsx("div", { className: "h-4 w-1/2 rounded bg-ods-bg-surface opacity-60" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-1 h-5 w-3/4 rounded" }),
+                index % 2 === 0 && column.key === primaryKey && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-1/2 rounded opacity-60" })
               ] }, column.key)),
               hasActions && /* @__PURE__ */ jsxs("div", { className: cn("flex shrink-0 items-center gap-2", !hasChevron && "ml-auto"), children: [
-                /* @__PURE__ */ jsx("div", { className: "h-12 w-12 rounded bg-ods-bg-surface" }),
-                /* @__PURE__ */ jsx("div", { className: "h-12 w-24 rounded bg-ods-bg-surface" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-24 rounded" })
               ] }),
-              hasChevron && /* @__PURE__ */ jsx("div", { className: cn("flex w-12 shrink-0 items-center justify-end", !hasActions && "ml-auto"), children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded bg-ods-bg-surface" }) })
+              hasChevron && /* @__PURE__ */ jsx("div", { className: cn("flex w-12 shrink-0 items-center justify-end", !hasActions && "ml-auto"), children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 rounded" }) })
             ]
           }
         ),
@@ -57,11 +55,11 @@ function TableCardSkeleton({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col justify-center", compact ? "py-0" : "py-3"), children: [
-                /* @__PURE__ */ jsx("div", { className: "mb-2 h-4 w-3/4 rounded bg-ods-bg-surface" }),
-                /* @__PURE__ */ jsx("div", { className: "h-3 w-1/2 rounded bg-ods-bg-surface opacity-60" })
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "mb-2 h-4 w-3/4 rounded" }),
+                /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-3 w-1/2 rounded opacity-60" })
               ] }),
-              hasActions && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 shrink-0 rounded bg-ods-bg-surface" }),
-              hasChevron && /* @__PURE__ */ jsx("div", { className: "h-8 w-8 shrink-0 rounded bg-ods-bg-surface" })
+              hasActions && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-12 w-12 shrink-0 rounded" }),
+              hasChevron && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8 shrink-0 rounded" })
             ]
           }
         )

package/dist/components/ui/test-run.d.ts

@@ -1,10 +1,12 @@
 import type { QueryResultRow } from './query-report-table';
 export declare function formatTestRunDuration(ms: number): string;
 /** Column-bar skeleton (header cells + one card row): fixed 160px columns on
-    every breakpoint, scrolling horizontally when they do not fit. Bars use
-    bg-ods-bg-surface like the table skeletons — the bg-ods-skeleton token is
-    the same color as the card background and would be invisible on the row. */
-export declare function TestResultsSkeleton(): import("react").JSX.Element;
+    every breakpoint, scrolling horizontally when they do not fit. Bars are
+    `UnifiedSkeleton`s, like the table skeletons. */
+export declare function TestResultsSkeleton({ region, }?: {
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
+}): import("react").JSX.Element;
 /**
  * Live test results rendered with the core DataTable (identical header,
  * skeleton, and card-row styling to the standard tables). Columns are derived

package/dist/components/ui/test-run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"test-run.d.ts","sourceRoot":"","sources":["../../../src/components/ui/test-run.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAa3D,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMxD;AAKD;;;+EAG+E;AAC/E,wBAAgB,mBAAmB,gCA2BlC;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,+BAkD/F;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAuB7F;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAkBnG;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO3G;AAED,4DAA4D;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAa9F,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAYrG;AAED;;;;GAIG;AACH;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,4DAA4D;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB;;;;;;;;;;iBA4BtB,MAAM,OAAO,CAAC,OAAO,CAAC;;;EAgF7D"}
+{"version":3,"file":"test-run.d.ts","sourceRoot":"","sources":["../../../src/components/ui/test-run.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAa3D,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMxD;AAKD;;oDAEoD;AACpD,wBAAgB,mBAAmB,CAAC,EAClC,MAAa,GACd,GAAE;IACD,mHAAmH;IACnH,MAAM,CAAC,EAAE,OAAO,CAAC;CACb,+BA6BL;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,cAAc,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,+BAkD/F;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,cAAc,EAAE,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAuB7F;AAED,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAkBnG;AAED,qEAAqE;AACrE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAO3G;AAED,4DAA4D;AAC5D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAa9F,4EAA4E;AAC5E,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAYrG;AAED;;;;GAIG;AACH;;;;;GAKG;AACH,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAE/E,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,IAAI,GAAG,IAAI,CAAC;IACvB,4DAA4D;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACtC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,MAAM,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACjC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,oBAAoB;;;;;;;;;;iBA4BtB,MAAM,OAAO,CAAC,OAAO,CAAC;;;EAgF7D"}

package/dist/components/ui/test-run.js

@@ -5,6 +5,8 @@ import { useCopyToClipboard } from "../../hooks/use-copy-to-clipboard.js";
 import { cn } from "../../utils/cn.js";
 import { formatTime } from "../../utils/format-date.js";
 import { Copy02Icon, SearchIcon } from "../icons-v2-generated/index.js";
+import { LoadingRegion } from "../loading/loading-region.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { DataTable } from "./data-table/index.js";
 import { useDataTable } from "./data-table/use-data-table.js";
 import { NoData } from "./no-data/index.js";
@@ -19,11 +21,13 @@ function formatTestRunDuration(ms) {
 }
 const RESULT_COLUMN_MIN_WIDTH = 176;
 const SKELETON_COLUMNS = 6;
-function TestResultsSkeleton() {
-  return /* @__PURE__ */ jsx(ScrollShadow, { axis: "horizontal", children: /* @__PURE__ */ jsxs("div", { className: "flex w-max min-w-full flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex h-12 w-[160px] shrink-0 items-center", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-3/4 animate-pulse rounded-sm bg-ods-bg-surface" }) }, `skeleton-header-${i}`)) }),
-    /* @__PURE__ */ jsx("div", { className: "animate-pulse overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx("div", { className: "flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-[160px] shrink-0", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-3/4 rounded-sm bg-ods-bg-surface" }) }, `skeleton-cell-${i}`)) }) })
-  ] }) });
+function TestResultsSkeleton({
+  region = true
+} = {}) {
+  return /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the test results", announce: region, children: /* @__PURE__ */ jsx(ScrollShadow, { axis: "horizontal", children: /* @__PURE__ */ jsxs("div", { className: "flex w-max min-w-full flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "flex h-12 w-[160px] shrink-0 items-center", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-4 w-3/4 rounded-sm" }) }, `skeleton-header-${i}`)) }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-[6px] border border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx("div", { className: "flex h-[66px] items-center gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] content-md:h-[78px]", children: Array.from({ length: SKELETON_COLUMNS }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "w-[160px] shrink-0", children: /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-3/4 rounded-sm" }) }, `skeleton-cell-${i}`)) }) })
+  ] }) }) });
 }
 function TestResultsTable({ rows, loading }) {
   const columnKeys = useMemo(() => rows.length > 0 ? Object.keys(rows[0]) : [], [rows]);

package/dist/{devices-V55KQCAL.cjs → devices-FVXAGKVX.cjs}

@@ -11,10 +11,10 @@ require('./chunk-DKOLQPE7.cjs');
 
 
 
-var _chunkR3FXJXSQcjs = require('./chunk-R3FXJXSQ.cjs');
-require('./chunk-HNLI4OU5.cjs');
+var _chunkSECT4H34cjs = require('./chunk-SECT4H34.cjs');
+require('./chunk-C6LPOYDM.cjs');
 require('./chunk-NTGIQP7O.cjs');
-require('./chunk-U6XWGK53.cjs');
+require('./chunk-ALPRQ3ZX.cjs');
 require('./chunk-HQQE74RO.cjs');
 require('./chunk-DEY6XXGO.cjs');
 require('./chunk-4FWURR3W.cjs');
@@ -22,14 +22,14 @@ require('./chunk-LU7TD6QS.cjs');
 require('./chunk-24I6RFVU.cjs');
 require('./chunk-A6P6DHEZ.cjs');
 require('./chunk-MZ4KBSH7.cjs');
-require('./chunk-BBM2ICOY.cjs');
+require('./chunk-3TELPOVH.cjs');
 require('./chunk-YUMFVQIN.cjs');
-require('./chunk-C7NTL2GV.cjs');
-require('./chunk-7Y5U3Y4S.cjs');
-require('./chunk-PSIKUDUV.cjs');
+require('./chunk-WZX26ODJ.cjs');
+require('./chunk-V3UJ6NDR.cjs');
+require('./chunk-LVO7FALW.cjs');
 require('./chunk-3RFQPQ7Z.cjs');
 require('./chunk-YRULLK7N.cjs');
-require('./chunk-B27QEHYR.cjs');
+require('./chunk-P6F6PHVK.cjs');
 require('./chunk-ZOZR3QI2.cjs');
 require('./chunk-OMV5S5PI.cjs');
 require('./chunk-KHPX3KU4.cjs');
@@ -1826,8 +1826,8 @@ require('./chunk-7DNL734S.cjs');
 require('./chunk-WWUSFOJ7.cjs');
 require('./chunk-SKI6NKOE.cjs');
 require('./chunk-EWPR7662.cjs');
-require('./chunk-YIRX6C7V.cjs');
-require('./chunk-P7KTAXXE.cjs');
+require('./chunk-XJ3J4UIS.cjs');
+require('./chunk-OFO75R2O.cjs');
 require('./chunk-QYLIHZKZ.cjs');
 require('./chunk-63N4FN5V.cjs');
 require('./chunk-L2IQESTQ.cjs');
@@ -1850,29 +1850,31 @@ require('./chunk-HOTM4UM6.cjs');
 require('./chunk-UJ7AXHRZ.cjs');
 require('./chunk-HTRILBJD.cjs');
 require('./chunk-K6VWTUCH.cjs');
-require('./chunk-L2RMTGOK.cjs');
+require('./chunk-MGF3FUKD.cjs');
 require('./chunk-Z74QE57T.cjs');
 require('./chunk-XZJCBIYR.cjs');
+require('./chunk-UGCRLRCT.cjs');
 require('./chunk-2QMBXGMQ.cjs');
 require('./chunk-V45KLJQP.cjs');
 require('./chunk-G7SBHMRR.cjs');
-require('./chunk-AKTPO2DN.cjs');
+require('./chunk-L4UI63K6.cjs');
 require('./chunk-OF336YWG.cjs');
 require('./chunk-3LU4UFPS.cjs');
-require('./chunk-5M5C6UV4.cjs');
+require('./chunk-RB6BSE3O.cjs');
+require('./chunk-2YXOD2KL.cjs');
 require('./chunk-3ATAYP36.cjs');
 
 // src/components/product-demo/screens/devices.tsx
 var _react = require('react');
 var _jsxruntime = require('react/jsx-runtime');
-var TOOLBAR = { ..._chunkR3FXJXSQcjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunk7AM3AFM4cjs.DEVICES_SEARCH_QUERY };
+var TOOLBAR = { ..._chunkSECT4H34cjs.IDLE_DEVICES_TOOLBAR, searchValue: _chunk7AM3AFM4cjs.DEVICES_SEARCH_QUERY };
 var NO_HEADER = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {});
 var HIDDEN_WHEN_COMPACT = ["organization"];
 function DevicesScreen({ compact = false }) {
   const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => _chunk7AM3AFM4cjs.buildWindowsDevicesFixture.call(void 0, cast), [cast]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkR3FXJXSQcjs.DevicesPanelView,
+    _chunkSECT4H34cjs.DevicesPanelView,
     {
       className: "p-[var(--spacing-system-l)]",
       headerSlot: NO_HEADER,