From c7e73219959c9d29c6c8f6eff34cb1edc43026d0 Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Fri, 22 May 2026 05:26:26 +1200
Subject: [PATCH 01/12] feat: added object property viewer

---
 .../CanvasSideBar/ComponentProperties.jsx     |  3 +-
 .../CanvasSideBar/ObjectPropertyEditor.jsx    | 59 +++++++++++++++++++
 2 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx

diff --git a/frontend/src/features/authoring/CanvasSideBar/ComponentProperties.jsx b/frontend/src/features/authoring/CanvasSideBar/ComponentProperties.jsx
index 517a4caba..c6218ae5e 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ComponentProperties.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ComponentProperties.jsx
@@ -1,5 +1,5 @@
 import SceneContext from "context/SceneContext";
-
+import { ObjectPropertyEditor } from "./ObjectPropertyEditor";
 import { useContext, useEffect, useState } from "react";
 import { modifyComponentProp } from "../scene/operations/component";
 import StateOperationMenu from "../../../components/StateVariables/StateOperationMenu";
@@ -44,6 +44,7 @@ export default function ComponentProperties({ component }) {
         </div>
       </div>
       <StateOperationMenu component={component} />
+      <ObjectPropertyEditor component={component} />
     </>
   );
 }
diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
new file mode 100644
index 000000000..676f27e02
--- /dev/null
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -0,0 +1,59 @@
+export function ObjectPropertyEditor({ component }) {
+  // const [x, y] = component.bounds.verts[0];
+  // const [width, height] = component.bounds.verts[1];
+  // console.log(x, y, width, height);
+  console.log(component.bounds.verts)
+
+  function saveProp(v, type) {
+  }
+
+  
+
+  return (
+    <div className="collapse overflow-visible collapse-arrow bg-base-300 rounded-sm text-s">
+      <input type="checkbox" />
+      <div className="collapse-title">Object Properties</div>
+      <div className="collapse-content text--1 bg-base-200">
+        <fieldset className="fieldset pt-2">
+          <span className=" flex gap-17">
+            <label className="label">Object Width</label>
+            <label className="label">Object Height</label>
+          </span>
+          <div className="flex gap-15">
+            <input
+              type="number"
+              className="input max-w-20"
+              value={(component?.bounds.verts[1].x - component?.bounds.verts[0].x).toFixed(2)}
+              // onChange={(e) => saveProp()}
+            />
+            <input
+              type="number"
+              className="input max-w-20"
+              value={(component?.bounds.verts[1].y - component?.bounds.verts[0].y).toFixed(2)}
+              // onChange={(e) => saveProp()}
+            />
+          </div>
+
+          <span className=" flex gap-22">
+            <label className="label">Position X</label>
+            <label className="label">Position Y</label>
+          </span>
+          <div className="flex gap-15">
+            <input
+              type="number"
+              className="input max-w-20"
+              value={Math.round(component?.bounds.verts[0].x * 100) / 100}
+              // onChange={(e) => saveProp()}
+            />
+            <input
+              type="number"
+              className="input max-w-20"
+              value={Math.round(component?.bounds.verts[0].y * 100) / 100}
+              // onChange={(e) => saveProp()}
+            />
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  );
+}

From 4f08576d016f9b7e82d770979cc9673e9d9d7563 Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Sun, 24 May 2026 18:10:34 +1200
Subject: [PATCH 02/12] quickie

---
 frontend/package.json                                |  2 +-
 .../authoring/CanvasSideBar/ObjectPropertyEditor.jsx | 12 ++++++++----
 .../features/authoring/handlers/pointer/resize.ts    |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 4ff48ed1e..8bf89623f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -80,5 +80,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5001"
+  "proxy": "http://localhost:5002"
 }
diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index 676f27e02..48175893f 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -1,3 +1,5 @@
+import { modifyVerts } from "../../authoring/handlers/pointer/resize";
+
 export function ObjectPropertyEditor({ component }) {
   // const [x, y] = component.bounds.verts[0];
   // const [width, height] = component.bounds.verts[1];
@@ -5,6 +7,8 @@ export function ObjectPropertyEditor({ component }) {
   console.log(component.bounds.verts)
 
   function saveProp(v, type) {
+    console.log(v, type)
+    modifyVerts()
   }
 
   
@@ -24,13 +28,13 @@ export function ObjectPropertyEditor({ component }) {
               type="number"
               className="input max-w-20"
               value={(component?.bounds.verts[1].x - component?.bounds.verts[0].x).toFixed(2)}
-              // onChange={(e) => saveProp()}
+              onChange={(e) => saveProp(e.target.value, 'width')}
             />
             <input
               type="number"
               className="input max-w-20"
               value={(component?.bounds.verts[1].y - component?.bounds.verts[0].y).toFixed(2)}
-              // onChange={(e) => saveProp()}
+              onChange={(e) => saveProp(e.target.value, 'height')}
             />
           </div>
 
@@ -43,13 +47,13 @@ export function ObjectPropertyEditor({ component }) {
               type="number"
               className="input max-w-20"
               value={Math.round(component?.bounds.verts[0].x * 100) / 100}
-              // onChange={(e) => saveProp()}
+              onChange={(e) => saveProp(e.target.value, 'x')}
             />
             <input
               type="number"
               className="input max-w-20"
               value={Math.round(component?.bounds.verts[0].y * 100) / 100}
-              // onChange={(e) => saveProp()}
+              onChange={(e) => saveProp(e.target.value, 'y')}
             />
           </div>
         </fieldset>
diff --git a/frontend/src/features/authoring/handlers/pointer/resize.ts b/frontend/src/features/authoring/handlers/pointer/resize.ts
index bee4efcef..2273a8728 100644
--- a/frontend/src/features/authoring/handlers/pointer/resize.ts
+++ b/frontend/src/features/authoring/handlers/pointer/resize.ts
@@ -155,7 +155,7 @@ function mirror(verts: Vec2[], center: Vec2, coords: number[]) {
   return modifyVerts(verts, inverse(coords), inversePosition);
 }
 
-function modifyVerts(verts: Vec2[], coords: number[], v: Vec2) {
+export function modifyVerts(verts: Vec2[], coords: number[], v: Vec2) {
   const newVerts = verts.map((v) => ({ ...v }));
   if (coords[1] !== 0.5) newVerts[coords[1]].y = v.y;
   if (coords[0] !== 0.5) newVerts[coords[0]].x = v.x;

From a135e1e907704dc7b3901c534621508a9861a184 Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Mon, 25 May 2026 19:17:19 +1200
Subject: [PATCH 03/12] quickie

---
 .../CanvasSideBar/ObjectPropertyEditor.jsx    | 57 +++++++++++++------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index 48175893f..b856cff2f 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -1,18 +1,35 @@
-import { modifyVerts } from "../../authoring/handlers/pointer/resize";
+import { translate } from "../../authoring/util";
+// import { modifyVerts } from "../../authoring/handlers/pointer/resize";
+import { useState, useEffect } from "react";
+import { modifyComponentProp } from "../scene/operations/component";
 
 export function ObjectPropertyEditor({ component }) {
-  // const [x, y] = component.bounds.verts[0];
-  // const [width, height] = component.bounds.verts[1];
-  // console.log(x, y, width, height);
-  console.log(component.bounds.verts)
+  const [inputX, setInputX] = useState(
+    Math.round(component.bounds.verts[0].x * 100) / 100
+  );
+  const [inputY, setInputY] = useState(
+    Math.round(component.bounds.verts[0].y * 100) / 100
+  );
+  const [focused, setFocused] = useState(false);
+
+  useEffect(() => {
+    if (!focused) {
+      setInputX(Math.round(component.bounds.verts[0].x * 100) / 100);
+      setInputY(Math.round(component.bounds.verts[0].y * 100) / 100);
+    }
+  }, [component.bounds.verts]);
 
   function saveProp(v, type) {
-    console.log(v, type)
-    modifyVerts()
+    console.log(v, type);
+    if (type === "x") {
+      const verts = component.bounds.verts;
+      const diff = v - verts[0].x;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        translate(prev, { x: diff, y: 0 })
+      );
+    }
   }
 
-  
-
   return (
     <div className="collapse overflow-visible collapse-arrow bg-base-300 rounded-sm text-s">
       <input type="checkbox" />
@@ -27,14 +44,18 @@ export function ObjectPropertyEditor({ component }) {
             <input
               type="number"
               className="input max-w-20"
-              value={(component?.bounds.verts[1].x - component?.bounds.verts[0].x).toFixed(2)}
-              onChange={(e) => saveProp(e.target.value, 'width')}
+              value={(
+                component?.bounds.verts[1].x - component?.bounds.verts[0].x
+              ).toFixed(2)}
+              onChange={(e) => saveProp(e.target.value, "width")}
             />
             <input
               type="number"
               className="input max-w-20"
-              value={(component?.bounds.verts[1].y - component?.bounds.verts[0].y).toFixed(2)}
-              onChange={(e) => saveProp(e.target.value, 'height')}
+              value={(
+                component?.bounds.verts[1].y - component?.bounds.verts[0].y
+              ).toFixed(2)}
+              onChange={(e) => saveProp(e.target.value, "height")}
             />
           </div>
 
@@ -46,14 +67,18 @@ export function ObjectPropertyEditor({ component }) {
             <input
               type="number"
               className="input max-w-20"
-              value={Math.round(component?.bounds.verts[0].x * 100) / 100}
-              onChange={(e) => saveProp(e.target.value, 'x')}
+              value={inputX}
+              onChange={(e) => setInputX(e.target.value)}
+              onFocus={() => setFocused(true)}
+              onBlur={(e) => {
+                setFocused(false), saveProp(e.target.value, "x");
+              }}
             />
             <input
               type="number"
               className="input max-w-20"
               value={Math.round(component?.bounds.verts[0].y * 100) / 100}
-              onChange={(e) => saveProp(e.target.value, 'y')}
+              onChange={(e) => saveProp(e.target.value, "y")}
             />
           </div>
         </fieldset>

From e57c5709f34e8169c483defa1dfc594ebc64f0cf Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Wed, 27 May 2026 01:05:38 +1200
Subject: [PATCH 04/12] IM THE GOAT

---
 .../CanvasSideBar/ObjectPropertyEditor.jsx        | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index b856cff2f..6d5a54922 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -10,14 +10,6 @@ export function ObjectPropertyEditor({ component }) {
   const [inputY, setInputY] = useState(
     Math.round(component.bounds.verts[0].y * 100) / 100
   );
-  const [focused, setFocused] = useState(false);
-
-  useEffect(() => {
-    if (!focused) {
-      setInputX(Math.round(component.bounds.verts[0].x * 100) / 100);
-      setInputY(Math.round(component.bounds.verts[0].y * 100) / 100);
-    }
-  }, [component.bounds.verts]);
 
   function saveProp(v, type) {
     console.log(v, type);
@@ -68,10 +60,9 @@ export function ObjectPropertyEditor({ component }) {
               type="number"
               className="input max-w-20"
               value={inputX}
-              onChange={(e) => setInputX(e.target.value)}
-              onFocus={() => setFocused(true)}
-              onBlur={(e) => {
-                setFocused(false), saveProp(e.target.value, "x");
+              onChange={(e) => {
+                setInputX(e.target.value),
+                  setTimeout(() => saveProp(e.target.value, "x"), 120);
               }}
             />
             <input

From 163d94ddbc452112c5ce05cb197eebfe673ec64d Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Wed, 27 May 2026 01:08:30 +1200
Subject: [PATCH 05/12] feat: added x and y manual changes for objects

---
 .../CanvasSideBar/ObjectPropertyEditor.jsx       | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index 6d5a54922..703c26a8b 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -1,6 +1,6 @@
 import { translate } from "../../authoring/util";
 // import { modifyVerts } from "../../authoring/handlers/pointer/resize";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { modifyComponentProp } from "../scene/operations/component";
 
 export function ObjectPropertyEditor({ component }) {
@@ -12,13 +12,18 @@ export function ObjectPropertyEditor({ component }) {
   );
 
   function saveProp(v, type) {
-    console.log(v, type);
     if (type === "x") {
       const verts = component.bounds.verts;
       const diff = v - verts[0].x;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         translate(prev, { x: diff, y: 0 })
       );
+    } else if (type === "y") {
+      const verts = component.bounds.verts;
+      const diff = v - verts[0].y;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        translate(prev, { x: 0, y: diff })
+      );
     }
   }
 
@@ -68,8 +73,11 @@ export function ObjectPropertyEditor({ component }) {
             <input
               type="number"
               className="input max-w-20"
-              value={Math.round(component?.bounds.verts[0].y * 100) / 100}
-              onChange={(e) => saveProp(e.target.value, "y")}
+              value={inputY}
+              onChange={(e) => {
+                setInputY(e.target.value),
+                  setTimeout(() => saveProp(e.target.value, "y"), 120);
+              }}
             />
           </div>
         </fieldset>

From a686b9ce4c263842b7169b1ad99755299cabc523 Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Wed, 27 May 2026 01:25:07 +1200
Subject: [PATCH 06/12] chore: comments

---
 .../CanvasSideBar/ObjectPropertyEditor.jsx      | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index 703c26a8b..dd5ae7875 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -1,9 +1,10 @@
 import { translate } from "../../authoring/util";
-// import { modifyVerts } from "../../authoring/handlers/pointer/resize";
 import { useState } from "react";
 import { modifyComponentProp } from "../scene/operations/component";
 
 export function ObjectPropertyEditor({ component }) {
+
+  // x and y vals used for setting and current
   const [inputX, setInputX] = useState(
     Math.round(component.bounds.verts[0].x * 100) / 100
   );
@@ -11,6 +12,8 @@ export function ObjectPropertyEditor({ component }) {
     Math.round(component.bounds.verts[0].y * 100) / 100
   );
 
+  //this could prolly be improved
+  // uses the same function as the drag box feat w modifyComponentProp
   function saveProp(v, type) {
     if (type === "x") {
       const verts = component.bounds.verts;
@@ -37,10 +40,10 @@ export function ObjectPropertyEditor({ component }) {
             <label className="label">Object Width</label>
             <label className="label">Object Height</label>
           </span>
-          <div className="flex gap-15">
+          <div className="flex gap-13">
             <input
               type="number"
-              className="input max-w-20"
+              className="input max-w-21"
               value={(
                 component?.bounds.verts[1].x - component?.bounds.verts[0].x
               ).toFixed(2)}
@@ -48,7 +51,7 @@ export function ObjectPropertyEditor({ component }) {
             />
             <input
               type="number"
-              className="input max-w-20"
+              className="input max-w-21"
               value={(
                 component?.bounds.verts[1].y - component?.bounds.verts[0].y
               ).toFixed(2)}
@@ -60,10 +63,10 @@ export function ObjectPropertyEditor({ component }) {
             <label className="label">Position X</label>
             <label className="label">Position Y</label>
           </span>
-          <div className="flex gap-15">
+          <div className="flex gap-13">
             <input
               type="number"
-              className="input max-w-20"
+              className="input max-w-21"
               value={inputX}
               onChange={(e) => {
                 setInputX(e.target.value),
@@ -72,7 +75,7 @@ export function ObjectPropertyEditor({ component }) {
             />
             <input
               type="number"
-              className="input max-w-20"
+              className="input max-w-21"
               value={inputY}
               onChange={(e) => {
                 setInputY(e.target.value),

From d58acf05e45a1c098aa30dd7fcc60a6e7480d016 Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Fri, 29 May 2026 20:09:23 +1200
Subject: [PATCH 07/12] quick

---
 .../CanvasSideBar/ObjectPropertyEditor.jsx    | 80 +++++++++++++++----
 1 file changed, 65 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index dd5ae7875..e1025e351 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -1,9 +1,9 @@
 import { translate } from "../../authoring/util";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { modifyVerts } from "../handlers/pointer/resize";
 import { modifyComponentProp } from "../scene/operations/component";
 
 export function ObjectPropertyEditor({ component }) {
-
   // x and y vals used for setting and current
   const [inputX, setInputX] = useState(
     Math.round(component.bounds.verts[0].x * 100) / 100
@@ -11,22 +11,72 @@ export function ObjectPropertyEditor({ component }) {
   const [inputY, setInputY] = useState(
     Math.round(component.bounds.verts[0].y * 100) / 100
   );
+  const [inputWidth, setInputWidth] = useState(
+    Math.round(
+      (component.bounds.verts[1].x - component.bounds.verts[0].x) * 100
+    ) / 100
+  );
+  const [inputHeight, setInputHeight] = useState(
+    Math.round(
+      (component.bounds.verts[1].y - component.bounds.verts[0].y) * 100
+    ) / 100
+  );
+
+  useEffect(() => {
+    const width = Math.round(
+      Math.abs(component.bounds.verts[1].x - component.bounds.verts[0].x) * 100
+    ) / 100;
+    const height = Math.round(
+      Math.abs(component.bounds.verts[1].y - component.bounds.verts[0].y) * 100
+    ) / 100;
+    const x = Math.round(component.bounds.verts[0].x * 100) / 100;
+    const y = Math.round(component.bounds.verts[0].y * 100) / 100;
+
+    setInputWidth(width);
+    setInputHeight(height);
+    setInputX(x);
+    setInputY(y);
+  }, [component.bounds.verts]);
 
   //this could prolly be improved
   // uses the same function as the drag box feat w modifyComponentProp
   function saveProp(v, type) {
+    const value = Number(v);
+    if (Number.isNaN(value)) return;
+
     if (type === "x") {
       const verts = component.bounds.verts;
-      const diff = v - verts[0].x;
+      const diff = value - verts[0].x;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         translate(prev, { x: diff, y: 0 })
       );
     } else if (type === "y") {
       const verts = component.bounds.verts;
-      const diff = v - verts[0].y;
+      const diff = value - verts[0].y;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         translate(prev, { x: 0, y: diff })
       );
+
+      // idea is that because x and y are 2 diagonal corners
+      // increase bottom y to expand height and
+    } else if (type === "width") {
+      if (value < 0) return;
+      setInputWidth(value);
+      const verts = component.bounds.verts;
+      const xSign = Math.sign(verts[1].x - verts[0].x) || 1;
+      const x = verts[0].x + xSign * value;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        modifyVerts(prev, [1, 0.5], { x, y: 0 })
+      );
+    } else if (type === "height") {
+      if (value < 0) return;
+      setInputHeight(value);
+      const verts = component.bounds.verts;
+      const ySign = Math.sign(verts[1].y - verts[0].y) || 1;
+      const y = verts[0].y + ySign * value;
+      modifyComponentProp(component.id, "bounds.verts", (prev) =>
+        modifyVerts(prev, [0.5, 1], { x: 0, y })
+      );
     }
   }
 
@@ -36,6 +86,7 @@ export function ObjectPropertyEditor({ component }) {
       <div className="collapse-title">Object Properties</div>
       <div className="collapse-content text--1 bg-base-200">
         <fieldset className="fieldset pt-2">
+          {/* Width and Height num inputs*/}
           <span className=" flex gap-17">
             <label className="label">Object Width</label>
             <label className="label">Object Height</label>
@@ -44,21 +95,20 @@ export function ObjectPropertyEditor({ component }) {
             <input
               type="number"
               className="input max-w-21"
-              value={(
-                component?.bounds.verts[1].x - component?.bounds.verts[0].x
-              ).toFixed(2)}
+              value={inputWidth}
               onChange={(e) => saveProp(e.target.value, "width")}
             />
             <input
               type="number"
               className="input max-w-21"
-              value={(
-                component?.bounds.verts[1].y - component?.bounds.verts[0].y
-              ).toFixed(2)}
-              onChange={(e) => saveProp(e.target.value, "height")}
+              value={inputHeight}
+              onChange={(e) => {
+                saveProp(e.target.value, "height");
+              }}
             />
           </div>
 
+          {/* positoin x and y num inputs*/}
           <span className=" flex gap-22">
             <label className="label">Position X</label>
             <label className="label">Position Y</label>
@@ -69,8 +119,8 @@ export function ObjectPropertyEditor({ component }) {
               className="input max-w-21"
               value={inputX}
               onChange={(e) => {
-                setInputX(e.target.value),
-                  setTimeout(() => saveProp(e.target.value, "x"), 120);
+                setInputX(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "x"), 120);
               }}
             />
             <input
@@ -78,8 +128,8 @@ export function ObjectPropertyEditor({ component }) {
               className="input max-w-21"
               value={inputY}
               onChange={(e) => {
-                setInputY(e.target.value),
-                  setTimeout(() => saveProp(e.target.value, "y"), 120);
+                setInputY(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "y"), 120);
               }}
             />
           </div>

From f1c7c934eaac1e0ab3a00d3bdc4fa4541e90f94e Mon Sep 17 00:00:00 2001
From: Jauhar <jauhargoga@gmail.com>
Date: Fri, 29 May 2026 20:25:07 +1200
Subject: [PATCH 08/12] what

---
 .../features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index e1025e351..902e31241 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -42,7 +42,6 @@ export function ObjectPropertyEditor({ component }) {
   // uses the same function as the drag box feat w modifyComponentProp
   function saveProp(v, type) {
     const value = Number(v);
-    if (Number.isNaN(value)) return;
 
     if (type === "x") {
       const verts = component.bounds.verts;
@@ -65,6 +64,7 @@ export function ObjectPropertyEditor({ component }) {
       const verts = component.bounds.verts;
       const xSign = Math.sign(verts[1].x - verts[0].x) || 1;
       const x = verts[0].x + xSign * value;
+      console.log(x);
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         modifyVerts(prev, [1, 0.5], { x, y: 0 })
       );

From 26448fb4d5b2403f3f2a975f6b3bb9687b6a1c77 Mon Sep 17 00:00:00 2001
From: Jauhar <jauhargoga@gmail.com>
Date: Sat, 30 May 2026 16:07:30 +1200
Subject: [PATCH 09/12] refactor: simplify logic

---
 .../authoring/CanvasSideBar/CanvasSideBar.jsx  |  2 +-
 .../CanvasSideBar/ObjectPropertyEditor.jsx     | 18 ++++--------------
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx b/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
index cf007ef8a..dd6dc4474 100644
--- a/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
@@ -12,7 +12,7 @@ export default function CanvasSideBar() {
   const selected = useEditorStore((state) => state.selected);
 
   const component = selected ? getComponent(selected) : null;
-
+ 
   return (
     <div className="flex pb-m flex-col w-[18vw] gap-s overflow-y-auto no-scrollbar">
       <SceneSettings />
diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index 902e31241..bb7a0a0bf 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -42,38 +42,28 @@ export function ObjectPropertyEditor({ component }) {
   // uses the same function as the drag box feat w modifyComponentProp
   function saveProp(v, type) {
     const value = Number(v);
-
+    const verts = component.bounds.verts;
     if (type === "x") {
-      const verts = component.bounds.verts;
       const diff = value - verts[0].x;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         translate(prev, { x: diff, y: 0 })
       );
     } else if (type === "y") {
-      const verts = component.bounds.verts;
       const diff = value - verts[0].y;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         translate(prev, { x: 0, y: diff })
       );
 
-      // idea is that because x and y are 2 diagonal corners
-      // increase bottom y to expand height and
+      // increase bottom y to expand height and same idea with x
     } else if (type === "width") {
-      if (value < 0) return;
       setInputWidth(value);
-      const verts = component.bounds.verts;
-      const xSign = Math.sign(verts[1].x - verts[0].x) || 1;
-      const x = verts[0].x + xSign * value;
-      console.log(x);
+      const x = verts[0].x + value;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         modifyVerts(prev, [1, 0.5], { x, y: 0 })
       );
     } else if (type === "height") {
-      if (value < 0) return;
       setInputHeight(value);
-      const verts = component.bounds.verts;
-      const ySign = Math.sign(verts[1].y - verts[0].y) || 1;
-      const y = verts[0].y + ySign * value;
+      const y = verts[0].y + value;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         modifyVerts(prev, [0.5, 1], { x: 0, y })
       );

From 84306c185263b12a8acec839bbad5dd58c8671e2 Mon Sep 17 00:00:00 2001
From: Jauhar <jauhargoga@gmail.com>
Date: Sat, 30 May 2026 16:45:19 +1200
Subject: [PATCH 10/12] fix : update val if shape is dragged etc/updated
 outside func + introduce rejection for non num

---
 .../authoring/CanvasSideBar/CanvasSideBar.jsx |  5 ++--
 .../CanvasSideBar/ObjectPropertyEditor.jsx    | 30 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx b/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
index dd6dc4474..4c3e2faf6 100644
--- a/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
@@ -3,6 +3,7 @@ import useEditorStore from "../stores/editor";
 import AudioManager from "./AudioManager";
 import ComponentProperties from "./ComponentProperties";
 import SceneSettings from "./SceneSettings";
+import useVisualScene from "../stores/visual";
 
 /**
  * This component displays the properties of scene components in a sidebar
@@ -10,9 +11,7 @@ import SceneSettings from "./SceneSettings";
  */
 export default function CanvasSideBar() {
   const selected = useEditorStore((state) => state.selected);
-
-  const component = selected ? getComponent(selected) : null;
- 
+  const component = useVisualScene((state) => selected ? state.components[selected] : null);
   return (
     <div className="flex pb-m flex-col w-[18vw] gap-s overflow-y-auto no-scrollbar">
       <SceneSettings />
diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index bb7a0a0bf..5132132ae 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -23,12 +23,16 @@ export function ObjectPropertyEditor({ component }) {
   );
 
   useEffect(() => {
-    const width = Math.round(
-      Math.abs(component.bounds.verts[1].x - component.bounds.verts[0].x) * 100
-    ) / 100;
-    const height = Math.round(
-      Math.abs(component.bounds.verts[1].y - component.bounds.verts[0].y) * 100
-    ) / 100;
+    const width =
+      Math.round(
+        Math.abs(component.bounds.verts[1].x - component.bounds.verts[0].x) *
+          100
+      ) / 100;
+    const height =
+      Math.round(
+        Math.abs(component.bounds.verts[1].y - component.bounds.verts[0].y) *
+          100
+      ) / 100;
     const x = Math.round(component.bounds.verts[0].x * 100) / 100;
     const y = Math.round(component.bounds.verts[0].y * 100) / 100;
 
@@ -41,7 +45,8 @@ export function ObjectPropertyEditor({ component }) {
   //this could prolly be improved
   // uses the same function as the drag box feat w modifyComponentProp
   function saveProp(v, type) {
-    const value = Number(v);
+    const value = parseFloat(String(v).trim());
+    if (isNaN(value)) return;
     const verts = component.bounds.verts;
     if (type === "x") {
       const diff = value - verts[0].x;
@@ -53,16 +58,13 @@ export function ObjectPropertyEditor({ component }) {
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         translate(prev, { x: 0, y: diff })
       );
-
       // increase bottom y to expand height and same idea with x
     } else if (type === "width") {
-      setInputWidth(value);
       const x = verts[0].x + value;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         modifyVerts(prev, [1, 0.5], { x, y: 0 })
       );
     } else if (type === "height") {
-      setInputHeight(value);
       const y = verts[0].y + value;
       modifyComponentProp(component.id, "bounds.verts", (prev) =>
         modifyVerts(prev, [0.5, 1], { x: 0, y })
@@ -86,14 +88,18 @@ export function ObjectPropertyEditor({ component }) {
               type="number"
               className="input max-w-21"
               value={inputWidth}
-              onChange={(e) => saveProp(e.target.value, "width")}
+              onChange={(e) => {
+                setInputWidth(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "width"), 120);
+              }}
             />
             <input
               type="number"
               className="input max-w-21"
               value={inputHeight}
               onChange={(e) => {
-                saveProp(e.target.value, "height");
+                setInputHeight(e.target.value);
+                setTimeout(() => saveProp(e.target.value, "height"), 120);
               }}
             />
           </div>

From bae9f26343518441ef72e99c06ad3f5c70bfc3b9 Mon Sep 17 00:00:00 2001
From: Jauhar <jauhargoga@gmail.com>
Date: Sat, 30 May 2026 17:23:34 +1200
Subject: [PATCH 11/12] fix: added error for incrrect input

---
 .../features/authoring/CanvasSideBar/CanvasSideBar.jsx   | 5 +++--
 .../authoring/CanvasSideBar/ObjectPropertyEditor.jsx     | 9 ++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx b/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
index 4c3e2faf6..2e57ed6a9 100644
--- a/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/CanvasSideBar.jsx
@@ -1,4 +1,3 @@
-import { getComponent } from "../scene/scene";
 import useEditorStore from "../stores/editor";
 import AudioManager from "./AudioManager";
 import ComponentProperties from "./ComponentProperties";
@@ -11,7 +10,9 @@ import useVisualScene from "../stores/visual";
  */
 export default function CanvasSideBar() {
   const selected = useEditorStore((state) => state.selected);
-  const component = useVisualScene((state) => selected ? state.components[selected] : null);
+  const component = useVisualScene((state) =>
+    selected ? state.components[selected] : null
+  );
   return (
     <div className="flex pb-m flex-col w-[18vw] gap-s overflow-y-auto no-scrollbar">
       <SceneSettings />
diff --git a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
index 5132132ae..201b4de00 100644
--- a/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
+++ b/frontend/src/features/authoring/CanvasSideBar/ObjectPropertyEditor.jsx
@@ -21,6 +21,7 @@ export function ObjectPropertyEditor({ component }) {
       (component.bounds.verts[1].y - component.bounds.verts[0].y) * 100
     ) / 100
   );
+  const [error, setError] = useState(null);
 
   useEffect(() => {
     const width =
@@ -46,7 +47,12 @@ export function ObjectPropertyEditor({ component }) {
   // uses the same function as the drag box feat w modifyComponentProp
   function saveProp(v, type) {
     const value = parseFloat(String(v).trim());
-    if (isNaN(value)) return;
+    if (isNaN(value)) {
+      const message = `error: non-numeric value entered in ${type} input`;
+      setError(message);
+      return;
+    }
+    setError(null);
     const verts = component.bounds.verts;
     if (type === "x") {
       const diff = value - verts[0].x;
@@ -129,6 +135,7 @@ export function ObjectPropertyEditor({ component }) {
               }}
             />
           </div>
+          {error && <p className="text-red-500">{error}</p>}
         </fieldset>
       </div>
     </div>

From d20d89955ba1e2dee5051f0899738d53b5738bd5 Mon Sep 17 00:00:00 2001
From: Jauhar Goga <jauhargoga@gmail.com>
Date: Sun, 31 May 2026 17:59:54 +1200
Subject: [PATCH 12/12] Update frontend/package.json

Co-authored-by: Leo Wang <git@leowla.com>
---
 frontend/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 8bf89623f..4ff48ed1e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -80,5 +80,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5002"
+  "proxy": "http://localhost:5001"
 }