@nice2dev/ui-graphics 1.3.14 → 1.3.16

package/dist/esm/pixel/HSVPicker.js

@@ -1,184 +1,202 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { resolveCssColor } from '@nice2dev/ui-core';
-import { useRef, useMemo, useState, useEffect, useCallback } from 'react';
-import styles from './PixelEditor.module.css.js';
-
-// Convert hex to HSV
+import { jsxs, jsx } from "react/jsx-runtime";
+import { resolveCssColor } from "@nice2dev/ui-core";
+import { useRef, useMemo, useState, useEffect, useCallback } from "react";
+import styles from "./PixelEditor.module.css.js";
 function hexToHSV(hex) {
-    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    if (!result) {
-        return [0, 0, 0];
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!result) {
+    return [0, 0, 0];
+  }
+  const r = parseInt(result[1], 16) / 255;
+  const g = parseInt(result[2], 16) / 255;
+  const b = parseInt(result[3], 16) / 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const v = max;
+  const d = max - min;
+  const s = max === 0 ? 0 : d / max;
+  let h = 0;
+  if (max !== min) {
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
     }
-    const r = parseInt(result[1], 16) / 255;
-    const g = parseInt(result[2], 16) / 255;
-    const b = parseInt(result[3], 16) / 255;
-    const max = Math.max(r, g, b), min = Math.min(r, g, b);
-    const v = max;
-    const d = max - min;
-    const s = max === 0 ? 0 : d / max;
-    let h = 0;
-    if (max !== min) {
-        switch (max) {
-            case r:
-                h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-                break;
-            case g:
-                h = ((b - r) / d + 2) / 6;
-                break;
-            case b:
-                h = ((r - g) / d + 4) / 6;
-                break;
-        }
-    }
-    return [h * 360, s, v];
+  }
+  return [h * 360, s, v];
 }
-// Convert HSV to hex
 function hsvToHex(h, s, v) {
-    const c = v * s;
-    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-    const m = v - c;
-    let r = 0, g = 0, b = 0;
-    if (h < 60) {
-        r = c;
-        g = x;
-    }
-    else if (h < 120) {
-        r = x;
-        g = c;
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+  } else if (h < 180) {
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    b = c;
+  } else {
+    r = c;
+    b = x;
+  }
+  const toHex = (n) => Math.round((n + m) * 255).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+const HSVPicker = ({ color, onChange }) => {
+  const svCanvasRef = useRef(null);
+  const hueCanvasRef = useRef(null);
+  const [hue, saturation, value] = useMemo(() => hexToHSV(color), [color]);
+  const [localHue, setLocalHue] = useState(hue);
+  const [localSat, setLocalSat] = useState(saturation);
+  const [localVal, setLocalVal] = useState(value);
+  useEffect(() => {
+    const [h, s, v] = hexToHSV(color);
+    setLocalHue(h);
+    setLocalSat(s);
+    setLocalVal(v);
+  }, [color]);
+  const drawSV = useCallback(() => {
+    const canvas = svCanvasRef.current;
+    if (!canvas) {
+      return;
     }
-    else if (h < 180) {
-        g = c;
-        b = x;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
     }
-    else if (h < 240) {
-        g = x;
-        b = c;
+    const w = canvas.width;
+    const h = canvas.height;
+    ctx.fillStyle = `hsl(${localHue}, 100%, 50%)`;
+    ctx.fillRect(0, 0, w, h);
+    const whiteGrad = ctx.createLinearGradient(0, 0, w, 0);
+    whiteGrad.addColorStop(
+      0,
+      resolveCssColor("var(--nice-overlay-light-95, rgba(255, 255, 255, 1))", ctx.canvas)
+    );
+    whiteGrad.addColorStop(1, "transparent");
+    ctx.fillStyle = whiteGrad;
+    ctx.fillRect(0, 0, w, h);
+    const blackGrad = ctx.createLinearGradient(0, 0, 0, h);
+    blackGrad.addColorStop(0, "transparent");
+    blackGrad.addColorStop(
+      1,
+      resolveCssColor("var(--nice-overlay-90, rgba(0, 0, 0, 1))", ctx.canvas)
+    );
+    ctx.fillStyle = blackGrad;
+    ctx.fillRect(0, 0, w, h);
+    const cx = localSat * w;
+    const cy = (1 - localVal) * h;
+    ctx.beginPath();
+    ctx.arc(cx, cy, 6, 0, Math.PI * 2);
+    ctx.strokeStyle = resolveCssColor("var(--nice-bg, #fff)", ctx.canvas);
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.strokeStyle = resolveCssColor("var(--nice-text, #000)", ctx.canvas);
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }, [localHue, localSat, localVal]);
+  const drawHue = useCallback(() => {
+    const canvas = hueCanvasRef.current;
+    if (!canvas) {
+      return;
     }
-    else if (h < 300) {
-        r = x;
-        b = c;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
     }
-    else {
-        r = c;
-        b = x;
+    const w = canvas.width;
+    const h = canvas.height;
+    const grad = ctx.createLinearGradient(0, 0, w, 0);
+    for (let i = 0; i <= 360; i += 60) {
+      grad.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
     }
-    const toHex = (n) => Math.round((n + m) * 255)
-        .toString(16)
-        .padStart(2, '0');
-    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-const HSVPicker = ({ color, onChange }) => {
-    const svCanvasRef = useRef(null);
-    const hueCanvasRef = useRef(null);
-    const [hue, saturation, value] = useMemo(() => hexToHSV(color), [color]);
-    const [localHue, setLocalHue] = useState(hue);
-    const [localSat, setLocalSat] = useState(saturation);
-    const [localVal, setLocalVal] = useState(value);
-    // Sync from prop when color changes externally
-    useEffect(() => {
-        const [h, s, v] = hexToHSV(color);
-        setLocalHue(h);
-        setLocalSat(s);
-        setLocalVal(v);
-    }, [color]);
-    // Draw saturation-value gradient
-    const drawSV = useCallback(() => {
-        const canvas = svCanvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        const w = canvas.width;
-        const h = canvas.height;
-        // Base hue color
-        ctx.fillStyle = `hsl(${localHue}, 100%, 50%)`;
-        ctx.fillRect(0, 0, w, h);
-        // White gradient (left to right)
-        const whiteGrad = ctx.createLinearGradient(0, 0, w, 0);
-        whiteGrad.addColorStop(0, resolveCssColor('var(--nice-overlay-light-95, rgba(255, 255, 255, 1))', ctx.canvas));
-        whiteGrad.addColorStop(1, 'transparent');
-        ctx.fillStyle = whiteGrad;
-        ctx.fillRect(0, 0, w, h);
-        // Black gradient (top to bottom)
-        const blackGrad = ctx.createLinearGradient(0, 0, 0, h);
-        blackGrad.addColorStop(0, 'transparent');
-        blackGrad.addColorStop(1, resolveCssColor('var(--nice-overlay-90, rgba(0, 0, 0, 1))', ctx.canvas));
-        ctx.fillStyle = blackGrad;
-        ctx.fillRect(0, 0, w, h);
-        // Draw cursor
-        const cx = localSat * w;
-        const cy = (1 - localVal) * h;
-        ctx.beginPath();
-        ctx.arc(cx, cy, 6, 0, Math.PI * 2);
-        ctx.strokeStyle = resolveCssColor('var(--nice-bg, #fff)', ctx.canvas);
-        ctx.lineWidth = 2;
-        ctx.stroke();
-        ctx.strokeStyle = resolveCssColor('var(--nice-text, #000)', ctx.canvas);
-        ctx.lineWidth = 1;
-        ctx.stroke();
-    }, [localHue, localSat, localVal]);
-    // Draw hue bar
-    const drawHue = useCallback(() => {
-        const canvas = hueCanvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        const w = canvas.width;
-        const h = canvas.height;
-        const grad = ctx.createLinearGradient(0, 0, w, 0);
-        for (let i = 0; i <= 360; i += 60) {
-            grad.addColorStop(i / 360, `hsl(${i}, 100%, 50%)`);
-        }
-        ctx.fillStyle = grad;
-        ctx.fillRect(0, 0, w, h);
-        // Draw cursor
-        const cx = (localHue / 360) * w;
-        ctx.beginPath();
-        ctx.moveTo(cx, 0);
-        ctx.lineTo(cx, h);
-        ctx.strokeStyle = resolveCssColor('var(--nice-bg, #fff)', ctx.canvas);
-        ctx.lineWidth = 2;
-        ctx.stroke();
-    }, [localHue]);
-    useEffect(() => {
-        drawSV();
-    }, [drawSV]);
-    useEffect(() => {
-        drawHue();
-    }, [drawHue]);
-    const handleSVClick = useCallback((e) => {
-        const canvas = svCanvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        const rect = canvas.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const y = e.clientY - rect.top;
-        const s = Math.max(0, Math.min(1, x / canvas.width));
-        const v = Math.max(0, Math.min(1, 1 - y / canvas.height));
-        setLocalSat(s);
-        setLocalVal(v);
-        onChange(hsvToHex(localHue, s, v));
-    }, [localHue, onChange]);
-    const handleHueClick = useCallback((e) => {
-        const canvas = hueCanvasRef.current;
-        if (!canvas) {
-            return;
-        }
-        const rect = canvas.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const h = Math.max(0, Math.min(360, (x / canvas.width) * 360));
-        setLocalHue(h);
-        onChange(hsvToHex(h, localSat, localVal));
-    }, [localSat, localVal, onChange]);
-    return (jsxs("div", { className: styles.hsvPicker, children: [jsx("canvas", { ref: svCanvasRef, width: 150, height: 150, onClick: handleSVClick, onMouseDown: handleSVClick, className: styles.hsvSVCanvas }), jsx("canvas", { ref: hueCanvasRef, width: 150, height: 16, onClick: handleHueClick, onMouseDown: handleHueClick, className: styles.hsvHueCanvas })] }));
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, w, h);
+    const cx = localHue / 360 * w;
+    ctx.beginPath();
+    ctx.moveTo(cx, 0);
+    ctx.lineTo(cx, h);
+    ctx.strokeStyle = resolveCssColor("var(--nice-bg, #fff)", ctx.canvas);
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  }, [localHue]);
+  useEffect(() => {
+    drawSV();
+  }, [drawSV]);
+  useEffect(() => {
+    drawHue();
+  }, [drawHue]);
+  const handleSVClick = useCallback(
+    (e) => {
+      const canvas = svCanvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const s = Math.max(0, Math.min(1, x / canvas.width));
+      const v = Math.max(0, Math.min(1, 1 - y / canvas.height));
+      setLocalSat(s);
+      setLocalVal(v);
+      onChange(hsvToHex(localHue, s, v));
+    },
+    [localHue, onChange]
+  );
+  const handleHueClick = useCallback(
+    (e) => {
+      const canvas = hueCanvasRef.current;
+      if (!canvas) {
+        return;
+      }
+      const rect = canvas.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const h = Math.max(0, Math.min(360, x / canvas.width * 360));
+      setLocalHue(h);
+      onChange(hsvToHex(h, localSat, localVal));
+    },
+    [localSat, localVal, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: styles.hsvPicker, children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: svCanvasRef,
+        width: 150,
+        height: 150,
+        onClick: handleSVClick,
+        onMouseDown: handleSVClick,
+        className: styles.hsvSVCanvas
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: hueCanvasRef,
+        width: 150,
+        height: 16,
+        onClick: handleHueClick,
+        onMouseDown: handleHueClick,
+        className: styles.hsvHueCanvas
+      }
+    )
+  ] });
+};
+export {
+  HSVPicker
 };
-
-export { HSVPicker };

package/dist/esm/pixel/PixelEditor.js

@@ -1,48 +1,161 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { NiceAppShell, NiceModal, NiceNumberInput, NiceButton } from '@nice2dev/ui';
-import { useState, useCallback } from 'react';
-import { EditorAskDialog } from '../core/editorAsk.js';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './PixelEditor.module.css.js';
-import PixelEditorCanvas from './PixelEditorCanvas.js';
-import PixelEditorMenuBar from './PixelEditorMenuBar.js';
-import PixelEditorRightPanel from './PixelEditorRightPanel.js';
-import PixelEditorStatusBar from './PixelEditorStatusBar.js';
-import PixelEditorTimeline from './PixelEditorTimeline.js';
-import PixelEditorToolbar from './PixelEditorToolbar.js';
-import NiceSpriteGeneratorPanel from './SpriteGeneratorPanel.js';
-import { usePixelEditor } from './usePixelEditor.js';
-
-const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onSaveToLibrary, }) => {
-    const { t } = useNiceTranslation();
-    const api = usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary });
-    const [showGenerator, setShowGenerator] = useState(false);
-    const handleGeneratorSend = useCallback((imageData) => {
-        var _a;
-        (_a = api.importImageData) === null || _a === void 0 ? void 0 : _a.call(api, imageData);
-    }, [api]);
-    return (jsxs(Fragment, { children: [jsx(EditorAskDialog, { ask: api.pendingAsk }), jsx("input", { ref: api.fInp, type: "file", accept: ".ase,.aseprite,.png,.jpg,.jpeg,.gif,.bmp,.webp,.svg,.tga,.ico,.tiff,.tif,.avif", style: { display: 'none' }, onChange: (e) => {
-                    var _a;
-                    const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                    if (f) {
-                        api.openFile(f);
-                    }
-                    e.target.value = '';
-                } }), jsx(NiceAppShell, { className: className, flush: true, menubar: jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), sidebar: jsx(PixelEditorToolbar, { api: api }), rightSidebar: jsx(PixelEditorRightPanel, { api: api }), bottomPanel: jsx(PixelEditorTimeline, { api: api }), statusBar: jsx(PixelEditorStatusBar, { api: api }), children: jsx(PixelEditorCanvas, { api: api }) }), showGenerator && (jsx(NiceSpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxs(NiceModal, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: t('pixelEditor.newDocument', 'New Document'), children: [jsx("label", { children: t('pixelEditor.widthPx', 'Width (px)') }), jsx(NiceNumberInput, { min: 1, max: 4096, value: api.nw, onChange: (val) => api.setNw(val !== null && val !== void 0 ? val : 64), "aria-label": t('pixelEditor.documentWidth', 'Document width') }), jsx("label", { children: t('pixelEditor.heightPx', 'Height (px)') }), jsx(NiceNumberInput, { min: 1, max: 4096, value: api.nh, onChange: (val) => api.setNh(val !== null && val !== void 0 ? val : 64), "aria-label": t('pixelEditor.documentHeight', 'Document height') }), jsx("div", { style: { display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 8 }, children: [
-                            [16, 16],
-                            [32, 32],
-                            [48, 48],
-                            [64, 64],
-                            [128, 128],
-                            [256, 256],
-                            [16, 32],
-                            [32, 64],
-                            [48, 16],
-                            [64, 32],
-                        ].map(([w, h]) => (jsxs(NiceButton, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { fontSize: 10, padding: '2px 6px' }, onClick: () => {
-                                api.setNw(w);
-                                api.setNh(h);
-                            }, children: [w, "x", h] }, `${w}x${h}`))) }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: t('pixelEditor.cancel', 'Cancel') }), jsx(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: t('pixelEditor.create', 'Create') })] })] })] }));
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { NiceAppShell, NiceModal, NiceNumberInput, NiceButton } from "@nice2dev/ui";
+import { useState, useCallback } from "react";
+import { EditorAskDialog } from "../core/editorAsk.js";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./PixelEditor.module.css.js";
+import PixelEditorCanvas from "./PixelEditorCanvas.js";
+import PixelEditorMenuBar from "./PixelEditorMenuBar.js";
+import PixelEditorRightPanel from "./PixelEditorRightPanel.js";
+import PixelEditorStatusBar from "./PixelEditorStatusBar.js";
+import PixelEditorTimeline from "./PixelEditorTimeline.js";
+import PixelEditorToolbar from "./PixelEditorToolbar.js";
+import NiceSpriteGeneratorPanel from "./SpriteGeneratorPanel.js";
+import { usePixelEditor } from "./usePixelEditor.js";
+const NicePixelEditor = ({
+  initialWidth = 64,
+  initialHeight = 64,
+  className,
+  onSaveToLibrary
+}) => {
+  const { t } = useNiceTranslation();
+  const api = usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary });
+  const [showGenerator, setShowGenerator] = useState(false);
+  const handleGeneratorSend = useCallback(
+    (imageData) => {
+      api.importImageData?.(imageData);
+    },
+    [api]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(EditorAskDialog, { ask: api.pendingAsk }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: api.fInp,
+        type: "file",
+        accept: ".ase,.aseprite,.png,.jpg,.jpeg,.gif,.bmp,.webp,.svg,.tga,.ico,.tiff,.tif,.avif",
+        style: { display: "none" },
+        onChange: (e) => {
+          const f = e.target.files?.[0];
+          if (f) {
+            api.openFile(f);
+          }
+          e.target.value = "";
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NiceAppShell,
+      {
+        className,
+        flush: true,
+        menubar: /* @__PURE__ */ jsx(
+          PixelEditorMenuBar,
+          {
+            api,
+            hasOnSaveToLibrary: !!onSaveToLibrary,
+            onOpenGenerator: () => setShowGenerator(true)
+          }
+        ),
+        sidebar: /* @__PURE__ */ jsx(PixelEditorToolbar, { api }),
+        rightSidebar: /* @__PURE__ */ jsx(PixelEditorRightPanel, { api }),
+        bottomPanel: /* @__PURE__ */ jsx(PixelEditorTimeline, { api }),
+        statusBar: /* @__PURE__ */ jsx(PixelEditorStatusBar, { api }),
+        children: /* @__PURE__ */ jsx(PixelEditorCanvas, { api })
+      }
+    ),
+    showGenerator && /* @__PURE__ */ jsx(
+      NiceSpriteGeneratorPanel,
+      {
+        onSendToCanvas: handleGeneratorSend,
+        onClose: () => setShowGenerator(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      NiceModal,
+      {
+        open: api.dlgNew,
+        onClose: () => api.setDlgNew(false),
+        title: t("pixelEditor.newDocument", "New Document"),
+        children: [
+          /* @__PURE__ */ jsx("label", { children: t("pixelEditor.widthPx", "Width (px)") }),
+          /* @__PURE__ */ jsx(
+            NiceNumberInput,
+            {
+              min: 1,
+              max: 4096,
+              value: api.nw,
+              onChange: (val) => api.setNw(val ?? 64),
+              "aria-label": t("pixelEditor.documentWidth", "Document width")
+            }
+          ),
+          /* @__PURE__ */ jsx("label", { children: t("pixelEditor.heightPx", "Height (px)") }),
+          /* @__PURE__ */ jsx(
+            NiceNumberInput,
+            {
+              min: 1,
+              max: 4096,
+              value: api.nh,
+              onChange: (val) => api.setNh(val ?? 64),
+              "aria-label": t("pixelEditor.documentHeight", "Document height")
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, flexWrap: "wrap", marginTop: 8 }, children: [
+            [16, 16],
+            [32, 32],
+            [48, 48],
+            [64, 64],
+            [128, 128],
+            [256, 256],
+            [16, 32],
+            [32, 64],
+            [48, 16],
+            [64, 32]
+          ].map(([w, h]) => /* @__PURE__ */ jsxs(
+            NiceButton,
+            {
+              className: styles.btnSecondary,
+              variant: "ghost",
+              size: "sm",
+              style: { fontSize: 10, padding: "2px 6px" },
+              onClick: () => {
+                api.setNw(w);
+                api.setNh(h);
+              },
+              children: [
+                w,
+                "x",
+                h
+              ]
+            },
+            `${w}x${h}`
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: styles.dialogActions, children: [
+            /* @__PURE__ */ jsx(
+              NiceButton,
+              {
+                className: styles.btnSecondary,
+                variant: "ghost",
+                onClick: () => api.setDlgNew(false),
+                children: t("pixelEditor.cancel", "Cancel")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              NiceButton,
+              {
+                className: styles.btnPrimary,
+                variant: "primary",
+                onClick: () => api.newDoc(api.nw, api.nh),
+                children: t("pixelEditor.create", "Create")
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  NicePixelEditor
 };
-
-export { NicePixelEditor };