@nice2dev/ui-graphics 1.2.1 → 1.2.2

package/dist/esm/photo/PhotoEditorLeftPanel.js

@@ -59,12 +59,12 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
                         color: activeTab === tab.key ? accent : undefined,
                         borderBottomColor: activeTab === tab.key ? accent : undefined,
                     }, children: [jsx(NiceIcon, { name: tab.icon, size: 14 }), tab.label] }, tab.key))) }), jsxs("div", { className: cs.panelContent, children: [activeTab === 'filters' && (jsxs(Fragment, { children: [jsx("div", { className: cs.pillRow, children: [
-                                    { key: 'all', label: 'All' },
-                                    { key: 'color', label: 'Color' },
-                                    { key: 'light', label: 'Light' },
-                                    { key: 'vintage', label: 'Vintage' },
-                                    { key: 'artistic', label: 'Artistic' },
-                                    { key: 'fun', label: 'Fun' },
+                                    { key: 'all', label: t('photoEditor.all', 'All') },
+                                    { key: 'color', label: t('photoEditor.color', 'Color') },
+                                    { key: 'light', label: t('photoEditor.light', 'Light') },
+                                    { key: 'vintage', label: t('photoEditor.vintage', 'Vintage') },
+                                    { key: 'artistic', label: t('photoEditor.artistic', 'Artistic') },
+                                    { key: 'fun', label: t('photoEditor.fun', 'Fun') },
                                 ].map((cat) => (jsx("button", { onClick: () => setFilterCategory(cat.key), className: filterCategory === cat.key ? cs.pillActive : cs.pill, style: {
                                         borderColor: filterCategory === cat.key ? accent : undefined,
                                         background: filterCategory === cat.key ? accentDim : undefined,
@@ -120,7 +120,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
                                         }, children: [jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.horizontal', 'Horizontal')] }), jsxs(Button, { variant: flipV ? 'outline-info' : 'dark', size: "sm", onClick: () => {
                                             setFlipV(!flipV);
                                             pushHistory();
-                                        }, children: [jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.vertical', 'Vertical')] })] }), jsx("div", { className: cs.sectionTitleMb8, children: t('photoEditor.previewZoom', 'Preview zoom') }), jsxs("div", { className: cs.transformZoomRow, children: [jsx(RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: (e) => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxs("span", { className: cs.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxs("div", { className: cs.transformInfo, children: [jsxs("div", { children: [jsx("strong", { children: "Rotation:" }), " ", rotation, "\u00B0"] }), jsxs("div", { children: [jsx("strong", { children: "Flip H:" }), " ", flipH ? 'Yes' : 'No'] }), jsxs("div", { children: [jsx("strong", { children: "Flip V:" }), " ", flipV ? 'Yes' : 'No'] }), cropRect && (jsxs("div", { children: [jsx("strong", { children: "Crop:" }), " ", Math.round(cropRect.w), " \u00D7 ", Math.round(cropRect.h), ' (', "x:", Math.round(cropRect.x), ", y:", Math.round(cropRect.y), ")"] }))] })] })), activeTab === 'stickers' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "circle", size: 14, style: { marginRight: 4 } }), " Stickers / Emoji"] }), jsx("div", { className: cs.pillRowGap3, children: EMOJI_CATALOG.map((cat) => (jsxs("button", { onClick: () => setEmojiCat(cat.id), className: emojiCat === cat.id ? cs.pillEmojiActive : cs.pillEmoji, style: {
+                                        }, children: [jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.vertical', 'Vertical')] })] }), jsx("div", { className: cs.sectionTitleMb8, children: t('photoEditor.previewZoom', 'Preview zoom') }), jsxs("div", { className: cs.transformZoomRow, children: [jsx(RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: (e) => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxs("span", { className: cs.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxs("div", { className: cs.transformInfo, children: [jsxs("div", { children: [jsx("strong", { children: t('photoEditor.rotation2', 'Rotation:') }), " ", rotation, "\u00B0"] }), jsxs("div", { children: [jsx("strong", { children: t('photoEditor.flipH', 'Flip H:') }), ' ', flipH ? t('photoEditor.yes', 'Yes') : t('photoEditor.no', 'No')] }), jsxs("div", { children: [jsx("strong", { children: t('photoEditor.flipV', 'Flip V:') }), ' ', flipV ? t('photoEditor.yes', 'Yes') : t('photoEditor.no', 'No')] }), cropRect && (jsxs("div", { children: [jsx("strong", { children: t('photoEditor.crop', 'Crop:') }), " ", Math.round(cropRect.w), " \u00D7", ' ', Math.round(cropRect.h), ' (', "x:", Math.round(cropRect.x), ", y:", Math.round(cropRect.y), ")"] }))] })] })), activeTab === 'stickers' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "circle", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.stickersEmoji', 'Stickers / Emoji')] }), jsx("div", { className: cs.pillRowGap3, children: EMOJI_CATALOG.map((cat) => (jsxs("button", { onClick: () => setEmojiCat(cat.id), className: emojiCat === cat.id ? cs.pillEmojiActive : cs.pillEmoji, style: {
                                         borderColor: emojiCat === cat.id ? accent : undefined,
                                         background: emojiCat === cat.id ? accentDim : undefined,
                                     }, children: [cat.icon, " ", cat.label] }, cat.id))) }), jsx("div", { className: cs.emojiGrid, children: (_a = EMOJI_CATALOG.find((c) => c.id === emojiCat)) === null || _a === void 0 ? void 0 : _a.emojis.map((em, idx) => (jsx("button", { onClick: () => {
@@ -128,14 +128,14 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
                                         const cw = (_b = (_a = mainCanvasRef.current) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 400;
                                         const ch = (_d = (_c = mainCanvasRef.current) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 400;
                                         addOverlay(createEmojiOverlay(em, cw, ch));
-                                    }, className: cs.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxs("div", { className: cs.overlaySection, children: [jsxs("div", { className: cs.overlaySectionTitle, children: ["Warstwy (", overlays.length, ")"] }), overlays.map((ov) => (jsxs("div", { onClick: () => setSelectedOverlayId(ov.id), className: cs.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsx("span", { className: cs.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsx(NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsx(NiceIcon, { name: "pen", size: 14 })) : (jsx(NiceIcon, { name: "square", size: 14 })) }), jsx("span", { className: cs.overlayName, children: ov.type === 'text'
+                                    }, className: cs.emojiBtn, title: em, children: em }, idx))) }), overlays.length > 0 && (jsxs("div", { className: cs.overlaySection, children: [jsx("div", { className: cs.overlaySectionTitle, children: t('photoEditor.layers', 'Layers ({overlays})').replace('{overlays}', String(overlays.length)) }), overlays.map((ov) => (jsxs("div", { onClick: () => setSelectedOverlayId(ov.id), className: cs.overlayItem, style: { background: selectedOverlayId === ov.id ? accentDim : undefined }, children: [jsx("span", { className: cs.overlayIcon, children: ov.type === 'emoji' ? (ov.emoji) : ov.type === 'text' ? ('T') : ov.type === 'shape' ? (jsx(NiceIcon, { name: "star", size: 14 })) : ov.type === 'drawing' ? (jsx(NiceIcon, { name: "pen", size: 14 })) : (jsx(NiceIcon, { name: "square", size: 14 })) }), jsx("span", { className: cs.overlayName, children: ov.type === 'text'
                                                     ? ov.text.slice(0, 20)
                                                     : ov.type === 'emoji'
-                                                        ? 'Emoji'
+                                                        ? t('photoEditor.emoji', 'Emoji')
                                                         : ov.type === 'shape'
                                                             ? ov.shapeKind
                                                             : ov.type === 'drawing'
-                                                                ? `Rysunek (${ov.strokes.length})`
+                                                                ? t('photoEditor.drawing', 'Drawing ({strokes})').replace('{strokes}', String(ov.strokes.length))
                                                                 : ov.type === 'frame'
                                                                     ? ov.frameStyle
                                                                     : '' }), jsx("button", { onClick: (e) => {
@@ -165,13 +165,13 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
                                                         italic: !selectedOverlay.italic,
                                                     });
                                                     pushHistory();
-                                                }, className: cs.textFormatBtnSm, style: { fontStyle: 'italic' }, children: "I" })] })] }))] })), activeTab === 'shapes' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.shapes', 'Shapes')] }), jsxs("div", { className: cs.shapeColorRow, children: [jsx("span", { className: cs.shapeColorLabel, children: "Stroke:" }), jsx("input", { type: "color", value: shapeStroke, onChange: (e) => setShapeStroke(e.target.value), className: cs.colorInput, title: t('photoEditor.strokeColor', 'Stroke color') }), jsx("span", { className: cs.shapeColorLabelMl, children: "Fill:" }), jsx("input", { type: "color", value: shapeFill || '#ffffff', onChange: (e) => setShapeFill(e.target.value), className: cs.colorInput, title: t('photoEditor.fillColor', 'Fill color') }), jsx(Button, { variant: shapeFill ? 'light' : 'dark', size: "sm", onClick: () => setShapeFill(shapeFill ? '' : '#ffffff'), className: cs.shapeFillToggle, children: shapeFill ? 'Off' : 'On' })] }), jsxs("div", { className: cs.sliderRow, children: [jsx("span", { className: cs.sliderLabel, children: "Width:" }), jsx(RangeInput, { min: 1, max: 20, value: shapeStrokeW, onChange: (e) => setShapeStrokeW(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [shapeStrokeW, "px"] })] }), jsx("div", { className: cs.shapeGrid, children: SHAPE_CATALOG.map((sh) => (jsx("button", { title: sh.label, onClick: () => {
+                                                }, className: cs.textFormatBtnSm, style: { fontStyle: 'italic' }, children: "I" })] })] }))] })), activeTab === 'shapes' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.shapes', 'Shapes')] }), jsxs("div", { className: cs.shapeColorRow, children: [jsx("span", { className: cs.shapeColorLabel, children: t('photoEditor.stroke', 'Stroke:') }), jsx("input", { type: "color", value: shapeStroke, onChange: (e) => setShapeStroke(e.target.value), className: cs.colorInput, title: t('photoEditor.strokeColor', 'Stroke color') }), jsx("span", { className: cs.shapeColorLabelMl, children: t('photoEditor.fill', 'Fill:') }), jsx("input", { type: "color", value: shapeFill || '#ffffff', onChange: (e) => setShapeFill(e.target.value), className: cs.colorInput, title: t('photoEditor.fillColor', 'Fill color') }), jsx(Button, { variant: shapeFill ? 'light' : 'dark', size: "sm", onClick: () => setShapeFill(shapeFill ? '' : '#ffffff'), className: cs.shapeFillToggle, children: shapeFill ? t('photoEditor.off', 'Off') : t('photoEditor.on', 'On') })] }), jsxs("div", { className: cs.sliderRow, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsx(RangeInput, { min: 1, max: 20, value: shapeStrokeW, onChange: (e) => setShapeStrokeW(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [shapeStrokeW, "px"] })] }), jsx("div", { className: cs.shapeGrid, children: SHAPE_CATALOG.map((sh) => (jsx("button", { title: sh.label, onClick: () => {
                                         const ov = createShapeOverlay(sh.id);
                                         ov.strokeColor = shapeStroke;
                                         ov.fillColor = shapeFill || null;
                                         ov.strokeWidth = shapeStrokeW;
                                         addOverlay(ov);
-                                    }, className: cs.shapeBtn, children: jsx(NiceIcon, { name: sh.icon, size: 18 }) }, sh.id))) }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.frames', 'Frames')] }), jsxs("div", { className: cs.frameColorRow, children: [jsx("input", { type: "color", value: frameColor, onChange: (e) => setFrameColor(e.target.value), className: cs.colorInput, "aria-label": t('photoEditor.frameColor', 'Frame color') }), jsxs("div", { className: cs.frameThicknessWrap, children: [jsx("span", { className: cs.sliderLabel, children: "Grub.:" }), jsx(RangeInput, { min: 1, max: 10, value: frameThick, onChange: (e) => setFrameThick(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsx("span", { className: cs.frameThicknessValue, style: { color: accent }, children: frameThick })] })] }), jsxs("div", { className: cs.frameGrid, children: [FRAME_CATALOG.map((fr) => (jsx("button", { title: fr.label, onClick: () => {
+                                    }, className: cs.shapeBtn, children: jsx(NiceIcon, { name: sh.icon, size: 18 }) }, sh.id))) }), jsxs("div", { className: cs.sectionTitle, children: [jsx(NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.frames', 'Frames')] }), jsxs("div", { className: cs.frameColorRow, children: [jsx("input", { type: "color", value: frameColor, onChange: (e) => setFrameColor(e.target.value), className: cs.colorInput, "aria-label": t('photoEditor.frameColor', 'Frame color') }), jsxs("div", { className: cs.frameThicknessWrap, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.thickness', 'Thickness:') }), jsx(RangeInput, { min: 1, max: 10, value: frameThick, onChange: (e) => setFrameThick(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsx("span", { className: cs.frameThicknessValue, style: { color: accent }, children: frameThick })] })] }), jsxs("div", { className: cs.frameGrid, children: [FRAME_CATALOG.map((fr) => (jsx("button", { title: fr.label, onClick: () => {
                                             setOverlays((prev) => prev.filter((o) => o.type !== 'frame'));
                                             const ov = createFrameOverlay(fr.id, frameColor);
                                             ov.thickness = frameThick / 100;
@@ -179,7 +179,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
                                         }, className: cs.frameBtn, children: jsx(NiceIcon, { name: fr.icon, size: 18 }) }, fr.id))), jsx("button", { title: t('photoEditor.removeFrame', 'Remove frame'), "aria-label": t('photoEditor.removeFrame', 'Remove frame'), onClick: () => {
                                             setOverlays((prev) => prev.filter((o) => o.type !== 'frame'));
                                             pushHistory();
-                                        }, className: cs.removeFrameBtn, children: jsx(NiceIcon, { name: "close", size: 14 }) })] })] })), activeTab === 'draw' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx(NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.freehandDrawing', 'Freehand drawing')] }), jsxs("div", { className: cs.sectionInfoMb, children: [jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.drawDirectlyOnThePhoto', 'Draw directly on the photo by holding the left mouse button.')] }), jsxs("div", { className: cs.quickColorRow, children: [jsx("span", { className: cs.sliderLabel, children: "Color:" }), jsx("input", { type: "color", value: drawColor, onChange: (e) => setDrawColor(e.target.value), className: cs.colorInputDraw, "aria-label": t('photoEditor.drawColor', 'Drawing color') }), [
+                                        }, className: cs.removeFrameBtn, children: jsx(NiceIcon, { name: "close", size: 14 }) })] })] })), activeTab === 'draw' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx(NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.freehandDrawing', 'Freehand drawing')] }), jsxs("div", { className: cs.sectionInfoMb, children: [jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.drawDirectlyOnThePhoto', 'Draw directly on the photo by holding the left mouse button.')] }), jsxs("div", { className: cs.quickColorRow, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.color2', 'Color:') }), jsx("input", { type: "color", value: drawColor, onChange: (e) => setDrawColor(e.target.value), className: cs.colorInputDraw, "aria-label": t('photoEditor.drawColor', 'Drawing color') }), [
                                         '#ff0000',
                                         '#ff8800',
                                         '#ffff00',
@@ -192,7 +192,7 @@ const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
                                     ].map((c) => (jsx("div", { onClick: () => setDrawColor(c), className: cs.quickColorSwatch, style: {
                                             background: c,
                                             border: drawColor === c ? `2px solid ${accent}` : undefined,
-                                        } }, c)))] }), jsxs("div", { className: cs.sliderRow, style: { marginBottom: 12 }, children: [jsx("span", { className: cs.sliderLabel, children: "Width:" }), jsx(RangeInput, { min: 1, max: 30, value: drawWidth, onChange: (e) => setDrawWidth(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [drawWidth, "px"] })] }), jsx("div", { className: cs.drawPreview, children: jsx("div", { style: {
+                                        } }, c)))] }), jsxs("div", { className: cs.sliderRow, style: { marginBottom: 12 }, children: [jsx("span", { className: cs.sliderLabel, children: t('photoEditor.width', 'Width:') }), jsx(RangeInput, { min: 1, max: 30, value: drawWidth, onChange: (e) => setDrawWidth(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [drawWidth, "px"] })] }), jsx("div", { className: cs.drawPreview, children: jsx("div", { style: {
                                         width: Math.max(drawWidth, 4),
                                         height: Math.max(drawWidth, 4),
                                         borderRadius: '50%',

package/dist/esm/pixel/PixelEditor.js

@@ -28,7 +28,7 @@ const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onS
                         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: "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: "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: [
+                } }), 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],

package/dist/esm/pixel/PixelEditorMenuBar.js

@@ -2,41 +2,71 @@ 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 }) => {
+    const { t } = useNiceTranslation();
     const items = [
         {
             id: 'file',
-            label: 'File',
+            label: t('pixelEditorMenuBar.file', 'File'),
             children: [
                 {
                     id: 'new',
-                    label: 'New…',
+                    label: t('pixelEditorMenuBar.new', 'New…'),
                     icon: jsx(NiceIcon, { name: "file", size: 14 }),
                     onClick: () => api.setDlgNew(true),
                 },
                 {
                     id: 'open',
-                    label: '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: 'Save .ase', onClick: api.exportAse },
-                { id: 'png', label: 'Export PNG', onClick: api.exportPNG },
-                { id: 'jpg', label: 'Export JPG', onClick: api.exportJPG },
-                { id: 'webp', label: 'Export WebP', onClick: api.exportWebP },
-                { id: 'bmp', label: 'Export BMP', onClick: api.exportBMP },
-                { id: 'svg', label: 'Export SVG', onClick: api.exportSVG },
-                { id: 'sheet', label: 'Export sprite sheet', onClick: api.exportSheet },
+                {
+                    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: 'Save to Library',
+                            label: t('pixelEditorMenuBar.saveToLibrary', 'Save to Library'),
                             icon: jsx(NiceIcon, { name: "box", size: 14 }),
                             onClick: api.saveToLibrary,
                         },
@@ -46,35 +76,70 @@ const PixelEditorMenuBar = /* @__PURE__ */ Object.assign(
         },
         {
             id: 'edit',
-            label: 'Edit',
+            label: t('pixelEditorMenuBar.edit', 'Edit'),
             children: [
-                { id: 'undo', label: 'Undo', onClick: api.undo },
-                { id: 'redo', label: 'Redo', onClick: api.redo },
+                { 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: 'Copy', onClick: api.doCopy, disabled: !api.sel },
-                { id: 'cut', label: 'Cut', onClick: api.doCut, disabled: !api.sel },
-                { id: 'paste', label: 'Paste', onClick: api.doPaste, disabled: !api.clipboard.current },
-                { id: 'selall', label: 'Select all', onClick: api.doSelectAll },
+                {
+                    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: 'Image',
+            label: t('pixelEditorMenuBar.image', 'Image'),
             children: [
-                { id: 'fliph', label: 'Flip horizontal', onClick: () => api.flipCv('h') },
-                { id: 'flipv', label: 'Flip vertical', onClick: () => api.flipCv('v') },
-                { id: 'rot', label: 'Rotate 90°', onClick: api.rotateCv },
+                {
+                    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: 'Clear canvas', onClick: api.clearCv },
+                {
+                    id: 'clear',
+                    label: t('pixelEditorMenuBar.clearCanvas', 'Clear canvas'),
+                    onClick: api.clearCv,
+                },
             ],
         },
         {
             id: 'view',
-            label: 'View',
+            label: t('pixelEditorMenuBar.view', 'View'),
             children: [
                 {
                     id: 'grid',
-                    label: 'Show grid',
+                    label: t('pixelEditorMenuBar.showGrid', 'Show grid'),
                     badge: api.grid ? 'On' : 'Off',
                     onClick: () => api.setGrid((g) => !g),
                 },
@@ -82,11 +147,11 @@ const PixelEditorMenuBar = /* @__PURE__ */ Object.assign(
         },
         {
             id: 'tools',
-            label: 'Tools',
+            label: t('pixelEditorMenuBar.tools', 'Tools'),
             children: [
                 {
                     id: 'gen',
-                    label: 'Sprite generator…',
+                    label: t('pixelEditorMenuBar.spriteGenerator', 'Sprite generator…'),
                     icon: jsx(NiceIcon, { name: "palette", size: 14 }),
                     onClick: onOpenGenerator,
                 },

package/dist/esm/pixel/PixelEditorRightPanel.js

@@ -18,17 +18,21 @@ const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
                         .map(({ l, i }) => (jsxs("div", { className: `${styles.layerItem} ${i === api.aLi ? styles.layerItemActive : ''}`, onClick: () => api.setALi(i), children: [jsx("span", { className: styles.layerVis, onClick: (e) => {
                                     e.stopPropagation();
                                     api.toggleVis(i);
-                                }, title: l.visible ? 'Visible' : 'Hidden', children: jsx(NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { className: styles.layerLock, onClick: (e) => {
+                                }, title: l.visible
+                                    ? t('pixelEditorRightPanel.visible', 'Visible')
+                                    : t('pixelEditorRightPanel.hidden', 'Hidden'), children: jsx(NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { className: styles.layerLock, onClick: (e) => {
                                     e.stopPropagation();
                                     api.toggleLock(i);
-                                }, title: l.locked ? 'Locked' : 'Unlocked', children: jsx(NiceIcon, { name: "lock", size: 14 }) }), api.editingLayerName === l.id ? (jsx(NiceTextInput, { className: styles.layerNameInput, value: l.name, onChange: (val) => api.renameLayer(i, val), onBlur: () => api.setEditingLayerName(null), onKeyDown: (e) => {
+                                }, title: l.locked
+                                    ? t('pixelEditorRightPanel.locked', 'Locked')
+                                    : t('pixelEditorRightPanel.unlocked', 'Unlocked'), children: jsx(NiceIcon, { name: "lock", size: 14 }) }), api.editingLayerName === l.id ? (jsx(NiceTextInput, { className: styles.layerNameInput, value: l.name, onChange: (val) => api.renameLayer(i, val), onBlur: () => api.setEditingLayerName(null), onKeyDown: (e) => {
                                     if (e.key === 'Enter') {
                                         api.setEditingLayerName(null);
                                     }
                                 }, autoFocus: true, "aria-label": t('pixelEditorRightPanel.layerName', 'Layer name') })) : (jsx("span", { className: styles.layerName, onDoubleClick: (e) => {
                                     e.stopPropagation();
                                     api.setEditingLayerName(l.id);
-                                }, children: l.name })), jsxs("span", { className: styles.layerOpacity, children: [Math.round((l.opacity / 255) * 100), "%"] })] }, l.id))), api.layers[api.aLi] && (jsxs("div", { className: styles.layerControls, children: [jsx(NiceSelect, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: styles.blendSelect, "aria-label": t('pixelEditorRightPanel.blendMode', 'Blend mode'), options: BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsx(NiceSlider, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: styles.layerOpSlider, title: `Opacity: ${Math.round((api.layers[api.aLi].opacity / 255) * 100)}%` })] }))] }), jsxs(NiceCollapse, { className: styles.panelSection, defaultExpanded: true, trigger: sectionTrigger('Palette'), children: [jsx("div", { className: styles.layerActions, children: jsx(NiceButton, { variant: "ghost", size: "sm", onClick: () => {
+                                }, children: l.name })), jsxs("span", { className: styles.layerOpacity, children: [Math.round((l.opacity / 255) * 100), "%"] })] }, l.id))), api.layers[api.aLi] && (jsxs("div", { className: styles.layerControls, children: [jsx(NiceSelect, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: styles.blendSelect, "aria-label": t('pixelEditorRightPanel.blendMode', 'Blend mode'), options: BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsx(NiceSlider, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: styles.layerOpSlider, title: t('pixelEditorRightPanel.opacity2', 'Opacity: {opacity}%').replace('{opacity}', String(Math.round((api.layers[api.aLi].opacity / 255) * 100))) })] }))] }), jsxs(NiceCollapse, { className: styles.panelSection, defaultExpanded: true, trigger: sectionTrigger('Palette'), children: [jsx("div", { className: styles.layerActions, children: jsx(NiceButton, { variant: "ghost", size: "sm", onClick: () => {
                                 if (!api.pal.includes(api.col1)) {
                                     api.setPal((p) => [...p, api.col1]);
                                 }

package/dist/esm/pixel/PixelEditorStatusBar.js

@@ -8,9 +8,13 @@ const PixelEditorStatusBar = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ React.memo(({ api }) => {
     var _a;
     const { t } = useNiceTranslation();
-    return (jsxs("div", { className: styles.statusBar, children: [jsxs("span", { children: [api.dw, "\u00D7", api.dh] }), jsx("span", { children: t('pixelEditorStatusBar.zoom', 'Zoom {zoom}%').replace('{zoom}', String(Math.round(api.zoom * 100))) }), api.cursor && inB(api.cursor.x, api.cursor.y, api.dw, api.dh) && (jsxs("span", { children: ["(", api.cursor.x, ", ", api.cursor.y, ")"] })), jsx("span", { children: api.tool }), jsxs("span", { children: ["Brush: ", api.brush.size, "px ", api.brush.shape] }), jsxs("span", { children: ["Pressure: ", Math.round(api.pressure * 100), "%"] }), jsxs("span", { children: ["Layer: ", (_a = api.layers[api.aLi]) === null || _a === void 0 ? void 0 : _a.name] }), jsx("span", { children: t('pixelEditorStatusBar.frame', 'Frame {current}/{total}')
+    return (jsxs("div", { className: styles.statusBar, children: [jsxs("span", { children: [api.dw, "\u00D7", api.dh] }), jsx("span", { children: t('pixelEditorStatusBar.zoom', 'Zoom {zoom}%').replace('{zoom}', String(Math.round(api.zoom * 100))) }), api.cursor && inB(api.cursor.x, api.cursor.y, api.dw, api.dh) && (jsxs("span", { children: ["(", api.cursor.x, ", ", api.cursor.y, ")"] })), jsx("span", { children: api.tool }), jsx("span", { children: t('pixelEditorStatusBar.brushPx', 'Brush: {size}px {shape}')
+                    .replace('{size}', String(api.brush.size))
+                    .replace('{shape}', String(api.brush.shape)) }), jsx("span", { children: t('pixelEditorStatusBar.pressure', 'Pressure: {pressure}%').replace('{pressure}', String(Math.round(api.pressure * 100))) }), jsx("span", { children: t('pixelEditorStatusBar.layer', 'Layer: {name}').replace('{name}', String((_a = api.layers[api.aLi]) === null || _a === void 0 ? void 0 : _a.name)) }), jsx("span", { children: t('pixelEditorStatusBar.frame', 'Frame {current}/{total}')
                     .replace('{current}', String(api.afi + 1))
-                    .replace('{total}', String(api.fc)) }), api.symmetry !== 'none' && jsxs("span", { children: ["Sym: ", api.symmetry] }), api.shapeFilled && jsx("span", { children: t('pixelEditorStatusBar.filled', 'Filled') }), api.sel && (jsxs("span", { children: ["Sel: ", api.sel.w, "\u00D7", api.sel.h] }))] }));
+                    .replace('{total}', String(api.fc)) }), api.symmetry !== 'none' && (jsx("span", { children: t('pixelEditorStatusBar.sym', 'Sym: {symmetry}').replace('{symmetry}', String(api.symmetry)) })), api.shapeFilled && jsx("span", { children: t('pixelEditorStatusBar.filled', 'Filled') }), api.sel && (jsx("span", { children: t('pixelEditorStatusBar.sel', 'Sel: {w}×{h}')
+                    .replace('{w}', String(api.sel.w))
+                    .replace('{h}', String(api.sel.h)) }))] }));
 }), { displayName: 'PixelEditorStatusBar' });
 
 export { PixelEditorStatusBar as default };

package/dist/esm/pixel/PixelEditorTimeline.js

@@ -8,7 +8,11 @@ import styles from './PixelEditor.module.css.js';
 const PixelEditorTimeline = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    return (jsxs("div", { className: styles.bottomPanel, children: [jsxs("div", { className: styles.timelineControls, children: [jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: "+ Frame" }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": t('pixelEditorTimeline.duplicateFrame', 'Duplicate frame'), children: "Dup" }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": t('pixelEditorTimeline.removeFrame', 'Remove frame'), children: "\u2212 Frame" }), jsx("div", { className: styles.menuSep }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), "aria-label": api.playing ? 'Pause' : 'Play', children: jsx(NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsx("label", { children: "FPS:" }), jsx(NiceNumberInput, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": t('pixelEditorTimeline.framesPerSecond', 'Frames per second') }), jsx("div", { className: styles.menuSep }), jsx(NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: t('pixelEditorTimeline.onion', 'Onion') }), jsx("div", { style: { flex: 1 } }), jsxs("span", { children: [api.fc, " frame", api.fc !== 1 ? 's' : ''] })] }), jsx("div", { className: styles.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxs("div", { className: `${styles.frameThumb} ${fi === api.afi ? styles.frameThumbActive : ''}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsx("img", { src: api.thumbs[fi], alt: `Frame ${fi + 1}`, style: {
+    return (jsxs("div", { className: styles.bottomPanel, children: [jsxs("div", { className: styles.timelineControls, children: [jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: t('pixelEditorTimeline.frame', '+ Frame') }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": t('pixelEditorTimeline.duplicateFrame', 'Duplicate frame'), children: t('pixelEditorTimeline.dup', 'Dup') }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": t('pixelEditorTimeline.removeFrame', 'Remove frame'), children: t('pixelEditorTimeline.frame2', '− Frame') }), jsx("div", { className: styles.menuSep }), jsx(NiceButton, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), "aria-label": api.playing
+                            ? t('pixelEditorTimeline.pause', 'Pause')
+                            : t('pixelEditorTimeline.play', 'Play'), children: jsx(NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsx("label", { children: t('pixelEditorTimeline.fps', 'FPS:') }), jsx(NiceNumberInput, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": t('pixelEditorTimeline.framesPerSecond', 'Frames per second') }), jsx("div", { className: styles.menuSep }), jsx(NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: t('pixelEditorTimeline.onion', 'Onion') }), jsx("div", { style: { flex: 1 } }), jsx("span", { children: api.fc !== 1
+                            ? t('pixelEditorTimeline.framesMany', '{fc} frames').replace('{fc}', String(api.fc))
+                            : t('pixelEditorTimeline.framesOne', '{fc} frame').replace('{fc}', String(api.fc)) })] }), jsx("div", { className: styles.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxs("div", { className: `${styles.frameThumb} ${fi === api.afi ? styles.frameThumbActive : ''}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsx("img", { src: api.thumbs[fi], alt: t('pixelEditorTimeline.frame3', 'Frame {fi}').replace('{fi}', String(fi + 1)), style: {
                                 width: 36,
                                 height: 36,
                                 imageRendering: 'pixelated',

package/dist/esm/pixel/PixelEditorToolbar.js

@@ -9,7 +9,9 @@ import { TOOLS, SYMMETRY_MODES } from './pixelEditorTypes.js';
 const PixelEditorToolbar = /* @__PURE__ */ Object.assign(
 /* @__PURE__ */ React.memo(({ api }) => {
     const { t } = useNiceTranslation();
-    return (jsxs("div", { className: styles.toolbar, children: [TOOLS.map((t) => (jsx(NiceButton, { className: `${styles.toolBtn} ${api.tool === t.id ? styles.toolBtnActive : ''}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, "aria-label": t.label, children: jsx(NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: `${styles.toolBtn} ${api.shapeFilled ? styles.toolBtnActive : ''}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? 'Filled' : 'Outline'} (F)`, "aria-label": api.shapeFilled ? 'Filled shape' : 'Outline shape', children: jsx(NiceIcon, { name: api.shapeFilled ? 'check-square' : 'square', size: 16 }) }), jsx("div", { className: styles.toolGroup, children: SYMMETRY_MODES.map((m) => (jsx(NiceButton, { className: `${styles.miniBtn} ${api.symmetry === m.id ? styles.miniBtnActive : ''}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: `Symmetry: ${m.label}`, "aria-label": `Symmetry: ${m.label}`, children: jsx(NiceIcon, { name: m.icon, size: 14 }) }, m.id))) }), jsxs("div", { className: styles.colorSwatches, children: [jsx("label", { style: { position: 'relative', width: 28, height: 28, cursor: 'pointer' }, title: t('pixelEditorToolbar.primaryColourClickForHsv', 'Primary Colour (click for HSV)'), children: jsx(NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsx("label", { style: { position: 'relative', width: 22, height: 22, cursor: 'pointer' }, title: t('pixelEditorToolbar.secondaryColour', 'Secondary Colour'), children: jsx(NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
+    return (jsxs("div", { className: styles.toolbar, children: [TOOLS.map((t) => (jsx(NiceButton, { className: `${styles.toolBtn} ${api.tool === t.id ? styles.toolBtnActive : ''}`, variant: api.tool === t.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setTool(t.id), title: `${t.label} (${t.key})`, "aria-label": t.label, children: jsx(NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsx("div", { className: styles.toolSep }), jsx(NiceButton, { className: `${styles.toolBtn} ${api.shapeFilled ? styles.toolBtnActive : ''}`, variant: api.shapeFilled ? 'primary' : 'ghost', size: "sm", onClick: () => api.setShapeFilled((f) => !f), title: `${api.shapeFilled ? 'Filled' : 'Outline'} (F)`, "aria-label": api.shapeFilled
+                    ? t('pixelEditorToolbar.filledShape', 'Filled shape')
+                    : t('pixelEditorToolbar.outlineShape', 'Outline shape'), children: jsx(NiceIcon, { name: api.shapeFilled ? 'check-square' : 'square', size: 16 }) }), jsx("div", { className: styles.toolGroup, children: SYMMETRY_MODES.map((m) => (jsx(NiceButton, { className: `${styles.miniBtn} ${api.symmetry === m.id ? styles.miniBtnActive : ''}`, variant: api.symmetry === m.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setSymmetry(m.id), title: t('pixelEditorToolbar.symmetry', 'Symmetry: {label}').replace('{label}', String(m.label)), "aria-label": t('pixelEditorToolbar.symmetry', 'Symmetry: {label}').replace('{label}', String(m.label)), children: jsx(NiceIcon, { name: m.icon, size: 14 }) }, m.id))) }), jsxs("div", { className: styles.colorSwatches, children: [jsx("label", { style: { position: 'relative', width: 28, height: 28, cursor: 'pointer' }, title: t('pixelEditorToolbar.primaryColourClickForHsv', 'Primary Colour (click for HSV)'), children: jsx(NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsx("label", { style: { position: 'relative', width: 22, height: 22, cursor: 'pointer' }, title: t('pixelEditorToolbar.secondaryColour', 'Secondary Colour'), children: jsx(NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsx(NiceButton, { className: styles.toolBtn, variant: "ghost", size: "sm", onClick: () => {
                             const tmp = api.col1;
                             api.setCol1(api.col2);
                             api.setCol2(tmp);

package/dist/esm/pixel/SpriteGeneratorPanel.js

@@ -226,19 +226,19 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
             case 'character':
                 return [
                     {
-                        label: 'Skin',
+                        label: t('spriteGeneratorPanel.skin', 'Skin'),
                         options: palettesToOptions(SKIN_PALETTES),
                         value: skinPalette,
                         set: setSkinPalette,
                     },
                     {
-                        label: 'Hair',
+                        label: t('spriteGeneratorPanel.hair', 'Hair'),
                         options: palettesToOptions(HAIR_PALETTES),
                         value: hairPalette,
                         set: setHairPalette,
                     },
                     {
-                        label: 'Clothing',
+                        label: t('spriteGeneratorPanel.clothing', 'Clothing'),
                         options: palettesToOptions(CLOTHING_PALETTES),
                         value: clothPalette,
                         set: setClothPalette,
@@ -247,13 +247,13 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
             case 'building':
                 return [
                     {
-                        label: 'Walls',
+                        label: t('spriteGeneratorPanel.walls', 'Walls'),
                         options: palettesToOptions(WALL_PALETTES),
                         value: wallPalette,
                         set: setWallPalette,
                     },
                     {
-                        label: 'Roof',
+                        label: t('spriteGeneratorPanel.roof', 'Roof'),
                         options: palettesToOptions(ROOF_PALETTES),
                         value: roofPalette,
                         set: setRoofPalette,
@@ -262,14 +262,14 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
             case 'animal':
                 return [
                     {
-                        label: 'Fur',
+                        label: t('spriteGeneratorPanel.fur', 'Fur'),
                         options: palettesToOptions(FUR_PALETTES),
                         value: furPalette,
                         set: setFurPalette,
                     },
                 ];
         }
-    }, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette]);
+    }, [tab, skinPalette, hairPalette, clothPalette, wallPalette, roofPalette, furPalette, t]);
     /* ── Render ── */
     return (jsx(NiceModal, { open: true, onClose: onClose !== null && onClose !== void 0 ? onClose : (() => { }), title: t('spriteGeneratorPanel.spriteGenerator', 'Sprite Generator'), size: "xl", children: jsxs("div", { className: styles.genPanel, children: [jsx("div", { className: styles.genTabs, children: ['character', 'building', 'animal'].map((t) => (jsxs(NiceButton, { className: `${styles.genTabBtn} ${tab === t ? styles.genTabBtnActive : ''}`, variant: tab === t ? 'primary' : 'ghost', size: "sm", onClick: () => setTab(t), children: [jsx(NiceIcon, { name: t === 'character' ? 'user' : t === 'building' ? 'home' : 'heart', size: 14 }), ' ', t.charAt(0).toUpperCase() + t.slice(1)] }, t))) }), jsxs("div", { className: styles.genBody, children: [jsxs("div", { className: styles.genLeft, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('spriteGeneratorPanel.presets', 'Presets') }) }), jsx("div", { className: styles.genPresetGrid, children: presets.map((preset, i) => (jsx(NiceButton, { className: `${styles.genPresetBtn} ${i === selectedPresetIdx ? styles.genPresetBtnActive : ''}`, variant: i === selectedPresetIdx ? 'primary' : 'ghost', size: "sm", onClick: () => applyPreset(i), title: preset.name, children: preset.name }, i))) })] }), jsxs("div", { className: styles.panelSection, style: { flex: 1, overflowY: 'auto' }, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('spriteGeneratorPanel.parts', 'Parts') }) }), categories.map((cat) => {
                                             const parts = getPartsByCategory(cat);
@@ -286,9 +286,12 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
                                                             return (jsx(NiceButton, { className: `${styles.miniBtn} ${styles.genPartBtn} ${active ? styles.miniBtnActive : ''}`, variant: active ? 'primary' : 'ghost', size: "sm", onClick: () => (active ? removePart(part.id) : addPart(part.id)), title: part.name, children: part.name }, part.id));
                                                         }) })] }, cat));
                                         })] })] }), jsxs("div", { className: styles.genCenter, children: [jsx("div", { className: styles.genPreviewWrap, children: jsx("canvas", { ref: previewRef, className: styles.genPreviewCanvas }) }), jsx("div", { className: styles.genDirGrid, children: ALL_DIRECTIONS.map((d) => (jsx(NiceButton, { className: `${styles.miniBtn} ${direction === d ? styles.miniBtnActive : ''}`, variant: direction === d ? 'primary' : 'ghost', size: "sm", onClick: () => setDirection(d), children: d }, d))) }), jsxs("div", { className: styles.genRow, children: [jsx("label", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: t('spriteGeneratorPanel.projection', 'Projection') }), jsx(NiceSelect, { className: styles.propSelect, value: projection, onChange: (val) => setProjection(val), options: [
-                                                { value: 'topDown', label: 'Top-Down' },
-                                                { value: 'sideView', label: 'Side View' },
-                                                { value: 'iso25d', label: '2.5D Isometric' },
+                                                { value: 'topDown', label: t('spriteGeneratorPanel.topDown', 'Top-Down') },
+                                                { value: 'sideView', label: t('spriteGeneratorPanel.sideView', 'Side View') },
+                                                {
+                                                    value: 'iso25d',
+                                                    label: t('spriteGeneratorPanel.n25dIsometric', '2.5D Isometric'),
+                                                },
                                             ] })] }), jsxs("div", { className: styles.genRow, children: [jsx("label", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: t('spriteGeneratorPanel.size', 'Size') }), jsx(NiceNumberInput, { min: 8, max: 256, value: canvasW, onChange: (val) => setCanvasW(val !== null && val !== void 0 ? val : 32) }), jsx("span", { style: { fontSize: 10, color: 'var(--nice-text-muted)' }, children: "\u00D7" }), jsx(NiceNumberInput, { min: 8, max: 256, value: canvasH, onChange: (val) => setCanvasH(val !== null && val !== void 0 ? val : 32) })] }), jsx(NiceCheckbox, { checked: generate8Dir, onChange: (checked) => setGenerate8Dir(checked), label: t('spriteGeneratorPanel.generate8DirectionSheet', 'Generate 8-direction sheet'), className: styles.checkLabel })] }), jsxs("div", { className: styles.genRight, children: [jsxs("div", { className: styles.panelSection, children: [jsx("div", { className: styles.panelTitle, children: jsx("span", { children: t('spriteGeneratorPanel.colors', 'Colors') }) }), paletteGroups.map((group) => {
                                             var _a;
                                             return (jsxs("div", { style: { marginBottom: 6 }, children: [jsx("div", { style: { fontSize: 9, color: 'var(--nice-text-muted)', marginBottom: 2 }, children: group.label }), jsx(NiceSelect, { className: styles.propSelect, value: group.value, onChange: (val) => group.set(val), options: group.options.map((opt) => ({
@@ -302,7 +305,11 @@ const NiceSpriteGeneratorPanel = ({ onSendToCanvas, onClose, mode,
                                             return (
                                             // A part can be placed twice (left and right leg, flipped), so its id
                                             // alone is not a unique key.
-                                            jsxs("div", { className: styles.genAssemblyItem, children: [jsx(NiceButton, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true) ? 'Hide' : 'Show', "aria-label": ((_b = ap.visible) !== null && _b !== void 0 ? _b : true) ? 'Hide' : 'Show', children: jsx(NiceIcon, { name: ((_c = ap.visible) !== null && _c !== void 0 ? _c : true) ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { className: styles.genAssemblyName, children: (_d = part === null || part === void 0 ? void 0 : part.name) !== null && _d !== void 0 ? _d : ap.partId }), jsxs("span", { style: { fontSize: 9, color: 'var(--nice-text-muted)' }, children: ["z:", (_e = part === null || part === void 0 ? void 0 : part.zOrder) !== null && _e !== void 0 ? _e : 0] }), jsx(NiceButton, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: t('spriteGeneratorPanel.remove', 'Remove'), "aria-label": t('spriteGeneratorPanel.remove', 'Remove'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, `${ap.partId}-${i}`));
+                                            jsxs("div", { className: styles.genAssemblyItem, children: [jsx(NiceButton, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => togglePart(ap.partId), title: ((_a = ap.visible) !== null && _a !== void 0 ? _a : true)
+                                                            ? t('spriteGeneratorPanel.hide', 'Hide')
+                                                            : t('spriteGeneratorPanel.show', 'Show'), "aria-label": ((_b = ap.visible) !== null && _b !== void 0 ? _b : true)
+                                                            ? t('spriteGeneratorPanel.hide', 'Hide')
+                                                            : t('spriteGeneratorPanel.show', 'Show'), children: jsx(NiceIcon, { name: ((_c = ap.visible) !== null && _c !== void 0 ? _c : true) ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { className: styles.genAssemblyName, children: (_d = part === null || part === void 0 ? void 0 : part.name) !== null && _d !== void 0 ? _d : ap.partId }), jsxs("span", { style: { fontSize: 9, color: 'var(--nice-text-muted)' }, children: ["z:", (_e = part === null || part === void 0 ? void 0 : part.zOrder) !== null && _e !== void 0 ? _e : 0] }), jsx(NiceButton, { className: styles.btnIcon, variant: "ghost", size: "sm", onClick: () => removePart(ap.partId), title: t('spriteGeneratorPanel.remove', 'Remove'), "aria-label": t('spriteGeneratorPanel.remove', 'Remove'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, `${ap.partId}-${i}`));
                                         })] })] })] }), jsxs("div", { className: styles.genFooter, children: [jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: onClose, children: t('spriteGeneratorPanel.cancel', 'Cancel') }), jsxs(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: handleSendToCanvas, children: [jsx(NiceIcon, { name: "clipboard", size: 14 }), ' ', t('spriteGeneratorPanel.sendToCanvas', 'Send to Canvas')] })] })] }) }));
 };
 if (process.env.NODE_ENV !== 'production') {

package/dist/esm/texture/Nice3DTexturePainter.js

@@ -344,7 +344,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             width: '100%',
                             margin: '4px 0',
-                        } }), jsxs("label", { children: ["Size: ", painter.brush.size, "px"] }), jsx("input", { type: "range", min: 1, max: 100, value: painter.brush.size, onChange: (e) => painter.setBrush({ ...painter.brush, size: Number(e.target.value) }), style: { width: '100%' } }), jsxs("label", { children: ["Opacity: ", Math.round(painter.brush.opacity * 100), "%"] }), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.opacity, onChange: (e) => painter.setBrush({ ...painter.brush, opacity: Number(e.target.value) }), style: { width: '100%' } }), jsxs("label", { children: ["Hardness: ", Math.round(painter.brush.hardness * 100), "%"] }), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.hardness, onChange: (e) => painter.setBrush({ ...painter.brush, hardness: Number(e.target.value) }), style: { width: '100%' } }), jsx("label", { children: t('texturePainter3d.blendMode', 'Blend Mode') }), jsxs("select", { value: painter.brush.blendMode, onChange: (e) => painter.setBrush({
+                        } }), jsx("label", { children: t('texturePainter3d.sizePx', 'Size: {size}px').replace('{size}', String(painter.brush.size)) }), jsx("input", { type: "range", min: 1, max: 100, value: painter.brush.size, onChange: (e) => painter.setBrush({ ...painter.brush, size: Number(e.target.value) }), style: { width: '100%' } }), jsx("label", { children: t('texturePainter3d.opacity', 'Opacity: {opacity}%').replace('{opacity}', String(Math.round(painter.brush.opacity * 100))) }), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.opacity, onChange: (e) => painter.setBrush({ ...painter.brush, opacity: Number(e.target.value) }), style: { width: '100%' } }), jsx("label", { children: t('texturePainter3d.hardness', 'Hardness: {hardness}%').replace('{hardness}', String(Math.round(painter.brush.hardness * 100))) }), jsx("input", { type: "range", min: 0, max: 1, step: 0.01, value: painter.brush.hardness, onChange: (e) => painter.setBrush({ ...painter.brush, hardness: Number(e.target.value) }), style: { width: '100%' } }), jsx("label", { children: t('texturePainter3d.blendMode', 'Blend Mode') }), jsxs("select", { value: painter.brush.blendMode, onChange: (e) => painter.setBrush({
                             ...painter.brush,
                             blendMode: e.target.value,
                         }), style: {
@@ -360,7 +360,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             width: '100%',
                             margin: '4px 0',
-                        } }), jsxs("label", { children: ["Zoom: ", Math.round(zoom * 100), "%"] }), jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsx("button", { onClick: () => setZoom((z) => Math.max(0.1, z - 0.1)), style: btnStyle(false), children: "\u2212" }), jsx("button", { onClick: () => setZoom(0.5), style: btnStyle(false), children: t('texturePainter3d.reset', 'Reset') }), jsx("button", { onClick: () => setZoom((z) => Math.min(4, z + 0.1)), style: btnStyle(false), children: "+" })] })] }), jsxs("div", { style: {
+                        } }), jsx("label", { children: t('texturePainter3d.zoom', 'Zoom: {zoom}%').replace('{zoom}', String(Math.round(zoom * 100))) }), jsxs("div", { style: { display: 'flex', gap: 2 }, children: [jsx("button", { onClick: () => setZoom((z) => Math.max(0.1, z - 0.1)), style: btnStyle(false), children: "\u2212" }), jsx("button", { onClick: () => setZoom(0.5), style: btnStyle(false), children: t('texturePainter3d.reset', 'Reset') }), jsx("button", { onClick: () => setZoom((z) => Math.min(4, z + 0.1)), style: btnStyle(false), children: "+" })] })] }), jsxs("div", { style: {
                     flex: 1,
                     overflow: 'hidden',
                     position: 'relative',
@@ -382,7 +382,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                             color: 'var(--nice-text-secondary, #868e96)',
                             display: 'flex',
                             gap: 12,
-                        }, children: [jsxs("span", { children: [textureWidth, "\u00D7", textureHeight] }), cursorPos && (jsxs("span", { children: ["X: ", cursorPos.x, " Y: ", cursorPos.y] })), jsxs("span", { children: ["Zoom: ", Math.round(zoom * 100), "%"] })] })] }), jsxs("div", { style: { width: 160, fontSize: 11, display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('texturePainter3d.layers', 'Layers') }), jsx("div", { style: { flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }, children: [...painter.layers].reverse().map((l) => (jsxs("div", { style: {
+                        }, children: [jsxs("span", { children: [textureWidth, "\u00D7", textureHeight] }), cursorPos && (jsxs("span", { children: ["X: ", cursorPos.x, " Y: ", cursorPos.y] })), jsx("span", { children: t('texturePainter3d.zoom', 'Zoom: {zoom}%').replace('{zoom}', String(Math.round(zoom * 100))) })] })] }), jsxs("div", { style: { width: 160, fontSize: 11, display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsx("strong", { style: { fontSize: 12 }, children: t('texturePainter3d.layers', 'Layers') }), jsx("div", { style: { flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }, children: [...painter.layers].reverse().map((l) => (jsxs("div", { style: {
                                 padding: '4px 6px',
                                 borderRadius: 3,
                                 background: painter.activeLayerId === l.id
@@ -403,7 +403,11 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                                                     ? 'var(--nice-text, #c1c2c5)'
                                                     : 'var(--nice-text-secondary, #5c5f66)',
                                                 fontSize: 12,
-                                            }, title: l.visible ? 'Hide layer' : 'Show layer', "aria-label": l.visible ? 'Hide layer' : 'Show layer', children: jsx(NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { style: {
+                                            }, title: l.visible
+                                                ? t('texturePainter3d.hideLayer', 'Hide layer')
+                                                : t('texturePainter3d.showLayer', 'Show layer'), "aria-label": l.visible
+                                                ? t('texturePainter3d.hideLayer', 'Hide layer')
+                                                : t('texturePainter3d.showLayer', 'Show layer'), children: jsx(NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsx("span", { style: {
                                                 flex: 1,
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
@@ -425,7 +429,7 @@ const Nice3DTexturePainter = ({ textureWidth = 1024, textureHeight = 1024, onSav
                             cursor: 'pointer',
                             background: 'var(--nice-bg-secondary, #2c2e33)',
                             color: 'var(--nice-text, #c1c2c5)',
-                        }, children: "+ Add Layer" }), jsx("hr", { style: {
+                        }, children: t('texturePainter3d.addLayer', '+ Add Layer') }), jsx("hr", { style: {
                             border: 'none',
                             borderTop: '1px solid var(--nice-border, #373a40)',
                             width: '100%',