@flamingo-stack/openframe-frontend-core 0.0.765 → 0.0.766

package/dist/components/features/paths-display.js

@@ -2,6 +2,16 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { Copy02Icon } from "../icons-v2-generated/documents/copy-02-icon.js";
+import { TextLineSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
+const PATHS_CLASS = "flex flex-col gap-3";
+const PATHS_TITLE_CLASS = "text-ods-text-primary text-h4";
+const PATHS_DESCRIPTION_CLASS = "text-ods-text-secondary text-h6";
+const PATHS_FRAME_CLASS = "overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg";
+const PATHS_ROW_CLASS = "flex items-center gap-4 border-b border-ods-border p-4 last:border-b-0";
+const PATHS_COPY_BUTTON_CLASS = "shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus";
+const PATHS_DISPLAY_SKELETON_ROWS = 2;
+const PATH_SKELETON_WIDTHS = ["w-3/5", "w-2/5", "w-1/2", "w-1/3"];
 function PathsDisplay({
   paths,
   onCopyPath,
@@ -12,13 +22,27 @@ function PathsDisplay({
   copyIconSize = "w-6 h-6",
   leadingIcon
 }) {
+  const inScope = useLoadingScope();
   if (!paths || paths.length === 0) {
+    if (inScope) {
+      return /* @__PURE__ */ jsx(
+        PathsDisplaySkeleton,
+        {
+          title,
+          description,
+          showCopyButtons: showCopyButtons && !!onCopyPath,
+          copyIconSize,
+          leadingIcon,
+          className
+        }
+      );
+    }
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
-    title && /* @__PURE__ */ jsx("div", { className: "text-ods-text-primary text-h4", children: title }),
-    description && /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary text-h6", children: description }),
-    /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-[6px] border border-ods-border bg-ods-bg", children: paths.map((path) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-b border-ods-border p-4 last:border-b-0", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(PATHS_CLASS, className), children: [
+    title && /* @__PURE__ */ jsx("div", { className: PATHS_TITLE_CLASS, children: title }),
+    description && /* @__PURE__ */ jsx("div", { className: PATHS_DESCRIPTION_CLASS, children: description }),
+    /* @__PURE__ */ jsx("div", { className: PATHS_FRAME_CLASS, children: paths.map((path) => /* @__PURE__ */ jsxs("div", { className: PATHS_ROW_CLASS, children: [
       leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ods-text-primary", children: leadingIcon }),
       /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-ods-text-primary text-h4", children: path }),
       showCopyButtons && onCopyPath && /* @__PURE__ */ jsx(
@@ -27,13 +51,32 @@ function PathsDisplay({
           type: "button",
           onClick: () => onCopyPath(path),
           "aria-label": `Copy ${path}`,
-          className: "shrink-0 rounded-md text-ods-text-secondary transition-colors hover:text-ods-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus",
+          className: PATHS_COPY_BUTTON_CLASS,
           children: /* @__PURE__ */ jsx(Copy02Icon, { className: copyIconSize })
         }
       )
     ] }, path)) })
   ] });
 }
+function PathsDisplaySkeleton({
+  rows = PATHS_DISPLAY_SKELETON_ROWS,
+  title,
+  description,
+  showCopyButtons = true,
+  copyIconSize = "w-6 h-6",
+  leadingIcon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn(PATHS_CLASS, className), "aria-hidden": true, children: [
+    title && /* @__PURE__ */ jsx("div", { className: PATHS_TITLE_CLASS, children: title }),
+    description && /* @__PURE__ */ jsx("div", { className: PATHS_DESCRIPTION_CLASS, children: description }),
+    /* @__PURE__ */ jsx("div", { className: PATHS_FRAME_CLASS, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs("div", { className: PATHS_ROW_CLASS, children: [
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-ods-text-primary", children: leadingIcon }),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: PATH_SKELETON_WIDTHS[i % PATH_SKELETON_WIDTHS.length] }) }),
+      showCopyButtons && /* @__PURE__ */ jsx("span", { className: PATHS_COPY_BUTTON_CLASS, children: /* @__PURE__ */ jsx(Copy02Icon, { className: copyIconSize }) })
+    ] }, i)) })
+  ] });
+}
 const OPENFRAME_PATHS = {
   windows: [
     "C:\\Program Files\\OpenFrame",
@@ -63,7 +106,9 @@ function getOpenFrameDoctorCommand(platform) {
 export {
   OPENFRAME_DOCTOR_COMMANDS,
   OPENFRAME_PATHS,
+  PATHS_DISPLAY_SKELETON_ROWS,
   PathsDisplay,
+  PathsDisplaySkeleton,
   getOpenFrameDoctorCommand,
   getOpenFramePaths
 };

package/dist/components/features/platform-badge.d.ts

@@ -9,5 +9,7 @@ interface PlatformBadgeProps {
     className?: string;
 }
 export declare function PlatformBadge({ platform, size, showLabel, className }: PlatformBadgeProps): import("react").JSX.Element | null;
+/** A platform badge while its record is read: one shape of the badge's height at its size. */
+export declare function PlatformBadgeSkeleton({ size, showLabel, className, }: Pick<PlatformBadgeProps, 'size' | 'showLabel' | 'className'>): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=platform-badge.d.ts.map

package/dist/components/features/platform-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platform-badge.d.ts","sourceRoot":"","sources":["../../../src/components/features/platform-badge.tsx"],"names":[],"mappings":"AAMA,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;KACtB,GAAG,IAAI,CAAC;IACT,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAoBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,SAAgB,EAAE,SAAS,EAAE,EAAE,kBAAkB,sCA0BvG"}
+{"version":3,"file":"platform-badge.d.ts","sourceRoot":"","sources":["../../../src/components/features/platform-badge.tsx"],"names":[],"mappings":"AAQA,UAAU,kBAAkB;IAC1B,QAAQ,CAAC,EAAE;QACT,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;KACtB,GAAG,IAAI,CAAC;IACT,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,IAAW,EAAE,SAAgB,EAAE,SAAS,EAAE,EAAE,kBAAkB,sCA+BvG;AAYD,8FAA8F;AAC9F,wBAAgB,qBAAqB,CAAC,EACpC,IAAW,EACX,SAAgB,EAChB,SAAS,GACV,EAAE,IAAI,CAAC,kBAAkB,EAAE,MAAM,GAAG,WAAW,GAAG,WAAW,CAAC,+BAa9D"}

package/dist/components/features/platform-badge.js

@@ -3,6 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { getPlatformBrandClasses } from "../../utils/platform-identity.js";
 import { PlatformMark } from "../chat/utils/icon-loading.js";
+import { UnifiedSkeleton } from "../loading/unified-skeleton.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 const sizeClasses = {
   xs: {
     container: "gap-1 px-1.5 py-0.5",
@@ -20,7 +22,11 @@ const sizeClasses = {
     text: "text-h6"
   }
 };
+const PLATFORM_BADGE_FRAME_CLASS = "inline-flex items-center rounded-full border";
 function PlatformBadge({ platform, size = "sm", showLabel = true, className }) {
+  if (useLoadingScope() && !platform) {
+    return /* @__PURE__ */ jsx(PlatformBadgeSkeleton, { size, showLabel, className });
+  }
   if (!platform) {
     return null;
   }
@@ -30,7 +36,7 @@ function PlatformBadge({ platform, size = "sm", showLabel = true, className }) {
     "div",
     {
       className: cn(
-        "inline-flex items-center rounded-full border",
+        PLATFORM_BADGE_FRAME_CLASS,
         sizes.container,
         colors.accentBgSoft,
         colors.accentBorderSoft,
@@ -45,6 +51,31 @@ function PlatformBadge({ platform, size = "sm", showLabel = true, className }) {
     }
   );
 }
+const PLATFORM_BADGE_SKELETON_SIZE = {
+  xs: { height: "h-[calc(max(1lh,0.75rem)+0.25rem+2px)]", width: "w-20", iconOnly: "w-[calc(0.75rem+0.75rem+2px)]" },
+  sm: { height: "h-[calc(max(1lh,1rem)+0.5rem+2px)]", width: "w-24", iconOnly: "w-[calc(1rem+1rem+2px)]" },
+  md: { height: "h-[calc(max(1lh,1.25rem)+0.75rem+2px)]", width: "w-28", iconOnly: "w-[calc(1.25rem+1.25rem+2px)]" }
+};
+function PlatformBadgeSkeleton({
+  size = "sm",
+  showLabel = true,
+  className
+}) {
+  const box = PLATFORM_BADGE_SKELETON_SIZE[size];
+  return /* @__PURE__ */ jsx(
+    UnifiedSkeleton,
+    {
+      as: "span",
+      className: cn(
+        "inline-block rounded-full align-middle text-h6",
+        box.height,
+        showLabel ? box.width : box.iconOnly,
+        className
+      )
+    }
+  );
+}
 export {
-  PlatformBadge
+  PlatformBadge,
+  PlatformBadgeSkeleton
 };

package/dist/components/features/push-button-selector.d.ts

@@ -54,6 +54,9 @@ interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
     isLoading?: boolean;
     error?: string | null;
     skeletonCount?: number;
+    /** Whether the option rows carry a description line, for the skeleton drawn before the rows arrive (default
+     *  true; with rows given, the rows decide). */
+    optionDescriptions?: boolean;
     sections?: SectionDefinition[];
     /** Built-in server-side search input (see PushButtonSelectorSearch). */
     search?: PushButtonSelectorSearch;
@@ -64,6 +67,25 @@ interface PushButtonSelectorProps<Id extends SelectableOptionId = string> {
     /** Rendered under the list (result counts, hints). */
     footer?: React.ReactNode;
 }
-export declare function PushButtonSelector<Id extends SelectableOptionId = string>({ options, selectedIds, onSelectionChange, multiSelect, title, helpText, className, selectionSummary, optional, isLoading, error, skeletonCount, sections, search, lazyLoad, emptyMessage, footer, }: PushButtonSelectorProps<Id>): React.JSX.Element;
+export interface PushButtonSelectorSkeletonProps {
+    /** How many option rows to draw (the selector's `skeletonCount`). */
+    count?: number;
+    /** The selector's title and help text: static copy, drawn as they are. */
+    title?: string;
+    helpText?: string;
+    /** Sections, whose headers are drawn as they are, each over its share of the rows. */
+    sections?: SectionDefinition[];
+    /** Whether the rows carry a description line under the name (default true). */
+    description?: boolean;
+    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
+    region?: boolean;
+    className?: string;
+}
+/**
+ * The selector while its options are read: its title, section headers and help text drawn for real, every option
+ * row a skeleton of the row. `PushButtonSelector` draws it while `isLoading` and in a loading scope.
+ */
+export declare function PushButtonSelectorSkeleton({ count, title, helpText, sections, description, region, className, }: PushButtonSelectorSkeletonProps): React.JSX.Element;
+export declare function PushButtonSelector<Id extends SelectableOptionId = string>({ options, selectedIds, onSelectionChange, multiSelect, title, helpText, className, selectionSummary, optional, isLoading, error, skeletonCount, optionDescriptions, sections, search, lazyLoad, emptyMessage, footer, }: PushButtonSelectorProps<Id>): React.JSX.Element;
 export {};
 //# sourceMappingURL=push-button-selector.d.ts.map

package/dist/components/features/push-button-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"push-button-selector.d.ts","sourceRoot":"","sources":["../../../src/components/features/push-button-selector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"push-button-selector.d.ts","sourceRoot":"","sources":["../../../src/components/features/push-button-selector.tsx"],"names":[],"mappings":"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"}

package/dist/components/features/push-button-selector.js

@@ -2,27 +2,79 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check } from "lucide-react";
 import { useEffect, useRef } from "react";
-import { UnifiedSkeleton } from "../loading/index.js";
+import { CONTROL_SIZE, TILE_SIZE } from "../../styles/component-sizes.js";
+import { cn } from "../../utils/cn.js";
 import { LoadingRegion } from "../loading/loading-region.js";
+import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.js";
 import { Badge, Input } from "../ui/index.js";
+import { useLoadingScope } from "../ui/loading-scope.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+const SELECTOR_STACK_CLASS = "space-y-4";
+const SELECTOR_TITLE_CLASS = "text-ods-text-primary text-h5";
+const SELECTOR_HELP_CLASS = "text-ods-text-secondary text-h6";
+const OPTION_LIST_CLASS = "space-y-3";
+const SECTIONED_LIST_CLASS = "space-y-4";
+const SECTION_CLASS = "space-y-2";
+const SECTION_HEADER_CLASS = "flex items-center gap-2 px-1";
+const SECTION_LABEL_CLASS = "font-semibold text-ods-text-primary text-h6";
+const SECTION_DESCRIPTION_CLASS = "text-ods-text-tertiary text-h6";
+const OPTION_FRAME_CLASS = "rounded-lg border p-4";
+const OPTION_ROW_CLASS = "flex items-center justify-between gap-4";
+const OPTION_LEAD_CLASS = "flex min-w-0 flex-1 items-center gap-3";
+const SELECTION_BOX_CLASS = `flex ${CONTROL_SIZE.selection} flex-shrink-0 items-center justify-center rounded border-2`;
+const SELECTION_BOX_IDLE_CLASS = "border-ods-border";
+const OPTION_ICON_BOX_CLASS = `flex ${TILE_SIZE.sm} shrink-0 items-center justify-center`;
+const OPTION_IDLE_SURFACE_CLASS = "border-ods-border bg-ods-bg";
+function OptionRowSkeleton({ description = true }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(OPTION_FRAME_CLASS, OPTION_IDLE_SURFACE_CLASS), children: /* @__PURE__ */ jsxs("div", { className: OPTION_ROW_CLASS, children: [
+    /* @__PURE__ */ jsxs("div", { className: OPTION_LEAD_CLASS, children: [
+      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: OPTION_ICON_BOX_CLASS }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-24" }),
+        description && /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-36" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn(SELECTION_BOX_CLASS, SELECTION_BOX_IDLE_CLASS), "aria-hidden": true })
+  ] }) });
+}
+function SectionHeader({ section }) {
+  return /* @__PURE__ */ jsxs("div", { className: SECTION_HEADER_CLASS, children: [
+    section.icon && /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: section.icon }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: SECTION_LABEL_CLASS, children: section.label }),
+      section.description && /* @__PURE__ */ jsx("div", { className: SECTION_DESCRIPTION_CLASS, children: section.description })
+    ] })
+  ] });
+}
+function OptionListSkeleton({
+  count,
+  sections,
+  description
+}) {
+  const rows = (n) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+    Array.from({ length: n }, (_, i) => /* @__PURE__ */ jsx(OptionRowSkeleton, { description }, i))
+  );
+  if (!sections || sections.length === 0) return /* @__PURE__ */ jsx("div", { className: OPTION_LIST_CLASS, children: rows(count) });
+  const perSection = Math.max(1, Math.round(count / sections.length));
+  return /* @__PURE__ */ jsx("div", { className: SECTIONED_LIST_CLASS, children: sections.map((section) => /* @__PURE__ */ jsxs("div", { className: SECTION_CLASS, children: [
+    /* @__PURE__ */ jsx(SectionHeader, { section }),
+    /* @__PURE__ */ jsx("div", { className: SECTION_CLASS, children: rows(perSection) })
+  ] }, section.id)) });
+}
 function PushButtonSelectorSkeleton({
-  region = true,
   count = 3,
-  hasTitle
+  title,
+  helpText,
+  sections,
+  description,
+  region = true,
+  className
 }) {
-  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading options", announce: region, className: "space-y-3", children: [
-    hasTitle && /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-5 w-20" }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-border bg-ods-bg p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-8 w-8" }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "text", className: "mb-2 h-4 w-24" }),
-          /* @__PURE__ */ jsx(UnifiedSkeleton, { variant: "text", className: "h-4 w-36" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsx(UnifiedSkeleton, { className: "h-6 w-6" })
-    ] }) }, i)) })
+  return /* @__PURE__ */ jsxs(LoadingRegion, { label: "Loading options", announce: region, className: cn(SELECTOR_STACK_CLASS, className), children: [
+    title && /* @__PURE__ */ jsx("h3", { className: SELECTOR_TITLE_CLASS, children: title }),
+    /* @__PURE__ */ jsx(OptionListSkeleton, { count, sections, description }),
+    helpText && /* @__PURE__ */ jsx("div", { className: SELECTOR_HELP_CLASS, children: helpText })
   ] });
 }
 function PushButtonSelectorError({ message, title }) {
@@ -47,12 +99,16 @@ function PushButtonSelector({
   isLoading = false,
   error = null,
   skeletonCount = 3,
+  optionDescriptions = true,
   sections,
   search,
   lazyLoad,
   emptyMessage,
   footer
 }) {
+  const inScope = useLoadingScope();
+  const loading = isLoading || inScope;
+  const skeletonDescription = options.length > 0 ? options.some((option) => !!option.description) : optionDescriptions;
   const scrollRef = useRef(null);
   const sentinelRef = useRef(null);
   const lazyHasMore = lazyLoad?.hasMore ?? false;
@@ -86,8 +142,18 @@ function PushButtonSelector({
     }
   ) : null;
   const framed = !!search || !!lazyLoad;
-  if (isLoading && !framed) {
-    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(PushButtonSelectorSkeleton, { count: skeletonCount, hasTitle: !!title }) });
+  if (loading && !framed) {
+    return /* @__PURE__ */ jsx(
+      PushButtonSelectorSkeleton,
+      {
+        count: inScope && options.length > 0 ? options.length : skeletonCount,
+        title,
+        helpText,
+        sections,
+        description: skeletonDescription,
+        className
+      }
+    );
   }
   if (error && !framed) {
     return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(PushButtonSelectorError, { message: error, title }) });
@@ -115,14 +181,22 @@ function PushButtonSelector({
     const optionEl = /* @__PURE__ */ jsx(
       "div",
       {
-        className: `group rounded-lg border p-4 transition-all duration-200 ${option.disabled ? `${isSelected ? "cursor-pointer" : "cursor-not-allowed"} border-ods-border bg-ods-card opacity-40` : isSelected ? "cursor-pointer border-ods-accent bg-ods-bg-surface shadow-sm" : "cursor-pointer border-ods-border bg-ods-bg hover:border-ods-border-hover hover:bg-ods-bg-hover"} `,
+        className: cn(
+          "group transition-all duration-200",
+          OPTION_FRAME_CLASS,
+          option.disabled ? `${isSelected ? "cursor-pointer" : "cursor-not-allowed"} border-ods-border bg-ods-card opacity-40` : isSelected ? "cursor-pointer border-ods-accent bg-ods-bg-surface shadow-sm" : cn("cursor-pointer hover:border-ods-border-hover hover:bg-ods-bg-hover", OPTION_IDLE_SURFACE_CLASS)
+        ),
         onClick: () => (!option.disabled || isSelected) && toggleSelection(option.id),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: OPTION_ROW_CLASS, children: [
+          /* @__PURE__ */ jsxs("div", { className: OPTION_LEAD_CLASS, children: [
             option.icon && /* @__PURE__ */ jsx(
               "div",
               {
-                className: `flex-shrink-0 transition-transform duration-200 ${isSelected ? "scale-110" : "group-hover:scale-105"}`,
+                className: cn(
+                  OPTION_ICON_BOX_CLASS,
+                  "transition-transform duration-200",
+                  isSelected ? "scale-110" : "group-hover:scale-105"
+                ),
                 children: option.icon
               }
             ),
@@ -134,7 +208,11 @@ function PushButtonSelector({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: `flex h-6 w-6 flex-shrink-0 items-center justify-center rounded border-2 transition-all duration-200 ${isSelected ? "scale-110 border-ods-accent bg-ods-accent" : "border-ods-border group-hover:border-ods-border-hover"} `,
+              className: cn(
+                SELECTION_BOX_CLASS,
+                "transition-all duration-200",
+                isSelected ? "scale-110 border-ods-accent bg-ods-accent" : cn(SELECTION_BOX_IDLE_CLASS, "group-hover:border-ods-border-hover")
+              ),
               children: isSelected && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 font-bold text-ods-text-primary", strokeWidth: 3 })
             }
           )
@@ -152,7 +230,7 @@ function PushButtonSelector({
   };
   const renderOptionsContent = () => {
     if (!sections || sections.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: options.map(renderOption) });
+      return /* @__PURE__ */ jsx("div", { className: OPTION_LIST_CLASS, children: options.map(renderOption) });
     }
     const optionsBySection = /* @__PURE__ */ new Map();
     const ungroupedOptions = [];
@@ -164,34 +242,28 @@ function PushButtonSelector({
         ungroupedOptions.push(option);
       }
     });
-    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    return /* @__PURE__ */ jsxs("div", { className: SECTIONED_LIST_CLASS, children: [
       sections.map((section) => {
         const sectionOptions = optionsBySection.get(section.id) || [];
         if (sectionOptions.length === 0) return null;
-        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-            section.icon && /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: section.icon }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "font-semibold text-ods-text-primary text-h6", children: section.label }),
-              section.description && /* @__PURE__ */ jsx("div", { className: "text-ods-text-tertiary text-h6", children: section.description })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-2", children: sectionOptions.map(renderOption) })
+        return /* @__PURE__ */ jsxs("div", { className: SECTION_CLASS, children: [
+          /* @__PURE__ */ jsx(SectionHeader, { section }),
+          /* @__PURE__ */ jsx("div", { className: SECTION_CLASS, children: sectionOptions.map(renderOption) })
         ] }, section.id);
       }),
       ungroupedOptions.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-2", children: ungroupedOptions.map(renderOption) })
     ] });
   };
   const framedSkeletonCount = lazyLoad ? Math.max(skeletonCount, 4) : skeletonCount;
-  const listContent = isLoading ? /* @__PURE__ */ jsx(PushButtonSelectorSkeleton, { count: framedSkeletonCount }) : error ? /* @__PURE__ */ jsx(PushButtonSelectorError, { message: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  const listContent = loading ? /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading options", announce: !inScope, children: /* @__PURE__ */ jsx(OptionListSkeleton, { count: framedSkeletonCount, sections, description: skeletonDescription }) }) : error ? /* @__PURE__ */ jsx(PushButtonSelectorError, { message: error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     options.length === 0 && emptyMessage !== void 0 ? /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary text-h6", children: emptyMessage }) : renderOptionsContent(),
     lazyLoad ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { ref: sentinelRef }),
-      lazyLoad.isFetchingMore ? /* @__PURE__ */ jsx("div", { className: "py-2 text-center text-ods-text-secondary text-h6", children: "Loading more\u2026" }) : null
+      lazyLoad.isFetchingMore ? /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading more options", children: /* @__PURE__ */ jsx(OptionRowSkeleton, {}) }) : null
     ] }) : null
   ] });
-  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs("div", { className: `space-y-4 ${className}`, children: [
-    title && /* @__PURE__ */ jsx("h3", { className: "text-ods-text-primary text-h5", children: title }),
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: /* @__PURE__ */ jsxs("div", { className: cn(SELECTOR_STACK_CLASS, className), children: [
+    title && /* @__PURE__ */ jsx("h3", { className: SELECTOR_TITLE_CLASS, children: title }),
     searchInput,
     lazyLoad ? /* @__PURE__ */ jsx(
       "div",
@@ -203,7 +275,7 @@ function PushButtonSelector({
       }
     ) : listContent,
     footer,
-    !isLoading && !error && selectionSummary && validSelectedIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-success bg-ods-success-secondary p-4", children: [
+    !loading && !error && selectionSummary && validSelectedIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-ods-success bg-ods-success-secondary p-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-ods-success" }),
         /* @__PURE__ */ jsxs("span", { className: "text-ods-success text-h6", children: [
@@ -215,10 +287,11 @@ function PushButtonSelector({
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: getSelectedOptions().map((option) => /* @__PURE__ */ jsx(Badge, { className: "bg-ods-accent text-ods-text-primary text-h6", children: option.displayName || option.name }, option.id)) })
     ] }),
-    helpText && /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary text-h6", children: helpText }),
-    validSelectedIds.length === 0 && title && !optional && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-error bg-ods-error-secondary p-3", children: /* @__PURE__ */ jsx("div", { className: "text-ods-error text-h6", children: "\u26A0\uFE0F Please select at least one option" }) })
+    helpText && /* @__PURE__ */ jsx("div", { className: SELECTOR_HELP_CLASS, children: helpText }),
+    !loading && validSelectedIds.length === 0 && title && !optional && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-ods-error bg-ods-error-secondary p-3", children: /* @__PURE__ */ jsx("div", { className: "text-ods-error text-h6", children: "\u26A0\uFE0F Please select at least one option" }) })
   ] }) });
 }
 export {
-  PushButtonSelector
+  PushButtonSelector,
+  PushButtonSelectorSkeleton
 };

package/dist/components/features/remote-session/index.d.ts

@@ -4,13 +4,13 @@ export { RemoteSessionBlockFrame, RemoteSessionEndButton, RemoteSessionMinimized
 export type { RemoteSessionBlockFrameProps, RemoteSessionMinimizedChipProps, RemoteSessionSummaryProps, } from './remote-session-block';
 export { RemoteSessionChatPanel } from './remote-session-chat-panel';
 export type { RemoteSessionChatPanelProps } from './remote-session-chat-panel';
-export { RemoteDesktopChatMessageRow } from './remote-desktop-chat-message-row';
+export { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from './remote-desktop-chat-message-row';
 export type { RemoteDesktopChatMessageRowProps } from './remote-desktop-chat-message-row';
 export { REMOTE_DESKTOP_CHAT_END_USER_NAME, RemoteDesktopChatPanel } from './remote-desktop-chat-panel';
 export type { RemoteDesktopChatPanelProps, RemoteDesktopChatTechnician } from './remote-desktop-chat-panel';
 export { RemoteDesktopFullscreenToolbar } from './remote-desktop-fullscreen-toolbar';
 export type { RemoteDesktopFullscreenToolbarProps } from './remote-desktop-fullscreen-toolbar';
-export { RemoteDesktopView, RemoteDesktopViewSkeleton } from './remote-desktop-view';
+export { RemoteDesktopView } from './remote-desktop-view';
 export type { RemoteDesktopViewProps } from './remote-desktop-view';
 export { RemoteSessionDialog } from './remote-session-dialog';
 export type { RemoteSessionDialogProps } from './remote-session-dialog';

package/dist/components/features/remote-session/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/remote-session/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,YAAY,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EACV,4BAA4B,EAC5B,+BAA+B,EAC/B,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,YAAY,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAC;AAChF,YAAY,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AAC1F,OAAO,EAAE,iCAAiC,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACxG,YAAY,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC5G,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AACrF,YAAY,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AACrF,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EACL,iCAAiC,EACjC,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACxF,YAAY,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACvG,OAAO,EACL,sBAAsB,EACtB,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,2BAA2B,EAAE,iCAAiC,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACjH,YAAY,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,8BAA8B,GAC/B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EACL,gCAAgC,EAChC,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,kBAAkB,EAClB,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjG,YAAY,EACV,oBAAoB,EACpB,uBAAuB,EACvB,wBAAwB,EACxB,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/remote-session/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,YAAY,EAAE,4BAA4B,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EACV,4BAA4B,EAC5B,+BAA+B,EAC/B,yBAAyB,GAC1B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,YAAY,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,2BAA2B,EAAE,mCAAmC,EAAE,MAAM,mCAAmC,CAAC;AACrH,YAAY,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AAC1F,OAAO,EAAE,iCAAiC,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACxG,YAAY,EAAE,2BAA2B,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAC;AAC5G,OAAO,EAAE,8BAA8B,EAAE,MAAM,qCAAqC,CAAC;AACrF,YAAY,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,YAAY,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClF,OAAO,EACL,iCAAiC,EACjC,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EACV,uBAAuB,EACvB,sBAAsB,EACtB,wBAAwB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACxF,YAAY,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,MAAM,gCAAgC,CAAC;AACvG,OAAO,EACL,sBAAsB,EACtB,4BAA4B,EAC5B,yBAAyB,GAC1B,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,2BAA2B,EAAE,iCAAiC,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACjH,YAAY,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,8BAA8B,GAC/B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,YAAY,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EACL,gCAAgC,EAChC,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,kBAAkB,EAClB,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AACjG,YAAY,EACV,oBAAoB,EACpB,uBAAuB,EACvB,wBAAwB,EACxB,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/dist/components/features/remote-session/index.js

@@ -6,10 +6,10 @@ import {
   RemoteSessionSummary
 } from "./remote-session-block.js";
 import { RemoteSessionChatPanel } from "./remote-session-chat-panel.js";
-import { RemoteDesktopChatMessageRow } from "./remote-desktop-chat-message-row.js";
+import { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from "./remote-desktop-chat-message-row.js";
 import { REMOTE_DESKTOP_CHAT_END_USER_NAME, RemoteDesktopChatPanel } from "./remote-desktop-chat-panel.js";
 import { RemoteDesktopFullscreenToolbar } from "./remote-desktop-fullscreen-toolbar.js";
-import { RemoteDesktopView, RemoteDesktopViewSkeleton } from "./remote-desktop-view.js";
+import { RemoteDesktopView } from "./remote-desktop-view.js";
 import { RemoteSessionDialog } from "./remote-session-dialog.js";
 import { RemoteSessionBorder, RemoteSessionPill } from "./remote-session-overlay.js";
 import {
@@ -43,10 +43,10 @@ export {
   ReleaseKeepingModal,
   RemoteAccessRequestCard,
   RemoteDesktopChatMessageRow,
+  RemoteDesktopChatMessageRowSkeleton,
   RemoteDesktopChatPanel,
   RemoteDesktopFullscreenToolbar,
   RemoteDesktopView,
-  RemoteDesktopViewSkeleton,
   RemoteSessionBlockFrame,
   RemoteSessionBorder,
   RemoteSessionChatPanel,

package/dist/components/features/remote-session/remote-desktop-chat-message-row.d.ts

@@ -18,4 +18,6 @@ export interface RemoteDesktopChatMessageRowProps {
  * so the heading family is applied over `text-h4` via the ODS font variable.
  */
 export declare function RemoteDesktopChatMessageRow({ authorName, isTechnician, avatarUrl, sentAt, body, }: RemoteDesktopChatMessageRowProps): import("react").JSX.Element;
+/** A message row while the chat is read: the name and the time as bars on the name row, one line of the body. */
+export declare function RemoteDesktopChatMessageRowSkeleton(): import("react").JSX.Element;
 //# sourceMappingURL=remote-desktop-chat-message-row.d.ts.map

package/dist/components/features/remote-session/remote-desktop-chat-message-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remote-desktop-chat-message-row.d.ts","sourceRoot":"","sources":["../../../../src/components/features/remote-session/remote-desktop-chat-message-row.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,gCAAgC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,MAAM,EACN,IAAI,GACL,EAAE,gCAAgC,+BAuBlC"}
+{"version":3,"file":"remote-desktop-chat-message-row.d.ts","sourceRoot":"","sources":["../../../../src/components/features/remote-session/remote-desktop-chat-message-row.tsx"],"names":[],"mappings":"AAYA,MAAM,WAAW,gCAAgC;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,YAAY,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,UAAU,EACV,YAAY,EACZ,SAAS,EACT,MAAM,EACN,IAAI,GACL,EAAE,gCAAgC,+BAuBlC;AAED,iHAAiH;AACjH,wBAAgB,mCAAmC,gCAYlD"}

package/dist/components/features/remote-session/remote-desktop-chat-message-row.js

@@ -2,7 +2,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../../utils/cn.js";
 import { formatTime } from "../../../utils/format-date.js";
+import { TextLineSkeleton } from "../../loading/unified-skeleton.js";
 import { SquareAvatar } from "../../ui/square-avatar.js";
+const MESSAGE_ROW_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-xxs)]";
+const MESSAGE_HEAD_CLASS = "flex items-center gap-[var(--spacing-system-xxs)]";
+const MESSAGE_NAME_CLASS = "min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]";
 function RemoteDesktopChatMessageRow({
   authorName,
   isTechnician,
@@ -10,14 +14,14 @@ function RemoteDesktopChatMessageRow({
   sentAt,
   body
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xxs)]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--spacing-system-xxs)]", children: [
+  return /* @__PURE__ */ jsxs("div", { className: MESSAGE_ROW_CLASS, children: [
+    /* @__PURE__ */ jsxs("div", { className: MESSAGE_HEAD_CLASS, children: [
       isTechnician && /* @__PURE__ */ jsx(SquareAvatar, { variant: "round", sizePx: 24, src: avatarUrl, alt: authorName, className: "shrink-0" }),
       /* @__PURE__ */ jsx(
         "span",
         {
           className: cn(
-            "min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]",
+            MESSAGE_NAME_CLASS,
             isTechnician ? "text-ods-accent" : "text-ods-text-secondary"
           ),
           children: authorName
@@ -28,6 +32,16 @@ function RemoteDesktopChatMessageRow({
     /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap text-ods-text-primary text-h4", children: body })
   ] });
 }
+function RemoteDesktopChatMessageRowSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: MESSAGE_ROW_CLASS, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsxs("div", { className: MESSAGE_HEAD_CLASS, children: [
+      /* @__PURE__ */ jsx("span", { className: MESSAGE_NAME_CLASS, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }),
+      /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", as: "span", className: "w-12 shrink-0" })
+    ] }),
+    /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-3/4" })
+  ] });
+}
 export {
-  RemoteDesktopChatMessageRow
+  RemoteDesktopChatMessageRow,
+  RemoteDesktopChatMessageRowSkeleton
 };

package/dist/components/features/remote-session/remote-desktop-chat-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remote-desktop-chat-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/features/remote-session/remote-desktop-chat-panel.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,0FAA0F;AAC1F,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+FAA+F;AAC/F,eAAO,MAAM,iCAAiC,SAAS,CAAC;AAExD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,iGAAiG;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,2BAA2B,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C;;;;OAIG;IACH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,OAAO,EACP,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,GACR,EAAE,2BAA2B,+BAuD7B"}
+{"version":3,"file":"remote-desktop-chat-panel.d.ts","sourceRoot":"","sources":["../../../../src/components/features/remote-session/remote-desktop-chat-panel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAQxD,0FAA0F;AAC1F,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,+FAA+F;AAC/F,eAAO,MAAM,iCAAiC,SAAS,CAAC;AAExD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,wBAAwB,EAAE,CAAC;IACrC,iGAAiG;IACjG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,2BAA2B,CAAC;IACxC,OAAO,EAAE,OAAO,CAAC;IACjB,0EAA0E;IAC1E,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC3C;;;;OAIG;IACH,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;CAC7B;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,OAAO,EACP,UAAU,EACV,OAAO,EACP,MAAM,EACN,OAAO,GACR,EAAE,2BAA2B,+BA8D7B"}

package/dist/components/features/remote-session/remote-desktop-chat-panel.js

@@ -3,7 +3,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { cn } from "../../../utils/cn.js";
 import { ChatInput } from "../../chat/chat-input.js";
-import { RemoteDesktopChatMessageRow } from "./remote-desktop-chat-message-row.js";
+import { LoadingRegion } from "../../loading/loading-region.js";
+import { RemoteDesktopChatMessageRow, RemoteDesktopChatMessageRowSkeleton } from "./remote-desktop-chat-message-row.js";
+const CHAT_PANEL_FOLD = 10;
 const REMOTE_DESKTOP_CHAT_END_USER_NAME = "User";
 function RemoteDesktopChatPanel({
   messages,
@@ -28,7 +30,14 @@ function RemoteDesktopChatPanel({
         variant === "side" ? "h-full w-[400px] flex-shrink-0" : "absolute bottom-[var(--spacing-system-mf)] right-[var(--spacing-system-mf)] top-[calc(var(--spacing-system-xlf)+var(--spacing-system-mf))] z-10 w-[360px] shadow-lg"
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full flex-col justify-end gap-[var(--spacing-system-xsf)]", children: rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-center text-ods-text-muted text-h6", children: loading ? "Loading the chat..." : "No messages yet - say hello to the user." }) : rows.map((message) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "flex min-h-full flex-col justify-end gap-[var(--spacing-system-xsf)]", children: rows.length === 0 && loading ? (
+          // The chat while it is read: a screen of the panel's own message rows, stacked by a one-column grid
+          // (the thread above is already the column flexbox: WEBVIEW-001).
+          /* @__PURE__ */ jsx(LoadingRegion, { label: "Loading the chat", className: "grid grid-cols-1 gap-[var(--spacing-system-xsf)]", children: Array.from({ length: CHAT_PANEL_FOLD }, (_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+            /* @__PURE__ */ jsx(RemoteDesktopChatMessageRowSkeleton, {}, i)
+          )) })
+        ) : rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-center text-ods-text-muted text-h6", children: "No messages yet - say hello to the user." }) : rows.map((message) => /* @__PURE__ */ jsx(
           RemoteDesktopChatMessageRow,
           {
             authorName: message.name || (message.author === "technician" ? technician.name : REMOTE_DESKTOP_CHAT_END_USER_NAME),