@valbuild/next 0.108.3 → 0.108.4

package/dist/{ValCanvasBridge-cb2d9112.cjs.dev.js → ValCanvasBridge-9d148bdd.cjs.dev.js}

@@ -289,10 +289,8 @@ function ValCanvasBridge(_ref) {
       setHighlighted(message.path);
       if (message.path !== null && message.scrollIntoView) {
         var target = findByPath(message.path);
-        target === null || target === void 0 || target.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
+        // NOT `scrollIntoView` — see `scrollWithinPage`.
+        if (target !== null) scrollWithinPage(target);
       }
     };
     window.addEventListener("message", listener);
@@ -499,6 +497,77 @@ function highlightRule(path) {
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
   return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
 }
+
+/**
+ * Bring an element into view WITHOUT scrolling anything outside this page.
+ *
+ * `Element.scrollIntoView` would be the obvious thing, and it is the thing that
+ * broke the studio. It scrolls every scroll container between the element and
+ * the viewport, and for a same-origin frame that chain does not stop at the
+ * frame: it continues into the embedder and scrolls the studio's own containers
+ * too. Measured in Chromium — with the studio's phone panes placed on the
+ * editor, a single `scrollIntoView` in here pulls them back onto the canvas, and
+ * because it reveals the element rather than the frame it can leave them
+ * anywhere in between, showing half of each.
+ *
+ * That is not a thing the page has any business doing. It was asked to show one
+ * of its own elements; where the studio is looking is the studio's affair. So
+ * the scrolling is done by hand, one scrollport at a time, and the walk stops at
+ * this document.
+ *
+ * Only the document centres the target vertically — it is being pointed out,
+ * and something flush against the top edge of the fold does not read as pointed
+ * out. Every scrollport inside the page is moved as little as it takes to bring
+ * the target inside it: a carousel, a sticky sidebar or a sideways-scrolling
+ * table is showing what it is showing on purpose, and re-centring one that did
+ * not need moving is the page rearranging itself around a highlight.
+ */
+function scrollWithinPage(target) {
+  var node = target.parentElement;
+  while (node !== null) {
+    var isRoot = node === document.body || node === document.documentElement;
+    if (isRoot) break;
+    if (isScrollable(node)) {
+      var port = node.getBoundingClientRect();
+      var _box = target.getBoundingClientRect();
+      node.scrollTop += delta(_box.top - port.top, _box.height, node.clientHeight, false);
+      node.scrollLeft += delta(_box.left - port.left, _box.width, node.clientWidth, false);
+    }
+    node = node.parentElement;
+  }
+  // And this document, which is the last scrollport there is as far as the page
+  // is concerned. `window`, not `documentElement.scrollIntoView`-by-another-name:
+  // this cannot reach past the frame.
+  var box = target.getBoundingClientRect();
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + delta(box.top, box.height, window.innerHeight, true)),
+    left: Math.max(0, window.scrollX + delta(box.left, box.width, window.innerWidth, false)),
+    behavior: "smooth"
+  });
+}
+
+/**
+ * How far a scrollport has to move for `size` at `offset` to be shown.
+ *
+ * `center` asks for the middle of the port; without it the answer is zero
+ * whenever the thing is already inside, which is what keeps a scrollport that
+ * did not need moving from being disturbed.
+ */
+function delta(offset, size, port, center) {
+  if (center) return offset - (port - size) / 2;
+  if (offset < 0) return offset;
+  if (offset + size > port) return Math.min(offset, offset + size - port);
+  return 0;
+}
+
+/** Whether this element scrolls its own content, rather than growing with it. */
+function isScrollable(el) {
+  var style = getComputedStyle(el);
+  var scrolls = function scrolls(value) {
+    return value === "auto" || value === "scroll" || value === "overlay";
+  };
+  return scrolls(style.overflowY) && el.scrollHeight > el.clientHeight || scrolls(style.overflowX) && el.scrollWidth > el.clientWidth;
+}
 function findByPath(path) {
   var elements = document.querySelectorAll("[data-val-path]");
   for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {

package/dist/{ValCanvasBridge-1310aaeb.esm.js → ValCanvasBridge-d9948526.esm.js}

@@ -281,10 +281,8 @@ function ValCanvasBridge(_ref) {
       setHighlighted(message.path);
       if (message.path !== null && message.scrollIntoView) {
         var target = findByPath(message.path);
-        target === null || target === void 0 || target.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
+        // NOT `scrollIntoView` — see `scrollWithinPage`.
+        if (target !== null) scrollWithinPage(target);
       }
     };
     window.addEventListener("message", listener);
@@ -491,6 +489,77 @@ function highlightRule(path) {
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
   return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
 }
+
+/**
+ * Bring an element into view WITHOUT scrolling anything outside this page.
+ *
+ * `Element.scrollIntoView` would be the obvious thing, and it is the thing that
+ * broke the studio. It scrolls every scroll container between the element and
+ * the viewport, and for a same-origin frame that chain does not stop at the
+ * frame: it continues into the embedder and scrolls the studio's own containers
+ * too. Measured in Chromium — with the studio's phone panes placed on the
+ * editor, a single `scrollIntoView` in here pulls them back onto the canvas, and
+ * because it reveals the element rather than the frame it can leave them
+ * anywhere in between, showing half of each.
+ *
+ * That is not a thing the page has any business doing. It was asked to show one
+ * of its own elements; where the studio is looking is the studio's affair. So
+ * the scrolling is done by hand, one scrollport at a time, and the walk stops at
+ * this document.
+ *
+ * Only the document centres the target vertically — it is being pointed out,
+ * and something flush against the top edge of the fold does not read as pointed
+ * out. Every scrollport inside the page is moved as little as it takes to bring
+ * the target inside it: a carousel, a sticky sidebar or a sideways-scrolling
+ * table is showing what it is showing on purpose, and re-centring one that did
+ * not need moving is the page rearranging itself around a highlight.
+ */
+function scrollWithinPage(target) {
+  var node = target.parentElement;
+  while (node !== null) {
+    var isRoot = node === document.body || node === document.documentElement;
+    if (isRoot) break;
+    if (isScrollable(node)) {
+      var port = node.getBoundingClientRect();
+      var _box = target.getBoundingClientRect();
+      node.scrollTop += delta(_box.top - port.top, _box.height, node.clientHeight, false);
+      node.scrollLeft += delta(_box.left - port.left, _box.width, node.clientWidth, false);
+    }
+    node = node.parentElement;
+  }
+  // And this document, which is the last scrollport there is as far as the page
+  // is concerned. `window`, not `documentElement.scrollIntoView`-by-another-name:
+  // this cannot reach past the frame.
+  var box = target.getBoundingClientRect();
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + delta(box.top, box.height, window.innerHeight, true)),
+    left: Math.max(0, window.scrollX + delta(box.left, box.width, window.innerWidth, false)),
+    behavior: "smooth"
+  });
+}
+
+/**
+ * How far a scrollport has to move for `size` at `offset` to be shown.
+ *
+ * `center` asks for the middle of the port; without it the answer is zero
+ * whenever the thing is already inside, which is what keeps a scrollport that
+ * did not need moving from being disturbed.
+ */
+function delta(offset, size, port, center) {
+  if (center) return offset - (port - size) / 2;
+  if (offset < 0) return offset;
+  if (offset + size > port) return Math.min(offset, offset + size - port);
+  return 0;
+}
+
+/** Whether this element scrolls its own content, rather than growing with it. */
+function isScrollable(el) {
+  var style = getComputedStyle(el);
+  var scrolls = function scrolls(value) {
+    return value === "auto" || value === "scroll" || value === "overlay";
+  };
+  return scrolls(style.overflowY) && el.scrollHeight > el.clientHeight || scrolls(style.overflowX) && el.scrollWidth > el.clientWidth;
+}
 function findByPath(path) {
   var elements = document.querySelectorAll("[data-val-path]");
   for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {

package/dist/ValCanvasBridge-e62125f8.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./ValCanvasBridge-e62125f8.cjs.prod.js");
+} else {
+  module.exports = require("./ValCanvasBridge-e62125f8.cjs.dev.js");
+}

package/dist/{ValCanvasBridge-32299c6e.cjs.prod.js → ValCanvasBridge-e62125f8.cjs.prod.js}

@@ -289,10 +289,8 @@ function ValCanvasBridge(_ref) {
       setHighlighted(message.path);
       if (message.path !== null && message.scrollIntoView) {
         var target = findByPath(message.path);
-        target === null || target === void 0 || target.scrollIntoView({
-          block: "center",
-          behavior: "smooth"
-        });
+        // NOT `scrollIntoView` — see `scrollWithinPage`.
+        if (target !== null) scrollWithinPage(target);
       }
     };
     window.addEventListener("message", listener);
@@ -499,6 +497,77 @@ function highlightRule(path) {
   var selectors = ["[data-val-path=".concat(value, "]"), "[data-val-path^=".concat(first, "]"), "[data-val-path$=".concat(last, "]"), "[data-val-path*=".concat(inner, "]")].join(",\n");
   return "".concat(selectors, " { outline: 2px solid ").concat(SELECTION, "; outline-offset: 1px; }");
 }
+
+/**
+ * Bring an element into view WITHOUT scrolling anything outside this page.
+ *
+ * `Element.scrollIntoView` would be the obvious thing, and it is the thing that
+ * broke the studio. It scrolls every scroll container between the element and
+ * the viewport, and for a same-origin frame that chain does not stop at the
+ * frame: it continues into the embedder and scrolls the studio's own containers
+ * too. Measured in Chromium — with the studio's phone panes placed on the
+ * editor, a single `scrollIntoView` in here pulls them back onto the canvas, and
+ * because it reveals the element rather than the frame it can leave them
+ * anywhere in between, showing half of each.
+ *
+ * That is not a thing the page has any business doing. It was asked to show one
+ * of its own elements; where the studio is looking is the studio's affair. So
+ * the scrolling is done by hand, one scrollport at a time, and the walk stops at
+ * this document.
+ *
+ * Only the document centres the target vertically — it is being pointed out,
+ * and something flush against the top edge of the fold does not read as pointed
+ * out. Every scrollport inside the page is moved as little as it takes to bring
+ * the target inside it: a carousel, a sticky sidebar or a sideways-scrolling
+ * table is showing what it is showing on purpose, and re-centring one that did
+ * not need moving is the page rearranging itself around a highlight.
+ */
+function scrollWithinPage(target) {
+  var node = target.parentElement;
+  while (node !== null) {
+    var isRoot = node === document.body || node === document.documentElement;
+    if (isRoot) break;
+    if (isScrollable(node)) {
+      var port = node.getBoundingClientRect();
+      var _box = target.getBoundingClientRect();
+      node.scrollTop += delta(_box.top - port.top, _box.height, node.clientHeight, false);
+      node.scrollLeft += delta(_box.left - port.left, _box.width, node.clientWidth, false);
+    }
+    node = node.parentElement;
+  }
+  // And this document, which is the last scrollport there is as far as the page
+  // is concerned. `window`, not `documentElement.scrollIntoView`-by-another-name:
+  // this cannot reach past the frame.
+  var box = target.getBoundingClientRect();
+  window.scrollTo({
+    top: Math.max(0, window.scrollY + delta(box.top, box.height, window.innerHeight, true)),
+    left: Math.max(0, window.scrollX + delta(box.left, box.width, window.innerWidth, false)),
+    behavior: "smooth"
+  });
+}
+
+/**
+ * How far a scrollport has to move for `size` at `offset` to be shown.
+ *
+ * `center` asks for the middle of the port; without it the answer is zero
+ * whenever the thing is already inside, which is what keeps a scrollport that
+ * did not need moving from being disturbed.
+ */
+function delta(offset, size, port, center) {
+  if (center) return offset - (port - size) / 2;
+  if (offset < 0) return offset;
+  if (offset + size > port) return Math.min(offset, offset + size - port);
+  return 0;
+}
+
+/** Whether this element scrolls its own content, rather than growing with it. */
+function isScrollable(el) {
+  var style = getComputedStyle(el);
+  var scrolls = function scrolls(value) {
+    return value === "auto" || value === "scroll" || value === "overlay";
+  };
+  return scrolls(style.overflowY) && el.scrollHeight > el.clientHeight || scrolls(style.overflowX) && el.scrollWidth > el.clientWidth;
+}
 function findByPath(path) {
   var elements = document.querySelectorAll("[data-val-path]");
   for (var _i = 0, _Array$from = Array.from(elements); _i < _Array$from.length; _i++) {

package/dist/ValNextProvider-588f2ff0.esm.js

@@ -11,7 +11,7 @@ import { SET_AUTO_TAG_JSX_ENABLED } from '@valbuild/react/stega';
 import { VAL_THEME_SESSION_STORAGE_KEY, createValClient, isValCanvasFrame } from '@valbuild/shared/internal';
 import { p as prefixStyles, u as useConfigStorageSave, f as floatDarkBg, d as floatLightBg, v as valPrefixedClass, c as cn } from './fallbackColors-5ead2c26.esm.js';
 import { _ as _createForOfIteratorHelper } from './createForOfIteratorHelper-5758a730.esm.js';
-import { ValCanvasBridge } from './ValCanvasBridge-1310aaeb.esm.js';
+import { ValCanvasBridge } from './ValCanvasBridge-d9948526.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 import './defineProperty-cca5affa.esm.js';

package/dist/ValNextProvider-bd3f89d3.cjs.prod.js

@@ -15,7 +15,7 @@ var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
 var fallbackColors = require('./fallbackColors-d4a5b0da.cjs.prod.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-d4afcad8.cjs.prod.js');
-var ValCanvasBridge = require('./ValCanvasBridge-32299c6e.cjs.prod.js');
+var ValCanvasBridge = require('./ValCanvasBridge-e62125f8.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('./defineProperty-8951f469.cjs.prod.js');

package/dist/ValNextProvider-f206d2ea.cjs.dev.js

@@ -15,7 +15,7 @@ var stega = require('@valbuild/react/stega');
 var internal = require('@valbuild/shared/internal');
 var fallbackColors = require('./fallbackColors-9a2ac53a.cjs.dev.js');
 var createForOfIteratorHelper = require('./createForOfIteratorHelper-0445603c.cjs.dev.js');
-var ValCanvasBridge = require('./ValCanvasBridge-cb2d9112.cjs.dev.js');
+var ValCanvasBridge = require('./ValCanvasBridge-9d148bdd.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');

package/package.json

@@ -12,7 +12,7 @@
     "next",
     "react"
   ],
-  "version": "0.108.3",
+  "version": "0.108.4",
   "main": "dist/valbuild-next.cjs.js",
   "module": "dist/valbuild-next.esm.js",
   "exports": {
@@ -48,11 +48,11 @@
     "client-only": "^0.0.1",
     "server-only": "^0.0.1",
     "@valbuild/core": "0.106.0",
-    "@valbuild/language-server": "0.108.3",
-    "@valbuild/server": "0.108.3",
-    "@valbuild/react": "0.108.3",
+    "@valbuild/language-server": "0.108.4",
+    "@valbuild/react": "0.108.4",
+    "@valbuild/server": "0.108.4",
     "@valbuild/shared": "0.108.0",
-    "@valbuild/ui": "0.108.3"
+    "@valbuild/ui": "0.108.4"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",

package/dist/ValCanvasBridge-32299c6e.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./ValCanvasBridge-32299c6e.cjs.prod.js");
-} else {
-  module.exports = require("./ValCanvasBridge-32299c6e.cjs.dev.js");
-}