From eab77f71efcf65a43e0112b7b2e975a2f1273f96 Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Fri, 3 Apr 2026 02:15:38 +0200
Subject: [PATCH] Add transform operation buttons and update toolbar logic

---
 src/app/App.tsx | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index ffa43eb5..852def97 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -979,6 +979,9 @@ export function App({ store, initialStatusMessage }: AppProps) {
   const hoveredAssetStatusMessage = hoveredAsset === null ? null : formatAssetHoverStatus(hoveredAsset);
   const selectedTransformTargetResult = resolveTransformTarget(editorState.document, editorState.selection);
   const selectedTransformTarget = selectedTransformTargetResult.target;
+  const canTranslateSelectedTarget = selectedTransformTarget !== null && supportsTransformOperation(selectedTransformTarget, "translate");
+  const canRotateSelectedTarget = selectedTransformTarget !== null && supportsTransformOperation(selectedTransformTarget, "rotate");
+  const canScaleSelectedTarget = selectedTransformTarget !== null && supportsTransformOperation(selectedTransformTarget, "scale");
 
   useEffect(() => {
     setSceneNameDraft(editorState.document.name);
@@ -4534,6 +4537,39 @@ export function App({ store, initialStatusMessage }: AppProps) {
             ))}
           </div>
 
+          <div className="toolbar__group" role="group" aria-label="Transform operations">
+            <button
+              className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "translate" ? "toolbar__button--active" : ""}`}
+              type="button"
+              data-testid="transform-translate-button"
+              aria-pressed={transformSession.kind === "active" && transformSession.operation === "translate"}
+              disabled={editorState.toolMode !== "select" || !canTranslateSelectedTarget}
+              onClick={() => beginTransformOperation("translate", "toolbar")}
+            >
+              Move ({getTransformOperationShortcut("translate")})
+            </button>
+            <button
+              className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "rotate" ? "toolbar__button--active" : ""}`}
+              type="button"
+              data-testid="transform-rotate-button"
+              aria-pressed={transformSession.kind === "active" && transformSession.operation === "rotate"}
+              disabled={editorState.toolMode !== "select" || !canRotateSelectedTarget}
+              onClick={() => beginTransformOperation("rotate", "toolbar")}
+            >
+              Rotate ({getTransformOperationShortcut("rotate")})
+            </button>
+            <button
+              className={`toolbar__button ${transformSession.kind === "active" && transformSession.operation === "scale" ? "toolbar__button--active" : ""}`}
+              type="button"
+              data-testid="transform-scale-button"
+              aria-pressed={transformSession.kind === "active" && transformSession.operation === "scale"}
+              disabled={editorState.toolMode !== "select" || !canScaleSelectedTarget}
+              onClick={() => beginTransformOperation("scale", "toolbar")}
+            >
+              Scale ({getTransformOperationShortcut("scale")})
+            </button>
+          </div>
+
           <div className="toolbar__group">
             <button
               className={`toolbar__button toolbar__button--accent ${blockingDiagnostics.length > 0 ? "toolbar__button--warn" : ""}`}
@@ -4821,6 +4857,7 @@ export function App({ store, initialStatusMessage }: AppProps) {
                 selection={editorState.selection}
                 toolMode={editorState.toolMode}
                 toolPreview={viewportToolPreview}
+                transformSession={transformSession}
                 cameraState={editorState.viewportPanels[panelId].cameraState}
                 focusRequestId={focusRequest.panelId === panelId ? focusRequest.id : 0}
                 focusSelection={focusRequest.selection}
@@ -4834,6 +4871,11 @@ export function App({ store, initialStatusMessage }: AppProps) {
                 onToolPreviewChange={(toolPreview) => {
                   store.setViewportToolPreview(toolPreview);
                 }}
+                onTransformSessionChange={(nextTransformSession) => {
+                  store.setTransformSession(nextTransformSession);
+                }}
+                onTransformCommit={commitTransformSession}
+                onTransformCancel={() => cancelTransformSession()}
                 onSelectionChange={(selection) => applySelection(selection, "viewport")}
               />
             ))}