@nice2dev/ui-graphics 1.2.0 → 1.2.2

package/dist/esm/photo/PhotoEditorLeftPanel.js

@@ -15,13 +15,14 @@ const OverlayToolbar = ({ api }) => {
     if (!selectedOverlay) {
         return null;
     }
-    return (jsxs("div", { className: cs.overlayToolbar, children: [jsxs("span", { className: cs.overlayToolbarLabel, children: [jsx(NiceIcon, { name: "box", size: 14, style: { marginRight: 4 } }), "Warstwa"] }), jsx(RangeInput, { min: 0, max: 100, value: ((_a = selectedOverlay.opacity) !== null && _a !== void 0 ? _a : 1) * 100, onChange: (e) => updateOverlay(selectedOverlay.id, { opacity: Number(e.target.value) / 100 }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 70 }, title: t('photoEditor.opacity', 'Opacity') }), jsxs("span", { className: cs.sliderValueSm, style: { color: accent }, children: [Math.round(((_b = selectedOverlay.opacity) !== null && _b !== void 0 ? _b : 1) * 100), "%"] }), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsxs(Fragment, { children: [jsx(RangeInput, { min: 20, max: 500, value: ((_c = selectedOverlay.scaleX) !== null && _c !== void 0 ? _c : 1) * 100, onChange: (e) => {
+    return (jsxs("div", { className: cs.overlayToolbar, children: [jsxs("span", { className: cs.overlayToolbarLabel, children: [jsx(NiceIcon, { name: "box", size: 14, style: { marginRight: 4 } }), t('photoEditor.layer', 'Layer')] }), jsx(RangeInput, { min: 0, max: 100, value: ((_a = selectedOverlay.opacity) !== null && _a !== void 0 ? _a : 1) * 100, onChange: (e) => updateOverlay(selectedOverlay.id, { opacity: Number(e.target.value) / 100 }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 70 }, title: t('photoEditor.opacity', 'Opacity') }), jsxs("span", { className: cs.sliderValueSm, style: { color: accent }, children: [Math.round(((_b = selectedOverlay.opacity) !== null && _b !== void 0 ? _b : 1) * 100), "%"] }), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsxs(Fragment, { children: [jsx(RangeInput, { min: 20, max: 500, value: ((_c = selectedOverlay.scaleX) !== null && _c !== void 0 ? _c : 1) * 100, onChange: (e) => {
                             const s = Number(e.target.value) / 100;
                             updateOverlay(selectedOverlay.id, { scaleX: s, scaleY: s });
-                        }, onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: "Skala" }), jsxs("span", { className: cs.sliderValueSm, style: { color: 'var(--nice-text-muted, #aaa)' }, children: [Math.round(((_d = selectedOverlay.scaleX) !== null && _d !== void 0 ? _d : 1) * 100), "%"] })] })), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsx(RangeInput, { min: -180, max: 180, value: (_e = selectedOverlay.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => updateOverlay(selectedOverlay.id, { rotation: Number(e.target.value) }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: t('photoEditor.rotation', 'Rotation') })), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayBack(selectedOverlay.id), title: t('photoEditor.moveBack', 'Move back'), className: cs.overlayToolbarBtn, children: jsx(NiceIcon, { name: "arrow-down", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayForward(selectedOverlay.id), title: t('photoEditor.moveForward', 'Move forward'), className: cs.overlayToolbarBtn, children: jsx(NiceIcon, { name: "arrow-up", size: 14 }) }), jsx(Button, { variant: "outline-danger", size: "sm", onClick: () => deleteOverlay(selectedOverlay.id), className: cs.overlayToolbarBtn, title: t('photoEditor.deleteLayer', 'Delete layer'), children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }));
+                        }, onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: t('photoEditor.scale', 'Scale') }), jsxs("span", { className: cs.sliderValueSm, style: { color: 'var(--nice-text-muted, #aaa)' }, children: [Math.round(((_d = selectedOverlay.scaleX) !== null && _d !== void 0 ? _d : 1) * 100), "%"] })] })), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsx(RangeInput, { min: -180, max: 180, value: (_e = selectedOverlay.rotation) !== null && _e !== void 0 ? _e : 0, onChange: (e) => updateOverlay(selectedOverlay.id, { rotation: Number(e.target.value) }), onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: t('photoEditor.rotation', 'Rotation') })), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayBack(selectedOverlay.id), title: t('photoEditor.moveBack', 'Move back'), className: cs.overlayToolbarBtn, children: jsx(NiceIcon, { name: "arrow-down", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: () => moveOverlayForward(selectedOverlay.id), title: t('photoEditor.moveForward', 'Move forward'), className: cs.overlayToolbarBtn, children: jsx(NiceIcon, { name: "arrow-up", size: 14 }) }), jsx(Button, { variant: "outline-danger", size: "sm", onClick: () => deleteOverlay(selectedOverlay.id), className: cs.overlayToolbarBtn, title: t('photoEditor.deleteLayer', 'Delete layer'), children: jsx(NiceIcon, { name: "trash", size: 14 }) })] }));
 };
 // ── Left Panel ──
-const PhotoEditorLeftPanel = React.memo(({ api }) => {
+const PhotoEditorLeftPanel = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api }) => {
     var _a;
     const { t, accent, accentDim, activeTab, setActiveTab, setCropMode, 
     // Filters
@@ -58,28 +59,28 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                         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,
                                     }, children: cat.label }, cat.key))) }), jsx("div", { className: cs.filterGrid, children: filteredList.map((filter) => (jsx(FilterThumb, { filter: filter, selected: selectedFilter === filter.id, accent: accent, onSelect: () => {
                                         setSelectedFilter(filter.id);
                                         pushHistory();
-                                    }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxs("div", { className: cs.intensitySection, children: [jsxs("div", { className: cs.intensityHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), "Intensity"] }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsx(RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxs("div", { className: cs.adjustColumn, children: [ADJUSTMENT_SLIDERS.map((sl) => (jsxs("div", { children: [jsxs("div", { className: cs.adjustHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsx("span", { className: cs.adjustValue, style: {
+                                    }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxs("div", { className: cs.intensitySection, children: [jsxs("div", { className: cs.intensityHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), t('photoEditor.intensity', 'Intensity')] }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsx(RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxs("div", { className: cs.adjustColumn, children: [ADJUSTMENT_SLIDERS.map((sl) => (jsxs("div", { children: [jsxs("div", { className: cs.adjustHeader, children: [jsxs("span", { className: cs.sliderLabel, children: [jsx(NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsx("span", { className: cs.adjustValue, style: {
                                                     color: adjustments[sl.key] !== 0 ? accent : 'var(--nice-text-secondary, #666)',
-                                                }, onClick: () => handleAdjChange(sl.key, sl.key === 'blur' ? 0 : 0), title: "Reset", children: adjustments[sl.key] })] }), jsx(RangeInput, { min: sl.min, max: sl.max, value: adjustments[sl.key], onChange: (e) => handleAdjChange(sl.key, Number(e.target.value)), onMouseUp: handleAdjChangeEnd, accentColor: accent })] }, sl.key))), jsxs(Button, { variant: "outline-secondary", size: "sm", className: "mt-2", onClick: () => {
+                                                }, onClick: () => handleAdjChange(sl.key, sl.key === 'blur' ? 0 : 0), title: t('photoEditor.reset', 'Reset'), children: adjustments[sl.key] })] }), jsx(RangeInput, { min: sl.min, max: sl.max, value: adjustments[sl.key], onChange: (e) => handleAdjChange(sl.key, Number(e.target.value)), onMouseUp: handleAdjChangeEnd, accentColor: accent })] }, sl.key))), jsxs(Button, { variant: "outline-secondary", size: "sm", className: "mt-2", onClick: () => {
                                     handleAdjChange('brightness', 0);
                                     const defaults = { ...DEFAULT_ADJUSTMENTS };
                                     for (const key of Object.keys(defaults)) {
                                         handleAdjChange(key, defaults[key]);
                                     }
                                     pushHistory();
-                                }, children: [jsx(NiceIcon, { name: "refresh", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetAdjustments', 'Reset adjustments')] })] })), activeTab === 'crop' && (jsxs("div", { children: [jsxs("div", { className: cs.cropInfo, children: [jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), "Drag corners or edges to crop the photo."] }), jsx("div", { className: cs.cropAspectLabel, children: "Aspect ratio" }), jsx("div", { className: cs.cropAspectRow, children: ASPECT_RATIOS.map((ar) => (jsx("button", { onClick: () => {
+                                }, children: [jsx(NiceIcon, { name: "refresh", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetAdjustments', 'Reset adjustments')] })] })), activeTab === 'crop' && (jsxs("div", { children: [jsxs("div", { className: cs.cropInfo, children: [jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.dragCornersOrEdgesTo', 'Drag corners or edges to crop the photo.')] }), jsx("div", { className: cs.cropAspectLabel, children: t('photoEditor.aspectRatio', 'Aspect ratio') }), jsx("div", { className: cs.cropAspectRow, children: ASPECT_RATIOS.map((ar) => (jsx("button", { onClick: () => {
                                         setCropAspect(ar.value);
                                         if (ar.value && cropRect && image) {
                                             let newW = cropRect.w;
@@ -104,7 +105,7 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                         setCropAspect(null);
                                         pushHistory();
                                     }
-                                }, children: [jsx(NiceIcon, { name: "expand", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetCrop', 'Reset crop')] })] })), activeTab === 'transform' && (jsxs("div", { children: [jsx("div", { className: cs.sectionTitleMb8, children: "Rotation" }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: "dark", size: "sm", onClick: () => {
+                                }, children: [jsx(NiceIcon, { name: "expand", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetCrop', 'Reset crop')] })] })), activeTab === 'transform' && (jsxs("div", { children: [jsx("div", { className: cs.sectionTitleMb8, children: t('photoEditor.rotation', 'Rotation') }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: "dark", size: "sm", onClick: () => {
                                             setRotation((rotation - 90 + 360) % 360);
                                             pushHistory();
                                         }, children: [jsx(NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), " -90\u00B0"] }), jsxs(Button, { variant: "dark", size: "sm", onClick: () => {
@@ -113,13 +114,13 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                         }, children: [jsx(NiceIcon, { name: "forward", size: 14, style: { marginRight: 4 } }), " +90\u00B0"] }), jsx(Button, { variant: "dark", size: "sm", onClick: () => {
                                             setRotation(0);
                                             pushHistory();
-                                        }, children: "0\u00B0" })] }), jsx("div", { className: cs.sectionTitleMb8, children: "Flip" }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: flipH ? 'outline-info' : 'dark', size: "sm", onClick: () => {
+                                        }, children: "0\u00B0" })] }), jsx("div", { className: cs.sectionTitleMb8, children: t('photoEditor.flip', 'Flip') }), jsxs("div", { className: cs.transformRow, children: [jsxs(Button, { variant: flipH ? 'outline-info' : 'dark', size: "sm", onClick: () => {
                                             setFlipH(!flipH);
                                             pushHistory();
-                                        }, children: [jsx(NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), " Horizontal"] }), jsxs(Button, { variant: flipV ? 'outline-info' : 'dark', size: "sm", onClick: () => {
+                                        }, 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 } }), " Vertical"] })] }), jsx("div", { className: cs.sectionTitleMb8, children: "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: () => {
@@ -127,20 +128,20 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                         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) => {
                                                     e.stopPropagation();
                                                     deleteOverlay(ov.id);
-                                                }, className: cs.overlayDeleteBtn, "aria-label": t('photoEditor.deleteLayer', 'Delete layer'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, ov.id)))] }))] })), activeTab === 'text' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx(NiceIcon, { name: "type", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.addCaption', 'Add caption')] }), jsx(TextArea, { rows: 2, value: textDraft, onChange: (e) => setTextDraft(e.target.value), placeholder: t('photoEditor.textPlaceholder', 'Enter text…'), className: cs.textArea }), jsxs("div", { className: cs.textBtnRow, children: [jsx(Button, { variant: textBold ? 'light' : 'dark', size: "sm", onClick: () => setTextBold(!textBold), title: "Bold", className: cs.textFormatBtn, style: { fontWeight: 700 }, children: "B" }), jsx(Button, { variant: textItalic ? 'light' : 'dark', size: "sm", onClick: () => setTextItalic(!textItalic), title: "Italic", className: cs.textFormatBtn, style: { fontStyle: 'italic' }, children: "I" }), jsx(Button, { variant: textOutline ? 'light' : 'dark', size: "sm", onClick: () => setTextOutline(!textOutline), title: "Kontur", className: cs.textFormatBtn, children: "O" }), jsx(Button, { variant: textBg ? 'light' : 'dark', size: "sm", onClick: () => setTextBg(!textBg), title: t('photoEditor.background', 'Background'), className: cs.textFormatBtn, children: jsx(NiceIcon, { name: "square", size: 14 }) }), jsx("input", { type: "color", value: textColor, onChange: (e) => setTextColor(e.target.value), className: cs.colorInputLg, title: t('photoEditor.textColour', 'Text colour') })] }), jsxs("div", { className: cs.sliderRow, children: [jsxs("span", { className: cs.sliderLabel, children: [t('photoEditor.size', 'Size'), ":"] }), jsx(RangeInput, { min: 12, max: 120, value: textFontSize, onChange: (e) => setTextFontSize(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [textFontSize, "px"] })] }), jsxs(Button, { size: "sm", className: cs.accentBtn, style: { background: accent, borderColor: accent }, disabled: !textDraft.trim(), onClick: () => {
+                                                }, className: cs.overlayDeleteBtn, "aria-label": t('photoEditor.deleteLayer', 'Delete layer'), children: jsx(NiceIcon, { name: "close", size: 14 }) })] }, ov.id)))] }))] })), activeTab === 'text' && (jsxs("div", { children: [jsx(OverlayToolbar, { api: api }), jsxs("div", { className: cs.sectionTitleMb8, children: [jsx(NiceIcon, { name: "type", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.addCaption', 'Add caption')] }), jsx(TextArea, { rows: 2, value: textDraft, onChange: (e) => setTextDraft(e.target.value), placeholder: t('photoEditor.textPlaceholder', 'Enter text…'), className: cs.textArea }), jsxs("div", { className: cs.textBtnRow, children: [jsx(Button, { variant: textBold ? 'light' : 'dark', size: "sm", onClick: () => setTextBold(!textBold), title: t('photoEditor.bold', 'Bold'), className: cs.textFormatBtn, style: { fontWeight: 700 }, children: "B" }), jsx(Button, { variant: textItalic ? 'light' : 'dark', size: "sm", onClick: () => setTextItalic(!textItalic), title: t('photoEditor.italic', 'Italic'), className: cs.textFormatBtn, style: { fontStyle: 'italic' }, children: "I" }), jsx(Button, { variant: textOutline ? 'light' : 'dark', size: "sm", onClick: () => setTextOutline(!textOutline), title: t('photoEditor.outline', 'Outline'), className: cs.textFormatBtn, children: "O" }), jsx(Button, { variant: textBg ? 'light' : 'dark', size: "sm", onClick: () => setTextBg(!textBg), title: t('photoEditor.background', 'Background'), className: cs.textFormatBtn, children: jsx(NiceIcon, { name: "square", size: 14 }) }), jsx("input", { type: "color", value: textColor, onChange: (e) => setTextColor(e.target.value), className: cs.colorInputLg, title: t('photoEditor.textColour', 'Text colour') })] }), jsxs("div", { className: cs.sliderRow, children: [jsxs("span", { className: cs.sliderLabel, children: [t('photoEditor.size', 'Size'), ":"] }), jsx(RangeInput, { min: 12, max: 120, value: textFontSize, onChange: (e) => setTextFontSize(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxs("span", { className: cs.sliderValue, style: { color: accent }, children: [textFontSize, "px"] })] }), jsxs(Button, { size: "sm", className: cs.accentBtn, style: { background: accent, borderColor: accent }, disabled: !textDraft.trim(), onClick: () => {
                                     const ov = createTextOverlay(textDraft);
                                     ov.color = textColor;
                                     ov.bold = textBold;
@@ -164,13 +165,13 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                                         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 } }), " 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: "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 } }), " Ramki"] }), 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;
@@ -178,7 +179,7 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                         }, 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 } }), " Freehand drawing"] }), jsxs("div", { className: cs.sectionInfoMb, children: [jsx(NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), "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',
@@ -191,7 +192,7 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                     ].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%',
@@ -212,15 +213,14 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                                 }));
                                                 pushHistory();
                                             }
-                                        }, className: cs.drawActionBtn, children: [jsx(NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), " Undo stroke"] }), jsxs(Button, { variant: "outline-danger", size: "sm", onClick: () => {
+                                        }, className: cs.drawActionBtn, children: [jsx(NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.undoStroke', 'Undo stroke')] }), jsxs(Button, { variant: "outline-danger", size: "sm", onClick: () => {
                                             if (drawingOverlayRef.current) {
                                                 deleteOverlay(drawingOverlayRef.current.id);
                                                 drawingOverlayRef.current = null;
                                             }
-                                        }, className: cs.drawActionBtn, children: [jsx(NiceIcon, { name: "trash", size: 14, style: { marginRight: 4 } }), " Clear"] })] }), jsxs(Button, { variant: "dark", size: "sm", className: "mt-2 w-100", onClick: () => {
+                                        }, className: cs.drawActionBtn, children: [jsx(NiceIcon, { name: "trash", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.clear', 'Clear')] })] }), jsxs(Button, { variant: "dark", size: "sm", className: "mt-2 w-100", onClick: () => {
                                     drawingOverlayRef.current = null;
-                                }, children: [jsx(NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }), " New drawing layer"] })] }))] })] }));
-});
-PhotoEditorLeftPanel.displayName = 'PhotoEditorLeftPanel';
+                                }, children: [jsx(NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.newDrawingLayer', 'New drawing layer')] })] }))] })] }));
+}), { displayName: 'PhotoEditorLeftPanel' });
 
 export { PhotoEditorLeftPanel as default };

package/dist/esm/photo/PhotoEditorToolbar.js

@@ -4,15 +4,15 @@ import React from 'react';
 import { Button } from '../core/LocalUI.js';
 import cs from './PhotoEditor.module.css.js';
 
-const PhotoEditorToolbar = React.memo(({ api }) => {
+const PhotoEditorToolbar = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api }) => {
     const { t, accent, historyIdx, historyLength, undo, redo, handleReset, showCompare, setShowCompare, handleDownload, handleCopyToClipboard, handleShareNative, onCancel, handleSave, } = api;
-    return (jsxs("div", { className: cs.toolbar, children: [jsxs("div", { className: cs.toolbarGroup, children: [jsx(Button, { variant: "dark", size: "sm", onClick: undo, disabled: historyIdx <= 0, title: `${t('photoEditor.undo', 'Undo')} (Ctrl+Z)`, children: jsx(NiceIcon, { name: "reply", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: redo, disabled: historyIdx >= historyLength - 1, title: t('photoEditor.redo', 'Redo (Ctrl+Y)'), children: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleReset, title: "Reset", children: jsx(NiceIcon, { name: "refresh", size: 14 }) }), jsx("div", { className: cs.toolbarDivider }), jsx(Button, { variant: showCompare ? 'outline-info' : 'dark', size: "sm", onClick: () => setShowCompare(!showCompare), title: t('photoEditor.compareOriginal', 'Compare with original'), children: jsx(NiceIcon, { name: "columns", size: 14 }) }), jsx("div", { className: cs.toolbarDivider }), jsx(Button, { variant: "dark", size: "sm", onClick: handleDownload, title: "Download", children: jsx(NiceIcon, { name: "download", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleCopyToClipboard, title: "Copy to clipboard", children: jsx(NiceIcon, { name: "clipboard", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleShareNative, title: t('common.share', 'Share'), children: jsx(NiceIcon, { name: "send", size: 14 }) })] }), jsxs("div", { className: cs.toolbarTitle, style: { color: accent }, children: [jsx(NiceIcon, { name: "wand", size: 14, style: { marginRight: 8 } }), t('photoEditor.title', 'Photo Editor')] }), jsxs("div", { className: cs.toolbarGroup, children: [jsxs(Button, { variant: "outline-secondary", size: "sm", onClick: onCancel, children: [jsx(NiceIcon, { name: "close", size: 14, style: { marginRight: 4 } }), ' ', t('common.cancel', 'Cancel')] }), jsxs(Button, { size: "sm", style: {
+    return (jsxs("div", { className: cs.toolbar, children: [jsxs("div", { className: cs.toolbarGroup, children: [jsx(Button, { variant: "dark", size: "sm", onClick: undo, disabled: historyIdx <= 0, title: `${t('photoEditor.undo', 'Undo')} (Ctrl+Z)`, children: jsx(NiceIcon, { name: "reply", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: redo, disabled: historyIdx >= historyLength - 1, title: t('photoEditor.redo', 'Redo (Ctrl+Y)'), children: jsx(NiceIcon, { name: "forward", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleReset, title: t('photoEditor.reset', 'Reset'), children: jsx(NiceIcon, { name: "refresh", size: 14 }) }), jsx("div", { className: cs.toolbarDivider }), jsx(Button, { variant: showCompare ? 'outline-info' : 'dark', size: "sm", onClick: () => setShowCompare(!showCompare), title: t('photoEditor.compareOriginal', 'Compare with original'), children: jsx(NiceIcon, { name: "columns", size: 14 }) }), jsx("div", { className: cs.toolbarDivider }), jsx(Button, { variant: "dark", size: "sm", onClick: handleDownload, title: t('photoEditor.download', 'Download'), children: jsx(NiceIcon, { name: "download", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleCopyToClipboard, title: t('photoEditor.copyToClipboard', 'Copy to clipboard'), children: jsx(NiceIcon, { name: "clipboard", size: 14 }) }), jsx(Button, { variant: "dark", size: "sm", onClick: handleShareNative, title: t('common.share', 'Share'), children: jsx(NiceIcon, { name: "send", size: 14 }) })] }), jsxs("div", { className: cs.toolbarTitle, style: { color: accent }, children: [jsx(NiceIcon, { name: "wand", size: 14, style: { marginRight: 8 } }), t('photoEditor.title', 'Photo Editor')] }), jsxs("div", { className: cs.toolbarGroup, children: [jsxs(Button, { variant: "outline-secondary", size: "sm", onClick: onCancel, children: [jsx(NiceIcon, { name: "close", size: 14, style: { marginRight: 4 } }), ' ', t('common.cancel', 'Cancel')] }), jsxs(Button, { size: "sm", style: {
                             background: accent,
                             borderColor: accent,
                             color: 'var(--nice-color-white, #fff)',
                             fontWeight: 600,
                         }, onClick: handleSave, children: [jsx(NiceIcon, { name: "check", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.apply', 'Apply')] })] })] }));
-});
-PhotoEditorToolbar.displayName = 'PhotoEditorToolbar';
+}), { displayName: 'PhotoEditorToolbar' });
 
 export { PhotoEditorToolbar as default };

package/dist/esm/photo/photoFilters.js

@@ -285,6 +285,7 @@ function brownie(data) {
 function duotone(data, params) {
     const out = cloneImageData(data);
     const d = out.data;
+    // audit-allow: literal-color +2 — the duotone filter's default inks, written into the photo
     const dark = hexToRgb((params === null || params === void 0 ? void 0 : params.darkColor) || '#001f3f');
     const light = hexToRgb((params === null || params === void 0 ? void 0 : params.lightColor) || '#ff851b');
     for (let i = 0; i < d.length; i += 4) {

package/dist/esm/pixel/PixelEditor.js

@@ -1,6 +1,8 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { NiceAppShell, NiceModal, NiceNumberInput, NiceButton } from '@nice2dev/ui';
 import { useState, useCallback } from 'react';
+import { EditorAskDialog } from '../core/editorAsk.js';
+import { useNiceTranslation } from '../core/i18n.js';
 import styles from './PixelEditor.module.css.js';
 import PixelEditorCanvas from './PixelEditorCanvas.js';
 import PixelEditorMenuBar from './PixelEditorMenuBar.js';
@@ -12,20 +14,21 @@ import NiceSpriteGeneratorPanel from './SpriteGeneratorPanel.js';
 import { usePixelEditor } from './usePixelEditor.js';
 
 const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onSaveToLibrary, }) => {
+    const { t } = useNiceTranslation();
     const api = usePixelEditor({ initialWidth, initialHeight, onSaveToLibrary });
     const [showGenerator, setShowGenerator] = useState(false);
     const handleGeneratorSend = useCallback((imageData) => {
         var _a;
         (_a = api.importImageData) === null || _a === void 0 ? void 0 : _a.call(api, imageData);
     }, [api]);
-    return (jsxs(Fragment, { children: [jsx("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) => {
+    return (jsxs(Fragment, { children: [jsx(EditorAskDialog, { ask: api.pendingAsk }), jsx("input", { ref: api.fInp, type: "file", accept: ".ase,.aseprite,.png,.jpg,.jpeg,.gif,.bmp,.webp,.svg,.tga,.ico,.tiff,.tif,.avif", style: { display: 'none' }, onChange: (e) => {
                     var _a;
                     const f = (_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0];
                     if (f) {
                         api.openFile(f);
                     }
                     e.target.value = '';
-                } }), jsx(NiceAppShell, { className: className, flush: true, menubar: jsx(PixelEditorMenuBar, { api: api, hasOnSaveToLibrary: !!onSaveToLibrary, onOpenGenerator: () => setShowGenerator(true) }), sidebar: jsx(PixelEditorToolbar, { api: api }), rightSidebar: jsx(PixelEditorRightPanel, { api: api }), bottomPanel: jsx(PixelEditorTimeline, { api: api }), statusBar: jsx(PixelEditorStatusBar, { api: api }), children: jsx(PixelEditorCanvas, { api: api }) }), showGenerator && (jsx(NiceSpriteGeneratorPanel, { onSendToCanvas: handleGeneratorSend, onClose: () => setShowGenerator(false) })), jsxs(NiceModal, { open: api.dlgNew, onClose: () => api.setDlgNew(false), title: "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": "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": "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],
@@ -39,7 +42,7 @@ const NicePixelEditor = ({ initialWidth = 64, initialHeight = 64, className, onS
                         ].map(([w, h]) => (jsxs(NiceButton, { className: styles.btnSecondary, variant: "ghost", size: "sm", style: { fontSize: 10, padding: '2px 6px' }, onClick: () => {
                                 api.setNw(w);
                                 api.setNh(h);
-                            }, children: [w, "x", h] }, `${w}x${h}`))) }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: "Cancel" }), jsx(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: "Create" })] })] })] }));
+                            }, children: [w, "x", h] }, `${w}x${h}`))) }), jsxs("div", { className: styles.dialogActions, children: [jsx(NiceButton, { className: styles.btnSecondary, variant: "ghost", onClick: () => api.setDlgNew(false), children: t('pixelEditor.cancel', 'Cancel') }), jsx(NiceButton, { className: styles.btnPrimary, variant: "primary", onClick: () => api.newDoc(api.nw, api.nh), children: t('pixelEditor.create', 'Create') })] })] })] }));
 };
 
 export { NicePixelEditor };

package/dist/esm/pixel/PixelEditorCanvas.js

@@ -1,12 +1,16 @@
 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 = React.memo(({ api }) => (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": "Pixel editor canvas" }) })));
-PixelEditorCanvas.displayName = 'PixelEditorCanvas';
+const PixelEditorCanvas = /* @__PURE__ */ Object.assign(
+/* @__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 };

package/dist/esm/pixel/PixelEditorMenuBar.js

@@ -2,40 +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 = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => {
+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,
                         },
@@ -45,35 +76,70 @@ const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerato
         },
         {
             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),
                 },
@@ -81,11 +147,11 @@ const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerato
         },
         {
             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,
                 },
@@ -93,7 +159,6 @@ const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerato
         },
     ];
     return (jsx("div", { className: styles.menuBar, children: jsx(NiceMenu, { items: items, orientation: "horizontal", variant: "ghost", density: "compact" }) }));
-});
-PixelEditorMenuBar.displayName = 'PixelEditorMenuBar';
+}), { displayName: 'PixelEditorMenuBar' });
 
 export { PixelEditorMenuBar as default };