@anvia/react-ui 1.3.0 → 1.3.1

package/dist/sandbox-desktop/index.js

@@ -1,356 +1,358 @@
-import {
-  DefaultStatus,
-  RelayConnection,
-  resolveTicket,
-  ticketSubprotocolPrefix
-} from "../chunk-5FZKTDZR.js";
-
-// src/sandbox-desktop/desktop.tsx
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState
-} from "react";
-
+import { i as DefaultStatus, n as ticketSubprotocolPrefix, r as resolveTicket, t as RelayConnection } from "../connection-DeNq8wHS.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 // src/sandbox-desktop/vnc-channel.ts
-var OPEN = 1;
-var CLOSED = 3;
+const OPEN = 1;
+const CLOSED = 3;
+/**
+* A WebSocket-shaped channel for noVNC to attach to. The hub's desktop relay mixes binary VNC frames
+* with JSON control frames on one socket, and noVNC understands only the former, so the link
+* hands this channel just the binary ones.
+*
+* The VNC server speaks first, so frames can arrive before noVNC has attached. They wait here
+* until it installs its `onmessage`.
+*
+* noVNC checks a channel for these property names (`send`, `close`, `binaryType`, `onerror`,
+* `onmessage`, `onopen`, `protocol`, `readyState`), as it does for a WebSocket or an
+* RTCDataChannel, so they must all be present.
+*/
 var VncChannel = class {
-  constructor(link, protocol = "") {
-    this.link = link;
-    this.protocol = protocol;
-  }
-  link;
-  binaryType = "arraybuffer";
-  protocol;
-  onerror = null;
-  onopen = null;
-  onclose = null;
-  handler = null;
-  backlog = [];
-  state = OPEN;
-  get readyState() {
-    return this.state;
-  }
-  get onmessage() {
-    return this.handler;
-  }
-  set onmessage(handler) {
-    this.handler = handler;
-    if (handler === null) return;
-    for (const data of this.backlog.splice(0)) handler({ data });
-  }
-  send(data) {
-    if (this.state === OPEN) this.link.send(data);
-  }
-  /** noVNC is done with the connection. */
-  close() {
-    if (this.state !== OPEN) return;
-    this.state = CLOSED;
-    this.link.close();
-  }
-  /** A VNC frame arrived from the relay. */
-  receive(data) {
-    if (this.handler === null) this.backlog.push(data);
-    else this.handler({ data });
-  }
-  /** The relay closed the socket. */
-  closed(event) {
-    if (this.state === CLOSED) return;
-    this.state = CLOSED;
-    this.backlog = [];
-    this.onclose?.(event);
-  }
+	link;
+	binaryType = "arraybuffer";
+	protocol;
+	onerror = null;
+	onopen = null;
+	onclose = null;
+	handler = null;
+	backlog = [];
+	state = OPEN;
+	constructor(link, protocol = "") {
+		this.link = link;
+		this.protocol = protocol;
+	}
+	get readyState() {
+		return this.state;
+	}
+	get onmessage() {
+		return this.handler;
+	}
+	set onmessage(handler) {
+		this.handler = handler;
+		if (handler === null) return;
+		for (const data of this.backlog.splice(0)) handler({ data });
+	}
+	send(data) {
+		if (this.state === OPEN) this.link.send(data);
+	}
+	/** noVNC is done with the connection. */
+	close() {
+		if (this.state !== OPEN) return;
+		this.state = CLOSED;
+		this.link.close();
+	}
+	/** A VNC frame arrived from the relay. */
+	receive(data) {
+		if (this.handler === null) this.backlog.push(data);
+		else this.handler({ data });
+	}
+	/** The relay closed the socket. */
+	closed(event) {
+		if (this.state === CLOSED) return;
+		this.state = CLOSED;
+		this.backlog = [];
+		this.onclose?.(event);
+	}
 };
-
 // src/sandbox-desktop/connection.ts
-var desktopSubprotocol = "anvia.desktop.v1";
-var retryableCodes = /* @__PURE__ */ new Set(["sandbox_unavailable", "timeout"]);
-var closeReason = /^([a-z_]+): (.*)$/s;
-var policyViolation = 1008;
+/** Subprotocol the hub's `handleDesktopUpgrade` selects. */
+const desktopSubprotocol = "anvia.desktop.v1";
+/** Errors worth another attempt: the sandbox may simply not be reachable yet. */
+const retryableCodes = /* @__PURE__ */ new Set(["sandbox_unavailable", "timeout"]);
+/** The hub closes a socket it could not set up with `<error code>: <message>`. */
+const closeReason = /^([a-z_]+): (.*)$/s;
+/** The relay closes with this code when the viewer sent something it could not account for. */
+const policyViolation = 1008;
+/**
+* One browser link to the hub's desktop relay, over a {@link RelayConnection}. It hands each
+* accepted attachment to the owner as a channel for a VNC client, and speaks the relay's small
+* JSON control protocol (`takeover`, `release`, and the `control` updates that come back).
+*/
 var DesktopConnection = class {
-  relay;
-  constructor(options) {
-    let channel;
-    let accepted = false;
-    const protocol = {
-      subprotocol: desktopSubprotocol,
-      label: "desktop",
-      open: (socket) => {
-        accepted = false;
-        channel = new VncChannel(
-          { send: (data) => socket.send(data), close: () => socket.close(1e3) },
-          socket.protocol
-        );
-      },
-      message: (event, session) => {
-        if (!accepted && channel !== void 0) {
-          accepted = true;
-          options.onChannel(channel, session.ready());
-        }
-        if (typeof event.data !== "string") {
-          channel?.receive(event.data);
-          return;
-        }
-        const message = parseText(event.data);
-        if (message?.type === "control") {
-          const { type: _type, ...control } = message;
-          options.onControl(control);
-        } else if (message?.type === "error") {
-          options.onNotice?.({
-            code: message.code ?? "protocol",
-            message: message.message ?? "The request failed."
-          });
-        }
-      },
-      close: (event, session) => {
-        channel?.closed(event);
-        const match = closeReason.exec(event.reason);
-        if (match !== null && !retryableCodes.has(match[1] ?? "")) {
-          session.fatal(match[2] ?? "The desktop could not be opened.");
-        } else if (event.code === policyViolation) {
-          session.fatal(event.reason || "The desktop relay refused what the viewer sent.");
-        }
-      }
-    };
-    this.relay = new RelayConnection({
-      url: options.url,
-      getTicket: options.getTicket,
-      onStatus: options.onStatus,
-      reconnect: options.reconnect,
-      protocol
-    });
-  }
-  start() {
-    this.relay.start();
-  }
-  retry() {
-    this.relay.retry();
-  }
-  /** Ask for control, which pauses the agent's inputs. The answer arrives as a `control` update. */
-  takeOver() {
-    this.relay.sendJson({ type: "takeover" });
-  }
-  release() {
-    this.relay.sendJson({ type: "release" });
-  }
-  dispose() {
-    this.relay.dispose();
-  }
+	relay;
+	constructor(options) {
+		let channel;
+		let accepted = false;
+		const protocol = {
+			subprotocol: desktopSubprotocol,
+			label: "desktop",
+			open: (socket) => {
+				accepted = false;
+				channel = new VncChannel({
+					send: (data) => socket.send(data),
+					close: () => socket.close(1e3)
+				}, socket.protocol);
+			},
+			message: (event, session) => {
+				if (!accepted && channel !== void 0) {
+					accepted = true;
+					options.onChannel(channel, session.ready());
+				}
+				if (typeof event.data !== "string") {
+					channel?.receive(event.data);
+					return;
+				}
+				const message = parseText(event.data);
+				if (message?.type === "control") {
+					const { type: _type, ...control } = message;
+					options.onControl(control);
+				} else if (message?.type === "error") options.onNotice?.({
+					code: message.code ?? "protocol",
+					message: message.message ?? "The request failed."
+				});
+			},
+			close: (event, session) => {
+				channel?.closed(event);
+				const match = closeReason.exec(event.reason);
+				if (match !== null && !retryableCodes.has(match[1] ?? "")) session.fatal(match[2] ?? "The desktop could not be opened.");
+				else if (event.code === policyViolation) session.fatal(event.reason || "The desktop relay refused what the viewer sent.");
+			}
+		};
+		this.relay = new RelayConnection({
+			url: options.url,
+			getTicket: options.getTicket,
+			onStatus: options.onStatus,
+			reconnect: options.reconnect,
+			protocol
+		});
+	}
+	start() {
+		this.relay.start();
+	}
+	retry() {
+		this.relay.retry();
+	}
+	/** Ask for control, which pauses the agent's inputs. The answer arrives as a `control` update. */
+	takeOver() {
+		this.relay.sendJson({ type: "takeover" });
+	}
+	release() {
+		this.relay.sendJson({ type: "release" });
+	}
+	dispose() {
+		this.relay.dispose();
+	}
 };
 function parseText(text) {
-  try {
-    const value = JSON.parse(text);
-    if (typeof value !== "object" || value === null) return void 0;
-    const type = value.type;
-    return type === "control" || type === "error" ? value : void 0;
-  } catch {
-    return void 0;
-  }
+	try {
+		const value = JSON.parse(text);
+		if (typeof value !== "object" || value === null) return void 0;
+		const type = value.type;
+		return type === "control" || type === "error" ? value : void 0;
+	} catch {
+		return;
+	}
 }
-
 // src/sandbox-desktop/desktop.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var defaultQualityLevel = 6;
-var defaultCompressionLevel = 2;
+const defaultQualityLevel = 6;
+const defaultCompressionLevel = 2;
+/** A level noVNC accepts: a whole number from 0 to 9. Anything else falls back to the default. */
 function level(value, fallback) {
-  if (value === void 0 || !Number.isFinite(value)) return fallback;
-  return Math.min(9, Math.max(0, Math.round(value)));
+	if (value === void 0 || !Number.isFinite(value)) return fallback;
+	return Math.min(9, Math.max(0, Math.round(value)));
 }
-var rootStyle = { position: "relative", width: "100%", height: "100%" };
-var screenStyle = { width: "100%", height: "100%" };
-var SandboxDesktop = forwardRef(
-  function SandboxDesktop2({
-    url,
-    ticket,
-    readOnly = false,
-    scaleToFit = true,
-    qualityLevel,
-    compressionLevel,
-    reconnect,
-    onStatusChange,
-    onControlChange,
-    renderStatus,
-    renderControls,
-    style,
-    ...rest
-  }, ref) {
-    const screen = useRef(null);
-    const connection = useRef(void 0);
-    const viewer = useRef(void 0);
-    const [status, setStatus] = useState({ state: "loading" });
-    const [control, setControl] = useState(void 0);
-    const [notice, setNotice] = useState(void 0);
-    const viewOnly = readOnly || control?.readOnly === true || control?.you !== true;
-    const latest = useRef({
-      ticket,
-      reconnect,
-      onStatusChange,
-      onControlChange,
-      scaleToFit,
-      viewOnly,
-      quality: level(qualityLevel, defaultQualityLevel),
-      compression: level(compressionLevel, defaultCompressionLevel)
-    });
-    latest.current = {
-      ticket,
-      reconnect,
-      onStatusChange,
-      onControlChange,
-      scaleToFit,
-      viewOnly,
-      quality: level(qualityLevel, defaultQualityLevel),
-      compression: level(compressionLevel, defaultCompressionLevel)
-    };
-    useImperativeHandle(
-      ref,
-      () => ({
-        focus: () => viewer.current?.focus(),
-        reconnect: () => connection.current?.retry(),
-        takeOver: () => connection.current?.takeOver(),
-        release: () => connection.current?.release()
-      }),
-      []
-    );
-    useEffect(() => {
-      if (viewer.current !== void 0) viewer.current.viewOnly = viewOnly;
-    }, [viewOnly]);
-    useEffect(() => {
-      if (viewer.current !== void 0) viewer.current.scaleViewport = scaleToFit;
-    }, [scaleToFit]);
-    useEffect(() => {
-      if (viewer.current !== void 0) viewer.current.qualityLevel = latest.current.quality;
-    }, [qualityLevel]);
-    useEffect(() => {
-      if (viewer.current !== void 0) {
-        viewer.current.compressionLevel = latest.current.compression;
-      }
-    }, [compressionLevel]);
-    useEffect(() => {
-      const container = screen.current;
-      if (container === null) return void 0;
-      let disposed = false;
-      let teardown;
-      const publish = (next) => {
-        if (disposed) return;
-        setStatus(next);
-        if (next.state !== "open") setControl(void 0);
-        latest.current.onStatusChange?.(next);
-      };
-      publish({ state: "loading" });
-      void (async () => {
-        const { default: Rfb } = await import("@novnc/novnc");
-        if (disposed) return;
-        const link = new DesktopConnection({
-          url,
-          getTicket: resolveTicket(() => latest.current.ticket),
-          reconnect: latest.current.reconnect,
-          onStatus: publish,
-          onChannel: (channel) => {
-            viewer.current?.disconnect();
-            const rfb = new Rfb(container, channel);
-            rfb.scaleViewport = latest.current.scaleToFit;
-            rfb.clipViewport = false;
-            rfb.resizeSession = false;
-            rfb.viewOnly = latest.current.viewOnly;
-            rfb.qualityLevel = latest.current.quality;
-            rfb.compressionLevel = latest.current.compression;
-            viewer.current = rfb;
-          },
-          onControl: (next) => {
-            if (disposed) return;
-            setControl(next);
-            setNotice(void 0);
-            latest.current.onControlChange?.(next);
-          },
-          onNotice: (next) => {
-            if (!disposed) setNotice(next);
-          }
-        });
-        connection.current = link;
-        link.start();
-        teardown = () => {
-          link.dispose();
-          viewer.current?.disconnect();
-          viewer.current = void 0;
-          connection.current = void 0;
-        };
-      })().catch((error) => {
-        publish({
-          state: "failed",
-          message: error instanceof Error ? error.message : "Could not load the desktop viewer."
-        });
-      });
-      return () => {
-        disposed = true;
-        teardown?.();
-      };
-    }, [url]);
-    const retry = () => connection.current?.retry();
-    const takeOver = () => connection.current?.takeOver();
-    const release = () => connection.current?.release();
-    const statusNode = renderStatus === void 0 ? /* @__PURE__ */ jsx(DefaultStatus, { status, retry }) : renderStatus(status, retry);
-    const controlsState = {
-      status,
-      control,
-      readOnly: readOnly || control?.readOnly === true,
-      notice,
-      takeOver,
-      release
-    };
-    const controlsNode = renderControls === void 0 ? /* @__PURE__ */ jsx(DefaultControls, { ...controlsState }) : renderControls(controlsState);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ...rest,
-        "data-state": status.state,
-        "data-readonly": viewOnly ? "" : void 0,
-        "data-control": control?.you === true ? "you" : control?.held === true ? "other" : "none",
-        style: { ...rootStyle, ...style },
-        children: [
-          /* @__PURE__ */ jsx("div", { ref: screen, style: screenStyle }),
-          controlsNode,
-          statusNode
-        ]
-      }
-    );
-  }
-);
-var controlsStyle = {
-  position: "absolute",
-  top: 8,
-  left: 8,
-  zIndex: 1,
-  display: "flex",
-  gap: 8,
-  alignItems: "center",
-  padding: "2px 8px",
-  borderRadius: 4,
-  fontSize: 12,
-  background: "rgba(0, 0, 0, 0.7)",
-  color: "#fff"
+const rootStyle = {
+	position: "relative",
+	width: "100%",
+	height: "100%"
 };
-function DefaultControls({
-  status,
-  control,
-  readOnly,
-  notice,
-  takeOver,
-  release
-}) {
-  if (status.state !== "open" || control === void 0) return null;
-  const who = control.you ? "You have control" : control.held ? `${control.holder ?? "Someone"} has control` : readOnly ? "View only" : "The agent has control";
-  return /* @__PURE__ */ jsxs("div", { "data-sandbox-desktop-controls": "", style: controlsStyle, children: [
-    /* @__PURE__ */ jsx("span", { children: who }),
-    control.you ? /* @__PURE__ */ jsx("button", { type: "button", onClick: release, children: "Release" }) : !readOnly && !control.held ? /* @__PURE__ */ jsx("button", { type: "button", onClick: takeOver, children: "Take over" }) : null,
-    notice === void 0 ? null : /* @__PURE__ */ jsx("span", { role: "alert", children: notice.message })
-  ] });
-}
-export {
-  SandboxDesktop,
-  desktopSubprotocol,
-  ticketSubprotocolPrefix
+const screenStyle = {
+	width: "100%",
+	height: "100%"
+};
+/**
+* A viewer for a remote sandbox's desktop, drawn with noVNC. noVNC is loaded on demand, so it costs
+* nothing until a desktop mounts. It connects to the hub's desktop relay, reconnects with a fresh
+* ticket when the link drops, and lets a person take over control from the agent.
+*/
+const SandboxDesktop = forwardRef(function SandboxDesktop({ url, ticket, readOnly = false, scaleToFit = true, qualityLevel, compressionLevel, reconnect, onStatusChange, onControlChange, renderStatus, renderControls, style, ...rest }, ref) {
+	const screen = useRef(null);
+	const connection = useRef(void 0);
+	const viewer = useRef(void 0);
+	const [status, setStatus] = useState({ state: "loading" });
+	const [control, setControl] = useState(void 0);
+	const [notice, setNotice] = useState(void 0);
+	const viewOnly = readOnly || control?.readOnly === true || control?.you !== true;
+	const latest = useRef({
+		ticket,
+		reconnect,
+		onStatusChange,
+		onControlChange,
+		scaleToFit,
+		viewOnly,
+		quality: level(qualityLevel, defaultQualityLevel),
+		compression: level(compressionLevel, defaultCompressionLevel)
+	});
+	latest.current = {
+		ticket,
+		reconnect,
+		onStatusChange,
+		onControlChange,
+		scaleToFit,
+		viewOnly,
+		quality: level(qualityLevel, defaultQualityLevel),
+		compression: level(compressionLevel, defaultCompressionLevel)
+	};
+	useImperativeHandle(ref, () => ({
+		focus: () => viewer.current?.focus(),
+		reconnect: () => connection.current?.retry(),
+		takeOver: () => connection.current?.takeOver(),
+		release: () => connection.current?.release()
+	}), []);
+	useEffect(() => {
+		if (viewer.current !== void 0) viewer.current.viewOnly = viewOnly;
+	}, [viewOnly]);
+	useEffect(() => {
+		if (viewer.current !== void 0) viewer.current.scaleViewport = scaleToFit;
+	}, [scaleToFit]);
+	useEffect(() => {
+		if (viewer.current !== void 0) viewer.current.qualityLevel = latest.current.quality;
+	}, [qualityLevel]);
+	useEffect(() => {
+		if (viewer.current !== void 0) viewer.current.compressionLevel = latest.current.compression;
+	}, [compressionLevel]);
+	useEffect(() => {
+		const container = screen.current;
+		if (container === null) return void 0;
+		let disposed = false;
+		let teardown;
+		const publish = (next) => {
+			if (disposed) return;
+			setStatus(next);
+			if (next.state !== "open") setControl(void 0);
+			latest.current.onStatusChange?.(next);
+		};
+		publish({ state: "loading" });
+		(async () => {
+			const { default: Rfb } = await import("@novnc/novnc");
+			if (disposed) return;
+			const link = new DesktopConnection({
+				url,
+				getTicket: resolveTicket(() => latest.current.ticket),
+				reconnect: latest.current.reconnect,
+				onStatus: publish,
+				onChannel: (channel) => {
+					viewer.current?.disconnect();
+					const rfb = new Rfb(container, channel);
+					rfb.scaleViewport = latest.current.scaleToFit;
+					rfb.clipViewport = false;
+					rfb.resizeSession = false;
+					rfb.viewOnly = latest.current.viewOnly;
+					rfb.qualityLevel = latest.current.quality;
+					rfb.compressionLevel = latest.current.compression;
+					viewer.current = rfb;
+				},
+				onControl: (next) => {
+					if (disposed) return;
+					setControl(next);
+					setNotice(void 0);
+					latest.current.onControlChange?.(next);
+				},
+				onNotice: (next) => {
+					if (!disposed) setNotice(next);
+				}
+			});
+			connection.current = link;
+			link.start();
+			teardown = () => {
+				link.dispose();
+				viewer.current?.disconnect();
+				viewer.current = void 0;
+				connection.current = void 0;
+			};
+		})().catch((error) => {
+			publish({
+				state: "failed",
+				message: error instanceof Error ? error.message : "Could not load the desktop viewer."
+			});
+		});
+		return () => {
+			disposed = true;
+			teardown?.();
+		};
+	}, [url]);
+	const retry = () => connection.current?.retry();
+	const takeOver = () => connection.current?.takeOver();
+	const release = () => connection.current?.release();
+	const statusNode = renderStatus === void 0 ? /* @__PURE__ */ jsx(DefaultStatus, {
+		status,
+		retry
+	}) : renderStatus(status, retry);
+	const controlsState = {
+		status,
+		control,
+		readOnly: readOnly || control?.readOnly === true,
+		notice,
+		takeOver,
+		release
+	};
+	const controlsNode = renderControls === void 0 ? /* @__PURE__ */ jsx(DefaultControls, { ...controlsState }) : renderControls(controlsState);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		"data-state": status.state,
+		"data-readonly": viewOnly ? "" : void 0,
+		"data-control": control?.you === true ? "you" : control?.held === true ? "other" : "none",
+		style: {
+			...rootStyle,
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: screen,
+				style: screenStyle
+			}),
+			controlsNode,
+			statusNode
+		]
+	});
+});
+const controlsStyle = {
+	position: "absolute",
+	top: 8,
+	left: 8,
+	zIndex: 1,
+	display: "flex",
+	gap: 8,
+	alignItems: "center",
+	padding: "2px 8px",
+	borderRadius: 4,
+	fontSize: 12,
+	background: "rgba(0, 0, 0, 0.7)",
+	color: "#fff"
 };
+function DefaultControls({ status, control, readOnly, notice, takeOver, release }) {
+	if (status.state !== "open" || control === void 0) return null;
+	const who = control.you ? "You have control" : control.held ? `${control.holder ?? "Someone"} has control` : readOnly ? "View only" : "The agent has control";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-sandbox-desktop-controls": "",
+		style: controlsStyle,
+		children: [
+			/* @__PURE__ */ jsx("span", { children: who }),
+			control.you ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: release,
+				children: "Release"
+			}) : !readOnly && !control.held ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: takeOver,
+				children: "Take over"
+			}) : null,
+			notice === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				role: "alert",
+				children: notice.message
+			})
+		]
+	});
+}
+export { SandboxDesktop, desktopSubprotocol, ticketSubprotocolPrefix };
+
 //# sourceMappingURL=index.js.map