@omercnet/paseo-shared-browser 1.2.1 → 1.2.2-next.237.1

package/client/browser-panel-styles.ts

@@ -0,0 +1,384 @@
+/** Own themed panel spacing and styles; geometry/input policy lives in the panel and canvas modules. */
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { StyleSheet } from "react-native";
+
+type Theme = PluginWorkspacePanelProps["theme"];
+
+export const SPACE = {
+  xxs: 2,
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+} as const;
+const RADIUS = { sm: 6, md: 8, lg: 10 } as const;
+const TYPE = { caption: 11, body: 13, title: 14 } as const;
+export const DIMENSION = {
+  control: 34,
+  touch: 44,
+  icon: 15,
+  addressRegular: 220,
+  canvasCompact: 220,
+  canvasRegular: 320,
+  helperMax: 420,
+  viewportField: 72,
+  screenRadius: 20,
+} as const;
+/** Build stable theme/compact styles without changing shared browser state. */
+export function createStyles(theme: Theme, compact: boolean) {
+  return StyleSheet.create({
+    screen: {
+      flex: 1,
+      minHeight: 0,
+      backgroundColor: theme.colors.surface0,
+    },
+    tabBar: {
+      minHeight: DIMENSION.touch,
+      paddingHorizontal: SPACE.sm,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.xs,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border,
+      backgroundColor: theme.colors.surface1,
+    },
+    tabList: {
+      flex: 1,
+      minWidth: 0,
+    },
+    tabListContent: {
+      alignItems: "center",
+      gap: SPACE.xs,
+    },
+    tabItem: {
+      minHeight: DIMENSION.touch,
+      width: compact ? 132 : 176,
+      flexDirection: "row",
+      alignItems: "center",
+      borderBottomWidth: 2,
+      borderBottomColor: "transparent",
+    },
+    tabItemSelected: {
+      width: compact ? 200 : 230,
+      borderBottomColor: theme.colors.accent,
+    },
+    tabSelect: {
+      flex: 1,
+      minWidth: 0,
+      paddingHorizontal: SPACE.sm,
+      paddingVertical: SPACE.xxs,
+      justifyContent: "center",
+    },
+    tabMetaRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.xs,
+    },
+    tabMeta: {
+      flexShrink: 1,
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.caption,
+    },
+    tabActions: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.xxs,
+      paddingRight: SPACE.xs,
+    },
+    tabLabel: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.body,
+    },
+    tabLabelSelected: {
+      color: theme.colors.foreground,
+      fontWeight: "600",
+    },
+    statusDot: {
+      width: SPACE.sm,
+      height: SPACE.sm,
+      borderRadius: RADIUS.sm,
+    },
+    mutedText: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.caption,
+    },
+    chrome: {
+      minHeight: 40,
+      paddingHorizontal: SPACE.sm,
+      paddingVertical: SPACE.xs,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border,
+      backgroundColor: theme.colors.surface0,
+    },
+    addressRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.xs,
+    },
+    addressInput: {
+      flex: 1,
+      minWidth: compact ? 40 : DIMENSION.addressRegular,
+    },
+    chromeAddressInput: {
+      height: compact ? 34 : 28,
+      borderRadius: RADIUS.md,
+      backgroundColor: theme.colors.surface1,
+      // Compact chrome must override the themed input's form-sized padding.
+      // Keep a full text line even on native hosts with their own font padding.
+      paddingVertical: 0,
+      paddingHorizontal: SPACE.xs,
+      fontSize: TYPE.body,
+      lineHeight: 18,
+      includeFontPadding: false,
+      textAlignVertical: "center",
+    },
+    chromeIconButton: {
+      width: 28,
+      height: 28,
+      borderRadius: RADIUS.md,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    chromeIconButtonHovered: {
+      backgroundColor: theme.colors.surface2,
+    },
+    chromeIconButtonPressed: {
+      opacity: 0.72,
+    },
+    chromeIconButtonDisabled: {
+      opacity: 0.45,
+    },
+
+    button: {
+      minHeight: DIMENSION.control,
+      minWidth: DIMENSION.control,
+      paddingHorizontal: SPACE.sm,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: RADIUS.sm,
+      backgroundColor: theme.colors.surface2,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: SPACE.xs,
+    },
+    buttonIconOnly: {
+      width: DIMENSION.control,
+      minWidth: DIMENSION.control,
+      paddingHorizontal: 0,
+    },
+    buttonSelected: {
+      borderColor: theme.colors.accent,
+      backgroundColor: theme.colors.accent,
+    },
+    buttonPrimary: {
+      borderColor: theme.colors.accent,
+      backgroundColor: theme.colors.accent,
+    },
+    buttonDanger: {
+      borderColor: theme.colors.statusWarning,
+    },
+    buttonHovered: {
+      borderColor: theme.colors.foregroundMuted,
+    },
+    buttonPressed: {
+      opacity: 0.72,
+    },
+    buttonFocused: {
+      borderColor: theme.colors.accent,
+      borderWidth: 2,
+    },
+    buttonDisabled: {
+      opacity: 0.42,
+    },
+    buttonText: {
+      color: theme.colors.foreground,
+      fontSize: TYPE.caption,
+      fontWeight: "600",
+    },
+    buttonTextSelected: {
+      color: theme.colors.accentForeground,
+    },
+    field: {
+      height: DIMENSION.control,
+      paddingHorizontal: SPACE.sm,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: RADIUS.sm,
+      color: theme.colors.foreground,
+      backgroundColor: theme.colors.surface2,
+      fontSize: TYPE.body,
+    },
+    fieldFocused: {
+      borderColor: theme.colors.accent,
+      borderWidth: 2,
+    },
+    fieldDisabled: {
+      opacity: 0.5,
+    },
+    errorRow: {
+      paddingHorizontal: SPACE.sm,
+      paddingVertical: SPACE.xs,
+      borderLeftWidth: SPACE.xs,
+      borderLeftColor: theme.colors.statusDanger,
+      backgroundColor: theme.colors.surface1,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.sm,
+    },
+    errorText: {
+      flex: 1,
+      color: theme.colors.statusDanger,
+      fontSize: TYPE.caption,
+    },
+    canvasShell: {
+      flex: 1,
+      minHeight: compact ? DIMENSION.canvasCompact : DIMENSION.canvasRegular,
+      minWidth: 0,
+      // Keep the compact side inset without adding blank bands above and below the feed.
+      marginHorizontal: compact ? SPACE.sm : 0,
+      borderRadius: compact ? DIMENSION.screenRadius : 0,
+      overflow: "hidden",
+      backgroundColor: theme.colors.surface1,
+    },
+    canvas: {
+      flex: 1,
+      minHeight: 0,
+      overflow: "hidden",
+    },
+    interactionLayer: {
+      position: "absolute",
+    },
+    canvasState: {
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      padding: SPACE.lg,
+      gap: SPACE.sm,
+    },
+    canvasTitle: {
+      color: theme.colors.foreground,
+      fontSize: TYPE.title,
+      fontWeight: "600",
+      textAlign: "center",
+    },
+    canvasDetail: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.caption,
+      textAlign: "center",
+      maxWidth: DIMENSION.helperMax,
+    },
+    canvasFooter: {
+      minHeight: DIMENSION.control,
+      paddingHorizontal: SPACE.sm,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.border,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: SPACE.sm,
+      backgroundColor: theme.colors.surface1,
+    },
+    canvasFooterText: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.caption,
+      flexShrink: 1,
+    },
+
+    mobileRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.sm,
+    },
+    sheetContent: {
+      gap: SPACE.md,
+      padding: SPACE.sm,
+    },
+    sheetGrid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: SPACE.sm,
+    },
+    controlStrip: {
+      minHeight: DIMENSION.control,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.xs,
+    },
+    dialogBody: {
+      gap: SPACE.md,
+      paddingBottom: SPACE.xs,
+    },
+    dialogMessage: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.body,
+      lineHeight: 20,
+      textAlign: "left",
+    },
+    dialogActions: {
+      flexDirection: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      gap: SPACE.sm,
+      paddingTop: SPACE.xs,
+    },
+    stripLabel: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.caption,
+      fontWeight: "600",
+      marginRight: SPACE.xs,
+    },
+    viewportField: {
+      width: DIMENSION.viewportField,
+      textAlign: "center",
+    },
+    multiply: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.body,
+    },
+
+    deviceModalContent: {
+      gap: SPACE.sm,
+      padding: SPACE.sm,
+    },
+    devicePresetRow: {
+      minHeight: 46,
+      paddingHorizontal: SPACE.md,
+      paddingVertical: SPACE.sm,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+      borderRadius: RADIUS.md,
+      backgroundColor: theme.colors.surface1,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.sm,
+    },
+    devicePresetRowSelected: {
+      borderColor: theme.colors.accent,
+      backgroundColor: theme.colors.surface2,
+    },
+    devicePresetText: {
+      flex: 1,
+      color: theme.colors.foreground,
+      fontSize: TYPE.body,
+      fontWeight: "600",
+    },
+    devicePresetDetail: {
+      color: theme.colors.foregroundMuted,
+      fontSize: TYPE.caption,
+    },
+    customViewportRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: SPACE.xs,
+    },
+    buttonLarge: {
+      minHeight: DIMENSION.touch,
+      paddingHorizontal: SPACE.md,
+      borderRadius: RADIUS.md,
+    },
+    buttonFill: {
+      flex: 1,
+    },
+  });
+}

package/client/browser-quality-controls.test.ts

@@ -0,0 +1,26 @@
+import { expect, it, vi } from "vitest";
+
+vi.mock("react-native", () => ({
+  Pressable: "Pressable",
+  StyleSheet: { create: (styles: unknown) => styles },
+  Text: "Text",
+  View: "View",
+}));
+vi.mock("./browser-capture-density-controls", () => ({
+  BrowserCaptureDensityControls: () => null,
+}));
+
+const { DEFAULT_CAPTURE_QUALITY } = await import("../shared/capture-settings");
+const { jpegQualityOptions } = await import("./browser-quality-controls");
+
+it("badges exactly the actual default JPEG quality, not a hard-coded tier", () => {
+  const options = jpegQualityOptions();
+  expect(options.filter((option) => "detail" in option && option.detail === "Default")).toEqual([
+    expect.objectContaining({ value: DEFAULT_CAPTURE_QUALITY, label: "65%" }),
+  ]);
+  expect(options.find((option) => option.value === "high")).not.toHaveProperty("detail");
+  expect(options.find((option) => option.value === "maximum")).toHaveProperty(
+    "detail",
+    "Largest JPEGs",
+  );
+});

package/client/browser-quality-controls.tsx

@@ -0,0 +1,139 @@
+/** Independent viewer compression/rate choices. These settings never resize or
+ * navigate the shared page; pixel density remains its existing owner control. */
+import type { PluginHostProps } from "@getpaseo/plugin/client";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import type { BrowserDisplayPreferences } from "../shared/browser-display-preferences";
+import { DEFAULT_CAPTURE_QUALITY, JPEG_QUALITY } from "../shared/capture-settings";
+import { VIDEO_BITRATES, VIDEO_FRAME_RATES } from "../shared/video-settings";
+import type { CaptureDensityMode } from "./browser-auto-capture-density";
+import { BrowserCaptureDensityControls } from "./browser-capture-density-controls";
+
+const styles = StyleSheet.create({
+  group: { gap: 8 },
+  heading: { fontSize: 11, fontWeight: "600" },
+  choice: {
+    minHeight: 44,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderWidth: 1,
+    borderRadius: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  label: { flex: 1, fontSize: 13, fontWeight: "600" },
+  detail: { fontSize: 11 },
+});
+interface Props {
+  theme: PluginHostProps["theme"];
+  disabled: boolean;
+  density: number;
+  densityMode: CaptureDensityMode;
+  viewport: { width: number; height: number } | null;
+  densityDisabled: boolean;
+  onDensityChange(value: CaptureDensityMode): void;
+  captureQuality: BrowserDisplayPreferences["captureQuality"];
+  videoBitrate: BrowserDisplayPreferences["videoBitrate"];
+  videoFps: BrowserDisplayPreferences["videoFps"];
+  onQualityChange(value: Props["captureQuality"]): void;
+  onVideoBitrateChange(value: Props["videoBitrate"]): void;
+  onVideoFpsChange(value: Props["videoFps"]): void;
+}
+function Choices<T extends string | number>(props: {
+  theme: Props["theme"];
+  disabled: boolean;
+  title: string;
+  value: T;
+  options: readonly { value: T; label: string; detail?: string }[];
+  onChange(value: T): void;
+}) {
+  const colors = props.theme.colors;
+  return (
+    <View style={styles.group}>
+      <Text style={[styles.heading, { color: colors.foregroundMuted }]}>{props.title}</Text>
+      {props.options.map((option) => {
+        const selected = option.value === props.value;
+        return (
+          <Pressable
+            key={option.value}
+            accessibilityRole="button"
+            accessibilityLabel={`${props.title}: ${option.label}`}
+            accessibilityState={{ selected, disabled: props.disabled }}
+            disabled={props.disabled}
+            onPress={() => props.onChange(option.value)}
+            style={({ pressed }) => [
+              styles.choice,
+              {
+                borderColor: selected ? colors.accent : colors.border,
+                backgroundColor: selected ? colors.surface2 : colors.surface1,
+                opacity: props.disabled ? 0.45 : pressed ? 0.72 : 1,
+              },
+            ]}
+          >
+            <Text style={[styles.label, { color: colors.foreground }]}>{option.label}</Text>
+            {option.detail ? (
+              <Text style={[styles.detail, { color: colors.foregroundMuted }]}>
+                {option.detail}
+              </Text>
+            ) : null}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+/** Explicit values describe the actual JPEG encoder and independently bounded video cohorts. */
+export function jpegQualityOptions() {
+  return (["low", "medium", "high", "maximum"] as const).map((value) => ({
+    value,
+    label: `${JPEG_QUALITY[value]}%`,
+    ...(value === DEFAULT_CAPTURE_QUALITY
+      ? { detail: "Default" }
+      : value === "maximum"
+        ? { detail: "Largest JPEGs" }
+        : {}),
+  }));
+}
+export function BrowserQualityControls(props: Props) {
+  const jpeg = jpegQualityOptions();
+  return (
+    <View style={{ gap: 12 }}>
+      <BrowserCaptureDensityControls
+        theme={props.theme}
+        density={props.density}
+        mode={props.densityMode}
+        viewport={props.viewport}
+        disabled={props.densityDisabled}
+        onChange={props.onDensityChange}
+      />
+      <Choices
+        theme={props.theme}
+        disabled={props.disabled}
+        title="JPEG quality target"
+        value={props.captureQuality}
+        options={jpeg}
+        onChange={props.onQualityChange}
+      />
+      <Choices
+        theme={props.theme}
+        disabled={props.disabled}
+        title="Video bitrate"
+        value={props.videoBitrate}
+        options={VIDEO_BITRATES.map((value) => ({ value, label: `${value / 1_000_000} Mbps` }))}
+        onChange={props.onVideoBitrateChange}
+      />
+      <Choices
+        theme={props.theme}
+        disabled={props.disabled}
+        title="Video frame rate"
+        value={props.videoFps}
+        options={VIDEO_FRAME_RATES.map((value) => ({ value, label: `${value} FPS` }))}
+        onChange={props.onVideoFpsChange}
+      />
+      <Text style={[styles.detail, { color: props.theme.colors.foregroundMuted }]}>
+        Large JPEGs may reduce quality to fit the frame limit. Video settings apply where supported.
+        Other clients use JPEGs. Capture density changes detail without resizing the page.
+      </Text>
+    </View>
+  );
+}