@nice2dev/ui-3d 1.3.15 → 1.3.16

package/dist/esm/rendering/NiceRenderExport.js

@@ -1,343 +1,435 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { NiceIcon } from '@nice2dev/ui';
-import { useState, useCallback } from 'react';
-import * as THREE from 'three';
-import { useNiceTranslation } from '../core/i18n.js';
-
-/* ── EXR writer (minimal, uncompressed) ── */
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { NiceIcon } from "@nice2dev/ui";
+import { useState, useCallback } from "react";
+import * as THREE from "three";
+import { useNiceTranslation } from "../core/i18n.js";
 function writeEXR(width, height, floatData) {
-    var _a;
-    // Minimal OpenEXR file: magic + version + header + scanlines
-    const channels = 4; // RGBA
-    const channelNames = ['A', 'B', 'G', 'R']; // EXR stores in alphabetical order
-    // Helper to write string
-    function stringBytes(s) {
-        const bytes = new Uint8Array(s.length + 1);
-        for (let i = 0; i < s.length; i++) {
-            bytes[i] = s.charCodeAt(i);
-        }
-        bytes[s.length] = 0;
-        return bytes;
+  const channels = 4;
+  const channelNames = ["A", "B", "G", "R"];
+  function stringBytes(s) {
+    const bytes = new Uint8Array(s.length + 1);
+    for (let i = 0; i < s.length; i++) {
+      bytes[i] = s.charCodeAt(i);
     }
-    // Build the raw pixel data (scanline order, bottom-to-top for EXR)
-    const scanlineDataSize = width * channels * 4; // per scanline, float32 per channel
-    const totalPixelData = height * (scanlineDataSize + 8); // +8 for y-coord and size per scanline
-    // Instead of building a full EXR, we'll use a simpler approach:
-    // Create the EXR as a blob with proper header
-    const headerSize = 512; // conservative estimate
-    const buffer = new ArrayBuffer(headerSize + totalPixelData);
-    const view = new DataView(buffer);
-    let offset = 0;
-    // Magic number
-    view.setUint32(offset, 20000630, true);
-    offset += 4;
-    // Version (2, single-part, scanline)
+    bytes[s.length] = 0;
+    return bytes;
+  }
+  const scanlineDataSize = width * channels * 4;
+  const totalPixelData = height * (scanlineDataSize + 8);
+  const headerSize = 512;
+  const buffer = new ArrayBuffer(headerSize + totalPixelData);
+  const view = new DataView(buffer);
+  let offset = 0;
+  view.setUint32(offset, 20000630, true);
+  offset += 4;
+  view.setUint32(offset, 2, true);
+  offset += 4;
+  const channelsStr = stringBytes("channels");
+  new Uint8Array(buffer, offset, channelsStr.length).set(channelsStr);
+  offset += channelsStr.length;
+  const chlistStr = stringBytes("chlist");
+  new Uint8Array(buffer, offset, chlistStr.length).set(chlistStr);
+  offset += chlistStr.length;
+  const channelListStart = offset;
+  view.setUint32(offset, 0, true);
+  offset += 4;
+  const channelListDataStart = offset;
+  for (const name of channelNames) {
+    const nameBytes = stringBytes(name);
+    new Uint8Array(buffer, offset, nameBytes.length).set(nameBytes);
+    offset += nameBytes.length;
     view.setUint32(offset, 2, true);
     offset += 4;
-    // Write attribute: channels
-    const channelsStr = stringBytes('channels');
-    new Uint8Array(buffer, offset, channelsStr.length).set(channelsStr);
-    offset += channelsStr.length;
-    const chlistStr = stringBytes('chlist');
-    new Uint8Array(buffer, offset, chlistStr.length).set(chlistStr);
-    offset += chlistStr.length;
-    // Channel list size
-    const channelListStart = offset;
-    view.setUint32(offset, 0, true);
-    offset += 4; // placeholder for size
-    const channelListDataStart = offset;
-    for (const name of channelNames) {
-        const nameBytes = stringBytes(name);
-        new Uint8Array(buffer, offset, nameBytes.length).set(nameBytes);
-        offset += nameBytes.length;
-        view.setUint32(offset, 2, true);
-        offset += 4; // FLOAT pixel type
-        view.setUint8(offset, 0);
-        offset += 1; // pLinear
-        offset += 3; // reserved
-        view.setInt32(offset, 1, true);
-        offset += 4; // xSampling
-        view.setInt32(offset, 1, true);
-        offset += 4; // ySampling
-    }
-    view.setUint8(offset, 0);
-    offset += 1; // null terminate channel list
-    // Update channel list size
-    view.setUint32(channelListStart, offset - channelListDataStart, true);
-    // compression attribute
-    const compStr = stringBytes('compression');
-    new Uint8Array(buffer, offset, compStr.length).set(compStr);
-    offset += compStr.length;
-    const compTypeStr = stringBytes('compression');
-    new Uint8Array(buffer, offset, compTypeStr.length).set(compTypeStr);
-    offset += compTypeStr.length;
-    view.setUint32(offset, 1, true);
-    offset += 4; // size
     view.setUint8(offset, 0);
-    offset += 1; // NO_COMPRESSION
-    // dataWindow attribute
-    const dwStr = stringBytes('dataWindow');
-    new Uint8Array(buffer, offset, dwStr.length).set(dwStr);
-    offset += dwStr.length;
-    const box2iStr = stringBytes('box2i');
-    new Uint8Array(buffer, offset, box2iStr.length).set(box2iStr);
-    offset += box2iStr.length;
-    view.setUint32(offset, 16, true);
-    offset += 4; // size
-    view.setInt32(offset, 0, true);
-    offset += 4; // xMin
-    view.setInt32(offset, 0, true);
-    offset += 4; // yMin
-    view.setInt32(offset, width - 1, true);
-    offset += 4; // xMax
-    view.setInt32(offset, height - 1, true);
-    offset += 4; // yMax
-    // displayWindow attribute
-    const dispStr = stringBytes('displayWindow');
-    new Uint8Array(buffer, offset, dispStr.length).set(dispStr);
-    offset += dispStr.length;
-    new Uint8Array(buffer, offset, box2iStr.length).set(box2iStr);
-    offset += box2iStr.length;
-    view.setUint32(offset, 16, true);
-    offset += 4;
-    view.setInt32(offset, 0, true);
-    offset += 4;
-    view.setInt32(offset, 0, true);
-    offset += 4;
-    view.setInt32(offset, width - 1, true);
-    offset += 4;
-    view.setInt32(offset, height - 1, true);
+    offset += 1;
+    offset += 3;
+    view.setInt32(offset, 1, true);
     offset += 4;
-    // lineOrder attribute
-    const loStr = stringBytes('lineOrder');
-    new Uint8Array(buffer, offset, loStr.length).set(loStr);
-    offset += loStr.length;
-    const loTypeStr = stringBytes('lineOrder');
-    new Uint8Array(buffer, offset, loTypeStr.length).set(loTypeStr);
-    offset += loTypeStr.length;
-    view.setUint32(offset, 1, true);
+    view.setInt32(offset, 1, true);
     offset += 4;
-    view.setUint8(offset, 0);
-    offset += 1; // INCREASING_Y
-    // pixelAspectRatio
-    const parStr = stringBytes('pixelAspectRatio');
-    new Uint8Array(buffer, offset, parStr.length).set(parStr);
-    offset += parStr.length;
-    const floatStr = stringBytes('float');
-    new Uint8Array(buffer, offset, floatStr.length).set(floatStr);
-    offset += floatStr.length;
-    view.setUint32(offset, 4, true);
+  }
+  view.setUint8(offset, 0);
+  offset += 1;
+  view.setUint32(channelListStart, offset - channelListDataStart, true);
+  const compStr = stringBytes("compression");
+  new Uint8Array(buffer, offset, compStr.length).set(compStr);
+  offset += compStr.length;
+  const compTypeStr = stringBytes("compression");
+  new Uint8Array(buffer, offset, compTypeStr.length).set(compTypeStr);
+  offset += compTypeStr.length;
+  view.setUint32(offset, 1, true);
+  offset += 4;
+  view.setUint8(offset, 0);
+  offset += 1;
+  const dwStr = stringBytes("dataWindow");
+  new Uint8Array(buffer, offset, dwStr.length).set(dwStr);
+  offset += dwStr.length;
+  const box2iStr = stringBytes("box2i");
+  new Uint8Array(buffer, offset, box2iStr.length).set(box2iStr);
+  offset += box2iStr.length;
+  view.setUint32(offset, 16, true);
+  offset += 4;
+  view.setInt32(offset, 0, true);
+  offset += 4;
+  view.setInt32(offset, 0, true);
+  offset += 4;
+  view.setInt32(offset, width - 1, true);
+  offset += 4;
+  view.setInt32(offset, height - 1, true);
+  offset += 4;
+  const dispStr = stringBytes("displayWindow");
+  new Uint8Array(buffer, offset, dispStr.length).set(dispStr);
+  offset += dispStr.length;
+  new Uint8Array(buffer, offset, box2iStr.length).set(box2iStr);
+  offset += box2iStr.length;
+  view.setUint32(offset, 16, true);
+  offset += 4;
+  view.setInt32(offset, 0, true);
+  offset += 4;
+  view.setInt32(offset, 0, true);
+  offset += 4;
+  view.setInt32(offset, width - 1, true);
+  offset += 4;
+  view.setInt32(offset, height - 1, true);
+  offset += 4;
+  const loStr = stringBytes("lineOrder");
+  new Uint8Array(buffer, offset, loStr.length).set(loStr);
+  offset += loStr.length;
+  const loTypeStr = stringBytes("lineOrder");
+  new Uint8Array(buffer, offset, loTypeStr.length).set(loTypeStr);
+  offset += loTypeStr.length;
+  view.setUint32(offset, 1, true);
+  offset += 4;
+  view.setUint8(offset, 0);
+  offset += 1;
+  const parStr = stringBytes("pixelAspectRatio");
+  new Uint8Array(buffer, offset, parStr.length).set(parStr);
+  offset += parStr.length;
+  const floatStr = stringBytes("float");
+  new Uint8Array(buffer, offset, floatStr.length).set(floatStr);
+  offset += floatStr.length;
+  view.setUint32(offset, 4, true);
+  offset += 4;
+  view.setFloat32(offset, 1, true);
+  offset += 4;
+  view.setUint8(offset, 0);
+  offset += 1;
+  const tableOffset = offset;
+  offset += height * 8;
+  for (let y = 0; y < height; y++) {
+    const scanView = new DataView(buffer, tableOffset + y * 8, 8);
+    scanView.setUint32(0, offset, true);
+    scanView.setUint32(4, 0, true);
+    view.setInt32(offset, y, true);
     offset += 4;
-    view.setFloat32(offset, 1.0, true);
+    view.setUint32(offset, scanlineDataSize, true);
     offset += 4;
-    // End of header
-    view.setUint8(offset, 0);
-    offset += 1;
-    // Scanline offset table
-    const tableOffset = offset;
-    offset += height * 8; // uint64 per scanline
-    // Write scanlines (bottom to top not needed for INCREASING_Y)
-    for (let y = 0; y < height; y++) {
-        // Offset table entry
-        const scanView = new DataView(buffer, tableOffset + y * 8, 8);
-        // Write as two 32-bit values (little-endian uint64)
-        scanView.setUint32(0, offset, true);
-        scanView.setUint32(4, 0, true);
-        // y-coordinate
-        view.setInt32(offset, y, true);
-        offset += 4;
-        // pixel data size
-        view.setUint32(offset, scanlineDataSize, true);
-        offset += 4;
-        // Pixel data (interleaved channels in EXR alphabetical order: A, B, G, R)
-        for (let ch = 0; ch < channels; ch++) {
-            const channelIdx = ch === 0 ? 3 : ch === 1 ? 2 : ch === 2 ? 1 : 0; // A,B,G,R → RGBA mapping
-            for (let x = 0; x < width; x++) {
-                const srcIdx = (y * width + x) * 4 + channelIdx;
-                if (offset + 4 <= buffer.byteLength) {
-                    view.setFloat32(offset, (_a = floatData[srcIdx]) !== null && _a !== void 0 ? _a : 0, true);
-                }
-                offset += 4;
-            }
+    for (let ch = 0; ch < channels; ch++) {
+      const channelIdx = ch === 0 ? 3 : ch === 1 ? 2 : ch === 2 ? 1 : 0;
+      for (let x = 0; x < width; x++) {
+        const srcIdx = (y * width + x) * 4 + channelIdx;
+        if (offset + 4 <= buffer.byteLength) {
+          view.setFloat32(offset, floatData[srcIdx] ?? 0, true);
         }
+        offset += 4;
+      }
     }
-    return buffer.slice(0, offset);
+  }
+  return buffer.slice(0, offset);
 }
-/* ── Hook ── */
 const PRESET_SIZES = [
-    { label: '720p', width: 1280, height: 720 },
-    { label: '1080p', width: 1920, height: 1080 },
-    { label: '2K', width: 2560, height: 1440 },
-    { label: '4K', width: 3840, height: 2160 },
-    { label: '8K', width: 7680, height: 4320 },
-    { label: 'Square 1K', width: 1024, height: 1024 },
-    { label: 'Square 2K', width: 2048, height: 2048 },
-    { label: 'Square 4K', width: 4096, height: 4096 },
+  { label: "720p", width: 1280, height: 720 },
+  { label: "1080p", width: 1920, height: 1080 },
+  { label: "2K", width: 2560, height: 1440 },
+  { label: "4K", width: 3840, height: 2160 },
+  { label: "8K", width: 7680, height: 4320 },
+  { label: "Square 1K", width: 1024, height: 1024 },
+  { label: "Square 2K", width: 2048, height: 2048 },
+  { label: "Square 4K", width: 4096, height: 4096 }
 ];
 const DEFAULT_CONFIG = {
-    width: 1920,
-    height: 1080,
-    format: 'png',
-    quality: 0.92,
-    // A THREE.js render target / image encoder, not CSS: var() is not a colour here and
-    // resolves to nothing, so the exported frame needs the literal (cf. 344d1b2).
-    backgroundColor: '#000000',
-    backgroundMode: 'transparent',
-    // audit-allow: literal-color +2 — the default sky gradient of the rendered image
-    gradientTop: '#87CEEB',
-    gradientBottom: '#2E4057',
-    samples: 1,
-    includeAlpha: true,
+  width: 1920,
+  height: 1080,
+  format: "png",
+  quality: 0.92,
+  // A THREE.js render target / image encoder, not CSS: var() is not a colour here and
+  // resolves to nothing, so the exported frame needs the literal (cf. 344d1b2).
+  backgroundColor: "#000000",
+  backgroundMode: "transparent",
+  // audit-allow: literal-color +2 — the default sky gradient of the rendered image
+  gradientTop: "#87CEEB",
+  gradientBottom: "#2E4057",
+  samples: 1,
+  includeAlpha: true
 };
 function useRenderExport(renderer, scene, camera) {
-    const [config, setConfigState] = useState(DEFAULT_CONFIG);
-    const [isRendering, setIsRendering] = useState(false);
-    const setConfig = useCallback((partial) => {
-        setConfigState((prev) => ({ ...prev, ...partial }));
-    }, []);
-    const render = useCallback(async () => {
-        if (!renderer || !scene || !camera) {
-            return null;
+  const [config, setConfigState] = useState(DEFAULT_CONFIG);
+  const [isRendering, setIsRendering] = useState(false);
+  const setConfig = useCallback((partial) => {
+    setConfigState((prev) => ({ ...prev, ...partial }));
+  }, []);
+  const render = useCallback(async () => {
+    if (!renderer || !scene || !camera) {
+      return null;
+    }
+    setIsRendering(true);
+    try {
+      const { width, height, format, samples } = config;
+      const renderWidth = width * samples;
+      const renderHeight = height * samples;
+      const originalSize = new THREE.Vector2();
+      renderer.getSize(originalSize);
+      const originalPixelRatio = renderer.getPixelRatio();
+      const originalBackground = scene.background;
+      const originalAspect = camera.aspect;
+      const renderTarget = new THREE.WebGLRenderTarget(renderWidth, renderHeight, {
+        minFilter: THREE.LinearFilter,
+        magFilter: THREE.LinearFilter,
+        format: THREE.RGBAFormat,
+        type: format === "exr" ? THREE.FloatType : THREE.UnsignedByteType,
+        colorSpace: THREE.SRGBColorSpace
+      });
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+      switch (config.backgroundMode) {
+        case "transparent":
+          scene.background = null;
+          break;
+        case "color":
+          scene.background = new THREE.Color(config.backgroundColor);
+          break;
+        case "gradient": {
+          scene.background = new THREE.Color(config.gradientTop);
+          break;
         }
-        setIsRendering(true);
-        try {
-            const { width, height, format, samples } = config;
-            const renderWidth = width * samples;
-            const renderHeight = height * samples;
-            // Save current state
-            const originalSize = new THREE.Vector2();
-            renderer.getSize(originalSize);
-            const originalPixelRatio = renderer.getPixelRatio();
-            const originalBackground = scene.background;
-            const originalAspect = camera.aspect;
-            // Setup render target
-            const renderTarget = new THREE.WebGLRenderTarget(renderWidth, renderHeight, {
-                minFilter: THREE.LinearFilter,
-                magFilter: THREE.LinearFilter,
-                format: THREE.RGBAFormat,
-                type: format === 'exr' ? THREE.FloatType : THREE.UnsignedByteType,
-                colorSpace: THREE.SRGBColorSpace,
-            });
-            // Set camera aspect
-            camera.aspect = width / height;
-            camera.updateProjectionMatrix();
-            // Set background
-            switch (config.backgroundMode) {
-                case 'transparent':
-                    scene.background = null;
-                    break;
-                case 'color':
-                    scene.background = new THREE.Color(config.backgroundColor);
-                    break;
-                case 'gradient': {
-                    // Render gradient as a backdrop plane — simplified
-                    scene.background = new THREE.Color(config.gradientTop);
-                    break;
-                }
-                case 'scene':
-                    // Keep current background
-                    break;
+        case "scene":
+          break;
+      }
+      renderer.setRenderTarget(renderTarget);
+      renderer.setPixelRatio(1);
+      renderer.setSize(renderWidth, renderHeight, false);
+      renderer.setClearColor(0, config.backgroundMode === "transparent" ? 0 : 1);
+      renderer.clear();
+      renderer.render(scene, camera);
+      let blob = null;
+      if (format === "exr") {
+        const floatBuffer = new Float32Array(renderWidth * renderHeight * 4);
+        renderer.readRenderTargetPixels(renderTarget, 0, 0, renderWidth, renderHeight, floatBuffer);
+        const exrBuffer = writeEXR(renderWidth, renderHeight, floatBuffer);
+        blob = new Blob([exrBuffer], { type: "image/x-exr" });
+      } else {
+        const pixelBuffer = new Uint8Array(renderWidth * renderHeight * 4);
+        renderer.readRenderTargetPixels(renderTarget, 0, 0, renderWidth, renderHeight, pixelBuffer);
+        const exportCanvas = document.createElement("canvas");
+        exportCanvas.width = width;
+        exportCanvas.height = height;
+        const ctx = exportCanvas.getContext("2d");
+        const srcCanvas = document.createElement("canvas");
+        srcCanvas.width = renderWidth;
+        srcCanvas.height = renderHeight;
+        const srcCtx = srcCanvas.getContext("2d");
+        const imageData = srcCtx.createImageData(renderWidth, renderHeight);
+        for (let y = 0; y < renderHeight; y++) {
+          const srcRow = (renderHeight - 1 - y) * renderWidth * 4;
+          const dstRow = y * renderWidth * 4;
+          imageData.data.set(pixelBuffer.subarray(srcRow, srcRow + renderWidth * 4), dstRow);
+        }
+        srcCtx.putImageData(imageData, 0, 0);
+        ctx.drawImage(srcCanvas, 0, 0, renderWidth, renderHeight, 0, 0, width, height);
+        const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
+        blob = await new Promise((resolve) => {
+          exportCanvas.toBlob(
+            (b) => resolve(b),
+            mimeType,
+            format === "jpeg" ? config.quality : void 0
+          );
+        });
+      }
+      renderer.setRenderTarget(null);
+      renderer.setSize(originalSize.x, originalSize.y, false);
+      renderer.setPixelRatio(originalPixelRatio);
+      scene.background = originalBackground;
+      camera.aspect = originalAspect;
+      camera.updateProjectionMatrix();
+      renderTarget.dispose();
+      return blob;
+    } finally {
+      setIsRendering(false);
+    }
+  }, [renderer, scene, camera, config]);
+  return { config, setConfig, render, isRendering, presetSizes: PRESET_SIZES };
+}
+const NiceRenderExport = ({
+  renderer,
+  scene,
+  camera,
+  className = ""
+}) => {
+  const { t } = useNiceTranslation();
+  const { config, setConfig, render, isRendering, presetSizes } = useRenderExport(
+    renderer,
+    scene,
+    camera
+  );
+  const handleRender = async () => {
+    const blob = await render();
+    if (!blob) {
+      return;
+    }
+    const ext = config.format === "exr" ? "exr" : config.format === "jpeg" ? "jpg" : "png";
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.download = `render_${config.width}x${config.height}.${ext}`;
+    link.href = url;
+    link.click();
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nice-render-export ${className}`,
+      style: { display: "grid", gap: 8, fontSize: 13 },
+      children: [
+        /* @__PURE__ */ jsxs("strong", { children: [
+          /* @__PURE__ */ jsx(NiceIcon, { name: "camera", size: 14 }),
+          " ",
+          t("renderExport.renderExport", "Render Export")
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 2 }, children: presetSizes.map((p) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setConfig({ width: p.width, height: p.height }),
+            style: {
+              padding: "2px 6px",
+              fontSize: 10,
+              cursor: "pointer",
+              borderRadius: 4,
+              border: "1px solid var(--nice-border, #e2e8f0)",
+              background: config.width === p.width && config.height === p.height ? "var(--nice-color-accent, #6366f1)" : "transparent",
+              color: config.width === p.width && config.height === p.height ? "var(--nice-color-white, #fff)" : "inherit"
+            },
+            children: p.label
+          },
+          p.label
+        )) }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value: config.width,
+              min: 1,
+              max: 8192,
+              onChange: (e) => setConfig({ width: parseInt(e.target.value, 10) || 1 }),
+              style: { width: 70, padding: "3px 6px" }
             }
-            // Render
-            renderer.setRenderTarget(renderTarget);
-            renderer.setPixelRatio(1);
-            renderer.setSize(renderWidth, renderHeight, false);
-            renderer.setClearColor(0x000000, config.backgroundMode === 'transparent' ? 0 : 1);
-            renderer.clear();
-            renderer.render(scene, camera);
-            // Read pixels
-            let blob = null;
-            if (format === 'exr') {
-                const floatBuffer = new Float32Array(renderWidth * renderHeight * 4);
-                renderer.readRenderTargetPixels(renderTarget, 0, 0, renderWidth, renderHeight, floatBuffer);
-                const exrBuffer = writeEXR(renderWidth, renderHeight, floatBuffer);
-                blob = new Blob([exrBuffer], { type: 'image/x-exr' });
+          ),
+          /* @__PURE__ */ jsx("span", { children: "×" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              value: config.height,
+              min: 1,
+              max: 8192,
+              onChange: (e) => setConfig({ height: parseInt(e.target.value, 10) || 1 }),
+              style: { width: 70, padding: "3px 6px" }
             }
-            else {
-                const pixelBuffer = new Uint8Array(renderWidth * renderHeight * 4);
-                renderer.readRenderTargetPixels(renderTarget, 0, 0, renderWidth, renderHeight, pixelBuffer);
-                // Create canvas for encoding
-                const exportCanvas = document.createElement('canvas');
-                exportCanvas.width = width;
-                exportCanvas.height = height;
-                const ctx = exportCanvas.getContext('2d');
-                // If supersampled, draw to intermediate canvas first
-                const srcCanvas = document.createElement('canvas');
-                srcCanvas.width = renderWidth;
-                srcCanvas.height = renderHeight;
-                const srcCtx = srcCanvas.getContext('2d');
-                const imageData = srcCtx.createImageData(renderWidth, renderHeight);
-                // Flip Y (OpenGL → Canvas)
-                for (let y = 0; y < renderHeight; y++) {
-                    const srcRow = (renderHeight - 1 - y) * renderWidth * 4;
-                    const dstRow = y * renderWidth * 4;
-                    imageData.data.set(pixelBuffer.subarray(srcRow, srcRow + renderWidth * 4), dstRow);
-                }
-                srcCtx.putImageData(imageData, 0, 0);
-                ctx.drawImage(srcCanvas, 0, 0, renderWidth, renderHeight, 0, 0, width, height);
-                const mimeType = format === 'jpeg' ? 'image/jpeg' : 'image/png';
-                blob = await new Promise((resolve) => {
-                    exportCanvas.toBlob((b) => resolve(b), mimeType, format === 'jpeg' ? config.quality : undefined);
-                });
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("renderExport.format", "Format:"),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: config.format,
+              onChange: (e) => setConfig({ format: e.target.value }),
+              style: { width: "100%", marginTop: 2 },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "png", children: t("renderExport.pngLosslessAlpha", "PNG (lossless + alpha)") }),
+                /* @__PURE__ */ jsx("option", { value: "jpeg", children: t("renderExport.jpegLossyNoAlpha", "JPEG (lossy, no alpha)") }),
+                /* @__PURE__ */ jsx("option", { value: "exr", children: t("renderExport.exrHdrFloat", "EXR (HDR float)") })
+              ]
             }
-            // Restore state
-            renderer.setRenderTarget(null);
-            renderer.setSize(originalSize.x, originalSize.y, false);
-            renderer.setPixelRatio(originalPixelRatio);
-            scene.background = originalBackground;
-            camera.aspect = originalAspect;
-            camera.updateProjectionMatrix();
-            renderTarget.dispose();
-            return blob;
-        }
-        finally {
-            setIsRendering(false);
-        }
-    }, [renderer, scene, camera, config]);
-    return { config, setConfig, render, isRendering, presetSizes: PRESET_SIZES };
-}
-/* ── Component ── */
-const NiceRenderExport = ({ renderer, scene, camera, className = '', }) => {
-    const { t } = useNiceTranslation();
-    const { config, setConfig, render, isRendering, presetSizes } = useRenderExport(renderer, scene, camera);
-    const handleRender = async () => {
-        const blob = await render();
-        if (!blob) {
-            return;
-        }
-        const ext = config.format === 'exr' ? 'exr' : config.format === 'jpeg' ? 'jpg' : 'png';
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.download = `render_${config.width}x${config.height}.${ext}`;
-        link.href = url;
-        link.click();
-        URL.revokeObjectURL(url);
-    };
-    return (jsxs("div", { className: `nice-render-export ${className}`, style: { display: 'grid', gap: 8, fontSize: 13 }, children: [jsxs("strong", { children: [jsx(NiceIcon, { name: "camera", size: 14 }), " ", t('renderExport.renderExport', 'Render Export')] }), jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 2 }, children: presetSizes.map((p) => (jsx("button", { type: "button", onClick: () => setConfig({ width: p.width, height: p.height }), style: {
-                        padding: '2px 6px',
-                        fontSize: 10,
-                        cursor: 'pointer',
-                        borderRadius: 4,
-                        border: '1px solid var(--nice-border, #e2e8f0)',
-                        background: config.width === p.width && config.height === p.height
-                            ? 'var(--nice-color-accent, #6366f1)'
-                            : 'transparent',
-                        color: config.width === p.width && config.height === p.height
-                            ? 'var(--nice-color-white, #fff)'
-                            : 'inherit',
-                    }, children: p.label }, p.label))) }), jsxs("div", { style: { display: 'flex', gap: 4, alignItems: 'center' }, children: [jsx("input", { type: "number", value: config.width, min: 1, max: 8192, onChange: (e) => setConfig({ width: parseInt(e.target.value, 10) || 1 }), style: { width: 70, padding: '3px 6px' } }), jsx("span", { children: "\u00D7" }), jsx("input", { type: "number", value: config.height, min: 1, max: 8192, onChange: (e) => setConfig({ height: parseInt(e.target.value, 10) || 1 }), style: { width: 70, padding: '3px 6px' } })] }), jsxs("label", { children: [t('renderExport.format', 'Format:'), jsxs("select", { value: config.format, onChange: (e) => setConfig({ format: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "png", children: t('renderExport.pngLosslessAlpha', 'PNG (lossless + alpha)') }), jsx("option", { value: "jpeg", children: t('renderExport.jpegLossyNoAlpha', 'JPEG (lossy, no alpha)') }), jsx("option", { value: "exr", children: t('renderExport.exrHdrFloat', 'EXR (HDR float)') })] })] }), jsxs("label", { children: [t('renderExport.background', 'Background:'), jsxs("select", { value: config.backgroundMode, onChange: (e) => setConfig({ backgroundMode: e.target.value }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: "transparent", children: t('renderExport.transparent', 'Transparent') }), jsx("option", { value: "color", children: t('renderExport.solidColor', 'Solid Color') }), jsx("option", { value: "scene", children: t('renderExport.sceneBackground', 'Scene Background') })] })] }), config.backgroundMode === 'color' && (jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [t('renderExport.color', 'Color:'), jsx("input", { type: "color", value: config.backgroundColor, onChange: (e) => setConfig({ backgroundColor: e.target.value }) })] })), jsxs("label", { children: [t('renderExport.supersamplingX', 'Supersampling: {samples}x').replace('{samples}', String(config.samples)), jsxs("select", { value: config.samples, onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }), style: { width: '100%', marginTop: 2 }, children: [jsx("option", { value: 1, children: t('renderExport.n1xNone', '1x (none)') }), jsx("option", { value: 2, children: "2x" }), jsx("option", { value: 4, children: t('renderExport.n4xBestQuality', '4x (best quality)') })] })] }), jsx("button", { type: "button", onClick: handleRender, disabled: isRendering, style: {
-                    background: isRendering
-                        ? 'var(--nice-bg-tertiary, #94a3b8)'
-                        : 'var(--nice-color-accent, #6366f1)',
-                    color: 'var(--nice-color-white, #fff)',
-                    border: 'none',
-                    borderRadius: 4,
-                    padding: '8px 12px',
-                    cursor: isRendering ? 'wait' : 'pointer',
-                }, children: isRendering ? (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "clock", size: 14 }), " ", t('renderExport.rendering', 'Rendering…')] })) : (jsxs(Fragment, { children: [jsx(NiceIcon, { name: "camera", size: 14 }), ' ', t('renderExport.render', 'Render {width}×{height} {format}')
-                            .replace('{width}', String(config.width))
-                            .replace('{height}', String(config.height))
-                            .replace('{format}', config.format.toUpperCase())] })) })] }));
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("renderExport.background", "Background:"),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: config.backgroundMode,
+              onChange: (e) => setConfig({ backgroundMode: e.target.value }),
+              style: { width: "100%", marginTop: 2 },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "transparent", children: t("renderExport.transparent", "Transparent") }),
+                /* @__PURE__ */ jsx("option", { value: "color", children: t("renderExport.solidColor", "Solid Color") }),
+                /* @__PURE__ */ jsx("option", { value: "scene", children: t("renderExport.sceneBackground", "Scene Background") })
+              ]
+            }
+          )
+        ] }),
+        config.backgroundMode === "color" && /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          t("renderExport.color", "Color:"),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: config.backgroundColor,
+              onChange: (e) => setConfig({ backgroundColor: e.target.value })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("label", { children: [
+          t("renderExport.supersamplingX", "Supersampling: {samples}x").replace(
+            "{samples}",
+            String(config.samples)
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: config.samples,
+              onChange: (e) => setConfig({ samples: parseInt(e.target.value, 10) }),
+              style: { width: "100%", marginTop: 2 },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: 1, children: t("renderExport.n1xNone", "1x (none)") }),
+                /* @__PURE__ */ jsx("option", { value: 2, children: "2x" }),
+                /* @__PURE__ */ jsx("option", { value: 4, children: t("renderExport.n4xBestQuality", "4x (best quality)") })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleRender,
+            disabled: isRendering,
+            style: {
+              background: isRendering ? "var(--nice-bg-tertiary, #94a3b8)" : "var(--nice-color-accent, #6366f1)",
+              color: "var(--nice-color-white, #fff)",
+              border: "none",
+              borderRadius: 4,
+              padding: "8px 12px",
+              cursor: isRendering ? "wait" : "pointer"
+            },
+            children: isRendering ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "clock", size: 14 }),
+              " ",
+              t("renderExport.rendering", "Rendering…")
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(NiceIcon, { name: "camera", size: 14 }),
+              " ",
+              t("renderExport.render", "Render {width}×{height} {format}").replace("{width}", String(config.width)).replace("{height}", String(config.height)).replace("{format}", config.format.toUpperCase())
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  NiceRenderExport,
+  useRenderExport
 };
-
-export { NiceRenderExport, useRenderExport };