esc key cancel tool

apps/editor/components/ui/helpers/ceiling-helper.tsx

@@ -0,0 +1,10 @@
+export function CeilingHelper() {
+  return (
+    <div className="pointer-events-none fixed right-4 top-1/2 -translate-y-1/2 z-40 flex flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">Esc</kbd>
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

apps/editor/components/ui/helpers/helper-manager.tsx

@@ -1,7 +1,10 @@
 'use client'
 
 import useEditor from '@/store/use-editor'
+import { CeilingHelper } from './ceiling-helper'
 import { ItemHelper } from './item-helper'
+import { RoofHelper } from './roof-helper'
+import { SlabHelper } from './slab-helper'
 import { WallHelper } from './wall-helper'
 
 export function HelperManager() {
@@ -9,15 +12,21 @@ export function HelperManager() {
   const movingNode = useEditor((state) => state.movingNode)
 
   if (movingNode) {
-    return <ItemHelper />
+    return <ItemHelper showEsc />
   }
-  
+
   // Show appropriate helper based on current tool
   switch (tool) {
     case 'wall':
       return <WallHelper />
     case 'item':
       return <ItemHelper />
+    case 'slab':
+      return <SlabHelper />
+    case 'ceiling':
+      return <CeilingHelper />
+    case 'roof':
+      return <RoofHelper />
     default:
       return null
   }

apps/editor/components/ui/helpers/item-helper.tsx

@@ -1,4 +1,8 @@
-export function ItemHelper() {
+interface ItemHelperProps {
+  showEsc?: boolean
+}
+
+export function ItemHelper({ showEsc }: ItemHelperProps) {
   return (
     <div className="pointer-events-none fixed right-4 top-1/2 -translate-y-1/2 z-40 flex flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
       <div className="flex items-center gap-2 text-sm">
@@ -9,10 +13,12 @@ export function ItemHelper() {
         <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">T</kbd>
         <span className="text-muted-foreground">Rotate clockwise</span>
       </div>
-      <div className="flex items-center gap-2 text-sm">
-        <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">Esc</kbd>
-        <span className="text-muted-foreground">Cancel</span>
-      </div>
+      {showEsc && (
+        <div className="flex items-center gap-2 text-sm">
+          <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">Esc</kbd>
+          <span className="text-muted-foreground">Cancel</span>
+        </div>
+      )}
     </div>
   )
 }

apps/editor/components/ui/helpers/roof-helper.tsx

@@ -0,0 +1,10 @@
+export function RoofHelper() {
+  return (
+    <div className="pointer-events-none fixed right-4 top-1/2 -translate-y-1/2 z-40 flex flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">Esc</kbd>
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

apps/editor/components/ui/helpers/slab-helper.tsx

@@ -0,0 +1,10 @@
+export function SlabHelper() {
+  return (
+    <div className="pointer-events-none fixed right-4 top-1/2 -translate-y-1/2 z-40 flex flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
+      <div className="flex items-center gap-2 text-sm">
+        <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">Esc</kbd>
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
+    </div>
+  )
+}

apps/editor/components/ui/helpers/wall-helper.tsx

@@ -1,10 +1,14 @@
 export function WallHelper() {
   return (
-    <div className="pointer-events-none fixed right-4 top-1/2 -translate-y-1/2 z-40 flex items-center gap-2 rounded-lg border border-border bg-background/95 px-4 py-2 shadow-lg backdrop-blur-md">
+    <div className="pointer-events-none fixed right-4 top-1/2 -translate-y-1/2 z-40 flex flex-col gap-2 rounded-lg border border-border bg-background/95 px-4 py-3 shadow-lg backdrop-blur-md">
       <div className="flex items-center gap-2 text-sm">
         <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">Shift</kbd>
         <span className="text-muted-foreground">Allow non-45° angles</span>
       </div>
+      <div className="flex items-center gap-2 text-sm">
+        <kbd className="rounded bg-muted px-2 py-1 text-xs font-medium">Esc</kbd>
+        <span className="text-muted-foreground">Cancel</span>
+      </div>
     </div>
   )
 }