microboard-ui-temp 0.10.1 → 0.10.2

package/dist/{chunk-63m1m4n2.js → chunk-e1r2sk6e.js}

@@ -248398,7 +248398,13 @@ var conf = {
   CARD_DIMENSIONS: { width: 250, height: 400 },
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
-  CONNECTOR_ITEM_OFFSET: 20
+  CONNECTOR_ITEM_OFFSET: 20,
+  GRAVITY_G: 80,
+  GRAVITY_G_CENTER: 120,
+  GRAVITY_DAMPING: 0.96,
+  GRAVITY_RESTITUTION: 0.5,
+  GRAVITY_REPULSION: 200,
+  GRAVITY_MAX_DISTANCE: 3000
 };
 initDefaultI18N();
 var BG_LIGHT = "rgb(248, 249, 251)";
@@ -265528,6 +265534,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id2 = "", transformation = new Transformation(id2, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id2);
@@ -265650,10 +265658,10 @@ class RichText extends BaseItem {
     const shouldUpdateLayout = this.getTextWidth() > (maxWidth || 0);
     if (shouldUpdateLayout) {
       this.updateElement();
-      this.subject.publish(this);
     } else {
       this.transformCanvas();
       this.recoordinate(maxWidth);
+      this.subject.publish(this);
     }
   }
   handleFocus = () => {
@@ -265717,10 +265725,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -265821,13 +265829,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -266186,10 +266198,20 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
@@ -266321,10 +266343,18 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     const elements = this.editor.editor.children.map(renderNode);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    const transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -282909,7 +282939,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -283458,6 +283490,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {
@@ -283844,11 +283878,11 @@ function convertBlobToDataUrl(blob) {
     };
   });
 }
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -283893,7 +283927,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -283909,6 +283943,8 @@ class DefaultFrameData {
   }
 }
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -283924,7 +283960,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -283945,12 +283981,23 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
-    this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
+    this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(6, 1.2 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();
@@ -283975,9 +284022,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -284120,6 +284175,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -284135,15 +284191,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);
@@ -297058,13 +297112,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.92;
-  REPULSION = 800;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -297133,8 +297182,8 @@ class GravityEngine {
       const dcx = centerX - s1.cx;
       const dcy = centerY - s1.cy;
       const distCenter = Math.sqrt(dcx * dcx + dcy * dcy) + 1;
-      ax += this.G_CENTER * dcx / distCenter;
-      ay += this.G_CENTER * dcy / distCenter;
+      ax += conf.GRAVITY_G_CENTER * dcx / distCenter;
+      ay += conf.GRAVITY_G_CENTER * dcy / distCenter;
       for (let j = 0;j < snap.length; j++) {
         if (i === j)
           continue;
@@ -297142,7 +297191,7 @@ class GravityEngine {
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
         const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-        if (dist > this.MAX_DISTANCE)
+        if (dist > conf.GRAVITY_MAX_DISTANCE)
           continue;
         const overlapping = s1.right > s2.left && s2.right > s1.left && s1.bottom > s2.top && s2.bottom > s1.top;
         if (overlapping) {
@@ -297150,20 +297199,27 @@ class GravityEngine {
           const overlapY = Math.min(s1.bottom, s2.bottom) - Math.max(s1.top, s2.top);
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
-            ax += sign * this.REPULSION * overlapX;
+            if (sign * vel.vx < 0)
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
-            ay += sign * this.REPULSION * overlapY;
+            if (sign * vel.vy < 0)
+              vel.vy = -vel.vy * conf.GRAVITY_RESTITUTION;
+            ay += sign * conf.GRAVITY_REPULSION * overlapY;
           }
         } else {
+          const touchDist = (s1.w + s2.w + s1.h + s2.h) * 0.25;
+          if (dist < touchDist + 5)
+            continue;
           const distSq = dx * dx + dy * dy;
-          const gravAcc = this.G * s2.mass / (distSq + this.SOFTENING_SQ);
+          const gravAcc = conf.GRAVITY_G * s2.mass / (distSq + this.SOFTENING_SQ);
           ax += gravAcc * dx / dist;
           ay += gravAcc * dy / dist;
         }
       }
-      vel.vx = (vel.vx + ax * dt) * this.DAMPING;
-      vel.vy = (vel.vy + ay * dt) * this.DAMPING;
+      vel.vx = (vel.vx + ax * dt) * conf.GRAVITY_DAMPING;
+      vel.vy = (vel.vy + ay * dt) * conf.GRAVITY_DAMPING;
       const moveX = vel.vx * dt;
       const moveY = vel.vy * dt;
       if (Math.abs(moveX) >= this.MIN_MOVE_PX || Math.abs(moveY) >= this.MIN_MOVE_PX) {

package/dist/example.html

@@ -44,7 +44,7 @@
         document.documentElement.setAttribute("data-theme", t);
       })();
     </script>
-  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-63m1m4n2.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-e1r2sk6e.js"></script></head>
 
   <body
     style="

package/dist/index.html

@@ -44,7 +44,7 @@
         document.documentElement.setAttribute("data-theme", t);
       })();
     </script>
-  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-63m1m4n2.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-e1r2sk6e.js"></script></head>
 
   <body
     style="

package/dist/index.js

@@ -248398,7 +248398,13 @@ var conf = {
   CARD_DIMENSIONS: { width: 250, height: 400 },
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
-  CONNECTOR_ITEM_OFFSET: 20
+  CONNECTOR_ITEM_OFFSET: 20,
+  GRAVITY_G: 80,
+  GRAVITY_G_CENTER: 120,
+  GRAVITY_DAMPING: 0.96,
+  GRAVITY_RESTITUTION: 0.5,
+  GRAVITY_REPULSION: 200,
+  GRAVITY_MAX_DISTANCE: 3000
 };
 initDefaultI18N();
 var BG_LIGHT = "rgb(248, 249, 251)";
@@ -265528,6 +265534,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id2 = "", transformation = new Transformation(id2, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id2);
@@ -265650,10 +265658,10 @@ class RichText extends BaseItem {
     const shouldUpdateLayout = this.getTextWidth() > (maxWidth || 0);
     if (shouldUpdateLayout) {
       this.updateElement();
-      this.subject.publish(this);
     } else {
       this.transformCanvas();
       this.recoordinate(maxWidth);
+      this.subject.publish(this);
     }
   }
   handleFocus = () => {
@@ -265717,10 +265725,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -265821,13 +265829,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -266186,10 +266198,20 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
@@ -266321,10 +266343,18 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     const elements = this.editor.editor.children.map(renderNode);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    const transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -282909,7 +282939,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -283458,6 +283490,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {
@@ -283844,11 +283878,11 @@ function convertBlobToDataUrl(blob) {
     };
   });
 }
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -283893,7 +283927,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -283909,6 +283943,8 @@ class DefaultFrameData {
   }
 }
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -283924,7 +283960,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -283945,12 +283981,23 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
-    this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
+    this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(6, 1.2 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();
@@ -283975,9 +284022,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -284120,6 +284175,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -284135,15 +284191,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);
@@ -297058,13 +297112,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.92;
-  REPULSION = 800;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -297133,8 +297182,8 @@ class GravityEngine {
       const dcx = centerX - s1.cx;
       const dcy = centerY - s1.cy;
       const distCenter = Math.sqrt(dcx * dcx + dcy * dcy) + 1;
-      ax += this.G_CENTER * dcx / distCenter;
-      ay += this.G_CENTER * dcy / distCenter;
+      ax += conf.GRAVITY_G_CENTER * dcx / distCenter;
+      ay += conf.GRAVITY_G_CENTER * dcy / distCenter;
       for (let j = 0;j < snap.length; j++) {
         if (i === j)
           continue;
@@ -297142,7 +297191,7 @@ class GravityEngine {
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
         const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-        if (dist > this.MAX_DISTANCE)
+        if (dist > conf.GRAVITY_MAX_DISTANCE)
           continue;
         const overlapping = s1.right > s2.left && s2.right > s1.left && s1.bottom > s2.top && s2.bottom > s1.top;
         if (overlapping) {
@@ -297150,20 +297199,27 @@ class GravityEngine {
           const overlapY = Math.min(s1.bottom, s2.bottom) - Math.max(s1.top, s2.top);
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
-            ax += sign * this.REPULSION * overlapX;
+            if (sign * vel.vx < 0)
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
-            ay += sign * this.REPULSION * overlapY;
+            if (sign * vel.vy < 0)
+              vel.vy = -vel.vy * conf.GRAVITY_RESTITUTION;
+            ay += sign * conf.GRAVITY_REPULSION * overlapY;
           }
         } else {
+          const touchDist = (s1.w + s2.w + s1.h + s2.h) * 0.25;
+          if (dist < touchDist + 5)
+            continue;
           const distSq = dx * dx + dy * dy;
-          const gravAcc = this.G * s2.mass / (distSq + this.SOFTENING_SQ);
+          const gravAcc = conf.GRAVITY_G * s2.mass / (distSq + this.SOFTENING_SQ);
           ax += gravAcc * dx / dist;
           ay += gravAcc * dy / dist;
         }
       }
-      vel.vx = (vel.vx + ax * dt) * this.DAMPING;
-      vel.vy = (vel.vy + ay * dt) * this.DAMPING;
+      vel.vx = (vel.vx + ax * dt) * conf.GRAVITY_DAMPING;
+      vel.vy = (vel.vy + ay * dt) * conf.GRAVITY_DAMPING;
       const moveX = vel.vx * dt;
       const moveY = vel.vy * dt;
       if (Math.abs(moveX) >= this.MIN_MOVE_PX || Math.abs(moveY) >= this.MIN_MOVE_PX) {

package/dist/spa.css

@@ -2883,12 +2883,6 @@ a.link_jFMnzg {
   background-color: #f7f7f8;
 }
 
-.quaternary_Lhh5GA {
-  color: #fff;
-  background-color: #924fe8;
-  border: 1px solid #924fe8;
-}
-
 .quaternary_Lhh5GA:hover {
   background-color: #b799f5;
   border: 1px solid #924fe8;

package/dist/spa.js

@@ -43029,14 +43029,14 @@ __export(exports_SignatureEnvelope, {
   validate: () => validate7,
   types: () => types9,
   toRpc: () => toRpc5,
-  serialize: () => serialize3,
+  serialize: () => serialize5,
   magicBytes: () => magicBytes3,
   getType: () => getType,
   fromRpc: () => fromRpc4,
   from: () => from15,
   extractPublicKey: () => extractPublicKey,
   extractAddress: () => extractAddress,
-  deserialize: () => deserialize5,
+  deserialize: () => deserialize6,
   assert: () => assert11,
   VerificationError: () => VerificationError2,
   MissingPropertiesError: () => MissingPropertiesError2,
@@ -43128,7 +43128,7 @@ function extractPublicKey(options) {
       return extractPublicKey({ payload, signature: signature.inner });
   }
 }
-function deserialize5(value) {
+function deserialize6(value) {
   const serialized = value.endsWith(magicBytes3.slice(2)) ? slice6(value, 0, -size5(magicBytes3)) : value;
   const size8 = size5(serialized);
   if (size8 === 65) {
@@ -43204,7 +43204,7 @@ function deserialize5(value) {
   }
   if (typeId === serializedKeychainType || typeId === serializedKeychainV2Type) {
     const userAddress = slice6(data, 0, 20);
-    const inner = deserialize5(slice6(data, 20));
+    const inner = deserialize6(slice6(data, 20));
     return {
       userAddress,
       inner,
@@ -43219,7 +43219,7 @@ function deserialize5(value) {
 }
 function from15(value, options) {
   if (typeof value === "string")
-    return deserialize5(value);
+    return deserialize6(value);
   if (typeof value === "object" && value !== null && "r" in value && "s" in value && "yParity" in value)
     return { signature: value, type: "secp256k1" };
   const type = getType(value);
@@ -43333,7 +43333,7 @@ function getType(envelope) {
     envelope
   });
 }
-function serialize3(envelope, options = {}) {
+function serialize5(envelope, options = {}) {
   const type = getType(envelope);
   if (type === "secp256k1") {
     const secp256k14 = envelope;
@@ -43351,7 +43351,7 @@ function serialize3(envelope, options = {}) {
   if (type === "keychain") {
     const keychain = envelope;
     const keychainTypeId = keychain.version === "v1" ? serializedKeychainType : serializedKeychainV2Type;
-    return concat5(keychainTypeId, keychain.userAddress, serialize3(keychain.inner), options.magic ? magicBytes3 : "0x");
+    return concat5(keychainTypeId, keychain.userAddress, serialize5(keychain.inner), options.magic ? magicBytes3 : "0x");
   }
   throw new CoercionError({ envelope });
 }
@@ -43611,7 +43611,7 @@ function fromTuple2(tuple) {
     } : {}
   };
   if (signatureSerialized)
-    args.signature = deserialize5(signatureSerialized);
+    args.signature = deserialize6(signatureSerialized);
   return from16(args);
 }
 function toRpc6(authorization) {
@@ -43630,7 +43630,7 @@ function toRpc6(authorization) {
 }
 function toTuple3(authorization) {
   const { address, chainId, expiry, limits } = authorization;
-  const signature = authorization.signature ? serialize3(authorization.signature) : undefined;
+  const signature = authorization.signature ? serialize5(authorization.signature) : undefined;
   const type = (() => {
     switch (authorization.type) {
       case "secp256k1":
@@ -43801,7 +43801,7 @@ function fromTuple3(tuple) {
     nonce: nonce === "0x" ? 0n : BigInt(nonce)
   };
   if (signatureSerialized)
-    args.signature = deserialize5(signatureSerialized);
+    args.signature = deserialize6(signatureSerialized);
   return from17(args);
 }
 function fromTupleList(tupleList) {
@@ -43824,7 +43824,7 @@ function toRpcList2(authorizationList) {
 }
 function toTuple4(authorization) {
   const { address, chainId, nonce } = authorization;
-  const signature = authorization.signature ? serialize3(authorization.signature) : undefined;
+  const signature = authorization.signature ? serialize5(authorization.signature) : undefined;
   return [
     chainId ? fromNumber(chainId) : "0x",
     address,
@@ -44196,13 +44196,13 @@ __export(exports_TxEnvelopeTempo, {
   validate: () => validate8,
   type: () => type,
   serializedType: () => serializedType,
-  serialize: () => serialize5,
+  serialize: () => serialize6,
   hash: () => hash5,
   getSignPayload: () => getSignPayload3,
   getFeePayerSignPayload: () => getFeePayerSignPayload,
   from: () => from18,
   feePayerMagic: () => feePayerMagic,
-  deserialize: () => deserialize6,
+  deserialize: () => deserialize7,
   assert: () => assert12,
   InvalidValidityWindowError: () => InvalidValidityWindowError,
   CallsEmptyError: () => CallsEmptyError
@@ -44234,7 +44234,7 @@ function assert12(envelope) {
       maxPriorityFeePerGas
     });
 }
-function deserialize6(serialized) {
+function deserialize7(serialized) {
   const transactionArray = toHex4(slice6(serialized, 1));
   const [chainId, maxPriorityFeePerGas, maxFeePerGas, gas, calls, accessList, nonceKey, nonce, validBefore, validAfter, feeToken, feePayerSignatureOrSender, authorizationList, keyAuthorizationOrSignature, maybeSignature] = transactionArray;
   const keyAuthorization = Array.isArray(keyAuthorizationOrSignature) ? keyAuthorizationOrSignature : undefined;
@@ -44311,7 +44311,7 @@ function deserialize6(serialized) {
   }
   if (keyAuthorization)
     transaction.keyAuthorization = fromTuple2(keyAuthorization);
-  const signatureEnvelope = signature ? deserialize5(signature) : undefined;
+  const signatureEnvelope = signature ? deserialize6(signature) : undefined;
   if (signatureEnvelope)
     transaction = {
       ...transaction,
@@ -44331,7 +44331,7 @@ function deserialize6(serialized) {
 }
 function from18(envelope, options = {}) {
   const { feePayerSignature, signature } = options;
-  const envelope_ = typeof envelope === "string" ? deserialize6(envelope) : envelope;
+  const envelope_ = typeof envelope === "string" ? deserialize7(envelope) : envelope;
   if (envelope_.from)
     envelope_.from = resolve2(envelope_.from);
   if (envelope_.calls)
@@ -44347,7 +44347,7 @@ function from18(envelope, options = {}) {
     type: "tempo"
   };
 }
-function serialize5(envelope, options = {}) {
+function serialize6(envelope, options = {}) {
   const { accessList, authorizationList, calls, chainId, feeToken, gas, keyAuthorization, nonce, nonceKey, maxFeePerGas, maxPriorityFeePerGas, validBefore, validAfter } = envelope;
   assert12(envelope);
   const accessTupleList = toTupleList2(accessList);
@@ -44398,7 +44398,7 @@ function serialize5(envelope, options = {}) {
     feePayerSignatureOrSender,
     authorizationTupleList,
     ...keyAuthorization ? [toTuple3(keyAuthorization)] : [],
-    ...signature ? [serialize3(from15(signature))] : []
+    ...signature ? [serialize5(from15(signature))] : []
   ];
   return concat5(options.format === "feePayer" ? feePayerMagic : serializedType, fromHex4(serialized));
 }
@@ -44409,7 +44409,7 @@ function getSignPayload3(envelope, options = {}) {
   return sigHash;
 }
 function hash5(envelope, options = {}) {
-  const serialized = serialize5({
+  const serialized = serialize6({
     ...envelope,
     ...options.presign ? {
       signature: undefined,
@@ -44420,7 +44420,7 @@ function hash5(envelope, options = {}) {
 }
 function getFeePayerSignPayload(envelope, options) {
   const sender = resolve2(options.sender);
-  const serialized = serialize5({ ...envelope, signature: undefined }, {
+  const serialized = serialize6({ ...envelope, signature: undefined }, {
     sender,
     format: "feePayer"
   });
@@ -44500,7 +44500,7 @@ function isTempo(transaction) {
     return false;
   }
 }
-async function serialize6(transaction, signature) {
+async function serialize7(transaction, signature) {
   if (!isTempo(transaction)) {
     if (signature && "type" in signature && signature.type !== "secp256k1")
       throw new Error("Unsupported signature type. Expected `secp256k1` but got `" + signature.type + "`.");
@@ -44761,7 +44761,7 @@ var init_chainConfig5 = __esm(() => {
       { runAt: ["beforeFillTransaction", "afterFillParameters"] }
     ],
     serializers: {
-      transaction: (transaction, signature) => serialize6(transaction, signature)
+      transaction: (transaction, signature) => serialize7(transaction, signature)
     },
     async verifyHash(client, parameters) {
       const { address, hash: hash6, signature } = parameters;
@@ -52146,7 +52146,7 @@ function isValidCode(code3) {
   }
   return false;
 }
-function serialize7(error2, { shouldIncludeStack = false } = {}) {
+function serialize8(error2, { shouldIncludeStack = false } = {}) {
   const serialized = {};
   if (error2 && typeof error2 === "object" && !Array.isArray(error2) && hasKey(error2, "code") && isValidCode(error2.code)) {
     const _error = error2;
@@ -53372,7 +53372,7 @@ var init_Communicator = __esm(() => {
 
 // node_modules/wagmi/node_modules/@wagmi/connectors/node_modules/@base-org/account/dist/core/error/serialize.js
 function serializeError(error2) {
-  const serialized = serialize7(getErrorObject(error2), {
+  const serialized = serialize8(getErrorObject(error2), {
     shouldIncludeStack: true
   });
   const docUrl = new URL("https://docs.cloud.coinbase.com/wallet-sdk/docs/errors");
@@ -61104,7 +61104,7 @@ var defaultGetStoreFunc;
 var init_dist = () => {};
 
 // node_modules/wagmi/node_modules/@wagmi/connectors/node_modules/@base-org/account/dist/kms/crypto-key/storage.js
-function createStorage2(scope, name) {
+function createStorage3(scope, name) {
   const store2 = typeof indexedDB !== "undefined" ? createStore4(scope, name) : undefined;
   return {
     getItem: async (key) => {
@@ -61209,7 +61209,7 @@ var init_crypto_key = __esm(() => {
   init__esm2();
   init__esm();
   init_storage();
-  storage = createStorage2(STORAGE_SCOPE, STORAGE_NAME);
+  storage = createStorage3(STORAGE_SCOPE, STORAGE_NAME);
 });
 
 // node_modules/wagmi/node_modules/@wagmi/connectors/node_modules/@base-org/account/dist/sign/base-account/SCWKeyManager.js
@@ -113650,10 +113650,10 @@ var require_createWalletClient = __commonJS((exports2) => {
 // node_modules/viem/_cjs/clients/transports/createTransport.js
 var require_createTransport = __commonJS((exports2) => {
   Object.defineProperty(exports2, "__esModule", { value: true });
-  exports2.createTransport = createTransport2;
+  exports2.createTransport = createTransport3;
   var buildRequest_js_1 = require_buildRequest();
   var uid_js_1 = require_uid();
-  function createTransport2({ key, methods: methods3, name, request: request2, retryCount = 3, retryDelay = 150, timeout: timeout2, type: type2 }, value2) {
+  function createTransport3({ key, methods: methods3, name, request: request2, retryCount = 3, retryDelay = 150, timeout: timeout2, type: type2 }, value2) {
     const uid4 = (0, uid_js_1.uid)();
     return {
       config: {
@@ -126347,7 +126347,7 @@ var init_unstorage_zVDD2mZo = () => {};
 function defineDriver(factory) {
   return factory;
 }
-function createStorage3(options2 = {}) {
+function createStorage4(options2 = {}) {
   const context = {
     mounts: { "": options2.driver || memory() },
     mountpoints: [""],
@@ -126730,7 +126730,7 @@ var init_dist4 = __esm(() => {
 // node_modules/@walletconnect/keyvaluestorage/dist/index.es.js
 class _4 {
   constructor() {
-    this.indexedDb = createStorage3({ driver: z4({ dbName: D4, storeName: E2 }) });
+    this.indexedDb = createStorage4({ driver: z4({ dbName: D4, storeName: E2 }) });
   }
   async getKeys() {
     return this.indexedDb.getKeys();
@@ -248398,7 +248398,13 @@ var conf = {
   CARD_DIMENSIONS: { width: 250, height: 400 },
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
-  CONNECTOR_ITEM_OFFSET: 20
+  CONNECTOR_ITEM_OFFSET: 20,
+  GRAVITY_G: 80,
+  GRAVITY_G_CENTER: 120,
+  GRAVITY_DAMPING: 0.96,
+  GRAVITY_RESTITUTION: 0.5,
+  GRAVITY_REPULSION: 200,
+  GRAVITY_MAX_DISTANCE: 3000
 };
 initDefaultI18N();
 var BG_LIGHT = "rgb(248, 249, 251)";
@@ -265528,6 +265534,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id2 = "", transformation = new Transformation(id2, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id2);
@@ -265650,10 +265658,10 @@ class RichText extends BaseItem {
     const shouldUpdateLayout = this.getTextWidth() > (maxWidth || 0);
     if (shouldUpdateLayout) {
       this.updateElement();
-      this.subject.publish(this);
     } else {
       this.transformCanvas();
       this.recoordinate(maxWidth);
+      this.subject.publish(this);
     }
   }
   handleFocus = () => {
@@ -265717,10 +265725,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -265821,13 +265829,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -266186,10 +266198,20 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
@@ -266321,10 +266343,18 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     const elements = this.editor.editor.children.map(renderNode);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    const transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -282909,7 +282939,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -283458,6 +283490,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {
@@ -283844,11 +283878,11 @@ function convertBlobToDataUrl(blob) {
     };
   });
 }
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -283893,7 +283927,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -283909,6 +283943,8 @@ class DefaultFrameData {
   }
 }
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -283924,7 +283960,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -283945,12 +283981,23 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
-    this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontColor: FRAME_TITLE_COLOR });
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
+    this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
+    this.text.customTransformationMatrix = () => {
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(6, 1.2 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();
@@ -283975,9 +284022,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -284120,6 +284175,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -284135,15 +284191,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);
@@ -297058,13 +297112,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.92;
-  REPULSION = 800;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -297133,8 +297182,8 @@ class GravityEngine {
       const dcx = centerX - s1.cx;
       const dcy = centerY - s1.cy;
       const distCenter = Math.sqrt(dcx * dcx + dcy * dcy) + 1;
-      ax += this.G_CENTER * dcx / distCenter;
-      ay += this.G_CENTER * dcy / distCenter;
+      ax += conf.GRAVITY_G_CENTER * dcx / distCenter;
+      ay += conf.GRAVITY_G_CENTER * dcy / distCenter;
       for (let j = 0;j < snap.length; j++) {
         if (i === j)
           continue;
@@ -297142,7 +297191,7 @@ class GravityEngine {
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
         const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-        if (dist > this.MAX_DISTANCE)
+        if (dist > conf.GRAVITY_MAX_DISTANCE)
           continue;
         const overlapping = s1.right > s2.left && s2.right > s1.left && s1.bottom > s2.top && s2.bottom > s1.top;
         if (overlapping) {
@@ -297150,20 +297199,27 @@ class GravityEngine {
           const overlapY = Math.min(s1.bottom, s2.bottom) - Math.max(s1.top, s2.top);
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
-            ax += sign * this.REPULSION * overlapX;
+            if (sign * vel.vx < 0)
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
-            ay += sign * this.REPULSION * overlapY;
+            if (sign * vel.vy < 0)
+              vel.vy = -vel.vy * conf.GRAVITY_RESTITUTION;
+            ay += sign * conf.GRAVITY_REPULSION * overlapY;
           }
         } else {
+          const touchDist = (s1.w + s2.w + s1.h + s2.h) * 0.25;
+          if (dist < touchDist + 5)
+            continue;
           const distSq = dx * dx + dy * dy;
-          const gravAcc = this.G * s2.mass / (distSq + this.SOFTENING_SQ);
+          const gravAcc = conf.GRAVITY_G * s2.mass / (distSq + this.SOFTENING_SQ);
           ax += gravAcc * dx / dist;
           ay += gravAcc * dy / dist;
         }
       }
-      vel.vx = (vel.vx + ax * dt) * this.DAMPING;
-      vel.vy = (vel.vy + ay * dt) * this.DAMPING;
+      vel.vx = (vel.vx + ax * dt) * conf.GRAVITY_DAMPING;
+      vel.vy = (vel.vy + ay * dt) * conf.GRAVITY_DAMPING;
       const moveX = vel.vx * dt;
       const moveY = vel.vy * dt;
       if (Math.abs(moveX) >= this.MIN_MOVE_PX || Math.abs(moveY) >= this.MIN_MOVE_PX) {
@@ -423235,7 +423291,7 @@ function comment$1(value2, root4, parent3) {
 function declaration(value2, root4, parent3, length22) {
   return node4(value2, root4, parent3, DECLARATION, substr(value2, 0, length22), substr(value2, length22 + 1, -1), length22);
 }
-function serialize8(children, callback) {
+function serialize9(children, callback) {
   var output2 = "";
   var length22 = sizeof(children);
   for (var i22 = 0;i22 < length22; i22++)
@@ -423253,11 +423309,11 @@ function stringify14(element5, index4, children, callback) {
     case COMMENT2:
       return "";
     case KEYFRAMES:
-      return element5.return = element5.value + "{" + serialize8(element5.children, callback) + "}";
+      return element5.return = element5.value + "{" + serialize9(element5.children, callback) + "}";
     case RULESET:
       element5.value = element5.props.join(",");
   }
-  return strlen(children = serialize8(element5.children, callback)) ? element5.return = element5.value + "{" + children + "}" : "";
+  return strlen(children = serialize9(element5.children, callback)) ? element5.return = element5.value + "{" + children + "}" : "";
 }
 function middleware(collection) {
   var length22 = sizeof(collection);
@@ -423480,7 +423536,7 @@ var prefixer = function prefixer2(element5, index4, children, callback) {
           element5["return"] = prefix2(element5.value, element5.length);
           break;
         case KEYFRAMES:
-          return serialize8([copy7(element5, {
+          return serialize9([copy7(element5, {
             value: replace(element5.value, "@", "@" + WEBKIT)
           })], callback);
         case RULESET:
@@ -423489,11 +423545,11 @@ var prefixer = function prefixer2(element5, index4, children, callback) {
               switch (match(value2, /(::plac\w+|:read-\w+)/)) {
                 case ":read-only":
                 case ":read-write":
-                  return serialize8([copy7(element5, {
+                  return serialize9([copy7(element5, {
                     props: [replace(value2, /:(read-\w+)/, ":" + MOZ + "$1")]
                   })], callback);
                 case "::placeholder":
-                  return serialize8([copy7(element5, {
+                  return serialize9([copy7(element5, {
                     props: [replace(value2, /:(plac\w+)/, ":" + WEBKIT + "input-$1")]
                   }), copy7(element5, {
                     props: [replace(value2, /:(plac\w+)/, ":" + MOZ + "$1")]
@@ -423543,7 +423599,7 @@ var createCache = function createCache2(options2) {
     })];
     var serializer2 = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins));
     var stylis = function stylis2(styles2) {
-      return serialize8(compile(styles2), serializer2);
+      return serialize9(compile(styles2), serializer2);
     };
     _insert = function insert2(selector, serialized, sheet, shouldCache) {
       currentSheet = sheet;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-ui-temp",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "module",
@@ -79,7 +79,7 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "microboard-temp": "0.12.9",
+    "microboard-temp": "0.13.12",
     "nanoid": "^5.1.5",
     "prop-types": "^15.8.1",
     "react-hot-toast": "2.4.1",