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

package/dist/{chunk-2IFCRPNP.cjs → chunk-ZV45VS6K.cjs}

@@ -10,14 +10,14 @@ var _chunkA6P6DHEZcjs = require('./chunk-A6P6DHEZ.cjs');
 
 
 
-var _chunkGZKWF6NHcjs = require('./chunk-GZKWF6NH.cjs');
+var _chunkXZ6DKGT4cjs = require('./chunk-XZ6DKGT4.cjs');
 
 
 
 
 
 
-var _chunkEFTUFJS2cjs = require('./chunk-EFTUFJS2.cjs');
+var _chunkLELS4XMXcjs = require('./chunk-LELS4XMX.cjs');
 
 
 var _chunk2NETL2MScjs = require('./chunk-2NETL2MS.cjs');
@@ -102,242 +102,59 @@ var _chunkSKI6NKOEcjs = require('./chunk-SKI6NKOE.cjs');
 
 
 
-var _chunkEQZXJUYVcjs = require('./chunk-EQZXJUYV.cjs');
+var _chunkJTSUAHDLcjs = require('./chunk-JTSUAHDL.cjs');
 
 
 var _chunkRUHKTWGBcjs = require('./chunk-RUHKTWGB.cjs');
 
 
 
-var _chunkR3TWQ3ZJcjs = require('./chunk-R3TWQ3ZJ.cjs');
+var _chunk5P4TDV7Vcjs = require('./chunk-5P4TDV7V.cjs');
 
 
-var _chunkHOTM4UM6cjs = require('./chunk-HOTM4UM6.cjs');
+var _chunkE76ONBKFcjs = require('./chunk-E76ONBKF.cjs');
 
 
 
-var _chunkHTRILBJDcjs = require('./chunk-HTRILBJD.cjs');
+var _chunkYXDHVHB2cjs = require('./chunk-YXDHVHB2.cjs');
 
 
 
 
 
-var _chunkAKK3EO37cjs = require('./chunk-AKK3EO37.cjs');
 
+var _chunkXIFEZ2JTcjs = require('./chunk-XIFEZ2JT.cjs');
 
-var _chunkNO5UJLLQcjs = require('./chunk-NO5UJLLQ.cjs');
 
+var _chunkWEANWBJHcjs = require('./chunk-WEANWBJH.cjs');
 
 
 
 
-var _chunk2QMBXGMQcjs = require('./chunk-2QMBXGMQ.cjs');
 
 
-var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
-
+var _chunkXFRBEXQNcjs = require('./chunk-XFRBEXQN.cjs');
 
-var _chunkOF336YWGcjs = require('./chunk-OF336YWG.cjs');
 
 
-var _chunkRB6BSE3Ocjs = require('./chunk-RB6BSE3O.cjs');
+var _chunkTF5D5MNOcjs = require('./chunk-TF5D5MNO.cjs');
 
 
-var _chunkH3RYUTNDcjs = require('./chunk-H3RYUTND.cjs');
+var _chunkV45KLJQPcjs = require('./chunk-V45KLJQP.cjs');
 
 
-var _chunk3ATAYP36cjs = require('./chunk-3ATAYP36.cjs');
+var _chunk65VVJSQZcjs = require('./chunk-65VVJSQZ.cjs');
 
-// src/components/ui/button/split-button.tsx
-var _classvarianceauthority = require('class-variance-authority');
+// src/components/ui/hidden-tags-popup.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
 var _jsxruntime = require('react/jsx-runtime');
-var splitHalfBase = [
-  "relative inline-flex items-center justify-center gap-[var(--spacing-system-xsf)]",
-  "whitespace-nowrap transition-colors duration-200",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus focus-visible:z-10",
-  "disabled:pointer-events-none",
-  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
-];
-var splitHalfVariants = _classvarianceauthority.cva.call(void 0, splitHalfBase, {
-  variants: {
-    variant: {
-      accent: _chunk2QMBXGMQcjs.buttonSurfaceClasses.accent,
-      outline: _chunk2QMBXGMQcjs.buttonSurfaceClasses.outline,
-      // Outline border lives in compoundVariants so we can omit the seam edge.
-      transparent: _chunk2QMBXGMQcjs.buttonSurfaceClasses.transparent,
-      destructive: _chunk2QMBXGMQcjs.buttonSurfaceClasses.destructive,
-      warning: _chunk2QMBXGMQcjs.buttonSurfaceClasses.warning
-    },
-    size: {
-      default: `h-10 px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] text-h3 md:h-12 ${_chunk2QMBXGMQcjs.splitGlyphSizeClasses}`,
-      small: "h-6 px-[var(--spacing-system-xs)] text-h5 md:h-8 [&_svg]:h-3 [&_svg]:w-3 md:[&_svg]:h-4 md:[&_svg]:w-4"
-    },
-    side: { main: "", icon: "" },
-    soloOnMobile: { true: "", false: "" }
-  },
-  compoundVariants: [
-    // Rounded corners + per-variant seam. The icon-side's left border is the divider.
-    { variant: "accent", side: "main", class: "rounded-l-md" },
-    {
-      variant: "accent",
-      side: "icon",
-      class: _chunk3ATAYP36cjs.cn.call(void 0, 
-        "rounded-r-md border-l",
-        _chunk2QMBXGMQcjs.splitDividerColorClasses.accent,
-        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
-      )
-    },
-    { variant: "destructive", side: "main", class: "rounded-l-md" },
-    {
-      variant: "destructive",
-      side: "icon",
-      class: _chunk3ATAYP36cjs.cn.call(void 0, 
-        "rounded-r-md border-l",
-        _chunk2QMBXGMQcjs.splitDividerColorClasses.destructive,
-        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
-      )
-    },
-    { variant: "warning", side: "main", class: "rounded-l-md" },
-    {
-      variant: "warning",
-      side: "icon",
-      class: _chunk3ATAYP36cjs.cn.call(void 0, 
-        "rounded-r-md border-l",
-        _chunk2QMBXGMQcjs.splitDividerColorClasses.warning,
-        "disabled:border-ods-disabled aria-disabled:border-ods-disabled"
-      )
-    },
-    { variant: "outline", side: "main", class: "rounded-l-md border-y border-l border-ods-border" },
-    { variant: "outline", side: "icon", class: "rounded-r-md border border-ods-border" },
-    { variant: "transparent", side: "main", class: "rounded-md" },
-    { variant: "transparent", side: "icon", class: _chunk3ATAYP36cjs.cn.call(void 0, "rounded-md", _chunk2QMBXGMQcjs.splitDividerColorClasses.transparent) },
-    // Icon half: per Figma, narrower than main height (default: 40×48; small: 32×32).
-    { side: "icon", size: "default", class: "w-10 px-0" },
-    { side: "icon", size: "small", class: "w-6 px-0 md:w-8" },
-    { side: "icon", soloOnMobile: true, class: "max-md:hidden" },
-    { side: "main", soloOnMobile: true, class: "max-md:rounded-r-md" },
-    { variant: "outline", side: "main", soloOnMobile: true, class: "max-md:border-r" }
-  ],
-  defaultVariants: { variant: "accent", size: "default", side: "main", soloOnMobile: false }
-});
-function Half({
-  variant,
-  size,
-  side,
-  soloOnMobile,
-  href,
-  openInNewTab,
-  prefetch,
-  onClick,
-  disabled,
-  grow,
-  type = "button",
-  ariaLabel,
-  children
-}) {
-  const classes = _chunk3ATAYP36cjs.cn.call(void 0, splitHalfVariants({ variant, size, side, soloOnMobile }), grow && "flex-1");
-  if (href) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkV45KLJQPcjs.next_link_default,
-      {
-        href,
-        prefetch,
-        target: openInNewTab ? "_blank" : void 0,
-        rel: openInNewTab ? "noopener noreferrer" : void 0,
-        "aria-disabled": disabled || void 0,
-        tabIndex: disabled ? -1 : void 0,
-        "aria-label": ariaLabel,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, classes, disabled && "pointer-events-none"),
-        onClick,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type, className: classes, disabled, "aria-label": ariaLabel, onClick, children });
-}
-var SplitButton = _react2.default.forwardRef(function SplitButtonImpl({
-  variant = "accent",
-  size = "default",
-  fullWidth = false,
-  className,
-  children,
-  onClick,
-  href,
-  openInNewTab,
-  prefetch,
-  leftIcon,
-  rightIcon,
-  disabled,
-  mainDisabled,
-  type,
-  iconAction,
-  "aria-label": ariaLabel,
-  groupAriaLabel
-}, ref) {
-  const soloOnMobile = !!iconAction.openInNewTab;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "div",
-    {
-      ref,
-      role: "group",
-      "aria-label": groupAriaLabel,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, "inline-flex items-stretch", fullWidth && "w-full", className),
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          Half,
-          {
-            variant,
-            size,
-            side: "main",
-            soloOnMobile,
-            href,
-            openInNewTab,
-            prefetch,
-            onClick,
-            disabled: disabled || mainDisabled,
-            grow: fullWidth,
-            type,
-            ariaLabel,
-            children: [
-              leftIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: leftIcon }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children }),
-              rightIcon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: rightIcon })
-            ]
-          }
-        ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          Half,
-          {
-            variant,
-            size,
-            side: "icon",
-            soloOnMobile,
-            href: iconAction.href,
-            openInNewTab: iconAction.openInNewTab,
-            prefetch: iconAction.prefetch,
-            onClick: iconAction.onClick,
-            disabled: disabled || iconAction.disabled,
-            ariaLabel: iconAction["aria-label"],
-            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex items-center", children: iconAction.icon })
-          }
-        )
-      ]
-    }
-  );
-});
-SplitButton.displayName = "SplitButton";
-
-// src/components/ui/hidden-tags-popup.tsx
-
-
 var HiddenTagsPopup = _react.forwardRef.call(void 0, function HiddenTagsPopupImpl({ items, onRemove, disabled, className, style }, ref) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
       ref,
       style,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         // Base positioning is neutral (left-anchored); consumers override via
         // `style.left` (search-input, tag-search-input) or `className` (autocomplete).
         "absolute left-0 top-full z-50 mt-1 min-w-[200px]",
@@ -348,7 +165,7 @@ var HiddenTagsPopup = _react.forwardRef.call(void 0, function HiddenTagsPopupImp
       children: items.map((item) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
         {
-          className: _chunk3ATAYP36cjs.cn.call(void 0, 
+          className: _chunk65VVJSQZcjs.cn.call(void 0, 
             "flex h-11 items-center justify-between gap-3 px-3 md:h-12",
             "border-b border-ods-border last:border-b-0"
           ),
@@ -417,22 +234,22 @@ function TruncateText({
   as = "div"
 }) {
   const isMultiLine = lines > 1;
-  const { ref, isTruncated } = _chunkR3TWQ3ZJcjs.useIsTruncated.call(void 0, children, { multiline: isMultiLine });
+  const { ref, isTruncated } = _chunk5P4TDV7Vcjs.useIsTruncated.call(void 0, children, { multiline: isMultiLine });
   const clampClass = isMultiLine ? LINE_CLAMP_CLASS[lines] : "truncate block";
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkEQZXJUYVcjs.FloatingTooltip,
+    _chunkJTSUAHDLcjs.FloatingTooltip,
     {
       content: _nullishCoalesce(tooltip, () => ( children)),
       side,
       disabled: !isTruncated,
       className: "max-w-xs whitespace-pre-line [overflow-wrap:anywhere]",
       as,
-      triggerClassName: _chunk3ATAYP36cjs.cn.call(void 0, "min-w-0 max-w-full", as === "span" && "inline-block align-bottom", triggerClassName),
+      triggerClassName: _chunk65VVJSQZcjs.cn.call(void 0, "min-w-0 max-w-full", as === "span" && "inline-block align-bottom", triggerClassName),
       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "span",
         {
           ref,
-          className: _chunk3ATAYP36cjs.cn.call(void 0, 
+          className: _chunk65VVJSQZcjs.cn.call(void 0, 
             VARIANT_CLASS[variant],
             TONE_CLASS[tone],
             mono && "[font-family:var(--font-family-heading)]",
@@ -459,14 +276,22 @@ var _lucidereact = require('lucide-react');
 
 
 
-var innerInputStyles = _chunk3ATAYP36cjs.cn.call(void 0, 
+var innerInputStyles = _chunk65VVJSQZcjs.cn.call(void 0, 
   "min-w-[60px] flex-1 border-none bg-transparent outline-none",
   "text-h4",
   "text-ods-text-primary placeholder:text-ods-text-secondary",
   // Disabled - match Input exactly (value greys out, placeholder dims further)
   "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border"
 );
+var AUTOCOMPLETE_ANCHOR_HEIGHT_CLASS = "min-h-11 md:min-h-12";
+var AUTOCOMPLETE_OPTION_ROW_CLASS = "flex min-h-11 items-center border-b border-ods-border px-[var(--spacing-system-mf)] py-[var(--spacing-system-xsf)] last:border-b-0 md:min-h-12 text-h4";
+var AUTOCOMPLETE_OPTIONS_FOLD = 5;
+var AUTOCOMPLETE_ANCHOR_SHAPE_CLASS = "rounded-[6px]";
+function AutocompleteSkeleton({ label, labelVariant, className }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYXDHVHB2cjs.FieldWrapper, { label, labelVariant, className, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { className: _chunk65VVJSQZcjs.cn.call(void 0, "w-full", AUTOCOMPLETE_ANCHOR_SHAPE_CLASS, AUTOCOMPLETE_ANCHOR_HEIGHT_CLASS) }) });
+}
 function AutocompleteInner(props, ref) {
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
   const {
     options,
     disabled = false,
@@ -485,7 +310,8 @@ function AutocompleteInner(props, ref) {
     inputValue: inputValueProp,
     onInputChange,
     loading = false,
-    loadingText = "Loading...",
+    loadingText = "Loading options",
+    fieldLoading = false,
     creatable = false,
     onCreateOption,
     maxCreateLength,
@@ -513,7 +339,7 @@ function AutocompleteInner(props, ref) {
     if (!isInputControlled) {
       setInternalInputValue(value);
     }
-    _optionalChain([onInputChange, 'optionalCall', _ => _(value, reason)]);
+    _optionalChain([onInputChange, 'optionalCall', _2 => _2(value, reason)]);
   };
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [highlightedIndex, setHighlightedIndex] = _react.useState.call(void 0, -1);
@@ -526,7 +352,7 @@ function AutocompleteInner(props, ref) {
     return valueArray.map((v) => _nullishCoalesce(options.find((opt) => opt.value === v), () => ( { label: String(v), value: v })));
   }, [valueArray, options]);
   const selectedOption = !multiple && selectedOptions.length > 0 ? selectedOptions[0] : null;
-  const resolvedStartAdornment = _nullishCoalesce(_nullishCoalesce(startAdornment, () => ( _optionalChain([selectedOption, 'optionalAccess', _2 => _2.icon]))), () => ( null));
+  const resolvedStartAdornment = _nullishCoalesce(_nullishCoalesce(startAdornment, () => ( _optionalChain([selectedOption, 'optionalAccess', _3 => _3.icon]))), () => ( null));
   const inputPlaceholder = multiple ? valueArray.length === 0 ? placeholder : "Add More..." : placeholder;
   const {
     visibleCount: autoVisibleCount,
@@ -550,8 +376,8 @@ function AutocompleteInner(props, ref) {
     if (!showHiddenTags) return void 0;
     const handleClick = (e) => {
       const target = e.target;
-      const inButton = _optionalChain([hiddenTagsRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.contains, 'call', _5 => _5(target)]);
-      const inPopup = _optionalChain([hiddenTagsPopupRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.contains, 'call', _8 => _8(target)]);
+      const inButton = _optionalChain([hiddenTagsRef, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.contains, 'call', _6 => _6(target)]);
+      const inPopup = _optionalChain([hiddenTagsPopupRef, 'access', _7 => _7.current, 'optionalAccess', _8 => _8.contains, 'call', _9 => _9(target)]);
       if (!inButton && !inPopup) {
         setShowHiddenTags(false);
       }
@@ -594,7 +420,7 @@ function AutocompleteInner(props, ref) {
     }
     updateInputValue("", "reset");
     setIsOpen(false);
-    _optionalChain([onCreateOption, 'optionalCall', _9 => _9(trimmed)]);
+    _optionalChain([onCreateOption, 'optionalCall', _10 => _10(trimmed)]);
   };
   const [highlightedFor, setHighlightedFor] = _react.useState.call(void 0, filteredOptions.length);
   if (highlightedFor !== filteredOptions.length) {
@@ -620,7 +446,7 @@ function AutocompleteInner(props, ref) {
         props.onChange([...valueArray, option.value]);
       }
       updateInputValue("", "reset");
-      _optionalChain([inputRef, 'access', _10 => _10.current, 'optionalAccess', _11 => _11.focus, 'call', _12 => _12()]);
+      _optionalChain([inputRef, 'access', _11 => _11.current, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]);
     } else {
       props.onChange(option.value);
       updateInputValue(clearOnOpen ? "" : option.label, "reset");
@@ -638,7 +464,7 @@ function AutocompleteInner(props, ref) {
     if (!isInputControlled) {
       setInternalInputValue("");
     }
-    _optionalChain([onInputChange, 'optionalCall', _13 => _13("", "clear")]);
+    _optionalChain([onInputChange, 'optionalCall', _14 => _14("", "clear")]);
     setIsOpen(false);
   };
   const handleKeyDown = (e) => {
@@ -695,9 +521,11 @@ function AutocompleteInner(props, ref) {
       "div",
       {
         "data-invalid": isInvalid || void 0,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           // Layout — single line, no wrapping
-          "flex min-h-11 cursor-text items-center rounded-[6px] border md:min-h-12",
+          "flex cursor-text items-center border",
+          AUTOCOMPLETE_ANCHOR_SHAPE_CLASS,
+          AUTOCOMPLETE_ANCHOR_HEIGHT_CLASS,
           "focus-within:outline-none",
           "transition-colors duration-200",
           "border-ods-border bg-ods-card",
@@ -717,7 +545,7 @@ function AutocompleteInner(props, ref) {
         ),
         onClick: () => {
           if (!disabled) {
-            _optionalChain([inputRef, 'access', _14 => _14.current, 'optionalAccess', _15 => _15.focus, 'call', _16 => _16()]);
+            _optionalChain([inputRef, 'access', _15 => _15.current, 'optionalAccess', _16 => _16.focus, 'call', _17 => _17()]);
             openDropdown();
           }
         },
@@ -725,7 +553,7 @@ function AutocompleteInner(props, ref) {
           resolvedStartAdornment && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "span",
             {
-              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+              className: _chunk65VVJSQZcjs.cn.call(void 0, 
                 // Images are sized alongside svgs: an entity adornment is
                 // usually a flag or a crest, and an unconstrained <img> lays
                 // out at 0x0 inside this flex row.
@@ -741,13 +569,13 @@ function AutocompleteInner(props, ref) {
             "div",
             {
               ref: middleRef,
-              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+              className: _chunk65VVJSQZcjs.cn.call(void 0, 
                 "flex min-w-0 flex-1 items-center gap-2 px-2",
                 wrapTags ? "flex-wrap py-[var(--spacing-system-xsf)]" : "overflow-hidden"
               ),
               children: [
                 multiple && visibleTags.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkEQZXJUYVcjs.Tag,
+                  _chunkJTSUAHDLcjs.Tag,
                   {
                     variant: "outline",
                     className: wrapTags ? "max-w-full" : void 0,
@@ -771,7 +599,7 @@ function AutocompleteInner(props, ref) {
                         return !prev;
                       });
                     },
-                    className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                    className: _chunk65VVJSQZcjs.cn.call(void 0, 
                       "flex h-8 items-center px-2",
                       "rounded-[6px] border border-ods-border bg-ods-card",
                       "text-ods-text-secondary text-h5",
@@ -811,7 +639,7 @@ function AutocompleteInner(props, ref) {
             loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _lucidereact.Loader2,
               {
-                className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                className: _chunk65VVJSQZcjs.cn.call(void 0, 
                   "size-4 animate-spin md:size-6",
                   isInvalid ? "text-ods-error" : isOpen ? "text-ods-accent" : "text-ods-text-secondary"
                 )
@@ -819,7 +647,7 @@ function AutocompleteInner(props, ref) {
             ) : showChevron && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               _chunkSKI6NKOEcjs.Chevron02DownIcon,
               {
-                className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                className: _chunk65VVJSQZcjs.cn.call(void 0, 
                   "size-4 transition-all duration-200 md:size-6",
                   "text-ods-text-secondary",
                   isOpen && "rotate-180",
@@ -835,7 +663,7 @@ function AutocompleteInner(props, ref) {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       PopoverPrimitive.Content,
       {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "z-50 mt-1 w-[var(--radix-popover-trigger-width)]",
           "rounded-[4px] border border-ods-border bg-ods-card",
           "flex max-h-[var(--radix-popper-available-height)] flex-col overflow-hidden",
@@ -848,15 +676,22 @@ function AutocompleteInner(props, ref) {
         collisionPadding: { bottom: keyboardPadding },
         onOpenAutoFocus: (e) => {
           e.preventDefault();
-          _optionalChain([inputRef, 'access', _17 => _17.current, 'optionalAccess', _18 => _18.focus, 'call', _19 => _19()]);
+          _optionalChain([inputRef, 'access', _18 => _18.current, 'optionalAccess', _19 => _19.focus, 'call', _20 => _20()]);
         },
         onInteractOutside: (e) => {
-          if (_optionalChain([containerRef, 'access', _20 => _20.current, 'optionalAccess', _21 => _21.contains, 'call', _22 => _22(e.target)])) {
+          if (_optionalChain([containerRef, 'access', _21 => _21.current, 'optionalAccess', _22 => _22.contains, 'call', _23 => _23(e.target)])) {
             e.preventDefault();
           }
         },
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ScrollAreaPrimitive.Root, { className: "flex min-h-0 flex-col overflow-hidden", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Viewport, { className: "max-h-[240px] min-h-0 w-full [&>div]:!block", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: "listbox", children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-ods-text-secondary text-h6", children: loadingText }) : filteredOptions.length === 0 ? showCreateOption ? isCreateTooLong ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-11 min-w-0 items-center px-[var(--spacing-system-mf)] text-ods-error text-h5 md:h-12", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ScrollAreaPrimitive.Viewport, { className: "max-h-[240px] min-h-0 w-full [&>div]:!block", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { role: loading ? void 0 : "listbox", children: loading ? (
+            // The options while they are read: the list's own rows, a label bar each (`loadingText` is what a
+            // screen reader hears).
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: loadingText, children: Array.from({ length: AUTOCOMPLETE_OPTIONS_FOLD }, (_, i) => (
+              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows never reorder
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: AUTOCOMPLETE_OPTION_ROW_CLASS, "aria-hidden": true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", className: "w-2/3" }) }, i)
+            )) })
+          ) : filteredOptions.length === 0 ? showCreateOption ? isCreateTooLong ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-11 min-w-0 items-center px-[var(--spacing-system-mf)] text-ods-error text-h5 md:h-12", children: [
             "Maximum ",
             maxCreateLength,
             " characters"
@@ -865,7 +700,7 @@ function AutocompleteInner(props, ref) {
             {
               role: "option",
               "aria-selected": false,
-              className: _chunk3ATAYP36cjs.cn.call(void 0, 
+              className: _chunk65VVJSQZcjs.cn.call(void 0, 
                 "flex h-11 min-w-0 cursor-pointer items-center px-[var(--spacing-system-mf)] transition-colors md:h-12",
                 "text-ods-accent text-h4",
                 "hover:bg-ods-bg-hover"
@@ -885,11 +720,11 @@ function AutocompleteInner(props, ref) {
               {
                 role: "option",
                 "aria-selected": isSelected,
-                className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                className: _chunk65VVJSQZcjs.cn.call(void 0, 
                   // `min-h` rather than a fixed height: an option may carry
                   // a second line, and a clipped one is worse than a taller row.
-                  "group/item flex min-h-11 cursor-pointer items-center border-b border-ods-border px-[var(--spacing-system-mf)] py-[var(--spacing-system-xsf)] transition-colors last:border-b-0 md:min-h-12",
-                  "text-h4",
+                  AUTOCOMPLETE_OPTION_ROW_CLASS,
+                  "group/item cursor-pointer transition-colors",
                   isHighlighted && "bg-ods-bg-surface",
                   isSelected ? "text-ods-accent" : "text-ods-text-primary",
                   !isHighlighted && "hover:bg-ods-bg-hover"
@@ -931,8 +766,10 @@ function AutocompleteInner(props, ref) {
       }
     )
   ] });
+  if (inScope || fieldLoading)
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AutocompleteSkeleton, { label, labelVariant, className });
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkHTRILBJDcjs.FieldWrapper,
+    _chunkYXDHVHB2cjs.FieldWrapper,
     {
       label,
       labelVariant,
@@ -972,7 +809,7 @@ function AutocompleteInner(props, ref) {
               "aria-hidden": "true",
               className: "pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-2",
               children: selectedOptions.map((option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkEQZXJUYVcjs.Tag,
+                _chunkJTSUAHDLcjs.Tag,
                 {
                   variant: "outline",
                   labelClassName: "max-w-[90px] truncate",
@@ -1008,7 +845,7 @@ var SelectTrigger = _react.forwardRef.call(void 0, (allProps, ref) => {
     {
       ref,
       "data-invalid": isInvalid || void 0,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         // Layout & spacing - match Input
         // text-left resets the <button> UA default text-align:center, which the
         // SelectValue span inherits and would otherwise center short values,
@@ -1040,7 +877,7 @@ var SelectTrigger = _react.forwardRef.call(void 0, (allProps, ref) => {
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           _chunkSKI6NKOEcjs.Chevron02DownIcon,
           {
-            className: _chunk3ATAYP36cjs.cn.call(void 0, 
+            className: _chunk65VVJSQZcjs.cn.call(void 0, 
               "shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180",
               isInvalid ? "text-ods-error" : "group-data-[state=open]:text-ods-accent"
             ),
@@ -1050,14 +887,14 @@ var SelectTrigger = _react.forwardRef.call(void 0, (allProps, ref) => {
       ]
     }
   );
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHTRILBJDcjs.FieldWrapper, { label, labelVariant, error, errorSlot, children: trigger });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYXDHVHB2cjs.FieldWrapper, { label, labelVariant, error, errorSlot, children: trigger });
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 var SelectScrollUpButton = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   SelectPrimitive.ScrollUpButton,
   {
     ref,
-    className: _chunk3ATAYP36cjs.cn.call(void 0, "flex cursor-default items-center justify-center py-1", className),
+    className: _chunk65VVJSQZcjs.cn.call(void 0, "flex cursor-default items-center justify-center py-1", className),
     ...props,
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronUp, { className: "h-4 w-4" })
   }
@@ -1067,19 +904,19 @@ var SelectScrollDownButton = _react.forwardRef.call(void 0, ({ className, ...pro
   SelectPrimitive.ScrollDownButton,
   {
     ref,
-    className: _chunk3ATAYP36cjs.cn.call(void 0, "flex cursor-default items-center justify-center py-1", className),
+    className: _chunk65VVJSQZcjs.cn.call(void 0, "flex cursor-default items-center justify-center py-1", className),
     ...props,
     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 var SelectContent = _react.forwardRef.call(void 0, ({ className, children, position = "popper", ...props }, ref) => {
-  const container = _chunkRB6BSE3Ocjs.usePortalContainer.call(void 0, );
+  const container = _chunkXIFEZ2JTcjs.usePortalContainer.call(void 0, );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Portal, { container: _nullishCoalesce(container, () => ( void 0)), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     SelectPrimitive.Content,
     {
       ref,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "relative z-[9999] max-h-96 overflow-hidden rounded-[4px] border border-ods-border bg-ods-card text-ods-text-primary",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
@@ -1100,13 +937,13 @@ var SelectContent = _react.forwardRef.call(void 0, ({ className, children, posit
   ) });
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Label, { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "py-1.5 pl-8 pr-2 font-semibold text-h6", className), ...props }));
+var SelectLabel = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Label, { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "py-1.5 pl-8 pr-2 font-semibold text-h6", className), ...props }));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 var SelectItem = _react.forwardRef.call(void 0, ({ className, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
   SelectPrimitive.Item,
   {
     ref,
-    className: _chunk3ATAYP36cjs.cn.call(void 0, 
+    className: _chunk65VVJSQZcjs.cn.call(void 0, 
       "flex h-11 w-full cursor-pointer select-none items-center justify-between border-b border-ods-border px-4 last:border-b-0 md:h-12",
       // Typography - match trigger
       "whitespace-nowrap text-h4",
@@ -1124,12 +961,12 @@ var SelectItem = _react.forwardRef.call(void 0, ({ className, children, ...props
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Separator, { ref, className: _chunk3ATAYP36cjs.cn.call(void 0, "-mx-1 my-1 h-px bg-ods-border", className), ...props }));
+var SelectSeparator = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectPrimitive.Separator, { ref, className: _chunk65VVJSQZcjs.cn.call(void 0, "-mx-1 my-1 h-px bg-ods-border", className), ...props }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/layout/back-button.tsx
 
-var BACK_BUTTON_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, 
+var BACK_BUTTON_CLASS = _chunk65VVJSQZcjs.cn.call(void 0, 
   "group inline-flex items-center justify-center self-start rounded-md",
   "gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)]",
   "text-ods-text-secondary hover:text-ods-text-primary",
@@ -1160,12 +997,12 @@ function BackButton({ label = "Back", className, type = "button", href, ...props
       {
         ...shared,
         href,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, BACK_BUTTON_CLASS, className),
+        className: _chunk65VVJSQZcjs.cn.call(void 0, BACK_BUTTON_CLASS, className),
         children: content
       }
     );
   }
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type, className: _chunk3ATAYP36cjs.cn.call(void 0, BACK_BUTTON_CLASS, className), ...props, children: content });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type, className: _chunk65VVJSQZcjs.cn.call(void 0, BACK_BUTTON_CLASS, className), ...props, children: content });
 }
 
 // src/components/ui/page-actions.tsx
@@ -1174,6 +1011,15 @@ function BackButton({ label = "Back", className, type = "button", href, ...props
 function actionKey(action, idx) {
   return `${_nullishCoalesce(_nullishCoalesce(action.label, () => ( action.ariaLabel)), () => ( "action"))}-${idx}`;
 }
+var FILLED_VARIANTS = /* @__PURE__ */ new Set([
+  "accent",
+  "destructive",
+  "warning"
+]);
+function menuRowIcon(action) {
+  if (!action.icon || !FILLED_VARIANTS.has(_nullishCoalesce(action.variant, () => ( "accent")))) return action.icon;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex [&&_svg]:!text-ods-text-secondary", children: action.icon });
+}
 function actionToMenuItems(action, idx) {
   if (action.submenu && action.submenu.length > 0) {
     if (!action.label) return action.submenu;
@@ -1187,7 +1033,7 @@ function actionToMenuItems(action, idx) {
     {
       id: `action-${idx}`,
       label: action.label,
-      icon: action.icon,
+      icon: menuRowIcon(action),
       onClick: action.onClick,
       disabled: action.disabled,
       href: action.href,
@@ -1205,15 +1051,15 @@ function actionToMenuItems(action, idx) {
 function renderActionButton(action, opts = {}) {
   const button = renderRawActionButton(action, opts);
   if (!action.tooltip) return button;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEFTUFJS2cjs.Tooltip, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.TooltipContent, { children: action.tooltip })
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkLELS4XMXcjs.Tooltip, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.TooltipContent, { children: action.tooltip })
   ] }) });
 }
 function renderRawActionButton(action, opts = {}) {
   if (action.iconAction) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      SplitButton,
+      _chunkTF5D5MNOcjs.SplitButton,
       {
         variant: _nullishCoalesce(action.variant, () => ( void 0)),
         href: action.href,
@@ -1231,11 +1077,11 @@ function renderRawActionButton(action, opts = {}) {
   }
   if (action.submenu && action.submenu.length > 0) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkEFTUFJS2cjs.ActionsMenuDropdown,
+      _chunkLELS4XMXcjs.ActionsMenuDropdown,
       {
         groups: [{ items: action.submenu }],
         customTrigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
+          _chunkTF5D5MNOcjs.Button,
           {
             variant: "outline",
             disabled: action.disabled,
@@ -1253,7 +1099,7 @@ function renderRawActionButton(action, opts = {}) {
   if (isIconOnly) {
     const iconNode = action.iconOnlyOnDesktop ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "inline-flex [&_svg]:!text-ods-text-primary", children: action.icon }) : action.icon;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk2QMBXGMQcjs.Button,
+      _chunkTF5D5MNOcjs.Button,
       {
         variant: action.variant,
         size: "icon",
@@ -1269,7 +1115,7 @@ function renderRawActionButton(action, opts = {}) {
     );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2QMBXGMQcjs.Button,
+    _chunkTF5D5MNOcjs.Button,
     {
       variant: action.variant,
       href: action.href,
@@ -1285,10 +1131,6 @@ function renderRawActionButton(action, opts = {}) {
   );
 }
 var ACTIONS_GAP = "gap-[var(--spacing-system-xs)]";
-var SKELETON_HEIGHT = "h-11 md:h-12";
-var SKELETON_ICON_WIDTH = "w-11 md:w-12";
-var SKELETON_LABEL_WIDTH = "w-[120px] md:w-[140px]";
-var SKELETON_RADIUS = "rounded-md";
 function ActionSkeletons({
   actions,
   fullWidth,
@@ -1297,20 +1139,20 @@ function ActionSkeletons({
   const items = actions.length > 0 ? actions : [null];
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: items.map((action, idx) => {
     const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === "icon";
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkH3RYUTNDcjs.UnifiedSkeleton,
-      {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
-          SKELETON_HEIGHT,
-          SKELETON_RADIUS,
-          isIconOnly ? SKELETON_ICON_WIDTH : fullWidth ? "flex-1" : SKELETON_LABEL_WIDTH
-        )
-      },
-      `action-skeleton-${idx}`
-    );
+    const key = `action-skeleton-${idx}`;
+    if (isIconOnly) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "icon" }, key);
+    if (action) {
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { inert: true, "aria-hidden": true, className: _chunk65VVJSQZcjs.cn.call(void 0, "relative inline-flex", fullWidth && "flex-1"), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _chunk65VVJSQZcjs.cn.call(void 0, "invisible inline-flex", fullWidth && "flex-1"), children: renderRawActionButton(action, { fullWidth }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { className: "absolute inset-0 h-full" })
+      ] }, key);
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "default", className: fullWidth ? "flex-1" : void 0 }, key);
   }) });
 }
-var MOBILE_TRIGGER_SKELETON_CLASS = _chunk3ATAYP36cjs.cn.call(void 0, SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS);
+function MobileTriggerSkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "icon" });
+}
 function PageActions({
   variant = "icon-buttons",
   actions,
@@ -1354,20 +1196,20 @@ function IconButtonsVariant({
 }) {
   const desktopActions = actions.filter((a) => !a.showOnlyMobile);
   const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
-  const isSingleAction = actions.length === 1 && !_optionalChain([actions, 'access', _23 => _23[0], 'access', _24 => _24.submenu, 'optionalAccess', _25 => _25.length]);
+  const isSingleAction = actions.length === 1 && !_optionalChain([actions, 'access', _24 => _24[0], 'access', _25 => _25.submenu, 'optionalAccess', _26 => _26.length]);
   const singleAction = isSingleAction ? actions[0] : null;
   const useSingleActionMobile = isSingleAction && !hasMenuActions;
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ..._nullishCoalesce(menuActions, () => ( []))];
   const hasMobileMenuItems = mobileMenuGroups.some((g) => g.items.length > 0);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
       loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
         desktopActions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.default.Fragment, { children: renderActionButton(action) }, actionKey(action, idx))),
-        hasMenuActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.ActionsMenuDropdown, { groups: menuActions })
+        hasMenuActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.ActionsMenuDropdown, { groups: menuActions })
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex content-md:hidden", className), children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: MOBILE_TRIGGER_SKELETON_CLASS }) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex content-md:hidden", className), children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileTriggerSkeleton, {}) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
   ] });
 }
 function PrimaryButtonsVariant({
@@ -1382,12 +1224,12 @@ function PrimaryButtonsVariant({
   });
   const desktopActions = sortedActions.filter((a) => !a.showOnlyMobile);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "hidden items-center md:content-md:flex", ACTIONS_GAP, className), children: loading ? (
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "hidden items-center md:content-md:flex", ACTIONS_GAP, className), children: loading ? (
       // No overflow trigger in this variant — an unknown action set settles
       // into a labelled button, not a square one.
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActionSkeletons, { actions: desktopActions, emptyFallback: "label" })
     ) : desktopActions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.default.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: MOBILE_TRIGGER_SKELETON_CLASS }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CompactPrimaryActions, { actions: desktopActions }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileTriggerSkeleton, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CompactPrimaryActions, { actions: desktopActions }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileBottomActions, { actions: sortedActions, loading })
   ] });
 }
@@ -1403,18 +1245,18 @@ function MenuPrimaryVariant({
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ...menuActions];
   const hasMobileMenuItems = mobileMenuGroups.some((g) => g.items.length > 0);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
       loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-        hasMenuActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.ActionsMenuDropdown, { groups: menuActions }),
+        hasMenuActions && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.ActionsMenuDropdown, { groups: menuActions }),
         desktopActions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.default.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex content-md:hidden", className), children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: MOBILE_TRIGGER_SKELETON_CLASS }) : hasMobileMenuItems || selector ? (
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex content-md:hidden", className), children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileTriggerSkeleton, {}) : hasMobileMenuItems || selector ? (
       // The selector rides into the menu as its header row: on mobile the
       // title row has no room for it, and hiding it entirely (what
       // `icon-buttons` does) would leave no way to switch views at all.
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.ActionsMenuDropdown, { groups: mobileMenuGroups, header: selector })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.ActionsMenuDropdown, { groups: mobileMenuGroups, header: selector })
     ) : null })
   ] });
 }
@@ -1423,7 +1265,7 @@ function CompactPrimaryActions({ actions }) {
   const fold = foldable.length > 1;
   const inline = fold ? actions.filter((action) => !foldable.includes(action)) : actions;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    fold && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.ActionsMenuDropdown, { groups: [{ items: foldable.flatMap(actionToMenuItems) }] }),
+    fold && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.ActionsMenuDropdown, { groups: [{ items: foldable.flatMap(actionToMenuItems) }] }),
     inline.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.default.Fragment, { children: renderActionButton(action) }, `compact-${actionKey(action, idx)}`))
   ] });
 }
@@ -1431,7 +1273,7 @@ function MobileBottomActions({ actions, loading }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     "div",
     {
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "fixed bottom-0 left-0 right-0 z-50 md:hidden",
         "border-t border-ods-border bg-ods-card",
         // `lf` (24px at every breakpoint), NOT `l` — this bar is `md:hidden`, so the
@@ -1451,20 +1293,25 @@ function usePageActionsBottomPadding(variant) {
 // src/components/ui/entity-image.tsx
 
 
-var ENTITY_IMAGE_SIZE = "size-[52px] content-md:size-[60px]";
+var ENTITY_IMAGE_SIZE = _chunkXFRBEXQNcjs.TILE_SIZE.entity;
+var ENTITY_IMAGE_RADIUS_CLASS = "rounded-md";
 function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
-  const resolvedSrc = _chunkR3TWQ3ZJcjs.useAuthedImageSrc.call(void 0, src);
+  const held = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const authedSrc = _chunk5P4TDV7Vcjs.useAuthedImageSrc.call(void 0, held ? void 0 : src);
+  const resolvedSrc = authedSrc;
   const [failedSrc, setFailedSrc] = _react2.default.useState(null);
   const imageFailed = resolvedSrc !== void 0 && failedSrc === resolvedSrc;
+  if (held) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EntityImageSkeleton, { sizeClassName, className });
   const showFallback = imageFailed || !resolvedSrc;
-  const initials = _chunkEQZXJUYVcjs.personInitials.call(void 0, _nullishCoalesce(fallbackText, () => ( alt)));
+  const initials = _chunkJTSUAHDLcjs.personInitials.call(void 0, _nullishCoalesce(fallbackText, () => ( alt)));
   if (showFallback) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
         "aria-label": alt,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
-          "flex shrink-0 select-none items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-text-secondary text-h4",
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
+          "flex shrink-0 select-none items-center justify-center border border-ods-border bg-ods-bg text-ods-text-secondary text-h4",
+          ENTITY_IMAGE_RADIUS_CLASS,
           _nullishCoalesce(sizeClassName, () => ( ENTITY_IMAGE_SIZE)),
           className
         ),
@@ -1473,13 +1320,14 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
     );
   }
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkHOTM4UM6cjs.next_image_default,
+    _chunkE76ONBKFcjs.next_image_default,
     {
       src: resolvedSrc,
       alt: _nullishCoalesce(alt, () => ( "")),
       onError: () => setFailedSrc(resolvedSrc),
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
-        "shrink-0 rounded-md border border-ods-border object-contain",
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
+        "shrink-0 border border-ods-border object-contain",
+        ENTITY_IMAGE_RADIUS_CLASS,
         _nullishCoalesce(sizeClassName, () => ( ENTITY_IMAGE_SIZE)),
         className
       ),
@@ -1489,6 +1337,31 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
     }
   );
 }
+function EntityImageSkeleton({
+  sizeClassName,
+  className
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkXFRBEXQNcjs.UnifiedSkeleton,
+    {
+      className: _chunk65VVJSQZcjs.cn.call(void 0, "shrink-0", ENTITY_IMAGE_RADIUS_CLASS, _nullishCoalesce(sizeClassName, () => ( ENTITY_IMAGE_SIZE)), className)
+    }
+  );
+}
+
+// src/components/layout/page-picture.tsx
+
+
+var PagePictureContext = _react.createContext.call(void 0, false);
+function PagePicture({ children }) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PagePictureContext.Provider, { value: true, children });
+}
+var PageTitle = _react.forwardRef.call(void 0, 
+  function PageTitleElement(props, ref) {
+    const picture = _react.useContext.call(void 0, PagePictureContext);
+    return picture ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ...props, ref }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { ...props, ref });
+  }
+);
 
 // src/components/layout/title-block.tsx
 
@@ -1514,36 +1387,70 @@ function TitleBlock({
   loading,
   loadingActions,
   subtitleRow = "when-set",
-  titleWrap = false
+  titleWrap = false,
+  titleSkeletonLines
 }) {
-  const hasSubtitleRow = !!subtitle || subtitleRow === "always" || subtitleRow === "while-loading" && !!loading;
+  const scoped = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const titleLoading = !!loading || scoped && title === "";
+  const subtitleLoading = !!loading || scoped && subtitle === "";
+  const hasSubtitleRow = !!subtitle || subtitleRow === "always" || subtitleRow === "while-loading" && !!loading || scoped && subtitle === "";
   const hasActions = actions && actions.length > 0;
   const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
   const titleClass = titleSize === "h1" ? "text-h1" : "text-h2";
   const titleOverflowClass = titleWrap ? "break-words" : "truncate";
   const skeletonSize = TITLE_SKELETON_SIZE[titleSize];
-  const { ref: titleRef, isTruncated: titleTruncated } = _chunkR3TWQ3ZJcjs.useIsTruncated.call(void 0, loading ? null : title);
-  const { ref: subtitleRef, isTruncated: subtitleTruncated } = _chunkR3TWQ3ZJcjs.useIsTruncated.call(void 0, 
-    loading ? null : subtitle
+  const { ref: titleRef, isTruncated: titleTruncated } = _chunk5P4TDV7Vcjs.useIsTruncated.call(void 0, 
+    titleLoading ? null : title
+  );
+  const { ref: subtitleRef, isTruncated: subtitleTruncated } = _chunk5P4TDV7Vcjs.useIsTruncated.call(void 0, 
+    subtitleLoading ? null : subtitle
   );
-  const titleNode = loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkH3RYUTNDcjs.UnifiedSkeleton,
+  const titleNode = titleLoading && titleWrap && titleSkeletonLines ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkXFRBEXQNcjs.TextLineSkeleton,
+      {
+        type: "inherit",
+        as: "span",
+        lines: titleSkeletonLines.phone,
+        className: "w-full content-md:hidden"
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkXFRBEXQNcjs.TextLineSkeleton,
+      {
+        type: "inherit",
+        as: "span",
+        lines: titleSkeletonLines.md,
+        className: "hidden w-full content-md:flex content-lg:hidden"
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkXFRBEXQNcjs.TextLineSkeleton,
+      {
+        type: "inherit",
+        as: "span",
+        lines: titleSkeletonLines.lg,
+        className: "hidden w-full content-lg:flex"
+      }
+    )
+  ] }) : titleLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkXFRBEXQNcjs.UnifiedSkeleton,
     {
       as: "span",
       "aria-hidden": true,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, TITLE_TEXT_SKELETON_CLASS, skeletonSize.width, skeletonSize.height)
+      className: _chunk65VVJSQZcjs.cn.call(void 0, TITLE_TEXT_SKELETON_CLASS, skeletonSize.width, skeletonSize.height)
     }
   ) : title;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "flex items-end justify-between gap-[var(--spacing-system-m)]",
         // md+: one wrapping row — actions stay inline with a short title and
         // wrap to a second row only when the title overflows (ClickUp 86ahd6uy5).
         "content-md:flex-wrap content-md:content-end",
         "pt-[var(--spacing-system-l)]",
-        variant === "card" ? _chunk3ATAYP36cjs.cn.call(void 0, 
+        variant === "card" ? _chunk65VVJSQZcjs.cn.call(void 0, 
           "border-b border-ods-border bg-ods-card",
           "px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]",
           "content-md:border-b-0 content-md:bg-transparent",
@@ -1556,62 +1463,65 @@ function TitleBlock({
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
           "div",
           {
-            className: _chunk3ATAYP36cjs.cn.call(void 0, 
+            className: _chunk65VVJSQZcjs.cn.call(void 0, 
               "flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] content-md:max-w-full content-md:flex-none",
-              TITLE_BLOCK_MIN_HEIGHT
+              TITLE_BLOCK_MIN_HEIGHT,
+              // A wrapping title's loading lines stand for a title that fills the row (its typical lines are full ones), so the
+              // column takes the row's width: sized to content it would shrink to the bars' minimum.
+              titleLoading && titleWrap && titleSkeletonLines && "content-md:w-full"
             ),
             children: [
               backButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden content-md:inline-flex" }),
-              image || hasSubtitleRow || loading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
+              image || hasSubtitleRow || titleLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
                 image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EntityImage, { src: image.src, alt: image.alt, fallbackText: image.alt || title }),
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
-                  (loading || title) && (titleAdornment ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
+                  (titleLoading || title) && (titleAdornment ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                      _chunkEQZXJUYVcjs.FloatingTooltip,
+                      _chunkJTSUAHDLcjs.FloatingTooltip,
                       {
                         content: title,
                         side: "bottom",
                         disabled: !titleTruncated,
                         triggerClassName: "min-w-0",
                         children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                          _chunkOF336YWGcjs.PageTitle,
+                          PageTitle,
                           {
                             ref: titleRef,
-                            className: _chunk3ATAYP36cjs.cn.call(void 0, titleClass, "min-w-0 text-ods-text-primary", titleOverflowClass),
+                            className: _chunk65VVJSQZcjs.cn.call(void 0, titleClass, "min-w-0 text-ods-text-primary", titleOverflowClass),
                             children: titleNode
                           }
                         )
                       }
                     ),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "shrink-0", children: titleAdornment })
-                  ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEQZXJUYVcjs.FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOF336YWGcjs.PageTitle, { ref: titleRef, className: _chunk3ATAYP36cjs.cn.call(void 0, titleClass, "text-ods-text-primary", titleOverflowClass), children: titleNode }) })),
+                  ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJTSUAHDLcjs.FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageTitle, { ref: titleRef, className: _chunk65VVJSQZcjs.cn.call(void 0, titleClass, "text-ods-text-primary", titleOverflowClass), children: titleNode }) })),
                   hasSubtitleRow && /* The NBSP is a pure spacer, reached only in `'always'` mode: an
                      empty `p` collapses to zero height (its only content would be
                      collapsible whitespace), which is exactly the shift that mode
                      exists to prevent. Hidden from AT — it carries no meaning. */
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEQZXJUYVcjs.FloatingTooltip, { content: subtitle, side: "bottom", disabled: !subtitleTruncated, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJTSUAHDLcjs.FloatingTooltip, { content: subtitle, side: "bottom", disabled: !subtitleTruncated, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                     "p",
                     {
                       ref: subtitleRef,
                       className: "truncate text-ods-text-secondary text-h6",
-                      "aria-hidden": !loading && !subtitle ? true : void 0,
-                      children: loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkH3RYUTNDcjs.UnifiedSkeleton,
+                      "aria-hidden": !subtitleLoading && !subtitle ? true : void 0,
+                      children: subtitleLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                        _chunkXFRBEXQNcjs.UnifiedSkeleton,
                         {
                           as: "span",
                           "aria-hidden": true,
-                          className: _chunk3ATAYP36cjs.cn.call(void 0, TITLE_TEXT_SKELETON_CLASS, "h-2.5 w-28 content-md:h-3 content-md:w-36")
+                          className: _chunk65VVJSQZcjs.cn.call(void 0, TITLE_TEXT_SKELETON_CLASS, "h-2.5 w-28 content-md:h-3 content-md:w-36")
                         }
                       ) : subtitle || "\xA0"
                     }
                   ) })
                 ] })
               ] }) : title && (titleAdornment ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEQZXJUYVcjs.FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, triggerClassName: "min-w-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkOF336YWGcjs.PageTitle,
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJTSUAHDLcjs.FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, triggerClassName: "min-w-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  PageTitle,
                   {
                     ref: titleRef,
-                    className: _chunk3ATAYP36cjs.cn.call(void 0, titleClass, "min-w-0 text-ods-text-primary", titleOverflowClass),
+                    className: _chunk65VVJSQZcjs.cn.call(void 0, titleClass, "min-w-0 text-ods-text-primary", titleOverflowClass),
                     children: title
                   }
                 ) }),
@@ -1621,7 +1531,7 @@ function TitleBlock({
                      wraps; `titleWrap` only adds break-words for pathological
                      unbroken tokens. No class change when the prop is unset —
                      the frozen baseline stays byte-identical. */
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkOF336YWGcjs.PageTitle, { className: _chunk3ATAYP36cjs.cn.call(void 0, titleClass, "text-ods-text-primary", titleWrap && "break-words"), children: title })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageTitle, { className: _chunk65VVJSQZcjs.cn.call(void 0, titleClass, "text-ods-text-primary", titleWrap && "break-words"), children: title })
               ))
             ]
           }
@@ -1662,12 +1572,13 @@ function PageLayout({
   loading,
   loadingActions,
   subtitleRow,
-  titleWrap
+  titleWrap,
+  titleSkeletonLines
 }) {
   const hasActions = actions && actions.length > 0;
   const needsBottomPadding = hasActions && actionsVariant === "primary-buttons";
   const hasHeader = showHeader && (title || subtitle || image || backButton || hasActions || selector || loading);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex w-full flex-col", className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex w-full flex-col", className), children: [
     hasHeader && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       TitleBlock,
       {
@@ -1685,13 +1596,14 @@ function PageLayout({
         loading,
         loadingActions,
         subtitleRow,
-        titleWrap
+        titleWrap,
+        titleSkeletonLines
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "div",
       {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "flex flex-1 flex-col gap-[var(--spacing-system-l)]",
           needsBottomPadding && "pb-28 content-md:pb-0",
           contentClassName
@@ -1720,12 +1632,12 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
   const faces = ordered.slice(0, max);
   const overflow = ordered.length - faces.length;
   const Chevron = open ? _chunk3MRRIHC2cjs.Chevron02UpIcon : _chunkSKI6NKOEcjs.Chevron02DownIcon;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkAKK3EO37cjs.DropdownMenu, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXIFEZ2JTcjs.DropdownMenu, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkAKK3EO37cjs.DropdownMenuTrigger,
+      _chunkXIFEZ2JTcjs.DropdownMenuTrigger,
       {
         "aria-label": `In this session: ${ordered.map(viewerLabel).join(", ")}`,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "flex shrink-0 items-center gap-[var(--spacing-system-xxs)] rounded-md outline-none",
           "focus-visible:ring-2 focus-visible:ring-ods-focus",
           className
@@ -1733,14 +1645,14 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
         children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex items-center", children: [
             faces.map((viewer, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkEQZXJUYVcjs.SquareAvatar,
+              _chunkJTSUAHDLcjs.SquareAvatar,
               {
                 variant: "round",
                 sizePx: 32,
                 src: _nullishCoalesce(viewer.avatarUrl, () => ( void 0)),
                 alt: viewer.name,
                 fallback: viewer.name,
-                className: _chunk3ATAYP36cjs.cn.call(void 0, 
+                className: _chunk65VVJSQZcjs.cn.call(void 0, 
                   "relative bg-ods-bg",
                   viewer.isHost ? "ring-2 ring-ods-accent" : "ring-1 ring-ods-border",
                   index > 0 && "-ml-2"
@@ -1758,16 +1670,16 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
         ]
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkAKK3EO37cjs.DropdownMenuContent, { align: "end", className: "w-[280px] p-0", children: ordered.map((viewer) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkAKK3EO37cjs.DropdownMenuItem,
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXIFEZ2JTcjs.DropdownMenuContent, { align: "end", className: "w-[280px] p-0", children: ordered.map((viewer) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkXIFEZ2JTcjs.DropdownMenuItem,
       {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "gap-[var(--spacing-system-xsf)] rounded-none border-b border-ods-border bg-ods-bg last:border-b-0",
           "py-[var(--spacing-system-s)] pl-[var(--spacing-system-mf)] pr-[var(--spacing-system-xs)] text-h4"
         ),
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkEQZXJUYVcjs.SquareAvatar,
+            _chunkJTSUAHDLcjs.SquareAvatar,
             {
               variant: "round",
               sizePx: 24,
@@ -1813,7 +1725,7 @@ function RemoteSessionScope({ children, className }) {
 function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
   if (logoUrl) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkEQZXJUYVcjs.SquareAvatar,
+      _chunkJTSUAHDLcjs.SquareAvatar,
       {
         variant: "square",
         fit: "contain",
@@ -1821,7 +1733,7 @@ function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
         src: logoUrl,
         alt: name,
         fallback: name,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, "shrink-0 rounded-md border border-ods-border bg-ods-card", className)
+        className: _chunk65VVJSQZcjs.cn.call(void 0, "shrink-0 rounded-md border border-ods-border bg-ods-card", className)
       }
     );
   }
@@ -1831,7 +1743,7 @@ function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
       role: "img",
       "aria-label": name,
       style: { width: sizePx, height: sizePx },
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "flex shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card",
         className
       ),
@@ -1850,7 +1762,7 @@ function RemoteSessionRecordingTag({ className }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "flex h-8 items-center gap-[var(--spacing-system-xs)] self-start rounded-md bg-ods-success-secondary p-[var(--spacing-system-xsf)]",
         className
       ),
@@ -1879,7 +1791,7 @@ function RemoteSessionDragger({ dragHandlers }) {
     "span",
     {
       "aria-hidden": true,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "absolute right-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] text-ods-text-secondary",
         dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
       ),
@@ -1916,16 +1828,16 @@ function RemoteAccessRequestCard({
 }) {
   const { organizationName } = party;
   const siteUrl = _nullishCoalesce(party.organizationSiteUrl, () => ( void 0));
-  const openableSite = _optionalChain([siteUrl, 'optionalAccess', _26 => _26.startsWith, 'call', _27 => _27("https://")]) ? siteUrl : void 0;
+  const openableSite = _optionalChain([siteUrl, 'optionalAccess', _27 => _27.startsWith, 'call', _28 => _28("https://")]) ? siteUrl : void 0;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-[var(--spacing-system-l)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xl)]", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "w-full text-ods-text-primary text-h2", children: "Your IT support team is requesting remote access" }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RemoteSessionOrgLogo, { name: organizationName, logoUrl: party.organizationLogoUrl, sizePx: 64 }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full truncate text-ods-text-primary text-h3", children: organizationName }),
-        siteUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full truncate text-ods-text-secondary text-h4", children: _chunkEQZXJUYVcjs.formatUrlForDisplay.call(void 0, siteUrl, { keepWww: true }) })
+        siteUrl && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full truncate text-ods-text-secondary text-h4", children: _chunkJTSUAHDLcjs.formatUrlForDisplay.call(void 0, siteUrl, { keepWww: true }) })
       ] }),
-      openableSite && onOpenSite && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEDVT7OAScjs.ExternalLinkIcon, { size: 24, color: "currentColor" }) })
+      openableSite && onOpenSite && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEDVT7OAScjs.ExternalLinkIcon, { size: 24, color: "currentColor" }) })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "w-full text-ods-text-primary text-h4", children: [
       "A technician from ",
@@ -1941,7 +1853,7 @@ function RemoteAccessRequestCard({
     ] }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           variant: "outline",
           fullWidth: true,
@@ -1952,7 +1864,7 @@ function RemoteAccessRequestCard({
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           variant: "accent",
           fullWidth: true,
@@ -1975,7 +1887,7 @@ var RemoteSessionBlockFrame = _react.forwardRef.call(void 0,
       "div",
       {
         ref,
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "flex w-[440px] shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-bg",
           expanded && "h-[680px]",
           className
@@ -2010,7 +1922,7 @@ var RemoteSessionBlockFrame = _react.forwardRef.call(void 0,
 RemoteSessionBlockFrame.displayName = "RemoteSessionBlockFrame";
 function RemoteSessionEndButton({ onEndSession }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2QMBXGMQcjs.Button,
+    _chunkTF5D5MNOcjs.Button,
     {
       variant: "outline",
       fullWidth: true,
@@ -2035,14 +1947,14 @@ function RemoteSessionSummary({
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "flex w-full items-center gap-[var(--spacing-system-xs)] pr-[var(--spacing-system-mf)]",
           dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
         ),
         ...dragHandlers,
         children: [
           technician ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkEQZXJUYVcjs.SquareAvatar,
+            _chunkJTSUAHDLcjs.SquareAvatar,
             {
               variant: "round",
               sizePx: 48,
@@ -2068,7 +1980,7 @@ function RemoteSessionSummary({
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RemoteSessionStatusRow, { showRecordingTag, viewers }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           variant: "outline",
           fullWidth: true,
@@ -2090,7 +2002,7 @@ var RemoteSessionMinimizedChip = _react.forwardRef.call(void 0,
         ref,
         type: "button",
         "aria-label": "Show session block",
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border",
           dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
         ),
@@ -2098,7 +2010,7 @@ var RemoteSessionMinimizedChip = _react.forwardRef.call(void 0,
         ...dragHandlers,
         children: [
           technician ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkEQZXJUYVcjs.SquareAvatar,
+            _chunkJTSUAHDLcjs.SquareAvatar,
             {
               sizePx: 48,
               src: _nullishCoalesce(party.technicianAvatarUrl, () => ( void 0)),
@@ -2160,7 +2072,7 @@ function RemoteSessionChatPanel({
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         "div",
         {
-          className: _chunk3ATAYP36cjs.cn.call(void 0, 
+          className: _chunk65VVJSQZcjs.cn.call(void 0, 
             "flex w-full flex-col pr-[var(--spacing-system-mf)]",
             dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
           ),
@@ -2181,7 +2093,7 @@ function RemoteSessionChatPanel({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RemoteSessionStatusRow, { showRecordingTag, viewers }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
+          _chunkTF5D5MNOcjs.Button,
           {
             variant: "outline",
             fullWidth: true,
@@ -2219,7 +2131,7 @@ function RemoteSessionChatPanel({
               value: draft,
               onChange: (event) => onDraftChange(event.target.value),
               disabled: !ready,
-              placeholder: ready ? "Enter your Message..." : "Loading chat...",
+              placeholder: ready ? "Enter your Message..." : "Connecting to the chat",
               "aria-label": "Message",
               className: "h-12 min-w-0 flex-1 rounded-md border border-ods-border bg-ods-bg px-[var(--spacing-system-s)] text-ods-text-primary outline-none text-h6 placeholder:text-ods-text-secondary"
             }
@@ -2248,7 +2160,7 @@ function RemoteSessionChatMessageRow({
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)]", children: [
       isTechnician && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkEQZXJUYVcjs.SquareAvatar,
+        _chunkJTSUAHDLcjs.SquareAvatar,
         {
           variant: "round",
           sizePx: 16,
@@ -2259,7 +2171,7 @@ function RemoteSessionChatMessageRow({
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "span",
         {
-          className: _chunk3ATAYP36cjs.cn.call(void 0, 
+          className: _chunk65VVJSQZcjs.cn.call(void 0, 
             "min-w-0 flex-1 truncate text-code",
             isTechnician ? "text-ods-accent" : "text-ods-text-secondary"
           ),
@@ -2274,6 +2186,9 @@ function RemoteSessionChatMessageRow({
 
 // src/components/features/remote-session/remote-desktop-chat-message-row.tsx
 
+var MESSAGE_ROW_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-xxs)]";
+var MESSAGE_HEAD_CLASS = "flex items-center gap-[var(--spacing-system-xxs)]";
+var MESSAGE_NAME_CLASS = "min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]";
 function RemoteDesktopChatMessageRow({
   authorName,
   isTechnician,
@@ -2281,28 +2196,38 @@ function RemoteDesktopChatMessageRow({
   sentAt,
   body
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xxs)]", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xxs)]", children: [
-      isTechnician && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEQZXJUYVcjs.SquareAvatar, { variant: "round", sizePx: 24, src: avatarUrl, alt: authorName, className: "shrink-0" }),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: MESSAGE_ROW_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: MESSAGE_HEAD_CLASS, children: [
+      isTechnician && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkJTSUAHDLcjs.SquareAvatar, { variant: "round", sizePx: 24, src: avatarUrl, alt: authorName, className: "shrink-0" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "span",
         {
-          className: _chunk3ATAYP36cjs.cn.call(void 0, 
-            "min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]",
+          className: _chunk65VVJSQZcjs.cn.call(void 0, 
+            MESSAGE_NAME_CLASS,
             isTechnician ? "text-ods-accent" : "text-ods-text-secondary"
           ),
           children: authorName
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { suppressHydrationWarning: true, className: "shrink-0 text-ods-text-secondary text-h6", children: _chunkGZKWF6NHcjs.formatTime.call(void 0, sentAt) })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { suppressHydrationWarning: true, className: "shrink-0 text-ods-text-secondary text-h6", children: _chunkXZ6DKGT4cjs.formatTime.call(void 0, sentAt) })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "whitespace-pre-wrap text-ods-text-primary text-h4", children: body })
   ] });
 }
+function RemoteDesktopChatMessageRowSkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: MESSAGE_ROW_CLASS, "aria-hidden": true, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: MESSAGE_HEAD_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: MESSAGE_NAME_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-24" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", as: "span", className: "w-12 shrink-0" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h4", className: "w-3/4" })
+  ] });
+}
 
 // src/components/features/remote-session/remote-desktop-chat-panel.tsx
 
 
+var CHAT_PANEL_FOLD = 10;
 var REMOTE_DESKTOP_CHAT_END_USER_NAME = "User";
 function RemoteDesktopChatPanel({
   messages,
@@ -2322,12 +2247,19 @@ function RemoteDesktopChatPanel({
     "aside",
     {
       "aria-label": "Session chat",
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "flex flex-col gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]",
         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__ */ _jsxruntime.jsx.call(void 0, "div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex min-h-full flex-col justify-end gap-[var(--spacing-system-xsf)]", children: rows.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, _chunkWEANWBJHcjs.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__ */ _jsxruntime.jsx.call(void 0, RemoteDesktopChatMessageRowSkeleton, {}, i)
+          )) })
+        ) : rows.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-center text-ods-text-muted text-h6", children: "No messages yet - say hello to the user." }) : rows.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           RemoteDesktopChatMessageRow,
           {
             authorName: message.name || (message.author === "technician" ? technician.name : REMOTE_DESKTOP_CHAT_END_USER_NAME),
@@ -2339,7 +2271,7 @@ function RemoteDesktopChatPanel({
           message.id
         )) }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkGZKWF6NHcjs.ChatInput,
+          _chunkXZ6DKGT4cjs.ChatInput,
           {
             placeholder: "Enter your Message...",
             onSend,
@@ -2383,7 +2315,7 @@ function RemoteDesktopFullscreenToolbar({
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate text-ods-text-primary text-h6", children: deviceName }),
             displayMenuGroups.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkEFTUFJS2cjs.ActionsMenuDropdown,
+              _chunkLELS4XMXcjs.ActionsMenuDropdown,
               {
                 groups: displayMenuGroups,
                 customTrigger: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -2404,7 +2336,7 @@ function RemoteDesktopFullscreenToolbar({
           ] }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
             onToggleChat && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk2QMBXGMQcjs.Button,
+              _chunkTF5D5MNOcjs.Button,
               {
                 variant: "outline",
                 size: "small",
@@ -2414,11 +2346,11 @@ function RemoteDesktopFullscreenToolbar({
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkEFTUFJS2cjs.ActionsMenuDropdown,
+              _chunkLELS4XMXcjs.ActionsMenuDropdown,
               {
                 groups: actionsMenuGroups,
                 customTrigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunk2QMBXGMQcjs.Button,
+                  _chunkTF5D5MNOcjs.Button,
                   {
                     variant: "outline",
                     size: "icon-sm",
@@ -2429,7 +2361,7 @@ function RemoteDesktopFullscreenToolbar({
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk2QMBXGMQcjs.Button,
+              _chunkTF5D5MNOcjs.Button,
               {
                 variant: "outline",
                 size: "icon-sm",
@@ -2439,7 +2371,7 @@ function RemoteDesktopFullscreenToolbar({
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk2QMBXGMQcjs.Button,
+              _chunkTF5D5MNOcjs.Button,
               {
                 variant: "outline",
                 size: "icon-sm",
@@ -2475,9 +2407,25 @@ function RemoteDesktopView({
   onToggleChat,
   screen,
   chat,
-  children
+  children,
+  loading: loadingProp = false
 }) {
-  const controlsBar = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_BAR_CLASS, children: [
+  const inScope = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const loading = inScope || loadingProp;
+  const controlsBar = loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CONTROLS_BAR_CLASS, "aria-hidden": true, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_ROW_CLASS, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-mf)]", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPTK7GOIIcjs.MonitorIcon, { className: "h-4 w-4 text-ods-text-primary" }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h4", className: "w-48 max-w-full" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "w-36 max-w-full" })
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "icon" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "icon" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "icon" })
+    ] })
+  ] }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_BAR_CLASS, children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_ROW_CLASS, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-mf)]", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPTK7GOIIcjs.MonitorIcon, { className: "h-4 w-4 text-ods-text-primary" }) }),
@@ -2495,7 +2443,7 @@ function RemoteDesktopView({
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
         onToggleChat && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
+          _chunkTF5D5MNOcjs.Button,
           {
             variant: "outline",
             onClick: onToggleChat,
@@ -2503,9 +2451,9 @@ function RemoteDesktopView({
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "sr-only content-md:not-sr-only", children: chatOpen ? "Close Chat" : "Open Chat" })
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEFTUFJS2cjs.ActionsMenuDropdown, { groups: actionsMenuGroups, triggerAriaLabel: "Actions" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLELS4XMXcjs.ActionsMenuDropdown, { groups: actionsMenuGroups, triggerAriaLabel: "Actions" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
+          _chunkTF5D5MNOcjs.Button,
           {
             variant: "outline",
             size: "icon",
@@ -2515,7 +2463,7 @@ function RemoteDesktopView({
           }
         ),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunk2QMBXGMQcjs.Button,
+          _chunkTF5D5MNOcjs.Button,
           {
             variant: "outline",
             size: "icon",
@@ -2527,7 +2475,7 @@ function RemoteDesktopView({
       ] })
     ] }),
     displayMenuGroups.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkEFTUFJS2cjs.ActionsMenuDropdown,
+      _chunkLELS4XMXcjs.ActionsMenuDropdown,
       {
         groups: displayMenuGroups,
         align: "start",
@@ -2547,6 +2495,12 @@ function RemoteDesktopView({
       }
     )
   ] });
+  if (loading) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageLayout, { className: PAGE_CLASS, backButton: onBack ? { label: "Back", onClick: onBack } : void 0, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: "Loading the remote session", announce: !inScope, className: "contents", children: [
+      controlsBar,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 min-w-0 flex-1 rounded-lg bg-black" })
+    ] }) });
+  }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     PageLayout,
     {
@@ -2578,28 +2532,6 @@ function RemoteDesktopView({
     }
   );
 }
-function RemoteDesktopViewSkeleton({
-  onBack,
-  region = true
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PageLayout, { className: PAGE_CLASS, backButton: onBack ? { label: "Back", onClick: onBack } : void 0, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label: "Loading the remote session", announce: region, className: "contents", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CONTROLS_BAR_CLASS, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_ROW_CLASS, children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-mf)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-9 w-9 flex-shrink-0 rounded-md" }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-5 w-48" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-36" })
-        ] })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 min-w-0 flex-1 rounded-lg bg-black" })
-  ] }) });
-}
 
 // src/components/features/remote-session/remote-session-dialog.tsx
 
@@ -2621,8 +2553,8 @@ function RemoteSessionDialog({
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full text-ods-text-primary text-h4", children: "The technician will lose access to your device immediately." })
       ] }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", fullWidth: true, disabled: ending, onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "destructive", fullWidth: true, loading: ending, onClick: onEndSession, children: "End Session" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", fullWidth: true, disabled: ending, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "destructive", fullWidth: true, loading: ending, onClick: onEndSession, children: "End Session" })
       ] })
     ] });
   }
@@ -2636,7 +2568,7 @@ function RemoteSessionDialog({
         copy.suffix
       ] })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex w-full justify-end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", className: "w-1/2", onClick: onClose, children: "Close" }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex w-full justify-end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", className: "w-1/2", onClick: onClose, children: "Close" }) })
   ] });
 }
 function DialogCard({ children }) {
@@ -2646,7 +2578,7 @@ function DialogCard({ children }) {
 // src/components/features/remote-session/remote-session-overlay.tsx
 
 function RemoteSessionBorder({ className }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "pointer-events-none size-full border-4 border-ods-warning", className) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "pointer-events-none size-full border-4 border-ods-warning", className) });
 }
 function RemoteSessionPill({ onEndSession }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -2706,9 +2638,9 @@ function KeepRecordingModal({
     if (!canKeep || isPending) return;
     onConfirm({ reason, description: reason === "OTHER" ? trimmed : null });
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.Modal, { isOpen, onClose: isPending ? () => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.Modal, { isOpen, onClose: isPending ? () => {
   } : onClose, className: "text-left md:max-w-[600px]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalTitle, { children: "Keep this recording" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalTitle, { children: "Keep this recording" }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       KeepNotice,
       {
@@ -2735,7 +2667,7 @@ function KeepRecordingModal({
         }
       ),
       reason === "OTHER" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkHTRILBJDcjs.Input,
+        _chunkYXDHVHB2cjs.Input,
         {
           "aria-label": "Reason description",
           value: description,
@@ -2746,11 +2678,11 @@ function KeepRecordingModal({
         }
       )
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.ModalFooter, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.ModalFooter, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden flex-1 md:block" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           type: "button",
           variant: "accent",
@@ -2776,9 +2708,9 @@ function ReleaseKeepingModal({
   isPending = false,
   onConfirm
 }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.Modal, { isOpen, onClose: isPending ? () => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.Modal, { isOpen, onClose: isPending ? () => {
   } : onClose, className: "text-left md:max-w-[600px]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalTitle, { children: "Release Keeping" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalTitle, { children: "Release Keeping" }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h4", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { children: [
         "Kept by ",
@@ -2795,10 +2727,10 @@ function ReleaseKeepingModal({
       ] })
     ] }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeepNotice, { icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkILWSAV64cjs.HourglassIcon, { size: 24, color: "currentColor" }), title: `It will expire on ${expiresOn}`, children: dueOn ? `It was due to expire on ${dueOn}. Releasing gives it 3 days' grace, and it shows amber until then. Whoever placed the Keep is reminded the day before it goes. Nothing is deleted now.` : "Nothing is deleted now." }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.ModalFooter, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.ModalFooter, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden flex-1 md:block" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { type: "button", variant: "accent", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Release Keeping" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { type: "button", variant: "accent", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Release Keeping" })
     ] })
   ] });
 }
@@ -2829,7 +2761,7 @@ function AssignTicketModal({
     setTicketIds(ids);
     setTitles((prev) => {
       const next = {};
-      for (const id of ids) next[id] = _nullishCoalesce(_nullishCoalesce(_optionalChain([options, 'access', _28 => _28.find, 'call', _29 => _29((option) => option.value === id), 'optionalAccess', _30 => _30.label]), () => ( prev[id])), () => ( id));
+      for (const id of ids) next[id] = _nullishCoalesce(_nullishCoalesce(_optionalChain([options, 'access', _29 => _29.find, 'call', _30 => _30((option) => option.value === id), 'optionalAccess', _31 => _31.label]), () => ( prev[id])), () => ( id));
       return next;
     });
   };
@@ -2837,9 +2769,9 @@ function AssignTicketModal({
     if (ticketIds.length === 0 || isPending) return;
     onConfirm(ticketIds);
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.Modal, { isOpen, onClose: isPending ? () => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.Modal, { isOpen, onClose: isPending ? () => {
   } : onClose, className: "text-left md:max-w-[600px]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalTitle, { children: "Assign Ticket" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalTitle, { children: "Assign Ticket" }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       Autocomplete,
       {
@@ -2858,11 +2790,11 @@ function AssignTicketModal({
         disabled: isPending
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.ModalFooter, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.ModalFooter, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden flex-1 md:block" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk2QMBXGMQcjs.Button,
+        _chunkTF5D5MNOcjs.Button,
         {
           type: "button",
           variant: "accent",
@@ -2877,14 +2809,14 @@ function AssignTicketModal({
   ] });
 }
 function UnassignTicketModal({ isOpen, onClose, isPending = false, onConfirm }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.Modal, { isOpen, onClose: isPending ? () => {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.Modal, { isOpen, onClose: isPending ? () => {
   } : onClose, className: "text-left md:max-w-[600px]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalTitle, { children: "Unassign Ticket" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalTitle, { children: "Unassign Ticket" }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "w-full text-ods-text-primary text-h4", children: "This Ticket will no longer be linked to this remote session. The ticket itself stays as it is, and you can assign it again anytime." }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.ModalFooter, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.ModalFooter, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "hidden flex-1 md:block" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { type: "button", variant: "destructive", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Unassign" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { type: "button", variant: "destructive", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Unassign" })
     ] })
   ] });
 }
@@ -2899,15 +2831,15 @@ function formatRemoteSessionOffset(offsetMs) {
   return hours > 0 ? `${hours}:${minutes}:${seconds}` : `${minutes}:${seconds}`;
 }
 function RemoteSessionEventList({ events, activeEventId, onSelect, className }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex w-full flex-col gap-[var(--spacing-system-xxs)]", className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex w-full flex-col gap-[var(--spacing-system-xxs)]", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-ods-text-secondary text-h5", children: "Session Events" }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ol", { className: "flex w-full flex-col gap-[var(--spacing-system-xxs)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]", children: events.map((event) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "button",
       {
         type: "button",
         "aria-current": event.id === activeEventId || void 0,
-        onClick: () => _optionalChain([onSelect, 'optionalCall', _31 => _31(event)]),
-        className: _chunk3ATAYP36cjs.cn.call(void 0, 
+        onClick: () => _optionalChain([onSelect, 'optionalCall', _32 => _32(event)]),
+        className: _chunk65VVJSQZcjs.cn.call(void 0, 
           "flex w-full items-start gap-[var(--spacing-system-xxs)] rounded-md p-[var(--spacing-system-xxs)] text-left outline-none transition-colors",
           "hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-ods-focus",
           event.id === activeEventId && "bg-ods-border hover:bg-ods-border"
@@ -2930,7 +2862,7 @@ function RemoteSessionTimelineMarkers({
   className
 }) {
   if (durationMs <= 0) return null;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "relative h-4 w-full", className), children: events.map((event) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "relative h-4 w-full", className), children: events.map((event) => {
     const share = Math.min(1, Math.max(0, event.offsetMs / durationMs));
     const label = `${event.title} at ${formatRemoteSessionOffset(event.offsetMs)}`;
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -2939,7 +2871,7 @@ function RemoteSessionTimelineMarkers({
         type: "button",
         "aria-label": label,
         title: label,
-        onClick: () => _optionalChain([onSelect, 'optionalCall', _32 => _32(event)]),
+        onClick: () => _optionalChain([onSelect, 'optionalCall', _33 => _33(event)]),
         style: { left: `${share * 100}%` },
         className: "absolute top-0 h-4 w-1 -translate-x-1/2 rounded-md bg-ods-text-secondary outline-none transition-colors hover:bg-ods-text-primary focus-visible:ring-2 focus-visible:ring-ods-focus"
       },
@@ -2961,25 +2893,25 @@ var STATUS_TAG = {
 function RemoteSessionStatusTag({ status, className }) {
   const { label, variant } = STATUS_TAG[status];
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkEQZXJUYVcjs.Tag,
+    _chunkJTSUAHDLcjs.Tag,
     {
       label,
       variant,
       icon: status === "live" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LiveDot, {}) : void 0,
-      className: _chunk3ATAYP36cjs.cn.call(void 0, "pointer-events-none shrink-0", className)
+      className: _chunk65VVJSQZcjs.cn.call(void 0, "pointer-events-none shrink-0", className)
     }
   );
 }
 function RemoteSessionExpiry(props) {
   const { className } = props;
   if (props.state === "none") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: _chunk3ATAYP36cjs.cn.call(void 0, "text-ods-text-primary text-h4", className), children: "-" });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: _chunk65VVJSQZcjs.cn.call(void 0, "text-ods-text-primary text-h4", className), children: "-" });
   }
   if (props.state === "expired") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: _chunk3ATAYP36cjs.cn.call(void 0, "text-ods-text-secondary text-h4", className), children: "Expired" });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: _chunk65VVJSQZcjs.cn.call(void 0, "text-ods-text-secondary text-h4", className), children: "Expired" });
   }
   if (props.state === "kept") {
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex min-w-0 flex-col", className), children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex min-w-0 flex-col", className), children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h4", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkMT45XX7Icjs.LockIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
         "Kept"
@@ -2992,7 +2924,7 @@ function RemoteSessionExpiry(props) {
       ] })
     ] });
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk3ATAYP36cjs.cn.call(void 0, "flex min-w-0 flex-col", className), children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, "flex min-w-0 flex-col", className), children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-ods-text-primary text-h4", children: props.date }),
     props.remaining && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "truncate text-ods-text-secondary text-h6", children: props.remaining })
   ] });
@@ -3003,7 +2935,7 @@ function RemoteSessionStorageAlert({ scope, capacity, className }) {
     "div",
     {
       role: "alert",
-      className: _chunk3ATAYP36cjs.cn.call(void 0, 
+      className: _chunk65VVJSQZcjs.cn.call(void 0, 
         "flex w-full items-start gap-[var(--spacing-system-m)] rounded-md bg-ods-warning-secondary p-[var(--spacing-system-s)] text-ods-warning",
         className
       ),
@@ -3076,4 +3008,8 @@ var DEVICE_WALLPAPER_CLASS = "bg-gradient-to-br from-ods-flamingo-cyan-secondary
 
 
 
-exports.SplitButton = SplitButton; exports.HiddenTagsPopup = HiddenTagsPopup; exports.TruncateText = TruncateText; exports.Autocomplete = Autocomplete; exports.Select = Select; exports.SelectGroup = SelectGroup; exports.SelectValue = SelectValue; exports.SelectTrigger = SelectTrigger; exports.SelectScrollUpButton = SelectScrollUpButton; exports.SelectScrollDownButton = SelectScrollDownButton; exports.SelectContent = SelectContent; exports.SelectLabel = SelectLabel; exports.SelectItem = SelectItem; exports.SelectSeparator = SelectSeparator; exports.BACK_BUTTON_SKELETON_CLASS = BACK_BUTTON_SKELETON_CLASS; exports.BackButton = BackButton; exports.PageActions = PageActions; exports.usePageActionsBottomPadding = usePageActionsBottomPadding; exports.EntityImage = EntityImage; exports.TITLE_BLOCK_MIN_HEIGHT = TITLE_BLOCK_MIN_HEIGHT; exports.TitleBlock = TitleBlock; exports.PageLayout = PageLayout; exports.RemoteSessionViewers = RemoteSessionViewers; exports.RemoteSessionScope = RemoteSessionScope; exports.RemoteSessionOrgLogo = RemoteSessionOrgLogo; exports.RemoteSessionRecordingTag = RemoteSessionRecordingTag; exports.REMOTE_SESSION_DRAG_HANDLE_CLASS = REMOTE_SESSION_DRAG_HANDLE_CLASS; exports.RemoteSessionDragger = RemoteSessionDragger; exports.formatRemoteSessionElapsed = formatRemoteSessionElapsed; exports.useRemoteSessionTimer = useRemoteSessionTimer; exports.RemoteAccessRequestCard = RemoteAccessRequestCard; exports.RemoteSessionBlockFrame = RemoteSessionBlockFrame; exports.RemoteSessionEndButton = RemoteSessionEndButton; exports.RemoteSessionSummary = RemoteSessionSummary; exports.RemoteSessionMinimizedChip = RemoteSessionMinimizedChip; exports.RemoteSessionChatPanel = RemoteSessionChatPanel; exports.RemoteDesktopChatMessageRow = RemoteDesktopChatMessageRow; exports.REMOTE_DESKTOP_CHAT_END_USER_NAME = REMOTE_DESKTOP_CHAT_END_USER_NAME; exports.RemoteDesktopChatPanel = RemoteDesktopChatPanel; exports.RemoteDesktopFullscreenToolbar = RemoteDesktopFullscreenToolbar; exports.RemoteDesktopView = RemoteDesktopView; exports.RemoteDesktopViewSkeleton = RemoteDesktopViewSkeleton; exports.RemoteSessionDialog = RemoteSessionDialog; exports.RemoteSessionBorder = RemoteSessionBorder; exports.RemoteSessionPill = RemoteSessionPill; exports.REMOTE_SESSION_KEEP_REASON_LABELS = REMOTE_SESSION_KEEP_REASON_LABELS; exports.KeepRecordingModal = KeepRecordingModal; exports.ReleaseKeepingModal = ReleaseKeepingModal; exports.AssignTicketModal = AssignTicketModal; exports.UnassignTicketModal = UnassignTicketModal; exports.formatRemoteSessionOffset = formatRemoteSessionOffset; exports.RemoteSessionEventList = RemoteSessionEventList; exports.RemoteSessionTimelineMarkers = RemoteSessionTimelineMarkers; exports.RemoteSessionStatusTag = RemoteSessionStatusTag; exports.RemoteSessionExpiry = RemoteSessionExpiry; exports.RemoteSessionStorageAlert = RemoteSessionStorageAlert; exports.DEVICE_WALLPAPER_CLASS = DEVICE_WALLPAPER_CLASS;
+
+
+
+
+exports.HiddenTagsPopup = HiddenTagsPopup; exports.TruncateText = TruncateText; exports.AutocompleteSkeleton = AutocompleteSkeleton; exports.Autocomplete = Autocomplete; exports.Select = Select; exports.SelectGroup = SelectGroup; exports.SelectValue = SelectValue; exports.SelectTrigger = SelectTrigger; exports.SelectScrollUpButton = SelectScrollUpButton; exports.SelectScrollDownButton = SelectScrollDownButton; exports.SelectContent = SelectContent; exports.SelectLabel = SelectLabel; exports.SelectItem = SelectItem; exports.SelectSeparator = SelectSeparator; exports.BACK_BUTTON_SKELETON_CLASS = BACK_BUTTON_SKELETON_CLASS; exports.BackButton = BackButton; exports.PageActions = PageActions; exports.usePageActionsBottomPadding = usePageActionsBottomPadding; exports.PagePicture = PagePicture; exports.PageTitle = PageTitle; exports.ENTITY_IMAGE_SIZE = ENTITY_IMAGE_SIZE; exports.EntityImage = EntityImage; exports.EntityImageSkeleton = EntityImageSkeleton; exports.TITLE_BLOCK_MIN_HEIGHT = TITLE_BLOCK_MIN_HEIGHT; exports.TitleBlock = TitleBlock; exports.PageLayout = PageLayout; exports.RemoteSessionViewers = RemoteSessionViewers; exports.RemoteSessionScope = RemoteSessionScope; exports.RemoteSessionOrgLogo = RemoteSessionOrgLogo; exports.RemoteSessionRecordingTag = RemoteSessionRecordingTag; exports.REMOTE_SESSION_DRAG_HANDLE_CLASS = REMOTE_SESSION_DRAG_HANDLE_CLASS; exports.RemoteSessionDragger = RemoteSessionDragger; exports.formatRemoteSessionElapsed = formatRemoteSessionElapsed; exports.useRemoteSessionTimer = useRemoteSessionTimer; exports.RemoteAccessRequestCard = RemoteAccessRequestCard; exports.RemoteSessionBlockFrame = RemoteSessionBlockFrame; exports.RemoteSessionEndButton = RemoteSessionEndButton; exports.RemoteSessionSummary = RemoteSessionSummary; exports.RemoteSessionMinimizedChip = RemoteSessionMinimizedChip; exports.RemoteSessionChatPanel = RemoteSessionChatPanel; exports.RemoteDesktopChatMessageRow = RemoteDesktopChatMessageRow; exports.RemoteDesktopChatMessageRowSkeleton = RemoteDesktopChatMessageRowSkeleton; exports.REMOTE_DESKTOP_CHAT_END_USER_NAME = REMOTE_DESKTOP_CHAT_END_USER_NAME; exports.RemoteDesktopChatPanel = RemoteDesktopChatPanel; exports.RemoteDesktopFullscreenToolbar = RemoteDesktopFullscreenToolbar; exports.RemoteDesktopView = RemoteDesktopView; exports.RemoteSessionDialog = RemoteSessionDialog; exports.RemoteSessionBorder = RemoteSessionBorder; exports.RemoteSessionPill = RemoteSessionPill; exports.REMOTE_SESSION_KEEP_REASON_LABELS = REMOTE_SESSION_KEEP_REASON_LABELS; exports.KeepRecordingModal = KeepRecordingModal; exports.ReleaseKeepingModal = ReleaseKeepingModal; exports.AssignTicketModal = AssignTicketModal; exports.UnassignTicketModal = UnassignTicketModal; exports.formatRemoteSessionOffset = formatRemoteSessionOffset; exports.RemoteSessionEventList = RemoteSessionEventList; exports.RemoteSessionTimelineMarkers = RemoteSessionTimelineMarkers; exports.RemoteSessionStatusTag = RemoteSessionStatusTag; exports.RemoteSessionExpiry = RemoteSessionExpiry; exports.RemoteSessionStorageAlert = RemoteSessionStorageAlert; exports.DEVICE_WALLPAPER_CLASS = DEVICE_WALLPAPER_CLASS;