@flamingo-stack/openframe-frontend-core 0.0.717 → 0.0.719

package/dist/{chunk-NPAQSMRY.js → chunk-Y4MB25KW.js}

@@ -1,4 +1,8 @@
 "use client";
+import {
+  useAutoLimitTags,
+  useKeyboardCollisionPadding
+} from "./chunk-YYYVS7CX.js";
 import {
   ChatInput,
   Modal,
@@ -53,7 +57,9 @@ import {
   MonitorOffIcon,
   RecordingIcon,
   Send03Icon,
-  Settings01Icon
+  Settings01Icon,
+  TrashIcon,
+  XmarkCircleIcon
 } from "./chunk-NCPTID44.js";
 import {
   MonitorIcon
@@ -82,8 +88,63 @@ import {
   cn
 } from "./chunk-7RXWKTAP.js";
 
+// src/components/ui/hidden-tags-popup.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HiddenTagsPopup = forwardRef(function HiddenTagsPopupImpl({ items, onRemove, disabled, className, style }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style,
+      className: cn(
+        // 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]",
+        "rounded-[6px] border border-ods-border bg-ods-card shadow-lg",
+        "duration-150 animate-in fade-in-0 zoom-in-95",
+        className
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex h-11 items-center justify-between gap-3 px-3 md:h-12",
+            "border-b border-ods-border last:border-b-0"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "min-w-0 flex-1 truncate uppercase text-ods-text-primary text-h5",
+                title: typeof item.label === "string" ? item.label : void 0,
+                children: item.label
+              }
+            ),
+            !disabled && onRemove && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRemove(item.value);
+                },
+                className: "shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary",
+                "aria-label": `Remove ${String(item.label)}`,
+                children: /* @__PURE__ */ jsx(XmarkCircleIcon, { size: 20 })
+              }
+            )
+          ]
+        },
+        String(item.value)
+      ))
+    }
+  );
+});
+HiddenTagsPopup.displayName = "HiddenTagsPopup";
+
 // src/components/ui/truncate-text.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var VARIANT_CLASS = {
   h1: "text-h1",
   h2: "text-h2",
@@ -118,7 +179,7 @@ function TruncateText({
   const isMultiLine = lines > 1;
   const { ref, isTruncated } = useIsTruncated(children, { multiline: isMultiLine });
   const clampClass = isMultiLine ? LINE_CLAMP_CLASS[lines] : "truncate block";
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     FloatingTooltip,
     {
       content: tooltip ?? children,
@@ -127,7 +188,7 @@ function TruncateText({
       className: "max-w-xs whitespace-pre-line [overflow-wrap:anywhere]",
       as,
       triggerClassName: cn("min-w-0 max-w-full", as === "span" && "inline-block align-bottom", triggerClassName),
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         "span",
         {
           ref,
@@ -145,19 +206,564 @@ function TruncateText({
   );
 }
 
+// src/components/ui/autocomplete.tsx
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { Loader2 } from "lucide-react";
+import {
+  forwardRef as forwardRef2,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var innerInputStyles = cn(
+  "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"
+);
+function AutocompleteInner(props, ref) {
+  const {
+    options,
+    disabled = false,
+    startAdornment,
+    showClearAll = true,
+    className,
+    dropdownClassName,
+    freeSolo = false,
+    label,
+    labelVariant,
+    error,
+    filterOptions,
+    renderOption,
+    invalid = false,
+    noOptionsText = "No options",
+    inputValue: inputValueProp,
+    onInputChange,
+    loading = false,
+    loadingText = "Loading...",
+    creatable = false,
+    onCreateOption,
+    maxCreateLength,
+    onDeleteOption,
+    isDeletingOption = false,
+    disableClientFilter = false,
+    showChevron = true,
+    clearOnOpen = true
+  } = props;
+  const multiple = props.multiple ?? false;
+  const placeholder = props.placeholder ?? (multiple ? "Add More..." : "Select...");
+  const maxItems = multiple ? props.maxItems : void 0;
+  const renderTag = multiple ? props.renderTag : void 0;
+  const wrapTags = multiple && (props.wrapTags ?? false);
+  const limitTagsProp = multiple ? props.limitTags ?? "auto" : "auto";
+  const getLimitTagsText = multiple ? props.getLimitTagsText ?? ((more) => `+${more}`) : (more) => `+${more}`;
+  const valueArray = useMemo(
+    () => multiple ? props.value : props.value != null ? [props.value] : [],
+    [multiple, props.value]
+  );
+  const [internalInputValue, setInternalInputValue] = useState("");
+  const isInputControlled = inputValueProp !== void 0;
+  const inputValue = isInputControlled ? inputValueProp : internalInputValue;
+  const updateInputValue = (value, reason) => {
+    if (!isInputControlled) {
+      setInternalInputValue(value);
+    }
+    onInputChange?.(value, reason);
+  };
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const keyboardPadding = useKeyboardCollisionPadding();
+  const containerRef = useRef(null);
+  const hiddenTagsPopupRef = useRef(null);
+  const isInvalid = invalid || !!error;
+  useImperativeHandle(ref, () => containerRef.current);
+  const selectedOptions = useMemo(() => {
+    return valueArray.map((v) => options.find((opt) => opt.value === v) ?? { label: String(v), value: v });
+  }, [valueArray, options]);
+  const selectedOption = !multiple && selectedOptions.length > 0 ? selectedOptions[0] : null;
+  const resolvedStartAdornment = startAdornment ?? selectedOption?.icon ?? null;
+  const inputPlaceholder = multiple ? valueArray.length === 0 ? placeholder : "Add More..." : placeholder;
+  const {
+    visibleCount: autoVisibleCount,
+    middleRef,
+    measureRef,
+    textMeasureRef,
+    badgeRef,
+    inputRef
+  } = useAutoLimitTags({
+    count: multiple ? selectedOptions.length : 0,
+    limitTags: multiple ? wrapTags ? selectedOptions.length : limitTagsProp : 0,
+    placeholder: inputPlaceholder
+  });
+  const visibleCount = multiple ? autoVisibleCount : 0;
+  const visibleTags = multiple ? selectedOptions.slice(0, visibleCount) : [];
+  const hiddenTags = multiple ? selectedOptions.slice(visibleCount) : [];
+  const hiddenTagsCount = multiple ? selectedOptions.length - visibleCount : 0;
+  const [showHiddenTags, setShowHiddenTags] = useState(false);
+  const hiddenTagsRef = useRef(null);
+  useEffect(() => {
+    if (!showHiddenTags) return void 0;
+    const handleClick = (e) => {
+      const target = e.target;
+      const inButton = hiddenTagsRef.current?.contains(target);
+      const inPopup = hiddenTagsPopupRef.current?.contains(target);
+      if (!inButton && !inPopup) {
+        setShowHiddenTags(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [showHiddenTags]);
+  const openDropdown = () => {
+    if (!multiple && !clearOnOpen && selectedOption) {
+      updateInputValue(selectedOption.label, "reset");
+    }
+    setShowHiddenTags(false);
+    setIsOpen(true);
+  };
+  const inputDisplayValue = !multiple && !isOpen && selectedOption ? selectedOption.label : inputValue;
+  const filteredOptions = useMemo(() => {
+    if (disableClientFilter) {
+      return options;
+    }
+    if (filterOptions) {
+      return filterOptions(options, inputValue);
+    }
+    if (!inputValue.trim()) {
+      return options;
+    }
+    const lowerInput = inputValue.toLowerCase();
+    return options.filter((opt) => opt.label.toLowerCase().includes(lowerInput));
+  }, [options, inputValue, filterOptions, disableClientFilter]);
+  const showCreateOption = creatable && inputValue.trim().length > 0 && filteredOptions.length === 0;
+  const isCreateTooLong = maxCreateLength != null && inputValue.trim().length > maxCreateLength;
+  const handleCreate = () => {
+    const trimmed = inputValue.trim();
+    if (!trimmed || maxCreateLength != null && trimmed.length > maxCreateLength) return;
+    const newValue = trimmed;
+    if (multiple) {
+      if (maxItems && valueArray.length >= maxItems) return;
+      props.onChange([...valueArray, newValue]);
+    } else {
+      props.onChange(newValue);
+    }
+    updateInputValue("", "reset");
+    setIsOpen(false);
+    onCreateOption?.(trimmed);
+  };
+  const [highlightedFor, setHighlightedFor] = useState(filteredOptions.length);
+  if (highlightedFor !== filteredOptions.length) {
+    setHighlightedFor(filteredOptions.length);
+    setHighlightedIndex(-1);
+  }
+  const handleInputChange = (e) => {
+    updateInputValue(e.target.value, "input");
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+    setHighlightedIndex(-1);
+  };
+  const handleSelect = (option) => {
+    if (multiple) {
+      const isSelected = valueArray.includes(option.value);
+      if (isSelected) {
+        props.onChange(valueArray.filter((v) => v !== option.value));
+      } else {
+        if (maxItems && valueArray.length >= maxItems) {
+          return;
+        }
+        props.onChange([...valueArray, option.value]);
+      }
+      updateInputValue("", "reset");
+      inputRef.current?.focus();
+    } else {
+      props.onChange(option.value);
+      updateInputValue(clearOnOpen ? "" : option.label, "reset");
+      setIsOpen(false);
+    }
+  };
+  const handleClearAll = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (multiple) {
+      props.onChange([]);
+    } else {
+      props.onChange(null);
+    }
+    if (!isInputControlled) {
+      setInternalInputValue("");
+    }
+    onInputChange?.("", "clear");
+    setIsOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          openDropdown();
+        }
+        setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (showCreateOption) {
+          handleCreate();
+        } else if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex]);
+        } else if (freeSolo && inputValue.trim()) {
+          const newOption = {
+            label: inputValue.trim(),
+            value: inputValue.trim()
+          };
+          handleSelect(newOption);
+        }
+        break;
+      case "Escape": {
+        const resetValue = !multiple && !clearOnOpen && selectedOption ? selectedOption.label : "";
+        updateInputValue(resetValue, "reset");
+        setIsOpen(false);
+        setHighlightedIndex(-1);
+        break;
+      }
+      case "Backspace":
+        break;
+    }
+  };
+  const handleOpenChange = (open) => {
+    if (open) {
+      openDropdown();
+    } else {
+      const resetValue = !multiple && !clearOnOpen && selectedOption ? selectedOption.label : "";
+      updateInputValue(resetValue, "reset");
+      setIsOpen(false);
+    }
+  };
+  const canAddMore = multiple ? !maxItems || valueArray.length < maxItems : true;
+  const hasValue = valueArray.length > 0;
+  const popover = /* @__PURE__ */ jsxs2(PopoverPrimitive.Root, { open: isOpen, onOpenChange: handleOpenChange, modal: false, children: [
+    /* @__PURE__ */ jsx3(PopoverPrimitive.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "data-invalid": isInvalid || void 0,
+        className: cn(
+          // Layout — single line, no wrapping
+          "flex min-h-11 cursor-text items-center rounded-[6px] border md:min-h-12",
+          "focus-within:outline-none",
+          "transition-colors duration-200",
+          "border-ods-border bg-ods-card",
+          "group",
+          !disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
+          disabled && "!cursor-not-allowed bg-ods-bg",
+          // Adornments / chevron carry their own colour — grey them with the
+          // value so a disabled field reads as one flat colour. Scoped to the
+          // DIRECT span child (the start adornment) on purpose: as a descendant
+          // rule it also hit the selected `Tag` chips in the middle zone, whose
+          // label is a span, and they went invisible against their own fill in
+          // the light theme. Anything nested inside the adornment that sets its
+          // own colour keeps it; anything that doesn't inherits the grey.
+          "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
+          isOpen && !isInvalid && "border-ods-accent hover:border-ods-accent",
+          isInvalid && "border-ods-error hover:border-ods-error"
+        ),
+        onClick: () => {
+          if (!disabled) {
+            inputRef.current?.focus();
+            openDropdown();
+          }
+        },
+        children: [
+          resolvedStartAdornment && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: cn(
+                // 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.
+                "flex-shrink-0 pl-3 text-ods-text-secondary transition-colors duration-200",
+                "[&_img]:size-4 [&_img]:object-contain md:[&_img]:size-6 [&_svg]:size-4 md:[&_svg]:size-6",
+                isOpen && !isInvalid && "text-ods-accent",
+                isInvalid && "text-ods-error"
+              ),
+              children: resolvedStartAdornment
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              ref: middleRef,
+              className: cn(
+                "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__ */ jsx3(
+                  Tag,
+                  {
+                    variant: "outline",
+                    className: wrapTags ? "max-w-full" : void 0,
+                    labelClassName: wrapTags ? "truncate" : "max-w-[90px] truncate",
+                    label: renderTag ? renderTag(option) : option.label,
+                    onClose: !disabled ? () => {
+                      props.onChange(valueArray.filter((v) => v !== option.value));
+                    } : void 0
+                  },
+                  String(option.value)
+                )),
+                multiple && hiddenTagsCount > 0 && /* @__PURE__ */ jsx3("div", { ref: hiddenTagsRef, className: "shrink-0", children: /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    ref: badgeRef,
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setShowHiddenTags((prev) => {
+                        if (!prev) setIsOpen(false);
+                        return !prev;
+                      });
+                    },
+                    className: cn(
+                      "flex h-8 items-center px-2",
+                      "rounded-[6px] border border-ods-border bg-ods-card",
+                      "text-ods-text-secondary text-h5",
+                      "cursor-pointer transition-colors hover:bg-ods-bg-hover"
+                    ),
+                    children: getLimitTagsText(hiddenTagsCount)
+                  }
+                ) }),
+                canAddMore && /* @__PURE__ */ jsx3(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    value: inputDisplayValue,
+                    onChange: handleInputChange,
+                    onKeyDown: handleKeyDown,
+                    onFocus: () => openDropdown(),
+                    placeholder: inputPlaceholder,
+                    disabled,
+                    className: innerInputStyles
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-1 pr-3", children: [
+            showClearAll && (hasValue || inputValue.length > 0) && !disabled && isOpen && /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: handleClearAll,
+                className: "flex items-center justify-center transition-opacity hover:opacity-70",
+                "aria-label": "Clear all",
+                children: /* @__PURE__ */ jsx3(XmarkCircleIcon, { className: "size-4 text-ods-text-secondary md:size-6" })
+              }
+            ),
+            loading ? /* @__PURE__ */ jsx3(
+              Loader2,
+              {
+                className: cn(
+                  "size-4 animate-spin md:size-6",
+                  isInvalid ? "text-ods-error" : isOpen ? "text-ods-accent" : "text-ods-text-secondary"
+                )
+              }
+            ) : showChevron && /* @__PURE__ */ jsx3(
+              Chevron02DownIcon,
+              {
+                className: cn(
+                  "size-4 transition-all duration-200 md:size-6",
+                  "text-ods-text-secondary",
+                  isOpen && "rotate-180",
+                  isOpen && !isInvalid && "text-ods-accent",
+                  isInvalid && "text-ods-error"
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(
+      PopoverPrimitive.Content,
+      {
+        className: cn(
+          "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",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+          dropdownClassName
+        ),
+        sideOffset: 4,
+        align: "start",
+        collisionPadding: { bottom: keyboardPadding },
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+          inputRef.current?.focus();
+        },
+        onInteractOutside: (e) => {
+          if (containerRef.current?.contains(e.target)) {
+            e.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ jsxs2(ScrollAreaPrimitive.Root, { className: "flex min-h-0 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsx3(ScrollAreaPrimitive.Viewport, { className: "max-h-[240px] min-h-0 w-full [&>div]:!block", children: /* @__PURE__ */ jsx3("div", { role: "listbox", children: loading ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-ods-text-secondary text-h6", children: loadingText }) : filteredOptions.length === 0 ? showCreateOption ? isCreateTooLong ? /* @__PURE__ */ jsxs2("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"
+          ] }) : /* @__PURE__ */ jsx3(
+            "div",
+            {
+              role: "option",
+              "aria-selected": false,
+              className: cn(
+                "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"
+              ),
+              onClick: handleCreate,
+              children: /* @__PURE__ */ jsx3(TruncateText, { className: "text-current", children: `+ Create "${inputValue.trim()}"` })
+            }
+          ) : /* @__PURE__ */ jsx3("div", { className: "px-3 py-2 text-ods-text-secondary text-h6", children: freeSolo && inputValue.trim() ? /* @__PURE__ */ jsxs2("span", { children: [
+            'Press Enter to add "',
+            inputValue,
+            '"'
+          ] }) : noOptionsText }) : filteredOptions.map((option, index) => {
+            const isSelected = valueArray.includes(option.value);
+            const isHighlighted = index === highlightedIndex;
+            return /* @__PURE__ */ jsx3(
+              "div",
+              {
+                role: "option",
+                "aria-selected": isSelected,
+                className: cn(
+                  // `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",
+                  isHighlighted && "bg-ods-bg-surface",
+                  isSelected ? "text-ods-accent" : "text-ods-text-primary",
+                  !isHighlighted && "hover:bg-ods-bg-hover"
+                ),
+                onClick: () => handleSelect(option),
+                onMouseEnter: () => setHighlightedIndex(index),
+                children: renderOption ? renderOption(option, isSelected) : /* @__PURE__ */ jsxs2("div", { className: "flex w-full min-w-0 items-center justify-between gap-[var(--spacing-system-xsf)]", children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
+                    option.icon && /* @__PURE__ */ jsx3("span", { className: "flex size-5 shrink-0 items-center justify-center overflow-hidden [&_img]:size-full [&_img]:object-contain [&_svg]:size-full", children: option.icon }),
+                    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                      /* @__PURE__ */ jsx3(TruncateText, { className: "text-current", children: option.label }),
+                      typeof option.description === "string" ? /* @__PURE__ */ jsx3(TruncateText, { tone: "secondary", variant: "h6", children: option.description }) : option.description
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+                    isSelected && /* @__PURE__ */ jsx3(CheckIcon, { className: "text-ods-accent", size: 20 }),
+                    onDeleteOption && !isSelected && /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `Delete ${option.label}`,
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onDeleteOption(option.value);
+                        },
+                        disabled: isDeletingOption,
+                        className: "opacity-0 transition-opacity focus-visible:opacity-100 disabled:pointer-events-none disabled:opacity-50 group-hover/item:opacity-100",
+                        children: /* @__PURE__ */ jsx3(TrashIcon, { className: "size-4 text-ods-error" })
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              String(option.value)
+            );
+          }) }) }),
+          /* @__PURE__ */ jsx3(ScrollAreaPrimitive.Scrollbar, { className: "hidden", orientation: "vertical", children: /* @__PURE__ */ jsx3(ScrollAreaPrimitive.Thumb, {}) })
+        ] })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx3(
+    FieldWrapper,
+    {
+      label,
+      labelVariant,
+      error,
+      errorSlot: "error" in props,
+      className,
+      children: /* @__PURE__ */ jsxs2("div", { className: "relative", ref: containerRef, children: [
+        popover,
+        multiple && showHiddenTags && hiddenTagsCount > 0 && /* @__PURE__ */ jsx3(
+          HiddenTagsPopup,
+          {
+            ref: hiddenTagsPopupRef,
+            items: hiddenTags,
+            disabled,
+            className: "left-auto right-0 max-w-full",
+            onRemove: (value) => {
+              const newValue = valueArray.filter((v) => v !== value);
+              props.onChange(newValue);
+              if (typeof limitTagsProp === "number" && newValue.length <= limitTagsProp) setShowHiddenTags(false);
+            }
+          }
+        ),
+        multiple && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              ref: textMeasureRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible absolute left-0 top-0 -z-10 whitespace-nowrap text-h4",
+              children: inputPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "div",
+            {
+              ref: measureRef,
+              "aria-hidden": "true",
+              className: "pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-2",
+              children: selectedOptions.map((option) => /* @__PURE__ */ jsx3(
+                Tag,
+                {
+                  variant: "outline",
+                  labelClassName: "max-w-[90px] truncate",
+                  label: renderTag ? renderTag(option) : option.label,
+                  onClose: () => {
+                  }
+                },
+                `m-${String(option.value)}`
+              ))
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+var Autocomplete = forwardRef2(AutocompleteInner);
+
 // src/components/ui/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { forwardRef } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = forwardRef((allProps, ref) => {
+var SelectTrigger = forwardRef3((allProps, ref) => {
   const { className, children, invalid, label, labelVariant, error, ...props } = allProps;
   const errorSlot = "error" in allProps;
   const isInvalid = invalid || !!error;
-  const trigger = /* @__PURE__ */ jsxs(
+  const trigger = /* @__PURE__ */ jsxs3(
     SelectPrimitive.Trigger,
     {
       ref,
@@ -191,7 +797,7 @@ var SelectTrigger = forwardRef((allProps, ref) => {
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx4(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx4(
           Chevron02DownIcon,
           {
             className: cn(
@@ -204,30 +810,30 @@ var SelectTrigger = forwardRef((allProps, ref) => {
       ]
     }
   );
-  return /* @__PURE__ */ jsx2(FieldWrapper, { label, labelVariant, error, errorSlot, children: trigger });
+  return /* @__PURE__ */ jsx4(FieldWrapper, { label, labelVariant, error, errorSlot, children: trigger });
 });
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var SelectScrollUpButton = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
     className: cn("flex cursor-default items-center justify-center py-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx2(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx4(ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+var SelectScrollDownButton = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
     className: cn("flex cursor-default items-center justify-center py-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx2(ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx4(ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx2(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = forwardRef3(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx4(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs3(
   SelectPrimitive.Content,
   {
     ref,
@@ -244,16 +850,16 @@ var SelectContent = forwardRef(({ className, children, position = "popper", ...p
     },
     ...props,
     children: [
-      /* @__PURE__ */ jsx2(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx2(SelectPrimitive.Viewport, { className: "w-full", children }),
-      /* @__PURE__ */ jsx2(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx4(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx4(SelectPrimitive.Viewport, { className: "w-full", children }),
+      /* @__PURE__ */ jsx4(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(SelectPrimitive.Label, { ref, className: cn("py-1.5 pl-8 pr-2 font-semibold text-h6", className), ...props }));
+var SelectLabel = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(SelectPrimitive.Label, { ref, className: cn("py-1.5 pl-8 pr-2 font-semibold text-h6", className), ...props }));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = forwardRef3(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(
   SelectPrimitive.Item,
   {
     ref,
@@ -269,17 +875,17 @@ var SelectItem = forwardRef(({ className, children, ...props }, ref) => /* @__PU
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx2(SelectPrimitive.ItemText, { children }),
-      /* @__PURE__ */ jsx2(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(CheckIcon, { className: "text-ods-accent", size: 20 }) })
+      /* @__PURE__ */ jsx4(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ jsx4(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx4(CheckIcon, { className: "text-ods-accent", size: 20 }) })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-ods-border", className), ...props }));
+var SelectSeparator = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx4(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-ods-border", className), ...props }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/layout/back-button.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var BACK_BUTTON_CLASS = cn(
   "group inline-flex items-center justify-center self-start rounded-md",
   "gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)]",
@@ -289,9 +895,9 @@ var BACK_BUTTON_CLASS = cn(
 );
 var BACK_BUTTON_SKELETON_CLASS = "h-12 w-40 rounded-md";
 function BackButton({ label = "Back", className, type = "button", href, ...props }) {
-  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx3(Chevron02LeftIcon, { className: "size-6 shrink-0" }),
-    /* @__PURE__ */ jsx3("span", { className: "text-h4", children: label })
+  const content = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(Chevron02LeftIcon, { className: "size-6 shrink-0" }),
+    /* @__PURE__ */ jsx5("span", { className: "text-h4", children: label })
   ] });
   if (href) {
     const {
@@ -306,7 +912,7 @@ function BackButton({ label = "Back", className, type = "button", href, ...props
       value: _value,
       ...shared
     } = props;
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       next_link_default,
       {
         ...shared,
@@ -316,12 +922,12 @@ function BackButton({ label = "Back", className, type = "button", href, ...props
       }
     );
   }
-  return /* @__PURE__ */ jsx3("button", { type, className: cn(BACK_BUTTON_CLASS, className), ...props, children: content });
+  return /* @__PURE__ */ jsx5("button", { type, className: cn(BACK_BUTTON_CLASS, className), ...props, children: content });
 }
 
 // src/components/ui/page-actions.tsx
 import React from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function actionKey(action, idx) {
   return `${action.label ?? action.ariaLabel ?? "action"}-${idx}`;
 }
@@ -356,14 +962,14 @@ function actionToMenuItems(action, idx) {
 function renderActionButton(action, opts = {}) {
   const button = renderRawActionButton(action, opts);
   if (!action.tooltip) return button;
-  return /* @__PURE__ */ jsx4(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs3(Tooltip, { children: [
-    /* @__PURE__ */ jsx4(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx4(TooltipContent, { children: action.tooltip })
+  return /* @__PURE__ */ jsx6(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxs5(Tooltip, { children: [
+    /* @__PURE__ */ jsx6(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx6(TooltipContent, { children: action.tooltip })
   ] }) });
 }
 function renderRawActionButton(action, opts = {}) {
   if (action.iconAction) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       SplitButton,
       {
         variant: action.variant ?? void 0,
@@ -381,18 +987,18 @@ function renderRawActionButton(action, opts = {}) {
     );
   }
   if (action.submenu && action.submenu.length > 0) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       ActionsMenuDropdown,
       {
         groups: [{ items: action.submenu }],
-        customTrigger: /* @__PURE__ */ jsx4(
+        customTrigger: /* @__PURE__ */ jsx6(
           Button,
           {
             variant: "outline",
             disabled: action.disabled,
             loading: action.loading,
             leftIcon: action.icon,
-            splitIcon: /* @__PURE__ */ jsx4(Chevron02DownIcon, { className: "h-4 w-4" }),
+            splitIcon: /* @__PURE__ */ jsx6(Chevron02DownIcon, { className: "h-4 w-4" }),
             className: opts.fullWidth ? "flex-1" : void 0,
             children: action.label
           }
@@ -402,8 +1008,8 @@ function renderRawActionButton(action, opts = {}) {
   }
   const isIconOnly = opts.iconOnly || !action.label || action.iconOnlyOnDesktop;
   if (isIconOnly) {
-    const iconNode = action.iconOnlyOnDesktop ? /* @__PURE__ */ jsx4("span", { className: "inline-flex [&_svg]:!text-ods-text-primary", children: action.icon }) : action.icon;
-    return /* @__PURE__ */ jsx4(
+    const iconNode = action.iconOnlyOnDesktop ? /* @__PURE__ */ jsx6("span", { className: "inline-flex [&_svg]:!text-ods-text-primary", children: action.icon }) : action.icon;
+    return /* @__PURE__ */ jsx6(
       Button,
       {
         variant: action.variant,
@@ -419,7 +1025,7 @@ function renderRawActionButton(action, opts = {}) {
       }
     );
   }
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     Button,
     {
       variant: action.variant,
@@ -446,9 +1052,9 @@ function ActionSkeletons({
   emptyFallback = "icon"
 }) {
   const items = actions.length > 0 ? actions : [null];
-  return /* @__PURE__ */ jsx4(Fragment2, { children: items.map((action, idx) => {
+  return /* @__PURE__ */ jsx6(Fragment3, { children: items.map((action, idx) => {
     const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === "icon";
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       Skeleton,
       {
         className: cn(
@@ -462,7 +1068,7 @@ function ActionSkeletons({
   }) });
 }
 function MobileTriggerSkeleton() {
-  return /* @__PURE__ */ jsx4(Skeleton, { className: cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS) });
+  return /* @__PURE__ */ jsx6(Skeleton, { className: cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS) });
 }
 function PageActions({
   variant = "icon-buttons",
@@ -473,7 +1079,7 @@ function PageActions({
   loading
 }) {
   if (variant === "icon-buttons") {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       IconButtonsVariant,
       {
         actions,
@@ -485,7 +1091,7 @@ function PageActions({
     );
   }
   if (variant === "menu-primary") {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx6(
       MenuPrimaryVariant,
       {
         actions,
@@ -496,7 +1102,7 @@ function PageActions({
       }
     );
   }
-  return /* @__PURE__ */ jsx4(PrimaryButtonsVariant, { actions, className, loading });
+  return /* @__PURE__ */ jsx6(PrimaryButtonsVariant, { actions, className, loading });
 }
 function IconButtonsVariant({
   actions,
@@ -512,15 +1118,15 @@ function IconButtonsVariant({
   const useSingleActionMobile = isSingleAction && !hasMenuActions;
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ...menuActions ?? []];
   const hasMobileMenuItems = mobileMenuGroups.some((g) => g.items.length > 0);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
-      loading ? /* @__PURE__ */ jsx4(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        desktopActions.map((action, idx) => /* @__PURE__ */ jsx4(React.Fragment, { children: renderActionButton(action) }, actionKey(action, idx))),
-        hasMenuActions && /* @__PURE__ */ jsx4(ActionsMenuDropdown, { groups: menuActions })
+      loading ? /* @__PURE__ */ jsx6(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        desktopActions.map((action, idx) => /* @__PURE__ */ jsx6(React.Fragment, { children: renderActionButton(action) }, actionKey(action, idx))),
+        hasMenuActions && /* @__PURE__ */ jsx6(ActionsMenuDropdown, { groups: menuActions })
       ] })
     ] }),
-    /* @__PURE__ */ jsx4("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx4(MobileTriggerSkeleton, {}) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ jsx4(ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
+    /* @__PURE__ */ jsx6("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx6(MobileTriggerSkeleton, {}) : useSingleActionMobile && singleAction ? renderActionButton(singleAction, { iconOnly: true }) : hasMobileMenuItems ? /* @__PURE__ */ jsx6(ActionsMenuDropdown, { groups: mobileMenuGroups }) : null })
   ] });
 }
 function PrimaryButtonsVariant({
@@ -534,14 +1140,14 @@ function PrimaryButtonsVariant({
     return 0;
   });
   const desktopActions = sortedActions.filter((a) => !a.showOnlyMobile);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("div", { className: cn("hidden items-center md:content-md:flex", ACTIONS_GAP, className), children: loading ? (
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsx6("div", { className: cn("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__ */ jsx4(ActionSkeletons, { actions: desktopActions, emptyFallback: "label" })
-    ) : desktopActions.map((action, idx) => /* @__PURE__ */ jsx4(React.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
-    /* @__PURE__ */ jsx4("div", { className: cn("hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ jsx4(MobileTriggerSkeleton, {}) : /* @__PURE__ */ jsx4(CompactPrimaryActions, { actions: desktopActions }) }),
-    /* @__PURE__ */ jsx4(MobileBottomActions, { actions: sortedActions, loading })
+      /* @__PURE__ */ jsx6(ActionSkeletons, { actions: desktopActions, emptyFallback: "label" })
+    ) : desktopActions.map((action, idx) => /* @__PURE__ */ jsx6(React.Fragment, { children: renderActionButton(action) }, `desktop-${actionKey(action, idx)}`)) }),
+    /* @__PURE__ */ jsx6("div", { className: cn("hidden items-center md:content-max-md:flex", ACTIONS_GAP, className), children: loading ? /* @__PURE__ */ jsx6(MobileTriggerSkeleton, {}) : /* @__PURE__ */ jsx6(CompactPrimaryActions, { actions: desktopActions }) }),
+    /* @__PURE__ */ jsx6(MobileBottomActions, { actions: sortedActions, loading })
   ] });
 }
 function MenuPrimaryVariant({
@@ -555,19 +1161,19 @@ function MenuPrimaryVariant({
   const hasMenuActions = menuActions.some((g) => g.items.length > 0);
   const mobileMenuGroups = [{ items: actions.flatMap(actionToMenuItems) }, ...menuActions];
   const hasMobileMenuItems = mobileMenuGroups.some((g) => g.items.length > 0);
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: cn("hidden items-center content-md:flex", ACTIONS_GAP, className), children: [
       selector,
-      loading ? /* @__PURE__ */ jsx4(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        hasMenuActions && /* @__PURE__ */ jsx4(ActionsMenuDropdown, { groups: menuActions }),
-        desktopActions.map((action, idx) => /* @__PURE__ */ jsx4(React.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
+      loading ? /* @__PURE__ */ jsx6(ActionSkeletons, { actions: desktopActions }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        hasMenuActions && /* @__PURE__ */ jsx6(ActionsMenuDropdown, { groups: menuActions }),
+        desktopActions.map((action, idx) => /* @__PURE__ */ jsx6(React.Fragment, { children: renderActionButton({ ...action, variant: action.variant || "accent" }) }, `desktop-${actionKey(action, idx)}`))
       ] })
     ] }),
-    /* @__PURE__ */ jsx4("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx4(MobileTriggerSkeleton, {}) : hasMobileMenuItems || selector ? (
+    /* @__PURE__ */ jsx6("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx6(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__ */ jsx4(ActionsMenuDropdown, { groups: mobileMenuGroups, header: selector })
+      /* @__PURE__ */ jsx6(ActionsMenuDropdown, { groups: mobileMenuGroups, header: selector })
     ) : null })
   ] });
 }
@@ -575,13 +1181,13 @@ function CompactPrimaryActions({ actions }) {
   const foldable = actions.filter((action) => action.variant !== "accent" && !!action.label);
   const fold = foldable.length > 1;
   const inline = fold ? actions.filter((action) => !foldable.includes(action)) : actions;
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    fold && /* @__PURE__ */ jsx4(ActionsMenuDropdown, { groups: [{ items: foldable.flatMap(actionToMenuItems) }] }),
-    inline.map((action, idx) => /* @__PURE__ */ jsx4(React.Fragment, { children: renderActionButton(action) }, `compact-${actionKey(action, idx)}`))
+  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
+    fold && /* @__PURE__ */ jsx6(ActionsMenuDropdown, { groups: [{ items: foldable.flatMap(actionToMenuItems) }] }),
+    inline.map((action, idx) => /* @__PURE__ */ jsx6(React.Fragment, { children: renderActionButton(action) }, `compact-${actionKey(action, idx)}`))
   ] });
 }
 function MobileBottomActions({ actions, loading }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -593,7 +1199,7 @@ function MobileBottomActions({ actions, loading }) {
         "flex items-start p-[var(--spacing-system-lf)]",
         ACTIONS_GAP
       ),
-      children: loading ? /* @__PURE__ */ jsx4(ActionSkeletons, { actions, fullWidth: true, emptyFallback: "label" }) : actions.map((action, idx) => /* @__PURE__ */ jsx4(React.Fragment, { children: renderActionButton(action, { fullWidth: !!action.label }) }, `mobile-${actionKey(action, idx)}`))
+      children: loading ? /* @__PURE__ */ jsx6(ActionSkeletons, { actions, fullWidth: true, emptyFallback: "label" }) : actions.map((action, idx) => /* @__PURE__ */ jsx6(React.Fragment, { children: renderActionButton(action, { fullWidth: !!action.label }) }, `mobile-${actionKey(action, idx)}`))
     }
   );
 }
@@ -603,7 +1209,7 @@ function usePageActionsBottomPadding(variant) {
 
 // src/components/ui/entity-image.tsx
 import React2 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ENTITY_IMAGE_SIZE = "size-[52px] content-md:size-[60px]";
 function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
   const resolvedSrc = useAuthedImageSrc(src);
@@ -612,7 +1218,7 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
   const showFallback = imageFailed || !resolvedSrc;
   const initials = personInitials(fallbackText ?? alt);
   if (showFallback) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx7(
       "div",
       {
         "aria-label": alt,
@@ -625,7 +1231,7 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     next_image_default,
     {
       src: resolvedSrc,
@@ -644,10 +1250,10 @@ function EntityImage({ src, alt, fallbackText, sizeClassName, className }) {
 }
 
 // src/components/layout/title-block.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var TITLE_BLOCK_MIN_HEIGHT = "min-h-11 content-md:min-h-12";
 function TitleTextSkeleton({ widthClass, heightClass }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     "span",
     {
       "aria-hidden": true,
@@ -687,8 +1293,8 @@ function TitleBlock({
   const { ref: subtitleRef, isTruncated: subtitleTruncated } = useIsTruncated(
     loading ? null : subtitle
   );
-  const titleNode = loading ? /* @__PURE__ */ jsx6(TitleTextSkeleton, { widthClass: skeletonSize.width, heightClass: skeletonSize.height }) : title;
-  return /* @__PURE__ */ jsxs4(
+  const titleNode = loading ? /* @__PURE__ */ jsx8(TitleTextSkeleton, { widthClass: skeletonSize.width, heightClass: skeletonSize.height }) : title;
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -707,7 +1313,7 @@ function TitleBlock({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             className: cn(
@@ -715,19 +1321,19 @@ function TitleBlock({
               TITLE_BLOCK_MIN_HEIGHT
             ),
             children: [
-              backButton && /* @__PURE__ */ jsx6(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden content-md:inline-flex" }),
-              image || hasSubtitleRow || loading ? /* @__PURE__ */ jsxs4("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
-                image && /* @__PURE__ */ jsx6(EntityImage, { src: image.src, alt: image.alt, fallbackText: image.alt || title }),
-                /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
-                  (loading || title) && (titleAdornment ? /* @__PURE__ */ jsxs4("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
-                    /* @__PURE__ */ jsx6(
+              backButton && /* @__PURE__ */ jsx8(BackButton, { onClick: backButton.onClick, label: backButton.label, className: "hidden content-md:inline-flex" }),
+              image || hasSubtitleRow || loading ? /* @__PURE__ */ jsxs6("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
+                image && /* @__PURE__ */ jsx8(EntityImage, { src: image.src, alt: image.alt, fallbackText: image.alt || title }),
+                /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 flex-col justify-center", children: [
+                  (loading || title) && (titleAdornment ? /* @__PURE__ */ jsxs6("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
+                    /* @__PURE__ */ jsx8(
                       FloatingTooltip,
                       {
                         content: title,
                         side: "bottom",
                         disabled: !titleTruncated,
                         triggerClassName: "min-w-0",
-                        children: /* @__PURE__ */ jsx6(
+                        children: /* @__PURE__ */ jsx8(
                           "h1",
                           {
                             ref: titleRef,
@@ -737,36 +1343,36 @@ function TitleBlock({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx6("span", { className: "shrink-0", children: titleAdornment })
-                  ] }) : /* @__PURE__ */ jsx6(FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, children: /* @__PURE__ */ jsx6("h1", { ref: titleRef, className: cn(titleClass, "text-ods-text-primary", titleOverflowClass), children: titleNode }) })),
+                    /* @__PURE__ */ jsx8("span", { className: "shrink-0", children: titleAdornment })
+                  ] }) : /* @__PURE__ */ jsx8(FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, children: /* @__PURE__ */ jsx8("h1", { ref: titleRef, className: cn(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__ */ jsx6(FloatingTooltip, { content: subtitle, side: "bottom", disabled: !subtitleTruncated, children: /* @__PURE__ */ jsx6(
+                  /* @__PURE__ */ jsx8(FloatingTooltip, { content: subtitle, side: "bottom", disabled: !subtitleTruncated, children: /* @__PURE__ */ jsx8(
                     "p",
                     {
                       ref: subtitleRef,
                       className: "truncate text-ods-text-secondary text-h6",
                       "aria-hidden": !loading && !subtitle ? true : void 0,
-                      children: loading ? /* @__PURE__ */ jsx6(TitleTextSkeleton, { widthClass: "w-28 content-md:w-36", heightClass: "h-2.5 content-md:h-3" }) : subtitle || "\xA0"
+                      children: loading ? /* @__PURE__ */ jsx8(TitleTextSkeleton, { widthClass: "w-28 content-md:w-36", heightClass: "h-2.5 content-md:h-3" }) : subtitle || "\xA0"
                     }
                   ) })
                 ] })
-              ] }) : title && (titleAdornment ? /* @__PURE__ */ jsxs4("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
-                /* @__PURE__ */ jsx6(FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, triggerClassName: "min-w-0", children: /* @__PURE__ */ jsx6("h1", { ref: titleRef, className: cn(titleClass, "min-w-0 text-ods-text-primary", titleOverflowClass), children: title }) }),
-                /* @__PURE__ */ jsx6("span", { className: "shrink-0", children: titleAdornment })
+              ] }) : title && (titleAdornment ? /* @__PURE__ */ jsxs6("div", { className: "flex w-full min-w-0 items-center gap-[var(--spacing-system-m)]", children: [
+                /* @__PURE__ */ jsx8(FloatingTooltip, { content: title, side: "bottom", disabled: !titleTruncated, triggerClassName: "min-w-0", children: /* @__PURE__ */ jsx8("h1", { ref: titleRef, className: cn(titleClass, "min-w-0 text-ods-text-primary", titleOverflowClass), children: title }) }),
+                /* @__PURE__ */ jsx8("span", { className: "shrink-0", children: titleAdornment })
               ] }) : (
                 /* This branch never had the single-line clamp, so text already
                      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__ */ jsx6("h1", { className: cn(titleClass, "text-ods-text-primary", titleWrap && "break-words"), children: title })
+                /* @__PURE__ */ jsx8("h1", { className: cn(titleClass, "text-ods-text-primary", titleWrap && "break-words"), children: title })
               ))
             ]
           }
         ),
-        (hasActions || hasMenuActions || selector || loadingActions) && /* @__PURE__ */ jsx6("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsx6(
+        (hasActions || hasMenuActions || selector || loadingActions) && /* @__PURE__ */ jsx8("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsx8(
           PageActions,
           {
             variant: actionsVariant,
@@ -782,7 +1388,7 @@ function TitleBlock({
 }
 
 // src/components/layout/page-layout.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function PageLayout({
   children,
   title,
@@ -807,8 +1413,8 @@ function PageLayout({
   const hasActions = actions && actions.length > 0;
   const needsBottomPadding = hasActions && actionsVariant === "primary-buttons";
   const hasHeader = showHeader && (title || subtitle || image || backButton || hasActions || selector || loading);
-  return /* @__PURE__ */ jsxs5("div", { className: cn("flex w-full flex-col", className), children: [
-    hasHeader && /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex w-full flex-col", className), children: [
+    hasHeader && /* @__PURE__ */ jsx9(
       TitleBlock,
       {
         title,
@@ -828,7 +1434,7 @@ function PageLayout({
         titleWrap
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         className: cn(
@@ -843,8 +1449,8 @@ function PageLayout({
 }
 
 // src/components/features/remote-session/remote-session-viewers.tsx
-import { useState } from "react";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState2 } from "react";
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function viewerLabel(viewer) {
   if (viewer.isHost) return `${viewer.name} (host)`;
   if (viewer.isYou) return `${viewer.name} (you)`;
@@ -854,14 +1460,14 @@ function hostFirst(viewers) {
   return [...viewers.filter((viewer) => viewer.isHost), ...viewers.filter((viewer) => !viewer.isHost)];
 }
 function RemoteSessionViewers({ viewers, max = 4, className }) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState2(false);
   if (viewers.length === 0) return null;
   const ordered = hostFirst(viewers);
   const faces = ordered.slice(0, max);
   const overflow = ordered.length - faces.length;
   const Chevron = open ? Chevron02UpIcon : Chevron02DownIcon;
-  return /* @__PURE__ */ jsxs6(DropdownMenu, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(DropdownMenu, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs8(
       DropdownMenuTrigger,
       {
         "aria-label": `In this session: ${ordered.map(viewerLabel).join(", ")}`,
@@ -871,8 +1477,8 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs6("span", { className: "flex items-center", children: [
-            faces.map((viewer, index) => /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs8("span", { className: "flex items-center", children: [
+            faces.map((viewer, index) => /* @__PURE__ */ jsx10(
               SquareAvatar,
               {
                 variant: "round",
@@ -889,16 +1495,16 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
               },
               viewer.id
             )),
-            overflow > 0 && /* @__PURE__ */ jsxs6("span", { className: "relative -ml-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-ods-bg text-ods-text-secondary ring-1 ring-ods-border text-h6", children: [
+            overflow > 0 && /* @__PURE__ */ jsxs8("span", { className: "relative -ml-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-ods-bg text-ods-text-secondary ring-1 ring-ods-border text-h6", children: [
               "+",
               overflow
             ] })
           ] }),
-          /* @__PURE__ */ jsx8("span", { className: "flex size-8 items-center justify-center rounded-md text-ods-text-primary", children: /* @__PURE__ */ jsx8(Chevron, { size: 16, color: "currentColor" }) })
+          /* @__PURE__ */ jsx10("span", { className: "flex size-8 items-center justify-center rounded-md text-ods-text-primary", children: /* @__PURE__ */ jsx10(Chevron, { size: 16, color: "currentColor" }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx8(DropdownMenuContent, { align: "end", className: "w-[280px] p-0", children: ordered.map((viewer) => /* @__PURE__ */ jsxs6(
+    /* @__PURE__ */ jsx10(DropdownMenuContent, { align: "end", className: "w-[280px] p-0", children: ordered.map((viewer) => /* @__PURE__ */ jsxs8(
       DropdownMenuItem,
       {
         className: cn(
@@ -906,7 +1512,7 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
           "py-[var(--spacing-system-s)] pl-[var(--spacing-system-mf)] pr-[var(--spacing-system-xs)] text-h4"
         ),
         children: [
-          /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx10(
             SquareAvatar,
             {
               variant: "round",
@@ -917,7 +1523,7 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
               className: "shrink-0"
             }
           ),
-          /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 truncate", children: viewerLabel(viewer) })
+          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1 truncate", children: viewerLabel(viewer) })
         ]
       },
       viewer.id
@@ -926,8 +1532,8 @@ function RemoteSessionViewers({ viewers, max = 4, className }) {
 }
 
 // src/components/features/remote-session/remote-session-parts.tsx
-import { useEffect, useState as useState2 } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var DESKTOP_SCALE = {
   "--spacing-system-xs": "0.5rem",
   "--spacing-system-s": "0.75rem",
@@ -948,11 +1554,11 @@ var DESKTOP_SCALE = {
   "--font-line-space-h6-caption": "1.25rem"
 };
 function RemoteSessionScope({ children, className }) {
-  return /* @__PURE__ */ jsx9("div", { "data-app-type": "openframe", style: DESKTOP_SCALE, className, children });
+  return /* @__PURE__ */ jsx11("div", { "data-app-type": "openframe", style: DESKTOP_SCALE, className, children });
 }
 function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
   if (logoUrl) {
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx11(
       SquareAvatar,
       {
         variant: "square",
@@ -965,7 +1571,7 @@ function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "div",
     {
       role: "img",
@@ -975,12 +1581,12 @@ function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
         "flex shrink-0 items-center justify-center rounded-md border border-ods-border bg-ods-card",
         className
       ),
-      children: /* @__PURE__ */ jsx9(OpenFrameLogo, { className: "size-1/2" })
+      children: /* @__PURE__ */ jsx11(OpenFrameLogo, { className: "size-1/2" })
     }
   );
 }
 function RemoteSessionRecordingTag({ className }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: cn(
@@ -988,8 +1594,8 @@ function RemoteSessionRecordingTag({ className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9(RecordingIcon, { size: 16, color: "currentColor", className: "text-ods-success" }),
-        /* @__PURE__ */ jsx9("span", { className: "text-ods-success text-h5", children: "Session Recording" })
+        /* @__PURE__ */ jsx11(RecordingIcon, { size: 16, color: "currentColor", className: "text-ods-success" }),
+        /* @__PURE__ */ jsx11("span", { className: "text-ods-success text-h5", children: "Session Recording" })
       ]
     }
   );
@@ -1000,15 +1606,15 @@ function RemoteSessionStatusRow({
 }) {
   const hasViewers = !!viewers && viewers.length > 0;
   if (!showRecordingTag && !hasViewers) return null;
-  if (!hasViewers) return /* @__PURE__ */ jsx9(RemoteSessionRecordingTag, {});
-  return /* @__PURE__ */ jsxs7("div", { className: "flex w-full items-center gap-[var(--spacing-system-m)]", children: [
-    showRecordingTag && /* @__PURE__ */ jsx9(RemoteSessionRecordingTag, { className: "flex-1 justify-center self-auto" }),
-    /* @__PURE__ */ jsx9(RemoteSessionViewers, { viewers, className: "ml-auto" })
+  if (!hasViewers) return /* @__PURE__ */ jsx11(RemoteSessionRecordingTag, {});
+  return /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-center gap-[var(--spacing-system-m)]", children: [
+    showRecordingTag && /* @__PURE__ */ jsx11(RemoteSessionRecordingTag, { className: "flex-1 justify-center self-auto" }),
+    /* @__PURE__ */ jsx11(RemoteSessionViewers, { viewers, className: "ml-auto" })
   ] });
 }
 var REMOTE_SESSION_DRAG_HANDLE_CLASS = "cursor-grab active:cursor-grabbing";
 function RemoteSessionDragger({ dragHandlers }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       "aria-hidden": true,
@@ -1017,7 +1623,7 @@ function RemoteSessionDragger({ dragHandlers }) {
         dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
       ),
       ...dragHandlers,
-      children: /* @__PURE__ */ jsx9(DraggerIcon, { size: 24, color: "currentColor" })
+      children: /* @__PURE__ */ jsx11(DraggerIcon, { size: 24, color: "currentColor" })
     }
   );
 }
@@ -1029,8 +1635,8 @@ function formatRemoteSessionElapsed(elapsedMs) {
   return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
 }
 function useRemoteSessionTimer(startedAt) {
-  const [nowMs, setNowMs] = useState2(() => Date.now());
-  useEffect(() => {
+  const [nowMs, setNowMs] = useState3(() => Date.now());
+  useEffect2(() => {
     const timer = setInterval(() => setNowMs(Date.now()), 1e3);
     return () => clearInterval(timer);
   }, []);
@@ -1038,7 +1644,7 @@ function useRemoteSessionTimer(startedAt) {
 }
 
 // src/components/features/remote-session/remote-access-request-card.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function displaySiteUrl(url) {
   return url.replace(/^https?:\/\//, "").replace(/\/$/, "");
 }
@@ -1053,30 +1659,30 @@ function RemoteAccessRequestCard({
   const { organizationName } = party;
   const siteUrl = party.organizationSiteUrl ?? void 0;
   const openableSite = siteUrl?.startsWith("https://") ? siteUrl : void 0;
-  return /* @__PURE__ */ jsxs8("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__ */ jsx10("h1", { className: "w-full text-ods-text-primary text-h2", children: "Your IT support team is requesting remote access" }),
-    /* @__PURE__ */ jsxs8("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__ */ jsx10(RemoteSessionOrgLogo, { name: organizationName, logoUrl: party.organizationLogoUrl, sizePx: 64 }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx10("p", { className: "w-full truncate text-ods-text-primary text-h3", children: organizationName }),
-        siteUrl && /* @__PURE__ */ jsx10("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: displaySiteUrl(siteUrl) })
+  return /* @__PURE__ */ jsxs10("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__ */ jsx12("h1", { className: "w-full text-ods-text-primary text-h2", children: "Your IT support team is requesting remote access" }),
+    /* @__PURE__ */ jsxs10("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__ */ jsx12(RemoteSessionOrgLogo, { name: organizationName, logoUrl: party.organizationLogoUrl, sizePx: 64 }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx12("p", { className: "w-full truncate text-ods-text-primary text-h3", children: organizationName }),
+        siteUrl && /* @__PURE__ */ jsx12("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: displaySiteUrl(siteUrl) })
       ] }),
-      openableSite && onOpenSite && /* @__PURE__ */ jsx10(Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ jsx10(ExternalLinkIcon, { size: 24, color: "currentColor" }) })
+      openableSite && onOpenSite && /* @__PURE__ */ jsx12(Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ jsx12(ExternalLinkIcon, { size: 24, color: "currentColor" }) })
     ] }),
-    /* @__PURE__ */ jsxs8("p", { className: "w-full text-ods-text-primary text-h4", children: [
+    /* @__PURE__ */ jsxs10("p", { className: "w-full text-ods-text-primary text-h4", children: [
       "A technician from ",
-      /* @__PURE__ */ jsx10("span", { className: "text-ods-accent", children: organizationName }),
+      /* @__PURE__ */ jsx12("span", { className: "text-ods-accent", children: organizationName }),
       " will be able to view your screen and control your mouse and keyboard during this session."
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-      showRecordingNotice && /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-s)]", children: [
-        /* @__PURE__ */ jsx10(InfoCircleIcon, { size: 24, color: "currentColor", className: "shrink-0 text-ods-accent" }),
-        /* @__PURE__ */ jsx10("p", { className: "min-w-0 flex-1 text-ods-text-primary text-h6", children: "This session will be recorded and available upon request." })
+    /* @__PURE__ */ jsxs10("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      showRecordingNotice && /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)] rounded-md border border-ods-border bg-ods-bg p-[var(--spacing-system-s)]", children: [
+        /* @__PURE__ */ jsx12(InfoCircleIcon, { size: 24, color: "currentColor", className: "shrink-0 text-ods-accent" }),
+        /* @__PURE__ */ jsx12("p", { className: "min-w-0 flex-1 text-ods-text-primary text-h6", children: "This session will be recorded and available upon request." })
       ] }),
-      error ? /* @__PURE__ */ jsx10("p", { className: "w-full text-ods-text-primary text-h6", children: error }) : /* @__PURE__ */ jsx10("p", { className: "w-full text-ods-text-secondary text-h6", children: "You can end the session at any time." })
+      error ? /* @__PURE__ */ jsx12("p", { className: "w-full text-ods-text-primary text-h6", children: error }) : /* @__PURE__ */ jsx12("p", { className: "w-full text-ods-text-secondary text-h6", children: "You can end the session at any time." })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
-      /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
+      /* @__PURE__ */ jsx12(
         Button,
         {
           variant: "outline",
@@ -1087,7 +1693,7 @@ function RemoteAccessRequestCard({
           children: "Decline"
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12(
         Button,
         {
           variant: "accent",
@@ -1103,11 +1709,11 @@ function RemoteAccessRequestCard({
 }
 
 // src/components/features/remote-session/remote-session-block.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var RemoteSessionBlockFrame = forwardRef2(
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var RemoteSessionBlockFrame = forwardRef4(
   ({ children, expanded = false, onHide, className }, ref) => {
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         ref,
@@ -1118,16 +1724,16 @@ var RemoteSessionBlockFrame = forwardRef2(
         ),
         children: [
           children,
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs11(
             "button",
             {
               type: "button",
               className: "flex h-12 w-full shrink-0 items-center gap-[var(--spacing-system-xs)] border-t border-ods-border bg-ods-card px-[var(--spacing-system-m)]",
               onClick: onHide,
               children: [
-                /* @__PURE__ */ jsx11(Chevrons03RightIcon, { size: 24 }),
-                /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4", children: "Hide this Block" }),
-                /* @__PURE__ */ jsx11(OpenFrameLogo, { className: "size-6 shrink-0" })
+                /* @__PURE__ */ jsx13(Chevrons03RightIcon, { size: 24 }),
+                /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4", children: "Hide this Block" }),
+                /* @__PURE__ */ jsx13(OpenFrameLogo, { className: "size-6 shrink-0" })
               ]
             }
           )
@@ -1138,12 +1744,12 @@ var RemoteSessionBlockFrame = forwardRef2(
 );
 RemoteSessionBlockFrame.displayName = "RemoteSessionBlockFrame";
 function RemoteSessionEndButton({ onEndSession }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     Button,
     {
       variant: "outline",
       fullWidth: true,
-      leftIcon: /* @__PURE__ */ jsx11(MonitorOffIcon, { size: 24, color: "currentColor", className: "text-ods-error" }),
+      leftIcon: /* @__PURE__ */ jsx13(MonitorOffIcon, { size: 24, color: "currentColor", className: "text-ods-error" }),
       onClick: onEndSession,
       children: "End Session"
     }
@@ -1159,9 +1765,9 @@ function RemoteSessionSummary({
   dragHandlers
 }) {
   const technician = party.technicianName;
-  return /* @__PURE__ */ jsxs9("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ jsx11(RemoteSessionDragger, { dragHandlers }),
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsx13(RemoteSessionDragger, { dragHandlers }),
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
@@ -1170,7 +1776,7 @@ function RemoteSessionSummary({
         ),
         ...dragHandlers,
         children: [
-          technician ? /* @__PURE__ */ jsx11(
+          technician ? /* @__PURE__ */ jsx13(
             SquareAvatar,
             {
               variant: "round",
@@ -1178,42 +1784,42 @@ function RemoteSessionSummary({
               src: party.technicianAvatarUrl ?? void 0,
               fallback: technician
             }
-          ) : /* @__PURE__ */ jsx11(RemoteSessionOrgLogo, { name: party.organizationName, logoUrl: party.organizationLogoUrl, sizePx: 48 }),
-          /* @__PURE__ */ jsxs9("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsxs9("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
+          ) : /* @__PURE__ */ jsx13(RemoteSessionOrgLogo, { name: party.organizationName, logoUrl: party.organizationLogoUrl, sizePx: 48 }),
+          /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs11("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
               technician ? `${technician} connected` : "IT support team is connected",
               " ",
-              /* @__PURE__ */ jsxs9("span", { className: "text-ods-text-secondary", children: [
+              /* @__PURE__ */ jsxs11("span", { className: "text-ods-text-secondary", children: [
                 "(",
                 elapsed,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ jsx11("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: party.organizationName })
+            /* @__PURE__ */ jsx13("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: party.organizationName })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsx11(RemoteSessionStatusRow, { showRecordingTag, viewers }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
-      /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx13(RemoteSessionStatusRow, { showRecordingTag, viewers }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx13(
         Button,
         {
           variant: "outline",
           fullWidth: true,
-          leftIcon: /* @__PURE__ */ jsx11(ChatsIcon, { size: 24, color: "currentColor" }),
+          leftIcon: /* @__PURE__ */ jsx13(ChatsIcon, { size: 24, color: "currentColor" }),
           onClick: onOpenChat,
           children: "Open Chat"
         }
       ),
-      /* @__PURE__ */ jsx11(RemoteSessionEndButton, { onEndSession })
+      /* @__PURE__ */ jsx13(RemoteSessionEndButton, { onEndSession })
     ] })
   ] });
 }
-var RemoteSessionMinimizedChip = forwardRef2(
+var RemoteSessionMinimizedChip = forwardRef4(
   ({ party, onExpand, dragHandlers }, ref) => {
     const technician = party.technicianName;
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs11(
       "button",
       {
         ref,
@@ -1226,7 +1832,7 @@ var RemoteSessionMinimizedChip = forwardRef2(
         onClick: onExpand,
         ...dragHandlers,
         children: [
-          technician ? /* @__PURE__ */ jsx11(
+          technician ? /* @__PURE__ */ jsx13(
             SquareAvatar,
             {
               sizePx: 48,
@@ -1234,7 +1840,7 @@ var RemoteSessionMinimizedChip = forwardRef2(
               fallback: technician,
               className: "rounded-none"
             }
-          ) : /* @__PURE__ */ jsx11(
+          ) : /* @__PURE__ */ jsx13(
             RemoteSessionOrgLogo,
             {
               name: party.organizationName,
@@ -1243,7 +1849,7 @@ var RemoteSessionMinimizedChip = forwardRef2(
               className: "rounded-none border-0"
             }
           ),
-          /* @__PURE__ */ jsx11("span", { className: "flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx11(Chevrons03LeftIcon, { size: 24 }) })
+          /* @__PURE__ */ jsx13("span", { className: "flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card", children: /* @__PURE__ */ jsx13(Chevrons03LeftIcon, { size: 24 }) })
         ]
       }
     );
@@ -1252,8 +1858,8 @@ var RemoteSessionMinimizedChip = forwardRef2(
 RemoteSessionMinimizedChip.displayName = "RemoteSessionMinimizedChip";
 
 // src/components/features/remote-session/remote-session-chat-panel.tsx
-import { useEffect as useEffect2, useRef } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function formatTime2(at) {
   return at.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
 }
@@ -1272,8 +1878,8 @@ function RemoteSessionChatPanel({
   onEndSession,
   dragHandlers
 }) {
-  const listRef = useRef(null);
-  useEffect2(() => {
+  const listRef = useRef2(null);
+  useEffect3(() => {
     const list = listRef.current;
     if (list) list.scrollTop = list.scrollHeight;
   }, [messages]);
@@ -1283,10 +1889,10 @@ function RemoteSessionChatPanel({
     onSend(text);
     onDraftChange("");
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
-      /* @__PURE__ */ jsx12(RemoteSessionDragger, { dragHandlers }),
-      /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx14(RemoteSessionDragger, { dragHandlers }),
+      /* @__PURE__ */ jsxs12(
         "div",
         {
           className: cn(
@@ -1295,45 +1901,45 @@ function RemoteSessionChatPanel({
           ),
           ...dragHandlers,
           children: [
-            /* @__PURE__ */ jsxs10("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
+            /* @__PURE__ */ jsxs12("p", { className: "w-full truncate text-ods-text-primary text-h4", children: [
               "Your IT support team is connected ",
-              /* @__PURE__ */ jsxs10("span", { className: "text-ods-text-secondary", children: [
+              /* @__PURE__ */ jsxs12("span", { className: "text-ods-text-secondary", children: [
                 "(",
                 elapsed,
                 ")"
               ] })
             ] }),
-            /* @__PURE__ */ jsx12("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: "You can end this session at any time" })
+            /* @__PURE__ */ jsx14("p", { className: "w-full truncate text-ods-text-secondary text-h4", children: "You can end this session at any time" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx12(RemoteSessionStatusRow, { showRecordingTag, viewers }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
-        /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(RemoteSessionStatusRow, { showRecordingTag, viewers }),
+      /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
+        /* @__PURE__ */ jsx14(
           Button,
           {
             variant: "outline",
             fullWidth: true,
-            leftIcon: /* @__PURE__ */ jsx12(MessageOffIcon, { size: 24, color: "currentColor" }),
+            leftIcon: /* @__PURE__ */ jsx14(MessageOffIcon, { size: 24, color: "currentColor" }),
             onClick: onCloseChat,
             children: "Close Chat"
           }
         ),
-        /* @__PURE__ */ jsx12(RemoteSessionEndButton, { onEndSession })
+        /* @__PURE__ */ jsx14(RemoteSessionEndButton, { onEndSession })
       ] })
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       "div",
       {
         ref: listRef,
         className: "flex min-h-0 flex-1 flex-col overflow-y-auto bg-ods-card p-[var(--spacing-system-m)]",
-        children: /* @__PURE__ */ jsx12("div", { className: "mt-auto flex flex-col gap-[var(--spacing-system-s)]", children: messages.map(
-          (message) => message.author === "system" ? /* @__PURE__ */ jsx12("p", { className: "w-full text-center text-ods-text-secondary text-h6", children: message.text }, message.id) : /* @__PURE__ */ jsx12(RemoteSessionChatMessageRow, { message, party }, message.id)
+        children: /* @__PURE__ */ jsx14("div", { className: "mt-auto flex flex-col gap-[var(--spacing-system-s)]", children: messages.map(
+          (message) => message.author === "system" ? /* @__PURE__ */ jsx14("p", { className: "w-full text-center text-ods-text-secondary text-h6", children: message.text }, message.id) : /* @__PURE__ */ jsx14(RemoteSessionChatMessageRow, { message, party }, message.id)
         ) })
       }
     ),
-    error && /* @__PURE__ */ jsx12("p", { className: "bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6", children: error }),
-    /* @__PURE__ */ jsxs10(
+    error && /* @__PURE__ */ jsx14("p", { className: "bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6", children: error }),
+    /* @__PURE__ */ jsxs12(
       "form",
       {
         className: "flex items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]",
@@ -1342,7 +1948,7 @@ function RemoteSessionChatPanel({
           handleSend();
         },
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx14(
             "input",
             {
               value: draft,
@@ -1353,14 +1959,14 @@ function RemoteSessionChatPanel({
               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"
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx14(
             "button",
             {
               type: "submit",
               "aria-label": "Send message",
               disabled: !ready,
               className: "flex size-12 shrink-0 items-center justify-center",
-              children: /* @__PURE__ */ jsx12(Send03Icon, { size: 24, color: "currentColor", className: "text-ods-text-primary" })
+              children: /* @__PURE__ */ jsx14(Send03Icon, { size: 24, color: "currentColor", className: "text-ods-text-primary" })
             }
           )
         ]
@@ -1374,9 +1980,9 @@ function RemoteSessionChatMessageRow({
 }) {
   const isTechnician = message.author === "technician";
   const technician = message.name ?? party.technicianName ?? "Technician";
-  return /* @__PURE__ */ jsxs10("div", { className: "flex w-full flex-col", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)]", children: [
-      isTechnician && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs12("div", { className: "flex w-full flex-col", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-[var(--spacing-system-xs)]", children: [
+      isTechnician && /* @__PURE__ */ jsx14(
         SquareAvatar,
         {
           variant: "round",
@@ -1385,7 +1991,7 @@ function RemoteSessionChatMessageRow({
           fallback: technician
         }
       ),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         "span",
         {
           className: cn(
@@ -1395,14 +2001,14 @@ function RemoteSessionChatMessageRow({
           children: isTechnician ? technician : "User"
         }
       ),
-      /* @__PURE__ */ jsx12("span", { className: "shrink-0 text-ods-text-secondary text-h6", children: formatTime2(message.at) })
+      /* @__PURE__ */ jsx14("span", { className: "shrink-0 text-ods-text-secondary text-h6", children: formatTime2(message.at) })
     ] }),
-    /* @__PURE__ */ jsx12("p", { className: "w-full break-words text-ods-text-primary text-h6", children: message.text })
+    /* @__PURE__ */ jsx14("p", { className: "w-full break-words text-ods-text-primary text-h6", children: message.text })
   ] });
 }
 
 // src/components/features/remote-session/remote-desktop-chat-message-row.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function RemoteDesktopChatMessageRow({
   authorName,
   isTechnician,
@@ -1410,10 +2016,10 @@ function RemoteDesktopChatMessageRow({
   sentAt,
   body
 }) {
-  return /* @__PURE__ */ jsxs11("div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xxs)]", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-[var(--spacing-system-xxs)]", children: [
-      isTechnician && /* @__PURE__ */ jsx13(SquareAvatar, { variant: "round", sizePx: 24, src: avatarUrl, alt: authorName, className: "shrink-0" }),
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xxs)]", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-[var(--spacing-system-xxs)]", children: [
+      isTechnician && /* @__PURE__ */ jsx15(SquareAvatar, { variant: "round", sizePx: 24, src: avatarUrl, alt: authorName, className: "shrink-0" }),
+      /* @__PURE__ */ jsx15(
         "span",
         {
           className: cn(
@@ -1423,15 +2029,15 @@ function RemoteDesktopChatMessageRow({
           children: authorName
         }
       ),
-      /* @__PURE__ */ jsx13("span", { suppressHydrationWarning: true, className: "shrink-0 text-ods-text-secondary text-h6", children: formatTime(sentAt) })
+      /* @__PURE__ */ jsx15("span", { suppressHydrationWarning: true, className: "shrink-0 text-ods-text-secondary text-h6", children: formatTime(sentAt) })
     ] }),
-    /* @__PURE__ */ jsx13("p", { className: "whitespace-pre-wrap text-ods-text-primary text-h4", children: body })
+    /* @__PURE__ */ jsx15("p", { className: "whitespace-pre-wrap text-ods-text-primary text-h4", children: body })
   ] });
 }
 
 // src/components/features/remote-session/remote-desktop-chat-panel.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 var REMOTE_DESKTOP_CHAT_END_USER_NAME = "User";
 function RemoteDesktopChatPanel({
   messages,
@@ -1441,13 +2047,13 @@ function RemoteDesktopChatPanel({
   onSend,
   variant
 }) {
-  const scrollRef = useRef2(null);
+  const scrollRef = useRef3(null);
   const rows = messages.filter((message) => message.author !== "system");
-  useEffect3(() => {
+  useEffect4(() => {
     const el = scrollRef.current;
     if (el) el.scrollTop = el.scrollHeight;
   }, [rows.length]);
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "aside",
     {
       "aria-label": "Session chat",
@@ -1456,7 +2062,7 @@ function RemoteDesktopChatPanel({
         variant === "side" ? "h-full w-[400px] flex-shrink-0" : "absolute bottom-[var(--spacing-system-mf)] right-[var(--spacing-system-mf)] top-[calc(var(--spacing-system-xlf)+var(--spacing-system-mf))] z-10 w-[360px] shadow-lg"
       ),
       children: [
-        /* @__PURE__ */ jsx14("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx14("div", { className: "flex min-h-full flex-col justify-end gap-[var(--spacing-system-xsf)]", children: rows.length === 0 ? /* @__PURE__ */ jsx14("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__ */ jsx14(
+        /* @__PURE__ */ jsx16("div", { ref: scrollRef, className: "min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx16("div", { className: "flex min-h-full flex-col justify-end gap-[var(--spacing-system-xsf)]", children: rows.length === 0 ? /* @__PURE__ */ jsx16("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__ */ jsx16(
           RemoteDesktopChatMessageRow,
           {
             authorName: message.name || (message.author === "technician" ? technician.name : REMOTE_DESKTOP_CHAT_END_USER_NAME),
@@ -1467,7 +2073,7 @@ function RemoteDesktopChatPanel({
           },
           message.id
         )) }) }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx16(
           ChatInput,
           {
             placeholder: "Enter your Message...",
@@ -1484,7 +2090,7 @@ function RemoteDesktopChatPanel({
 }
 
 // src/components/features/remote-session/remote-desktop-fullscreen-toolbar.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function RemoteDesktopFullscreenToolbar({
   deviceName,
   displayMenuGroups,
@@ -1495,79 +2101,79 @@ function RemoteDesktopFullscreenToolbar({
   chatOpen = false,
   onToggleChat
 }) {
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    /* @__PURE__ */ jsx15(OpenFrameLogo, { className: "absolute left-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10 h-6 w-6 opacity-50" }),
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(Fragment4, { children: [
+    /* @__PURE__ */ jsx17(OpenFrameLogo, { className: "absolute left-[var(--spacing-system-mf)] top-[var(--spacing-system-mf)] z-10 h-6 w-6 opacity-50" }),
+    /* @__PURE__ */ jsxs15(
       "div",
       {
         className: "absolute left-1/2 top-0 z-10 w-[calc(100%-7rem)] -translate-x-1/2 flex items-center gap-[var(--spacing-system-xs)] rounded-b-[6px] border-x border-b border-ods-border bg-ods-overlay py-[var(--spacing-system-xsf)] pl-[var(--spacing-system-mf)] pr-[var(--spacing-system-xsf)]",
         children: [
-          /* @__PURE__ */ jsxs13("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
-            /* @__PURE__ */ jsx15("span", { className: "truncate text-ods-text-primary text-h6", children: deviceName }),
-            displayMenuGroups.length > 0 && /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsxs15("div", { className: "flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]", children: [
+            /* @__PURE__ */ jsx17("span", { className: "truncate text-ods-text-primary text-h6", children: deviceName }),
+            displayMenuGroups.length > 0 && /* @__PURE__ */ jsx17(
               ActionsMenuDropdown,
               {
                 groups: displayMenuGroups,
-                customTrigger: /* @__PURE__ */ jsxs13(
+                customTrigger: /* @__PURE__ */ jsxs15(
                   "button",
                   {
                     type: "button",
                     "aria-label": "Switch display",
                     className: "flex h-8 flex-shrink-0 items-center gap-[var(--spacing-system-xs)] rounded-[6px] border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)] text-ods-text-primary hover:border-ods-border-hover",
                     children: [
-                      /* @__PURE__ */ jsx15(MonitorIcon, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ jsx15("span", { className: "whitespace-nowrap text-h5", children: currentDisplayLabel }),
-                      /* @__PURE__ */ jsx15(Chevron02DownIcon, { className: "h-4 w-4" })
+                      /* @__PURE__ */ jsx17(MonitorIcon, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx17("span", { className: "whitespace-nowrap text-h5", children: currentDisplayLabel }),
+                      /* @__PURE__ */ jsx17(Chevron02DownIcon, { className: "h-4 w-4" })
                     ]
                   }
                 )
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs13("div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
-            onToggleChat && /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsxs15("div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
+            onToggleChat && /* @__PURE__ */ jsx17(
               Button,
               {
                 variant: "outline",
                 size: "small",
                 onClick: onToggleChat,
-                leftIcon: chatOpen ? /* @__PURE__ */ jsx15(ChatOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx15(ChatTextIcon, { className: "h-4 w-4" }),
-                children: /* @__PURE__ */ jsx15("span", { className: "text-h5", children: chatOpen ? "Close Chat" : "Open Chat" })
+                leftIcon: chatOpen ? /* @__PURE__ */ jsx17(ChatOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx17(ChatTextIcon, { className: "h-4 w-4" }),
+                children: /* @__PURE__ */ jsx17("span", { className: "text-h5", children: chatOpen ? "Close Chat" : "Open Chat" })
               }
             ),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17(
               ActionsMenuDropdown,
               {
                 groups: actionsMenuGroups,
-                customTrigger: /* @__PURE__ */ jsx15(
+                customTrigger: /* @__PURE__ */ jsx17(
                   Button,
                   {
                     variant: "outline",
                     size: "icon-sm",
                     "aria-label": "Actions",
-                    leftIcon: /* @__PURE__ */ jsx15(Ellipsis01Icon, { className: "h-4 w-4" })
+                    leftIcon: /* @__PURE__ */ jsx17(Ellipsis01Icon, { className: "h-4 w-4" })
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17(
               Button,
               {
                 variant: "outline",
                 size: "icon-sm",
                 "aria-label": "Exit fullscreen",
                 onClick: onExitFullscreen,
-                leftIcon: /* @__PURE__ */ jsx15(Collapse02Icon, { className: "h-4 w-4" })
+                leftIcon: /* @__PURE__ */ jsx17(Collapse02Icon, { className: "h-4 w-4" })
               }
             ),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17(
               Button,
               {
                 variant: "outline",
                 size: "icon-sm",
                 "aria-label": "Settings",
                 onClick: onOpenSettings,
-                leftIcon: /* @__PURE__ */ jsx15(Settings01Icon, { className: "h-4 w-4" })
+                leftIcon: /* @__PURE__ */ jsx17(Settings01Icon, { className: "h-4 w-4" })
               }
             )
           ] })
@@ -1578,9 +2184,10 @@ function RemoteDesktopFullscreenToolbar({
 }
 
 // src/components/features/remote-session/remote-desktop-view.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
 var PAGE_CLASS = "h-full overflow-hidden px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]";
-var CONTROLS_BAR_CLASS = "flex flex-shrink-0 items-center justify-between gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card px-[var(--spacing-system-mf)] py-[var(--spacing-system-xs)]";
+var CONTROLS_BAR_CLASS = "flex flex-shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-card";
+var CONTROLS_ROW_CLASS = "flex items-center justify-between gap-[var(--spacing-system-mf)] px-[var(--spacing-system-mf)] py-[var(--spacing-system-xs)]";
 function RemoteDesktopView({
   deviceName,
   organizationName,
@@ -1598,70 +2205,85 @@ function RemoteDesktopView({
   chat,
   children
 }) {
-  const controlsBar = /* @__PURE__ */ jsxs14("div", { className: CONTROLS_BAR_CLASS, children: [
-    /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-mf)]", children: [
-      /* @__PURE__ */ jsx16("div", { className: "flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ jsx16(MonitorIcon, { className: "h-4 w-4 text-ods-text-primary" }) }),
-      /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col", children: [
-        /* @__PURE__ */ jsx16(TruncateText, { children: deviceName }),
-        /* @__PURE__ */ jsx16(
-          TruncateText,
+  const controlsBar = /* @__PURE__ */ jsxs16("div", { className: CONTROLS_BAR_CLASS, children: [
+    /* @__PURE__ */ jsxs16("div", { className: CONTROLS_ROW_CLASS, children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-mf)]", children: [
+        /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-xsf)]", children: /* @__PURE__ */ jsx18(MonitorIcon, { className: "h-4 w-4 text-ods-text-primary" }) }),
+        /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsx18(TruncateText, { children: deviceName }),
+          /* @__PURE__ */ jsx18(
+            TruncateText,
+            {
+              variant: "h6",
+              tone: "secondary",
+              children: `Desktop \u2022 ${organizationName || "Unknown Customer"}`
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs16("div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
+        onToggleChat && /* @__PURE__ */ jsx18(
+          Button,
           {
-            variant: "h6",
-            tone: "secondary",
-            children: `Desktop \u2022 ${organizationName || "Unknown Customer"}`
+            variant: "outline",
+            onClick: onToggleChat,
+            leftIcon: chatOpen ? /* @__PURE__ */ jsx18(ChatOffIcon, { className: "h-4 w-4 md:h-6 md:w-6" }) : /* @__PURE__ */ jsx18(ChatTextIcon, { className: "h-4 w-4 md:h-6 md:w-6" }),
+            children: /* @__PURE__ */ jsx18("span", { className: "sr-only content-md:not-sr-only", children: chatOpen ? "Close Chat" : "Open Chat" })
+          }
+        ),
+        /* @__PURE__ */ jsx18(ActionsMenuDropdown, { groups: actionsMenuGroups, triggerAriaLabel: "Actions" }),
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            "aria-label": "Settings",
+            onClick: onOpenSettings,
+            leftIcon: /* @__PURE__ */ jsx18(Settings01Icon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx18(
+          Button,
+          {
+            variant: "outline",
+            size: "icon",
+            "aria-label": fullscreen ? "Exit fullscreen" : "Enter fullscreen",
+            onClick: fullscreen ? onExitFullscreen : onEnterFullscreen,
+            leftIcon: fullscreen ? /* @__PURE__ */ jsx18(Collapse02Icon, {}) : /* @__PURE__ */ jsx18(Expand02Icon, {})
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
-      displayMenuGroups.length > 0 && /* @__PURE__ */ jsx16(
-        ActionsMenuDropdown,
-        {
-          groups: displayMenuGroups,
-          customTrigger: /* @__PURE__ */ jsx16(Button, { variant: "outline", leftIcon: /* @__PURE__ */ jsx16(MonitorIcon, { className: "h-4 w-4 md:h-6 md:w-6" }), children: /* @__PURE__ */ jsx16("span", { className: "sr-only content-md:not-sr-only", children: currentDisplayLabel }) })
-        }
-      ),
-      onToggleChat && /* @__PURE__ */ jsx16(
-        Button,
-        {
-          variant: "outline",
-          onClick: onToggleChat,
-          leftIcon: chatOpen ? /* @__PURE__ */ jsx16(ChatOffIcon, { className: "h-4 w-4 md:h-6 md:w-6" }) : /* @__PURE__ */ jsx16(ChatTextIcon, { className: "h-4 w-4 md:h-6 md:w-6" }),
-          children: /* @__PURE__ */ jsx16("span", { className: "sr-only content-md:not-sr-only", children: chatOpen ? "Close Chat" : "Open Chat" })
-        }
-      ),
-      /* @__PURE__ */ jsx16(ActionsMenuDropdown, { groups: actionsMenuGroups, triggerAriaLabel: "Actions" }),
-      /* @__PURE__ */ jsx16(
-        Button,
-        {
-          variant: "outline",
-          size: "icon",
-          "aria-label": "Settings",
-          onClick: onOpenSettings,
-          leftIcon: /* @__PURE__ */ jsx16(Settings01Icon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx16(
-        Button,
-        {
-          variant: "outline",
-          size: "icon",
-          "aria-label": fullscreen ? "Exit fullscreen" : "Enter fullscreen",
-          onClick: fullscreen ? onExitFullscreen : onEnterFullscreen,
-          leftIcon: fullscreen ? /* @__PURE__ */ jsx16(Collapse02Icon, {}) : /* @__PURE__ */ jsx16(Expand02Icon, {})
-        }
-      )
-    ] })
+    displayMenuGroups.length > 0 && /* @__PURE__ */ jsx18(
+      ActionsMenuDropdown,
+      {
+        groups: displayMenuGroups,
+        align: "start",
+        customTrigger: /* @__PURE__ */ jsxs16(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Switch display",
+            className: "flex w-full items-center gap-[var(--spacing-system-xs)] border-t border-ods-border p-[var(--spacing-system-sf)] text-left text-ods-text-primary outline-none transition-colors hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus",
+            children: [
+              /* @__PURE__ */ jsx18(MonitorIcon, { className: "h-6 w-6 shrink-0" }),
+              /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate text-h4", children: currentDisplayLabel }),
+              /* @__PURE__ */ jsx18(Chevron02DownIcon, { className: "h-6 w-6 shrink-0" })
+            ]
+          }
+        )
+      }
+    )
   ] });
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     PageLayout,
     {
       className: PAGE_CLASS,
       backButton: onBack ? { label: "Back", onClick: onBack } : void 0,
       showHeader: !fullscreen,
       children: [
-        /* @__PURE__ */ jsxs14("div", { className: fullscreen ? "fixed inset-0 z-50 flex flex-col bg-black" : "contents", children: [
-          fullscreen ? /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsxs16("div", { className: fullscreen ? "fixed inset-0 z-50 flex flex-col bg-black" : "contents", children: [
+          fullscreen ? /* @__PURE__ */ jsx18(
             RemoteDesktopFullscreenToolbar,
             {
               deviceName,
@@ -1674,8 +2296,8 @@ function RemoteDesktopView({
               onToggleChat
             }
           ) : controlsBar,
-          /* @__PURE__ */ jsxs14("div", { className: `relative flex min-h-0 min-w-0 flex-1 ${fullscreen ? "" : "gap-[var(--spacing-system-mf)]"}`, children: [
-            /* @__PURE__ */ jsx16("div", { className: `relative min-h-0 min-w-0 flex-1 overflow-hidden bg-black ${fullscreen ? "" : "rounded-lg"}`, children: screen }),
+          /* @__PURE__ */ jsxs16("div", { className: `relative flex min-h-0 min-w-0 flex-1 ${fullscreen ? "" : "gap-[var(--spacing-system-mf)]"}`, children: [
+            /* @__PURE__ */ jsx18("div", { className: `relative min-h-0 min-w-0 flex-1 overflow-hidden bg-black ${fullscreen ? "" : "rounded-lg"}`, children: screen }),
             chat
           ] })
         ] }),
@@ -1685,27 +2307,27 @@ function RemoteDesktopView({
   );
 }
 function RemoteDesktopViewSkeleton({ onBack }) {
-  return /* @__PURE__ */ jsxs14(PageLayout, { className: PAGE_CLASS, backButton: onBack ? { label: "Back", onClick: onBack } : void 0, children: [
-    /* @__PURE__ */ jsxs14("div", { className: CONTROLS_BAR_CLASS, children: [
-      /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-mf)]", children: [
-        /* @__PURE__ */ jsx16(Skeleton, { className: "h-9 w-9 flex-shrink-0 rounded-md" }),
-        /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ jsx16(Skeleton, { className: "h-5 w-48" }),
-          /* @__PURE__ */ jsx16(Skeleton, { className: "h-4 w-36" })
+  return /* @__PURE__ */ jsxs16(PageLayout, { className: PAGE_CLASS, backButton: onBack ? { label: "Back", onClick: onBack } : void 0, children: [
+    /* @__PURE__ */ jsx18("div", { className: CONTROLS_BAR_CLASS, children: /* @__PURE__ */ jsxs16("div", { className: CONTROLS_ROW_CLASS, children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-mf)]", children: [
+        /* @__PURE__ */ jsx18(Skeleton, { className: "h-9 w-9 flex-shrink-0 rounded-md" }),
+        /* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+          /* @__PURE__ */ jsx18(Skeleton, { className: "h-5 w-48" }),
+          /* @__PURE__ */ jsx18(Skeleton, { className: "h-4 w-36" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs14("div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx16(Skeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" }),
-        /* @__PURE__ */ jsx16(Skeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" }),
-        /* @__PURE__ */ jsx16(Skeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" })
+      /* @__PURE__ */ jsxs16("div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
+        /* @__PURE__ */ jsx18(Skeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" }),
+        /* @__PURE__ */ jsx18(Skeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" }),
+        /* @__PURE__ */ jsx18(Skeleton, { className: "h-11 w-11 rounded-lg md:h-12 md:w-12" })
       ] })
-    ] }),
-    /* @__PURE__ */ jsx16("div", { className: "min-h-0 min-w-0 flex-1 rounded-lg bg-black" })
+    ] }) }),
+    /* @__PURE__ */ jsx18("div", { className: "min-h-0 min-w-0 flex-1 rounded-lg bg-black" })
   ] });
 }
 
 // src/components/features/remote-session/remote-session-dialog.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
 var NOTICE_COPY = {
   "session-ended": { title: "Remote session ended", suffix: "has disconnected from your device." },
   "connection-lost": { title: "Connection lost", suffix: "lost the connection to your device." }
@@ -1718,57 +2340,57 @@ function RemoteSessionDialog({
   onClose
 }) {
   if (variant === "end-confirm") {
-    return /* @__PURE__ */ jsxs15(DialogCard, { children: [
-      /* @__PURE__ */ jsxs15("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-        /* @__PURE__ */ jsx17("h1", { className: "w-full text-ods-text-primary text-h2", children: "End remote session?" }),
-        /* @__PURE__ */ jsx17("p", { className: "w-full text-ods-text-primary text-h4", children: "The technician will lose access to your device immediately." })
+    return /* @__PURE__ */ jsxs17(DialogCard, { children: [
+      /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+        /* @__PURE__ */ jsx19("h1", { className: "w-full text-ods-text-primary text-h2", children: "End remote session?" }),
+        /* @__PURE__ */ jsx19("p", { className: "w-full text-ods-text-primary text-h4", children: "The technician will lose access to your device immediately." })
       ] }),
-      /* @__PURE__ */ jsxs15("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
-        /* @__PURE__ */ jsx17(Button, { variant: "outline", fullWidth: true, disabled: ending, onClick: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx17(Button, { variant: "destructive", fullWidth: true, loading: ending, onClick: onEndSession, children: "End Session" })
+      /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
+        /* @__PURE__ */ jsx19(Button, { variant: "outline", fullWidth: true, disabled: ending, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx19(Button, { variant: "destructive", fullWidth: true, loading: ending, onClick: onEndSession, children: "End Session" })
       ] })
     ] });
   }
   const copy = NOTICE_COPY[variant];
-  return /* @__PURE__ */ jsxs15(DialogCard, { children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ jsx17("h1", { className: "w-full text-ods-text-primary text-h2", children: copy.title }),
-      /* @__PURE__ */ jsxs15("p", { className: "w-full text-ods-text-primary text-h4", children: [
-        /* @__PURE__ */ jsx17("span", { className: "text-ods-accent", children: organizationName }),
+  return /* @__PURE__ */ jsxs17(DialogCard, { children: [
+    /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      /* @__PURE__ */ jsx19("h1", { className: "w-full text-ods-text-primary text-h2", children: copy.title }),
+      /* @__PURE__ */ jsxs17("p", { className: "w-full text-ods-text-primary text-h4", children: [
+        /* @__PURE__ */ jsx19("span", { className: "text-ods-accent", children: organizationName }),
         " ",
         copy.suffix
       ] })
     ] }),
-    /* @__PURE__ */ jsx17("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ jsx17(Button, { variant: "outline", className: "w-1/2", onClick: onClose, children: "Close" }) })
+    /* @__PURE__ */ jsx19("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ jsx19(Button, { variant: "outline", className: "w-1/2", onClick: onClose, children: "Close" }) })
   ] });
 }
 function DialogCard({ children }) {
-  return /* @__PURE__ */ jsx17("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 });
+  return /* @__PURE__ */ jsx19("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 });
 }
 
 // src/components/features/remote-session/remote-session-overlay.tsx
-import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 function RemoteSessionBorder({ className }) {
-  return /* @__PURE__ */ jsx18("div", { className: cn("pointer-events-none size-full border-4 border-ods-warning", className) });
+  return /* @__PURE__ */ jsx20("div", { className: cn("pointer-events-none size-full border-4 border-ods-warning", className) });
 }
 function RemoteSessionPill({ onEndSession }) {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       type: "button",
       className: "flex items-center gap-[var(--spacing-system-xsf)] rounded-b-md bg-ods-warning px-[var(--spacing-system-m)] py-[var(--spacing-system-xs)] text-ods-text-on-accent",
       onClick: onEndSession,
       children: [
-        /* @__PURE__ */ jsx18(MonitorOffIcon, { size: 24, color: "currentColor" }),
-        /* @__PURE__ */ jsx18("span", { className: "whitespace-nowrap text-h3", children: "End Session" })
+        /* @__PURE__ */ jsx20(MonitorOffIcon, { size: 24, color: "currentColor" }),
+        /* @__PURE__ */ jsx20("span", { className: "whitespace-nowrap text-h3", children: "End Session" })
       ]
     }
   );
 }
 
 // src/components/features/remote-session/remote-session-keep-modals.tsx
-import { useState as useState3 } from "react";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var REMOTE_SESSION_KEEP_REASON_LABELS = {
   CLIENT_DISPUTE: "Client dispute",
   INTERNAL_REVIEW: "Internal review",
@@ -1778,11 +2400,11 @@ var REMOTE_SESSION_KEEP_REASON_LABELS = {
 var KEEP_REASONS = Object.keys(REMOTE_SESSION_KEEP_REASON_LABELS);
 var DESCRIPTION_MAX_LENGTH = 500;
 function KeepNotice({ icon, title, children }) {
-  return /* @__PURE__ */ jsxs17("div", { className: "flex w-full items-start gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ jsx19("span", { className: "flex shrink-0 text-ods-text-secondary", children: icon }),
-    /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx19("p", { className: "text-ods-text-primary text-h3", children: title }),
-      /* @__PURE__ */ jsx19("p", { className: "text-ods-text-secondary text-h4", children })
+  return /* @__PURE__ */ jsxs19("div", { className: "flex w-full items-start gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsx21("span", { className: "flex shrink-0 text-ods-text-secondary", children: icon }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx21("p", { className: "text-ods-text-primary text-h3", children: title }),
+      /* @__PURE__ */ jsx21("p", { className: "text-ods-text-secondary text-h4", children })
     ] })
   ] });
 }
@@ -1793,9 +2415,9 @@ function KeepRecordingModal({
   isPending = false,
   onConfirm
 }) {
-  const [reason, setReason] = useState3("");
-  const [description, setDescription] = useState3("");
-  const [seededOpen, setSeededOpen] = useState3(isOpen);
+  const [reason, setReason] = useState4("");
+  const [description, setDescription] = useState4("");
+  const [seededOpen, setSeededOpen] = useState4(isOpen);
   if (seededOpen !== isOpen) {
     setSeededOpen(isOpen);
     if (isOpen) {
@@ -1809,13 +2431,13 @@ function KeepRecordingModal({
     if (!canKeep || isPending) return;
     onConfirm({ reason, description: reason === "OTHER" ? trimmed : null });
   };
-  return /* @__PURE__ */ jsxs17(Modal, { isOpen, onClose: isPending ? () => {
+  return /* @__PURE__ */ jsxs19(Modal, { isOpen, onClose: isPending ? () => {
   } : onClose, className: "text-left md:max-w-[600px]", children: [
-    /* @__PURE__ */ jsx19(ModalHeader, { children: /* @__PURE__ */ jsx19(ModalTitle, { children: "Keep this recording" }) }),
-    /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsx21(ModalHeader, { children: /* @__PURE__ */ jsx21(ModalTitle, { children: "Keep this recording" }) }),
+    /* @__PURE__ */ jsxs19(
       KeepNotice,
       {
-        icon: /* @__PURE__ */ jsx19(InfoCircleIcon, { size: 24, color: "currentColor" }),
+        icon: /* @__PURE__ */ jsx21(InfoCircleIcon, { size: 24, color: "currentColor" }),
         title: "This recording won't be deleted automatically",
         children: [
           "It stays until you stop keeping it. Kept recordings use ",
@@ -1824,20 +2446,20 @@ function KeepRecordingModal({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-      /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsxs19("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      /* @__PURE__ */ jsxs19(
         Select,
         {
           value: reason,
           onValueChange: (value) => setReason(value),
           disabled: isPending,
           children: [
-            /* @__PURE__ */ jsx19(SelectTrigger, { label: "Reason", labelVariant: "large", children: /* @__PURE__ */ jsx19(SelectValue, { placeholder: "Select Reason" }) }),
-            /* @__PURE__ */ jsx19(SelectContent, { children: KEEP_REASONS.map((value) => /* @__PURE__ */ jsx19(SelectItem, { value, children: REMOTE_SESSION_KEEP_REASON_LABELS[value] }, value)) })
+            /* @__PURE__ */ jsx21(SelectTrigger, { label: "Reason", labelVariant: "large", children: /* @__PURE__ */ jsx21(SelectValue, { placeholder: "Select Reason" }) }),
+            /* @__PURE__ */ jsx21(SelectContent, { children: KEEP_REASONS.map((value) => /* @__PURE__ */ jsx21(SelectItem, { value, children: REMOTE_SESSION_KEEP_REASON_LABELS[value] }, value)) })
           ]
         }
       ),
-      reason === "OTHER" && /* @__PURE__ */ jsx19(
+      reason === "OTHER" && /* @__PURE__ */ jsx21(
         Input,
         {
           "aria-label": "Reason description",
@@ -1849,10 +2471,10 @@ function KeepRecordingModal({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs17(ModalFooter, { children: [
-      /* @__PURE__ */ jsx19(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
-      /* @__PURE__ */ jsx19("div", { className: "hidden flex-1 md:block" }),
-      /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsxs19(ModalFooter, { children: [
+      /* @__PURE__ */ jsx21(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ jsx21("div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ jsx21(
         Button,
         {
           type: "button",
@@ -1873,17 +2495,17 @@ function ReleaseKeepingModal({
   keptBy,
   keptOn,
   reason,
-  ticket,
+  tickets = [],
   expiresOn,
   dueOn,
   isPending = false,
   onConfirm
 }) {
-  return /* @__PURE__ */ jsxs17(Modal, { isOpen, onClose: isPending ? () => {
+  return /* @__PURE__ */ jsxs19(Modal, { isOpen, onClose: isPending ? () => {
   } : onClose, className: "text-left md:max-w-[600px]", children: [
-    /* @__PURE__ */ jsx19(ModalHeader, { children: /* @__PURE__ */ jsx19(ModalTitle, { children: "Release Keeping" }) }),
-    /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h4", children: [
-      /* @__PURE__ */ jsxs17("p", { children: [
+    /* @__PURE__ */ jsx21(ModalHeader, { children: /* @__PURE__ */ jsx21(ModalTitle, { children: "Release Keeping" }) }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h4", children: [
+      /* @__PURE__ */ jsxs19("p", { children: [
         "Kept by ",
         keptBy,
         " on ",
@@ -1892,22 +2514,108 @@ function ReleaseKeepingModal({
         reason,
         "."
       ] }),
-      ticket && /* @__PURE__ */ jsxs17("p", { children: [
+      tickets.length > 0 && /* @__PURE__ */ jsxs19("p", { children: [
         "Ticket: ",
-        ticket
+        tickets.join(", ")
       ] })
     ] }),
-    /* @__PURE__ */ jsx19(KeepNotice, { icon: /* @__PURE__ */ jsx19(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__ */ jsxs17(ModalFooter, { children: [
-      /* @__PURE__ */ jsx19(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
-      /* @__PURE__ */ jsx19("div", { className: "hidden flex-1 md:block" }),
-      /* @__PURE__ */ jsx19(Button, { type: "button", variant: "accent", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Release Keeping" })
+    /* @__PURE__ */ jsx21(KeepNotice, { icon: /* @__PURE__ */ jsx21(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__ */ jsxs19(ModalFooter, { children: [
+      /* @__PURE__ */ jsx21(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ jsx21("div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ jsx21(Button, { type: "button", variant: "accent", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Release Keeping" })
+    ] })
+  ] });
+}
+
+// src/components/features/remote-session/remote-session-ticket-modals.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
+function AssignTicketModal({
+  isOpen,
+  onClose,
+  options,
+  onSearch,
+  loading = false,
+  isPending = false,
+  onConfirm
+}) {
+  const [ticketIds, setTicketIds] = useState5([]);
+  const [titles, setTitles] = useState5({});
+  const [seededOpen, setSeededOpen] = useState5(isOpen);
+  if (seededOpen !== isOpen) {
+    setSeededOpen(isOpen);
+    if (isOpen) {
+      setTicketIds([]);
+      setTitles({});
+    }
+  }
+  const handleChange = (ids) => {
+    setTicketIds(ids);
+    setTitles((prev) => {
+      const next = {};
+      for (const id of ids) next[id] = options.find((option) => option.value === id)?.label ?? prev[id] ?? id;
+      return next;
+    });
+  };
+  const handleAssign = () => {
+    if (ticketIds.length === 0 || isPending) return;
+    onConfirm(ticketIds);
+  };
+  return /* @__PURE__ */ jsxs20(Modal, { isOpen, onClose: isPending ? () => {
+  } : onClose, className: "text-left md:max-w-[600px]", children: [
+    /* @__PURE__ */ jsx22(ModalHeader, { children: /* @__PURE__ */ jsx22(ModalTitle, { children: "Assign Ticket" }) }),
+    /* @__PURE__ */ jsx22(
+      Autocomplete,
+      {
+        multiple: true,
+        wrapTags: true,
+        label: "Tickets",
+        labelVariant: "large",
+        options,
+        value: ticketIds,
+        onChange: handleChange,
+        renderTag: (option) => titles[option.value] ?? option.label,
+        onInputChange: onSearch ? (value, reason) => reason === "input" && onSearch(value) : void 0,
+        disableClientFilter: Boolean(onSearch),
+        loading,
+        noOptionsText: "No tickets found",
+        disabled: isPending
+      }
+    ),
+    /* @__PURE__ */ jsxs20(ModalFooter, { children: [
+      /* @__PURE__ */ jsx22(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ jsx22("div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ jsx22(
+        Button,
+        {
+          type: "button",
+          variant: "accent",
+          onClick: handleAssign,
+          loading: isPending,
+          disabled: ticketIds.length === 0,
+          className: "flex-1",
+          children: "Assign"
+        }
+      )
+    ] })
+  ] });
+}
+function UnassignTicketModal({ isOpen, onClose, isPending = false, onConfirm }) {
+  return /* @__PURE__ */ jsxs20(Modal, { isOpen, onClose: isPending ? () => {
+  } : onClose, className: "text-left md:max-w-[600px]", children: [
+    /* @__PURE__ */ jsx22(ModalHeader, { children: /* @__PURE__ */ jsx22(ModalTitle, { children: "Unassign Ticket" }) }),
+    /* @__PURE__ */ jsx22("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__ */ jsxs20(ModalFooter, { children: [
+      /* @__PURE__ */ jsx22(Button, { type: "button", variant: "outline", onClick: onClose, disabled: isPending, className: "flex-1 md:hidden", children: "Cancel" }),
+      /* @__PURE__ */ jsx22("div", { className: "hidden flex-1 md:block" }),
+      /* @__PURE__ */ jsx22(Button, { type: "button", variant: "destructive", onClick: onConfirm, loading: isPending, className: "flex-1", children: "Unassign" })
     ] })
   ] });
 }
 
 // src/components/features/remote-session/remote-session-events.tsx
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function formatRemoteSessionOffset(offsetMs) {
   const total = Math.max(0, Math.floor(offsetMs / 1e3));
   const hours = Math.floor(total / 3600);
@@ -1916,9 +2624,9 @@ function formatRemoteSessionOffset(offsetMs) {
   return hours > 0 ? `${hours}:${minutes}:${seconds}` : `${minutes}:${seconds}`;
 }
 function RemoteSessionEventList({ events, activeEventId, onSelect, className }) {
-  return /* @__PURE__ */ jsxs18("section", { className: cn("flex w-full flex-col gap-[var(--spacing-system-xxs)]", className), children: [
-    /* @__PURE__ */ jsx20("h2", { className: "text-ods-text-secondary text-h5", children: "Session Events" }),
-    /* @__PURE__ */ jsx20("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__ */ jsx20("li", { children: /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs21("section", { className: cn("flex w-full flex-col gap-[var(--spacing-system-xxs)]", className), children: [
+    /* @__PURE__ */ jsx23("h2", { className: "text-ods-text-secondary text-h5", children: "Session Events" }),
+    /* @__PURE__ */ jsx23("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__ */ jsx23("li", { children: /* @__PURE__ */ jsxs21(
       "button",
       {
         type: "button",
@@ -1930,10 +2638,10 @@ function RemoteSessionEventList({ events, activeEventId, onSelect, className })
           event.id === activeEventId && "bg-ods-border hover:bg-ods-border"
         ),
         children: [
-          /* @__PURE__ */ jsx20("span", { className: "w-[84px] shrink-0 text-ods-text-secondary text-h4", children: formatRemoteSessionOffset(event.offsetMs) }),
-          /* @__PURE__ */ jsxs18("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx20("span", { className: "text-ods-text-primary text-h4", children: event.title }),
-            event.detail && /* @__PURE__ */ jsx20("span", { className: "text-ods-text-secondary text-h6", children: event.detail })
+          /* @__PURE__ */ jsx23("span", { className: "w-[84px] shrink-0 text-ods-text-secondary text-h4", children: formatRemoteSessionOffset(event.offsetMs) }),
+          /* @__PURE__ */ jsxs21("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsx23("span", { className: "text-ods-text-primary text-h4", children: event.title }),
+            event.detail && /* @__PURE__ */ jsx23("span", { className: "text-ods-text-secondary text-h6", children: event.detail })
           ] })
         ]
       }
@@ -1947,10 +2655,10 @@ function RemoteSessionTimelineMarkers({
   className
 }) {
   if (durationMs <= 0) return null;
-  return /* @__PURE__ */ jsx20("div", { className: cn("relative h-4 w-full", className), children: events.map((event) => {
+  return /* @__PURE__ */ jsx23("div", { className: cn("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__ */ jsx20(
+    return /* @__PURE__ */ jsx23(
       "button",
       {
         type: "button",
@@ -1966,9 +2674,9 @@ function RemoteSessionTimelineMarkers({
 }
 
 // src/components/features/remote-session/remote-session-status.tsx
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function LiveDot() {
-  return /* @__PURE__ */ jsx21("span", { "aria-hidden": true, className: "size-2 animate-live-pulse rounded-full bg-current motion-reduce:animate-none" });
+  return /* @__PURE__ */ jsx24("span", { "aria-hidden": true, className: "size-2 animate-live-pulse rounded-full bg-current motion-reduce:animate-none" });
 }
 var STATUS_TAG = {
   live: { label: "Live", variant: "critical" },
@@ -1977,12 +2685,12 @@ var STATUS_TAG = {
 };
 function RemoteSessionStatusTag({ status, className }) {
   const { label, variant } = STATUS_TAG[status];
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     Tag,
     {
       label,
       variant,
-      icon: status === "live" ? /* @__PURE__ */ jsx21(LiveDot, {}) : void 0,
+      icon: status === "live" ? /* @__PURE__ */ jsx24(LiveDot, {}) : void 0,
       className: cn("pointer-events-none shrink-0", className)
     }
   );
@@ -1990,18 +2698,18 @@ function RemoteSessionStatusTag({ status, className }) {
 function RemoteSessionExpiry(props) {
   const { className } = props;
   if (props.state === "none") {
-    return /* @__PURE__ */ jsx21("p", { className: cn("text-ods-text-primary text-h4", className), children: "-" });
+    return /* @__PURE__ */ jsx24("p", { className: cn("text-ods-text-primary text-h4", className), children: "-" });
   }
   if (props.state === "expired") {
-    return /* @__PURE__ */ jsx21("p", { className: cn("text-ods-text-secondary text-h4", className), children: "Expired" });
+    return /* @__PURE__ */ jsx24("p", { className: cn("text-ods-text-secondary text-h4", className), children: "Expired" });
   }
   if (props.state === "kept") {
-    return /* @__PURE__ */ jsxs19("div", { className: cn("flex min-w-0 flex-col", className), children: [
-      /* @__PURE__ */ jsxs19("p", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h4", children: [
-        /* @__PURE__ */ jsx21(LockIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
+    return /* @__PURE__ */ jsxs22("div", { className: cn("flex min-w-0 flex-col", className), children: [
+      /* @__PURE__ */ jsxs22("p", { className: "flex items-center gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h4", children: [
+        /* @__PURE__ */ jsx24(LockIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
         "Kept"
       ] }),
-      /* @__PURE__ */ jsxs19("p", { className: "truncate text-ods-text-secondary text-h6", children: [
+      /* @__PURE__ */ jsxs22("p", { className: "truncate text-ods-text-secondary text-h6", children: [
         "Kept by ",
         props.keptBy,
         " \xB7 ",
@@ -2009,14 +2717,14 @@ function RemoteSessionExpiry(props) {
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs19("div", { className: cn("flex min-w-0 flex-col", className), children: [
-    /* @__PURE__ */ jsx21("p", { className: "text-ods-text-primary text-h4", children: props.date }),
-    props.remaining && /* @__PURE__ */ jsx21("p", { className: "truncate text-ods-text-secondary text-h6", children: props.remaining })
+  return /* @__PURE__ */ jsxs22("div", { className: cn("flex min-w-0 flex-col", className), children: [
+    /* @__PURE__ */ jsx24("p", { className: "text-ods-text-primary text-h4", children: props.date }),
+    props.remaining && /* @__PURE__ */ jsx24("p", { className: "truncate text-ods-text-secondary text-h6", children: props.remaining })
   ] });
 }
 function RemoteSessionStorageAlert({ scope, capacity, className }) {
   const message = scope === "session" ? "This session isn't being recorded. Recording storage is full. New sessions aren't recorded until space is freed." : `Recording storage full. New sessions aren't recorded.${capacity ? ` All ${capacity} of recording storage is used.` : ""}`;
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       role: "alert",
@@ -2025,15 +2733,17 @@ function RemoteSessionStorageAlert({ scope, capacity, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx21(AlertTriangleIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
-        /* @__PURE__ */ jsx21("p", { className: "min-w-0 flex-1 text-h3", children: message })
+        /* @__PURE__ */ jsx24(AlertTriangleIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
+        /* @__PURE__ */ jsx24("p", { className: "min-w-0 flex-1 text-h3", children: message })
       ]
     }
   );
 }
 
 export {
+  HiddenTagsPopup,
   TruncateText,
+  Autocomplete,
   Select,
   SelectGroup,
   SelectValue,
@@ -2078,6 +2788,8 @@ export {
   REMOTE_SESSION_KEEP_REASON_LABELS,
   KeepRecordingModal,
   ReleaseKeepingModal,
+  AssignTicketModal,
+  UnassignTicketModal,
   formatRemoteSessionOffset,
   RemoteSessionEventList,
   RemoteSessionTimelineMarkers,