@tscircuit/pcb-viewer 1.11.10 → 1.11.12

package/dist/index.js

@@ -1,211 +1,8 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
-var __commonJS = (cb, mod) => function __require2() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-
-// node_modules/use-mouse-matrix-transform/dist/index.js
-var require_dist = __commonJS({
-  "node_modules/use-mouse-matrix-transform/dist/index.js"(exports, module) {
-    "use strict";
-    var __defProp2 = Object.defineProperty;
-    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
-    var __getOwnPropNames2 = Object.getOwnPropertyNames;
-    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-    var __export2 = (target, all) => {
-      for (var name in all)
-        __defProp2(target, name, { get: all[name], enumerable: true });
-    };
-    var __copyProps2 = (to, from, except, desc) => {
-      if (from && typeof from === "object" || typeof from === "function") {
-        for (let key of __getOwnPropNames2(from))
-          if (!__hasOwnProp2.call(to, key) && key !== except)
-            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
-      }
-      return to;
-    };
-    var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var src_exports = {};
-    __export2(src_exports, {
-      default: () => src_default,
-      useMouseMatrixTransform: () => useMouseMatrixTransform2
-    });
-    module.exports = __toCommonJS(src_exports);
-    var import_transformation_matrix12 = __require("transformation-matrix");
-    var import_react22 = __require("react");
-    var useMouseMatrixTransform2 = (props = {}) => {
-      const extRef = (0, import_react22.useRef)(null);
-      const [lastDragCancelTime, setLastDragCancelTime] = (0, import_react22.useState)(0);
-      const outerCanvasElm = props.canvasElm ?? extRef.current;
-      const [internalTransform, setInternalTransform] = (0, import_react22.useState)(
-        props.initialTransform ?? (0, import_transformation_matrix12.identity)()
-      );
-      const [waitCounter, setWaitCounter] = (0, import_react22.useState)(0);
-      const [extChangeCounter, incExtChangeCounter] = (0, import_react22.useReducer)((s) => s + 1, 0);
-      const setTransform = (0, import_react22.useCallback)(
-        (newTransform) => {
-          if (props.onSetTransform) {
-            props.onSetTransform(newTransform);
-          }
-          if (!props.transform) {
-            setInternalTransform(newTransform);
-          }
-        },
-        [props.onSetTransform, setInternalTransform]
-      );
-      const setTransformExt = (0, import_react22.useCallback)(
-        (newTransform) => {
-          setTransform(newTransform);
-          incExtChangeCounter();
-        },
-        [setTransform]
-      );
-      const transform = props.transform ?? internalTransform;
-      const cancelDrag = (0, import_react22.useCallback)(() => {
-        setLastDragCancelTime(Date.now());
-      }, []);
-      (0, import_react22.useEffect)(() => {
-        const canvasElm = props.canvasElm ?? extRef.current;
-        if (canvasElm && !outerCanvasElm) {
-          setWaitCounter(waitCounter + 1);
-          return;
-        }
-        if (!canvasElm) {
-          const timeout = setTimeout(() => {
-            setWaitCounter(waitCounter + 1);
-          }, 100);
-          return () => clearTimeout(timeout);
-        }
-        let init_tf = props.transform ?? internalTransform;
-        let m0 = { x: 0, y: 0 }, m1 = { x: 0, y: 0 }, md = false, mlastrel = { x: 0, y: 0 };
-        const getMousePos = (e) => {
-          return {
-            x: e.pageX - canvasElm.getBoundingClientRect().left - window.scrollX,
-            y: e.pageY - canvasElm.getBoundingClientRect().top - window.scrollY
-          };
-        };
-        function handleMouseDown(e) {
-          if (props.enabled === false)
-            return;
-          if (props.shouldDrag && !props.shouldDrag(e))
-            return;
-          m0 = getMousePos(e);
-          if (Date.now() - lastDragCancelTime < 100)
-            return;
-          md = true;
-          e.preventDefault();
-        }
-        function handleMouseUp(e) {
-          if (!md || props.enabled === false)
-            return;
-          if (props.shouldDrag && !props.shouldDrag(e))
-            return;
-          m1 = getMousePos(e);
-          const new_tf = (0, import_transformation_matrix12.compose)((0, import_transformation_matrix12.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
-          setTransform(new_tf);
-          init_tf = new_tf;
-          md = false;
-        }
-        function handleMouseMove(e) {
-          mlastrel = getMousePos(e);
-          if (!md || props.enabled === false)
-            return;
-          if (props.shouldDrag && !props.shouldDrag(e))
-            return;
-          m1 = getMousePos(e);
-          setTransform((0, import_transformation_matrix12.compose)((0, import_transformation_matrix12.translate)(m1.x - m0.x, m1.y - m0.y), init_tf));
-        }
-        function handleMouseWheel(e) {
-          if (props.enabled === false)
-            return;
-          if (props.shouldDrag && !props.shouldDrag(e))
-            return;
-          const center = getMousePos(e);
-          const new_tf = (0, import_transformation_matrix12.compose)(
-            (0, import_transformation_matrix12.translate)(center.x, center.y),
-            (0, import_transformation_matrix12.scale)(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3),
-            (0, import_transformation_matrix12.translate)(-center.x, -center.y),
-            init_tf
-          );
-          setTransform(new_tf);
-          init_tf = new_tf;
-          e.preventDefault();
-        }
-        function handleMouseOut(e) {
-          if (!md)
-            return;
-          if (props.shouldDrag && !props.shouldDrag(e))
-            return;
-          if (canvasElm) {
-            const boundingBox = canvasElm.getBoundingClientRect();
-            if (e.clientX >= boundingBox.left + 10 && e.clientX <= boundingBox.right - 10 && e.clientY >= boundingBox.top + 10 && e.clientY <= boundingBox.bottom - 10) {
-              return;
-            }
-          }
-          md = false;
-          m1 = getMousePos(e);
-          const new_tf = (0, import_transformation_matrix12.compose)((0, import_transformation_matrix12.translate)(m1.x - m0.x, m1.y - m0.y), init_tf);
-          setTransform(new_tf);
-          init_tf = new_tf;
-        }
-        canvasElm.addEventListener("mousedown", handleMouseDown);
-        canvasElm.addEventListener("mouseup", handleMouseUp);
-        window.addEventListener("mousemove", handleMouseMove);
-        canvasElm.addEventListener("mouseout", handleMouseOut);
-        canvasElm.addEventListener("wheel", handleMouseWheel);
-        return () => {
-          canvasElm.removeEventListener("mousedown", handleMouseDown);
-          canvasElm.removeEventListener("mouseup", handleMouseUp);
-          window.removeEventListener("mousemove", handleMouseMove);
-          canvasElm.removeEventListener("mouseout", handleMouseOut);
-          canvasElm.removeEventListener("wheel", handleMouseWheel);
-        };
-      }, [outerCanvasElm, waitCounter, extChangeCounter, lastDragCancelTime, props.enabled, props.shouldDrag]);
-      const applyTransformToPoint = (0, import_react22.useCallback)(
-        (obj) => (0, import_transformation_matrix12.applyToPoint)(transform, obj),
-        [transform]
-      );
-      return {
-        ref: extRef,
-        transform,
-        applyTransformToPoint,
-        setTransform: setTransformExt,
-        cancelDrag
-      };
-    };
-    var src_default = useMouseMatrixTransform2;
-  }
-});
 
 // src/PCBViewer.tsx
 import { useRenderedCircuit } from "@tscircuit/core";
@@ -5616,7 +5413,7 @@ var su = (soup, options = {}) => {
           },
           update: (id, newProps) => {
             const elm = soup.find(
-              (e) => e[`${component_type}_id`] === id
+              (e) => e.type === component_type && e[`${component_type}_id`] === id
             );
             if (!elm)
               return;
@@ -6011,7 +5808,7 @@ var ToastContainer = () => {
 };
 
 // src/PCBViewer.tsx
-import { useEffect as useEffect11, useMemo as useMemo6, useState as useState9 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo6, useState as useState10 } from "react";
 
 // node_modules/react-use/esm/misc/util.js
 var noop = function() {
@@ -6061,23 +5858,173 @@ var useMeasure_default = isBrowser && typeof window.ResizeObserver !== "undefine
 };
 
 // src/PCBViewer.tsx
-var import_use_mouse_matrix_transform = __toESM(require_dist(), 1);
-import { compose as compose3, scale, translate as translate4 } from "transformation-matrix";
+import { compose as compose4, scale as scale2, translate as translate5 } from "transformation-matrix";
+
+// node_modules/use-mouse-matrix-transform/dist/chunk-5TGSLHOO.js
+import {
+  identity,
+  scale,
+  translate as translate2,
+  compose,
+  applyToPoint as applyToPoint2
+} from "transformation-matrix";
+import { useCallback, useEffect as useEffect3, useReducer, useRef, useState as useState2 } from "react";
+var useMouseMatrixTransform = (props = {}) => {
+  const extRef = useRef(null);
+  const [lastDragCancelTime, setLastDragCancelTime] = useState2(0);
+  const outerCanvasElm = props.canvasElm ?? extRef.current;
+  const [internalTransform, setInternalTransform] = useState2(
+    props.initialTransform ?? identity()
+  );
+  const [waitCounter, setWaitCounter] = useState2(0);
+  const [extChangeCounter, incExtChangeCounter] = useReducer((s) => s + 1, 0);
+  const setTransform = useCallback(
+    (newTransform) => {
+      if (props.onSetTransform) {
+        props.onSetTransform(newTransform);
+      }
+      if (!props.transform) {
+        setInternalTransform(newTransform);
+      }
+    },
+    [props.onSetTransform, setInternalTransform]
+  );
+  const setTransformExt = useCallback(
+    (newTransform) => {
+      setTransform(newTransform);
+      incExtChangeCounter();
+    },
+    [setTransform]
+  );
+  const transform = props.transform ?? internalTransform;
+  const cancelDrag = useCallback(() => {
+    setLastDragCancelTime(Date.now());
+  }, []);
+  useEffect3(() => {
+    const canvasElm = props.canvasElm ?? extRef.current;
+    if (canvasElm && !outerCanvasElm) {
+      setWaitCounter(waitCounter + 1);
+      return;
+    }
+    if (!canvasElm) {
+      const timeout = setTimeout(() => {
+        setWaitCounter(waitCounter + 1);
+      }, 100);
+      return () => clearTimeout(timeout);
+    }
+    let init_tf = props.transform ?? internalTransform;
+    let m0 = { x: 0, y: 0 }, m1 = { x: 0, y: 0 }, md = false, mlastrel = { x: 0, y: 0 };
+    const getMousePos = (e) => {
+      return {
+        x: e.pageX - canvasElm.getBoundingClientRect().left - window.scrollX,
+        y: e.pageY - canvasElm.getBoundingClientRect().top - window.scrollY
+      };
+    };
+    function handleMouseDown(e) {
+      if (props.enabled === false)
+        return;
+      if (props.shouldDrag && !props.shouldDrag(e))
+        return;
+      m0 = getMousePos(e);
+      if (Date.now() - lastDragCancelTime < 100)
+        return;
+      md = true;
+      e.preventDefault();
+    }
+    function handleMouseUp(e) {
+      if (!md || props.enabled === false)
+        return;
+      if (props.shouldDrag && !props.shouldDrag(e))
+        return;
+      m1 = getMousePos(e);
+      const new_tf = compose(translate2(m1.x - m0.x, m1.y - m0.y), init_tf);
+      setTransform(new_tf);
+      init_tf = new_tf;
+      md = false;
+    }
+    function handleMouseMove(e) {
+      mlastrel = getMousePos(e);
+      if (!md || props.enabled === false)
+        return;
+      if (props.shouldDrag && !props.shouldDrag(e))
+        return;
+      m1 = getMousePos(e);
+      setTransform(compose(translate2(m1.x - m0.x, m1.y - m0.y), init_tf));
+    }
+    function handleMouseWheel(e) {
+      if (props.enabled === false)
+        return;
+      if (props.shouldDrag && !props.shouldDrag(e))
+        return;
+      const center = getMousePos(e);
+      const new_tf = compose(
+        translate2(center.x, center.y),
+        scale(1 - e.deltaY / 1e3, 1 - e.deltaY / 1e3),
+        translate2(-center.x, -center.y),
+        init_tf
+      );
+      setTransform(new_tf);
+      init_tf = new_tf;
+      e.preventDefault();
+    }
+    function handleMouseOut(e) {
+      if (!md)
+        return;
+      if (props.shouldDrag && !props.shouldDrag(e))
+        return;
+      if (canvasElm) {
+        const boundingBox = canvasElm.getBoundingClientRect();
+        if (e.clientX >= boundingBox.left + 10 && e.clientX <= boundingBox.right - 10 && e.clientY >= boundingBox.top + 10 && e.clientY <= boundingBox.bottom - 10) {
+          return;
+        }
+      }
+      md = false;
+      m1 = getMousePos(e);
+      const new_tf = compose(translate2(m1.x - m0.x, m1.y - m0.y), init_tf);
+      setTransform(new_tf);
+      init_tf = new_tf;
+    }
+    canvasElm.addEventListener("mousedown", handleMouseDown);
+    canvasElm.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("mousemove", handleMouseMove);
+    canvasElm.addEventListener("mouseout", handleMouseOut);
+    canvasElm.addEventListener("wheel", handleMouseWheel);
+    return () => {
+      canvasElm.removeEventListener("mousedown", handleMouseDown);
+      canvasElm.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("mousemove", handleMouseMove);
+      canvasElm.removeEventListener("mouseout", handleMouseOut);
+      canvasElm.removeEventListener("wheel", handleMouseWheel);
+    };
+  }, [outerCanvasElm, waitCounter, extChangeCounter, lastDragCancelTime, props.enabled, props.shouldDrag]);
+  const applyTransformToPoint = useCallback(
+    (obj) => applyToPoint2(transform, obj),
+    [transform]
+  );
+  return {
+    ref: extRef,
+    transform,
+    applyTransformToPoint,
+    setTransform: setTransformExt,
+    cancelDrag
+  };
+};
+var src_default = useMouseMatrixTransform;
 
 // src/components/CanvasElementsRenderer.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 
 // src/components/CanvasPrimitiveRenderer.tsx
 import { SuperGrid, toMMSI } from "react-supergrid";
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect4, useRef as useRef2 } from "react";
 
 // src/lib/Drawer.ts
 import {
-  applyToPoint as applyToPoint2,
-  compose,
-  identity,
+  applyToPoint as applyToPoint3,
+  compose as compose2,
+  identity as identity2,
   inverse,
-  translate as translate2
+  translate as translate3
 } from "transformation-matrix";
 
 // src/lib/colors.ts
@@ -6386,9 +6333,9 @@ var Drawer = class {
         canvas.getContext("2d")
       ])
     );
-    this.transform = identity();
+    this.transform = identity2();
     this.transform.d *= -1;
-    this.transform = compose(this.transform, translate2(0, -500));
+    this.transform = compose2(this.transform, translate3(0, -500));
     this.lastPoint = { x: 0, y: 0 };
     this.equip({});
   }
@@ -6411,8 +6358,8 @@ var Drawer = class {
   }
   drawMeshPattern(x, y, width, height, spacing, angle = 45) {
     const ctx = this.getLayerCtx();
-    const [x1, y1] = applyToPoint2(this.transform, [x, y]);
-    const [x2, y2] = applyToPoint2(this.transform, [x + width, y + height]);
+    const [x1, y1] = applyToPoint3(this.transform, [x, y]);
+    const [x2, y2] = applyToPoint3(this.transform, [x + width, y + height]);
     const spacing$ = scaleOnly(this.transform, spacing);
     ctx.lineWidth = 1;
     ctx.strokeStyle = this.aperture.color;
@@ -6431,8 +6378,8 @@ var Drawer = class {
     drawLines((angle + 90) * Math.PI / 180);
   }
   rect(x, y, w, h, mesh_fill) {
-    const [x1$, y1$] = applyToPoint2(this.transform, [x - w / 2, y - h / 2]);
-    const [x2$, y2$] = applyToPoint2(this.transform, [x + w / 2, y + h / 2]);
+    const [x1$, y1$] = applyToPoint3(this.transform, [x - w / 2, y - h / 2]);
+    const [x2$, y2$] = applyToPoint3(this.transform, [x + w / 2, y + h / 2]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     if (mesh_fill) {
@@ -6450,10 +6397,10 @@ var Drawer = class {
   rotatedRect(x, y, w, h, ccw_rotation, mesh_fill) {
     const ctx = this.getLayerCtx();
     this.applyAperture();
-    const [x1$, y1$] = applyToPoint2(this.transform, [x - w / 2, y - h / 2]);
-    const [x2$, y2$] = applyToPoint2(this.transform, [x + w / 2, y + h / 2]);
+    const [x1$, y1$] = applyToPoint3(this.transform, [x - w / 2, y - h / 2]);
+    const [x2$, y2$] = applyToPoint3(this.transform, [x + w / 2, y + h / 2]);
     ctx.save();
-    const [centerX, centerY] = applyToPoint2(this.transform, [x, y]);
+    const [centerX, centerY] = applyToPoint3(this.transform, [x, y]);
     ctx.translate(centerX, centerY);
     const cw_rotation = 360 - ccw_rotation;
     if (ccw_rotation) ctx.rotate(cw_rotation * Math.PI / 180);
@@ -6471,7 +6418,7 @@ var Drawer = class {
   }
   circle(x, y, r, mesh_fill) {
     const r$ = scaleOnly(this.transform, r);
-    const [x$, y$] = applyToPoint2(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     if (mesh_fill) {
@@ -6493,7 +6440,7 @@ var Drawer = class {
   oval(x, y, rx, ry) {
     const rx$ = scaleOnly(this.transform, rx);
     const ry$ = scaleOnly(this.transform, ry);
-    const [x$, y$] = applyToPoint2(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     ctx.beginPath();
@@ -6502,7 +6449,7 @@ var Drawer = class {
     ctx.closePath();
   }
   pill(x, y, w, h) {
-    const [x$, y$] = applyToPoint2(this.transform, [x - w / 2, y + h / 2]);
+    const [x$, y$] = applyToPoint3(this.transform, [x - w / 2, y + h / 2]);
     const width$ = scaleOnly(this.transform, w);
     const height$ = scaleOnly(this.transform, h);
     const radius = Math.min(width$, height$) / 2;
@@ -6529,7 +6476,7 @@ var Drawer = class {
     this.applyAperture();
     const ctx = this.getLayerCtx();
     const transformedPoints = points.map(
-      (point2) => applyToPoint2(this.transform, [point2.x, point2.y])
+      (point2) => applyToPoint3(this.transform, [point2.x, point2.y])
     );
     ctx.beginPath();
     ctx.moveTo(transformedPoints[0][0], transformedPoints[0][1]);
@@ -6544,7 +6491,7 @@ var Drawer = class {
   }
   /* NOTE: This is not gerber compatible */
   debugText(text, x, y) {
-    const [x$, y$] = applyToPoint2(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     ctx.font = `10px sans-serif`;
@@ -6609,11 +6556,11 @@ var Drawer = class {
     this.lastPoint = { x, y };
   }
   lineTo(x, y) {
-    const [x$, y$] = applyToPoint2(this.transform, [x, y]);
+    const [x$, y$] = applyToPoint3(this.transform, [x, y]);
     const { size: size2, shape, mode } = this.aperture;
     const size$ = scaleOnly(this.transform, size2);
     let { lastPoint } = this;
-    const lastPoint$ = applyToPoint2(this.transform, lastPoint);
+    const lastPoint$ = applyToPoint3(this.transform, lastPoint);
     this.applyAperture();
     const ctx = this.getLayerCtx();
     if (shape === "square")
@@ -6635,24 +6582,24 @@ var Drawer = class {
 };
 
 // src/lib/util/rotate-text.ts
-import { compose as compose2, translate as translate3, rotate, applyToPoint as applyToPoint3 } from "transformation-matrix";
+import { compose as compose3, translate as translate4, rotate, applyToPoint as applyToPoint4 } from "transformation-matrix";
 function rotateText(rotateTextParams) {
   const { lines, anchorPoint, ccwRotation } = rotateTextParams;
   if (!ccwRotation) return lines;
   const rad = ccwRotation * Math.PI / 180;
   const rotationMatrix = rotate(rad);
-  const transform = compose2(
-    translate3(anchorPoint.x, anchorPoint.y),
+  const transform = compose3(
+    translate4(anchorPoint.x, anchorPoint.y),
     rotationMatrix,
-    translate3(-anchorPoint.x, -anchorPoint.y)
+    translate4(-anchorPoint.x, -anchorPoint.y)
   );
-  applyToPoint3(transform, anchorPoint);
+  applyToPoint4(transform, anchorPoint);
   return lines.map((line) => ({
     ...line,
-    x1: applyToPoint3(transform, { x: line.x1, y: line.y1 }).x,
-    y1: applyToPoint3(transform, { x: line.x1, y: line.y1 }).y,
-    x2: applyToPoint3(transform, { x: line.x2, y: line.y2 }).x,
-    y2: applyToPoint3(transform, { x: line.x2, y: line.y2 }).y
+    x1: applyToPoint4(transform, { x: line.x1, y: line.y1 }).x,
+    y1: applyToPoint4(transform, { x: line.x1, y: line.y1 }).y,
+    x2: applyToPoint4(transform, { x: line.x2, y: line.y2 }).x,
+    y2: applyToPoint4(transform, { x: line.x2, y: line.y2 }).y
   }));
 }
 
@@ -6904,9 +6851,9 @@ var CanvasPrimitiveRenderer = ({
   width = 500,
   height = 500
 }) => {
-  const canvasRefs = useRef();
+  const canvasRefs = useRef2();
   const selectedLayer = useGlobalStore((s) => s.selected_layer);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!canvasRefs.current) return;
     if (Object.keys(canvasRefs.current).length === 0) return;
     const drawer = new Drawer(canvasRefs.current);
@@ -7017,16 +6964,16 @@ function getExpandedStroke(strokeInput, defaultWidth) {
       addPoint(current2, normalPrev, -1, currentWidth);
       addPoint(current2, normalNext, -1, currentWidth);
     } else {
-      const scale2 = 1 / miterLength;
+      const scale3 = 1 / miterLength;
       addPoint(
         current2,
-        { x: miterX * scale2, y: miterY * scale2 },
+        { x: miterX * scale3, y: miterY * scale3 },
         1,
         currentWidth
       );
       addPoint(
         current2,
-        { x: miterX * scale2, y: miterY * scale2 },
+        { x: miterX * scale3, y: miterY * scale3 },
         -1,
         currentWidth
       );
@@ -7544,12 +7491,12 @@ var convertElementToPrimitives = (element, allElements) => {
 };
 
 // src/components/MouseElementTracker.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { useMemo as useMemo3 } from "react";
-import { applyToPoint as applyToPoint4, inverse as inverse2 } from "transformation-matrix";
+import { applyToPoint as applyToPoint5, inverse as inverse2 } from "transformation-matrix";
 
 // src/components/ElementOverlayBox.tsx
-import { useEffect as useEffect4, useState as useState2 } from "react";
+import { useEffect as useEffect5, useState as useState3 } from "react";
 
 // src/lib/get-trace-overlay-text.ts
 function getTraceOverlayInfo({
@@ -7660,9 +7607,9 @@ var HighlightedPrimitiveBoxWithText = ({
   mousePos,
   elements
 }) => {
-  const [finalState, setFinalState] = useState2(false);
+  const [finalState, setFinalState] = useState3(false);
   const primitiveElement = primitive._element;
-  useEffect4(() => {
+  useEffect5(() => {
     setTimeout(() => {
       setFinalState(true);
     }, 100);
@@ -7824,15 +7771,15 @@ var MouseElementTracker = ({
   primitives,
   onMouseHoverOverPrimitives
 }) => {
-  const [mousedPrimitives, setMousedPrimitives] = useState3([]);
-  const [mousePos, setMousePos] = useState3({ x: 0, y: 0 });
+  const [mousedPrimitives, setMousedPrimitives] = useState4([]);
+  const [mousePos, setMousePos] = useState4({ x: 0, y: 0 });
   const highlightedPrimitives = useMemo3(() => {
     const highlightedPrimitives2 = [];
     for (const primitive of mousedPrimitives) {
       if (primitive._element?.type === "pcb_via") continue;
       if (primitive._element?.type === "pcb_component") continue;
       if (primitive?.layer === "drill") continue;
-      const screenPos = applyToPoint4(
+      const screenPos = applyToPoint5(
         transform,
         primitive
       );
@@ -7866,7 +7813,7 @@ var MouseElementTracker = ({
           const x = e.clientX - rect.left;
           const y = e.clientY - rect.top;
           setMousePos({ x, y });
-          const rwPoint = applyToPoint4(inverse2(transform), { x, y });
+          const rwPoint = applyToPoint5(inverse2(transform), { x, y });
           const newMousedPrimitives = [];
           for (const primitive of primitives) {
             if (!primitive._element) continue;
@@ -7924,20 +7871,20 @@ var MouseElementTracker = ({
 };
 
 // src/components/DimensionOverlay.tsx
-import { useEffect as useEffect5, useRef as useRef2, useState as useState4 } from "react";
-import { applyToPoint as applyToPoint5, identity as identity2, inverse as inverse3 } from "transformation-matrix";
+import { useEffect as useEffect6, useRef as useRef3, useState as useState5 } from "react";
+import { applyToPoint as applyToPoint6, identity as identity3, inverse as inverse3 } from "transformation-matrix";
 import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var DimensionOverlay = ({ children, transform }) => {
-  if (!transform) transform = identity2();
-  const [dimensionToolVisible, setDimensionToolVisible] = useState4(false);
-  const [dimensionToolStretching, setDimensionToolStretching] = useState4(false);
-  const [dStart, setDStart] = useState4({ x: 0, y: 0 });
-  const [dEnd, setDEnd] = useState4({ x: 0, y: 0 });
-  const mousePosRef = useRef2({ x: 0, y: 0 });
-  const containerRef = useRef2(null);
+  if (!transform) transform = identity3();
+  const [dimensionToolVisible, setDimensionToolVisible] = useState5(false);
+  const [dimensionToolStretching, setDimensionToolStretching] = useState5(false);
+  const [dStart, setDStart] = useState5({ x: 0, y: 0 });
+  const [dEnd, setDEnd] = useState5({ x: 0, y: 0 });
+  const mousePosRef = useRef3({ x: 0, y: 0 });
+  const containerRef = useRef3(null);
   const container = containerRef.current;
   const containerBounds = container?.getBoundingClientRect();
-  useEffect5(() => {
+  useEffect6(() => {
     const container2 = containerRef.current;
     const down = (e) => {
       if (e.key === "d") {
@@ -7977,8 +7924,8 @@ var DimensionOverlay = ({ children, transform }) => {
       }
     };
   }, [containerRef]);
-  const screenDStart = applyToPoint5(transform, dStart);
-  const screenDEnd = applyToPoint5(transform, dEnd);
+  const screenDStart = applyToPoint6(transform, dStart);
+  const screenDEnd = applyToPoint6(transform, dEnd);
   const arrowScreenBounds = {
     left: Math.min(screenDStart.x, screenDEnd.x),
     right: Math.max(screenDStart.x, screenDEnd.x),
@@ -8011,7 +7958,7 @@ var DimensionOverlay = ({ children, transform }) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
-        const rwPoint = applyToPoint5(inverse3(transform), { x, y });
+        const rwPoint = applyToPoint6(inverse3(transform), { x, y });
         mousePosRef.current.x = rwPoint.x;
         mousePosRef.current.y = rwPoint.y;
         if (dimensionToolStretching) {
@@ -8186,13 +8133,13 @@ var DimensionOverlay = ({ children, transform }) => {
 };
 
 // src/components/ToolbarOverlay.tsx
-import { Fragment as Fragment2, useState as useState5 } from "react";
+import { Fragment as Fragment2, useState as useState6 } from "react";
 import { css } from "@emotion/css";
 
 // package.json
 var package_default = {
   name: "@tscircuit/pcb-viewer",
-  version: "1.11.9",
+  version: "1.11.11",
   main: "dist/index.js",
   type: "module",
   repository: "tscircuit/pcb-viewer",
@@ -8221,7 +8168,7 @@ var package_default = {
     "@tscircuit/core": "0.0.255",
     "@tscircuit/eagle-xml-converter": "^0.0.7",
     "@tscircuit/props": "^0.0.128",
-    "@tscircuit/soup-util": "^0.0.38",
+    "@tscircuit/soup-util": "^0.0.41",
     "@types/color": "^3.0.6",
     "@types/node": "18.7.23",
     "@types/react": "^18.3.3",
@@ -8235,7 +8182,7 @@ var package_default = {
     tsup: "^8.0.2",
     "type-fest": "^3.0.0",
     typescript: "^5.4.4",
-    "use-mouse-matrix-transform": "^1.1.13",
+    "use-mouse-matrix-transform": "^1.3.0",
     zod: "^3.23.5"
   },
   peerDependencies: {
@@ -8256,12 +8203,12 @@ var package_default = {
 };
 
 // src/hooks/useHotKey.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 var useHotKey = (key, onUse) => {
   const isMouseOverContainer = useGlobalStore(
     (s) => s.is_mouse_over_container
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (!key || typeof onUse !== "function") return;
     const handleKeyDown = (event) => {
       const keyParts = key.split("+");
@@ -8378,9 +8325,9 @@ var ToolbarOverlay = ({ children, elements }) => {
   const [isMouseOverContainer, setIsMouseOverContainer] = useGlobalStore(
     (s) => [s.is_mouse_over_container, s.setIsMouseOverContainer]
   );
-  const [isViewMenuOpen, setViewMenuOpen] = useState5(false);
-  const [isLayerMenuOpen, setLayerMenuOpen] = useState5(false);
-  const [isErrorsOpen, setErrorsOpen] = useState5(false);
+  const [isViewMenuOpen, setViewMenuOpen] = useState6(false);
+  const [isLayerMenuOpen, setLayerMenuOpen] = useState6(false);
+  const [isErrorsOpen, setErrorsOpen] = useState6(false);
   const [selectedLayer, selectLayer] = useGlobalStore(
     (s) => [s.selected_layer, s.selectLayer]
   );
@@ -8622,8 +8569,8 @@ var ToolbarOverlay = ({ children, elements }) => {
 
 // src/components/ErrorOverlay.tsx
 import { css as css2 } from "@emotion/css";
-import { useRef as useRef3 } from "react";
-import { applyToPoint as applyToPoint6, identity as identity3 } from "transformation-matrix";
+import { useRef as useRef4 } from "react";
+import { applyToPoint as applyToPoint7, identity as identity4 } from "transformation-matrix";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ErrorSVG = ({
   screenPort1,
@@ -8683,8 +8630,8 @@ var ErrorSVG = ({
   }
 );
 var ErrorOverlay = ({ children, transform, elements }) => {
-  if (!transform) transform = identity3();
-  const containerRef = useRef3(null);
+  if (!transform) transform = identity4();
+  const containerRef = useRef4(null);
   return /* @__PURE__ */ jsxs5("div", { style: { position: "relative" }, ref: containerRef, children: [
     children,
     elements?.filter((el) => el.type === "pcb_trace_error").map((el) => {
@@ -8696,11 +8643,11 @@ var ErrorOverlay = ({ children, transform, elements }) => {
         (el2) => el2.type === "pcb_port" && el2.pcb_port_id === pcb_port_ids?.[1]
       );
       if (!port1 || !port2) return null;
-      const screenPort1 = applyToPoint6(transform, {
+      const screenPort1 = applyToPoint7(transform, {
         x: port1.x,
         y: port1.y
       });
-      const screenPort2 = applyToPoint6(transform, {
+      const screenPort2 = applyToPoint7(transform, {
         x: port2.x,
         y: port2.y
       });
@@ -8776,8 +8723,8 @@ var ErrorOverlay = ({ children, transform, elements }) => {
 };
 
 // src/components/EditPlacementOverlay.tsx
-import { useRef as useRef4, useState as useState6 } from "react";
-import { applyToPoint as applyToPoint7, identity as identity4, inverse as inverse4 } from "transformation-matrix";
+import { useRef as useRef5, useState as useState7 } from "react";
+import { applyToPoint as applyToPoint8, identity as identity5, inverse as inverse4 } from "transformation-matrix";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var isInsideOf = (pcb_component2, point2, padding = 0) => {
   const halfWidth = pcb_component2.width / 2;
@@ -8797,12 +8744,12 @@ var EditPlacementOverlay = ({
   onCreateEditEvent,
   onModifyEditEvent
 }) => {
-  if (!transform) transform = identity4();
-  const containerRef = useRef4(null);
-  const [activePcbComponentId, setActivePcbComponent] = useState6(
+  if (!transform) transform = identity5();
+  const containerRef = useRef5(null);
+  const [activePcbComponentId, setActivePcbComponent] = useState7(
     null
   );
-  const [dragState, setDragState] = useState6(null);
+  const [dragState, setDragState] = useState7(null);
   const isPcbComponentActive = activePcbComponentId !== null;
   const in_edit_mode = useGlobalStore((s) => s.in_edit_mode);
   const in_move_footprint_mode = useGlobalStore((s) => s.in_move_footprint_mode);
@@ -8822,7 +8769,7 @@ var EditPlacementOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint7(inverse4(transform), { x, y });
+        const rwMousePoint = applyToPoint8(inverse4(transform), { x, y });
         let foundActiveComponent = false;
         for (const e2 of soup) {
           if (e2.type === "pcb_component" && isInsideOf(e2, rwMousePoint, 10 / transform.a)) {
@@ -8863,7 +8810,7 @@ var EditPlacementOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint7(inverse4(transform), { x, y });
+        const rwMousePoint = applyToPoint8(inverse4(transform), { x, y });
         setDragState({
           ...dragState,
           dragEnd: rwMousePoint
@@ -8892,7 +8839,7 @@ var EditPlacementOverlay = ({
         children,
         !disabled && soup.filter((e) => e.type === "pcb_component").map((e) => {
           if (!e?.center) return null;
-          const projectedCenter = applyToPoint7(transform, e.center);
+          const projectedCenter = applyToPoint8(transform, e.center);
           return /* @__PURE__ */ jsx9(
             "div",
             {
@@ -8917,21 +8864,21 @@ var EditPlacementOverlay = ({
 };
 
 // src/components/EditTraceHintOverlay.tsx
-import { Fragment as Fragment4, useEffect as useEffect10, useRef as useRef5, useState as useState7 } from "react";
+import { Fragment as Fragment4, useEffect as useEffect11, useRef as useRef6, useState as useState8 } from "react";
 import {
-  applyToPoint as applyToPoint8,
-  identity as identity5,
+  applyToPoint as applyToPoint9,
+  identity as identity6,
   inverse as inverse5
 } from "transformation-matrix";
 
 // src/components/HotkeyActionMenu.tsx
 import { css as css3 } from "@emotion/css";
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var HotkeyActionMenu = ({
   hotkeys
 }) => {
-  useEffect9(() => {
+  useEffect10(() => {
     const handleKeyDown = (event) => {
       hotkeys.forEach((hotkey) => {
         if (event.key === hotkey.key) {
@@ -9031,22 +8978,22 @@ var EditTraceHintOverlay = ({
   onCreateEditEvent,
   onModifyEditEvent
 }) => {
-  if (!transform) transform = identity5();
-  const containerRef = useRef5(null);
+  if (!transform) transform = identity6();
+  const containerRef = useRef6(null);
   const containerBounds = containerRef.current?.getBoundingClientRect();
-  const [selectedElement, setSelectedElement] = useState7(null);
+  const [selectedElement, setSelectedElement] = useState8(null);
   const toast = useToast();
-  const [dragState, setDragState] = useState7(null);
-  const [shouldCreateAsVia, setShouldCreateAsVia] = useState7(false);
+  const [dragState, setDragState] = useState8(null);
+  const [shouldCreateAsVia, setShouldCreateAsVia] = useState8(false);
   const isElementSelected = selectedElement !== null;
   const in_edit_trace_mode = useGlobalStore((s) => s.in_draw_trace_mode);
   const disabled = disabledProp || !in_edit_trace_mode;
   let ogCenterScreen, dragEndScreen;
   if (dragState?.originalCenter && dragState?.dragEnd) {
-    ogCenterScreen = applyToPoint8(transform, dragState?.originalCenter);
-    dragEndScreen = applyToPoint8(transform, dragState?.dragEnd);
+    ogCenterScreen = applyToPoint9(transform, dragState?.originalCenter);
+    dragEndScreen = applyToPoint9(transform, dragState?.dragEnd);
   }
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isElementSelected) return;
     function keyDown(e) {
       if (e.key === "Escape") {
@@ -9071,7 +9018,7 @@ var EditTraceHintOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint8(inverse5(transform), { x, y });
+        const rwMousePoint = applyToPoint9(inverse5(transform), { x, y });
         if (!isElementSelected) {
           for (const e2 of soup) {
             if (e2.type === "pcb_smtpad" && isInsideOfSmtpad(e2, rwMousePoint, 10 / transform.a) || e2.type === "pcb_plated_hole" && isInsideOfPlatedHole(e2, rwMousePoint, 10 / transform.a)) {
@@ -9114,7 +9061,7 @@ var EditTraceHintOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint8(inverse5(transform), { x, y });
+        const rwMousePoint = applyToPoint9(inverse5(transform), { x, y });
         setDragState({
           ...dragState,
           dragEnd: rwMousePoint
@@ -9133,10 +9080,10 @@ var EditTraceHintOverlay = ({
         const x = e.clientX - rect.left;
         const y = e.clientY - rect.top;
         if (isNaN(x) || isNaN(y)) return;
-        const rwMousePoint = applyToPoint8(inverse5(transform), { x, y });
+        const rwMousePoint = applyToPoint9(inverse5(transform), { x, y });
         if (dragState) {
           cancelPanDrag();
-          const lastPointScreen = applyToPoint8(
+          const lastPointScreen = applyToPoint9(
             transform,
             dragState.editEvent.route.slice(-1)[0] ?? dragState.originalCenter
           );
@@ -9184,11 +9131,11 @@ var EditTraceHintOverlay = ({
                 "path",
                 {
                   stroke: "red",
-                  d: `M ${ogCenterScreen.x} ${ogCenterScreen.y} ${dragState?.editEvent.route.map((p) => applyToPoint8(transform, p)).map((p) => `L ${p.x} ${p.y}`).join(" ")} L ${dragEndScreen.x} ${dragEndScreen.y}`
+                  d: `M ${ogCenterScreen.x} ${ogCenterScreen.y} ${dragState?.editEvent.route.map((p) => applyToPoint9(transform, p)).map((p) => `L ${p.x} ${p.y}`).join(" ")} L ${dragEndScreen.x} ${dragEndScreen.y}`
                 }
               ),
               dragState?.editEvent.route.map((r, i) => {
-                const rScreen = applyToPoint8(transform, r);
+                const rScreen = applyToPoint9(transform, r);
                 return /* @__PURE__ */ jsxs8(Fragment4, { children: [
                   r.via && /* @__PURE__ */ jsx11("circle", { cx: rScreen.x, cy: rScreen.y, r: 16, stroke: "red" }),
                   /* @__PURE__ */ jsx11("circle", { cx: rScreen.x, cy: rScreen.y, r: 8, stroke: "red" })
@@ -9232,7 +9179,7 @@ var EditTraceHintOverlay = ({
             children: soup.filter((e) => e.type === "pcb_trace_hint").map((e) => {
               const { route } = e;
               const pcb_port2 = su_default(soup).pcb_port.get(e.pcb_port_id);
-              const pcb_port_screen = applyToPoint8(transform, pcb_port2);
+              const pcb_port_screen = applyToPoint9(transform, pcb_port2);
               return /* @__PURE__ */ jsxs8(Fragment4, { children: [
                 /* @__PURE__ */ jsx11(
                   "rect",
@@ -9249,11 +9196,11 @@ var EditTraceHintOverlay = ({
                   "path",
                   {
                     stroke: "red",
-                    d: `M ${pcb_port_screen.x} ${pcb_port_screen.y} ${route.map((r) => applyToPoint8(transform, r)).map((r) => `L ${r.x} ${r.y}`).join(" ")}`
+                    d: `M ${pcb_port_screen.x} ${pcb_port_screen.y} ${route.map((r) => applyToPoint9(transform, r)).map((r) => `L ${r.x} ${r.y}`).join(" ")}`
                   },
                   `path-${e.pcb_port_id}`
                 ),
-                route.map((r) => ({ ...r, ...applyToPoint8(transform, r) })).map((r, i) => /* @__PURE__ */ jsxs8(Fragment4, { children: [
+                route.map((r) => ({ ...r, ...applyToPoint9(transform, r) })).map((r, i) => /* @__PURE__ */ jsxs8(Fragment4, { children: [
                   /* @__PURE__ */ jsx11("circle", { cx: r.x, cy: r.y, r: 8, stroke: "red" }),
                   r.via && /* @__PURE__ */ jsx11(
                     "circle",
@@ -9311,7 +9258,7 @@ var EditTraceHintOverlay = ({
 };
 
 // src/components/RatsNestOverlay.tsx
-import { applyToPoint as applyToPoint9, identity as identity6 } from "transformation-matrix";
+import { applyToPoint as applyToPoint10, identity as identity7 } from "transformation-matrix";
 import { getFullConnectivityMapFromCircuitJson } from "circuit-json-to-connectivity-map";
 import { useMemo as useMemo4 } from "react";
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -9377,7 +9324,7 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
     return lines;
   }, [soup, netMap, idToNetMap, isShowingRatsNest]);
   if (!soup || !isShowingRatsNest) return children;
-  if (!transform) transform = identity6();
+  if (!transform) transform = identity7();
   return /* @__PURE__ */ jsxs9("div", { style: { position: "relative" }, children: [
     children,
     /* @__PURE__ */ jsx12(
@@ -9394,8 +9341,8 @@ var RatsNestOverlay = ({ transform, soup, children }) => {
           zIndex: zIndexMap.ratsNestOverlay
         },
         children: ratsNestLines.map(({ key, startPoint, endPoint, isInNet }) => {
-          const transformedStart = applyToPoint9(transform, startPoint);
-          const transformedEnd = applyToPoint9(transform, endPoint);
+          const transformedStart = applyToPoint10(transform, startPoint);
+          const transformedEnd = applyToPoint10(transform, endPoint);
           return /* @__PURE__ */ jsx12(
             "line",
             {
@@ -9460,7 +9407,7 @@ var CanvasElementsRenderer = (props) => {
     );
     return [primitivesWithoutInteractionMetadata2, connectivityMap2];
   }, [props.elements]);
-  const [primitives, setPrimitives] = useState8(
+  const [primitives, setPrimitives] = useState9(
     primitivesWithoutInteractionMetadata
   );
   return /* @__PURE__ */ jsx13(
@@ -9529,7 +9476,7 @@ var CanvasElementsRenderer = (props) => {
 
 // src/PCBViewer.tsx
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-var defaultTransform = compose3(translate4(400, 300), scale(40, -40));
+var defaultTransform = compose4(translate5(400, 300), scale2(40, -40));
 var PCBViewer = ({
   children,
   soup,
@@ -9548,16 +9495,16 @@ var PCBViewer = ({
   } = useRenderedCircuit(children);
   circuitJson ??= circuitJsonFromChildren ?? [];
   const [ref, refDimensions] = useMeasure_default();
-  const [transform, setTransformInternal] = useState9(defaultTransform);
+  const [transform, setTransformInternal] = useState10(defaultTransform);
   const {
     ref: transformRef,
     setTransform,
     cancelDrag: cancelPanDrag
-  } = (0, import_use_mouse_matrix_transform.default)({
+  } = src_default({
     transform,
     onSetTransform: setTransformInternal
   });
-  let [editEvents, setEditEvents] = useState9([]);
+  let [editEvents, setEditEvents] = useState10([]);
   editEvents = editEventsProp ?? editEvents;
   const resetTransform = () => {
     const elmBounds = refDimensions?.width > 0 ? refDimensions : { width: 500, height: 500 };
@@ -9572,14 +9519,14 @@ var PCBViewer = ({
       100
     ) * 0.75;
     setTransform(
-      compose3(
-        translate4((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
-        scale(scaleFactor, -scaleFactor, 0, 0),
-        translate4(-center.x, -center.y)
+      compose4(
+        translate5((elmBounds.width ?? 0) / 2, (elmBounds.height ?? 0) / 2),
+        scale2(scaleFactor, -scaleFactor, 0, 0),
+        translate5(-center.x, -center.y)
       )
     );
   };
-  useEffect11(() => {
+  useEffect12(() => {
     if (refDimensions && refDimensions.width !== 0 && (children || soup)) {
       resetTransform();
     }