@flamingo-stack/openframe-frontend-core 0.0.710 → 0.0.712

package/dist/chunk-NPAQSMRY.js

@@ -0,0 +1,2087 @@
+"use client";
+import {
+  ChatInput,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  formatTime
+} from "./chunk-KBJJQFYU.js";
+import {
+  ActionsMenuDropdown,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-P3JMAMHP.js";
+import {
+  FloatingTooltip,
+  SquareAvatar,
+  Tag,
+  personInitials
+} from "./chunk-IYVFSLWJ.js";
+import {
+  next_image_default
+} from "./chunk-FBZMAPWO.js";
+import {
+  useAuthedImageSrc,
+  useIsTruncated
+} from "./chunk-ADBE7QF3.js";
+import {
+  OpenFrameLogo
+} from "./chunk-N45D4ZXQ.js";
+import {
+  AlertTriangleIcon,
+  ChatOffIcon,
+  ChatTextIcon,
+  ChatsIcon,
+  CheckIcon,
+  Chevron02DownIcon,
+  Chevron02LeftIcon,
+  Chevron02UpIcon,
+  Chevrons03LeftIcon,
+  Chevrons03RightIcon,
+  Collapse02Icon,
+  DraggerIcon,
+  Ellipsis01Icon,
+  Expand02Icon,
+  ExternalLinkIcon,
+  HourglassIcon,
+  InfoCircleIcon,
+  LockIcon,
+  MessageOffIcon,
+  MonitorOffIcon,
+  RecordingIcon,
+  Send03Icon,
+  Settings01Icon
+} from "./chunk-NCPTID44.js";
+import {
+  MonitorIcon
+} from "./chunk-OSIKGEBU.js";
+import {
+  FieldWrapper,
+  Input
+} from "./chunk-CMGFZHCN.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./chunk-WI6FHKD7.js";
+import {
+  Button,
+  SplitButton
+} from "./chunk-YDPKUAP4.js";
+import {
+  next_link_default
+} from "./chunk-DAAVMYUT.js";
+import {
+  Skeleton
+} from "./chunk-FYEJTF5Y.js";
+import {
+  cn
+} from "./chunk-7RXWKTAP.js";
+
+// src/components/ui/truncate-text.tsx
+import { jsx } from "react/jsx-runtime";
+var VARIANT_CLASS = {
+  h1: "text-h1",
+  h2: "text-h2",
+  h3: "text-h3",
+  h4: "text-h4",
+  h5: "text-h5",
+  h6: "text-h6"
+};
+var TONE_CLASS = {
+  primary: "text-ods-text-primary",
+  secondary: "text-ods-text-secondary"
+};
+var LINE_CLAMP_CLASS = {
+  2: "line-clamp-2",
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
+};
+function TruncateText({
+  children,
+  tooltip,
+  className,
+  side = "top",
+  lines = 1,
+  variant = "h4",
+  tone = "primary",
+  mono = false,
+  triggerClassName,
+  as = "div"
+}) {
+  const isMultiLine = lines > 1;
+  const { ref, isTruncated } = useIsTruncated(children, { multiline: isMultiLine });
+  const clampClass = isMultiLine ? LINE_CLAMP_CLASS[lines] : "truncate block";
+  return /* @__PURE__ */ jsx(
+    FloatingTooltip,
+    {
+      content: tooltip ?? children,
+      side,
+      disabled: !isTruncated,
+      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(
+        "span",
+        {
+          ref,
+          className: cn(
+            VARIANT_CLASS[variant],
+            TONE_CLASS[tone],
+            mono && "[font-family:var(--font-family-heading)]",
+            clampClass,
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+
+// 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";
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = forwardRef((allProps, ref) => {
+  const { className, children, invalid, label, labelVariant, error, ...props } = allProps;
+  const errorSlot = "error" in allProps;
+  const isInvalid = invalid || !!error;
+  const trigger = /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      "data-invalid": isInvalid || void 0,
+      className: cn(
+        // Layout & spacing - match Input
+        // text-left resets the <button> UA default text-align:center, which the
+        // SelectValue span inherits and would otherwise center short values,
+        // reading as spurious left indentation on the selected value.
+        "flex h-11 w-full items-center justify-between gap-2 rounded-[6px] border px-3 text-left outline-none md:h-12",
+        // Typography - match Input exactly
+        "text-h4",
+        // Theme palette - match Input exactly
+        "border-ods-border bg-ods-card text-ods-text-primary data-[placeholder]:text-ods-text-secondary",
+        "enabled:hover:border-ods-border-hover enabled:hover:bg-ods-bg-hover enabled:active:border-ods-border-active enabled:active:bg-ods-bg-active",
+        !isInvalid && "data-[state=open]:border-ods-accent data-[state=open]:hover:border-ods-accent",
+        "group",
+        // Disabled - match Input exactly: value greys out, placeholder dims
+        // further. The `data-[placeholder]` rule above is a class+attribute
+        // selector, so the disabled placeholder rule stacks `:disabled` on top
+        // of it to win on specificity rather than on source order.
+        "disabled:!cursor-not-allowed disabled:bg-ods-bg",
+        "disabled:text-ods-text-disabled disabled:data-[placeholder]:text-ods-border",
+        // The chevron sets its own colour — grey it with the value.
+        "disabled:[&_svg]:text-ods-text-disabled",
+        "cursor-pointer transition-colors duration-200",
+        "[&>span]:line-clamp-1",
+        isInvalid && "border-ods-error enabled:hover:border-ods-error enabled:active:border-ods-error data-[state=open]:border-ods-error",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(
+          Chevron02DownIcon,
+          {
+            className: cn(
+              "shrink-0 text-ods-text-secondary transition-all duration-200 group-data-[state=open]:rotate-180",
+              isInvalid ? "text-ods-error" : "group-data-[state=open]:text-ods-accent"
+            ),
+            size: 24
+          }
+        ) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx2(FieldWrapper, { label, labelVariant, error, errorSlot, children: trigger });
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  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" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  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" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx2(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-[9999] max-h-96 overflow-hidden rounded-[4px] border border-ods-border bg-ods-card text-ods-text-primary",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    style: {
+      width: "var(--radix-select-trigger-width)",
+      minWidth: "var(--radix-select-trigger-width)"
+    },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx2(SelectPrimitive.Viewport, { className: "w-full", children }),
+      /* @__PURE__ */ jsx2(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 }));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "flex h-11 w-full cursor-pointer select-none items-center justify-between border-b border-ods-border px-4 last:border-b-0 md:h-12",
+      // Typography - match trigger
+      "whitespace-nowrap text-h4",
+      // Hover state with visible background change
+      "outline-none hover:bg-ods-bg-hover data-[highlighted]:bg-ods-bg-surface",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "transition-colors duration-150",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx2(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ jsx2(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(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 }));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/components/layout/back-button.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } 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)]",
+  "text-ods-text-secondary hover:text-ods-text-primary",
+  "transition-colors duration-200",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus"
+);
+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 })
+  ] });
+  if (href) {
+    const {
+      disabled: _disabled,
+      form: _form,
+      formAction: _formAction,
+      formEncType: _formEncType,
+      formMethod: _formMethod,
+      formNoValidate: _formNoValidate,
+      formTarget: _formTarget,
+      name: _name,
+      value: _value,
+      ...shared
+    } = props;
+    return /* @__PURE__ */ jsx3(
+      next_link_default,
+      {
+        ...shared,
+        href,
+        className: cn(BACK_BUTTON_CLASS, className),
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3("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";
+function actionKey(action, idx) {
+  return `${action.label ?? action.ariaLabel ?? "action"}-${idx}`;
+}
+function actionToMenuItems(action, idx) {
+  if (action.submenu && action.submenu.length > 0) {
+    if (!action.label) return action.submenu;
+    return action.submenu.map((item) => ({
+      ...item,
+      label: `${action.label} (${item.label})`
+    }));
+  }
+  if (!action.label) return [];
+  return [
+    {
+      id: `action-${idx}`,
+      label: action.label,
+      icon: action.icon,
+      onClick: action.onClick,
+      disabled: action.disabled,
+      href: action.href,
+      iconAction: action.iconAction ? {
+        icon: action.iconAction.icon,
+        "aria-label": action.iconAction["aria-label"],
+        onClick: action.iconAction.onClick,
+        href: action.iconAction.href,
+        openInNewTab: action.iconAction.openInNewTab,
+        disabled: action.iconAction.disabled
+      } : void 0
+    }
+  ];
+}
+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 })
+  ] }) });
+}
+function renderRawActionButton(action, opts = {}) {
+  if (action.iconAction) {
+    return /* @__PURE__ */ jsx4(
+      SplitButton,
+      {
+        variant: action.variant ?? void 0,
+        href: action.href,
+        prefetch: action.prefetch,
+        openInNewTab: action.openInNewTab,
+        onClick: action.onClick,
+        disabled: action.disabled,
+        mainDisabled: action.mainDisabled,
+        leftIcon: action.icon,
+        fullWidth: opts.fullWidth,
+        iconAction: action.iconAction,
+        children: action.label
+      }
+    );
+  }
+  if (action.submenu && action.submenu.length > 0) {
+    return /* @__PURE__ */ jsx4(
+      ActionsMenuDropdown,
+      {
+        groups: [{ items: action.submenu }],
+        customTrigger: /* @__PURE__ */ jsx4(
+          Button,
+          {
+            variant: "outline",
+            disabled: action.disabled,
+            loading: action.loading,
+            leftIcon: action.icon,
+            splitIcon: /* @__PURE__ */ jsx4(Chevron02DownIcon, { className: "h-4 w-4" }),
+            className: opts.fullWidth ? "flex-1" : void 0,
+            children: action.label
+          }
+        )
+      }
+    );
+  }
+  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(
+      Button,
+      {
+        variant: action.variant,
+        size: "icon",
+        href: action.href,
+        prefetch: action.prefetch,
+        openInNewTab: action.openInNewTab,
+        onClick: action.onClick,
+        disabled: action.disabled,
+        loading: action.loading,
+        leftIcon: iconNode,
+        "aria-label": action.label ?? action.ariaLabel
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    Button,
+    {
+      variant: action.variant,
+      href: action.href,
+      prefetch: action.prefetch,
+      openInNewTab: action.openInNewTab,
+      onClick: action.onClick,
+      disabled: action.disabled,
+      loading: action.loading,
+      leftIcon: action.icon,
+      className: opts.fullWidth ? "flex-1" : void 0,
+      children: action.label
+    }
+  );
+}
+var ACTIONS_GAP = "gap-[var(--spacing-system-xs)]";
+var SKELETON_HEIGHT = "h-11 md:h-12";
+var SKELETON_ICON_WIDTH = "w-11 md:w-12";
+var SKELETON_LABEL_WIDTH = "w-[120px] md:w-[140px]";
+var SKELETON_RADIUS = "rounded-md";
+function ActionSkeletons({
+  actions,
+  fullWidth,
+  emptyFallback = "icon"
+}) {
+  const items = actions.length > 0 ? actions : [null];
+  return /* @__PURE__ */ jsx4(Fragment2, { children: items.map((action, idx) => {
+    const isIconOnly = action ? !action.label || !!action.iconOnlyOnDesktop : emptyFallback === "icon";
+    return /* @__PURE__ */ jsx4(
+      Skeleton,
+      {
+        className: cn(
+          SKELETON_HEIGHT,
+          SKELETON_RADIUS,
+          isIconOnly ? SKELETON_ICON_WIDTH : fullWidth ? "flex-1" : SKELETON_LABEL_WIDTH
+        )
+      },
+      `action-skeleton-${idx}`
+    );
+  }) });
+}
+function MobileTriggerSkeleton() {
+  return /* @__PURE__ */ jsx4(Skeleton, { className: cn(SKELETON_HEIGHT, SKELETON_ICON_WIDTH, SKELETON_RADIUS) });
+}
+function PageActions({
+  variant = "icon-buttons",
+  actions,
+  menuActions,
+  selector,
+  className,
+  loading
+}) {
+  if (variant === "icon-buttons") {
+    return /* @__PURE__ */ jsx4(
+      IconButtonsVariant,
+      {
+        actions,
+        menuActions,
+        selector,
+        className,
+        loading
+      }
+    );
+  }
+  if (variant === "menu-primary") {
+    return /* @__PURE__ */ jsx4(
+      MenuPrimaryVariant,
+      {
+        actions,
+        menuActions: menuActions || [],
+        selector,
+        className,
+        loading
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(PrimaryButtonsVariant, { actions, className, loading });
+}
+function IconButtonsVariant({
+  actions,
+  menuActions,
+  selector,
+  className,
+  loading
+}) {
+  const desktopActions = actions.filter((a) => !a.showOnlyMobile);
+  const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
+  const isSingleAction = actions.length === 1 && !actions[0].submenu?.length;
+  const singleAction = isSingleAction ? actions[0] : null;
+  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: [
+      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 })
+      ] })
+    ] }),
+    /* @__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 })
+  ] });
+}
+function PrimaryButtonsVariant({
+  actions,
+  className,
+  loading
+}) {
+  const sortedActions = [...actions].sort((a, b) => {
+    if (a.variant === "accent" && b.variant !== "accent") return 1;
+    if (a.variant !== "accent" && b.variant === "accent") return -1;
+    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 ? (
+      // 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 })
+  ] });
+}
+function MenuPrimaryVariant({
+  actions,
+  menuActions,
+  selector,
+  className,
+  loading
+}) {
+  const desktopActions = actions.filter((a) => !a.showOnlyMobile);
+  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: [
+      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)}`))
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: cn("flex content-md:hidden", className), children: loading ? /* @__PURE__ */ jsx4(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 })
+    ) : null })
+  ] });
+}
+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)}`))
+  ] });
+}
+function MobileBottomActions({ actions, loading }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "fixed bottom-0 left-0 right-0 z-50 md:hidden",
+        "border-t border-ods-border bg-ods-card",
+        // `lf` (24px at every breakpoint), NOT `l` — this bar is `md:hidden`, so the
+        // only value it ever uses is the MOBILE one, and `l` is 16px there. The
+        // fixed variant is what keeps the 24px the bar has always had.
+        "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)}`))
+    }
+  );
+}
+function usePageActionsBottomPadding(variant) {
+  return variant === "primary-buttons" || variant === "menu-primary" ? "pb-40 md:pb-0" : "";
+}
+
+// src/components/ui/entity-image.tsx
+import React2 from "react";
+import { jsx as jsx5 } 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);
+  const [failedSrc, setFailedSrc] = React2.useState(null);
+  const imageFailed = resolvedSrc !== void 0 && failedSrc === resolvedSrc;
+  const showFallback = imageFailed || !resolvedSrc;
+  const initials = personInitials(fallbackText ?? alt);
+  if (showFallback) {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        "aria-label": alt,
+        className: cn(
+          "flex shrink-0 select-none items-center justify-center rounded-md border border-ods-border bg-ods-bg text-ods-text-secondary text-h4",
+          sizeClassName ?? ENTITY_IMAGE_SIZE,
+          className
+        ),
+        children: initials || "?"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx5(
+    next_image_default,
+    {
+      src: resolvedSrc,
+      alt: alt ?? "",
+      onError: () => setFailedSrc(resolvedSrc),
+      className: cn(
+        "shrink-0 rounded-md border border-ods-border object-contain",
+        sizeClassName ?? ENTITY_IMAGE_SIZE,
+        className
+      ),
+      width: 60,
+      height: 60,
+      unoptimized: true
+    }
+  );
+}
+
+// src/components/layout/title-block.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var TITLE_BLOCK_MIN_HEIGHT = "min-h-11 content-md:min-h-12";
+function TitleTextSkeleton({ widthClass, heightClass }) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn("inline-block max-w-full animate-pulse rounded-md bg-ods-border", widthClass, heightClass)
+    }
+  );
+}
+var TITLE_SKELETON_SIZE = {
+  h1: { width: "w-56 content-md:w-80 content-lg:w-96", height: "h-7 content-md:h-8 content-lg:h-9" },
+  h2: { width: "w-48 content-md:w-72", height: "h-4 content-md:h-6" }
+};
+function TitleBlock({
+  title,
+  subtitle,
+  image,
+  backButton,
+  actions,
+  actionsVariant = "icon-buttons",
+  menuActions,
+  selector,
+  variant = "plain",
+  className,
+  titleSize = "h2",
+  titleAdornment,
+  loading,
+  loadingActions,
+  subtitleRow = "when-set",
+  titleWrap = false
+}) {
+  const hasSubtitleRow = !!subtitle || subtitleRow === "always" || subtitleRow === "while-loading" && !!loading;
+  const hasActions = actions && actions.length > 0;
+  const hasMenuActions = !!menuActions && menuActions.some((g) => g.items.length > 0);
+  const titleClass = titleSize === "h1" ? "text-h1" : "text-h2";
+  const titleOverflowClass = titleWrap ? "break-words" : "truncate";
+  const skeletonSize = TITLE_SKELETON_SIZE[titleSize];
+  const { ref: titleRef, isTruncated: titleTruncated } = useIsTruncated(loading ? null : title);
+  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(
+    "div",
+    {
+      className: cn(
+        "flex items-end justify-between gap-[var(--spacing-system-m)]",
+        // md+: one wrapping row — actions stay inline with a short title and
+        // wrap to a second row only when the title overflows (ClickUp 86ahd6uy5).
+        "content-md:flex-wrap content-md:content-end",
+        "pt-[var(--spacing-system-l)]",
+        variant === "card" ? cn(
+          "border-b border-ods-border bg-ods-card",
+          "px-[var(--spacing-system-l)] pb-[var(--spacing-system-l)]",
+          "content-md:border-b-0 content-md:bg-transparent",
+          "content-md:px-0 content-md:pb-0",
+          "content-md:mb-[var(--spacing-system-l)]"
+        ) : "mb-[var(--spacing-system-l)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 flex-col justify-center gap-[var(--spacing-system-xs)] content-md:max-w-full content-md:flex-none",
+              TITLE_BLOCK_MIN_HEIGHT
+            ),
+            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(
+                      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: titleNode
+                          }
+                        )
+                      }
+                    ),
+                    /* @__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 }) })),
+                  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(
+                    "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"
+                    }
+                  ) })
+                ] })
+              ] }) : 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 })
+              ] }) : (
+                /* 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 })
+              ))
+            ]
+          }
+        ),
+        (hasActions || hasMenuActions || selector || loadingActions) && /* @__PURE__ */ jsx6("div", { className: "flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsx6(
+          PageActions,
+          {
+            variant: actionsVariant,
+            actions: actions ?? [],
+            menuActions,
+            selector,
+            loading: loadingActions
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/layout/page-layout.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function PageLayout({
+  children,
+  title,
+  subtitle,
+  image,
+  backButton,
+  actions,
+  actionsVariant = "icon-buttons",
+  menuActions,
+  selector,
+  headerVariant,
+  className,
+  contentClassName,
+  showHeader = true,
+  titleSize,
+  titleAdornment,
+  loading,
+  loadingActions,
+  subtitleRow,
+  titleWrap
+}) {
+  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(
+      TitleBlock,
+      {
+        title,
+        subtitle,
+        image,
+        backButton,
+        actions,
+        actionsVariant,
+        menuActions,
+        selector,
+        variant: headerVariant,
+        titleSize,
+        titleAdornment,
+        loading,
+        loadingActions,
+        subtitleRow,
+        titleWrap
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: cn(
+          "flex flex-1 flex-col gap-[var(--spacing-system-l)]",
+          needsBottomPadding && "pb-28 content-md:pb-0",
+          contentClassName
+        ),
+        children
+      }
+    )
+  ] });
+}
+
+// src/components/features/remote-session/remote-session-viewers.tsx
+import { useState } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function viewerLabel(viewer) {
+  if (viewer.isHost) return `${viewer.name} (host)`;
+  if (viewer.isYou) return `${viewer.name} (you)`;
+  return viewer.name;
+}
+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);
+  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(
+      DropdownMenuTrigger,
+      {
+        "aria-label": `In this session: ${ordered.map(viewerLabel).join(", ")}`,
+        className: cn(
+          "flex shrink-0 items-center gap-[var(--spacing-system-xxs)] rounded-md outline-none",
+          "focus-visible:ring-2 focus-visible:ring-ods-focus",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs6("span", { className: "flex items-center", children: [
+            faces.map((viewer, index) => /* @__PURE__ */ jsx8(
+              SquareAvatar,
+              {
+                variant: "round",
+                sizePx: 32,
+                src: viewer.avatarUrl ?? void 0,
+                alt: viewer.name,
+                fallback: viewer.name,
+                className: cn(
+                  "relative bg-ods-bg",
+                  viewer.isHost ? "ring-2 ring-ods-accent" : "ring-1 ring-ods-border",
+                  index > 0 && "-ml-2"
+                ),
+                style: { zIndex: faces.length - index + 1 }
+              },
+              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
+            ] })
+          ] }),
+          /* @__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__ */ jsx8(DropdownMenuContent, { align: "end", className: "w-[280px] p-0", children: ordered.map((viewer) => /* @__PURE__ */ jsxs6(
+      DropdownMenuItem,
+      {
+        className: cn(
+          "gap-[var(--spacing-system-xsf)] rounded-none border-b border-ods-border bg-ods-bg last:border-b-0",
+          "py-[var(--spacing-system-s)] pl-[var(--spacing-system-mf)] pr-[var(--spacing-system-xs)] text-h4"
+        ),
+        children: [
+          /* @__PURE__ */ jsx8(
+            SquareAvatar,
+            {
+              variant: "round",
+              sizePx: 24,
+              src: viewer.avatarUrl ?? void 0,
+              alt: "",
+              fallback: viewer.name,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ jsx8("span", { className: "min-w-0 flex-1 truncate", children: viewerLabel(viewer) })
+        ]
+      },
+      viewer.id
+    )) })
+  ] });
+}
+
+// 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";
+var DESKTOP_SCALE = {
+  "--spacing-system-xs": "0.5rem",
+  "--spacing-system-s": "0.75rem",
+  "--spacing-system-m": "1rem",
+  "--spacing-system-l": "1.5rem",
+  "--spacing-system-xl": "2.5rem",
+  "--font-size-h1-title": "3.5rem",
+  "--font-size-h2-sub-title": "2rem",
+  "--font-size-h3-body": "1.125rem",
+  "--font-size-h4-body": "1.125rem",
+  "--font-size-h5-caption": "0.875rem",
+  "--font-size-h6-caption": "0.875rem",
+  "--font-line-space-h1-main-title": "4rem",
+  "--font-line-space-h2-sub-title": "2.5rem",
+  "--font-line-space-h3-body": "1.5rem",
+  "--font-line-space-h4-body": "1.5rem",
+  "--font-line-space-h5-caption": "1.25rem",
+  "--font-line-space-h6-caption": "1.25rem"
+};
+function RemoteSessionScope({ children, className }) {
+  return /* @__PURE__ */ jsx9("div", { "data-app-type": "openframe", style: DESKTOP_SCALE, className, children });
+}
+function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }) {
+  if (logoUrl) {
+    return /* @__PURE__ */ jsx9(
+      SquareAvatar,
+      {
+        variant: "square",
+        fit: "contain",
+        sizePx,
+        src: logoUrl,
+        alt: name,
+        fallback: name,
+        className: cn("shrink-0 rounded-md border border-ods-border bg-ods-card", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      role: "img",
+      "aria-label": name,
+      style: { width: sizePx, height: sizePx },
+      className: cn(
+        "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" })
+    }
+  );
+}
+function RemoteSessionRecordingTag({ className }) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn(
+        "flex h-8 items-center gap-[var(--spacing-system-xs)] self-start rounded-md bg-ods-success-secondary p-[var(--spacing-system-xsf)]",
+        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" })
+      ]
+    }
+  );
+}
+function RemoteSessionStatusRow({
+  showRecordingTag,
+  viewers
+}) {
+  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" })
+  ] });
+}
+var REMOTE_SESSION_DRAG_HANDLE_CLASS = "cursor-grab active:cursor-grabbing";
+function RemoteSessionDragger({ dragHandlers }) {
+  return /* @__PURE__ */ jsx9(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "absolute right-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] text-ods-text-secondary",
+        dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+      ),
+      ...dragHandlers,
+      children: /* @__PURE__ */ jsx9(DraggerIcon, { size: 24, color: "currentColor" })
+    }
+  );
+}
+function formatRemoteSessionElapsed(elapsedMs) {
+  const total = Math.max(0, Math.floor(elapsedMs / 1e3));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor(total % 3600 / 60);
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+function useRemoteSessionTimer(startedAt) {
+  const [nowMs, setNowMs] = useState2(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNowMs(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, []);
+  return formatRemoteSessionElapsed(nowMs - Date.parse(startedAt));
+}
+
+// src/components/features/remote-session/remote-access-request-card.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+function displaySiteUrl(url) {
+  return url.replace(/^https?:\/\//, "").replace(/\/$/, "");
+}
+function RemoteAccessRequestCard({
+  party,
+  showRecordingNotice = false,
+  deciding = null,
+  error,
+  onDecide,
+  onOpenSite
+}) {
+  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) })
+      ] }),
+      openableSite && onOpenSite && /* @__PURE__ */ jsx10(Button, { variant: "outline", size: "icon", "aria-label": "Open website", onClick: () => onOpenSite(openableSite), children: /* @__PURE__ */ jsx10(ExternalLinkIcon, { size: 24, color: "currentColor" }) })
+    ] }),
+    /* @__PURE__ */ jsxs8("p", { className: "w-full text-ods-text-primary text-h4", children: [
+      "A technician from ",
+      /* @__PURE__ */ jsx10("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." })
+      ] }),
+      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." })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-l)]", children: [
+      /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "outline",
+          fullWidth: true,
+          loading: deciding === "DENIED",
+          disabled: deciding !== null,
+          onClick: () => onDecide("DENIED"),
+          children: "Decline"
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Button,
+        {
+          variant: "accent",
+          fullWidth: true,
+          loading: deciding === "APPROVED",
+          disabled: deciding !== null,
+          onClick: () => onDecide("APPROVED"),
+          children: "Allow Access"
+        }
+      )
+    ] })
+  ] });
+}
+
+// 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(
+  ({ children, expanded = false, onHide, className }, ref) => {
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex w-[440px] shrink-0 flex-col overflow-hidden rounded-md border border-ods-border bg-ods-bg",
+          expanded && "h-[680px]",
+          className
+        ),
+        children: [
+          children,
+          /* @__PURE__ */ jsxs9(
+            "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" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RemoteSessionBlockFrame.displayName = "RemoteSessionBlockFrame";
+function RemoteSessionEndButton({ onEndSession }) {
+  return /* @__PURE__ */ jsx11(
+    Button,
+    {
+      variant: "outline",
+      fullWidth: true,
+      leftIcon: /* @__PURE__ */ jsx11(MonitorOffIcon, { size: 24, color: "currentColor", className: "text-ods-error" }),
+      onClick: onEndSession,
+      children: "End Session"
+    }
+  );
+}
+function RemoteSessionSummary({
+  party,
+  elapsed,
+  showRecordingTag = false,
+  viewers,
+  onOpenChat,
+  onEndSession,
+  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(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center gap-[var(--spacing-system-xs)] pr-[var(--spacing-system-mf)]",
+          dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+        ),
+        ...dragHandlers,
+        children: [
+          technician ? /* @__PURE__ */ jsx11(
+            SquareAvatar,
+            {
+              variant: "round",
+              sizePx: 48,
+              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: [
+              technician ? `${technician} connected` : "IT support team is connected",
+              " ",
+              /* @__PURE__ */ jsxs9("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__ */ jsx11(RemoteSessionStatusRow, { showRecordingTag, viewers }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex w-full items-stretch gap-[var(--spacing-system-m)]", children: [
+      /* @__PURE__ */ jsx11(
+        Button,
+        {
+          variant: "outline",
+          fullWidth: true,
+          leftIcon: /* @__PURE__ */ jsx11(ChatsIcon, { size: 24, color: "currentColor" }),
+          onClick: onOpenChat,
+          children: "Open Chat"
+        }
+      ),
+      /* @__PURE__ */ jsx11(RemoteSessionEndButton, { onEndSession })
+    ] })
+  ] });
+}
+var RemoteSessionMinimizedChip = forwardRef2(
+  ({ party, onExpand, dragHandlers }, ref) => {
+    const technician = party.technicianName;
+    return /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Show session block",
+        className: cn(
+          "flex shrink-0 flex-col overflow-hidden rounded-md border border-ods-border",
+          dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+        ),
+        onClick: onExpand,
+        ...dragHandlers,
+        children: [
+          technician ? /* @__PURE__ */ jsx11(
+            SquareAvatar,
+            {
+              sizePx: 48,
+              src: party.technicianAvatarUrl ?? void 0,
+              fallback: technician,
+              className: "rounded-none"
+            }
+          ) : /* @__PURE__ */ jsx11(
+            RemoteSessionOrgLogo,
+            {
+              name: party.organizationName,
+              logoUrl: party.organizationLogoUrl,
+              sizePx: 48,
+              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 }) })
+        ]
+      }
+    );
+  }
+);
+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";
+function formatTime2(at) {
+  return at.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+function RemoteSessionChatPanel({
+  party,
+  elapsed,
+  messages,
+  showRecordingTag = false,
+  viewers,
+  draft,
+  onDraftChange,
+  onSend,
+  ready = true,
+  error,
+  onCloseChat,
+  onEndSession,
+  dragHandlers
+}) {
+  const listRef = useRef(null);
+  useEffect2(() => {
+    const list = listRef.current;
+    if (list) list.scrollTop = list.scrollHeight;
+  }, [messages]);
+  const handleSend = () => {
+    const text = draft.trim();
+    if (!text) return;
+    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(
+        "div",
+        {
+          className: cn(
+            "flex w-full flex-col pr-[var(--spacing-system-mf)]",
+            dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS
+          ),
+          ...dragHandlers,
+          children: [
+            /* @__PURE__ */ jsxs10("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: [
+                "(",
+                elapsed,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx12("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(
+          Button,
+          {
+            variant: "outline",
+            fullWidth: true,
+            leftIcon: /* @__PURE__ */ jsx12(MessageOffIcon, { size: 24, color: "currentColor" }),
+            onClick: onCloseChat,
+            children: "Close Chat"
+          }
+        ),
+        /* @__PURE__ */ jsx12(RemoteSessionEndButton, { onEndSession })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx12(
+      "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)
+        ) })
+      }
+    ),
+    error && /* @__PURE__ */ jsx12("p", { className: "bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6", children: error }),
+    /* @__PURE__ */ jsxs10(
+      "form",
+      {
+        className: "flex items-center gap-[var(--spacing-system-xs)] bg-ods-card px-[var(--spacing-system-m)] pb-[var(--spacing-system-m)]",
+        onSubmit: (event) => {
+          event.preventDefault();
+          handleSend();
+        },
+        children: [
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              value: draft,
+              onChange: (event) => onDraftChange(event.target.value),
+              disabled: !ready,
+              placeholder: ready ? "Enter your Message..." : "Loading chat...",
+              "aria-label": "Message",
+              className: "h-12 min-w-0 flex-1 rounded-md border border-ods-border bg-ods-bg px-[var(--spacing-system-s)] text-ods-text-primary outline-none text-h6 placeholder:text-ods-text-secondary"
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "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" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function RemoteSessionChatMessageRow({
+  message,
+  party
+}) {
+  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(
+        SquareAvatar,
+        {
+          variant: "round",
+          sizePx: 16,
+          src: party.technicianAvatarUrl ?? void 0,
+          fallback: technician
+        }
+      ),
+      /* @__PURE__ */ jsx12(
+        "span",
+        {
+          className: cn(
+            "min-w-0 flex-1 truncate text-code",
+            isTechnician ? "text-ods-accent" : "text-ods-text-secondary"
+          ),
+          children: isTechnician ? technician : "User"
+        }
+      ),
+      /* @__PURE__ */ jsx12("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 })
+  ] });
+}
+
+// src/components/features/remote-session/remote-desktop-chat-message-row.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function RemoteDesktopChatMessageRow({
+  authorName,
+  isTechnician,
+  avatarUrl,
+  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(
+        "span",
+        {
+          className: cn(
+            "min-w-0 flex-1 truncate text-h4 [font-family:var(--font-family-heading)]",
+            isTechnician ? "text-ods-accent" : "text-ods-text-secondary"
+          ),
+          children: authorName
+        }
+      ),
+      /* @__PURE__ */ jsx13("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 })
+  ] });
+}
+
+// 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";
+var REMOTE_DESKTOP_CHAT_END_USER_NAME = "User";
+function RemoteDesktopChatPanel({
+  messages,
+  loading,
+  technician,
+  sending,
+  onSend,
+  variant
+}) {
+  const scrollRef = useRef2(null);
+  const rows = messages.filter((message) => message.author !== "system");
+  useEffect3(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [rows.length]);
+  return /* @__PURE__ */ jsxs12(
+    "aside",
+    {
+      "aria-label": "Session chat",
+      className: cn(
+        "flex flex-col gap-[var(--spacing-system-mf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]",
+        variant === "side" ? "h-full w-[400px] flex-shrink-0" : "absolute bottom-[var(--spacing-system-mf)] right-[var(--spacing-system-mf)] top-[calc(var(--spacing-system-xlf)+var(--spacing-system-mf))] z-10 w-[360px] shadow-lg"
+      ),
+      children: [
+        /* @__PURE__ */ 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(
+          RemoteDesktopChatMessageRow,
+          {
+            authorName: message.name || (message.author === "technician" ? technician.name : REMOTE_DESKTOP_CHAT_END_USER_NAME),
+            isTechnician: message.author === "technician",
+            avatarUrl: message.author === "technician" ? technician.avatarUrl : void 0,
+            sentAt: message.at,
+            body: message.text
+          },
+          message.id
+        )) }) }),
+        /* @__PURE__ */ jsx14(
+          ChatInput,
+          {
+            placeholder: "Enter your Message...",
+            onSend,
+            sending,
+            showSendButton: true,
+            fullWidth: true,
+            maxRows: 4
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/features/remote-session/remote-desktop-fullscreen-toolbar.tsx
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+function RemoteDesktopFullscreenToolbar({
+  deviceName,
+  displayMenuGroups,
+  currentDisplayLabel,
+  actionsMenuGroups,
+  onOpenSettings,
+  onExitFullscreen,
+  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(
+      "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(
+              ActionsMenuDropdown,
+              {
+                groups: displayMenuGroups,
+                customTrigger: /* @__PURE__ */ jsxs13(
+                  "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__ */ jsxs13("div", { className: "flex flex-shrink-0 items-center gap-[var(--spacing-system-xs)]", children: [
+            onToggleChat && /* @__PURE__ */ jsx15(
+              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" })
+              }
+            ),
+            /* @__PURE__ */ jsx15(
+              ActionsMenuDropdown,
+              {
+                groups: actionsMenuGroups,
+                customTrigger: /* @__PURE__ */ jsx15(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "icon-sm",
+                    "aria-label": "Actions",
+                    leftIcon: /* @__PURE__ */ jsx15(Ellipsis01Icon, { className: "h-4 w-4" })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx15(
+              Button,
+              {
+                variant: "outline",
+                size: "icon-sm",
+                "aria-label": "Exit fullscreen",
+                onClick: onExitFullscreen,
+                leftIcon: /* @__PURE__ */ jsx15(Collapse02Icon, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx15(
+              Button,
+              {
+                variant: "outline",
+                size: "icon-sm",
+                "aria-label": "Settings",
+                onClick: onOpenSettings,
+                leftIcon: /* @__PURE__ */ jsx15(Settings01Icon, { className: "h-4 w-4" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/features/remote-session/remote-desktop-view.tsx
+import { jsx as jsx16, jsxs as jsxs14 } 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)]";
+function RemoteDesktopView({
+  deviceName,
+  organizationName,
+  onBack,
+  fullscreen = false,
+  onEnterFullscreen,
+  onExitFullscreen,
+  displayMenuGroups = [],
+  currentDisplayLabel,
+  actionsMenuGroups,
+  onOpenSettings,
+  chatOpen = false,
+  onToggleChat,
+  screen,
+  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,
+          {
+            variant: "h6",
+            tone: "secondary",
+            children: `Desktop \u2022 ${organizationName || "Unknown Customer"}`
+          }
+        )
+      ] })
+    ] }),
+    /* @__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, {})
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs14(
+    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(
+            RemoteDesktopFullscreenToolbar,
+            {
+              deviceName,
+              displayMenuGroups,
+              currentDisplayLabel,
+              actionsMenuGroups,
+              onOpenSettings,
+              onExitFullscreen,
+              chatOpen: onToggleChat ? chatOpen : void 0,
+              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 }),
+            chat
+          ] })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+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" })
+        ] })
+      ] }),
+      /* @__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__ */ jsx16("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";
+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." }
+};
+function RemoteSessionDialog({
+  variant,
+  organizationName,
+  ending = false,
+  onEndSession,
+  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." })
+      ] }),
+      /* @__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" })
+      ] })
+    ] });
+  }
+  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 }),
+        " ",
+        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" }) })
+  ] });
+}
+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 });
+}
+
+// src/components/features/remote-session/remote-session-overlay.tsx
+import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
+function RemoteSessionBorder({ className }) {
+  return /* @__PURE__ */ jsx18("div", { className: cn("pointer-events-none size-full border-4 border-ods-warning", className) });
+}
+function RemoteSessionPill({ onEndSession }) {
+  return /* @__PURE__ */ jsxs16(
+    "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" })
+      ]
+    }
+  );
+}
+
+// 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";
+var REMOTE_SESSION_KEEP_REASON_LABELS = {
+  CLIENT_DISPUTE: "Client dispute",
+  INTERNAL_REVIEW: "Internal review",
+  LEGAL_OR_COMPLIANCE: "Legal or compliance request",
+  OTHER: "Other"
+};
+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 })
+    ] })
+  ] });
+}
+function KeepRecordingModal({
+  isOpen,
+  onClose,
+  keptUsage,
+  isPending = false,
+  onConfirm
+}) {
+  const [reason, setReason] = useState3("");
+  const [description, setDescription] = useState3("");
+  const [seededOpen, setSeededOpen] = useState3(isOpen);
+  if (seededOpen !== isOpen) {
+    setSeededOpen(isOpen);
+    if (isOpen) {
+      setReason("");
+      setDescription("");
+    }
+  }
+  const trimmed = description.trim();
+  const canKeep = reason !== "" && (reason !== "OTHER" || trimmed !== "");
+  const handleKeep = () => {
+    if (!canKeep || isPending) return;
+    onConfirm({ reason, description: reason === "OTHER" ? trimmed : null });
+  };
+  return /* @__PURE__ */ jsxs17(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(
+      KeepNotice,
+      {
+        icon: /* @__PURE__ */ jsx19(InfoCircleIcon, { size: 24, color: "currentColor" }),
+        title: "This recording won't be deleted automatically",
+        children: [
+          "It stays until you stop keeping it. Kept recordings use ",
+          keptUsage,
+          "."
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs17("div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
+      /* @__PURE__ */ jsxs17(
+        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)) })
+          ]
+        }
+      ),
+      reason === "OTHER" && /* @__PURE__ */ jsx19(
+        Input,
+        {
+          "aria-label": "Reason description",
+          value: description,
+          onChange: (event) => setDescription(event.target.value),
+          placeholder: "Briefly describe what's going on",
+          maxLength: DESCRIPTION_MAX_LENGTH,
+          disabled: isPending
+        }
+      )
+    ] }),
+    /* @__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: handleKeep,
+          loading: isPending,
+          disabled: !canKeep,
+          className: "flex-1",
+          children: "Keep"
+        }
+      )
+    ] })
+  ] });
+}
+function ReleaseKeepingModal({
+  isOpen,
+  onClose,
+  keptBy,
+  keptOn,
+  reason,
+  ticket,
+  expiresOn,
+  dueOn,
+  isPending = false,
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsxs17(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: [
+        "Kept by ",
+        keptBy,
+        " on ",
+        keptOn,
+        " for ",
+        reason,
+        "."
+      ] }),
+      ticket && /* @__PURE__ */ jsxs17("p", { children: [
+        "Ticket: ",
+        ticket
+      ] })
+    ] }),
+    /* @__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" })
+    ] })
+  ] });
+}
+
+// src/components/features/remote-session/remote-session-events.tsx
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+function formatRemoteSessionOffset(offsetMs) {
+  const total = Math.max(0, Math.floor(offsetMs / 1e3));
+  const hours = Math.floor(total / 3600);
+  const minutes = String(Math.floor(total % 3600 / 60)).padStart(2, "0");
+  const seconds = String(total % 60).padStart(2, "0");
+  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(
+      "button",
+      {
+        type: "button",
+        "aria-current": event.id === activeEventId || void 0,
+        onClick: () => onSelect?.(event),
+        className: cn(
+          "flex w-full items-start gap-[var(--spacing-system-xxs)] rounded-md p-[var(--spacing-system-xxs)] text-left outline-none transition-colors",
+          "hover:bg-ods-bg-hover focus-visible:ring-2 focus-visible:ring-ods-focus",
+          event.id === activeEventId && "bg-ods-border hover:bg-ods-border"
+        ),
+        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 })
+          ] })
+        ]
+      }
+    ) }, event.id)) })
+  ] });
+}
+function RemoteSessionTimelineMarkers({
+  events,
+  durationMs,
+  onSelect,
+  className
+}) {
+  if (durationMs <= 0) return null;
+  return /* @__PURE__ */ jsx20("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(
+      "button",
+      {
+        type: "button",
+        "aria-label": label,
+        title: label,
+        onClick: () => onSelect?.(event),
+        style: { left: `${share * 100}%` },
+        className: "absolute top-0 h-4 w-1 -translate-x-1/2 rounded-md bg-ods-text-secondary outline-none transition-colors hover:bg-ods-text-primary focus-visible:ring-2 focus-visible:ring-ods-focus"
+      },
+      event.id
+    );
+  }) });
+}
+
+// src/components/features/remote-session/remote-session-status.tsx
+import { jsx as jsx21, jsxs as jsxs19 } 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" });
+}
+var STATUS_TAG = {
+  live: { label: "Live", variant: "critical" },
+  processing: { label: "Processing", variant: "warning" },
+  failed: { label: "Failed", variant: "error" }
+};
+function RemoteSessionStatusTag({ status, className }) {
+  const { label, variant } = STATUS_TAG[status];
+  return /* @__PURE__ */ jsx21(
+    Tag,
+    {
+      label,
+      variant,
+      icon: status === "live" ? /* @__PURE__ */ jsx21(LiveDot, {}) : void 0,
+      className: cn("pointer-events-none shrink-0", 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: "-" });
+  }
+  if (props.state === "expired") {
+    return /* @__PURE__ */ jsx21("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" }),
+        "Kept"
+      ] }),
+      /* @__PURE__ */ jsxs19("p", { className: "truncate text-ods-text-secondary text-h6", children: [
+        "Kept by ",
+        props.keptBy,
+        " \xB7 ",
+        props.reason
+      ] })
+    ] });
+  }
+  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 })
+  ] });
+}
+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(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "flex w-full items-start gap-[var(--spacing-system-m)] rounded-md bg-ods-warning-secondary p-[var(--spacing-system-s)] text-ods-warning",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx21(AlertTriangleIcon, { size: 24, color: "currentColor", className: "shrink-0" }),
+        /* @__PURE__ */ jsx21("p", { className: "min-w-0 flex-1 text-h3", children: message })
+      ]
+    }
+  );
+}
+
+export {
+  TruncateText,
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  BACK_BUTTON_SKELETON_CLASS,
+  BackButton,
+  PageActions,
+  usePageActionsBottomPadding,
+  EntityImage,
+  TITLE_BLOCK_MIN_HEIGHT,
+  TitleBlock,
+  PageLayout,
+  RemoteSessionViewers,
+  RemoteSessionScope,
+  RemoteSessionOrgLogo,
+  RemoteSessionRecordingTag,
+  REMOTE_SESSION_DRAG_HANDLE_CLASS,
+  RemoteSessionDragger,
+  formatRemoteSessionElapsed,
+  useRemoteSessionTimer,
+  RemoteAccessRequestCard,
+  RemoteSessionBlockFrame,
+  RemoteSessionEndButton,
+  RemoteSessionSummary,
+  RemoteSessionMinimizedChip,
+  RemoteSessionChatPanel,
+  RemoteDesktopChatMessageRow,
+  REMOTE_DESKTOP_CHAT_END_USER_NAME,
+  RemoteDesktopChatPanel,
+  RemoteDesktopFullscreenToolbar,
+  RemoteDesktopView,
+  RemoteDesktopViewSkeleton,
+  RemoteSessionDialog,
+  RemoteSessionBorder,
+  RemoteSessionPill,
+  REMOTE_SESSION_KEEP_REASON_LABELS,
+  KeepRecordingModal,
+  ReleaseKeepingModal,
+  formatRemoteSessionOffset,
+  RemoteSessionEventList,
+  RemoteSessionTimelineMarkers,
+  RemoteSessionStatusTag,
+  RemoteSessionExpiry,
+  RemoteSessionStorageAlert
+};