@mocanvas/state 4.14.0 → 4.15.1

package/CUSTOM_SHAPES.md

@@ -212,6 +212,25 @@ push it out; coming back on screen then costs a style change, not a remount.
 `0` unmounts at the viewport edge. A util whose `canCull()` returns `false` is
 never unmounted and never hidden for being off screen.
 
+**The zoom in your CSS.** `--mocanvas-zoom` and `--mocanvas-scale` are live on
+the canvas container, but the overlay declares them as constants so that a zoom
+does not restyle every node of every mounted shape — the single largest cost of
+a zoom gesture on a board of DOM cards. A shape whose own CSS reads them says so:
+
+```ts
+class CardUtil extends BaseBoxShapeUtil<CardShape> {
+  override usesCameraCssVars() {
+    return true // this card counter-scales its label
+  }
+}
+```
+
+That shape then gets the live values on its own wrapper, and its subtree is the
+only one that restyles on a zoom. `options.overlayCameraCssVars: "inherit"`
+turns the mechanism off altogether, for an app that would rather pay than name
+its shapes. Everything outside the overlay — your own chrome, panels, menus —
+reads the live values as before.
+
 ### `getIndicatorPath` — the selection outline
 
 ```ts

package/MIGRATION.md

@@ -273,7 +273,7 @@ it. Two groups are worth knowing about:
 
 | tldraw token | What you get |
 | --- | --- |
-| `--tl-zoom`, `--tl-scale` | Real values. mocanvas now stamps `--mocanvas-zoom` and `--mocanvas-scale` on the canvas container and restamps them on zoom, so `calc()` rules that hold a constant on-screen size keep working. |
+| `--tl-zoom`, `--tl-scale` | Real values. mocanvas stamps `--mocanvas-zoom` and `--mocanvas-scale` on the canvas container and restamps them on zoom, so `calc()` rules that hold a constant on-screen size keep working. Inside the DOM overlay they are constants unless the shape's util says `usesCameraCssVars()` — a tldraw shape whose CSS counter-scales with `--tl-scale` needs that line, or `options.overlayCameraCssVars: "inherit"`. |
 | `--tl-color-overlay`, `--tl-color-background-overlay`, `--tl-color-warn` | A static fallback. mocanvas has no equivalent, so these do not follow your theme — set them yourself if they matter. |
 
 Everything else maps onto a themed mocanvas variable and follows a theme swap

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mocanvas/state",
-  "version": "4.14.0",
+  "version": "4.15.1",
   "description": "Signals for mocanvas: atoms, computed values, transactions and React bindings.",
   "license": "SEE LICENSE IN LICENSE",
   "author": "Symbio Digital",