@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/esm/uv/NiceUVEditor.js

@@ -1,564 +1,803 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { resolveCssColor, NiceIcon, NiceTutorialButton, resolveTutorial, NiceAppShell } from '@nice2dev/ui';
-import { useRef, useState, useEffect, useCallback } from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './UVEditor.module.css.js';
-import { DEFAULT_UV_STATE, DEFAULT_RELAX_OPTIONS, UV_TOOLS, UV_SELECTION_MODES, PROJECTION_TYPES, UV_CHANNELS, DEFAULT_PACKING_OPTIONS } from './uvEditorTypes.js';
-import { extractUVMeshData, uvSub, uvAdd, uvRotate, selectVerticesInRect, syncToGeometry, packIslands, applyIslandTransforms, relaxUVs, applyProjection, getSelectedVertices } from './uvEditorUtils.js';
-
-/** Built-in guided tour (EN inline + i18n keys → PL and other locales). */
+import { jsxs, jsx } from "react/jsx-runtime";
+import { resolveCssColor, NiceIcon, NiceTutorialButton, resolveTutorial, NiceAppShell } from "@nice2dev/ui";
+import { useRef, useState, useEffect, useCallback } from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./UVEditor.module.css.js";
+import { DEFAULT_UV_STATE, DEFAULT_RELAX_OPTIONS, UV_TOOLS, UV_SELECTION_MODES, PROJECTION_TYPES, UV_CHANNELS, DEFAULT_PACKING_OPTIONS } from "./uvEditorTypes.js";
+import { extractUVMeshData, uvSub, uvAdd, uvRotate, selectVerticesInRect, syncToGeometry, packIslands, applyIslandTransforms, relaxUVs, applyProjection, getSelectedVertices } from "./uvEditorUtils.js";
 const UV_EDITOR_TOUR = [
-    {
-        target: '.nice-uv-editor',
-        titleKey: 'tutorial.uvEditor.intro.title',
-        title: 'UV editor',
-        contentKey: 'tutorial.uvEditor.intro.content',
-        content: 'Edit the mesh’s UV layout over the texture: select and transform UVs with the tools, switch UV channels, and apply your changes.',
-        placement: 'auto',
-    },
+  {
+    target: ".nice-uv-editor",
+    titleKey: "tutorial.uvEditor.intro.title",
+    title: "UV editor",
+    contentKey: "tutorial.uvEditor.intro.content",
+    content: "Edit the mesh’s UV layout over the texture: select and transform UVs with the tools, switch UV channels, and apply your changes.",
+    placement: "auto"
+  }
 ];
-/* ═══════════════════════════════════════════
-   Component
-   ═══════════════════════════════════════════ */
-const NiceUVEditor = ({ geometry, texture, channel = 'uv', onUVChange, onSelectionChange, width = '100%', height = 600, showToolbar = true, showSidebar = true, className, readOnly = false, tutorial, }) => {
-    const { t } = useNiceTranslation();
-    const canvasRef = useRef(null);
-    const containerRef = useRef(null);
-    // State
-    const [state, setState] = useState({
-        ...DEFAULT_UV_STATE,
-        activeChannel: channel,
-    });
-    const [meshData, setMeshData] = useState(null);
-    const [selection, setSelection] = useState({
-        vertices: new Set(),
-        edges: new Set(),
-        faces: new Set(),
-        islands: new Set(),
+const NiceUVEditor = ({
+  geometry,
+  texture,
+  channel = "uv",
+  onUVChange,
+  onSelectionChange,
+  width = "100%",
+  height = 600,
+  showToolbar = true,
+  showSidebar = true,
+  className,
+  readOnly = false,
+  tutorial
+}) => {
+  const { t } = useNiceTranslation();
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const [state, setState] = useState({
+    ...DEFAULT_UV_STATE,
+    activeChannel: channel
+  });
+  const [meshData, setMeshData] = useState(null);
+  const [selection, setSelection] = useState({
+    vertices: /* @__PURE__ */ new Set(),
+    edges: /* @__PURE__ */ new Set(),
+    faces: /* @__PURE__ */ new Set(),
+    islands: /* @__PURE__ */ new Set()
+  });
+  const [dragState, setDragState] = useState({
+    active: false,
+    startPos: { u: 0, v: 0 },
+    currentPos: { u: 0, v: 0 },
+    mode: "select",
+    initialPositions: /* @__PURE__ */ new Map()
+  });
+  const [undoStack, setUndoStack] = useState([]);
+  const [redoStack, setRedoStack] = useState([]);
+  useEffect(() => {
+    if (geometry) {
+      const data = extractUVMeshData(geometry, state.activeChannel);
+      setMeshData(data);
+      setSelection({ vertices: /* @__PURE__ */ new Set(), edges: /* @__PURE__ */ new Set(), faces: /* @__PURE__ */ new Set(), islands: /* @__PURE__ */ new Set() });
+    } else {
+      setMeshData(null);
+    }
+  }, [geometry, state.activeChannel]);
+  useEffect(() => {
+    if (!canvasRef.current || !meshData) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    const { width: w, height: h } = canvas;
+    const { zoom, panOffset, display } = state;
+    ctx.fillStyle = resolveCssColor("var(--nice-bg-secondary, #2a2a2a)", ctx.canvas);
+    ctx.fillRect(0, 0, w, h);
+    const toScreen = (uv) => ({
+      x: (uv.u + panOffset.u) * zoom * w,
+      y: (1 - uv.v - panOffset.v) * zoom * h
     });
-    const [dragState, setDragState] = useState({
-        active: false,
-        startPos: { u: 0, v: 0 },
-        currentPos: { u: 0, v: 0 },
-        mode: 'select',
-        initialPositions: new Map(),
+    if (display.showTexture && texture?.image) {
+      ctx.globalAlpha = display.textureOpacity;
+      const img = texture.image;
+      const screenMin = toScreen({ u: 0, v: 0 });
+      const screenMax = toScreen({ u: 1, v: 1 });
+      ctx.drawImage(
+        img,
+        screenMin.x,
+        screenMax.y,
+        screenMax.x - screenMin.x,
+        screenMin.y - screenMax.y
+      );
+      ctx.globalAlpha = 1;
+    }
+    if (display.showGrid) {
+      ctx.strokeStyle = resolveCssColor("var(--nice-border, #404040)", ctx.canvas);
+      ctx.lineWidth = 1;
+      const gridStep = 1 / display.gridSize;
+      for (let i = 0; i <= display.gridSize; i++) {
+        const t2 = i * gridStep;
+        const startH = toScreen({ u: t2, v: 0 });
+        const endH = toScreen({ u: t2, v: 1 });
+        ctx.beginPath();
+        ctx.moveTo(startH.x, startH.y);
+        ctx.lineTo(endH.x, endH.y);
+        ctx.stroke();
+        const startV = toScreen({ u: 0, v: t2 });
+        const endV = toScreen({ u: 1, v: t2 });
+        ctx.beginPath();
+        ctx.moveTo(startV.x, startV.y);
+        ctx.lineTo(endV.x, endV.y);
+        ctx.stroke();
+      }
+      ctx.strokeStyle = resolveCssColor("var(--nice-text-secondary, #666)", ctx.canvas);
+      ctx.lineWidth = 2;
+      const corners = [
+        toScreen({ u: 0, v: 0 }),
+        toScreen({ u: 1, v: 0 }),
+        toScreen({ u: 1, v: 1 }),
+        toScreen({ u: 0, v: 1 })
+      ];
+      ctx.beginPath();
+      ctx.moveTo(corners[0].x, corners[0].y);
+      corners.forEach((c, i) => {
+        if (i > 0) {
+          ctx.lineTo(c.x, c.y);
+        }
+      });
+      ctx.closePath();
+      ctx.stroke();
+    }
+    const faceSelectedFill = resolveCssColor(
+      "var(--nice-warning-tint-30, rgba(255, 170, 0, 0.3))",
+      ctx.canvas
+    );
+    const faceFill = resolveCssColor(
+      "var(--nice-overlay-10, rgba(100, 100, 100, 0.1))",
+      ctx.canvas
+    );
+    for (const face of meshData.faces.values()) {
+      const verts = face.vertices.map((id) => meshData.vertices.get(id));
+      const screenVerts = verts.map((v) => toScreen(v.position));
+      ctx.fillStyle = face.selected ? faceSelectedFill : faceFill;
+      ctx.beginPath();
+      ctx.moveTo(screenVerts[0].x, screenVerts[0].y);
+      screenVerts.slice(1).forEach((sv) => ctx.lineTo(sv.x, sv.y));
+      ctx.closePath();
+      ctx.fill();
+      if (display.showDistortion) {
+        const distortion = Math.min(face.distortion, 2);
+        const r = Math.floor(255 * Math.min(1, distortion));
+        const g = Math.floor(255 * Math.max(0, 1 - distortion));
+        ctx.fillStyle = `rgba(${r}, ${g}, 0, 0.5)`;
+        ctx.fill();
+      }
+    }
+    for (const edge of meshData.edges.values()) {
+      const v1 = meshData.vertices.get(edge.startVertex);
+      const v2 = meshData.vertices.get(edge.endVertex);
+      const s1 = toScreen(v1.position);
+      const s2 = toScreen(v2.position);
+      if (edge.seam && display.showSeams) {
+        ctx.strokeStyle = display.seamColor;
+        ctx.lineWidth = 3;
+      } else if (edge.selected) {
+        ctx.strokeStyle = display.selectionColor;
+        ctx.lineWidth = 2;
+      } else {
+        ctx.strokeStyle = resolveCssColor("var(--nice-text-secondary, #888)", ctx.canvas);
+        ctx.lineWidth = 1;
+      }
+      ctx.beginPath();
+      ctx.moveTo(s1.x, s1.y);
+      ctx.lineTo(s2.x, s2.y);
+      ctx.stroke();
+    }
+    for (const vertex of meshData.vertices.values()) {
+      const s = toScreen(vertex.position);
+      ctx.fillStyle = resolveCssColor(
+        vertex.selected ? display.selectionColor : vertex.pinned ? "var(--nice-danger, #ff0000)" : "var(--nice-bg, #fff)",
+        ctx.canvas
+      );
+      ctx.beginPath();
+      ctx.arc(s.x, s.y, vertex.selected ? 5 : 3, 0, Math.PI * 2);
+      ctx.fill();
+      if (display.showIndices) {
+        ctx.fillStyle = resolveCssColor("var(--nice-bg, #fff)", ctx.canvas);
+        ctx.font = "10px monospace";
+        ctx.fillText(String(vertex.index), s.x + 6, s.y - 6);
+      }
+    }
+    if (display.showIslandBounds) {
+      ctx.strokeStyle = resolveCssColor("var(--nice-info, #00ffff)", ctx.canvas);
+      ctx.lineWidth = 1;
+      ctx.setLineDash([5, 5]);
+      for (const island of meshData.islands.values()) {
+        const min = toScreen({ u: island.bounds.minU, v: island.bounds.minV });
+        const max = toScreen({ u: island.bounds.maxU, v: island.bounds.maxV });
+        ctx.strokeRect(min.x, max.y, max.x - min.x, min.y - max.y);
+      }
+      ctx.setLineDash([]);
+    }
+    if (dragState.active && dragState.mode === "select") {
+      const s1 = toScreen(dragState.startPos);
+      const s2 = toScreen(dragState.currentPos);
+      ctx.strokeStyle = resolveCssColor("var(--nice-bg, #fff)", ctx.canvas);
+      ctx.lineWidth = 1;
+      ctx.setLineDash([3, 3]);
+      ctx.strokeRect(
+        Math.min(s1.x, s2.x),
+        Math.min(s1.y, s2.y),
+        Math.abs(s2.x - s1.x),
+        Math.abs(s2.y - s1.y)
+      );
+      ctx.setLineDash([]);
+    }
+  }, [meshData, state, texture, dragState, selection]);
+  useEffect(() => {
+    if (!canvasRef.current || !containerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      const rect = containerRef.current.getBoundingClientRect();
+      canvasRef.current.width = rect.width;
+      canvasRef.current.height = rect.height;
     });
-    const [undoStack, setUndoStack] = useState([]);
-    const [redoStack, setRedoStack] = useState([]);
-    // Extract mesh data when geometry changes
-    useEffect(() => {
-        if (geometry) {
-            const data = extractUVMeshData(geometry, state.activeChannel);
-            setMeshData(data);
-            setSelection({ vertices: new Set(), edges: new Set(), faces: new Set(), islands: new Set() });
-        }
-        else {
-            setMeshData(null);
-        }
-    }, [geometry, state.activeChannel]);
-    // Render UV view
-    useEffect(() => {
-        if (!canvasRef.current || !meshData) {
-            return;
-        }
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        const { width: w, height: h } = canvas;
-        const { zoom, panOffset, display } = state;
-        // Clear
-        ctx.fillStyle = resolveCssColor('var(--nice-bg-secondary, #2a2a2a)', ctx.canvas);
-        ctx.fillRect(0, 0, w, h);
-        // Transform helper
-        const toScreen = (uv) => ({
-            x: (uv.u + panOffset.u) * zoom * w,
-            y: (1 - uv.v - panOffset.v) * zoom * h,
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, []);
+  const pushUndo = useCallback(() => {
+    if (!meshData) {
+      return;
+    }
+    setUndoStack((prev) => [...prev.slice(-20), JSON.parse(JSON.stringify(meshData))]);
+    setRedoStack([]);
+  }, [meshData]);
+  const undo = useCallback(() => {
+    if (undoStack.length === 0 || !meshData) {
+      return;
+    }
+    setRedoStack((prev2) => [...prev2, JSON.parse(JSON.stringify(meshData))]);
+    const prev = undoStack[undoStack.length - 1];
+    setUndoStack((stack) => stack.slice(0, -1));
+    setMeshData(prev);
+  }, [undoStack, meshData]);
+  const redo = useCallback(() => {
+    if (redoStack.length === 0) {
+      return;
+    }
+    const next = redoStack[redoStack.length - 1];
+    setRedoStack((stack) => stack.slice(0, -1));
+    if (meshData) {
+      setUndoStack((prev) => [...prev, JSON.parse(JSON.stringify(meshData))]);
+    }
+    setMeshData(next);
+  }, [redoStack, meshData]);
+  const screenToUV = useCallback(
+    (clientX, clientY) => {
+      if (!canvasRef.current) {
+        return { u: 0, v: 0 };
+      }
+      const rect = canvasRef.current.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+      const { zoom, panOffset } = state;
+      return {
+        u: x / (zoom * rect.width) - panOffset.u,
+        v: 1 - y / (zoom * rect.height) - panOffset.v
+      };
+    },
+    [state]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (readOnly || !meshData) {
+        return;
+      }
+      const uv = screenToUV(e.clientX, e.clientY);
+      if (e.button === 1) {
+        setDragState({
+          active: true,
+          startPos: uv,
+          currentPos: uv,
+          mode: "pan",
+          initialPositions: /* @__PURE__ */ new Map()
         });
-        // Draw texture background
-        if (display.showTexture && (texture === null || texture === void 0 ? void 0 : texture.image)) {
-            ctx.globalAlpha = display.textureOpacity;
-            const img = texture.image;
-            const screenMin = toScreen({ u: 0, v: 0 });
-            const screenMax = toScreen({ u: 1, v: 1 });
-            ctx.drawImage(img, screenMin.x, screenMax.y, screenMax.x - screenMin.x, screenMin.y - screenMax.y);
-            ctx.globalAlpha = 1;
-        }
-        // Draw grid
-        if (display.showGrid) {
-            ctx.strokeStyle = resolveCssColor('var(--nice-border, #404040)', ctx.canvas);
-            ctx.lineWidth = 1;
-            const gridStep = 1 / display.gridSize;
-            for (let i = 0; i <= display.gridSize; i++) {
-                const t = i * gridStep;
-                const startH = toScreen({ u: t, v: 0 });
-                const endH = toScreen({ u: t, v: 1 });
-                ctx.beginPath();
-                ctx.moveTo(startH.x, startH.y);
-                ctx.lineTo(endH.x, endH.y);
-                ctx.stroke();
-                const startV = toScreen({ u: 0, v: t });
-                const endV = toScreen({ u: 1, v: t });
-                ctx.beginPath();
-                ctx.moveTo(startV.x, startV.y);
-                ctx.lineTo(endV.x, endV.y);
-                ctx.stroke();
-            }
-            // UV space boundary
-            ctx.strokeStyle = resolveCssColor('var(--nice-text-secondary, #666)', ctx.canvas);
-            ctx.lineWidth = 2;
-            const corners = [
-                toScreen({ u: 0, v: 0 }),
-                toScreen({ u: 1, v: 0 }),
-                toScreen({ u: 1, v: 1 }),
-                toScreen({ u: 0, v: 1 }),
-            ];
-            ctx.beginPath();
-            ctx.moveTo(corners[0].x, corners[0].y);
-            corners.forEach((c, i) => {
-                if (i > 0) {
-                    ctx.lineTo(c.x, c.y);
-                }
-            });
-            ctx.closePath();
-            ctx.stroke();
-        }
-        // Draw faces — the two fills resolved once per frame, not once per face
-        const faceSelectedFill = resolveCssColor('var(--nice-warning-tint-30, rgba(255, 170, 0, 0.3))', ctx.canvas);
-        const faceFill = resolveCssColor('var(--nice-overlay-10, rgba(100, 100, 100, 0.1))', ctx.canvas);
-        for (const face of meshData.faces.values()) {
-            const verts = face.vertices.map((id) => meshData.vertices.get(id));
-            const screenVerts = verts.map((v) => toScreen(v.position));
-            // Fill
-            ctx.fillStyle = face.selected ? faceSelectedFill : faceFill;
-            ctx.beginPath();
-            ctx.moveTo(screenVerts[0].x, screenVerts[0].y);
-            screenVerts.slice(1).forEach((sv) => ctx.lineTo(sv.x, sv.y));
-            ctx.closePath();
-            ctx.fill();
-            // Distortion overlay
-            if (display.showDistortion) {
-                const distortion = Math.min(face.distortion, 2);
-                const r = Math.floor(255 * Math.min(1, distortion));
-                const g = Math.floor(255 * Math.max(0, 1 - distortion));
-                ctx.fillStyle = `rgba(${r}, ${g}, 0, 0.5)`;
-                ctx.fill();
-            }
-        }
-        // Draw edges
-        for (const edge of meshData.edges.values()) {
-            const v1 = meshData.vertices.get(edge.startVertex);
-            const v2 = meshData.vertices.get(edge.endVertex);
-            const s1 = toScreen(v1.position);
-            const s2 = toScreen(v2.position);
-            if (edge.seam && display.showSeams) {
-                ctx.strokeStyle = display.seamColor;
-                ctx.lineWidth = 3;
-            }
-            else if (edge.selected) {
-                ctx.strokeStyle = display.selectionColor;
-                ctx.lineWidth = 2;
-            }
-            else {
-                ctx.strokeStyle = resolveCssColor('var(--nice-text-secondary, #888)', ctx.canvas);
-                ctx.lineWidth = 1;
-            }
-            ctx.beginPath();
-            ctx.moveTo(s1.x, s1.y);
-            ctx.lineTo(s2.x, s2.y);
-            ctx.stroke();
-        }
-        // Draw vertices
-        for (const vertex of meshData.vertices.values()) {
-            const s = toScreen(vertex.position);
-            ctx.fillStyle = resolveCssColor(vertex.selected
-                ? display.selectionColor
-                : vertex.pinned
-                    ? 'var(--nice-danger, #ff0000)'
-                    : 'var(--nice-bg, #fff)', ctx.canvas);
-            ctx.beginPath();
-            ctx.arc(s.x, s.y, vertex.selected ? 5 : 3, 0, Math.PI * 2);
-            ctx.fill();
-            if (display.showIndices) {
-                ctx.fillStyle = resolveCssColor('var(--nice-bg, #fff)', ctx.canvas);
-                ctx.font = '10px monospace';
-                ctx.fillText(String(vertex.index), s.x + 6, s.y - 6);
-            }
-        }
-        // Draw island bounds
-        if (display.showIslandBounds) {
-            ctx.strokeStyle = resolveCssColor('var(--nice-info, #00ffff)', ctx.canvas);
-            ctx.lineWidth = 1;
-            ctx.setLineDash([5, 5]);
-            for (const island of meshData.islands.values()) {
-                const min = toScreen({ u: island.bounds.minU, v: island.bounds.minV });
-                const max = toScreen({ u: island.bounds.maxU, v: island.bounds.maxV });
-                ctx.strokeRect(min.x, max.y, max.x - min.x, min.y - max.y);
-            }
-            ctx.setLineDash([]);
-        }
-        // Draw selection rect while dragging
-        if (dragState.active && dragState.mode === 'select') {
-            const s1 = toScreen(dragState.startPos);
-            const s2 = toScreen(dragState.currentPos);
-            ctx.strokeStyle = resolveCssColor('var(--nice-bg, #fff)', ctx.canvas);
-            ctx.lineWidth = 1;
-            ctx.setLineDash([3, 3]);
-            ctx.strokeRect(Math.min(s1.x, s2.x), Math.min(s1.y, s2.y), Math.abs(s2.x - s1.x), Math.abs(s2.y - s1.y));
-            ctx.setLineDash([]);
-        }
-    }, [meshData, state, texture, dragState, selection]);
-    // Resize canvas
-    useEffect(() => {
-        if (!canvasRef.current || !containerRef.current) {
-            return;
-        }
-        const observer = new ResizeObserver(() => {
-            const rect = containerRef.current.getBoundingClientRect();
-            canvasRef.current.width = rect.width;
-            canvasRef.current.height = rect.height;
+        return;
+      }
+      if (e.button === 2) {
+        return;
+      }
+      if (state.activeTool === "select") {
+        setDragState({
+          active: true,
+          startPos: uv,
+          currentPos: uv,
+          mode: "select",
+          initialPositions: /* @__PURE__ */ new Map()
         });
-        observer.observe(containerRef.current);
-        return () => observer.disconnect();
-    }, []);
-    // Push undo state
-    const pushUndo = useCallback(() => {
-        if (!meshData) {
-            return;
-        }
-        setUndoStack((prev) => [...prev.slice(-20), JSON.parse(JSON.stringify(meshData))]);
-        setRedoStack([]);
-    }, [meshData]);
-    // Undo
-    const undo = useCallback(() => {
-        if (undoStack.length === 0 || !meshData) {
-            return;
-        }
-        setRedoStack((prev) => [...prev, JSON.parse(JSON.stringify(meshData))]);
-        const prev = undoStack[undoStack.length - 1];
-        setUndoStack((stack) => stack.slice(0, -1));
-        setMeshData(prev);
-    }, [undoStack, meshData]);
-    // Redo
-    const redo = useCallback(() => {
-        if (redoStack.length === 0) {
-            return;
-        }
-        const next = redoStack[redoStack.length - 1];
-        setRedoStack((stack) => stack.slice(0, -1));
-        if (meshData) {
-            setUndoStack((prev) => [...prev, JSON.parse(JSON.stringify(meshData))]);
-        }
-        setMeshData(next);
-    }, [redoStack, meshData]);
-    // Screen to UV conversion
-    const screenToUV = useCallback((clientX, clientY) => {
-        if (!canvasRef.current) {
-            return { u: 0, v: 0 };
-        }
-        const rect = canvasRef.current.getBoundingClientRect();
-        const x = clientX - rect.left;
-        const y = clientY - rect.top;
-        const { zoom, panOffset } = state;
-        return {
-            u: x / (zoom * rect.width) - panOffset.u,
-            v: 1 - y / (zoom * rect.height) - panOffset.v,
-        };
-    }, [state]);
-    // Mouse handlers
-    const handleMouseDown = useCallback((e) => {
-        if (readOnly || !meshData) {
-            return;
-        }
-        const uv = screenToUV(e.clientX, e.clientY);
-        // Middle mouse = pan
-        if (e.button === 1) {
-            setDragState({
-                active: true,
-                startPos: uv,
-                currentPos: uv,
-                mode: 'pan',
-                initialPositions: new Map(),
-            });
-            return;
-        }
-        // Right click = context menu (handled elsewhere)
-        if (e.button === 2) {
-            return;
-        }
-        // Left click
-        if (state.activeTool === 'select') {
-            // Start selection rect
-            setDragState({
-                active: true,
-                startPos: uv,
-                currentPos: uv,
-                mode: 'select',
-                initialPositions: new Map(),
-            });
-        }
-        else if (['move', 'rotate', 'scale'].includes(state.activeTool)) {
-            // Start transform
-            const initialPositions = new Map();
-            for (const [id, vertex] of meshData.vertices) {
-                if (vertex.selected) {
-                    initialPositions.set(id, { ...vertex.position });
-                }
-            }
-            if (initialPositions.size > 0) {
-                pushUndo();
-                setDragState({
-                    active: true,
-                    startPos: uv,
-                    currentPos: uv,
-                    mode: 'transform',
-                    initialPositions,
-                });
-            }
-        }
-    }, [readOnly, meshData, state.activeTool, screenToUV, pushUndo]);
-    const handleMouseMove = useCallback((e) => {
-        if (!dragState.active || !meshData) {
-            return;
-        }
-        const uv = screenToUV(e.clientX, e.clientY);
-        if (dragState.mode === 'pan') {
-            const delta = uvSub(uv, dragState.currentPos);
-            setState((prev) => ({
-                ...prev,
-                panOffset: uvAdd(prev.panOffset, delta),
-            }));
-        }
-        else if (dragState.mode === 'transform') {
-            const delta = uvSub(uv, dragState.startPos);
-            // Calculate selection center
-            let centerU = 0, centerV = 0, count = 0;
-            for (const pos of dragState.initialPositions.values()) {
-                centerU += pos.u;
-                centerV += pos.v;
-                count++;
-            }
-            const center = { u: centerU / count, v: centerV / count };
-            // Apply transform based on tool
-            for (const [id, initPos] of dragState.initialPositions) {
-                const vertex = meshData.vertices.get(id);
-                if (!vertex) {
-                    continue;
-                }
-                switch (state.activeTool) {
-                    case 'move':
-                        vertex.position = uvAdd(initPos, delta);
-                        break;
-                    case 'rotate': {
-                        const angle = Math.atan2(delta.v, delta.u) * 2;
-                        vertex.position = uvRotate(initPos, angle, center);
-                        break;
-                    }
-                    case 'scale': {
-                        const scale = 1 + delta.u + delta.v;
-                        vertex.position = {
-                            u: center.u + (initPos.u - center.u) * scale,
-                            v: center.v + (initPos.v - center.v) * scale,
-                        };
-                        break;
-                    }
-                }
-            }
-            // Trigger re-render
-            setMeshData({ ...meshData, dirty: true });
-        }
-        setDragState((prev) => ({ ...prev, currentPos: uv }));
-    }, [dragState, meshData, state.activeTool, screenToUV]);
-    const handleMouseUp = useCallback((e) => {
-        if (!dragState.active || !meshData) {
-            setDragState((prev) => ({ ...prev, active: false }));
-            return;
-        }
-        if (dragState.mode === 'select') {
-            // Complete selection rect
-            const rect = {
-                minU: Math.min(dragState.startPos.u, dragState.currentPos.u),
-                maxU: Math.max(dragState.startPos.u, dragState.currentPos.u),
-                minV: Math.min(dragState.startPos.v, dragState.currentPos.v),
-                maxV: Math.max(dragState.startPos.v, dragState.currentPos.v),
-            };
-            const additive = e.shiftKey;
-            const selected = selectVerticesInRect(meshData, rect, additive);
-            setSelection((prev) => ({
-                ...prev,
-                vertices: new Set(selected),
-            }));
-            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
-                vertices: new Set(selected),
-                edges: new Set(),
-                faces: new Set(),
-                islands: new Set(),
-            });
-        }
-        else if (dragState.mode === 'transform' && meshData.dirty) {
-            // Sync changes back to geometry
-            if (geometry) {
-                syncToGeometry(meshData, geometry, state.activeChannel);
-                onUVChange === null || onUVChange === void 0 ? void 0 : onUVChange(geometry);
-            }
-        }
-        setDragState((prev) => ({ ...prev, active: false }));
-    }, [dragState, meshData, geometry, state.activeChannel, onSelectionChange, onUVChange]);
-    // Wheel handler (zoom)
-    const handleWheel = useCallback((e) => {
-        e.preventDefault();
-        const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+      } else if (["move", "rotate", "scale"].includes(state.activeTool)) {
+        const initialPositions = /* @__PURE__ */ new Map();
+        for (const [id, vertex] of meshData.vertices) {
+          if (vertex.selected) {
+            initialPositions.set(id, { ...vertex.position });
+          }
+        }
+        if (initialPositions.size > 0) {
+          pushUndo();
+          setDragState({
+            active: true,
+            startPos: uv,
+            currentPos: uv,
+            mode: "transform",
+            initialPositions
+          });
+        }
+      }
+    },
+    [readOnly, meshData, state.activeTool, screenToUV, pushUndo]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!dragState.active || !meshData) {
+        return;
+      }
+      const uv = screenToUV(e.clientX, e.clientY);
+      if (dragState.mode === "pan") {
+        const delta = uvSub(uv, dragState.currentPos);
         setState((prev) => ({
-            ...prev,
-            zoom: Math.max(0.1, Math.min(10, prev.zoom * zoomFactor)),
+          ...prev,
+          panOffset: uvAdd(prev.panOffset, delta)
         }));
-    }, []);
-    // Keyboard handler
-    useEffect(() => {
-        const handler = (e) => {
-            if (readOnly) {
-                return;
-            }
-            const ctrl = e.ctrlKey || e.metaKey;
-            // Tool shortcuts
-            if (e.key === 'g' && !ctrl) {
-                setState((prev) => ({ ...prev, activeTool: 'move' }));
-            }
-            if (e.key === 'r' && !ctrl) {
-                setState((prev) => ({ ...prev, activeTool: 'rotate' }));
-            }
-            if (e.key === 's' && !ctrl) {
-                setState((prev) => ({ ...prev, activeTool: 'scale' }));
-            }
-            if (e.key === 'q' || e.key === 'w') {
-                setState((prev) => ({ ...prev, activeTool: 'select' }));
-            }
-            // Selection mode shortcuts
-            if (e.key === '1') {
-                setState((prev) => ({ ...prev, selectionMode: 'vertex' }));
-            }
-            if (e.key === '2') {
-                setState((prev) => ({ ...prev, selectionMode: 'edge' }));
-            }
-            if (e.key === '3') {
-                setState((prev) => ({ ...prev, selectionMode: 'face' }));
-            }
-            if (e.key === '4') {
-                setState((prev) => ({ ...prev, selectionMode: 'island' }));
-            }
-            // Undo/Redo
-            if (ctrl && e.key === 'z') {
-                e.preventDefault();
-                undo();
+      } else if (dragState.mode === "transform") {
+        const delta = uvSub(uv, dragState.startPos);
+        let centerU = 0, centerV = 0, count = 0;
+        for (const pos of dragState.initialPositions.values()) {
+          centerU += pos.u;
+          centerV += pos.v;
+          count++;
+        }
+        const center = { u: centerU / count, v: centerV / count };
+        for (const [id, initPos] of dragState.initialPositions) {
+          const vertex = meshData.vertices.get(id);
+          if (!vertex) {
+            continue;
+          }
+          switch (state.activeTool) {
+            case "move":
+              vertex.position = uvAdd(initPos, delta);
+              break;
+            case "rotate": {
+              const angle = Math.atan2(delta.v, delta.u) * 2;
+              vertex.position = uvRotate(initPos, angle, center);
+              break;
             }
-            if (ctrl && (e.key === 'y' || (e.shiftKey && e.key === 'z'))) {
-                e.preventDefault();
-                redo();
+            case "scale": {
+              const scale = 1 + delta.u + delta.v;
+              vertex.position = {
+                u: center.u + (initPos.u - center.u) * scale,
+                v: center.v + (initPos.v - center.v) * scale
+              };
+              break;
             }
-            // Select all
-            if (e.key === 'a' && !ctrl) {
-                if (meshData) {
-                    for (const v of meshData.vertices.values()) {
-                        v.selected = true;
-                    }
-                    setMeshData({ ...meshData });
-                }
-            }
-            // Deselect
-            if (e.key === 'Escape') {
-                if (meshData) {
-                    for (const v of meshData.vertices.values()) {
-                        v.selected = false;
-                    }
-                    for (const e of meshData.edges.values()) {
-                        e.selected = false;
-                    }
-                    for (const f of meshData.faces.values()) {
-                        f.selected = false;
-                    }
-                    for (const i of meshData.islands.values()) {
-                        i.selected = false;
-                    }
-                    setMeshData({ ...meshData });
-                }
-            }
-        };
-        window.addEventListener('keydown', handler);
-        return () => window.removeEventListener('keydown', handler);
-    }, [readOnly, meshData, undo, redo]);
-    // Tool actions
-    const handlePack = useCallback(() => {
-        if (!meshData || readOnly) {
-            return;
-        }
-        pushUndo();
-        const result = packIslands(meshData, DEFAULT_PACKING_OPTIONS);
-        applyIslandTransforms(meshData, result.transforms);
-        if (geometry) {
-            syncToGeometry(meshData, geometry, state.activeChannel);
-            onUVChange === null || onUVChange === void 0 ? void 0 : onUVChange(geometry);
+          }
         }
-        setMeshData({ ...meshData });
-    }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
-    const handleRelax = useCallback(() => {
-        if (!meshData || readOnly) {
-            return;
-        }
-        pushUndo();
-        const selectedVerts = new Set(Array.from(meshData.vertices.values())
-            .filter((v) => v.selected)
-            .map((v) => v.id));
-        relaxUVs(meshData, DEFAULT_RELAX_OPTIONS, selectedVerts.size > 0 ? selectedVerts : undefined);
+        setMeshData({ ...meshData, dirty: true });
+      }
+      setDragState((prev) => ({ ...prev, currentPos: uv }));
+    },
+    [dragState, meshData, state.activeTool, screenToUV]
+  );
+  const handleMouseUp = useCallback(
+    (e) => {
+      if (!dragState.active || !meshData) {
+        setDragState((prev) => ({ ...prev, active: false }));
+        return;
+      }
+      if (dragState.mode === "select") {
+        const rect = {
+          minU: Math.min(dragState.startPos.u, dragState.currentPos.u),
+          maxU: Math.max(dragState.startPos.u, dragState.currentPos.u),
+          minV: Math.min(dragState.startPos.v, dragState.currentPos.v),
+          maxV: Math.max(dragState.startPos.v, dragState.currentPos.v)
+        };
+        const additive = e.shiftKey;
+        const selected = selectVerticesInRect(meshData, rect, additive);
+        setSelection((prev) => ({
+          ...prev,
+          vertices: new Set(selected)
+        }));
+        onSelectionChange?.({
+          vertices: new Set(selected),
+          edges: /* @__PURE__ */ new Set(),
+          faces: /* @__PURE__ */ new Set(),
+          islands: /* @__PURE__ */ new Set()
+        });
+      } else if (dragState.mode === "transform" && meshData.dirty) {
         if (geometry) {
-            syncToGeometry(meshData, geometry, state.activeChannel);
-            onUVChange === null || onUVChange === void 0 ? void 0 : onUVChange(geometry);
+          syncToGeometry(meshData, geometry, state.activeChannel);
+          onUVChange?.(geometry);
         }
-        setMeshData({ ...meshData });
-    }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
-    const handleProject = useCallback((type) => {
-        if (!meshData || !geometry || readOnly) {
-            return;
+      }
+      setDragState((prev) => ({ ...prev, active: false }));
+    },
+    [dragState, meshData, geometry, state.activeChannel, onSelectionChange, onUVChange]
+  );
+  const handleWheel = useCallback((e) => {
+    e.preventDefault();
+    const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+    setState((prev) => ({
+      ...prev,
+      zoom: Math.max(0.1, Math.min(10, prev.zoom * zoomFactor))
+    }));
+  }, []);
+  useEffect(() => {
+    const handler = (e) => {
+      if (readOnly) {
+        return;
+      }
+      const ctrl = e.ctrlKey || e.metaKey;
+      if (e.key === "g" && !ctrl) {
+        setState((prev) => ({ ...prev, activeTool: "move" }));
+      }
+      if (e.key === "r" && !ctrl) {
+        setState((prev) => ({ ...prev, activeTool: "rotate" }));
+      }
+      if (e.key === "s" && !ctrl) {
+        setState((prev) => ({ ...prev, activeTool: "scale" }));
+      }
+      if (e.key === "q" || e.key === "w") {
+        setState((prev) => ({ ...prev, activeTool: "select" }));
+      }
+      if (e.key === "1") {
+        setState((prev) => ({ ...prev, selectionMode: "vertex" }));
+      }
+      if (e.key === "2") {
+        setState((prev) => ({ ...prev, selectionMode: "edge" }));
+      }
+      if (e.key === "3") {
+        setState((prev) => ({ ...prev, selectionMode: "face" }));
+      }
+      if (e.key === "4") {
+        setState((prev) => ({ ...prev, selectionMode: "island" }));
+      }
+      if (ctrl && e.key === "z") {
+        e.preventDefault();
+        undo();
+      }
+      if (ctrl && (e.key === "y" || e.shiftKey && e.key === "z")) {
+        e.preventDefault();
+        redo();
+      }
+      if (e.key === "a" && !ctrl) {
+        if (meshData) {
+          for (const v of meshData.vertices.values()) {
+            v.selected = true;
+          }
+          setMeshData({ ...meshData });
         }
-        pushUndo();
-        const settings = {
-            type,
-            scale: { x: 1, y: 1, z: 1 },
-            offset: { x: 0, y: 0, z: 0 },
-            rotation: { x: 0, y: 0, z: 0 },
-        };
-        applyProjection(geometry, settings);
-        const newData = extractUVMeshData(geometry, state.activeChannel);
-        setMeshData(newData);
-        onUVChange === null || onUVChange === void 0 ? void 0 : onUVChange(geometry);
-    }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
-    const toolbarSlot = showToolbar ? (jsxs("div", { className: styles.toolbar, children: [jsx("div", { className: styles.toolGroup, children: UV_TOOLS.slice(0, 5).map((tool) => (jsx("button", { className: `${styles.toolBtn} ${state.activeTool === tool ? styles.active : ''}`, onClick: () => setState((prev) => ({ ...prev, activeTool: tool })), title: tool, disabled: readOnly, children: tool[0].toUpperCase() }, tool))) }), jsx("div", { className: styles.toolGroup, children: UV_SELECTION_MODES.map((mode) => (jsx("button", { className: `${styles.toolBtn} ${state.selectionMode === mode ? styles.active : ''}`, onClick: () => setState((prev) => ({ ...prev, selectionMode: mode })), title: mode, children: mode[0].toUpperCase() }, mode))) }), jsxs("div", { className: styles.toolGroup, children: [jsx("button", { className: styles.toolBtn, onClick: handlePack, disabled: readOnly || !meshData, title: t('uvEditor.packIslandsP', 'Pack Islands (P)'), children: t('uvEditor.pack', 'Pack') }), jsx("button", { className: styles.toolBtn, onClick: handleRelax, disabled: readOnly || !meshData, title: t('uvEditor.relaxUvs', 'Relax UVs'), children: t('uvEditor.relax', 'Relax') })] }), jsx("div", { className: styles.toolGroup, children: jsxs("select", { className: styles.select, onChange: (e) => handleProject(e.target.value), disabled: readOnly || !meshData, defaultValue: "", children: [jsx("option", { value: "", disabled: true, children: t('uvEditor.project', 'Project...') }), PROJECTION_TYPES.map((type) => (jsx("option", { value: type, children: type }, type)))] }) }), jsx("div", { className: styles.toolGroup, children: jsx("select", { className: styles.select, value: state.activeChannel, onChange: (e) => setState((prev) => ({
-                        ...prev,
-                        activeChannel: e.target.value,
-                    })), children: UV_CHANNELS.map((ch) => (jsx("option", { value: ch, children: ch.toUpperCase() }, ch))) }) }), jsxs("div", { className: styles.toolGroup, children: [jsx("button", { className: styles.toolBtn, onClick: undo, disabled: undoStack.length === 0, title: t('uvEditor.undoCtrlZ', 'Undo (Ctrl+Z)'), "aria-label": t('uvEditor.undo', 'Undo'), children: jsx(NiceIcon, { name: "arrow-left", size: 16 }) }), jsx("button", { className: styles.toolBtn, onClick: redo, disabled: redoStack.length === 0, title: t('uvEditor.redoCtrlY', 'Redo (Ctrl+Y)'), "aria-label": t('uvEditor.redo', 'Redo'), children: jsx(NiceIcon, { name: "arrow-right", size: 16 }) })] })] })) : undefined;
-    const sidebarSlot = showSidebar && meshData ? (jsxs("div", { className: styles.sidebar, children: [jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: t('uvEditor.display', 'Display') }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showGrid, onChange: (e) => setState((prev) => ({
-                                    ...prev,
-                                    display: { ...prev.display, showGrid: e.target.checked },
-                                })) }), t('uvEditor.showGrid', 'Show Grid')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showTexture, onChange: (e) => setState((prev) => ({
-                                    ...prev,
-                                    display: { ...prev.display, showTexture: e.target.checked },
-                                })) }), t('uvEditor.showTexture', 'Show Texture')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showSeams, onChange: (e) => setState((prev) => ({
-                                    ...prev,
-                                    display: { ...prev.display, showSeams: e.target.checked },
-                                })) }), t('uvEditor.showSeams', 'Show Seams')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showDistortion, onChange: (e) => setState((prev) => ({
-                                    ...prev,
-                                    display: { ...prev.display, showDistortion: e.target.checked },
-                                })) }), t('uvEditor.showDistortion', 'Show Distortion')] }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.display.showIslandBounds, onChange: (e) => setState((prev) => ({
-                                    ...prev,
-                                    display: { ...prev.display, showIslandBounds: e.target.checked },
-                                })) }), t('uvEditor.showIslandBounds', 'Show Island Bounds')] })] }), jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: t('uvEditor.statistics', 'Statistics') }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: t('uvEditor.vertices', 'Vertices:') }), jsx("span", { children: meshData.vertices.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: t('uvEditor.faces', 'Faces:') }), jsx("span", { children: meshData.faces.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: t('uvEditor.islands', 'Islands:') }), jsx("span", { children: meshData.islands.size })] }), jsxs("div", { className: styles.stat, children: [jsx("span", { children: t('uvEditor.selected', 'Selected:') }), jsx("span", { children: getSelectedVertices(meshData).length })] })] }), jsxs("div", { className: styles.panel, children: [jsx("h4", { className: styles.panelTitle, children: t('uvEditor.snapping', 'Snapping') }), jsxs("label", { className: styles.checkbox, children: [jsx("input", { type: "checkbox", checked: state.snapping, onChange: (e) => setState((prev) => ({
-                                    ...prev,
-                                    snapping: e.target.checked,
-                                })) }), t('uvEditor.enableSnapping', 'Enable Snapping')] }), jsxs("label", { className: styles.rangeLabel, children: [t('uvEditor.snapSize', 'Snap Size: {snapSize}').replace('{snapSize}', String(state.snapSize.toFixed(4))), jsx("input", { type: "range", min: "0.001", max: "0.25", step: "0.001", value: state.snapSize, onChange: (e) => setState((prev) => ({
-                                    ...prev,
-                                    snapSize: parseFloat(e.target.value),
-                                })) })] })] })] })) : undefined;
-    return (jsxs("div", { style: { position: 'relative', width, height }, children: [jsx("span", { style: { position: 'absolute', top: 6, right: 6, zIndex: 30 }, children: jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UV_EDITOR_TOUR) }) }), jsx(NiceAppShell, { className: `nice-uv-editor ${styles.uvEditor} ${className !== null && className !== void 0 ? className : ''}`, flush: true, toolbar: toolbarSlot, rightSidebar: sidebarSlot, statusBar: jsxs("div", { className: styles.statusBar, children: [jsx("span", { children: t('uvEditor.tool', 'Tool: {activeTool}').replace('{activeTool}', String(state.activeTool)) }), jsx("span", { children: t('uvEditor.mode', 'Mode: {selectionMode}').replace('{selectionMode}', String(state.selectionMode)) }), jsx("span", { children: t('uvEditor.zoom', 'Zoom: {zoom}%').replace('{zoom}', String((state.zoom * 100).toFixed(0))) }), jsx("span", { children: t('uvEditor.channel', 'Channel: {activeChannel}').replace('{activeChannel}', String(state.activeChannel)) })] }), children: jsxs("div", { ref: containerRef, className: styles.viewport, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onWheel: handleWheel, children: [jsx("canvas", { ref: canvasRef, className: styles.canvas }), !meshData && (jsx("div", { className: styles.noGeometry, children: t('uvEditor.noGeometrySelected', 'No geometry selected') }))] }) })] }));
+      }
+      if (e.key === "Escape") {
+        if (meshData) {
+          for (const v of meshData.vertices.values()) {
+            v.selected = false;
+          }
+          for (const e2 of meshData.edges.values()) {
+            e2.selected = false;
+          }
+          for (const f of meshData.faces.values()) {
+            f.selected = false;
+          }
+          for (const i of meshData.islands.values()) {
+            i.selected = false;
+          }
+          setMeshData({ ...meshData });
+        }
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [readOnly, meshData, undo, redo]);
+  const handlePack = useCallback(() => {
+    if (!meshData || readOnly) {
+      return;
+    }
+    pushUndo();
+    const result = packIslands(meshData, DEFAULT_PACKING_OPTIONS);
+    applyIslandTransforms(meshData, result.transforms);
+    if (geometry) {
+      syncToGeometry(meshData, geometry, state.activeChannel);
+      onUVChange?.(geometry);
+    }
+    setMeshData({ ...meshData });
+  }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
+  const handleRelax = useCallback(() => {
+    if (!meshData || readOnly) {
+      return;
+    }
+    pushUndo();
+    const selectedVerts = new Set(
+      Array.from(meshData.vertices.values()).filter((v) => v.selected).map((v) => v.id)
+    );
+    relaxUVs(meshData, DEFAULT_RELAX_OPTIONS, selectedVerts.size > 0 ? selectedVerts : void 0);
+    if (geometry) {
+      syncToGeometry(meshData, geometry, state.activeChannel);
+      onUVChange?.(geometry);
+    }
+    setMeshData({ ...meshData });
+  }, [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]);
+  const handleProject = useCallback(
+    (type) => {
+      if (!meshData || !geometry || readOnly) {
+        return;
+      }
+      pushUndo();
+      const settings = {
+        type,
+        scale: { x: 1, y: 1, z: 1 },
+        offset: { x: 0, y: 0, z: 0 },
+        rotation: { x: 0, y: 0, z: 0 }
+      };
+      applyProjection(geometry, settings);
+      const newData = extractUVMeshData(geometry, state.activeChannel);
+      setMeshData(newData);
+      onUVChange?.(geometry);
+    },
+    [meshData, geometry, state.activeChannel, readOnly, pushUndo, onUVChange]
+  );
+  const toolbarSlot = showToolbar ? /* @__PURE__ */ jsxs("div", { className: styles.toolbar, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.toolGroup, children: UV_TOOLS.slice(0, 5).map((tool) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `${styles.toolBtn} ${state.activeTool === tool ? styles.active : ""}`,
+        onClick: () => setState((prev) => ({ ...prev, activeTool: tool })),
+        title: tool,
+        disabled: readOnly,
+        children: tool[0].toUpperCase()
+      },
+      tool
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolGroup, children: UV_SELECTION_MODES.map((mode) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: `${styles.toolBtn} ${state.selectionMode === mode ? styles.active : ""}`,
+        onClick: () => setState((prev) => ({ ...prev, selectionMode: mode })),
+        title: mode,
+        children: mode[0].toUpperCase()
+      },
+      mode
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: styles.toolBtn,
+          onClick: handlePack,
+          disabled: readOnly || !meshData,
+          title: t("uvEditor.packIslandsP", "Pack Islands (P)"),
+          children: t("uvEditor.pack", "Pack")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: styles.toolBtn,
+          onClick: handleRelax,
+          disabled: readOnly || !meshData,
+          title: t("uvEditor.relaxUvs", "Relax UVs"),
+          children: t("uvEditor.relax", "Relax")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolGroup, children: /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: styles.select,
+        onChange: (e) => handleProject(e.target.value),
+        disabled: readOnly || !meshData,
+        defaultValue: "",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: t("uvEditor.project", "Project...") }),
+          PROJECTION_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: type }, type))
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: styles.toolGroup, children: /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: styles.select,
+        value: state.activeChannel,
+        onChange: (e) => setState((prev) => ({
+          ...prev,
+          activeChannel: e.target.value
+        })),
+        children: UV_CHANNELS.map((ch) => /* @__PURE__ */ jsx("option", { value: ch, children: ch.toUpperCase() }, ch))
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: styles.toolGroup, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: styles.toolBtn,
+          onClick: undo,
+          disabled: undoStack.length === 0,
+          title: t("uvEditor.undoCtrlZ", "Undo (Ctrl+Z)"),
+          "aria-label": t("uvEditor.undo", "Undo"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-left", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: styles.toolBtn,
+          onClick: redo,
+          disabled: redoStack.length === 0,
+          title: t("uvEditor.redoCtrlY", "Redo (Ctrl+Y)"),
+          "aria-label": t("uvEditor.redo", "Redo"),
+          children: /* @__PURE__ */ jsx(NiceIcon, { name: "arrow-right", size: 16 })
+        }
+      )
+    ] })
+  ] }) : void 0;
+  const sidebarSlot = showSidebar && meshData ? /* @__PURE__ */ jsxs("div", { className: styles.sidebar, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.panel, children: [
+      /* @__PURE__ */ jsx("h4", { className: styles.panelTitle, children: t("uvEditor.display", "Display") }),
+      /* @__PURE__ */ jsxs("label", { className: styles.checkbox, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: state.display.showGrid,
+            onChange: (e) => setState((prev) => ({
+              ...prev,
+              display: { ...prev.display, showGrid: e.target.checked }
+            }))
+          }
+        ),
+        t("uvEditor.showGrid", "Show Grid")
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: styles.checkbox, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: state.display.showTexture,
+            onChange: (e) => setState((prev) => ({
+              ...prev,
+              display: { ...prev.display, showTexture: e.target.checked }
+            }))
+          }
+        ),
+        t("uvEditor.showTexture", "Show Texture")
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: styles.checkbox, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: state.display.showSeams,
+            onChange: (e) => setState((prev) => ({
+              ...prev,
+              display: { ...prev.display, showSeams: e.target.checked }
+            }))
+          }
+        ),
+        t("uvEditor.showSeams", "Show Seams")
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: styles.checkbox, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: state.display.showDistortion,
+            onChange: (e) => setState((prev) => ({
+              ...prev,
+              display: { ...prev.display, showDistortion: e.target.checked }
+            }))
+          }
+        ),
+        t("uvEditor.showDistortion", "Show Distortion")
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: styles.checkbox, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: state.display.showIslandBounds,
+            onChange: (e) => setState((prev) => ({
+              ...prev,
+              display: { ...prev.display, showIslandBounds: e.target.checked }
+            }))
+          }
+        ),
+        t("uvEditor.showIslandBounds", "Show Island Bounds")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.panel, children: [
+      /* @__PURE__ */ jsx("h4", { className: styles.panelTitle, children: t("uvEditor.statistics", "Statistics") }),
+      /* @__PURE__ */ jsxs("div", { className: styles.stat, children: [
+        /* @__PURE__ */ jsx("span", { children: t("uvEditor.vertices", "Vertices:") }),
+        /* @__PURE__ */ jsx("span", { children: meshData.vertices.size })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.stat, children: [
+        /* @__PURE__ */ jsx("span", { children: t("uvEditor.faces", "Faces:") }),
+        /* @__PURE__ */ jsx("span", { children: meshData.faces.size })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.stat, children: [
+        /* @__PURE__ */ jsx("span", { children: t("uvEditor.islands", "Islands:") }),
+        /* @__PURE__ */ jsx("span", { children: meshData.islands.size })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.stat, children: [
+        /* @__PURE__ */ jsx("span", { children: t("uvEditor.selected", "Selected:") }),
+        /* @__PURE__ */ jsx("span", { children: getSelectedVertices(meshData).length })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: styles.panel, children: [
+      /* @__PURE__ */ jsx("h4", { className: styles.panelTitle, children: t("uvEditor.snapping", "Snapping") }),
+      /* @__PURE__ */ jsxs("label", { className: styles.checkbox, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: state.snapping,
+            onChange: (e) => setState((prev) => ({
+              ...prev,
+              snapping: e.target.checked
+            }))
+          }
+        ),
+        t("uvEditor.enableSnapping", "Enable Snapping")
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: styles.rangeLabel, children: [
+        t("uvEditor.snapSize", "Snap Size: {snapSize}").replace(
+          "{snapSize}",
+          String(state.snapSize.toFixed(4))
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "range",
+            min: "0.001",
+            max: "0.25",
+            step: "0.001",
+            value: state.snapSize,
+            onChange: (e) => setState((prev) => ({
+              ...prev,
+              snapSize: parseFloat(e.target.value)
+            }))
+          }
+        )
+      ] })
+    ] })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", width, height }, children: [
+    /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 6, right: 6, zIndex: 30 }, children: /* @__PURE__ */ jsx(NiceTutorialButton, { steps: resolveTutorial(tutorial, UV_EDITOR_TOUR) }) }),
+    /* @__PURE__ */ jsx(
+      NiceAppShell,
+      {
+        className: `nice-uv-editor ${styles.uvEditor} ${className ?? ""}`,
+        flush: true,
+        toolbar: toolbarSlot,
+        rightSidebar: sidebarSlot,
+        statusBar: /* @__PURE__ */ jsxs("div", { className: styles.statusBar, children: [
+          /* @__PURE__ */ jsx("span", { children: t("uvEditor.tool", "Tool: {activeTool}").replace(
+            "{activeTool}",
+            String(state.activeTool)
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: t("uvEditor.mode", "Mode: {selectionMode}").replace(
+            "{selectionMode}",
+            String(state.selectionMode)
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: t("uvEditor.zoom", "Zoom: {zoom}%").replace(
+            "{zoom}",
+            String((state.zoom * 100).toFixed(0))
+          ) }),
+          /* @__PURE__ */ jsx("span", { children: t("uvEditor.channel", "Channel: {activeChannel}").replace(
+            "{activeChannel}",
+            String(state.activeChannel)
+          ) })
+        ] }),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: styles.viewport,
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseUp,
+            onWheel: handleWheel,
+            children: [
+              /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: styles.canvas }),
+              !meshData && /* @__PURE__ */ jsx("div", { className: styles.noGeometry, children: t("uvEditor.noGeometrySelected", "No geometry selected") })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  NiceUVEditor
 };
-
-export { NiceUVEditor };