@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/cjs/pixel/HSVPicker.js

@@ -1,186 +1,202 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var uiCore = require('@nice2dev/ui-core');
-var React = require('react');
-var PixelEditor_module = require('./PixelEditor.module.css.js');
-
-// Convert hex to HSV
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const uiCore = require("@nice2dev/ui-core");
+const React = require("react");
+const PixelEditor_module = require("./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 = React.useRef(null);
+  const hueCanvasRef = React.useRef(null);
+  const [hue, saturation, value] = React.useMemo(() => hexToHSV(color), [color]);
+  const [localHue, setLocalHue] = React.useState(hue);
+  const [localSat, setLocalSat] = React.useState(saturation);
+  const [localVal, setLocalVal] = React.useState(value);
+  React.useEffect(() => {
+    const [h, s, v] = hexToHSV(color);
+    setLocalHue(h);
+    setLocalSat(s);
+    setLocalVal(v);
+  }, [color]);
+  const drawSV = React.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,
+      uiCore.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,
+      uiCore.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 = uiCore.resolveCssColor("var(--nice-bg, #fff)", ctx.canvas);
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    ctx.strokeStyle = uiCore.resolveCssColor("var(--nice-text, #000)", ctx.canvas);
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }, [localHue, localSat, localVal]);
+  const drawHue = React.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 = React.useRef(null);
-    const hueCanvasRef = React.useRef(null);
-    const [hue, saturation, value] = React.useMemo(() => hexToHSV(color), [color]);
-    const [localHue, setLocalHue] = React.useState(hue);
-    const [localSat, setLocalSat] = React.useState(saturation);
-    const [localVal, setLocalVal] = React.useState(value);
-    // Sync from prop when color changes externally
-    React.useEffect(() => {
-        const [h, s, v] = hexToHSV(color);
-        setLocalHue(h);
-        setLocalSat(s);
-        setLocalVal(v);
-    }, [color]);
-    // Draw saturation-value gradient
-    const drawSV = React.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, uiCore.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, uiCore.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 = uiCore.resolveCssColor('var(--nice-bg, #fff)', ctx.canvas);
-        ctx.lineWidth = 2;
-        ctx.stroke();
-        ctx.strokeStyle = uiCore.resolveCssColor('var(--nice-text, #000)', ctx.canvas);
-        ctx.lineWidth = 1;
-        ctx.stroke();
-    }, [localHue, localSat, localVal]);
-    // Draw hue bar
-    const drawHue = React.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 = uiCore.resolveCssColor('var(--nice-bg, #fff)', ctx.canvas);
-        ctx.lineWidth = 2;
-        ctx.stroke();
-    }, [localHue]);
-    React.useEffect(() => {
-        drawSV();
-    }, [drawSV]);
-    React.useEffect(() => {
-        drawHue();
-    }, [drawHue]);
-    const handleSVClick = React.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 = React.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 (jsxRuntime.jsxs("div", { className: PixelEditor_module.hsvPicker, children: [jsxRuntime.jsx("canvas", { ref: svCanvasRef, width: 150, height: 150, onClick: handleSVClick, onMouseDown: handleSVClick, className: PixelEditor_module.hsvSVCanvas }), jsxRuntime.jsx("canvas", { ref: hueCanvasRef, width: 150, height: 16, onClick: handleHueClick, onMouseDown: handleHueClick, className: PixelEditor_module.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 = uiCore.resolveCssColor("var(--nice-bg, #fff)", ctx.canvas);
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  }, [localHue]);
+  React.useEffect(() => {
+    drawSV();
+  }, [drawSV]);
+  React.useEffect(() => {
+    drawHue();
+  }, [drawHue]);
+  const handleSVClick = React.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 = React.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__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.hsvPicker, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "canvas",
+      {
+        ref: svCanvasRef,
+        width: 150,
+        height: 150,
+        onClick: handleSVClick,
+        onMouseDown: handleSVClick,
+        className: PixelEditor_module.default.hsvSVCanvas
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "canvas",
+      {
+        ref: hueCanvasRef,
+        width: 150,
+        height: 16,
+        onClick: handleHueClick,
+        onMouseDown: handleHueClick,
+        className: PixelEditor_module.default.hsvHueCanvas
+      }
+    )
+  ] });
 };
-
 exports.HSVPicker = HSVPicker;

package/dist/cjs/pixel/PixelEditor.js

@@ -1,50 +1,161 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ui = require('@nice2dev/ui');
-var React = require('react');
-var editorAsk = require('../core/editorAsk.js');
-var i18n = require('../core/i18n.js');
-var PixelEditor_module = require('./PixelEditor.module.css.js');
-var PixelEditorCanvas = require('./PixelEditorCanvas.js');
-var PixelEditorMenuBar = require('./PixelEditorMenuBar.js');
-var PixelEditorRightPanel = require('./PixelEditorRightPanel.js');
-var PixelEditorStatusBar = require('./PixelEditorStatusBar.js');
-var PixelEditorTimeline = require('./PixelEditorTimeline.js');
-var PixelEditorToolbar = require('./PixelEditorToolbar.js');
-var SpriteGeneratorPanel = require('./SpriteGeneratorPanel.js');
-var usePixelEditor = require('./usePixelEditor.js');
-
-const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onSaveToLibrary, }) => {
-    const { t } = i18n.useNiceTranslation();
-    const api = usePixelEditor.usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary });
-    const [showGenerator, setShowGenerator] = React.useState(false);
-    const handleGeneratorSend = React.useCallback((imageData) => {
-        var _a;
-        (_a = api.importImageData) === null || _a === void 0 ? void 0 : _a.call(api, imageData);
-    }, [api]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(editorAsk.EditorAskDialog, { ask: api.pendingAsk }), jsxRuntime.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 = '';
-                } }), jsxRuntime.jsx(ui.NiceAppShell, { className: className, flush: true, menubar: jsxRuntime.jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), sidebar: jsxRuntime.jsx(PixelEditorToolbar, { api: api }), rightSidebar: jsxRuntime.jsx(PixelEditorRightPanel, { api: api }), bottomPanel: jsxRuntime.jsx(PixelEditorTimeline, { api: api }), statusBar: jsxRuntime.jsx(PixelEditorStatusBar, { api: api }), children: jsxRuntime.jsx(PixelEditorCanvas, { api: api }) }), showGenerator && (jsxRuntime.jsx(SpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxRuntime.jsxs(ui.NiceModal, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: t('pixelEditor.newDocument', 'New Document'), children: [jsxRuntime.jsx("label", { children: t('pixelEditor.widthPx', 'Width (px)') }), jsxRuntime.jsx(ui.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') }), jsxRuntime.jsx("label", { children: t('pixelEditor.heightPx', 'Height (px)') }), jsxRuntime.jsx(ui.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') }), jsxRuntime.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]) => (jsxRuntime.jsxs(ui.NiceButton, { className: PixelEditor_module.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}`))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.dialogActions, children: [jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: t('pixelEditor.cancel', 'Cancel') }), jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: t('pixelEditor.create', 'Create') })] })] })] }));
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const ui = require("@nice2dev/ui");
+const React = require("react");
+const editorAsk = require("../core/editorAsk.js");
+const i18n = require("../core/i18n.js");
+const PixelEditor_module = require("./PixelEditor.module.css.js");
+const PixelEditorCanvas = require("./PixelEditorCanvas.js");
+const PixelEditorMenuBar = require("./PixelEditorMenuBar.js");
+const PixelEditorRightPanel = require("./PixelEditorRightPanel.js");
+const PixelEditorStatusBar = require("./PixelEditorStatusBar.js");
+const PixelEditorTimeline = require("./PixelEditorTimeline.js");
+const PixelEditorToolbar = require("./PixelEditorToolbar.js");
+const SpriteGeneratorPanel = require("./SpriteGeneratorPanel.js");
+const usePixelEditor = require("./usePixelEditor.js");
+const NicePixelEditor = ({
+  initialWidth = 64,
+  initialHeight = 64,
+  className,
+  onSaveToLibrary
+}) => {
+  const { t } = i18n.useNiceTranslation();
+  const api = usePixelEditor.usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary });
+  const [showGenerator, setShowGenerator] = React.useState(false);
+  const handleGeneratorSend = React.useCallback(
+    (imageData) => {
+      api.importImageData?.(imageData);
+    },
+    [api]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(editorAsk.EditorAskDialog, { ask: api.pendingAsk }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      ui.NiceAppShell,
+      {
+        className,
+        flush: true,
+        menubar: /* @__PURE__ */ jsxRuntime.jsx(
+          PixelEditorMenuBar.default,
+          {
+            api,
+            hasOnSaveToLibrary: !!onSaveToLibrary,
+            onOpenGenerator: () => setShowGenerator(true)
+          }
+        ),
+        sidebar: /* @__PURE__ */ jsxRuntime.jsx(PixelEditorToolbar.default, { api }),
+        rightSidebar: /* @__PURE__ */ jsxRuntime.jsx(PixelEditorRightPanel.default, { api }),
+        bottomPanel: /* @__PURE__ */ jsxRuntime.jsx(PixelEditorTimeline.default, { api }),
+        statusBar: /* @__PURE__ */ jsxRuntime.jsx(PixelEditorStatusBar.default, { api }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(PixelEditorCanvas.default, { api })
+      }
+    ),
+    showGenerator && /* @__PURE__ */ jsxRuntime.jsx(
+      SpriteGeneratorPanel.default,
+      {
+        onSendToCanvas: handleGeneratorSend,
+        onClose: () => setShowGenerator(false)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.NiceModal,
+      {
+        open: api.dlgNew,
+        onClose: () => api.setDlgNew(false),
+        title: t("pixelEditor.newDocument", "New Document"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditor.widthPx", "Width (px)") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceNumberInput,
+            {
+              min: 1,
+              max: 4096,
+              value: api.nw,
+              onChange: (val) => api.setNw(val ?? 64),
+              "aria-label": t("pixelEditor.documentWidth", "Document width")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("label", { children: t("pixelEditor.heightPx", "Height (px)") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.NiceNumberInput,
+            {
+              min: 1,
+              max: 4096,
+              value: api.nh,
+              onChange: (val) => api.setNh(val ?? 64),
+              "aria-label": t("pixelEditor.documentHeight", "Document height")
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+            ui.NiceButton,
+            {
+              className: PixelEditor_module.default.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__ */ jsxRuntime.jsxs("div", { className: PixelEditor_module.default.dialogActions, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.NiceButton,
+              {
+                className: PixelEditor_module.default.btnSecondary,
+                variant: "ghost",
+                onClick: () => api.setDlgNew(false),
+                children: t("pixelEditor.cancel", "Cancel")
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.NiceButton,
+              {
+                className: PixelEditor_module.default.btnPrimary,
+                variant: "primary",
+                onClick: () => api.newDoc(api.nw, api.nh),
+                children: t("pixelEditor.create", "Create")
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
 };
-
 exports.NicePixelEditor = NicePixelEditor;