@opengeni/react 3.1.0 → 3.1.3-canary.38890816741001

package/dist/components/artifacts/editable-artifact-view.d.ts

@@ -0,0 +1,48 @@
+import type { EditableArtifactResource } from "@opengeni/sdk/artifacts";
+import { type CreateBrowserEditableArtifactSessionOptions, type EditableArtifactBrowserRuntime, type EditableArtifactCacheAuthority } from "@opengeni/sdk/editable-artifacts";
+import { type ArtifactLoadErrorView } from "./artifact-chrome.js";
+/**
+ * The browser kernels an editor needs, one per modality, plus the host-built
+ * Worker URL (for Vite: `@opengeni/sdk/editable-artifacts/worker?worker&url`).
+ * Kernels come from `@opengeni/artifact-kernel-wasm-{document,spreadsheet,presentation}`.
+ */
+export type EditableArtifactRuntimes = Readonly<{
+    document: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+    spreadsheet: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+    presentation: Omit<EditableArtifactBrowserRuntime, "workerUrl" | "workerFactory">;
+    workerUrl: string;
+    applicationOrigin?: string | undefined;
+    /** Loopback development only. */
+    allowInsecureDevelopmentAssets?: boolean | undefined;
+}>;
+/** Everything needed to open one artifact for the current principal. */
+export type OpenedEditableArtifact = Readonly<{
+    artifact: EditableArtifactResource;
+    authority: EditableArtifactCacheAuthority;
+    replicaId: string;
+}>;
+export type EditableArtifactViewProps = Readonly<{
+    /** Absolute API (or session proxy) base the live transport talks to. */
+    baseUrl: URL;
+    workspaceId: string;
+    artifactId: string;
+    /** Resolve metadata, cache authority, and replica; called again on retry. */
+    open: (signal: AbortSignal) => Promise<OpenedEditableArtifact>;
+    runtimes: EditableArtifactRuntimes;
+    transport?: CreateBrowserEditableArtifactSessionOptions["transport"];
+    /** Show the editor's own title header (hosts with their own header hide it). */
+    showHeader?: boolean | undefined;
+    /** Re-open when this changes (for example the host's credential version). */
+    authorityKey?: string | undefined;
+    describeError?: ((error: unknown) => ArtifactLoadErrorView) | undefined;
+    onTitle?: ((title: string) => void) | undefined;
+    /** Loading copy; defaults to the `opening` label. */
+    loadingLabel?: string | undefined;
+    /** Host-authenticated XLSX export; omitted for hosts without export support. */
+    downloadSpreadsheet?: ((opened: OpenedEditableArtifact, signal: AbortSignal) => Promise<Blob>) | undefined;
+}>;
+/**
+ * One editable document, spreadsheet, or presentation with its first-party
+ * editor. The console dock/page and embedding hosts supply only data access.
+ */
+export declare function EditableArtifactView({ baseUrl, workspaceId, artifactId, open, runtimes, transport, showHeader, authorityKey, describeError, onTitle, loadingLabel, downloadSpreadsheet, }: EditableArtifactViewProps): import("react").JSX.Element;

package/dist/components/artifacts/editable-document.d.ts

@@ -12,7 +12,7 @@ export type EditableDocumentArtifactSurfaceProps = Omit<DocumentProjectionArtifa
  * Durable document editor over the public SDK session. Canonical state and
  * speculative replay remain Worker-owned; React receives bounded projections.
  */
-export declare function EditableDocumentArtifactSurface({ session, title, subtitle, readOnly, onCommit, onCommandError, ...surfaceProps }: EditableDocumentArtifactSurfaceProps): import("react").JSX.Element;
+export declare function EditableDocumentArtifactSurface({ session, title, showHeader, subtitle, readOnly, onCommit, onCommandError, ...surfaceProps }: EditableDocumentArtifactSurfaceProps): import("react").JSX.Element;
 /** Deterministically composes summary/body/sections/review at one Worker revision. */
 export declare function composeDocumentEditorProjection(session: EditableArtifactSession): Promise<DocumentEditorProjection>;
 export declare function minimalUtf16TextEdit(before: string, after: string): {

package/dist/components/artifacts/editable-presentation.d.ts

@@ -1,7 +1,7 @@
 import { type EditableArtifactSession, type PresentationArtifactEditorSceneNode, type PresentationArtifactRichText } from "@opengeni/sdk/editable-artifacts";
 import { type ReactNode } from "react";
 import { type PresentationCommitHandler, type PresentationEditorProjection, type PresentationProjectionArtifactSurfaceProps } from "./presentation-editor.js";
-export type EditablePresentationArtifactSurfaceProps = Omit<PresentationProjectionArtifactSurfaceProps, "projection" | "commit" | "readOnly" | "busy" | "subtitle"> & {
+export type EditablePresentationArtifactSurfaceProps = Omit<PresentationProjectionArtifactSurfaceProps, "projection" | "commit" | "readOnly" | "busy" | "subtitle" | "authoringBlockedReason"> & {
     session: EditableArtifactSession;
     subtitle?: ReactNode | undefined;
     readOnly?: boolean | undefined;
@@ -16,7 +16,7 @@ export type ComposedPresentationProjection = Readonly<{
  * Durable presentation editor over the public SDK. The Worker owns canonical
  * state; React only receives bounded catalog and per-slide editor projections.
  */
-export declare function EditablePresentationArtifactSurface({ session, title, subtitle, readOnly, onCommit, onCommandError, ...surfaceProps }: EditablePresentationArtifactSurfaceProps): import("react").JSX.Element;
+export declare function EditablePresentationArtifactSurface({ session, title, showHeader, subtitle, readOnly, onCommit, onCommandError, ...surfaceProps }: EditablePresentationArtifactSurfaceProps): import("react").JSX.Element;
 /** Builds a deterministic, bounded catalog + editor-slide projection at one revision. */
 export declare function composePresentationEditorProjection(session: EditableArtifactSession): Promise<ComposedPresentationProjection>;
 export declare function flattenPresentationRichText(text: PresentationArtifactRichText): string;

package/dist/components/artifacts/editable-spreadsheet.d.ts

@@ -1,6 +1,7 @@
 import { type EditableArtifactSession, type EditableSpreadsheetSheetMetadata } from "@opengeni/sdk/editable-artifacts";
 import { type ReactNode } from "react";
-import { type SpreadsheetCommit, type SpreadsheetSelection, type SpreadsheetViewport } from "./spreadsheet-grid.js";
+import { type SpreadsheetDownload } from "./spreadsheet-download.js";
+import { type SpreadsheetCommit, type SpreadsheetDimensionCommit, type SpreadsheetSelection, type SpreadsheetViewport } from "./spreadsheet-grid.js";
 export type EditableSpreadsheetGridProps = {
     session: EditableArtifactSession;
     sheet: EditableSpreadsheetSheetMetadata;
@@ -12,14 +13,18 @@ export type EditableSpreadsheetGridProps = {
     overscanColumns?: number | undefined;
     onSelectionChange?: ((selection: SpreadsheetSelection) => void) | undefined;
     onCommit?: ((commit: SpreadsheetCommit) => void) | undefined;
+    onResize?: ((change: SpreadsheetDimensionCommit) => void) | undefined;
     onCommandError?: ((error: Error) => void) | undefined;
     onViewportChange?: ((viewport: SpreadsheetViewport) => void) | undefined;
     className?: string | undefined;
 };
 export type EditableSpreadsheetArtifactSurfaceProps = Omit<EditableSpreadsheetGridProps, "metadataRevision" | "sheet"> & {
     title?: string | undefined;
+    showHeader?: boolean | undefined;
     subtitle?: ReactNode | undefined;
     actions?: ReactNode | undefined;
+    /** Authenticated XLSX export of the current saved native head. */
+    download?: SpreadsheetDownload | undefined;
     initialSheetId?: string | undefined;
     allowAddSheet?: boolean | undefined;
 };
@@ -27,6 +32,6 @@ export type EditableSpreadsheetArtifactSurfaceProps = Omit<EditableSpreadsheetGr
  * Durable spreadsheet editor over one SDK session. Canonical state remains in
  * the dedicated Worker; React receives one bounded immutable viewport only.
  */
-export declare function EditableSpreadsheetGrid({ session, sheet, metadataRevision, readOnly, rowCount: requestedRowCount, columnCount: requestedColumnCount, overscanRows, overscanColumns, onSelectionChange, onCommit, onCommandError, onViewportChange, className, }: EditableSpreadsheetGridProps): import("react").JSX.Element;
+export declare function EditableSpreadsheetGrid(props: EditableSpreadsheetGridProps): import("react").JSX.Element;
 /** Artifact chrome, sheet navigation, and one Worker-backed spreadsheet grid. */
-export declare function EditableSpreadsheetArtifactSurface({ session, title, subtitle, actions, initialSheetId, allowAddSheet, readOnly, ...gridProps }: EditableSpreadsheetArtifactSurfaceProps): import("react").JSX.Element;
+export declare function EditableSpreadsheetArtifactSurface(props: EditableSpreadsheetArtifactSurfaceProps): import("react").JSX.Element;

package/dist/components/artifacts/index.d.ts

@@ -1,6 +1,13 @@
+export { ArtifactBadge, ArtifactLabelsProvider, DEFAULT_ARTIFACT_LABELS, useArtifactLabels, type ArtifactLabels, ArtifactButton, ArtifactLoading, ArtifactProblem, ArtifactSelect, ArtifactViewerHeader, artifactKindIcon, artifactKindSubtitle, artifactLoadErrorMessage, artifactLoadErrorView, type ArtifactKind, type ArtifactLoadErrorKind, type ArtifactLoadErrorView, } from "./artifact-chrome.js";
+export { ArtifactSandbox, type ArtifactSandboxProps } from "./artifact-sandbox.js";
+export { DeferredChatMedia } from "./deferred-chat-media.js";
+export { ChatInteractiveBlock, type ChatInteractiveBlockProps, type SiteSnapshotClient, type SiteToolBridgeFactory, type SiteToolScope, } from "./chat-interactive-block.js";
+export { SiteView, type SiteViewProps } from "./site-view.js";
+export { EditableArtifactView, type EditableArtifactRuntimes, type EditableArtifactViewProps, type OpenedEditableArtifact, } from "./editable-artifact-view.js";
+export { SessionArtifactViewer, type SessionArtifactTarget, type SessionArtifactViewerLabels, type SessionArtifactViewerProps, } from "./session-artifact-viewer.js";
 export { ArtifactSurface, type ArtifactModality, type ArtifactSurfaceProps, } from "./artifact-surface.js";
-export { PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX, PublishedHtmlArtifactFrame, type PublishedHtmlArtifactFrameProps, } from "./published-html-artifact-frame.js";
-export { SpreadsheetArtifactSurface, SpreadsheetGrid, SpreadsheetProjectionGrid, type SpreadsheetArtifactSurfaceProps, type SpreadsheetCommit, type SpreadsheetRangeCommit, type SpreadsheetGridProps, type SpreadsheetGridProjection, type SpreadsheetProjectionCell, type SpreadsheetProjectionGridProps, type SpreadsheetSelection, type SpreadsheetViewport, } from "./spreadsheet-grid.js";
+export { PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX, PublishedHtmlArtifactFrame, openGeniSiteBridgePortFromBootstrap, publishedHtmlArtifactDocument, type PublishedHtmlArtifactFrameProps, type PublishedHtmlArtifactToolBridge, } from "./published-html-artifact-frame.js";
+export { SpreadsheetArtifactSurface, SpreadsheetGrid, SpreadsheetProjectionGrid, type SpreadsheetArtifactSurfaceProps, type SpreadsheetCommit, type SpreadsheetDimensionCommit, type SpreadsheetRangeCommit, type SpreadsheetGridProps, type SpreadsheetGridProjection, type SpreadsheetProjectionCell, type SpreadsheetProjectionGridProps, type SpreadsheetSelection, type SpreadsheetViewport, } from "./spreadsheet-grid.js";
 export { EditableSpreadsheetArtifactSurface, EditableSpreadsheetGrid, type EditableSpreadsheetArtifactSurfaceProps, type EditableSpreadsheetGridProps, } from "./editable-spreadsheet.js";
 export { BrowserEditableArtifactWorkbench, EditableArtifactWorkbench, EditableArtifactWorkbenchHost, type BrowserEditableArtifactWorkbenchOptions, type BrowserEditableArtifactWorkbenchProps, type EditableArtifactWorkbenchHostProps, type EditableArtifactWorkbenchProps, } from "./editable-artifact-workbench.js";
 export { EditableDocumentArtifactSurface, type EditableDocumentArtifactSurfaceProps, } from "./editable-document.js";

package/dist/components/artifacts/inline-html-document.d.ts

@@ -0,0 +1,2 @@
+/** Conversation styling/helpers only. Rendering and tool transport remain in the Site frame. */
+export declare function inlineHtmlDocument(fragment: string): string;

package/dist/components/artifacts/latest-task-runner.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Runs one task at a time; a task scheduled while another runs replaces any
+ * task still waiting, so only the newest request starts next. Editors use it
+ * for projection loads: replaying a long history emits one revision per
+ * committed transaction, and composing a projection for each of them at once
+ * would overrun the artifact Worker's bounded request queue.
+ */
+export declare function createLatestTaskRunner(): (task: () => Promise<void>) => void;
+/**
+ * One runner per artifact session. A composition still pending on a replaced
+ * session (for example one whose Worker stopped answering) must never hold up
+ * the next session's first load, so the runner is scoped to the session object
+ * rather than to the component.
+ */
+export declare function useLatestTaskRunner(session: object): (task: () => Promise<void>) => void;

package/dist/components/artifacts/presentation-editor.d.ts

@@ -255,6 +255,7 @@ export type PresentationProjectionEditorProps = Omit<PresentationEditorProps, "p
 };
 export type PresentationProjectionArtifactSurfaceProps = PresentationProjectionEditorProps & {
     title?: string | undefined;
+    showHeader?: boolean | undefined;
     subtitle?: ReactNode | undefined;
     actions?: ReactNode | undefined;
     busy?: boolean | undefined;
@@ -270,6 +271,8 @@ export type PresentationEditorProps = {
     zoom?: number | undefined;
     defaultZoom?: number | undefined;
     readOnly?: boolean | undefined;
+    /** Temporarily fence commands while keeping the current editor draft. */
+    authoringBlockedReason?: "pending_conflict" | "prior_writer" | undefined;
     className?: string | undefined;
     onSlideChange?: ((slide: Slide, index: number) => void) | undefined;
     onSelectionChange?: ((object: PresentationObject | null, slide: Slide) => void) | undefined;
@@ -279,6 +282,7 @@ export type PresentationEditorProps = {
 };
 export type PresentationArtifactSurfaceProps = PresentationEditorProps & {
     title?: string | undefined;
+    showHeader?: boolean | undefined;
     subtitle?: ReactNode | undefined;
     actions?: ReactNode | undefined;
     busy?: boolean | undefined;
@@ -291,7 +295,7 @@ export declare function PresentationEditor(props: PresentationEditorProps): impo
  */
 export declare function PresentationProjectionEditor({ projection, commit, onCommandError, onSlideChange, onSelectionChange, readOnly, ...props }: PresentationProjectionEditorProps): import("react").JSX.Element;
 /** Artifact chrome plus the editor, for drop-in SDK embedding. */
-export declare function PresentationArtifactSurface({ presentation, title, subtitle, actions, busy, className, ...editorProps }: PresentationArtifactSurfaceProps): import("react").JSX.Element;
+export declare function PresentationArtifactSurface({ presentation, title, showHeader, subtitle, actions, busy, className, ...editorProps }: PresentationArtifactSurfaceProps): import("react").JSX.Element;
 /** Artifact chrome over the projection-first editor. */
-export declare function PresentationProjectionArtifactSurface({ projection, title, subtitle, actions, busy, className, ...editorProps }: PresentationProjectionArtifactSurfaceProps): import("react").JSX.Element;
+export declare function PresentationProjectionArtifactSurface({ projection, title, showHeader, subtitle, actions, busy, className, ...editorProps }: PresentationProjectionArtifactSurfaceProps): import("react").JSX.Element;
 export {};

package/dist/components/artifacts/published-html-artifact-frame.d.ts

@@ -1,14 +1,34 @@
-import type { CSSProperties } from "react";
+import { type SiteBridgeToolHandlers } from "@opengeni/sdk/site-bridge-host";
+import type { OpenGeniSiteSignInResult, OpenGeniSiteViewer } from "@opengeni/sdk/site";
+import { type CSSProperties } from "react";
+export { SiteBridgeDocumentLease, SiteBridgeRequestRegistry, handleSiteBridgeRequest, openGeniSiteBridgePortFromBootstrap, siteBridgeError, siteBridgeReadyMessage, } from "@opengeni/sdk/site-bridge-host";
 export declare const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX: string;
 export type PublishedHtmlArtifactFrameProps = {
     html: string;
+    autoHeight?: boolean;
+    theme?: "light" | "dark";
     title: string;
     className?: string;
     style?: CSSProperties;
+    toolBridge?: PublishedHtmlArtifactToolBridge;
+    /**
+     * The signed-in member viewing the Site, answered to `site.viewer`. When
+     * omitted the frame does not advertise viewers and the SDK resolves `null`.
+     */
+    viewer?: OpenGeniSiteViewer;
+    /**
+     * Answer `site.auth.signIn()`. The console viewer is already signed in, so
+     * the default resolves `{ started: false }`.
+     */
+    onSignIn?: () => Promise<OpenGeniSiteSignInResult> | OpenGeniSiteSignInResult;
 };
+/** Host handlers for Site tools and the Site HTTP channel (see `@opengeni/sdk/site-bridge-host`). */
+export type PublishedHtmlArtifactToolBridge = SiteBridgeToolHandlers;
+export declare function publishedHtmlArtifactDocument(html: string, toolBridgeEnabled: boolean): string;
 /**
  * Render exact published HTML in an opaque-origin iframe. Artifact scripts,
- * external resources, forms, popups, and downloads work without granting
- * parent-origin authority, shared cookies/storage, or top-level navigation.
+ * external resources, forms, popups, downloads, and the host-filtered tool
+ * bridge work without granting parent-origin authority, shared cookies/storage,
+ * or top-level navigation.
  */
 export declare function PublishedHtmlArtifactFrame(props: PublishedHtmlArtifactFrameProps): import("react").JSX.Element;

package/dist/components/artifacts/session-artifact-viewer.d.ts

@@ -0,0 +1,39 @@
+import { type ClientOverride } from "../../session-context.js";
+import { type ArtifactLabels } from "./artifact-chrome.js";
+import { type EditableArtifactRuntimes } from "./editable-artifact-view.js";
+import type { SiteToolBridgeFactory } from "./chat-interactive-block.js";
+/** An artifact opened from a session: the targets agent links and Site previews name. */
+export type SessionArtifactTarget = Readonly<{
+    kind: "editable-artifact";
+    artifactId: string;
+    title?: string | undefined;
+} | {
+    kind: "site";
+    artifactId: string;
+    title?: string | undefined;
+}>;
+/** Every string the viewer shows, including its Site frame and states. */
+export type SessionArtifactViewerLabels = Partial<ArtifactLabels>;
+export type SessionArtifactViewerProps = ClientOverride & Readonly<{
+    /** The conversation the artifact belongs to; the proxy only serves its artifacts. */
+    sessionId: string;
+    target: SessionArtifactTarget;
+    onClose: () => void;
+    /** Show a Back control, for example to return to the conversation on phones. */
+    onBack?: (() => void) | undefined;
+    /** Browser kernels and Worker for documents, spreadsheets, and presentations. */
+    editableRuntimes?: EditableArtifactRuntimes | undefined;
+    theme?: "light" | "dark" | undefined;
+    /** Host-owned Site API access; omit it and Sites render without workspace tools. */
+    siteToolBridge?: SiteToolBridgeFactory | undefined;
+    labels?: SessionArtifactViewerLabels | undefined;
+    className?: string | undefined;
+}>;
+/**
+ * A host-mountable viewer for one editable artifact or Site from a session,
+ * with its own header (title, Back, Close). Mount it in any sized container
+ * (a side panel, a sheet); it fills it. Data flows through the provider's
+ * client and `createSessionProxyHandler({ artifacts: true })`, scoped to
+ * `sessionId`.
+ */
+export declare function SessionArtifactViewer({ labels, ...props }: SessionArtifactViewerProps): import("react").JSX.Element;

package/dist/components/artifacts/site-view.d.ts

@@ -0,0 +1,26 @@
+import type { SiteViewer } from "@opengeni/sdk";
+import type { SiteSnapshotClient, SiteToolBridgeFactory } from "./chat-interactive-block.js";
+export type SiteViewProps = {
+    client: SiteSnapshotClient;
+    workspaceId: string;
+    siteId: string;
+    /** Host-owned Site API access. Omit it and the Site renders without workspace tools. */
+    toolBridge?: SiteToolBridgeFactory | undefined;
+    /** Who is viewing, answered to the Site's `site.viewer`. */
+    viewer?: SiteViewer | undefined;
+    theme?: "light" | "dark" | undefined;
+    /** Shown instead of the archived notice; the console links to its full page. */
+    archivedMessage?: string | undefined;
+    /** Show the Site title in the frame bar; hide it under a host header that already does. */
+    showTitle?: boolean | undefined;
+    /** Loading copy; defaults to "Loading Site…". */
+    loadingLabel?: string | undefined;
+    /** Called with the loaded title, for a host header. */
+    onTitle?: ((title: string) => void) | undefined;
+    className?: string | undefined;
+};
+/**
+ * A published Site filling its container: the console's session dock and an
+ * embedding host's artifact viewer render the same view.
+ */
+export declare function SiteView({ client, workspaceId, siteId, toolBridge, viewer, theme, archivedMessage, showTitle, loadingLabel, onTitle, className, }: SiteViewProps): import("react").JSX.Element;

package/dist/components/artifacts/spreadsheet-command-queue.d.ts

@@ -0,0 +1,20 @@
+export type SpreadsheetCommandTarget = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/** Keep independent failures visible without replaying over newer overlapping edits. */
+export declare function useSpreadsheetCommandQueue({ scopeKey, enabled, onCommandError, }: {
+    scopeKey: string;
+    enabled: boolean;
+    onCommandError?: ((error: Error) => void) | undefined;
+}): {
+    run: (invoke: (id: number) => void | Promise<void>, retry: () => void, rollback: (id: number) => void, target?: SpreadsheetCommandTarget | (() => SpreadsheetCommandTarget), accepted?: (id: number) => void) => void;
+    clearPreflightFailure: () => void;
+    pendingCount: number;
+    error: {
+        message: string;
+        retry: (() => void) | undefined;
+    } | null;
+};

package/dist/components/artifacts/spreadsheet-download.d.ts

@@ -0,0 +1,7 @@
+import type { EditableArtifactSession } from "@opengeni/sdk/editable-artifacts";
+export type SpreadsheetDownload = (signal: AbortSignal) => Promise<Blob>;
+export declare function SpreadsheetDownloadButton({ session, title, download, }: {
+    session: EditableArtifactSession;
+    title: string;
+    download: SpreadsheetDownload;
+}): import("react").JSX.Element;

package/dist/components/artifacts/spreadsheet-general-display.d.ts

@@ -0,0 +1,24 @@
+/**
+ * DISPLAY-ONLY General number formatting for spreadsheet canvas and a11y
+ * labels. This is not numeric arithmetic and must never feed formula-bar /
+ * cell-edit `input`, stored cells, formula results, or serialized exports.
+ *
+ * Policy for independent review:
+ * IEEE-754 cannot represent many decimal fractions exactly, so values such as
+ * `110.00000000000001` and `0.1 + 0.2` leak binary residue through `String(n)`.
+ * General display therefore collapses a finite number to 15 significant decimal
+ * digits — the same bound spreadsheet General uses — via
+ * `String(Number(value.toPrecision(15)))`.
+ *
+ * That mapping yields `110` / `220` / `0.3` for the noisy cases while keeping
+ * exponent-scale values (`1e-20`, `1e21`) and ~15-digit legitimate precision.
+ * Integers stringify without a decimal; `-0` displays as `0`; non-finite
+ * numbers, dates, booleans, errors, and strings keep their existing labels.
+ *
+ * Do not reuse `Intl.NumberFormat({ maximumFractionDigits: 12 })` from the
+ * artifact-tool renderer: 12 fraction digits rounds `1e-20` to `0` and truncates
+ * high-precision values that General should still show.
+ */
+export declare function formatSpreadsheetGeneralDisplay(value: unknown): string;
+/** Exact edit/formula-bar source. Numbers stay `String(value)` with no General collapse. */
+export declare function spreadsheetCellEditSource(value: unknown): string;

package/dist/components/artifacts/spreadsheet-grid.d.ts

@@ -1,6 +1,8 @@
 import type { Workbook, Worksheet } from "@opengeni/artifact-tool/reference";
 import { type ReactNode } from "react";
 import { type SpreadsheetCanvasCellFormat, type SpreadsheetCanvasProjection } from "./spreadsheet-canvas.js";
+import { type SpreadsheetDimensionCommit } from "./spreadsheet-resize.js";
+export type { SpreadsheetDimensionCommit } from "./spreadsheet-resize.js";
 type CellCoordinate = {
     row: number;
     col: number;
@@ -52,6 +54,7 @@ export type SpreadsheetGridProps = {
     overscanColumns?: number | undefined;
     onSelectionChange?: ((selection: SpreadsheetSelection) => void) | undefined;
     onCommit?: ((commit: SpreadsheetCommit) => void) | undefined;
+    onResize?: ((change: SpreadsheetDimensionCommit) => void) | undefined;
     onViewportChange?: ((viewport: SpreadsheetViewport) => void) | undefined;
     className?: string | undefined;
 };
@@ -91,6 +94,11 @@ export type SpreadsheetProjectionGridProps = {
     commit?: ((commit: SpreadsheetCommit) => void | Promise<void>) | undefined;
     commitRange?: ((commit: SpreadsheetRangeCommit) => void | Promise<void>) | undefined;
     clear?: ((selection: SpreadsheetSelection) => void | Promise<void>) | undefined;
+    resize?: ((change: SpreadsheetDimensionCommit) => void | Promise<void>) | undefined;
+    /** Server-unacknowledged changes, distinct from local command acceptance. */
+    pendingTransactions?: number | undefined;
+    syncStatus?: string | undefined;
+    syncError?: string | undefined;
     onCommandError?: ((error: Error) => void) | undefined;
     onViewportChange?: ((viewport: SpreadsheetViewport) => void) | undefined;
     className?: string | undefined;
@@ -104,10 +112,9 @@ export type SpreadsheetArtifactSurfaceProps = Omit<SpreadsheetGridProps, "worksh
 };
 /** A reusable workbook shell with first-class sheet switching. */
 export declare function SpreadsheetArtifactSurface({ workbook, title, subtitle, actions, initialSheetId, allowAddSheet, readOnly, ...gridProps }: SpreadsheetArtifactSurfaceProps): import("react").JSX.Element;
-export declare function SpreadsheetGrid({ workbook, worksheet, readOnly, rowCount: requestedRowCount, columnCount: requestedColumnCount, overscanRows, overscanColumns, onSelectionChange, onCommit, onViewportChange, className, }: SpreadsheetGridProps): import("react").JSX.Element;
+export declare function SpreadsheetGrid({ workbook, worksheet, readOnly, rowCount: requestedRowCount, columnCount: requestedColumnCount, overscanRows, overscanColumns, onSelectionChange, onCommit, onResize, onViewportChange, className, }: SpreadsheetGridProps): import("react").JSX.Element;
 /**
  * Two-axis virtualized, accessible spreadsheet projection. The caller owns
  * durable model state; React owns only viewport, selection, and edit state.
  */
-export declare function SpreadsheetProjectionGrid({ projection, readOnly, overscanRows, overscanColumns, onSelectionChange, commit, commitRange, clear, onCommandError, onViewportChange, className, }: SpreadsheetProjectionGridProps): import("react").JSX.Element;
-export {};
+export declare function SpreadsheetProjectionGrid({ projection, readOnly, overscanRows, overscanColumns, onSelectionChange, commit, commitRange, clear, resize, pendingTransactions, syncStatus, syncError, onCommandError, onViewportChange, className, }: SpreadsheetProjectionGridProps): import("react").JSX.Element;

package/dist/components/artifacts/spreadsheet-resize.d.ts

@@ -0,0 +1,50 @@
+import { type KeyboardEvent, type PointerEvent } from "react";
+export type SpreadsheetDimensionAxis = "row" | "column";
+/** One pixel dimension change, committed after a drag or keyboard gesture. */
+export type SpreadsheetDimensionCommit = {
+    sheetId: string;
+    axis: SpreadsheetDimensionAxis;
+    index: number;
+    size: number;
+};
+type ResizeOptions = {
+    sheetId: string;
+    generationId: string | null;
+    revision: string | number;
+    rowHeights: readonly (readonly [number, number])[];
+    columnWidths: readonly (readonly [number, number])[];
+    defaultRowHeight: number;
+    defaultColumnWidth: number;
+    enabled: boolean;
+    commit?: ((change: SpreadsheetDimensionCommit) => void | Promise<void>) | undefined;
+    onCommandError?: ((error: Error) => void) | undefined;
+    onStart?: (() => void) | undefined;
+};
+/** Transient gesture/pending previews only; the caller owns durable dimensions. */
+export declare function useSpreadsheetResizing(options: ResizeOptions): {
+    rowHeights: readonly (readonly [number, number])[];
+    columnWidths: readonly (readonly [number, number])[];
+    previewKey: string;
+    handleProps: (axis: SpreadsheetDimensionAxis, index: number) => {
+        onPointerDown(event: PointerEvent<HTMLDivElement>): void;
+        onPointerMove(event: PointerEvent<HTMLDivElement>): void;
+        onPointerUp(event: PointerEvent<HTMLDivElement>): void;
+        onPointerCancel(event: PointerEvent<HTMLDivElement>): void;
+        onLostPointerCapture(event: PointerEvent<HTMLDivElement>): void;
+        onKeyDown(event: KeyboardEvent<HTMLDivElement>): void;
+        onKeyUp(event: KeyboardEvent<HTMLDivElement>): void;
+        onBlur(): void;
+    };
+    pendingCount: number;
+    error: {
+        message: string;
+        retry: (() => void) | undefined;
+    } | null;
+    clearError: () => void;
+};
+export declare function SpreadsheetResizeHandle({ axis, label, size, ...handlers }: {
+    axis: SpreadsheetDimensionAxis;
+    label: string;
+    size: number;
+} & ReturnType<ReturnType<typeof useSpreadsheetResizing>["handleProps"]>): import("react").JSX.Element;
+export {};

package/dist/components/artifacts/spreadsheet-submissions.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+export declare function SpreadsheetSubmissionProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSpreadsheetSubmissions(): {
+    getPending: () => number;
+    subscribe: (listener: () => void) => () => void;
+    run<T>(invoke: () => Promise<T>): Promise<T>;
+};

package/dist/components/artifacts/visualization-assets.gen.d.ts

@@ -0,0 +1,2 @@
+export declare const VISUALIZATION_CSS = "/* Adapted from Codex visualize 1.0.32; shared with the Opengeni visualization skill. */\n:root {\n  color-scheme: light dark;\n  background-color: var(\n    --background,\n    var(--color-background-primary, light-dark(rgb(255 255 255), rgb(24 24 24)))\n  ) !important;\n\n  /* Agent-facing contract; keep in sync with SKILL.md. */\n  --background: var(\n    --color-background-primary,\n    light-dark(rgb(255 255 255), rgb(24 24 24))\n  );\n  --foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --card: color-mix(in oklab, var(--foreground) 5%, var(--background));\n  --card-foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --popover: var(\n    --color-background-secondary,\n    light-dark(rgb(255 255 255), rgb(45 45 45))\n  );\n  --popover-foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --primary: var(\n    --color-text-info,\n    light-dark(rgb(51 156 255), rgb(131 195 255))\n  );\n  --primary-foreground: var(\n    --color-text-inverse,\n    light-dark(rgb(255 255 255), rgb(13 13 13))\n  );\n  --secondary: var(\n    --color-background-secondary,\n    light-dark(rgb(255 255 255 / 96%), rgb(54 54 54 / 96%))\n  );\n  --secondary-foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --muted: color-mix(in srgb, var(--foreground) 10%, transparent);\n  --muted-foreground: var(\n    --color-text-secondary,\n    light-dark(rgb(26 28 31 / 49.4%), rgb(255 255 255 / 49.8%))\n  );\n  --accent: var(\n    --color-background-info,\n    light-dark(rgb(229 242 255), rgb(13 39 63))\n  );\n  --accent-foreground: var(\n    --color-text-info,\n    light-dark(rgb(51 156 255), rgb(131 195 255))\n  );\n  --destructive: var(\n    --color-text-warning,\n    light-dark(rgb(226 85 7), rgb(255 133 73))\n  );\n  --border: var(\n    --color-border-secondary,\n    light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))\n  );\n  --input: var(\n    --color-border-primary,\n    light-dark(\n      rgb(26 28 31 / 11.8%),\n      color-mix(in oklab, rgb(0 0 0) 10%, transparent)\n    )\n  );\n  --ring: var(\n    --color-ring-primary,\n    light-dark(rgb(51 156 255), rgb(131 195 255 / 76%))\n  );\n  --font-size-base: var(--font-text-md-size, 14px);\n  --blue: light-dark(rgb(51 156 255), rgb(51 156 255));\n  --orange: light-dark(rgb(226 85 7), rgb(251 106 34));\n  --green: light-dark(rgb(0 162 64), rgb(64 201 119));\n  --red: light-dark(rgb(224 46 42), rgb(255 103 100));\n  --purple: light-dark(rgb(146 79 247), rgb(173 123 249));\n  --yellow: light-dark(rgb(255 195 0), rgb(255 210 64));\n  --viz-series-1: var(--primary);\n  --viz-series-2: light-dark(rgb(243 136 59), rgb(245 154 86));\n  --viz-series-3: light-dark(rgb(93 201 119), rgb(116 213 139));\n  --viz-series-4: light-dark(rgb(235 119 177), rgb(240 143 192));\n  --viz-series-5: light-dark(rgb(155 121 236), rgb(170 145 239));\n  --viz-series-6: light-dark(rgb(58 185 177), rgb(90 203 194));\n\n  /* Internal implementation variables; not part of the agent contract. */\n  --font-sans: -apple-system, system-ui, \"Segoe UI\", sans-serif;\n  --font-mono:\n    ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\",\n    monospace;\n  --font-size-normal: max(11px, var(--font-size-base));\n  --font-size-tooltip: calc(var(--font-size-base) - 1px);\n  --font-size-small: max(11px, calc(var(--font-size-base) - 2px));\n  --font-size-h1: calc(var(--font-size-normal) * 1.7142857143);\n  --font-size-h2: calc(var(--font-size-normal) * 1.4285714286);\n  --font-size-h3: calc(var(--font-size-normal) * 1.2857142857);\n  --font-weight-normal: 430;\n  --font-weight-medium: 500;\n  --icon-size: 16px;\n  --line-height-normal: calc(var(--font-size-normal) * 1.5);\n  --line-height-tooltip: calc(var(--font-size-tooltip) * 1.4285714286);\n  --line-height-small: calc(var(--font-size-small) + 4px);\n  --corner-shape: round;\n  --radius: var(--border-radius-lg, 10px);\n  --radius-sm: calc(var(--radius) * 0.6);\n  --radius-md: calc(var(--radius) * 0.8);\n  --radius-lg: var(--radius);\n  --radius-2xl: calc(var(--radius) * 1.6);\n  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);\n  --checkmark-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M 12.8961 3.64101C13.1297 3.41418 13.4984 3.37523 13.7779 3.56581C14.0571 3.75635 14.1554 4.11331 14.0299 4.41347L13.9615 4.53847L7.71151 13.7045C7.59411 13.8767 7.4063 13.9877 7.19881 14.0072C6.99136 14.0267 6.78564 13.9533 6.63826 13.806L2.88826 10.056L2.79842 9.9457C2.6192 9.67407 2.64927 9.30496 2.88826 9.06581C3.12738 8.82669 3.49647 8.79676 3.76815 8.97597L3.8785 9.06581L7.03084 12.2182L12.8053 3.74941L12.8961 3.64101Z'/%3E%3C/svg%3E\");\n\n  /* Legacy aliases; not part of the current agent contract. */\n  --viz-bg: transparent;\n  --viz-panel: var(--card);\n  --viz-border: var(--border);\n  --viz-text: var(--foreground);\n  --viz-muted: var(--muted-foreground);\n  --viz-accent: var(--primary);\n  --viz-accent-text: var(--primary-foreground);\n  --viz-accent-bg: var(--accent);\n  --viz-font-size: var(--font-size-base);\n  --viz-warning: var(--destructive);\n}\n\n:root[data-theme=\"light\"] {\n  color-scheme: light;\n}\n\n:root[data-theme=\"dark\"] {\n  color-scheme: dark;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml > body {\n  /* Preserve MCP aliases for older inline renderers without creating :root cycles. */\n  --color-background-primary: var(\n    --background,\n    light-dark(rgb(255 255 255), rgb(24 24 24))\n  );\n  --color-text-primary: var(\n    --foreground,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --color-border-secondary: var(\n    --border,\n    light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))\n  );\n\n  margin: 0;\n  padding: var(--visualize-paint-gutter, 16px);\n  color: var(--foreground);\n  background: transparent !important;\n  font-family: var(--font-sans) !important;\n  font-size: var(--font-size-normal);\n  font-weight: var(--font-weight-normal);\n  line-height: var(--line-height-normal);\n}\n\na {\n  color: color-mix(in srgb, var(--viz-accent) 80%, var(--viz-text) 20%);\n  cursor: pointer;\n  font-weight: var(--font-weight-medium, 500);\n  text-decoration: none;\n  text-underline-offset: 2px;\n}\n\na:is(:hover, :focus-visible) {\n  text-decoration-line: underline;\n  text-decoration-style: dashed;\n  text-decoration-thickness: 0.5px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n  margin-block: 0;\n}\n\nh1 {\n  font-size: var(--font-size-h1);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.25;\n}\n\nh2 {\n  font-size: var(--font-size-h2);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.25;\n}\n\nh3,\nh4,\nh5,\nh6 {\n  font-size: var(--font-size-h3);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.3;\n}\n\nb,\nstrong,\nth {\n  font-weight: var(--font-weight-medium);\n}\n\ncode:not(pre code) {\n  display: inline;\n  padding: 1px 6px;\n  border-radius: var(--radius-sm);\n  corner-shape: var(--corner-shape);\n  background: var(--muted);\n  font-family: var(--font-mono);\n  font-size: 0.92em;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n  word-break: break-word;\n}\n\n.table-responsive {\n  width: 100%;\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--foreground);\n  font: inherit;\n  text-align: start;\n}\n\n.table :is(th, td) {\n  padding-block: 10px;\n  padding-inline: 0 24px;\n  overflow-wrap: anywhere;\n  border-bottom: 1px solid var(--border);\n  text-align: start;\n  vertical-align: top;\n}\n\n.table-responsive > .table :is(th, td) {\n  overflow-wrap: break-word;\n}\n\n.table :is(th, td):last-child {\n  padding-inline-end: 0;\n}\n\n.table :is(caption, thead th) {\n  font-weight: 600;\n}\n\n.table thead th {\n  padding-block: 8px;\n  border-bottom-color: color-mix(in srgb, var(--foreground) 16%, transparent);\n}\n\n.table tbody tr:last-child :is(th, td) {\n  border-bottom: 0;\n}\n\n.table.table-sm :is(th, td) {\n  padding-block: 6px;\n}\n\n.table.table-sm :is(th, td):not(:last-child) {\n  padding-inline-end: 16px;\n}\n\n.table :is(.text-end, [align=\"right\"]) {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n.table :is(.text-center, [align=\"center\"]) {\n  text-align: center;\n}\n\n.table .text-nowrap {\n  white-space: nowrap;\n}\n\n#widget {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n  padding: 0;\n  background: transparent !important;\n}\n\n.card {\n  min-width: 0;\n  padding: 12px;\n  overflow: hidden;\n  overflow-wrap: break-word;\n  border-radius: var(--radius-2xl);\n  corner-shape: var(--corner-shape);\n  color: var(--card-foreground);\n  background: var(--card);\n}\n\n#widget > :not(.card, .progress) {\n  width: 100% !important;\n  max-width: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  box-shadow: none !important;\n}\n\n.tooltip {\n  position: fixed;\n  z-index: 50;\n  top: 0;\n  left: 0;\n  width: max-content;\n  max-width: min(\n    20rem,\n    var(--tooltip-available-width, calc(100vw - 10px)),\n    calc(100vw - 10px)\n  );\n  max-height: min(\n    var(--tooltip-available-height, calc(100vh - 10px)),\n    calc(100vh - 10px)\n  );\n  padding: 4px 8px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--popover-foreground);\n  background: var(--popover);\n  box-shadow: none;\n  font-size: var(--font-size-tooltip);\n  line-height: var(--line-height-tooltip);\n  overflow-wrap: break-word;\n  white-space: normal;\n  pointer-events: none;\n  user-select: none;\n}\n\n.viz-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(max(180px, 24%), 1fr));\n  gap: 10px;\n}\n\n.viz-stat {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.viz-stat-value {\n  font-size: var(--font-size-h2);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.25;\n}\n\n.viz-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\nhr {\n  width: 100%;\n  height: 1px;\n  margin-block: 6px;\n  border: 0;\n  background: var(--border);\n}\n\n.nav {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 4px;\n}\n\n.progress {\n  display: flex;\n  height: 8px;\n  margin-block: calc((var(--line-height-normal, 1.5em) - 8px) / 2);\n  overflow: hidden;\n  border: 0;\n  border-radius: var(--radius-full);\n  background: var(--muted);\n}\n\n.progress-bar:only-child {\n  border-radius: var(--radius-full);\n}\n\n.progress-bar {\n  height: 100%;\n  flex-shrink: 0;\n  border: 0;\n  background: var(--viz-series-1);\n}\n\n.viz-badge {\n  padding: 3px 8px;\n  border-radius: var(--radius-full);\n  color: var(--accent-foreground);\n  background: var(--accent);\n  font-weight: var(--font-weight-medium);\n}\n\nsmall,\n.text-small,\n.viz-badge {\n  font-size: var(--font-size-small);\n  line-height: var(--line-height-small);\n}\n\n.text-muted {\n  color: var(--muted-foreground);\n}\n\n.tabular-nums {\n  font-variant-numeric: tabular-nums;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.viz-controls {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n.viz-controls > .form-label {\n  display: grid;\n  min-width: min(100%, 260px);\n  flex: 1 1 280px;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: 2px 12px;\n  margin-bottom: 0;\n}\n\n.viz-controls > .form-label > :is(.form-control, .form-range, .form-select) {\n  grid-column: 1 / -1;\n}\n\n.btn,\n.nav-link,\n.form-check-input,\n.form-control,\n.form-range,\n.form-select {\n  font: inherit;\n}\n\n.btn,\n.nav-link {\n  appearance: button;\n  display: inline-flex;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n  min-height: 28px;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  margin: 0;\n  padding: 0 8px;\n  -webkit-app-region: no-drag;\n  border: 1px solid var(--input);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--secondary-foreground);\n  background: var(--secondary);\n  cursor: var(--cursor-interaction, pointer);\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n}\n\n.btn:is(.btn-block, .viz-tile) {\n  inline-size: 100%;\n}\n\n.btn.viz-tile {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\na.btn {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.btn:not(:disabled):hover,\n.nav-link:not(:disabled):not([aria-disabled=\"true\"]):hover {\n  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.btn-primary {\n  border-color: transparent;\n  color: var(--primary-foreground);\n  background: var(--foreground);\n  background-clip: padding-box;\n}\n\n.btn-primary .text-muted {\n  color: color-mix(in srgb, var(--primary-foreground) 50%, transparent);\n}\n\n.btn-primary:not(:disabled):hover {\n  background: color-mix(in srgb, var(--foreground) 80%, transparent);\n  background-clip: padding-box;\n}\n\n.btn-ghost {\n  border-color: transparent;\n  color: var(--muted-foreground);\n  background: transparent;\n}\n\n.btn-ghost:not(:disabled):hover {\n  color: var(--foreground);\n  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.nav-pills .nav-link {\n  min-width: 0;\n  border-color: transparent;\n  color: var(--muted-foreground);\n  background: transparent;\n}\n\n.nav-justified .nav-link {\n  flex: 1 1 0;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\n.nav-pills .nav-link.active {\n  color: var(--foreground);\n  background: var(--muted);\n}\n\n.btn:disabled,\n.nav-link:disabled,\n.nav-link[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n[data-lucide] {\n  stroke-width: 1.6;\n}\n\n.form-label {\n  display: block;\n  margin-bottom: 6px;\n  color: var(--foreground);\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  min-height: 28px;\n  padding: 0 8px;\n  outline: none;\n  border: 1px solid var(--input);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--foreground);\n  background: var(--secondary);\n}\n\n.form-control::placeholder {\n  color: var(--muted-foreground);\n}\n\n.form-control[type=\"file\"] {\n  padding: 0;\n  overflow: hidden;\n  cursor: var(--cursor-interaction, pointer);\n}\n\n.form-control[type=\"file\"]::file-selector-button {\n  min-height: 26px;\n  margin-right: 8px;\n  padding: 0 8px;\n  border: 0;\n  border-right: 1px solid var(--input);\n  color: var(--secondary-foreground);\n  background: var(--secondary);\n  cursor: inherit;\n  font: inherit;\n}\n\n.form-control[type=\"file\"]:not(:disabled):hover::file-selector-button {\n  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.form-control-color[type=\"color\"] {\n  width: 40px;\n  height: 28px;\n  padding: 3px;\n  cursor: var(--cursor-interaction, pointer);\n}\n\n.form-control-color[type=\"color\"]::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.form-control-color[type=\"color\"]::-webkit-color-swatch {\n  border: 0;\n  border-radius: calc(var(--radius-lg) - 4px);\n  corner-shape: var(--corner-shape);\n}\n\ntextarea.form-control {\n  height: auto;\n  min-height: 72px;\n  padding: 8px 10px;\n  resize: vertical;\n}\n\n.form-control:focus-visible {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-control:disabled,\n.form-select:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.form-select {\n  appearance: none;\n  display: block;\n  width: 100%;\n  min-height: 28px;\n  margin: 0;\n  padding: 0 32px 0 8px;\n  outline: none;\n  border: 1px solid var(--input);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--foreground);\n  background-color: var(--secondary);\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),\n    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);\n  background-position:\n    calc(100% - 14px) 50%,\n    calc(100% - 10px) 50%;\n  background-repeat: no-repeat;\n  background-size: 4px 4px;\n  cursor: var(--cursor-interaction, default);\n}\n\n.form-select:not(:disabled):hover {\n  background-color: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.form-select:focus-visible {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-check {\n  display: flex;\n  min-height: 20px;\n  align-items: center;\n  gap: 6px;\n}\n\n.form-check-input {\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  flex: 0 0 auto;\n  margin: 0;\n  border: 1px solid var(--input);\n  color: var(--primary-foreground);\n  background-color: transparent;\n  cursor: var(--cursor-interaction, default);\n  transition:\n    background-color 150ms,\n    border-color 150ms,\n    box-shadow 150ms;\n}\n\n.form-check:not(.form-switch) .form-check-input[type=\"checkbox\"] {\n  border-color: var(--input);\n  border-radius: var(--radius-sm);\n  corner-shape: var(--corner-shape);\n  background-color: var(--secondary);\n  box-shadow: var(--shadow-sm);\n}\n\n.form-check:not(.form-switch)\n  .form-check-input:not(:disabled):not(:checked):hover {\n  background-color: var(--card);\n}\n\n.form-check:not(.form-switch) .form-check-input[type=\"checkbox\"]:checked {\n  border-color: var(--primary);\n  background-color: var(--primary);\n}\n\n.form-check:not(.form-switch)\n  .form-check-input[type=\"checkbox\"]:checked::before {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: var(--primary-foreground);\n  content: \"\";\n  mask: var(--checkmark-image) center / 12px 12px no-repeat;\n}\n\n.form-check-input[type=\"radio\"] {\n  width: 14px;\n  height: 14px;\n  border-radius: var(--radius-full);\n}\n\n.form-check-input[type=\"radio\"]:checked {\n  border: 2px solid var(--primary);\n  background:\n    radial-gradient(circle, var(--primary-foreground) 0 2.5px, transparent 3px),\n    var(--primary);\n}\n\n.form-check:not(.form-switch) .form-check-input:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n.form-check:not(.form-switch) .form-check-input:disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.form-check:not(.form-switch) .form-check-input:disabled + .form-check-label {\n  cursor: not-allowed;\n}\n\n.form-switch .form-check-input:disabled,\n.form-switch .form-check-input:disabled + .form-check-label {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.form-check-label {\n  color: var(--foreground);\n  cursor: var(--cursor-interaction, default);\n}\n\n.form-switch .form-check-input {\n  position: relative;\n  width: 32px;\n  height: 20px;\n  border: 0;\n  border-radius: var(--radius-full);\n  background: var(--muted);\n  box-shadow: none;\n  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.form-switch .form-check-input::before {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  box-sizing: border-box;\n  border: 1px solid light-dark(var(--primary-foreground), var(--foreground));\n  border-radius: var(--radius-full);\n  background: light-dark(var(--primary-foreground), var(--foreground));\n  box-shadow: var(--shadow-sm);\n  content: \"\";\n  transform: translate(2px, -50%);\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.form-switch .form-check-input:checked {\n  background: var(--primary);\n}\n\n.form-switch .form-check-input:checked::before {\n  transform: translate(14px, -50%);\n}\n\n.form-switch .form-check-input:focus-visible {\n  box-shadow: 0 0 0 2px var(--ring);\n}\n\n.form-range {\n  appearance: none;\n  display: block;\n  width: 100%;\n  height: 28px;\n  flex: 1;\n  margin: 0;\n  padding: 0;\n  outline: none;\n  border: 0;\n  accent-color: var(--primary);\n  background: linear-gradient(\n      color-mix(in srgb, var(--foreground) 7%, transparent),\n      color-mix(in srgb, var(--foreground) 7%, transparent)\n    )\n    center / 100% 2px no-repeat;\n}\n\n.form-range::-webkit-slider-runnable-track {\n  height: 28px;\n  background: transparent;\n}\n\n.form-range::-webkit-slider-thumb {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  margin-top: 4px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-full);\n  background: light-dark(var(--primary-foreground), var(--foreground));\n}\n\n.form-range:focus-visible::-webkit-slider-thumb {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-range::-moz-range-track {\n  height: 28px;\n  background: transparent;\n}\n\n.form-range::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-full);\n  background: light-dark(var(--primary-foreground), var(--foreground));\n}\n\n.form-range:focus-visible::-moz-range-thumb {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-range:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.btn:not(.btn-primary, .viz-tile):is(\n  [aria-pressed=\"true\"],\n  [aria-selected=\"true\"],\n  .is-selected\n) {\n  border-color: var(--primary);\n  color: var(--primary-foreground);\n  background: var(--primary);\n}\n\n.btn.viz-tile:is([aria-pressed=\"true\"], [aria-selected=\"true\"], .is-selected) {\n  border-color: var(--primary);\n  box-shadow: inset 0 0 0 1px var(--primary);\n}\n\n.btn:focus-visible,\n.nav-link:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n@media (pointer: coarse) {\n  .btn,\n  .nav-link,\n  .form-control,\n  .form-select {\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  /* Keep small-screen WebKit from zooming when a text field receives focus. */\n  .form-control,\n  .form-select {\n    font-size: max(16px, var(--font-size-normal));\n  }\n\n  .form-control[type=\"file\"]::file-selector-button {\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  .form-control-color[type=\"color\"] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .form-control:is(\n    [type=\"date\"],\n    [type=\"datetime-local\"],\n    [type=\"month\"],\n    [type=\"time\"],\n    [type=\"week\"]\n  ) {\n    min-width: 0;\n    max-width: 100%;\n    padding-block: 8px;\n  }\n\n  .form-check {\n    min-height: 44px;\n    padding-inline: 15px;\n  }\n\n  .form-check-input {\n    position: relative;\n  }\n\n  .form-check-input::after {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 44px;\n    height: 44px;\n    content: \"\";\n    transform: translate(-50%, -50%);\n  }\n\n  .form-check-label {\n    display: inline-flex;\n    min-width: 44px;\n    min-height: 44px;\n    align-items: center;\n  }\n\n  .form-range {\n    height: 44px;\n    touch-action: pan-y;\n  }\n\n  .form-range::-webkit-slider-runnable-track {\n    height: 44px;\n  }\n\n  .form-range::-moz-range-track {\n    height: 44px;\n  }\n\n  .form-range::-webkit-slider-thumb {\n    margin-top: 12px;\n  }\n}\n\nsvg {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n#widget > svg {\n  width: 100%;\n}\n\n/* Model-authored chart rules can otherwise stretch icons after these styles load. */\nsvg.lucide {\n  display: block;\n  width: var(--icon-size) !important;\n  height: var(--icon-size) !important;\n  flex: none;\n  margin: 0 !important;\n  stroke-width: 1.6;\n}\n\n.text-warning,\n.text-destructive {\n  color: var(--destructive);\n}\n";
+export declare const VISUALIZATION_HELPERS = "\n<script src=\"https://unpkg.com/@floating-ui/core@1.7.3/dist/floating-ui.core.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@floating-ui/dom@1.7.4/dist/floating-ui.dom.umd.min.js\"></script>\n<script>\n  (() => {\n    if (window.FloatingUIDOM == null) {\n      return;\n    }\n    const { autoUpdate, computePosition, flip, offset, shift, size } = window.FloatingUIDOM;\n    const tooltipPlacements = new Set([\"top\", \"right\", \"bottom\", \"left\"]);\n    const tooltipId = `codex-visualization-tooltip-${\n      window.crypto?.randomUUID?.() ?? Date.now().toString(36)\n    }`;\n    const tooltipGap = 5;\n    const hoverDelay = 700;\n    const skipDelay = 300;\n    let activeTrigger = null;\n    let pendingTrigger = null;\n    let tooltip = null;\n    let openTimeout = null;\n    let autoUpdateCleanup = null;\n    let positionRequest = 0;\n    let skipDelayUntil = 0;\n    let lastPointerWasTouch = false;\n    let pinnedByTouch = false;\n\n    const getTrigger = (target) =>\n      target?.nodeType === Node.ELEMENT_NODE ? target.closest(\"[data-tooltip]\") : null;\n    const containsTarget = (trigger, target) =>\n      target?.nodeType != null && trigger.contains(target);\n    const getContent = (trigger) => trigger.getAttribute(\"data-tooltip\")?.trim() ?? \"\";\n    const getPlacement = (trigger) => {\n      const placement = trigger.getAttribute(\"data-tooltip-placement\");\n      return tooltipPlacements.has(placement) ? placement : \"top\";\n    };\n    const getTooltip = () => {\n      if (tooltip == null) {\n        tooltip = document.createElement(\"div\");\n        tooltip.id = tooltipId;\n        tooltip.className = \"tooltip\";\n        tooltip.setAttribute(\"role\", \"tooltip\");\n      }\n      return tooltip;\n    };\n    const setDescribedBy = (trigger, described) => {\n      const ids = new Set(\n        (trigger.getAttribute(\"aria-describedby\") ?? \"\").split(/\\s+/).filter(Boolean),\n      );\n      if (described) {\n        ids.add(tooltipId);\n      } else {\n        ids.delete(tooltipId);\n      }\n      if (ids.size === 0) {\n        trigger.removeAttribute(\"aria-describedby\");\n      } else {\n        trigger.setAttribute(\"aria-describedby\", [...ids].join(\" \"));\n      }\n    };\n    const clearOpenTimeout = () => {\n      if (openTimeout != null) {\n        window.clearTimeout(openTimeout);\n        openTimeout = null;\n      }\n      pendingTrigger = null;\n    };\n    const closeTooltip = (activateSkipDelay = true) => {\n      clearOpenTimeout();\n      pinnedByTouch = false;\n      positionRequest += 1;\n      autoUpdateCleanup?.();\n      autoUpdateCleanup = null;\n      if (activeTrigger == null) {\n        return;\n      }\n      setDescribedBy(activeTrigger, false);\n      activeTrigger = null;\n      tooltip?.remove();\n      if (activateSkipDelay) {\n        skipDelayUntil = Date.now() + skipDelay;\n      }\n    };\n    const updatePosition = (trigger, floating) => {\n      const request = ++positionRequest;\n      void computePosition(trigger, floating, {\n        middleware: [\n          offset(tooltipGap),\n          flip({ padding: tooltipGap }),\n          shift({ padding: tooltipGap }),\n          size({\n            padding: tooltipGap,\n            apply({ availableHeight, availableWidth, elements }) {\n              elements.floating.style.setProperty(\n                \"--tooltip-available-width\",\n                `${Math.max(0, availableWidth)}px`,\n              );\n              elements.floating.style.setProperty(\n                \"--tooltip-available-height\",\n                `${Math.max(0, availableHeight)}px`,\n              );\n            },\n          }),\n        ],\n        placement: getPlacement(trigger),\n        strategy: \"fixed\",\n      })\n        .then(({ x, y }) => {\n          if (activeTrigger !== trigger || request !== positionRequest) {\n            return;\n          }\n          const scale = window.devicePixelRatio || 1;\n          floating.style.transform = `translate(${Math.round(x * scale) / scale}px, ${Math.round(y * scale) / scale}px)`;\n          floating.style.visibility = \"visible\";\n        })\n        .catch(() => {\n          if (activeTrigger === trigger && request === positionRequest) {\n            closeTooltip(false);\n          }\n        });\n    };\n    const openTooltip = (trigger) => {\n      const content = getContent(trigger);\n      if (!trigger.isConnected || content.length === 0) {\n        return;\n      }\n      clearOpenTimeout();\n      if (activeTrigger === trigger) {\n        return;\n      }\n      closeTooltip();\n      const floating = getTooltip();\n      floating.textContent = content;\n      floating.style.visibility = \"hidden\";\n      floating.style.transform = \"translate(0, 0)\";\n      document.body.appendChild(floating);\n      activeTrigger = trigger;\n      setDescribedBy(trigger, true);\n      autoUpdateCleanup = autoUpdate(trigger, floating, () => {\n        updatePosition(trigger, floating);\n      });\n    };\n    const requestOpen = (trigger, immediate = false) => {\n      if (\n        getContent(trigger).length === 0 ||\n        activeTrigger === trigger ||\n        pendingTrigger === trigger\n      ) {\n        return;\n      }\n      clearOpenTimeout();\n      pendingTrigger = trigger;\n      const delay =\n        immediate || activeTrigger != null || Date.now() < skipDelayUntil ? 0 : hoverDelay;\n      if (delay === 0) {\n        openTooltip(trigger);\n        return;\n      }\n      openTimeout = window.setTimeout(() => {\n        openTimeout = null;\n        pendingTrigger = null;\n        openTooltip(trigger);\n      }, delay);\n    };\n    const handlePointerOpen = (event) => {\n      if (event.pointerType === \"touch\") {\n        return;\n      }\n      const trigger = getTrigger(event.target);\n      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {\n        return;\n      }\n      requestOpen(trigger);\n    };\n    const handlePointer = (event) => {\n      lastPointerWasTouch = event.type === \"pointerdown\" && event.pointerType === \"touch\";\n    };\n    const handleTouchClick = (event) => {\n      const isTouch = event.pointerType === \"touch\" || lastPointerWasTouch;\n      lastPointerWasTouch = false;\n      if (!isTouch || event.detail === 0) {\n        return;\n      }\n      const trigger = getTrigger(event.target);\n      if (\n        trigger == null ||\n        !trigger.isConnected ||\n        getContent(trigger).length === 0 ||\n        (pinnedByTouch && activeTrigger === trigger)\n      ) {\n        if (pinnedByTouch) {\n          closeTooltip();\n        }\n        return;\n      }\n      openTooltip(trigger);\n      pinnedByTouch = activeTrigger === trigger;\n      window.setTimeout(() => {\n        if (activeTrigger === trigger && !trigger.isConnected) {\n          closeTooltip(false);\n        }\n      }, 0);\n    };\n    const handleLeave = (event) => {\n      if (pinnedByTouch) {\n        return;\n      }\n      const trigger = getTrigger(event.target);\n      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {\n        return;\n      }\n      if (activeTrigger === trigger || pendingTrigger === trigger) {\n        closeTooltip();\n      }\n    };\n    const handleFocusIn = (event) => {\n      const trigger = getTrigger(event.target);\n      if (trigger?.matches(\":focus-visible\")) {\n        requestOpen(trigger, true);\n      }\n    };\n    const handleKeyDown = (event) => {\n      if (event.key === \"Escape\") {\n        closeTooltip();\n      }\n    };\n    const handleContextMenu = (event) => {\n      lastPointerWasTouch = false;\n      const trigger = getTrigger(event.target);\n      if (activeTrigger === trigger || pendingTrigger === trigger) {\n        closeTooltip();\n      }\n    };\n    const destroy = () => {\n      closeTooltip(false);\n      lastPointerWasTouch = false;\n      document.removeEventListener(\"pointerover\", handlePointerOpen);\n      document.removeEventListener(\"pointerdown\", handlePointer);\n      document.removeEventListener(\"pointercancel\", handlePointer);\n      document.removeEventListener(\"click\", handleTouchClick);\n      document.removeEventListener(\"pointerout\", handleLeave);\n      document.removeEventListener(\"focusin\", handleFocusIn);\n      document.removeEventListener(\"focusout\", handleLeave);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.removeEventListener(\"contextmenu\", handleContextMenu);\n      tooltip = null;\n    };\n\n    document.addEventListener(\"pointerover\", handlePointerOpen);\n    document.addEventListener(\"pointerdown\", handlePointer);\n    document.addEventListener(\"pointercancel\", handlePointer);\n    document.addEventListener(\"click\", handleTouchClick);\n    document.addEventListener(\"pointerout\", handleLeave);\n    document.addEventListener(\"focusin\", handleFocusIn);\n    document.addEventListener(\"focusout\", handleLeave);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    document.addEventListener(\"contextmenu\", handleContextMenu);\n    window.addEventListener(\"pagehide\", destroy, { once: true });\n  })();\n</script>\n<script id=\"codex-visualization-tabs\">\n  (() => {\n    const selector = '.nav[role=\"tablist\"] [role=\"tab\"]';\n    const disabled = ':disabled,[aria-disabled=\"true\"]';\n    const selectTab = (selected) => {\n      const panelId = selected.getAttribute(\"aria-controls\");\n      for (const tab of selected.closest('[role=\"tablist\"]').querySelectorAll('[role=\"tab\"]')) {\n        const active = tab === selected;\n        tab.classList.toggle(\"active\", active);\n        tab.setAttribute(\"aria-selected\", String(active));\n        const id = tab.getAttribute(\"aria-controls\");\n        const panel = id && document.getElementById(id);\n        if (panel != null) {\n          panel.hidden = id !== panelId;\n          if (!panel.hidden && selected.id) {\n            panel.setAttribute(\"aria-labelledby\", selected.id);\n          }\n        }\n      }\n    };\n    const interact = (event) => {\n      const tab = event.target?.closest?.(selector);\n      if (event.defaultPrevented || tab == null || tab.matches(disabled)) {\n        return;\n      }\n      if (event.type === \"click\") {\n        selectTab(tab);\n        return;\n      }\n      const tabs = Array.from(\n        tab.closest('[role=\"tablist\"]').querySelectorAll('[role=\"tab\"]'),\n      ).filter((candidate) => !candidate.matches(disabled));\n      const current = tabs.indexOf(tab);\n      let next;\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        next = (current + 1) % tabs.length;\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        next = (current + tabs.length - 1) % tabs.length;\n      } else if (event.key === \"Home\") {\n        next = 0;\n      } else if (event.key === \"End\") {\n        next = tabs.length - 1;\n      } else {\n        return;\n      }\n      event.preventDefault();\n      tabs[next].focus();\n      selectTab(tabs[next]);\n    };\n\n    for (const list of document.querySelectorAll('.nav[role=\"tablist\"]')) {\n      const selected =\n        list.querySelector('[role=\"tab\"][aria-selected=\"true\"]') ??\n        list.querySelector('[role=\"tab\"].active') ??\n        list.querySelector('[role=\"tab\"]');\n      if (selected != null) {\n        selectTab(selected);\n      }\n    }\n    document.addEventListener(\"click\", interact);\n    document.addEventListener(\"keydown\", interact);\n    window.addEventListener(\n      \"pagehide\",\n      () => {\n        document.removeEventListener(\"click\", interact);\n        document.removeEventListener(\"keydown\", interact);\n      },\n      { once: true },\n    );\n  })();\n</script>\n<script\n  id=\"codex-visualization-lucide\"\n  async\n  src=\"https://unpkg.com/lucide@1.17.0/dist/umd/lucide.js\"\n></script>\n<script>\n  (() => {\n    const initialize = () => {\n      globalThis.lucide?.createIcons({ attrs: { width: 16, height: 16 } });\n    };\n    if (globalThis.lucide != null) {\n      initialize();\n      return;\n    }\n    document\n      .getElementById(\"codex-visualization-lucide\")\n      ?.addEventListener(\"load\", initialize, { once: true });\n  })();\n</script>\n";

package/dist/components/browser-select-control.d.ts

@@ -0,0 +1,16 @@
+import type { BrowserAction, BrowserActionReceipt, BrowserObservation } from "@opengeni/sdk/interaction";
+/** Human fallback for native popup windows missing from Chromium page frames. */
+export declare function BrowserSelectControl(props: {
+    /** Older controllers need an explicit read to discover native popup options. */
+    manualFallback?: boolean;
+    activation?: {
+        observation: BrowserObservation | null;
+        anchor: {
+            x: number;
+            y: number;
+        } | null;
+    } | null;
+    onDismiss?: () => void;
+    observe: () => Promise<BrowserObservation>;
+    act: (action: BrowserAction, observation: BrowserObservation) => Promise<BrowserActionReceipt>;
+}): import("react").JSX.Element | null;

package/dist/components/browser-viewer.d.ts

@@ -2,14 +2,23 @@ import type { ComputerSession, InteractionPlacement } from "@opengeni/sdk/intera
 import { type ReactNode } from "react";
 import { type BrowserFrameWebSocketFactory } from "../hooks/use-browser-frame-stream.js";
 import type { EmbeddedBrowserInteractionClientOverride } from "../session-context.js";
+/**
+ * Delay before retrying an automatic end of a lost attached-device browser, or null to stop.
+ * A refusal (4xx, e.g. 409 when the server will not end it) is never retried: re-sending it on
+ * every registry refresh looped about one request per second on prod.
+ */
+export declare function staleBrowserEndRetryDelayMs(cause: unknown, failedAttempts: number): number | null;
 export type BrowserViewerNotification = {
     kind: "error" | "info";
     message: string;
 };
 export type BrowserViewerProps = EmbeddedBrowserInteractionClientOverride & {
-    /** The selected OpenGeni agent/session. Peer BrowserSessions stay discoverable. */
+    /** The selected Opengeni agent/session. Peer BrowserSessions stay discoverable. */
     sessionId: string;
     enabled?: boolean | undefined;
+    /** Whether the Browser tab is selected. Keeps the mounted media stream warm
+     * while pausing semantic reads behind other dock tabs. */
+    active?: boolean | undefined;
     className?: string | undefined;
     onNotify?: ((notification: BrowserViewerNotification) => void) | undefined;
     /** Tests/demos only. Production uses the browser's native WebSocket. */
@@ -33,4 +42,4 @@ export type BrowserViewerProps = EmbeddedBrowserInteractionClientOverride & {
  * browser/tab switching, live frames, semantic fallback, direct human input,
  * address navigation, diagnostics, and reconnect. Closing it never closes the browser.
  */
-export declare function BrowserViewer({ sessionId, enabled, className, onNotify, webSocketFactory, renderEmpty, createLinkedComputer, onOpenComputer, initialBrowserSessionId, onBrowserSessionIdChange, browserExtensionSetupUrl, ...override }: BrowserViewerProps): import("react").JSX.Element | null;
+export declare function BrowserViewer({ sessionId, enabled, active, className, onNotify, webSocketFactory, renderEmpty, createLinkedComputer, onOpenComputer, initialBrowserSessionId, onBrowserSessionIdChange, browserExtensionSetupUrl, ...override }: BrowserViewerProps): import("react").JSX.Element | null;