@nice2dev/ui-graphics 1.1.10 → 1.2.1

package/dist/cjs/photo/PhotoEditorLeftPanel.js

@@ -17,13 +17,14 @@ const OverlayToolbar = ({ api }) => {
     if (!selectedOverlay) {
         return null;
     }
-    return (jsxRuntime.jsxs("div", { className: PhotoEditor_module.overlayToolbar, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.overlayToolbarLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "box", size: 14, style: { marginRight: 4 } }), "Warstwa"] }), jsxRuntime.jsx(LocalUI.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') }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValueSm, style: { color: accent }, children: [Math.round(((_b = selectedOverlay.opacity) !== null && _b !== void 0 ? _b : 1) * 100), "%"] }), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(LocalUI.RangeInput, { min: 20, max: 500, value: ((_c = selectedOverlay.scaleX) !== null && _c !== void 0 ? _c : 1) * 100, onChange: (e) => {
+    return (jsxRuntime.jsxs("div", { className: PhotoEditor_module.overlayToolbar, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.overlayToolbarLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "box", size: 14, style: { marginRight: 4 } }), t('photoEditor.layer', 'Layer')] }), jsxRuntime.jsx(LocalUI.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') }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValueSm, style: { color: accent }, children: [Math.round(((_b = selectedOverlay.opacity) !== null && _b !== void 0 ? _b : 1) * 100), "%"] }), selectedOverlay.type !== 'drawing' && selectedOverlay.type !== 'frame' && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(LocalUI.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" }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.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' && (jsxRuntime.jsx(LocalUI.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') })), jsxRuntime.jsx(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => moveOverlayBack(selectedOverlay.id), title: t('photoEditor.moveBack', 'Move back'), className: PhotoEditor_module.overlayToolbarBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 14 }) }), jsxRuntime.jsx(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => moveOverlayForward(selectedOverlay.id), title: t('photoEditor.moveForward', 'Move forward'), className: PhotoEditor_module.overlayToolbarBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-up", size: 14 }) }), jsxRuntime.jsx(LocalUI.Button, { variant: "outline-danger", size: "sm", onClick: () => deleteOverlay(selectedOverlay.id), className: PhotoEditor_module.overlayToolbarBtn, title: t('photoEditor.deleteLayer', 'Delete layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "trash", size: 14 }) })] }));
+                        }, onMouseUp: pushHistory, accentColor: accent, style: { maxWidth: 60 }, title: t('photoEditor.scale', 'Scale') }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.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' && (jsxRuntime.jsx(LocalUI.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') })), jsxRuntime.jsx(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => moveOverlayBack(selectedOverlay.id), title: t('photoEditor.moveBack', 'Move back'), className: PhotoEditor_module.overlayToolbarBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 14 }) }), jsxRuntime.jsx(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => moveOverlayForward(selectedOverlay.id), title: t('photoEditor.moveForward', 'Move forward'), className: PhotoEditor_module.overlayToolbarBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-up", size: 14 }) }), jsxRuntime.jsx(LocalUI.Button, { variant: "outline-danger", size: "sm", onClick: () => deleteOverlay(selectedOverlay.id), className: PhotoEditor_module.overlayToolbarBtn, title: t('photoEditor.deleteLayer', 'Delete layer'), children: jsxRuntime.jsx(uiCore.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
@@ -72,16 +73,16 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                     }, children: cat.label }, cat.key))) }), jsxRuntime.jsx("div", { className: PhotoEditor_module.filterGrid, children: filteredList.map((filter) => (jsxRuntime.jsx(FilterThumb, { filter: filter, selected: selectedFilter === filter.id, accent: accent, onSelect: () => {
                                         setSelectedFilter(filter.id);
                                         pushHistory();
-                                    }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensitySection, children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensityHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), "Intensity"] }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustColumn, children: [photoEditorTypes.ADJUSTMENT_SLIDERS.map((sl) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsxRuntime.jsx("span", { className: PhotoEditor_module.adjustValue, style: {
+                                    }, generateThumbnail: generateThumbnail }, filter.id))) }), selectedFilter !== 'none' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensitySection, children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.intensityHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "bar-chart", size: 14, style: { marginRight: 4 } }), t('photoEditor.intensity', 'Intensity')] }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [Math.round(filterIntensity * 100), "%"] })] }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 0, max: 100, value: filterIntensity * 100, onChange: (e) => setFilterIntensity(Number(e.target.value) / 100), onMouseUp: () => pushHistory(), accentColor: accent })] }))] })), activeTab === 'adjust' && (jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustColumn, children: [photoEditorTypes.ADJUSTMENT_SLIDERS.map((sl) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.adjustHeader, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: sl.icon, size: 14, style: { marginRight: 4 } }), sl.label] }), jsxRuntime.jsx("span", { className: PhotoEditor_module.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] })] }), jsxRuntime.jsx(LocalUI.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))), jsxRuntime.jsxs(LocalUI.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] })] }), jsxRuntime.jsx(LocalUI.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))), jsxRuntime.jsxs(LocalUI.Button, { variant: "outline-secondary", size: "sm", className: "mt-2", onClick: () => {
                                     handleAdjChange('brightness', 0);
                                     const defaults = { ...photoFilters.DEFAULT_ADJUSTMENTS };
                                     for (const key of Object.keys(defaults)) {
                                         handleAdjChange(key, defaults[key]);
                                     }
                                     pushHistory();
-                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetAdjustments', 'Reset adjustments')] })] })), activeTab === 'crop' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.cropInfo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), "Drag corners or edges to crop the photo."] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.cropAspectLabel, children: "Aspect ratio" }), jsxRuntime.jsx("div", { className: PhotoEditor_module.cropAspectRow, children: photoEditorTypes.ASPECT_RATIOS.map((ar) => (jsxRuntime.jsx("button", { onClick: () => {
+                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "refresh", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetAdjustments', 'Reset adjustments')] })] })), activeTab === 'crop' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: PhotoEditor_module.cropInfo, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.dragCornersOrEdgesTo', 'Drag corners or edges to crop the photo.')] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.cropAspectLabel, children: t('photoEditor.aspectRatio', 'Aspect ratio') }), jsxRuntime.jsx("div", { className: PhotoEditor_module.cropAspectRow, children: photoEditorTypes.ASPECT_RATIOS.map((ar) => (jsxRuntime.jsx("button", { onClick: () => {
                                         setCropAspect(ar.value);
                                         if (ar.value && cropRect && image) {
                                             let newW = cropRect.w;
@@ -106,7 +107,7 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                         setCropAspect(null);
                                         pushHistory();
                                     }
-                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "expand", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetCrop', 'Reset crop')] })] })), activeTab === 'transform' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: "Rotation" }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformRow, children: [jsxRuntime.jsxs(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => {
+                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "expand", size: 14, style: { marginRight: 4 } }), t('photoEditor.resetCrop', 'Reset crop')] })] })), activeTab === 'transform' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: t('photoEditor.rotation', 'Rotation') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformRow, children: [jsxRuntime.jsxs(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => {
                                             setRotation((rotation - 90 + 360) % 360);
                                             pushHistory();
                                         }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), " -90\u00B0"] }), jsxRuntime.jsxs(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => {
@@ -115,13 +116,13 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                         }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "forward", size: 14, style: { marginRight: 4 } }), " +90\u00B0"] }), jsxRuntime.jsx(LocalUI.Button, { variant: "dark", size: "sm", onClick: () => {
                                             setRotation(0);
                                             pushHistory();
-                                        }, children: "0\u00B0" })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: "Flip" }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformRow, children: [jsxRuntime.jsxs(LocalUI.Button, { variant: flipH ? 'outline-info' : 'dark', size: "sm", onClick: () => {
+                                        }, children: "0\u00B0" })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: t('photoEditor.flip', 'Flip') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformRow, children: [jsxRuntime.jsxs(LocalUI.Button, { variant: flipH ? 'outline-info' : 'dark', size: "sm", onClick: () => {
                                             setFlipH(!flipH);
                                             pushHistory();
-                                        }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), " Horizontal"] }), jsxRuntime.jsxs(LocalUI.Button, { variant: flipV ? 'outline-info' : 'dark', size: "sm", onClick: () => {
+                                        }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.horizontal', 'Horizontal')] }), jsxRuntime.jsxs(LocalUI.Button, { variant: flipV ? 'outline-info' : 'dark', size: "sm", onClick: () => {
                                             setFlipV(!flipV);
                                             pushHistory();
-                                        }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), " Vertical"] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: "Preview zoom" }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformZoomRow, children: [jsxRuntime.jsx(LocalUI.RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: (e) => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformInfo, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Rotation:" }), " ", rotation, "\u00B0"] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Flip H:" }), " ", flipH ? 'Yes' : 'No'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Flip V:" }), " ", flipV ? 'Yes' : 'No'] }), cropRect && (jsxRuntime.jsxs("div", { children: [jsxRuntime.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' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "circle", size: 14, style: { marginRight: 4 } }), " Stickers / Emoji"] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.pillRowGap3, children: photoOverlays.EMOJI_CATALOG.map((cat) => (jsxRuntime.jsxs("button", { onClick: () => setEmojiCat(cat.id), className: emojiCat === cat.id ? PhotoEditor_module.pillEmojiActive : PhotoEditor_module.pillEmoji, style: {
+                                        }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "move", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.vertical', 'Vertical')] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.sectionTitleMb8, children: t('photoEditor.previewZoom', 'Preview zoom') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformZoomRow, children: [jsxRuntime.jsx(LocalUI.RangeInput, { min: 50, max: 300, value: zoom * 100, onChange: (e) => setZoom(Number(e.target.value) / 100), accentColor: accent }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.transformZoomValue, style: { color: accent }, children: [Math.round(zoom * 100), "%"] })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.transformInfo, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Rotation:" }), " ", rotation, "\u00B0"] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Flip H:" }), " ", flipH ? 'Yes' : 'No'] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("strong", { children: "Flip V:" }), " ", flipV ? 'Yes' : 'No'] }), cropRect && (jsxRuntime.jsxs("div", { children: [jsxRuntime.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' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "circle", size: 14, style: { marginRight: 4 } }), " Stickers / Emoji"] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.pillRowGap3, children: photoOverlays.EMOJI_CATALOG.map((cat) => (jsxRuntime.jsxs("button", { onClick: () => setEmojiCat(cat.id), className: emojiCat === cat.id ? PhotoEditor_module.pillEmojiActive : PhotoEditor_module.pillEmoji, style: {
                                         borderColor: emojiCat === cat.id ? accent : undefined,
                                         background: emojiCat === cat.id ? accentDim : undefined,
                                     }, children: [cat.icon, " ", cat.label] }, cat.id))) }), jsxRuntime.jsx("div", { className: PhotoEditor_module.emojiGrid, children: (_a = photoOverlays.EMOJI_CATALOG.find((c) => c.id === emojiCat)) === null || _a === void 0 ? void 0 : _a.emojis.map((em, idx) => (jsxRuntime.jsx("button", { onClick: () => {
@@ -142,7 +143,7 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                                                     : '' }), jsxRuntime.jsx("button", { onClick: (e) => {
                                                     e.stopPropagation();
                                                     deleteOverlay(ov.id);
-                                                }, className: PhotoEditor_module.overlayDeleteBtn, "aria-label": t('photoEditor.deleteLayer', 'Delete layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, ov.id)))] }))] })), activeTab === 'text' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitleMb8, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "type", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.addCaption', 'Add caption')] }), jsxRuntime.jsx(LocalUI.TextArea, { rows: 2, value: textDraft, onChange: (e) => setTextDraft(e.target.value), placeholder: t('photoEditor.textPlaceholder', 'Enter text…'), className: PhotoEditor_module.textArea }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.textBtnRow, children: [jsxRuntime.jsx(LocalUI.Button, { variant: textBold ? 'light' : 'dark', size: "sm", onClick: () => setTextBold(!textBold), title: "Bold", className: PhotoEditor_module.textFormatBtn, style: { fontWeight: 700 }, children: "B" }), jsxRuntime.jsx(LocalUI.Button, { variant: textItalic ? 'light' : 'dark', size: "sm", onClick: () => setTextItalic(!textItalic), title: "Italic", className: PhotoEditor_module.textFormatBtn, style: { fontStyle: 'italic' }, children: "I" }), jsxRuntime.jsx(LocalUI.Button, { variant: textOutline ? 'light' : 'dark', size: "sm", onClick: () => setTextOutline(!textOutline), title: "Kontur", className: PhotoEditor_module.textFormatBtn, children: "O" }), jsxRuntime.jsx(LocalUI.Button, { variant: textBg ? 'light' : 'dark', size: "sm", onClick: () => setTextBg(!textBg), title: t('photoEditor.background', 'Background'), className: PhotoEditor_module.textFormatBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 14 }) }), jsxRuntime.jsx("input", { type: "color", value: textColor, onChange: (e) => setTextColor(e.target.value), className: PhotoEditor_module.colorInputLg, title: t('photoEditor.textColour', 'Text colour') })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [t('photoEditor.size', 'Size'), ":"] }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 12, max: 120, value: textFontSize, onChange: (e) => setTextFontSize(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [textFontSize, "px"] })] }), jsxRuntime.jsxs(LocalUI.Button, { size: "sm", className: PhotoEditor_module.accentBtn, style: { background: accent, borderColor: accent }, disabled: !textDraft.trim(), onClick: () => {
+                                                }, className: PhotoEditor_module.overlayDeleteBtn, "aria-label": t('photoEditor.deleteLayer', 'Delete layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] }, ov.id)))] }))] })), activeTab === 'text' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitleMb8, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "type", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.addCaption', 'Add caption')] }), jsxRuntime.jsx(LocalUI.TextArea, { rows: 2, value: textDraft, onChange: (e) => setTextDraft(e.target.value), placeholder: t('photoEditor.textPlaceholder', 'Enter text…'), className: PhotoEditor_module.textArea }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.textBtnRow, children: [jsxRuntime.jsx(LocalUI.Button, { variant: textBold ? 'light' : 'dark', size: "sm", onClick: () => setTextBold(!textBold), title: t('photoEditor.bold', 'Bold'), className: PhotoEditor_module.textFormatBtn, style: { fontWeight: 700 }, children: "B" }), jsxRuntime.jsx(LocalUI.Button, { variant: textItalic ? 'light' : 'dark', size: "sm", onClick: () => setTextItalic(!textItalic), title: t('photoEditor.italic', 'Italic'), className: PhotoEditor_module.textFormatBtn, style: { fontStyle: 'italic' }, children: "I" }), jsxRuntime.jsx(LocalUI.Button, { variant: textOutline ? 'light' : 'dark', size: "sm", onClick: () => setTextOutline(!textOutline), title: t('photoEditor.outline', 'Outline'), className: PhotoEditor_module.textFormatBtn, children: "O" }), jsxRuntime.jsx(LocalUI.Button, { variant: textBg ? 'light' : 'dark', size: "sm", onClick: () => setTextBg(!textBg), title: t('photoEditor.background', 'Background'), className: PhotoEditor_module.textFormatBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "square", size: 14 }) }), jsxRuntime.jsx("input", { type: "color", value: textColor, onChange: (e) => setTextColor(e.target.value), className: PhotoEditor_module.colorInputLg, title: t('photoEditor.textColour', 'Text colour') })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, children: [jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderLabel, children: [t('photoEditor.size', 'Size'), ":"] }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 12, max: 120, value: textFontSize, onChange: (e) => setTextFontSize(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [textFontSize, "px"] })] }), jsxRuntime.jsxs(LocalUI.Button, { size: "sm", className: PhotoEditor_module.accentBtn, style: { background: accent, borderColor: accent }, disabled: !textDraft.trim(), onClick: () => {
                                     const ov = createTextOverlay(textDraft);
                                     ov.color = textColor;
                                     ov.bold = textBold;
@@ -166,13 +167,13 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                                         italic: !selectedOverlay.italic,
                                                     });
                                                     pushHistory();
-                                                }, className: PhotoEditor_module.textFormatBtnSm, style: { fontStyle: 'italic' }, children: "I" })] })] }))] })), activeTab === 'shapes' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }), " Shapes"] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.shapeColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.shapeColorLabel, children: "Stroke:" }), jsxRuntime.jsx("input", { type: "color", value: shapeStroke, onChange: (e) => setShapeStroke(e.target.value), className: PhotoEditor_module.colorInput, title: "Stroke color" }), jsxRuntime.jsx("span", { className: PhotoEditor_module.shapeColorLabelMl, children: "Fill:" }), jsxRuntime.jsx("input", { type: "color", value: shapeFill || '#ffffff', onChange: (e) => setShapeFill(e.target.value), className: PhotoEditor_module.colorInput, title: t('photoEditor.fillColor', 'Fill color') }), jsxRuntime.jsx(LocalUI.Button, { variant: shapeFill ? 'light' : 'dark', size: "sm", onClick: () => setShapeFill(shapeFill ? '' : '#ffffff'), className: PhotoEditor_module.shapeFillToggle, children: shapeFill ? 'Off' : 'On' })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: "Width:" }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 20, value: shapeStrokeW, onChange: (e) => setShapeStrokeW(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [shapeStrokeW, "px"] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.shapeGrid, children: photoOverlays.SHAPE_CATALOG.map((sh) => (jsxRuntime.jsx("button", { title: sh.label, onClick: () => {
+                                                }, className: PhotoEditor_module.textFormatBtnSm, style: { fontStyle: 'italic' }, children: "I" })] })] }))] })), activeTab === 'shapes' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "star", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.shapes', 'Shapes')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.shapeColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.shapeColorLabel, children: "Stroke:" }), jsxRuntime.jsx("input", { type: "color", value: shapeStroke, onChange: (e) => setShapeStroke(e.target.value), className: PhotoEditor_module.colorInput, title: t('photoEditor.strokeColor', 'Stroke color') }), jsxRuntime.jsx("span", { className: PhotoEditor_module.shapeColorLabelMl, children: "Fill:" }), jsxRuntime.jsx("input", { type: "color", value: shapeFill || '#ffffff', onChange: (e) => setShapeFill(e.target.value), className: PhotoEditor_module.colorInput, title: t('photoEditor.fillColor', 'Fill color') }), jsxRuntime.jsx(LocalUI.Button, { variant: shapeFill ? 'light' : 'dark', size: "sm", onClick: () => setShapeFill(shapeFill ? '' : '#ffffff'), className: PhotoEditor_module.shapeFillToggle, children: shapeFill ? 'Off' : 'On' })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sliderRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: "Width:" }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 20, value: shapeStrokeW, onChange: (e) => setShapeStrokeW(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsxs("span", { className: PhotoEditor_module.sliderValue, style: { color: accent }, children: [shapeStrokeW, "px"] })] }), jsxRuntime.jsx("div", { className: PhotoEditor_module.shapeGrid, children: photoOverlays.SHAPE_CATALOG.map((sh) => (jsxRuntime.jsx("button", { title: sh.label, onClick: () => {
                                         const ov = createShapeOverlay(sh.id);
                                         ov.strokeColor = shapeStroke;
                                         ov.fillColor = shapeFill || null;
                                         ov.strokeWidth = shapeStrokeW;
                                         addOverlay(ov);
-                                    }, className: PhotoEditor_module.shapeBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: sh.icon, size: 18 }) }, sh.id))) }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }), " Ramki"] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameColorRow, children: [jsxRuntime.jsx("input", { type: "color", value: frameColor, onChange: (e) => setFrameColor(e.target.value), className: PhotoEditor_module.colorInput, "aria-label": t('photoEditor.frameColor', 'Frame color') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameThicknessWrap, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: "Grub.:" }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 10, value: frameThick, onChange: (e) => setFrameThick(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsx("span", { className: PhotoEditor_module.frameThicknessValue, style: { color: accent }, children: frameThick })] })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameGrid, children: [photoOverlays.FRAME_CATALOG.map((fr) => (jsxRuntime.jsx("button", { title: fr.label, onClick: () => {
+                                    }, className: PhotoEditor_module.shapeBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: sh.icon, size: 18 }) }, sh.id))) }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitle, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "image", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.frames', 'Frames')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameColorRow, children: [jsxRuntime.jsx("input", { type: "color", value: frameColor, onChange: (e) => setFrameColor(e.target.value), className: PhotoEditor_module.colorInput, "aria-label": t('photoEditor.frameColor', 'Frame color') }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameThicknessWrap, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: "Grub.:" }), jsxRuntime.jsx(LocalUI.RangeInput, { min: 1, max: 10, value: frameThick, onChange: (e) => setFrameThick(Number(e.target.value)), accentColor: accent, style: { flex: 1 } }), jsxRuntime.jsx("span", { className: PhotoEditor_module.frameThicknessValue, style: { color: accent }, children: frameThick })] })] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.frameGrid, children: [photoOverlays.FRAME_CATALOG.map((fr) => (jsxRuntime.jsx("button", { title: fr.label, onClick: () => {
                                             setOverlays((prev) => prev.filter((o) => o.type !== 'frame'));
                                             const ov = createFrameOverlay(fr.id, frameColor);
                                             ov.thickness = frameThick / 100;
@@ -180,7 +181,7 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                         }, className: PhotoEditor_module.frameBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: fr.icon, size: 18 }) }, fr.id))), jsxRuntime.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: PhotoEditor_module.removeFrameBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] })] })), activeTab === 'draw' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitleMb8, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }), " Freehand drawing"] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionInfoMb, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), "Draw directly on the photo by holding the left mouse button."] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.quickColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: "Color:" }), jsxRuntime.jsx("input", { type: "color", value: drawColor, onChange: (e) => setDrawColor(e.target.value), className: PhotoEditor_module.colorInputDraw, "aria-label": t('photoEditor.drawColor', 'Drawing color') }), [
+                                        }, className: PhotoEditor_module.removeFrameBtn, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "close", size: 14 }) })] })] })), activeTab === 'draw' && (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(OverlayToolbar, { api: api }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionTitleMb8, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "brush", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.freehandDrawing', 'Freehand drawing')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.sectionInfoMb, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "info", size: 14, style: { marginRight: 4 } }), t('photoEditor.drawDirectlyOnThePhoto', 'Draw directly on the photo by holding the left mouse button.')] }), jsxRuntime.jsxs("div", { className: PhotoEditor_module.quickColorRow, children: [jsxRuntime.jsx("span", { className: PhotoEditor_module.sliderLabel, children: "Color:" }), jsxRuntime.jsx("input", { type: "color", value: drawColor, onChange: (e) => setDrawColor(e.target.value), className: PhotoEditor_module.colorInputDraw, "aria-label": t('photoEditor.drawColor', 'Drawing color') }), [
                                         '#ff0000',
                                         '#ff8800',
                                         '#ffff00',
@@ -214,15 +215,14 @@ const PhotoEditorLeftPanel = React.memo(({ api }) => {
                                                 }));
                                                 pushHistory();
                                             }
-                                        }, className: PhotoEditor_module.drawActionBtn, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), " Undo stroke"] }), jsxRuntime.jsxs(LocalUI.Button, { variant: "outline-danger", size: "sm", onClick: () => {
+                                        }, className: PhotoEditor_module.drawActionBtn, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "reply", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.undoStroke', 'Undo stroke')] }), jsxRuntime.jsxs(LocalUI.Button, { variant: "outline-danger", size: "sm", onClick: () => {
                                             if (drawingOverlayRef.current) {
                                                 deleteOverlay(drawingOverlayRef.current.id);
                                                 drawingOverlayRef.current = null;
                                             }
-                                        }, className: PhotoEditor_module.drawActionBtn, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "trash", size: 14, style: { marginRight: 4 } }), " Clear"] })] }), jsxRuntime.jsxs(LocalUI.Button, { variant: "dark", size: "sm", className: "mt-2 w-100", onClick: () => {
+                                        }, className: PhotoEditor_module.drawActionBtn, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "trash", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.clear', 'Clear')] })] }), jsxRuntime.jsxs(LocalUI.Button, { variant: "dark", size: "sm", className: "mt-2 w-100", onClick: () => {
                                     drawingOverlayRef.current = null;
-                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }), " New drawing layer"] })] }))] })] }));
-});
-PhotoEditorLeftPanel.displayName = 'PhotoEditorLeftPanel';
+                                }, children: [jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 14, style: { marginRight: 4 } }), ' ', t('photoEditor.newDrawingLayer', 'New drawing layer')] })] }))] })] }));
+}), { displayName: 'PhotoEditorLeftPanel' });
 
 module.exports = PhotoEditorLeftPanel;

package/dist/cjs/photo/PhotoEditorToolbar.js

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

package/dist/cjs/photo/photoFilters.js

@@ -287,6 +287,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/cjs/pixel/PixelEditor.js

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

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

@@ -1,5 +1,5 @@
 'use strict';
 
-var styles = {"menuBar":"PixelEditor-module_menuBar__8JFld","menuSep":"PixelEditor-module_menuSep__pNZsR","toolbar":"PixelEditor-module_toolbar__paCGq","toolBtn":"PixelEditor-module_toolBtn__wD1Kj","toolBtnActive":"PixelEditor-module_toolBtnActive__R51U0","canvasContainer":"PixelEditor-module_canvasContainer__8z2AY","rightPanel":"PixelEditor-module_rightPanel__ZjrCh","panelSection":"PixelEditor-module_panelSection__3l225","collapseChevron":"PixelEditor-module_collapseChevron__Yuvz6","layerActions":"PixelEditor-module_layerActions__pZH1f","panelTitle":"PixelEditor-module_panelTitle__vYyeO","layerItem":"PixelEditor-module_layerItem__J-gtn","layerItemActive":"PixelEditor-module_layerItemActive__yPt29","layerVis":"PixelEditor-module_layerVis__Uj7n2","layerName":"PixelEditor-module_layerName__HovwJ","layerOpacity":"PixelEditor-module_layerOpacity__qmWvu","paletteGrid":"PixelEditor-module_paletteGrid__knY-n","paletteSwatch":"PixelEditor-module_paletteSwatch__MUbha","paletteSwatchActive":"PixelEditor-module_paletteSwatchActive__wDR4T","bottomPanel":"PixelEditor-module_bottomPanel__rviLF","timelineControls":"PixelEditor-module_timelineControls__Laroq","timelineFrames":"PixelEditor-module_timelineFrames__dw06F","frameThumb":"PixelEditor-module_frameThumb__2E9mG","frameThumbActive":"PixelEditor-module_frameThumbActive__Z0eK4","frameNum":"PixelEditor-module_frameNum__PoGQC","statusBar":"PixelEditor-module_statusBar__QnphD","dialogActions":"PixelEditor-module_dialogActions__fOa7a","btnPrimary":"PixelEditor-module_btnPrimary__FYlTy","btnSecondary":"PixelEditor-module_btnSecondary__qLfyJ","brushSlider":"PixelEditor-module_brushSlider__UxQ38","toolSep":"PixelEditor-module_toolSep__YIu-E","toolGroup":"PixelEditor-module_toolGroup__xA2lN","miniBtn":"PixelEditor-module_miniBtn__tg5N0","miniBtnActive":"PixelEditor-module_miniBtnActive__gpveu","colorSwatches":"PixelEditor-module_colorSwatches__jFuRX","brushShapes":"PixelEditor-module_brushShapes__2bBfl","pressureToggles":"PixelEditor-module_pressureToggles__AITuh","checkLabel":"PixelEditor-module_checkLabel__-d-TA","hsvPicker":"PixelEditor-module_hsvPicker__0ERIh","layerLock":"PixelEditor-module_layerLock__xeWnc","layerNameInput":"PixelEditor-module_layerNameInput__ZiOKv","layerControls":"PixelEditor-module_layerControls__MrpXo","blendSelect":"PixelEditor-module_blendSelect__QCwns","layerOpSlider":"PixelEditor-module_layerOpSlider__Vw-qs","genPanel":"PixelEditor-module_genPanel__99Md8","genHeader":"PixelEditor-module_genHeader__xN4FZ","genTabs":"PixelEditor-module_genTabs__No5Za","genTabBtn":"PixelEditor-module_genTabBtn__e2VhB","genTabBtnActive":"PixelEditor-module_genTabBtnActive__Rt3jQ","genBody":"PixelEditor-module_genBody__MuiQy","genLeft":"PixelEditor-module_genLeft__JdEw6","genCenter":"PixelEditor-module_genCenter__c5X0S","genRight":"PixelEditor-module_genRight__qFz11","genPreviewWrap":"PixelEditor-module_genPreviewWrap__360F-","genPreviewCanvas":"PixelEditor-module_genPreviewCanvas__75Lw2","genDirGrid":"PixelEditor-module_genDirGrid__xjEp7","genRow":"PixelEditor-module_genRow__awCw9","genPresetGrid":"PixelEditor-module_genPresetGrid__f9XK6","genPresetBtn":"PixelEditor-module_genPresetBtn__5C2We","genPresetBtnActive":"PixelEditor-module_genPresetBtnActive__WAGew","genPartGrid":"PixelEditor-module_genPartGrid__l17oc","genColorSwatches":"PixelEditor-module_genColorSwatches__acI6q","genColorSwatch":"PixelEditor-module_genColorSwatch__JE8BO","genAssemblyItem":"PixelEditor-module_genAssemblyItem__zNL2P","genAssemblyName":"PixelEditor-module_genAssemblyName__GU-kr","genFooter":"PixelEditor-module_genFooter__WkyJp","btnIcon":"PixelEditor-module_btnIcon__O59l9","propSelect":"PixelEditor-module_propSelect__4P0Qi","propInput":"PixelEditor-module_propInput__Q-kr2"};
+var styles = {"menuBar":"PixelEditor-module_menuBar__8JFld","menuSep":"PixelEditor-module_menuSep__pNZsR","toolbar":"PixelEditor-module_toolbar__paCGq","toolBtn":"PixelEditor-module_toolBtn__wD1Kj","toolBtnActive":"PixelEditor-module_toolBtnActive__R51U0","canvasContainer":"PixelEditor-module_canvasContainer__8z2AY","rightPanel":"PixelEditor-module_rightPanel__ZjrCh","panelSection":"PixelEditor-module_panelSection__3l225","collapseChevron":"PixelEditor-module_collapseChevron__Yuvz6","layerActions":"PixelEditor-module_layerActions__pZH1f","panelTitle":"PixelEditor-module_panelTitle__vYyeO","layerItem":"PixelEditor-module_layerItem__J-gtn","layerItemActive":"PixelEditor-module_layerItemActive__yPt29","layerVis":"PixelEditor-module_layerVis__Uj7n2","layerName":"PixelEditor-module_layerName__HovwJ","layerOpacity":"PixelEditor-module_layerOpacity__qmWvu","paletteGrid":"PixelEditor-module_paletteGrid__knY-n","paletteSwatch":"PixelEditor-module_paletteSwatch__MUbha","paletteSwatchActive":"PixelEditor-module_paletteSwatchActive__wDR4T","bottomPanel":"PixelEditor-module_bottomPanel__rviLF","timelineControls":"PixelEditor-module_timelineControls__Laroq","timelineFrames":"PixelEditor-module_timelineFrames__dw06F","frameThumb":"PixelEditor-module_frameThumb__2E9mG","frameThumbActive":"PixelEditor-module_frameThumbActive__Z0eK4","frameNum":"PixelEditor-module_frameNum__PoGQC","statusBar":"PixelEditor-module_statusBar__QnphD","dialogActions":"PixelEditor-module_dialogActions__fOa7a","btnPrimary":"PixelEditor-module_btnPrimary__FYlTy","btnSecondary":"PixelEditor-module_btnSecondary__qLfyJ","brushSlider":"PixelEditor-module_brushSlider__UxQ38","toolSep":"PixelEditor-module_toolSep__YIu-E","toolGroup":"PixelEditor-module_toolGroup__xA2lN","miniBtn":"PixelEditor-module_miniBtn__tg5N0","miniBtnActive":"PixelEditor-module_miniBtnActive__gpveu","colorSwatches":"PixelEditor-module_colorSwatches__jFuRX","brushShapes":"PixelEditor-module_brushShapes__2bBfl","pressureToggles":"PixelEditor-module_pressureToggles__AITuh","checkLabel":"PixelEditor-module_checkLabel__-d-TA","hsvPicker":"PixelEditor-module_hsvPicker__0ERIh","layerLock":"PixelEditor-module_layerLock__xeWnc","layerNameInput":"PixelEditor-module_layerNameInput__ZiOKv","layerControls":"PixelEditor-module_layerControls__MrpXo","blendSelect":"PixelEditor-module_blendSelect__QCwns","layerOpSlider":"PixelEditor-module_layerOpSlider__Vw-qs","genPanel":"PixelEditor-module_genPanel__99Md8","genTabs":"PixelEditor-module_genTabs__No5Za","genTabBtn":"PixelEditor-module_genTabBtn__e2VhB","genTabBtnActive":"PixelEditor-module_genTabBtnActive__Rt3jQ","genBody":"PixelEditor-module_genBody__MuiQy","genLeft":"PixelEditor-module_genLeft__JdEw6","genCenter":"PixelEditor-module_genCenter__c5X0S","genRight":"PixelEditor-module_genRight__qFz11","genPreviewWrap":"PixelEditor-module_genPreviewWrap__360F-","genPreviewCanvas":"PixelEditor-module_genPreviewCanvas__75Lw2","genDirGrid":"PixelEditor-module_genDirGrid__xjEp7","genRow":"PixelEditor-module_genRow__awCw9","genPresetGrid":"PixelEditor-module_genPresetGrid__f9XK6","genPresetBtn":"PixelEditor-module_genPresetBtn__5C2We","genPresetBtnActive":"PixelEditor-module_genPresetBtnActive__WAGew","genPartGrid":"PixelEditor-module_genPartGrid__l17oc","genPartBtn":"PixelEditor-module_genPartBtn__5OO82","genColorSwatches":"PixelEditor-module_genColorSwatches__acI6q","genColorSwatch":"PixelEditor-module_genColorSwatch__JE8BO","genAssemblyItem":"PixelEditor-module_genAssemblyItem__zNL2P","genAssemblyName":"PixelEditor-module_genAssemblyName__GU-kr","genFooter":"PixelEditor-module_genFooter__WkyJp","btnIcon":"PixelEditor-module_btnIcon__O59l9","propSelect":"PixelEditor-module_propSelect__4P0Qi"};
 
 module.exports = styles;

package/dist/cjs/pixel/PixelEditorCanvas.js

@@ -2,13 +2,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var PixelEditor_module = require('./PixelEditor.module.css.js');
 
-const PixelEditorCanvas = React.memo(({ api }) => (jsxRuntime.jsx("div", { ref: api.boxRef, className: PixelEditor_module.canvasContainer, children: jsxRuntime.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 } = i18n.useNiceTranslation();
+    return (jsxRuntime.jsx("div", { ref: api.boxRef, className: PixelEditor_module.canvasContainer, children: jsxRuntime.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' });
 
 module.exports = PixelEditorCanvas;

package/dist/cjs/pixel/PixelEditorMenuBar.js

@@ -6,7 +6,8 @@ var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
 var PixelEditor_module = require('./PixelEditor.module.css.js');
 
-const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => {
+const PixelEditorMenuBar = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api, hasOnSaveToLibrary, onOpenGenerator }) => {
     const items = [
         {
             id: 'file',
@@ -95,7 +96,6 @@ const PixelEditorMenuBar = React.memo(({ api, hasOnSaveToLibrary, onOpenGenerato
         },
     ];
     return (jsxRuntime.jsx("div", { className: PixelEditor_module.menuBar, children: jsxRuntime.jsx(ui.NiceMenu, { items: items, orientation: "horizontal", variant: "ghost", density: "compact" }) }));
-});
-PixelEditorMenuBar.displayName = 'PixelEditorMenuBar';
+}), { displayName: 'PixelEditorMenuBar' });
 
 module.exports = PixelEditorMenuBar;

package/dist/cjs/pixel/PixelEditorRightPanel.js

@@ -4,36 +4,40 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var HSVPicker = require('./HSVPicker.js');
 var PixelEditor_module = require('./PixelEditor.module.css.js');
 var pixelEditorTypes = require('./pixelEditorTypes.js');
 
 /** A collapsible section header: rotating chevron + title. */
 const sectionTrigger = (title) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: PixelEditor_module.collapseChevron, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "chevron-right", size: 12 }) }), jsxRuntime.jsx("span", { children: title })] }));
-const PixelEditorRightPanel = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.rightPanel, children: [jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Brush'), children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Size" }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 64, value: api.brush.size, onChange: (val) => api.setBrush((b) => ({ ...b, size: val })), "aria-label": "Brush size" }), jsxRuntime.jsx("span", { children: api.brush.size })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Opacity" }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.opacity, onChange: (val) => api.setBrush((b) => ({ ...b, opacity: val })), "aria-label": "Brush opacity" }), jsxRuntime.jsxs("span", { children: [api.brush.opacity, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Flow" }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.flow, onChange: (val) => api.setBrush((b) => ({ ...b, flow: val })), "aria-label": "Brush flow" }), jsxRuntime.jsxs("span", { children: [api.brush.flow, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Hard" }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 100, value: api.brush.hardness, onChange: (val) => api.setBrush((b) => ({ ...b, hardness: val })), "aria-label": "Brush hardness" }), jsxRuntime.jsxs("span", { children: [api.brush.hardness, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: "Space" }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.spacing, onChange: (val) => api.setBrush((b) => ({ ...b, spacing: val })), "aria-label": "Brush spacing" }), jsxRuntime.jsxs("span", { children: [api.brush.spacing, "%"] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.brushShapes, children: pixelEditorTypes.BRUSH_SHAPES.map((s) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${api.brush.shape === s.id ? PixelEditor_module.miniBtnActive : ''}`, variant: api.brush.shape === s.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setBrush((b) => ({ ...b, shape: s.id })), title: s.label, "aria-label": s.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: s.icon, size: 16 }) }, s.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.pressureToggles, children: [jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.brush.pressureSize, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureSize: checked })), label: "Pressure\u2192Size", className: PixelEditor_module.checkLabel }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.brush.pressureOpacity, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureOpacity: checked })), label: "Pressure\u2192Opacity", className: PixelEditor_module.checkLabel })] })] }), jsxRuntime.jsx(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Colour'), children: jsxRuntime.jsx(HSVPicker.HSVPicker, { color: api.col1, onChange: api.setCol1 }) }), jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Layers'), children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.layerActions, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addLayer, title: "Add Layer", "aria-label": "Add Layer", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupLayer, title: "Duplicate Layer", "aria-label": "Duplicate Layer", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "copy", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmLayer, title: "Remove Layer", "aria-label": "Remove Layer", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "minus", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.mergeDown, title: "Merge Down", "aria-label": "Merge Down", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerUp, title: "Move Up", "aria-label": "Move Up", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-up", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerDown, title: "Move Down", "aria-label": "Move Down", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 }) })] }), [...api.layers]
-                    .map((l, i) => ({ l, i }))
-                    .reverse()
-                    .map(({ l, i }) => (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.layerItem} ${i === api.aLi ? PixelEditor_module.layerItemActive : ''}`, onClick: () => api.setALi(i), children: [jsxRuntime.jsx("span", { className: PixelEditor_module.layerVis, onClick: (e) => {
-                                e.stopPropagation();
-                                api.toggleVis(i);
-                            }, title: l.visible ? 'Visible' : 'Hidden', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsxRuntime.jsx("span", { className: PixelEditor_module.layerLock, onClick: (e) => {
-                                e.stopPropagation();
-                                api.toggleLock(i);
-                            }, title: l.locked ? 'Locked' : 'Unlocked', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "lock", size: 14 }) }), api.editingLayerName === l.id ? (jsxRuntime.jsx(ui.NiceTextInput, { className: PixelEditor_module.layerNameInput, value: l.name, onChange: (val) => api.renameLayer(i, val), onBlur: () => api.setEditingLayerName(null), onKeyDown: (e) => {
-                                if (e.key === 'Enter') {
-                                    api.setEditingLayerName(null);
+const PixelEditorRightPanel = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api }) => {
+    const { t } = i18n.useNiceTranslation();
+    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.rightPanel, children: [jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Brush'), children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.size', 'Size') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 64, value: api.brush.size, onChange: (val) => api.setBrush((b) => ({ ...b, size: val })), "aria-label": t('pixelEditorRightPanel.brushSize', 'Brush size') }), jsxRuntime.jsx("span", { children: api.brush.size })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.opacity', 'Opacity') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.opacity, onChange: (val) => api.setBrush((b) => ({ ...b, opacity: val })), "aria-label": t('pixelEditorRightPanel.brushOpacity', 'Brush opacity') }), jsxRuntime.jsxs("span", { children: [api.brush.opacity, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.flow', 'Flow') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.flow, onChange: (val) => api.setBrush((b) => ({ ...b, flow: val })), "aria-label": t('pixelEditorRightPanel.brushFlow', 'Brush flow') }), jsxRuntime.jsxs("span", { children: [api.brush.flow, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.hard', 'Hard') }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 100, value: api.brush.hardness, onChange: (val) => api.setBrush((b) => ({ ...b, hardness: val })), "aria-label": t('pixelEditorRightPanel.brushHardness', 'Brush hardness') }), jsxRuntime.jsxs("span", { children: [api.brush.hardness, "%"] })] }), jsxRuntime.jsxs("div", { className: PixelEditor_module.brushSlider, children: [jsxRuntime.jsx("label", { children: t('pixelEditorRightPanel.space', 'Space') }), jsxRuntime.jsx(ui.NiceSlider, { min: 1, max: 100, value: api.brush.spacing, onChange: (val) => api.setBrush((b) => ({ ...b, spacing: val })), "aria-label": t('pixelEditorRightPanel.brushSpacing', 'Brush spacing') }), jsxRuntime.jsxs("span", { children: [api.brush.spacing, "%"] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.brushShapes, children: pixelEditorTypes.BRUSH_SHAPES.map((s) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${api.brush.shape === s.id ? PixelEditor_module.miniBtnActive : ''}`, variant: api.brush.shape === s.id ? 'primary' : 'ghost', size: "sm", onClick: () => api.setBrush((b) => ({ ...b, shape: s.id })), title: s.label, "aria-label": s.label, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: s.icon, size: 16 }) }, s.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.pressureToggles, children: [jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.brush.pressureSize, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureSize: checked })), label: t('pixelEditorRightPanel.pressureSize', 'Pressure→Size'), className: PixelEditor_module.checkLabel }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.brush.pressureOpacity, onChange: (checked) => api.setBrush((b) => ({ ...b, pressureOpacity: checked })), label: t('pixelEditorRightPanel.pressureOpacity', 'Pressure→Opacity'), className: PixelEditor_module.checkLabel })] })] }), jsxRuntime.jsx(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Colour'), children: jsxRuntime.jsx(HSVPicker.HSVPicker, { color: api.col1, onChange: api.setCol1 }) }), jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Layers'), children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.layerActions, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addLayer, title: t('pixelEditorRightPanel.addLayer', 'Add Layer'), "aria-label": t('pixelEditorRightPanel.addLayer', 'Add Layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupLayer, title: t('pixelEditorRightPanel.duplicateLayer', 'Duplicate Layer'), "aria-label": t('pixelEditorRightPanel.duplicateLayer', 'Duplicate Layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "copy", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmLayer, title: t('pixelEditorRightPanel.removeLayer', 'Remove Layer'), "aria-label": t('pixelEditorRightPanel.removeLayer', 'Remove Layer'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "minus", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.mergeDown, title: t('pixelEditorRightPanel.mergeDown', 'Merge Down'), "aria-label": t('pixelEditorRightPanel.mergeDown', 'Merge Down'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerUp, title: t('pixelEditorRightPanel.moveUp', 'Move Up'), "aria-label": t('pixelEditorRightPanel.moveUp', 'Move Up'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-up", size: 16 }) }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.moveLayerDown, title: t('pixelEditorRightPanel.moveDown', 'Move Down'), "aria-label": t('pixelEditorRightPanel.moveDown', 'Move Down'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "arrow-down", size: 16 }) })] }), [...api.layers]
+                        .map((l, i) => ({ l, i }))
+                        .reverse()
+                        .map(({ l, i }) => (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.layerItem} ${i === api.aLi ? PixelEditor_module.layerItemActive : ''}`, onClick: () => api.setALi(i), children: [jsxRuntime.jsx("span", { className: PixelEditor_module.layerVis, onClick: (e) => {
+                                    e.stopPropagation();
+                                    api.toggleVis(i);
+                                }, title: l.visible ? 'Visible' : 'Hidden', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: l.visible ? 'eye' : 'eye-off', size: 14 }) }), jsxRuntime.jsx("span", { className: PixelEditor_module.layerLock, onClick: (e) => {
+                                    e.stopPropagation();
+                                    api.toggleLock(i);
+                                }, title: l.locked ? 'Locked' : 'Unlocked', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "lock", size: 14 }) }), api.editingLayerName === l.id ? (jsxRuntime.jsx(ui.NiceTextInput, { className: PixelEditor_module.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') })) : (jsxRuntime.jsx("span", { className: PixelEditor_module.layerName, onDoubleClick: (e) => {
+                                    e.stopPropagation();
+                                    api.setEditingLayerName(l.id);
+                                }, children: l.name })), jsxRuntime.jsxs("span", { className: PixelEditor_module.layerOpacity, children: [Math.round((l.opacity / 255) * 100), "%"] })] }, l.id))), api.layers[api.aLi] && (jsxRuntime.jsxs("div", { className: PixelEditor_module.layerControls, children: [jsxRuntime.jsx(ui.NiceSelect, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: PixelEditor_module.blendSelect, "aria-label": t('pixelEditorRightPanel.blendMode', 'Blend mode'), options: pixelEditorTypes.BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: PixelEditor_module.layerOpSlider, title: `Opacity: ${Math.round((api.layers[api.aLi].opacity / 255) * 100)}%` })] }))] }), jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Palette'), children: [jsxRuntime.jsx("div", { className: PixelEditor_module.layerActions, children: jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: () => {
+                                if (!api.pal.includes(api.col1)) {
+                                    api.setPal((p) => [...p, api.col1]);
                                 }
-                            }, autoFocus: true, "aria-label": "Layer name" })) : (jsxRuntime.jsx("span", { className: PixelEditor_module.layerName, onDoubleClick: (e) => {
-                                e.stopPropagation();
-                                api.setEditingLayerName(l.id);
-                            }, children: l.name })), jsxRuntime.jsxs("span", { className: PixelEditor_module.layerOpacity, children: [Math.round((l.opacity / 255) * 100), "%"] })] }, l.id))), api.layers[api.aLi] && (jsxRuntime.jsxs("div", { className: PixelEditor_module.layerControls, children: [jsxRuntime.jsx(ui.NiceSelect, { value: api.layers[api.aLi].blendMode, onChange: (val) => api.setLayerBlendMode(api.aLi, val), className: PixelEditor_module.blendSelect, "aria-label": "Blend mode", options: pixelEditorTypes.BLEND_MODES.map((m) => ({ value: m, label: m })) }), jsxRuntime.jsx(ui.NiceSlider, { min: 0, max: 255, value: api.layers[api.aLi].opacity, onChange: (val) => api.setLayerOpacity(api.aLi, val), className: PixelEditor_module.layerOpSlider, title: `Opacity: ${Math.round((api.layers[api.aLi].opacity / 255) * 100)}%` })] }))] }), jsxRuntime.jsxs(ui.NiceCollapse, { className: PixelEditor_module.panelSection, defaultExpanded: true, trigger: sectionTrigger('Palette'), children: [jsxRuntime.jsx("div", { className: PixelEditor_module.layerActions, children: jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: () => {
-                            if (!api.pal.includes(api.col1)) {
-                                api.setPal((p) => [...p, api.col1]);
-                            }
-                        }, title: "Add current colour", "aria-label": "Add current colour", children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 }) }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.paletteGrid, children: api.pal.map((c, i) => (jsxRuntime.jsx("div", { className: `${PixelEditor_module.paletteSwatch} ${c === api.col1 ? PixelEditor_module.paletteSwatchActive : ''}`, style: { backgroundColor: c }, onClick: () => api.setCol1(c), onContextMenu: (e) => {
-                            e.preventDefault();
-                            api.setCol2(c);
-                        }, title: c }, i))) })] })] })));
-PixelEditorRightPanel.displayName = 'PixelEditorRightPanel';
+                            }, title: t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), "aria-label": t('pixelEditorRightPanel.addCurrentColour', 'Add current colour'), children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "plus", size: 16 }) }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.paletteGrid, children: api.pal.map((c, i) => (jsxRuntime.jsx("div", { className: `${PixelEditor_module.paletteSwatch} ${c === api.col1 ? PixelEditor_module.paletteSwatchActive : ''}`, style: { backgroundColor: c }, onClick: () => api.setCol1(c), onContextMenu: (e) => {
+                                e.preventDefault();
+                                api.setCol2(c);
+                            }, title: c }, i))) })] })] }));
+}), { displayName: 'PixelEditorRightPanel' });
 
 module.exports = PixelEditorRightPanel;

package/dist/cjs/pixel/PixelEditorStatusBar.js

@@ -2,13 +2,17 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var PixelEditor_module = require('./PixelEditor.module.css.js');
 var pixelEditorTypes = require('./pixelEditorTypes.js');
 
-const PixelEditorStatusBar = React.memo(({ api }) => {
+const PixelEditorStatusBar = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api }) => {
     var _a;
-    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.statusBar, children: [jsxRuntime.jsxs("span", { children: [api.dw, "\u00D7", api.dh] }), jsxRuntime.jsxs("span", { children: ["Zoom ", Math.round(api.zoom * 100), "%"] }), api.cursor && pixelEditorTypes.inB(api.cursor.x, api.cursor.y, api.dw, api.dh) && (jsxRuntime.jsxs("span", { children: ["(", api.cursor.x, ", ", api.cursor.y, ")"] })), jsxRuntime.jsx("span", { children: api.tool }), jsxRuntime.jsxs("span", { children: ["Brush: ", api.brush.size, "px ", api.brush.shape] }), jsxRuntime.jsxs("span", { children: ["Pressure: ", Math.round(api.pressure * 100), "%"] }), jsxRuntime.jsxs("span", { children: ["Layer: ", (_a = api.layers[api.aLi]) === null || _a === void 0 ? void 0 : _a.name] }), jsxRuntime.jsxs("span", { children: ["Frame ", api.afi + 1, "/", api.fc] }), api.symmetry !== 'none' && jsxRuntime.jsxs("span", { children: ["Sym: ", api.symmetry] }), api.shapeFilled && jsxRuntime.jsx("span", { children: "Filled" }), api.sel && (jsxRuntime.jsxs("span", { children: ["Sel: ", api.sel.w, "\u00D7", api.sel.h] }))] }));
-});
-PixelEditorStatusBar.displayName = 'PixelEditorStatusBar';
+    const { t } = i18n.useNiceTranslation();
+    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.statusBar, children: [jsxRuntime.jsxs("span", { children: [api.dw, "\u00D7", api.dh] }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.zoom', 'Zoom {zoom}%').replace('{zoom}', String(Math.round(api.zoom * 100))) }), api.cursor && pixelEditorTypes.inB(api.cursor.x, api.cursor.y, api.dw, api.dh) && (jsxRuntime.jsxs("span", { children: ["(", api.cursor.x, ", ", api.cursor.y, ")"] })), jsxRuntime.jsx("span", { children: api.tool }), jsxRuntime.jsxs("span", { children: ["Brush: ", api.brush.size, "px ", api.brush.shape] }), jsxRuntime.jsxs("span", { children: ["Pressure: ", Math.round(api.pressure * 100), "%"] }), jsxRuntime.jsxs("span", { children: ["Layer: ", (_a = api.layers[api.aLi]) === null || _a === void 0 ? void 0 : _a.name] }), jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.frame', 'Frame {current}/{total}')
+                    .replace('{current}', String(api.afi + 1))
+                    .replace('{total}', String(api.fc)) }), api.symmetry !== 'none' && jsxRuntime.jsxs("span", { children: ["Sym: ", api.symmetry] }), api.shapeFilled && jsxRuntime.jsx("span", { children: t('pixelEditorStatusBar.filled', 'Filled') }), api.sel && (jsxRuntime.jsxs("span", { children: ["Sel: ", api.sel.w, "\u00D7", api.sel.h] }))] }));
+}), { displayName: 'PixelEditorStatusBar' });
 
 module.exports = PixelEditorStatusBar;

package/dist/cjs/pixel/PixelEditorTimeline.js

@@ -4,9 +4,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var PixelEditor_module = require('./PixelEditor.module.css.js');
 
-const PixelEditorTimeline = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: "+ Frame" }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": "Duplicate frame", children: "Dup" }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": "Remove frame", children: "\u2212 Frame" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), "aria-label": api.playing ? 'Pause' : 'Play', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsxRuntime.jsx("label", { children: "FPS:" }), jsxRuntime.jsx(ui.NiceNumberInput, { min: 1, max: 60, value: api.fps, onChange: (val) => api.setFps(val !== null && val !== void 0 ? val : 8), "aria-label": "Frames per second" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: "Onion" }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { children: [api.fc, " frame", api.fc !== 1 ? 's' : ''] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.frameThumb} ${fi === api.afi ? PixelEditor_module.frameThumbActive : ''}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsxRuntime.jsx("img", { src: api.thumbs[fi], alt: `Frame ${fi + 1}`, style: { width: 36, height: 36, imageRendering: 'pixelated', objectFit: 'contain' } })), jsxRuntime.jsx("span", { className: PixelEditor_module.frameNum, children: fi + 1 })] }, fi))) })] })));
-PixelEditorTimeline.displayName = 'PixelEditorTimeline';
+const PixelEditorTimeline = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api }) => {
+    const { t } = i18n.useNiceTranslation();
+    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.bottomPanel, children: [jsxRuntime.jsxs("div", { className: PixelEditor_module.timelineControls, children: [jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.addFrame, children: "+ Frame" }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.dupFrame, "aria-label": t('pixelEditorTimeline.duplicateFrame', 'Duplicate frame'), children: "Dup" }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: api.rmFrame, "aria-label": t('pixelEditorTimeline.removeFrame', 'Remove frame'), children: "\u2212 Frame" }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceButton, { variant: "ghost", size: "sm", onClick: () => api.setPlaying((p) => !p), "aria-label": api.playing ? 'Pause' : 'Play', children: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.playing ? 'pause' : 'play', size: 16 }) }), jsxRuntime.jsx("label", { children: "FPS:" }), jsxRuntime.jsx(ui.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') }), jsxRuntime.jsx("div", { className: PixelEditor_module.menuSep }), jsxRuntime.jsx(ui.NiceCheckbox, { checked: api.onion, onChange: (checked) => api.setOnion(checked), label: t('pixelEditorTimeline.onion', 'Onion') }), jsxRuntime.jsx("div", { style: { flex: 1 } }), jsxRuntime.jsxs("span", { children: [api.fc, " frame", api.fc !== 1 ? 's' : ''] })] }), jsxRuntime.jsx("div", { className: PixelEditor_module.timelineFrames, children: Array.from({ length: api.fc }, (_, fi) => (jsxRuntime.jsxs("div", { className: `${PixelEditor_module.frameThumb} ${fi === api.afi ? PixelEditor_module.frameThumbActive : ''}`, onClick: () => api.setAfi(fi), children: [api.thumbs[fi] && (jsxRuntime.jsx("img", { src: api.thumbs[fi], alt: `Frame ${fi + 1}`, style: {
+                                width: 36,
+                                height: 36,
+                                imageRendering: 'pixelated',
+                                objectFit: 'contain',
+                            } })), jsxRuntime.jsx("span", { className: PixelEditor_module.frameNum, children: fi + 1 })] }, fi))) })] }));
+}), { displayName: 'PixelEditorTimeline' });
 
 module.exports = PixelEditorTimeline;

package/dist/cjs/pixel/PixelEditorToolbar.js

@@ -4,14 +4,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@nice2dev/ui');
 var uiCore = require('@nice2dev/ui-core');
 var React = require('react');
+var i18n = require('../core/i18n.js');
 var PixelEditor_module = require('./PixelEditor.module.css.js');
 var pixelEditorTypes = require('./pixelEditorTypes.js');
 
-const PixelEditorToolbar = React.memo(({ api }) => (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.tool === t.id ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsxRuntime.jsx("div", { className: PixelEditor_module.toolSep }), jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.shapeFilled ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.shapeFilled ? 'check-square' : 'square', size: 16 }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.toolGroup, children: pixelEditorTypes.SYMMETRY_MODES.map((m) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${api.symmetry === m.id ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: m.icon, size: 14 }) }, m.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.colorSwatches, children: [jsxRuntime.jsx("label", { style: { position: 'relative', width: 28, height: 28, cursor: 'pointer' }, title: "Primary Colour (click for HSV)", children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsxRuntime.jsx("label", { style: { position: 'relative', width: 22, height: 22, cursor: 'pointer' }, title: "Secondary Colour", children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => {
-                        const tmp = api.col1;
-                        api.setCol1(api.col2);
-                        api.setCol2(tmp);
-                    }, title: "Swap (X)", "aria-label": "Swap colours", style: { fontSize: 12, width: 24, height: 24 }, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "shuffle", size: 14 }) })] })] })));
-PixelEditorToolbar.displayName = 'PixelEditorToolbar';
+const PixelEditorToolbar = /* @__PURE__ */ Object.assign(
+/* @__PURE__ */ React.memo(({ api }) => {
+    const { t } = i18n.useNiceTranslation();
+    return (jsxRuntime.jsxs("div", { className: PixelEditor_module.toolbar, children: [pixelEditorTypes.TOOLS.map((t) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.tool === t.id ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: t.icon, size: 16 }) }, t.id))), jsxRuntime.jsx("div", { className: PixelEditor_module.toolSep }), jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.toolBtn} ${api.shapeFilled ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: api.shapeFilled ? 'check-square' : 'square', size: 16 }) }), jsxRuntime.jsx("div", { className: PixelEditor_module.toolGroup, children: pixelEditorTypes.SYMMETRY_MODES.map((m) => (jsxRuntime.jsx(ui.NiceButton, { className: `${PixelEditor_module.miniBtn} ${api.symmetry === m.id ? PixelEditor_module.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: jsxRuntime.jsx(uiCore.NiceIcon, { name: m.icon, size: 14 }) }, m.id))) }), jsxRuntime.jsxs("div", { className: PixelEditor_module.colorSwatches, children: [jsxRuntime.jsx("label", { style: { position: 'relative', width: 28, height: 28, cursor: 'pointer' }, title: t('pixelEditorToolbar.primaryColourClickForHsv', 'Primary Colour (click for HSV)'), children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col1, onChange: (c) => api.setCol1(c) }) }), jsxRuntime.jsx("label", { style: { position: 'relative', width: 22, height: 22, cursor: 'pointer' }, title: t('pixelEditorToolbar.secondaryColour', 'Secondary Colour'), children: jsxRuntime.jsx(ui.NiceColorPicker, { value: api.col2, onChange: (c) => api.setCol2(c) }) }), jsxRuntime.jsx(ui.NiceButton, { className: PixelEditor_module.toolBtn, variant: "ghost", size: "sm", onClick: () => {
+                            const tmp = api.col1;
+                            api.setCol1(api.col2);
+                            api.setCol2(tmp);
+                        }, title: t('pixelEditorToolbar.swapX', 'Swap (X)'), "aria-label": t('pixelEditorToolbar.swapColours', 'Swap colours'), style: { fontSize: 12, width: 24, height: 24 }, children: jsxRuntime.jsx(uiCore.NiceIcon, { name: "shuffle", size: 14 }) })] })] }));
+}), { displayName: 'PixelEditorToolbar' });
 
 module.exports = PixelEditorToolbar;