@valbuild/shared 0.150.11 → 0.150.13

package/dist/declarations/src/internal/index.d.ts

@@ -26,6 +26,7 @@ export * from "./zod/SerializedSchema.js";
 export * from "./valCanvasProtocol.js";
 export * from "./elementPicker.js";
 export * from "./pageInspection.js";
+export * from "./pageScreenshot.js";
 export * from "./quickPreview.js";
 export * from "./emptyOf.js";
 export * from "./aiTools/toolNames.js";

package/dist/declarations/src/internal/pageScreenshot.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A picture of the page, taken in the page: the assistant's
+ * `screenshot_page`, so it can see a change it made rather than only read it
+ * (`read_page` gives the words and the boxes).
+ *
+ * Taken HERE because nothing else can: the design tab is another origin than
+ * the proposal's page in its frame, and a browser lets no page photograph a
+ * frame of another origin. So the bridge renders its own document --
+ * `modern-screenshot` draws the DOM, with its computed styles, fonts and
+ * same-origin images, into a canvas -- and hands back a JPEG.
+ *
+ * It is a rendering of the DOM, not of the screen: an image from another
+ * origin that does not allow it, a video frame, a `<canvas>` a script drew
+ * and an iframe come out blank. Good enough to see a layout, a colour, a
+ * button that wrapped; the tool says what it cannot show.
+ *
+ * Loaded when asked: the library is not in a page that is never
+ * photographed.
+ */
+/** What `screenshotPage` answers. */
+export type PageScreenshot = {
+    /** A JPEG, as a data URL. */
+    dataUrl: string;
+    width: number;
+    height: number;
+    /** The whole page, from the top, rather than what was on screen. */
+    fullPage: boolean;
+    /** The page went on below what the picture shows. */
+    clipped: boolean;
+};
+/**
+ * The page in `win`, as it is now: what is on screen, or (`fullPage`) the
+ * whole page from the top, cut off at {@link MAX_FULL_PAGE_HEIGHT}. Elements
+ * `exclude` says are not the page's -- the picker's highlight -- are left
+ * out.
+ */
+export declare function screenshotPage(win: Window, options?: {
+    fullPage?: boolean;
+    exclude?: (element: Element) => boolean;
+}): Promise<PageScreenshot>;

package/dist/declarations/src/internal/server/types.d.ts

@@ -1,7 +1,7 @@
 import { Json } from "@valbuild/core";
-export declare const VAL_SESSION_COOKIE: any;
-export declare const VAL_STATE_COOKIE: any;
-export declare const VAL_ENABLE_COOKIE_NAME: any;
+export declare const VAL_SESSION_COOKIE: "val_session";
+export declare const VAL_STATE_COOKIE: "val_state";
+export declare const VAL_ENABLE_COOKIE_NAME: "val_enable";
 export type VAL_SESSION_COOKIE = typeof VAL_SESSION_COOKIE;
 export type VAL_STATE_COOKIE = typeof VAL_STATE_COOKIE;
 export type VAL_ENABLE_COOKIE_NAME = typeof VAL_ENABLE_COOKIE_NAME;

package/dist/declarations/src/internal/valCanvasProtocol.d.ts

@@ -22,6 +22,7 @@
 import type { ModuleFilePath, SourcePath } from "@valbuild/core";
 import type { PickedElement, PickModifier } from "./elementPicker.js";
 import type { PageLocation, PageSnapshot } from "./pageInspection.js";
+import type { PageScreenshot } from "./pageScreenshot.js";
 import { type QuickPreviewFiles } from "./quickPreview.js";
 /** Marks a page load as the studio's canvas frame. */
 export declare const VAL_CANVAS_PARAM = "val_canvas";
@@ -205,6 +206,16 @@ export type ValCanvasPageMessage = {
     requestId: string;
     snapshot: PageSnapshot | null;
     error?: string;
+} | {
+    /**
+     * What `screenshotPage` asked for: the page as a JPEG data URL, or why
+     * it could not be taken (`pageScreenshot.ts`).
+     */
+    val: typeof VAL_CANVAS_MESSAGE;
+    type: "pageScreenshot";
+    requestId: string;
+    screenshot: PageScreenshot | null;
+    error?: string;
 } | {
     /**
      * A quick preview's files are stored in the page's worker, and a page
@@ -334,6 +345,16 @@ export type ValCanvasStudioMessage = {
     requestId: string;
     selector?: string;
     maxItems?: number;
+} | {
+    /**
+     * Take a picture of the page (`screenshotPage`): the assistant's
+     * `screenshot_page`. Answered with `pageScreenshot` and the same
+     * `requestId`; a bridge that predates it never answers.
+     */
+    val: typeof VAL_CANVAS_MESSAGE;
+    type: "screenshotPage";
+    requestId: string;
+    fullPage?: boolean;
 } | {
     /**
      * Store a quick preview's files in this origin's worker

package/dist/declarations/src/internal/zod/History.d.ts

@@ -64,9 +64,9 @@ export declare const BinaryFileRef: z.ZodObject<{
 }, z.core.$strip>;
 export type BinaryFileRef = z.infer<typeof BinaryFileRef>;
 export declare const HistoricalModule: z.ZodObject<{
-    source: z.ZodNullable<z.ZodType<JSONValueT, unknown, z.core.$ZodTypeInternals<JSONValueT, unknown>>>;
-    schema: z.ZodNullable<z.ZodType<SerializedSchemaT, unknown, z.core.$ZodTypeInternals<SerializedSchemaT, unknown>>>;
-    patchIds: z.ZodArray<z.ZodString & z.ZodType<PatchIdT, string, z.core.$ZodTypeInternals<PatchIdT, string>>>;
+    source: z.ZodNullable<z.ZodType<import("@valbuild/core/patch").JSONValue, unknown, z.core.$ZodTypeInternals<import("@valbuild/core/patch").JSONValue, unknown>>>;
+    schema: z.ZodNullable<z.ZodType<import("@valbuild/core").SerializedSchema, unknown, z.core.$ZodTypeInternals<import("@valbuild/core").SerializedSchema, unknown>>>;
+    patchIds: z.ZodArray<z.ZodString & z.ZodType<import("@valbuild/core").PatchId, string, z.core.$ZodTypeInternals<import("@valbuild/core").PatchId, string>>>;
     changedPaths: z.ZodArray<z.ZodString>;
     failures: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
         kind: z.ZodLiteral<"commit-not-found">;
@@ -109,9 +109,9 @@ export declare const HistoricalPatchSet: z.ZodObject<{
         hasArchive: z.ZodBoolean;
     }, z.core.$strip>;
     modules: z.ZodRecord<z.ZodString, z.ZodObject<{
-        source: z.ZodNullable<z.ZodType<JSONValueT, unknown, z.core.$ZodTypeInternals<JSONValueT, unknown>>>;
-        schema: z.ZodNullable<z.ZodType<SerializedSchemaT, unknown, z.core.$ZodTypeInternals<SerializedSchemaT, unknown>>>;
-        patchIds: z.ZodArray<z.ZodString & z.ZodType<PatchIdT, string, z.core.$ZodTypeInternals<PatchIdT, string>>>;
+        source: z.ZodNullable<z.ZodType<import("@valbuild/core/patch").JSONValue, unknown, z.core.$ZodTypeInternals<import("@valbuild/core/patch").JSONValue, unknown>>>;
+        schema: z.ZodNullable<z.ZodType<import("@valbuild/core").SerializedSchema, unknown, z.core.$ZodTypeInternals<import("@valbuild/core").SerializedSchema, unknown>>>;
+        patchIds: z.ZodArray<z.ZodString & z.ZodType<import("@valbuild/core").PatchId, string, z.core.$ZodTypeInternals<import("@valbuild/core").PatchId, string>>>;
         changedPaths: z.ZodArray<z.ZodString>;
         failures: z.ZodArray<z.ZodDiscriminatedUnion<[z.ZodObject<{
             kind: z.ZodLiteral<"commit-not-found">;
@@ -139,7 +139,7 @@ export declare const HistoricalPatchSet: z.ZodObject<{
         }, z.core.$strip>], "kind">>;
     }, z.core.$strip>>;
     patches: z.ZodArray<z.ZodObject<{
-        patchId: z.ZodString & z.ZodType<PatchIdT, string, z.core.$ZodTypeInternals<PatchIdT, string>>;
+        patchId: z.ZodString & z.ZodType<import("@valbuild/core").PatchId, string, z.core.$ZodTypeInternals<import("@valbuild/core").PatchId, string>>;
         moduleFilePath: z.ZodString;
         patch: z.ZodUnknown;
         authorId: z.ZodNullable<z.ZodString>;

package/dist/declarations/src/internal/zod/Patch.d.ts

@@ -1,4 +1,5 @@
 import type { JSONValue as JSONValueT, PatchJSON as PatchJSONT, PatchBlock as PatchBlockT, ParentRef as ParentRefT } from "@valbuild/core/patch";
+import type { PatchId as PatchIdT } from "@valbuild/core";
 import { z } from "zod";
 /**
  * JSON, recursively — the shape of a Source over the wire.

package/dist/declarations/src/internal/zod/SerializedSchema.d.ts

@@ -66,7 +66,25 @@ export declare const ColorOptions: z.ZodObject<{
 export declare const SerializedColorSchema: z.ZodType<SerializedColorSchemaT>;
 export declare const CodeOptions: z.ZodObject<{
     language: z.ZodOptional<z.ZodEnum<{
-        [x: string]: any;
+        html: "html";
+        css: "css";
+        json: "json";
+        typescript: "typescript";
+        javascript: "javascript";
+        javascriptreact: "javascriptreact";
+        typescriptreact: "typescriptreact";
+        java: "java";
+        xml: "xml";
+        markdown: "markdown";
+        sql: "sql";
+        python: "python";
+        rust: "rust";
+        php: "php";
+        go: "go";
+        cpp: "cpp";
+        sass: "sass";
+        vue: "vue";
+        angular: "angular";
     }>>;
 }, z.core.$strip>;
 export declare const SerializedCodeSchema: z.ZodType<SerializedCodeSchemaT>;
@@ -83,7 +101,7 @@ export declare const SerializedSettingsSchema: z.ZodType<SerializedSettingsSchem
  */
 export declare const SerializedValViewSchema: z.ZodObject<{
     type: z.ZodLiteral<"view">;
-    moduleFilePath: z.ZodType<ModuleFilePathT, unknown, z.core.$ZodTypeInternals<ModuleFilePathT, unknown>>;
+    moduleFilePath: z.ZodType<import("@valbuild/core").ModuleFilePath, unknown, z.core.$ZodTypeInternals<import("@valbuild/core").ModuleFilePath, unknown>>;
     opt: z.ZodLiteral<false>;
     readonly: z.ZodOptional<z.ZodBoolean>;
     hidden: z.ZodOptional<z.ZodBoolean>;

package/dist/{getSitemapTree-97b3166f.esm.js → getSitemapTree-7c848c94.esm.js}

@@ -322,7 +322,7 @@ function isValCanvasPageMessage(data) {
   if (_typeof(data) !== "object" || data === null) return false;
   var message = data;
   if (message.val !== VAL_CANVAS_MESSAGE) return false;
-  return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing" || message.type === "elementPickingStopped" || message.type === "elementPicked" && isPickedElement(data.element) || message.type === "location" && isPageLocation(data) || message.type === "pageRead" && typeof data.requestId === "string" || message.type === "quickPreviewStored" && typeof data.id === "string";
+  return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing" || message.type === "elementPickingStopped" || message.type === "elementPicked" && isPickedElement(data.element) || message.type === "location" && isPageLocation(data) || message.type === "pageRead" && typeof data.requestId === "string" || message.type === "pageScreenshot" && typeof data.requestId === "string" || message.type === "quickPreviewStored" && typeof data.id === "string";
 }
 function isPageLocation(value) {
   var location = value;
@@ -379,6 +379,10 @@ function isValCanvasStudioMessage(data) {
     var preview = data;
     return typeof preview.id === "string" && /^[A-Za-z0-9_-]{1,64}$/.test(preview.id) && isQuickPreviewFiles(preview.files);
   }
+  if (message.type === "screenshotPage") {
+    var asked = data;
+    return typeof asked.requestId === "string" && (asked.fullPage === undefined || typeof asked.fullPage === "boolean");
+  }
   if (message.type === "readPage") {
     var read = data;
     return typeof read.requestId === "string" && (read.selector === undefined || typeof read.selector === "string") && (read.maxItems === undefined || typeof read.maxItems === "number");
@@ -1137,6 +1141,137 @@ function selectorOf(element, root) {
   return parts.join(" > ");
 }
 
+/**
+ * A picture of the page, taken in the page: the assistant's
+ * `screenshot_page`, so it can see a change it made rather than only read it
+ * (`read_page` gives the words and the boxes).
+ *
+ * Taken HERE because nothing else can: the design tab is another origin than
+ * the proposal's page in its frame, and a browser lets no page photograph a
+ * frame of another origin. So the bridge renders its own document --
+ * `modern-screenshot` draws the DOM, with its computed styles, fonts and
+ * same-origin images, into a canvas -- and hands back a JPEG.
+ *
+ * It is a rendering of the DOM, not of the screen: an image from another
+ * origin that does not allow it, a video frame, a `<canvas>` a script drew
+ * and an iframe come out blank. Good enough to see a layout, a colour, a
+ * button that wrapped; the tool says what it cannot show.
+ *
+ * Loaded when asked: the library is not in a page that is never
+ * photographed.
+ */
+
+/** What `screenshotPage` answers. */
+
+/** Wider than this is scaled down: a model reads a page no better larger. */
+var MAX_WIDTH = 1280;
+/** A whole page longer than this, in CSS pixels, is cut off below it. */
+var MAX_FULL_PAGE_HEIGHT = 4000;
+var JPEG_QUALITY = 0.85;
+/** How long an image or a font on the page is waited for. */
+var LOAD_TIMEOUT_MS = 8000;
+
+/**
+ * The page in `win`, as it is now: what is on screen, or (`fullPage`) the
+ * whole page from the top, cut off at {@link MAX_FULL_PAGE_HEIGHT}. Elements
+ * `exclude` says are not the page's -- the picker's highlight -- are left
+ * out.
+ */
+function screenshotPage(_x) {
+  return _screenshotPage.apply(this, arguments);
+}
+
+/** What the page is drawn on: the body's background, else the root's, else white. */
+function _screenshotPage() {
+  _screenshotPage = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(win) {
+    var _doc$body$scrollHeigh, _doc$body;
+    var options,
+      _yield$import,
+      domToCanvas,
+      doc,
+      root,
+      fullPage,
+      pageWidth,
+      pageHeight,
+      top,
+      height,
+      exclude,
+      drawn,
+      scale,
+      out,
+      context,
+      _args = arguments;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+          _context.n = 1;
+          return import('modern-screenshot');
+        case 1:
+          _yield$import = _context.v;
+          domToCanvas = _yield$import.domToCanvas;
+          doc = win.document;
+          root = doc.documentElement;
+          fullPage = options.fullPage === true;
+          pageWidth = root.clientWidth || win.innerWidth;
+          pageHeight = Math.max(root.scrollHeight, (_doc$body$scrollHeigh = (_doc$body = doc.body) === null || _doc$body === void 0 ? void 0 : _doc$body.scrollHeight) !== null && _doc$body$scrollHeigh !== void 0 ? _doc$body$scrollHeigh : 0);
+          top = fullPage ? 0 : win.scrollY;
+          height = fullPage ? Math.min(pageHeight, MAX_FULL_PAGE_HEIGHT) : Math.min(win.innerHeight, pageHeight - top);
+          exclude = options.exclude; // Drawn to the bottom of what is wanted, and no further: the cost is the
+          // page's size, so a viewport near the top is cheap.
+          _context.n = 2;
+          return domToCanvas(root, _objectSpread2({
+            width: pageWidth,
+            height: top + height,
+            scale: 1,
+            backgroundColor: pageBackground(win),
+            timeout: LOAD_TIMEOUT_MS
+          }, exclude !== undefined ? {
+            filter: function filter(node) {
+              return !(isElement(node) && exclude(node));
+            }
+          } : {}));
+        case 2:
+          drawn = _context.v;
+          scale = Math.min(1, MAX_WIDTH / pageWidth);
+          out = doc.createElement("canvas");
+          out.width = Math.round(pageWidth * scale);
+          out.height = Math.round(height * scale);
+          context = out.getContext("2d");
+          if (!(context === null)) {
+            _context.n = 3;
+            break;
+          }
+          throw new Error("This browser would not draw the picture.");
+        case 3:
+          context.drawImage(drawn, 0, top, pageWidth, height, 0, 0, out.width, out.height);
+          return _context.a(2, {
+            dataUrl: out.toDataURL("image/jpeg", JPEG_QUALITY),
+            width: out.width,
+            height: out.height,
+            fullPage: fullPage,
+            clipped: top + height < pageHeight
+          });
+      }
+    }, _callee);
+  }));
+  return _screenshotPage.apply(this, arguments);
+}
+function pageBackground(win) {
+  for (var _i = 0, _arr = [win.document.body, win.document.documentElement]; _i < _arr.length; _i++) {
+    var element = _arr[_i];
+    if (element === null) continue;
+    var color = win.getComputedStyle(element).backgroundColor;
+    if (color && color !== "transparent" && color !== "rgba(0, 0, 0, 0)") {
+      return color;
+    }
+  }
+  return "#ffffff";
+}
+function isElement(node) {
+  return node.nodeType === 1;
+}
+
 function parseRoutePattern(pattern) {
   if (pattern === "" || pattern === "/") {
     return [];
@@ -1378,4 +1513,4 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
   .replace("/page.val.ts", "").replace("/page.val.js", "");
 }
 
-export { quickPreviewSiteOrigin as A, isDesignTabOrigin as B, parseRoutePattern as C, DEFAULT_CANVAS_SELECTION as D, formatRoutePattern as E, getNextAppRouterSourceFolder as F, getTanStackRouterSourceFolder as G, getPageRouterSourceFolder as H, isTanStackRoutesFolder as I, getPageRouterSitemapTree as J, getPatternFromModuleFilePath as K, QUICK_PREVIEW_PARAM as Q, VAL_CONFIG_SESSION_STORAGE_KEY as V, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, describeElement as h, isValCanvasPageMessage as i, attachElementPicker as j, createPickerOverlay as k, elementLabel as l, modifierLabel as m, watchPageLocation as n, readPageSnapshot as o, pageLocationOf as p, findBySelector as q, restoreScroll as r, startElementPicking as s, QUICK_PREVIEW_SERVICE_WORKER_PATH as t, QUICK_PREVIEW_STORE_MESSAGE as u, isQuickPreviewFiles as v, withValCanvasParam as w, QUICK_PREVIEW_SERVICE_WORKER_SOURCE as x, storeQuickPreview as y, withQuickPreviewParam as z };
+export { withQuickPreviewParam as A, quickPreviewSiteOrigin as B, isDesignTabOrigin as C, DEFAULT_CANVAS_SELECTION as D, parseRoutePattern as E, formatRoutePattern as F, getNextAppRouterSourceFolder as G, getTanStackRouterSourceFolder as H, getPageRouterSourceFolder as I, isTanStackRoutesFolder as J, getPageRouterSitemapTree as K, getPatternFromModuleFilePath as L, QUICK_PREVIEW_PARAM as Q, VAL_CONFIG_SESSION_STORAGE_KEY as V, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, describeElement as h, isValCanvasPageMessage as i, attachElementPicker as j, createPickerOverlay as k, elementLabel as l, modifierLabel as m, watchPageLocation as n, readPageSnapshot as o, pageLocationOf as p, findBySelector as q, restoreScroll as r, startElementPicking as s, screenshotPage as t, QUICK_PREVIEW_SERVICE_WORKER_PATH as u, QUICK_PREVIEW_STORE_MESSAGE as v, withValCanvasParam as w, isQuickPreviewFiles as x, QUICK_PREVIEW_SERVICE_WORKER_SOURCE as y, storeQuickPreview as z };

package/dist/{getSitemapTree-5354ce90.cjs.prod.js → getSitemapTree-97713490.cjs.prod.js}

@@ -3,6 +3,24 @@
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-9ca2078d.cjs.prod.js');
 var core = require('@valbuild/core');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var VAL_CONFIG_SESSION_STORAGE_KEY = "val-config";
 var VAL_THEME_SESSION_STORAGE_KEY = "val-theme";
 var VAL_AI_SESSION_STORAGE_KEY = "val-ai-session";
@@ -324,7 +342,7 @@ function isValCanvasPageMessage(data) {
   if (createForOfIteratorHelper._typeof(data) !== "object" || data === null) return false;
   var message = data;
   if (message.val !== VAL_CANVAS_MESSAGE) return false;
-  return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing" || message.type === "elementPickingStopped" || message.type === "elementPicked" && isPickedElement(data.element) || message.type === "location" && isPageLocation(data) || message.type === "pageRead" && typeof data.requestId === "string" || message.type === "quickPreviewStored" && typeof data.id === "string";
+  return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing" || message.type === "elementPickingStopped" || message.type === "elementPicked" && isPickedElement(data.element) || message.type === "location" && isPageLocation(data) || message.type === "pageRead" && typeof data.requestId === "string" || message.type === "pageScreenshot" && typeof data.requestId === "string" || message.type === "quickPreviewStored" && typeof data.id === "string";
 }
 function isPageLocation(value) {
   var location = value;
@@ -381,6 +399,10 @@ function isValCanvasStudioMessage(data) {
     var preview = data;
     return typeof preview.id === "string" && /^[A-Za-z0-9_-]{1,64}$/.test(preview.id) && isQuickPreviewFiles(preview.files);
   }
+  if (message.type === "screenshotPage") {
+    var asked = data;
+    return typeof asked.requestId === "string" && (asked.fullPage === undefined || typeof asked.fullPage === "boolean");
+  }
   if (message.type === "readPage") {
     var read = data;
     return typeof read.requestId === "string" && (read.selector === undefined || typeof read.selector === "string") && (read.maxItems === undefined || typeof read.maxItems === "number");
@@ -1139,6 +1161,137 @@ function selectorOf(element, root) {
   return parts.join(" > ");
 }
 
+/**
+ * A picture of the page, taken in the page: the assistant's
+ * `screenshot_page`, so it can see a change it made rather than only read it
+ * (`read_page` gives the words and the boxes).
+ *
+ * Taken HERE because nothing else can: the design tab is another origin than
+ * the proposal's page in its frame, and a browser lets no page photograph a
+ * frame of another origin. So the bridge renders its own document --
+ * `modern-screenshot` draws the DOM, with its computed styles, fonts and
+ * same-origin images, into a canvas -- and hands back a JPEG.
+ *
+ * It is a rendering of the DOM, not of the screen: an image from another
+ * origin that does not allow it, a video frame, a `<canvas>` a script drew
+ * and an iframe come out blank. Good enough to see a layout, a colour, a
+ * button that wrapped; the tool says what it cannot show.
+ *
+ * Loaded when asked: the library is not in a page that is never
+ * photographed.
+ */
+
+/** What `screenshotPage` answers. */
+
+/** Wider than this is scaled down: a model reads a page no better larger. */
+var MAX_WIDTH = 1280;
+/** A whole page longer than this, in CSS pixels, is cut off below it. */
+var MAX_FULL_PAGE_HEIGHT = 4000;
+var JPEG_QUALITY = 0.85;
+/** How long an image or a font on the page is waited for. */
+var LOAD_TIMEOUT_MS = 8000;
+
+/**
+ * The page in `win`, as it is now: what is on screen, or (`fullPage`) the
+ * whole page from the top, cut off at {@link MAX_FULL_PAGE_HEIGHT}. Elements
+ * `exclude` says are not the page's -- the picker's highlight -- are left
+ * out.
+ */
+function screenshotPage(_x) {
+  return _screenshotPage.apply(this, arguments);
+}
+
+/** What the page is drawn on: the body's background, else the root's, else white. */
+function _screenshotPage() {
+  _screenshotPage = createForOfIteratorHelper._asyncToGenerator(/*#__PURE__*/createForOfIteratorHelper._regenerator().m(function _callee(win) {
+    var _doc$body$scrollHeigh, _doc$body;
+    var options,
+      _yield$import,
+      domToCanvas,
+      doc,
+      root,
+      fullPage,
+      pageWidth,
+      pageHeight,
+      top,
+      height,
+      exclude,
+      drawn,
+      scale,
+      out,
+      context,
+      _args = arguments;
+    return createForOfIteratorHelper._regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          options = _args.length > 1 && _args[1] !== undefined ? _args[1] : {};
+          _context.n = 1;
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('modern-screenshot')); });
+        case 1:
+          _yield$import = _context.v;
+          domToCanvas = _yield$import.domToCanvas;
+          doc = win.document;
+          root = doc.documentElement;
+          fullPage = options.fullPage === true;
+          pageWidth = root.clientWidth || win.innerWidth;
+          pageHeight = Math.max(root.scrollHeight, (_doc$body$scrollHeigh = (_doc$body = doc.body) === null || _doc$body === void 0 ? void 0 : _doc$body.scrollHeight) !== null && _doc$body$scrollHeigh !== void 0 ? _doc$body$scrollHeigh : 0);
+          top = fullPage ? 0 : win.scrollY;
+          height = fullPage ? Math.min(pageHeight, MAX_FULL_PAGE_HEIGHT) : Math.min(win.innerHeight, pageHeight - top);
+          exclude = options.exclude; // Drawn to the bottom of what is wanted, and no further: the cost is the
+          // page's size, so a viewport near the top is cheap.
+          _context.n = 2;
+          return domToCanvas(root, createForOfIteratorHelper._objectSpread2({
+            width: pageWidth,
+            height: top + height,
+            scale: 1,
+            backgroundColor: pageBackground(win),
+            timeout: LOAD_TIMEOUT_MS
+          }, exclude !== undefined ? {
+            filter: function filter(node) {
+              return !(isElement(node) && exclude(node));
+            }
+          } : {}));
+        case 2:
+          drawn = _context.v;
+          scale = Math.min(1, MAX_WIDTH / pageWidth);
+          out = doc.createElement("canvas");
+          out.width = Math.round(pageWidth * scale);
+          out.height = Math.round(height * scale);
+          context = out.getContext("2d");
+          if (!(context === null)) {
+            _context.n = 3;
+            break;
+          }
+          throw new Error("This browser would not draw the picture.");
+        case 3:
+          context.drawImage(drawn, 0, top, pageWidth, height, 0, 0, out.width, out.height);
+          return _context.a(2, {
+            dataUrl: out.toDataURL("image/jpeg", JPEG_QUALITY),
+            width: out.width,
+            height: out.height,
+            fullPage: fullPage,
+            clipped: top + height < pageHeight
+          });
+      }
+    }, _callee);
+  }));
+  return _screenshotPage.apply(this, arguments);
+}
+function pageBackground(win) {
+  for (var _i = 0, _arr = [win.document.body, win.document.documentElement]; _i < _arr.length; _i++) {
+    var element = _arr[_i];
+    if (element === null) continue;
+    var color = win.getComputedStyle(element).backgroundColor;
+    if (color && color !== "transparent" && color !== "rgba(0, 0, 0, 0)") {
+      return color;
+    }
+  }
+  return "#ffffff";
+}
+function isElement(node) {
+  return node.nodeType === 1;
+}
+
 function parseRoutePattern(pattern) {
   if (pattern === "" || pattern === "/") {
     return [];
@@ -1414,6 +1567,7 @@ exports.parseRoutePattern = parseRoutePattern;
 exports.quickPreviewSiteOrigin = quickPreviewSiteOrigin;
 exports.readPageSnapshot = readPageSnapshot;
 exports.restoreScroll = restoreScroll;
+exports.screenshotPage = screenshotPage;
 exports.startElementPicking = startElementPicking;
 exports.storeQuickPreview = storeQuickPreview;
 exports.watchPageLocation = watchPageLocation;