@valbuild/shared 0.150.12 → 0.150.13

package/dist/{getSitemapTree-d934ff9c.cjs.dev.js → getSitemapTree-98642b57.cjs.dev.js}

@@ -3,6 +3,24 @@
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-f2d7ac6d.cjs.dev.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;

package/internal/dist/valbuild-shared-internal.cjs.dev.js

@@ -7,7 +7,7 @@ var core = require('@valbuild/core');
 var zod = require('zod');
 var protocol = require('../../dist/protocol-d0efb8cd.cjs.dev.js');
 var zodValidationError = require('zod-validation-error');
-var getSitemapTree = require('../../dist/getSitemapTree-d934ff9c.cjs.dev.js');
+var getSitemapTree = require('../../dist/getSitemapTree-98642b57.cjs.dev.js');
 var FlexSearch = require('flexsearch');
 var wrapNativeSuper = require('../../dist/wrapNativeSuper-933f991e.cjs.dev.js');
 var utils = require('../../dist/utils-d3d8b4b5.cjs.dev.js');
@@ -8785,6 +8785,7 @@ exports.parseRoutePattern = getSitemapTree.parseRoutePattern;
 exports.quickPreviewSiteOrigin = getSitemapTree.quickPreviewSiteOrigin;
 exports.readPageSnapshot = getSitemapTree.readPageSnapshot;
 exports.restoreScroll = getSitemapTree.restoreScroll;
+exports.screenshotPage = getSitemapTree.screenshotPage;
 exports.startElementPicking = getSitemapTree.startElementPicking;
 exports.storeQuickPreview = getSitemapTree.storeQuickPreview;
 exports.watchPageLocation = getSitemapTree.watchPageLocation;

package/internal/dist/valbuild-shared-internal.cjs.prod.js

@@ -7,7 +7,7 @@ var core = require('@valbuild/core');
 var zod = require('zod');
 var protocol = require('../../dist/protocol-b1055ef0.cjs.prod.js');
 var zodValidationError = require('zod-validation-error');
-var getSitemapTree = require('../../dist/getSitemapTree-5354ce90.cjs.prod.js');
+var getSitemapTree = require('../../dist/getSitemapTree-97713490.cjs.prod.js');
 var FlexSearch = require('flexsearch');
 var wrapNativeSuper = require('../../dist/wrapNativeSuper-8673414f.cjs.prod.js');
 var utils = require('../../dist/utils-32bcaca2.cjs.prod.js');
@@ -8785,6 +8785,7 @@ exports.parseRoutePattern = getSitemapTree.parseRoutePattern;
 exports.quickPreviewSiteOrigin = getSitemapTree.quickPreviewSiteOrigin;
 exports.readPageSnapshot = getSitemapTree.readPageSnapshot;
 exports.restoreScroll = getSitemapTree.restoreScroll;
+exports.screenshotPage = getSitemapTree.screenshotPage;
 exports.startElementPicking = getSitemapTree.startElementPicking;
 exports.storeQuickPreview = getSitemapTree.storeQuickPreview;
 exports.watchPageLocation = getSitemapTree.watchPageLocation;

package/internal/dist/valbuild-shared-internal.esm.js

@@ -4,7 +4,7 @@ import { z } from 'zod';
 import { _ as _objectWithoutProperties } from '../../dist/protocol-55cfa3cf.esm.js';
 export { P as PublishProtocolError, b as parseArtifacts, p as parseBuildTarget, l as parseCancel, a as parseDeclare, m as parseDiscard, j as parseJob, n as parseNewestCiRun, h as parsePress, g as parseProblems, f as parseProjectSource, d as parsePromote, o as parsePublishToken, k as parseRenew, i as parseRequestStatus, e as parseStatus, q as parseUpdateTarget, c as parseVerify } from '../../dist/protocol-55cfa3cf.esm.js';
 import { fromError } from 'zod-validation-error';
-export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, Q as QUICK_PREVIEW_PARAM, t as QUICK_PREVIEW_SERVICE_WORKER_PATH, x as QUICK_PREVIEW_SERVICE_WORKER_SOURCE, u as QUICK_PREVIEW_STORE_MESSAGE, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, j as attachElementPicker, k as createPickerOverlay, h as describeElement, l as elementLabel, q as findBySelector, E as formatRoutePattern, F as getNextAppRouterSourceFolder, J as getPageRouterSitemapTree, H as getPageRouterSourceFolder, K as getPatternFromModuleFilePath, G as getTanStackRouterSourceFolder, B as isDesignTabOrigin, v as isQuickPreviewFiles, I as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, m as modifierLabel, p as pageLocationOf, C as parseRoutePattern, A as quickPreviewSiteOrigin, o as readPageSnapshot, r as restoreScroll, s as startElementPicking, y as storeQuickPreview, n as watchPageLocation, z as withQuickPreviewParam, w as withValCanvasParam } from '../../dist/getSitemapTree-97b3166f.esm.js';
+export { D as DEFAULT_CANVAS_SELECTION, e as DEFAULT_CANVAS_SELECTION_SOFT, Q as QUICK_PREVIEW_PARAM, u as QUICK_PREVIEW_SERVICE_WORKER_PATH, y as QUICK_PREVIEW_SERVICE_WORKER_SOURCE, v as QUICK_PREVIEW_STORE_MESSAGE, b as VAL_AI_SESSION_STORAGE_KEY, d as VAL_CANVAS_MESSAGE, c as VAL_CANVAS_PARAM, V as VAL_CONFIG_SESSION_STORAGE_KEY, a as VAL_THEME_SESSION_STORAGE_KEY, j as attachElementPicker, k as createPickerOverlay, h as describeElement, l as elementLabel, q as findBySelector, F as formatRoutePattern, G as getNextAppRouterSourceFolder, K as getPageRouterSitemapTree, I as getPageRouterSourceFolder, L as getPatternFromModuleFilePath, H as getTanStackRouterSourceFolder, C as isDesignTabOrigin, x as isQuickPreviewFiles, J as isTanStackRoutesFolder, g as isValCanvasFrame, i as isValCanvasPageMessage, f as isValCanvasStudioMessage, m as modifierLabel, p as pageLocationOf, E as parseRoutePattern, B as quickPreviewSiteOrigin, o as readPageSnapshot, r as restoreScroll, t as screenshotPage, s as startElementPicking, z as storeQuickPreview, n as watchPageLocation, A as withQuickPreviewParam, w as withValCanvasParam } from '../../dist/getSitemapTree-7c848c94.esm.js';
 import FlexSearch from 'flexsearch';
 import { a as _createClass, c as _classCallCheck } from '../../dist/wrapNativeSuper-639b12b7.esm.js';
 import { b as base64DataUrlToUint8Array } from '../../dist/utils-00f3e1df.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@valbuild/shared",
-  "version": "0.150.12",
+  "version": "0.150.13",
   "private": false,
   "description": "Val shared types and utilities",
   "repository": {
@@ -50,6 +50,7 @@
   },
   "dependencies": {
     "flexsearch": "^0.8.212",
+    "modern-screenshot": "^4.7.0",
     "yaml": "^2.9.0",
     "zod": "^4.4.3",
     "zod-validation-error": "^5.0.0",