@nice2dev/ui-graphics 1.3.15 → 1.3.16

package/dist/esm/pixel/PixelEditor.module.css.js

@@ -1,3 +1,209 @@
-var styles = {"menuBar":"PixelEditor-module_menuBar__8JFld","menuSep":"PixelEditor-module_menuSep__pNZsR","toolbar":"PixelEditor-module_toolbar__paCGq","toolBtn":"PixelEditor-module_toolBtn__wD1Kj","toolBtnActive":"PixelEditor-module_toolBtnActive__R51U0","canvasContainer":"PixelEditor-module_canvasContainer__8z2AY","rightPanel":"PixelEditor-module_rightPanel__ZjrCh","panelSection":"PixelEditor-module_panelSection__3l225","collapseChevron":"PixelEditor-module_collapseChevron__Yuvz6","layerActions":"PixelEditor-module_layerActions__pZH1f","panelTitle":"PixelEditor-module_panelTitle__vYyeO","layerItem":"PixelEditor-module_layerItem__J-gtn","layerItemActive":"PixelEditor-module_layerItemActive__yPt29","layerVis":"PixelEditor-module_layerVis__Uj7n2","layerName":"PixelEditor-module_layerName__HovwJ","layerOpacity":"PixelEditor-module_layerOpacity__qmWvu","paletteGrid":"PixelEditor-module_paletteGrid__knY-n","paletteSwatch":"PixelEditor-module_paletteSwatch__MUbha","paletteSwatchActive":"PixelEditor-module_paletteSwatchActive__wDR4T","bottomPanel":"PixelEditor-module_bottomPanel__rviLF","timelineControls":"PixelEditor-module_timelineControls__Laroq","timelineFrames":"PixelEditor-module_timelineFrames__dw06F","frameThumb":"PixelEditor-module_frameThumb__2E9mG","frameThumbActive":"PixelEditor-module_frameThumbActive__Z0eK4","frameNum":"PixelEditor-module_frameNum__PoGQC","statusBar":"PixelEditor-module_statusBar__QnphD","dialogActions":"PixelEditor-module_dialogActions__fOa7a","btnPrimary":"PixelEditor-module_btnPrimary__FYlTy","btnSecondary":"PixelEditor-module_btnSecondary__qLfyJ","brushSlider":"PixelEditor-module_brushSlider__UxQ38","toolSep":"PixelEditor-module_toolSep__YIu-E","toolGroup":"PixelEditor-module_toolGroup__xA2lN","miniBtn":"PixelEditor-module_miniBtn__tg5N0","miniBtnActive":"PixelEditor-module_miniBtnActive__gpveu","colorSwatches":"PixelEditor-module_colorSwatches__jFuRX","brushShapes":"PixelEditor-module_brushShapes__2bBfl","pressureToggles":"PixelEditor-module_pressureToggles__AITuh","checkLabel":"PixelEditor-module_checkLabel__-d-TA","hsvPicker":"PixelEditor-module_hsvPicker__0ERIh","layerLock":"PixelEditor-module_layerLock__xeWnc","layerNameInput":"PixelEditor-module_layerNameInput__ZiOKv","layerControls":"PixelEditor-module_layerControls__MrpXo","blendSelect":"PixelEditor-module_blendSelect__QCwns","layerOpSlider":"PixelEditor-module_layerOpSlider__Vw-qs","genPanel":"PixelEditor-module_genPanel__99Md8","genTabs":"PixelEditor-module_genTabs__No5Za","genTabBtn":"PixelEditor-module_genTabBtn__e2VhB","genTabBtnActive":"PixelEditor-module_genTabBtnActive__Rt3jQ","genBody":"PixelEditor-module_genBody__MuiQy","genLeft":"PixelEditor-module_genLeft__JdEw6","genCenter":"PixelEditor-module_genCenter__c5X0S","genRight":"PixelEditor-module_genRight__qFz11","genPreviewWrap":"PixelEditor-module_genPreviewWrap__360F-","genPreviewCanvas":"PixelEditor-module_genPreviewCanvas__75Lw2","genDirGrid":"PixelEditor-module_genDirGrid__xjEp7","genRow":"PixelEditor-module_genRow__awCw9","genPresetGrid":"PixelEditor-module_genPresetGrid__f9XK6","genPresetBtn":"PixelEditor-module_genPresetBtn__5C2We","genPresetBtnActive":"PixelEditor-module_genPresetBtnActive__WAGew","genPartGrid":"PixelEditor-module_genPartGrid__l17oc","genPartBtn":"PixelEditor-module_genPartBtn__5OO82","genColorSwatches":"PixelEditor-module_genColorSwatches__acI6q","genColorSwatch":"PixelEditor-module_genColorSwatch__JE8BO","genAssemblyItem":"PixelEditor-module_genAssemblyItem__zNL2P","genAssemblyName":"PixelEditor-module_genAssemblyName__GU-kr","genFooter":"PixelEditor-module_genFooter__WkyJp","btnIcon":"PixelEditor-module_btnIcon__O59l9","propSelect":"PixelEditor-module_propSelect__4P0Qi"};
-
-export { styles as default };
+const menuBar = "_menuBar_1jln9_31";
+const menuSep = "_menuSep_1jln9_77";
+const toolbar = "_toolbar_1jln9_113";
+const toolBtn = "_toolBtn_1jln9_135";
+const toolBtnActive = "_toolBtnActive_1jln9_175";
+const canvasContainer = "_canvasContainer_1jln9_213";
+const rightPanel = "_rightPanel_1jln9_251";
+const panelSection = "_panelSection_1jln9_269";
+const collapseChevron = "_collapseChevron_1jln9_323";
+const layerActions = "_layerActions_1jln9_337";
+const panelTitle = "_panelTitle_1jln9_349";
+const layerItem = "_layerItem_1jln9_397";
+const layerItemActive = "_layerItemActive_1jln9_421";
+const layerVis = "_layerVis_1jln9_429";
+const layerName = "_layerName_1jln9_457";
+const layerOpacity = "_layerOpacity_1jln9_471";
+const paletteGrid = "_paletteGrid_1jln9_487";
+const paletteSwatch = "_paletteSwatch_1jln9_497";
+const paletteSwatchActive = "_paletteSwatchActive_1jln9_519";
+const bottomPanel = "_bottomPanel_1jln9_555";
+const timelineControls = "_timelineControls_1jln9_571";
+const timelineFrames = "_timelineFrames_1jln9_645";
+const frameThumb = "_frameThumb_1jln9_661";
+const frameThumbActive = "_frameThumbActive_1jln9_707";
+const frameNum = "_frameNum_1jln9_715";
+const statusBar = "_statusBar_1jln9_733";
+const dialogActions = "_dialogActions_1jln9_837";
+const btnPrimary = "_btnPrimary_1jln9_863";
+const btnSecondary = "_btnSecondary_1jln9_877";
+const brushSlider = "_brushSlider_1jln9_897";
+const toolSep = "_toolSep_1jln9_945";
+const toolGroup = "_toolGroup_1jln9_957";
+const miniBtn = "_miniBtn_1jln9_973";
+const miniBtnActive = "_miniBtnActive_1jln9_1011";
+const colorSwatches = "_colorSwatches_1jln9_1025";
+const brushShapes = "_brushShapes_1jln9_1047";
+const pressureToggles = "_pressureToggles_1jln9_1063";
+const checkLabel = "_checkLabel_1jln9_1075";
+const hsvPicker = "_hsvPicker_1jln9_1105";
+const layerLock = "_layerLock_1jln9_1207";
+const layerNameInput = "_layerNameInput_1jln9_1237";
+const layerControls = "_layerControls_1jln9_1261";
+const blendSelect = "_blendSelect_1jln9_1279";
+const layerOpSlider = "_layerOpSlider_1jln9_1301";
+const genPanel = "_genPanel_1jln9_1323";
+const genTabs = "_genTabs_1jln9_1339";
+const genTabBtn = "_genTabBtn_1jln9_1351";
+const genTabBtnActive = "_genTabBtnActive_1jln9_1381";
+const genBody = "_genBody_1jln9_1391";
+const genLeft = "_genLeft_1jln9_1403";
+const genCenter = "_genCenter_1jln9_1419";
+const genRight = "_genRight_1jln9_1437";
+const genPreviewWrap = "_genPreviewWrap_1jln9_1453";
+const genPreviewCanvas = "_genPreviewCanvas_1jln9_1477";
+const genDirGrid = "_genDirGrid_1jln9_1493";
+const genRow = "_genRow_1jln9_1505";
+const genPresetGrid = "_genPresetGrid_1jln9_1517";
+const genPresetBtn = "_genPresetBtn_1jln9_1527";
+const genPresetBtnActive = "_genPresetBtnActive_1jln9_1555";
+const genPartGrid = "_genPartGrid_1jln9_1565";
+const genPartBtn = "_genPartBtn_1jln9_1577";
+const genColorSwatches = "_genColorSwatches_1jln9_1589";
+const genColorSwatch = "_genColorSwatch_1jln9_1589";
+const genAssemblyItem = "_genAssemblyItem_1jln9_1611";
+const genAssemblyName = "_genAssemblyName_1jln9_1633";
+const genFooter = "_genFooter_1jln9_1647";
+const btnIcon = "_btnIcon_1jln9_1663";
+const propSelect = "_propSelect_1jln9_1687";
+const styles = {
+  menuBar,
+  menuSep,
+  toolbar,
+  toolBtn,
+  toolBtnActive,
+  canvasContainer,
+  rightPanel,
+  panelSection,
+  collapseChevron,
+  layerActions,
+  panelTitle,
+  layerItem,
+  layerItemActive,
+  layerVis,
+  layerName,
+  layerOpacity,
+  paletteGrid,
+  paletteSwatch,
+  paletteSwatchActive,
+  bottomPanel,
+  timelineControls,
+  timelineFrames,
+  frameThumb,
+  frameThumbActive,
+  frameNum,
+  statusBar,
+  dialogActions,
+  btnPrimary,
+  btnSecondary,
+  brushSlider,
+  toolSep,
+  toolGroup,
+  miniBtn,
+  miniBtnActive,
+  colorSwatches,
+  brushShapes,
+  pressureToggles,
+  checkLabel,
+  hsvPicker,
+  layerLock,
+  layerNameInput,
+  layerControls,
+  blendSelect,
+  layerOpSlider,
+  genPanel,
+  genTabs,
+  genTabBtn,
+  genTabBtnActive,
+  genBody,
+  genLeft,
+  genCenter,
+  genRight,
+  genPreviewWrap,
+  genPreviewCanvas,
+  genDirGrid,
+  genRow,
+  genPresetGrid,
+  genPresetBtn,
+  genPresetBtnActive,
+  genPartGrid,
+  genPartBtn,
+  genColorSwatches,
+  genColorSwatch,
+  genAssemblyItem,
+  genAssemblyName,
+  genFooter,
+  btnIcon,
+  propSelect
+};
+export {
+  blendSelect,
+  bottomPanel,
+  brushShapes,
+  brushSlider,
+  btnIcon,
+  btnPrimary,
+  btnSecondary,
+  canvasContainer,
+  checkLabel,
+  collapseChevron,
+  colorSwatches,
+  styles as default,
+  dialogActions,
+  frameNum,
+  frameThumb,
+  frameThumbActive,
+  genAssemblyItem,
+  genAssemblyName,
+  genBody,
+  genCenter,
+  genColorSwatch,
+  genColorSwatches,
+  genDirGrid,
+  genFooter,
+  genLeft,
+  genPanel,
+  genPartBtn,
+  genPartGrid,
+  genPresetBtn,
+  genPresetBtnActive,
+  genPresetGrid,
+  genPreviewCanvas,
+  genPreviewWrap,
+  genRight,
+  genRow,
+  genTabBtn,
+  genTabBtnActive,
+  genTabs,
+  hsvPicker,
+  layerActions,
+  layerControls,
+  layerItem,
+  layerItemActive,
+  layerLock,
+  layerName,
+  layerNameInput,
+  layerOpSlider,
+  layerOpacity,
+  layerVis,
+  menuBar,
+  menuSep,
+  miniBtn,
+  miniBtnActive,
+  paletteGrid,
+  paletteSwatch,
+  paletteSwatchActive,
+  panelSection,
+  panelTitle,
+  pressureToggles,
+  propSelect,
+  rightPanel,
+  statusBar,
+  timelineControls,
+  timelineFrames,
+  toolBtn,
+  toolBtnActive,
+  toolGroup,
+  toolSep,
+  toolbar
+};

package/dist/esm/pixel/PixelEditorCanvas.js

@@ -1,16 +1,31 @@
-import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './PixelEditor.module.css.js';
-
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./PixelEditor.module.css.js";
 const PixelEditorCanvas = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api }) => {
+  /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    return (jsx("div", { ref: api.boxRef, className: styles.canvasContainer, children: jsx("canvas", { ref: api.cvRef, onPointerDown: api.onDown, onPointerMove: api.onMove, onPointerUp: api.onUp, onPointerLeave: () => {
-                api.drawing.current = false;
-                api.panning.current = false;
-                api.setCursor(null);
-            }, onWheel: api.onWheel, onContextMenu: (e) => e.preventDefault(), style: { inset: 0, width: '100%', height: '100%', touchAction: 'none' }, "aria-label": t('pixelEditorCanvas.pixelEditorCanvas', 'Pixel editor canvas') }) }));
-}), { displayName: 'PixelEditorCanvas' });
-
-export { PixelEditorCanvas as default };
+    return /* @__PURE__ */ jsx("div", { ref: api.boxRef, className: styles.canvasContainer, children: /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: api.cvRef,
+        onPointerDown: api.onDown,
+        onPointerMove: api.onMove,
+        onPointerUp: api.onUp,
+        onPointerLeave: () => {
+          api.drawing.current = false;
+          api.panning.current = false;
+          api.setCursor(null);
+        },
+        onWheel: api.onWheel,
+        onContextMenu: (e) => e.preventDefault(),
+        style: { inset: 0, width: "100%", height: "100%", touchAction: "none" },
+        "aria-label": t("pixelEditorCanvas.pixelEditorCanvas", "Pixel editor canvas")
+      }
+    ) });
+  }),
+  { displayName: "PixelEditorCanvas" }
+);
+export {
+  PixelEditorCanvas as default
+};

package/dist/esm/pixel/PixelEditorMenuBar.js

@@ -1,164 +1,164 @@
-import { jsx } from 'react/jsx-runtime';
-import { NiceMenu } from '@nice2dev/ui';
-import { NiceIcon } from '@nice2dev/ui-core';
-import React from 'react';
-import { useNiceTranslation } from '../core/i18n.js';
-import styles from './PixelEditor.module.css.js';
-
+import { jsx } from "react/jsx-runtime";
+import { NiceMenu } from "@nice2dev/ui";
+import { NiceIcon } from "@nice2dev/ui-core";
+import React from "react";
+import { useNiceTranslation } from "../core/i18n.js";
+import styles from "./PixelEditor.module.css.js";
 const PixelEditorMenuBar = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => {
+  /* @__PURE__ */ React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => {
     const { t } = useNiceTranslation();
     const items = [
-        {
-            id: 'file',
-            label: t('pixelEditorMenuBar.file', 'File'),
-            children: [
-                {
-                    id: 'new',
-                    label: t('pixelEditorMenuBar.new', 'New…'),
-                    icon: jsx(NiceIcon, { name: "file", size: 14 }),
-                    onClick: () => api.setDlgNew(true),
-                },
-                {
-                    id: 'open',
-                    label: t('pixelEditorMenuBar.open', 'Open…'),
-                    icon: jsx(NiceIcon, { name: "folder", size: 14 }),
-                    onClick: () => { var _a; return (_a = api.fInp.current) === null || _a === void 0 ? void 0 : _a.click(); },
-                },
-                { id: 'sep-file-1', divider: true },
-                {
-                    id: 'ase',
-                    label: t('pixelEditorMenuBar.saveAse', 'Save .ase'),
-                    onClick: api.exportAse,
-                },
-                {
-                    id: 'png',
-                    label: t('pixelEditorMenuBar.exportPng', 'Export PNG'),
-                    onClick: api.exportPNG,
-                },
-                {
-                    id: 'jpg',
-                    label: t('pixelEditorMenuBar.exportJpg', 'Export JPG'),
-                    onClick: api.exportJPG,
-                },
-                {
-                    id: 'webp',
-                    label: t('pixelEditorMenuBar.exportWebp', 'Export WebP'),
-                    onClick: api.exportWebP,
-                },
-                {
-                    id: 'bmp',
-                    label: t('pixelEditorMenuBar.exportBmp', 'Export BMP'),
-                    onClick: api.exportBMP,
-                },
-                {
-                    id: 'svg',
-                    label: t('pixelEditorMenuBar.exportSvg', 'Export SVG'),
-                    onClick: api.exportSVG,
-                },
-                {
-                    id: 'sheet',
-                    label: t('pixelEditorMenuBar.exportSpriteSheet', 'Export sprite sheet'),
-                    onClick: api.exportSheet,
-                },
-                ...(hasOnSaveToLibrary
-                    ? [
-                        { id: 'sep-file-2', divider: true },
-                        {
-                            id: 'lib',
-                            label: t('pixelEditorMenuBar.saveToLibrary', 'Save to Library'),
-                            icon: jsx(NiceIcon, { name: "box", size: 14 }),
-                            onClick: api.saveToLibrary,
-                        },
-                    ]
-                    : []),
-            ],
-        },
-        {
-            id: 'edit',
-            label: t('pixelEditorMenuBar.edit', 'Edit'),
-            children: [
-                { id: 'undo', label: t('pixelEditorMenuBar.undo', 'Undo'), onClick: api.undo },
-                { id: 'redo', label: t('pixelEditorMenuBar.redo', 'Redo'), onClick: api.redo },
-                { id: 'sep-edit-1', divider: true },
-                {
-                    id: 'copy',
-                    label: t('pixelEditorMenuBar.copy', 'Copy'),
-                    onClick: api.doCopy,
-                    disabled: !api.sel,
-                },
-                {
-                    id: 'cut',
-                    label: t('pixelEditorMenuBar.cut', 'Cut'),
-                    onClick: api.doCut,
-                    disabled: !api.sel,
-                },
-                {
-                    id: 'paste',
-                    label: t('pixelEditorMenuBar.paste', 'Paste'),
-                    onClick: api.doPaste,
-                    disabled: !api.clipboard.current,
-                },
-                {
-                    id: 'selall',
-                    label: t('pixelEditorMenuBar.selectAll', 'Select all'),
-                    onClick: api.doSelectAll,
-                },
-            ],
-        },
-        {
-            id: 'image',
-            label: t('pixelEditorMenuBar.image', 'Image'),
-            children: [
-                {
-                    id: 'fliph',
-                    label: t('pixelEditorMenuBar.flipHorizontal', 'Flip horizontal'),
-                    onClick: () => api.flipCv('h'),
-                },
-                {
-                    id: 'flipv',
-                    label: t('pixelEditorMenuBar.flipVertical', 'Flip vertical'),
-                    onClick: () => api.flipCv('v'),
-                },
-                {
-                    id: 'rot',
-                    label: t('pixelEditorMenuBar.rotate90', 'Rotate 90°'),
-                    onClick: api.rotateCv,
-                },
-                { id: 'sep-image-1', divider: true },
-                {
-                    id: 'clear',
-                    label: t('pixelEditorMenuBar.clearCanvas', 'Clear canvas'),
-                    onClick: api.clearCv,
-                },
-            ],
-        },
-        {
-            id: 'view',
-            label: t('pixelEditorMenuBar.view', 'View'),
-            children: [
-                {
-                    id: 'grid',
-                    label: t('pixelEditorMenuBar.showGrid', 'Show grid'),
-                    badge: api.grid ? 'On' : 'Off',
-                    onClick: () => api.setGrid((g) => !g),
-                },
-            ],
-        },
-        {
-            id: 'tools',
-            label: t('pixelEditorMenuBar.tools', 'Tools'),
-            children: [
-                {
-                    id: 'gen',
-                    label: t('pixelEditorMenuBar.spriteGenerator', 'Sprite generator…'),
-                    icon: jsx(NiceIcon, { name: "palette", size: 14 }),
-                    onClick: onOpenGenerator,
-                },
-            ],
-        },
+      {
+        id: "file",
+        label: t("pixelEditorMenuBar.file", "File"),
+        children: [
+          {
+            id: "new",
+            label: t("pixelEditorMenuBar.new", "New…"),
+            icon: /* @__PURE__ */ jsx(NiceIcon, { name: "file", size: 14 }),
+            onClick: () => api.setDlgNew(true)
+          },
+          {
+            id: "open",
+            label: t("pixelEditorMenuBar.open", "Open…"),
+            icon: /* @__PURE__ */ jsx(NiceIcon, { name: "folder", size: 14 }),
+            onClick: () => api.fInp.current?.click()
+          },
+          { id: "sep-file-1", divider: true },
+          {
+            id: "ase",
+            label: t("pixelEditorMenuBar.saveAse", "Save .ase"),
+            onClick: api.exportAse
+          },
+          {
+            id: "png",
+            label: t("pixelEditorMenuBar.exportPng", "Export PNG"),
+            onClick: api.exportPNG
+          },
+          {
+            id: "jpg",
+            label: t("pixelEditorMenuBar.exportJpg", "Export JPG"),
+            onClick: api.exportJPG
+          },
+          {
+            id: "webp",
+            label: t("pixelEditorMenuBar.exportWebp", "Export WebP"),
+            onClick: api.exportWebP
+          },
+          {
+            id: "bmp",
+            label: t("pixelEditorMenuBar.exportBmp", "Export BMP"),
+            onClick: api.exportBMP
+          },
+          {
+            id: "svg",
+            label: t("pixelEditorMenuBar.exportSvg", "Export SVG"),
+            onClick: api.exportSVG
+          },
+          {
+            id: "sheet",
+            label: t("pixelEditorMenuBar.exportSpriteSheet", "Export sprite sheet"),
+            onClick: api.exportSheet
+          },
+          ...hasOnSaveToLibrary ? [
+            { id: "sep-file-2", divider: true },
+            {
+              id: "lib",
+              label: t("pixelEditorMenuBar.saveToLibrary", "Save to Library"),
+              icon: /* @__PURE__ */ jsx(NiceIcon, { name: "box", size: 14 }),
+              onClick: api.saveToLibrary
+            }
+          ] : []
+        ]
+      },
+      {
+        id: "edit",
+        label: t("pixelEditorMenuBar.edit", "Edit"),
+        children: [
+          { id: "undo", label: t("pixelEditorMenuBar.undo", "Undo"), onClick: api.undo },
+          { id: "redo", label: t("pixelEditorMenuBar.redo", "Redo"), onClick: api.redo },
+          { id: "sep-edit-1", divider: true },
+          {
+            id: "copy",
+            label: t("pixelEditorMenuBar.copy", "Copy"),
+            onClick: api.doCopy,
+            disabled: !api.sel
+          },
+          {
+            id: "cut",
+            label: t("pixelEditorMenuBar.cut", "Cut"),
+            onClick: api.doCut,
+            disabled: !api.sel
+          },
+          {
+            id: "paste",
+            label: t("pixelEditorMenuBar.paste", "Paste"),
+            onClick: api.doPaste,
+            disabled: !api.clipboard.current
+          },
+          {
+            id: "selall",
+            label: t("pixelEditorMenuBar.selectAll", "Select all"),
+            onClick: api.doSelectAll
+          }
+        ]
+      },
+      {
+        id: "image",
+        label: t("pixelEditorMenuBar.image", "Image"),
+        children: [
+          {
+            id: "fliph",
+            label: t("pixelEditorMenuBar.flipHorizontal", "Flip horizontal"),
+            onClick: () => api.flipCv("h")
+          },
+          {
+            id: "flipv",
+            label: t("pixelEditorMenuBar.flipVertical", "Flip vertical"),
+            onClick: () => api.flipCv("v")
+          },
+          {
+            id: "rot",
+            label: t("pixelEditorMenuBar.rotate90", "Rotate 90°"),
+            onClick: api.rotateCv
+          },
+          { id: "sep-image-1", divider: true },
+          {
+            id: "clear",
+            label: t("pixelEditorMenuBar.clearCanvas", "Clear canvas"),
+            onClick: api.clearCv
+          }
+        ]
+      },
+      {
+        id: "view",
+        label: t("pixelEditorMenuBar.view", "View"),
+        children: [
+          {
+            id: "grid",
+            label: t("pixelEditorMenuBar.showGrid", "Show grid"),
+            badge: api.grid ? "On" : "Off",
+            onClick: () => api.setGrid((g) => !g)
+          }
+        ]
+      },
+      {
+        id: "tools",
+        label: t("pixelEditorMenuBar.tools", "Tools"),
+        children: [
+          {
+            id: "gen",
+            label: t("pixelEditorMenuBar.spriteGenerator", "Sprite generator…"),
+            icon: /* @__PURE__ */ jsx(NiceIcon, { name: "palette", size: 14 }),
+            onClick: onOpenGenerator
+          }
+        ]
+      }
     ];
-    return (jsx("div", { className: styles.menuBar, children: jsx(NiceMenu, { items: items, orientation: "horizontal", variant: "ghost", density: "compact" }) }));
-}), { displayName: 'PixelEditorMenuBar' });
-
-export { PixelEditorMenuBar as default };
+    return /* @__PURE__ */ jsx("div", { className: styles.menuBar, children: /* @__PURE__ */ jsx(NiceMenu, { items, orientation: "horizontal", variant: "ghost", density: "compact" }) });
+  }),
+  { displayName: "PixelEditorMenuBar" }
+);
+export {
+  PixelEditorMenuBar as default
+};