@flamingo-stack/openframe-frontend-core 0.0.691-snapshot.20261001154617 → 0.0.691

package/src/components/features/remote-session/remote-session-block.tsx

@@ -1,182 +0,0 @@
-'use client';
-
-import { forwardRef, type ReactNode } from 'react';
-import { cn } from '../../../utils/cn';
-import { ChatsIcon, Chevrons03LeftIcon, Chevrons03RightIcon, MonitorOffIcon } from '../../icons-v2-generated';
-import { OpenFrameLogo } from '../../icons/openframe-logo';
-import { Button } from '../../ui/button/button';
-import { SquareAvatar } from '../../ui/square-avatar';
-import {
-  REMOTE_SESSION_DRAG_HANDLE_CLASS,
-  RemoteSessionDragger,
-  RemoteSessionOrgLogo,
-  RemoteSessionRecordingTag,
-} from './remote-session-parts';
-import type { RemoteSessionDragHandlers, RemoteSessionParty } from './types';
-
-export interface RemoteSessionBlockFrameProps {
-  /** The summary or the chat panel. */
-  children: ReactNode;
-  /** The chat panel has a fixed height; the summary hugs its content. */
-  expanded?: boolean;
-  onHide: () => void;
-  className?: string;
-}
-
-/**
- * The session block's card: 440 px wide, the open panel on top and the
- * "Hide this Block" bar at the bottom. The ref is the rendered surface, which
- * a desktop host sizes its window to.
- */
-export const RemoteSessionBlockFrame = forwardRef<HTMLDivElement, RemoteSessionBlockFrameProps>(
-  ({ children, expanded = false, onHide, className }, ref) => {
-    return (
-      <div
-        ref={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}
-        <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}
-        >
-          <Chevrons03RightIcon size={24} />
-          <span className="min-w-0 flex-1 truncate text-left text-ods-text-secondary text-h4">Hide this Block</span>
-          <OpenFrameLogo className="size-6 shrink-0" />
-        </button>
-      </div>
-    );
-  },
-);
-RemoteSessionBlockFrame.displayName = 'RemoteSessionBlockFrame';
-
-/** The red End Session action shared by the summary and the chat panel. */
-export function RemoteSessionEndButton({ onEndSession }: { onEndSession: () => void }) {
-  return (
-    <Button
-      variant="outline"
-      fullWidth
-      leftIcon={<MonitorOffIcon size={24} color="currentColor" className="text-ods-error" />}
-      onClick={onEndSession}
-    >
-      End Session
-    </Button>
-  );
-}
-
-export interface RemoteSessionSummaryProps {
-  party: RemoteSessionParty;
-  /** Elapsed session time, e.g. from `useRemoteSessionTimer`. */
-  elapsed: string;
-  showRecordingTag?: boolean;
-  onOpenChat: () => void;
-  onEndSession: () => void;
-  /** Makes the header row and the dragger move the window. */
-  dragHandlers?: RemoteSessionDragHandlers;
-}
-
-/** The compact block: who is connected and for how long, Open Chat / End Session. */
-export function RemoteSessionSummary({
-  party,
-  elapsed,
-  showRecordingTag = false,
-  onOpenChat,
-  onEndSession,
-  dragHandlers,
-}: RemoteSessionSummaryProps) {
-  const technician = party.technicianName;
-  return (
-    <div className="relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]">
-      <RemoteSessionDragger dragHandlers={dragHandlers} />
-      <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}
-      >
-        {technician ? (
-          <SquareAvatar
-            variant="round"
-            sizePx={48}
-            src={party.technicianAvatarUrl ?? undefined}
-            fallback={technician}
-          />
-        ) : (
-          <RemoteSessionOrgLogo name={party.organizationName} logoUrl={party.organizationLogoUrl} sizePx={48} />
-        )}
-        <div className="flex min-w-0 flex-1 flex-col">
-          <p className="w-full truncate text-ods-text-primary text-h4">
-            {technician ? `${technician} connected` : 'IT support team is connected'}{' '}
-            <span className="text-ods-text-secondary">({elapsed})</span>
-          </p>
-          <p className="w-full truncate text-ods-text-secondary text-h4">{party.organizationName}</p>
-        </div>
-      </div>
-      {showRecordingTag && <RemoteSessionRecordingTag />}
-      <div className="flex w-full items-stretch gap-[var(--spacing-system-m)]">
-        <Button
-          variant="outline"
-          fullWidth
-          leftIcon={<ChatsIcon size={24} color="currentColor" />}
-          onClick={onOpenChat}
-        >
-          Open Chat
-        </Button>
-        <RemoteSessionEndButton onEndSession={onEndSession} />
-      </div>
-    </div>
-  );
-}
-
-export interface RemoteSessionMinimizedChipProps {
-  party: RemoteSessionParty;
-  onExpand: () => void;
-  /** Lets the chip move the window too; the host tells a drag from a click. */
-  dragHandlers?: RemoteSessionDragHandlers;
-}
-
-/** The hidden block: the technician's avatar (or the organization's logo) and a chevron to bring it back. */
-export const RemoteSessionMinimizedChip = forwardRef<HTMLButtonElement, RemoteSessionMinimizedChipProps>(
-  ({ party, onExpand, dragHandlers }, ref) => {
-    const technician = party.technicianName;
-    return (
-      <button
-        ref={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}
-      >
-        {technician ? (
-          <SquareAvatar
-            sizePx={48}
-            src={party.technicianAvatarUrl ?? undefined}
-            fallback={technician}
-            className="rounded-none"
-          />
-        ) : (
-          <RemoteSessionOrgLogo
-            name={party.organizationName}
-            logoUrl={party.organizationLogoUrl}
-            sizePx={48}
-            className="rounded-none border-0"
-          />
-        )}
-        <span className="flex h-9 w-12 items-center justify-center border-t border-ods-border bg-ods-card">
-          <Chevrons03LeftIcon size={24} />
-        </span>
-      </button>
-    );
-  },
-);
-RemoteSessionMinimizedChip.displayName = 'RemoteSessionMinimizedChip';

package/src/components/features/remote-session/remote-session-chat-panel.tsx

@@ -1,178 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import { cn } from '../../../utils/cn';
-import { MessageOffIcon, Send03Icon } from '../../icons-v2-generated';
-import { Button } from '../../ui/button/button';
-import { SquareAvatar } from '../../ui/square-avatar';
-import { RemoteSessionEndButton } from './remote-session-block';
-import {
-  REMOTE_SESSION_DRAG_HANDLE_CLASS,
-  RemoteSessionDragger,
-  RemoteSessionRecordingTag,
-} from './remote-session-parts';
-import type { RemoteSessionChatMessage, RemoteSessionDragHandlers, RemoteSessionParty } from './types';
-
-export interface RemoteSessionChatPanelProps {
-  party: RemoteSessionParty;
-  /** Elapsed session time, e.g. from `useRemoteSessionTimer`. */
-  elapsed: string;
-  messages: RemoteSessionChatMessage[];
-  showRecordingTag?: boolean;
-  /** The composer's text; owned by the host so it survives hiding the block. */
-  draft: string;
-  onDraftChange: (draft: string) => void;
-  /** Called with the trimmed text; the composer clears itself through `onDraftChange`. */
-  onSend: (text: string) => void;
-  /** False while the chat is still connecting: the composer is disabled. */
-  ready?: boolean;
-  error?: string | null;
-  onCloseChat: () => void;
-  onEndSession: () => void;
-  /** Makes the header and the dragger move the window. */
-  dragHandlers?: RemoteSessionDragHandlers;
-}
-
-function formatTime(at: Date): string {
-  return at.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
-}
-
-/** The chat with the technician inside the session block. */
-export function RemoteSessionChatPanel({
-  party,
-  elapsed,
-  messages,
-  showRecordingTag = false,
-  draft,
-  onDraftChange,
-  onSend,
-  ready = true,
-  error,
-  onCloseChat,
-  onEndSession,
-  dragHandlers,
-}: RemoteSessionChatPanelProps) {
-  const listRef = useRef<HTMLDivElement>(null);
-
-  // The list is the trigger: the newest row must come into view on every change.
-  useEffect(() => {
-    const list = listRef.current;
-    if (list) list.scrollTop = list.scrollHeight;
-  }, [messages]);
-
-  const handleSend = () => {
-    const text = draft.trim();
-    if (!text) return;
-    onSend(text);
-    onDraftChange('');
-  };
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col">
-      <div className="relative flex flex-col gap-[var(--spacing-system-m)] p-[var(--spacing-system-m)]">
-        <RemoteSessionDragger dragHandlers={dragHandlers} />
-        <div
-          className={cn(
-            'flex w-full flex-col pr-[var(--spacing-system-mf)]',
-            dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS,
-          )}
-          {...dragHandlers}
-        >
-          <p className="w-full truncate text-ods-text-primary text-h4">
-            Your IT support team is connected <span className="text-ods-text-secondary">({elapsed})</span>
-          </p>
-          <p className="w-full truncate text-ods-text-secondary text-h4">You can end this session at any time</p>
-        </div>
-        {showRecordingTag && <RemoteSessionRecordingTag />}
-        <div className="flex w-full items-stretch gap-[var(--spacing-system-m)]">
-          <Button
-            variant="outline"
-            fullWidth
-            leftIcon={<MessageOffIcon size={24} color="currentColor" />}
-            onClick={onCloseChat}
-          >
-            Close Chat
-          </Button>
-          <RemoteSessionEndButton onEndSession={onEndSession} />
-        </div>
-      </div>
-      <div
-        ref={listRef}
-        className="flex min-h-0 flex-1 flex-col overflow-y-auto bg-ods-card p-[var(--spacing-system-m)]"
-      >
-        {/* mt-auto (not justify-end) keeps the top of an overflowing list scrollable. */}
-        <div className="mt-auto flex flex-col gap-[var(--spacing-system-s)]">
-          {messages.map(message =>
-            message.author === 'system' ? (
-              <p key={message.id} className="w-full text-center text-ods-text-secondary text-h6">
-                {message.text}
-              </p>
-            ) : (
-              <RemoteSessionChatMessageRow key={message.id} message={message} party={party} />
-            ),
-          )}
-        </div>
-      </div>
-      {error && <p className="bg-ods-card px-[var(--spacing-system-m)] text-ods-error text-h6">{error}</p>}
-      <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();
-        }}
-      >
-        <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"
-        />
-        <button
-          type="submit"
-          aria-label="Send message"
-          disabled={!ready}
-          className="flex size-12 shrink-0 items-center justify-center"
-        >
-          <Send03Icon size={24} color="currentColor" className="text-ods-text-primary" />
-        </button>
-      </form>
-    </div>
-  );
-}
-
-function RemoteSessionChatMessageRow({
-  message,
-  party,
-}: {
-  message: RemoteSessionChatMessage;
-  party: RemoteSessionParty;
-}) {
-  const isTechnician = message.author === 'technician';
-  const technician = message.name ?? party.technicianName ?? 'Technician';
-  return (
-    <div className="flex w-full flex-col">
-      <div className="flex w-full items-center gap-[var(--spacing-system-xs)]">
-        {isTechnician && (
-          <SquareAvatar
-            variant="round"
-            sizePx={16}
-            src={party.technicianAvatarUrl ?? undefined}
-            fallback={technician}
-          />
-        )}
-        <span
-          className={cn(
-            'min-w-0 flex-1 truncate text-code',
-            isTechnician ? 'text-ods-accent' : 'text-ods-text-secondary',
-          )}
-        >
-          {isTechnician ? technician : 'User'}
-        </span>
-        <span className="shrink-0 text-ods-text-secondary text-h6">{formatTime(message.at)}</span>
-      </div>
-      <p className="w-full break-words text-ods-text-primary text-h6">{message.text}</p>
-    </div>
-  );
-}

package/src/components/features/remote-session/remote-session-dialog.tsx

@@ -1,77 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { Button } from '../../ui/button/button';
-import type { RemoteSessionDialogVariant } from './types';
-
-export interface RemoteSessionDialogProps {
-  variant: RemoteSessionDialogVariant;
-  /** Named in the "ended" and "connection lost" notices. */
-  organizationName: string;
-  /** End confirm: the end call is in flight. */
-  ending?: boolean;
-  /** End confirm: the user confirmed. */
-  onEndSession?: () => void;
-  /** Cancel (end confirm) or Close (the notices). */
-  onClose: () => void;
-}
-
-const NOTICE_COPY: Record<Exclude<RemoteSessionDialogVariant, 'end-confirm'>, { title: string; suffix: string }> = {
-  'session-ended': { title: 'Remote session ended', suffix: 'has disconnected from your device.' },
-  'connection-lost': { title: 'Connection lost', suffix: 'lost the connection to your device.' },
-};
-
-/** The session's terminal dialogs: the end confirm and the "it is over" notices. */
-export function RemoteSessionDialog({
-  variant,
-  organizationName,
-  ending = false,
-  onEndSession,
-  onClose,
-}: RemoteSessionDialogProps) {
-  if (variant === 'end-confirm') {
-    return (
-      <DialogCard>
-        <div className="flex w-full flex-col gap-[var(--spacing-system-xs)]">
-          <h1 className="w-full text-ods-text-primary text-h2">End remote session?</h1>
-          <p className="w-full text-ods-text-primary text-h4">
-            The technician will lose access to your device immediately.
-          </p>
-        </div>
-        <div className="flex w-full items-stretch gap-[var(--spacing-system-l)]">
-          <Button variant="outline" fullWidth disabled={ending} onClick={onClose}>
-            Cancel
-          </Button>
-          <Button variant="destructive" fullWidth loading={ending} onClick={onEndSession}>
-            End Session
-          </Button>
-        </div>
-      </DialogCard>
-    );
-  }
-
-  const copy = NOTICE_COPY[variant];
-  return (
-    <DialogCard>
-      <div className="flex w-full flex-col gap-[var(--spacing-system-xs)]">
-        <h1 className="w-full text-ods-text-primary text-h2">{copy.title}</h1>
-        <p className="w-full text-ods-text-primary text-h4">
-          <span className="text-ods-accent">{organizationName}</span> {copy.suffix}
-        </p>
-      </div>
-      <div className="flex w-full justify-end">
-        <Button variant="outline" className="w-1/2" onClick={onClose}>
-          Close
-        </Button>
-      </div>
-    </DialogCard>
-  );
-}
-
-function DialogCard({ children }: { children: ReactNode }) {
-  return (
-    <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}
-    </div>
-  );
-}

package/src/components/features/remote-session/remote-session-overlay.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { cn } from '../../../utils/cn';
-import { MonitorOffIcon } from '../../icons-v2-generated';
-
-/*
- * The always-visible "your screen is being controlled" indicator: a border
- * around the screen and an End Session pill hanging from its top edge.
- * The colour is the ODS warning token, not the accent: the accent follows
- * tenant branding, and this indicator must stay a recognisable fixed yellow.
- */
-
-/** The warning-yellow frame drawn around a whole screen; it never takes pointer events. */
-export function RemoteSessionBorder({ className }: { className?: string }) {
-  return <div className={cn('pointer-events-none size-full border-4 border-ods-warning', className)} />;
-}
-
-/**
- * The End Session pill. It sits flush against the top edge of the screen, so
- * only its bottom corners are rounded and it reads as one piece with the border.
- */
-export function RemoteSessionPill({ onEndSession }: { onEndSession: () => void }) {
-  return (
-    <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}
-    >
-      <MonitorOffIcon size={24} color="currentColor" />
-      <span className="whitespace-nowrap text-h3">End Session</span>
-    </button>
-  );
-}

package/src/components/features/remote-session/remote-session-parts.tsx

@@ -1,138 +0,0 @@
-'use client';
-
-import { type CSSProperties, type ReactNode, useEffect, useState } from 'react';
-import { cn } from '../../../utils/cn';
-import { DraggerIcon, RecordingIcon } from '../../icons-v2-generated';
-import { OpenFrameLogo } from '../../icons/openframe-logo';
-import { SquareAvatar } from '../../ui/square-avatar';
-import type { RemoteSessionDragHandlers } from './types';
-
-/**
- * The remote session surfaces are fixed-size desktop windows (440 / 600 px
- * wide), so the responsive ODS scale would step their typography and spacing
- * down to the mobile values below the 800 px breakpoint. The scope pins the
- * scale to its desktop values; everything inside keeps the regular utilities.
- */
-const 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',
-} as CSSProperties;
-
-export interface RemoteSessionScopeProps {
-  children: ReactNode;
-  className?: string;
-}
-
-/**
- * Root of every remote session surface: the desktop type and spacing scale,
- * and the OpenFrame brand whatever the host app's tenant branding is - the
- * "you are being helped" surfaces are OpenFrame-branded by design.
- */
-export function RemoteSessionScope({ children, className }: RemoteSessionScopeProps) {
-  return (
-    <div data-app-type="openframe" style={DESKTOP_SCALE} className={className}>
-      {children}
-    </div>
-  );
-}
-
-export interface RemoteSessionOrgLogoProps {
-  name: string;
-  logoUrl?: string | null;
-  /** Width and height in px. */
-  sizePx: number;
-  className?: string;
-}
-
-/** Organization logo tile; the OpenFrame mark when there is no logo. */
-export function RemoteSessionOrgLogo({ name, logoUrl, sizePx, className }: RemoteSessionOrgLogoProps) {
-  if (logoUrl) {
-    return (
-      <SquareAvatar
-        variant="square"
-        fit="contain"
-        sizePx={sizePx}
-        src={logoUrl}
-        alt={name}
-        fallback={name}
-        className={cn('shrink-0 rounded-md border border-ods-border bg-ods-card', className)}
-      />
-    );
-  }
-  return (
-    <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,
-      )}
-    >
-      <OpenFrameLogo className="size-1/2" />
-    </div>
-  );
-}
-
-/** The green SESSION RECORDING tag. */
-export function RemoteSessionRecordingTag() {
-  return (
-    <div className="flex h-8 items-center gap-[var(--spacing-system-xs)] self-start rounded-md bg-ods-success-secondary p-[var(--spacing-system-xsf)]">
-      <RecordingIcon size={16} color="currentColor" className="text-ods-success" />
-      <span className="text-ods-success text-h5">Session Recording</span>
-    </div>
-  );
-}
-
-/** Grab cursor on the surfaces the window is moved by. */
-export const REMOTE_SESSION_DRAG_HANDLE_CLASS = 'cursor-grab active:cursor-grabbing';
-
-/** The dragger glyph in the top-right corner of a block header: the visible handle for moving it. */
-export function RemoteSessionDragger({ dragHandlers }: { dragHandlers?: RemoteSessionDragHandlers }) {
-  return (
-    <span
-      aria-hidden
-      className={cn(
-        'absolute right-[var(--spacing-system-xsf)] top-[var(--spacing-system-xsf)] text-ods-text-secondary',
-        dragHandlers && REMOTE_SESSION_DRAG_HANDLE_CLASS,
-      )}
-      {...dragHandlers}
-    >
-      <DraggerIcon size={24} color="currentColor" />
-    </span>
-  );
-}
-
-/** `m:ss` for an elapsed duration; `h:mm:ss` from the first hour on. */
-export function formatRemoteSessionElapsed(elapsedMs: number): string {
-  const total = Math.max(0, Math.floor(elapsedMs / 1000));
-  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}`;
-}
-
-/** The session's elapsed time since `startedAt` (ISO), ticking once a second. */
-export function useRemoteSessionTimer(startedAt: string): string {
-  const [nowMs, setNowMs] = useState(() => Date.now());
-  useEffect(() => {
-    const timer = setInterval(() => setNowMs(Date.now()), 1_000);
-    return () => clearInterval(timer);
-  }, []);
-  return formatRemoteSessionElapsed(nowMs - Date.parse(startedAt));
-}

package/src/components/features/remote-session/types.ts

@@ -1,41 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-/**
- * Who is on the other end of a remote session, as the end user's surfaces show
- * it: the organization always, the technician when the backend names one.
- */
-export interface RemoteSessionParty {
-  organizationName: string;
-  organizationLogoUrl?: string | null;
-  /** Shown under the organization name; offered as a link only when it is https. */
-  organizationSiteUrl?: string | null;
-  /** Present for the technician variant of the session block; the organization variant otherwise. */
-  technicianName?: string | null;
-  technicianAvatarUrl?: string | null;
-}
-
-/** The end user's answer to a remote access request. */
-export type RemoteAccessDecision = 'APPROVED' | 'DENIED';
-
-export type RemoteSessionChatAuthor = 'technician' | 'user' | 'system';
-
-export interface RemoteSessionChatMessage {
-  id: string;
-  author: RemoteSessionChatAuthor;
-  /** The technician's display name on their rows; the party's technician otherwise. */
-  name?: string | null;
-  text: string;
-  at: Date;
-}
-
-/** The terminal dialogs of a session: the end confirm and the two "it is over" notices. */
-export type RemoteSessionDialogVariant = 'end-confirm' | 'session-ended' | 'connection-lost';
-
-/**
- * Pointer handlers a host attaches to the surfaces the user moves the window
- * by (the desktop chat starts a native window drag from them).
- */
-export type RemoteSessionDragHandlers = Pick<
-  HTMLAttributes<HTMLElement>,
-  'onPointerDown' | 'onPointerMove' | 'onPointerUp'
->;