create editor canvas toolbar

src/pages/editor/components/EditorCanvas.tsx

@@ -14,6 +14,7 @@ import GuidesLayer from "./canvas/GuidesLayer";
 import { getSnappedPosition, type Guide } from "./canvas/useSnap";
 import CellEditor from "@/components/CellEditor";
 import ZoomControls from "./ZoomControls";
+import EditorCanvasToolbar from "./EditorCanvasToolbar";
 import { createScopedId } from "../store/editorStore.helpers";
 
 type EditorCanvasProps = {
@@ -69,8 +70,37 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     }
   }, [setStageRef, setLayerRef]);
 
-
   const finalScale = stageSize.scale * zoom;
+
+  useEffect(() => {
+    let cleanup: (() => void) | undefined;
+    let raf = 0;
+
+    const begin = () => useEditorStore.getState().beginObjectGesture();
+    const end = () => useEditorStore.getState().endObjectGesture();
+
+    const attach = () => {
+      const stage = stageRef.current;
+      if (!stage || cleanup) return;
+      stage.on("dragstart", begin);
+      stage.on("dragend", end);
+      cleanup = () => {
+        stage.off("dragstart", begin);
+        stage.off("dragend", end);
+      };
+    };
+
+    attach();
+    if (!cleanup) {
+      raf = window.requestAnimationFrame(attach);
+    }
+
+    return () => {
+      if (raf) window.cancelAnimationFrame(raf);
+      cleanup?.();
+    };
+  }, [finalScale, stageSize.width, stageSize.height]);
+
   const updateActiveGuides = (nextActiveGuideIds: string[]) => {
     const prev = activeGuideIdsRef.current;
     const changed =
@@ -268,16 +298,32 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     handleStageMouseDown(e);
   };
 
+  const scaledW = stageSize.width * finalScale;
+  const scaledH = stageSize.height * finalScale;
+
   return (
-    <div className="flex-1 flex items-center justify-center pb-8 overflow-auto relative xl:pl-6">
-      <div className="mt-8">
+    <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-auto pb-8 xl:pl-6">
+      <div
+        className="flex w-full justify-center mx-auto"
+        style={{ maxWidth: scaledW }}
+      >
         <div
-          className="relative select-none"
+          className="overflow-hidden"
+          style={{ width: scaledW }}
+        >
+          <EditorCanvasToolbar barWidthPx={scaledW} />
+        </div>
+      </div>
+      <div className="mx-auto mt-4 flex w-full min-w-0 flex-col items-center">
+
+        <div
+          className="relative z-40 -mt-px select-none rounded-b-[14px] border border-t-0 border-[#d8dde5] bg-white shadow-[0_2px_8px_rgba(15,23,42,0.07)]"
           style={{
-            width: stageSize.width * finalScale,
-            height: stageSize.height * finalScale,
+            width: scaledW,
+            height: scaledH,
           }}
         >
+
           <div
             className="absolute -top-6 left-0 h-6 bg-slate-100 border-b border-slate-300 cursor-col-resize"
             style={{ width: stageSize.width * finalScale }}
@@ -354,6 +400,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
           </div>
         </div>
       </div>
+
       {editingCell && (
         <CellEditor
           x={editingCell.x}