Initial commit of VIZ 3D project

2026-06-10 16:10:18 +05:30
commit 08aea85c2f
37 changed files with 13118 additions and 0 deletions
@@ -0,0 +1,453 @@
+import React, { useState, useRef, useEffect, Suspense, useMemo, useCallback } from 'react';
+import { X, Upload, Trash2, RotateCw, Eye, EyeOff } from 'lucide-react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls, Environment } from '@react-three/drei';
+import * as THREE from 'three';
+import { ModelViewer } from './ModelViewer';
+
+interface Layer {
+  id: string;
+  url: string;
+  img?: HTMLImageElement;
+  x: number; y: number;
+  scaleX: number; scaleY: number;
+  rotation: number;
+  cropL: number; cropT: number; cropR: number; cropB: number;
+  visible: boolean;
+}
+
+type Handle = 'move' | 'rotate' | 'scaleNW' | 'scaleNE' | 'scaleSW' | 'scaleSE' | 'scaleN' | 'scaleS' | 'scaleE' | 'scaleW';
+
+interface UVEditorProps {
+  onClose: () => void;
+  onSave: (dataUrl: string, mappingType: string, layers: any[], bgColor: string, bgTransparent: boolean) => void;
+  targetObject?: any;
+  loadedModel?: THREE.Group | null;
+  sceneObjects?: any[];
+}
+
+const CANVAS_SIZE = 1024;
+
+function deg2rad(d: number) { return d * Math.PI / 180; }
+
+export function UVEditor({ onClose, onSave, targetObject, loadedModel, sceneObjects }: UVEditorProps) {
+  const initBg = targetObject?.materialProps?.uvBackground ?? '#1a1a2e';
+  const initTrans = targetObject?.materialProps?.uvTransparent ?? false;
+
+  const [layers, setLayers] = useState<Layer[]>([]);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [mappingType, setMappingType] = useState<string>(targetObject?.materialProps?.mappingType || 'uv');
+  const [bgColor, setBgColor] = useState(initBg);
+  const [bgTransparent, setBgTransparent] = useState(initTrans);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const dragRef = useRef<{ handle: Handle; startX: number; startY: number; layer: Layer } | null>(null);
+
+  useEffect(() => {
+    const saved = targetObject?.materialProps?.uvLayers;
+    if (!saved?.length) return;
+    let n = 0;
+    const init: Layer[] = saved.map((l: any) => ({ ...l }));
+    init.forEach(layer => {
+      const img = new Image();
+      img.onload = () => { layer.img = img; n++; if (n === init.length) setLayers([...init]); };
+      img.src = layer.url;
+    });
+  }, []);
+
+  const renderCanvas = useCallback((lrs: Layer[], transparent: boolean, bg: string): string => {
+    const c = document.createElement('canvas');
+    c.width = c.height = CANVAS_SIZE;
+    const ctx = c.getContext('2d')!;
+    if (!transparent) { ctx.fillStyle = bg; ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); }
+    lrs.forEach(layer => {
+      if (!layer.img || layer.visible === false) return;
+      const iw = layer.img.width, ih = layer.img.height;
+      const sx = layer.cropL * iw, sy = layer.cropT * ih;
+      const sw = (1 - layer.cropL - layer.cropR) * iw;
+      const sh = (1 - layer.cropT - layer.cropB) * ih;
+      ctx.save();
+      ctx.translate(layer.x, layer.y);
+      ctx.rotate(deg2rad(layer.rotation));
+      ctx.scale(layer.scaleX, layer.scaleY);
+      ctx.drawImage(layer.img, sx, sy, sw, sh, -sw / 2, -sh / 2, sw, sh);
+      ctx.restore();
+    });
+    return c.toDataURL(transparent ? 'image/png' : 'image/jpeg');
+  }, []);
+
+  useEffect(() => {
+    setPreviewUrl(renderCanvas(layers, bgTransparent, bgColor));
+  }, [layers, bgTransparent, bgColor]);
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]; if (!file) return;
+    const reader = new FileReader();
+    reader.onload = ev => {
+      const url = ev.target?.result as string;
+      const img = new Image();
+      img.onload = () => {
+        const nl: Layer = { id: `l-${Date.now()}`, url, img, x: CANVAS_SIZE / 2, y: CANVAS_SIZE / 2, scaleX: 1, scaleY: 1, rotation: 0, cropL: 0, cropT: 0, cropR: 0, cropB: 0, visible: true };
+        setLayers(p => [...p, nl]);
+        setSelectedId(nl.id);
+      };
+      img.src = url;
+    };
+    reader.readAsDataURL(file);
+    e.target.value = '';
+  };
+
+  const updateLayer = (id: string, u: Partial<Layer>) => setLayers(p => p.map(l => l.id === id ? { ...l, ...u } : l));
+  const selectedLayer = layers.find(l => l.id === selectedId) ?? null;
+
+  const getSF = () => {
+    const r = containerRef.current?.getBoundingClientRect();
+    return r ? CANVAS_SIZE / r.width : 1;
+  };
+
+  const onHandleDown = (e: React.MouseEvent, handle: Handle, layer: Layer) => {
+    e.stopPropagation();
+    setSelectedId(layer.id);
+    dragRef.current = { handle, startX: e.clientX, startY: e.clientY, layer: { ...layer } };
+    e.preventDefault();
+  };
+
+  // Snap helper: snap value to nearest multiple of snapSize
+  const snap = (v: number, snapSize: number) => Math.round(v / snapSize) * snapSize;
+
+  const onMouseMove = (e: React.MouseEvent) => {
+    const d = dragRef.current;
+    if (!d) return;
+    const sf = getSF();
+    const dx = (e.clientX - d.startX) * sf;
+    const dy = (e.clientY - d.startY) * sf;
+    const isShift = e.shiftKey;
+    const SNAP_PX = 16; // grid snap in canvas units
+
+    if (d.handle === 'move') {
+      let nx = d.layer.x + dx;
+      let ny = d.layer.y + dy;
+      // Clamp to canvas bounds with soft margin
+      nx = Math.max(0, Math.min(CANVAS_SIZE, nx));
+      ny = Math.max(0, Math.min(CANVAS_SIZE, ny));
+      // Hold Shift to snap to grid
+      if (isShift) { nx = snap(nx, SNAP_PX); ny = snap(ny, SNAP_PX); }
+      // Center snapping: snap near canvas center
+      if (Math.abs(nx - CANVAS_SIZE / 2) < SNAP_PX) nx = CANVAS_SIZE / 2;
+      if (Math.abs(ny - CANVAS_SIZE / 2) < SNAP_PX) ny = CANVAS_SIZE / 2;
+      updateLayer(d.layer.id, { x: nx, y: ny });
+    } else if (d.handle === 'rotate') {
+      let rot = d.layer.rotation + dx / 2;
+      // Snap rotation to 15° increments when Shift held
+      if (isShift) rot = snap(rot, 15);
+      updateLayer(d.layer.id, { rotation: rot });
+    } else if (d.handle.startsWith('scale')) {
+      if (isShift) {
+        // Shift held: stretch X and Y independently
+        const sx = Math.max(0.05, d.layer.scaleX + dx / 200);
+        const sy = Math.max(0.05, d.layer.scaleY + dy / 200);
+        updateLayer(d.layer.id, { scaleX: sx, scaleY: sy });
+      } else {
+        // No shift: uniform scale driven by the larger axis
+        const delta = (Math.abs(dx) > Math.abs(dy) ? dx : dy) / 200;
+        const sx = Math.max(0.05, d.layer.scaleX + delta);
+        const sy = Math.max(0.05, d.layer.scaleY + delta);
+        updateLayer(d.layer.id, { scaleX: sx, scaleY: sy });
+      }
+    }
+  };
+
+  const onMouseUp = () => { dragRef.current = null; };
+
+  const handleSave = () => {
+    if (previewUrl) {
+      const serialized = layers.map(({ img, ...rest }) => rest);
+      onSave(previewUrl, mappingType, serialized, bgColor, bgTransparent);
+    }
+    onClose();
+  };
+
+  const PreviewModel = () => {
+    const mockObjs = useMemo(() => {
+      if (!sceneObjects) return [];
+      return sceneObjects.map(obj => obj.id === targetObject?.id
+        ? { ...obj, materialProps: { ...obj.materialProps, map: previewUrl, mappingType } }
+        : obj
+      );
+    }, [sceneObjects, previewUrl, mappingType]);
+    const cloned = useMemo(() => loadedModel?.clone() ?? null, [loadedModel]);
+    if (!targetObject) return <mesh><boxGeometry /><meshStandardMaterial /></mesh>;
+    if (targetObject.type === 'cube') {
+      const tex = previewUrl ? (() => { const t = new THREE.TextureLoader().load(previewUrl); t.colorSpace = THREE.SRGBColorSpace; t.flipY = false; return t; })() : null;
+      return <mesh><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial map={tex ?? undefined} /></mesh>;
+    }
+    return <ModelViewer object={cloned} sceneObjects={mockObjs} />;
+  };
+
+  // Bounding box overlay rendered on canvas div
+  const BoundingBox = ({ layer }: { layer: Layer }) => {
+    const iw = (layer.img?.width ?? 200) * (1 - layer.cropL - layer.cropR);
+    const ih = (layer.img?.height ?? 200) * (1 - layer.cropT - layer.cropB);
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const pct = (v: number) => `${(v / CANVAS_SIZE) * 100}%`;
+    const w = (iw * layer.scaleX / CANVAS_SIZE) * 100;
+    const h = (ih * layer.scaleY / CANVAS_SIZE) * 100;
+    const lx = (layer.x / CANVAS_SIZE) * 100;
+    const ly = (layer.y / CANVAS_SIZE) * 100;
+
+    const cornerStyle = (cx: string, cy: string, cursor: string): React.CSSProperties => ({
+      position: 'absolute', left: cx, top: cy, width: 10, height: 10,
+      background: '#ffffff', border: '2px solid #3b82f6', borderRadius: 2,
+      transform: 'translate(-50%,-50%)', cursor, zIndex: 10, touchAction: 'none'
+    });
+    const edgeStyle = (cx: string, cy: string, cursor: string): React.CSSProperties => ({
+      position: 'absolute', left: cx, top: cy, width: 8, height: 8,
+      background: '#3b82f6', borderRadius: '50%',
+      transform: 'translate(-50%,-50%)', cursor, zIndex: 10
+    });
+
+    return (
+      <div style={{
+        position: 'absolute',
+        left: `${lx}%`, top: `${ly}%`,
+        width: `${w}%`, height: `${h}%`,
+        transform: `translate(-50%,-50%) rotate(${layer.rotation}deg)`,
+        border: '1.5px solid #3b82f6',
+        pointerEvents: 'none',
+        zIndex: 5,
+      }}>
+        {/* Corners - scale */}
+        {(['NW','NE','SW','SE'] as const).map(c => (
+          <div key={c}
+            style={{
+              ...cornerStyle(
+                c.includes('W') ? '0%' : '100%',
+                c.includes('N') ? '0%' : '100%',
+                c === 'NW' || c === 'SE' ? 'nwse-resize' : 'nesw-resize'
+              ), pointerEvents: 'all'
+            }}
+            onMouseDown={e => onHandleDown(e, `scale${c}` as Handle, layer)}
+          />
+        ))}
+        {/* Edge midpoints - scale */}
+        {[
+          { id: 'N', cx: '50%', cy: '0%', cur: 'ns-resize' },
+          { id: 'S', cx: '50%', cy: '100%', cur: 'ns-resize' },
+          { id: 'E', cx: '100%', cy: '50%', cur: 'ew-resize' },
+          { id: 'W', cx: '0%', cy: '50%', cur: 'ew-resize' },
+        ].map(({ id, cx, cy, cur }) => (
+          <div key={id} style={{ ...edgeStyle(cx, cy, cur), pointerEvents: 'all' }}
+            onMouseDown={e => onHandleDown(e, `scale${id}` as Handle, layer)} />
+        ))}
+        {/* Rotate handle - top center above box */}
+        <div style={{
+          position: 'absolute', left: '50%', top: -28,
+          transform: 'translateX(-50%)',
+          width: 14, height: 14,
+          background: '#f59e0b', border: '2px solid #fff', borderRadius: '50%',
+          cursor: 'grab', zIndex: 10, pointerEvents: 'all',
+        }} onMouseDown={e => onHandleDown(e, 'rotate', layer)} title="Rotate" />
+        {/* Line from box to rotate handle */}
+        <div style={{ position: 'absolute', left: '50%', top: -20, width: 2, height: 20, background: '#3b82f6', transform: 'translateX(-50%)', pointerEvents: 'none' }} />
+      </div>
+    );
+  };
+
+  return (
+    <div className="fixed inset-0 z-[200] flex flex-col text-zinc-100" style={{ fontFamily: 'Inter,sans-serif', background: '#0f0f13' }}>
+      {/* Top Bar */}
+      <div className="h-11 border-b border-zinc-800 bg-zinc-900/95 flex items-center justify-between px-4 flex-shrink-0 backdrop-blur">
+        <div className="flex items-center gap-3">
+          <button onClick={onClose} className="p-1.5 hover:bg-zinc-800 rounded-lg text-zinc-400 hover:text-white transition-colors">
+            <X size={16} />
+          </button>
+          <div className="w-px h-4 bg-zinc-700" />
+          <span className="text-sm font-semibold">UV Map</span>
+        </div>
+        <div className="flex items-center gap-3">
+          <label className="flex items-center gap-1.5 text-xs text-zinc-400 cursor-pointer select-none">
+            <input type="checkbox" checked={bgTransparent} onChange={e => setBgTransparent(e.target.checked)} className="accent-blue-500 w-3 h-3" />
+            Transparent
+          </label>
+          {!bgTransparent && (
+            <label className="relative flex items-center gap-1.5 cursor-pointer">
+              <div className="w-5 h-5 rounded border border-zinc-600 overflow-hidden relative">
+                <div className="absolute inset-0" style={{ background: bgColor }} />
+                <input type="color" value={bgColor} onChange={e => setBgColor(e.target.value)} className="opacity-0 absolute inset-0 w-full h-full cursor-pointer" />
+              </div>
+              <span className="text-[10px] font-mono text-zinc-400">{bgColor}</span>
+            </label>
+          )}
+          <button onClick={handleSave} className="px-4 py-1.5 bg-blue-500 hover:bg-blue-600 rounded-lg text-sm font-semibold transition-colors">
+            Apply to Model
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 flex overflow-hidden">
+        {/* Left sidebar */}
+        <div className="w-60 bg-zinc-900 border-r border-zinc-800 flex flex-col overflow-y-auto flex-shrink-0">
+          <div className="p-4 flex flex-col gap-3">
+            <input type="file" ref={fileInputRef} className="hidden" accept=".jpg,.jpeg,.png,.webp,.svg" onChange={handleFileUpload} />
+            <button onClick={() => fileInputRef.current?.click()}
+              className="w-full py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-semibold flex items-center justify-center gap-2 border border-zinc-700 transition-colors">
+              <Upload size={14} /> Add Image
+            </button>
+            <div className="h-px bg-zinc-800" />
+            <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Layers</p>
+            {layers.length === 0 && (
+              <div className="p-5 text-center text-zinc-600 text-xs border-2 border-dashed border-zinc-800 rounded-xl">Upload an image to start</div>
+            )}
+            {[...layers].reverse().map((layer, i) => (
+              <div key={layer.id} onClick={() => setSelectedId(layer.id)}
+                className={`flex items-center gap-2 p-2 rounded-lg border cursor-pointer transition-all ${selectedId === layer.id ? 'border-blue-500 bg-blue-500/10' : 'border-zinc-800 hover:border-zinc-600 bg-zinc-800/20'} ${!layer.visible ? 'opacity-40' : ''}`}>
+                <img src={layer.url} alt="" className="w-8 h-8 object-contain rounded bg-zinc-900 border border-zinc-700 flex-shrink-0" />
+                <span className="text-xs text-zinc-300 flex-1 truncate">Layer {layers.length - i}</span>
+                <button onClick={e => { e.stopPropagation(); updateLayer(layer.id, { visible: !layer.visible }); }}
+                  className="p-1 text-zinc-600 hover:text-blue-400 rounded" title={layer.visible ? 'Hide layer' : 'Show layer'}>
+                  {layer.visible !== false ? <Eye size={11} /> : <EyeOff size={11} />}
+                </button>
+                <button onClick={e => { e.stopPropagation(); setLayers(ls => ls.filter(l => l.id !== layer.id)); if (selectedId === layer.id) setSelectedId(null); }}
+                  className="p-1 text-zinc-600 hover:text-red-400 rounded">
+                  <Trash2 size={11} />
+                </button>
+              </div>
+            ))}
+
+            {/* Layer props */}
+            {selectedLayer && (
+              <div className="mt-1 flex flex-col gap-2 p-3 rounded-xl border border-zinc-800 bg-zinc-800/20">
+                <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Transform</p>
+                <div className="grid grid-cols-2 gap-2">
+                  {(['x', 'y'] as const).map(ax => (
+                    <div key={ax}>
+                      <p className="text-[9px] text-zinc-500 uppercase mb-0.5">{ax}</p>
+                      <input type="number" step="1" value={Math.round(selectedLayer[ax])}
+                        onChange={e => updateLayer(selectedLayer.id, { [ax]: +e.target.value })}
+                        className="w-full bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-[11px] text-blue-400 font-mono outline-none focus:border-blue-500" />
+                    </div>
+                  ))}
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  {(['scaleX', 'scaleY'] as const).map(ax => (
+                    <div key={ax}>
+                      <p className="text-[9px] text-zinc-500 uppercase mb-0.5">{ax === 'scaleX' ? 'Scl X' : 'Scl Y'}</p>
+                      <input type="number" step="0.01" min="0.01" value={selectedLayer[ax].toFixed(2)}
+                        onChange={e => updateLayer(selectedLayer.id, { [ax]: Math.max(0.01, +e.target.value) })}
+                        className="w-full bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-[11px] text-blue-400 font-mono outline-none focus:border-blue-500" />
+                    </div>
+                  ))}
+                </div>
+                <div>
+                  <div className="flex justify-between text-[9px] text-zinc-500 uppercase mb-1">
+                    <span>Rotation</span><span className="text-blue-400 font-mono">{Math.round(selectedLayer.rotation)}°</span>
+                  </div>
+                  <input type="range" min="-180" max="180" step="1" value={selectedLayer.rotation}
+                    onChange={e => updateLayer(selectedLayer.id, { rotation: +e.target.value })}
+                    className="w-full h-1 bg-zinc-700 rounded appearance-none cursor-pointer accent-blue-500" />
+                </div>
+
+                <div className="h-px bg-zinc-700 my-1" />
+                <p className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Crop</p>
+                {(['cropL', 'cropT', 'cropR', 'cropB'] as const).map(s => (
+                  <div key={s} className="flex items-center gap-2">
+                    <span className="text-[9px] text-zinc-500 w-6 uppercase">{s.slice(4)}</span>
+                    <input type="range" min="0" max="0.49" step="0.01" value={selectedLayer[s]}
+                      onChange={e => updateLayer(selectedLayer.id, { [s]: +e.target.value })}
+                      className="flex-1 h-1 bg-zinc-700 rounded appearance-none cursor-pointer accent-orange-500" />
+                    <span className="text-[9px] font-mono text-orange-400 w-6 text-right">{Math.round(selectedLayer[s] * 100)}%</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Canvas area */}
+        <div className="flex-1 flex items-center justify-center overflow-hidden relative"
+          style={{ background: 'radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f13 100%)' }}
+          onMouseMove={onMouseMove}
+          onMouseUp={onMouseUp}
+          onMouseLeave={onMouseUp}
+          onClick={() => setSelectedId(null)}>
+          <div ref={containerRef} className="relative shadow-2xl border border-zinc-700/50"
+            style={{
+              width: 'min(68vh, 90%)', aspectRatio: '1/1',
+              background: bgTransparent
+                ? 'repeating-conic-gradient(#27272a 0% 25%, #18181b 0% 50%) 0 0 / 16px 16px'
+                : bgColor
+            }}>
+
+            {/* Layers */}
+            {layers.map(layer => {
+              if (layer.visible === false) return null;
+              const iw = (layer.img?.width ?? 200) * (1 - layer.cropL - layer.cropR);
+              const ih = (layer.img?.height ?? 200) * (1 - layer.cropT - layer.cropB);
+              const isSelected = selectedId === layer.id;
+              return (
+                <div key={layer.id}
+                  onMouseDown={e => { e.stopPropagation(); onHandleDown(e, 'move', layer); }}
+                  className="absolute cursor-move"
+                  style={{
+                    left: `${(layer.x / CANVAS_SIZE) * 100}%`,
+                    top: `${(layer.y / CANVAS_SIZE) * 100}%`,
+                    transform: `translate(-50%,-50%) rotate(${layer.rotation}deg) scale(${layer.scaleX},${layer.scaleY})`,
+                    zIndex: isSelected ? 4 : 2,
+                    transition: 'transform 0.04s linear',
+                  }}>
+                  {layer.img && (
+                    <div style={{ width: iw, height: ih, overflow: 'hidden' }}>
+                      <img src={layer.url} alt=""
+                        style={{ position: 'relative', left: -layer.cropL * layer.img.width, top: -layer.cropT * layer.img.height, width: layer.img.width, height: layer.img.height, display: 'block', pointerEvents: 'none', imageRendering: 'auto' }} />
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+
+            {/* Bounding box overlays - only for visible selected layer */}
+            {layers.map(layer => selectedId === layer.id && layer.visible !== false && <BoundingBox key={`bb-${layer.id}`} layer={layer} />)}
+
+            <div className="absolute bottom-2 left-2 bg-black/50 text-[10px] text-zinc-400 px-2 py-0.5 rounded font-mono select-none">
+              {CANVAS_SIZE}×{CANVAS_SIZE}
+            </div>
+          </div>
+        </div>
+
+        {/* Right panel - preview */}
+        <div className="w-72 bg-zinc-900 border-l border-zinc-800 flex flex-col p-4 gap-4 flex-shrink-0 overflow-y-auto">
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <RotateCw size={11} className="text-zinc-500" />
+              <span className="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">3D Preview</span>
+            </div>
+            <div className="w-full aspect-square bg-zinc-950 rounded-xl overflow-hidden border border-zinc-800">
+              <Canvas shadows camera={{ position: [2, 2, 2], fov: 45 }}>
+                <ambientLight intensity={0.5} />
+                <directionalLight position={[5, 5, 5]} intensity={1} castShadow />
+                <Environment preset="studio" />
+                <Suspense fallback={null}><PreviewModel /></Suspense>
+                <OrbitControls autoRotate autoRotateSpeed={1.5} />
+              </Canvas>
+            </div>
+          </div>
+
+
+
+          <div className="p-3 bg-zinc-800/30 rounded-xl border border-zinc-800 text-zinc-500">
+            <p className="text-[10px] font-bold uppercase tracking-widest mb-2">Legend</p>
+            <div className="flex flex-col gap-1.5 text-[10px]">
+              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-sm bg-white border-2 border-blue-500" /><span>Drag corner/edge — uniform scale</span></div>
+              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-sm bg-blue-400 border-2 border-blue-500 flex items-center justify-center text-[7px] font-bold text-white">⇧</div><span>Shift + drag — free X/Y stretch</span></div>
+              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-full bg-amber-400" /><span>Drag top handle — rotate</span></div>
+              <div className="flex items-center gap-2"><div className="w-3 h-3 rounded-sm bg-zinc-600 border border-zinc-500 cursor-move" /><span>Drag layer — move (Shift snaps)</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}