@omercnet/paseo-shared-browser 1.2.2 → 2.0.0

package/client/browser-control-button.tsx

@@ -0,0 +1,109 @@
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useCallback, useState } from "react";
+import { Pressable, Text, type TextStyle, type ViewStyle } from "react-native";
+
+import { setBrowserControlTooltip } from "./browser-control-tooltip-web";
+
+type Theme = PluginWorkspacePanelProps["theme"];
+
+export interface ControlButtonStyles {
+  button: ViewStyle;
+  buttonSelected: ViewStyle;
+  buttonPrimary: ViewStyle;
+  buttonDanger: ViewStyle;
+  buttonHovered: ViewStyle;
+  buttonPressed: ViewStyle;
+  buttonFocused: ViewStyle;
+  buttonDisabled: ViewStyle;
+  buttonLarge: ViewStyle;
+  buttonFill: ViewStyle;
+  buttonPad?: ViewStyle;
+  buttonIconOnly?: ViewStyle;
+  buttonText: TextStyle;
+  buttonTextSelected: TextStyle;
+}
+
+interface ControlButtonProps {
+  styles: ControlButtonStyles;
+  theme: Theme;
+  label: string;
+  accessibilityLabel?: string;
+  icon?: string;
+  selected?: boolean;
+  primary?: boolean;
+  danger?: boolean;
+  large?: boolean;
+  fill?: boolean;
+  pad?: boolean;
+  iconOnly?: boolean;
+  disabled?: boolean;
+  onPress(): void;
+}
+
+/** Render the shared control geometry and theme states for browser actions. */
+export function ControlButton({
+  styles,
+  theme,
+  label,
+  accessibilityLabel,
+  icon,
+  selected = false,
+  primary = false,
+  danger = false,
+  large = false,
+  fill = false,
+  pad = false,
+  iconOnly = false,
+  disabled = false,
+  onPress,
+}: ControlButtonProps) {
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const highlighted = selected || primary;
+  const tooltipRef = useCallback(
+    (node: unknown) => setBrowserControlTooltip(node, accessibilityLabel ?? label),
+    [accessibilityLabel, label],
+  );
+  return (
+    <Pressable
+      ref={iconOnly ? tooltipRef : undefined}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={{ disabled, selected }}
+      disabled={disabled}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.button,
+        iconOnly ? styles.buttonIconOnly : null,
+        selected ? styles.buttonSelected : null,
+        primary ? styles.buttonPrimary : null,
+        danger ? styles.buttonDanger : null,
+        hovered && !highlighted ? styles.buttonHovered : null,
+        pressed ? styles.buttonPressed : null,
+        focused ? styles.buttonFocused : null,
+        disabled ? styles.buttonDisabled : null,
+        large || pad ? styles.buttonLarge : null,
+        fill ? styles.buttonFill : null,
+        pad ? styles.buttonPad : null,
+      ]}
+    >
+      {icon ? (
+        <Icon
+          name={icon}
+          size={15}
+          color={highlighted ? theme.colors.accentForeground : theme.colors.foregroundMuted}
+        />
+      ) : null}
+      {iconOnly ? null : (
+        <Text style={[styles.buttonText, highlighted ? styles.buttonTextSelected : null]}>
+          {label}
+        </Text>
+      )}
+    </Pressable>
+  );
+}

package/client/browser-control-dialog.tsx

@@ -0,0 +1,71 @@
+/** Confirm a one-time control request before the selected tab action continues. */
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { Icon, Modal } from "@getpaseo/plugin/client/react-native";
+import type { BrowserState } from "../shared/browser";
+import { ControlButton } from "./browser-chrome";
+import type { ControlRequest } from "./browser-control-request";
+import { BrowserDialogBody } from "./browser-dialog-body";
+import type { createStyles } from "./browser-panel-styles";
+
+/** Explicitly name a displaced controller while preserving the original action. */
+export function BrowserControlDialog({
+  styles,
+  theme,
+  state,
+  request,
+  pending,
+  available,
+  onCancel,
+  onConfirm,
+}: {
+  styles: ReturnType<typeof createStyles>;
+  theme: PluginWorkspacePanelProps["theme"];
+  state: BrowserState | null;
+  request: ControlRequest | null;
+  pending: boolean;
+  available: boolean;
+  onCancel(): void;
+  onConfirm(): void;
+}) {
+  const takeover = state?.controller === "other";
+  return (
+    <Modal
+      title={takeover ? "Take over control?" : "Take control?"}
+      icon={<Icon name="MousePointer2" size={18} color={theme.colors.foreground} />}
+      open={request !== null}
+      onOpenChange={(open) => {
+        if (!open && !pending) onCancel();
+      }}
+    >
+      <Modal.Content>
+        <BrowserDialogBody
+          styles={styles}
+          actions={
+            <>
+              <ControlButton
+                styles={styles}
+                theme={theme}
+                label="Cancel"
+                disabled={pending}
+                onPress={onCancel}
+              />
+              <ControlButton
+                styles={styles}
+                theme={theme}
+                label={takeover ? "Take over" : "Take control"}
+                primary
+                disabled={pending || !request || !available}
+                onPress={onConfirm}
+              />
+            </>
+          }
+        >
+          {takeover
+            ? `${state?.controllerLabel ?? "Another viewer"} controls this tab. Taking over will interrupt their input. `
+            : "This tab is in observation mode. "}
+          Take control to {request?.label}.
+        </BrowserDialogBody>
+      </Modal.Content>
+    </Modal>
+  );
+}

package/client/browser-control-request.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import type { BrowserState } from "../shared/browser";
+import { controlRequestBasis, isControlRequestCurrent } from "./browser-control-request";
+
+const state = {
+  tabId: "tab-one",
+  sessionId: "session-one",
+  navigationGeneration: 4,
+  viewportGeneration: 2,
+} as BrowserState;
+
+describe("browser control request identity", () => {
+  it("accepts only the original viewer, tab, page, and controller observation", () => {
+    const basis = controlRequestBasis("host/workspace", "viewer-one", state, 7);
+    const current = (next: BrowserState, revision = 7) =>
+      isControlRequestCurrent(basis, "host/workspace", "viewer-one", next, revision);
+
+    expect(current(state)).toBe(true);
+    expect(isControlRequestCurrent(basis, "other/workspace", "viewer-one", state, 7)).toBe(false);
+    expect(isControlRequestCurrent(basis, "host/workspace", "viewer-two", state, 7)).toBe(false);
+    expect(current({ ...state, tabId: "tab-two" })).toBe(false);
+    expect(current({ ...state, sessionId: "session-two" })).toBe(false);
+    expect(current({ ...state, navigationGeneration: 5 })).toBe(false);
+    expect(current({ ...state, viewportGeneration: 3 })).toBe(false);
+    expect(current(state, 8)).toBe(false);
+  });
+});

package/client/browser-control-request.ts

@@ -0,0 +1,57 @@
+/** Identity fence for a control request made from a specific visible page. */
+import type { BrowserState } from "../shared/browser";
+
+export interface ControlRequestBasis {
+  panelScope: string;
+  viewerToken: string;
+  tabId: string | null;
+  sessionId: string;
+  navigationGeneration: number;
+  viewportGeneration: number;
+  controllerRevision: number;
+}
+
+export interface ControlRequest {
+  label: string;
+  basis: ControlRequestBasis;
+  needsFrame: boolean;
+  run(): void;
+}
+
+/** Capture the page and ownership observation before showing a takeover dialog. */
+export function controlRequestBasis(
+  panelScope: string,
+  viewerToken: string,
+  state: BrowserState,
+  controllerRevision: number,
+): ControlRequestBasis {
+  return {
+    panelScope,
+    viewerToken,
+    tabId: state.tabId ?? null,
+    sessionId: state.sessionId,
+    navigationGeneration: state.navigationGeneration,
+    viewportGeneration: state.viewportGeneration,
+    controllerRevision,
+  };
+}
+
+/** Reject a queued action if its viewer, tab, page, or controller observation changed. */
+export function isControlRequestCurrent(
+  basis: ControlRequestBasis,
+  panelScope: string,
+  viewerToken: string | null,
+  state: BrowserState | null,
+  controllerRevision: number,
+): boolean {
+  return Boolean(
+    state &&
+      basis.panelScope === panelScope &&
+      basis.viewerToken === viewerToken &&
+      basis.tabId === (state.tabId ?? null) &&
+      basis.sessionId === state.sessionId &&
+      basis.navigationGeneration === state.navigationGeneration &&
+      basis.viewportGeneration === state.viewportGeneration &&
+      basis.controllerRevision === controllerRevision,
+  );
+}

package/client/browser-control-tooltip-web.ts

@@ -0,0 +1,10 @@
+/** Native browser hover titles for public RN web control refs; native clients keep accessibility labels. */
+import { Platform } from "react-native";
+
+/** Attach the control's current accessible name without creating overlays or remote input handlers. */
+export function setBrowserControlTooltip(node: unknown, label: string): void {
+  if (Platform.OS !== "web" || !node || typeof node !== "object") return;
+  if ("setAttribute" in node && typeof node.setAttribute === "function") {
+    node.setAttribute("title", label);
+  }
+}

package/client/browser-dialog-body.tsx

@@ -0,0 +1,22 @@
+/** Shared confirmation layout for short Shared Browser dialogs. */
+import type { ReactNode } from "react";
+import { Text, View } from "react-native";
+import type { createStyles } from "./browser-panel-styles";
+
+/** Keep confirmation copy and actions aligned within the host modal's own inset. */
+export function BrowserDialogBody({
+  styles,
+  children,
+  actions,
+}: {
+  styles: ReturnType<typeof createStyles>;
+  children: ReactNode;
+  actions: ReactNode;
+}) {
+  return (
+    <View style={styles.dialogBody}>
+      <Text style={styles.dialogMessage}>{children}</Text>
+      <View style={styles.dialogActions}>{actions}</View>
+    </View>
+  );
+}

package/client/browser-emulation-mode.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import {
+  createEmulationChoices,
+  localEmulationMode,
+  matchingResolutionPresetId,
+  selectionMode,
+} from "./browser-emulation-mode";
+
+describe("device defaults for shared emulation", () => {
+  it("uses actual platform/browser device hints, not narrow layout", () => {
+    expect(localEmulationMode({ platform: "web", userAgent: "Desktop Chrome" })).toBe("desktop");
+    expect(localEmulationMode({ platform: "web", userAgent: "Android Mobile Chrome" })).toBe(
+      "mobile",
+    );
+    expect(localEmulationMode({ platform: "web", mobile: true })).toBe("mobile");
+    expect(
+      localEmulationMode({ platform: "web", userAgent: "Macintosh Safari", maxTouchPoints: 5 }),
+    ).toBe("mobile");
+    expect(
+      localEmulationMode({ platform: "web", userAgent: "Windows Chrome", maxTouchPoints: 10 }),
+    ).toBe("desktop");
+    expect(localEmulationMode({ platform: "ios" })).toBe("mobile");
+    expect(localEmulationMode({ platform: "android" })).toBe("mobile");
+  });
+  it("applies a different local mode once, then honors explicit choices across reacquisition", () => {
+    const choices = createEmulationChoices({ platform: "ios" });
+    expect(choices.claimDefault("desktop")).toEqual({
+      presetId: "iphone-15-pro",
+      preserveDisplay: true,
+    });
+    expect(choices.claimDefault("desktop")).toBeNull();
+  });
+  it("keeps an already matching mode and never replays a remembered viewport on toggle", () => {
+    const choices = createEmulationChoices({ platform: "web" });
+    choices.remember(null);
+    expect(choices.claimDefault("desktop")).toBeNull();
+    expect(choices.toggle("desktop")).toEqual({ presetId: "pixel-7-sharp", preserveDisplay: true });
+    expect(choices.toggle("mobile")).toEqual({
+      presetId: "desktop-chrome",
+      preserveDisplay: true,
+    });
+    expect(selectionMode(null)).toBe("desktop");
+    expect(selectionMode("pixel-7")).toBe("mobile");
+  });
+  it("remembers behavior profiles without claiming their native dimensions", () => {
+    const choices = createEmulationChoices({ platform: "web" });
+    choices.remember("desktop-1920x1080");
+    choices.remember("iphone-15-pro");
+    expect(choices.toggle("desktop")).toEqual({ presetId: "iphone-15-pro", preserveDisplay: true });
+    expect(choices.toggle("mobile")).toEqual({
+      presetId: "desktop-1920x1080",
+      preserveDisplay: true,
+    });
+    expect(
+      matchingResolutionPresetId({
+        devicePresetId: "iphone-15-pro",
+        viewport: { width: 1920, height: 1080 },
+        captureScale: 1,
+      }),
+    ).toBeNull();
+  });
+  it("checks exact viewport and capture density in resolution selection", () => {
+    const base = {
+      devicePresetId: "pixel-7-sharp" as const,
+      viewport: { width: 412, height: 839 },
+      captureScale: 2,
+    };
+    expect(matchingResolutionPresetId(base)).toBe("pixel-7-sharp");
+    expect(matchingResolutionPresetId({ ...base, captureScale: 1 })).toBeNull();
+    expect(
+      matchingResolutionPresetId({ ...base, viewport: { width: 1920, height: 1200 } }),
+    ).toBeNull();
+    expect(matchingResolutionPresetId(null)).toBeNull();
+  });
+});

package/client/browser-emulation-mode.ts

@@ -0,0 +1,98 @@
+/** Local mode defaults and remembered behavior profiles, independent of shared display size. */
+
+import type { BrowserState } from "../shared/browser";
+import { DEVICE_PRESETS, type DevicePresetId } from "../shared/device-presets";
+
+export type BrowserEmulationMode = "desktop" | "mobile";
+export type EmulationSelection = { presetId: DevicePresetId; preserveDisplay: true };
+interface LocalDevice {
+  platform: "ios" | "android" | "web";
+  userAgent?: string;
+  mobile?: boolean;
+  maxTouchPoints?: number;
+}
+
+/** Compact layout can mean a narrow desktop window, so it never determines device identity. */
+export function localEmulationMode(device: LocalDevice): BrowserEmulationMode {
+  if (device.platform !== "web") return "mobile";
+  if (
+    device.mobile === true ||
+    (/Macintosh/i.test(device.userAgent ?? "") && (device.maxTouchPoints ?? 0) > 1) ||
+    /Android|iPhone|iPad|iPod|Mobile/i.test(device.userAgent ?? "")
+  )
+    return "mobile";
+  return "desktop";
+}
+
+/** Browser hints are local presentation facts, not remote browser or authentication data. */
+export function readLocalDevice(platform: LocalDevice["platform"]): LocalDevice {
+  const browser = globalThis as unknown as {
+    navigator?: {
+      userAgent?: string;
+      maxTouchPoints?: number;
+      userAgentData?: { mobile?: boolean };
+    };
+  };
+  const userAgent = browser.navigator?.userAgent;
+  const mobile = browser.navigator?.userAgentData?.mobile;
+  const maxTouchPoints = browser.navigator?.maxTouchPoints;
+  return {
+    platform,
+    ...(userAgent === undefined ? {} : { userAgent }),
+    ...(mobile === undefined ? {} : { mobile }),
+    ...(maxTouchPoints === undefined ? {} : { maxTouchPoints }),
+  };
+}
+
+/** The configured profile defines behavior even when its native dimensions are overridden. */
+export function selectionMode(presetId: DevicePresetId | null): BrowserEmulationMode {
+  return DEVICE_PRESETS.find((preset) => preset.id === presetId)?.isMobile ? "mobile" : "desktop";
+}
+
+/** A profile ID alone must not check a resolution that differs from the actual display. */
+export function matchingResolutionPresetId(
+  state: Pick<BrowserState, "devicePresetId" | "viewport" | "captureScale"> | null,
+): DevicePresetId | null {
+  if (!state) return null;
+  const preset = DEVICE_PRESETS.find((item) => item.id === state.devicePresetId);
+  return preset &&
+    preset.viewport.width === state.viewport.width &&
+    preset.viewport.height === state.viewport.height &&
+    preset.captureScale === state.captureScale
+    ? preset.id
+    : null;
+}
+
+/** One device default per mounted host/workspace; later explicit choices survive releasing control. */
+export function createEmulationChoices(device: LocalDevice) {
+  const defaultMode = localEmulationMode(device);
+  const mobilePreset: DevicePresetId =
+    device.platform === "ios" ||
+    /iPhone|iPad|iPod/i.test(device.userAgent ?? "") ||
+    (/Macintosh/i.test(device.userAgent ?? "") && (device.maxTouchPoints ?? 0) > 1)
+      ? "iphone-15-pro"
+      : "pixel-7-sharp";
+  let initialized = false;
+  const profiles: Record<BrowserEmulationMode, DevicePresetId> = {
+    desktop: "desktop-chrome",
+    mobile: mobilePreset,
+  };
+  return {
+    remember(presetId: DevicePresetId | null) {
+      if (presetId) profiles[selectionMode(presetId)] = presetId;
+    },
+    claimDefault(currentMode: BrowserEmulationMode): EmulationSelection | null {
+      if (initialized) return null;
+      initialized = true;
+      return currentMode === defaultMode
+        ? null
+        : { presetId: profiles[defaultMode], preserveDisplay: true };
+    },
+    toggle(currentMode: BrowserEmulationMode): EmulationSelection {
+      return {
+        presetId: profiles[currentMode === "mobile" ? "desktop" : "mobile"],
+        preserveDisplay: true,
+      };
+    },
+  };
+}

package/client/browser-fill-viewport.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { getFillViewportResolution } from "./browser-fill-viewport";
+
+describe("fill viewport resolution", () => {
+  it("uses the visible canvas's logical size, including fractional layout rounding", () => {
+    expect(getFillViewportResolution({ width: 1042.4, height: 781.6 })).toEqual({
+      width: 1042,
+      height: 782,
+    });
+  });
+
+  it("accepts both supported boundaries", () => {
+    expect(getFillViewportResolution({ width: 320, height: 480 })).toEqual({
+      width: 320,
+      height: 480,
+    });
+    expect(getFillViewportResolution({ width: 3840, height: 3840 })).toEqual({
+      width: 3840,
+      height: 3840,
+    });
+  });
+
+  it("preserves logical size at sharp density and rejects oversized physical captures", () => {
+    expect(getFillViewportResolution({ width: 1000, height: 700 }, 2)).toEqual({
+      width: 1000,
+      height: 700,
+    });
+    expect(getFillViewportResolution({ width: 1921, height: 700 }, 2)).toBeNull();
+    expect(getFillViewportResolution({ width: 1000, height: 1921 }, 2)).toBeNull();
+  });
+
+  it("rejects unavailable and unsupported sizes without substituting a resolution", () => {
+    for (const size of [
+      { width: 0, height: 0 },
+      { width: Number.NaN, height: 600 },
+      { width: 800, height: Number.POSITIVE_INFINITY },
+      { width: 319, height: 600 },
+      { width: 800, height: 479 },
+      { width: 3841, height: 800 },
+      { width: 800, height: 3841 },
+    ]) {
+      expect(getFillViewportResolution(size)).toBeNull();
+    }
+  });
+});

package/client/browser-fill-viewport.ts

@@ -0,0 +1,28 @@
+/** Convert the visible canvas's logical dimensions to a supported browser resolution. */
+import { MAX_VIEWPORT, MIN_VIEWPORT } from "../shared/viewport-limits";
+
+/**
+ * Round fractional layout pixels to the nearest browser CSS pixel. Unmeasured or
+ * unsupported panels return null rather than silently clamping to a different size.
+ * captureScale bounds physical image pixels without multiplying logical dimensions.
+ */
+export function getFillViewportResolution(
+  size: { width: number; height: number },
+  captureScale = 1,
+) {
+  const width = Math.round(size.width);
+  const height = Math.round(size.height);
+  if (
+    !Number.isFinite(width) ||
+    !Number.isFinite(height) ||
+    !Number.isFinite(captureScale) ||
+    captureScale < 1 ||
+    width < MIN_VIEWPORT.width ||
+    width * captureScale > MAX_VIEWPORT.width ||
+    height < MIN_VIEWPORT.height ||
+    height * captureScale > MAX_VIEWPORT.height
+  ) {
+    return null;
+  }
+  return { width, height };
+}