@mayurajs/browser-viewer 0.0.0-stage → 1.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/NOTICE

@@ -0,0 +1,8 @@
+Mayura
+Copyright 2026 The Mayura Authors
+
+This product includes software developed by the Mayura contributors.
+
+Third-party dependencies retain their own copyright and license terms. Exact
+resolved versions are recorded in pnpm-lock.yaml and reviewed by the release
+artifact and dependency qualification procedures.

package/README.md

@@ -1,3 +1,70 @@
-# Temporary Holding Version
+# @mayurajs/browser-viewer
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A live viewer for `mayura/browser` browsers: a person watches what an agent's browser shows, and with a link that
+allows it, uses it too. The active tab streams as JPEG frames over the browser's CDP connection (a screencast),
+following the agent from tab to tab, to a page that needs nothing but an image tag. No dependency; any browser other
+clients can join (local, `cdpBrowsers`, and most hosted providers), whatever its provider's own live view.
+
+```bash
+npm install mayura @mayurajs/browser-viewer
+```
+
+```ts
+import { createBrowsers } from 'mayura/browser';
+import { localBrowsers } from 'mayura/browser/local';
+import { serveBrowserViewer } from '@mayurajs/browser-viewer';
+
+const browsers = createBrowsers(localBrowsers(), { maxBrowsers: 1, maxLifetimeMs: 30 * 60_000, origins: ['https://example.com'] });
+const browser = await browsers.open();
+const viewer = await serveBrowserViewer();          // http://127.0.0.1:<port>/, this machine only
+const link = await viewer.share(browser);           // view only, for an hour
+console.log(link.url);                              // a secret: whoever has it can watch
+const takeover = await viewer.share(browser, { interact: true, expiresInMs: 10 * 60_000 });
+```
+
+- **Nothing is shown unless shared.** `share(browser)` makes a link with a 256-bit token in it; it stops working when
+  it expires (1 hour by default, at most 24), when `revoke()` is called, or when the browser ends, and whatever was
+  being watched through it ends then too. Links are kept by the token's hash.
+- **Watching is the default; using is opt-in.** With `interact: true` the page sends the person's clicks, scrolling,
+  keys and pasted text to the browser, as input to the page shown. Everything the person does stays within the
+  browser's origins, as everything the agent does. Input is only taken as JSON from the viewer's own page (never
+  across sites), at most `maxInputPerSecond` (60) a link, 4 KiB each.
+- **Bounded.** `maxViewersPerShare` (2) people watch a link at once, each over a CDP connection of their own;
+  `maxShares` (16) links are open at once. Frames come no faster than `maxFps` (5), and only as fast as each viewer
+  takes them; `quality` (60), `maxWidth` by `maxHeight` (1,280 by 800) and `maxFrameBytes` (2 MiB) bound their size.
+- **The page** is served with `no-store`, `no-referrer` and a CSP allowing nothing but its own stream, input and
+  nonce'd script; `frameAncestors` lets your app's origins show it in a frame (none by default).
+
+## On your own server, on any runtime
+
+`browserViewer(options)` is the same viewer as web-standard request handling: mount `handle(request)` under
+`basePath` (it answers `<basePath>v/...` and returns undefined for anything else), and give people
+`share(browser).path` on your origin. Behind your own authentication, the link's token is a second lock, not the
+only one.
+
+```ts
+import { browserViewer } from '@mayurajs/browser-viewer';
+
+const viewer = browserViewer({ basePath: '/viewer/', frameAncestors: ['https://app.example'] });
+// In your fetch handler:
+const response = await viewer.handle(request);
+if (response) return response;
+```
+
+`serveBrowserViewer` (Node) listens on `127.0.0.1` unless given `host` with `remote: true`: links then travel in the
+clear unless TLS is in front, and `publicUrl` (an https origin) is the address the links use.
+
+## The screencast alone
+
+`browserScreencast(browser, { interact })` gives the frames themselves, an async iterable of JPEGs with the page's
+size and tab, and `input(event)` for interactive ones, to show them however you like.
+
+## Browsers it cannot join
+
+Each connection to Browserless starts a browser of its own, so its browsers give other clients no endpoint, and the
+viewer refuses them. Most hosted providers also have a live view of their own, given as `browser.liveViewUrl`.
+
+Options: `quality`, `maxWidth`, `maxHeight`, `maxFps`, `maxFrameBytes`, `webSocket`, `basePath`, `frameAncestors`,
+`maxViewersPerShare`, `maxShares`, `maxInputPerSecond`; `serveBrowserViewer` adds `host`, `port`, `remote` and
+`publicUrl`. Verified on the Chrome and Edge installed here. See the
+[browser guide](https://mayurajs.com/docs/guides/browsers/). Apache-2.0.

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { browserScreencast } from './screencast.js';
+export type { Screencast, ScreencastFrame, ScreencastOptions, ViewerInput } from './screencast.js';
+export { browserViewer } from './viewer.js';
+export type { BrowserViewer, BrowserViewerOptions, ViewerShare, ViewerShareOptions } from './viewer.js';
+export { serveBrowserViewer } from './serve.js';
+export type { ServeBrowserViewerOptions, ServedBrowserViewer } from './serve.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnG,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACxG,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { browserScreencast } from './screencast.js';
+export { browserViewer } from './viewer.js';
+export { serveBrowserViewer } from './serve.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { browserScreencast } from './screencast.js';\nexport type { Screencast, ScreencastFrame, ScreencastOptions, ViewerInput } from './screencast.js';\nexport { browserViewer } from './viewer.js';\nexport type { BrowserViewer, BrowserViewerOptions, ViewerShare, ViewerShareOptions } from './viewer.js';\nexport { serveBrowserViewer } from './serve.js';\nexport type { ServeBrowserViewerOptions, ServedBrowserViewer } from './serve.js';\n"]}

package/dist/page.d.ts

@@ -0,0 +1,5 @@
+export declare function viewerPage({ interact, nonce }: {
+    readonly interact: boolean;
+    readonly nonce: string;
+}): string;
+//# sourceMappingURL=page.d.ts.map

package/dist/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAsBA,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAkB9G"}

package/dist/page.js

@@ -0,0 +1,41 @@
+// The viewer page: the stream as an image, and with interact, the person's mouse and keys sent back as input. Its
+// script and style run only by the page's nonce; it reaches nothing but its own stream and input.
+const script = `
+const view = document.getElementById('view'); const state = document.getElementById('state');
+const send = event => fetch('input', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(event) }).catch(() => undefined);
+const at = event => { const box = view.getBoundingClientRect(); return { x: Math.min(1, Math.max(0, (event.clientX - box.left) / box.width)), y: Math.min(1, Math.max(0, (event.clientY - box.top) / box.height)) }; };
+const mods = event => (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0) | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);
+const button = event => ['left', 'middle', 'right'][event.button] ?? 'left';
+let moved = 0;
+view.addEventListener('mousedown', event => { event.preventDefault(); view.focus(); send({ type: 'mouse', action: 'down', ...at(event), button: button(event), clicks: Math.min(3, Math.max(1, event.detail)), modifiers: mods(event) }); });
+view.addEventListener('mouseup', event => { event.preventDefault(); send({ type: 'mouse', action: 'up', ...at(event), button: button(event), clicks: Math.min(3, Math.max(1, event.detail)), modifiers: mods(event) }); });
+view.addEventListener('mousemove', event => { const now = Date.now(); if (now - moved < 50) return; moved = now; send({ type: 'mouse', action: 'move', ...at(event), modifiers: mods(event) }); });
+view.addEventListener('wheel', event => { event.preventDefault(); send({ type: 'wheel', ...at(event), dx: Math.round(event.deltaX), dy: Math.round(event.deltaY) }); }, { passive: false });
+view.addEventListener('contextmenu', event => event.preventDefault());
+for (const action of ['down', 'up']) view.addEventListener('key' + action, event => {
+  if (event.isComposing) return;
+  event.preventDefault(); send({ type: 'key', action, key: event.key, modifiers: mods(event) });
+});
+view.addEventListener('paste', event => { const text = event.clipboardData?.getData('text/plain'); if (text) { event.preventDefault(); send({ type: 'text', text: text.slice(0, 1000) }); } });
+state.textContent = 'Live: you can use this browser. Click the page to type into it.';
+`;
+export function viewerPage({ interact, nonce }) {
+    return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="referrer" content="no-referrer">
+<title>Browser viewer</title>
+<style nonce="${nonce}">
+:root { color-scheme: light dark; --bg: #f6f6f4; --fg: #1d1d1b; --muted: #6b6b66; --edge: #d9d9d4; }
+@media (prefers-color-scheme: dark) { :root { --bg: #151514; --fg: #ecece8; --muted: #9a9a94; --edge: #33332f; } }
+* { box-sizing: border-box; }
+body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, sans-serif; }
+header { padding: 8px 16px; color: var(--muted); border-bottom: 1px solid var(--edge); }
+main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
+img { max-width: 100%; max-height: calc(100vh - 80px); border: 1px solid var(--edge); background: #fff; outline: none; }
+img:focus-visible { outline: 2px solid #3b6fd8; }
+</style></head>
+<body><header id="state">Live: view only.</header>
+<main><img id="view" src="stream" alt="The browser's page, live"${interact ? ' tabindex="0"' : ''}></main>
+${interact ? `<script nonce="${nonce}">${script}</script>` : ''}
+</body></html>`;
+}
+//# sourceMappingURL=page.js.map

package/dist/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAAA,kHAAkH;AAClH,kGAAkG;AAClG,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;CAkBd,CAAC;AAEF,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAA0D;IACpG,OAAO;;;gBAGO,KAAK;;;;;;;;;;;kEAW6C,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;EAC/F,QAAQ,CAAC,CAAC,CAAC,kBAAkB,KAAK,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,EAAE;eAChD,CAAC;AAChB,CAAC","sourcesContent":["// The viewer page: the stream as an image, and with interact, the person's mouse and keys sent back as input. Its\n// script and style run only by the page's nonce; it reaches nothing but its own stream and input.\nconst script = `\nconst view = document.getElementById('view'); const state = document.getElementById('state');\nconst send = event => fetch('input', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(event) }).catch(() => undefined);\nconst at = event => { const box = view.getBoundingClientRect(); return { x: Math.min(1, Math.max(0, (event.clientX - box.left) / box.width)), y: Math.min(1, Math.max(0, (event.clientY - box.top) / box.height)) }; };\nconst mods = event => (event.altKey ? 1 : 0) | (event.ctrlKey ? 2 : 0) | (event.metaKey ? 4 : 0) | (event.shiftKey ? 8 : 0);\nconst button = event => ['left', 'middle', 'right'][event.button] ?? 'left';\nlet moved = 0;\nview.addEventListener('mousedown', event => { event.preventDefault(); view.focus(); send({ type: 'mouse', action: 'down', ...at(event), button: button(event), clicks: Math.min(3, Math.max(1, event.detail)), modifiers: mods(event) }); });\nview.addEventListener('mouseup', event => { event.preventDefault(); send({ type: 'mouse', action: 'up', ...at(event), button: button(event), clicks: Math.min(3, Math.max(1, event.detail)), modifiers: mods(event) }); });\nview.addEventListener('mousemove', event => { const now = Date.now(); if (now - moved < 50) return; moved = now; send({ type: 'mouse', action: 'move', ...at(event), modifiers: mods(event) }); });\nview.addEventListener('wheel', event => { event.preventDefault(); send({ type: 'wheel', ...at(event), dx: Math.round(event.deltaX), dy: Math.round(event.deltaY) }); }, { passive: false });\nview.addEventListener('contextmenu', event => event.preventDefault());\nfor (const action of ['down', 'up']) view.addEventListener('key' + action, event => {\n  if (event.isComposing) return;\n  event.preventDefault(); send({ type: 'key', action, key: event.key, modifiers: mods(event) });\n});\nview.addEventListener('paste', event => { const text = event.clipboardData?.getData('text/plain'); if (text) { event.preventDefault(); send({ type: 'text', text: text.slice(0, 1000) }); } });\nstate.textContent = 'Live: you can use this browser. Click the page to type into it.';\n`;\n\nexport function viewerPage({ interact, nonce }: { readonly interact: boolean; readonly nonce: string }): string {\n  return `<!doctype html>\n<html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"referrer\" content=\"no-referrer\">\n<title>Browser viewer</title>\n<style nonce=\"${nonce}\">\n:root { color-scheme: light dark; --bg: #f6f6f4; --fg: #1d1d1b; --muted: #6b6b66; --edge: #d9d9d4; }\n@media (prefers-color-scheme: dark) { :root { --bg: #151514; --fg: #ecece8; --muted: #9a9a94; --edge: #33332f; } }\n* { box-sizing: border-box; }\nbody { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: 14px/1.4 system-ui, sans-serif; }\nheader { padding: 8px 16px; color: var(--muted); border-bottom: 1px solid var(--edge); }\nmain { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }\nimg { max-width: 100%; max-height: calc(100vh - 80px); border: 1px solid var(--edge); background: #fff; outline: none; }\nimg:focus-visible { outline: 2px solid #3b6fd8; }\n</style></head>\n<body><header id=\"state\">Live: view only.</header>\n<main><img id=\"view\" src=\"stream\" alt=\"The browser's page, live\"${interact ? ' tabindex=\"0\"' : ''}></main>\n${interact ? `<script nonce=\"${nonce}\">${script}</script>` : ''}\n</body></html>`;\n}\n"]}

package/dist/screencast.d.ts

@@ -0,0 +1,73 @@
+import { type Browser, type CdpSocketFactory } from 'mayura/browser';
+export interface ScreencastOptions {
+    /** JPEG quality, 1 to 100; 60 by default. */
+    readonly quality?: number;
+    /** The widest frame, in pixels; 1,280 by default (320 to 3,840). */
+    readonly maxWidth?: number;
+    /** The tallest frame, in pixels; 800 by default (240 to 2,160). */
+    readonly maxHeight?: number;
+    /** The most frames a second; 5 by default (1 to 30). */
+    readonly maxFps?: number;
+    /** Frames larger than this are skipped, in bytes; 2 MiB by default. */
+    readonly maxFrameBytes?: number;
+    /** Lets `input` use the page, as a person would: off by default. */
+    readonly interact?: boolean;
+    /** For runtimes whose WebSocket cannot send the headers a browser's CDP connection needs. */
+    readonly webSocket?: CdpSocketFactory;
+    /** Ends the screencast. */
+    readonly signal?: AbortSignal;
+}
+export interface ScreencastFrame {
+    /** A JPEG of the page as shown. */
+    readonly data: Uint8Array;
+    readonly mediaType: 'image/jpeg';
+    /** The page's size in CSS pixels, which `input` coordinates are fractions of. */
+    readonly width: number;
+    readonly height: number;
+    /** The tab shown, as `browser.tabs()` names it. */
+    readonly tab: string;
+}
+/** What a person does in the viewer. Coordinates are fractions of the frame, 0 to 1 from the top left. */
+export type ViewerInput = {
+    readonly type: 'mouse';
+    readonly action: 'down' | 'up' | 'move';
+    readonly x: number;
+    readonly y: number;
+    readonly button?: 'left' | 'middle' | 'right';
+    readonly clicks?: number;
+    readonly modifiers?: number;
+} | {
+    readonly type: 'wheel';
+    readonly x: number;
+    readonly y: number;
+    readonly dx: number;
+    readonly dy: number;
+} | {
+    readonly type: 'key';
+    readonly action: 'down' | 'up';
+    readonly key: string;
+    readonly modifiers?: number;
+} | {
+    readonly type: 'text';
+    readonly text: string;
+};
+/** The frames of a browser's active tab as it changes, following the tab the browser has active. */
+export interface Screencast extends AsyncIterable<ScreencastFrame> {
+    /** The next frame, waiting for one; undefined once the screencast ended. */
+    next(): Promise<ScreencastFrame | undefined>;
+    /** Uses the page shown, for screencasts with `interact`. */
+    input(event: ViewerInput, options?: {
+        readonly signal?: AbortSignal;
+    }): Promise<void>;
+    /** True once closed, or once its browser or connection ended. */
+    readonly ended: boolean;
+    close(): void;
+}
+/**
+ * A screencast of a `mayura/browser` browser: the active tab's frames as JPEGs, over a CDP connection of its own, and,
+ * with `interact`, a way for a person to use the page. Frames come no faster than `maxFps`, and only as fast as they
+ * are taken. The browser's origins hold for whatever a person does. It needs a browser other clients can join
+ * (`browser.cdp`).
+ */
+export declare function browserScreencast(browser: Browser, options?: ScreencastOptions): Promise<Screencast>;
+//# sourceMappingURL=screencast.d.ts.map

package/dist/screencast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screencast.d.ts","sourceRoot":"","sources":["../src/screencast.ts"],"names":[],"mappings":"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"}