@valbuild/next 0.106.0 → 0.107.0

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

@@ -327,6 +327,130 @@ function ValCanvasBridge(_ref) {
     };
   }, [post]);
 
+  /**
+   * Two-finger gestures, handed to the studio.
+   *
+   * The window around the page is the studio's, and the page is a frame: a
+   * finger that lands here is this document's and the studio never hears about
+   * it. So a pinch on the page could not zoom the window, which on a phone is
+   * the only zoom there is — the toolbar's + and - are a poor substitute for the
+   * gesture everyone already makes.
+   *
+   * Two fingers and only two. One finger is the page's: it scrolls it, taps its
+   * links, drags whatever the page put there. Two are the window's, for zooming
+   * and for moving the page around inside it. Nothing has to be moded, and the
+   * two cannot be confused for one another.
+   *
+   * `passive: false` because both handlers cancel: the default for two fingers
+   * is the browser's own page zoom, which inside a frame the studio is already
+   * scaling produces two zooms fighting over one gesture.
+   */
+  React.useEffect(function () {
+    var midpoint = function midpoint(touches) {
+      return {
+        x: (touches[0].clientX + touches[1].clientX) / 2,
+        y: (touches[0].clientY + touches[1].clientY) / 2
+      };
+    };
+    var span = function span(touches) {
+      return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+    };
+    /**
+     * Whether a gesture is in progress.
+     *
+     * `touchend` fires per finger, so lifting one of two leaves a `touchend`
+     * carrying a single touch — which is the end of the gesture — and the
+     * second leaves one carrying none. Without this the second would post a
+     * second `end` for a gesture that was already over.
+     */
+    var active = false;
+    var onStart = function onStart(event) {
+      if (event.touches.length !== 2) return;
+      event.preventDefault();
+      active = true;
+      post({
+        val: VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "start",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onMove = function onMove(event) {
+      if (event.touches.length !== 2 || !active) return;
+      event.preventDefault();
+      post({
+        val: VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "move",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onEnd = function onEnd(event) {
+      if (!active || event.touches.length >= 2) return;
+      active = false;
+      post({
+        val: VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "end",
+        span: 0,
+        center: {
+          x: 0,
+          y: 0
+        }
+      });
+    };
+    document.addEventListener("touchstart", onStart, {
+      passive: false
+    });
+    document.addEventListener("touchmove", onMove, {
+      passive: false
+    });
+    document.addEventListener("touchend", onEnd);
+    document.addEventListener("touchcancel", onEnd);
+    return function () {
+      document.removeEventListener("touchstart", onStart);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("touchend", onEnd);
+      document.removeEventListener("touchcancel", onEnd);
+    };
+  }, [post]);
+
+  /**
+   * And ctrl/cmd + wheel, which is what a trackpad pinch reports as.
+   *
+   * The same problem as touches and the same answer: the wheel event lands on
+   * this document, so without relaying it a trackpad pinch over the page does
+   * nothing while the identical gesture over the canvas background zooms.
+   *
+   * A PLAIN wheel is deliberately left alone — that is the page scrolling
+   * itself, which is exactly what it should do.
+   */
+  React.useEffect(function () {
+    var onWheel = function onWheel(event) {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      post({
+        val: VAL_CANVAS_MESSAGE,
+        type: "zoom",
+        // The same response curve the studio uses for a wheel on its own
+        // background, so the gesture feels the same on both sides of the frame.
+        factor: 1 - event.deltaY / 300,
+        center: {
+          x: event.clientX,
+          y: event.clientY
+        }
+      });
+    };
+    document.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    return function () {
+      return document.removeEventListener("wheel", onWheel);
+    };
+  }, [post]);
+
   /**
    * The outlines, as a stylesheet rather than as injected elements.
    *

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

@@ -0,0 +1,7 @@
+'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");
+}

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

@@ -335,6 +335,130 @@ function ValCanvasBridge(_ref) {
     };
   }, [post]);
 
+  /**
+   * Two-finger gestures, handed to the studio.
+   *
+   * The window around the page is the studio's, and the page is a frame: a
+   * finger that lands here is this document's and the studio never hears about
+   * it. So a pinch on the page could not zoom the window, which on a phone is
+   * the only zoom there is — the toolbar's + and - are a poor substitute for the
+   * gesture everyone already makes.
+   *
+   * Two fingers and only two. One finger is the page's: it scrolls it, taps its
+   * links, drags whatever the page put there. Two are the window's, for zooming
+   * and for moving the page around inside it. Nothing has to be moded, and the
+   * two cannot be confused for one another.
+   *
+   * `passive: false` because both handlers cancel: the default for two fingers
+   * is the browser's own page zoom, which inside a frame the studio is already
+   * scaling produces two zooms fighting over one gesture.
+   */
+  React__default["default"].useEffect(function () {
+    var midpoint = function midpoint(touches) {
+      return {
+        x: (touches[0].clientX + touches[1].clientX) / 2,
+        y: (touches[0].clientY + touches[1].clientY) / 2
+      };
+    };
+    var span = function span(touches) {
+      return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+    };
+    /**
+     * Whether a gesture is in progress.
+     *
+     * `touchend` fires per finger, so lifting one of two leaves a `touchend`
+     * carrying a single touch — which is the end of the gesture — and the
+     * second leaves one carrying none. Without this the second would post a
+     * second `end` for a gesture that was already over.
+     */
+    var active = false;
+    var onStart = function onStart(event) {
+      if (event.touches.length !== 2) return;
+      event.preventDefault();
+      active = true;
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "start",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onMove = function onMove(event) {
+      if (event.touches.length !== 2 || !active) return;
+      event.preventDefault();
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "move",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onEnd = function onEnd(event) {
+      if (!active || event.touches.length >= 2) return;
+      active = false;
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "end",
+        span: 0,
+        center: {
+          x: 0,
+          y: 0
+        }
+      });
+    };
+    document.addEventListener("touchstart", onStart, {
+      passive: false
+    });
+    document.addEventListener("touchmove", onMove, {
+      passive: false
+    });
+    document.addEventListener("touchend", onEnd);
+    document.addEventListener("touchcancel", onEnd);
+    return function () {
+      document.removeEventListener("touchstart", onStart);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("touchend", onEnd);
+      document.removeEventListener("touchcancel", onEnd);
+    };
+  }, [post]);
+
+  /**
+   * And ctrl/cmd + wheel, which is what a trackpad pinch reports as.
+   *
+   * The same problem as touches and the same answer: the wheel event lands on
+   * this document, so without relaying it a trackpad pinch over the page does
+   * nothing while the identical gesture over the canvas background zooms.
+   *
+   * A PLAIN wheel is deliberately left alone — that is the page scrolling
+   * itself, which is exactly what it should do.
+   */
+  React__default["default"].useEffect(function () {
+    var onWheel = function onWheel(event) {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "zoom",
+        // The same response curve the studio uses for a wheel on its own
+        // background, so the gesture feels the same on both sides of the frame.
+        factor: 1 - event.deltaY / 300,
+        center: {
+          x: event.clientX,
+          y: event.clientY
+        }
+      });
+    };
+    document.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    return function () {
+      return document.removeEventListener("wheel", onWheel);
+    };
+  }, [post]);
+
   /**
    * The outlines, as a stylesheet rather than as injected elements.
    *

package/dist/{ValCanvasBridge-96f67a41.cjs.dev.js → ValCanvasBridge-cb2d9112.cjs.dev.js}

@@ -335,6 +335,130 @@ function ValCanvasBridge(_ref) {
     };
   }, [post]);
 
+  /**
+   * Two-finger gestures, handed to the studio.
+   *
+   * The window around the page is the studio's, and the page is a frame: a
+   * finger that lands here is this document's and the studio never hears about
+   * it. So a pinch on the page could not zoom the window, which on a phone is
+   * the only zoom there is — the toolbar's + and - are a poor substitute for the
+   * gesture everyone already makes.
+   *
+   * Two fingers and only two. One finger is the page's: it scrolls it, taps its
+   * links, drags whatever the page put there. Two are the window's, for zooming
+   * and for moving the page around inside it. Nothing has to be moded, and the
+   * two cannot be confused for one another.
+   *
+   * `passive: false` because both handlers cancel: the default for two fingers
+   * is the browser's own page zoom, which inside a frame the studio is already
+   * scaling produces two zooms fighting over one gesture.
+   */
+  React__default["default"].useEffect(function () {
+    var midpoint = function midpoint(touches) {
+      return {
+        x: (touches[0].clientX + touches[1].clientX) / 2,
+        y: (touches[0].clientY + touches[1].clientY) / 2
+      };
+    };
+    var span = function span(touches) {
+      return Math.hypot(touches[0].clientX - touches[1].clientX, touches[0].clientY - touches[1].clientY);
+    };
+    /**
+     * Whether a gesture is in progress.
+     *
+     * `touchend` fires per finger, so lifting one of two leaves a `touchend`
+     * carrying a single touch — which is the end of the gesture — and the
+     * second leaves one carrying none. Without this the second would post a
+     * second `end` for a gesture that was already over.
+     */
+    var active = false;
+    var onStart = function onStart(event) {
+      if (event.touches.length !== 2) return;
+      event.preventDefault();
+      active = true;
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "start",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onMove = function onMove(event) {
+      if (event.touches.length !== 2 || !active) return;
+      event.preventDefault();
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "move",
+        span: span(event.touches),
+        center: midpoint(event.touches)
+      });
+    };
+    var onEnd = function onEnd(event) {
+      if (!active || event.touches.length >= 2) return;
+      active = false;
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "pinch",
+        phase: "end",
+        span: 0,
+        center: {
+          x: 0,
+          y: 0
+        }
+      });
+    };
+    document.addEventListener("touchstart", onStart, {
+      passive: false
+    });
+    document.addEventListener("touchmove", onMove, {
+      passive: false
+    });
+    document.addEventListener("touchend", onEnd);
+    document.addEventListener("touchcancel", onEnd);
+    return function () {
+      document.removeEventListener("touchstart", onStart);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("touchend", onEnd);
+      document.removeEventListener("touchcancel", onEnd);
+    };
+  }, [post]);
+
+  /**
+   * And ctrl/cmd + wheel, which is what a trackpad pinch reports as.
+   *
+   * The same problem as touches and the same answer: the wheel event lands on
+   * this document, so without relaying it a trackpad pinch over the page does
+   * nothing while the identical gesture over the canvas background zooms.
+   *
+   * A PLAIN wheel is deliberately left alone — that is the page scrolling
+   * itself, which is exactly what it should do.
+   */
+  React__default["default"].useEffect(function () {
+    var onWheel = function onWheel(event) {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      post({
+        val: internal.VAL_CANVAS_MESSAGE,
+        type: "zoom",
+        // The same response curve the studio uses for a wheel on its own
+        // background, so the gesture feels the same on both sides of the frame.
+        factor: 1 - event.deltaY / 300,
+        center: {
+          x: event.clientX,
+          y: event.clientY
+        }
+      });
+    };
+    document.addEventListener("wheel", onWheel, {
+      passive: false
+    });
+    return function () {
+      return document.removeEventListener("wheel", onWheel);
+    };
+  }, [post]);
+
   /**
    * The outlines, as a stylesheet rather than as injected elements.
    *

package/dist/ValNextProvider-3209948c.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-d8713d9d.esm.js';
+import { ValCanvasBridge } from './ValCanvasBridge-1310aaeb.esm.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './unsupportedIterableToArray-5baabfdc.esm.js';
 import './defineProperty-cca5affa.esm.js';

package/dist/ValNextProvider-3d8ebfec.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-96f67a41.cjs.dev.js');
+var ValCanvasBridge = require('./ValCanvasBridge-cb2d9112.cjs.dev.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-c8ab77c9.cjs.dev.js');
 require('./defineProperty-f90345d7.cjs.dev.js');

package/dist/ValNextProvider-3fdf8756.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-f75509c6.cjs.prod.js');
+var ValCanvasBridge = require('./ValCanvasBridge-32299c6e.cjs.prod.js');
 var jsxRuntime = require('react/jsx-runtime');
 require('./unsupportedIterableToArray-0d2087a2.cjs.prod.js');
 require('./defineProperty-8951f469.cjs.prod.js');

package/package.json

@@ -12,7 +12,7 @@
     "next",
     "react"
   ],
-  "version": "0.106.0",
+  "version": "0.107.0",
   "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.106.0",
-    "@valbuild/react": "0.106.0",
-    "@valbuild/server": "0.106.0",
-    "@valbuild/shared": "0.106.0",
-    "@valbuild/ui": "0.105.1"
+    "@valbuild/language-server": "0.107.0",
+    "@valbuild/react": "0.107.0",
+    "@valbuild/server": "0.107.0",
+    "@valbuild/shared": "0.107.0",
+    "@valbuild/ui": "0.107.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.2",

package/dist/ValCanvasBridge-f75509c6.cjs.js

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